feat: Add extensibility for tmtv and segmentation modes

modes/basic/src/index.tsx

@@ -2,6 +2,11 @@ import update from 'immutability-helper';
 import { utils } from '@ohif/core';
 
 import initToolGroups from './initToolGroups';
+import {
+  applyToolGroupAdditions,
+  registerModeToolbar,
+  resolvePanelList,
+} from './modeCustomization';
 import { id } from './id';
 
 const { structuredCloneWithFunctions } = utils;
@@ -128,41 +133,38 @@ export function isValidMode({ modalities }) {
   };
 }
 
-export function onModeEnter({
-  servicesManager,
-  extensionManager,
-  commandsManager,
-  panelService,
-  segmentationService,
-}: withAppTypes) {
-  const { measurementService, toolbarService, toolGroupService, customizationService } =
-    servicesManager.services;
+export function onModeEnter({ servicesManager, extensionManager, commandsManager }: withAppTypes) {
+  const {
+    measurementService,
+    toolbarService,
+    toolGroupService,
+    customizationService,
+    panelService,
+    segmentationService,
+  } = servicesManager.services;
 
   measurementService.clearMeasurements();
 
-  // Init Default and SR ToolGroups
-  initToolGroups(extensionManager, toolGroupService, commandsManager);
+  // Init the mode's tool groups.  The function is a mode instance property so
+  // extending modes can substitute their own tool group setup.
+  this.initToolGroups?.(extensionManager, toolGroupService, commandsManager);
 
-  // Toolbar buttons and layout may be supplied either as a customization name
-  // (a string, resolved through the customization service so `?customization=`
-  // modules can extend the cornerstone-registered defaults) or as a literal
-  // value (the button array / sections object) for modes that define them inline.
-  const resolveToolbarCustomization = (value: unknown) =>
-    typeof value === 'string' ? customizationService.getCustomization(value) : value;
+  // Toolbar buttons and layout are supplied as customization references
+  // (extensions register the defaults; `?customization=` modules can extend
+  // them) or as literal values for modes that define them inline.
+  registerModeToolbar({ toolbarService, customizationService }, this);
 
-  const toolbarButtons = resolveToolbarCustomization(this.toolbarButtons) as any;
-  const toolbarSections = (resolveToolbarCustomization(this.toolbarSections) ?? {}) as Record<
-    string,
-    string[]
-  >;
+  // Extra tools (e.g. segmentation editing tools added by a customization)
+  // are layered onto the tool groups created above.
+  applyToolGroupAdditions({ toolGroupService, customizationService }, this.toolGroupAdditions);
 
-  toolbarService.register(toolbarButtons);
-
-  for (const [key, section] of Object.entries(toolbarSections)) {
-    toolbarService.updateSection(key, section);
-  }
-
-  if (!this.enableSegmentationEdit) {
+  // Segmentation panel editing is disabled by default in this mode, but only
+  // when no global/mode customization has expressed a preference — a site
+  // customization (e.g. `segmentationEditing`) can enable it.
+  if (
+    !this.enableSegmentationEdit &&
+    !customizationService.hasCustomization('panelSegmentation.disableEditing')
+  ) {
     customizationService.setCustomizations({
       'panelSegmentation.disableEditing': {
         $set: true,
@@ -226,9 +228,12 @@ export function onModeExit({ servicesManager }: withAppTypes) {
 export const basicLayout = {
   id: ohif.layout,
   props: {
-    leftPanels: [ohif.thumbnailList],
+    // Panel lists are customization names; the cornerstone extension registers
+    // the defaults and `?customization=` modules can replace them (e.g. to
+    // swap in the segmentation panels with editing tools).
+    leftPanels: 'basic.leftPanels',
     leftPanelResizable: true,
-    rightPanels: [cornerstone.segmentation, cornerstone.measurements],
+    rightPanels: 'basic.rightPanels',
     rightPanelClosed: true,
     rightPanelResizable: true,
     viewports: [
@@ -265,8 +270,15 @@ export const basicLayout = {
   },
 };
 
-export function layoutTemplate() {
-  return structuredCloneWithFunctions(this.layoutInstance);
+export function layoutTemplate({ servicesManager }: withAppTypes = {} as withAppTypes) {
+  const layout = structuredCloneWithFunctions(this.layoutInstance);
+  const customizationService = servicesManager?.services?.customizationService;
+  if (customizationService) {
+    const { props } = layout;
+    props.leftPanels = resolvePanelList(customizationService, props.leftPanels);
+    props.rightPanels = resolvePanelList(customizationService, props.rightPanels);
+  }
+  return layout;
 }
 
 export const basicRoute = {
@@ -285,10 +297,14 @@ export const modeInstance = {
   hide: false,
   displayName: 'Non-Longitudinal Basic',
   _activatePanelTriggersSubscriptions: [],
-  // Toolbar buttons and layout are referenced by customization name; the
-  // cornerstone extension registers the defaults and `?customization=` modules
-  // can extend them. onModeEnter resolves these names via the customization service.
-  toolbarSections: 'cornerstone.toolbarSections',
+  // Toolbar buttons/layout and tool group additions are referenced by
+  // customization name; the cornerstone extension registers the defaults and
+  // `?customization=` modules can extend them. onModeEnter resolves these
+  // names via the customization service.
+  toolbarSections: 'basic.toolbarSections',
+  toolGroupAdditions: 'basic.toolGroupAdditions',
+  // Tool group setup used by onModeEnter; extending modes can replace it.
+  initToolGroups,
 
   /**
    * Lifecycle hooks
@@ -310,7 +326,7 @@ export const modeInstance = {
   // general handler needs to come last.  For this case, the dicomvideo must
   // come first to remove video transfer syntax before ohif uses images
   sopClassHandlers,
-  toolbarButtons: 'cornerstone.toolbarButtons',
+  toolbarButtons: 'basic.toolbarButtons',
   enableSegmentationEdit: false,
   nonModeModalities: NON_IMAGE_MODALITIES,
 };
@@ -336,3 +352,9 @@ export const mode = {
 
 export default mode;
 export { initToolGroups };
+export {
+  applyToolGroupAdditions,
+  registerModeToolbar,
+  resolveCustomizationList,
+  resolvePanelList,
+} from './modeCustomization';

modes/basic/src/modeCustomization.ts

@@ -0,0 +1,124 @@
+/**
+ * Helpers for resolving mode configuration (toolbar buttons, toolbar sections,
+ * tool group additions and panel lists) through the customization service.
+ *
+ * The pattern: extensions register the default values as named customizations
+ * (at Default scope), modes reference those values by name, and site
+ * `?customization=` JSON modules extend or replace the named values with
+ * immutability-helper commands.  Wherever a list is resolved, a string entry is
+ * treated as the name of another customization, so a JSON module can add a
+ * whole capability block that an extension exports (for example
+ * `$push: ['cornerstone.segmentationToolbarButtons']`) without having to
+ * restate its contents.
+ */
+
+/**
+ * Resolves a customization list value into a flat array of concrete values.
+ *
+ * The input may be:
+ *   - a string: the name of a customization to resolve (recursively)
+ *   - an array: each entry resolved recursively (strings are names, objects
+ *     are literal values)
+ *   - an object: a literal value, returned as a single-element array
+ *
+ * Names are only resolved once per call (repeats and cycles are skipped), so a
+ * capability block referenced from two places is applied a single time.
+ */
+export function resolveCustomizationList(
+  customizationService: AppTypes.CustomizationService,
+  value: unknown,
+  _seen = new Set<string>()
+): any[] {
+  if (value === undefined || value === null) {
+    return [];
+  }
+  if (typeof value === 'string') {
+    if (_seen.has(value)) {
+      return [];
+    }
+    _seen.add(value);
+    const resolved = customizationService.getCustomization(value);
+    if (resolved === undefined) {
+      console.warn(`resolveCustomizationList: no customization registered for "${value}"`);
+      return [];
+    }
+    return resolveCustomizationList(customizationService, resolved, _seen);
+  }
+  if (Array.isArray(value)) {
+    return value.flatMap(entry => resolveCustomizationList(customizationService, entry, _seen));
+  }
+  return [value];
+}
+
+/**
+ * Registers a mode's toolbar from customization references.
+ *
+ * `toolbarButtons` resolves to a flat list of button definitions which are
+ * registered with the toolbar service.  `toolbarSections` resolves to one or
+ * more `{ sectionKey: buttonIds[] }` objects which are shallow-merged in order
+ * (later values win per section) and applied with `updateSection`.
+ */
+export function registerModeToolbar(
+  { toolbarService, customizationService },
+  { toolbarButtons, toolbarSections }
+): void {
+  const buttons = resolveCustomizationList(customizationService, toolbarButtons);
+  toolbarService.register(buttons);
+
+  const sections: Record<string, string[]> = Object.assign(
+    {},
+    ...resolveCustomizationList(customizationService, toolbarSections)
+  );
+  for (const [key, section] of Object.entries(sections)) {
+    toolbarService.updateSection(key, section);
+  }
+}
+
+/**
+ * Adds extra tools to the tool groups a mode has already created.
+ *
+ * `toolGroupAdditions` is (the name of) an object mapping a tool group id to a
+ * list of tool blocks; each block is either a literal
+ * `{ active/passive/enabled/disabled }` object or the name of a customization
+ * holding one (for example `cornerstone.segmentationToolGroupTools`).  Tool
+ * groups the mode did not create are skipped, so a single additions object can
+ * be shared between modes with different tool group sets.
+ */
+export function applyToolGroupAdditions(
+  { toolGroupService, customizationService },
+  toolGroupAdditions
+): void {
+  if (!toolGroupAdditions) {
+    return;
+  }
+  for (const additions of resolveCustomizationList(customizationService, toolGroupAdditions)) {
+    for (const [toolGroupId, toolBlocks] of Object.entries(additions)) {
+      if (!toolGroupService.getToolGroup(toolGroupId)) {
+        continue;
+      }
+      for (const tools of resolveCustomizationList(customizationService, toolBlocks)) {
+        toolGroupService.addToolsToToolGroup(toolGroupId, tools);
+      }
+    }
+  }
+}
+
+/**
+ * Resolves a layout panel list.  Panel lists hold extension module ids (which
+ * are themselves strings), so unlike the list helpers above only the top-level
+ * value may be a customization name.
+ */
+export function resolvePanelList(
+  customizationService: AppTypes.CustomizationService,
+  panels: string | string[]
+): string[] {
+  if (typeof panels !== 'string') {
+    return panels;
+  }
+  const resolved = customizationService.getCustomization(panels);
+  if (resolved === undefined) {
+    console.warn(`resolvePanelList: no customization registered for "${panels}"`);
+    return [];
+  }
+  return resolved as string[];
+}

modes/longitudinal/src/index.ts

@@ -1,6 +1,6 @@
 import i18n from 'i18next';
 import { id } from './id';
-import { initToolGroups, cornerstone,
+import { initToolGroups,
   ohif,
   dicomsr,
   dicomvideo,
@@ -28,8 +28,10 @@ export const longitudinalInstance = {
   id: ohif.layout,
   props: {
     ...basicLayout.props,
-    leftPanels: [tracked.thumbnailList],
-    rightPanels: [cornerstone.segmentation, tracked.measurements],
+    // Panel lists are customization names; the measurement-tracking extension
+    // registers the defaults and `?customization=` modules can replace them.
+    leftPanels: 'longitudinal.leftPanels',
+    rightPanels: 'longitudinal.rightPanels',
     viewports: [
       {
         namespace: tracked.viewport,

modes/segmentation/src/index.tsx

@@ -1,249 +1,138 @@
 import { id } from './id';
-import toolbarButtons from './toolbarButtons';
 import initToolGroups from './initToolGroups';
 import setUpAutoTabSwitchHandler from './utils/setUpAutoTabSwitchHandler';
-import { ohif, cornerstone, extensionDependencies, dicomRT, segmentation } from '@ohif/mode-basic';
-export * from './toolbarButtons';
+import {
+  ohif,
+  cornerstone,
+  extensionDependencies,
+  dicomRT,
+  segmentation,
+  onModeEnter as basicOnModeEnter,
+  onModeExit as basicOnModeExit,
+  layoutTemplate,
+  modeFactory,
+} from '@ohif/mode-basic';
 
-function modeFactory({ modeConfiguration }) {
-  const _unsubscriptions = [];
+/**
+ * Indicate this is a valid mode unless the studies ONLY contain modalities
+ * that segmentation cannot be performed on.
+ */
+export function isValidMode({ modalities }) {
+  const modalitiesArray = modalities.split('\\');
   return {
-    /**
-     * Mode ID, which should be unique among modes used by the viewer. This ID
-     * is used to identify the mode in the viewer's state.
-     */
-    id,
-    routeName: 'segmentation',
-    /**
-     * Mode name, which is displayed in the viewer's UI in the workList, for the
-     * user to select the mode.
-     */
-    displayName: 'Segmentation',
-    /**
-     * Runs when the Mode Route is mounted to the DOM. Usually used to initialize
-     * Services and other resources.
-     */
-    onModeEnter: ({ servicesManager, extensionManager, commandsManager }: withAppTypes) => {
-      const {
-        measurementService,
-        toolbarService,
-        toolGroupService,
-        segmentationService,
-        viewportGridService,
-        panelService,
-      } = servicesManager.services;
-
-      measurementService.clearMeasurements();
-
-      // Init Default and SR ToolGroups
-      initToolGroups(extensionManager, toolGroupService, commandsManager);
-
-      toolbarService.register(toolbarButtons);
-
-      toolbarService.updateSection(toolbarService.sections.primary, [
-        'WindowLevel',
-        'Pan',
-        'Zoom',
-        'TrackballRotate',
-        'Capture',
-        'Layout',
-        'Crosshairs',
-        'MoreTools',
-      ]);
-
-      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.topLeft, [
-        'orientationMenu',
-        'dataOverlayMenu',
-      ]);
-
-      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.bottomMiddle, [
-        'AdvancedRenderingControls',
-      ]);
-
-      toolbarService.updateSection('AdvancedRenderingControls', [
-        'windowLevelMenuEmbedded',
-        'voiManualControlMenu',
-        'Colorbar',
-        'opacityMenu',
-        'thresholdMenu',
-      ]);
-
-      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.topRight, [
-        'modalityLoadBadge',
-        'trackingStatus',
-        'navigationComponent',
-      ]);
-
-      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.bottomLeft, [
-        'windowLevelMenu',
-      ]);
-
-      toolbarService.updateSection('MoreTools', [
-        'Reset',
-        'rotate-right',
-        'flipHorizontal',
-        'ReferenceLines',
-        'ImageOverlayViewer',
-        'StackScroll',
-        'invert',
-        'Cine',
-        'Magnify',
-        'TagBrowser',
-      ]);
-
-      toolbarService.updateSection(toolbarService.sections.labelMapSegmentationToolbox, [
-        'LabelMapTools',
-      ]);
-      toolbarService.updateSection(toolbarService.sections.contourSegmentationToolbox, [
-        'ContourTools',
-      ]);
-
-      toolbarService.updateSection('LabelMapTools', [
-        'LabelmapSlicePropagation',
-        'BrushTools',
-        'MarkerLabelmap',
-        'RegionSegmentPlus',
-        'Shapes',
-        'LabelMapEditWithContour',
-      ]);
-      toolbarService.updateSection('ContourTools', [
-        'PlanarFreehandContourSegmentationTool',
-        'SculptorTool',
-        'SplineContourSegmentationTool',
-        'LivewireContourSegmentationTool',
-      ]);
-
-      toolbarService.updateSection(toolbarService.sections.labelMapSegmentationUtilities, [
-        'LabelMapUtilities',
-      ]);
-      toolbarService.updateSection(toolbarService.sections.contourSegmentationUtilities, [
-        'ContourUtilities',
-      ]);
-
-      toolbarService.updateSection('LabelMapUtilities', [
-        'InterpolateLabelmap',
-        'SegmentBidirectional',
-      ]);
-      toolbarService.updateSection('ContourUtilities', [
-        'LogicalContourOperations',
-        'SimplifyContours',
-        'SmoothContours',
-      ]);
-
-      toolbarService.updateSection('BrushTools', ['Brush', 'Eraser', 'Threshold']);
-
-      const { unsubscribeAutoTabSwitchEvents } = setUpAutoTabSwitchHandler({
-        segmentationService,
-        viewportGridService,
-        panelService,
-      });
-
-      _unsubscriptions.push(...unsubscribeAutoTabSwitchEvents);
-    },
-    onModeExit: ({ servicesManager }: withAppTypes) => {
-      const {
-        toolGroupService,
-        syncGroupService,
-        segmentationService,
-        cornerstoneViewportService,
-        uiDialogService,
-        uiModalService,
-      } = servicesManager.services;
-
-      _unsubscriptions.forEach(unsubscribe => unsubscribe());
-      _unsubscriptions.length = 0;
-
-      uiDialogService.hideAll();
-      uiModalService.hide();
-      toolGroupService.destroy();
-      syncGroupService.destroy();
-      segmentationService.destroy();
-      cornerstoneViewportService.destroy();
-    },
-    /** */
-    validationTags: {
-      study: [],
-      series: [],
-    },
-    /**
-     * A boolean return value that indicates whether the mode is valid for the
-     * modalities of the selected studies. Currently we don't have stack viewport
-     * segmentations and we should exclude them
-     */
-    isValidMode: ({ modalities }) => {
-      // Don't show the mode if the selected studies have only one modality
-      // that is not supported by the mode
-      const modalitiesArray = modalities.split('\\');
-      return {
-        valid:
-          modalitiesArray.length === 1
-            ? !['SM', 'ECG', 'OT', 'DOC'].includes(modalitiesArray[0])
-            : true,
-        description:
-          'The mode does not support studies that ONLY include the following modalities: SM, OT, DOC',
-      };
-    },
-    /**
-     * Mode Routes are used to define the mode's behavior. A list of Mode Route
-     * that includes the mode's path and the layout to be used. The layout will
-     * include the components that are used in the layout. For instance, if the
-     * default layoutTemplate is used (id: '@ohif/extension-default.layoutTemplateModule.viewerLayout')
-     * it will include the leftPanels, rightPanels, and viewports. However, if
-     * you define another layoutTemplate that includes a Footer for instance,
-     * you should provide the Footer component here too. Note: We use Strings
-     * to reference the component's ID as they are registered in the internal
-     * ExtensionManager. The template for the string is:
-     * `${extensionId}.{moduleType}.${componentId}`.
-     */
-    routes: [
-      {
-        path: 'template',
-        layoutTemplate: ({ location, servicesManager }) => {
-          return {
-            id: ohif.layout,
-            props: {
-              leftPanels: [ohif.thumbnailList],
-              leftPanelResizable: true,
-              rightPanels: [
-                cornerstone.labelMapSegmentationPanel,
-                cornerstone.contourSegmentationPanel,
-              ],
-              rightPanelResizable: true,
-              // leftPanelClosed: true,
-              viewports: [
-                {
-                  namespace: cornerstone.viewport,
-                  displaySetsToDisplay: [ohif.sopClassHandler],
-                },
-                {
-                  namespace: segmentation.viewport,
-                  displaySetsToDisplay: [segmentation.sopClassHandler],
-                },
-                {
-                  namespace: dicomRT.viewport,
-                  displaySetsToDisplay: [dicomRT.sopClassHandler],
-                },
-              ],
-            },
-          };
-        },
-      },
-    ],
-    /** List of extensions that are used by the mode */
-    extensions: extensionDependencies,
-    /** HangingProtocol used by the mode */
-    // Commented out to just use the most applicable registered hanging protocol
-    // The example is used for a grid layout to specify that as a preferred layout
-    hangingProtocol: ['@ohif/mnGrid'],
-    /** SopClassHandlers used by the mode */
-    sopClassHandlers: [ohif.sopClassHandler, segmentation.sopClassHandler, dicomRT.sopClassHandler],
+    valid:
+      modalitiesArray.length === 1 ? !['SM', 'ECG', 'OT', 'DOC'].includes(modalitiesArray[0]) : true,
+    description:
+      'The mode does not support studies that ONLY include the following modalities: SM, OT, DOC',
   };
 }
 
+/**
+ * Extends the basic mode enter with the segmentation panel auto tab switch
+ * handling (switching between labelmap/contour panels as segmentations of the
+ * relevant type become active).
+ */
+export function onModeEnter(ctx: withAppTypes) {
+  basicOnModeEnter.call(this, ctx);
+
+  const { segmentationService, viewportGridService, panelService } =
+    ctx.servicesManager.services;
+
+  const { unsubscribeAutoTabSwitchEvents } = setUpAutoTabSwitchHandler({
+    segmentationService,
+    viewportGridService,
+    panelService,
+  });
+
+  this._unsubscriptions.push(...unsubscribeAutoTabSwitchEvents);
+}
+
+export function onModeExit(ctx: withAppTypes) {
+  this._unsubscriptions.forEach(unsubscribe => unsubscribe());
+  this._unsubscriptions.length = 0;
+
+  basicOnModeExit.call(this, ctx);
+}
+
+export const segmentationLayout = {
+  id: ohif.layout,
+  props: {
+    // Panel lists are customization names; the cornerstone extension registers
+    // the defaults and `?customization=` modules can replace them.
+    leftPanels: 'segmentation.leftPanels',
+    leftPanelResizable: true,
+    rightPanels: 'segmentation.rightPanels',
+    rightPanelResizable: true,
+    viewports: [
+      {
+        namespace: cornerstone.viewport,
+        displaySetsToDisplay: [ohif.sopClassHandler],
+      },
+      {
+        namespace: segmentation.viewport,
+        displaySetsToDisplay: [segmentation.sopClassHandler],
+      },
+      {
+        namespace: dicomRT.viewport,
+        displaySetsToDisplay: [dicomRT.sopClassHandler],
+      },
+    ],
+  },
+};
+
+export const segmentationRoute = {
+  path: 'template',
+  layoutTemplate,
+  layoutInstance: segmentationLayout,
+};
+
+export const modeInstance = {
+  id,
+  routeName: 'segmentation',
+  displayName: 'Segmentation',
+  _activatePanelTriggersSubscriptions: [],
+  _unsubscriptions: [],
+  // Toolbar buttons/layout and tool group additions are referenced by
+  // customization name; the cornerstone extension registers the defaults and
+  // `?customization=` modules can extend them (e.g. add new segmentation
+  // tools, remove defaults, or add the annotation tools).
+  toolbarButtons: 'segmentation.toolbarButtons',
+  toolbarSections: 'segmentation.toolbarSections',
+  toolGroupAdditions: 'segmentation.toolGroupAdditions',
+  // Tool group setup used by onModeEnter; extending modes can replace it.
+  initToolGroups,
+  // The segmentation panel is editable in this mode.
+  enableSegmentationEdit: true,
+
+  /**
+   * Lifecycle hooks
+   */
+  onModeEnter,
+  onModeExit,
+  validationTags: {
+    study: [],
+    series: [],
+  },
+
+  isValidMode,
+  routes: [segmentationRoute],
+  extensions: extensionDependencies,
+  // Prefer the grid layout hanging protocol when applicable.
+  hangingProtocol: ['@ohif/mnGrid'],
+  sopClassHandlers: [ohif.sopClassHandler, segmentation.sopClassHandler, dicomRT.sopClassHandler],
+};
+
+/**
+ * The mode uses the basic mode's `modeFactory`, which applies
+ * immutability-helper commands from `modeConfiguration` onto `modeInstance`,
+ * so a site can define a `mySegmentation` mode that extends this one.
+ */
 const mode = {
   id,
   modeFactory,
+  modeInstance,
   extensionDependencies,
 };
 
 export default mode;
+export { initToolGroups };

modes/tmtv/package.json

@@ -35,7 +35,9 @@
     "@ohif/extension-default": "workspace:*",
     "@ohif/extension-dicom-pdf": "workspace:*",
     "@ohif/extension-dicom-video": "workspace:*",
-    "@ohif/extension-measurement-tracking": "workspace:*"
+    "@ohif/extension-measurement-tracking": "workspace:*",
+    "@ohif/extension-tmtv": "workspace:*",
+    "@ohif/mode-basic": "workspace:*"
   },
   "dependencies": {
     "@babel/runtime": "7.29.7",

modes/tmtv/src/index.ts

@@ -1,32 +1,38 @@
 import { classes } from '@ohif/core';
-import toolbarButtons from './toolbarButtons';
+import {
+  applyToolGroupAdditions,
+  layoutTemplate,
+  modeFactory,
+  registerModeToolbar,
+} from '@ohif/mode-basic';
+import i18n from 'i18next';
+
 import { id } from './id.js';
 import initToolGroups from './initToolGroups.js';
 import setCrosshairsConfiguration from './utils/setCrosshairsConfiguration.js';
 import setFusionActiveVolume from './utils/setFusionActiveVolume.js';
-import i18n from 'i18next';
 
 const { MetadataProvider } = classes;
 
-const ohif = {
+export const ohif = {
   layout: '@ohif/extension-default.layoutTemplateModule.viewerLayout',
   sopClassHandler: '@ohif/extension-default.sopClassHandlerModule.stack',
   thumbnailList: '@ohif/extension-default.panelModule.seriesList',
 };
 
-const cs3d = {
+export const cs3d = {
   viewport: '@ohif/extension-cornerstone.viewportModule.cornerstone',
   segPanel: '@ohif/extension-cornerstone.panelModule.panelSegmentationNoHeader',
   measurements: '@ohif/extension-cornerstone.panelModule.measurements',
 };
 
-const tmtv = {
+export const tmtv = {
   hangingProtocol: '@ohif/extension-tmtv.hangingProtocolModule.ptCT',
   petSUV: '@ohif/extension-tmtv.panelModule.petSUV',
   tmtv: '@ohif/extension-tmtv.panelModule.tmtv',
 };
 
-const extensionDependencies = {
+export const extensionDependencies = {
   // Can derive the versions at least process.env.from npm_package_version
   '@ohif/extension-default': '^3.0.0',
   '@ohif/extension-cornerstone': '^3.0.0',
@@ -34,234 +40,214 @@ const extensionDependencies = {
   '@ohif/extension-tmtv': '^3.0.0',
 };
 
-const unsubscriptions = [];
-function modeFactory({ modeConfiguration }) {
-  return {
-    // TODO: We're using this as a route segment
-    // We should not be.
-    id,
-    routeName: 'tmtv',
-    displayName: i18n.t('Modes:Total Metabolic Tumor Volume'),
-    /**
-     * Lifecycle hooks
-     */
-    onModeEnter: ({ servicesManager, extensionManager, commandsManager }: withAppTypes) => {
-      const {
-        toolbarService,
+export function onModeEnter({ servicesManager, extensionManager, commandsManager }: withAppTypes) {
+  const {
+    toolbarService,
+    toolGroupService,
+    customizationService,
+    hangingProtocolService,
+    displaySetService,
+  } = servicesManager.services;
+
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
+
+  const { toolNames, Enums } = utilityModule.exports;
+
+  // Init Default and SR ToolGroups
+  this.initToolGroups?.(toolNames, Enums, toolGroupService, commandsManager);
+
+  const { unsubscribe } = toolGroupService.subscribe(
+    toolGroupService.EVENTS.VIEWPORT_ADDED,
+    () => {
+      // For fusion toolGroup we need to add the volumeIds for the crosshairs
+      // since in the fusion viewport we don't want both PT and CT to render MIP
+      // when slabThickness is modified
+      const { displaySetMatchDetails } = hangingProtocolService.getMatchDetails();
+
+      setCrosshairsConfiguration(
+        displaySetMatchDetails,
+        toolNames,
         toolGroupService,
-        customizationService,
-        hangingProtocolService,
-        displaySetService,
-      } = servicesManager.services;
-
-      const utilityModule = extensionManager.getModuleEntry(
-        '@ohif/extension-cornerstone.utilityModule.tools'
+        displaySetService
       );
 
-      const { toolNames, Enums } = utilityModule.exports;
-
-      // Init Default and SR ToolGroups
-      initToolGroups(toolNames, Enums, toolGroupService, commandsManager);
-
-      const { unsubscribe } = toolGroupService.subscribe(
-        toolGroupService.EVENTS.VIEWPORT_ADDED,
-        () => {
-          // For fusion toolGroup we need to add the volumeIds for the crosshairs
-          // since in the fusion viewport we don't want both PT and CT to render MIP
-          // when slabThickness is modified
-          const { displaySetMatchDetails } = hangingProtocolService.getMatchDetails();
-
-          setCrosshairsConfiguration(
-            displaySetMatchDetails,
-            toolNames,
-            toolGroupService,
-            displaySetService
-          );
-
-          setFusionActiveVolume(
-            displaySetMatchDetails,
-            toolNames,
-            toolGroupService,
-            displaySetService
-          );
-        }
-      );
-
-      unsubscriptions.push(unsubscribe);
-      toolbarService.register(toolbarButtons);
-      toolbarService.updateSection(toolbarService.sections.primary, [
-        'MeasurementTools',
-        'Zoom',
-        'Pan',
-        'WindowLevel',
-        'Crosshairs',
-      ]);
-
-      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.topLeft, [
-        'orientationMenu',
-        'dataOverlayMenu',
-      ]);
-
-      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.bottomMiddle, [
-        'AdvancedRenderingControls',
-      ]);
-
-      toolbarService.updateSection('AdvancedRenderingControls', [
-        'windowLevelMenuEmbedded',
-        'voiManualControlMenu',
-        'Colorbar',
-        'opacityMenu',
-        'thresholdMenu',
-      ]);
-
-      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.topRight, [
-        'modalityLoadBadge',
-        'trackingStatus',
-        'navigationComponent',
-      ]);
-
-      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.bottomLeft, [
-        'windowLevelMenu',
-      ]);
-
-      toolbarService.updateSection('MeasurementTools', [
-        'Length',
-        'Bidirectional',
-        'ArrowAnnotate',
-        'EllipticalROI',
-      ]);
-
-      toolbarService.updateSection('ROIThresholdToolbox', ['SegmentationTools']);
-      toolbarService.updateSection('SegmentationTools', [
-        'RectangleROIStartEndThreshold',
-        'BrushTools',
-      ]);
-
-      toolbarService.updateSection('BrushTools', ['Brush', 'Eraser', 'Threshold']);
-
-      customizationService.setCustomizations({
-        'panelSegmentation.tableMode': {
-          $set: 'expanded',
-        },
-        'panelSegmentation.onSegmentationAdd': {
-          $set: () => {
-            commandsManager.run('createNewLabelmapFromPT');
-          },
-        },
-      });
-
-      // For the hanging protocol we need to decide on the window level
-      // based on whether the SUV is corrected or not, hence we can't hard
-      // code the window level in the hanging protocol but we add a custom
-      // attribute to the hanging protocol that will be used to get the
-      // window level based on the metadata
-      hangingProtocolService.addCustomAttribute(
-        'getPTVOIRange',
-        'get PT VOI based on corrected or not',
-        props => {
-          const ptDisplaySet = props.find(imageSet => imageSet.Modality === 'PT');
-
-          if (!ptDisplaySet) {
-            return;
-          }
-
-          const { imageId } = ptDisplaySet.images[0];
-          const imageIdScalingFactor = MetadataProvider.get('scalingModule', imageId);
-
-          const isSUVAvailable = imageIdScalingFactor && imageIdScalingFactor.suvbw;
-
-          if (isSUVAvailable) {
-            return {
-              windowWidth: 5,
-              windowCenter: 2.5,
-            };
-          }
-
-          return;
-        }
-      );
-    },
-    onModeExit: ({ servicesManager }: withAppTypes) => {
-      const {
+      setFusionActiveVolume(
+        displaySetMatchDetails,
+        toolNames,
         toolGroupService,
-        syncGroupService,
-        segmentationService,
-        cornerstoneViewportService,
-        uiDialogService,
-        uiModalService,
-      } = servicesManager.services;
+        displaySetService
+      );
+    }
+  );
 
-      unsubscriptions.forEach(unsubscribe => unsubscribe());
-      uiDialogService.hideAll();
-      uiModalService.hide();
-      toolGroupService.destroy();
-      syncGroupService.destroy();
-      segmentationService.destroy();
-      cornerstoneViewportService.destroy();
-    },
-    validationTags: {
-      study: [],
-      series: [],
-    },
-    isValidMode: ({ modalities, study }) => {
-      const modalities_list = modalities.split('\\');
-      const invalidModalities = ['SM'];
+  this._unsubscriptions.push(unsubscribe);
 
-      const isValid =
-        modalities_list.includes('CT') &&
-        study.mrn !== 'M1' &&
-        modalities_list.includes('PT') &&
-        !invalidModalities.some(modality => modalities_list.includes(modality)) &&
-        // This is study is a 4D study with PT and CT and not a 3D study for the tmtv
-        // mode, until we have a better way to identify 4D studies we will use the
-        // StudyInstanceUID to identify the study
-        // Todo: when we add the 4D mode which comes with a mechanism to identify
-        // 4D studies we can use that
-        study.studyInstanceUid !== '1.3.6.1.4.1.12842.1.1.14.3.20220915.105557.468.2963630849';
+  // Toolbar buttons and layout are supplied as customization references (the
+  // tmtv extension registers the defaults; `?customization=` modules can
+  // extend them) or as literal values for modes that define them inline.
+  registerModeToolbar({ toolbarService, customizationService }, this);
 
-      // there should be both CT and PT modalities and the modality should not be SM
-      return {
-        valid: isValid,
-        description: 'The mode requires both PT and CT series in the study',
-      };
+  // Extra tools (e.g. annotation tools added by a customization) are layered
+  // onto the tool groups created above.
+  applyToolGroupAdditions({ toolGroupService, customizationService }, this.toolGroupAdditions);
+
+  customizationService.setCustomizations({
+    'panelSegmentation.tableMode': {
+      $set: 'expanded',
     },
-    routes: [
-      {
-        path: 'tmtv',
-        /*init: ({ servicesManager, extensionManager }) => {
-          //defaultViewerRouteInit
-        },*/
-        layoutTemplate: () => {
-          return {
-            id: ohif.layout,
-            props: {
-              leftPanels: [ohif.thumbnailList],
-              leftPanelResizable: true,
-              leftPanelClosed: true,
-              rightPanels: [tmtv.tmtv, tmtv.petSUV],
-              rightPanelResizable: true,
-              viewports: [
-                {
-                  namespace: cs3d.viewport,
-                  displaySetsToDisplay: [ohif.sopClassHandler],
-                },
-              ],
-            },
-          };
-        },
+    'panelSegmentation.onSegmentationAdd': {
+      $set: () => {
+        commandsManager.run('createNewLabelmapFromPT');
       },
-    ],
-    extensions: extensionDependencies,
-    hangingProtocol: tmtv.hangingProtocol,
-    sopClassHandlers: [ohif.sopClassHandler],
-    ...modeConfiguration,
+    },
+  });
+
+  // For the hanging protocol we need to decide on the window level
+  // based on whether the SUV is corrected or not, hence we can't hard
+  // code the window level in the hanging protocol but we add a custom
+  // attribute to the hanging protocol that will be used to get the
+  // window level based on the metadata
+  hangingProtocolService.addCustomAttribute(
+    'getPTVOIRange',
+    'get PT VOI based on corrected or not',
+    props => {
+      const ptDisplaySet = props.find(imageSet => imageSet.Modality === 'PT');
+
+      if (!ptDisplaySet) {
+        return;
+      }
+
+      const { imageId } = ptDisplaySet.images[0];
+      const imageIdScalingFactor = MetadataProvider.get('scalingModule', imageId);
+
+      const isSUVAvailable = imageIdScalingFactor && imageIdScalingFactor.suvbw;
+
+      if (isSUVAvailable) {
+        return {
+          windowWidth: 5,
+          windowCenter: 2.5,
+        };
+      }
+
+      return;
+    }
+  );
+}
+
+export function onModeExit({ servicesManager }: withAppTypes) {
+  const {
+    toolGroupService,
+    syncGroupService,
+    segmentationService,
+    cornerstoneViewportService,
+    uiDialogService,
+    uiModalService,
+  } = servicesManager.services;
+
+  this._unsubscriptions.forEach(unsubscribe => unsubscribe());
+  this._unsubscriptions.length = 0;
+
+  uiDialogService.hideAll();
+  uiModalService.hide();
+  toolGroupService.destroy();
+  syncGroupService.destroy();
+  segmentationService.destroy();
+  cornerstoneViewportService.destroy();
+}
+
+export function isValidMode({ modalities, study }) {
+  const modalities_list = modalities.split('\\');
+  const invalidModalities = ['SM'];
+
+  const isValid =
+    modalities_list.includes('CT') &&
+    study.mrn !== 'M1' &&
+    modalities_list.includes('PT') &&
+    !invalidModalities.some(modality => modalities_list.includes(modality)) &&
+    // This is study is a 4D study with PT and CT and not a 3D study for the tmtv
+    // mode, until we have a better way to identify 4D studies we will use the
+    // StudyInstanceUID to identify the study
+    // Todo: when we add the 4D mode which comes with a mechanism to identify
+    // 4D studies we can use that
+    study.studyInstanceUid !== '1.3.6.1.4.1.12842.1.1.14.3.20220915.105557.468.2963630849';
+
+  // there should be both CT and PT modalities and the modality should not be SM
+  return {
+    valid: isValid,
+    description: 'The mode requires both PT and CT series in the study',
   };
 }
 
+export const tmtvLayout = {
+  id: ohif.layout,
+  props: {
+    // Panel lists are customization names; the tmtv extension registers the
+    // defaults and `?customization=` modules can replace them.
+    leftPanels: 'tmtv.leftPanels',
+    leftPanelResizable: true,
+    leftPanelClosed: true,
+    rightPanels: 'tmtv.rightPanels',
+    rightPanelResizable: true,
+    viewports: [
+      {
+        namespace: cs3d.viewport,
+        displaySetsToDisplay: [ohif.sopClassHandler],
+      },
+    ],
+  },
+};
+
+export const tmtvRoute = {
+  path: 'tmtv',
+  layoutTemplate,
+  layoutInstance: tmtvLayout,
+};
+
+export const modeInstance = {
+  // TODO: We're using this as a route segment
+  // We should not be.
+  id,
+  routeName: 'tmtv',
+  displayName: i18n.t('Modes:Total Metabolic Tumor Volume'),
+  _unsubscriptions: [],
+  // Toolbar buttons/layout and tool group additions are referenced by
+  // customization name; the tmtv extension registers the defaults and
+  // `?customization=` modules can extend them.
+  toolbarButtons: 'tmtv.toolbarButtons',
+  toolbarSections: 'tmtv.toolbarSections',
+  toolGroupAdditions: 'tmtv.toolGroupAdditions',
+  // Tool group setup used by onModeEnter; extending modes can replace it.
+  initToolGroups,
+
+  /**
+   * Lifecycle hooks
+   */
+  onModeEnter,
+  onModeExit,
+  validationTags: {
+    study: [],
+    series: [],
+  },
+  isValidMode,
+  routes: [tmtvRoute],
+  extensions: extensionDependencies,
+  hangingProtocol: tmtv.hangingProtocol,
+  sopClassHandlers: [ohif.sopClassHandler],
+};
+
+/**
+ * The mode uses the basic mode's `modeFactory`, which applies
+ * immutability-helper commands from `modeConfiguration` onto `modeInstance`,
+ * so a site can define a mode that extends this one.
+ */
 const mode = {
   id,
   modeFactory,
+  modeInstance,
   extensionDependencies,
 };
 
 export default mode;
+export { initToolGroups };

modes/tmtv/src/initToolGroups.js

@@ -1,12 +1,8 @@
+import { toolGroupIds } from '@ohif/extension-tmtv';
+
 import { MIN_SEGMENTATION_DRAWING_RADIUS, MAX_SEGMENTATION_DRAWING_RADIUS } from './constants';
 
-export const toolGroupIds = {
-  CT: 'ctToolGroup',
-  PT: 'ptToolGroup',
-  Fusion: 'fusionToolGroup',
-  MIP: 'mipToolGroup',
-  default: 'default',
-};
+export { toolGroupIds };
 
 function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
   const tools = {

modes/tmtv/src/toolbarButtons.ts

@@ -1,461 +0,0 @@
-import { toolGroupIds } from './initToolGroups';
-import i18n from 'i18next';
-
-import { MIN_SEGMENTATION_DRAWING_RADIUS, MAX_SEGMENTATION_DRAWING_RADIUS } from './constants';
-
-const setToolActiveToolbar = {
-  commandName: 'setToolActiveToolbar',
-  commandOptions: {
-    toolGroupIds: [toolGroupIds.CT, toolGroupIds.PT, toolGroupIds.Fusion],
-  },
-};
-
-const toolbarButtons = [
-  {
-    id: 'MeasurementTools',
-    uiType: 'ohif.toolButtonList',
-    props: {
-      buttonSection: true,
-    },
-  },
-  {
-    id: 'SegmentationTools',
-    uiType: 'ohif.toolBoxButton',
-    props: {
-      buttonSection: true,
-    },
-  },
-  {
-    id: 'BrushTools',
-    uiType: 'ohif.toolBoxButtonGroup',
-    props: {
-      buttonSection: true,
-    },
-  },
-  {
-    id: 'AdvancedRenderingControls',
-    uiType: 'ohif.advancedRenderingControls',
-    props: {
-      buttonSection: true,
-    },
-  },
-  {
-    id: 'modalityLoadBadge',
-    uiType: 'ohif.modalityLoadBadge',
-    props: {
-      icon: 'Status',
-      label: i18n.t('Buttons:Status'),
-      tooltip: i18n.t('Buttons:Status'),
-      evaluate: {
-        name: 'evaluate.modalityLoadBadge',
-        hideWhenDisabled: true,
-      },
-    },
-  },
-  {
-    id: 'Colorbar',
-    uiType: 'ohif.colorbar',
-    props: {
-      type: 'tool',
-      label: i18n.t('Buttons:Colorbar'),
-    },
-  },
-  {
-    id: 'navigationComponent',
-    uiType: 'ohif.navigationComponent',
-    props: {
-      icon: 'Navigation',
-      label: i18n.t('Buttons:Navigation'),
-      tooltip: i18n.t('Buttons:Navigate between segments/measurements and manage their visibility'),
-      evaluate: {
-        name: 'evaluate.navigationComponent',
-        hideWhenDisabled: true,
-      },
-    },
-  },
-  {
-    id: 'windowLevelMenuEmbedded',
-    uiType: 'ohif.windowLevelMenuEmbedded',
-    props: {
-      icon: 'WindowLevel',
-      label: i18n.t('Buttons:Window Level'),
-      tooltip: i18n.t('Buttons:Adjust window/level presets and customize image contrast settings'),
-      evaluate: {
-        name: 'evaluate.windowLevelMenuEmbedded',
-        hideWhenDisabled: true,
-      },
-    },
-  },
-  {
-    id: 'trackingStatus',
-    uiType: 'ohif.trackingStatus',
-    props: {
-      icon: 'TrackingStatus',
-      label: i18n.t('Buttons:Tracking Status'),
-      tooltip: i18n.t('Buttons:View and manage tracking status of measurements and annotations'),
-      evaluate: {
-        name: 'evaluate.trackingStatus',
-        hideWhenDisabled: true,
-      },
-    },
-  },
-  {
-    id: 'Length',
-    uiType: 'ohif.toolButton',
-    props: {
-      icon: 'tool-length',
-      label: i18n.t('Buttons:Length'),
-      tooltip: i18n.t('Buttons:Length Tool'),
-      commands: setToolActiveToolbar,
-      evaluate: 'evaluate.cornerstoneTool',
-    },
-  },
-  {
-    id: 'Bidirectional',
-    uiType: 'ohif.toolButton',
-    props: {
-      icon: 'tool-bidirectional',
-      label: i18n.t('Buttons:Bidirectional'),
-      tooltip: i18n.t('Buttons:Bidirectional Tool'),
-      commands: setToolActiveToolbar,
-      evaluate: 'evaluate.cornerstoneTool',
-    },
-  },
-  {
-    id: 'ArrowAnnotate',
-    uiType: 'ohif.toolButton',
-    props: {
-      icon: 'tool-annotate',
-      label: i18n.t('Buttons:Arrow Annotate'),
-      tooltip: i18n.t('Buttons:Arrow Annotate Tool'),
-      commands: setToolActiveToolbar,
-      evaluate: 'evaluate.cornerstoneTool',
-    },
-  },
-  {
-    id: 'EllipticalROI',
-    uiType: 'ohif.toolButton',
-    props: {
-      icon: 'tool-ellipse',
-      label: i18n.t('Buttons:Ellipse'),
-      tooltip: i18n.t('Buttons:Ellipse Tool'),
-      commands: setToolActiveToolbar,
-      evaluate: 'evaluate.cornerstoneTool',
-    },
-  },
-  {
-    id: 'Zoom',
-    uiType: 'ohif.toolButton',
-    props: {
-      icon: 'tool-zoom',
-      label: i18n.t('Buttons:Zoom'),
-      commands: setToolActiveToolbar,
-      evaluate: 'evaluate.cornerstoneTool',
-    },
-  },
-  {
-    id: 'WindowLevel',
-    uiType: 'ohif.toolButton',
-    props: {
-      icon: 'tool-window-level',
-      label: i18n.t('Buttons:Window Level'),
-      commands: setToolActiveToolbar,
-      evaluate: 'evaluate.cornerstoneTool',
-    },
-  },
-  {
-    id: 'Crosshairs',
-    uiType: 'ohif.toolButton',
-    props: {
-      icon: 'tool-crosshair',
-      label: i18n.t('Buttons:Crosshairs'),
-      commands: setToolActiveToolbar,
-      evaluate: 'evaluate.cornerstoneTool',
-    },
-  },
-  {
-    id: 'Pan',
-    uiType: 'ohif.toolButton',
-    props: {
-      icon: 'tool-move',
-      label: i18n.t('Buttons:Pan'),
-      commands: setToolActiveToolbar,
-      evaluate: 'evaluate.cornerstoneTool',
-    },
-  },
-  {
-    id: 'RectangleROIStartEndThreshold',
-    uiType: 'ohif.toolBoxButton',
-    props: {
-      icon: 'tool-create-threshold',
-      label: i18n.t('Buttons:Rectangle ROI Threshold'),
-      commands: setToolActiveToolbar,
-      evaluate: [
-        'evaluate.cornerstone.segmentation',
-        {
-          name: 'evaluate.cornerstoneTool',
-          disabledText: i18n.t('Buttons:Select the PT Axial to enable this tool'),
-        },
-      ],
-      options: 'tmtv.RectangleROIThresholdOptions',
-    },
-  },
-
-  {
-    id: 'Brush',
-    uiType: 'ohif.toolButton',
-    props: {
-      icon: 'icon-tool-brush',
-      label: i18n.t('Buttons:Brush'),
-      evaluate: [
-        {
-          name: 'evaluate.cornerstone.segmentation',
-          toolNames: ['CircularBrush', 'SphereBrush'],
-          disabledText: i18n.t('Buttons:Create new segmentation to enable this tool.'),
-        },
-        {
-          name: 'evaluate.cornerstone.segmentation.synchronizeDrawingRadius',
-          radiusOptionId: 'brush-radius',
-        },
-      ],
-      options: [
-        {
-          name: i18n.t('Buttons:Radius (mm)'),
-          id: 'brush-radius',
-          type: 'range',
-          explicitRunOnly: true,
-          min: MIN_SEGMENTATION_DRAWING_RADIUS,
-          max: MAX_SEGMENTATION_DRAWING_RADIUS,
-          step: 0.5,
-          value: 25,
-          commands: {
-            commandName: 'setBrushSize',
-            commandOptions: { toolNames: ['CircularBrush', 'SphereBrush'] },
-          },
-        },
-        {
-          name: i18n.t('Buttons:Shape'),
-          type: 'radio',
-          id: 'brush-mode',
-          value: 'CircularBrush',
-          values: [
-            { value: 'CircularBrush', label: i18n.t('Buttons:Circle') },
-            { value: 'SphereBrush', label: i18n.t('Buttons:Sphere') },
-          ],
-          commands: 'setToolActiveToolbar',
-        },
-      ],
-    },
-  },
-  {
-    id: 'Eraser',
-    uiType: 'ohif.toolButton',
-    props: {
-      icon: 'icon-tool-eraser',
-      label: i18n.t('Buttons:Eraser'),
-      evaluate: [
-        {
-          name: 'evaluate.cornerstone.segmentation',
-          toolNames: ['CircularEraser', 'SphereEraser'],
-        },
-        {
-          name: 'evaluate.cornerstone.segmentation.synchronizeDrawingRadius',
-          radiusOptionId: 'eraser-radius',
-        },
-      ],
-      options: [
-        {
-          name: i18n.t('Buttons:Radius (mm)'),
-          id: 'eraser-radius',
-          type: 'range',
-          explicitRunOnly: true,
-          min: MIN_SEGMENTATION_DRAWING_RADIUS,
-          max: MAX_SEGMENTATION_DRAWING_RADIUS,
-          step: 0.5,
-          value: 25,
-          commands: {
-            commandName: 'setBrushSize',
-            commandOptions: { toolNames: ['CircularEraser', 'SphereEraser'] },
-          },
-        },
-        {
-          name: i18n.t('Buttons:Shape'),
-          type: 'radio',
-          id: 'eraser-mode',
-          value: 'CircularEraser',
-          values: [
-            { value: 'CircularEraser', label: i18n.t('Buttons:Circle') },
-            { value: 'SphereEraser', label: i18n.t('Buttons:Sphere') },
-          ],
-          commands: 'setToolActiveToolbar',
-        },
-      ],
-    },
-  },
-  {
-    id: 'Threshold',
-    uiType: 'ohif.toolButton',
-    props: {
-      icon: 'icon-tool-threshold',
-      label: i18n.t('Buttons:Threshold Tool'),
-      evaluate: [
-        {
-          name: 'evaluate.cornerstone.segmentation',
-          toolNames: ['ThresholdCircularBrush', 'ThresholdSphereBrush', 'ThresholdCircularBrushDynamic'],
-        },
-        {
-          name: 'evaluate.cornerstone.segmentation.synchronizeDrawingRadius',
-          radiusOptionId: 'threshold-radius',
-        },
-      ],
-      options: [
-        {
-          name: i18n.t('Buttons:Radius (mm)'),
-          id: 'threshold-radius',
-          type: 'range',
-          explicitRunOnly: true,
-          min: MIN_SEGMENTATION_DRAWING_RADIUS,
-          max: MAX_SEGMENTATION_DRAWING_RADIUS,
-          step: 0.5,
-          value: 25,
-          commands: {
-            commandName: 'setBrushSize',
-            commandOptions: {
-              toolNames: [
-                'ThresholdCircularBrush',
-                'ThresholdSphereBrush',
-                'ThresholdCircularBrushDynamic',
-              ],
-            },
-          },
-        },
-        {
-          name: i18n.t('Buttons:Threshold'),
-          type: 'radio',
-          id: 'dynamic-mode',
-          value: 'ThresholdRange',
-          values: [
-            { value: 'ThresholdDynamic', label: i18n.t('Buttons:Dynamic') },
-            { value: 'ThresholdRange', label: i18n.t('Buttons:Range') },
-          ],
-          commands: ({ value, commandsManager }) => {
-            if (value === 'ThresholdDynamic') {
-              commandsManager.run('setToolActive', {
-                toolName: 'ThresholdCircularBrushDynamic',
-              });
-            } else {
-              commandsManager.run('setToolActive', {
-                toolName: 'ThresholdCircularBrush',
-              });
-            }
-          },
-        },
-        {
-          name: i18n.t('Buttons:Shape'),
-          type: 'radio',
-          id: 'eraser-mode',
-          value: 'ThresholdCircularBrush',
-          values: [
-            { value: 'ThresholdCircularBrush', label: i18n.t('Buttons:Circle') },
-            { value: 'ThresholdSphereBrush', label: i18n.t('Buttons:Sphere') },
-          ],
-          condition: ({ options }) =>
-            options.find(option => option.id === 'dynamic-mode').value === 'ThresholdRange',
-          commands: 'setToolActiveToolbar',
-        },
-        {
-          name: i18n.t('ROIThresholdConfiguration:ThresholdRange'),
-          type: 'double-range',
-          id: 'threshold-range',
-          min: 0,
-          max: 50,
-          step: 0.5,
-          value: [2.5, 50],
-          condition: ({ options }) =>
-            options.find(option => option.id === 'dynamic-mode').value === 'ThresholdRange',
-          commands: {
-            commandName: 'setThresholdRange',
-            commandOptions: {
-              toolNames: ['ThresholdCircularBrush', 'ThresholdSphereBrush'],
-            },
-          },
-        },
-      ],
-    },
-  },
-  {
-    id: 'dataOverlayMenu',
-    uiType: 'ohif.dataOverlayMenu',
-    props: {
-      icon: 'ViewportViews',
-      label: i18n.t('Buttons:Data Overlay'),
-      tooltip: i18n.t(
-        'Buttons:Configure data overlay options and manage foreground/background display sets'
-      ),
-      evaluate: 'evaluate.dataOverlayMenu',
-    },
-  },
-  {
-    id: 'orientationMenu',
-    uiType: 'ohif.orientationMenu',
-    props: {
-      icon: 'OrientationSwitch',
-      label: i18n.t('Buttons:Orientation'),
-      tooltip: i18n.t(
-        'Buttons:Change viewport orientation between axial, sagittal, coronal and reformat planes'
-      ),
-      evaluate: {
-        name: 'evaluate.orientationMenu',
-        // hideWhenDisabled: true,
-      },
-    },
-  },
-  {
-    id: 'windowLevelMenu',
-    uiType: 'ohif.windowLevelMenu',
-    props: {
-      icon: 'WindowLevel',
-      label: i18n.t('Buttons:Window Level'),
-      tooltip: i18n.t('Buttons:Adjust window/level presets and customize image contrast settings'),
-      evaluate: 'evaluate.windowLevelMenu',
-    },
-  },
-  {
-    id: 'voiManualControlMenu',
-    uiType: 'ohif.voiManualControlMenu',
-    props: {
-      icon: 'WindowLevelAdvanced',
-      label: i18n.t('Buttons:Advanced Window Level'),
-      tooltip: i18n.t('Buttons:Advanced window/level settings with manual controls and presets'),
-      evaluate: 'evaluate.voiManualControlMenu',
-    },
-  },
-  {
-    id: 'thresholdMenu',
-    uiType: 'ohif.thresholdMenu',
-    props: {
-      icon: 'Threshold',
-      label: i18n.t('Buttons:Threshold'),
-      tooltip: i18n.t('Buttons:Image threshold settings'),
-      evaluate: {
-        name: 'evaluate.thresholdMenu',
-        hideWhenDisabled: true,
-      },
-    },
-  },
-  {
-    id: 'opacityMenu',
-    uiType: 'ohif.opacityMenu',
-    props: {
-      icon: 'Opacity',
-      label: i18n.t('Buttons:Opacity'),
-      tooltip: i18n.t('Buttons:Image opacity settings'),
-      evaluate: {
-        name: 'evaluate.opacityMenu',
-        hideWhenDisabled: true,
-      },
-    },
-  },
-];
-
-export default toolbarButtons;