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

package/dist/{147.bundle.37d627289453cb6c3937.js → 3754.bundle.fd4b67c2a29c4bc4a840.js}

@@ -1,8 +1,8 @@
 "use strict";
-(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[147],{
+(globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[3754],{
 
-/***/ 30147:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+/***/ 33754
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 // ESM COMPAT FLAG
 __webpack_require__.r(__webpack_exports__);
@@ -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 + 3075 modules
-var ui_next_src = __webpack_require__(12517);
+// 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
@@ -140,6 +590,7 @@ var dist_esm = __webpack_require__(4667);
 var moment = __webpack_require__(14867);
 var moment_default = /*#__PURE__*/__webpack_require__.n(moment);
 ;// ../../../extensions/cornerstone/src/Viewport/Overlays/utils.ts
+/* unused harmony import specifier */ var metaData;
 
 
 
@@ -248,14 +699,11 @@ function CustomizableViewportOverlay({
     toolGroupService,
     displaySetService
   } = servicesManager.services;
-  const [voi, setVOI] = (0,react.useState)({
-    windowCenter: null,
-    windowWidth: null
-  });
   const [scale, setScale] = (0,react.useState)(1);
   const [annotationState, setAnnotationState] = (0,react.useState)(0);
   const {
-    isViewportBackgroundLight: isLight
+    isViewportBackgroundLight: isLight,
+    windowLevel: voi
   } = (0,hooks/* useViewportRendering */.eH)(viewportId);
   const {
     imageIndex
@@ -288,36 +736,6 @@ function CustomizableViewportOverlay({
       referenceInstance
     };
   }, [viewportData, viewportId, instanceNumber, cornerstoneViewportService]);
-
-  /**
-   * Updating the VOI when the viewport changes its voi
-   */
-  (0,react.useEffect)(() => {
-    const updateVOI = eventDetail => {
-      const {
-        range
-      } = eventDetail.detail;
-      if (!range) {
-        return;
-      }
-      const {
-        lower,
-        upper
-      } = range;
-      const {
-        windowWidth,
-        windowCenter
-      } = esm.utilities.windowLevel.toWindowLevel(lower, upper);
-      setVOI({
-        windowCenter,
-        windowWidth
-      });
-    };
-    element.addEventListener(esm.Enums.Events.VOI_MODIFIED, updateVOI);
-    return () => {
-      element.removeEventListener(esm.Enums.Events.VOI_MODIFIED, updateVOI);
-    };
-  }, [viewportId, viewportData, voi, element]);
   const annotationModified = (0,react.useCallback)(evt => {
     if (evt.detail.annotation.metadata.toolName === dist_esm.UltrasoundPleuraBLineTool.toolName) {
       // Update the annotation state to trigger a re-render
@@ -385,7 +803,7 @@ function CustomizableViewportOverlay({
         return renderItem.contentF(overlayItemProps);
       }
     }
-  }, [element, viewportData, imageSliceData, viewportId, servicesManager, customizationService, displaySetProps, voi, scale, instanceNumber, annotationState]);
+  }, [element, viewportData, imageSliceData, viewportId, servicesManager, customizationService, displaySetProps, voi, scale, instanceNumber, annotationState, isLight]);
   const getContent = (0,react.useCallback)((customization, keyPrefix) => {
     const props = {
       ...displaySetProps,
@@ -528,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));
 }
 
@@ -544,6 +962,9 @@ function VOIOverlayItem({
     windowWidth,
     windowCenter
   } = voi;
+  const {
+    title
+  } = customization;
   if (typeof windowCenter !== 'number' || typeof windowWidth !== 'number') {
     return null;
   }
@@ -551,7 +972,8 @@ function VOIOverlayItem({
     className: "overlay-item flex flex-row",
     style: {
       color: customization?.color
-    }
+    },
+    title: title
   }, /*#__PURE__*/react.createElement("span", {
     className: "mr-0.5 shrink-0 opacity-[0.70]"
   }, "W:"), /*#__PURE__*/react.createElement("span", {
@@ -592,11 +1014,15 @@ function InstanceNumberOverlayItem({
     imageIndex,
     numberOfSlices
   } = imageSliceData;
+  const {
+    title
+  } = customization;
   return /*#__PURE__*/react.createElement("div", {
     className: "overlay-item flex flex-row",
     style: {
       color: customization && customization.color || undefined
-    }
+    },
+    title: title
   }, /*#__PURE__*/react.createElement("span", null, instanceNumber !== undefined && instanceNumber !== null ? /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("span", {
     className: "mr-0.5 shrink-0 opacity-[0.70]"
   }, "I:"), /*#__PURE__*/react.createElement("span", null, `${instanceNumber} (${imageIndex + 1}/${numberOfSlices})`)) : `${imageIndex + 1}/${numberOfSlices}`));
@@ -767,7 +1193,7 @@ function ViewportImageSliceLoadingIndicator({
     }, /*#__PURE__*/react.createElement("div", {
       className: "transparent flex h-full w-full items-center justify-center"
     }, /*#__PURE__*/react.createElement("p", {
-      className: "text-primary-light text-xl font-light"
+      className: "text-highlight text-xl font-light"
     }, /*#__PURE__*/react.createElement("h4", null, "Error Loading Image"), /*#__PURE__*/react.createElement("p", null, "An error has occurred."), /*#__PURE__*/react.createElement("p", null, error)))));
   }
   if (loading) {
@@ -780,7 +1206,7 @@ function ViewportImageSliceLoadingIndicator({
       }, /*#__PURE__*/react.createElement("div", {
         className: "transparent flex h-full w-full items-center justify-center"
       }, /*#__PURE__*/react.createElement("p", {
-        className: "text-primary-light text-xl font-light"
+        className: "text-highlight text-xl font-light"
       }, "Loading...")))
     );
   }
@@ -797,6 +1223,7 @@ ViewportImageSliceLoadingIndicator.propTypes = {
 
 
 
+
 function CornerstoneOverlays(props) {
   const {
     viewportId,
@@ -805,7 +1232,8 @@ function CornerstoneOverlays(props) {
     servicesManager
   } = props;
   const {
-    cornerstoneViewportService
+    cornerstoneViewportService,
+    customizationService
   } = servicesManager.services;
   const [imageSliceData, setImageSliceData] = (0,react.useState)({
     imageIndex: 0,
@@ -834,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,
@@ -1658,6 +2095,6 @@ function areEqual(prevProps, nextProps) {
 }
 /* harmony default export */ const Viewport_OHIFCornerstoneViewport = (OHIFCornerstoneViewport);
 
-/***/ })
+/***/ }
 
 }]);

package/dist/{4202.bundle.5a0f8e4004c5d8a68548.js → 4202.bundle.4fcd0de412907efd5b53.js}

@@ -1,8 +1,8 @@
 "use strict";
 (globalThis["webpackChunk"] = globalThis["webpackChunk"] || []).push([[4202],{
 
-/***/ 74202:
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+/***/ 74202
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
@@ -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__(12517);
-/* harmony import */ var _ohif_extension_cornerstone__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(63081);
+/* 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); }
 
 
@@ -106,7 +106,7 @@ function OHIFCornerstonePMAPViewport(props) {
       type: 'warning',
       message: 'The values are multiplied by 100 in the viewport for better visibility'
     });
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ohif_extension_cornerstone__WEBPACK_IMPORTED_MODULE_3__.OHIFCornerstoneViewport, _extends({}, props, {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__.createElement(_ohif_extension_cornerstone__WEBPACK_IMPORTED_MODULE_3__/* .OHIFCornerstoneViewport */ .R9, _extends({}, props, {
       // Referenced + PMAP displaySets must be passed as parameter in this order
       displaySets: [referencedDisplaySet, pmapDisplaySet],
       viewportOptions: {
@@ -191,6 +191,6 @@ function _getReferencedDisplaySetMetadata(referencedDisplaySet, pmapDisplaySet)
 }
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (OHIFCornerstonePMAPViewport);
 
-/***/ })
+/***/ }
 
 }]);