react-cheminfo 0.64.1 → 0.66.0

package/src/ir/ui/BandsPanel.tsx

@@ -1,22 +1,21 @@
-import { Icon } from '@blueprintjs/core';
 import { useMemo } from 'react';
 import { Button, Toolbar } from 'react-science/ui';
 
 import {
   panelBodyStyle,
-  panelCellStyle,
   panelEmptyStyle,
   panelHeaderCellStyle,
-  panelNumberCellStyle,
   panelStyle,
   panelTableStyle,
   panelToolbarStyle,
 } from '../../panel/core/panelStyles.ts';
-import type { AssignedBand } from '../core/assignBands.ts';
 import type { IrBand } from '../core/irBand.ts';
 import { sameIrBand } from '../core/irBand.ts';
-import { formatIrValue, formatWavenumber } from '../core/irFormat.ts';
+import { shortModeLabel } from '../core/irFormat.ts';
+import { IR_TECHNIQUE_RULES } from '../core/irTechnique.ts';
 
+import { BandRow } from './BandRow.tsx';
+import { bandsToTsv } from './bandsTsv.ts';
 import { useIrActions, useIrEditorState } from './irStateContext.ts';
 
 export interface BandsPanelProps {
@@ -45,6 +44,10 @@ export interface BandsPanelProps {
  * Hovering a row marks the band on the chart and hovering the chart lights the
  * row, which is the whole reason the highlight is threaded through the shell
  * rather than held here: the two views are of one thing.
+ *
+ * For a technique the correlation table does not cover — Raman — the column of
+ * candidates and the button naming them are left out, and the table is the
+ * bands themselves.
  * @param props - Component props.
  * @returns The panel.
  */
@@ -52,11 +55,16 @@ export function BandsPanel(props: BandsPanelProps) {
   const { highlight = null, onHighlight } = props;
   const { state, selectedSpectrum, assigned } = useIrEditorState();
   const actions = useIrActions();
-  const { mode, pickBands, showAssignments, picking } = state.settings;
+  const { mode, pickBands, showAssignments, picking, technique } =
+    state.settings;
+  const { assignments } = IR_TECHNIQUE_RULES[technique];
 
   const rows = useMemo(() => assigned, [assigned]);
 
-  const tsv = useMemo(() => bandsToTsv(rows, mode), [rows, mode]);
+  const tsv = useMemo(
+    () => bandsToTsv(rows, mode, assignments),
+    [rows, mode, assignments],
+  );
 
   return (
     <div style={panelStyle}>
@@ -69,16 +77,18 @@ export function BandsPanel(props: BandsPanelProps) {
             aria-label="Pick the bands"
             onClick={() => actions.setSettings({ pickBands: !pickBands })}
           />
-          <Toolbar.Item
-            icon="label"
-            active={showAssignments}
-            tooltip="Name the assignments on the chart"
-            aria-label="Name the assignments on the chart"
-            disabled={!pickBands}
-            onClick={() =>
-              actions.setSettings({ showAssignments: !showAssignments })
-            }
-          />
+          {assignments ? (
+            <Toolbar.Item
+              icon="label"
+              active={showAssignments}
+              tooltip="Name the assignments on the chart"
+              aria-label="Name the assignments on the chart"
+              disabled={!pickBands}
+              onClick={() =>
+                actions.setSettings({ showAssignments: !showAssignments })
+              }
+            />
+          ) : null}
         </Toolbar>
 
         {/* The threshold is the one picking setting worth reaching for while
@@ -134,9 +144,11 @@ export function BandsPanel(props: BandsPanelProps) {
                 <th style={panelHeaderCellStyle}>cm⁻¹</th>
                 <th style={panelHeaderCellStyle} />
                 <th style={{ ...panelHeaderCellStyle, textAlign: 'right' }}>
-                  {mode === 'absorbance' ? 'A' : '%T'}
+                  {shortModeLabel(mode)}
                 </th>
-                <th style={panelHeaderCellStyle}>could be</th>
+                {assignments ? (
+                  <th style={panelHeaderCellStyle}>could be</th>
+                ) : null}
               </tr>
             </thead>
             <tbody>
@@ -145,6 +157,7 @@ export function BandsPanel(props: BandsPanelProps) {
                   key={`${entry.band.spectrumId} ${entry.band.wavenumber}`}
                   entry={entry}
                   mode={mode}
+                  assignments={assignments}
                   lit={sameIrBand(entry.band, highlight)}
                   onHighlight={onHighlight}
                 />
@@ -157,112 +170,6 @@ export function BandsPanel(props: BandsPanelProps) {
   );
 }
 
-interface BandRowProps {
-  /** The band and everything it might be. */
-  entry: AssignedBand;
-  /** Which value axis is being read. */
-  mode: 'absorbance' | 'transmittance';
-  /** Whether the pointer is on this band, here or on the chart. */
-  lit: boolean;
-  /** Told when the pointer arrives on this row, and when it leaves. */
-  onHighlight?: (band: IrBand | null) => void;
-}
-
-/**
- * One band: where it is, how strong, and every vibration it could be.
- *
- * The candidates are written as one line rather than a list, so a strong band
- * with four of them stays one row of the table and the wavenumbers keep reading
- * down the column. The `title` carries them again with each one's note, which is
- * where the reason to prefer one lives.
- * @param props - Component props.
- * @returns The row.
- */
-function BandRow(props: BandRowProps) {
-  const { entry, mode, lit, onHighlight } = props;
-  const { band, candidates } = entry;
-
-  const value = mode === 'absorbance' ? band.absorbance : band.transmittance;
-  const detail = candidates
-    .map((candidate) =>
-      candidate.note === undefined
-        ? `${candidate.group} ${candidate.vibration}`
-        : `${candidate.group} ${candidate.vibration} — ${candidate.note}`,
-    )
-    .join('\n');
-
-  return (
-    <tr
-      style={lit ? litRowStyle : undefined}
-      onPointerEnter={() => onHighlight?.(band)}
-      onPointerLeave={() => onHighlight?.(null)}
-    >
-      <td style={panelNumberCellStyle}>{formatWavenumber(band.wavenumber)}</td>
-      <td style={panelCellStyle} title={STRENGTH_TITLES[band.strength]}>
-        {band.strength}
-      </td>
-      <td style={panelNumberCellStyle}>{formatIrValue(value, mode)}</td>
-      <td style={panelCellStyle} title={detail}>
-        {candidates.length === 0 ? (
-          <span style={{ opacity: 0.5 }}>—</span>
-        ) : (
-          <span style={{ whiteSpace: 'normal' }}>
-            {candidates[0]?.group} {candidates[0]?.vibration}
-            {candidates.length > 1 ? (
-              <span style={{ opacity: 0.6 }}>
-                {' '}
-                <Icon icon="more" size={10} /> {candidates.length - 1} more
-              </span>
-            ) : null}
-          </span>
-        )}
-      </td>
-    </tr>
-  );
-}
-
-/** What each strength letter means, for the column that shows only the letter. */
-const STRENGTH_TITLES = {
-  w: 'weak, relative to this spectrum',
-  m: 'medium, relative to this spectrum',
-  S: 'strong, relative to this spectrum',
-} as const;
-
-/**
- * The table as text, for pasting into a notebook.
- *
- * Tab separated with every candidate on the 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.
- * @param rows - The bands, as they are shown.
- * @param mode - Which value axis is being read.
- * @returns The table, one line per band, with a heading.
- */
-function bandsToTsv(
-  rows: readonly AssignedBand[],
-  mode: 'absorbance' | 'transmittance',
-): string {
-  const heading = ['wavenumber', 'strength', mode, 'could be'].join('\t');
-  const lines = rows.map((entry) =>
-    [
-      formatWavenumber(entry.band.wavenumber),
-      entry.band.strength,
-      formatIrValue(
-        mode === 'absorbance'
-          ? entry.band.absorbance
-          : entry.band.transmittance,
-        mode,
-      ),
-      entry.candidates
-        .map((candidate) => `${candidate.group} ${candidate.vibration}`)
-        .join('; '),
-    ].join('\t'),
-  );
-  return [heading, ...lines].join('\n');
-}
-
-const litRowStyle = { background: '#fff3e0' } as const;
-
 const thresholdStyle = {
   display: 'inline-flex',
   alignItems: 'center',

package/src/ir/ui/IrAboutDialog.tsx

@@ -1,12 +1,24 @@
 import { Dialog, DialogBody } from '@blueprintjs/core';
 
+import { Prose } from '../../i18n/ui/Prose.tsx';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import { irCommands } from '../core/irCommands.ts';
+import type { IrTechnique } from '../core/irTechnique.ts';
+
 import { IrLogo } from './IrLogo.tsx';
+import { useIrText } from './useIrText.ts';
 
 export interface IrAboutDialogProps {
   /** Whether the dialog is open. */
   isOpen: boolean;
   /** Close it. */
   onClose: () => void;
+  /**
+   * What the spectra were measured with, which decides what the viewer says it
+   * does and whom it credits for it.
+   * @default 'infrared'
+   */
+  technique?: IrTechnique;
 }
 
 /**
@@ -20,42 +32,63 @@ export interface IrAboutDialogProps {
  * @returns The dialog.
  */
 export function IrAboutDialog(props: IrAboutDialogProps) {
-  const { isOpen, onClose } = props;
+  const { isOpen, onClose, technique = 'infrared' } = props;
+  const t = useChromeT();
+  const title = (useIrText(technique).command('about') ?? irCommands.about)
+    .title;
+  const raman = technique === 'raman';
 
   return (
     <Dialog
       isOpen={isOpen}
       onClose={onClose}
-      title="About the infrared viewer"
-      icon={<IrLogo size={20} />}
+      title={title}
+      icon={<IrLogo size={20} technique={technique} />}
       style={dialogStyle}
     >
       <DialogBody>
         <div style={brandStyle}>
-          <IrLogo size={64} />
+          <IrLogo size={64} technique={technique} />
           <div>
-            <p style={leadStyle}>react-cheminfo/ir</p>
-            <p style={paragraphStyle}>
-              Draws an infrared spectrum the way infrared is printed, reads it
-              as absorbance or as percent transmittance, picks its bands and
-              offers every functional group each band could be.
-            </p>
+            <p style={leadStyle}>{DOORS[technique]}</p>
+            {raman ? (
+              <p style={paragraphStyle}>{t('ir.raman.aboutLead')}</p>
+            ) : (
+              <p style={paragraphStyle}>
+                Draws an infrared spectrum the way infrared is printed, reads it
+                as absorbance or as percent transmittance, picks its bands and
+                offers every functional group each band could be.
+              </p>
+            )}
           </div>
         </div>
 
         <h4 style={headingStyle}>Credits</h4>
         <ul style={listStyle}>
-          <li>
-            <strong>ir-spectrum</strong> (cheminfo, MIT) reads the JCAMP-DX and
-            SPC files, derives the absorbance/transmittance pair, and picks the
-            bands. This package deliberately does none of that arithmetic
-            itself.
-          </li>
-          <li>
-            <strong>common-spectrum</strong>, <strong>jcampconverter</strong>{' '}
-            and <strong>spc-parser</strong> (cheminfo, MIT) are what it reads
-            through.
-          </li>
+          {raman ? (
+            <>
+              <li>
+                <Prose text={t('ir.raman.credit.picking')} />
+              </li>
+              <li>
+                <Prose text={t('ir.raman.credit.jcamp')} />
+              </li>
+            </>
+          ) : (
+            <>
+              <li>
+                <strong>ir-spectrum</strong> (cheminfo, MIT) reads the JCAMP-DX
+                and SPC files, derives the absorbance/transmittance pair, and
+                picks the bands. This package deliberately does none of that
+                arithmetic itself.
+              </li>
+              <li>
+                <strong>common-spectrum</strong>,{' '}
+                <strong>jcampconverter</strong> and <strong>spc-parser</strong>{' '}
+                (cheminfo, MIT) are what it reads through.
+              </li>
+            </>
+          )}
           <li>
             <strong>ml-spectra-processing</strong> (mljs, MIT) for the array
             work.
@@ -69,13 +102,15 @@ export function IrAboutDialog(props: IrAboutDialogProps) {
             <strong>react-science</strong> and <strong>BlueprintJS</strong>
             (zakodium, Palantir) for the shell this viewer is shaped like.
           </li>
-          <li>
-            The <strong>correlation table</strong> is the conventional teaching
-            set of group frequencies, as any introductory spectroscopy text
-            tabulates them. The ranges are deliberately the rounded, generous
-            ones: narrowing them to look precise would rule out assignments that
-            are genuinely possible.
-          </li>
+          {raman ? null : (
+            <li>
+              The <strong>correlation table</strong> is the conventional
+              teaching set of group frequencies, as any introductory
+              spectroscopy text tabulates them. The ranges are deliberately the
+              rounded, generous ones: narrowing them to look precise would rule
+              out assignments that are genuinely possible.
+            </li>
+          )}
           <li>
             The <strong>colours</strong> are Okabe and Ito&apos;s
             colour-universal palette, so two traces stay distinguishable for a
@@ -87,6 +122,12 @@ export function IrAboutDialog(props: IrAboutDialogProps) {
   );
 }
 
+/** The entry point each technique's viewer is imported from. */
+const DOORS: Record<IrTechnique, string> = {
+  infrared: 'react-cheminfo/ir',
+  raman: 'react-cheminfo/raman',
+};
+
 const dialogStyle = { width: 'min(680px, 92vw)' } as const;
 
 const brandStyle = {

package/src/ir/ui/IrCanvas.tsx

@@ -54,7 +54,7 @@ export function IrCanvas(props: IrCanvasProps) {
   const { state, visibleSpectra, assigned } = useIrEditorState();
   const actions = useIrActions();
   const { domain, tool, selectedId } = state.view;
-  const { mode, showAssignments, labelLimit } = state.settings;
+  const { technique, mode, showAssignments, labelLimit } = state.settings;
 
   const onDomainChange = useCallback(
     (next: IrDomain) => {
@@ -68,6 +68,7 @@ export function IrCanvas(props: IrCanvasProps) {
       <div ref={attachChart} id={chartId} style={chartStyle}>
         <IrChart
           spectra={visibleSpectra}
+          technique={technique}
           mode={mode}
           assigned={assigned}
           showAssignments={showAssignments}

package/src/ir/ui/IrChart.tsx

@@ -9,14 +9,14 @@ import { chartSurfaceStyle } from '../../chart/ui/chartSurface.ts';
 import { useChartSize } from '../../chart/ui/useChartSize.ts';
 import type { AssignedBand } from '../core/assignBands.ts';
 import type { IrBand } from '../core/irBand.ts';
-import { boxZoomOnly, yAxisTitle } from '../core/irMode.ts';
-import type { IrMode } from '../core/irSpectrum.ts';
+import { irModeFor } from '../core/irTechnique.ts';
 
 import { BandMarks } from './BandMarks.tsx';
 import { IrPointerTracker } from './IrPointerTracker.tsx';
 import { IrTraces } from './IrTraces.tsx';
 import type { IrChartProps } from './irChartProps.ts';
 import { useIrPointer } from './useIrPointer.ts';
+import { useIrText } from './useIrText.ts';
 import { useIrZoom } from './useIrZoom.ts';
 
 /**
@@ -28,7 +28,8 @@ import { useIrZoom } from './useIrZoom.ts';
  * building the scale onto a reversed pixel range and nothing else: the data stays
  * in ascending wavenumbers, every window stays low end first, and no other piece
  * of arithmetic in either package has to know. That is the whole reason
- * `createScale` takes its range rather than deriving it.
+ * `createScale` takes its range rather than deriving it. A Raman spectrum is
+ * drawn the other way, low shifts at the left, by the same means.
  *
  * The axes go under the data, so a grid line is never read as a band. Only the
  * data band is clipped, so a zoomed trace stops at the plot edge while the
@@ -46,7 +47,8 @@ import { useIrZoom } from './useIrZoom.ts';
 export function IrChart(props: IrChartProps): ReactElement {
   const {
     spectra,
-    mode = 'transmittance',
+    technique = 'infrared',
+    mode: asked,
     assigned = NO_BANDS,
     showAssignments = false,
     labelLimit,
@@ -61,6 +63,8 @@ export function IrChart(props: IrChartProps): ReactElement {
     children,
   } = props;
 
+  const mode = irModeFor(technique, asked);
+  const text = useIrText(technique);
   const [containerRef, measured] = useChartSize<HTMLDivElement>();
   const svgRef = useRef<SVGSVGElement | null>(null);
 
@@ -79,7 +83,15 @@ export function IrChart(props: IrChartProps): ReactElement {
 
   // The host's window goes *into* the zoom rather than over it, so a drag is
   // always measured against what is on screen.
-  const zoom = useIrZoom({ spectra, mode, svgRef, plot, domain, drag });
+  const zoom = useIrZoom({
+    spectra,
+    technique,
+    mode,
+    svgRef,
+    plot,
+    domain,
+    drag,
+  });
 
   // The scales the zoom measured its gestures against — the x one running right
   // to left. Taken from the hook rather than built here, because two scales over
@@ -128,7 +140,7 @@ export function IrChart(props: IrChartProps): ReactElement {
       <svg
         ref={svgRef}
         role="img"
-        aria-label={chartLabel(mode)}
+        aria-label={text.chart(mode)}
         width={frameWidth}
         height={frameHeight}
         viewBox={`0 0 ${frameWidth} ${frameHeight}`}
@@ -154,8 +166,8 @@ export function IrChart(props: IrChartProps): ReactElement {
           yDomain={shown.y}
           xScale={xScale}
           yScale={yScale}
-          xTitle="wavenumber (cm⁻¹)"
-          yTitle={yAxisTitle(mode)}
+          xTitle={text.xTitle}
+          yTitle={text.yTitle(mode)}
         />
 
         <g clipPath={`url(#${clipId})`}>
@@ -192,22 +204,6 @@ export function IrChart(props: IrChartProps): ReactElement {
   );
 }
 
-/**
- * What the chart is, and what can be done to it, for whoever cannot see it.
- *
- * The gestures differ by mode, so the sentence does too — a label promising the
- * wheel to a reader who cannot watch it fail to do anything is worse than no
- * label at all.
- * @param mode - Which value axis is being drawn.
- * @returns The label.
- */
-function chartLabel(mode: IrMode): string {
-  const axis = `Infrared spectrum read as ${yAxisTitle(mode)}, wavenumber running from high at the left to low at the right.`;
-  return boxZoomOnly(mode)
-    ? `${axis} Drag a rectangle over it to zoom to that rectangle, and double click to fit everything again.`
-    : `${axis} Drag across it to zoom the wavenumber axis, drag past the baseline to take the value axis with it, turn the wheel to scale the value axis, and double click to fit everything again.`;
-}
-
 /** What a chart nobody has picked any bands for marks. */
 const NO_BANDS: readonly AssignedBand[] = Object.freeze([]);
 

package/src/ir/ui/IrCommandProvider.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 
 import type { IrCommandHandlers } from '../core/irCommands.ts';
+import type { IrTechnique } from '../core/irTechnique.ts';
 
 import type { IrCommandContextValue } from './irCommandContext.tsx';
 import { commandContext } from './irCommandContext.tsx';
@@ -9,6 +10,12 @@ import { commandContext } from './irCommandContext.tsx';
 export interface IrCommandProviderProps {
   /** What each command does. */
   handlers: IrCommandHandlers;
+  /**
+   * What the spectra were measured with, which decides how each command is
+   * worded in its tooltip and its label.
+   * @default 'infrared'
+   */
+  technique?: IrTechnique;
   /** The viewer. */
   children: ReactNode;
 }
@@ -19,11 +26,11 @@ export interface IrCommandProviderProps {
  * @returns The provider.
  */
 export function IrCommandProvider(props: IrCommandProviderProps) {
-  const { handlers, children } = props;
+  const { handlers, technique = 'infrared', children } = props;
 
   const value = useMemo<IrCommandContextValue>(
-    () => ({ handlers, run: (id) => handlers[id]?.() }),
-    [handlers],
+    () => ({ handlers, technique, run: (id) => handlers[id]?.() }),
+    [handlers, technique],
   );
 
   return (

package/src/ir/ui/IrCommandTooltip.tsx

@@ -2,10 +2,19 @@ import { TooltipHelpContent } from 'react-science/ui';
 
 import type { IrCommand, IrCommandId } from '../core/irCommands.ts';
 import { irCommands } from '../core/irCommands.ts';
+import type { IrTechnique } from '../core/irTechnique.ts';
+
+import { useIrText } from './useIrText.ts';
 
 export interface IrCommandTooltipProps {
   /** Which command the tooltip is about. */
   id: IrCommandId;
+  /**
+   * What the spectra were measured with, which decides how the command is
+   * worded.
+   * @default 'infrared'
+   */
+  technique?: IrTechnique;
 }
 
 /**
@@ -18,8 +27,8 @@ export interface IrCommandTooltipProps {
  * @returns The tooltip's content.
  */
 export function IrCommandTooltip(props: IrCommandTooltipProps) {
-  const { id } = props;
-  const entry = irCommands[id] as IrCommand;
+  const { id, technique = 'infrared' } = props;
+  const entry: IrCommand = useIrText(technique).command(id) ?? irCommands[id];
   const shortcuts = entry.shortcut?.label ?? entry.shortcut?.keys;
 
   return (