All pan/zoom surfaces behave the same way:
| Gesture |
Effect |
| Scroll / two-finger swipe |
Pan (Shift+scroll pans sideways with a mouse wheel) |
| Ctrl/⌘ + scroll, or pinch |
Zoom around the pointer |
| Drag the background |
Pan |
| Toolbar buttons |
Pan by half a view, zoom in/out, reset |
Scrolling a component never scrolls the page underneath it.
| Gesture |
Effect |
| Alt + Ctrl/⌘ + scroll |
Zoom columns only (always, with zoomAxes: "columns") |
| Shift-drag / Ctrl/⌘-drag |
Add to / toggle the selection (columns or rows, per selectionAxis) |
Plain drag with interactionMode: "select" |
Replace the selection |
| Click a track |
Select that column (Shift extends, Ctrl/⌘ toggles) |
| Click a label |
Select that row (same modifiers) |
| Drag a label |
Reorder rows |
| Double-click a label, or its ✎ |
Rename (with onRenameRow) |
| × on a hovered label |
Remove the row (with onRemoveRows) |
| Delete / Backspace |
Remove the selected rows/columns (with the matching callbacks) |
| Esc |
Clear the selection |
| Minimap: click / drag the box / drag its edges |
Jump / pan / zoom |
| Drag a panel divider |
Resize labels, tracks or minimap |
Keyboard shortcuts apply once the alignment has focus (click it).
| Gesture |
Effect |
| Click a node marker |
onNodeClick if provided; otherwise, with interactive, collapse/expand |
| Click a branch |
onBranchClick (with the node below it) |
| Drag a node marker to another row |
Rotate nodes so its clade lands there (topology never changes) |
| Drag a node past the first or last row |
Reroot on it, with its clade at that end |
| Gesture |
Effect |
| Hover a cell |
Shows the pair and their distance |
| Drag a row name |
Reorder rows and columns together |
| Drag the label divider |
Resize the name column |