OHIF-208 (#1842)

* Set measurement as active

* Add basic dialog component

* Update styles and prop types

* Jump to image

* Update dialog

* Format date

* Update summary to use primary modalities

* delete empty studySummary page

* add missing PropTypes import

* fix for accidental sync'd viewports

* CR Updates

* CR Update avoid cache of measurements

* Use get measurement

* Add comment to edit function

* Remove request and merge modalities from series

* Update dependency: react-cornerstone-viewport@2.3.9

react-cornerstone-viewport
  * @ohif/extension-cornerstone: 2.3.8 → 2.3.9
  * @ohif/extension-dicom-sr: 2.3.8 → 2.3.9

* Update extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js

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

* Add debugs

* remove console.debug

* Update frameindex to imageindex

* Use new rcv debounced function

* Fix hovering

* Update dialog text

* Dismiss dialogs on esc

* Update dependency: react-cornerstone-viewport@3.0.0

react-cornerstone-viewport
  * @ohif/extension-cornerstone: 2.3.9 → 3.0.0
  * @ohif/extension-dicom-sr: 2.3.9 → 3.0.0

* OHIF-237

* remove console.debug

* Remove dead code brought in from rebase

* EmptyViewport should not display a message

* Remove more dead code from rebase

* fix variable naming

* remove unused hook

* bump yarn lock

* formatting

* Add arrow dialog

* Filter based on trackedSeries

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

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js

@@ -33,7 +33,6 @@ const BaseAnnotationTool = cornerstoneTools.importInternal(
 );
 
 // const cine = viewportSpecificData.cine;
-
 // isPlaying = cine.isPlaying === true;
 // frameRate = cine.cineFrameRate || frameRate;
 
@@ -47,7 +46,10 @@ function TrackedCornerstoneViewport({
   ToolBarService,
 }) {
   const [trackedMeasurements] = useTrackedMeasurements();
-  const [{ activeViewportIndex, viewports }] = useViewportGrid();
+  const [
+    { activeViewportIndex, viewports },
+    viewportGridService,
+  ] = useViewportGrid();
   // viewportIndex, onSubmit
   const [viewportDialogState, viewportDialogApi] = useViewportDialog();
   const [viewportData, setViewportData] = useState(null);
@@ -159,16 +161,15 @@ function TrackedCornerstoneViewport({
       );
     }
 
-    _getViewportData(dataSource, displaySet).then(viewportData => {
-      setViewportData({ ...viewportData });
-    });
-  }, [
-    dataSource,
-    displaySet,
-    displaySet.StudyInstanceUID,
-    displaySet.displaySetInstanceUID,
-    displaySet.frameIndex,
-  ]);
+    /*
+     * This grabs `imageIndex from first matching
+     * We actually want whichever is at our `viewportIndex`
+     */
+    const { imageIndex } = viewports[viewportIndex];
+    displaySet.imageIndex = imageIndex;
+
+    _getViewportData(dataSource, displaySet).then(setViewportData);
+  }, [dataSource, displaySet, viewports, viewportIndex]);
 
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   let childrenWithProps = null;
@@ -268,8 +269,8 @@ function TrackedCornerstoneViewport({
             spacing:
               PixelSpacing && PixelSpacing.length
                 ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
-                    2
-                  )}mm`
+                  2
+                )}mm`
                 : '',
             scanner: ManufacturerModelName || '',
           },
@@ -282,6 +283,14 @@ function TrackedCornerstoneViewport({
           viewportIndex={viewportIndex}
           imageIds={imageIds}
           imageIdIndex={currentImageIdIndex}
+          onNewImageDebounceTime={700}
+          onNewImageDebounced={({ currentImageIdIndex }) => {
+            viewportGridService.setDisplaysetForViewport({
+              viewportIndex: activeViewportIndex,
+              displaySetInstanceUID: displaySet.displaySetInstanceUID,
+              imageIndex: currentImageIdIndex,
+            });
+          }}
           // TODO: ViewportGrid Context?
           isActive={true} // todo
           isStackPrefetchEnabled={true} // todo
@@ -336,7 +345,7 @@ const _viewportLabels = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];
  * @return {Object} CornerstoneTools Stack
  */
 function _getCornerstoneStack(displaySet, dataSource) {
-  const { frameIndex } = displaySet;
+  const { imageIndex } = displaySet;
 
   // Get stack from Stack Manager
   const storedStack = StackManager.findOrCreateStack(displaySet, dataSource);
@@ -344,17 +353,22 @@ function _getCornerstoneStack(displaySet, dataSource) {
   // Clone the stack here so we don't mutate it
   const stack = Object.assign({}, storedStack);
 
-  stack.currentImageIdIndex = frameIndex;
+  stack.currentImageIdIndex = imageIndex;
 
   return stack;
 }
 
+/**
+ * Builds the viewport data from a datasource and a displayset.
+ *
+ * @param {Object} dataSource
+ * @param {Object} displaySet
+ * @return {Object} viewport data
+ */
 async function _getViewportData(dataSource, displaySet) {
-  let viewportData;
-
   const stack = _getCornerstoneStack(displaySet, dataSource);
 
-  viewportData = {
+  const viewportData = {
     StudyInstanceUID: displaySet.StudyInstanceUID,
     displaySetInstanceUID: displaySet.displaySetInstanceUID,
     stack,

extensions/measurement-tracking/src/viewports/ViewportOverlay.js

@@ -40,9 +40,9 @@ const ViewportOverlay = ({
         {isWwwcActive && (
           <div className="flex flex-row">
             <span className="mr-1">W:</span>
-            <span className="font-thin ml-1 mr-2">{windowWidth.toFixed(0)}</span>
+            <span className="ml-1 mr-2 font-thin">{windowWidth.toFixed(0)}</span>
             <span className="mr-1">L:</span>
-            <span className="font-thin ml-1">{windowCenter.toFixed(0)}</span>
+            <span className="ml-1 font-thin">{windowCenter.toFixed(0)}</span>
           </div>
         )}
       </div>
@@ -51,15 +51,13 @@ const ViewportOverlay = ({
           <div className="flex flex-row">
             <span className="mr-1">I:</span>
             <span className="font-thin">
-              {`${instanceNumber}/${stackSize}`}
+              {`${instanceNumber} ${imageIndex}/${stackSize}`}
             </span>
           </div>
         )}
       </div>
-      <div className={classnames(overlay, bottomRight)}>
-      </div>
-      <div className={classnames(overlay, bottomLeft)}>
-      </div>
+      <div className={classnames(overlay, bottomRight)}></div>
+      <div className={classnames(overlay, bottomLeft)}></div>
     </div>
   );
 };