fix(Measurement): fixed line dashing of measurements in various scenarios (#3407)

* fix(Measurement): fixed line dashing of measurements in various scenarios

For a StackViewport simply rely on the SeriesInstanceUID being part of the
tracked measurements or not.

For a VolumeViewport first check the image id of the current image in the viewport
and then check the SeriesInstanceUID (like for a StackViewport) if an id is returned.
To reliably get the id of the current image, listen for the VOLUME_VIEWPORT_NEW_VOLUME event.

* Changes for PR comments.

extensions/cornerstone-dicom-sr/package.json

@@ -46,7 +46,7 @@
     "@babel/runtime": "^7.20.13",
     "classnames": "^2.3.2",
     "@cornerstonejs/adapters": "^0.6.0",
-    "@cornerstonejs/core": "^0.47.1",
-    "@cornerstonejs/tools": "^0.67.4"
+    "@cornerstonejs/core": "^0.47.3",
+    "@cornerstonejs/tools": "^0.67.6"
   }
 }

extensions/cornerstone/package.json

@@ -34,7 +34,7 @@
   "peerDependencies": {
     "@ohif/core": "^3.0.0",
     "@ohif/ui": "^2.0.0",
-    "@cornerstonejs/dicom-image-loader": "^0.6.6",
+    "@cornerstonejs/dicom-image-loader": "^0.6.8",
     "@cornerstonejs/codec-charls": "^1.2.3",
     "@cornerstonejs/codec-libjpeg-turbo-8bit": "^1.2.2",
     "@cornerstonejs/codec-openjpeg": "^1.2.2",
@@ -53,9 +53,9 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@cornerstonejs/adapters": "^0.6.0",
-    "@cornerstonejs/core": "^0.47.1",
-    "@cornerstonejs/streaming-image-volume-loader": "^0.20.4",
-    "@cornerstonejs/tools": "^0.67.4",
+    "@cornerstonejs/core": "^0.47.3",
+    "@cornerstonejs/streaming-image-volume-loader": "^0.20.6",
+    "@cornerstonejs/tools": "^0.67.6",
     "@kitware/vtk.js": "27.3.1",
     "html2canvas": "^1.4.1",
     "lodash.debounce": "4.0.8",

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -335,13 +335,13 @@ const OHIFCornerstoneViewport = React.memo(props => {
 
       cleanUpServices();
 
+      const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
+        viewportIndex
+      );
+
       cornerstoneViewportService.disableElement(viewportIndex);
 
       if (onElementDisabled) {
-        const viewportInfo = cornerstoneViewportService.getViewportInfoByIndex(
-          viewportIndex
-        );
-
         onElementDisabled(viewportInfo);
       }
 

extensions/measurement-tracking/package.json

@@ -32,8 +32,8 @@
   "peerDependencies": {
     "@ohif/core": "^3.0.0",
     "classnames": "^2.3.2",
-    "@cornerstonejs/core": "^0.47.1",
-    "@cornerstonejs/tools": "^0.67.4",
+    "@cornerstonejs/core": "^0.47.3",
+    "@cornerstonejs/tools": "^0.67.6",
     "@ohif/extension-cornerstone-dicom-sr": "^3.0.0",
     "dcmjs": "^0.29.5",
     "lodash.debounce": "^4.17.21",

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import OHIF, { utils } from '@ohif/core';
 
@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 
 import { annotation } from '@cornerstonejs/tools';
 import { useTrackedMeasurements } from './../getContextModule';
+import { BaseVolumeViewport, Enums } from '@cornerstonejs/core';
 
 const { formatDate } = utils;
 
@@ -34,6 +35,7 @@ function TrackedCornerstoneViewport(props) {
   const [trackedMeasurements] = useTrackedMeasurements();
   const [isTracked, setIsTracked] = useState(false);
   const [trackedMeasurementUID, setTrackedMeasurementUID] = useState(null);
+  const [viewportElem, setViewportElem] = useState(null);
 
   const { trackedSeries } = trackedMeasurements.context;
   const viewportId = viewportOptions.viewportId;
@@ -55,6 +57,69 @@ function TrackedCornerstoneViewport(props) {
     ManufacturerModelName,
   } = displaySet.images[0];
 
+  const updateIsTracked = useCallback(() => {
+    const viewport = cornerstoneViewportService.getCornerstoneViewportByIndex(
+      viewportIndex
+    );
+
+    if (viewport instanceof BaseVolumeViewport) {
+      // A current image id will only exist for volume viewports that can have measurements tracked.
+      // Typically these are those volume viewports for the series of acquisition.
+      const currentImageId = viewport?.getCurrentImageId();
+
+      if (!currentImageId) {
+        if (isTracked) {
+          setIsTracked(false);
+        }
+        return;
+      }
+    }
+
+    if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
+      setIsTracked(!isTracked);
+    }
+  }, [isTracked, trackedMeasurements, viewportIndex, SeriesInstanceUID]);
+
+  const onElementEnabled = useCallback(
+    evt => {
+      if (evt.detail.element !== viewportElem) {
+        // The VOLUME_VIEWPORT_NEW_VOLUME event allows updateIsTracked to reliably fetch the image id for a volume viewport.
+        evt.detail.element?.addEventListener(
+          Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
+          updateIsTracked
+        );
+        setViewportElem(evt.detail.element);
+      }
+    },
+    [updateIsTracked, viewportElem]
+  );
+
+  const onElementDisabled = useCallback(() => {
+    viewportElem?.removeEventListener(
+      Enums.Events.VOLUME_VIEWPORT_NEW_VOLUME,
+      updateIsTracked
+    );
+  }, [updateIsTracked, viewportElem]);
+
+  useEffect(updateIsTracked, [updateIsTracked]);
+
+  useEffect(() => {
+    const { unsubscribe } = cornerstoneViewportService.subscribe(
+      cornerstoneViewportService.EVENTS.VIEWPORT_DATA_CHANGED,
+      props => {
+        if (props.viewportIndex !== viewportIndex) {
+          return;
+        }
+
+        updateIsTracked();
+      }
+    );
+
+    return () => {
+      unsubscribe();
+    };
+  }, [updateIsTracked, viewportIndex]);
+
   useEffect(() => {
     if (isTracked) {
       annotation.config.style.setViewportToolStyles(viewportId, {
@@ -83,19 +148,6 @@ function TrackedCornerstoneViewport(props) {
     };
   }, [isTracked]);
 
-  // A current image id will only exist for viewports that can have measurements tracked.
-  // Typically these are stack viewports and those volume viewports for the series of acquisition.
-  const currentImageId = cornerstoneViewportService
-    .getCornerstoneViewport(viewportId)
-    ?.getCurrentImageId();
-  if (currentImageId) {
-    if (trackedSeries.includes(SeriesInstanceUID) !== isTracked) {
-      setIsTracked(!isTracked);
-    }
-  } else if (isTracked) {
-    setIsTracked(false);
-  }
-
   function switchMeasurement(direction) {
     const newTrackedMeasurementUID = _getNextMeasurementUID(
       direction,
@@ -121,7 +173,13 @@ function TrackedCornerstoneViewport(props) {
       '@ohif/extension-cornerstone.viewportModule.cornerstone'
     );
 
-    return <Component {...props} />;
+    return (
+      <Component
+        {...props}
+        onElementEnabled={onElementEnabled}
+        onElementDisabled={onElementDisabled}
+      />
+    );
   };
 
   return (