@sjvair/monitor-map 4.0.3 → 4.2.0

package/src/lib/data-chart/chart-utils.ts

@@ -1,4 +1,4 @@
-import { monitorsManager } from "../monitors/monitors.svelte";
+import type { LevelColors } from "./level-colors";
 import { tooltipsPlugin, uPlotCursorConfig } from "./tooltip";
 import { fromUnixTime, getUnixTime, isToday, isAfter } from "date-fns";
 import type uPlot from "uplot";
@@ -6,15 +6,6 @@ import type { MonitorType } from "@sjvair/sdk";
 
 const PM25_AVG_60_STROKE = "3572b0";
 
-function getColors(): Array<[number, string]> {
-	const levels = monitorsManager.levels ?? [];
-	const colors = levels.map((level) => [level.range[0], level.color.replace(/^#/, "")]) as Array<
-		[number, string]
-	>;
-	colors.push([Infinity, "000000"]);
-	return colors;
-}
-
 const baseXSeriesConfig = {};
 
 const baseYSeriesConfig = {
@@ -23,26 +14,33 @@ const baseYSeriesConfig = {
 	width: 1
 };
 
-const pm25SeriesConfig = {
+/** The level stops plus a final black stop, so values above the top level still get a color. */
+function gradientStops(colors: LevelColors): LevelColors {
+	return [...colors, [Infinity, "000000"]];
+}
+
+const pm25SeriesConfig = (stops: LevelColors) => ({
 	...baseYSeriesConfig,
 	label: "Real Time",
 	width: 2,
-	stroke: (u: uPlot) => scaleGradient(u, "y", 1, getColors(), true)
-};
+	stroke: (u: uPlot) => scaleGradient(u, "y", 1, stops, true)
+});
 
-const pm25Avg60SeriesConfig = {
+const pm25Avg60SeriesConfig = (stops: LevelColors) => ({
 	...baseYSeriesConfig,
 	label: "60 Minute Average",
-	stroke: (u: uPlot) => autograd(u, PM25_AVG_60_STROKE)
-};
+	stroke: (u: uPlot) => autograd(u, PM25_AVG_60_STROKE, stops)
+});
 
 export function getChartConfig(
 	sourceName: MonitorType,
 	maxDiff: number,
 	width: number,
-	height: number
+	height: number,
+	colors: LevelColors,
+	label: string
 ): uPlot.Options {
-	const series: Array<uPlot.Series> = getSeriesConfigs(sourceName);
+	const series: Array<uPlot.Series> = getSeriesConfigs(sourceName, gradientStops(colors));
 	const getStroke = (u: uPlot, sIdx: number): string => {
 		const stroke = series[sIdx].stroke! as (u: uPlot, sIdx: number) => string | CanvasGradient;
 		return stroke(u, sIdx) as string;
@@ -51,7 +49,7 @@ export function getChartConfig(
 	return {
 		width,
 		height,
-		cursor: uPlotCursorConfig.get(),
+		cursor: uPlotCursorConfig.get(colors),
 		// @ts-expect-error: select missing pseudo "required" options
 		select: {
 			show: false
@@ -94,7 +92,7 @@ export function getChartConfig(
 				}
 			},
 			{
-				label: monitorsManager.pollutant === "pm25" ? "PM 2.5" : "Ozone",
+				label,
 				side: 3,
 				values: (_: uPlot, ticks: number[]) =>
 					ticks.map((v: number) => v.toFixed(maxDiff < 5 ? 1 : 0))
@@ -106,9 +104,8 @@ export function getChartConfig(
 	};
 }
 
-function getSeriesConfigs(monitorType: MonitorType) {
-	const singleSeriesConfig = Object.assign({}, pm25Avg60SeriesConfig);
-	singleSeriesConfig.width = 2;
+function getSeriesConfigs(monitorType: MonitorType, stops: LevelColors) {
+	const singleSeriesConfig = { ...pm25Avg60SeriesConfig(stops), width: 2 };
 
 	switch (monitorType) {
 		case "airnow":
@@ -120,15 +117,15 @@ function getSeriesConfigs(monitorType: MonitorType) {
 
 		case "airgradient":
 		case "purpleair":
-			return [baseXSeriesConfig, pm25SeriesConfig];
+			return [baseXSeriesConfig, pm25SeriesConfig(stops)];
 	}
 }
 
-function autograd(u: uPlot, fallback: string) {
+function autograd(u: uPlot, fallback: string, stops: LevelColors) {
 	if (u.series.length > 2) {
 		return fallback;
 	}
-	return scaleGradient(u, "y", 1, getColors(), true);
+	return scaleGradient(u, "y", 1, stops, true);
 }
 
 function scaleGradient(

package/src/lib/data-chart/level-colors.ts

@@ -0,0 +1,13 @@
+/** Color stops for a chart: each level's lower bound and its hex color without the `#`. */
+export type LevelColors = Array<[number, string]>;
+
+// `range` is loose on purpose: the SDK types it as a tuple with an open tail, and only its
+// first member (the level's lower bound) is read.
+export function levelColors(
+	levels: ReadonlyArray<{
+		range: readonly [number, ...unknown[]] | readonly number[];
+		color: string;
+	}>
+): LevelColors {
+	return levels.map((level) => [level.range[0], level.color.replace(/^#/, "")]);
+}

package/src/lib/data-chart/requests.ts

@@ -1,14 +1,18 @@
-import { getMonitorEntries, type MonitorEntry, type MonitorLatestType } from "@sjvair/sdk";
+import { getMonitorEntries, type MonitorDetails, type MonitorEntry } from "@sjvair/sdk";
 import { getUnixTime, parseISO, differenceInMinutes, addMinutes } from "date-fns";
-import { monitorsManager } from "../monitors/monitors.svelte";
+import type { PanelPollutant } from "../monitors/panel-pollutant";
 import type { DateRange } from "./DateRange";
 
+/** The monitor fields the chart reads. */
+export type ChartMonitor = Pick<MonitorDetails, "id" | "name" | "type" | "data_source">;
+
 export async function fetchChartData(
-	m: MonitorLatestType<"pm25" | "o3">,
-	d: DateRange
+	m: ChartMonitor,
+	d: DateRange,
+	entryType: PanelPollutant
 ): Promise<uPlot.AlignedData> {
 	return await getMonitorEntries({
-		entryType: monitorsManager.pollutant ?? "pm25",
+		entryType,
 		monitorId: m.id,
 		timestampGte: d.start,
 		timestampLte: d.end

package/src/lib/data-chart/tooltip.ts

@@ -1,12 +1,5 @@
 import { format, fromUnixTime } from "date-fns";
-import { monitorsManager } from "../monitors/monitors.svelte";
-
-function getColors(): Array<[number, string]> {
-	return (monitorsManager.levels ?? []).map((level) => [
-		level.range[0],
-		level.color.replace(/^#/, "")
-	]) as Array<[number, string]>;
-}
+import type { LevelColors } from "./level-colors";
 
 let cursLeft = -100;
 let cursTop = -100;
@@ -16,7 +9,7 @@ export const uPlotCursorConfig = {
 		cursLeft = left;
 		cursTop = top;
 	},
-	get: (): uPlot.Cursor => ({
+	get: (colors: LevelColors): uPlot.Cursor => ({
 		left: cursLeft,
 		top: cursTop,
 		y: false,
@@ -24,7 +17,6 @@ export const uPlotCursorConfig = {
 			size: 7,
 			fill: (u: uPlot, sIdx: number) => {
 				const xIdx = u.cursor.idxs![sIdx];
-				const colors = getColors();
 
 				if (xIdx != null && u.series.length >= 2 && sIdx === 1) {
 					const val = u.data[sIdx][xIdx]!;

package/src/lib/ev-stations/ev-stations-cluster-renderer.ts

@@ -1,6 +1,6 @@
 import type { GeoJSONSource, MapLayerEventType, Popup } from "@maptiler/sdk";
 import type { Point } from "geojson";
-import { mapManager } from "$lib/map/map.svelte";
+import { mapManager } from "$lib/map/map-manager.svelte.js";
 import { mountPopup } from "$lib/map/utils";
 import { clickManager, type ClickHandler } from "$lib/map/integrations/click-manager";
 import { TooltipManager } from "$lib/map/integrations/tooltip.svelte";

package/src/lib/ev-stations/ev-stations-map-integration.svelte.ts

@@ -6,7 +6,7 @@ import type {
 } from "@maptiler/sdk";
 import type { Geometry } from "geojson";
 import { untrack } from "svelte";
-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 { MapDisplayOption } from "$lib/map/integrations/map-display-option.svelte";
@@ -188,8 +188,9 @@ class EvStationsMapIntegration
 			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.handleStationClick);
 				this.tooltipManager.enable();
 			});
@@ -198,8 +199,7 @@ class EvStationsMapIntegration
 			this.tooltipManager.disable();
 			clickManager.unregister([this.referenceId]);
 			super.apply();
-			this.icons.loadIcons().then(() => {
-				if (mapManager.styleLoading) return;
+			this.whenIconsLoad(() => {
 				clickManager.register([this.referenceId], this.handleStationClick);
 				this.tooltipManager.enable();
 			});

package/src/lib/hms/hms-fire-map-integration.svelte.ts

@@ -1,7 +1,7 @@
 import type { Map as MaptilerMap } from "@maptiler/sdk";
 import type { Feature } from "geojson";
 import type { Point } from "geojson";
-import { mapManager } from "$lib/map/map.svelte";
+import { mapManager } from "$lib/map/map-manager.svelte.js";
 import { MapIconLayerIntegration } from "$lib/map/integrations/map-geojson-integration.svelte";
 import { hmsManager } from "./hms.svelte";
 import { HMSFireIconManager, getTierIconId } from "./hms-fire-icon-manager";

package/src/lib/hms/hms-smoke-map-integration.svelte.ts

@@ -1,7 +1,7 @@
 import type { Map as MaptilerMap } from "@maptiler/sdk";
 import type { Feature, MultiPolygon } from "geojson";
 import type { HMSSmokeGeoJSON } from "@sjvair/sdk/hms";
-import { mapManager } from "$lib/map/map.svelte";
+import { mapManager } from "$lib/map/map-manager.svelte.js";
 import { MapGeoJSONIntegration } from "$lib/map/integrations/map-geojson-integration.svelte";
 import { hmsManager } from "./hms.svelte";
 import type { SmokeDensityStyle } from "$lib/legend/legend-data";

package/src/lib/index.ts

@@ -23,6 +23,11 @@
  *
  * <Router />
  * ```
+ *
+ * A host that must stay light at startup imports from the subpath entries instead:
+ * `provideMonitorMapRouter`/`monitorsManager` from "@sjvair/monitor-map/core" (no map), and
+ * `monitorMapRoutes` from "@sjvair/monitor-map/routes" (same tree, lazy layout and routes).
+ * `monitorMapRoutes` from this entry stays eager.
  */
 export { monitorMapRoutes } from "./routes";
 export {
@@ -34,15 +39,15 @@ export {
 
 // State managers
 export { monitorsManager } from "./monitors/monitors.svelte";
-export type { MonitorsManager } from "./monitors/monitors.svelte";
+export type { MonitorsManager, MonitorsInitOptions } from "./monitors/monitors.svelte";
 export { collocationSitesManager } from "./collocation-sites/collocations.svelte";
 export type { CollocationSitesManager } from "./collocation-sites/collocations.svelte";
 export { evStationsManager } from "./ev-stations/ev-stations.svelte";
 export type { EvStationsManager } from "./ev-stations/ev-stations.svelte";
 export { hmsManager } from "./hms/hms.svelte";
 export type { HMSManager } from "./hms/hms.svelte";
-export { mapManager, DefaultMapStyle, initializeMap } from "./map/map.svelte";
-export type { MapManager } from "./map/map.svelte";
+export { mapManager, DefaultMapStyle, initializeMap } from "./map/map-manager.svelte.js";
+export type { MapManager } from "./map/map-manager.svelte.js";
 
 // Map integrations
 export {

package/src/lib/lazy-chunks.ts

@@ -0,0 +1,7 @@
+import { sharedLoad } from "./shared-load";
+
+// The heavy chunks behind the lazy routes entry (`./lazy-routes.ts`). They are imported here,
+// not in the wrapper components that await them: sv-router treats any function whose source
+// contains `() => import(...)` as a lazy route, and a compiled component is such a function.
+export const loadMonitorMapLayout = sharedLoad(() => import("./MonitorMapLayout.svelte"));
+export const loadMonitorDetailPanel = sharedLoad(() => import("./MonitorDetailPanel.svelte"));

package/src/lib/lazy-routes.ts

@@ -0,0 +1,20 @@
+import type { Routes } from "sv-router";
+import LazyMapLayout from "./LazyMapLayout.svelte";
+import LazyMonitorDetailPanel from "./LazyMonitorDetailPanel.svelte";
+import MainMapView from "./MainMapView.svelte";
+
+/**
+ * Lazy routes entry (`@sjvair/monitor-map/routes`): the same route tree as the main entry's
+ * `monitorMapRoutes`, but the map layout and the monitor panel load on demand, so a host
+ * router can reference it at startup without loading the map.
+ *
+ * The components here are light wrappers that load the real ones themselves
+ * (`./lazy-chunks.ts`) and show the load screen meanwhile. They are deliberately not
+ * `() => import(...)` routes: sv-router renders nothing for a route until every lazy component
+ * on it has loaded, which left the outlet empty on a cold link into the map.
+ */
+export const monitorMapRoutes: Routes = {
+	layout: LazyMapLayout,
+	"/": MainMapView,
+	"/monitor/:id": LazyMonitorDetailPanel
+};

package/src/lib/map/Map.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import "@maptiler/sdk/dist/maptiler-sdk.css";
-	import { initializeMap } from "./map.svelte";
+	import { initializeMap } from "./map-manager.svelte.js";
 	import { integrationsManager } from "$lib/map/integrations/integrations-manager";
 	import type { SomeMapIntegration } from "./integrations/types";
 

package/src/lib/map/MapShell.svelte

@@ -11,6 +11,11 @@
 		 * is true.
 		 */
 		ready: boolean;
+		/**
+		 * Rendered on the load screen, under the logo, for as long as the load screen is up.
+		 * Render it only when the caller's initial load failed (e.g. a message and a retry).
+		 */
+		loadError?: Snippet;
 		/** True when the routed detail panel (`children`) should be visible */
 		panelOpen: boolean;
 		/**
@@ -53,12 +58,13 @@
 	import LoadScreen, { disable as disableLoadScreen } from "$lib/LoadScreen.svelte";
 	import Map from "$lib/map/Map.svelte";
 	import OptionsBar from "$lib/options/OptionsBar.svelte";
-	import { mapManager } from "$lib/map/map.svelte";
+	import { mapManager } from "$lib/map/map-manager.svelte.js";
 	import { useMonitorMapRouter } from "$lib/router-context";
 
 	let {
 		integrations,
 		ready,
+		loadError,
 		panelOpen,
 		knownRoutes = [],
 		menu,
@@ -74,7 +80,7 @@
 
 	$effect(() => {
 		// mapManager.map is only ever assigned once its own initial "load" has
-		// already fired (see initializeMap in map.svelte.ts), so by the time this
+		// already fired (see initializeMap in map-manager.svelte.ts), so by the time this
 		// effect sees a non-null map, it's already safe to reveal — waiting for a
 		// further "idle" event here is unreliable since one may never fire again.
 		if (mapManager.map && ready) {
@@ -123,7 +129,7 @@
 </script>
 
 <div class="relative flex h-full w-full flex-col md:flex-row">
-	<LoadScreen />
+	<LoadScreen error={loadError} />
 	<div class="relative flex-1 overflow-hidden">
 		<Map {integrations} />
 		{@render overlays?.()}

package/src/lib/map/integrations/click-manager.ts

@@ -1,5 +1,5 @@
 import type { MapGeoJSONFeature, MapMouseEvent } from "@maptiler/sdk";
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 
 export type ClickHandler = (features: MapGeoJSONFeature[], evt: MapMouseEvent & object) => void;
 

package/src/lib/map/integrations/map-geojson-integration.svelte.ts

@@ -2,7 +2,7 @@ import type { Map as MaptilerMap } from "@maptiler/sdk";
 import type { Feature, Geometry } from "geojson";
 import type { MapIconManager } from "./map-icon-manager";
 import { MapLayerIntegration } from "./map-layer-integration.svelte";
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 
 export abstract class MapGeoJSONIntegration<
 	T = Record<string, unknown>
@@ -33,16 +33,45 @@ export abstract class MapIconLayerIntegration<
 	T = Record<string, unknown>
 > extends MapGeoJSONIntegration<T> {
 	abstract icons: MapIconManager;
+	private generation = 0;
+
+	/**
+	 * Drops every callback still waiting on icons. `apply()` and `remove()` call it, so a
+	 * subclass overriding `apply()` without calling `super.apply()` first must call it itself.
+	 */
+	protected supersedePending(): void {
+		this.generation++;
+	}
+
+	/**
+	 * Runs `run` once the icons have loaded, unless an `apply()` or `remove()` has happened
+	 * since (the state it was scheduled for is gone) or a basemap change is in flight (the
+	 * refresh on "style.load" re-applies).
+	 */
+	protected whenIconsLoad(run: () => void): void {
+		const generation = this.generation;
+		this.icons
+			.loadIcons()
+			.then(() => {
+				if (generation !== this.generation || mapManager.styleLoading) return;
+				run();
+			})
+			.catch(console.error);
+	}
 
 	apply() {
 		if (!mapManager.map) return;
 
-		this.icons.loadIcons().then(() => {
-			// A basemap change started while icons loaded; the refresh on "style.load" re-applies.
-			if (mapManager.styleLoading) return;
+		this.supersedePending();
+		this.whenIconsLoad(() => {
 			this.removeLayerAndSource();
 			mapManager.map?.addSource(this.referenceId, this.mapSource);
 			super.apply();
 		});
 	}
+
+	remove() {
+		this.supersedePending();
+		super.remove();
+	}
 }

package/src/lib/map/integrations/map-icon-manager.ts

@@ -1,5 +1,5 @@
 import type { Map as MaptilerMap } from "@maptiler/sdk";
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 import type { MapImageIcon } from "./types";
 import { SvelteMap } from "svelte/reactivity";
 

package/src/lib/map/integrations/map-layer-integration.svelte.ts

@@ -1,6 +1,6 @@
 import type { Map as MaptilerMap } from "@maptiler/sdk";
 import { untrack } from "svelte";
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 import { MapIntegration } from "./map-integration.svelte";
 
 export abstract class MapLayerIntegration extends MapIntegration {

package/src/lib/map/integrations/tooltip.svelte.ts

@@ -1,5 +1,5 @@
 import type { MapLayerEventType, Popup } from "@maptiler/sdk";
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 import { XMap } from "@tstk/builtin-extensions";
 
 export type TooltipBuilder = (evt: MapLayerEventType["mousemove"] & object) => Popup | void;

package/src/lib/map/map-style-state.svelte.ts

@@ -1,5 +1,5 @@
 import type { MapStyleVariant, ReferenceMapStyle } from "@maptiler/sdk";
-import { DefaultMapStyle, mapManager } from "./map.svelte";
+import { DefaultMapStyle, mapManager } from "./map-manager.svelte.js";
 import { integrationsManager } from "./integrations/integrations-manager";
 import { variantForStyle } from "./basemap";
 
@@ -7,7 +7,12 @@ import { variantForStyle } from "./basemap";
 class MapStyleState {
 	referenceStyle: ReferenceMapStyle = $state.raw(DefaultMapStyle.getReferenceStyle());
 	variant: MapStyleVariant = $state.raw(DefaultMapStyle);
-	private applied: MapStyleVariant = DefaultMapStyle;
+	// The variant last handed to setStyle (loaded or still loading); null once a load has failed
+	// with nothing left to fall back to, so that any later selection is tried again.
+	private applied: MapStyleVariant | null = DefaultMapStyle;
+	// The variant the map last finished loading, which a failed change falls back to.
+	private loaded: MapStyleVariant = DefaultMapStyle;
+	private stopWaiting: (() => void) | null = null;
 
 	selectReferenceStyle(style: ReferenceMapStyle): void {
 		this.referenceStyle = style;
@@ -25,17 +30,64 @@ class MapStyleState {
 	}
 
 	private apply(): void {
+		if (!mapManager.map || this.variant === this.applied) return;
+		this.load(this.variant);
+	}
+
+	private load(variant: MapStyleVariant): void {
 		const map = mapManager.map;
-		if (!map || this.variant === this.applied) return;
-		this.applied = this.variant;
+		if (!map) return;
+		// A newer change supersedes one still in flight.
+		this.stopWaiting?.();
+		this.applied = variant;
+
 		// setStyle wipes every custom source/layer; re-add enabled integrations once it loads.
-		map.once("style.load", () => {
+		const onLoad = () => {
+			this.stopWaiting?.();
+			this.loaded = variant;
 			mapManager.styleLoading = false;
 			integrationsManager.refresh();
-		});
+		};
+		// "error" also fires for tiles, sprites and glyphs; only the style document failing means
+		// the change failed.
+		const onError = (event: { error?: unknown }) => {
+			if (!isRequestFor(event.error, variant.getExpandedStyleURL())) return;
+			this.stopWaiting?.();
+			this.recover(variant);
+		};
+		this.stopWaiting = () => {
+			map.off("style.load", onLoad);
+			map.off("error", onError);
+			this.stopWaiting = null;
+		};
+		map.on("style.load", onLoad);
+		map.on("error", onError);
 		mapManager.styleLoading = true;
-		map.setStyle(this.variant);
+		map.setStyle(variant);
 	}
+
+	/**
+	 * A style that fails to load leaves the map with no style at all, so go back to the last one
+	 * that loaded and make the selection say so. When that one fails too (e.g. offline) there is
+	 * nothing to draw on: `styleLoading` stays set, since integrations cannot add layers to a
+	 * missing style, and the next selection starts a fresh attempt.
+	 */
+	private recover(failed: MapStyleVariant): void {
+		if (failed === this.loaded) {
+			this.applied = null;
+			return;
+		}
+		this.variant = this.loaded;
+		this.referenceStyle = this.loaded.getReferenceStyle();
+		this.load(this.loaded);
+	}
+}
+
+/** Whether a map "error" event's error is a failed request for `url`, ignoring the query. */
+function isRequestFor(error: unknown, url: string): boolean {
+	const failed = (error as { url?: unknown } | null | undefined)?.url;
+	if (typeof failed !== "string") return false;
+	return failed.split("?")[0] === url.split("?")[0];
 }
 
 export const mapStyleState = new MapStyleState();

package/src/lib/monitors/components/MonitorClusterTooltip.svelte

@@ -6,7 +6,7 @@
 	import { area } from "@turf/area";
 	import { convertArea } from "@turf/helpers";
 	import DataBox from "$lib/components/DataBox.svelte";
-	import { mapManager } from "$lib/map/map.svelte";
+	import { mapManager } from "$lib/map/map-manager.svelte.js";
 	import type { MonitorClusterMapFeature, MonitorMapFeature } from "../types";
 	import { monitorsManager } from "../monitors.svelte";
 	import { getCurrentLevel } from "../monitor-utils";

package/src/lib/monitors/monitor-details.svelte.ts

@@ -0,0 +1,66 @@
+import { getMonitorDetails, type MonitorDetails } from "@sjvair/sdk";
+
+export type MonitorDetailsStatus = "loading" | "ready" | "not-found" | "failed";
+
+/**
+ * One monitor, fetched by id. Unlike `monitorsManager.latest`, this does not depend on the
+ * map's pollutant or on the monitor being active, so the detail panel can show any monitor.
+ */
+export class MonitorDetailsState {
+	monitor: MonitorDetails | null = $state.raw(null);
+	status: MonitorDetailsStatus = $state("loading");
+
+	#id: string | null = null;
+	// Bumped per request; a response for anything but the latest request is dropped.
+	#request = 0;
+
+	async load(id: string): Promise<void> {
+		this.#id = id;
+		const request = ++this.#request;
+		this.monitor = null;
+		this.status = "loading";
+
+		try {
+			const monitor = await getMonitorDetails(id);
+			if (request !== this.#request) return;
+			this.monitor = monitor;
+			this.status = "ready";
+		} catch (error) {
+			if (request !== this.#request) return;
+			if (isNotFound(error)) {
+				this.status = "not-found";
+				return;
+			}
+			console.error(error);
+			this.status = "failed";
+		}
+	}
+
+	/** Re-fetches the monitor already shown. A failure keeps the data on screen. */
+	async refresh(): Promise<void> {
+		if (this.status !== "ready" || this.#id === null) return;
+		const request = ++this.#request;
+
+		try {
+			const monitor = await getMonitorDetails(this.#id);
+			if (request !== this.#request) return;
+			this.monitor = monitor;
+		} catch (error) {
+			if (request === this.#request) console.error(error);
+		}
+	}
+
+	retry(): Promise<void> {
+		return this.#id === null ? Promise.resolve() : this.load(this.#id);
+	}
+}
+
+/**
+ * The SDK rejects a failed request with `cause.result.status` set to the HTTP status, or,
+ * when it could not parse the error body, with the `Response` itself as the cause.
+ */
+function isNotFound(error: unknown): boolean {
+	const cause = (error as { cause?: { status?: unknown; result?: { status?: unknown } } } | null)
+		?.cause;
+	return cause?.result?.status === 404 || cause?.status === 404;
+}

package/src/lib/monitors/monitors-cluster-renderer.ts

@@ -7,7 +7,7 @@ import type {
 } from "@maptiler/sdk";
 import type { Point } from "geojson";
 import type { SJVAirEntryLevel } from "@sjvair/sdk";
-import { mapManager } from "$lib/map/map.svelte";
+import { mapManager } from "$lib/map/map-manager.svelte.js";
 import { mountPopup } from "$lib/map/utils";
 import { clickManager, type ClickHandler } from "$lib/map/integrations/click-manager";
 import { TooltipManager } from "$lib/map/integrations/tooltip.svelte";

package/src/lib/monitors/monitors-icon-manager.svelte.ts

@@ -1,7 +1,7 @@
 import type { MonitorData, SJVAirEntryLevel } from "@sjvair/sdk";
 import { asDataURI, circle, square, triangle } from "$lib/map/icons";
 import { MapIconManager } from "$lib/map/integrations/map-icon-manager";
-import { mapManager } from "$lib/map/map.svelte";
+import { mapManager } from "$lib/map/map-manager.svelte.js";
 import type { MonitorsDataSource } from "./types";
 
 const MONITOR_ICONS = { circle, square, triangle };