@ohif/app 3.10.0-beta.1 → 3.10.0-beta.100

package/dist/{717.bundle.6515129b5f0253ed208e.js → 1919.bundle.d4d653cd7e1392c87e89.js}

@@ -1,5 +1,271 @@
 "use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([[717,2591,4182,1801],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[1919,4759,5674,8402],{
+
+/***/ 75183:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+var ChangeTypes;
+(function (ChangeTypes) {
+    ChangeTypes["Interaction"] = "Interaction";
+    ChangeTypes["HandlesUpdated"] = "HandlesUpdated";
+    ChangeTypes["StatsUpdated"] = "StatsUpdated";
+    ChangeTypes["InitialSetup"] = "InitialSetup";
+    ChangeTypes["Completed"] = "Completed";
+    ChangeTypes["InterpolationUpdated"] = "InterpolationUpdated";
+    ChangeTypes["History"] = "History";
+    ChangeTypes["MetadataReferenceModified"] = "MetadataReferenceModified";
+})(ChangeTypes || (ChangeTypes = {}));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ChangeTypes);
+
+
+/***/ }),
+
+/***/ 94021:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+var Events;
+(function (Events) {
+    Events["TOOL_ACTIVATED"] = "CORNERSTONE_TOOLS_TOOL_ACTIVATED";
+    Events["TOOLGROUP_VIEWPORT_ADDED"] = "CORNERSTONE_TOOLS_TOOLGROUP_VIEWPORT_ADDED";
+    Events["TOOLGROUP_VIEWPORT_REMOVED"] = "CORNERSTONE_TOOLS_TOOLGROUP_VIEWPORT_REMOVED";
+    Events["TOOL_MODE_CHANGED"] = "CORNERSTONE_TOOLS_TOOL_MODE_CHANGED";
+    Events["ANNOTATION_ADDED"] = "CORNERSTONE_TOOLS_ANNOTATION_ADDED";
+    Events["ANNOTATION_COMPLETED"] = "CORNERSTONE_TOOLS_ANNOTATION_COMPLETED";
+    Events["ANNOTATION_MODIFIED"] = "CORNERSTONE_TOOLS_ANNOTATION_MODIFIED";
+    Events["ANNOTATION_REMOVED"] = "CORNERSTONE_TOOLS_ANNOTATION_REMOVED";
+    Events["ANNOTATION_SELECTION_CHANGE"] = "CORNERSTONE_TOOLS_ANNOTATION_SELECTION_CHANGE";
+    Events["ANNOTATION_LOCK_CHANGE"] = "CORNERSTONE_TOOLS_ANNOTATION_LOCK_CHANGE";
+    Events["ANNOTATION_VISIBILITY_CHANGE"] = "CORNERSTONE_TOOLS_ANNOTATION_VISIBILITY_CHANGE";
+    Events["ANNOTATION_RENDERED"] = "CORNERSTONE_TOOLS_ANNOTATION_RENDERED";
+    Events["ANNOTATION_INTERPOLATION_PROCESS_COMPLETED"] = "CORNERSTONE_TOOLS_ANNOTATION_INTERPOLATION_PROCESS_COMPLETED";
+    Events["INTERPOLATED_ANNOTATIONS_REMOVED"] = "CORNERSTONE_TOOLS_INTERPOLATED_ANNOTATIONS_REMOVED";
+    Events["SEGMENTATION_MODIFIED"] = "CORNERSTONE_TOOLS_SEGMENTATION_MODIFIED";
+    Events["SEGMENTATION_RENDERED"] = "CORNERSTONE_TOOLS_SEGMENTATION_RENDERED";
+    Events["SEGMENTATION_REPRESENTATION_ADDED"] = "CORNERSTONE_TOOLS_SEGMENTATION_REPRESENTATION_ADDED";
+    Events["SEGMENTATION_ADDED"] = "CORNERSTONE_TOOLS_SEGMENTATION_ADDED";
+    Events["SEGMENTATION_REPRESENTATION_MODIFIED"] = "CORNERSTONE_TOOLS_SEGMENTATION_REPRESENTATION_MODIFIED";
+    Events["SEGMENTATION_REMOVED"] = "CORNERSTONE_TOOLS_SEGMENTATION_REMOVED";
+    Events["SEGMENTATION_REPRESENTATION_REMOVED"] = "CORNERSTONE_TOOLS_SEGMENTATION_REPRESENTATION_REMOVED";
+    Events["SEGMENTATION_DATA_MODIFIED"] = "CORNERSTONE_TOOLS_SEGMENTATION_DATA_MODIFIED";
+    Events["KEY_DOWN"] = "CORNERSTONE_TOOLS_KEY_DOWN";
+    Events["KEY_UP"] = "CORNERSTONE_TOOLS_KEY_UP";
+    Events["MOUSE_DOWN"] = "CORNERSTONE_TOOLS_MOUSE_DOWN";
+    Events["MOUSE_UP"] = "CORNERSTONE_TOOLS_MOUSE_UP";
+    Events["MOUSE_DOWN_ACTIVATE"] = "CORNERSTONE_TOOLS_MOUSE_DOWN_ACTIVATE";
+    Events["MOUSE_DRAG"] = "CORNERSTONE_TOOLS_MOUSE_DRAG";
+    Events["MOUSE_MOVE"] = "CORNERSTONE_TOOLS_MOUSE_MOVE";
+    Events["MOUSE_CLICK"] = "CORNERSTONE_TOOLS_MOUSE_CLICK";
+    Events["MOUSE_DOUBLE_CLICK"] = "CORNERSTONE_TOOLS_MOUSE_DOUBLE_CLICK";
+    Events["MOUSE_WHEEL"] = "CORNERSTONE_TOOLS_MOUSE_WHEEL";
+    Events["TOUCH_START"] = "CORNERSTONE_TOOLS_TOUCH_START";
+    Events["TOUCH_START_ACTIVATE"] = "CORNERSTONE_TOOLS_TOUCH_START_ACTIVATE";
+    Events["TOUCH_PRESS"] = "CORNERSTONE_TOOLS_TOUCH_PRESS";
+    Events["TOUCH_DRAG"] = "CORNERSTONE_TOOLS_TOUCH_DRAG";
+    Events["TOUCH_END"] = "CORNERSTONE_TOOLS_TOUCH_END";
+    Events["TOUCH_TAP"] = "CORNERSTONE_TOOLS_TAP";
+    Events["TOUCH_SWIPE"] = "CORNERSTONE_TOOLS_SWIPE";
+})(Events || (Events = {}));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Events);
+
+
+/***/ }),
+
+/***/ 18682:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+var SegmentationRepresentations;
+(function (SegmentationRepresentations) {
+    SegmentationRepresentations["Labelmap"] = "Labelmap";
+    SegmentationRepresentations["Contour"] = "Contour";
+    SegmentationRepresentations["Surface"] = "Surface";
+})(SegmentationRepresentations || (SegmentationRepresentations = {}));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SegmentationRepresentations);
+
+
+/***/ }),
+
+/***/ 84093:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+var StrategyCallbacks;
+(function (StrategyCallbacks) {
+    StrategyCallbacks["OnInteractionStart"] = "onInteractionStart";
+    StrategyCallbacks["OnInteractionEnd"] = "onInteractionEnd";
+    StrategyCallbacks["Preview"] = "preview";
+    StrategyCallbacks["RejectPreview"] = "rejectPreview";
+    StrategyCallbacks["AcceptPreview"] = "acceptPreview";
+    StrategyCallbacks["Fill"] = "fill";
+    StrategyCallbacks["Interpolate"] = "interpolate";
+    StrategyCallbacks["StrategyFunction"] = "strategyFunction";
+    StrategyCallbacks["CreateIsInThreshold"] = "createIsInThreshold";
+    StrategyCallbacks["Initialize"] = "initialize";
+    StrategyCallbacks["INTERNAL_setValue"] = "setValue";
+    StrategyCallbacks["AddPreview"] = "addPreview";
+    StrategyCallbacks["ComputeInnerCircleRadius"] = "computeInnerCircleRadius";
+    StrategyCallbacks["GetStatistics"] = "getStatistics";
+})(StrategyCallbacks || (StrategyCallbacks = {}));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (StrategyCallbacks);
+
+
+/***/ }),
+
+/***/ 66452:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   i: () => (/* binding */ MouseBindings),
+/* harmony export */   q: () => (/* binding */ KeyboardBindings)
+/* harmony export */ });
+var MouseBindings;
+(function (MouseBindings) {
+    MouseBindings[MouseBindings["Primary"] = 1] = "Primary";
+    MouseBindings[MouseBindings["Secondary"] = 2] = "Secondary";
+    MouseBindings[MouseBindings["Primary_And_Secondary"] = 3] = "Primary_And_Secondary";
+    MouseBindings[MouseBindings["Auxiliary"] = 4] = "Auxiliary";
+    MouseBindings[MouseBindings["Primary_And_Auxiliary"] = 5] = "Primary_And_Auxiliary";
+    MouseBindings[MouseBindings["Secondary_And_Auxiliary"] = 6] = "Secondary_And_Auxiliary";
+    MouseBindings[MouseBindings["Primary_And_Secondary_And_Auxiliary"] = 7] = "Primary_And_Secondary_And_Auxiliary";
+    MouseBindings[MouseBindings["Fourth_Button"] = 8] = "Fourth_Button";
+    MouseBindings[MouseBindings["Fifth_Button"] = 16] = "Fifth_Button";
+    MouseBindings[MouseBindings["Wheel"] = 524288] = "Wheel";
+    MouseBindings[MouseBindings["Wheel_Primary"] = 524289] = "Wheel_Primary";
+})(MouseBindings || (MouseBindings = {}));
+var KeyboardBindings;
+(function (KeyboardBindings) {
+    KeyboardBindings[KeyboardBindings["Shift"] = 16] = "Shift";
+    KeyboardBindings[KeyboardBindings["Ctrl"] = 17] = "Ctrl";
+    KeyboardBindings[KeyboardBindings["Alt"] = 18] = "Alt";
+    KeyboardBindings[KeyboardBindings["Meta"] = 91] = "Meta";
+    KeyboardBindings[KeyboardBindings["ShiftCtrl"] = 1617] = "ShiftCtrl";
+    KeyboardBindings[KeyboardBindings["ShiftAlt"] = 1618] = "ShiftAlt";
+    KeyboardBindings[KeyboardBindings["ShiftMeta"] = 1691] = "ShiftMeta";
+    KeyboardBindings[KeyboardBindings["CtrlAlt"] = 1718] = "CtrlAlt";
+    KeyboardBindings[KeyboardBindings["CtrlMeta"] = 1791] = "CtrlMeta";
+    KeyboardBindings[KeyboardBindings["AltMeta"] = 1891] = "AltMeta";
+})(KeyboardBindings || (KeyboardBindings = {}));
+
+
+
+/***/ }),
+
+/***/ 49892:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+var ToolModes;
+(function (ToolModes) {
+    ToolModes["Active"] = "Active";
+    ToolModes["Passive"] = "Passive";
+    ToolModes["Enabled"] = "Enabled";
+    ToolModes["Disabled"] = "Disabled";
+})(ToolModes || (ToolModes = {}));
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ToolModes);
+
+
+/***/ }),
+
+/***/ 10401:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   H: () => (/* binding */ Swipe)
+/* harmony export */ });
+var Swipe;
+(function (Swipe) {
+    Swipe["UP"] = "UP";
+    Swipe["DOWN"] = "DOWN";
+    Swipe["LEFT"] = "LEFT";
+    Swipe["RIGHT"] = "RIGHT";
+})(Swipe || (Swipe = {}));
+
+
+
+/***/ }),
+
+/***/ 99737:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  AnnotationStyleStates: () => (/* reexport */ enums_AnnotationStyleStates),
+  ChangeTypes: () => (/* reexport */ ChangeTypes/* default */.A),
+  Events: () => (/* reexport */ Events/* default */.A),
+  KeyboardBindings: () => (/* reexport */ ToolBindings/* KeyboardBindings */.q),
+  MouseBindings: () => (/* reexport */ ToolBindings/* MouseBindings */.i),
+  SegmentationRepresentations: () => (/* reexport */ SegmentationRepresentations/* default */.A),
+  StrategyCallbacks: () => (/* reexport */ StrategyCallbacks/* default */.A),
+  Swipe: () => (/* reexport */ Touch/* Swipe */.H),
+  ToolModes: () => (/* reexport */ ToolModes/* default */.A),
+  WorkerTypes: () => (/* reexport */ WorkerTypes)
+});
+
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/enums/ToolBindings.js
+var ToolBindings = __webpack_require__(66452);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/enums/ToolModes.js
+var ToolModes = __webpack_require__(49892);
+;// CONCATENATED MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/enums/AnnotationStyleStates.js
+var AnnotationStyleStates;
+(function (AnnotationStyleStates) {
+    AnnotationStyleStates["Default"] = "";
+    AnnotationStyleStates["Highlighted"] = "Highlighted";
+    AnnotationStyleStates["Selected"] = "Selected";
+    AnnotationStyleStates["Locked"] = "Locked";
+    AnnotationStyleStates["AutoGenerated"] = "AutoGenerated";
+})(AnnotationStyleStates || (AnnotationStyleStates = {}));
+/* harmony default export */ const enums_AnnotationStyleStates = (AnnotationStyleStates);
+
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/enums/Events.js
+var Events = __webpack_require__(94021);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/enums/SegmentationRepresentations.js
+var SegmentationRepresentations = __webpack_require__(18682);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/enums/Touch.js
+var Touch = __webpack_require__(10401);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/enums/StrategyCallbacks.js
+var StrategyCallbacks = __webpack_require__(84093);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/enums/ChangeTypes.js
+var ChangeTypes = __webpack_require__(75183);
+;// CONCATENATED MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/enums/WorkerTypes.js
+var WorkerTypes_ChangeTypes;
+(function (ChangeTypes) {
+    ChangeTypes["POLYSEG_CONTOUR_TO_LABELMAP"] = "Converting Contour to Labelmap";
+    ChangeTypes["POLYSEG_SURFACE_TO_LABELMAP"] = "Converting Surfaces to Labelmap";
+    ChangeTypes["POLYSEG_CONTOUR_TO_SURFACE"] = "Converting Contour to Surface";
+    ChangeTypes["POLYSEG_LABELMAP_TO_SURFACE"] = "Converting Labelmap to Surface";
+    ChangeTypes["SURFACE_CLIPPING"] = "Clipping Surfaces";
+})(WorkerTypes_ChangeTypes || (WorkerTypes_ChangeTypes = {}));
+/* harmony default export */ const WorkerTypes = (WorkerTypes_ChangeTypes);
+
+;// CONCATENATED MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/enums/index.js
+
+
+
+
+
+
+
+
+
+
+
+
+/***/ }),
 
 /***/ 14696:
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
@@ -26,12 +292,12 @@ const package_namespaceObject = /*#__PURE__*/JSON.parse('{"UU":"@ohif/extension-
 const id = package_namespaceObject.UU;
 const SOPClassHandlerName = 'dynamic-volume';
 
-// EXTERNAL MODULE: ../../core/src/index.ts + 71 modules
-var src = __webpack_require__(29463);
+// EXTERNAL MODULE: ../../core/src/index.ts + 74 modules
+var src = __webpack_require__(97444);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/core/dist/esm/index.js
 var esm = __webpack_require__(81985);
-// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 82 modules
-var dist_esm = __webpack_require__(55139);
+// EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js + 95 modules
+var dist_esm = __webpack_require__(31856);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dynamic-volume/src/actions/updateSegmentationsChartDisplaySet.ts
 
 
@@ -677,10 +943,10 @@ const commandsModule = ({
 /* harmony default export */ const src_commandsModule = (commandsModule);
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
 var react = __webpack_require__(86326);
-// EXTERNAL MODULE: ../../ui/src/index.js + 690 modules
-var ui_src = __webpack_require__(35647);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2483 modules
-var ui_next_src = __webpack_require__(35570);
+// EXTERNAL MODULE: ../../ui/src/index.js + 694 modules
+var ui_src = __webpack_require__(12318);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 2637 modules
+var ui_next_src = __webpack_require__(52441);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 
@@ -697,17 +963,15 @@ const Header = ({
   tooltip
 }) => /*#__PURE__*/react.createElement("div", {
   className: "flex items-center space-x-1"
-}, /*#__PURE__*/react.createElement(ui_src/* Tooltip */.m_, {
-  content: /*#__PURE__*/react.createElement("div", {
-    className: "text-white"
-  }, tooltip),
-  position: "bottom-left",
-  tight: true,
-  tooltipBoxClassName: "max-w-xs p-2"
-}, /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+}, /*#__PURE__*/react.createElement(ui_next_src/* Tooltip */.m_, null, /*#__PURE__*/react.createElement(ui_next_src/* TooltipTrigger */.k$, {
+  asChild: true
+}, /*#__PURE__*/react.createElement("span", null, /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.ByName, {
   name: "info-link",
   className: "text-primary-active h-[14px] w-[14px]"
-})), /*#__PURE__*/react.createElement("span", {
+}))), /*#__PURE__*/react.createElement(ui_next_src/* TooltipContent */.ZI, {
+  sideOffset: 4,
+  className: "bg-primary-dark max-w-xs p-2 text-white"
+}, /*#__PURE__*/react.createElement("div", null, tooltip))), /*#__PURE__*/react.createElement("span", {
   className: "text-aqua-pale text-[11px] uppercase"
 }, title));
 const DynamicVolumeControls = ({
@@ -719,21 +983,16 @@ const DynamicVolumeControls = ({
   minFps,
   maxFps,
   // Frames
-  currentFrameIndex,
-  onFrameChange,
-  framesLength,
+  currentDimensionGroupNumber,
+  onDimensionGroupChange,
+  numDimensionGroups,
   onGenerate,
   onDoubleRangeChange,
+  rangeValues,
   onDynamicClick
 }) => {
   const [computedView, setComputedView] = (0,react.useState)(false);
   const [computeViewMode, setComputeViewMode] = (0,react.useState)(esm.Enums.DynamicOperatorType.SUM);
-  const [sliderRangeValues, setSliderRangeValues] = (0,react.useState)([0, framesLength - 1]);
-  const handleSliderChange = newValues => {
-    onDoubleRangeChange(newValues);
-    setSliderRangeValues(newValues);
-  };
-  const formatLabel = value => Math.round(value);
   return /*#__PURE__*/react.createElement("div", {
     className: "flex select-none flex-col"
   }, /*#__PURE__*/react.createElement(ui_src/* PanelSection */.aU, {
@@ -757,7 +1016,7 @@ const DynamicVolumeControls = ({
     onClick: () => {
       setComputedView(true);
     }
-  }, "Computed"))), /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement(FrameControls, {
+  }, "Computed"))), /*#__PURE__*/react.createElement("div", null, /*#__PURE__*/react.createElement(DimensionGroupControls, {
     onPlayPauseChange: onPlayPauseChange,
     isPlaying: isPlaying,
     computedView: computedView
@@ -769,16 +1028,16 @@ const DynamicVolumeControls = ({
     maxFps: maxFps
     //
     ,
-    framesLength: framesLength,
-    onFrameChange: onFrameChange,
-    currentFrameIndex: currentFrameIndex
+    numDimensionGroups: numDimensionGroups,
+    onDimensionGroupChange: onDimensionGroupChange,
+    currentDimensionGroupNumber: currentDimensionGroupNumber
   })), /*#__PURE__*/react.createElement("div", {
     className: `mt-6 flex flex-col ${computedView ? '' : 'ohif-disabled'}`
   }, /*#__PURE__*/react.createElement(Header, {
     title: "Computed Operation",
-    tooltip: /*#__PURE__*/react.createElement("div", null, "Operation Buttons (SUM, AVERAGE, SUBTRACT): Select the mathematical operation to be applied to the data set.", /*#__PURE__*/react.createElement("br", null), " Range Slider: Choose the numeric range within which the operation will be performed.", /*#__PURE__*/react.createElement("br", null), "Generate Button: Execute the chosen operation on the specified range of data.", ' ')
+    tooltip: /*#__PURE__*/react.createElement("div", null, "Operation Buttons (SUM, AVERAGE, SUBTRACT): Select the mathematical operation to be applied to the data set.", /*#__PURE__*/react.createElement("br", null), " Range Slider: Choose the numeric range of dimension groups within which the operation will be performed.", /*#__PURE__*/react.createElement("br", null), "Generate Button: Execute the chosen operation on the specified range of data.")
   }), /*#__PURE__*/react.createElement(ui_src/* ButtonGroup */.e2, {
-    className: `mt-2 w-full`,
+    className: "mt-2 w-full",
     separated: true
   }, /*#__PURE__*/react.createElement("button", {
     className: "w-1/2",
@@ -791,15 +1050,15 @@ const DynamicVolumeControls = ({
     onClick: () => setComputeViewMode(esm.Enums.DynamicOperatorType.SUBTRACT)
   }, esm.Enums.DynamicOperatorType.SUBTRACT.toString().toUpperCase())), /*#__PURE__*/react.createElement("div", {
     className: "mt-2 w-full"
-  }, /*#__PURE__*/react.createElement(ui_next_src/* DoubleSlider */.Jg, {
-    min: 0,
-    max: framesLength - 1,
-    step: 1,
-    defaultValue: sliderRangeValues,
-    onValueChange: handleSliderChange,
-    formatLabel: formatLabel,
-    className: "w-full"
-  })), /*#__PURE__*/react.createElement(ui_src/* Button */.$n, {
+  }, /*#__PURE__*/react.createElement(ui_next_src/* Numeric */.ew.Container, {
+    mode: "doubleRange",
+    min: 1,
+    max: numDimensionGroups,
+    values: rangeValues,
+    onChange: onDoubleRangeChange
+  }, /*#__PURE__*/react.createElement(ui_next_src/* Numeric */.ew.DoubleRange, {
+    showNumberInputs: true
+  }))), /*#__PURE__*/react.createElement(ui_src/* Button */.$n, {
     className: "mt-2 !h-[26px] !w-[115px] self-start !p-0",
     onClick: () => {
       onGenerate(computeViewMode);
@@ -807,16 +1066,16 @@ const DynamicVolumeControls = ({
   }, "Generate"))));
 };
 /* harmony default export */ const panels_DynamicVolumeControls = (DynamicVolumeControls);
-function FrameControls({
+function DimensionGroupControls({
   isPlaying,
   onPlayPauseChange,
   fps,
   minFps,
   maxFps,
   onFpsChange,
-  framesLength,
-  onFrameChange,
-  currentFrameIndex,
+  numDimensionGroups,
+  onDimensionGroupChange,
+  currentDimensionGroupNumber,
   computedView
 }) {
   const getPlayPauseIconName = () => isPlaying ? 'icon-pause' : 'icon-play';
@@ -824,21 +1083,22 @@ function FrameControls({
     className: computedView && 'ohif-disabled'
   }, /*#__PURE__*/react.createElement(Header, {
     title: "4D Controls",
-    tooltip: /*#__PURE__*/react.createElement("div", null, "Play/Pause Button: Begin or pause the animation of the 4D visualization. ", /*#__PURE__*/react.createElement("br", null), " Frame Selector: Navigate through individual frames of the 4D data. ", /*#__PURE__*/react.createElement("br", null), " FPS (Frames Per Second) Selector: Adjust the playback speed of the animation.")
+    tooltip: /*#__PURE__*/react.createElement("div", null, "Play/Pause Button: Begin or pause the animation of the 4D visualization. ", /*#__PURE__*/react.createElement("br", null), "Dimension Group Selector: Navigate through individual dimension groups of the 4D data.", ' ', /*#__PURE__*/react.createElement("br", null), "FPS (Frames Per Second) Selector: Adjust the playback speed of the animation.")
   }), /*#__PURE__*/react.createElement("div", {
     className: "mt-3 flex justify-between"
   }, /*#__PURE__*/react.createElement(ui_src/* IconButton */.K0, {
+    id: "play-pause-button",
     className: "bg-customblue-30 h-[26px] w-[58px] rounded-[4px]",
     onClick: () => onPlayPauseChange(!isPlaying)
-  }, /*#__PURE__*/react.createElement(ui_src/* Icon */.In, {
+  }, /*#__PURE__*/react.createElement(ui_next_src/* Icons */.FI.ByName, {
     name: getPlayPauseIconName(),
     className: "active:text-primary-light hover:bg-customblue-300 h-[24px] w-[24px] cursor-pointer text-white"
   })), /*#__PURE__*/react.createElement(ui_src/* InputNumber */.YI, _extends({
-    value: currentFrameIndex,
-    onChange: onFrameChange,
-    minValue: 0,
-    maxValue: framesLength - 1,
-    label: "Frame"
+    value: currentDimensionGroupNumber,
+    onChange: onDimensionGroupChange,
+    minValue: 1,
+    maxValue: numDimensionGroups,
+    label: "Group"
   }, controlClassNames)), /*#__PURE__*/react.createElement(ui_src/* InputNumber */.YI, _extends({
     value: fps,
     onChange: onFpsChange,
@@ -854,6 +1114,7 @@ function FrameControls({
 
 
 
+
 const SOPClassHandlerId = '@ohif/extension-default.sopClassHandlerModule.stack';
 function PanelGenerateImage({
   servicesManager,
@@ -869,16 +1130,15 @@ function PanelGenerateImage({
   }, cineService] = (0,ui_src/* useCine */.tq)();
   const [{
     activeViewportId
-  }] = (0,ui_src/* useViewportGrid */.ih)();
+  }] = (0,ui_next_src/* useViewportGrid */.ih)();
 
   //
-  const [timePointsRange, setTimePointsRange] = (0,react.useState)([0, 0]);
-  const [timePointsRangeToUseForGenerate, setTimePointsRangeToUseForGenerate] = (0,react.useState)([0, 0]);
+  const [dimensionGroupRange, setDimensionGroupRange] = (0,react.useState)([1, 1]);
   const [computedDisplaySet, setComputedDisplaySet] = (0,react.useState)(null);
   const [dynamicVolume, setDynamicVolume] = (0,react.useState)(null);
   const [frameRate, setFrameRate] = (0,react.useState)(20);
   const [isPlaying, setIsPlaying] = (0,react.useState)(isCineEnabled);
-  const [timePointRendered, setTimePointRendered] = (0,react.useState)(null);
+  const [dimensionGroupNumberRendered, setDimensionGroupNumberRendered] = (0,react.useState)(null);
   const [displayingComputed, setDisplayingComputed] = (0,react.useState)(false);
 
   //
@@ -893,9 +1153,8 @@ function PanelGenerateImage({
         if (volumeData.volume?.isDynamicVolume()) {
           setDynamicVolume(volumeData.volume);
           uuidDynamicVolume.current = volumeData.displaySetInstanceUID;
-          const newRange = [1, volumeData.volume.numTimePoints];
-          setTimePointsRange(newRange);
-          setTimePointsRangeToUseForGenerate(newRange);
+          const newRange = [1, volumeData.volume.numDimensionGroups];
+          setDimensionGroupRange(newRange);
         }
       });
     };
@@ -914,15 +1173,15 @@ function PanelGenerateImage({
     };
   }, [cornerstoneViewportService, cineService, servicesManager.services.cineService]);
   (0,react.useEffect)(() => {
-    const evt = esm.Enums.Events.DYNAMIC_VOLUME_TIME_POINT_INDEX_CHANGED;
+    const evt = esm.Enums.Events.DYNAMIC_VOLUME_DIMENSION_GROUP_CHANGED;
     const callback = evt => {
-      setTimePointRendered(evt.detail.timePointIndex);
+      setDimensionGroupNumberRendered(evt.detail.dimensionGroupNumber);
     };
     esm.eventTarget.addEventListener(evt, callback);
     return () => {
       esm.eventTarget.removeEventListener(evt, callback);
     };
-  }, [cornerstoneViewportService]);
+  }, []);
   (0,react.useEffect)(() => {
     const displaySetUIDs = viewportGridService.getDisplaySetsUIDsForViewport(activeViewportId);
     if (!displaySetUIDs?.length) {
@@ -939,9 +1198,7 @@ function PanelGenerateImage({
     }
     setDynamicVolume(dynamicVolume);
     uuidDynamicVolume.current = dynamicVolumeDisplaySet.displaySetInstanceUID;
-    const newRange = [1, dynamicVolume.numTimePoints];
-    setTimePointsRange(newRange);
-    setTimePointsRangeToUseForGenerate(newRange);
+    setDimensionGroupRange([1, dynamicVolume.numDimensionGroups]);
   }, [activeViewportId, viewportGridService, displaySetService, cornerstoneViewportService, cineService]);
   function renderGeneratedImage(displaySet) {
     commandsManager.runCommand('swapDynamicWithComputedDisplaySet', {
@@ -966,12 +1223,13 @@ function PanelGenerateImage({
         volumeId: computedVolumeId
       });
     }
-    const [start, end] = timePointsRangeToUseForGenerate;
+    const [start, end] = dimensionGroupRange;
+    // from start to end, with steps of 1
     const frameNumbers = Array.from({
       length: end - start + 1
-    }, (_, i) => i + start - 1);
+    }, (_, i) => start + i);
     const options = {
-      frameNumbers: operationName === 'SUBTRACT' ? [start, end - 1] : frameNumbers,
+      dimensionGroupNumbers: operationName === 'SUBTRACT' ? [start, end] : frameNumbers,
       targetVolume: computedVolume
     };
     dist_esm.utilities.dynamicVolume.updateVolumeFromTimeData(dynamicVolume, operationName, options);
@@ -1032,31 +1290,22 @@ function PanelGenerateImage({
     handleStop();
     handlePlay();
   };
-  function handleSliderChange(newValues) {
-    if (newValues[0] === timePointsRangeToUseForGenerate[0] && newValues[1] === timePointsRangeToUseForGenerate[1]) {
-      return;
-    }
-    setTimePointsRangeToUseForGenerate(newValues);
-  }
-  if (!dynamicVolume || timePointsRange.length === 0) {
-    return null;
-  }
   return /*#__PURE__*/react.createElement(panels_DynamicVolumeControls, {
     fps: frameRate,
     isPlaying: isPlaying,
     onPlayPauseChange: onPlayPauseChange,
     minFps: 1,
     maxFps: 50,
-    currentFrameIndex: timePointRendered,
     onFpsChange: handleSetFrameRate,
-    framesLength: timePointsRange[1],
-    onFrameChange: timePointIndex => {
-      dynamicVolume.timePointIndex = timePointIndex;
+    currentDimensionGroupNumber: dimensionGroupNumberRendered,
+    numDimensionGroups: dynamicVolume?.numDimensionGroups || 1,
+    onDimensionGroupChange: dimensionGroupNumber => {
+      dynamicVolume.dimensionGroupNumber = dimensionGroupNumber;
     },
     onGenerate: onGenerateImage,
     onDynamicClick: displayingComputed ? () => renderDynamicImage(computedDisplaySet) : null,
-    onDoubleRangeChange: handleSliderChange,
-    initialRangeValues: timePointsRangeToUseForGenerate
+    onDoubleRangeChange: setDimensionGroupRange,
+    rangeValues: dimensionGroupRange
   });
 }
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dynamic-volume/src/panels/DynamicDataPanel.tsx
@@ -1081,7 +1330,7 @@ function DynamicDataPanel({
 function WorkflowPanel({
   servicesManager
 }) {
-  const ProgressDropdownWithService = servicesManager.services.customizationService.getCustomization('progressDropdownWithServiceComponent').component;
+  const ProgressDropdownWithService = servicesManager.services.customizationService.getCustomization('progressDropdownWithServiceComponent');
   return /*#__PURE__*/React.createElement("div", {
     "data-cy": 'workflow-panel',
     className: "bg-secondary-dark mb-1 px-3 py-4"
@@ -1097,8 +1346,8 @@ function WorkflowPanel({
 
 
 
-// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 105 modules
-var cornerstone_src = __webpack_require__(11185);
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 117 modules
+var cornerstone_src = __webpack_require__(7490);
 ;// CONCATENATED MODULE: ../../../extensions/cornerstone-dynamic-volume/src/panels/DynamicExport.tsx
 
 

package/dist/1919.css

@@ -0,0 +1,3 @@
+.dicom-tag-browser-table{margin-left:auto;margin-right:auto}.dicom-tag-browser-table-wrapper{overflow-x:scroll}.dicom-tag-browser-table tr{border-top:1px solid #ddd;color:#fff;padding-left:10px;padding-right:10px;white-space:nowrap}.stick{overflow:clip;position:sticky}.dicom-tag-browser-content{overflow:hidden;padding-bottom:50px;width:100%}.dicom-tag-browser-instance-range .range{height:20px}.dicom-tag-browser-instance-range{padding:20px 0}.dicom-tag-browser-table td.dicom-tag-browser-table-center{text-align:center}.dicom-tag-browser-table th{color:"#20A5D6";padding-left:10px;padding-right:10px;text-align:center}.dicom-tag-browser-table th.dicom-tag-browser-table-left{text-align:left}
+.chrome-picker{background:#090c29!important}
+.dicom-upload-drop-area-border-dash{background-image:repeating-linear-gradient(90deg,#7bb2ce 0,#7bb2ce 50%,#0000 0,#0000),repeating-linear-gradient(90deg,#7bb2ce 0,#7bb2ce 50%,#0000 0,#0000),repeating-linear-gradient(180deg,#7bb2ce 0,#7bb2ce 50%,#0000 0,#0000),repeating-linear-gradient(180deg,#7bb2ce 0,#7bb2ce 50%,#0000 0,#0000);background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:20px 3px,20px 3px,3px 20px,3px 20px}