add working vaa ash-polygons map w/ volcano selection capabilities

2026-08-27 12:36:25 -07:00
parent 6eb5e42111
commit 6304db66c2
5 changed files with 274 additions and 13 deletions
@@ -0,0 +1,62 @@
+import {useMemo, useEffect, useState} from "react";
+import VdapApi from "@/hooks/useVdapApi.js";
+import useBuildUrl from "@/hooks/useBuildUrl.js";
+import {useDashboardStore} from "@/store/useDashboardStore.jsx";
+import {Combobox, createListCollection, Portal} from "@chakra-ui/react";
+
+export default function VaaMapSettings({widgetId, currentSettings}) {
+  const [inputValue, setInputValue] = useState("");
+  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
+
+  const url = useBuildUrl("api/v2/comm_coor_vaa", currentSettings?.startDate, currentSettings?.endDate);
+  const {data, isLoading, error} = VdapApi(url);
+
+  const unique_data = useMemo(() => {
+    if (!data || !Array.isArray(data)) return [];
+    const key = 'volc_name';
+    return [...new Map(data.map(item => [item[key], item])).values()];
+  }, [data]);
+
+  const filteredItems = useMemo(() => {
+    if (!inputValue.trim()) return unique_data;
+    return unique_data.filter((item) => item.volc_name.toLowerCase().includes(inputValue.toLowerCase()));
+  }, [unique_data, inputValue]);
+
+  const collection = useMemo(() => {
+    return createListCollection({
+      items: filteredItems.sort((a, b) => a.volc_name.localeCompare(b.volc_name)),
+      itemToString: (item) => item.volc_name,
+      itemToValue: (item) => item.volc_name,
+    });
+  }, [filteredItems]);
+
+  useEffect(() => {
+    updateSettings(widgetId, {data: unique_data, isLoading: isLoading, error: error, selected: inputValue});
+  }, [updateSettings, widgetId, unique_data, isLoading, error, inputValue]);
+
+
+  return (
+    <Combobox.Root openOnClick collection={collection} onInputValueChange={(e) => setInputValue(e.inputValue)}>
+      <Combobox.Label>Select a Volcano</Combobox.Label>
+      <Combobox.Control>
+        <Combobox.Input placeholder="Search recent VAA's by volcano name"/>
+        <Combobox.IndicatorGroup>
+          <Combobox.ClearTrigger />
+        </Combobox.IndicatorGroup>
+      </Combobox.Control>
+
+      <Portal>
+        <Combobox.Positioner>
+          <Combobox.Content>
+            <Combobox.Empty>No VAA's found</Combobox.Empty>
+            {collection.items.map((vaa) =>
+                <Combobox.Item key={vaa?.volc_name} item={vaa}>
+                  {vaa?.volc_name}
+                </Combobox.Item>
+            )}
+          </Combobox.Content>
+        </Combobox.Positioner>
+      </Portal>
+    </Combobox.Root>
+  )
+}