react-cheminfo 0.69.0 → 0.71.0

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;

package/src/ir/ui/IrCanvas.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
 
+import { editBandsAt } from '../core/handPicking.ts';
 import type { IrBand } from '../core/irBand.ts';
 import type { IrPlotClick } from '../core/irEditorApi.ts';
 import type { IrDomain } from '../core/irSpectrum.ts';
@@ -35,7 +36,8 @@ export interface IrCanvasProps {
   chartId?: string;
   /**
    * Told of a click on the plot — a press let go without travelling, never the
-   * end of a drag — with the spectrum selected at that moment.
+   * end of a drag — with the spectrum selected at that moment. Not told while
+   * bands are picked by hand, which is what a click is then.
    * @default undefined
    */
   onPlotClick?: (click: IrPlotClick) => void;
@@ -64,7 +66,8 @@ export function IrCanvas(props: IrCanvasProps) {
     chartId,
     onPlotClick,
   } = props;
-  const { state, visibleSpectra, assigned } = useIrEditorState();
+  const { state, visibleSpectra, selectedSpectrum, assigned } =
+    useIrEditorState();
   const actions = useIrActions();
   const { domain, tool, selectedId } = state.view;
   const { technique, mode, showAssignments, labelLimit } = state.settings;
@@ -77,15 +80,23 @@ export function IrCanvas(props: IrCanvasProps) {
   );
 
   // Which spectrum was selected is the viewer's to say, not the chart's: the
-  // chart only knows where the press landed.
-  const onClickAt = useMemo(
-    () =>
-      onPlotClick === undefined
-        ? undefined
-        : (wavenumber: number) =>
-            onPlotClick({ wavenumber, spectrumId: selectedId }),
-    [onPlotClick, selectedId],
-  );
+  // chart only knows where the press landed. While picking by hand a click is
+  // a band, and is the viewer's own rather than the host's.
+  const onClickAt = useMemo(() => {
+    if (tool === 'pick') {
+      if (selectedSpectrum === null) return undefined;
+      return (wavenumber: number, reach: number) => {
+        const bands = editBandsAt(selectedSpectrum, wavenumber, reach);
+        if (bands !== selectedSpectrum.bands) {
+          actions.setBands(selectedSpectrum.id, bands);
+        }
+      };
+    }
+    return onPlotClick === undefined
+      ? undefined
+      : (wavenumber: number) =>
+          onPlotClick({ wavenumber, spectrumId: selectedId });
+  }, [tool, selectedSpectrum, actions, onPlotClick, selectedId]);
 
   return (
     <div style={rootStyle}>

package/src/ir/ui/IrChart.tsx

@@ -11,6 +11,7 @@ import { useChartSize } from '../../chart/ui/useChartSize.ts';
 import type { AssignedBand } from '../core/assignBands.ts';
 import type { IrBand } from '../core/irBand.ts';
 import { irModeFor } from '../core/irTechnique.ts';
+import { BAND_HIT_RADIUS } from '../core/nearestBand.ts';
 
 import { BandMarks } from './BandMarks.tsx';
 import { IrPointerTracker } from './IrPointerTracker.tsx';
@@ -83,11 +84,15 @@ export function IrChart(props: IrChartProps): ReactElement {
   const frameWidth = plot.right + MARGIN.right;
   const frameHeight = plot.bottom + MARGIN.bottom;
 
+  // The scale a click is measured against comes out of the zoom the click is
+  // handed to, so the handler reads the latest one when the click happens.
+  const xFactor = useRef(0);
   const onClick = useMemo(
     () =>
       onPlotClick === undefined
         ? undefined
-        : (point: ChartPoint) => onPlotClick(point.x),
+        : (point: ChartPoint) =>
+            onPlotClick(point.x, BAND_HIT_RADIUS / Math.abs(xFactor.current)),
     [onPlotClick],
   );
 
@@ -111,6 +116,10 @@ export function IrChart(props: IrChartProps): ReactElement {
   // was dragged over.
   const { domain: shown, xScale, yScale, selection, handlers } = zoom;
 
+  useLayoutEffect(() => {
+    xFactor.current = xScale.factor;
+  }, [xScale]);
+
   const reported = useRef(shown);
   // Before the browser paints, so a host that stores the window and hands it
   // back does so in the frame the gesture landed in rather than the one after.

package/src/ir/ui/IrDocumentationDialog.tsx

@@ -111,6 +111,13 @@ function InfraredGuide() {
         a row marks the band on the chart, and hovering the chart lights the
         row.
       </p>
+      <p style={paragraphStyle}>
+        The bands are found automatically until you pick them by hand: with the
+        hand tool a click on the chart adds the band under it, at its top, and a
+        click on a mark takes it away, as does the cross at the end of its row.
+        From then on the threshold leaves the list alone, until it is found
+        automatically again.
+      </p>
       <p style={paragraphStyle}>
         A band is reported at the sampled point it peaked on, so on a 4 cm⁻¹
         grid a carbonyl centred at 1710 reads 1708 or 1712. Do not quote one as

package/src/ir/ui/IrEditor.tsx

@@ -18,7 +18,8 @@ export interface IrEditorProps {
   data?: IrSpectrum[];
   /**
    * Called whenever the spectra open change — one loaded, one closed, the chart
-   * cleared — with the spectra now open.
+   * cleared, the bands of one picked — with the spectra now open, each carrying
+   * its bands.
    *
    * The document only. A zoom, a selection, a rename and a colour change what is
    * being looked at rather than what is loaded, and a host told about those would
@@ -50,7 +51,8 @@ export interface IrEditorProps {
   panels?: readonly IrHostPanel[];
   /**
    * The plot was clicked at this wavenumber (a press that did not travel, i.e.
-   * not a zoom drag), with the spectrum selected at that moment.
+   * not a zoom drag), with the spectrum selected at that moment. Not called
+   * while bands are picked by hand: a click is a band then.
    * @default undefined
    */
   onPlotClick?: (click: IrPlotClick) => void;

package/src/ir/ui/IrShell.tsx

@@ -92,6 +92,11 @@ export function IrShell(props: IrShellProps) {
       fullScreen: toggleFullScreen,
       readTool: () => actions.setTool('read'),
       boxTool: () => actions.setTool(tool === 'box' ? 'read' : 'box'),
+      // Picking by hand is done on the marks, so they are shown for it.
+      pickTool: () => {
+        actions.setTool(tool === 'pick' ? 'read' : 'pick');
+        if (!pickBands) actions.setSettings({ pickBands: true });
+      },
       zoomIn,
       zoomOut,
       resetZoom: () => actions.resetDomain(),

package/src/ir/ui/IrStatusBar.tsx

@@ -63,11 +63,14 @@ export function IrStatusBar() {
       {pickBands && assigned.length > 0 ? (
         <span style={itemStyle}>
           {countLabel(assigned.length, 'band', 'bands')}
+          {selectedSpectrum?.bandsByHand ? ' picked by hand' : null}
           {assignments ? `, ${countAssigned(assigned)} assigned` : null}
         </span>
       ) : null}
 
-      {boxZoomOnly(mode) || tool === 'box' ? (
+      {tool === 'pick' ? (
+        <span style={mutedStyle}>click to add or remove a band</span>
+      ) : boxZoomOnly(mode) || tool === 'box' ? (
         <span style={mutedStyle}>square zoom: drag a rectangle</span>
       ) : null}
 

package/src/ir/ui/IrToolbar.tsx

@@ -22,9 +22,10 @@ export interface IrToolbarProps {
  * The tools, down the left of the chart.
  *
  * Only what is done to the spectra: what is asked of the viewer itself — the
- * mark, help, full screen — is in the header. The two **tools** — read and
- * square zoom — come first and show which of the two a drag is currently
- * running, then the zoom commands that act at once, then what is being read: the
+ * mark, help, full screen — is in the header. The **tools** — read and square
+ * zoom, which say what a drag is running, and picking by hand, which says what
+ * a click is — come first, then the zoom commands that act at once, then what
+ * is being read: the
  * value axis, the picking, the assignments. Closing every spectrum is last and
  * alone, being the only one that throws something away.
  *
@@ -64,10 +65,12 @@ export function IrToolbar(props: IrToolbarProps) {
         disabled={isEmpty}
       />
       {/* The read tool drags along one axis, so it is drawn as that; the box
-          tool sweeps a rectangle, which is what a marquee icon means. */}
+          tool sweeps a rectangle, which is what a marquee icon means. Picking
+          by hand is about a click, and a drag still reads while it is chosen,
+          so the two light together. */}
       <Toolbar.Item
         icon="arrows-horizontal"
-        active={!settled && tool === 'read'}
+        active={!settled && tool !== 'box'}
         {...command('readTool')}
         disabled={isEmpty || settled}
       />
@@ -77,6 +80,12 @@ export function IrToolbar(props: IrToolbarProps) {
         {...command('boxTool')}
         disabled={isEmpty || settled}
       />
+      <Toolbar.Item
+        icon="add-location"
+        active={tool === 'pick'}
+        {...command('pickTool')}
+        disabled={selectedSpectrum === null}
+      />
 
       <Toolbar.Item icon="zoom-in" {...command('zoomIn')} disabled={isEmpty} />
       <Toolbar.Item

package/src/ir/ui/VibrationalEditor.tsx

@@ -48,7 +48,8 @@ export interface VibrationalEditorProps {
   panels?: readonly IrHostPanel[];
   /**
    * The plot was clicked at this wavenumber (a press that did not travel, i.e.
-   * not a zoom drag), with the spectrum selected at that moment.
+   * not a zoom drag), with the spectrum selected at that moment. Not called
+   * while bands are picked by hand.
    * @default undefined
    */
   onPlotClick?: (click: IrPlotClick) => void;

package/src/ir/ui/irActions.ts

@@ -8,6 +8,7 @@
 
 import type { Dispatch } from 'react';
 
+import type { IrBand } from '../core/irBand.ts';
 import type { IrAction } from '../core/irReducer.ts';
 import type { IrPanelId } from '../core/irSidePanels.ts';
 import type { IrDomain, IrSpectrum } from '../core/irSpectrum.ts';
@@ -27,6 +28,10 @@ export interface IrEditorActions {
   setSpectrumColor: (id: string, color: string) => void;
   /** Draw one, or stop drawing it. */
   setSpectrumVisible: (id: string, visible: boolean) => void;
+  /** Give one these bands, as picked by hand. */
+  setBands: (id: string, bands: IrBand[]) => void;
+  /** Have one's bands found automatically again, with the settings in force. */
+  resetBands: (id: string) => void;
   /** Point the panels at one, or at none. */
   selectSpectrum: (id: string | null) => void;
   /** Show this window. */
@@ -72,6 +77,12 @@ export function createIrActions(dispatch: Dispatch<IrAction>): IrEditorActions {
     setSpectrumVisible(id, visible) {
       dispatch({ type: 'setSpectrumVisible', id, visible });
     },
+    setBands(id, bands) {
+      dispatch({ type: 'setBands', id, bands });
+    },
+    resetBands(id) {
+      dispatch({ type: 'resetBands', id });
+    },
     selectSpectrum(id) {
       dispatch({ type: 'selectSpectrum', id });
     },

package/src/ir/ui/irChartProps.ts

@@ -98,9 +98,12 @@ export interface IrChartProps {
    * Told the wavenumber a click on the plot landed at: a press let go over the
    * plot without travelling. The end of a drag is never one, nor is a press let
    * go over the axis labels, which inverts to a value the chart is not drawing.
+   *
+   * `reach` is how many cm⁻¹ a band's hit radius spans at the zoom the chart is
+   * at, so a band the click was aimed at can be told from one it was not.
    * @default undefined
    */
-  onPlotClick?: (wavenumber: number) => void;
+  onPlotClick?: (wavenumber: number, reach: number) => void;
   /**
    * What a drag across the plot asks for: the wavenumber axis alone, or exactly
    * the rectangle it sweeps out. A viewer offering a square-zoom tool switches