MultipleSequenceAlignment

import { MultipleSequenceAlignment } from "react-bio-viz";

<MultipleSequenceAlignment msa={msa} width={900} height={500} />;

msa is a betula alignment: an array of { identifier, sequence, id? }, all sequences the same length. The view draws only the visible window, so alignment size doesn’t matter — thousands of sequences or columns render as quickly as ten — and residue letters are redrawn at every zoom level, so they stay sharp.

Try the colour schemes, tracks and selection modes; Shift-drag across the alignment to select, click the conservation track, drag a label to reorder:

Options

Rendering toggles go in one options object (MSADrawOptions):

<MultipleSequenceAlignment
  msa={msa}
  options={{
    colorStyle: "AA Zappo",          // default: picked from the alignment's alphabet
    tracks: ["conservation", "logo"],
    showConsensus: true,
    showMinimap: true,
    showOnlyDifferences: false,       // draw residues equal to the consensus as "·"
    highlightPattern: "N[^P][ST]",    // highlight matches (substring, or regex with highlightUseRegex)
    highlightUseRegex: true,
    zoomAxes: "columns",              // Ctrl-scroll zooms along the sequence only
  }}
/>

Colour styles

Group	Styles
Nucleotide	DNA, DNA ClustalX
Protein	AA ClustalX, AA Zappo, AA Taylor
Analysis	Conserved, Variable, Parsimony Informative, % Conserved (with conservationThreshold)
Quality	Column score, Cell score — your own 0–1 scores

The analysis styles colour whole columns. The quality styles colour by scores you compute — TRIDENT, TCS, anything on a 0–1 scale — through options.columnScores (one per column) or options.cellScores ([row][column], in msa order):

<MultipleSequenceAlignment msa={msa} options={{ colorStyle: "Column score", columnScores: trident }} />

COLOR_STYLE_GROUPS lists them grouped, ready for a picker.

Tracks

Tracks sit below the alignment and share its horizontal pan and zoom. Clicking one selects columns.

options={{
  tracks: [
    "conservation",                                  // share of residues matching the consensus
    "logo",                                          // sequence logo
    { label: "TRIDENT", scores: trident },           // any per-column 0–1 score
  ],
}}

State

State	Shape	Changes when the user…
viewport	Viewport, in columns × rows	pans or zooms
selection	{ rows: string[]; columns: number[] }	drags, clicks labels or tracks, presses Esc
rowOrder	string[] of row ids	drags a label
panelSizes	{ labelWidth, trackHeight, minimapHeight }	drags a divider

Each has its default* / on*Change / *Store companions (Controllable state). Rows are identified by id when given, else by identifier — set id when identifiers can repeat, or to keep a row’s identity through renames.

rowOrder tolerates ids it doesn’t know and appends rows it doesn’t mention, so a tree’s leaf order can be passed straight in — see Linking views.

Editing

Pass onRenameRow, onRemoveRows and onRemoveColumns to enable double-click rename, the × button on labels, and Delete on a selection. The component reports; you apply — see Editing an alignment.

Note

A removal never covers every row or every column: at least one of each always remains.

Hover

onHoverChange reports the cell under the pointer — row, row id, label, column and residue — for a status bar of your own; options.showCursorBadge and options.showCursorTooltip turn off the built-in ones.

SimpleMultipleSequenceAlignment

The same view without the toolbar, and fully controlled — for building your own navigation around it. It keeps no state: every interaction reports through its on*Change callback and shows once you pass the value back (see Simple components).

const [viewport, setViewport] = useState<Viewport>();

<SimpleMultipleSequenceAlignment msa={msa} viewport={viewport} onViewportChange={setViewport} />

All props → · SimpleMultipleSequenceAlignment props →