@datagrok/sequence-translator 1.10.5 → 1.10.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.10.5",
+  "version": "1.10.7",
   "author": {
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"
@@ -22,13 +22,13 @@
     }
   ],
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.60.2",
+    "@datagrok-libraries/bio": "^5.61.6",
     "@datagrok-libraries/chem-meta": "^1.2.8",
     "@datagrok-libraries/tutorials": "^1.6.1",
     "@datagrok-libraries/utils": "^4.6.5",
     "@types/react": "^18.0.15",
     "cash-dom": "^8.1.0",
-    "datagrok-api": "^1.25.0",
+    "datagrok-api": "^1.26.0",
     "lodash": "^4.17.21",
     "object-hash": "^3.0.0",
     "openchemlib": "6.0.1",
@@ -36,7 +36,8 @@
     "ts-loader": "^9.3.1",
     "typeahead-standalone": "4.14.1",
     "typescript": "^5.4.2",
-    "wu": "^2.1.0"
+    "wu": "^2.1.0",
+    "@datagrok-libraries/test": "^1.1.0"
   },
   "devDependencies": {
     "@datagrok-libraries/helm-web-editor": "^1.1.16",
@@ -54,7 +55,6 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "css-loader": "^6.7.3",
-    "datagrok-tools": "^4.14.55",
     "eslint": "^8.57.0",
     "eslint-config-google": "^0.14.0",
     "style-loader": "^3.3.1",
@@ -89,5 +89,8 @@
   "canView": [
     "All users"
   ],
-  "category": "Bioinformatics"
+  "category": "Bioinformatics",
+  "overrides": {
+    "datagrok-api": "$datagrok-api"
+  }
 }

package/scripts/build-monomer-lib.py

@@ -1,4 +1,3 @@
-# pylint: disable=no-member
 import os.path
 import sys
 from io import TextIOWrapper

package/src/apps/common/view/components/colored-input/input-painters.ts

@@ -24,7 +24,7 @@ export function demoPainter(input: string): HTMLSpanElement[] {
   return spans;
 }
 
-// todo: port to another place
+/* todo: port to another place */
 export function highlightInvalidSubsequence(input: string, th: ITranslationHelper): HTMLSpanElement[] {
   // validate sequence
   let cutoff = 0;

package/src/apps/structure/model/monomer-code-parser.ts

@@ -84,7 +84,7 @@ export class MonomerSequenceParser {
   }
 }
 
-// todo: to be eliminated after full helm support
+/* todo: to be eliminated after full helm support */
 function monomerHasLeftPhosphateLinker(monomerSymbol: string): boolean {
   return _package.jsonData.monomersWithPhosphate['left'].includes(monomerSymbol);
 }

package/src/apps/translator/model/conversion-utils.ts

@@ -51,7 +51,7 @@ export function getNucleotidesSequence(helmString: string, monomerLib: MonomerLi
   return nucleotides;
 }
 
-// todo: remove after refactoring as a workaround
+/* todo: remove after refactoring as a workaround */
 export function convert(
   sequence: string, sourceFormat: string, targetFormat: string, th: ITranslationHelper
 ): string | null {

package/src/demo/demo-st-ui.ts

@@ -2,7 +2,7 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {delay} from '@datagrok-libraries/utils/src/test';
+import {delay} from '@datagrok-libraries/test/src/test';
 import {PackageFunctions} from '../package';
 import {tryCatch} from '../apps/common/model/helpers';
 

package/src/package-test.ts

@@ -2,7 +2,7 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {runTests, tests, TestContext, initAutoTests as initTests} from '@datagrok-libraries/utils/src/test';
+import {runTests, tests, TestContext, initAutoTests as initTests} from '@datagrok-libraries/test/src/test';
 
 import './tests/formats-to-helm';
 import './tests/helm-to-nucleotides';

package/src/package.g.ts

@@ -4,6 +4,7 @@ import * as DG from 'datagrok-api/dg';
 //name: Oligo Toolkit
 //tags: app
 //output: view result
+//meta.role: app
 //meta.icon: img/icons/toolkit.png
 //meta.browsePath: Peptides | Oligo Toolkit
 export async function oligoToolkitApp() : Promise<any> {
@@ -11,6 +12,7 @@ export async function oligoToolkitApp() : Promise<any> {
 }
 
 //tags: init
+//meta.role: init
 export async function init() : Promise<void> {
   await PackageFunctions.init();
 }
@@ -18,6 +20,7 @@ export async function init() : Promise<void> {
 //name: Oligo Translator
 //tags: app
 //output: view result
+//meta.role: app
 //meta.icon: img/icons/translator.png
 //meta.browsePath: Peptides | Oligo Toolkit
 export async function oligoTranslatorApp() : Promise<any> {
@@ -27,6 +30,7 @@ export async function oligoTranslatorApp() : Promise<any> {
 //name: Oligo Pattern
 //tags: app
 //output: view result
+//meta.role: app
 //meta.icon: img/icons/pattern.png
 //meta.browsePath: Peptides | Oligo Toolkit
 export async function oligoPatternApp() : Promise<any> {
@@ -36,6 +40,7 @@ export async function oligoPatternApp() : Promise<any> {
 //name: Oligo Structure
 //tags: app
 //output: view result
+//meta.role: app
 //meta.icon: img/icons/structure.png
 //meta.browsePath: Peptides | Oligo Toolkit
 export async function oligoStructureApp() : Promise<any> {
@@ -113,6 +118,7 @@ export async function polyToolConvertTopMenu() : Promise<void> {
 //tags: editor
 //input: funccall call 
 //output: column result
+//meta.role: editor
 export async function getPolyToolConvertEditor(call: DG.FuncCall) : Promise<any> {
   return await PackageFunctions.getPolyToolConvertEditor(call);
 }
@@ -157,6 +163,7 @@ export async function createMonomerLibraryForPolyTool(file: DG.FileInfo) : Promi
 //tags: app
 //meta.icon: img/icons/structure.png
 //meta.browsePath: Peptides | PolyTool
+//meta.role: app
 export async function ptEnumeratorHelmApp() : Promise<void> {
   await PackageFunctions.ptEnumeratorHelmApp();
 }
@@ -165,6 +172,7 @@ export async function ptEnumeratorHelmApp() : Promise<void> {
 //tags: app
 //meta.icon: img/icons/structure.png
 //meta.browsePath: Peptides | PolyTool
+//meta.role: app
 export async function ptEnumeratorChemApp() : Promise<void> {
   await PackageFunctions.ptEnumeratorChemApp();
 }
@@ -213,3 +221,9 @@ export async function getPolyToolCombineDialog() : Promise<void> {
 export function applyNotationProviderForCyclized(col: DG.Column<any>, separator: string) : void {
   PackageFunctions.applyNotationProviderForCyclized(col, separator);
 }
+
+//output: dynamic result
+//meta.role: notationProviderConstructor
+export async function harmonizedSequenceNotationProviderConstructor() : Promise<any> {
+  return await PackageFunctions.harmonizedSequenceNotationProviderConstructor();
+}

package/src/package.ts

@@ -3,7 +3,7 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
+import {NOTATION, NOTATION_PROVIDER_CONSTRUCTOR_ROLE} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
 import {SeqTemps} from '@datagrok-libraries/bio/src/utils/macromolecule/seq-handler';
 
 import {OligoToolkitPackage} from './apps/common/model/oligo-toolkit-package';
@@ -79,7 +79,8 @@ export class PackageFunctions {
   @grok.decorators.app({
     icon: 'img/icons/toolkit.png',
     browsePath: 'Peptides | Oligo Toolkit',
-    name: 'Oligo Toolkit'
+    name: 'Oligo Toolkit',
+    tags: ['app']
   })
   static async oligoToolkitApp(): Promise<DG.ViewBase> {
     await _package.initLibData();
@@ -92,7 +93,7 @@ export class PackageFunctions {
   }
 
 
-  @grok.decorators.init()
+  @grok.decorators.init({tags: ['init']})
   static async init(): Promise<void> {
     if (initSequenceTranslatorPromise === null)
       _package.startInit(initSequenceTranslatorPromise = initSequenceTranslatorInt());
@@ -103,7 +104,8 @@ export class PackageFunctions {
   @grok.decorators.app({
     icon: 'img/icons/translator.png',
     browsePath: 'Peptides | Oligo Toolkit',
-    name: 'Oligo Translator'
+    name: 'Oligo Translator',
+    tags: ['app']
   })
   static async oligoTranslatorApp(): Promise<DG.ViewBase> {
     const view = await getSpecifiedAppView(APP_NAME.TRANSLATOR);
@@ -114,7 +116,8 @@ export class PackageFunctions {
   @grok.decorators.app({
     icon: 'img/icons/pattern.png',
     browsePath: 'Peptides | Oligo Toolkit',
-    name: 'Oligo Pattern'
+    name: 'Oligo Pattern',
+    tags: ['app']
   })
   static async oligoPatternApp(): Promise<DG.ViewBase> {
     const view = await getSpecifiedAppView(APP_NAME.PATTERN);
@@ -125,7 +128,8 @@ export class PackageFunctions {
   @grok.decorators.app({
     icon: 'img/icons/structure.png',
     browsePath: 'Peptides | Oligo Toolkit',
-    name: 'Oligo Structure'
+    name: 'Oligo Structure',
+    tags: ['app']
   })
   static async oligoStructureApp(): Promise<DG.ViewBase> {
     const view = await getSpecifiedAppView(APP_NAME.STRUCTURE);
@@ -229,7 +233,7 @@ export class PackageFunctions {
     await polyToolConvertUI();
   }
 
-  @grok.decorators.editor()
+  @grok.decorators.editor({tags: ['editor']})
   static async getPolyToolConvertEditor(
     call: DG.FuncCall): Promise<DG.Column<string> | null> {
     const funcEditor = await PolyToolConvertFuncEditor.create(call);
@@ -296,10 +300,11 @@ export class PackageFunctions {
   @grok.decorators.func({
     meta: {
       icon: 'img/icons/structure.png',
-      browsePath: 'Peptides | PolyTool'
+      browsePath: 'Peptides | PolyTool',
+      role: 'app'
     },
-    tags: ['app'],
-    name: 'HELM Enumerator'
+    name: 'HELM Enumerator',
+    tags: ['app']
   })
   static async ptEnumeratorHelmApp(): Promise<void> {
     await polyToolEnumerateHelmUI();
@@ -309,10 +314,11 @@ export class PackageFunctions {
   @grok.decorators.func({
     meta: {
       icon: 'img/icons/structure.png',
-      browsePath: 'Peptides | PolyTool'
+      browsePath: 'Peptides | PolyTool',
+      role: 'app'
     },
-    tags: ['app'],
-    name: 'Chem Enumerator'
+    name: 'Chem Enumerator',
+    tags: ['app']
   })
   static async ptEnumeratorChemApp(): Promise<void> {
     polyToolEnumerateChemUI();
@@ -394,6 +400,14 @@ export class PackageFunctions {
     col.tags[PolyToolTags.dataRole] = 'template';
     col.temp[SeqTemps.notationProvider] = new CyclizedNotationProvider(separator, _package.helmHelper);
   }
+
+  @grok.decorators.func({
+    name: 'harmonizedSequenceNotationProviderConstructor',
+    meta: {role: 'notationProviderConstructor'}
+  })
+  static async harmonizedSequenceNotationProviderConstructor(): Promise<typeof CyclizedNotationProvider> {
+    return CyclizedNotationProvider;
+  }
 }
 
 //name: getSpecifiedAppView

package/src/polytool/pt-enumerate-seq-dialog.ts

@@ -19,11 +19,13 @@ import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
 import {InputColumnBase} from '@datagrok-libraries/bio/src/types/input';
 import {SeqValueBase} from '@datagrok-libraries/bio/src/utils/macromolecule/seq-handler';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {SeqTemps} from '@datagrok-libraries/bio/src/utils/macromolecule/seq-handler';
 
 import {PolyToolEnumeratorParams, PolyToolEnumeratorType, PolyToolEnumeratorTypes} from './types';
 import {getLibrariesList, LIB_PATH} from './utils';
 import {doPolyToolEnumerateHelm, PT_HELM_EXAMPLE} from './pt-enumeration-helm';
 import {PolyToolPlaceholdersInput} from './pt-placeholders-input';
+import {showMonomerSelectionDialog} from './pt-monomer-selection-dialog';
 import {defaultErrorHandler} from '../utils/err-info';
 import {PolyToolPlaceholdersBreadthInput} from './pt-placeholders-breadth-input';
 import {PT_UI_DIALOG_ENUMERATION, PT_UI_GET_HELM, PT_UI_HIGHLIGHT_MONOMERS, PT_UI_RULES_USED, PT_UI_USE_CHIRALITY} from './const';
@@ -32,11 +34,13 @@ import {RuleInputs, RULES_PATH, RULES_STORAGE_NAME} from './conversion/pt-rules'
 import {Chain} from './conversion/pt-chain';
 import {polyToolConvert} from './pt-dialog';
 
-import {_package, PackageFunctions} from '../package';
+import {_package, applyNotationProviderForCyclized, PackageFunctions} from '../package';
 import {buildMonomerHoverLink} from '@datagrok-libraries/bio/src/monomer-works/monomer-hover';
 import {getRdKitModule} from '@datagrok-libraries/bio/src/chem/rdkit-module';
 
 import {PolymerTypes} from '@datagrok-libraries/js-draw-lite/src/types/org';
+import { CyclizedNotationProvider } from '../utils/cyclized';
+import { INotationProvider } from '@datagrok-libraries/bio/src/utils/macromolecule/types';
 
 type PolyToolEnumerateInputs = {
   macromolecule: HelmInputBase;
@@ -161,9 +165,22 @@ async function getPolyToolEnumerateDialog(
     const getValue = (cell?: DG.Cell): [SeqValueBase, PolyToolDataRole] => {
       let resSeqValue: SeqValueBase;
       let resDataRole: PolyToolDataRole;
+      let resHelm: string | null = null;
       if (cell && cell.rowIndex >= 0 && cell?.column.semType == DG.SEMTYPE.MACROMOLECULE) {
         const sh = seqHelper.getSeqHandler(cell.column);
         resSeqValue = sh.getValue(cell.rowIndex);
+        // if (cell.column.temp?.[SeqTemps.notationProvider])
+        if (cell.column.temp?.[SeqTemps.notationProvider] && !(cell.column.temp[SeqTemps.notationProvider] instanceof CyclizedNotationProvider)) {
+          const notationProvider = cell.column.temp[SeqTemps.notationProvider] as INotationProvider;
+          resHelm = notationProvider.getHelm(resSeqValue.value, {});
+          // create temp helm column to apply notation provider for cyclized sequences
+          let seqCol: DG.Column;
+          DG.DataFrame.fromColumns([seqCol = DG.Column.fromList(DG.COLUMN_TYPE.STRING, 'seq', [resHelm])]);
+          seqCol.semType = DG.SEMTYPE.MACROMOLECULE;
+          seqCol.meta.units = NOTATION.HELM;
+          const sh = seqHelper.getSeqHandler(seqCol);
+          resSeqValue = sh.getValue(0);
+        }
         resDataRole = (resSeqValue.tags[PolyToolTags.dataRole] as PolyToolDataRole.template) ?? PolyToolDataRole.macromolecule;
       } else {
         const seqCol = DG.Column.fromList(DG.COLUMN_TYPE.STRING, 'seq', [PT_HELM_EXAMPLE]);
@@ -200,8 +217,13 @@ async function getPolyToolEnumerateDialog(
                 if (aa.T === 'ATOM') {
                   try {
                     if (!seqValue.isDna() && !seqValue.isRna()) {
-                      const canonicalSymbol = seqValue.getSplitted().getCanonical(aa.bio!.continuousId - 1);
-                      return monomerLibFuncs.getMonomer(aa.bio!.type, canonicalSymbol);
+                      if (cell?.column?.temp?.[SeqTemps.notationProvider] instanceof CyclizedNotationProvider) {
+                        const canonicalSymbol = seqValue.getSplitted().getCanonical(aa.bio!.continuousId - 1);
+                        return monomerLibFuncs.getMonomer(aa.bio!.type, canonicalSymbol);
+                      } else {
+                        const canonicalSymbol = aa.elem;
+                        return monomerLibFuncs.getMonomer(aa.bio!.type, canonicalSymbol);
+                      }
                     } else {
                       const canonicalSymbol = seqValue.getSplittedWithSugarsAndPhosphates().getCanonical(aa.bio!.continuousId - 1);
                       return monomerLibFuncs.getMonomer(aa.bio!.type, canonicalSymbol);
@@ -273,6 +295,30 @@ async function getPolyToolEnumerateDialog(
     inputs.library.root.style.setProperty('display', 'none');
     inputs.trivialNameCol.addOptions(trivialNameSampleDiv);
 
+    // Wire up monomer cell double-click to open selection dialog
+    inputs.placeholders.onMonomerCellEdit = async (position: number, currentMonomers: string[]) => {
+      const mol = inputs.macromolecule.molValue;
+      if (position < 0 || position >= mol.atoms.length)
+        return null;
+      const atom = mol.atoms[position];
+      const helmType: HelmType = atom.biotype()!;
+      const polymerType = helmTypeToPolymerType(helmType);
+      return showMonomerSelectionDialog(monomerLib, polymerType, currentMonomers);
+    };
+
+    // Wire up breadth monomer cell double-click to open selection dialog
+    inputs.placeholdersBreadth.onMonomerCellEdit = async (
+      start: number, _end: number, currentMonomers: string[],
+    ) => {
+      const mol = inputs.macromolecule.molValue;
+      if (start < 0 || start >= mol.atoms.length)
+        return null;
+      const atom = mol.atoms[start];
+      const helmType: HelmType = atom.biotype()!;
+      const polymerType = helmTypeToPolymerType(helmType);
+      return showMonomerSelectionDialog(monomerLib, polymerType, currentMonomers);
+    };
+
     let placeholdersValidity: string | null = null;
     inputs.placeholders.addValidator((value: string): string | null => {
       const errors: string[] = [];
@@ -475,7 +521,7 @@ async function getPolyToolEnumerateDialog(
       const cell = grok.shell.tv.dataFrame.currentCell;
       if (cell.column.semType !== DG.SEMTYPE.MACROMOLECULE) return;
 
-      [seqValue, dataRole] = getValue();
+      [seqValue, dataRole] = getValue(cell);
       fillForCurrentCell(seqValue, dataRole, cell);
     }));
 
@@ -554,9 +600,9 @@ async function getPolyToolEnumerateDialog(
     const exec = async (): Promise<void> => {
       try {
         const srcHelm = inputs.macromolecule.stringValue;
-        const helmSelections: number[] = wu.enumerate<HelmAtom>(inputs.macromolecule.molValue.atoms)
+        const helmSelections = wu.enumerate<HelmAtom>(inputs.macromolecule.molValue.atoms)
           .filter(([a, aI]) => a.highlighted)
-          .map(([a, aI]) => aI).toArray();
+          .map(([a, aI]) => a).toArray();
         if (inputs.enumeratorType.value === PolyToolEnumeratorTypes.Library) {
           if (helmSelections.length === 0) {
             grok.shell.warning('PolyTool: position for enumeration was not selected');
@@ -595,7 +641,8 @@ async function getPolyToolEnumerateDialog(
               grok.shell.warning(`Monomer Library '${monLibName}' was not found`);
               return;
             }
-            const peptideMonomers = monLib.getMonomerSymbolsByType(PolymerTypes.PEPTIDE);
+            const polymerType = helmTypeToPolymerType(helmSelections[0].biotype() ?? 'HELM_AA');
+            const peptideMonomers = monLib.getMonomerSymbolsByType(polymerType);
             placeHoldersValue[0].monomers = peptideMonomers;
             enumerationType = PolyToolEnumeratorTypes.Single;
           }

package/src/polytool/pt-monomer-selection-dialog.ts

@@ -0,0 +1,200 @@
+/* eslint-disable max-len */
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {HelmType, PolymerType} from '@datagrok-libraries/bio/src/helm/types';
+import {IMonomerLib, Monomer} from '@datagrok-libraries/bio/src/types/monomer-library';
+import {polymerTypeToHelmType} from '@datagrok-libraries/bio/src/utils/macromolecule/utils';
+
+const MAX_SUGGESTIONS = 20;
+
+/** Shows a dialog for selecting monomers with autocomplete and tag-based display.
+ * @returns comma-separated monomer symbols, or null if cancelled */
+export async function showMonomerSelectionDialog(
+  monomerLib: IMonomerLib, polymerType: PolymerType, presetMonomers?: string[],
+): Promise<string[] | null> {
+  return new Promise<string[] | null>((resolve) => {
+    const helmType: HelmType = polymerTypeToHelmType(polymerType);
+    const allSymbols = monomerLib.getMonomerSymbolsByType(polymerType);
+
+    const selectedMonomers: string[] = presetMonomers ? [...presetMonomers] : [];
+
+    const tagsHost = ui.div([], {style: {display: 'flex', flexWrap: 'wrap', gap: '4px', marginTop: '8px', maxWidth: '400px'}});
+    const input = ui.input.string('Monomers', {value: ''});
+    const inputEl = input.input as HTMLInputElement;
+    inputEl.setAttribute('autocomplete', 'off');
+    inputEl.placeholder = 'Type to search...';
+
+    let currentMenu: DG.Menu | null = null;
+    let menuItems: HTMLElement[] = [];
+    let highlightedIndex = -1;
+
+    function renderTags(): void {
+      tagsHost.innerHTML = '';
+      for (const symbol of selectedMonomers) {
+        const removeBtn = ui.iconFA('times', () => {
+          const idx = selectedMonomers.indexOf(symbol);
+          if (idx >= 0) {
+            selectedMonomers.splice(idx, 1);
+            renderTags();
+          }
+        });
+        removeBtn.style.marginLeft = '4px';
+        removeBtn.style.cursor = 'pointer';
+
+        const tag = ui.div([ui.span([symbol]), removeBtn], {
+          style: {
+            display: 'inline-flex', alignItems: 'center',
+            padding: '2px 6px', borderRadius: '4px',
+            backgroundColor: 'var(--grey-2)', border: '1px solid var(--grey-3)',
+            fontSize: '12px', cursor: 'default',
+          },
+        });
+        // Tooltip on hover
+        tag.addEventListener('mouseenter', (e) => {
+          const tooltip = monomerLib.getTooltip(helmType, symbol);
+          ui.tooltip.show(tooltip, tag.getBoundingClientRect().left, tag.getBoundingClientRect().bottom + 16);
+        });
+        tag.addEventListener('mouseleave', () => { ui.tooltip.hide(); });
+
+        tagsHost.appendChild(tag);
+      }
+    }
+
+    function addMonomer(symbol: string): void {
+      if (!selectedMonomers.includes(symbol)) {
+        selectedMonomers.push(symbol);
+        renderTags();
+      }
+      inputEl.value = '';
+      hideMenu();
+      inputEl.focus();
+    }
+
+    function hideMenu(): void {
+      if (currentMenu) {
+        currentMenu.hide();
+        currentMenu = null;
+      }
+      menuItems = [];
+      highlightedIndex = -1;
+    }
+
+    function getSuggestions(query: string): {symbol: string, monomer: Monomer | null}[] {
+      const q = query.toLowerCase();
+      const results: {symbol: string, monomer: Monomer | null, rank: number}[] = [];
+
+      for (const symbol of allSymbols) {
+        if (selectedMonomers.includes(symbol))
+          continue;
+        const monomer = monomerLib.getMonomer(polymerType, symbol);
+        const symLower = symbol.toLowerCase();
+        const nameLower = monomer?.name?.toLowerCase() ?? '';
+
+        if (symLower.startsWith(q))
+          results.push({symbol, monomer, rank: 0});
+        else if (symLower.includes(q))
+          results.push({symbol, monomer, rank: 1});
+        else if (nameLower.includes(q))
+          results.push({symbol, monomer, rank: 2});
+      }
+
+      results.sort((a, b) => a.rank - b.rank || a.symbol.localeCompare(b.symbol));
+      return results.slice(0, MAX_SUGGESTIONS);
+    }
+
+    function showSuggestions(): void {
+      hideMenu();
+      const query = inputEl.value.trim();
+      if (!query)
+        return;
+
+      const suggestions = getSuggestions(query);
+      if (suggestions.length === 0)
+        return;
+
+      currentMenu = DG.Menu.popup();
+      const maxElement = suggestions.reduce((max, s) => {
+        const label = s.monomer?.name ? `${s.symbol} - ${s.monomer.name}` : s.symbol;
+        if (max.length < label.length)
+          return label;
+        return max;
+      }, '');
+      currentMenu.item(maxElement, () => {}); // Dummy item to set menu width
+
+      const causedBy = new MouseEvent('mousemove', {clientX: inputEl.getBoundingClientRect().left, clientY: inputEl.getBoundingClientRect().bottom});
+      currentMenu.show({causedBy: causedBy,
+        y: inputEl.offsetHeight + inputEl.offsetTop, x: inputEl.offsetLeft});
+
+      // collect menu items for keyboard navigation
+      setTimeout(() => {
+        currentMenu?.clear();
+        for (const s of suggestions) {
+          const label = s.monomer?.name ? `${s.symbol} - ${s.monomer.name}` : s.symbol;
+          currentMenu?.item(label, () => { addMonomer(s.symbol); });
+        }
+
+        const menuRoot = document.querySelector('.d4-menu-popup:last-of-type');
+        if (menuRoot)
+          menuItems = Array.from(menuRoot.querySelectorAll('.d4-menu-item')) as HTMLElement[];
+
+        highlightedIndex = -1;
+      }, 0);
+    }
+
+    function updateHighlight(newIndex: number): void {
+      if (menuItems.length === 0)
+        return;
+      if (highlightedIndex >= 0 && highlightedIndex < menuItems.length)
+        menuItems[highlightedIndex].classList.remove('d4-menu-item-hover');
+      highlightedIndex = newIndex;
+      if (highlightedIndex >= 0 && highlightedIndex < menuItems.length) {
+        menuItems[highlightedIndex].classList.add('d4-menu-item-hover');
+        menuItems[highlightedIndex].scrollIntoView({block: 'nearest'});
+      }
+    }
+
+    inputEl.addEventListener('input', () => { showSuggestions(); });
+
+    inputEl.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (menuItems.length > 0) {
+          const next = (highlightedIndex + 1) % menuItems.length;
+          updateHighlight(next);
+        }
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        if (menuItems.length > 0) {
+          const prev = (highlightedIndex - 1 + menuItems.length) % menuItems.length;
+          updateHighlight(prev);
+        }
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (highlightedIndex >= 0 && highlightedIndex < menuItems.length) {
+          menuItems[highlightedIndex].click();
+        } else {
+          // If input exactly matches a symbol, add it directly
+          const val = inputEl.value.trim();
+          if (val && allSymbols.includes(val))
+            addMonomer(val);
+        }
+      } else if (e.key === 'Escape') {
+        hideMenu();
+      }
+    });
+
+    renderTags();
+
+    const dlg = ui.dialog({title: 'Select Monomers', showFooter: true})
+      .add(ui.div([input.root, tagsHost], {style: {minWidth: '350px', minHeight: '200px'}}))
+      .onOK(() => { resolve(selectedMonomers); })
+      .onCancel(() => { resolve(null); })
+      .show({resizable: true});
+    // dlg.root.addEventListener('close', () => { hideMenu(); });
+
+    inputEl.focus();
+    setTimeout(() => { showSuggestions(); }, 0);
+  });
+}