Redraw request lines when changed

locustio · Oct 24, 2024 · 9dc85ac · 9dc85ac
1 parent 262dfd5
commit 9dc85ac
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git 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
@@ -142,16 +142,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 })),
 });