@aguacerowx/javascript-sdk 0.0.0 → 0.0.1

package/src/AguaceroCore.js

@@ -0,0 +1,783 @@
+// AguaceroCore.js - The Headless "Engine"
+
+// --- Non-UI Imports ---
+import { EventEmitter } from './events.js';
+import { COORDINATE_CONFIGS } from './coordinate_configs.js';
+import { getUnitConversionFunction } from './unitConversions.js';
+import { DICTIONARIES, MODEL_CONFIGS } from './dictionaries.js';
+import { DEFAULT_COLORMAPS } from './default-colormaps.js';
+import proj4 from 'proj4';
+import { decompress } from 'fzstd';
+import { getBundleId } from './getBundleId';
+
+// --- Non-UI Helper Functions ---
+function hrdpsObliqueTransform(rotated_lon, rotated_lat) {
+    const o_lat_p = 53.91148; const o_lon_p = 245.305142;
+    const DEG_TO_RAD = Math.PI / 180.0; const RAD_TO_DEG = 180.0 / Math.PI;
+    const o_lat_p_rad = o_lat_p * DEG_TO_RAD;
+    const rot_lon_rad = rotated_lon * DEG_TO_RAD;
+    const rot_lat_rad = rotated_lat * DEG_TO_RAD;
+    const sin_rot_lat = Math.sin(rot_lat_rad); const cos_rot_lat = Math.cos(rot_lat_rad);
+    const sin_rot_lon = Math.sin(rot_lon_rad); const cos_rot_lon = Math.cos(rot_lon_rad);
+    const sin_o_lat_p = Math.sin(o_lat_p_rad); const cos_o_lat_p = Math.cos(o_lat_p_rad);
+    const sin_lat = cos_o_lat_p * sin_rot_lat + sin_o_lat_p * cos_rot_lat * cos_rot_lon;
+    let lat = Math.asin(sin_lat) * RAD_TO_DEG;
+    const sin_lon_num = cos_rot_lat * sin_rot_lon;
+    const sin_lon_den = -sin_o_lat_p * sin_rot_lat + cos_o_lat_p * cos_rot_lat * cos_rot_lon;
+    let lon = Math.atan2(sin_lon_num, sin_lon_den) * RAD_TO_DEG + o_lon_p;
+    if (lon > 180) lon -= 360; else if (lon < -180) lon += 360;
+    return [lon, lat];
+}
+
+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;
+}
+
+export class AguaceroCore extends EventEmitter {
+    constructor(options = {}) {
+        super();
+        this.isReactNative = typeof navigator !== 'undefined' && navigator.product === 'ReactNative';
+        this.apiKey = options.apiKey;
+        this.bundleId = getBundleId();
+        this.baseGridUrl = 'https://d3dc62msmxkrd7.cloudfront.net';
+        if (!this.isReactNative) {
+            this.worker = this.createWorker();
+            this.workerRequestId = 0;
+            this.workerResolvers = new Map();
+            this.worker.addEventListener('message', this._handleWorkerMessage.bind(this));
+            this.resultQueue = [];
+            this.isProcessingQueue = false;
+        } else {
+            this.worker = null;
+        }
+        this.statusUrl = 'https://d3dc62msmxkrd7.cloudfront.net/model-status';
+        this.modelStatus = null;
+        this.mrmsStatus = null;
+        this.dataCache = new Map();
+        this.abortControllers = new Map();
+        this.isPlaying = false;
+        this.playIntervalId = null;
+        this.playbackSpeed = options.playbackSpeed || 500;
+        this.customColormaps = options.customColormaps || {};
+
+        const userLayerOptions = options.layerOptions || {};
+        const initialVariable = userLayerOptions.variable || null;
+
+        this.state = {
+            model: userLayerOptions.model || 'gfs',
+            isMRMS: false,
+            mrmsTimestamp: null,
+            variable: initialVariable,
+            date: null,
+            run: null,
+            forecastHour: 0,
+            visible: true,
+            opacity: userLayerOptions.opacity ?? 0.85,
+            units: options.initialUnit || 'imperial',
+            shaderSmoothingEnabled: options.shaderSmoothingEnabled ?? true
+        };
+
+        this.autoRefreshEnabled = options.autoRefresh ?? false;
+        this.autoRefreshIntervalSeconds = options.autoRefreshInterval ?? 60;
+        this.autoRefreshIntervalId = null;
+    }
+
+    async setState(newState) {
+        Object.assign(this.state, newState);
+        this._emitStateChange();
+    }
+
+    _emitStateChange() {
+        const { colormap, baseUnit } = this._getColormapForVariable(this.state.variable);
+        const toUnit = this._getTargetUnit(baseUnit, this.state.units);
+        const displayColormap = this._convertColormapUnits(colormap, baseUnit, toUnit);
+
+        let availableTimestamps = [];
+        if (this.state.isMRMS && this.state.variable && this.mrmsStatus) {
+            const timestamps = this.mrmsStatus[this.state.variable] || [];
+            availableTimestamps = [...timestamps].reverse();
+        }
+
+        this.emit('state:change', {
+            ...this.state,
+            availableModels: this.modelStatus ? Object.keys(this.modelStatus).sort() : [],
+            availableRuns: this.modelStatus?.[this.state.model] || {},
+            availableHours: this.state.isMRMS ? [] : (this.modelStatus?.[this.state.model]?.[this.state.date]?.[this.state.run] || []),
+            availableVariables: this.getAvailableVariables(this.state.isMRMS ? 'mrms' : this.state.model),
+            availableTimestamps: availableTimestamps,
+            isPlaying: this.isPlaying,
+            colormap: displayColormap,
+            colormapBaseUnit: toUnit,
+        });
+    }
+
+    async initialize(options = {}) {
+        await this.fetchModelStatus(true);
+        await this.fetchMRMSStatus(true);
+        
+        const latestRun = findLatestModelRun(this.modelStatus, this.state.model);
+        let initialState = this.state;
+
+        if (latestRun && !this.state.isMRMS) {
+            initialState = { ...this.state, ...latestRun, forecastHour: 0 };
+
+            const availableVariables = this.getAvailableVariables(initialState.model);
+            if (availableVariables && availableVariables.length > 0) {
+                initialState.variable = availableVariables[0];
+            }
+        }
+
+        await this.setState(initialState);
+        if (options.autoRefresh ?? this.autoRefreshEnabled) {
+            this.startAutoRefresh(options.refreshInterval ?? this.autoRefreshIntervalSeconds);
+        }
+    }
+
+    destroy() {
+        this.pause();
+        this.stopAutoRefresh();
+        this.dataCache.clear();
+        if (this.worker) {
+            this.worker.terminate();
+        }
+        this.callbacks = {};
+        console.log(`AguaceroCore has been destroyed.`);
+    }
+
+    // --- Public API Methods ---
+
+    play() {
+        if (this.isPlaying) return;
+        this.isPlaying = true;
+        clearInterval(this.playIntervalId);
+        this.playIntervalId = setInterval(() => { this.step(1); }, this.playbackSpeed);
+        this.emit('playback:start', { speed: this.playbackSpeed });
+        this._emitStateChange(); // Notify UI that isPlaying is now true
+    }
+
+    pause() {
+        if (!this.isPlaying) return;
+        this.isPlaying = false;
+        clearInterval(this.playIntervalId);
+        this.playIntervalId = null;
+        this.emit('playback:stop');
+        this._emitStateChange(); // Notify UI that isPlaying is now false
+    }
+
+    togglePlay() { this.isPlaying ? this.pause() : this.play(); }
+
+    step(direction = 1) {
+        const { model, date, run, forecastHour } = this.state;
+        const forecastHours = this.modelStatus?.[model]?.[date]?.[run];
+        if (!forecastHours || forecastHours.length === 0) return;
+        const currentIndex = forecastHours.indexOf(forecastHour);
+        if (currentIndex === -1) return;
+        const maxIndex = forecastHours.length - 1;
+        let nextIndex = currentIndex + direction;
+        if (nextIndex > maxIndex) nextIndex = 0;
+        if (nextIndex < 0) nextIndex = maxIndex;
+        this.setState({ forecastHour: forecastHours[nextIndex] });
+    }
+    
+    setPlaybackSpeed(speed) {
+        if (speed > 0) {
+            this.playbackSpeed = speed;
+            if (this.isPlaying) this.play();
+        }
+    }
+
+    async setShaderSmoothing(enabled) {
+        if (typeof enabled !== 'boolean' || enabled === this.state.shaderSmoothingEnabled) return;
+        await this.setState({ shaderSmoothingEnabled: enabled });
+    }
+    
+    async setOpacity(newOpacity) {
+        const clampedOpacity = Math.max(0, Math.min(1, newOpacity));
+        if (clampedOpacity === this.state.opacity) return;
+        await this.setState({ opacity: clampedOpacity });
+    }
+    
+    async setVariable(variable) {
+        await this.setState({ variable });
+    }
+    
+    async setModel(modelName) {
+        if (modelName === this.state.model || !this.modelStatus?.[modelName]) return;
+        const latestRun = findLatestModelRun(this.modelStatus, modelName);
+        if (latestRun) {
+            await this.setState({ model: modelName, date: latestRun.date, run: latestRun.run, forecastHour: 0 });
+        }
+    }
+    
+    async setRun(runString) {
+        const [date, run] = runString.split(':');
+        if (date !== this.state.date || run !== this.state.run) {
+            await this.setState({ date, run, forecastHour: 0 });
+        }
+    }
+
+    async setUnits(newUnits) {
+        if (newUnits === this.state.units || !['metric', 'imperial'].includes(newUnits)) return;
+        await this.setState({ units: newUnits });
+    }
+    
+    async setMRMSVariable(variable) {
+        const sortedTimestamps = [...(this.mrmsStatus[variable] || [])].sort((a, b) => b - a);
+        const initialTimestamp = sortedTimestamps.length > 0 ? sortedTimestamps[0] : null;
+
+        await this.setState({
+            variable,
+            isMRMS: true,
+            mrmsTimestamp: initialTimestamp,
+        });
+    }
+
+    async setMRMSTimestamp(timestamp) {
+        if (!this.state.isMRMS) return;
+        await this.setState({ mrmsTimestamp: timestamp });
+    }
+
+    async switchMode(options) {
+        const { mode, variable, model, forecastHour, mrmsTimestamp } = options;
+        if (!mode || !variable) {
+            console.error("switchMode requires 'mode' ('mrms' | 'model') and 'variable' properties.");
+            return;
+        }
+        if (mode === 'model' && !model) {
+            console.error("switchMode with mode 'model' requires a 'model' property.");
+            return;
+        }
+        let targetState = {};
+        if (mode === 'mrms') {
+            let finalTimestamp = mrmsTimestamp;
+            if (finalTimestamp === undefined) {
+                const sortedTimestamps = [...(this.mrmsStatus[variable] || [])].sort((a, b) => b - a);
+                finalTimestamp = sortedTimestamps.length > 0 ? sortedTimestamps[0] : null;
+            }
+            targetState = {
+                isMRMS: true,
+                variable: variable,
+                mrmsTimestamp: finalTimestamp,
+                model: this.state.model, date: null, run: null, forecastHour: 0,
+            };
+        } else if (mode === 'model') {
+            const latestRun = findLatestModelRun(this.modelStatus, model);
+            if (!latestRun) {
+                console.error(`Could not find a valid run for model: ${model}`);
+                return;
+            }
+            targetState = {
+                isMRMS: false,
+                model: model,
+                variable: variable,
+                date: latestRun.date,
+                run: latestRun.run,
+                forecastHour: forecastHour !== undefined ? forecastHour : 0,
+                mrmsTimestamp: null,
+            };
+        } else {
+            console.error(`Invalid mode specified in switchMode: '${mode}'`);
+            return;
+        }
+        await this.setState(targetState);
+    }
+
+    // --- Data and Calculation Methods ---
+
+    _reconstructData(decompressedDeltas, encoding) {
+        const expectedLength = encoding.length;
+        const reconstructedData = new Int8Array(expectedLength);
+
+        if (decompressedDeltas.length > 0 && expectedLength > 0) {
+            // First value is absolute
+            reconstructedData[0] = decompressedDeltas[0] > 127 ? decompressedDeltas[0] - 256 : decompressedDeltas[0];
+
+            // Subsequent values are deltas from the previous one
+            for (let i = 1; i < expectedLength; i++) {
+                const delta = decompressedDeltas[i] > 127 ? decompressedDeltas[i] - 256 : decompressedDeltas[i];
+                reconstructedData[i] = reconstructedData[i - 1] + delta;
+            }
+        }
+        // Return as a Uint8Array, which is what the rest of the code expects
+        return new Uint8Array(reconstructedData.buffer);
+    }
+
+    async _loadGridData(state) {
+        const { model, date, run, forecastHour, variable, isMRMS, mrmsTimestamp } = state;
+        let effectiveSmoothing = 0;
+        const customVariableSettings = this.customColormaps[variable];
+        if (customVariableSettings && typeof customVariableSettings.smoothing === 'number') {
+            effectiveSmoothing = customVariableSettings.smoothing;
+        }
+        let resourcePath;
+        let dataUrlIdentifier;
+        if (isMRMS) {
+            if (!mrmsTimestamp) return null;
+            const mrmsDate = new Date(mrmsTimestamp * 1000);
+            const y = mrmsDate.getUTCFullYear(), m = (mrmsDate.getUTCMonth() + 1).toString().padStart(2, '0'), d = mrmsDate.getUTCDate().toString().padStart(2, '0');
+            dataUrlIdentifier = `mrms-${mrmsTimestamp}-${variable}-${effectiveSmoothing}`;
+            resourcePath = `/grids/mrms/${y}${m}${d}/${mrmsTimestamp}/0/${variable}/${effectiveSmoothing}`;
+        } else {
+            dataUrlIdentifier = `${model}-${date}-${run}-${forecastHour}-${variable}-${effectiveSmoothing}`;
+            resourcePath = `/grids/${model}/${date}/${run}/${forecastHour}/${variable}/${effectiveSmoothing}`;
+        }
+        if (this.dataCache.has(dataUrlIdentifier)) {
+            return this.dataCache.get(dataUrlIdentifier);
+        }
+        
+        // Create and store abort controller BEFORE creating the promise
+        const abortController = new AbortController();
+        this.abortControllers.set(dataUrlIdentifier, abortController);
+            
+        const loadPromise = (async () => {
+            if (!this.apiKey) {
+                throw new Error('API key is not configured.');
+            }
+            try {
+                const directUrl = `${this.baseGridUrl}${resourcePath}`;
+
+                // --- START OF LOGGING CODE ---
+                const headers = { 'x-api-key': this.apiKey };
+                if (this.bundleId) {
+                    headers['x-app-identifier'] = this.bundleId;
+                }
+                
+                // Use the headers object we just logged
+                const response = await fetch(directUrl, { 
+                    headers: headers,
+                    signal: abortController.signal
+                });
+                
+                if (!response.ok) {
+                    // This is where your error is being thrown from
+                    throw new Error(`Failed to fetch grid data: ${response.status} ${response.statusText}`);
+                }
+                const { data: b64Data, encoding } = await response.json();
+                const compressedData = Uint8Array.from(atob(b64Data), c => c.charCodeAt(0));
+
+                let finalData;
+
+                if (this.isReactNative) {
+                    const decompressedDeltas = decompress(compressedData);
+                    finalData = this._reconstructData(decompressedDeltas, encoding);
+                } else {
+                    const requestId = this.workerRequestId++;
+                    const workerPromise = new Promise((resolve, reject) => {
+                        this.workerResolvers.set(requestId, { resolve, reject });
+                    });
+                    this.worker.postMessage({ requestId, compressedData, encoding }, [compressedData.buffer]);
+                    const result = await workerPromise;
+                    finalData = result.data;
+                }
+
+                const transformedData = new Uint8Array(finalData.length);
+                for (let i = 0; i < finalData.length; i++) {
+                    const signedValue = finalData[i] > 127 ? finalData[i] - 256 : finalData[i];
+                    transformedData[i] = signedValue + 128;
+                }
+                
+                // Clean up abort controller on success
+                this.abortControllers.delete(dataUrlIdentifier);
+                
+                return { data: transformedData, encoding };
+
+            } catch (error) {
+                if (error.name === 'AbortError') {
+                    console.log(`Request cancelled for ${resourcePath}`);
+                } else {
+                    console.error(`Failed to load data for path ${resourcePath}:`, error);
+                }
+                this.dataCache.delete(dataUrlIdentifier);
+                this.abortControllers.delete(dataUrlIdentifier);
+                return null;
+            }
+        })();
+        this.dataCache.set(dataUrlIdentifier, loadPromise);
+        return loadPromise;
+    }
+
+    cancelAllRequests() {
+        // Abort all in-flight requests
+        this.abortControllers.forEach((controller, key) => {
+            controller.abort();
+        });
+        
+        // Clear both maps
+        this.abortControllers.clear();
+        this.dataCache.clear();
+        
+        console.log('All pending requests cancelled');
+    }
+    
+    async getValueAtLngLat(lng, lat) {
+        const { variable, isMRMS, mrmsTimestamp, model, date, run, forecastHour, units } = this.state;
+        if (!variable) return null;
+
+        const gridIndices = this._getGridIndexFromLngLat(lng, lat);
+        if (!gridIndices) return null;
+
+        const { i, j } = gridIndices;
+        const gridModel = isMRMS ? 'mrms' : model;
+        const normalizedGridModel = this._normalizeModelName(gridModel);
+        const { nx } = COORDINATE_CONFIGS[normalizedGridModel].grid_params;
+
+        const customSettings = this.customColormaps[variable];
+        const effectiveSmoothing = (customSettings && typeof customSettings.smoothing === 'number') ? customSettings.smoothing : 0;
+        
+        const dataUrlIdentifier = isMRMS
+            ? `mrms-${mrmsTimestamp}-${variable}-${effectiveSmoothing}`
+            : `${model}-${date}-${run}-${forecastHour}-${variable}-${effectiveSmoothing}`;
+
+        const gridDataPromise = this.dataCache.get(dataUrlIdentifier);
+        if (!gridDataPromise) return null;
+
+        try {
+            const gridData = await gridDataPromise;
+            if (!gridData || !gridData.data) return null;
+
+            const index1D = j * nx + i;
+            const byteValue = gridData.data[index1D];
+            const signedQuantizedValue = byteValue - 128;
+            const { scale, offset, missing_quantized } = gridData.encoding;
+
+            if (signedQuantizedValue === missing_quantized) return null;
+
+            const nativeValue = signedQuantizedValue * scale + offset;
+            const { baseUnit } = this._getColormapForVariable(variable);
+            let dataNativeUnit = baseUnit || (DICTIONARIES.fld[variable] || {}).defaultUnit || 'none';
+            
+            const displayUnit = this._getTargetUnit(dataNativeUnit, units);
+            const conversionFunc = getUnitConversionFunction(dataNativeUnit, displayUnit);
+            const displayValue = conversionFunc ? conversionFunc(nativeValue) : nativeValue;
+
+            return {
+                lngLat: { lng, lat },
+                variable: {
+                    code: variable,
+                    name: this.getVariableDisplayName(variable),
+                },
+                value: displayValue,
+                unit: displayUnit,
+            };
+        } catch (error) {
+            return null;
+        }
+    }
+
+    getAvailableVariables(modelName = null) {
+        const model = modelName || this.state.model;
+        return MODEL_CONFIGS[model]?.vars || [];
+    }
+
+    getVariableDisplayName(variableCode) {
+        const varInfo = DICTIONARIES.fld[variableCode];
+        return varInfo?.displayName || varInfo?.name || variableCode;
+    }
+
+    _getColormapForVariable(variable) {
+        if (!variable) return { colormap: [], baseUnit: '' };
+        if (this.customColormaps[variable] && this.customColormaps[variable].colormap) {
+            return {
+                colormap: this.customColormaps[variable].colormap,
+                baseUnit: this.customColormaps[variable].baseUnit || ''
+            };
+        }
+        const colormapKey = DICTIONARIES.variable_cmap[variable] || variable;
+        const customColormap = this.customColormaps[colormapKey];
+        if (customColormap && customColormap.colormap) {
+            return { colormap: customColormap.colormap, baseUnit: customColormap.baseUnit || '' };
+        }
+        const defaultColormapData = DEFAULT_COLORMAPS[colormapKey];
+        if (defaultColormapData && defaultColormapData.units) {
+            const availableUnits = Object.keys(defaultColormapData.units);
+            if (availableUnits.length > 0) {
+                const baseUnit = availableUnits[0];
+                const unitData = defaultColormapData.units[baseUnit];
+                if (unitData && unitData.colormap) {
+                    return { colormap: unitData.colormap, baseUnit: baseUnit };
+                }
+            }
+        }
+        return { colormap: [], baseUnit: '' };
+    }
+
+    _convertColormapUnits(colormap, fromUnits, toUnits) {
+        if (fromUnits === toUnits) return colormap;
+        const conversionFunc = getUnitConversionFunction(fromUnits, toUnits);
+        if (!conversionFunc) return colormap;
+        const newColormap = [];
+        for (let i = 0; i < colormap.length; i += 2) {
+            newColormap.push(conversionFunc(colormap[i]), colormap[i + 1]);
+        }
+        return newColormap;
+    }
+
+    _normalizeModelName(modelName) {
+        const mapping = { 'hrrr': ['mpashn', 'mpasrt', 'mpasht', 'hrrrsub', 'rrfs', 'namnest', 'mpasrn', 'mpasrn3', 'mpasht2'], 'arw': ['arw2', 'fv3', 'href'], 'rtma': ['nbm'], 'ecmwf': ['ecmwfaifs'], 'gfs': ['arpege', 'graphcastgfs'] };
+        for (const [normalized, aliases] of Object.entries(mapping)) { if (aliases.includes(modelName)) return normalized; }
+        return modelName;
+    }
+
+    _getGridCornersAndDef(model) {
+        const normalizedModel = this._normalizeModelName(model);
+        const gridDef = { ...COORDINATE_CONFIGS[normalizedModel], modelName: model };
+        if (!gridDef) return null;
+        const { nx, ny } = gridDef.grid_params;
+        const gridType = gridDef.type;
+        let corners;
+        if (gridType === 'latlon') {
+            let { lon_first, lat_first, lat_last, lon_last, dx_degrees, dy_degrees } = gridDef.grid_params;
+            corners = {
+                lon_tl: lon_first, lat_tl: lat_first,
+                lon_tr: lon_last !== undefined ? lon_last : (lon_first + (nx - 1) * dx_degrees), lat_tr: lat_first,
+                lon_bl: lon_first, lat_bl: lat_last !== undefined ? lat_last : (lat_first + (ny - 1) * dy_degrees),
+                lon_br: lon_last !== undefined ? lon_last : (lon_first + (nx - 1) * dx_degrees), lat_br: lat_last !== undefined ? lat_last : (lat_first + (ny - 1) * dy_degrees),
+            };
+        } else if (gridType === 'rotated_latlon') {
+            const [lon_tl, lat_tl] = hrdpsObliqueTransform(gridDef.grid_params.lon_first, gridDef.grid_params.lat_first);
+            const [lon_tr, lat_tr] = hrdpsObliqueTransform(gridDef.grid_params.lon_first + (nx - 1) * gridDef.grid_params.dx_degrees, gridDef.grid_params.lat_first);
+            const [lon_bl, lat_bl] = hrdpsObliqueTransform(gridDef.grid_params.lon_first, gridDef.grid_params.lat_first + (ny - 1) * gridDef.grid_params.dy_degrees);
+            const [lon_br, lat_br] = hrdpsObliqueTransform(gridDef.grid_params.lon_first + (nx - 1) * gridDef.grid_params.dx_degrees, gridDef.grid_params.lat_first + (ny - 1) * gridDef.grid_params.dy_degrees);
+            corners = { lon_tl, lat_tl, lon_tr, lat_tr, lon_bl, lat_bl, lon_br, lat_br };
+        } else if (gridType === 'lambert_conformal_conic' || gridType === 'polar_ stereographic') {
+            let projString = Object.entries(gridDef.proj_params).map(([k,v]) => `+${k}=${v}`).join(' ');
+            if(gridType === 'polar_stereographic') projString += ' +lat_0=90';
+            const { x_origin, y_origin, dx, dy } = gridDef.grid_params;
+            const [lon_tl, lat_tl] = proj4(projString, 'EPSG:4326', [x_origin, y_origin]);
+            const [lon_tr, lat_tr] = proj4(projString, 'EPSG:4326', [x_origin + (nx - 1) * dx, y_origin]);
+            const [lon_bl, lat_bl] = proj4(projString, 'EPSG:4326', [x_origin, y_origin + (ny - 1) * dy]);
+            const [lon_br, lat_br] = proj4(projString, 'EPSG:4326', [x_origin + (nx - 1) * dx, y_origin + (ny - 1) * dy]);
+            corners = { lon_tl, lat_tl, lon_tr, lat_tr, lon_bl, lat_bl, lon_br, lat_br };
+        } else {
+            return null;
+        }
+        return { corners, gridDef };
+    }
+
+    _getTargetUnit(defaultUnit, system) {
+        if (system === 'metric') {
+            if (['°F', '°C'].includes(defaultUnit)) return 'celsius';
+            if (['kts', 'mph', 'm/s'].includes(defaultUnit)) return 'km/h';
+            if (['in', 'mm', 'cm'].includes(defaultUnit)) return 'mm';
+        }
+        if (['°F', '°C'].includes(defaultUnit)) return 'fahrenheit';
+        if (['kts', 'mph', 'm/s'].includes(defaultUnit)) return 'mph';
+        if (['in', 'mm', 'cm'].includes(defaultUnit)) return 'in';
+        return defaultUnit;
+    }
+
+    _getGridIndexFromLngLat(lng, lat) {
+        const gridModel = this.state.isMRMS ? 'mrms' : this.state.model;
+        const normalizedGridModel = this._normalizeModelName(gridModel);
+        const gridDef = COORDINATE_CONFIGS[normalizedGridModel];
+        if (!gridDef) return null;
+        const { nx, ny } = gridDef.grid_params;
+        const pixelCoords = this.latLonToGridPixel(lat, lng, gridDef, gridModel);
+        if (!pixelCoords || !isFinite(pixelCoords.x) || !isFinite(pixelCoords.y) || pixelCoords.x < 0 || pixelCoords.y < 0) return null;
+        const i = Math.round(pixelCoords.x);
+        const j = Math.round(pixelCoords.y);
+        if (i >= 0 && i < nx && j >= 0 && j < ny) return { i, j };
+        return null;
+    }
+    
+    latLonToProjected(lat, lon, gridDef) {
+        if (!isFinite(lat) || !isFinite(lon)) throw new Error(`Invalid coordinates: lat=${lat}, lon=${lon}`);
+        const gridType = gridDef.type;
+        if (gridType === 'latlon') return { x: lon, y: lat }; 
+        let projString = Object.entries(gridDef.proj_params).map(([k,v]) => `+${k}=${v}`).join(' ');
+        if(gridType === 'polar_stereographic') projString += ' +lat_0=90';
+        const projected = proj4('EPSG:4326', projString, [lon, lat]);
+        return { x: projected[0], y: projected[1] };
+    }
+    
+    latLonToGridPixel(lat, lon, gridDef, modelName) {
+        if (!gridDef) return null;
+        if (modelName === 'rgem' && gridDef.type === 'polar_stereographic') return this.latLonToGridPixelPolarStereographic(lat, lon, gridDef);
+        const projected = this.latLonToProjected(lat, lon, gridDef);
+        let x, y;
+        const gridOrigin = { x: gridDef.grid_params.lon_first, y: gridDef.grid_params.lat_first };
+        const gridPixelSize = { x: gridDef.grid_params.dx_degrees, y: gridDef.grid_params.dy_degrees };
+        if (gridDef.type === 'latlon' || gridDef.type === 'rotated_latlon') {
+            let adjustedLon = projected.x;
+            if (modelName === 'mrms') {
+                if (adjustedLon < 0) adjustedLon += 360;
+                x = (adjustedLon - gridOrigin.x) / gridPixelSize.x;
+                y = (gridOrigin.y - projected.y) / gridPixelSize.y;
+            } else {
+                const isGFSType = gridDef.grid_params && gridDef.grid_params.lon_first === 0.0 && Math.abs(gridDef.grid_params.lat_first) === 90.0;
+                const isECMWFType = gridDef.grid_params && gridDef.grid_params.lon_first === 180.0 && gridDef.grid_params.lat_first === 90.0;
+                const isGEMType = modelName === 'gem' || (gridDef.grid_params.lon_first === 180.0 && gridDef.grid_params.lat_first === -90.0 && gridDef.grid_params.lon_last === 179.85);
+                if (isGEMType) {
+                    while (adjustedLon < gridOrigin.x) adjustedLon += 360;
+                    x = (adjustedLon - gridOrigin.x) / gridPixelSize.x;
+                    y = (projected.y - gridOrigin.y) / gridPixelSize.y;
+                    return { x, y };
+                }
+                let isFlippedGrid = isECMWFType ? true : (gridDef.grid_params.lat_first < (gridDef.grid_params.lat_last || (gridDef.grid_params.ny - 1) * gridDef.grid_params.dy_degrees));
+                if (isGFSType) adjustedLon = projected.x + 180;
+                else if (isECMWFType) { if (adjustedLon < gridOrigin.x) adjustedLon += 360; }
+                else if (['arome1', 'arome25', 'arpegeeu', 'iconeu', 'icond2'].includes(modelName)) {
+                    while (adjustedLon < 0) adjustedLon += 360;
+                    while (adjustedLon >= 360) adjustedLon -= 360;
+                    x = (adjustedLon >= gridOrigin.x) ? (adjustedLon - gridOrigin.x) / gridPixelSize.x : (adjustedLon + 360 - gridOrigin.x) / gridPixelSize.x;
+                    if (['arome1', 'arome25', 'arpegeeu'].includes(modelName)) y = (gridOrigin.y - projected.y) / Math.abs(gridPixelSize.y);
+                    else if (['iconeu', 'icond2'].includes(modelName)) y = (projected.y - gridOrigin.y) / gridPixelSize.y;
+                    return { x, y };
+                } else {
+                    const lonFirst = gridOrigin.x;
+                    if (lonFirst > 180 && adjustedLon < 0) adjustedLon += 360;
+                    else if (lonFirst < 0 && adjustedLon > 180) adjustedLon -= 360;
+                }
+                x = (adjustedLon - gridOrigin.x) / gridPixelSize.x;
+                if (isFlippedGrid) {
+                    if (isECMWFType) y = (gridOrigin.y - projected.y) / Math.abs(gridPixelSize.y);
+                    else {
+                        const maxLat = gridDef.grid_params.lat_last || (gridDef.grid_params.ny - 1) * gridDef.grid_params.dy_degrees;
+                        y = (maxLat - projected.y) / Math.abs(gridPixelSize.y);
+                    }
+                } else y = (projected.y - gridOrigin.y) / gridPixelSize.y;
+            }
+        } else {
+            const projOrigin = { x: gridDef.grid_params.x_origin, y: gridDef.grid_params.y_origin };
+            const projPixelSize = { x: gridDef.grid_params.dx, y: gridDef.grid_params.dy };
+            x = (projected.x - projOrigin.x) / projPixelSize.x;
+            y = (projOrigin.y - projected.y) / Math.abs(projPixelSize.y);
+        }
+        return { x, y };
+    }
+
+    latLonToGridPixelPolarStereographic(lat, lon, gridDef) {
+        try {
+            const projParams = gridDef.proj_params;
+            let projectionString = `+proj=${projParams.proj}`;
+            Object.keys(projParams).forEach(key => { if (key !== 'proj') projectionString += ` +${key}=${projParams[key]}`; });
+            projectionString += ' +lat_0=90 +no_defs';
+            const { nx, ny, dx, dy, x_origin, y_origin } = gridDef.grid_params;
+            const x_min = x_origin;
+            const x_max = x_origin + (nx - 1) * dx;
+            const y_max = y_origin;
+            const y_min = y_origin + (ny - 1) * dy;
+            const [proj_x, proj_y] = proj4('EPSG:4326', projectionString, [lon, lat]);
+            if (!isFinite(proj_x) || !isFinite(proj_y)) return { x: -1, y: -1 };
+            const t_x = (proj_x - x_min) / (x_max - x_min);
+            const t_y = (proj_y - y_max) / (y_min - y_max);
+            const x = t_x * (nx - 1);
+            const y = t_y * (ny - 1);
+            return { x, y };
+        } catch (error) {
+            console.warn(`[GridAccessor] RGEM polar stereographic conversion failed for ${lat}, ${lon}:`, error);
+            return { x: -1, y: -1 };
+        }
+    }
+    
+    // --- Worker and Status Methods ---
+
+    createWorker() {
+        if (this.isReactNative) return null;
+
+        const workerCode = `
+            import { decompress } from 'https://cdn.skypack.dev/fzstd@0.1.1';
+
+            function _reconstructData(decompressedDeltas, encoding) {
+                const expectedLength = encoding.length;
+                const reconstructedData = new Int8Array(expectedLength);
+                if (decompressedDeltas.length > 0 && expectedLength > 0) {
+                    reconstructedData[0] = decompressedDeltas[0] > 127 ? decompressedDeltas[0] - 256 : decompressedDeltas[0];
+                    for (let i = 1; i < expectedLength; i++) {
+                        const delta = decompressedDeltas[i] > 127 ? decompressedDeltas[i] - 256 : decompressedDeltas[i];
+                        reconstructedData[i] = reconstructedData[i - 1] + delta;
+                    }
+                }
+                return new Uint8Array(reconstructedData.buffer);
+            }
+
+            self.onmessage = async (e) => {
+                const { requestId, compressedData, encoding } = e.data;
+                try {
+                    const decompressedDeltas = await decompress(compressedData);
+                    const finalData = _reconstructData(decompressedDeltas, encoding);
+                    self.postMessage({ success: true, requestId: requestId, decompressedData: finalData, encoding: encoding }, [finalData.buffer]);
+                } catch (error) { 
+                    self.postMessage({ success: false, requestId: requestId, error: error.message }); 
+                }
+            };
+        `;
+        const blob = new Blob([workerCode], { type: 'application/javascript' });
+        return new Worker(URL.createObjectURL(blob), { type: 'module' });
+    }
+
+    _processResultQueue() {
+        while (this.resultQueue.length > 0) {
+            const { success, requestId, decompressedData, encoding, error } = this.resultQueue.shift();
+            if (this.workerResolvers.has(requestId)) {
+                const { resolve, reject } = this.workerResolvers.get(requestId);
+                if (success) {
+                    resolve({ data: decompressedData }); // Return as { data: ... }
+                } else {
+                    reject(new Error(error));
+                }
+                this.workerResolvers.delete(requestId);
+            }
+        }
+        this.isProcessingQueue = false;
+    }
+
+    _handleWorkerMessage(e) {
+        if (this.isReactNative) return;
+
+        const { success, requestId, decompressedData, encoding, error } = e.data;
+
+        this.resultQueue.push({ success, requestId, decompressedData, encoding, error });
+        if (!this.isProcessingQueue) {
+            this.isProcessingQueue = true;
+            requestAnimationFrame(() => this._processResultQueue());
+        }
+    }
+
+    async fetchModelStatus(force = false) {
+        if (!this.modelStatus || force) {
+            try {
+                const response = await fetch(this.statusUrl);
+                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
+                this.modelStatus = (await response.json()).models;
+            } catch (error) { this.modelStatus = null; }
+        }
+        return this.modelStatus;
+    }
+
+    async fetchMRMSStatus(force = false) {
+        const mrmsStatusUrl = 'https://h3dfvh5pq6euq36ymlpz4zqiha0obqju.lambda-url.us-east-2.on.aws';
+        if (!this.mrmsStatus || force) {
+            try {
+                const response = await fetch(mrmsStatusUrl);
+                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
+                this.mrmsStatus = await response.json();
+            } catch (error) { this.mrmsStatus = null; }
+        }
+        return this.mrmsStatus;
+    }
+
+    startAutoRefresh(intervalSeconds) {
+        this.stopAutoRefresh();
+        this.autoRefreshIntervalId = setInterval(async () => {
+            await this.fetchModelStatus(true);
+            this._emitStateChange();
+        }, (intervalSeconds || 60) * 1000);
+    }
+
+    stopAutoRefresh() {
+        if (this.autoRefreshIntervalId) {
+            clearInterval(this.autoRefreshIntervalId);
+            this.autoRefreshIntervalId = null;
+        }
+    }
+}