@datagrok/bio 2.0.16 → 2.0.18

package/src/tests/splitters-test.ts

@@ -1,11 +1,12 @@
-import {after, before, category, test, expect, expectArray, 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 {WebLogo, SplitterFunc} from '@datagrok-libraries/bio/src/viewers/web-logo';
-import {splitToMonomers, _package, getHelmMonomers} from '../package';
+import * as bio from '@datagrok-libraries/bio';
+
+import {after, before, category, test, expect, expectArray, expectObject} from '@datagrok-libraries/utils/src/test';
 import * as C from '../utils/constants';
+import {splitToMonomers, _package, getHelmMonomers} from '../package';
+
 
 category('splitters', () => {
   let tvList: DG.TableView[];
@@ -27,6 +28,11 @@ category('splitters', () => {
   const helm2 = 'PEPTIDE1{meI.hHis.Hcy.Q.T.W.Q.Phe_4NH2.D-Tyr_Et.Tyr_ab-dehydroMe.dV.E.N.N.meK}$$$';
 
   const data: { [key: string]: [string, string[]] } = {
+    fastaMulti: [
+      'M[MeI]YKETLL[MeF]PKTDFPMRGGL[MeA]',
+      ['M', 'MeI', 'Y', 'K', 'E', 'T', 'L', 'L', 'MeF', 'P',
+        'K', 'T', 'D', 'F', 'P', 'M', 'R', 'G', 'G', 'L', 'MeA']
+    ],
     helm1: [
       'PEPTIDE1{meI.hHis.Aca.N.T.dE.Thr_PO3H2.Aca.D-Tyr_Et.Tyr_ab-dehydroMe.dV.E.N.D-Orn.D-aThr.Phe_4Me}$$$',
       ['meI', 'hHis', 'Aca', 'N', 'T', 'dE', 'Thr_PO3H2', 'Aca', 'D-Tyr_Et',
@@ -59,6 +65,8 @@ category('splitters', () => {
     ],
   };
 
+  test('fastaMulti', async () => { await _testFastaSplitter(data.fastaMulti[0], data.fastaMulti[1]); });
+
   test('helm1', async () => { await _testHelmSplitter(data.helm1[0], data.helm1[1]); });
   test('helm2', async () => { await _testHelmSplitter(data.helm2[0], data.helm2[1]); });
   test('helm3-multichar', async () => { await _testHelmSplitter(data.helm3[0], data.helm3[1]); });
@@ -113,8 +121,14 @@ PEPTIDE1{hHis.Aca.Cys_SEt}$$$,5.72388
   });
 });
 
+export async function _testFastaSplitter(src: string, tgt: string[]) {
+  const res: string[] = bio.splitterAsFasta(src);
+  console.debug(`Bio: tests: splitters: src=${JSON.stringify(src)}, res=${JSON.stringify(res)} .`);
+  expectArray(res, tgt);
+}
+
 export async function _testHelmSplitter(src: string, tgt: string[]) {
-  const res: string[] = WebLogo.splitterAsHelm(src);
+  const res: string[] = bio.splitterAsHelm(src);
   console.debug(`Bio: tests: splitters: src=${JSON.stringify(src)}, res=${JSON.stringify(res)} .`);
   expectArray(res, tgt);
 }

package/src/utils/cell-renderer.ts

@@ -1,31 +1,26 @@
-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 {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 grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
-import {printLeftOrCentered, DrawStyle} from '@datagrok-libraries/bio/src/utils/cell-renderer';
-import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import * as DG from 'datagrok-api/dg';
+import * as bio from '@datagrok-libraries/bio';
+import * as C from './constants';
 
 const undefinedColor = 'rgb(100,100,100)';
-const monomerToShortFunction: (amino: string, maxLengthOfMonomer: number) => string = WebLogo.monomerToShort;
+const monomerToShortFunction: (amino: string, maxLengthOfMonomer: number) => string = bio.monomerToShort;
 
 
-function getPaletteByType(paletteType: string): SeqPalette {
+function getPaletteByType(paletteType: string): bio.SeqPalette {
   switch (paletteType) {
   case 'PT':
-    return AminoacidsPalettes.GrokGroups;
+    return bio.AminoacidsPalettes.GrokGroups;
   case 'NT':
-    return NucleotidesPalettes.Chromatogram;
+    return bio.NucleotidesPalettes.Chromatogram;
   case 'DNA':
-    return NucleotidesPalettes.Chromatogram;
+    return bio.NucleotidesPalettes.Chromatogram;
   case 'RNA':
-    return NucleotidesPalettes.Chromatogram;
+    return bio.NucleotidesPalettes.Chromatogram;
     // other
   default:
-    return UnknownSeqPalettes.Color;
+    return bio.UnknownSeqPalettes.Color;
   }
 }
 
@@ -66,7 +61,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
   }
 
   onMouseMove(gridCell: DG.GridCell, e: MouseEvent): void {
-    if (gridCell.cell.column.getTag(UnitsHandler.TAGS.aligned) !== 'SEQ.MSA')
+    if (gridCell.cell.column.getTag(bio.UnitsHandler.TAGS.aligned) !== 'SEQ.MSA')
       return;
 
     const maxLengthWordsSum = gridCell.cell.column.temp['bio-sum-maxLengthWords'];
@@ -94,7 +89,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     }
     left = (argsX >= maxLengthWordsSum[left]) ? left + 1 : left;
     const separator = gridCell.cell.column.getTag('separator') ?? '';
-    const splitterFunc: SplitterFunc = WebLogo.getSplitter('separator', separator);
+    const splitterFunc: bio.SplitterFunc = bio.getSplitter('separator', separator);
     const subParts: string[] = splitterFunc(gridCell.cell.value);
     (((subParts[left]?.length ?? 0) > 0)) ?
       ui.tooltip.show(ui.div(subParts[left]), e.x + 16, e.y + 16) : ui.tooltip.hide();
@@ -135,7 +130,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
 
     const separator = gridCell.cell.column.getTag('separator') ?? '';
     const splitLimit = gridCell.bounds.width / 5;
-    const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, separator, splitLimit);
+    const splitterFunc: bio.SplitterFunc = bio.getSplitter(units, separator, splitLimit);
     const referenceSequence: string[] = splitterFunc(((gridCell.cell.column?.temp['reference-sequence'] != null) && (gridCell.cell.column?.temp['reference-sequence'] != ''))
       ? gridCell.cell.column.temp['reference-sequence'] : gridCell.cell.column.temp['current-word'] ?? '');
     const monomerWidth = (gridCell.cell.column?.temp['monomer-width'] != null) ? gridCell.cell.column.temp['monomer-width'] : 'short';
@@ -188,15 +183,15 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     const subParts: string[] = splitterFunc(cell.value);
     let x1 = x;
     let color = undefinedColor;
-    let drawStyle = DrawStyle.classic;
+    let drawStyle = bio.DrawStyle.classic;
     if (gridCell.cell.column.getTag('aligned').includes('MSA') && gridCell.cell.column.getTag('units') === 'separator')
-      drawStyle = DrawStyle.MSA;
+      drawStyle = bio.DrawStyle.MSA;
 
     subParts.every((amino, index) => {
       color = palette.get(amino);
       g.fillStyle = undefinedColor;
       let last = index === subParts.length - 1;
-      x1 = printLeftOrCentered(x1, y, w, h, g, amino, color, 0, true, 1.0, separator, last, drawStyle, maxLengthWords, index, gridCell, referenceSequence, maxLengthOfMonomer);
+      x1 = bio.printLeftOrCentered(x1, y, w, h, g, amino, color, 0, true, 1.0, separator, last, drawStyle, maxLengthWords, index, gridCell, referenceSequence, maxLengthOfMonomer);
       return x1 - minDistanceRenderer - gridCell.gridColumn.left + (gridCell.gridColumn.left - gridCell.bounds.x) <= gridCell.bounds.width;
     });
 
@@ -273,7 +268,7 @@ export class MacromoleculeDifferenceCellRenderer extends DG.GridCellRenderer {
     w = getUpdatedWidth(grid, g, x, w);
     //TODO: can this be replaced/merged with splitSequence?
     const [s1, s2] = s.split('#');
-    const splitter = WebLogo.getSplitter(units, separator);
+    const splitter = bio.getSplitter(units, separator);
     const subParts1 = splitter(s1);
     const subParts2 = splitter(s2);
     drawMoleculeDifferenceOnCanvas(g, x, y, w, h, subParts1, subParts2, units, separator);
@@ -315,7 +310,7 @@ export function drawMoleculeDifferenceOnCanvas(
   g.font = '12px monospace';
   g.textBaseline = 'top';
 
-  let palette: SeqPalette = UnknownSeqPalettes.Color;
+  let palette: bio.SeqPalette = bio.UnknownSeqPalettes.Color;
   if (units != 'HELM')
     palette = getPaletteByType(units.substring(units.length - 2));
 
@@ -327,12 +322,12 @@ export function drawMoleculeDifferenceOnCanvas(
 
     if (amino1 != amino2) {
       const color2 = palette.get(amino2);
-      const subX0 = printLeftOrCentered(updatedX, updatedY - vShift, w, h, g, amino1, color1, 0, true);
-      const subX1 = printLeftOrCentered(updatedX, updatedY + vShift, w, h, g, amino2, color2, 0, true);
+      const subX0 = bio.printLeftOrCentered(updatedX, updatedY - vShift, w, h, g, amino1, color1, 0, true);
+      const subX1 = bio.printLeftOrCentered(updatedX, updatedY + vShift, w, h, g, amino2, color2, 0, true);
       updatedX = Math.max(subX1, subX0);
       if (molDifferences)
         molDifferences[i] = createDifferenceCanvas(amino1, amino2, color1, color2, updatedY, vShift, h);
-    } else { updatedX = printLeftOrCentered(updatedX, updatedY, w, h, g, amino1, color1, 0, true, 0.5); }
+    } else { updatedX = bio.printLeftOrCentered(updatedX, updatedY, w, h, g, amino1, color1, 0, true, 0.5); }
     updatedX += 4;
   }
   g.restore();
@@ -356,7 +351,7 @@ function createDifferenceCanvas(
   canvas.width = width + 4;
   context.font = '12px monospace';
   context.textBaseline = 'top';
-  printLeftOrCentered(0, y - shift, width, h, context, amino1, color1, 0, true);
-  printLeftOrCentered(0, y + shift, width, h, context, amino2, color2, 0, true);
+  bio.printLeftOrCentered(0, y - shift, width, h, context, amino1, color1, 0, true);
+  bio.printLeftOrCentered(0, y + shift, width, h, context, amino2, color2, 0, true);
   return canvas;
 }

package/src/utils/convert.ts

@@ -1,11 +1,10 @@
 import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
-import $ from 'cash-dom';
+import * as bio from '@datagrok-libraries/bio';
 
+import $ from 'cash-dom';
 import {Subscription} from 'rxjs';
-import {NotationConverter} from '@datagrok-libraries/bio/src/utils/notation-converter';
-import {NOTATION, UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 
 
 let convertDialog: DG.Dialog | null = null;
@@ -17,13 +16,13 @@ let convertDialogSubs: Subscription[] = [];
  * @param {DG.column} col Column with 'Macromolecule' semantic type
  */
 export function convert(col: DG.Column): void {
-  const converter = new NotationConverter(col);
-  const currentNotation: NOTATION = converter.notation;
+  const converter = new bio.NotationConverter(col);
+  const currentNotation: bio.NOTATION = converter.notation;
   //TODO: read all notations
   const notations = [
-    NOTATION.FASTA,
-    NOTATION.SEPARATOR,
-    NOTATION.HELM
+    bio.NOTATION.FASTA,
+    bio.NOTATION.SEPARATOR,
+    bio.NOTATION.HELM
   ];
   const separatorArray = ['-', '.', '/'];
   const filteredNotations = notations.filter((e) => e !== currentNotation);
@@ -33,7 +32,7 @@ export function convert(col: DG.Column): void {
 
   // hide the separator input for non-SEPARATOR target notations
   const toggleSeparator = () => {
-    if (targetNotationInput.value !== NOTATION.SEPARATOR)
+    if (targetNotationInput.value !== bio.NOTATION.SEPARATOR)
       $(separatorInput.root).hide();
     else
       $(separatorInput.root).show();
@@ -64,7 +63,7 @@ export function convert(col: DG.Column): void {
         separatorInput.root
       ]))
       .onOK(async () => {
-        const targetNotation = targetNotationInput.value as NOTATION;
+        const targetNotation = targetNotationInput.value as bio.NOTATION;
         const separator: string | null = separatorInput.value;
 
         await convertDo(col, targetNotation, separator);
@@ -81,9 +80,9 @@ export function convert(col: DG.Column): void {
 
 /** Creates a new column with converted sequences and detects its semantic type */
 export async function convertDo(
-  srcCol: DG.Column, targetNotation: NOTATION, separator: string | null
+  srcCol: DG.Column, targetNotation: bio.NOTATION, separator: string | null
 ): Promise<DG.Column> {
-  const converter = new NotationConverter(srcCol);
+  const converter = new bio.NotationConverter(srcCol);
   const newColumn = converter.convert(targetNotation, separator);
   srcCol.dataFrame.columns.add(newColumn);
 

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

@@ -36,11 +36,10 @@ export async function runKalign(srcCol: DG.Column, isAligned = false, unUsedName
     sequences = sequences.map((v: string, _) => AlignedSequenceEncoder.clean(v).replace(/\-/g, ''));
 
   const fasta = _stringsToFasta(sequences);
-  const CLI = await new Aioli({
-    tool: 'kalign',
-    version: '3.3.1',
-    reinit: true,
-  });
+  const CLI = await new Aioli([
+    'base/1.0.0',
+    {tool: 'kalign', version: '3.3.1', reinit: true,}
+  ]);
 
   console.log(['fasta.length =', fasta.length]);
 

package/src/utils/save-as-fasta.ts

@@ -0,0 +1,109 @@
+import * as DG from 'datagrok-api/dg';
+import * as ui from 'datagrok-api/ui';
+import * as grok from 'datagrok-api/grok';
+import * as bio from '@datagrok-libraries/bio';
+
+import wu from 'wu';
+
+const FASTA_LINE_WIDTH = 60;
+
+/** Shows dialog to select id columns list and seq column, builds and downloads FASTA content */
+export function saveAsFastaUI() {
+  // Use grid for column order adjusted by user
+  let grid: DG.Grid = grok.shell.tv.grid;
+
+  const idGColList: DG.GridColumn[] = wu.count(0).take(grid.columns.length)
+    .map((colI: number) => grid.columns.byIndex(colI)!)
+    .filter((gcol: DG.GridColumn) => gcol.column ? gcol.column.semType !== DG.SEMTYPE.MACROMOLECULE : false).toArray();
+  const defaultIdGCol: DG.GridColumn | undefined = idGColList
+    .find((gcol: DG.GridColumn) => gcol.name.toLowerCase().indexOf('id') !== -1);
+  const idDefaultValue = defaultIdGCol ? [defaultIdGCol.name] : [];
+
+  const idGColListInput = ui.multiChoiceInput('Seq id columns', idDefaultValue,
+    idGColList.map((gcol: DG.GridColumn) => gcol.name));
+
+  const seqGColList: DG.GridColumn[] = wu.count(0).take(grid.columns.length)/* range rom 0 to grid.columns.length */
+    .map((colI: number) => grid.columns.byIndex(colI)!)
+    .filter((gc: DG.GridColumn) => {
+      const col: DG.Column | null = gc.column;
+      if (col && col.semType === DG.SEMTYPE.MACROMOLECULE) {
+        const uh = new bio.UnitsHandler(col);
+        return uh.isFasta();
+      }
+      return false;
+    }).toArray();
+
+  const seqDefaultValue = seqGColList.length > 0 ? seqGColList[0].name : [];
+  const seqColInput = ui.choiceInput('Seq column', seqDefaultValue,
+    seqGColList.map((gCol: DG.GridColumn) => gCol.name));
+
+  const lineWidthInput = ui.intInput('FASTA line width', FASTA_LINE_WIDTH);
+
+  ui.dialog({title: 'Save as FASTA',})
+    .add(ui.inputs([
+      idGColListInput,
+      seqColInput,
+      lineWidthInput
+    ]))
+    .onOK(() => {
+      const valueIdColList: DG.Column[] = idGColListInput.value ?
+        idGColListInput.value.map((colName: string) => grid.columns.byName(colName)!.column!) : [];
+      const valueSeqCol: DG.Column | null = seqColInput.value ?
+        grid.columns.byName(seqColInput.value as string)!.column : null;
+      const valueLineWidth = lineWidthInput.value ?? FASTA_LINE_WIDTH;
+
+      if (!valueSeqCol)
+        grok.shell.warning(`Seq column is mandatory to save as FASTA.`);
+
+      const resFastaTxt: string = saveAsFastaDo(valueIdColList, valueSeqCol!, valueLineWidth);
+
+      const aEl: HTMLAnchorElement = document.createElement('a',);
+      aEl.setAttribute('href', `data:text/plain;charset=utf-8,${encodeURIComponent(resFastaTxt)}`);
+      aEl.setAttribute('download', `${grid.dataFrame.name}.fasta`);
+      aEl.click();
+    })
+    .show();
+}
+
+/** */
+export function saveAsFastaDo(
+  idColList: DG.Column[], seqCol: DG.Column, lineWidth: number = FASTA_LINE_WIDTH, lineSeparator: string = '\n'
+): string {
+  const splitter: bio.SplitterFunc = bio.splitterAsFasta;
+
+  const fastaLines: string[] = [];
+
+  for (let rowI: number = 0; rowI < seqCol.length; rowI++) {
+    // multiple identifiers separated by vertical bars
+    // https://en.wikipedia.org/wiki/FASTA_format
+
+    const seqId: string = idColList.map((col) => col.get(rowI).toString()).join('|');
+    const seq: string = seqCol.get(rowI);
+    const seqLineList: string[] = wrapSequence(seq, splitter, lineWidth);
+
+    fastaLines.push(`>${seqId}${lineSeparator}`);
+    for (const line of seqLineList)
+      fastaLines.push(`${line}${lineSeparator}`);
+  }
+
+  //return fastaLines.join(lineSeparator);
+  return ''.concat(...fastaLines);
+}
+
+/* split sequence for monomers to prevent wrapping monomer partially */
+export function wrapSequence(seq: string, splitter: bio.SplitterFunc, lineWidth: number = FASTA_LINE_WIDTH): string[] {
+  const seqMonomerList = splitter(seq);
+  let seqPos: number = 0;
+  const seqLength: number = seqMonomerList.length;
+
+  const seqLineList: string[] = [];
+  while (seqPos < seqLength) {
+    /* join sliced monomer into line */
+    const seqLine: string[] = seqMonomerList.slice(seqPos, seqPos + lineWidth);
+    const seqLineTxt: string = seqLine.map((m) => m.length > 1 ? `[${m}]` : m).join('');
+    seqLineList.push(seqLineTxt);
+    seqPos += seqLine.length;
+  }
+
+  return seqLineList;
+}

package/src/utils/utils.ts

@@ -1,6 +1,8 @@
-import * as DG from 'datagrok-api/dg';
-import {WebLogo, SplitterFunc} from '@datagrok-libraries/bio/src/viewers/web-logo';
 import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+import * as bio from '@datagrok-libraries/bio';
+
 import {
   CAP_GROUP_NAME, CAP_GROUP_SMILES, jsonSdfMonomerLibDict, MONOMER_ENCODE_MAX, MONOMER_ENCODE_MIN, MONOMER_SYMBOL,
   RGROUP_ALTER_ID, RGROUP_FIELD, RGROUP_LABEL, SDF_MONOMER_NAME
@@ -18,7 +20,7 @@ export function encodeMonomers(col: DG.Column): DG.Column | null {
   const monomerSymbolDict: { [key: string]: number } = {};
   const units = col.tags[DG.TAGS.UNITS];
   const sep = col.getTag(UnitsHandler.TAGS.separator);
-  const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, sep);
+  const splitterFunc: bio.SplitterFunc = bio.getSplitter(units, sep);
   const encodedStringArray = [];
   for (let i = 0; i < col.length; ++i) {
     let encodedMonomerStr = '';
@@ -42,7 +44,7 @@ export function encodeMonomers(col: DG.Column): DG.Column | null {
 export function getMolfilesFromSeq(col: DG.Column, monomersLibObject: any[]): any[][] | null {
   const units = col.tags[DG.TAGS.UNITS];
   const sep = col.getTag('separator');
-  const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, sep);
+  const splitterFunc: bio.SplitterFunc = bio.getSplitter(units, sep);
   const monomersDict = createMomomersMolDict(monomersLibObject);
   const molFiles = [];
   for (let i = 0; i < col.length; ++i) {
@@ -66,7 +68,7 @@ export function getMolfilesFromSeq(col: DG.Column, monomersLibObject: any[]): an
 export function getMolfilesFromSingleSeq(cell: DG.Cell, monomersLibObject: any[]): any[][] | null {
   const units = cell.column.tags[DG.TAGS.UNITS];
   const sep = cell.column!.getTag('separator');
-  const splitterFunc: SplitterFunc = WebLogo.getSplitter(units, sep);
+  const splitterFunc: bio.SplitterFunc = bio.getSplitter(units, sep);
   const monomersDict = createMomomersMolDict(monomersLibObject);
   const molFiles = [];
   const macroMolecule = cell.value;

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

@@ -1,12 +1,9 @@
 import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
+import * as bio from '@datagrok-libraries/bio';
 
-import {VdRegionType, VdRegion} from '@datagrok-libraries/bio/src/vd-regions';
-import {IVdRegionsViewer} from '@datagrok-libraries/bio/src/viewers/vd-regions-viewer';
-import {WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
-
-const vrt = VdRegionType;
+const vrt = bio.VdRegionType;
 
 // Positions of regions for numbering schemes
 // http://www.bioinf.org.uk/abs/info.html
@@ -37,7 +34,7 @@ const vrt = VdRegionType;
 /** Viewer with tabs based on description of chain regions.
  *  Used to define regions of an immunoglobulin LC.
  */
-export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
+export class VdRegionsViewer extends DG.JsViewer implements bio.IVdRegionsViewer {
   // private regionsDf: DG.DataFrame;
   private regionsFg: DG.FilterGroup | null = null;
   // private regionsTV: DG.TableView;
@@ -46,7 +43,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   private isOpened: boolean = false;
   private panelNode: DG.DockNode | null = null;
 
-  public regions: VdRegion[] = [];
+  public regions: bio.VdRegion[] = [];
   public regionTypes: string[];
   public chains: string[];
   public sequenceColumnNamePostfix: string;
@@ -60,7 +57,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   }
 
   // TODO: .onTableAttached is not calling on dataFrame set, onPropertyChanged  also not calling
-  public async setDf(value: DG.DataFrame, regions: VdRegion[]) {
+  public async setDf(value: DG.DataFrame, regions: bio.VdRegion[]) {
     console.debug('VdRegionsViewer.setDf()');
     await this.destroyView();
     this.regions = regions;
@@ -113,8 +110,10 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     await this.buildView();
   }
 
-  public override async onTableAttached() {
-    await this.init();
+  public override onTableAttached() {
+    window.setTimeout(async () => {
+      await this.init();
+    }, 0 /* next event cycle */);
   }
 
   public override async onPropertyChanged(property: DG.Property | null) {
@@ -175,7 +174,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   //#region -- View --
   private host: HTMLElement | null = null;
   private mainLayout: HTMLTableElement | null = null;
-  private logos: { [chain: string]: WebLogo }[] = [];
+  private logos: { [chain: string]: bio.WebLogo }[] = [];
 
   private async destroyView(): Promise<void> {
     // TODO: Unsubscribe from and remove all view elements
@@ -195,16 +194,16 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     const colNames: { [chain: string]: string } = Object.assign({},
       ...this.chains.map((chain) => ({[chain]: `${chain} ${this.sequenceColumnNamePostfix}`})));
 
-    const regionsFiltered: VdRegion[] = this.regions.filter((r: VdRegion) => this.regionTypes.includes(r.type));
+    const regionsFiltered: bio.VdRegion[] = this.regions.filter((r: bio.VdRegion) => this.regionTypes.includes(r.type));
 
     const orderList: number[] = Array.from(new Set(regionsFiltered.map((r) => r.order))).sort();
 
     this.logos = [];
 
     for (let orderI = 0; orderI < orderList.length; orderI++) {
-      const regionChains: { [chain: string]: WebLogo } = {};
+      const regionChains: { [chain: string]: bio.WebLogo } = {};
       for (const chain of this.chains) {
-        const region: VdRegion | undefined = regionsFiltered
+        const region: bio.VdRegion | undefined = regionsFiltered
           .find((r) => r.order == orderList[orderI] && r.chain == chain);
         regionChains[chain] = (await this.dataFrame.plot.fromType('WebLogo', {
           sequenceColumnName: colNames[chain],
@@ -213,7 +212,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
           fixWidth: true,
           skipEmptyPositions: this.skipEmptyPositions,
           positionWidth: this.positionWidth,
-        })) as unknown as WebLogo;
+        })) as unknown as bio.WebLogo;
       }
       // WebLogo creation fires onRootSizeChanged event even before control being added to this.logos
       this.logos[orderI] = regionChains;
@@ -238,7 +237,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
           })] : []),
           // List with controls for regions
           ...[...Array(orderList.length).keys()].map((orderI) => {
-            const wl: WebLogo = this.logos[orderI][chain];
+            const wl: bio.WebLogo = this.logos[orderI][chain];
             wl.root.style.height = '100%';
 
             const resDiv = ui.div([wl.root]/*`${chain} ${regionsFiltered[rI]}`*/, {
@@ -255,7 +254,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
       },
       ['', ...[...Array(orderList.length).keys()].map(
         (orderI: number) => regionsFiltered.find(
-          (r: VdRegion) => r.order == orderList[orderI] && r.chain == this.chains[0]
+          (r: bio.VdRegion) => r.order == orderList[orderI] && r.chain == this.chains[0]
         )!.name || 'Name')]
     );
     this.mainLayout.className = 'mlb-vd-regions-viewer-table2';