85 lines
3.4 KiB
React
85 lines
3.4 KiB
React
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);
|
|
|
|
// retrieving only the latest VAA for each volcano (resultant has no order)
|
|
const latest_vaas = useMemo(() => {
|
|
if (!data || !Array.isArray(data)) return undefined;
|
|
// retrieves last occurance of vaa, so the vaa's need to stay in rev-chrono order here to work
|
|
return [...new Map(data.map(item => [item['volc_name'], item])).values()];
|
|
}, [data]);
|
|
|
|
useEffect(() => {
|
|
if (!latest_vaas) updateSettings(widgetId, {isLoading: isLoading, error: error});
|
|
else updateSettings(widgetId, {data: latest_vaas, isLoading: isLoading, error: error});
|
|
}, [updateSettings, widgetId, latest_vaas, isLoading, error]);
|
|
|
|
// find volc_name of last issued vaa, map will default to this ash polygon
|
|
const default_vaa = useMemo(() => {
|
|
if (!latest_vaas || latest_vaas.length === 0) return undefined;
|
|
const chrono_order = latest_vaas.sort((a, b) => new Date(b.vaa_datetime) - new Date(a.vaa_datetime));
|
|
// console.log(chrono_order);
|
|
// console.log(chrono_order[0].volc_name);
|
|
return chrono_order[0].volc_name;
|
|
}, [latest_vaas]);
|
|
|
|
// set default vaa in settings
|
|
useEffect(() => {
|
|
if (default_vaa) updateSettings(widgetId, {defaultVAA: default_vaa});
|
|
}, [default_vaa, updateSettings, widgetId]);
|
|
|
|
|
|
// filtering based on what user types in search bar
|
|
const filtered_vaas = useMemo(() => {
|
|
if (!inputValue.trim()) return latest_vaas;
|
|
return latest_vaas?.filter((item) => item.volc_name.toLowerCase().includes(inputValue.toLowerCase()));
|
|
}, [latest_vaas, inputValue]);
|
|
|
|
const vaa_collection = useMemo(() => {
|
|
return createListCollection({
|
|
items: filtered_vaas?.sort((a, b) => a.volc_name.localeCompare(b.volc_name)),
|
|
itemToString: (item) => item.volc_name,
|
|
itemToValue: (item) => item.volc_name,
|
|
});
|
|
}, [filtered_vaas]);
|
|
|
|
// update state w/ selected vaa so map zooms to polygon
|
|
useEffect(() => {
|
|
updateSettings(widgetId, {selected: inputValue});
|
|
}, [updateSettings, widgetId, inputValue]);
|
|
|
|
|
|
return (
|
|
<Combobox.Root openOnClick collection={vaa_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>
|
|
{vaa_collection.items.map((vaa) =>
|
|
<Combobox.Item key={vaa?.volc_name} item={vaa}>
|
|
{vaa?.volc_name}
|
|
</Combobox.Item>
|
|
)}
|
|
</Combobox.Content>
|
|
</Combobox.Positioner>
|
|
</Portal>
|
|
</Combobox.Root>
|
|
)
|
|
} |