GGenomics UI
Components/Viewers

MSA Viewer

@genomics/msa-viewer

Two-axis virtualized multiple alignment.

Preview

Alignment
10 sequences × 279 columns
10 sequences × 279 columns
Use arrow keys to move along the sequence, Shift plus arrow to jump ten, Home and End for the ends, Enter to select, Space to add to the selection, Escape to clear.

About

The genomics analog of a spreadsheet grid: thousands of rows by thousands of columns virtualized on both axes over one canvas. A fixed left gutter holds labels; a fixed header holds a column ruler and per-column conservation bar. A reference row defines the coordinate space, so columns map to reference residues and stay linked.

Usage

import { MsaViewer } from "@/components/ui/msa-viewer"

<MsaViewer rows={alignedSequences} referenceId="ref" height={400} />
Source: components/ui/msa-viewer.tsx