Merge branch '202608121500_Add_AlertChangesWidget' into '20260721_0845_Venessa_addingWidgets'

Add Alert Changes Widget

See merge request vkuchenik/website-framework!107

client/eslint.config.js

@@ -24,6 +24,6 @@ export default defineConfig([globalIgnores(['dist']), {
     },
   },
   rules: {
-    'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    'no-unused-vars': 'off',
   },
 }, ...storybook.configs["flat/recommended"]])

client/src/components/Widgets/AlertChanges.jsx

@@ -0,0 +1,219 @@
+import {useDashboardStore} from "@/store/useDashboardStore.jsx";
+import VdapApi from "../../hooks/useVdapApi.js";
+import useBuildUrl from "../../hooks/useBuildUrl.js";
+import { Footprints, Plane, Sailboat, TrendingUp, TrendingDown } from 'lucide-react';
+import {Box, Collapsible, Flex, Spinner, Text, Timeline, Center} from "@chakra-ui/react";
+import { useMemo, useCallback } from "react";
+
+
+export default function AlertChanges({ settings, widgetID}) {
+  // Find this specific widgets object in the state list of active & displayed widgets
+  const thisWidget = useDashboardStore(useCallback((state) =>
+    state.widgets.find((widget) => widget.id === widgetID), [widgetID]
+  ));
+
+  // build url, default is 7 days past
+  const url = useBuildUrl('/api/v2/alert_changes', settings?.startDate, settings?.endDate);
+
+  // call api hook to retrieve data
+  const {data: apiData, isLoading, error} = VdapApi(url);
+
+  const data = useMemo(() => {
+    if (apiData.length === 0) return [];
+
+    // .reduce() is a built-in array method used to transform an entire array into a single value (like an object)
+    // here it returns a single massive object w/ volcano names as keys
+    const grouped = apiData.reduce((accumulator, item) => {
+      if (!accumulator[item.volcano]) accumulator[item.volcano] = [];
+      accumulator[item.volcano].push(item);
+      return accumulator;
+    }, {});
+
+    // converts the 'grouped' object back into an array of [key, value] pairs
+    const group_arr = Object.entries(grouped);
+
+    // sort data newest to oldest within each volcano
+    const sorted = group_arr.map((item) =>
+      [
+        item[0], // volcano name
+        [...(item[1])].sort((a, b) =>
+          new Date(b.alert_start_date_local) - new Date(a.alert_start_date_local))
+      ]
+    );
+
+    // volcano with most recent alert level change appears at top of list
+    const sorted_entries = [...sorted].sort((a, b) => new Date(b[1][0].alert_start_date_local) - new Date(a[1][0].alert_start_date_local));
+
+    if (thisWidget?.size === "small") {
+      return (sorted_entries.map((volcano) => {
+        const domain = volcano[1].reduce((acc, curr) => {
+          if (!acc[curr.alert_scheme_domain]) acc[curr.alert_scheme_domain] = [];
+          acc[curr.alert_scheme_domain].push(curr);
+          return acc;
+        }, {});
+
+        const domain_arr = Object.entries(domain);
+        return [volcano[0], domain_arr];
+      }));
+    }
+
+    return sorted_entries;
+  }, [apiData, thisWidget]);
+
+  // list of alert colors used for coloring text below
+  const alertColors = {
+    Red: "red.400",
+    Orange: "orange.400",
+    Yellow: "yellow.400",
+    Green: "green.400",
+  };
+
+  if (isLoading) return (
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+      <Spinner size="xl" color="blue.400" thickness="4px"/>
+    </Flex>
+  );
+
+  if (error) return (
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+      <Text color="red.400">{error}</Text>
+    </Flex>
+  );
+
+  if (data.length === 0) return (
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+      <Text textAlign="center" color="gray.400">No flight level data available for the selected dates.</Text>
+    </Flex>
+  );
+
+  return (
+    <Box display="flex" flexDirection="column" gap={2} p={2} w="100%" h="100%" borderRadius="lg" bg="gray.800" overflowY="auto">
+      {data.map((volcano, index) => {
+        if (thisWidget?.size === "large") return (
+          <Collapsible.Root key={index} w="100%">
+            {/* Using context to dynamically change the border radii of the triggers */}
+            <Collapsible.Context>
+              {(collapsible) => (
+                <>
+                  <Collapsible.Trigger w="100%">
+                    <Flex direction="row"
+                          w="100%"
+                          justify="space-between" align="center"
+                          p={1} pl={3} pr={3}
+                          borderTopRadius="lg"
+                          borderBottomRadius={collapsible.open ? "0" : "lg"}
+                          bg="gray.600"
+                    >
+                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
+                        <Text truncate >{volcano[0]}</Text> {/* volcano name */}
+                        <Text truncate fontSize="xs" color="gray.300/90">{volcano[1][0]?.alert_start_date_local}</Text>
+                      </Flex>
+                      <Flex w="100%" minW={0} justify="right">
+                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontWeight="semibold">{volcano[1][0]?.alert_level_name}</Text>
+                      </Flex>
+                    </Flex>
+                  </Collapsible.Trigger>
+                  <Collapsible.Content w="100%" p={3} borderBottomRadius="lg" bg="gray.700">
+                    <Timeline.Root size="md" variant="subtle">
+                      {volcano[1]?.map((object, index) => (
+                        <Timeline.Item key={index} w="100%" h="100%">
+                          <Timeline.Connector >
+                            {/*<Timeline.Separator borderWidth="1px" borderColor="gray.600"/>*/}
+                            <Timeline.Indicator outline="none" bg="gray.200" color="gray.500" size="lg">
+                              {object?.alert_scheme_domain === "terrestrial" && <Footprints size={15} />}
+                              {object?.alert_scheme_domain === "aviation" && <Plane size={15} />}
+                              {object?.alert_scheme_domain === "maritime" && <Sailboat size={15} />}
+                            </Timeline.Indicator>
+                            <Timeline.Indicator h="50%" outline="none" bg="gray.700" color="gray.100" size="lg">
+                              {object?.change_type === "increase" ? <TrendingUp /> : <TrendingDown />}
+                            </Timeline.Indicator>
+                          </Timeline.Connector>
+                          <Timeline.Content w="100%" h="100%">
+                            {/*<Timeline.Title>{object?.volcano}</Timeline.Title>*/}
+                            <Timeline.Description w="100%" h="100%" gap={1}>
+                              <Flex direction="column" gap={1}>
+                                <Text w="100%" h="100%" color="gray.200">{object?.alert_start_date_local}</Text>
+                                <Text w="100%" h="100%"
+                                      color={alertColors[object?.alert_level_name] || "gray.200"}
+                                      fontSize="md"
+                                      fontWeight="semibold"
+                                >
+                                  {object?.alert_level_name}
+                                </Text>
+                                <Flex w="100%" h="20px" direction="row" justify="left" align="center">
+                                  <Text color="gray.300">Alert Scale: </Text>
+                                  {(Array.from({ length: Number(object?.alert_scheme_highest) - Number(object?.alert_scheme_lowest) + 1}, (v, i) => Number(object?.alert_scheme_lowest) + i))
+                                    .map((num) => (
+                                      <Center
+                                        key={num}
+                                        w="20px" h="100%"
+                                        color="gray.300"
+                                        bg={num === Number(object?.alert_level_rank) ? "gray.300/20" : null} // alert level rank is a string for some reason
+                                        borderRadius={num === Number(object?.alert_level_rank) ? "xl" : null}
+                                        textAlign="center"
+                                        fontSize="sm"
+                                        fontWeight="semibold"
+                                      >
+                                        {num}
+                                      </Center>
+                                    ))
+                                  }
+                                </Flex>
+                              </Flex>
+                            </Timeline.Description>
+                          </Timeline.Content>
+                        </Timeline.Item>
+                      ))}
+                    </Timeline.Root>
+                  </Collapsible.Content>
+                </>
+              )}
+            </Collapsible.Context>
+          </Collapsible.Root>
+        )
+        else if (thisWidget?.size === "small") return (
+          volcano[1]?.map((domain, index) => (
+            <Flex
+              key={index}
+              direction="row"
+              w="100%"
+              gap={2}
+              justify="space-between" align="center"
+              p={1} pl={3} pr={3}
+              borderRadius="lg"
+              bg="gray.600"
+            >
+              <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
+                <Flex direction="row" w="100%" gap={2} align="center">
+                  <Flex color="gray.300">
+                    {domain[0] === "aviation" && <Plane size={15}/>}
+                    {domain[0] === "terrestrial" && <Footprints size={15}/>}
+                    {domain[0] === "maritime" && <Sailboat size={15}/>}
+                  </Flex>
+                  <Text truncate>{volcano[0] || ""}</Text> {/* volcano name */}
+                </Flex>
+                <Text truncate w="100%" fontSize="xs" color="gray.300/90">{domain[1]?.[0]?.alert_start_date_local || ""}</Text>
+              </Flex>
+
+              <Flex direction="row" w="100%" minW={0} justify="right" gap={2} color="gray.200">
+                <Flex w="25px" justify="right">
+                  {domain[1]?.[0]?.change_type === "increase" ? <TrendingUp/> : <TrendingDown/>}
+                </Flex>
+                <Text
+                  truncate
+                  pl={2} pr={2}
+                  borderRadius="lg"
+                  bg="gray.800/50"
+                  color={alertColors[domain[1]?.[0]?.alert_level_name] || "gray.100"}
+                  fontWeight="semibold"
+                >
+                  {domain[1]?.[0]?.alert_level_name}
+                </Text>
+              </Flex>
+            </Flex>
+          ))
+        );
+      })}
+    </Box>
+  )
+}

client/src/components/Widgets/ExplosionEvents.jsx

@@ -2,9 +2,10 @@ import { useMemo } from 'react';
 import { Box, Flex, Spinner, Text } from '@chakra-ui/react';
 import { useColorMode } from "@/components/ui/color-mode.jsx";
 import Plot from 'react-plotly.js';
-import VdapApi from '../../hooks/useVdapApi.js'; // Adjust path as needed
+import VdapApi from '../../hooks/useVdapApi.js';
+import useBuildUrl from "@/hooks/useBuildUrl.js";
 
-export default function ExplosionEvents({ settings }) {
+export default function ExplosionEvents({ settings, widgetID }) {
     // Plotly expects 'linear' for normal axes
     const plotYAxisType = settings?.yAxisScale === 'log' ? 'log' : 'linear';
 
@@ -12,8 +13,11 @@ export default function ExplosionEvents({ settings }) {
     const { colorMode } = useColorMode();
     const isDark = colorMode === 'dark';
 
+    // Generate url with input dates, default to 7 day range
+    const url = useBuildUrl('/api/v2/explosion_events', settings?.startDate, settings?.endDate);
+
     // Clean, single-line data fetching
-    const { data: apiData, isLoading, error } = VdapApi('/api/v2/explosion_events?start_date=2025-05-01&end_date=2025-05-30');
+    const { data: apiData, isLoading, error } = VdapApi(url);
 
     // 1. Build the Traces (Data parsing)
     const plotTraces = useMemo(() => {

client/src/components/Widgets/IvansAlerts.jsx

@@ -0,0 +1,246 @@
+import {Button, Flex, Spinner, Text, Box, Collapsible} from "@chakra-ui/react";
+import {useEffect, useMemo } from 'react';
+import {useDashboardStore} from "@/store/useDashboardStore.jsx";
+import VdapApi from '../../hooks/useVdapApi.js';
+import useBuildUrl from "@/hooks/useBuildUrl.js";
+
+export default function IvansAlerts({ settings, widgetID }) {
+  console.log("IvansAlerts widget ID: ", widgetID);
+  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
+  const isCopy = settings?.copyToClipboard === true; // acts as a fail-safe if no default setting is set
+  const sorts = settings?.activeSorts;
+
+  // build url, default is 7 days past
+  const url = useBuildUrl('/api/v2/comm_coor_ivans', settings?.startDate, settings?.endDate);
+
+  // VdapApi hook only calls api if the url changes and apiData remains stable since vdapApi uses state to track the data
+  const {data: apiData, isLoading, error} = VdapApi(url);
+
+  // TEST DATA
+  // const apiData = useMemo(() => {
+  //   return ([
+  //     {
+  //       id: 277,
+  //       volcano_number: 268010,
+  //       report_num: "2026-01",
+  //       report_date: "2026-05-08T22:05:44Z",
+  //       preparer: "hwright",
+  //       reviewer: "dramsey",
+  //       send_time: "2026-05-08T22:05:52Z",
+  //       volcano_name: "Dukono",
+  //       summary: "At 07:41 local time on 8 May 2026, an explosion of persistently active Dukono volcano occurred, producing an ash plume that rose over 15 km (52,000 feet) above sea level and ejecting ballistic blocks of lava beyond the crater rim. The eruption killed three tourists who were hiking within the official exclusion zone; other hikers were rescued and returned to safety.",
+  //       files: [
+  //         {
+  //           name: "277-268010-Dukono-2026-01.pdf",
+  //           url: "https://vdap.org/ivans/sitrep/277-268010-Dukono-2026-01.pdf",
+  //           type: "pdf"
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       id: 279,
+  //       volcano_number: 250030,
+  //       report_num: "2026-01",
+  //       report_date: "2026-05-15T05:11:53Z",
+  //       preparer: "charpel",
+  //       reviewer: "jlwnstrn",
+  //       send_time: "2026-05-15T05:12:01Z",
+  //       volcano_name: "Central Bismarck Sea",
+  //       summary: "A M5.4 earthquake occurred on 14 May 2026 at 17:13 (UTC) during the ongoing eruption of the submarine Central Bismarck Sea volcano that began 8 May 2026.  The volcano's current activity does not threaten any populated areas, but today’s earthquake indicates that eruptive activity will continue or increase.",
+  //       files: [
+  //         {
+  //           name: "279-250030-Central Bismarck Sea-2026-01.pdf",
+  //           url: "https://vdap.org/ivans/sitrep/279-250030-Central Bismarck Sea-2026-01.pdf",
+  //           type: "pdf"
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       id: 275,
+  //       volcano_number: 273030,
+  //       report_num: "2026-02",
+  //       report_date: "2026-05-03T05:28:12Z",
+  //       preparer: "dramsey",
+  //       reviewer: "hwright",
+  //       send_time: "2026-05-03T05:28:20Z",
+  //       volcano_name: "Mayon",
+  //       summary: "At around 5:30 PM local time on May 2, 2026, a pyroclastic flow (cloud of searing ash and rock particles) from erupting Mayon Volcano traveled around 4 km (~2.5 miles) down the southwestern slope of the volcano and produced an ash plume that drifted to the west-southwest.  At least 52 villages in various towns in Albay province were heavily affected by thick ash fall, reducing visibility to near zero and making travel extremely difficult.  There were no reports of casualties and the volcano alert level remained at Level 3 (on a 0-5 level scale).",
+  //       files: [
+  //         {
+  //           name: "275-273030-Mayon-2026-02.pdf",
+  //           url: "https://vdap.org/ivans/sitrep/275-273030-Mayon-2026-02.pdf",
+  //           type: "pdf"
+  //         },
+  //         {
+  //           name: "275-273030-Mayon-2026-02.pdf",
+  //           url: "https://vdap.org/ivans/sitrep/275-273030-Mayon-2026-02.pdf",
+  //           type: "pdf"
+  //         }
+  //       ]
+  //     }
+  //   ])
+  // }, []);
+
+  const data = useMemo(() => {
+    if (apiData?.length === 0) return [];
+    let sorted;
+
+    if (sorts?.volcanoSort && sorts?.timeSort === "asc") {
+      sorted = [...apiData].sort(ascTimeVolcanoSort);
+    } else if (sorts?.volcanoSort && sorts?.timeSort === "desc") {
+      sorted = [...apiData].sort(descTimeVolcanoSort);
+    } else if (sorts?.timeSort === "asc") {
+      sorted = [...apiData].sort(ascTimeSort);
+    } else {
+      sorted = [...apiData].sort(descTimeSort);
+    }
+
+    return sorted;
+  }, [apiData, sorts]);
+
+  useEffect(() => {
+    if(isCopy) {
+      const dataText = data.map((item) => {
+        return `${item.volcano_name}\n` +
+          `Report Number: ${item.report_num}\n` +
+          `Send Time: ${item.send_time}\n` +
+          `Preparer: ${item.preparer}\n` +
+          `Summary:\n${item.summary}\n`;
+      }).join('\n\n');
+      navigator.clipboard.writeText(dataText)
+        .then(() => {
+            alert('Copied to clipboard!');
+        })
+        .catch((err => {
+            console.error('Failed to copy: ', err);
+        }));
+      updateSettings(widgetID, {copyToClipboard: false});
+    }
+  }, [isCopy, data, widgetID, updateSettings]);
+
+  if (isLoading) return (
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+      <Spinner size="xl" color="blue.400" thickness="4px"/>
+    </Flex>
+  );
+
+  if (error) return (
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+      <Text color="red.400">{error}</Text>
+    </Flex>
+  );
+
+  if (data.length === 0) return (
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
+      <Text textAlign="center" color="gray.400">No flight level data available for the selected dates.</Text>
+    </Flex>
+  );
+
+  return (
+    <Flex direction="column"
+          w="100%" h="100%"
+          pos="relative"
+          justify="top" align="center"
+          p={2} gap={2}
+          overflow="auto"
+          borderRadius="xl"
+          bg="gray.800"
+    >
+      {data.map((item, index) => {
+        return (
+          <Collapsible.Root key={index} w="100%">
+            {/* Using context to dynamically change the border radii of the triggers */}
+            <Collapsible.Context>
+              {(collapsible) => (
+                <>
+                  <Collapsible.Trigger w="100%">
+                    <Flex direction="row"
+                          w="100%" h="100%"
+                          justify="space-between" align="center"
+                          p={1} pl={3} pr={3}
+                          gap={2}
+                          borderTopRadius="lg"
+                          borderBottomRadius={collapsible.open ? "0" : "lg"}
+                          bg="gray.700"
+                    >
+                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
+                        <Text truncate>{item.volcano_name}</Text>
+                        <Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
+                      </Flex>
+                      <Flex w="100%" minW={0} justify="right">
+                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100">{item.report_num}</Text>
+                      </Flex>
+                    </Flex>
+                  </Collapsible.Trigger>
+                  <Collapsible.Content w="100%" h="auto">
+                    {/* This box needs to be at h="100%" for the pdf toolbar to appear */}
+                    <Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="gray.700/45">
+                      <Flex direction="column" gap={2} bg="gray.800/75" borderRadius="lg" p={2} align="end">
+                        <Text w="100%" h="100%" fontSize="sm" color="gray.100" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
+                        <Text w="fit" fontSize="sm" color="gray.200" pl={1} pr={1} bg="gray.700/50" borderRadius="md">Preparer: {item?.preparer}</Text>
+                      </Flex>
+                      {item?.files?.map((file, index) => {
+                        return (
+                          <Box w="100%" h="100%" key={index} p={1}>
+                            <br />
+                            <Flex mb={2}>
+                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
+                            </Flex>
+                            <object
+                              data={`${file?.url}#view=FitH&toolbar=1`}
+                              type="application/pdf"
+                              style={{ width: '100%', height: '100%', display: 'block' }}
+                            >
+                              <Flex w="100%" h="100%" p={4} color="gray.400">
+                                <Text mb={2} color="fg.muted">
+                                  Your browser cannot display this PDF directly.
+                                </Text>
+                                <a href={file?.url} target="_blank">
+                                  Download PDF
+                                </a>
+                              </Flex>
+                            </object>
+                          </Box>
+                        )})}
+                    </Box>
+                  </Collapsible.Content>
+                </>
+              )}
+            </Collapsible.Context>
+          </Collapsible.Root>
+        )
+      })}
+    </Flex>
+  );
+}
+
+
+function ascTimeVolcanoSort(a, b) {
+  if (a.volcano_name < b.volcano_name) return -1
+  else if (a.volcano_name > b.volcano_name) return 1
+  else return ascTimeSort(a, b);
+}
+
+function descTimeVolcanoSort(a, b) {
+  if (a.volcano_name < b.volcano_name) return -1
+  else if (a.volcano_name > b.volcano_name) return 1
+  else return descTimeSort(a, b);
+}
+
+function ascTimeSort(a, b) {
+  const aTime = new Date(a.send_time);
+  const bTime = new Date(b.send_time);
+
+  if (aTime > bTime) return 1;
+  if (aTime < bTime) return -1;
+  return 0;
+}
+
+function descTimeSort(a, b) {
+  const aTime = new Date(a.send_time);
+  const bTime = new Date(b.send_time);
+
+  if (aTime > bTime) return -1;
+  if (aTime < bTime) return 1;
+  return 0;
+}

client/src/components/Widgets/IvansAlerts.stories.jsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import { http, HttpResponse } from 'msw'; // Import MSW
+import IvansAlerts from './IvansAlerts';
+
+export default {
+    title: 'Dashboard Widgets/IVANS Activity',
+    component: IvansAlerts,
+    decorators: [
+        (Story) => (
+            <Box
+                w="100%" maxW="1800px" h="400px"
+                border="2px dashed" borderColor="gray.600" p={2}
+                resize="both" overflow="auto"
+            >
+                <Story />
+            </Box>
+        ),
+    ],
+};
+
+const mockData = [
+    {
+        id: 279,
+        volcano_number: 250030,
+        report_num: "2026-01",
+        report_date: "2026-05-15T05:11:53Z",
+        preparer: "charpel",
+        reviewer: "jlwnstrn",
+        send_time: "2026-05-15T05:12:01Z",
+        volcano_name: "Central Bismarck Sea",
+        summary: "A M5.4 earthquake occurred on 14 May 2026 at 17:13 (UTC) during the ongoing eruption of the submarine Central Bismarck Sea volcano that began 8 May 2026.  The volcano's current activity does not threaten any populated areas, but today’s earthquake indicates that eruptive activity will continue or increase.",
+        files: [
+            {
+                name: "279-250030-Central Bismarck Sea-2026-01.pdf",
+                url: "https://vdap.org/ivans/sitrep/279-250030-Central Bismarck Sea-2026-01.pdf",
+                type: "pdf"
+            }
+        ]
+    },
+    {
+        id: 277,
+        volcano_number: 268010,
+        report_num: "2026-01",
+        report_date: "2026-05-08T22:05:44Z",
+        preparer: "hwright",
+        reviewer: "dramsey",
+        send_time: "2026-05-08T22:05:52Z",
+        volcano_name: "Dukono",
+        summary: "At 07:41 local time on 8 May 2026, an explosion of persistently active Dukono volcano occurred, producing an ash plume that rose over 15 km (52,000 feet) above sea level and ejecting ballistic blocks of lava beyond the crater rim. The eruption killed three tourists who were hiking within the official exclusion zone; other hikers were rescued and returned to safety.",
+        files: [
+            {
+                name: "277-268010-Dukono-2026-01.pdf",
+                url: "https://vdap.org/ivans/sitrep/277-268010-Dukono-2026-01.pdf",
+                type: "pdf"
+            }
+        ]
+    },
+    {
+        id: 275,
+        volcano_number: 273030,
+        report_num: "2026-02",
+        report_date: "2026-05-03T05:28:12Z",
+        preparer: "dramsey",
+        reviewer: "hwright",
+        send_time: "2026-05-03T05:28:20Z",
+        volcano_name: "Mayon",
+        summary: "At around 5:30 PM local time on May 2, 2026, a pyroclastic flow (cloud of searing ash and rock particles) from erupting Mayon Volcano traveled around 4 km (~2.5 miles) down the southwestern slope of the volcano and produced an ash plume that drifted to the west-southwest.  At least 52 villages in various towns in Albay province were heavily affected by thick ash fall, reducing visibility to near zero and making travel extremely difficult.  There were no reports of casualties and the volcano alert level remained at Level 3 (on a 0-5 level scale).",
+        files: [
+            {
+                name: "275-273030-Mayon-2026-02.pdf",
+                url: "https://vdap.org/ivans/sitrep/275-273030-Mayon-2026-02.pdf",
+                type: "pdf"
+            },
+            {
+                name: "275-273030-Mayon-2026-02.pdf",
+                url: "https://vdap.org/ivans/sitrep/275-273030-Mayon-2026-02.pdf",
+                type: "pdf"
+            }
+        ]
+    }
+];
+
+// Scenario LIVE: call our API for real
+export const LivePopulated = {};
+
+// Scenario 1: Successful API Call
+export const Populated = {
+    parameters: {
+        msw: {
+            handlers: [
+                // Intercept the exact URL your component is trying to fetch
+                http.get('*/api/v2/comm_coor_ivans?start_date=2026-01-01&end_date=2026-07-22', () => {
+                    // Return a 200 OK with the mock JSON
+                    return HttpResponse.json(mockData);
+                }),
+            ],
+        },
+    },
+};
+
+// Scenario 2: The 500 Server Crash
+export const ServerCrash = {
+    parameters: {
+        msw: {
+            handlers: [
+                http.get('*/api/v2/comm_coor_ivans?start_date=2026-01-01&end_date=2026-07-22', () => {
+                    // Return a 500 Error
+                    return new HttpResponse(null, { status: 500 });
+                }),
+            ],
+        },
+    },
+};
+
+// Scenario 3: Empty State (API works, but no data returned)
+export const EmptyData = {
+    parameters: {
+        msw: {
+            handlers: [
+                http.get('*/api/v2/comm_coor_ivans?start_date=2026-01-01&end_date=2026-07-22', () => {
+                    return HttpResponse.json([]);
+                }),
+            ],
+        },
+    },
+};

client/src/components/Widgets/PlumeEvents.jsx

@@ -0,0 +1,143 @@
+import VdapApi from '../../hooks/useVdapApi.js';
+import { useMemo } from 'react';
+import Plot from 'react-plotly.js';
+import {Box, Flex, Spinner, Text} from "@chakra-ui/react";
+import useBuildUrl from "@/hooks/useBuildUrl.js";
+
+export default function PlumeEvents({ settings, widgetID}) {
+  // Build url, defaults to 7 days past
+  const url = useBuildUrl('/api/v2/plume_events', settings?.startDate, settings?.endDate);
+
+  // Retrieve data from api
+  const { data: apiData, isLoading, error } = VdapApi(url);
+
+  const plotTraces = useMemo(() => {
+    if (!apiData || apiData.length === 0) return [];
+
+    // Array of distinct Plotly shapes
+    const Symbolway = [
+      'circle', 'square', 'diamond',
+      'triangle-up', 'triangle-down',
+      'star', 'hexagram', 'pentagon',
+      'hexagon', 'octagon', 'cross', 'x'
+    ];
+
+    // Sort data descending by plume height so smaller dots draw on top of larger ones
+    const sortedData = [...apiData].sort((a, b) => b.h_avs_m - a.h_avs_m);
+
+    // Efficiently group into Plotly traces by volcano
+    const groupedData = sortedData.reduce((acc, curr) => {
+      const name = curr.volcano_name || 'Unknown';
+      if (!acc[name]) acc[name] = { x: [], y: [] };
+
+      // Map the explosion-specific keys
+      acc[name].x.push(new Date(curr.ts_epoch));
+      acc[name].y.push(curr.h_avs_m);
+      return acc;
+    }, {});
+
+    return Object.keys(groupedData).map((volcanoName, index) => ({
+      name: volcanoName,
+      x: groupedData[volcanoName].x,
+      y: groupedData[volcanoName].y,
+      type: 'scatter',
+      mode: 'markers',
+      marker: {
+        size: 7,
+        line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
+        symbol: Symbolway[index % Symbolway.length],
+      },
+      // Replicating the clean D3/Observable tooltip
+      hovertemplate:
+        `<b>${volcanoName}</b><br>` +
+        'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
+        'Plume Height (m): %{y}<extra></extra>'
+    }));
+  }, [apiData]);
+
+  const layout = useMemo(() => {
+
+    return {
+      autosize: true,
+      paper_bgcolor: 'transparent', // Let Chakra UI background show through
+      plot_bgcolor: 'transparent',
+      font: { color: '#d1d5db' }, // gray.300
+      margin: { t: 40, r: 20, l: 20, b: 20 },
+      // title: {
+      //     text: '7 Day Consolidated Flight Levels',
+      //     font: { size: 16, color: 'white' },
+      //     x: 0.05
+      // },
+      xaxis: {
+        title: {
+          text: 'Date (UTC)',
+          font: { color: 'white', size: 12 }
+        },
+        type: 'date',
+        tickformat: '%b %d<br>%Y', // D3 requested %b %d \n %Y formatting
+        gridcolor: '#4b5563',
+        zerolinecolor: '#4b5563',
+        automargin: true,
+      },
+      yaxis: {
+        title: {
+          text: 'Plume Height',
+          font: { color: 'white', size: 12 }
+        },
+        type: 'linear',
+        gridcolor: '#4b5563',
+        zerolinecolor: '#ffffff',
+        automargin: true,
+      },
+      // legend: {
+      //     orientation: 'h',
+      //     y: -0.2,
+      //     x: 0.5,
+      //     xanchor: 'center'
+      // },
+      hovermode: 'closest',
+      shapes: [
+        {
+          type: 'line',
+          x0: 0,
+          x1: 1,
+          xref: 'paper', // Spans entire chart width
+          y0: 0,
+          y1: 0,
+          yref: 'y',
+          line: { color: 'white', width: 1 }
+        }
+      ],
+    };
+  }, []);
+
+  if (isLoading) return (
+    <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
+      <Spinner size="xl" color="blue.400" thickness="4px" />
+    </Flex>
+  );
+
+  if (error) return (
+    <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
+      <Text color="red.400">{error}</Text>
+    </Flex>
+  );
+
+  if (plotTraces.length === 0) return (
+    <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
+      <Text color="gray.400">No data available for current filter.</Text>
+    </Flex>
+  );
+
+  return (
+    <Box height="100%" width="100%" bg="transparent" borderRadius="md" p={2} overflow="hidden">
+      <Plot
+        data={plotTraces}
+        layout={layout}
+        useResizeHandler={true} // Essential for dashboard grid resizing!
+        style={{ width: '100%', height: '100%' }}
+        config={{ responsive: true, displayModeBar: true, displaylogo: false }}
+      />
+    </Box>
+  );
+}

client/src/components/Widgets/RemoteSensing.jsx

@@ -0,0 +1,286 @@
+import {Button, Flex, Spinner, Text, Box, Collapsible} from "@chakra-ui/react";
+import {useEffect, useMemo } from 'react';
+import {useDashboardStore} from "@/store/useDashboardStore.jsx";
+import VdapApi from '../../hooks/useVdapApi.js';
+import useBuildUrl from "@/hooks/useBuildUrl.js";
+
+export default function RemoteSensing({ settings, widgetID }) {
+  console.log("RS widget ID: ", widgetID);
+  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
+  const isCopy = settings?.copyToClipboard === true; // acts as a fail-safe if no default setting is set
+  const sorts = settings?.activeSorts;
+
+  // build url, defaults to 7 days past
+  const url = useBuildUrl('/api/v2/remote_sensing', settings?.startDate, settings?.endDate);
+
+  // VdapApi hook only calls api if the url changes and apiData remains stable since vdapApi uses state to track the data
+  const {data: apiData, isLoading, error} = VdapApi(url);
+
+  // TEST DATA
+  // const apiData = useMemo(() => {
+  //   return ([
+  //     {
+  //       id: 1848,
+  //       volcano_name: "Lewotolok",
+  //       country: "Indonesia",
+  //       report_time: "2026-01-13T20:39:39Z",
+  //       summary: "Dear friends,\n\nOur latest satellite view from 13 January (~0900 local time) shows that the lava has began to flow over the crater rim onto the northwest flank (see attached). The lava flow spreads into three lobes from the single source vent on the northwest flank of the active cone. The longest portion of the flow was about 530 meters from the vent with the toe draping about 30-40 meters over the rim of the main crater just north of the May 2024 lava flow. A narrow deposit of volcanoclastic debris extends about 300 meters below the toe of the lava flow (white dashed outline on sketch).\n\nPlease let us know if you have any questions.\nBest wishes,\nRick",
+  //       sender: "rwessels@usgs.gov",
+  //       files: [
+  //         {
+  //           name: "Lewotolok-ID-sketch-20260113_Jan_lavas.jpg",
+  //           url: "https://vdap.org/commcoordashboard/rs/attachments/1848-Lewotolok-ID-sketch-20260113_Jan_lavas.jpg",
+  //           type: "image"
+  //         },
+  //         {
+  //           name: "Lewotolok-ID-sketch-20260113_Jan_lavas.jpg",
+  //           url: "https://vdap.org/commcoordashboard/rs/attachments/1848-Lewotolok-ID-sketch-20260113_Jan_lavas.jpg",
+  //           type: "image"
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       id: 1847,
+  //       volcano_name: "Mayon",
+  //       country: "Philippines",
+  //       report_time: "2026-01-13T17:56:46Z",
+  //       summary: "Dear PHIVOLCS friends,\nOur most recent satellite data from 13 January (1500 local) show the new lava flow extending southeast from the summit and splitting into two lobes (see attached pdf). The total length of the longest lobe was about 1 kilometer. Compared to data from 12 January, the longest part of the flow advanced almost 200 meters over 11 hours while the shorter section advanced about 80 meters over the same time. Debris falling from the front of both lava flow lobes extend another several hundred meters below each lobe. We continue to watch the activity at Mayon volcano and will share anything that might help. \n\nPlease let us know if you have any questions, requests, or comments.\n\nBest wishes,\nRick",
+  //       sender: "rwessels@usgs.gov",
+  //       files: [
+  //         {
+  //           name: "Mayon-RP-images-20260113_ICEYE_lava.pdf",
+  //           url: "https://vdap.org/commcoordashboard/rs/attachments/1847-Mayon-RP-images-20260113_ICEYE_lava.pdf",
+  //           type: "pdf"
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       id: 1889,
+  //       volcano_name: "Bagana",
+  //       country: "Papua New Guinea",
+  //       report_time: "2026-06-24T21:28:58Z",
+  //       summary: "Hi Steve and RVO,\nI'm now back in the office after some time away and have looked closely at the recent data for Bagana Volcano. \nSatellite data from 15 June show that an increase in lava effusion caused the upper part of the active lava flow at the summit to inflate and likely contributed to the 19-20 June collapse. By 16 June, the inflated area was about 260-meters-long by 140-meters-wide. The northeast edge of the inflated section of the lava flow was the source of rockfalls down the northeast flank where some of the larger blocks tumbled over 1.3 kilometer from the flow.  The 22 June data that Julie mentioned shows that all of the inflated area was removed by the collapse (~36,000 square meter area of the upper flow removed). The collapse PDC deposits scoured a deep gorge and removed a broad area of vegetation near the lake. The distal portion of the collapse deposits formed a small delta extending into the lake and possibly raising the lake level slightly based on overall shore outline changes.\n\nI've attached a sketch map showing the features described above. Please let us know if you have any questions.\n\nBest wishes,\nRick",
+  //       sender: "rwessels@usgs.gov",
+  //       files: [
+  //         {
+  //           name: "Bagana-PG-sketch-20260622_collapse+lava.jpg",
+  //           url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana-PG-sketch-20260622_collapse+lava.jpg",
+  //           type: "image"
+  //         },
+  //         {
+  //           name: "Bagana-PG-sketch-20260622_3Dcollapse+lava.jpg",
+  //           url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana-PG-sketch-20260622_3Dcollapse+lava.jpg",
+  //           type: "image"
+  //         },
+  //         {
+  //           name: "Bagana_22_Jun_2026_collapse2.kml",
+  //           url: "https://vdap.org/commcoordashboard/rs/attachments/1889-Bagana_22_Jun_2026_collapse2.kml",
+  //           type: "download"
+  //         }
+  //       ]
+  //     },
+  //     {
+  //       id: 1845,
+  //       volcano_name: "Lewotolok",
+  //       country: "Indonesia",
+  //       report_time: "2026-01-07T21:42:17Z",
+  //       summary: "Dear friends,\nThe increased activity at Lewotolok Volcano over the past week reminded me that we have not sent you a Remote Sensing Summary since June 2025.  Over the two days from 3 to 5 January 2026, explosions from the central cone intensified, doubling the area impacted by proximal ballistics and tephra to over 20 hectares, while increased effusion has produced a new ~20,000 m² lava flow on the west–northwest flank that extends ~270 meters from the vent. So far, all recent lava flows have been confined to the summit crater.\n\nPlease let us know if you have any questions or additions.\n\nBest Wishes,\nRick",
+  //       sender: "rwessels@usgs.gov",
+  //       files: []
+  //     },
+  //   ])
+  // }, []);
+
+  const data = useMemo(() => {
+    if (apiData?.length === 0) return [];
+    let sorted;
+
+    if (sorts?.volcanoSort && sorts?.timeSort === "asc") {
+      sorted = [...apiData].sort(ascTimeVolcanoSort);
+    } else if (sorts?.volcanoSort && sorts?.timeSort === "desc") {
+      sorted = [...apiData].sort(descTimeVolcanoSort);
+    } else if (sorts?.timeSort === "asc") {
+      sorted = [...apiData].sort(ascTimeSort);
+    } else {
+      sorted = [...apiData].sort(descTimeSort);
+    }
+
+    return sorted;
+  }, [apiData, sorts]);
+
+  useEffect(() => {
+    if(isCopy) {
+      const dataText = data.map((item) => {
+        return `${item.country}, ${item.volcano_name}\n` +
+          `Report Time: ${item.report_time}\n` +
+          `Sender: ${item.sender}\n` +
+          `Summary:\n${item.summary}\n`;
+      }).join('\n\n');
+      navigator.clipboard.writeText(dataText)
+        .then(() => {
+          alert('Copied to clipboard!');
+        })
+        .catch((err => {
+          console.error('Failed to copy: ', err);
+        }));
+      updateSettings(widgetID, {copyToClipboard: false});
+    }
+  }, [isCopy, data, widgetID, updateSettings]);
+
+  if (isLoading) return (
+    <Flex w="100%" h="100%" align="center" justify="center" borderRadius="md" bg="gray.800">
+      <Spinner size="xl" color="blue.400" thickness="4px"/>
+    </Flex>
+  );
+
+  if (error) return (
+    <Flex w="100%" h="100%" align="center" justify="center" p={4} borderRadius="md" bg="gray.800">
+      <Text color="red.400">{error}</Text>
+    </Flex>
+  );
+
+  if (data.length === 0) return (
+    <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
+      <Text color="gray.400">No Remote Sensing data available this week.</Text>
+    </Flex>
+  );
+
+  return (
+    <Flex direction="column"
+          w="100%" h="100%"
+          pos="relative"
+          justify="top" align="center"
+          p={2} gap={2}
+          overflow="auto"
+          borderRadius="xl"
+          bg="gray.800"
+    >
+      {data.map((item, index) => {
+        return (
+          <Collapsible.Root key={index} w="100%">
+            {/* Using context to dynamically change the border radii of the triggers */}
+            <Collapsible.Context>
+              {(collapsible) => (
+                <>
+                  <Collapsible.Trigger w="100%" overflow="hidden">
+                    <Flex
+                      direction="row"
+                      w="100%" h="100%"
+                      justify="space-between" align="center"
+                      gap={2}
+                      p={1} pl={3} pr={3}
+                      borderTopRadius="lg"
+                      borderBottomRadius={collapsible.open ? "0" : "lg"}
+                      bg="gray.700"
+                    >
+                      <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
+                        <Text truncate >{item?.volcano_name}</Text>
+                        <Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
+                      </Flex>
+                      <Flex w="100%" minW={0} justify="right">
+                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm">{item?.report_time}</Text>
+                      </Flex>
+                    </Flex>
+                  </Collapsible.Trigger>
+                  <Collapsible.Content w="100%" h="auto">
+                    {/* This box needs to be at h="100%" for the pdf toolbar to appear */}
+                    <Box w="100%" h="100%" p={1} borderBottomRadius="lg" bg="gray.700/45">
+                      <Flex direction="column" gap={2} bg="gray.800/75" borderRadius="lg" p={2} align="end">
+                        <Text w="100%" h="100%" fontSize="sm" color="gray.100" textAlign="left" whiteSpace="pre-line">{item?.summary}</Text>
+                        <Text w="fit" fontSize="sm" color="gray.200" pl={1} pr={1} bg="gray.700/50" borderRadius="md">Source: {item?.sender}</Text>
+                      </Flex>
+                      {item?.files?.map((file, index) => {
+
+                        // PDF FILE TYPE
+                        if (file?.type === "pdf") return (
+                          <Box w="100%" h="100%" key={index} p={1}>
+                            <br />
+                            <Flex dir="row" justify="space-between" align="center" mb={2}>
+                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
+                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300/90">PDF</Text>
+                            </Flex>
+                            <object
+                              data={`${file?.url}#view=FitH&toolbar=1`}
+                              type="application/pdf"
+                              style={{width: '100%', height: '100%', display: 'block'}}
+                            >
+                              <Flex w="100%" h="100%" p={4} color="gray.400">
+                                <Text mb={2} color="fg.muted">
+                                  Your browser cannot display this PDF directly.
+                                </Text>
+                                <a href={file?.url} target="_blank">
+                                  Download PDF
+                                </a>
+                              </Flex>
+                            </object>
+                          </Box>
+                        );
+
+                        // IMAGE FILE TYPE
+                        else if (file?.type === "image") return (
+                          <Box key={index} w="100%" h="100%" p={1}>
+                            <br />
+                            <Flex dir="row" justify="space-between" align="center" mb={2}>
+                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
+                              <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300/90">PNG</Text>
+                            </Flex>
+                            <a href={file?.url} target="_blank" rel="noopener noreferrer">
+                              <img src={file?.url} alt={file?.name} />
+                            </a>
+                            <br />
+                          </Box>
+                        );
+
+                        // DOWNLOADABLE LINK
+                        else if (file?.type === "download") return (
+                          <Flex key={index} dir="row" w="100%" h="100%" p={1} align="center" justify="space-between">
+                            <br />
+                            <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
+                            <Button asChild variant="surface" size="xxs" fontSize="xs" pl={2} pr={2}>
+                              <a href={file?.url} target="_blank" rel="noopener noreferrer">Download</a>
+                            </Button>
+                          </Flex>
+                        )
+                      })}
+                    </Box>
+                  </Collapsible.Content>
+                </>
+              )}
+            </Collapsible.Context>
+          </Collapsible.Root>
+        )
+      })}
+    </Flex>
+  );
+}
+
+
+function ascTimeVolcanoSort(a, b) {
+  if (a.volcano_name < b.volcano_name) return -1
+  else if (a.volcano_name > b.volcano_name) return 1
+  else return ascTimeSort(a, b);
+}
+
+function descTimeVolcanoSort(a, b) {
+  if (a.volcano_name < b.volcano_name) return -1
+  else if (a.volcano_name > b.volcano_name) return 1
+  else return descTimeSort(a, b);
+}
+
+function ascTimeSort(a, b) {
+  const aTime = new Date(a.report_time);
+  const bTime = new Date(b.report_time);
+
+  if (aTime > bTime) return 1;
+  if (aTime < bTime) return -1;
+  return 0;
+}
+
+function descTimeSort(a, b) {
+  const aTime = new Date(a.report_time);
+  const bTime = new Date(b.report_time);
+
+  if (aTime > bTime) return -1;
+  if (aTime < bTime) return 1;
+  return 0;
+}

client/src/components/Widgets/SeismicEvents.jsx

@@ -0,0 +1,143 @@
+import VdapApi from '../../hooks/useVdapApi.js';
+import { useMemo } from 'react';
+import Plot from 'react-plotly.js';
+import {Box, Flex, Spinner, Text} from "@chakra-ui/react";
+import useBuildUrl from "@/hooks/useBuildUrl.js";
+
+export default function SeismicEvents({ settings, widgetID}) {
+  // build url, defaults to 7 days past
+  const url = useBuildUrl('/api/v2/seismic_events', settings?.startDate, settings?.endDate);
+
+  // retrieve data from api
+  const { data: apiData, isLoading, error } = VdapApi(url);
+
+  const plotTraces = useMemo(() => {
+    if (!apiData || apiData.length === 0) return [];
+
+    // Array of distinct Plotly shapes
+    const Symbolway = [
+      'circle', 'square', 'diamond',
+      'triangle-up', 'triangle-down',
+      'star', 'hexagram', 'pentagon',
+      'hexagon', 'octagon', 'cross', 'x'
+    ];
+
+    // Sort data descending by seismic events count so smaller dots draw on top of larger ones
+    const sortedData = [...apiData].sort((a, b) => b.number_events - a.number_events);
+
+    // Efficiently group into Plotly traces by volcano
+    const groupedData = sortedData.reduce((acc, curr) => {
+      const name = curr.volcano_name || 'Unknown';
+      if (!acc[name]) acc[name] = { x: [], y: [] };
+
+      // Map the seismic-specific keys
+      acc[name].x.push(new Date(curr.ts_epoch));
+      acc[name].y.push(curr.number_events);
+      return acc;
+    }, {});
+
+    return Object.keys(groupedData).map((volcanoName, index) => ({
+      name: volcanoName,
+      x: groupedData[volcanoName].x,
+      y: groupedData[volcanoName].y,
+      type: 'scatter',
+      mode: 'markers',
+      marker: {
+        size: 7,
+        line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
+        symbol: Symbolway[index % Symbolway.length],
+      },
+      // Replicating the clean D3/Observable tooltip
+      hovertemplate:
+        `<b>${volcanoName}</b><br>` +
+        'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
+        'Number of Seismic Events: %{y}<extra></extra>'
+    }));
+  }, [apiData]);
+
+  const layout = useMemo(() => {
+
+    return {
+      autosize: true,
+      paper_bgcolor: 'transparent', // Let Chakra UI background show through
+      plot_bgcolor: 'transparent',
+      font: { color: '#d1d5db' }, // gray.300
+      margin: { t: 40, r: 20, l: 20, b: 20 },
+      // title: {
+      //     text: '',
+      //     font: { size: 16, color: 'white' },
+      //     x: 0.05
+      // },
+      xaxis: {
+        title: {
+          text: 'Date (UTC)',
+          font: { color: 'white', size: 12 }
+        },
+        type: 'date',
+        tickformat: '%b %d<br>%Y', // D3 requested %b %d \n %Y formatting
+        gridcolor: '#4b5563',
+        zerolinecolor: '#4b5563',
+        automargin: true,
+      },
+      yaxis: {
+        title: {
+          text: 'Seismic Count',
+          font: { color: 'white', size: 12 }
+        },
+        type: 'linear',
+        gridcolor: '#4b5563',
+        zerolinecolor: '#ffffff',
+        automargin: true,
+      },
+      // legend: {
+      //     orientation: 'h',
+      //     y: -0.2,
+      //     x: 0.5,
+      //     xanchor: 'center'
+      // },
+      hovermode: 'closest',
+      shapes: [
+        {
+          type: 'line',
+          x0: 0,
+          x1: 1,
+          xref: 'paper', // Spans entire chart width
+          y0: 0,
+          y1: 0,
+          yref: 'y',
+          line: { color: 'white', width: 1 }
+        }
+      ],
+    };
+  }, []);
+
+  if (isLoading) return (
+    <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
+      <Spinner size="xl" color="blue.400" thickness="4px" />
+    </Flex>
+  );
+
+  if (error) return (
+    <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
+      <Text color="red.400">{error}</Text>
+    </Flex>
+  );
+
+  if (plotTraces.length === 0) return (
+    <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
+      <Text color="gray.400">No data available for current filter.</Text>
+    </Flex>
+  );
+
+  return (
+    <Box height="100%" width="100%" bg="transparent" borderRadius="md" p={2} overflow="hidden">
+      <Plot
+        data={plotTraces}
+        layout={layout}
+        useResizeHandler={true} // Essential for dashboard grid resizing!
+        style={{ width: '100%', height: '100%' }}
+        config={{ responsive: true, displayModeBar: true, displaylogo: false }}
+      />
+    </Box>
+  );
+}

client/src/components/Widgets/VaaActivity7Day.jsx

@@ -3,7 +3,7 @@ import { Box, Flex, Spinner, Text } from '@chakra-ui/react';
 import Plot from 'react-plotly.js';
 import VdapApi from '../../hooks/useVdapApi.js'; // Adjust path as needed
 
-export default function VaaActivity7Day({ settings }) {
+export default function VaaActivity7Day({ settings, widgetID }) {
     console.log("3. Chart received settings:", settings);
     // Plotly expects 'linear' for normal axes
     const plotYAxisType = settings?.yAxisScale === 'symlog' ? 'symlog' : 'linear';

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

@@ -0,0 +1,36 @@
+import {Flex, Slider, Switch} from "@chakra-ui/react";
+import {useDashboardStore} from "@/store/useDashboardStore.jsx";
+
+export default function IvansAlertsSettings({ widgetId, currentSettings }) {
+  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
+
+  return (
+    <Flex flexDirection="column" justifyContent="space-between" gap={2} pb={2}>
+      {/* SLIDER DATE RANGE SELECTION */}
+      <Slider.Root
+        width="80%" h="100%"
+        min={1} max={14}
+        defaultValue={[7]}
+        step={1}
+        onValueChangeEnd={(e) => {
+          const day = new Date(Date.now() - (e.value[0])*86400000).toLocaleDateString('en-CA');
+          console.log("new start: ", day);
+          updateSettings(widgetId, {...currentSettings, startDate: day});
+        }}
+      >
+        <Slider.Label>{currentSettings?.endDate} to {currentSettings?.startDate}</Slider.Label>
+        <Slider.Control>
+          <Slider.Track>
+            <Slider.Range />
+          </Slider.Track>
+          <Slider.Thumbs />
+          <Slider.MarkerGroup p={3}>
+            <Slider.Marker value={1} whiteSpace="nowrap">today</Slider.Marker>
+            <Slider.Marker value={7} whiteSpace="nowrap">1 week ago</Slider.Marker>
+            <Slider.Marker value={14} whiteSpace="nowrap">2 weeks ago</Slider.Marker>
+          </Slider.MarkerGroup>
+        </Slider.Control>
+      </Slider.Root>
+    </Flex>
+  )
+}

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

@@ -1,8 +1,11 @@
-import { Box, Text, Switch } from "@chakra-ui/react";
+import {Box, Text, Switch, Flex, Field, Input} from "@chakra-ui/react";
 import { useDashboardStore } from "@/store/useDashboardStore.jsx";
+import {useState} from "react";
 
 export default function ExplosionEventsSettings({ widgetId, currentSettings }) {
     const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
+  const [startError, setStartError] = useState(null);
+  const [endError, setEndError] = useState(null);
 
     // 1. Convert the saved string into a boolean for the toggle UI
     const isSymlog = currentSettings?.yAxisScale === 'log';
@@ -18,20 +21,75 @@ export default function ExplosionEventsSettings({ widgetId, currentSettings }) {
     };
 
     return (
-        <Box>
-            <Text fontWeight="bold" mb={3} fontSize="sm">Y-Axis Settings</Text>
+      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
+        {/* Y-AXIS SETTING*/}
+        <Text fontWeight="bold" mb={3} fontSize="sm">Y-Axis Settings</Text>
 
-            <Switch.Root
-                checked={isSymlog}
-                onCheckedChange={handleToggle}
-                colorPalette="blue"
-            >
-                <Switch.HiddenInput />
-                <Switch.Control>
-                    <Switch.Thumb />
-                </Switch.Control>
-                <Switch.Label>Use Log Scale</Switch.Label>
-            </Switch.Root>
-        </Box>
+        <Switch.Root
+          checked={isSymlog}
+          onCheckedChange={handleToggle}
+          colorPalette="blue"
+        >
+          <Switch.HiddenInput />
+          <Switch.Control>
+            <Switch.Thumb />
+          </Switch.Control>
+          <Switch.Label>Use Log Scale</Switch.Label>
+        </Switch.Root>
+
+        {/* DATE RANGE SELECTION */}
+        <Field.Root invalid={!!startError}>
+          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+              Start Date
+            </Text>
+            <Flex direction="column" w="100%">
+              <Input
+                w="100%"
+                type="date"
+                value={currentSettings?.startDate || ""}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  updateSettings(widgetId, {...currentSettings, startDate: value});
+
+                  const dateSelected = new Date(value);
+                  const today = new Date();
+                  today.setHours(0, 0, 0, 0);
+
+                  if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
+                  else setStartError("");
+                }}
+              />
+              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
+            </Flex>
+          </Flex>
+        </Field.Root>
+        <Field.Root invalid={!!endError}>
+          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+              End Date
+            </Text>
+            <Flex direction="column" w="100%">
+              <Input
+                w="100%"
+                type="date"
+                value={currentSettings?.endDate || ""}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  updateSettings(widgetId, {...currentSettings, endDate: value});
+
+                  const dateSelected = new Date(value);
+                  const today = new Date();
+                  today.setHours(0, 0, 0, 0);
+
+                  if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
+                  else setEndError("");
+                }}
+              />
+              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+            </Flex>
+          </Flex>
+        </Field.Root>
+      </Flex>
     );
 }

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

@@ -0,0 +1,108 @@
+import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
+import {useDashboardStore} from "../../../store/useDashboardStore.jsx";
+import {useState} from "react";
+
+export default function IvansAlertsSettings({ widgetId, currentSettings }) {
+  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
+  const [startError, setStartError] = useState(null);
+  const [endError, setEndError] = useState(null);
+
+  const handleCopyToClipboard = () => {
+    updateSettings(widgetId, {copyToClipboard: true});
+  }
+  const handleVolcanoSort = (details) => {
+    const isSort = currentSettings?.activeSorts?.volcanoSort === true;
+    updateSettings(widgetId, { activeSorts: { ...currentSettings?.activeSorts, volcanoSort: !isSort }});
+  }
+  const handleTimeSort = (details) => {
+    const sort = currentSettings?.activeSorts?.timeSort === "desc" ? "asc" : "desc";
+    updateSettings(widgetId, { activeSorts: { ...currentSettings?.activeSorts, timeSort: sort }});
+  }
+
+  return (
+    <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
+      {/* COPY TO CLIPBOARD */}
+      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy All IVANS</Button>
+
+      {/* SORTS */}
+      <Switch.Root
+        checked={currentSettings?.activeSorts?.timeSort === "asc"}
+        onCheckedChange={handleTimeSort}
+        colorPalette="blue"
+      >
+        <Switch.HiddenInput />
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+        <Switch.Label>Sort Oldest to Newest</Switch.Label>
+      </Switch.Root>
+      <Switch.Root
+        checked={currentSettings?.activeSorts?.volcanoSort}
+        onCheckedChange={handleVolcanoSort}
+        colorPalette="blue"
+      >
+        <Switch.HiddenInput />
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+        <Switch.Label>Sort by Volcano</Switch.Label>
+      </Switch.Root>
+
+      {/* SELECTING DATE RANGE */}
+      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
+        <Field.Root invalid={!!startError}>
+          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+              Start Date
+            </Text>
+            <Flex direction="column" w="100%">
+              <Input
+                w="100%"
+                type="date"
+                value={currentSettings?.startDate || ""}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  updateSettings(widgetId, {...currentSettings, startDate: value});
+
+                  const dateSelected = new Date(value);
+                  const today = new Date();
+                  today.setHours(0, 0, 0, 0);
+
+                  if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
+                  else setStartError("");
+                }}
+              />
+              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
+            </Flex>
+          </Flex>
+        </Field.Root>
+        <Field.Root invalid={!!endError}>
+          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+              End Date
+            </Text>
+            <Flex direction="column" w="100%">
+              <Input
+                w="100%"
+                type="date"
+                value={currentSettings?.endDate || ""}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  updateSettings(widgetId, {...currentSettings, endDate: value});
+
+                  const dateSelected = new Date(value);
+                  const today = new Date();
+                  today.setHours(0, 0, 0, 0);
+
+                  if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
+                  else setEndError("");
+                }}
+              />
+              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+            </Flex>
+          </Flex>
+        </Field.Root>
+      </Flex>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,66 @@
+import {Input, Field, Text, Flex} from "@chakra-ui/react";
+import {useDashboardStore} from "@/store/useDashboardStore.jsx";
+import { useState } from "react";
+
+export default function PlumeEventsSettings({ widgetId, currentSettings }) {
+  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
+  const [startError, setStartError] = useState(null);
+  const [endError, setEndError] = useState(null);
+
+  return (
+    <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
+      <Field.Root invalid={!!startError}>
+        <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+          <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+            Start Date
+          </Text>
+          <Flex direction="column" w="100%">
+            <Input
+              w="100%"
+              type="date"
+              value={currentSettings?.startDate || ""}
+              onChange={(e) => {
+                const value = e.target.value;
+                updateSettings(widgetId, {...currentSettings, startDate: value});
+
+                const dateSelected = new Date(value);
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+
+                if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
+                else setStartError("");
+              }}
+            />
+            {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
+          </Flex>
+        </Flex>
+      </Field.Root>
+      <Field.Root invalid={!!endError}>
+        <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+          <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+            End Date
+          </Text>
+          <Flex direction="column" w="100%">
+            <Input
+              w="100%"
+              type="date"
+              value={currentSettings?.endDate || ""}
+              onChange={(e) => {
+                const value = e.target.value;
+                updateSettings(widgetId, {...currentSettings, endDate: value});
+
+                const dateSelected = new Date(value);
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+
+                if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
+                else setEndError("");
+              }}
+            />
+            {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+          </Flex>
+        </Flex>
+      </Field.Root>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,108 @@
+import {Button, Field, Flex, Input, Switch, Text} from "@chakra-ui/react";
+import {useDashboardStore} from "@/store/useDashboardStore.jsx";
+import {useState} from "react";
+
+export default function RemoteSensingSettings({ widgetId, currentSettings }) {
+  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
+  const [startError, setStartError] = useState(null);
+  const [endError, setEndError] = useState(null);
+
+  const handleCopyToClipboard = () => {
+    updateSettings(widgetId, {copyToClipboard: true});
+  }
+  const handleVolcanoSort = (details) => {
+    const isSort = currentSettings?.activeSorts?.volcanoSort === true;
+    updateSettings(widgetId, { activeSorts: { ...currentSettings?.activeSorts, volcanoSort: !isSort }});
+  }
+  const handleTimeSort = (details) => {
+    const sort = currentSettings?.activeSorts?.timeSort === "desc" ? "asc" : "desc";
+    updateSettings(widgetId, { activeSorts: { ...currentSettings?.activeSorts, timeSort: sort }});
+  }
+
+  return (
+    <Flex flexDirection="column" justifyContent="space-between" gap={2} overflowY="auto">
+      {/* COPYING TO CLIPBOARD */}
+      <Button w="fit" size="xs" onClick={handleCopyToClipboard}>Copy All RS</Button>
+
+      {/* SORTING */}
+      <Switch.Root
+        checked={currentSettings?.activeSorts?.timeSort === "asc"}
+        onCheckedChange={handleTimeSort}
+        colorPalette="blue"
+      >
+        <Switch.HiddenInput />
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+        <Switch.Label>Sort Oldest to Newest</Switch.Label>
+      </Switch.Root>
+      <Switch.Root
+        checked={currentSettings?.activeSorts?.volcanoSort}
+        onCheckedChange={handleVolcanoSort}
+        colorPalette="blue"
+      >
+        <Switch.HiddenInput />
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+        <Switch.Label>Sort by Volcano</Switch.Label>
+      </Switch.Root>
+
+      {/* SELECTING DATE RANGE */}
+      <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
+        <Field.Root invalid={!!startError}>
+          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+              Start Date
+            </Text>
+            <Flex direction="column" w="100%">
+              <Input
+                w="100%"
+                type="date"
+                value={currentSettings?.startDate || ""}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  updateSettings(widgetId, {...currentSettings, startDate: value});
+
+                  const dateSelected = new Date(value);
+                  const today = new Date();
+                  today.setHours(0, 0, 0, 0);
+
+                  if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
+                  else setStartError("");
+                }}
+              />
+              {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
+            </Flex>
+          </Flex>
+        </Field.Root>
+        <Field.Root invalid={!!endError}>
+          <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+            <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+              End Date
+            </Text>
+            <Flex direction="column" w="100%">
+              <Input
+                w="100%"
+                type="date"
+                value={currentSettings?.endDate || ""}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  updateSettings(widgetId, {...currentSettings, endDate: value});
+
+                  const dateSelected = new Date(value);
+                  const today = new Date();
+                  today.setHours(0, 0, 0, 0);
+
+                  if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
+                  else setEndError("");
+                }}
+              />
+              {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+            </Flex>
+          </Flex>
+        </Field.Root>
+      </Flex>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,66 @@
+import {Input, Field, Text, Flex} from "@chakra-ui/react";
+import {useDashboardStore} from "@/store/useDashboardStore.jsx";
+import { useState } from "react";
+
+export default function SeismicEventsSettings({ widgetId, currentSettings }) {
+  const [startError, setStartError] = useState(null);
+  const [endError, setEndError] = useState(null);
+  const updateSettings = useDashboardStore(state => state.updateWidgetSettings);
+
+  return (
+    <Flex direction="column" w="100%" h="100%" align="center" justify="center" gap="2">
+      <Field.Root invalid={!!startError}>
+        <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+          <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+            Start Date
+          </Text>
+          <Flex direction="column" w="100%">
+            <Input
+              w="100%"
+              type="date"
+              value={currentSettings?.startDate || ""}
+              onChange={(e) => {
+                const value = e.target.value;
+                updateSettings(widgetId, {...currentSettings, startDate: value});
+
+                const dateSelected = new Date(value);
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+
+                if (value && (dateSelected > today)) setStartError("Can't Choose a Future Date");
+                else setStartError("");
+              }}
+            />
+            {startError && <Field.ErrorText>{startError}</Field.ErrorText>}
+          </Flex>
+        </Flex>
+      </Field.Root>
+      <Field.Root invalid={!!endError}>
+        <Flex direction="row" w="100%" h="100%" align="center" justify="center">
+          <Text w="50%" align="center" justify="center" mt={2} color="gray.700">
+            End Date
+          </Text>
+          <Flex direction="column" w="100%">
+            <Input
+              w="100%"
+              type="date"
+              value={currentSettings?.endDate || ""}
+              onChange={(e) => {
+                const value = e.target.value;
+                updateSettings(widgetId, {...currentSettings, endDate: value});
+
+                const dateSelected = new Date(value);
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+
+                if (value && (dateSelected > today)) setEndError("Can't Choose a Future Date");
+                else setEndError("");
+              }}
+            />
+            {endError && <Field.ErrorText>{endError}</Field.ErrorText>}
+          </Flex>
+        </Flex>
+      </Field.Root>
+    </Flex>
+  )
+}

client/src/constants/widgetRegistry.jsx

@@ -7,6 +7,9 @@ import { lazy } from 'react';
 // w: 4 = one-third screen width
 // w: 3 = one-quarter screen width
 
+const getStartDate = () => (new Date(Date.now() - 604800000)).toLocaleDateString('en-CA'); // 7 days = 604800000 = 7*24*60*60*1000
+const getEndDate = () => (new Date()).toLocaleDateString('en-CA'); // 'en-CA' formats the date as YYYY-MM-DD
+
 export const WIDGET_REGISTRY = {
     "vaa_activity": {
         name: "VAA 7 Day Activity",
@@ -19,7 +22,9 @@ export const WIDGET_REGISTRY = {
 
         // The baseline data every new VAA widget starts with
         defaultSettings: {
-            yAxisScale: 'normal' // Options: 'normal' | 'symlog'
+            // startDate: getStartDate(),
+            // endDate: getEndDate(),
+            yAxisScale: 'normal', // Options: 'normal' | 'symlog'
         },
 
         allowedSizes: {
@@ -41,9 +46,21 @@ export const WIDGET_REGISTRY = {
         name: "IVANS",
         category: "Communications",
         description: "Feed of recent IVANS reports and reviewer statuses.",
+        component: lazy(() => import('../components/Widgets/IvansAlerts.jsx')),
+        settingsComponent: lazy(() => import('../components/Widgets/settings/IvansAlertsSettings.jsx')),
+        defaultSettings: {
+            startDate: getStartDate(),
+            endDate: getEndDate(),
+            copyToClipboard: false,
+            activeSorts: {
+                timeSort: "desc",
+                volcanoSort: false
+            }
+        },
         allowedSizes: {
-            small:  { w: 3, h: 12 },
-            medium: { w: 6, h: 24 }
+            small: { w: 3, h: 6 },
+            medium: { w: 3, h: 9 },
+            large: { w: 3, h: 12 },
         }
     },
 
@@ -51,8 +68,21 @@ export const WIDGET_REGISTRY = {
         name: "Remote Sensing",
         category: "Remote Sensing",
         description: "Feed of recent remote sensing reports.",
+        component: lazy(() => import('../components/Widgets/RemoteSensing.jsx')),
+        settingsComponent: lazy(() => import('../components/Widgets/Settings/RemoteSensingSettings.jsx')),
+        defaultSettings: {
+            startDate: getStartDate(),
+            endDate: getEndDate(),
+            copyToClipboard: false,
+            activeSorts: {
+                timeSort: "desc",
+                volcanoSort: false
+            }
+        },
         allowedSizes: {
-            small: { w: 3, h: 12 },
+            small: { w: 3, h: 6 },
+            medium: { w: 3, h: 9 },
+            large: { w: 3, h: 12 },
         }
     },
 
@@ -60,9 +90,15 @@ export const WIDGET_REGISTRY = {
         name: "Alert Level Changes",
         category: "Daily Alerts",
         description: "List of 7-day alert level changes with trend arrows.",
+        component: lazy(() => import('../components/Widgets/AlertChanges.jsx')),
+        settingsComponent: lazy(() => import('../components/Widgets/settings/AlertChangeSettings.jsx')),
+        defaultSettings: {
+            startDate: getStartDate(),
+            endDate: getEndDate(),
+        },
         allowedSizes: {
-            small: { w: 3, h: 12 },
-            large: { w: 9, h: 12 }
+            small: { w: 3, h: 6 },
+            large: { w: 3, h: 12 }
         }
     },
 
@@ -78,6 +114,8 @@ export const WIDGET_REGISTRY = {
 
         // The baseline data every new VAA widget starts with
         defaultSettings: {
+            startDate: getStartDate(),
+            endDate: getEndDate(),
             yAxisScale: 'normal' // Options: 'normal' | 'symlog'
         },
         allowedSizes: {
@@ -85,11 +123,40 @@ export const WIDGET_REGISTRY = {
         }
     },
 
+    "plume_events": {
+        name: "Plume Events",
+        category: "Daily Volcanic Activity",
+        description: "Plot of explosion heights over a weeks time.",
+        component: lazy(() => import('../components/Widgets/PlumeEvents.jsx')),
+        settingsComponent: lazy(() => import('../components/Widgets/settings/PlumeEventsSettings.jsx')),
+        defaultSettings: {
+            startDate: getStartDate(),
+            endDate: getEndDate(),
+        },
+        allowedSizes: {
+            medium:  { w: 6, h: 12 }
+        }
+    },
+
+    "seismic_events": {
+        name: "Seismic Events",
+        category: "Daily Volcanic Activity",
+        description: "Plot of number of seismic events over a weeks time.",
+        component: lazy(() => import('../components/Widgets/SeismicEvents.jsx')),
+        settingsComponent: lazy(() => import('../components/Widgets/settings/SeismicEventsSettings.jsx')),
+        defaultSettings: {
+            startDate: getStartDate(),
+            endDate: getEndDate(),
+        },
+        allowedSizes: {
+            medium:  { w: 6, h: 12 }
+        }
+    },
+
     "llm_al_changes_quad_plot": {
         name: "Alert Level Changes Quad Plot",
         category: "Computer Science",
-        description: "Percentage of True-Positive, True-Negative, False-Positive, and False-Negative changes in all " +
-          "alert levels.",
+        description: "Percentage of TP, TN, FP, and FN changes in viable alert levels.",
         component: lazy(() => import('../components/Widgets/LlmAlChangesQuadPlot.jsx')),
         allowedSizes: {
             small: { w: 3, h: 12 }

client/src/hooks/useBuildUrl.js

@@ -0,0 +1,16 @@
+import { useMemo } from "react";
+
+export default function useBuildUrl(base_url, start, end) {
+  return useMemo(() =>{
+    if (start && end)
+      return `${base_url}?start_date=${start}&end_date=${end}`;
+    else {
+      let today = new Date();
+      let sevenDaysAgo = new Date(today);
+      sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+      sevenDaysAgo = sevenDaysAgo.toLocaleDateString('en-CA');
+      today = today.toLocaleDateString('en-CA');
+      return `${base_url}?start_date=${sevenDaysAgo}&end_date=${today}`;
+    }
+  }, [base_url, start, end]);
+}

client/src/pages/home/tabs/MyDashboard.jsx

@@ -1,209 +1,210 @@
-import { Box, Text, Flex, IconButton, Spinner, Popover } from "@chakra-ui/react";
-import { X, MoreVertical } from "lucide-react";
-import { Responsive, WidthProvider } from "react-grid-layout";
-import { useDashboardStore } from "@/store/useDashboardStore.jsx";
-import { Suspense, useEffect, useRef } from 'react';
-import { useColorModeValue } from "@/components/ui/color-mode";
+import {Box, Text, Flex, IconButton, Spinner, Popover} from "@chakra-ui/react";
+import {X, MoreVertical} from "lucide-react";
+import {Responsive, WidthProvider} from "react-grid-layout";
+import {useDashboardStore} from "@/store/useDashboardStore.jsx";
+import {Suspense, useEffect, useRef} from 'react';
+import {useColorModeValue} from "@/components/ui/color-mode";
 // 1. Import database messenger
 import useAuthStore from "@/store/authStore";
 
 // 2. Import registry
-import { WIDGET_REGISTRY } from '@/constants/widgetRegistry.jsx';
+import {WIDGET_REGISTRY} from '@/constants/widgetRegistry.jsx';
 
 // React-Grid-Layout requires this wrapper to automatically calculate screen width
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
 export default function MyDashboard() {
-    // 🌗 Let's adjust for our light and dark mode
-    const frameBg = useColorModeValue("gray.100", "gray.800");
-    const titleColor = useColorModeValue("gray.800", "gray.100");
-    const iconColor = useColorModeValue("gray.600", "gray.400");
-    const iconHoverBg = useColorModeValue("gray.100", "gray.700");
+  // 🌗 Let's adjust for our light and dark mode
+  const frameBg = useColorModeValue("gray.100", "gray.800");
+  const titleColor = useColorModeValue("gray.800", "gray.100");
+  const iconColor = useColorModeValue("gray.600", "gray.400");
+  const iconHoverBg = useColorModeValue("gray.100", "gray.700");
 
-    // ☁️ Database Connection
-    const { user } = useAuthStore();
+  // ☁️ Database Connection
+  const {user} = useAuthStore();
 
-    // ☁️ Local UI Connections
-    const widgets = useDashboardStore(state => state.widgets);
-    const isEditing = useDashboardStore(state => state.isEditing);
-    const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
-    const removeWidget = useDashboardStore(state => state.removeWidget);
-    const setWidgets = useDashboardStore(state => state.setWidgets); // The injection action
+  // ☁️ Local UI Connections
+  const widgets = useDashboardStore(state => state.widgets);
+  const isEditing = useDashboardStore(state => state.isEditing);
+  const updateLayoutPositions = useDashboardStore(state => state.updateLayoutPositions);
+  const removeWidget = useDashboardStore(state => state.removeWidget);
+  const setWidgets = useDashboardStore(state => state.setWidgets); // The injection action
 
-    // 🔒 Safety lock to prevent infinite re-renders
-    const hasHydrated = useRef(false);
+  // 🔒 Safety lock to prevent infinite re-renders
+  const hasHydrated = useRef(false);
 
-    // ==========================================
-    // INITIAL LOAD: Grab data from Django
-    // ==========================================
-    useEffect(() => {
-        if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
-            const savedLayout = user.preferences.dashboard_layout;
+  // ==========================================
+  // INITIAL LOAD: Grab data from Django
+  // ==========================================
+  useEffect(() => {
+    if (user?.preferences?.dashboard_layout && !hasHydrated.current) {
+      const savedLayout = user.preferences.dashboard_layout;
 
-            // Safety check: Only inject if it's actually an array of widgets.
-            // (Prevents a crash if MariaDB returns a default empty object {})
-            if (Array.isArray(savedLayout)) {
-                setWidgets(savedLayout);
-            }
+      // Safety check: Only inject if it's actually an array of widgets.
+      // (Prevents a crash if MariaDB returns a default empty object {})
+      if (Array.isArray(savedLayout)) {
+        setWidgets(savedLayout);
+      }
 
-            hasHydrated.current = true;
-        }
-    }, [user, setWidgets]);
+      hasHydrated.current = true;
+    }
+  }, [user, setWidgets]);
 
 
-    // 🛠️ Format the data for RGL
-    const rglLayout = widgets.map(w => ({
-        i: w.id,
-        x: w.x,
-        y: w.y,
-        w: w.w,
-        h: w.h,
-        isResizable: false // 🚫 The magic lock! No resizing allowed globally.
-    }));
+  // 🛠️ Format the data for RGL
+  const rglLayout = widgets.map(w => ({
+    i: w.id,
+    x: w.x,
+    y: w.y,
+    w: w.w,
+    h: w.h,
+    isResizable: false // 🚫 The magic lock! No resizing allowed globally.
+  }));
 
-    // 3. THE COMPONENT MAPPER
-    const renderWidget = (widget) => {
-        const registryEntry = WIDGET_REGISTRY[widget.type];
+  // 3. THE COMPONENT MAPPER
+  const renderWidget = (widget) => {
+    const registryEntry = WIDGET_REGISTRY[widget.type];
 
-        if (registryEntry && registryEntry.component) {
-            const Component = registryEntry.component;
+    if (registryEntry && registryEntry.component) {
+      const Component = registryEntry.component;
 
-            // 1. Check if this widget type has a settings component registered
-            const SettingsUI = registryEntry.settingsComponent;
+      // 1. Check if this widget type has a settings component registered
+      const SettingsUI = registryEntry.settingsComponent;
 
-            return (
-                // The "Frame" that holds both the Title and the Chart
-                <Flex direction="column" height="100%" width="100%" bg={frameBg}>
+      return (
+        // The "Frame" that holds both the Title and the Chart
+        <Flex direction="column" height="100%" width="100%" bg={frameBg}>
 
-                    {/* THE TITLE BAR */}
-                    <Flex
-                        justify="space-between"
-                        align="center"
-                        px={3}
-                        py={2}
-                    >
-                        <Text color={titleColor} fontWeight="semibold" fontSize="md" isTruncated>
-                            {registryEntry.name}
-                        </Text>
+          {/* THE TITLE BAR */}
+          <Flex
+            justify="space-between"
+            align="center"
+            px={3}
+            py={2}
+          >
+            <Text color={titleColor} fontWeight="semibold" fontSize="md" isTruncated>
+              {registryEntry.name}
+            </Text>
 
-                        {/* THE SETTINGS ELLIPSIS */}
-                        {SettingsUI ? (
-                            <Popover.Root positioning={{ placement: "bottom-end" }}>
-                                <Popover.Trigger asChild>
-                                    <IconButton
-                                        size="xs"
-                                        variant="ghost"
-                                        color="gray.400"
-                                        _hover={{ color: "white", bg: "gray.700" }}
-                                        aria-label="Widget Settings"
-                                    >
-                                        <MoreVertical size={16} />
-                                    </IconButton>
-                                </Popover.Trigger>
+            {/* THE SETTINGS ELLIPSIS */}
+            {SettingsUI ? (
+              <Popover.Root positioning={{placement: "bottom-end"}}>
+                <Popover.Trigger asChild>
+                  <IconButton
+                    size="xs"
+                    variant="ghost"
+                    color="gray.400"
+                    _hover={{color: "white", bg: "gray.700"}}
+                    aria-label="Widget Settings"
+                  >
+                    <MoreVertical size={16}/>
+                  </IconButton>
+                </Popover.Trigger>
 
-                                {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
-                                <Popover.Positioner zIndex={10}>
-                                    <Popover.Content bg="gray.50" p={4} boxShadow="xl" borderRadius="md">
-                                        <Suspense fallback={<Spinner size="sm" />}>
-                                            <SettingsUI
-                                                widgetId={widget.id}
-                                                currentSettings={widget.settings || {}}
-                                            />
-                                        </Suspense>
-                                    </Popover.Content>
-                                </Popover.Positioner>
-                            </Popover.Root>
-                        ) : (
-                            <Box w="20px" h="20px" />
-                        )}
-                    </Flex>
-
-                    {/* THE CHART CANVAS */}
-                    <Box flex="1" overflow="hidden" position="relative" p={1}>
-                        {/* Pass the settings object into the actual chart component */}
-                        <Component settings={widget.settings || {}} />
-                    </Box>
-
-                </Flex>
-            );
-        }
-
-        // Fallback if someone asks for a widget that doesn't exist
-        return (
-            <Flex width="100%" height="100%" align="center" justify="center" direction="column" bg="gray.800">
-                <Text fontWeight="bold" color="red.400">Error</Text>
-                <Text fontSize="sm" color="gray.400">Widget '{widget.type}' not found.</Text>
-            </Flex>
-        );
-    };
-
-    return (
-        <Box width="100%" height="100%">
-            <ResponsiveGridLayout
-                className="layout"
-                layouts={{ lg: rglLayout }} // We feed it the formatted layout map
-                breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-                cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} // Our 12-column master grid
-                rowHeight={30}
-                isDraggable={isEditing}     // Only allows dragging when Settings tools toggle this
-                isResizable={false}         // Double lock-down
-                onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
-                compactType="vertical"      // Auto-packs widgets to the top
-            >
-                {/* 3. 🎨 Paint the Widgets */}
-                {widgets.map(widget => (
-                    <Box
-                        key={widget.id}
-                        bg="white"
-                        borderRadius="md"
-                        boxShadow={isEditing ? "outline" : "sm"} // Visual cue when editing
-                        border={isEditing ? "2px dashed gray" : "1px solid"}
-                        borderColor={isEditing ? "gray.400" : "gray.200"}
-                        overflow="hidden"
-                        cursor={isEditing ? "grab" : "default"}
-                        position="relative" // 3. REQUIRED so the absolute button stays inside this box
-                    >
-                        {/* 4. THE DELETE BUTTON */}
-                        {isEditing && (
-                            <IconButton
-                                aria-label="Remove widget"
-                                position="absolute"
-                                top={2}
-                                right={2}
-                                size="xs"
-                                bg="white"
-                                color={iconColor}
-                                border="1px solid"
-                                borderColor="gray.200"
-                                _hover={{ bg: "red.50", color: "red.500", borderColor: "red.200" }}
-                                zIndex={2}
-                                onClick={() => removeWidget(widget.id)}
-                                onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
-                                onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches
-                            >
-                                <X size={14} />
-                            </IconButton>
-                        )}
-
-                        {/* 4. SUSPENSE BOUNDARY wrapping the render function */}
-                        <Suspense fallback={
-                            <Flex w="100%" h="100%" align="center" justify="center" bg="gray.800">
-                                <Spinner size="md" color="blue.400" thickness="3px" />
-                            </Flex>
-                        }>
-                            {renderWidget(widget)}
-                        </Suspense>
-
-                    </Box>
-                ))}
-            </ResponsiveGridLayout>
-
-            {/* Empty State Helper */}
-            {widgets.length === 0 && (
-                <Flex width="100%" height="200px" align="center" justify="center">
-                    <Text color="gray.400">Your dashboard is empty. Click Settings to add widgets.</Text>
-                </Flex>
+                {/* NEW: The Positioner lifts the content out of the Flexbox flow */}
+                <Popover.Positioner zIndex={10}>
+                  <Popover.Content bg="gray.50" p={4} boxShadow="xl" borderRadius="md">
+                    <Suspense fallback={<Spinner size="sm"/>}>
+                      <SettingsUI
+                        widgetId={widget.id}
+                        currentSettings={widget.settings || {}}
+                      />
+                    </Suspense>
+                  </Popover.Content>
+                </Popover.Positioner>
+              </Popover.Root>
+            ) : (
+              <Box w="20px" h="20px"/>
             )}
-        </Box>
+          </Flex>
+
+          {/* THE CHART CANVAS */}
+          <Box flex="1" overflow="hidden" position="relative" p={1}>
+            {/* Pass the settings object into the actual chart component */}
+            {/* Pass widget ID to allow updating settings in widget component rather than just in settings component */}
+            <Component settings={widget.settings || {}} widgetID={widget.id || {}}/>
+          </Box>
+
+        </Flex>
+      );
+    }
+
+    // Fallback if someone asks for a widget that doesn't exist
+    return (
+      <Flex width="100%" height="100%" align="center" justify="center" direction="column" bg="gray.800">
+        <Text fontWeight="bold" color="red.400">Error</Text>
+        <Text fontSize="sm" color="gray.400">Widget '{widget.type}' not found.</Text>
+      </Flex>
     );
+  };
+
+  return (
+    <Box width="100%" height="100%">
+      <ResponsiveGridLayout
+        className="layout"
+        layouts={{lg: rglLayout}} // We feed it the formatted layout map
+        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
+        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}} // Our 12-column master grid
+        rowHeight={30}
+        isDraggable={isEditing}     // Only allows dragging when Settings tools toggle this
+        isResizable={false}         // Double lock-down
+        onLayoutChange={(newLayout) => updateLayoutPositions(newLayout)} // Fires when user drops a widget
+        compactType="vertical"      // Auto-packs widgets to the top
+      >
+        {/* 3. 🎨 Paint the Widgets */}
+        {widgets.map(widget => (
+          <Box
+            key={widget.id}
+            bg="white"
+            borderRadius="md"
+            boxShadow={isEditing ? "outline" : "sm"} // Visual cue when editing
+            border={isEditing ? "2px dashed gray" : "1px solid"}
+            borderColor={isEditing ? "gray.400" : "gray.200"}
+            overflow="hidden"
+            cursor={isEditing ? "grab" : "default"}
+            position="relative" // 3. REQUIRED so the absolute button stays inside this box
+          >
+            {/* 4. THE DELETE BUTTON */}
+            {isEditing && (
+              <IconButton
+                aria-label="Remove widget"
+                position="absolute"
+                top={2}
+                right={2}
+                size="xs"
+                bg="white"
+                color={iconColor}
+                border="1px solid"
+                borderColor="gray.200"
+                _hover={{bg: "red.50", color: "red.500", borderColor: "red.200"}}
+                zIndex={2}
+                onClick={() => removeWidget(widget.id)}
+                onMouseDown={(e) => e.stopPropagation()} // 🚫 Stops RGL from grabbing the widget
+                onTouchStart={(e) => e.stopPropagation()} // 🚫 Same protection for mobile touches
+              >
+                <X size={14}/>
+              </IconButton>
+            )}
+
+            {/* 4. SUSPENSE BOUNDARY wrapping the render function */}
+            <Suspense fallback={
+              <Flex w="100%" h="100%" align="center" justify="center" bg="gray.800">
+                <Spinner size="md" color="blue.400" thickness="3px"/>
+              </Flex>
+            }>
+              {renderWidget(widget)}
+            </Suspense>
+
+          </Box>
+        ))}
+      </ResponsiveGridLayout>
+
+      {/* Empty State Helper */}
+      {widgets.length === 0 && (
+        <Flex width="100%" height="200px" align="center" justify="center">
+          <Text color="gray.400">Your dashboard is empty. Click Settings to add widgets.</Text>
+        </Flex>
+      )}
+    </Box>
+  );
 }

client/src/store/useDashboardStore.jsx

@@ -1,109 +1,110 @@
-import { create } from 'zustand';
-import { v4 as uuid } from 'uuid';
-import { WIDGET_REGISTRY } from '../constants/widgetRegistry.jsx';
+import {create} from 'zustand';
+import {v4 as uuid} from 'uuid';
+import {WIDGET_REGISTRY} from '../constants/widgetRegistry.jsx';
 
 // 1. Import your database messenger
 import useAuthStore from './authStore';
 
 export const useDashboardStore = create((set, get) => ({
-    // ==========================================
-    // 1. STATE (The Data)
-    // ==========================================
+  // ==========================================
+  // 1. STATE (The Data)
+  // ==========================================
+  isEditing: false,
+  widgets: [],       // The master array of what is currently on the screen
+  backupWidgets: [], // Holds the layout snapshot for the "Cancel" button
+
+  // ==========================================
+  // 2. ACTIONS (The Logic)
+  // ==========================================
+
+  enterEditMode: () => set({
+    isEditing: true,
+    backupWidgets: get().widgets // 📸 Take a snapshot of current positions
+  }),
+
+  cancelEdit: () => set({
     isEditing: false,
-    widgets: [],       // The master array of what is currently on the screen
-    backupWidgets: [], // Holds the layout snapshot for the "Cancel" button
+    widgets: get().backupWidgets // ⏪ Restore snapshot, instantly undoing any drags
+  }),
 
-    // ==========================================
-    // 2. ACTIONS (The Logic)
-    // ==========================================
+  saveEdit: async () => {
+    // 1. Grab the exact current state of the grid
+    const currentLayout = get().widgets;
 
-    enterEditMode: () => set({
-        isEditing: true,
-        backupWidgets: get().widgets // 📸 Take a snapshot of current positions
-    }),
+    // 2. Lock the UI immediately so the user feels zero lag
+    set({isEditing: false, backupWidgets: []});
 
-    cancelEdit: () => set({
-        isEditing: false,
-        widgets: get().backupWidgets // ⏪ Restore snapshot, instantly undoing any drags
-    }),
+    // 3. Reach outside this store and trigger the Django API call!
+    try {
+      await useAuthStore.getState().saveDashboardLayout(currentLayout);
+    } catch (error) {
+      console.error("Failed to sync layout to MariaDB:", error);
+      // If the database save fails, you could technically revert the UI here if needed
+    }
+  },
 
-    saveEdit: async () => {
-        // 1. Grab the exact current state of the grid
-        const currentLayout = get().widgets;
+  updateWidgetSettings: (id, newSettings) => set((state) => {
+    // console.log("2. Zustand updating widget:", id, "with:", newSettings);
+    return {
+      widgets: state.widgets.map(widget =>
+        widget.id === id
+          ? {...widget, settings: {...widget.settings, ...newSettings}}
+          : widget
+      )
+    };
+  }),
 
-        // 2. Lock the UI immediately so the user feels zero lag
-        set({ isEditing: false, backupWidgets: [] });
+  addWidget: (widgetId, sizeKey) => {
+    const registryEntry = WIDGET_REGISTRY[widgetId];
 
-        // 3. Reach outside this store and trigger the Django API call!
-        try {
-            await useAuthStore.getState().saveDashboardLayout(currentLayout);
-        } catch (error) {
-            console.error("Failed to sync layout to MariaDB:", error);
-            // If the database save fails, you could technically revert the UI here if needed
-        }
-    },
+    if (!registryEntry || !registryEntry.allowedSizes[sizeKey]) {
+      console.error(`Invalid widget ID or Size: ${widgetId} - ${sizeKey}`);
+      return;
+    }
 
-    updateWidgetSettings: (id, newSettings) => set((state) => {
-        console.log("2. Zustand updating widget:", id, "with:", newSettings);
-        return {
-            widgets: state.widgets.map(widget =>
-                widget.id === id
-                    ? { ...widget, settings: { ...widget.settings, ...newSettings } }
-                    : widget
-            )
-        };
-    }),
+    const dimensions = registryEntry.allowedSizes[sizeKey];
+    const widgets = get().widgets;
 
-    addWidget: (widgetId, sizeKey) => {
-        const registryEntry = WIDGET_REGISTRY[widgetId];
+    let startX = 0;
+    let startY = Infinity;
 
-        if (!registryEntry || !registryEntry.allowedSizes[sizeKey]) {
-            console.error(`Invalid widget ID or Size: ${widgetId} - ${sizeKey}`);
-            return;
-        }
+    if (widgets.length > 0) {
+      const bottomRowY = Math.max(...widgets.map(w => w.y));
+      const bottomRowWidgets = widgets.filter(w => w.y === bottomRowY);
+      const rightmostEdge = Math.max(...bottomRowWidgets.map(w => w.x + w.w));
 
-        const dimensions = registryEntry.allowedSizes[sizeKey];
-        const widgets = get().widgets;
+      if (rightmostEdge + dimensions.w <= 12) {
+        startX = rightmostEdge; // ...tuck it right next to the last widget!
+        startY = bottomRowY;    // ...and keep it on the same row.
+      }
+    }
+    const newWidget = {
+      id: uuid(),
+      type: widgetId,
+      size: sizeKey,
+      settings: registryEntry.defaultSettings,
+      x: startX,
+      y: startY,
+      w: dimensions.w,
+      h: dimensions.h
+    };
+    console.log("newWidget: ", newWidget);
+    set((state) => ({widgets: [...state.widgets, newWidget]}));
+  },
 
-        let startX = 0;
-        let startY = Infinity;
+  removeWidget: (id) => set((state) => ({
+    widgets: state.widgets.filter(w => w.id !== id)
+  })),
 
-        if (widgets.length > 0) {
-            const bottomRowY = Math.max(...widgets.map(w => w.y));
-            const bottomRowWidgets = widgets.filter(w => w.y === bottomRowY);
-            const rightmostEdge = Math.max(...bottomRowWidgets.map(w => w.x + w.w));
+  updateLayoutPositions: (rglLayout) => {
+    set((state) => ({
+      widgets: state.widgets.map(widget => {
+        const gridItem = rglLayout.find(l => l.i === widget.id);
+        return gridItem ? {...widget, x: gridItem.x, y: gridItem.y} : widget;
+      })
+    }));
+  },
 
-            if (rightmostEdge + dimensions.w <= 12) {
-                startX = rightmostEdge; // ...tuck it right next to the last widget!
-                startY = bottomRowY;    // ...and keep it on the same row.
-            }
-        }
-        const newWidget = {
-            id: uuid(),
-            type: widgetId,
-            size: sizeKey,
-            x: startX,
-            y: startY,
-            w: dimensions.w,
-            h: dimensions.h
-        };
-
-        set((state) => ({ widgets: [...state.widgets, newWidget] }));
-    },
-
-    removeWidget: (id) => set((state) => ({
-        widgets: state.widgets.filter(w => w.id !== id)
-    })),
-
-    updateLayoutPositions: (rglLayout) => {
-        set((state) => ({
-            widgets: state.widgets.map(widget => {
-                const gridItem = rglLayout.find(l => l.i === widget.id);
-                return gridItem ? { ...widget, x: gridItem.x, y: gridItem.y } : widget;
-            })
-        }));
-    },
-
-    // NEW: Action to hydrate the store on initial page load
-    setWidgets: (savedWidgets) => set({ widgets: savedWidgets || [] })
+  // NEW: Action to hydrate the store on initial page load
+  setWidgets: (savedWidgets) => set({widgets: savedWidgets || []})
 }));