react-cheminfo 0.69.0 → 0.71.0

package/src/mass/ui/MassStateProvider.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+
+import { massActionsContext, massStateContext } from './massStateContext.ts';
+import type { MassEditorApi } from './useMassEditor.ts';
+
+export interface MassStateProviderProps {
+  /** The viewer's state, as `useMassEditor` holds it. */
+  editor: MassEditorApi;
+  /** The viewer. */
+  children: ReactNode;
+}
+
+/**
+ * Put one viewer's state where its panels can reach it.
+ *
+ * The state and the actions go into separate contexts on purpose — see
+ * `massStateContext.ts` for why — and the actions are handed over as they are,
+ * since `useMassEditor` already keeps them stable for the life of the viewer.
+ * @param props - Component props.
+ * @returns The provider.
+ */
+export function MassStateProvider(props: MassStateProviderProps) {
+  const { editor, children } = props;
+
+  return (
+    <massStateContext.Provider value={editor}>
+      <massActionsContext.Provider value={editor.actions}>
+        {children}
+      </massActionsContext.Provider>
+    </massStateContext.Provider>
+  );
+}

package/src/mass/ui/MassStatusBar.tsx

@@ -0,0 +1,108 @@
+import { Icon } from '@blueprintjs/core';
+
+import {
+  countLabel,
+  statusBarStyle as barStyle,
+  statusItemStyle as itemStyle,
+  statusMutedStyle as mutedStyle,
+  statusSpacerStyle as spacerStyle,
+} from '../../panel/core/statusBar.ts';
+import {
+  formatMzRange,
+  resolutionLabel,
+  resolvingPowerLabel,
+} from '../core/massFormat.ts';
+import { resolutionOf } from '../core/resolutionOf.ts';
+
+import { useMassEditorState } from './massStateContext.ts';
+
+/**
+ * The one line under the chart: what is drawn, what it resolves, what went
+ * wrong.
+ *
+ * Everything in it is derived, so it is the cheapest place in the viewer to
+ * answer "did that work" — how many spectra are drawn of those open, how many
+ * peaks the selected one holds and between which masses, and whether it is a
+ * high-resolution spectrum, with the resolving power where one was measured.
+ *
+ * The refusal is last and is the only red in the shell, so the eye that has just
+ * dropped something and seen nothing happen lands on the reason.
+ * @returns The status bar.
+ */
+export function MassStatusBar() {
+  const { state, visibleSpectra, selectedSpectrum, mzDecimals } =
+    useMassEditorState();
+  const { spectra } = state.data;
+  const { error, tool } = state.view;
+
+  const resolution =
+    selectedSpectrum === null ? null : resolutionOf(selectedSpectrum);
+  const range =
+    selectedSpectrum === null
+      ? ''
+      : formatMzRange(selectedSpectrum.centroid.x, mzDecimals);
+
+  return (
+    <div style={barStyle}>
+      <span style={itemStyle}>
+        {spectra.length === 0
+          ? 'no spectrum open — drop a JCAMP-DX or a text file on the chart'
+          : `${countLabel(visibleSpectra.length, 'spectrum', 'spectra')} drawn of ${spectra.length}`}
+      </span>
+
+      {selectedSpectrum === null ? null : (
+        <span style={nameStyle} title={selectedSpectrum.name}>
+          {selectedSpectrum.name}
+        </span>
+      )}
+
+      {resolution === null ? null : (
+        <span style={itemStyle}>
+          {resolutionLabel(resolution)}
+          {resolution.resolvingPower === null
+            ? null
+            : ` (${resolvingPowerLabel(resolution.resolvingPower)})`}
+        </span>
+      )}
+
+      {selectedSpectrum === null ? null : (
+        <span style={itemStyle}>
+          {countLabel(selectedSpectrum.centroid.x.length, 'peak', 'peaks')}
+        </span>
+      )}
+
+      {range === '' ? null : <span style={mutedStyle}>m/z {range}</span>}
+
+      {tool === 'box' ? (
+        <span style={mutedStyle}>square zoom: drag a rectangle</span>
+      ) : null}
+
+      <span style={spacerStyle} />
+
+      {error === null ? null : (
+        <span style={errorStyle} title={error}>
+          <Icon icon="warning-sign" size={12} />
+          {error}
+        </span>
+      )}
+    </div>
+  );
+}
+
+const nameStyle = {
+  ...itemStyle,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  maxWidth: '32%',
+  fontWeight: 600,
+} as const;
+
+/** The one red in the shell: a refusal, and nothing else, is written in it. */
+const errorStyle = {
+  ...itemStyle,
+  gap: 4,
+  color: '#C0392B',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  maxWidth: '60%',
+} as const;

package/src/mass/ui/MassToolbar.tsx

@@ -0,0 +1,120 @@
+import { Toolbar } from 'react-science/ui';
+
+import type { FigureDownloadState } from '../../download/ui/useFigureDownload.tsx';
+
+import { useMassCommandProps } from './massCommandContext.tsx';
+import { useMassEditorState } from './massStateContext.ts';
+
+/** What {@link MassToolbar} needs. */
+export interface MassToolbarProps {
+  /**
+   * The "Save figure" panel the picture button opens.
+   * @default undefined — the button only runs the `exportImage` command
+   */
+  figure?: FigureDownloadState;
+}
+
+/**
+ * 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. Opening files comes first,
+ * because nothing else does anything until a spectrum is open; then the
+ * **tools**, read and square zoom, which say what a drag is running; then the
+ * zoom commands that act at once; then what the chart writes over the peaks.
+ * Closing every spectrum is last and alone, being the only one that throws
+ * something away.
+ * @param props - Component props.
+ * @returns The toolbar.
+ */
+export function MassToolbar(props: MassToolbarProps) {
+  const { figure } = props;
+  const { state, selectedSpectrum } = useMassEditorState();
+  const command = useMassCommandProps();
+  const { spectra } = state.data;
+  const { domain, tool } = state.view;
+  const { showLabels, showCharges } = state.settings;
+
+  const isEmpty = spectra.length === 0;
+  // The popover opens the panel itself, so the command's own click is left out.
+  const exportCommand = command('exportImage');
+
+  return (
+    // `collapse`, not the default `wrap`: a wrapping vertical toolbar measures
+    // itself and writes the result back as an inline width, so in a row short of
+    // space it settles at half an icon and stays there.
+    <Toolbar vertical overflow="collapse" aria-label="Mass spectrum tools">
+      <Toolbar.Item icon="folder-open" {...command('openFiles')} />
+
+      <Toolbar.Item
+        icon="arrows-horizontal"
+        active={tool === 'read'}
+        {...command('readTool')}
+        disabled={isEmpty}
+      />
+      <Toolbar.Item
+        icon="select"
+        active={tool === 'box'}
+        {...command('boxTool')}
+        disabled={isEmpty}
+      />
+
+      <Toolbar.Item icon="zoom-in" {...command('zoomIn')} disabled={isEmpty} />
+      <Toolbar.Item
+        icon="zoom-out"
+        {...command('zoomOut')}
+        disabled={isEmpty}
+      />
+      <Toolbar.Item
+        icon="zoom-to-fit"
+        {...command('resetZoom')}
+        disabled={domain === null}
+      />
+
+      <Toolbar.Item
+        icon="label"
+        active={showLabels}
+        {...command('toggleLabels')}
+        disabled={selectedSpectrum === null}
+      />
+      <Toolbar.Item
+        icon="numerical"
+        active={showCharges}
+        {...command('toggleCharges')}
+        disabled={!showLabels || selectedSpectrum === null}
+      />
+
+      {/* What the chart looks like right now is what a figure is of — the
+          window it was dragged to and the labels written over its peaks — so
+          the picture is taken here rather than rebuilt from the spectra. */}
+      {figure === undefined ? (
+        <Toolbar.Item
+          icon="media"
+          {...command('exportImage')}
+          disabled={isEmpty}
+        />
+      ) : (
+        <Toolbar.PopoverItem
+          isOpen={figure.isOpen}
+          onInteraction={figure.setOpen}
+          content={figure.panel}
+          disabled={isEmpty}
+          itemProps={{
+            icon: 'media',
+            tooltip: exportCommand.tooltip,
+            'aria-label': exportCommand['aria-label'],
+            active: figure.isOpen,
+            disabled: isEmpty,
+          }}
+        />
+      )}
+
+      <Toolbar.Item
+        icon="trash"
+        intent="danger"
+        {...command('clear')}
+        disabled={isEmpty}
+      />
+    </Toolbar>
+  );
+}

package/src/mass/ui/MetadataPanel.tsx

@@ -0,0 +1,201 @@
+import { useMemo, useState } from 'react';
+import { MF } from 'react-mf';
+import { Toolbar } from 'react-science/ui';
+
+import {
+  labelStyle,
+  panelBodyStyle,
+  panelEmptyStyle,
+  panelStyle,
+  panelToolbarStyle,
+} from '../../panel/core/panelStyles.ts';
+import type { MassSpectrum } from '../core/massSpectrum.ts';
+import {
+  spectrumMetaRows,
+  spectrumResolutionRows,
+} from '../core/massSummary.ts';
+
+import { useMassEditorState } from './massStateContext.ts';
+
+/**
+ * The acquisition panel of the viewer, about whichever spectrum is selected.
+ * @returns The panel.
+ */
+export function MetadataPanel() {
+  const { selectedSpectrum, mzDecimals } = useMassEditorState();
+  return <MassMetadata spectrum={selectedSpectrum} mzDecimals={mzDecimals} />;
+}
+
+export interface MassMetadataProps {
+  /** The spectrum the panel is about, `null` when none is selected. */
+  spectrum: MassSpectrum | null;
+  /**
+   * How many decimals its masses are written with.
+   * @default 4
+   */
+  mzDecimals?: number;
+}
+
+/**
+ * How a spectrum was acquired, as the file stated it, and what the viewer
+ * found out about it — for any viewer, whatever state it keeps the spectrum in.
+ *
+ * Every row the file wrote is a fact it actually wrote: the reader leaves out
+ * whatever was blank rather than showing it as a dash, so a short table means a
+ * terse file and not a bug. The order is the reader's — source, instrument,
+ * analyser, ionization, polarity, energy, and on down to who ran it — because
+ * that is the order a method is read in. A file that wrote nothing gets the
+ * facts true of every spectrum instead, a pasted one included: which file and
+ * format it came from, how many peaks it holds and between which masses.
+ *
+ * Under either comes whether it is a high-resolution measurement, with how that
+ * was decided, since a verdict read off the decimals of a peak table is a
+ * weaker claim than one measured on the widths of its peaks.
+ * @param props - Component props.
+ * @returns The panel.
+ */
+export function MassMetadata(props: MassMetadataProps) {
+  const { spectrum: selectedSpectrum, mzDecimals } = props;
+  const [showConditions, setShowConditions] = useState(false);
+
+  const meta = selectedSpectrum?.meta ?? null;
+  const conditions = meta?.conditions ?? null;
+  const title = meta?.title ?? null;
+  const molecularFormula = meta?.molecularFormula ?? null;
+
+  // The whole viewer re-renders on every drag of the chart, and the rows only
+  // change when the selected spectrum does.
+  const rows = useMemo(
+    () =>
+      selectedSpectrum === null
+        ? []
+        : [
+            ...spectrumMetaRows(selectedSpectrum, mzDecimals),
+            ...spectrumResolutionRows(selectedSpectrum),
+          ],
+    [selectedSpectrum, mzDecimals],
+  );
+
+  return (
+    <div style={panelStyle}>
+      <div style={panelToolbarStyle}>
+        <Toolbar aria-label="Acquisition">
+          <Toolbar.Item
+            icon="align-left"
+            active={showConditions}
+            disabled={conditions === null}
+            tooltip={
+              conditions === null
+                ? 'This file carried no scan description of its own'
+                : "Show the instrument's own scan description, as it was written"
+            }
+            aria-label="Show the scan description"
+            onClick={() => setShowConditions(!showConditions)}
+          />
+        </Toolbar>
+      </div>
+
+      <div style={panelBodyStyle}>
+        {selectedSpectrum === null ? (
+          <p style={panelEmptyStyle}>
+            No spectrum is selected. Click one in the Spectra panel and what its
+            file said about the acquisition appears here.
+          </p>
+        ) : (
+          <>
+            {title === null ? null : <div style={titleStyle}>{title}</div>}
+            {meta === null ? (
+              <p style={panelEmptyStyle}>
+                This file carried no acquisition metadata, so this is what the
+                viewer knows about it.
+              </p>
+            ) : null}
+            <table style={tableStyle}>
+              <tbody>
+                {molecularFormula === null ? null : (
+                  <tr>
+                    <th scope="row" style={rowLabelStyle}>
+                      Formula
+                    </th>
+                    <td style={rowValueStyle}>
+                      {/* Never the raw string: `C8H10N4O2` is only a formula
+                          once its digits are subscripts. */}
+                      <MF mf={molecularFormula} />
+                    </td>
+                  </tr>
+                )}
+                {rows.map((row) => (
+                  <tr key={row.label}>
+                    <th scope="row" style={rowLabelStyle}>
+                      {row.label}
+                    </th>
+                    <td style={rowValueStyle}>{row.value}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+
+            {conditions === null || !showConditions ? null : (
+              <div>
+                <div style={labelStyle}>Scan description</div>
+                <pre style={conditionsStyle}>{conditions}</pre>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** What the file calls the spectrum, which is rarely what the list calls it. */
+const titleStyle = {
+  fontSize: 12,
+  fontWeight: 600,
+  lineHeight: 1.3,
+  wordBreak: 'break-word',
+} as const;
+
+const tableStyle = {
+  width: '100%',
+  fontSize: 12,
+  borderCollapse: 'collapse',
+} as const;
+
+/**
+ * The label column is as narrow as it can be and the value takes the rest: the
+ * labels are short and known, and it is the values a file surprises you with.
+ */
+const rowLabelStyle = {
+  width: '1%',
+  padding: '2px 8px 2px 0',
+  textAlign: 'left',
+  fontWeight: 600,
+  whiteSpace: 'nowrap',
+  verticalAlign: 'top',
+  opacity: 0.7,
+} as const;
+
+const rowValueStyle = {
+  padding: '2px 0',
+  verticalAlign: 'top',
+  wordBreak: 'break-word',
+} as const;
+
+/**
+ * Kept verbatim, wrapping rather than scrolling sideways: a Thermo scan filter
+ * is one long line that says more about the acquisition than the structured
+ * records do, and half of it off the edge of a panel is half a method.
+ */
+const conditionsStyle = {
+  margin: 0,
+  padding: 6,
+  borderRadius: 3,
+  background: 'rgba(17, 20, 24, 0.06)',
+  fontFamily: 'monospace',
+  fontSize: 11,
+  lineHeight: 1.35,
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-word',
+  userSelect: 'all',
+} as const;

package/src/mass/ui/MzDecimalsMenu.tsx

@@ -0,0 +1,86 @@
+import { Menu, MenuItem } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+import { Toolbar } from 'react-science/ui';
+
+import type { MzDecimalsSetting } from '../core/mzDecimalsSetting.ts';
+import { MAXIMUM_MZ_DECIMALS } from '../core/mzDecimalsSetting.ts';
+
+export interface MzDecimalsMenuProps {
+  /** What is chosen, `'auto'` while nothing is. */
+  setting: MzDecimalsSetting;
+  /**
+   * How many decimals `'auto'` comes to for the spectra in view, which the
+   * entry for it says, so choosing nothing is not a choice made blind.
+   */
+  autoDecimals: number;
+  /** Called with what was picked. */
+  onChange: (setting: MzDecimalsSetting) => void;
+}
+
+/**
+ * How many decimals the masses are written with, picked from a panel toolbar.
+ *
+ * The first entry leaves it to the spectra — high-resolution masses or nominal
+ * ones, as each spectrum's resolution says — and the rest fix a number for
+ * every mass on screen at once: chart, crosshair, tables. A list rather than a
+ * stepper, because the useful answers are few and a reader picking one wants
+ * to see them side by side; the button is lit while a number overrides the
+ * spectra, so a chart written to fewer decimals than it resolves never looks
+ * like one that resolves no more.
+ * @param props - Component props.
+ * @returns The toolbar item and its menu.
+ */
+export function MzDecimalsMenu(props: MzDecimalsMenuProps): ReactElement {
+  const { setting, autoDecimals, onChange } = props;
+
+  return (
+    <Toolbar.PopoverItem
+      itemProps={{
+        icon: 'floating-point',
+        tooltip: LABEL,
+        'aria-label': LABEL,
+        active: setting !== 'auto',
+      }}
+      content={
+        <Menu aria-label={LABEL}>
+          <MenuItem
+            roleStructure="listoption"
+            selected={setting === 'auto'}
+            text={`Automatic — by resolution (now ${decimalsText(autoDecimals)})`}
+            onClick={() => onChange('auto')}
+          />
+          {CHOICES.map((decimals) => (
+            <MenuItem
+              key={decimals}
+              roleStructure="listoption"
+              selected={setting === decimals}
+              text={
+                decimals === 0
+                  ? 'Nominal mass (0 decimals)'
+                  : decimalsText(decimals)
+              }
+              onClick={() => onChange(decimals)}
+            />
+          ))}
+        </Menu>
+      }
+    />
+  );
+}
+
+const LABEL = 'Decimals of the masses';
+
+/** Every number that can be chosen, from the nominal mass up. */
+const CHOICES = Array.from(
+  { length: MAXIMUM_MZ_DECIMALS + 1 },
+  (_, decimals) => decimals,
+);
+
+/**
+ * A number of decimals, as the menu says it.
+ * @param decimals - How many.
+ * @returns `1 decimal`, or `n decimals`.
+ */
+function decimalsText(decimals: number): string {
+  return decimals === 1 ? '1 decimal' : `${decimals} decimals`;
+}