feat(findingSite): Allow customizing the measurement panel and show site/finding (#3155)

* feat: Allow customizing the measurements panel.

Also includes default display of the site/finding values from the DICOM
SR object.

Update fixes

PR review comments - move the recordInteraction to COmmandsManager.run

PR fixes

fix: Dependency updates to allow right click to be recognized

PR fixes

* Use newer CSWIL

* Make both the base measurements and the tracking measurements show codes

* Fix the right click context menu bringing up menu

platform/core/src/services/MeasurementService/MeasurementService.ts

@@ -459,7 +459,12 @@ class MeasurementService extends PubSubService {
       log.warn(`Measurement ID not found. Generating UID: ${internalUID}`);
     }
 
+    const annotationData = data.annotation.data;
+
     const newMeasurement = {
+      finding: annotationData.finding,
+      findingSites: annotationData.findingSites,
+      site: annotationData.findingSites?.[0],
       ...measurement,
       modifiedTimestamp: Math.floor(Date.now() / 1000),
       uid: internalUID,
@@ -472,7 +477,7 @@ class MeasurementService extends PubSubService {
         measurement: newMeasurement,
       });
     } else {
-      log.info(`Measurement added.`, newMeasurement);
+      log.info('Measurement added', newMeasurement);
       this.measurements[internalUID] = newMeasurement;
       this._broadcastEvent(this.EVENTS.RAW_MEASUREMENT_ADDED, {
         source,
@@ -553,26 +558,27 @@ class MeasurementService extends PubSubService {
       );
     }
 
+    const oldMeasurement = this.measurements[internalUID];
+
     const newMeasurement = {
+      ...oldMeasurement,
       ...measurement,
       modifiedTimestamp: Math.floor(Date.now() / 1000),
       uid: internalUID,
     };
 
-    if (this.measurements[internalUID]) {
+    if (oldMeasurement) {
       // TODO: Ultimately, each annotation should have a selected flag right from the soure.
       // For now, it is just added in OHIF here and in setMeasurementSelected.
-      newMeasurement.selected = this.measurements[internalUID].selected;
       this.measurements[internalUID] = newMeasurement;
       if (isUpdate) {
-        this._broadcastEvent(this.EVENTS.MEASUREMENT_UPDATED, {
+       this._broadcastEvent(this.EVENTS.MEASUREMENT_UPDATED, {
           source,
           measurement: newMeasurement,
           notYetUpdatedAtSource: false,
         });
       } else {
         log.info('Measurement added.', newMeasurement);
-        this.measurements[internalUID] = newMeasurement;
         this._broadcastEvent(this.EVENTS.MEASUREMENT_ADDED, {
           source,
           measurement: newMeasurement,

platform/ui/src/components/MeasurementTable/MeasurementItem.tsx

@@ -11,6 +11,7 @@ const MeasurementItem = ({
   isActive,
   onClick,
   onEdit,
+  item,
 }) => {
   const [isHovering, setIsHovering] = useState(false);
 

platform/ui/src/components/MeasurementTable/MeasurementTable.tsx

@@ -1,13 +1,31 @@
 import React from 'react';
+import { ServicesManager } from '@ohif/core';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
 import MeasurementItem from './MeasurementItem';
 
-const MeasurementTable = ({ data, title, onClick, onEdit }) => {
+const MeasurementTable = ({
+  data,
+  title,
+  onClick,
+  onEdit,
+  servicesManager,
+}) => {
+  servicesManager = servicesManager as ServicesManager;
+  const { customizationService } = servicesManager.services;
   const { t } = useTranslation('MeasurementTable');
   const amount = data.length;
 
+  const itemCustomization = customizationService.getCustomization(
+    'MeasurementItem',
+    {
+      content: MeasurementItem,
+      contentProps: {},
+    }
+  );
+  const CustomMeasurementItem = itemCustomization.content;
+
   return (
     <div>
       <div className="flex justify-between px-2 py-1 bg-secondary-main">
@@ -19,13 +37,14 @@ const MeasurementTable = ({ data, title, onClick, onEdit }) => {
       <div className="overflow-hidden ohif-scrollbar max-h-112">
         {data.length !== 0 &&
           data.map((measurementItem, index) => (
-            <MeasurementItem
+            <CustomMeasurementItem
               key={measurementItem.uid}
               uid={measurementItem.uid}
               index={index + 1}
               label={measurementItem.label}
               isActive={measurementItem.isActive}
               displayText={measurementItem.displayText}
+              item={measurementItem}
               onClick={onClick}
               onEdit={onEdit}
             />