@vitessce/spatial-accelerated 3.8.10 → 3.8.13

package/src/VolumeDataManager.js

@@ -45,7 +45,7 @@ const MAX_CHANNELS = 7; // [0, 1, 2, 3, 4, 5, 6]
 // const manualChannelSelection = 0;
 
 // Add a constant for initialization status
-const INIT_STATUS = {
+export const INIT_STATUS = {
   NOT_STARTED: 'not_started',
   IN_PROGRESS: 'in_progress',
   COMPLETE: 'complete',
@@ -507,6 +507,7 @@ export class VolumeDataManager {
     this.timeStamp = 0;
     this.k = 40;
     this.noNewRequests = false;
+    this.manuallyStopped = false; // Flag to track if user manually stopped loading
 
     this.needsBailout = false; // Flag to indicate if we need to bail out of processing requests
 
@@ -517,9 +518,61 @@ export class VolumeDataManager {
     // Store the last known configuration for context restoration
     this._lastChannelConfig = null;
 
+    // Track loading progress
+    this.currentRequestCount = 0; // Number of requests currently being processed
+    this.totalBricksRequested = 0; // Total number of bricks requested in current batch
+
     logWithColor('VolumeDataManager constructor complete');
   }
 
+  /**
+   * Get loading progress information
+   * @returns {Object} Loading progress with bricksLoaded, totalBricks, isLoading, and percentage
+   */
+  getLoadingProgress() {
+    const bricksLoaded = this.bricksEverLoaded.size;
+    const isLoading = !this.noNewRequests && this.currentRequestCount > 0;
+    const percentage = this.totalBricksRequested > 0
+      ? ((this.totalBricksRequested - this.currentRequestCount) / this.totalBricksRequested) * 100
+      : 0;
+
+    return {
+      bricksLoaded,
+      currentRequestCount: this.currentRequestCount,
+      totalBricksRequested: this.totalBricksRequested,
+      isLoading,
+      percentage,
+      noNewRequests: this.noNewRequests,
+    };
+  }
+
+  /**
+   * Manually stop loading and render at highest resolution
+   */
+  stopLoading() {
+    log.debug('Manually stopping data loading');
+    this.noNewRequests = true;
+    this.manuallyStopped = true;
+    this.needsBailout = true;
+    // Reset progress counters to reflect stopped state
+    this.currentRequestCount = 0;
+    this.totalBricksRequested = 0;
+  }
+
+  /**
+   * Manually restart loading
+   */
+  restartLoading() {
+    log.debug('Manually restarting data loading');
+    this.noNewRequests = false;
+    this.manuallyStopped = false;
+    this.needsBailout = false;
+    this.triggerUsage = true;
+    // Reset progress counters
+    this.currentRequestCount = 0;
+    this.totalBricksRequested = 0;
+  }
+
   /**
    * Handle WebGL context loss
    */
@@ -942,23 +995,15 @@ export class VolumeDataManager {
     this.ptTHREE = ptTHREE;
     this.bcTHREE = bcTHREE;
 
-    // log.debug('gl', this.gl);
-    // log.debug('renderer', this.renderer);
-
     logWithColor('initMRMCPT() COMPLETE');
   }
 
-  /*
-  testTexture() {
-    log.debug('testTexture pt', this.ptTHREE);
-    log.debug('testTexture bc', this.bcTHREE);
-  }
-  */
 
   async initTexture() {
     const requests = [
       { x: 0, y: 0, z: 1 },
     ];
+    logWithColor('initTexture - loading first brick');
     await this.handleBrickRequests(requests);
   }
 
@@ -1182,11 +1227,11 @@ export class VolumeDataManager {
     if (!this.zarrStore || !this.zarrStore.arrays[resolution]) {
       throw new Error('Zarr store or resolution not initialized');
     }
-
-    // log.debug('loadZarrChunk', t, c, z, y, x, resolution);
+    log.debug('loadZarrChunk', { t, c, z, y, x, resolution });
 
     const array = this.zarrStore.arrays[resolution];
 
+
     // TODO: Use zarrita's get(arr, slice) method (rather than arr.getChunk),
     // which will enable reading from arrays with other chunk shapes
     // (i.e., not strictly 32x32x32 chunks).
@@ -1196,8 +1241,6 @@ export class VolumeDataManager {
 
     const chunkEntry = await array.getChunk([t, c, z, y, x]);
 
-    // log.debug('chunkEntry', chunkEntry);
-
     if (!chunkEntry) {
       throw new Error(`No chunk found at coordinates [${t},${c},${z},${y},${x}]`);
     }
@@ -1216,6 +1259,12 @@ export class VolumeDataManager {
       return;
     }
 
+    // Check if loading has been manually stopped
+    if (this.noNewRequests) {
+      log.debug('processRequestData: loading stopped by user, skipping');
+      return;
+    }
+
     // Check for context loss
     if (this.isContextLost()) {
       log.debug('processRequestData: WebGL context is lost, skipping');
@@ -1522,7 +1571,7 @@ export class VolumeDataManager {
 
     log.debug('starting to load zarr chunk', { resolution, z, y, x, zarrChannel });
     let chunk = await this.loadZarrChunk(0, zarrChannel, z, y, x, resolution);
-    // log.debug('chunk', chunk);
+    log.debug('chunk', chunk);
 
     // TODO(mark): is there a better way than iterating over all of the chunk values?
     if (chunk instanceof Uint16Array) {
@@ -1538,12 +1587,20 @@ export class VolumeDataManager {
         log.debug('this.channels.downsampleMin[channel]', this.channels.downsampleMin[channel]);
         log.debug('this.channels.downsampleMax[channel]', this.channels.downsampleMax[channel]);
       }
-      // TODO(mark): to reduce memory usage, create the Uint8Array as a view of the Uint16Array
-      // and use bitwise operations. Then scale the values.
+      // Use TypedArray view and bitwise operations to reduce memory allocations
+      // Shift right by 8 to convert uint16 to uint8 range
+      const uint16View = new Uint16Array(chunk.buffer);
       const uint8Chunk = new Uint8Array(chunk.length);
-      for (let i = 0; i < chunk.length; i++) {
-        // Scale from 0-65535 to 0-255
-        uint8Chunk[i] = Math.floor((chunk[i] - this.channels.downsampleMin[channel]) / (this.channels.downsampleMax[channel] - this.channels.downsampleMin[channel]) * 255);
+
+      const minVal = this.channels.downsampleMin[channel];
+      const maxVal = this.channels.downsampleMax[channel];
+      const range = maxVal - minVal;
+
+      for (let i = 0; i < uint16View.length; i++) {
+        // Clamp to min/max range, then scale to 0-255
+        const val = uint16View[i];
+        const clamped = Math.max(minVal, Math.min(maxVal, val));
+        uint8Chunk[i] = ((clamped - minVal) * 255 / range) | 0; // Use bitwise OR for fast floor
       }
       chunk = uint8Chunk;
     }
@@ -1634,6 +1691,11 @@ export class VolumeDataManager {
   async handleBrickRequests(ptRequests) {
     // log.debug('handleBrickRequests');
     if (ptRequests.length === 0) return;
+
+    // Track loading progress
+    this.totalBricksRequested = ptRequests.length;
+    this.currentRequestCount = ptRequests.length;
+
     // log.debug('ptRequests', ptRequests);
     // log.debug('this.BCFull', this.BCFull);
     // log.debug('this.BCUnusedIndex', this.BCUnusedIndex);
@@ -1649,9 +1711,12 @@ export class VolumeDataManager {
     /* upload each (sequentially or Promise.all if you prefer IO overlap) */
     log.debug('handleBrickRequests: starting for loop');
     for (let i = 0; i < ptRequests.length; ++i) {
-      log.debug('uploading brick', ptRequests[i], slots[i]);
       // eslint-disable-next-line no-await-in-loop
       await this._uploadBrick(ptRequests[i], slots[i]);
+
+      // Update progress
+      this.currentRequestCount = ptRequests.length - i - 1;
+
       // this.bricksAllocated++;
       const rlength = this.bricksEverLoaded.size;
       this.bricksEverLoaded.add(`${ptRequests[i].x},${ptRequests[i].y},${ptRequests[i].z}`);
@@ -1662,11 +1727,16 @@ export class VolumeDataManager {
       if (this.needsBailout) {
         log.debug('Bailing out of handleBrickRequests early due to needsBailout flag');
         this.needsBailout = false; // Reset the flag
+        this.currentRequestCount = 0; // Reset progress
         break; // Exit the loop early
 
         // TODO(mark): do something with the allocated slots that were not used?
       }
     }
+
+    // Reset progress when complete
+    this.currentRequestCount = 0;
+
     // log.debug('this.bricksAllocated', this.bricksAllocated);
     log.debug('this.bricksEverLoaded', this.bricksEverLoaded);
     // log.debug('uploaded bricks');

package/src/VolumeRenderManager.js

@@ -81,9 +81,6 @@ export class VolumeRenderManager {
    * @returns {Object} Extracted rendering settings
    */
   extractRenderingSettingsFromProps(props) {
-    logWithColor('Extracting rendering settings from props');
-    // log.debug('props', props);
-    // log.debug('props.imageChannelCoordination', props.imageChannelCoordination[0]['A']);
     const {
       images = {},
       imageLayerScopes = [],
@@ -95,6 +92,7 @@ export class VolumeRenderManager {
 
     const layerScope = imageLayerScopes[0];
     if (!layerScope) {
+      logWithColor('Extracting rendering settings from props - no layer scope');
       return {
         valid: false,
       };
@@ -106,6 +104,7 @@ export class VolumeRenderManager {
 
     const data = images[layerScope]?.image?.instance?.getData();
     if (!data) {
+      logWithColor('Extracting rendering settings from props - no image data');
       return {
         valid: false,
       };
@@ -121,6 +120,7 @@ export class VolumeRenderManager {
       // TODO(mark): the defaults should be set based on the image dtype.
       // TODO(mark): wait for all channel IQR ranges to be computed before initializing,
       // as we do not want this.maxRange to be incorrect.
+      logWithColor('Extracting rendering settings from props - no channel window set');
       return {
         valid: false,
       };
@@ -185,10 +185,12 @@ export class VolumeRenderManager {
       channelCoordination[cScope][CoordinationType.SPATIAL_MAX_RESOLUTION]
     ));
 
+
     // Get slice planes
     let xSlice = layerCoordination[CoordinationType.SPATIAL_SLICE_X];
     let ySlice = layerCoordination[CoordinationType.SPATIAL_SLICE_Y];
     let zSlice = layerCoordination[CoordinationType.SPATIAL_SLICE_Z];
+    const lodFactor = layerCoordination[CoordinationType.SPATIAL_LOD_FACTOR] ?? 1.0;
 
     xSlice = xSlice !== null ? xSlice : new Vector2(-1, 100000);
     ySlice = ySlice !== null ? ySlice : new Vector2(-1, 100000);
@@ -196,6 +198,8 @@ export class VolumeRenderManager {
 
     const allChannels = images[layerScope].image.loaders[0].channels;
 
+    logWithColor('Extracting rendering settings from props - success');
+
     return {
       valid: true,
       channelsVisible,
@@ -210,6 +214,7 @@ export class VolumeRenderManager {
       xSlice,
       ySlice,
       zSlice,
+      lodFactor,
     };
   }
 
@@ -219,9 +224,10 @@ export class VolumeRenderManager {
    * @returns {boolean} True if settings were successfully updated
    */
   updateFromProps(props) {
-    logWithColor('Updating from props');
     const settings = this.extractRenderingSettingsFromProps(props);
     if (!settings.valid) {
+      logWithColor('Updating from props - invalid settings');
+
       return false;
     }
 
@@ -236,7 +242,13 @@ export class VolumeRenderManager {
     this.xSlice = settings.xSlice;
     this.ySlice = settings.ySlice;
     this.zSlice = settings.zSlice;
+    this.uniforms.lodFactor.value = settings.lodFactor;
 
+    logWithColor(`lodFactor ${settings.lodFactor}`);
+
+    this.shader.uniforms.lodFactor.value = settings.lodFactor;
+
+    logWithColor('Updating from props - success');
     return true;
   }
 
@@ -532,7 +544,6 @@ export class VolumeRenderManager {
     this.uniforms.channelMapping.value = channelMapping;
   }
 
-
   // Only called on initialization of the
   // VolumeDataManager and VolumeRenderManager for a particular image.
   setZarrUniforms(

package/src/VolumeShader.js

@@ -18,6 +18,7 @@ export const VolumeShader = {
     zClip: { value: new Vector2(0, 1000000.0) },
     u_window_size: { value: new Vector2(1, 1) },
     u_vol_scale: { value: new Vector3(1, 1, 1) },
+    // Set renderstyle to 3 or 4 for debugging modes
     u_renderstyle: { value: 2 },
     brickCacheTex: { type: 'sampler3D', value: null },
     pageTableTex: { type: 'usampler3D', value: null },

package/src/VolumeView.js

@@ -6,14 +6,15 @@
  * VolumeView.js
  */
 
-import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import React, { useRef, useState, useEffect, useMemo } from 'react';
 import { useThree, useFrame } from '@react-three/fiber';
 import { OrbitControls } from '@react-three/drei';
 import * as THREE from 'three';
 import { WebGLMultipleRenderTargets } from 'three';
 import { log, atLeastLogLevel, LogLevel } from '@vitessce/globals';
+import { useEventCallback } from '@vitessce/styles';
 
-import { VolumeDataManager } from './VolumeDataManager.js';
+import { VolumeDataManager, INIT_STATUS } from './VolumeDataManager.js';
 import { VolumeRenderManager } from './VolumeRenderManager.js';
 
 import { gaussianVertexShader } from './shaders/GaussianVertexShader.js';
@@ -35,14 +36,14 @@ function logWithColor(msg) {
 
 // Functions called with useFrame
 function performGeometryPass(_gl, _camera, _scene, { mrtRef }) {
-  // logWithColor('performGeometryPass');
+  // logWithColor('performGeometryPass', 'blue');
   _gl.setRenderTarget(mrtRef.current);
   _gl.clear(true, true, true);
   _gl.render(_scene, _camera);
 }
 
 function performBlitPass(_gl, { screenSceneRef, screenCameraRef }) {
-  // logWithColor('performBlitPass');
+  // logWithColor('performBlitPass', 'red');
   _gl.setRenderTarget(null);
   _gl.clear(true, true, true);
   _gl.render(screenSceneRef.current, screenCameraRef.current);
@@ -54,7 +55,8 @@ function handleRequests(_gl, { frameRef, dataManager, mrtRef, bufRequest, bufUsa
   const ctx = _gl.getContext();
   const f = frameRef.current;
 
-  if (dataManager.noNewRequests === true && f % 100 === 0 && f < 500) {
+  // Only allow automatic restart if not manually stopped by user
+  if (dataManager.noNewRequests === true && !dataManager.manuallyStopped && f % 100 === 0 && f < 500) {
     // Every 100th frame of the first 500 frames.
     // eslint-disable-next-line no-param-reassign
     dataManager.noNewRequests = false;
@@ -114,8 +116,11 @@ function handleAdaptiveQuality(clock, params) {
     // While the user is interacting, we want to ensure that the next frame's handleRequests call
     // will trigger the processUsageData call, and subsequently the processRequestData call
     // (since processUsageData will set triggerRequest to true its conclusion).
-    dataManager.noNewRequests = false;
-    dataManager.triggerUsage = true;
+    // But only if not manually stopped by the user
+    if (!dataManager.manuallyStopped) {
+      dataManager.noNewRequests = false;
+      dataManager.triggerUsage = true;
+    }
     return;
   }
   if (spatialRenderingModeChanging) return;
@@ -186,6 +191,7 @@ export function VolumeView(props) {
     // onInitComplete,
     spatialRenderingMode,
     spatialRenderingModeChanging,
+    onVolumeLoadingUpdate,
   } = props;
   const {
     gl,
@@ -211,7 +217,7 @@ export function VolumeView(props) {
   });
   // const [lastRes, setLastRes] = useState(null);
   // const [lastChannels, setLastChannels] = useState([]);
-  const [is3D, setIs3D] = useState(false);
+  const is3D = spatialRenderingMode === '3D';
   // const [loading, setLoading] = useState(false);
 
   // Add new refs for screen quad setup
@@ -219,9 +225,14 @@ export function VolumeView(props) {
   const screenCameraRef = useRef(null);
   const screenQuadRef = useRef(null);
 
-  const [isInteracting, setIsInteracting] = useState(false);
+  // The `_setIsInteracting` function is wrapped by the `setIsInteracting` useEventCallback below
+  // This allows us to apply the effects related to interaction state synchronously,
+  // rather than relying waiting for a React state update with `useEffect`.
+  // Updates to `isInteracting` should be done via `setIsInteracting`.
+  const [isInteracting, _setIsInteracting] = useState(false);
   const interactionTimeoutRef = useRef(null);
 
+
   // Track interaction-triggering props
   // const prevInteractionChannels = useRef();
 
@@ -311,8 +322,10 @@ export function VolumeView(props) {
   const firstImageChannelScope = imageChannelScopesByLayer?.[firstImageLayerScope];
   const firstImageLayerChannelCoordination = imageChannelCoordination?.[0]?.[firstImageLayerScope];
 
+
   useEffect(() => {
     logWithColor('useEffect INIT');
+    let hasRerun = false;
 
     if (!dataManager || !renderManager) {
       log.debug('dataManager or renderManager not initialized yet');
@@ -329,12 +342,20 @@ export function VolumeView(props) {
       return;
     }
 
-    // TODO(mark): prevent dataManager.init from being called more than once.
-    (async () => {
+    const initializeDataManager = async () => {
+      if (dataManager.initStatus === INIT_STATUS.COMPLETE) {
+        log.debug('dataManager already initialized, skipping');
+        return;
+      }
       // TODO(mark): separate the initialization which depends on gl, from the initialization which depends on images, from the dm.init(firstImageLayer)
       dataManager.initImages(images, imageLayerScopes);
       // TODO: generalize to more than one image layer.
       await dataManager.init(firstImageLayerChannelCoordination); // device limits, zarr meta
+      if (hasRerun) {
+        log.debug('Initialization useEffect has rerun, aborting remaining initialization');
+        return;
+      }
+      log.debug('dataManager initialized');
 
       // log.debug('dm.physicalScale', dataManager.physicalScale);
 
@@ -347,7 +368,16 @@ export function VolumeView(props) {
       // if (onInitComplete) {
       //   onInitComplete({ zarrStoreInfo: dm.zarrStore, deviceLimits: dm.deviceLimits });
       // }
-    })();
+
+      invalidate();
+    };
+    initializeDataManager();
+
+    // avoid setting state on unmounted component
+    // eslint-disable-next-line consistent-return
+    return () => {
+      hasRerun = true;
+    };
 
     // The data manager does not have a clearCache method, should it?
     // return () => {
@@ -355,9 +385,7 @@ export function VolumeView(props) {
     //   dataManager?.clearCache?.();
     // };
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dataManager, renderManager,
-    images, imageLayerScopes,
-  ]);
+  }, [dataManager, renderManager, images, imageLayerScopes]);
 
   /*
   useEffect(() => {
@@ -396,11 +424,10 @@ export function VolumeView(props) {
 
   // TODO(mark): convert to a useMemo?
   useEffect(() => {
-    logWithColor('useEffect spatialRenderingMode');
     const on3D = spatialRenderingMode === '3D';
-    setIs3D(on3D);
 
     if (on3D && dataManager && renderManager) {
+      logWithColor('useEffect spatialRenderingMode');
       // Direct call, no callbacks needed
       const propsForRenderManager = {
         images,
@@ -444,44 +471,8 @@ export function VolumeView(props) {
         }
       }
     }
-  }, [dataManager, renderManager, images, imageLayerScopes, imageLayerCoordination,
-    imageChannelScopesByLayer, imageChannelCoordination, spatialRenderingMode]);
+  }, [dataManager, renderManager, images, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination, spatialRenderingMode]);
 
-  // TODO(mark): can this logic be moved into useFrame?
-  /*
-  useEffect(() => {
-    logWithColor('useEffect stillRef');
-    // log.debug('useEffect stillRef');
-    // log.debug('stillRef', stillRef.current);
-    if (!screenQuadRef.current) {
-      log.debug('no screen quad yet');
-      return;
-    }
-    if (!stillRef.current) {
-      // log.debug('stillRef is false');
-      screenQuadRef.current.material.uniforms.gaussian.value = 7;
-    } else {
-      //log.debug('stillRef is true');
-      screenQuadRef.current.material.uniforms.gaussian.value = 0;
-    }
-  }, [stillRef.current]);
-  */
-
-  // TODO(mark): can this logic be moved into useFrame?
-  // But need to be careful, since currently, it only runs upon change of isInteracting,
-  // and we do not want to execute more `invalidate` calls than necessary/currently.
-  useEffect(() => {
-    logWithColor('useEffect isInteracting');
-    if (isInteracting) {
-      const meshRefUniforms = meshRef.current?.material?.uniforms;
-      if (meshRefUniforms) {
-        meshRefUniforms.renderRes.value = dataManager.PT.lowestDataRes;
-      }
-      // setRenderSpeed(dataManager.PT.lowestDataRes);
-      stillRef.current = false;
-      invalidate();
-    }
-  }, [invalidate, isInteracting]);
 
   // Execute code on every rendered frame.
   // A numerical renderPriority value will cause React Three Fiber
@@ -493,11 +484,15 @@ export function VolumeView(props) {
   useFrame((state, delta, xrFrame) => {
     // NOTE: Do not update React state inside useFrame.
     // Reference: https://r3f.docs.pmnd.rs/advanced/pitfalls#%E2%9D%8C-setstate-in-useframe-is-bad
-    if (!mrtRef.current || !dataManager || !renderManager) return;
+    if (!mrtRef.current || !dataManager || !renderManager) {
+      return;
+    }
 
     // Don't render to MRT if shader is not ready - this prevents WebGL warnings
     // about missing fragment shader outputs for multiple render targets
-    if (!renderState.shader) return;
+    if (!renderState.shader) {
+      return;
+    }
 
     // Receive the same state as the useThree hook.
     const {
@@ -510,6 +505,7 @@ export function VolumeView(props) {
     if (!stillRef.current) {
       performGeometryPass(frameGl, frameCamera, frameScene, { mrtRef });
     }
+
     performBlitPass(frameGl, { screenSceneRef, screenCameraRef });
     handleRequests(frameGl, { frameRef, dataManager, mrtRef, bufRequest, bufUsage });
     handleAdaptiveQuality(clock, {
@@ -587,17 +583,37 @@ export function VolumeView(props) {
   }, [mainOrbitControlsRef.current, setIsInteracting]);
   */
 
-  const onOrbitControlsStart = useCallback((e) => {
+
+  /**
+   * Handle interaction state changes in event callbacks.
+   * This avoids the need for a useEffect hook which
+   * would run on every render frame.
+   */
+  const setIsInteracting = useEventCallback((interacting) => {
+    logWithColor('invalidateOnInteraction callback');
+    _setIsInteracting(interacting);
+    if (interacting) {
+      const meshRefUniforms = meshRef.current?.material?.uniforms;
+      if (meshRefUniforms) {
+        meshRefUniforms.renderRes.value = dataManager.PT.lowestDataRes;
+      }
+      // setRenderSpeed(dataManager.PT.lowestDataRes);
+      stillRef.current = false;
+      invalidate();
+    }
+  });
+
+  const onOrbitControlsStart = useEventCallback((e) => {
     setIsInteracting(true);
-  }, []);
+  });
 
 
-  const onOrbitControlsEnd = useCallback((e) => {
+  const onOrbitControlsEnd = useEventCallback((e) => {
     clearTimeout(interactionTimeoutRef.current);
     interactionTimeoutRef.current = setTimeout(() => {
       setIsInteracting(false);
     }, 300);
-  }, []);
+  });
 
   // Set isInteracting while the user is sliding the channel slider
   // for smooth updates.
@@ -613,7 +629,45 @@ export function VolumeView(props) {
     interactionTimeoutRef.current = setTimeout(() => {
       setIsInteracting(false);
     }, 300);
-  }, [firstImageLayerChannelCoordination]);
+  }, [dataManager, firstImageLayerChannelCoordination, renderManager, setIsInteracting]);
+
+  const stopLoading = useEventCallback(() => {
+    if (dataManager) {
+      dataManager.stopLoading();
+    }
+  });
+
+  const restartLoading = useEventCallback(() => {
+    if (dataManager) {
+      dataManager.restartLoading();
+    }
+  });
+
+  const getLoadingProgress = useEventCallback(() => {
+    if (dataManager) {
+      return dataManager.getLoadingProgress();
+    }
+    return null;
+  });
+
+  // Notify parent component about loading updates
+  useEffect(() => {
+    if (!onVolumeLoadingUpdate) return undefined;
+
+    const intervalId = setInterval(() => {
+      const loadingProgress = getLoadingProgress();
+      onVolumeLoadingUpdate({
+        loadingProgress,
+        stillRef,
+        onStopLoading: stopLoading,
+        onRestartLoading: restartLoading,
+      });
+    }, 1000); // Update every 1000ms (1s)
+
+    return () => clearInterval(intervalId);
+    // `useEventCallback` ensures stable references
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onVolumeLoadingUpdate, stillRef]);
 
   // Render nothing during initialization.
   if (!is3D || !dataManager || !renderManager) return null;