@ohif/app 3.8.0-beta.63 → 3.8.0-beta.64

package/dist/{50.bundle.55ad62f1f656f5fd5a36.js → 638.bundle.62f8f8ada74bd900abfc.js}

@@ -1,7 +1,7 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[50,481],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[638,481],{
 
-/***/ 71093:
+/***/ 92169:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 // ESM COMPAT FLAG
@@ -22,8 +22,8 @@ const SOPClassHandlerId = `${id}.sopClassHandlerModule.${SOPClassHandlerName}`;
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
 var react = __webpack_require__(41766);
-// EXTERNAL MODULE: ../../core/src/index.ts + 66 modules
-var src = __webpack_require__(14283);
+// EXTERNAL MODULE: ../../core/src/index.ts + 67 modules
+var src = __webpack_require__(78198);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js + 383 modules
 var esm = __webpack_require__(50719);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 16 modules
@@ -315,13 +315,13 @@ function getHangingProtocolModule() {
 
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state = __webpack_require__(15575);
+// EXTERNAL MODULE: ../../ui/src/index.js + 495 modules
+var ui_src = __webpack_require__(65967);
 // EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 78 modules
-var default_src = __webpack_require__(49704);
+var default_src = __webpack_require__(54090);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
 var prop_types = __webpack_require__(11374);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../ui/src/index.js + 489 modules
-var ui_src = __webpack_require__(6804);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/panels/callInputDialog.tsx
 
 
@@ -714,386 +714,6 @@ PanelSegmentation.propTypes = {
     }).isRequired
   }).isRequired
 };
-;// 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: null
-  },
-  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({
-  servicesManager,
-  extensionManager
-}) {
-  const {
-    toolbarService,
-    segmentationService,
-    toolGroupService
-  } = servicesManager.services;
-  const [viewportGrid] = (0,ui_src/* useViewportGrid */.ih)();
-  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 => {
-    initializeThresholdValue(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]);
-  function initializeThresholdValue(toolName) {
-    if (state.ThresholdBrush.thresholdRange === null) {
-      // set the default threshold range from the tool configuration
-      const toolGroupIds = toolGroupService.getToolGroupIds();
-      const toolGroupId = toolGroupIds[0];
-      const toolGroup = toolGroupService.getToolGroup(toolGroupId);
-      const toolConfig = toolGroup.getToolConfiguration(toolName);
-      const defaultThresholdRange = toolConfig?.strategySpecificConfiguration?.THRESHOLD?.threshold;
-      dispatch({
-        type: ACTIONS.SET_TOOL_CONFIG,
-        payload: {
-          tool: 'ThresholdBrush',
-          config: {
-            thresholdRange: defaultThresholdRange
-          }
-        }
-      });
-    }
-  }
-  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: {
-              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 */.om, {
-    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 */.Z5, {
-            values: state.ThresholdBrush.thresholdRange,
-            onChange: handleRangeChange,
-            minValue: -1000 // Todo: these should be configurable
-            ,
-            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
 
 
@@ -1103,7 +723,8 @@ const getPanelModule = ({
   commandsManager,
   servicesManager,
   extensionManager,
-  configuration
+  configuration,
+  title
 }) => {
   const {
     customizationService
@@ -1122,11 +743,12 @@ const getPanelModule = ({
     });
   };
   const wrappedPanelSegmentationWithTools = configuration => {
-    const [appConfig] = (0,state/* useAppConfig */.r)();
-    return /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(panels_SegmentationToolbox, {
+    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
       }
@@ -1329,6 +951,9 @@ function getUpdatedViewportsForSegmentation({
 
 
 
+const {
+  segmentation: segmentationUtils
+} = dist_esm.utilities;
 const {
   datasetToBlob
 } = dcmjs_es/* default.data */.Ay.data;
@@ -1359,7 +984,8 @@ const commandsModule = ({
     segmentationService,
     uiDialogService,
     displaySetService,
-    viewportGridService
+    viewportGridService,
+    toolGroupService
   } = servicesManager.services;
   const actions = {
     /**
@@ -1680,6 +1306,62 @@ const commandsModule = ({
       } 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
+              }
+            }
+          });
+        });
+      });
+    },
+    toggleThresholdRangeAndDynamic() {
+      const toolGroupIds = toolGroupService.getToolGroupIds();
+      if (!toolGroupIds) {
+        return;
+      }
+      toolGroupIds.forEach(toolGroupId => {
+        const toolGroup = toolGroupService.getToolGroup(toolGroupId);
+        const brushInstances = segmentationUtils.getBrushToolInstances(toolGroup.id);
+        brushInstances.forEach(({
+          configuration
+        }) => {
+          const {
+            activeStrategy,
+            strategySpecificConfiguration
+          } = configuration;
+          if (activeStrategy.startsWith('THRESHOLD')) {
+            const thresholdConfig = strategySpecificConfiguration.THRESHOLD;
+            if (thresholdConfig) {
+              thresholdConfig.isDynamic = !thresholdConfig.isDynamic;
+            }
+          }
+        });
+      });
     }
   };
   const definitions = {
@@ -1706,18 +1388,97 @@ const commandsModule = ({
     },
     downloadRTSS: {
       commandFn: actions.downloadRTSS
+    },
+    setBrushSize: {
+      commandFn: actions.setBrushSize
+    },
+    setThresholdRange: {
+      commandFn: actions.setThresholdRange
+    },
+    toggleThresholdRangeAndDynamic: {
+      commandFn: actions.toggleThresholdRangeAndDynamic
     }
   };
   return {
     actions,
-    definitions
+    definitions,
+    defaultContext: 'SEGMENTATION'
   };
 };
 /* harmony default export */ const src_commandsModule = (commandsModule);
+;// 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
+    }) => {
+      // 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'
+        };
+      }
+      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'
+        };
+      }
+      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
+      };
+    }
+  }];
+}
+function getToolNameForButton(button) {
+  const {
+    props
+  } = button;
+  const commands = props?.commands || button.commands;
+  if (commands && commands.length) {
+    const command = commands[0];
+    const {
+      commandOptions
+    } = command;
+    const {
+      toolName
+    } = commandOptions || {
+      toolName: props?.id ?? button.id
+    };
+    return toolName;
+  }
+  return null;
+}
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dicom-seg/src/init.ts
 
 function init({
-  configuration = {}
+  servicesManager
 }) {
   (0,dist_esm.addTool)(dist_esm.BrushTool);
 }
@@ -1730,6 +1491,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 
 
+
 const Component = /*#__PURE__*/react.lazy(() => {
   return __webpack_require__.e(/* import() */ 295).then(__webpack_require__.bind(__webpack_require__, 58295));
 });
@@ -1757,9 +1519,11 @@ const extension = {
    */
   getPanelModule: src_getPanelModule,
   getCommandsModule: src_commandsModule,
+  getToolbarModule: getToolbarModule,
   getViewportModule({
     servicesManager,
-    extensionManager
+    extensionManager,
+    commandsManager
   }) {
     const ExtendedOHIFCornerstoneSEGViewport = props => {
       return /*#__PURE__*/react.createElement(OHIFCornerstoneSEGViewport, _extends({