DistanceMatrix
import { DistanceMatrix } from "react-bio-viz";
<DistanceMatrix labels={ids} matrix={distances} width={900} height={500} />;labels identifies each row/column; matrix is the symmetric labels.length × labels.length
distances. Cells shade from white by distance relative to the largest one; the value is written in
once a cell is large enough. labelNames maps ids to display names. These are the fields of a
betula DistanceMatrix, so one spreads straight in:
<DistanceMatrix {...distances} />.
Only the visible cells are drawn, so a matrix of thousands of sequences stays responsive. Hover a cell, zoom with Ctrl/⌘-scroll, drag a name to reorder:
Options
Section titled “Options”| Option | Default | |
|---|---|---|
colorScheme |
"warm" |
"warm", "cool", "green" or "grayscale" |
showNumbers |
true |
write distances into cells that fit them |
cellWidth, cellHeight |
44, 22 |
cell size at the default zoom |
showLabels, showToolbar |
true |
viewport (in cells), rowOrder and panelSizes ({ labelWidth }), each with its
controllable-state companions. rowOrder has the same shape
as the alignment’s, so one store can order both — see Linking views.
onHoverChange reports the hovered pair and distance.
SimpleDistanceMatrix
Section titled “SimpleDistanceMatrix”The same view without the toolbar, and fully controlled — for building your own navigation around it. It
keeps no state: every interaction reports through its on*Change callback and shows once you pass
the value back (see Simple components).
const [viewport, setViewport] = useState<Viewport>();
<SimpleDistanceMatrix labels={labels} matrix={matrix} viewport={viewport} onViewportChange={setViewport} />