@datagrok/sequence-translator 1.4.7 → 1.4.10

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

@@ -2,9 +2,10 @@ import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
-import {Unsubscribable} from 'rxjs';
+import {fromEvent, Unsubscribable} from 'rxjs';
 import {PolyToolBreadthPlaceholder} from './types';
 import {parseMonomerSymbolList} from './pt-placeholders-input';
+import {GridCellRenderArgs} from 'datagrok-api/dg';
 
 export class PolyToolPlaceholdersBreadthInput extends DG.JsInputBase<DG.DataFrame> {
   get inputType(): string { return 'Breadth'; }
@@ -15,71 +16,110 @@ export class PolyToolPlaceholdersBreadthInput extends DG.JsInputBase<DG.DataFram
 
   getValue(): DG.DataFrame { return this.grid.dataFrame; }
 
-  setValue(value: DG.DataFrame): void { this.grid.dataFrame = value; }
+  setValue(value: DG.DataFrame): void {
+    this.setDataFrame(value);
+  }
 
   getStringValue(): string { return this.grid.dataFrame.toCsv(); }
 
-  setStringValue(str: string): void { this.grid.dataFrame = DG.DataFrame.fromCsv(str); }
+  setStringValue(str: string): void {
+    this.setDataFrame(DG.DataFrame.fromCsv(str));
+  }
 
   get placeholdersBreadthValue(): PolyToolBreadthPlaceholder[] {
     return dfToPlaceholdersBreadth(this.grid.dataFrame);
   }
 
   private readonly gridHost: HTMLDivElement;
-  public readonly grid: DG.Grid;
+  public grid: DG.Grid;
 
   private subs: Unsubscribable[] = [];
 
-  protected constructor(name: string | undefined, grid: DG.Grid, heightRowCount?: number) {
+  protected constructor(
+    private readonly name: string | undefined,
+    heightRowCount?: number, options?: {}
+  ) {
     super();
 
-    if (name) this.captionLabel.innerText = name;
-
-    this.gridHost = ui.div([], {
+    this.caption = name ?? '';
+    this.root.classList.add('ui-input-polytool-pos-grid');
+    this.root.append(this.gridHost = ui.div([], {
       classes: 'ui-input-editor',
       style: {width: '100%', height: '100%', marginTop: '-8px', marginBottom: '8px', paddingBottom: '4px'},
+    }));
+    this.render(heightRowCount, options).then(() => {});
+  }
+
+  detach(): void {
+    for (const sub of this.subs) sub.unsubscribe();
+    for (const sub of this.dataFrameSubs) sub.unsubscribe();
+  }
+
+  async render(heightRowCount?: number, options?: {}): Promise<void> {
+    let removeCol: DG.Column<boolean>;
+    const df: DG.DataFrame = DG.DataFrame.fromColumns([
+      removeCol = DG.Column.fromType(DG.COLUMN_TYPE.STRING, 'Remove', 0),
+      DG.Column.fromType(DG.COLUMN_TYPE.INT, 'Start', 0),
+      DG.Column.fromType(DG.COLUMN_TYPE.INT, 'End', 0),
+      DG.Column.fromType(DG.COLUMN_TYPE.STRING, 'Monomers', 0),
+    ])!;
+    removeCol.setTag(DG.TAGS.FRIENDLY_NAME, '');
+    this.grid = (await df.plot.fromType(DG.VIEWER.GRID, options)) as DG.Grid;
+    this.grid.sort(['Start', 'End']);
+    this.grid.columns.byIndex(1)!.width = this.grid.props.rowHeight + 2;
+
+    this.grid.onCellRender.subscribe((eventArgs: GridCellRenderArgs) => {
+      const gridCell = eventArgs.cell;
+      if (gridCell.tableColumn?.name == removeCol.name && (gridCell?.tableRowIndex ?? -1) >= 0) {
+        gridCell.element = ui.div(ui.icons.delete(() => {
+          this.grid.dataFrame.rows.removeAt(gridCell.tableRowIndex!);
+        }, 'Delete'), {
+          style: {
+            height: `${gridCell.grid.props.rowHeight}px`, color: 'var(--grey-6)',
+            display: 'flex', flexDirection: 'row', justifyContent: 'center'
+          }
+        });
+      }
     });
 
-    this.grid = grid;
-    this.gridHost.append(this.grid.root);
+    this.updateGridHeight(heightRowCount ?? this.grid.dataFrame.rowCount + 0.7);
+    this.subs.push(ui.onSizeChanged(this.grid.root)
+      .subscribe(this.gridRootOnSizeChanged.bind(this)));
+    this.subs.push(fromEvent<KeyboardEvent>(this.grid.root, 'keydown')
+      .subscribe((e: KeyboardEvent) => {
+        if (e.key === 'Enter') e.stopPropagation();
+      }));
+    this.setDataFrame(df);
 
-    if (heightRowCount != null) {
-      this.updateGridHeight(heightRowCount + 0.7);
-    } else {
-      this.updateGridHeight(this.grid.dataFrame.rowCount + 0.6);
-      this.subs.push(this.grid.dataFrame.onRowsAdded
-        .subscribe(() => { this.updateGridHeight(this.grid.dataFrame.rowCount + 0.6); }));
-    }
     this.grid.root.style.width = `100%`;
+    this.gridHost.append(this.grid.root);
+  }
 
-    this.subs.push(this.grid.dataFrame.onDataChanged.subscribe(() => {
-      this.fireChanged();
-    }));
+  private dataFrameSubs: Unsubscribable[] = [];
 
-    this.subs.push(ui.onSizeChanged(this.grid.root).subscribe(() => {
-      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 - this.grid.columns.byIndex(2)!.width - 10;
-    }));
+  private setDataFrame(dataFrame: DG.DataFrame): void {
+    for (const sub of this.dataFrameSubs) sub.unsubscribe();
+    this.grid.dataFrame = dataFrame;
 
-    this.root.classList.add('ui-input-polytool-pos-grid');
-    this.root.append(this.gridHost);
-  }
+    this.dataFrameSubs.push(this.grid.dataFrame.onRowsRemoved
+      .subscribe(() => {
+        this.updateGridHeight(this.grid.dataFrame.rowCount + 0.7);
+        this.fireChanged();
+      }));
+    this.dataFrameSubs.push(this.grid.dataFrame.onRowsAdded
+      .subscribe(() => { this.updateGridHeight(this.grid.dataFrame.rowCount + 0.7); }));
+    this.dataFrameSubs.push(this.grid.dataFrame.onDataChanged.subscribe(() => {
+      this.fireChanged();
+    }));
 
-  detach(): void {
-    for (const sub of this.subs) sub.unsubscribe();
+    this.updateGridHeight(this.grid.dataFrame.rowCount + 0.7);
+    this.fireChanged();
   }
 
   public static async create(
     name?: string, options?: {}, heightRowCount?: number
   ): Promise<PolyToolPlaceholdersBreadthInput> {
-    const df: DG.DataFrame = DG.DataFrame.fromColumns([
-      DG.Column.fromType(DG.COLUMN_TYPE.INT, 'Start', 0),
-      DG.Column.fromType(DG.COLUMN_TYPE.INT, 'End', 0),
-      DG.Column.fromType(DG.COLUMN_TYPE.STRING, 'Monomers', 0),
-    ])!;
-    const grid = (await df.plot.fromType(DG.VIEWER.GRID, options)) as DG.Grid;
-    grid.sort(['Start', 'End']);
-    return new PolyToolPlaceholdersBreadthInput(name, grid, heightRowCount);
+    return new PolyToolPlaceholdersBreadthInput(name, heightRowCount, options);
   }
 
   // -- Update view --
@@ -92,8 +132,9 @@ export class PolyToolPlaceholdersBreadthInput extends DG.JsInputBase<DG.DataFram
   // -- Handle events --
 
   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 - this.grid.columns.byIndex(2)!.width - 10;
+    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 -
+      this.grid.columns.byIndex(2)!.width - this.grid.columns.byIndex(3)!.width - 10;
   }
 }
 

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

@@ -2,9 +2,10 @@ import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
-import {Unsubscribable} from 'rxjs';
+import {fromEvent, Unsubscribable} from 'rxjs';
 
 import {PolyToolPlaceholder} from './types';
+import {GridCellRenderArgs} from 'datagrok-api/dg';
 
 export class PolyToolPlaceholdersInput extends DG.JsInputBase<DG.DataFrame> {
   get inputType(): string { return 'Positions'; }
@@ -15,69 +16,126 @@ export class PolyToolPlaceholdersInput extends DG.JsInputBase<DG.DataFrame> {
 
   getValue(): DG.DataFrame { return this.grid.dataFrame; }
 
-  setValue(value: DG.DataFrame): void { this.grid.dataFrame = value; }
+  setValue(value: DG.DataFrame): void {
+    this.setDataFrame(value);
+  }
 
   getStringValue(): string { return this.grid.dataFrame.toCsv(); }
 
-  setStringValue(str: string): void { this.grid.dataFrame = DG.DataFrame.fromCsv(str); }
+  setStringValue(str: string): void {
+    this.setDataFrame(DG.DataFrame.fromCsv(str));
+  }
 
   get placeholdersValue(): PolyToolPlaceholder[] {
     return dfToPlaceholders(this.grid.dataFrame);
   }
 
   private readonly gridHost: HTMLDivElement;
-  public readonly grid: DG.Grid;
+  private grid!: DG.Grid;
 
   private subs: Unsubscribable[] = [];
 
-  protected constructor(name: string | undefined, grid: DG.Grid, heightRowCount?: number) {
+  protected constructor(
+    private readonly name: string | undefined,
+    heightRowCount?: number, options?: {},
+  ) {
     super();
 
-    if (name) this.captionLabel.innerText = name;
-
-    this.gridHost = ui.div([], {
+    this.caption = name ?? '';
+    this.root.classList.add('ui-input-polytool-pos-grid');
+    this.root.append(this.gridHost = ui.div([], {
       classes: 'ui-input-editor',
       style: {width: '100%', height: '100%', marginTop: '-8px', marginBottom: '8px', paddingBottom: '4px'},
+    }));
+    this.render(heightRowCount, options).then(() => {});
+  }
+
+  detach(): void {
+    for (const sub of this.subs) sub.unsubscribe();
+    for (const sub of this.dataFrameSubs) sub.unsubscribe();
+  }
+
+  async render(heightRowCount?: number, options?: {}): Promise<void> {
+    // this.captionLabel.appendChild(ui.divH([ui.divText(this.name ?? this.caption), ui.icons.add(() => {}, 'Add')]));
+    let removeCol: DG.Column<boolean>;
+    const df: DG.DataFrame = DG.DataFrame.fromColumns([
+      removeCol = DG.Column.fromType(DG.COLUMN_TYPE.STRING, 'Remove', 0),
+      DG.Column.fromType(DG.COLUMN_TYPE.INT, 'Position', 0),
+      DG.Column.fromType(DG.COLUMN_TYPE.STRING, 'Monomers', 0),])!;
+    removeCol.setTag(DG.TAGS.FRIENDLY_NAME, '');
+    this.grid = (await df.plot.fromType(DG.VIEWER.GRID, options)) as DG.Grid;
+    this.grid.sort(['Position']);
+    this.grid.columns.byIndex(1)!.width = this.grid.props.rowHeight + 2;
+
+    this.grid.onCellRender.subscribe((eventArgs: GridCellRenderArgs) => {
+      const gridCell = eventArgs.cell;
+      if (gridCell.tableColumn?.name == removeCol.name && (gridCell?.tableRowIndex ?? -1) >= 0) {
+        gridCell.element = ui.div(ui.icons.delete(() => {
+          this.grid.dataFrame.rows.removeAt(gridCell.tableRowIndex!);
+        }, 'Delete'), {
+          style: {
+            height: `${gridCell.grid.props.rowHeight}px`, color: 'var(--grey-6)',
+            display: 'flex', flexDirection: 'row', justifyContent: 'center'
+          }
+        });
+      }
     });
 
-    this.grid = grid;
-    this.gridHost.append(this.grid.root);
+    this.updateGridHeight(heightRowCount ?? this.grid.dataFrame.rowCount + 0.7);
+    this.subs.push(ui.onSizeChanged(this.grid.root)
+      .subscribe(this.gridRootOnSizeChanged.bind(this)));
+    this.subs.push(fromEvent<KeyboardEvent>(this.grid.root, 'keydown')
+      .subscribe((e: KeyboardEvent) => {
+        if (e.key === 'Enter') e.stopPropagation();
+      }));
+    this.setDataFrame(df);
 
-    if (heightRowCount != null) {
-      this.updateGridHeight(heightRowCount + 0.7);
-    } else {
-      this.updateGridHeight(this.grid.dataFrame.rowCount + 0.6);
-      this.subs.push(this.grid.dataFrame.onRowsAdded
-        .subscribe(() => { this.updateGridHeight(this.grid.dataFrame.rowCount + 0.6); }));
-    }
     this.grid.root.style.width = `100%`;
+    this.gridHost.append(this.grid.root);
+  }
 
-    this.subs.push(this.grid.dataFrame.onDataChanged.subscribe(() => {
-      this.fireChanged();
-    }));
+  private dataFrameSubs: Unsubscribable[] = [];
+
+  private setDataFrame(dataFrame: DG.DataFrame): void {
+    for (const sub of this.dataFrameSubs) sub.unsubscribe();
+    this.grid.dataFrame = dataFrame;
 
-    this.subs.push(ui.onSizeChanged(this.grid.root).subscribe(() => {
-      this.grid.columns.byIndex(2)!.width = this.grid.root.clientWidth - this.grid.horzScroll.root.offsetWidth -
-        this.grid.columns.byIndex(0)!.width - this.grid.columns.byIndex(1)!.width - 10;
+    this.dataFrameSubs.push(this.grid.dataFrame.onRowsRemoved
+      .subscribe(() => {
+        this.updateGridHeight(this.grid.dataFrame.rowCount + 0.7);
+        this.fireChanged();
+      }));
+    this.dataFrameSubs.push(this.grid.dataFrame.onRowsAdded
+      .subscribe(() => { this.updateGridHeight(this.grid.dataFrame.rowCount + 0.7); }));
+    this.dataFrameSubs.push(this.grid.dataFrame.onDataChanged.subscribe(() => {
+      this.fireChanged();
     }));
 
-    this.root.classList.add('ui-input-polytool-pos-grid');
-    this.root.append(this.gridHost);
+    this.updateGridHeight(this.grid.dataFrame.rowCount + 0.7);
+    this.fireChanged();
   }
 
-  detach(): void {
-    for (const sub of this.subs) sub.unsubscribe();
+  /** @param {number} posOutIdx continuous (outer) position index, 0-based */
+  addPosition(posOutIdx: number): void {
+    const phDf = this.grid.dataFrame;
+    const posList = phDf.columns.byName('Position').toList();
+    let rowIdx = posList.indexOf(posOutIdx + 1);
+    if (rowIdx === -1) {
+      rowIdx = posList.findIndex((v) => isNaN(v));
+      if (rowIdx === -1)
+        rowIdx = phDf.rows.addNew(['', posOutIdx + 1, '']).idx;
+      const tgtCell = this.grid.cell('Monomers', rowIdx);
+    }
+    phDf.currentCell = phDf.cell(rowIdx, 'Monomers');
+    //const gridRowIdx = inputs.placeholders.grid.tableRowToGrid(rowIdx);
+    //const monomersGCell = inputs.placeholders.grid.cell('Monomers', gridRowIdx);
+    const k = 42;
   }
 
   public static async create(
     name?: string, options?: {}, heightRowCount?: number
   ): Promise<PolyToolPlaceholdersInput> {
-    const df: DG.DataFrame = DG.DataFrame.fromColumns([
-      DG.Column.fromType(DG.COLUMN_TYPE.INT, 'Position', 0),
-      DG.Column.fromType(DG.COLUMN_TYPE.STRING, 'Monomers', 0),])!;
-    const grid = (await df.plot.fromType(DG.VIEWER.GRID, options)) as DG.Grid;
-    grid.sort(['Position']);
-    return new PolyToolPlaceholdersInput(name, grid, heightRowCount);
+    return new PolyToolPlaceholdersInput(name, heightRowCount, options);
   }
 
   // -- Update view --
@@ -90,8 +148,9 @@ export class PolyToolPlaceholdersInput extends DG.JsInputBase<DG.DataFrame> {
   // -- Handle events --
 
   private gridRootOnSizeChanged(): void {
-    this.grid.columns.byIndex(2)!.width = this.grid.root.clientWidth - this.grid.horzScroll.root.offsetWidth -
-      this.grid.columns.byIndex(0)!.width - this.grid.columns.byIndex(1)!.width - 10;
+    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 -
+      this.grid.columns.byIndex(2)!.width - 10;
   }
 }
 
@@ -111,6 +170,8 @@ export function getPlaceholdersFromText(src: string): PolyToolPlaceholder[] {
 export function dfToPlaceholders(df: DG.DataFrame): PolyToolPlaceholder[] {
   const res: PolyToolPlaceholder[] = [];
   for (let rowI = 0; rowI < df.rowCount; rowI++) {
+    if (df.getCol('Position').isNone(rowI))
+      continue;
     const pos = parseInt(df.get('Position', rowI)) - 1;
     if (!isNaN(pos)) {
       const monomerSymbolList = parseMonomerSymbolList(df.get('Monomers', rowI));

package/src/polytool/pt-unrule.ts

@@ -4,7 +4,7 @@ import * as DG from 'datagrok-api/dg';
 
 import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
 
-import {Chain} from './pt-conversion';
+import {Chain} from './conversion/pt-chain';
 import {getPolyToolUnruleDialog} from './pt-unrule-dialog';
 import {Rules} from './pt-rules';
 

package/src/polytool/types.ts

@@ -13,7 +13,11 @@ export type PolyToolEnumeratorType = typeof PolyToolEnumeratorTypes[keyof typeof
 
 export type PolyToolPlaceholder = { position: number, monomers: string[] };
 
-export type PolyToolBreadthPlaceholder = { start: number, end: number, monomers: string[] };
+export type PolyToolBreadthPlaceholder = {
+  /** 0-based monomer position index */ start: number,
+  /** 0-based monomer position index */ end: number,
+  monomers: string[]
+};
 
 export type PolyToolEnumeratorParams = {
   type: PolyToolEnumeratorType;

package/src/tests/polytool-chain-from-notation-tests.ts

@@ -3,7 +3,7 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import {before, after, category, expect, test, expectArray, testEvent, delay} from '@datagrok-libraries/utils/src/test';
-import {Chain} from '../polytool/pt-conversion';
+import {Chain} from '../polytool/conversion/pt-chain';
 import {getRules} from '../polytool/pt-rules';
 import {getHelmHelper, IHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
 
@@ -23,7 +23,7 @@ category('PolyTool: Chain', () => {
       },
       tgt: {
         templateChain: {monomerCount: [11], linkageCount: 0},
-        mmChain: {monomerCount: [11], linkageCount: 1,}
+        mmChain: {monomerCount: [11], linkageCount: 1}
       },
     },
     'reaction1': {
@@ -124,12 +124,11 @@ category('PolyTool: Chain', () => {
     test(`applyRules-${testName}`, async () => {
       const rules = await getRules(['rules_example.json']);
       const resTemplateChain = Chain.parseNotation(data.templateSeq, helmHelper);
-      const resMmChain = resTemplateChain.applyRules(rules);
+      const resMmChain = await resTemplateChain.applyRules(rules);
       resMmChain.check(true);
       expectArray(resMmChain.monomers.map((mL) => mL.length), tgt.mmChain.monomerCount);
       expect(resMmChain.linkages.length, tgt.mmChain.linkageCount);
       expect(resMmChain.getHelm(), data.mmHelm);
     }, {skipReason: 'applyRules is not implemented'});
   }
-
 });

package/src/tests/polytool-chain-parse-notation-tests.ts

@@ -3,7 +3,8 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import {before, after, category, expect, test, expectArray, testEvent, delay} from '@datagrok-libraries/utils/src/test';
-import {Chain, getInnerIdx, getOuterIdx} from '../polytool/pt-conversion';
+import {Chain} from '../polytool/conversion/pt-chain';
+import {getInnerIdx, getOuterIdx} from '../polytool/conversion/pt-misc';
 import {getRules} from '../polytool/pt-rules';
 import {getHelmHelper, IHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
 

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

@@ -14,7 +14,8 @@ import {getRdKitModule} from '@datagrok-libraries/bio/src/chem/rdkit-module';
 import {RDModule} from '@datagrok-libraries/chem-meta/src/rdkit-api';
 import {getHelmHelper, IHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
 
-import {doPolyToolConvert, getOverriddenLibrary} from '../polytool/pt-conversion';
+import {doPolyToolConvert} from '../polytool/conversion/pt-conversion';
+import {getOverriddenLibrary} from '../polytool/conversion/pt-misc';
 import {getRules} from '../polytool/pt-rules';
 
 

package/src/tests/toAtomicLevel-tests.ts

@@ -15,7 +15,7 @@ import {getRdKitModule} from '@datagrok-libraries/bio/src/chem/rdkit-module';
 import {RDModule} from '@datagrok-libraries/chem-meta/src/rdkit-api';
 
 import {_package} from '../package-test';
-import {getNewMonomer} from '../polytool/pt-conversion';
+import {getNewMonomer} from '../polytool/conversion/pt-misc';
 import {getRules, RuleReaction} from '../polytool/pt-rules';
 
 category('toAtomicLevel', () => {
@@ -24,7 +24,6 @@ category('toAtomicLevel', () => {
   let rdKitModule: RDModule;
 
   before(async () => {
-
     monomerLibHelper = await getMonomerLibHelper();
     userLibSettings = await getUserLibSettings();
     rdKitModule = await getRdKitModule();

package/src/utils/cell-renderer-cyclized.ts

@@ -0,0 +1,37 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import {MonomerPlacer} from '@datagrok-libraries/bio/src/utils/cell-renderer-monomer-placer';
+import {monomerToShort} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {ISeqHelper} from '@datagrok-libraries/bio/src/utils/seq-helper';
+
+import {_package} from '../package';
+
+export class CyclizedCellRendererBack extends MonomerPlacer {
+
+  constructor(
+    gridCol: DG.GridColumn | null, tableCol: DG.Column,
+    maxLengthOfMonomer: number, seqHelper: ISeqHelper
+  ) {
+    super(gridCol, tableCol, _package.logger, maxLengthOfMonomer, () => {
+      const sh = seqHelper.getSeqHandler(tableCol);
+      return {
+        seqHandler: sh,
+        monomerCharWidth: 7,
+        separatorWidth: 11,
+        monomerToShort: monomerToShort,
+      };
+    });
+  }
+
+  override onMouseMove(gridCell: DG.GridCell, e: MouseEvent) {
+    const gridCellBounds: DG.Rect = gridCell.bounds;
+    const argsX = e.offsetX - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCellBounds.x);
+    const left: number | null = this.getPosition(gridCell.tableRowIndex!, argsX, gridCellBounds.width);
+    if(left != null) {
+
+    }
+    super.onMouseMove(gridCell, e);
+  }
+}

package/src/utils/context-menu.ts

@@ -3,7 +3,7 @@ import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 
 import {defaultErrorHandler} from './err-info';
-import {polyToolEnumerateHelmUI} from '../polytool/pt-enumeration-helm-dialog';
+import {polyToolEnumerateHelmUI} from '../polytool/pt-enumerate-seq-dialog';
 import {polyToolEnumerateChemUI} from '../polytool/pt-dialog';
 
 import {_package} from '../package';

package/src/utils/cyclized.ts

@@ -13,11 +13,12 @@ import {CellRendererBackBase} from '@datagrok-libraries/bio/src/utils/cell-rende
 import {MonomerPlacer} from '@datagrok-libraries/bio/src/utils/cell-renderer-monomer-placer';
 import {monomerToShort, StringListSeqSplitted} from '@datagrok-libraries/bio/src/utils/macromolecule/utils';
 import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
-import {getHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
+import {getHelmHelper, IHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
 
-import {Chain} from '../polytool/pt-conversion';
+import {Chain} from '../polytool/conversion/pt-chain';
 
 import {_package} from '../package';
+import {CyclizedCellRendererBack} from './cell-renderer-cyclized';
 
 /* eslint-enable max-len */
 
@@ -25,14 +26,18 @@ export class CyclizedNotationProvider implements INotationProvider {
   private readonly separatorSplitter: SplitterFunc;
   public readonly splitter: SplitterFunc;
 
+  get defaultGapOriginal(): string { return ''; }
+
   constructor(
     public readonly separator: string,
-    protected readonly seqHelper: ISeqHelper
+    protected readonly helmHelper: IHelmHelper
   ) {
     this.separatorSplitter = getSplitterWithSeparator(this.separator);
     this.splitter = this._splitter.bind(this);
   }
 
+  setUnits(): void {}
+
   private _splitter(seq: string): ISeqSplitted {
     const baseSS: ISeqSplitted = this.separatorSplitter(seq);
     return new CyclizedSeqSplitted(
@@ -40,25 +45,17 @@ export class CyclizedNotationProvider implements INotationProvider {
       GapOriginals[NOTATION.SEPARATOR]);
   }
 
-  public async getHelm(seq: string, options?: any): Promise<string> {
-    const helmHelper = await getHelmHelper();
-    const seqChain = await Chain.parseNotation(seq, helmHelper);
+  public getHelm(seq: string, options?: any): string {
+    const seqChain = Chain.parseNotation(seq, this.helmHelper);
     const resPseudoHelm = seqChain.getNotationHelm();
     return resPseudoHelm;
   }
 
   public createCellRendererBack(gridCol: DG.GridColumn | null, tableCol: DG.Column<string>): CellRendererBackBase<string> {
     let maxLengthOfMonomer: number = 4; // (_package.bioProperties ? _package.bioProperties.maxMonomerLength : 4) ?? 50;
-    const back = new MonomerPlacer(gridCol, tableCol, _package.logger, maxLengthOfMonomer,
-      () => {
-        const sh = this.seqHelper.getSeqHandler(tableCol);
-        return {
-          seqHandler: sh,
-          monomerCharWidth: 7,
-          separatorWidth: 11,
-          monomerToShort: monomerToShort,
-        };
-      });
+    const back = new CyclizedCellRendererBack(gridCol, tableCol,
+      maxLengthOfMonomer, this.helmHelper.seqHelper);
+
     back.init().then(() => {});
     return back;
   }
@@ -66,23 +63,23 @@ export class CyclizedNotationProvider implements INotationProvider {
 
 /** Gets canonical monomers for original ones with cyclization marks */
 export class CyclizedSeqSplitted extends StringListSeqSplitted {
-  private readonly seqCList: (string | null)[];
-
   override getCanonical(posIdx: number): string {
     if (this.isGap(posIdx)) return GAP_SYMBOL;
 
-    let cmRes: string | null = this.seqCList[posIdx];
-    if (cmRes === null) {
-      const om = this.getOriginal(posIdx);
-      cmRes = om;
-      if (om[om.length - 1] === ')')
-        cmRes = this.seqCList[posIdx] = om.replace(/\(\d+\)$/, '');
-    }
+    const om = this.getOriginal(posIdx);
+    let cmRes = om;
+    if (om.startsWith('{'))
+      cmRes = om.slice(1);
+    else if (om.endsWith('}'))
+      cmRes = om.slice(0, -1);
+    else if (om.startsWith('('))
+      cmRes = om.replace(/^\(.\d+\)/, '');
+    else if (om.endsWith(')'))
+      cmRes = om.replace(/\(\d+\)$/, '');
     return cmRes;
   }
 
   constructor(seqOList: SeqSplittedBase, gapOriginalMonomer: string) {
     super(seqOList, gapOriginalMonomer);
-    this.seqCList = new Array<string | null>(this.length).fill(null);
   }
 }