react-cheminfo 0.64.1 → 0.66.0

package/src/ir/ui/IrToolbar.tsx

@@ -1,10 +1,13 @@
 import { Toolbar } from 'react-science/ui';
 
 import type { FigureDownloadState } from '../../download/ui/useFigureDownload.tsx';
-import { boxZoomOnly } from '../core/irMode.ts';
+import { bandsPointDown, boxZoomOnly } from '../core/irMode.ts';
+import { defaultIrMode } from '../core/irTechnique.ts';
+import { irCommandOffered } from '../core/irTechniqueCommands.ts';
 
 import { useIrCommandProps } from './irCommandContext.tsx';
 import { useIrEditorState } from './irStateContext.ts';
+import { useIrText } from './useIrText.ts';
 
 /** What {@link IrToolbar} needs. */
 export interface IrToolbarProps {
@@ -29,6 +32,9 @@ export interface IrToolbarProps {
  * 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.
+ *
+ * A button whose command the technique does not offer is not drawn: a Raman
+ * spectrum has a single value axis and no assignment to name.
  * @param props - Component props.
  * @returns The toolbar.
  */
@@ -38,7 +44,8 @@ export function IrToolbar(props: IrToolbarProps) {
   const command = useIrCommandProps();
   const { spectra } = state.data;
   const { domain, tool } = state.view;
-  const { mode, pickBands, showAssignments } = state.settings;
+  const { mode, pickBands, showAssignments, technique } = state.settings;
+  const text = useIrText(technique);
 
   const isEmpty = spectra.length === 0;
   // The popover opens the panel itself, so the command's own click is left out.
@@ -49,7 +56,7 @@ export function IrToolbar(props: IrToolbarProps) {
     // `collapse`, not the default `wrap`: a wrapping vertical toolbar measures
     // itself and writes the result back as an inline width, so in a row short of
     // space it settles at half an icon and stays there.
-    <Toolbar vertical overflow="collapse" aria-label="Infrared spectrum tools">
+    <Toolbar vertical overflow="collapse" aria-label={text.tools}>
       <Toolbar.Item
         icon="trash"
         intent="danger"
@@ -83,24 +90,28 @@ export function IrToolbar(props: IrToolbarProps) {
         disabled={domain === null}
       />
 
-      <Toolbar.Item
-        icon={mode === 'absorbance' ? 'arrow-up' : 'arrow-down'}
-        active={mode === 'absorbance'}
-        {...command('toggleMode')}
-        disabled={isEmpty}
-      />
+      {irCommandOffered(technique, 'toggleMode') ? (
+        <Toolbar.Item
+          icon={bandsPointDown(mode) ? 'arrow-down' : 'arrow-up'}
+          active={mode !== defaultIrMode(technique)}
+          {...command('toggleMode')}
+          disabled={isEmpty}
+        />
+      ) : null}
       <Toolbar.Item
         icon="locate"
         active={pickBands}
         {...command('togglePicking')}
         disabled={selectedSpectrum === null}
       />
-      <Toolbar.Item
-        icon="label"
-        active={showAssignments}
-        {...command('toggleAssignments')}
-        disabled={!pickBands || selectedSpectrum === null}
-      />
+      {irCommandOffered(technique, 'toggleAssignments') ? (
+        <Toolbar.Item
+          icon="label"
+          active={showAssignments}
+          {...command('toggleAssignments')}
+          disabled={!pickBands || selectedSpectrum === null}
+        />
+      ) : null}
 
       {/* What the chart looks like right now is what a figure is of — the
           window it was dragged to, the way up it is being read, the

package/src/ir/ui/IrTraces.tsx

@@ -26,7 +26,10 @@ export interface IrTracesProps {
    * 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. */
+  /**
+   * The wavenumber axis as it is currently zoomed, running right to left for
+   * infrared.
+   */
   xScale: ChartScale;
   /** The value axis as it is currently zoomed. */
   yScale: ChartScale;
@@ -85,6 +88,7 @@ export function IrTraces(props: IrTracesProps): ReactElement {
     for (const spectrum of spectra) {
       if (!spectrum.visible) continue;
       const trace = traceOf(spectrum, mode);
+      if (trace === undefined) continue;
       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 });

package/src/ir/ui/RamanEditor.tsx

@@ -0,0 +1,53 @@
+import type { Ref } from 'react';
+
+import type { IrEditorHandle } from '../core/irEditorApi.ts';
+import type { IrSidePanelId } from '../core/irSidePanels.ts';
+import type { IrSpectrum } from '../core/irSpectrum.ts';
+
+import { VibrationalEditor } from './VibrationalEditor.tsx';
+
+/** The handle a host drives a Raman viewer through: the infrared one's. */
+export type RamanEditorHandle = IrEditorHandle;
+
+export interface RamanEditorProps {
+  /**
+   * The spectra to open on, each carrying its `intensity`. Read when the viewer
+   * opens and never again: what is on the chart belongs to the viewer from then
+   * on. The `ref` handle is how spectra arrive afterwards.
+   * @default []
+   */
+  data?: IrSpectrum[];
+  /**
+   * Called whenever the spectra open change — one loaded, one closed, the chart
+   * cleared — with the spectra now open. Not called for a zoom, a selection, a
+   * rename or a colour.
+   * @default undefined
+   */
+  onChange?: (spectra: IrSpectrum[]) => void;
+  /**
+   * The side panels open to begin with.
+   * @default DEFAULT_SIDE_PANELS
+   */
+  defaultPanelIds?: IrSidePanelId[];
+  /**
+   * The handle a host drives the viewer through: take these spectra, frame this
+   * Raman shift, select that one.
+   * @default undefined
+   */
+  ref?: Ref<RamanEditorHandle>;
+}
+
+/**
+ * A Raman spectrum viewer: the infrared viewer's shell, panels, gestures and
+ * export, changed only where Raman is physically different.
+ *
+ * The spectra are read as intensity, their one value axis, so there is no mode
+ * to choose; the Raman shift runs from low at the left to high at the right;
+ * the bands are picked as maxima of intensity; and the infrared correlation
+ * table is not asked what a band might be.
+ * @param props - Component props.
+ * @returns The viewer.
+ */
+export function RamanEditor(props: RamanEditorProps) {
+  return <VibrationalEditor technique="raman" {...props} />;
+}

package/src/ir/ui/SpectraPanel.tsx

@@ -37,7 +37,7 @@ export function SpectraPanel() {
   const actions = useIrActions();
   const { spectra } = state.data;
   const { selectedId } = state.view;
-  const { mode } = state.settings;
+  const { mode, technique } = state.settings;
 
   const selected = spectra.find((spectrum) => spectrum.id === selectedId);
   const allDrawn = spectra.every((spectrum) => spectrum.visible);
@@ -96,6 +96,7 @@ export function SpectraPanel() {
             <SpectrumRow
               key={spectrum.id}
               spectrum={spectrum}
+              technique={technique}
               selected={spectrum.id === selectedId}
               onSelect={() => actions.selectSpectrum(spectrum.id)}
               onToggle={() =>

package/src/ir/ui/SpectrumRow.tsx

@@ -1,12 +1,20 @@
 import { Button } from 'react-science/ui';
 
 import { SpectrumColorSwatch } from '../../panel/ui/SpectrumColorSwatch.tsx';
-import { formatWavenumber } from '../core/irFormat.ts';
+import { formatWavenumberRange } from '../core/irFormat.ts';
 import type { IrSpectrum } from '../core/irSpectrum.ts';
+import type { IrTechnique } from '../core/irTechnique.ts';
+import { IR_TECHNIQUE_RULES } from '../core/irTechnique.ts';
 
 export interface SpectrumRowProps {
   /** The spectrum the row is about. */
   spectrum: IrSpectrum;
+  /**
+   * What it was measured with, which decides the order its range is written
+   * in: high to low for infrared, low to high for Raman.
+   * @default 'infrared'
+   */
+  technique?: IrTechnique;
   /** Whether the panels are about it. */
   selected: boolean;
   /** Point the panels at it. */
@@ -31,6 +39,7 @@ export interface SpectrumRowProps {
 export function SpectrumRow(props: SpectrumRowProps) {
   const {
     spectrum,
+    technique = 'infrared',
     selected,
     onSelect,
     onToggle,
@@ -40,10 +49,10 @@ export function SpectrumRow(props: SpectrumRowProps) {
     onRename,
   } = props;
 
-  const range =
-    spectrum.wavenumber.length === 0
-      ? ''
-      : `${formatWavenumber(spectrum.wavenumber.at(-1) as number)}–${formatWavenumber(spectrum.wavenumber[0] as number)} cm⁻¹`;
+  const range = formatWavenumberRange(
+    spectrum.wavenumber,
+    IR_TECHNIQUE_RULES[technique].reverseX,
+  );
 
   return (
     <div

package/src/ir/ui/VibrationalEditor.tsx

@@ -0,0 +1,94 @@
+import type { Ref } from 'react';
+import { RootLayout } from 'react-science/ui';
+
+import type { IrEditorHandle } from '../core/irEditorApi.ts';
+import type { IrSidePanelId } from '../core/irSidePanels.ts';
+import type { IrMode, IrSpectrum } from '../core/irSpectrum.ts';
+import type { IrTechnique } from '../core/irTechnique.ts';
+
+import { IrShell } from './IrShell.tsx';
+import { IrStateProvider } from './IrStateProvider.tsx';
+import { useIrEditor } from './useIrEditor.ts';
+
+export interface VibrationalEditorProps {
+  /**
+   * What the spectra were measured with. Read when the viewer opens and fixed
+   * from then on: it decides the value axes, the direction and name of the
+   * wavenumber axis, and whether the correlation table is asked about a band.
+   */
+  technique: IrTechnique;
+  /**
+   * The spectra to open on. Read when the viewer opens and never again.
+   * @default []
+   */
+  data?: IrSpectrum[];
+  /**
+   * Called whenever the spectra open change, with the spectra now open.
+   * @default undefined
+   */
+  onChange?: (spectra: IrSpectrum[]) => void;
+  /**
+   * Which value axis to open in; one the technique does not offer opens its
+   * first instead.
+   * @default the technique's first
+   */
+  mode?: IrMode;
+  /**
+   * The side panels open to begin with.
+   * @default DEFAULT_SIDE_PANELS
+   */
+  defaultPanelIds?: IrSidePanelId[];
+  /**
+   * The handle a host drives the viewer through.
+   * @default undefined
+   */
+  ref?: Ref<IrEditorHandle>;
+}
+
+/**
+ * The viewer `IrEditor` and `RamanEditor` both are: one shell, one set of
+ * panels and gestures, with what differs between the techniques read from
+ * `IR_TECHNIQUE_RULES` rather than written into either.
+ * @param props - Component props.
+ * @returns The viewer.
+ */
+export function VibrationalEditor(props: VibrationalEditorProps) {
+  const {
+    technique,
+    data = NO_SPECTRA,
+    onChange,
+    mode,
+    defaultPanelIds,
+    ref,
+  } = props;
+
+  const editor = useIrEditor({
+    spectra: data,
+    settings: { technique, ...(mode === undefined ? {} : { mode }) },
+    panelIds: defaultPanelIds,
+    onChange,
+  });
+
+  return (
+    <IrStateProvider editor={editor}>
+      {/* `react-science`'s own root: it holds the element the browser is asked
+          to show full screen, points Blueprint's portals at that element so
+          dialogs and tooltips are not left behind in `document.body`, and paints
+          the backdrop white. Above the shell rather than inside it, so the shell
+          can ask whether it is full screen and offer the way out. */}
+      <RootLayout style={rootLayoutStyle}>
+        <IrShell handle={ref} />
+      </RootLayout>
+    </IrStateProvider>
+  );
+}
+
+/**
+ * The viewer fills what it is given, and its own children scroll rather than
+ * push: `react-science` lays its root out as a column of full width and height,
+ * and a flex column with no `minHeight` grows past its parent instead.
+ */
+const rootLayoutStyle = { minHeight: 0 } as const;
+
+/** What a viewer opens on when it is handed nothing, kept stable for the memo. */
+const NO_SPECTRA: IrSpectrum[] = [];

package/src/ir/ui/bandsTsv.ts

@@ -0,0 +1,46 @@
+/**
+ * The band table as text, for pasting into a notebook.
+ */
+
+import type { AssignedBand } from '../core/assignBands.ts';
+import { bandValue } from '../core/irBand.ts';
+import { formatIrValue, formatWavenumber } from '../core/irFormat.ts';
+import type { IrMode } from '../core/irSpectrum.ts';
+
+/**
+ * The table as tab separated text.
+ *
+ * Every candidate is on its band's row, because the reason to copy a band table
+ * is to put it beside a structure and argue about it — and the argument is over
+ * the candidates rather than over the wavenumbers. A technique the correlation
+ * table does not cover has no such column.
+ * @param rows - The bands, as they are shown.
+ * @param mode - Which value axis is being read.
+ * @param assignments - Whether the table has a column for the candidates.
+ * @returns The table, one line per band, with a heading.
+ */
+export function bandsToTsv(
+  rows: readonly AssignedBand[],
+  mode: IrMode,
+  assignments: boolean,
+): string {
+  const heading = ['wavenumber', 'strength', mode];
+  if (assignments) heading.push('could be');
+  const lines = [heading.join('\t')];
+  for (const { band, candidates } of rows) {
+    const cells = [
+      formatWavenumber(band.wavenumber),
+      band.strength,
+      formatIrValue(bandValue(band, mode) ?? Number.NaN, mode),
+    ];
+    if (assignments) {
+      cells.push(
+        candidates
+          .map((candidate) => `${candidate.group} ${candidate.vibration}`)
+          .join('; '),
+      );
+    }
+    lines.push(cells.join('\t'));
+  }
+  return lines.join('\n');
+}

package/src/ir/ui/irChartProps.ts

@@ -7,8 +7,9 @@
  * of half a dozen layers nobody needs to read in order to mount one.
  *
  * Everything arrives as a prop and nothing is reached for: the chart reads no
- * context and no store, so the same component serves an editor, a report page
- * that only ever draws one spectrum, and a test.
+ * store and no context but the language the page is written in, so the same
+ * component serves an editor, a report page that only ever draws one spectrum,
+ * and a test.
  */
 
 import type { ReactNode } from 'react';
@@ -17,17 +18,26 @@ import type { ZoomDragMode } from '../../chart/core/chartDomain.ts';
 import type { AssignedBand } from '../core/assignBands.ts';
 import type { IrBand } from '../core/irBand.ts';
 import type { IrDomain, IrMode, IrSpectrum } from '../core/irSpectrum.ts';
+import type { IrTechnique } from '../core/irTechnique.ts';
 
 export interface IrChartProps {
   /** The spectra to draw, each saying in itself whether it is drawn. */
   spectra: readonly IrSpectrum[];
   /**
-   * Which value axis to draw them in.
+   * What the spectra were measured with, which names the wavenumber axis and
+   * decides which way it runs: high to low for infrared, low to high for Raman.
+   * @default 'infrared'
+   */
+  technique?: IrTechnique;
+  /**
+   * Which value axis to draw them in. One the technique does not offer draws
+   * its first instead.
    *
    * A prop rather than state, so the switch lives with whoever owns the toolbar
    * that flips it — and so two charts of the same spectra can be shown side by
    * side, one in each, which is the clearest way to see what the pair means.
-   * @default 'transmittance'
+   * @default the technique's first: `'transmittance'` for infrared,
+   * `'intensity'` for Raman
    */
   mode?: IrMode;
   /**

package/src/ir/ui/irCommandContext.tsx

@@ -12,14 +12,18 @@ import type {
   IrCommandId,
   RunIrCommand,
 } from '../core/irCommands.ts';
-import { irCommandLabel } from '../core/irCommands.ts';
+import { irCommandEntryLabel, irCommands } from '../core/irCommands.ts';
+import type { IrTechnique } from '../core/irTechnique.ts';
 
 import { IrCommandTooltip } from './IrCommandTooltip.tsx';
+import { useIrText } from './useIrText.ts';
 
 /** What the provider holds. */
 export interface IrCommandContextValue {
   /** What each command does. */
   handlers: IrCommandHandlers;
+  /** What the spectra were measured with, which words the commands. */
+  technique: IrTechnique;
   /** Run one. */
   run: RunIrCommand;
 }
@@ -36,6 +40,14 @@ export function useIrCommand(): RunIrCommand {
   return value?.run ?? noRun;
 }
 
+/**
+ * What the spectra were measured with, from anywhere inside the viewer.
+ * @returns The technique; infrared outside a provider.
+ */
+export function useIrCommandTechnique(): IrTechnique {
+  return useContext(commandContext)?.technique ?? 'infrared';
+}
+
 /**
  * Everything a toolbar item needs to be one command, in one spread.
  *
@@ -46,10 +58,13 @@ export function useIrCommand(): RunIrCommand {
  */
 export function useIrCommandProps() {
   const run = useIrCommand();
+  const technique = useIrCommandTechnique();
+  const text = useIrText(technique);
   return function command(id: IrCommandId) {
+    const entry = text.command(id) ?? irCommands[id];
     return {
-      tooltip: <IrCommandTooltip id={id} />,
-      'aria-label': irCommandLabel(id),
+      tooltip: <IrCommandTooltip id={id} technique={technique} />,
+      'aria-label': irCommandEntryLabel(entry),
       onClick: () => run(id),
     };
   };

package/src/ir/ui/useIrEditor.ts

@@ -17,10 +17,13 @@ import { useEffect, useMemo, useReducer, useRef } from 'react';
 
 import type { AssignedBand } from '../core/assignBands.ts';
 import { assignBands } from '../core/assignBands.ts';
-import type { CreateIrStateOptions } from '../core/irReducer.ts';
-import { createIrState, irReducer } from '../core/irReducer.ts';
+import type { BandAssignment } from '../core/bandAssignments.ts';
+import { BAND_ASSIGNMENTS } from '../core/bandAssignments.ts';
+import { irReducer } from '../core/irReducer.ts';
 import type { IrSpectrum } from '../core/irSpectrum.ts';
-import type { IrState } from '../core/irState.ts';
+import type { CreateIrStateOptions, IrState } from '../core/irState.ts';
+import { createIrState } from '../core/irState.ts';
+import { IR_TECHNIQUE_RULES } from '../core/irTechnique.ts';
 import { pickBands } from '../core/pickBands.ts';
 
 import type { IrEditorActions } from './irActions.ts';
@@ -46,7 +49,8 @@ export interface IrEditorApi {
   selectedSpectrum: IrSpectrum | null;
   /**
    * The bands of the selected spectrum, with everything each might be. Empty
-   * while nothing is selected or while picking is switched off.
+   * while nothing is selected or while picking is switched off, and every band
+   * without a candidate for a technique the correlation table does not cover.
    */
   assigned: AssignedBand[];
   /** Everything to do. */
@@ -67,7 +71,7 @@ export function useIrEditor(options: UseIrEditorOptions = {}): IrEditorApi {
   const { spectra } = state.data;
   const { selectedId } = state.view;
   const { pickBands: picking, picking: pickingOptions } = state.settings;
-  const { assignmentTolerance } = state.settings;
+  const { assignmentTolerance, technique } = state.settings;
 
   const visibleSpectra = useMemo(() => {
     const visible: IrSpectrum[] = [];
@@ -95,10 +99,15 @@ export function useIrEditor(options: UseIrEditorOptions = {}): IrEditorApi {
 
   // Assigning is a walk of thirty ranges per band, which is nothing beside the
   // picking — so it is a memo of its own, and moving the tolerance does not
-  // re-pick.
+  // re-pick. A technique the table does not cover is matched against no table.
+  const { assignments } = IR_TECHNIQUE_RULES[technique];
   const assigned = useMemo(
-    () => assignBands(bands, { tolerance: assignmentTolerance }),
-    [bands, assignmentTolerance],
+    () =>
+      assignBands(bands, {
+        tolerance: assignmentTolerance,
+        assignments: assignments ? BAND_ASSIGNMENTS : NO_ASSIGNMENTS,
+      }),
+    [bands, assignmentTolerance, assignments],
   );
 
   // What was reported last, so a host passing a fresh callback on every render
@@ -118,6 +127,9 @@ export function useIrEditor(options: UseIrEditorOptions = {}): IrEditorApi {
   );
 }
 
+/** The table a technique the correlation table does not cover is matched against. */
+const NO_ASSIGNMENTS: readonly BandAssignment[] = [];
+
 /**
  * Whether two lists hold the same spectra, by identity and in order.
  * @param current - What was reported last.

package/src/ir/ui/useIrHandle.ts

@@ -0,0 +1,51 @@
+/**
+ * The handle a host drives the viewer through, filled in from its state.
+ *
+ * A hook of its own beside the shell, because every gesture on the handle reads
+ * the state the shell already reads — and the shell is long enough without it.
+ */
+
+import type { Ref } from 'react';
+import { useImperativeHandle } from 'react';
+
+import { fullDomain } from '../core/irDomain.ts';
+import type { IrEditorHandle, ZoomToBandOptions } from '../core/irEditorApi.ts';
+import type { IrDomain } from '../core/irSpectrum.ts';
+
+import { useIrActions, useIrEditorState } from './irStateContext.ts';
+
+/**
+ * Fill in a host's handle on the viewer this is called inside.
+ * @param handle - The handle to fill in, if the host asked for one.
+ */
+export function useIrHandle(handle: Ref<IrEditorHandle> | undefined): void {
+  const { state, visibleSpectra } = useIrEditorState();
+  const actions = useIrActions();
+  const { domain } = state.view;
+  const { mode } = state.settings;
+
+  useImperativeHandle(
+    handle,
+    (): IrEditorHandle => ({
+      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: ZoomToBandOptions = {}) => {
+        const { width = DEFAULT_FRAME_WIDTH } = options;
+        const shown: IrDomain = 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],
+  );
+}
+
+/** How wide a window a host gets when it asks to frame a band without saying. */
+const DEFAULT_FRAME_WIDTH = 200;