@aguacerowx/react-native 0.0.8 → 0.0.12

package/lib/module/src/WeatherLayerManager.js

@@ -5,15 +5,21 @@ import { AguaceroCore, getUnitConversionFunction } from '@aguacerowx/javascript-
 import { AguaceroContext } from './AguaceroContext';
 import { GridRenderLayer } from './GridRenderLayer';
 import { fromByteArray } from 'base64-js';
-import { NativeModules } from 'react-native';
+import { Platform, NativeModules } from 'react-native';
 import { mapRegistry } from './MapRegistry';
+console.log("--- Aguacero Native Module Initial State Check ---");
+console.log("All NativeModules:", Object.keys(NativeModules));
+console.log("WeatherFrameProcessorModule available?:", !!NativeModules.WeatherFrameProcessorModule);
+console.log("InspectorModule available?:", !!NativeModules.InspectorModule);
+console.log("GridRenderLayerManager available?:", !!NativeModules.GridRenderLayerManager);
+console.log("-------------------------------------------------");
 const {
   WeatherFrameProcessorModule,
   InspectorModule
 } = NativeModules;
 
-/**
- * A helper function to generate the raw RGBA byte buffer for the colormap texture.
+/**
+ * A helper function to generate the raw RGBA byte buffer for the colormap texture.
  */
 const _generateColormapBytes = colormap => {
   const width = 256;
@@ -88,6 +94,7 @@ export const WeatherLayerManager = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Track if we've done the initial load
   const hasInitialLoad = useRef(false);
+  const hasPreloadedRef = useRef(false);
 
   // Track the last state we processed to avoid redundant updates
   const lastProcessedState = useRef(null);
@@ -129,6 +136,12 @@ export const WeatherLayerManager = /*#__PURE__*/forwardRef((props, ref) => {
     };
   }, [core]);
   const preloadAllFramesToDisk = state => {
+    if (hasPreloadedRef.current) {
+      console.log('✅ [Preload] Gating preload; already initiated for this dataset.');
+      return;
+    }
+    hasPreloadedRef.current = true;
+    console.log('🚀 [Preload] Initiating parallel preload for new dataset...');
     const {
       isMRMS,
       model,
@@ -137,13 +150,49 @@ export const WeatherLayerManager = /*#__PURE__*/forwardRef((props, ref) => {
       variable,
       units,
       availableHours,
-      availableTimestamps
+      availableTimestamps,
+      forecastHour,
+      mrmsTimestamp
     } = state;
+    if (!cachedGeometry.current || !cachedColormap.current) {
+      const gridModel = isMRMS ? 'mrms' : model;
+      const {
+        corners,
+        gridDef
+      } = core._getGridCornersAndDef(gridModel);
+      gridLayerRef.current.updateGeometry(corners, gridDef);
+      cachedGeometry.current = {
+        model: gridModel,
+        variable
+      };
+      const {
+        colormap,
+        baseUnit
+      } = core._getColormapForVariable(variable);
+      const toUnit = core._getTargetUnit(baseUnit, units);
+      const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
+      const dataRange = [finalColormap[0], finalColormap[finalColormap.length - 2]];
+      const colormapBytes = _generateColormapBytes(finalColormap);
+      const colormapAsBase64 = fromByteArray(colormapBytes);
+      gridLayerRef.current.updateColormapTexture(colormapAsBase64);
+      cachedColormap.current = {
+        key: `${variable}-${units}`
+      };
+      cachedDataRange.current = dataRange;
+      setRenderProps({
+        opacity: state.opacity,
+        dataRange: dataRange
+      });
+      hasInitialLoad.current = true;
+    }
     const allFrames = isMRMS ? availableTimestamps : availableHours;
     if (!allFrames || allFrames.length === 0) {
       console.warn('🟡 [preloadAllFramesToDisk] No frames available to download.');
       return;
     }
+    const currentFrame = isMRMS ? mrmsTimestamp : forecastHour;
+    const prioritizedFrames = [currentFrame, ...allFrames.filter(frame => frame !== currentFrame)];
+    console.log(`[Preload] Prioritizing frame: ${currentFrame}. Total frames: ${prioritizedFrames.length}`);
     const {
       corners,
       gridDef
@@ -152,14 +201,10 @@ export const WeatherLayerManager = /*#__PURE__*/forwardRef((props, ref) => {
       nx,
       ny
     } = gridDef.grid_params;
-    let preloadedCount = 0;
-    let skippedCount = 0;
-    let errorCount = 0;
-    for (const frame of allFrames) {
-      const cacheKey = isMRMS ? `mrms-${frame}-${variable}-${units}` : `${model}-${date}-${run}-${frame}-${variable}-${units}`;
+    prioritizedFrames.forEach((frame, index) => {
+      const cacheKey = isMRMS ? `mrms-${frame}-${variable}` : `${model}-${date}-${run}-${frame}-${variable}`;
       if (preloadedDataCache.current.has(cacheKey)) {
-        skippedCount++;
-        continue;
+        return; // Use 'return' here as it's a forEach loop
       }
       let resourcePath;
       if (isMRMS) {
@@ -177,39 +222,97 @@ export const WeatherLayerManager = /*#__PURE__*/forwardRef((props, ref) => {
         apiKey: core.apiKey,
         bundleId: core.bundleId
       };
-      WeatherFrameProcessorModule.processFrame(options, (error, result) => {
-        if (error || !result || !result.filePath) {
-          errorCount++;
-          console.warn(`⚠️ [preloadAllFramesToDisk] Failed frame ${frame}:`, error || "No filePath");
+      WeatherFrameProcessorModule.processFrame(options).then(result => {
+        if (!result || !result.filePath) {
+          console.warn(`⚠️ [preloadAllFramesToDisk] Failed frame ${frame}: No filePath`);
           return;
         }
-        preloadedCount++;
-        preloadedDataCache.current.set(cacheKey, {
+        const {
+          baseUnit
+        } = core._getColormapForVariable(variable);
+        const toUnit = core._getTargetUnit(baseUnit, units);
+        let dataScale = result.scale;
+        let dataOffset = result.offset;
+
+        // Calculate converted values for immediate use
+        let convertedScale = dataScale;
+        let convertedOffset = dataOffset;
+        if (baseUnit !== toUnit) {
+          const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
+          if (conversionFunc) {
+            if (result.scaleType === 'sqrt') {
+              const physicalAtOffset = dataOffset * dataOffset;
+              const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+              const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+              const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+              convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+              const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+              convertedScale = newOffsetPlusScale - convertedOffset;
+            } else {
+              convertedOffset = conversionFunc(dataOffset);
+              const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+              convertedScale = convertedOffsetPlusScale - convertedOffset;
+            }
+          }
+        }
+
+        // Store with ORIGINAL values for unit conversion later
+        const frameData = {
           filePath: result.filePath,
           nx,
           ny,
-          scale: result.scale,
-          offset: result.offset,
+          scale: convertedScale,
+          // Current converted values
+          offset: convertedOffset,
           missing: result.missing,
           corners,
           gridDef,
           scaleType: result.scaleType,
           originalScale: result.scale,
-          // ADD THIS
-          originalOffset: result.offset // ADD THIS
-        });
-
-        // ADD THIS: If this frame matches the current state, update GPU immediately
-        if (isMRMS && frame === state.mrmsTimestamp || !isMRMS && frame === state.forecastHour) {
-          console.log(`🎯 [preloadAllFramesToDisk] Current frame loaded, updating GPU`);
-          updateGPUWithCachedData(state);
+          // CRITICAL: Always original
+          originalOffset: result.offset // CRITICAL: Always original
+        };
+        preloadedDataCache.current.set(cacheKey, frameData);
+        const isCurrentFrame = index === 0;
+        if (isCurrentFrame) {
+          console.log(`🎯 [Preload] Using FAST LANE to process and draw current frame (${frame}) immediately.`);
+          gridLayerRef.current.updateDataTextureFromFile(frameData.filePath, frameData.nx, frameData.ny, frameData.scale, frameData.offset, frameData.missing, frameData.scaleType);
+          currentGridDataRef.current = {
+            nx: frameData.nx,
+            ny: frameData.ny,
+            scale: frameData.scale,
+            offset: frameData.offset,
+            missing: frameData.missing,
+            gridDef: frameData.gridDef,
+            variable: variable,
+            units: units
+          };
+        } else {
+          if (Platform.OS === 'ios' && gridLayerRef.current.primeGpuCache) {
+            const frameInfoForGpu = {
+              [cacheKey]: {
+                filePath: frameData.filePath,
+                nx: frameData.nx,
+                ny: frameData.ny,
+                scale: frameData.scale,
+                // Current converted scale
+                offset: frameData.offset,
+                // Current converted offset
+                missing: frameData.missing,
+                scaleType: frameData.scaleType || 'linear',
+                originalScale: frameData.originalScale,
+                // ADD THIS
+                originalOffset: frameData.originalOffset // ADD THIS
+              }
+            };
+            gridLayerRef.current.primeGpuCache(frameInfoForGpu);
+          }
         }
+      }).catch(error => {
+        console.warn(`⚠️ [preloadAllFramesToDisk] Failed frame ${frame}:`, error);
       });
-    }
+    });
   };
-
-  // In WeatherLayerManager.js - Add extensive logging throughout
-
   const updateGPUWithCachedData = state => {
     const {
       model,
@@ -221,16 +324,41 @@ export const WeatherLayerManager = /*#__PURE__*/forwardRef((props, ref) => {
       isMRMS,
       mrmsTimestamp
     } = state;
-    const cacheKey = isMRMS ? `mrms-${mrmsTimestamp}-${variable}-${units}` : `${model}-${date}-${run}-${forecastHour}-${variable}-${units}`;
+    const cacheKey = isMRMS ? `mrms-${mrmsTimestamp}-${variable}` : `${model}-${date}-${run}-${forecastHour}-${variable}`;
+    if (Platform.OS === 'ios' && gridLayerRef.current.setActiveFrame) {
+      // Get the cached data BEFORE calling setActiveFrame
+      const cachedData = preloadedDataCache.current.get(cacheKey);
+      if (cachedData) {
+        currentGridDataRef.current = {
+          nx: cachedData.nx,
+          ny: cachedData.ny,
+          scale: cachedData.scale,
+          offset: cachedData.offset,
+          missing: cachedData.missing,
+          gridDef: cachedData.gridDef,
+          variable: variable,
+          units: units,
+          scaleType: cachedData.scaleType
+        };
+        console.log('📱 [iOS] Updated currentGridDataRef for inspector:', {
+          scale: cachedData.scale,
+          offset: cachedData.offset,
+          scaleType: cachedData.scaleType // ADD THIS
+        });
+      }
+
+      // Now call setActiveFrame (which will async update the native cache)
+      gridLayerRef.current.setActiveFrame(cacheKey);
+      return true;
+    }
     const cachedData = preloadedDataCache.current.get(cacheKey);
     if (!cachedData) {
       const timeKey = isMRMS ? `timestamp ${mrmsTimestamp}` : `hour +${forecastHour}`;
-      console.error(`❌ [updateGPUWithCachedData] No cached data for ${timeKey}. Key not found: ${cacheKey}`);
-      console.error('❌ [updateGPUWithCachedData] Available keys:', Array.from(preloadedDataCache.current.keys()));
+      console.log(`⏳ [updateGPUWithCachedData] Frame not ready yet for ${timeKey}. Still preloading...`); // CHANGED
       return false;
     }
     if (!gridLayerRef.current) {
-      console.error(`❌ [updateGPUWithCachedData] GridLayer ref not available`);
+      console.warn(`⚠️ [updateGPUWithCachedData] GridLayer ref not available`); // CHANGED
       return false;
     }
     if (!cachedGeometry.current || cachedGeometry.current.model !== (isMRMS ? 'mrms' : model) || cachedGeometry.current.variable !== variable) {
@@ -336,8 +464,6 @@ export const WeatherLayerManager = /*#__PURE__*/forwardRef((props, ref) => {
         i,
         j
       } = gridIndices;
-
-      // The native module uses the cached scale/offset which we update via updateDataParameters
       const value = await InspectorModule.getValueAtGridIndex(i, j);
       if (value === null) {
         return null;
@@ -347,10 +473,12 @@ export const WeatherLayerManager = /*#__PURE__*/forwardRef((props, ref) => {
         baseUnit
       } = core._getColormapForVariable(core.state.variable);
       const displayUnit = core._getTargetUnit(baseUnit, core.state.units);
-
-      // Get the converted colormap to check min threshold
       const finalColormap = core._convertColormapUnits(colormap, baseUnit, displayUnit);
-      const minThreshold = finalColormap[0]; // First value in colormap is the minimum
+      const minThreshold = finalColormap[0];
+      if (value < minThreshold) {
+        console.log('🔍 [Inspector] Rejected: below threshold'); // ADD THIS LOG
+        return null;
+      }
 
       // Filter out values below the minimum threshold (matching shader behavior)
       if (value < minThreshold) {
@@ -418,7 +546,7 @@ export const WeatherLayerManager = /*#__PURE__*/forwardRef((props, ref) => {
           run,
           forecastHour
         } = newState;
-        const oldCacheKey = isMRMS ? `mrms-${mrmsTimestamp}-${variable}-${previousStateRef.current.units}` : `${model}-${date}-${run}-${forecastHour}-${variable}-${previousStateRef.current.units}`;
+        const oldCacheKey = isMRMS ? `mrms-${mrmsTimestamp}-${variable}` : `${model}-${date}-${run}-${forecastHour}-${variable}`;
         const cachedData = preloadedDataCache.current.get(oldCacheKey);
         if (cachedData && cachedData.originalScale !== undefined && cachedData.originalOffset !== undefined) {
           const {
@@ -428,42 +556,83 @@ export const WeatherLayerManager = /*#__PURE__*/forwardRef((props, ref) => {
           let dataScale = cachedData.originalScale;
           let dataOffset = cachedData.originalOffset;
           if (baseUnit !== toUnit) {
-            const conversionFunc = getUnitConversionFunction(baseUnit, toUnit); // ✅ Use SDK function
+            const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
+            console.log('🔧 [Unit Conversion] Conversion function exists:', !!conversionFunc);
             if (conversionFunc) {
-              const convertedOffset = conversionFunc(dataOffset);
-              const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
-              dataScale = convertedOffsetPlusScale - convertedOffset;
-              dataOffset = convertedOffset;
+              if (cachedData.scaleType === 'sqrt') {
+                // Calculate what the physical values would be at offset and offset+scale
+                const physicalAtOffset = dataOffset * dataOffset;
+                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+
+                // Convert these physical values to the new unit
+                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+
+                // Take sqrt to get back to intermediate values
+                const newOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+                dataScale = newOffsetPlusScale - newOffset;
+                dataOffset = newOffset;
+              } else {
+                const convertedOffset = conversionFunc(dataOffset);
+                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+                dataScale = convertedOffsetPlusScale - convertedOffset;
+                dataOffset = convertedOffset;
+              }
             }
           }
 
-          // ONLY update the inspector cache parameters - don't touch GPU or colormap!
+          // Update the colormap AND data range
+          const {
+            colormap
+          } = core._getColormapForVariable(variable);
+          const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
+          const dataRange = [finalColormap[0], finalColormap[finalColormap.length - 2]];
+          const colormapBytes = _generateColormapBytes(finalColormap);
+          const colormapAsBase64 = fromByteArray(colormapBytes);
+          gridLayerRef.current.updateColormapTexture(colormapAsBase64);
+          cachedColormap.current = {
+            key: `${variable}-${units}`
+          };
+          cachedDataRange.current = dataRange;
+          setRenderProps(prev => ({
+            ...prev,
+            dataRange,
+            opacity: newState.opacity
+          }));
           if (gridLayerRef.current && gridLayerRef.current.updateDataParameters) {
-            gridLayerRef.current.updateDataParameters(dataScale, dataOffset, cachedData.missing);
-          }
+            const scaleTypeValue = cachedData.scaleType === 'sqrt' ? 1 : 0; // Convert to number
 
-          // Create new cache entry with new units
-          const newCacheKey = isMRMS ? `mrms-${mrmsTimestamp}-${variable}-${units}` : `${model}-${date}-${run}-${forecastHour}-${variable}-${units}`;
+            console.log('🔄 [Unit Conversion] Calling updateDataParameters with:', {
+              scale: dataScale,
+              offset: dataOffset,
+              missing: cachedData.missing,
+              scaleType: scaleTypeValue
+            });
+            gridLayerRef.current.updateDataParameters(dataScale, dataOffset, cachedData.missing, scaleTypeValue); // Pass scaleType
+          }
+          const newCacheKey = isMRMS ? `mrms-${mrmsTimestamp}-${variable}` : `${model}-${date}-${run}-${forecastHour}-${variable}`;
           preloadedDataCache.current.set(newCacheKey, {
             ...cachedData,
             scale: dataScale,
             offset: dataOffset
           });
+        } else {
+          console.warn('⚠️ [Unit Conversion] No cached data found for key:', oldCacheKey);
         }
         previousStateRef.current = newState;
-        if (newState.opacity !== renderProps.opacity) {
-          setRenderProps(prev => ({
-            ...prev,
-            opacity: newState.opacity
-          }));
-        }
         return;
       }
       const needsFullLoad = !hasInitialLoad.current || newState.model !== previousStateRef.current.model || newState.isMRMS !== previousStateRef.current.isMRMS || newState.variable !== previousStateRef.current.variable || newState.date !== previousStateRef.current.date || newState.run !== previousStateRef.current.run;
       if (needsFullLoad) {
         if (gridLayerRef.current) {
           gridLayerRef.current.clear();
+          // --- OPTIMIZATION: Clear the native GPU cache on iOS ---
+          if (Platform.OS === 'ios' && gridLayerRef.current.clearGpuCache) {
+            gridLayerRef.current.clearGpuCache();
+          }
         }
+        hasPreloadedRef.current = false;
         preloadedDataCache.current.clear();
         cachedGeometry.current = null;
         cachedColormap.current = null;
@@ -475,166 +644,23 @@ export const WeatherLayerManager = /*#__PURE__*/forwardRef((props, ref) => {
           previousStateRef.current = newState;
           return;
         }
-        try {
-          const {
-            model,
-            date,
-            run,
-            forecastHour,
-            variable,
-            units,
-            isMRMS,
-            mrmsTimestamp
-          } = newState;
-          const gridModel = isMRMS ? 'mrms' : model;
-          const {
-            corners,
-            gridDef
-          } = core._getGridCornersAndDef(gridModel);
-          const {
-            nx,
-            ny
-          } = gridDef.grid_params;
-          let resourcePath;
-          if (isMRMS) {
-            if (!mrmsTimestamp) {
-              previousStateRef.current = newState;
-              return;
-            }
-            const mrmsDate = new Date(mrmsTimestamp * 1000);
-            const y = mrmsDate.getUTCFullYear();
-            const m = (mrmsDate.getUTCMonth() + 1).toString().padStart(2, '0');
-            const d = mrmsDate.getUTCDate().toString().padStart(2, '0');
-            resourcePath = `/grids/mrms/${y}${m}${d}/${mrmsTimestamp}/0/${variable}/0`;
-          } else {
-            resourcePath = `/grids/${model}/${date}/${run}/${forecastHour}/${variable}/0`;
-          }
-          const url = `${core.baseGridUrl}${resourcePath}?apiKey=${core.apiKey}`;
-          const options = {
-            url,
-            apiKey: core.apiKey,
-            bundleId: core.bundleId
-          };
-          const result = await new Promise((resolve, reject) => {
-            WeatherFrameProcessorModule.processFrame(options, (error, res) => {
-              if (error) {
-                resolve(null);
-              } else {
-                resolve(res);
-              }
-            });
-          });
-          if (!result) {
-            hasInitialLoad.current = true;
-            previousStateRef.current = newState;
-            preloadAllFramesToDisk(newState);
-            return;
-          }
-          if (result && gridLayerRef.current) {
-            gridLayerRef.current.updateGeometry(corners, gridDef);
-            cachedGeometry.current = {
-              model: gridModel,
-              variable
-            };
-            const {
-              colormap,
-              baseUnit
-            } = core._getColormapForVariable(variable);
-            const toUnit = core._getTargetUnit(baseUnit, units);
-            let dataScale = result.scale;
-            let dataOffset = result.offset;
-
-            // Store original scale/offset for unit conversion later
-            const originalScale = result.scale;
-            const originalOffset = result.offset;
-            if (baseUnit !== toUnit) {
-              const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
-              if (conversionFunc) {
-                const convertedOffset = conversionFunc(dataOffset);
-                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
-                dataScale = convertedOffsetPlusScale - convertedOffset;
-                dataOffset = convertedOffset;
-              }
-            }
-            if (result.dataAsBase64) {
-              const binaryString = atob(result.dataAsBase64);
-              const uint8Array = new Uint8Array(binaryString.length);
-              for (let i = 0; i < binaryString.length; i++) {
-                uint8Array[i] = binaryString.charCodeAt(i);
-              }
-              currentGridDataRef.current = {
-                data: uint8Array,
-                nx,
-                ny,
-                scale: dataScale,
-                offset: dataOffset,
-                missing: result.missing,
-                gridDef: gridDef,
-                variable: variable,
-                units: units
-              };
-            }
-
-            // Now upload to GPU
-            if (result.filePath) {
-              gridLayerRef.current.updateDataTextureFromFile(result.filePath, nx, ny, dataScale, dataOffset, result.missing, result.scaleType);
-            } else if (result.dataAsBase64) {
-              gridLayerRef.current.updateDataTexture(result.dataAsBase64, nx, ny, dataScale, dataOffset, result.missing, result.scaleType);
-            }
-            const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
-            const dataRange = [finalColormap[0], finalColormap[finalColormap.length - 2]];
-            const colormapBytes = _generateColormapBytes(finalColormap);
-            const colormapAsBase64 = fromByteArray(colormapBytes);
-            gridLayerRef.current.updateColormapTexture(colormapAsBase64);
-            cachedColormap.current = {
-              key: `${variable}-${units}`
-            };
-            cachedDataRange.current = dataRange;
-            setRenderProps({
-              opacity: newState.opacity,
-              dataRange: dataRange
-            });
-            hasInitialLoad.current = true;
-            const cacheKey = isMRMS ? `mrms-${mrmsTimestamp}-${variable}-${units}` : `${model}-${date}-${run}-${forecastHour}-${variable}-${units}`;
-            const dataToCache = {
-              nx,
-              ny,
-              scale: dataScale,
-              offset: dataOffset,
-              originalScale: originalScale,
-              // Store original for unit conversion
-              originalOffset: originalOffset,
-              // Store original for unit conversion
-              missing: result.missing,
-              corners,
-              gridDef
-            };
-            if (result.filePath) dataToCache.filePath = result.filePath;
-            if (result.dataAsBase64) dataToCache.dataAsBase64 = result.dataAsBase64;
-            if (result.scaleType) dataToCache.scaleType = result.scaleType;
-            preloadedDataCache.current.set(cacheKey, dataToCache);
-            preloadAllFramesToDisk(newState);
-          }
-        } catch (error) {
-          console.error("❌❌❌ [handleStateChange] CRITICAL ERROR:", error);
-          console.error("❌ [handleStateChange] Stack:", error.stack);
-        }
+        preloadAllFramesToDisk(newState);
       } else if (newState.forecastHour !== previousStateRef.current.forecastHour || newState.isMRMS && newState.mrmsTimestamp !== previousStateRef.current.mrmsTimestamp) {
         const success = updateGPUWithCachedData(newState);
         if (!success) {
-          console.error('❌ [handleStateChange] GPU update failed - data not in cache yet');
-          // Don't try on-demand fetch - just wait for preload to complete
-          // Clear the layer since we don't have data yet
-          if (gridLayerRef.current) {
-            gridLayerRef.current.clear();
+          // CHANGED: Don't error, just log and wait for preload
+          const timeKey = newState.isMRMS ? `timestamp ${newState.mrmsTimestamp}` : `hour +${newState.forecastHour}`;
+          console.log(`⏳ [handleStateChange] Frame ${timeKey} not ready yet, waiting for preload...`);
+          // Don't clear the layer - keep showing the previous frame until new one is ready
+          // The preload will eventually complete and trigger a re-render
+        } else {
+          // Only update inspector cache when we successfully loaded new data
+          if (newState.opacity !== renderProps.opacity) {
+            setRenderProps(prev => ({
+              ...prev,
+              opacity: newState.opacity
+            }));
           }
-          currentGridDataRef.current = null; // ADD THIS LINE - Clear inspector cache when no data
-        }
-        if (newState.opacity !== renderProps.opacity) {
-          setRenderProps(prev => ({
-            ...prev,
-            opacity: newState.opacity
-          }));
         }
       }
       previousStateRef.current = newState;