add - descriptive tooltips and default to most recent vaa on mount

client/src/components/Widgets/settings/VaaMapSettings.jsx

@@ -11,32 +11,55 @@ export default function VaaMapSettings({widgetId, currentSettings}) {
   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()];
+  // 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]);
 
-  const filteredItems = useMemo(() => {
-    if (!inputValue.trim()) return unique_data;
-    return unique_data.filter((item) => item.volc_name.toLowerCase().includes(inputValue.toLowerCase()));
-  }, [unique_data, inputValue]);
+  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]);
 
-  const collection = useMemo(() => {
+  // 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: filteredItems.sort((a, b) => a.volc_name.localeCompare(b.volc_name)),
+      items: filtered_vaas?.sort((a, b) => a.volc_name.localeCompare(b.volc_name)),
       itemToString: (item) => item.volc_name,
       itemToValue: (item) => item.volc_name,
     });
-  }, [filteredItems]);
+  }, [filtered_vaas]);
 
+  // update state w/ selected vaa so map zooms to polygon
   useEffect(() => {
-    updateSettings(widgetId, {data: unique_data, isLoading: isLoading, error: error, selected: inputValue});
-  }, [updateSettings, widgetId, unique_data, isLoading, error, inputValue]);
+    updateSettings(widgetId, {selected: inputValue});
+  }, [updateSettings, widgetId, inputValue]);
 
 
   return (
-    <Combobox.Root openOnClick collection={collection} onInputValueChange={(e) => setInputValue(e.inputValue)}>
+    <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"/>
@@ -49,7 +72,7 @@ export default function VaaMapSettings({widgetId, currentSettings}) {
         <Combobox.Positioner>
           <Combobox.Content>
             <Combobox.Empty>No VAA's found</Combobox.Empty>
-            {collection.items.map((vaa) =>
+            {vaa_collection.items.map((vaa) =>
                 <Combobox.Item key={vaa?.volc_name} item={vaa}>
                   {vaa?.volc_name}
                 </Combobox.Item>