Residue Surface

The character-cell axis.

Preview

About

Nine viewers put one glyph per position along x, and they are not tracks. The x unit is a cell, not a coordinate: every position gets the same integer width and the glyph is drawn into that box, so a half-pixel disagreement between a letter and its background is visible — which is why CELL_W = 13 in one file and 11 in another meant two viewers of the same alignment couldn't be stacked. It wraps, making the layout two-dimensional over one-dimensional data. And its x axis *is* coordinate-link's reference residue, so linking is the geometry rather than a translation layer. Fourteen components already import useLinkedKeyNav; this is the surface that was missing under it.

Usage

import { ResidueSurface, useResidueSurface } from "@/components/ui/residue-surface"

const surface = useResidueSurface({
  count: sequence.seq.length,
  height: 320,
  wrap: "fit",
  layers: [{ name: "glyphs", draw: drawResidues, deps: [sequence, colorMode] }],
})

<ResidueSurface surface={surface} height={320} title={sequence.id} />