[WIP] feat/decimated loading

extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx

@@ -13,6 +13,7 @@ import CinePlayer from '../components/CinePlayer';
 import type { Types } from '@ohif/core';
 
 import OHIFViewportActionCorners from '../components/OHIFViewportActionCorners';
+import { Volume3dSpinDriver } from '../components/ViewportOrientationMenu/Volume3dSpinDriver';
 import { getViewportPresentations } from '../utils/presentations/getViewportPresentations';
 import { useSynchronizersStore } from '../stores/useSynchronizersStore';
 import ActiveViewportBehavior from '../utils/ActiveViewportBehavior';
@@ -280,7 +281,12 @@ const OHIFCornerstoneViewport = React.memo(
           initialImageIndex
         );
 
-        const presentations = getViewportPresentations(viewportId, viewportOptions);
+        const optionsToUse =
+          'viewportOptions' in viewportData && viewportData.viewportOptions
+            ? viewportData.viewportOptions
+            : viewportOptions;
+
+        const presentations = getViewportPresentations(viewportId, optionsToUse);
 
         // Note: This is a hack to get the grid to re-render the OHIFCornerstoneViewport component
         // Used for segmentation hydration right now, since the logic to decide whether
@@ -295,7 +301,7 @@ const OHIFCornerstoneViewport = React.memo(
         cornerstoneViewportService.setViewportData(
           viewportId,
           viewportData,
-          viewportOptions,
+          optionsToUse,
           displaySetOptions,
           presentations
         );
@@ -353,6 +359,7 @@ const OHIFCornerstoneViewport = React.memo(
             />
           )}
         </div>
+        <Volume3dSpinDriver viewportId={viewportId} />
         {/* The OHIFViewportActionCorners follows the viewport in the DOM so that it is naturally at a higher z-index.*/}
         <OHIFViewportActionCorners viewportId={viewportId} />
       </React.Fragment>

extensions/cornerstone/src/Viewport/Overlays/AutoDecimationOverlay.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useViewportRendering } from '../../hooks';
+
+/**
+ * Renders the auto-decimation message in the viewport top-right, same style as
+ * demographic overlay items (Study Date, Series Description).
+ */
+function AutoDecimationOverlay({
+  viewportId,
+  servicesManager,
+}: {
+  viewportId: string;
+  servicesManager: AppTypes.ServicesManager;
+}) {
+  const { isViewportBackgroundLight: isLight } = useViewportRendering(viewportId);
+  const options = servicesManager?.services?.cornerstoneViewportService
+    ?.getViewportInfo(viewportId)
+    ?.getViewportOptions?.();
+  const info = options?.autoDecimationInfo;
+  const viewportType = options?.viewportType;
+  const isVolume =
+    viewportType === 'orthographic' ||
+    viewportType === 'volume3d';
+
+  if (!info?.message || !isVolume) {
+    return null;
+  }
+
+  const colorClass = 'text-yellow-400';
+  const shadowClass = isLight ? 'shadow-light' : 'shadow-dark';
+
+  return (
+    <div
+      className={`absolute viewport-overlay auto-decimation-overlay pointer-events-none ${colorClass} ${shadowClass} text-base leading-5 text-right`}
+      style={{ top: '0.5rem', right: '3.5rem', maxWidth: 'calc(100% - 4rem)' }}
+      title="Volume auto-decimated"
+      data-cy="auto-decimation-overlay"
+    >
+      <div className="overlay-item">
+        <span className="break-words whitespace-pre-line">{info.message}</span>
+      </div>
+    </div>
+  );
+}
+
+export default AutoDecimationOverlay;

extensions/cornerstone/src/Viewport/Overlays/CornerstoneOverlays.tsx

@@ -1,13 +1,15 @@
 import React, { useEffect, useState } from 'react';
 
 import ViewportImageScrollbar from './ViewportImageScrollbar';
+import ViewportSliceProgressScrollbar from './ViewportSliceProgressScrollbar/ViewportSliceProgressScrollbar';
 import CustomizableViewportOverlay from './CustomizableViewportOverlay';
 import ViewportOrientationMarkers from './ViewportOrientationMarkers';
 import ViewportImageSliceLoadingIndicator from './ViewportImageSliceLoadingIndicator';
+import AutoDecimationOverlay from './AutoDecimationOverlay';
 
 function CornerstoneOverlays(props: withAppTypes) {
   const { viewportId, element, scrollbarHeight, servicesManager } = props;
-  const { cornerstoneViewportService } = servicesManager.services;
+  const { cornerstoneViewportService, customizationService } = servicesManager.services;
   const [imageSliceData, setImageSliceData] = useState({
     imageIndex: 0,
     numberOfSlices: 0,
@@ -29,7 +31,7 @@ function CornerstoneOverlays(props: withAppTypes) {
     return () => {
       unsubscribe();
     };
-  }, [viewportId]);
+  }, [viewportId, cornerstoneViewportService]);
 
   if (!element) {
     return null;
@@ -39,21 +41,41 @@ function CornerstoneOverlays(props: withAppTypes) {
     const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
 
     if (viewportInfo?.viewportOptions?.customViewportProps?.hideOverlays) {
-      return null;
+      return (
+        <div className="noselect">
+          <AutoDecimationOverlay viewportId={viewportId} servicesManager={servicesManager} />
+        </div>
+      );
     }
   }
 
+  const viewportScrollbarVariant = customizationService.getCustomization(
+    'viewportScrollbar.variant'
+  );
+  const useProgressScrollbar = viewportScrollbarVariant !== 'legacy';
+
   return (
     <div className="noselect">
-      <ViewportImageScrollbar
-        viewportId={viewportId}
-        viewportData={viewportData}
-        element={element}
-        imageSliceData={imageSliceData}
-        setImageSliceData={setImageSliceData}
-        scrollbarHeight={scrollbarHeight}
-        servicesManager={servicesManager}
-      />
+      {useProgressScrollbar ? (
+        <ViewportSliceProgressScrollbar
+          viewportId={viewportId}
+          viewportData={viewportData}
+          element={element}
+          imageSliceData={imageSliceData}
+          setImageSliceData={setImageSliceData}
+          servicesManager={servicesManager}
+        />
+      ) : (
+        <ViewportImageScrollbar
+          viewportId={viewportId}
+          viewportData={viewportData}
+          element={element}
+          imageSliceData={imageSliceData}
+          setImageSliceData={setImageSliceData}
+          scrollbarHeight={scrollbarHeight}
+          servicesManager={servicesManager}
+        />
+      )}
 
       <CustomizableViewportOverlay
         imageSliceData={imageSliceData}
@@ -63,6 +85,8 @@ function CornerstoneOverlays(props: withAppTypes) {
         element={element}
       />
 
+      <AutoDecimationOverlay viewportId={viewportId} servicesManager={servicesManager} />
+
       <ViewportImageSliceLoadingIndicator
         viewportData={viewportData}
         element={element}

extensions/cornerstone/src/Viewport/Overlays/CustomizableViewportOverlay.tsx

@@ -215,6 +215,7 @@ function CustomizableViewportOverlay({
         instanceNumber,
         viewportId,
         toolGroupService,
+        servicesManager,
         isLight,
       };
 

extensions/cornerstone/src/Viewport/Overlays/ViewportSliceProgressScrollbar/ViewportSliceProgressScrollbar.tsx

@@ -0,0 +1,200 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { VolumeViewport3D, utilities as csUtils } from '@cornerstonejs/core';
+import {
+  SmartScrollbar,
+  SmartScrollbarTrack,
+  SmartScrollbarFill,
+  SmartScrollbarIndicator,
+  SmartScrollbarEndpoints,
+} from '@ohif/ui-next';
+import { getViewportImageIds } from './helpers';
+import {
+  useLoadedSliceBytes,
+  useProgressScrollbarMode,
+  useViewedSliceBytes,
+  useViewportSliceSync,
+} from './hooks';
+import { ViewportSliceProgressScrollbarProps } from './types';
+
+function ViewportSliceProgressScrollbar({
+  viewportData,
+  viewportId,
+  element,
+  imageSliceData,
+  setImageSliceData,
+  servicesManager,
+}: ViewportSliceProgressScrollbarProps) {
+  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 = useMemo(() => getViewportImageIds(viewportData), [viewportData]);
+  const imageIdToIndex = useMemo(() => {
+    const map = new Map<string, number>();
+    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 VolumeViewport3D) {
+      return;
+    }
+
+    const { isCineEnabled } = cineService.getState();
+
+    if (isCineEnabled) {
+      cineService.stopClip(element, { viewportId });
+      cineService.setCine({ id: viewportId, frameRate: undefined, isPlaying: false });
+    }
+
+    csUtils.jumpToSlice(viewport.element, {
+      imageIndex: targetImageIndex,
+      debounceLoading: true,
+    });
+  };
+
+  const isLoading = isFullMode && showLoadingPattern ? !isFullyLoaded : false;
+
+  if (!numberOfSlices || numberOfSlices <= 1) {
+    return null;
+  }
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        height: '100%',
+        padding: '8px 5px',
+        zIndex: 10,
+      }}
+    >
+      <div
+        style={{
+          position: 'relative',
+          height: '100%',
+          width: '11px',
+        }}
+      >
+        <SmartScrollbar
+          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') as
+              | Record<string, unknown>
+              | undefined
+          }
+        >
+          <SmartScrollbarTrack>
+            {isFullMode && showLoadedFill && (
+              <SmartScrollbarFill
+                marked={loadedBytes}
+                version={loadedVersion}
+                className="bg-neutral/25"
+                loadingClassName="bg-neutral/50"
+              />
+            )}
+            {isFullMode && showViewedFill && (
+              <SmartScrollbarFill
+                marked={viewedBytes}
+                version={viewedVersion}
+                className="bg-primary/35"
+                loadingClassName="bg-primary/35"
+              />
+            )}
+          </SmartScrollbarTrack>
+          <SmartScrollbarIndicator />
+          {isFullMode && showLoadedEndpoints && (
+            <SmartScrollbarEndpoints
+              marked={loadedBytes}
+              version={loadedVersion}
+            />
+          )}
+        </SmartScrollbar>
+      </div>
+    </div>
+  );
+}
+
+ViewportSliceProgressScrollbar.propTypes = {
+  viewportData: PropTypes.object,
+  viewportId: PropTypes.string.isRequired,
+  element: PropTypes.instanceOf(Element),
+  imageSliceData: PropTypes.object.isRequired,
+  setImageSliceData: PropTypes.func.isRequired,
+  servicesManager: PropTypes.object.isRequired,
+};
+
+export default ViewportSliceProgressScrollbar;