changes

Author: abidlabs

tests/e2e-local/test_share_url_query_params.py

@@ -0,0 +1,77 @@
+from urllib.parse import urlencode, urlparse, urlunparse
+
+import trackio
+from playwright.sync_api import expect, sync_playwright
+
+
+def _url_with_query(base_url: str, params: dict[str, str]) -> str:
+    parsed = urlparse(base_url)
+    path = parsed.path if parsed.path else "/"
+    query = urlencode(params)
+    return urlunparse(
+        (parsed.scheme, parsed.netloc, path, "", query, "")
+    )
+
+
+def test_share_view_query_params_apply(temp_dir):
+    project = "test_share_qp"
+    for name in ("run-alpha", "run-beta"):
+        trackio.init(project=project, name=name)
+        for _ in range(3):
+            trackio.log(metrics={"loss": 0.1, "accuracy": 0.9})
+        trackio.finish()
+
+    app, _, _, full_url = trackio.show(
+        project=project, block_thread=False, open_browser=False
+    )
+
+    try:
+        with sync_playwright() as p:
+            browser = p.chromium.launch()
+            page = browser.new_page()
+            page.set_default_timeout(15000)
+
+            primary = _url_with_query(
+                full_url,
+                {
+                    "project": project,
+                    "runs": "run-alpha",
+                    "metric_filter": "^loss$",
+                    "sidebar": "hidden",
+                    "navbar": "hidden",
+                    "accordion": "hidden",
+                },
+            )
+            page.goto(primary)
+            page.wait_for_load_state("networkidle")
+
+            expect(page.locator(".navbar")).to_have_count(0)
+            expect(page.locator(".sidebar")).to_have_count(0)
+            expect(page.locator(".accordion")).to_have_count(0)
+
+            expect(page.locator(".metrics-page")).to_be_visible()
+            expect(page.locator(".vega-embed")).to_have_count(1)
+            expect(page.locator(".metrics-page .legend-dot")).to_have_count(1)
+
+            legacy = _url_with_query(
+                full_url,
+                {
+                    "project": project,
+                    "runs": "run-alpha",
+                    "metrics": "loss",
+                    "sidebar": "hidden",
+                    "navbar": "hidden",
+                    "accordion": "hidden",
+                },
+            )
+            page.goto(legacy)
+            page.wait_for_load_state("networkidle")
+
+            expect(page.locator(".navbar")).to_have_count(0)
+            expect(page.locator(".vega-embed")).to_have_count(1)
+            expect(page.locator(".metrics-page .legend-dot")).to_have_count(1)
+
+            browser.close()
+    finally:
+        trackio.delete_project(project, force=True)
+        app.close()

trackio/frontend/src/App.svelte

@@ -31,6 +31,23 @@
   import Settings from "./pages/Settings.svelte";
   import { initTheme, isDark, onThemeChange } from "./lib/theme.js";
 
+  function metricFilterFromLegacyMetricsParam(metricsParam) {
+    if (!metricsParam) return "";
+    const trimmed = metricsParam.trim();
+    const parts = trimmed.split(",").map((s) => s.trim()).filter(Boolean);
+    if (parts.length === 0) return "";
+    const isSimpleToken = (p) => /^[\w./-]+$/.test(p);
+    if (parts.every(isSimpleToken)) {
+      return parts
+        .map((p) => {
+          const esc = p.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+          return `^${esc}$`;
+        })
+        .join("|");
+    }
+    return trimmed;
+  }
+
   initTheme();
 
   let darkMode = $state(isDark());
@@ -52,6 +69,7 @@
   let metricColumns = $state([]);
   let sidebarOpen = $state(true);
   let sidebarHidden = $state(false);
+  let navbarHidden = $state(false);
   let urlTick = $state(0);
   let alerts = $state([]);
   let pollTimer = $state(null);
@@ -209,6 +227,11 @@
     refreshRuns();
   });
 
+  $effect(() => {
+    urlTick;
+    navbarHidden = getQueryParam("navbar") === "hidden";
+  });
+
   onMount(() => {
     const sidebarParam = getQueryParam("sidebar");
     if (sidebarParam === "hidden") {
@@ -227,17 +250,12 @@
       if (!Number.isNaN(s)) smoothing = s;
     }
 
-    const metricsParam = getQueryParam("metrics");
-    if (metricsParam) {
-      const parts = metricsParam.split(",").map((s) => s.trim()).filter(Boolean);
-      if (parts.length) {
-        metricFilter = parts
-          .map((p) => {
-            const esc = p.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-            return `^${esc}$`;
-          })
-          .join("|");
-      }
+    const metricFilterParam = getQueryParam("metric_filter");
+    const metricsLegacyParam = getQueryParam("metrics");
+    if (metricFilterParam) {
+      metricFilter = metricFilterParam;
+    } else if (metricsLegacyParam) {
+      metricFilter = metricFilterFromLegacyMetricsParam(metricsLegacyParam);
     }
 
     if (getQueryParam("accordion") === "hidden") {
@@ -283,6 +301,7 @@
         }
         await refreshProjects();
         await refreshRuns();
+
         await refreshAlerts();
       } catch (e) {
         console.error("Failed to load projects:", e);
@@ -314,6 +333,32 @@
     if (projectLocked) applyLockedProject();
   });
 
+  let urlRunsFromQueryApplied = $state(false);
+
+  $effect(() => {
+    if (urlRunsFromQueryApplied) return;
+    if (!appBootstrapReady) return;
+    if (!selectedProject) return;
+    const runsParam = getQueryParam("runs");
+    if (!runsParam) {
+      urlRunsFromQueryApplied = true;
+      return;
+    }
+    if (!runs.length) {
+      urlRunsFromQueryApplied = true;
+      return;
+    }
+    const names = runsParam.split(",").map((s) => s.trim()).filter(Boolean);
+    const nameToKey = new Map(runs.map((r) => [r.name, runKey(r)]));
+    const wanted = names
+      .map((n) => nameToKey.get(n))
+      .filter((k) => k != null);
+    if (wanted.length) {
+      selectedRuns = wanted;
+    }
+    urlRunsFromQueryApplied = true;
+  });
+
   let showSidebar = $derived(
     currentPage === "metrics" ||
       currentPage === "system" ||
@@ -362,7 +407,9 @@
   {/if}
 
   <div class="main">
-    <Navbar {currentPage} onNavigate={handleNavigate} />
+    {#if !navbarHidden}
+      <Navbar {currentPage} onNavigate={handleNavigate} />
+    {/if}
 
     <div class="page-content">
       {#if currentPage === "metrics"}

trackio/frontend/src/components/Sidebar.svelte

@@ -82,6 +82,8 @@
 
   let latestOnly = $state(false);
   let shareTab = $state("share");
+  let copyFeedback = $state(null);
+  let copyFeedbackTimer = null;
 
   function toggleLatestOnly() {
     latestOnly = !latestOnly;
@@ -143,7 +145,7 @@
     const params = new URLSearchParams();
     params.set("project", selectedProject);
     if (metricFilter?.trim()) {
-      params.set("metrics", metricFilter.trim());
+      params.set("metric_filter", metricFilter.trim());
     }
     const runNames = selectedRunNamesFromIds(selectedRuns, runs);
     if (runNames.length) {
@@ -164,7 +166,7 @@
     return `<iframe src="${shareUrl}" style="width:1600px; height:500px; border:0;"></iframe>`;
   });
 
-  async function copyText(value) {
+  async function copyText(value, feedbackKey) {
     if (!value) return;
     try {
       await navigator.clipboard.writeText(value);
@@ -179,6 +181,14 @@
       document.execCommand("copy");
       document.body.removeChild(textarea);
     }
+    copyFeedback = feedbackKey;
+    if (copyFeedbackTimer) {
+      clearTimeout(copyFeedbackTimer);
+    }
+    copyFeedbackTimer = setTimeout(() => {
+      copyFeedback = null;
+      copyFeedbackTimer = null;
+    }, 2000);
   }
 </script>
 
@@ -221,53 +231,55 @@
       </div>
 
       {#if variant === "full"}
-        <div class="section">
-          <div class="share-tabs">
-            <button
-              class="share-tab-btn"
-              class:active={shareTab === "share"}
-              onclick={() => { shareTab = "share"; }}
-            >
-              Share
-            </button>
-            <button
-              class="share-tab-btn"
-              class:active={shareTab === "embed"}
-              onclick={() => { shareTab = "embed"; }}
-            >
-              Embed
-            </button>
-          </div>
-          {#if shareTab === "share"}
-            <div class="share-field">
-              <span class="section-label">Share this view</span>
-              {#if shareUrl}
-                <div class="share-input-row">
-                  <input type="text" value={shareUrl} readonly />
-                  <button class="copy-btn" onclick={() => copyText(shareUrl)}>
-                    Copy
-                  </button>
-                </div>
-              {:else}
-                <p class="share-hint">Select a project to generate a share link.</p>
-              {/if}
-            </div>
-          {:else}
-            <div class="share-field">
-              <span class="section-label">Embed this view</span>
-              {#if embedCode}
-                <div class="share-input-row">
-                  <textarea readonly rows="2" value={embedCode}></textarea>
-                  <button class="copy-btn" onclick={() => copyText(embedCode)}>
-                    Copy
-                  </button>
-                </div>
-              {:else}
-                <p class="share-hint">Select a project to generate embed HTML.</p>
-              {/if}
+        {#if currentPage === "metrics"}
+          <div class="section">
+            <div class="share-tabs">
+              <button
+                class="share-tab-btn"
+                class:active={shareTab === "share"}
+                onclick={() => { shareTab = "share"; }}
+              >
+                Share
+              </button>
+              <button
+                class="share-tab-btn"
+                class:active={shareTab === "embed"}
+                onclick={() => { shareTab = "embed"; }}
+              >
+                Embed
+              </button>
             </div>
-          {/if}
-        </div>
+            {#if shareTab === "share"}
+              <div class="share-field">
+                <span class="section-label">Share this view</span>
+                {#if shareUrl}
+                  <div class="share-input-row">
+                    <input type="text" value={shareUrl} readonly />
+                    <button class="copy-btn" onclick={() => copyText(shareUrl, "share")}>
+                      {copyFeedback === "share" ? "Copied" : "Copy"}
+                    </button>
+                  </div>
+                {:else}
+                  <p class="share-hint">Select a project to generate a share link.</p>
+                {/if}
+              </div>
+            {:else}
+              <div class="share-field">
+                <span class="section-label">Embed this view</span>
+                {#if embedCode}
+                  <div class="share-input-row">
+                    <textarea readonly rows="2" value={embedCode}></textarea>
+                    <button class="copy-btn" onclick={() => copyText(embedCode, "embed")}>
+                      {copyFeedback === "embed" ? "Copied" : "Copy"}
+                    </button>
+                  </div>
+                {:else}
+                  <p class="share-hint">Select a project to generate embed HTML.</p>
+                {/if}
+              </div>
+            {/if}
+          </div>
+        {/if}
 
         <div class="section">
           <div class="runs-header">