Genomic Axis
Gene model on a genomic axis, linked to protein residues.
Preview
The top axis is genomic base pairs (three exons, indigo = CDS); the bottom is protein residues. Hover either — the pointer maps through the exon structure and reading frame via bio-coordinate, so a genomic position highlights its codon's residue and vice-versa.
About
The concrete payoff of bio-coordinate. The axis is genomic base pairs — exons, introns, variant ticks — but every hover and click is converted to a protein residue before broadcasting, so pointing at a genomic position lights up the matching residue in a linked sequence, structure, or alignment, and an incoming residue selection paints back onto the codon here. This is the cross-coordinate-space linking one shared integer can't do on its own: a variant at chr7:140753336 only becomes p.V600E after walking the exon structure and reading frame.
Usage
import { GenomicAxis } from "@/components/ui/genomic-axis"
<GenomicAxis model={geneModel} variants={variants} />components/ui/genomic-axis.tsx