fix: Clicking on measurement should highlight the measurement row in the measurement panel OHIF-433 (#3111)

* fix: OHIF-433 Clicking on measurement should highlight the measurement row in the measurement panel

Added selected flag to each OHIF measurement.
Listening to CS3D ANNOTATION_SELECTION_CHANGE to keep the selected flag in sync.

* fix: OHIF-433 Clicking on measurement should highlight the measurement row in the measurement panel

Fixed broken unit tests.

* PR feedback from Alireza:
- use MEASUREMENT_UPDATED event for selection changed
- added TODO to eventually have CS3D introduce the selected flag per annotation
- added MeasurementService._publishEvent

* PR feedback: now using _broadcastEvent

extensions/cornerstone/src/initMeasurementService.js

@@ -121,11 +121,36 @@ const connectToolsToMeasurementService = (
       const { toolName } = metadata;
 
       annotationModifiedEventDetail.uid = annotationUID;
-      annotationToMeasurement(toolName, annotationModifiedEventDetail);
+      // Passing true to indicate this is an update and NOT a annotation (start) completion.
+      annotationToMeasurement(toolName, annotationModifiedEventDetail, true);
     } catch (error) {
       console.warn('Failed to update measurement:', error);
     }
   }
+  function selectMeasurement(csToolsEvent) {
+    try {
+      const annotationSelectionEventDetail = csToolsEvent.detail;
+
+      const {
+        added: addedSelectedAnnotationUIDs,
+        removed: removedSelectedAnnotationUIDs,
+      } = annotationSelectionEventDetail;
+
+      if (removedSelectedAnnotationUIDs) {
+        removedSelectedAnnotationUIDs.forEach(annotationUID =>
+          MeasurementService.setMeasurementSelected(annotationUID, false)
+        );
+      }
+
+      if (addedSelectedAnnotationUIDs) {
+        addedSelectedAnnotationUIDs.forEach(annotationUID =>
+          MeasurementService.setMeasurementSelected(annotationUID, true)
+        );
+      }
+    } catch (error) {
+      console.warn('Failed to select and unselect measurements:', error);
+    }
+  }
 
   /**
    * When csTools fires a removed event, remove the same measurement
@@ -157,13 +182,17 @@ const connectToolsToMeasurementService = (
 
   // on display sets added, check if there are any measurements in measurement service that need to be
   // put into cornerstone tools
+  const addedEvt = csToolsEvents.ANNOTATION_ADDED;
   const completedEvt = csToolsEvents.ANNOTATION_COMPLETED;
   const updatedEvt = csToolsEvents.ANNOTATION_MODIFIED;
   const removedEvt = csToolsEvents.ANNOTATION_REMOVED;
+  const selectionEvt = csToolsEvents.ANNOTATION_SELECTION_CHANGE;
 
+  eventTarget.addEventListener(addedEvt, addMeasurement);
   eventTarget.addEventListener(completedEvt, addMeasurement);
   eventTarget.addEventListener(updatedEvt, updateMeasurement);
   eventTarget.addEventListener(removedEvt, removeMeasurement);
+  eventTarget.addEventListener(selectionEvt, selectMeasurement);
 
   return csTools3DVer1MeasurementSource;
 };

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

@@ -86,7 +86,7 @@ function getMappedAnnotations(annotation, DisplaySetService) {
   const targets = Object.keys(cachedStats);
 
   if (!targets.length) {
-    return;
+    return [];
   }
 
   const annotations = [];

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

@@ -85,7 +85,7 @@ function getMappedAnnotations(annotation, DisplaySetService) {
   const targets = Object.keys(cachedStats);
 
   if (!targets.length) {
-    return;
+    return [];
   }
 
   const annotations = [];

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

@@ -91,7 +91,7 @@ function getMappedAnnotations(annotation, DisplaySetService) {
   const targets = Object.keys(cachedStats);
 
   if (!targets.length) {
-    return;
+    return [];
   }
 
   const annotations = [];

extensions/default/src/Panels/PanelMeasurementTable.tsx

@@ -255,14 +255,13 @@ function _getMappedMeasurements(MeasurementService) {
 }
 
 function _mapMeasurementToDisplay(measurement, index, types) {
-  const { displayText, uid, label, type } = measurement;
+  const { displayText, uid, label, type, selected } = measurement;
 
   return {
     uid,
     label: label || '(empty)',
     measurementType: type,
     displayText: displayText || [],
-    // TODO: handle one layer down
-    isActive: false, // activeMeasurementItem === i + 1,
+    isActive: selected,
   };
 }

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx

@@ -323,7 +323,7 @@ function _mapMeasurementToDisplay(measurement, types, DisplaySetService) {
     label: measurement.label || '(empty)',
     measurementType: measurement.type,
     displayText: displayText || [],
-    isActive: false, // activeMeasurementItem === i + 1,
+    isActive: measurement.selected,
   };
 }