Matrix Surface

The rows × columns archetype.

Preview

About

Nine viewers are a matrix — heatmap, cluster heatmap, PAE, Hi-C, oncoprint, dot plot, sc-dotplot, plate map, the column half of the MSA — differing in what a cell is and almost nothing else. What they share is what was hardest to get right and therefore wrong in most of them: cell geometry (everyone wrote Math.floor((my − PAD_T) / cellH), padding inlined and out-of-bounds forgotten, so the top row lit up whenever the pointer crossed the margin), label thinning (a 20,000-gene heatmap that tries to draw 20,000 labels paints a smear), and the browser's canvas-size cap, past which a data-sized matrix silently renders nothing at all.

Usage

import { MatrixSurface, useMatrixSurface } from "@/components/ui/matrix-surface"

const surface = useMatrixSurface({
  rows: genes,
  columns: samples,
  height: genes.length * 22,
  cellColor: (gene, sample) => scale(valueAt(gene, sample)),
  highlightRow: activeGene,
  deps: [values],
})

<MatrixSurface surface={surface} interaction={{ ...hit.pointerProps }} />