@ohif/app 3.10.0-beta.91 → 3.10.0-beta.92

package/dist/{1919.bundle.f2354707a16dbadd6c36.js → 1919.bundle.51215a737c42fc41be2e.js}

@@ -296,8 +296,8 @@ const SOPClassHandlerName = 'dynamic-volume';
 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 + 94 modules
-var dist_esm = __webpack_require__(75851);
+// 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
 
 
@@ -970,7 +970,7 @@ const Header = ({
   className: "text-primary-active h-[14px] w-[14px]"
 }))), /*#__PURE__*/react.createElement(ui_next_src/* TooltipContent */.ZI, {
   sideOffset: 4,
-  className: "max-w-xs p-2 bg-primary-dark text-white"
+  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));
@@ -983,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, {
@@ -1021,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
@@ -1033,14 +1028,14 @@ 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",
     separated: true
@@ -1055,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);
@@ -1071,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';
@@ -1088,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_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,
@@ -1137,13 +1133,12 @@ function PanelGenerateImage({
   }] = (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);
 
   //
@@ -1158,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);
         }
       });
     };
@@ -1179,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) {
@@ -1204,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', {
@@ -1231,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);
@@ -1297,28 +1290,22 @@ function PanelGenerateImage({
     handleStop();
     handlePlay();
   };
-  function handleSliderChange(newValues) {
-    if (newValues[0] === timePointsRangeToUseForGenerate[0] && newValues[1] === timePointsRangeToUseForGenerate[1]) {
-      return;
-    }
-    setTimePointsRangeToUseForGenerate(newValues);
-  }
   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