feat: Add extensibility for tmtv and segmentation modes (#6128)

* feat: Add extensibility for tmtv and segmentation modes

* Fixes for ordering issues on laod

* Remove unnecessary reference lookup

* Chane side panel timing to fix tests

* PR comments - change how mode definitions get created

* Improvements to mode customizations

* Start organizing customizations

* Misc fixes for a customization demo page

* Security fixes

* PR requested changes to naming

modes/basic-test-mode/package.json

@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "@babel/runtime": "7.29.7",
+    "@ohif/mode-basic": "workspace:*",
     "i18next": "17.3.1"
   },
   "devDependencies": {

modes/basic-test-mode/src/index.ts

@@ -1,7 +1,17 @@
+import i18n from 'i18next';
+import { ToolbarService } from '@ohif/core';
+import {
+  isValidMode,
+  layoutTemplate,
+  modeFactory,
+  modeInstance as basicModeInstance,
+} from '@ohif/mode-basic';
+
 import toolbarButtons from './toolbarButtons';
 import { id } from './id';
 import initToolGroups from './initToolGroups';
-import i18n from 'i18next';
+
+const { TOOLBAR_SECTIONS } = ToolbarService;
 
 // Allow this mode by excluding non-imaging modalities such as SR, SEG
 // Also, SM is not a simple imaging modalities, so exclude it.
@@ -67,231 +77,178 @@ const extensionDependencies = {
   '@ohif/extension-test': '^0.0.1',
 };
 
-function modeFactory() {
-  return {
-    id,
-    routeName: 'basic-test',
-    displayName: i18n.t('Modes:Basic Test Mode'),
-    /**
-     * Lifecycle hooks
-     */
-    onModeEnter: ({ servicesManager, extensionManager, commandsManager }: withAppTypes) => {
-      const { measurementService, toolbarService, toolGroupService, customizationService } =
-        servicesManager.services;
+/**
+ * The test mode's toolbar layout, supplied as literal values rather than
+ * `{ $reference }` capability-pack markers (the composition is resolved the
+ * same way either — literals pass through untouched).
+ */
+const toolbarSections = {
+  [TOOLBAR_SECTIONS.primary]: [
+    'MeasurementTools',
+    'Zoom',
+    'WindowLevelGroup',
+    'Pan',
+    'Capture',
+    'Layout',
+    'MPR',
+    'Crosshairs',
+    'MoreTools',
+  ],
 
-      measurementService.clearMeasurements();
+  WindowLevelGroup: ['WindowLevel', 'Soft tissue', 'Lung', 'Liver', 'Bone', 'Brain'],
 
-      // Init Default and SR ToolGroups
-      initToolGroups(extensionManager, toolGroupService, commandsManager);
+  [TOOLBAR_SECTIONS.viewportActionMenu.topLeft]: ['orientationMenu', 'dataOverlayMenu'],
 
-      // init customizations
-      customizationService.setCustomizations([
-        '@ohif/extension-test.customizationModule.custom-context-menu',
-      ]);
+  [TOOLBAR_SECTIONS.viewportActionMenu.bottomMiddle]: ['AdvancedRenderingControls'],
 
-      toolbarService.register(toolbarButtons);
-      console.debug('toolbarButtons', toolbarButtons);
-      toolbarService.updateSection(toolbarService.sections.primary, [
-        'MeasurementTools',
-        'Zoom',
-        'WindowLevelGroup',
-        'Pan',
-        'Capture',
-        'Layout',
-        'MPR',
-        'Crosshairs',
-        'MoreTools',
-      ]);
+  AdvancedRenderingControls: ['voiManualControlMenu', 'Colorbar', 'opacityMenu', 'thresholdMenu'],
 
-      toolbarService.updateSection('WindowLevelGroup', [
-        'WindowLevel',
-        'Soft tissue',
-        'Lung',
-        'Liver',
-        'Bone',
-        'Brain',
-      ]);
+  [TOOLBAR_SECTIONS.viewportActionMenu.topRight]: [
+    'modalityLoadBadge',
+    'trackingStatus',
+    'navigationComponent',
+  ],
 
-      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.topLeft, [
-        'orientationMenu',
-        'dataOverlayMenu',
-      ]);
+  [TOOLBAR_SECTIONS.viewportActionMenu.bottomLeft]: ['windowLevelMenu'],
 
-      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.bottomMiddle, [
-        'AdvancedRenderingControls',
-      ]);
+  MeasurementTools: [
+    'Length',
+    'Bidirectional',
+    'ArrowAnnotate',
+    'EllipticalROI',
+    'CircleROI',
+    'PlanarFreehandROI',
+    'SplineROI',
+    'LivewireContour',
+  ],
 
-      toolbarService.updateSection('AdvancedRenderingControls', [
-        'voiManualControlMenu',
-        'Colorbar',
-        'opacityMenu',
-        'thresholdMenu',
-      ]);
+  MoreTools: [
+    'Reset',
+    'rotate-right',
+    'flipHorizontal',
+    'ImageSliceSync',
+    'ReferenceLines',
+    'ImageOverlayViewer',
+    'StackScroll',
+    'invert',
+    'Probe',
+    'Cine',
+    'Angle',
+    'CobbAngle',
+    'Magnify',
+    'RectangleROI',
+    'CalibrationLine',
+    'TagBrowser',
+    'AdvancedMagnify',
+    'UltrasoundDirectionalTool',
+    'WindowLevelRegion',
+  ],
+};
 
-      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.topRight, [
-        'modalityLoadBadge',
-        'trackingStatus',
-        'navigationComponent',
-      ]);
-
-      toolbarService.updateSection(toolbarService.sections.viewportActionMenu.bottomLeft, [
-        'windowLevelMenu',
-      ]);
-
-      toolbarService.updateSection('WindowLevelGroup', [
-        'WindowLevel',
-        'Soft tissue',
-        'Lung',
-        'Liver',
-        'Bone',
-        'Brain',
-      ]);
-
-      toolbarService.updateSection('MeasurementTools', [
-        'Length',
-        'Bidirectional',
-        'ArrowAnnotate',
-        'EllipticalROI',
-        'CircleROI',
-        'PlanarFreehandROI',
-        'SplineROI',
-        'LivewireContour',
-      ]);
-
-      toolbarService.updateSection('MoreTools', [
-        'Reset',
-        'rotate-right',
-        'flipHorizontal',
-        'ImageSliceSync',
-        'ReferenceLines',
-        'ImageOverlayViewer',
-        'StackScroll',
-        'invert',
-        'Probe',
-        'Cine',
-        'Angle',
-        'CobbAngle',
-        'Magnify',
-        'RectangleROI',
-        'CalibrationLine',
-        'TagBrowser',
-        'AdvancedMagnify',
-        'UltrasoundDirectionalTool',
-        'WindowLevelRegion',
-      ]);
-
-      customizationService.setCustomizations(
-        {
-          'ohif.hotkeyBindings': {
-            $push: [
-              {
-                commandName: 'undo',
-                label: 'Undo',
-                keys: ['ctrl+z'],
-                isEditable: true,
-              },
-            ],
-          },
-        },
-        'mode'
-      );
-    },
-    onModeExit: ({ servicesManager }: withAppTypes) => {
-      const {
-        toolGroupService,
-        syncGroupService,
-        segmentationService,
-        cornerstoneViewportService,
-        uiDialogService,
-        uiModalService,
-      } = servicesManager.services;
-
-      uiDialogService.hideAll();
-      uiModalService.hide();
-      toolGroupService.destroy();
-      syncGroupService.destroy();
-      segmentationService.destroy();
-      cornerstoneViewportService.destroy();
-    },
-    validationTags: {
-      study: [],
-      series: [],
-    },
-
-    isValidMode: function ({ modalities }) {
-      const modalities_list = modalities.split('\\');
-
-      // Exclude non-image modalities
-      return {
-        valid: !!modalities_list.filter(modality => NON_IMAGE_MODALITIES.indexOf(modality) === -1)
-          .length,
-        description:
-          'The mode does not support studies that ONLY include the following modalities: SM, ECG, SR, SEG',
-      };
-    },
-    routes: [
+export const basicTestLayout = {
+  id: ohif.layout,
+  props: {
+    // Literal panel lists; the shared layout template also accepts
+    // customization names here.
+    leftPanels: [tracked.thumbnailList],
+    leftPanelResizable: true,
+    rightPanels: [cornerstone.panel, tracked.measurements, testExtension.measurements],
+    rightPanelResizable: true,
+    viewports: [
       {
-        path: 'basic-test',
-        layoutTemplate: () => {
-          return {
-            id: ohif.layout,
-            props: {
-              leftPanels: [tracked.thumbnailList],
-              leftPanelResizable: true,
-              rightPanels: [cornerstone.panel, tracked.measurements, testExtension.measurements],
-              rightPanelResizable: true,
-              viewports: [
-                {
-                  namespace: tracked.viewport,
-                  displaySetsToDisplay: [
-                    ohif.sopClassHandler,
-                    dicomvideo.sopClassHandler,
-                    ohif.wsiSopClassHandler,
-                  ],
-                },
-                {
-                  namespace: dicomsr.viewport,
-                  displaySetsToDisplay: [dicomsr.sopClassHandler, dicomsr.sopClassHandler3D],
-                },
-                {
-                  namespace: dicompdf.viewport,
-                  displaySetsToDisplay: [dicompdf.sopClassHandler],
-                },
-                {
-                  namespace: dicomSeg.viewport,
-                  displaySetsToDisplay: [dicomSeg.sopClassHandler],
-                },
-                {
-                  namespace: dicomPmap.viewport,
-                  displaySetsToDisplay: [dicomPmap.sopClassHandler],
-                },
-              ],
-            },
-          };
-        },
+        namespace: tracked.viewport,
+        displaySetsToDisplay: [
+          ohif.sopClassHandler,
+          dicomvideo.sopClassHandler,
+          ohif.wsiSopClassHandler,
+        ],
+      },
+      {
+        namespace: dicomsr.viewport,
+        displaySetsToDisplay: [dicomsr.sopClassHandler, dicomsr.sopClassHandler3D],
+      },
+      {
+        namespace: dicompdf.viewport,
+        displaySetsToDisplay: [dicompdf.sopClassHandler],
+      },
+      {
+        namespace: dicomSeg.viewport,
+        displaySetsToDisplay: [dicomSeg.sopClassHandler],
+      },
+      {
+        namespace: dicomPmap.viewport,
+        displaySetsToDisplay: [dicomPmap.sopClassHandler],
       },
     ],
-    extensions: extensionDependencies,
-    hangingProtocol: 'default',
-    sopClassHandlers: [
-      dicomvideo.sopClassHandler,
-      dicomSeg.sopClassHandler,
-      ohif.wsiSopClassHandler,
-      ohif.sopClassHandler,
-      dicompdf.sopClassHandler,
-      dicomsr.sopClassHandler,
-      dicomsr.sopClassHandler3D,
-    ],
-    hotkeys: {
-      name: 'basic-test-hotkeys',
+  },
+};
+
+export const basicTestRoute = {
+  path: 'basic-test',
+  layoutTemplate,
+  layoutInstance: basicTestLayout,
+};
+
+/**
+ * Extends the basic mode instance: the shared onModeEnter/onModeExit are
+ * inherited, and the test specifics (toolbar layout, tool groups, test
+ * customizations) are supplied as instance data.
+ */
+export const modeInstance = {
+  ...basicModeInstance,
+  id,
+  routeName: 'basic-test',
+  displayName: i18n.t('Modes:Basic Test Mode'),
+  // Literal toolbar values instead of the basic mode's customization names.
+  toolbarButtons,
+  toolbarSections,
+  // Tool group setup used by the shared onModeEnter.
+  initToolGroups,
+  // The mode's own customizations, applied by the mode route as the bottom
+  // layer of the mode scope: the test extension's custom context menu, plus
+  // the undo hotkey used by the E2E tests.  Given as a literal here; modes may
+  // also reference a registered block by name (see `basicModeCustomizations`).
+  modeCustomizations: [
+    '@ohif/extension-test.customizationModule.custom-context-menu',
+    {
+      'ohif.hotkeyBindings': {
+        $push: [
+          {
+            commandName: 'undo',
+            label: 'Undo',
+            keys: ['ctrl+z'],
+            isEditable: true,
+          },
+        ],
+      },
     },
-  };
-}
+  ],
+
+  isValidMode,
+  nonModeModalities: NON_IMAGE_MODALITIES,
+  routes: [basicTestRoute],
+  extensions: extensionDependencies,
+  hangingProtocol: 'default',
+  sopClassHandlers: [
+    dicomvideo.sopClassHandler,
+    dicomSeg.sopClassHandler,
+    ohif.wsiSopClassHandler,
+    ohif.sopClassHandler,
+    dicompdf.sopClassHandler,
+    dicomsr.sopClassHandler,
+    dicomsr.sopClassHandler3D,
+  ],
+  hotkeys: {
+    name: 'basic-test-hotkeys',
+  },
+};
 
 const mode = {
   id,
   modeFactory,
+  modeInstance,
   extensionDependencies,
 };
 
 export default mode;
+export { initToolGroups };

modes/basic-test-mode/src/initToolGroups.ts

@@ -267,7 +267,7 @@ function initVolume3DToolGroup(extensionManager, toolGroupService) {
   toolGroupService.createToolGroupAndAddTools('volume3d', tools);
 }
 
-function initToolGroups(extensionManager, toolGroupService, commandsManager) {
+function initToolGroups({ extensionManager, toolGroupService, commandsManager }) {
   initDefaultToolGroup(extensionManager, toolGroupService, commandsManager, 'default');
   initSRToolGroup(extensionManager, toolGroupService, commandsManager);
   initMPRToolGroup(extensionManager, toolGroupService, commandsManager);

modes/basic/src/index.tsx

@@ -2,6 +2,11 @@ import update from 'immutability-helper';
 import { utils } from '@ohif/core';
 
 import initToolGroups from './initToolGroups';
+import {
+  addActivatePanelTriggers,
+  applyToolGroupAdditions,
+  registerModeToolbar,
+} from './modeCustomization';
 import { id } from './id';
 
 const { structuredCloneWithFunctions } = utils;
@@ -99,20 +104,48 @@ export const sopClassHandlers = [
 ];
 
 /**
- * Indicate this is a valid mode if:
- *   - it contains at least one of the modeModalities
- *   - it contains all of the array value in modeModalities
- * Otherwise, if modeModalities is not defined:
- *   - it contains at least one modality other than the nonModeMOdalities.
+ * Data-driven mode validity check, using these mode instance properties:
+ *   - `excludedStudies`: a list of `{ attribute: value }` objects; a study
+ *     matching every attribute of any entry is invalid.
+ *   - `excludedModalities`: the study is invalid when it contains ANY of these.
+ *   - `modeModalities`: the study is valid when it contains at least one entry;
+ *     an array entry requires all of its modalities to be present (e.g.
+ *     `[['PT', 'CT']]` requires both PT and CT).
+ *   - otherwise `nonModeModalities`: the study is valid when it contains at
+ *     least one modality NOT in this list.
  */
-export function isValidMode({ modalities }) {
+export function isValidMode({ modalities, study }) {
   const modalities_list = modalities.split('\\');
 
+  if (study && this.excludedStudies?.length) {
+    const excluded = this.excludedStudies.find(exclusion =>
+      Object.entries(exclusion).every(([key, value]) => study[key] === value)
+    );
+    if (excluded) {
+      return {
+        valid: false,
+        description: `The mode excludes studies matching: ${JSON.stringify(excluded)}`,
+      };
+    }
+  }
+
+  if (this.excludedModalities?.length) {
+    const excluded = this.excludedModalities.find(modality => modalities_list.includes(modality));
+    if (excluded) {
+      return {
+        valid: false,
+        description: `The mode does not support studies containing the ${excluded} modality`,
+      };
+    }
+  }
+
   if (this.modeModalities?.length) {
     for (const modeModality of this.modeModalities) {
-      if (Array.isArray(modeModality) && modeModality.every(m => modalities.indexOf(m) !== -1)) {
-        return { valid: true, description: `Matches ${modeModality.join(', ')}` };
-      } else if (modalities.indexOf(modeModality)) {
+      if (Array.isArray(modeModality)) {
+        if (modeModality.every(m => modalities_list.includes(m))) {
+          return { valid: true, description: `Matches ${modeModality.join(', ')}` };
+        }
+      } else if (modalities_list.includes(modeModality)) {
         return { valid: true, description: `Matches ${modeModality}` };
       }
     }
@@ -122,84 +155,81 @@ export function isValidMode({ modalities }) {
     };
   }
 
+  const nonModeModalities = this.nonModeModalities ?? [];
   return {
-    valid: !!modalities_list.find(modality => this.nonModeModalities.indexOf(modality) === -1),
-    description: `The mode does not support studies that ONLY include the following modalities: ${this.nonModeModalities.join(', ')}`,
+    valid: !!modalities_list.find(modality => !nonModeModalities.includes(modality)),
+    description: `The mode does not support studies that ONLY include the following modalities: ${nonModeModalities.join(', ')}`,
   };
 }
 
-export function onModeEnter({
-  servicesManager,
-  extensionManager,
-  commandsManager,
-  panelService,
-  segmentationService,
-}: withAppTypes) {
+/**
+ * The panel activation triggers the basic family of modes historically shipped
+ * (commented out): activate the segmentation/measurement panel when a
+ * segmentation/measurement is added.  Not enabled by default; a mode or
+ * customization can set them via the `activatePanelTriggers` instance
+ * property.
+ */
+export const defaultActivatePanelTriggers = [
+  {
+    panelId: cornerstone.segmentation,
+    sourceServiceName: 'segmentationService',
+    sourceEvents: ['SEGMENTATION_ADDED'],
+  },
+  {
+    panelId: cornerstone.measurements,
+    sourceServiceName: 'measurementService',
+    sourceEvents: ['MEASUREMENT_ADDED', 'RAW_MEASUREMENT_ADDED'],
+  },
+];
+
+export function onModeEnter({ servicesManager, extensionManager, commandsManager }: withAppTypes) {
   const { measurementService, toolbarService, toolGroupService, customizationService } =
     servicesManager.services;
 
   measurementService.clearMeasurements();
 
-  // Init Default and SR ToolGroups
-  initToolGroups(extensionManager, toolGroupService, commandsManager);
+  // Subscriptions the mode creates are tracked as unsubscribe functions on the
+  // instance; the shared onModeExit cleans them up.  Extending modes push
+  // their own unsubscribe functions here after calling this function.
+  this._unsubscriptions = [];
 
-  // 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;
+  // 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, servicesManager });
 
-  const toolbarButtons = resolveToolbarCustomization(this.toolbarButtons) as any;
-  const toolbarSections = (resolveToolbarCustomization(this.toolbarSections) ?? {}) as Record<
-    string,
-    string[]
-  >;
+  // Toolbar buttons and layout come from the mode's composition, which the
+  // mode route seeded onto the Mode customization scope on enter (the plain
+  // `toolbarButtons` / `toolbarSections` keys) and the app config / URL `mode`
+  // phase then layered on top. Reading them here — after that layering — lets
+  // `?customization=` modules extend the toolbar without the mode restating it.
+  registerModeToolbar(
+    { toolbarService },
+    {
+      toolbarButtons: customizationService.getCustomization('toolbarButtons'),
+      toolbarSections: customizationService.getCustomization('toolbarSections'),
+    }
+  );
 
-  toolbarService.register(toolbarButtons);
+  // Extra tools (e.g. segmentation editing tools added by a customization) are
+  // layered onto the tool groups created above, from the resolved
+  // `toolGroupAdditions` composition (seeded on enter, refined by the `mode`
+  // phase).
+  applyToolGroupAdditions(
+    { toolGroupService },
+    customizationService.getCustomization('toolGroupAdditions')
+  );
 
-  for (const [key, section] of Object.entries(toolbarSections)) {
-    toolbarService.updateSection(key, section);
-  }
+  // Note: the mode's `modeCustomizations` are NOT applied here — the mode
+  // route applies them right after the mode scope is reset, before the app
+  // config / URL `mode` phase blocks, so the final value of every key is
+  // decided purely by customization scope precedence and application order.
 
-  if (!this.enableSegmentationEdit) {
-    customizationService.setCustomizations({
-      'panelSegmentation.disableEditing': {
-        $set: true,
-      },
-    });
-  }
-
-  // // ActivatePanel event trigger for when a segmentation or measurement is added.
-  // // Do not force activation so as to respect the state the user may have left the UI in.
-  if (this.activatePanelTrigger) {
-    this._activatePanelTriggersSubscriptions = [
-      ...panelService.addActivatePanelTriggers(
-        cornerstone.segmentation,
-        [
-          {
-            sourcePubSubService: segmentationService,
-            sourceEvents: [segmentationService.EVENTS.SEGMENTATION_ADDED],
-          },
-        ],
-        true
-      ),
-      ...panelService.addActivatePanelTriggers(
-        cornerstone.measurements,
-        [
-          {
-            sourcePubSubService: measurementService,
-            sourceEvents: [
-              measurementService.EVENTS.MEASUREMENT_ADDED,
-              measurementService.EVENTS.RAW_MEASUREMENT_ADDED,
-            ],
-          },
-        ],
-        true
-      ),
-      true,
-    ];
-  }
+  // ActivatePanel event triggers (e.g. activating the segmentation panel when
+  // a segmentation is added).  Off by default; supplied as data so extending
+  // modes and customizations can point at their own panels.
+  this._unsubscriptions.push(
+    ...addActivatePanelTriggers({ servicesManager }, this.activatePanelTriggers)
+  );
 }
 
 export function onModeExit({ servicesManager }: withAppTypes) {
@@ -212,8 +242,8 @@ export function onModeExit({ servicesManager }: withAppTypes) {
     uiModalService,
   } = servicesManager.services;
 
-  this._activatePanelTriggersSubscriptions.forEach(sub => sub.unsubscribe());
-  this._activatePanelTriggersSubscriptions.length = 0;
+  this._unsubscriptions?.forEach(unsubscribe => unsubscribe());
+  this._unsubscriptions = [];
 
   uiDialogService.hideAll();
   uiModalService.hide();
@@ -226,6 +256,11 @@ export function onModeExit({ servicesManager }: withAppTypes) {
 export const basicLayout = {
   id: ohif.layout,
   props: {
+    // Literal panel lists. The mode route seeds these into the standard
+    // `leftPanels` / `rightPanels` customizations at the bottom of
+    // the mode scope, so `mode` phase blocks and global customizations can
+    // modify them (e.g. swap in the segmentation panels with editing tools)
+    // before the sidebars resolve.
     leftPanels: [ohif.thumbnailList],
     leftPanelResizable: true,
     rightPanels: [cornerstone.segmentation, cornerstone.measurements],
@@ -284,11 +319,33 @@ export const modeInstance = {
   // instance by default.
   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/tool-group composition: which capability packs this mode uses,
+  // named with `{ $reference }` markers the customization service expands at
+  // read time. The mode route seeds these onto the Mode customization scope on
+  // enter (as the plain `toolbarButtons` / `toolbarSections` /
+  // `toolGroupAdditions` keys), so `?customization=` modules extend them
+  // through the `mode` phase (e.g.
+  // `mode.basic.toolbarButtons: { $push: [{ $reference: '...' }] }`).
+  toolbarSections: [{ $reference: 'cornerstone.toolbarSections' }],
+  toolGroupAdditions: {
+    default: [],
+    mpr: [],
+    SRToolGroup: [],
+    volume3d: [],
+  },
+  // Tool group setup used by onModeEnter; extending modes can replace it.
+  initToolGroups,
+  // The mode's own customizations, referenced by name: the block is registered
+  // at default scope when the mode loads (see `customizations` below), and the
+  // mode route applies it as the bottom layer of the mode scope on enter.
+  // Later layers — the app config / URL `mode` phase blocks and any global
+  // customization (e.g. `segmentationEditing`) — override it purely by
+  // application order and scope precedence.
+  modeCustomizations: 'basicModeCustomizations',
+  // ActivatePanel event triggers, applied on mode enter.  Empty by default so
+  // the state the user left the UI in is respected; extending modes or
+  // customizations can push `defaultActivatePanelTriggers` entries.
+  activatePanelTriggers: [],
 
   /**
    * Lifecycle hooks
@@ -310,8 +367,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',
-  enableSegmentationEdit: false,
+  toolbarButtons: [{ $reference: 'cornerstone.toolbarButtons' }],
   nonModeModalities: NON_IMAGE_MODALITIES,
 };
 
@@ -327,12 +383,35 @@ export function modeFactory({ modeConfiguration }) {
   return modeInstance;
 }
 
+/**
+ * Customizations the mode registers with the customization service (Default
+ * scope) when it loads — before the bootstrap phase applies, so bootstrap and
+ * `?customization=` modules can modify them before anything reads them.
+ * Values are plain data (registered customization values never carry `$`
+ * commands — commands are how later customizations modify them).
+ */
+export const customizations = {
+  // The mode's own mode-scope block, applied by the mode route as the bottom
+  // layer of the mode scope on mode enter (see `modeCustomizations` above).
+  basicModeCustomizations: {
+    // Segmentation panel editing is off in the basic modes; e.g. the
+    // `segmentationEditing` customization overrides this at global scope.
+    'panelSegmentation.disableEditing': true,
+  },
+};
+
 export const mode = {
   id,
   modeFactory,
   modeInstance: { ...modeInstance, hide: true },
   extensionDependencies,
+  customizations,
 };
 
 export default mode;
 export { initToolGroups };
+export {
+  addActivatePanelTriggers,
+  applyToolGroupAdditions,
+  registerModeToolbar,
+} from './modeCustomization';

modes/basic/src/initToolGroups.ts

@@ -83,10 +83,7 @@ function initDefaultToolGroup(extensionManager, toolGroupService, commandsManage
       { toolName: toolNames.LivewireContour },
       { toolName: toolNames.WindowLevelRegion },
     ],
-    enabled: [
-      { toolName: toolNames.ImageOverlayViewer },
-      { toolName: toolNames.ReferenceLines },
-    ],
+    enabled: [{ toolName: toolNames.ImageOverlayViewer }, { toolName: toolNames.ReferenceLines }],
     disabled: [
       {
         toolName: toolNames.AdvancedMagnify,
@@ -306,7 +303,12 @@ function initVolume3DToolGroup(extensionManager, toolGroupService) {
   toolGroupService.createToolGroupAndAddTools('volume3d', tools);
 }
 
-function initToolGroups(extensionManager, toolGroupService, commandsManager) {
+/**
+ * Mode tool group setup.  All modes share this options-object signature so a
+ * mode (or a `modeConfiguration`) can substitute any other mode's
+ * implementation via the `initToolGroups` instance property.
+ */
+function initToolGroups({ extensionManager, toolGroupService, commandsManager }) {
   initDefaultToolGroup(extensionManager, toolGroupService, commandsManager, 'default');
   initSRToolGroup(extensionManager, toolGroupService);
   initMPRToolGroup(extensionManager, toolGroupService, commandsManager);

modes/basic/src/modeCustomization.ts

@@ -0,0 +1,101 @@
+/**
+ * Helpers for applying a mode's toolbar / tool-group composition.
+ *
+ * The composition values (`toolbarButtons`, `toolbarSections`,
+ * `toolGroupAdditions`) are ordinary customizations resolved through the
+ * customization service. A mode lists the capability packs it uses with
+ * `{ $reference: '<name>' }` markers; the service expands those at read time
+ * (packs that are arrays are flattened into the surrounding list), and a site
+ * `?customization=` module extends or replaces them with immutability-helper
+ * commands (`$push` another `{ $reference }`, `$set` a hard-coded value, ...).
+ * By the time these helpers run, the values passed in are already fully
+ * resolved — so they only need to shape/register them.
+ */
+
+/** Normalizes a value to an array (wrapping a single object, dropping nullish). */
+function toArray(value: unknown): any[] {
+  if (value === undefined || value === null) {
+    return [];
+  }
+  return Array.isArray(value) ? value : [value];
+}
+
+/**
+ * Registers a mode's toolbar from its resolved composition.
+ *
+ * `toolbarButtons` is a flat list of button definitions registered with the
+ * toolbar service.  `toolbarSections` is one or more
+ * `{ sectionKey: buttonIds[] }` objects shallow-merged in order (later values
+ * win per section) and applied with `updateSection`.
+ */
+export function registerModeToolbar({ toolbarService }, { toolbarButtons, toolbarSections }): void {
+  toolbarService.register(toArray(toolbarButtons));
+
+  const sections: Record<string, string[]> = Object.assign({}, ...toArray(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 a resolved object mapping a tool group id to a list
+ * of tool blocks (each a `{ active/passive/enabled/disabled }` object). 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 }, toolGroupAdditions): void {
+  if (!toolGroupAdditions) {
+    return;
+  }
+  for (const additions of toArray(toolGroupAdditions)) {
+    for (const [toolGroupId, toolBlocks] of Object.entries(additions)) {
+      if (!toolGroupService.getToolGroup(toolGroupId)) {
+        continue;
+      }
+      for (const tools of toArray(toolBlocks)) {
+        toolGroupService.addToolsToToolGroup(toolGroupId, tools);
+      }
+    }
+  }
+}
+
+/**
+ * Wires up a mode's ActivatePanel event triggers from data.
+ *
+ * `activatePanelTriggers` is a list of
+ * `{ panelId, sourceServiceName, sourceEvents, forceActive? }` entries;
+ * `sourceEvents` names are looked up in the source service's `EVENTS` map
+ * (falling back to the raw value) so the whole entry is JSON-serializable and
+ * can be supplied by a `?customization=` module or an extending mode.
+ *
+ * Returns the unsubscribe functions for the subscriptions created.
+ */
+export function addActivatePanelTriggers(
+  { servicesManager },
+  activatePanelTriggers
+): (() => void)[] {
+  const { panelService } = servicesManager.services;
+  const unsubscriptions: (() => void)[] = [];
+  for (const trigger of activatePanelTriggers ?? []) {
+    const { panelId, sourceServiceName, sourceEvents, forceActive = true } = trigger;
+    const sourcePubSubService = servicesManager.services[sourceServiceName];
+    if (!sourcePubSubService) {
+      console.warn(`addActivatePanelTriggers: no service registered for "${sourceServiceName}"`);
+      continue;
+    }
+    const subscriptions = panelService.addActivatePanelTriggers(
+      panelId,
+      [
+        {
+          sourcePubSubService,
+          sourceEvents: sourceEvents.map(name => sourcePubSubService.EVENTS?.[name] ?? name),
+        },
+      ],
+      forceActive
+    );
+    unsubscriptions.push(...subscriptions.map(subscription => () => subscription.unsubscribe()));
+  }
+  return unsubscriptions;
+}

modes/longitudinal/src/index.ts

@@ -1,7 +1,9 @@
 import i18n from 'i18next';
 import { id } from './id';
-import { initToolGroups, cornerstone,
+import {
+  initToolGroups,
   ohif,
+  cornerstone,
   dicomsr,
   dicomvideo,
   basicLayout,
@@ -9,7 +11,7 @@ import { initToolGroups, cornerstone,
   extensionDependencies as basicDependencies,
   mode as basicMode,
   modeInstance as basicModeInstance,
- } from '@ohif/mode-basic';
+} from '@ohif/mode-basic';
 
 export const tracked = {
   measurements: '@ohif/extension-measurement-tracking.panelModule.trackedMeasurements',
@@ -28,6 +30,9 @@ export const longitudinalInstance = {
   id: ohif.layout,
   props: {
     ...basicLayout.props,
+    // Literal panel lists; the mode route seeds them into the standard
+    // `leftPanels` / `rightPanels` customizations so `mode` phase
+    // blocks and global customizations can modify them.
     leftPanels: [tracked.thumbnailList],
     rightPanels: [cornerstone.segmentation, tracked.measurements],
     viewports: [
@@ -37,33 +42,29 @@ export const longitudinalInstance = {
         displaySetsToDisplay: basicLayout.props.viewports[0].displaySetsToDisplay,
       },
       ...basicLayout.props.viewports,
-      ],
-    }
-  };
+    ],
+  },
+};
 
-
-export const longitudinalRoute =
-    {
-      ...basicRoute,
-      path: 'longitudinal',
-        /*init: ({ servicesManager, extensionManager }) => {
+export const longitudinalRoute = {
+  ...basicRoute,
+  path: 'longitudinal',
+  /*init: ({ servicesManager, extensionManager }) => {
           //defaultViewerRouteInit
         },*/
-      layoutInstance: longitudinalInstance,
-    };
+  layoutInstance: longitudinalInstance,
+};
 
 export const modeInstance = {
-    ...basicModeInstance,
-    // TODO: We're using this as a route segment
-    // We should not be.
-    id,
-    routeName: 'viewer',
-    displayName: i18n.t('Modes:Basic Viewer'),
-    routes: [
-      longitudinalRoute
-    ],
-    extensions: extensionDependencies,
-  };
+  ...basicModeInstance,
+  // TODO: We're using this as a route segment
+  // We should not be.
+  id,
+  routeName: 'viewer',
+  displayName: i18n.t('Modes:Basic Viewer'),
+  routes: [longitudinalRoute],
+  extensions: extensionDependencies,
+};
 
 const mode = {
   ...basicMode,

modes/segmentation/src/index.tsx

@@ -1,249 +1,144 @@
 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,
+  isValidMode,
+  onModeEnter as basicOnModeEnter,
+  onModeExit,
+  layoutTemplate,
+  modeFactory,
+} from '@ohif/mode-basic';
 
-function modeFactory({ modeConfiguration }) {
-  const _unsubscriptions = [];
-  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;
+/**
+ * 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);
 
-      measurementService.clearMeasurements();
+  const { segmentationService, viewportGridService, panelService } = ctx.servicesManager.services;
 
-      // Init Default and SR ToolGroups
-      initToolGroups(extensionManager, toolGroupService, commandsManager);
+  const { unsubscribeAutoTabSwitchEvents } = setUpAutoTabSwitchHandler({
+    segmentationService,
+    viewportGridService,
+    panelService,
+  });
 
-      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],
-  };
+  this._unsubscriptions.push(...unsubscribeAutoTabSwitchEvents);
 }
 
+export const segmentationLayout = {
+  id: ohif.layout,
+  props: {
+    // Literal panel lists; the mode route seeds them into the standard
+    // `leftPanels` / `rightPanels` customizations so `mode` phase
+    // blocks and global customizations can modify them.
+    leftPanels: [ohif.thumbnailList],
+    leftPanelResizable: true,
+    rightPanels: [cornerstone.labelMapSegmentationPanel, cornerstone.contourSegmentationPanel],
+    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',
+  // Toolbar/tool-group composition: which capability packs this mode uses.
+  // The mode route seeds these onto the Mode customization scope on enter, so
+  // `?customization=` modules extend them through the `mode` phase (e.g. add
+  // the annotation tools/buttons). Pack names are resolved when the toolbar is
+  // registered.
+  toolbarButtons: [
+    { $reference: 'cornerstone.toolbarButtons' },
+    { $reference: 'cornerstone.segmentationToolbarButtons' },
+  ],
+  toolbarSections: [
+    { $reference: 'cornerstone.segmentationModeToolbarSections' },
+    { $reference: 'cornerstone.segmentationToolbarSections' },
+  ],
+  toolGroupAdditions: {
+    default: [],
+    mpr: [],
+    volume3d: [],
+  },
+  // Tool group setup used by onModeEnter; extending modes can replace it.
+  initToolGroups,
+  // The mode's own customizations, applied by the mode route as the bottom
+  // layer of the mode scope.  Unlike basic, the registered block is empty (no
+  // `panelSegmentation.disableEditing`): the segmentation panel is editable.
+  modeCustomizations: 'segmentationModeCustomizations',
+  activatePanelTriggers: [],
+
+  /**
+   * Lifecycle hooks
+   */
+  onModeEnter,
+  onModeExit,
+  validationTags: {
+    study: [],
+    series: [],
+  },
+
+  // Data-driven validity: valid unless the study ONLY contains modalities that
+  // segmentation cannot be performed on.
+  isValidMode,
+  nonModeModalities: ['SM', 'ECG', 'OT', 'DOC'],
+  routes: [segmentationRoute],
+  extensions: extensionDependencies,
+  // Prefer the grid layout hanging protocol when applicable.
+  hangingProtocol: ['@ohif/mnGrid'],
+  sopClassHandlers: [ohif.sopClassHandler, segmentation.sopClassHandler, dicomRT.sopClassHandler],
+};
+
+/**
+ * Customizations the mode registers (Default scope) when it loads.  The mode's
+ * own block is empty — the segmentation panel is editable in this mode — but
+ * it is registered so bootstrap / `?customization=` modules can add
+ * mode-scoped values to it.
+ */
+export const customizations = {
+  segmentationModeCustomizations: {},
+};
+
+/**
+ * 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,
+  customizations,
 };
 
 export default mode;
+export { initToolGroups };

modes/segmentation/src/initToolGroups.ts

@@ -258,7 +258,7 @@ function initVolume3DToolGroup(extensionManager, toolGroupService) {
   toolGroupService.createToolGroupAndAddTools('volume3d', tools);
 }
 
-function initToolGroups(extensionManager, toolGroupService, commandsManager) {
+function initToolGroups({ extensionManager, toolGroupService, commandsManager }) {
   initDefaultToolGroup(extensionManager, toolGroupService, commandsManager, 'default');
   initMPRToolGroup(extensionManager, toolGroupService, commandsManager);
   initVolume3DToolGroup(extensionManager, toolGroupService);

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,39 @@
 import { classes } from '@ohif/core';
-import toolbarButtons from './toolbarButtons';
+import {
+  isValidMode,
+  layoutTemplate,
+  modeFactory,
+  onModeEnter as basicOnModeEnter,
+  onModeExit,
+} from '@ohif/mode-basic';
+import i18n from 'i18next';
+
 import { id } from './id.js';
-import initToolGroups from './initToolGroups.js';
+import initToolGroups, { toolGroupIds } 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 +41,187 @@ 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,
-        toolGroupService,
-        customizationService,
-        hangingProtocolService,
-        displaySetService,
-      } = servicesManager.services;
+/**
+ * Extends the basic mode enter (tool groups, toolbar, tool group additions)
+ * with the TMTV specifics: the fusion viewport crosshairs/active-volume
+ * configuration and the PT VOI hanging protocol attribute.
+ */
+export function onModeEnter(ctx: withAppTypes) {
+  basicOnModeEnter.call(this, ctx);
 
-      const utilityModule = extensionManager.getModuleEntry(
-        '@ohif/extension-cornerstone.utilityModule.tools'
-      );
+  const { servicesManager, extensionManager, commandsManager } = ctx;
+  const { toolGroupService, customizationService, hangingProtocolService, displaySetService } =
+    servicesManager.services;
 
-      const { toolNames, Enums } = utilityModule.exports;
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
 
-      // Init Default and SR ToolGroups
-      initToolGroups(toolNames, Enums, toolGroupService, commandsManager);
+  const { toolNames } = utilityModule.exports;
 
-      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();
+  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
-          );
+    setCrosshairsConfiguration(
+      displaySetMatchDetails,
+      toolNames,
+      toolGroupService,
+      displaySetService
+    );
 
-          setFusionActiveVolume(
-            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',
-      ]);
+  this._unsubscriptions.push(unsubscribe);
 
-      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 {
-        toolGroupService,
-        syncGroupService,
-        segmentationService,
-        cornerstoneViewportService,
-        uiDialogService,
-        uiModalService,
-      } = servicesManager.services;
-
-      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'];
-
-      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',
-      };
-    },
-    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],
-                },
-              ],
-            },
-          };
-        },
+  // Function-valued customization; kept out of the registered
+  // `tmtvModeCustomizations` block because it needs the mode's
+  // commandsManager.  Written at mode scope, so a global-scope customization
+  // still overrides it by scope precedence.
+  customizationService.setCustomizations({
+    '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 const tmtvLayout = {
+  id: ohif.layout,
+  props: {
+    // Literal panel lists; the mode route seeds them into the standard
+    // `leftPanels` / `rightPanels` customizations so `mode` phase
+    // blocks and global customizations can modify them.
+    leftPanels: [ohif.thumbnailList],
+    leftPanelResizable: true,
+    leftPanelClosed: true,
+    rightPanels: [tmtv.tmtv, tmtv.petSUV],
+    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'),
+  // Toolbar/tool-group composition: which capability packs this mode uses.
+  // The mode route seeds these onto the Mode customization scope on enter, so
+  // `?customization=` modules extend them through the `mode` phase. The tmtv
+  // extension supplies the TMTV-specific button/section packs.
+  toolbarButtons: [{ $reference: 'tmtv.toolbarButtons' }],
+  toolbarSections: [{ $reference: 'tmtv.toolbarSections' }],
+  toolGroupAdditions: {
+    [toolGroupIds.CT]: [],
+    [toolGroupIds.PT]: [],
+    [toolGroupIds.Fusion]: [],
+    [toolGroupIds.MIP]: [],
+    [toolGroupIds.default]: [],
+  },
+  // Tool group setup used by onModeEnter; extending modes can replace it.
+  initToolGroups,
+  // The mode's own customizations, referenced by name: the block is registered
+  // at default scope when the mode loads (see `customizations` below), and the
+  // mode route applies it as the bottom layer of the mode scope on enter.
+  modeCustomizations: 'tmtvModeCustomizations',
+  activatePanelTriggers: [],
+
+  /**
+   * Lifecycle hooks
+   */
+  onModeEnter,
+  onModeExit,
+  validationTags: {
+    study: [],
+    series: [],
+  },
+  // Data-driven validity: requires both PT and CT, rejects SM, and excludes
+  // the demo studies that belong to the preclinical 4D mode.  Until we have a
+  // better way to identify 4D studies we use the mrn/StudyInstanceUID.
+  isValidMode,
+  modeModalities: [['PT', 'CT']],
+  excludedModalities: ['SM'],
+  excludedStudies: [
+    { mrn: 'M1' },
+    { studyInstanceUid: '1.3.6.1.4.1.12842.1.1.14.3.20220915.105557.468.2963630849' },
+  ],
+  routes: [tmtvRoute],
+  extensions: extensionDependencies,
+  hangingProtocol: tmtv.hangingProtocol,
+  sopClassHandlers: [ohif.sopClassHandler],
+};
+
+/**
+ * Customizations the mode registers (Default scope) when it loads — before
+ * the bootstrap phase applies, so bootstrap / `?customization=` modules can
+ * modify them before anything reads them.  Values are plain data.
+ */
+export const customizations = {
+  tmtvModeCustomizations: {
+    'panelSegmentation.tableMode': 'expanded',
+  },
+};
+
+/**
+ * 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,
+  customizations,
 };
 
 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 = {
@@ -189,7 +185,16 @@ function _initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
   toolGroupService.createToolGroupAndAddTools(toolGroupIds.MIP, mipTools);
 }
 
-function initToolGroups(toolNames, Enums, toolGroupService, commandsManager) {
+/**
+ * Mode tool group setup, sharing the options-object signature used by all
+ * modes so implementations are interchangeable via the `initToolGroups` mode
+ * instance property.
+ */
+function initToolGroups({ extensionManager, toolGroupService, commandsManager }) {
+  const utilityModule = extensionManager.getModuleEntry(
+    '@ohif/extension-cornerstone.utilityModule.tools'
+  );
+  const { toolNames, Enums } = utilityModule.exports;
   _initToolGroups(toolNames, Enums, toolGroupService, commandsManager);
 }
 

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;