React Feature Track
A linear annotation map — the bio-generalization of the register and memory maps. Draw ranges along a 1..length axis on stacked lanes with a position ruler: protein domains, gene features, binding sites, restriction sites. Features render as boxes, directional arrows (for genes/ORFs), or point sites (for single residues), each with a hover readout of its coordinates. The same primitive covers protein architecture in aa and plasmid maps in bp.
Tyrosine kinase — domain architecture
Plasmid region — gene features (bp)
Hover any feature for its coordinates. Lanes stack overlapping features; arrows show direction, ticks mark sites.
Installation
npx shadcn@latest add feature-track.json
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | — | Total axis length |
| features | Feature[] | — | { name, start, end, lane?, color?, shape? } |
| unit | string | 'aa' | Axis unit label |
| height | number | auto | Override the computed height |
shape is 'box' (default), 'arrow' (directional), or 'site' (point marker). Put overlapping features on different lane indices.