Merge pull request #107 from HyperloopUPV-H8/ethernet-view/optimise-charts

[ethernet-view] Optimise charts

Author: jmaralo

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

@@ -1,25 +1,19 @@
-import { MeasurementId, UpdateFunction, useGlobalTicker } from "common";
-import { ChartId, useChartStore } from "components/ChartMenu/ChartStore";
+import { MeasurementId, NumericMeasurementInfo, UpdateFunction, useGlobalTicker } from "common";
 import { ColorType, IChartApi, ISeriesApi, UTCTimestamp, createChart } from "lightweight-charts";
 import { useEffect, useRef } from "react";
 
 type DataSerieAndUpdater = Map<MeasurementId, [ISeriesApi<"Line">, UpdateFunction]>;
 
 interface Props {
-    chartId: ChartId
-} 
+    measurementsInChart: NumericMeasurementInfo[];
+}
 
 const CHART_HEIGHT = 300;
 
-export const ChartCanvas = ({ chartId }: Props) => {
+export const ChartCanvas = ({ measurementsInChart }: Props) => {
 
-    const measurements = useChartStore((state) => {
-        const chart = state.charts.find((chart) => chart.chartId === chartId);
-        return chart ? chart.measurements : [];
-    })
-
-    const chartContainerRef = useRef<HTMLDivElement>(null);
     const chart = useRef<IChartApi | null>(null);
+    const chartContainerRef = useRef<HTMLDivElement>(null);
     const chartDataSeries = useRef<DataSerieAndUpdater>(new Map());
 
     useEffect(() => {
@@ -61,11 +55,11 @@ export const ChartCanvas = ({ chartId }: Props) => {
 
     useEffect(() => {
         chartDataSeries.current.clear();
-        measurements.forEach((measurement) => {
+        measurementsInChart.forEach((measurement) => {
             if(chart.current)
             chartDataSeries.current.set(measurement.id, [chart.current.addLineSeries({color: measurement.color}), measurement.getUpdate]);
         });
-    }, [measurements.length])
+    })
 
     useGlobalTicker(() => {
         const now = Date.now() / 1000 as UTCTimestamp;

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

@@ -1,26 +1,40 @@
 import styles from "./ChartElement.module.scss";
 import { AiOutlineCloseCircle } from 'react-icons/ai'
-import { useMeasurementsStore } from 'common';
+import { MeasurementId, NumericMeasurementInfo, useMeasurementsStore } from 'common';
 import { ChartCanvas } from './ChartCanvas/ChartCanvas';
 import { ChartLegend } from './ChartLegend/ChartLegend';
-import { ChartId, useChartStore } from "../ChartStore";
+import { memo, useCallback, useState } from "react";
+import { ChartId } from "../ChartMenu";
 
 type Props = {
     chartId: ChartId;
+    initialMeasurementId: MeasurementId;
+    removeChart: (chartId: ChartId) => void;
 };
 
 // React component that keeps the chart render and measurements represented on it.
-export const ChartElement = ({ chartId }: Props) => {
+export const ChartElement = memo(({ chartId, initialMeasurementId, removeChart }: Props) => {
 
-    const addMeasurementToChart = useChartStore(state => state.addMeasurementToChart);
-    const removeChart = useChartStore(state => state.removeChart);
     const getNumericMeasurementInfo = useMeasurementsStore(state => state.getNumericMeasurementInfo);
+    const initialMeasurement = getNumericMeasurementInfo(initialMeasurementId);
+    
+    const [measurementsInChart, setMeasurementsInChart] = useState([initialMeasurement]);
+
+    const addMeasurementToChart = (measurement: NumericMeasurementInfo) => {
+        if(!measurementsInChart.some(measurementInChart => measurementInChart.id === measurement.id)) {
+            setMeasurementsInChart([...measurementsInChart, measurement]);
+        }
+    }
+
+    const removeMeasurementFromChart = useCallback((measurementId: MeasurementId) => {
+        setMeasurementsInChart(prevMeasurements => prevMeasurements.filter(measurement => measurement.id !== measurementId));
+    }, []);
 
     const handleDrop = (ev: React.DragEvent<HTMLDivElement>) => {
         ev.stopPropagation();
         const id = ev.dataTransfer.getData("id");
         const measurementInfo = getNumericMeasurementInfo(id);
-        addMeasurementToChart(chartId, measurementInfo);
+        addMeasurementToChart(measurementInfo);
     };
 
     return (
@@ -36,13 +50,16 @@ export const ChartElement = ({ chartId }: Props) => {
                     cursor="pointer"
                     onClick={() => removeChart(chartId)}
                 />
-                <ChartCanvas 
-                    chartId={chartId}
+                <ChartCanvas
+                    measurementsInChart={measurementsInChart}
                 />
                 <ChartLegend
                     chartId={chartId}
+                    measurementsInChart={measurementsInChart}
+                    removeMeasurementFromChart={removeMeasurementFromChart}
+                    removeChart={removeChart}
                 />
             </div>
         </div>
     );
-};
+});

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

@@ -1,38 +1,34 @@
 import styles from "./ChartLegend.module.scss";
 import { useEffect, useRef } from "react";
 import { MeasurementId, NumericMeasurementInfo } from "common";
-import { ChartId, useChartStore } from "components/ChartMenu/ChartStore";
+import { ChartId } from "components/ChartMenu/ChartMenu";
 
 
 interface Props {
     chartId: ChartId;
+    measurementsInChart: NumericMeasurementInfo[];
+    removeMeasurementFromChart: (measurementId: MeasurementId) => void;
+    removeChart: (chartId: ChartId) => void;
 }
 
-export const ChartLegend = ({ chartId }: Props) => {
+export const ChartLegend = ({ chartId, measurementsInChart, removeMeasurementFromChart, removeChart }: Props) => {
 
     const legendRef = useRef<HTMLDivElement>(null);
-
-    const measurements = useChartStore((state) => {
-        const chart = state.charts.find((chart) => chart.chartId === chartId);
-        return chart ? chart.measurements : [];
-    });
-    const removeMeasurementFromChart = useChartStore((state) => state.removeMeasurementFromChart);
-    const removeChart = useChartStore((state) => state.removeChart);
 
     const onRemoveMeasurement = (measurementId: MeasurementId) => {
-        removeMeasurementFromChart(chartId, measurementId);
+        removeMeasurementFromChart(measurementId);
     };
 
     useEffect(() => {
-        if(measurements.length == 0) removeChart(chartId);
-    }, [measurements.length])
+        if(measurementsInChart.length == 0) removeChart(chartId);
+    }, [measurementsInChart.length])
 
     useEffect(() => {
         if (legendRef.current) {
             while (legendRef.current.firstChild) {
                 legendRef.current.removeChild(legendRef.current.firstChild);
             }
-            measurements.forEach((measurement) => {
+            measurementsInChart.forEach((measurement) => {
                 const newChartLegendItem = createChartLegendItem(measurement);
                 newChartLegendItem.onclick = (_) => onRemoveMeasurement(measurement.id);
                 legendRef.current?.appendChild(newChartLegendItem);

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

@@ -1,27 +1,41 @@
 import styles from "components/ChartMenu/ChartMenu.module.scss";
-import { DragEvent } from "react";
+import { DragEvent, memo, useCallback, useState } from "react";
 import Sidebar from "components/ChartMenu/Sidebar/Sidebar";
 import { Section } from "./Sidebar/Section/Section";
-import { useMeasurementsStore } from "common";
+import { MeasurementId, useMeasurementsStore } from "common";
 import { nanoid } from "nanoid";
 import { ChartElement } from "./ChartElement/ChartElement";
-import { useChartStore } from "./ChartStore";
+
+export type ChartId = string;
+
+type ChartInfo = {
+    chartId: ChartId;
+    initialMeasurementId: MeasurementId;
+};
 
 type Props = {
     sidebarSections: Section[];
 };
 
-export const ChartMenu = ({ sidebarSections }: Props) => {
+export const ChartMenu = memo(({ sidebarSections }: Props) => {
 
-    const charts = useChartStore((state) => state.charts);
-    const addChart = useChartStore((state) => state.addChart);
     const getNumericMeasurementInfo = useMeasurementsStore((state) => state.getNumericMeasurementInfo);
 
+    const [charts, setCharts] = useState<ChartInfo[]>([]);
+
+    const addChart = ((chartId: ChartId, initialMeasurementId: MeasurementId) => {
+        setCharts([...charts, { chartId, initialMeasurementId }]);
+    });
+
+    const removeChart = useCallback((chartId: ChartId) => {
+        setCharts(prevCharts => prevCharts.filter(chart => chart.chartId !== chartId));
+    }, []);
+    
     const handleDrop = (ev: DragEvent<HTMLDivElement>) => {
         ev.preventDefault();
         const id = ev.dataTransfer.getData("id");
-        const initialMeasurementInfo = getNumericMeasurementInfo(id);
-        addChart(nanoid(), initialMeasurementInfo);
+        const initialMeasurementId = getNumericMeasurementInfo(id).id;
+        addChart(nanoid(), initialMeasurementId);
     };
 
     if (sidebarSections.length == 0) {
@@ -46,10 +60,12 @@ export const ChartMenu = ({ sidebarSections }: Props) => {
                         <ChartElement
                             key={chart.chartId}
                             chartId={chart.chartId}
+                            initialMeasurementId={chart.initialMeasurementId}
+                            removeChart={removeChart}
                         />
                     ))}
                 </div>
             </div>
         );
     }
-};
+});