@aguacerowx/react-native 0.0.37 → 0.0.38

package/src/WeatherLayerManager.js

@@ -1,1168 +1,1192 @@
-// packages/react-native/src/WeatherLayerManager.js
-
-import { AguaceroCore, DICTIONARIES, getUnitConversionFunction } from '@aguacerowx/javascript-sdk';
-import { fromByteArray } from 'base64-js';
-import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { NativeModules, Platform } from 'react-native';
-import { AguaceroContext } from './AguaceroContext';
-import { GridRenderLayer } from './GridRenderLayer';
-import { mapRegistry } from './MapRegistry';
-
-function findLatestModelRun(modelsData, modelName) {
-    const model = modelsData?.[modelName];
-    if (!model) return null;
-    const availableDates = Object.keys(model).sort((a, b) => b.localeCompare(a));
-    for (const date of availableDates) {
-        const runs = model[date];
-        if (!runs) continue;
-        const availableRuns = Object.keys(runs).sort((a, b) => b.localeCompare(a));
-        if (availableRuns.length > 0) return { date: date, run: availableRuns[0] };
-    }
-    return null;
-}
-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,
-        initialMode,
-        initialVariable,
-        autoRefresh,
-        autoRefreshInterval,
-        initialModel,
-        ...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,
-        // ADD: Pass layerOptions to the core's constructor
-        layerOptions: {
-            mode: initialMode,
-            variable: initialVariable,
-            model: initialModel
-        }
-    }), [apiKey]);
-
-    const gridLayerRef = useRef(null);
-    const currentGridDataRef = useRef(null);
-    const autoRefreshIntervalId = useRef(null);
-
-    // Cache for preloaded grid data - stores the processed data ready for GPU upload
-    const preloadedDataCache = useRef(new Map());
-
-    // 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);
-    const hasPreloadedRef = 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, () => {
-        const setAutoRefresh = (enabled, intervalSeconds) => {
-            if (autoRefreshIntervalId.current) {
-                clearInterval(autoRefreshIntervalId.current);
-                autoRefreshIntervalId.current = null;
-            }
-            if (enabled) {
-                const effectiveInterval = (intervalSeconds || autoRefreshInterval || 30) * 1000;
-                // Run once immediately, then start the interval
-                _checkForUpdates();
-                autoRefreshIntervalId.current = setInterval(_checkForUpdates, effectiveInterval);
-            }
-        };
-        return {
-            play: () => {
-                core.play();
-            },
-            pause: () => {
-                core.pause();
-            },
-            togglePlay: () => {
-                core.togglePlay();
-            },
-            step: (direction) => {
-                core.step(direction);
-            },
-            setPlaybackSpeed: (speed) => {
-                if (speed > 0) {
-                    core.playbackSpeed = speed;
-                    if (core.isPlaying) {
-                        core.pause();
-                        core.play();
-                    }
-                }
-            },
-            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);
-                }
-            },
-            setAutoRefresh,
-            refreshData: () => {
-                _checkForUpdates();
-            },
-        };
-    }, [core, autoRefreshInterval, _checkForUpdates]);
-
-    const preloadAllFramesToDisk = async (state) => {
-        if (hasPreloadedRef.current) {
-            return;
-        }
-
-        const { isMRMS, model, date, run, variable, units, availableHours, availableTimestamps, forecastHour, mrmsTimestamp } = state;
-
-        // CRITICAL: Don't start preloading if we don't have a valid current frame
-        if (isMRMS && (mrmsTimestamp == null || !availableTimestamps || availableTimestamps.length === 0)) {
-            hasPreloadedRef.current = false;
-            return;
-        }
-
-        if (!isMRMS && (forecastHour == null || !availableHours || availableHours.length === 0)) {
-            hasPreloadedRef.current = false;
-            return;
-        }
-
-        // Only mark as "has preloaded" after validation passes
-        hasPreloadedRef.current = true;
-
-        // Fix the current forecast hour if it's invalid for this variable/model combo
-        let effectiveForecastHour = forecastHour;
-        if (!isMRMS && variable === 'ptypeRefl' && model === 'hrrr' && forecastHour === 0) {
-            const validHours = availableHours.filter(hour => hour !== 0);
-            effectiveForecastHour = validHours.length > 0 ? validHours[0] : 0;
-        }
-
-        if (!cachedGeometry.current || !cachedColormap.current) {
-            const gridModel = isMRMS ? 'mrms' : model;
-            const { corners, gridDef } = core._getGridCornersAndDef(gridModel);
-            gridLayerRef.current.updateGeometry(corners, gridDef);
-            cachedGeometry.current = { model: gridModel, variable };
-
-            const { colormap, baseUnit } = core._getColormapForVariable(variable);
-            const toUnit = core._getTargetUnit(baseUnit, units);
-            const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
-            let dataRange;
-            if (variable === 'ptypeRefl' || variable === 'ptypeRate') {
-                dataRange = isMRMS ? [5, 380] : [5, 380];
-            } else {
-                dataRange = [finalColormap[0], finalColormap[finalColormap.length - 2]];
-            }
-            const colormapBytes = _generateColormapBytes(finalColormap);
-            const colormapAsBase64 = fromByteArray(colormapBytes);
-
-            gridLayerRef.current.updateColormapTexture(colormapAsBase64);
-            cachedColormap.current = { key: `${variable}-${units}` };
-            cachedDataRange.current = dataRange;
-
-            setRenderProps({ opacity: state.opacity, dataRange: dataRange });
-            hasInitialLoad.current = true;
-        }
-
-        // Apply the same filtering logic as in AguaceroCore._emitStateChange
-        let filteredHours = availableHours;
-        if (!isMRMS && variable === 'ptypeRefl' && model === 'hrrr' && availableHours && availableHours.length > 0) {
-            filteredHours = availableHours.filter(hour => hour !== 0);
-        }
-
-        const allFrames = isMRMS ? availableTimestamps : filteredHours;
-        if (!allFrames || allFrames.length === 0) {
-            return;
-        }
-
-        const currentFrame = isMRMS ? mrmsTimestamp : effectiveForecastHour;
-
-        // Double-check currentFrame is valid
-        if (currentFrame == null) {
-            hasPreloadedRef.current = false;
-        }
-
-        // Reverse the frame order to load from last to first
-        const reversedFrames = [...allFrames].reverse();
-        const framesToPreload = reversedFrames.filter(frame => frame !== currentFrame);
-
-        const { corners, gridDef } = core._getGridCornersAndDef(isMRMS ? 'mrms' : model);
-        const { nx, ny } = gridDef.grid_params;
-
-        // Load the current frame FIRST and WAIT for it before continuing
-        const currentCacheKey = isMRMS ? `mrms-${currentFrame}-${variable}` : `${model}-${date}-${run}-${currentFrame}-${variable}`;
-
-        if (!preloadedDataCache.current.has(currentCacheKey)) {
-            let resourcePath;
-            if (isMRMS) {
-                const frameDate = new Date(currentFrame * 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}/${currentFrame}/0/${variable}/0`;
-            } else {
-                resourcePath = `/grids/${model}/${date}/${run}/${currentFrame}/${variable}/0`;
-            }
-
-            const url = `${core.baseGridUrl}${resourcePath}?apiKey=${core.apiKey}`;
-            const options = { url, apiKey: core.apiKey, bundleId: core.bundleId };
-
-            try {
-                const result = await WeatherFrameProcessorModule.processFrame(options);
-
-                if (!result || !result.filePath) {
-                    return;
-                }
-
-                const { baseUnit } = core._getColormapForVariable(variable);
-
-                const toUnit = core._getTargetUnit(baseUnit, units);
-
-                const fieldInfo = DICTIONARIES?.fld?.[variable] || {};
-                const serverDataUnit = fieldInfo.defaultUnit || baseUnit;
-
-                let dataScale = result.scale;
-                let dataOffset = result.offset;
-
-                let convertedScale = dataScale;
-                let convertedOffset = dataOffset;
-
-                if (serverDataUnit !== baseUnit) {
-                    const conversionFunc = getUnitConversionFunction(serverDataUnit, baseUnit);
-                    if (conversionFunc) {
-                        if (result.scaleType === 'sqrt') {
-                            const physicalAtOffset = dataOffset * dataOffset;
-                            const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
-                            const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
-                            const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
-                            convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
-                            const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
-                            convertedScale = newOffsetPlusScale - convertedOffset;
-                        } else {
-                            convertedOffset = conversionFunc(dataOffset);
-                            const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
-                            convertedScale = convertedOffsetPlusScale - convertedOffset;
-                        }
-                        dataScale = convertedScale;
-                        dataOffset = convertedOffset;
-                    }
-                }
-
-                if (baseUnit !== toUnit) {
-                    const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
-                    if (conversionFunc) {
-                        if (result.scaleType === 'sqrt') {
-                            const physicalAtOffset = dataOffset * dataOffset;
-                            const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
-                            const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
-                            const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
-                            convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
-                            const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
-                            convertedScale = newOffsetPlusScale - convertedOffset;
-                        } else {
-                            convertedOffset = conversionFunc(dataOffset);
-                            const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
-                            convertedScale = convertedOffsetPlusScale - convertedOffset;
-                        }
-                    }
-                }
-
-                const frameData = {
-                    filePath: result.filePath,
-                    nx, ny,
-                    scale: convertedScale,
-                    offset: convertedOffset,
-                    missing: result.missing,
-                    corners,
-                    gridDef,
-                    scaleType: result.scaleType,
-                    originalScale: result.scale,
-                    originalOffset: result.offset
-                };
-
-                preloadedDataCache.current.set(currentCacheKey, frameData);
-
-                // Update the GPU with the current frame
-                gridLayerRef.current.updateDataTextureFromFile(
-                    frameData.filePath,
-                    frameData.nx, frameData.ny,
-                    frameData.scale, frameData.offset, frameData.missing,
-                    frameData.scaleType
-                );
-
-                currentGridDataRef.current = {
-                    nx: frameData.nx,
-                    ny: frameData.ny,
-                    scale: frameData.scale,
-                    offset: frameData.offset,
-                    missing: frameData.missing,
-                    gridDef: frameData.gridDef,
-                    variable: variable,
-                    units: units,
-                    scaleType: frameData.scaleType
-                };
-            } catch (error) {
-                console.warn(`⚠️ [preloadAllFramesToDisk] Failed frame ${currentFrame}:`, error);
-                hasPreloadedRef.current = false;
-            }
-        }
-
-        // NOW preload the rest of the frames asynchronously
-        framesToPreload.forEach((frame) => {
-            const cacheKey = isMRMS ? `mrms-${frame}-${variable}` : `${model}-${date}-${run}-${frame}-${variable}`;
-            if (preloadedDataCache.current.has(cacheKey)) {
-                return;
-            }
-
-            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)
-                .then(result => {
-                    if (!result || !result.filePath) {
-                        console.warn(`⚠️ [preloadAllFramesToDisk] Failed frame ${frame}: No filePath`);
-                        return;
-                    }
-
-                    // ADD: Same two-step conversion as the current frame
-                    const { baseUnit } = core._getColormapForVariable(variable);
-                    const toUnit = core._getTargetUnit(baseUnit, units);
-                    const fieldInfo = DICTIONARIES?.fld?.[variable] || {};
-                    const serverDataUnit = fieldInfo.defaultUnit || baseUnit;
-
-                    let dataScale = result.scale;
-                    let dataOffset = result.offset;
-
-                    let convertedScale = dataScale;
-                    let convertedOffset = dataOffset;
-
-                    // Step 1: Convert from server unit to colormap base unit
-                    if (serverDataUnit !== baseUnit) {
-                        const conversionFunc = getUnitConversionFunction(serverDataUnit, baseUnit);
-                        if (conversionFunc) {
-                            if (result.scaleType === 'sqrt') {
-                                const physicalAtOffset = dataOffset * dataOffset;
-                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
-                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
-                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
-                                convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
-                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
-                                convertedScale = newOffsetPlusScale - convertedOffset;
-                            } else {
-                                convertedOffset = conversionFunc(dataOffset);
-                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
-                                convertedScale = convertedOffsetPlusScale - convertedOffset;
-                            }
-                            dataScale = convertedScale;
-                            dataOffset = convertedOffset;
-                        }
-                    }
-
-                    // Step 2: Convert from colormap base unit to target display unit
-                    if (baseUnit !== toUnit) {
-                        const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
-                        if (conversionFunc) {
-                            if (result.scaleType === 'sqrt') {
-                                const physicalAtOffset = dataOffset * dataOffset;
-                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
-                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
-                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
-                                convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
-                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
-                                convertedScale = newOffsetPlusScale - convertedOffset;
-                            } else {
-                                convertedOffset = conversionFunc(dataOffset);
-                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
-                                convertedScale = convertedOffsetPlusScale - convertedOffset;
-                            }
-                        }
-                    }
-
-                    const frameData = {
-                        filePath: result.filePath,
-                        nx, ny,
-                        scale: convertedScale,
-                        offset: convertedOffset,
-                        missing: result.missing,
-                        corners,
-                        gridDef,
-                        scaleType: result.scaleType,
-                        originalScale: result.scale,
-                        originalOffset: result.offset
-                    };
-
-                    preloadedDataCache.current.set(cacheKey, frameData);
-
-                    if (Platform.OS === 'ios' && gridLayerRef.current.primeGpuCache) {
-                        const frameInfoForGpu = {
-                            [cacheKey]: {
-                                filePath: frameData.filePath,
-                                nx: frameData.nx,
-                                ny: frameData.ny,
-                                scale: frameData.scale,
-                                offset: frameData.offset,
-                                missing: frameData.missing,
-                                scaleType: frameData.scaleType || 'linear',
-                                originalScale: frameData.originalScale,
-                                originalOffset: frameData.originalOffset
-                            }
-                        };
-                        gridLayerRef.current.primeGpuCache(frameInfoForGpu);
-                    }
-                })
-                .catch(error => {
-                    console.warn(`⚠️ [preloadAllFramesToDisk] Failed frame ${frame}:`, error);
-                });
-        });
-    };
-
-    useEffect(() => {
-        // This effect manages the auto-refresh based on props
-        if (autoRefresh) {
-            const interval = (autoRefreshInterval || 30) * 1000;
-            _checkForUpdates(); // Run immediately on enable
-            autoRefreshIntervalId.current = setInterval(_checkForUpdates, interval);
-        }
-
-        // Cleanup function: this runs when the component unmounts or props change
-        return () => {
-            if (autoRefreshIntervalId.current) {
-                clearInterval(autoRefreshIntervalId.current);
-                autoRefreshIntervalId.current = null;
-            }
-        };
-    }, [autoRefresh, autoRefreshInterval, _checkForUpdates]);
-
-    const updateGPUWithCachedData = (state) => {
-        const { model, date, run, forecastHour, variable, units, isMRMS, mrmsTimestamp } = state;
-
-        const cacheKey = isMRMS
-            ? `mrms-${mrmsTimestamp}-${variable}`
-            : `${model}-${date}-${run}-${forecastHour}-${variable}`;
-
-        if (Platform.OS === 'ios' && gridLayerRef.current.setActiveFrame) {
-            // Get the cached data BEFORE calling setActiveFrame
-            const cachedData = preloadedDataCache.current.get(cacheKey);
-
-            if (cachedData) {
-                currentGridDataRef.current = {
-                    nx: cachedData.nx,
-                    ny: cachedData.ny,
-                    scale: cachedData.scale,
-                    offset: cachedData.offset,
-                    missing: cachedData.missing,
-                    gridDef: cachedData.gridDef,
-                    variable: variable,
-                    units: units,
-                    scaleType: cachedData.scaleType
-                };
-            }
-
-            if (__DEV__) {
-                console.log(`[WeatherLayerManager] setActiveFrame: ${cacheKey}`);
-            }
-            gridLayerRef.current.setActiveFrame(cacheKey);
-            return true;
-        }
-
-        const cachedData = preloadedDataCache.current.get(cacheKey);
-
-        if (!cachedData) {
-            return false;
-        }
-
-        if (!gridLayerRef.current) {
-            console.warn(`⚠️ [updateGPUWithCachedData] GridLayer ref not available`); // CHANGED
-            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);
-            let dataRange;
-            if (variable === 'ptypeRefl' || variable === 'ptypeRate') {
-                if (isMRMS) {
-                    dataRange = [5, 380];
-                } else {
-                    dataRange = [5, 380];
-                }
-            } else {
-                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 }));
-        }
-
-        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 = 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;
-        }
-
-        // ADD THIS: Check if we have valid data before attempting inspection
-        if (!currentGridDataRef.current) {
-            return null;
-        }
-
-        try {
-            const gridIndices = core._getGridIndexFromLngLat(lng, lat);
-            if (!gridIndices) return null;
-
-            const { i, j } = gridIndices;
-
-            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);
-            const finalColormap = core._convertColormapUnits(colormap, baseUnit, displayUnit);
-            const minThreshold = finalColormap[0];
-
-            if (value < minThreshold) {
-                return null;
-            }
-
-            // 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;
-        }
-    };
-
-    const _checkForUpdates = useMemo(() => async () => {
-        if (!core) return;
-        const { isMRMS, model: currentModel, variable: currentVariable, date, run } = core.state;
-
-        if (isMRMS) {
-            // --- MRMS LOGIC (Keep existing logic) ---
-            const oldTimestamps = new Set(core.mrmsStatus?.[currentVariable] || []);
-            const mrmsStatus = await core.fetchMRMSStatus(true);
-            const newTimestamps = mrmsStatus?.[currentVariable] || [];
-            if (newTimestamps.length === 0) return;
-
-            const newTimestampsToPreload = newTimestamps.filter(ts => !oldTimestamps.has(ts));
-
-            if (newTimestampsToPreload.length > 0) {
-                core.mrmsStatus = mrmsStatus;
-                core._emitStateChange(); // Update UI slider without changing selection
-
-                // ... (Keep your existing preloading logic here) ...
-                const { corners, gridDef } = core._getGridCornersAndDef('mrms');
-                const { nx, ny } = gridDef.grid_params;
-
-                newTimestampsToPreload.forEach(frame => {
-                    const cacheKey = `mrms-${frame}-${currentVariable}`;
-                    if (preloadedDataCache.current.has(cacheKey)) return;
-
-                    const frameDate = new Date(frame * 1000);
-                    const y = frameDate.getUTCFullYear(), m = (frameDate.getUTCMonth() + 1).toString().padStart(2, '0'), d = frameDate.getUTCDate().toString().padStart(2, '0');
-                    const resourcePath = `/grids/mrms/${y}${m}${d}/${frame}/0/${currentVariable}/0`;
-                    const url = `${core.baseGridUrl}${resourcePath}?apiKey=${core.apiKey}`;
-
-                    WeatherFrameProcessorModule.processFrame({ url, apiKey: core.apiKey, bundleId: core.bundleId })
-                        .then(result => {
-                            if (!result || !result.filePath) return;
-                            const frameData = { filePath: result.filePath, nx, ny, scale: result.scale, offset: result.offset, missing: result.missing, corners, gridDef, scaleType: result.scaleType, originalScale: result.scale, originalOffset: result.offset };
-                            preloadedDataCache.current.set(cacheKey, frameData);
-                            if (Platform.OS === 'ios' && gridLayerRef.current?.primeGpuCache) {
-                                gridLayerRef.current.primeGpuCache({ [cacheKey]: frameData });
-                            }
-                        }).catch(error => console.warn(`[Auto-Refresh] Failed to preload frame ${frame}:`, error));
-                });
-
-                const newTimestampsSet = new Set(newTimestamps);
-                oldTimestamps.forEach(oldTs => {
-                    if (!newTimestampsSet.has(oldTs)) {
-                        const cacheKey = `mrms-${oldTs}-${currentVariable}`;
-                        preloadedDataCache.current.delete(cacheKey);
-                    }
-                });
-            }
-        } else {
-            const modelStatus = await core.fetchModelStatus(true);
-            core._emitStateChange();
-
-            const latestRun = findLatestModelRun(modelStatus, currentModel);
-            if (!latestRun) return;
-        }
-    }, [core]);
-
-    useEffect(() => {
-        if (!core) {
-            console.warn('⚠️ [useEffect] Core is not available yet');
-            return;
-        }
-
-        const handleStateChange = (newState) => {
-            if (!previousStateRef.current) {
-                previousStateRef.current = core.state;
-            }
-
-            const variableChanged = !previousStateRef.current || newState.variable !== previousStateRef.current.variable;
-
-            if (variableChanged && gridLayerRef.current?.setVariable) {
-                gridLayerRef.current.setVariable(newState.variable);
-            }
-
-            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;
-
-            const isPlayStateOnlyChange =
-                hasInitialLoad.current &&
-                newState.isPlaying !== previousStateRef.current?.isPlaying &&
-                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.opacity === previousStateRef.current?.opacity;
-
-            if (!isOpacityOnlyChange && !isPlayStateOnlyChange && lastProcessedState.current === stateKey) {
-                previousStateRef.current = newState;
-                return;
-            }
-
-            if (!isOpacityOnlyChange && !isPlayStateOnlyChange) {
-                lastProcessedState.current = stateKey;
-            }
-
-            if (isOpacityOnlyChange) {
-                setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
-                previousStateRef.current = newState;
-                return;
-            }
-
-            if (isPlayStateOnlyChange) {
-                previousStateRef.current = newState;
-                return;
-            }
-
-            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}`
-                    : `${model}-${date}-${run}-${forecastHour}-${variable}`;
-
-                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);
-                    const fieldInfo = DICTIONARIES?.fld?.[variable] || {};
-                    const serverDataUnit = fieldInfo.defaultUnit || baseUnit;
-
-                    let dataScale = cachedData.originalScale;
-                    let dataOffset = cachedData.originalOffset;
-
-                    if (serverDataUnit !== baseUnit) {
-                        const conversionFunc = getUnitConversionFunction(serverDataUnit, baseUnit);
-                        if (conversionFunc) {
-                            if (cachedData.scaleType === 'sqrt') {
-                                const physicalAtOffset = dataOffset * dataOffset;
-                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
-                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
-                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
-                                const newOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
-                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
-                                dataScale = newOffsetPlusScale - newOffset;
-                                dataOffset = newOffset;
-                            } else {
-                                const convertedOffset = conversionFunc(dataOffset);
-                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
-                                dataScale = convertedOffsetPlusScale - convertedOffset;
-                                dataOffset = convertedOffset;
-                            }
-                        }
-                    }
-
-                    if (baseUnit !== toUnit) {
-                        const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
-                        if (conversionFunc) {
-                            if (cachedData.scaleType === 'sqrt') {
-                                const physicalAtOffset = dataOffset * dataOffset;
-                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
-                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
-                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
-                                const newOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
-                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
-                                dataScale = newOffsetPlusScale - newOffset;
-                                dataOffset = newOffset;
-                            } else {
-                                const convertedOffset = conversionFunc(dataOffset);
-                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
-                                dataScale = convertedOffsetPlusScale - convertedOffset;
-                                dataOffset = convertedOffset;
-                            }
-                        }
-                    }
-
-                    const { colormap } = core._getColormapForVariable(variable);
-                    const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
-                    let dataRange = (variable === 'ptypeRefl' || variable === 'ptypeRate') ? [5, 380] : [finalColormap[0], finalColormap[finalColormap.length - 2]];
-                    const colormapBytes = _generateColormapBytes(finalColormap);
-                    const colormapAsBase64 = fromByteArray(colormapBytes);
-
-                    gridLayerRef.current.updateColormapTexture(colormapAsBase64);
-                    cachedColormap.current = { key: `${variable}-${units}` };
-                    cachedDataRange.current = dataRange;
-                    setRenderProps(prev => ({ ...prev, dataRange, opacity: newState.opacity }));
-
-                    if (gridLayerRef.current && gridLayerRef.current.updateDataParameters) {
-                        const scaleTypeValue = cachedData.scaleType === 'sqrt' ? 1 : 0;
-                        gridLayerRef.current.updateDataParameters(dataScale, dataOffset, cachedData.missing, scaleTypeValue);
-                    }
-
-                    const newCacheKey = isMRMS ? `mrms-${mrmsTimestamp}-${variable}` : `${model}-${date}-${run}-${forecastHour}-${variable}`;
-                    preloadedDataCache.current.set(newCacheKey, { ...cachedData, scale: dataScale, offset: dataOffset });
-                }
-
-                previousStateRef.current = newState;
-                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.setVariable(newState.variable);
-                    gridLayerRef.current.clear();
-                    if (Platform.OS === 'ios' && gridLayerRef.current.clearGpuCache) {
-                        gridLayerRef.current.clearGpuCache();
-                    }
-                }
-                hasPreloadedRef.current = false;
-                preloadedDataCache.current.clear();
-                cachedGeometry.current = null;
-                cachedColormap.current = null;
-                currentGridDataRef.current = null;
-                WeatherFrameProcessorModule.cancelAllFrames();
-
-                if (!newState.variable) {
-                    previousStateRef.current = newState;
-                    return;
-                }
-                preloadAllFramesToDisk(newState);
-            } else if (newState.forecastHour !== previousStateRef.current.forecastHour || (newState.isMRMS && newState.mrmsTimestamp !== previousStateRef.current.mrmsTimestamp)) {
-                const success = updateGPUWithCachedData(newState);
-                if (success && newState.opacity !== renderProps.opacity) {
-                    setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
-                }
-            }
-
-            previousStateRef.current = newState;
-        };
-
-        handleStateChangeRef.current = handleStateChange;
-
-        const stableHandler = (newState) => {
-            // OPTIMIZATION: If playing (high speed), prioritize MAP update and skip debounce
-            if (newState.isPlaying) {
-                // 1. Update Map FIRST (Native Enqueue)
-                if (handleStateChangeRef.current) {
-                    handleStateChangeRef.current(newState);
-                }
-
-                // 2. Update UI Slider SECOND
-                // This ensures the heavy map frame is processing while React reconciles the slider
-                props.onStateChange?.(newState);
-
-                if (debounceTimeoutRef.current) {
-                    clearTimeout(debounceTimeoutRef.current);
-                    debounceTimeoutRef.current = null;
-                }
-                return;
-            }
-
-            // --- Existing Logic for scrubbing/paused ---
-
-            // 1. Immediate Slider Update for responsiveness
-            props.onStateChange?.(newState);
-
-            if (debounceTimeoutRef.current) {
-                clearTimeout(debounceTimeoutRef.current);
-            }
-
-            // Opacity and Play state changes should be immediate for the native layer too
-            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;
-
-            const isPlayStateOnlyChange =
-                previousStateRef.current &&
-                newState.isPlaying !== previousStateRef.current.isPlaying &&
-                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 || isPlayStateOnlyChange || !previousStateRef.current) {
-                if (handleStateChangeRef.current) {
-                    handleStateChangeRef.current(newState);
-                }
-                return;
-            }
-
-            debounceTimeoutRef.current = setTimeout(() => {
-                if (handleStateChangeRef.current) {
-                    handleStateChangeRef.current(newState);
-                }
-                debounceTimeoutRef.current = null;
-            }, 16); // ~60fps map updates
-        };
-
-        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]);
-
-    useEffect(() => {
-        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');
+// packages/react-native/src/WeatherLayerManager.js
+
+import { AguaceroCore, DICTIONARIES, getUnitConversionFunction } from '@aguacerowx/javascript-sdk';
+import { fromByteArray } from 'base64-js';
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { NativeModules, Platform } from 'react-native';
+import { AguaceroContext } from './AguaceroContext';
+import { GridRenderLayer } from './GridRenderLayer';
+import { mapRegistry } from './MapRegistry';
+
+// --- PERFORMANCE HELPER ---
+const perfLog = (msg) => {
+    // Enable this if you want JS logs alongside native logs
+    console.log(`⚡️ [PERF] [JS] ${msg} | ${performance.now().toFixed(2)}ms`);
+};
+// --------------------------
+
+function findLatestModelRun(modelsData, modelName) {
+    const model = modelsData?.[modelName];
+    if (!model) return null;
+    const availableDates = Object.keys(model).sort((a, b) => b.localeCompare(a));
+    for (const date of availableDates) {
+        const runs = model[date];
+        if (!runs) continue;
+        const availableRuns = Object.keys(runs).sort((a, b) => b.localeCompare(a));
+        if (availableRuns.length > 0) return { date: date, run: availableRuns[0] };
+    }
+    return null;
+}
+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,
+        initialMode,
+        initialVariable,
+        autoRefresh,
+        autoRefreshInterval,
+        initialModel,
+        ...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,
+        // ADD: Pass layerOptions to the core's constructor
+        layerOptions: {
+            mode: initialMode,
+            variable: initialVariable,
+            model: initialModel
+        }
+    }), [apiKey]);
+
+    const gridLayerRef = useRef(null);
+    const currentGridDataRef = useRef(null);
+    const autoRefreshIntervalId = useRef(null);
+
+    // Cache for preloaded grid data - stores the processed data ready for GPU upload
+    const preloadedDataCache = useRef(new Map());
+
+    // 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);
+    const hasPreloadedRef = 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, () => {
+        const setAutoRefresh = (enabled, intervalSeconds) => {
+            if (autoRefreshIntervalId.current) {
+                clearInterval(autoRefreshIntervalId.current);
+                autoRefreshIntervalId.current = null;
+            }
+            if (enabled) {
+                const effectiveInterval = (intervalSeconds || autoRefreshInterval || 30) * 1000;
+                // Run once immediately, then start the interval
+                _checkForUpdates();
+                autoRefreshIntervalId.current = setInterval(_checkForUpdates, effectiveInterval);
+            }
+        };
+        return {
+            play: () => {
+                core.play();
+            },
+            pause: () => {
+                core.pause();
+            },
+            togglePlay: () => {
+                core.togglePlay();
+            },
+            step: (direction) => {
+                core.step(direction);
+            },
+            setPlaybackSpeed: (speed) => {
+                if (speed > 0) {
+                    core.playbackSpeed = speed;
+                    if (core.isPlaying) {
+                        core.pause();
+                        core.play();
+                    }
+                }
+            },
+            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);
+                }
+            },
+            setAutoRefresh,
+            refreshData: () => {
+                _checkForUpdates();
+            },
+        };
+    }, [core, autoRefreshInterval, _checkForUpdates]);
+
+    const preloadAllFramesToDisk = async (state) => {
+        const start = performance.now();
+        perfLog("preloadAllFramesToDisk called");
+
+        if (hasPreloadedRef.current) {
+            return;
+        }
+
+        const { isMRMS, model, date, run, variable, units, availableHours, availableTimestamps, forecastHour, mrmsTimestamp } = state;
+
+        // CRITICAL: Don't start preloading if we don't have a valid current frame
+        if (isMRMS && (mrmsTimestamp == null || !availableTimestamps || availableTimestamps.length === 0)) {
+            hasPreloadedRef.current = false;
+            return;
+        }
+
+        if (!isMRMS && (forecastHour == null || !availableHours || availableHours.length === 0)) {
+            hasPreloadedRef.current = false;
+            return;
+        }
+
+        // Only mark as "has preloaded" after validation passes
+        hasPreloadedRef.current = true;
+
+        // Fix the current forecast hour if it's invalid for this variable/model combo
+        let effectiveForecastHour = forecastHour;
+        if (!isMRMS && variable === 'ptypeRefl' && model === 'hrrr' && forecastHour === 0) {
+            const validHours = availableHours.filter(hour => hour !== 0);
+            effectiveForecastHour = validHours.length > 0 ? validHours[0] : 0;
+        }
+
+        if (!cachedGeometry.current || !cachedColormap.current) {
+            const gridModel = isMRMS ? 'mrms' : model;
+            const { corners, gridDef } = core._getGridCornersAndDef(gridModel);
+            gridLayerRef.current.updateGeometry(corners, gridDef);
+            cachedGeometry.current = { model: gridModel, variable };
+
+            const { colormap, baseUnit } = core._getColormapForVariable(variable);
+            const toUnit = core._getTargetUnit(baseUnit, units);
+            const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
+            let dataRange;
+            if (variable === 'ptypeRefl' || variable === 'ptypeRate') {
+                dataRange = isMRMS ? [5, 380] : [5, 380];
+            } else {
+                dataRange = [finalColormap[0], finalColormap[finalColormap.length - 2]];
+            }
+            const colormapBytes = _generateColormapBytes(finalColormap);
+            const colormapAsBase64 = fromByteArray(colormapBytes);
+
+            gridLayerRef.current.updateColormapTexture(colormapAsBase64);
+            cachedColormap.current = { key: `${variable}-${units}` };
+            cachedDataRange.current = dataRange;
+
+            setRenderProps({ opacity: state.opacity, dataRange: dataRange });
+            hasInitialLoad.current = true;
+        }
+
+        // Apply the same filtering logic as in AguaceroCore._emitStateChange
+        let filteredHours = availableHours;
+        if (!isMRMS && variable === 'ptypeRefl' && model === 'hrrr' && availableHours && availableHours.length > 0) {
+            filteredHours = availableHours.filter(hour => hour !== 0);
+        }
+
+        const allFrames = isMRMS ? availableTimestamps : filteredHours;
+        if (!allFrames || allFrames.length === 0) {
+            return;
+        }
+
+        const currentFrame = isMRMS ? mrmsTimestamp : effectiveForecastHour;
+
+        // Double-check currentFrame is valid
+        if (currentFrame == null) {
+            hasPreloadedRef.current = false;
+        }
+
+        // Reverse the frame order to load from last to first
+        const reversedFrames = [...allFrames].reverse();
+        const framesToPreload = reversedFrames.filter(frame => frame !== currentFrame);
+
+        const { corners, gridDef } = core._getGridCornersAndDef(isMRMS ? 'mrms' : model);
+        const { nx, ny } = gridDef.grid_params;
+
+        // Load the current frame FIRST and WAIT for it before continuing
+        const currentCacheKey = isMRMS ? `mrms-${currentFrame}-${variable}` : `${model}-${date}-${run}-${currentFrame}-${variable}`;
+
+        if (!preloadedDataCache.current.has(currentCacheKey)) {
+            let resourcePath;
+            if (isMRMS) {
+                const frameDate = new Date(currentFrame * 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}/${currentFrame}/0/${variable}/0`;
+            } else {
+                resourcePath = `/grids/${model}/${date}/${run}/${currentFrame}/${variable}/0`;
+            }
+
+            const url = `${core.baseGridUrl}${resourcePath}?apiKey=${core.apiKey}`;
+            const options = { url, apiKey: core.apiKey, bundleId: core.bundleId };
+
+            try {
+                const netStart = performance.now();
+                const result = await WeatherFrameProcessorModule.processFrame(options);
+                perfLog(`First frame fetched in ${(performance.now() - netStart).toFixed(2)}ms`);
+
+                if (!result || !result.filePath) {
+                    return;
+                }
+
+                const { baseUnit } = core._getColormapForVariable(variable);
+
+                const toUnit = core._getTargetUnit(baseUnit, units);
+
+                const fieldInfo = DICTIONARIES?.fld?.[variable] || {};
+                const serverDataUnit = fieldInfo.defaultUnit || baseUnit;
+
+                let dataScale = result.scale;
+                let dataOffset = result.offset;
+
+                let convertedScale = dataScale;
+                let convertedOffset = dataOffset;
+
+                if (serverDataUnit !== baseUnit) {
+                    const conversionFunc = getUnitConversionFunction(serverDataUnit, baseUnit);
+                    if (conversionFunc) {
+                        if (result.scaleType === 'sqrt') {
+                            const physicalAtOffset = dataOffset * dataOffset;
+                            const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+                            const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                            const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+                            convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                            const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+                            convertedScale = newOffsetPlusScale - convertedOffset;
+                        } else {
+                            convertedOffset = conversionFunc(dataOffset);
+                            const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+                            convertedScale = convertedOffsetPlusScale - convertedOffset;
+                        }
+                        dataScale = convertedScale;
+                        dataOffset = convertedOffset;
+                    }
+                }
+
+                if (baseUnit !== toUnit) {
+                    const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
+                    if (conversionFunc) {
+                        if (result.scaleType === 'sqrt') {
+                            const physicalAtOffset = dataOffset * dataOffset;
+                            const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+                            const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                            const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+                            convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                            const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+                            convertedScale = newOffsetPlusScale - convertedOffset;
+                        } else {
+                            convertedOffset = conversionFunc(dataOffset);
+                            const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+                            convertedScale = convertedOffsetPlusScale - convertedOffset;
+                        }
+                    }
+                }
+
+                const frameData = {
+                    filePath: result.filePath,
+                    nx, ny,
+                    scale: convertedScale,
+                    offset: convertedOffset,
+                    missing: result.missing,
+                    corners,
+                    gridDef,
+                    scaleType: result.scaleType,
+                    originalScale: result.scale,
+                    originalOffset: result.offset
+                };
+
+                preloadedDataCache.current.set(currentCacheKey, frameData);
+
+                // Update the GPU with the current frame
+                gridLayerRef.current.updateDataTextureFromFile(
+                    frameData.filePath,
+                    frameData.nx, frameData.ny,
+                    frameData.scale, frameData.offset, frameData.missing,
+                    frameData.scaleType
+                );
+                
+                perfLog(`First frame updated to GPU`);
+
+                currentGridDataRef.current = {
+                    nx: frameData.nx,
+                    ny: frameData.ny,
+                    scale: frameData.scale,
+                    offset: frameData.offset,
+                    missing: frameData.missing,
+                    gridDef: frameData.gridDef,
+                    variable: variable,
+                    units: units,
+                    scaleType: frameData.scaleType
+                };
+            } catch (error) {
+                console.warn(`⚠️ [preloadAllFramesToDisk] Failed frame ${currentFrame}:`, error);
+                hasPreloadedRef.current = false;
+            }
+        }
+
+        // NOW preload the rest of the frames asynchronously
+        perfLog(`Triggering fetch for ${framesToPreload.length} background frames`);
+        
+        framesToPreload.forEach((frame) => {
+            const cacheKey = isMRMS ? `mrms-${frame}-${variable}` : `${model}-${date}-${run}-${frame}-${variable}`;
+            if (preloadedDataCache.current.has(cacheKey)) {
+                return;
+            }
+
+            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)
+                .then(result => {
+                    if (!result || !result.filePath) {
+                        console.warn(`⚠️ [preloadAllFramesToDisk] Failed frame ${frame}: No filePath`);
+                        return;
+                    }
+
+                    // ADD: Same two-step conversion as the current frame
+                    const { baseUnit } = core._getColormapForVariable(variable);
+                    const toUnit = core._getTargetUnit(baseUnit, units);
+                    const fieldInfo = DICTIONARIES?.fld?.[variable] || {};
+                    const serverDataUnit = fieldInfo.defaultUnit || baseUnit;
+
+                    let dataScale = result.scale;
+                    let dataOffset = result.offset;
+
+                    let convertedScale = dataScale;
+                    let convertedOffset = dataOffset;
+
+                    // Step 1: Convert from server unit to colormap base unit
+                    if (serverDataUnit !== baseUnit) {
+                        const conversionFunc = getUnitConversionFunction(serverDataUnit, baseUnit);
+                        if (conversionFunc) {
+                            if (result.scaleType === 'sqrt') {
+                                const physicalAtOffset = dataOffset * dataOffset;
+                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+                                convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+                                convertedScale = newOffsetPlusScale - convertedOffset;
+                            } else {
+                                convertedOffset = conversionFunc(dataOffset);
+                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+                                convertedScale = convertedOffsetPlusScale - convertedOffset;
+                            }
+                            dataScale = convertedScale;
+                            dataOffset = convertedOffset;
+                        }
+                    }
+
+                    // Step 2: Convert from colormap base unit to target display unit
+                    if (baseUnit !== toUnit) {
+                        const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
+                        if (conversionFunc) {
+                            if (result.scaleType === 'sqrt') {
+                                const physicalAtOffset = dataOffset * dataOffset;
+                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+                                convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+                                convertedScale = newOffsetPlusScale - convertedOffset;
+                            } else {
+                                convertedOffset = conversionFunc(dataOffset);
+                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+                                convertedScale = convertedOffsetPlusScale - convertedOffset;
+                            }
+                        }
+                    }
+
+                    const frameData = {
+                        filePath: result.filePath,
+                        nx, ny,
+                        scale: convertedScale,
+                        offset: convertedOffset,
+                        missing: result.missing,
+                        corners,
+                        gridDef,
+                        scaleType: result.scaleType,
+                        originalScale: result.scale,
+                        originalOffset: result.offset
+                    };
+
+                    preloadedDataCache.current.set(cacheKey, frameData);
+
+                    if (Platform.OS === 'ios' && gridLayerRef.current.primeGpuCache) {
+                        const frameInfoForGpu = {
+                            [cacheKey]: {
+                                filePath: frameData.filePath,
+                                nx: frameData.nx,
+                                ny: frameData.ny,
+                                scale: frameData.scale,
+                                offset: frameData.offset,
+                                missing: frameData.missing,
+                                scaleType: frameData.scaleType || 'linear',
+                                originalScale: frameData.originalScale,
+                                originalOffset: frameData.originalOffset
+                            }
+                        };
+                        gridLayerRef.current.primeGpuCache(frameInfoForGpu);
+                    }
+                })
+                .catch(error => {
+                    console.warn(`⚠️ [preloadAllFramesToDisk] Failed frame ${frame}:`, error);
+                });
+        });
+        
+        perfLog(`Completed preload triggering in ${(performance.now() - start).toFixed(2)}ms`);
+    };
+
+    useEffect(() => {
+        // This effect manages the auto-refresh based on props
+        if (autoRefresh) {
+            const interval = (autoRefreshInterval || 30) * 1000;
+            _checkForUpdates(); // Run immediately on enable
+            autoRefreshIntervalId.current = setInterval(_checkForUpdates, interval);
+        }
+
+        // Cleanup function: this runs when the component unmounts or props change
+        return () => {
+            if (autoRefreshIntervalId.current) {
+                clearInterval(autoRefreshIntervalId.current);
+                autoRefreshIntervalId.current = null;
+            }
+        };
+    }, [autoRefresh, autoRefreshInterval, _checkForUpdates]);
+
+    const updateGPUWithCachedData = (state) => {
+        const start = performance.now();
+        const { model, date, run, forecastHour, variable, units, isMRMS, mrmsTimestamp } = state;
+
+        const cacheKey = isMRMS
+            ? `mrms-${mrmsTimestamp}-${variable}`
+            : `${model}-${date}-${run}-${forecastHour}-${variable}`;
+
+        if (Platform.OS === 'ios' && gridLayerRef.current.setActiveFrame) {
+            // Get the cached data BEFORE calling setActiveFrame
+            const cachedData = preloadedDataCache.current.get(cacheKey);
+
+            if (cachedData) {
+                currentGridDataRef.current = {
+                    nx: cachedData.nx,
+                    ny: cachedData.ny,
+                    scale: cachedData.scale,
+                    offset: cachedData.offset,
+                    missing: cachedData.missing,
+                    gridDef: cachedData.gridDef,
+                    variable: variable,
+                    units: units,
+                    scaleType: cachedData.scaleType
+                };
+            }
+
+            if (__DEV__) {
+                console.log(`[WeatherLayerManager] setActiveFrame: ${cacheKey}`);
+            }
+            gridLayerRef.current.setActiveFrame(cacheKey);
+            perfLog(`setActiveFrame sent in ${(performance.now() - start).toFixed(2)}ms`);
+            return true;
+        }
+
+        const cachedData = preloadedDataCache.current.get(cacheKey);
+
+        if (!cachedData) {
+            return false;
+        }
+
+        if (!gridLayerRef.current) {
+            console.warn(`⚠️ [updateGPUWithCachedData] GridLayer ref not available`); // CHANGED
+            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);
+            let dataRange;
+            if (variable === 'ptypeRefl' || variable === 'ptypeRate') {
+                if (isMRMS) {
+                    dataRange = [5, 380];
+                } else {
+                    dataRange = [5, 380];
+                }
+            } else {
+                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 }));
+        }
+
+        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 = 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;
+        }
+
+        // ADD THIS: Check if we have valid data before attempting inspection
+        if (!currentGridDataRef.current) {
+            return null;
+        }
+
+        try {
+            const gridIndices = core._getGridIndexFromLngLat(lng, lat);
+            if (!gridIndices) return null;
+
+            const { i, j } = gridIndices;
+
+            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);
+            const finalColormap = core._convertColormapUnits(colormap, baseUnit, displayUnit);
+            const minThreshold = finalColormap[0];
+
+            if (value < minThreshold) {
+                return null;
+            }
+
+            // 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;
+        }
+    };
+
+    const _checkForUpdates = useMemo(() => async () => {
+        if (!core) return;
+        const { isMRMS, model: currentModel, variable: currentVariable, date, run } = core.state;
+
+        if (isMRMS) {
+            // --- MRMS LOGIC (Keep existing logic) ---
+            const oldTimestamps = new Set(core.mrmsStatus?.[currentVariable] || []);
+            const mrmsStatus = await core.fetchMRMSStatus(true);
+            const newTimestamps = mrmsStatus?.[currentVariable] || [];
+            if (newTimestamps.length === 0) return;
+
+            const newTimestampsToPreload = newTimestamps.filter(ts => !oldTimestamps.has(ts));
+
+            if (newTimestampsToPreload.length > 0) {
+                core.mrmsStatus = mrmsStatus;
+                core._emitStateChange(); // Update UI slider without changing selection
+
+                // ... (Keep your existing preloading logic here) ...
+                const { corners, gridDef } = core._getGridCornersAndDef('mrms');
+                const { nx, ny } = gridDef.grid_params;
+
+                newTimestampsToPreload.forEach(frame => {
+                    const cacheKey = `mrms-${frame}-${currentVariable}`;
+                    if (preloadedDataCache.current.has(cacheKey)) return;
+
+                    const frameDate = new Date(frame * 1000);
+                    const y = frameDate.getUTCFullYear(), m = (frameDate.getUTCMonth() + 1).toString().padStart(2, '0'), d = frameDate.getUTCDate().toString().padStart(2, '0');
+                    const resourcePath = `/grids/mrms/${y}${m}${d}/${frame}/0/${currentVariable}/0`;
+                    const url = `${core.baseGridUrl}${resourcePath}?apiKey=${core.apiKey}`;
+
+                    WeatherFrameProcessorModule.processFrame({ url, apiKey: core.apiKey, bundleId: core.bundleId })
+                        .then(result => {
+                            if (!result || !result.filePath) return;
+                            const frameData = { filePath: result.filePath, nx, ny, scale: result.scale, offset: result.offset, missing: result.missing, corners, gridDef, scaleType: result.scaleType, originalScale: result.scale, originalOffset: result.offset };
+                            preloadedDataCache.current.set(cacheKey, frameData);
+                            if (Platform.OS === 'ios' && gridLayerRef.current?.primeGpuCache) {
+                                gridLayerRef.current.primeGpuCache({ [cacheKey]: frameData });
+                            }
+                        }).catch(error => console.warn(`[Auto-Refresh] Failed to preload frame ${frame}:`, error));
+                });
+
+                const newTimestampsSet = new Set(newTimestamps);
+                oldTimestamps.forEach(oldTs => {
+                    if (!newTimestampsSet.has(oldTs)) {
+                        const cacheKey = `mrms-${oldTs}-${currentVariable}`;
+                        preloadedDataCache.current.delete(cacheKey);
+                    }
+                });
+            }
+        } else {
+            const modelStatus = await core.fetchModelStatus(true);
+            core._emitStateChange();
+
+            const latestRun = findLatestModelRun(modelStatus, currentModel);
+            if (!latestRun) return;
+        }
+    }, [core]);
+
+    useEffect(() => {
+        if (!core) {
+            console.warn('⚠️ [useEffect] Core is not available yet');
+            return;
+        }
+
+        const handleStateChange = (newState) => {
+            if (!previousStateRef.current) {
+                previousStateRef.current = core.state;
+            }
+
+            const variableChanged = !previousStateRef.current || newState.variable !== previousStateRef.current.variable;
+
+            if (variableChanged && gridLayerRef.current?.setVariable) {
+                gridLayerRef.current.setVariable(newState.variable);
+            }
+
+            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;
+
+            const isPlayStateOnlyChange =
+                hasInitialLoad.current &&
+                newState.isPlaying !== previousStateRef.current?.isPlaying &&
+                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.opacity === previousStateRef.current?.opacity;
+
+            if (!isOpacityOnlyChange && !isPlayStateOnlyChange && lastProcessedState.current === stateKey) {
+                previousStateRef.current = newState;
+                return;
+            }
+
+            if (!isOpacityOnlyChange && !isPlayStateOnlyChange) {
+                lastProcessedState.current = stateKey;
+            }
+
+            if (isOpacityOnlyChange) {
+                setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
+                previousStateRef.current = newState;
+                return;
+            }
+
+            if (isPlayStateOnlyChange) {
+                previousStateRef.current = newState;
+                return;
+            }
+
+            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}`
+                    : `${model}-${date}-${run}-${forecastHour}-${variable}`;
+
+                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);
+                    const fieldInfo = DICTIONARIES?.fld?.[variable] || {};
+                    const serverDataUnit = fieldInfo.defaultUnit || baseUnit;
+
+                    let dataScale = cachedData.originalScale;
+                    let dataOffset = cachedData.originalOffset;
+
+                    if (serverDataUnit !== baseUnit) {
+                        const conversionFunc = getUnitConversionFunction(serverDataUnit, baseUnit);
+                        if (conversionFunc) {
+                            if (cachedData.scaleType === 'sqrt') {
+                                const physicalAtOffset = dataOffset * dataOffset;
+                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+                                const newOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+                                dataScale = newOffsetPlusScale - newOffset;
+                                dataOffset = newOffset;
+                            } else {
+                                const convertedOffset = conversionFunc(dataOffset);
+                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+                                dataScale = convertedOffsetPlusScale - convertedOffset;
+                                dataOffset = convertedOffset;
+                            }
+                        }
+                    }
+
+                    if (baseUnit !== toUnit) {
+                        const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
+                        if (conversionFunc) {
+                            if (cachedData.scaleType === 'sqrt') {
+                                const physicalAtOffset = dataOffset * dataOffset;
+                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+                                const newOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+                                dataScale = newOffsetPlusScale - newOffset;
+                                dataOffset = newOffset;
+                            } else {
+                                const convertedOffset = conversionFunc(dataOffset);
+                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+                                dataScale = convertedOffsetPlusScale - convertedOffset;
+                                dataOffset = convertedOffset;
+                            }
+                        }
+                    }
+
+                    const { colormap } = core._getColormapForVariable(variable);
+                    const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
+                    let dataRange = (variable === 'ptypeRefl' || variable === 'ptypeRate') ? [5, 380] : [finalColormap[0], finalColormap[finalColormap.length - 2]];
+                    const colormapBytes = _generateColormapBytes(finalColormap);
+                    const colormapAsBase64 = fromByteArray(colormapBytes);
+
+                    gridLayerRef.current.updateColormapTexture(colormapAsBase64);
+                    cachedColormap.current = { key: `${variable}-${units}` };
+                    cachedDataRange.current = dataRange;
+                    setRenderProps(prev => ({ ...prev, dataRange, opacity: newState.opacity }));
+
+                    if (gridLayerRef.current && gridLayerRef.current.updateDataParameters) {
+                        const scaleTypeValue = cachedData.scaleType === 'sqrt' ? 1 : 0;
+                        gridLayerRef.current.updateDataParameters(dataScale, dataOffset, cachedData.missing, scaleTypeValue);
+                    }
+
+                    const newCacheKey = isMRMS ? `mrms-${mrmsTimestamp}-${variable}` : `${model}-${date}-${run}-${forecastHour}-${variable}`;
+                    preloadedDataCache.current.set(newCacheKey, { ...cachedData, scale: dataScale, offset: dataOffset });
+                }
+
+                previousStateRef.current = newState;
+                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.setVariable(newState.variable);
+                    gridLayerRef.current.clear();
+                    if (Platform.OS === 'ios' && gridLayerRef.current.clearGpuCache) {
+                        gridLayerRef.current.clearGpuCache();
+                    }
+                }
+                hasPreloadedRef.current = false;
+                preloadedDataCache.current.clear();
+                cachedGeometry.current = null;
+                cachedColormap.current = null;
+                currentGridDataRef.current = null;
+                WeatherFrameProcessorModule.cancelAllFrames();
+
+                if (!newState.variable) {
+                    previousStateRef.current = newState;
+                    return;
+                }
+                preloadAllFramesToDisk(newState);
+            } else if (newState.forecastHour !== previousStateRef.current.forecastHour || (newState.isMRMS && newState.mrmsTimestamp !== previousStateRef.current.mrmsTimestamp)) {
+                const success = updateGPUWithCachedData(newState);
+                if (success && newState.opacity !== renderProps.opacity) {
+                    setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
+                }
+            }
+
+            previousStateRef.current = newState;
+        };
+
+        handleStateChangeRef.current = handleStateChange;
+
+        const stableHandler = (newState) => {
+            // OPTIMIZATION: If playing (high speed), prioritize MAP update and skip debounce
+            if (newState.isPlaying) {
+                // 1. Update Map FIRST (Native Enqueue)
+                if (handleStateChangeRef.current) {
+                    handleStateChangeRef.current(newState);
+                }
+
+                // 2. Update UI Slider SECOND
+                // This ensures the heavy map frame is processing while React reconciles the slider
+                props.onStateChange?.(newState);
+
+                if (debounceTimeoutRef.current) {
+                    clearTimeout(debounceTimeoutRef.current);
+                    debounceTimeoutRef.current = null;
+                }
+                return;
+            }
+
+            // --- Existing Logic for scrubbing/paused ---
+
+            // 1. Immediate Slider Update for responsiveness
+            props.onStateChange?.(newState);
+
+            if (debounceTimeoutRef.current) {
+                clearTimeout(debounceTimeoutRef.current);
+            }
+
+            // Opacity and Play state changes should be immediate for the native layer too
+            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;
+
+            const isPlayStateOnlyChange =
+                previousStateRef.current &&
+                newState.isPlaying !== previousStateRef.current.isPlaying &&
+                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 || isPlayStateOnlyChange || !previousStateRef.current) {
+                if (handleStateChangeRef.current) {
+                    handleStateChangeRef.current(newState);
+                }
+                return;
+            }
+
+            debounceTimeoutRef.current = setTimeout(() => {
+                if (handleStateChangeRef.current) {
+                    handleStateChangeRef.current(newState);
+                }
+                debounceTimeoutRef.current = null;
+            }, 16); // ~60fps map updates
+        };
+
+        core.on('state:change', stableHandler);
+
+        return () => {
+            core.off('state:change', stableHandler);
+            if (debounceTimeoutRef.current) {
+                clearTimeout(debounceTimeoutRef.current);
+            }
+        };
+    }, [core]);
+
+    useEffect(() => {
+        return () => {
+            preloadedDataCache.current.clear(); // This drops JS references
+            hasInitialLoad.current = false;
+            lastProcessedState.current = null;
+            // Native cleanup
+            if (gridLayerRef.current && Platform.OS === 'ios') {
+                gridLayerRef.current.clearGpuCache();
+            }
+        };
+    }, []);
+
+    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]);
+
+    useEffect(() => {
+        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');
 };