Improve rendering of curves (#464)

abidlabs · gradio-pr-bot · claude · web-flow · commit c89ebb3b50f6 · 2026-03-30T11:15:40.000-07:00
Co-authored-by: gradio-pr-bot &lt;gradio-pr-bot@users.noreply.github.com&gt;
Co-authored-by: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/.changeset/crazy-bikes-switch.md b/.changeset/crazy-bikes-switch.md
@@ -0,0 +1,5 @@
+---
+"trackio": patch
+---
+
+feat:Improve rendering of curves
diff --git a/tests/ui/test_ui_display.py b/tests/ui/test_ui_display.py
@@ -180,8 +180,8 @@ def test_multiple_runs_display_multiple_plots(temp_dir):
             plots = page.locator(".vega-embed")
             expect(plots).to_have_count(3)
 
-            line_marks = page.locator(".vega-embed .mark-line.role-mark")
-            expect(line_marks.first).to_be_visible()
+            canvases = page.locator(".vega-embed canvas")
+            expect(canvases.first).to_be_visible()
 
             bar_plots = page.locator(".bar-plot")
             expect(bar_plots).to_have_count(1)
diff --git a/trackio/frontend/src/components/BarPlot.svelte b/trackio/frontend/src/components/BarPlot.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount, tick } from "svelte";
   import embed from "vega-embed";
+  import { buildColorSpecKey } from "../lib/dataProcessing.js";
 
   let {
     data = [],
@@ -34,6 +35,8 @@
     return entries;
   });
 
+  let colorSpecKey = $derived(buildColorSpecKey(data, colorField, colorMap));
+
   function getBarData() {
     const runValues = new Map();
     for (const d of data) {
@@ -134,7 +137,7 @@
       }
       const result = await embed(container, spec, {
         actions: false,
-        renderer: "svg",
+        renderer: "canvas",
       });
       view = result.view;
       requestAnimationFrame(() => {
@@ -172,7 +175,7 @@
   async function downloadImage() {
     if (!view) return;
     try {
-      const url = await view.toImageURL("png", 2);
+      const url = await view.toImageURL("png", 4);
       const a = document.createElement("a");
       a.href = url;
       a.download = `${(y || "chart").replace(/\//g, "_")}.png`;
@@ -261,7 +264,7 @@
   $effect(() => {
     data;
     y;
-    colorMap;
+    colorSpecKey;
     title;
     fullscreen;
     container;
diff --git a/trackio/frontend/src/components/LinePlot.svelte b/trackio/frontend/src/components/LinePlot.svelte
@@ -1,6 +1,8 @@
 <script>
   import { onMount, tick } from "svelte";
   import embed from "vega-embed";
+  import * as vega from "vega";
+  import { buildColorSpecKey } from "../lib/dataProcessing.js";
 
   let {
     data = [],
@@ -10,6 +12,7 @@
     colorMap = {},
     title = "",
     xLim = null,
+    yExtent = undefined,
     onSelect = null,
     onResetZoom = null,
     draggable = false,
@@ -24,6 +27,9 @@
   let view = $state(null);
   let fullscreen = $state(false);
 
+  let lastStructuralKey = null;
+  let lastHasSmoothed = false;
+
   let legendEntries = $derived.by(() => {
     if (!colorField || !data || data.length === 0) return [];
     const seen = new Set();
@@ -38,6 +44,8 @@
     return entries;
   });
 
+  let colorSpecKey = $derived(buildColorSpecKey(data, colorField, colorMap));
+
   function cssVar(name, fallback) {
     return (
       getComputedStyle(document.documentElement)
@@ -46,6 +54,21 @@
     );
   }
 
+  function splitData() {
+    const originalData = data.filter(
+      (d) => d.data_type === "original" || !d.data_type,
+    );
+    const smoothedData = data.filter((d) => d.data_type === "smoothed");
+    return { originalData, smoothedData, hasSmoothed: smoothedData.length > 0 };
+  }
+
+  function computeXDomain(originalData) {
+    const xVals = originalData.map((d) => d[x]).filter((v) => v != null);
+    if (xLim) return [xLim[0], xLim[1]];
+    if (xVals.length > 0) return [Math.min(...xVals), Math.max(...xVals)];
+    return undefined;
+  }
+
   function buildSpec() {
     const hasColor =
       colorField && data.length > 0 && Object.hasOwn(data[0], colorField);
@@ -58,18 +81,20 @@
       (r) => colorMap[r] || "#999",
     );
 
-    const originalData = data.filter(
-      (d) => d.data_type === "original" || !d.data_type,
-    );
-    const smoothedData = data.filter((d) => d.data_type === "smoothed");
-    const hasSmoothed = smoothedData.length > 0;
+    const { originalData, smoothedData, hasSmoothed } = splitData();
+    lastHasSmoothed = hasSmoothed;
+    const xDomain = computeXDomain(originalData);
 
     const xEnc = {
       field: x,
       type: "quantitative",
-      scale: { zero: false, ...(xLim ? { domain: [xLim[0], xLim[1]] } : {}) },
+      scale: { zero: false, ...(xDomain ? { domain: xDomain } : {}) },
+    };
+    const yEnc = {
+      field: y,
+      type: "quantitative",
+      ...(yExtent ? { scale: { domain: yExtent } } : {}),
     };
-    const yEnc = { field: y, type: "quantitative" };
     const colorEnc = hasColor
       ? {
           color: {
@@ -83,23 +108,30 @@
 
     const layers = [];
 
+    const lineMark = (extra = {}) => ({
+      type: "line",
+      clip: true,
+      strokeWidth: 2,
+      ...extra,
+    });
+
     if (hasSmoothed) {
       layers.push({
-        data: { values: originalData },
-        mark: { type: "line", clip: true, strokeWidth: 1, opacity: 0.3, point: { size: 20, opacity: 0.3 } },
+        data: { name: "data_original", values: originalData },
+        mark: lineMark({ strokeWidth: 1, opacity: 0.3 }),
         encoding: { x: xEnc, y: yEnc, ...colorEnc },
         name: "original",
       });
       layers.push({
-        data: { values: smoothedData },
-        mark: { type: "line", clip: true, strokeWidth: 2, point: { size: 20 } },
+        data: { name: "data_smoothed", values: smoothedData },
+        mark: lineMark(),
         encoding: { x: xEnc, y: yEnc, ...colorEnc },
         name: "plot",
       });
     } else {
       layers.push({
-        data: { values: data },
-        mark: { type: "line", clip: true, strokeWidth: 2, point: { size: 20 } },
+        data: { name: "data_plot", values: data },
+        mark: lineMark(),
         encoding: { x: xEnc, y: yEnc, ...colorEnc },
         name: "plot",
       });
@@ -153,7 +185,43 @@
     };
   }
 
-  async function render() {
+  function getStructuralKey() {
+    const { originalData } = splitData();
+    const xDomain = computeXDomain(originalData);
+    const xKey = xDomain ? `${xDomain[0]},${xDomain[1]}` : "auto";
+    const yKey = yExtent ? `${yExtent[0]},${yExtent[1]}` : "auto";
+    return `${y}\0${x}\0${colorSpecKey}\0${title}\0${fullscreen}\0${!!onSelect}\0${xKey}\0${yKey}`;
+  }
+
+  function replaceDataset(v, name, newData) {
+    const cs = vega.changeset().remove(vega.truthy).insert(newData);
+    v.change(name, cs);
+  }
+
+  function tryIncrementalUpdate() {
+    if (!view) return false;
+
+    const { originalData, smoothedData, hasSmoothed } = splitData();
+
+    if (hasSmoothed !== lastHasSmoothed) return false;
+
+    try {
+      if (hasSmoothed) {
+        replaceDataset(view, "data_original", originalData);
+        replaceDataset(view, "data_smoothed", smoothedData);
+      } else {
+        replaceDataset(view, "data_plot", data);
+      }
+
+      view.run();
+      lastHasSmoothed = hasSmoothed;
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  async function fullRender() {
     await tick();
     if (!container || !data || data.length === 0 || !y) return;
 
@@ -166,9 +234,10 @@
       }
       const result = await embed(container, spec, {
         actions: false,
-        renderer: "svg",
+        renderer: "canvas",
       });
       view = result.view;
+      lastStructuralKey = getStructuralKey();
       requestAnimationFrame(() => {
         result.view.resize();
       });
@@ -193,6 +262,17 @@
     }
   }
 
+  async function render() {
+    if (!container || !data || data.length === 0 || !y) return;
+
+    const structuralKey = getStructuralKey();
+    if (view && structuralKey === lastStructuralKey) {
+      if (tryIncrementalUpdate()) return;
+    }
+
+    await fullRender();
+  }
+
   function downloadCSV() {
     if (!data || data.length === 0) return;
     const originals = data.filter((d) => d.data_type === "original" || !d.data_type);
@@ -224,7 +304,7 @@
   async function downloadImage() {
     if (!view) return;
     try {
-      const url = await view.toImageURL("png", 2);
+      const url = await view.toImageURL("png", 4);
       const a = document.createElement("a");
       a.href = url;
       a.download = `${(y || "chart").replace(/\//g, "_")}.png`;
@@ -314,8 +394,9 @@
     data;
     y;
     x;
-    colorMap;
+    colorSpecKey;
     xLim;
+    yExtent;
     title;
     fullscreen;
     container;
diff --git a/trackio/frontend/src/lib/dataProcessing.js b/trackio/frontend/src/lib/dataProcessing.js
@@ -116,9 +116,40 @@ export function getMetricColumns(rows) {
   return getNumericColumns(rows).filter((c) => !RESERVED_KEYS.includes(c));
 }
 
-export function downsample(data, x, y, colorField, xLim) {
-  if (!data || data.length === 0) return { data, xLim };
+export function computeMetricPlotData(masterData, xColumn, metric, xLim) {
+  let relevant = masterData.filter(
+    (r) => r[metric] != null && r[metric] !== undefined,
+  );
+  if (xLim) {
+    const sorted = relevant.sort((a, b) => a[xColumn] - b[xColumn]);
+    let lo = 0;
+    let hi = sorted.length - 1;
+    while (lo < sorted.length && sorted[lo][xColumn] < xLim[0]) lo++;
+    while (hi >= 0 && sorted[hi][xColumn] > xLim[1]) hi--;
+    lo = Math.max(0, lo - 1);
+    hi = Math.min(sorted.length - 1, hi + 1);
+    relevant = sorted.slice(lo, hi + 1);
+  }
+  const originals = relevant.filter(
+    (r) => r.data_type === "original" || !r.data_type,
+  );
+  let yExtent = undefined;
+  if (originals.length > 0) {
+    let yMin = Infinity;
+    let yMax = -Infinity;
+    for (const r of originals) {
+      const v = r[metric];
+      if (v != null) {
+        if (v < yMin) yMin = v;
+        if (v > yMax) yMax = v;
+      }
+    }
+    if (yMin !== Infinity) yExtent = [yMin, yMax];
+  }
+  return { data: downsample(relevant, xColumn, metric, "run", xLim).data, yExtent };
+}
 
+function downsampleImpl(data, x, y, colorField, xLim) {
   const columns = [x, y];
   if (colorField && Object.hasOwn(data[0], colorField)) {
     columns.push(colorField);
@@ -202,6 +233,36 @@ export function downsample(data, x, y, colorField, xLim) {
   return { data: result, xLim: updatedXLim };
 }
 
+export function downsample(data, x, y, colorField, xLim) {
+  if (!data || data.length === 0) return { data, xLim };
+
+  const splitByDataType =
+    data.some((r) => r.data_type) &&
+    colorField &&
+    data[0] &&
+    Object.hasOwn(data[0], colorField);
+
+  if (splitByDataType) {
+    const chunks = new Map();
+    for (const r of data) {
+      const key = `${r[colorField] ?? "__default"}\0${r.data_type ?? "original"}`;
+      if (!chunks.has(key)) chunks.set(key, []);
+      chunks.get(key).push(r);
+    }
+    const merged = [];
+    let mergedXLim = xLim;
+    for (const chunk of chunks.values()) {
+      const out = downsampleImpl(chunk, x, y, colorField, xLim);
+      merged.push(...out.data);
+      mergedXLim = out.xLim;
+    }
+    merged.sort((a, b) => (a[x] || 0) - (b[x] || 0));
+    return { data: merged, xLim: mergedXLim };
+  }
+
+  return downsampleImpl(data, x, y, colorField, xLim);
+}
+
 export function groupMetricsByPrefix(metrics, plotOrder = []) {
   const noPrefix = [];
   const withPrefix = {};
@@ -300,6 +361,21 @@ export function groupMetricsByPrefix(metrics, plotOrder = []) {
   return groups;
 }
 
+export function buildColorSpecKey(data, colorField, colorMap) {
+  if (!colorField || !data || data.length === 0) return "";
+  const seen = new Set();
+  const parts = [];
+  for (const d of data) {
+    const name = d[colorField];
+    if (name && !seen.has(name)) {
+      seen.add(name);
+      parts.push(`${name}:${colorMap[name] ?? "#999"}`);
+    }
+  }
+  parts.sort();
+  return parts.join("|");
+}
+
 export function filterMetricsByRegex(metrics, pattern) {
   if (!pattern || !pattern.trim()) return metrics;
   try {
diff --git a/trackio/frontend/src/pages/Metrics.svelte b/trackio/frontend/src/pages/Metrics.svelte
diff --git a/trackio/frontend/src/pages/SystemMetrics.svelte b/trackio/frontend/src/pages/SystemMetrics.svelte

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"trackio": patch
 +---
++
 +feat:Improve rendering of curves