@sjvair/monitor-map 3.0.3 → 3.0.5

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

@@ -1,64 +1,39 @@
-import * as e from "svelte/internal/client";
-import { XMap as t } from "@tstk/builtin-extensions";
-import { getMonitors as n, getMonitorsLatest as r, getMonitorsMeta as i } from "@sjvair/sdk";
-import { Interval as a } from "@tstk/utils";
-//#region src/lib/monitors/monitors.svelte.ts
-var o = class {
-	autoUpdate = new a(async () => await this.update(), 120 * 1e3);
-	#e = e.state(!1);
-	get initialized() {
-		return e.get(this.#e);
-	}
-	set initialized(t) {
-		e.set(this.#e, t, !0);
-	}
-	#t = e.state(null);
-	get latest() {
-		return e.get(this.#t);
-	}
-	set latest(t) {
-		e.set(this.#t, t, !0);
-	}
-	#n = e.state(null);
-	get list() {
-		return e.get(this.#n);
-	}
-	set list(t) {
-		e.set(this.#n, t, !0);
-	}
-	#r = e.state(null);
-	get meta() {
-		return e.get(this.#r);
-	}
-	set meta(t) {
-		e.set(this.#r, t, !0);
-	}
-	#i = e.state(null);
-	get pollutant() {
-		return e.get(this.#i);
-	}
-	set pollutant(t) {
-		e.set(this.#i, t, !0);
-	}
-	#a = e.derived(() => this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null);
-	get levels() {
-		return e.get(this.#a);
-	}
-	set levels(t) {
-		e.set(this.#a, t);
-	}
-	async init(e) {
-		this.initialized ||= ([this.list, this.meta] = await Promise.all([n(), i()]), this.pollutant = e === "pm25" || e === "o3" ? e : this.meta.default_pollutant, this.latest = await s(this.pollutant), this.autoUpdate.start(), !0);
-	}
-	async update() {
-		this.initialized && ([this.list, this.latest] = await Promise.all([n(), s(this.pollutant || this.meta?.default_pollutant || "pm25")]));
-	}
-};
-async function s(e) {
-	let n = await r(e), i = new t();
-	for (let e of n) i.set(e.id, e);
-	return i;
+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 c = new o();
-//#endregion
-export { c 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

@@ -1,13 +1,13 @@
-import { getContext as e, setContext as t } from "svelte";
-//#region src/lib/router-context.ts
-var n = Symbol("monitor-map-router");
-function r(e) {
-	t(n, e);
+import { getContext, setContext } from "svelte";
+export const ROUTER_KEY = Symbol("monitor-map-router");
+export function provideMonitorMapRouter(api) {
+    setContext(ROUTER_KEY, api);
 }
-function i() {
-	let t = e(n);
-	if (!t) throw Error("monitor-map router context not found. Wrap your app root with provideMonitorMapRouter(...) before rendering monitor-map components.");
-	return t;
+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;
 }
-//#endregion
-export { n as ROUTER_KEY, r as provideMonitorMapRouter, i as useMonitorMapRouter };

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

@@ -1,10 +1,11 @@
-import e from "./MonitorMapLayout.js";
-import t from "./MainMapView.js";
-//#region src/lib/routes.ts
-var n = {
-	layout: e,
-	"/": t,
-	"/monitor/:id": () => import("./MonitorDetailPanel.js")
+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")
 };
-//#endregion
-export { n as monitorMapRoutes };

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[]>;