Update Explosion plot widget with event counts and add theme support

2026-07-15 13:56:12 -07:00
parent e0de9800c4
commit ccfbb15434
8 changed files with 36 additions and 24 deletions
@@ -1,12 +1,16 @@
 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

 export default function ExplosionEvents({ settings }) {
-    console.log("3. Chart received settings:", settings);
    // Plotly expects 'linear' for normal axes
-    const plotYAxisType = settings?.yAxisScale === 'symlog' ? 'symlog' : 'linear';
+    const plotYAxisType = settings?.yAxisScale === 'log' ? 'log' : 'linear';
+
+    // 🎨 Let's check color mode so we can make people happy with light and dark
+    const { colorMode } = useColorMode();
+    const isDark = colorMode === 'dark';

    // 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');
@@ -23,16 +27,17 @@ export default function ExplosionEvents({ settings }) {
            'hexagon', 'octagon', 'cross', 'x'
        ];

-        // Sort data descending by flight level (matching Observable behavior)
-        const sortedData = [...apiData].sort((a, b) => b.obs_fl - a.obs_fl);
+        // Sort data descending by number of events 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.volc_name || 'Unknown';
+            const name = curr.volcano_name || 'Unknown';
            if (!acc[name]) acc[name] = { x: [], y: [] };

-            acc[name].x.push(new Date(curr.obs_va_epoch));
-            acc[name].y.push(curr.obs_fl);
+            // Map the explosion-specific keys
+            acc[name].x.push(new Date(curr.ts_epoch));
+            acc[name].y.push(curr.number_events);
            return acc;
        }, {});

@@ -47,11 +52,11 @@ export default function ExplosionEvents({ settings }) {
                line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' },
                symbol: Symbolway[index % Symbolway.length],
            },
-            // Replicating the clean Observable tooltip
+            // Replicating the clean D3/Observable tooltip
            hovertemplate:
                `<b>${volcanoName}</b><br>` +
-                'Date: %{x|%b %d %Y %H:%M}<br>' +
-                'Flight Level: %{y}<extra></extra>'
+                'Date (UTC): %{x|%b %d %Y %H:%M}<br>' +
+                'Number of Explosions: %{y}<extra></extra>'
        }));
    }, [apiData]);

@@ -75,14 +80,14 @@ export default function ExplosionEvents({ settings }) {
                    font: { color: 'white', size: 12 }
                },
                type: 'date',
-                tickformat: '%b %d<br>%Y %H:%M', // Multiline ticks from Observable
+                tickformat: '%b %d<br>%Y', // D3 requested %b %d \n %Y formatting
                gridcolor: '#4b5563',
                zerolinecolor: '#4b5563',
                automargin: true,
            },
            yaxis: {
                title: {
-                    text: 'Flight Level',
+                    text: 'Number of Explosions',
                    font: { color: 'white', size: 12 }
                },
                type: plotYAxisType,
@@ -126,12 +131,12 @@ export default function ExplosionEvents({ settings }) {

    if (plotTraces.length === 0) return (
        <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
-            <Text color="gray.400">No flight level data available.</Text>
+            <Text color="gray.400">No data available for current filter.</Text>
        </Flex>
    );

    return (
-        <Box height="100%" width="100%" bg="gray.800" borderRadius="md" p={2} overflow="hidden">
+        <Box height="100%" width="100%" bg="transparent" borderRadius="md" p={2} overflow="hidden">
            <Plot
                key={plotYAxisType}
                data={plotTraces}
@@ -5,14 +5,14 @@ export default function ExplosionEventsSettings({ widgetId, currentSettings }) {
    const updateSettings = useDashboardStore(state => state.updateWidgetSettings);

    // 1. Convert the saved string into a boolean for the toggle UI
-    const isSymlog = currentSettings?.yAxisScale === 'symlog';
+    const isSymlog = currentSettings?.yAxisScale === 'log';

    const handleToggle = (details) => {
        // 2. Chakra v3 passes { checked: boolean } in the details object.
        // Convert it back to the string Plotly expects.
        console.log("1. Toggle Clicked! Raw details from Chakra:", details);

-        const newScale = details.checked ? 'symlog' : 'normal';
+        const newScale = details.checked ? 'log' : 'normal';

        updateSettings(widgetId, { yAxisScale: newScale });
    };
@@ -30,7 +30,7 @@ export default function ExplosionEventsSettings({ widgetId, currentSettings }) {
                <Switch.Control>
                    <Switch.Thumb />
                </Switch.Control>
-                <Switch.Label>Use Symlog Scale</Switch.Label>
+                <Switch.Label>Use Log Scale</Switch.Label>
            </Switch.Root>
        </Box>
    );
@@ -1,5 +1,5 @@
 import { Box, Menu, Portal } from '@chakra-ui/react'
-import AlertLevel from "@/components/Widgets/AlertLevelWidget.jsx";
+import AlertLevel from "@/components/deprecated/AlertLevelWidget.jsx";

 export default function FirstWidgetButton({ appendWidget }) {
  const triggerItem = (
@@ -1,5 +1,5 @@
 import { Menu, Portal } from "@chakra-ui/react";
-import AlertLevel from "../Widgets/AlertLevelWidget.jsx";
+import AlertLevel from "./AlertLevelWidget.jsx";

 export default function WidgetMenu({appendWidget, triggerItem, positioning}) {
  return (