GGenomics UI
Components/Foundation

Coordinate Link

@genomics/coordinate-link

The shared selection substrate.

Preview

Jump to residue:0 residues selected
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.
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.

Hover or drag-select in either view — the sequence and the alignment share one reference-residue coordinate, so the highlight follows across both. The jump buttons broadcast a focus request that scrolls each viewer to the residue.

About

Gives every viewer one common space — a 1-based reference-residue integer — so a residue is the same entity across the sequence, alignment, structure, PAE plot, and variant table. Each viewer converts native → reference when it broadcasts and reference → native when it paints incoming highlights. Wrap linked viewers in a single LinkedSelectionProvider; useLinkedSelection() also works standalone (inert) so a viewer never crashes unlinked.

Usage

import {
  LinkedSelectionProvider,
  useLinkedSelection,
} from "@/components/ui/coordinate-link"

<LinkedSelectionProvider onSelectionChange={(s) => console.log([...s])}>
  <SequenceViewer sequence={seq} />
  <MsaViewer rows={rows} referenceId="ref" />
</LinkedSelectionProvider>
Source: components/ui/coordinate-link.tsx