Coverage inspector

Shows supplied per-locus depth, base and strand counts with an exact position selector, bounded plot and complete depth table.

Preview

Supplied coverage

Example reference · chr7 · 1-based positions

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

101105

Inspect position

Depth: 24
Forward strand: 12
Reverse strand: 12

A: 20
C: 4

Depth table, 5 positions

chr7, supplied coverage
Position	Depth
101	0
102	Not supplied
103	24
104	18
105	22

In action

Inspect coverage records

Sample 042 / Recorded counts

Sample 042 coverage

Example reference · chr7 · 1-based positions

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

101105

Inspect position

Depth: 24
Forward strand: 12
Reverse strand: 12

A: 20
C: 4
G: 0
T: 0

Depth table, 5 positions

chr7, supplied coverage
Position	Depth
101	0
102	Not supplied
103	24
104	18
105	22

When to use

Use it for

A bounded window of up to 512 unique one-based loci with caller-supplied counts.
Inspect base and strand counts independently; the component does not sum them or reconcile them with depth.
Use null for missing counts. Zero means an explicitly recorded count of zero.

Not for

Calling variants, assigning significance, or applying coverage thresholds.
Treating absent counts as zero, or supplying fractional and negative counts as valid depth.

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

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

2. Vendor the source

npx @noorddev/vlak-cli add coverage-inspector

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/coverage-inspector.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 { CoverageInspector } from "@noorddev/vlak-react";

<CoverageInspector label="Coverage window" contig="chr7" reference="Example reference" loci={[
  { position: 101, depth: 0, bases: { A: 0, C: 0 }, forward: 0, reverse: 0 },
  { position: 102, depth: null },
  { position: 103, depth: 24, bases: { A: 20, C: 4 }, forward: 12, reverse: 12 },
]} defaultValue={103} />

Props

CoverageInspector

Supplied coverage and counts, with missing depth distinct from recorded zero and no variant calls.

Prop	Type	Description
`label`required	`string`
`contig`required	`string`
`reference`	`string`
`loci`required	`readonly CoverageLocus[]`
`value`	`number \| null`	A supplied one-based position, not an array index.
`defaultValue`	`number \| null`
`onValueChange`	`(position: number \| null) => void`

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

Keyboard

Keys	Does
`Tab`	Focuses the Vlak position selector and native depth-table disclosure.
`Arrow keys, typing`	Opens and navigates the Vlak position selector by arrow keys and typeahead. Escape closes its menu.
`Enter, Space`	Chooses a highlighted locus or opens and closes the focused native depth disclosure.

Accessibility

The decorative plot has a complete visible depth table; open markers distinguish unavailable depth from recorded zero.
Vlak Select provides a 44px trigger and listbox for exact supplied genomic positions. Selected depth, base and strand counts use description lists.
Non-finite, negative and non-integer counts are unavailable; missing counts are explicitly not supplied.
At most 16 base symbols are displayed per selected locus. Invalid or oversized locus windows are reported without truncation.
The figure ref and native attributes pass through; selection supports controlled values and native form reset.

Markup

<figure class="rs-coverage-inspector"><figcaption class="rs-coverage-inspector-title">Coverage window</figcaption><p class="rs-coverage-inspector-copy">chr7 · 1-based positions</p><div class="rs-coverage-inspector-label"><span id="coverage-position-label">Inspect position</span><div class="rs-select rs-select-fluid rs-coverage-inspector-select"><button type="button" class="rs-dropdown" role="combobox" aria-labelledby="coverage-position-label" aria-expanded="false" aria-haspopup="listbox"><span>101 · Depth 0</span></button></div></div><dl class="rs-coverage-inspector-counts"><div><dt>Depth</dt><dd class="rs-coverage-inspector-value">0</dd></div></dl></figure>

Classes

.rs-coverage-inspector.rs-coverage-inspector-title.rs-coverage-inspector-copy.rs-coverage-inspector-plot.rs-coverage-inspector-stem.rs-coverage-inspector-point.rs-coverage-inspector-missing.rs-coverage-inspector-axis.rs-coverage-inspector-label.rs-coverage-inspector-select.rs-coverage-inspector-counts.rs-coverage-inspector-value.rs-coverage-inspector-summary.rs-coverage-inspector-table.rs-coverage-inspector-cell

Depends on

/select /dropdown-menu