react-cheminfo 0.28.0 → 0.29.0

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

@@ -0,0 +1,25 @@
+import type { Ref } from 'react';
+import type { IrEditorHandle } from '../core/irEditorApi.ts';
+export interface IrShellProps {
+    /**
+     * The handle to fill in, once there is a state for it to act on.
+     * @default undefined
+     */
+    handle?: Ref<IrEditorHandle>;
+}
+/**
+ * The viewer's screen: a header, the rails, and the split between the chart and
+ * the panels.
+ *
+ * Kept apart from `IrEditor` so that the handle, the commands and the highlight —
+ * all of which need the state — sit below the providers rather than beside them,
+ * and so the sealed component above is nothing but its props.
+ *
+ * The panels run to the bottom edge while the status bar stops at the splitter,
+ * which is what says the bar belongs to the chart and the panels are their own
+ * column.
+ * @param props - Component props.
+ * @returns The screen.
+ */
+export declare function IrShell(props: IrShellProps): import("react").JSX.Element;
+//# sourceMappingURL=IrShell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IrShell.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAWjC,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,wBAAwB,CAAC;AAgBhF,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,+BAuL1C"}

package/lib/ir/ui/IrShell.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import { SplitPane, useFullscreen } from 'react-science/ui';
+import { sanitizeFileName } from "../../download/core/sanitizeFileName.js";
+import { ExportImageDialog } from "../../download/ui/ExportImageDialog.js";
+import { useDrawingBox } from "../../download/ui/useDrawingBox.js";
+import { PanelRail } from "../../panel/ui/PanelRail.js";
+import { fullDomain } from "../core/irDomain.js";
+import { otherIrMode, yAxisRules } from "../core/irMode.js";
+import { irSidePanels } from "../core/irSidePanels.js";
+import { DEFAULT_SIDE_PANEL } from "../core/irState.js";
+import { IrAboutDialog } from "./IrAboutDialog.js";
+import { IrCanvas } from "./IrCanvas.js";
+import { IrCommandProvider } from "./IrCommandProvider.js";
+import { IrDocumentationDialog } from "./IrDocumentationDialog.js";
+import { IrHeader } from "./IrHeader.js";
+import { IrSidePanel } from "./IrSidePanel.js";
+import { IrToolbar } from "./IrToolbar.js";
+import { useIrActions, useIrEditorState } from "./irStateContext.js";
+import { useIrShortcuts } from "./useIrShortcuts.js";
+/**
+ * The viewer's screen: a header, the rails, and the split between the chart and
+ * the panels.
+ *
+ * Kept apart from `IrEditor` so that the handle, the commands and the highlight —
+ * all of which need the state — sit below the providers rather than beside them,
+ * and so the sealed component above is nothing but its props.
+ *
+ * The panels run to the bottom edge while the status bar stops at the splitter,
+ * which is what says the bar belongs to the chart and the panels are their own
+ * column.
+ * @param props - Component props.
+ * @returns The screen.
+ */
+export function IrShell(props) {
+    const { handle } = props;
+    const { state, visibleSpectra, selectedSpectrum } = useIrEditorState();
+    const actions = useIrActions();
+    const { toggle: toggleFullScreen } = useFullscreen();
+    const { openPanelIds, tool, domain } = state.view;
+    const { mode, pickBands, showAssignments } = state.settings;
+    const [isAboutOpen, setIsAboutOpen] = useState(false);
+    const [isDocumentationOpen, setIsDocumentationOpen] = useState(false);
+    const [isExportImageOpen, setIsExportImageOpen] = useState(false);
+    // The chart is the picture, so the box it is drawn in is what the export
+    // dialog is pointed at: the viewer around it is full of SVG — every icon in
+    // every toolbar is one — and the first found there would be a magnifier.
+    const chart = useDrawingBox();
+    // The highlight is held here rather than in the reducer: what the pointer is
+    // resting on is not part of the document and changes on every move across the
+    // chart, so putting it through the reducer would run every panel's memo sixty
+    // times a second.
+    const [highlight, setHighlight] = useState(null);
+    /**
+     * ChartScale the value axis by a factor, about the baseline the mode hangs from.
+     * @param factor - Above one to zoom out.
+     */
+    const scaleValueAxis = useCallback((factor) => {
+        const shown = domain ?? fullDomain(visibleSpectra, mode);
+        // Asked of the mode rather than written out again here: the baseline a
+        // value axis is scaled about is `irMode`'s to know, and a second copy of
+        // it is a second thing to get wrong.
+        const { baseline = 0 } = yAxisRules(mode);
+        actions.setDomain({
+            x: shown.x,
+            y: [
+                baseline + (shown.y[0] - baseline) * factor,
+                baseline + (shown.y[1] - baseline) * factor,
+            ],
+        });
+    }, [actions, domain, visibleSpectra, mode]);
+    const commands = useMemo(() => ({
+        about: () => setIsAboutOpen(true),
+        documentation: () => setIsDocumentationOpen(true),
+        fullScreen: toggleFullScreen,
+        readTool: () => actions.setTool('read'),
+        boxTool: () => actions.setTool(tool === 'box' ? 'read' : 'box'),
+        zoomIn: () => scaleValueAxis(1 / ZOOM_STEP),
+        zoomOut: () => scaleValueAxis(ZOOM_STEP),
+        resetZoom: () => actions.resetDomain(),
+        toggleMode: () => actions.setSettings({ mode: otherIrMode(mode) }),
+        togglePicking: () => actions.setSettings({ pickBands: !pickBands }),
+        toggleAssignments: () => actions.setSettings({ showAssignments: !showAssignments }),
+        exportImage: () => setIsExportImageOpen(true),
+        clear: () => actions.clear(),
+    }), [
+        actions,
+        tool,
+        mode,
+        pickBands,
+        showAssignments,
+        scaleValueAxis,
+        toggleFullScreen,
+    ]);
+    // The root is held as state rather than in a ref because the keys are bound to
+    // it from an effect: a ref filled in during the commit would leave the effect
+    // with nothing to listen on for the first render, and no reason ever to run
+    // again.
+    const [root, setRoot] = useState(null);
+    useIrShortcuts(root, commands);
+    useImperativeHandle(handle, () => ({
+        getSpectra: () => state.data.spectra,
+        setSpectra: (spectra) => actions.setSpectra(spectra),
+        addSpectra: (spectra) => actions.addSpectra(spectra),
+        clear: () => actions.clear(),
+        setDomain: (next) => actions.setDomain(next),
+        resetDomain: () => actions.resetDomain(),
+        zoomToWavenumber: (wavenumber, options = {}) => {
+            const { width = DEFAULT_FRAME_WIDTH } = options;
+            const shown = domain ?? fullDomain(visibleSpectra, mode);
+            actions.setDomain({
+                x: [wavenumber - width / 2, wavenumber + width / 2],
+                y: shown.y,
+            });
+        },
+        selectSpectrum: (id) => actions.selectSpectrum(id),
+    }), [state.data.spectra, actions, domain, visibleSpectra, mode]);
+    /**
+     * Open or close the side, as the splitter is dragged shut and back open.
+     * @param open - Whether the side is now open.
+     */
+    function setSideOpen(open) {
+        if (!open) {
+            for (const panelId of openPanelIds)
+                actions.togglePanel(panelId);
+            return;
+        }
+        // Dragging the splitter back open must land on something, or it opens on an
+        // empty column and reads as broken.
+        if (openPanelIds.length === 0)
+            actions.togglePanel(DEFAULT_SIDE_PANEL);
+    }
+    return (_jsxs(IrCommandProvider, { handlers: commands, children: [_jsxs("div", { ref: setRoot, tabIndex: -1, style: rootStyle, children: [_jsx(IrHeader, {}), _jsxs("div", { style: mainStyle, children: [_jsx("div", { style: railStyle, children: _jsx(IrToolbar, {}) }), _jsxs(SplitPane, { direction: "horizontal", controlledSide: "end", defaultSize: "360px", open: openPanelIds.length > 0, onOpenChange: setSideOpen, children: [_jsx(IrCanvas, { highlight: highlight, onHighlight: setHighlight, attachChart: chart.attach }), _jsx(IrSidePanel, { highlight: highlight, onHighlight: setHighlight })] }), _jsx("div", { style: railStyle, children: _jsx(PanelRail, { panels: irSidePanels, openIds: openPanelIds, onToggle: actions.togglePanel }) })] })] }), _jsx(IrAboutDialog, { isOpen: isAboutOpen, onClose: () => setIsAboutOpen(false) }), _jsx(IrDocumentationDialog, { isOpen: isDocumentationOpen, onClose: () => setIsDocumentationOpen(false) }), _jsx(ExportImageDialog, { isOpen: isExportImageOpen, getDrawing: chart.getDrawing, frame: "element", filename: pictureName(visibleSpectra, selectedSpectrum), label: "Infrared spectrum", onClose: () => setIsExportImageOpen(false) })] }));
+}
+/**
+ * What one press of zoom in or out is worth.
+ *
+ * A fifth, which is about what one notch of a mouse wheel does — so the button
+ * and the wheel feel like the same gesture at two speeds rather than two
+ * different ones.
+ */
+const ZOOM_STEP = 1.2;
+/** How wide a window a host gets when it asks to frame a band without saying. */
+const DEFAULT_FRAME_WIDTH = 200;
+/**
+ * What a picture of the chart is called before anything is typed in the box.
+ *
+ * The spectrum being looked at, since a figure of the chart is a figure of that
+ * spectrum, and a chemist who has one run open should not have to work out
+ * which of their downloads `spectra.png` was. A chart holding several and
+ * pointing at none of them is named after the lot.
+ * @param spectra - What is drawn.
+ * @param selected - The one being looked at, `null` when none is.
+ * @returns The name, without its extension.
+ */
+function pictureName(spectra, selected) {
+    const named = selected ?? (spectra.length === 1 ? spectra[0] : undefined);
+    return named === undefined
+        ? 'spectra'
+        : sanitizeFileName(named.name, 'spectrum');
+}
+const rootStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '1 1 1px',
+    width: '100%',
+    height: '100%',
+    minHeight: 0,
+    outline: 'none',
+};
+const mainStyle = {
+    display: 'flex',
+    flex: '1 1 1px',
+    minWidth: 0,
+    minHeight: 0,
+};
+const railStyle = { flex: 'none' };
+//# sourceMappingURL=IrShell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IrShell.js","sourceRoot":"","sources":["../../../src/ir/ui/IrShell.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,wCAAyC,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA8B,CAAC;AAGzD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA6B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAUrD;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,OAAO,CAAC,KAAmB;IACzC,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAEzB,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACvE,MAAM,OAAO,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IACrD,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAClD,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAC;IAE5D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,yEAAyE;IACzE,4EAA4E;IAC5E,yEAAyE;IACzE,MAAM,KAAK,GAAG,aAAa,EAAE,CAAC;IAC9B,6EAA6E;IAC7E,8EAA8E;IAC9E,8EAA8E;IAC9E,kBAAkB;IAClB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAEhE;;;OAGG;IACH,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,MAAc,EAAE,EAAE;QACjB,MAAM,KAAK,GAAG,MAAM,IAAI,UAAU,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;QACzD,uEAAuE;QACvE,yEAAyE;QACzE,qCAAqC;QACrC,MAAM,EAAE,QAAQ,GAAG,CAAC,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;QAC1C,OAAO,CAAC,SAAS,CAAC;YAChB,CAAC,EAAE,KAAK,CAAC,CAAC;YACV,CAAC,EAAE;gBACD,QAAQ,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,MAAM;gBAC3C,QAAQ,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,GAAG,MAAM;aAC5C;SACF,CAAC,CAAC;IACL,CAAC,EACD,CAAC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,CAAC,CACxC,CAAC;IAEF,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,CAAC;QACL,KAAK,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC;QACjC,aAAa,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,IAAI,CAAC;QACjD,UAAU,EAAE,gBAAgB;QAC5B,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC;QACvC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;QAC/D,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,GAAG,SAAS,CAAC;QAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,SAAS,CAAC;QACxC,SAAS,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE;QACtC,UAAU,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;QAClE,aAAa,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,CAAC;QACnE,iBAAiB,EAAE,GAAG,EAAE,CACtB,OAAO,CAAC,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC,eAAe,EAAE,CAAC;QAC5D,WAAW,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC;QAC7C,KAAK,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE;KAC7B,CAAC,EACF;QACE,OAAO;QACP,IAAI;QACJ,IAAI;QACJ,SAAS;QACT,eAAe;QACf,cAAc;QACd,gBAAgB;KACjB,CACF,CAAC;IAEF,+EAA+E;IAC/E,8EAA8E;IAC9E,4EAA4E;IAC5E,SAAS;IACT,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAC3D,cAAc,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAE/B,mBAAmB,CACjB,MAAM,EACN,GAAmB,EAAE,CAAC,CAAC;QACrB,UAAU,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;QACpC,UAAU,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC;QACpD,UAAU,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC;QACpD,KAAK,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE;QAC5B,SAAS,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC;QAC5C,WAAW,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE;QACxC,gBAAgB,EAAE,CAAC,UAAU,EAAE,UAA6B,EAAE,EAAE,EAAE;YAChE,MAAM,EAAE,KAAK,GAAG,mBAAmB,EAAE,GAAG,OAAO,CAAC;YAChD,MAAM,KAAK,GAAa,MAAM,IAAI,UAAU,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;YACnE,OAAO,CAAC,SAAS,CAAC;gBAChB,CAAC,EAAE,CAAC,UAAU,GAAG,KAAK,GAAG,CAAC,EAAE,UAAU,GAAG,KAAK,GAAG,CAAC,CAAC;gBACnD,CAAC,EAAE,KAAK,CAAC,CAAC;aACX,CAAC,CAAC;QACL,CAAC;QACD,cAAc,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;KACnD,CAAC,EACF,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,CAAC,CAC5D,CAAC;IAEF;;;OAGG;IACH,SAAS,WAAW,CAAC,IAAa;QAChC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,KAAK,MAAM,OAAO,IAAI,YAAY;gBAAE,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YACjE,OAAO;QACT,CAAC;QACD,4EAA4E;QAC5E,oCAAoC;QACpC,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;IACzE,CAAC;IAED,OAAO,CACL,MAAC,iBAAiB,IAAC,QAAQ,EAAE,QAAQ,aAInC,eAAK,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,aAC/C,KAAC,QAAQ,KAAG,EAEZ,eAAK,KAAK,EAAE,SAAS,aAInB,cAAK,KAAK,EAAE,SAAS,YACnB,KAAC,SAAS,KAAG,GACT,EAEN,MAAC,SAAS,IACR,SAAS,EAAC,YAAY,EACtB,cAAc,EAAC,KAAK,EACpB,WAAW,EAAC,OAAO,EACnB,IAAI,EAAE,YAAY,CAAC,MAAM,GAAG,CAAC,EAC7B,YAAY,EAAE,WAAW,aAEzB,KAAC,QAAQ,IACP,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,KAAK,CAAC,MAAM,GACzB,EAEF,KAAC,WAAW,IAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,GAAI,IACtD,EAIZ,cAAK,KAAK,EAAE,SAAS,YACnB,KAAC,SAAS,IACR,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,OAAO,CAAC,WAAW,GAC7B,GACE,IACF,IACF,EAEN,KAAC,aAAa,IACZ,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,GACpC,EACF,KAAC,qBAAqB,IACpB,MAAM,EAAE,mBAAmB,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,GAC5C,EAMF,KAAC,iBAAiB,IAChB,MAAM,EAAE,iBAAiB,EACzB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,WAAW,CAAC,cAAc,EAAE,gBAAgB,CAAC,EACvD,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,GAC1C,IACgB,CACrB,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,SAAS,GAAG,GAAG,CAAC;AAEtB,iFAAiF;AACjF,MAAM,mBAAmB,GAAG,GAAG,CAAC;AAEhC;;;;;;;;;;GAUG;AACH,SAAS,WAAW,CAClB,OAA8B,EAC9B,QAA2B;IAE3B,MAAM,KAAK,GAAG,QAAQ,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC1E,OAAO,KAAK,KAAK,SAAS;QACxB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;AAC/C,CAAC;AAED,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,CAAC;IACZ,OAAO,EAAE,MAAM;CACP,CAAC;AAEX,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE,MAAM;IACf,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;CACJ,CAAC;AAEX,MAAM,SAAS,GAAG,EAAE,IAAI,EAAE,MAAM,EAAW,CAAC"}

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

@@ -0,0 +1,26 @@
+import type { IrBand } from '../core/irBand.ts';
+export interface IrSidePanelProps {
+    /**
+     * The band the pointer is resting on.
+     * @default null
+     */
+    highlight?: IrBand | null;
+    /**
+     * Told when a row is hovered.
+     * @default undefined
+     */
+    onHighlight?: (band: IrBand | null) => void;
+}
+/**
+ * The panels that are open, stacked down the right.
+ *
+ * Every open panel gets a share of the height rather than a turn, because the
+ * things they hold are read together: which spectrum is selected and what its
+ * bands are is one question asked of two panels. The header carries the close
+ * button and nothing else — a panel's own actions are a toolbar inside its body,
+ * so they travel with it.
+ * @param props - Component props.
+ * @returns The panel stack.
+ */
+export declare function IrSidePanel(props: IrSidePanelProps): import("react").JSX.Element;
+//# sourceMappingURL=IrSidePanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IrSidePanel.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrSidePanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAShD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC7C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAqBlD"}

package/lib/ir/ui/IrSidePanel.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SidePanelStack } from "../../panel/ui/SidePanelStack.js";
+import { irSidePanels } from "../core/irSidePanels.js";
+import { BandsPanel } from "./BandsPanel.js";
+import { MetadataPanel } from "./MetadataPanel.js";
+import { SpectraPanel } from "./SpectraPanel.js";
+import { useIrActions, useIrEditorState } from "./irStateContext.js";
+/**
+ * The panels that are open, stacked down the right.
+ *
+ * Every open panel gets a share of the height rather than a turn, because the
+ * things they hold are read together: which spectrum is selected and what its
+ * bands are is one question asked of two panels. The header carries the close
+ * button and nothing else — a panel's own actions are a toolbar inside its body,
+ * so they travel with it.
+ * @param props - Component props.
+ * @returns The panel stack.
+ */
+export function IrSidePanel(props) {
+    const { highlight = null, onHighlight } = props;
+    const { state } = useIrEditorState();
+    const actions = useIrActions();
+    const { openPanelIds } = state.view;
+    return (_jsx(SidePanelStack, { panels: irSidePanels, openPanelIds: openPanelIds, onClose: actions.togglePanel, children: (panel) => (_jsx(PanelBody, { panelId: panel.id, highlight: highlight, onHighlight: onHighlight })) }));
+}
+/**
+ * Which panel a panel id is.
+ * @param props - Component props.
+ * @returns The panel's body.
+ */
+function PanelBody(props) {
+    const { panelId, highlight, onHighlight } = props;
+    if (panelId === 'spectra')
+        return _jsx(SpectraPanel, {});
+    if (panelId === 'metadata')
+        return _jsx(MetadataPanel, {});
+    return _jsx(BandsPanel, { highlight: highlight, onHighlight: onHighlight });
+}
+//# sourceMappingURL=IrSidePanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IrSidePanel.js","sourceRoot":"","sources":["../../../src/ir/ui/IrSidePanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAmC,CAAC;AAGnE,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAqB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAerE;;;;;;;;;;GAUG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAChD,MAAM,EAAE,KAAK,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACrC,MAAM,OAAO,GAAG,YAAY,EAAE,CAAC;IAC/B,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAEpC,OAAO,CACL,KAAC,cAAc,IACb,MAAM,EAAE,YAAY,EACpB,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,CAAC,WAAW,YAE3B,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,KAAC,SAAS,IACR,OAAO,EAAE,KAAK,CAAC,EAAE,EACjB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,GACxB,CACH,GACc,CAClB,CAAC;AACJ,CAAC;AAWD;;;;GAIG;AACH,SAAS,SAAS,CAAC,KAAqB;IACtC,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAElD,IAAI,OAAO,KAAK,SAAS;QAAE,OAAO,KAAC,YAAY,KAAG,CAAC;IACnD,IAAI,OAAO,KAAK,UAAU;QAAE,OAAO,KAAC,aAAa,KAAG,CAAC;IACrD,OAAO,KAAC,UAAU,IAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,GAAI,CAAC;AACxE,CAAC"}

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { IrEditorApi } from './useIrEditor.ts';
+export interface IrStateProviderProps {
+    /** The viewer's state, as `useIrEditor` holds it. */
+    editor: IrEditorApi;
+    /** The viewer. */
+    children: ReactNode;
+}
+/**
+ * Put one viewer's state where its panels can reach it.
+ *
+ * The state and the actions go into separate contexts on purpose — see
+ * `irStateContext.ts` for why — and the actions are handed over as they are,
+ * since `useIrEditor` already keeps them stable for the life of the viewer.
+ * @param props - Component props.
+ * @returns The provider.
+ */
+export declare function IrStateProvider(props: IrStateProviderProps): import("react").JSX.Element;
+//# sourceMappingURL=IrStateProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IrStateProvider.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrStateProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,WAAW,oBAAoB;IACnC,qDAAqD;IACrD,MAAM,EAAE,WAAW,CAAC;IACpB,kBAAkB;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAU1D"}

package/lib/ir/ui/IrStateProvider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { actionsContext, stateContext } from "./irStateContext.js";
+/**
+ * Put one viewer's state where its panels can reach it.
+ *
+ * The state and the actions go into separate contexts on purpose — see
+ * `irStateContext.ts` for why — and the actions are handed over as they are,
+ * since `useIrEditor` already keeps them stable for the life of the viewer.
+ * @param props - Component props.
+ * @returns The provider.
+ */
+export function IrStateProvider(props) {
+    const { editor, children } = props;
+    return (_jsx(stateContext.Provider, { value: editor, children: _jsx(actionsContext.Provider, { value: editor.actions, children: children }) }));
+}
+//# sourceMappingURL=IrStateProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IrStateProvider.js","sourceRoot":"","sources":["../../../src/ir/ui/IrStateProvider.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAUnE;;;;;;;;GAQG;AACH,MAAM,UAAU,eAAe,CAAC,KAA2B;IACzD,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEnC,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YAClC,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,CAAC,OAAO,YAC3C,QAAQ,GACe,GACJ,CACzB,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,14 @@
+/**
+ * The one line under the chart: what is drawn, what was found, what went wrong.
+ *
+ * Everything in it is derived, so it is the cheapest place in the viewer to
+ * answer "did that work" — how many spectra are drawn of those open, how many
+ * bands the picking found and how many the table had something to say about, and
+ * the range the selected spectrum covers.
+ *
+ * The refusal is last and is the only red in the shell, so the eye that has just
+ * pressed something and seen nothing happen lands on the reason.
+ * @returns The status bar.
+ */
+export declare function IrStatusBar(): import("react").JSX.Element;
+//# sourceMappingURL=IrStatusBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IrStatusBar.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrStatusBar.tsx"],"names":[],"mappings":"AAeA;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,gCAmD1B"}

package/lib/ir/ui/IrStatusBar.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '@blueprintjs/core';
+import { countLabel, statusBarStyle as barStyle, statusItemStyle as itemStyle, statusMutedStyle as mutedStyle, statusSpacerStyle as spacerStyle, } from "../../panel/core/statusBar.js";
+import { countAssigned } from "../core/assignBands.js";
+import { formatWavenumber } from "../core/irFormat.js";
+import { boxZoomOnly, yAxisTitle } from "../core/irMode.js";
+import { useIrEditorState } from "./irStateContext.js";
+/**
+ * The one line under the chart: what is drawn, what was found, what went wrong.
+ *
+ * Everything in it is derived, so it is the cheapest place in the viewer to
+ * answer "did that work" — how many spectra are drawn of those open, how many
+ * bands the picking found and how many the table had something to say about, and
+ * the range the selected spectrum covers.
+ *
+ * The refusal is last and is the only red in the shell, so the eye that has just
+ * pressed something and seen nothing happen lands on the reason.
+ * @returns The status bar.
+ */
+export function IrStatusBar() {
+    const { state, visibleSpectra, selectedSpectrum, assigned } = useIrEditorState();
+    const { spectra } = state.data;
+    const { error, tool } = state.view;
+    const { mode, pickBands } = state.settings;
+    const range = selectedSpectrum === null || selectedSpectrum.wavenumber.length === 0
+        ? null
+        : `${formatWavenumber(selectedSpectrum.wavenumber.at(-1))}–${formatWavenumber(selectedSpectrum.wavenumber[0])} cm⁻¹`;
+    return (_jsxs("div", { style: barStyle, children: [_jsx("span", { style: itemStyle, children: spectra.length === 0
+                    ? 'no spectrum open'
+                    : `${countLabel(visibleSpectra.length, 'spectrum', 'spectra')} drawn of ${spectra.length}` }), _jsx("span", { style: itemStyle, children: yAxisTitle(mode) }), selectedSpectrum === null ? null : (_jsx("span", { style: nameStyle, title: selectedSpectrum.name, children: selectedSpectrum.name })), range === null ? null : _jsx("span", { style: mutedStyle, children: range }), pickBands && assigned.length > 0 ? (_jsxs("span", { style: itemStyle, children: [countLabel(assigned.length, 'band', 'bands'), ",", ' ', countAssigned(assigned), " assigned"] })) : null, boxZoomOnly(mode) || tool === 'box' ? (_jsx("span", { style: mutedStyle, children: "square zoom: drag a rectangle" })) : null, _jsx("span", { style: spacerStyle }), error === null ? null : (_jsxs("span", { style: errorStyle, title: error, children: [_jsx(Icon, { icon: "warning-sign", size: 12 }), error] }))] }));
+}
+const nameStyle = {
+    ...itemStyle,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '32%',
+    fontWeight: 600,
+};
+/** The one red in the shell: a refusal, and nothing else, is written in it. */
+const errorStyle = {
+    ...itemStyle,
+    gap: 4,
+    color: '#C0392B',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '60%',
+};
+//# sourceMappingURL=IrStatusBar.js.map

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

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

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

@@ -0,0 +1,18 @@
+/**
+ * The tools, down the left of the chart.
+ *
+ * Only what is done to the spectra: what is asked of the viewer itself — the
+ * mark, help, full screen — is in the header. The two **tools** — read and
+ * square zoom — come first and show which of the two a drag is currently
+ * running, then the zoom commands that act at once, then what is being read: the
+ * value axis, the picking, the assignments. Closing every spectrum is last and
+ * alone, being the only one that throws something away.
+ *
+ * Reading percent transmittance, the pair is settled rather than chosen: every
+ * drag on that axis is a rectangle, so both buttons go dead with the square zoom
+ * lit. Showing `read` as available there would offer a gesture the chart does not
+ * make, and showing it as *active* would name the wrong one.
+ * @returns The toolbar.
+ */
+export declare function IrToolbar(): import("react").JSX.Element;
+//# sourceMappingURL=IrToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IrToolbar.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrToolbar.tsx"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,gCA8ExB"}

package/lib/ir/ui/IrToolbar.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toolbar } from 'react-science/ui';
+import { boxZoomOnly } from "../core/irMode.js";
+import { useIrCommandProps } from "./irCommandContext.js";
+import { useIrEditorState } from "./irStateContext.js";
+/**
+ * The tools, down the left of the chart.
+ *
+ * Only what is done to the spectra: what is asked of the viewer itself — the
+ * mark, help, full screen — is in the header. The two **tools** — read and
+ * square zoom — come first and show which of the two a drag is currently
+ * running, then the zoom commands that act at once, then what is being read: the
+ * value axis, the picking, the assignments. Closing every spectrum is last and
+ * alone, being the only one that throws something away.
+ *
+ * Reading percent transmittance, the pair is settled rather than chosen: every
+ * drag on that axis is a rectangle, so both buttons go dead with the square zoom
+ * lit. Showing `read` as available there would offer a gesture the chart does not
+ * make, and showing it as *active* would name the wrong one.
+ * @returns The toolbar.
+ */
+export function IrToolbar() {
+    const { state, selectedSpectrum } = useIrEditorState();
+    const command = useIrCommandProps();
+    const { spectra } = state.data;
+    const { domain, tool } = state.view;
+    const { mode, pickBands, showAssignments } = state.settings;
+    const isEmpty = spectra.length === 0;
+    const settled = boxZoomOnly(mode);
+    return (_jsxs(Toolbar, { vertical: true, overflow: "collapse", "aria-label": "Infrared spectrum tools", children: [_jsx(Toolbar.Item, { icon: "trash", intent: "danger", ...command('clear'), disabled: isEmpty }), _jsx(Toolbar.Item, { icon: "arrows-horizontal", active: !settled && tool === 'read', ...command('readTool'), disabled: isEmpty || settled }), _jsx(Toolbar.Item, { icon: "select", active: settled || tool === 'box', ...command('boxTool'), disabled: isEmpty || settled }), _jsx(Toolbar.Item, { icon: "zoom-in", ...command('zoomIn'), disabled: isEmpty }), _jsx(Toolbar.Item, { icon: "zoom-out", ...command('zoomOut'), disabled: isEmpty }), _jsx(Toolbar.Item, { icon: "zoom-to-fit", ...command('resetZoom'), disabled: domain === null }), _jsx(Toolbar.Item, { icon: mode === 'absorbance' ? 'arrow-up' : 'arrow-down', active: mode === 'absorbance', ...command('toggleMode'), disabled: isEmpty }), _jsx(Toolbar.Item, { icon: "locate", active: pickBands, ...command('togglePicking'), disabled: selectedSpectrum === null }), _jsx(Toolbar.Item, { icon: "label", active: showAssignments, ...command('toggleAssignments'), disabled: !pickBands || selectedSpectrum === null }), _jsx(Toolbar.Item, { icon: "media", ...command('exportImage'), disabled: isEmpty })] }));
+}
+//# sourceMappingURL=IrToolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IrToolbar.js","sourceRoot":"","sources":["../../../src/ir/ui/IrToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAwB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,SAAS;IACvB,MAAM,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACvD,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IAC/B,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC;IACpC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAC;IAE5D,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC;IACrC,MAAM,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAElC,OAAO,CAIL,MAAC,OAAO,IAAC,QAAQ,QAAC,QAAQ,EAAC,UAAU,gBAAY,yBAAyB,aACxE,KAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,QAAQ,KACX,OAAO,CAAC,OAAO,CAAC,EACpB,QAAQ,EAAE,OAAO,GACjB,EAGF,KAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAC,mBAAmB,EACxB,MAAM,EAAE,CAAC,OAAO,IAAI,IAAI,KAAK,MAAM,KAC/B,OAAO,CAAC,UAAU,CAAC,EACvB,QAAQ,EAAE,OAAO,IAAI,OAAO,GAC5B,EACF,KAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,OAAO,IAAI,IAAI,KAAK,KAAK,KAC7B,OAAO,CAAC,SAAS,CAAC,EACtB,QAAQ,EAAE,OAAO,IAAI,OAAO,GAC5B,EAEF,KAAC,OAAO,CAAC,IAAI,IAAC,IAAI,EAAC,SAAS,KAAK,OAAO,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAI,EACzE,KAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAC,UAAU,KACX,OAAO,CAAC,SAAS,CAAC,EACtB,QAAQ,EAAE,OAAO,GACjB,EACF,KAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAC,aAAa,KACd,OAAO,CAAC,WAAW,CAAC,EACxB,QAAQ,EAAE,MAAM,KAAK,IAAI,GACzB,EAEF,KAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,EACvD,MAAM,EAAE,IAAI,KAAK,YAAY,KACzB,OAAO,CAAC,YAAY,CAAC,EACzB,QAAQ,EAAE,OAAO,GACjB,EACF,KAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,SAAS,KACb,OAAO,CAAC,eAAe,CAAC,EAC5B,QAAQ,EAAE,gBAAgB,KAAK,IAAI,GACnC,EACF,KAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,eAAe,KACnB,OAAO,CAAC,mBAAmB,CAAC,EAChC,QAAQ,EAAE,CAAC,SAAS,IAAI,gBAAgB,KAAK,IAAI,GACjD,EAMF,KAAC,OAAO,CAAC,IAAI,IACX,IAAI,EAAC,OAAO,KACR,OAAO,CAAC,aAAa,CAAC,EAC1B,QAAQ,EAAE,OAAO,GACjB,IACM,CACX,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,63 @@
+import type { ReactElement } from 'react';
+import type { PlotRect } from '../../chart/core/chartGeometry.ts';
+import type { ChartScale } from '../../chart/core/chartScale.ts';
+import type { IrMode, IrSpectrum } from '../core/irSpectrum.ts';
+export interface IrTracesProps {
+    /** The spectra to draw, each saying in itself whether it is drawn. */
+    spectra: readonly IrSpectrum[];
+    /** Which value axis is being drawn. */
+    mode: IrMode;
+    /**
+     * Where the plot sits, whose width is how many points are worth drawing. A
+     * trace is reduced to the pixel columns it will occupy, so the width is what
+     * says how much of a spectrum the chart can actually show.
+     */
+    plot: PlotRect;
+    /**
+     * The window being shown, low end first — which is what the reduction is cut
+     * to. Read from the window rather than inverted back out of `xScale`, because
+     * the wavenumber axis runs right to left and inverting its left edge gives
+     * the *high* end, the opposite of what every other chart's does.
+     */
+    xDomain: readonly [number, number];
+    /** The wavenumber axis as it is currently zoomed, running right to left. */
+    xScale: ChartScale;
+    /** The value axis as it is currently zoomed. */
+    yScale: ChartScale;
+    /**
+     * Identity of the spectrum drawn thicker than the rest, `null` for none. The
+     * one every panel beside the chart is about, so that which trace the numbers
+     * belong to can be seen rather than inferred from a colour swatch.
+     * @default null
+     */
+    emphasisedId?: string | null;
+}
+/**
+ * Every visible spectrum, one `<path>` each.
+ *
+ * One path per spectrum and never one element per point: an infrared spectrum is
+ * a few thousand samples, and drawn as a line each the browser holds thousands of
+ * nodes for a picture that is a single stroke — and every pointer move across the
+ * chart then costs a walk of all of them.
+ *
+ * Nor every sample: a spectrum is reduced to the pixel columns it will occupy
+ * before it becomes a path. A bench instrument's 1 cm⁻¹ grid over 4000–400 is
+ * some eight thousand samples against a plot around thirteen hundred pixels
+ * wide, and a chart holding the four infrared blocks of one JCAMP file writes
+ * a fifth of a megabyte of `d` for a picture no denser than the one it would
+ * have drawn from a tenth of that. `xyReduce` keeps the lowest and the highest
+ * sample of every slot, so a band still reaches its true depth rather than the
+ * depth of whichever sample a slot boundary happened to land on — and it cuts
+ * by wavenumber rather than by index, which is what makes it safe on the
+ * uneven grids a converted or interpolated file arrives on.
+ *
+ * There is no stick trace here and no mirror mode, which is the visible
+ * difference from a mass chart: infrared is a continuous absorption profile, the
+ * bands are features *of* that curve rather than a second representation of it,
+ * and two spectra are compared by drawing them over one another rather than head
+ * to head — the baselines have to line up for the comparison to mean anything.
+ * @param props - Component props.
+ * @returns The traces, as SVG.
+ */
+export declare function IrTraces(props: IrTracesProps): ReactElement;
+//# sourceMappingURL=IrTraces.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IrTraces.d.ts","sourceRoot":"","sources":["../../../src/ir/ui/IrTraces.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGhE,MAAM,WAAW,aAAa;IAC5B,sEAAsE;IACtE,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,uCAAuC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;;;;OAKG;IACH,OAAO,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,4EAA4E;IAC5E,MAAM,EAAE,UAAU,CAAC;IACnB,gDAAgD;IAChD,MAAM,EAAE,UAAU,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CA0C3D"}

package/lib/ir/ui/IrTraces.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { xyReduce } from 'ml-spectra-processing';
+import { useMemo } from 'react';
+import { profilePath } from "../../chart/core/tracePath.js";
+import { traceOf } from "../core/irSpectrum.js";
+/**
+ * Every visible spectrum, one `<path>` each.
+ *
+ * One path per spectrum and never one element per point: an infrared spectrum is
+ * a few thousand samples, and drawn as a line each the browser holds thousands of
+ * nodes for a picture that is a single stroke — and every pointer move across the
+ * chart then costs a walk of all of them.
+ *
+ * Nor every sample: a spectrum is reduced to the pixel columns it will occupy
+ * before it becomes a path. A bench instrument's 1 cm⁻¹ grid over 4000–400 is
+ * some eight thousand samples against a plot around thirteen hundred pixels
+ * wide, and a chart holding the four infrared blocks of one JCAMP file writes
+ * a fifth of a megabyte of `d` for a picture no denser than the one it would
+ * have drawn from a tenth of that. `xyReduce` keeps the lowest and the highest
+ * sample of every slot, so a band still reaches its true depth rather than the
+ * depth of whichever sample a slot boundary happened to land on — and it cuts
+ * by wavenumber rather than by index, which is what makes it safe on the
+ * uneven grids a converted or interpolated file arrives on.
+ *
+ * There is no stick trace here and no mirror mode, which is the visible
+ * difference from a mass chart: infrared is a continuous absorption profile, the
+ * bands are features *of* that curve rather than a second representation of it,
+ * and two spectra are compared by drawing them over one another rather than head
+ * to head — the baselines have to line up for the comparison to mean anything.
+ * @param props - Component props.
+ * @returns The traces, as SVG.
+ */
+export function IrTraces(props) {
+    const { spectra, mode, plot, xDomain, xScale, yScale, emphasisedId = null, } = props;
+    const [from, to] = xDomain;
+    const wanted = Math.max(2, Math.round(plot.width)) * POINTS_PER_COLUMN;
+    const paths = useMemo(() => {
+        const drawn = [];
+        for (const spectrum of spectra) {
+            if (!spectrum.visible)
+                continue;
+            const trace = traceOf(spectrum, mode);
+            const { x, y } = xyReduce(trace, { from, to, nbPoints: wanted });
+            const d = profilePath(x, y, xScale, yScale);
+            if (d !== '')
+                drawn.push({ id: spectrum.id, color: spectrum.color, d });
+        }
+        return drawn;
+    }, [spectra, mode, from, to, wanted, xScale, yScale]);
+    return (_jsx("g", { pointerEvents: "none", children: paths.map((path) => (_jsx("path", { d: path.d, fill: "none", stroke: path.color, strokeWidth: path.id === emphasisedId ? EMPHASISED_WIDTH : TRACE_WIDTH, strokeLinejoin: "round" }, path.id))) }));
+}
+/**
+ * How many reduced samples each pixel column is given.
+ *
+ * The reduction keeps the lowest and the highest sample of every slot, so two
+ * per column is the least that draws a column at all — and `xyReduce` asks for
+ * about four times what is displayed before a narrow band survives at its true
+ * depth rather than at the depth of whichever sample the slot boundary happened
+ * to land on.
+ */
+const POINTS_PER_COLUMN = 4;
+/** How thick a trace is drawn. */
+const TRACE_WIDTH = 1;
+/**
+ * How thick the one every panel is about is drawn.
+ *
+ * Barely thicker, because the difference has to be visible without reading as a
+ * different kind of thing: at two pixels a trace still looks like the others,
+ * where at three it looks like a fit or an envelope drawn over them.
+ */
+const EMPHASISED_WIDTH = 2;
+//# sourceMappingURL=IrTraces.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IrTraces.js","sourceRoot":"","sources":["../../../src/ir/ui/IrTraces.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAiChD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EACJ,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,MAAM,EACN,MAAM,EACN,YAAY,GAAG,IAAI,GACpB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,OAAO,CAAC;IAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,iBAAiB,CAAC;IAEvE,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,KAAK,GAAoD,EAAE,CAAC;QAClE,KAAK,MAAM,QAAQ,IAAI,OAAO,EAAE,CAAC;YAC/B,IAAI,CAAC,QAAQ,CAAC,OAAO;gBAAE,SAAS;YAChC,MAAM,KAAK,GAAG,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YACtC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,QAAQ,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;YACjE,MAAM,CAAC,GAAG,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;YAC5C,IAAI,CAAC,KAAK,EAAE;gBAAE,KAAK,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;QAC1E,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAEtD,OAAO,CACL,YAAG,aAAa,EAAC,MAAM,YACpB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,eAEE,CAAC,EAAE,IAAI,CAAC,CAAC,EACT,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,WAAW,EACT,IAAI,CAAC,EAAE,KAAK,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW,EAE3D,cAAc,EAAC,OAAO,IAPjB,IAAI,CAAC,EAAE,CAQZ,CACH,CAAC,GACA,CACL,CAAC;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAE5B,kCAAkC;AAClC,MAAM,WAAW,GAAG,CAAC,CAAC;AAEtB;;;;;;GAMG;AACH,MAAM,gBAAgB,GAAG,CAAC,CAAC"}