@ohif/app 3.13.0-beta.60 → 3.13.0-beta.61

package/dist/{1608.bundle.e4aadbf17d38143dacdf.js → 1608.bundle.26306ea38618db59eff7.js}

@@ -17,10 +17,10 @@ var react = __webpack_require__(86326);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
 var prop_types = __webpack_require__(97598);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 3084 modules
-var src = __webpack_require__(15953);
-// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 194 modules
-var cornerstone_src = __webpack_require__(24688);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 3085 modules
+var src = __webpack_require__(564);
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 197 modules
+var cornerstone_src = __webpack_require__(87166);
 ;// ../../../extensions/cornerstone-dicom-rt/src/utils/promptHydrateRT.ts
 
 function promptHydrateRT({

package/dist/{1933.bundle.0055c536e1392867e57c.js → 1933.bundle.82822511235016082da4.js}

@@ -18,8 +18,8 @@ const id = package_namespaceObject.UU;
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
 var react = __webpack_require__(86326);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 3084 modules
-var src = __webpack_require__(15953);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 3085 modules
+var src = __webpack_require__(564);
 // EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 140 modules
 var default_src = __webpack_require__(62851);
 // EXTERNAL MODULE: ../../core/src/index.ts + 69 modules

package/dist/{2701.bundle.b591cf6385ed53ed6093.js → 2701.bundle.6873805ddfdccc7a8b1e.js}

@@ -23,10 +23,10 @@ var src = __webpack_require__(42356);
 var dicomSRModule = __webpack_require__(76654);
 // EXTERNAL MODULE: ../../../extensions/cornerstone-dicom-sr/src/utils/createReferencedImageDisplaySet.ts
 var createReferencedImageDisplaySet = __webpack_require__(92643);
-// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 194 modules
-var cornerstone_src = __webpack_require__(24688);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 3084 modules
-var ui_next_src = __webpack_require__(15953);
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 197 modules
+var cornerstone_src = __webpack_require__(87166);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 3085 modules
+var ui_next_src = __webpack_require__(564);
 // EXTERNAL MODULE: ../../core/src/contextProviders/SystemProvider.tsx
 var SystemProvider = __webpack_require__(83641);
 ;// ../../../extensions/cornerstone-dicom-sr/src/components/OHIFCornerstoneSRMeasurementViewport.tsx

package/dist/{2851.bundle.c5202066974b96955c28.js → 2851.bundle.123d7f6fa1186ac1308a.js}

@@ -8,7 +8,7 @@
 /* harmony export */   A: () => (/* binding */ MoreDropdownMenu)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(86326);
-/* harmony import */ var _ohif_ui_next__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(15953);
+/* harmony import */ var _ohif_ui_next__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(564);
 /* harmony import */ var _ohif_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(42356);
 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); }
 
@@ -123,8 +123,8 @@ __webpack_require__.d(__webpack_exports__, {
 
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
 var react = __webpack_require__(86326);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 3084 modules
-var src = __webpack_require__(15953);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 3085 modules
+var src = __webpack_require__(564);
 // EXTERNAL MODULE: ../../core/src/index.ts + 69 modules
 var core_src = __webpack_require__(42356);
 // EXTERNAL MODULE: ../../../node_modules/react-router-dom/dist/index.js
@@ -618,7 +618,7 @@ function _findTabAndStudyOfDisplaySet(displaySetInstanceUID, tabs, currentTabNam
 /* harmony export */   T: () => (/* binding */ PanelStudyBrowserHeader)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(86326);
-/* harmony import */ var _ohif_ui_next__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(15953);
+/* harmony import */ var _ohif_ui_next__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(564);
 
 
 
@@ -3789,8 +3789,8 @@ var react = __webpack_require__(86326);
 // EXTERNAL MODULE: ../../../node_modules/prop-types/index.js
 var prop_types = __webpack_require__(97598);
 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 3084 modules
-var ui_next_src = __webpack_require__(15953);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 3085 modules
+var ui_next_src = __webpack_require__(564);
 // EXTERNAL MODULE: ./state/index.js + 1 modules
 var state = __webpack_require__(45981);
 // EXTERNAL MODULE: ../../../node_modules/react-router-dom/dist/index.js
@@ -10604,8 +10604,8 @@ function AboutModalDefault() {
     name
   } = (0,browser_detect_es5/* default */.A)();
   const browser = `${name[0].toUpperCase()}${name.substr(1)} ${version}`;
-  const versionNumber = "3.13.0-beta.60";
-  const commitHash = "eede569a88ed6a3177bbdea8552dfb93ca13cac5";
+  const versionNumber = "3.13.0-beta.61";
+  const commitHash = "8fc0dc16e97f3262fdac902ecf2d7c20cb8f78cc";
   const [main, beta] = versionNumber.split('-');
   return /*#__PURE__*/react.createElement(ui_next_src/* AboutModal */.VTU, {
     className: "w-[400px]"

package/dist/{3138.bundle.5ed994e6e0ff7c720a75.js → 3138.bundle.bc81953147e0c5f3b23f.js}

@@ -671,8 +671,8 @@ const commandsModule = ({
 /* harmony default export */ const src_commandsModule = (commandsModule);
 // EXTERNAL MODULE: ../../../node_modules/react/index.js
 var react = __webpack_require__(86326);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 3084 modules
-var ui_next_src = __webpack_require__(15953);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 3085 modules
+var ui_next_src = __webpack_require__(564);
 ;// ../../../extensions/cornerstone-dynamic-volume/src/panels/DynamicVolumeControls.tsx
 
 
@@ -1121,8 +1121,8 @@ function WorkflowPanel({
 
 // EXTERNAL MODULE: ../../../extensions/default/src/index.ts + 140 modules
 var default_src = __webpack_require__(62851);
-// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 194 modules
-var cornerstone_src = __webpack_require__(24688);
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 197 modules
+var cornerstone_src = __webpack_require__(87166);
 ;// ../../../extensions/cornerstone-dynamic-volume/src/panels/DynamicExport.tsx
 
 

package/dist/{3461.bundle.54f8d64ed1965c14ec4c.js → 3461.bundle.f65494e79c37a14bc206.js}

@@ -72,8 +72,8 @@ var react = __webpack_require__(86326);
 var src = __webpack_require__(42356);
 // EXTERNAL MODULE: ../../i18n/src/index.js + 286 modules
 var i18n_src = __webpack_require__(89010);
-// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 194 modules
-var cornerstone_src = __webpack_require__(24688);
+// EXTERNAL MODULE: ../../../extensions/cornerstone/src/index.tsx + 197 modules
+var cornerstone_src = __webpack_require__(87166);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/adapters/dist/esm/index.js + 72 modules
 var esm = __webpack_require__(64579);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js

package/dist/{147.bundle.173b4a11960d03a3b5b0.js → 3754.bundle.fd4b67c2a29c4bc4a840.js}

@@ -1,7 +1,7 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[147],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[3754],{
 
-/***/ 30147
+/***/ 33754
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 // ESM COMPAT FLAG
@@ -18,8 +18,8 @@ var react = __webpack_require__(86326);
 var esm = __webpack_require__(15327);
 // EXTERNAL MODULE: ../../core/src/index.ts + 69 modules
 var src = __webpack_require__(42356);
-// EXTERNAL MODULE: ../../ui-next/src/index.ts + 3084 modules
-var ui_next_src = __webpack_require__(15953);
+// EXTERNAL MODULE: ../../ui-next/src/index.ts + 3085 modules
+var ui_next_src = __webpack_require__(564);
 // EXTERNAL MODULE: ../../../extensions/cornerstone/src/state.ts
 var state = __webpack_require__(71353);
 ;// ../../../extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.css
@@ -132,6 +132,456 @@ CornerstoneImageScrollbar.propTypes = {
   servicesManager: (prop_types_default()).object.isRequired
 };
 /* harmony default export */ const ViewportImageScrollbar = (CornerstoneImageScrollbar);
+;// ../../../extensions/cornerstone/src/Viewport/Overlays/ViewportSliceProgressScrollbar/helpers.ts
+
+function getImageIndexFromEvent(event) {
+  const {
+    imageIndex,
+    newImageIdIndex = imageIndex,
+    imageIdIndex
+  } = event.detail;
+  return newImageIdIndex ?? imageIdIndex;
+}
+function getViewportImageIds(viewportData) {
+  if (!viewportData?.data?.length) {
+    return [];
+  }
+  const firstData = viewportData.data[0];
+  const volumeImageIds = firstData.volume?.imageIds;
+  const datumImageIds = firstData.imageIds;
+  return volumeImageIds || datumImageIds || [];
+}
+function isProgressFullMode(viewportData, viewport) {
+  if (!viewportData || !viewport || viewport instanceof esm.VolumeViewport3D) {
+    return false;
+  }
+  if (viewportData.viewportType === esm.Enums.ViewportType.STACK) {
+    return true;
+  }
+  if (viewportData.viewportType === esm.Enums.ViewportType.ORTHOGRAPHIC) {
+    return !!viewport.isInAcquisitionPlane?.();
+  }
+  return false;
+}
+function getImageIdFromCacheEvent(event) {
+  const detail = event?.detail;
+  return detail?.imageId || detail?.image?.imageId || detail?.cachedImage?.imageId;
+}
+;// ../../../extensions/cornerstone/src/Viewport/Overlays/ViewportSliceProgressScrollbar/hooks.ts
+
+
+
+
+function useProgressScrollbarMode({
+  viewportData,
+  viewportId,
+  element,
+  cornerstoneViewportService
+}) {
+  const [isFullMode, setIsFullMode] = (0,react.useState)(false);
+  const lastViewPlaneNormalRef = (0,react.useRef)(null);
+
+  /**
+   * Tracks whether this viewport should render full progress UI (stack or acquisition-plane
+   * orthographic volume) versus minimal UI. We compute once on setup and recompute on each
+   * CAMERA_MODIFIED event so stack->MPR transitions and acquisition-plane changes are reflected
+   * immediately.
+   */
+  (0,react.useEffect)(() => {
+    if (!viewportData) {
+      return;
+    }
+    const updateMode = () => {
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+      const viewportImageData = viewport?.getImageData?.();
+      const nextViewPlaneNormal = viewport?.getCamera?.()?.viewPlaneNormal;
+      // Do not update the lastViewPlaneNormalRef until we have a valid viewportImageData.
+      // Without viewportImageData, the viewport is not fully initialized and the isAcquisitionPlane
+      // check will not be accurate.
+      if (viewportImageData && nextViewPlaneNormal) {
+        lastViewPlaneNormalRef.current = [...nextViewPlaneNormal];
+      }
+      const nextMode = isProgressFullMode(viewportData, viewport);
+      setIsFullMode(prevMode => prevMode === nextMode ? prevMode : nextMode);
+    };
+    updateMode();
+    const onCameraModified = () => {
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+      const nextViewPlaneNormal = viewport?.getCamera?.()?.viewPlaneNormal;
+      const previousViewPlaneNormal = lastViewPlaneNormalRef.current;
+
+      // Ignore camera updates that keep the same orientation (pan/zoom/scroll).
+      if (nextViewPlaneNormal && previousViewPlaneNormal) {
+        if (esm.utilities.isEqual(nextViewPlaneNormal, previousViewPlaneNormal)) {
+          return;
+        }
+      }
+      updateMode();
+    };
+    element.addEventListener(esm.Enums.Events.CAMERA_MODIFIED, onCameraModified);
+    return () => {
+      element.removeEventListener(esm.Enums.Events.CAMERA_MODIFIED, onCameraModified);
+    };
+  }, [viewportData, viewportId, cornerstoneViewportService, element]);
+  return isFullMode;
+}
+function useViewportSliceSync({
+  viewportData,
+  viewportId,
+  element,
+  cornerstoneViewportService,
+  setImageSliceData
+}) {
+  /**
+   * Keeps shared slice state in sync: first initialize from the live viewport snapshot, then
+   * subscribe to navigation/render events for incremental updates while users scroll.
+   */
+  (0,react.useEffect)(() => {
+    if (!viewportData) {
+      return;
+    }
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    if (viewport && !(viewport instanceof esm.VolumeViewport3D)) {
+      try {
+        const currentImageIndex = viewport.getCurrentImageIdIndex();
+        const currentNumberOfSlices = viewport.getNumberOfSlices();
+        setImageSliceData({
+          imageIndex: currentImageIndex,
+          numberOfSlices: currentNumberOfSlices
+        });
+      } catch (error) {
+        console.warn(error);
+      }
+    }
+    const {
+      viewportType
+    } = viewportData;
+    const eventId = viewportType === esm.Enums.ViewportType.STACK && esm.Enums.Events.STACK_NEW_IMAGE || viewportType === esm.Enums.ViewportType.ORTHOGRAPHIC && esm.Enums.Events.VOLUME_NEW_IMAGE || esm.Enums.Events.IMAGE_RENDERED;
+    const updateIndex = event => {
+      const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+      if (!viewport || viewport instanceof esm.VolumeViewport3D) {
+        return;
+      }
+      const nextImageIndex = getImageIndexFromEvent(event);
+      if (nextImageIndex == null) {
+        return;
+      }
+      const nextNumberOfSlices = viewport.getNumberOfSlices();
+      setImageSliceData({
+        imageIndex: nextImageIndex,
+        numberOfSlices: nextNumberOfSlices
+      });
+    };
+    element.addEventListener(eventId, updateIndex);
+    return () => {
+      element.removeEventListener(eventId, updateIndex);
+    };
+  }, [viewportData, element, viewportId, cornerstoneViewportService, setImageSliceData]);
+}
+function useLoadedSliceBytes({
+  isFullMode,
+  numberOfSlices,
+  viewportData,
+  imageIds,
+  imageIdToIndex,
+  loadedBatchIntervalMs
+}) {
+  const loadedState = (0,ui_next_src/* useByteArray */.Pcq)(numberOfSlices || 0, loadedBatchIntervalMs);
+  const {
+    resetWith: resetLoaded,
+    setByte: setLoadedByte,
+    clearByte: clearLoadedByte
+  } = loadedState;
+
+  /**
+   * Keeps the loaded byte array in sync with Cornerstone cache: seed from cache whenever stack /
+   * mode / slice count changes, then subscribe so cache add/remove updates stay incremental.
+   * Seeding runs immediately before registering listeners in the same effect.
+   */
+  (0,react.useEffect)(() => {
+    if (isFullMode && numberOfSlices) {
+      resetLoaded(bytes => {
+        for (let i = 0; i < bytes.length; i++) {
+          const imageId = imageIds[i];
+          if (imageId && esm.cache.isLoaded(imageId)) {
+            bytes[i] = 1;
+          }
+        }
+      });
+    }
+    if (!isFullMode || !viewportData) {
+      return;
+    }
+    const markLoaded = event => {
+      const imageId = getImageIdFromCacheEvent(event);
+      if (!imageId) {
+        return;
+      }
+      const index = imageIdToIndex.get(imageId);
+      if (index !== undefined) {
+        setLoadedByte(index);
+      }
+    };
+    const markRemoved = event => {
+      const imageId = getImageIdFromCacheEvent(event);
+      if (!imageId) {
+        return;
+      }
+      const index = imageIdToIndex.get(imageId);
+      if (index !== undefined) {
+        clearLoadedByte(index);
+      }
+    };
+    esm.eventTarget.addEventListener(esm.Enums.Events.IMAGE_CACHE_IMAGE_ADDED, markLoaded);
+    esm.eventTarget.addEventListener(esm.Enums.Events.IMAGE_CACHE_IMAGE_REMOVED, markRemoved);
+    return () => {
+      esm.eventTarget.removeEventListener(esm.Enums.Events.IMAGE_CACHE_IMAGE_ADDED, markLoaded);
+      esm.eventTarget.removeEventListener(esm.Enums.Events.IMAGE_CACHE_IMAGE_REMOVED, markRemoved);
+    };
+  }, [imageIds, isFullMode, numberOfSlices, viewportData, imageIdToIndex, resetLoaded, setLoadedByte, clearLoadedByte]);
+  return loadedState;
+}
+function useViewedSliceBytes({
+  isFullMode,
+  numberOfSlices,
+  imageIndex,
+  imageIds,
+  imageIdToIndex,
+  viewedDwellMs,
+  viewedDataService
+}) {
+  const viewedState = (0,ui_next_src/* useByteArray */.Pcq)(numberOfSlices || 0);
+  const {
+    resetWith: resetViewed,
+    setByte: setViewedByte
+  } = viewedState;
+
+  /**
+   * Keeps the viewed byte array in sync with the global viewed-data store: seed from the store
+   * whenever stack / mode / slice count changes, then subscribe so `markDataViewed` updates stay
+   * incremental. Seeding runs immediately before registering the listener in the same effect.
+   */
+  (0,react.useEffect)(() => {
+    if (isFullMode && numberOfSlices) {
+      resetViewed(bytes => {
+        for (let i = 0; i < bytes.length; i++) {
+          const imageId = imageIds[i];
+          if (imageId && viewedDataService?.isDataViewed(imageId)) {
+            bytes[i] = 1;
+          }
+        }
+      });
+    }
+    if (!viewedDataService) {
+      return;
+    }
+    const subscription = viewedDataService.subscribeViewedDataChanges(({
+      viewedDataId,
+      viewedDataCleared
+    }) => {
+      if (!isFullMode || !numberOfSlices) {
+        return;
+      }
+      if (viewedDataCleared) {
+        resetViewed(bytes => {
+          bytes.fill(0);
+        });
+        return;
+      }
+      const index = imageIdToIndex.get(viewedDataId);
+      if (index !== undefined) {
+        setViewedByte(index);
+      }
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [imageIds, isFullMode, numberOfSlices, imageIdToIndex, resetViewed, setViewedByte, viewedDataService]);
+
+  /**
+   * Marks slices as viewed in full mode. With `viewedDwellMs === 0`, marking is immediate on
+   * index change; otherwise a dwell timer is used and cleaned up on subsequent changes/unmount.
+   */
+  (0,react.useEffect)(() => {
+    if (!isFullMode || !numberOfSlices) {
+      return;
+    }
+    const markViewed = targetIndex => {
+      setViewedByte(targetIndex);
+      const imageId = imageIds[targetIndex];
+      if (imageId) {
+        viewedDataService?.markDataViewed(imageId);
+      }
+    };
+    if (viewedDwellMs === 0) {
+      markViewed(imageIndex || 0);
+      return;
+    }
+    const timerId = window.setTimeout(() => {
+      markViewed(imageIndex || 0);
+    }, viewedDwellMs);
+    return () => {
+      window.clearTimeout(timerId);
+    };
+  }, [isFullMode, numberOfSlices, imageIndex, imageIds, setViewedByte, viewedDwellMs, viewedDataService]);
+  return viewedState;
+}
+;// ../../../extensions/cornerstone/src/Viewport/Overlays/ViewportSliceProgressScrollbar/ViewportSliceProgressScrollbar.tsx
+
+
+
+
+
+
+function ViewportSliceProgressScrollbar({
+  viewportData,
+  viewportId,
+  element,
+  imageSliceData,
+  setImageSliceData,
+  servicesManager
+}) {
+  const {
+    cineService,
+    cornerstoneViewportService,
+    customizationService,
+    viewedDataService
+  } = servicesManager.services;
+  const showLoadedEndpoints = customizationService.getCustomization('viewportScrollbar.showLoadedEndpoints') !== false;
+  const showLoadedFill = customizationService.getCustomization('viewportScrollbar.showLoadedFill') !== false;
+  const showViewedFill = customizationService.getCustomization('viewportScrollbar.showViewedFill') !== false;
+  const showLoadingPattern = customizationService.getCustomization('viewportScrollbar.showLoadingPattern') !== false;
+  const viewedDwellMsRaw = customizationService.getCustomization('viewportScrollbar.viewedDwellMs');
+  const loadedBatchIntervalMsRaw = customizationService.getCustomization('viewportScrollbar.loadedBatchIntervalMs');
+  const viewedDwellMs = typeof viewedDwellMsRaw === 'number' && viewedDwellMsRaw >= 0 ? viewedDwellMsRaw : 0;
+  const loadedBatchIntervalMs = typeof loadedBatchIntervalMsRaw === 'number' && loadedBatchIntervalMsRaw >= 0 ? loadedBatchIntervalMsRaw : 200;
+  const {
+    numberOfSlices,
+    imageIndex
+  } = imageSliceData;
+  const imageIds = (0,react.useMemo)(() => getViewportImageIds(viewportData), [viewportData]);
+  const imageIdToIndex = (0,react.useMemo)(() => {
+    const map = new Map();
+    for (let i = 0; i < imageIds.length; i++) {
+      const imageId = imageIds[i];
+      if (imageId) {
+        map.set(imageId, i);
+      }
+    }
+    return map;
+  }, [imageIds]);
+  const isFullMode = useProgressScrollbarMode({
+    viewportData,
+    viewportId,
+    element,
+    cornerstoneViewportService
+  });
+  useViewportSliceSync({
+    viewportData,
+    viewportId,
+    element,
+    cornerstoneViewportService,
+    setImageSliceData
+  });
+  const {
+    bytes: loadedBytes,
+    version: loadedVersion,
+    isFull: isFullyLoaded
+  } = useLoadedSliceBytes({
+    isFullMode,
+    numberOfSlices,
+    viewportData,
+    imageIds,
+    imageIdToIndex,
+    loadedBatchIntervalMs
+  });
+  const {
+    bytes: viewedBytes,
+    version: viewedVersion
+  } = useViewedSliceBytes({
+    isFullMode,
+    numberOfSlices,
+    imageIndex,
+    imageIds,
+    imageIdToIndex,
+    viewedDwellMs,
+    viewedDataService
+  });
+  const onScrollbarValueChange = targetImageIndex => {
+    const viewport = cornerstoneViewportService.getCornerstoneViewport(viewportId);
+    if (!viewport || viewport instanceof esm.VolumeViewport3D) {
+      return;
+    }
+    const {
+      isCineEnabled
+    } = cineService.getState();
+    if (isCineEnabled) {
+      cineService.stopClip(element, {
+        viewportId
+      });
+      cineService.setCine({
+        id: viewportId,
+        frameRate: undefined,
+        isPlaying: false
+      });
+    }
+    esm.utilities.jumpToSlice(viewport.element, {
+      imageIndex: targetImageIndex,
+      debounceLoading: true
+    });
+  };
+  const isLoading = isFullMode && showLoadingPattern ? !isFullyLoaded : false;
+  if (!numberOfSlices || numberOfSlices <= 1) {
+    return null;
+  }
+  return /*#__PURE__*/react.createElement("div", {
+    style: {
+      position: 'absolute',
+      right: 0,
+      top: 0,
+      height: '100%',
+      padding: '8px 5px',
+      zIndex: 10
+    }
+  }, /*#__PURE__*/react.createElement("div", {
+    style: {
+      position: 'relative',
+      height: '100%',
+      width: '11px'
+    }
+  }, /*#__PURE__*/react.createElement(ui_next_src/* SmartScrollbar */.IN7, {
+    className: "absolute inset-0",
+    value: imageIndex || 0,
+    total: numberOfSlices,
+    onValueChange: onScrollbarValueChange,
+    isLoading: isLoading,
+    enableKeyboardNavigation: false,
+    "aria-label": "Image navigation scrollbar",
+    indicator: customizationService.getCustomization('viewportScrollbar.indicator')
+  }, /*#__PURE__*/react.createElement(ui_next_src/* SmartScrollbarTrack */.dLR, null, isFullMode && showLoadedFill && /*#__PURE__*/react.createElement(ui_next_src/* SmartScrollbarFill */.pSN, {
+    marked: loadedBytes,
+    version: loadedVersion,
+    className: "bg-neutral/25",
+    loadingClassName: "bg-neutral/50"
+  }), isFullMode && showViewedFill && /*#__PURE__*/react.createElement(ui_next_src/* SmartScrollbarFill */.pSN, {
+    marked: viewedBytes,
+    version: viewedVersion,
+    className: "bg-primary/35",
+    loadingClassName: "bg-primary/35"
+  })), /*#__PURE__*/react.createElement(ui_next_src/* SmartScrollbarIndicator */.RY_, null), isFullMode && showLoadedEndpoints && /*#__PURE__*/react.createElement(ui_next_src/* SmartScrollbarEndpoints */.ult, {
+    marked: loadedBytes,
+    version: loadedVersion
+  }))));
+}
+ViewportSliceProgressScrollbar.propTypes = {
+  viewportData: (prop_types_default()).object,
+  viewportId: (prop_types_default()).string.isRequired,
+  element: prop_types_default().instanceOf(Element),
+  imageSliceData: (prop_types_default()).object.isRequired,
+  setImageSliceData: (prop_types_default()).func.isRequired,
+  servicesManager: (prop_types_default()).object.isRequired
+};
+/* harmony default export */ const ViewportSliceProgressScrollbar_ViewportSliceProgressScrollbar = (ViewportSliceProgressScrollbar);
 // EXTERNAL MODULE: ../../../node_modules/gl-matrix/esm/index.js + 1 modules
 var gl_matrix_esm = __webpack_require__(3823);
 // EXTERNAL MODULE: ../../../node_modules/@cornerstonejs/tools/dist/esm/index.js
@@ -496,7 +946,7 @@ function OverlayItem(props) {
   }, label ? /*#__PURE__*/react.createElement("span", {
     className: "mr-1 shrink-0"
   }, label) : null, /*#__PURE__*/react.createElement("span", {
-    className: "ml-0 mr-2 shrink-0"
+    className: "ml-0 shrink-0"
   }, value));
 }
 
@@ -773,6 +1223,7 @@ ViewportImageSliceLoadingIndicator.propTypes = {
 
 
 
+
 function CornerstoneOverlays(props) {
   const {
     viewportId,
@@ -781,7 +1232,8 @@ function CornerstoneOverlays(props) {
     servicesManager
   } = props;
   const {
-    cornerstoneViewportService
+    cornerstoneViewportService,
+    customizationService
   } = servicesManager.services;
   const [imageSliceData, setImageSliceData] = (0,react.useState)({
     imageIndex: 0,
@@ -810,9 +1262,18 @@ function CornerstoneOverlays(props) {
       return null;
     }
   }
+  const viewportScrollbarVariant = customizationService.getCustomization('viewportScrollbar.variant');
+  const useProgressScrollbar = viewportScrollbarVariant !== 'legacy';
   return /*#__PURE__*/react.createElement("div", {
     className: "noselect"
-  }, /*#__PURE__*/react.createElement(ViewportImageScrollbar, {
+  }, useProgressScrollbar ? /*#__PURE__*/react.createElement(ViewportSliceProgressScrollbar_ViewportSliceProgressScrollbar, {
+    viewportId: viewportId,
+    viewportData: viewportData,
+    element: element,
+    imageSliceData: imageSliceData,
+    setImageSliceData: setImageSliceData,
+    servicesManager: servicesManager
+  }) : /*#__PURE__*/react.createElement(ViewportImageScrollbar, {
     viewportId: viewportId,
     viewportData: viewportData,
     element: element,

package/dist/{4202.bundle.850a7c7c011800b3daea.js → 4202.bundle.4fcd0de412907efd5b53.js}

@@ -11,8 +11,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(97598);
 /* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(86326);
-/* harmony import */ var _ohif_ui_next__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(15953);
-/* harmony import */ var _ohif_extension_cornerstone__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(24688);
+/* harmony import */ var _ohif_ui_next__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(564);
+/* harmony import */ var _ohif_extension_cornerstone__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(87166);
 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); }