react-cheminfo 0.70.0 → 0.71.0

package/src/ir/core/pickBands.ts

@@ -21,6 +21,13 @@ import type { IrSpectrum } from './irSpectrum.ts';
 import type { PeakPickingOptions } from './ramanBands.ts';
 import { ramanBands } from './ramanBands.ts';
 
+/**
+ * How many points the picker smooths over before it looks for a band. `ml-gsd`
+ * refuses a trace shorter than that — a few points typed in by hand — rather
+ * than finding no band in it.
+ */
+const SMOOTHING_WINDOW = 9;
+
 /** How the bands are picked. */
 export interface PickBandsOptions {
   /**
@@ -88,7 +95,7 @@ export function pickBands(
     minPeakWidth = 4,
     limit,
   } = options;
-  if (spectrum.wavenumber.length < 2) return [];
+  if (spectrum.wavenumber.length < SMOOTHING_WINDOW) return [];
 
   const picking: PeakPickingOptions = {
     minMaxRatio: minRelativeHeight,
@@ -109,43 +116,6 @@ export function pickBands(
   return kept.toSorted(byAscendingWavenumber);
 }
 
-/**
- * The bands of an infrared spectrum, picked on its absorbance.
- * @param spectrum - The spectrum to pick from.
- * @param picking - Where to pick, and how finely.
- * @returns The bands, in the order they were found; none when the spectrum
- * carries only one of its two axes, since the strength is read off the other.
- */
-function infraredBands(
-  spectrum: IrSpectrum,
-  picking: PeakPickingOptions,
-): IrBand[] {
-  const { id, wavenumber, absorbance, transmittance } = spectrum;
-  if (absorbance === undefined || transmittance === undefined) return [];
-
-  const picked = autoPeakPicking(
-    measurementOf(wavenumber, absorbance, transmittance),
-    // Absorbance, because a band is a maximum there and a minimum in the other.
-    { yVariable: 'a', ...picking },
-  );
-
-  const bands: IrBand[] = [];
-  for (const peak of picked) {
-    if (!Number.isFinite(peak.wavenumber)) continue;
-    bands.push({
-      spectrumId: id,
-      wavenumber: peak.wavenumber,
-      absorbance: peak.absorbance,
-      // `ConvertedPeak.transmittance` is a fraction where the spectrum's own
-      // transmittance is a percentage; brought onto the one scale here so that
-      // nothing downstream has to remember which of the two it is holding.
-      transmittance: peak.transmittance * 100,
-      strength: peak.kind as IrBandStrength,
-    });
-  }
-  return bands;
-}
-
 /**
  * The spectrum as `ir-spectrum` wants it.
  *
@@ -158,7 +128,7 @@ function infraredBands(
  * @param transmittance - Percent transmittance at each.
  * @returns A measurement carrying all three variables.
  */
-function measurementOf(
+export function infraredMeasurement(
   wavenumber: Float64Array,
   absorbance: Float64Array,
   transmittance: Float64Array,
@@ -195,6 +165,43 @@ function measurementOf(
   };
 }
 
+/**
+ * The bands of an infrared spectrum, picked on its absorbance.
+ * @param spectrum - The spectrum to pick from.
+ * @param picking - Where to pick, and how finely.
+ * @returns The bands, in the order they were found; none when the spectrum
+ * carries only one of its two axes, since the strength is read off the other.
+ */
+function infraredBands(
+  spectrum: IrSpectrum,
+  picking: PeakPickingOptions,
+): IrBand[] {
+  const { id, wavenumber, absorbance, transmittance } = spectrum;
+  if (absorbance === undefined || transmittance === undefined) return [];
+
+  const picked = autoPeakPicking(
+    infraredMeasurement(wavenumber, absorbance, transmittance),
+    // Absorbance, because a band is a maximum there and a minimum in the other.
+    { yVariable: 'a', ...picking },
+  );
+
+  const bands: IrBand[] = [];
+  for (const peak of picked) {
+    if (!Number.isFinite(peak.wavenumber)) continue;
+    bands.push({
+      spectrumId: id,
+      wavenumber: peak.wavenumber,
+      absorbance: peak.absorbance,
+      // `ConvertedPeak.transmittance` is a fraction where the spectrum's own
+      // transmittance is a percentage; brought onto the one scale here so that
+      // nothing downstream has to remember which of the two it is holding.
+      transmittance: peak.transmittance * 100,
+      strength: peak.kind as IrBandStrength,
+    });
+  }
+  return bands;
+}
+
 /**
  * Order two bands by height, tallest first.
  * @param first - One band.

package/src/ir/core/ramanBands.ts

@@ -56,7 +56,7 @@ export function ramanBands(
       spectrumId: id,
       wavenumber: peak.wavenumber,
       intensity: value,
-      strength: strengthOf(value, min, max),
+      strength: intensityStrength(value, min, max),
     });
   }
   return bands;
@@ -69,7 +69,7 @@ export function ramanBands(
  * @param highest - Its highest.
  * @returns The letter a correlation table would use.
  */
-function strengthOf(
+export function intensityStrength(
   value: number,
   lowest: number,
   highest: number,

package/src/ir/core/spectrumBands.ts

@@ -0,0 +1,113 @@
+/**
+ * The bands a spectrum carries.
+ *
+ * A spectrum arriving without bands is picked once, with the picking settings
+ * in force, and from then on its bands are part of it: they travel to a host
+ * with it, and a host's own reach the chart. Bands found automatically follow
+ * the settings — moving the threshold picks them again — while bands picked by
+ * hand, or handed over, are left as they are.
+ */
+
+import type { IrBand } from './irBand.ts';
+import type { IrSpectrum } from './irSpectrum.ts';
+import type { PickBandsOptions } from './pickBands.ts';
+import { pickBands } from './pickBands.ts';
+
+/**
+ * A spectrum carrying its bands: picked now when it has none, its own kept and
+ * put in order otherwise.
+ * @param spectrum - The spectrum, as it arrived.
+ * @param picking - How to pick it, if it has to be.
+ * @returns The spectrum with its bands; the same object when it had them, in
+ * order.
+ */
+export function withBands(
+  spectrum: IrSpectrum,
+  picking: PickBandsOptions,
+): IrSpectrum {
+  const { id, bands } = spectrum;
+  if (bands === undefined) {
+    return {
+      ...spectrum,
+      bands: pickBands(spectrum, picking),
+      bandsByHand: false,
+    };
+  }
+  const ordered = orderedBands(id, bands);
+  return ordered === bands ? spectrum : { ...spectrum, bands: ordered };
+}
+
+/**
+ * A spectrum's bands picked again with other settings, unless they were picked
+ * by hand.
+ * @param spectrum - The spectrum.
+ * @param picking - The settings now in force.
+ * @returns The spectrum re-picked, or the same object when its bands are its
+ * own.
+ */
+export function repickBands(
+  spectrum: IrSpectrum,
+  picking: PickBandsOptions,
+): IrSpectrum {
+  if (spectrum.bandsByHand) return spectrum;
+  return {
+    ...spectrum,
+    bands: pickBands(spectrum, picking),
+    bandsByHand: false,
+  };
+}
+
+/**
+ * Bands as a spectrum holds them: ascending, one per wavenumber, each naming
+ * the spectrum, and none at a wavenumber that is not a number.
+ * @param spectrumId - The spectrum they belong to.
+ * @param bands - The bands, in any order.
+ * @returns The bands in order; the same array when they already were.
+ */
+export function orderedBands(spectrumId: string, bands: IrBand[]): IrBand[] {
+  if (isOrdered(spectrumId, bands)) return bands;
+  const kept: IrBand[] = [];
+  for (const band of bands.toSorted(byWavenumber)) {
+    if (!Number.isFinite(band.wavenumber)) continue;
+    if (kept.at(-1)?.wavenumber === band.wavenumber) continue;
+    kept.push(band.spectrumId === spectrumId ? band : { ...band, spectrumId });
+  }
+  return kept;
+}
+
+/**
+ * Whether two picking settings pick the same bands.
+ * @param first - One.
+ * @param second - The other.
+ * @returns Whether every option agrees.
+ */
+export function samePicking(
+  first: PickBandsOptions,
+  second: PickBandsOptions,
+): boolean {
+  return (
+    first === second ||
+    (first.from === second.from &&
+      first.to === second.to &&
+      first.minRelativeHeight === second.minRelativeHeight &&
+      first.minPeakWidth === second.minPeakWidth &&
+      first.limit === second.limit)
+  );
+}
+
+function isOrdered(spectrumId: string, bands: readonly IrBand[]): boolean {
+  let previous = Number.NEGATIVE_INFINITY;
+  for (const band of bands) {
+    const { wavenumber } = band;
+    if (band.spectrumId !== spectrumId || !Number.isFinite(wavenumber)) {
+      return false;
+    }
+    if (wavenumber <= previous) return false;
+    previous = wavenumber;
+  }
+  return true;
+}
+
+function byWavenumber(first: IrBand, second: IrBand): number {
+  return first.wavenumber - second.wavenumber;
+}

package/src/ir/ui/BandRow.tsx

@@ -1,4 +1,4 @@
-import { Icon } from '@blueprintjs/core';
+import { Button, Icon } from '@blueprintjs/core';
 
 import {
   panelCellStyle,
@@ -24,6 +24,11 @@ export interface BandRowProps {
    * @default undefined
    */
   onHighlight?: (band: IrBand | null) => void;
+  /**
+   * Takes the band away; the row ends with the button that calls it.
+   * @default undefined — no button
+   */
+  onRemove?: (band: IrBand) => void;
 }
 
 /**
@@ -37,7 +42,7 @@ export interface BandRowProps {
  * @returns The row.
  */
 export function BandRow(props: BandRowProps) {
-  const { entry, mode, assignments, lit, onHighlight } = props;
+  const { entry, mode, assignments, lit, onHighlight, onRemove } = props;
   const { band } = entry;
 
   return (
@@ -54,6 +59,17 @@ export function BandRow(props: BandRowProps) {
         {formatIrValue(bandValue(band, mode) ?? Number.NaN, mode)}
       </td>
       {assignments ? <CandidatesCell entry={entry} /> : null}
+      {onRemove === undefined ? null : (
+        <td style={removeCellStyle}>
+          <Button
+            variant="minimal"
+            size="small"
+            icon="small-cross"
+            aria-label={`Take away the band at ${formatWavenumber(band.wavenumber)} cm⁻¹`}
+            onClick={() => onRemove(band)}
+          />
+        </td>
+      )}
     </tr>
   );
 }
@@ -105,3 +121,5 @@ const STRENGTH_TITLES = {
 } as const;
 
 const litRowStyle = { background: '#fff3e0' } as const;
+
+const removeCellStyle = { ...panelCellStyle, padding: 0, width: 1 } as const;

package/src/ir/ui/BandsPanel.tsx

@@ -1,21 +1,19 @@
-import { useMemo } from 'react';
-import { Button, Toolbar } from 'react-science/ui';
-
 import {
   panelBodyStyle,
   panelEmptyStyle,
   panelHeaderCellStyle,
   panelStyle,
   panelTableStyle,
-  panelToolbarStyle,
 } from '../../panel/core/panelStyles.ts';
+import { removeBand } from '../core/handPicking.ts';
 import type { IrBand } from '../core/irBand.ts';
 import { sameIrBand } from '../core/irBand.ts';
 import { shortModeLabel } from '../core/irFormat.ts';
+import type { IrSpectrum } from '../core/irSpectrum.ts';
 import { IR_TECHNIQUE_RULES } from '../core/irTechnique.ts';
 
 import { BandRow } from './BandRow.tsx';
-import { bandsToTsv } from './bandsTsv.ts';
+import { BandsToolbar } from './BandsToolbar.tsx';
 import { useIrActions, useIrEditorState } from './irStateContext.ts';
 
 export interface BandsPanelProps {
@@ -45,6 +43,11 @@ export interface BandsPanelProps {
  * row, which is the whole reason the highlight is threaded through the shell
  * rather than held here: the two views are of one thing.
  *
+ * The list is the spectrum's own and can be edited: a band is taken away from
+ * its row, added by a click on the chart while picking by hand, and the whole
+ * list found automatically again. Once edited it is the spectrum's as picked
+ * by hand, and the threshold no longer moves it.
+ *
  * 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.
@@ -55,89 +58,25 @@ export function BandsPanel(props: BandsPanelProps) {
   const { highlight = null, onHighlight } = props;
   const { state, selectedSpectrum, assigned } = useIrEditorState();
   const actions = useIrActions();
-  const { mode, pickBands, showAssignments, picking, technique } =
-    state.settings;
+  const { mode, pickBands, technique } = state.settings;
   const { assignments } = IR_TECHNIQUE_RULES[technique];
+  const empty = emptyMessage(selectedSpectrum, pickBands, assigned.length);
 
-  const rows = useMemo(() => assigned, [assigned]);
-
-  const tsv = useMemo(
-    () => bandsToTsv(rows, mode, assignments),
-    [rows, mode, assignments],
-  );
+  function remove(band: IrBand): void {
+    if (selectedSpectrum === null) return;
+    actions.setBands(
+      selectedSpectrum.id,
+      removeBand(selectedSpectrum.bands ?? [], band.wavenumber),
+    );
+    onHighlight?.(null);
+  }
 
   return (
     <div style={panelStyle}>
-      <div style={panelToolbarStyle}>
-        <Toolbar aria-label="Band actions">
-          <Toolbar.Item
-            icon="locate"
-            active={pickBands}
-            tooltip={pickBands ? 'Stop picking bands' : 'Pick the bands'}
-            aria-label="Pick the bands"
-            onClick={() => actions.setSettings({ pickBands: !pickBands })}
-          />
-          {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
-            reading: everything else about a band follows from the spectrum, and
-            this is what decides whether a shoulder is a band at all. */}
-        <label style={thresholdStyle}>
-          <span style={{ opacity: 0.7 }}>threshold</span>
-          <input
-            type="range"
-            min={0.005}
-            max={0.3}
-            step={0.005}
-            value={picking.minRelativeHeight ?? 0.02}
-            disabled={!pickBands}
-            aria-label="How tall a band must be to be picked"
-            onChange={(event) =>
-              actions.setSettings({
-                picking: { minRelativeHeight: event.target.valueAsNumber },
-              })
-            }
-          />
-        </label>
-
-        <span style={{ flex: 1 }} />
-
-        <Button
-          variant="minimal"
-          icon="clipboard"
-          disabled={rows.length === 0}
-          tooltipProps={{ content: 'Copy the table' }}
-          aria-label="Copy the table"
-          onClick={() => void navigator.clipboard?.writeText(tsv)}
-        />
-      </div>
+      <BandsToolbar />
 
       <div style={panelBodyStyle}>
-        {selectedSpectrum === null ? (
-          <p style={panelEmptyStyle}>No spectrum is selected.</p>
-        ) : !pickBands ? (
-          <p style={panelEmptyStyle}>
-            The bands are not being picked. Press the locate button above to
-            find them.
-          </p>
-        ) : rows.length === 0 ? (
-          <p style={panelEmptyStyle}>
-            No band was found above the threshold. Lower it to pick the weaker
-            ones.
-          </p>
-        ) : (
+        {empty === null ? (
           <table style={panelTableStyle}>
             <thead>
               <tr>
@@ -149,10 +88,11 @@ export function BandsPanel(props: BandsPanelProps) {
                 {assignments ? (
                   <th style={panelHeaderCellStyle}>could be</th>
                 ) : null}
+                <th style={panelHeaderCellStyle} />
               </tr>
             </thead>
             <tbody>
-              {rows.map((entry) => (
+              {assigned.map((entry) => (
                 <BandRow
                   key={`${entry.band.spectrumId} ${entry.band.wavenumber}`}
                   entry={entry}
@@ -160,19 +100,37 @@ export function BandsPanel(props: BandsPanelProps) {
                   assignments={assignments}
                   lit={sameIrBand(entry.band, highlight)}
                   onHighlight={onHighlight}
+                  onRemove={remove}
                 />
               ))}
             </tbody>
           </table>
+        ) : (
+          <p style={panelEmptyStyle}>{empty}</p>
         )}
       </div>
     </div>
   );
 }
 
-const thresholdStyle = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  gap: 4,
-  fontSize: 11,
-} as const;
+/**
+ * What the panel says in place of the table, when it has no band to list.
+ * @param spectrum - The selected spectrum, `null` for none.
+ * @param picking - Whether the bands are picked at all.
+ * @param count - How many bands there are to list.
+ * @returns The sentence, or `null` when there is a table to show.
+ */
+function emptyMessage(
+  spectrum: IrSpectrum | null,
+  picking: boolean,
+  count: number,
+): string | null {
+  if (spectrum === null) return 'No spectrum is selected.';
+  if (!picking) {
+    return 'The bands are not being picked. Press the locate button above to find them.';
+  }
+  if (count > 0) return null;
+  return spectrum.bandsByHand
+    ? 'No band is picked. Click the chart while picking by hand, or find them automatically again.'
+    : 'No band was found above the threshold. Lower it to pick the weaker ones.';
+}

package/src/ir/ui/BandsToolbar.tsx

@@ -0,0 +1,152 @@
+import { useMemo } from 'react';
+import { Button, Toolbar } from 'react-science/ui';
+
+import { panelToolbarStyle } from '../../panel/core/panelStyles.ts';
+import { IR_TECHNIQUE_RULES } from '../core/irTechnique.ts';
+
+import { bandsToTsv } from './bandsTsv.ts';
+import { useIrCommandProps } from './irCommandContext.tsx';
+import { useIrActions, useIrEditorState } from './irStateContext.ts';
+
+/**
+ * The row at the top of the bands panel: the switches — picking at all,
+ * picking by hand, naming the assignments — then the threshold, then what
+ * acts at once, apart from them on the right: finding the bands automatically
+ * again, taking every band away, copying the table.
+ * @returns The row.
+ */
+export function BandsToolbar() {
+  const { state, selectedSpectrum, assigned } = useIrEditorState();
+  const actions = useIrActions();
+  const command = useIrCommandProps();
+  const { tool } = state.view;
+  const { mode, pickBands, showAssignments, technique } = state.settings;
+  const { assignments } = IR_TECHNIQUE_RULES[technique];
+  const byHand = selectedSpectrum?.bandsByHand === true;
+
+  const tsv = useMemo(
+    () => bandsToTsv(assigned, mode, assignments),
+    [assigned, mode, assignments],
+  );
+
+  return (
+    <div style={panelToolbarStyle}>
+      <Toolbar aria-label="Band actions">
+        <Toolbar.Item
+          icon="locate"
+          active={pickBands}
+          tooltip={pickBands ? 'Stop picking bands' : 'Pick the bands'}
+          aria-label="Pick the bands"
+          onClick={() => actions.setSettings({ pickBands: !pickBands })}
+        />
+        <Toolbar.Item
+          icon="add-location"
+          active={tool === 'pick'}
+          {...command('pickTool')}
+          disabled={selectedSpectrum === null}
+        />
+        {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>
+
+      <ThresholdSlider />
+
+      <span style={{ flex: 1 }} />
+
+      <Button
+        variant="minimal"
+        icon="refresh"
+        disabled={!pickBands || !byHand}
+        tooltipProps={{ content: 'Find the bands automatically again' }}
+        aria-label="Find the bands automatically again"
+        onClick={() => {
+          if (selectedSpectrum !== null) {
+            actions.resetBands(selectedSpectrum.id);
+          }
+        }}
+      />
+      <Button
+        variant="minimal"
+        icon="eraser"
+        disabled={!pickBands || assigned.length === 0}
+        tooltipProps={{ content: 'Take every band away, to pick them by hand' }}
+        aria-label="Take every band away"
+        onClick={() => {
+          if (selectedSpectrum !== null) {
+            actions.setBands(selectedSpectrum.id, []);
+          }
+        }}
+      />
+      <Button
+        variant="minimal"
+        icon="clipboard"
+        disabled={assigned.length === 0}
+        tooltipProps={{ content: 'Copy the table' }}
+        aria-label="Copy the table"
+        onClick={() => void navigator.clipboard?.writeText(tsv)}
+      />
+    </div>
+  );
+}
+
+/**
+ * The threshold, the one picking setting worth reaching for while reading:
+ * everything else about a band follows from the spectrum, and this is what
+ * decides whether a shoulder is a band at all. Bands picked by hand are not
+ * its to move.
+ * @returns The labelled slider.
+ */
+function ThresholdSlider() {
+  const { state, selectedSpectrum } = useIrEditorState();
+  const actions = useIrActions();
+  const { pickBands, picking } = state.settings;
+  const byHand = selectedSpectrum?.bandsByHand === true;
+
+  return (
+    <label
+      style={thresholdStyle}
+      title={
+        byHand
+          ? 'The bands were picked by hand: find them automatically again to use the threshold.'
+          : undefined
+      }
+    >
+      <span style={{ opacity: 0.7 }}>threshold</span>
+      <input
+        type="range"
+        min={0.005}
+        max={0.3}
+        step={0.005}
+        style={sliderStyle}
+        value={picking.minRelativeHeight ?? 0.02}
+        disabled={!pickBands || byHand}
+        aria-label="How tall a band must be to be picked"
+        onChange={(event) =>
+          actions.setSettings({
+            picking: { minRelativeHeight: event.target.valueAsNumber },
+          })
+        }
+      />
+    </label>
+  );
+}
+
+const thresholdStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 4,
+  fontSize: 11,
+} as const;
+
+/** Narrower than the browser's own, so the row holds every control at 360 px. */
+const sliderStyle = { width: 88 } as const;