react-cheminfo 0.28.0 → 0.30.0

package/src/chart/core/boxLayout.ts

@@ -0,0 +1,126 @@
+/**
+ * Keeping the labels above the peaks apart from one another.
+ *
+ * An annotated spectrum wants a box over every peak it explains, and an
+ * isotopologue cluster puts four of them within a few pixels. Sliding them
+ * apart is most of the job, and the leader line back to the stick is what says
+ * which peak a box belongs to — so a box a little out of place is still
+ * readable.
+ *
+ * A box slid *far* out of place is not. Spacing a crowd out marches the last of
+ * them across the whole plot, where it comes to rest over peaks it says nothing
+ * about, with a leader long enough to be read as pointing at one of them. Those
+ * are dropped, and only those: a mark still sits on every annotated peak, so
+ * the fragment is not one the chemist concludes the spectrum lacks — it is one
+ * whose picture is a zoom away.
+ */
+
+import type { NumberArray } from 'cheminfo-types';
+
+/**
+ * Slide overlapping boxes apart, keeping every one of them inside the plot.
+ *
+ * Two sweeps, and the order of the clamps is the whole behaviour. The first
+ * sweep runs left to right and pushes each box far enough past its neighbour to
+ * clear it, which piles the crowding up against the right edge; the second runs
+ * back the other way, pulling that pile inside the right bound and spacing it
+ * out leftwards again.
+ *
+ * The left bound is then applied last, after the spacing, and so beats it. A
+ * cluster too wide for the room it is in therefore ends with its leftmost boxes
+ * overlapping rather than with one of them hanging off the plot — an overlap is
+ * two labels a reader can still pick apart with the leader lines, while a box
+ * outside the plot is clipped away and reads as an annotation that was never
+ * made.
+ * @param centres - Where each box would like to be centred, in pixels; any
+ * order, and the result comes back in that same order.
+ * @param bounds - `[from, to]` in pixels that no box may extend beyond.
+ * @param width - How wide every box is.
+ * @param gap - The clear space wanted between two neighbouring boxes.
+ * @param maximumDrift - How far a box may be slid from where it wanted to be
+ * before it is dropped instead, in pixels. Defaults to two whole box steps.
+ * @returns The centre each box was actually given, `NaN` for one that was slid
+ * too far and dropped.
+ */
+export function layoutAnnotationBoxes(
+  centres: NumberArray,
+  bounds: readonly [number, number],
+  width: number,
+  gap: number,
+  maximumDrift = (width + gap) * MAXIMUM_DRIFT_STEPS,
+): Float64Array {
+  const count = centres.length;
+  const placed = new Float64Array(count);
+  if (count === 0) return placed;
+
+  const half = width / 2;
+  const minimumCentre = bounds[0] + half;
+  const maximumCentre = bounds[1] - half;
+  const step = width + gap;
+  const order = ascendingOrder(centres);
+
+  let previous = Number.NEGATIVE_INFINITY;
+  for (let position = 0; position < count; position++) {
+    const index = order[position] as number;
+    let centre = Math.min(
+      Math.max(centres[index] as number, minimumCentre),
+      maximumCentre,
+    );
+    if (centre < previous + step) centre = previous + step;
+    placed[index] = centre;
+    previous = centre;
+  }
+
+  let next = Number.POSITIVE_INFINITY;
+  for (let position = count - 1; position >= 0; position--) {
+    const index = order[position] as number;
+    let centre = placed[index] as number;
+    if (centre > maximumCentre) centre = maximumCentre;
+    if (centre > next - step) centre = next - step;
+    if (centre < minimumCentre) centre = minimumCentre;
+    placed[index] = centre;
+    next = centre;
+  }
+
+  // A picture that has been slid too far from the peak it explains is worse
+  // than no picture: it hangs over a peak it says nothing about, and the leader
+  // back to its own is long enough to be read as pointing at something else.
+  // Those are dropped rather than drawn, and the mark on the peak still says
+  // the annotation is there.
+  for (let index = 0; index < count; index++) {
+    const wanted = centres[index] as number;
+    if (Math.abs((placed[index] as number) - wanted) > maximumDrift) {
+      placed[index] = Number.NaN;
+    }
+  }
+  return placed;
+}
+
+/**
+ * How far a picture may be slid from its peak, counted in whole box steps.
+ *
+ * Two: a box may be pushed past two neighbours and still be read as belonging
+ * to the peak under it, which is what a cluster of three peaks needs. Past that
+ * the leader is longer than the box is wide and reaches across other peaks, so
+ * the picture reads as answering for one of them instead.
+ */
+export const MAXIMUM_DRIFT_STEPS = 2;
+
+/**
+ * The indices of the boxes, ordered by where they want to be.
+ *
+ * The sweeps only make sense left to right, and the caller's order is whatever
+ * the annotations came in — usually by mass, but a second producer's marks are
+ * appended rather than merged.
+ * @param centres - Where each box would like to be centred.
+ * @returns The indices, ascending by centre.
+ */
+function ascendingOrder(centres: NumberArray): Uint32Array {
+  const order = new Uint32Array(centres.length);
+  for (let index = 0; index < centres.length; index++) {
+    order[index] = index;
+  }
+  return order.toSorted(
+    (first, second) => (centres[first] as number) - (centres[second] as number),
+  );
+}

package/src/chart/core/chartAxisScale.ts

@@ -12,6 +12,15 @@ const COMFORTABLE_LABEL = 6;
 const STEP_10 = Math.sqrt(50);
 const STEP_5 = Math.sqrt(10);
 const STEP_2 = Math.SQRT2;
+/**
+ * How far a fraction may sit above 1, 2 or 5 and still count as being on it.
+ *
+ * `span / count` is computed in floating point, so a window that ought to give
+ * a step of exactly one lands a hair above it — `1.0000000000000002` — and an
+ * exact comparison would take the next step up and halve the number of ticks
+ * for no visible reason.
+ */
+const STEP_EPSILON = 1e-9;
 
 /** A niced axis: its domain, its ticks, and the labels they are written with. */
 export interface ChartAxisScale {
@@ -29,6 +38,22 @@ export interface ChartAxisScale {
   readonly labels: readonly string[];
 }
 
+/**
+ * How the step is chosen when an even division lands between two nice ones.
+ *
+ * - `nearest` — take whichever of 1, 2 or 5 the division is closest to, which
+ *   puts the tick count near what was asked for from either side.
+ * - `atMost` — always take the larger, so the count asked for is a budget the
+ *   axis never exceeds.
+ *
+ * The difference is not cosmetic. A figure asking for about five ticks wants
+ * them spaced as evenly as the numbers allow, and one either way costs it
+ * nothing. An axis in a two-hundred-pixel panel has worked its count out from
+ * the room it has and the width of a label, so one tick more than it asked for
+ * is two labels touching.
+ */
+export type ChartAxisStep = 'nearest' | 'atMost';
+
 /** How an axis is divided. */
 export interface ChartAxisScaleOptions {
   /**
@@ -39,10 +64,15 @@ export interface ChartAxisScaleOptions {
   /**
    * Whether to widen the domain outward to whole steps, so the axis ends on a
    * labelled tick. Turn it off when the domain is already exact — a share that
-   * must end at 100%.
+   * must end at 100%, or a window a reader dragged out for themselves.
    * @default true
    */
   nice?: boolean;
+  /**
+   * How the step is chosen. See {@link ChartAxisStep}.
+   * @default 'nearest'
+   */
+  step?: ChartAxisStep;
 }
 
 /**
@@ -68,11 +98,34 @@ export function chartAxisScale(
   max: number,
   options: ChartAxisScaleOptions = {},
 ): ChartAxisScale {
-  const { count = DEFAULT_COUNT, nice = true } = options;
+  const { count = DEFAULT_COUNT, nice = true, step: rounding } = options;
   const wanted = tickCount(count);
+  // A window of one point is not a window: there is no step to read a
+  // precision off, so the single label is written at the precision its own
+  // magnitude asks for. Only when the domain is taken as given — a domain that
+  // is to be niced is opened instead, so that a constant column still draws an
+  // axis to stand on.
+  if (!nice && min === max && Number.isFinite(min)) {
+    const decimals = chartTickDecimals(Math.abs(min));
+    return {
+      domain: [min, min],
+      values: [min],
+      step: 0,
+      decimals,
+      exponent: 0,
+      labels: [chartTickLabel(min, decimals)],
+    };
+  }
   const opened = openDomain(min, max);
-  const domain = nice ? chartNiceDomain(opened[0], opened[1], wanted) : opened;
-  const [first, last, increment] = tickSpec(domain[0], domain[1], wanted);
+  const domain = nice
+    ? chartNiceDomain(opened[0], opened[1], wanted, rounding)
+    : opened;
+  const [first, last, increment] = tickSpec(
+    domain[0],
+    domain[1],
+    wanted,
+    rounding,
+  );
   const spacing = increment < 0 ? -1 / increment : increment;
   const step = Number.isFinite(spacing) && spacing > 0 ? spacing : 0;
   const values = step === 0 ? [] : tickValues(first, last, increment);
@@ -93,18 +146,20 @@ export function chartAxisScale(
  * @param min - One end, in either order.
  * @param max - The other end.
  * @param count - Roughly how many ticks the domain will carry. Defaults to `5`.
+ * @param rounding - How the step is chosen. See {@link ChartAxisStep}.
  * @returns The widened domain, ascending.
  */
 export function chartNiceDomain(
   min: number,
   max: number,
   count = DEFAULT_COUNT,
+  rounding: ChartAxisStep = 'nearest',
 ): [number, number] {
   const wanted = tickCount(count);
   let [start, stop] = openDomain(min, max);
   let previous = 0;
   for (let pass = 0; pass < NICE_PASSES; pass++) {
-    const [, , increment] = tickSpec(start, stop, wanted);
+    const [, , increment] = tickSpec(start, stop, wanted, rounding);
     if (increment === previous || !Number.isFinite(increment)) break;
     const low = wholeStep(start, increment, true);
     const high = wholeStep(stop, increment, false);
@@ -163,14 +218,41 @@ export function chartExponentSuffix(exponent: number): string {
 
 type TickSpec = [first: number, last: number, increment: number];
 
-function tickSpec(start: number, stop: number, count: number): TickSpec {
+/**
+ * The nice factor a division is closest to.
+ * @param error - The division's mantissa, between 1 and 10.
+ * @returns 1, 2, 5 or 10.
+ */
+function stepNearest(error: number): number {
+  if (error >= STEP_10) return 10;
+  if (error >= STEP_5) return 5;
+  if (error >= STEP_2) return 2;
+  return 1;
+}
+
+/**
+ * The smallest nice factor at or above a division, so the ticks are never
+ * closer together than asked for.
+ * @param error - The division's mantissa, between 1 and 10.
+ * @returns 1, 2, 5 or 10.
+ */
+function stepAtMost(error: number): number {
+  if (error <= 1 + STEP_EPSILON) return 1;
+  if (error <= 2 + STEP_EPSILON) return 2;
+  if (error <= 5 + STEP_EPSILON) return 5;
+  return 10;
+}
+
+function tickSpec(
+  start: number,
+  stop: number,
+  count: number,
+  rounding: ChartAxisStep = 'nearest',
+): TickSpec {
   const rawStep = (stop - start) / count;
   const power = Math.floor(Math.log10(rawStep));
   const error = rawStep / 10 ** power;
-  let factor = 1;
-  if (error >= STEP_2) factor = 2;
-  if (error >= STEP_5) factor = 5;
-  if (error >= STEP_10) factor = 10;
+  const factor = rounding === 'atMost' ? stepAtMost(error) : stepNearest(error);
   if (power < 0) {
     const divisor = 10 ** -power / factor;
     let first = Math.round(start * divisor);

package/src/chart/core/chartDomain.ts

@@ -0,0 +1,185 @@
+/**
+ * The window a chart is showing, which is the one thing every viewer built on
+ * this package holds in common.
+ *
+ * Two numbers on each axis and nothing else — no units, no labels, no notion of
+ * what is being measured. That absence is the point: a mass spectrum reads its
+ * x axis as m/z and an infrared spectrum reads the same two numbers as
+ * wavenumbers, so a window that named either would need converting at every
+ * boundary, and a zoom gesture would have to be written twice to do the same
+ * arithmetic.
+ *
+ * The y axis is called nothing more specific than y for the same reason. It
+ * carries intensity in one viewer, absorbance or percent transmittance in
+ * another, and the arithmetic that maps it to pixels cares only that it is a
+ * range of numbers.
+ */
+
+/** The window a chart is showing, in data units. */
+export interface ChartDomain {
+  /** `[min, max]` on the horizontal axis. */
+  x: [number, number];
+  /** `[min, max]` on the vertical axis, the lower bound negative in mirror mode. */
+  y: [number, number];
+}
+
+/**
+ * How the vertical axis behaves under a gesture, where the two viewers differ.
+ *
+ * A mass spectrum is drawn as sticks standing on zero, so zero has to stay in
+ * the window however it is zoomed — a window starting at a tenth of the base
+ * peak cuts every stick off at the ankles. A continuous trace has no feet: an
+ * infrared band dragged out at 20 to 60 percent transmittance is asked about at
+ * 20 to 60 percent, and forcing 100 into the window would undo the zoom that was
+ * just asked for.
+ *
+ * The baseline is also what the wheel scales about, which is not always zero:
+ * percent transmittance runs *down* from 100, and scaling it about zero would
+ * walk the whole trace off the top of the plot instead of stretching it.
+ */
+export interface YAxisRules {
+  /**
+   * The value the wheel scales about, and the line a drag is judged against.
+   * @default 0
+   */
+  baseline?: number;
+  /**
+   * Whether the baseline must stay inside the window a drag asks for — true for
+   * a stick spectrum standing on it, false for a continuous trace.
+   * @default true
+   */
+  keepBaseline?: boolean;
+  /**
+   * Whether the features hang **down** from the baseline rather than standing up
+   * out of it.
+   *
+   * This is which side of the baseline the data is on, and it decides which way
+   * "released past the baseline" points. A mass peak and an absorbance band both
+   * stand up out of a baseline at the foot of the plot, so the gesture is a drag
+   * released *below* it. Percent transmittance hangs down from 100, which sits
+   * near the *top* — so there the gesture is a drag released above it, and asking
+   * the mass question instead would make almost every drag in the plot take the
+   * value axis with it.
+   * @default false
+   */
+  pointsDown?: boolean;
+}
+
+/** What the rules come to when a viewer states none of them. */
+export const DEFAULT_Y_AXIS_RULES: Required<YAxisRules> = {
+  baseline: 0,
+  keepBaseline: true,
+  pointsDown: false,
+};
+
+/**
+ * What a drag across the plot zooms to.
+ *
+ * `xAxis` is the reading gesture and the default: the question a chemist asks of
+ * a spectrum is nearly always "what is between 1650 and 1750", never "what is
+ * between forty and sixty percent", so a drag narrows the horizontal axis and
+ * leaves the height alone unless it is released past the baseline.
+ *
+ * `box` is the tool: while it is chosen, the rectangle dragged out is the window,
+ * both axes at once. It is a mode rather than a modifier because it is used in
+ * runs — a baseline being examined is examined several times over — and a
+ * modifier held down through each of them is a worse gesture than a tool pressed
+ * once.
+ *
+ * The two are named apart from the whole of `DragMode` so that a chart offering
+ * nothing but zoom tools can say so in its own signature — which is what stops
+ * `select`, the one drag that moves no axis, from reaching a chart with no
+ * handler for it.
+ */
+export type ZoomDragMode = 'xAxis' | 'box';
+
+/**
+ * What a drag across the plot asks for.
+ *
+ * `select` is the third and it is not a zoom at all: the rectangle swept out is
+ * handed back as a range and the window is left exactly where it was. A
+ * chromatographic peak is integrated between two retention times a chemist
+ * chose, and choosing them by dragging over them is the gesture — so the answer
+ * to it is two numbers on the horizontal axis rather than a new window, and a
+ * chart that zoomed to them as well would take the neighbouring peaks off the
+ * screen the moment the boundaries were set.
+ *
+ * It is a mode rather than a modifier for the reason `ZoomDragMode` already
+ * gives — integration is done in runs — and it is kept out of `ZoomDragMode` so
+ * that a chart offering only zoom tools, which is what the infrared toolbar
+ * hands to its `zoomGestures`, cannot be handed it by a widening nobody noticed.
+ * Handed one, that chart would sweep out a rectangle and then do nothing at all.
+ */
+export type DragMode = ZoomDragMode | 'select';
+
+/** How the y axis behaves, and what a drag is taken to mean. */
+export interface ZoomRules extends YAxisRules {
+  /**
+   * What a drag asks for.
+   * @default 'xAxis'
+   */
+  drag?: DragMode;
+}
+
+/**
+ * Which gestures a chart answers, for a viewer that offers fewer than all of
+ * them.
+ *
+ * A gesture is worth having only where the axis it moves has somewhere to go,
+ * and that is a property of what is being measured rather than of the chart. An
+ * axis running between two ends the data fills — percent transmittance from 0 to
+ * 100 — has nothing for the wheel to scale: stretching it about its baseline
+ * pushes the trace off the plot and leaves an axis that no longer reads as
+ * percent. An axis open at one end — intensity, absorbance — has weak features
+ * lying against the baseline, and bringing those up is what the wheel is for.
+ *
+ * Saying it here, once, is what keeps a viewer from answering a gesture in one
+ * mode and quietly ignoring it in another: the whole set travels as one object
+ * from whatever knows the measurement into `useChartZoom`.
+ */
+export interface ZoomGestures {
+  /**
+   * What a drag across the plot asks for.
+   * @default 'xAxis'
+   */
+  drag?: DragMode;
+  /**
+   * Whether the wheel scales the value axis about its baseline.
+   *
+   * Turned off, the wheel is left entirely alone — the page scrolls under the
+   * pointer as it does anywhere else, which is what a reader expects of a chart
+   * that does not answer the gesture.
+   * @default true
+   */
+  wheel?: boolean;
+}
+
+/** What the gestures come to when a viewer states none of them. */
+export const DEFAULT_ZOOM_GESTURES: Required<ZoomGestures> = {
+  drag: 'xAxis',
+  wheel: true,
+};
+
+/**
+ * Whether two windows show the same thing, compared by their four numbers.
+ *
+ * By value and never by identity, because the fitted window is rebuilt from the
+ * spectra whenever anything about them changes — a colour, a name, a visibility
+ * — and only some of those changes move an axis. A chart that told the two
+ * apart by identity would throw the user's zoom away every time they touched
+ * the list beside it.
+ * @param current - The window in force.
+ * @param next - The window just worked out.
+ * @returns Whether both axes already run between the same bounds.
+ */
+export function sameChartDomain(
+  current: ChartDomain,
+  next: ChartDomain,
+): boolean {
+  return (
+    current.x[0] === next.x[0] &&
+    current.x[1] === next.x[1] &&
+    current.y[0] === next.y[0] &&
+    current.y[1] === next.y[1]
+  );
+}

package/src/chart/core/chartGeometry.ts

@@ -0,0 +1,159 @@
+/**
+ * Where the plot sits inside the SVG, and in what order its bands are painted.
+ *
+ * The margins are deliberately not symmetric, because the two axes ask for very
+ * different room: a value label runs to `1.2e6` and needs the width on the
+ * left, while the horizontal axis carries its ticks and its title stacked under the
+ * plot. Nothing here is responsive — whatever lays the chart out decides how big
+ * it is, and this module only says what is left over for the data.
+ */
+
+/** The box a chart was given, in CSS pixels. */
+export interface ChartSize {
+  /** How wide the SVG is. */
+  width: number;
+  /** How tall the SVG is. */
+  height: number;
+}
+
+/**
+ * The plotting area inside the margins, in SVG user units.
+ *
+ * `right` and `bottom` are carried rather than recomputed at each use: a clip
+ * path, the brush rectangle and both axes all need the far edge, and three
+ * copies of `left + width` are three chances for one of them to drift.
+ */
+export interface PlotRect {
+  /** Distance from the left edge of the SVG to the plot. */
+  left: number;
+  /** Distance from the top edge of the SVG to the plot. */
+  top: number;
+  /** How wide the plot is, never below `MINIMUM_PLOT_SIDE`. */
+  width: number;
+  /** How tall the plot is, never below `MINIMUM_PLOT_SIDE`. */
+  height: number;
+  /** `left + width`, where the horizontal axis ends. */
+  right: number;
+  /** `top + height`, the baseline the horizontal axis is drawn on. */
+  bottom: number;
+}
+
+/**
+ * The four sides of the room kept around a plot, in CSS pixels.
+ *
+ * Named as a type of its own because `MARGIN` is frozen at literal values, so a
+ * caller asking for `{ bottom: 4 }` would be told that 4 is not 34 — the
+ * defaults are constants, but a margin is four numbers.
+ */
+export interface ChartMargin {
+  /** Room above the plot. */
+  top: number;
+  /** Room to the right of the plot. */
+  right: number;
+  /** Room below the plot, where the horizontal axis is written. */
+  bottom: number;
+  /** Room to the left of the plot, where the value axis is written. */
+  left: number;
+}
+
+/**
+ * The room kept around the plot for the axes and their titles.
+ *
+ * `left` is the widest because it has to hold a value label; `bottom` is
+ * deeper than `top` because it stacks the tick labels and the axis title under
+ * the plot, where `top` only keeps the topmost value label off the edge.
+ *
+ * Each of them is the furniture and no more than the furniture. `Axes` writes
+ * its tick row five pixels under the plot and its title thirteen under that,
+ * which puts the deepest ink of a `(min)` some thirty pixels down; what is left
+ * is slack. A stack pays these four numbers once per pane — a column of three
+ * chromatograms over a spectrum pays `bottom` four times — and a pixel of slack
+ * in here is a pixel the measurement was not drawn in, over and over.
+ */
+export const MARGIN = { top: 10, right: 16, bottom: 34, left: 60 } as const;
+
+/**
+ * How much room a chart leaves under its plot when it writes no horizontal axis
+ * of its own.
+ *
+ * A pane of a stack above the foot draws no tick row and no axis title — the
+ * panes share one window, so one axis under the last of them says everything —
+ * and this is what it keeps instead: enough that the trace does not run into
+ * the splitter under it, and no more. It lives here beside `MARGIN` rather than
+ * in the viewer that uses it, because the arithmetic that shares a stack's
+ * height between its panes has to subtract exactly the difference between the
+ * two, and a second copy of either number is a stack whose plots do not line up.
+ */
+export const SHARED_AXIS_MARGIN = 8;
+
+/**
+ * The smallest plot the arithmetic is allowed to describe.
+ *
+ * A chart is briefly laid out at nothing — a panel opening, a splitter dragged
+ * shut, the first render before the container has been measured — and the naive
+ * subtraction then gives a negative width, which every scale built from it turns
+ * into an infinity and the DOM refuses outright. Ten pixels is small enough to
+ * be invisible and large enough to keep every number finite until the real size
+ * arrives.
+ */
+export const MINIMUM_PLOT_SIDE = 10;
+
+/**
+ * The six bands of the chart, bottom to top, in the order they are painted.
+ *
+ * The order is the whole interaction design in one array. `defs` holds the clip
+ * paths and markers and is never painted itself. `axes` sits under the data so a
+ * grid line can never be mistaken for a peak. `data` is the only clipped band,
+ * so a zoomed trace stops at the plot edge instead of running out over the
+ * labels — which is also why `guide` is separate: an annotation's label sits
+ * above the tallest peak and must be allowed out of the clip. `selection` covers
+ * the data so a drag stays visible over it, and `tracker` is last so the
+ * crosshair and its readout are never occluded by anything.
+ */
+export const CHART_LAYERS = [
+  'defs',
+  'axes',
+  'data',
+  'guide',
+  'selection',
+  'tracker',
+] as const;
+
+/** One band of the chart. */
+export type ChartLayer = (typeof CHART_LAYERS)[number];
+
+/**
+ * Work out the plotting area for a chart of a given size.
+ * @param size - The box the chart was given.
+ * @param margin - Room to keep around the plot instead of the module default.
+ * Whatever side it names is used and every side it omits keeps `MARGIN`, because
+ * a chart that only wants its foot back should not have to restate the 60 px its
+ * value labels need. A chart standing alone wants all four sides, but panes
+ * stacked one above another do not: only the pane at the foot of the stack draws
+ * a tick row, and only the topmost has anything above it to be kept clear of.
+ * Three panes sharing a 400 px column each pay 48 px at the bottom and 16 px at
+ * the top, which is 192 px of axis furniture where 64 px is all that can be seen
+ * — the other 128 px is blank room taken out of the traces, and the middle pane
+ * is left drawing in barely half of its third. Passing `{ top: 4, bottom: 4 }`
+ * to every pane but the two that need the room hands it back.
+ * @returns The plot inside the margins, clamped so it is never degenerate.
+ */
+export function plotRect(
+  size: ChartSize,
+  margin?: Partial<ChartMargin>,
+): PlotRect {
+  const top = margin?.top ?? MARGIN.top;
+  const right = margin?.right ?? MARGIN.right;
+  const bottom = margin?.bottom ?? MARGIN.bottom;
+  const left = margin?.left ?? MARGIN.left;
+  const width = Math.max(MINIMUM_PLOT_SIDE, size.width - left - right);
+  const height = Math.max(MINIMUM_PLOT_SIDE, size.height - top - bottom);
+  return {
+    left,
+    top,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height,
+  };
+}

package/src/chart/core/chartPane.ts

@@ -0,0 +1,10 @@
+/**
+ * Marks the box one pane of a chart stack is drawn in.
+ *
+ * A stack is laid out in `chartStackLevel.tsx` and read again, from the outside,
+ * by whatever takes a picture of the editor the stack sits in — `drawingIn` has
+ * to know that a box holding a chromatogram over a spectrum holds two drawings
+ * rather than one, and this mark is how it tells. It sits in a file of its own
+ * so that neither of them has to import the other's React.
+ */
+export const CHART_PANE_ATTRIBUTE = 'data-chart-pane';

package/src/chart/core/chartScale.ts

@@ -27,7 +27,10 @@ export interface ChartScale {
  * @param rangeMax - The pixel `domainMax` maps to.
  * @returns The mapping. A zero-width or non-finite domain gives a `factor` of
  * zero, which pins every value to the middle of the range so that a constant
- * column still draws instead of vanishing.
+ * column still draws instead of vanishing. A range that is not a range — a
+ * plot measured before it was laid out — gives an `offset` of `NaN` instead,
+ * because there is no pixel a value could honestly be put at, and every mark
+ * already declines to draw what does not map.
  */
 export function chartScale(
   domainMin: number,
@@ -37,9 +40,9 @@ export function chartScale(
 ): ChartScale {
   const span = domainMax - domainMin;
   const reach = rangeMax - rangeMin;
-  if (span === 0 || !Number.isFinite(span) || !Number.isFinite(reach)) {
-    const middle = (rangeMin + rangeMax) / 2;
-    return { offset: Number.isFinite(middle) ? middle : 0, factor: 0 };
+  if (!Number.isFinite(reach)) return { offset: Number.NaN, factor: 0 };
+  if (span === 0 || !Number.isFinite(span)) {
+    return { offset: (rangeMin + rangeMax) / 2, factor: 0 };
   }
   const factor = reach / span;
   return { offset: rangeMin - domainMin * factor, factor };