@sjvair/monitor-map 3.0.3 → 3.0.5

package/dist/lib/monitors/monitors-map-integration.svelte.js

@@ -1,270 +1,278 @@
-import { mapManager as e } from "../map/map.svelte.js";
-import { monitorsManager as t } from "./monitors.svelte.js";
-import { clickManager as n } from "../map/integrations/click-manager.js";
-import { MapIconLayerIntegration as r } from "../map/integrations/map-geojson-integration.svelte.js";
-import { MonitorsIconManager as i, getIconId as a } from "./monitors-icon-manager.svelte.js";
-import { TooltipManager as o } from "../map/integrations/tooltip.svelte.js";
-import { MapDisplayOption as s } from "../map/integrations/map-display-option.svelte.js";
-import { getCurrentLevel as c, getOrder as l } from "./monitor-utils.js";
-import { MonitorsClusterRenderer as u, monitorTooltip as d } from "./monitors-cluster-renderer.js";
-import * as f from "svelte/internal/client";
-import { untrack as p } from "svelte";
-//#region src/lib/monitors/monitors-map-integration.svelte.ts
-var m = {
-	monitor(e) {
-		return [
-			"==",
-			["get", "type"],
-			e
-		];
-	},
-	purpleair() {
-		return [
-			"all",
-			[
-				"==",
-				["get", "type"],
-				"purpleair"
-			],
-			[
-				"==",
-				["get", "is_sjvair"],
-				!1
-			]
-		];
-	},
-	sjvPurpleair() {
-		return [
-			"all",
-			[
-				"==",
-				["get", "type"],
-				"purpleair"
-			],
-			[
-				"==",
-				["get", "is_sjvair"],
-				!0
-			]
-		];
-	}
-}, h = new class extends r {
-	referenceId = "monitors";
-	#e = f.state(!0);
-	get enabled() {
-		return f.get(this.#e);
-	}
-	set enabled(e) {
-		f.set(this.#e, e, !0);
-	}
-	#t = f.state(!0);
-	get clustered() {
-		return f.get(this.#t);
-	}
-	set clustered(e) {
-		f.set(this.#t, e, !0);
-	}
-	icons = new i();
-	tooltipManager = new o();
-	renderer = new u(this);
-	#n = f.derived(() => ({
-		purpleair: new s("PurpleAir", !0, this.icons.get("outside-display-square")),
-		sjvair: new s("SJVAir non-FEM", !0, this.icons.get("outside-display-circle")),
-		aqview: new s("AQview", !0, this.icons.get("outside-display-triangle")),
-		bam1022: new s("SJVAir FEM", !0, this.icons.get("outside-display-triangle")),
-		airnow: new s("AirNow", !0, this.icons.get("outside-display-triangle")),
-		inactive: new s("Inactive", !1, this.icons.get("outside-default-square")),
-		inside: new s("Inside", !1, this.icons.get("inside-display-square"))
-	}));
-	get displayOptions() {
-		return f.get(this.#n);
-	}
-	set displayOptions(e) {
-		f.set(this.#n, e);
-	}
-	onMonitorClick = null;
-	#r = f.state(null);
-	get selectedMonitorId() {
-		return f.get(this.#r);
-	}
-	set selectedMonitorId(e) {
-		f.set(this.#r, e, !0);
-	}
-	handleMonitorClick = (t) => {
-		if (!this.onMonitorClick) return;
-		let n = [...t].sort((e, t) => (t.properties?.order ?? 0) - (e.properties?.order ?? 0))[0];
-		if (!n?.properties?.id || (this.selectedMonitorId = n.properties.id, this.onMonitorClick(this.selectedMonitorId), n.geometry.type !== "Point")) return;
-		let r = n.geometry.coordinates;
-		e.map?.easeTo({
-			center: r,
-			zoom: Math.max(e.map.getZoom(), 12)
-		});
-	};
-	#i = f.derived(() => {
-		if (!t.meta || !t.latest || !t.pollutant) return [];
-		let e = t.meta.entryType(t.pollutant).asIter.levels;
-		return Array.from(t.latest.values().map((t) => {
-			let n = {
-				type: "Feature",
-				properties: {
-					icon: "outside-default-square",
-					id: t.id,
-					is_active: t.is_active,
-					is_sjvair: t.is_sjvair,
-					location: t.location,
-					name: t.name,
-					order: l(t),
-					type: t.type,
-					value: t.latest.value
-				},
-				geometry: t.position
-			};
-			if (e) {
-				let r = c(t.latest.value, e);
-				r && (n.properties.icon = a(t, r));
-			}
-			return n;
-		}));
-	});
-	get features() {
-		return f.get(this.#i);
-	}
-	set features(e) {
-		f.set(this.#i, e);
-	}
-	#a = f.derived(() => {
-		let e = ["any"], t = ["any", [
-			"==",
-			["get", "location"],
-			"outside"
-		]], n = ["any", [
-			"==",
-			["get", "is_active"],
-			!0
-		]];
-		return this.displayOptions.purpleair.value && e.push(m.purpleair()), this.displayOptions.aqview.value && e.push(m.monitor("aqview")), this.displayOptions.bam1022.value && e.push(m.monitor("bam1022")), this.displayOptions.airnow.value && e.push(m.monitor("airnow")), this.displayOptions.sjvair.value && e.push(m.sjvPurpleair(), m.monitor("airgradient")), this.displayOptions.inside.value && t.push([
-			"==",
-			["get", "location"],
-			"inside"
-		]), this.displayOptions.inactive.value && n.push([
-			"==",
-			["get", "is_active"],
-			!1
-		]), [
-			"all",
-			e,
-			t,
-			n
-		];
-	});
-	get filters() {
-		return f.get(this.#a);
-	}
-	set filters(e) {
-		f.set(this.#a, e);
-	}
-	#o = f.derived(() => {
-		let e = this.displayOptions, t = {};
-		for (let n of this.features) {
-			let r = n.properties;
-			if (!r.is_active && !e.inactive.value || r.location === "inside" && !e.inside.value || !({
-				purpleair: r.is_sjvair ? e.sjvair.value : e.purpleair.value,
-				airgradient: e.sjvair.value,
-				aqview: e.aqview.value,
-				bam1022: e.bam1022.value,
-				airnow: e.airnow.value
-			}[r.type] ?? !0)) continue;
-			let i = r.type === "purpleair" && r.is_sjvair ? "airgradient" : r.type, a = t[i] ?? [];
-			a.push(n), t[i] = a;
-		}
-		return t;
-	});
-	get featuresByType() {
-		return f.get(this.#o);
-	}
-	set featuresByType(e) {
-		f.set(this.#o, e);
-	}
-	#s = f.derived(() => !t.meta || !t.pollutant ? [] : t.meta.entryType(t.pollutant).asIter.levels ?? []);
-	get clusterIconThresholds() {
-		return f.get(this.#s);
-	}
-	set clusterIconThresholds(e) {
-		f.set(this.#s, e);
-	}
-	get mapLayer() {
-		return {
-			id: this.referenceId,
-			type: "symbol",
-			source: this.referenceId,
-			filter: this.filters,
-			layout: {
-				"symbol-sort-key": [
-					"coalesce",
-					["get", "order"],
-					0
-				],
-				"icon-allow-overlap": !0,
-				"icon-ignore-placement": !0,
-				"icon-image": ["get", "icon"],
-				"icon-size": 1
-			},
-			paint: {}
-		};
-	}
-	get mapSource() {
-		return {
-			type: "geojson",
-			promoteId: "id",
-			data: {
-				type: "FeatureCollection",
-				features: this.features
-			}
-		};
-	}
-	constructor() {
-		super(), f.effect_root(() => {
-			f.user_effect(() => {
-				let t = this.filters;
-				e.map && (this.clustered ? this.renderer.syncFilter() : e.map.getLayer(this.referenceId) && e.map.setFilter(this.referenceId, t));
-			}), f.user_effect(() => {
-				let t = this.features;
-				!e.map || this.clustered || e.setDataSource(this.referenceId, t);
-			}), f.user_effect(() => {
-				this.featuresByType, !(!e.map || !this.clustered) && this.renderer.syncFeatures();
-			}), f.user_effect(() => {
-				let t = this.clusterIconThresholds;
-				!e.map || !this.clustered || !t.length || this.renderer.syncThresholds();
-			}), f.user_effect(() => {
-				this.clustered;
-				let t = Object.keys(this.featuresByType).length > 0;
-				!p(() => e.map) || !t || p(() => this.apply());
-			}), f.user_effect(() => {
-				this.selectedMonitorId, e.map && p(() => this.applySelectedState());
-			});
-		});
-	}
-	apply() {
-		e.map && (this.tooltipManager.has(this.referenceId) || this.tooltipManager.register(this.referenceId, d), this.clustered ? (e.map.getLayer(this.referenceId) && e.map.removeLayer(this.referenceId), e.map.getSource(this.referenceId) && e.map.removeSource(this.referenceId), n.unregister([this.referenceId]), this.tooltipManager.disable(), this.renderer.remove(), this.icons.loadIcons().then(() => {
-			this.renderer.apply(this.handleMonitorClick), this.tooltipManager.enable(), this.applySelectedState();
-		})) : (this.tooltipManager.disable(), this.renderer.remove(), this.tooltipManager.enable(), n.unregister([this.referenceId]), super.apply(), this.icons.loadIcons().then(() => {
-			n.register([this.referenceId], this.handleMonitorClick), this.applySelectedState();
-		})));
-	}
-	remove() {
-		n.unregister([this.referenceId]), this.renderer.remove(), super.remove();
-	}
-	applySelectedState() {
-		if (!e.map) return;
-		let t = this.clustered ? this.renderer.unclusteredLayerIds : [this.referenceId], n = this.selectedMonitorId ? [
-			"match",
-			["get", "id"],
-			this.selectedMonitorId,
-			1.3,
-			1
-		] : 1;
-		for (let r of t) e.map.getLayer(r) && e.map.setLayoutProperty(r, "icon-size", n);
-	}
-}();
-//#endregion
-export { h as monitorsMapIntegration };
+import { untrack } from "svelte";
+import { mapManager } from "../map/map.svelte.ts";
+import { clickManager } from "../map/integrations/click-manager.ts";
+import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte.ts";
+import { monitorsManager } from "./monitors.svelte.ts";
+import { getIconId, MonitorsIconManager } from "./monitors-icon-manager.svelte.ts";
+import { TooltipManager } from "../map/integrations/tooltip.svelte.ts";
+import { MapDisplayOption } from "../map/integrations/map-display-option.svelte.ts";
+import { getCurrentLevel, getOrder } from "./monitor-utils.ts";
+import { MonitorsClusterRenderer, monitorTooltip } from "./monitors-cluster-renderer.ts";
+const filters = {
+    monitor(deviceType) {
+        return ["==", ["get", "type"], deviceType];
+    },
+    purpleair() {
+        return ["all", ["==", ["get", "type"], "purpleair"], ["==", ["get", "is_sjvair"], false]];
+    },
+    sjvPurpleair() {
+        return ["all", ["==", ["get", "type"], "purpleair"], ["==", ["get", "is_sjvair"], true]];
+    }
+};
+class MonitorsMapIntegration extends MapIconLayerIntegration {
+    referenceId = "monitors";
+    enabled = $state(true);
+    clustered = $state(true);
+    icons = new MonitorsIconManager();
+    tooltipManager = new TooltipManager();
+    renderer = new MonitorsClusterRenderer(this);
+    displayOptions = $derived.by(() => ({
+        purpleair: new MapDisplayOption("PurpleAir", true, this.icons.get("outside-display-square")),
+        sjvair: new MapDisplayOption("SJVAir non-FEM", true, this.icons.get("outside-display-circle")),
+        aqview: new MapDisplayOption("AQview", true, this.icons.get("outside-display-triangle")),
+        bam1022: new MapDisplayOption("SJVAir FEM", true, this.icons.get("outside-display-triangle")),
+        airnow: new MapDisplayOption("AirNow", true, this.icons.get("outside-display-triangle")),
+        inactive: new MapDisplayOption("Inactive", false, this.icons.get("outside-default-square")),
+        inside: new MapDisplayOption("Inside", false, this.icons.get("inside-display-square"))
+    }));
+    /** Set by the app to handle navigation when a monitor is clicked. Receives the monitor ID. */
+    onMonitorClick = null;
+    selectedMonitorId = $state(null);
+    handleMonitorClick = (features) => {
+        if (!this.onMonitorClick)
+            return;
+        const sorted = [...features].sort((a, b) => (b.properties?.order ?? 0) - (a.properties?.order ?? 0));
+        const top = sorted[0];
+        if (!top?.properties?.id)
+            return;
+        this.selectedMonitorId = top.properties.id;
+        this.onMonitorClick(this.selectedMonitorId);
+        if (top.geometry.type !== "Point")
+            return;
+        const coords = top.geometry.coordinates;
+        mapManager.map?.easeTo({
+            center: coords,
+            zoom: Math.max(mapManager.map.getZoom(), 12)
+        });
+    };
+    features = $derived.by(() => {
+        if (!monitorsManager.meta || !monitorsManager.latest || !monitorsManager.pollutant) {
+            return [];
+        }
+        const levels = monitorsManager.meta.entryType(monitorsManager.pollutant).asIter.levels;
+        return Array.from(monitorsManager.latest.values().map((m) => {
+            const feature = {
+                type: "Feature",
+                properties: {
+                    icon: "outside-default-square",
+                    id: m.id,
+                    is_active: m.is_active,
+                    is_sjvair: m.is_sjvair,
+                    location: m.location,
+                    name: m.name,
+                    order: getOrder(m),
+                    type: m.type,
+                    value: m.latest.value
+                },
+                geometry: m.position
+            };
+            if (levels) {
+                const level = getCurrentLevel(m.latest.value, levels);
+                if (level) {
+                    feature.properties.icon = getIconId(m, level);
+                }
+            }
+            return feature;
+        }));
+    });
+    filters = $derived.by(() => {
+        const monitorFilters = ["any"];
+        const locationFilters = [
+            "any",
+            ["==", ["get", "location"], "outside"]
+        ];
+        const statusFilters = ["any", ["==", ["get", "is_active"], true]];
+        if (this.displayOptions.purpleair.value)
+            monitorFilters.push(filters.purpleair());
+        if (this.displayOptions.aqview.value)
+            monitorFilters.push(filters.monitor("aqview"));
+        if (this.displayOptions.bam1022.value)
+            monitorFilters.push(filters.monitor("bam1022"));
+        if (this.displayOptions.airnow.value)
+            monitorFilters.push(filters.monitor("airnow"));
+        if (this.displayOptions.sjvair.value)
+            monitorFilters.push(filters.sjvPurpleair(), filters.monitor("airgradient"));
+        if (this.displayOptions.inside.value)
+            locationFilters.push(["==", ["get", "location"], "inside"]);
+        if (this.displayOptions.inactive.value)
+            statusFilters.push(["==", ["get", "is_active"], false]);
+        return ["all", monitorFilters, locationFilters, statusFilters];
+    });
+    // Groups features by monitor type for per-type cluster sources, applying display option
+    // filters so cluster aggregates only include visible monitors. sjvair purpleair is remapped
+    // to "airgradient" since they share the same shape (circle).
+    featuresByType = $derived.by(() => {
+        const opts = this.displayOptions;
+        const byType = {};
+        for (const feat of this.features) {
+            const p = feat.properties;
+            if (!p.is_active && !opts.inactive.value)
+                continue;
+            if (p.location === "inside" && !opts.inside.value)
+                continue;
+            const typeVisible = {
+                purpleair: p.is_sjvair ? opts.sjvair.value : opts.purpleair.value,
+                airgradient: opts.sjvair.value,
+                aqview: opts.aqview.value,
+                bam1022: opts.bam1022.value,
+                airnow: opts.airnow.value
+            };
+            if (!(typeVisible[p.type] ?? true))
+                continue;
+            const key = p.type === "purpleair" && p.is_sjvair ? "airgradient" : p.type;
+            const arr = byType[key] ?? [];
+            arr.push(feat);
+            byType[key] = arr;
+        }
+        return byType;
+    });
+    clusterIconThresholds = $derived.by(() => {
+        if (!monitorsManager.meta || !monitorsManager.pollutant)
+            return [];
+        return monitorsManager.meta.entryType(monitorsManager.pollutant).asIter.levels ?? [];
+    });
+    get mapLayer() {
+        return {
+            id: this.referenceId,
+            type: "symbol",
+            source: this.referenceId,
+            filter: this.filters,
+            layout: {
+                "symbol-sort-key": ["coalesce", ["get", "order"], 0],
+                "icon-allow-overlap": true,
+                "icon-ignore-placement": true,
+                "icon-image": ["get", "icon"],
+                "icon-size": 1
+            },
+            paint: {}
+        };
+    }
+    get mapSource() {
+        return {
+            type: "geojson",
+            promoteId: "id",
+            data: {
+                type: "FeatureCollection",
+                features: this.features
+            }
+        };
+    }
+    constructor() {
+        super();
+        $effect.root(() => {
+            // Push filter changes to the active layer(s) imperatively
+            $effect(() => {
+                const filter = this.filters;
+                if (!mapManager.map)
+                    return;
+                if (this.clustered) {
+                    this.renderer.syncFilter();
+                }
+                else {
+                    if (mapManager.map.getLayer(this.referenceId)) {
+                        mapManager.map.setFilter(this.referenceId, filter);
+                    }
+                }
+            });
+            // Sync unclustered source data when features change
+            $effect(() => {
+                const features = this.features;
+                if (!mapManager.map || this.clustered)
+                    return;
+                mapManager.setDataSource(this.referenceId, features);
+            });
+            // Keep cluster source data in sync when features or display options change
+            $effect(() => {
+                void this.featuresByType;
+                if (!mapManager.map || !this.clustered)
+                    return;
+                this.renderer.syncFeatures();
+            });
+            // Push updated icon expressions to cluster layers when the pollutant changes
+            $effect(() => {
+                const thresholds = this.clusterIconThresholds;
+                if (!mapManager.map || !this.clustered || !thresholds.length)
+                    return;
+                this.renderer.syncThresholds();
+            });
+            // Re-apply when clustered mode switches or when data first arrives (cold load).
+            // featuresByType is tracked so this fires once data is available; untrack on apply()
+            // prevents reactive reads inside it from leaking into this effect's dependency graph.
+            $effect(() => {
+                void this.clustered;
+                const hasFeatures = Object.keys(this.featuresByType).length > 0;
+                if (!untrack(() => mapManager.map) || !hasFeatures)
+                    return;
+                untrack(() => this.apply());
+            });
+            // Sync selected icon scale via feature state
+            $effect(() => {
+                void this.selectedMonitorId;
+                if (!mapManager.map)
+                    return;
+                untrack(() => this.applySelectedState());
+            });
+        });
+    }
+    apply() {
+        if (!mapManager.map)
+            return;
+        if (!this.tooltipManager.has(this.referenceId)) {
+            this.tooltipManager.register(this.referenceId, monitorTooltip);
+        }
+        if (this.clustered) {
+            if (mapManager.map.getLayer(this.referenceId))
+                mapManager.map.removeLayer(this.referenceId);
+            if (mapManager.map.getSource(this.referenceId))
+                mapManager.map.removeSource(this.referenceId);
+            clickManager.unregister([this.referenceId]);
+            this.tooltipManager.disable();
+            this.renderer.remove();
+            this.icons.loadIcons().then(() => {
+                this.renderer.apply(this.handleMonitorClick);
+                this.tooltipManager.enable();
+                this.applySelectedState();
+            });
+        }
+        else {
+            this.tooltipManager.disable();
+            this.renderer.remove();
+            this.tooltipManager.enable();
+            clickManager.unregister([this.referenceId]);
+            super.apply();
+            this.icons.loadIcons().then(() => {
+                clickManager.register([this.referenceId], this.handleMonitorClick);
+                this.applySelectedState();
+            });
+        }
+    }
+    remove() {
+        clickManager.unregister([this.referenceId]);
+        this.renderer.remove();
+        super.remove();
+    }
+    applySelectedState() {
+        if (!mapManager.map)
+            return;
+        const layerIds = this.clustered ? this.renderer.unclusteredLayerIds : [this.referenceId];
+        const iconSize = this.selectedMonitorId
+            ? ["match", ["get", "id"], this.selectedMonitorId, 1.3, 1]
+            : 1;
+        for (const layerId of layerIds) {
+            if (!mapManager.map.getLayer(layerId))
+                continue;
+            mapManager.map.setLayoutProperty(layerId, "icon-size", iconSize);
+        }
+    }
+}
+export const monitorsMapIntegration = new MonitorsMapIntegration();

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

@@ -0,0 +1,16 @@
+import { type MonitorData, type MonitorLatestType, type MonitorsMeta, type SJVAirEntryLevel } from "@sjvair/sdk";
+import { XMap } from "@tstk/builtin-extensions";
+import { Interval } from "@tstk/utils";
+declare class MonitorsManager {
+    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;
+    init(urlPollutant?: string | number | boolean): Promise<void>;
+    update(): Promise<void>;
+}
+export declare const monitorsManager: MonitorsManager;
+export type { MonitorsManager };