@datagrok/bio 1.7.24 → 1.7.25

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "1.7.24",
+  "version": "1.7.25",
   "description": "Bio is a [package](https://datagrok.ai/help/develop/develop#packages) for the [Datagrok](https://datagrok.ai) platform",
   "repository": {
     "type": "git",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@biowasm/aioli": ">=2.4.0",
-    "@datagrok-libraries/bio": "^3.0.3",
+    "@datagrok-libraries/bio": "^3.0.4",
     "@datagrok-libraries/ml": "^3.0.3",
     "@datagrok-libraries/utils": "^1.5.4",
     "cash-dom": "latest",
@@ -36,7 +36,11 @@
     "puppeteer": "^13.7.0",
     "ts-jest": "^27.0.0",
     "webpack": "latest",
-    "webpack-cli": "^4.10.0"
+    "webpack-cli": "^4.10.0",
+    "@types/js-yaml": "^4.0.5",
+    "js-yaml": "^4.1.0",
+    "@types/node-fetch": "^2.6.2",
+    "node-fetch": "^2.6.7"
   },
   "scripts": {
     "link-api": "npm link datagrok-api",

package/{setup → setup.sh}

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-./setup-unlink-clean
+./setup-unlink-clean.sh
 
 GREEN='\e[0;32m'
 NO_COLOR='\e[0m'

package/src/__jest__/remote.test.ts

@@ -5,7 +5,7 @@
 import * as utils from './test-node';
 import puppeteer from 'puppeteer';
 
-const P_START_TIMEOUT: number = 500000;
+const P_START_TIMEOUT: number = 3600000;
 let browser: puppeteer.Browser;
 let page: puppeteer.Page;
 
@@ -65,4 +65,4 @@ it('TEST', async () => {
   console.log(r.passReport);
   // @ts-ignore
   expect(r.failed).checkOutput(false, r.failReport);
-}, 500000);
+}, 3600000);

package/src/__jest__/test-node.ts

@@ -68,6 +68,7 @@ export async function getBrowserPage(puppeteer: any): Promise<{ browser: any, pa
   });
 
   const page = await browser.newPage();
+  await page.setDefaultNavigationTimeout(0);
   await page.goto(`${url}/oauth/`);
   await page.setCookie({name: 'auth', value: token});
   await page.evaluate((token: any) => {
@@ -75,8 +76,8 @@ export async function getBrowserPage(puppeteer: any): Promise<{ browser: any, pa
   }, token);
   await page.goto(url);
   try {
-    await page.waitForSelector('.grok-preloader');
-    await page.waitForFunction(() => document.querySelector('.grok-preloader') == null, {timeout: 500000});
+    await page.waitForSelector('.grok-preloader', { timeout: 1800000 });
+    await page.waitForFunction(() => document.querySelector('.grok-preloader') == null, {timeout: 3600000});
   } catch (error) {
     throw error;
   }

package/src/package-test.ts

@@ -22,7 +22,6 @@ export {tests};
 //input: string category {optional: true}
 //input: string test {optional: true}
 //output: dataframe result
-//top-menu: Tools | Dev | JS API Tests
 export async function test(category: string, test: string): Promise<DG.DataFrame> {
   const data = await runTests({category, test});
   return DG.DataFrame.fromObjects(data)!;

package/src/package.ts

@@ -20,38 +20,27 @@ import {createJsonMonomerLibFromSdf, encodeMonomers, getMolfilesFromSeq, HELM_CO
 import {getMacroMol} from './utils/atomic-works';
 import {MacromoleculeSequenceCellRenderer} from './utils/cell-renderer';
 import {convert} from './utils/convert';
-import {lru} from './utils/cell-renderer';
 import {representationsWidget} from './widgets/representations';
 import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 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(): Promise<void> {
-  // apparently HELMWebEditor requires dojo to be initialized first
-  const funcList: DG.Func[] = DG.Func.find({package: 'Helm', name: 'initHelm'});
-  console.debug(`Bio: initBio() funcList.length = ${funcList.length}`);
-  if (funcList.length === 1)
-    await grok.functions.call('Helm:initHelp');
-
-  return new Promise((resolve, reject) => {
-    // @ts-ignore
-    dojo.ready(function() { resolve(null); });
-  });
-}
-
-//name: Lru
-//output: object lruCache
-export function Lru() {
-  return lru;
+//name: fastaSequenceCellRenderer
+//tags: cellRenderer
+//meta.cellType: Sequence
+//meta.columnTags: units=fasta
+//output: grid_cell_renderer result
+export function fastaSequenceCellRenderer(): MacromoleculeSequenceCellRenderer {
+  return new MacromoleculeSequenceCellRenderer();
 }
 
-//name: macromoleculeSequenceCellRenderer
+//name: separatorSequenceCellRenderer
 //tags: cellRenderer
-//meta.cellType: Macromolecule
+//meta.cellType: Sequence
+//meta.columnTags: units=separator
 //output: grid_cell_renderer result
-export function macromoleculeSequenceCellRenderer(): MacromoleculeSequenceCellRenderer {
+export function separatorSequenceCellRenderer(): MacromoleculeSequenceCellRenderer {
   return new MacromoleculeSequenceCellRenderer();
 }
 

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

@@ -1,10 +1,11 @@
-
 import {after, before, category, test, expect, expectObject} from '@datagrok-libraries/utils/src/test';
 
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import {PositionInfo, PositionMonomerInfo, WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
+import {Column} from 'datagrok-api/dg';
+
 category('WebLogo-positions', () => {
   let tvList: DG.TableView[];
   let dfList: DG.DataFrame[];
@@ -18,8 +19,6 @@ category('WebLogo-positions', () => {
     -TC-GCTTGC--`;
 
 
-  const resShrinkEmptyTailDf1: PositionInfo[] = [];
-
   before(async () => {
     tvList = [];
     dfList = [];
@@ -35,6 +34,9 @@ category('WebLogo-positions', () => {
     const df: DG.DataFrame = DG.DataFrame.fromCsv(csvDf1);
     const tv: DG.TableView = grok.shell.addTableView(df);
 
+    df.getCol('seq').semType = 'Macromolecule';
+    df.getCol('seq').setTag('units', 'fasta:SEQ.MSA:DNA');
+
     const wlViewer: WebLogo = await df.plot.fromType('WebLogo') as unknown as WebLogo;
     tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
 
@@ -57,9 +59,9 @@ category('WebLogo-positions', () => {
       new PositionInfo('11', {'-': new PositionMonomerInfo(5)}),
       new PositionInfo('12', {'-': new PositionMonomerInfo(5)})
     ];
-    console.log(positions);
-    expect(positions.length,resAllDf1.length);
-    // check all positions are equal resAllDf1
+
+    expect(positions.length, resAllDf1.length);
+
     for (let i = 0; i < positions.length; i++) {
       expect(positions[i].name, resAllDf1[i].name);
       for (const key in positions[i].freq) {
@@ -68,11 +70,27 @@ category('WebLogo-positions', () => {
     }
 
   });
-  test('positions with shrinkEmptyTail option', async () => {
-    const df: DG.DataFrame = DG.DataFrame.fromCsv(csvDf1);
+  test('positions with shrinkEmptyTail option true (filterd)', async () => {
+    let csvDf2 = `seq 
+    -TC-G-TTGC--
+    -TC-GCTTGC--
+    -T--C-GT-
+    -T--C-GT-
+    -T--C-GT-
+    -T--CCGT-`;
+    const df: DG.DataFrame = DG.DataFrame.fromCsv(csvDf2);
     const tv: DG.TableView = grok.shell.addTableView(df);
 
+    df.getCol('seq').semType = 'Macromolecule';
+    df.getCol('seq').setTag('units', 'fasta:SEQ.MSA:DNA');
+
+    let seq: Column = df.getCol('seq');
+    df.filter.init((i) => {
+      return i > 2;
+    });
+    df.filter.fireChanged();
     const wlViewer: WebLogo = await df.plot.fromType('WebLogo', {'shrinkEmptyTail': true}) as unknown as WebLogo;
+
     tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
 
     tvList.push(tv);
@@ -81,19 +99,19 @@ category('WebLogo-positions', () => {
     const positions: PositionInfo[] = wlViewer['positions'];
 
     const resAllDf1: PositionInfo[] = [
-      new PositionInfo('1', {'A': new PositionMonomerInfo(2), '-': new PositionMonomerInfo(3)}),
-      new PositionInfo('2', {'T': new PositionMonomerInfo(5)}),
-      new PositionInfo('3', {'C': new PositionMonomerInfo(5)}),
-      new PositionInfo('4', {'-': new PositionMonomerInfo(5)}),
-      new PositionInfo('5', {'G': new PositionMonomerInfo(5)}),
-      new PositionInfo('6', {'-': new PositionMonomerInfo(3), 'C': new PositionMonomerInfo(2)}),
-      new PositionInfo('7', {'T': new PositionMonomerInfo(5)}),
-      new PositionInfo('8', {'T': new PositionMonomerInfo(5)}),
-      new PositionInfo('9', {'G': new PositionMonomerInfo(5)}),
-      new PositionInfo('10', {'C': new PositionMonomerInfo(5)})
+      new PositionInfo('1', {'-': new PositionMonomerInfo(3)}),
+      new PositionInfo('2', {'T': new PositionMonomerInfo(3)}),
+      new PositionInfo('3', {'-': new PositionMonomerInfo(3)}),
+      new PositionInfo('4', {'-': new PositionMonomerInfo(3)}),
+      new PositionInfo('5', {'C': new PositionMonomerInfo(3)}),
+      new PositionInfo('6', {'-': new PositionMonomerInfo(2), 'C': new PositionMonomerInfo(1)}),
+      new PositionInfo('7', {'G': new PositionMonomerInfo(3)}),
+      new PositionInfo('8', {'T': new PositionMonomerInfo(3)}),
+      new PositionInfo('9', {'-': new PositionMonomerInfo(3)}),
     ];
 
-    console.log(positions);
+    expect(positions.length, resAllDf1.length);
+
     for (let i = 0; i < positions.length; i++) {
       expect(positions[i].name, resAllDf1[i].name);
       for (const key in positions[i].freq) {
@@ -107,7 +125,10 @@ category('WebLogo-positions', () => {
     const df: DG.DataFrame = DG.DataFrame.fromCsv(csvDf1);
     const tv: DG.TableView = grok.shell.addTableView(df);
 
-    const wlViewer: WebLogo = await df.plot.fromType('WebLogo', {'skipEmptyPositions': false}) as unknown as WebLogo;
+    df.getCol('seq').semType = 'Macromolecule';
+    df.getCol('seq').setTag('units', 'fasta:SEQ.MSA:DNA');
+
+    const wlViewer: WebLogo = await df.plot.fromType('WebLogo', {'skipEmptyPositions': true}) as unknown as WebLogo;
     tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
 
     tvList.push(tv);
@@ -126,7 +147,8 @@ category('WebLogo-positions', () => {
       new PositionInfo('9', {'G': new PositionMonomerInfo(5)}),
       new PositionInfo('10', {'C': new PositionMonomerInfo(5)})
     ];
-    console.log(positions);
+
+    expect(positions.length, resAllDf1.length);
 
     for (let i = 0; i < positions.length; i++) {
       expect(positions[i].name, resAllDf1[i].name);

package/src/tests/detectors-test.ts

@@ -190,6 +190,7 @@ MWRSWY-CKHP
     };
   };
 
+
   test('NegativeEmpty', async () => { await _testNeg(readCsv('csvDfEmpty', csvDfEmpty), 'col1'); });
   test('Negative1', async () => { await _testNeg(readCsv('csvDf1', csvDf1), 'col1'); });
   test('Negative2', async () => { await _testNeg(readCsv('csvDf2', csvDf2), 'col1'); });
@@ -197,44 +198,44 @@ MWRSWY-CKHP
   test('NegativeSmiles', async () => { await _testNeg(readCsv('csvDfSmiles', csvDfSmiles), 'col1'); });
 
   test('Dna1', async () => {
-    await _testPos(readCsv('csvDfDna1', csvDfDna1), 'seq', 'fasta:SEQ:DNA');
+    await _testPos(readCsv('csvDfDna1', csvDfDna1), 'seq', 'fasta', 'SEQ', 'DNA');
   });
   test('Rna1', async () => {
-    await _testPos(readCsv('csvDfRna1', csvDfRna1), 'seq', 'fasta:SEQ:RNA');
+    await _testPos(readCsv('csvDfRna1', csvDfRna1), 'seq', 'fasta', 'SEQ', 'RNA');
   });
   test('AA1', async () => {
-    await _testPos(readCsv('csvDfPt1', csvDfPt1), 'seq', 'fasta:SEQ:PT');
+    await _testPos(readCsv('csvDfPt1', csvDfPt1), 'seq', 'fasta', 'SEQ', 'PT');
   });
   test('MsaDna1', async () => {
-    await _testPos(readCsv('csvDfMsaDna1', csvDfMsaDna1), 'seq', 'fasta:SEQ.MSA:DNA');
+    await _testPos(readCsv('csvDfMsaDna1', csvDfMsaDna1), 'seq', 'fasta', 'SEQ.MSA', 'DNA');
   });
 
   test('MsaAA1', async () => {
-    await _testPos(readCsv('csvDfMsaPt1', csvDfMsaPt1), 'seq', 'fasta:SEQ.MSA:PT');
+    await _testPos(readCsv('csvDfMsaPt1', csvDfMsaPt1), 'seq', 'fasta', 'SEQ.MSA', 'PT');
   });
 
   test('SepDna', async () => {
-    await _testPos(readCsv('csvDfSepDna', csvDfSepDna), 'seq', 'separator:SEQ:DNA', '*');
+    await _testPos(readCsv('csvDfSepDna', csvDfSepDna), 'seq', 'separator', 'SEQ', 'DNA', '*');
   });
   test('SepRna', async () => {
-    await _testPos(readCsv('csvDfSepRna', csvDfSepRna), 'seq', 'separator:SEQ:RNA', '*');
+    await _testPos(readCsv('csvDfSepRna', csvDfSepRna), 'seq', 'separator', 'SEQ', 'RNA', '*');
   });
   test('SepPt', async () => {
-    await _testPos(readCsv('csvDfSepPt', csvDfSepPt), 'seq', 'separator:SEQ:PT', '-');
+    await _testPos(readCsv('csvDfSepPt', csvDfSepPt), 'seq', 'separator', 'SEQ', 'PT', '-');
   });
   test('SepUn1', async () => {
-    await _testPos(readCsv('csvDfSepUn1', csvDfSepUn1), 'seq', 'separator:SEQ:UN', '-');
+    await _testPos(readCsv('csvDfSepUn1', csvDfSepUn1), 'seq', 'separator', 'SEQ', 'UN', '-');
   });
   test('SepUn2', async () => {
-    await _testPos(readCsv('csvDfSepUn2', csvDfSepUn2), 'seq', 'separator:SEQ:UN', '/');
+    await _testPos(readCsv('csvDfSepUn2', csvDfSepUn2), 'seq', 'separator', 'SEQ', 'UN', '/');
   });
 
   test('SepMsaN1', async () => {
-    await _testPos(readCsv('csvDfSepMsaDna1', csvDfSepMsaDna1), 'seq', 'separator:SEQ.MSA:DNA', '-');
+    await _testPos(readCsv('csvDfSepMsaDna1', csvDfSepMsaDna1), 'seq', 'separator', 'SEQ.MSA', 'DNA', '-');
   });
 
   test('SamplesFastaCsvPt', async () => {
-    await _testPos(readSamples(Samples.fastaCsv), 'sequence', 'fasta:SEQ:PT');
+    await _testPos(readSamples(Samples.fastaCsv), 'sequence', 'fasta', 'SEQ', 'PT');
   });
   test('SamplesFastaCsvNegativeEntry', async () => {
     await _testNeg(readSamples(Samples.fastaCsv), 'Entry');
@@ -247,7 +248,7 @@ MWRSWY-CKHP
   });
 
   test('SamplesFastaFastaPt', async () => {
-    await _testPos(readSamples(Samples.fastaFasta, readFileFasta), 'sequence', 'fasta:SEQ:PT');
+    await _testPos(readSamples(Samples.fastaFasta, readFileFasta), 'sequence', 'fasta', 'SEQ', 'PT');
   });
 
   // peptidesComplex contains monomers with spaces in AlignedSequence columns, which are forbidden
@@ -265,7 +266,7 @@ MWRSWY-CKHP
   });
 
   test('samplesMsaComplexUn', async () => {
-    await _testPos(readSamples(Samples.msaComplex), 'MSA', 'separator:SEQ.MSA:UN', '/');
+    await _testPos(readSamples(Samples.msaComplex), 'MSA', 'separator', 'SEQ.MSA', 'UN', '/');
   });
   test('samplesMsaComplexNegativeActivity', async () => {
     await _testNeg(readSamples(Samples.msaComplex), 'Activity');
@@ -280,7 +281,7 @@ MWRSWY-CKHP
   });
 
   test('samplesHelmCsvHELM', async () => {
-    await _testPos(readSamples(Samples.helmCsv), 'HELM', 'HELM', null);
+    await _testPos(readSamples(Samples.helmCsv), 'HELM', 'HELM', null, null, null);
   });
 
   test('samplesHelmCsvNegativeActivity', async () => {
@@ -296,7 +297,7 @@ MWRSWY-CKHP
     await _testNeg(readSamples(Samples.testHelmCsv), 'Test type');
   });
   test('samplesTestHelmPositiveHelmString', async () => {
-    await _testPos(readSamples(Samples.testHelmCsv), 'HELM string', 'HELM');
+    await _testPos(readSamples(Samples.testHelmCsv), 'HELM string', 'HELM', null, null, null);
   });
   test('samplesTestHelmNegativeValid', async () => {
     await _testNeg(readSamples(Samples.testHelmCsv), 'Valid?');
@@ -328,7 +329,7 @@ MWRSWY-CKHP
   });
 
   test('samplesFastaPtPosSequence', async () => {
-    await _testPos(readSamples(Samples.fastaPtCsv), 'sequence', 'fasta:SEQ:PT');
+    await _testPos(readSamples(Samples.fastaPtCsv), 'sequence', 'fasta', 'SEQ', 'PT');
   });
 
   test('samplesTestCerealNegativeCerealName', async () => {
@@ -383,7 +384,7 @@ export async function _testNeg(readDf: DfReaderFunc, colName: string) {
   }
 }
 
-export async function _testPos(readDf: DfReaderFunc, colName: string, units: string, separator: string | null = null) {
+export async function _testPos(readDf: DfReaderFunc, colName: string, units: string, aligned: string | null, alphabet: string | null, separator: string | null = null) {
   const df: DG.DataFrame = await readDf();
   const col: DG.Column = df.col(colName)!;
   const semType: string = await grok.functions.call('Bio:detectMacromolecule', {col: col});
@@ -392,6 +393,8 @@ export async function _testPos(readDf: DfReaderFunc, colName: string, units: str
 
   expect(col.semType === DG.SEMTYPE.MACROMOLECULE, true);
   expect(col.getTag(DG.TAGS.UNITS), units);
+  expect(col.getTag('aligned'), aligned);
+  expect(col.getTag('alphabet'), alphabet);
   if (separator)
     expect(col.getTag('separator'), separator);
 }

package/src/tests/renderers-test.ts

@@ -43,14 +43,18 @@ category('renderers', () => {
       `semType="${srcSeqCol!.semType}", units="${srcSeqCol!.getTag(DG.TAGS.UNITS)}", ` +
       `cell.renderer="${srcSeqCol!.getTag('cell.renderer')}"`);
     expect(srcSeqCol!.semType, DG.SEMTYPE.MACROMOLECULE);
-    expect(srcSeqCol!.getTag(DG.TAGS.UNITS), 'fasta:SEQ:PT');
+    expect(srcSeqCol!.getTag(DG.TAGS.UNITS), 'fasta');
+    expect(srcSeqCol!.getTag('aligned'), 'SEQ');
+    expect(srcSeqCol!.getTag('alphabet'), 'PT');
     expect(srcSeqCol!.getTag('cell.renderer'), 'Macromolecule');
 
     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:SEQ.MSA:PT');
+    expect(msaSeqCol!.getTag(DG.TAGS.UNITS), 'fasta');
+    expect(msaSeqCol!.getTag('aligned'), 'SEQ.MSA');
+    expect(msaSeqCol!.getTag('alphabet'), 'PT');
     expect(msaSeqCol!.getTag('cell.renderer'), 'Macromolecule');
 
     dfList.push(df);

package/src/utils/cell-renderer.ts

@@ -7,7 +7,6 @@ import {SplitterFunc, WebLogo} from '@datagrok-libraries/bio/src/viewers/web-log
 import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
 import * as ui from 'datagrok-api/ui';
 
-export const lru = new DG.LruCache<any, any>();
 const undefinedColor = 'rgb(100,100,100)';
 const grayColor = '#808080';
 
@@ -62,7 +61,7 @@ export function processSequence(subParts: string[]): [string[], boolean] {
  * @param {boolean} [last=false] Is checker if element last or not.
  * @return {number} x coordinate to start printing at.
  */
-function printLeftOrCentered(
+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,
@@ -71,7 +70,7 @@ function printLeftOrCentered(
   const colorPart = s.substring(0);
   let grayPart = last ? '' : separator;
   if (drawStyle === 'msa') {
-    grayPart = ' ';
+    grayPart = '';
   }
 
   let textSize: any = g.measureText(colorPart + grayPart);
@@ -109,26 +108,11 @@ function printLeftOrCentered(
   }
 }
 
-function findMonomers(helmString: string) {
-  //@ts-ignore
-  const types = Object.keys(org.helm.webeditor.monomerTypeList());
-  const monomers: any = [];
-  const monomer_names: any = [];
-  for (var i = 0; i < types.length; i++) {
-    //@ts-ignore
-    monomers.push(new scil.helm.Monomers.getMonomerSet(types[i]));
-    Object.keys(monomers[i]).forEach(k => {
-      monomer_names.push(monomers[i][k].id);
-    });
-  }
-  const split_string = WebLogo.splitterAsHelm(helmString);
-  return new Set(split_string.filter(val => !monomer_names.includes(val)));
-}
 
 export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
-  get name(): string { return 'macromoleculeSequence'; }
+  get name(): string { return 'sequence'; }
 
-  get cellType(): string { return C.SEM_TYPES.MACROMOLECULE; }
+  get cellType(): string { return 'sequence'; }
 
   get defaultHeight(): number { return 30; }
 
@@ -153,109 +137,67 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     const grid = gridCell.gridRow !== -1 ? gridCell.grid : undefined;
     const cell = gridCell.cell;
     const tag = gridCell.cell.column.getTag(DG.TAGS.UNITS);
-    if (tag === 'HELM') {
-      const monomers = findMonomers(cell.value);
-      if (monomers.size == 0) {
-        const host = ui.div([], {style: {width: `${w}px`, height: `${h}px`}});
-        host.setAttribute('dataformat', 'helm');
-        host.setAttribute('data', gridCell.cell.value);
-        gridCell.element = host;
-        //@ts-ignore
-        const canvas = new JSDraw2.Editor(host, {width: w, height: h, skin: 'w8', viewonly: true});
-        const formula = canvas.getFormula(true);
-        if (!formula) {
-          gridCell.element = ui.divText(gridCell.cell.value, {style: {color: 'red'}});
-        }
-        const molWeight = Math.round(canvas.getMolWeight() * 100) / 100;
-        const coef = Math.round(canvas.getExtinctionCoefficient(true) * 100) / 100;
-        const molfile = canvas.getMolfile();
-        const result = formula + ', ' + molWeight + ', ' + coef + ', ' + molfile;
-        lru.set(gridCell.cell.value, result);
-        return;
-      }
-      if (monomers.size > 0) {
-        w = grid ? Math.min(grid.canvas.width - x, w) : g.canvas.width - x;
-        g.save();
-        g.beginPath();
-        g.rect(x, y, w, h);
-        g.clip();
-        g.font = '12px monospace';
-        g.textBaseline = 'top';
-        let x1 = x;
-        const s: string = cell.value ?? '';
-        let subParts: string[] = WebLogo.splitterAsHelm(s);
+    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();
+    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 separator = gridCell.cell.column.getTag('separator') ?? '';
+    const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, gridCell.cell.column.getTag('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
+    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) => {
-          let color = monomers.has(amino) ? 'red' : grayColor;
-          g.fillStyle = undefinedColor;
-          let last = index === subParts.length - 1;
-          x1 = printLeftOrCentered(x1, y, w, h, g, amino, color, 0, true, 1.0, '/', last);
+          //@ts-ignore
+          let textSizeWidth = g.measureText(monomerToShortFunction(amino, maxLengthOfMonomer));
+          //@ts-ignore
+          if (textSizeWidth.width > (maxLengthWords[index] ?? 0)) {
+            //@ts-ignore
+            maxLengthWords[index] = textSizeWidth.width;
+          }
         });
-        g.restore();
-        return;
       }
+      gridCell.cell.column.temp = maxLengthWords;
+      gridCell.cell.column.setTag('.calculatedCellRender', 'exist');
     } else {
-      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();
-      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 separator = gridCell.cell.column.getTag('separator') ?? '';
-      const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, gridCell.cell.column.getTag('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
-      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;
-            }
-          });
-        }
-        gridCell.cell.column.temp = maxLengthWords;
-        gridCell.cell.column.setTag('.calculatedCellRender', 'exist');
-      } else {
-        maxLengthWords = gridCell.cell.column.temp;
-      }
+      maxLengthWords = gridCell.cell.column.temp;
+    }
 
-      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')) {
-        drawStyle = 'msa';
-      }
-      subParts.forEach((amino, index) => {
-        color = palette.get(amino);
-        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);
-      });
-
-      g.restore();
-      return;
+    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')) {
+      drawStyle = 'msa';
     }
+    subParts.forEach((amino, index) => {
+      color = palette.get(amino);
+      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);
+    });
+
+    g.restore();
+    return;
   }
 }