fix(timeseries): fix category-axis snapping, persist dragged baseline, throttle drag updates

Address three review findings on the percent-change draggable baseline:
- snapToNearestX no longer coerces category-axis x values with Number(),
  which produced NaN and broke baseline positioning/snapping on
  non-temporal x-axes; it now validates the (already-snapped) category
  value against the known points instead.
- the dragged baseline position is now persisted in a ref so effect
  reruns (resizes, other option changes) don't silently snap it back to
  the first point.
- ondrag updates are coalesced to one setOption per animation frame
  instead of rebasing every series on every raw pointer-move event.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: rusackas

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx

@@ -81,6 +81,10 @@ export default function EchartsTimeseries({
   const rebaseEnabled = Boolean(
     (formData as { rebasePercentChange?: boolean }).rebasePercentChange,
   );
+  // Persists the dragged baseline across effect reruns (e.g. resizes or
+  // other option changes) so those don't silently snap it back to the
+  // first point.
+  const baselineXRef = useRef<number | string | null>(null);
   useEffect(() => {
     if (!rebaseEnabled) return undefined;
     const chart = echartRef.current?.getEchartInstance?.();
@@ -94,14 +98,27 @@ export default function EchartsTimeseries({
         ? (s.data.filter(Array.isArray) as SeriesDataPoint[])
         : [],
     );
-    const xs = Array.from(
-      new Set(baseSeries.flat().map(([x]) => Number(x))),
-    ).sort((a, b) => a - b);
+    // Preserve the axis' native x type: numeric for time/value axes,
+    // string for category axes (coercing categories with Number() would
+    // turn them into NaN and break snapping/positioning below).
+    const xs = Array.from(new Set(baseSeries.flat().map(([x]) => x)));
     if (xs.length === 0) return undefined;
-    let baselineX = xs[0];
+    if (typeof xs[0] === 'number') {
+      (xs as number[]).sort((a, b) => a - b);
+    }
+    let baselineX =
+      baselineXRef.current !== null && xs.includes(baselineXRef.current)
+        ? baselineXRef.current
+        : xs[0];
+    baselineXRef.current = baselineX;
+    // Coalesces drag updates to at most one setOption per animation
+    // frame; rebasing every series on every raw pointer-move event
+    // can stutter on large charts.
+    let dragFrame: ReturnType<typeof requestAnimationFrame> | null = null;
 
-    const applyBaseline = (newX: number) => {
+    const applyBaseline = (newX: number | string) => {
       baselineX = newX;
+      baselineXRef.current = newX;
       chart.setOption({
         series: baseSeries.map(data => ({
           data: rebaseSeriesData(data, newX),
@@ -133,11 +150,15 @@ export default function EchartsTimeseries({
               const dataX = chart.convertFromPixel(
                 { xAxisIndex: 0 },
                 this.x + 4,
-              ) as number;
-              const snapped = snapToNearestX(xs, dataX);
-              if (snapped !== undefined && snapped !== baselineX) {
-                applyBaseline(snapped);
-              }
+              ) as number | string;
+              if (dragFrame !== null) return;
+              dragFrame = requestAnimationFrame(() => {
+                dragFrame = null;
+                const snapped = snapToNearestX(xs, dataX);
+                if (snapped !== undefined && snapped !== baselineX) {
+                  applyBaseline(snapped);
+                }
+              });
             },
             ondragend: () => drawHandle(),
             children: [
@@ -159,6 +180,9 @@ export default function EchartsTimeseries({
     drawHandle();
 
     return () => {
+      if (dragFrame !== null) {
+        cancelAnimationFrame(dragFrame);
+      }
       chart.setOption({
         graphic: [{ id: 'percent-change-baseline', $action: 'remove' }],
       });

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/percentChange.ts

@@ -89,13 +89,25 @@ export function rebaseSeriesData(
   return data.map(([x, y]) => [x, y == null ? null : (1 + y) / divisor - 1]);
 }
 
-/** Snaps a dragged x position to the nearest available data x. */
+/**
+ * Snaps a dragged x position to the nearest available data x. Time/value
+ * axes report a continuous pixel-derived number, so the nearest point is
+ * found by numeric distance. Category axes report the exact category
+ * value already snapped by ECharts; there's no numeric scale to measure
+ * distance against, so it's only validated against the known x values
+ * (falling back to the first one if the pixel landed outside the axis).
+ */
 export function snapToNearestX(
-  xs: number[],
-  target: number,
-): number | undefined {
+  xs: (number | string)[],
+  target: number | string,
+): number | string | undefined {
   if (xs.length === 0) return undefined;
-  return xs.reduce((best, x) =>
+  if (typeof target === 'string') {
+    return xs.includes(target) ? target : xs[0];
+  }
+  const numericXs = xs.filter((x): x is number => typeof x === 'number');
+  if (numericXs.length === 0) return undefined;
+  return numericXs.reduce((best, x) =>
     Math.abs(x - target) < Math.abs(best - target) ? x : best,
   );
 }

superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/percentChange.test.ts

@@ -89,3 +89,10 @@ test('snaps to the nearest available x', () => {
   expect(snapToNearestX([10, 20, 30], 26)).toBe(30);
   expect(snapToNearestX([], 5)).toBeUndefined();
 });
+
+test('validates a category-axis x instead of coercing it to a number', () => {
+  // category axes report their exact (already-snapped) value on drag
+  expect(snapToNearestX(['a', 'b', 'c'], 'b')).toBe('b');
+  // a pixel that landed outside the axis falls back to the first category
+  expect(snapToNearestX(['a', 'b', 'c'], 'unknown')).toBe('a');
+});