Enhance Chart.js dataset visibility management

- Introduced a mechanism to track and save the visibility state of datasets in the Chart.js historical plot component.
- Implemented functions to save, restore, and apply dataset visibility states during chart updates and creations.
- Modified the legend click behavior to update the visibility state in the dataset visibility map.
- Updated system state JSON to reflect changes in active datasets and last update timestamp.

frontend/src/components/ChartjsHistoricalPlot.jsx

@@ -54,6 +54,9 @@ const ChartjsHistoricalPlot = ({
         isPanEnabled: true
     });
 
+    // NEW: Track dataset visibility state
+    const datasetVisibilityRef = useRef(new Map());
+
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const [dataPointsCount, setDataPointsCount] = useState(0);
@@ -64,6 +67,60 @@ const ChartjsHistoricalPlot = ({
     const textColor = useColorModeValue('gray.600', 'gray.300');
     const borderColor = useColorModeValue('gray.200', 'gray.600');
 
+    // Helper function to save current dataset visibility state
+    const saveDatasetVisibility = useCallback(() => {
+        if (chartRef.current && chartRef.current.data.datasets) {
+            const visibilityMap = new Map();
+            chartRef.current.data.datasets.forEach((dataset, index) => {
+                const variableName = dataset.label;
+                // Use getDatasetMeta to get the actual visibility state that Chart.js uses
+                const meta = chartRef.current.getDatasetMeta(index);
+                const isHidden = meta.hidden === true;
+                visibilityMap.set(variableName, isHidden);
+                console.log(`📊 Saving visibility for ${variableName}: hidden=${isHidden}`);
+            });
+            datasetVisibilityRef.current = visibilityMap;
+        }
+    }, []);
+
+    // Helper function to restore dataset visibility state
+    const restoreDatasetVisibility = useCallback((datasets) => {
+        const visibilityMap = datasetVisibilityRef.current;
+        if (visibilityMap.size === 0) {
+            return datasets; // No previous state to restore
+        }
+
+        datasets.forEach((dataset) => {
+            const variableName = dataset.label;
+            if (visibilityMap.has(variableName)) {
+                dataset.hidden = visibilityMap.get(variableName);
+                console.log(`📊 Restoring visibility for ${variableName}: hidden=${dataset.hidden}`);
+            }
+        });
+
+        return datasets;
+    }, []);
+
+    // Helper function to apply visibility state to chart meta (after chart is created/updated)
+    const applyVisibilityToMeta = useCallback(() => {
+        if (!chartRef.current) return;
+        
+        const visibilityMap = datasetVisibilityRef.current;
+        if (visibilityMap.size === 0) return;
+
+        chartRef.current.data.datasets.forEach((dataset, index) => {
+            const variableName = dataset.label;
+            if (visibilityMap.has(variableName)) {
+                const shouldBeHidden = visibilityMap.get(variableName);
+                const meta = chartRef.current.getDatasetMeta(index);
+                if (meta.hidden !== shouldBeHidden) {
+                    meta.hidden = shouldBeHidden;
+                    console.log(`📊 Applied meta visibility for ${variableName}: hidden=${shouldBeHidden}`);
+                }
+            }
+        });
+    }, []);
+
     // Check dependencies on mount
     useEffect(() => {
         if (!checkChartDependencies()) {
@@ -154,6 +211,12 @@ const ChartjsHistoricalPlot = ({
         }
 
         try {
+            // SAVE visibility state FIRST, before any processing - this is the critical fix
+            if (chartRef.current) {
+                console.log('📊 Saving visibility state BEFORE data processing...');
+                saveDatasetVisibility();
+            }
+
             console.log(`📊 createOrUpdateChart called - Chart exists? ${!!chartRef.current}`);
             console.log(`📊 Processing ${historicalData.length} historical data points for variables:`, session?.variables);
 
@@ -195,6 +258,9 @@ const ChartjsHistoricalPlot = ({
                 // UPDATE existing chart data (faster, preserves zoom/pan)
                 console.log(`📊 Updating existing chart with ${processedData.datasets.length} datasets`);
                 
+                // RESTORE VISIBILITY STATE when updating datasets
+                restoreDatasetVisibility(processedData.datasets);
+                
                 chartRef.current.data.datasets = processedData.datasets;
                 
                 // Update time range for axis if we have time range data
@@ -213,11 +279,17 @@ const ChartjsHistoricalPlot = ({
                 // Update without animation for better performance
                 chartRef.current.update('none');
                 
-                console.log(`📊 Chart data updated (preserving zoom/pan state)`);
+                // Apply visibility state to chart meta AFTER update
+                applyVisibilityToMeta();
+                
+                console.log(`📊 Chart data updated (preserving zoom/pan state and dataset visibility)`);
             } else {
                 // CREATE new chart (first time only)
                 console.log(`📊 Creating new chart with ${processedData.datasets.length} datasets`);
 
+                // If we have previous visibility state, apply it to the new datasets
+                restoreDatasetVisibility(processedData.datasets);
+
                 // Create chart configuration
                 const chartConfig = createChartConfig(processedData, config, isZoomEnabled);
                 
@@ -237,6 +309,9 @@ const ChartjsHistoricalPlot = ({
                     setupZoomPanEvents(chartRef.current);
                 }
 
+                // Apply visibility state to chart meta AFTER chart creation
+                applyVisibilityToMeta();
+
                 console.log(`📊 Historical chart created for session ${sessionDataRef.current.sessionId} with ${processedData.datasets.length} datasets`);
             }
 
@@ -369,7 +444,27 @@ const ChartjsHistoricalPlot = ({
                     },
                     legend: {
                         display: true,
-                        position: 'top'
+                        position: 'top',
+                        onClick: function(event, legendItem, legend) {
+                            // Get the dataset index from the legend item
+                            const datasetIndex = legendItem.datasetIndex;
+                            const chart = legend.chart;
+                            const dataset = chart.data.datasets[datasetIndex];
+                            const meta = chart.getDatasetMeta(datasetIndex);
+                            
+                            // Get the CURRENT visibility state from meta (this is what Chart.js actually uses)
+                            const currentlyHidden = meta.hidden;
+                            const willBeHidden = !currentlyHidden; // After click it will be toggled
+                            
+                            console.log(`📊 Legend clicked for dataset: ${dataset.label}, currently hidden: ${currentlyHidden}, will be hidden: ${willBeHidden}`);
+                            
+                            // Call the default legend click behavior to toggle visibility
+                            Chart.defaults.plugins.legend.onClick.call(this, event, legendItem, legend);
+                            
+                            // Update our visibility map with the NEW state (after toggle)
+                            datasetVisibilityRef.current.set(dataset.label, willBeHidden);
+                            console.log(`📊 Saved visibility state for ${dataset.label}: hidden=${willBeHidden}`);
+                        }
                     },
                     tooltip: {
                         callbacks: {

system_state.json

@@ -3,12 +3,12 @@
         "should_connect": true,
         "should_stream": false,
         "active_datasets": [
-            "Test",
             "Fast",
+            "Test",
             "DAR"
         ]
     },
     "auto_recovery_enabled": true,
-    "last_update": "2025-08-16T20:26:17.367139",
+    "last_update": "2025-08-16T20:49:44.679756",
     "plotjuggler_path": "C:\\Program Files\\PlotJuggler\\plotjuggler.exe"
 }