@aguacerowx/react-native 0.0.8 → 0.0.12

package/src/WeatherLayerManager.js

@@ -0,0 +1,873 @@
+// packages/react-native/src/WeatherLayerManager.js
+
+import React, { useState, useRef, useContext, useEffect, forwardRef, useImperativeHandle, useMemo } from 'react';
+import { AguaceroCore, getUnitConversionFunction } from '@aguacerowx/javascript-sdk';
+import { AguaceroContext } from './AguaceroContext';
+import { GridRenderLayer } from './GridRenderLayer';
+import { fromByteArray } from 'base64-js';
+import { Platform, NativeModules } from 'react-native';
+import { mapRegistry } from './MapRegistry';
+
+console.log("--- Aguacero Native Module Initial State Check ---");
+console.log("All NativeModules:", Object.keys(NativeModules));
+console.log("WeatherFrameProcessorModule available?:", !!NativeModules.WeatherFrameProcessorModule);
+console.log("InspectorModule available?:", !!NativeModules.InspectorModule);
+console.log("GridRenderLayerManager available?:", !!NativeModules.GridRenderLayerManager);
+console.log("-------------------------------------------------");
+
+const { WeatherFrameProcessorModule, InspectorModule } = NativeModules;
+
+/**
+ * A helper function to generate the raw RGBA byte buffer for the colormap texture.
+ */
+const _generateColormapBytes = (colormap) => {
+    const width = 256;
+    const data = new Uint8Array(width * 4);
+    const stops = colormap.reduce((acc, _, i) => (i % 2 === 0 ? [...acc, { value: colormap[i], color: colormap[i + 1] }] : acc), []);
+
+    if (stops.length === 0) return data;
+
+    const minVal = stops[0].value;
+    const maxVal = stops[stops.length - 1].value;
+
+    const hexToRgb = (hex) => {
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return [r, g, b];
+    };
+
+    for (let i = 0; i < width; i++) {
+        const val = minVal + (i / (width - 1)) * (maxVal - minVal);
+        let lower = stops[0];
+        let upper = stops[stops.length - 1];
+        for (let j = 0; j < stops.length - 1; j++) {
+            if (val >= stops[j].value && val <= stops[j + 1].value) {
+                lower = stops[j];
+                upper = stops[j + 1];
+                break;
+            }
+        }
+        const t = (val - lower.value) / (upper.value - lower.value || 1);
+        const lowerRgb = hexToRgb(lower.color);
+        const upperRgb = hexToRgb(upper.color);
+        const rgb = lowerRgb.map((c, idx) => c * (1 - t) + upperRgb[idx] * t);
+
+        const offset = i * 4;
+        data[offset + 0] = Math.round(rgb[0]);
+        data[offset + 1] = Math.round(rgb[1]);
+        data[offset + 2] = Math.round(rgb[2]);
+        data[offset + 3] = 255;
+    }
+    return data;
+};
+
+AguaceroCore.prototype.setMapCenter = function(center) {
+    this.emit('map:move', center);
+};
+
+export const WeatherLayerManager = forwardRef((props, ref) => {
+    const { inspectorEnabled, onInspect, apiKey, customColormaps, ...restProps } = props;
+    const context = useContext(AguaceroContext);
+    
+    // Create the core here instead of getting it from context
+    const core = useMemo(() => new AguaceroCore({ 
+        apiKey: apiKey,
+        customColormaps: customColormaps 
+    }), [apiKey]);
+    
+    const gridLayerRef = useRef(null);
+    const currentGridDataRef = useRef(null);
+    
+    // Cache for preloaded grid data - stores the processed data ready for GPU upload
+    const preloadedDataCache = useRef(new Map());
+    
+    // Track what we're currently preloading to avoid duplicates
+    const preloadingSet = useRef(new Set());
+    
+    // Store geometry and colormap that don't change with forecast hour
+    const cachedGeometry = useRef(null);
+    const cachedColormap = useRef(null);
+    const cachedDataRange = useRef([0, 1]);
+    
+    // Track if we've done the initial load
+    const hasInitialLoad = useRef(false);
+    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, () => {
+        return {
+            play: () => {
+                core.play();
+            },
+            pause: () => {
+                core.pause();
+            },
+            togglePlay: () => {
+                core.togglePlay();
+            },
+            step: (direction) => {
+                core.step(direction);
+            },
+            setPlaybackSpeed: (speed) => core.setPlaybackSpeed(speed),
+            setOpacity: (opacity) => core.setOpacity(opacity),
+            setUnits: (units) => core.setUnits(units),
+            switchMode: (options) => core.switchMode(options),
+            getAvailableVariables: (model) => core.getAvailableVariables(model),
+            getVariableDisplayName: (code) => core.getVariableDisplayName(code),
+            setRun: (runString) => core.setState({ run: runString.split(':')[1] }),
+            setState: (newState) => core.setState(newState),
+            setMRMSTimestamp: (timestamp) => core.setMRMSTimestamp(timestamp),
+            setSmoothing: (enabled) => {
+                if (gridLayerRef.current) {
+                    gridLayerRef.current.setSmoothing(enabled);
+                }
+            },
+        };
+    }, [core]);
+
+    const preloadAllFramesToDisk = (state) => {
+        
+        if (hasPreloadedRef.current) {
+            console.log('✅ [Preload] Gating preload; already initiated for this dataset.');
+            return;
+        }
+        hasPreloadedRef.current = true;
+        console.log('🚀 [Preload] Initiating parallel preload for new dataset...');
+
+        const { isMRMS, model, date, run, variable, units, availableHours, availableTimestamps, forecastHour, mrmsTimestamp } = state;
+
+        if (!cachedGeometry.current || !cachedColormap.current) {
+            const gridModel = isMRMS ? 'mrms' : model;
+            const { corners, gridDef } = core._getGridCornersAndDef(gridModel);
+            gridLayerRef.current.updateGeometry(corners, gridDef);
+            cachedGeometry.current = { model: gridModel, variable };
+
+            const { colormap, baseUnit } = core._getColormapForVariable(variable);
+            const toUnit = core._getTargetUnit(baseUnit, units);
+            const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
+            const dataRange = [finalColormap[0], finalColormap[finalColormap.length - 2]];
+            const colormapBytes = _generateColormapBytes(finalColormap);
+            const colormapAsBase64 = fromByteArray(colormapBytes);
+            
+            gridLayerRef.current.updateColormapTexture(colormapAsBase64);
+            cachedColormap.current = { key: `${variable}-${units}` };
+            cachedDataRange.current = dataRange;
+            
+            setRenderProps({ opacity: state.opacity, dataRange: dataRange });
+            hasInitialLoad.current = true;
+        }
+
+        const allFrames = isMRMS ? availableTimestamps : availableHours;
+        if (!allFrames || allFrames.length === 0) {
+            console.warn('🟡 [preloadAllFramesToDisk] No frames available to download.');
+            return;
+        }
+
+        const currentFrame = isMRMS ? mrmsTimestamp : forecastHour;
+        const prioritizedFrames = [
+            currentFrame,
+            ...allFrames.filter(frame => frame !== currentFrame)
+        ];
+        console.log(`[Preload] Prioritizing frame: ${currentFrame}. Total frames: ${prioritizedFrames.length}`);
+
+        const { corners, gridDef } = core._getGridCornersAndDef(isMRMS ? 'mrms' : model);
+        const { nx, ny } = gridDef.grid_params;
+
+        prioritizedFrames.forEach((frame, index) => {
+            const cacheKey = isMRMS ? `mrms-${frame}-${variable}` : `${model}-${date}-${run}-${frame}-${variable}`;
+            if (preloadedDataCache.current.has(cacheKey)) {
+                return; // Use 'return' here as it's a forEach loop
+            }
+
+            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;
+                    }
+                    
+                    const { baseUnit } = core._getColormapForVariable(variable);
+                    const toUnit = core._getTargetUnit(baseUnit, units);
+                    
+                    let dataScale = result.scale;
+                    let dataOffset = result.offset;
+                    
+                    // Calculate converted values for immediate use
+                    let convertedScale = dataScale;
+                    let convertedOffset = dataOffset;
+                    
+                    if (baseUnit !== toUnit) {
+                        const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
+                        if (conversionFunc) {
+                            if (result.scaleType === 'sqrt') {
+                                const physicalAtOffset = dataOffset * dataOffset;
+                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+                                convertedOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+                                convertedScale = newOffsetPlusScale - convertedOffset;
+                            } else {
+                                convertedOffset = conversionFunc(dataOffset);
+                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+                                convertedScale = convertedOffsetPlusScale - convertedOffset;
+                            }
+                        }
+                    }
+                    
+                    // Store with ORIGINAL values for unit conversion later
+                    const frameData = {
+                        filePath: result.filePath,
+                        nx, ny,
+                        scale: convertedScale,  // Current converted values
+                        offset: convertedOffset,
+                        missing: result.missing,
+                        corners, 
+                        gridDef,
+                        scaleType: result.scaleType,
+                        originalScale: result.scale,  // CRITICAL: Always original
+                        originalOffset: result.offset  // CRITICAL: Always original
+                    };
+                    
+                    preloadedDataCache.current.set(cacheKey, frameData);
+
+                    const isCurrentFrame = index === 0;
+
+                    if (isCurrentFrame) {
+                        console.log(`🎯 [Preload] Using FAST LANE to process and draw current frame (${frame}) immediately.`);
+                        gridLayerRef.current.updateDataTextureFromFile(
+                            frameData.filePath,
+                            frameData.nx, frameData.ny,
+                            frameData.scale, frameData.offset, frameData.missing,
+                            frameData.scaleType
+                        );
+
+                        currentGridDataRef.current = {
+                            nx: frameData.nx,
+                            ny: frameData.ny,
+                            scale: frameData.scale,
+                            offset: frameData.offset,
+                            missing: frameData.missing,
+                            gridDef: frameData.gridDef,
+                            variable: variable,
+                            units: units
+                        };
+                    } else {
+                        if (Platform.OS === 'ios' && gridLayerRef.current.primeGpuCache) {
+                            const frameInfoForGpu = {
+                                [cacheKey]: {
+                                    filePath: frameData.filePath, 
+                                    nx: frameData.nx, 
+                                    ny: frameData.ny,
+                                    scale: frameData.scale,  // Current converted scale
+                                    offset: frameData.offset,  // Current converted offset
+                                    missing: frameData.missing,
+                                    scaleType: frameData.scaleType || 'linear',
+                                    originalScale: frameData.originalScale,  // ADD THIS
+                                    originalOffset: frameData.originalOffset  // ADD THIS
+                                }
+                            };
+                            gridLayerRef.current.primeGpuCache(frameInfoForGpu);
+                        }
+                    }
+                })
+                .catch(error => {
+                    console.warn(`⚠️ [preloadAllFramesToDisk] Failed frame ${frame}:`, error);
+                });
+        });
+    };
+
+    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
+                };
+                
+                console.log('📱 [iOS] Updated currentGridDataRef for inspector:', {
+                    scale: cachedData.scale,
+                    offset: cachedData.offset,
+                    scaleType: cachedData.scaleType  // ADD THIS
+                });
+            }
+            
+            // Now call setActiveFrame (which will async update the native cache)
+            gridLayerRef.current.setActiveFrame(cacheKey);
+            return true;
+        }
+
+        const cachedData = preloadedDataCache.current.get(cacheKey);
+        
+        if (!cachedData) {
+            const timeKey = isMRMS ? `timestamp ${mrmsTimestamp}` : `hour +${forecastHour}`;
+            console.log(`⏳ [updateGPUWithCachedData] Frame not ready yet for ${timeKey}. Still preloading...`); // CHANGED
+            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);
+            const dataRange = [finalColormap[0], finalColormap[finalColormap.length - 2]];
+            const colormapBytes = _generateColormapBytes(finalColormap);
+            const colormapAsBase64 = fromByteArray(colormapBytes);
+            
+            gridLayerRef.current.updateColormapTexture(colormapAsBase64);
+            cachedColormap.current = { key: colormapKey };
+            cachedDataRange.current = dataRange;
+            
+            setRenderProps(prev => ({ ...prev, dataRange }));
+        } 
+        
+        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) {
+            console.log('🔍 [Inspector] No grid data available');
+            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) {
+                console.log('🔍 [Inspector] Rejected: below threshold');  // ADD THIS LOG
+                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;
+        }
+    };
+
+    useEffect(() => {
+        if (!core) {
+            console.warn('⚠️ [useEffect] Core is not available yet');
+            return;
+        }
+
+        const handleStateChange = async (newState) => {
+            if (!previousStateRef.current) {
+                previousStateRef.current = core.state;
+            } 
+            
+            const stateKey = `${newState.model}-${newState.variable}-${newState.date}-${newState.run}-${newState.forecastHour}-${newState.units}-${newState.mrmsTimestamp}`;
+
+            const isOpacityOnlyChange = 
+                hasInitialLoad.current &&
+                newState.opacity !== renderProps.opacity && 
+                newState.variable === previousStateRef.current?.variable &&
+                newState.forecastHour === previousStateRef.current?.forecastHour &&
+                newState.mrmsTimestamp === previousStateRef.current?.mrmsTimestamp &&
+                newState.model === previousStateRef.current?.model &&
+                newState.units === previousStateRef.current?.units;
+
+            
+            if (!isOpacityOnlyChange && lastProcessedState.current === stateKey) {
+                return;
+            }
+            
+            if (!isOpacityOnlyChange) {
+                lastProcessedState.current = stateKey;
+            }
+            
+            props.onStateChange?.(newState);
+            
+            if (isOpacityOnlyChange) {
+                setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
+                previousStateRef.current = newState;
+                return;
+            }
+            
+            // Check if only units changed
+            const isUnitsOnlyChange = 
+                hasInitialLoad.current &&
+                newState.model === previousStateRef.current.model &&
+                newState.isMRMS === previousStateRef.current.isMRMS &&
+                newState.variable === previousStateRef.current.variable &&
+                newState.date === previousStateRef.current.date &&
+                newState.run === previousStateRef.current.run &&
+                newState.forecastHour === previousStateRef.current.forecastHour &&
+                newState.mrmsTimestamp === previousStateRef.current.mrmsTimestamp &&
+                newState.units !== previousStateRef.current.units;
+
+            if (isUnitsOnlyChange) {
+                const { variable, units, isMRMS, mrmsTimestamp, model, date, run, forecastHour } = newState;
+                const oldCacheKey = isMRMS 
+                    ? `mrms-${mrmsTimestamp}-${variable}`
+                    : `${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);
+                    
+                    let dataScale = cachedData.originalScale;
+                    let dataOffset = cachedData.originalOffset;
+                    
+                    if (baseUnit !== toUnit) {
+                        const conversionFunc = getUnitConversionFunction(baseUnit, toUnit);
+                        console.log('🔧 [Unit Conversion] Conversion function exists:', !!conversionFunc);
+                        
+                        if (conversionFunc) {
+                            if (cachedData.scaleType === 'sqrt') {
+                                // Calculate what the physical values would be at offset and offset+scale
+                                const physicalAtOffset = dataOffset * dataOffset;
+                                const physicalAtOffsetPlusScale = (dataOffset + dataScale) * (dataOffset + dataScale);
+
+                                // Convert these physical values to the new unit
+                                const convertedPhysicalAtOffset = conversionFunc(physicalAtOffset);
+                                const convertedPhysicalAtOffsetPlusScale = conversionFunc(physicalAtOffsetPlusScale);
+
+                                // Take sqrt to get back to intermediate values
+                                const newOffset = Math.sqrt(Math.abs(convertedPhysicalAtOffset)) * Math.sign(convertedPhysicalAtOffset);
+                                const newOffsetPlusScale = Math.sqrt(Math.abs(convertedPhysicalAtOffsetPlusScale)) * Math.sign(convertedPhysicalAtOffsetPlusScale);
+
+                                dataScale = newOffsetPlusScale - newOffset;
+                                dataOffset = newOffset;
+                            } else {
+                                const convertedOffset = conversionFunc(dataOffset);
+                                const convertedOffsetPlusScale = conversionFunc(dataOffset + dataScale);
+
+                                dataScale = convertedOffsetPlusScale - convertedOffset;
+                                dataOffset = convertedOffset;
+                            }
+                        }
+                    } 
+                    
+                    // Update the colormap AND data range
+                    const { colormap } = core._getColormapForVariable(variable);
+                    const finalColormap = core._convertColormapUnits(colormap, baseUnit, toUnit);
+                    const dataRange = [finalColormap[0], finalColormap[finalColormap.length - 2]];
+                    
+                    const colormapBytes = _generateColormapBytes(finalColormap);
+                    const colormapAsBase64 = fromByteArray(colormapBytes);
+                    
+                    gridLayerRef.current.updateColormapTexture(colormapAsBase64);
+                    cachedColormap.current = { key: `${variable}-${units}` };
+                    cachedDataRange.current = dataRange;
+                    
+                    setRenderProps(prev => ({ ...prev, dataRange, opacity: newState.opacity }));
+                    
+                    if (gridLayerRef.current && gridLayerRef.current.updateDataParameters) {
+                        const scaleTypeValue = cachedData.scaleType === 'sqrt' ? 1 : 0;  // Convert to number
+                        
+                        console.log('🔄 [Unit Conversion] Calling updateDataParameters with:', {
+                            scale: dataScale,
+                            offset: dataOffset,
+                            missing: cachedData.missing,
+                            scaleType: scaleTypeValue
+                        });
+                        
+                        gridLayerRef.current.updateDataParameters(dataScale, dataOffset, cachedData.missing, scaleTypeValue);  // Pass scaleType
+                    }
+
+                    const newCacheKey = isMRMS 
+                        ? `mrms-${mrmsTimestamp}-${variable}`
+                        : `${model}-${date}-${run}-${forecastHour}-${variable}`;
+                    
+                    preloadedDataCache.current.set(newCacheKey, {
+                        ...cachedData,
+                        scale: dataScale,
+                        offset: dataOffset
+                    });
+                    
+                } else {
+                    console.warn('⚠️ [Unit Conversion] No cached data found for key:', oldCacheKey);
+                }
+                
+                previousStateRef.current = newState;
+                return;
+            }
+            
+            const needsFullLoad =
+                !hasInitialLoad.current ||
+                newState.model !== previousStateRef.current.model ||
+                newState.isMRMS !== previousStateRef.current.isMRMS ||
+                newState.variable !== previousStateRef.current.variable ||
+                newState.date !== previousStateRef.current.date ||
+                newState.run !== previousStateRef.current.run;
+
+            if (needsFullLoad) {
+                
+                if (gridLayerRef.current) {
+                    gridLayerRef.current.clear();
+                    // --- OPTIMIZATION: Clear the native GPU cache on iOS ---
+                    if (Platform.OS === 'ios' && gridLayerRef.current.clearGpuCache) {
+                        gridLayerRef.current.clearGpuCache();
+                    }
+                }
+                hasPreloadedRef.current = false;
+                
+                preloadedDataCache.current.clear();
+                cachedGeometry.current = null;
+                cachedColormap.current = null;
+                
+                // ADD THIS: Clear the inspector cache too
+                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) {
+                    // CHANGED: Don't error, just log and wait for preload
+                    const timeKey = newState.isMRMS ? `timestamp ${newState.mrmsTimestamp}` : `hour +${newState.forecastHour}`;
+                    console.log(`⏳ [handleStateChange] Frame ${timeKey} not ready yet, waiting for preload...`);
+                    // Don't clear the layer - keep showing the previous frame until new one is ready
+                    // The preload will eventually complete and trigger a re-render
+                } else {
+                    // Only update inspector cache when we successfully loaded new data
+                    if (newState.opacity !== renderProps.opacity) {
+                        setRenderProps(prev => ({ ...prev, opacity: newState.opacity }));
+                    }
+                }
+            }
+            
+            previousStateRef.current = newState;
+        };
+
+        handleStateChangeRef.current = handleStateChange;
+        
+        const stableHandler = (newState) => {
+            const isOpacityOnlyChange = 
+                previousStateRef.current &&
+                newState.opacity !== previousStateRef.current.opacity &&
+                newState.variable === previousStateRef.current.variable &&
+                newState.forecastHour === previousStateRef.current.forecastHour &&
+                newState.mrmsTimestamp === previousStateRef.current.mrmsTimestamp &&
+                newState.model === previousStateRef.current.model &&
+                newState.units === previousStateRef.current.units &&
+                newState.date === previousStateRef.current.date &&
+                newState.run === previousStateRef.current.run;
+            
+            if (isOpacityOnlyChange) {
+                if (handleStateChangeRef.current) {
+                    handleStateChangeRef.current(newState);
+                }
+                return;
+            }
+            
+            if (debounceTimeoutRef.current) {
+                clearTimeout(debounceTimeoutRef.current);
+            }
+
+            debounceTimeoutRef.current = setTimeout(() => {
+                if (handleStateChangeRef.current) {
+                    handleStateChangeRef.current(newState);
+                }
+                debounceTimeoutRef.current = null;
+            }, 50);
+        };
+
+        core.on('state:change', stableHandler);
+
+        return () => {
+            core.off('state:change', stableHandler);
+            if (debounceTimeoutRef.current) {
+                clearTimeout(debounceTimeoutRef.current);
+            }
+        };
+    }, [core]);
+    
+    useEffect(() => {
+        return () => {
+            preloadedDataCache.current.clear();
+            hasInitialLoad.current = false;
+            lastProcessedState.current = null;
+        };
+    }, []);
+    
+    const lastInspectorUpdateRef = useRef(0);
+    const INSPECTOR_THROTTLE_MS = 50; 
+
+    useEffect(() => {
+        if (!core || !inspectorEnabled) {
+            return;
+        }
+
+        const handleMapMove = async (center) => {
+            if (!center || !Array.isArray(center) || center.length !== 2) {
+                return;
+            }
+            
+            // Throttle updates
+            const now = Date.now();
+            if (now - lastInspectorUpdateRef.current < INSPECTOR_THROTTLE_MS) {
+                return;
+            }
+            lastInspectorUpdateRef.current = now;
+            
+            const [longitude, latitude] = center;
+            
+            const payload = await getValueAtPoint(longitude, latitude);
+            onInspect?.(payload);
+        };
+
+        core.on('map:move', handleMapMove);
+
+        if (context && context.getCenter) {
+            const center = context.getCenter();
+            if (center) {
+                handleMapMove(center);
+            }
+        }
+
+        return () => {
+            core.off('map:move', handleMapMove);
+        };
+    }, [inspectorEnabled, onInspect, core, context]);
+
+    // Add this new useEffect after the existing inspector useEffect
+    useEffect(() => {
+        // Trigger re-inspection when state changes (variable, model, forecast hour, etc.)
+        if (!core || !inspectorEnabled) {
+            return;
+        }
+
+        const triggerReinspection = () => {
+            const mapRef = mapRegistry.getMap();
+            const center = mapRef?._currentCenter;
+            
+            if (center && Array.isArray(center) && center.length === 2) {
+                const [longitude, latitude] = center;
+                
+                getValueAtPoint(longitude, latitude).then(payload => {
+                    onInspect?.(payload);
+                });
+            }
+        };
+
+        // Small delay to ensure data is loaded before re-inspecting
+        const timer = setTimeout(triggerReinspection, 100);
+
+        return () => clearTimeout(timer);
+    }, [
+        core?.state?.variable,
+        core?.state?.model, 
+        core?.state?.forecastHour,
+        core?.state?.mrmsTimestamp,
+        core?.state?.units,
+        inspectorEnabled,
+        onInspect
+    ]);
+
+    useEffect(() => {
+        if (!core) {
+            return;
+        }
+        
+        const handleCameraChange = (center) => {
+            if (core && center) {
+                core.setMapCenter(center);
+            }
+        };
+        
+        // Register with the global registry
+        mapRegistry.addCameraListener(handleCameraChange);
+        
+        // Try to get initial center
+        const mapRef = mapRegistry.getMap();
+        if (mapRef?._currentCenter) {
+            handleCameraChange(mapRef._currentCenter);
+        }
+        
+        return () => {
+            mapRegistry.removeCameraListener(handleCameraChange);
+        };
+    }, [core]);
+
+    useEffect(() => {
+        core.initialize();
+        return () => {
+            core.destroy();
+        };
+    }, [core]);
+
+    return (
+        <GridRenderLayer
+            ref={gridLayerRef}
+            opacity={renderProps.opacity}
+            dataRange={renderProps.dataRange}
+            belowID="AML_-_terrain"
+        />
+    );
+});
+
+WeatherLayerManager.getAvailableVariables = (options) => {
+    if (!options || !options.apiKey) {
+        console.error("API key must be provided to get available variables.");
+        return [];
+    }
+    const core = new AguaceroCore({ apiKey: options.apiKey });
+    return core.getAvailableVariables('mrms');
+};