@aguacerowx/react-native 0.0.4 → 0.0.7

package/lib/module/lib/commonjs/src/WeatherLayerManager.js

@@ -0,0 +1,801 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WeatherLayerManager = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _javascriptSdk = require("@aguacerowx/javascript-sdk");
+var _AguaceroContext = require("./AguaceroContext");
+var _GridRenderLayer = require("./GridRenderLayer");
+var _base64Js = require("base64-js");
+var _reactNative = require("react-native");
+var _MapRegistry = require("./MapRegistry");
+function _interopRequireWildcard(e, t) {
+  if ("function" == typeof WeakMap) var r = new WeakMap(),
+    n = new WeakMap();
+  return (_interopRequireWildcard = function (e, t) {
+    if (!t && e && e.__esModule) return e;
+    var o,
+      i,
+      f = {
+        __proto__: null,
+        default: e
+      };
+    if (null === e || "object" != typeof e && "function" != typeof e) return f;
+    if (o = t ? n : r) {
+      if (o.has(e)) return o.get(e);
+      o.set(e, f);
+    }
+    for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]);
+    return f;
+  })(e, t);
+}
+// packages/react-native/src/WeatherLayerManager.js
+
+const {
+  WeatherFrameProcessorModule,
+  InspectorModule
+} = _reactNative.NativeModules;
+
+/**
+ * A helper function to generate the raw RGBA byte buffer for the colormap texture.
+ */
+const _generateColormapBytes = colormap => {
+  const width = 256;
+  const data = new Uint8Array(width * 4);
+  const stops = colormap.reduce((acc, _, i) => i % 2 === 0 ? [...acc, {
+    value: colormap[i],
+    color: colormap[i + 1]
+  }] : acc, []);
+  if (stops.length === 0) return data;
+  const minVal = stops[0].value;
+  const maxVal = stops[stops.length - 1].value;
+  const hexToRgb = hex => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return [r, g, b];
+  };
+  for (let i = 0; i < width; i++) {
+    const val = minVal + i / (width - 1) * (maxVal - minVal);
+    let lower = stops[0];
+    let upper = stops[stops.length - 1];
+    for (let j = 0; j < stops.length - 1; j++) {
+      if (val >= stops[j].value && val <= stops[j + 1].value) {
+        lower = stops[j];
+        upper = stops[j + 1];
+        break;
+      }
+    }
+    const t = (val - lower.value) / (upper.value - lower.value || 1);
+    const lowerRgb = hexToRgb(lower.color);
+    const upperRgb = hexToRgb(upper.color);
+    const rgb = lowerRgb.map((c, idx) => c * (1 - t) + upperRgb[idx] * t);
+    const offset = i * 4;
+    data[offset + 0] = Math.round(rgb[0]);
+    data[offset + 1] = Math.round(rgb[1]);
+    data[offset + 2] = Math.round(rgb[2]);
+    data[offset + 3] = 255;
+  }
+  return data;
+};
+_javascriptSdk.AguaceroCore.prototype.setMapCenter = function (center) {
+  this.emit('map:move', center);
+};
+const WeatherLayerManager = exports.WeatherLayerManager = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    inspectorEnabled,
+    onInspect,
+    apiKey,
+    customColormaps,
+    ...restProps
+  } = props;
+  const context = (0, _react.useContext)(_AguaceroContext.AguaceroContext);
+
+  // Create the core here instead of getting it from context
+  const core = (0, _react.useMemo)(() => new _javascriptSdk.AguaceroCore({
+    apiKey: apiKey,
+    customColormaps: customColormaps
+  }), [apiKey]);
+  const gridLayerRef = (0, _react.useRef)(null);
+  const currentGridDataRef = (0, _react.useRef)(null);
+
+  // Cache for preloaded grid data - stores the processed data ready for GPU upload
+  const preloadedDataCache = (0, _react.useRef)(new Map());
+
+  // Track what we're currently preloading to avoid duplicates
+  const preloadingSet = (0, _react.useRef)(new Set());
+
+  // Store geometry and colormap that don't change with forecast hour
+  const cachedGeometry = (0, _react.useRef)(null);
+  const cachedColormap = (0, _react.useRef)(null);
+  const cachedDataRange = (0, _react.useRef)([0, 1]);
+
+  // Track if we've done the initial load
+  const hasInitialLoad = (0, _react.useRef)(false);
+
+  // Track the last state we processed to avoid redundant updates
+  const lastProcessedState = (0, _react.useRef)(null);
+  const previousStateRef = (0, _react.useRef)(null);
+  const [renderProps, setRenderProps] = (0, _react.useState)({
+    opacity: 1,
+    dataRange: [0, 1]
+  });
+  (0, _react.useImperativeHandle)(ref, () => {
+    return {
+      play: () => {
+        core.play();
+      },
+      pause: () => {
+        core.pause();
+      },
+      togglePlay: () => {
+        core.togglePlay();
+      },
+      step: direction => {
+        core.step(direction);
+      },
+      setPlaybackSpeed: speed => core.setPlaybackSpeed(speed),
+      setOpacity: opacity => core.setOpacity(opacity),
+      setUnits: units => core.setUnits(units),
+      switchMode: options => core.switchMode(options),
+      getAvailableVariables: model => core.getAvailableVariables(model),
+      getVariableDisplayName: code => core.getVariableDisplayName(code),
+      setRun: runString => core.setState({
+        run: runString.split(':')[1]
+      }),
+      setState: newState => core.setState(newState),
+      setMRMSTimestamp: timestamp => core.setMRMSTimestamp(timestamp),
+      setSmoothing: enabled => {
+        if (gridLayerRef.current) {
+          gridLayerRef.current.setSmoothing(enabled);
+        }
+      }
+    };
+  }, [core]);
+  const preloadAllFramesToDisk = state => {
+    const {
+      isMRMS,
+      model,
+      date,
+      run,
+      variable,
+      units,
+      availableHours,
+      availableTimestamps
+    } = state;
+    const allFrames = isMRMS ? availableTimestamps : availableHours;
+    if (!allFrames || allFrames.length === 0) {
+      console.warn('🟡 [preloadAllFramesToDisk] No frames available to download.');
+      return;
+    }
+    const {
+      corners,
+      gridDef
+    } = core._getGridCornersAndDef(isMRMS ? 'mrms' : model);
+    const {
+      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}`;
+      if (preloadedDataCache.current.has(cacheKey)) {
+        skippedCount++;
+        continue;
+      }
+      let resourcePath;
+      if (isMRMS) {
+        const frameDate = new Date(frame * 1000);
+        const y = frameDate.getUTCFullYear();
+        const m = (frameDate.getUTCMonth() + 1).toString().padStart(2, '0');
+        const d = frameDate.getUTCDate().toString().padStart(2, '0');
+        resourcePath = `/grids/mrms/${y}${m}${d}/${frame}/0/${variable}/0`;
+      } else {
+        resourcePath = `/grids/${model}/${date}/${run}/${frame}/${variable}/0`;
+      }
+      const url = `${core.baseGridUrl}${resourcePath}?apiKey=${core.apiKey}`;
+      const options = {
+        url,
+        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");
+          return;
+        }
+        preloadedCount++;
+        preloadedDataCache.current.set(cacheKey, {
+          filePath: result.filePath,
+          nx,
+          ny,
+          scale: result.scale,
+          offset: result.offset,
+          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);
+        }
+      });
+    }
+  };
+
+  // In WeatherLayerManager.js - Add extensive logging throughout
+
+  const updateGPUWithCachedData = state => {
+    const {
+      model,
+      date,
+      run,
+      forecastHour,
+      variable,
+      units,
+      isMRMS,
+      mrmsTimestamp
+    } = state;
+    const cacheKey = isMRMS ? `mrms-${mrmsTimestamp}-${variable}-${units}` : `${model}-${date}-${run}-${forecastHour}-${variable}-${units}`;
+    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()));
+      return false;
+    }
+    if (!gridLayerRef.current) {
+      console.error(`❌ [updateGPUWithCachedData] GridLayer ref not available`);
+      return false;
+    }
+    if (!cachedGeometry.current || cachedGeometry.current.model !== (isMRMS ? 'mrms' : model) || cachedGeometry.current.variable !== variable) {
+      gridLayerRef.current.updateGeometry(cachedData.corners, cachedData.gridDef);
+      cachedGeometry.current = {
+        model: isMRMS ? 'mrms' : model,
+        variable
+      };
+    }
+    const colormapKey = `${variable}-${units}`;
+    if (!cachedColormap.current || cachedColormap.current.key !== colormapKey) {
+      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 = (0, _base64Js.fromByteArray)(colormapBytes);
+      gridLayerRef.current.updateColormapTexture(colormapAsBase64);
+      cachedColormap.current = {
+        key: colormapKey
+      };
+      cachedDataRange.current = dataRange;
+      setRenderProps(prev => ({
+        ...prev,
+        dataRange
+      }));
+    }
+    if (cachedData.filePath) {
+      gridLayerRef.current.updateDataTextureFromFile(cachedData.filePath, cachedData.nx, cachedData.ny, cachedData.scale, cachedData.offset, cachedData.missing, cachedData.scaleType);
+
+      // ADD THIS: Update inspector cache for file-based data too
+      currentGridDataRef.current = {
+        nx: cachedData.nx,
+        ny: cachedData.ny,
+        scale: cachedData.scale,
+        offset: cachedData.offset,
+        missing: cachedData.missing,
+        gridDef: cachedData.gridDef,
+        variable: variable,
+        units: units
+      };
+    } else if (cachedData.dataAsBase64) {
+      gridLayerRef.current.updateDataTexture(cachedData.dataAsBase64, cachedData.nx, cachedData.ny, cachedData.scale, cachedData.offset, cachedData.missing, cachedData.scaleType);
+
+      // Update the inspector cache when using dataAsBase64
+      const binaryString = atob(cachedData.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: cachedData.nx,
+        ny: cachedData.ny,
+        scale: cachedData.scale,
+        offset: cachedData.offset,
+        missing: cachedData.missing,
+        gridDef: cachedData.gridDef,
+        variable: variable,
+        units: units
+      };
+    } else {
+      console.error(`❌ [updateGPUWithCachedData] Cached data has no filePath or dataAsBase64!`);
+      console.error('❌ [updateGPUWithCachedData] Cached data keys:', Object.keys(cachedData));
+      return false;
+    }
+
+    // Update inspector parameters for file-based data too
+    if (gridLayerRef.current && gridLayerRef.current.updateDataParameters) {
+      gridLayerRef.current.updateDataParameters(cachedData.scale, cachedData.offset, cachedData.missing);
+    }
+    return true;
+  };
+  const handleStateChangeRef = (0, _react.useRef)(null);
+  const debounceTimeoutRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (core && props.customColormaps) {
+      core.customColormaps = props.customColormaps;
+      // Trigger a re-render if we already have data loaded
+      if (hasInitialLoad.current) {
+        core._emitStateChange();
+      }
+    }
+  }, [core, props.customColormaps]);
+  const getValueAtPoint = async (lng, lat) => {
+    if (!core) {
+      console.warn('🔍 [Inspector] Core not available');
+      return null;
+    }
+
+    // ADD THIS: Check if we have valid data before attempting inspection
+    if (!currentGridDataRef.current) {
+      console.log('🔍 [Inspector] No grid data available');
+      return null;
+    }
+    try {
+      const gridIndices = core._getGridIndexFromLngLat(lng, lat);
+      if (!gridIndices) return null;
+      const {
+        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;
+      }
+      const {
+        colormap,
+        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
+
+      // Filter out values below the minimum threshold (matching shader behavior)
+      if (value < minThreshold) {
+        return null;
+      }
+
+      // Also check if value is NaN or effectively missing
+      if (!isFinite(value)) {
+        return null;
+      }
+      return {
+        value: value,
+        unit: displayUnit,
+        variable: {
+          code: core.state.variable,
+          name: core.getVariableDisplayName(core.state.variable)
+        },
+        lngLat: {
+          lng,
+          lat
+        }
+      };
+    } catch (error) {
+      console.error('🔍 [Inspector] Error:', error);
+      return null;
+    }
+  };
+  (0, _react.useEffect)(() => {
+    if (!core) {
+      console.warn('⚠️ [useEffect] Core is not available yet');
+      return;
+    }
+    const handleStateChange = async newState => {
+      if (!previousStateRef.current) {
+        previousStateRef.current = core.state;
+      }
+      const stateKey = `${newState.model}-${newState.variable}-${newState.date}-${newState.run}-${newState.forecastHour}-${newState.units}-${newState.mrmsTimestamp}`;
+      const isOpacityOnlyChange = hasInitialLoad.current && newState.opacity !== renderProps.opacity && newState.variable === previousStateRef.current?.variable && newState.forecastHour === previousStateRef.current?.forecastHour && newState.mrmsTimestamp === previousStateRef.current?.mrmsTimestamp && newState.model === previousStateRef.current?.model && newState.units === previousStateRef.current?.units;
+      if (!isOpacityOnlyChange && lastProcessedState.current === stateKey) {
+        return;
+      }
+      if (!isOpacityOnlyChange) {
+        lastProcessedState.current = stateKey;
+      }
+      props.onStateChange?.(newState);
+      if (isOpacityOnlyChange) {
+        setRenderProps(prev => ({
+          ...prev,
+          opacity: newState.opacity
+        }));
+        previousStateRef.current = newState;
+        return;
+      }
+
+      // Check if only units changed
+      const isUnitsOnlyChange = 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 && newState.forecastHour === previousStateRef.current.forecastHour && newState.mrmsTimestamp === previousStateRef.current.mrmsTimestamp && newState.units !== previousStateRef.current.units;
+      if (isUnitsOnlyChange) {
+        const {
+          variable,
+          units,
+          isMRMS,
+          mrmsTimestamp,
+          model,
+          date,
+          run,
+          forecastHour
+        } = newState;
+        const oldCacheKey = isMRMS ? `mrms-${mrmsTimestamp}-${variable}-${previousStateRef.current.units}` : `${model}-${date}-${run}-${forecastHour}-${variable}-${previousStateRef.current.units}`;
+        const cachedData = preloadedDataCache.current.get(oldCacheKey);
+        if (cachedData && cachedData.originalScale !== undefined && cachedData.originalOffset !== undefined) {
+          const {
+            baseUnit
+          } = core._getColormapForVariable(variable);
+          const toUnit = core._getTargetUnit(baseUnit, units);
+          let dataScale = cachedData.originalScale;
+          let dataOffset = cachedData.originalOffset;
+          if (baseUnit !== toUnit) {
+            const conversionFunc = (0, _javascriptSdk.getUnitConversionFunction)(baseUnit, toUnit); // ✅ Use SDK function
+            if (conversionFunc) {
+              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!
+          if (gridLayerRef.current && gridLayerRef.current.updateDataParameters) {
+            gridLayerRef.current.updateDataParameters(dataScale, dataOffset, cachedData.missing);
+          }
+
+          // Create new cache entry with new units
+          const newCacheKey = isMRMS ? `mrms-${mrmsTimestamp}-${variable}-${units}` : `${model}-${date}-${run}-${forecastHour}-${variable}-${units}`;
+          preloadedDataCache.current.set(newCacheKey, {
+            ...cachedData,
+            scale: dataScale,
+            offset: dataOffset
+          });
+        }
+        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();
+        }
+        preloadedDataCache.current.clear();
+        cachedGeometry.current = null;
+        cachedColormap.current = null;
+
+        // ADD THIS: Clear the inspector cache too
+        currentGridDataRef.current = null;
+        WeatherFrameProcessorModule.cancelAllFrames();
+        if (!newState.variable) {
+          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 = (0, _javascriptSdk.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 = (0, _base64Js.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);
+        }
+      } 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();
+          }
+          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;
+    };
+    handleStateChangeRef.current = handleStateChange;
+    const stableHandler = newState => {
+      const isOpacityOnlyChange = previousStateRef.current && newState.opacity !== previousStateRef.current.opacity && newState.variable === previousStateRef.current.variable && newState.forecastHour === previousStateRef.current.forecastHour && newState.mrmsTimestamp === previousStateRef.current.mrmsTimestamp && newState.model === previousStateRef.current.model && newState.units === previousStateRef.current.units && newState.date === previousStateRef.current.date && newState.run === previousStateRef.current.run;
+      if (isOpacityOnlyChange) {
+        if (handleStateChangeRef.current) {
+          handleStateChangeRef.current(newState);
+        }
+        return;
+      }
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+      debounceTimeoutRef.current = setTimeout(() => {
+        if (handleStateChangeRef.current) {
+          handleStateChangeRef.current(newState);
+        }
+        debounceTimeoutRef.current = null;
+      }, 50);
+    };
+    core.on('state:change', stableHandler);
+    return () => {
+      core.off('state:change', stableHandler);
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, [core]);
+  (0, _react.useEffect)(() => {
+    return () => {
+      preloadedDataCache.current.clear();
+      hasInitialLoad.current = false;
+      lastProcessedState.current = null;
+    };
+  }, []);
+  const lastInspectorUpdateRef = (0, _react.useRef)(0);
+  const INSPECTOR_THROTTLE_MS = 50;
+  (0, _react.useEffect)(() => {
+    if (!core || !inspectorEnabled) {
+      return;
+    }
+    const handleMapMove = async center => {
+      if (!center || !Array.isArray(center) || center.length !== 2) {
+        return;
+      }
+
+      // Throttle updates
+      const now = Date.now();
+      if (now - lastInspectorUpdateRef.current < INSPECTOR_THROTTLE_MS) {
+        return;
+      }
+      lastInspectorUpdateRef.current = now;
+      const [longitude, latitude] = center;
+      const payload = await getValueAtPoint(longitude, latitude);
+      onInspect?.(payload);
+    };
+    core.on('map:move', handleMapMove);
+    if (context && context.getCenter) {
+      const center = context.getCenter();
+      if (center) {
+        handleMapMove(center);
+      }
+    }
+    return () => {
+      core.off('map:move', handleMapMove);
+    };
+  }, [inspectorEnabled, onInspect, core, context]);
+
+  // Add this new useEffect after the existing inspector useEffect
+  (0, _react.useEffect)(() => {
+    // Trigger re-inspection when state changes (variable, model, forecast hour, etc.)
+    if (!core || !inspectorEnabled) {
+      return;
+    }
+    const triggerReinspection = () => {
+      const mapRef = _MapRegistry.mapRegistry.getMap();
+      const center = mapRef?._currentCenter;
+      if (center && Array.isArray(center) && center.length === 2) {
+        const [longitude, latitude] = center;
+        getValueAtPoint(longitude, latitude).then(payload => {
+          onInspect?.(payload);
+        });
+      }
+    };
+
+    // Small delay to ensure data is loaded before re-inspecting
+    const timer = setTimeout(triggerReinspection, 100);
+    return () => clearTimeout(timer);
+  }, [core?.state?.variable, core?.state?.model, core?.state?.forecastHour, core?.state?.mrmsTimestamp, core?.state?.units, inspectorEnabled, onInspect]);
+  (0, _react.useEffect)(() => {
+    if (!core) {
+      return;
+    }
+    const handleCameraChange = center => {
+      if (core && center) {
+        core.setMapCenter(center);
+      }
+    };
+
+    // Register with the global registry
+    _MapRegistry.mapRegistry.addCameraListener(handleCameraChange);
+
+    // Try to get initial center
+    const mapRef = _MapRegistry.mapRegistry.getMap();
+    if (mapRef?._currentCenter) {
+      handleCameraChange(mapRef._currentCenter);
+    }
+    return () => {
+      _MapRegistry.mapRegistry.removeCameraListener(handleCameraChange);
+    };
+  }, [core]);
+  (0, _react.useEffect)(() => {
+    core.initialize();
+    return () => {
+      core.destroy();
+    };
+  }, [core]);
+  return /*#__PURE__*/_react.default.createElement(_GridRenderLayer.GridRenderLayer, {
+    ref: gridLayerRef,
+    opacity: renderProps.opacity,
+    dataRange: renderProps.dataRange,
+    belowID: "AML_-_terrain"
+  });
+});
+WeatherLayerManager.getAvailableVariables = options => {
+  if (!options || !options.apiKey) {
+    console.error("API key must be provided to get available variables.");
+    return [];
+  }
+  const core = new _javascriptSdk.AguaceroCore({
+    apiKey: options.apiKey
+  });
+  return core.getAvailableVariables('mrms');
+};
+//# sourceMappingURL=WeatherLayerManager.js.map