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);
-
+      showLabelAnnotationPopup(measurement, uiDialogService, labelConfig).then(
-      callInputDialog(
+        (val: Map<any, any>) => {
-        uiDialogService,
+          measurementService.update(
-        measurement,
+            uid,
-        (label, actionId) => {
+            {
-          if (actionId === 'cancel') {
+              ...val,
-            return;
+            },
-          }
+            true
-
+          );
-          const updatedMeasurement = Object.assign({}, measurement, {
+        }
-            label,
-          });
-
-          measurementService.update(updatedMeasurement.uid, updatedMeasurement, true);
-        },
-        false
       );
     },
 
@@ -232,8 +228,9 @@ function commandsModule({
 
       viewportGridService.setActiveViewportId(viewportId);
     },
-    arrowTextCallback: ({ callback, data }) => {
+    arrowTextCallback: ({ callback, data, uid }) => {
-      callInputDialog(uiDialogService, data, callback);
+      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 labelConfig = customizationService.get('measurementLabels');
-    const onSubmitHandler = ({ action, value }) => {
+    const measurement = measurementService.getMeasurement(uid);
-      switch (action.id) {
+    const utilityModule = extensionManager.getModuleEntry(
-        case 'save': {
+      '@ohif/extension-cornerstone.utilityModule.common'
-          measurementService.update(
+    );
-            uid,
+    const { showLabelAnnotationPopup } = utilityModule.exports;
-            {
+    showLabelAnnotationPopup(measurement, uiDialogService, labelConfig).then(
-              ...measurement,
+      (val: Map<any, any>) => {
-              ...value,
+        measurementService.update(
-            },
+          uid,
-            true
+          {
-          );
+            ...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

modes/longitudinal/src/index.js

@@ -70,14 +70,28 @@ function modeFactory({ modeConfiguration }) {
     /**
      * Lifecycle hooks
      */
-    onModeEnter: ({ servicesManager, extensionManager, commandsManager }) => {
+    onModeEnter: function ({ servicesManager, extensionManager, commandsManager }) {
       const { measurementService, toolbarService, toolGroupService, customizationService } =
         servicesManager.services;
 
       measurementService.clearMeasurements();
 
+      // customizationService.addModeCustomizations([
+      //   {
+      //     id: 'measurementLabels',
+      //     labelOnMeasure: true,
+      //     exclusive: true,
+      //     items: [
+      //       { value: 'Head', label: 'Head' },
+      //       { value: 'Shoulder', label: 'Shoulder' },
+      //       { value: 'Knee', label: 'Knee' },
+      //       { value: 'Toe', label: 'Toe' },
+      //     ],
+      //   },
+      // ]);
+
       // Init Default and SR ToolGroups
-      initToolGroups(extensionManager, toolGroupService, commandsManager);
+      initToolGroups(extensionManager, toolGroupService, commandsManager, this.labelConfig);
 
       toolbarService.addButtons([...toolbarButtons, ...moreTools]);
       toolbarService.createButtonSection('primary', [

modes/longitudinal/src/initToolGroups.js

@@ -1,4 +1,10 @@
-function initDefaultToolGroup(extensionManager, toolGroupService, commandsManager, toolGroupId) {
+function initDefaultToolGroup(
+  extensionManager,
+  toolGroupService,
+  commandsManager,
+  toolGroupId,
+  modeLabelConfig
+) {
   const utilityModule = extensionManager.getModuleEntry(
     '@ohif/extension-cornerstone.utilityModule.tools'
   );
@@ -26,18 +32,25 @@ function initDefaultToolGroup(extensionManager, toolGroupService, commandsManage
       {
         toolName: toolNames.ArrowAnnotate,
         configuration: {
-          getTextCallback: (callback, eventDetails) =>
+          getTextCallback: (callback, eventDetails) => {
-            commandsManager.runCommand('arrowTextCallback', {
+            if (modeLabelConfig) {
-              callback,
+              callback(' ');
-              eventDetails,
+            } else {
-            }),
+              commandsManager.runCommand('arrowTextCallback', {
-
+                callback,
-          changeTextCallback: (data, eventDetails, callback) =>
+                eventDetails,
-            commandsManager.runCommand('arrowTextCallback', {
+              });
-              callback,
+            }
-              data,
+          },
-              eventDetails,
+          changeTextCallback: (data, eventDetails, callback) => {
-            }),
+            if (modeLabelConfig === undefined) {
+              commandsManager.runCommand('arrowTextCallback', {
+                callback,
+                data,
+                eventDetails,
+              });
+            }
+          },
         },
       },
       { toolName: toolNames.Bidirectional },
@@ -126,7 +139,7 @@ function initSRToolGroup(extensionManager, toolGroupService) {
   toolGroupService.createToolGroupAndAddTools(toolGroupId, tools);
 }
 
-function initMPRToolGroup(extensionManager, toolGroupService, commandsManager) {
+function initMPRToolGroup(extensionManager, toolGroupService, commandsManager, modeLabelConfig) {
   const utilityModule = extensionManager.getModuleEntry(
     '@ohif/extension-cornerstone.utilityModule.tools'
   );
@@ -154,18 +167,25 @@ function initMPRToolGroup(extensionManager, toolGroupService, commandsManager) {
       {
         toolName: toolNames.ArrowAnnotate,
         configuration: {
-          getTextCallback: (callback, eventDetails) =>
+          getTextCallback: (callback, eventDetails) => {
-            commandsManager.runCommand('arrowTextCallback', {
+            if (modeLabelConfig) {
-              callback,
+              callback('');
-              eventDetails,
+            } else {
-            }),
+              commandsManager.runCommand('arrowTextCallback', {
-
+                callback,
-          changeTextCallback: (data, eventDetails, callback) =>
+                eventDetails,
-            commandsManager.runCommand('arrowTextCallback', {
+              });
-              callback,
+            }
-              data,
+          },
-              eventDetails,
+          changeTextCallback: (data, eventDetails, callback) => {
-            }),
+            if (modeLabelConfig === undefined) {
+              commandsManager.runCommand('arrowTextCallback', {
+                callback,
+                data,
+                eventDetails,
+              });
+            }
+          },
         },
       },
       { toolName: toolNames.Bidirectional },
@@ -227,10 +247,16 @@ function initVolume3DToolGroup(extensionManager, toolGroupService) {
   toolGroupService.createToolGroupAndAddTools('volume3d', tools);
 }
 
-function initToolGroups(extensionManager, toolGroupService, commandsManager) {
+function initToolGroups(extensionManager, toolGroupService, commandsManager, modeLabelConfig) {
-  initDefaultToolGroup(extensionManager, toolGroupService, commandsManager, 'default');
+  initDefaultToolGroup(
-  initSRToolGroup(extensionManager, toolGroupService);
+    extensionManager,
-  initMPRToolGroup(extensionManager, toolGroupService, commandsManager);
+    toolGroupService,
+    commandsManager,
+    'default',
+    modeLabelConfig
+  );
+  initSRToolGroup(extensionManager, toolGroupService, commandsManager);
+  initMPRToolGroup(extensionManager, toolGroupService, commandsManager, modeLabelConfig);
   initVolume3DToolGroup(extensionManager, toolGroupService);
 }
 

modes/tmtv/src/index.js

@@ -44,8 +44,12 @@ function modeFactory({ modeConfiguration }) {
      * Lifecycle hooks
      */
     onModeEnter: ({ servicesManager, extensionManager, commandsManager }) => {
-      const { toolbarService, toolGroupService, hangingProtocolService, displaySetService } =
+      const {
-        servicesManager.services;
+        toolbarService,
+        toolGroupService,
+        hangingProtocolService,
+        displaySetService,
+      } = servicesManager.services;
 
       const utilityModule = extensionManager.getModuleEntry(
         '@ohif/extension-cornerstone.utilityModule.tools'

modes/tmtv/src/initToolGroups.js

@@ -7,7 +7,7 @@ export const toolGroupIds = {
   // MPR: 'mpr',
 };
 
-function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
+function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager, modeLabelConfig) {
   const tools = {
     active: [
       {
@@ -30,18 +30,24 @@ function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
         toolName: toolNames.ArrowAnnotate,
         configuration: {
           getTextCallback: (callback, eventDetails) => {
-            commandsManager.runCommand('arrowTextCallback', {
+            if (modeLabelConfig) {
-              callback,
+              callback(' ');
-              eventDetails,
+            } else {
-            });
+              commandsManager.runCommand('arrowTextCallback', {
+                callback,
+                eventDetails,
+              });
+            }
+          },
+          changeTextCallback: (data, eventDetails, callback) => {
+            if (modeLabelConfig === undefined) {
+              commandsManager.runCommand('arrowTextCallback', {
+                callback,
+                data,
+                eventDetails,
+              });
+            }
           },
-
-          changeTextCallback: (data, eventDetails, callback) =>
-            commandsManager.runCommand('arrowTextCallback', {
-              callback,
-              data,
-              eventDetails,
-            }),
         },
       },
       { toolName: toolNames.Bidirectional },
@@ -102,8 +108,8 @@ function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
   toolGroupService.createToolGroupAndAddTools(toolGroupIds.MIP, mipTools);
 }
 
-function initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
+function initToolGroups(toolNames, Enums, toolGroupService, commandsManager, modeLabelConfig) {
-  _initToolGroups(toolNames, Enums, toolGroupService, commandsManager);
+  _initToolGroups(toolNames, Enums, toolGroupService, commandsManager, modeLabelConfig);
 }
 
 export default initToolGroups;

platform/docs/docs/platform/modes/index.md

@@ -79,7 +79,7 @@ function modeFactory() {
     extensions: extensionDependencies,
     hangingProtocol: [],
     sopClassHandlers: [],
-    hotkeys: [],
+    hotkeys: []
   };
 }
 

platform/ui/src/components/Labelling/LabellingFlow.tsx

@@ -0,0 +1,104 @@
+import SelectTree from '../SelectTree';
+import React, { Component } from 'react';
+import LabellingTransition from './LabellingTransition';
+import cloneDeep from 'lodash.clonedeep';
+
+interface PropType {
+  labellingDoneCallback: (label: string) => void;
+  measurementData: any;
+  labelData: any;
+  exclusive: boolean;
+  componentClassName: any;
+}
+
+interface StateType {
+  location: Location;
+  label: string;
+  componentClassName: any;
+  confirmationState: boolean;
+  displayComponent: boolean;
+}
+
+export interface LabelInfo {
+  label: string;
+  value: string;
+}
+
+class LabellingFlow extends Component<PropType> {
+  currentItems: Array<LabelInfo> = [];
+  state: StateType;
+  mainElement;
+
+  constructor(props) {
+    super(props);
+    const { label } = props.measurementData;
+    const className = props.componentClassName;
+
+    this.state = {
+      location,
+      label,
+      componentClassName: className,
+      confirmationState: false,
+      displayComponent: true,
+    };
+    this.mainElement = React.createRef();
+  }
+
+  render() {
+    if (this.props.labelData) {
+      this.currentItems = cloneDeep(this.props.labelData);
+    }
+
+    const className = Object.assign({}, this.state.componentClassName);
+
+    return (
+      <LabellingTransition
+        displayComponent={this.state.displayComponent}
+        onTransitionExit={this.props.labellingDoneCallback}
+      >
+        <>
+          <div
+            className={className}
+            ref={this.mainElement}
+          >
+            {this.labellingStateFragment()}
+          </div>
+        </>
+      </LabellingTransition>
+    );
+  }
+
+  closePopup = () => {
+    this.setState({
+      displayComponent: false,
+    });
+
+    setTimeout(() => {
+      this.setState({
+        displayComponent: false,
+      });
+    }, 2000);
+  };
+
+  selectTreeSelectCalback = (event, itemSelected) => {
+    const label = itemSelected.value;
+    this.closePopup();
+    return this.props.labellingDoneCallback(label);
+  };
+
+  labellingStateFragment = () => {
+    return (
+      <SelectTree
+        items={this.currentItems}
+        columns={1}
+        onSelected={this.selectTreeSelectCalback}
+        closePopup={this.closePopup}
+        selectTreeFirstTitle="Annotation"
+        exclusive={this.props.exclusive}
+        label={this.state.label}
+      />
+    );
+  };
+}
+
+export default LabellingFlow;

platform/ui/src/components/Labelling/LabellingTransition.tsx

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+const transitionDuration = 0;
+const transitionClassName = 'labelling';
+const transitionOnAppear = true;
+
+interface PropType {
+  children: React.ReactNode;
+  displayComponent: boolean;
+  onTransitionExit: any;
+}
+
+export default class LabellingTransition extends Component<PropType> {
+  render() {
+    return (
+      <CSSTransition
+        in={this.props.displayComponent}
+        appear={transitionOnAppear}
+        timeout={transitionDuration}
+        classNames={transitionClassName}
+        onExited={this.props.onTransitionExit}
+      >
+        {this.props.children}
+      </CSSTransition>
+    );
+  }
+}

platform/ui/src/components/Labelling/index.js

@@ -0,0 +1,2 @@
+import LabellingFlow from './LabellingFlow';
+export default LabellingFlow;

platform/ui/src/components/SelectTree/InputRadio.tsx

@@ -0,0 +1,41 @@
+import { Component } from 'react';
+import React from 'react';
+
+interface PropsType {
+  value: string;
+  label: string;
+  itemData: { label: string; value: string };
+  id: string;
+  onSelected: Function;
+  index: number;
+  selectTree: any;
+}
+
+export default class InputRadio extends Component<PropsType> {
+  render() {
+    const { focusedIndex } = this.props.selectTree.state;
+    const isFocused = this.props.index === focusedIndex;
+
+    return (
+      <label
+        className={`block h-10 w-full cursor-pointer overflow-hidden border-b border-b-gray-900 pl-3 leading-10 ${
+          isFocused ? 'bg-black' : ''
+        }`}
+        htmlFor={this.props.id}
+      >
+        <input
+          type="radio"
+          id={this.props.id}
+          className="hidden"
+          value={this.props.value}
+          onChange={this.onSelected}
+        />
+        <span className="font-labels">{this.props.label}</span>
+      </label>
+    );
+  }
+
+  onSelected = evt => {
+    this.props.onSelected(evt, this.props.itemData);
+  };
+}

platform/ui/src/components/SelectTree/SelectTree.tsx

@@ -0,0 +1,253 @@
+import React, { Component } from 'react';
+import InputRadio from './InputRadio';
+import SelectTreeBreadcrumb from './SelectTreeBreadcrumb';
+import cloneDeep from 'lodash.clonedeep';
+import Icon from '../Icon';
+import Button, { ButtonEnums } from '../Button';
+import { LabelInfo } from '../Labelling/LabellingFlow';
+
+interface PropType {
+  autoFocus: boolean;
+  searchEnabled: boolean;
+  selectTreeFirstTitle: string;
+  items: Array<LabelInfo>;
+  onSelected: Function;
+  exclusive: boolean;
+  closePopup: Function;
+  label: string;
+  columns: number;
+}
+
+interface StateProps {
+  searchTerm: string | null;
+  currentNode: any;
+  value: string | null;
+  focusedIndex: number;
+}
+
+export class SelectTree extends Component<PropType> {
+  state: StateProps;
+  static defaultProps = {
+    searchEnabled: true,
+    autoFocus: true,
+    selectTreeFirstTitle: 'First Level itens',
+    items: [],
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      searchTerm: this.props.items.length > 0 ? null : this.props.label,
+      currentNode: null,
+      value: null,
+      focuseIndex: 0,
+    };
+  }
+
+  render() {
+    const treeItems = this.getTreeItems();
+
+    return (
+      <div className="max-h-80 w-80 text-base leading-7">
+        <div className="bg-primary-dark relative flex max-h-80 w-full flex-col overflow-hidden rounded-lg border-0 text-white outline-none drop-shadow-lg focus:outline-none">
+          {this.headerItem()}
+
+          {this.props.items.length > 0 && (
+            <div className="ohif-scrollbar h-full overflow-auto">
+              {this.state.currentNode && (
+                <SelectTreeBreadcrumb
+                  onSelected={this.onBreadcrumbSelected}
+                  label={this.state.currentNode.label}
+                  value={this.state.currentNode.value}
+                />
+              )}
+              <div>
+                <div>{treeItems}</div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  isLeafSelected = item => item && !Array.isArray(item.items);
+
+  filterItems() {
+    const filteredItems = [];
+    const rawItems = cloneDeep(this.props.items);
+    rawItems.forEach(item => {
+      if (Array.isArray(item.items)) {
+        item.items.forEach(item => {
+          const label = item.label.toLowerCase();
+          const searchTerm = this.state.searchTerm.toLowerCase();
+          if (label.indexOf(searchTerm) !== -1) {
+            filteredItems.push(item);
+          }
+        });
+      } else {
+        const label = item.label.toLowerCase();
+        const searchTerm = this.state.searchTerm.toLowerCase();
+        if (label.indexOf(searchTerm) !== -1) {
+          filteredItems.push(item);
+        }
+      }
+    });
+    return filteredItems;
+  }
+
+  getTreeItems() {
+    const storageKey = 'SelectTree';
+    let treeItems: Array<LabelInfo>;
+
+    if (this.state.searchTerm) {
+      const filterItems = this.filterItems();
+      if (
+        this.props.exclusive === false &&
+        filterItems.find(item => item.label === this.state.searchTerm) === undefined
+      ) {
+        treeItems = [
+          { label: this.state.searchTerm, value: this.state.searchTerm },
+          ...filterItems,
+        ];
+      } else {
+        treeItems = filterItems;
+      }
+    } else if (this.state.currentNode) {
+      treeItems = cloneDeep(this.state.currentNode.items);
+    } else {
+      treeItems = cloneDeep(this.props.items);
+    }
+
+    return treeItems.map((item, index) => {
+      const itemKey = index;
+      return (
+        <InputRadio
+          key={itemKey}
+          id={`${storageKey}_${item.value}`}
+          itemData={item}
+          value={item.value}
+          label={item.label}
+          onSelected={this.onSelected}
+          index={index}
+          selectTree={this}
+        />
+      );
+    });
+  }
+
+  handleKeyDown = event => {
+    const { key } = event;
+    const { focusedIndex } = this.state;
+    const treeItems = this.getTreeItems();
+
+    if (key === 'ArrowUp') {
+      this.setState(prevState => ({
+        focusedIndex:
+          prevState.focusedIndex > 0 ? prevState.focusedIndex - 1 : treeItems.length - 1,
+      }));
+    } else if (key === 'ArrowDown') {
+      this.setState(prevState => ({
+        focusedIndex:
+          prevState.focusedIndex < treeItems.length - 1 ? prevState.focusedIndex + 1 : 0,
+      }));
+    } else if (key === 'Enter') {
+      const selectedItem = this.state.searchTerm
+        ? { label: this.state.searchTerm, value: this.state.searchTerm }
+        : treeItems[focusedIndex].props.itemData;
+      this.onSelected(event, selectedItem);
+    }
+  };
+
+  onSubmitHandler = evt => {
+    this.props.onSelected(evt, {
+      label: this.state.searchTerm,
+      value: this.state.searchTerm,
+    });
+  };
+
+  headerItem = () => {
+    const inputLeftPadding = this.props.items.length > 0 ? 'pl-8' : 'pl-4';
+    const title = this.props.selectTreeFirstTitle;
+
+    return (
+      <div className="flex flex-col justify-between border-b-2 border-solid border-black p-4 ">
+        <div className="text-primary-active m-0 mb-5 p-2 leading-tight">
+          <span className="text-primary-light align-sub text-xl">{title}</span>
+          <div className="float-right">
+            <Icon
+              name="icon-close"
+              className="cursor-pointer"
+              onClick={() => this.props.closePopup()}
+              fill="#a3a3a3"
+            />
+          </div>
+        </div>
+        {this.props.searchEnabled && (
+          <div className="flex w-full flex-col">
+            {this.props.items.length > 0 && (
+              <div className="absolute mt-2 mr-2.5 mb-3 ml-3 h-4 w-4">
+                <Icon
+                  name="icon-search"
+                  fill="#a3a3a3"
+                />
+              </div>
+            )}
+            <input
+              data-cy="input-annotation"
+              type="text"
+              className={`border-primary-main border-primary-main appearance-none rounded border bg-black bg-black py-2 pr-3 text-sm leading-tight shadow transition duration-300 hover:border-gray-500 focus:border-gray-500 focus:outline-none focus:outline-none ${inputLeftPadding}`}
+              placeholder={this.props.items.length > 0 ? 'Search labels' : 'Enter label'}
+              autoFocus={this.props.autoFocus}
+              onChange={this.searchLocations}
+              value={this.state.searchTerm ? this.state.searchTerm : ''}
+              onKeyDown={this.handleKeyDown}
+            />
+          </div>
+        )}
+        {this.props.items.length === 0 && (
+          <div className="flex justify-end py-3">
+            <Button
+              disabled={this.state.searchTerm === ''}
+              key={0}
+              name="save"
+              type={ButtonEnums.type.primary}
+              onClick={this.onSubmitHandler}
+            >
+              Save
+            </Button>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  searchLocations = evt => {
+    this.setState({
+      currentNode: null,
+      searchTerm: evt.currentTarget.value,
+    });
+  };
+
+  onSelected = (event, item) => {
+    if (this.isLeafSelected(item)) {
+      this.setState({
+        searchTerm: null,
+        currentNode: null,
+        value: null,
+      });
+    } else {
+      this.setState({
+        currentNode: item,
+      });
+    }
+    return this.props.onSelected(event, item);
+  };
+
+  onBreadcrumbSelected = () => {
+    this.setState({
+      currentNode: null,
+    });
+  };
+}

platform/ui/src/components/SelectTree/SelectTreeBreadcrumb.tsx

@@ -0,0 +1,36 @@
+import { Component } from 'react';
+import React from 'react';
+import Icon from '../Icon';
+
+interface PropType {
+  value: string;
+  label: string;
+  onSelected: (event: any) => void;
+}
+
+export default class SelectTreeBreadcrumb extends Component<PropType> {
+  render() {
+    return (
+      <div>
+        <label
+          className="block h-10 w-full cursor-pointer pr-3 leading-10"
+          htmlFor="selectTreeBreadcrumb"
+        >
+          <input
+            type="radio"
+            id="selectTreeBreadcrumb"
+            className="bt block h-10 overflow-hidden p-3 leading-10 shadow-[0_0_0_200px_transparent]"
+            value={this.props.value}
+            onChange={this.props.onSelected}
+          />
+          <span className="cursor-pointer whitespace-nowrap	">
+            <span className="pr-2.5">
+              <Icon name="fast-backward" />
+            </span>
+            {this.props.label}
+          </span>
+        </label>
+      </div>
+    );
+  }
+}

platform/ui/src/components/SelectTree/index.js

@@ -0,0 +1,2 @@
+import { SelectTree } from './SelectTree';
+export default SelectTree;

platform/ui/src/components/index.js

@@ -80,6 +80,7 @@ import PanelSection from './PanelSection';
 import AdvancedToolbox from './AdvancedToolbox';
 import InputDoubleRange from './InputDoubleRange';
 import LegacyButtonGroup from './LegacyButtonGroup';
+import LabellingFlow from './Labelling';
 import SwitchButton, { SwitchLabelLocation } from './SwitchButton';
 import * as AllInOneMenu from './AllInOneMenu';
 import ViewportActionArrows from './ViewportActionArrows';
@@ -89,7 +90,6 @@ import { ToolSettings } from './AdvancedToolbox';
 import { Toolbox } from './Toolbox';
 import InvestigationalUseDialog from './InvestigationalUseDialog';
 import MeasurementItem from './MeasurementTable/MeasurementItem';
-
 import LayoutPreset from './LayoutPreset';
 
 export {
@@ -182,6 +182,7 @@ export {
   ViewportPane,
   ViewportOverlay,
   WindowLevelMenuItem,
+  LabellingFlow,
   HeaderPatientInfo,
   LayoutPreset,
   LegacySplitButton,

platform/ui/src/index.js

@@ -121,6 +121,7 @@ export {
   WindowLevelMenuItem,
   ImageScrollbar,
   ViewportOverlay,
+  LabellingFlow,
   HeaderPatientInfo,
   ToolSettings,
   Toolbox,