Preserve scoreboard chart zoom and legend across polling re-renders

Add applyPreservedState() in chartSetup that copies dataZoom windows and
legend selections from the live chart into the next option payload, and
wire it into PointsOverTimeChart and ChallengePlot. ChallengePlot resets
state when the selected challenge changes.

Author: Nils Bars

spa-frontend/src/components/scoreboard/ChallengePlot.vue

@@ -2,6 +2,7 @@
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import type { EChartsOption } from 'echarts';
 import {
+  applyPreservedState,
   buildCommonOptions,
   formatTooltipDate,
   getMarkLineColors,
@@ -31,6 +32,7 @@ type PlotPoint = {
 
 const root = ref<HTMLDivElement | null>(null);
 let chart: ManagedChart | null = null;
+let lastRenderedChallenge: string | null = null;
 
 function findBaseline(): number | null {
   for (const challenges of Object.values(props.assignments || {})) {
@@ -173,8 +175,17 @@ function buildOption(): EChartsOption {
 
 function render() {
   if (!root.value) return;
+  const firstMount = !chart;
   if (!chart) chart = mountChart(root.value);
-  chart.chart.setOption(buildOption(), { notMerge: true });
+  // Reset zoom/legend when the user switches to a different challenge — the
+  // x-axis and team set are effectively a new chart. Preserve state only
+  // across data polls for the same challenge.
+  const sameChallenge = !firstMount && lastRenderedChallenge === props.challengeName;
+  const option = sameChallenge
+    ? applyPreservedState(chart.chart, buildOption())
+    : buildOption();
+  chart.chart.setOption(option, { notMerge: true });
+  lastRenderedChallenge = props.challengeName;
 }
 
 let offTheme: (() => void) | null = null;

spa-frontend/src/components/scoreboard/PointsOverTimeChart.vue

@@ -2,6 +2,7 @@
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import type { EChartsOption } from 'echarts';
 import {
+  applyPreservedState,
   buildCommonOptions,
   formatTooltipDate,
   getMarkLineColors,
@@ -135,8 +136,10 @@ function buildOption(): EChartsOption {
 
 function render() {
   if (!root.value) return;
+  const firstMount = !chart;
   if (!chart) chart = mountChart(root.value);
-  chart.chart.setOption(buildOption(), { notMerge: true });
+  const option = firstMount ? buildOption() : applyPreservedState(chart.chart, buildOption());
+  chart.chart.setOption(option, { notMerge: true });
 }
 
 let offTheme: (() => void) | null = null;

spa-frontend/src/components/scoreboard/chartSetup.ts

@@ -163,6 +163,58 @@ export function unmountChart(instance: ManagedChart | null) {
   instance.chart.dispose();
 }
 
+type DataZoomEntry = {
+  id?: string;
+  start?: number;
+  end?: number;
+  startValue?: number | string;
+  endValue?: number | string;
+};
+
+type LegendEntry = {
+  selected?: Record<string, boolean>;
+};
+
+// Carry the user-interactive chart state (zoom window, legend toggles) from
+// the live chart into the next option payload. Without this, polling
+// re-renders with `notMerge: true` would wipe the user's view every few
+// seconds.
+export function applyPreservedState(
+  chart: EChartsInstance,
+  option: EChartsOption,
+): EChartsOption {
+  const current = chart.getOption() as {
+    dataZoom?: DataZoomEntry[];
+    legend?: LegendEntry[];
+  };
+
+  const nextDz = option.dataZoom;
+  const prevDz = current.dataZoom;
+  if (Array.isArray(nextDz) && Array.isArray(prevDz) && prevDz.length > 0) {
+    option.dataZoom = nextDz.map((entry) => {
+      const z = entry as DataZoomEntry;
+      const prior = prevDz.find((p) => p.id === z.id);
+      if (!prior) return entry;
+      return {
+        ...entry,
+        ...(prior.start !== undefined ? { start: prior.start } : {}),
+        ...(prior.end !== undefined ? { end: prior.end } : {}),
+        ...(prior.startValue !== undefined ? { startValue: prior.startValue } : {}),
+        ...(prior.endValue !== undefined ? { endValue: prior.endValue } : {}),
+      };
+    });
+  }
+
+  const prevLegend = current.legend?.[0]?.selected;
+  if (prevLegend && option.legend) {
+    const legendList = Array.isArray(option.legend) ? option.legend : [option.legend];
+    legendList[0] = { ...legendList[0], selected: { ...prevLegend } };
+    option.legend = Array.isArray(option.legend) ? legendList : legendList[0];
+  }
+
+  return option;
+}
+
 export function getTeamColor(team: string): string {
   let idx = teamIndices.get(team);
   if (idx === undefined) {