react-cheminfo 0.69.0 → 0.71.0

package/lib/mass/ui/MetadataPanel.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { MF } from 'react-mf';
+import { Toolbar } from 'react-science/ui';
+import { labelStyle, panelBodyStyle, panelEmptyStyle, panelStyle, panelToolbarStyle, } from "../../panel/core/panelStyles.js";
+import { spectrumMetaRows, spectrumResolutionRows, } from "../core/massSummary.js";
+import { useMassEditorState } from "./massStateContext.js";
+/**
+ * The acquisition panel of the viewer, about whichever spectrum is selected.
+ * @returns The panel.
+ */
+export function MetadataPanel() {
+    const { selectedSpectrum, mzDecimals } = useMassEditorState();
+    return _jsx(MassMetadata, { spectrum: selectedSpectrum, mzDecimals: mzDecimals });
+}
+/**
+ * How a spectrum was acquired, as the file stated it, and what the viewer
+ * found out about it — for any viewer, whatever state it keeps the spectrum in.
+ *
+ * Every row the file wrote is a fact it actually wrote: the reader leaves out
+ * whatever was blank rather than showing it as a dash, so a short table means a
+ * terse file and not a bug. The order is the reader's — source, instrument,
+ * analyser, ionization, polarity, energy, and on down to who ran it — because
+ * that is the order a method is read in. A file that wrote nothing gets the
+ * facts true of every spectrum instead, a pasted one included: which file and
+ * format it came from, how many peaks it holds and between which masses.
+ *
+ * Under either comes whether it is a high-resolution measurement, with how that
+ * was decided, since a verdict read off the decimals of a peak table is a
+ * weaker claim than one measured on the widths of its peaks.
+ * @param props - Component props.
+ * @returns The panel.
+ */
+export function MassMetadata(props) {
+    const { spectrum: selectedSpectrum, mzDecimals } = props;
+    const [showConditions, setShowConditions] = useState(false);
+    const meta = selectedSpectrum?.meta ?? null;
+    const conditions = meta?.conditions ?? null;
+    const title = meta?.title ?? null;
+    const molecularFormula = meta?.molecularFormula ?? null;
+    // The whole viewer re-renders on every drag of the chart, and the rows only
+    // change when the selected spectrum does.
+    const rows = useMemo(() => selectedSpectrum === null
+        ? []
+        : [
+            ...spectrumMetaRows(selectedSpectrum, mzDecimals),
+            ...spectrumResolutionRows(selectedSpectrum),
+        ], [selectedSpectrum, mzDecimals]);
+    return (_jsxs("div", { style: panelStyle, children: [_jsx("div", { style: panelToolbarStyle, children: _jsx(Toolbar, { "aria-label": "Acquisition", children: _jsx(Toolbar.Item, { icon: "align-left", active: showConditions, disabled: conditions === null, tooltip: conditions === null
+                            ? 'This file carried no scan description of its own'
+                            : "Show the instrument's own scan description, as it was written", "aria-label": "Show the scan description", onClick: () => setShowConditions(!showConditions) }) }) }), _jsx("div", { style: panelBodyStyle, children: selectedSpectrum === null ? (_jsx("p", { style: panelEmptyStyle, children: "No spectrum is selected. Click one in the Spectra panel and what its file said about the acquisition appears here." })) : (_jsxs(_Fragment, { children: [title === null ? null : _jsx("div", { style: titleStyle, children: title }), meta === null ? (_jsx("p", { style: panelEmptyStyle, children: "This file carried no acquisition metadata, so this is what the viewer knows about it." })) : null, _jsx("table", { style: tableStyle, children: _jsxs("tbody", { children: [molecularFormula === null ? null : (_jsxs("tr", { children: [_jsx("th", { scope: "row", style: rowLabelStyle, children: "Formula" }), _jsx("td", { style: rowValueStyle, children: _jsx(MF, { mf: molecularFormula }) })] })), rows.map((row) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", style: rowLabelStyle, children: row.label }), _jsx("td", { style: rowValueStyle, children: row.value })] }, row.label)))] }) }), conditions === null || !showConditions ? null : (_jsxs("div", { children: [_jsx("div", { style: labelStyle, children: "Scan description" }), _jsx("pre", { style: conditionsStyle, children: conditions })] }))] })) })] }));
+}
+/** What the file calls the spectrum, which is rarely what the list calls it. */
+const titleStyle = {
+    fontSize: 12,
+    fontWeight: 600,
+    lineHeight: 1.3,
+    wordBreak: 'break-word',
+};
+const tableStyle = {
+    width: '100%',
+    fontSize: 12,
+    borderCollapse: 'collapse',
+};
+/**
+ * The label column is as narrow as it can be and the value takes the rest: the
+ * labels are short and known, and it is the values a file surprises you with.
+ */
+const rowLabelStyle = {
+    width: '1%',
+    padding: '2px 8px 2px 0',
+    textAlign: 'left',
+    fontWeight: 600,
+    whiteSpace: 'nowrap',
+    verticalAlign: 'top',
+    opacity: 0.7,
+};
+const rowValueStyle = {
+    padding: '2px 0',
+    verticalAlign: 'top',
+    wordBreak: 'break-word',
+};
+/**
+ * Kept verbatim, wrapping rather than scrolling sideways: a Thermo scan filter
+ * is one long line that says more about the acquisition than the structured
+ * records do, and half of it off the edge of a panel is half a method.
+ */
+const conditionsStyle = {
+    margin: 0,
+    padding: 6,
+    borderRadius: 3,
+    background: 'rgba(17, 20, 24, 0.06)',
+    fontFamily: 'monospace',
+    fontSize: 11,
+    lineHeight: 1.35,
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    userSelect: 'all',
+};
+//# sourceMappingURL=MetadataPanel.js.map

package/lib/mass/ui/MetadataPanel.js.map

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

package/lib/mass/ui/MzDecimalsMenu.d.ts

@@ -0,0 +1,28 @@
+import type { ReactElement } from 'react';
+import type { MzDecimalsSetting } from '../core/mzDecimalsSetting.ts';
+export interface MzDecimalsMenuProps {
+    /** What is chosen, `'auto'` while nothing is. */
+    setting: MzDecimalsSetting;
+    /**
+     * How many decimals `'auto'` comes to for the spectra in view, which the
+     * entry for it says, so choosing nothing is not a choice made blind.
+     */
+    autoDecimals: number;
+    /** Called with what was picked. */
+    onChange: (setting: MzDecimalsSetting) => void;
+}
+/**
+ * How many decimals the masses are written with, picked from a panel toolbar.
+ *
+ * The first entry leaves it to the spectra — high-resolution masses or nominal
+ * ones, as each spectrum's resolution says — and the rest fix a number for
+ * every mass on screen at once: chart, crosshair, tables. A list rather than a
+ * stepper, because the useful answers are few and a reader picking one wants
+ * to see them side by side; the button is lit while a number overrides the
+ * spectra, so a chart written to fewer decimals than it resolves never looks
+ * like one that resolves no more.
+ * @param props - Component props.
+ * @returns The toolbar item and its menu.
+ */
+export declare function MzDecimalsMenu(props: MzDecimalsMenuProps): ReactElement;
+//# sourceMappingURL=MzDecimalsMenu.d.ts.map

package/lib/mass/ui/MzDecimalsMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MzDecimalsMenu.d.ts","sourceRoot":"","sources":["../../../src/mass/ui/MzDecimalsMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAGtE,MAAM,WAAW,mBAAmB;IAClC,iDAAiD;IACjD,OAAO,EAAE,iBAAiB,CAAC;IAC3B;;;OAGG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAChD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CAoCvE"}

package/lib/mass/ui/MzDecimalsMenu.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu, MenuItem } from '@blueprintjs/core';
+import { Toolbar } from 'react-science/ui';
+import { MAXIMUM_MZ_DECIMALS } from "../core/mzDecimalsSetting.js";
+/**
+ * How many decimals the masses are written with, picked from a panel toolbar.
+ *
+ * The first entry leaves it to the spectra — high-resolution masses or nominal
+ * ones, as each spectrum's resolution says — and the rest fix a number for
+ * every mass on screen at once: chart, crosshair, tables. A list rather than a
+ * stepper, because the useful answers are few and a reader picking one wants
+ * to see them side by side; the button is lit while a number overrides the
+ * spectra, so a chart written to fewer decimals than it resolves never looks
+ * like one that resolves no more.
+ * @param props - Component props.
+ * @returns The toolbar item and its menu.
+ */
+export function MzDecimalsMenu(props) {
+    const { setting, autoDecimals, onChange } = props;
+    return (_jsx(Toolbar.PopoverItem, { itemProps: {
+            icon: 'floating-point',
+            tooltip: LABEL,
+            'aria-label': LABEL,
+            active: setting !== 'auto',
+        }, content: _jsxs(Menu, { "aria-label": LABEL, children: [_jsx(MenuItem, { roleStructure: "listoption", selected: setting === 'auto', text: `Automatic — by resolution (now ${decimalsText(autoDecimals)})`, onClick: () => onChange('auto') }), CHOICES.map((decimals) => (_jsx(MenuItem, { roleStructure: "listoption", selected: setting === decimals, text: decimals === 0
+                        ? 'Nominal mass (0 decimals)'
+                        : decimalsText(decimals), onClick: () => onChange(decimals) }, decimals)))] }) }));
+}
+const LABEL = 'Decimals of the masses';
+/** Every number that can be chosen, from the nominal mass up. */
+const CHOICES = Array.from({ length: MAXIMUM_MZ_DECIMALS + 1 }, (_, decimals) => decimals);
+/**
+ * A number of decimals, as the menu says it.
+ * @param decimals - How many.
+ * @returns `1 decimal`, or `n decimals`.
+ */
+function decimalsText(decimals) {
+    return decimals === 1 ? '1 decimal' : `${decimals} decimals`;
+}
+//# sourceMappingURL=MzDecimalsMenu.js.map

package/lib/mass/ui/MzDecimalsMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MzDecimalsMenu.js","sourceRoot":"","sources":["../../../src/mass/ui/MzDecimalsMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAG3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAcnE;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAElD,OAAO,CACL,KAAC,OAAO,CAAC,WAAW,IAClB,SAAS,EAAE;YACT,IAAI,EAAE,gBAAgB;YACtB,OAAO,EAAE,KAAK;YACd,YAAY,EAAE,KAAK;YACnB,MAAM,EAAE,OAAO,KAAK,MAAM;SAC3B,EACD,OAAO,EACL,MAAC,IAAI,kBAAa,KAAK,aACrB,KAAC,QAAQ,IACP,aAAa,EAAC,YAAY,EAC1B,QAAQ,EAAE,OAAO,KAAK,MAAM,EAC5B,IAAI,EAAE,kCAAkC,YAAY,CAAC,YAAY,CAAC,GAAG,EACrE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,GAC/B,EACD,OAAO,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACzB,KAAC,QAAQ,IAEP,aAAa,EAAC,YAAY,EAC1B,QAAQ,EAAE,OAAO,KAAK,QAAQ,EAC9B,IAAI,EACF,QAAQ,KAAK,CAAC;wBACZ,CAAC,CAAC,2BAA2B;wBAC7B,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,EAE5B,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAR5B,QAAQ,CASb,CACH,CAAC,IACG,GAET,CACH,CAAC;AACJ,CAAC;AAED,MAAM,KAAK,GAAG,wBAAwB,CAAC;AAEvC,iEAAiE;AACjE,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CACxB,EAAE,MAAM,EAAE,mBAAmB,GAAG,CAAC,EAAE,EACnC,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAC1B,CAAC;AAEF;;;;GAIG;AACH,SAAS,YAAY,CAAC,QAAgB;IACpC,OAAO,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,QAAQ,WAAW,CAAC;AAC/D,CAAC"}

package/lib/mass/ui/PeakLabels.d.ts

@@ -0,0 +1,93 @@
+import type { ReactElement } from 'react';
+import type { PlotRect } from '../../chart/core/chartGeometry.ts';
+import type { ChartScale } from '../../chart/core/chartScale.ts';
+import type { HoveredPeak } from '../core/labelStackBox.ts';
+import type { MassSpectrum } from '../core/massSpectrum.ts';
+export interface PeakLabelsProps {
+    /**
+     * The spectrum whose peaks are labelled. Hand it the same one that was drawn:
+     * a mirrored half is drawn normalised, and labels computed from the spectrum
+     * as measured would float above sticks of another height.
+     */
+    spectrum: MassSpectrum;
+    /** Where the plot sits, which is what a stack may not be pushed out of. */
+    plot: PlotRect;
+    /** The m/z axis as it is currently zoomed. */
+    xScale: ChartScale;
+    /**
+     * The intensity axis as it is currently zoomed. Reflect it and the labels
+     * follow the sticks downwards — together with `below`, which turns the stacks
+     * over.
+     */
+    yScale: ChartScale;
+    /**
+     * How many peaks are labelled at most, the most intense first.
+     * @default DEFAULT_LABEL_LIMIT
+     */
+    limit?: number;
+    /**
+     * Whether a peak whose charge was established says so.
+     * @default false
+     */
+    showCharges?: boolean;
+    /**
+     * How many decimals the masses on screen are written with.
+     * @default 4
+     */
+    mzDecimals?: number;
+    /**
+     * What explains each peak, keyed as `peakKey` keys it — the name a host
+     * writes on top of a stack.
+     * @default undefined
+     */
+    annotationLabels?: ReadonlyMap<string, string>;
+    /**
+     * Whether the stacks hang under the sticks rather than standing over them,
+     * which is what the lower half of a mirrored pair wants.
+     * @default false
+     */
+    below?: boolean;
+    /**
+     * The ink the stacks are written in — worth passing the spectrum's own colour
+     * on a chart holding several, where an unattributed m/z belongs to any of them.
+     * @default the theme's label colour
+     */
+    color?: string;
+    /**
+     * What one unit of the measured intensity is written as.
+     * @default 1
+     */
+    intensityScale?: number;
+    /**
+     * Called with the peak whose stack the pointer is resting on, `null` when it
+     * leaves. Without it the stacks answer no pointer at all.
+     * @default undefined
+     */
+    onHover?: (peak: HoveredPeak | null) => void;
+}
+/**
+ * The tops of the best peaks of one spectrum, and what each of them reads.
+ *
+ * Two things drawn together because they are one claim: a short mark on the tip
+ * of the picked peak, and the numbers written over it. The mark is the half that
+ * matters when the continuous trace is the one on screen — the centroid is then
+ * not drawn at all, and a stack of numbers floating over a peak shape says which
+ * region was picked but never which point of it, which is the number the stack
+ * is quoting. With the mark on the tip the two agree by construction.
+ *
+ * Which peaks are labelled is `planPeakLabels`'s to decide, and it follows the
+ * zoom: a survey of the whole spectrum labels its base peak and a few others,
+ * and the same spectrum zoomed onto one cluster labels every line in it. Every
+ * line is haloed and none of them is boxed: a number over a peak is written
+ * over whatever the plot has there, and the halo clears a hairline of chart from
+ * around each glyph, where a filled box would hide the very data it is about.
+ *
+ * The numbers take no pointer event; the room they occupy does, as one
+ * transparent rectangle per stack, and only when somebody asked for it — so a
+ * stack can be interrogated without becoming a control, while the crosshair
+ * underneath goes on following the pointer.
+ * @param props - Component props.
+ * @returns The marks and the labels, as SVG.
+ */
+export declare function PeakLabels(props: PeakLabelsProps): ReactElement;
+//# sourceMappingURL=PeakLabels.d.ts.map

package/lib/mass/ui/PeakLabels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeakLabels.d.ts","sourceRoot":"","sources":["../../../src/mass/ui/PeakLabels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAQjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,QAAQ,EAAE,YAAY,CAAC;IACvB,2EAA2E;IAC3E,IAAI,EAAE,QAAQ,CAAC;IACf,8CAA8C;IAC9C,MAAM,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,MAAM,EAAE,UAAU,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9C;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAwH/D"}

package/lib/mass/ui/PeakLabels.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CHART_COLORS, CHART_FONT, LABEL_HALO, LABEL_QUIET, PEAK_LABEL, } from "../../chart/core/chartTheme.js";
+import { planPeakLabels } from "../core/peakLabelPlan.js";
+/**
+ * The tops of the best peaks of one spectrum, and what each of them reads.
+ *
+ * Two things drawn together because they are one claim: a short mark on the tip
+ * of the picked peak, and the numbers written over it. The mark is the half that
+ * matters when the continuous trace is the one on screen — the centroid is then
+ * not drawn at all, and a stack of numbers floating over a peak shape says which
+ * region was picked but never which point of it, which is the number the stack
+ * is quoting. With the mark on the tip the two agree by construction.
+ *
+ * Which peaks are labelled is `planPeakLabels`'s to decide, and it follows the
+ * zoom: a survey of the whole spectrum labels its base peak and a few others,
+ * and the same spectrum zoomed onto one cluster labels every line in it. Every
+ * line is haloed and none of them is boxed: a number over a peak is written
+ * over whatever the plot has there, and the halo clears a hairline of chart from
+ * around each glyph, where a filled box would hide the very data it is about.
+ *
+ * The numbers take no pointer event; the room they occupy does, as one
+ * transparent rectangle per stack, and only when somebody asked for it — so a
+ * stack can be interrogated without becoming a control, while the crosshair
+ * underneath goes on following the pointer.
+ * @param props - Component props.
+ * @returns The marks and the labels, as SVG.
+ */
+export function PeakLabels(props) {
+    const { spectrum, plot, xScale, yScale, limit, showCharges = false, mzDecimals, annotationLabels, below = false, color = CHART_COLORS.labelText, intensityScale = 1, onHover, } = props;
+    const plans = useMemo(() => planPeakLabels({
+        spectrum,
+        plot,
+        xScale,
+        yScale,
+        showCharges,
+        below,
+        intensityScale,
+        ...(limit === undefined ? {} : { limit }),
+        ...(mzDecimals === undefined ? {} : { mzDecimals }),
+        ...(annotationLabels === undefined ? {} : { annotationLabels }),
+    }), [
+        spectrum,
+        plot,
+        xScale,
+        yScale,
+        limit,
+        showCharges,
+        mzDecimals,
+        annotationLabels,
+        below,
+        intensityScale,
+    ]);
+    // Every picked peak is marked; only the ones that kept their room are
+    // written, since a stack over a peak whose neighbour took the room would be
+    // written across that neighbour's.
+    const written = useMemo(() => plans.filter((plan) => Number.isFinite(plan.labelX)), [plans]);
+    const stackStyle = useMemo(() => ({ fill: color, fontSize: CHART_FONT.label, ...LABEL_HALO }), [color]);
+    const markStyle = useMemo(() => ({ stroke: color }), [color]);
+    return (_jsxs("g", { children: [_jsx("g", { pointerEvents: "none", style: markStyle, children: plans.map((plan) => (_jsx("line", { x1: plan.tipX, y1: plan.tipY, x2: plan.tipX, y2: below
+                        ? plan.tipY - PEAK_LABEL.topMark
+                        : plan.tipY + PEAK_LABEL.topMark }, plan.key))) }), _jsx("g", { pointerEvents: "none", style: stackStyle, children: written.map((plan) => (_jsx("text", { textAnchor: "middle", children: plan.lines.map((line, index) => (_jsx("tspan", { x: plan.labelX, y: plan.baselines[index], style: LINE_STYLES[line.kind], children: line.text }, line.kind))) }, plan.key))) }), onHover === undefined
+                ? null
+                : written.map((plan) => (_jsx("rect", { x: plan.box.x, y: plan.box.y, width: plan.box.width, height: plan.box.height, fill: "transparent", onPointerEnter: () => onHover({
+                        key: plan.key,
+                        mz: plan.peak.x,
+                        intensity: plan.peak.y,
+                        charge: plan.peak.charge,
+                        x: plan.labelX,
+                        // A card hangs off the edge of the stack facing away from the
+                        // stick, so it never covers the peak it is about.
+                        y: below ? plan.box.y + plan.box.height : plan.box.y,
+                    }), onPointerLeave: () => onHover(null) }, plan.key)))] }));
+}
+/**
+ * How each line of a stack is set.
+ *
+ * Four numbers in one ink and one weight are four things said at once, and the
+ * eye has to read all of them to find the one it came for. So the stack is
+ * graded instead: the name of what the peak is carries the weight, because it is
+ * the only line that is an answer rather than a measurement; the m/z is written
+ * plain, which is what a chemist is nearly always reading; and the charge and
+ * the intensity are let back towards the paper.
+ */
+const LINE_STYLES = {
+    annotation: { fontWeight: 600 },
+    charge: { fillOpacity: LABEL_QUIET },
+    mz: {},
+    intensity: { fillOpacity: LABEL_QUIET },
+};
+//# sourceMappingURL=PeakLabels.js.map

package/lib/mass/ui/PeakLabels.js.map

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

package/lib/mass/ui/PeakTable.d.ts

@@ -0,0 +1,34 @@
+import type { MassPeakObject } from '../core/centroidPeaks.ts';
+/** Which column the rows are read in the order of. */
+export type PeakSortKey = 'mz' | 'intensity';
+export interface PeakTableProps {
+    /** The peaks to list, in increasing m/z. */
+    peaks: readonly MassPeakObject[];
+    /** How many decimals the masses are written with. */
+    mzDecimals: number;
+    /**
+     * Which column the rows are in the order of: m/z ascending, which is how a
+     * spectrum is read, or intensity descending, which is how its base peak and
+     * its neighbours are found.
+     */
+    sortKey: PeakSortKey;
+    /** Order the rows by a column. */
+    onSort: (key: PeakSortKey) => void;
+    /** The m/z of the peak the pointer is resting on, `null` for none. */
+    highlightMz: number | null;
+    /** Told which peak a row the pointer rests on is, `null` when it leaves. */
+    onHighlight: (mz: number | null) => void;
+    /** Frame a peak on the chart. */
+    onPick: (mz: number) => void;
+}
+/**
+ * The peaks, one row each, under a header that sorts them.
+ *
+ * Only the rows in view are drawn: a table opened onto a whole Orbitrap scan is
+ * a thousand rows, and every one of them would otherwise be laid out again on
+ * every hover of the chart beside it.
+ * @param props - Component props.
+ * @returns The table.
+ */
+export declare function PeakTable(props: PeakTableProps): import("react").JSX.Element;
+//# sourceMappingURL=PeakTable.d.ts.map

package/lib/mass/ui/PeakTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeakTable.d.ts","sourceRoot":"","sources":["../../../src/mass/ui/PeakTable.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG/D,sDAAsD;AACtD,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,WAAW,CAAC;AAE7C,MAAM,WAAW,cAAc;IAC7B,4CAA4C;IAC5C,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,EAAE,WAAW,CAAC;IACrB,kCAAkC;IAClC,MAAM,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IACnC,sEAAsE;IACtE,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,4EAA4E;IAC5E,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,iCAAiC;IACjC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BA8E9C"}

package/lib/mass/ui/PeakTable.js

@@ -0,0 +1,49 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo, useRef } from 'react';
+import { panelCellStyle, panelColumnButtonStyle, panelNumberCellStyle, panelScrollAreaStyle, panelStickyHeaderStyle, panelTableStyle, } from "../../panel/core/panelStyles.js";
+import { useVirtualRows } from "../../panel/ui/useVirtualRows.js";
+import { formatIntensity, formatMz } from "../core/massFormat.js";
+/**
+ * The peaks, one row each, under a header that sorts them.
+ *
+ * Only the rows in view are drawn: a table opened onto a whole Orbitrap scan is
+ * a thousand rows, and every one of them would otherwise be laid out again on
+ * every hover of the chart beside it.
+ * @param props - Component props.
+ * @returns The table.
+ */
+export function PeakTable(props) {
+    const { peaks, mzDecimals, sortKey, onSort, highlightMz, onHighlight, onPick, } = props;
+    const scrollRef = useRef(null);
+    const ordered = useMemo(() => sortKey === 'mz'
+        ? peaks
+        : peaks.toSorted((first, second) => second.y - first.y), [peaks, sortKey]);
+    const rows = useVirtualRows(scrollRef, ordered.length, ROW_HEIGHT);
+    const showsCharge = useMemo(() => peaks.some((peak) => peak.charge !== 0), [peaks]);
+    return (_jsx("div", { ref: scrollRef, style: panelScrollAreaStyle, children: _jsxs("table", { style: panelTableStyle, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: panelStickyHeaderStyle, children: _jsxs("button", { type: "button", style: panelColumnButtonStyle, onClick: () => onSort('mz'), children: ["m/z", sortKey === 'mz' ? ' ▲' : ''] }) }), _jsx("th", { style: panelStickyHeaderStyle, children: _jsxs("button", { type: "button", style: panelColumnButtonStyle, onClick: () => onSort('intensity'), children: ["intensity", sortKey === 'intensity' ? ' ▼' : ''] }) }), showsCharge ? (_jsx("th", { style: panelStickyHeaderStyle, children: _jsx("span", { style: panelColumnButtonStyle, children: "z" }) })) : null] }) }), _jsxs("tbody", { onPointerLeave: () => onHighlight(null), children: [rows.before > 0 ? _jsx("tr", { style: { height: rows.before } }) : null, rows.indices.map((index) => {
+                            const peak = ordered[index];
+                            return (_jsx(PeakRow, { index: index, peak: peak, mzDecimals: mzDecimals, showsCharge: showsCharge, isHighlighted: peak.x === highlightMz, measure: rows.measure, onHighlight: onHighlight, onPick: onPick }, peak.x));
+                        }), rows.after > 0 ? _jsx("tr", { style: { height: rows.after } }) : null] })] }) }));
+}
+/**
+ * One peak. Memoised, because a hover on the chart moves the highlight and only
+ * the row it left and the row it reached have anything new to draw.
+ */
+const PeakRow = memo(function PeakRow(props) {
+    const { index, peak, mzDecimals, showsCharge, isHighlighted, measure, onHighlight, onPick, } = props;
+    return (_jsxs("tr", { ref: measure, "data-index": index, style: isHighlighted ? highlightedRowStyle : rowStyle, title: "Click to frame this peak on the chart", 
+        // Reachable by Tab as well as by the pointer: framing a peak is the one
+        // thing a row does, and a keyboard has to be able to ask for it.
+        tabIndex: 0, onPointerEnter: () => onHighlight(peak.x), onFocus: () => onHighlight(peak.x), onClick: () => onPick(peak.x), onKeyDown: (event) => {
+            if (event.key !== 'Enter' && event.key !== ' ')
+                return;
+            event.preventDefault();
+            onPick(peak.x);
+        }, children: [_jsx("td", { style: panelCellStyle, children: formatMz(peak.x, mzDecimals) }), _jsx("td", { style: panelNumberCellStyle, children: formatIntensity(peak.y, mzDecimals) }), showsCharge ? (_jsx("td", { style: panelNumberCellStyle, children: peak.charge === 0 ? '' : peak.charge })) : null] }));
+});
+/** What one row is worth before one has been measured. */
+const ROW_HEIGHT = 18;
+const rowStyle = { cursor: 'pointer' };
+/** The row of the peak being looked at, wherever it was pointed at. */
+const highlightedRowStyle = { ...rowStyle, background: '#e8f1fb' };
+//# sourceMappingURL=PeakTable.js.map

package/lib/mass/ui/PeakTable.js.map

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

package/lib/mass/ui/PeaksPanel.d.ts

@@ -0,0 +1,31 @@
+export interface PeaksPanelProps {
+    /**
+     * The m/z of the peak the pointer is resting on, wherever it was hovered.
+     * @default null
+     */
+    highlightMz?: number | null;
+    /**
+     * Told which peak a row the pointer rests on is, `null` when it leaves.
+     * @default undefined
+     */
+    onHighlight?: (mz: number | null) => void;
+}
+/**
+ * What is actually in the selected spectrum, peak by peak.
+ *
+ * The centroid rather than the profile, because the centroid is what every
+ * number downstream is computed from — a profile lists the dozens of points one
+ * ion's peak shape covers, and none of them is the ion. For a profile these are
+ * the peaks the picking found in it.
+ *
+ * The window is the chart's by default: zoom into a cluster and the question
+ * becomes what is in *that* cluster, and a table that went on listing every row
+ * would have to be searched for the answer the chart is already pointing at. A
+ * floor of a hundredth of the base peak leaves the baseline out, and both are a
+ * toggle away. Resting on a row lights the peak on the chart, and clicking one
+ * frames it there.
+ * @param props - Component props.
+ * @returns The panel.
+ */
+export declare function PeaksPanel(props: PeaksPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=PeaksPanel.d.ts.map

package/lib/mass/ui/PeaksPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeaksPanel.d.ts","sourceRoot":"","sources":["../../../src/mass/ui/PeaksPanel.tsx"],"names":[],"mappings":"AAyBA,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BA4HhD"}

package/lib/mass/ui/PeaksPanel.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { SelectedTotal, Toolbar } from 'react-science/ui';
+import { useCopyToClipboard } from "../../clipboard/ui/useCopyToClipboard.js";
+import { panelBodyStyle, panelEmptyStyle, panelStyle, panelToolbarCountStyle, panelToolbarStyle, } from "../../panel/core/panelStyles.js";
+import { mzFrame } from "../core/massDomain.js";
+import { PEAK_TABLE_LIMIT, PEAK_TABLE_THRESHOLD, peakTableRows, peakTableToTsv, } from "../core/peakTable.js";
+import { MzDecimalsMenu } from "./MzDecimalsMenu.js";
+import { PeakTable } from "./PeakTable.js";
+import { useMassCommandProps } from "./massCommandContext.js";
+import { useMassActions, useMassEditorState } from "./massStateContext.js";
+/**
+ * What is actually in the selected spectrum, peak by peak.
+ *
+ * The centroid rather than the profile, because the centroid is what every
+ * number downstream is computed from — a profile lists the dozens of points one
+ * ion's peak shape covers, and none of them is the ion. For a profile these are
+ * the peaks the picking found in it.
+ *
+ * The window is the chart's by default: zoom into a cluster and the question
+ * becomes what is in *that* cluster, and a table that went on listing every row
+ * would have to be searched for the answer the chart is already pointing at. A
+ * floor of a hundredth of the base peak leaves the baseline out, and both are a
+ * toggle away. Resting on a row lights the peak on the chart, and clicking one
+ * frames it there.
+ * @param props - Component props.
+ * @returns The panel.
+ */
+export function PeaksPanel(props) {
+    const { highlightMz = null, onHighlight } = props;
+    const { state, visibleSpectra, selectedSpectrum, mzDecimals, autoMzDecimals, } = useMassEditorState();
+    const actions = useMassActions();
+    const command = useMassCommandProps();
+    const { domain } = state.view;
+    const { showLabels, showCharges } = state.settings;
+    const [inWindow, setInWindow] = useState(true);
+    const [withFloor, setWithFloor] = useState(true);
+    const [sortKey, setSortKey] = useState('mz');
+    const { copied, copy } = useCopyToClipboard();
+    const peaks = useMemo(() => selectedSpectrum === null
+        ? []
+        : peakTableRows(selectedSpectrum, {
+            domain: inWindow ? domain : null,
+            threshold: withFloor ? PEAK_TABLE_THRESHOLD : 0,
+        }), [selectedSpectrum, inWindow, domain, withFloor]);
+    // Stable across a pointer move, so the memoised rows survive one.
+    const onPick = useCallback((mz) => actions.setDomain(mzFrame(mz, visibleSpectra, domain)), [actions, visibleSpectra, domain]);
+    const highlight = useCallback((mz) => onHighlight?.(mz), [onHighlight]);
+    const total = selectedSpectrum?.centroid.x.length ?? 0;
+    return (_jsxs("div", { style: panelStyle, children: [_jsxs("div", { style: panelToolbarStyle, children: [_jsxs(Toolbar, { "aria-label": "Peaks", children: [_jsx(Toolbar.Item, { icon: "zoom-to-fit", active: inWindow, tooltip: "Only the peaks the chart is showing", "aria-label": "Only the peaks the chart is showing", onClick: () => setInWindow(!inWindow) }), _jsx(Toolbar.Item, { icon: "filter", active: withFloor, tooltip: "Leave out the peaks under 1 % of the base peak", "aria-label": "Leave out the peaks under 1 % of the base peak", onClick: () => setWithFloor(!withFloor) }), _jsx(Toolbar.Item, { icon: "label", active: showLabels, ...command('toggleLabels') }), _jsx(Toolbar.Item, { icon: "numerical", active: showCharges, ...command('toggleCharges') }), _jsx(MzDecimalsMenu, { setting: state.settings.mzDecimals, autoDecimals: autoMzDecimals, onChange: (setting) => actions.setSettings({ mzDecimals: setting }) }), _jsx(Toolbar.Item, { icon: copied ? 'tick' : 'duplicate', tooltip: "Copy the rows as tab-separated text", "aria-label": "Copy the rows as tab-separated text", disabled: peaks.length === 0, onClick: () => void copy(peakTableToTsv(peaks, mzDecimals)) })] }), _jsx("div", { style: panelToolbarCountStyle, title: `${peaks.length} of the ${total} peaks of this spectrum listed`, children: _jsx(SelectedTotal, { count: peaks.length, total: total }) })] }), _jsx("div", { style: panelBodyStyle, children: selectedSpectrum === null ? (_jsx("p", { style: panelEmptyStyle, children: "No spectrum is selected. Click one in the Spectra panel and its peaks are listed here." })) : peaks.length === 0 ? (_jsx("p", { style: panelEmptyStyle, children: "No peak stands in the window above the floor. Zoom out, or switch the window or the floor off in the toolbar." })) : (_jsxs(_Fragment, { children: [peaks.length === PEAK_TABLE_LIMIT ? (_jsxs("p", { style: noteStyle, children: ["The ", PEAK_TABLE_LIMIT, " most intense peaks are listed. Zoom in to list the rest."] })) : null, _jsx(PeakTable, { peaks: peaks, mzDecimals: mzDecimals, sortKey: sortKey, onSort: setSortKey, highlightMz: highlightMz, onHighlight: highlight, onPick: onPick })] })) })] }));
+}
+const noteStyle = { margin: 0, fontSize: 11, opacity: 0.7 };
+//# sourceMappingURL=PeaksPanel.js.map

package/lib/mass/ui/PeaksPanel.js.map

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

package/lib/mass/ui/SpectraPanel.d.ts

@@ -0,0 +1,17 @@
+/**
+ * What is loaded: one row per spectrum, in the order the files gave them.
+ *
+ * The list is the viewer's selection as well as its legend. Whichever row is
+ * selected is the spectrum the acquisition table describes, the peak table holds
+ * and the chart writes its labels on, so a row is not a checkbox with a colour
+ * beside it — it is the control that decides what the other panels are about.
+ * That is also why the arrow keys walk it: a GC/MS export gives a page per scan,
+ * and finding the interesting one means stepping down them watching the chart.
+ *
+ * What acts on the list rather than on one row — opening more, drawing every
+ * trace again, handing the whole list over as a file, closing every one — is a
+ * toolbar under the header, where a panel's own actions belong.
+ * @returns The panel.
+ */
+export declare function SpectraPanel(): import("react").JSX.Element;
+//# sourceMappingURL=SpectraPanel.d.ts.map

package/lib/mass/ui/SpectraPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpectraPanel.d.ts","sourceRoot":"","sources":["../../../src/mass/ui/SpectraPanel.tsx"],"names":[],"mappings":"AAkBA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,YAAY,gCA2G3B"}