react-cheminfo 0.9.0 → 0.10.0

package/src/spectra/ui/FilterChoiceControl.tsx

@@ -0,0 +1,153 @@
+import { HTMLSelect, InputGroup, Switch } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+
+import type { FilterField } from '../core/filterFields.ts';
+
+/** What {@link FilterChoiceControl} edits. */
+export interface FilterChoiceControlProps {
+  /** Which option of the step is edited, and how. */
+  field: FilterField;
+  /** What the step holds for it, whatever shape that turns out to be. */
+  value: unknown;
+  /** Called with the new value, or with undefined to go back to the default. */
+  onChange: (value: unknown) => void;
+}
+
+/**
+ * A chain step's option that is not a number: a switch, a choice, a formula.
+ *
+ * These three sit apart from the numbers because each carries its own idea of
+ * "not set" — an unticked switch is a value, an unpicked choice is not, and an
+ * empty formula is neither — and a single control trying to hold all three
+ * reads as a puzzle.
+ * @param props - See {@link FilterChoiceControlProps}.
+ * @returns The labelled control.
+ */
+export function FilterChoiceControl(
+  props: FilterChoiceControlProps,
+): ReactElement {
+  const { field, value, onChange } = props;
+
+  if (field.kind === 'boolean') {
+    return (
+      <div style={FIELD_STYLE}>
+        <Switch
+          checked={value === true}
+          label={field.label}
+          style={SWITCH_STYLE}
+          onChange={(event) => {
+            onChange(event.currentTarget.checked);
+          }}
+        />
+        {field.help === undefined ? null : (
+          <span style={HELP_STYLE}>{field.help}</span>
+        )}
+      </div>
+    );
+  }
+
+  if (field.kind === 'enum') {
+    return (
+      <label style={FIELD_STYLE}>
+        <span style={LABEL_STYLE}>{field.label}</span>
+        <HTMLSelect
+          fill
+          value={typeof value === 'string' ? value : ''}
+          onChange={(event) => {
+            const chosen = event.currentTarget.value;
+            onChange(chosen === '' ? undefined : chosen);
+          }}
+        >
+          <option value="">Default</option>
+          {(field.choices ?? []).map((choice) => (
+            <option key={choice.value} value={choice.value}>
+              {choice.label}
+            </option>
+          ))}
+        </HTMLSelect>
+        {field.help === undefined ? null : (
+          <span style={HELP_STYLE}>{field.help}</span>
+        )}
+      </label>
+    );
+  }
+
+  if (field.kind === 'formula') {
+    return (
+      <label style={FORMULA_FIELD_STYLE}>
+        <span style={LABEL_STYLE}>{field.label}</span>
+        <InputGroup
+          size="small"
+          fill
+          style={MONOSPACE_STYLE}
+          value={typeof value === 'string' ? value : ''}
+          spellCheck={false}
+          autoCapitalize="off"
+          autoCorrect="off"
+          autoComplete="off"
+          onValueChange={(text) => {
+            onChange(text === '' ? undefined : text);
+          }}
+        />
+        {field.help === undefined ? null : (
+          <span style={HELP_STYLE}>{field.help}</span>
+        )}
+      </label>
+    );
+  }
+
+  return (
+    <label style={FIELD_STYLE}>
+      <span style={LABEL_STYLE}>{field.label}</span>
+      <InputGroup
+        size="small"
+        fill
+        value={typeof value === 'string' ? value : ''}
+        spellCheck={false}
+        autoComplete="off"
+        onValueChange={(text) => {
+          onChange(text === '' ? undefined : text);
+        }}
+      />
+      {field.help === undefined ? null : (
+        <span style={HELP_STYLE}>{field.help}</span>
+      )}
+    </label>
+  );
+}
+
+const FIELD_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 2,
+  minWidth: 120,
+  flex: '1 1 120px',
+} as const satisfies CSSProperties;
+
+const FORMULA_FIELD_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 2,
+  minWidth: 220,
+  flex: '1 1 220px',
+} 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;
+
+const SWITCH_STYLE = {
+  margin: 0,
+  fontSize: 12,
+} as const satisfies CSSProperties;
+
+const MONOSPACE_STYLE = {
+  fontFamily: 'monospace',
+} as const satisfies CSSProperties;

package/src/spectra/ui/FilterFieldControl.tsx

@@ -0,0 +1,105 @@
+import type { ReactElement } from 'react';
+
+import { readFilterOption, setFilterOption } from '../core/filterChain.ts';
+import type { FilterField } from '../core/filterFields.ts';
+import type { SpectrumFilter } from '../core/settings.ts';
+
+import { FilterChoiceControl } from './FilterChoiceControl.tsx';
+import { NumberField } from './NumberField.tsx';
+import type { Zone } from './ZoneRows.tsx';
+import { ZoneRows } from './ZoneRows.tsx';
+
+/** What {@link FilterFieldControl} edits. */
+export interface FilterFieldControlProps {
+  /** Which option of the step is edited, and how. */
+  field: FilterField;
+  /** The step the option sits in. */
+  filter: SpectrumFilter;
+  /** Called with the step carrying the new value. */
+  onChange: (filter: SpectrumFilter) => void;
+}
+
+/**
+ * One option of one chain step, drawn as whatever its kind asks for.
+ *
+ * A step's options are the only thing that says what it will do to the data, so
+ * they are drawn open rather than behind a disclosure: a chain read with them
+ * folded away is a list of names. Emptying a control writes nothing at all
+ * rather than a blank value, which is the only way back to upstream's own
+ * default once a reader has typed over it.
+ * @param props - See {@link FilterFieldControlProps}.
+ * @returns The labelled control.
+ */
+export function FilterFieldControl(
+  props: FilterFieldControlProps,
+): ReactElement {
+  const { field, filter, onChange } = props;
+  const value = readFilterOption(filter, field.key);
+
+  function write(next: unknown): void {
+    onChange(setFilterOption(filter, field.key, next));
+  }
+
+  if (field.kind === 'zones') {
+    return (
+      <ZoneRows
+        label={field.label}
+        value={asZones(value)}
+        help={field.help}
+        onChange={(zones) => {
+          write(zones.length === 0 ? undefined : zones);
+        }}
+      />
+    );
+  }
+
+  if (field.kind !== 'integer' && field.kind !== 'number') {
+    return <FilterChoiceControl field={field} value={value} onChange={write} />;
+  }
+
+  return (
+    <NumberField
+      label={field.label}
+      value={typeof value === 'number' ? value : undefined}
+      placeholder={field.placeholder}
+      help={field.help}
+      integer={field.kind === 'integer'}
+      onChange={write}
+    />
+  );
+}
+
+/**
+ * The value read back as a list of x stretches.
+ *
+ * The settings are a plain object a reader may have pasted in, so anything that
+ * is not a list of bounded zones is read as no zones at all rather than handed
+ * to a control that would then show `NaN`.
+ * @param value - What the step holds under the field's key.
+ * @returns The zones, empty when the value is not a list of them.
+ */
+function asZones(value: unknown): Zone[] {
+  const held: readonly unknown[] = Array.isArray(value) ? value : [];
+  return held.filter(isZone);
+}
+
+/**
+ * Whether a value is one x stretch.
+ * @param value - One entry of the list.
+ * @returns True when both bounds are numbers or absent.
+ */
+function isZone(value: unknown): value is Zone {
+  if (typeof value !== 'object' || value === null) return false;
+  if ('from' in value && !isBound(value.from)) return false;
+  if ('to' in value && !isBound(value.to)) return false;
+  return true;
+}
+
+/**
+ * Whether a bound is one a number box can show.
+ * @param value - What the zone holds.
+ * @returns True when it is a number or nothing.
+ */
+function isBound(value: unknown): boolean {
+  return value === undefined || typeof value === 'number';
+}

package/src/spectra/ui/FilterRow.tsx

@@ -0,0 +1,190 @@
+import { Button, Callout, Tag } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+
+import { findFilterEntry } from '../core/filterCatalog.ts';
+import type { FilterCatalogEntry } from '../core/filterEntries.ts';
+import type { SettingsProblem } from '../core/problems.ts';
+import type { SpectrumFilter } from '../core/settings.ts';
+
+import { FilterFieldControl } from './FilterFieldControl.tsx';
+
+/** What {@link FilterRow} draws and edits. */
+export interface FilterRowProps {
+  /** The step, as the settings hold it. */
+  filter: SpectrumFilter;
+  /** Where it sits in the chain, counted from zero. */
+  position: number;
+  /** How many steps the chain holds, so the end moves can be refused. */
+  count: number;
+  /** This step's problems, already picked out of the chain's. */
+  problems: readonly SettingsProblem[];
+  /** Called with the step carrying its new options. */
+  onChange: (filter: SpectrumFilter) => void;
+  /** Called with how far to move the step, negative towards the start. */
+  onMove: (offset: number) => void;
+  /** Called to repeat the step just after itself. */
+  onDuplicate: () => void;
+  /** Called to drop the step. */
+  onRemove: () => void;
+}
+
+/**
+ * One step of the chain: what it does, what it is set to, and what is wrong.
+ *
+ * The number in front of the name is the whole point of the row — a chain means
+ * nothing but the order it runs in, so the position, the two moves and the
+ * step's own advice sit together where a reader can act on all three at once.
+ * @param props - See {@link FilterRowProps}.
+ * @returns The step's card.
+ */
+export function FilterRow(props: FilterRowProps): ReactElement {
+  const {
+    filter,
+    position,
+    count,
+    problems,
+    onChange,
+    onMove,
+    onDuplicate,
+    onRemove,
+  } = props;
+  const entry = findFilterEntry(filter.name) ?? unknownEntry(filter.name);
+
+  return (
+    <div style={ROW_STYLE}>
+      <div style={HEADER_STYLE}>
+        <Tag minimal round>
+          {String(position + 1)}
+        </Tag>
+        <span style={TITLE_STYLE}>{entry.label}</span>
+        <span style={SPACER_STYLE} />
+        <Button
+          icon="arrow-up"
+          variant="minimal"
+          size="small"
+          disabled={position === 0}
+          aria-label={`Move ${entry.label} up`}
+          onClick={() => {
+            onMove(-1);
+          }}
+        />
+        <Button
+          icon="arrow-down"
+          variant="minimal"
+          size="small"
+          disabled={position === count - 1}
+          aria-label={`Move ${entry.label} down`}
+          onClick={() => {
+            onMove(1);
+          }}
+        />
+        <Button
+          icon="duplicate"
+          variant="minimal"
+          size="small"
+          aria-label={`Repeat ${entry.label}`}
+          onClick={onDuplicate}
+        />
+        <Button
+          icon="cross"
+          variant="minimal"
+          size="small"
+          aria-label={`Remove ${entry.label}`}
+          onClick={onRemove}
+        />
+      </div>
+      <span style={SUMMARY_STYLE}>{entry.summary}</span>
+      {entry.fixed === undefined ? null : (
+        <span style={FIXED_STYLE}>{`Fixed upstream: ${entry.fixed}`}</span>
+      )}
+      {entry.caution === undefined ? null : (
+        <Callout intent="warning" compact>
+          {entry.caution}
+        </Callout>
+      )}
+      {entry.fields.length === 0 ? null : (
+        <div style={FIELDS_STYLE}>
+          {entry.fields.map((field) => (
+            <FilterFieldControl
+              key={field.key}
+              field={field}
+              filter={filter}
+              onChange={onChange}
+            />
+          ))}
+        </div>
+      )}
+      {problems.map((issue) => (
+        <Callout
+          key={issue.message}
+          intent={issue.severity === 'error' ? 'danger' : 'warning'}
+          compact
+        >
+          {issue.message}
+        </Callout>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * What a row shows for a step the catalog does not describe.
+ *
+ * A chain can carry a name this editor has never heard of — the settings the
+ * processor takes are typed `{ name: string }` — and a row naming it beats a
+ * page that will not render.
+ * @param name - The step's name, as the settings hold it.
+ * @returns An entry with the name for a label and nothing to edit.
+ */
+function unknownEntry(name: string): FilterCatalogEntry {
+  return {
+    label: name,
+    group: 'utility',
+    summary:
+      'This editor does not know this step, so its options are left as they are.',
+    fields: [],
+  };
+}
+
+const ROW_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 6,
+  padding: 10,
+  border: '1px solid var(--border, #d7dde4)',
+  borderRadius: 'var(--radius, 6px)',
+  background: 'var(--surface-raised, #ffffff)',
+} as const satisfies CSSProperties;
+
+const HEADER_STYLE = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 6,
+} as const satisfies CSSProperties;
+
+const TITLE_STYLE = {
+  fontSize: 13,
+  fontWeight: 600,
+  color: 'var(--text, #1c2127)',
+} as const satisfies CSSProperties;
+
+const SPACER_STYLE = {
+  flex: '1 1 auto',
+} as const satisfies CSSProperties;
+
+const SUMMARY_STYLE = {
+  fontSize: 12,
+  color: 'var(--text-muted, #5b6875)',
+} as const satisfies CSSProperties;
+
+const FIXED_STYLE = {
+  fontSize: 11,
+  color: 'var(--text-faint, #8a96a3)',
+} as const satisfies CSSProperties;
+
+const FIELDS_STYLE = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'flex-start',
+  gap: 10,
+} as const satisfies CSSProperties;

package/src/spectra/ui/MatrixFilterRows.tsx

@@ -0,0 +1,184 @@
+import { Button, HTMLSelect } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+import { useState } from 'react';
+
+import type { MatrixFilter } from '../core/settings.ts';
+
+import { NumberField } from './NumberField.tsx';
+import {
+  MATRIX_ADD_OPTIONS,
+  matrixStep,
+  readMatrixOption,
+  writeMatrixOption,
+} from './matrixSteps.ts';
+import { fitKeys, nextKey, reorder } from './rowKeys.ts';
+
+/** What {@link MatrixFilterRows} edits. */
+export interface MatrixFilterRowsProps {
+  /** The steps, in the order the matrix goes through them. */
+  value: readonly MatrixFilter[];
+  /** Called with the new list on every edit. */
+  onChange: (filters: MatrixFilter[]) => void;
+}
+
+/**
+ * The steps that work across spectra rather than along one.
+ *
+ * The processor's own switch knows exactly three names and throws on a fourth,
+ * so the menu offers those three and nothing else — a name typed by hand is the
+ * one way this stage fails, and there is no reason to leave that door open.
+ * Order matters here as much as in the chain: centring a matrix that is about
+ * to be rescaled is not the same as rescaling a centred one.
+ * @param props - See {@link MatrixFilterRowsProps}.
+ * @returns The ordered list and the menu that adds to it.
+ */
+export function MatrixFilterRows(props: MatrixFilterRowsProps): 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 move(index: number, offset: number): void {
+    const target = index + offset;
+    if (target < 0 || target >= value.length) return;
+    onChange(reorder(value, index, target));
+    setRowKeys(reorder(rowKeys, index, target));
+  }
+
+  return (
+    <div style={LIST_STYLE}>
+      {value.length === 0 ? (
+        <span style={EMPTY_STYLE}>
+          None — the matrix is handed on as the chain left it.
+        </span>
+      ) : null}
+      {value.map((step, index) => {
+        const known = matrixStep(step.name);
+        return (
+          <div key={rowKeys[index] ?? index} style={ROW_STYLE}>
+            <div style={HEADER_STYLE}>
+              <span style={NAME_STYLE}>
+                {known?.label ?? String(step.name)}
+              </span>
+              <Button
+                icon="arrow-up"
+                variant="minimal"
+                size="small"
+                disabled={index === 0}
+                aria-label={`Move matrix step ${String(index + 1)} up`}
+                onClick={() => {
+                  move(index, -1);
+                }}
+              />
+              <Button
+                icon="arrow-down"
+                variant="minimal"
+                size="small"
+                disabled={index === value.length - 1}
+                aria-label={`Move matrix step ${String(index + 1)} down`}
+                onClick={() => {
+                  move(index, 1);
+                }}
+              />
+              <Button
+                icon="cross"
+                variant="minimal"
+                size="small"
+                aria-label={`Remove matrix step ${String(index + 1)}`}
+                onClick={() => {
+                  setRowKeys(rowKeys.filter((_, at) => at !== index));
+                  onChange(value.filter((_, at) => at !== index));
+                }}
+              />
+            </div>
+            {known === undefined ? null : (
+              <span style={SUMMARY_STYLE}>{known.summary}</span>
+            )}
+            {known === undefined || known.fields.length === 0 ? null : (
+              <div style={FIELDS_STYLE}>
+                {known.fields.map((field) => (
+                  <NumberField
+                    key={field.key}
+                    label={field.label}
+                    value={readMatrixOption(step, field.key)}
+                    placeholder={field.placeholder}
+                    onChange={(option) => {
+                      onChange(
+                        value.map((held, at) =>
+                          at === index
+                            ? writeMatrixOption(held, field.key, option)
+                            : held,
+                        ),
+                      );
+                    }}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        );
+      })}
+      <HTMLSelect
+        aria-label="Add a matrix step"
+        value=""
+        options={MATRIX_ADD_OPTIONS}
+        onChange={(event) => {
+          const name = event.currentTarget.value;
+          if (name === '') return;
+          setRowKeys([...rowKeys, nextKey(rowKeys)]);
+          onChange([...value, { name }]);
+        }}
+      />
+    </div>
+  );
+}
+
+const LIST_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8,
+  alignItems: 'flex-start',
+} as const satisfies CSSProperties;
+
+const ROW_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
+  alignSelf: 'stretch',
+  padding: 8,
+  borderRadius: 'var(--radius, 6px)',
+  background: 'var(--surface-sunken, #f4f6f8)',
+} as const satisfies CSSProperties;
+
+const HEADER_STYLE = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 4,
+} as const satisfies CSSProperties;
+
+const NAME_STYLE = {
+  flex: 1,
+  fontSize: 12,
+  fontWeight: 600,
+  color: 'var(--text, #1c2127)',
+} as const satisfies CSSProperties;
+
+const SUMMARY_STYLE = {
+  fontSize: 11,
+  color: 'var(--text-faint, #8a96a3)',
+} as const satisfies CSSProperties;
+
+const FIELDS_STYLE = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: 8,
+} as const satisfies CSSProperties;
+
+const EMPTY_STYLE = {
+  fontSize: 12,
+  color: 'var(--text-faint, #8a96a3)',
+} as const satisfies CSSProperties;