fix(Measurement tracking): Side panel study browser can now be closed and measurements are still tracked (#3530)

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx

@@ -25,7 +25,6 @@ function PanelStudyBrowserTracking({
   dataSource,
 }) {
   const {
-    measurementService,
     displaySetService,
     uiDialogService,
     hangingProtocolService,
@@ -39,7 +38,7 @@ function PanelStudyBrowserTracking({
   // Tabs --> Studies --> DisplaySets --> Thumbnails
   const { StudyInstanceUIDs } = useImageViewer();
   const [
-    { activeViewportIndex, viewports, numCols, numRows },
+    { activeViewportIndex, viewports },
     viewportGridService,
   ] = useViewportGrid();
   const [
@@ -80,36 +79,6 @@ function PanelStudyBrowserTracking({
   const activeViewportDisplaySetInstanceUIDs =
     viewports[activeViewportIndex]?.displaySetInstanceUIDs;
 
-  useEffect(() => {
-    const added = measurementService.EVENTS.MEASUREMENT_ADDED;
-    const addedRaw = measurementService.EVENTS.RAW_MEASUREMENT_ADDED;
-    const subscriptions = [];
-
-    [added, addedRaw].forEach(evt => {
-      subscriptions.push(
-        measurementService.subscribe(evt, ({ source, measurement }) => {
-          const {
-            referenceSeriesUID: SeriesInstanceUID,
-            referenceStudyUID: StudyInstanceUID,
-          } = measurement;
-
-          sendTrackedMeasurementsEvent('SET_DIRTY', { SeriesInstanceUID });
-          sendTrackedMeasurementsEvent('TRACK_SERIES', {
-            viewportIndex: activeViewportIndex,
-            StudyInstanceUID,
-            SeriesInstanceUID,
-          });
-        }).unsubscribe
-      );
-    });
-
-    return () => {
-      subscriptions.forEach(unsub => {
-        unsub();
-      });
-    };
-  }, [measurementService, activeViewportIndex, sendTrackedMeasurementsEvent]);
-
   const { trackedSeries } = trackedMeasurements.context;
 
   // ~~ studyDisplayList

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

@@ -27,12 +27,17 @@ function TrackedCornerstoneViewport(props) {
   const {
     measurementService,
     cornerstoneViewportService,
+    viewportGridService,
   } = servicesManager.services;
 
   // Todo: handling more than one displaySet on the same viewport
   const displaySet = displaySets[0];
 
-  const [trackedMeasurements] = useTrackedMeasurements();
+  const [
+    trackedMeasurements,
+    sendTrackedMeasurementsEvent,
+  ] = useTrackedMeasurements();
+
   const [isTracked, setIsTracked] = useState(false);
   const [trackedMeasurementUID, setTrackedMeasurementUID] = useState(null);
   const [viewportElem, setViewportElem] = useState(null);
@@ -149,6 +154,55 @@ function TrackedCornerstoneViewport(props) {
     };
   }, [isTracked]);
 
+  /**
+   * The effect for listening to measurement service measurement added events
+   * and in turn firing an event to update the measurement tracking state machine.
+   * The TrackedCornerstoneViewport is the best place for this because when
+   * a measurement is added, at least one TrackedCornerstoneViewport will be in
+   * the DOM and thus can react to the events fired.
+   */
+  useEffect(() => {
+    const added = measurementService.EVENTS.MEASUREMENT_ADDED;
+    const addedRaw = measurementService.EVENTS.RAW_MEASUREMENT_ADDED;
+    const subscriptions = [];
+
+    [added, addedRaw].forEach(evt => {
+      subscriptions.push(
+        measurementService.subscribe(evt, ({ source, measurement }) => {
+          const { activeViewportIndex } = viewportGridService.getState();
+
+          // Each TrackedCornerstoneViewport receives the MeasurementService's events.
+          // Only send the tracked measurements event for the active viewport to avoid
+          // sending it more than once.
+          if (viewportIndex === activeViewportIndex) {
+            const {
+              referenceStudyUID: StudyInstanceUID,
+              referenceSeriesUID: SeriesInstanceUID,
+            } = measurement;
+
+            sendTrackedMeasurementsEvent('SET_DIRTY', { SeriesInstanceUID });
+            sendTrackedMeasurementsEvent('TRACK_SERIES', {
+              viewportIndex,
+              StudyInstanceUID,
+              SeriesInstanceUID,
+            });
+          }
+        }).unsubscribe
+      );
+    });
+
+    return () => {
+      subscriptions.forEach(unsub => {
+        unsub();
+      });
+    };
+  }, [
+    measurementService,
+    sendTrackedMeasurementsEvent,
+    viewportIndex,
+    viewportGridService,
+  ]);
+
   function switchMeasurement(direction) {
     const newTrackedMeasurementUID = _getNextMeasurementUID(
       direction,