Experiment run

Supplied experiment metadata, conditions and ordered protocol steps with explicit statuses and controlled recording actions.

Preview

Optical measurement

Awaiting review

Run 042

Recorded temperature: 21.4 °C

Acquire readingsRecorded
Review acquisitionNot reviewed

In action

Review acquisition

Optics bench / Example run

Optical measurement

Awaiting review

Run 042

Protocol revision 3

Sample: 042
Recorded temperature: 21.4 °C

Acquire readingsRecorded
Data file attached to the run record
Review acquisitionNot reviewed

When to use

Use it for

Lab notebooks, acquisition workspaces and protocol review with supplied run state.
Pass explicit step actions and onAction to request changes; update supplied statuses after persistence.
Keep protocol links, conditions and step details with the run they describe.

Not for

Inferring completion, experimental validity or the next scientific procedure.
Treating an action request as proof that an instrument ran or that data was saved.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { ExperimentRun } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/experiment-run.

2. Vendor the source

npx @noorddev/vlak-cli add experiment-run

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/experiment-run.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { ExperimentRun } from "@noorddev/vlak-react";

<ExperimentRun label="Optical measurement" runId="042" protocol="Protocol revision 3" status="Awaiting review" conditions={[{ id: "temperature", label: "Recorded temperature", value: "21.4 °C" }]} steps={[
  { id: "acquisition", label: "Acquire readings", status: "Recorded", details: "Data file supplied by the instrument" },
  { id: "review", label: "Review acquisition", status: "Not reviewed" },
]} />

Props

ExperimentRun

Supplied run metadata and protocol steps, with application-owned transitions.

Prop	Type	Default	Description
`label`required	`string`
`runId`	`string`
`protocol`	`ReactNode`
`status`required	`string`
`conditions`	`readonly ExperimentCondition[]`	`[]`
`steps`required	`readonly ExperimentStep[]`
`onAction`	`(stepId: string, actionId: string) => void`		Requests an explicit action. State remains supplied by the application.

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`Tab`	Moves between supplied links and enabled step actions.
`Enter, Space`	Requests the focused step action through onAction.

Accessibility

A named group contains conditions as a description list and steps as an ordered list.
Action names include their step number and label; the current step status is their accessible description.
Pending steps keep their recorded state, show pending text and disable actions. No internal success state is invented.
Zero-valued conditions remain visible and missing conditions are explicitly labelled. Buttons are at least 44px with visible focus rings.
The root div forwards native attributes and its ref.

Markup

<div class="rs-experiment-run" role="group" aria-label="Optical measurement"><div class="rs-experiment-run-head"><p class="rs-experiment-run-title">Optical measurement</p><span class="rs-experiment-run-context">Awaiting review</span></div><p class="rs-experiment-run-context">Run 042</p><ol class="rs-experiment-run-list"><li class="rs-experiment-run-step"><div class="rs-experiment-run-head"><span>Review acquisition</span><span class="rs-experiment-run-context">Not reviewed</span></div></li></ol></div>

Classes

.rs-experiment-run.rs-experiment-run-head.rs-experiment-run-title.rs-experiment-run-context.rs-experiment-run-conditions.rs-experiment-run-value.rs-experiment-run-list.rs-experiment-run-step.rs-experiment-run-details.rs-experiment-run-actions.rs-experiment-run-action

Depends on

/button