react-cheminfo 0.28.0 → 0.29.0

package/lib/ir/ui/IrChart.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, 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 { SelectionRect } from "../../chart/ui/SelectionRect.js";
+import { chartSurfaceStyle } from "../../chart/ui/chartSurface.js";
+import { useChartSize } from "../../chart/ui/useChartSize.js";
+import { boxZoomOnly, yAxisTitle } from "../core/irMode.js";
+import { BandMarks } from "./BandMarks.js";
+import { IrPointerTracker } from "./IrPointerTracker.js";
+import { IrTraces } from "./IrTraces.js";
+import { useIrPointer } from "./useIrPointer.js";
+import { useIrZoom } from "./useIrZoom.js";
+/**
+ * The chart: every layer of an infrared spectrum, in one SVG.
+ *
+ * **The wavenumber axis runs right to left**, 4000 at the left edge down to 400
+ * at the right, which is how every infrared spectrum has been printed since the
+ * technique was dispersive and the instrument scanned that way. It is done by
+ * building the scale onto a reversed pixel range and nothing else: the data stays
+ * in ascending wavenumbers, every window stays low end first, and no other piece
+ * of arithmetic in either package has to know. That is the whole reason
+ * `createScale` takes its range rather than deriving it.
+ *
+ * The axes go under the data, so a grid line is never read as a band. Only the
+ * data band is clipped, so a zoomed trace stops at the plot edge while the
+ * wavenumbers pinned to the bands are allowed out over the margin — clip those
+ * and the strongest band in the window loses its label. The drag rectangle and
+ * the crosshair go over everything, because each answers a question being asked
+ * right now.
+ *
+ * Nothing is held here. The spectra, the bands, 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 IrChart(props) {
+    const { spectra, mode = 'transmittance', assigned = NO_BANDS, showAssignments = false, labelLimit, highlight = null, onHighlight, domain = null, onDomainChange, drag = 'xAxis', 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 = useIrZoom({ spectra, mode, svgRef, plot, domain, drag });
+    // The scales the zoom measured its gestures against — the x one running right
+    // to left. Taken from the hook rather than built here, because two scales over
+    // one axis is two chances to disagree about which way it runs, and a chart that
+    // disagreed with its own gestures would zoom to the mirror image of whatever
+    // was dragged over.
+    const { domain: shown, xScale, yScale, selection, handlers } = zoom;
+    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 (sameChartDomain(reported.current, shown))
+            return;
+        reported.current = shown;
+        onDomainChange?.(shown);
+    }, [shown, onDomainChange]);
+    const bands = useMemo(() => {
+        const found = [];
+        for (const entry of assigned)
+            found.push(entry.band);
+        return found;
+    }, [assigned]);
+    const onBand = useCallback((band) => {
+        onHighlight?.(band);
+    }, [onHighlight]);
+    const pointer = useIrPointer({
+        svgRef,
+        plot,
+        xScale,
+        yScale,
+        mode,
+        bands,
+        onBand,
+    });
+    // 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 = `ir-plot-${useId().replaceAll(/\W/g, '')}`;
+    return (_jsx("div", { ref: containerRef, style: containerStyle, children: _jsxs("svg", { ref: svgRef, role: "img", "aria-label": chartLabel(mode), width: frameWidth, height: frameHeight, viewBox: `0 0 ${frameWidth} ${frameHeight}`, 
+            // The arrow gives way to the chart's own crosshair over the plot, and
+            // comes back over the margins, exactly as it does on a mass chart.
+            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: "wavenumber (cm\u207B\u00B9)", yTitle: yAxisTitle(mode) }), _jsxs("g", { clipPath: `url(#${clipId})`, children: [_jsx(IrTraces, { spectra: spectra, mode: mode, plot: plot, xDomain: shown.x, xScale: xScale, yScale: yScale, emphasisedId: emphasisedId }), children] }), _jsx(BandMarks, { assigned: assigned, plot: plot, xScale: xScale, yScale: yScale, mode: mode, showAssignments: showAssignments, highlight: highlight, ...(labelLimit === undefined ? {} : { limit: labelLimit }) }), _jsx(SelectionRect, { selection: selection, plot: plot }), _jsx(IrPointerTracker, { position: pointer.position, readout: pointer.readout, plot: plot })] }) }));
+}
+/**
+ * What the chart is, and what can be done to it, for whoever cannot see it.
+ *
+ * The gestures differ by mode, so the sentence does too — a label promising the
+ * wheel to a reader who cannot watch it fail to do anything is worse than no
+ * label at all.
+ * @param mode - Which value axis is being drawn.
+ * @returns The label.
+ */
+function chartLabel(mode) {
+    const axis = `Infrared spectrum read as ${yAxisTitle(mode)}, wavenumber running from high at the left to low at the right.`;
+    return boxZoomOnly(mode)
+        ? `${axis} Drag a rectangle over it to zoom to that rectangle, and double click to fit everything again.`
+        : `${axis} Drag across it to zoom the wavenumber axis, drag past the baseline to take the value axis with it, turn the wheel to scale the value axis, and double click to fit everything again.`;
+}
+/** What a chart nobody has picked any bands for marks. */
+const NO_BANDS = Object.freeze([]);
+/** The box the chart is measured against, and fills. */
+const containerStyle = { width: '100%', height: '100%' };
+//# sourceMappingURL=IrChart.js.map

package/lib/ir/ui/IrChart.js.map

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

package/lib/ir/ui/IrCommandProvider.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { IrCommandHandlers } from '../core/irCommands.ts';
+export interface IrCommandProviderProps {
+    /** What each command does. */
+    handlers: IrCommandHandlers;
+    /** 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 IrCommandProvider(props: IrCommandProviderProps): import("react").JSX.Element;
+//# sourceMappingURL=IrCommandProvider.d.ts.map

package/lib/ir/ui/IrCommandProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrCommandProvider.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrCommandProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAK/D,MAAM,WAAW,sBAAsB;IACrC,8BAA8B;IAC9B,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAW9D"}

package/lib/ir/ui/IrCommandProvider.js

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

package/lib/ir/ui/IrCommandProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrCommandProvider.js","sourceRoot":"","sources":["../../../src/ir/ui/IrCommandProvider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAKhC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAwB,CAAC;AASxD;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,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,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA2B,CAC5E,CAAC;AACJ,CAAC"}

package/lib/ir/ui/IrCommandTooltip.d.ts

@@ -0,0 +1,16 @@
+import type { IrCommandId } from '../core/irCommands.ts';
+export interface IrCommandTooltipProps {
+    /** Which command the tooltip is about. */
+    id: IrCommandId;
+}
+/**
+ * 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 are,
+ * so a page holding this viewer beside NMRium or the glycan editor explains
+ * itself the same way in all three.
+ * @param props - Component props.
+ * @returns The tooltip's content.
+ */
+export declare function IrCommandTooltip(props: IrCommandTooltipProps): import("react").JSX.Element;
+//# sourceMappingURL=IrCommandTooltip.d.ts.map

package/lib/ir/ui/IrCommandTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrCommandTooltip.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrCommandTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGpE,MAAM,WAAW,qBAAqB;IACpC,0CAA0C;IAC1C,EAAE,EAAE,WAAW,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,+BAgB5D"}

package/lib/ir/ui/IrCommandTooltip.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TooltipHelpContent } from 'react-science/ui';
+import { irCommands } from "../core/irCommands.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 are,
+ * so a page holding this viewer beside NMRium or the glycan editor explains
+ * itself the same way in all three.
+ * @param props - Component props.
+ * @returns The tooltip's content.
+ */
+export function IrCommandTooltip(props) {
+    const { id } = props;
+    const entry = irCommands[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=IrCommandTooltip.js.map

package/lib/ir/ui/IrCommandTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrCommandTooltip.js","sourceRoot":"","sources":["../../../src/ir/ui/IrCommandTooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAOnD;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC;IACrB,MAAM,KAAK,GAAG,UAAU,CAAC,EAAE,CAAc,CAAC;IAC1C,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/ir/ui/IrDocumentationDialog.d.ts

@@ -0,0 +1,18 @@
+export interface IrDocumentationDialogProps {
+    /** 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 table below is read out of the same
+ * `irCommands` 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 IrDocumentationDialog(props: IrDocumentationDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=IrDocumentationDialog.d.ts.map

package/lib/ir/ui/IrDocumentationDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrDocumentationDialog.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrDocumentationDialog.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,0BAA0B;IACzC,kCAAkC;IAClC,MAAM,EAAE,OAAO,CAAC;IAChB,gBAAgB;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,+BAmEtE"}

package/lib/ir/ui/IrDocumentationDialog.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogBody } from '@blueprintjs/core';
+import { TOKEN } from "../../tokens/core/familyTokens.js";
+import { irCommands } from "../core/irCommands.js";
+import { IR_MODE_RULES } from "../core/irMode.js";
+import { IrLogo } from "./IrLogo.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 table below is read out of the same
+ * `irCommands` 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 IrDocumentationDialog(props) {
+    const { isOpen, onClose } = props;
+    return (_jsx(Dialog, { isOpen: isOpen, onClose: onClose, title: "Using the infrared viewer", icon: _jsx(IrLogo, { size: 20 }), style: dialogStyle, children: _jsxs(DialogBody, { children: [_jsx("h4", { style: headingStyle, children: "Opening a spectrum" }), _jsxs("p", { style: paragraphStyle, children: ["JCAMP-DX (", _jsx("code", { children: ".jdx" }), ", ", _jsx("code", { children: ".dx" }), ") and Thermo Galactic SPC (", _jsx("code", { children: ".spc" }), ") are read. A file holding several blocks \u2014 a sample beside its background, or an infrared spectrum beside a Raman one \u2014 gives one spectrum per infrared block; the others are left to their own viewers. Two columns of numbers are not read yet."] }), _jsx("h4", { style: headingStyle, children: "The axis runs backwards" }), _jsx("p", { style: paragraphStyle, children: "Wavenumber decreases to the right, from 4000 cm\u207B\u00B9 down to 400, which is how infrared spectra have been printed since the instruments scanned that way. Every window is still stated low end first." }), _jsx("h4", { style: headingStyle, children: "Absorbance or transmittance" }), _jsxs("p", { style: paragraphStyle, children: ["The same measurement, read the other way up \u2014 the file carries both, whichever it was written in. In", ' ', _jsx("strong", { children: IR_MODE_RULES.transmittance.title }), " the bands hang down from a baseline near 100; in", ' ', _jsx("strong", { children: IR_MODE_RULES.absorbance.title }), " they stand up out of zero. The labels and the marks follow, so the pair reads the same way up in either."] }), _jsx("h4", { style: headingStyle, children: "Reading the bands" }), _jsxs("p", { style: paragraphStyle, children: ["The bands of the ", _jsx("em", { children: "selected" }), " spectrum are picked, marked on the chart, and listed in the bands panel with", ' ', _jsx("strong", { children: "every vibration whose range contains them" }), " \u2014 narrowest claim first. That is deliberate: a band at 1715 cm\u207B\u00B9 really is a ketone, an aldehyde and a carboxylic acid until something else decides between them, and the note on each candidate is what tells them apart. Hovering a row marks the band on the chart, and hovering the chart lights the row."] }), _jsx("p", { style: paragraphStyle, children: "A band is reported at the sampled point it peaked on, so on a 4 cm\u207B\u00B9 grid a carbonyl centred at 1710 reads 1708 or 1712. Do not quote one as though it were measured to the wavenumber." }), _jsx("h4", { style: headingStyle, children: "Gestures and keys" }), _jsx("table", { style: tableStyle, children: _jsx("tbody", { children: Object.keys(irCommands).map((id) => (_jsx(CommandRow, { id: id }, id))) }) })] }) }));
+}
+/**
+ * One command: what it is called, its key, and what it does.
+ * @param props - Component props.
+ * @returns The row.
+ */
+function CommandRow(props) {
+    const { id } = props;
+    const entry = irCommands[id];
+    const keys = entry.shortcut?.label ?? entry.shortcut?.keys;
+    return (_jsxs("tr", { children: [_jsx("th", { style: commandCellStyle, children: entry.title }), _jsxs("td", { style: keyCellStyle, children: [keys === undefined
+                        ? null
+                        : keys.map((key) => (_jsx("kbd", { style: keyStyle, children: key }, key))), entry.gestures?.map((gesture) => (_jsx("span", { style: gestureStyle, children: gesture.shortcuts.join(', ') }, gesture.title)))] }), _jsx("td", { style: descriptionCellStyle, children: entry.description })] }));
+}
+const dialogStyle = { width: 'min(760px, 92vw)' };
+const headingStyle = { margin: '14px 0 4px' };
+const paragraphStyle = { margin: '0 0 6px' };
+const tableStyle = {
+    width: '100%',
+    borderCollapse: 'collapse',
+    fontSize: 13,
+};
+const commandCellStyle = {
+    textAlign: 'left',
+    fontWeight: 600,
+    verticalAlign: 'top',
+    padding: '3px 8px 3px 0',
+    whiteSpace: 'nowrap',
+};
+const keyCellStyle = {
+    verticalAlign: 'top',
+    padding: '3px 8px 3px 0',
+    whiteSpace: 'nowrap',
+};
+const descriptionCellStyle = {
+    verticalAlign: 'top',
+    padding: '3px 0',
+};
+const keyStyle = {
+    display: 'inline-block',
+    marginRight: 3,
+    padding: '0 4px',
+    border: `1px solid ${TOKEN.border}`,
+    borderRadius: 3,
+    background: TOKEN.surfaceSunken,
+    fontSize: 11,
+};
+const gestureStyle = { opacity: 0.7, fontSize: 12 };
+//# sourceMappingURL=IrDocumentationDialog.js.map

package/lib/ir/ui/IrDocumentationDialog.js.map

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

package/lib/ir/ui/IrEditor.d.ts

@@ -0,0 +1,60 @@
+import type { Ref } from 'react';
+import type { IrEditorHandle } from '../core/irEditorApi.ts';
+import type { IrSidePanelId } from '../core/irSidePanels.ts';
+import type { IrMode, IrSpectrum } from '../core/irSpectrum.ts';
+export interface IrEditorProps {
+    /**
+     * 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?: IrSpectrum[];
+    /**
+     * 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: IrSpectrum[]) => void;
+    /**
+     * Which value axis to open in.
+     * @default 'transmittance'
+     */
+    mode?: IrMode;
+    /**
+     * The side panels open to begin with.
+     * @default DEFAULT_SIDE_PANELS
+     */
+    defaultPanelIds?: IrSidePanelId[];
+    /**
+     * The handle a host drives the viewer through: take these spectra, frame this
+     * wavenumber, select that one.
+     * @default undefined
+     */
+    ref?: Ref<IrEditorHandle>;
+}
+/**
+ * An infrared 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 mass viewer, deliberately — a page may well hold both,
+ * and a chemist who has learned one should not have to learn the other. The chart
+ * is where a spectrum is read and the panels are where it is questioned, which is
+ * why the panels are switched on from the activity bar on the far right: a
+ * spectrum is mostly chart, and a panel is worth its width only while it is being
+ * used.
+ *
+ * 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 — frame this band, take
+ * these spectra — 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 IrEditor(props: IrEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=IrEditor.d.ts.map

package/lib/ir/ui/IrEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrEditor.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAMhE,MAAM,WAAW,aAAa;IAC5B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;IACpB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAC3C;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,eAAe,CAAC,EAAE,aAAa,EAAE,CAAC;IAClC;;;;OAIG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAsB5C"}

package/lib/ir/ui/IrEditor.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RootLayout } from 'react-science/ui';
+import { IrShell } from "./IrShell.js";
+import { IrStateProvider } from "./IrStateProvider.js";
+import { useIrEditor } from "./useIrEditor.js";
+/**
+ * An infrared 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 mass viewer, deliberately — a page may well hold both,
+ * and a chemist who has learned one should not have to learn the other. The chart
+ * is where a spectrum is read and the panels are where it is questioned, which is
+ * why the panels are switched on from the activity bar on the far right: a
+ * spectrum is mostly chart, and a panel is worth its width only while it is being
+ * used.
+ *
+ * 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 — frame this band, take
+ * these spectra — 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 IrEditor(props) {
+    const { data = NO_SPECTRA, onChange, mode, defaultPanelIds, ref } = props;
+    const editor = useIrEditor({
+        spectra: data,
+        settings: mode === undefined ? undefined : { mode },
+        panelIds: defaultPanelIds,
+        onChange,
+    });
+    return (_jsx(IrStateProvider, { editor: editor, children: _jsx(RootLayout, { style: rootLayoutStyle, children: _jsx(IrShell, { handle: ref }) }) }));
+}
+/**
+ * The viewer fills what it is given, and its own children scroll rather than
+ * push: `react-science` lays its root out as a column of full width and height,
+ * and 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 = [];
+//# sourceMappingURL=IrEditor.js.map

package/lib/ir/ui/IrEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrEditor.js","sourceRoot":"","sources":["../../../src/ir/ui/IrEditor.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAM9C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAe,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAuB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAuC/C;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,IAAI,GAAG,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,eAAe,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IAE1E,MAAM,MAAM,GAAG,WAAW,CAAC;QACzB,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE;QACnD,QAAQ,EAAE,eAAe;QACzB,QAAQ;KACT,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,YAM7B,KAAC,UAAU,IAAC,KAAK,EAAE,eAAe,YAChC,KAAC,OAAO,IAAC,MAAM,EAAE,GAAG,GAAI,GACb,GACG,CACnB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,EAAE,SAAS,EAAE,CAAC,EAAW,CAAC;AAElD,kFAAkF;AAClF,MAAM,UAAU,GAAiB,EAAE,CAAC"}

package/lib/ir/ui/IrHeader.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 `react-mass` and `react-glycan` put
+ * theirs in, so a chemist switching between the three tools looks in one place
+ * for what they are in; and help then full screen close the bar, hard against
+ * the right edge, in all three.
+ * @returns The header.
+ */
+export declare function IrHeader(): import("react").JSX.Element;
+//# sourceMappingURL=IrHeader.d.ts.map

package/lib/ir/ui/IrHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrHeader.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrHeader.tsx"],"names":[],"mappings":"AAKA;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,gCAsBvB"}

package/lib/ir/ui/IrHeader.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Header, Toolbar, useFullscreen } from 'react-science/ui';
+import { IrLogo } from "./IrLogo.js";
+import { useIrCommandProps } from "./irCommandContext.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 `react-mass` and `react-glycan` put
+ * theirs in, so a chemist switching between the three tools looks in one place
+ * for what they are in; and help then full screen close the bar, hard against
+ * the right edge, in all three.
+ * @returns The header.
+ */
+export function IrHeader() {
+    const command = useIrCommandProps();
+    const { isFullScreen } = useFullscreen();
+    return (_jsxs(Header, { children: [_jsx(Toolbar, { "aria-label": "Infrared spectrum viewer", children: _jsx(Toolbar.Item, { icon: _jsx(IrLogo, { size: 16 }), ...command('about') }) }), _jsxs(Toolbar, { "aria-label": "Infrared spectrum viewer help", children: [_jsx(Toolbar.Item, { icon: "help", ...command('documentation') }), _jsx(Toolbar.Item, { icon: "fullscreen", active: isFullScreen, ...command('fullScreen') })] })] }));
+}
+//# sourceMappingURL=IrHeader.js.map

package/lib/ir/ui/IrHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrHeader.js","sourceRoot":"","sources":["../../../src/ir/ui/IrHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAElE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAc,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAwB,CAAC;AAE3D;;;;;;;;;;GAUG;AACH,MAAM,UAAU,QAAQ;IACtB,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,MAAM,EAAE,YAAY,EAAE,GAAG,aAAa,EAAE,CAAC;IAEzC,OAAO,CACL,MAAC,MAAM,eACL,KAAC,OAAO,kBAAY,0BAA0B,YAC5C,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAE,KAAC,MAAM,IAAC,IAAI,EAAE,EAAE,GAAI,KAAM,OAAO,CAAC,OAAO,CAAC,GAAI,GAC1D,EACV,MAAC,OAAO,kBAAY,+BAA+B,aACjD,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/ir/ui/IrLogo.d.ts

@@ -0,0 +1,20 @@
+export interface IrLogoProps {
+    /**
+     * How big to draw it, in pixels.
+     * @default 16
+     */
+    size?: number;
+}
+/**
+ * The viewer's mark: three bands hanging from a baseline.
+ *
+ * Drawn from the domain's own primitives rather than being a picture of a chart —
+ * a transmittance baseline near the top with a strong band, a medium one and a
+ * weak one dropping out of it, which is what an infrared spectrum looks like at a
+ * glance and what nothing else looks like. Three elements, because that is what
+ * survives 16 pixels.
+ * @param props - Component props.
+ * @returns The mark, as SVG.
+ */
+export declare function IrLogo(props: IrLogoProps): import("react").JSX.Element;
+//# sourceMappingURL=IrLogo.d.ts.map

package/lib/ir/ui/IrLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrLogo.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrLogo.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+BA6BxC"}

package/lib/ir/ui/IrLogo.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The viewer's mark: three bands hanging from a baseline.
+ *
+ * Drawn from the domain's own primitives rather than being a picture of a chart —
+ * a transmittance baseline near the top with a strong band, a medium one and a
+ * weak one dropping out of it, which is what an infrared spectrum looks like at a
+ * glance and what nothing else looks like. Three elements, because that is what
+ * survives 16 pixels.
+ * @param props - Component props.
+ * @returns The mark, as SVG.
+ */
+export function IrLogo(props) {
+    const { size = 16 } = props;
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", role: "img", "aria-label": "Infrared viewer", children: [_jsx("path", { d: "M1 3H15", fill: "none", stroke: "#94a3b8", strokeWidth: 1, strokeLinecap: "round" }), _jsx("path", { d: "M3 3V13M8 3V8.5M12.5 3V6", fill: "none", stroke: "#0072b2", strokeWidth: 2, strokeLinecap: "round" })] }));
+}
+//# sourceMappingURL=IrLogo.js.map

package/lib/ir/ui/IrLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrLogo.js","sourceRoot":"","sources":["../../../src/ir/ui/IrLogo.tsx"],"names":[],"mappings":";AAQA;;;;;;;;;;GAUG;AACH,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IAE5B,OAAO,CACL,eACE,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,KAAK,gBACC,iBAAiB,aAG5B,eACE,CAAC,EAAC,SAAS,EACX,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,WAAW,EAAE,CAAC,EACd,aAAa,EAAC,OAAO,GACrB,EAEF,eACE,CAAC,EAAC,0BAA0B,EAC5B,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EAChB,WAAW,EAAE,CAAC,EACd,aAAa,EAAC,OAAO,GACrB,IACE,CACP,CAAC;AACJ,CAAC"}

package/lib/ir/ui/IrPointerTracker.d.ts

@@ -0,0 +1,29 @@
+import type { ReactElement } from 'react';
+import type { PlotRect } from '../../chart/core/chartGeometry.ts';
+import type { ChartPoint } from '../../chart/core/svgPoint.ts';
+import type { IrReadout } from './useIrPointer.ts';
+export interface IrPointerTrackerProps {
+    /** 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: IrReadout | null;
+    /** Where the plot sits inside the SVG. */
+    plot: PlotRect;
+}
+/**
+ * The crosshair, and what the axes say under it.
+ *
+ * Drawn last of everything, so it is never occluded by what it is being used to
+ * read. Where the text goes is `readoutPlacement` in the shared chart, which
+ * flips it to the left of the pointer near the right edge and holds it inside the
+ * plot at the top — the same placement the mass viewer uses, because the awkward
+ * places are the same places in any chart.
+ *
+ * A third line names the band under the pointer when there is one, which is what
+ * makes the crosshair worth having on an infrared chart: the wavenumber alone is
+ * a number a reader then has to look up.
+ * @param props - Component props.
+ * @returns The crosshair and its readout, or nothing while the pointer is away.
+ */
+export declare function IrPointerTracker(props: IrPointerTrackerProps): ReactElement | null;
+//# sourceMappingURL=IrPointerTracker.d.ts.map

package/lib/ir/ui/IrPointerTracker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrPointerTracker.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrPointerTracker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAMlE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAQ/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,MAAM,WAAW,qBAAqB;IACpC,gEAAgE;IAChE,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAC;IAC5B,uEAAuE;IACvE,OAAO,EAAE,SAAS,GAAG,IAAI,CAAC;IAC1B,0CAA0C;IAC1C,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,qBAAqB,GAC3B,YAAY,GAAG,IAAI,CA2CrB"}

package/lib/ir/ui/IrPointerTracker.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CHART_COLORS, CHART_FONT, LABEL_HALO, } from "../../chart/core/chartTheme.js";
+import { readoutPlacement } from "../../chart/core/trackerReadout.js";
+import { formatIrValue, formatWavenumber, shortModeLabel, } from "../core/irFormat.js";
+/**
+ * The crosshair, and what the axes say under it.
+ *
+ * Drawn last of everything, so it is never occluded by what it is being used to
+ * read. Where the text goes is `readoutPlacement` in the shared chart, which
+ * flips it to the left of the pointer near the right edge and holds it inside the
+ * plot at the top — the same placement the mass viewer uses, because the awkward
+ * places are the same places in any chart.
+ *
+ * A third line names the band under the pointer when there is one, which is what
+ * makes the crosshair worth having on an infrared chart: the wavenumber alone is
+ * a number a reader then has to look up.
+ * @param props - Component props.
+ * @returns The crosshair and its readout, or nothing while the pointer is away.
+ */
+export function IrPointerTracker(props) {
+    const { position, readout, plot } = props;
+    if (position === null || readout === null)
+        return null;
+    const band = readout.band;
+    const lines = [
+        `${formatWavenumber(readout.wavenumber)} cm⁻¹`,
+        `${shortModeLabel(readout.mode)} ${formatIrValue(readout.value, readout.mode)}`,
+    ];
+    if (band !== null) {
+        lines.push(`band ${formatWavenumber(band.wavenumber)} (${band.strength})`);
+    }
+    const place = readoutPlacement(position, plot, lines.length);
+    return (_jsxs("g", { pointerEvents: "none", children: [_jsx("line", { x1: position.x, y1: plot.top, x2: position.x, y2: plot.bottom, style: crosshairStyle }), _jsx("line", { x1: plot.left, y1: position.y, x2: plot.right, y2: position.y, style: crosshairStyle }), lines.map((line, index) => (_jsx("text", { x: place.x, y: place.y + index * CHART_FONT.readout, textAnchor: place.anchor, style: readoutStyle, children: line }, line)))] }));
+}
+const crosshairStyle = {
+    stroke: CHART_COLORS.tracker,
+    strokeDasharray: '3 3',
+};
+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=IrPointerTracker.js.map

package/lib/ir/ui/IrPointerTracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IrPointerTracker.js","sourceRoot":"","sources":["../../../src/ir/ui/IrPointerTracker.tsx"],"names":[],"mappings":";AAGA,OAAO,EACL,YAAY,EACZ,UAAU,EACV,UAAU,GACX,MAAM,gCAAgC,CAAC;AAExC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACtE,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,cAAc,GACf,MAAM,qBAAqB,CAAC;AAa7B;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,gBAAgB,CAC9B,KAA4B;IAE5B,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAC1C,IAAI,QAAQ,KAAK,IAAI,IAAI,OAAO,KAAK,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvD,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAC1B,MAAM,KAAK,GAAG;QACZ,GAAG,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;QAC9C,GAAG,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE;KAChF,CAAC;IACF,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC;QAClB,KAAK,CAAC,IAAI,CAAC,QAAQ,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IAC7E,CAAC;IACD,MAAM,KAAK,GAAG,gBAAgB,CAAC,QAAQ,EAAE,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAE7D,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,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,KAAK,EAAE,cAAc,GACrB,EACD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,eAEE,CAAC,EAAE,KAAK,CAAC,CAAC,EACV,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,GAAG,UAAU,CAAC,OAAO,EACvC,UAAU,EAAE,KAAK,CAAC,MAAM,EACxB,KAAK,EAAE,YAAY,YAElB,IAAI,IANA,IAAI,CAOJ,CACR,CAAC,IACA,CACL,CAAC;AACJ,CAAC;AAED,MAAM,cAAc,GAAG;IACrB,MAAM,EAAE,YAAY,CAAC,OAAO;IAC5B,eAAe,EAAE,KAAK;CACd,CAAC;AAEX,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"}