Colony plate

A bounded plate diagram and keyboard-selectable list of supplied colony markers, with the source count kept separate from annotation totals.

Preview

Colony annotations

Plate: P-042

Source count: 12

Imported source count and four annotated records

4 marker records supplied; 3 positioned

Coordinates are percentages, measured from the upper left. The dish center is 50, 50.

x 28%, y 32%
Source annotation: circular outline
x 62%, y 26%
Source annotation: raised center
x 55%, y 68%
Position not supplied

Selected record: Colony 02

In action

Inspect supplied colony records

Sample 042 / Plate review

Sample 042 colony record

Plate: P-042

Source count: 12

Imported source count and four annotated records

4 marker records supplied; 3 positioned

Coordinates are percentages, measured from the upper left. The dish center is 50, 50.

x 28%, y 32%
Source annotation: circular outline
x 62%, y 26%
Source annotation: raised center
x 55%, y 68%
Review note attached
Position not supplied
Coordinate annotation not yet supplied

Selected record: Colony 02

When to use

Use it for

Inspect supplied colony annotations and source counts without running an image analysis algorithm.
recordedCount is the original source count. The exact number of supplied marker records and positioned records are labelled separately; neither substitutes for the source count.
Supply unique marker identifiers and normalized x/y percentages from the upper left. The circular plate has center 50, 50 and radius 50.
Select a record using value and onValueChange, or use defaultValue for local selection. Native form reset restores uncontrolled selection. readOnly keeps the same record list without selection controls.

Not for

Inferring a colony count from marker records, missing annotations or a blank diagram.
Identifying organisms, segmenting images or suggesting culture procedures from these records.
Supplying more than 256 markers; the component reports the bound without showing a partial list.

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 { ColonyPlate } from "@noorddev/vlak-react";

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

2. Vendor the source

npx @noorddev/vlak-cli add colony-plate

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/colony-plate.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 { ColonyPlate } from "@noorddev/vlak-react";

<ColonyPlate label="Colony annotations" plateId="P-042" recordedCount={12} source="Imported source count and four annotated records" markers={[
  { id: "c1", label: "Colony 01", x: 28, y: 32, description: "Source annotation: circular outline" },
  { id: "c2", label: "Colony 02", x: 62, y: 26, description: "Source annotation: raised center" },
  { id: "c3", label: "Colony 03", x: 55, y: 68 },
  { id: "c4", label: "Colony 04", x: null, y: null },
]} defaultValue="c2" />

Props

ColonyPlate

A supplied plate record. Marker positions and source count are never detected or inferred.

Prop	Type	Default	Description
`label`required	`string`
`markers`required	`readonly ColonyMarker[]`
`plateId`	`string`
`source`	`ReactNode`
`recordedCount`	`number \| null`		The source's recorded count, independent of the number of supplied marker records.
`value`	`string \| null`
`defaultValue`	`string \| null`	`null`
`onValueChange`	`(id: string \| null) => void`
`readOnly`	`boolean`	`false`

Also accepts Omit<HTMLAttributes<HTMLElement>, "defaultValue">.

Keyboard

Keys	Does
`Tab`	Moves through enabled record-selection buttons and the clear-selection button.
`Enter, Space`	Selects the focused supplied record or clears the selection; controlled selection waits for the host.

Accessibility

The figure caption names the plate. The decorative diagram is paired with a complete ordered list of record labels, exact coordinates and supplied descriptions.
Missing, non-finite and out-of-dish positions retain their list records and have explicit availability text. Only positioned markers are drawn; their exact number is shown.
Every control is at least 44px with a visible focus ring. Selected record buttons use a full fill and aria-pressed, including in forced colors.
Source count zero remains zero. Missing source counts and invalid negative or unsafe counts receive separate text; no count is inferred from the diagram.
Duplicate or empty identifiers and oversized inputs produce an explanation. Native attributes, figure ref, className and style pass through. Selection buttons do not submit forms.

Markup

<figure class="rs-colony-plate"><figcaption class="rs-colony-plate-title">Colony annotations</figcaption><p class="rs-colony-plate-count">Source count: 12</p><p class="rs-colony-plate-copy">1 marker records supplied; 1 positioned</p><ol class="rs-colony-plate-list" aria-label="Supplied marker records"><li class="rs-colony-plate-record"><div class="rs-colony-plate-static">1. Colony 01</div><p class="rs-colony-plate-copy">x 28%, y 32%</p></li></ol></figure>

Classes

.rs-colony-plate.rs-colony-plate-title.rs-colony-plate-copy.rs-colony-plate-count.rs-colony-plate-body.rs-colony-plate-graphic.rs-colony-plate-dish.rs-colony-plate-list.rs-colony-plate-record.rs-colony-plate-static.rs-colony-plate-details.rs-colony-plate-clear.rs-colony-plate-marker.rs-colony-plate-chosen.rs-colony-plate-control.rs-colony-plate-selected

Depends on

/button