@datagrok/bio 1.11.0 → 1.11.3

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "1.11.0",
+  "version": "1.11.3",
   "description": "Bio is a [package](https://datagrok.ai/help/develop/develop#packages) for the [Datagrok](https://datagrok.ai) platform",
   "repository": {
     "type": "git",
@@ -14,12 +14,12 @@
   },
   "dependencies": {
     "@biowasm/aioli": ">=2.4.0",
-    "@datagrok-libraries/bio": "^4.2.0",
+    "@datagrok-libraries/bio": "^4.2.1",
     "@datagrok-libraries/chem-meta": "1.0.0",
-    "@datagrok-libraries/ml": "^4.0.0",
+    "@datagrok-libraries/ml": "^6.0.0",
     "@datagrok-libraries/utils": "^1.6.2",
     "cash-dom": "latest",
-    "datagrok-api": "^1.6.6",
+    "datagrok-api": "^1.6.7",
     "dayjs": "^1.11.4",
     "openchemlib": "6.0.1",
     "rxjs": "^6.5.5",
@@ -48,6 +48,7 @@
     "link-api": "npm link datagrok-api",
     "link-bio": "npm link @datagrok-libraries/bio",
     "link-ml": "npm link @datagrok-libraries/ml",
+    "link-utils": "npm link @datagrok-libraries/utils",
     "link-all": "npm link datagrok-api @datagrok-libraries/utils @datagrok-libraries/bio @datagrok-libraries/ml",
     "debug-sequences1": "grok publish",
     "release-sequences1": "grok publish --release",
@@ -69,7 +70,11 @@
     "Developers"
   ],
   "sources": [
-    "css/helm.css"
+    "css/helm.css",
+    "https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js",
+    "helm/JSDraw/Scilligence.JSDraw2.Lite.js",
+    "helm/JSDraw/Scilligence.JSDraw2.Resources.js",
+    "helm/JSDraw/Pistoia.HELM-uncompressed.js"
   ],
   "category": "Bioinformatics"
 }

package/src/package.ts

@@ -15,7 +15,7 @@ import {Aminoacids} from '@datagrok-libraries/bio/src/aminoacids';
 import {getEmbeddingColsNames, sequenceSpace} from './utils/sequence-space';
 import {AvailableMetrics} from '@datagrok-libraries/ml/src/typed-metrics';
 import {getActivityCliffs} from '@datagrok-libraries/ml/src/viewers/activity-cliffs';
-import {drawSequences, sequenceGetSimilarities} from './utils/sequence-activity-cliffs';
+import {createPropPanelElement, createTooltipElement, getSimilaritiesMarix} from './utils/sequence-activity-cliffs';
 import {createJsonMonomerLibFromSdf, encodeMonomers, getMolfilesFromSeq, HELM_CORE_LIB_FILENAME} from './utils/utils';
 import {getMacroMol} from './utils/atomic-works';
 import {MacromoleculeSequenceCellRenderer} from './utils/cell-renderer';
@@ -180,8 +180,9 @@ export async function activityCliffs(df: DG.DataFrame, macroMolecule: DG.Column,
     DG.SEMTYPE.MACROMOLECULE,
     tags,
     sequenceSpace,
-    sequenceGetSimilarities,
-    drawSequences,
+    getSimilaritiesMarix,
+    createTooltipElement,
+    createPropPanelElement,
     (options as any)[methodName]);
   return sp;
 }

package/src/tests/checkInputColumn-tests.ts

@@ -4,7 +4,7 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
-import {checkInputColumn} from '../package';
+import {checkInputColumn, multipleSequenceAlignmentAny} from '../package';
 import {UNITS} from 'datagrok-api/dg';
 import {ALPHABET, UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 
@@ -17,53 +17,56 @@ seq2,
 seq3,
 seq4`;
 
-  category('MSA', () => {
+  test('testMsaPos', async () => {
+    const func: DG.Func = DG.Func.find({package: 'Bio', name: 'multipleSequenceAlignmentAny'})[0];
+    const funcInputColumnProperty: DG.Property = func.inputs.find((i) => i.name == 'sequence')!;
 
-    test('testMsaPos', async () => {
-      const func: DG.Func = DG.Func.find({package: 'Bio', name: 'multipleSequenceAlignmentAny'})[0];
-      const funcInputColumnProperty: DG.Property = func.inputs.find((i) => i.name == 'sequence')!;
+    let k = 11;
 
-      let k = 11;
+    const df: DG.DataFrame = DG.DataFrame.fromCsv(csv);
+    const col: DG.Column = df.getCol('seq');
+    col.semType = DG.SEMTYPE.MACROMOLECULE;
+    col.setTag(DG.TAGS.UNITS, 'fasta');
+    col.setTag(UnitsHandler.TAGS.alphabet, ALPHABET.DNA);
 
-      const df: DG.DataFrame = DG.DataFrame.fromCsv(csv);
-      const col: DG.Column = df.getCol('seq');
-      col.semType = DG.SEMTYPE.MACROMOLECULE;
-      col.setTag(DG.TAGS.UNITS, 'fasta');
-      col.setTag(UnitsHandler.TAGS.alphabet, ALPHABET.DNA);
+    const [res, msg]: [boolean, string] = checkInputColumn(
+      col, 'Test', ['fasta',], ['DNA', 'RNA', 'PT']);
 
-      const [res, msg]: [boolean, string] = checkInputColumn(
-        col, 'Test', ['fasta',], ['DNA', 'RNA', 'PT']);
+    expect(res, true);
+  });
 
-      expect(res, true);
-    });
+  test('testMsaNegHelm', async () => {
+    const df: DG.DataFrame = DG.DataFrame.fromCsv(csv);
+    const col: DG.Column = df.getCol('seq');
+    col.semType = DG.SEMTYPE.MACROMOLECULE;
+    col.setTag(DG.TAGS.UNITS, 'helm');
+    col.setTag(UnitsHandler.TAGS.alphabetSize, '11');
+    col.setTag(UnitsHandler.TAGS.alphabetIsMultichar, 'true');
 
-    test('testMsaNegHelm', async () => {
-      const df: DG.DataFrame = DG.DataFrame.fromCsv(csv);
-      const col: DG.Column = df.getCol('seq');
-      col.semType = DG.SEMTYPE.MACROMOLECULE;
-      col.setTag(DG.TAGS.UNITS, 'helm');
-      col.setTag(UnitsHandler.TAGS.alphabetSize, '11');
-      col.setTag(UnitsHandler.TAGS.alphabetIsMultichar, 'true');
+    const [res, msg]: [boolean, string] = checkInputColumn(
+      col, 'Test', ['fasta',], ['DNA', 'RNA', 'PT']);
 
-      const [res, msg]: [boolean, string] = checkInputColumn(
-        col, 'Test', ['fasta',], ['DNA', 'RNA', 'PT']);
+    expect(res, false);
+  });
 
-      expect(res, false);
-    });
+  test('testMsaNegUN', async () => {
+    const df: DG.DataFrame = DG.DataFrame.fromCsv(csv);
+    const col: DG.Column = df.getCol('seq');
+    col.semType = DG.SEMTYPE.MACROMOLECULE;
+    col.setTag(DG.TAGS.UNITS, 'fasta');
+    col.setTag(UnitsHandler.TAGS.alphabet, 'UN');
+    col.setTag(UnitsHandler.TAGS.alphabetSize, '11');
+    col.setTag(UnitsHandler.TAGS.alphabetIsMultichar, 'true');
 
-    test('testMsaNegUN', async () => {
-      const df: DG.DataFrame = DG.DataFrame.fromCsv(csv);
-      const col: DG.Column = df.getCol('seq');
-      col.semType = DG.SEMTYPE.MACROMOLECULE;
-      col.setTag(DG.TAGS.UNITS, 'fasta');
-      col.setTag(UnitsHandler.TAGS.alphabet, 'UN');
-      col.setTag(UnitsHandler.TAGS.alphabetSize, '11');
-      col.setTag(UnitsHandler.TAGS.alphabetIsMultichar, 'true');
+    const [res, msg]: [boolean, string] = checkInputColumn(
+      col, 'Test', ['fasta',], ['DNA', 'RNA', 'PT']);
 
-      const [res, msg]: [boolean, string] = checkInputColumn(
-        col, 'Test', ['fasta',], ['DNA', 'RNA', 'PT']);
+    expect(res, false);
+  });
 
-      expect(res, false);
-    });
+  test('testGetActionFunctionMeta', async () => {
+    const func: DG.Func = DG.Func.find({package: 'Bio', name: 'multipleSequenceAlignmentAny'})[0];
+    const sequenceInput: DG.Property = func.inputs.find((i) => i.name == 'sequence')!;
+    let k = 11;
   });
 });

package/src/tests/convert-test.ts

@@ -5,7 +5,7 @@ import * as DG from 'datagrok-api/dg';
 
 import {ConverterFunc} from './types';
 import {NotationConverter} from '@datagrok-libraries/bio/src/utils/notation-converter';
-import {NOTATION} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {NOTATION, UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 
 // import {mmSemType} from '../const';
 // import {importFasta} from '../package';
@@ -145,14 +145,17 @@ RNA1{P.R(U)P.R(U)P.R(C)P.R(A)P.R(A)P.R(C)P.P.P}$$$
 
   async function _testConvert(srcKey: string, converter: ConverterFunc, tgtKey: string) {
     const srcDf: DG.DataFrame = await readCsv(srcKey);
-    const srcCol: DG.Column = srcDf.col('seq')!;
+    const srcCol: DG.Column = srcDf.getCol('seq');
 
+    // conversion results
     const resCol: DG.Column = converter(srcCol);
 
+    // The correct reference data to compare conversion results with.
     const tgtDf: DG.DataFrame = await readCsv(tgtKey);
-    const tgtCol: DG.Column = tgtDf.col('seq')!;
+    const tgtCol: DG.Column = tgtDf.getCol('seq');
 
     expectArray(resCol.toList(), tgtCol.toList());
+    const uh: UnitsHandler = new UnitsHandler(resCol);
   }
 
   // FASTA tests

package/src/tests/renderers-test.ts

@@ -3,9 +3,9 @@ import {after, before, category, delay, expect, test} from '@datagrok-libraries/
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 import {importFasta, multipleSequenceAlignmentAny} from '../package';
-import {readDataframe} from './utils';
 import {convertDo} from '../utils/convert';
 import {ALPHABET, NOTATION, UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {SEM_TYPES, TAGS} from '../utils/constants';
 
 category('renderers', () => {
   let tvList: DG.TableView[];
@@ -30,33 +30,45 @@ category('renderers', () => {
     await _testAfterConvert();
   });
 
+  test('setRenderer', async () => {
+    await _setRendererManually();
+  });
+
   async function _testAfterMsa() {
     const fastaTxt: string = await grok.dapi.files.readAsText('System:AppData/Bio/samples/sample_FASTA.fasta');
     const df: DG.DataFrame = importFasta(fastaTxt)[0];
+
+    const srcSeqCol: DG.Column = df.getCol('sequence');
+    const semType: string = await grok.functions.call('Bio:detectMacromolecule', {col: srcSeqCol});
+    if (semType)
+      srcSeqCol.semType = semType;
+
     const tv: DG.TableView = grok.shell.addTableView(df);
+    // call to calculate 'cell.renderer' tag
     await grok.data.detectSemanticTypes(df);
-    console.log('Bio: tests/renderers/afterMsa, table view');
 
-    const srcSeqCol: DG.Column | null = df.col('sequence');
-    expect(srcSeqCol !== null, true);
+    console.log('Bio: tests/renderers/afterMsa, table view');
 
     console.log('Bio: tests/renderers/afterMsa, src before test ' +
       `semType="${srcSeqCol!.semType}", units="${srcSeqCol!.getTag(DG.TAGS.UNITS)}", ` +
       `cell.renderer="${srcSeqCol!.getTag(DG.TAGS.CELL_RENDERER)}"`);
-    expect(srcSeqCol!.semType, DG.SEMTYPE.MACROMOLECULE);
-    expect(srcSeqCol!.getTag(DG.TAGS.UNITS), NOTATION.FASTA);
-    expect(srcSeqCol!.getTag(UnitsHandler.TAGS.aligned), 'SEQ');
-    expect(srcSeqCol!.getTag(UnitsHandler.TAGS.alphabet), ALPHABET.PT);
-    expect(srcSeqCol!.getTag(DG.TAGS.CELL_RENDERER), 'sequence');
+    expect(srcSeqCol.semType, DG.SEMTYPE.MACROMOLECULE);
+    expect(srcSeqCol.getTag(DG.TAGS.UNITS), NOTATION.FASTA);
+    expect(srcSeqCol.getTag(UnitsHandler.TAGS.aligned), 'SEQ');
+    expect(srcSeqCol.getTag(UnitsHandler.TAGS.alphabet), ALPHABET.PT);
+    expect(srcSeqCol.getTag(DG.TAGS.CELL_RENDERER), 'sequence');
 
-    const msaSeqCol: DG.Column | null = await multipleSequenceAlignmentAny(df, srcSeqCol!);
+    const msaSeqCol: DG.Column = (await multipleSequenceAlignmentAny(df, srcSeqCol!))!;
     tv.grid.invalidate();
 
-    expect(msaSeqCol!.semType, DG.SEMTYPE.MACROMOLECULE);
-    expect(msaSeqCol!.getTag(DG.TAGS.UNITS), NOTATION.FASTA);
-    expect(msaSeqCol!.getTag(UnitsHandler.TAGS.aligned), 'SEQ.MSA');
-    expect(msaSeqCol!.getTag(UnitsHandler.TAGS.alphabet), ALPHABET.PT);
-    expect(msaSeqCol!.getTag(DG.TAGS.CELL_RENDERER), 'sequence');
+    expect(msaSeqCol.semType, DG.SEMTYPE.MACROMOLECULE);
+    expect(msaSeqCol.getTag(DG.TAGS.UNITS), NOTATION.FASTA);
+    expect(msaSeqCol.getTag(UnitsHandler.TAGS.aligned), 'SEQ.MSA');
+    expect(msaSeqCol.getTag(UnitsHandler.TAGS.alphabet), ALPHABET.PT);
+    expect(msaSeqCol.getTag(DG.TAGS.CELL_RENDERER), 'sequence');
+
+    // check newColumn with UnitsHandler constructor
+    const uh: UnitsHandler = new UnitsHandler(msaSeqCol);
 
     dfList.push(df);
     tvList.push(tv);
@@ -66,13 +78,35 @@ category('renderers', () => {
     const csv: string = await grok.dapi.files.readAsText('System:AppData/Bio/samples/sample_FASTA_PT.csv');
     const df: DG.DataFrame = DG.DataFrame.fromCsv(csv);
     const tv: DG.TableView = grok.shell.addTableView(df);
-    await grok.data.detectSemanticTypes(df);
 
     const srcCol: DG.Column = df.col('sequence')!;
+    // await grok.data.detectSemanticTypes(df);
+    const semType: string = await grok.functions.call('Bio:detectMacromolecule', {col: srcCol});
+    if (semType)
+      srcCol.semType = semType;
+    await grok.data.detectSemanticTypes(df);
+
     const tgtCol: DG.Column = await convertDo(srcCol, NOTATION.SEPARATOR, '/');
     expect(tgtCol.getTag(DG.TAGS.CELL_RENDERER), 'sequence');
 
+    // check tgtCol with UnitsHandler constructor
+    const uh: UnitsHandler = new UnitsHandler(tgtCol);
+
     tvList.push(tv);
     dfList.push(df);
-  };
+  }
+
+  async function _setRendererManually() {
+    const df = DG.DataFrame.fromColumns([DG.Column.fromStrings(
+      'SequencesDiff', ['meI/hHis/Aca/N/T/dK/Thr_PO3H2/Aca#D-Tyr_Et/Tyr_ab-dehydroMe/meN/E/N/dV'])]);
+    df.col('SequencesDiff')!.tags[DG.TAGS.UNITS] = 'separator';
+    df.col('SequencesDiff')!.tags[TAGS.SEPARATOR] = '/';
+    df.col('SequencesDiff')!.semType = SEM_TYPES.MACROMOLECULE_DIFFERENCE;
+    const tw = grok.shell.addTableView(df);
+    await delay(100);
+    const renderer = tw.dataFrame.col('SequencesDiff')?.getTag(DG.TAGS.CELL_RENDERER);
+    if (renderer !== 'MacromoleculeDifferenceCR')
+      throw new Error(`Units 'separator', separator '/' and semType 'MacromoleculeDifference' have been ` +
+        `manually set on column but after df aws added as table view renderer has been reset to '${renderer}'`);
+  }
 });

package/src/tests/sequence-space-utils.ts

@@ -1,10 +1,15 @@
 import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
-import { expect } from '@datagrok-libraries/utils/src/test';
-import { sequenceSpaceTopMenu } from '../package';
+import {expect} from '@datagrok-libraries/utils/src/test';
+import {sequenceSpaceTopMenu} from '../package';
 
 export async function _testSequenceSpaceReturnsResult(df: DG.DataFrame, algorithm: string, colName: string) {
-  await grok.data.detectSemanticTypes(df);
+  // await grok.data.detectSemanticTypes(df);
+  const col: DG.Column = df.getCol(colName);
+  const semType: string = await grok.functions.call('Bio:detectMacromolecule', {col: col});
+  if (semType)
+    col.semType = semType;
+
   const sp = await sequenceSpaceTopMenu(df, df.col(colName)!, algorithm, 'Levenshtein', true);
   expect(sp != null, true);
 }

package/src/tests/test-sequnces-generators.ts

@@ -1,27 +1,22 @@
 import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
+import {DataFrame} from 'datagrok-api/dg';
 
-export function generateManySequences(): string {
-  let csvData = `MSA,Activity
-meI/hHis/Aca/N/T/dE/Thr_PO3H2/Aca/D-Tyr_Et/Tyr_ab-dehydroMe/dV/E/N/D-Orn/D-aThr//Phe_4Me,5.30751`;
-  for (let i = 0; i < 10 ** 6; i++) {
-    csvData += `\n meI/hHis/Aca/N/T/dE/Thr_PO3H2/Aca/D-Tyr_Et/Tyr_ab-dehydroMe/dV/E/N/D-Orn/D-aThr//Phe_4Me,5.30751`;
-  }
-  return csvData;
+export function generateManySequences(): DG.Column[] {
+  let columns: DG.Column[] = [];
+  columns.push(DG.Column.fromList('string', 'MSA', new Array(10 ** 6).fill('meI/hHis/Aca/N/T/dE/Thr_PO3H2/Aca/D-Tyr_Et/Tyr_ab-dehydroMe/dV/E/N/D-Orn/D-aThr//Phe_4Me')));
+  columns.push(DG.Column.fromList('string', 'Activity', new Array(10 ** 6).fill('5.30751')));
+  return columns;
 }
 
-export function generateLongSequence(): string {
-  let longSequence = `meI/hHis/Aca/N/T/dE/Thr_PO3H2/Aca/D-Tyr_Et/Tyr_ab-dehydroMe/dV/E/N/D-Orn/D-aThr`;
-  for (let i = 0; i < 10 ** 5; i++) {
-    longSequence += `/Aca/N/T/dE/Thr_PO3H2/Aca/D-Tyr_Et/Tyr_ab-dehydroMe/dV/dv`;
-  }
-  longSequence += `//Phe_4Me,5.30751`;
-  let csvData = `MSA,Activity `;
-  for (let i = 0; i <= 10 ** 1 * 4; i++) {
-    csvData += `\n ${longSequence}`;
-  }
-  return csvData;
+export function generateLongSequence(): DG.Column[] {
+  let columns: DG.Column[] = [];
+  const longSequence = `meI/hHis/Aca/N/T/dE/Thr_PO3H2/Aca/D-Tyr_Et/Tyr_ab-dehydroMe/dV/E/N/D-Orn/D-aThr`.repeat(10 ** 5);
+  columns.push(DG.Column.fromList('string', 'MSA', new Array(10 ** 2).fill(longSequence)));
+  columns.push(DG.Column.fromList('string', 'Activity', new Array(10 ** 2).fill('7.30751')));
+  return columns;
 }
+
 export function setTagsMacromolecule(col: DG.Column) {
   col.semType = DG.SEMTYPE.MACROMOLECULE;
   col.setTag('units', 'separator');
@@ -31,10 +26,10 @@ export function setTagsMacromolecule(col: DG.Column) {
   return col;
 }
 
-export function performanceTest(generateFunc: () => string,testName: string) {
+export function performanceTest(generateFunc: () => DG.Column[], testName: string) {
+  const columns = generateFunc();
+  const df: DG.DataFrame = DG.DataFrame.fromColumns(columns);
   const startTime: number = Date.now();
-  const csv = generateFunc();
-  const df: DG.DataFrame = DG.DataFrame.fromCsv(csv);
   const col: DG.Column = df.columns.byName('MSA');
   setTagsMacromolecule(col);
   grok.shell.addTableView(df);

package/src/utils/cell-renderer.ts

@@ -2,7 +2,7 @@ import * as C from './constants';
 import * as DG from 'datagrok-api/dg';
 import {AminoacidsPalettes} from '@datagrok-libraries/bio/src/aminoacids';
 import {NucleotidesPalettes} from '@datagrok-libraries/bio/src/nucleotides';
-import {UnknownSeqPalette, UnknownSeqPalettes} from '@datagrok-libraries/bio/src/unknown';
+import {UnknownSeqPalettes} from '@datagrok-libraries/bio/src/unknown';
 import {SplitterFunc, WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
 import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
 import * as ui from 'datagrok-api/ui';
@@ -14,7 +14,7 @@ const monomerToShortFunction: (amino: string, maxLengthOfMonomer: number) => str
 const gapRenderer = 5;
 
 
-function getPalleteByType(paletteType: string): SeqPalette {
+function getPaletteByType(paletteType: string): SeqPalette {
   switch (paletteType) {
   case 'PT':
     return AminoacidsPalettes.GrokGroups;
@@ -30,6 +30,10 @@ function getPalleteByType(paletteType: string): SeqPalette {
   }
 }
 
+function getUpdatedWidth(grid: DG.Grid | null, g: CanvasRenderingContext2D, x: number, w: number): number {
+  return grid ? Math.min(grid.canvas.width - x, w) : g.canvas.width - x;
+}
+
 export function processSequence(subParts: string[]): [string[], boolean] {
   const simplified = !subParts.some((amino, index) =>
     amino.length > 1 &&
@@ -63,8 +67,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     }
     const maxLengthWordsSum = gridCell.cell.column.temp['bio-sum-maxLengthWords'];
     const maxIndex = gridCell.cell.column.temp['bio-maxIndex'];
-    //@ts-ignore
-    const argsX = e.layerX - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCell.bounds.x);
+    const argsX = e.offsetX - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCell.bounds.x);
     let left = 0;
     let right = maxIndex;
     let found = false;
@@ -109,23 +112,22 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, gridCell: DG.GridCell,
     cellStyle: DG.GridCellStyle
   ): void {
-    const grid = gridCell.gridRow !== -1 ? gridCell.grid : undefined;
+    const grid = gridCell.gridRow !== -1 ? gridCell.grid : null;
     const cell = gridCell.cell;
-    const [type, subtype, paletteType] = gridCell.cell.column.getTag(DG.TAGS.UNITS).split(':');
+    const paletteType = gridCell.cell.column.getTag(C.TAGS.ALPHABET);
     const minDistanceRenderer = 50;
-    w = grid ? Math.min(grid.canvas.width - x, w) : g.canvas.width - x;
+    w = getUpdatedWidth(grid, g, x, w);
     g.save();
     g.beginPath();
     g.rect(x, y, w, h);
     g.clip();
     g.font = '12px monospace';
     g.textBaseline = 'top';
-    const s: string = cell.value ?? '';
 
     //TODO: can this be replaced/merged with splitSequence?
     const units = gridCell.cell.column.getTag(DG.TAGS.UNITS);
 
-    const palette = getPalleteByType(paletteType);
+    const palette = getPaletteByType(paletteType);
 
     const separator = gridCell.cell.column.getTag('separator') ?? '';
     const splitLimit = gridCell.bounds.width / 5;
@@ -184,10 +186,8 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
       g.fillStyle = undefinedColor;
       let last = index === subParts.length - 1;
       x1 = printLeftOrCentered(x1, y, w, h, g, monomerToShortFunction(amino, maxLengthOfMonomer), color, 0, true, 1.0, separator, last, drawStyle, maxLengthWords, index, gridCell);
-      if (x1 - minDistanceRenderer - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCell.bounds.x) > gridCell.bounds.width) {
-        return false;
-      }
-      return true;
+      return x1 - minDistanceRenderer - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCell.bounds.x) <= gridCell.bounds.width;
+
     });
 
     g.restore();
@@ -226,7 +226,7 @@ export class MonomerCellRenderer extends DG.GridCellRenderer {
     g.font = `12px monospace`;
     g.textBaseline = 'top';
 
-    const palette = getPalleteByType(gridCell.tableColumn!.tags[C.TAGS.ALPHABET]);
+    const palette = getPaletteByType(gridCell.tableColumn!.tags[C.TAGS.ALPHABET]);
     const s: string = gridCell.cell.value ? gridCell.cell.value : '-';
     const color = palette.get(s);
 
@@ -262,7 +262,7 @@ export class MacromoleculeDifferenceCellRenderer extends DG.GridCellRenderer {
     const grid = gridCell.grid;
     const cell = gridCell.cell;
 
-    w = grid ? Math.min(grid.canvas.width - x, w) : g.canvas.width - x;
+    w = getUpdatedWidth(grid, g, w, x);
     g.save();
     g.beginPath();
     g.rect(x, y, w, h);
@@ -286,7 +286,7 @@ export class MacromoleculeDifferenceCellRenderer extends DG.GridCellRenderer {
 
     let palette: SeqPalette = UnknownSeqPalettes.Color;
     if (units != 'HELM')
-      palette = getPalleteByType(units.substring(units.length - 2));
+      palette = getPaletteByType(units.substring(units.length - 2));
 
     const vShift = 7;
     for (let i = 0; i < subParts1.length; i++) {

package/src/utils/convert.ts

@@ -5,7 +5,7 @@ import $ from 'cash-dom';
 
 import {Subscription} from 'rxjs';
 import {NotationConverter} from '@datagrok-libraries/bio/src/utils/notation-converter';
-import {NOTATION} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {NOTATION, UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 
 
 let convertDialog: DG.Dialog | null = null;
@@ -85,6 +85,9 @@ export async function convertDo(
   const converter = new NotationConverter(srcCol);
   const newColumn = converter.convert(targetNotation, separator);
   srcCol.dataFrame.columns.add(newColumn);
+
+  // call to calculate 'cell.renderer' tag
   await grok.data.detectSemanticTypes(srcCol.dataFrame);
+
   return newColumn;
 }

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

@@ -3,18 +3,115 @@ import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 import {getSimilarityFromDistance} from '@datagrok-libraries/utils/src/similarity-metrics';
 import {AvailableMetrics} from '@datagrok-libraries/ml/src/typed-metrics';
+import * as grok from 'datagrok-api/grok';
+import { SplitterFunc, WebLogo } from '@datagrok-libraries/bio/src/viewers/web-logo';
+import { UnitsHandler } from '@datagrok-libraries/bio/src/utils/units-handler';
 
-export async function sequenceGetSimilarities(col: DG.Column, seq: string): Promise<DG.Column | null> {
+export async function getDistances(col: DG.Column, seq: string): Promise<Array<number>> {
   const stringArray = col.toList();
-  const distances = new Array(stringArray.length).fill(0.0);
-  for (let i = 0; i < stringArray.length; ++i)
-    distances[i] = stringArray[i] ? getSimilarityFromDistance(AvailableMetrics['String']['Levenshtein'](stringArray[i], seq)) : 0;
-  return DG.Column.fromList(DG.COLUMN_TYPE.FLOAT, 'distances', distances);
+  const distances = new Array(stringArray.length).fill(0);
+  for (let i = 0; i < stringArray.length; ++i) {
+    const distance = stringArray[i] ? AvailableMetrics['String']['Levenshtein'](stringArray[i], seq) : null;
+    distances[i] = distance ? distance/Math.max((stringArray[i] as string).length, seq.length) : null;
+  }
+  return distances;
 }
 
-export function drawSequences(params: ITooltipAndPanelParams) {
-  params.line.mols.forEach((mol: number, index: number) => {
-    ui.empty(params.hosts[index]);
-    params.hosts[index].append(ui.divText(params.seqCol.get(mol)));
+export async function getSimilaritiesMarix(dim: number, seqCol: DG.Column, df: DG.DataFrame, colName: string, simArr: DG.Column[])
+  : Promise<DG.Column[]> {
+
+  const distances = new Array(simArr.length).fill(null);
+  for (let i = 0; i != dim - 1; ++i) {
+    const seq: string = seqCol.get(i);  
+    df.rows.removeAt(0, 1, false);
+    distances[i] = (await getDistances(df.col(colName)!, seq))!;
+  }
+
+  for (let i = 0; i < distances.length; i++) {
+    for (let j = 0; j < distances[i].length; j++) {
+      distances[i][j] = getSimilarityFromDistance(distances[i][j]);
+    }
+    simArr[i] = DG.Column.fromList(DG.COLUMN_TYPE.FLOAT, 'distances', distances[i]);
+  }
+  return simArr;
+}
+
+export function createTooltipElement(params: ITooltipAndPanelParams): HTMLDivElement {
+  const tooltipElement = ui.divH([]);
+  const columnNames = ui.divV([
+    ui.divText(params.seqCol.name),
+    ui.divText(params.activityCol.name),
+  ]);
+  columnNames.style.fontWeight = 'bold';
+  columnNames.style.display = 'flex';
+  columnNames.style.justifyContent = 'space-between';
+  tooltipElement.append(columnNames);
+  params.line.mols.forEach((molIdx: number, idx: number) => {
+    const activity = ui.divText(params.activityCol.get(molIdx).toFixed(2));
+    activity.style.display = 'flex';
+    activity.style.justifyContent = 'left';
+    activity.style.paddingLeft = '30px';
+    tooltipElement.append(ui.divV([
+      ui.divText(params.seqCol.get(molIdx)),
+      activity,
+    ]));
   });
+  return tooltipElement;
 }
+
+function moleculeInfo(df: DG.DataFrame, idx: number, seqColName: string): HTMLElement {
+  let dict: {[key: string]: string} = {};
+  for (let col of df.columns) {
+    if(col.name !== seqColName) {
+      dict[col.name] = df.get(col.name, idx);
+    }
+  }
+  return ui.tableFromMap(dict);
+}
+
+
+export function createPropPanelElement(params: ITooltipAndPanelParams): HTMLDivElement {
+  const propPanel = ui.divV([]);
+  const columnNames = ui.divH([
+    ui.divText(params.seqCol.name),
+    ui.divText(params.activityCol.name),
+  ]);
+  columnNames.style.fontWeight = 'bold';
+  columnNames.style.justifyContent = 'space-between';
+  propPanel.append(columnNames);
+  const hosts: HTMLDivElement[] = [];
+  params.line.mols.forEach((molIdx: number, hostIdx: number) => {
+    const activity = ui.divText(params.activityCol.get(molIdx).toFixed(2));
+    activity.style.paddingLeft = '15px';
+    activity.style.paddingLeft = '10px';
+    const molHost = ui.divText(params.seqCol.get(molIdx));
+    if (params.df.currentRowIdx === molIdx) {
+      molHost.style.border = 'solid 1px lightgrey';
+    }
+    //@ts-ignore
+    ui.tooltip.bind(molHost, () => moleculeInfo(params.df, molIdx, params.seqCol.name));
+    molHost.onclick = () => {
+      const obj = grok.shell.o;
+      molHost.style.border = 'solid 1px lightgrey';
+      params.df.currentRowIdx = molIdx;
+      hosts.forEach((h, i) => {
+        if (i !== hostIdx) {
+          h.style.border = '';
+        }
+      })
+      setTimeout(() => {
+        grok.shell.o = obj
+      }, 1000);
+    };
+    propPanel.append(ui.divH([
+      molHost,
+      activity,
+    ]));
+    hosts.push(molHost);
+  });
+  propPanel.append(ui.divH([
+    ui.divText(`Cliff: `, {style: {fontWeight: 'bold', paddingRight: '5px'}}),
+    ui.divText(params.sali!.toFixed(2))
+  ]));
+  return propPanel;
+}