Skip to content
react-bio-viz

react-bio-viz

React components for biological data visualization

Component props

Section titled “Component props”

Functions

Section titled “Functions”

Interfaces

Section titled “Interfaces”

Type Aliases

Section titled “Type Aliases”

Variables

Section titled “Variables”

Components

Section titled “Components”

A gene model — transcripts with their exons and CDSs — on a genomic axis, with a pan/zoom toolbar. Drag to pan, scroll to zoom, click an exon or CDS for its details. The viewport is controllable (viewport/defaultViewport/onViewportChange/viewportStore); {@link SimpleGeneModel} is the same view without the toolbar, fully controlled.

Components

Section titled “Components”

A multiple sequence alignment with a pan/zoom toolbar: a canvas that draws only the visible window (so there is no size limit, and letters stay crisp at any zoom), with a name column, a consensus row, a column ruler, an interactive minimap, optional tracks (conservation, sequence logo, or any per-column score), residue highlighting, and a hover readout.

Scroll to pan, Ctrl/⌘-scroll or pinch to zoom, drag to pan; Shift-drag adds to the selection and Cmd/Ctrl-drag toggles it (a plain drag selects in "select" mode); click a track to select columns and a label to select rows; drag labels to reorder rows; Delete removes the selection and Escape clears it.

The viewport, selection, rowOrder and panelSizes are controllable. The alignment is never edited: renames and removals are reported through onRenameRow/onRemoveRows/onRemoveColumns for the caller to apply. {@link SimpleMultipleSequenceAlignment} is the same view without the toolbar, fully controlled.

Components

Section titled “Components”

A pairwise distance matrix as a heatmap, with a pan/zoom toolbar: row names on the left, column names on top, cells shaded by distance, with values written in once cells are large enough. Drawn on canvas, only the visible window, so it scales to thousands of sequences.

Scroll to pan, Ctrl/⌘-scroll to zoom, drag to pan; drag row names to reorder rows and columns together. The viewport, rowOrder and panelSizes are controllable, and rowOrder has the MSA’s shape, so one store can order an alignment, its tree and its distance matrix together. {@link SimpleDistanceMatrix} is the same view without the toolbar, fully controlled.

Components

Section titled “Components”

An interactive phylogenetic tree in rectangular, cladogram or radial layout, with a pan/zoom toolbar. Scroll to pan, Ctrl/⌘-scroll to zoom; reroot, collapse clades, drag nodes to reorder siblings, style nodes and branches, search leaves, and handle node/branch clicks.

The viewport and the selection (root position, collapsed clades, sibling order) are controllable; node ids are stable across reroots, so a selection and nodeStyles stay valid. {@link SimplePhyloTree} is the same view without the toolbar, fully controlled. Pure helpers work on the same Tree + TreeSelection pair: {@link midpointRoot}, {@link ladderizeOrder}, {@link rotateOrder}, {@link orderForLeafNames}, {@link collapseBySupport}, {@link applyTreeSelection}, {@link leafOrder}, {@link parseNewick} and {@link toNewick}.

Components

Section titled “Components”

BLAST hits along one query sequence, stacked into rows where they overlap and coloured by a metric chosen in its selector, with a pan/zoom toolbar. Clicking a hit toggles it in the selection. The metric, viewport and selection are controllable; {@link SimpleBlastHitDistribution} is the same view without the toolbar, fully controlled.

Components

Section titled “Components”

Genome tracks — "feature", "coverage" and "genemodel", or custom kinds through trackRenderers — stacked under one genomic-position ruler, with a pan/zoom toolbar. The viewport is controllable (viewport/defaultViewport/onViewportChange/viewportStore); {@link SimpleGenomeBrowser} is the same view without the toolbar, fully controlled.

Components

Section titled “Components”

The alignment view inside {@link MultipleSequenceAlignment}, without its toolbar, and controlled: pan/zoom, selection, row drags and panel resizes report through their on*Change callbacks, and show once passed back.

Components

Section titled “Components”

The heatmap inside {@link DistanceMatrix}, without its toolbar, and controlled: pan/zoom, row drags and panel resizes report through onViewportChange, onRowOrderChange and onPanelSizesChange, and show once passed back.

Components

Section titled “Components”

The tree inside {@link PhyloTree}, without its toolbar, and controlled: pan/zoom, collapsing and dragging report through onViewportChange and onSelectionChange, and show once passed back as viewport and selection.

Components

Section titled “Components”

The view inside {@link BlastHitDistribution}, without its toolbar and metric selector, and controlled: pan/zoom and hit clicks report through onViewportChange and onSelectionChange, and show once passed back as viewport and selection.

Components

Section titled “Components”

The view inside {@link GeneModel}, without its toolbar, and controlled: dragging and scrolling report the next window through onViewportChange, and it shows once passed back as viewport.

Components

Section titled “Components”

The view inside {@link GenomeBrowser}, without its toolbar, and controlled: dragging and scrolling report the next window through onViewportChange, and it shows once passed back as viewport.