@ohif/app 3.8.0-beta.8 → 3.8.0-beta.81

package/dist/{221.bundle.aef554202c58483cb34e.js → 633.bundle.acab89baaa06a299d679.js}

@@ -1,9 +1,9 @@
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[221,579],{
+"use strict";
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[633,481],{
 
-/***/ 9943:
+/***/ 27400:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-"use strict";
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
 
@@ -13,23 +13,25 @@ __webpack_require__.d(__webpack_exports__, {
 });
 
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/package.json
-const package_namespaceObject = JSON.parse('{"u2":"@ohif/extension-cornerstone-dicom-seg"}');
+const package_namespaceObject = /*#__PURE__*/JSON.parse('{"UU":"@ohif/extension-cornerstone-dicom-seg"}');
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/id.js
 
-const id = package_namespaceObject.u2;
+const id = package_namespaceObject.UU;
 const SOPClassHandlerName = 'dicom-seg';
 const SOPClassHandlerId = `${id}.sopClassHandlerModule.${SOPClassHandlerName}`;
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
-var react = __webpack_require__(43001);
-// EXTERNAL MODULE: ../../core/src/index.ts + 65 modules
-var src = __webpack_require__(71771);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 331 modules
-var esm = __webpack_require__(3743);
+var react = __webpack_require__(41766);
+// EXTERNAL MODULE: ../../core/src/index.ts + 70 modules
+var src = __webpack_require__(55411);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 327 modules
+var esm = __webpack_require__(44656);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 18 modules
+var dist_esm = __webpack_require__(24542);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/adapters/dist/adapters.es.js
-var adapters_es = __webpack_require__(91202);
+var adapters_es = __webpack_require__(83342);
 // EXTERNAL MODULE: ../../../node_modules/dcmjs/build/dcmjs.es.js
-var dcmjs_es = __webpack_require__(67540);
+var dcmjs_es = __webpack_require__(31426);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/utils/dicomlabToRGB.ts
 
 
@@ -39,7 +41,7 @@ var dcmjs_es = __webpack_require__(67540);
  * @returns The RGB color as an array of three integers between 0 and 255.
  */
 function dicomlabToRGB(cielab) {
-  const rgb = dcmjs_es["default"].data.Colors.dicomlab2RGB(cielab).map(x => Math.round(x * 255));
+  const rgb = dcmjs_es/* default.data */.Ay.data.Colors.dicomlab2RGB(cielab).map(x => Math.round(x * 255));
   return rgb;
 }
 
@@ -49,6 +51,7 @@ function dicomlabToRGB(cielab) {
 
 
 
+
 const sopClassUids = ['1.2.840.10008.5.1.4.1.1.66.4'];
 let loadPromises = {};
 function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager) {
@@ -119,12 +122,9 @@ function _getDisplaySetsFromSeries(instances, servicesManager, extensionManager)
     displaySet.referencedVolumeId = referencedVolumeId;
     return referencedDisplaySet;
   };
-  displaySet.load = async _ref => {
-    let {
-      headers
-    } = _ref;
-    return await _load(displaySet, servicesManager, extensionManager, headers);
-  };
+  displaySet.load = async ({
+    headers
+  }) => await _load(displaySet, servicesManager, extensionManager, headers);
   return [displaySet];
 }
 function _load(segDisplaySet, servicesManager, extensionManager, headers) {
@@ -161,16 +161,16 @@ function _load(segDisplaySet, servicesManager, extensionManager, headers) {
   });
   return loadPromises[SOPInstanceUID];
 }
-async function _loadSegments(_ref2) {
-  let {
-    extensionManager,
-    servicesManager,
-    segDisplaySet,
-    headers
-  } = _ref2;
+async function _loadSegments({
+  extensionManager,
+  servicesManager,
+  segDisplaySet,
+  headers
+}) {
   const utilityModule = extensionManager.getModuleEntry('@ohif/extension-cornerstone.utilityModule.common');
   const {
-    segmentationService
+    segmentationService,
+    uiNotificationService
   } = servicesManager.services;
   const {
     dicomLoaderService
@@ -187,7 +187,7 @@ async function _loadSegments(_ref2) {
   // Todo: what should be defaults here
   const tolerance = 0.001;
   const skipOverlapping = true;
-  esm.eventTarget.addEventListener(adapters_es/* Enums */.Y.Events.SEGMENTATION_LOAD_PROGRESS, evt => {
+  esm.eventTarget.addEventListener(adapters_es/* Enums */.fX.Events.SEGMENTATION_LOAD_PROGRESS, evt => {
     const {
       percentComplete
     } = evt.detail;
@@ -195,28 +195,50 @@ async function _loadSegments(_ref2) {
       percentComplete
     });
   });
-  const results = await adapters_es.adaptersSEG.Cornerstone3D.Segmentation.generateToolState(imageIds, arrayBuffer, esm.metaData, {
+  const results = await adapters_es/* adaptersSEG */.ql.Cornerstone3D.Segmentation.generateToolState(imageIds, arrayBuffer, esm.metaData, {
     skipOverlapping,
     tolerance,
     eventTarget: esm.eventTarget,
     triggerEvent: esm.triggerEvent
   });
+  let usedRecommendedDisplayCIELabValue = true;
   results.segMetadata.data.forEach((data, i) => {
     if (i > 0) {
-      data.rgba = dicomlabToRGB(data.RecommendedDisplayCIELabValue);
+      data.rgba = data.RecommendedDisplayCIELabValue;
+      if (data.rgba) {
+        data.rgba = dicomlabToRGB(data.rgba);
+      } else {
+        usedRecommendedDisplayCIELabValue = false;
+        data.rgba = dist_esm.CONSTANTS.COLOR_LUT[i % dist_esm.CONSTANTS.COLOR_LUT.length];
+      }
     }
   });
+  if (results.overlappingSegments) {
+    uiNotificationService.show({
+      title: 'Overlapping Segments',
+      message: 'Unsupported overlapping segments detected, segmentation rendering results may be incorrect.',
+      type: 'warning'
+    });
+  }
+  if (!usedRecommendedDisplayCIELabValue) {
+    // Display a notification about the non-utilization of RecommendedDisplayCIELabValue
+    uiNotificationService.show({
+      title: 'DICOM SEG import',
+      message: 'RecommendedDisplayCIELabValue not found for one or more segments. The default color was used instead.',
+      type: 'warning',
+      duration: 5000
+    });
+  }
   Object.assign(segDisplaySet, results);
 }
 function _segmentationExists(segDisplaySet, segmentationService) {
   // This should be abstracted with the CornerstoneCacheService
   return segmentationService.getSegmentation(segDisplaySet.displaySetInstanceUID);
 }
-function getSopClassHandlerModule(_ref3) {
-  let {
-    servicesManager,
-    extensionManager
-  } = _ref3;
+function getSopClassHandlerModule({
+  servicesManager,
+  extensionManager
+}) {
   const getDisplaySetsFromSeries = instances => {
     return _getDisplaySetsFromSeries(instances, servicesManager, extensionManager);
   };
@@ -292,24 +314,29 @@ function getHangingProtocolModule() {
 /* harmony default export */ const src_getHangingProtocolModule = (getHangingProtocolModule);
 
 // EXTERNAL MODULE: ./state/index.js + 1 modules
-var state = __webpack_require__(62657);
-// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 76 modules
-var default_src = __webpack_require__(56342);
+var state = __webpack_require__(15575);
+// EXTERNAL MODULE: ../../ui/src/index.js + 785 modules
+var ui_src = __webpack_require__(5085);
+// EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 85 modules
+var default_src = __webpack_require__(7206);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
-var prop_types = __webpack_require__(3827);
+var prop_types = __webpack_require__(11374);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../ui/src/index.js + 486 modules
-var ui_src = __webpack_require__(22582);
+;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/types/segmentation.tsx
+let SegmentationPanelMode = /*#__PURE__*/function (SegmentationPanelMode) {
+  SegmentationPanelMode["Expanded"] = "expanded";
+  SegmentationPanelMode["Dropdown"] = "dropdown";
+  return SegmentationPanelMode;
+}({});
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/panels/callInputDialog.tsx
 
 
 function callInputDialog(uiDialogService, label, callback) {
   const dialogId = 'enter-segment-label';
-  const onSubmitHandler = _ref => {
-    let {
-      action,
-      value
-    } = _ref;
+  const onSubmitHandler = ({
+    action,
+    value
+  }) => {
     switch (action.id) {
       case 'save':
         callback(value.label, action.id);
@@ -328,7 +355,7 @@ function callInputDialog(uiDialogService, label, callback) {
       centralize: true,
       isDraggable: false,
       showOverlay: true,
-      content: ui_src/* Dialog */.Vq,
+      content: ui_src/* Dialog */.lG,
       contentProps: {
         title: 'Segment',
         value: {
@@ -341,19 +368,18 @@ function callInputDialog(uiDialogService, label, callback) {
         actions: [{
           id: 'cancel',
           text: 'Cancel',
-          type: ui_src/* ButtonEnums.type */.LZ.dt.secondary
+          type: ui_src/* ButtonEnums.type */.Ny.NW.secondary
         }, {
           id: 'save',
           text: 'Confirm',
-          type: ui_src/* ButtonEnums.type */.LZ.dt.primary
+          type: ui_src/* ButtonEnums.type */.Ny.NW.primary
         }],
         onSubmit: onSubmitHandler,
-        body: _ref2 => {
-          let {
-            value,
-            setValue
-          } = _ref2;
-          return /*#__PURE__*/react.createElement(ui_src/* Input */.II, {
+        body: ({
+          value,
+          setValue
+        }) => {
+          return /*#__PURE__*/react.createElement(ui_src/* Input */.pd, {
             label: "Enter the segment label",
             labelClassName: "text-white text-[14px] leading-[1.2]",
             autoFocus: true,
@@ -385,7 +411,7 @@ function callInputDialog(uiDialogService, label, callback) {
 }
 /* harmony default export */ const panels_callInputDialog = (callInputDialog);
 // EXTERNAL MODULE: ../../../node_modules/react-color/es/index.js + 219 modules
-var es = __webpack_require__(22831);
+var es = __webpack_require__(13726);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/panels/colorPickerDialog.css
 // extracted by mini-css-extract-plugin
 
@@ -396,11 +422,10 @@ var es = __webpack_require__(22831);
 
 function callColorPickerDialog(uiDialogService, rgbaColor, callback) {
   const dialogId = 'pick-color';
-  const onSubmitHandler = _ref => {
-    let {
-      action,
-      value
-    } = _ref;
+  const onSubmitHandler = ({
+    action,
+    value
+  }) => {
     switch (action.id) {
       case 'save':
         callback(value.rgbaColor, action.id);
@@ -419,7 +444,7 @@ function callColorPickerDialog(uiDialogService, rgbaColor, callback) {
       centralize: true,
       isDraggable: false,
       showOverlay: true,
-      content: ui_src/* Dialog */.Vq,
+      content: ui_src/* Dialog */.lG,
       contentProps: {
         title: 'Segment Color',
         value: {
@@ -439,17 +464,16 @@ function callColorPickerDialog(uiDialogService, rgbaColor, callback) {
           type: 'secondary'
         }],
         onSubmit: onSubmitHandler,
-        body: _ref2 => {
-          let {
-            value,
-            setValue
-          } = _ref2;
+        body: ({
+          value,
+          setValue
+        }) => {
           const handleChange = color => {
             setValue({
               rgbaColor: color.rgb
             });
           };
-          return /*#__PURE__*/react.createElement(es/* ChromePicker */.AI, {
+          return /*#__PURE__*/react.createElement(es/* ChromePicker */.xk, {
             color: value.rgbaColor,
             onChange: handleChange,
             presetColors: [],
@@ -462,7 +486,7 @@ function callColorPickerDialog(uiDialogService, rgbaColor, callback) {
 }
 /* harmony default export */ const colorPickerDialog = (callColorPickerDialog);
 // EXTERNAL MODULE: ../../../node_modules/react-i18next/dist/es/index.js + 15 modules
-var dist_es = __webpack_require__(69190);
+var dist_es = __webpack_require__(80619);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx
 
 
@@ -471,22 +495,28 @@ var dist_es = __webpack_require__(69190);
 
 
 
-function PanelSegmentation(_ref) {
-  let {
-    servicesManager,
-    commandsManager,
-    extensionManager,
-    configuration
-  } = _ref;
+
+const components = {
+  [SegmentationPanelMode.Expanded]: ui_src/* SegmentationGroupTableExpanded */.fO,
+  [SegmentationPanelMode.Dropdown]: ui_src/* SegmentationGroupTable */.QQ
+};
+function PanelSegmentation({
+  servicesManager,
+  commandsManager,
+  extensionManager,
+  configuration
+}) {
   const {
     segmentationService,
     viewportGridService,
-    uiDialogService
+    uiDialogService,
+    displaySetService
   } = servicesManager.services;
   const {
     t
-  } = (0,dist_es/* useTranslation */.$G)('PanelSegmentation');
+  } = (0,dist_es/* useTranslation */.Bd)('PanelSegmentation');
   const [selectedSegmentationId, setSelectedSegmentationId] = (0,react.useState)(null);
+  const [addSegmentationClassName, setAddSegmentationClassName] = (0,react.useState)('');
   const [segmentationConfiguration, setSegmentationConfiguration] = (0,react.useState)(segmentationService.getConfiguration());
   const [segmentations, setSegmentations] = (0,react.useState)(() => segmentationService.getSegmentations());
   (0,react.useEffect)(() => {
@@ -511,6 +541,47 @@ function PanelSegmentation(_ref) {
       });
     };
   }, []);
+
+  // temporary measure to not allow add segmentation when the selected viewport
+  // is stack viewport
+  (0,react.useEffect)(() => {
+    const handleActiveViewportChange = viewportId => {
+      const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(viewportId || viewportGridService.getActiveViewportId());
+      if (!displaySetUIDs) {
+        return;
+      }
+      const isReconstructable = displaySetUIDs?.some(displaySetUID => {
+        const displaySet = displaySetService.getDisplaySetByUID(displaySetUID);
+        return displaySet?.isReconstructable;
+      }) || false;
+      if (isReconstructable) {
+        setAddSegmentationClassName('');
+      } else {
+        setAddSegmentationClassName('ohif-disabled');
+      }
+    };
+
+    // Handle initial state
+    handleActiveViewportChange();
+    const changed = viewportGridService.EVENTS.ACTIVE_VIEWPORT_ID_CHANGED;
+    const ready = viewportGridService.EVENTS.VIEWPORTS_READY;
+    const subs = [];
+    [ready, changed].forEach(evt => {
+      const {
+        unsubscribe
+      } = viewportGridService.subscribe(evt, ({
+        viewportId
+      }) => {
+        handleActiveViewportChange(viewportId);
+      });
+      subs.push(unsubscribe);
+    });
+
+    // Clean up
+    return () => {
+      subs.forEach(unsub => unsub());
+    };
+  }, []);
   const getToolGroupIds = segmentationId => {
     const toolGroupIds = segmentationService.getToolGroupIdsWithSegmentation(segmentationId);
     return toolGroupIds;
@@ -567,7 +638,6 @@ function PanelSegmentation(_ref) {
       );
     });
   };
-
   const onSegmentColorClick = (segmentationId, segmentIndex) => {
     const segmentation = segmentationService.getSegmentation(segmentationId);
     const segment = segmentation.segments[segmentIndex];
@@ -591,6 +661,8 @@ function PanelSegmentation(_ref) {
   const onSegmentDelete = (segmentationId, segmentIndex) => {
     segmentationService.removeSegment(segmentationId, segmentIndex);
   };
+
+  // segment hide
   const onToggleSegmentVisibility = (segmentationId, segmentIndex) => {
     const segmentation = segmentationService.getSegmentation(segmentationId);
     const segmentInfo = segmentation.segments[segmentIndex];
@@ -607,6 +679,15 @@ function PanelSegmentation(_ref) {
   };
   const onToggleSegmentationVisibility = segmentationId => {
     segmentationService.toggleSegmentationVisibility(segmentationId);
+    const segmentation = segmentationService.getSegmentation(segmentationId);
+    const isVisible = segmentation.isVisible;
+    const segments = segmentation.segments;
+    const toolGroupIds = getToolGroupIds(segmentationId);
+    toolGroupIds.forEach(toolGroupId => {
+      segments.forEach((segment, segmentIndex) => {
+        segmentationService.setSegmentVisibility(segmentationId, segmentIndex, isVisible, toolGroupId);
+      });
+    });
   };
   const _setSegmentationConfiguration = (0,react.useCallback)((segmentationId, key, value) => {
     segmentationService.setConfiguration({
@@ -647,14 +728,17 @@ function PanelSegmentation(_ref) {
       segmentationId
     });
   };
-  return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("div", {
-    className: "ohif-scrollbar flex min-h-0 flex-auto select-none flex-col justify-between overflow-auto"
-  }, /*#__PURE__*/react.createElement(ui_src/* SegmentationGroupTable */.cX, {
+  const SegmentationGroupTableComponent = components[configuration?.segmentationPanelMode] || ui_src/* SegmentationGroupTable */.QQ;
+  const allowAddSegment = configuration?.addSegment;
+  const onSegmentationAddWrapper = configuration?.onSegmentationAdd && typeof configuration?.onSegmentationAdd === 'function' ? configuration?.onSegmentationAdd : onSegmentationAdd;
+  return /*#__PURE__*/react.createElement(SegmentationGroupTableComponent, {
     title: t('Segmentations'),
     segmentations: segmentations,
     disableEditing: configuration.disableEditing,
     activeSegmentationId: selectedSegmentationId || '',
-    onSegmentationAdd: onSegmentationAdd,
+    onSegmentationAdd: onSegmentationAddWrapper,
+    addSegmentationClassName: addSegmentationClassName,
+    showAddSegment: allowAddSegment,
     onSegmentationClick: onSegmentationClick,
     onSegmentationDelete: onSegmentationDelete,
     onSegmentationDownload: onSegmentationDownload,
@@ -680,7 +764,7 @@ function PanelSegmentation(_ref) {
     setOutlineWidthActive: value => _setSegmentationConfiguration(selectedSegmentationId, 'outlineWidthActive', value),
     setFillAlpha: value => _setSegmentationConfiguration(selectedSegmentationId, 'fillAlpha', value),
     setFillAlphaInactive: value => _setSegmentationConfiguration(selectedSegmentationId, 'fillAlphaInactive', value)
-  })));
+  });
 }
 PanelSegmentation.propTypes = {
   commandsManager: prop_types_default().shape({
@@ -698,405 +782,42 @@ PanelSegmentation.propTypes = {
     }).isRequired
   }).isRequired
 };
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 348 modules
-var dist_esm = __webpack_require__(14957);
-;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/panels/SegmentationToolbox.tsx
-
-
-
-const {
-  segmentation: segmentationUtils
-} = dist_esm.utilities;
-const TOOL_TYPES = {
-  CIRCULAR_BRUSH: 'CircularBrush',
-  SPHERE_BRUSH: 'SphereBrush',
-  CIRCULAR_ERASER: 'CircularEraser',
-  SPHERE_ERASER: 'SphereEraser',
-  CIRCLE_SHAPE: 'CircleScissor',
-  RECTANGLE_SHAPE: 'RectangleScissor',
-  SPHERE_SHAPE: 'SphereScissor',
-  THRESHOLD_CIRCULAR_BRUSH: 'ThresholdCircularBrush',
-  THRESHOLD_SPHERE_BRUSH: 'ThresholdSphereBrush'
-};
-const ACTIONS = {
-  SET_TOOL_CONFIG: 'SET_TOOL_CONFIG',
-  SET_ACTIVE_TOOL: 'SET_ACTIVE_TOOL'
-};
-const initialState = {
-  Brush: {
-    brushSize: 15,
-    mode: 'CircularBrush' // Can be 'CircularBrush' or 'SphereBrush'
-  },
-
-  Eraser: {
-    brushSize: 15,
-    mode: 'CircularEraser' // Can be 'CircularEraser' or 'SphereEraser'
-  },
-
-  Shapes: {
-    brushSize: 15,
-    mode: 'CircleScissor' // E.g., 'CircleScissor', 'RectangleScissor', or 'SphereScissor'
-  },
-
-  ThresholdBrush: {
-    brushSize: 15,
-    thresholdRange: [-500, 500]
-  },
-  activeTool: null
-};
-function toolboxReducer(state, action) {
-  switch (action.type) {
-    case ACTIONS.SET_TOOL_CONFIG:
-      const {
-        tool,
-        config
-      } = action.payload;
-      return {
-        ...state,
-        [tool]: {
-          ...state[tool],
-          ...config
-        }
-      };
-    case ACTIONS.SET_ACTIVE_TOOL:
-      return {
-        ...state,
-        activeTool: action.payload
-      };
-    default:
-      return state;
-  }
-}
-function SegmentationToolbox(_ref) {
-  let {
-    servicesManager,
-    extensionManager
-  } = _ref;
-  const {
-    toolbarService,
-    segmentationService,
-    toolGroupService
-  } = servicesManager.services;
-  const [viewportGrid] = (0,ui_src/* useViewportGrid */.O_)();
-  const {
-    viewports,
-    activeViewportId
-  } = viewportGrid;
-  const [toolsEnabled, setToolsEnabled] = (0,react.useState)(false);
-  const [state, dispatch] = (0,react.useReducer)(toolboxReducer, initialState);
-  const updateActiveTool = (0,react.useCallback)(() => {
-    if (!viewports?.size || activeViewportId === undefined) {
-      return;
-    }
-    const viewport = viewports.get(activeViewportId);
-    if (!viewport) {
-      return;
-    }
-    dispatch({
-      type: ACTIONS.SET_ACTIVE_TOOL,
-      payload: toolGroupService.getActiveToolForViewport(viewport.viewportId)
-    });
-  }, [activeViewportId, viewports, toolGroupService, dispatch]);
-  const setToolActive = (0,react.useCallback)(toolName => {
-    toolbarService.recordInteraction({
-      interactionType: 'tool',
-      commands: [{
-        commandName: 'setToolActive',
-        commandOptions: {
-          toolName
-        }
-      }]
-    });
-    dispatch({
-      type: ACTIONS.SET_ACTIVE_TOOL,
-      payload: toolName
-    });
-  }, [toolbarService, dispatch]);
-
-  /**
-   * sets the tools enabled IF there are segmentations
-   */
-  (0,react.useEffect)(() => {
-    const events = [segmentationService.EVENTS.SEGMENTATION_ADDED, segmentationService.EVENTS.SEGMENTATION_UPDATED, segmentationService.EVENTS.SEGMENTATION_REMOVED];
-    const unsubscriptions = [];
-    events.forEach(event => {
-      const {
-        unsubscribe
-      } = segmentationService.subscribe(event, () => {
-        const segmentations = segmentationService.getSegmentations();
-        const activeSegmentation = segmentations?.find(seg => seg.isActive);
-        setToolsEnabled(activeSegmentation?.segmentCount > 0);
-      });
-      unsubscriptions.push(unsubscribe);
-    });
-    updateActiveTool();
-    return () => {
-      unsubscriptions.forEach(unsubscribe => unsubscribe());
-    };
-  }, [activeViewportId, viewports, segmentationService, updateActiveTool]);
-
-  /**
-   * Update the active tool when the toolbar state changes
-   */
-  (0,react.useEffect)(() => {
-    const {
-      unsubscribe
-    } = toolbarService.subscribe(toolbarService.EVENTS.TOOL_BAR_STATE_MODIFIED, () => {
-      updateActiveTool();
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [toolbarService, updateActiveTool]);
-  (0,react.useEffect)(() => {
-    // if the active tool is not a brush tool then do nothing
-    if (!Object.values(TOOL_TYPES).includes(state.activeTool)) {
-      return;
-    }
-
-    // if the tool is Segmentation and it is enabled then do nothing
-    if (toolsEnabled) {
-      return;
-    }
-
-    // if the tool is Segmentation and it is disabled, then switch
-    // back to the window level tool to not confuse the user when no
-    // segmentation is active or when there is no segment in the segmentation
-    setToolActive('WindowLevel');
-  }, [toolsEnabled, state.activeTool, setToolActive]);
-  const updateBrushSize = (0,react.useCallback)((toolName, brushSize) => {
-    toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
-      segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize, toolName);
-    });
-  }, [toolGroupService]);
-  const onBrushSizeChange = (0,react.useCallback)((valueAsStringOrNumber, toolCategory) => {
-    const value = Number(valueAsStringOrNumber);
-    _getToolNamesFromCategory(toolCategory).forEach(toolName => {
-      updateBrushSize(toolName, value);
-    });
-    dispatch({
-      type: ACTIONS.SET_TOOL_CONFIG,
-      payload: {
-        tool: toolCategory,
-        config: {
-          brushSize: value
-        }
-      }
-    });
-  }, [toolGroupService, dispatch]);
-  const handleRangeChange = (0,react.useCallback)(newRange => {
-    if (newRange[0] === state.ThresholdBrush.thresholdRange[0] && newRange[1] === state.ThresholdBrush.thresholdRange[1]) {
-      return;
-    }
-    const toolNames = _getToolNamesFromCategory('ThresholdBrush');
-    toolNames.forEach(toolName => {
-      toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
-        const toolGroup = toolGroupService.getToolGroup(toolGroupId);
-        toolGroup.setToolConfiguration(toolName, {
-          strategySpecificConfiguration: {
-            THRESHOLD_INSIDE_CIRCLE: {
-              threshold: newRange
-            }
-          }
-        });
-      });
-    });
-    dispatch({
-      type: ACTIONS.SET_TOOL_CONFIG,
-      payload: {
-        tool: 'ThresholdBrush',
-        config: {
-          thresholdRange: newRange
-        }
-      }
-    });
-  }, [toolGroupService, dispatch, state.ThresholdBrush.thresholdRange]);
-  return /*#__PURE__*/react.createElement(ui_src/* AdvancedToolbox */.bY, {
-    title: "Segmentation Tools",
-    items: [{
-      name: 'Brush',
-      icon: 'icon-tool-brush',
-      disabled: !toolsEnabled,
-      active: state.activeTool === TOOL_TYPES.CIRCULAR_BRUSH || state.activeTool === TOOL_TYPES.SPHERE_BRUSH,
-      onClick: () => setToolActive(TOOL_TYPES.CIRCULAR_BRUSH),
-      options: [{
-        name: 'Radius (mm)',
-        id: 'brush-radius',
-        type: 'range',
-        min: 0.5,
-        max: 99.5,
-        value: state.Brush.brushSize,
-        step: 0.5,
-        onChange: value => onBrushSizeChange(value, 'Brush')
-      }, {
-        name: 'Mode',
-        type: 'radio',
-        id: 'brush-mode',
-        value: state.Brush.mode,
-        values: [{
-          value: TOOL_TYPES.CIRCULAR_BRUSH,
-          label: 'Circle'
-        }, {
-          value: TOOL_TYPES.SPHERE_BRUSH,
-          label: 'Sphere'
-        }],
-        onChange: value => setToolActive(value)
-      }]
-    }, {
-      name: 'Eraser',
-      icon: 'icon-tool-eraser',
-      disabled: !toolsEnabled,
-      active: state.activeTool === TOOL_TYPES.CIRCULAR_ERASER || state.activeTool === TOOL_TYPES.SPHERE_ERASER,
-      onClick: () => setToolActive(TOOL_TYPES.CIRCULAR_ERASER),
-      options: [{
-        name: 'Radius (mm)',
-        type: 'range',
-        id: 'eraser-radius',
-        min: 0.5,
-        max: 99.5,
-        value: state.Eraser.brushSize,
-        step: 0.5,
-        onChange: value => onBrushSizeChange(value, 'Eraser')
-      }, {
-        name: 'Mode',
-        type: 'radio',
-        id: 'eraser-mode',
-        value: state.Eraser.mode,
-        values: [{
-          value: TOOL_TYPES.CIRCULAR_ERASER,
-          label: 'Circle'
-        }, {
-          value: TOOL_TYPES.SPHERE_ERASER,
-          label: 'Sphere'
-        }],
-        onChange: value => setToolActive(value)
-      }]
-    }, {
-      name: 'Shapes',
-      icon: 'icon-tool-shape',
-      disabled: !toolsEnabled,
-      active: state.activeTool === TOOL_TYPES.CIRCLE_SHAPE || state.activeTool === TOOL_TYPES.RECTANGLE_SHAPE || state.activeTool === TOOL_TYPES.SPHERE_SHAPE,
-      onClick: () => setToolActive(TOOL_TYPES.CIRCLE_SHAPE),
-      options: [{
-        name: 'Mode',
-        type: 'radio',
-        value: state.Shapes.mode,
-        id: 'shape-mode',
-        values: [{
-          value: TOOL_TYPES.CIRCLE_SHAPE,
-          label: 'Circle'
-        }, {
-          value: TOOL_TYPES.RECTANGLE_SHAPE,
-          label: 'Rectangle'
-        }, {
-          value: TOOL_TYPES.SPHERE_SHAPE,
-          label: 'Sphere'
-        }],
-        onChange: value => setToolActive(value)
-      }]
-    }, {
-      name: 'Threshold Tool',
-      icon: 'icon-tool-threshold',
-      disabled: !toolsEnabled,
-      active: state.activeTool === TOOL_TYPES.THRESHOLD_CIRCULAR_BRUSH || state.activeTool === TOOL_TYPES.THRESHOLD_SPHERE_BRUSH,
-      onClick: () => setToolActive(TOOL_TYPES.THRESHOLD_CIRCULAR_BRUSH),
-      options: [{
-        name: 'Radius (mm)',
-        id: 'threshold-radius',
-        type: 'range',
-        min: 0.5,
-        max: 99.5,
-        value: state.ThresholdBrush.brushSize,
-        step: 0.5,
-        onChange: value => onBrushSizeChange(value, 'ThresholdBrush')
-      }, {
-        name: 'Mode',
-        type: 'radio',
-        id: 'threshold-mode',
-        value: state.activeTool,
-        values: [{
-          value: TOOL_TYPES.THRESHOLD_CIRCULAR_BRUSH,
-          label: 'Circle'
-        }, {
-          value: TOOL_TYPES.THRESHOLD_SPHERE_BRUSH,
-          label: 'Sphere'
-        }],
-        onChange: value => setToolActive(value)
-      }, {
-        type: 'custom',
-        id: 'segmentation-threshold-range',
-        children: () => {
-          return /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement("div", {
-            className: "bg-secondary-light h-[1px]"
-          }), /*#__PURE__*/react.createElement("div", {
-            className: "mt-1 text-[13px] text-white"
-          }, "Threshold"), /*#__PURE__*/react.createElement(ui_src/* InputDoubleRange */.R0, {
-            values: state.ThresholdBrush.thresholdRange,
-            onChange: handleRangeChange,
-            minValue: -1000,
-            maxValue: 1000,
-            step: 1,
-            showLabel: true,
-            allowNumberEdit: true,
-            showAdjustmentArrows: false
-          }));
-        }
-      }]
-    }]
-  });
-}
-function _getToolNamesFromCategory(category) {
-  let toolNames = [];
-  switch (category) {
-    case 'Brush':
-      toolNames = ['CircularBrush', 'SphereBrush'];
-      break;
-    case 'Eraser':
-      toolNames = ['CircularEraser', 'SphereEraser'];
-      break;
-    case 'ThresholdBrush':
-      toolNames = ['ThresholdCircularBrush', 'ThresholdSphereBrush'];
-      break;
-    default:
-      break;
-  }
-  return toolNames;
-}
-/* harmony default export */ const panels_SegmentationToolbox = (SegmentationToolbox);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/getPanelModule.tsx
 
 
 
 
-const getPanelModule = _ref => {
-  let {
-    commandsManager,
-    servicesManager,
-    extensionManager,
-    configuration
-  } = _ref;
+const getPanelModule = ({
+  commandsManager,
+  servicesManager,
+  extensionManager,
+  configuration,
+  title
+}) => {
   const {
     customizationService
   } = servicesManager.services;
   const wrappedPanelSegmentation = configuration => {
-    const [appConfig] = (0,state/* useAppConfig */.M)();
-    const disableEditingForMode = customizationService.get('segmentation.disableEditing');
+    const [appConfig] = (0,state/* useAppConfig */.r)();
     return /*#__PURE__*/react.createElement(PanelSegmentation, {
       commandsManager: commandsManager,
       servicesManager: servicesManager,
       extensionManager: extensionManager,
       configuration: {
         ...configuration,
-        disableEditing: appConfig.disableEditing || disableEditingForMode?.value
+        disableEditing: appConfig.disableEditing,
+        ...customizationService.get('segmentation.panel')
       }
     });
   };
   const wrappedPanelSegmentationWithTools = configuration => {
-    const [appConfig] = (0,state/* useAppConfig */.M)();
-    return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(panels_SegmentationToolbox, {
+    const [appConfig] = (0,state/* useAppConfig */.r)();
+    return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ui_src/* Toolbox */.OO, {
       commandsManager: commandsManager,
       servicesManager: servicesManager,
       extensionManager: extensionManager,
+      buttonSectionId: "segmentationToolbox",
+      title: "Segmentation Tools",
       configuration: {
         ...configuration
       }
@@ -1105,7 +826,9 @@ const getPanelModule = _ref => {
       servicesManager: servicesManager,
       extensionManager: extensionManager,
       configuration: {
-        ...configuration
+        ...configuration,
+        disableEditing: appConfig.disableEditing,
+        ...customizationService.get('segmentation.panel')
       }
     }));
   };
@@ -1124,12 +847,12 @@ const getPanelModule = _ref => {
   }];
 };
 /* harmony default export */ const src_getPanelModule = (getPanelModule);
-// EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Filters/General/ImageMarchingSquares.js + 2 modules
-var ImageMarchingSquares = __webpack_require__(49399);
+// EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Filters/General/ImageMarchingSquares.js
+var ImageMarchingSquares = __webpack_require__(52754);
 // EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Common/Core/DataArray.js
-var DataArray = __webpack_require__(54131);
-// EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Common/DataModel/ImageData.js + 2 modules
-var ImageData = __webpack_require__(96372);
+var DataArray = __webpack_require__(45128);
+// EXTERNAL MODULE: ../../../node_modules/@kitware/vtk.js/Common/DataModel/ImageData.js
+var ImageData = __webpack_require__(51250);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/utils/hydrationUtils.ts
 
 
@@ -1147,13 +870,12 @@ var ImageData = __webpack_require__(96372);
  *
  * @returns Returns true upon successful update of viewports for segmentation rendering.
  */
-async function updateViewportsForSegmentationRendering(_ref) {
-  let {
-    viewportId,
-    loadFn,
-    servicesManager,
-    referencedDisplaySetInstanceUID
-  } = _ref;
+async function updateViewportsForSegmentationRendering({
+  viewportId,
+  loadFn,
+  servicesManager,
+  referencedDisplaySetInstanceUID
+}) {
   const {
     cornerstoneViewportService,
     segmentationService,
@@ -1221,11 +943,10 @@ async function updateViewportsForSegmentationRendering(_ref) {
   viewportGridService.setDisplaySetsForViewports(updatedViewports);
   return true;
 }
-const getTargetViewport = _ref2 => {
-  let {
-    viewportId,
-    viewportGridService
-  } = _ref2;
+const getTargetViewport = ({
+  viewportId,
+  viewportGridService
+}) => {
   const {
     viewports,
     activeViewportId
@@ -1247,12 +968,11 @@ const getTargetViewport = _ref2 => {
  *
  * @returns {Array} Returns an array of viewports that require updates for segmentation rendering.
  */
-function getUpdatedViewportsForSegmentation(_ref3) {
-  let {
-    viewportId,
-    servicesManager,
-    referencedDisplaySetInstanceUID
-  } = _ref3;
+function getUpdatedViewportsForSegmentation({
+  viewportId,
+  servicesManager,
+  referencedDisplaySetInstanceUID
+}) {
   const {
     hangingProtocolService,
     displaySetService,
@@ -1288,7 +1008,7 @@ function getUpdatedViewportsForSegmentation(_ref3) {
       });
     }
   });
-  return updatedViewports;
+  return updatedViewports.filter(v => v.viewportOptions?.viewportType !== 'volume3d');
 }
 
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/commandsModule.ts
@@ -1302,9 +1022,12 @@ function getUpdatedViewportsForSegmentation(_ref3) {
 
 
 
+const {
+  segmentation: segmentationUtils
+} = dist_esm.utilities;
 const {
   datasetToBlob
-} = dcmjs_es["default"].data;
+} = dcmjs_es/* default.data */.Ay.data;
 const {
   Cornerstone3D: {
     Segmentation: {
@@ -1312,28 +1035,28 @@ const {
       generateSegmentation
     }
   }
-} = adapters_es.adaptersSEG;
+} = adapters_es/* adaptersSEG */.ql;
 const {
   Cornerstone3D: {
     RTSS: {
       generateRTSSFromSegmentations
     }
   }
-} = adapters_es.adaptersRT;
+} = adapters_es/* adaptersRT */.f_;
 const {
   downloadDICOMData
-} = adapters_es.helpers;
-const commandsModule = _ref => {
-  let {
-    servicesManager,
-    extensionManager
-  } = _ref;
+} = adapters_es/* helpers */._$;
+const commandsModule = ({
+  servicesManager,
+  extensionManager
+}) => {
   const {
     uiNotificationService,
     segmentationService,
     uiDialogService,
     displaySetService,
-    viewportGridService
+    viewportGridService,
+    toolGroupService
   } = servicesManager.services;
   const actions = {
     /**
@@ -1360,10 +1083,9 @@ const commandsModule = _ref => {
      * @param params.viewportId - the target viewport ID.
      *
      */
-    createEmptySegmentationForViewport: async _ref2 => {
-      let {
-        viewportId
-      } = _ref2;
+    createEmptySegmentationForViewport: async ({
+      viewportId
+    }) => {
       const viewport = getTargetViewport({
         viewportId,
         viewportGridService
@@ -1412,11 +1134,10 @@ const commandsModule = _ref => {
      * @param params.viewportId - the target viewport ID.
      *
      */
-    loadSegmentationsForViewport: async _ref3 => {
-      let {
-        segmentations,
-        viewportId
-      } = _ref3;
+    loadSegmentationsForViewport: async ({
+      segmentations,
+      viewportId
+    }) => {
       updateViewportsForSegmentationRendering({
         viewportId,
         servicesManager,
@@ -1479,13 +1200,13 @@ const commandsModule = _ref => {
      * @param params.displaySets - Array of display sets to be loaded for segmentation.
      *
      */
-    loadSegmentationDisplaySetsForViewport: async _ref4 => {
-      let {
-        viewportId,
-        displaySets
-      } = _ref4;
+    loadSegmentationDisplaySetsForViewport: async ({
+      viewportId,
+      displaySets
+    }) => {
       // Todo: handle adding more than one segmentation
       const displaySet = displaySets[0];
+      const referencedDisplaySet = displaySetService.getDisplaySetByUID(displaySet.referencedDisplaySetInstanceUID);
       updateViewportsForSegmentationRendering({
         viewportId,
         servicesManager,
@@ -1496,6 +1217,8 @@ const commandsModule = _ref => {
           const serviceFunction = segDisplaySet.Modality === 'SEG' ? 'createSegmentationForSEGDisplaySet' : 'createSegmentationForRTDisplaySet';
           const boundFn = segmentationService[serviceFunction].bind(segmentationService);
           const segmentationId = await boundFn(segDisplaySet, null, suppressEvents);
+          const segmentation = segmentationService.getSegmentation(segmentationId);
+          segmentation.description = `S${referencedDisplaySet.SeriesNumber}: ${referencedDisplaySet.SeriesDescription}`;
           return segmentationId;
         }
       });
@@ -1513,11 +1236,10 @@ const commandsModule = _ref => {
      *
      * @returns Returns the generated segmentation data.
      */
-    generateSegmentation: _ref5 => {
-      let {
-        segmentationId,
-        options = {}
-      } = _ref5;
+    generateSegmentation: ({
+      segmentationId,
+      options = {}
+    }) => {
       const segmentation = dist_esm.segmentation.state.getSegmentation(segmentationId);
       const {
         referencedVolumeId
@@ -1537,7 +1259,7 @@ const commandsModule = _ref => {
           label,
           color
         } = segment;
-        const RecommendedDisplayCIELabValue = dcmjs_es["default"].data.Colors.rgb2DICOMLAB(color.slice(0, 3).map(value => value / 255)).map(value => Math.round(value));
+        const RecommendedDisplayCIELabValue = dcmjs_es/* default.data */.Ay.data.Colors.rgb2DICOMLAB(color.slice(0, 3).map(value => value / 255)).map(value => Math.round(value));
         const segmentMetadata = {
           SegmentNumber: segmentIndex.toString(),
           SegmentLabel: label,
@@ -1570,10 +1292,9 @@ const commandsModule = _ref => {
      * @param params.segmentationId - ID of the segmentation to be downloaded.
      *
      */
-    downloadSegmentation: _ref6 => {
-      let {
-        segmentationId
-      } = _ref6;
+    downloadSegmentation: ({
+      segmentationId
+    }) => {
       const segmentationInOHIF = segmentationService.getSegmentation(segmentationId);
       const generatedSegmentation = actions.generateSegmentation({
         segmentationId
@@ -1592,11 +1313,10 @@ const commandsModule = _ref => {
      * @returns {Object|void} Returns the naturalized report if successfully stored,
      * otherwise throws an error.
      */
-    storeSegmentation: async _ref7 => {
-      let {
-        segmentationId,
-        dataSource
-      } = _ref7;
+    storeSegmentation: async ({
+      segmentationId,
+      dataSource
+    }) => {
       const promptResult = await (0,default_src.createReportDialogPrompt)(uiDialogService, {
         extensionManager
       });
@@ -1641,15 +1361,14 @@ const commandsModule = _ref => {
      * converts dataset to downloadable blob.
      *
      */
-    downloadRTSS: _ref8 => {
-      let {
-        segmentationId
-      } = _ref8;
+    downloadRTSS: ({
+      segmentationId
+    }) => {
       const segmentations = segmentationService.getSegmentation(segmentationId);
       const vtkUtils = {
-        vtkImageMarchingSquares: ImageMarchingSquares/* default */.ZP,
-        vtkDataArray: DataArray/* default */.ZP,
-        vtkImageData: ImageData/* default */.ZP
+        vtkImageMarchingSquares: ImageMarchingSquares/* default */.Ay,
+        vtkDataArray: DataArray/* default */.Ay,
+        vtkImageData: ImageData/* default */.Ay
       };
       const RTSS = generateRTSSFromSegmentations(segmentations, src.classes.MetadataProvider, src.DicomMetadataStore, esm.cache, dist_esm.Enums, vtkUtils);
       try {
@@ -1661,6 +1380,38 @@ const commandsModule = _ref => {
       } catch (e) {
         console.warn(e);
       }
+    },
+    setBrushSize: ({
+      value,
+      toolNames
+    }) => {
+      const brushSize = Number(value);
+      toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
+        if (toolNames?.length === 0) {
+          segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize);
+        } else {
+          toolNames?.forEach(toolName => {
+            segmentationUtils.setBrushSizeForToolGroup(toolGroupId, brushSize, toolName);
+          });
+        }
+      });
+    },
+    setThresholdRange: ({
+      value,
+      toolNames = ['ThresholdCircularBrush', 'ThresholdSphereBrush']
+    }) => {
+      toolGroupService.getToolGroupIds()?.forEach(toolGroupId => {
+        const toolGroup = toolGroupService.getToolGroup(toolGroupId);
+        toolNames?.forEach(toolName => {
+          toolGroup.setToolConfiguration(toolName, {
+            strategySpecificConfiguration: {
+              THRESHOLD: {
+                threshold: value
+              }
+            }
+          });
+        });
+      });
     }
   };
   const definitions = {
@@ -1687,21 +1438,89 @@ const commandsModule = _ref => {
     },
     downloadRTSS: {
       commandFn: actions.downloadRTSS
+    },
+    setBrushSize: {
+      commandFn: actions.setBrushSize
+    },
+    setThresholdRange: {
+      commandFn: actions.setThresholdRange
     }
   };
   return {
     actions,
-    definitions
+    definitions,
+    defaultContext: 'SEGMENTATION'
   };
 };
 /* harmony default export */ const src_commandsModule = (commandsModule);
-;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/init.ts
+;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/getToolbarModule.ts
+function getToolbarModule({
+  commandsManager,
+  servicesManager
+}) {
+  const {
+    segmentationService,
+    toolGroupService
+  } = servicesManager.services;
+  return [{
+    name: 'evaluate.cornerstone.segmentation',
+    evaluate: ({
+      viewportId,
+      button,
+      toolNames,
+      disabledText
+    }) => {
+      // Todo: we need to pass in the button section Id since we are kind of
+      // forcing the button to have black background since initially
+      // it is designed for the toolbox not the toolbar on top
+      // we should then branch the buttonSectionId to have different styles
+      const segmentations = segmentationService.getSegmentations();
+      if (!segmentations?.length) {
+        return {
+          disabled: true,
+          className: '!text-common-bright !bg-black opacity-50',
+          disabledText: disabledText ?? 'No segmentations available'
+        };
+      }
+      const toolGroup = toolGroupService.getToolGroupForViewport(viewportId);
+      if (!toolGroup) {
+        return;
+      }
+      const toolName = getToolNameForButton(button);
+      if (!toolGroup || !toolGroup.hasTool(toolName)) {
+        return {
+          disabled: true,
+          className: '!text-common-bright ohif-disabled',
+          disabledText: disabledText ?? 'Not available on the current viewport'
+        };
+      }
+      const isPrimaryActive = toolNames ? toolNames.includes(toolGroup.getActivePrimaryMouseButtonTool()) : toolGroup.getActivePrimaryMouseButtonTool() === toolName;
+      return {
+        disabled: false,
+        className: isPrimaryActive ? '!text-black !bg-primary-light hover:bg-primary-light hover-text-black hover:cursor-pointer' : '!text-common-bright !bg-black hover:bg-primary-light hover:cursor-pointer hover:text-black',
+        // Todo: isActive right now is used for nested buttons where the primary
+        // button needs to be fully rounded (vs partial rounded) when active
+        // otherwise it does not have any other use
+        isActive: isPrimaryActive
+      };
+    }
+  }];
+}
+
+// Todo: this is duplicate, we should move it to a shared location
+function getToolNameForButton(button) {
+  const {
+    props
+  } = button;
+  const commands = props?.commands || button.commands;
+  const commandsArray = Array.isArray(commands) ? commands : [commands];
+  const firstCommand = commandsArray[0];
+  if (firstCommand?.commandOptions) {
+    return firstCommand.commandOptions.toolName ?? props?.id ?? button.id;
+  }
 
-function init(_ref) {
-  let {
-    configuration = {}
-  } = _ref;
-  (0,dist_esm.addTool)(dist_esm.BrushTool);
+  // use id as a fallback for toolName
+  return props?.id ?? button.id;
 }
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/index.tsx
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -1713,7 +1532,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 const Component = /*#__PURE__*/react.lazy(() => {
-  return __webpack_require__.e(/* import() */ 451).then(__webpack_require__.bind(__webpack_require__, 4451));
+  return __webpack_require__.e(/* import() */ 295).then(__webpack_require__.bind(__webpack_require__, 58295));
 });
 const OHIFCornerstoneSEGViewport = props => {
   return /*#__PURE__*/react.createElement(react.Suspense, {
@@ -1730,7 +1549,6 @@ const extension = {
    * You ID can be anything you want, but it should be unique.
    */
   id: id,
-  preRegistration: init,
   /**
    * PanelModule should provide a list of panels that will be available in OHIF
    * for Modes to consume and render. Each panel is defined by a {name,
@@ -1739,11 +1557,12 @@ const extension = {
    */
   getPanelModule: src_getPanelModule,
   getCommandsModule: src_commandsModule,
-  getViewportModule(_ref) {
-    let {
-      servicesManager,
-      extensionManager
-    } = _ref;
+  getToolbarModule: getToolbarModule,
+  getViewportModule({
+    servicesManager,
+    extensionManager,
+    commandsManager
+  }) {
     const ExtendedOHIFCornerstoneSEGViewport = props => {
       return /*#__PURE__*/react.createElement(OHIFCornerstoneSEGViewport, _extends({
         servicesManager: servicesManager,
@@ -1767,13 +1586,6 @@ const extension = {
 };
 /* harmony default export */ const cornerstone_dicom_seg_src = (extension);
 
-/***/ }),
-
-/***/ 78753:
-/***/ (() => {
-
-/* (ignored) */
-
 /***/ })
 
 }]);