From 0c178baa01469568e5cb78d141e7fceeaefc01e9 Mon Sep 17 00:00:00 2001 From: Christopher Hight Date: Tue, 20 Oct 2026 16:19:45 -0700 Subject: [PATCH] Refactor changed widgets to match themes. --- .../components/Widgets/ExplosionEvents.jsx | 88 +++++++++---------- client/src/components/Widgets/IvansAlerts.jsx | 48 +++++----- client/src/components/Widgets/PlumeEvents.jsx | 63 +++++++------ .../src/components/Widgets/RemoteSensing.jsx | 47 +++++----- .../src/components/Widgets/SeismicEvents.jsx | 55 ++++++------ 5 files changed, 144 insertions(+), 157 deletions(-) diff --git a/client/src/components/Widgets/ExplosionEvents.jsx b/client/src/components/Widgets/ExplosionEvents.jsx index 2ddbf51..0f1e742 100644 --- a/client/src/components/Widgets/ExplosionEvents.jsx +++ b/client/src/components/Widgets/ExplosionEvents.jsx @@ -5,13 +5,17 @@ import Plot from 'react-plotly.js'; import VdapApi from '../../hooks/useVdapApi.js'; import useBuildUrl from "@/hooks/useBuildUrl.js"; +// 1. Import your central color dictionary +import { rawWidgetColors } from '../../theme.js'; + export default function ExplosionEvents({ settings, widgetID }) { // Plotly expects 'linear' for normal axes 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'; + // Assign the active palette based on the current mode + const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light; // Generate url with input dates, default to 7 day range const url = useBuildUrl('/api/v2/explosion_events', settings?.startDate, settings?.endDate); @@ -53,58 +57,46 @@ export default function ExplosionEvents({ settings, widgetID }) { mode: 'markers', marker: { size: 7, - line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' }, + line: { width: .5, color: plotColors.text }, symbol: Symbolway[index % Symbolway.length], }, // Replicating the clean D3/Observable tooltip hovertemplate: - `${volcanoName}
` + - 'Date (UTC): %{x|%b %d %Y %H:%M}
' + - 'Number of Explosions: %{y}' + `${volcanoName}
` + + 'Date (UTC): %{x|%b %d %Y %H:%M}
' + + 'Number of Explosions: %{y}' })); - }, [apiData]); + }, [apiData, plotColors]); // 2. Build the Layout (Styling and Grid) const layout = useMemo(() => { - return { autosize: true, - paper_bgcolor: 'transparent', // Let Chakra UI background show through + paper_bgcolor: 'transparent', plot_bgcolor: 'transparent', - font: { color: '#d1d5db' }, // gray.300 + font: { color: plotColors.muted }, 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 } + font: { color: plotColors.text, size: 12 } }, type: 'date', - tickformat: '%b %d
%Y', // D3 requested %b %d \n %Y formatting - gridcolor: '#4b5563', - zerolinecolor: '#4b5563', + tickformat: '%b %d
%Y', + gridcolor: plotColors.grid, + zerolinecolor: plotColors.grid, automargin: true, }, yaxis: { title: { text: 'Number of Explosions', - font: { color: 'white', size: 12 } + font: { color: plotColors.text, size: 12 } }, type: plotYAxisType, - gridcolor: '#4b5563', - zerolinecolor: '#ffffff', + gridcolor: plotColors.grid, + zerolinecolor: plotColors.text, automargin: true, }, - // legend: { - // orientation: 'h', - // y: -0.2, - // x: 0.5, - // xanchor: 'center' - // }, hovermode: 'closest', shapes: [ { @@ -115,40 +107,40 @@ export default function ExplosionEvents({ settings, widgetID }) { y0: 0, y1: 0, yref: 'y', - line: { color: 'white', width: 1 } + line: { color: plotColors.text, width: 1 } } ], }; - }, [apiData, plotYAxisType]); + }, [plotYAxisType, plotColors]); if (isLoading) return ( - - - + + + ); if (error) return ( - - {error} - + + {error} + ); if (plotTraces.length === 0) return ( - - No data available for current filter. - + + No data available for current filter. + ); return ( - - - + + + ); } \ No newline at end of file diff --git a/client/src/components/Widgets/IvansAlerts.jsx b/client/src/components/Widgets/IvansAlerts.jsx index 48451a7..f65db1f 100644 --- a/client/src/components/Widgets/IvansAlerts.jsx +++ b/client/src/components/Widgets/IvansAlerts.jsx @@ -43,30 +43,31 @@ export default function IvansAlerts({ settings, widgetID }) { }).join('\n\n'); navigator.clipboard.writeText(dataText) .then(() => { - alert('Copied to clipboard!'); + alert('Copied to clipboard!'); }) .catch((err => { - console.error('Failed to copy: ', err); + console.error('Failed to copy: ', err); })); updateSettings(widgetID, {copyToClipboard: false}); } }, [settings, some_data, widgetID, updateSettings]); + // Cleaned hardcoded grays for transparent so glass shell shows through if (isLoading) return ( - + ); if (error) return ( - + {error} ); if (some_data.length === 0) return ( - - No flight level data available for the selected dates. + + No flight level data available for the selected dates. ); @@ -78,7 +79,7 @@ export default function IvansAlerts({ settings, widgetID }) { p={2} gap={2} overflow="auto" borderRadius="xl" - bg="gray.800" + bg="transparent" // Let the global widgetRecipe glass shell show through > {some_data.map((item, index) => { if (thisWidget?.size === "large") return ( @@ -96,31 +97,31 @@ export default function IvansAlerts({ settings, widgetID }) { gap={2} borderTopRadius="lg" borderBottomRadius={collapsible.open ? "0" : "lg"} - bg="gray.600" + bg="widgetItemBg" > - + {item.volcano_name} - {item.send_time} + {item.send_time} - {item.report_num} + {item.report_num} {/* This box needs to be at h="100%" for the pdf toolbar to appear */} - - - {item?.summary} - Preparer: {item?.preparer} + + + {item?.summary} + Preparer: {item?.preparer} {item?.files?.map((file, index) => { return (
- {file?.name} - + {file?.name} + Open @@ -131,8 +132,8 @@ export default function IvansAlerts({ settings, widgetID }) { type="application/pdf" style={{ width: '100%', height: '100%', display: 'block' }} > - - + + Your browser cannot display this PDF directly. @@ -151,19 +152,20 @@ export default function IvansAlerts({ settings, widgetID }) { ) else if (thisWidget?.size === "small") return ( - + {item.volcano_name} - {item.send_time} + {item.send_time} - {item.report_num} + {item.report_num} ) diff --git a/client/src/components/Widgets/PlumeEvents.jsx b/client/src/components/Widgets/PlumeEvents.jsx index 925a96d..8b5c6a4 100644 --- a/client/src/components/Widgets/PlumeEvents.jsx +++ b/client/src/components/Widgets/PlumeEvents.jsx @@ -1,10 +1,18 @@ -import VdapApi from '../../hooks/useVdapApi.js'; 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 {Box, Flex, Spinner, Text} from "@chakra-ui/react"; +import VdapApi from '../../hooks/useVdapApi.js'; import useBuildUrl from "@/hooks/useBuildUrl.js"; +// 1. Import your central color dictionary +import { rawWidgetColors } from '../../theme.js'; + export default function PlumeEvents({ settings, widgetID}) { + const { colorMode } = useColorMode(); + // 2. Assign the active palette based on the current mode + const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light; + // Build url, defaults to 7 days past const url = useBuildUrl('/api/v2/plume_events', settings?.startDate, settings?.endDate); @@ -44,7 +52,7 @@ export default function PlumeEvents({ settings, widgetID}) { mode: 'markers', marker: { size: 7, - line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' }, + line: { width: .5, color: plotColors.text }, symbol: Symbolway[index % Symbolway.length], }, // Replicating the clean D3/Observable tooltip @@ -53,88 +61,77 @@ export default function PlumeEvents({ settings, widgetID}) { 'Date (UTC): %{x|%b %d %Y %H:%M}
' + 'Plume Height (m): %{y}' })); - }, [apiData]); + }, [apiData, plotColors]); const layout = useMemo(() => { - return { autosize: true, paper_bgcolor: 'transparent', // Let Chakra UI background show through plot_bgcolor: 'transparent', - font: { color: '#d1d5db' }, // gray.300 + font: { color: plotColors.muted }, 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 } + font: { color: plotColors.text, size: 12 } }, type: 'date', - tickformat: '%b %d
%Y', // D3 requested %b %d \n %Y formatting - gridcolor: '#4b5563', - zerolinecolor: '#4b5563', + tickformat: '%b %d
%Y', + gridcolor: plotColors.grid, + zerolinecolor: plotColors.grid, automargin: true, }, yaxis: { title: { text: 'Plume Height', - font: { color: 'white', size: 12 } + font: { color: plotColors.text, size: 12 } }, type: 'linear', - gridcolor: '#4b5563', - zerolinecolor: '#ffffff', + gridcolor: plotColors.grid, + zerolinecolor: plotColors.text, 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 + xref: 'paper', y0: 0, y1: 0, yref: 'y', - line: { color: 'white', width: 1 } + line: { color: plotColors.text, width: 1 } } ], }; - }, []); + }, [plotColors]); if (isLoading) return ( - + ); if (error) return ( - + {error} ); if (plotTraces.length === 0) return ( - - No data available for current filter. + + No data available for current filter. ); return ( - + diff --git a/client/src/components/Widgets/RemoteSensing.jsx b/client/src/components/Widgets/RemoteSensing.jsx index 3adbb27..38ed592 100644 --- a/client/src/components/Widgets/RemoteSensing.jsx +++ b/client/src/components/Widgets/RemoteSensing.jsx @@ -52,25 +52,25 @@ export default function RemoteSensing({ settings, widgetID }) { }, [settings, data, widgetID, updateSettings]); if (isLoading) return ( - + ); if (error) return ( - + {error} ); if (data.length === 0) return ( - - No Remote Sensing data available this week. + + No Remote Sensing data available this week. ); return ( - + {data.map((item, index) => { if (thisWidget?.size === "large" || thisWidget?.size === "medium") return ( @@ -80,14 +80,14 @@ export default function RemoteSensing({ settings, widgetID }) { <> - + {item?.volcano_name} - {item?.country} + {item?.country} - + {item?.report_time} @@ -95,10 +95,10 @@ export default function RemoteSensing({ settings, widgetID }) { {/* This box needs to be at h="100%" for the pdf toolbar to appear */} - - - {item?.summary} - Source: {item?.sender} + + + {item?.summary} + Source: {item?.sender} {item?.files?.map((file, index) => { @@ -107,15 +107,15 @@ export default function RemoteSensing({ settings, widgetID }) {
- {file?.name} - PDF + {file?.name} + PDF - + Your browser cannot display this PDF directly. @@ -132,8 +132,8 @@ export default function RemoteSensing({ settings, widgetID }) {
- {file?.name} - PNG + {file?.name} + PNG {file?.name} @@ -146,7 +146,7 @@ export default function RemoteSensing({ settings, widgetID }) { <>
- {file?.name} + {file?.name} @@ -162,17 +162,17 @@ export default function RemoteSensing({ settings, widgetID }) { ) else if (thisWidget?.size === "small") return ( - - + + {item?.volcano_name} - {item?.country} + {item?.country} {item?.report_time} @@ -185,7 +185,6 @@ export default function RemoteSensing({ settings, widgetID }) { ); } - function ascTimeVolcanoSort(a, b) { if (a.volcano_name < b.volcano_name) return -1 else if (a.volcano_name > b.volcano_name) return 1 diff --git a/client/src/components/Widgets/SeismicEvents.jsx b/client/src/components/Widgets/SeismicEvents.jsx index d01dd75..3e3259d 100644 --- a/client/src/components/Widgets/SeismicEvents.jsx +++ b/client/src/components/Widgets/SeismicEvents.jsx @@ -1,10 +1,18 @@ 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 { Box, Flex, Spinner, Text } from "@chakra-ui/react"; import useBuildUrl from "@/hooks/useBuildUrl.js"; +// 1. Import Chakra color mode and your central color dictionary +import { useColorMode } from "@/components/ui/color-mode.jsx"; +import { rawWidgetColors } from '../../theme.js'; + export default function SeismicEvents({ settings, widgetID}) { + const { colorMode } = useColorMode(); + // 2. Assign the active palette based on the current mode + const plotColors = colorMode === 'dark' ? rawWidgetColors.dark : rawWidgetColors.light; + // build url, defaults to 7 days past const url = useBuildUrl('/api/v2/seismic_events', settings?.startDate, settings?.endDate); @@ -44,7 +52,7 @@ export default function SeismicEvents({ settings, widgetID}) { mode: 'markers', marker: { size: 7, - line: { width: .5, color: 'rgba(255, 255, 255, 0.7)' }, + line: { width: .5, color: plotColors.text }, symbol: Symbolway[index % Symbolway.length], }, // Replicating the clean D3/Observable tooltip @@ -53,48 +61,36 @@ export default function SeismicEvents({ settings, widgetID}) { 'Date (UTC): %{x|%b %d %Y %H:%M}
' + 'Number of Seismic Events: %{y}' })); - }, [apiData]); + }, [apiData, plotColors]); const layout = useMemo(() => { - return { autosize: true, paper_bgcolor: 'transparent', // Let Chakra UI background show through plot_bgcolor: 'transparent', - font: { color: '#d1d5db' }, // gray.300 + font: { color: plotColors.muted }, 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 } + font: { color: plotColors.text, size: 12 } }, type: 'date', tickformat: '%b %d
%Y', // D3 requested %b %d \n %Y formatting - gridcolor: '#4b5563', - zerolinecolor: '#4b5563', + gridcolor: plotColors.grid, + zerolinecolor: plotColors.grid, automargin: true, }, yaxis: { title: { text: 'Seismic Count', - font: { color: 'white', size: 12 } + font: { color: plotColors.text, size: 12 } }, type: 'linear', - gridcolor: '#4b5563', - zerolinecolor: '#ffffff', + gridcolor: plotColors.grid, + zerolinecolor: plotColors.text, automargin: true, }, - // legend: { - // orientation: 'h', - // y: -0.2, - // x: 0.5, - // xanchor: 'center' - // }, hovermode: 'closest', shapes: [ { @@ -105,33 +101,34 @@ export default function SeismicEvents({ settings, widgetID}) { y0: 0, y1: 0, yref: 'y', - line: { color: 'white', width: 1 } + line: { color: plotColors.text, width: 1 } } ], }; - }, []); + }, [plotColors]); if (isLoading) return ( - + ); if (error) return ( - + {error} ); if (plotTraces.length === 0) return ( - - No data available for current filter. + + No data available for current filter. ); return ( - +