@datagrok/bio 2.15.7 → 2.15.8

package/package.json

@@ -5,7 +5,7 @@
     "name": "Aleksandr Tanas",
     "email": "atanas@datagrok.ai"
   },
-  "version": "2.15.7",
+  "version": "2.15.8",
   "description": "Bioinformatics support (import/export of sequences, conversion, visualization, analysis). [See more](https://github.com/datagrok-ai/public/blob/master/packages/Bio/README.md) for details.",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.44.3",
+    "@datagrok-libraries/bio": "^5.44.4",
     "@datagrok-libraries/chem-meta": "^1.2.7",
     "@datagrok-libraries/math": "^1.2.0",
     "@datagrok-libraries/ml": "^6.7.1",
@@ -60,9 +60,9 @@
   "devDependencies": {
     "@datagrok-libraries/helm-web-editor": "^1.1.11",
     "@datagrok-libraries/js-draw-lite": "^0.0.8",
-    "@datagrok/chem": "^1.12.1",
+    "@datagrok/chem": "^1.12.3",
     "@datagrok/dendrogram": "^1.2.33",
-    "@datagrok/helm": "^2.5.2",
+    "@datagrok/helm": "^2.5.3",
     "@types/node": "^17.0.24",
     "@types/wu": "latest",
     "@typescript-eslint/eslint-plugin": "latest",

package/src/analysis/sequence-activity-cliffs.ts

@@ -12,6 +12,9 @@ import {invalidateMols, MONOMERIC_COL_TAGS} from '../substructure-search/substru
 import {TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {SeqHandler} from '@datagrok-libraries/bio/src/utils/seq-handler';
 import {ISeqSplitted} from '@datagrok-libraries/bio/src/utils/macromolecule/types';
+import {HelmType} from '@datagrok-libraries/bio/src/helm/types';
+
+import {getMonomerLib} from '../package';
 
 export async function getDistances(col: DG.Column, seq: string): Promise<Array<number>> {
   const stringArray = col.toList();
@@ -106,9 +109,10 @@ export function createPropPanelElement(params: ITooltipAndPanelParams): HTMLDivE
 
   const molDifferences: { [key: number]: HTMLCanvasElement } = {};
   const sh = SeqHandler.forColumn(params.seqCol);
-  const subParts1 = sh.getSplitted(params.points[0]); // splitter(sequencesArray[0], {uh, rowIdx: -1});
-  const subParts2 = sh.getSplitted(params.points[1]); // splitter(sequencesArray[1], {uh, rowIdx: -1});
-  const canvas = createDifferenceCanvas(subParts1, subParts2, sh.units, molDifferences);
+  const biotype = sh.defaultBiotype;
+  const subParts1 = sh.getSplitted(params.points[0]);
+  const subParts2 = sh.getSplitted(params.points[1]);
+  const canvas = createDifferenceCanvas(subParts1, subParts2, biotype, molDifferences);
   propPanel.append(ui.div(canvas, {style: {width: '300px', overflow: 'scroll'}}));
 
   propPanel.append(createDifferencesWithPositions(molDifferences));
@@ -129,15 +133,16 @@ function createPropPanelField(name: string, value: number): HTMLDivElement {
 export function createDifferenceCanvas(
   subParts1: ISeqSplitted,
   subParts2: ISeqSplitted,
-  units: string,
+  biotype: HelmType,
   molDifferences: { [key: number]: HTMLCanvasElement }): HTMLCanvasElement {
   const canvas = document.createElement('canvas');
   const context = canvas.getContext('2d');
   canvas.height = 30;
+  const monomerLib = getMonomerLib();
   drawMoleculeDifferenceOnCanvas(context!, 0, 0, 0, 30,
     wu.count(0).take(subParts1.length).map((posIdx) => subParts1.getCanonical(posIdx)).toArray(),
     wu.count(0).take(subParts2.length).map((posIdx) => subParts2.getCanonical(posIdx)).toArray(),
-    units, true, molDifferences);
+    biotype, monomerLib, true, molDifferences);
   return canvas;
 }
 

package/src/analysis/sequence-similarity-viewer.ts

@@ -130,7 +130,7 @@ export class SequenceSimilarityViewer extends SequenceSearchBaseViewer {
     const subParts1 = molColSh.getSplitted(this.targetMoleculeIdx);
     const subParts2 = resSh.getSplitted(resDf.currentRowIdx);
     const alignment = alignSequencePair(subParts1, subParts2);
-    const canvas = createDifferenceCanvas(alignment.seq1Splitted, alignment.seq2Splitted, resSh.units, molDifferences);
+    const canvas = createDifferenceCanvas(alignment.seq1Splitted, alignment.seq2Splitted, resSh.defaultBiotype, molDifferences);
     propPanel.append(ui.div(canvas, {style: {width: '300px', overflow: 'scroll'}}));
     if (subParts1.length !== subParts2.length) {
       propPanel.append(ui.divV([

package/src/package.ts

@@ -364,7 +364,7 @@ export function macroMolColumnPropertyPanel(molColumn: DG.Column): DG.Widget {
 //input: semantic_value sequence { semType: Macromolecule }
 //output: widget result
 export function compositionAnalysisWidget(sequence: DG.SemanticValue): DG.Widget {
-  return getCompositionAnalysisWidget(sequence);
+  return getCompositionAnalysisWidget(sequence, monomerLib!);
 }
 
 //name: MacromoleculeDifferenceCellRenderer

package/src/tests/WebLogo-positions-test.ts

@@ -36,7 +36,7 @@ ATC-G-TTGC--
     const wlViewer: WebLogoViewer = (await df.plot.fromType('WebLogo')) as WebLogoViewer;
     await testEvent(wlViewer.onLayoutCalculated, () => {}, () => {
       tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
-    }, 500);
+    }, 500, 'Layout calculate timeout');
     const positions: PI[] = wlViewer['positions'];
 
     const resAllDf1: PI[] = [

package/src/tests/splitters-test.ts

@@ -4,20 +4,21 @@ import * as DG from 'datagrok-api/dg';
 
 import wu from 'wu';
 
-import {
-  after, before, category, test, expect, expectArray
-} from '@datagrok-libraries/utils/src/test';
+import {after, before, category, test, expect, expectArray} from '@datagrok-libraries/utils/src/test';
 import {TAGS as bioTAGS, splitterAsFasta} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {splitterAsHelm} from '@datagrok-libraries/bio/src/utils/macromolecule/utils';
+import {ISeqSplitted} from '@datagrok-libraries/bio/src/utils/macromolecule/types';
+import {IMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
+import {UserLibSettings} from '@datagrok-libraries/bio/src/monomer-works/types';
+import {getMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
 
 import {splitToMonomersUI} from '../utils/split-to-monomers';
 import {awaitGrid} from './utils';
 import * as C from '../utils/constants';
 import {getHelmMonomers} from '../package';
 
-import {splitterAsHelm} from '@datagrok-libraries/bio/src/utils/macromolecule/utils';
-import {ISeqSplitted} from '@datagrok-libraries/bio/src/utils/macromolecule/types';
-
 import {_package} from '../package-test';
+import {getUserLibSettings, setUserLibSettings} from '@datagrok-libraries/bio/src/monomer-works/lib-settings';
 
 category('splitters', async () => {
   before(async () => {
@@ -85,7 +86,23 @@ category('splitters', async () => {
   test('testHelm1', async () => { await _testHelmSplitter(data.testHelm1[0], data.testHelm1[1]); });
   test('testHelm2', async () => { await _testHelmSplitter(data.testHelm2[0], data.testHelm2[1]); });
   test('testHelm3', async () => { await _testHelmSplitter(data.testHelm3[0], data.testHelm3[1]); });
+});
+
+category('splitters', () => {
+  let monomerLibHelper: IMonomerLibHelper;
+  let userLibSettings: UserLibSettings;
 
+  before(async () => {
+    monomerLibHelper = await getMonomerLibHelper();
+    userLibSettings = await getUserLibSettings();
+
+    await monomerLibHelper.loadMonomerLibForTests();
+  });
+
+  after(async () => {
+    await setUserLibSettings(userLibSettings);
+    await monomerLibHelper.loadMonomerLib(true);
+  });
 
   test('splitToMonomers', async () => {
     const df: DG.DataFrame = await grok.dapi.files.readCsv('System:AppData/Bio/samples/MSA.csv');

package/src/utils/cell-renderer.ts

@@ -7,34 +7,31 @@ import * as ui from 'datagrok-api/ui';
 
 import wu from 'wu';
 
-import {printLeftOrCentered, DrawStyle, TAGS as mmcrTAGS} from '@datagrok-libraries/bio/src/utils/cell-renderer';
-import {getUpdatedWidth, MonomerPlacer} from '@datagrok-libraries/bio/src/utils/cell-renderer-monomer-placer';
+import {HelmType} from '@datagrok-libraries/bio/src/helm/types';
+import {printLeftOrCentered, TAGS as mmcrTAGS} from '@datagrok-libraries/bio/src/utils/cell-renderer';
+import {getUpdatedWidth, MonomerPlacer, undefinedColor} from '@datagrok-libraries/bio/src/utils/cell-renderer-monomer-placer';
 import {
-  getPaletteByType,
   monomerToShort,
   MonomerToShortFunc,
   NOTATION,
-  SplitterFunc,
   TAGS as bioTAGS,
   ALPHABET,
 } from '@datagrok-libraries/bio/src/utils/macromolecule';
-import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
-import {UnknownSeqPalettes} from '@datagrok-libraries/bio/src/unknown';
 import {SeqHandler} from '@datagrok-libraries/bio/src/utils/seq-handler';
-import {ISeqSplitted} from '@datagrok-libraries/bio/src/utils/macromolecule/types';
 import {getSplitter} from '@datagrok-libraries/bio/src/utils/macromolecule/utils';
-import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
-import {IMonomerLib} from '@datagrok-libraries/bio/src/types';
+import {IMonomerLib, IMonomerLibBase} from '@datagrok-libraries/bio/src/types';
 import {GapOriginals} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
 import {ISeqMonomer} from '@datagrok-libraries/bio/src/helm/types';
 import {execMonomerHoverLinks} from '@datagrok-libraries/bio/src/monomer-works/monomer-hover';
-import {getGridCellColTemp} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
+import {CellRendererBackBase, getGridCellColTemp} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
 import {HelmTypes} from '@datagrok-libraries/bio/src/helm/consts';
 import {MmcrTemps, rendererSettingsChangedState, tempTAGS} from '@datagrok-libraries/bio/src/utils/cell-renderer-consts';
+import {getMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
 import * as C from './constants';
 
-import {_package, getMonomerLib} from '../package';
-import {max} from 'rxjs/operators';
+import {_package} from '../package';
+import {CellRendererWithMonomerLibBackBase} from './monomer-cell-renderer-base';
+import {timeout} from 'rxjs/operators';
 
 type TempType = { [tagName: string]: any };
 
@@ -78,54 +75,9 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
   }
 
   override onMouseMove(gridCell: DG.GridCell, e: MouseEvent): void {
-    if (gridCell.tableRowIndex == null) return;
-
-    // if (gridCell.cell.column.getTag(bioTAGS.aligned) !== ALIGNMENT.SEQ_MSA)
-    //   return;
-
-    const [_gridCol, tableCol, temp] =
-      getGridCellColTemp<string, MonomerPlacer>(gridCell);
-    const seqColTemp: MonomerPlacer = temp.rendererBack;
-    if (!seqColTemp) return; // Can do nothing without precalculated data
-
-    const gridCellBounds: DG.Rect = gridCell.bounds;
-    // const value: any = gridCell.cell.value;
-    //
-    // const maxLengthWords: number[] = seqColTemp.getCellMonomerLengths(gridCell.tableRowIndex!);
-    // const maxLengthWordsSum: number[] = new Array<number>(maxLengthWords.length).fill(0);
-    // for (let posI: number = 1; posI < maxLengthWords.length; posI++)
-    //   maxLengthWordsSum[posI] = maxLengthWordsSum[posI - 1] + maxLengthWords[posI];
-    // const maxIndex = maxLengthWords.length;
-    const argsX = e.offsetX - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCellBounds.x);
-    const left: number | null = seqColTemp.getPosition(gridCell.tableRowIndex!, argsX, gridCellBounds.width);
-
-    const seqSS = SeqHandler.forColumn(tableCol)
-      .getSplitted(gridCell.tableRowIndex!);
-    if (left !== null && left < seqSS.length) {
-      const sh = SeqHandler.forColumn(tableCol);
-      const alphabet = sh.alphabet ?? ALPHABET.UN;
-      const seqMonomer = {
-        position: left,
-        biotype: alphabet === ALPHABET.RNA || alphabet === ALPHABET.DNA ? HelmTypes.NUCLEOTIDE : HelmTypes.AA,
-        symbol: seqSS.getCanonical(left),
-      } as ISeqMonomer;
-      const tooltipElements: HTMLElement[] = [];
-      let monomerDiv = seqColTemp._monomerStructureMap[seqMonomer.symbol];
-      if (!monomerDiv || true) {
-        monomerDiv = seqColTemp._monomerStructureMap[seqMonomer.symbol] = (() => {
-          const lib: IMonomerLib | null = getMonomerLib();
-          return lib ? lib.getTooltip(seqMonomer.biotype, seqMonomer.symbol) : ui.divText('Monomer library is not available');
-        })();
-      }
-      tooltipElements.push(monomerDiv);
-      ui.tooltip.show(ui.divV(tooltipElements), e.x + 16, e.y + 16);
-
-      execMonomerHoverLinks(gridCell, seqMonomer);
-    } else {
-      //
-      ui.tooltip.hide();
-      execMonomerHoverLinks(gridCell, null);
-    }
+    const [gridCol, tableCol, temp] = getGridCellColTemp<string, MonomerPlacer>(gridCell);
+    const back = temp.rendererBack;
+    back.onMouseMove(gridCell, e);
   }
 
   override onMouseLeave(gridCell: DG.GridCell, e: MouseEvent) {
@@ -200,6 +152,49 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
   }
 }
 
+export class MacromoleculeDifferenceCellRendererBack extends CellRendererWithMonomerLibBackBase {
+  constructor(
+    gridCol: DG.GridColumn | null,
+    tableCol: DG.Column<string>,
+  ) {
+    super(gridCol, tableCol);
+  }
+
+  render(g: CanvasRenderingContext2D,
+    x: number, y: number, w: number, h: number, gridCell: DG.GridCell, cellStyle: DG.GridCellStyle
+  ): void {
+    const dpr = window.devicePixelRatio;
+    const grid = gridCell.grid;
+    const cell = gridCell.cell;
+    const s: string = cell.value ?? '';
+    const separator = this.tableCol.tags[bioTAGS.separator];
+    const units: string = this.tableCol.meta.units!;
+    w = getUpdatedWidth(grid, g, x, w, dpr);
+    //TODO: can this be replaced/merged with splitSequence?
+    const [s1, s2] = s.split('#');
+    const splitter = getSplitter(units, separator);
+    const s1SS = splitter(s1);
+    const s2SS = splitter(s2);
+    const subParts1 = wu.count(0).take(s1SS.length).map((posIdx) => s1SS.getCanonical(posIdx)).toArray();
+    const subParts2 = wu.count(0).take(s2SS.length).map((posIdx) => s2SS.getCanonical(posIdx)).toArray();
+    const alphabet = this.tableCol.getTag(bioTAGS.alphabet);
+    const biotype = alphabet === ALPHABET.RNA || alphabet === ALPHABET.DNA ? HelmTypes.NUCLEOTIDE : HelmTypes.AA;
+    drawMoleculeDifferenceOnCanvas(g, x, y, w, h, subParts1, subParts2, biotype, this.monomerLib, undefined, undefined);
+  }
+
+  async awaitRendered(timeout: number = 10000, reason: string = `${timeout} timeout`): Promise<void> {
+    return Promise.resolve();
+  }
+
+  static getOrCreate(gridCell: DG.GridCell): MacromoleculeDifferenceCellRendererBack {
+    const [gridCol, tableCol, temp] =
+      getGridCellColTemp<string, MacromoleculeDifferenceCellRendererBack>(gridCell);
+
+    let res: MacromoleculeDifferenceCellRendererBack = temp.rendererBack;
+    if (!res) res = temp.rendererBack = new MacromoleculeDifferenceCellRendererBack(gridCol, tableCol);
+    return res;
+  }
+}
 
 export class MacromoleculeDifferenceCellRenderer extends DG.GridCellRenderer {
   get name(): string { return 'MacromoleculeDifferenceCR'; }
@@ -222,25 +217,11 @@ export class MacromoleculeDifferenceCellRenderer extends DG.GridCellRenderer {
    * @param {DG.GridCellStyle} _cellStyle Cell style.
    * @memberof AlignedSequenceDifferenceCellRenderer
    */
-  render(
-    g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, gridCell: DG.GridCell,
-    _cellStyle: DG.GridCellStyle): void {
-    const dpr = window.devicePixelRatio;
-    const grid = gridCell.grid;
-    const cell = gridCell.cell;
-    const tableCol = gridCell.tableColumn as DG.Column<string>;
-    const s: string = cell.value ?? '';
-    const separator = tableCol.tags[bioTAGS.separator];
-    const units: string = tableCol.meta.units!;
-    w = getUpdatedWidth(grid, g, x, w, dpr);
-    //TODO: can this be replaced/merged with splitSequence?
-    const [s1, s2] = s.split('#');
-    const splitter = getSplitter(units, separator);
-    const s1SS = splitter(s1);
-    const s2SS = splitter(s2);
-    const subParts1 = wu.count(0).take(s1SS.length).map((posIdx) => s1SS.getCanonical(posIdx)).toArray();
-    const subParts2 = wu.count(0).take(s2SS.length).map((posIdx) => s2SS.getCanonical(posIdx)).toArray();
-    drawMoleculeDifferenceOnCanvas(g, x, y, w, h, subParts1, subParts2, units);
+  render(g: CanvasRenderingContext2D,
+    x: number, y: number, w: number, h: number, gridCell: DG.GridCell, _cellStyle: DG.GridCellStyle
+  ): void {
+    const back = MacromoleculeDifferenceCellRendererBack.getOrCreate(gridCell);
+    back.render(g, x, y, w, h, gridCell, _cellStyle);
   }
 }
 
@@ -252,7 +233,8 @@ export function drawMoleculeDifferenceOnCanvas(
   h: number,
   subParts1: string[],
   subParts2: string[],
-  units: string,
+  biotype: HelmType,
+  monomerLib: IMonomerLibBase | null,
   fullStringLength?: boolean,
   molDifferences?: { [key: number]: HTMLCanvasElement },
 ): void {
@@ -273,39 +255,47 @@ export function drawMoleculeDifferenceOnCanvas(
   const updatedY = Math.max(y, y + (h - 28) / 2);
 
   g.save();
-  g.beginPath();
-  g.rect(x, y, fullStringLength ? textWidth + subParts1.length * 4 : w, h);
-  g.clip();
-  g.font = '12px monospace';
-  g.textBaseline = 'top';
-
-  let palette: SeqPalette = UnknownSeqPalettes.Color;
-  if (units !== 'HELM')
-    palette = getPaletteByType(units.substring(units.length - 2));
-
-  const vShift = 7;
-  for (let i = 0; i < subParts1.length; i++) {
-    const amino1 = subParts1[i];
-    const amino2 = subParts2[i];
-    const color1 = palette.get(amino1);
-
-    if (amino1 != amino2) {
-      const color2 = palette.get(amino2);
-      const subX0 = printLeftOrCentered(g, amino1, updatedX, updatedY - vShift, w, h,
-        {color: color1, pivot: 0, left: true});
-      const subX1 = printLeftOrCentered(g, amino2, updatedX, updatedY + vShift, w, h,
-        {color: color2, pivot: 0, left: true});
-      updatedX = Math.max(subX1, subX0);
-      if (molDifferences)
-        molDifferences[i] = createDifferenceCanvas(amino1, amino2, color1, color2, updatedY, vShift, h);
-    } else {
-      //
-      updatedX = printLeftOrCentered(g, amino1, updatedX, updatedY, w, h,
-        {color: color1, pivot: 0, left: true, transparencyRate: 0.5});
+  try {
+    g.beginPath();
+    g.rect(x, y, fullStringLength ? textWidth + subParts1.length * 4 : w, h);
+    g.clip();
+    g.font = '12px monospace';
+    g.textBaseline = 'top';
+
+    const vShift = 7;
+    for (let i = 0; i < subParts1.length; i++) {
+      const amino1 = subParts1[i];
+      const amino2 = subParts2[i];
+
+      let color1 = undefinedColor;
+      if (monomerLib) {
+        const wem1 = monomerLib.getWebEditorMonomer(biotype, amino1)!;
+        color1 = wem1.backgroundcolor!;
+      }
+
+      if (amino1 != amino2) {
+        let color2 = undefinedColor;
+        if (monomerLib) {
+          const wem2 = monomerLib.getWebEditorMonomer(biotype, amino2)!;
+          color2 = wem2.backgroundcolor!;
+        }
+        const subX0 = printLeftOrCentered(g, amino1, updatedX, updatedY - vShift, w, h,
+          {color: color1, pivot: 0, left: true});
+        const subX1 = printLeftOrCentered(g, amino2, updatedX, updatedY + vShift, w, h,
+          {color: color2, pivot: 0, left: true});
+        updatedX = Math.max(subX1, subX0);
+        if (molDifferences)
+          molDifferences[i] = createDifferenceCanvas(amino1, amino2, color1, color2, updatedY, vShift, h);
+      } else {
+        //
+        updatedX = printLeftOrCentered(g, amino1, updatedX, updatedY, w, h,
+          {color: color1, pivot: 0, left: true, transparencyRate: 0.5});
+      }
+      updatedX += 4;
     }
-    updatedX += 4;
+  } finally {
+    g.restore();
   }
-  g.restore();
 }
 
 interface IComparedSequences {

package/src/utils/monomer-cell-renderer-base.ts

@@ -0,0 +1,30 @@
+import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
+import * as ui from 'datagrok-api/ui';
+
+import {getMonomerLibHelper} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
+import {CellRendererBackBase} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
+import {IMonomerLibBase} from '@datagrok-libraries/bio/src/types/index';
+
+import {_package} from '../package';
+
+export abstract class CellRendererWithMonomerLibBackBase extends CellRendererBackBase<string> {
+  protected monomerLib: IMonomerLibBase | null = null;
+
+  constructor(
+    gridCol: DG.GridColumn | null,
+    tableCol: DG.Column<string>,
+  ) {
+    super(gridCol, tableCol, _package.logger);
+
+    getMonomerLibHelper().then((libHelper) => {
+      this.monomerLib = libHelper.getMonomerLib();
+      this.dirty = true;
+      this.gridCol?.grid?.invalidate();
+      this.subs.push(this.monomerLib.onChanged.subscribe(() => {
+        this.dirty = true;
+        this.gridCol?.grid?.invalidate();
+      }));
+    });
+  }
+}

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

@@ -1,15 +1,15 @@
-import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
+import {GridCell} from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
-
-import {PolymerType} from '@datagrok-libraries/bio/src/helm/types';
-import {ALPHABET, getPaletteByType, monomerToShort} from '@datagrok-libraries/bio/src/utils/macromolecule';
-import {TAGS as bioTAGS, } from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
+import {ALPHABET, monomerToShort} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {GAP_SYMBOL, TAGS as bioTAGS,} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
 import {MONOMER_RENDERER_TAGS} from '@datagrok-libraries/bio/src/utils/cell-renderer';
-import {MonomerWorks} from '@datagrok-libraries/bio/src/monomer-works/monomer-works';
+import {getGridCellColTemp} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
 
+import {CellRendererWithMonomerLibBackBase} from './monomer-cell-renderer-base';
 import * as C from './constants';
-import {getMonomerLib} from '../package';
+import {undefinedColor} from '@datagrok-libraries/bio/src/utils/cell-renderer-monomer-placer';
+import {HelmTypes} from '@datagrok-libraries/js-draw-lite/src/types/org';
 
 const Tags = new class {
   tooltipHandlerTemp = 'tooltip-handler.Monomer';
@@ -17,17 +17,51 @@ const Tags = new class {
 
 const svgMolOptions = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
 
-export class MonomerTooltipHandler {
-  private readonly gridCol: DG.GridColumn;
+export class MonomerCellRendererBack extends CellRendererWithMonomerLibBackBase {
+  constructor(gridCol: DG.GridColumn | null, tableCol: DG.Column) {
+    super(gridCol, tableCol);
+  }
 
-  constructor(gridCol: DG.GridColumn) {
-    this.gridCol = gridCol;
-    this.gridCol.grid.onCellTooltip(this.onCellTooltip.bind(this));
+  render(g: CanvasRenderingContext2D,
+    x: number, y: number, w: number, h: number, gridCell: DG.GridCell, cellStyle: DG.GridCellStyle
+  ): void {
+    g.save();
+    try {
+      if (gridCell.gridRow < 0) return;
+      const applyToBackground = gridCell.cell?.column && gridCell.cell.column.getTag(MONOMER_RENDERER_TAGS.applyToBackground) === 'true';
+
+      g.font = `12px monospace`;
+      g.textBaseline = 'middle';
+      g.textAlign = 'center';
+
+      const symbol: string = gridCell.cell.value;
+      if (!symbol || symbol == GAP_SYMBOL) return;
+
+      let color = undefinedColor;
+      if (this.monomerLib) {
+        const alphabet = this.tableCol.getTag(bioTAGS.alphabet);
+        const biotype = alphabet === ALPHABET.RNA || alphabet === ALPHABET.DNA ? HelmTypes.NUCLEOTIDE : HelmTypes.AA;
+        const wem = this.monomerLib.getWebEditorMonomer(biotype, symbol)!;
+        color = wem.backgroundcolor!;
+      }
+
+      //cell width of monomer should dictate how many characters can be displayed
+      // for width 40, 6 characters can be displayed (0.15 is 6 / 40)
+      const maxChars = Math.max(2, Math.floor(w * 0.15));
+      g.fillStyle = color;
+      if (applyToBackground) {
+        g.fillRect(x, y, w, h);
+        g.fillStyle = DG.Color.toHtml(DG.Color.getContrastColor(DG.Color.fromHtml(color)));
+      }
+      g.fillText(monomerToShort(symbol, maxChars), x + (w / 2), y + (h / 2), w);
+    } finally {
+      g.restore();
+    }
   }
 
-  private onCellTooltip(gridCell: DG.GridCell, x: number, y: number): any {
+  override onMouseMove(gridCell: GridCell, e: MouseEvent) {
     if (
-      gridCell.grid.dart != this.gridCol.grid.dart || gridCell.gridColumn.dart != this.gridCol.dart ||
+      gridCell.grid.dart != this.gridCol?.grid.dart || gridCell.gridColumn.dart != this.gridCol?.dart ||
       !gridCell.tableColumn || !gridCell.isTableCell
     ) return false;
 
@@ -37,32 +71,33 @@ export class MonomerTooltipHandler {
     const x1 = gridCell.bounds.right + canvasClientRect.left - 4;
     const y1 = gridCell.bounds.bottom + canvasClientRect.top - 4;
 
-    const monomerLib = getMonomerLib();
-    if (!monomerLib) {
-      ui.tooltip.show(ui.divText('Monomer library is not available.'), x1, y1);
+    if (monomerName == GAP_SYMBOL) {
+      ui.tooltip.show(ui.divText('gap'), x1, y1);
       return true;
     }
 
-    const mw = new MonomerWorks(monomerLib);
-    const polymerType: PolymerType = (alphabet === ALPHABET.DNA || alphabet === ALPHABET.RNA) ? 'RNA' :
-      alphabet === ALPHABET.PT ? 'PEPTIDE' : 'PEPTIDE';
-    // const biotype: HelmType = [ALPHABET.RNA, ALPHABET.DNA].includes(alphabet) ? HelmTypes.NUCLEOTIDE :
-    //   [ALPHABET.PT].includes(alphabet) ? HelmTypes.AA : HelmTypes.AA;
-
-    const monomerMol: string | null = mw.getCappedRotatedMonomer(polymerType, monomerName);
-    const nameDiv = ui.div(monomerName);
-    const molDiv = !monomerMol ? null :
-      grok.chem.svgMol(monomerMol, undefined, undefined, svgMolOptions);
+    if (!this.monomerLib) {
+      ui.tooltip.show(ui.divText('Monomer library is not available.'), x1, y1);
+      return true;
+    }
 
-    ui.tooltip.show(ui.divV([nameDiv, ...(molDiv ? [molDiv] : [])]), x1, y1);
+    const biotype = alphabet === ALPHABET.RNA || alphabet === ALPHABET.DNA ? HelmTypes.NUCLEOTIDE : HelmTypes.AA;
+    const tooltipEl = this.monomerLib.getTooltip(biotype, monomerName);
+    ui.tooltip.show(tooltipEl, x1, y1);
 
     return true; // To prevent default tooltip behaviour
   }
 
-  public static getOrCreate(gridCol: DG.GridColumn): MonomerTooltipHandler {
-    let res = gridCol.temp[Tags.tooltipHandlerTemp];
-    if (!res)
-      res = gridCol.temp[Tags.tooltipHandlerTemp] = new MonomerTooltipHandler(gridCol);
+  override async awaitRendered(timeout: number = 10000, reason: string = `${timeout} timeout`): Promise<void> {
+    return Promise.resolve();
+  }
+
+  static getOrCreate(gridCell: DG.GridCell): MonomerCellRendererBack {
+    const [gridCol, tableCol, temp] =
+      getGridCellColTemp<string, MonomerCellRendererBack>(gridCell);
+
+    let res: MonomerCellRendererBack = temp.rendererBack;
+    if (!res) res = temp.rendererBack = new MonomerCellRendererBack(gridCol, tableCol);
     return res;
   }
 }
@@ -91,27 +126,12 @@ export class MonomerCellRenderer extends DG.GridCellRenderer {
     g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, gridCell: DG.GridCell,
     _cellStyle: DG.GridCellStyle
   ): void {
-    if (gridCell.gridRow < 0) return;
-    MonomerTooltipHandler.getOrCreate(gridCell.gridColumn);
-    const applyToBackground = gridCell.cell?.column && gridCell.cell.column.getTag(MONOMER_RENDERER_TAGS.applyToBackground) === 'true';
-
-    g.font = `12px monospace`;
-    g.textBaseline = 'middle';
-    g.textAlign = 'center';
-
-    const palette = getPaletteByType(gridCell.cell.column.getTag(bioTAGS.alphabet));
-    const s: string = gridCell.cell.value;
-    if (!s)
-      return;
-    const color = palette.get(s);
-    //cell width of monomer should dictate how many characters can be displayed
-    // for width 40, 6 characters can be displayed (0.15 is 6 / 40)
-    const maxChars = Math.max(2, Math.floor(w * 0.15));
-    g.fillStyle = color;
-    if (applyToBackground) {
-      g.fillRect(x, y, w, h);
-      g.fillStyle = DG.Color.toHtml(DG.Color.getContrastColor(DG.Color.fromHtml(color)));
-    }
-    g.fillText(monomerToShort(s, maxChars), x + (w / 2), y + (h / 2), w);
+    const back = MonomerCellRendererBack.getOrCreate(gridCell);
+    back.render(g, x, y, w, h, gridCell, _cellStyle);
+  }
+
+  onMouseMove(gridCell: GridCell, e: MouseEvent) {
+    const back = MonomerCellRendererBack.getOrCreate(gridCell);
+    back.onMouseMove(gridCell, e);
   }
 }

package/src/utils/monomer-lib/lib-manager.ts

@@ -95,7 +95,7 @@ export class MonomerLibManager implements IMonomerLibHelper {
   }
 
   assignDuplicatePreferances(settings: UserLibSettings) {
-    this._monomerLib.assignDuplicatePreferances(settings);
+    this._monomerLib.assignDuplicatePreferences(settings);
   }
 
   /** Instance promise of {@link getFileManager} */