@sjvair/monitor-map 4.3.0 → 5.0.0-beta.0

package/dist/lib/monitors/components/MonitorSubscriptionManager.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { BellCheckIcon, BellOffIcon, ChevronDownIcon } from "@lucide/svelte";
 	import { subscribe, unsubscribe } from "@sjvair/sdk/account";
-	import { monitorsManager } from "../..";
+	import LoadError from "../../LoadError.svelte";
+	import { monitorsManager } from "../monitors.svelte.js";
 	import { getApiToken, loadSubscriptionLevel } from "../subscriptions";
 
 	interface MonitorSubscriptionManagerProps {
@@ -22,23 +23,21 @@
 	let saving = $state(false);
 	let subscribedLevel: string | null = $state(null);
 
+	// The alert rows, in this order, from the PM2.5 scale; a key the scale lacks is skipped.
 	const alertLevels = $derived.by(() => {
-		if (!monitorsManager.meta) return [];
-		try {
-			return monitorsManager.meta
-				.entryType("pm25")
-				.asIter.levels!.filter((level) =>
-					ALERT_LEVEL_NAMES.includes(level.name as (typeof ALERT_LEVEL_NAMES)[number])
-				);
-		} catch {
-			return [];
-		}
+		const levels = monitorsManager.meta?.entryType("pm25").scale?.levels ?? [];
+		return ALERT_LEVEL_NAMES.flatMap((key) => levels.find((level) => level.key === key) ?? []);
 	});
 
+	let loadError = $state(false);
+	let attempt = $state(0);
+
 	$effect(() => {
 		const id = monitorId;
+		void attempt;
 		open = false;
 		subscribedLevel = null;
+		loadError = false;
 		const controller = new AbortController();
 		const { signal } = controller;
 		loading = true;
@@ -47,7 +46,9 @@
 				if (!signal.aborted) subscribedLevel = level;
 			})
 			.catch((error) => {
-				if (!signal.aborted) throw error;
+				if (signal.aborted) return;
+				console.error("Could not load subscription status", error);
+				loadError = true;
 			})
 			.finally(() => {
 				if (!signal.aborted) loading = false;
@@ -78,53 +79,57 @@
 	}
 </script>
 
-<div class="relative select-none">
-	<button
-		class={[
-			"flex w-full cursor-pointer items-center justify-center gap-2 rounded border px-3 py-1.5 text-sm font-semibold text-white",
-			subscribedLevel
-				? "border-green-700 bg-green-600 hover:bg-green-700"
-				: "border-blue-600 bg-blue-500 hover:bg-blue-600"
-		]}
-		disabled={loading}
-		onclick={() => (open = !open)}
-	>
-		{subscribedLevel ? "Manage Subscription" : "Subscribe to Alerts"}
-		<ChevronDownIcon
-			size={16}
-			class={["transition-transform duration-300", open ? "rotate-180" : ""]}
-		/>
-	</button>
+{#if loadError}
+	<LoadError message="Couldn't load your alert settings." onretry={() => attempt++} />
+{:else}
+	<div class="relative select-none">
+		<button
+			class={[
+				"flex w-full cursor-pointer items-center justify-center gap-2 rounded border px-3 py-1.5 text-sm font-semibold text-white",
+				subscribedLevel
+					? "border-green-700 bg-green-600 hover:bg-green-700"
+					: "border-blue-600 bg-blue-500 hover:bg-blue-600"
+			]}
+			disabled={loading}
+			onclick={() => (open = !open)}
+		>
+			{subscribedLevel ? "Manage Subscription" : "Subscribe to Alerts"}
+			<ChevronDownIcon
+				size={16}
+				class={["transition-transform duration-300", open ? "rotate-180" : ""]}
+			/>
+		</button>
 
-	{#if open}
-		<button aria-label="Close" class="fixed inset-0 z-10" onclick={() => (open = false)}></button>
-		<div class="absolute top-full left-0 z-20 mt-1 w-full overflow-hidden rounded shadow-lg">
-			{#if subscribedLevel}
-				<button
-					class="flex w-full cursor-pointer items-center justify-between rounded-t border border-black/30 px-4 py-2 text-sm hover:bg-[#F5F5F3]"
-					onclick={() => handleLevelClick(subscribedLevel)}
-				>
-					Unsubscribe
-					<BellOffIcon size={14} />
-				</button>
-			{/if}
-			{#each alertLevels as level (level.name)}
-				{@const isSubscribed = level.name === subscribedLevel}
-				<button
-					class={[
-						"flex w-full items-center justify-between px-4 py-2 text-sm text-white last:rounded-b",
-						!isSubscribed ? "cursor-pointer first:rounded-t hover:brightness-90" : ""
-					]}
-					style="background-color: {level.color}"
-					disabled={saving}
-					onclick={!isSubscribed ? () => handleLevelClick(level.name) : null}
-				>
-					<span>{level.label}</span>
-					{#if isSubscribed}
-						<BellCheckIcon size={14} />
-					{/if}
-				</button>
-			{/each}
-		</div>
-	{/if}
-</div>
+		{#if open}
+			<button aria-label="Close" class="fixed inset-0 z-10" onclick={() => (open = false)}></button>
+			<div class="absolute top-full left-0 z-20 mt-1 w-full overflow-hidden rounded shadow-lg">
+				{#if subscribedLevel}
+					<button
+						class="flex w-full cursor-pointer items-center justify-between rounded-t border border-black/30 px-4 py-2 text-sm hover:bg-[#F5F5F3]"
+						onclick={() => handleLevelClick(subscribedLevel)}
+					>
+						Unsubscribe
+						<BellOffIcon size={14} />
+					</button>
+				{/if}
+				{#each alertLevels as level (level.key)}
+					{@const isSubscribed = level.key === subscribedLevel}
+					<button
+						class={[
+							"flex w-full items-center justify-between px-4 py-2 text-sm text-white last:rounded-b",
+							!isSubscribed ? "cursor-pointer first:rounded-t hover:brightness-90" : ""
+						]}
+						style="background-color: {level.color}"
+						disabled={saving}
+						onclick={!isSubscribed ? () => handleLevelClick(level.key) : null}
+					>
+						<span>{level.label}</span>
+						{#if isSubscribed}
+							<BellCheckIcon size={14} />
+						{/if}
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}

package/dist/lib/monitors/filtered-source.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { DataSource, MonitorFeatureProperties } from "@sjvair/map-sdk/data";
+import type { MapOptions } from "../options/map-option-defaults";
+type Options = Pick<MapOptions, "monitorTypes" | "inactive" | "inside">;
+/**
+ * `source` with only the monitors the Monitors menu shows: types that are on, inactive and
+ * inside ones only when those are on. Clusters are built from these, so their averages follow.
+ */
+export declare function filteredMonitors(source: DataSource<MonitorFeatureProperties>, options: Options): DataSource<MonitorFeatureProperties>;
+export {};

package/dist/lib/monitors/filtered-source.svelte.js

@@ -0,0 +1,28 @@
+function shown(props, options) {
+    return (options.monitorTypes[props.type] === true &&
+        (props.isActive || options.inactive) &&
+        (props.location !== "inside" || options.inside));
+}
+/**
+ * `source` with only the monitors the Monitors menu shows: types that are on, inactive and
+ * inside ones only when those are on. Clusters are built from these, so their averages follow.
+ */
+export function filteredMonitors(source, options) {
+    const features = $derived.by(() => {
+        const all = source.features;
+        if (!all)
+            return null;
+        return { ...all, features: all.features.filter((f) => shown(f.properties, options)) };
+    });
+    return {
+        get status() {
+            return source.status;
+        },
+        get features() {
+            return features;
+        },
+        get scale() {
+            return source.scale;
+        }
+    };
+}

package/dist/lib/monitors/monitors.svelte.d.ts

@@ -1,8 +1,5 @@
-import { type MonitorData, type MonitorLatestType, type MonitorsMeta, type SJVAirEntryLevel } from "@sjvair/sdk";
-import { XMap } from "@tstk/builtin-extensions";
-import { Interval } from "@tstk/utils";
-import { type SignalOptions } from "../abort";
-import type { MonitorsDataSource } from "./types";
+import type { MonitorData, MonitorsMeta } from "@sjvair/sdk";
+import type { MonitorsStore } from "@sjvair/map-sdk/stores";
 export interface MonitorsInitOptions {
     /**
      * Start the 2-minute polling once the initial load finishes. Defaults to true; pass false to
@@ -12,41 +9,34 @@ export interface MonitorsInitOptions {
     /**
      * Stops waiting: the returned promise rejects with the signal's reason. The shared run keeps
      * going for the other calls waiting on it, and is cancelled only when every call waiting on it
-     * passed a signal and all of those aborted. An aborted call's pollutant and `autoUpdate` stay
-     * recorded. Ignored once initialized.
+     * passed a signal and all of those aborted. Ignored once initialized.
      */
     signal?: AbortSignal;
 }
-declare class MonitorsManager implements MonitorsDataSource {
-    #private;
-    autoUpdate: Interval;
-    initialized: boolean;
-    latest: XMap<string, MonitorLatestType<"pm25" | "o3">> | null;
-    list: Array<MonitorData> | null;
-    meta: MonitorsMeta | null;
-    pollutant: "pm25" | "o3" | null;
-    levels: Array<SJVAirEntryLevel> | null;
-    constructor();
+/**
+ * The live monitors data, as hosts have used it since 4.x: a thin view over map-sdk's monitors
+ * store, which owns the data, the shared init and the polling.
+ */
+export interface MonitorsManager {
+    /** Loads the monitors. Only "pm25" and "o3" pass through; anything else means the default. */
+    init(pollutant?: unknown, options?: MonitorsInitOptions): Promise<void>;
+    readonly initialized: boolean;
+    readonly meta: MonitorsMeta | null;
     /**
-     * Safe to call from several places: overlapping calls share one run, and a failed run can
-     * be retried. An explicit "pm25"/"o3" wins over a call without one, whichever came first;
-     * between two explicit values the most recent wins. Polling starts when the run finishes
-     * unless every call sharing it passed `autoUpdate: false`. A no-op once initialized, so it
-     * never restarts polling either: that is `resumeAutoUpdate()`.
-     */
-    init(urlPollutant?: string | number | boolean, options?: MonitorsInitOptions): Promise<void>;
-    /**
-     * Starts polling when it is not running: after something stopped it (MonitorMapLayout stops
-     * it on destroy) or after an init that opted out of it. Refreshes first since the data may
-     * be stale. A no-op before init or while polling.
+     * Every monitor, or null until initialized. The same array between reads until the store's
+     * monitors are replaced.
      */
+    readonly list: MonitorData[] | null;
+    /** The pollutant the readings are for, or null before init. */
+    readonly pollutant: string | null;
+    setPollutant(pollutant: "pm25" | "o3"): void;
+    update(options?: {
+        signal?: AbortSignal;
+    }): Promise<void>;
     resumeAutoUpdate(): void;
-    /**
-     * Refreshes the list and the latest readings. Starting an update aborts the previous
-     * in-flight one, which then resolves without touching state. Pass `signal` to cancel from the
-     * outside: that rejects with the signal's reason.
-     */
-    update(options?: SignalOptions): Promise<void>;
+    pauseAutoUpdate(): void;
+    /** The store underneath, for map-sdk plugins and stores. */
+    readonly store: MonitorsStore;
 }
+export declare function createMonitorsManager(store: MonitorsStore): MonitorsManager;
 export declare const monitorsManager: MonitorsManager;
-export type { MonitorsManager };

package/dist/lib/monitors/monitors.svelte.js

@@ -1,220 +1,37 @@
-import { getMonitors, getMonitorsList, getMonitorsMeta } from "@sjvair/sdk";
-import { XMap } from "@tstk/builtin-extensions";
-import { Interval } from "@tstk/utils";
-import { untrack } from "svelte";
-import { anySignal, untilAborted } from "../abort";
-class MonitorsManager {
-    autoUpdate = new Interval(async () => await this.update(), 2 * 60 * 1000);
-    initialized = $state(false);
-    latest = $state(null);
-    list = $state(null);
-    meta = $state(null);
-    pollutant = $state(null);
-    levels = $derived(this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null);
-    #initRun = null;
-    #requestedPollutant = null;
-    #requestedAutoUpdate = false;
-    #updateController = null;
-    constructor() {
-        // Refetch monitors when the pollutant changes after the initial load, wherever the change
-        // comes from (Pollutant menu, URL sync, a host's own UI). Clearing first blanks the markers
-        // instead of briefly coloring them with the previous pollutant's readings.
-        let fetchedPollutant = null;
-        $effect.root(() => {
-            $effect(() => {
-                const pollutant = this.pollutant;
-                if (!this.initialized)
-                    return;
-                if (fetchedPollutant !== null && fetchedPollutant !== pollutant) {
-                    untrack(() => {
-                        this.list = [];
-                        this.latest = null;
-                        this.update();
-                    });
-                }
-                fetchedPollutant = pollutant;
-            });
-        });
-    }
-    /**
-     * Safe to call from several places: overlapping calls share one run, and a failed run can
-     * be retried. An explicit "pm25"/"o3" wins over a call without one, whichever came first;
-     * between two explicit values the most recent wins. Polling starts when the run finishes
-     * unless every call sharing it passed `autoUpdate: false`. A no-op once initialized, so it
-     * never restarts polling either: that is `resumeAutoUpdate()`.
-     */
-    init(urlPollutant, options = {}) {
-        if (this.initialized)
-            return Promise.resolve();
-        const { signal } = options;
-        // Nothing is recorded or started for a call that is already cancelled.
-        if (signal?.aborted)
-            return Promise.reject(signal.reason);
-        if (options.autoUpdate !== false)
-            this.#requestedAutoUpdate = true;
-        if (urlPollutant === "pm25" || urlPollutant === "o3") {
-            this.#requestedPollutant = urlPollutant;
-        }
-        const run = (this.#initRun ??= this.#startInitRun());
-        if (!signal) {
-            run.unsignalled = true;
-            return run.promise;
-        }
-        run.signalled++;
-        const onAbort = () => {
-            run.aborted++;
-            if (!run.unsignalled && run.aborted === run.signalled)
-                this.#abortInitRun(run);
-        };
-        signal.addEventListener("abort", onAbort, { once: true });
-        const cleanup = () => signal.removeEventListener("abort", onAbort);
-        run.promise.then(cleanup, cleanup);
-        return untilAborted(run.promise, signal);
-    }
-    #startInitRun() {
-        const controller = new AbortController();
-        const run = {
-            promise: this.#runInit(controller.signal).finally(() => {
-                if (this.#initRun === run)
-                    this.#clearInitRun();
-            }),
-            controller,
-            signalled: 0,
-            aborted: 0,
-            unsignalled: false
-        };
-        return run;
-    }
-    /**
-     * Cancels a run nobody is waiting on. It is detached at once, so a call arriving before its
-     * rejection settles starts a fresh run instead of joining the cancelled one.
-     */
-    #abortInitRun(run) {
-        if (this.#initRun !== run)
-            return;
-        this.#clearInitRun();
-        run.controller.abort();
-    }
-    #clearInitRun() {
-        this.#initRun = null;
-        this.#requestedPollutant = null;
-        this.#requestedAutoUpdate = false;
-    }
-    async #runInit(signal) {
-        // The pollutant the latest readings were requested for.
-        let fetchedPollutant = this.#requestedPollutant;
-        const metaRequest = getMonitorsMeta({ signal });
-        const listAndMeta = Promise.all([getMonitorsList({ signal }), metaRequest]).then(([list, meta]) => {
-            if (signal.aborted)
-                throw signal.reason;
-            this.list = list;
-            this.meta = meta;
-            return meta;
-        });
-        // The latest readings only need the pollutant, so they never wait for the list. An explicit
-        // pollutant may still arrive before meta does, in which case the default is never fetched.
-        const latestRequest = fetchedPollutant
-            ? getMonitorsLatestMap(fetchedPollutant, signal)
-            : metaRequest.then((meta) => {
-                const pollutant = this.#requestedPollutant ?? meta.default_pollutant;
-                fetchedPollutant = pollutant;
-                return getMonitorsLatestMap(pollutant, signal);
-            });
-        // One Promise.all so a failure in either never leaves the other unhandled.
-        const [meta, firstLatest] = await Promise.all([listAndMeta, latestRequest]);
-        let latest = firstLatest;
-        // An explicit pollutant may have arrived while the requests above were in flight.
-        let wanted = this.#requestedPollutant ?? meta.default_pollutant;
-        while (wanted !== fetchedPollutant) {
-            latest = await getMonitorsLatestMap(wanted, signal);
-            fetchedPollutant = wanted;
-            wanted = this.#requestedPollutant ?? meta.default_pollutant;
-        }
-        // Cancelled while a request that ignores the signal was settling: leave state to the next run.
-        if (signal.aborted)
-            throw signal.reason;
-        this.pollutant = fetchedPollutant;
-        this.latest = latest;
-        if (this.#requestedAutoUpdate)
-            this.autoUpdate.start();
-        this.initialized = true;
-    }
-    /**
-     * Starts polling when it is not running: after something stopped it (MonitorMapLayout stops
-     * it on destroy) or after an init that opted out of it. Refreshes first since the data may
-     * be stale. A no-op before init or while polling.
-     */
-    resumeAutoUpdate() {
-        if (!this.initialized || this.autoUpdate.isActive)
-            return;
-        this.update().catch(console.error);
-        this.autoUpdate.start();
-    }
-    /**
-     * Refreshes the list and the latest readings. Starting an update aborts the previous
-     * in-flight one, which then resolves without touching state. Pass `signal` to cancel from the
-     * outside: that rejects with the signal's reason.
-     */
-    async update(options = {}) {
-        if (!this.initialized)
-            return;
-        // Nothing has started yet, so an in-flight update is left alone.
-        if (options.signal?.aborted)
-            throw options.signal.reason;
-        const supersededInFlight = this.#updateController !== null;
-        this.#updateController?.abort();
-        const controller = new AbortController();
-        this.#updateController = controller;
-        const combined = anySignal(controller.signal, options.signal);
-        // The caller cancelled this update. If it is still the latest and it cut off an update that
-        // was in flight, that update's data is lost too, so refresh again without a signal.
-        const callerAborted = (signal) => {
-            if (supersededInFlight && this.#updateController === controller) {
-                this.update().catch(console.error);
-            }
-            return signal.reason;
-        };
-        // Set once callerAborted has run, so the catch below does not run it a second time.
-        let abortedError;
-        try {
-            const pollutant = this.pollutant;
-            const [list, latest] = await Promise.all([
-                getMonitorsList({ signal: combined.signal }),
-                getMonitorsLatestMap(pollutant || this.meta?.default_pollutant || "pm25", combined.signal)
-            ]);
-            // Superseded or cancelled while the requests were settling.
-            if (options.signal?.aborted)
-                throw (abortedError = callerAborted(options.signal));
-            if (controller.signal.aborted)
-                return;
-            // The pollutant changed while this was in flight: these readings belong to the previous
-            // one, and the change has already started its own update.
-            if (this.pollutant !== pollutant)
-                return;
-            this.list = list;
-            this.latest = latest;
-        }
-        catch (error) {
-            // The caller's own abort rejects with its reason. A superseded update resolves quietly.
-            if (options.signal?.aborted)
-                throw error === abortedError ? error : callerAborted(options.signal);
-            if (controller.signal.aborted)
-                return;
-            throw error;
-        }
-        finally {
-            combined.dispose();
-            if (this.#updateController === controller)
-                this.#updateController = null;
-        }
-    }
+import { monitorsStore } from "../stores.svelte.js";
+function initPollutant(pollutant) {
+    return pollutant === "pm25" || pollutant === "o3" ? pollutant : undefined;
 }
-async function getMonitorsLatestMap(pollutant, signal) {
-    const monitors = await getMonitors(pollutant, undefined, { signal });
-    const latest = new XMap();
-    for (const monitor of monitors) {
-        latest.set(monitor.id, monitor);
-    }
-    return latest;
+export function createMonitorsManager(store) {
+    // The list built from `store.monitors`, which the store replaces rather than mutates.
+    let listFrom = null;
+    let list = [];
+    return {
+        init: (pollutant, options) => store.init(initPollutant(pollutant), options),
+        get initialized() {
+            return store.initialized;
+        },
+        get meta() {
+            return store.meta;
+        },
+        get list() {
+            if (!store.initialized)
+                return null;
+            const monitors = store.monitors;
+            if (monitors !== listFrom) {
+                listFrom = monitors;
+                list = [...monitors.values()];
+            }
+            return list;
+        },
+        get pollutant() {
+            return store.entryType;
+        },
+        setPollutant: (pollutant) => store.entryTypeFor(pollutant),
+        update: (options) => store.update(options),
+        resumeAutoUpdate: () => store.resumeAutoUpdate(),
+        pauseAutoUpdate: () => store.pauseAutoUpdate(),
+        store
+    };
 }
-export const monitorsManager = new MonitorsManager();
+export const monitorsManager = createMonitorsManager(monitorsStore);

package/dist/lib/monitors/retry-load.d.ts

@@ -0,0 +1,8 @@
+import type { monitorsStore } from "../stores.svelte.js";
+/**
+ * Retries a failed initial monitors load through the store's own `status.retry()`, which repeats
+ * the failed `init()` call. When the status is not an error (nothing to retry), runs `fallback`.
+ */
+export declare function retryMonitorsLoad(store: {
+    dataSource: Pick<typeof monitorsStore.dataSource, "status">;
+}, fallback: () => void): void;

package/dist/lib/monitors/retry-load.js

@@ -0,0 +1,11 @@
+/**
+ * Retries a failed initial monitors load through the store's own `status.retry()`, which repeats
+ * the failed `init()` call. When the status is not an error (nothing to retry), runs `fallback`.
+ */
+export function retryMonitorsLoad(store, fallback) {
+    const { status } = store.dataSource;
+    if (status.state === "error")
+        status.retry();
+    else
+        fallback();
+}

package/dist/lib/monitors/types.d.ts

@@ -1,42 +1,2 @@
-import type { Feature, Geometry } from "geojson";
-import type { MonitorLatestType, MonitorsMeta, MonitorType, SJVAirEntryLevel } from "@sjvair/sdk";
-import type { MapGeoJSONFeature } from "@maptiler/sdk";
-import type { XMap } from "@tstk/builtin-extensions";
-export type MonitorMapFeature = Feature<Geometry, MonitorMarkerProperties>;
-export interface MonitorClusterMapFeature extends MapGeoJSONFeature {
-    properties: MonitorClusterMarkerProperties;
-}
-export interface MonitorMarkerProperties {
-    icon: string;
-    id: string;
-    is_active: boolean;
-    is_sjvair?: boolean;
-    location: string;
-    name: string;
-    order: number;
-    type: MonitorType;
-    value: string;
-}
-export interface MonitorClusterMarkerProperties {
-    cluster: true;
-    cluster_id: number;
-    point_count: number;
-    point_count_abbreviated: string | number;
-    sumValues: number;
-    countValues: number;
-}
-/** The pollutants monitorsMapIntegration/monitorsIconManager can render. */
+/** The pollutants the map can show. */
 export type MonitorsPollutant = "pm25" | "o3";
-/**
- * The reactive data a monitors map display needs: which monitors exist, their
- * per-monitor "latest" value for the active pollutant, and the entry-level metadata
- * used to color icons. `monitorsManager` (live, auto-polling) is the default
- * implementation; a host app can supply its own (e.g. one backed by historical
- * summaries instead of live readings) to reuse the map rendering with different data.
- */
-export interface MonitorsDataSource {
-    readonly meta: MonitorsMeta | null;
-    readonly pollutant: MonitorsPollutant | null;
-    readonly latest: XMap<string, MonitorLatestType<MonitorsPollutant>> | null;
-    readonly levels: Array<SJVAirEntryLevel> | null;
-}