feat(measurement): Add support measurement label autocompletion (#3855)

extensions/cornerstone/src/commandsModule.ts

@@ -16,7 +16,7 @@ import { Types as OhifTypes } from '@ohif/core';
 import { vec3, mat4 } from 'gl-matrix';
 
 import CornerstoneViewportDownloadForm from './utils/CornerstoneViewportDownloadForm';
-import callInputDialog from './utils/callInputDialog';
+import { callLabelAutocompleteDialog, showLabelAnnotationPopup } from './utils/callInputDialog';
 import toggleImageSliceSync from './utils/imageSliceSync/toggleImageSliceSync';
 import { getFirstAnnotationSelected } from './utils/measurementServiceMappings/utils/selection';
 import getActiveViewportEnabledElement from './utils/getActiveViewportEnabledElement';
@@ -40,6 +40,7 @@ function commandsModule({
     cornerstoneViewportService,
     uiNotificationService,
     measurementService,
+    customizationService,
     colorbarService,
     hangingProtocolService,
     syncGroupService,
@@ -140,23 +141,18 @@ function commandsModule({
      * on the measurement with a response if not cancelled.
      */
     setMeasurementLabel: ({ uid }) => {
+      const labelConfig = customizationService.get('measurementLabels');
       const measurement = measurementService.getMeasurement(uid);
-
-      callInputDialog(
-        uiDialogService,
-        measurement,
-        (label, actionId) => {
-          if (actionId === 'cancel') {
-            return;
-          }
-
-          const updatedMeasurement = Object.assign({}, measurement, {
-            label,
-          });
-
-          measurementService.update(updatedMeasurement.uid, updatedMeasurement, true);
-        },
-        false
+      showLabelAnnotationPopup(measurement, uiDialogService, labelConfig).then(
+        (val: Map<any, any>) => {
+          measurementService.update(
+            uid,
+            {
+              ...val,
+            },
+            true
+          );
+        }
       );
     },
 
@@ -232,8 +228,9 @@ function commandsModule({
 
       viewportGridService.setActiveViewportId(viewportId);
     },
-    arrowTextCallback: ({ callback, data }) => {
-      callInputDialog(uiDialogService, data, callback);
+    arrowTextCallback: ({ callback, data, uid }) => {
+      const labelConfig = customizationService.get('measurementLabels');
+      callLabelAutocompleteDialog(uiDialogService, callback, {}, labelConfig);
     },
     toggleCine: () => {
       const { viewports } = viewportGridService.getState();

extensions/cornerstone/src/index.tsx

@@ -31,6 +31,7 @@ import { id } from './id';
 import { measurementMappingUtils } from './utils/measurementServiceMappings';
 import type { PublicViewportOptions } from './services/ViewportService/Viewport';
 import ImageOverlayViewerTool from './tools/ImageOverlayViewerTool';
+import { showLabelAnnotationPopup } from './utils/callInputDialog';
 import ViewportActionCornersService from './services/ViewportActionCornersService/ViewportActionCornersService';
 import { ViewportActionCornersProvider } from './contextProviders/ViewportActionCornersProvider';
 
@@ -126,6 +127,7 @@ const cornerstoneExtension: Types.Extensions.Extension = {
           },
           getEnabledElement,
           dicomLoaderService,
+          showLabelAnnotationPopup
         },
       },
       {

extensions/cornerstone/src/utils/callInputDialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Dialog, ButtonEnums } from '@ohif/ui';
+import { Input, Dialog, ButtonEnums, LabellingFlow } from '@ohif/ui';
 
 /**
  *
@@ -13,6 +13,7 @@ import { Input, Dialog, ButtonEnums } from '@ohif/ui';
  * @param {string?} dialogConfig.dialogTitle - title of the input dialog
  * @param {string?} dialogConfig.inputLabel - show label above the input
  */
+
 function callInputDialog(
   uiDialogService,
   data,
@@ -88,4 +89,73 @@ function callInputDialog(
   }
 }
 
+export function callLabelAutocompleteDialog(uiDialogService, callback, dialogConfig, labelConfig) {
+  const exclusive = labelConfig ? labelConfig.exclusive : false;
+  const dropDownItems = labelConfig ? labelConfig.items : [];
+
+  const { validateFunc = value => true } = dialogConfig;
+
+  const labellingDoneCallback = value => {
+    if (typeof value === 'string') {
+      if (typeof validateFunc === 'function' && !validateFunc(value)) {
+        return;
+      }
+      callback(value, 'save');
+    } else {
+      callback('', 'cancel');
+    }
+    uiDialogService.dismiss({ id: 'select-annotation' });
+  };
+
+  uiDialogService.create({
+    id: 'select-annotation',
+    isDraggable: false,
+    showOverlay: true,
+    content: LabellingFlow,
+    defaultPosition: {
+      x: window.innerWidth / 2,
+      y: window.innerHeight / 2,
+    },
+    contentProps: {
+      labellingDoneCallback: labellingDoneCallback,
+      measurementData: { label: '' },
+      componentClassName: {},
+      labelData: dropDownItems,
+      exclusive: exclusive,
+    },
+  });
+}
+
+export function showLabelAnnotationPopup(measurement, uiDialogService, labelConfig) {
+  const exclusive = labelConfig ? labelConfig.exclusive : false;
+  const dropDownItems = labelConfig ? labelConfig.items : [];
+  return new Promise<Map<any, any>>((resolve, reject) => {
+    const labellingDoneCallback = value => {
+      uiDialogService.dismiss({ id: 'select-annotation' });
+      if (typeof value === 'string') {
+        measurement.label = value;
+      }
+      resolve(measurement);
+    };
+
+    uiDialogService.create({
+      id: 'select-annotation',
+      isDraggable: false,
+      showOverlay: true,
+      content: LabellingFlow,
+      defaultPosition: {
+        x: window.innerWidth / 2,
+        y: window.innerHeight / 2,
+      },
+      contentProps: {
+        labellingDoneCallback: labellingDoneCallback,
+        measurementData: measurement,
+        componentClassName: {},
+        labelData: dropDownItems,
+        exclusive: exclusive,
+      },
+    });
+  });
+}
+
 export default callInputDialog;

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/TrackedMeasurementsContext.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Machine } from 'xstate';
 import { useMachine } from '@xstate/react';
 import { useViewportGrid } from '@ohif/ui';
-import { machineConfiguration, defaultOptions } from './measurementTrackingMachine';
+import { machineConfiguration, defaultOptions, RESPONSE } from './measurementTrackingMachine';
 import promptBeginTracking from './promptBeginTracking';
 import promptTrackNewSeries from './promptTrackNewSeries';
 import promptTrackNewStudy from './promptTrackNewStudy';
@@ -11,6 +11,7 @@ import promptSaveReport from './promptSaveReport';
 import promptHydrateStructuredReport from './promptHydrateStructuredReport';
 import hydrateStructuredReport from './hydrateStructuredReport';
 import { useAppConfig } from '@state';
+import promptLabelAnnotation from './promptLabelAnnotation';
 
 const TrackedMeasurementsContext = React.createContext();
 TrackedMeasurementsContext.displayName = 'TrackedMeasurementsContext';
@@ -30,7 +31,7 @@ function TrackedMeasurementsContextProvider(
 
   const [viewportGrid, viewportGridService] = useViewportGrid();
   const { activeViewportId, viewports } = viewportGrid;
-  const { measurementService, displaySetService } = servicesManager.services;
+  const { measurementService, displaySetService, customizationService } = servicesManager.services;
 
   const machineOptions = Object.assign({}, defaultOptions);
   machineOptions.actions = Object.assign({}, machineOptions.actions, {
@@ -142,6 +143,20 @@ function TrackedMeasurementsContextProvider(
       extensionManager,
       appConfig,
     }),
+    promptLabelAnnotation: promptLabelAnnotation.bind(null, {
+      servicesManager,
+      extensionManager,
+    }),
+  });
+  machineOptions.guards = Object.assign({}, machineOptions.guards, {
+    isLabelOnMeasure: (ctx, evt, condMeta) => {
+      const labelConfig = customizationService.get('measurementLabels');
+      return labelConfig?.labelOnMeasure;
+    },
+    isLabelOnMeasureAndShouldKillMachine: (ctx, evt, condMeta) => {
+      const labelConfig = customizationService.get('measurementLabels');
+      return evt.data && evt.data.userResponse === RESPONSE.NO_NEVER && labelConfig?.labelOnMeasure;
+    },
   });
 
   // TODO: IMPROVE

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/measurementTrackingMachine.js

@@ -31,10 +31,33 @@ const machineConfiguration = {
     off: {
       type: 'final',
     },
+    labellingOnly: {
+      on: {
+        TRACK_SERIES: [
+          {
+            target: 'promptLabelAnnotation',
+            actions: ['setPreviousState'],
+          },
+          {
+            target: 'off',
+          },
+        ],
+      },
+    },
     idle: {
       entry: 'clearContext',
       on: {
-        TRACK_SERIES: 'promptBeginTracking',
+        TRACK_SERIES: [
+          {
+            target: 'promptLabelAnnotation',
+            cond: 'isLabelOnMeasure',
+            actions: ['setPreviousState'],
+          },
+          {
+            target: 'promptBeginTracking',
+            actions: ['setPreviousState'],
+          },
+        ],
         // Unused? We may only do PROMPT_HYDRATE_SR now?
         SET_TRACKED_SERIES: [
           {
@@ -64,6 +87,10 @@ const machineConfiguration = {
             actions: ['setTrackedStudyAndSeries', 'setIsDirty'],
             cond: 'shouldSetStudyAndSeries',
           },
+          {
+            target: 'labellingOnly',
+            cond: 'isLabelOnMeasureAndShouldKillMachine',
+          },
           {
             target: 'off',
             cond: 'shouldKillMachine',
@@ -80,6 +107,11 @@ const machineConfiguration = {
     tracking: {
       on: {
         TRACK_SERIES: [
+          {
+            target: 'promptLabelAnnotation',
+            cond: 'isLabelOnMeasure',
+            actions: ['setPreviousState'],
+          },
           {
             target: 'promptTrackNewStudy',
             cond: 'isNewStudy',
@@ -252,6 +284,36 @@ const machineConfiguration = {
         },
       },
     },
+    promptLabelAnnotation: {
+      invoke: {
+        src: 'promptLabelAnnotation',
+        onDone: [
+          {
+            target: 'labellingOnly',
+            cond: 'wasLabellingOnly',
+          },
+          {
+            target: 'promptBeginTracking',
+            cond: 'wasIdle',
+          },
+          {
+            target: 'promptTrackNewStudy',
+            cond: 'wasTrackingAndIsNewStudy',
+          },
+          {
+            target: 'promptTrackNewSeries',
+            cond: 'wasTrackingAndIsNewSeries',
+          },
+          {
+            target: 'tracking',
+            cond: 'wasTracking',
+          },
+          {
+            target: 'off',
+          },
+        ],
+      },
+    },
   },
   strict: true,
 };
@@ -337,6 +399,11 @@ const defaultOptions = {
       prevTrackedSeries: ctx.trackedSeries.slice().filter(ser => ser !== evt.SeriesInstanceUID),
       trackedSeries: ctx.trackedSeries.slice().filter(ser => ser !== evt.SeriesInstanceUID),
     })),
+    setPreviousState: assign((ctx, evt, meta) => {
+      return {
+        prevState: meta.state.value,
+      };
+    }),
   },
   guards: {
     // We set dirty any time we performan an action that:
@@ -362,6 +429,30 @@ const defaultOptions = {
         evt.SeriesInstanceUID === undefined || ctx.trackedSeries.includes(evt.SeriesInstanceUID)
       );
     },
+    wasLabellingOnly: (ctx, evt, condMeta) => {
+      return ctx.prevState === 'labellingOnly';
+    },
+    wasIdle: (ctx, evt, condMeta) => {
+      return ctx.prevState === 'idle';
+    },
+    wasTracking: (ctx, evt, condMeta) => {
+      return ctx.prevState === 'tracking';
+    },
+    wasTrackingAndIsNewStudy: (ctx, evt, condMeta) => {
+      return (
+        ctx.prevState === 'tracking' &&
+        !ctx.ignoredSeries.includes(evt.data.SeriesInstanceUID) &&
+        ctx.trackedStudy !== evt.data.StudyInstanceUID
+      );
+    },
+    wasTrackingAndIsNewSeries: (ctx, evt, condMeta) => {
+      return (
+        ctx.prevState === 'tracking' &&
+        !ctx.ignoredSeries.includes(evt.data.SeriesInstanceUID) &&
+        !ctx.trackedSeries.includes(evt.data.SeriesInstanceUID)
+      );
+    },
+
     shouldKillMachine: (ctx, evt) => evt.data && evt.data.userResponse === RESPONSE.NO_NEVER,
     shouldAddSeries: (ctx, evt) => evt.data && evt.data.userResponse === RESPONSE.ADD_SERIES,
     shouldSetStudyAndSeries: (ctx, evt) =>
@@ -397,4 +488,4 @@ const defaultOptions = {
   },
 };
 
-export { defaultOptions, machineConfiguration };
+export { defaultOptions, machineConfiguration, RESPONSE };

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptBeginTracking.js

@@ -11,7 +11,9 @@ const RESPONSE = {
 
 function promptBeginTracking({ servicesManager, extensionManager }, ctx, evt) {
   const { uiViewportDialogService } = servicesManager.services;
-  const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt;
+  // When the state change happens after a promise, the state machine sends the retult in evt.data;
+  // In case of direct transition to the state, the state machine sends the data in evt;
+  const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt.data || evt;
 
   return new Promise(async function (resolve, reject) {
     let promptResult = await _askTrackMeasurements(uiViewportDialogService, viewportId);

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptLabelAnnotation.js

@@ -0,0 +1,33 @@
+function promptLabelAnnotation({ servicesManager, extensionManager }, ctx, evt) {
+  const { measurementService, customizationService } = servicesManager.services;
+  const { viewportId, StudyInstanceUID, SeriesInstanceUID, measurementId } = evt;
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.common'
+  );
+  const { showLabelAnnotationPopup } = utilityModule.exports;
+  return new Promise(async function (resolve) {
+    const labelConfig = customizationService.get('measurementLabels');
+    const measurement = measurementService.getMeasurement(measurementId);
+    const value = await showLabelAnnotationPopup(
+      measurement,
+      servicesManager.services.uiDialogService,
+      labelConfig
+    );
+
+    measurementService.update(
+      measurementId,
+      {
+        ...value,
+      },
+      true
+    );
+
+    resolve({
+      StudyInstanceUID,
+      SeriesInstanceUID,
+      viewportId,
+    });
+  });
+}
+
+export default promptLabelAnnotation;

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewSeries.js

@@ -11,7 +11,9 @@ const RESPONSE = {
 
 function promptTrackNewSeries({ servicesManager, extensionManager }, ctx, evt) {
   const { UIViewportDialogService } = servicesManager.services;
-  const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt;
+  // When the state change happens after a promise, the state machine sends the retult in evt.data;
+  // In case of direct transition to the state, the state machine sends the data in evt;
+  const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt.data || evt;
 
   return new Promise(async function (resolve, reject) {
     let promptResult = await _askShouldAddMeasurements(UIViewportDialogService, viewportId);

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewStudy.js

@@ -11,7 +11,9 @@ const RESPONSE = {
 
 function promptTrackNewStudy({ servicesManager, extensionManager }, ctx, evt) {
   const { UIViewportDialogService } = servicesManager.services;
-  const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt;
+  // When the state change happens after a promise, the state machine sends the retult in evt.data;
+  // In case of direct transition to the state, the state machine sends the data in evt;
+  const { viewportId, StudyInstanceUID, SeriesInstanceUID } = evt.data || evt;
 
   return new Promise(async function (resolve, reject) {
     let promptResult = await _askTrackMeasurements(UIViewportDialogService, viewportId);

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

@@ -29,7 +29,7 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
   const [viewportGrid] = useViewportGrid();
   const [measurementChangeTimestamp, setMeasurementsUpdated] = useState(Date.now().toString());
   const debouncedMeasurementChangeTimestamp = useDebounce(measurementChangeTimestamp, 200);
-  const { measurementService, uiDialogService, displaySetService } = servicesManager.services;
+  const { measurementService, uiDialogService, displaySetService, customizationService } = servicesManager.services;
   const [trackedMeasurements, sendTrackedMeasurementsEvent] = useTrackedMeasurements();
   const { trackedStudy, trackedSeries } = trackedMeasurements.context;
   const [displayStudySummary, setDisplayStudySummary] = useState(
@@ -134,67 +134,24 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
   };
 
   const onMeasurementItemEditHandler = ({ uid, isActive }) => {
-    const measurement = measurementService.getMeasurement(uid);
     jumpToImage({ uid, isActive });
-
-    const onSubmitHandler = ({ action, value }) => {
-      switch (action.id) {
-        case 'save': {
-          measurementService.update(
-            uid,
-            {
-              ...measurement,
-              ...value,
-            },
-            true
-          );
-        }
+    const labelConfig = customizationService.get('measurementLabels');
+    const measurement = measurementService.getMeasurement(uid);
+    const utilityModule = extensionManager.getModuleEntry(
+      '@ohif/extension-cornerstone.utilityModule.common'
+    );
+    const { showLabelAnnotationPopup } = utilityModule.exports;
+    showLabelAnnotationPopup(measurement, uiDialogService, labelConfig).then(
+      (val: Map<any, any>) => {
+        measurementService.update(
+          uid,
+          {
+            ...val,
+          },
+          true
+        );
       }
-      uiDialogService.dismiss({ id: 'enter-annotation' });
-    };
-
-    uiDialogService.create({
-      id: 'enter-annotation',
-      centralize: true,
-      isDraggable: false,
-      showOverlay: true,
-      content: Dialog,
-      contentProps: {
-        title: 'Annotation',
-        noCloseButton: true,
-        value: { label: measurement.label || '' },
-        body: ({ value, setValue }) => {
-          const onChangeHandler = event => {
-            event.persist();
-            setValue(value => ({ ...value, label: event.target.value }));
-          };
-
-          const onKeyPressHandler = event => {
-            if (event.key === 'Enter') {
-              onSubmitHandler({ value, action: { id: 'save' } });
-            }
-          };
-          return (
-            <Input
-              label="Enter your annotation"
-              labelClassName="text-white grow text-[14px] leading-[1.2]"
-              autoFocus
-              id="annotation"
-              className="border-primary-main bg-black"
-              type="text"
-              value={value.label}
-              onChange={onChangeHandler}
-              onKeyPress={onKeyPressHandler}
-            />
-          );
-        },
-        actions: [
-          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
-          { id: 'save', text: 'Save', type: ButtonEnums.type.primary },
-        ],
-        onSubmit: onSubmitHandler,
-      },
-    });
+    );
   };
 
   const onMeasurementItemClickHandler = ({ uid, isActive }) => {

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

@@ -140,7 +140,9 @@ function TrackedCornerstoneViewport(props) {
           // Only send the tracked measurements event for the active viewport to avoid
           // sending it more than once.
           if (viewportId === activeViewportId) {
-            const { referenceStudyUID: StudyInstanceUID, referenceSeriesUID: SeriesInstanceUID } =
+            const { referenceStudyUID: StudyInstanceUID,
+              referenceSeriesUID: SeriesInstanceUID,
+              uid: measurementId } =
               measurement;
 
             sendTrackedMeasurementsEvent('SET_DIRTY', { SeriesInstanceUID });
@@ -148,6 +150,7 @@ function TrackedCornerstoneViewport(props) {
               viewportId,
               StudyInstanceUID,
               SeriesInstanceUID,
+              measurementId
             });
           }
         }).unsubscribe