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;