@sjvair/monitor-map 3.0.2 → 3.0.4

package/dist/lib/monitors/monitors.svelte.js

@@ -1,68 +1,39 @@
-import { route as e } from "../src/router.js";
-import * as t from "svelte/internal/client";
-import { getMonitors as n, getMonitorsLatest as r, getMonitorsMeta as i } from "@sjvair/sdk";
-import { XMap as a } from "@tstk/builtin-extensions";
-import { Interval as o } from "@tstk/utils";
-//#region src/lib/monitors/monitors.svelte.ts
-var s = class {
-	autoUpdate = new o(async () => await this.update(), 120 * 1e3);
-	#e = t.state(!1);
-	get initialized() {
-		return t.get(this.#e);
-	}
-	set initialized(e) {
-		t.set(this.#e, e, !0);
-	}
-	#t = t.state(null);
-	get latest() {
-		return t.get(this.#t);
-	}
-	set latest(e) {
-		t.set(this.#t, e, !0);
-	}
-	#n = t.state(null);
-	get list() {
-		return t.get(this.#n);
-	}
-	set list(e) {
-		t.set(this.#n, e, !0);
-	}
-	#r = t.state(null);
-	get meta() {
-		return t.get(this.#r);
-	}
-	set meta(e) {
-		t.set(this.#r, e, !0);
-	}
-	#i = t.state(null);
-	get pollutant() {
-		return t.get(this.#i);
-	}
-	set pollutant(e) {
-		t.set(this.#i, e, !0);
-	}
-	#a = t.derived(() => this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null);
-	get levels() {
-		return t.get(this.#a);
-	}
-	set levels(e) {
-		t.set(this.#a, e);
-	}
-	async init() {
-		if (this.initialized) return;
-		[this.list, this.meta] = await Promise.all([n(), i()]);
-		let t = e.search.pollutant;
-		this.pollutant = t === "pm25" || t === "o3" ? t : this.meta.default_pollutant, this.latest = await c(this.pollutant), this.autoUpdate.start(), this.initialized = !0;
-	}
-	async update() {
-		this.initialized && ([this.list, this.latest] = await Promise.all([n(), c(this.pollutant || this.meta?.default_pollutant || "pm25")]));
-	}
-};
-async function c(e) {
-	let t = await r(e), n = new a();
-	for (let e of t) n.set(e.id, e);
-	return n;
+import { getMonitors, getMonitorsLatest, getMonitorsMeta } from "@sjvair/sdk";
+import { XMap } from "@tstk/builtin-extensions";
+import { Interval } from "@tstk/utils";
+class MonitorsManager {
+    autoUpdate = new Interval(async () => await this.update(), 2 * 60 * 1000);
+    initialized = $state(false);
+    latest = $state(null);
+    list = $state(null);
+    meta = $state(null);
+    pollutant = $state(null);
+    levels = $derived(this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null);
+    async init(urlPollutant) {
+        if (this.initialized)
+            return;
+        [this.list, this.meta] = await Promise.all([getMonitors(), getMonitorsMeta()]);
+        this.pollutant =
+            urlPollutant === "pm25" || urlPollutant === "o3" ? urlPollutant : this.meta.default_pollutant;
+        this.latest = await getMonitorsLatestMap(this.pollutant);
+        this.autoUpdate.start();
+        this.initialized = true;
+    }
+    async update() {
+        if (!this.initialized)
+            return;
+        [this.list, this.latest] = await Promise.all([
+            getMonitors(),
+            getMonitorsLatestMap(this.pollutant || this.meta?.default_pollutant || "pm25")
+        ]);
+    }
 }
-var l = new s();
-//#endregion
-export { l as monitorsManager };
+async function getMonitorsLatestMap(pollutant) {
+    const monitors = await getMonitorsLatest(pollutant);
+    const latest = new XMap();
+    for (const monitor of monitors) {
+        latest.set(monitor.id, monitor);
+    }
+    return latest;
+}
+export const monitorsManager = new MonitorsManager();

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

@@ -0,0 +1,26 @@
+import type { Feature, Geometry } from "geojson";
+import type { MonitorType } from "@sjvair/sdk";
+import type { MapGeoJSONFeature } from "@maptiler/sdk";
+export type MonitorMapFeature = Feature<Geometry, MonitorMarkerProperties>;
+export interface MonitorClusterMapFeature extends MapGeoJSONFeature {
+    properties: MonitorClusterMarkerProperties;
+}
+export interface MonitorMarkerProperties {
+    icon: string;
+    id: string;
+    is_active: boolean;
+    is_sjvair?: boolean;
+    location: string;
+    name: string;
+    order: number;
+    type: MonitorType;
+    value: string;
+}
+export interface MonitorClusterMarkerProperties {
+    cluster: true;
+    cluster_id: number;
+    point_count: number;
+    point_count_abbreviated: string | number;
+    sumValues: number;
+    countValues: number;
+}

package/dist/lib/monitors/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/reactivity.svelte.js

@@ -0,0 +1,83 @@
+"use strict";
+//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/dist/lib/router-context.d.ts

@@ -0,0 +1,27 @@
+import type { ConstructUrlOptions, Navigation, NavigateOptions, RouterApi, Routes } from "sv-router";
+export declare const ROUTER_KEY: unique symbol;
+export interface MonitorMapRouterApi {
+    route: RouterApi<Routes>["route"];
+    /**
+     * Loosely typed against `string` rather than sv-router's literal-checked `Path<T>` union:
+     * internal calls prefix paths with `basePath` (a runtime string), which can't satisfy a
+     * template literal type checked against the host app's full route tree.
+     */
+    navigate(path: string, options?: NavigateOptions & {
+        params?: Record<string, string>;
+    }): Promise<Navigation>;
+    p(path: string, options?: ConstructUrlOptions & {
+        params?: Record<string, string>;
+    }): string;
+    isActive: {
+        (path: string, params?: Record<string, string>): boolean;
+        startsWith(path: string, params?: Record<string, string>): boolean;
+    };
+    /**
+     * Prefix under which monitorMapRoutes is mounted in the host app's router,
+     * e.g. "" at the app root, or "/my-map" when nested under a host route.
+     */
+    basePath: string;
+}
+export declare function provideMonitorMapRouter(api: MonitorMapRouterApi): void;
+export declare function useMonitorMapRouter(): MonitorMapRouterApi;

package/dist/lib/router-context.js

@@ -0,0 +1,13 @@
+import { getContext, setContext } from "svelte";
+export const ROUTER_KEY = Symbol("monitor-map-router");
+export function provideMonitorMapRouter(api) {
+    setContext(ROUTER_KEY, api);
+}
+export function useMonitorMapRouter() {
+    const api = getContext(ROUTER_KEY);
+    if (!api) {
+        throw new Error("monitor-map router context not found. Wrap your app root with " +
+            "provideMonitorMapRouter(...) before rendering monitor-map components.");
+    }
+    return api;
+}

package/dist/lib/routes.d.ts

@@ -0,0 +1,2 @@
+import type { Routes } from "sv-router";
+export declare const monitorMapRoutes: Routes;

package/dist/lib/routes.js

@@ -0,0 +1,11 @@
+import MonitorMapLayout from "./MonitorMapLayout.svelte";
+import MainMapView from "./MainMapView.svelte";
+// Explicitly typed as sv-router's own `Routes` so declaration emission doesn't
+// need to name svelte2tsx's internal per-component prop types (see
+// MonitorMapLayout/MainMapView.svelte) and so this stays assignable to
+// `createRouter`'s `Routes`-constrained parameter in a host app's router.ts.
+export const monitorMapRoutes = {
+    layout: MonitorMapLayout,
+    "/": MainMapView,
+    "/monitor/:id": () => import("./MonitorDetailPanel.svelte")
+};

package/dist/lib/search/Search.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import { Marker } from "@maptiler/sdk";
+	import { SearchIcon } from "@lucide/svelte";
+	import { useMonitorMapRouter } from "../router-context";
+	import { mapManager } from "../map/map.svelte";
+	import { debounce } from "../utils";
+	import { monitorSearch, geocode, type SearchResult } from "./service";
+	import { monitorsMapIntegration } from "../monitors/monitors-map-integration.svelte";
+
+	const { navigate, basePath } = useMonitorMapRouter();
+
+	let collapsed = $state(true);
+	let searchText = $state("");
+	let results: SearchResult[] = $state([]);
+	let marker: Marker | null = $state.raw(null);
+	let inputEl: HTMLInputElement | null = $state(null);
+
+	function clickOutside(node: HTMLElement) {
+		function handler(e: MouseEvent) {
+			if (!collapsed && !node.contains(e.target as Node)) {
+				collapsed = true;
+				searchText = "";
+				results = [];
+			}
+		}
+		document.addEventListener("click", handler, true);
+		return {
+			destroy() {
+				document.removeEventListener("click", handler, true);
+			}
+		};
+	}
+
+	async function openSearch() {
+		if (collapsed) {
+			collapsed = false;
+			inputEl?.focus();
+		}
+	}
+
+	function clearSearch() {
+		searchText = "";
+		results = [];
+		marker?.remove();
+		marker = null;
+	}
+
+	async function handleInput() {
+		const query = searchText;
+		if (!query) {
+			results = [];
+			marker?.remove();
+			marker = null;
+			return;
+		}
+		const monitorResults = await monitorSearch(query);
+		if (searchText !== query) return;
+		if (monitorResults.length) {
+			results = monitorResults;
+		} else if (query.length > 4) {
+			const geo = await geocode(query);
+			if (searchText !== query) return;
+			results = geo;
+		} else {
+			results = [];
+		}
+	}
+
+	const debouncedSearch = debounce(handleInput, 500);
+
+	async function selectMonitor(result: Extract<SearchResult, { type: "monitor" }>) {
+		collapsed = true;
+		searchText = "";
+		results = [];
+		marker?.remove();
+		marker = null;
+		if (mapManager.map && result.monitor.position) {
+			const { coordinates } = result.monitor.position;
+			const center: [number, number] = [coordinates[0], coordinates[1]];
+			mapManager.map.flyTo({
+				center,
+				zoom: 12
+			});
+		}
+		await navigate(`${basePath}/monitor/:id`, { params: { id: result.monitor.id } });
+		monitorsMapIntegration.selectedMonitorId = result.monitor.id;
+	}
+
+	function selectGeocode(result: Extract<SearchResult, { type: "geocode" }>) {
+		const { feature } = result;
+		marker?.remove();
+		marker = null;
+		if (mapManager.map) {
+			const center: [number, number] = [feature.center[0], feature.center[1]];
+			marker = new Marker().setLngLat(center).addTo(mapManager.map);
+			const isAddress = feature.place_type?.[0] === "address";
+			mapManager.map.flyTo({
+				center,
+				...(isAddress && { zoom: 16 })
+			});
+		}
+		results = [];
+		collapsed = true;
+	}
+
+	onDestroy(() => {
+		marker?.remove();
+	});
+</script>
+
+<div
+	class={[
+		"flex flex-col bg-white shadow-md overflow-hidden transition-all duration-300 select-none",
+		collapsed ? "w-12 h-12 rounded-full" : "w-90 rounded-3xl",
+		!collapsed && results.length ? "max-h-90" : "max-h-12"
+	]}
+	use:clickOutside
+>
+	<div class="flex items-center w-full h-12 shrink-0">
+		<button
+			class="w-12 h-12 shrink-0 flex items-center justify-center rounded-full bg-brand border-4 border-white"
+			onclick={openSearch}
+			aria-label="Open search"
+		>
+			<SearchIcon size="24" color="#FFFFFF" />
+		</button>
+		<div class="overflow-hidden w-full h-full flex items-center">
+			<input
+				bind:this={inputEl}
+				bind:value={searchText}
+				oninput={debouncedSearch}
+				type="text"
+				placeholder="Search monitors or locations..."
+				class="h-full px-2 text-sm bg-transparent border-none outline-none w-full"
+				tabindex={collapsed ? -1 : 0}
+			/>
+			{#if searchText && !collapsed}
+				<button
+					onclick={clearSearch}
+					class="px-2 text-gray-400 hover:text-gray-600 text-xl leading-none cursor-pointer"
+					aria-label="Clear search">×</button
+				>
+			{/if}
+		</div>
+	</div>
+	<div
+		class={[
+			"overflow-y-auto transition-all duration-300 divide-y divide-gray-100",
+			!collapsed ? "max-h-80" : "max-h-0"
+		]}
+	>
+		{#each results as result (result.type === "monitor" ? result.monitor.id : result.feature.place_name)}
+			{#if result.type === "monitor"}
+				<button
+					onclick={() => selectMonitor(result)}
+					class="flex items-center w-full h-12 px-4 hover:brightness-95 bg-white text-left"
+				>
+					{#if result.logo.url}
+						<img
+							src={result.logo.url}
+							alt={result.logo.alt}
+							class="w-10 h-10 object-contain mr-3 shrink-0"
+						/>
+					{/if}
+					<span class="text-sm truncate">{result.monitor.name}</span>
+				</button>
+			{:else}
+				{@const comma = result.feature.place_name.indexOf(",")}
+				<button
+					onclick={() => selectGeocode(result)}
+					class="flex items-center w-full h-12 px-4 hover:brightness-95 bg-white text-left"
+				>
+					<span class="svg-icon location-on bg-brand w-6 h-6 shrink-0 mr-3"></span>
+					<div class="min-w-0">
+						<p class="text-sm font-medium truncate">
+							{result.feature.place_name.substring(0, comma < 0 ? undefined : comma)}
+						</p>
+						{#if comma >= 0}
+							<p class="text-xs text-muted-foreground truncate">
+								{result.feature.place_name.substring(comma + 1).trim()}
+							</p>
+						{/if}
+					</div>
+				</button>
+			{/if}
+		{/each}
+	</div>
+</div>

package/dist/lib/search/Search.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Search: import("svelte").Component<Record<string, never>, {}, "">;
+type Search = ReturnType<typeof Search>;
+export default Search;

package/dist/lib/search/service.d.ts

@@ -0,0 +1,17 @@
+import { type GeocodingFeature } from "@maptiler/sdk";
+import type { MonitorLatestType } from "@sjvair/sdk";
+export type MonitorResult = {
+    type: "monitor";
+    monitor: MonitorLatestType<"pm25" | "o3">;
+    logo: {
+        url: string;
+        alt: string;
+    };
+};
+export type GeocodeResult = {
+    type: "geocode";
+    feature: GeocodingFeature;
+};
+export type SearchResult = MonitorResult | GeocodeResult;
+export declare function monitorSearch(query: string): Promise<SearchResult[]>;
+export declare function geocode(query: string): Promise<SearchResult[]>;

package/dist/lib/search/service.js

@@ -0,0 +1,80 @@
+import { geocoding } from "@maptiler/sdk";
+import { monitorsManager } from "../monitors/monitors.svelte";
+import AirGradientLogo from "../assets/logos/airgradient-blue.svg";
+import AirNowLogo from "../assets/logos/airnow-compact.jpg";
+import CarbLogo from "../assets/logos/carb-compact.jpg";
+import PurpleairLogo from "../assets/logos/purpleair-compact.png";
+import SJVAirLogo from "../assets/logos/sjvair.svg";
+const SJV_CENTER = [-119.8, 36.76];
+function getMonitorLogo(monitor) {
+    switch (monitor.data_source.name) {
+        case "AQview":
+            return { url: CarbLogo, alt: "AQview" };
+        case "AirNow.gov":
+            return { url: AirNowLogo, alt: "AirNow.gov" };
+        case "PurpleAir":
+            return { url: PurpleairLogo, alt: "PurpleAir" };
+        case "Central California Asthma Collaborative":
+            return { url: SJVAirLogo, alt: "Central California Asthma Collaborative" };
+        case "AirGradient":
+            return { url: AirGradientLogo, alt: "AirGradient" };
+        default:
+            console.warn(`[search] Unknown data source: ${monitor.data_source.name}`);
+            return { url: "", alt: "" };
+    }
+}
+let proximityCache = null;
+function getProximity() {
+    return (proximityCache ??= resolveProximity());
+}
+function resolveProximity() {
+    return new Promise((resolve) => {
+        if (!navigator.geolocation) {
+            resolve(SJV_CENTER);
+            return;
+        }
+        const timeout = setTimeout(() => resolve(SJV_CENTER), 3000);
+        navigator.geolocation.getCurrentPosition((pos) => {
+            clearTimeout(timeout);
+            resolve([pos.coords.longitude, pos.coords.latitude]);
+        }, () => {
+            clearTimeout(timeout);
+            resolve(SJV_CENTER);
+        });
+    });
+}
+export async function monitorSearch(query) {
+    if (!monitorsManager.latest)
+        return [];
+    const normalized = query.toLowerCase();
+    const exact = [];
+    const prefix = [];
+    const substr = [];
+    for (const monitor of monitorsManager.latest.values()) {
+        const name = monitor.name.toLowerCase();
+        if (name === normalized)
+            exact.push(monitor);
+        else if (name.startsWith(normalized))
+            prefix.push(monitor);
+        else if (name.includes(normalized))
+            substr.push(monitor);
+    }
+    return [...exact, ...prefix, ...substr]
+        .slice(0, 4)
+        .map((monitor) => ({ type: "monitor", monitor, logo: getMonitorLogo(monitor) }));
+}
+export async function geocode(query) {
+    const proximity = await getProximity();
+    try {
+        const result = await geocoding.forward(query, {
+            country: ["us"],
+            fuzzyMatch: true,
+            limit: 4,
+            proximity
+        });
+        return result.features.map((feature) => ({ type: "geocode", feature }));
+    }
+    catch {
+        return [];
+    }
+}

package/dist/lib/utils.d.ts

@@ -0,0 +1,13 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, "child"> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};
+export declare function debounce<T extends (...args: unknown[]) => void>(fn: T, wait: number): (...args: Parameters<T>) => void;

package/dist/lib/utils.js

@@ -1,8 +1,12 @@
-import e from "./node_modules/clsx/dist/clsx.js";
-import { twMerge as t } from "./node_modules/tailwind-merge/dist/bundle-mjs.js";
-//#region src/lib/utils.ts
-function n(...n) {
-	return t(e(n));
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+export function debounce(fn, wait) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => fn(...args), wait);
+    };
 }
-//#endregion
-export { n as cn };

package/dist/lib/weather.d.ts

@@ -0,0 +1 @@
+export declare function fetchTempByCoords(coords: [number, number] | Array<number>): Promise<number>;

package/dist/lib/weather.js

@@ -1,8 +1,12 @@
-//#region src/lib/weather.ts
-async function e(e) {
-	if (e.length !== 2) throw Error("Invalid coordinates provided for fetching temperature");
-	let t = `https://api.weather.gov/points/${e.toReversed().join(",")}`;
-	return fetch(t).then((e) => e.json()).then(async (e) => (await fetch(e.properties.forecastHourly).then((e) => e.json())).properties.periods[0].temperature);
+export async function fetchTempByCoords(coords) {
+    if (coords.length !== 2) {
+        throw new Error("Invalid coordinates provided for fetching temperature");
+    }
+    const url = `https://api.weather.gov/points/${coords.toReversed().join(",")}`;
+    return fetch(url)
+        .then((res) => res.json())
+        .then(async (data) => {
+        const forecast = await fetch(data.properties.forecastHourly).then((res) => res.json());
+        return forecast.properties.periods[0].temperature;
+    });
 }
-//#endregion
-export { e as fetchTempByCoords };

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

@@ -0,0 +1,10 @@
+import { Map as MaptilerMap } from "@maptiler/sdk";
+import { MapLayerIntegration } from "../map/integrations/map-layer-integration.svelte.ts";
+declare class WindMapIntegration extends MapLayerIntegration {
+    referenceId: string;
+    beforeLayer: string;
+    enabled: boolean;
+    mapLayer: Parameters<MaptilerMap["addLayer"]>[0];
+}
+export declare const windMapIntegration: WindMapIntegration;
+export type { WindMapIntegration };