feat: allow hiding section header accordions (#435)

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

Author: 3 people

.changeset/clear-clocks-pull.md

@@ -0,0 +1,5 @@
+---
+"trackio": minor
+---
+
+feat:feat: allow hiding section header accordions

README.md

@@ -200,6 +200,7 @@ Supported query parameters:
 - `xmin`: (number) Set the initial minimum value for the x-axis limits across all metric plots.
 - `xmax`: (number) Set the initial maximum value for the x-axis limits across all metric plots.
 - `smoothing`: (number) Set the initial value of the smoothing slider (0-20, where 0 = no smoothing).
+- `accordion`: (string: "hidden"). When set to "hidden", hides the section header accordions around metric groups. By default, section headers are visible.
 
 ## Alerts
 

docs/source/deploy_embed.md

@@ -42,6 +42,7 @@ You can also filter the dashboard to display only specific projects or metrics u
 * `xmin` (number): Set the initial minimum value for the x-axis limits across all metrics plots.
 * `xmax` (number): Set the initial maximum value for the x-axis limits across all metrics plots.
 * `smoothing` (number): Set the initial value of the smoothing slider (0-20, where 0 = no smoothing).
+* `accordion` (string, `"hidden"`): When set to `"hidden"`, hides the section header accordions around metric groups. By default, section headers are visible.
 
 You can customize your `<iframe>` using standard attributes such as `width`, `height`, and `style`. For more details, see [MDN Web Docs: `<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe). For example:
 

pyproject.toml

@@ -15,7 +15,7 @@ requires-python = ">=3.10"
 dependencies = [
     "pandas<3.0.0",
     "huggingface-hub<2.0.0",
-    "gradio[oauth]>=6.6.0,<7.0.0",
+    "gradio[oauth]>=6.8.0,<7.0.0",
     "numpy<3.0.0",
     "pillow<12.0.0",
     "orjson>=3.0,<4.0.0",

trackio/ui/components/html_accordion.py

@@ -0,0 +1,111 @@
+import gradio as gr
+
+
+class HTMLAccordion(gr.HTML):
+    def __init__(
+        self,
+        label: str = "",
+        *,
+        open: bool = True,
+        hidden: bool = False,
+        **kwargs,
+    ):
+        html_template = """
+        <div class="accordion-header">
+            <button class="accordion-toggle" type="button">
+                <span class="accordion-arrow">&#9654;</span>
+                <span class="accordion-label">${label}</span>
+            </button>
+        </div>
+        @children
+        """
+
+        css_template = """
+        border: ${hidden ? 'none' : '1px solid var(--border-color-primary, #e5e7eb)'};
+        border-radius: 8px;
+        overflow: hidden;
+
+        .accordion-header {
+            display: ${hidden ? 'none' : 'flex'};
+            align-items: center;
+            cursor: pointer;
+            user-select: none;
+            background: var(--background-fill-secondary, transparent);
+        }
+
+        .accordion-toggle {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 10px 12px;
+            width: 100%;
+            text-align: left;
+            color: var(--body-text-color);
+            font-size: var(--text-md);
+            font-weight: 600;
+        }
+
+        .accordion-toggle:hover {
+            opacity: 0.8;
+        }
+
+        .accordion-arrow {
+            font-size: 0.65em;
+            transition: transform 0.2s ease;
+            display: inline-block;
+        }
+        """
+
+        js_on_load = """
+        const header = element.querySelector('.accordion-header');
+        const arrow = element.querySelector('.accordion-arrow');
+        const headerParent = header ? header.parentElement : null;
+        let isOpen = props.open !== undefined ? props.open : true;
+
+        function getContentNodes() {
+            return Array.from(element.children).filter((node) => {
+                if (node === headerParent) return false;
+                if (node.tagName === 'STYLE') return false;
+                return true;
+            });
+        }
+
+        function updateView() {
+            if (arrow) {
+                arrow.style.transform = isOpen ? 'rotate(90deg)' : 'rotate(0deg)';
+            }
+            if (header) {
+                header.style.borderBottom = isOpen
+                    ? '1px solid var(--border-color-primary, #e5e7eb)'
+                    : 'none';
+            }
+            for (const node of getContentNodes()) {
+                node.style.display = isOpen ? '' : 'none';
+                node.style.padding = '0 6px';
+            }
+        }
+
+        updateView();
+
+        if (header) {
+            header.addEventListener('click', () => {
+                isOpen = !isOpen;
+                props.open = isOpen;
+                updateView();
+            });
+        }
+        """
+
+        super().__init__(
+            html_template=html_template,
+            css_template=css_template,
+            js_on_load=js_on_load,
+            label=label,
+            open=open,
+            hidden=hidden,
+            apply_default_css=False,
+            **kwargs,
+        )

trackio/ui/main.py

@@ -16,6 +16,7 @@
 from trackio.typehints import AlertEntry, LogEntry, SystemLogEntry, UploadEntry
 from trackio.ui import fns
 from trackio.ui.components.colored_checkbox import ColoredCheckboxGroup
+from trackio.ui.components.html_accordion import HTMLAccordion
 from trackio.ui.files import files_page
 from trackio.ui.helpers.run_selection import RunSelection
 from trackio.ui.media_page import media_page
@@ -241,8 +242,12 @@ def refresh_runs(
     )
 
 
-def generate_embed(project: str, metrics: str, selection: RunSelection) -> str:
-    return utils.generate_embed_code(project, metrics, selection.selected)
+def generate_embed(
+    project: str, metrics: str, selection: RunSelection, show_headers: bool = True
+) -> str:
+    return utils.generate_embed_code(
+        project, metrics, selection.selected, not show_headers
+    )
 
 
 def update_x_axis_choices(project, selection, current_x_axis="step"):
@@ -571,6 +576,10 @@ def configure(request: gr.Request):
         case _:
             navbar = gr.Navbar(visible=True)
 
+    show_headers_cb = gr.Checkbox(
+        value=request.query_params.get("accordion") != "hidden"
+    )
+
     return (
         [],
         sidebar,
@@ -579,6 +588,7 @@ def configure(request: gr.Request):
         navbar,
         [x_min, x_max],
         smoothing_value,
+        show_headers_cb,
     )
 
 
@@ -765,6 +775,10 @@ def configure(request: gr.Request):
         )
         log_scale_x_cb = gr.Checkbox(label="Log scale X-axis", value=False)
         log_scale_y_cb = gr.Checkbox(label="Log scale Y-axis", value=False)
+        show_headers_cb = gr.Checkbox(
+            label="Show section headers",
+            value=True,
+        )
         metric_filter_tb = gr.Textbox(
             label="Metric Filter (regex)",
             placeholder="e.g., loss|ndcg@10|gpu",
@@ -791,6 +805,7 @@ def configure(request: gr.Request):
             navbar,
             x_lim,
             smoothing_slider,
+            show_headers_cb,
         ],
         queue=False,
         api_visibility="private",
@@ -835,7 +850,7 @@ def configure(request: gr.Request):
         api_visibility="private",
     ).then(
         fn=generate_embed,
-        inputs=[project_dd, metric_filter_tb, run_selection_state],
+        inputs=[project_dd, metric_filter_tb, run_selection_state, show_headers_cb],
         outputs=[embed_code],
         show_progress="hidden",
         api_visibility="private",
@@ -868,7 +883,7 @@ def configure(request: gr.Request):
     gr.on(
         [metric_filter_tb.change, run_cb.change],
         fn=generate_embed,
-        inputs=[project_dd, metric_filter_tb, run_selection_state],
+        inputs=[project_dd, metric_filter_tb, run_selection_state, show_headers_cb],
         outputs=embed_code,
         show_progress="hidden",
         api_visibility="private",
@@ -906,7 +921,7 @@ def toggle_group_view(group_by_dd):
         queue=False,
     ).then(
         fn=generate_embed,
-        inputs=[project_dd, metric_filter_tb, run_selection_state],
+        inputs=[project_dd, metric_filter_tb, run_selection_state, show_headers_cb],
         outputs=embed_code,
         show_progress="hidden",
         api_visibility="private",
@@ -921,6 +936,15 @@ def toggle_group_view(group_by_dd):
         show_progress="hidden",
     )
 
+    show_headers_cb.change(
+        fn=generate_embed,
+        inputs=[project_dd, metric_filter_tb, run_selection_state, show_headers_cb],
+        outputs=embed_code,
+        show_progress="hidden",
+        api_visibility="private",
+        queue=False,
+    )
+
     gr.api(
         fn=upload_db_to_space,
         api_name="upload_db_to_space",
@@ -1017,6 +1041,7 @@ def update_last_steps(project):
             log_scale_x_cb.change,
             log_scale_y_cb.change,
             metric_filter_tb.change,
+            show_headers_cb.change,
         ],
         inputs=[
             project_dd,
@@ -1029,6 +1054,7 @@ def update_last_steps(project):
             log_scale_y_cb,
             metric_filter_tb,
             run_selection_state,
+            show_headers_cb,
         ],
         show_progress="hidden",
         queue=False,
@@ -1044,6 +1070,7 @@ def update_dashboard(
         log_scale_y,
         metric_filter,
         selection,
+        show_headers,
     ):
         dfs = []
         original_runs = runs.copy()
@@ -1126,11 +1153,12 @@ def update_dashboard(
                 else group_name
             )
 
-            with gr.Accordion(
+            with HTMLAccordion(
                 label=group_label,
                 open=True,
+                hidden=not show_headers,
                 key=f"accordion-{group_name}",
-                preserved_by_key=["value", "open"],
+                preserved_by_key=["open"],
             ):
                 if group_data["direct_metrics"]:
                     with gr.Draggable(
@@ -1196,11 +1224,12 @@ def update_dashboard(
                             else subgroup_name
                         )
 
-                        with gr.Accordion(
+                        with HTMLAccordion(
                             label=subgroup_label,
                             open=True,
+                            hidden=not show_headers,
                             key=f"accordion-{group_name}-{subgroup_name}",
-                            preserved_by_key=["value", "open"],
+                            preserved_by_key=["open"],
                         ):
                             with gr.Draggable(
                                 key=f"row-{group_name}-{subgroup_name}",

trackio/utils.py

@@ -736,7 +736,12 @@ def get_sync_status(scheduler: "CommitScheduler | DummyCommitScheduler") -> int
         return None
 
 
-def generate_embed_code(project: str, metrics: str, selected_runs: list = None) -> str:
+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."""
     space_host = os.environ.get("SPACE_HOST", "")
     if not space_host:
@@ -754,6 +759,9 @@ def generate_embed_code(project: str, metrics: str, selected_runs: list = None)
         runs_param = ",".join(selected_runs)
         params.append(f"runs={runs_param}")
 
+    if hide_headers:
+        params.append("accordion=hidden")
+
     params.append("sidebar=hidden")
     params.append("navbar=hidden")