Render plot/metric titles as searchable DOM text#576
Conversation
Plot titles were drawn inside the Vega canvas, so they were not selectable and could not be found with the browser's native find (Ctrl+F / Cmd+F). Render the title as an HTML element above the chart instead, in both the normal and fullscreen views, for LinePlot and BarPlot. Closes #574 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🪼 branch checks and previews
|
🦄 change detectedThis Pull Request includes changes to the following packages.
|
🪼 branch checks and previews
Install Trackio from this PR (includes built frontend) pip install "https://huggingface.co/buckets/trackio/trackio-wheels/resolve/411240df170cbb9e7fb14fc5b51ec2f1d50a3bb8/trackio-0.26.0-py3-none-any.whl" |
|
The docs for this PR live here. All of your documentation changes will be reflected on that endpoint. The docs are available until 30 days after the last update. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| text: title, | ||
| fontSize: 13, | ||
| color: cssVar("--body-text-color", "#374151"), | ||
| }, |
There was a problem hiding this comment.
PNG export omits plot title
Medium Severity
Moving the metric title out of the Vega spec into a DOM plot-title element means downloadImage still exports only the Vega view via toImageURL. Downloaded PNGs no longer include the plot title that previously appeared when the title lived in the chart spec.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 411240d. Configure here.
There was a problem hiding this comment.
Pull request overview
This PR addresses #574 by making plot/metric titles in the dashboard searchable/selectable text by rendering them as HTML above the Vega canvas, instead of embedding titles into the Vega-Lite spec.
Changes:
- Remove Vega-Lite
titleblocks fromLinePlotandBarPlotspecs. - Render titles as
<div class="plot-title">…</div>in both normal and fullscreen views, with matching styling. - Add a Changesets entry to publish the feature as a minor bump.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| trackio/frontend/src/components/LinePlot.svelte | Moves the plot title out of the Vega spec and into the DOM (normal + fullscreen), adds corresponding styles. |
| trackio/frontend/src/components/BarPlot.svelte | Same as LinePlot: title rendered as DOM text and removed from Vega spec, with matching styles. |
| .changeset/lazy-weeks-act.md | Adds a minor release note for the new searchable DOM titles feature. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {#if title} | ||
| <div class="plot-title">{title}</div> | ||
| {/if} |
There was a problem hiding this comment.
I checked and it's not an issue
| "trackio": minor | ||
| --- | ||
|
|
||
| feat:Render plot/metric titles as searchable DOM text |
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
There are 2 total unresolved issues (including 1 from previous review).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 364cf0b. Configure here.
|
|
||
| return { | ||
| $schema: "https://vega.github.io/schema/vega-lite/v5.json", | ||
| title: { |
There was a problem hiding this comment.
PNG export drops plot title
Medium Severity
Removing the Vega title from buildSpec stops the metric name from being part of the embedded chart, but PNG download still uses view.toImageURL on that view only. Exported PNGs no longer include the plot title that users still see in the DOM above the chart.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 364cf0b. Configure here.
abidlabs
force-pushed
the
searchable-plot-titles
branch
2 times, most recently
from
c9ecf61 to
411240d
Compare
|
Amazing, I tried on your branch it work for me ! |
Closes #574
Graph/metric names in the dashboard were drawn inside the Vega canvas (
title.textin the spec,renderer: "canvas"), so they were rendered as pixels rather than real text. Users could not select them or use the browser's native find (Ctrl+F / Cmd+F) to jump to a specific plot (e.g. typing "ssim" to scroll to the SSIM chart) — slow for runs with many metrics.The fix is to render the title as an HTML element (
<div class="plot-title">) above the chart instead of inside the Vega spec, for bothLinePlotandBarPlot, in both the normal and fullscreen views. The canvastitleblock is removed from each spec. Visual appearance is unchanged (centered, 13px, same color), but the title is now selectable, searchable DOM text.Note
Low Risk
UI-only presentation change in two Svelte plot components; no auth, data, or API impact. Minor risk that PNG exports omit titles that were previously drawn in the Vega spec.
Overview
Plot/metric titles are now real DOM text instead of Vega canvas titles, so users can select them and use the browser find-in-page (Ctrl/Cmd+F) to jump to a specific chart on busy dashboards.
In
LinePlot.svelteandBarPlot.svelte, the Vega-Litetitleblock is removed frombuildSpec, and a conditional<div class="plot-title">is rendered above the chart in both the grid view and fullscreen. Shared styling keeps the look aligned with the old spec (centered, 13px, theme text color, word-break for long names). A minor trackio changeset records the feature.Note: PNG export still comes from the Vega canvas only, so downloaded images may no longer include the metric title unless that is handled elsewhere.
Reviewed by Cursor Bugbot for commit c9ecf61. Bugbot is set up for automated code reviews on this repo. Configure here.