@sjvair/monitor-map 3.2.0 → 3.2.2

package/dist/lib/monitors/components/MonitorsDisplayOptions.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { MonitorsMeta, SJVAirMonitorDeviceMeta } from "@sjvair/sdk";
+	import type { MonitorsMeta } from "@sjvair/sdk";
 	import DisplayOption from "../../components/DisplayOption.svelte";
 	import SegmentedControl from "../../components/SegmentedControl.svelte";
 	import ToggleSwitch from "../../components/ToggleSwitch.svelte";
@@ -22,17 +22,28 @@
 		}
 	];
 
-	const monitorDisplayOptions = $derived.by(() => {
-		return Object.entries(monitorsMapIntegration.displayOptions).filter(
-			([key, opt]) =>
-				key === "inactive" ||
-				monitorsManager.meta?.asIter.monitors.some(
-					(m: SJVAirMonitorDeviceMeta) =>
-						m.label === opt.label &&
-						monitorsManager.pollutant &&
-						monitorsManager.pollutant in m.entries
-				)
+	// "inside" is a location filter (indoor vs outdoor), not tied to a monitor type or
+	// pollutant, so it's always shown, like "inactive".
+	const uiOnlyDisplayOptions = new Set(["inactive", "inside"]);
+
+	// "sjvair" (SJVAir non-FEM) isn't its own backend monitor type — it groups is_sjvair-flagged
+	// purpleair devices with airgradient devices (see monitorsMapIntegration.filters/featuresByType),
+	// so its visibility follows whichever of those two types supports the current pollutant.
+	const sjvairUnderlyingTypes = ["purpleair", "airgradient"];
+
+	function pollutantSupportedByType(type: string): boolean {
+		const deviceMeta = monitorsManager.meta?.monitors[type];
+		return (
+			!!deviceMeta && !!monitorsManager.pollutant && monitorsManager.pollutant in deviceMeta.entries
 		);
+	}
+
+	const monitorDisplayOptions = $derived.by(() => {
+		return Object.entries(monitorsMapIntegration.displayOptions).filter(([key]) => {
+			if (uiOnlyDisplayOptions.has(key)) return true;
+			if (key === "sjvair") return sjvairUnderlyingTypes.some(pollutantSupportedByType);
+			return pollutantSupportedByType(key);
+		});
 	});
 
 	$effect(() => {

package/dist/lib/search/Search.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onDestroy } from "svelte";
 	import { Marker } from "@maptiler/sdk";
-	import { SearchIcon } from "@lucide/svelte";
+	import { MapPinIcon, SearchIcon } from "@lucide/svelte";
 	import { useMonitorMapRouter } from "../router-context";
 	import { mapManager } from "../map/map.svelte";
 	import { debounce } from "../utils";
@@ -169,9 +169,9 @@
 				{@const comma = result.feature.place_name.indexOf(",")}
 				<button
 					onclick={() => selectGeocode(result)}
-					class="flex h-12 w-full items-center bg-white px-4 text-left hover:brightness-95"
+					class="flex h-12 w-full items-center gap-3 bg-white px-4 text-left hover:brightness-95"
 				>
-					<span class="svg-icon location-on bg-brand mr-3 h-6 w-6 shrink-0"></span>
+					<MapPinIcon class="text-brand h-6 w-6 shrink-0" />
 					<div class="min-w-0">
 						<p class="truncate text-sm font-medium">
 							{result.feature.place_name.substring(0, comma < 0 ? undefined : comma)}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@sjvair/monitor-map",
 	"description": "SJVAir's interactive monitor map",
-	"version": "3.2.0",
+	"version": "3.2.2",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/SJVAir/monitor-map"

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { MonitorsMeta, SJVAirMonitorDeviceMeta } from "@sjvair/sdk";
+	import type { MonitorsMeta } from "@sjvair/sdk";
 	import DisplayOption from "$lib/components/DisplayOption.svelte";
 	import SegmentedControl from "$lib/components/SegmentedControl.svelte";
 	import ToggleSwitch from "$lib/components/ToggleSwitch.svelte";
@@ -22,17 +22,28 @@
 		}
 	];
 
-	const monitorDisplayOptions = $derived.by(() => {
-		return Object.entries(monitorsMapIntegration.displayOptions).filter(
-			([key, opt]) =>
-				key === "inactive" ||
-				monitorsManager.meta?.asIter.monitors.some(
-					(m: SJVAirMonitorDeviceMeta) =>
-						m.label === opt.label &&
-						monitorsManager.pollutant &&
-						monitorsManager.pollutant in m.entries
-				)
+	// "inside" is a location filter (indoor vs outdoor), not tied to a monitor type or
+	// pollutant, so it's always shown, like "inactive".
+	const uiOnlyDisplayOptions = new Set(["inactive", "inside"]);
+
+	// "sjvair" (SJVAir non-FEM) isn't its own backend monitor type — it groups is_sjvair-flagged
+	// purpleair devices with airgradient devices (see monitorsMapIntegration.filters/featuresByType),
+	// so its visibility follows whichever of those two types supports the current pollutant.
+	const sjvairUnderlyingTypes = ["purpleair", "airgradient"];
+
+	function pollutantSupportedByType(type: string): boolean {
+		const deviceMeta = monitorsManager.meta?.monitors[type];
+		return (
+			!!deviceMeta && !!monitorsManager.pollutant && monitorsManager.pollutant in deviceMeta.entries
 		);
+	}
+
+	const monitorDisplayOptions = $derived.by(() => {
+		return Object.entries(monitorsMapIntegration.displayOptions).filter(([key]) => {
+			if (uiOnlyDisplayOptions.has(key)) return true;
+			if (key === "sjvair") return sjvairUnderlyingTypes.some(pollutantSupportedByType);
+			return pollutantSupportedByType(key);
+		});
 	});
 
 	$effect(() => {

package/src/lib/search/Search.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onDestroy } from "svelte";
 	import { Marker } from "@maptiler/sdk";
-	import { SearchIcon } from "@lucide/svelte";
+	import { MapPinIcon, SearchIcon } from "@lucide/svelte";
 	import { useMonitorMapRouter } from "../router-context";
 	import { mapManager } from "$lib/map/map.svelte";
 	import { debounce } from "$lib/utils";
@@ -169,9 +169,9 @@
 				{@const comma = result.feature.place_name.indexOf(",")}
 				<button
 					onclick={() => selectGeocode(result)}
-					class="flex h-12 w-full items-center bg-white px-4 text-left hover:brightness-95"
+					class="flex h-12 w-full items-center gap-3 bg-white px-4 text-left hover:brightness-95"
 				>
-					<span class="svg-icon location-on bg-brand mr-3 h-6 w-6 shrink-0"></span>
+					<MapPinIcon class="text-brand h-6 w-6 shrink-0" />
 					<div class="min-w-0">
 						<p class="truncate text-sm font-medium">
 							{result.feature.place_name.substring(0, comma < 0 ? undefined : comma)}