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>

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' }}