Results notebook

A React block (a whole screen) in Beamline's Clinic app.

A notebook entry's structured results. The entry's text above a bounded results table with typed columns: a sample link, numbers in their unit with their range, text, and linked columns read from the sample (never edited here, a missing link said). A value typed wrong keeps its typing and blocks Submit in its cell, counted below; Submit sends the table's draft rows apart from the entry's text, locks them with their result ids, and a refused submit keeps them. Rows arrive by scanning or pasting barcodes (found, unknown, already in the table and not yours said apart; only found ones added), from another table (the destination and source columns, an incompatible pair said, a source that can't be read said, rows appended carrying where they came from) or by hand. A linked column is added through a sample column with a preview. Linked values that changed at the source are marked in their cells; Refresh previews how many change and which edited rows keep their entries, and a failed refresh changes nothing. The entry's plates register into inventory (barcode, location, project), the record kept apart from the live item, a change to the live item since said. With the plot prop the results are drawn beside the entry's text as they're typed: one line per linked sample through two number columns (x on a log scale when asked), named at its end, with an optional dashed guide; a value that isn't a number yet is left out. Cells read as values at rest; a cell's field shows when pointed at, typed in or wrong.

Use it for

Scientists recording structured results inside an experiment entry: samples scanned or pulled from a plan, measurements typed with their units, values read from linked samples, then submitted.
Any record where a typed table sits inside a narrative and is submitted on its own (inspection reports, QA logs).

Not for

A large data grid to browse (data-grid).
Laying samples out on a plate (signature work).
Stock and lots (production-lots).

Anatomy

entry: title and text
results block: name and schema version with the draft count; Scan or paste barcodes, Add from a table, Add a linked column
stale bar: how many linked values changed, Refresh linked values, its preview (count, edited rows that stay), Refresh / Cancel, a failure
table: row number, sample, number cells with unit and their problem, text, linked cells (outdated badge, No link), a submitted check or Remove
foot: Add a row, the state (values to fix, results submitted, or that the text stays a draft), Submit results
scan dialog: the barcodes field, each code with what it resolved to, Preview / Add n samples
from-table dialog: into column, source table, source column, the incompatibility or how many rows append
lookup dialog: through, show (relation → attribute), the preview per sample, Add column
plates: each plate (recorded, wells, live change) with In inventory as … or Register in inventory; its dialog (barcode, location, project)

States

empty grid
draft rows
invalid value
out of range
submitting
submitted
submission refused
waiting for input
resolving
matched
unknown barcode
duplicate
not accessible
ready
source selection
incompatible column
mapping ready
populated draft
source unavailable
no compatible column
attribute selection
preview
linked values
unresolved relation
current
outdated
local edits
refresh preview
refreshing
refresh failed
snapshot only
registration pending
registered
live item changed
registration refused

Keyboard

Tab through the toolbar, then each editable cell in row order
in the scan field, Enter resolves what was typed or pasted (Shift+Enter adds a line)
dialogs trap focus; Escape closes them

Motion

None beyond the parts' own; nothing moves at rest.

Props

Prop	Type	Default	Description
`entry` (required)	`{ title: string; body: ReactNode; }`	—	The entry's prose, shown above the table (read here; edited in your editor).
`table`	`ResultTableState`	—
`defaultTable`	`ResultTableState`	—
`onTableChange`	`((t: ResultTableState) => void)`	—
`onResolveBarcodes`	`((codes: string[]) => Promise<BarcodeMatch[]>)`	—	Resolves scanned or pasted barcodes; order follows the input.
`sources`	`SourceTable[]`	—	Tables rows can be added from.
`lookupPaths`	`LookupPath[]`	—	Relations a linked column can read through, with their attributes.
`onLookup`	`((q: { through: string; path: string; attribute: string; }, rows: ResultRow[]) => Promi…`	—	Reads an attribute for each row's linked sample: values by row id (null: no link).
`onRefreshLinked`	`(() => void \| Promise<unknown>)`	—	Confirms the refresh of outdated linked values at the source; reject with why to change nothing.
`onSubmit`	`((rows: ResultRow[]) => Promise<Record<string, string>>)`	—	Submits the table's draft rows: result ids by row id; reject with why to keep them as drafts.
`plot`	`{ title, x, y, series, xLog?, guide?: { at, label } }`	—	A live chart of the results (two number columns, one line per linked sample), beside the entry's text.
`plates`	`PlateRecord[]`	—
`onRegisterPlate`	`((plateId: string, details: { barcode: string; location: string; project: string; }) =>…`	—	Registers a recorded plate in inventory; resolve with its inventory id, reject with why.
`locations`	`string[]`	—
`projects`	`string[]`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

input
select
textarea
dialog
badge
button
alert

Dependencies

lucide-react

Import

import { ResultsNotebook } from "@beamline/results-notebook";

Get it

Results notebook is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent