Add "share this view" functionality (#438)

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <islamrealm@gmail.com>

Author: 3 people

.changeset/dry-bananas-burn.md

@@ -0,0 +1,5 @@
+---
+"trackio": minor
+---
+
+feat:Add "share this view" functionality

trackio/ui/main.py

@@ -242,6 +242,19 @@ def refresh_runs(
     )
 
 
+def generate_share_fields(
+    project: str,
+    metrics: str,
+    selection: RunSelection,
+    show_headers: bool = True,
+) -> tuple[str, str]:
+    share_url = utils.generate_share_url(project, metrics, selection.selected)
+    embed_code = utils.generate_embed_code(
+        project, metrics, selection.selected, not show_headers
+    )
+    return share_url, embed_code
+
+
 def generate_embed(
     project: str, metrics: str, selection: RunSelection, show_headers: bool = True
 ) -> str:
@@ -745,13 +758,22 @@ def configure(request: gr.Request):
         logo = fns.create_logo()
         project_dd = fns.create_project_dropdown()
 
-        embed_code = gr.Code(
-            label="Embed this view",
-            max_lines=2,
-            lines=2,
-            language="html",
-            visible=bool(os.environ.get("SPACE_HOST")),
-        )
+        with gr.Tabs(visible=bool(os.environ.get("SPACE_HOST"))):
+            with gr.Tab("Share"):
+                share_url = gr.Textbox(
+                    label="Share this view",
+                    max_lines=1,
+                    lines=1,
+                    interactive=False,
+                    buttons=["copy"],
+                )
+            with gr.Tab("Embed"):
+                embed_code = gr.Code(
+                    label="Embed this view",
+                    max_lines=2,
+                    lines=2,
+                    language="html",
+                )
         with gr.Group():
             run_tb = gr.Textbox(label="Runs", placeholder="Type to filter...")
             run_group_by_dd = gr.Dropdown(label="Group by...", choices=[], value=None)
@@ -849,9 +871,9 @@ def configure(request: gr.Request):
         queue=False,
         api_visibility="private",
     ).then(
-        fn=generate_embed,
+        fn=generate_share_fields,
         inputs=[project_dd, metric_filter_tb, run_selection_state, show_headers_cb],
-        outputs=[embed_code],
+        outputs=[share_url, embed_code],
         show_progress="hidden",
         api_visibility="private",
         queue=False,
@@ -882,9 +904,9 @@ def configure(request: gr.Request):
     )
     gr.on(
         [metric_filter_tb.change, run_cb.change],
-        fn=generate_embed,
+        fn=generate_share_fields,
         inputs=[project_dd, metric_filter_tb, run_selection_state, show_headers_cb],
-        outputs=embed_code,
+        outputs=[share_url, embed_code],
         show_progress="hidden",
         api_visibility="private",
         queue=False,
@@ -920,9 +942,9 @@ def toggle_group_view(group_by_dd):
         api_visibility="private",
         queue=False,
     ).then(
-        fn=generate_embed,
+        fn=generate_share_fields,
         inputs=[project_dd, metric_filter_tb, run_selection_state, show_headers_cb],
-        outputs=embed_code,
+        outputs=[share_url, embed_code],
         show_progress="hidden",
         api_visibility="private",
         queue=False,

trackio/utils.py

@@ -7,6 +7,7 @@
 from functools import lru_cache
 from pathlib import Path
 from typing import TYPE_CHECKING
+from urllib.parse import urlencode
 
 import huggingface_hub
 import numpy as np
@@ -736,37 +737,47 @@ def get_sync_status(scheduler: "CommitScheduler | DummyCommitScheduler") -> int
         return None
 
 
-def generate_embed_code(
+def generate_share_url(
     project: str,
     metrics: str,
     selected_runs: list = None,
     hide_headers: bool = False,
 ) -> str:
-    """Generate the embed iframe code based on current settings."""
+    """Generate the shareable Space URL based on current settings."""
     space_host = os.environ.get("SPACE_HOST", "")
     if not space_host:
         return ""
 
-    params = []
+    params: dict[str, str] = {}
 
     if project:
-        params.append(f"project={project}")
+        params["project"] = project
 
     if metrics and metrics.strip():
-        params.append(f"metrics={metrics}")
+        params["metrics"] = metrics
 
     if selected_runs:
-        runs_param = ",".join(selected_runs)
-        params.append(f"runs={runs_param}")
+        params["runs"] = ",".join(selected_runs)
 
     if hide_headers:
-        params.append("accordion=hidden")
+        params["accordion"] = "hidden"
+    params["sidebar"] = "hidden"
+    params["navbar"] = "hidden"
 
-    params.append("sidebar=hidden")
-    params.append("navbar=hidden")
+    query_string = urlencode(params)
+    return f"https://{space_host}?{query_string}"
 
-    query_string = "&".join(params)
-    embed_url = f"https://{space_host}?{query_string}"
+
+def generate_embed_code(
+    project: str,
+    metrics: str,
+    selected_runs: list = None,
+    hide_headers: bool = False,
+) -> str:
+    """Generate the embed iframe code based on current settings."""
+    embed_url = generate_share_url(project, metrics, selected_runs, hide_headers)
+    if not embed_url:
+        return ""
 
     return f'<iframe src="{embed_url}" style="width:1600px; height:500px; border:0;"></iframe>'