Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Profile blocks

Pro

Data Scientist Run Compare Profile Block for Vue

A data scientist profile for comparing two training runs: eight runs in a table with a box on each row, a side-by-side band with each metric's change, sign and arrow and the better run named, and a Promote run action that marks the winner as in production.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Decide which run to ship, with this data scientist profile for Vue with Ark UI. A compact header names the tracker, and the hairline frame under it opens on the person: initials, name, role and place. The runs are a native table of eight, each with a Checkbox, its date, F1, AUC, latency and parameters; you can tick two at most, and ticking a third replaces the older pick, which the polite line says. Under it a side-by-side band shows the two picks for four metrics: both values, the change with its sign and arrow, the better run named with a check, and under each metric whether higher or lower is better. A sentence adds up how many metrics the winner takes. Promote run, the one Shine Button in the foot, marks that winner as In production. It's built from Table, Checkbox, Badge, Avatar, Shine Button and Guides, with a CSS entrance only. The runs and scores are invented. For an experiment tracker, a model registry or any two-way comparison.

FAQ

How do I load my own runs?

Edit RUNS and METRICS. A run has an id, an ISO date and its F1 and AUC in thousandths (874 is 0.874), the latency in milliseconds and the parameters in millions. A metric names which end is better, higher or lower. The changes, the winners, the count of metrics won and the run to promote are all worked out from the two picks, so a new metric needs one row and one case in readOf.

Why only two runs?

A comparison needs a before and an after, and two columns of values stay readable on a phone. Ticking a third box drops the older pick instead of refusing, so you never have to untick first, and the line under the table says which run was replaced. The band keeps its four rows and its height whether zero, one or two runs are picked.

What does Promote run do?

It chooses the run that wins more metrics, with F1 breaking a tie, or the only run you have ticked, and marks it In production in the table. That is all it does here: the status line says Nothing was deployed. To wire it for real, send the run id to your registry and show the result when it answers.

How is a change shown without colour?

As a sign and an arrow, a minus or a plus with a down or up arrow, followed by the run that is better and a check. Whether a lower number is good depends on the metric, so each row says higher or lower is better in words. In a right-to-left layout the numbers keep their order.

How does the table behave on a phone?

The table shows the box, the run with its date under it, and F1. AUC, latency and parameters appear from the medium breakpoint, and the side-by-side band always shows all four metrics.

All 100 profile blocks