MinimapStrip
MinimapStrip shows where a viewport sits in a long document or log, with marks and fog over unloaded regions.
- encodes
- position (window + marks along the extent)
- precision
- high / low
- nodes
- ≤ 5
- collection
- Frontier
You are 300 lines into a 1,200-line log, three search hits sit elsewhere in it, and the tail hasn't loaded yet. MinimapStrip shows all three at once: a content thumbnail under a viewport window, a separate lane of annotation ticks, and hatched fog over any region you haven't loaded or crawled. Keeping position and annotations in two lanes keeps them as two reads instead of one muddle. Fog is a first-class state rather than a blank stretch that would read as empty content, and the unknown share is disclosed in the accessible name. The window maps linearly to the domain; there is no fisheye to distort where you are.
Install
import { MinimapStrip } from "@microcharts/react/minimap-strip";<MinimapStrip data={{ content: Array.from( { length: 1200 }, (_, i) => Math.abs(Math.sin(i / 40)) + Math.abs(Math.sin(i / 150)) * 0.6, ), window: [520, 660], marks: [100, 600, 1100], known: [[0, 1104]], }} title="Document position"/>Try it
- drag · click · ←/→…
Drag or click to move the viewport window; ←/→ nudge it (Shift for a bigger jump).
import { MinimapStrip } from "@microcharts/react/minimap-strip/interactive";import { useState } from "react";const [viewport, setViewport] = useState<[number, number]>([520, 660]);<MinimapStrip data={{ content, window: viewport, marks, known }} onWindowChange={setViewport}/>When to use it
Use it for document or log position and long-timeline navigation. For a single value use Progress; for exact content values use Sparkline.
Sizing
Variants
Edge cases
When known covers the whole domain, no fog renders at all.
Four homes
Scroll position in log — at line 660 of 1,200, dense middle section.
| error.log | 55% | |
| access.log | 12% | |
| audit.log | 88% |
Preview uses the public chart API only. When an interactive twin exists, it swaps in with the same props and no entrance motion - code samples stay on the static import. Placement recipes: Composition, Sizing.
Accessibility
The accessible name places you in the whole: "Viewing 12% of the whole (300–440 of 1,200); 2 marks." The interactive
entry is a slider. Drag or click to move the window, or nudge it with ←/→ (Shift for a bigger jump). On hover, focus, or
drag, the window's own edges float above it as a chip (400–500), the same range aria-valuetext reports, so a sighted
reader and a screen-reader reader get the same numbers. readout={false} drops the chip.
Props
| Prop | Type | Notes |
|---|---|---|
| data* | { content, window, marks?, known? } | Density series, viewport, ticks, covered regions. |
| mode | "bars" | "heat" | Heat is a calmer opacity strip. |
| markLane | boolean | Dedicated tick lane vs overlaying ticks. |
| onWindowChange | (window: [number, number]) => void | interactiveFires with the new `[start, end]` index range as the brush window is dragged. |
| animate | boolean | interactiveOpt-in entrance motion when the chart mounts client-side — add import "@microcharts/react/motion" once. Inert on the server, on hydrated server HTML, and under prefers-reduced-motion. |
Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.