Update widgets and added settings

client/src/components/Widgets/AlertLevelWidget.jsx

@@ -9,7 +9,6 @@ export default function AlertLevel({id, isEditable, isDelete, DeleteWidget}) {
   const [isSubmit, setIsSubmit] = useState(false);
 
   const onSubmit = (data) => {
-    console.log("data: ", data);
     setIsSubmit(true);
     reset();
   }

client/src/components/Widgets/VaaActivity7Day.jsx

@@ -3,7 +3,11 @@ 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() {
+export default function VaaActivity7Day({ settings }) {
+    console.log("3. Chart received settings:", settings);
+    // Plotly expects 'linear' for normal axes
+    const plotYAxisType = settings?.yAxisScale === 'symlog' ? 'symlog' : 'linear';
+
     // Clean, single-line data fetching
     const { data: apiData, isLoading, error } = VdapApi('/api/v2/comm_coor_vaa');
 
@@ -59,7 +63,7 @@ export default function VaaActivity7Day() {
             paper_bgcolor: 'transparent', // Let Chakra UI background show through
             plot_bgcolor: 'transparent',
             font: { color: '#d1d5db' }, // gray.300
-            margin: { t: 20, r: 20, l: 20, b: 20 },
+            margin: { t: 40, r: 20, l: 20, b: 20 },
             // title: {
             //     text: '7 Day Consolidated Flight Levels',
             //     font: { size: 16, color: 'white' },
@@ -81,6 +85,7 @@ export default function VaaActivity7Day() {
                     text: 'Flight Level',
                     font: { color: 'white', size: 12 }
                 },
+                type: plotYAxisType,
                 gridcolor: '#4b5563',
                 zerolinecolor: '#ffffff',
                 automargin: true,
@@ -105,7 +110,7 @@ export default function VaaActivity7Day() {
                 }
             ],
         };
-    }, [apiData]);
+    }, [apiData, plotYAxisType]);
 
     if (isLoading) return (
         <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
@@ -128,6 +133,7 @@ export default function VaaActivity7Day() {
     return (
         <Box height="100%" width="100%" bg="gray.800" borderRadius="md" p={2} overflow="hidden">
             <Plot
+                key={plotYAxisType}
                 data={plotTraces}
                 layout={layout}
                 useResizeHandler={true} // Essential for dashboard grid resizing!

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

@@ -0,0 +1,37 @@
+import { Box, Text, Switch } from "@chakra-ui/react";
+import { useDashboardStore } from "../../../store/useDashboardStore.jsx";
+
+export default function VaaActivitySettings({ 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 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';
+
+        updateSettings(widgetId, { yAxisScale: newScale });
+    };
+
+    return (
+        <Box>
+            <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 Symlog Scale</Switch.Label>
+            </Switch.Root>
+        </Box>
+    );
+}