[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>

extensions/cornerstone/src/utils/measurementServiceMappings/ArrowAnnotate.js

@@ -6,7 +6,11 @@ const ArrowAnnotate = {
   toAnnotation: (measurement, definition) => {
     // TODO -> Implement when this is needed.
   },
-  toMeasurement: (csToolsAnnotation, getValueTypeFromToolType) => {
+  toMeasurement: (
+    csToolsAnnotation,
+    DisplaySetService,
+    getValueTypeFromToolType
+  ) => {
     const { element, measurementData } = csToolsAnnotation;
     const tool =
       csToolsAnnotation.toolType ||
@@ -26,6 +30,11 @@ const ArrowAnnotate = {
       StudyInstanceUID,
     } = getSOPInstanceAttributes(element);
 
+    const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+      SOPInstanceUID,
+      SeriesInstanceUID
+    );
+
     const points = [];
     points.push(measurementData.handles);
 
@@ -35,6 +44,7 @@ const ArrowAnnotate = {
       FrameOfReferenceUID,
       referenceSeriesUID: SeriesInstanceUID,
       referenceStudyUID: StudyInstanceUID,
+      displaySetInstanceUID: displaySet.displaySetInstanceUID,
       label: measurementData.text,
       description: measurementData.description,
       unit: measurementData.unit,

extensions/cornerstone/src/utils/measurementServiceMappings/Bidirectional.js

@@ -5,7 +5,11 @@ const Bidirectional = {
   toAnnotation: (measurement, definition) => {
     // TODO -> Implement when this is needed.
   },
-  toMeasurement: (csToolsAnnotation, getValueTypeFromToolType) => {
+  toMeasurement: (
+    csToolsAnnotation,
+    DisplaySetService,
+    getValueTypeFromToolType
+  ) => {
     const { element, measurementData } = csToolsAnnotation;
     const tool =
       csToolsAnnotation.toolType ||
@@ -25,6 +29,11 @@ const Bidirectional = {
       StudyInstanceUID,
     } = getSOPInstanceAttributes(element);
 
+    const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+      SOPInstanceUID,
+      SeriesInstanceUID
+    );
+
     const { handles } = measurementData;
 
     const longAxis = [handles.start, handles.end];
@@ -36,6 +45,7 @@ const Bidirectional = {
       FrameOfReferenceUID,
       referenceSeriesUID: SeriesInstanceUID,
       referenceStudyUID: StudyInstanceUID,
+      displaySetInstanceUID: displaySet.displaySetInstanceUID,
       label: measurementData.text,
       description: measurementData.description,
       unit: measurementData.unit,

extensions/cornerstone/src/utils/measurementServiceMappings/EllipticalRoi.js

@@ -5,7 +5,11 @@ const EllipticalRoi = {
   toAnnotation: (measurement, definition) => {
     // TODO -> Implement when this is needed.
   },
-  toMeasurement: (csToolsAnnotation, getValueTypeFromToolType) => {
+  toMeasurement: (
+    csToolsAnnotation,
+    DisplaySetService,
+    getValueTypeFromToolType
+  ) => {
     const { element, measurementData } = csToolsAnnotation;
     const tool =
       csToolsAnnotation.toolType ||
@@ -25,6 +29,11 @@ const EllipticalRoi = {
       StudyInstanceUID,
     } = getSOPInstanceAttributes(element);
 
+    const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+      SOPInstanceUID,
+      SeriesInstanceUID
+    );
+
     const { start, end } = measurementData.handles;
 
     const halfXLength = Math.abs(start.x - end.x) / 2;
@@ -58,6 +67,7 @@ const EllipticalRoi = {
       FrameOfReferenceUID,
       referenceSeriesUID: SeriesInstanceUID,
       referenceStudyUID: StudyInstanceUID,
+      displaySetInstanceUID: displaySet.displaySetInstanceUID,
       label: measurementData.text,
       description: measurementData.description,
       unit: measurementData.unit,

extensions/cornerstone/src/utils/measurementServiceMappings/Length.js

@@ -37,7 +37,11 @@ const Length = {
    * @param {Object} cornerstone Cornerstone event data
    * @return {Measurement} Measurement instance
    */
-  toMeasurement: (csToolsAnnotation, getValueTypeFromToolType) => {
+  toMeasurement: (
+    csToolsAnnotation,
+    DisplaySetService,
+    getValueTypeFromToolType
+  ) => {
     const { element, measurementData } = csToolsAnnotation;
     const tool =
       csToolsAnnotation.toolType ||
@@ -57,12 +61,18 @@ const Length = {
       StudyInstanceUID,
     } = getSOPInstanceAttributes(element);
 
+    const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+      SOPInstanceUID,
+      SeriesInstanceUID
+    );
+
     return {
       id: measurementData.id,
       SOPInstanceUID: SOPInstanceUID,
       FrameOfReferenceUID,
       referenceSeriesUID: SeriesInstanceUID,
       referenceStudyUID: StudyInstanceUID,
+      displaySetInstanceUID: displaySet.displaySetInstanceUID,
       label: measurementData.text,
       description: measurementData.description,
       unit: measurementData.unit,

extensions/cornerstone/src/utils/measurementServiceMappings/measurementServiceMappingsFactory.js

@@ -3,7 +3,10 @@ import Bidirectional from './Bidirectional';
 import ArrowAnnotate from './ArrowAnnotate';
 import EllipticalRoi from './EllipticalRoi';
 
-const measurementServiceMappingsFactory = measurementService => {
+const measurementServiceMappingsFactory = (
+  MeasurementService,
+  DisplaySetService
+) => {
   /**
    * Maps measurement service format object to cornerstone annotation object.
    *
@@ -18,7 +21,7 @@ const measurementServiceMappingsFactory = measurementService => {
       ELLIPSE,
       POINT,
       BIDIRECTIONAL,
-    } = measurementService.VALUE_TYPES;
+    } = MeasurementService.VALUE_TYPES;
 
     // TODO -> I get why this was attemped, but its not nearly flexible enough.
     // A single measurement may have an ellipse + a bidirectional measurement, for instances.
@@ -37,10 +40,14 @@ const measurementServiceMappingsFactory = measurementService => {
     Length: {
       toAnnotation: Length.toAnnotation,
       toMeasurement: csToolsAnnotation =>
-        Length.toMeasurement(csToolsAnnotation, _getValueTypeFromToolType),
+        Length.toMeasurement(
+          csToolsAnnotation,
+          DisplaySetService,
+          _getValueTypeFromToolType
+        ),
       matchingCriteria: [
         {
-          valueType: measurementService.VALUE_TYPES.POLYLINE,
+          valueType: MeasurementService.VALUE_TYPES.POLYLINE,
           points: 2,
         },
       ],
@@ -50,17 +57,18 @@ const measurementServiceMappingsFactory = measurementService => {
       toMeasurement: csToolsAnnotation =>
         Bidirectional.toMeasurement(
           csToolsAnnotation,
+          DisplaySetService,
           _getValueTypeFromToolType
         ),
       matchingCriteria: [
         // TODO -> We should eventually do something like shortAxis + longAxis,
         // But its still a little unclear how these automatic interpretations will work.
         {
-          valueType: measurementService.VALUE_TYPES.POLYLINE,
+          valueType: MeasurementService.VALUE_TYPES.POLYLINE,
           points: 2,
         },
         {
-          valueType: measurementService.VALUE_TYPES.POLYLINE,
+          valueType: MeasurementService.VALUE_TYPES.POLYLINE,
           points: 2,
         },
       ],
@@ -70,11 +78,12 @@ const measurementServiceMappingsFactory = measurementService => {
       toMeasurement: csToolsAnnotation =>
         ArrowAnnotate.toMeasurement(
           csToolsAnnotation,
+          DisplaySetService,
           _getValueTypeFromToolType
         ),
       matchingCriteria: [
         {
-          valueType: measurementService.VALUE_TYPES.POINT,
+          valueType: MeasurementService.VALUE_TYPES.POINT,
           points: 1,
         },
       ],
@@ -84,11 +93,12 @@ const measurementServiceMappingsFactory = measurementService => {
       toMeasurement: csToolsAnnotation =>
         EllipticalRoi.toMeasurement(
           csToolsAnnotation,
+          DisplaySetService,
           _getValueTypeFromToolType
         ),
       matchingCriteria: [
         {
-          valueType: measurementService.VALUE_TYPES.ELLIPSE,
+          valueType: MeasurementService.VALUE_TYPES.ELLIPSE,
         },
       ],
     },