react-cheminfo 0.8.0 → 0.10.0

package/src/spectra/ui/NormalizationEditor.tsx

@@ -0,0 +1,235 @@
+import { Callout, SegmentedControl } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+
+import type { SettingsProblem } from '../core/problems.ts';
+import type {
+  ExclusionZone,
+  NormalizationSettings,
+  SpectraProcessorSettings,
+} from '../core/settings.ts';
+import {
+  DEFAULT_MAX_MEMORY,
+  DEFAULT_NUMBER_OF_POINTS,
+  normalizationFilters,
+  withNormalizationFilters,
+} from '../core/settings.ts';
+
+import { FilterChainEditor } from './FilterChainEditor.tsx';
+import { NumberField } from './NumberField.tsx';
+import { ProblemList } from './ProblemList.tsx';
+import { SettingsPart } from './SettingsPart.tsx';
+import type { Zone } from './ZoneRows.tsx';
+import { ZoneRows } from './ZoneRows.tsx';
+import { problemsAbout } from './problemsAbout.ts';
+
+/** What {@link NormalizationEditor} edits. */
+export interface NormalizationEditorProps {
+  /** What `new SpectraProcessor(…)` would be handed. */
+  value: SpectraProcessorSettings;
+  /** Called with the edited settings on every change. */
+  onChange: (settings: SpectraProcessorSettings) => void;
+  /** Every problem the whole settings object has; each part picks its own. */
+  problems: readonly SettingsProblem[];
+}
+
+/**
+ * The stage that brings every spectrum onto one x grid.
+ *
+ * It comes first because nothing downstream means anything until it is settled:
+ * two spectra sampled on different x cannot be compared, subtracted or put in
+ * one matrix. The order control is given a heading of its own because it is the
+ * one switch that silently changes what every other number on this panel means.
+ * @param props - See {@link NormalizationEditorProps}.
+ * @returns The memory budget, the grid, the order, the excluded zones and the chain.
+ */
+export function NormalizationEditor(
+  props: NormalizationEditorProps,
+): ReactElement {
+  const { value, onChange, problems } = props;
+  const normalization: NormalizationSettings = value.normalization ?? {};
+  const resampleFirst = normalization.applyRangeSelectionFirst === true;
+
+  function write(patch: Partial<NormalizationSettings>): void {
+    onChange({ ...value, normalization: { ...normalization, ...patch } });
+  }
+
+  return (
+    <div style={STAGE_STYLE}>
+      <SettingsPart
+        title="Memory"
+        summary="How much of the data as it was read is kept once it has been resampled."
+      >
+        <NumberField
+          label="Budget (MB)"
+          value={toMegabytes(value.maxMemory)}
+          placeholder={String(toMegabytes(DEFAULT_MAX_MEMORY))}
+          integer
+          onChange={(megabytes) => {
+            onChange(withMaxMemory(value, megabytes));
+          }}
+        />
+        <Callout intent="warning" compact>
+          Once the budget is passed the processor throws the original spectra
+          away and keeps only what it has already resampled, so nothing below
+          can be changed afterwards without loading the files again.
+        </Callout>
+        <ProblemList problems={problemsAbout(problems, 'Memory')} />
+      </SettingsPart>
+
+      <SettingsPart
+        title="Resampling"
+        summary="The x grid every spectrum is put on, which is what makes them comparable."
+      >
+        <div style={ROW_STYLE}>
+          <NumberField
+            label="From"
+            value={normalization.from}
+            placeholder="the first x"
+            onChange={(from) => {
+              write({ from });
+            }}
+          />
+          <NumberField
+            label="To"
+            value={normalization.to}
+            placeholder="the last x"
+            onChange={(to) => {
+              write({ to });
+            }}
+          />
+          <NumberField
+            label="Number of points"
+            value={normalization.numberOfPoints}
+            placeholder={String(DEFAULT_NUMBER_OF_POINTS)}
+            integer
+            onChange={(numberOfPoints) => {
+              write({ numberOfPoints });
+            }}
+          />
+        </div>
+        <ProblemList problems={problemsAbout(problems, 'Resampling')} />
+      </SettingsPart>
+
+      <SettingsPart
+        title="Order"
+        summary="Whether the chain below runs before or after the grid above is applied."
+      >
+        <SegmentedControl
+          size="small"
+          value={resampleFirst ? 'resample-first' : 'filter-first'}
+          options={ORDER_OPTIONS}
+          onValueChange={(order) => {
+            write({ applyRangeSelectionFirst: order === 'resample-first' });
+          }}
+        />
+        <span style={HELP_STYLE}>{orderHelp(resampleFirst)}</span>
+      </SettingsPart>
+
+      <SettingsPart
+        title="Excluded zones"
+        summary="Stretches of x the grid skips, such as a solvent peak or a detector gap."
+      >
+        <ZoneRows
+          label="Excluded zones"
+          withIgnore
+          value={normalization.exclusions ?? []}
+          help="A zone is dropped from the grid; the points it would have held are shared out over the rest."
+          onChange={(zones) => {
+            write({ exclusions: asExclusions(zones) });
+          }}
+        />
+        <ProblemList problems={problemsAbout(problems, 'Excluded zone')} />
+      </SettingsPart>
+
+      <SettingsPart
+        title="Chain"
+        summary="What each spectrum is put through on its own, step by step."
+      >
+        <FilterChainEditor
+          value={normalizationFilters(value)}
+          resampleFirst={resampleFirst}
+          problems={problems}
+          onChange={(chain) => {
+            onChange(withNormalizationFilters(value, chain));
+          }}
+        />
+      </SettingsPart>
+    </div>
+  );
+}
+
+/**
+ * The budget as the box shows it, in the unit a reader thinks in.
+ * @param bytes - What the settings hold.
+ * @returns The same budget in megabytes, or undefined when none is set.
+ */
+function toMegabytes(bytes: number | undefined): number | undefined {
+  return bytes === undefined ? undefined : bytes / BYTES_PER_MEGABYTE;
+}
+
+/**
+ * The settings with a different budget, in bytes as the processor reads it.
+ * @param settings - What the constructor would be handed.
+ * @param megabytes - What was typed, or undefined when the box was emptied.
+ * @returns A new settings object, without the key at all when nothing is set.
+ */
+function withMaxMemory(
+  settings: SpectraProcessorSettings,
+  megabytes: number | undefined,
+): SpectraProcessorSettings {
+  const next: SpectraProcessorSettings = { ...settings };
+  if (megabytes === undefined) {
+    delete next.maxMemory;
+  } else {
+    next.maxMemory = megabytes * BYTES_PER_MEGABYTE;
+  }
+  return next;
+}
+
+/**
+ * The rows as the settings hold them.
+ *
+ * A row opens with neither bound typed, which upstream's type does not allow
+ * and `settingsProblems` reports instead — the half-filled row has to survive
+ * long enough for the reader to finish typing it.
+ * @param zones - The rows as they were edited.
+ * @returns The same rows, at the type the settings carry.
+ */
+function asExclusions(zones: readonly Zone[]): ExclusionZone[] {
+  return zones as ExclusionZone[];
+}
+
+/**
+ * Which x the range and the exclusions are read in, given the order.
+ * @param resampleFirst - Whether the grid is applied before the chain runs.
+ * @returns The line drawn under the order control.
+ */
+function orderHelp(resampleFirst: boolean): string {
+  return resampleFirst
+    ? 'The range and the excluded zones are read in the x the file holds, and the chain then runs on the resampled grid.'
+    : 'The chain runs first, so the range and the excluded zones are read in the x the chain leaves behind — a step that moves the axis moves them with it.';
+}
+
+const BYTES_PER_MEGABYTE = 1024 * 1024;
+
+const ORDER_OPTIONS = [
+  { value: 'filter-first', label: 'Filter, then resample' },
+  { value: 'resample-first', label: 'Resample, then filter' },
+];
+
+const STAGE_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 12,
+} as const satisfies CSSProperties;
+
+const ROW_STYLE = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: 8,
+} as const satisfies CSSProperties;
+
+const HELP_STYLE = {
+  fontSize: 11,
+  color: 'var(--text-faint, #8a96a3)',
+} as const satisfies CSSProperties;

package/src/spectra/ui/NumberField.tsx

@@ -0,0 +1,126 @@
+import { InputGroup } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+import { useState } from 'react';
+
+/** What {@link NumberField} edits. */
+export interface NumberFieldProps {
+  /** What the field is called, shown above the box. */
+  label: string;
+  /**
+   * The number the settings hold.
+   * @default undefined — the box is empty and upstream's own default applies
+   */
+  value?: number;
+  /**
+   * What upstream does when the box is left empty, shown in grey inside it.
+   * @default undefined — the box carries no placeholder
+   */
+  placeholder?: string;
+  /** Called with the new number, or with undefined when the box is emptied. */
+  onChange: (value: number | undefined) => void;
+  /**
+   * Whether only whole numbers make sense here.
+   * @default false — any number is accepted
+   */
+  integer?: boolean;
+  /**
+   * One line under the box saying what the number changes.
+   * @default undefined — the label says enough
+   */
+  help?: string;
+}
+
+/**
+ * One number of the settings.
+ *
+ * The box keeps what was typed rather than what parsed, because a reader
+ * halfway through `1e-` has typed something no number can hold yet; clearing it
+ * under them would make the field unusable. Nothing is handed up until the text
+ * reads as a number, and emptying the box hands up nothing at all — which is
+ * how a reader gets back to upstream's default after typing over it.
+ * @param props - See {@link NumberFieldProps}.
+ * @returns The labelled box.
+ */
+export function NumberField(props: NumberFieldProps): ReactElement {
+  const { label, value, placeholder, onChange, integer = false, help } = props;
+  const [draft, setDraft] = useState(() => ({
+    text: asText(value),
+    held: value,
+  }));
+
+  // The settings changed from somewhere else — a preset, a reset, a pasted
+  // configuration — so the box has to follow rather than hold the old text.
+  // `held` is what this box last handed up, not the prop it was rendered with:
+  // comparing against the prop would make the box's own edit look external and
+  // rewrite `-0.` as `0` under the caret before the reader reaches the digits.
+  if (draft.held !== value) setDraft({ text: asText(value), held: value });
+
+  return (
+    <label style={FIELD_STYLE}>
+      <span style={LABEL_STYLE}>{label}</span>
+      <InputGroup
+        size="small"
+        fill
+        inputMode={integer ? 'numeric' : 'decimal'}
+        value={draft.text}
+        placeholder={placeholder}
+        spellCheck={false}
+        autoComplete="off"
+        onValueChange={(text) => {
+          const parsed = read(text, integer);
+          const emptied = text.trim() === '';
+          setDraft({ text, held: emptied ? undefined : (parsed ?? value) });
+          if (emptied) {
+            onChange(undefined);
+          } else if (parsed !== undefined) {
+            onChange(parsed);
+          }
+        }}
+      />
+      {help === undefined ? null : <span style={HELP_STYLE}>{help}</span>}
+    </label>
+  );
+}
+
+/**
+ * The number as the box shows it.
+ * @param value - What the settings hold.
+ * @returns Its text, empty when nothing is held.
+ */
+function asText(value: number | undefined): string {
+  return value === undefined ? '' : String(value);
+}
+
+/**
+ * The text as a number, when it reads as one.
+ * @param text - What was typed.
+ * @param integer - Whether only whole numbers make sense.
+ * @returns The number, or undefined while the text is not one yet.
+ */
+function read(text: string, integer: boolean): number | undefined {
+  const trimmed = text.trim();
+  if (trimmed === '') return undefined;
+  const parsed = Number(trimmed);
+  if (!Number.isFinite(parsed)) return undefined;
+  if (integer && !Number.isInteger(parsed)) return undefined;
+  return parsed;
+}
+
+const FIELD_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 2,
+  minWidth: 120,
+  flex: '1 1 120px',
+} as const satisfies CSSProperties;
+
+const LABEL_STYLE = {
+  fontSize: 11,
+  fontWeight: 600,
+  color: 'var(--text-muted, #5b6875)',
+} as const satisfies CSSProperties;
+
+const HELP_STYLE = {
+  fontSize: 11,
+  color: 'var(--text-faint, #8a96a3)',
+} as const satisfies CSSProperties;

package/src/spectra/ui/PostProcessingEditor.tsx

@@ -0,0 +1,136 @@
+import type { CSSProperties, ReactElement } from 'react';
+
+import type { SettingsProblem } from '../core/problems.ts';
+import type { PostProcessingSettings } from '../core/settings.ts';
+
+import { CalculationRows } from './CalculationRows.tsx';
+import { MatrixFilterRows } from './MatrixFilterRows.tsx';
+import { ProblemList } from './ProblemList.tsx';
+import { RangeRows } from './RangeRows.tsx';
+import { ScaleFields } from './ScaleFields.tsx';
+import { SettingsPart } from './SettingsPart.tsx';
+import { SpectrumSelection } from './SpectrumSelection.tsx';
+import { problemsAbout } from './problemsAbout.ts';
+
+/** What {@link PostProcessingEditor} edits. */
+export interface PostProcessingEditorProps {
+  /** What `getPostProcessedData` would be handed. */
+  value: PostProcessingSettings;
+  /** Called with the edited settings on every change. */
+  onChange: (settings: PostProcessingSettings) => void;
+  /** Every problem the whole settings object has; each part picks its own. */
+  problems: readonly SettingsProblem[];
+  /**
+   * The ids the processor holds, so a spectrum is picked rather than typed.
+   * @default undefined — every spectrum is named by typing its id
+   */
+  spectrumIds?: readonly string[];
+}
+
+/**
+ * The stage that runs once every spectrum already shares one grid.
+ *
+ * Everything here works across spectra rather than along one, which is why it
+ * cannot be part of the chain: a matrix step reads the median of the whole
+ * dataset, a scaling reads one spectrum chosen as the reference, and a
+ * calculation reads the integrals of ranges measured on all of them.
+ * @param props - See {@link PostProcessingEditorProps}.
+ * @returns The selection, the matrix steps, the scaling, the ranges and the calculations.
+ */
+export function PostProcessingEditor(
+  props: PostProcessingEditorProps,
+): ReactElement {
+  const { value, onChange, problems, spectrumIds } = props;
+
+  return (
+    <div style={STAGE_STYLE}>
+      <SettingsPart
+        title="Spectra"
+        summary="Which of the loaded spectra this stage is run over."
+      >
+        <SpectrumSelection
+          value={value.ids}
+          spectrumIds={spectrumIds}
+          onChange={(ids) => {
+            onChange(withIds(value, ids));
+          }}
+        />
+      </SettingsPart>
+
+      <SettingsPart
+        title="Matrix steps"
+        summary="What the whole matrix goes through once every spectrum is a row of it."
+      >
+        <MatrixFilterRows
+          value={value.filters ?? []}
+          onChange={(filters) => {
+            onChange({ ...value, filters });
+          }}
+        />
+        <ProblemList problems={problemsAbout(problems, 'Matrix step')} />
+      </SettingsPart>
+
+      <SettingsPart
+        title="Scaling"
+        summary="What every spectrum is scaled against, so one dataset can be read as one."
+      >
+        <ScaleFields
+          value={value.scale ?? {}}
+          spectrumIds={spectrumIds}
+          onChange={(scale) => {
+            onChange({ ...value, scale });
+          }}
+        />
+        <ProblemList problems={problemsAbout(problems, 'Scaling')} />
+      </SettingsPart>
+
+      <SettingsPart
+        title="Ranges"
+        summary="The stretches of x integrated and reported for every spectrum."
+      >
+        <RangeRows
+          value={value.ranges ?? []}
+          onChange={(ranges) => {
+            onChange({ ...value, ranges });
+          }}
+        />
+        <ProblemList problems={problemsAbout(problems, 'Range')} />
+      </SettingsPart>
+
+      <SettingsPart
+        title="Calculations"
+        summary="Numbers worked out per spectrum from the range integrals."
+      >
+        <CalculationRows
+          value={value.calculations ?? []}
+          onChange={(calculations) => {
+            onChange({ ...value, calculations });
+          }}
+        />
+        <ProblemList problems={problemsAbout(problems, 'Calculation')} />
+      </SettingsPart>
+    </div>
+  );
+}
+
+/**
+ * The settings naming other spectra, or none at all.
+ * @param value - What `getPostProcessedData` would be handed.
+ * @param ids - The chosen ids, or undefined for every spectrum.
+ * @returns A new settings object, without the key at all when none is chosen.
+ */
+function withIds(
+  value: PostProcessingSettings,
+  ids: string[] | undefined,
+): PostProcessingSettings {
+  const next: PostProcessingSettings = { ...value };
+  if (ids === undefined) delete next.ids;
+  else next.ids = ids;
+  return next;
+}
+
+const STAGE_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 12,
+} as const satisfies CSSProperties;