fix(package.json): Update @ohif/extension-dicom-microscopy to fix resizing behaviour

fix #550

.gitattributes

@@ -36,4 +36,5 @@
 *.pdf binary
 *.ez binary
 *.bz2 binary
-*.swp binary
+*.swp binary
+*.fig binary

extensions/ohif-cornerstone-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-cornerstone",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "description": "OHIF extension for Cornerstone",
   "author": "OHIF",
   "license": "MIT",

extensions/ohif-cornerstone-extension/src/commandsModule.js

@@ -1,5 +1,6 @@
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
+import OHIF from 'ohif-core';
 
 const actions = {
   rotateViewport: ({ viewports, rotation }) => {
@@ -89,15 +90,60 @@ const actions = {
     // TODO
     console.warn('updateDisplaySet: ', direction);
   },
-  clearAnnotations: () => {
-    console.warn('clearAnnotations: not yet implemented');
-    // const toolState =
-    //   cornerstoneTools.globalImageIdSpecificToolStateManager.toolState;
-    // if (!toolState) return;
-    // Object.keys(toolState).forEach(imageId => {
-    //   if (!cornerstoneImageId || cornerstoneImageId === imageId)
-    //     delete toolState[imageId];
-    // });
+  clearAnnotations: ({ viewports }) => {
+    const element = _getActiveViewportEnabledElement(
+      viewports.viewportSpecificData,
+      viewports.activeViewportIndex
+    );
+    if (!element) {
+      return;
+    }
+
+    const enabledElement = cornerstone.getEnabledElement(element);
+    if (!enabledElement || !enabledElement.image) {
+      return;
+    }
+
+    const {
+      toolState,
+    } = cornerstoneTools.globalImageIdSpecificToolStateManager;
+    if (
+      !toolState ||
+      toolState.hasOwnProperty(enabledElement.image.imageId) === false
+    ) {
+      return;
+    }
+
+    const imageIdToolState = toolState[enabledElement.image.imageId];
+
+    const measurementsToRemove = [];
+
+    Object.keys(imageIdToolState).forEach(toolType => {
+      const { data } = imageIdToolState[toolType];
+
+      data.forEach(measurementData => {
+        const { _id, lesionNamingNumber, measurementNumber } = measurementData;
+        if (!_id) {
+          return;
+        }
+
+        measurementsToRemove.push({
+          toolType,
+          _id,
+          lesionNamingNumber,
+          measurementNumber,
+        });
+      });
+    });
+
+    measurementsToRemove.forEach(measurementData => {
+      OHIF.measurements.MeasurementHandlers.onRemoved({
+        detail: {
+          toolType: measurementData.toolType,
+          measurementData,
+        },
+      });
+    });
   },
 };
 
@@ -147,7 +193,11 @@ const definitions = {
     storeContexts: ['viewports'],
     options: {},
   },
-  // TODO: Clear Annotations
+  clearAnnotations: {
+    commandFn: actions.clearAnnotations,
+    storeContexts: ['viewports'],
+    options: {},
+  },
   // TODO: Next/Previous image
   // TODO: First/Last image
   // Next/Previous series/DisplaySet

extensions/ohif-cornerstone-extension/src/toolbarModule.js

@@ -17,12 +17,12 @@
 //  -- ACTIVE_ROUTE::VIEWER
 //  -- ACTIVE_VIEWPORT::CORNERSTONE
 // setToolActive commands should receive the button event that triggered
-// so we can do the "bind to this butyon" magic
+// so we can do the "bind to this button" magic
 
 const TOOLBAR_BUTTON_TYPES = {
   COMMAND: 'command',
   SET_TOOL_ACTIVE: 'setToolActive',
-  BUILT_IN: 'builtIn',
+  BUILT_IN: 'builtIn'
 };
 
 const definitions = [
@@ -98,6 +98,98 @@ const definitions = [
       behavior: 'CINE',
     },
   },
+  {
+    id: 'More',
+    label: 'More',
+    icon: 'ellipse-circle',
+    buttons: [
+      {
+        id: 'Magnify',
+        label: 'Magnify',
+        icon: 'circle',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Magnify' },
+      },
+      {
+        id: 'WwwcRegion',
+        label: 'ROI Window',
+        icon: 'stop',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'WwwcRegion' },
+      },
+      {
+        id: 'DragProbe',
+        label: 'Probe',
+        icon: 'dot-circle',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'DragProbe' },
+      },
+      {
+        id: 'EllipticalRoi',
+        label: 'Ellipse',
+        icon: 'circle-o',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'EllipticalRoi' },
+      },
+      {
+        id: 'RectangleRoi',
+        label: 'Rectangle',
+        icon: 'square-o',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'RectangleRoi' },
+      },
+      {
+        id: 'Invert',
+        label: 'Invert',
+        icon: 'adjust',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'invertViewport',
+      },
+      {
+        id: 'RotateRight',
+        label: 'Rotate Right',
+        icon: 'rotate-right',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'rotateViewportCW',
+      },
+      {
+        id: 'FlipH',
+        label: 'Flip H',
+        icon: 'ellipse-h',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'flipViewportHorizontal',
+      },
+      {
+        id: 'FlipV',
+        label: 'Flip V',
+        icon: 'ellipse-v',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'flipViewportVertical',
+      },
+      {
+        id: 'Clear',
+        label: 'Clear',
+        icon: 'trash',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'clearAnnotations',
+      },
+    ],
+  },
 ];
 
 export default {

extensions/ohif-dicom-microscopy-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ohif/extension-dicom-microscopy",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "OHIF extension for Dicom Microscopy",
   "author": "OHIF",
   "license": "MIT",
@@ -19,9 +19,10 @@
     "lint": "eslint -c .eslintrc --fix src && prettier --single-quote --write src/**/*.{js,jsx,json,css}"
   },
   "peerDependencies": {
+    "ohif-core": "^0.6.0",
     "react": "^15.0.0 || ^16.0.0",
     "react-dom": "^15.0.0 || ^16.0.0",
-    "ohif-core": "^0.6.0"
+    "react-resize-detector": "^4.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",
@@ -81,6 +82,7 @@
   "dependencies": {
     "@babel/runtime": "^7.2.0",
     "classnames": "^2.2.6",
-    "dicom-microscopy-viewer": "^0.4.3"
+    "dicom-microscopy-viewer": "0.5.0",
+    "lodash.debounce": "^4.0.8"
   }
 }

extensions/ohif-dicom-microscopy-extension/rollup.config.js

@@ -10,6 +10,7 @@ import builtins from 'rollup-plugin-node-builtins';
 
 const globals = {
   react: 'React',
+  'react-resize-detector': 'ReactResizeDetector',
   'react-dom': 'ReactDOM',
   'ohif-core': 'OHIF'
 };
@@ -52,6 +53,15 @@ export default {
         ],
         '.yalc/dicom-microscopy-viewer/build/dicom-microscopy-viewer.js': [
           'api'
+        ],
+        'node_modules/react-resize-detector/node_modules/prop-types/index.js': [
+          'bool',
+          'number',
+          'string',
+          'shape',
+          'func',
+          'any',
+          'node'
         ]
       }
     })

extensions/ohif-dicom-microscopy-extension/src/DicomMicroscopyViewport.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-
+import ReactResizeDetector from 'react-resize-detector';
 import { api } from 'dicom-microscopy-viewer';
+import debounce from 'lodash.debounce';
 
 const microscopyViewer = api.VLWholeSlideMicroscopyImageViewer;
 
@@ -9,10 +10,16 @@ class DicomMicroscopyViewport extends Component {
     error: null,
   };
 
+  viewer = null;
+
   constructor(props) {
     super(props);
 
     this.container = React.createRef();
+
+    this.debouncedResize = debounce(() => {
+      if (this.viewer) this.viewer.resize();
+    }, 100);
   }
 
   // install the microscopy renderer into the web page.
@@ -52,17 +59,18 @@ class DicomMicroscopyViewport extends Component {
       .then(metadata => {
         metadata = metadata.filter(m => m);
 
-        const viewer = new microscopyViewer({
+        this.viewer = new microscopyViewer({
           client: dicomWebClient,
           metadata,
+          retrieveRendered: false
         });
 
-        viewer.render({ container, retrieveRendered: true });
+        this.viewer.render({ container });
       });
   }
 
   componentDidMount() {
-    const { studies, displaySet } = this.props.viewportData;
+    const { displaySet } = this.props.viewportData;
 
     this.installOpenLayersRenderer(this.container.current, displaySet);
   }
@@ -71,6 +79,13 @@ class DicomMicroscopyViewport extends Component {
     const style = { width: '100%', height: '100%' };
     return (
       <div className={'DicomMicroscopyViewer'} style={style}>
+        {ReactResizeDetector && (
+          <ReactResizeDetector
+            handleWidth
+            handleHeight
+            onResize={this.onWindowResize}
+          />
+        )}
         {this.state.error ? (
           <h2>{JSON.stringify(this.state.error)}</h2>
         ) : (
@@ -79,6 +94,10 @@ class DicomMicroscopyViewport extends Component {
       </div>
     );
   }
+
+  onWindowResize = () => {
+    this.debouncedResize();
+  };
 }
 
 export default DicomMicroscopyViewport;

extensions/ohif-dicom-microscopy-extension/yarn.lock

@@ -1617,10 +1617,10 @@ des.js@^1.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
-dicom-microscopy-viewer@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/dicom-microscopy-viewer/-/dicom-microscopy-viewer-0.4.3.tgz#defaa821026765bcd109b97258742df72a9b92bb"
-  integrity sha512-PjT3qH0hv6dKOQzXFIHw4w/d8QCbiUOJOGZHvAkkRvnjeNRP7/ri8vbFvcSev+nYxKskNb1Tn0xd1+dsDpPGNw==
+dicom-microscopy-viewer@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/dicom-microscopy-viewer/-/dicom-microscopy-viewer-0.5.0.tgz#e4f74261337d8a78d51490af0d17edc63997e619"
+  integrity sha512-r3BPLBvexv9v/Rr/FBTgXgp7orIFKLWW5uYM6IsYpz36ttU84Edk7Z2GAyk6887QNsfEMLzYV+5ik6HRrMg0cA==
   dependencies:
     dicomweb-client "^0.4.2"
     ol "^5.3.0"
@@ -3199,6 +3199,11 @@ lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -3238,6 +3243,7 @@ longest-streak@^2.0.1:
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 

package.json

@@ -76,9 +76,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.5",
-    "@ohif/extension-cornerstone": "0.0.38",
+    "@ohif/extension-cornerstone": "0.0.39",
     "@ohif/extension-dicom-html": "0.0.3",
-    "@ohif/extension-dicom-microscopy": "0.0.8",
+    "@ohif/extension-dicom-microscopy": "0.0.9",
     "@ohif/extension-dicom-pdf": "0.0.7",
     "@ohif/extension-vtk": "0.1.3",
     "@ohif/i18n": "0.2.2",

src/connectedComponents/PluginSwitch.js

@@ -13,7 +13,7 @@ class PluginSwitch extends Component {
   render() {
     return (
       <div className="PluginSwitch">
-        <ExpandableToolMenu buttons={this.props.buttons} />
+        <ExpandableToolMenu buttons={this.props.buttons} text={'View'} />
       </div>
     );
   }

src/connectedComponents/ToolbarRow.js

@@ -1,11 +1,7 @@
 import './ToolbarRow.css';
 
 import React, { Component } from 'react';
-import {
-  RoundedButtonGroup,
-  ToolbarButton,
-  ExpandableToolMenu,
-} from 'react-viewerbase';
+import { ExpandableToolMenu, RoundedButtonGroup, ToolbarButton } from 'react-viewerbase';
 import { commandsManager, extensionManager } from './../App.js';
 
 import ConnectedCineDialog from './ConnectedCineDialog';
@@ -155,7 +151,7 @@ class ToolbarRow extends Component {
  */
 function _getButtonComponents(toolbarButtons, activeButtons) {
   return toolbarButtons.map((button, index) => {
-    if (button.buttons) {
+    if (button.buttons && button.buttons.length) {
       // Iterate over button definitions and update `onClick` behavior
       const childButtons = button.buttons.map(childButton => {
         childButton.onClick = _handleToolbarButtonClick.bind(this, childButton);
@@ -171,7 +167,6 @@ function _getButtonComponents(toolbarButtons, activeButtons) {
         />
       );
     }
-
     return (
       <ToolbarButton
         key={button.id}

src/setupTools.js

@@ -145,6 +145,8 @@ export default function setupTools(store) {
     { name: 'Pan', mouseButtonMasks: [1, 4] },
     { name: 'Zoom', mouseButtonMasks: [1, 2] },
     { name: 'Wwwc', mouseButtonMasks: [1] },
+    { name: 'Magnify', mouseButtonMasks: [1] },
+    { name: 'WwwcRegion', mouseButtonMasks: [1] },
     {
       name: 'Bidirectional',
       props: {
@@ -210,6 +212,7 @@ export default function setupTools(store) {
       },
       mouseButtonMasks: [1],
     },
+    { name: 'DragProbe', mouseButtonMasks: [1] },
     { name: 'PanMultiTouch' },
     { name: 'ZoomTouchPinch' },
     { name: 'StackScrollMouseWheel' },

yarn.lock

@@ -1214,10 +1214,10 @@
     universal-user-agent "^2.0.0"
     url-template "^2.0.8"
 
-"@ohif/extension-cornerstone@0.0.38":
-  version "0.0.38"
-  resolved "https://registry.yarnpkg.com/@ohif/extension-cornerstone/-/extension-cornerstone-0.0.38.tgz#c1cdf2796bef441a293bcc045f9748c7b2c1395f"
-  integrity sha512-xWvK04s2xwjNlIvz4BpJ5pWP8wNmW9kpud1zkywR+TFYgthH2X64Tr01VZTOh8Mi+0Xkwe5IElb4Sw2aVA4SBg==
+"@ohif/extension-cornerstone@0.0.39":
+  version "0.0.39"
+  resolved "https://registry.yarnpkg.com/@ohif/extension-cornerstone/-/extension-cornerstone-0.0.39.tgz#aa70e3181cd1aa24101e815161fd9688722d26d6"
+  integrity sha512-HVu+tUYgdY7J9SxfA1R5YGuninMe+eOtGAX4Rx5YgunsH8QQmC+uhSjcclJt8Z+W7ac/iQ+k6Hx9smnPBqiObw==
   dependencies:
     "@babel/runtime" "^7.2.0"
     classnames "^2.2.6"
@@ -1231,14 +1231,15 @@
   dependencies:
     "@babel/runtime" "^7.2.0"
 
-"@ohif/extension-dicom-microscopy@0.0.8":
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/@ohif/extension-dicom-microscopy/-/extension-dicom-microscopy-0.0.8.tgz#833f7b87f530fe801c08f2ba241d9862a61358cb"
-  integrity sha512-ALj3k327iiuJtHWD34gwlWfh0vgoda5mp1rqPeZron75gFefOJYP/vR4lnu46Ud2mpqpElqSgYPV0AY8PK570g==
+"@ohif/extension-dicom-microscopy@0.0.9":
+  version "0.0.9"
+  resolved "https://registry.yarnpkg.com/@ohif/extension-dicom-microscopy/-/extension-dicom-microscopy-0.0.9.tgz#23cfbc44e06a51d94ab0b08db8e051720dbc9017"
+  integrity sha512-vqx25gHcT+MK+j77qTocGjSV8CstjCwQ2RDs1RuHrR3rUHdHOSbBkkyAjqMDF5GZWp0UY5JZV85aNuPK/9saqg==
   dependencies:
     "@babel/runtime" "^7.2.0"
     classnames "^2.2.6"
-    dicom-microscopy-viewer "^0.4.3"
+    dicom-microscopy-viewer "0.5.0"
+    lodash.debounce "^4.0.8"
 
 "@ohif/extension-dicom-pdf@0.0.7":
   version "0.0.7"
@@ -4514,10 +4515,10 @@ dezalgo@^1.0.0, dezalgo@~1.0.3:
     asap "^2.0.0"
     wrappy "1"
 
-dicom-microscopy-viewer@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/dicom-microscopy-viewer/-/dicom-microscopy-viewer-0.4.3.tgz#defaa821026765bcd109b97258742df72a9b92bb"
-  integrity sha512-PjT3qH0hv6dKOQzXFIHw4w/d8QCbiUOJOGZHvAkkRvnjeNRP7/ri8vbFvcSev+nYxKskNb1Tn0xd1+dsDpPGNw==
+dicom-microscopy-viewer@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/dicom-microscopy-viewer/-/dicom-microscopy-viewer-0.5.0.tgz#e4f74261337d8a78d51490af0d17edc63997e619"
+  integrity sha512-r3BPLBvexv9v/Rr/FBTgXgp7orIFKLWW5uYM6IsYpz36ttU84Edk7Z2GAyk6887QNsfEMLzYV+5ik6HRrMg0cA==
   dependencies:
     dicomweb-client "^0.4.2"
     ol "^5.3.0"