GGenomics UI
Components/Viewers

Sequence Viewer

@genomics/sequence-viewer

Virtualized DNA/RNA/protein, to megabase scale.

Preview

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

Renders to a single canvas that repaints on scroll, so only the visible rows are ever drawn. Residues wrap into rows; a fixed ruler marks intra-row columns and a scrolling gutter shows the absolute coordinate. Hover and drag-select broadcast through coordinate-link.

Usage

import { SequenceViewer } from "@/components/ui/sequence-viewer"

<SequenceViewer
  sequence={{ id: "p1", kind: "amino-acid", seq: "MGSSHHH..." }}
  height={280}
  colorMode="block"
/>
Registry dependencies
@genomics/utils
@genomics/bio-colors
@genomics/bio-sequence
@genomics/coordinate-link
Source: components/ui/sequence-viewer.tsx