[OHIF 284] - JumpToMeasurement + prevent layout change on scroll Prevent layout change on scroll (#1889)

* No more setting on debounce, jumpToMeasurement service set up.

* Fix bug causing a race condition sometimes if you click super fast.

* Optimise rendering of Tracking viewport slightly.

* element => targetElement

* Remove complete TODO

* Respond to reviewer comments.

* Fix e2e workflow.

* Fix regression that removed highlighting on jump to.

* Make sure jump to works from panel as well as viewport.

* Fix typo and remove debugger.

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

platform/viewer/package.json

@@ -70,7 +70,7 @@
     "cornerstone-math": "^0.1.8",
     "cornerstone-tools": "4.18.1",
     "cornerstone-wado-image-loader": "^3.1.2",
-    "dcmjs": "0.16.0",
+    "dcmjs": "0.16.1",
     "dicom-parser": "^1.8.3",
     "dicomweb-client": "^0.4.4",
     "dotenv-webpack": "^1.7.0",

platform/viewer/src/components/ViewportGrid.jsx

@@ -1,7 +1,7 @@
 /**
  * CSS Grid Reference: http://grid.malven.co/
  */
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
 import EmptyViewport from './EmptyViewport';
@@ -11,13 +11,18 @@ import classNames from 'classnames';
 
 function ViewerViewportGrid(props) {
   const { servicesManager, viewportComponents, dataSource } = props;
-  const [
-    { numCols, numRows, activeViewportIndex, viewports, cachedLayout },
-    viewportGridService,
-  ] = useViewportGrid();
+  const [viewportGrid, viewportGridService] = useViewportGrid();
+
+  const {
+    numCols,
+    numRows,
+    activeViewportIndex,
+    viewports,
+    cachedLayout,
+  } = viewportGrid;
 
   // TODO -> Need some way of selecting which displaySets hit the viewports.
-  const { DisplaySetService } = servicesManager.services;
+  const { DisplaySetService, MeasurementService } = servicesManager.services;
 
   useEffect(() => {
     const { unsubscribe } = DisplaySetService.subscribe(
@@ -40,30 +45,56 @@ function ViewerViewportGrid(props) {
     };
   }, []);
 
-  // TODO -> Make a HangingProtocolService
-  const HangingProtocolService = displaySets => {
-    let displaySetInstanceUID;
+  useEffect(() => {
+    const { unsubscribe } = MeasurementService.subscribe(
+      MeasurementService.EVENTS.JUMP_TO_MEASUREMENT,
+      ({ viewportIndex, measurement }) => {
+        const referencedDisplaySetInstanceUID =
+          measurement.displaySetInstanceUID;
 
-    // Fallback
-    if (!displaySets || !displaySets.length) {
-      const displaySet = DisplaySetService.activeDisplaySets[0];
-      displaySetInstanceUID = displaySet.displaySetInstanceUID;
-    } else {
-      const displaySet = displaySets[0];
-      displaySetInstanceUID = displaySet.displaySetInstanceUID;
-    }
+        // If the viewport does not contain the displaySet, then hang that displaySet.
+        if (
+          viewports[viewportIndex].displaySetInstanceUID !==
+          referencedDisplaySetInstanceUID
+        ) {
+          viewportGridService.setDisplaysetForViewport({
+            viewportIndex,
+            displaySetInstanceUID: referencedDisplaySetInstanceUID,
+          });
+        }
+      }
+    );
 
-    return {
-      numRows: 1,
-      numCols: 1,
-      activeViewportIndex: 0,
-      viewports: [
-        {
-          displaySetInstanceUID,
-        },
-      ],
+    return () => {
+      unsubscribe();
     };
-  };
+  }, [viewports]);
+
+  // TODO -> Make a HangingProtocolService
+  // Commented out whilst not in use to avoid pointlessly regenerating this function.
+  // const HangingProtocolService = displaySets => {
+  //   let displaySetInstanceUID;
+
+  //   // Fallback
+  //   if (!displaySets || !displaySets.length) {
+  //     const displaySet = DisplaySetService.activeDisplaySets[0];
+  //     displaySetInstanceUID = displaySet.displaySetInstanceUID;
+  //   } else {
+  //     const displaySet = displaySets[0];
+  //     displaySetInstanceUID = displaySet.displaySetInstanceUID;
+  //   }
+
+  //   return {
+  //     numRows: 1,
+  //     numCols: 1,
+  //     activeViewportIndex: 0,
+  //     viewports: [
+  //       {
+  //         displaySetInstanceUID,
+  //       },
+  //     ],
+  //   };
+  // };
 
   const onDoubleClick = viewportIndex => {
     // TODO -> Disabled for now.