Cleaning

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

@@ -5,45 +5,32 @@ import cloneDeep from 'lodash.clonedeep';
 
 const { setViewportSpecificData } = OHIF.redux.actions;
 
-// TODO: I'm guessing this function will be used in other connect locations
+// Why do I need or care about any of this info?
-// so we might want to put it somewhere shared
+// A dispatch action should be able to pull this at the time of an event?
-function getActiveViewportSpecificData(state) {
+// `isPlaying` and `cineFrameRate` might matter, but I think we can prop pass for those.
-    const { viewportSpecificData, activeViewportIndex } = state.viewports;
-    return viewportSpecificData[activeViewportIndex];
-}
-
 const mapStateToProps = state => {
-    // TODO:
+  // Get activeViewport's `cine` and `stack`
-    // - Test if including CineDialog in the toolbarRow will prevent it
+  const { viewportSpecificData, activeViewportIndex } = state.viewports;
-    // from hovering over the rest of the UI when visible.
+  const { cine, stack } = viewportSpecificData[activeViewportIndex] || {};
-    //
-    // - Create custom ToolbarButton which just shows Play state
-    // - Connect this ToolbarButton to Redux
-    const activeViewportSpecificData = getActiveViewportSpecificData(state);
 
-    let stack = {
+  const stackData = stack || {
     imageIds: [],
     currentImageIdIndex: 0
   };
-    if (activeViewportSpecificData && activeViewportSpecificData.stack) {
-        stack = activeViewportSpecificData.stack
-    }
 
-    let cine = {
+  const cineData = cine || {
     isPlaying: false,
     cineFrameRate: 24
   };
-    if (activeViewportSpecificData && activeViewportSpecificData.cine) {
-        cine = activeViewportSpecificData.cine
-    }
-
 
   // TODO: activeViewportStackData won't currently change anything on
   // CornerstoneViewport. The updates are too frequent and it's killing
   // performance. Need to revisit how we can do this.
+
+  // New props we're creating?
   return {
-        activeViewportStackData: stack,
+    activeViewportStackData: stackData,
-        activeViewportCineData: cine,
+    activeViewportCineData: cineData,
     activeViewportIndex: state.viewports.activeViewportIndex
   };
 };
@@ -52,12 +39,16 @@ const mapDispatchToProps = dispatch => {
   return {
     dispatchSetViewportSpecificData: (viewportIndex, data) => {
       dispatch(setViewportSpecificData(viewportIndex, data));
-        },
+    }
   };
 };
 
 const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
-    const { activeViewportStackData, activeViewportCineData, activeViewportIndex } = propsFromState;
+  const {
+    activeViewportStackData,
+    activeViewportCineData,
+    activeViewportIndex
+  } = propsFromState;
 
   return {
     cineFrameRate: activeViewportCineData.cineFrameRate,
@@ -66,38 +57,53 @@ const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
       const cine = cloneDeep(activeViewportCineData);
       cine.isPlaying = !cine.isPlaying;
 
-            propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { cine });
+      propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
+        cine
+      });
     },
     onFrameRateChanged: frameRate => {
       const cine = cloneDeep(activeViewportCineData);
       cine.cineFrameRate = frameRate;
 
-            propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { cine });
+      propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
+        cine
+      });
     },
     onClickNextButton: () => {
       const stack = cloneDeep(activeViewportStackData);
       const largestPossibleIndex = stack.imageIds.length - 1;
-            stack.currentImageIdIndex = Math.min(stack.currentImageIdIndex + 1, largestPossibleIndex)
+      stack.currentImageIdIndex = Math.min(
+        stack.currentImageIdIndex + 1,
+        largestPossibleIndex
+      );
 
-            propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { stack });
+      propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
+        stack
+      });
     },
     onClickBackButton: () => {
       const stack = cloneDeep(activeViewportStackData);
       stack.currentImageIdIndex = Math.max(stack.currentImageIdIndex - 1, 0);
 
-            propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { stack });
+      propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
+        stack
+      });
     },
     onClickSkipToStart: () => {
       const stack = cloneDeep(activeViewportStackData);
       stack.currentImageIdIndex = 0;
 
-            propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { stack });
+      propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
+        stack
+      });
     },
     onClickSkipToEnd: () => {
       const stack = cloneDeep(activeViewportStackData);
       stack.currentImageIdIndex = stack.imageIds.length;
 
-            propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { stack });
+      propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
+        stack
+      });
     }
   };
 };

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

@@ -6,7 +6,7 @@ import ConnectedCineDialog from './ConnectedCineDialog';
 class ToolbarModule extends Component {
   state = {
     cineDialogOpen: false
-  }
+  };
 
   onClickCineToolbarButton = () => {
     this.setState({
@@ -19,7 +19,8 @@ class ToolbarModule extends Component {
       display: this.state.cineDialogOpen ? 'inline-block' : 'none'
     };
 
-    return (<div className="ToolbarModule">
+    return (
+      <div className="ToolbarModule">
         <ConnectedToolbarSection />
         <ToolbarButton
           active={this.state.cineDialogOpen}