react-cheminfo 0.28.0 → 0.29.0

package/lib/chart/ui/Axes.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { axisLabeller } from "../core/axisLabels.js";
+import { chartAxisScale } from "../core/chartAxisScale.js";
+import { chartPixel } from "../core/chartScale.js";
+import { CHART_COLORS, CHART_FONT } from "../core/chartTheme.js";
+/**
+ * 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) {
+    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 (_jsxs("g", { pointerEvents: "none", children: [xTicks.values.map((tick) => (_jsx("line", { x1: chartPixel(xScale, tick), y1: plot.top, x2: chartPixel(xScale, tick), y2: plot.bottom, style: gridStyle }, tick))), yTicks.values.map((tick) => (_jsx("line", { x1: plot.left, y1: chartPixel(yScale, tick), x2: plot.right, y2: chartPixel(yScale, tick), style: gridStyle }, tick))), showsZeroRule ? (_jsx("line", { x1: plot.left, y1: zero, x2: plot.right, y2: zero, style: zeroRuleStyle })) : null, _jsx("path", { d: `M${plot.left} ${plot.top}V${plot.bottom}H${plot.right}`, fill: "none", style: axisStyle }), showXTicks &&
+                xTicks.values.map((tick) => (_jsx("text", { x: chartPixel(xScale, tick), y: plot.bottom + TICK_LABEL_GAP, textAnchor: "middle", dominantBaseline: "hanging", style: tickStyle, children: writeXTick(tick) }, tick))), yTicks.values.map((tick) => (_jsx("text", { x: plot.left - TICK_LABEL_GAP, y: chartPixel(yScale, tick), textAnchor: "end", dominantBaseline: "central", style: tickStyle, children: writeYTick(absYTicks ? Math.abs(tick) : tick) }, tick))), showXTitle && (_jsx("text", { x: middleX, y: plot.bottom + TITLE_GAP, textAnchor: "middle", dominantBaseline: "hanging", style: titleStyle, children: xTitle })), _jsx("text", { x: titleColumn, y: middleY, transform: `rotate(-90 ${titleColumn} ${middleY})`, textAnchor: "middle", dominantBaseline: "central", style: titleStyle, children: yTitle })] }));
+}
+/**
+ * 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, count) {
+    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, spacing) {
+    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, write, absolute, left) {
+    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 };
+const zeroRuleStyle = { stroke: CHART_COLORS.zeroRule };
+const axisStyle = { stroke: CHART_COLORS.axis };
+const tickStyle = {
+    fill: CHART_COLORS.tick,
+    fontSize: CHART_FONT.tick,
+};
+const titleStyle = {
+    fill: CHART_COLORS.title,
+    fontSize: CHART_FONT.title,
+};
+//# sourceMappingURL=Axes.js.map

package/lib/chart/ui/Axes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Axes.js","sourceRoot":"","sources":["../../../src/chart/ui/Axes.tsx"],"names":[],"mappings":"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"}

package/lib/chart/ui/AxisGuide.d.ts

@@ -0,0 +1,60 @@
+import type { ReactElement } from 'react';
+import type { PlotRect } from '../core/chartGeometry.ts';
+import type { ChartScale } from '../core/chartScale.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 declare function AxisGuide(props: AxisGuideProps): ReactElement | null;
+//# sourceMappingURL=AxisGuide.d.ts.map

package/lib/chart/ui/AxisGuide.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AxisGuide.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/AxisGuide.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAKxD,gEAAgE;AAChE,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,0CAA0C;IAC1C,IAAI,EAAE,QAAQ,CAAC;IACf,qDAAqD;IACrD,MAAM,EAAE,UAAU,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,GAAG,IAAI,CA0CpE"}

package/lib/chart/ui/AxisGuide.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CHART_COLORS, CHART_FONT, LABEL_HALO } from "../core/chartTheme.js";
+import { guidePlacement } from "../core/guidePlacement.js";
+/**
+ * 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) {
+    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 (_jsxs("g", { pointerEvents: "none", children: [_jsx("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 : (_jsx("path", { d: arrowPath({ x, direction }, plot), style: arrowStyle })), label === undefined ? null : (_jsx("text", { x: labelPlace.x, y: plot.top + ARROW_TOP_INSET, textAnchor: labelPlace.anchor, dominantBaseline: "central", style: labelStyle, children: label }))] }));
+}
+/** 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, plot) {
+    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, plot) {
+    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',
+    };
+}
+//# sourceMappingURL=AxisGuide.js.map

package/lib/chart/ui/AxisGuide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AxisGuide.js","sourceRoot":"","sources":["../../../src/chart/ui/AxisGuide.tsx"],"names":[],"mappings":"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"}

package/lib/chart/ui/ChartStack.d.ts

@@ -0,0 +1,81 @@
+/**
+ * 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 type { ChartStackPane } 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 declare function ChartStack(props: ChartStackProps): ReactElement;
+//# sourceMappingURL=ChartStack.d.ts.map

package/lib/chart/ui/ChartStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartStack.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/ChartStack.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,cAAc,EAAc,MAAM,uBAAuB,CAAC;AAGxE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE5D,oCAAoC;AACpC,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;;;OAYG;IACH,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CA+B/D"}

package/lib/chart/ui/ChartStack.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { keptHeight, paneHeight, stackFrom } from "./chartStackLevel.js";
+/**
+ * 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) {
+    const { panes, onHeightChange } = props;
+    const [heights, setHeights] = useState({});
+    const heightOf = useCallback((pane) => paneHeight(pane, heights[pane.id]), [heights]);
+    const resize = useCallback((pane, asked) => {
+        const height = keptHeight(asked, pane);
+        if (height === null)
+            return;
+        setHeights((current) => current[pane.id] === height ? current : { ...current, [pane.id]: height });
+    }, []);
+    const rest = useCallback((pane, asked) => {
+        const height = keptHeight(asked, pane);
+        if (height !== null)
+            onHeightChange?.(pane.id, height);
+    }, [onHeightChange]);
+    const level = useMemo(() => ({ panes, heightOf, resize, rest }), [panes, heightOf, resize, rest]);
+    return _jsx("div", { style: stackStyle, children: stackFrom(level, 0) });
+}
+/** 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',
+};
+//# sourceMappingURL=ChartStack.js.map

package/lib/chart/ui/ChartStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartStack.js","sourceRoot":"","sources":["../../../src/chart/ui/ChartStack.tsx"],"names":[],"mappings":";AAuCA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAuB,CAAC;AAkC1E;;;;;;;;;GASG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAmC,EAAE,CAAC,CAAC;IAE7E,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,IAAoB,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAC5D,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,IAAoB,EAAE,KAAoB,EAAE,EAAE;QACxE,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QACvC,IAAI,MAAM,KAAK,IAAI;YAAE,OAAO;QAC5B,UAAU,CAAC,CAAC,OAAO,EAAE,EAAE,CACrB,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAC1E,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,IAAI,GAAG,WAAW,CACtB,CAAC,IAAoB,EAAE,KAAoB,EAAE,EAAE;QAC7C,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QACvC,IAAI,MAAM,KAAK,IAAI;YAAE,cAAc,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;IACzD,CAAC,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EACzC,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,CAChC,CAAC;IAEF,OAAO,cAAK,KAAK,EAAE,UAAU,YAAG,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC,GAAO,CAAC;AAC7D,CAAC;AAED,+EAA+E;AAC/E,MAAM,UAAU,GAAG;IACjB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;IACZ,QAAQ,EAAE,QAAQ;CACV,CAAC"}

package/lib/chart/ui/ChartTracker.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The crosshair a chart follows the pointer with, and the lines it reads out.
+ *
+ * Every viewer draws the same two dashed rules and writes the same stack of
+ * short lines beside them; what differs is the words, which are the one thing
+ * only the viewer knows — an m/z and a height here, a retention time and a
+ * summed current there. So the geometry, the dashes and the placement live
+ * here, and the caller hands over the lines already written.
+ *
+ * The first line is the one being pointed at and is written plainly; the rest
+ * are quieter, because they answer the question the first one raises rather
+ * than being asked for in their own right.
+ */
+import type { ReactElement } from 'react';
+import type { PlotRect } from '../core/chartGeometry.ts';
+import type { ChartPoint } from '../core/svgPoint.ts';
+/** What the tracker is given. */
+export interface ChartTrackerProps {
+    /** Where the pointer is, `null` whenever it is off the plot. */
+    position: ChartPoint | null;
+    /** Where the plot sits inside the SVG. */
+    plot: PlotRect;
+    /**
+     * What to write beside the crosshair, most important first, `null` where the
+     * axes read nothing under the pointer.
+     * @default null
+     */
+    lines?: readonly string[] | null;
+}
+/**
+ * Draw the crosshair and its readout.
+ * @param props - The pointer, the plot and the lines to write.
+ * @returns The crosshair, or nothing while the pointer is off the plot.
+ */
+export declare function ChartTracker(props: ChartTrackerProps): ReactElement | null;
+//# sourceMappingURL=ChartTracker.d.ts.map

package/lib/chart/ui/ChartTracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTracker.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/ChartTracker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAQzD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGtD,iCAAiC;AACjC,MAAM,WAAW,iBAAiB;IAChC,gEAAgE;IAChE,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAC;IAC5B,0CAA0C;IAC1C,IAAI,EAAE,QAAQ,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;CAClC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,GAAG,IAAI,CAwC1E"}

package/lib/chart/ui/ChartTracker.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CHART_COLORS, CHART_FONT, LABEL_HALO, LABEL_QUIET, PEAK_LABEL, } from "../core/chartTheme.js";
+import { readoutPlacement } from "../core/trackerReadout.js";
+/**
+ * Draw the crosshair and its readout.
+ * @param props - The pointer, the plot and the lines to write.
+ * @returns The crosshair, or nothing while the pointer is off the plot.
+ */
+export function ChartTracker(props) {
+    const { position, plot, lines = null } = props;
+    if (position === null)
+        return null;
+    const place = readoutPlacement(position, plot);
+    return (_jsxs("g", { pointerEvents: "none", children: [_jsx("line", { x1: position.x, y1: plot.top, x2: position.x, y2: plot.bottom, strokeDasharray: TRACKER_DASH, style: crosshairStyle }), _jsx("line", { x1: plot.left, y1: position.y, x2: plot.right, y2: position.y, strokeDasharray: TRACKER_DASH, style: crosshairStyle }), lines === null || lines.length === 0 ? null : (_jsx("text", { textAnchor: place.anchor, style: readoutStyle, children: lines.map((line, at) => (_jsx("tspan", { x: place.x, y: place.y + at * PEAK_LABEL.lineHeight, fillOpacity: at === 0 ? undefined : LABEL_QUIET, children: line }, line))) }))] }));
+}
+/** What the crosshair is dashed with, so it is never read as a trace. */
+const TRACKER_DASH = '3 3';
+const crosshairStyle = { stroke: CHART_COLORS.tracker };
+const readoutStyle = {
+    fill: CHART_COLORS.trackerText,
+    fontSize: CHART_FONT.readout,
+    // Haloed like every other label written onto the plot, and it needs it more
+    // than any of them: the pointer is put wherever the question is, which is over
+    // the trace rather than beside it.
+    ...LABEL_HALO,
+};
+//# sourceMappingURL=ChartTracker.js.map

package/lib/chart/ui/ChartTracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTracker.js","sourceRoot":"","sources":["../../../src/chart/ui/ChartTracker.tsx"],"names":[],"mappings":";AAiBA,OAAO,EACL,YAAY,EACZ,UAAU,EACV,UAAU,EACV,WAAW,EACX,UAAU,GACX,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAgB7D;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC/C,IAAI,QAAQ,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAEnC,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;IAE/C,OAAO,CACL,aAAG,aAAa,EAAC,MAAM,aACrB,eACE,EAAE,EAAE,QAAQ,CAAC,CAAC,EACd,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,EAAE,EAAE,QAAQ,CAAC,CAAC,EACd,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,eAAe,EAAE,YAAY,EAC7B,KAAK,EAAE,cAAc,GACrB,EACF,eACE,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,EAAE,EAAE,QAAQ,CAAC,CAAC,EACd,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,EAAE,EAAE,QAAQ,CAAC,CAAC,EACd,eAAe,EAAE,YAAY,EAC7B,KAAK,EAAE,cAAc,GACrB,EACD,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC7C,eAAM,UAAU,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,YAAY,YAChD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,CACvB,gBAEE,CAAC,EAAE,KAAK,CAAC,CAAC,EACV,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,UAAU,EACvC,WAAW,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,YAE9C,IAAI,IALA,IAAI,CAMH,CACT,CAAC,GACG,CACR,IACC,CACL,CAAC;AACJ,CAAC;AAED,yEAAyE;AACzE,MAAM,YAAY,GAAG,KAAK,CAAC;AAE3B,MAAM,cAAc,GAAG,EAAE,MAAM,EAAE,YAAY,CAAC,OAAO,EAAW,CAAC;AAEjE,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,YAAY,CAAC,WAAW;IAC9B,QAAQ,EAAE,UAAU,CAAC,OAAO;IAC5B,4EAA4E;IAC5E,+EAA+E;IAC/E,mCAAmC;IACnC,GAAG,UAAU;CACL,CAAC"}

package/lib/chart/ui/PlotCaption.d.ts

@@ -0,0 +1,44 @@
+import type { ReactElement } from 'react';
+import type { PlotRect } from '../core/chartGeometry.ts';
+/** What the caption says, and how much of the plot it may say it across. */
+export interface PlotCaptionProps {
+    /** What the plot is a picture of, in one line. */
+    text: string;
+    /** The plot it is written on. */
+    plot: PlotRect;
+    /**
+     * The x it must stop short of, in the plot's own pixels.
+     *
+     * The left edge of a legend sharing the top of the plot, which `legendBox`
+     * answers for whoever is drawing one. Nothing here works that out on its own:
+     * a caption is written wherever a caller asks and only the caller knows what
+     * else it put up there.
+     * @default the plot's right edge
+     */
+    until?: number;
+}
+/**
+ * What a plot is a picture of, written in its top left corner.
+ *
+ * The opposite corner from the legend, and it says the opposite kind of thing:
+ * a legend names the curves against each other, while a caption says which
+ * measurement the whole pane is of — which file, which acquisition of it, when
+ * it was measured. A stack of panes is where that matters, since three charts
+ * one above another are three pictures of three different scans and the axes
+ * say nothing about which.
+ *
+ * Drawn **inside the SVG**, for the reason `TraceLegend` states: a picture is
+ * exported by cloning the chart's own `SVGSVGElement`, so a caption living in a
+ * `<div>` beside it would be missing from every figure while looking perfectly
+ * right on screen — and a figure that does not say what it is a picture of is
+ * the one thing a caption exists to prevent.
+ *
+ * It is written on the plot rather than above it. The room over a plot belongs
+ * to the tallest peak's label, and taking it for a caption would either push
+ * the measurement down or have the two collide on whichever spectrum happens to
+ * peak at the left.
+ * @param props - Component props.
+ * @returns The caption, or nothing where there is no room to write it.
+ */
+export declare function PlotCaption(props: PlotCaptionProps): ReactElement | null;
+//# sourceMappingURL=PlotCaption.d.ts.map

package/lib/chart/ui/PlotCaption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlotCaption.d.ts","sourceRoot":"","sources":["../../../src/chart/ui/PlotCaption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAUzD,4EAA4E;AAC5E,MAAM,WAAW,gBAAgB;IAC/B,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,IAAI,EAAE,QAAQ,CAAC;IACf;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,GAAG,IAAI,CAmBxE"}