fix: 🐛 1241: Make Plugin switch part of ToolbarModule (#1322)

* fix: 🐛 Make Plugin switch part of ToolbarModule

Closes: #1241

* Move setCornerstoneViewport command into cornerstone extension

* Exposing extensionManager into extension's get modules functions

* Remove Plugin switch

* Updating set cornerstonelayout to work on VIEWER context

* Creating a customComponent for 2D MPR button

* Use extensionManager to show or not buttons
Adding isHidden option into toolbarModules

* Make buttons hidden depending on extension registration

* Fix unit test after changes on extensionManager

* Remove workaround for extensionManager

* Use studyMeatadataManager and remove TODO's

* Remove storeContext not needed

* Moving Exit 2D MPR into cornerstone extension with VTK context

* Remove PluginSwitch files

* Fix E2E tests

* Adding cypress screenshots into gitignore

* Remove extensionManager from getModuleFn functions and moving CustomComponent for VTK button to VTK extension

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

.gitignore

@@ -30,6 +30,7 @@ docker/dcm4che/dcm4che-arc
 
 # Cypress test results
 videos/
+screenshots/
 
 # Locize settings
 .locize

extensions/cornerstone/src/commandsModule.js

@@ -2,6 +2,7 @@ import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
 import OHIF from '@ohif/core';
 
+import setCornerstoneLayout from './utils/setCornerstoneLayout.js';
 import { getEnabledElement } from './state';
 import CornerstoneViewportDownloadForm from './CornerstoneViewportDownloadForm';
 const scroll = cornerstoneTools.import('util/scroll');
@@ -242,6 +243,9 @@ const commandsModule = ({ servicesManager }) => {
       cornerstoneTools.removeToolState(element, toolType, tool);
       cornerstone.updateImage(element);
     },
+    setCornerstoneLayout: () => {
+      setCornerstoneLayout();
+    }
   };
 
   const definitions = {
@@ -348,6 +352,12 @@ const commandsModule = ({ servicesManager }) => {
       storeContexts: [],
       options: {},
     },
+    setCornerstoneLayout: {
+      commandFn: actions.setCornerstoneLayout,
+      storeContexts: [],
+      options: {},
+      context: 'VIEWER',
+    },
   };
 
   return {

extensions/cornerstone/src/toolbarModule.js

@@ -237,6 +237,15 @@ const definitions = [
       },
     ],
   },
+  {
+    id: 'Exit2DMPR',
+    label: 'Exit 2D MPR',
+    icon: 'times',
+    //
+    type: TOOLBAR_BUTTON_TYPES.COMMAND,
+    commandName: 'setCornerstoneLayout',
+    context: 'ACTIVE_VIEWPORT::VTK',
+  }
 ];
 
 export default {

extensions/cornerstone/src/utils/setCornerstoneLayout.js

@@ -0,0 +1,22 @@
+import { redux } from '@ohif/core';
+
+const { setLayout } = redux.actions;
+
+/**
+ * Update the current layout with a simple Cornerstone one
+ *
+ * @return void
+ */
+const setCornerstoneLayout = () => {
+  const layout = {
+    numRows: 1,
+    numColumns: 1,
+    viewports: [{ plugin: 'cornerstone' }],
+  };
+
+  const action = setLayout(layout);
+
+  window.store.dispatch(action);
+}
+
+export default setCornerstoneLayout;

extensions/vtk/src/toolbarComponents/VTKMPRToolbarButton.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { ToolbarButton } from '@ohif/ui';
+import { utils } from '@ohif/core';
+
+const { studyMetadataManager } = utils;
+
+let isVisible = true;
+
+const _isDisplaySetReconstructable = (viewportSpecificData = {}, activeViewportIndex) => {
+  if (!viewportSpecificData[activeViewportIndex]) {
+    return false;
+  };
+
+  const { displaySetInstanceUid, studyInstanceUid } = viewportSpecificData[
+    activeViewportIndex
+  ];
+
+  const studies = studyMetadataManager.all();
+
+  const study = studies.find(
+    study => study.studyInstanceUID === studyInstanceUid
+  );
+
+  if (!study) {
+    return false;
+  }
+
+  const displaySet = study._displaySets.find(set => set.displaySetInstanceUid === displaySetInstanceUid);
+
+  if (!displaySet) {
+    return false;
+  };
+
+  return displaySet.isReconstructable;
+};
+
+function VTKMPRToolbarButton({
+  parentContext,
+  toolbarClickCallback,
+  button,
+  activeButtons,
+  isActive,
+  className,
+}) {
+  const { id, label, icon } = button;
+  const { viewportSpecificData, activeViewportIndex } = useSelector(state => {
+    const { viewports = {} } = state;
+    const { viewportSpecificData, activeViewportIndex } = viewports;
+
+    return {
+      viewportSpecificData,
+      activeViewportIndex,
+    }
+  });
+
+  isVisible = _isDisplaySetReconstructable(
+    viewportSpecificData,
+    activeViewportIndex,
+  );
+
+  return (
+    <React.Fragment>
+      {isVisible && (
+        <ToolbarButton
+          key={id}
+          label={label}
+          icon={icon}
+          onClick={evt => toolbarClickCallback(button, evt)}
+          isActive={isActive}
+        />
+      )}
+    </React.Fragment>
+  );
+}
+
+VTKMPRToolbarButton.propTypes = {
+  parentContext: PropTypes.object.isRequired,
+  toolbarClickCallback: PropTypes.func.isRequired,
+  button: PropTypes.object.isRequired,
+  activeButtons: PropTypes.array.isRequired,
+  isActive: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export default VTKMPRToolbarButton;

extensions/vtk/src/toolbarModule.js

@@ -1,4 +1,5 @@
 import SlabThicknessToolbarComponent from './toolbarComponents/SlabThicknessToolbarComponent';
+import VTKMPRToolbarButton from './toolbarComponents/VTKMPRToolbarButton';
 
 const TOOLBAR_BUTTON_TYPES = {
   COMMAND: 'command',
@@ -115,9 +116,19 @@ const definitions = [
       },
     ],
   },
+  {
+    id: '2DMPR',
+    label: '2D MPR',
+    icon: 'cube',
+    //
+    CustomComponent: VTKMPRToolbarButton,
+    type: TOOLBAR_BUTTON_TYPES.COMMAND,
+    commandName: 'mpr2d',
+    context: 'ACTIVE_VIEWPORT::CORNERSTONE',
+  },
 ];
 
 export default {
   definitions,
   defaultContext: 'ACTIVE_VIEWPORT::VTK',
-};
+}

platform/core/src/extensions/ExtensionManager.test.js

@@ -226,7 +226,7 @@ describe('ExtensionManager.js', () => {
           return {
             definitions: {
               exampleDefinition: {
-                commandFn: () => {},
+                commandFn: () => { },
                 storeContexts: [],
                 options: {},
               },

platform/viewer/cypress/support/aliases.js

@@ -44,6 +44,7 @@ export function initRouteAliases() {
 
 //Creating aliases for VTK tools buttons
 export function initVTKToolsAliases() {
+  cy.get('[data-cy="exit 2d mpr"]').as('exit2dmprBtn');
   cy.get('[data-cy="crosshairs"]').as('crosshairsBtn');
   cy.get('[data-cy="wwwc"]').as('wwwcBtn');
   cy.get('[data-cy="rotate"]').as('rotateBtn');

platform/viewer/src/connectedComponents/ConnectedPluginSwitch.js

@@ -1,72 +0,0 @@
-import OHIF from '@ohif/core';
-import React from 'react';
-import PluginSwitch from './PluginSwitch.js';
-import { commandsManager } from './../App.js';
-import { connect } from 'react-redux';
-
-const { setLayout } = OHIF.redux.actions;
-
-const ConnectedPluginSwitch = props => {
-  return <PluginSwitch {...props} />;
-};
-
-const mapStateToProps = state => {
-  const { activeViewportIndex, layout, viewportSpecificData } = state.viewports;
-
-  return {
-    activeViewportIndex,
-    viewportSpecificData,
-    layout,
-  };
-};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    setLayout: data => {
-      dispatch(setLayout(data));
-    },
-  };
-};
-
-/*function setSingleLayoutData(originalArray, viewportIndex, data) {
-  const viewports = originalArray.slice();
-  const layoutData = Object.assign({}, viewports[viewportIndex], data);
-
-  viewports[viewportIndex] = layoutData;
-
-  return viewports;
-}*/
-
-const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
-  const { activeViewportIndex, viewportSpecificData } = propsFromState;
-  const { studies } = ownProps;
-  const { setLayout } = propsFromDispatch;
-
-  const mpr = () => {
-    commandsManager.runCommand('mpr2d');
-  };
-
-  const exitMpr = () => {
-    const layout = {
-      numRows: 1,
-      numColumns: 1,
-      viewports: [{ plugin: 'cornerstone' }],
-    };
-
-    setLayout(layout);
-  };
-
-  return {
-    mpr,
-    exitMpr,
-    activeViewportIndex,
-    viewportSpecificData,
-    studies,
-  };
-};
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-  mergeProps
-)(ConnectedPluginSwitch);

platform/viewer/src/connectedComponents/PluginSwitch.css

@@ -1,3 +0,0 @@
-.icon-rotate-120 {
-  transform: rotate(120deg);
-}

platform/viewer/src/connectedComponents/PluginSwitch.js

@@ -1,106 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ToolbarButton } from '@ohif/ui';
-import './PluginSwitch.css';
-
-class PluginSwitch extends Component {
-  static propTypes = {
-    mpr: PropTypes.func,
-    activeViewportIndex: PropTypes.number,
-    viewportSpecificData: PropTypes.object,
-    studies: PropTypes.array,
-    exitMpr: PropTypes.func,
-  };
-
-  static defaultProps = {};
-  constructor(props) {
-    super(props);
-    this.state = {
-      isPlugSwitchOn: false,
-      label: '2D MPR',
-      icon: 'cube',
-    };
-  }
-
-  handleClick = () => {
-    if (this.state.isPlugSwitchOn) {
-      this.setState({
-        isPlugSwitchOn: false,
-        label: '2D MPR',
-        icon: 'cube',
-      });
-      this.props.exitMpr();
-    } else {
-      this.setState({
-        isPlugSwitchOn: true,
-        label: 'Exit 2D MPR',
-        icon: 'times',
-      });
-      this.props.mpr();
-    }
-  };
-
-  render() {
-    const { label, icon } = this.state;
-
-    // Render exit mpr if switched on, otherwise check if mpr button should be displayed.
-    const shouldRender =
-      this.state.isPlugSwitchOn || _shouldRenderMpr2DButton.call(this);
-
-    return (
-      <>
-        {shouldRender && (
-          <div className="PluginSwitch">
-            <ToolbarButton
-              label={label}
-              icon={icon}
-              onClick={this.handleClick}
-            />
-          </div>
-        )}
-      </>
-    );
-  }
-}
-
-function _shouldRenderMpr2DButton() {
-  const { viewportSpecificData, studies, activeViewportIndex } = this.props;
-
-  if (!viewportSpecificData[activeViewportIndex]) {
-    return;
-  }
-
-  const { displaySetInstanceUid, studyInstanceUid } = viewportSpecificData[
-    activeViewportIndex
-  ];
-
-  const displaySet = _getDisplaySet(
-    studies,
-    studyInstanceUid,
-    displaySetInstanceUid
-  );
-
-  if (!displaySet) {
-    return;
-  }
-
-  return displaySet.isReconstructable;
-}
-
-function _getDisplaySet(studies, studyInstanceUid, displaySetInstanceUid) {
-  const study = studies.find(
-    study => study.studyInstanceUid === studyInstanceUid
-  );
-
-  if (!study) {
-    return;
-  }
-
-  const displaySet = study.displaySets.find(set => {
-    return set.displaySetInstanceUid === displaySetInstanceUid;
-  });
-
-  return displaySet;
-}
-
-export default PluginSwitch;

platform/viewer/src/connectedComponents/ToolbarRow.js

@@ -16,7 +16,6 @@ import { commandsManager, extensionManager } from './../App.js';
 
 import ConnectedCineDialog from './ConnectedCineDialog';
 import ConnectedLayoutButton from './ConnectedLayoutButton';
-import ConnectedPluginSwitch from './ConnectedPluginSwitch.js';
 
 class ToolbarRow extends Component {
   // TODO: Simplify these? isOpen can be computed if we say "any" value for selected,
@@ -124,7 +123,6 @@ class ToolbarRow extends Component {
           </div>
           {buttonComponents}
           <ConnectedLayoutButton />
-          <ConnectedPluginSwitch studies={this.props.studies} />
           <div
             className="pull-right m-t-1 rm-x-1"
             style={{ marginLeft: 'auto' }}