FlowMiniMap
A scaled SVG overview of the graph with a draggable viewport rectangle.
Category: display · WCAG 2.1-AA · flow, minimap, overview, chrome
Props
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | FlowNode[] | — | The nodes to render. |
viewport | Viewport | — | The current pan/zoom viewport to reflect in the minimap. |
containerWidth | number | — | Width of the flow container, used to scale the minimap. |
containerHeight | number | — | Height of the flow container, used to scale the minimap. |
width | number | 200 | Width in px. |
height | number | 150 | Height in px. |
position | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | bottom-right | Position of the component. |
onViewportChange | (viewport: Viewport) => void | — | Called with the new viewport when the minimap is dragged. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-surface--cascivo-color-border-strong--cascivo-color-accent
When to use
- Orienting users in a large graph
- Letting users jump around by dragging the view rect
When not to use
- Tiny graphs that fit on screen
Examples
Graph overview
() => (
<FlowMiniMap
nodes={[
{ id: 'a', position: { x: 0, y: 0 } },
{ id: 'b', position: { x: 220, y: 120 } },
{ id: 'c', position: { x: 440, y: 0 } },
]}
viewport={{ x: 0, y: 0, zoom: 1 }}
containerWidth={400}
containerHeight={300}
/>
)Related components
- FlowControls — Complementary navigation chrome.