@aguacerowx/react-native 0.0.4 → 0.0.6

package/src/WeatherLayerManager.js

@@ -1,754 +0,0 @@
-// 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');
-};