[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/dicom-sr/package.json

@@ -35,7 +35,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",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",

extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js

@@ -372,6 +372,7 @@ function OHIFCornerstoneSRViewport({
         const toMeasurementSchema = getToolStateToCornerstoneMeasurementSchema(
           toolType,
           MeasurementService,
+          DisplaySetService,
           imageId
         );
 
@@ -436,8 +437,8 @@ function OHIFCornerstoneSRViewport({
             spacing:
               PixelSpacing && PixelSpacing.length
                 ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
-                  2
-                )}mm`
+                    2
+                  )}mm`
                 : '',
             scanner: ManufacturerModelName || '',
           },

extensions/dicom-sr/src/utils/getToolStateToCornerstoneMeasurementSchema.js

@@ -1,6 +1,7 @@
 export default function getToolStateToCornerstoneMeasurementSchema(
   toolType,
   MeasurementService,
+  DisplaySetService,
   imageId
 ) {
   const _getValueTypeFromToolType = toolType => {
@@ -28,20 +29,45 @@ export default function getToolStateToCornerstoneMeasurementSchema(
   switch (toolType) {
     case 'Length':
       return measurementData =>
-        Length(measurementData, imageId, _getValueTypeFromToolType);
+        Length(
+          measurementData,
+          imageId,
+          DisplaySetService,
+          _getValueTypeFromToolType
+        );
     case 'Bidirectional':
       return measurementData =>
-        Bidirectional(measurementData, imageId, _getValueTypeFromToolType);
+        Bidirectional(
+          measurementData,
+          imageId,
+          DisplaySetService,
+          _getValueTypeFromToolType
+        );
     case 'EllipticalRoi':
       return measurementData =>
-        EllipticalRoi(measurementData, imageId, _getValueTypeFromToolType);
+        EllipticalRoi(
+          measurementData,
+          imageId,
+          DisplaySetService,
+          _getValueTypeFromToolType
+        );
     case 'ArrowAnnotate':
       return measurementData =>
-        ArrowAnnotate(measurementData, imageId, _getValueTypeFromToolType);
+        ArrowAnnotate(
+          measurementData,
+          imageId,
+          DisplaySetService,
+          _getValueTypeFromToolType
+        );
   }
 }
 
-function Length(measurementData, imageId, _getValueTypeFromToolType) {
+function Length(
+  measurementData,
+  imageId,
+  DisplaySetService,
+  _getValueTypeFromToolType
+) {
   const tool = measurementData.toolType || measurementData.toolName;
   const instance = cornerstone.metaData.get('instance', imageId);
   const {
@@ -51,6 +77,12 @@ function Length(measurementData, imageId, _getValueTypeFromToolType) {
     StudyInstanceUID,
   } = instance;
 
+  const displaySetInstanceUID = _getDisplaySetInstanceUID(
+    DisplaySetService,
+    SeriesInstanceUID,
+    SOPInstanceUID
+  );
+
   const { handles, label } = measurementData;
 
   const points = [];
@@ -69,7 +101,7 @@ function Length(measurementData, imageId, _getValueTypeFromToolType) {
     FrameOfReferenceUID,
     referenceSeriesUID: SeriesInstanceUID,
     referenceStudyUID: StudyInstanceUID,
-    label: measurementData.text,
+    displaySetInstanceUID,
     description: measurementData.description,
     unit: measurementData.unit,
     length: measurementData.length,
@@ -79,7 +111,12 @@ function Length(measurementData, imageId, _getValueTypeFromToolType) {
   };
 }
 
-function Bidirectional(measurementData, imageId, _getValueTypeFromToolType) {
+function Bidirectional(
+  measurementData,
+  imageId,
+  DisplaySetService,
+  _getValueTypeFromToolType
+) {
   const tool = measurementData.toolType || measurementData.toolName;
   const instance = cornerstone.metaData.get('instance', imageId);
   const {
@@ -88,6 +125,11 @@ function Bidirectional(measurementData, imageId, _getValueTypeFromToolType) {
     SeriesInstanceUID,
     StudyInstanceUID,
   } = instance;
+  const displaySetInstanceUID = _getDisplaySetInstanceUID(
+    DisplaySetService,
+    SeriesInstanceUID,
+    SOPInstanceUID
+  );
 
   const { handles, label } = measurementData;
 
@@ -100,7 +142,7 @@ function Bidirectional(measurementData, imageId, _getValueTypeFromToolType) {
     FrameOfReferenceUID,
     referenceSeriesUID: SeriesInstanceUID,
     referenceStudyUID: StudyInstanceUID,
-    label: measurementData.text,
+    displaySetInstanceUID,
     description: measurementData.description,
     unit: measurementData.unit,
     shortestDiameter: measurementData.shortestDiameter,
@@ -111,7 +153,12 @@ function Bidirectional(measurementData, imageId, _getValueTypeFromToolType) {
   };
 }
 
-function EllipticalRoi(measurementData, imageId, _getValueTypeFromToolType) {
+function EllipticalRoi(
+  measurementData,
+  imageId,
+  DisplaySetService,
+  _getValueTypeFromToolType
+) {
   const tool = measurementData.toolType || measurementData.toolName;
   const instance = cornerstone.metaData.get('instance', imageId);
   const {
@@ -121,6 +168,11 @@ function EllipticalRoi(measurementData, imageId, _getValueTypeFromToolType) {
     StudyInstanceUID,
   } = instance;
 
+  const displaySetInstanceUID = _getDisplaySetInstanceUID(
+    DisplaySetService,
+    SeriesInstanceUID,
+    SOPInstanceUID
+  );
   const { handles, label } = measurementData;
   const { start, end } = handles;
 
@@ -155,7 +207,7 @@ function EllipticalRoi(measurementData, imageId, _getValueTypeFromToolType) {
     FrameOfReferenceUID,
     referenceSeriesUID: SeriesInstanceUID,
     referenceStudyUID: StudyInstanceUID,
-    label: measurementData.text,
+    displaySetInstanceUID,
     description: measurementData.description,
     unit: measurementData.unit,
     area:
@@ -168,7 +220,12 @@ function EllipticalRoi(measurementData, imageId, _getValueTypeFromToolType) {
   };
 }
 
-function ArrowAnnotate(measurementData, imageId, _getValueTypeFromToolType) {
+function ArrowAnnotate(
+  measurementData,
+  imageId,
+  DisplaySetService,
+  _getValueTypeFromToolType
+) {
   const tool = measurementData.toolType || measurementData.toolName;
   const instance = cornerstone.metaData.get('instance', imageId);
   const {
@@ -178,6 +235,12 @@ function ArrowAnnotate(measurementData, imageId, _getValueTypeFromToolType) {
     StudyInstanceUID,
   } = instance;
 
+  const displaySetInstanceUID = _getDisplaySetInstanceUID(
+    DisplaySetService,
+    SeriesInstanceUID,
+    SOPInstanceUID
+  );
+
   const { handles } = measurementData;
 
   const points = [];
@@ -196,12 +259,25 @@ function ArrowAnnotate(measurementData, imageId, _getValueTypeFromToolType) {
     FrameOfReferenceUID,
     referenceSeriesUID: SeriesInstanceUID,
     referenceStudyUID: StudyInstanceUID,
+    displaySetInstanceUID,
     label: measurementData.text,
     description: measurementData.description,
     unit: measurementData.unit,
     text: measurementData.text,
     type: _getValueTypeFromToolType(tool),
     points,
-    label,
   };
 }
+
+function _getDisplaySetInstanceUID(
+  DisplaySetService,
+  SeriesInstanceUID,
+  SOPInstanceUID
+) {
+  const displaySet = DisplaySetService.getDisplaySetForSOPInstanceUID(
+    SOPInstanceUID,
+    SeriesInstanceUID
+  );
+
+  return displaySet.displaySetInstanceUID;
+}