GGenomics UI
Components/Viewers

Sequence Logo

@genomics/sequence-logo

Information-content logo over an alignment.

Preview

Sequence logo
10 sequences · 279 columns
max 4.32 bits
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.
Sample kinase domain
279 aa · 1–279
279 aa
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 same alignment data as the MSA viewer rendered as bits: each column's height is its information content, each residue scaled to its share. Letters are stretched to exact heights on canvas. Columns map to reference residues, so it stays linked.

Usage

import { SequenceLogo } from "@/components/ui/sequence-logo"

<SequenceLogo rows={rows} referenceId="ref" height={150} />
Registry dependencies
@genomics/utils
@genomics/bio-colors
@genomics/bio-sequence
@genomics/coordinate-link
Source: components/ui/sequence-logo.tsx