From 96351625b480744dbbfeb9ec16c83e39c25aa905 Mon Sep 17 00:00:00 2001
From: Andrew Baldwin <andrew.baldwin44@gmail.com>
Date: Thu, 24 Oct 2024 10:24:46 +0200
Subject: [PATCH] Redraw request lines when changed

---
 .../src/components/LineChart/LineChart.tsx    | 20 +++++++++++++------
 .../components/LineChart/LineChart.utils.ts   |  7 +------
 .../LineChart/tests/LineChartUtils.test.tsx   | 18 +++--------------
 3 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/locust/webui/src/components/LineChart/LineChart.tsx b/locust/webui/src/components/LineChart/LineChart.tsx
index 4454cea644..66ce3a58a5 100644
--- a/locust/webui/src/components/LineChart/LineChart.tsx
+++ b/locust/webui/src/components/LineChart/LineChart.tsx
@@ -19,6 +19,10 @@ interface IBaseChartType extends ILineChartMarkers, ILineChartTimeAxis {
   [key: string]: any;
 }
 
+interface ILineChartProps<ChartType extends IBaseChartType> extends ILineChart<ChartType> {
+  shouldReplaceMergeLines?: boolean;
+}
+
 export default function LineChart<ChartType extends IBaseChartType>({
   charts,
   title,
@@ -28,7 +32,8 @@ export default function LineChart<ChartType extends IBaseChartType>({
   splitAxis,
   yAxisLabels,
   scatterplot,
-}: ILineChart<ChartType>) {
+  shouldReplaceMergeLines = false,
+}: ILineChartProps<ChartType>) {
   const [chart, setChart] = useState<ECharts | null>(null);
   const isDarkMode = useSelector(({ theme: { isDarkMode } }) => isDarkMode);
 
@@ -77,11 +82,11 @@ export default function LineChart<ChartType extends IBaseChartType>({
           ...echartsOptions,
           data: charts[key],
           ...(splitAxis ? { yAxisIndex: yAxisIndex || index } : {}),
-          ...(index === 0 ? { markLine: createMarkLine<ChartType>(charts, isDarkMode) } : {}),
+          ...(index === 0 ? { markLine: createMarkLine<ChartType>(charts) } : {}),
         })),
       });
     }
-  }, [charts, chart, lines, isDarkMode]);
+  }, [charts, chart, lines]);
 
   useEffect(() => {
     if (chart) {
@@ -110,9 +115,12 @@ export default function LineChart<ChartType extends IBaseChartType>({
 
   useEffect(() => {
     if (chart) {
-      chart.setOption({
-        series: getSeriesData<ChartType>({ charts, lines, scatterplot }),
-      });
+      chart.setOption(
+        {
+          series: getSeriesData<ChartType>({ charts, lines, scatterplot }),
+        },
+        shouldReplaceMergeLines ? { replaceMerge: ['series'] } : undefined,
+      );
     }
   }, [lines]);
 
diff --git a/locust/webui/src/components/LineChart/LineChart.utils.ts b/locust/webui/src/components/LineChart/LineChart.utils.ts
index 82a3b17225..9e624b4c9a 100644
--- a/locust/webui/src/components/LineChart/LineChart.utils.ts
+++ b/locust/webui/src/components/LineChart/LineChart.utils.ts
@@ -6,7 +6,6 @@ import {
   ScatterSeriesOption,
 } from 'echarts';
 
-import { CHART_THEME } from 'components/LineChart/LineChart.constants';
 import {
   ILineChart,
   ILineChartZoomEvent,
@@ -142,16 +141,12 @@ export const createOptions = <ChartType extends Pick<ICharts, 'time'>>({
   },
 });
 
-export const createMarkLine = <ChartType extends Pick<ICharts, 'markers'>>(
-  charts: ChartType,
-  isDarkMode: boolean,
-) => ({
+export const createMarkLine = <ChartType extends Pick<ICharts, 'markers'>>(charts: ChartType) => ({
   symbol: 'none',
   label: {
     formatter: (params: DefaultLabelFormatterCallbackParams) => `Run #${params.dataIndex + 1}`,
     padding: [0, 0, 8, 0],
   },
-  lineStyle: { color: isDarkMode ? CHART_THEME.DARK.axisColor : CHART_THEME.LIGHT.axisColor },
   data: (charts.markers || []).map((timeMarker: string) => ({ xAxis: timeMarker })),
 });
 
diff --git a/locust/webui/src/components/LineChart/tests/LineChartUtils.test.tsx b/locust/webui/src/components/LineChart/tests/LineChartUtils.test.tsx
index 8bc9b95f02..cc1a5b7cbe 100644
--- a/locust/webui/src/components/LineChart/tests/LineChartUtils.test.tsx
+++ b/locust/webui/src/components/LineChart/tests/LineChartUtils.test.tsx
@@ -1,7 +1,6 @@
 import { DefaultLabelFormatterCallbackParams, ECharts } from 'echarts';
 import { describe, expect, test, vi } from 'vitest';
 
-import { CHART_THEME } from 'components/LineChart/LineChart.constants';
 import { ILineChartTooltipFormatterParams } from 'components/LineChart/LineChart.types';
 import {
   getSeriesData,
@@ -188,11 +187,10 @@ describe('createMarkLine', () => {
       markers: [mockTimestamps[1]],
     };
 
-    const options = createMarkLine(markChartsWithMarkers, false);
+    const options = createMarkLine(markChartsWithMarkers);
 
     expect(options.symbol).toBe('none');
     expect(options.data).toEqual([{ xAxis: markChartsWithMarkers.markers[0] }]);
-    expect(options.lineStyle.color).toBe(CHART_THEME.LIGHT.axisColor);
   });
 
   test('should create multiple mark lines', () => {
@@ -201,7 +199,7 @@ describe('createMarkLine', () => {
       markers: [mockTimestamps[1], mockTimestamps[3]],
     };
 
-    const options = createMarkLine(markChartsWithMarkers, false);
+    const options = createMarkLine(markChartsWithMarkers);
 
     expect(options.data).toEqual([
       { xAxis: markChartsWithMarkers.markers[0] },
@@ -214,22 +212,12 @@ describe('createMarkLine', () => {
       ...mockCharts,
       markers: [mockTimestamps[1]],
     };
-    const options = createMarkLine(markChartsWithMarkers, false);
+    const options = createMarkLine(markChartsWithMarkers);
 
     expect(options.label.formatter({ dataIndex: 0 } as DefaultLabelFormatterCallbackParams)).toBe(
       'Run #1',
     );
   });
-
-  test('should use dark mode when isDarkMode', () => {
-    const markChartsWithMarkers = {
-      ...mockCharts,
-      markers: [mockTimestamps[1]],
-    };
-    const options = createMarkLine(markChartsWithMarkers, true);
-
-    expect(options.lineStyle.color).toBe(CHART_THEME.DARK.axisColor);
-  });
 });
 
 describe('onChartZoom', () => {