From 6f8df5f3389297404de363f92eaa45df3582b464 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joan=20F=C3=ADsica?= Date: Wed, 25 Jun 2025 19:08:14 +0200 Subject: [PATCH 1/3] Implement plot memory on a higher level so it isn't destroyed when closing the island --- .../ChartMenu/ChartElement/ChartElement.tsx | 29 ++++++++-------- .../src/components/ChartMenu/ChartMenu.tsx | 32 +++++++++++------- .../TestingPage/ChartsColumn/ChartsColumn.tsx | 33 +++++++++++++------ .../src/pages/TestingPage/TestingPage.tsx | 7 +++- 4 files changed, 64 insertions(+), 37 deletions(-) diff --git a/ethernet-view/src/components/ChartMenu/ChartElement/ChartElement.tsx b/ethernet-view/src/components/ChartMenu/ChartElement/ChartElement.tsx index 39c2e3db7..e49876f0a 100644 --- a/ethernet-view/src/components/ChartMenu/ChartElement/ChartElement.tsx +++ b/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, initialMeasurementId, 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) => { ev.stopPropagation(); @@ -51,11 +50,11 @@ export const ChartElement = memo(({ chartId, initialMeasurementId, removeChart } onClick={() => removeChart(chartId)} /> diff --git a/ethernet-view/src/components/ChartMenu/ChartMenu.tsx b/ethernet-view/src/components/ChartMenu/ChartMenu.tsx index 324cc7b0d..931b69f6a 100644 --- a/ethernet-view/src/components/ChartMenu/ChartMenu.tsx +++ b/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>; + measurementsByChart: Record; + setMeasurementsByChart: React.Dispatch>>; +} +export const ChartMenu = memo(({ sidebarSections, charts, setCharts, measurementsByChart, setMeasurementsByChart }: Props) => { const getNumericMeasurementInfo = useMeasurementsStore((state) => state.getNumericMeasurementInfo); - const [charts, setCharts] = useState([]); - - 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) => { ev.preventDefault(); @@ -62,6 +69,8 @@ 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 }))} /> ))} @@ -69,3 +78,4 @@ export const ChartMenu = memo(({ sidebarSections }: Props) => { ); } }); + diff --git a/ethernet-view/src/pages/TestingPage/ChartsColumn/ChartsColumn.tsx b/ethernet-view/src/pages/TestingPage/ChartsColumn/ChartsColumn.tsx index 7a19edbb2..1aa6c6fb7 100644 --- a/ethernet-view/src/pages/TestingPage/ChartsColumn/ChartsColumn.tsx +++ b/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>; + measurementsByChart: Record; + setMeasurementsByChart: React.Dispatch>>; +} + +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: , - component: , - }, - ] + { + id: "charts", + name: "Charts", + icon: , + component: , + }, + ]; return ; }; \ No newline at end of file diff --git a/ethernet-view/src/pages/TestingPage/TestingPage.tsx b/ethernet-view/src/pages/TestingPage/TestingPage.tsx index 3af59baf3..45ddf6299 100644 --- a/ethernet-view/src/pages/TestingPage/TestingPage.tsx +++ b/ethernet-view/src/pages/TestingPage/TestingPage.tsx @@ -10,6 +10,8 @@ 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({ @@ -19,6 +21,9 @@ export const TestingPage = () => { messages: false, }); + const [charts, setCharts] = useState([]); + const [measurementsByChart, setMeasurementsByChart] = useState>({}); + const toggleCollapse = (key: keyof typeof collapsed) => { setCollapsed((prev) => ({ ...prev, [key]: !prev[key] })); }; @@ -27,7 +32,7 @@ export const TestingPage = () => { { key: "charts" as const, icon: chart, - component: , + component: , // props nuevos collapsed: collapsed.charts, }, { From 0f4e5e90fac9c82374c66bd3255d49fc026c0ffa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joan=20F=C3=ADsica?= Date: Wed, 25 Jun 2025 19:10:18 +0200 Subject: [PATCH 2/3] remove unnecessary variable --- .../src/components/ChartMenu/ChartElement/ChartElement.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ethernet-view/src/components/ChartMenu/ChartElement/ChartElement.tsx b/ethernet-view/src/components/ChartMenu/ChartElement/ChartElement.tsx index e49876f0a..cb2ef696d 100644 --- a/ethernet-view/src/components/ChartMenu/ChartElement/ChartElement.tsx +++ b/ethernet-view/src/components/ChartMenu/ChartElement/ChartElement.tsx @@ -15,7 +15,7 @@ interface Props { } // React component that keeps the chart render and measurements represented on it. -export const ChartElement = memo(({ chartId, initialMeasurementId, removeChart, measurementsInChart, setMeasurementsInChart }: Props) => { +export const ChartElement = memo(({ chartId, removeChart, measurementsInChart, setMeasurementsInChart }: Props) => { const getNumericMeasurementInfo = useMeasurementsStore(state => state.getNumericMeasurementInfo); const measurementInfos: NumericMeasurementInfo[] = measurementsInChart.map(getNumericMeasurementInfo); From 0f756c9c97de4608dca66c7b019a7c5276304b7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joan=20F=C3=ADsica?= Date: Wed, 25 Jun 2025 19:15:20 +0200 Subject: [PATCH 3/3] Change buttons to english --- .../src/pages/TestingPage/TestingPage.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/ethernet-view/src/pages/TestingPage/TestingPage.tsx b/ethernet-view/src/pages/TestingPage/TestingPage.tsx index 45ddf6299..25b01b8be 100644 --- a/ethernet-view/src/pages/TestingPage/TestingPage.tsx +++ b/ethernet-view/src/pages/TestingPage/TestingPage.tsx @@ -16,8 +16,8 @@ import { MeasurementId } from "common"; export const TestingPage = () => { const [collapsed, setCollapsed] = useState({ charts: false, - receive: false, - order: false, + packets: false, + orders: false, messages: false, }); @@ -36,16 +36,16 @@ export const TestingPage = () => { collapsed: collapsed.charts, }, { - key: "receive" as const, + key: "packets" as const, icon: incomingMessage, component: , - collapsed: collapsed.receive, + collapsed: collapsed.packets, }, { - key: "order" as const, + key: "orders" as const, icon: paperAirplane, component: , - collapsed: collapsed.order, + collapsed: collapsed.orders, }, { key: "messages" as const, @@ -67,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}`} ))}