@vitessce/spatial-accelerated 3.8.9 → 3.8.13

package/dist-tsc/SpatialWrapper.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import React, { Suspense } from 'react';
 // Note: need to be careful about versions of RTF, Three, React, and React DOM in package.json
 // to avoid multiple copies of RTF, since the Canvas depends on a React Context.
 // Otherwise you may see errors such as "useThree can only be used inside the Canvas component!".
@@ -41,5 +41,5 @@ export function SpatialWrapper(props) {
             logarithmicDepthBuffer: false,
             preserveDrawingBuffer: false,
             autoClear: false,
-        }, children: _jsx(VolumeView, { ...props }) }));
+        }, children: _jsx(Suspense, { fallback: "Initializing Volume View...", children: _jsx(VolumeView, { ...props }) }) }));
 }

package/dist-tsc/VolumeDataManager.d.ts

@@ -35,6 +35,12 @@ export function _requestBufferToRequestObjects(buffer: any, k: any): {
     }[];
     origRequestCount: number;
 };
+export namespace INIT_STATUS {
+    let NOT_STARTED: string;
+    let IN_PROGRESS: string;
+    let COMPLETE: string;
+    let FAILED: string;
+}
 export class VolumeDataManager {
     constructor(glParam: any);
     gl: any;
@@ -93,6 +99,7 @@ export class VolumeDataManager {
     timeStamp: number;
     k: number;
     noNewRequests: boolean;
+    manuallyStopped: boolean;
     needsBailout: boolean;
     initStatus: string;
     initError: any;
@@ -107,6 +114,21 @@ export class VolumeDataManager {
         downsampleMin: never[];
         downsampleMax: never[];
     } | null;
+    currentRequestCount: number;
+    totalBricksRequested: number;
+    /**
+     * Get loading progress information
+     * @returns {Object} Loading progress with bricksLoaded, totalBricks, isLoading, and percentage
+     */
+    getLoadingProgress(): Object;
+    /**
+     * Manually stop loading and render at highest resolution
+     */
+    stopLoading(): void;
+    /**
+     * Manually restart loading
+     */
+    restartLoading(): void;
     /**
      * Handle WebGL context loss
      */

package/dist-tsc/VolumeDataManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VolumeDataManager.d.ts","sourceRoot":"","sources":["../src/VolumeDataManager.js"],"names":[],"mappings":"AA8DA,yEAaC;AACD,8EAeC;AAED;;;;GAIG;AACH,kDAHW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,8BAC1B,MAAM;;;;;;;;;;;;;EAyHhB;AAMD,kFAaC;AAqBD;;;;;;EA2DC;AAED;;;;;;;EA0BC;AAID;IACE,0BA2KC;IA5JG,QAAyB;IAa3B,cAAwB;IAyBxB,sBAA+B;IAC/B,wBAA2B;IAC3B,iCAAmC;IAenC;;;;;MAKC;IAED;;;;;;;;;;;;MAcC;IAED,8BAAmB;IACnB,8BAAmB;IAEnB;;;;;;MAMC;IAED;;;;;;;;;MAiBC;IAQD,2BAAiC;IAYjC,gBAAmB;IAGnB,oBAAuD;IACvD,gBAAwD;IACxD,gBAAmB;IACnB,sBAAsB;IAGtB,aAAmD;IAGnD,gBAAkB;IAElB,sBAAwB;IACxB,wBAA2B;IAC3B,kBAAkB;IAClB,UAAW;IACX,uBAA0B;IAE1B,sBAAyB;IAGzB,mBAAyC;IACzC,eAAqB;IAGrB;;;;;;;;;;aAA8B;IAKhC;;OAEG;IACH,qCAeC;IAED;;OAEG;IACH,yCAqCC;IAED;;OAEG;IACH,qBAMC;IAED;;OAEG;IACH,uCAIC;IAED,qDAIC;IAFC,YAAoB;IACpB,sBAAwC;IAG1C;;;;;OAKG;IACH,mBAFa,OAAO,CAAC,MAAM,CAAC,CA8S3B;IAjQG,kBAAmD;IAmQvD;;;;;;;;OAQG;IACH,mBAqBC;IASD,6BAKC;IAED,wCAqHC;IAED;;;;;OAKG;IAqBH;;;OAGG;IACH,kCAQC;IAED;;;OAGG;IACH,uBAFa,MAAM,CAUlB;IAED,+BAQC;IAED,kCASC;IAED,gCASC;IAED;;;;;;;;;OASG;IACH,iBARW,MAAM,iBACN,MAAM,iBACN,MAAM,KACN,MAAM,KACN,MAAM,cACN,MAAM,GACJ,OAAO,CAAC,UAAU,CAAC,CAiC/B;IAED,+CA0BC;IAGD,6CA0DC;IAGD,gCAcC;IAED,yCAmDC;IAGD,+DAqBC;IAKD;;;;OAIG;IACH,oBAHW,MAAM,GACJ;QAAE,OAAO,MAAC;QAAC,CAAC,MAAC;QAAC,CAAC,MAAC;QAAC,CAAC,MAAA;KAAE,EAAE,CAyClC;IAKD,uDAqLC;IAKD,oDA2CC;IAKD,kBAWC;CACF;8BAhpDM,OAAO"}
+{"version":3,"file":"VolumeDataManager.d.ts","sourceRoot":"","sources":["../src/VolumeDataManager.js"],"names":[],"mappings":"AA8DA,yEAaC;AACD,8EAeC;AAED;;;;GAIG;AACH,kDAHW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,8BAC1B,MAAM;;;;;;;;;;;;;EAyHhB;AAMD,kFAaC;AAqBD;;;;;;EA2DC;AAED;;;;;;;EA0BC;;;;;;;AAID;IACE,0BAgLC;IAjKG,QAAyB;IAa3B,cAAwB;IAyBxB,sBAA+B;IAC/B,wBAA2B;IAC3B,iCAAmC;IAenC;;;;;MAKC;IAED;;;;;;;;;;;;MAcC;IAED,8BAAmB;IACnB,8BAAmB;IAEnB;;;;;;MAMC;IAED;;;;;;;;;MAiBC;IAQD,2BAAiC;IAYjC,gBAAmB;IAGnB,oBAAuD;IACvD,gBAAwD;IACxD,gBAAmB;IACnB,sBAAsB;IAGtB,aAAmD;IAGnD,gBAAkB;IAElB,sBAAwB;IACxB,wBAA2B;IAC3B,kBAAkB;IAClB,UAAW;IACX,uBAA0B;IAC1B,yBAA4B;IAE5B,sBAAyB;IAGzB,mBAAyC;IACzC,eAAqB;IAGrB;;;;;;;;;;aAA8B;IAG9B,4BAA4B;IAC5B,6BAA6B;IAK/B;;;OAGG;IACH,sBAFa,MAAM,CAiBlB;IAED;;OAEG;IACH,oBAQC;IAED;;OAEG;IACH,uBASC;IAED;;OAEG;IACH,qCAeC;IAED;;OAEG;IACH,yCAqCC;IAED;;OAEG;IACH,qBAMC;IAED;;OAEG;IACH,uCAIC;IAED,qDAIC;IAFC,YAAoB;IACpB,sBAAwC;IAG1C;;;;;OAKG;IACH,mBAFa,OAAO,CAAC,MAAM,CAAC,CA8S3B;IAjQG,kBAAmD;IAmQvD;;;;;;;;OAQG;IACH,mBAkBC;IAGD,6BAMC;IAED,wCAqHC;IAED;;;;;OAKG;IAqBH;;;OAGG;IACH,kCAQC;IAED;;;OAGG;IACH,uBAFa,MAAM,CAUlB;IAED,+BAQC;IAED,kCASC;IAED,gCASC;IAED;;;;;;;;;OASG;IACH,iBARW,MAAM,iBACN,MAAM,iBACN,MAAM,KACN,MAAM,KACN,MAAM,cACN,MAAM,GACJ,OAAO,CAAC,UAAU,CAAC,CA+B/B;IAED,+CAgCC;IAGD,6CA0DC;IAGD,gCAcC;IAED,yCAmDC;IAGD,+DAqBC;IAKD;;;;OAIG;IACH,oBAHW,MAAM,GACJ;QAAE,OAAO,MAAC;QAAC,CAAC,MAAC;QAAC,CAAC,MAAC;QAAC,CAAC,MAAA;KAAE,EAAE,CAyClC;IAKD,uDA6LC;IAKD,oDAwDC;IAKD,kBAWC;CACF;8BAttDM,OAAO"}

package/dist-tsc/VolumeDataManager.js

@@ -30,7 +30,7 @@ const MAX_RESOLUTION_LEVELS = 10; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 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',
@@ -437,14 +437,62 @@ 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
         // Add initialization status
         this.initStatus = INIT_STATUS.NOT_STARTED;
         this.initError = null;
         // 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
      */
@@ -803,20 +851,13 @@ export class VolumeDataManager {
         this.PT = PT;
         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);
     }
     updateChannels(channelProps) {
@@ -1015,7 +1056,7 @@ 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
@@ -1024,7 +1065,6 @@ export class VolumeDataManager {
         // to each "assumed 32x32x32 chunk key".
         // Reference: https://zarrita.dev/slicing.html
         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}]`);
         }
@@ -1039,6 +1079,11 @@ export class VolumeDataManager {
             log.debug('processRequestData: already busy, skipping');
             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');
@@ -1287,7 +1332,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) {
             log.debug('chunk is Uint16Array, converting to Uint8Array');
@@ -1301,12 +1346,18 @@ 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;
         }
@@ -1377,6 +1428,9 @@ export class VolumeDataManager {
         // 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);
@@ -1389,9 +1443,10 @@ 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}`);
@@ -1401,10 +1456,13 @@ 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/dist-tsc/VolumeRenderManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VolumeRenderManager.d.ts","sourceRoot":"","sources":["../src/VolumeRenderManager.js"],"names":[],"mappings":"AA4BA;;;GAGG;AACH;IAII,cAAoB;IACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAAkB;IAClB,oBAA0B;IAC1B,uBAA6B;IAC7B,kBAAwB;IACxB,kBAAqB;IAGrB,uBAAyB;IACzB,sBAAwB;IACxB,6BAAmC;IACnC,iCAAmC;IACnC,cAAgB;IAChB,sBAAwB;IACxB,0BAA4B;IAC5B,gBAAqC;IACrC,gBAAqC;IACrC,gBAAqC;IACrC,wBAA8B;IAC9B,6BAAmC;IACnC,wBAA8B;IAE9B,iBAAmB;IACnB,qBAAwB;IAS1B;;OAEG;IACH,yBAIC;IAED;;;;OAIG;IACH,yCAHW,MAAM,GACJ,MAAM,CAqIlB;IAED;;;;OAIG;IACH,uBAHW,MAAM,GACJ,OAAO,CAsBnB;IAPC,mBAA2C;IAS7C;;;;OAIG;IACH,yJAHW,MAAM,GACJ,MAAM,GAAC,IAAI,CAsIvB;IAzCG,qBAAyC;IA2C7C;;;;;;;;;;;OAWG;IACH,4CATW,MAAM,eACN,MAAM,2DAGN,MAAM,UACN,OAAO,UACP,OAAO,UACP,OAAO,uDA4HjB;IAED;;;OAGG;IAQH,6CAIC;IAKD,+CAkDC;CACF;wBAxkBM,OAAO"}
+{"version":3,"file":"VolumeRenderManager.d.ts","sourceRoot":"","sources":["../src/VolumeRenderManager.js"],"names":[],"mappings":"AA4BA;;;GAGG;AACH;IAII,cAAoB;IACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAAkB;IAClB,oBAA0B;IAC1B,uBAA6B;IAC7B,kBAAwB;IACxB,kBAAqB;IAGrB,uBAAyB;IACzB,sBAAwB;IACxB,6BAAmC;IACnC,iCAAmC;IACnC,cAAgB;IAChB,sBAAwB;IACxB,0BAA4B;IAC5B,gBAAqC;IACrC,gBAAqC;IACrC,gBAAqC;IACrC,wBAA8B;IAC9B,6BAAmC;IACnC,wBAA8B;IAE9B,iBAAmB;IACnB,qBAAwB;IAS1B;;OAEG;IACH,yBAIC;IAED;;;;OAIG;IACH,yCAHW,MAAM,GACJ,MAAM,CA0IlB;IAED;;;;OAIG;IACH,uBAHW,MAAM,GACJ,OAAO,CA6BnB;IAbC,mBAA2C;IAe7C;;;;OAIG;IACH,yJAHW,MAAM,GACJ,MAAM,GAAC,IAAI,CAsIvB;IAzCG,qBAAyC;IA2C7C;;;;;;;;;;;OAWG;IACH,4CATW,MAAM,eACN,MAAM,2DAGN,MAAM,UACN,OAAO,UACP,OAAO,UACP,OAAO,uDA4HjB;IAED;;;OAGG;IAQH,6CAIC;IAID,+CAkDC;CACF;wBAnlBM,OAAO"}

package/dist-tsc/VolumeRenderManager.js

@@ -66,12 +66,10 @@ 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 = [], imageLayerCoordination = [{}], imageChannelScopesByLayer = {}, imageChannelCoordination = [{}], spatialRenderingMode, } = props;
         const layerScope = imageLayerScopes[0];
         if (!layerScope) {
+            logWithColor('Extracting rendering settings from props - no layer scope');
             return {
                 valid: false,
             };
@@ -81,6 +79,7 @@ export class VolumeRenderManager {
         const channelCoordination = imageChannelCoordination[0][layerScope];
         const data = images[layerScope]?.image?.instance?.getData();
         if (!data) {
+            logWithColor('Extracting rendering settings from props - no image data');
             return {
                 valid: false,
             };
@@ -93,6 +92,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,
             };
@@ -141,10 +141,12 @@ export class VolumeRenderManager {
         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);
         zSlice = zSlice !== null ? zSlice : new Vector2(-1, 100000);
         const allChannels = images[layerScope].image.loaders[0].channels;
+        logWithColor('Extracting rendering settings from props - success');
         return {
             valid: true,
             channelsVisible,
@@ -159,6 +161,7 @@ export class VolumeRenderManager {
             xSlice,
             ySlice,
             zSlice,
+            lodFactor,
         };
     }
     /**
@@ -167,9 +170,9 @@ 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;
         }
         // Store the extracted settings
@@ -183,6 +186,10 @@ 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;
     }
     /**

package/dist-tsc/VolumeShader.js

@@ -17,6 +17,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/dist-tsc/VolumeView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VolumeView.d.ts","sourceRoot":"","sources":["../src/VolumeView.js"],"names":[],"mappings":"AAkLA,2DA4dC"}
+{"version":3,"file":"VolumeView.d.ts","sourceRoot":"","sources":["../src/VolumeView.js"],"names":[],"mappings":"AAuLA,2DA6gBC"}

package/dist-tsc/VolumeView.js

@@ -6,13 +6,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * 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 { VolumeDataManager } from './VolumeDataManager.js';
+import { useEventCallback } from '@vitessce/styles';
+import { VolumeDataManager, INIT_STATUS } from './VolumeDataManager.js';
 import { VolumeRenderManager } from './VolumeRenderManager.js';
 import { gaussianVertexShader } from './shaders/GaussianVertexShader.js';
 import { gaussianFragmentShader } from './shaders/GaussianFragmentShader.js';
@@ -27,13 +28,13 @@ 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);
@@ -43,7 +44,8 @@ function handleRequests(_gl, { frameRef, dataManager, mrtRef, bufRequest, bufUsa
     // log.debug('handleRequests', frameRef.current);
     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;
@@ -89,8 +91,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)
@@ -145,7 +150,7 @@ function handleAdaptiveQuality(clock, params) {
 export function VolumeView(props) {
     const { images, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination, 
     // onInitComplete,
-    spatialRenderingMode, spatialRenderingModeChanging, } = props;
+    spatialRenderingMode, spatialRenderingModeChanging, onVolumeLoadingUpdate, } = props;
     const { gl,
     // scene,
     // camera
@@ -166,13 +171,17 @@ 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
     const screenSceneRef = useRef(null);
     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();
@@ -245,6 +254,7 @@ export function VolumeView(props) {
     const firstImageLayerChannelCoordination = imageChannelCoordination?.[0]?.[firstImageLayerScope];
     useEffect(() => {
         logWithColor('useEffect INIT');
+        let hasRerun = false;
         if (!dataManager || !renderManager) {
             log.debug('dataManager or renderManager not initialized yet');
             return;
@@ -257,12 +267,20 @@ export function VolumeView(props) {
             log.debug('no firstImageLayerChannelCoordination yet');
             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);
             renderManager.setZarrUniforms(dataManager.zarrStore, dataManager.PT);
             renderManager.setChannelMapping(dataManager.channels.colorMappings);
@@ -271,16 +289,21 @@ 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 () => {
         //   log.debug('VolumeView useEffect cleanup: running dataManager.clearCache()');
         //   dataManager?.clearCache?.();
         // };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dataManager, renderManager,
-        images, imageLayerScopes,
-    ]);
+    }, [dataManager, renderManager, images, imageLayerScopes]);
     /*
     useEffect(() => {
       logWithColor('useEffect GL');
@@ -315,10 +338,9 @@ 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,
@@ -359,42 +381,7 @@ export function VolumeView(props) {
                 }
             }
         }
-    }, [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]);
+    }, [dataManager, renderManager, images, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination, spatialRenderingMode]);
     // Execute code on every rendered frame.
     // A numerical renderPriority value will cause React Three Fiber
     // to disable automatic rendering altogether.
@@ -405,12 +392,14 @@ 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)
+        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)
+        if (!renderState.shader) {
             return;
+        }
         // Receive the same state as the useThree hook.
         const { gl: frameGl, camera: frameCamera, scene: frameScene, clock, } = state;
         if (!stillRef.current) {
@@ -488,15 +477,33 @@ 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.
     useEffect(() => {
@@ -509,7 +516,40 @@ 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;