react-cheminfo 0.73.0 → 0.75.0

package/src/formula/ui/FormulaLookupResults.tsx

@@ -0,0 +1,89 @@
+import type { ReactElement } from 'react';
+
+import { formatDecimal, formatInteger } from '../../format/core/numbers.ts';
+import type { AsyncResult } from '../../hooks/ui/useAsync.ts';
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import type { FormulaCandidates } from '../core/formulaCandidates.ts';
+
+import { CopyableFormula } from './CopyableFormula.tsx';
+
+/** What {@link FormulaLookupResults} lists. */
+export interface FormulaLookupResultsProps {
+  /** The mass in the box, `undefined` while it is empty. */
+  mass: number | undefined;
+  /** The latest search: its formulas, or `null` when it gave up. */
+  answer: AsyncResult<FormulaCandidates | null>;
+  /** Whether a newer search is still to come, so an empty answer is stale. */
+  waiting: boolean;
+}
+
+/**
+ * The formulas a lookup found, closest first, each with its distance in ppm
+ * and copied by a click; or the sentence saying why there are none.
+ * @param props - See {@link FormulaLookupResultsProps}.
+ * @returns The results.
+ */
+export function FormulaLookupResults(
+  props: FormulaLookupResultsProps,
+): ReactElement {
+  const { mass, answer, waiting } = props;
+  const t = useChromeT();
+  const found = answer.data;
+
+  if (mass === undefined) return hintOnly(t('formula.lookup.typeMass'));
+  if (found === null) return hintOnly(t('formula.lookup.tooWide'));
+  // A search still to come is not "nothing fits": the reader is mid-number.
+  if (found === undefined || (found.candidates.length === 0 && waiting)) {
+    return <div className="formula-lookup__results" />;
+  }
+
+  const { candidates, total } = found;
+  const count = formatInteger(candidates.length);
+  let heading: string = t('formula.lookup.countMany', { count });
+  if (candidates.length < total) {
+    heading = t('formula.lookup.closest', {
+      count,
+      total: formatInteger(total),
+    });
+  } else if (candidates.length === 1) {
+    heading = t('formula.lookup.countOne', { count });
+  }
+
+  return (
+    <div className="formula-lookup__results">
+      <span className="formula-lookup__count">{heading}</span>
+      {candidates.length === 0 ? (
+        <span className="formula-lookup__hint">
+          {t('formula.lookup.nothingFits')}
+        </span>
+      ) : (
+        <ul className="formula-lookup__list">
+          {candidates.map((candidate) => (
+            <li
+              key={candidate.mf}
+              title={t('formula.lookup.detail', {
+                mass: formatDecimal(candidate.em, 4),
+                unsaturation: formatInteger(candidate.unsaturation),
+              })}
+            >
+              <CopyableFormula formula={candidate.mf} />
+              <span className="formula-lookup__ppm">
+                {t('formula.lookup.ppm', {
+                  value: formatDecimal(candidate.ppm, 1),
+                })}
+              </span>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function hintOnly(hint: string): ReactElement {
+  return (
+    <div className="formula-lookup__results">
+      <span className="formula-lookup__hint">{hint}</span>
+    </div>
+  );
+}

package/src/formula/ui/index.ts

@@ -2,5 +2,7 @@ export type { CopyableFormulaProps } from './CopyableFormula.tsx';
 export { CopyableFormula } from './CopyableFormula.tsx';
 export type { FormulaInputProps } from './FormulaInput.tsx';
 export { FormulaInput } from './FormulaInput.tsx';
+export type { FormulaLookupProps } from './FormulaLookup.tsx';
+export { FormulaLookup } from './FormulaLookup.tsx';
 export type { QuestionFormulaProps } from './QuestionFormula.tsx';
 export { QuestionFormula } from './QuestionFormula.tsx';

package/src/locales/de.json

@@ -103,6 +103,7 @@
   "site.regexp.tagline": "Reguläre Ausdrücke in einer interaktiven Spielwiese lernen.",
   "site.pdb.tagline": "Ein schneller Blick auf jeden Eintrag der Protein Data Bank.",
   "site.elucidation.tagline": "Eine Struktur aus einem 1H-NMR-Spektrum und einer Formel.",
+  "site.spectroscopy.tagline": "Eine Struktur aus ihren IR-, Massen- und NMR-Spektren bestimmen.",
   "site.equilibrium.tagline": "Chemische Gleichgewichte: pH, Speziation und Titrationskurven.",
   "site.polycarp.tagline": "Die Mikrostruktur einer radikalischen Copolymerisation vorhersagen.",
   "site.3d.tagline": "Konformere in 3D aus einer Struktur, die Sie zeichnen.",
@@ -345,6 +346,21 @@
   "formula.wholeCounts": "„{formula}“ gibt einem Atom die Anzahl {count}; Anzahlen sind ganze Zahlen.",
   "formula.unknownNotation": "„{formula}“ verwendet eine Schreibweise, die dieses Werkzeug nicht zählt.",
   "formula.unreadable": "„{formula}“ ist keine Formel, die dieses Werkzeug lesen kann ({reason}).",
+  "formula.lookup.title": "Formelsuche",
+  "formula.lookup.reset": "Masse und Elementbereiche zurücksetzen",
+  "formula.lookup.mass": "Monoisotopische Masse",
+  "formula.lookup.massPlaceholder": "z. B. 128.0626",
+  "formula.lookup.neutral": "Die des neutralen Moleküls: Ziehen Sie die Protonen ab, die das Spektrum hinzugefügt hat.",
+  "formula.lookup.fewest": "Mindestzahl der {element}-Atome",
+  "formula.lookup.most": "Höchstzahl der {element}-Atome",
+  "formula.lookup.typeMass": "Geben Sie eine Masse ein, um die Formeln aufzulisten, die diese Bereiche zulassen.",
+  "formula.lookup.closest": "Die {count} nächsten von {total} Formeln",
+  "formula.lookup.countOne": "{count} Formel",
+  "formula.lookup.countMany": "{count} Formeln",
+  "formula.lookup.nothingFits": "Keine Formel passt. Erweitern Sie einen Bereich oder prüfen Sie die Masse.",
+  "formula.lookup.tooWide": "Diese Bereiche lassen zu viele Formeln für die Suche zu. Schränken Sie einen ein.",
+  "formula.lookup.ppm": "{value} ppm",
+  "formula.lookup.detail": "{mass} Da, Unsättigungsgrad {unsaturation}",
   "slides.exit": "Beenden",
   "slides.previousSlide": "Vorige Folie",
   "slides.nextSlide": "Nächste Folie",
@@ -583,6 +599,28 @@
   "structure.export.noStereoIdCodeHelp": "Jedes Stereoisomer ergibt diese, womit ein ohne Stereozentren gezeichneter Eintrag gefunden wird.",
   "structure.export.noStereoTautomerIdCode": "idCode ohne Stereochemie und Tautomerie",
   "structure.export.noStereoTautomerIdCodeHelp": "Jedes Tautomer und jedes Stereoisomer ergibt diese: Keto- und Enolform haben denselben Schlüssel.",
+  "structure.search.title": "Nach Struktur filtern",
+  "structure.search.apply": "Anwenden",
+  "structure.search.examples": "Ausgehend von",
+  "structure.search.substructure": "Enthält",
+  "structure.search.substructureHelp": "Jedes Molekül, das die Zeichnung enthält.",
+  "structure.search.similarity": "Ähnlich zu",
+  "structure.search.similarityHelp": "Geordnet danach, wie viel der Zeichnung sie teilen.",
+  "structure.search.exact": "Ist genau",
+  "structure.search.exactHelp": "Genau das gezeichnete Molekül.",
+  "structure.search.exactNoStereo": "Beliebiges Stereoisomer",
+  "structure.search.exactNoStereoHelp": "Dieselbe Verbindung, wie auch immer ihre Stereochemie gezeichnet ist.",
+  "structure.search.exactNoStereoTautomer": "Beliebiges Tautomer",
+  "structure.search.exactNoStereoTautomerHelp": "Dieselbe Verbindung in jeder tautomeren Form, ohne ihre Stereochemie.",
+  "structure.search.similarityLabel": "Ähnlichkeit",
+  "structure.search.threshold": "Mindestähnlichkeit",
+  "structure.search.thresholdHelp": "Der kleinste Tanimoto-Koeffizient, den ein Treffer mit der Zeichnung erreicht.",
+  "structure.search.thresholdOption": "≥ {percent}",
+  "structure.search.exampleBenzene": "Benzol",
+  "structure.search.examplePyridine": "Pyridin",
+  "structure.search.exampleAmide": "Amid",
+  "structure.search.exampleSulfonamide": "Sulfonamid",
+  "structure.search.exampleTrifluoromethyl": "Trifluormethyl",
   "molecule3d.view": "Ansicht",
   "molecule3d.resetView": "Ansicht zurücksetzen",
   "molecule3d.spin": "Drehen lassen",

package/src/locales/en.json

@@ -103,6 +103,7 @@
   "site.regexp.tagline": "Learn regular expressions in a live playground.",
   "site.pdb.tagline": "A fast look at any Protein Data Bank entry.",
   "site.elucidation.tagline": "A structure from a 1H NMR spectrum and a formula.",
+  "site.spectroscopy.tagline": "Find a structure from its IR, mass and NMR spectra.",
   "site.equilibrium.tagline": "Chemical equilibria: pH, speciation and titration curves.",
   "site.polycarp.tagline": "Predict the microstructure of a radical copolymerisation.",
   "site.3d.tagline": "Conformers in 3D from a structure you draw.",
@@ -345,6 +346,21 @@
   "formula.wholeCounts": "“{formula}” gives an atom a count of {count}; counts are whole numbers.",
   "formula.unknownNotation": "“{formula}” uses a notation this tool does not count.",
   "formula.unreadable": "“{formula}” is not a formula this tool can read ({reason}).",
+  "formula.lookup.title": "Formula lookup",
+  "formula.lookup.reset": "Reset the mass and the element ranges",
+  "formula.lookup.mass": "Monoisotopic mass",
+  "formula.lookup.massPlaceholder": "e.g. 128.0626",
+  "formula.lookup.neutral": "Of the neutral molecule: take the protons the spectrum added back off.",
+  "formula.lookup.fewest": "Fewest {element} atoms",
+  "formula.lookup.most": "Most {element} atoms",
+  "formula.lookup.typeMass": "Type a mass to list the formulas these ranges allow.",
+  "formula.lookup.closest": "The {count} closest of {total} formulas",
+  "formula.lookup.countOne": "{count} formula",
+  "formula.lookup.countMany": "{count} formulas",
+  "formula.lookup.nothingFits": "Nothing fits. Widen a range, or check the mass.",
+  "formula.lookup.tooWide": "These ranges allow too many formulas to search. Narrow one.",
+  "formula.lookup.ppm": "{value} ppm",
+  "formula.lookup.detail": "{mass} Da, unsaturation {unsaturation}",
   "slides.exit": "Exit",
   "slides.previousSlide": "Previous slide",
   "slides.nextSlide": "Next slide",
@@ -527,6 +543,28 @@
   "structure.export.noStereoIdCodeHelp": "Every stereoisomer of this structure gives this one, so it finds a record drawn without its stereocentres.",
   "structure.export.noStereoTautomerIdCode": "idCode without stereochemistry or tautomer",
   "structure.export.noStereoTautomerIdCodeHelp": "Every tautomer and every stereoisomer gives this one, so the keto and the enol form key together.",
+  "structure.search.title": "Filter by structure",
+  "structure.search.apply": "Apply",
+  "structure.search.examples": "Start from",
+  "structure.search.substructure": "Contains",
+  "structure.search.substructureHelp": "Every molecule the drawing is part of.",
+  "structure.search.similarity": "Similar to",
+  "structure.search.similarityHelp": "Ranked by how much of the drawing they share.",
+  "structure.search.exact": "Is exactly",
+  "structure.search.exactHelp": "The one molecule drawn.",
+  "structure.search.exactNoStereo": "Any stereoisomer",
+  "structure.search.exactNoStereoHelp": "The same compound however its stereochemistry is drawn.",
+  "structure.search.exactNoStereoTautomer": "Any tautomer",
+  "structure.search.exactNoStereoTautomerHelp": "The same compound in any tautomeric form, its stereochemistry ignored.",
+  "structure.search.similarityLabel": "Similarity",
+  "structure.search.threshold": "Minimum similarity",
+  "structure.search.thresholdHelp": "The least Tanimoto coefficient a hit reaches with the drawing.",
+  "structure.search.thresholdOption": "≥ {percent}",
+  "structure.search.exampleBenzene": "Benzene",
+  "structure.search.examplePyridine": "Pyridine",
+  "structure.search.exampleAmide": "Amide",
+  "structure.search.exampleSulfonamide": "Sulfonamide",
+  "structure.search.exampleTrifluoromethyl": "Trifluoromethyl",
   "periodic.table": "Periodic table",
   "periodic.group": "Group {group}",
   "periodic.period": "Period {period}",

package/src/locales/es.json

@@ -103,6 +103,7 @@
   "site.regexp.tagline": "Aprender expresiones regulares en un entorno interactivo.",
   "site.pdb.tagline": "Una mirada rápida a cualquier entrada del Protein Data Bank.",
   "site.elucidation.tagline": "Una estructura a partir de un espectro de RMN de 1H y una fórmula.",
+  "site.spectroscopy.tagline": "Encontrar una estructura a partir de sus espectros IR, de masas y de RMN.",
   "site.equilibrium.tagline": "Equilibrios químicos: pH, especiación y curvas de valoración.",
   "site.polycarp.tagline": "Predecir la microestructura de una copolimerización radicalaria.",
   "site.3d.tagline": "Confórmeros en 3D a partir de una estructura que usted dibuja.",
@@ -345,6 +346,21 @@
   "formula.wholeCounts": "«{formula}» da a un átomo la cantidad {count}; las cantidades son números enteros.",
   "formula.unknownNotation": "«{formula}» usa una notación que esta herramienta no cuenta.",
   "formula.unreadable": "«{formula}» no es una fórmula que esta herramienta sepa leer ({reason}).",
+  "formula.lookup.title": "Búsqueda de fórmulas",
+  "formula.lookup.reset": "Restablecer la masa y los intervalos de elementos",
+  "formula.lookup.mass": "Masa monoisotópica",
+  "formula.lookup.massPlaceholder": "p. ej. 128.0626",
+  "formula.lookup.neutral": "La de la molécula neutra: reste los protones que el espectro añadió.",
+  "formula.lookup.fewest": "Mínimo de átomos de {element}",
+  "formula.lookup.most": "Máximo de átomos de {element}",
+  "formula.lookup.typeMass": "Escriba una masa para listar las fórmulas que permiten estos intervalos.",
+  "formula.lookup.closest": "Las {count} más cercanas de {total} fórmulas",
+  "formula.lookup.countOne": "{count} fórmula",
+  "formula.lookup.countMany": "{count} fórmulas",
+  "formula.lookup.nothingFits": "Ninguna fórmula encaja. Amplíe un intervalo o compruebe la masa.",
+  "formula.lookup.tooWide": "Estos intervalos permiten demasiadas fórmulas para buscarlas. Reduzca uno.",
+  "formula.lookup.ppm": "{value} ppm",
+  "formula.lookup.detail": "{mass} Da, insaturación {unsaturation}",
   "slides.exit": "Salir",
   "slides.previousSlide": "Diapositiva anterior",
   "slides.nextSlide": "Diapositiva siguiente",
@@ -583,6 +599,28 @@
   "structure.export.noStereoIdCodeHelp": "Todos los estereoisómeros dan este, así que encuentra un registro dibujado sin sus centros estereogénicos.",
   "structure.export.noStereoTautomerIdCode": "idCode sin estereoquímica ni tautomería",
   "structure.export.noStereoTautomerIdCodeHelp": "Todos los tautómeros y estereoisómeros dan este: la forma cetónica y la enólica comparten clave.",
+  "structure.search.title": "Filtrar por estructura",
+  "structure.search.apply": "Aplicar",
+  "structure.search.examples": "Partir de",
+  "structure.search.substructure": "Contiene",
+  "structure.search.substructureHelp": "Toda molécula de la que el dibujo forma parte.",
+  "structure.search.similarity": "Similar a",
+  "structure.search.similarityHelp": "Ordenadas por cuánto del dibujo comparten.",
+  "structure.search.exact": "Es exactamente",
+  "structure.search.exactHelp": "La molécula dibujada.",
+  "structure.search.exactNoStereo": "Cualquier estereoisómero",
+  "structure.search.exactNoStereoHelp": "El mismo compuesto, sea cual sea su estereoquímica dibujada.",
+  "structure.search.exactNoStereoTautomer": "Cualquier tautómero",
+  "structure.search.exactNoStereoTautomerHelp": "El mismo compuesto en cualquier forma tautomérica, sin su estereoquímica.",
+  "structure.search.similarityLabel": "Similitud",
+  "structure.search.threshold": "Similitud mínima",
+  "structure.search.thresholdHelp": "El menor coeficiente de Tanimoto que alcanza un resultado con el dibujo.",
+  "structure.search.thresholdOption": "≥ {percent}",
+  "structure.search.exampleBenzene": "Benceno",
+  "structure.search.examplePyridine": "Piridina",
+  "structure.search.exampleAmide": "Amida",
+  "structure.search.exampleSulfonamide": "Sulfonamida",
+  "structure.search.exampleTrifluoromethyl": "Trifluorometilo",
   "molecule3d.view": "Vista",
   "molecule3d.resetView": "Reiniciar la vista",
   "molecule3d.spin": "Giro continuo",

package/src/locales/fr.json

@@ -103,6 +103,7 @@
   "site.regexp.tagline": "Apprendre les expressions régulières dans un bac à sable interactif.",
   "site.pdb.tagline": "Un coup d'œil rapide sur n'importe quelle entrée de la Protein Data Bank.",
   "site.elucidation.tagline": "Une structure à partir d'un spectre RMN 1H et d'une formule.",
+  "site.spectroscopy.tagline": "Trouver une structure à partir de ses spectres IR, de masse et RMN.",
   "site.equilibrium.tagline": "Équilibres chimiques : pH, spéciation et courbes de titrage.",
   "site.polycarp.tagline": "Prédire la microstructure d'une copolymérisation radicalaire.",
   "site.3d.tagline": "Les conformères en 3D d'une structure que vous dessinez.",
@@ -345,6 +346,21 @@
   "formula.wholeCounts": "« {formula} » compte {count} pour un atome ; un nombre d’atomes est entier.",
   "formula.unknownNotation": "« {formula} » utilise une notation que cet outil ne compte pas.",
   "formula.unreadable": "« {formula} » n’est pas une formule que cet outil sait lire ({reason}).",
+  "formula.lookup.title": "Recherche de formule",
+  "formula.lookup.reset": "Réinitialiser la masse et les intervalles d’éléments",
+  "formula.lookup.mass": "Masse monoisotopique",
+  "formula.lookup.massPlaceholder": "p. ex. 128.0626",
+  "formula.lookup.neutral": "Celle de la molécule neutre : retirez les protons que le spectre a ajoutés.",
+  "formula.lookup.fewest": "{element} : nombre minimal d’atomes",
+  "formula.lookup.most": "{element} : nombre maximal d’atomes",
+  "formula.lookup.typeMass": "Tapez une masse pour lister les formules que ces intervalles permettent.",
+  "formula.lookup.closest": "Les {count} plus proches sur {total} formules",
+  "formula.lookup.countOne": "{count} formule",
+  "formula.lookup.countMany": "{count} formules",
+  "formula.lookup.nothingFits": "Aucune formule ne convient. Élargissez un intervalle, ou vérifiez la masse.",
+  "formula.lookup.tooWide": "Ces intervalles permettent trop de formules pour les parcourir. Resserrez-en un.",
+  "formula.lookup.ppm": "{value} ppm",
+  "formula.lookup.detail": "{mass} Da, insaturation {unsaturation}",
   "slides.exit": "Quitter",
   "slides.previousSlide": "Diapositive précédente",
   "slides.nextSlide": "Diapositive suivante",
@@ -583,6 +599,28 @@
   "structure.export.noStereoIdCodeHelp": "Tous les stéréoisomères donnent celui-ci, ce qui retrouve un enregistrement dessiné sans ses centres stéréogènes.",
   "structure.export.noStereoTautomerIdCode": "idCode sans stéréochimie ni tautomérie",
   "structure.export.noStereoTautomerIdCodeHelp": "Tous les tautomères et tous les stéréoisomères donnent celui-ci : la forme cétone et la forme énol ont la même clé.",
+  "structure.search.title": "Filtrer par structure",
+  "structure.search.apply": "Appliquer",
+  "structure.search.examples": "Partir de",
+  "structure.search.substructure": "Contient",
+  "structure.search.substructureHelp": "Toutes les molécules dont le dessin fait partie.",
+  "structure.search.similarity": "Similaire à",
+  "structure.search.similarityHelp": "Classées selon la part du dessin qu’elles partagent.",
+  "structure.search.exact": "Exactement",
+  "structure.search.exactHelp": "La seule molécule dessinée.",
+  "structure.search.exactNoStereo": "Tout stéréoisomère",
+  "structure.search.exactNoStereoHelp": "Le même composé, quelle que soit sa stéréochimie dessinée.",
+  "structure.search.exactNoStereoTautomer": "Tout tautomère",
+  "structure.search.exactNoStereoTautomerHelp": "Le même composé sous toute forme tautomère, sa stéréochimie ignorée.",
+  "structure.search.similarityLabel": "Similarité",
+  "structure.search.threshold": "Similarité minimale",
+  "structure.search.thresholdHelp": "Le plus petit coefficient de Tanimoto qu’un résultat atteint avec le dessin.",
+  "structure.search.thresholdOption": "≥ {percent}",
+  "structure.search.exampleBenzene": "Benzène",
+  "structure.search.examplePyridine": "Pyridine",
+  "structure.search.exampleAmide": "Amide",
+  "structure.search.exampleSulfonamide": "Sulfonamide",
+  "structure.search.exampleTrifluoromethyl": "Trifluorométhyle",
   "molecule3d.view": "Vue",
   "molecule3d.resetView": "Réinitialiser la vue",
   "molecule3d.spin": "Rotation continue",

package/src/locales/it.json

@@ -103,6 +103,7 @@
   "site.regexp.tagline": "Imparare le espressioni regolari in un ambiente interattivo.",
   "site.pdb.tagline": "Uno sguardo rapido a qualsiasi voce della Protein Data Bank.",
   "site.elucidation.tagline": "Una struttura da uno spettro NMR 1H e da una formula.",
+  "site.spectroscopy.tagline": "Trovare una struttura dai suoi spettri IR, di massa e NMR.",
   "site.equilibrium.tagline": "Equilibri chimici: pH, speciazione e curve di titolazione.",
   "site.polycarp.tagline": "Prevedere la microstruttura di una copolimerizzazione radicalica.",
   "site.3d.tagline": "Conformeri in 3D a partire da una struttura che si disegna.",
@@ -345,6 +346,21 @@
   "formula.wholeCounts": "«{formula}» dà a un atomo il numero {count}; i numeri di atomi sono interi.",
   "formula.unknownNotation": "«{formula}» usa una notazione che questo strumento non conta.",
   "formula.unreadable": "«{formula}» non è una formula che questo strumento sa leggere ({reason}).",
+  "formula.lookup.title": "Ricerca di formule",
+  "formula.lookup.reset": "Reimposta la massa e gli intervalli degli elementi",
+  "formula.lookup.mass": "Massa monoisotopica",
+  "formula.lookup.massPlaceholder": "es. 128.0626",
+  "formula.lookup.neutral": "Quella della molecola neutra: togli i protoni che lo spettro ha aggiunto.",
+  "formula.lookup.fewest": "Numero minimo di atomi di {element}",
+  "formula.lookup.most": "Numero massimo di atomi di {element}",
+  "formula.lookup.typeMass": "Scrivi una massa per elencare le formule che questi intervalli consentono.",
+  "formula.lookup.closest": "Le {count} più vicine su {total} formule",
+  "formula.lookup.countOne": "{count} formula",
+  "formula.lookup.countMany": "{count} formule",
+  "formula.lookup.nothingFits": "Nessuna formula corrisponde. Allarga un intervallo o controlla la massa.",
+  "formula.lookup.tooWide": "Questi intervalli consentono troppe formule per la ricerca. Restringine uno.",
+  "formula.lookup.ppm": "{value} ppm",
+  "formula.lookup.detail": "{mass} Da, insaturazione {unsaturation}",
   "slides.exit": "Esci",
   "slides.previousSlide": "Diapositiva precedente",
   "slides.nextSlide": "Diapositiva successiva",
@@ -527,6 +543,28 @@
   "structure.export.noStereoIdCodeHelp": "Ogni stereoisomero dà questo, così trova una voce disegnata senza i suoi centri stereogenici.",
   "structure.export.noStereoTautomerIdCode": "idCode senza stereochimica né tautomeria",
   "structure.export.noStereoTautomerIdCodeHelp": "Ogni tautomero e ogni stereoisomero dà questo: la forma chetonica e quella enolica hanno la stessa chiave.",
+  "structure.search.title": "Filtra per struttura",
+  "structure.search.apply": "Applica",
+  "structure.search.examples": "Parti da",
+  "structure.search.substructure": "Contiene",
+  "structure.search.substructureHelp": "Ogni molecola di cui il disegno fa parte.",
+  "structure.search.similarity": "Simile a",
+  "structure.search.similarityHelp": "Ordinate per quanta parte del disegno condividono.",
+  "structure.search.exact": "È esattamente",
+  "structure.search.exactHelp": "La molecola disegnata.",
+  "structure.search.exactNoStereo": "Qualsiasi stereoisomero",
+  "structure.search.exactNoStereoHelp": "Lo stesso composto, qualunque sia la stereochimica disegnata.",
+  "structure.search.exactNoStereoTautomer": "Qualsiasi tautomero",
+  "structure.search.exactNoStereoTautomerHelp": "Lo stesso composto in qualsiasi forma tautomerica, senza la sua stereochimica.",
+  "structure.search.similarityLabel": "Similarità",
+  "structure.search.threshold": "Similarità minima",
+  "structure.search.thresholdHelp": "Il più piccolo coefficiente di Tanimoto che un risultato raggiunge con il disegno.",
+  "structure.search.thresholdOption": "≥ {percent}",
+  "structure.search.exampleBenzene": "Benzene",
+  "structure.search.examplePyridine": "Piridina",
+  "structure.search.exampleAmide": "Ammide",
+  "structure.search.exampleSulfonamide": "Sulfonammide",
+  "structure.search.exampleTrifluoromethyl": "Trifluorometile",
   "periodic.table": "Tavola periodica",
   "periodic.group": "Gruppo {group}",
   "periodic.period": "Periodo {period}",

package/src/structure/core/fragmentIdCode.ts

@@ -0,0 +1,25 @@
+/**
+ * A SMILES turned into the idCode a query editor holds.
+ *
+ * **Not exported from `core/index.ts`**: it value-imports `openchemlib`, so
+ * the structure search dialog loads it with a dynamic import, only once an
+ * example is clicked.
+ */
+
+import { Molecule } from 'openchemlib';
+
+/**
+ * Read a SMILES as a query fragment.
+ * @param smiles - The fragment.
+ * @returns Its idCode, flagged as a fragment so any substituent may hang off
+ * it; empty when the SMILES cannot be read.
+ */
+export function fragmentIdCode(smiles: string): string {
+  try {
+    const fragment = Molecule.fromSmiles(smiles);
+    fragment.setFragment(true);
+    return fragment.getIDCode();
+  } catch {
+    return '';
+  }
+}

package/src/structure/core/index.ts

@@ -77,6 +77,16 @@ export type {
   StructurePictureOptions,
 } from './structurePicture.ts';
 export { STRUCTURE_BOND_LENGTH, structurePicture } from './structurePicture.ts';
+export type {
+  StructureSearchExample,
+  StructureSearchMode,
+  StructureSearchQuery,
+} from './structureSearch.ts';
+export {
+  SIMILARITY_THRESHOLDS,
+  STRUCTURE_SEARCH_MODES,
+  similarityThresholds,
+} from './structureSearch.ts';
 export type {
   StructureSource,
   StructureSourceInput,

package/src/structure/core/structureSearch.ts

@@ -0,0 +1,68 @@
+/** How a drawn structure is matched against a collection. */
+export type StructureSearchMode =
+  | 'substructure'
+  | 'similarity'
+  | 'exact'
+  | 'exactNoStereo'
+  | 'exactNoStereoTautomer';
+
+/**
+ * Every mode, in the order a dialog offers them: the two broad scans, then
+ * exact and its two relaxations.
+ */
+export const STRUCTURE_SEARCH_MODES: readonly StructureSearchMode[] = [
+  'substructure',
+  'similarity',
+  'exact',
+  'exactNoStereo',
+  'exactNoStereoTautomer',
+];
+
+/** A structure question: what is drawn, and how it is matched. */
+export interface StructureSearchQuery {
+  /**
+   * The drawing as an idCode, with the coordinates the editor laid out written
+   * after a space; empty when nothing is drawn.
+   */
+  idCode: string;
+  /** How the drawing is matched. */
+  mode: StructureSearchMode;
+  /** The least Tanimoto similarity a hit reaches, from 0 to 1. */
+  threshold: number;
+}
+
+/** A fragment a drawing can start from. */
+export interface StructureSearchExample {
+  /** What the button says. */
+  label: string;
+  /** The fragment, as a SMILES. */
+  smiles: string;
+  /**
+   * One line on what the fragment finds.
+   * @default undefined
+   */
+  help?: string;
+}
+
+/**
+ * The least similarities offered, as Tanimoto coefficients, in steps of 5 %.
+ */
+export const SIMILARITY_THRESHOLDS: readonly number[] = [
+  0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95,
+];
+
+/**
+ * The thresholds to offer when one is already chosen: the usual steps, plus the
+ * chosen one when it is none of them, so a link asking for 0.42 still finds it
+ * in the list.
+ * @param current - The threshold in force.
+ * @returns The thresholds, ascending.
+ */
+export function similarityThresholds(current: number): number[] {
+  if (SIMILARITY_THRESHOLDS.includes(current) || !Number.isFinite(current)) {
+    return [...SIMILARITY_THRESHOLDS];
+  }
+  return [...SIMILARITY_THRESHOLDS, current].toSorted(
+    (left, right) => left - right,
+  );
+}

package/src/structure/core/substructureMatch.ts

@@ -0,0 +1,85 @@
+/**
+ * Where a query fragment sits in a molecule, as the atoms and bonds to paint.
+ *
+ * **Not exported from `core/index.ts`**: it value-imports `openchemlib`, so a
+ * barrel carrying it would pull the whole library into every site that imports
+ * `react-cheminfo/core`. Only the lazily loaded depiction calls it.
+ */
+
+import { Molecule, SSSearcher } from 'openchemlib';
+
+import { isEmptyIdCode, splitIdCode } from './editorValue.ts';
+
+/** The atoms and bonds of a molecule that a query covers. */
+export interface SubstructureMatch {
+  /** Atom indices, ascending, as openchemlib counts atoms from 0. */
+  atoms: number[];
+  /** Bond indices, ascending, as openchemlib counts bonds from 0. */
+  bonds: number[];
+}
+
+/**
+ * Find every match of a query in a molecule, merged into one set of atoms and
+ * bonds.
+ *
+ * Every match is painted, not only the first: a query for a phenyl ring that a
+ * molecule carries twice is shown twice. A bond is painted only when it is a
+ * bond of the query, so a ring closing between two matched atoms that the
+ * query leaves open stays unpainted. The query is read as a fragment whether
+ * or not it was drawn as one — a molecule not flagged as a fragment only ever
+ * matches itself, which is never what a substructure search asked.
+ * @param molecule - The molecule the depiction draws; its atom order is the
+ * one the indices refer to.
+ * @param query - The query as an openchemlib idCode, coordinates included or
+ * not.
+ * @returns The covered atoms and bonds, both empty when nothing matches.
+ */
+export function substructureMatch(
+  molecule: Molecule,
+  query: string,
+): SubstructureMatch {
+  if (isEmptyIdCode(query)) return { atoms: [], bonds: [] };
+  const fragment = Molecule.fromIDCode(splitIdCode(query).idCode);
+  fragment.setFragment(true);
+
+  const searcher = new SSSearcher();
+  searcher.setMol(fragment, molecule);
+  if (searcher.findFragmentInMolecule({ countMode: 'overlapping' }) === 0) {
+    return { atoms: [], bonds: [] };
+  }
+
+  const atomCovered = new Uint8Array(molecule.getAllAtoms());
+  const bondCovered = new Uint8Array(molecule.getAllBonds());
+  const fragmentBonds = fragment.getAllBonds();
+  for (const match of searcher.getMatchList()) {
+    for (const target of match) {
+      // An exclude group of the query maps onto nothing.
+      if (target >= 0) atomCovered[target] = 1;
+    }
+    for (let bond = 0; bond < fragmentBonds; bond++) {
+      const first = match[fragment.getBondAtom(0, bond)] ?? -1;
+      const second = match[fragment.getBondAtom(1, bond)] ?? -1;
+      if (first < 0 || second < 0) continue;
+      const target = molecule.getBond(first, second);
+      if (target >= 0) bondCovered[target] = 1;
+    }
+  }
+
+  return {
+    atoms: coveredIndices(atomCovered),
+    bonds: coveredIndices(bondCovered),
+  };
+}
+
+/**
+ * The positions of a flag array that are set, in ascending order.
+ * @param flags - One flag per atom or bond.
+ * @returns The indices whose flag is set.
+ */
+function coveredIndices(flags: Uint8Array): number[] {
+  const indices: number[] = [];
+  for (let index = 0; index < flags.length; index++) {
+    if (flags[index] === 1) indices.push(index);
+  }
+  return indices;
+}

package/src/structure/ui/Structure.tsx

@@ -133,6 +133,24 @@ export interface StructureProps {
    * @default '#ffd8a8'
    */
   bondHighlightColor?: string;
+  /**
+   * A query fragment, as an openchemlib idCode, whose every match is painted —
+   * atoms and bonds alike, so the hit reads as one shape. When set, it takes
+   * the place of `atomHighlight` and `bondHighlight`.
+   * @default undefined
+   */
+  substructure?: string;
+  /**
+   * The colour the `substructure` match is painted.
+   * @default '#ffd500'
+   */
+  substructureColor?: string;
+  /**
+   * How opaque the `substructure` match is painted, from 0 to 1. Light, so the
+   * bonds and the atom labels under it stay legible.
+   * @default 0.15
+   */
+  substructureOpacity?: number;
   /**
    * Called with the index of the atom that was clicked, counted from 0 as
    * openchemlib counts atoms.
@@ -181,6 +199,9 @@ export function Structure(props: StructureProps): ReactElement {
     atomHighlightColor = '#a5d8ff',
     bondHighlight,
     bondHighlightColor = '#ffd8a8',
+    substructure,
+    substructureColor = '#ffd500',
+    substructureOpacity = 0.15,
     onAtomClick,
     onBondClick,
     fallback = '—',
@@ -208,6 +229,9 @@ export function Structure(props: StructureProps): ReactElement {
         atomHighlightColor={atomHighlightColor}
         bondHighlight={bondHighlight}
         bondHighlightColor={bondHighlightColor}
+        substructure={substructure}
+        substructureColor={substructureColor}
+        substructureOpacity={substructureOpacity}
         showAtomNumber={labels.atoms ?? false}
         showBondNumber={labels.bonds ?? false}
         showMapping={labels.mapping ?? false}