react-cheminfo 0.28.0 → 0.29.0

package/src/chart/ui/Axes.tsx

@@ -0,0 +1,361 @@
+import type { ReactElement } from 'react';
+import { useMemo } from 'react';
+
+import { axisLabeller } from '../core/axisLabels.ts';
+import type { ChartAxisScale } from '../core/chartAxisScale.ts';
+import { chartAxisScale } from '../core/chartAxisScale.ts';
+import type { PlotRect } from '../core/chartGeometry.ts';
+import type { ChartScale } from '../core/chartScale.ts';
+import { chartPixel } from '../core/chartScale.ts';
+import { CHART_COLORS, CHART_FONT } from '../core/chartTheme.ts';
+
+export interface AxesProps {
+  /** Where the plot sits inside the SVG. */
+  plot: PlotRect;
+  /** The window on screen, which the ticks along the bottom are chosen for. */
+  xDomain: readonly [number, number];
+  /** The window on screen, which the ticks up the side are chosen for. */
+  yDomain: readonly [number, number];
+  /**
+   * The horizontal axis as it is currently zoomed. A scale built onto a
+   * reversed pixel range is drawn reversed with no further ceremony, which is
+   * what an infrared spectrum running from 4000 down to 400 needs.
+   */
+  xScale: ChartScale;
+  /** The vertical axis as it is currently zoomed. */
+  yScale: ChartScale;
+  /**
+   * Whether the vertical labels are written by magnitude, so the half below
+   * the rule reads `100 50 0 50 100` rather than `-100 -50 0 50 100`. What the
+   * lower half of a mirrored pair means is a second spectrum drawn downwards,
+   * never a negative value, and a minus sign in front of every one of its
+   * labels says otherwise.
+   * @default false
+   */
+  absYTicks?: boolean;
+  /**
+   * Whether the numbers along the bottom are written.
+   *
+   * Panes stacked over one window would each repeat `2.5 5.0 7.5` and spend a
+   * tick row of height on it, so only the pane at the foot writes them. The
+   * grid and the axis line stay — they are what a peak's height is read against.
+   * @default true
+   */
+  showXTicks?: boolean;
+  /**
+   * Whether the name of the horizontal axis is written under it.
+   *
+   * Separate from `showXTicks` because the two go at different moments — a pane
+   * above the foot of a stack keeps neither, a chart in a narrow panel keeps its
+   * numbers. `xTitle` stays required either way: which pane is the foot changes.
+   * @default true
+   */
+  showXTitle?: boolean;
+  /**
+   * What the horizontal axis is called — `m/z`, `wavenumber (cm⁻¹)`.
+   *
+   * Required rather than defaulted, because there is no name that is right for
+   * every spectrum and a default would be one viewer's units silently drawn
+   * under another's data.
+   */
+  xTitle: string;
+  /** What the vertical axis is called — `intensity`, `absorbance`, `%T`. */
+  yTitle: string;
+  /**
+   * How much room one label along the bottom is given, in pixels.
+   *
+   * The default is the width of the widest number a spectrum axis writes — a
+   * mass at four decimals — so that a chart in a narrow panel carries three
+   * labels rather than six run together. A chart whose numbers are known to be
+   * short says so and gets more of them: a fixed axis over a few hundred mass
+   * units writes `400 600 800`, and at the default spacing a column that narrow
+   * is given a single tick, which says nothing about the range at all.
+   * @default 90
+   */
+  xTickSpacing?: number;
+  /**
+   * How much room one label up the side is given, in pixels.
+   * @default 44
+   */
+  yTickSpacing?: number;
+}
+
+/**
+ * The frame the spectra are read against: two axis lines, a grid, and titles.
+ *
+ * The ticks are rules across the whole plot rather than dashes at its edge. A
+ * feature is read for its height against the ones around it — is this the base
+ * peak, is that band half of it — and a dash on the far left is a measuring
+ * stick nobody can lay across the peak they are looking at. The rules
+ * are drawn in the palest colour the theme carries and under the data band, so
+ * a grid line is never mistaken for a trace.
+ *
+ * Every number is written outside the plot, and every line inside it. That is
+ * what lets the data band be clipped without a label being cut in half, and it
+ * keeps the plot itself free for the only thing it is about.
+ *
+ * The axis pair is one L rather than a box: the top and the right of a spectrum
+ * are open, because a peak that runs out of the top is a peak the zoom has cut
+ * off, and a rule along the top would read as a ceiling the measurement stopped
+ * at.
+ *
+ * How many ticks there are follows the room there is for them — a chart in a
+ * narrow panel is given fewer, rather than the same six labels overprinting one
+ * another — and the precision each is written to comes from the step, so a
+ * window two millimass units wide is labelled to four decimals and a full scan
+ * to none. The notation is settled once per axis rather than per label, so an
+ * intensity axis running to two hundred million reads `5e+7 1e+8 1.5e+8 2e+8`
+ * and not a column of nine digits the title has to be read around.
+ * @param props - Component props.
+ * @returns The axes, as SVG.
+ */
+export function Axes(props: AxesProps): ReactElement {
+  const {
+    plot,
+    xDomain,
+    yDomain,
+    xScale,
+    yScale,
+    absYTicks = false,
+    showXTicks = true,
+    showXTitle = true,
+    xTitle,
+    yTitle,
+    xTickSpacing = X_TICK_SPACING,
+    yTickSpacing = Y_TICK_SPACING,
+  } = props;
+
+  const xTicks = useMemo(
+    () => spectrumAxis(xDomain, tickCount(plot.width, xTickSpacing)),
+    [xDomain, plot.width, xTickSpacing],
+  );
+  const yTicks = useMemo(
+    () => spectrumAxis(yDomain, tickCount(plot.height, yTickSpacing)),
+    [yDomain, plot.height, yTickSpacing],
+  );
+  const writeXTick = useMemo(() => axisLabeller(xTicks), [xTicks]);
+  const writeYTick = useMemo(() => axisLabeller(yTicks), [yTicks]);
+
+  const middleX = plot.left + plot.width / 2;
+  const middleY = plot.top + plot.height / 2;
+  // Beside the numbers rather than in a fixed column at the edge of the margin.
+  // One gutter holds `100` on a spectrum and `1.5e+8` on a chromatogram, and a
+  // title pinned where the wider of the two would leave it stands twenty pixels
+  // clear of the narrower — far enough to read as naming the chart rather than
+  // the axis.
+  const titleColumn = useMemo(
+    () => valueTitleColumn(yTicks.values, writeYTick, absYTicks, plot.left),
+    [yTicks, writeYTick, absYTicks, plot.left],
+  );
+  // The rule a mirrored pair is reflected in only exists while both halves are
+  // on screen; on an ordinary chart zero is the baseline and already drawn.
+  const zero = chartPixel(yScale, 0);
+  const showsZeroRule = yDomain[0] < 0 && yDomain[1] > 0;
+
+  return (
+    <g pointerEvents="none">
+      {xTicks.values.map((tick) => (
+        <line
+          key={tick}
+          x1={chartPixel(xScale, tick)}
+          y1={plot.top}
+          x2={chartPixel(xScale, tick)}
+          y2={plot.bottom}
+          style={gridStyle}
+        />
+      ))}
+      {yTicks.values.map((tick) => (
+        <line
+          key={tick}
+          x1={plot.left}
+          y1={chartPixel(yScale, tick)}
+          x2={plot.right}
+          y2={chartPixel(yScale, tick)}
+          style={gridStyle}
+        />
+      ))}
+      {showsZeroRule ? (
+        <line
+          x1={plot.left}
+          y1={zero}
+          x2={plot.right}
+          y2={zero}
+          style={zeroRuleStyle}
+        />
+      ) : null}
+      <path
+        d={`M${plot.left} ${plot.top}V${plot.bottom}H${plot.right}`}
+        fill="none"
+        style={axisStyle}
+      />
+      {showXTicks &&
+        xTicks.values.map((tick) => (
+          <text
+            key={tick}
+            x={chartPixel(xScale, tick)}
+            y={plot.bottom + TICK_LABEL_GAP}
+            textAnchor="middle"
+            dominantBaseline="hanging"
+            style={tickStyle}
+          >
+            {writeXTick(tick)}
+          </text>
+        ))}
+      {yTicks.values.map((tick) => (
+        <text
+          key={tick}
+          x={plot.left - TICK_LABEL_GAP}
+          y={chartPixel(yScale, tick)}
+          textAnchor="end"
+          dominantBaseline="central"
+          style={tickStyle}
+        >
+          {writeYTick(absYTicks ? Math.abs(tick) : tick)}
+        </text>
+      ))}
+      {showXTitle && (
+        <text
+          x={middleX}
+          y={plot.bottom + TITLE_GAP}
+          textAnchor="middle"
+          dominantBaseline="hanging"
+          style={titleStyle}
+        >
+          {xTitle}
+        </text>
+      )}
+      <text
+        x={titleColumn}
+        y={middleY}
+        transform={`rotate(-90 ${titleColumn} ${middleY})`}
+        textAnchor="middle"
+        dominantBaseline="central"
+        style={titleStyle}
+      >
+        {yTitle}
+      </text>
+    </g>
+  );
+}
+
+/**
+ * The ticks of one axis of a chart a reader has zoomed for themselves.
+ *
+ * The window is exactly what the reader dragged out, so it is never widened to
+ * end on a round tick — an axis that jumped outward as the drag was released
+ * would show data the reader had just excluded. And the count is a budget
+ * worked out from the room the panel has, so the step is rounded up rather than
+ * to the nearest: one tick more than the room allows is two labels touching.
+ * @param domain - The window on screen, `[from, to]`.
+ * @param count - The most intervals the axis has room for.
+ * @returns The axis, divided.
+ */
+function spectrumAxis(
+  domain: readonly [number, number],
+  count: number,
+): ChartAxisScale {
+  return chartAxisScale(domain[0], domain[1], {
+    count,
+    nice: false,
+    step: 'atMost',
+  });
+}
+
+/**
+ * How many intervals an axis of a given length has room to name.
+ *
+ * A label at a deep zoom is eight characters wide, so the spacings are the width
+ * of a label and not a fraction of the axis: a chart in a side panel then
+ * carries three labels rather than the same six run together.
+ * @param length - How long the axis is, in pixels.
+ * @param spacing - The room one label wants along it.
+ * @returns The number of intervals to aim for, never below two.
+ */
+function tickCount(length: number, spacing: number): number {
+  return Math.max(2, Math.round(length / spacing));
+}
+
+/**
+ * Where the rotated value title stands, given the numbers it has to clear.
+ *
+ * The widest label is measured in characters rather than in pixels, because the
+ * chart has no font to measure against — `CHART_FONT` sets sizes and leaves the
+ * family to the host — and a rendered measurement would mean laying the text out
+ * and reading it back on every zoom.
+ * @param ticks - The ticks up the side, as `chartAxisScale` chose them.
+ * @param write - How this axis writes one of them.
+ * @param absolute - Whether the labels are written by magnitude, which is one
+ * character narrower on the half of a mirrored chart that runs negative.
+ * @param left - Where the plot begins, which is the far side of the gutter.
+ * @returns The column to centre the title on, never left of `TITLE_COLUMN`.
+ */
+function valueTitleColumn(
+  ticks: readonly number[],
+  write: (value: number) => string,
+  absolute: boolean,
+  left: number,
+): number {
+  let widest = 0;
+  for (const tick of ticks) {
+    const width = write(absolute ? Math.abs(tick) : tick).length;
+    if (width > widest) widest = width;
+  }
+  const beside =
+    left - TICK_LABEL_GAP - widest * TICK_CHARACTER - TITLE_ASIDE - HALF_TITLE;
+  return Math.max(TITLE_COLUMN, beside);
+}
+
+/** Half the height of the title, which is what its rotated glyphs claim. */
+const HALF_TITLE = CHART_FONT.title / 2;
+
+/** The room a label wants along the bottom, at its widest. */
+const X_TICK_SPACING = 90;
+
+/** The room a label wants up the side. */
+const Y_TICK_SPACING = 44;
+
+/** The clear space between the plot and the numbers written outside it. */
+const TICK_LABEL_GAP = 5;
+
+/** How far under the plot the horizontal title hangs, clear of the numbers. */
+const TITLE_GAP = 18;
+
+/**
+ * The column the rotated value title stands in when the numbers leave it no
+ * room, inside the left margin.
+ *
+ * A floor rather than the place it is written: `valueTitleColumn` puts the
+ * title beside the widest number instead, and this is where an axis whose
+ * labels fill the whole gutter pushes it back to.
+ */
+const TITLE_COLUMN = 8;
+
+/** The clear space between the widest number up the side and the title. */
+const TITLE_ASIDE = 4;
+
+/**
+ * How wide one character of a tick label is, at the size the ticks are written.
+ *
+ * Six tenths of the type size, which is a shade wider than a digit is in any of
+ * the sans faces a host is likely to be set in — the chart sets no family of its
+ * own, so this is an estimate and is deliberately the generous one. Too wide
+ * writes the value title a pixel or two further from the numbers than it had to
+ * be; too narrow writes it over them.
+ */
+const TICK_CHARACTER = 0.6 * CHART_FONT.tick;
+
+const gridStyle = { stroke: CHART_COLORS.grid } as const;
+
+const zeroRuleStyle = { stroke: CHART_COLORS.zeroRule } as const;
+
+const axisStyle = { stroke: CHART_COLORS.axis } as const;
+
+const tickStyle = {
+  fill: CHART_COLORS.tick,
+  fontSize: CHART_FONT.tick,
+} as const;
+
+const titleStyle = {
+  fill: CHART_COLORS.title,
+  fontSize: CHART_FONT.title,
+} as const;

package/src/chart/ui/AxisGuide.tsx

@@ -0,0 +1,187 @@
+import type { ReactElement } from 'react';
+import { useMemo } from 'react';
+
+import type { PlotRect } from '../core/chartGeometry.ts';
+import type { ChartScale } from '../core/chartScale.ts';
+import { CHART_COLORS, CHART_FONT, LABEL_HALO } from '../core/chartTheme.ts';
+import type { GuidePlacement } from '../core/guidePlacement.ts';
+import { guidePlacement } from '../core/guidePlacement.ts';
+
+/** What the rule is drawn at, and what it says about itself. */
+export interface AxisGuideProps {
+  /**
+   * The place on the horizontal axis being pointed at, in whatever that axis
+   * measures, and `null` when nothing is being looked at.
+   */
+  value: number | null;
+  /** Where the plot sits inside the SVG. */
+  plot: PlotRect;
+  /** The horizontal axis as it is currently zoomed. */
+  xScale: ChartScale;
+  /**
+   * What the guide is drawn in.
+   * @default the theme's highlight colour
+   */
+  color?: string;
+  /**
+   * A few words written beside the rule, for a chart carrying more than one of
+   * them — `MS2 456.7`, `scan 314`. Nothing is written when it is absent, which
+   * is right for a chart whose single guide answers a hover the reader is
+   * already making.
+   * @default nothing is written
+   */
+  label?: string;
+}
+
+/**
+ * The vertical rule marking the place on the horizontal axis being looked at.
+ *
+ * A peak hovered in a table, a fragment hovered on a structure beside the chart,
+ * a search result rested on, the retention time whose scan is drawn in the pane
+ * below: each of them asks the chart the same question, and this is its whole
+ * answer. It sits below the viewers rather than inside one of them because a
+ * mass viewer's precursor rule and a chromatogram's time cursor are not two
+ * pictures that resemble each other — they are one picture, drawn from a value
+ * and a scale, and neither half of it can tell what it is measuring.
+ *
+ * When the value is inside the window the rule stands on it, solid. When it is
+ * not, the rule is parked on the edge the value went out of, dashed, and
+ * carries an arrow pointing that way. That is the case the component exists
+ * for: a chart zoomed onto one isotopologue cluster has almost everything a
+ * panel can point at outside its window, and answering with nothing drawn
+ * leaves a fragment the spectrum does not carry looking exactly like one that
+ * is two hundred mass units to the left. Dashed says *not here*, and the arrow
+ * says where to go.
+ *
+ * The arrow is a triangle rather than a `◀` glyph, because whether that
+ * character has one is the host's font's business and a missing one draws a
+ * hollow box in the middle of the chart. It sits just under the top edge, the
+ * strip of the plot a trace is least often in.
+ *
+ * Nothing here takes a pointer event: the guide is an answer, never a target.
+ * @param props - Component props.
+ * @returns The guide, or nothing when there is no value to point at and when
+ * the scale maps it nowhere.
+ */
+export function AxisGuide(props: AxisGuideProps): ReactElement | null {
+  const { value, plot, xScale, color = CHART_COLORS.highlight, label } = props;
+
+  const placement = value === null ? null : guidePlacement(value, plot, xScale);
+  const lineStyle = useMemo(() => ({ stroke: color }), [color]);
+  const arrowStyle = useMemo(() => ({ fill: color }), [color]);
+  const labelStyle = useMemo(
+    () => ({ fill: color, fontSize: CHART_FONT.label, ...LABEL_HALO }),
+    [color],
+  );
+
+  if (placement === null) return null;
+  const { x, direction } = placement;
+  const labelPlace = labelPlacement(placement, plot);
+
+  return (
+    <g pointerEvents="none">
+      <line
+        x1={x}
+        y1={plot.top}
+        x2={x}
+        y2={plot.bottom}
+        strokeWidth={GUIDE_WIDTH}
+        strokeDasharray={direction === null ? undefined : PARKED_DASH}
+        style={lineStyle}
+      />
+      {direction === null ? null : (
+        <path d={arrowPath({ x, direction }, plot)} style={arrowStyle} />
+      )}
+      {label === undefined ? null : (
+        <text
+          x={labelPlace.x}
+          y={plot.top + ARROW_TOP_INSET}
+          textAnchor={labelPlace.anchor}
+          dominantBaseline="central"
+          style={labelStyle}
+        >
+          {label}
+        </text>
+      )}
+    </g>
+  );
+}
+
+/** How thick the rule is: thin enough to read a peak beside, not through. */
+const GUIDE_WIDTH = 1.5;
+
+/** What a parked guide is dashed with. */
+const PARKED_DASH = '4 3';
+
+/** How far the arrow reaches back into the plot from its point. */
+const ARROW_LENGTH = 7;
+
+/** Half the width of its base. */
+const ARROW_HALF_HEIGHT = 5;
+
+/** How far below the top of the plot it sits. */
+const ARROW_TOP_INSET = 8;
+
+/** The clear space between the rule, or its arrow, and the label beside it. */
+const LABEL_GAP = 4;
+
+/**
+ * How much room a label is assumed to want.
+ *
+ * Measuring the text would mean rendering it first, which is a whole layout
+ * pass for a decision that only has to be right at the edges. Sixty pixels is
+ * about eight characters at the label size — `MS2 456.7` — and a label longer
+ * than that is one written for a panel rather than for a plot.
+ */
+const LABEL_ROOM = 60;
+
+/**
+ * The triangle a parked guide carries, pointing off the edge it is parked on.
+ *
+ * Only a parked guide has one, and the parameter says so rather than a guard
+ * inside: a guide standing on its own value has no edge to point at, and the
+ * caller has already told the two apart to decide whether to draw a path at all.
+ * @param placement - Where the guide is parked, and which edge its value lies past.
+ * @param plot - The plotting area, whose top the arrow hangs under.
+ * @returns The `d` of the triangle.
+ */
+function arrowPath(
+  placement: GuidePlacement & { direction: 'left' | 'right' },
+  plot: PlotRect,
+): string {
+  const { x, direction } = placement;
+  const back = direction === 'left' ? x + ARROW_LENGTH : x - ARROW_LENGTH;
+  const y = plot.top + ARROW_TOP_INSET;
+  return `M${x} ${y}L${back} ${y - ARROW_HALF_HEIGHT}L${back} ${y + ARROW_HALF_HEIGHT}Z`;
+}
+
+/**
+ * Which side of the rule the label is written on.
+ *
+ * It runs to the right and flips to the left as soon as it would otherwise
+ * cross the right edge — flipping rather than sliding, for the reason the
+ * pointer readout flips: a label pinned to the edge drifts away from the rule
+ * it belongs to and the pair stops reading as one thing. A guide parked on an
+ * edge has only one side that is inside the plot at all, so there the flip is
+ * forced, and the gap clears the arrow rather than the rule.
+ * @param placement - Where the guide ended up, and which way its value lies.
+ * @param plot - The plotting area the label has to stay inside.
+ * @returns The anchor, and which way the text runs from it.
+ */
+function labelPlacement(
+  placement: GuidePlacement,
+  plot: PlotRect,
+): { x: number; anchor: 'start' | 'end' } {
+  const { x, direction } = placement;
+  if (direction === 'left') {
+    return { x: x + ARROW_LENGTH + LABEL_GAP, anchor: 'start' };
+  }
+  if (direction === 'right') {
+    return { x: x - ARROW_LENGTH - LABEL_GAP, anchor: 'end' };
+  }
+  const runsRight = x + LABEL_GAP + LABEL_ROOM <= plot.right;
+  return {
+    x: runsRight ? x + LABEL_GAP : x - LABEL_GAP,
+    anchor: runsRight ? 'start' : 'end',
+  };
+}

package/src/chart/ui/ChartStack.tsx

@@ -0,0 +1,130 @@
+/**
+ * Charts stacked one above another, each resized by the splitter under it.
+ *
+ * One measurement is often read on more than one chart at once — the separation
+ * a sample was run through, the spectrum taken where the cursor stands, and what
+ * that spectrum broke into — and those are windows over different axes rather
+ * than traces on one. Stacking them is layout and nothing else, which is the
+ * whole of what this component knows: N panes, one above another, sharing the
+ * gutter their value axes are drawn in, the one at the foot writing the
+ * horizontal axis under all of them. Which pane holds what, and what makes one
+ * appear at all, is a fact about the measurement and stays in the viewer.
+ *
+ * How N panes become N nested splits is in `chartStackLevel.tsx`; what is held
+ * here is the one thing that outlives a render, which is how tall each of them
+ * was last left.
+ *
+ * Two things `SplitPane` does not do, and both of them draw a plausible wrong
+ * picture rather than failing outright:
+ *
+ * - **It has no minimum.** `useSplitPaneSize` clamps a drag to
+ *   `{ min: 0, max: parentDimension }`, so a splitter dragged to the top of the
+ *   stack leaves the pane above it at nothing at all; `plotRect` then holds the
+ *   plot at `MINIMUM_PLOT_SIDE` and what is left is a ten-pixel stub with a full
+ *   set of axes over it. Every height is held above the pane's own minimum —
+ *   the default it starts at as much as the one a drag arrives at — because
+ *   nothing underneath will do it.
+ * - **Its controlled side gets no `min-height: 0`.** `getItemStyle` resets that
+ *   on the *other* side only, and a chart is an `<svg>` carrying a real `height`
+ *   attribute, so the controlled pane's min-content height is whatever the
+ *   chart was last measured at: the pane grows and then refuses to shrink back.
+ *   Every pane is wrapped in a box that carries the reset itself.
+ *
+ * A pane keeps its children mounted whether it is open or shut — `unmountChildren`
+ * stays false — so a closed pane measures 0 × 0 behind a `display: none`, its
+ * `ResizeObserver` fires again the moment it is revealed, and it comes back
+ * through the window it was being looked at through. A remounted chart is empty.
+ */
+
+import type { ReactElement } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import type { SplitPaneSize } from 'react-science/ui';
+
+import type { ChartStackPane, StackLevel } from './chartStackLevel.tsx';
+import { keptHeight, paneHeight, stackFrom } from './chartStackLevel.tsx';
+
+export type { ChartStackPane } from './chartStackLevel.tsx';
+
+/** What the stack is drawn from. */
+export interface ChartStackProps {
+  /**
+   * The panes, in the order they are stacked, top to bottom.
+   *
+   * A pane with nothing to draw is left out of this array rather than handed in
+   * empty — that is what makes its splitter go away with it. Appending a pane,
+   * and dropping the one at the foot, cost nothing: every pane is a split
+   * whether or not anything follows it, so no chart already stacked is stood up
+   * again. Taking one out of the *middle* still is expensive — every split
+   * below it takes on the identity of the one that was under it, and the charts
+   * in them are all remounted, coming back fitted to what they draw rather than
+   * through the window they were left at. So a pane is still better dropped
+   * from the foot of the stack than out of its middle.
+   */
+  panes: readonly ChartStackPane[];
+  /**
+   * Told when a splitter is let go, with the height the pane came to rest at.
+   *
+   * On release rather than on every pixel of the drag, because a viewer that
+   * hears this puts it in its own state, and a store per pointer move renders
+   * every pane of the stack again on each one. The height reported is the one
+   * that was kept, minimum already applied.
+   * @default the height is remembered inside the stack and nowhere else
+   * @param id - Which pane was resized.
+   * @param height - How tall it now stands, in pixels.
+   */
+  onHeightChange?: (id: string, height: number) => void;
+}
+
+/**
+ * Stack charts vertically, with a splitter between each pair.
+ *
+ * Everything a level of the nesting is handed is memoised, and for the reason
+ * the release is told apart from the drag: `resize` fires on every pointer move,
+ * and a `StackLevel` rebuilt there would recurse through every `SplitPane` of
+ * the stack on each one, taking every chart in it with them.
+ * @param props - Component props.
+ * @returns The stack, filling the box it is given.
+ */
+export function ChartStack(props: ChartStackProps): ReactElement {
+  const { panes, onHeightChange } = props;
+  const [heights, setHeights] = useState<Readonly<Record<string, number>>>({});
+
+  const heightOf = useCallback(
+    (pane: ChartStackPane) => paneHeight(pane, heights[pane.id]),
+    [heights],
+  );
+
+  const resize = useCallback((pane: ChartStackPane, asked: SplitPaneSize) => {
+    const height = keptHeight(asked, pane);
+    if (height === null) return;
+    setHeights((current) =>
+      current[pane.id] === height ? current : { ...current, [pane.id]: height },
+    );
+  }, []);
+
+  const rest = useCallback(
+    (pane: ChartStackPane, asked: SplitPaneSize) => {
+      const height = keptHeight(asked, pane);
+      if (height !== null) onHeightChange?.(pane.id, height);
+    },
+    [onHeightChange],
+  );
+
+  const level = useMemo<StackLevel>(
+    () => ({ panes, heightOf, resize, rest }),
+    [panes, heightOf, resize, rest],
+  );
+
+  return <div style={stackStyle}>{stackFrom(level, 0)}</div>;
+}
+
+/** The box the whole stack fills, whatever it was given by way of a parent. */
+const stackStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  height: '100%',
+  minWidth: 0,
+  minHeight: 0,
+  overflow: 'hidden',
+} as const;