[Ethernet view] Save plotted variables on a higher level so they aren't destroyed when closing the plots window

ethernet-view/src/components/ChartMenu/ChartElement/ChartElement.tsx

@@ -3,32 +3,31 @@ import { AiOutlineCloseCircle } from 'react-icons/ai'
 import { MeasurementId, NumericMeasurementInfo, useMeasurementsStore } from 'common';
 import { ChartCanvas } from './ChartCanvas/ChartCanvas';
 import { ChartLegend } from './ChartLegend/ChartLegend';
-import { memo, useCallback, useState } from "react";
+import { memo } from "react";
 import { ChartId } from "../ChartMenu";
 
-type Props = {
+interface Props {
     chartId: ChartId;
     initialMeasurementId: MeasurementId;
     removeChart: (chartId: ChartId) => void;
-};
+    measurementsInChart: MeasurementId[];
+    setMeasurementsInChart: (ids: MeasurementId[]) => void;
+}
 
 // React component that keeps the chart render and measurements represented on it.
-export const ChartElement = memo(({ chartId, initialMeasurementId, removeChart }: Props) => {
-
+export const ChartElement = memo(({ chartId, removeChart, measurementsInChart, setMeasurementsInChart }: Props) => {
     const getNumericMeasurementInfo = useMeasurementsStore(state => state.getNumericMeasurementInfo);
-    const initialMeasurement = getNumericMeasurementInfo(initialMeasurementId);
-
-    const [measurementsInChart, setMeasurementsInChart] = useState([initialMeasurement]);
+    const measurementInfos: NumericMeasurementInfo[] = measurementsInChart.map(getNumericMeasurementInfo);
 
     const addMeasurementToChart = (measurement: NumericMeasurementInfo) => {
-        if(!measurementsInChart.some(measurementInChart => measurementInChart.id === measurement.id)) {
-            setMeasurementsInChart([...measurementsInChart, measurement]);
+        if(!measurementsInChart.includes(measurement.id)) {
+            setMeasurementsInChart([...measurementsInChart, measurement.id]);
         }
     }
 
-    const removeMeasurementFromChart = useCallback((measurementId: MeasurementId) => {
-        setMeasurementsInChart(prevMeasurements => prevMeasurements.filter(measurement => measurement.id !== measurementId));
-    }, []);
+    const removeMeasurementFromChart = (measurementId: MeasurementId) => {
+        setMeasurementsInChart(measurementsInChart.filter(id => id !== measurementId));
+    };
 
     const handleDrop = (ev: React.DragEvent<HTMLDivElement>) => {
         ev.stopPropagation();
@@ -51,11 +50,11 @@ export const ChartElement = memo(({ chartId, initialMeasurementId, removeChart }
                     onClick={() => removeChart(chartId)}
                 />
                 <ChartCanvas
-                    measurementsInChart={measurementsInChart}
+                    measurementsInChart={measurementInfos}
                 />
                 <ChartLegend
                     chartId={chartId}
-                    measurementsInChart={measurementsInChart}
+                    measurementsInChart={measurementInfos}
                     removeMeasurementFromChart={removeMeasurementFromChart}
                     removeChart={removeChart}
                 />

ethernet-view/src/components/ChartMenu/ChartMenu.tsx

@@ -1,5 +1,5 @@
 import styles from "components/ChartMenu/ChartMenu.module.scss";
-import { DragEvent, memo, useCallback, useState } from "react";
+import { DragEvent, memo, useCallback } from "react";
 import Sidebar from "components/ChartMenu/Sidebar/Sidebar";
 import { Section } from "./Sidebar/Section/Section";
 import { MeasurementId, useMeasurementsStore } from "common";
@@ -13,23 +13,30 @@ export type ChartInfo = {
     initialMeasurementId: MeasurementId;
 };
 
-type Props = {
+interface Props {
     sidebarSections: Section[];
-};
-
-export const ChartMenu = memo(({ sidebarSections }: Props) => {
+    charts: ChartInfo[];
+    setCharts: React.Dispatch<React.SetStateAction<ChartInfo[]>>;
+    measurementsByChart: Record<ChartId, MeasurementId[]>;
+    setMeasurementsByChart: React.Dispatch<React.SetStateAction<Record<ChartId, MeasurementId[]>>>;
+}
 
+export const ChartMenu = memo(({ sidebarSections, charts, setCharts, measurementsByChart, setMeasurementsByChart }: Props) => {
     const getNumericMeasurementInfo = useMeasurementsStore((state) => state.getNumericMeasurementInfo);
 
-    const [charts, setCharts] = useState<ChartInfo[]>([]);
-
-    const addChart = ((chartId: ChartId, initialMeasurementId: MeasurementId) => {
-        setCharts([...charts, { chartId, initialMeasurementId }]);
-    });
+    const addChart = (chartId: ChartId, initialMeasurementId: MeasurementId) => {
+        setCharts(prev => [...prev, { chartId, initialMeasurementId }]);
+        setMeasurementsByChart(prev => ({ ...prev, [chartId]: [initialMeasurementId] }));
+    };
 
     const removeChart = useCallback((chartId: ChartId) => {
         setCharts(prevCharts => prevCharts.filter(chart => chart.chartId !== chartId));
-    }, []);
+        setMeasurementsByChart(prev => {
+            const copy = { ...prev };
+            delete copy[chartId];
+            return copy;
+        });
+    }, [setCharts, setMeasurementsByChart]);
 
     const handleDrop = (ev: DragEvent<HTMLDivElement>) => {
         ev.preventDefault();
@@ -62,10 +69,13 @@ export const ChartMenu = memo(({ sidebarSections }: Props) => {
                             chartId={chart.chartId}
                             initialMeasurementId={chart.initialMeasurementId}
                             removeChart={removeChart}
+                            measurementsInChart={measurementsByChart[chart.chartId] || []}
+                            setMeasurementsInChart={(measurementIds) => setMeasurementsByChart(prev => ({ ...prev, [chart.chartId]: measurementIds }))}
                         />
                     ))}
                 </div>
             </div>
         );
     }
 });
+

ethernet-view/src/pages/TestingPage/ChartsColumn/ChartsColumn.tsx

@@ -1,11 +1,18 @@
 import { TabLayout } from "layouts/TabLayout/TabLayout";
-import { ChartMenu } from "components/ChartMenu/ChartMenu";
+import { ChartMenu, ChartInfo, ChartId } from "components/ChartMenu/ChartMenu";
 import { ReactComponent as Chart } from "assets/svg/chart.svg";
 import { useMemo } from "react";
 import { useMeasurementsStore, usePodDataStore, useSubscribe } from "common";
 import { createSidebarSections } from "components/ChartMenu/sidebar";
 
-export const ChartsColumn = () => {
+interface ChartsColumnProps {
+    charts: ChartInfo[];
+    setCharts: React.Dispatch<React.SetStateAction<ChartInfo[]>>;
+    measurementsByChart: Record<ChartId, string[]>;
+    setMeasurementsByChart: React.Dispatch<React.SetStateAction<Record<ChartId, string[]>>>;
+}
+
+export const ChartsColumn = ({ charts, setCharts, measurementsByChart, setMeasurementsByChart }: ChartsColumnProps) => {
     const podData = usePodDataStore(state => state.podData);
     const updatePodData = usePodDataStore(state => state.updatePodData)
     const updateMeasurements = useMeasurementsStore(state => state.updateMeasurements)
@@ -17,16 +24,22 @@ export const ChartsColumn = () => {
 
     const sections = useMemo(() => {
         return createSidebarSections(podData);
-    }, []);
+    }, [podData]);
 
     const chartsColumnTabItems = [
-            {
-                id: "charts",
-                name: "Charts",
-                icon: <Chart />,
-                component: <ChartMenu sidebarSections={sections} />,
-            },
-        ]
+        {
+            id: "charts",
+            name: "Charts",
+            icon: <Chart />,
+            component: <ChartMenu 
+                sidebarSections={sections} 
+                charts={charts}
+                setCharts={setCharts}
+                measurementsByChart={measurementsByChart}
+                setMeasurementsByChart={setMeasurementsByChart}
+            />,
+        },
+    ];
 
     return <TabLayout tabs={chartsColumnTabItems}></TabLayout>;
 };

ethernet-view/src/pages/TestingPage/TestingPage.tsx

@@ -10,15 +10,20 @@ import incomingMessage from "assets/svg/incoming-message.svg";
 import paperAirplane from "assets/svg/paper-airplane.svg";
 import outgoingMessage from "assets/svg/outgoing-message.svg";
 import chart from "assets/svg/chart.svg";
+import { ChartInfo, ChartId } from "components/ChartMenu/ChartMenu";
+import { MeasurementId } from "common";
 
 export const TestingPage = () => {
   const [collapsed, setCollapsed] = useState({
     charts: false,
-    receive: false,
-    order: false,
+    packets: false,
+    orders: false,
     messages: false,
   });
 
+  const [charts, setCharts] = useState<ChartInfo[]>([]);
+  const [measurementsByChart, setMeasurementsByChart] = useState<Record<ChartId, MeasurementId[]>>({});
+
   const toggleCollapse = (key: keyof typeof collapsed) => {
     setCollapsed((prev) => ({ ...prev, [key]: !prev[key] }));
   };
@@ -27,20 +32,20 @@ export const TestingPage = () => {
     {
       key: "charts" as const,
       icon: chart,
-      component: <ChartsColumn />,
+      component: <ChartsColumn charts={charts} setCharts={setCharts} measurementsByChart={measurementsByChart} setMeasurementsByChart={setMeasurementsByChart} />, // props nuevos
       collapsed: collapsed.charts,
     },
     {
-      key: "receive" as const,
+      key: "packets" as const,
       icon: incomingMessage,
       component: <ReceiveColumn />,
-      collapsed: collapsed.receive,
+      collapsed: collapsed.packets,
     },
     {
-      key: "order" as const,
+      key: "orders" as const,
       icon: paperAirplane,
       component: <OrderColumn />,
-      collapsed: collapsed.order,
+      collapsed: collapsed.orders,
     },
     {
       key: "messages" as const,
@@ -62,7 +67,7 @@ export const TestingPage = () => {
               className={`btn btn-sm btn-${collapsed[key] ? "outline-primary" : "primary"}`}
               onClick={() => toggleCollapse(key)}
             >
-              {collapsed[key] ? `Mostrar ${key}` : `Ocultar ${key}`}
+              {collapsed[key] ? `Show ${key}` : `Hide ${key}`}
             </button>
           ))}
         </div>