Cleaning

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

@@ -5,107 +5,113 @@ 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: [],
+    imageIds: [],
-        currentImageIdIndex: 0
+    currentImageIdIndex: 0
-    };
+  };
-    if (activeViewportSpecificData && activeViewportSpecificData.stack) {
-        stack = activeViewportSpecificData.stack
-    }
 
-    let cine = {
+  const cineData = cine || {
-        isPlaying: false,
+    isPlaying: false,
-        cineFrameRate: 24
+    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.
 
-    // TODO: activeViewportStackData won't currently change anything on
+  // New props we're creating?
-    // CornerstoneViewport. The updates are too frequent and it's killing
+  return {
-    // performance. Need to revisit how we can do this.
+    activeViewportStackData: stackData,
-    return {
+    activeViewportCineData: cineData,
-        activeViewportStackData: stack,
+    activeViewportIndex: state.viewports.activeViewportIndex
-        activeViewportCineData: cine,
+  };
-        activeViewportIndex: state.viewports.activeViewportIndex
-    };
 };
 
 const mapDispatchToProps = dispatch => {
-    return {
+  return {
-        dispatchSetViewportSpecificData: (viewportIndex, data) => {
+    dispatchSetViewportSpecificData: (viewportIndex, data) => {
-            dispatch(setViewportSpecificData(viewportIndex, data));
+      dispatch(setViewportSpecificData(viewportIndex, data));
-        },
+    }
-    };
+  };
 };
 
 const mergeProps = (propsFromState, propsFromDispatch, ownProps) => {
-    const { activeViewportStackData, activeViewportCineData, activeViewportIndex } = propsFromState;
+  const {
+    activeViewportStackData,
+    activeViewportCineData,
+    activeViewportIndex
+  } = propsFromState;
 
-    return {
+  return {
-        cineFrameRate: activeViewportCineData.cineFrameRate,
+    cineFrameRate: activeViewportCineData.cineFrameRate,
-        isPlaying: activeViewportCineData.isPlaying,
+    isPlaying: activeViewportCineData.isPlaying,
-        onPlayPauseChanged: isPlaying => {
+    onPlayPauseChanged: isPlaying => {
-            const cine = cloneDeep(activeViewportCineData);
+      const cine = cloneDeep(activeViewportCineData);
-            cine.isPlaying = !cine.isPlaying;
+      cine.isPlaying = !cine.isPlaying;
 
-            propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { cine });
+      propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
-        },
+        cine
-        onFrameRateChanged: frameRate => {
+      });
-            const cine = cloneDeep(activeViewportCineData);
+    },
-            cine.cineFrameRate = frameRate;
+    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;
+    onClickNextButton: () => {
-            stack.currentImageIdIndex = Math.min(stack.currentImageIdIndex + 1, largestPossibleIndex)
+      const stack = cloneDeep(activeViewportStackData);
+      const largestPossibleIndex = stack.imageIds.length - 1;
+      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);
+    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;
+    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;
+    onClickSkipToEnd: () => {
+      const stack = cloneDeep(activeViewportStackData);
+      stack.currentImageIdIndex = stack.imageIds.length;
 
-            propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, { stack });
+      propsFromDispatch.dispatchSetViewportSpecificData(activeViewportIndex, {
-        }
+        stack
-    };
+      });
+    }
+  };
 };
 
 const ConnectedCineDialog = connect(
-    mapStateToProps,
+  mapStateToProps,
-    mapDispatchToProps,
+  mapDispatchToProps,
-    mergeProps
+  mergeProps
 )(CineDialog);
 
 export default ConnectedCineDialog;

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,13 +19,14 @@ class ToolbarModule extends Component {
       display: this.state.cineDialogOpen ? 'inline-block' : 'none'
     };
 
-    return (<div className="ToolbarModule">
+    return (
-      <ConnectedToolbarSection />
+      <div className="ToolbarModule">
-      <ToolbarButton
+        <ConnectedToolbarSection />
-        active={this.state.cineDialogOpen}
+        <ToolbarButton
-        onClick={this.onClickCineToolbarButton}
+          active={this.state.cineDialogOpen}
-        text={'CINE'}
+          onClick={this.onClickCineToolbarButton}
-        iconClasses={'fab fa-youtube'}
+          text={'CINE'}
+          iconClasses={'fab fa-youtube'}
         />
         <div className="CineDialogContainer" style={cineDialogContainerStyle}>
           <ConnectedCineDialog />