react-cheminfo 0.69.0 → 0.71.0

package/lib/mass/ui/MassChart.js

@@ -0,0 +1,139 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useMemo, useRef } from 'react';
+import { sameChartDomain } from "../../chart/core/chartDomain.js";
+import { MARGIN, plotRect } from "../../chart/core/chartGeometry.js";
+import { Axes } from "../../chart/ui/Axes.js";
+import { AxisGuide } from "../../chart/ui/AxisGuide.js";
+import { SelectionRect } from "../../chart/ui/SelectionRect.js";
+import { chartSurfaceStyle } from "../../chart/ui/chartSurface.js";
+import { useChartSize } from "../../chart/ui/useChartSize.js";
+import { DEFAULT_LABEL_LIMIT } from "../core/massState.js";
+import { mzDecimalsOf } from "../core/resolutionOf.js";
+import { MassPointerTracker } from "./MassPointerTracker.js";
+import { PeakLabels } from "./PeakLabels.js";
+import { SpectrumTrace } from "./SpectrumTrace.js";
+import { useMassPointer } from "./useMassPointer.js";
+import { useMassZoom } from "./useMassZoom.js";
+/**
+ * The chart: every layer of a mass spectrum, in one SVG.
+ *
+ * The axes go under the data, so a grid line is never read as a peak. Only the
+ * data band is clipped, so a zoomed trace stops at the plot edge while the
+ * labels over the tallest peaks are allowed out over the margin — clip those and
+ * the base peak of every spectrum loses its label. The guide, the drag rectangle
+ * and the crosshair go over everything, because each answers a question being
+ * asked right now.
+ *
+ * Nothing is held here. The spectra, what is labelled, what is being looked at
+ * and the window are all props, and every gesture comes back out as a callback
+ * — so one component draws an editor's chart, a report page's single spectrum
+ * and a test.
+ * @param props - Component props.
+ * @returns The chart.
+ */
+export function MassChart(props) {
+    const { spectra, labelledId, showLabels = true, labelLimit = DEFAULT_LABEL_LIMIT, showCharges = false, mzDecimals: askedDecimals, annotationLabels, highlightMz = null, onPeakHover, domain = null, onDomainChange, onPlotClick, drag = 'xAxis', answersKeys = true, emphasisedId = null, width, height, children, } = props;
+    const [containerRef, measured] = useChartSize();
+    const svgRef = useRef(null);
+    const plot = useMemo(() => plotRect({
+        width: width ?? measured.width,
+        height: height ?? measured.height,
+    }), [width, height, measured.width, measured.height]);
+    // Read back off the plot rather than off the measurement, so a chart briefly
+    // laid out at nothing still draws its axes inside a box that holds them.
+    const frameWidth = plot.right + MARGIN.right;
+    const frameHeight = plot.bottom + MARGIN.bottom;
+    // The host's window goes *into* the zoom rather than over it, so a drag is
+    // always measured against what is on screen.
+    const zoom = useMassZoom({
+        spectra,
+        svgRef,
+        plot,
+        domain,
+        drag,
+        keys: answersKeys,
+        ...(onPlotClick === undefined
+            ? {}
+            : { onClick: ({ mz, peak }) => onPlotClick(mz, peak) }),
+    });
+    const { domain: shown, xScale, yScale, selection, handlers } = zoom;
+    // A chart holding nothing still builds scales on a placeholder window, and a
+    // placeholder reported would become a window the host imposes on whatever is
+    // dropped next — drawn entirely off screen.
+    const holdsNothing = spectra.length === 0;
+    const reported = useRef(shown);
+    // Before the browser paints, so a host that stores the window and hands it
+    // back does so in the frame the gesture landed in rather than the one after.
+    useLayoutEffect(() => {
+        if (holdsNothing || sameChartDomain(reported.current, shown))
+            return;
+        reported.current = shown;
+        onDomainChange?.(shown);
+    }, [holdsNothing, shown, onDomainChange]);
+    const pointer = useMassPointer({
+        svgRef,
+        plot,
+        xScale,
+        yScale,
+        spectra,
+        ...(onPeakHover === undefined ? {} : { onPeak: onPeakHover }),
+    });
+    const labelled = useMemo(() => labelledSpectrum(spectra, labelledId), [spectra, labelledId]);
+    const painted = useMemo(() => emphasisedLast(spectra, emphasisedId), [spectra, emphasisedId]);
+    // The crosshair reads every drawn spectrum, so it is written to what they
+    // resolve together; the labels are of one spectrum, and written to its own.
+    const readoutDecimals = useMemo(() => askedDecimals ?? mzDecimalsOf(spectra), [askedDecimals, spectra]);
+    const labelDecimals = useMemo(() => askedDecimals ??
+        (labelled === null ? readoutDecimals : mzDecimalsOf([labelled])), [askedDecimals, labelled, readoutDecimals]);
+    // React's generated id carries the punctuation it keeps its own ids apart
+    // with, which a URL fragment is under no obligation to accept.
+    const clipId = `mass-plot-${useId().replaceAll(/\W/g, '')}`;
+    return (_jsx("div", { ref: containerRef, style: containerStyle, children: _jsxs("svg", { ref: svgRef, role: "img", "aria-label": CHART_LABEL, width: frameWidth, height: frameHeight, viewBox: `0 0 ${frameWidth} ${frameHeight}`, style: chartSurfaceStyle(pointer.position !== null), ...handlers, children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: plot.left, y: plot.top, width: plot.width, height: plot.height }) }) }), _jsx(Axes, { plot: plot, xDomain: shown.x, yDomain: shown.y, xScale: xScale, yScale: yScale, xTitle: "m/z", yTitle: "relative intensity (%)" }), _jsxs("g", { clipPath: `url(#${clipId})`, children: [painted.map((spectrum) => (_jsx(SpectrumTrace, { spectrum: spectrum, plot: plot, xScale: xScale, yScale: yScale, strokeWidth: spectrum.id === emphasisedId ? EMPHASISED_WIDTH : undefined }, spectrum.id))), children] }), showLabels && labelled !== null ? (_jsx(PeakLabels, { spectrum: labelled, plot: plot, xScale: xScale, yScale: yScale, limit: labelLimit, showCharges: showCharges, mzDecimals: labelDecimals, ...(annotationLabels === undefined ? {} : { annotationLabels }), color: spectra.length > 1 ? labelled.color : undefined })) : null, _jsx(AxisGuide, { value: highlightMz, plot: plot, xScale: xScale }), _jsx(SelectionRect, { selection: selection, plot: plot }), _jsx(MassPointerTracker, { position: pointer.position, readout: pointer.readout, plot: plot, mzDecimals: readoutDecimals })] }) }));
+}
+/**
+ * The one spectrum whose peaks are labelled.
+ * @param spectra - What the chart draws.
+ * @param labelledId - The identity asked for, `null` for none, absent to let the
+ * chart take the first.
+ * @returns The spectrum, or `null` when none answers.
+ */
+function labelledSpectrum(spectra, labelledId) {
+    if (labelledId === undefined)
+        return spectra[0] ?? null;
+    if (labelledId === null)
+        return null;
+    for (const spectrum of spectra) {
+        if (spectrum.id === labelledId)
+            return spectrum;
+    }
+    return null;
+}
+/**
+ * The traces in painting order, with the emphasised one last — last is in
+ * front, and in front is what lets a trace crossing a dozen others be followed.
+ * @param spectra - The traces, in the order they were opened.
+ * @param emphasisedId - Identity of the one to raise, `null` for none.
+ * @returns The order to paint in — the array itself when nothing moves.
+ */
+function emphasisedLast(spectra, emphasisedId) {
+    if (emphasisedId === null)
+        return spectra;
+    const at = spectra.findIndex((spectrum) => spectrum.id === emphasisedId);
+    if (at === -1 || at === spectra.length - 1)
+        return spectra;
+    return [
+        ...spectra.slice(0, at),
+        ...spectra.slice(at + 1),
+        spectra[at],
+    ];
+}
+/** What the chart is, and what can be done to it, for whoever cannot see it. */
+const CHART_LABEL = 'Mass spectrum. Drag across it to zoom the m/z axis, drag below the baseline to take the intensity axis with it, turn the wheel to scale the intensity, and double click to fit everything again.';
+/**
+ * How thick the trace every panel is about is drawn: barely thicker, so it
+ * reads as the same kind of thing as the others.
+ */
+const EMPHASISED_WIDTH = 2;
+/** The box the chart is measured against, and fills. */
+const containerStyle = { width: '100%', height: '100%' };
+//# sourceMappingURL=MassChart.js.map

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

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

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { MassCommandHandlers } from '../core/massCommands.ts';
+export interface MassCommandProviderProps {
+    /** What each command does. */
+    handlers: MassCommandHandlers;
+    /** The viewer. */
+    children: ReactNode;
+}
+/**
+ * Put the command handlers where the toolbar and the panels can reach them.
+ * @param props - Component props.
+ * @returns The provider.
+ */
+export declare function MassCommandProvider(props: MassCommandProviderProps): import("react").JSX.Element;
+//# sourceMappingURL=MassCommandProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MassCommandProvider.d.ts","sourceRoot":"","sources":["../../../src/mass/ui/MassCommandProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAKnE,MAAM,WAAW,wBAAwB;IACvC,8BAA8B;IAC9B,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,+BAalE"}

package/lib/mass/ui/MassCommandProvider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { massCommandContext } from "./massCommandContext.js";
+/**
+ * Put the command handlers where the toolbar and the panels can reach them.
+ * @param props - Component props.
+ * @returns The provider.
+ */
+export function MassCommandProvider(props) {
+    const { handlers, children } = props;
+    const value = useMemo(() => ({ handlers, run: (id) => handlers[id]?.() }), [handlers]);
+    return (_jsx(massCommandContext.Provider, { value: value, children: children }));
+}
+//# sourceMappingURL=MassCommandProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MassCommandProvider.js","sourceRoot":"","sources":["../../../src/mass/ui/MassCommandProvider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAA0B,CAAC;AAS9D;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IACjE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAErC,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EACnD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACtC,QAAQ,GACmB,CAC/B,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,16 @@
+import type { MassCommandId } from '../core/massCommands.ts';
+export interface MassCommandTooltipProps {
+    /** Which command the tooltip is about. */
+    id: MassCommandId;
+}
+/**
+ * One command's tooltip: its title, what it does, and every way to do it.
+ *
+ * `TooltipHelpContent` from react-science, which is what NMRium's tooltips and
+ * the infrared viewer's are, so a page holding these viewers side by side
+ * explains itself the same way in all of them.
+ * @param props - Component props.
+ * @returns The tooltip's content.
+ */
+export declare function MassCommandTooltip(props: MassCommandTooltipProps): import("react").JSX.Element;
+//# sourceMappingURL=MassCommandTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MassCommandTooltip.d.ts","sourceRoot":"","sources":["../../../src/mass/ui/MassCommandTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAG1E,MAAM,WAAW,uBAAuB;IACtC,0CAA0C;IAC1C,EAAE,EAAE,aAAa,CAAC;CACnB;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,+BAgBhE"}

package/lib/mass/ui/MassCommandTooltip.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TooltipHelpContent } from 'react-science/ui';
+import { massCommands } from "../core/massCommands.js";
+/**
+ * One command's tooltip: its title, what it does, and every way to do it.
+ *
+ * `TooltipHelpContent` from react-science, which is what NMRium's tooltips and
+ * the infrared viewer's are, so a page holding these viewers side by side
+ * explains itself the same way in all of them.
+ * @param props - Component props.
+ * @returns The tooltip's content.
+ */
+export function MassCommandTooltip(props) {
+    const { id } = props;
+    const entry = massCommands[id];
+    const shortcuts = entry.shortcut?.label ?? entry.shortcut?.keys;
+    return (_jsx(TooltipHelpContent, { title: entry.title, description: entry.description, shortcuts: shortcuts === undefined ? undefined : [...shortcuts], subTitles: entry.gestures?.map((gesture) => ({
+            title: gesture.title,
+            shortcuts: [...gesture.shortcuts],
+        })) }));
+}
+//# sourceMappingURL=MassCommandTooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MassCommandTooltip.js","sourceRoot":"","sources":["../../../src/mass/ui/MassCommandTooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAOvD;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAA8B;IAC/D,MAAM,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC;IACrB,MAAM,KAAK,GAAgB,YAAY,CAAC,EAAE,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC;IAEhE,OAAO,CACL,KAAC,kBAAkB,IACjB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAC/D,SAAS,EAAE,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YAC3C,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,SAAS,EAAE,CAAC,GAAG,OAAO,CAAC,SAAS,CAAC;SAClC,CAAC,CAAC,GACH,CACH,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,18 @@
+export interface MassDocumentationDialogProps {
+    /** Whether the dialog is open. */
+    isOpen: boolean;
+    /** Close it. */
+    onClose: () => void;
+}
+/**
+ * How to use the viewer, written in the viewer.
+ *
+ * In the component rather than on a site, so there is nowhere to leave for and
+ * nothing to keep in step: every key in the last section is read out of the
+ * same command table the toolbar and the key handler read, so a shortcut cannot
+ * be documented as one thing and bound as another.
+ * @param props - Component props.
+ * @returns The dialog.
+ */
+export declare function MassDocumentationDialog(props: MassDocumentationDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=MassDocumentationDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MassDocumentationDialog.d.ts","sourceRoot":"","sources":["../../../src/mass/ui/MassDocumentationDialog.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,4BAA4B;IAC3C,kCAAkC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,gBAAgB;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,+BAU1E"}

package/lib/mass/ui/MassDocumentationDialog.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DocumentationDialogFrame } from "../../panel/ui/DocumentationDialogFrame.js";
+import { massCommandLabel, massCommands } from "../core/massCommands.js";
+import { HIGH_RESOLVING_POWER } from "../core/massResolution.js";
+/**
+ * How to use the viewer, written in the viewer.
+ *
+ * In the component rather than on a site, so there is nowhere to leave for and
+ * nothing to keep in step: every key in the last section is read out of the
+ * same command table the toolbar and the key handler read, so a shortcut cannot
+ * be documented as one thing and bound as another.
+ * @param props - Component props.
+ * @returns The dialog.
+ */
+export function MassDocumentationDialog(props) {
+    const { isOpen, onClose } = props;
+    return (_jsx(DocumentationDialogFrame, { isOpen: isOpen, onClose: onClose, title: "Using the mass spectrum viewer", sections: SECTIONS }));
+}
+/**
+ * One row of the gestures table: a command, its key and what it does.
+ * @param props - Component props.
+ * @param props.entry - The command, as the table words it.
+ * @returns The row.
+ */
+function CommandRow(props) {
+    const { entry } = props;
+    const keys = entry.shortcut?.label ?? entry.shortcut?.keys ?? [];
+    const gestures = (entry.gestures ?? []).flatMap((gesture) => gesture.shortcuts);
+    return (_jsxs("tr", { children: [_jsx("th", { style: labelCellStyle, children: entry.title }), _jsx("td", { style: keyCellStyle, children: [...keys, ...gestures].join(' · ') }), _jsx("td", { style: cellStyle, children: entry.description })] }));
+}
+const tableStyle = {
+    width: '100%',
+    borderCollapse: 'collapse',
+    fontSize: 12,
+};
+const cellStyle = { padding: '3px 6px', verticalAlign: 'top' };
+const labelCellStyle = {
+    ...cellStyle,
+    textAlign: 'left',
+    whiteSpace: 'nowrap',
+};
+const keyCellStyle = {
+    ...cellStyle,
+    whiteSpace: 'nowrap',
+    opacity: 0.7,
+};
+/** What the guide says, in reading order. */
+const SECTIONS = [
+    {
+        id: 'open',
+        title: 'Opening a spectrum',
+        body: (_jsxs("p", { children: ["Drop JCAMP-DX files (", _jsx("code", { children: ".jdx" }), ", ", _jsx("code", { children: ".dx" }), ") or two columns of m/z and intensity (", _jsx("code", { children: ".txt" }), ", ", _jsx("code", { children: ".csv" }), ",", ' ', _jsx("code", { children: ".xy" }), ") on the chart, or use ", massCommandLabel('openFiles'), ". A JCAMP holding several blocks, or a GC/MS export holding a page per scan, gives one spectrum per block or page."] })),
+    },
+    {
+        id: 'peaks',
+        title: 'Profile and centroid',
+        body: (_jsx("p", { children: "A continuous profile is peak picked as it is read; a peak table is taken as it stands. Each row of the Spectra panel draws a spectrum as its profile or as its picked peaks, never both. The peaks of the selected spectrum are labelled on the chart: zoom onto a cluster and every line of it is labelled." })),
+    },
+    {
+        id: 'resolution',
+        title: 'High or low resolution',
+        body: (_jsxs("p", { children: ["A profile is measured: the median resolving power of its tallest peaks, at half height, is high resolution from", ' ', HIGH_RESOLVING_POWER.toLocaleString('en-US'), ". A peak table has no widths, so the instrument its file names decides, and failing that the decimals its masses were written with. Masses are written as high resolution, to four decimals, or as nominal masses, whole. To write them another way, pick the number of decimals in the Peaks panel toolbar; it holds for the chart and the tables alike."] })),
+    },
+    {
+        id: 'keys',
+        title: 'Gestures and keys',
+        body: (_jsx("table", { style: tableStyle, children: _jsx("tbody", { children: Object.values(massCommands).map((entry) => (_jsx(CommandRow, { entry: entry }, entry.title))) }) })),
+    },
+];
+//# sourceMappingURL=MassDocumentationDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MassDocumentationDialog.js","sourceRoot":"","sources":["../../../src/mass/ui/MassDocumentationDialog.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,wBAAwB,EAAE,MAAM,4CAA6C,CAAC;AAEvF,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AASjE;;;;;;;;;GASG;AACH,MAAM,UAAU,uBAAuB,CAAC,KAAmC;IACzE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAClC,OAAO,CACL,KAAC,wBAAwB,IACvB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,gCAAgC,EACtC,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,SAAS,UAAU,CAAC,KAA6B;IAC/C,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxB,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,EAAE,KAAK,IAAI,KAAK,CAAC,QAAQ,EAAE,IAAI,IAAI,EAAE,CAAC;IACjE,MAAM,QAAQ,GAAG,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,OAAO,CAC7C,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAC/B,CAAC;IACF,OAAO,CACL,yBACE,aAAI,KAAK,EAAE,cAAc,YAAG,KAAK,CAAC,KAAK,GAAM,EAC7C,aAAI,KAAK,EAAE,YAAY,YAAG,CAAC,GAAG,IAAI,EAAE,GAAG,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAM,EAClE,aAAI,KAAK,EAAE,SAAS,YAAG,KAAK,CAAC,WAAW,GAAM,IAC3C,CACN,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,GAAG;IACjB,KAAK,EAAE,MAAM;IACb,cAAc,EAAE,UAAU;IAC1B,QAAQ,EAAE,EAAE;CACJ,CAAC;AAEX,MAAM,SAAS,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAW,CAAC;AAExE,MAAM,cAAc,GAAG;IACrB,GAAG,SAAS;IACZ,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,QAAQ;CACZ,CAAC;AAEX,MAAM,YAAY,GAAG;IACnB,GAAG,SAAS;IACZ,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,GAAG;CACJ,CAAC;AAEX,6CAA6C;AAC7C,MAAM,QAAQ,GAAoC;IAChD;QACE,EAAE,EAAE,MAAM;QACV,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,CACJ,iDACuB,kCAAiB,QAAE,iCAAgB,6CAClC,kCAAiB,QAAE,kCAAiB,OAAE,GAAG,EAC/D,iCAAgB,6BAAwB,gBAAgB,CAAC,WAAW,CAAC,0HAGnE,CACL;KACF;IACD;QACE,EAAE,EAAE,OAAO;QACX,KAAK,EAAE,sBAAsB;QAC7B,IAAI,EAAE,CACJ,uUAMI,CACL;KACF;IACD;QACE,EAAE,EAAE,YAAY;QAChB,KAAK,EAAE,wBAAwB;QAC/B,IAAI,EAAE,CACJ,2IAE0C,GAAG,EAC1C,oBAAoB,CAAC,cAAc,CAAC,OAAO,CAAC,iWAM3C,CACL;KACF;IACD;QACE,EAAE,EAAE,MAAM;QACV,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,CACJ,gBAAO,KAAK,EAAE,UAAU,YACtB,0BACG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC1C,KAAC,UAAU,IAAmB,KAAK,EAAE,KAAK,IAAzB,KAAK,CAAC,KAAK,CAAkB,CAC/C,CAAC,GACI,GACF,CACT;KACF;CACF,CAAC"}

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

@@ -0,0 +1,78 @@
+import type { Ref } from 'react';
+import type { MassEditorHandle, MassPlotClick } from '../core/massEditorApi.ts';
+import type { MassPanelId } from '../core/massSidePanels.ts';
+import type { MassSpectrum } from '../core/massSpectrum.ts';
+import type { MassSettings } from '../core/massState.ts';
+import type { MassHostPanel } from './massHostPanels.ts';
+export interface MassEditorProps {
+    /**
+     * The spectra to open on. Read when the viewer opens and never again: what is
+     * on the chart belongs to the viewer from then on, so a host re-rendering with
+     * another array does not silently replace what somebody is looking at. The
+     * `ref` handle is how spectra arrive afterwards.
+     * @default []
+     */
+    data?: MassSpectrum[];
+    /**
+     * Called whenever the spectra open change — one loaded, one closed, the chart
+     * cleared — with the spectra now open.
+     *
+     * The document only. A zoom, a selection, a rename and a colour change what is
+     * being looked at rather than what is loaded, and a host told about those
+     * would be told on every drag of the mouse.
+     * @default undefined
+     */
+    onChange?: (spectra: MassSpectrum[]) => void;
+    /**
+     * How the spectra are drawn to begin with: whether the peaks are labelled,
+     * how many, and whether their charges are written.
+     * @default DEFAULT_SETTINGS
+     */
+    settings?: Partial<MassSettings>;
+    /**
+     * The side panels open to begin with: the viewer's own — `'spectra'`,
+     * `'peaks'`, `'metadata'` — or the id of one of `panels`. An id no panel
+     * answers to is ignored.
+     * @default DEFAULT_SIDE_PANELS
+     */
+    defaultPanelIds?: readonly MassPanelId[];
+    /**
+     * Panels the host adds to the viewer's own — a formula to predict an isotopic
+     * pattern from, say. Their icons come first in the activity bar, in the order
+     * given, and each then behaves as a built-in panel does.
+     * @default []
+     */
+    panels?: readonly MassHostPanel[];
+    /**
+     * The plot was clicked (a press that did not travel, so not a zoom drag), with
+     * the m/z it landed at, the picked peak within reach and the spectrum selected
+     * at that moment.
+     * @default undefined
+     */
+    onPlotClick?: (click: MassPlotClick) => void;
+    /**
+     * The handle a host drives the viewer through: take these spectra, read
+     * these files, frame this mass, select that one.
+     * @default undefined
+     */
+    ref?: Ref<MassEditorHandle>;
+}
+/**
+ * A mass spectrum viewer: a header across the top, the chart in the middle, the
+ * tools down the left, and the panels that interrogate it down the right.
+ *
+ * The same shape as the infrared viewer, deliberately — a page may well hold
+ * both, and a chemist who has learned one should not have to learn the other.
+ * Files are dropped on the chart or opened from the toolbar: JCAMP-DX and two
+ * columns of text. A profile is peak picked as it is read, every spectrum is
+ * judged high or low resolution, and the peaks of the selected one are labelled
+ * as the chart is zoomed.
+ *
+ * It is sealed the way NMRium is sealed: the spectra go in as `data` and come
+ * back through `onChange`, and everything else a host wants is a gesture on the
+ * `ref` rather than a prop that has to change to be obeyed.
+ * @param props - Component props.
+ * @returns The viewer.
+ */
+export declare function MassEditor(props: MassEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=MassEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MassEditor.d.ts","sourceRoot":"","sources":["../../../src/mass/ui/MassEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAChF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAIzD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IACtB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACjC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;IACzC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;IAClC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7C;;;;OAIG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAiChD"}

package/lib/mass/ui/MassEditor.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RootLayout } from 'react-science/ui';
+import { MassShell } from "./MassShell.js";
+import { MassStateProvider } from "./MassStateProvider.js";
+import { useMassEditor } from "./useMassEditor.js";
+/**
+ * A mass spectrum viewer: a header across the top, the chart in the middle, the
+ * tools down the left, and the panels that interrogate it down the right.
+ *
+ * The same shape as the infrared viewer, deliberately — a page may well hold
+ * both, and a chemist who has learned one should not have to learn the other.
+ * Files are dropped on the chart or opened from the toolbar: JCAMP-DX and two
+ * columns of text. A profile is peak picked as it is read, every spectrum is
+ * judged high or low resolution, and the peaks of the selected one are labelled
+ * as the chart is zoomed.
+ *
+ * It is sealed the way NMRium is sealed: the spectra go in as `data` and come
+ * back through `onChange`, and everything else a host wants is a gesture on the
+ * `ref` rather than a prop that has to change to be obeyed.
+ * @param props - Component props.
+ * @returns The viewer.
+ */
+export function MassEditor(props) {
+    const { data = NO_SPECTRA, onChange, settings, defaultPanelIds, panels = NO_PANELS, onPlotClick, ref, } = props;
+    const editor = useMassEditor({
+        spectra: data,
+        ...(settings === undefined ? {} : { settings }),
+        ...(defaultPanelIds === undefined ? {} : { panelIds: defaultPanelIds }),
+        ...(onChange === undefined ? {} : { onChange }),
+    });
+    return (_jsx(MassStateProvider, { editor: editor, children: _jsx(RootLayout, { style: rootLayoutStyle, children: _jsx(MassShell, { handle: ref, panels: panels, ...(onPlotClick === undefined ? {} : { onPlotClick }) }) }) }));
+}
+/**
+ * The viewer fills what it is given, and its own children scroll rather than
+ * push: a flex column with no `minHeight` grows past its parent instead.
+ */
+const rootLayoutStyle = { minHeight: 0 };
+/** What a viewer opens on when it is handed nothing, kept stable for the memo. */
+const NO_SPECTRA = [];
+/** What a viewer the host adds no panel to offers, kept stable for the memo. */
+const NO_PANELS = [];
+//# sourceMappingURL=MassEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MassEditor.js","sourceRoot":"","sources":["../../../src/mass/ui/MassEditor.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAO9C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAwDnD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,IAAI,GAAG,UAAU,EACjB,QAAQ,EACR,QAAQ,EACR,eAAe,EACf,MAAM,GAAG,SAAS,EAClB,WAAW,EACX,GAAG,GACJ,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,aAAa,CAAC;QAC3B,OAAO,EAAE,IAAI;QACb,GAAG,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC;QAC/C,GAAG,CAAC,eAAe,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;QACvE,GAAG,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC;KAChD,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,YAK/B,KAAC,UAAU,IAAC,KAAK,EAAE,eAAe,YAChC,KAAC,SAAS,IACR,MAAM,EAAE,GAAG,EACX,MAAM,EAAE,MAAM,KACV,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,GACtD,GACS,GACK,CACrB,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,eAAe,GAAG,EAAE,SAAS,EAAE,CAAC,EAAW,CAAC;AAElD,kFAAkF;AAClF,MAAM,UAAU,GAAmB,EAAE,CAAC;AAEtC,gFAAgF;AAChF,MAAM,SAAS,GAA6B,EAAE,CAAC"}

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

@@ -0,0 +1,12 @@
+/**
+ * The bar across the top: the mark on the left, the viewer on the right.
+ *
+ * Nothing that is done to the spectra is here — that is the rail down the left
+ * and the panels down the right — only what is asked of the viewer itself. The
+ * mark is the About button, in the corner the infrared viewer puts its own, so
+ * a chemist switching between the two looks in one place for what they are in;
+ * and help then full screen close the bar, hard against the right edge.
+ * @returns The header.
+ */
+export declare function MassHeader(): import("react").JSX.Element;
+//# sourceMappingURL=MassHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MassHeader.d.ts","sourceRoot":"","sources":["../../../src/mass/ui/MassHeader.tsx"],"names":[],"mappings":"AAKA;;;;;;;;;GASG;AACH,wBAAgB,UAAU,gCAsBzB"}

package/lib/mass/ui/MassHeader.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Header, Toolbar, useFullscreen } from 'react-science/ui';
+import { MassLogo } from "./MassLogo.js";
+import { useMassCommandProps } from "./massCommandContext.js";
+/**
+ * The bar across the top: the mark on the left, the viewer on the right.
+ *
+ * Nothing that is done to the spectra is here — that is the rail down the left
+ * and the panels down the right — only what is asked of the viewer itself. The
+ * mark is the About button, in the corner the infrared viewer puts its own, so
+ * a chemist switching between the two looks in one place for what they are in;
+ * and help then full screen close the bar, hard against the right edge.
+ * @returns The header.
+ */
+export function MassHeader() {
+    const command = useMassCommandProps();
+    const { isFullScreen } = useFullscreen();
+    return (_jsxs(Header, { children: [_jsx(Toolbar, { "aria-label": "Mass spectrum viewer", children: _jsx(Toolbar.Item, { icon: _jsx(MassLogo, { size: 16 }), ...command('about') }) }), _jsxs(Toolbar, { "aria-label": "Mass spectrum viewer help", children: [_jsx(Toolbar.Item, { icon: "help", ...command('documentation') }), _jsx(Toolbar.Item, { icon: "fullscreen", active: isFullScreen, ...command('fullScreen') })] })] }));
+}
+//# sourceMappingURL=MassHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MassHeader.js","sourceRoot":"","sources":["../../../src/mass/ui/MassHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAA0B,CAAC;AAE/D;;;;;;;;;GASG;AACH,MAAM,UAAU,UAAU;IACxB,MAAM,OAAO,GAAG,mBAAmB,EAAE,CAAC;IACtC,MAAM,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE,CAAC;IAEzC,OAAO,CACL,MAAC,MAAM,eACL,KAAC,OAAO,kBAAY,sBAAsB,YACxC,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAE,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,KAAM,OAAO,CAAC,OAAO,CAAC,GAAI,GAC5D,EACV,MAAC,OAAO,kBAAY,2BAA2B,aAC7C,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,MAAM,KAAK,OAAO,CAAC,eAAe,CAAC,GAAI,EAI1D,KAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE,YAAY,KAChB,OAAO,CAAC,YAAY,CAAC,GACzB,IACM,IACH,CACV,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,21 @@
+import type { ReactElement } from 'react';
+export interface MassLogoProps {
+    /**
+     * Width and height of the mark, in pixels.
+     * @default 16
+     */
+    size?: number;
+}
+/**
+ * The viewer's mark: a labelled spectrum, drawn the way the chart draws one.
+ *
+ * Three sticks on a baseline with a triangle on the tallest — the same shapes,
+ * the same blue and the same orange the chart itself uses, so the mark is a
+ * small piece of the tool's output rather than a picture of it. Three sticks is
+ * what survives being shrunk to a toolbar icon; a fourth closes the gaps between
+ * them and the mark reads as a solid block at 16 pixels.
+ * @param props - Component props.
+ * @returns The mark, as SVG.
+ */
+export declare function MassLogo(props: MassLogoProps): ReactElement;
+//# sourceMappingURL=MassLogo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MassLogo.d.ts","sourceRoot":"","sources":["../../../src/mass/ui/MassLogo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAkC3D"}

package/lib/mass/ui/MassLogo.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CHART_COLORS } from "../../chart/core/chartTheme.js";
+import { SPECTRUM_COLORS } from "../../chart/core/spectrumColor.js";
+/**
+ * The viewer's mark: a labelled spectrum, drawn the way the chart draws one.
+ *
+ * Three sticks on a baseline with a triangle on the tallest — the same shapes,
+ * the same blue and the same orange the chart itself uses, so the mark is a
+ * small piece of the tool's output rather than a picture of it. Three sticks is
+ * what survives being shrunk to a toolbar icon; a fourth closes the gaps between
+ * them and the mark reads as a solid block at 16 pixels.
+ * @param props - Component props.
+ * @returns The mark, as SVG.
+ */
+export function MassLogo(props) {
+    const { size = 16 } = props;
+    return (_jsxs("svg", { width: size, height: size, viewBox: VIEW_BOX, role: "img", "aria-label": "Mass spectrum viewer", children: [_jsx("line", { x1: 2, y1: BASELINE, x2: 30, y2: BASELINE, strokeWidth: BASELINE_WIDTH, style: baselineStyle }), STICKS.map((stick) => (_jsx("line", { x1: stick.x, y1: BASELINE, x2: stick.x, y2: stick.top, strokeWidth: STICK_WIDTH, strokeLinecap: "butt", style: stickStyle }, stick.x))), _jsx("path", { d: MARK, style: markStyle })] }));
+}
+/** Cropped to the ink: a mark carrying its own margin reads as the smaller one. */
+const VIEW_BOX = '1 0 30 29';
+/** Where the sticks stand, in the same units. */
+const BASELINE = 27;
+const BASELINE_WIDTH = 1.4;
+const STICK_WIDTH = 2.6;
+/** The base peak in the middle, with a shoulder either side of it. */
+const STICKS = [
+    { x: 6, top: 15 },
+    { x: 16, top: 7 },
+    { x: 26, top: 19 },
+];
+/** The triangle on the base peak: apex on the tip, body clear of it. */
+const MARK = 'M16 6L12.4 0.6L19.6 0.6Z';
+const baselineStyle = { stroke: CHART_COLORS.axis };
+const stickStyle = { stroke: SPECTRUM_COLORS[0] };
+const markStyle = { fill: CHART_COLORS.highlight };
+//# sourceMappingURL=MassLogo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MassLogo.js","sourceRoot":"","sources":["../../../src/mass/ui/MassLogo.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAUpE;;;;;;;;;;GAUG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAE5B,OAAO,CACL,eACE,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAC,KAAK,gBACC,sBAAsB,aAEjC,eACE,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,QAAQ,EACZ,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,QAAQ,EACZ,WAAW,EAAE,cAAc,EAC3B,KAAK,EAAE,aAAa,GACpB,EACD,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,eAEE,EAAE,EAAE,KAAK,CAAC,CAAC,EACX,EAAE,EAAE,QAAQ,EACZ,EAAE,EAAE,KAAK,CAAC,CAAC,EACX,EAAE,EAAE,KAAK,CAAC,GAAG,EACb,WAAW,EAAE,WAAW,EACxB,aAAa,EAAC,MAAM,EACpB,KAAK,EAAE,UAAU,IAPZ,KAAK,CAAC,CAAC,CAQZ,CACH,CAAC,EACF,eAAM,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,GAAI,IAC/B,CACP,CAAC;AACJ,CAAC;AAED,mFAAmF;AACnF,MAAM,QAAQ,GAAG,WAAW,CAAC;AAE7B,iDAAiD;AACjD,MAAM,QAAQ,GAAG,EAAE,CAAC;AAEpB,MAAM,cAAc,GAAG,GAAG,CAAC;AAC3B,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB,sEAAsE;AACtE,MAAM,MAAM,GAAG;IACb,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;IACjB,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;IACjB,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE;CACV,CAAC;AAEX,wEAAwE;AACxE,MAAM,IAAI,GAAG,0BAA0B,CAAC;AAExC,MAAM,aAAa,GAAG,EAAE,MAAM,EAAE,YAAY,CAAC,IAAI,EAAW,CAAC;AAE7D,MAAM,UAAU,GAAG,EAAE,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,EAAW,CAAC;AAE3D,MAAM,SAAS,GAAG,EAAE,IAAI,EAAE,YAAY,CAAC,SAAS,EAAW,CAAC"}

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

@@ -0,0 +1,44 @@
+import type { ReactElement } from 'react';
+import type { PlotRect } from '../../chart/core/chartGeometry.ts';
+import type { ChartPoint } from '../../chart/core/svgPoint.ts';
+import type { MassReadout } from './useMassPointer.ts';
+export interface MassPointerTrackerProps {
+    /** Where the pointer is, `null` whenever it is off the plot. */
+    position: ChartPoint | null;
+    /** What the axes read under it, `null` whenever it is off the plot. */
+    readout: MassReadout | null;
+    /** Where the plot sits inside the SVG. */
+    plot: PlotRect;
+    /**
+     * How many decimals the masses on screen are written with.
+     * @default 4
+     */
+    mzDecimals?: number;
+    /**
+     * What one unit of the measured intensity is written as.
+     * @default 1
+     */
+    intensityScale?: number;
+    /**
+     * The sign that unit carries, `%` on a derived basis. This number stands on
+     * its own with nothing beside it to say what it is, so it takes the sign where
+     * the axis would otherwise have carried it.
+     * @default ''
+     */
+    suffix?: string;
+}
+/**
+ * The crosshair, and what the axes say where it stands.
+ *
+ * Two rules rather than one, because both axes are being read: the vertical one
+ * answers *what mass is this*, and the horizontal one answers *how tall is that
+ * against this*, which is how a peak is judged against its neighbours without
+ * counting grid lines. The picked peak within reach is not written here: the
+ * guide on its exact m/z and its lit row in the peak table say which it is, and
+ * a readout a line longer than the shared chart places would run off the foot
+ * of the plot.
+ * @param props - Component props.
+ * @returns The crosshair, or nothing while the pointer is off the plot.
+ */
+export declare function MassPointerTracker(props: MassPointerTrackerProps): ReactElement | null;
+//# sourceMappingURL=MassPointerTracker.d.ts.map