@aguacerowx/react-native 0.0.0

package/src/WeatherLayerManager.js

@@ -0,0 +1,754 @@
+// packages/react-native/src/WeatherLayerManager.js
+
+import React, { useState, useRef, useContext, useEffect, forwardRef, useImperativeHandle, useMemo } from 'react';
+import { AguaceroCore, getUnitConversionFunction } from '@aguacerowx/javascript-sdk';
+import { AguaceroContext } from './AguaceroContext';
+import { GridRenderLayer } from './GridRenderLayer';
+import { fromByteArray } from 'base64-js';
+import { NativeModules } from 'react-native';
+import { mapRegistry } from './MapRegistry';
+const { WeatherFrameProcessorModule, InspectorModule } = 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;
+};
+
+AguaceroCore.prototype.setMapCenter = function(center) {
+    this.emit('map:move', center);
+};
+
+export const WeatherLayerManager = forwardRef((props, ref) => {
+    const { inspectorEnabled, onInspect, apiKey, customColormaps, ...restProps } = props;
+    const context = useContext(AguaceroContext);
+    
+    // Create the core here instead of getting it from context
+    const core = useMemo(() => new AguaceroCore({ 
+        apiKey: apiKey,
+        customColormaps: customColormaps 
+    }), [apiKey]);
+    
+    const gridLayerRef = useRef(null);
+    const currentGridDataRef = useRef(null);
+    
+    // Cache for preloaded grid data - stores the processed data ready for GPU upload
+    const preloadedDataCache = useRef(new Map());
+    
+    // Track what we're currently preloading to avoid duplicates
+    const preloadingSet = useRef(new Set());
+    
+    // Store geometry and colormap that don't change with forecast hour
+    const cachedGeometry = useRef(null);
+    const cachedColormap = useRef(null);
+    const cachedDataRange = useRef([0, 1]);
+    
+    // Track if we've done the initial load
+    const hasInitialLoad = useRef(false);
+    
+    // Track the last state we processed to avoid redundant updates
+    const lastProcessedState = useRef(null);
+    const previousStateRef = useRef(null);
+    
+    const [renderProps, setRenderProps] = useState({
+        opacity: 1,
+        dataRange: [0, 1]
+    });
+
+    useImperativeHandle(ref, () => ({
+        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);
+            }
+        },
+    }));
+
+    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('🟡 [Preload To Disk] No frames available to download.');
+            return;
+        }
+
+        const { corners, gridDef } = core._getGridCornersAndDef(isMRMS ? 'mrms' : model);
+        const { nx, ny } = gridDef.grid_params;
+
+        for (const frame of allFrames) {
+            const cacheKey = isMRMS ? `mrms-${frame}-${variable}-${units}` : `${model}-${date}-${run}-${frame}-${variable}-${units}`;
+            if (preloadedDataCache.current.has(cacheKey)) {
+                continue; // Skip if already cached
+            }
+
+            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 };
+
+            // Assumes your native module has a method 'processFrameAndSave' that saves to a file
+            // and returns a { filePath, scale, offset, missing } object in the callback.
+            WeatherFrameProcessorModule.processFrame(options, (error, result) => {
+                if (error || !result.filePath) {
+                    console.error(`❌ [Native Save Error] for frame ${frame}:`, error || "Result has no filePath");
+                    return;
+                }
+                
+                // Cache is now extremely lightweight, just storing metadata and a path.
+                preloadedDataCache.current.set(cacheKey, {
+                    filePath: result.filePath,
+                    nx, ny,
+                    scale: result.scale, offset: result.offset, missing: result.missing,
+                    corners, gridDef
+                });
+            });
+        }
+    };
+
+    /**
+     * FINAL VERSION: Updates the GPU by reading from the cache and calling the correct
+     * native render function (either from a file path or from a Base64 string).
+     */
+    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.warn(`⚠️ [GPU Update] No cached data for ${timeKey}. Key not found: ${cacheKey}`);
+            return false;
+        }
+        
+        if (!gridLayerRef.current) {
+            console.error(`❌ [GPU Update] 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 = fromByteArray(colormapBytes);
+            
+            gridLayerRef.current.updateColormapTexture(colormapAsBase64);
+            cachedColormap.current = { key: colormapKey };
+            cachedDataRange.current = dataRange;
+            
+            setRenderProps(prev => ({ ...prev, dataRange }));
+        }
+        
+        // UPDATE GPU
+        if (cachedData.filePath) {
+            gridLayerRef.current.updateDataTextureFromFile(
+                cachedData.filePath,
+                cachedData.nx, cachedData.ny,
+                cachedData.scale, cachedData.offset, cachedData.missing
+            );
+        } else if (cachedData.dataAsBase64) {
+            gridLayerRef.current.updateDataTexture(
+                cachedData.dataAsBase64,
+                cachedData.nx, cachedData.ny,
+                cachedData.scale, cachedData.offset, cachedData.missing
+            );
+            
+            // ADD THIS: 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(`❌ [GPU Update] Cached data for key ${cacheKey} has no filePath or dataAsBase64.`);
+            return false;
+        }
+        
+        // ADD THIS: 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 = useRef(null);
+    const debounceTimeoutRef = useRef(null);
+
+    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;
+        }
+        
+        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;
+        }
+    };
+
+    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 = 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;
+                // REMOVED: || newState.units !== previousStateRef.current.units;
+            
+            if (needsFullLoad) {
+                preloadedDataCache.current.clear();
+                cachedGeometry.current = null;
+                cachedColormap.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) reject(new Error(error));
+                            else resolve(res);
+                        });
+                    });
+                    
+                    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);  // ✅ Use SDK function
+                            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
+                            );
+                        } else if (result.dataAsBase64) {
+                            gridLayerRef.current.updateDataTexture(
+                                result.dataAsBase64, nx, ny,
+                                dataScale, dataOffset, result.missing
+                            );
+                        }
+                        
+                        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;
+                        
+                        preloadedDataCache.current.set(cacheKey, dataToCache);
+                        
+                        preloadAllFramesToDisk(newState);
+                    }
+                } catch (error) {
+                    console.error("❌ [State Change] Failed to load initial frame via native module:", error);
+                }
+            
+            } else if (newState.forecastHour !== previousStateRef.current.forecastHour || (newState.isMRMS && newState.mrmsTimestamp !== previousStateRef.current.mrmsTimestamp)) {
+                updateGPUWithCachedData(newState);
+                
+                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]);
+    
+    useEffect(() => {
+        return () => {
+            preloadedDataCache.current.clear();
+            hasInitialLoad.current = false;
+            lastProcessedState.current = null;
+        };
+    }, []);
+    
+    const lastInspectorUpdateRef = useRef(0);
+    const INSPECTOR_THROTTLE_MS = 50; 
+
+    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
+    useEffect(() => {
+        // Trigger re-inspection when state changes (variable, model, forecast hour, etc.)
+        if (!core || !inspectorEnabled) {
+            return;
+        }
+
+        const triggerReinspection = () => {
+            const mapRef = 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
+    ]);
+
+    useEffect(() => {
+        if (!core) {
+            return;
+        }
+        
+        const handleCameraChange = (center) => {
+            if (core && center) {
+                core.setMapCenter(center);
+            }
+        };
+        
+        // Register with the global registry
+        mapRegistry.addCameraListener(handleCameraChange);
+        
+        // Try to get initial center
+        const mapRef = mapRegistry.getMap();
+        if (mapRef?._currentCenter) {
+            handleCameraChange(mapRef._currentCenter);
+        }
+        
+        return () => {
+            mapRegistry.removeCameraListener(handleCameraChange);
+        };
+    }, [core]);
+
+    useEffect(() => {
+        core.initialize();
+        return () => {
+            core.destroy();
+        };
+    }, [core]);
+
+    return (
+        <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 AguaceroCore({ apiKey: options.apiKey });
+    return core.getAvailableVariables('mrms');
+};