react-cheminfo 0.29.0 → 0.31.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

@@ -27,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,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"}
+{"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

@@ -27,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,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"}
+{"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.29.0",
+  "version": "0.31.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",

package/src/chrome/ui/AccountButton.tsx

@@ -0,0 +1,185 @@
+import { Menu, MenuDivider, MenuItem, PopoverNext } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
+import { NavLink } from './NavLink.tsx';
+import type { NavItem } from './navItem.ts';
+import { isModifiedClick } from './navItem.ts';
+
+/** Who the site is answering to. */
+export interface AccountIdentity {
+  /** What the person is called on screen. */
+  name: string;
+  /**
+   * What tells the account apart under that name — the address it is held at,
+   * the handle it was opened with.
+   * @default undefined
+   */
+  detail?: string;
+  /**
+   * The letters the mark is drawn with.
+   * @default the first letter of each of the first two words of `name`
+   */
+  initials?: string;
+}
+
+export interface AccountButtonProps {
+  /** Who is signed in, or `null` when nobody is. */
+  identity: AccountIdentity | null;
+  /**
+   * Whether the site has not heard back yet. Neither state is drawn until it
+   * has: a bar that offers to sign in and then turns into a name has told the
+   * visitor something false, and it is the state they act on first.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * The address signing in happens at, for a site with a page of its own for
+   * it. Writing it keeps the entry a real link, so a middle click opens a tab.
+   * @default undefined
+   */
+  signInHref?: string;
+  /**
+   * What the site does when the invitation is picked — route to that page, or
+   * open a credentials dialog for a site that has no page.
+   * @default undefined
+   */
+  onSignIn?: () => void;
+  /**
+   * What the site does when Sign out is picked.
+   * @default undefined
+   */
+  onSignOut?: () => void;
+  /**
+   * What the invitation reads, for a site whose accounts are for one kind of
+   * person — "Teacher sign in". Two words: it is written out in the bar rather
+   * than folded into a glyph.
+   * @default the chrome's own word for it, in the language of the page
+   */
+  signInLabel?: string;
+  /**
+   * The account's own pages, listed above Sign out — a profile, a settings
+   * page.
+   * @default undefined
+   */
+  items?: readonly NavItem[];
+}
+
+/**
+ * The one utility of the bar that says who the site is answering to: an
+ * invitation when nobody is signed in, and the account's mark when somebody is.
+ *
+ * The two states are told apart by whether an identity is on screen, never by
+ * the direction of an arrow. Blueprint's `log-in` and `log-out` are the same
+ * arrow either side of the same door, and at 14 px among four other monochrome
+ * glyphs nobody reads which side it is on — a site drawing one reports the
+ * visitor as signed in while they are signed out. So the invitation is the
+ * words `Sign in`, which no mark can be mistaken for, and being signed in is
+ * the person's own initials.
+ * @param props - Who is signed in, what signing in and out do, and the pages
+ * the account's menu lists.
+ * @returns The entry, or nothing while the site is still asking.
+ */
+export function AccountButton(props: AccountButtonProps): ReactElement | null {
+  const {
+    identity,
+    loading = false,
+    signInHref,
+    onSignIn,
+    onSignOut,
+    signInLabel,
+    items = [],
+  } = props;
+  const t = useChromeT();
+
+  if (loading) {
+    // The width of the mark, so the bar does not jump when the answer lands.
+    return <span className="account-button__pending" aria-hidden="true" />;
+  }
+
+  if (identity === null) {
+    return (
+      <NavLink
+        className="account-button account-button--out"
+        item={{
+          id: 'account',
+          label: signInLabel ?? t('account.signIn'),
+          href: signInHref,
+          onSelect: onSignIn,
+        }}
+      />
+    );
+  }
+
+  const { name, detail, initials = initialsOf(name) } = identity;
+
+  return (
+    <PopoverNext
+      placement="bottom-end"
+      content={
+        <Menu className="nav-menu account-menu">
+          <li className="account-menu__identity">
+            <span className="account-menu__name">{name}</span>
+            {detail === undefined ? null : (
+              <span className="account-menu__detail">{detail}</span>
+            )}
+          </li>
+          <MenuDivider />
+          {items.map((item) => (
+            <MenuItem
+              key={item.id}
+              icon={item.icon}
+              text={item.label}
+              href={item.href}
+              target={item.external ? '_blank' : undefined}
+              onClick={(event) => {
+                if (item.onSelect === undefined || isModifiedClick(event)) {
+                  return;
+                }
+                event.preventDefault();
+                item.onSelect();
+              }}
+            />
+          ))}
+          {items.length === 0 ? null : <MenuDivider />}
+          <MenuItem
+            icon="log-out"
+            text={t('account.signOut')}
+            onClick={onSignOut}
+          />
+        </Menu>
+      }
+    >
+      <button
+        type="button"
+        className="nav-link nav-link--icon account-button account-button--in"
+        title={t('account.signedInAs', { name })}
+        aria-label={t('account.signedInAs', { name })}
+      >
+        <span className="account-mark">{initials}</span>
+      </button>
+    </PopoverNext>
+  );
+}
+
+/**
+ * The letters a name is marked with: the first of each of its first two words,
+ * or the first two letters of a name written as one word.
+ * @param name - What the person is called.
+ * @returns One or two letters, in capitals.
+ */
+function initialsOf(name: string): string {
+  const [first, second] = name.split(/\s+/).filter((word) => word !== '');
+  if (first === undefined) return '?';
+  if (second === undefined) return firstWordInitials(first);
+  return `${first.charAt(0)}${second.charAt(0)}`.toUpperCase();
+}
+
+// A single word is usually a handle or an address, where the two letters say
+// more than one does — but never the part after the `@`, which every account
+// on the same domain would share.
+function firstWordInitials(word: string): string {
+  const [local = ''] = word.split('@');
+  return (local === '' ? word : local).slice(0, 2).toUpperCase();
+}

package/src/chrome/ui/index.ts

@@ -1,3 +1,5 @@
+export type { AccountButtonProps, AccountIdentity } from './AccountButton.tsx';
+export { AccountButton } from './AccountButton.tsx';
 export type { HeaderToggleOption, HeaderToggleProps } from './HeaderToggle.tsx';
 export { HeaderToggle } from './HeaderToggle.tsx';
 export type { NavItem } from './navItem.ts';

package/src/clipboard/ui/ClickToCopy.tsx

@@ -71,6 +71,12 @@ export interface ClickToCopyProps {
    * @default undefined
    */
   style?: CSSProperties;
+  /**
+   * `data-testid` the element carries, so an end-to-end suite can select the
+   * value without depending on the text inside it.
+   * @default undefined
+   */
+  testId?: string;
 }
 
 /** Past this length the value is left out of the title: a molfile is no tooltip. */
@@ -106,13 +112,14 @@ export function ClickToCopy(props: ClickToCopyProps): ReactElement {
     disabled = false,
     className,
     style,
+    testId,
   } = props;
   const t = useChromeT();
   const { copied, failed, copy } = useCopyToClipboard();
 
   if (disabled) {
     return (
-      <Element className={className} style={style}>
+      <Element className={className} style={style} data-testid={testId}>
         {children}
       </Element>
     );
@@ -138,6 +145,7 @@ export function ClickToCopy(props: ClickToCopyProps): ReactElement {
         className,
       )}
       style={style}
+      data-testid={testId}
       role={focusable && !CELLS.has(Element) ? 'button' : undefined}
       tabIndex={focusable ? 0 : undefined}
       title={title ?? copyTitle(value, label, t)}