@datagrok/bio 2.15.7 → 2.15.9

package/files/monomer-libraries/sample-lib-Aca-colored.json

@@ -24,8 +24,8 @@
             "colors": {
                 "default": {
                     "line": "#202020",
-                    "text": "#202020",
-                    "background": "#60FF40"
+                    "text": "#20C010",
+                    "background": "#F0F0F0"
                 }
             }
         },

package/package.json

@@ -5,7 +5,7 @@
     "name": "Aleksandr Tanas",
     "email": "atanas@datagrok.ai"
   },
-  "version": "2.15.7",
+  "version": "2.15.9",
   "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,12 +37,12 @@
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.44.3",
+    "@datagrok-libraries/bio": "^5.44.5",
     "@datagrok-libraries/chem-meta": "^1.2.7",
-    "@datagrok-libraries/math": "^1.2.0",
-    "@datagrok-libraries/ml": "^6.7.1",
-    "@datagrok-libraries/tutorials": "^1.4.2",
-    "@datagrok-libraries/utils": "^4.3.4",
+    "@datagrok-libraries/math": "^1.2.1",
+    "@datagrok-libraries/ml": "^6.7.3",
+    "@datagrok-libraries/tutorials": "^1.4.3",
+    "@datagrok-libraries/utils": "^4.3.6",
     "@webgpu/types": "^0.1.40",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0",
@@ -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-custom.ts

@@ -5,6 +5,7 @@ import * as ui from 'datagrok-api/ui';
 import {getGridCellColTemp, CellRendererBackBase} from '@datagrok-libraries/bio/src/utils/cell-renderer-back-base';
 import {SeqHandler} from '@datagrok-libraries/bio/src/utils/seq-handler';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {GridCell} from 'datagrok-api/dg';
 
 export class MacromoleculeCustomCellRenderer extends DG.GridCellRenderer {
   get name(): string { return 'sequence'; }
@@ -24,9 +25,16 @@ export class MacromoleculeCustomCellRenderer extends DG.GridCellRenderer {
     return back;
   }
 
-  override onMouseLeave(gridCell: DG.GridCell, e: MouseEvent) {
+  override onMouseEnter(gridCell: GridCell, e: MouseEvent) {
     const back = this.getRendererBack(gridCell);
-    back.onMouseLeave(gridCell, e);
+    back.onMouseEnter(gridCell, e);
+  }
+
+  override onMouseLeave(gridCell: DG.GridCell, e: MouseEvent) {
+    // TODO: We get gridCell from another column here, so we can not get back object from the column rendered.
+    ui.tooltip.hide();
+    // const back = this.getRendererBack(gridCell);
+    // back.onMouseLeave(gridCell, e);
   }
 
   override onMouseMove(gridCell: DG.GridCell, e: MouseEvent) {

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) {
@@ -150,10 +102,11 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
   ): void {
     const logPrefix: string = 'MacromoleculeSequenceCellRenderer.render()';
 
-    const [gridCol, tableCol, _temp] =
+    const [gridCol, tableCol, temp] =
       getGridCellColTemp<string, MonomerPlacer>(gridCell);
     if (!tableCol) return;
     const tableColTemp: TempType = tableCol.temp;
+    const sh = SeqHandler.forColumn(tableCol);
 
     let gapLength = 0;
     const msaGapLength = 8;
@@ -169,37 +122,65 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
       maxLengthOfMonomer = !isNaN(v) && v ? v : 50;
     }
 
-    const [_gc, _tc, temp] =
-      getGridCellColTemp<string, MonomerPlacer>(gridCell);
     let seqColTemp: MonomerPlacer = temp.rendererBack;
     if (!seqColTemp) {
       seqColTemp = temp.rendererBack = new MonomerPlacer(gridCol, tableCol, _package.logger, maxLengthOfMonomer,
         () => {
-          const sh = SeqHandler.forColumn(tableCol);
           return {
-            seqHandler: sh,
             monomerCharWidth: 7, separatorWidth: !sh.isMsa() ? gapLength : msaGapLength,
             monomerToShort: monomerToShortFunction,
           };
         });
-    }
-
-    if (
-      tableCol.temp[MmcrTemps.rendererSettingsChanged] === rendererSettingsChangedState.true ||
-      seqColTemp.monomerLengthLimit != maxLengthOfMonomer
-    ) {
-      gapLength = tableColTemp[MmcrTemps.gapLength] as number ?? gapLength;
-      // this event means that the mm renderer settings have changed,
-      // particularly monomer representation and max width.
-      seqColTemp.setMonomerLengthLimit(maxLengthOfMonomer);
-      seqColTemp.setSeparatorWidth(seqColTemp.isMsa() ? msaGapLength : gapLength);
-      tableCol.temp[MmcrTemps.rendererSettingsChanged] = rendererSettingsChangedState.false;
+      tableCol.temp[MmcrTemps.rendererSettingsChanged] === rendererSettingsChangedState.true;
     }
 
     seqColTemp.render(g, x, y, w, h, gridCell, _cellStyle);
   }
 }
 
+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 +203,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 +219,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 +241,45 @@ 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) {
+        color1 = monomerLib.getMonomerTextColor(biotype, amino1);
+      }
+
+      if (amino1 != amino2) {
+        let color2 = undefinedColor;
+        if (monomerLib) {
+          color2 = monomerLib.getMonomerTextColor(biotype, 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});
+      }
+      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();
+      }));
+    });
+  }
+}