@sjvair/monitor-map 4.0.3 → 4.2.0

package/src/lib/monitors/monitors-map-integration.svelte.ts

@@ -6,7 +6,7 @@ import {
 import type { MonitorType, SJVAirEntryLevel } from "@sjvair/sdk";
 import { untrack } from "svelte";
 import type { Geometry } from "geojson";
-import { mapManager } from "$lib/map/map.svelte";
+import { mapManager } from "$lib/map/map-manager.svelte.js";
 import { clickManager, type ClickHandler } from "$lib/map/integrations/click-manager";
 import { MapIconLayerIntegration } from "$lib/map/integrations/map-geojson-integration.svelte";
 import { monitorsManager } from "./monitors.svelte";
@@ -274,8 +274,9 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 			clickManager.unregister([this.referenceId]);
 			this.tooltipManager.disable();
 			this.renderer.remove();
-			this.icons.loadIcons().then(() => {
-				if (mapManager.styleLoading) return;
+			// Clustering may be toggled again before the icons arrive; only the latest apply runs.
+			this.supersedePending();
+			this.whenIconsLoad(() => {
 				this.renderer.apply(this.handleMonitorClick);
 				this.tooltipManager.enable();
 				this.applySelectedState();
@@ -286,8 +287,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 			this.tooltipManager.enable();
 			clickManager.unregister([this.referenceId]);
 			super.apply();
-			this.icons.loadIcons().then(() => {
-				if (mapManager.styleLoading) return;
+			this.whenIconsLoad(() => {
 				clickManager.register([this.referenceId], this.handleMonitorClick);
 				this.applySelectedState();
 			});

package/src/lib/monitors/monitors.svelte.ts

@@ -10,7 +10,15 @@ import {
 import { XMap } from "@tstk/builtin-extensions";
 import { Interval } from "@tstk/utils";
 import { untrack } from "svelte";
-import type { MonitorsDataSource } from "./types";
+import type { MonitorsDataSource, MonitorsPollutant } from "./types";
+
+export interface MonitorsInitOptions {
+	/**
+	 * Start the 2-minute polling once the initial load finishes. Defaults to true; pass false to
+	 * load the data without showing a map (`resumeAutoUpdate()` starts polling later).
+	 */
+	autoUpdate?: boolean;
+}
 
 class MonitorsManager implements MonitorsDataSource {
 	autoUpdate: Interval = new Interval(async () => await this.update(), 2 * 60 * 1000);
@@ -27,6 +35,10 @@ class MonitorsManager implements MonitorsDataSource {
 		this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null
 	);
 
+	#initPromise: Promise<void> | null = null;
+	#requestedPollutant: MonitorsPollutant | null = null;
+	#requestedAutoUpdate = false;
+
 	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
@@ -48,25 +60,96 @@ class MonitorsManager implements MonitorsDataSource {
 		});
 	}
 
-	async init(urlPollutant?: string | number | boolean): Promise<void> {
-		if (this.initialized) return;
+	/**
+	 * 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> {
+		if (this.initialized) return Promise.resolve();
 
-		[this.list, this.meta] = await Promise.all([getMonitorsList(), getMonitorsMeta()]);
+		if (options.autoUpdate !== false) this.#requestedAutoUpdate = true;
 
-		this.pollutant =
-			urlPollutant === "pm25" || urlPollutant === "o3" ? urlPollutant : this.meta.default_pollutant;
-		this.latest = await getMonitorsLatestMap(this.pollutant);
-		this.autoUpdate.start();
+		if (urlPollutant === "pm25" || urlPollutant === "o3") {
+			this.#requestedPollutant = urlPollutant;
+		}
+
+		this.#initPromise ??= this.#runInit().finally(() => {
+			this.#initPromise = null;
+			this.#requestedPollutant = null;
+			this.#requestedAutoUpdate = false;
+		});
+
+		return this.#initPromise;
+	}
+
+	async #runInit(): Promise<void> {
+		// The pollutant the latest readings were requested for.
+		let fetchedPollutant = this.#requestedPollutant;
+
+		const metaRequest = getMonitorsMeta();
+		const listAndMeta = Promise.all([getMonitorsList(), metaRequest]).then(([list, meta]) => {
+			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)
+			: metaRequest.then((meta) => {
+					const pollutant = this.#requestedPollutant ?? meta.default_pollutant;
+					fetchedPollutant = pollutant;
+					return getMonitorsLatestMap(pollutant);
+				});
+
+		// 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);
+			fetchedPollutant = wanted;
+			wanted = this.#requestedPollutant ?? meta.default_pollutant;
+		}
+
+		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(): void {
+		if (!this.initialized || this.autoUpdate.isActive) return;
+
+		this.update().catch(console.error);
+		this.autoUpdate.start();
+	}
+
 	async update(): Promise<void> {
 		if (!this.initialized) return;
 
-		[this.list, this.latest] = await Promise.all([
+		const pollutant = this.pollutant;
+		const [list, latest] = await Promise.all([
 			getMonitorsList(),
-			getMonitorsLatestMap(this.pollutant || this.meta?.default_pollutant || "pm25")
+			getMonitorsLatestMap(pollutant || this.meta?.default_pollutant || "pm25")
 		]);
+
+		// 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;
 	}
 }
 

package/src/lib/monitors/panel-pollutant.ts

@@ -0,0 +1,76 @@
+/** The pollutants the detail panel can show, in order of preference. */
+export const PANEL_POLLUTANTS = ["pm25", "o3"] as const;
+export type PanelPollutant = (typeof PANEL_POLLUTANTS)[number];
+
+/** The slice of the SDK's `MonitorDetails` this module reads. */
+export interface PanelMonitor {
+	type: string;
+	is_active: boolean;
+	// Only the panel pollutants are read; the SDK's `latest` has more entry types, without an
+	// index signature.
+	latest: Partial<Record<PanelPollutant, { value?: string }>>;
+}
+
+/** The slice of the SDK's `MonitorsMeta` this module reads. */
+export interface PanelMeta {
+	monitors: Record<string, { entries: Record<string, unknown> } | undefined>;
+}
+
+export interface PanelPollutantChoice {
+	/** Null when the monitor has no reading and its type publishes neither pollutant. */
+	pollutant: PanelPollutant | null;
+	/** Whether the monitor has a current reading for `pollutant`. */
+	hasReading: boolean;
+}
+
+/** The panel pollutants this monitor has a current, numeric reading for. */
+export function readingPollutants(monitor: Pick<PanelMonitor, "latest">): PanelPollutant[] {
+	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: string, meta: PanelMeta): PanelPollutant[] {
+	const entries = meta.monitors[monitorType]?.entries ?? {};
+	return PANEL_POLLUTANTS.filter((pollutant) => {
+		const entry = entries[pollutant] as { published?: boolean } | undefined;
+		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: PanelPollutant | null,
+	monitor: PanelMonitor,
+	meta: PanelMeta
+): PanelPollutantChoice {
+	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/src/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/src/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/src/lib/search/Search.svelte

@@ -3,7 +3,7 @@
 	import { Marker } from "@maptiler/sdk";
 	import { MapPinIcon, SearchIcon } from "@lucide/svelte";
 	import { useMonitorMapRouter } from "../router-context";
-	import { mapManager } from "$lib/map/map.svelte";
+	import { mapManager } from "$lib/map/map-manager.svelte.js";
 	import { debounce } from "$lib/utils";
 	import { monitorSearch, geocode, type SearchResult } from "./service";
 	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";

package/src/lib/shared-load.ts

@@ -0,0 +1,15 @@
+/**
+ * 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<T>(load: () => Promise<T>): () => Promise<T> {
+	let pending: Promise<T> | null = null;
+
+	return () => {
+		pending ??= load().catch((error: unknown) => {
+			pending = null;
+			throw error;
+		});
+		return pending;
+	};
+}