@datagrok/bio 1.7.25 → 1.9.0

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 {sequenceGetSimilarities, drawTooltip} from './utils/sequence-activity-cliffs';
+import {drawSequences, sequenceGetSimilarities} 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';
@@ -26,6 +26,10 @@ import {FastaFileHandler} from '@datagrok-libraries/bio/src/utils/fasta-handler'
 import {removeEmptyStringRows} from '@datagrok-libraries/utils/src/dataframe-utils'
 
 
+//tags: init
+export async function initBio() {
+}
+
 //name: fastaSequenceCellRenderer
 //tags: cellRenderer
 //meta.cellType: Sequence
@@ -46,15 +50,16 @@ export function separatorSequenceCellRenderer(): MacromoleculeSequenceCellRender
 
 function checkInputColumn(col: DG.Column, name: string,
   allowedNotations: string[] = [], allowedAlphabets: string[] = []): boolean {
-  const units: string = col.getTag(DG.TAGS.UNITS);
+  const notation: string = col.getTag(DG.TAGS.UNITS);
+  const alphabet: string = col.getTag('alphabet')
   if (col.semType !== DG.SEMTYPE.MACROMOLECULE) {
     grok.shell.warning(name + ' analysis is allowed for Macromolecules semantic type');
     return false;
   } else if (
     (allowedAlphabets.length > 0 &&
-      !allowedAlphabets.some((a) => units.toUpperCase().endsWith(a.toUpperCase()))) ||
+      !allowedAlphabets.some((a) => alphabet.toUpperCase() == (a.toUpperCase()))) ||
     (allowedNotations.length > 0 &&
-      !allowedNotations.some((n) => units.toUpperCase().startsWith(n.toUpperCase())))
+      !allowedNotations.some((n) => notation.toUpperCase() == (n.toUpperCase())))
   ) {
     const notationAdd = allowedNotations.length == 0 ? 'any notation' :
       (`notation${allowedNotations.length > 1 ? 's' : ''} ${allowedNotations.map((n) => `"${n}"`).join(', ')} `);
@@ -107,7 +112,7 @@ export function vdRegionViewer() {
 //input: double similarity = 80 [Similarity cutoff]
 //input: string methodName { choices:["UMAP", "t-SNE", "SPE"] }
 export async function activityCliffs(df: DG.DataFrame, macroMolecule: DG.Column, activities: DG.Column,
-  similarity: number, methodName: string): Promise<void> {
+  similarity: number, methodName: string): Promise<DG.Viewer | undefined> {
   if (!checkInputColumn(macroMolecule, 'Activity Cliffs'))
     return;
   const encodedCol = encodeMonomers(macroMolecule);
@@ -117,8 +122,13 @@ export async function activityCliffs(df: DG.DataFrame, macroMolecule: DG.Column,
   const options = {
     'SPE': {cycles: 2000, lambda: 1.0, dlambda: 0.0005},
   };
-  const units = macroMolecule!.tags[DG.TAGS.UNITS];
-  await getActivityCliffs(
+  const tags = {
+    'units': macroMolecule.tags['units'],
+    'aligned': macroMolecule.tags['aligned'],
+    'separator': macroMolecule.tags['separator'],
+    'alphabet': macroMolecule.tags['alphabet'],
+  }
+  const sp = await getActivityCliffs(
     df,
     macroMolecule,
     encodedCol,
@@ -129,11 +139,12 @@ export async function activityCliffs(df: DG.DataFrame, macroMolecule: DG.Column,
     'Levenshtein',
     methodName,
     DG.SEMTYPE.MACROMOLECULE,
-    units,
+    tags,
     sequenceSpace,
     sequenceGetSimilarities,
-    drawTooltip,
+    drawSequences,
     (options as any)[methodName]);
+    return sp;
 }
 
 //top-menu: Bio | Sequence Space...
@@ -144,7 +155,7 @@ export async function activityCliffs(df: DG.DataFrame, macroMolecule: DG.Column,
 //input: string similarityMetric { choices:["Levenshtein", "Tanimoto"] }
 //input: bool plotEmbeddings = true
 export async function sequenceSpaceTopMenu(table: DG.DataFrame, macroMolecule: DG.Column, methodName: string,
-  similarityMetric: string = 'Levenshtein', plotEmbeddings: boolean): Promise<void> {
+  similarityMetric: string = 'Levenshtein', plotEmbeddings: boolean): Promise<DG.Viewer|undefined> {
   if (!checkInputColumn(macroMolecule, 'Activity Cliffs'))
     return;
   const encodedCol = encodeMonomers(macroMolecule);
@@ -165,14 +176,16 @@ export async function sequenceSpaceTopMenu(table: DG.DataFrame, macroMolecule: D
   for (const col of embeddings) {
       const listValues = col.toList();
       emptyValsIdxs.forEach((ind: number) => listValues.splice(ind, 0, null));
-      table.columns.add(DG.Column.fromFloat32Array(col.name, listValues));
-  }   
+      table.columns.add(DG.Column.fromList('double', col.name, listValues));
+  }
+  let sp;   
   if (plotEmbeddings) {
     for (const v of grok.shell.views) {
       if (v.name === table.name)
-        (v as DG.TableView).scatterPlot({x: embedColsNames[0], y: embedColsNames[1], title: 'Sequence space'});
+        sp = (v as DG.TableView).scatterPlot({x: embedColsNames[0], y: embedColsNames[1], title: 'Sequence space'});
     }
   }
+  return sp;
 };
 
 //top-menu: Bio | To Atomic Level...
@@ -188,22 +201,6 @@ export async function toAtomicLevel(df: DG.DataFrame, macroMolecule: DG.Column):
   if (!checkInputColumn(macroMolecule, 'To Atomic Level'))
     return;
 
-  let currentView: DG.TableView;
-  for (const view of grok.shell.tableViews) {
-    if (df.name === view.name)
-      currentView = view;
-  }
-
-  // Some hack to activate Chem Molecule rendering
-  const file2 = await _package.files.readAsText('tests/sar-small.csv');
-  const df2 = DG.DataFrame.fromCsv(file2);
-  const v2 = grok.shell.addTableView(df2);
-  setTimeout(() => {
-    grok.shell.closeTable(df2);
-    v2.close();
-    grok.shell.v = currentView;
-  }, 100);
-
   const monomersLibFile = await _package.files.readAsText(HELM_CORE_LIB_FILENAME);
   const monomersLibObject: any[] = JSON.parse(monomersLibFile);
   const atomicCodes = getMolfilesFromSeq(macroMolecule, monomersLibObject);
@@ -213,6 +210,7 @@ export async function toAtomicLevel(df: DG.DataFrame, macroMolecule: DG.Column):
   col.semType = DG.SEMTYPE.MOLECULE;
   col.tags[DG.TAGS.UNITS] = 'molblock';
   df.columns.add(col, true);
+  await grok.data.detectSemanticTypes(df);
 }
 
 
@@ -404,3 +402,4 @@ export async function testDetectMacromolecule(path: string): Promise<DG.DataFram
   resDf.name = `datasets_detectMacromolecule_${path}`;
   return resDf;
 }
+

package/src/tests/activity-cliffs-tests.ts

@@ -1,58 +1,39 @@
-import {after, before, category, expect, expectFloat, test} from '@datagrok-libraries/utils/src/test';
+import {after, before, category, test} from '@datagrok-libraries/utils/src/test';
 
 import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
 
 import {readDataframe} from './utils';
-import {getEmbeddingColsNames, sequenceSpace} from '../utils/sequence-space';
-import {drawTooltip, sequenceGetSimilarities} from '../utils/sequence-activity-cliffs';
-import {getActivityCliffs} from '@datagrok-libraries/ml/src/viewers/activity-cliffs';
-import {encodeMonomers} from '../utils/utils';
+import { _testActivityCliffsOpen } from './activity-cliffs-utils';
 
 
 category('activityCliffs', async () => {
   let actCliffsTableView: DG.TableView;
   let actCliffsDf: DG.DataFrame;
+  let actCliffsTableViewWithEmptyRows: DG.TableView;
+  let actCliffsDfWithEmptyRows: DG.DataFrame;
+  
 
   before(async () => {
     actCliffsDf = await readDataframe('samples/sample_MSA.csv');
     actCliffsTableView = grok.shell.addTableView(actCliffsDf);
-
-    actCliffsDf = actCliffsTableView.dataFrame;
+    actCliffsDfWithEmptyRows = await readDataframe('samples/sample_HELM_empty_vals.csv');
+    actCliffsTableViewWithEmptyRows = grok.shell.addTableView(actCliffsDfWithEmptyRows);
   });
 
   after(async () => {
     grok.shell.closeTable(actCliffsDf);
     actCliffsTableView.close();
+    grok.shell.closeTable(actCliffsDfWithEmptyRows);
+    actCliffsTableViewWithEmptyRows.close();
   });
 
   test('activityCliffsOpen', async () => {
-    const axesNames = getEmbeddingColsNames(actCliffsDf);
-    const units = actCliffsDf.col('MSA')!.tags[DG.TAGS.UNITS];
-    const options = {
-      'SPE': {cycles: 2000, lambda: 1.0, dlambda: 0.0005},
-    };
-    const encodedCol = encodeMonomers(actCliffsDf.col('MSA')!) as DG.Column;
-    const scatterPlot = await getActivityCliffs(
-      actCliffsDf,
-      actCliffsDf.col('MSA')!,
-      encodedCol,
-      axesNames,
-      'Activity cliffs',
-      actCliffsDf.col('Activity')!,
-      50,
-      'Levenshtein',
-      't-SNE',
-      DG.SEMTYPE.MACROMOLECULE,
-      units,
-      sequenceSpace,
-      sequenceGetSimilarities,
-      drawTooltip);
-
-    expect(scatterPlot != null, true);
-
-    const cliffsLink = (Array.from(scatterPlot.root.children) as Element[])
-      .filter((it) => it.className === 'ui-btn ui-btn-ok');
-    expect((cliffsLink[0] as HTMLElement).innerText, '2362 cliffs');
+    await _testActivityCliffsOpen(actCliffsDf, 53, 'UMAP', 'MSA');
+  });
+
+  test('activityCliffsOpenWithEmptyRows', async () => {
+    await _testActivityCliffsOpen(actCliffsDfWithEmptyRows, 53, 'UMAP', 'HELM');
   });
+  
 });

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

@@ -0,0 +1,19 @@
+import * as DG from 'datagrok-api/dg';
+import {delay, expect} from '@datagrok-libraries/utils/src/test';
+import {_package} from '../package-test';
+import { activityCliffs } from '../package';
+
+
+export async function _testActivityCliffsOpen(df: DG.DataFrame, numberCliffs: number, method: string, colName: string) {
+   const scatterPlot = await activityCliffs(
+     df, 
+     df.col(colName)!, 
+     df.col('Activity')!, 
+     80, 
+     method);
+
+    expect(scatterPlot != null, true);
+
+    const cliffsLink = Array.from(scatterPlot!.root.children).filter(it => it.className === 'ui-btn ui-btn-ok');
+    expect((cliffsLink[0] as HTMLElement).innerText, `${numberCliffs} cliffs`);
+}

package/src/tests/detectors-test.ts

@@ -281,7 +281,7 @@ MWRSWY-CKHP
   });
 
   test('samplesHelmCsvHELM', async () => {
-    await _testPos(readSamples(Samples.helmCsv), 'HELM', 'HELM', null, null, null);
+    await _testPos(readSamples(Samples.helmCsv), 'HELM', 'helm', null, null, null);
   });
 
   test('samplesHelmCsvNegativeActivity', async () => {
@@ -297,7 +297,7 @@ MWRSWY-CKHP
     await _testNeg(readSamples(Samples.testHelmCsv), 'Test type');
   });
   test('samplesTestHelmPositiveHelmString', async () => {
-    await _testPos(readSamples(Samples.testHelmCsv), 'HELM string', 'HELM', null, null, null);
+    await _testPos(readSamples(Samples.testHelmCsv), 'HELM string', 'helm', null, null, null);
   });
   test('samplesTestHelmNegativeValid', async () => {
     await _testNeg(readSamples(Samples.testHelmCsv), 'Valid?');

package/src/tests/renderers-test.ts

@@ -1,4 +1,4 @@
-import {after, before, category, expect, test} from '@datagrok-libraries/utils/src/test';
+import {after, before, category, delay, expect, test} from '@datagrok-libraries/utils/src/test';
 
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
@@ -12,6 +12,7 @@ category('renderers', () => {
   let dfList: DG.DataFrame[];
 
   before(async () => {
+    await grok.functions.call('Bio:initBio');
     tvList = [];
     dfList = [];
   });
@@ -46,16 +47,16 @@ category('renderers', () => {
     expect(srcSeqCol!.getTag(DG.TAGS.UNITS), 'fasta');
     expect(srcSeqCol!.getTag('aligned'), 'SEQ');
     expect(srcSeqCol!.getTag('alphabet'), 'PT');
-    expect(srcSeqCol!.getTag('cell.renderer'), 'Macromolecule');
+    expect(srcSeqCol!.getTag('cell.renderer'), 'sequence');
 
     const msaSeqCol: DG.Column | null = await multipleSequenceAlignmentAny(df, srcSeqCol!);
     tv.grid.invalidate();
-
+    
     expect(msaSeqCol!.semType, DG.SEMTYPE.MACROMOLECULE);
     expect(msaSeqCol!.getTag(DG.TAGS.UNITS), 'fasta');
     expect(msaSeqCol!.getTag('aligned'), 'SEQ.MSA');
     expect(msaSeqCol!.getTag('alphabet'), 'PT');
-    expect(msaSeqCol!.getTag('cell.renderer'), 'Macromolecule');
+    expect(msaSeqCol!.getTag('cell.renderer'), 'sequence');
 
     dfList.push(df);
     tvList.push(tv);
@@ -69,7 +70,7 @@ category('renderers', () => {
 
     const srcCol: DG.Column = df.col('sequence')!;
     const tgtCol: DG.Column = await convertDo(srcCol, NOTATION.SEPARATOR, '/');
-    expect(tgtCol.getTag('cell.renderer'), 'Macromolecule');
+    expect(tgtCol.getTag('cell.renderer'), 'sequence');
 
     tvList.push(tv);
     dfList.push(df);

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

@@ -1,30 +1,35 @@
-import {after, before, category, test, expect} from '@datagrok-libraries/utils/src/test';
+import {after, before, category, test, expect, delay} from '@datagrok-libraries/utils/src/test';
 import * as DG from 'datagrok-api/dg';
-import {sequenceSpace} from '../utils/sequence-space';
 import {readDataframe} from './utils';
 import * as grok from 'datagrok-api/grok';
+import { _testSequenceSpaceReturnsResult } from './sequence-space-utils';
 
 category('sequenceSpace', async () => {
   let testFastaDf: DG.DataFrame;
+  let testFastaTableView: DG.TableView;
+  let testHelmWithEmptyRows: DG.DataFrame;
+  let testHelmWithEmptyRowsTableView: DG.TableView;
 
   before(async () => {
     testFastaDf = await readDataframe('samples/sample_FASTA.csv');
-    // await grok.data.detectSemanticTypes(testFastaDf);
+    testFastaTableView = grok.shell.addTableView(testFastaDf);
+    testHelmWithEmptyRows = await readDataframe('samples/sample_HELM_empty_vals.csv');
+    testHelmWithEmptyRowsTableView = grok.shell.addTableView(testHelmWithEmptyRows);
   });
 
   after(async () => {
     grok.shell.closeTable(testFastaDf);
+    testFastaTableView.close();
+    grok.shell.closeTable(testHelmWithEmptyRows);
+    testHelmWithEmptyRowsTableView.close();
   });
 
   test('sequenceSpaceOpens', async () => {
-    const sequenceSpaceParams = {
-      seqCol: testFastaDf.col('Sequence')!,
-      methodName: 't-SNE',
-      similarityMetric: 'Levenshtein',
-      embedAxesNames: ['Embed_X', 'Embed_Y']
-    };
-    const res = await sequenceSpace(sequenceSpaceParams);
-    expect(res.coordinates != undefined, true);
-    expect(res.distance != undefined, true);
+    await _testSequenceSpaceReturnsResult(testFastaDf, 'UMAP', 'Sequence');
   });
+
+  test('sequenceSpaceOpensWithEmptyRows', async () => {
+    await _testSequenceSpaceReturnsResult(testHelmWithEmptyRows, 'UMAP', 'HELM');
+  });
+
 });

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

@@ -0,0 +1,10 @@
+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';
+
+export async function _testSequenceSpaceReturnsResult(df: DG.DataFrame, algorithm: string, colName: string) {
+  await grok.data.detectSemanticTypes(df);
+  const sp = await sequenceSpaceTopMenu(df, df.col(colName)!, algorithm, 'Levenshtein', true);
+  expect(sp != null, true);
+}

package/src/utils/cell-renderer.ts

@@ -6,9 +6,9 @@ import {UnknownSeqPalette, UnknownSeqPalettes} from '@datagrok-libraries/bio/src
 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';
+import {printLeftOrCentered} from '@datagrok-libraries/bio/src/utils/cell-renderer';
 
 const undefinedColor = 'rgb(100,100,100)';
-const grayColor = '#808080';
 
 function getPalleteByType(paletteType: string): SeqPalette {
   switch (paletteType) {
@@ -44,71 +44,6 @@ export function processSequence(subParts: string[]): [string[], boolean] {
 }
 
 
-/**
- * A function that prints a string aligned to left or centered.
- *
- * @param {number} x x coordinate.
- * @param {number} y y coordinate.
- * @param {number} w Width.
- * @param {number} h Height.
- * @param {CanvasRenderingContext2D} g Canvas rendering context.
- * @param {string} s String to print.
- * @param {string} [color=undefinedColor] String color.
- * @param {number} [pivot=0] Pirvot.
- * @param {boolean} [left=false] Is left aligned.
- * @param {number} [transparencyRate=0.0] Transparency rate where 1.0 is fully transparent
- * @param {string} [separator=''] Is separator for sequence.
- * @param {boolean} [last=false] Is checker if element last or not.
- * @return {number} x coordinate to start printing at.
- */
-export function printLeftOrCentered(
-  x: number, y: number, w: number, h: number,
-  g: CanvasRenderingContext2D, s: string, color = undefinedColor,
-  pivot: number = 0, left = false, transparencyRate: number = 1.0,
-  separator: string = '', last: boolean = false, drawStyle: string = 'classic', maxWord: any = {}, maxWordIdx: number = 0, gridCell: any = {}): number {
-  g.textAlign = 'start';
-  const colorPart = s.substring(0);
-  let grayPart = last ? '' : separator;
-  if (drawStyle === 'msa') {
-    grayPart = '';
-  }
-
-  let textSize: any = g.measureText(colorPart + grayPart);
-  const indent = 5;
-
-  let colorTextSize = g.measureText(colorPart).width;
-  const dy = (textSize.fontBoundingBoxAscent + textSize.fontBoundingBoxDescent) / 2;
-  textSize = textSize.width;
-  if (drawStyle === 'msa') {
-    if (colorTextSize > maxWord) {
-      maxWord[maxWordIdx] = colorTextSize;
-      gridCell.cell.column.temp = maxWord;
-    }
-    colorTextSize = maxWord[maxWordIdx];
-    textSize = maxWord[maxWordIdx];
-  }
-
-  function draw(dx1: number, dx2: number): void {
-    g.fillStyle = color;
-    g.globalAlpha = transparencyRate;
-    g.fillText(colorPart, x + dx1, y + dy);
-    if (drawStyle === 'classic') {
-      g.fillStyle = grayColor;
-      g.fillText(grayPart, x + dx2, y + dy);
-    }
-  }
-
-  if (left || textSize > w) {
-    draw(indent, indent + colorTextSize);
-    return x + colorTextSize + g.measureText(grayPart).width;
-  } else {
-    const dx = (w - textSize) / 2;
-    draw(dx, dx + colorTextSize);
-    return x + dx + colorTextSize;
-  }
-}
-
-
 export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
   get name(): string { return 'sequence'; }
 
@@ -118,6 +53,45 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
 
   get defaultWidth(): number { return 230; }
 
+  onMouseMove(gridCell: DG.GridCell, e: MouseEvent): void {
+    if (gridCell.cell.column.getTag('aligned') !== 'SEQ.MSA') {
+      return;
+    }
+    const maxLengthWordsSum = gridCell.cell.column.temp['bio-sum-maxLengthWords'];
+    if (maxLengthWordsSum == null) {
+      gridCell.cell.column.setTag('.calculatedCellRender', 'unexist');
+    }
+    const maxIndex = gridCell.cell.column.temp['bio-maxIndex'];
+    //@ts-ignore
+    const argsX = e.layerX - gridCell.gridColumn.left - ((gridCell.bounds.x<0) ? gridCell.bounds.x : 0);
+    let left = 0;
+    let right = maxIndex;
+    let found = false;
+    maxLengthWordsSum[maxIndex + 1] = argsX + 1;
+    let mid = 0;
+    if (argsX > maxLengthWordsSum[0]) {
+      while (!found) {
+        mid = Math.floor((right + left) / 2);
+        if (argsX >= maxLengthWordsSum[mid] && argsX <= maxLengthWordsSum[mid + 1]) {
+          left = mid;
+          found = true;
+        } else if (argsX < maxLengthWordsSum[mid]) {
+          right = mid - 1;
+        } else if (argsX > maxLengthWordsSum[mid + 1]) {
+          left = mid + 1;
+        }
+        if (left == right) {
+          found = true;
+        }
+      }
+    }
+    left = (argsX >= maxLengthWordsSum[left]) ? left + 1 : left;
+    const separator = gridCell.cell.column.getTag('separator') ?? '';
+    const splitterFunc: SplitterFunc = WebLogo.getSplitter('separator', separator);
+    const subParts: string[] = splitterFunc(gridCell.cell.value);
+    ui.tooltip.show(ui.div(subParts[left]), e.x + 16, e.y + 16);
+  }
+
   /**
    * Cell renderer function.
    *
@@ -136,7 +110,6 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
   ): void {
     const grid = gridCell.gridRow !== -1 ? gridCell.grid : undefined;
     const cell = gridCell.cell;
-    const tag = gridCell.cell.column.getTag(DG.TAGS.UNITS);
     const [type, subtype, paletteType] = gridCell.cell.column.getTag(DG.TAGS.UNITS).split(':');
     w = grid ? Math.min(grid.canvas.width - x, w) : g.canvas.width - x;
     g.save();
@@ -153,40 +126,46 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     const palette = getPalleteByType(paletteType);
 
     const separator = gridCell.cell.column.getTag('separator') ?? '';
-    const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, gridCell.cell.column.getTag('separator'));
+    const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, separator);
 
     const columns = gridCell.cell.column.categories;
     let monomerToShortFunction: (amino: string, maxLengthOfMonomer: number) => string = WebLogo.monomerToShort;
     let maxLengthOfMonomer = 8;
 
-    let maxLengthWords = {};
-    // check if gridCell.cell.column.temp is array
+    let maxLengthWords: any = {};
     if (gridCell.cell.column.getTag('.calculatedCellRender') !== 'exist') {
       for (let i = 0; i < columns.length; i++) {
         let subParts: string[] = splitterFunc(columns[i]);
         subParts.forEach((amino, index) => {
-          //@ts-ignore
           let textSizeWidth = g.measureText(monomerToShortFunction(amino, maxLengthOfMonomer));
-          //@ts-ignore
           if (textSizeWidth.width > (maxLengthWords[index] ?? 0)) {
-            //@ts-ignore
             maxLengthWords[index] = textSizeWidth.width;
           }
+          if (index > (maxLengthWords['bio-maxIndex'] ?? 0)) {
+            maxLengthWords['bio-maxIndex'] = index;
+          }
         });
       }
-      gridCell.cell.column.temp = maxLengthWords;
+      let maxLengthWordSum: any = {};
+      maxLengthWordSum[0] = maxLengthWords[0];
+      for (let i = 1; i <= maxLengthWords['bio-maxIndex']; i++) {
+        maxLengthWordSum[i] = maxLengthWordSum[i - 1] + maxLengthWords[i];
+      }
+      gridCell.cell.column.temp = {
+        'bio-sum-maxLengthWords': maxLengthWordSum,
+        'bio-maxIndex': maxLengthWords['bio-maxIndex'],
+        'bio-maxLengthWords': maxLengthWords
+      };
       gridCell.cell.column.setTag('.calculatedCellRender', 'exist');
     } else {
-      maxLengthWords = gridCell.cell.column.temp;
+      maxLengthWords = gridCell.cell.column.temp['bio-maxLengthWords'];
     }
 
     const subParts: string[] = splitterFunc(cell.value);
     let x1 = x;
     let color = undefinedColor;
-    // get max length word in subParts
-    let tagUnits = gridCell.cell.column.getTag(DG.TAGS.UNITS);
     let drawStyle = 'classic';
-    if (tagUnits.includes('MSA')) {
+    if (gridCell.cell.column.getTag('aligned').includes('MSA')) {
       drawStyle = 'msa';
     }
     subParts.forEach((amino, index) => {
@@ -290,9 +269,8 @@ export class MacromoleculeDifferenceCellRenderer extends DG.GridCellRenderer {
     // 28 is the height of the two substitutions on top of each other + space
     const updatedY = Math.max(y, y + (h - 28) / 2);
 
-    let palette: SeqPalette = UnknownSeqPalettes.Color;
-    if (units != 'HELM')
-      palette = getPalleteByType(units.substring(units.length - 2));
+    let palette: SeqPalette = units == 'HELM' ? UnknownSeqPalettes.Color :
+      getPalleteByType(gridCell.tableColumn!.tags[C.TAGS.ALPHABET]);
 
     const vShift = 7;
     for (let i = 0; i < subParts1.length; i++) {

package/src/utils/multiple-sequence-alignment.ts

@@ -57,9 +57,15 @@ export async function runKalign(srcCol: DG.Column, isAligned = false, unUsedName
 
   // units
   const srcUnits = srcCol.getTag(DG.TAGS.UNITS);
-  const tgtUnits = srcUnits.split(':').map((p, i) => i == 1 ? p + '.MSA' : p).join(':');
+  //aligned
+  const srcAligned = srcCol.getTag('aligned');
+  const tgtAligned = srcAligned + '.MSA';
+  //alphabet
+  const srcAlphabet = srcCol.getTag('alphabet');
 
-  tgtCol.setTag(DG.TAGS.UNITS, tgtUnits);
+  tgtCol.setTag(DG.TAGS.UNITS, srcUnits);
+  tgtCol.setTag('aligned', tgtAligned);
+  tgtCol.setTag('alphabet', srcAlphabet);
   tgtCol.semType = DG.SEMTYPE.MACROMOLECULE;
   return tgtCol;
 }

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

@@ -1,4 +1,4 @@
-import {IDrawTooltipParams} from '@datagrok-libraries/ml/src/viewers/activity-cliffs';
+import {ITooltipAndPanelParams} from '@datagrok-libraries/ml/src/viewers/activity-cliffs';
 import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 import {getSimilarityFromDistance} from '@datagrok-libraries/utils/src/similarity-metrics';
@@ -12,25 +12,9 @@ export async function sequenceGetSimilarities(col: DG.Column, seq: string): Prom
   return DG.Column.fromList(DG.COLUMN_TYPE.FLOAT, 'distances', distances);
 }
 
-export function drawTooltip(params: IDrawTooltipParams) {
-  params.tooltips[params.line.id] = ui.divH([]);
-  const columnNames = ui.divV([
-    ui.divText('sequense'),
-    ui.divText(params.activity.name),
-  ]);
-  columnNames.style.fontWeight = 'bold';
-  columnNames.style.display = 'flex';
-  columnNames.style.justifyContent = 'space-between';
-  params.tooltips[params.line.id].append(columnNames);
-  params.line.mols.forEach((mol: number) => {
-    const seq = ui.divText(params.df.get(params.seqCol.name, mol));
-    const activity = ui.divText(params.df.get(params.activity.name, mol).toFixed(2));
-    activity.style.display = 'flex';
-    activity.style.justifyContent = 'left';
-    activity.style.paddingLeft = '30px';
-    params.tooltips[params.line.id].append(ui.divV([
-      seq,
-      activity,
-    ], {style: {paddingLeft: '5px'}}));
+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)));
   });
 }

package/src/viewers/vd-regions-viewer.ts

@@ -51,6 +51,7 @@ export class VdRegionsViewer extends DG.JsViewer {
   public sequenceColumnNamePostfix: string;
 
   public skipEmptyPositions: boolean;
+  public positionWidth: number;
 
 
   public get df(): DG.DataFrame {
@@ -77,6 +78,7 @@ export class VdRegionsViewer extends DG.JsViewer {
     this.sequenceColumnNamePostfix = this.string('sequenceColumnNamePostfix', 'chain sequence');
 
     this.skipEmptyPositions = this.bool('skipEmptyPositions', false);
+    this.positionWidth = this.float('positionWidth', 16);
   }
 
   public async init() {
@@ -135,6 +137,10 @@ export class VdRegionsViewer extends DG.JsViewer {
         await this.destroyView();
         await this.buildView();
         break;
+      case 'positionWidth':
+        await this.destroyView();
+        await this.buildView();
+        break;
       }
     }
   }
@@ -205,6 +211,7 @@ export class VdRegionsViewer extends DG.JsViewer {
           endPositionName: region!.positionEndName,
           fixWidth: true,
           skipEmptyPositions: this.skipEmptyPositions,
+          positionWidth: this.positionWidth,
         })) as unknown as WebLogo;
       }
       // WebLogo creation fires onRootSizeChanged event even before control being added to this.logos