react-cheminfo 0.28.0 → 0.30.0

package/src/ir/ui/IrTraces.tsx

@@ -0,0 +1,134 @@
+import { xyReduce } from 'ml-spectra-processing';
+import type { ReactElement } from 'react';
+import { useMemo } from 'react';
+
+import type { PlotRect } from '../../chart/core/chartGeometry.ts';
+import type { ChartScale } from '../../chart/core/chartScale.ts';
+import { profilePath } from '../../chart/core/tracePath.ts';
+import type { IrMode, IrSpectrum } from '../core/irSpectrum.ts';
+import { traceOf } from '../core/irSpectrum.ts';
+
+export interface IrTracesProps {
+  /** The spectra to draw, each saying in itself whether it is drawn. */
+  spectra: readonly IrSpectrum[];
+  /** Which value axis is being drawn. */
+  mode: IrMode;
+  /**
+   * Where the plot sits, whose width is how many points are worth drawing. A
+   * trace is reduced to the pixel columns it will occupy, so the width is what
+   * says how much of a spectrum the chart can actually show.
+   */
+  plot: PlotRect;
+  /**
+   * The window being shown, low end first — which is what the reduction is cut
+   * to. Read from the window rather than inverted back out of `xScale`, because
+   * the wavenumber axis runs right to left and inverting its left edge gives
+   * 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. */
+  xScale: ChartScale;
+  /** The value axis as it is currently zoomed. */
+  yScale: ChartScale;
+  /**
+   * Identity of the spectrum drawn thicker than the rest, `null` for none. The
+   * one every panel beside the chart is about, so that which trace the numbers
+   * belong to can be seen rather than inferred from a colour swatch.
+   * @default null
+   */
+  emphasisedId?: string | null;
+}
+
+/**
+ * Every visible spectrum, one `<path>` each.
+ *
+ * One path per spectrum and never one element per point: an infrared spectrum is
+ * a few thousand samples, and drawn as a line each the browser holds thousands of
+ * nodes for a picture that is a single stroke — and every pointer move across the
+ * chart then costs a walk of all of them.
+ *
+ * Nor every sample: a spectrum is reduced to the pixel columns it will occupy
+ * before it becomes a path. A bench instrument's 1 cm⁻¹ grid over 4000–400 is
+ * some eight thousand samples against a plot around thirteen hundred pixels
+ * wide, and a chart holding the four infrared blocks of one JCAMP file writes
+ * a fifth of a megabyte of `d` for a picture no denser than the one it would
+ * have drawn from a tenth of that. `xyReduce` keeps the lowest and the highest
+ * sample of every slot, so a band still reaches its true depth rather than the
+ * depth of whichever sample a slot boundary happened to land on — and it cuts
+ * by wavenumber rather than by index, which is what makes it safe on the
+ * uneven grids a converted or interpolated file arrives on.
+ *
+ * There is no stick trace here and no mirror mode, which is the visible
+ * difference from a mass chart: infrared is a continuous absorption profile, the
+ * bands are features *of* that curve rather than a second representation of it,
+ * and two spectra are compared by drawing them over one another rather than head
+ * to head — the baselines have to line up for the comparison to mean anything.
+ * @param props - Component props.
+ * @returns The traces, as SVG.
+ */
+export function IrTraces(props: IrTracesProps): ReactElement {
+  const {
+    spectra,
+    mode,
+    plot,
+    xDomain,
+    xScale,
+    yScale,
+    emphasisedId = null,
+  } = props;
+
+  const [from, to] = xDomain;
+  const wanted = Math.max(2, Math.round(plot.width)) * POINTS_PER_COLUMN;
+
+  const paths = useMemo(() => {
+    const drawn: Array<{ id: string; color: string; d: string }> = [];
+    for (const spectrum of spectra) {
+      if (!spectrum.visible) continue;
+      const trace = traceOf(spectrum, mode);
+      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 });
+    }
+    return drawn;
+  }, [spectra, mode, from, to, wanted, xScale, yScale]);
+
+  return (
+    <g pointerEvents="none">
+      {paths.map((path) => (
+        <path
+          key={path.id}
+          d={path.d}
+          fill="none"
+          stroke={path.color}
+          strokeWidth={
+            path.id === emphasisedId ? EMPHASISED_WIDTH : TRACE_WIDTH
+          }
+          strokeLinejoin="round"
+        />
+      ))}
+    </g>
+  );
+}
+
+/**
+ * How many reduced samples each pixel column is given.
+ *
+ * The reduction keeps the lowest and the highest sample of every slot, so two
+ * per column is the least that draws a column at all — and `xyReduce` asks for
+ * about four times what is displayed before a narrow band survives at its true
+ * depth rather than at the depth of whichever sample the slot boundary happened
+ * to land on.
+ */
+const POINTS_PER_COLUMN = 4;
+
+/** How thick a trace is drawn. */
+const TRACE_WIDTH = 1;
+
+/**
+ * How thick the one every panel is about is drawn.
+ *
+ * Barely thicker, because the difference has to be visible without reading as a
+ * different kind of thing: at two pixels a trace still looks like the others,
+ * where at three it looks like a fit or an envelope drawn over them.
+ */
+const EMPHASISED_WIDTH = 2;

package/src/ir/ui/MetadataPanel.tsx

@@ -0,0 +1,88 @@
+import {
+  panelBodyStyle,
+  panelCellStyle,
+  panelEmptyStyle,
+  panelStyle,
+  panelTableStyle,
+} from '../../panel/core/panelStyles.ts';
+
+import { useIrEditorState } from './irStateContext.ts';
+
+/**
+ * What the file said about the selected spectrum's acquisition.
+ *
+ * Only what it actually said. A field the file left blank is left out rather than
+ * shown empty, so every line in the table is a fact — which is what makes the
+ * table worth reading at all on a format where instruments write whatever they
+ * like.
+ *
+ * Where the spectrum came from is shown even when the file said nothing: the
+ * format and the file name are the two things a reader asks first when a trace
+ * looks wrong.
+ * @returns The panel.
+ */
+export function MetadataPanel() {
+  const { selectedSpectrum } = useIrEditorState();
+
+  if (selectedSpectrum === null) {
+    return (
+      <div style={panelStyle}>
+        <div style={panelBodyStyle}>
+          <p style={panelEmptyStyle}>No spectrum is selected.</p>
+        </div>
+      </div>
+    );
+  }
+
+  const { meta, origin, wavenumber } = selectedSpectrum;
+  const rows: Array<[string, string]> = [
+    ['Format', origin.format],
+    ...(origin.fileName === undefined
+      ? []
+      : ([['File', origin.fileName]] as Array<[string, string]>)),
+    ...(origin.blockIndex === undefined
+      ? []
+      : ([['Block', String(origin.blockIndex)]] as Array<[string, string]>)),
+    ...(origin.recorded === undefined
+      ? []
+      : ([['Recorded as', origin.recorded]] as Array<[string, string]>)),
+    ['Points', String(wavenumber.length)],
+    ...(meta === null
+      ? []
+      : meta.fields.map(
+          (field) => [field.label, field.value] as [string, string],
+        )),
+  ];
+
+  return (
+    <div style={panelStyle}>
+      <div style={panelBodyStyle}>
+        {meta?.title === null || meta?.title === undefined ? null : (
+          <p style={titleStyle}>{meta.title}</p>
+        )}
+        <table style={panelTableStyle}>
+          <tbody>
+            {rows.map(([label, value]) => (
+              <tr key={label}>
+                <th style={labelCellStyle}>{label}</th>
+                <td style={{ ...panelCellStyle, whiteSpace: 'normal' }}>
+                  {value}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+const titleStyle = { margin: 0, fontWeight: 600 } as const;
+
+const labelCellStyle = {
+  ...panelCellStyle,
+  textAlign: 'left',
+  fontWeight: 400,
+  opacity: 0.7,
+  width: '40%',
+} as const;

package/src/ir/ui/SpectraPanel.tsx

@@ -0,0 +1,114 @@
+import { Toolbar } from 'react-science/ui';
+
+import {
+  panelBodyStyle,
+  panelEmptyStyle,
+  panelStyle,
+  panelToolbarStyle,
+} from '../../panel/core/panelStyles.ts';
+import {
+  downloadIrSpectra,
+  downloadIrSpectrum,
+} from '../core/downloadSpectra.ts';
+
+import { SpectrumRow } from './SpectrumRow.tsx';
+import { useIrActions, useIrEditorState } from './irStateContext.ts';
+
+/**
+ * The spectra that are open: which is drawn, which the panels are about, and
+ * what each is called.
+ *
+ * One row per spectrum, and the row is the selection: the panels and the picking
+ * are about one spectrum at a time, so which one that is has to be visible and
+ * one click away. Drawing is separate from selecting — a reference can be kept on
+ * the chart while the bands of the sample are read — which is why the eye and the
+ * row are two different targets.
+ *
+ * What acts on the list rather than on one row — drawing them all again, handing
+ * the whole list over as a file, closing the selected one, closing every one — is
+ * a toolbar under the header, where a panel's own actions belong. Closing the
+ * selected spectrum is offered there as well as on its row because the row's
+ * cross is a small target in a list of twenty, and the selected spectrum is the
+ * one being worked on.
+ * @returns The panel.
+ */
+export function SpectraPanel() {
+  const { state } = useIrEditorState();
+  const actions = useIrActions();
+  const { spectra } = state.data;
+  const { selectedId } = state.view;
+  const { mode } = state.settings;
+
+  const selected = spectra.find((spectrum) => spectrum.id === selectedId);
+  const allDrawn = spectra.every((spectrum) => spectrum.visible);
+
+  return (
+    <div style={panelStyle}>
+      <div style={panelToolbarStyle}>
+        <Toolbar aria-label="Spectra">
+          <Toolbar.Item
+            icon="trash"
+            intent="danger"
+            tooltip="Close every spectrum"
+            aria-label="Close every spectrum"
+            disabled={spectra.length === 0}
+            onClick={actions.clear}
+          />
+          <Toolbar.Item
+            icon="cross"
+            intent="danger"
+            tooltip="Close the selected spectrum"
+            aria-label="Close the selected spectrum"
+            disabled={selected === undefined}
+            onClick={() => {
+              if (selected !== undefined) actions.removeSpectrum(selected.id);
+            }}
+          />
+          <Toolbar.Item
+            icon="eye-open"
+            tooltip="Draw every spectrum again"
+            aria-label="Draw every spectrum again"
+            disabled={spectra.length === 0 || allDrawn}
+            onClick={() => {
+              for (const spectrum of spectra) {
+                actions.setSpectrumVisible(spectrum.id, true);
+              }
+            }}
+          />
+          <Toolbar.Item
+            icon="download"
+            tooltip="Download every spectrum as one JCAMP-DX file"
+            aria-label="Download every spectrum"
+            disabled={spectra.length === 0}
+            onClick={() => downloadIrSpectra(spectra, mode)}
+          />
+        </Toolbar>
+      </div>
+
+      <div style={panelBodyStyle}>
+        {spectra.length === 0 ? (
+          <p style={panelEmptyStyle}>
+            No spectrum is open. Open one of the examples, or drop a JCAMP-DX
+            file on the chart.
+          </p>
+        ) : (
+          spectra.map((spectrum) => (
+            <SpectrumRow
+              key={spectrum.id}
+              spectrum={spectrum}
+              selected={spectrum.id === selectedId}
+              onSelect={() => actions.selectSpectrum(spectrum.id)}
+              onToggle={() =>
+                actions.setSpectrumVisible(spectrum.id, !spectrum.visible)
+              }
+              onColor={(color) => actions.setSpectrumColor(spectrum.id, color)}
+              onDownload={() => downloadIrSpectrum(spectrum, mode)}
+              onRemove={() => actions.removeSpectrum(spectrum.id)}
+              onRename={(name) => actions.renameSpectrum(spectrum.id, name)}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ir/ui/SpectrumRow.tsx

@@ -0,0 +1,127 @@
+import { Button } from 'react-science/ui';
+
+import { SpectrumColorSwatch } from '../../panel/ui/SpectrumColorSwatch.tsx';
+import { formatWavenumber } from '../core/irFormat.ts';
+import type { IrSpectrum } from '../core/irSpectrum.ts';
+
+export interface SpectrumRowProps {
+  /** The spectrum the row is about. */
+  spectrum: IrSpectrum;
+  /** Whether the panels are about it. */
+  selected: boolean;
+  /** Point the panels at it. */
+  onSelect: () => void;
+  /** Draw it, or stop drawing it. */
+  onToggle: () => void;
+  /** Draw it in another colour of the palette. */
+  onColor: (color: string) => void;
+  /** Hand it over as a file. */
+  onDownload: () => void;
+  /** Close it. */
+  onRemove: () => void;
+  /** Call it something else. */
+  onRename: (name: string) => void;
+}
+
+/**
+ * One spectrum: its colour, its name, where it runs, and what can be done to it.
+ * @param props - Component props.
+ * @returns The row.
+ */
+export function SpectrumRow(props: SpectrumRowProps) {
+  const {
+    spectrum,
+    selected,
+    onSelect,
+    onToggle,
+    onColor,
+    onDownload,
+    onRemove,
+    onRename,
+  } = props;
+
+  const range =
+    spectrum.wavenumber.length === 0
+      ? ''
+      : `${formatWavenumber(spectrum.wavenumber.at(-1) as number)}–${formatWavenumber(spectrum.wavenumber[0] as number)} cm⁻¹`;
+
+  return (
+    <div
+      style={selected ? selectedRowStyle : rowStyle}
+      data-selected={selected ? 'true' : undefined}
+    >
+      <Button
+        variant="minimal"
+        icon={spectrum.visible ? 'eye-open' : 'eye-off'}
+        tooltipProps={{ content: spectrum.visible ? 'Hide' : 'Draw' }}
+        aria-label={spectrum.visible ? 'Hide this spectrum' : 'Draw it'}
+        onClick={onToggle}
+      />
+
+      {/* The swatch is the colour control: a spectrum is told from the others by
+          its colour, so the colour is where a reader reaches to change it. */}
+      <SpectrumColorSwatch
+        color={spectrum.color}
+        name={spectrum.name}
+        onPick={onColor}
+      />
+
+      <input
+        style={nameStyle}
+        value={spectrum.name}
+        spellCheck={false}
+        autoComplete="off"
+        aria-label="What this spectrum is called"
+        onFocus={onSelect}
+        onChange={(event) => onRename(event.target.value)}
+      />
+
+      <span style={rangeStyle}>{range}</span>
+
+      <Button
+        variant="minimal"
+        icon="download"
+        tooltipProps={{ content: 'Download this spectrum as a JCAMP-DX file' }}
+        aria-label="Download this spectrum"
+        onClick={onDownload}
+      />
+
+      <Button
+        variant="minimal"
+        icon="cross"
+        intent="danger"
+        tooltipProps={{ content: 'Close this spectrum' }}
+        aria-label="Close this spectrum"
+        onClick={onRemove}
+      />
+    </div>
+  );
+}
+
+const rowStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4,
+  padding: '1px 2px',
+  borderRadius: 3,
+} as const;
+
+const selectedRowStyle = { ...rowStyle, background: '#e8f1fb' } as const;
+
+const nameStyle = {
+  flex: '1 1 1px',
+  minWidth: 0,
+  border: '1px solid transparent',
+  borderRadius: 2,
+  background: 'transparent',
+  font: 'inherit',
+  fontSize: 12,
+  padding: '1px 3px',
+} as const;
+
+const rangeStyle = {
+  flex: 'none',
+  fontSize: 11,
+  opacity: 0.6,
+  fontVariantNumeric: 'tabular-nums',
+} as const;

package/src/ir/ui/index.ts

@@ -0,0 +1,56 @@
+/**
+ * The infrared chart, the panels beside it and the editor they sit in.
+ *
+ * `IrChart` is the drawing and holds nothing: it takes spectra, bands, a mode
+ * and a window as props and hands every gesture back, so it fits a report page
+ * or a test as readily as an editor. The chart's own drawing — scales, ticks,
+ * plot geometry, the zoom gestures and the label placement — is the shared
+ * chart layer, which every viewer of the family draws with.
+ */
+
+export type { BandMarksProps } from './BandMarks.tsx';
+export { BandMarks } from './BandMarks.tsx';
+export type { BandsPanelProps } from './BandsPanel.tsx';
+export { BandsPanel } from './BandsPanel.tsx';
+export type { IrAboutDialogProps } from './IrAboutDialog.tsx';
+export { IrAboutDialog } from './IrAboutDialog.tsx';
+export type { IrCanvasProps } from './IrCanvas.tsx';
+export { IrCanvas } from './IrCanvas.tsx';
+export { IrChart } from './IrChart.tsx';
+export type { IrCommandProviderProps } from './IrCommandProvider.tsx';
+export { IrCommandProvider } from './IrCommandProvider.tsx';
+export type { IrCommandTooltipProps } from './IrCommandTooltip.tsx';
+export { IrCommandTooltip } from './IrCommandTooltip.tsx';
+export type { IrDocumentationDialogProps } from './IrDocumentationDialog.tsx';
+export { IrDocumentationDialog } from './IrDocumentationDialog.tsx';
+export type { IrEditorProps } from './IrEditor.tsx';
+export { IrEditor } from './IrEditor.tsx';
+export type { IrLogoProps } from './IrLogo.tsx';
+export { IrLogo } from './IrLogo.tsx';
+export type { IrPointerTrackerProps } from './IrPointerTracker.tsx';
+export { IrPointerTracker } from './IrPointerTracker.tsx';
+export type { IrSidePanelProps } from './IrSidePanel.tsx';
+export { IrSidePanel } from './IrSidePanel.tsx';
+export type { IrStateProviderProps } from './IrStateProvider.tsx';
+export { IrStateProvider } from './IrStateProvider.tsx';
+export { IrStatusBar } from './IrStatusBar.tsx';
+export { IrToolbar } from './IrToolbar.tsx';
+export type { IrTracesProps } from './IrTraces.tsx';
+export { IrTraces } from './IrTraces.tsx';
+export { MetadataPanel } from './MetadataPanel.tsx';
+export { SpectraPanel } from './SpectraPanel.tsx';
+export type { SpectrumRowProps } from './SpectrumRow.tsx';
+export { SpectrumRow } from './SpectrumRow.tsx';
+export type { IrEditorActions } from './irActions.ts';
+export { createIrActions } from './irActions.ts';
+export type { IrChartProps } from './irChartProps.ts';
+export type { IrCommandContextValue } from './irCommandContext.tsx';
+export { useIrCommand, useIrCommandProps } from './irCommandContext.tsx';
+export { useIrActions, useIrEditorState } from './irStateContext.ts';
+export type { IrEditorApi, UseIrEditorOptions } from './useIrEditor.ts';
+export { useIrEditor } from './useIrEditor.ts';
+export type { IrPointerOptions, IrReadout } from './useIrPointer.ts';
+export { sameIrReadout, useIrPointer } from './useIrPointer.ts';
+export { useIrShortcuts } from './useIrShortcuts.ts';
+export type { IrZoomOptions } from './useIrZoom.ts';
+export { useIrZoom } from './useIrZoom.ts';

package/src/ir/ui/irActions.ts

@@ -0,0 +1,103 @@
+/**
+ * Everything the viewer can be asked to do, as functions rather than actions.
+ *
+ * A component that dispatched action objects would have the shape of the reducer
+ * spread across every panel; one that calls `actions.selectSpectrum(id)` does
+ * not, and the reducer stays free to change how it holds things.
+ */
+
+import type { Dispatch } from 'react';
+
+import type { IrAction } from '../core/irReducer.ts';
+import type { IrSidePanelId } from '../core/irSidePanels.ts';
+import type { IrDomain, IrSpectrum } from '../core/irSpectrum.ts';
+import type { IrSettings, IrTool, PartialIrState } from '../core/irState.ts';
+
+/** Everything the viewer can be asked to do. */
+export interface IrEditorActions {
+  /** Draw these as well as what is already open. */
+  addSpectra: (spectra: IrSpectrum[]) => void;
+  /** Draw these instead of what is open, and refit the window to them. */
+  setSpectra: (spectra: IrSpectrum[]) => void;
+  /** Close one. */
+  removeSpectrum: (id: string) => void;
+  /** Call one something else. */
+  renameSpectrum: (id: string, name: string) => void;
+  /** Draw one in another colour. */
+  setSpectrumColor: (id: string, color: string) => void;
+  /** Draw one, or stop drawing it. */
+  setSpectrumVisible: (id: string, visible: boolean) => void;
+  /** Point the panels at one, or at none. */
+  selectSpectrum: (id: string | null) => void;
+  /** Show this window. */
+  setDomain: (domain: IrDomain) => void;
+  /** Show what fits again. */
+  resetDomain: () => void;
+  /** Run this tool on the next drag. */
+  setTool: (tool: IrTool) => void;
+  /** Open or close a side panel. */
+  togglePanel: (panelId: IrSidePanelId) => void;
+  /** Say why something was refused, or that nothing is wrong any more. */
+  setError: (error: string | null) => void;
+  /** Change how the spectra are drawn and read. */
+  setSettings: (settings: Partial<IrSettings>) => void;
+  /** Take a whole state, as a host restoring one supplies it. */
+  loadState: (state: PartialIrState) => void;
+  /** Close every spectrum and start again from an empty chart. */
+  clear: () => void;
+}
+
+/**
+ * Bind every action to a dispatch.
+ * @param dispatch - The reducer's dispatch.
+ * @returns The actions, stable for as long as the dispatch is.
+ */
+export function createIrActions(dispatch: Dispatch<IrAction>): IrEditorActions {
+  return {
+    addSpectra(spectra) {
+      dispatch({ type: 'addSpectra', spectra });
+    },
+    setSpectra(spectra) {
+      dispatch({ type: 'setSpectra', spectra });
+    },
+    removeSpectrum(id) {
+      dispatch({ type: 'removeSpectrum', id });
+    },
+    renameSpectrum(id, name) {
+      dispatch({ type: 'renameSpectrum', id, name });
+    },
+    setSpectrumColor(id, color) {
+      dispatch({ type: 'setSpectrumColor', id, color });
+    },
+    setSpectrumVisible(id, visible) {
+      dispatch({ type: 'setSpectrumVisible', id, visible });
+    },
+    selectSpectrum(id) {
+      dispatch({ type: 'selectSpectrum', id });
+    },
+    setDomain(domain) {
+      dispatch({ type: 'setDomain', domain });
+    },
+    resetDomain() {
+      dispatch({ type: 'resetDomain' });
+    },
+    setTool(tool) {
+      dispatch({ type: 'setTool', tool });
+    },
+    togglePanel(panelId) {
+      dispatch({ type: 'togglePanel', panelId });
+    },
+    setError(error) {
+      dispatch({ type: 'setError', error });
+    },
+    setSettings(settings) {
+      dispatch({ type: 'setSettings', settings });
+    },
+    loadState(state) {
+      dispatch({ type: 'loadState', state });
+    },
+    clear() {
+      dispatch({ type: 'clear' });
+    },
+  };
+}