@sjvair/monitor-map 4.1.0 → 4.3.0

package/dist/lib/monitors/panel-pollutant.js

@@ -0,0 +1,43 @@
+/** The pollutants the detail panel can show, in order of preference. */
+export const PANEL_POLLUTANTS = ["pm25", "o3"];
+/** The panel pollutants this monitor has a current, numeric reading for. */
+export function readingPollutants(monitor) {
+    return PANEL_POLLUTANTS.filter((pollutant) => {
+        const value = monitor.latest[pollutant]?.value;
+        return typeof value === "string" && value.trim() !== "" && Number.isFinite(Number(value));
+    });
+}
+/**
+ * The panel pollutants this monitor type publishes. The API marks each entry type with a
+ * `published` flag the SDK does not type; a type that carries the entry without the flag
+ * counts as publishing it.
+ */
+export function publishedPollutants(monitorType, meta) {
+    const entries = meta.monitors[monitorType]?.entries ?? {};
+    return PANEL_POLLUTANTS.filter((pollutant) => {
+        const entry = entries[pollutant];
+        return entry !== undefined && entry.published !== false;
+    });
+}
+/**
+ * The pollutant the detail panel shows: the map's when the monitor has it, otherwise the one
+ * the monitor has. A monitor with no current reading (inactive, or nothing reported) still
+ * gets a pollutant when there is one to chart, so its past data can be browsed.
+ */
+export function choosePanelPollutant(mapPollutant, monitor, meta) {
+    const withReading = readingPollutants(monitor);
+    // The API keeps returning an inactive monitor's last reading, however old, so only an
+    // active monitor's readings count as current.
+    if (monitor.is_active && withReading.length > 0) {
+        const pollutant = mapPollutant && withReading.includes(mapPollutant) ? mapPollutant : withReading[0];
+        return { pollutant, hasReading: true };
+    }
+    // Nothing current: chart what the type publishes, or failing that what it last reported.
+    const published = publishedPollutants(monitor.type, meta);
+    const chartable = published.length > 0 ? published : withReading;
+    if (chartable.length > 0) {
+        const pollutant = mapPollutant && chartable.includes(mapPollutant) ? mapPollutant : chartable[0];
+        return { pollutant, hasReading: false };
+    }
+    return { pollutant: null, hasReading: false };
+}

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

@@ -0,0 +1,3 @@
+import type { SignalOptions } from "../abort";
+export declare function getApiToken(): string | undefined;
+export declare function loadSubscriptionLevel(monitorId: string, options?: SignalOptions): Promise<string | null>;

package/dist/lib/monitors/subscriptions.js

@@ -0,0 +1,9 @@
+import { getSubscriptions } from "@sjvair/sdk/account";
+export function getApiToken() {
+    const token = globalThis["USER"]?.api_token;
+    return typeof token === "string" && token !== "" ? token : undefined;
+}
+export async function loadSubscriptionLevel(monitorId, options) {
+    const subscriptions = await getSubscriptions(getApiToken(), { signal: options?.signal });
+    return subscriptions.find((s) => s.monitor === monitorId)?.level ?? null;
+}

package/dist/lib/options/OptionsBar.svelte

@@ -42,7 +42,14 @@
 	function onkeydown(e: KeyboardEvent) {
 		if (e.key !== "Escape") return;
 		panelOpen = false;
-		if (isWideLayout()) menus.closeAll();
+		if (!isWideLayout()) return;
+		// Focus on a row would be left inside the hidden dropdown; hand it back to the trigger.
+		const focused = document.activeElement;
+		const trigger = focused
+			?.closest("[data-options-menu]")
+			?.querySelector<HTMLElement>(":scope > button");
+		menus.closeAll();
+		if (trigger !== focused) trigger?.focus();
 	}
 </script>
 

package/dist/lib/options/OptionsMenu.svelte

@@ -33,10 +33,19 @@
 
 <div
 	role="presentation"
+	data-options-menu
 	class="group/menu relative md:first:[&>button]:rounded-l-md md:last:[&>button]:rounded-r-md"
 	onmouseenter={() => {
 		if (isWideLayout()) menus.closeOthers(id);
 	}}
+	onfocusout={(e) => {
+		// Toolbar only: focus moving on to something outside this menu (tabbing past the last
+		// row) closes its dropdown. No destination means a click on something unfocusable, which
+		// the outside-click handler in OptionsBar decides.
+		const next = e.relatedTarget;
+		if (!isWideLayout() || !(next instanceof Node) || e.currentTarget.contains(next)) return;
+		menus.close(id);
+	}}
 >
 	<button
 		type="button"
@@ -61,7 +70,7 @@
 			"max-md:pt-1 md:absolute md:top-full md:z-20 md:min-w-64 md:pt-1",
 			alignRight ? "md:right-0" : "md:left-0",
 			open ? "block" : "hidden",
-			!disabled && "md:group-hover/menu:block md:group-has-[:focus-visible]/menu:block"
+			!disabled && "md:group-hover/menu:block"
 		]}
 	>
 		<div class="py-1 md:max-h-[69vh] md:overflow-y-auto md:rounded-md md:bg-white md:shadow-lg">

package/dist/lib/shared-load.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Wraps a loader so overlapping calls share one run and a resolved run is reused, while a
+ * rejected run is forgotten: the next call tries again.
+ */
+export declare function sharedLoad<T>(load: () => Promise<T>): () => Promise<T>;

package/dist/lib/shared-load.js

@@ -0,0 +1,14 @@
+/**
+ * Wraps a loader so overlapping calls share one run and a resolved run is reused, while a
+ * rejected run is forgotten: the next call tries again.
+ */
+export function sharedLoad(load) {
+    let pending = null;
+    return () => {
+        pending ??= load().catch((error) => {
+            pending = null;
+            throw error;
+        });
+        return pending;
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@sjvair/monitor-map",
 	"description": "SJVAir's interactive monitor map",
-	"version": "4.1.0",
+	"version": "4.3.0",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/SJVAir/monitor-map"
@@ -84,7 +84,7 @@
 		"@lucide/svelte": "^1.46.0",
 		"@maptiler/sdk": "^4.1.0",
 		"@maptiler/weather": "^4.0.1",
-		"@sjvair/sdk": "npm:@jsr/sjvair__sdk@^4.5.0",
+		"@sjvair/sdk": "npm:@jsr/sjvair__sdk@^4.7.0",
 		"@tstk/builtin-extensions": "npm:@jsr/tstk__builtin-extensions@^1.0.8",
 		"@tstk/utils": "npm:@jsr/tstk__utils@^1.1.2",
 		"@turf/area": "^7.4.0",

package/src/lib/LazyMapLayout.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { Component, Snippet } from "svelte";
+	import LoadScreen from "./LoadScreen.svelte";
+	import LoadError from "./LoadError.svelte";
+	import { loadMonitorDetailPanel, loadMonitorMapLayout } from "./lazy-chunks";
+	import { useMonitorMapRouter } from "./router-context";
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	const { route, basePath } = useMonitorMapRouter();
+
+	let Layout: Component<Props> | null = $state.raw(null);
+	let failed = $state(false);
+
+	function load() {
+		failed = false;
+		loadMonitorMapLayout().then(
+			(module) => (Layout = module.default),
+			(error) => {
+				console.error(error);
+				failed = true;
+			}
+		);
+	}
+
+	load();
+	// On a link straight to a monitor, fetch its panel alongside the layout; the panel's own
+	// wrapper only mounts (and would only ask for it) once the layout has arrived. A failure is
+	// reported by that wrapper when it asks again.
+	if (route.pathname.startsWith(`${basePath}/monitor/`)) {
+		loadMonitorDetailPanel().catch(() => {});
+	}
+</script>
+
+<!-- The layout renders the same LoadScreen from the same shared state, so it carries on
+     from this one without restarting. -->
+{#if Layout}
+	<Layout>{@render children()}</Layout>
+{:else}
+	<div class="relative h-full w-full">
+		<LoadScreen>
+			{#snippet error()}
+				{#if failed}
+					<LoadError message="Couldn't load the map." onretry={load} />
+				{/if}
+			{/snippet}
+		</LoadScreen>
+	</div>
+{/if}

package/src/lib/LazyMonitorDetailPanel.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Component } from "svelte";
+	import LoadError from "./LoadError.svelte";
+	import { loadMonitorDetailPanel } from "./lazy-chunks";
+
+	let Panel: Component | null = $state.raw(null);
+	let failed = $state(false);
+
+	function load() {
+		failed = false;
+		loadMonitorDetailPanel().then(
+			(module) => (Panel = module.default),
+			(error) => {
+				console.error(error);
+				failed = true;
+			}
+		);
+	}
+
+	load();
+</script>
+
+{#if Panel}
+	<Panel />
+{:else}
+	<div class="flex h-full w-full items-center justify-center bg-white">
+		{#if failed}
+			<LoadError message="Couldn't load this monitor." onretry={load} />
+		{:else}
+			<p class="text-sm text-gray-500">Loading…</p>
+		{/if}
+	</div>
+{/if}

package/src/lib/LoadError.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	interface Props {
+		message: string;
+		onretry: () => void;
+	}
+
+	let { message, onretry }: Props = $props();
+</script>
+
+<div class="flex flex-col items-center gap-3 px-4 text-center" role="alert">
+	<p class="text-gray-700">{message}</p>
+	<button
+		type="button"
+		class="rounded-md bg-gray-800 px-4 py-2 text-sm font-medium text-white hover:bg-gray-700"
+		onclick={onretry}
+	>
+		Try again
+	</button>
+</div>

package/src/lib/LoadScreen.svelte

@@ -23,8 +23,16 @@
 </script>
 
 <script lang="ts">
+	import type { Snippet } from "svelte";
 	import type { Attachment } from "svelte/attachments";
 
+	interface Props {
+		/** Rendered under the logo while the load screen is up, e.g. a load failure and a retry */
+		error?: Snippet;
+	}
+
+	let { error }: Props = $props();
+
 	const animationTrigger: Attachment<HTMLDivElement> = () => {
 		loadScreenState.entered = true;
 	};
@@ -32,7 +40,7 @@
 
 {#if loadScreenState.enabled}
 	<div
-		class="absolute top-0 left-0 z-50 flex h-full w-full items-center justify-center overflow-hidden bg-white"
+		class="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-6 overflow-hidden bg-white"
 		{@attach animationTrigger}
 	>
 		<div class="flex justify-around gap-4">
@@ -64,5 +72,6 @@
 				class:opacity-0={!loadScreenState.entered}
 			/>
 		</div>
+		{@render error?.()}
 	</div>
 {/if}

package/src/lib/MonitorDetailPanel.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
-	import type { ComponentProps } from "svelte";
+	import { untrack, type ComponentProps } from "svelte";
 	import type { SJVAirEntryLevel } from "@sjvair/sdk";
 	import DataBox from "$lib/components/DataBox.svelte";
+	import LoadError from "$lib/LoadError.svelte";
 	import MonitorWidgetModal from "$lib/monitors/components/MonitorWidgetModal.svelte";
 	import MonitorSubscriptionManager from "$lib/monitors/components/MonitorSubscriptionManager.svelte";
 	import DataChart from "$lib/data-chart/DataChart.svelte";
 	import { monitorsManager } from "$lib";
+	import { MonitorDetailsState } from "$lib/monitors/monitor-details.svelte";
+	import { choosePanelPollutant } from "$lib/monitors/panel-pollutant";
 	import { useMonitorMapRouter } from "./router-context";
 	import { fetchTempByCoords } from "$lib/weather";
 	import { Colors, valueToColor } from "$lib/colors";
@@ -21,24 +24,75 @@
 	}
 	const { route, navigate, basePath } = useMonitorMapRouter();
 
-	const monitor = $derived(monitorsManager.latest?.get(route.params.id ?? ""));
+	// The panel fetches its own monitor: the map's readings only hold monitors that have a
+	// current reading for the map's pollutant.
+	const details = new MonitorDetailsState();
+	const meta = $derived(monitorsManager.meta);
+	// Shown only once the metadata is in too; labels and levels come from it.
+	const monitor = $derived(details.status === "ready" && meta ? details.monitor : null);
+
+	// Through a $derived: the router replaces `route.params` on every navigation, including
+	// a search-only change or Back to the same monitor, which must not reload the panel.
+	const routeId = $derived(route.params.id);
+	$effect(() => {
+		const id = routeId;
+		if (id) untrack(() => details.load(id));
+	});
+
+	// Bumped whenever the map's readings are replaced, i.e. its 2-minute refresh ran. The data
+	// box follows it; the chart decides for itself whether its date range can have new entries.
+	let refreshTick = $state(0);
+	let seenLatest = untrack(() => monitorsManager.latest);
+
+	$effect(() => {
+		const latest = monitorsManager.latest;
+		// Null while a pollutant change is loading; wait for the readings that follow.
+		if (!latest || latest === seenLatest) return;
+		// The first readings of a cold load arrive alongside this panel's own request.
+		const first = seenLatest === null;
+		seenLatest = latest;
+		if (first) return;
+		untrack(() => {
+			details.refresh();
+			refreshTick++;
+		});
+	});
+
+	const panel = $derived(
+		monitor && meta ? choosePanelPollutant(monitorsManager.pollutant, monitor, meta) : null
+	);
+	const reading = $derived(
+		monitor && panel?.pollutant && panel.hasReading ? monitor.latest[panel.pollutant] : undefined
+	);
+	// Set when the panel shows a different pollutant than the map is coloring by.
+	const pollutantNote = $derived.by(() => {
+		const mapPollutant = monitorsManager.pollutant;
+		if (!meta || !panel?.pollutant || !panel.hasReading || !mapPollutant) return;
+		if (panel.pollutant === mapPollutant) return;
+		const shown = meta.entryType(panel.pollutant).label;
+		const label = meta.entryType(mapPollutant).label;
+		// Mid-sentence: lowercase a plain word ("Ozone"), keep a symbol ("PM2.5") as written.
+		const missing = /^[A-Z][a-z]+$/.test(label) ? label.toLowerCase() : label;
+		return `Showing ${shown}. This monitor has no ${missing} readings.`;
+	});
+
 	let tempData: TempDataBox | undefined = $state();
 	const entryData: ComponentProps<typeof DataBox> | undefined = $derived.by(() => {
-		if (!monitor || !monitorsManager.meta) return;
+		if (!monitor || !meta || !panel?.pollutant || !reading) return;
 
-		const entryType = monitorsManager.meta.entryType(monitor.latest.entry_type);
+		const entryType = meta.entryType(panel.pollutant);
 		const level: SJVAirEntryLevel | undefined = getCurrentLevel(
-			monitor.latest.value,
+			reading.value,
 			entryType.asIter.levels!
 		);
 
-		const updateDuration = monitorsManager.meta.monitorType(monitor.type).expected_interval;
+		const updateDuration = meta.monitorType(monitor.type).expected_interval;
 
 		return {
 			color: level?.color ?? "",
 			header: entryType.label,
 			subheading: `(${updateDuration} avg)`,
-			value: Math.round(parseInt(monitor.latest.value, 10)).toString()
+			value: Math.round(parseInt(reading.value, 10)).toString()
 		};
 	});
 
@@ -49,15 +103,26 @@
 		{ min: 95, color: Colors.red }
 	];
 
+	// Re-run for each refreshed copy of the monitor, as before, but never show one monitor's
+	// temperature on another: cleared when the id changes, and a late answer is dropped.
+	let tempMonitorId: string | undefined;
 	$effect(() => {
-		if (monitor && monitor.position) {
-			fetchTempByCoords(monitor.position.coordinates).then((temperature) => {
+		const current = monitor;
+		const id = current?.id;
+		if (id !== tempMonitorId) {
+			tempMonitorId = id;
+			tempData = undefined;
+		}
+		if (!current?.position) return;
+		fetchTempByCoords(current.position.coordinates)
+			.then((temperature) => {
+				if (untrack(() => monitor?.id) !== id) return;
 				tempData = {
 					value: `${temperature}°F`,
 					color: valueToColor(temperature, tempColors)
 				};
-			});
-		}
+			})
+			.catch(console.error);
 	});
 </script>
 
@@ -104,24 +169,37 @@
 				{@render badge("location-on", monitor.county)}
 				{@render badge("location-searching", monitor.location)}
 			</div>
+			{#if pollutantNote}
+				<p class="text-center text-sm text-gray-600">{pollutantNote}</p>
+			{:else if panel && !panel.hasReading}
+				<p class="text-center text-sm text-gray-600">This monitor has no current readings.</p>
+			{/if}
 		{/if}
 	</div>
 
 	<div class="tall:overflow-y-auto flex flex-col items-center gap-12 p-5 pt-10">
-		{#if monitor}
-			<div class="flex w-full justify-around">
-				{#if tempData}
-					<DataBox color={tempData.color} header="Temperature" value={tempData.value} />
-				{/if}
-				{#if entryData}
-					<DataBox
-						color={entryData.color}
-						header={entryData.header}
-						subheading={entryData.subheading}
-						value={entryData.value}
-					/>
-				{/if}
-			</div>
+		{#if details.status === "not-found"}
+			<p class="text-gray-700" role="alert">Monitor not found.</p>
+		{:else if details.status === "failed"}
+			<LoadError message="Couldn't load this monitor." onretry={() => details.retry()} />
+		{:else if !monitor || !panel}
+			<p class="text-sm text-gray-500">Loading…</p>
+		{:else}
+			{#if tempData || entryData}
+				<div class="flex w-full justify-around">
+					{#if tempData}
+						<DataBox color={tempData.color} header="Temperature" value={tempData.value} />
+					{/if}
+					{#if entryData}
+						<DataBox
+							color={entryData.color}
+							header={entryData.header}
+							subheading={entryData.subheading}
+							value={entryData.value}
+						/>
+					{/if}
+				</div>
+			{/if}
 
 			<div class="tall:block hidden">
 				<MonitorWidgetModal monitorId={monitor.id} />
@@ -131,9 +209,11 @@
 				<MonitorSubscriptionManager monitorId={monitor.id} />
 			{/if}
 
-			<div class="w-full">
-				<DataChart {monitor} />
-			</div>
+			{#if panel.pollutant}
+				<div class="w-full">
+					<DataChart {monitor} pollutant={panel.pollutant} {refreshTick} />
+				</div>
+			{/if}
 
 			<div class="w-full">
 				<h3 class="font-semibold">Data Provided Courtesy Of:</h3>

package/src/lib/MonitorMapLayout.svelte

@@ -14,6 +14,7 @@
 		currentSelection,
 		parsePollutantParam
 	} from "$lib/options/pollutant-param";
+	import LoadError from "$lib/LoadError.svelte";
 	import Legend from "$lib/legend/Legend.svelte";
 	import {
 		fireSmokeLegendSections,
@@ -61,7 +62,19 @@
 		monitorsMapIntegration.enabled = false;
 	}
 
-	monitorsManager.init(route.search.pollutant);
+	// The load screen stays up until the monitors load, so a failure has to be shown on it.
+	let loadFailed = $state(false);
+
+	function loadMonitors() {
+		loadFailed = false;
+		// A rejected init() can be retried: a later call starts a fresh run.
+		monitorsManager.init(route.search.pollutant).catch((error) => {
+			console.error(error);
+			loadFailed = true;
+		});
+	}
+
+	loadMonitors();
 	// A previous instance of this layout stopped polling in onDestroy; init() is a no-op by now.
 	monitorsManager.resumeAutoUpdate();
 	collocationSitesManager.init();
@@ -129,6 +142,11 @@
 	knownRoutes={[`${basePath}/monitor/`]}
 	{basePath}
 >
+	{#snippet loadError()}
+		{#if loadFailed}
+			<LoadError message="Couldn't load air monitors." onretry={loadMonitors} />
+		{/if}
+	{/snippet}
 	{#snippet menu()}
 		<OptionsGroup>
 			<PollutantMenu />

package/src/lib/abort.ts

@@ -0,0 +1,59 @@
+export type SignalOptions = { signal?: AbortSignal };
+
+/**
+ * A signal that aborts as soon as any input does, with that input's reason. Already aborted if
+ * any input is. Undefined inputs are ignored. Call `dispose()` to drop the listeners.
+ */
+export function anySignal(...signals: Array<AbortSignal | undefined>): {
+	signal: AbortSignal;
+	dispose(): void;
+} {
+	const controller = new AbortController();
+	const cleanups: Array<() => void> = [];
+	const dispose = () => {
+		for (const cleanup of cleanups.splice(0)) cleanup();
+	};
+
+	for (const input of signals) {
+		if (!input) continue;
+		if (input.aborted) {
+			controller.abort(input.reason);
+			dispose();
+			break;
+		}
+		const onAbort = () => {
+			controller.abort(input.reason);
+			dispose();
+		};
+		input.addEventListener("abort", onAbort, { once: true });
+		cleanups.push(() => input.removeEventListener("abort", onAbort));
+	}
+
+	return { signal: controller.signal, dispose };
+}
+
+/**
+ * Settles like `promise`, unless `signal` aborts first, in which case it rejects with
+ * `signal.reason`. The inner promise's later outcome is swallowed.
+ */
+export function untilAborted<T>(promise: Promise<T>, signal: AbortSignal | undefined): Promise<T> {
+	if (!signal) return promise;
+	if (signal.aborted) {
+		promise.catch(() => {});
+		return Promise.reject(signal.reason);
+	}
+	return new Promise<T>((resolve, reject) => {
+		const onAbort = () => reject(signal.reason);
+		signal.addEventListener("abort", onAbort, { once: true });
+		promise.then(
+			(value) => {
+				signal.removeEventListener("abort", onAbort);
+				resolve(value);
+			},
+			(error) => {
+				signal.removeEventListener("abort", onAbort);
+				reject(error);
+			}
+		);
+	});
+}

package/src/lib/collocation-sites/collocations.svelte.ts

@@ -1,22 +1,25 @@
 import { getCollocationSites, type CollocationSite } from "@sjvair/sdk";
+import type { SignalOptions } from "$lib/abort";
 
 class CollocationSitesManager {
 	initialized: boolean = $state(false);
 
 	collocationSites: Array<CollocationSite> | null = $state(null);
 
-	async init(): Promise<void> {
+	async init({ signal }: SignalOptions = {}): Promise<void> {
 		if (this.initialized) return;
+		if (signal?.aborted) throw signal.reason;
 
-		this.collocationSites = await getCollocationSites();
+		this.collocationSites = await getCollocationSites({ signal });
 
 		this.initialized = true;
 	}
 
-	async update(): Promise<void> {
+	async update({ signal }: SignalOptions = {}): Promise<void> {
 		if (!this.initialized) return;
+		if (signal?.aborted) throw signal.reason;
 
-		this.collocationSites = await getCollocationSites();
+		this.collocationSites = await getCollocationSites({ signal });
 	}
 }
 

package/src/lib/core.ts

@@ -13,5 +13,5 @@ export {
 	type MonitorMapRouterApi
 } from "./router-context";
 export { monitorsManager } from "./monitors/monitors.svelte.js";
-export type { MonitorsManager } from "./monitors/monitors.svelte.js";
+export type { MonitorsManager, MonitorsInitOptions } from "./monitors/monitors.svelte.js";
 export type { MonitorsDataSource, MonitorsPollutant } from "./monitors/types";