[fix] Persist chart legend filters

dashboard/assets/packages/report/src/components/Header/Header.tsx

@@ -17,7 +17,6 @@ interface HeaderProps {
 }
 
 export function Header({ digest }: HeaderProps) {
-  console.log(digest.start, typeof digest.start)
   return (
     <Flex as="header" align="center">
       <LogoIcon />

dashboard/assets/packages/ui/src/components/Chart/Chart.hooks.ts

@@ -0,0 +1,24 @@
+// SPDX-FileCopyrightText: 2023 Raintank, Inc. dba Grafana Labs
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { useState } from "react"
+import uPlot, { type Options, type Series } from "uplot"
+
+import { mergeRightProps } from "utils"
+
+import { createOptions, CreateOptionsProps } from "./Chart.utils"
+
+const mergeRightShowProp = mergeRightProps(["show"])
+
+const mergeSeries = (plotSeries: Series[] = [], stateSeries: Series[] = []) => {
+  return plotSeries.map((series, i) => mergeRightShowProp(series, stateSeries[i]))
+}
+
+export const useOptions = ({ plot, theme, width }: CreateOptionsProps): Options => {
+  const [series, setSeries] = useState<Series[]>(plot.series)
+  const newPlot = { ...plot, series: mergeSeries(plot.series, series) }
+  const hooks = { setSeries: [(self: uPlot) => setSeries(self.series)] }
+
+  return createOptions({ hooks, plot: newPlot, theme, width })
+}

dashboard/assets/packages/ui/src/components/Chart/Chart.tsx

@@ -18,7 +18,7 @@ import { Icon } from "components/Icon"
 import { Paper } from "components/Paper"
 import { Tooltip } from "components/Tooltip"
 
-import { createOptions } from "./Chart.utils"
+import { useOptions } from "./Chart.hooks"
 import * as styles from "./Chart.css"
 
 interface ChartProps {
@@ -34,7 +34,7 @@ export default function Chart({ panel, container }: ChartProps) {
   const plot = new SeriesPlot(digest, panel, createColorScheme(theme))
   const hasData = !plot.empty && plot.data[0].length > 1
   const plotData = (hasData ? plot.data : []) as AlignedData
-  const options = createOptions({ plot, theme, width })
+  const options = useOptions({ plot, theme, width })
 
   const Wrapper = container ? Fragment : Paper
 

dashboard/assets/packages/ui/src/components/Chart/Chart.utils.ts

@@ -2,9 +2,9 @@
 //
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import uPlot, { type Axis, type Options, type Series } from "uplot"
+import uPlot, { type Axis, type Hooks, type Options, type Series } from "uplot"
 import { type UnitType } from "@xk6-dashboard/model"
-import { format, tooltipPlugin, type SeriesPlot } from "@xk6-dashboard/view"
+import { format, tooltipPlugin, SeriesPlot } from "@xk6-dashboard/view"
 
 import { type Theme } from "store/theme"
 import { common, grey, midnight } from "theme/colors.css"
@@ -63,13 +63,14 @@ const createAxis = (colors: ReturnType<typeof createChartTheme>, length: number)
   }
 }
 
-interface CreateOptionsProps {
-  plot: SeriesPlot
+export interface CreateOptionsProps {
+  hooks: Hooks.Arrays
+  plot: Omit<SeriesPlot, "series"> & { series: Series[] }
   theme: Theme
   width: number
 }
 
-export const createOptions = ({ plot, theme, width }: CreateOptionsProps): Options => {
+export const createOptions = ({ hooks, plot, theme, width }: CreateOptionsProps): Options => {
   const colors = createChartTheme(theme)
   const units = plot.samples.units
   const axes = units.map(createAxis(colors, units.length))
@@ -78,6 +79,7 @@ export const createOptions = ({ plot, theme, width }: CreateOptionsProps): Optio
     class: styles.uplot,
     width: width,
     height: CHART_HEIGHT,
+    hooks,
     cursor: { sync: { key: sync.key } },
     legend: { live: false },
     series: plot.series as Series[],

dashboard/assets/packages/ui/src/utils/object.ts

@@ -8,3 +8,28 @@ export const omitUndefined = <T extends object>(styles: T) => {
     {}
   )
 }
+
+/**
+ * This method is used to pick the specified properties from the object
+ */
+export const pick = (props: string[], obj: object) =>
+  Object.entries(obj).reduce(
+    (acc, [key, value]) => {
+      if (props.includes(key)) {
+        acc[key] = value
+      }
+
+      return acc
+    },
+    {} as { [key: string]: unknown }
+  )
+
+/**
+ * This method is used to merge two objects together. It will overwrite the values of the first object with the values from the second object
+ */
+export const mergeRight = (a: object, b: object) => ({ ...a, ...b })
+
+/**
+ * This method is used to merge two objects together. It will overwrite the values of the first object with the specified properties from the second object
+ */
+export const mergeRightProps = (props: string[]) => (a: object, b: object) => mergeRight(a, pick(props, b))