@datagrok/sequence-translator 1.10.6 → 1.10.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/sequence-translator",
   "friendlyName": "Sequence Translator",
-  "version": "1.10.6",
+  "version": "1.10.7",
   "author": {
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"
@@ -22,7 +22,7 @@
     }
   ],
   "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",
@@ -55,7 +55,6 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "css-loader": "^6.7.3",
-    "datagrok-tools": "^5.0.0",
     "eslint": "^8.57.0",
     "eslint-config-google": "^0.14.0",
     "style-loader": "^3.3.1",

package/src/package.g.ts

@@ -221,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';
@@ -400,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

@@ -25,6 +25,7 @@ import {PolyToolEnumeratorParams, PolyToolEnumeratorType, PolyToolEnumeratorType
 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';
@@ -294,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[] = [];

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);
+  });
+}

package/src/polytool/pt-placeholders-breadth-input.ts

@@ -7,6 +7,15 @@ import {PolyToolBreadthPlaceholder} from './types';
 import {parseMonomerSymbolList} from './pt-placeholders-input';
 import {GridCellRenderArgs} from 'datagrok-api/dg';
 
+/** Callback invoked when user double-clicks a Monomers cell in the breadth grid.
+ * @param start 0-based start position index
+ * @param end 0-based end position index
+ * @param currentMonomers current monomer symbols
+ * @returns new monomer symbols, or null if cancelled */
+export type BreadthMonomerCellEditCallback = (
+  start: number, end: number, currentMonomers: string[],
+) => Promise<string[] | null>;
+
 export class PolyToolPlaceholdersBreadthInput extends DG.JsInputBase<DG.DataFrame> {
   get inputType(): string { return 'Breadth'; }
 
@@ -30,6 +39,9 @@ export class PolyToolPlaceholdersBreadthInput extends DG.JsInputBase<DG.DataFram
     return dfToPlaceholdersBreadth(this.grid.dataFrame);
   }
 
+  /** Set this callback to handle double-click editing of the Monomers column */
+  onMonomerCellEdit: BreadthMonomerCellEditCallback | null = null;
+
   private readonly gridHost: HTMLDivElement;
   public grid: DG.Grid;
 
@@ -91,6 +103,18 @@ export class PolyToolPlaceholdersBreadthInput extends DG.JsInputBase<DG.DataFram
       }
     });
 
+    // Make Monomers column non-editable (editing via double-click dialog)
+    const monomersGridCol = this.grid.columns.byName('Monomers');
+    if (monomersGridCol)
+      monomersGridCol.editable = false;
+
+    // Double-click on Monomers cell opens the monomer selection dialog
+    this.subs.push(this.grid.onCellDoubleClick.subscribe((gc: DG.GridCell) => {
+      if (gc.tableColumn?.name === 'Monomers' &&
+        gc.tableRowIndex != null && gc.tableRowIndex >= 0)
+        this.handleMonomerCellDoubleClick(gc.tableRowIndex);
+    }));
+
     this.updateGridHeight(heightRowCount ?? this.grid.dataFrame.rowCount + 0.7);
     this.subs.push(ui.onSizeChanged(this.grid.root)
       .subscribe(this.gridRootOnSizeChanged.bind(this)));
@@ -140,6 +164,21 @@ export class PolyToolPlaceholdersBreadthInput extends DG.JsInputBase<DG.DataFram
 
   // -- Handle events --
 
+  private async handleMonomerCellDoubleClick(tableRowIdx: number): Promise<void> {
+    if (!this.onMonomerCellEdit)
+      return;
+    const df = this.grid.dataFrame;
+    const start = parseInt(df.get('Start', tableRowIdx)) - 1;
+    const end = parseInt(df.get('End', tableRowIdx)) - 1;
+    if (isNaN(start) || isNaN(end))
+      return;
+    const currentStr: string = df.get('Monomers', tableRowIdx) ?? '';
+    const currentMonomers = parseMonomerSymbolList(currentStr);
+    const result = await this.onMonomerCellEdit(start, end, currentMonomers);
+    if (result !== null)
+      df.set('Monomers', tableRowIdx, result.join(', '));
+  }
+
   private gridRootOnSizeChanged(): void {
     this.grid.columns.byIndex(4)!.width = this.grid.root.clientWidth - this.grid.horzScroll.root.offsetWidth -
       this.grid.columns.byIndex(0)!.width - this.grid.columns.byIndex(1)!.width -

package/src/polytool/pt-placeholders-input.ts

@@ -7,6 +7,12 @@ import {fromEvent, Unsubscribable} from 'rxjs';
 import {PolyToolPlaceholder} from './types';
 import {GridCellRenderArgs} from 'datagrok-api/dg';
 
+/** Callback invoked when user double-clicks a Monomers cell.
+ * @param position 0-based position index
+ * @param currentMonomers current monomer symbols
+ * @returns new monomer symbols, or null if cancelled */
+export type MonomerCellEditCallback = (position: number, currentMonomers: string[]) => Promise<string[] | null>;
+
 export class PolyToolPlaceholdersInput extends DG.JsInputBase<DG.DataFrame> {
   get inputType(): string { return 'Positions'; }
 
@@ -38,6 +44,9 @@ export class PolyToolPlaceholdersInput extends DG.JsInputBase<DG.DataFrame> {
     return dfToPlaceholders(this.grid.dataFrame);
   }
 
+  /** Set this callback to handle double-click editing of the Monomers column */
+  onMonomerCellEdit: MonomerCellEditCallback | null = null;
+
   private readonly gridHost: HTMLDivElement;
   private grid!: DG.Grid;
 
@@ -89,6 +98,17 @@ export class PolyToolPlaceholdersInput extends DG.JsInputBase<DG.DataFrame> {
       }
     });
 
+    // Make Monomers column non-editable (editing is done via double-click dialog)
+    const monomersGridCol = this.grid.columns.byName('Monomers');
+    if (monomersGridCol)
+      monomersGridCol.editable = false;
+
+    // Double-click on Monomers cell opens the monomer selection dialog
+    this.subs.push(this.grid.onCellDoubleClick.subscribe((gc: DG.GridCell) => {
+      if (gc.tableColumn?.name === 'Monomers' && gc.tableRowIndex != null && gc.tableRowIndex >= 0)
+        this.handleMonomerCellDoubleClick(gc.tableRowIndex);
+    }));
+
     this.updateGridHeight(heightRowCount ?? this.grid.dataFrame.rowCount + 0.7);
     this.subs.push(ui.onSizeChanged(this.grid.root)
       .subscribe(this.gridRootOnSizeChanged.bind(this)));
@@ -160,6 +180,20 @@ export class PolyToolPlaceholdersInput extends DG.JsInputBase<DG.DataFrame> {
 
   // -- Handle events --
 
+  private async handleMonomerCellDoubleClick(tableRowIdx: number): Promise<void> {
+    if (!this.onMonomerCellEdit)
+      return;
+    const df = this.grid.dataFrame;
+    const position = parseInt(df.get('Position', tableRowIdx)) - 1;
+    if (isNaN(position))
+      return;
+    const currentMonomersStr: string = df.get('Monomers', tableRowIdx) ?? '';
+    const currentMonomers = parseMonomerSymbolList(currentMonomersStr);
+    const result = await this.onMonomerCellEdit(position, currentMonomers);
+    if (result !== null)
+      df.set('Monomers', tableRowIdx, result.join(', '));
+  }
+
   private gridRootOnSizeChanged(): void {
     this.grid.columns.byIndex(3)!.width = this.grid.root.clientWidth - this.grid.horzScroll.root.offsetWidth -
       this.grid.columns.byIndex(0)!.width - this.grid.columns.byIndex(1)!.width -

package/src/utils/cyclized.ts

@@ -6,7 +6,7 @@ import wu from 'wu';
 
 /* eslint-disable max-len */
 import {ISeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
-import {INotationProvider, ISeqSplitted, SeqSplittedBase, SplitterFunc} from '@datagrok-libraries/bio/src/utils/macromolecule/types';
+import {INotationProvider, ISeqSplitted, NotationProviderBase, SeqSplittedBase, SplitterFunc} from '@datagrok-libraries/bio/src/utils/macromolecule/types';
 import {getSplitterWithSeparator} from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {GAP_SYMBOL, GapOriginals, NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
 import {CellRendererBackBase} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
@@ -22,16 +22,22 @@ import {CyclizedCellRendererBack} from './cell-renderer-cyclized';
 
 /* eslint-enable max-len */
 
-export class CyclizedNotationProvider implements INotationProvider {
+export class CyclizedNotationProvider extends NotationProviderBase implements INotationProvider {
   private readonly separatorSplitter: SplitterFunc;
   public readonly splitter: SplitterFunc;
 
+  static override get notationName(): string { return 'Harmonized Sequence'; }
+  static override get implementsFromHelm(): boolean { return false; }
+  static override convertFromHelm(helm: string, options: any): string {
+    throw new Error('converting from helm not supported yet');
+  }
   get defaultGapOriginal(): string { return ''; }
 
   constructor(
     public readonly separator: string,
     protected readonly helmHelper: IHelmHelper
   ) {
+    super();
     this.separatorSplitter = getSplitterWithSeparator(this.separator);
     this.splitter = this._splitter.bind(this);
   }