@vitessce/spatial-accelerated 3.8.5 → 3.8.7

package/dist/index.js

@@ -49364,6 +49364,7 @@ function _requestBufferToRequestObjects(buffer, k) {
 class VolumeDataManager {
   constructor(glParam) {
     logWithColor$2("CLASS INITIALIZING");
+    log.debug("VolumeDataManager constructor", { glParam, glParamContext: glParam.getContext?.() });
     const gl = glParam.getContext?.() || glParam;
     const renderer = glParam;
     if (gl.domElement && gl.getContext) {
@@ -49386,12 +49387,20 @@ class VolumeDataManager {
           };
           return defaults[param] || 0;
         },
+        isContextLost: () => false,
         MAX_TEXTURE_SIZE: "MAX_TEXTURE_SIZE",
         MAX_3D_TEXTURE_SIZE: "MAX_3D_TEXTURE_SIZE",
         MAX_RENDERBUFFER_SIZE: "MAX_RENDERBUFFER_SIZE",
         MAX_UNIFORM_BUFFER_BINDINGS: "MAX_UNIFORM_BUFFER_BINDINGS"
       };
     }
+    this._originalGlParam = glParam;
+    this._isContextLost = false;
+    this._contextRestoredCallbacks = [];
+    if (this.gl && this.gl.canvas) {
+      this.gl.canvas.addEventListener("webglcontextlost", this._handleContextLost.bind(this));
+      this.gl.canvas.addEventListener("webglcontextrestored", this._handleContextRestored.bind(this));
+    }
     log.debug("GL CONSTANTS");
     log.debug(this.gl);
     log.debug(this.gl.TEXTURE0);
@@ -49483,8 +49492,77 @@ class VolumeDataManager {
     this.needsBailout = false;
     this.initStatus = INIT_STATUS.NOT_STARTED;
     this.initError = null;
+    this._lastChannelConfig = null;
     logWithColor$2("VolumeDataManager constructor complete");
   }
+  /**
+   * Handle WebGL context loss
+   */
+  _handleContextLost(event) {
+    logWithColor$2("CONTEXT LOST");
+    log.warn("WebGL context lost, preventing default and setting flag");
+    event.preventDefault();
+    this._isContextLost = true;
+    if (this.channels && this.channels.zarrMappings) {
+      this._lastChannelConfig = {
+        zarrMappings: [...this.channels.zarrMappings],
+        colorMappings: [...this.channels.colorMappings],
+        downsampleMin: [...this.channels.downsampleMin],
+        downsampleMax: [...this.channels.downsampleMax]
+      };
+    }
+  }
+  /**
+   * Handle WebGL context restoration
+   */
+  _handleContextRestored(event) {
+    logWithColor$2("CONTEXT RESTORED");
+    log.warn("WebGL context restored, reinitializing textures");
+    this._isContextLost = false;
+    if (this._originalGlParam && this._originalGlParam.getContext) {
+      this.gl = this._originalGlParam.getContext();
+    }
+    if (this._lastChannelConfig) {
+      this.channels.zarrMappings = [...this._lastChannelConfig.zarrMappings];
+      this.channels.colorMappings = [...this._lastChannelConfig.colorMappings];
+      this.channels.downsampleMin = [...this._lastChannelConfig.downsampleMin];
+      this.channels.downsampleMax = [...this._lastChannelConfig.downsampleMax];
+      log.debug("Restored channel configuration after context loss");
+    }
+    if (this.PT && this.zarrStore && this.zarrStore.brickLayout) {
+      try {
+        this.initMRMCPT();
+        log.debug("Successfully reinitialized MRMCPT after context restoration");
+      } catch (error) {
+        log.error("Failed to reinitialize MRMCPT after context restoration:", error);
+      }
+    }
+    this._contextRestoredCallbacks.forEach((callback) => {
+      try {
+        callback();
+      } catch (error) {
+        log.error("Error in context restored callback:", error);
+      }
+    });
+  }
+  /**
+   * Check if WebGL context is lost
+   */
+  isContextLost() {
+    if (this._isContextLost) return true;
+    if (this.gl && typeof this.gl.isContextLost === "function") {
+      return this.gl.isContextLost();
+    }
+    return false;
+  }
+  /**
+   * Register a callback to be called when context is restored
+   */
+  onContextRestored(callback) {
+    if (typeof callback === "function") {
+      this._contextRestoredCallbacks.push(callback);
+    }
+  }
   initImages(images, imageLayerScopes) {
     logWithColor$2("INIT IMAGES");
     this.images = images;
@@ -49778,6 +49856,12 @@ class VolumeDataManager {
     log.debug("newColorMappings", newColorMappings);
     this.channels.colorMappings = newColorMappings;
     log.debug("updatedChannels", this.channels);
+    this._lastChannelConfig = {
+      zarrMappings: [...this.channels.zarrMappings],
+      colorMappings: [...this.channels.colorMappings],
+      downsampleMin: [...this.channels.downsampleMin],
+      downsampleMax: [...this.channels.downsampleMax]
+    };
   }
   /**
    * Try to load a resolution level
@@ -49895,6 +49979,10 @@ class VolumeDataManager {
       log.debug("processRequestData: already busy, skipping");
       return;
     }
+    if (this.isContextLost()) {
+      log.debug("processRequestData: WebGL context is lost, skipping");
+      return;
+    }
     this.isBusy = true;
     this.triggerRequest = false;
     const { requests, origRequestCount } = _requestBufferToRequestObjects(buffer, this.k);
@@ -49912,6 +50000,10 @@ class VolumeDataManager {
       this.needsBailout = true;
       return;
     }
+    if (this.isContextLost()) {
+      log.debug("processUsageData: WebGL context is lost, skipping");
+      return;
+    }
     this.isBusy = true;
     this.triggerUsage = false;
     const now2 = ++this.timeStamp;
@@ -49951,6 +50043,10 @@ class VolumeDataManager {
       log.error("pagetable texture not initialized");
       return;
     }
+    if (this.isContextLost()) {
+      log.warn("WebGL context is lost, skipping channel purge");
+      return;
+    }
     this.channels.downsampleMin[ptChannelIndex] = void 0;
     this.channels.downsampleMax[ptChannelIndex] = void 0;
     this.channels.zarrMappings[ptChannelIndex] = void 0;
@@ -49991,6 +50087,10 @@ class VolumeDataManager {
   // Update a PT entry
   _updatePTEntry(ptX, ptY, ptZ, ptVal) {
     if (!this.ptTHREE) return;
+    if (this.isContextLost()) {
+      log.warn("WebGL context is lost, skipping PT entry update");
+      return;
+    }
     const { gl } = this;
     const texPT = this.renderer.properties.get(this.ptTHREE).__webglTexture;
     gl.activeTexture(gl.TEXTURE0);
@@ -50052,6 +50152,11 @@ class VolumeDataManager {
   * 4. Upload one brick + PT entry                                *
   * ------------------------------------------------------------- */
   async _uploadBrick(ptCoord, bcSlot) {
+    log.debug("uploading brick", ptCoord, bcSlot);
+    if (this.isContextLost()) {
+      log.warn("WebGL context is lost, skipping brick upload");
+      return;
+    }
     if (ptCoord.x >= this.PT.xExtent || ptCoord.y >= this.PT.yExtent || ptCoord.z >= this.PT.zTotal || ptCoord.x < 0 || ptCoord.y < 0 || ptCoord.z < 0) {
       log.error("this.PT", this.PT);
       log.error("ptCoord out of bounds", ptCoord);
@@ -50063,10 +50168,40 @@ class VolumeDataManager {
       ptCoord.z,
       { PT_zExtent: this.PT.zExtent, PT_z0Extent: this.PT.z0Extent, PT_anchors: this.PT.anchors }
     );
+    if (!this.channels || !this.channels.zarrMappings || this.channels.zarrMappings.length === 0) {
+      log.error("Channel mappings not initialized, skipping brick upload");
+      return;
+    }
+    if (channel < 0 || channel >= this.channels.zarrMappings.length) {
+      log.error("Channel index out of bounds", { channel, mappingsLength: this.channels.zarrMappings.length });
+      return;
+    }
     const zarrChannel = this.channels.zarrMappings[channel];
     if (zarrChannel === void 0 || zarrChannel === -1) {
-      log.error("zarrChannel is undefined or -1", zarrChannel);
-      return;
+      log.warn("zarrChannel is undefined or -1", {
+        zarrChannel,
+        channel,
+        ptCoord,
+        channelMappings: this.channels.zarrMappings,
+        contextLost: this.isContextLost()
+      });
+      if (this._lastChannelConfig && this._lastChannelConfig.zarrMappings[channel] !== void 0) {
+        log.warn("Attempting to use last known channel config");
+        this.channels.zarrMappings = [...this._lastChannelConfig.zarrMappings];
+        this.channels.colorMappings = [...this._lastChannelConfig.colorMappings];
+        this.channels.downsampleMin = [...this._lastChannelConfig.downsampleMin];
+        this.channels.downsampleMax = [...this._lastChannelConfig.downsampleMax];
+        const restoredZarrChannel = this.channels.zarrMappings[channel];
+        if (restoredZarrChannel !== void 0 && restoredZarrChannel !== -1) {
+          log.debug("Successfully restored channel mapping, continuing with upload");
+        } else {
+          log.error("Could not restore valid channel mapping, aborting brick upload");
+          return;
+        }
+      } else {
+        log.error("No fallback channel config available, aborting brick upload");
+        return;
+      }
     }
     log.debug("starting to load zarr chunk", { resolution, z, y, x, zarrChannel });
     let chunk = await this.loadZarrChunk(0, zarrChannel, z, y, x, resolution);
@@ -50157,6 +50292,7 @@ class VolumeDataManager {
   async handleBrickRequests(ptRequests) {
     if (ptRequests.length === 0) return;
     const slots = this._allocateBCSlots(ptRequests.length);
+    log.debug("Handling brick requests:", { requestCount: ptRequests.length, slotCount: slots.length });
     log.debug("handleBrickRequests: starting for loop");
     for (let i2 = 0; i2 < ptRequests.length; ++i2) {
       log.debug("uploading brick", ptRequests[i2], slots[i2]);
@@ -52815,6 +52951,7 @@ function VolumeView(props) {
   const RENDER_PRIORITY = 1;
   useFrame((state, delta, xrFrame) => {
     if (!mrtRef.current || !dataManager || !renderManager) return;
+    if (!renderState.shader) return;
     const {
       gl: frameGl,
       camera: frameCamera,

package/dist-tsc/VolumeDataManager.d.ts

@@ -39,6 +39,9 @@ export class VolumeDataManager {
     constructor(glParam: any);
     gl: any;
     renderer: any;
+    _originalGlParam: any;
+    _isContextLost: boolean;
+    _contextRestoredCallbacks: any[];
     deviceLimits: {
         maxTextureSize: any;
         max3DTextureSize: any;
@@ -93,6 +96,33 @@ export class VolumeDataManager {
     needsBailout: boolean;
     initStatus: string;
     initError: any;
+    _lastChannelConfig: {
+        zarrMappings: never[];
+        colorMappings: never[];
+        downsampleMin: never[];
+        downsampleMax: never[];
+    } | {
+        zarrMappings: never[];
+        colorMappings: never[];
+        downsampleMin: never[];
+        downsampleMax: never[];
+    } | null;
+    /**
+     * Handle WebGL context loss
+     */
+    _handleContextLost(event: any): void;
+    /**
+     * Handle WebGL context restoration
+     */
+    _handleContextRestored(event: any): void;
+    /**
+     * Check if WebGL context is lost
+     */
+    isContextLost(): any;
+    /**
+     * Register a callback to be called when context is restored
+     */
+    onContextRestored(callback: any): void;
     initImages(images: any, imageLayerScopes: any): void;
     images: any;
     imageLayerScopes: any;

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,0BAyJC;IA5IG,QAAyB;IAa3B,cAAwB;IA8BxB;;;;;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;IAIvB,qDAIC;IAFC,YAAoB;IACpB,sBAAwC;IAG1C;;;;;OAKG;IACH,mBAFa,OAAO,CAAC,MAAM,CAAC,CA8S3B;IAjQG,kBAAmD;IAmQvD;;;;;;;;OAQG;IACH,mBAqBC;IASD,6BAKC;IAED,wCA6GC;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,+CAmBC;IAGD,6CAmDC;IAGD,gCAcC;IAED,yCA6CC;IAGD,+DAeC;IAKD;;;;OAIG;IACH,oBAHW,MAAM,GACJ;QAAE,OAAO,MAAC;QAAC,CAAC,MAAC;QAAC,CAAC,MAAC;QAAC,CAAC,MAAA;KAAE,EAAE,CAyClC;IAKD,uDA0IC;IAKD,oDAyCC;IAKD,kBAWC;CACF;8BA79CM,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,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"}

package/dist-tsc/VolumeDataManager.js

@@ -300,6 +300,7 @@ export class VolumeDataManager {
     constructor(glParam) {
         logWithColor('CLASS INITIALIZING');
         // this.store = new zarrita.FetchStore(url); // TODO: use this.images instead
+        log.debug('VolumeDataManager constructor', { glParam, glParamContext: glParam.getContext?.() });
         const gl = glParam.getContext?.() || glParam;
         const renderer = glParam;
         // this.images = images;
@@ -335,12 +336,22 @@ export class VolumeDataManager {
                     };
                     return defaults[param] || 0;
                 },
+                isContextLost: () => false,
                 MAX_TEXTURE_SIZE: 'MAX_TEXTURE_SIZE',
                 MAX_3D_TEXTURE_SIZE: 'MAX_3D_TEXTURE_SIZE',
                 MAX_RENDERBUFFER_SIZE: 'MAX_RENDERBUFFER_SIZE',
                 MAX_UNIFORM_BUFFER_BINDINGS: 'MAX_UNIFORM_BUFFER_BINDINGS',
             };
         }
+        // Store references for context loss handling
+        this._originalGlParam = glParam;
+        this._isContextLost = false;
+        this._contextRestoredCallbacks = [];
+        // Add context loss event listeners if we have a real WebGL context
+        if (this.gl && this.gl.canvas) {
+            this.gl.canvas.addEventListener('webglcontextlost', this._handleContextLost.bind(this));
+            this.gl.canvas.addEventListener('webglcontextrestored', this._handleContextRestored.bind(this));
+        }
         log.debug('GL CONSTANTS');
         log.debug(this.gl);
         log.debug(this.gl.TEXTURE0);
@@ -430,8 +441,86 @@ export class VolumeDataManager {
         // Add initialization status
         this.initStatus = INIT_STATUS.NOT_STARTED;
         this.initError = null;
+        // Store the last known configuration for context restoration
+        this._lastChannelConfig = null;
         logWithColor('VolumeDataManager constructor complete');
     }
+    /**
+     * Handle WebGL context loss
+     */
+    _handleContextLost(event) {
+        logWithColor('CONTEXT LOST');
+        log.warn('WebGL context lost, preventing default and setting flag');
+        event.preventDefault();
+        this._isContextLost = true;
+        // Store current channel configuration for restoration
+        if (this.channels && this.channels.zarrMappings) {
+            this._lastChannelConfig = {
+                zarrMappings: [...this.channels.zarrMappings],
+                colorMappings: [...this.channels.colorMappings],
+                downsampleMin: [...this.channels.downsampleMin],
+                downsampleMax: [...this.channels.downsampleMax],
+            };
+        }
+    }
+    /**
+     * Handle WebGL context restoration
+     */
+    _handleContextRestored(event) {
+        logWithColor('CONTEXT RESTORED');
+        log.warn('WebGL context restored, reinitializing textures');
+        this._isContextLost = false;
+        // Reinitialize WebGL context reference
+        if (this._originalGlParam && this._originalGlParam.getContext) {
+            this.gl = this._originalGlParam.getContext();
+        }
+        // Restore channel configuration if available
+        if (this._lastChannelConfig) {
+            this.channels.zarrMappings = [...this._lastChannelConfig.zarrMappings];
+            this.channels.colorMappings = [...this._lastChannelConfig.colorMappings];
+            this.channels.downsampleMin = [...this._lastChannelConfig.downsampleMin];
+            this.channels.downsampleMax = [...this._lastChannelConfig.downsampleMax];
+            log.debug('Restored channel configuration after context loss');
+        }
+        // Reinitialize textures if they were previously created
+        if (this.PT && this.zarrStore && this.zarrStore.brickLayout) {
+            try {
+                this.initMRMCPT();
+                log.debug('Successfully reinitialized MRMCPT after context restoration');
+            }
+            catch (error) {
+                log.error('Failed to reinitialize MRMCPT after context restoration:', error);
+            }
+        }
+        // Call any registered restoration callbacks
+        this._contextRestoredCallbacks.forEach((callback) => {
+            try {
+                callback();
+            }
+            catch (error) {
+                log.error('Error in context restored callback:', error);
+            }
+        });
+    }
+    /**
+     * Check if WebGL context is lost
+     */
+    isContextLost() {
+        if (this._isContextLost)
+            return true;
+        if (this.gl && typeof this.gl.isContextLost === 'function') {
+            return this.gl.isContextLost();
+        }
+        return false;
+    }
+    /**
+     * Register a callback to be called when context is restored
+     */
+    onContextRestored(callback) {
+        if (typeof callback === 'function') {
+            this._contextRestoredCallbacks.push(callback);
+        }
+    }
     initImages(images, imageLayerScopes) {
         logWithColor('INIT IMAGES');
         this.images = images;
@@ -823,6 +912,13 @@ export class VolumeDataManager {
         log.debug('newColorMappings', newColorMappings);
         this.channels.colorMappings = newColorMappings;
         log.debug('updatedChannels', this.channels);
+        // Store the updated configuration for context restoration
+        this._lastChannelConfig = {
+            zarrMappings: [...this.channels.zarrMappings],
+            colorMappings: [...this.channels.colorMappings],
+            downsampleMin: [...this.channels.downsampleMin],
+            downsampleMax: [...this.channels.downsampleMax],
+        };
     }
     /**
      * Try to load a resolution level
@@ -943,6 +1039,11 @@ export class VolumeDataManager {
             log.debug('processRequestData: already busy, skipping');
             return;
         }
+        // Check for context loss
+        if (this.isContextLost()) {
+            log.debug('processRequestData: WebGL context is lost, skipping');
+            return;
+        }
         this.isBusy = true;
         this.triggerRequest = false;
         const { requests, origRequestCount } = _requestBufferToRequestObjects(buffer, this.k);
@@ -961,6 +1062,11 @@ export class VolumeDataManager {
             this.needsBailout = true; // Set a flag to indicate we need to bail out of processing requests
             return;
         }
+        // Check for context loss
+        if (this.isContextLost()) {
+            log.debug('processUsageData: WebGL context is lost, skipping');
+            return;
+        }
         this.isBusy = true;
         this.triggerUsage = false;
         const now = ++this.timeStamp;
@@ -1019,6 +1125,11 @@ export class VolumeDataManager {
             log.error('pagetable texture not initialized');
             return;
         }
+        // Check for context loss before proceeding
+        if (this.isContextLost()) {
+            log.warn('WebGL context is lost, skipping channel purge');
+            return;
+        }
         this.channels.downsampleMin[ptChannelIndex] = undefined;
         this.channels.downsampleMax[ptChannelIndex] = undefined;
         this.channels.zarrMappings[ptChannelIndex] = undefined;
@@ -1050,6 +1161,11 @@ export class VolumeDataManager {
     _updatePTEntry(ptX, ptY, ptZ, ptVal) {
         if (!this.ptTHREE)
             return;
+        // Check for context loss before proceeding
+        if (this.isContextLost()) {
+            log.warn('WebGL context is lost, skipping PT entry update');
+            return;
+        }
         const { gl } = this;
         const texPT = this.renderer.properties.get(this.ptTHREE).__webglTexture;
         gl.activeTexture(gl.TEXTURE0);
@@ -1109,7 +1225,12 @@ export class VolumeDataManager {
    * 4. Upload one brick + PT entry                                *
    * ------------------------------------------------------------- */
     async _uploadBrick(ptCoord, bcSlot) {
-        // log.debug('uploading brick', ptCoord, bcSlot);
+        log.debug('uploading brick', ptCoord, bcSlot);
+        // Check for context loss before proceeding
+        if (this.isContextLost()) {
+            log.warn('WebGL context is lost, skipping brick upload');
+            return;
+        }
         if (ptCoord.x >= this.PT.xExtent
             || ptCoord.y >= this.PT.yExtent
             || ptCoord.z >= this.PT.zTotal
@@ -1124,10 +1245,45 @@ export class VolumeDataManager {
         // log.debug('this.PT', this.PT);
         /* 4.1 fetch chunk from Zarr */
         const { channel, resolution, x, y, z } = _ptToZarr(ptCoord.x, ptCoord.y, ptCoord.z, { PT_zExtent: this.PT.zExtent, PT_z0Extent: this.PT.z0Extent, PT_anchors: this.PT.anchors });
+        // Check if channel mappings are valid
+        if (!this.channels || !this.channels.zarrMappings || this.channels.zarrMappings.length === 0) {
+            log.error('Channel mappings not initialized, skipping brick upload');
+            return;
+        }
+        if (channel < 0 || channel >= this.channels.zarrMappings.length) {
+            log.error('Channel index out of bounds', { channel, mappingsLength: this.channels.zarrMappings.length });
+            return;
+        }
         const zarrChannel = this.channels.zarrMappings[channel];
         if (zarrChannel === undefined || zarrChannel === -1) {
-            log.error('zarrChannel is undefined or -1', zarrChannel);
-            return;
+            log.warn('zarrChannel is undefined or -1', {
+                zarrChannel,
+                channel,
+                ptCoord,
+                channelMappings: this.channels.zarrMappings,
+                contextLost: this.isContextLost(),
+            });
+            // If this happens due to context loss, try to restore from last known config
+            if (this._lastChannelConfig && this._lastChannelConfig.zarrMappings[channel] !== undefined) {
+                log.warn('Attempting to use last known channel config');
+                this.channels.zarrMappings = [...this._lastChannelConfig.zarrMappings];
+                this.channels.colorMappings = [...this._lastChannelConfig.colorMappings];
+                this.channels.downsampleMin = [...this._lastChannelConfig.downsampleMin];
+                this.channels.downsampleMax = [...this._lastChannelConfig.downsampleMax];
+                // Retry with restored config
+                const restoredZarrChannel = this.channels.zarrMappings[channel];
+                if (restoredZarrChannel !== undefined && restoredZarrChannel !== -1) {
+                    log.debug('Successfully restored channel mapping, continuing with upload');
+                }
+                else {
+                    log.error('Could not restore valid channel mapping, aborting brick upload');
+                    return;
+                }
+            }
+            else {
+                log.error('No fallback channel config available, aborting brick upload');
+                return;
+            }
         }
         log.debug('starting to load zarr chunk', { resolution, z, y, x, zarrChannel });
         let chunk = await this.loadZarrChunk(0, zarrChannel, z, y, x, resolution);
@@ -1229,6 +1385,7 @@ export class VolumeDataManager {
         /* <= k requests, allocate same number of bricks */
         const slots = this._allocateBCSlots(ptRequests.length);
         // log.debug('slots', slots);
+        log.debug('Handling brick requests:', { requestCount: ptRequests.length, slotCount: slots.length });
         /* 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) {

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

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

package/dist-tsc/VolumeView.js

@@ -407,6 +407,10 @@ export function VolumeView(props) {
         // Reference: https://r3f.docs.pmnd.rs/advanced/pitfalls#%E2%9D%8C-setstate-in-useframe-is-bad
         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;
         // Receive the same state as the useThree hook.
         const { gl: frameGl, camera: frameCamera, scene: frameScene, clock, } = state;
         if (!stillRef.current) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/spatial-accelerated",
-  "version": "3.8.5",
+  "version": "3.8.7",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -28,16 +28,16 @@
     "short-number": "^1.0.6",
     "three": "^0.154.0",
     "zarrita": "0.5.4",
-    "@vitessce/constants-internal": "3.8.5",
-    "@vitessce/gl": "3.8.5",
-    "@vitessce/legend": "3.8.5",
-    "@vitessce/sets-utils": "3.8.5",
-    "@vitessce/spatial-utils": "3.8.5",
-    "@vitessce/tooltip": "3.8.5",
-    "@vitessce/utils": "3.8.5",
-    "@vitessce/vit-s": "3.8.5",
-    "@vitessce/styles": "3.8.5",
-    "@vitessce/globals": "3.8.5"
+    "@vitessce/constants-internal": "3.8.7",
+    "@vitessce/gl": "3.8.7",
+    "@vitessce/legend": "3.8.7",
+    "@vitessce/sets-utils": "3.8.7",
+    "@vitessce/spatial-utils": "3.8.7",
+    "@vitessce/tooltip": "3.8.7",
+    "@vitessce/utils": "3.8.7",
+    "@vitessce/vit-s": "3.8.7",
+    "@vitessce/styles": "3.8.7",
+    "@vitessce/globals": "3.8.7"
   },
   "devDependencies": {
     "@types/three": "^0.154.0",

package/src/VolumeDataManager.js

@@ -351,6 +351,8 @@ export class VolumeDataManager {
     logWithColor('CLASS INITIALIZING');
     // this.store = new zarrita.FetchStore(url); // TODO: use this.images instead
 
+    log.debug('VolumeDataManager constructor', { glParam, glParamContext: glParam.getContext?.() });
+
     const gl = glParam.getContext?.() || glParam;
     const renderer = glParam;
 
@@ -389,6 +391,7 @@ export class VolumeDataManager {
           };
           return defaults[param] || 0;
         },
+        isContextLost: () => false,
         MAX_TEXTURE_SIZE: 'MAX_TEXTURE_SIZE',
         MAX_3D_TEXTURE_SIZE: 'MAX_3D_TEXTURE_SIZE',
         MAX_RENDERBUFFER_SIZE: 'MAX_RENDERBUFFER_SIZE',
@@ -396,6 +399,17 @@ export class VolumeDataManager {
       };
     }
 
+    // Store references for context loss handling
+    this._originalGlParam = glParam;
+    this._isContextLost = false;
+    this._contextRestoredCallbacks = [];
+
+    // Add context loss event listeners if we have a real WebGL context
+    if (this.gl && this.gl.canvas) {
+      this.gl.canvas.addEventListener('webglcontextlost', this._handleContextLost.bind(this));
+      this.gl.canvas.addEventListener('webglcontextrestored', this._handleContextRestored.bind(this));
+    }
+
     log.debug('GL CONSTANTS');
     log.debug(this.gl);
     log.debug(this.gl.TEXTURE0);
@@ -499,9 +513,95 @@ export class VolumeDataManager {
     // Add initialization status
     this.initStatus = INIT_STATUS.NOT_STARTED;
     this.initError = null;
+
+    // Store the last known configuration for context restoration
+    this._lastChannelConfig = null;
+
     logWithColor('VolumeDataManager constructor complete');
   }
 
+  /**
+   * Handle WebGL context loss
+   */
+  _handleContextLost(event) {
+    logWithColor('CONTEXT LOST');
+    log.warn('WebGL context lost, preventing default and setting flag');
+    event.preventDefault();
+    this._isContextLost = true;
+
+    // Store current channel configuration for restoration
+    if (this.channels && this.channels.zarrMappings) {
+      this._lastChannelConfig = {
+        zarrMappings: [...this.channels.zarrMappings],
+        colorMappings: [...this.channels.colorMappings],
+        downsampleMin: [...this.channels.downsampleMin],
+        downsampleMax: [...this.channels.downsampleMax],
+      };
+    }
+  }
+
+  /**
+   * Handle WebGL context restoration
+   */
+  _handleContextRestored(event) {
+    logWithColor('CONTEXT RESTORED');
+    log.warn('WebGL context restored, reinitializing textures');
+    this._isContextLost = false;
+
+    // Reinitialize WebGL context reference
+    if (this._originalGlParam && this._originalGlParam.getContext) {
+      this.gl = this._originalGlParam.getContext();
+    }
+
+    // Restore channel configuration if available
+    if (this._lastChannelConfig) {
+      this.channels.zarrMappings = [...this._lastChannelConfig.zarrMappings];
+      this.channels.colorMappings = [...this._lastChannelConfig.colorMappings];
+      this.channels.downsampleMin = [...this._lastChannelConfig.downsampleMin];
+      this.channels.downsampleMax = [...this._lastChannelConfig.downsampleMax];
+      log.debug('Restored channel configuration after context loss');
+    }
+
+    // Reinitialize textures if they were previously created
+    if (this.PT && this.zarrStore && this.zarrStore.brickLayout) {
+      try {
+        this.initMRMCPT();
+        log.debug('Successfully reinitialized MRMCPT after context restoration');
+      } catch (error) {
+        log.error('Failed to reinitialize MRMCPT after context restoration:', error);
+      }
+    }
+
+    // Call any registered restoration callbacks
+    this._contextRestoredCallbacks.forEach((callback) => {
+      try {
+        callback();
+      } catch (error) {
+        log.error('Error in context restored callback:', error);
+      }
+    });
+  }
+
+  /**
+   * Check if WebGL context is lost
+   */
+  isContextLost() {
+    if (this._isContextLost) return true;
+    if (this.gl && typeof this.gl.isContextLost === 'function') {
+      return this.gl.isContextLost();
+    }
+    return false;
+  }
+
+  /**
+   * Register a callback to be called when context is restored
+   */
+  onContextRestored(callback) {
+    if (typeof callback === 'function') {
+      this._contextRestoredCallbacks.push(callback);
+    }
+  }
+
   initImages(images, imageLayerScopes) {
     logWithColor('INIT IMAGES');
     this.images = images;
@@ -971,6 +1071,14 @@ export class VolumeDataManager {
     this.channels.colorMappings = newColorMappings;
 
     log.debug('updatedChannels', this.channels);
+
+    // Store the updated configuration for context restoration
+    this._lastChannelConfig = {
+      zarrMappings: [...this.channels.zarrMappings],
+      colorMappings: [...this.channels.colorMappings],
+      downsampleMin: [...this.channels.downsampleMin],
+      downsampleMax: [...this.channels.downsampleMax],
+    };
   }
 
   /**
@@ -1107,6 +1215,13 @@ export class VolumeDataManager {
       log.debug('processRequestData: already busy, skipping');
       return;
     }
+
+    // Check for context loss
+    if (this.isContextLost()) {
+      log.debug('processRequestData: WebGL context is lost, skipping');
+      return;
+    }
+
     this.isBusy = true;
     this.triggerRequest = false;
 
@@ -1130,6 +1245,13 @@ export class VolumeDataManager {
       this.needsBailout = true; // Set a flag to indicate we need to bail out of processing requests
       return;
     }
+
+    // Check for context loss
+    if (this.isContextLost()) {
+      log.debug('processUsageData: WebGL context is lost, skipping');
+      return;
+    }
+
     this.isBusy = true;
     this.triggerUsage = false;
 
@@ -1203,6 +1325,12 @@ export class VolumeDataManager {
       return;
     }
 
+    // Check for context loss before proceeding
+    if (this.isContextLost()) {
+      log.warn('WebGL context is lost, skipping channel purge');
+      return;
+    }
+
     this.channels.downsampleMin[ptChannelIndex] = undefined;
     this.channels.downsampleMax[ptChannelIndex] = undefined;
     this.channels.zarrMappings[ptChannelIndex] = undefined;
@@ -1245,6 +1373,12 @@ export class VolumeDataManager {
   _updatePTEntry(ptX, ptY, ptZ, ptVal) {
     if (!this.ptTHREE) return;
 
+    // Check for context loss before proceeding
+    if (this.isContextLost()) {
+      log.warn('WebGL context is lost, skipping PT entry update');
+      return;
+    }
+
     const { gl } = this;
     const texPT = this.renderer.properties.get(this.ptTHREE).__webglTexture;
     gl.activeTexture(gl.TEXTURE0);
@@ -1312,7 +1446,13 @@ export class VolumeDataManager {
  * 4. Upload one brick + PT entry                                *
  * ------------------------------------------------------------- */
   async _uploadBrick(ptCoord, bcSlot) {
-    // log.debug('uploading brick', ptCoord, bcSlot);
+    log.debug('uploading brick', ptCoord, bcSlot);
+
+    // Check for context loss before proceeding
+    if (this.isContextLost()) {
+      log.warn('WebGL context is lost, skipping brick upload');
+      return;
+    }
 
     if (ptCoord.x >= this.PT.xExtent
       || ptCoord.y >= this.PT.yExtent
@@ -1336,11 +1476,48 @@ export class VolumeDataManager {
       { PT_zExtent: this.PT.zExtent, PT_z0Extent: this.PT.z0Extent, PT_anchors: this.PT.anchors },
     );
 
+    // Check if channel mappings are valid
+    if (!this.channels || !this.channels.zarrMappings || this.channels.zarrMappings.length === 0) {
+      log.error('Channel mappings not initialized, skipping brick upload');
+      return;
+    }
+
+    if (channel < 0 || channel >= this.channels.zarrMappings.length) {
+      log.error('Channel index out of bounds', { channel, mappingsLength: this.channels.zarrMappings.length });
+      return;
+    }
+
     const zarrChannel = this.channels.zarrMappings[channel];
 
     if (zarrChannel === undefined || zarrChannel === -1) {
-      log.error('zarrChannel is undefined or -1', zarrChannel);
-      return;
+      log.warn('zarrChannel is undefined or -1', {
+        zarrChannel,
+        channel,
+        ptCoord,
+        channelMappings: this.channels.zarrMappings,
+        contextLost: this.isContextLost(),
+      });
+
+      // If this happens due to context loss, try to restore from last known config
+      if (this._lastChannelConfig && this._lastChannelConfig.zarrMappings[channel] !== undefined) {
+        log.warn('Attempting to use last known channel config');
+        this.channels.zarrMappings = [...this._lastChannelConfig.zarrMappings];
+        this.channels.colorMappings = [...this._lastChannelConfig.colorMappings];
+        this.channels.downsampleMin = [...this._lastChannelConfig.downsampleMin];
+        this.channels.downsampleMax = [...this._lastChannelConfig.downsampleMax];
+
+        // Retry with restored config
+        const restoredZarrChannel = this.channels.zarrMappings[channel];
+        if (restoredZarrChannel !== undefined && restoredZarrChannel !== -1) {
+          log.debug('Successfully restored channel mapping, continuing with upload');
+        } else {
+          log.error('Could not restore valid channel mapping, aborting brick upload');
+          return;
+        }
+      } else {
+        log.error('No fallback channel config available, aborting brick upload');
+        return;
+      }
     }
 
     log.debug('starting to load zarr chunk', { resolution, z, y, x, zarrChannel });
@@ -1467,6 +1644,8 @@ export class VolumeDataManager {
     const slots = this._allocateBCSlots(ptRequests.length);
     // log.debug('slots', slots);
 
+    log.debug('Handling brick requests:', { requestCount: ptRequests.length, slotCount: slots.length });
+
     /* 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) {

package/src/VolumeView.js

@@ -495,6 +495,10 @@ export function VolumeView(props) {
     // Reference: https://r3f.docs.pmnd.rs/advanced/pitfalls#%E2%9D%8C-setstate-in-useframe-is-bad
     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;
+
     // Receive the same state as the useThree hook.
     const {
       gl: frameGl,