shadcn.io is not affiliated with official shadcn/ui
Tree Timeline Block for Vue
A lineage of eight training runs as a keyboard-walkable tree three levels deep, each row with its id, date, validation loss and the one setting it changed, and a band that shows the chosen run against its parent.
Installation
Overview
Show how work was forked from earlier work with this tree timeline for Vue with Ark UI. It is written for Runtree, a fictional experiment tracker. A hairline frame with a plus mark on each corner holds a toolbar, a tree and a detail band. The tree is the Tree View component: a baseline run, the three runs forked from it and the runs forked from those, indented by lineage, with a run id in mono, its date, its validation loss and the one setting it changed ("lr 0.0005") on each row. The arrow keys walk the tree and open or close a branch, and "Expand all" and "Collapse all" do it at once. The best run is marked with the word Best. Choosing a run fills the band under the tree with its four settings against its parent, where the changed one says "changed from 0.001" in words, and its loss difference with a sign and a word ("−0.063, better than r-002"). A polite status line repeats the choice. For experiment trackers, branch histories, build lineages and any record where each entry comes from another. The figures are example data.
FAQ
How do I change the runs?
Edit RUNS at the top of the file. Each run has an id, an ISO day on, its parent (empty for the baseline), its validation loss in thousandths and values, one string per entry of SETTINGS. The tree, the best run, the changed setting on each row and every difference in the detail band are derived from these, so nothing is typed twice. Keep the tree to three levels: it is drawn by three small level components.
How do I use it with a keyboard?
Tab into the tree, then use Up and Down to move between rows, Right to open a branch or step into it, Left to close it or step out, and Enter or Space to choose the run. Home and End jump to the first and last visible row. The leaves are not extra tab stops. The tree sits in a scroll region that is itself focusable, so rows past its edge stay reachable.
What does the detail band compare?
The chosen run against the run it was forked from: its validation loss with the signed difference and a word (better or worse), and each of the four settings with "same" or "changed from" and the old value. The baseline has no parent, so it says so. The band always has the same five rows, so it does not change height when you choose another run.
What stays in the page?
Which branches are open and which run is chosen. Nothing is saved and no experiment runs. To wire it to a tracker, load the runs from your API into RUNS and keep the parent field as the only link; the rest follows.