@datagrok/sequence-translator 1.10.6 → 1.10.8

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

@@ -0,0 +1,237 @@
+/* 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';
+
+import {parseMonomerSymbolList} from './pt-placeholders-input';
+
+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(); });
+
+    // Handle pasting multiple monomers (space / comma / newline separated)
+    inputEl.addEventListener('paste', (e: ClipboardEvent) => {
+      const pastedText = e.clipboardData?.getData('text');
+      if (!pastedText)
+        return;
+
+      // Split on newlines first, then parse each line (handles parenthesized symbols like hArg(Et,Et))
+      const lines = pastedText.split(/[\n\r]+/).map((l) => l.trim()).filter((l) => l.length > 0);
+      const candidates: string[] = [];
+      for (const line of lines) {
+        const parsed = parseMonomerSymbolList(line);
+        // If parseMonomerSymbolList returned a single token but the line has spaces and no commas,
+        // split on spaces as well (e.g. "K P F" -> ["K", "P", "F"])
+        if (parsed.length === 1 && line.includes(' ') && !line.includes(','))
+          candidates.push(...line.split(/\s+/).map((s) => s.trim()).filter((s) => s.length > 0));
+        else
+          candidates.push(...parsed);
+      }
+
+      if (candidates.length <= 1)
+        return; // Single symbol: let default paste + autocomplete handle it
+
+      e.preventDefault();
+
+      for (const candidate of candidates) {
+        if (allSymbols.includes(candidate) && !selectedMonomers.includes(candidate))
+          selectedMonomers.push(candidate);
+      }
+
+      renderTags();
+      inputEl.value = '';
+      hideMenu();
+      inputEl.focus();
+    });
+
+    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'; }
 
@@ -20,6 +29,19 @@ export class PolyToolPlaceholdersBreadthInput extends DG.JsInputBase<DG.DataFram
     this.setDataFrame(value);
   }
 
+  public invalidateGrid(): void {
+    if (this.grid) {
+      const oldW = this.grid.root.style.width;
+      this.grid.root.style.width = '99.9%';
+      setTimeout(() => {
+        if (oldW)
+          this.grid.root.style.width = oldW;
+        else
+          this.grid.root.style.removeProperty('width');
+      }, 100);
+    }
+  }
+
   getStringValue(): string { return this.grid.dataFrame.toCsv(); }
 
   setStringValue(str: string): void {
@@ -30,6 +52,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 +116,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 +177,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,11 +44,27 @@ 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;
 
   private subs: Unsubscribable[] = [];
 
+  public invalidateGrid(): void {
+    if (this.grid) {
+      const oldW = this.grid.root.style.width;
+      this.grid.root.style.width = '99.9%';
+      setTimeout(() => {
+        if (oldW)
+          this.grid.root.style.width = oldW;
+        else
+          this.grid.root.style.removeProperty('width');
+      }, 100);
+    }
+  }
+
   protected constructor(
     private readonly name: string | undefined,
     heightRowCount?: number, options?: {},
@@ -89,6 +111,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 +193,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/polytool/types.ts

@@ -6,6 +6,7 @@ import {PolymerType} from '@datagrok-libraries/bio/src/helm/types';
 
 export enum PolyToolEnumeratorTypes {
   Single = 'single',
+  Parallel = 'parallel',
   Matrix = 'matrix',
   Library = 'library',
 }
@@ -27,6 +28,7 @@ export type PolyToolEnumeratorParams = {
   breadthPlaceholders?: PolyToolBreadthPlaceholder[];
   keepOriginal?: boolean;
   trivialName?: boolean;
+  fromHelmNotation?: {convert:(helm: string) => string; notationName: string};
 }
 
 export class MonomerNotFoundError extends Error {

package/src/tests/polytool-enumerate-tests.ts

@@ -73,6 +73,66 @@ category('PolyTool: Enumerate', () => {
         {seq: 'PEPTIDE1{[Ac(1)].F.W.G.P.L.T.[C(1)].G.[NH2]}$$$$V2.0', name: '-[Tic]7T'},
       ]
     },
+    'parallel1': {
+      src: 'PEPTIDE1{[Ac(1)].F.W.G.P.L.[Tic].[C(1)].G.[NH2]}$$$$V2.0',
+      params: {
+        type: PolyToolEnumeratorTypes.Parallel,
+        placeholders: [
+          {position: 1, monomers: ['D', 'L']},
+          {position: 6, monomers: ['Y', 'T']},
+        ],
+      },
+      tgt: [
+        {seq: 'PEPTIDE1{[Ac(1)].D.W.G.P.L.Y.[C(1)].G.[NH2]}$$$$V2.0', name: '-F2D-[Tic]7Y'},
+        {seq: 'PEPTIDE1{[Ac(1)].L.W.G.P.L.T.[C(1)].G.[NH2]}$$$$V2.0', name: '-F2L-[Tic]7T'},
+      ],
+    },
+    'parallel-three-positions': {
+      src: 'PEPTIDE1{[Ac(1)].F.W.G.P.L.[Tic].[C(1)].G.[NH2]}$$$$V2.0',
+      params: {
+        type: PolyToolEnumeratorTypes.Parallel,
+        placeholders: [
+          {position: 1, monomers: ['D', 'L', 'K']},
+          {position: 4, monomers: ['K', 'P', 'F4COO']},
+          {position: 6, monomers: ['Y', 'T', 'A']},
+        ],
+      },
+      tgt: [
+        {seq: 'PEPTIDE1{[Ac(1)].D.W.G.K.L.Y.[C(1)].G.[NH2]}$$$$V2.0', name: '-F2D-P5K-[Tic]7Y'},
+        {seq: 'PEPTIDE1{[Ac(1)].L.W.G.P.L.T.[C(1)].G.[NH2]}$$$$V2.0', name: '-F2L-P5P-[Tic]7T'},
+        {seq: 'PEPTIDE1{[Ac(1)].K.W.G.[F4COO].L.A.[C(1)].G.[NH2]}$$$$V2.0', name: '-F2K-P5[F4COO]-[Tic]7A'},
+      ],
+    },
+    'parallel-with-original': {
+      src: 'PEPTIDE1{[Ac(1)].F.W.G.P.L.[Tic].[C(1)].G.[NH2]}$$$$V2.0',
+      params: {
+        type: PolyToolEnumeratorTypes.Parallel,
+        placeholders: [
+          {position: 1, monomers: ['D', 'L']},
+          {position: 6, monomers: ['Y', 'T']},
+        ],
+        keepOriginal: true,
+      },
+      tgt: [
+        {seq: 'PEPTIDE1{[Ac(1)].F.W.G.P.L.[Tic].[C(1)].G.[NH2]}$$$$V2.0', name: ''},
+        {seq: 'PEPTIDE1{[Ac(1)].D.W.G.P.L.Y.[C(1)].G.[NH2]}$$$$V2.0', name: '-F2D-[Tic]7Y'},
+        {seq: 'PEPTIDE1{[Ac(1)].L.W.G.P.L.T.[C(1)].G.[NH2]}$$$$V2.0', name: '-F2L-[Tic]7T'},
+      ],
+    },
+    'parallel-single-position': {
+      src: 'PEPTIDE1{[Ac(1)].F.W.G.P.L.[Tic].[C(1)].G.[NH2]}$$$$V2.0',
+      params: {
+        type: PolyToolEnumeratorTypes.Parallel,
+        placeholders: [
+          {position: 4, monomers: ['K', 'P', 'F4COO']},
+        ],
+      },
+      tgt: [
+        {seq: 'PEPTIDE1{[Ac(1)].F.W.G.K.L.[Tic].[C(1)].G.[NH2]}$$$$V2.0', name: '-P5K'},
+        {seq: 'PEPTIDE1{[Ac(1)].F.W.G.P.L.[Tic].[C(1)].G.[NH2]}$$$$V2.0', name: '-P5P'},
+        {seq: 'PEPTIDE1{[Ac(1)].F.W.G.[F4COO].L.[Tic].[C(1)].G.[NH2]}$$$$V2.0', name: '-P5[F4COO]'},
+      ],
+    },
     'matrix1': {
       src: 'PEPTIDE1{[Ac(1)].F.W.G.P.L.[Tic].[C(1)].G.[NH2]}$$$$V2.0',
       params:

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