Fix dashboard UX issues: smoothing in share URL, run selection, and run filtering (#527)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 4 people

.changeset/better-towns-dance.md

@@ -0,0 +1,5 @@
+---
+"trackio": patch
+---
+
+feat:Fix dashboard UX issues: smoothing in share URL, run selection, and run filtering

examples/fake-training.py

@@ -45,7 +45,7 @@ def generate_grad_norm_curve(epoch, max_epochs):
         return max(0.1, base_value + noise)
 
 
-for run in range(3):
+for run in range(5):
     wandb.init(
         project=f"fake-training-{PROJECT_ID}",
         name=f"test-run-{run}",

tests/e2e-local/test_bulk_logging.py

@@ -1,3 +1,4 @@
+import sys
 import time
 
 import trackio
@@ -27,7 +28,8 @@ def test_rapid_bulk_logging(temp_dir):
         trackio.log({"metric": i, "value": i * 3}, step=i)
     time_to_run_1000_logs = time.time() - start_time
 
-    assert time_to_run_1000_logs < 0.2, (
+    max_seconds = 0.5 if sys.platform.startswith("win") else 0.2
+    assert time_to_run_1000_logs < max_seconds, (
         f"1000 calls of trackio.log() took {time_to_run_1000_logs} seconds, which is too long"
     )
     trackio.finish()

trackio/frontend/package-lock.json

@@ -147,8 +147,13 @@
 
       if (JSON.stringify(runs) !== JSON.stringify(newRuns)) {
         const prevSelected = selectedRuns;
+        const prevOrdered = runs.map(runKey);
         runs = newRuns;
-        selectedRuns = reconcileSelectedRuns(prevSelected, newRuns.map(runKey));
+        selectedRuns = reconcileSelectedRuns(
+          prevSelected,
+          newRuns.map(runKey),
+          prevOrdered,
+        );
       }
     } catch (e) {
       console.error("Failed to load runs:", e);
@@ -458,6 +463,7 @@
         <Runs
           project={selectedProject}
           {runs}
+          {filterText}
           onRunsChanged={refreshRunsAndMutation}
           runMutationAllowed={mutationStatus.allowed}
         />

trackio/frontend/src/App.svelte

@@ -7,6 +7,7 @@
   import GradioTextbox from "./GradioTextbox.svelte";
   import { buildColorMap, getColorForIndex } from "../lib/stores.js";
   import { latestOnlySelection } from "../lib/selection.js";
+  import { filterMetricsByRegex } from "../lib/dataProcessing.js";
 
   let {
     open = $bindable(true),
@@ -78,11 +79,11 @@
     };
   }
 
-  let filteredRuns = $derived(
-    filterText
-      ? runs.filter((r) => r.name.toLowerCase().includes(filterText.toLowerCase()))
-      : runs,
-  );
+  let filteredRuns = $derived.by(() => {
+    if (!filterText || !filterText.trim()) return runs;
+    const matches = new Set(filterMetricsByRegex(runs.map((r) => r.name), filterText));
+    return runs.filter((r) => matches.has(r.name));
+  });
 
   let runColorMap = $derived(buildColorMap(runs));
   let filteredRunIds = $derived(filteredRuns.map((r) => r.id ?? r.name));
@@ -158,6 +159,9 @@
     if (runIds.length) {
       params.set("run_ids", runIds.join(","));
     }
+    if (smoothing != null && smoothing !== 10) {
+      params.set("smoothing", smoothing.toString());
+    }
     if (!showHeaders) {
       params.set("accordion", "hidden");
     }
@@ -237,6 +241,17 @@
         {/if}
       </div>
 
+      {#if variant === "compact" && currentPage === "runs"}
+        <div class="section">
+          <GradioTextbox
+            label="Run Filter"
+            info="Filter runs using regex patterns. Leave empty to show all runs."
+            placeholder="e.g., baseline|exp-.*|v2"
+            bind:value={filterText}
+          />
+        </div>
+      {/if}
+
       {#if variant === "full"}
         {#if currentPage === "metrics" && spacesMode}
           <div class="section">

trackio/frontend/src/components/Sidebar.svelte

@@ -3,17 +3,24 @@ export function latestOnlySelection(filteredRunIds) {
   return [filteredRunIds[0]];
 }
 
-export function reconcileSelectedRuns(prevSelected, newOrderedIds) {
+export function reconcileSelectedRuns(prevSelected, newOrderedIds, prevOrderedIds) {
   const prev = prevSelected ?? [];
   const ordered = newOrderedIds ?? [];
+  const prevOrdered = prevOrderedIds ?? [];
   const newIdSet = new Set(ordered);
   const kept = prev.filter((r) => newIdSet.has(r));
 
-  if (kept.length === 0 && prev.length === 0) {
+  if (prev.length === 0 || kept.length === 0) {
     return [...ordered];
   }
 
-  const prevSet = new Set(prev);
-  const additions = ordered.filter((r) => !prevSet.has(r));
-  return [...kept, ...additions];
+  const allPrevSelected =
+    prevOrdered.length > 0 && prev.length === prevOrdered.length;
+  if (allPrevSelected) {
+    const keptSet = new Set(kept);
+    const additions = ordered.filter((r) => !keptSet.has(r));
+    return [...kept, ...additions];
+  }
+
+  return kept;
 }

trackio/frontend/src/lib/selection.js

@@ -22,18 +22,37 @@ describe("reconcileSelectedRuns", () => {
     expect(reconcileSelectedRuns([], ["a", "b", "c"])).toEqual(["a", "b", "c"]);
   });
 
-  test("keeps the previously selected run and appends new runs as selected", () => {
-    expect(reconcileSelectedRuns(["a"], ["a", "b", "c"])).toEqual(["a", "b", "c"]);
+  test("keeps a partial selection without auto-selecting new runs", () => {
+    expect(reconcileSelectedRuns(["a"], ["a", "b", "c"], ["a", "b"])).toEqual(["a"]);
   });
 
-  test("preserves the chosen run when the run list is unchanged on refresh", () => {
+  test("auto-selects new runs when all previous runs were selected", () => {
+    expect(
+      reconcileSelectedRuns(["a", "b"], ["a", "b", "c"], ["a", "b"]),
+    ).toEqual(["a", "b", "c"]);
+  });
+
+  test("preserves the chosen runs when the run list is unchanged on refresh", () => {
     const prev = ["b"];
     const next = ["a", "b", "c"];
-    expect(reconcileSelectedRuns(prev, next)).toEqual(["b", "a", "c"]);
-    expect(reconcileSelectedRuns(["b", "a", "c"], next)).toEqual(["b", "a", "c"]);
+    expect(reconcileSelectedRuns(prev, next, next)).toEqual(["b"]);
+    expect(reconcileSelectedRuns(["b", "a", "c"], next, next)).toEqual([
+      "b",
+      "a",
+      "c",
+    ]);
   });
 
   test("drops runs that no longer exist on the server", () => {
-    expect(reconcileSelectedRuns(["a", "b", "c"], ["a", "c"])).toEqual(["a", "c"]);
+    expect(
+      reconcileSelectedRuns(["a", "b", "c"], ["a", "c"], ["a", "b", "c"]),
+    ).toEqual(["a", "c"]);
+  });
+
+  test("falls back to all runs when none of the previously selected runs exist anymore", () => {
+    expect(reconcileSelectedRuns(["a"], ["b"], ["a"])).toEqual(["b"]);
+    expect(
+      reconcileSelectedRuns(["x", "y"], ["a", "b", "c"], ["x", "y"]),
+    ).toEqual(["a", "b", "c"]);
   });
 });

trackio/frontend/src/lib/selection.test.js

@@ -4,10 +4,12 @@
   import { getProjectSummary, getRunSummary, deleteRun, renameRun } from "../lib/api.js";
   import { navigateTo, setQueryParam } from "../lib/router.js";
   import { buildColorMap } from "../lib/stores.js";
+  import { filterMetricsByRegex } from "../lib/dataProcessing.js";
 
   let {
     project = null,
     runs = [],
+    filterText = "",
     onRunsChanged = null,
     runMutationAllowed = true,
   } = $props();
@@ -22,6 +24,12 @@
   let renameValue = $state("");
   let renameInput = $state(null);
 
+  let filteredRuns = $derived.by(() => {
+    if (!filterText || !filterText.trim()) return runsData;
+    const matches = new Set(filterMetricsByRegex(runsData.map((r) => r.name), filterText));
+    return runsData.filter((r) => matches.has(r.name));
+  });
+
   async function loadRuns() {
     if (!project) {
       runsData = [];
@@ -110,6 +118,11 @@
       <p>Refresh this page or wait for the dashboard to poll; new runs appear in the table with step counts.</p>
     </div>
   {:else}
+    {#if filterText}
+      <div class="filter-count-row">
+        <span class="filter-count">{filteredRuns.length} of {runsData.length} runs</span>
+      </div>
+    {/if}
     <table class="runs-table">
       <thead>
         <tr>
@@ -120,7 +133,7 @@
         </tr>
       </thead>
       <tbody>
-        {#each runsData as run, i}
+        {#each filteredRuns as run, i}
           <tr>
             <td class="actions-cell">
               <div class="actions-wrap">
@@ -219,6 +232,13 @@
     background: none;
     padding: 0;
   }
+  .filter-count-row {
+    margin-bottom: 12px;
+  }
+  .filter-count {
+    font-size: var(--text-sm, 12px);
+    color: var(--body-text-color-subdued, #6b7280);
+  }
   .runs-table {
     width: 100%;
     border-collapse: collapse;