feat: Implement a 'Exit 2D MPR' button in the toolbar

* feat: Implement a 'Exit 2D MPR' button in the toolbar to act as a toggle when '2D MPR' button is clicked

* Move logic to exit MPR and toggling into ConnectedPluginSwitch and PluginSwitch. Also, discard the ConnectedExitPluginSwitch and ExitPluginSwitch components.

* Update ToolbarRow.js

platform/viewer/src/connectedComponents/ConnectedPluginSwitch.js

@@ -1,9 +1,16 @@
-// import OHIF from '@ohif/core';
+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 { setLayout } = OHIF.redux.actions;
+
+const ConnectedPluginSwitch = (props) => {
+  return (
+    <PluginSwitch {...props} />
+  )
+};
 
 const mapStateToProps = state => {
   const { activeViewportIndex, layout, viewportSpecificData } = state.viewports;
@@ -15,13 +22,13 @@ const mapStateToProps = state => {
   };
 };
 
-// const mapDispatchToProps = dispatch => {
-//   return {
-//     setLayout: data => {
-//       dispatch(setLayout(data));
-//     }
-//   };
-// };
+const mapDispatchToProps = dispatch => {
+  return {
+    setLayout: data => {
+      dispatch(setLayout(data));
+    }
+  };
+};
 
 /*function setSingleLayoutData(originalArray, viewportIndex, data) {
   const viewports = originalArray.slice();
@@ -34,22 +41,32 @@ const mapStateToProps = state => {
 
 const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
   //const { activeViewportIndex, layout } = propsFromState;
-  //const { setLayout } = propsFromDispatch;
+  const { setLayout } = propsFromDispatch;
 
   // TODO: Do not display certain options if the current display set
   // cannot be displayed using these view types
   const mpr = () => {
-    commandsManager.runCommand('mpr2d');
+        commandsManager.runCommand("mpr2d");
   };
+
+  const exitMpr = () => {
+    const layout = {
+      numRows: 1,
+      numColumns: 1,
+      viewports: [{ plugin: 'cornerstone' }],
+    };
+
+    setLayout(layout);
+  };
+
   return {
     mpr,
+    exitMpr
   };
 };
 
-const ConnectedPluginSwitch = connect(
+export default connect(
   mapStateToProps,
-  null, // mapDispatchToProps
+  mapDispatchToProps,
   mergeProps
-)(PluginSwitch);
-
-export default ConnectedPluginSwitch;
+)(ConnectedPluginSwitch);

platform/viewer/src/connectedComponents/PluginSwitch.js

@@ -6,14 +6,43 @@ import './PluginSwitch.css';
 class PluginSwitch extends Component {
   static propTypes = {
     mpr: PropTypes.func,
+    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;
+
     return (
       <div className="PluginSwitch">
-        <ToolbarButton label="2D MPR" icon="cube" onClick={this.props.mpr} />
+        <ToolbarButton label={label} icon={icon} onClick={this.handleClick} />
       </div>
     );
   }