react-cheminfo 0.8.0 → 0.10.0

package/src/spectra/core/stepProblems.ts

@@ -0,0 +1,228 @@
+import { filterOptions, readFilterOption } from './filterChain.ts';
+import type { SettingsProblem } from './problems.ts';
+import {
+  formulaProblem,
+  isNumber,
+  isWholeNumber,
+  problem,
+} from './problems.ts';
+import type { SpectrumFilter } from './settings.ts';
+
+/** Where a Savitzky–Golay window and degree can sit inside a step's options. */
+const WINDOW_PREFIXES: readonly string[] = ['', 'gsd.sgOptions.'];
+
+/**
+ * Everything wrong with one step's own options.
+ *
+ * Every rule here is one the processor actually fails on, checked against what
+ * `filterXY` does rather than against what the option is called.
+ * @param step - The step.
+ * @param where - How the panel labels it.
+ * @returns Its problems.
+ */
+export function stepProblems(
+  step: SpectrumFilter,
+  where: string,
+): SettingsProblem[] {
+  const problems: SettingsProblem[] = [];
+  const from = readFilterOption(step, 'from');
+  const to = readFilterOption(step, 'to');
+  if (isNumber(from) && isNumber(to) && from >= to) {
+    problems.push(problem('error', where, 'From is not below to.'));
+  }
+
+  problems.push(
+    ...smoothingProblems(step, where),
+    ...zoneProblems(step, where),
+  );
+
+  const points = readFilterOption(step, 'numberOfPoints');
+  if (points !== undefined && (!isWholeNumber(points) || points < 2)) {
+    problems.push(problem('error', where, 'A grid needs at least two points.'));
+  }
+
+  const peaks = readFilterOption(step, 'nbPeaks');
+  if (peaks !== undefined && (!isWholeNumber(peaks) || peaks < 1)) {
+    problems.push(
+      problem('error', where, 'At least one peak has to be looked for.'),
+    );
+  }
+
+  const minimum = readFilterOption(step, 'min');
+  const maximum = readFilterOption(step, 'max');
+  if (isNumber(minimum) && isNumber(maximum) && minimum >= maximum) {
+    problems.push(
+      problem('error', where, 'The minimum is not below the maximum.'),
+    );
+  }
+
+  if (step.name === 'xFunction' || step.name === 'yFunction') {
+    const variable = step.name === 'xFunction' ? 'x' : 'y';
+    const written = readFilterOption(step, 'function');
+    const complaint = formulaProblem(
+      typeof written === 'string' ? written : '',
+      variable,
+    );
+    if (complaint !== undefined) {
+      problems.push(problem('error', where, complaint));
+    }
+  }
+
+  if (step.name === 'fromTo' && (from !== undefined || to !== undefined)) {
+    const options = filterOptions(step);
+    if (options.fromIndex !== undefined || options.toIndex !== undefined) {
+      problems.push(
+        problem(
+          'warning',
+          where,
+          'Both an x value and a point number are given; the point number wins and the x value is ignored.',
+        ),
+      );
+    }
+  }
+  return problems;
+}
+
+/**
+ * What is wrong with a step's window and polynomial, wherever they sit.
+ *
+ * `calibrateX` carries a second pair under its peak picking, and the processor
+ * throws on an even window there exactly as it does on the plain one.
+ * @param step - The step.
+ * @param where - How the panel labels it.
+ * @returns Its problems.
+ */
+function smoothingProblems(
+  step: SpectrumFilter,
+  where: string,
+): SettingsProblem[] {
+  const problems: SettingsProblem[] = [];
+  for (const prefix of WINDOW_PREFIXES) {
+    const window = readFilterOption(step, `${prefix}windowSize`);
+    const polynomial = readFilterOption(step, `${prefix}polynomial`);
+    if (
+      window !== undefined &&
+      (!isWholeNumber(window) || window < 5 || window % 2 === 0)
+    ) {
+      problems.push(
+        problem(
+          'error',
+          where,
+          'The window must be an odd whole number of 5 or more.',
+        ),
+      );
+    }
+    if (
+      polynomial !== undefined &&
+      (!isWholeNumber(polynomial) || polynomial < 1)
+    ) {
+      problems.push(
+        problem(
+          'error',
+          where,
+          'The polynomial degree must be a whole number of 1 or more.',
+        ),
+      );
+    }
+    if (
+      isWholeNumber(window) &&
+      isWholeNumber(polynomial) &&
+      polynomial >= window
+    ) {
+      problems.push(
+        problem(
+          'error',
+          where,
+          'The polynomial degree must stay below the window size.',
+        ),
+      );
+    }
+  }
+
+  const derivative = readFilterOption(step, 'derivative');
+  if (
+    derivative !== undefined &&
+    (!isWholeNumber(derivative) || derivative < 0)
+  ) {
+    problems.push(
+      problem(
+        'error',
+        where,
+        'The derivative must be a whole number of zero or more.',
+      ),
+    );
+  }
+  return problems;
+}
+
+/**
+ * What is wrong with the stretches of x a step names.
+ *
+ * A zone left half filled is not harmless: the processor drops it while
+ * normalizing, then reads the first of the zones that are left — so `filterX`
+ * throws, and `equallySpaced` hands back a spectrum of no points at all.
+ * @param step - The step.
+ * @param where - How the panel labels it.
+ * @returns Its problems.
+ */
+function zoneProblems(step: SpectrumFilter, where: string): SettingsProblem[] {
+  const problems: SettingsProblem[] = [];
+  const zones = readFilterOption(step, 'zones');
+  const exclusions = readFilterOption(step, 'exclusions');
+
+  for (const [index, zone] of asZones(zones).entries()) {
+    if (!isSpan(zone)) {
+      problems.push(
+        problem(
+          'error',
+          where,
+          `Zone to keep ${String(index + 1)} needs both bounds, with from below to; the processor fails on a half-filled one.`,
+        ),
+      );
+    }
+  }
+  for (const [index, zone] of asZones(exclusions).entries()) {
+    if (!isSpan(zone)) {
+      problems.push(
+        problem(
+          'warning',
+          where,
+          `Zone to drop ${String(index + 1)} needs both bounds, with from below to; as it stands it is ignored.`,
+        ),
+      );
+    }
+  }
+
+  if (asZones(zones).length > 0 && asZones(exclusions).length > 0) {
+    problems.push(
+      problem(
+        'warning',
+        where,
+        'Zones to keep and zones to drop are both given; the zones to drop win.',
+      ),
+    );
+  }
+  return problems;
+}
+
+/**
+ * A step's option read as a list of stretches.
+ * @param value - What the option holds.
+ * @returns The list, empty when the option holds anything else.
+ */
+function asZones(value: unknown): ReadonlyArray<Record<string, unknown>> {
+  if (!Array.isArray(value)) return [];
+  return value.filter(
+    (entry): entry is Record<string, unknown> =>
+      typeof entry === 'object' && entry !== null,
+  );
+}
+
+/**
+ * Whether a stretch names both of its ends, the right way round.
+ * @param zone - One entry of a zone list.
+ * @returns True when the processor can use it.
+ */
+function isSpan(zone: Record<string, unknown>): boolean {
+  return isNumber(zone.from) && isNumber(zone.to) && zone.from < zone.to;
+}

package/src/spectra/ui/CalculationRows.tsx

@@ -0,0 +1,161 @@
+import { Button, InputGroup } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+import { useState } from 'react';
+
+import type { SpectraCalculation } from '../core/settings.ts';
+
+import { fitKeys, nextKey } from './rowKeys.ts';
+
+/** What {@link CalculationRows} edits. */
+export interface CalculationRowsProps {
+  /** The named formulas reported per spectrum. */
+  value: readonly SpectraCalculation[];
+  /** Called with the new list on every edit. */
+  onChange: (calculations: SpectraCalculation[]) => void;
+}
+
+/**
+ * The formulas evaluated once per spectrum, over the range integrals.
+ *
+ * The formula box is monospaced and has spellchecking off because what goes in
+ * it is code, not prose: it is compiled into a function whose parameters are
+ * the range names, so a name that does not match a range throws at the moment
+ * the data is asked for rather than here.
+ * @param props - See {@link CalculationRowsProps}.
+ * @returns The list and the button that adds to it.
+ */
+export function CalculationRows(props: CalculationRowsProps): ReactElement {
+  const { value, onChange } = props;
+  const [rowKeys, setRowKeys] = useState<readonly number[]>(() =>
+    value.map((_, index) => index),
+  );
+
+  if (rowKeys.length !== value.length) {
+    setRowKeys(fitKeys(rowKeys, value.length));
+  }
+
+  function write(index: number, patch: Partial<SpectraCalculation>): void {
+    onChange(
+      value.map((held, at) => (at === index ? { ...held, ...patch } : held)),
+    );
+  }
+
+  return (
+    <div style={LIST_STYLE}>
+      {value.length === 0 ? (
+        <span style={EMPTY_STYLE}>None — only the ranges are reported.</span>
+      ) : null}
+      {value.map((calculation, index) => (
+        <div key={rowKeys[index] ?? index} style={ROW_STYLE}>
+          <label style={NAME_FIELD_STYLE}>
+            <span style={LABEL_STYLE}>Name</span>
+            <InputGroup
+              size="small"
+              fill
+              aria-label={`Name of calculation ${String(index + 1)}`}
+              placeholder="what the number is called"
+              spellCheck={false}
+              autoComplete="off"
+              value={calculation.label}
+              onValueChange={(label) => {
+                write(index, { label });
+              }}
+            />
+          </label>
+          <label style={FORMULA_FIELD_STYLE}>
+            <span style={LABEL_STYLE}>Formula</span>
+            <InputGroup
+              size="small"
+              fill
+              aria-label={`Formula of calculation ${String(index + 1)}`}
+              placeholder="aromatic / aliphatic"
+              style={FORMULA_STYLE}
+              spellCheck={false}
+              autoCapitalize="off"
+              autoCorrect="off"
+              autoComplete="off"
+              value={calculation.formula}
+              onValueChange={(formula) => {
+                write(index, { formula });
+              }}
+            />
+          </label>
+          <Button
+            icon="cross"
+            variant="minimal"
+            size="small"
+            aria-label={`Remove calculation ${String(index + 1)}`}
+            onClick={() => {
+              setRowKeys(rowKeys.filter((_, at) => at !== index));
+              onChange(value.filter((_, at) => at !== index));
+            }}
+          />
+        </div>
+      ))}
+      <div>
+        <Button
+          icon="plus"
+          size="small"
+          text="Add a calculation"
+          onClick={() => {
+            setRowKeys([...rowKeys, nextKey(rowKeys)]);
+            onChange([...value, { label: '', formula: '' }]);
+          }}
+        />
+      </div>
+      <span style={HELP_STYLE}>
+        A formula reads the range names as variables, and each one holds that
+        range&apos;s integral.
+      </span>
+    </div>
+  );
+}
+
+const LIST_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 6,
+} as const satisfies CSSProperties;
+
+const ROW_STYLE = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'flex-end',
+  gap: 8,
+} as const satisfies CSSProperties;
+
+const NAME_FIELD_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 2,
+  minWidth: 140,
+  flex: '1 1 140px',
+} as const satisfies CSSProperties;
+
+const FORMULA_FIELD_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 2,
+  minWidth: 200,
+  flex: '2 1 200px',
+} as const satisfies CSSProperties;
+
+const LABEL_STYLE = {
+  fontSize: 11,
+  fontWeight: 600,
+  color: 'var(--text-muted, #5b6875)',
+} as const satisfies CSSProperties;
+
+const FORMULA_STYLE = {
+  fontFamily: 'ui-monospace, SFMono-Regular, monospace',
+} as const satisfies CSSProperties;
+
+const EMPTY_STYLE = {
+  fontSize: 12,
+  color: 'var(--text-faint, #8a96a3)',
+} as const satisfies CSSProperties;
+
+const HELP_STYLE = {
+  fontSize: 11,
+  color: 'var(--text-faint, #8a96a3)',
+} as const satisfies CSSProperties;

package/src/spectra/ui/FilterChainEditor.tsx

@@ -0,0 +1,199 @@
+import { Callout, HTMLSelect } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+import { useState } from 'react';
+
+import { chainProblems } from '../core/chainProblems.ts';
+import {
+  filterEntry,
+  filterMenu,
+  filterStepLabel,
+} from '../core/filterCatalog.ts';
+import {
+  addFilter,
+  duplicateFilter,
+  moveFilter,
+  removeFilter,
+} from '../core/filterChain.ts';
+import { FILTER_GROUP_LABELS } from '../core/filterFields.ts';
+import type { SettingsProblem } from '../core/problems.ts';
+import type { SpectrumFilter, SpectrumFilterName } from '../core/settings.ts';
+
+import { FilterRow } from './FilterRow.tsx';
+import { fitKeys, nextKey } from './rowKeys.ts';
+
+/** What {@link FilterChainEditor} edits. */
+export interface FilterChainEditorProps {
+  /** The steps, in the order they run on every spectrum. */
+  value: readonly SpectrumFilter[];
+  /** Called with the new chain on every edit. */
+  onChange: (chain: SpectrumFilter[]) => void;
+  /**
+   * The problems to show, when a panel already works out the whole settings'.
+   * @default undefined — the editor works out the chain's own with `chainProblems`
+   */
+  problems?: readonly SettingsProblem[];
+  /**
+   * Whether the settings resample before the chain runs, which decides whether
+   * cropping and rewriting the x axis are safe here.
+   * @default false — the resampling runs after the chain
+   */
+  resampleFirst?: boolean;
+}
+
+/**
+ * The per-spectrum chain: the ordered steps every spectrum is run through.
+ *
+ * The steps are drawn as a numbered list with their options open, because the
+ * order is the meaning — scaling before a baseline is removed measures an
+ * offset that is about to change — and a folded-away option is a change to the
+ * data nobody can see. Each step's advice is drawn against the step it is
+ * about; only what the chain as a whole gets wrong is drawn under the list.
+ * @param props - See {@link FilterChainEditorProps}.
+ * @returns The chain editor.
+ */
+export function FilterChainEditor(props: FilterChainEditorProps): ReactElement {
+  const { value, onChange, problems, resampleFirst = false } = props;
+  const [rowKeys, setRowKeys] = useState<readonly number[]>(() =>
+    value.map((_, index) => index),
+  );
+
+  // A step carries no identity of its own, so one is kept beside the chain:
+  // without it React reuses a removed step's boxes for the step that slides up,
+  // and a half-typed number goes with the wrong filter.
+  if (rowKeys.length !== value.length) {
+    setRowKeys(fitKeys(rowKeys, value.length));
+  }
+
+  // Not given and given empty mean different things: a panel that has already
+  // checked the whole settings passes its own list, which may legitimately be
+  // empty, while a panel that has not passes nothing and gets the chain's own.
+  const found = problems ?? chainProblems(value, resampleFirst);
+  const chainWide: SettingsProblem[] = [];
+  const byStep = new Map<string, SettingsProblem[]>();
+  for (const issue of found) {
+    if (issue.where === CHAIN_WIDE) {
+      chainWide.push(issue);
+      continue;
+    }
+    const held = byStep.get(issue.where);
+    if (held === undefined) byStep.set(issue.where, [issue]);
+    else held.push(issue);
+  }
+
+  function move(index: number, offset: number): void {
+    const target = index + offset;
+    if (target < 0 || target >= value.length) return;
+    const keys = [...rowKeys];
+    const [moved] = keys.splice(index, 1);
+    if (moved !== undefined) keys.splice(target, 0, moved);
+    setRowKeys(keys);
+    onChange(moveFilter(value, index, offset));
+  }
+
+  return (
+    <div style={CHAIN_STYLE}>
+      {value.length === 0 ? (
+        <span style={EMPTY_STYLE}>
+          No steps — every spectrum is only brought onto the shared x grid.
+        </span>
+      ) : null}
+      {value.map((step, index) => (
+        <FilterRow
+          key={rowKeys[index] ?? index}
+          filter={step}
+          position={index}
+          count={value.length}
+          problems={
+            byStep.get(filterStepLabel(step.name, index)) ?? NO_PROBLEMS
+          }
+          onChange={(edited) => {
+            onChange(value.map((held, at) => (at === index ? edited : held)));
+          }}
+          onMove={(offset) => {
+            move(index, offset);
+          }}
+          onDuplicate={() => {
+            const keys = [...rowKeys];
+            keys.splice(index + 1, 0, nextKey(rowKeys));
+            setRowKeys(keys);
+            onChange(duplicateFilter(value, index));
+          }}
+          onRemove={() => {
+            setRowKeys(rowKeys.filter((_, at) => at !== index));
+            onChange(removeFilter(value, index));
+          }}
+        />
+      ))}
+      {chainWide.map((issue) => (
+        <Callout
+          key={issue.message}
+          intent={issue.severity === 'error' ? 'danger' : 'warning'}
+          compact
+        >
+          {issue.message}
+        </Callout>
+      ))}
+      <div style={ADD_STYLE}>
+        <HTMLSelect
+          value=""
+          aria-label="Add a step"
+          onChange={(event) => {
+            const name = stepNamed(event.currentTarget.value);
+            if (name === undefined) return;
+            setRowKeys([...rowKeys, nextKey(rowKeys)]);
+            onChange(addFilter(value, name));
+          }}
+        >
+          <option value="">Add a step…</option>
+          {filterMenu().map(({ group, names }) => (
+            <optgroup key={group} label={FILTER_GROUP_LABELS[group]}>
+              {names.map((name) => (
+                <option key={name} value={name}>
+                  {filterEntry(name).label}
+                </option>
+              ))}
+            </optgroup>
+          ))}
+        </HTMLSelect>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * The step the menu's value names.
+ *
+ * Read back off the menu rather than asserted, so a stale value picked up from
+ * anywhere adds nothing instead of a step `filterXY` throws on.
+ * @param chosen - What the select holds.
+ * @returns The step name, or undefined when nothing is named.
+ */
+function stepNamed(chosen: string): SpectrumFilterName | undefined {
+  for (const { names } of filterMenu()) {
+    for (const name of names) {
+      if (name === chosen) return name;
+    }
+  }
+  return undefined;
+}
+
+/** How `chainProblems` labels what the chain as a whole gets wrong. */
+const CHAIN_WIDE = 'The chain';
+
+/** One shared empty list, so a step with no problems re-renders nothing. */
+const NO_PROBLEMS: readonly SettingsProblem[] = [];
+
+const CHAIN_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8,
+} as const satisfies CSSProperties;
+
+const EMPTY_STYLE = {
+  fontSize: 12,
+  color: 'var(--text-faint, #8a96a3)',
+} as const satisfies CSSProperties;
+
+const ADD_STYLE = {
+  display: 'flex',
+} as const satisfies CSSProperties;