@datagrok/bio 2.10.22 → 2.10.23

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.10.22",
+  "version": "2.10.23",
   "description": "Bioinformatics support (import/export of sequences, conversion, visualization, analysis). [See more](https://github.com/datagrok-ai/public/blob/master/packages/Bio/README.md) for details.",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.38.11",
+    "@datagrok-libraries/bio": "^5.38.12",
     "@datagrok-libraries/chem-meta": "^1.0.1",
     "@datagrok-libraries/ml": "^6.3.49",
     "@datagrok-libraries/tutorials": "^1.3.6",

package/src/package.ts

@@ -385,7 +385,7 @@ export async function getRegionTopMenu(
 //input: object options {optional: true}
 //output: viewer result
 //editor: Bio:SeqActivityCliffsEditor
-export async function activityCliffs(df: DG.DataFrame, macroMolecule: DG.Column, activities: DG.Column,
+export async function activityCliffs(df: DG.DataFrame, macroMolecule: DG.Column<string>, activities: DG.Column,
   similarity: number, methodName: DimReductionMethods, options?: (IUMAPOptions | ITSNEOptions) & Options,
 ): Promise<DG.Viewer | undefined> {
   if (!checkInputColumnUI(macroMolecule, 'Activity Cliffs'))
@@ -495,8 +495,8 @@ export async function sequenceSpaceTopMenu(
         embedYCol = table.columns.byName(embedColsNames[1]);
       }
 
-      embedXCol.init((i) => embeddings[i][0]);
-      embedYCol.init((i) => embeddings[i][1]);
+      embedXCol.init((i) => embeddings[i] ? embeddings[i][0] : undefined);
+      embedYCol.init((i) => embeddings[i] ? embeddings[i][1] : undefined);
       const progress = (_nEpoch / epochsLength * 100);
       pg.update(progress, `Running sequence space ... ${progress.toFixed(0)}%`);
     }
@@ -613,7 +613,7 @@ export async function sequenceSpaceTopMenu(
         sp = (v as DG.TableView).scatterPlot({x: embedColsNames[0], y: embedColsNames[1], title: 'Sequence space'});
     }
   } */
-};
+}
 
 //top-menu: Bio | Convert | To Atomic Level...
 //name: To Atomic Level

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

@@ -1,7 +1,7 @@
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
-import {category, expect, expectArray, test, awaitCheck, delay} from '@datagrok-libraries/utils/src/test';
+import {category, expect, expectArray, test, testEvent} from '@datagrok-libraries/utils/src/test';
 import {ALPHABET, NOTATION, TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {
   countForMonomerAtPosition,
@@ -30,9 +30,9 @@ ATC-G-TTGC--
     seqCol.setTag(bioTAGS.aligned, 'SEQ.MSA');
 
     const wlViewer: WebLogoViewer = (await df.plot.fromType('WebLogo')) as WebLogoViewer;
-    tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
-
-    await awaitCheck(() => wlViewer.Length > 0, 'WebLogo.Length is zero', 100);
+    await testEvent(wlViewer.onLayoutCalculated, () => {}, () => {
+      tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
+    }, 200);
     const positions: PI[] = wlViewer['positions'];
 
     const resAllDf1: PI[] = [
@@ -82,9 +82,9 @@ ATC-G-TTGC--
     df.filter.fireChanged();
     const wlViewer: WebLogoViewer = (await df.plot.fromType('WebLogo',
       {'shrinkEmptyTail': true})) as WebLogoViewer;
-    tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
-
-    await awaitCheck(() => wlViewer.Length > 0, 'WebLogo.Length is zero', 100);
+    await testEvent(wlViewer.onLayoutCalculated, () => {}, () => {
+      tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
+    }, 200);
     const positions: PI[] = wlViewer['positions'];
 
     const resAllDf1: PI[] = [
@@ -120,9 +120,9 @@ ATC-G-TTGC--
 
     const wlViewer: WebLogoViewer = (await df.plot.fromType('WebLogo',
       {'skipEmptyPositions': true})) as WebLogoViewer;
-    tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
-
-    await awaitCheck(() => wlViewer.Length > 0, 'WebLogo.Length is zero');
+    await testEvent(wlViewer.onLayoutCalculated, () => {}, () => {
+      tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
+    }, 200);
     const resPosList: PI[] = wlViewer['positions'];
 
     const tgtPosList: PI[] = [
@@ -156,9 +156,9 @@ ATC-G-TTGC--
       endPositionName: '7',
       skipEmptyPositions: true,
     })) as WebLogoViewer;
-    tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
-
-    await awaitCheck(() => wlViewer.Length > 0, 'WebLogo.Length is zero', 100);
+    await testEvent(wlViewer.onLayoutCalculated, () => {}, () => {
+      tv.dockManager.dock(wlViewer.root, DG.DOCK_TYPE.DOWN);
+    }, 200);
     const resPosList: PI[] = wlViewer['positions'];
     const tgtPosList: PI[] = [
       new PI(2, '3', {'C': new PMI(5)}),

package/src/tests/detectors-benchmark-tests.ts

@@ -29,7 +29,7 @@ category('detectorsBenchmark', () => {
   });
 
   test('fastaDnaLong1e6Few50', async () => {
-    await detectMacromoleculeBenchmark(15, NOTATION.FASTA, ALPHABET.DNA, 1E6, 50);
+    await detectMacromoleculeBenchmark(20, NOTATION.FASTA, ALPHABET.DNA, 1E6, 50);
   });
 
   // -- separator --
@@ -49,7 +49,7 @@ category('detectorsBenchmark', () => {
   async function detectMacromoleculeBenchmark(
     maxET: number, notation: NOTATION, alphabet: ALPHABET, length: number, count: number, separator?: string,
   ): Promise<number> {
-    return await benchmark<DG.FuncCall, DG.Column>(10,
+    return await benchmark<DG.FuncCall, DG.Column>(maxET,
       (): DG.FuncCall => {
         const col: DG.Column = generate(notation, [...getAlphabet(alphabet)], length, count, separator);
         const funcCall: DG.FuncCall = detectFunc.prepare({col: col});

package/src/tests/detectors-tests.ts

@@ -182,7 +182,10 @@ MWRSWY-CKHP`;
           const df: DG.DataFrame = await readFile(samples[key]);
           // await grok.data.detectSemanticTypes(df);
           return df;
-        })();
+        })().catch((err: any) => {
+          delete _samplesDfs[key];
+          throw err;
+        });
       }
       return _samplesDfs[key];
     };

package/src/utils/cell-renderer.ts

@@ -27,6 +27,7 @@ import * as C from './constants';
 import {_package, getBioLib} from '../package';
 import {ISeqSplitted} from '@datagrok-libraries/bio/src/utils/macromolecule/types';
 import {getSplitter} from '@datagrok-libraries/bio/src/utils/macromolecule/utils';
+import {errInfo} from './err-info';
 
 
 type TempType = { [tagName: string]: any };
@@ -136,7 +137,12 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
 
     // TODO: Store temp data to GridColumn
     // Now the renderer requires data frame table Column underlying GridColumn
-    const grid = gridCell.grid;
+    let grid: DG.Grid | undefined = undefined;
+    try { grid = gridCell.grid; } catch (err: any) {
+      grid = undefined;
+      const [errMsg, errStack] = errInfo(err);
+      _package.logger.error(errMsg, undefined, errStack);
+    }
     const tableCol: DG.Column = gridCell.cell.column;
     if (!grid || !tableCol) return;
 

package/src/utils/err-info.ts

@@ -0,0 +1,28 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+export function errMsg(err: any): string {
+  if (typeof err === 'string' || err instanceof String)
+    return err as string;
+  else if (err.constructor.name === 'StateError')
+    return err['message'];
+  else if (err.constructor.name === 'StateError' && '$thrownJsError' in err)
+    return errMsg(err['$thrownJsError']);
+  else if (err instanceof Error)
+    return (err as Error).message;
+  else
+    return err.toString();
+}
+
+export function errStack(err: any): string | undefined {
+  if (err instanceof Error)
+    return err.stack;
+  else if (err.constructor.name === 'StateError' && '$thrownJsError' in err)
+    return errStack(err['$thrownJsError']);
+  return undefined;
+}
+
+export function errInfo(err: any): [string, string | undefined] {
+  return [errMsg(err), errStack(err)];
+}

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

@@ -152,10 +152,10 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   }
 
   override detach() {
-    if (this.setDataInProgress) return;
     const superDetach = super.detach.bind(this);
     this.detachPromise = this.detachPromise.then(async () => { // detach
       await this.viewPromise;
+      if (this.setDataInProgress) return; // check setDataInProgress synced
       if (this.viewed) {
         await this.destroyView('detach');
         this.viewed = false;
@@ -166,7 +166,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
 
   override onTableAttached() {
     super.onTableAttached();
-    this.setData(this.dataFrame, this.regions);
+    this.setData(this.regions);
   }
 
   public override onPropertyChanged(property: DG.Property | null): void {
@@ -180,7 +180,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     switch (property.name) {
       case PROPS.regionTypes:
       case PROPS.chains:
-        this.setData(this.dataFrame, this.regions);
+        this.setData(this.regions);
         break;
     }
 
@@ -211,42 +211,66 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
         break;
 
       default:
-        this.setData(this.dataFrame, this.regions); // onPropertyChanged
+        this.setData(this.regions); // onPropertyChanged
         break;
     }
   }
 
   // -- Data --
 
+  // private static viewerCount = 0;
+  // private viewerId: number = ++VdRegionsViewer.viewerCount;
+  // private setDataInCount: number = 0;
+
   // TODO: .onTableAttached is not calling on dataFrame set, onPropertyChanged  also not calling
-  public setData(mlbDf: DG.DataFrame, regions: VdRegion[]) {
-    if (!this.setDataInProgress) this.setDataInProgress = true; else return;
-    _package.logger.debug('Bio: VdRegionsViewer.setData()');
+  public setData(regions: VdRegion[]) {
+    // const setDataInId = ++this.setDataInCount;
+    _package.logger.debug('Bio: VdRegionsViewer.setData(), in, ' +
+      // `viewerId = ${this.viewerId}, setDataInId = ${setDataInId}, ` +
+      `regions.length = ${regions.length}`
+    );
 
     this.viewPromise = this.viewPromise.then(async () => { // setData
-      if (this.viewed) {
-        await this.destroyView('setData');
-        this.viewed = false;
-      }
-    }).then(async () => {
-      await this.detachPromise;
-      // Wait whether this.dataFrame assigning has called detach() before continue set data and build view
-
-      // -- Data --
-      this.regions = regions;
-      if (this.dataFrame.dart !== mlbDf.dart) this.dataFrame = mlbDf; // causes detach and onTableAttached
-    }).then(async () => {
-      if (!this.viewed) {
-        await this.buildView('setData');
-        this.viewed = true;
+      // _package.logger.debug('Bio: VdRegionsViewer.setData(), in sync, ' +
+      //   `viewerId = ${this.viewerId}, setDataInId = ${setDataInId}, ` +
+      //   `regions.length = ${regions.length}`);
+      if (!this.setDataInProgress) this.setDataInProgress = true; else return; // check setDataInProgress synced
+      // _package.logger.debug('Bio: VdRegionsViewer.setData(), start, ' +
+      //   `viewerId = ${this.viewerId}, setDataInId = ${setDataInId}, ` +
+      //   `regions.length = ${regions.length}`);
+      try {
+        if (this.viewed) {
+          // _package.logger.debug('Bio: VdRegionsViewer.setData(), destroyView, ' +
+          //   `viewerId = ${this.viewerId}, setDataInId = ${setDataInId}, ` +
+          //   `regions.length = ${regions.length}`);
+          await this.destroyView('setData');
+          this.viewed = false;
+        }
+
+        await this.detachPromise;
+        // Wait whether this.dataFrame assigning has called detach() before continue set data and build view
+
+        // -- Data --
+        this.regions = regions;
+
+        if (!this.viewed) {
+          // _package.logger.debug('Bio: VdRegionsViewer.setData(), buildView, ' +
+          //   `viewerId = ${this.viewerId}, setDataInId = ${setDataInId}, ` +
+          //   `regions.length = ${regions.length}`);
+          await this.buildView('setData');
+          this.viewed = true;
+        }
+      } catch (err: any) {
+        const errMsg = err instanceof Error ? err.message : err.toString();
+        const stack = err instanceof Error ? err.stack : undefined;
+        grok.shell.error(errMsg);
+        _package.logger.error(errMsg, undefined, stack);
+      } finally {
+        // _package.logger.debug('Bio: VdRegionsViewer.setData(), finally, ' +
+        //   `viewerId = ${this.viewerId}, setDataInId = ${setDataInId}, ` +
+        //   `regions.length = ${regions.length}`);
+        this.setDataInProgress = false;
       }
-    }).catch((err: any) => {
-      const errMsg = err instanceof Error ? err.message : err.toString();
-      const stack = err instanceof Error ? err.stack : undefined;
-      grok.shell.error(errMsg);
-      _package.logger.error(errMsg, undefined, stack);
-    }).finally(() => {
-      this.setDataInProgress = false;
     });
   }
 
@@ -266,7 +290,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   private async destroyView(purpose: string): Promise<void> {
     // TODO: Unsubscribe from and remove all view elements
     _package.logger.debug(`Bio: VdRegionsViewer.destroyView( mainLayout = ${!this.mainLayout ? 'none' : 'value'} ), ` +
-      `purpose = '${purpose}'`);
+      `purpose = '${purpose}', this.regions.length = ${this.regions.length}`);
     if (this.filterSourceInput) {
       //
       ui.empty(this.filterSourceInput.root);
@@ -284,7 +308,8 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   }
 
   private async buildView(purpose: string): Promise<void> {
-    _package.logger.debug(`Bio: VdRegionsViewer.buildView() begin, ` + `purpose = '${purpose}'`);
+    _package.logger.debug(`Bio: VdRegionsViewer.buildView() begin, ` +
+      `purpose = '${purpose}', this.regions.length = ${this.regions.length}`);
 
     const regionsFiltered: VdRegion[] = this.regions.filter((r: VdRegion) => this.regionTypes.includes(r.type));
     const orderList: number[] = Array.from(new Set(regionsFiltered.map((r) => r.order))).sort();

package/src/viewers/web-logo-viewer.ts

@@ -18,6 +18,8 @@ import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
 import {intToHtmlA} from '@datagrok-libraries/utils/src/color';
 import {ISeqSplitted} from '@datagrok-libraries/bio/src/utils/macromolecule/types';
 
+import {errInfo} from '../utils/err-info';
+
 import {_package} from '../package';
 
 declare global {
@@ -403,25 +405,30 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   // -- Data --
 
   setData(): void {
-    if (!this.setDataInProgress) this.setDataInProgress = true; else return;
-    _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.setData() `);
-
+    _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.setData(), in`);
     this.viewPromise = this.viewPromise.then(async () => { // setData
-      if (this.viewed) {
-        await this.destroyView();
-        this.viewed = false;
-      }
-    }).then(async () => {
-      await this.detachPromise;
-
-      this.updateSeqCol();
-    }).then(async () => {
-      if (!this.viewed) {
-        await this.buildView();
-        this.viewed = true;
+      if (!this.setDataInProgress) this.setDataInProgress = true; else return; // check setDataInProgress synced
+      try {
+        if (this.viewed) {
+          this.renderRequestSub.unsubscribe();
+          await this.destroyView();
+          this.viewed = false;
+        }
+
+        await this.detachPromise;
+        this.updateSeqCol();
+
+        if (!this.viewed) {
+          await this.buildView(); //requests rendering
+          this.viewed = true;
+        }
+      } catch (err: any) {
+        const [errMsg, errStack] = errInfo(err);
+        grok.shell.error(errMsg);
+        _package.logger.error(errMsg, undefined, errStack);
+      } finally {
+        this.setDataInProgress = false;
       }
-    }).finally(() => {
-      this.setDataInProgress = false;
     });
   }
 
@@ -450,6 +457,8 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     const dataFrameTxt: string = this.dataFrame ? 'data' : 'null';
     _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.buildView( dataFrame = ${dataFrameTxt} ) start`);
     const dpr = window.devicePixelRatio;
+    this.viewSubs.push(DG.debounce(this.renderRequest)
+      .subscribe(this.renderRequestOnDebounce.bind(this)));
 
     this.helpUrl = '/help/visualize/viewers/web-logo.md';
 
@@ -508,7 +517,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   private rootOnSizeChanged(): void {
     _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.rootOnSizeChanged(), start `);
 
-    this.render(WlRenderLevel.Layout, 'rootOnSizeChanged').then(() => {});
+    this.render(WlRenderLevel.Layout, 'rootOnSizeChanged');
   }
 
   /** Assigns {@link seqCol} and {@link cp} based on {@link sequenceColumnName} and calls {@link render}().
@@ -571,7 +580,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       this.positionNames.includes(this.endPositionName)) ?
       this.positionNames.indexOf(this.endPositionName) : (maxLength - 1);
 
-    this.render(WlRenderLevel.Freqs, 'updatePositions').then(() => {});
+    this.render(WlRenderLevel.Freqs, 'updatePositions');
   }
 
   private getFilter(): DG.BitSet {
@@ -801,11 +810,11 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       case PROPS.verticalAlignment:
       case PROPS.positionMargin:
       case PROPS.positionMarginState:
-        this.render(WlRenderLevel.Layout, `onPropertyChanged(${property.name})`).then(() => {});
+        this.render(WlRenderLevel.Layout, `onPropertyChanged(${property.name})`);
         break;
 
       case PROPS.backgroundColor:
-        this.render(WlRenderLevel.Render, `onPropertyChanged(${property.name})`).then(() => {});
+        this.render(WlRenderLevel.Render, `onPropertyChanged(${property.name})`);
         break;
     }
   }
@@ -822,12 +831,12 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
 
   /** Remove all handlers when table is a detach  */
   public override async detach() {
-    if (this.setDataInProgress) return;
     _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.detach(), `);
 
     const superDetach = super.detach.bind(this);
     this.detachPromise = this.detachPromise.then(async () => { // detach
       await this.viewPromise;
+      if (this.setDataInProgress) return; // check setDataInProgress synced
       if (this.viewed) {
         await this.destroyView();
         this.viewed = false;
@@ -888,12 +897,24 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   }
 
   /** default value of RecalcLevel.Freqs is for recalc from the scratch at the beginning */
-  private renderLevelRequested: WlRenderLevel = WlRenderLevel.Freqs;
+  private requestedRenderLevel: WlRenderLevel = WlRenderLevel.Freqs;
+  private readonly renderRequest: Subject<WlRenderLevel> = new Subject<WlRenderLevel>();
+  private renderRequestSub: Unsubscribable;
 
   /** Renders requested repeatedly will be performed once on window.requestAnimationFrame() */
-  render(recalcLevel: WlRenderLevel, reason: string): Promise<void> {
+  render(renderLevel: WlRenderLevel, reason: string): void {
     _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>` +
-      `.render( recalcLevelVal=${recalcLevel}, reason='${reason}' )`);
+      `.render( recalcLevelVal=${renderLevel}, reason='${reason}' )`);
+    this.requestedRenderLevel = Math.max(this.requestedRenderLevel, renderLevel);
+    this.renderRequest.next(this.requestedRenderLevel);
+  }
+
+  /** Render WebLogo sensitive to changes in params of rendering
+   *@param {WlRenderLevel} recalcLevel - indicates that need to recalculate data for rendering
+   */
+  protected async renderInt(renderLevel: WlRenderLevel): Promise<void> {
+    _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.renderInt( renderLevel=${renderLevel} ), ` +
+      `start `);
 
     /** Calculate freqs of monomers */
     const calculateFreqsInt = (): void => {
@@ -960,85 +981,70 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       this._onLayoutCalculated.next();
     };
 
-    /** Render WebLogo sensitive to changes in params of rendering
-     *@param {WlRenderLevel} recalcLevel - indicates that need to recalculate data for rendering
-     */
-    const renderInt = (recalcLevel: WlRenderLevel) => {
-      _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.renderInt( recalcLevel=${recalcLevel} ), ` +
-        `start `);
-      if (this.msgHost) {
-        if (this.seqCol && !this.cp) {
-          this.msgHost!.innerText = `Unknown palette (column semType: '${this.seqCol.semType}').`;
-          this.msgHost!.style.display = '';
-        } else {
-          this.msgHost!.style.display = 'none';
-        }
+    if (this.msgHost) {
+      if (this.seqCol && !this.cp) {
+        this.msgHost!.innerText = `Unknown palette (column semType: '${this.seqCol.semType}').`;
+        this.msgHost!.style.display = '';
+      } else {
+        this.msgHost!.style.display = 'none';
       }
+    }
 
-      if (!this.seqCol || !this.dataFrame || !this.cp || this.host == null || this.slider == null)
-        return;
+    if (!this.seqCol || !this.dataFrame || !this.cp || this.host == null || this.slider == null)
+      return;
 
-      const dpr: number = window.devicePixelRatio;
-      /** 0 is for no position labels */
-      const positionLabelsHeight = this.showPositionLabels ? POSITION_LABELS_HEIGHT : 0;
-      if (recalcLevel >= WlRenderLevel.Freqs) calculateFreqsInt();
-      this.calcLayout(dpr); // after _skipEmptyPositions
-      if (this.positions.length === 0 || this.startPosition === -1 || this.endPosition === -1) return;
-      if (recalcLevel >= WlRenderLevel.Layout) calculateLayoutInt(window.devicePixelRatio, positionLabelsHeight);
-
-      const g = this.canvas.getContext('2d');
-      if (!g) return;
-
-      const length: number = this.Length;
-      g.resetTransform();
-      g.fillStyle = intToHtmlA(this.backgroundColor);
-      g.fillRect(0, 0, this.canvas.width, this.canvas.height);
-      g.textBaseline = this.textBaseline;
-
-      //#region Plot positionNames
-      const positionFontSize = 10 * dpr;
-      g.resetTransform();
-      g.fillStyle = 'black';
-      g.textAlign = 'center';
-      g.font = `${positionFontSize.toFixed(1)}px Roboto, Roboto Local, sans-serif`;
-      const posNameMaxWidth = Math.max(...this.positions.map((pos) => g.measureText(pos.name).width));
-      const hScale = posNameMaxWidth < (this._positionWidth * dpr - 2) ? 1 :
-        (this._positionWidth * dpr - 2) / posNameMaxWidth;
-
-      if (positionLabelsHeight > 0) {
-        renderPositionLabels(g, dpr, hScale, this._positionWidthWithMargin, this._positionWidth,
-          this.positions, this.slider.min, this.slider.max);
-      }
-      //#endregion Plot positionNames
-      const fontStyle = '16px Roboto, Roboto Local, sans-serif';
-      // Hacks to scale uppercase characters to target rectangle
-      const uppercaseLetterAscent = 0.25;
-      const uppercaseLetterHeight = 12.2;
-      for (let jPos = Math.floor(this.slider.min); jPos <= Math.floor(this.slider.max); jPos++) {
-        this.positions[jPos].render(g, (m) => { return this.unitsHandler!.isGap(m); },
-          fontStyle, uppercaseLetterAscent, uppercaseLetterHeight,
-          /* this._positionWidthWithMargin, firstVisiblePosIdx,*/ this.cp);
-      }
+    const dpr: number = window.devicePixelRatio;
+    /** 0 is for no position labels */
+    const positionLabelsHeight = this.showPositionLabels ? POSITION_LABELS_HEIGHT : 0;
+    if (renderLevel >= WlRenderLevel.Freqs) calculateFreqsInt();
+    this.calcLayout(dpr); // after _skipEmptyPositions
+    if (this.positions.length === 0 || this.startPosition === -1 || this.endPosition === -1) return;
+    if (renderLevel >= WlRenderLevel.Layout) calculateLayoutInt(window.devicePixelRatio, positionLabelsHeight);
 
-      _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.renderInt( recalcLevel=${recalcLevel} ), end`);
-    };
+    const g = this.canvas.getContext('2d');
+    if (!g) return;
 
-    this.renderLevelRequested = Math.max(this.renderLevelRequested, recalcLevel);
-    return new Promise<void>((resolve, reject) => {
-      window.setTimeout(() => {
-        try {
-          if (this.renderLevelRequested > WlRenderLevel.None) {
-            try {
-              renderInt(this.renderLevelRequested);
-            } finally {
-              this.renderLevelRequested = WlRenderLevel.None;
-            }
-          }
-        } catch (err: any) {
-          reject(err);
-        }
-      }, 0 /* next event cycle */);
-    });
+    const length: number = this.Length;
+    g.resetTransform();
+    g.fillStyle = intToHtmlA(this.backgroundColor);
+    g.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    g.textBaseline = this.textBaseline;
+
+    //#region Plot positionNames
+    const positionFontSize = 10 * dpr;
+    g.resetTransform();
+    g.fillStyle = 'black';
+    g.textAlign = 'center';
+    g.font = `${positionFontSize.toFixed(1)}px Roboto, Roboto Local, sans-serif`;
+    const posNameMaxWidth = Math.max(...this.positions.map((pos) => g.measureText(pos.name).width));
+    const hScale = posNameMaxWidth < (this._positionWidth * dpr - 2) ? 1 :
+      (this._positionWidth * dpr - 2) / posNameMaxWidth;
+
+    if (positionLabelsHeight > 0) {
+      renderPositionLabels(g, dpr, hScale, this._positionWidthWithMargin, this._positionWidth,
+        this.positions, this.slider.min, this.slider.max);
+    }
+    //#endregion Plot positionNames
+    const fontStyle = '16px Roboto, Roboto Local, sans-serif';
+    // Hacks to scale uppercase characters to target rectangle
+    const uppercaseLetterAscent = 0.25;
+    const uppercaseLetterHeight = 12.2;
+    for (let jPos = Math.floor(this.slider.min); jPos <= Math.floor(this.slider.max); jPos++) {
+      this.positions[jPos].render(g, (m) => { return this.unitsHandler!.isGap(m); },
+        fontStyle, uppercaseLetterAscent, uppercaseLetterHeight,
+        /* this._positionWidthWithMargin, firstVisiblePosIdx,*/ this.cp);
+    }
+
+    _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.renderInt( recalcLevel=${renderLevel} ), end`);
+  }
+
+  private renderRequestOnDebounce(renderLevel: WlRenderLevel): void {
+    this.requestedRenderLevel = WlRenderLevel.None;
+    this.renderInt(renderLevel)
+      .catch((err: any) => {
+        const [errMsg, errStack] = errInfo(err);
+        _package.logger.error(errMsg, undefined, errStack);
+      });
   }
 
   private _lastWidth: number;
@@ -1062,7 +1068,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       };
       _package.logger.debug(
         `Bio: WebLogoViewer<${this.viewerId}>.sliderOnValuesChanged( ${JSON.stringify(val)} ), start`);
-      this.render(WlRenderLevel.Layout, 'sliderOnValuesChanged').then(() => {});
+      this.render(WlRenderLevel.Layout, 'sliderOnValuesChanged');
     } catch (err: any) {
       const errMsg = errorToConsole(err);
       _package.logger.error(`Bio: WebLogoViewer<${this.viewerId}>.sliderOnValuesChanged() error:\n` + errMsg);
@@ -1075,7 +1081,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     try {
       this.updatePositions();
       if (this.filterSource === FilterSources.Filtered)
-        this.render(WlRenderLevel.Freqs, 'dataFrameFilterOnChanged').then(() => {});
+        this.render(WlRenderLevel.Freqs, 'dataFrameFilterOnChanged');
     } catch (err: any) {
       const errMsg = errorToConsole(err);
       _package.logger.error(`Bio: WebLogoViewer<${this.viewerId}>.dataFrameFilterOnChanged() error:\n` + errMsg);
@@ -1087,7 +1093,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.dataFrameSelectionOnChanged()`);
     try {
       if (this.filterSource === FilterSources.Selected)
-        this.render(WlRenderLevel.Freqs, 'dataFrameSelectionOnChanged').then(() => {});
+        this.render(WlRenderLevel.Freqs, 'dataFrameSelectionOnChanged');
     } catch (err: any) {
       const errMsg = errorToConsole(err);
       _package.logger.error(`Bio: WebLogoViewer<${this.viewerId}>.dataFrameSelectionOnChanged() error:\n` + errMsg);