react-cheminfo 0.28.0 → 0.30.0

package/lib/structure/ui/ConformerTable.js

@@ -0,0 +1,259 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A conformer set, most stable first, as a table one row of which is selected.
+ *
+ * Two sites read the same set for different reasons — one picks the geometry a
+ * calculation runs on, the other reads the ranking itself — so the columns are
+ * a prop rather than a variant. Everything else is the same table: rows ordered
+ * by energy, one selected, the arrows walking it.
+ *
+ * The population column is the reason the ranking matters. A share is
+ * exponential in the energy gap, so it inherits the error of whatever produced
+ * the energies and magnifies it; the caption under the table says which method
+ * that was, and `boltzmannConfidence` says what its error is worth. A table
+ * that prints a force field's populations without that line is stating a
+ * percentage it cannot support.
+ */
+import { HTMLTable } from '@blueprintjs/core';
+import { useEffect, useMemo, useRef } from 'react';
+import { ClickToCopy } from "../../clipboard/ui/ClickToCopy.js";
+import { formatPercent } from "../../format/core/numbers.js";
+import { handleListNavigationKey } from "../../hooks/ui/listNavigation.js";
+import { ROOM_TEMPERATURE, boltzmannShares, } from "../core/conformerBoltzmann.js";
+import { relativeEnergyOf, totalEnergyOf } from "../core/conformerEnergy.js";
+import { CONFORMER_COLUMN_LABELS, NUMERIC_CONFORMER_COLUMNS, PICKER_COLUMNS, } from "./conformerColumns.js";
+/**
+ * The conformers of a set, as a selectable table.
+ *
+ * The arrows walk the rows once the table has the focus, rather than from
+ * anywhere on the page: a conformer list usually sits beside a drawing surface
+ * or a 3D canvas, both of which read the arrows themselves.
+ * @param props - See {@link ConformerTableProps}.
+ * @returns The table, or `null` when there is nothing to show.
+ */
+export function ConformerTable(props) {
+    const { conformers, columns = PICKER_COLUMNS, ranking = 'force-field', selectedId = null, onSelect, temperature = ROOM_TEMPERATURE, label = 'Conformers, most stable first', rowName = String, columnLabels, } = props;
+    const bodyRef = useRef(null);
+    const shares = useMemo(() => {
+        if (!columns.includes('population'))
+            return [];
+        const energies = new Array(conformers.length);
+        for (let index = 0; index < conformers.length; index++) {
+            const conformer = conformers[index];
+            energies[index] =
+                conformer === undefined ? null : relativeEnergyOf(conformer, ranking);
+        }
+        return boltzmannShares(energies, temperature);
+    }, [conformers, columns, ranking, temperature]);
+    const largestShare = useMemo(() => {
+        let largest = 0;
+        for (const share of shares) {
+            if (share != null && share > largest)
+                largest = share;
+        }
+        return largest;
+    }, [shares]);
+    // The picked row is brought into view rather than left under the fold, which
+    // is what makes walking a long set with the arrows usable.
+    useEffect(() => {
+        if (bodyRef.current === null || selectedId === null)
+            return;
+        bodyRef.current
+            .querySelector('[aria-selected="true"]')
+            ?.scrollIntoView({ block: 'nearest' });
+    }, [selectedId]);
+    if (conformers.length === 0)
+        return null;
+    function onKeyDown(event) {
+        if (onSelect === undefined)
+            return;
+        handleListNavigationKey(event, {
+            length: conformers.length,
+            selectedIndex: conformers.findIndex((conformer) => conformer.id === selectedId),
+            onSelect: (index) => {
+                const conformer = conformers[index];
+                if (conformer !== undefined)
+                    onSelect(conformer.id);
+            },
+        });
+    }
+    return (_jsxs(HTMLTable, { compact: true, interactive: true, striped: true, style: tableStyle, children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((column) => (_jsx("th", { style: headerStyle(column), children: columnLabels?.[column] ?? CONFORMER_COLUMN_LABELS[column] }, column))) }) }), _jsx("tbody", { ref: bodyRef, onKeyDown: onKeyDown, 
+                // Reached by Tab and then walked with the arrows: the surfaces beside a
+                // conformer list read the arrows themselves.
+                tabIndex: onSelect === undefined ? undefined : 0, role: "listbox", "aria-label": label, children: conformers.map((conformer, index) => {
+                    const active = conformer.id === selectedId;
+                    const copyableHere = onSelect === undefined || active;
+                    return (_jsx("tr", { "data-testid": "conformer-row", "data-conformer-id": String(conformer.id), role: "option", "aria-selected": active, "data-selected": active ? 'true' : 'false', style: rowStyle(active, onSelect !== undefined), onClick: () => onSelect?.(conformer.id), children: columns.map((column) => {
+                            const content = cellContent(column, conformer, ranking, shares[index] ?? null, largestShare, rowName);
+                            // An energy is a value a reader takes away; a rank and a bar
+                            // are not. A copy stops the click at the cell, so only the row
+                            // already selected offers one: on any other row the click has
+                            // to reach the row and select it, which is what a reader means
+                            // by clicking a conformer they are not on.
+                            return copyableHere &&
+                                COPY_LABELS[column] !== undefined &&
+                                typeof content === 'string' &&
+                                content !== '—' ? (_jsx(ClickToCopy, { as: "td", style: cellStyle(column), value: content, label: COPY_LABELS[column], testId: CELL_TEST_IDS[column], children: content }, column)) : (_jsx("td", { style: cellStyle(column), "data-testid": CELL_TEST_IDS[column], children: content }, column));
+                        }) }, conformer.id));
+                }) })] }));
+}
+/**
+ * What a copyable column is called in the hover title, and which columns are
+ * copyable at all.
+ *
+ * Only the relative energy: it is the number a chemist reads off the set and
+ * quotes elsewhere. A total force-field energy is an internal quantity nobody
+ * pastes, and a rank and a share are read on the page rather than taken away.
+ */
+const COPY_LABELS = {
+    relative: 'relative energy in kcal/mol',
+};
+/**
+ * A stable hook per cell, so a suite can read one column without counting
+ * table cells — which changes the moment a column is added.
+ */
+const CELL_TEST_IDS = {
+    id: 'conformer-id',
+    population: 'conformer-population',
+    relative: 'conformer-relative-energy',
+    total: 'conformer-total-energy',
+    forceFieldRelative: 'conformer-force-field-relative',
+    forceFieldRank: 'conformer-force-field-rank',
+};
+/**
+ * The share of a conformer, drawn as a bar.
+ *
+ * It takes its colour from the row it sits in — `currentColor` — so it is
+ * legible on a plain row and on the selected one without a rule per state.
+ *
+ * It is drawn against the largest share rather than against the whole: the
+ * column is narrow, and against the whole a set of twelve near-equal conformers
+ * would be twelve bars of three pixels.
+ * @param props - The share to draw, against the largest one in the set.
+ * @param props.share - The share from 0 to 1, or `null` when there is no energy.
+ * @param props.largest - The largest share in the set, which is the full width.
+ * @returns The bar.
+ */
+function ShareBar(props) {
+    const { share, largest } = props;
+    const width = share === null || largest <= 0
+        ? 0
+        : Math.max(0, Math.min(1, share / largest)) * 100;
+    return (_jsx("span", { style: barTrackStyle, "aria-hidden": "true", children: _jsx("span", { style: { ...barFillStyle, width: `${width}%` } }) }));
+}
+function cellContent(column, conformer, ranking, share, largest, rowName) {
+    switch (column) {
+        case 'id':
+            return rowName(conformer.id);
+        case 'population':
+            return (_jsxs("span", { style: populationStyle, children: [_jsx(ShareBar, { share: share, largest: largest }), _jsx("span", { children: shareLabel(share) })] }));
+        case 'relative':
+            return energyLabel(relativeEnergyOf(conformer, ranking));
+        case 'total':
+            return energyLabel(totalEnergyOf(conformer, ranking));
+        case 'forceFieldRelative':
+            return energyLabel(conformer.relativeEnergy);
+        case 'forceFieldRank':
+            return conformer.refinement == null
+                ? '—'
+                : String(conformer.refinement.forceFieldId);
+        default:
+            return '—';
+    }
+}
+/**
+ * The share of molecules in a conformer, as a percentage.
+ *
+ * A share that rounds to zero is written as `<0.1 %` instead: a conformer the
+ * search found and kept is populated by something, and `0 %` says it is not.
+ * @param share - The share from 0 to 1, or `null` when there is no energy.
+ * @returns The percentage, or a dash when it cannot be worked out.
+ */
+function shareLabel(share) {
+    if (share === null)
+        return '—';
+    if (share > 0 && share < 0.001)
+        return '<0.1 %';
+    return formatPercent(share);
+}
+/**
+ * The energy to two decimals, or a dash when there is none.
+ *
+ * The unit is in the column header rather than in every cell, so the numbers
+ * line up and a row stays readable in a narrow panel.
+ * @param energy - kcal/mol, or `null`.
+ * @returns The label.
+ */
+function energyLabel(energy) {
+    if (energy === null)
+        return '—';
+    if (Math.abs(energy) < ENERGY_RESOLUTION)
+        return '0.00';
+    return energy > 0 ? `+${energy.toFixed(2)}` : energy.toFixed(2);
+}
+/**
+ * Below this, two force-field energies are the same number to anyone reading
+ * them, and the duplicate-minimum test upstream has already decided they are
+ * distinct shapes.
+ */
+const ENERGY_RESOLUTION = 0.005;
+function headerStyle(column) {
+    return NUMERIC_CONFORMER_COLUMNS.has(column) ? numericStyle : undefined;
+}
+function cellStyle(column) {
+    return NUMERIC_CONFORMER_COLUMNS.has(column) ? numericStyle : undefined;
+}
+const tableStyle = { width: '100%' };
+const numericStyle = {
+    textAlign: 'right',
+    fontVariantNumeric: 'tabular-nums',
+};
+/**
+ * The selected row is tinted with the site's own accent, so the table belongs
+ * to whichever site draws it; a row is a pointer only where a click does
+ * something.
+ * @param active - Whether this row is the selected one.
+ * @param selectable - Whether a click selects a row at all.
+ * @returns The row's inline style, or `undefined` when it needs none.
+ */
+function rowStyle(active, selectable) {
+    if (active)
+        return selectable ? SELECTED_ROW : SELECTED_ROW_STATIC;
+    return selectable ? SELECTABLE_ROW : undefined;
+}
+const SELECTED_ROW_STATIC = {
+    background: 'color-mix(in oklab, var(--accent) 12%, white)',
+    fontWeight: 600,
+};
+const SELECTED_ROW = {
+    ...SELECTED_ROW_STATIC,
+    cursor: 'pointer',
+};
+const SELECTABLE_ROW = { cursor: 'pointer' };
+const populationStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+    fontVariantNumeric: 'tabular-nums',
+};
+/**
+ * The track is tinted with `color-mix` rather than `opacity`, which the fill
+ * would inherit: an opacity on the track composites its child too, so the bar
+ * would be as faint as the groove it sits in.
+ */
+const barTrackStyle = {
+    display: 'block',
+    flex: '1 1 auto',
+    minWidth: 24,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: 'color-mix(in srgb, currentColor 22%, transparent)',
+    overflow: 'hidden',
+};
+const barFillStyle = {
+    display: 'block',
+    height: '100%',
+    borderRadius: 3,
+    backgroundColor: 'currentColor',
+};
+//# sourceMappingURL=ConformerTable.js.map

package/lib/structure/ui/ConformerTable.js.map

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

package/lib/structure/ui/conformerColumns.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The columns a conformer table can draw, and the two sets a site usually
+ * wants.
+ *
+ * Their own module so `ConformerTable.tsx` exports a component and nothing
+ * else, which is what keeps fast refresh working on the sites that render it.
+ */
+/** One column of a conformer table. */
+export type ConformerColumn = 
+/** The 1-based rank, which is also the conformer's id. */
+'id'
+/** The Boltzmann share, as a bar and a percentage. */
+ | 'population'
+/** Energy above the most stable conformer, in the active ranking. */
+ | 'relative'
+/** Total energy, in the active ranking. */
+ | 'total'
+/** What the force field said before a refinement reordered the set. */
+ | 'forceFieldRelative'
+/** The rank the conformer held before a refinement reordered the set. */
+ | 'forceFieldRank';
+/** The columns a picker needs: which shape, how much of it, how far up. */
+export declare const PICKER_COLUMNS: readonly ConformerColumn[];
+/** The columns a reader of the ranking itself needs. */
+export declare const RANKING_COLUMNS: readonly ConformerColumn[];
+/** The heading of each column. The unit lives here, never in a cell. */
+export declare const CONFORMER_COLUMN_LABELS: Record<ConformerColumn, string>;
+/** The columns whose cells are numbers, and so are right-aligned and tabular. */
+export declare const NUMERIC_CONFORMER_COLUMNS: ReadonlySet<ConformerColumn>;
+//# sourceMappingURL=conformerColumns.d.ts.map

package/lib/structure/ui/conformerColumns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conformerColumns.d.ts","sourceRoot":"","sources":["../../../src/structure/ui/conformerColumns.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,uCAAuC;AACvC,MAAM,MAAM,eAAe;AACzB,0DAA0D;AACxD,IAAI;AACN,sDAAsD;GACpD,YAAY;AACd,qEAAqE;GACnE,UAAU;AACZ,2CAA2C;GACzC,OAAO;AACT,uEAAuE;GACrE,oBAAoB;AACtB,yEAAyE;GACvE,gBAAgB,CAAC;AAErB,2EAA2E;AAC3E,eAAO,MAAM,cAAc,EAAE,SAAS,eAAe,EAIpD,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,eAAe,EAAE,SAAS,eAAe,EAKrD,CAAC;AAEF,wEAAwE;AACxE,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAOnE,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,yBAAyB,EAAE,WAAW,CAAC,eAAe,CAKjE,CAAC"}

package/lib/structure/ui/conformerColumns.js

@@ -0,0 +1,37 @@
+/**
+ * The columns a conformer table can draw, and the two sets a site usually
+ * wants.
+ *
+ * Their own module so `ConformerTable.tsx` exports a component and nothing
+ * else, which is what keeps fast refresh working on the sites that render it.
+ */
+/** The columns a picker needs: which shape, how much of it, how far up. */
+export const PICKER_COLUMNS = [
+    'id',
+    'population',
+    'relative',
+];
+/** The columns a reader of the ranking itself needs. */
+export const RANKING_COLUMNS = [
+    'id',
+    'population',
+    'relative',
+    'total',
+];
+/** The heading of each column. The unit lives here, never in a cell. */
+export const CONFORMER_COLUMN_LABELS = {
+    id: '#',
+    population: 'share',
+    relative: 'ΔE kcal/mol',
+    total: 'total kcal/mol',
+    forceFieldRelative: 'force field ΔE',
+    forceFieldRank: 'force field rank',
+};
+/** The columns whose cells are numbers, and so are right-aligned and tabular. */
+export const NUMERIC_CONFORMER_COLUMNS = new Set([
+    'relative',
+    'total',
+    'forceFieldRelative',
+    'forceFieldRank',
+]);
+//# sourceMappingURL=conformerColumns.js.map

package/lib/structure/ui/conformerColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conformerColumns.js","sourceRoot":"","sources":["../../../src/structure/ui/conformerColumns.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAiBH,2EAA2E;AAC3E,MAAM,CAAC,MAAM,cAAc,GAA+B;IACxD,IAAI;IACJ,YAAY;IACZ,UAAU;CACX,CAAC;AAEF,wDAAwD;AACxD,MAAM,CAAC,MAAM,eAAe,GAA+B;IACzD,IAAI;IACJ,YAAY;IACZ,UAAU;IACV,OAAO;CACR,CAAC;AAEF,wEAAwE;AACxE,MAAM,CAAC,MAAM,uBAAuB,GAAoC;IACtE,EAAE,EAAE,GAAG;IACP,UAAU,EAAE,OAAO;IACnB,QAAQ,EAAE,aAAa;IACvB,KAAK,EAAE,gBAAgB;IACvB,kBAAkB,EAAE,gBAAgB;IACpC,cAAc,EAAE,kBAAkB;CACnC,CAAC;AAEF,iFAAiF;AACjF,MAAM,CAAC,MAAM,yBAAyB,GAAiC,IAAI,GAAG,CAAC;IAC7E,UAAU;IACV,OAAO;IACP,oBAAoB;IACpB,gBAAgB;CACjB,CAAC,CAAC"}

package/lib/ui.d.ts

@@ -17,6 +17,7 @@ export * from './hooks/ui/index.ts';
 export * from './i18n/ui/index.ts';
 export * from './language/ui/index.ts';
 export * from './overlay/ui/index.ts';
+export * from './panel/ui/index.ts';
 export * from './parallel/ui/index.ts';
 export * from './pedagogy/ui/index.ts';
 export * from './periodic/ui/index.ts';
@@ -26,4 +27,8 @@ export * from './scatter/ui/index.ts';
 export * from './scatter3d/ui/index.ts';
 export * from './share/ui/index.ts';
 export * from './shared/ui/index.ts';
+export type { ConformerTableProps } from './structure/ui/ConformerTable.tsx';
+export { ConformerTable } from './structure/ui/ConformerTable.tsx';
+export type { ConformerColumn } from './structure/ui/conformerColumns.ts';
+export { CONFORMER_COLUMN_LABELS, PICKER_COLUMNS, RANKING_COLUMNS, } from './structure/ui/conformerColumns.ts';
 //# sourceMappingURL=ui.d.ts.map

package/lib/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AAKrC,YAAY,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,eAAe,GAChB,MAAM,oCAAoC,CAAC"}

package/lib/ui.js

@@ -17,6 +17,7 @@ export * from "./hooks/ui/index.js";
 export * from "./i18n/ui/index.js";
 export * from "./language/ui/index.js";
 export * from "./overlay/ui/index.js";
+export * from "./panel/ui/index.js";
 export * from "./parallel/ui/index.js";
 export * from "./pedagogy/ui/index.js";
 export * from "./periodic/ui/index.js";
@@ -26,4 +27,6 @@ export * from "./scatter/ui/index.js";
 export * from "./scatter3d/ui/index.js";
 export * from "./share/ui/index.js";
 export * from "./shared/ui/index.js";
+export { ConformerTable } from "./structure/ui/ConformerTable.js";
+export { CONFORMER_COLUMN_LABELS, PICKER_COLUMNS, RANKING_COLUMNS, } from "./structure/ui/conformerColumns.js";
 //# sourceMappingURL=ui.js.map

package/lib/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AAMrC,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAmC,CAAC;AAEnE,OAAO,EACL,uBAAuB,EACvB,cAAc,EACd,eAAe,GAChB,MAAM,oCAAoC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.28.0",
+  "version": "0.30.0",
   "license": "MIT",
   "description": "React components, hooks and framework-free helpers shared by the cheminfo sites: site chrome, citations, sharing, routing, pedagogy, charts, and the structure, orbital and 3D molecule viewers",
   "author": "Luc Patiny",
@@ -18,6 +18,7 @@
     "./build-info": "./lib/build-info.js",
     "./conformers": "./lib/conformers.js",
     "./core": "./lib/core.js",
+    "./ir": "./lib/ir.js",
     "./molecule3d": "./lib/molecule3d.js",
     "./orbital": "./lib/orbital.js",
     "./slides": "./lib/slides.js",
@@ -61,9 +62,14 @@
   },
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^3.5.20",
+    "@tanstack/react-virtual": "^3.14.13",
     "cheminfo-font": "^1.28.0",
+    "cheminfo-types": "^1.16.0",
+    "convert-to-jcamp": "^7.0.1",
     "intl-messageformat": "^11.2.15",
+    "ir-spectrum": "^4.2.0",
     "leven": "^4.1.0",
+    "ml-spectra-processing": "^14.35.1",
     "openchemlib": "^9.25.0",
     "react-markdown": "^10.1.0",
     "rehype-raw": "^7.0.0",
@@ -85,6 +91,7 @@
     "eslint": "^9.39.5",
     "eslint-config-cheminfo-react": "^20.1.0",
     "eslint-config-cheminfo-typescript": "^22.1.0",
+    "jsdom": "^30.1.1",
     "ml-dataset-iris": "^1.2.1",
     "ml-pca": "^4.1.1",
     "ml-signal-processing": "^2.2.2",

package/src/chart/core/axisLabels.ts

@@ -0,0 +1,117 @@
+/**
+ * How a number is written wherever a chart writes one.
+ *
+ * The axis decides, not the number: the precision comes from the tick step, and
+ * the notation from the largest tick, so every label on one axis is written the
+ * same way and a reader can run an eye down a column of them. `chartAxisScale`
+ * works both out; this is where they turn into text.
+ *
+ * It is a second way of writing the labels `chartAxisScale` already carries,
+ * and it exists because the two answer different questions. A figure lifts a
+ * common power of ten into its axis title and writes short labels under it — a
+ * chart whose axis title is fixed by the measurement cannot, so a spectrum
+ * writes the magnitude into each label instead.
+ */
+
+import type { ChartAxisScale } from './chartAxisScale.ts';
+
+/**
+ * Write a number the way an axis label or a readout wants it.
+ *
+ * The decimals come from the axis, so every label on it is written to the same
+ * precision — but a tick that happens to land on a round number then reads
+ * `500.0000` where `500` was meant, and half its width is zeros carrying
+ * nothing. They are trimmed off the end only, never out of the middle, so
+ * `500.0002` keeps every digit it needs.
+ *
+ * `toFixed` also writes `-0` for anything that rounds to zero from below, which
+ * is never what an axis means and is jarring on the one tick a chemist looks at
+ * most.
+ * @param value - The number to write.
+ * @param decimals - How many decimals to write it to, as `niceTicks` derived.
+ * @returns The label.
+ */
+export function formatNumber(value: number, decimals: number): string {
+  const text = value.toFixed(Math.min(20, Math.max(0, Math.floor(decimals))));
+  const trimmed = text.includes('.') ? text.replace(/\.?0+$/, '') : text;
+  return trimmed === '-0' ? '0' : trimmed;
+}
+
+/**
+ * The magnitude above which a number is quicker read as a power of ten.
+ *
+ * An ion count is quoted in whatever the instrument counted in, so an intensity
+ * axis written out in full reads `200000000` — nine digits a reader has to group
+ * into threes before knowing which power of ten they are looking at, and wide
+ * enough to run into the axis title printed beside them. Above this the same
+ * tick is written `2e+8`, which says the magnitude first and in four characters.
+ *
+ * A hundred thousand rather than a million because that is where a number stops
+ * being read at a glance, and because it is the threshold every intensity in the
+ * mass side is already written against — a colourbar and an axis that disagreed
+ * about how one count is spelled would read as two measurements.
+ */
+export const SCIENTIFIC_ABOVE = 1e5;
+
+/**
+ * The magnitude below which the digits that mean anything are all behind zeros.
+ *
+ * The mirror of `SCIENTIFIC_ABOVE`: `0.00002` is four characters of nothing
+ * followed by the one digit that was measured.
+ */
+export const SCIENTIFIC_BELOW = 1e-4;
+
+/**
+ * Write a number as a mantissa and a power of ten.
+ *
+ * With no precision asked for, the mantissa keeps only the digits it needs — a
+ * tick at a hundred and fifty million is `1.5e+8` and the one above it `2e+8`,
+ * rather than both being padded to the same width with zeros that say nothing.
+ * The value is rounded to a few significant digits first, because a tick is
+ * reached by multiplying a step by an index and `3 * 0.1` is `0.30000000000000004`
+ * — which the shortest form would write out in full, every digit of it noise.
+ * @param value - The number to write.
+ * @param digits - How many decimals the mantissa carries. Left out, it carries
+ * as few as tell this number from its neighbours.
+ * @returns The number in scientific notation, or `0` for zero, which has no
+ * exponent and is written the same way on any axis.
+ */
+export function formatScientific(value: number, digits?: number): string {
+  if (value === 0) return '0';
+  if (digits === undefined) {
+    return Number(value.toPrecision(SCIENTIFIC_DIGITS)).toExponential();
+  }
+  return value.toExponential(Math.min(100, Math.max(0, Math.floor(digits))));
+}
+
+/**
+ * How one axis writes every one of its labels.
+ *
+ * The notation is chosen once, from the largest tick on the axis, and then used
+ * for all of them — including the small ones and the zero. An axis is read by
+ * running an eye along it, and one whose labels changed notation partway would
+ * have to be read a label at a time instead.
+ * @param axis - The axis, as `chartAxisScale` divided it.
+ * @returns A writer for every label on that axis.
+ */
+export function axisLabeller(axis: ChartAxisScale): (value: number) => string {
+  const { values, decimals } = axis;
+  let largest = 0;
+  for (const tick of values) {
+    const magnitude = Math.abs(tick);
+    if (magnitude > largest) largest = magnitude;
+  }
+  const scientific =
+    largest >= SCIENTIFIC_ABOVE || (largest > 0 && largest < SCIENTIFIC_BELOW);
+  return scientific
+    ? (value) => formatScientific(value)
+    : (value) => formatNumber(value, decimals);
+}
+
+/**
+ * How many significant digits survive the rounding that sheds floating noise.
+ *
+ * A tick is 1, 2 or 5 times a power of ten times an index, so two digits carry
+ * every one of them and six is room to spare for a readout written this way.
+ */
+const SCIENTIFIC_DIGITS = 6;