feat: extension panels

* Snapshot -- Switching branches
* fix classes and hooks for panel componet
* Restore button functionality
* feat: support for expandableToolMenu
* Shift cornerstoneTools config up a layer, and use globalToolSync
* Remaining initCornerstoneTools changes
* Pull in Segmentation Plugin
* Shift MeasurementsPanel to an extension
* Note regarding where data is coming from
* Make sure measurement callback is available
* Bump core version
* Shift MeasurementsTable to a local extensions directory
* Register appCommands as an extension
* Update package dependencies and yarn lock
* Support for panel width
* Ability to pass props to our panel component
* Add a safety check around calling our tacked on method for tool options
* Left sidebar plugins + fix activeIndex prop passed to sidebar.
* fix: viewer height
Now in a shared container w/ top bar, so we need to factor that in when calculating height
* lock file latest
* Update thumbnails if studies has changes
* bump cornerstone version to resolve globalToolSynch history issue
* Default panel to open; studies optional
* Bump minor version for ohif-cornestone-extension
* Simplify button logic
* Accommodate odd roundedButtonGroup value change emit
* Map viewers + selectedViewport instead of pulling off the window

extensions/_ohif-example-extension/src/index.js

@@ -7,12 +7,28 @@ export default {
    */
   id: 'example-extension',
 
-  getViewportModule() {},
+  /**
+   * LIFECYCLE HOOKS
+   */
+
+  preRegistration(extensionConfiguration) {},
+
+  /**
+   * MODULE GETTERS
+   */
+
+  getViewportModule() {
+    return '... react component ...';
+  },
   getSopClassHandlerModule() {
     return sopClassHandlerModule;
   },
-  getPanelModule() {},
-  getToolbarModule() {},
+  getPanelModule() {
+    return panelModule;
+  },
+  getToolbarModule() {
+    return panelModule;
+  },
   getCommandsModule(/* store */) {
     return commandsModule;
   },
@@ -67,3 +83,23 @@ const sopClassHandlerModule = {
     };
   },
 };
+
+/**
+ *
+ */
+const panelModule = {
+  menuOptions: [
+    {
+      icon: 'th-list',
+      label: 'Segments',
+      target: 'segment-panel',
+    },
+  ],
+  components: [
+    {
+      id: 'segment-panel',
+      component: '... react component ...',
+    },
+  ],
+  defaultContext: ['VIEWER'],
+};

extensions/ohif-cornerstone-extension/package.json

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

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

@@ -12,6 +12,15 @@ const mapStateToProps = (state, ownProps) => {
     dataFromStore = state.extensions.cornerstone;
   }
 
+  // TODO: This should be extension configuration
+  // ...dataFromStore -->
+  // availableTools,
+  // onNewImage,
+  // onRightClick,
+  // onTouchPress,
+  // onTouchStart,
+  // onMouseClick,
+
   // If this is the active viewport, enable prefetching.
   const { viewportIndex } = ownProps; //.viewportData;
   const isActive = viewportIndex === state.viewports.activeViewportIndex;

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

@@ -1,5 +1,3 @@
-import './config';
-
 import React, { Component } from 'react';
 
 import ConnectedCornerstoneViewport from './ConnectedCornerstoneViewport';
@@ -20,7 +18,7 @@ cornerstone.metaData.addProvider(
 StackManager.setMetadataProvider(metadataProvider);
 
 const SOP_CLASSES = {
-  SEGMENTATION_STORAGE: '1.2.840.10008.5.1.4.1.1.66.4'
+  SEGMENTATION_STORAGE: '1.2.840.10008.5.1.4.1.1.66.4',
 };
 
 const specialCaseHandlers = {};
@@ -30,11 +28,11 @@ specialCaseHandlers[
 
 class OHIFCornerstoneViewport extends Component {
   state = {
-    viewportData: null
+    viewportData: null,
   };
 
   static defaultProps = {
-    customProps: {}
+    customProps: {},
   };
 
   static propTypes = {
@@ -42,7 +40,7 @@ class OHIFCornerstoneViewport extends Component {
     displaySet: PropTypes.object,
     viewportIndex: PropTypes.number,
     children: PropTypes.node,
-    customProps: PropTypes.object
+    customProps: PropTypes.object,
   };
 
   static id = 'OHIFCornerstoneViewport';
@@ -185,7 +183,7 @@ class OHIFCornerstoneViewport extends Component {
         viewportData = {
           studyInstanceUid,
           displaySetInstanceUid,
-          stack
+          stack,
         };
 
         break;
@@ -201,7 +199,7 @@ class OHIFCornerstoneViewport extends Component {
       displaySetInstanceUid,
       sopClassUids,
       sopInstanceUid,
-      frameIndex
+      frameIndex,
     } = displaySet;
 
     if (sopClassUids && sopClassUids.length > 1) {
@@ -221,7 +219,7 @@ class OHIFCornerstoneViewport extends Component {
       frameIndex
     ).then(viewportData => {
       this.setState({
-        viewportData
+        viewportData,
       });
     });
   }
@@ -252,7 +250,7 @@ class OHIFCornerstoneViewport extends Component {
       childrenWithProps = this.props.children.map((child, index) => {
         return React.cloneElement(child, {
           viewportIndex: this.props.viewportIndex,
-          key: index
+          key: index,
         });
       });
     }

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

@@ -1,25 +0,0 @@
-import Hammer from 'hammerjs';
-import cornerstone from 'cornerstone-core';
-import cornerstoneMath from 'cornerstone-math';
-import cornerstoneTools from 'cornerstone-tools';
-
-// For debugging
-window.cornerstoneTools = cornerstoneTools;
-
-cornerstoneTools.external.cornerstone = cornerstone;
-cornerstoneTools.external.Hammer = Hammer;
-cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
-cornerstoneTools.init();
-
-// Set the tool font and font size
-// context.font = "[style] [variant] [weight] [size]/[line height] [font family]";
-const fontFamily =
-  'Roboto, OpenSans, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif';
-cornerstoneTools.textStyle.setFont(`16px ${fontFamily}`);
-
-// Tool styles/colors
-cornerstoneTools.toolStyle.setToolWidth(2);
-cornerstoneTools.toolColors.setToolColor('rgb(255, 255, 0)');
-cornerstoneTools.toolColors.setActiveColor('rgb(0, 255, 0)');
-
-cornerstoneTools.store.state.touchProximity = 40;