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

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

@@ -1,98 +0,0 @@
-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-manager.svelte.js";
-import type { MonitorsDataSource } from "./types";
-
-const MONITOR_ICONS = { circle, square, triangle };
-const MONITOR_ICON_BORDER_WIDTH = 2;
-const MONITOR_ICON_DEFAULT_COLOR = "#969696"; // light gray
-const MONITOR_ICON_DISPLAY_COLOR = "#48c78e"; // light gray
-
-export function getIconId<T extends MonitorData>(monitor: T, level: SJVAirEntryLevel): string {
-	const id = `${monitor.location}-${monitor.is_active ? level.name : "default"}`;
-
-	switch (monitor.type) {
-		case "airnow":
-		case "aqview":
-		case "bam1022":
-		case "aqlite":
-			return `${id}-triangle`;
-
-		case "airgradient":
-		case "purpleair":
-		case "vozbox":
-			return `${id}-circle`;
-
-		default:
-			throw new Error(`Map icon for ${monitor.device} has not been set`);
-	}
-}
-
-export abstract class MonitorShapeIconManager extends MapIconManager {
-	protected abstract get idPrefix(): string;
-	protected abstract transformSvg(svg: string): string;
-	protected get iconSize(): number {
-		return 24;
-	}
-
-	constructor(private dataSource: Pick<MonitorsDataSource, "levels">) {
-		super();
-
-		$effect.root(() => {
-			$effect(() => {
-				if (this.dataSource.levels) {
-					const iconLevels = [
-						...this.dataSource.levels,
-						{ name: "default", color: MONITOR_ICON_DEFAULT_COLOR },
-						{ name: "display", color: MONITOR_ICON_DISPLAY_COLOR }
-					];
-
-					for (const location of ["inside", "outside"]) {
-						for (const [shapeName, shape] of Object.entries(MONITOR_ICONS)) {
-							for (const level of iconLevels) {
-								const parts = [this.idPrefix, location, level.name, shapeName].filter(Boolean);
-								const id = parts.join("-");
-								const src = asDataURI(
-									this.transformSvg(
-										shape(
-											level.color,
-											MONITOR_ICON_BORDER_WIDTH,
-											location === "inside" ? "#000000" : undefined
-										)
-									)
-								);
-
-								if (this.icons.has(id)) {
-									const icon = this.icons.get(id)!;
-									if (icon.image.src !== src) {
-										icon.image.src = src;
-										if (mapManager.map?.hasImage(id)) {
-											this.updateImage(icon, mapManager.map);
-										}
-									}
-									continue;
-								} else {
-									const icon = new Image();
-									icon.src = src;
-									icon.width = this.iconSize;
-									icon.height = this.iconSize;
-									this.register(id, icon);
-								}
-							}
-						}
-					}
-				}
-			});
-		});
-	}
-}
-
-export class MonitorsIconManager extends MonitorShapeIconManager {
-	protected get idPrefix(): string {
-		return "";
-	}
-	protected transformSvg(svg: string): string {
-		return svg;
-	}
-}

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

@@ -1,318 +0,0 @@
-import {
-	type ExpressionSpecification,
-	type FilterSpecification,
-	type Map as MaptilerMap
-} from "@maptiler/sdk";
-import type { MonitorType, SJVAirEntryLevel } from "@sjvair/sdk";
-import { untrack } from "svelte";
-import type { Geometry } from "geojson";
-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";
-import { getIconId, MonitorsIconManager } from "./monitors-icon-manager.svelte";
-import { TooltipManager } from "$lib/map/integrations/tooltip.svelte";
-import { MapDisplayOption } from "$lib/map/integrations/map-display-option.svelte";
-import { getCurrentLevel, getOrder } from "./monitor-utils";
-import { MonitorsClusterRenderer, monitorTooltip } from "./monitors-cluster-renderer";
-import type { MonitorMapFeature, MonitorMarkerProperties, MonitorsDataSource } from "./types";
-
-const filters = {
-	monitor(deviceType: MonitorType): ExpressionSpecification {
-		return ["==", ["get", "type"], deviceType];
-	}
-};
-
-class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProperties> {
-	referenceId: string = "monitors";
-	enabled: boolean = $state(true);
-	clustered: boolean = $state(true);
-
-	icons: MonitorsIconManager;
-	tooltipManager: TooltipManager = new TooltipManager();
-	private renderer: MonitorsClusterRenderer = new MonitorsClusterRenderer(this);
-
-	displayOptions = $derived.by(() => ({
-		airnow: new MapDisplayOption("AirNow", true, this.icons.get("outside-display-triangle")),
-		aqlite: new MapDisplayOption("AQLite", true, this.icons.get("outside-display-triangle")),
-		aqview: new MapDisplayOption("AQview", true, this.icons.get("outside-display-triangle")),
-		bam1022: new MapDisplayOption("SJVAir", true, this.icons.get("outside-display-triangle")),
-		airgradient: new MapDisplayOption(
-			"AirGradient",
-			true,
-			this.icons.get("outside-display-circle")
-		),
-		purpleair: new MapDisplayOption("PurpleAir", true, this.icons.get("outside-display-circle")),
-		vozbox: new MapDisplayOption("VOZbox", true, this.icons.get("outside-display-circle")),
-		inactive: new MapDisplayOption("Inactive", false, this.icons.get("outside-default-circle")),
-		inside: new MapDisplayOption("Inside", false, this.icons.get("inside-display-circle"))
-	}));
-
-	/** Set by the app to handle navigation when a monitor is clicked. Receives the monitor ID. */
-	onMonitorClick: ((id: string) => void) | null = null;
-	selectedMonitorId: string | null = $state(null);
-
-	private handleMonitorClick: ClickHandler = (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 as string;
-		this.onMonitorClick(this.selectedMonitorId);
-		if (top.geometry.type !== "Point") return;
-		const coords = top.geometry.coordinates as [number, number];
-		mapManager.map?.easeTo({
-			center: coords,
-			zoom: Math.max(mapManager.map.getZoom(), 12)
-		});
-	};
-
-	features: Array<MonitorMapFeature> = $derived.by(() => {
-		if (!this.dataSource.meta || !this.dataSource.latest || !this.dataSource.pollutant) {
-			return [];
-		}
-		const levels = this.dataSource.meta.entryType(this.dataSource.pollutant).asIter.levels;
-
-		return Array.from(
-			this.dataSource.latest.values().map((m) => {
-				const feature: MonitorMapFeature = {
-					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! as Geometry
-				};
-
-				if (levels) {
-					const level = getCurrentLevel(m.latest.value, levels);
-					if (level) {
-						feature.properties.icon = getIconId(m, level);
-					}
-				}
-
-				return feature;
-			})
-		);
-	});
-
-	filters: FilterSpecification = $derived.by((): FilterSpecification => {
-		const monitorFilters: ExpressionSpecification = ["any"];
-		const locationFilters: ExpressionSpecification = [
-			"any",
-			["==", ["get", "location"], "outside"]
-		];
-		const statusFilters: ExpressionSpecification = ["any", ["==", ["get", "is_active"], true]];
-
-		if (this.displayOptions.airnow.value) monitorFilters.push(filters.monitor("airnow"));
-		if (this.displayOptions.aqlite.value) monitorFilters.push(filters.monitor("aqlite"));
-		if (this.displayOptions.aqview.value) monitorFilters.push(filters.monitor("aqview"));
-		if (this.displayOptions.bam1022.value) monitorFilters.push(filters.monitor("bam1022"));
-		if (this.displayOptions.airgradient.value) monitorFilters.push(filters.monitor("airgradient"));
-		if (this.displayOptions.purpleair.value) monitorFilters.push(filters.monitor("purpleair"));
-		if (this.displayOptions.vozbox.value) monitorFilters.push(filters.monitor("vozbox"));
-		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.
-	featuresByType: Record<string, MonitorMapFeature[]> = $derived.by(() => {
-		const opts = this.displayOptions;
-		const byType: Record<string, MonitorMapFeature[]> = {};
-
-		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: Partial<Record<MonitorType, boolean>> = {
-				airnow: opts.airnow.value,
-				aqlite: opts.aqlite.value,
-				aqview: opts.aqview.value,
-				bam1022: opts.bam1022.value,
-				airgradient: opts.airgradient.value,
-				purpleair: opts.purpleair.value,
-				vozbox: opts.vozbox.value
-			};
-			if (!(typeVisible[p.type] ?? true)) continue;
-
-			const arr = byType[p.type] ?? [];
-			arr.push(feat);
-			byType[p.type] = arr;
-		}
-		return byType;
-	});
-
-	clusterIconThresholds: Array<SJVAirEntryLevel> = $derived.by(() => {
-		if (!this.dataSource.meta || !this.dataSource.pollutant) return [];
-		return this.dataSource.meta.entryType(this.dataSource.pollutant).asIter.levels ?? [];
-	});
-
-	get mapLayer(): Parameters<MaptilerMap["addLayer"]>[0] {
-		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(): Parameters<MaptilerMap["addSource"]>[1] {
-		return {
-			type: "geojson",
-			promoteId: "id",
-			data: {
-				type: "FeatureCollection",
-				features: this.features
-			}
-		};
-	}
-
-	constructor(private dataSource: MonitorsDataSource = monitorsManager) {
-		super();
-		this.icons = new MonitorsIconManager(dataSource);
-
-		$effect.root(() => {
-			// Every effect below early-returns while disabled (Pollutant = None) so a data refresh
-			// can't re-add the layer. `enabled` is read untracked: the base class's own effect
-			// already applies/removes on enabled changes, and tracking it here would apply twice.
-			// The guard comes after each effect's tracked reads so its dependencies are always
-			// collected; returning before reading anything would leave the effect permanently dead.
-
-			// Push filter changes to the active layer(s) imperatively
-			$effect(() => {
-				const filter = this.filters;
-				const clustered = this.clustered;
-				if (!mapManager.map) return;
-				if (!untrack(() => this.enabled)) return;
-
-				if (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;
-				if (!untrack(() => this.enabled)) 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;
-				if (!untrack(() => this.enabled)) 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;
-				if (!untrack(() => this.enabled)) 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;
-				if (!untrack(() => this.enabled)) 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();
-			// 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();
-			});
-		} else {
-			this.tooltipManager.disable();
-			this.renderer.remove();
-			this.tooltipManager.enable();
-			clickManager.unregister([this.referenceId]);
-			super.apply();
-			this.whenIconsLoad(() => {
-				clickManager.register([this.referenceId], this.handleMonitorClick);
-				this.applySelectedState();
-			});
-		}
-	}
-
-	remove() {
-		this.tooltipManager.disable();
-		clickManager.unregister([this.referenceId]);
-		this.renderer.remove();
-		super.remove();
-	}
-
-	private applySelectedState(): void {
-		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] as ExpressionSpecification)
-			: 1;
-		for (const layerId of layerIds) {
-			if (!mapManager.map.getLayer(layerId)) continue;
-			mapManager.map.setLayoutProperty(layerId, "icon-size", iconSize);
-		}
-	}
-}
-
-export const monitorsMapIntegration = new MonitorsMapIntegration();
-export { MonitorsMapIntegration };

package/src/lib/options/reset-map-options.ts

@@ -1,28 +0,0 @@
-import { monitorsManager } from "$lib/monitors/monitors.svelte";
-import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
-import { collocationSitesMapIntegration } from "$lib/collocation-sites/collocations-map-integration.svelte";
-import { hmsFireMapIntegration } from "$lib/hms/hms-fire-map-integration.svelte";
-import { hmsSmokeMapIntegration } from "$lib/hms/hms-smoke-map-integration.svelte";
-import { evStationsMapIntegration } from "$lib/ev-stations/ev-stations-map-integration.svelte";
-import { windMapIntegration } from "$lib/wind/wind.svelte";
-import { mapStyleState } from "$lib/map/map-style-state.svelte.js";
-import { applyMapOptionDefaults } from "./map-option-defaults";
-
-/** "Reset Map Options": restores every map option to its default. */
-export function resetMapOptions(): void {
-	applyMapOptionDefaults(
-		{
-			manager: monitorsManager,
-			integration: monitorsMapIntegration,
-			collocationSites: collocationSitesMapIntegration,
-			hmsFire: hmsFireMapIntegration,
-			hmsSmoke: hmsSmokeMapIntegration,
-			evStations: evStationsMapIntegration,
-			wind: windMapIntegration,
-			// The basemap reset may start loading a new style; integrations skip the style while
-			// mapManager.styleLoading is set and the refresh on "style.load" re-applies them.
-			mapStyle: mapStyleState
-		},
-		monitorsManager.meta?.default_pollutant ?? null
-	);
-}

package/src/lib/reactivity.svelte.ts

@@ -1,82 +0,0 @@
-//class ReactiveState<T> {
-//  private internalValue?: T = $state();
-//
-//  constructor(initialValue?: T) {
-//    this.internalValue = initialValue;
-//  }
-//  get value(): T | undefined {
-//    return this.internalValue;
-//  }
-//
-//  set value(newValue: T) {
-//    // Perform any validation or side effects here
-//    this.internalValue = newValue; // Update the reactive state
-//  }
-//}
-//
-//class ShallowReactiveState<T> {
-//  private internalValue?: T = $state.raw();
-//
-//  constructor(initialValue?: T) {
-//    this.internalValue = initialValue;
-//  }
-//  get value(): T | undefined {
-//    return this.internalValue;
-//  }
-//
-//  set value(newValue: T) {
-//    // Perform any validation or side effects here
-//    this.internalValue = newValue; // Update the reactive state
-//  }
-//}
-//
-//
-//class DerivedReactiveState<T> {
-//  private internalValue?: T;
-//
-//  constructor(expression: () => T) {
-//    this.internalValue = $derived.by(expression);
-//  }
-//  get value(): T | undefined {
-//    return this.internalValue;
-//  }
-//  set value(newValue: T) {
-//    this.internalValue = newValue;
-//  }
-//}
-//
-//export function Derived<V>(value: () => V) {
-//  let ref: DerivedReactiveState<V> = new DerivedReactiveState<V>(value);
-//  return function <V, T = unknown>(
-//    _target: ClassAccessorDecoratorTarget<T, V>,
-//    _ctx: ClassAccessorDecoratorContext,
-//  ): ClassAccessorDecoratorResult<T, V> {
-//
-//    return {
-//      get() {
-//        return ref.value as V;
-//      },
-//    };
-//  }
-//}
-//export function Reactive(shallow?: boolean) {
-//  return function <V, T = unknown>(
-//    _target: ClassAccessorDecoratorTarget<T, V>,
-//    _ctx: ClassAccessorDecoratorContext,
-//  ): ClassAccessorDecoratorResult<T, V> {
-//    let ref = shallow ? new ShallowReactiveState<V>() : new ReactiveState<V>();
-//
-//    return {
-//      get(): V {
-//        return ref.value as V;
-//      },
-//      set(newValue): void {
-//        ref.value = newValue;
-//      },
-//      init(initialValue: V): V {
-//        ref.value = initialValue;
-//        return ref.value as V;
-//      }
-//    };
-//  };
-//}

package/src/lib/wind/wind.svelte.ts

@@ -1,20 +0,0 @@
-import { Map as MaptilerMap } from "@maptiler/sdk";
-import { WindLayer } from "@maptiler/weather";
-import { baseLayerSeperator } from "../map/integrations/base-layer-seperator";
-import { MapLayerIntegration } from "$lib/map/integrations/map-layer-integration.svelte";
-
-class WindMapIntegration extends MapLayerIntegration {
-	referenceId: string = "MapTiler Wind";
-
-	beforeLayer = baseLayerSeperator.referenceId;
-
-	enabled: boolean = $state(false);
-
-	mapLayer = new WindLayer({
-		id: this.referenceId,
-		opacity: 0.5
-	}) as unknown as Parameters<MaptilerMap["addLayer"]>[0];
-}
-
-export const windMapIntegration = new WindMapIntegration();
-export type { WindMapIntegration };