shadcn.io is not affiliated with official shadcn/ui
Data Science Sidebar Block for Svelte
An experiment tracker with a wide rail of eight training runs: tick up to three and their loss curves are drawn over each other in solid, dashed and dotted lines, with a legend, a figures table and a CSV download.
Installation
Overview
Give an experiment tracker its whole shell with this data science sidebar for Svelte with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar, set wide so each run's name fits: eight training runs, each with a Checkbox and its final validation loss. Tick up to three and the page draws their loss curves over each other as hand-built lines, the first solid, the second dashed and the third dotted, so they can be told apart without color, with a legend by name and a table of each run's final and best loss under the chart. Try a fourth and it is refused with a polite line in the rail and in the status. Beside it, the top bar says how many runs are being compared and holds Download CSV, a Shine Button and the only colored control, which saves the chosen curves step by step. The rail collapses to one icon that unfolds it, and below the medium breakpoint it becomes a sheet. It's built from Sidebar, Checkbox, Label, Empty, Avatar, Shine Button and Guides, with hand-drawn SVG lines and a CSS entrance only. For experiment trackers, benchmark comparisons and any app that overlays a few items from a list.
FAQ
Where do the curves come from?
From four numbers per run at the top of the file: where the loss starts, where it settles, how fast it falls and how much it ripples early on. A small function turns them into 40 values with an exponential decay and a fading ripple, so the curves are the same on every load and nothing is fetched. The table reads the same values: a run's loss is its last point and its best is the lowest, with the step it happened at. Every curve shares one fixed vertical range, so choosing or clearing a run never rescales the others. In your app, load your runs' metric history in the same shape.
Why three runs, and what happens on the fourth?
Three curves are the most that stay readable when they cross, and the three line shapes (solid, dashed, dotted) run out after that. A fourth tick is refused: the box stays unticked, the line under the list says "Three runs at most. Clear one to add another." and the status line announces the same. Unticking a run frees its place, and the lines keep their order, so a run keeps its shape while it stays chosen.
What stays in the page, and how do I connect it?
Everything but the file. Ticking a run only changes the block's own state; Download CSV builds a small text file with one column per chosen run and saves it through a temporary link, so nothing is uploaded, and reloading starts over. Replace the file with an export from your tracker if the real history is longer than the page. The list is a set of checkboxes in the rail, not links, so there is nothing to route: pass the chosen ids to your own chart or comparison page.
How does it work on a phone?
Below the medium breakpoint the sidebar becomes a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The runs and their checkboxes are in it. Escape closes the sheet and focus goes back to the menu button, and the page behind it already shows the curves, the legend and the table, with the status line below. The window keeps its height and only the page scrolls.
What happens when the sidebar collapses?
The menu button or the rail along the sidebar's edge folds it to a single icon, because a list of checkboxes has no folded form. Pressing that icon unfolds the rail so you can tick runs again; its tooltip says how many are compared. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
Is it accessible?
The sidebar is a navigation landmark named after the product, and the runs are a labelled list of real checkboxes, each named by its run and described by its loss. The chart is an image with a text alternative that names the runs, the legend is a list that says each line's shape in words, and the table has a caption and column heads. One polite status line reports every change and every refusal, and figures are isolated so they read in order in a right-to-left layout.