react-cheminfo 0.69.0 → 0.71.0

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

@@ -0,0 +1,92 @@
+/**
+ * The generic zoom, told what a mass spectrum's window is fitted to.
+ *
+ * Every gesture — the drag, the wheel, the double click — is `useChartZoom` in
+ * the shared chart and is not written here, because none of it is about mass.
+ * What *is* about mass is the fit: a spectrum carries two traces where only one
+ * is drawn, and a previewed pattern is left out of the extents. That arithmetic
+ * is `massDomain.ts`, and this hook is what joins the two.
+ *
+ * One gesture is about mass in the same way. A click on a mass chart is a peak
+ * or it is nothing at all, and only the axis the gesture was measured against
+ * can say which of the two it was — so the hook that owns that axis answers it,
+ * and the chart above is handed the peak rather than a place on the plot.
+ */
+import type { RefObject } from 'react';
+import type { ZoomDragMode } from '../../chart/core/chartDomain.ts';
+import type { PlotRect } from '../../chart/core/chartGeometry.ts';
+import type { ChartScale } from '../../chart/core/chartScale.ts';
+import type { ChartClickModifiers } from '../../chart/ui/chartGestures.ts';
+import type { ChartZoom } from '../../chart/ui/useChartZoom.ts';
+import type { MassDomain, MassSpectrum } from '../core/massSpectrum.ts';
+import type { NearestPeak } from '../core/nearestPeak.ts';
+/** A click on the plot, with everything needed to say what it was on. */
+export interface MassZoomClick {
+    /** Where it landed on the m/z axis. */
+    mz: number;
+    /** The picked peak within reach of it, `null` when it landed on none. */
+    peak: NearestPeak | null;
+    /**
+     * The m/z axis the click was measured against, for a host testing marks of
+     * its own — a ring on a fragmented peak — before the sticks.
+     */
+    xScale: ChartScale;
+    /** The modifier keys held as the button came up. */
+    modifiers: ChartClickModifiers;
+}
+export interface MassZoomOptions {
+    /** What the chart draws. */
+    spectra: readonly MassSpectrum[];
+    /**
+     * What the window is fitted to instead, when that is not what the chart
+     * draws — every pane of a stack is fitted to the union, so a faint spectrum
+     * and a bright one are not drawn alike.
+     * @default the spectra the chart draws
+     */
+    fitTo?: readonly MassSpectrum[];
+    /**
+     * Whether one spectrum is drawn below the axis, which fits the window about
+     * zero.
+     * @default false
+     */
+    mirror?: boolean;
+    /** The SVG the gestures are made on, as it was handed to its `ref`. */
+    svgRef: RefObject<SVGSVGElement | null>;
+    /** Where the plot sits inside that SVG, which the axes are laid over. */
+    plot: PlotRect;
+    /**
+     * The window a host is imposing, `null` while it imposes none. Handed straight
+     * through; `useChartZoom` documents what imposing one does.
+     * @default null
+     */
+    domain?: MassDomain | null;
+    /**
+     * What a drag asks for: the m/z axis alone, or the rectangle swept out.
+     * @default 'xAxis'
+     */
+    drag?: ZoomDragMode;
+    /**
+     * Whether the chart answers `f` with the fit itself. A viewer running its own
+     * keys through a command table, where the key is documented, turns it off.
+     * @default true
+     */
+    keys?: boolean;
+    /**
+     * Told where a click on the plot landed — a press let go over it without
+     * travelling, never the end of a drag — and the peak within reach of it.
+     * @default undefined
+     */
+    onClick?: (click: MassZoomClick) => void;
+}
+/**
+ * Zoom a mass chart by dragging it, by the wheel and by double clicking it.
+ *
+ * The y axis keeps its default rules, which are a stick spectrum's: zero is the
+ * baseline the wheel scales about, and it stays inside the window however the
+ * chart is zoomed, because a window starting at a tenth of the base peak would
+ * cut every stick off at the ankles.
+ * @param options - The chart and what it holds.
+ * @returns The window and the gestures that move it.
+ */
+export declare function useMassZoom(options: MassZoomOptions): ChartZoom;
+//# sourceMappingURL=useMassZoom.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMassZoom.d.ts","sourceRoot":"","sources":["../../../src/mass/ui/useMassZoom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAGhE,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAG1D,yEAAyE;AACzE,MAAM,WAAW,aAAa;IAC5B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,yEAAyE;IACzE,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB;;;OAGG;IACH,MAAM,EAAE,UAAU,CAAC;IACnB,oDAAoD;IACpD,SAAS,EAAE,mBAAmB,CAAC;CAChC;AAED,MAAM,WAAW,eAAe;IAC9B,4BAA4B;IAC5B,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uEAAuE;IACvE,MAAM,EAAE,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IACxC,yEAAyE;IACzE,IAAI,EAAE,QAAQ,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,eAAe,GAAG,SAAS,CAwD/D"}

package/lib/mass/ui/useMassZoom.js

@@ -0,0 +1,65 @@
+/**
+ * The generic zoom, told what a mass spectrum's window is fitted to.
+ *
+ * Every gesture — the drag, the wheel, the double click — is `useChartZoom` in
+ * the shared chart and is not written here, because none of it is about mass.
+ * What *is* about mass is the fit: a spectrum carries two traces where only one
+ * is drawn, and a previewed pattern is left out of the extents. That arithmetic
+ * is `massDomain.ts`, and this hook is what joins the two.
+ *
+ * One gesture is about mass in the same way. A click on a mass chart is a peak
+ * or it is nothing at all, and only the axis the gesture was measured against
+ * can say which of the two it was — so the hook that owns that axis answers it,
+ * and the chart above is handed the peak rather than a place on the plot.
+ */
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import { useChartZoom } from "../../chart/ui/useChartZoom.js";
+import { fittedTo, fullDomain } from "../core/massDomain.js";
+import { peakAtMz } from "../core/nearestPeak.js";
+/**
+ * Zoom a mass chart by dragging it, by the wheel and by double clicking it.
+ *
+ * The y axis keeps its default rules, which are a stick spectrum's: zero is the
+ * baseline the wheel scales about, and it stays inside the window however the
+ * chart is zoomed, because a window starting at a tenth of the base peak would
+ * cut every stick off at the ankles.
+ * @param options - The chart and what it holds.
+ * @returns The window and the gestures that move it.
+ */
+export function useMassZoom(options) {
+    const { spectra, fitTo, mirror = false, svgRef, plot, domain = null, drag = 'xAxis', keys = true, onClick, } = options;
+    const measured = fitTo ?? spectra;
+    const fitted = useMemo(() => fullDomain(measured, mirror), [measured, mirror]);
+    const fitKey = useMemo(() => fittedTo(measured, mirror), [measured, mirror]);
+    const gestures = useMemo(() => ({ drag, wheel: true, keys }), [drag, keys]);
+    // The axis a click is measured against is the one the zoom arrived at, and
+    // the click comes back out of that same hook: it therefore reaches the
+    // handler through a ref, read as the button comes up rather than closed over
+    // when the gesture layer was built.
+    const axis = useRef(null);
+    const onPress = useCallback((point, modifiers) => {
+        const xScale = axis.current;
+        if (xScale === null || onClick === undefined)
+            return;
+        onClick({
+            mz: point.x,
+            peak: peakAtMz(spectra, xScale, point.x),
+            xScale,
+            modifiers,
+        });
+    }, [spectra, onClick]);
+    const zoom = useChartZoom({
+        fitted,
+        fitKey,
+        svgRef,
+        plot,
+        domain,
+        gestures,
+        ...(onClick === undefined ? {} : { onClick: onPress }),
+    });
+    useLayoutEffect(() => {
+        axis.current = zoom.xScale;
+    });
+    return zoom;
+}
+//# sourceMappingURL=useMassZoom.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMassZoom.js","sourceRoot":"","sources":["../../../src/mass/ui/useMassZoom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAGH,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAQtE,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAG7D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AA8DlD;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CAAC,OAAwB;IAClD,MAAM,EACJ,OAAO,EACP,KAAK,EACL,MAAM,GAAG,KAAK,EACd,MAAM,EACN,IAAI,EACJ,MAAM,GAAG,IAAI,EACb,IAAI,GAAG,OAAO,EACd,IAAI,GAAG,IAAI,EACX,OAAO,GACR,GAAG,OAAO,CAAC;IAEZ,MAAM,QAAQ,GAAG,KAAK,IAAI,OAAO,CAAC;IAClC,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,EAClC,CAAC,QAAQ,EAAE,MAAM,CAAC,CACnB,CAAC;IACF,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7E,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;IAE5E,2EAA2E;IAC3E,uEAAuE;IACvE,6EAA6E;IAC7E,oCAAoC;IACpC,MAAM,IAAI,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAE7C,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,KAAiB,EAAE,SAA8B,EAAE,EAAE;QACpD,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAC5B,IAAI,MAAM,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS;YAAE,OAAO;QACrD,OAAO,CAAC;YACN,EAAE,EAAE,KAAK,CAAC,CAAC;YACX,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;YACxC,MAAM;YACN,SAAS;SACV,CAAC,CAAC;IACL,CAAC,EACD,CAAC,OAAO,EAAE,OAAO,CAAC,CACnB,CAAC;IAEF,MAAM,IAAI,GAAG,YAAY,CAAC;QACxB,MAAM;QACN,MAAM;QACN,MAAM;QACN,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,GAAG,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;KACvD,CAAC,CAAC;IAEH,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;AACd,CAAC"}

package/lib/mass.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Displaying mass spectra: the chart, the peak table and the whole editor.
+ *
+ * A door of its own, and not part of `react-cheminfo/core` or
+ * `react-cheminfo/ui`, because reading a spectrum drags the formats it may
+ * arrive in — `jcampconverter` and `xy-parser` for the files, `ms-spectrum` and
+ * `ml-gsd` for the peak picking, `convert-to-jcamp` for writing them back out.
+ * A site with no spectra to look at installs none of it.
+ *
+ * The infrared viewer, `react-cheminfo/ir`, is its sibling: the same shell, the
+ * same three buckets of state, the same chart underneath. Neither imports the
+ * other.
+ */
+export * from './mass/core/index.ts';
+export * from './mass/ui/index.ts';
+//# sourceMappingURL=mass.d.ts.map

package/lib/mass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mass.d.ts","sourceRoot":"","sources":["../src/mass.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC"}

package/lib/mass.js

@@ -0,0 +1,16 @@
+/**
+ * Displaying mass spectra: the chart, the peak table and the whole editor.
+ *
+ * A door of its own, and not part of `react-cheminfo/core` or
+ * `react-cheminfo/ui`, because reading a spectrum drags the formats it may
+ * arrive in — `jcampconverter` and `xy-parser` for the files, `ms-spectrum` and
+ * `ml-gsd` for the peak picking, `convert-to-jcamp` for writing them back out.
+ * A site with no spectra to look at installs none of it.
+ *
+ * The infrared viewer, `react-cheminfo/ir`, is its sibling: the same shell, the
+ * same three buckets of state, the same chart underneath. Neither imports the
+ * other.
+ */
+export * from "./mass/core/index.js";
+export * from "./mass/ui/index.js";
+//# sourceMappingURL=mass.js.map

package/lib/mass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mass.js","sourceRoot":"","sources":["../src/mass.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC"}

package/lib/panel/ui/PanelRail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelRail.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/PanelRail.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;;GAMG;AACH,MAAM,WAAW,SAAS,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACpD,8DAA8D;IAC9D,EAAE,EAAE,GAAG,CAAC;IACR,yCAAyC;IACzC,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC9B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,8BAA8B;AAC9B,MAAM,WAAW,cAAc,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACzD,uDAAuD;IACvD,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IACtC,8BAA8B;IAC9B,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,qDAAqD;IACrD,QAAQ,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,GAAG,SAAS,MAAM,EAC1C,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,GACzB,SAAS,CAoBX"}
+{"version":3,"file":"PanelRail.d.ts","sourceRoot":"","sources":["../../../src/panel/ui/PanelRail.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;;GAMG;AACH,MAAM,WAAW,SAAS,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACpD,8DAA8D;IAC9D,EAAE,EAAE,GAAG,CAAC;IACR,yCAAyC;IACzC,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC9B,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,8BAA8B;AAC9B,MAAM,WAAW,cAAc,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM;IACzD,uDAAuD;IACvD,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IACtC,8BAA8B;IAC9B,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,qDAAqD;IACrD,QAAQ,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,GAAG,SAAS,MAAM,EAC1C,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,GACzB,SAAS,CAwBX"}

package/lib/panel/ui/PanelRail.js

@@ -7,6 +7,11 @@ import { ActivityBar } from 'react-science/ui';
  */
 export function PanelRail(props) {
     const { panels, openIds, onToggle } = props;
-    return (_jsx(ActivityBar, { children: panels.map((panel) => (_jsx(ActivityBar.Item, { id: panel.id, icon: panel.icon, tooltip: panel.title, "aria-label": panel.title, active: openIds.includes(panel.id), onClick: () => onToggle(panel.id) }, panel.id))) }));
+    return (_jsx(ActivityBar, { children: panels.map((panel) => (_jsx(ActivityBar.Item
+        // The panel id goes on a data attribute rather than on `id`: it is
+        // unique within one rail, not on the page, and a page can hold two —
+        // AGA2S hands the mass viewer the glycan editor's own panels, so both
+        // rails carry `fragments`.
+        , { "data-panel-id": panel.id, icon: panel.icon, tooltip: panel.title, "aria-label": panel.title, active: openIds.includes(panel.id), onClick: () => onToggle(panel.id) }, panel.id))) }));
 }
 //# sourceMappingURL=PanelRail.js.map

package/lib/panel/ui/PanelRail.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelRail.js","sourceRoot":"","sources":["../../../src/panel/ui/PanelRail.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AA4B/C;;;;GAIG;AACH,MAAM,UAAU,SAAS,CACvB,KAA0B;IAE1B,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE5C,OAAO,CACL,KAAC,WAAW,cACT,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,KAAC,WAAW,CAAC,IAAI,IAEf,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,KAAK,CAAC,KAAK,gBAGR,KAAK,CAAC,KAAK,EACvB,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,IAR5B,KAAK,CAAC,EAAE,CASb,CACH,CAAC,GACU,CACf,CAAC;AACJ,CAAC"}
+{"version":3,"file":"PanelRail.js","sourceRoot":"","sources":["../../../src/panel/ui/PanelRail.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AA4B/C;;;;GAIG;AACH,MAAM,UAAU,SAAS,CACvB,KAA0B;IAE1B,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE5C,OAAO,CACL,KAAC,WAAW,cACT,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,KAAC,WAAW,CAAC,IAAI;QACf,mEAAmE;QACnE,qEAAqE;QACrE,sEAAsE;QACtE,2BAA2B;6BACZ,KAAK,CAAC,EAAE,EAEvB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,KAAK,CAAC,KAAK,gBAGR,KAAK,CAAC,KAAK,EACvB,MAAM,EAAE,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,IAP5B,KAAK,CAAC,EAAE,CAQb,CACH,CAAC,GACU,CACf,CAAC;AACJ,CAAC"}

package/lib/slides/ui/slideSanitizeSchema.d.ts

@@ -4,8 +4,9 @@ import type { Options as SanitizeSchema } from 'rehype-sanitize';
  *
  * GitHub's schema, which already strips scripts, event handlers and every URL
  * that is not http, https or relative, plus what decks legitimately use beyond
- * it: figures, the class a site styles a block with, and frames. Which frame
- * may actually be drawn is decided by `isFamilyFrameSource` when it renders.
+ * it: figures, the class a site styles a block with, frames, and formulas
+ * written in MathML, which the browser draws natively. Which frame may actually
+ * be drawn is decided by `isFamilyFrameSource` when it renders.
  */
 export declare const SLIDE_SANITIZE_SCHEMA: SanitizeSchema;
 //# sourceMappingURL=slideSanitizeSchema.d.ts.map

package/lib/slides/ui/slideSanitizeSchema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slideSanitizeSchema.d.ts","sourceRoot":"","sources":["../../../src/slides/ui/slideSanitizeSchema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGjE;;;;;;;GAOG;AACH,eAAO,MAAM,qBAAqB,EAAE,cAiBnC,CAAC"}
+{"version":3,"file":"slideSanitizeSchema.d.ts","sourceRoot":"","sources":["../../../src/slides/ui/slideSanitizeSchema.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAuEjE;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,EAAE,cAmBnC,CAAC"}

package/lib/slides/ui/slideSanitizeSchema.js

@@ -1,11 +1,77 @@
 import { defaultSchema } from 'rehype-sanitize';
+/**
+ * The MathML Core elements a formula is written with. `annotation-xml`, which
+ * may carry HTML, and the legacy `maction` are left out.
+ */
+const MATHML_ELEMENTS = [
+    'math',
+    'merror',
+    'mfrac',
+    'mi',
+    'mmultiscripts',
+    'mn',
+    'mo',
+    'mover',
+    'mpadded',
+    'mphantom',
+    'mprescripts',
+    'mroot',
+    'mrow',
+    'ms',
+    'mspace',
+    'msqrt',
+    'mstyle',
+    'msub',
+    'msubsup',
+    'msup',
+    'mtable',
+    'mtd',
+    'mtext',
+    'mtr',
+    'munder',
+    'munderover',
+    'semantics',
+    'annotation',
+];
+/**
+ * What every MathML element may carry, colours aside: a formula takes the
+ * slide's ink, as everything else on it does.
+ */
+const MATHML_GLOBAL = ['dir', 'displaystyle', 'mathvariant', 'scriptlevel'];
+/** The attributes particular to one MathML element, by hast property name. */
+const MATHML_ATTRIBUTES = {
+    math: [...MATHML_GLOBAL, 'display', 'alttext'],
+    mo: [
+        ...MATHML_GLOBAL,
+        'form',
+        'fence',
+        'separator',
+        'lspace',
+        'rspace',
+        'stretchy',
+        'symmetric',
+        'maxsize',
+        'minsize',
+        'largeop',
+        'movablelimits',
+    ],
+    mfrac: [...MATHML_GLOBAL, 'linethickness'],
+    mspace: [...MATHML_GLOBAL, 'width', 'height', 'depth'],
+    mpadded: [...MATHML_GLOBAL, 'width', 'height', 'depth', 'lspace', 'voffset'],
+    mover: [...MATHML_GLOBAL, 'accent'],
+    munder: [...MATHML_GLOBAL, 'accentunder'],
+    munderover: [...MATHML_GLOBAL, 'accent', 'accentunder'],
+    mtd: [...MATHML_GLOBAL, 'columnspan', 'rowSpan'],
+    annotation: ['encoding'],
+};
 /**
  * What survives of the raw HTML a deck writes.
  *
  * GitHub's schema, which already strips scripts, event handlers and every URL
  * that is not http, https or relative, plus what decks legitimately use beyond
- * it: figures, the class a site styles a block with, and frames. Which frame
- * may actually be drawn is decided by `isFamilyFrameSource` when it renders.
+ * it: figures, the class a site styles a block with, frames, and formulas
+ * written in MathML, which the browser draws natively. Which frame may actually
+ * be drawn is decided by `isFamilyFrameSource` when it renders.
  */
 export const SLIDE_SANITIZE_SCHEMA = {
     ...defaultSchema,
@@ -18,11 +84,25 @@ export const SLIDE_SANITIZE_SCHEMA = {
         'mark',
         'small',
         'u',
+        ...MATHML_ELEMENTS,
     ],
     attributes: {
         ...defaultSchema.attributes,
+        ...mathmlAttributes(),
         iframe: ['src', 'allowFullScreen'],
         '*': [...(defaultSchema.attributes?.['*'] ?? []), 'className'],
     },
 };
+/**
+ * The attributes of every MathML element, those of its own and the global
+ * ones.
+ * @returns The attribute lists, by element.
+ */
+function mathmlAttributes() {
+    const attributes = {};
+    for (const element of MATHML_ELEMENTS) {
+        attributes[element] = MATHML_ATTRIBUTES[element] ?? MATHML_GLOBAL;
+    }
+    return attributes;
+}
 //# sourceMappingURL=slideSanitizeSchema.js.map

package/lib/slides/ui/slideSanitizeSchema.js.map

@@ -1 +1 @@
-{"version":3,"file":"slideSanitizeSchema.js","sourceRoot":"","sources":["../../../src/slides/ui/slideSanitizeSchema.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAmB;IACnD,GAAG,aAAa;IAChB,QAAQ,EAAE;QACR,GAAG,CAAC,aAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;QACjC,SAAS;QACT,YAAY;QACZ,QAAQ;QACR,QAAQ;QACR,MAAM;QACN,OAAO;QACP,GAAG;KACJ;IACD,UAAU,EAAE;QACV,GAAG,aAAa,CAAC,UAAU;QAC3B,MAAM,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC;QAClC,GAAG,EAAE,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;KAC/D;CACF,CAAC"}
+{"version":3,"file":"slideSanitizeSchema.js","sourceRoot":"","sources":["../../../src/slides/ui/slideSanitizeSchema.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;;GAGG;AACH,MAAM,eAAe,GAAG;IACtB,MAAM;IACN,QAAQ;IACR,OAAO;IACP,IAAI;IACJ,eAAe;IACf,IAAI;IACJ,IAAI;IACJ,OAAO;IACP,SAAS;IACT,UAAU;IACV,aAAa;IACb,OAAO;IACP,MAAM;IACN,IAAI;IACJ,QAAQ;IACR,OAAO;IACP,QAAQ;IACR,MAAM;IACN,SAAS;IACT,MAAM;IACN,QAAQ;IACR,KAAK;IACL,OAAO;IACP,KAAK;IACL,QAAQ;IACR,YAAY;IACZ,WAAW;IACX,YAAY;CACb,CAAC;AAEF;;;GAGG;AACH,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC;AAE5E,8EAA8E;AAC9E,MAAM,iBAAiB,GAA6B;IAClD,IAAI,EAAE,CAAC,GAAG,aAAa,EAAE,SAAS,EAAE,SAAS,CAAC;IAC9C,EAAE,EAAE;QACF,GAAG,aAAa;QAChB,MAAM;QACN,OAAO;QACP,WAAW;QACX,QAAQ;QACR,QAAQ;QACR,UAAU;QACV,WAAW;QACX,SAAS;QACT,SAAS;QACT,SAAS;QACT,eAAe;KAChB;IACD,KAAK,EAAE,CAAC,GAAG,aAAa,EAAE,eAAe,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;IACtD,OAAO,EAAE,CAAC,GAAG,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,CAAC;IAC5E,KAAK,EAAE,CAAC,GAAG,aAAa,EAAE,QAAQ,CAAC;IACnC,MAAM,EAAE,CAAC,GAAG,aAAa,EAAE,aAAa,CAAC;IACzC,UAAU,EAAE,CAAC,GAAG,aAAa,EAAE,QAAQ,EAAE,aAAa,CAAC;IACvD,GAAG,EAAE,CAAC,GAAG,aAAa,EAAE,YAAY,EAAE,SAAS,CAAC;IAChD,UAAU,EAAE,CAAC,UAAU,CAAC;CACzB,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAmB;IACnD,GAAG,aAAa;IAChB,QAAQ,EAAE;QACR,GAAG,CAAC,aAAa,CAAC,QAAQ,IAAI,EAAE,CAAC;QACjC,SAAS;QACT,YAAY;QACZ,QAAQ;QACR,QAAQ;QACR,MAAM;QACN,OAAO;QACP,GAAG;QACH,GAAG,eAAe;KACnB;IACD,UAAU,EAAE;QACV,GAAG,aAAa,CAAC,UAAU;QAC3B,GAAG,gBAAgB,EAAE;QACrB,MAAM,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC;QAClC,GAAG,EAAE,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAAE,WAAW,CAAC;KAC/D;CACF,CAAC;AAEF;;;;GAIG;AACH,SAAS,gBAAgB;IACvB,MAAM,UAAU,GAA6B,EAAE,CAAC;IAChD,KAAK,MAAM,OAAO,IAAI,eAAe,EAAE,CAAC;QACtC,UAAU,CAAC,OAAO,CAAC,GAAG,iBAAiB,CAAC,OAAO,CAAC,IAAI,aAAa,CAAC;IACpE,CAAC;IACD,OAAO,UAAU,CAAC;AACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.69.0",
+  "version": "0.71.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",
@@ -23,6 +23,7 @@
     "./host": "./lib/host.js",
     "./host-testing": "./lib/host-testing.js",
     "./ir": "./lib/ir.js",
+    "./mass": "./lib/mass.js",
     "./molecule3d": "./lib/molecule3d.js",
     "./molstar/*": "./lib/molstar/*/index.js",
     "./orbital": "./lib/orbital.js",
@@ -79,16 +80,20 @@
     "convert-to-jcamp": "^7.0.1",
     "intl-messageformat": "^11.2.15",
     "ir-spectrum": "^4.2.0",
+    "jcampconverter": "^12.5.11",
     "leven": "^4.1.0",
     "mf-parser": "^3.9.3",
+    "ml-peak-shape-generator": "^5.6.0",
     "ml-spectra-processing": "^14.35.1",
     "ml-xsadd": "^3.0.1",
+    "ms-spectrum": "^3.12.1",
     "openchemlib": "^9.25.0",
     "react-markdown": "^10.1.0",
     "react-mf": "^3.1.1",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "semver": "^7.8.5",
+    "xy-parser": "^6.0.1",
     "yaml": "^2.9.1"
   },
   "devDependencies": {

package/src/about/core/providers.ts

@@ -42,4 +42,11 @@ export const PROVIDERS = [
     href: 'https://www.epfl.ch',
     location: 'Lausanne, Switzerland',
   },
+  {
+    id: 'unil-esc',
+    name: 'ESC',
+    fullName: 'École des sciences criminelles, Université de Lausanne',
+    href: 'https://www.unil.ch/esc/',
+    location: 'Lausanne, Switzerland',
+  },
 ] as const satisfies readonly ProviderEntry[];

package/src/about/ui/AboutProvidedBy.tsx

@@ -88,11 +88,30 @@ function ProviderLogo(props: { provider: ProviderEntry }): ReactElement {
   switch (provider.id) {
     case 'epfl':
       return <EpflLogo label={label} />;
+    case 'unil-esc':
+      return <UnilEscLockup label={label} />;
     default:
       return <span>{provider.name}</span>;
   }
 }
 
+// The school's name set in type beside its university's, in the black the
+// university writes its name in: no drawing of its emblem is kept here, and a
+// name nobody can misread credits it better than a guess at one.
+function UnilEscLockup(props: { label: string }): ReactElement {
+  return (
+    <span role="img" aria-label={props.label} style={UNIL_LOCKUP_STYLE}>
+      <span style={UNIL_NAME_STYLE}>UNIL</span>
+      <span style={UNIL_RULE_STYLE} />
+      <span style={UNIL_SCHOOL_STYLE}>
+        École des
+        <br />
+        sciences criminelles
+      </span>
+    </span>
+  );
+}
+
 function EpflLogo(props: { label: string }): ReactElement {
   return (
     <svg
@@ -173,3 +192,33 @@ const ROLES_STYLE = {
   paddingLeft: 20,
   borderTop: '1px solid var(--border)',
 } as const satisfies CSSProperties;
+
+const UNIL_LOCKUP_STYLE = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+  height: 31,
+  // The institution's own colour, not a family token: the tile is white on
+  // every theme.
+  color: 'black',
+} as const satisfies CSSProperties;
+
+const UNIL_NAME_STYLE = {
+  fontSize: 24,
+  fontWeight: 800,
+  letterSpacing: '0.02em',
+  lineHeight: 1,
+} as const satisfies CSSProperties;
+
+const UNIL_RULE_STYLE = {
+  alignSelf: 'stretch',
+  width: 1,
+  background: 'black',
+} as const satisfies CSSProperties;
+
+const UNIL_SCHOOL_STYLE = {
+  fontSize: 10.5,
+  fontWeight: 600,
+  lineHeight: 1.15,
+  whiteSpace: 'nowrap',
+} as const satisfies CSSProperties;

package/src/chart/ui/useChartPointer.ts

@@ -16,7 +16,7 @@
  */
 
 import type { RefObject } from 'react';
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import type { PlotRect } from '../core/chartGeometry.ts';
 import type { ChartPoint } from '../core/svgPoint.ts';
@@ -42,7 +42,9 @@ export interface ChartPointerOptions<TReadout> {
   /**
    * What the chart reads at a point. Called on every move the pointer makes
    * inside the plot, and read live rather than closed over, so it may capture
-   * the scales as they are currently zoomed.
+   * the scales as they are currently zoomed — and called again at the held
+   * position whenever it changes, which is how a zoom made without moving the
+   * pointer is read under it.
    */
   read: (point: ChartPoint) => TReadout;
   /**
@@ -83,6 +85,12 @@ export interface ChartPointerOptions<TReadout> {
  * is under the pointer" **after** the row's "this trace is being read", and
  * wipes it. Heard as `pointerout`, the report lands first and the row has the
  * last word. The containment test is what `pointerleave` was giving for free.
+ *
+ * What is returned is read again at render whenever `read` changes, because a
+ * zoom by the wheel, a key or the end of a drag changes the scales without
+ * moving the pointer, and a crosshair still quoting the window before it would
+ * name a mass the line it is drawn on no longer stands at. `onReadout` is told
+ * on the next move, as it always is.
  * @param options - The chart, and how to read a point on it.
  * @returns Where the pointer is and what it reads, both `null` while it is
  * anywhere but over the plot.
@@ -90,7 +98,7 @@ export interface ChartPointerOptions<TReadout> {
 export function useChartPointer<TReadout>(
   options: ChartPointerOptions<TReadout>,
 ): ChartPointer<TReadout> {
-  const { svgRef } = options;
+  const { svgRef, read } = options;
   const [pointer, setPointer] = useState<ChartPointer<TReadout>>(POINTER_AWAY);
   const latest = useRef(options);
   const reported = useRef<TReadout | null>(null);
@@ -133,7 +141,13 @@ export function useChartPointer<TReadout>(
     };
   }, [svgRef]);
 
-  return pointer;
+  return useMemo(
+    () =>
+      pointer.position === null
+        ? pointer
+        : { position: pointer.position, readout: read(pointer.position) },
+    [pointer, read],
+  );
 }
 
 /**

package/src/credits/core/credits.ts

@@ -187,6 +187,42 @@ export const CREDITS = [
       'reads the SPC files of Thermo Galactic GRAMS, Shimadzu and PerkinElmer.',
     license: 'MIT',
   },
+  {
+    id: 'ms-spectrum',
+    name: 'ms-spectrum',
+    href: 'https://github.com/cheminfo/mass-tools/tree/main/packages/ms-spectrum',
+    description:
+      'tells a profile from a peak table, picks the peaks and establishes their charges.',
+    license: 'MIT',
+  },
+  {
+    id: 'ml-gsd',
+    name: 'ml-gsd',
+    href: 'https://github.com/mljs/global-spectral-deconvolution',
+    description: 'finds the peaks of a continuous spectrum, and their widths.',
+    license: 'MIT',
+  },
+  {
+    id: 'jcampconverter',
+    name: 'jcampconverter',
+    href: 'https://www.npmjs.com/package/jcampconverter',
+    description: 'reads JCAMP-DX files.',
+    license: 'CC-BY-NC-SA-4.0',
+  },
+  {
+    id: 'xy-parser',
+    name: 'xy-parser',
+    href: 'https://github.com/cheminfo/xy-parser',
+    description: 'reads two columns of numbers out of any text file.',
+    license: 'MIT',
+  },
+  {
+    id: 'convert-to-jcamp',
+    name: 'convert-to-jcamp',
+    href: 'https://github.com/cheminfo/convert-to-jcamp',
+    description: 'writes spectra back out as JCAMP-DX.',
+    license: 'MIT',
+  },
   {
     id: 'occ',
     name: 'OCC',
@@ -234,6 +270,16 @@ export const CREDITS = [
     description: 'the 3D viewer, its representations and its surfaces.',
     license: 'MIT',
   },
+  {
+    // The viewer is MIT; the core and plugins that read and process the
+    // spectra (@zakodium/nmrium-core, -core-plugins) are CC-BY-NC-SA-4.0.
+    id: 'nmrium',
+    name: 'NMRium',
+    href: 'https://www.nmrium.org/',
+    description:
+      'displays and processes the NMR spectra, read from their original files.',
+    license: 'MIT AND CC-BY-NC-SA-4.0',
+  },
   {
     id: 'blueprint',
     name: 'Blueprint',
@@ -384,6 +430,13 @@ export const CREDITS = [
       'the name of every compound in every language, and its article in each Wikipedia.',
     license: 'CC0-1.0',
   },
+  {
+    id: 'pubchem',
+    name: 'PubChem',
+    href: 'https://pubchem.ncbi.nlm.nih.gov/',
+    description:
+      'the identifier, the names and the synonyms each compound is linked to.',
+  },
   {
     id: 'country-flag-icons',
     name: 'country-flag-icons',

package/src/download/core/drawingMarkup.ts

@@ -1,4 +1,7 @@
+import { viewBoxAttribute } from '../../chart/core/viewTransform.ts';
+
 import { cssTokenNames, resolveCssTokens } from './cssTokens.ts';
+import type { SvgBox } from './svgBounds.ts';
 
 /**
  * One drawing, serialized with every token it names written out.
@@ -6,11 +9,25 @@ import { cssTokenNames, resolveCssTokens } from './cssTokens.ts';
  * The copy is taken first and read from the original, because the values are a
  * property of where the figure sits on the page: a detached clone inherits
  * nothing and would resolve every token to an empty string.
+ *
+ * Given a crop, the copy shows that rectangle of the drawing rather than its
+ * window on the page, at one pixel per drawing unit — so a canvas left zoomed
+ * in is saved at the same size as one left zoomed out.
  * @param drawing - The drawing, as it sits on the page.
+ * @param crop - The rectangle to show, in drawing units. Defaults to `null`,
+ *   the drawing as it is on screen.
  * @returns Its markup.
  */
-export function drawingMarkup(drawing: SVGSVGElement): string {
+export function drawingMarkup(
+  drawing: SVGSVGElement,
+  crop: SvgBox | null = null,
+): string {
   const clone = drawing.cloneNode(true) as SVGSVGElement;
+  if (crop !== null) {
+    clone.setAttribute('viewBox', viewBoxAttribute(crop));
+    clone.setAttribute('width', String(Math.round(crop.width)));
+    clone.setAttribute('height', String(Math.round(crop.height)));
+  }
   const markup = new XMLSerializer().serializeToString(clone);
   return resolveCssTokens(markup, tokenValues(drawing, cssTokenNames(markup)));
 }