Genome mapping workspace

Build with Vlak
Reference browserVlak teaching fixture v1
Demo contig 01

124

1-based inclusive · 24 positions

Supplied evidence
3 supplied reads
Supplied depth

Teaching fixture v1 · demo-01 · 1-based positions

Supplied depth. Open markers indicate missing or unavailable depth; filled markers include recorded zero.

124
Inspect position
Depth
12
Forward strand
6
Reverse strand
6

Base counts not supplied

Depth table, 24 positions
demo-01, supplied coverage
PositionDepth
118
220
319
417
521
622
724
818
919
1023
1124
1222
1312
1418
1517
1616
170
1814
1918
2019
21Not supplied
2221
2323
2420
Selected locusdemo-01:13
Reference baseA
Supplied depth12
0 notes at this locus
demo-01:13

Locus notebook

Reference position13

Demo contig 01 · 1-based inclusive

Annotations describe this supplied evidence. They are not variant calls.

Saved at this locus

No saved annotations at this position.

0 saved annotations in this session
0/1200
Teaching fixture v1 · 1-based inclusive0 local annotations

Open a reference region → inspect a locus → annotate and export

View source

Inside the interface

A reference browser that keeps coordinates explicit. Select one of two fictional contigs, choose a region, and inspect the supplied depth and aligned reads. A selected position anchors a local annotation that can be exported with its reference and coordinate convention.

The short sequences and read records are fictional interface fixtures. Region selection, annotations, and JSON download work locally. The workspace performs no mapping, alignment, variant calling, or clinical interpretation.

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed
Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • Genomic region field validates a one-based inclusive region before the evidence window changes. Its contig and numeric controls retain Vlak's keyboard and native form behavior.
  • Coverage inspector and Sequence alignment share the selected reference position. The workspace slices already supplied records; it does not compute an alignment or fill missing depths.
  • Textarea and Button record annotations tied to the selected locus. Export downloads the actual local records with their coordinate convention and fictional reference identity.
  • Below a 640px specimen width, Region, Evidence, and Notes have separate screens. Applying a valid region opens evidence; coverage and alignment remain reachable through a view picker. Notes keep their selected locus and a pinned save action, with export available from the region screen.