@aguacerowx/react-native 0.0.43 → 0.0.45

package/src/nexrad/radarFrameGpuMatch.bundled.js

@@ -0,0 +1,79 @@
+function angularDistanceDeg(a, b) {
+  let d = Math.abs(a - b) % 360;
+  if (d > 180) d = 360 - d;
+  return d;
+}
+function canonicalBinsRadarFrame(frame) {
+  const nRays = frame.nRays;
+  const nGates = frame.nGates;
+  if (nRays <= 0 || nGates <= 0) return frame;
+  if (frame.rayBoundariesDeg.length < nRays + 1) return frame;
+  const degPerBin = 360 / nRays;
+  const bytesPerRay = nGates * 2;
+  const centers = new Float32Array(nRays);
+  for (let r = 0; r < nRays; r++) {
+    const lower = frame.rayBoundariesDeg[r];
+    const upper = frame.rayBoundariesDeg[r + 1];
+    const center = (lower + upper) * 0.5;
+    centers[r] = (center % 360 + 360) % 360;
+  }
+  const canonicalGateData = new Uint8Array(nRays * bytesPerRay);
+  for (let i = 0; i < canonicalGateData.length; i += 2) {
+    canonicalGateData[i] = 128;
+  }
+  const used = new Array(nRays).fill(false);
+  for (let bin = 0; bin < nRays; bin++) {
+    const targetDeg = ((bin + 0.5) * degPerBin % 360 + 360) % 360;
+    let bestR = -1;
+    let bestDist = Infinity;
+    for (let r = 0; r < nRays; r++) {
+      if (used[r]) continue;
+      const dist = angularDistanceDeg(centers[r], targetDeg);
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestR = r;
+      }
+    }
+    if (bestR >= 0) {
+      used[bestR] = true;
+      canonicalGateData.set(
+        frame.gateData.subarray(bestR * bytesPerRay, (bestR + 1) * bytesPerRay),
+        bin * bytesPerRay
+      );
+    }
+  }
+  const canonicalBoundaries = new Float32Array(nRays + 1);
+  for (let i = 0; i <= nRays; i++) {
+    canonicalBoundaries[i] = i * degPerBin;
+  }
+  return { ...frame, gateData: canonicalGateData, rayBoundariesDeg: canonicalBoundaries };
+}
+function sortRadarFrameByAzimuth(frame) {
+  const nRays = frame.nRays;
+  const nGates = frame.nGates;
+  const bytesPerRay = nGates * 2;
+  const rayOrder = Array.from({ length: nRays }, (_, i) => i).sort(
+    (a, b) => frame.rayBoundariesDeg[a] - frame.rayBoundariesDeg[b]
+  );
+  const sortedGateData = new Uint8Array(nRays * bytesPerRay);
+  const sortedBoundaries = new Float32Array(nRays + 1);
+  for (let newIdx = 0; newIdx < nRays; newIdx++) {
+    const oldIdx = rayOrder[newIdx];
+    sortedGateData.set(
+      frame.gateData.subarray(oldIdx * bytesPerRay, (oldIdx + 1) * bytesPerRay),
+      newIdx * bytesPerRay
+    );
+    sortedBoundaries[newIdx] = frame.rayBoundariesDeg[oldIdx];
+  }
+  sortedBoundaries[nRays] = frame.rayBoundariesDeg[rayOrder[nRays - 1]] + (frame.rayBoundariesDeg[rayOrder[1]] - frame.rayBoundariesDeg[rayOrder[0]]);
+  return { ...frame, gateData: sortedGateData, rayBoundariesDeg: sortedBoundaries };
+}
+function prepareRadarFrameForGpuReadout(frame, options) {
+  const hasLayoutKey = options?.geometryLayoutKey != null && options.geometryLayoutKey !== "";
+  return hasLayoutKey ? canonicalBinsRadarFrame(frame) : sortRadarFrameByAzimuth(frame);
+}
+export {
+  canonicalBinsRadarFrame,
+  prepareRadarFrameForGpuReadout,
+  sortRadarFrameByAzimuth
+};

package/src/nws/NwsAlertsOverlay.android.js

@@ -0,0 +1,474 @@
+/**
+ * NWS watches/warnings for React Native Android — parity with {@link NwsWatchesWarningsOverlay}
+ * (archived / slider time via {@link NwsWatchesWarningsOverlay#syncWithMode}, same customization options).
+ *
+ * Uses the javascript-sdk NWS overlay engine with a stub Mapbox GL object; GeoJSON + layers render via @rnmapbox/maps.
+ */
+
+import './eventSourceRnPolyfill.js';
+
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import Mapbox from '@rnmapbox/maps';
+/** Subpath imports avoid Metro/barrel init ordering where the package root can yield undefined named exports during RN startup. */
+import { NwsWatchesWarningsOverlay, NWS_DEFAULT_LINE_BEFORE_LAYER_ID } from '@aguacerowx/javascript-sdk/nws/NwsWatchesWarningsOverlay.js';
+import { buildNwsLineDasharrayLiteralExpression } from '@aguacerowx/javascript-sdk/nws/nwsSdkConstants.js';
+import { buildAlertClickPayload, normalizeFeatureCollectionForMapboxGl } from '@aguacerowx/javascript-sdk/nws/nwsAlertsSupport.js';
+import { computeNwsAlertsFetchHoursFromAguaceroState } from '@aguacerowx/javascript-sdk/nws/nwsAlertsFetchSpec.js';
+import { mapRegistry } from '../MapRegistry';
+import { AGUACERO_NEXRAD_MAP_LAYER_ID, AGUACERO_SATELLITE_MAP_LAYER_ID } from './nwsAndroidConstants.js';
+
+const SOURCE_ID = 'aguacero-nws-alerts-source';
+const FILL_ID = 'aguacero-nws-alerts-fill';
+const LINE_CASING_ID = 'aguacero-nws-alerts-line-casing';
+const LINE_CORE_ID = 'aguacero-nws-alerts-line-core';
+
+class AndroidNwsOverlay extends NwsWatchesWarningsOverlay {
+    /**
+     * @param {object} map
+     * @param {object} options
+     * @param {(paint: object) => void} onPaint
+     */
+    constructor(map, options, onPaint) {
+        super(map, options);
+        this._onPaint = onPaint;
+    }
+
+    /**
+     * @rnmapbox/maps does not support data-driven `line-dasharray` (match on `event_name`).
+     * Keep web parity for colors; dash style follows {@link NwsWatchesWarningsOverlay} default `lineDash` only on RN.
+     */
+    _buildPaint() {
+        const p = super._buildPaint();
+        const mode = this._nwsAlertSettings?.lineDash ?? 'solid';
+        return {
+            ...p,
+            lineDashExpr: buildNwsLineDasharrayLiteralExpression(mode),
+        };
+    }
+
+    /**
+     * RN renders ShapeSource + layers declaratively (same ids). Only sync GeoJSON + paint; skip imperative addLayer.
+     */
+    _ensureLayers() {
+        const m = this.map;
+        if (!m?.addSource) return;
+
+        const paint = this._buildPaint();
+        if (this._onPaint) this._onPaint(paint);
+
+        const sourceData = normalizeFeatureCollectionForMapboxGl(this._workingFc);
+        if (!m.getSource(this._sourceId)) {
+            m.addSource(this._sourceId, {
+                type: 'geojson',
+                data: sourceData,
+            });
+        } else {
+            m.getSource(this._sourceId).setData(sourceData);
+        }
+    }
+
+    _refreshPaint() {
+        if (this._onPaint) this._onPaint(this._buildPaint());
+    }
+
+    _applyLayerOrder() {}
+
+    _syncClickHandler() {}
+}
+
+/**
+ * @param {object} handlers
+ * @param {() => import('@rnmapbox/maps').default | null} handlers.getMapboxMapView
+ * @param {(shape: object) => void} handlers.onShape
+ * @param {() => void} [handlers.onLayersCleared]
+ */
+/**
+ * RN MapView.setFeatureState is async per call; firing hundreds in one frame stalls the bridge.
+ * Coalesce updates and drain in bounded chunks per animation frame.
+ */
+function createFeatureStateBatcher(getMapboxMapView) {
+    /** @type {Map<string, { state: object, sid: string }>} */
+    const pending = new Map();
+    let rafId = null;
+    const CHUNK = 48;
+
+    function drainChunk() {
+        rafId = null;
+        const mapView = getMapboxMapView();
+        if (!mapView?.setFeatureState) {
+            pending.clear();
+            return;
+        }
+        if (pending.size === 0) return;
+
+        const batch = [];
+        for (const [fid, val] of pending) {
+            pending.delete(fid);
+            batch.push([fid, val]);
+            if (batch.length >= CHUNK) break;
+        }
+
+        void Promise.all(
+            batch.map(([fid, { state, sid }]) =>
+                mapView.setFeatureState(fid, state, sid, null).catch(() => undefined),
+            ),
+        ).finally(() => {
+            if (pending.size > 0) {
+                rafId = requestAnimationFrame(drainChunk);
+            }
+        });
+    }
+
+    function schedule() {
+        if (rafId == null) {
+            rafId = requestAnimationFrame(drainChunk);
+        }
+    }
+
+    return {
+        push(fid, state, sid) {
+            pending.set(String(fid), { state, sid });
+            schedule();
+        },
+        clear() {
+            pending.clear();
+            if (rafId != null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+        },
+    };
+}
+
+function createAndroidNwsStubMap(handlers) {
+    let sourceAdded = false;
+    /** Declarative RN layers use the same ids — treat as present after first {@link AndroidNwsOverlay#_ensureLayers}. */
+    let declarativeLayersReady = false;
+    const featureStateBatcher = createFeatureStateBatcher(handlers.getMapboxMapView);
+
+    return {
+        isStyleLoaded: () => true,
+        once(ev, fn) {
+            if (ev === 'style.load') {
+                queueMicrotask(() => fn({ target: {} }));
+            }
+        },
+        __markDeclarativeLayersReady() {
+            declarativeLayersReady = true;
+        },
+        addSource(id, spec) {
+            if (id === SOURCE_ID) {
+                sourceAdded = true;
+                if (spec?.data) handlers.onShape(spec.data);
+            }
+        },
+        getSource(id) {
+            if (!sourceAdded || id !== SOURCE_ID) return null;
+            return {
+                setData: (geojson) => handlers.onShape(geojson),
+            };
+        },
+        addLayer() {},
+        removeLayer(id) {
+            if ([FILL_ID, LINE_CASING_ID, LINE_CORE_ID].includes(id)) {
+                declarativeLayersReady = false;
+                featureStateBatcher.clear();
+                handlers.onLayersCleared?.();
+            }
+        },
+        removeSource(id) {
+            if (id === SOURCE_ID) {
+                sourceAdded = false;
+                declarativeLayersReady = false;
+                featureStateBatcher.clear();
+                handlers.onLayersCleared?.();
+            }
+        },
+        getLayer(id) {
+            if (!declarativeLayersReady) return null;
+            return [FILL_ID, LINE_CASING_ID, LINE_CORE_ID].includes(id) ? { id } : null;
+        },
+        getStyle() {
+            return { layers: [] };
+        },
+        moveLayer() {},
+        setPaintProperty() {},
+        on() {},
+        off() {},
+        fire() {},
+        setFeatureState(target, state) {
+            const sid = target?.source;
+            const fid = target?.id;
+            if (sid !== SOURCE_ID || fid == null) return;
+            try {
+                featureStateBatcher.push(fid, state, sid);
+            } catch {
+                /* ignore */
+            }
+        },
+    };
+}
+
+/**
+ * @param {object} state - {@link AguaceroCore} state
+ * @param {object} wopt - watches/warnings options (same shape as mapsgl {@link WeatherLayerManager#configureWatchesWarnings})
+ * @returns {{ weatherLayerId: string | null, fillBelowId: string | null, lineBelowId: string }}
+ */
+export function resolveNwsAndroidLayerAnchors(state, wopt) {
+    const manualFill = Object.prototype.hasOwnProperty.call(wopt, 'fillBeforeLayerId')
+        ? wopt.fillBeforeLayerId ?? null
+        : null;
+
+    let weatherLayerId = null;
+    if (state?.isNexrad) {
+        weatherLayerId = AGUACERO_NEXRAD_MAP_LAYER_ID;
+    } else if (state?.isSatellite) {
+        weatherLayerId = AGUACERO_SATELLITE_MAP_LAYER_ID;
+    } else if (state?.isMRMS && state?.variable) {
+        weatherLayerId = 'aguacero-weather-grid-custom';
+    }
+
+    const fillBelowId =
+        manualFill != null && String(manualFill) !== ''
+            ? String(manualFill)
+            : weatherLayerId || NWS_DEFAULT_LINE_BEFORE_LAYER_ID;
+
+    const lineBelowId = wopt.lineBeforeLayerId || NWS_DEFAULT_LINE_BEFORE_LAYER_ID;
+
+    return { weatherLayerId, fillBelowId, lineBelowId };
+}
+
+/**
+ * @param {object} props
+ * @param {import('@aguacerowx/javascript-sdk').AguaceroCore} props.core
+ * @param {object} props.watchesWarnings - merged options ({ enabled, alertsBaseUrl, nwsAlertSettings, ... })
+ * @param {(payload: object) => void} [props.onNwsAlertClick]
+ */
+export default function NwsAlertsOverlay({ core, watchesWarnings, onNwsAlertClick }) {
+    const [aguaceroState, setAguaceroState] = useState(() => core?.state);
+
+    useEffect(() => {
+        if (!core) return undefined;
+        const h = (s) => setAguaceroState(s);
+        core.on('state:change', h);
+        return () => core.off('state:change', h);
+    }, [core]);
+
+    const [shape, setShape] = useState({ type: 'FeatureCollection', features: [] });
+    const [paint, setPaint] = useState(null);
+
+    const overlayRef = useRef(null);
+    const stubRef = useRef(null);
+    const watchesRef = useRef(watchesWarnings);
+    const optsKeyRef = useRef('');
+
+    watchesRef.current = watchesWarnings;
+
+    const getMapboxMapView = useCallback(() => mapRegistry.getMap(), []);
+
+    const anchors = useMemo(
+        () => resolveNwsAndroidLayerAnchors(aguaceroState, watchesWarnings || {}),
+        [aguaceroState, watchesWarnings],
+    );
+
+    useEffect(() => {
+        const onPaint = (p) => setPaint(p);
+
+        const stub = createAndroidNwsStubMap({
+            getMapboxMapView,
+            onShape: (g) => setShape(g),
+            onLayersCleared: () => {
+                setPaint(null);
+            },
+        });
+        stubRef.current = stub;
+
+        const w0 = watchesRef.current || {};
+        const overlay = new AndroidNwsOverlay(stub, w0, onPaint);
+        overlayRef.current = overlay;
+
+        return () => {
+            overlay.destroy();
+            overlayRef.current = null;
+            stubRef.current = null;
+        };
+    }, [getMapboxMapView]);
+
+    useEffect(() => {
+        const ov = overlayRef.current;
+        if (!ov) return;
+
+        const wopt = watchesWarnings || {};
+        const nwsAlertSettingsForOpts = {
+            ...(wopt.nwsAlertSettings ?? {}),
+            ...(wopt.activeOnlyRealtime !== undefined ? { activeOnlyRealtime: wopt.activeOnlyRealtime } : {}),
+        };
+
+        const weatherLayerId = anchors.weatherLayerId;
+        const fillBeforeLayerId = Object.prototype.hasOwnProperty.call(wopt, 'fillBeforeLayerId')
+            ? wopt.fillBeforeLayerId ?? null
+            : null;
+
+        const nwsOptsKey = JSON.stringify({
+            weatherLayerId,
+            fillBeforeLayerId,
+            lineBeforeLayerId: wopt.lineBeforeLayerId,
+            alertsBaseUrl: wopt.alertsBaseUrl,
+            alertInteractionEnabled: wopt.alertInteractionEnabled,
+            deltaDebounceMs: wopt.deltaDebounceMs,
+            fillOpacity: wopt.fillOpacity,
+            lineOpacity: wopt.lineOpacity,
+            lineWidth: wopt.lineWidth,
+            nwsAlertSettings: nwsAlertSettingsForOpts,
+        });
+
+        if (optsKeyRef.current !== nwsOptsKey) {
+            optsKeyRef.current = nwsOptsKey;
+            ov.updateOptions({
+                alertsBaseUrl: wopt.alertsBaseUrl,
+                alertInteractionEnabled: wopt.alertInteractionEnabled,
+                deltaDebounceMs: wopt.deltaDebounceMs,
+                fillOpacity: wopt.fillOpacity,
+                lineOpacity: wopt.lineOpacity,
+                lineWidth: wopt.lineWidth,
+                weatherLayerId,
+                fillBeforeLayerId,
+                lineBeforeLayerId: wopt.lineBeforeLayerId,
+                nwsAlertSettings: nwsAlertSettingsForOpts,
+            });
+        }
+    }, [watchesWarnings, anchors.weatherLayerId]);
+
+    useEffect(() => {
+        const ov = overlayRef.current;
+        if (!ov || !aguaceroState) return;
+
+        const wopt = watchesWarnings || {};
+        const masterEnabled = wopt.enabled === true;
+        const enabled = masterEnabled;
+
+        let timelineUnix = null;
+        let timelineTimes = null;
+        const st = aguaceroState;
+        if (st.isSatellite) {
+            timelineUnix = st.satelliteTimestamp == null ? null : Number(st.satelliteTimestamp);
+            timelineTimes = st.availableSatelliteTimestamps;
+        } else if (st.isNexrad) {
+            timelineUnix = st.nexradTimestamp == null ? null : Number(st.nexradTimestamp);
+            timelineTimes = st.availableNexradTimestamps;
+        } else if (st.isMRMS) {
+            timelineUnix = st.mrmsTimestamp == null ? null : Number(st.mrmsTimestamp);
+            timelineTimes = st.availableTimestamps;
+        }
+
+        const hasObservationTimeline = !!(st.isSatellite || st.isNexrad || st.isMRMS);
+        const alertsFetchHours = computeNwsAlertsFetchHoursFromAguaceroState(st);
+
+        ov.syncWithMode({
+            enabled,
+            timelineUnix,
+            timelineTimes,
+            hasObservationTimeline,
+            alertsFetchHours,
+        });
+    }, [aguaceroState, watchesWarnings]);
+
+    useLayoutEffect(() => {
+        const stub = stubRef.current;
+        const ov = overlayRef.current;
+        if (!stub || !ov || !paint) return;
+        stub.__markDeclarativeLayersReady();
+        try {
+            ov._applyTimeFilters();
+        } catch {
+            /* ignore */
+        }
+    }, [paint, shape, aguaceroState?.nexradTimestamp, aguaceroState?.mrmsTimestamp, aguaceroState?.satelliteTimestamp]);
+
+    useEffect(() => {
+        if (!onNwsAlertClick) return undefined;
+
+        const handler = async (payload) => {
+            const wopt = watchesRef.current || {};
+            if (!wopt.enabled || wopt.alertInteractionEnabled === false) return;
+
+            const mapView = mapRegistry.getMap();
+            if (!mapView?.queryRenderedFeaturesAtPoint) return;
+
+            let screenPoint = null;
+            if (payload?.properties?.screenPointX != null && payload?.properties?.screenPointY != null) {
+                screenPoint = [payload.properties.screenPointX, payload.properties.screenPointY];
+            } else if (payload?.point != null && Array.isArray(payload.point)) {
+                screenPoint = payload.point;
+            }
+            if (!screenPoint) return;
+
+            let feats = await mapView.queryRenderedFeaturesAtPoint(screenPoint, undefined, [
+                FILL_ID,
+                LINE_CASING_ID,
+                LINE_CORE_ID,
+            ]);
+            if (!feats?.length && payload?.coordinates) {
+                const coord = payload.coordinates;
+                const pt = await mapView.getPointInView(coord);
+                if (pt) feats = await mapView.queryRenderedFeaturesAtPoint(pt, undefined, [FILL_ID, LINE_CASING_ID, LINE_CORE_ID]);
+            }
+            const hit = feats?.find((f) =>
+                [FILL_ID, LINE_CASING_ID, LINE_CORE_ID].includes(f?.layer?.id),
+            );
+            if (!hit?.properties) return;
+            try {
+                const built = buildAlertClickPayload(hit);
+                onNwsAlertClick({ ...built, feature: hit });
+            } catch {
+                /* ignore */
+            }
+        };
+
+        mapRegistry.addPressListener(handler);
+        return () => mapRegistry.removePressListener(handler);
+    }, [onNwsAlertClick]);
+
+    if (!paint) {
+        return null;
+    }
+
+    const p = paint;
+    const lineLayout = p.lineLayout ?? {};
+    const lineCap = lineLayout['line-cap'] ?? 'round';
+    const lineJoin = lineLayout['line-join'] ?? 'round';
+    const lineSortKey = lineLayout['line-sort-key'] ?? ['coalesce', ['get', '_nws_render_priority'], 0];
+    const fillSortKey = ['coalesce', ['get', '_nws_render_priority'], 0];
+
+    const fillStyle = {
+        fillColor: p.fillColorExpr,
+        fillOpacity: p.fillOpacityExpr,
+        fillSortKey,
+    };
+    const casingStyle = {
+        lineColor: p.dualLine.casingColor,
+        lineWidth: p.dualLine.casingWidth,
+        lineOpacity: p.lineOpacityExpr,
+        lineDasharray: p.lineDashExpr,
+        lineCap,
+        lineJoin,
+        lineSortKey,
+    };
+    const coreStyle = {
+        lineColor: p.dualLine.coreColor,
+        lineWidth: p.dualLine.coreWidth,
+        lineOpacity: p.lineOpacityExpr,
+        lineDasharray: p.lineDashExpr,
+        lineCap,
+        lineJoin,
+        lineSortKey,
+    };
+
+    return (
+        <Mapbox.ShapeSource id={SOURCE_ID} shape={shape}>
+            <Mapbox.FillLayer id={FILL_ID} belowLayerID={anchors.fillBelowId} style={fillStyle} />
+            <Mapbox.LineLayer id={LINE_CASING_ID} belowLayerID={anchors.lineBelowId} style={casingStyle} />
+            <Mapbox.LineLayer id={LINE_CORE_ID} belowLayerID={anchors.lineBelowId} style={coreStyle} />
+        </Mapbox.ShapeSource>
+    );
+}

package/src/nws/NwsAlertsOverlay.ios.js

@@ -0,0 +1,7 @@
+/**
+ * NWS alerts overlay is implemented for Android (@rnmapbox native StyleSource parity). iOS uses the
+ * grid/NEXRAD path without this component today.
+ */
+export default function NwsAlertsOverlay() {
+    return null;
+}

package/src/nws/NwsAlertsOverlay.js

@@ -0,0 +1,7 @@
+import { Platform } from 'react-native';
+
+export default Platform.select({
+    android: require('./NwsAlertsOverlay.android.js').default,
+    ios: require('./NwsAlertsOverlay.ios.js').default,
+    default: require('./NwsAlertsOverlay.ios.js').default,
+});