react-cheminfo 0.73.0 → 0.75.0

package/src/structure/ui/StructureSearchDialog.tsx

@@ -0,0 +1,218 @@
+/**
+ * The dialog a structure search is drawn in, shared by every site that
+ * filters a collection by structure.
+ *
+ * This file stays free of `openchemlib`: the editor loads it behind its own
+ * `React.lazy`, and an example is read only once it is clicked.
+ */
+
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  HTMLSelect,
+} from '@blueprintjs/core';
+import type { ReactElement, ReactNode } from 'react';
+import { useState } from 'react';
+
+import { formatPercent } from '../../format/core/numbers.ts';
+import type { ChromeKey } from '../../i18n/core/chromeCatalog.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import { isEmptyIdCode } from '../core/editorValue.ts';
+import type {
+  StructureSearchExample,
+  StructureSearchMode,
+  StructureSearchQuery,
+} from '../core/structureSearch.ts';
+import {
+  STRUCTURE_SEARCH_MODES,
+  similarityThresholds,
+} from '../core/structureSearch.ts';
+
+import { StructureEditor } from './StructureEditor.tsx';
+import { useStructureDraft } from './useStructureDraft.ts';
+import { useStructureSearchModes } from './useStructureSearchModes.ts';
+
+/** What {@link StructureSearchDialog} needs. */
+export interface StructureSearchDialogProps {
+  /** Whether the dialog is on screen. */
+  isOpen: boolean;
+  /** The question the dialog opens on; its drawing is loaded into the canvas. */
+  value: StructureSearchQuery;
+  /**
+   * Called when the dialog closes — by Apply, by Escape or by its × alike —
+   * with what it then holds, so no drawing is lost to a stray Escape. The
+   * idCode is empty when the canvas was cleared.
+   */
+  onClose: (query: StructureSearchQuery) => void;
+  /**
+   * The modes offered, in order.
+   * @default STRUCTURE_SEARCH_MODES
+   */
+  modes?: readonly StructureSearchMode[];
+  /**
+   * The fragments offered under the canvas.
+   * @default benzene, pyridine, amide, sulfonamide and trifluoromethyl
+   */
+  examples?: readonly StructureSearchExample[];
+  /**
+   * More controls beside the similarity threshold, such as the fingerprint a
+   * site compares.
+   * @default undefined
+   */
+  similarityControls?: ReactNode;
+  /**
+   * Whether the dialog is rendered through a portal on `document.body`.
+   * @default true
+   */
+  usePortal?: boolean;
+}
+
+const DEFAULT_EXAMPLES: ReadonlyArray<{ key: ChromeKey; smiles: string }> = [
+  { key: 'structure.search.exampleBenzene', smiles: 'c1ccccc1' },
+  { key: 'structure.search.examplePyridine', smiles: 'c1ccncc1' },
+  { key: 'structure.search.exampleAmide', smiles: 'CC(=O)N' },
+  { key: 'structure.search.exampleSulfonamide', smiles: 'S(=O)(=O)N' },
+  { key: 'structure.search.exampleTrifluoromethyl', smiles: 'FC(F)F' },
+];
+
+/**
+ * Draw a structure and say how it is matched: contained, similar, or the same
+ * compound with or without its stereochemistry and tautomerism.
+ *
+ * What is drawn stays a draft until the dialog closes, and the canvas is never
+ * reloaded under the pen: only opening the dialog and clicking an example put
+ * a structure in it.
+ * @param props - See {@link StructureSearchDialogProps}.
+ * @returns The dialog.
+ */
+export function StructureSearchDialog(
+  props: StructureSearchDialogProps,
+): ReactElement {
+  const {
+    isOpen,
+    value,
+    onClose,
+    modes = STRUCTURE_SEARCH_MODES,
+    examples,
+    similarityControls,
+    usePortal = true,
+  } = props;
+  const t = useChromeT();
+  const modeLabels = useStructureSearchModes(modes);
+  const draft = useStructureDraft(value.idCode);
+  const [mode, setMode] = useState(value.mode);
+  const [threshold, setThreshold] = useState(value.threshold);
+  // An example is read by a lazily loaded module: until it is in the canvas,
+  // Apply would hand back the drawing it replaces.
+  const [loading, setLoading] = useState(false);
+  const offered: readonly StructureSearchExample[] =
+    examples ??
+    DEFAULT_EXAMPLES.map((example) => ({
+      label: t(example.key),
+      smiles: example.smiles,
+    }));
+
+  function close(): void {
+    const idCode = isEmptyIdCode(draft.value) ? '' : draft.value;
+    onClose({ idCode, mode, threshold });
+  }
+
+  async function loadExample(smiles: string): Promise<void> {
+    setLoading(true);
+    try {
+      const { fragmentIdCode } = await import('../core/fragmentIdCode.ts');
+      const idCode = fragmentIdCode(smiles);
+      if (idCode !== '') draft.load(idCode);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Dialog
+      isOpen={isOpen}
+      onOpening={() => {
+        draft.load(value.idCode);
+        setMode(modes.includes(value.mode) ? value.mode : (modes[0] ?? mode));
+        setThreshold(value.threshold);
+      }}
+      onClose={close}
+      usePortal={usePortal}
+      title={t('structure.search.title')}
+      className="structure-search"
+    >
+      <DialogBody>
+        <div className="structure-search__row">
+          {modeLabels.map((option) => (
+            <Button
+              key={option.mode}
+              size="small"
+              active={mode === option.mode}
+              intent={mode === option.mode ? 'primary' : 'none'}
+              text={option.label}
+              title={option.help}
+              onClick={() => setMode(option.mode)}
+            />
+          ))}
+        </div>
+        {mode === 'similarity' && (
+          <div className="structure-search__row">
+            <span className="structure-search__label">
+              {t('structure.search.similarityLabel')}
+            </span>
+            <HTMLSelect
+              minimal
+              value={threshold}
+              aria-label={t('structure.search.threshold')}
+              title={t('structure.search.thresholdHelp')}
+              options={similarityThresholds(threshold).map((option) => ({
+                value: option,
+                label: t('structure.search.thresholdOption', {
+                  percent: formatPercent(option, 0),
+                }),
+              }))}
+              onChange={(event) =>
+                setThreshold(Number(event.currentTarget.value))
+              }
+            />
+            {similarityControls}
+          </div>
+        )}
+        <StructureEditor
+          fragment
+          value={draft.value}
+          revision={draft.revision}
+          onChange={(change) => draft.update(change.idCode)}
+        />
+        <div className="structure-search__row structure-search__examples">
+          <span className="structure-search__label">
+            {t('structure.search.examples')}
+          </span>
+          {offered.map((example) => (
+            <Button
+              key={example.label}
+              variant="minimal"
+              size="small"
+              text={example.label}
+              title={example.help}
+              onClick={() => void loadExample(example.smiles)}
+            />
+          ))}
+        </div>
+      </DialogBody>
+      <DialogFooter
+        actions={
+          <Button
+            intent="primary"
+            icon="search"
+            text={t('structure.search.apply')}
+            loading={loading}
+            onClick={close}
+          />
+        }
+      />
+    </Dialog>
+  );
+}

package/src/structure/ui/StructureSvg.tsx

@@ -17,6 +17,7 @@ import type { AtomLabelPlacement } from '../core/atomLabels.ts';
 import { applyAtomLabels } from '../core/atomLabels.ts';
 import { sourceMolecule } from '../core/sourceMolecule.ts';
 import type { StructureSource } from '../core/structureSource.ts';
+import { substructureMatch } from '../core/substructureMatch.ts';
 
 import { StructurePlaceholder } from './StructurePlaceholder.tsx';
 
@@ -46,6 +47,15 @@ interface StructureSvgProps {
   bondHighlight?: number[];
   /** The colour the highlighted bonds are painted. */
   bondHighlightColor: string;
+  /**
+   * A query idCode whose matches are painted in place of the highlights.
+   * @default undefined
+   */
+  substructure?: string;
+  /** The colour the substructure match is painted. */
+  substructureColor: string;
+  /** How opaque the substructure match is painted, from 0 to 1. */
+  substructureOpacity: number;
   /** Write the index of every atom next to it. */
   showAtomNumber: boolean;
   /** Write the index of every bond next to it. */
@@ -94,6 +104,13 @@ export function StructureSvg(props: StructureSvgProps): ReactElement {
     onAtomClick,
     onBondClick,
     showCIPParity,
+    atomHighlight,
+    atomHighlightColor,
+    bondHighlight,
+    bondHighlightColor,
+    substructure,
+    substructureColor,
+    substructureOpacity,
     ...rest
   } = props;
   const { kind, value, coordinates } = source;
@@ -106,6 +123,14 @@ export function StructureSvg(props: StructureSvgProps): ReactElement {
     () => readDrawing(kind, value, coordinates, labelsKey, atomLabelPlacement),
     [kind, value, coordinates, labelsKey, atomLabelPlacement],
   );
+  // Matched on the very molecule drawn, so the indices are the drawn atoms.
+  const match = useMemo(
+    () =>
+      drawing === null || substructure === undefined
+        ? null
+        : substructureMatch(drawing.molecule, substructure),
+    [drawing, substructure],
+  );
 
   if (drawing === null) {
     return (
@@ -118,6 +143,16 @@ export function StructureSvg(props: StructureSvgProps): ReactElement {
   return (
     <SvgRenderer
       {...rest}
+      atomHighlight={match === null ? atomHighlight : match.atoms}
+      atomHighlightColor={
+        match === null ? atomHighlightColor : substructureColor
+      }
+      bondHighlight={match === null ? bondHighlight : match.bonds}
+      bondHighlightColor={
+        match === null ? bondHighlightColor : substructureColor
+      }
+      atomHighlightOpacity={match === null ? undefined : substructureOpacity}
+      bondHighlightOpacity={match === null ? undefined : substructureOpacity}
       molecule={drawing.molecule}
       noCarbonLabelWithCustomLabel={drawing.labelled}
       suppressCIPParity={!showCIPParity}

package/src/structure/ui/index.ts

@@ -25,6 +25,10 @@ export type { StructureDropProps } from './StructureDrop.tsx';
 export { StructureDrop } from './StructureDrop.tsx';
 export type { StructureEditorHelpProps } from './StructureEditorHelp.tsx';
 export { StructureEditorHelp } from './StructureEditorHelp.tsx';
+export type { StructureSearchDialogProps } from './StructureSearchDialog.tsx';
+export { StructureSearchDialog } from './StructureSearchDialog.tsx';
+export type { StructureSearchModeLabel } from './useStructureSearchModes.ts';
+export { useStructureSearchModes } from './useStructureSearchModes.ts';
 export type { StructureExportDialogProps } from './StructureExportDialog.tsx';
 export { StructureExportDialog } from './StructureExportDialog.tsx';
 export type { StructureExportButtonProps } from './StructureExportButton.tsx';

package/src/structure/ui/useStructureSearchModes.ts

@@ -0,0 +1,51 @@
+import type { ChromeKey } from '../../i18n/core/chromeCatalog.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import type { StructureSearchMode } from '../core/structureSearch.ts';
+import { STRUCTURE_SEARCH_MODES } from '../core/structureSearch.ts';
+
+/** A mode, with what a button says and what its tooltip adds. */
+export interface StructureSearchModeLabel {
+  /** The mode. */
+  mode: StructureSearchMode;
+  /** What the button says. */
+  label: string;
+  /** One line on what the mode finds. */
+  help: string;
+}
+
+const MODE_KEYS: Record<StructureSearchMode, [ChromeKey, ChromeKey]> = {
+  substructure: [
+    'structure.search.substructure',
+    'structure.search.substructureHelp',
+  ],
+  similarity: [
+    'structure.search.similarity',
+    'structure.search.similarityHelp',
+  ],
+  exact: ['structure.search.exact', 'structure.search.exactHelp'],
+  exactNoStereo: [
+    'structure.search.exactNoStereo',
+    'structure.search.exactNoStereoHelp',
+  ],
+  exactNoStereoTautomer: [
+    'structure.search.exactNoStereoTautomer',
+    'structure.search.exactNoStereoTautomerHelp',
+  ],
+};
+
+/**
+ * The modes in the reader's language, for a site that shows the mode in force
+ * beside the drawing.
+ * @param modes - The modes, in order.
+ * @returns Each mode with its label and its one-line help.
+ */
+export function useStructureSearchModes(
+  modes: readonly StructureSearchMode[] = STRUCTURE_SEARCH_MODES,
+): StructureSearchModeLabel[] {
+  const t = useChromeT();
+  return modes.map((mode) => ({
+    mode,
+    label: t(MODE_KEYS[mode][0]),
+    help: t(MODE_KEYS[mode][1]),
+  }));
+}

package/src/structure/ui/useToolbarFloor.ts

@@ -41,18 +41,28 @@ export function useToolbarFloor(
     if (container === null) return;
 
     return watchToolbar(container, (toolbar) => {
+      let frame = 0;
       const size = new ResizeObserver(() => {
-        // offsetHeight, because a dialog opens under a scaling transform and a
-        // measured rectangle would be that of the half drawn toolbar.
-        const height = toolbar.offsetHeight;
-        // Zero is a toolbar being torn down or not yet laid out, never a
-        // toolbar that needs no room: writing the fallback for it would undo a
-        // correct floor and leave the palette cut off.
-        if (height === 0) return;
-        container.style.minHeight = `${toolbarFloorHeight(height, minHeight)}px`;
+        // Written on the next frame: growing the box from inside this callback
+        // resizes the editor element above the toolbar, whose own observer the
+        // browser then drops with a "ResizeObserver loop" error.
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(() => {
+          // offsetHeight, because a dialog opens under a scaling transform and
+          // a measured rectangle would be that of the half drawn toolbar.
+          const height = toolbar.offsetHeight;
+          // Zero is a toolbar being torn down or not yet laid out, never a
+          // toolbar that needs no room: writing the fallback for it would undo
+          // a correct floor and leave the palette cut off.
+          if (height === 0) return;
+          container.style.minHeight = `${toolbarFloorHeight(height, minHeight)}px`;
+        });
       });
       size.observe(toolbar);
-      return () => size.disconnect();
+      return () => {
+        cancelAnimationFrame(frame);
+        size.disconnect();
+      };
     });
   }, [minHeight, revision]);
 

package/styles/chrome.css

@@ -889,6 +889,37 @@ a.source-badge:hover {
   }
 }
 
+/* The structure search dialog: the modes above the canvas, the fragments to
+   start from under it. A drag on the canvas that leaves it would otherwise
+   select the labels. */
+.structure-search {
+  width: min(56rem, calc(100vw - 2rem));
+  user-select: none;
+}
+
+.structure-search :is(input, textarea) {
+  user-select: text;
+}
+
+.structure-search__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 0.6rem;
+  gap: 0.35rem;
+}
+
+.structure-search__examples {
+  margin-top: 0.6rem;
+  margin-bottom: 0;
+}
+
+.structure-search__label {
+  margin-right: 0.25rem;
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+}
+
 /* ── Tokens for molecules.cheminfo.org ─────────────────────────────────────── */
 
 /* The heading, when the tokens were checked, and the button asking again, on
@@ -1729,6 +1760,139 @@ span.taxon-lineage__name {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
 
+/* ── A formula lookup ────────────────────────────────────────────────────── */
+
+/* Only the panel's own look: where it sits — a column beside a question, a
+   sticky rail, a shadow — is the page's, through the class it passes. */
+.formula-lookup {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.formula-lookup__header {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  font-weight: 700;
+  gap: 0.25rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.formula-lookup__header > .bp6-button {
+  margin-left: auto;
+}
+
+.formula-lookup__body {
+  display: flex;
+  flex-direction: column;
+  padding: 0.75rem;
+  gap: 0.5rem;
+}
+
+.formula-lookup__field {
+  display: flex;
+  flex-direction: column;
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  font-weight: 600;
+  gap: 2px;
+}
+
+.formula-lookup__hint {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+/* Two elements to a line: each box holds two or three digits. */
+.formula-lookup__ranges {
+  display: grid;
+  margin-top: 0.25rem;
+  gap: 0.25rem 0.5rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.formula-lookup__range {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 3px;
+}
+
+.formula-lookup__range .bp6-input-group {
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+.formula-lookup__range .bp6-input {
+  padding-right: 4px;
+  padding-left: 4px;
+  text-align: center;
+}
+
+.formula-lookup__element {
+  width: 1.3rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+}
+
+.formula-lookup__dash {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+.formula-lookup__results {
+  display: flex;
+  flex-direction: column;
+  padding: 0.75rem;
+  border-top: 1px solid var(--border);
+  gap: 0.25rem;
+}
+
+/* A search still to come leaves the band empty rather than collapsing it. */
+.formula-lookup__results:empty {
+  min-height: 2.5rem;
+}
+
+.formula-lookup__count {
+  color: var(--text-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.formula-lookup__list {
+  display: flex;
+  overflow-y: auto;
+  max-height: 40vh;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+/* A formula is never split across two lines. */
+.formula-lookup__list li {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 2px 0;
+  font-size: 0.85rem;
+  gap: 0.5rem;
+  white-space: nowrap;
+}
+
+.formula-lookup__ppm {
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  font-variant-numeric: tabular-nums;
+}
+
 /* ── A list of exercises ─────────────────────────────────────────────────── */
 
 .exercise-list {