@datagrok/bio 2.4.49 → 2.4.51

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.4.49",
+  "version": "2.4.51",
   "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",
@@ -22,7 +22,7 @@
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.32.7",
+    "@datagrok-libraries/bio": "^5.32.8",
     "@datagrok-libraries/chem-meta": "^1.0.1",
     "@datagrok-libraries/ml": "^6.3.39",
     "@datagrok-libraries/tutorials": "^1.3.2",

package/src/package.ts

@@ -614,6 +614,16 @@ export function importFasta(fileContent: string): DG.DataFrame [] {
   const ffh = new FastaFileHandler(fileContent);
   return ffh.importFasta();
 }
+//name: importBam
+//description: Opens Bam file
+//tags: file-handler
+//meta.ext: bam, bai
+//input: string fileContent
+//output: list tables
+export function importBam(fileContent: string): DG.DataFrame [] {
+  console.log(fileContent);
+  return [];
+}
 
 //top-menu: Bio | Convert...
 //name: convertDialog

package/src/tests/renderers-monomer-placer.ts

@@ -3,7 +3,7 @@ import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 
 import {_package} from '../package-test';
-import {after, before, category, delay, expect, test} from '@datagrok-libraries/utils/src/test';
+import {category, test} from '@datagrok-libraries/utils/src/test';
 import {MonomerPlacer} from '@datagrok-libraries/bio/src/utils/cell-renderer-monomer-placer';
 import {monomerToShort} from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
@@ -22,13 +22,14 @@ category('renderers: monomerPlacer', () => {
         'id3,mon1-M-mon3-mon4-mon5-MON8-N9\n', //
       testList: [
         {src: {row: 0, x: -1}, tgt: {pos: null}},
-        {src: {row: 1, x: 0}, tgt: {pos: 0}},
-        {src: {row: 1, x: 1}, tgt: {pos: 0}},
+        {src: {row: 1, x: 0}, tgt: {pos: null}},
+        {src: {row: 1, x: 5}, tgt: {pos: 0}},
+        {src: {row: 1, x: 6}, tgt: {pos: 0}},
         {src: {row: 1, x: 26}, tgt: {pos: 1}},
         {src: {row: 1, x: 170}, tgt: {pos: 6}},
-        {src: {row: 1, x: 208}, tgt: {pos: null}},
-        {src: {row: 2, x: 170}, tgt: {pos: 6}},
-        {src: {row: 2, x: 175}, tgt: {pos: null}},
+        {src: {row: 1, x: 208}, tgt: {pos: 7}},
+        {src: {row: 2, x: 170}, tgt: {pos: 5}},
+        {src: {row: 2, x: 175}, tgt: {pos: 5}},
       ]
     },
     splitterMsa: {
@@ -41,13 +42,13 @@ category('renderers: monomerPlacer', () => {
         'id3,mon1-M-mon3-mon4-mon5---MON8-N9\n', //
       testList: [
         {src: {row: 0, x: -1}, tgt: {pos: null}},
-        {src: {row: 1, x: 0}, tgt: {pos: 0}},
-        {src: {row: 1, x: 1}, tgt: {pos: 0}},
-        {src: {row: 1, x: 26}, tgt: {pos: 1}},
-        {src: {row: 1, x: 170}, tgt: {pos: 6}},
-        {src: {row: 1, x: 227}, tgt: {pos: null}},
-        {src: {row: 2, x: 220}, tgt: {pos: 8}},
-        {src: {row: 2, x: 227}, tgt: {pos: null}},
+        {src: {row: 1, x: 0}, tgt: {pos: null}},
+        {src: {row: 1, x: 1}, tgt: {pos: null}},
+        {src: {row: 1, x: 26}, tgt: {pos: 0}},
+        {src: {row: 1, x: 170}, tgt: {pos: 4}},
+        {src: {row: 1, x: 227}, tgt: {pos: 5}},
+        {src: {row: 2, x: 220}, tgt: {pos: 5}},
+        {src: {row: 2, x: 227}, tgt: {pos: 5}},
       ]
     },
     fastaMsa: {
@@ -61,13 +62,13 @@ id3,QHIRE--LT
 `,
       testList: [
         {src: {row: 1, x: -1}, tgt: {pos: null}},
-        {src: {row: 1, x: 0}, tgt: {pos: 0}},
-        {src: {row: 1, x: 1}, tgt: {pos: 0}},
-        {src: {row: 1, x: 19}, tgt: {pos: 1}},
+        {src: {row: 1, x: 0}, tgt: {pos: null}},
+        {src: {row: 1, x: 1}, tgt: {pos: null}},
+        {src: {row: 1, x: 19}, tgt: {pos: 0}},
         {src: {row: 1, x: 170}, tgt: {pos: 8}},
-        {src: {row: 1, x: 171}, tgt: {pos: null}},
+        {src: {row: 1, x: 171}, tgt: {pos: 8}},
         {src: {row: 2, x: 170}, tgt: {pos: 8}},
-        {src: {row: 2, x: 171}, tgt: {pos: null}},
+        {src: {row: 2, x: 181}, tgt: {pos: null}},
       ]
     },
   };
@@ -78,7 +79,7 @@ id3,QHIRE--LT
       await grok.data.detectSemanticTypes(df);
       const seqCol: DG.Column = df.getCol('seq');
 
-      const monLength: number = 1;
+      const monLength: number = 3;
       const charWidth: number = 7;
       const sepWidth: number = 12;
       const colTemp: MonomerPlacer = new MonomerPlacer(null, seqCol, () => {

package/src/utils/cell-renderer-consts.ts

@@ -8,15 +8,28 @@ export enum MonomerWidthMode {
 }
 
 export const enum Tags {
-  calculated = '.mm.cellRenderer.calculated',
+  RendererSettingsChanged = '.mm.cellRenderer.settingsChanged',
 }
 
+export const rendererSettingsChangedState = {
+  true: '1',
+  false: '0',
+};
+
 export const enum Temps {
   monomerWidth = '.mm.cellRenderer.monomerWidth',
   maxMonomerLength = '.mm.cellRenderer.maxMonomerLength',
   colorCode = '.mm.cellRenderer.colorCode',
   compareWithCurrent = '.mm.cellRenderer.compareWithCurrent',
   highlightDifference = '.mm.cellRenderer.highlightDifference',
+  gapLength = '.mm.cellRenderer.gapLength',
+}
+
+export const enum tempTAGS {
+  referenceSequence = 'reference-sequence',
+  currentWord = 'current-word',
+  monomerWidth = 'monomer-width',
+  bioSeqCol = 'bio-seqCol',
 }
 
 // export const MacromoleculeCellRendererDefaults = new class {

package/src/utils/cell-renderer.ts

@@ -7,10 +7,8 @@ import {printLeftOrCentered, DrawStyle} from '@datagrok-libraries/bio/src/utils/
 import * as C from './constants';
 import {MonomerPlacer} from '@datagrok-libraries/bio/src/utils/cell-renderer-monomer-placer';
 import {
-  ALIGNMENT, ALPHABET,
   getPaletteByType,
   getSplitter,
-  getSplitterForColumn,
   monomerToShort,
   MonomerToShortFunc,
   NOTATION,
@@ -20,22 +18,8 @@ import {
 import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
 import {UnknownSeqPalettes} from '@datagrok-libraries/bio/src/unknown';
 import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
-import {MonomerWorks} from '@datagrok-libraries/bio/src/monomer-works/monomer-works';
-import {Tags as mmcrTags, Temps as mmcrTemps} from '../utils/cell-renderer-consts';
-import { HELM_POLYMER_TYPE } from '@datagrok-libraries/bio/src/utils/const';
-import { MonomerLib } from './monomer-lib';
-import { IMonomerLib } from '@datagrok-libraries/bio/src/types';
-
-const enum tempTAGS {
-  referenceSequence = 'reference-sequence',
-  currentWord = 'current-word',
-  monomerWidth = 'monomer-width',
-  bioSeqCol = 'bio-seqCol',
-}
-
-const enum rndrTAGS {
-  calculatedCellRender = '.calculatedCellRender',
-}
+import {Temps as mmcrTemps, Tags as mmcrTags,
+  tempTAGS, rendererSettingsChangedState} from '../utils/cell-renderer-consts';
 
 type TempType = { [tagName: string]: any };
 
@@ -85,7 +69,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     //   return;
 
     const tableCol: DG.Column = gridCell.cell.column;
-    const tableColTemp: TempType = tableCol.temp;
+    //const tableColTemp: TempType = tableCol.temp;
     const seqColTemp: MonomerPlacer = tableCol.temp[tempTAGS.bioSeqCol];
     if (!seqColTemp) return; // Can do nothing without precalculated data
 
@@ -105,10 +89,10 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
       const monomerSymbol: string = seqMonList[left];
       const tooltipElements: HTMLElement[] = [ui.div(monomerSymbol)];
       const monomer = seqColTemp.getMonomer(monomerSymbol);
-      if(monomer) {
-      const options = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
-      const monomerSVG = grok.chem.svgMol(monomer.smiles, undefined, undefined, options);
-      tooltipElements.push(monomerSVG);
+      if (monomer) {
+        const options = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
+        const monomerSVG = grok.chem.svgMol(monomer.smiles, undefined, undefined, options);
+        tooltipElements.push(monomerSVG);
       }
       ui.tooltip.show(ui.divV(tooltipElements), e.x + 16, e.y + 16);
     } else {
@@ -130,9 +114,10 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
    */
   render(
     g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, gridCell: DG.GridCell,
-    cellStyle: DG.GridCellStyle
+    _cellStyle: DG.GridCellStyle
   ): void {
-    let gapRenderer = 5;
+    let gapLength = 0;
+    const msaGapLength = 8;
     let maxLengthOfMonomer = 8;
 
     // TODO: Store temp data to GridColumn
@@ -144,9 +129,9 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     // Cell renderer settings
     const tempMonomerWidth: string | null = tableColTemp[tempTAGS.monomerWidth];
     const monomerWidth: string = (tempMonomerWidth != null) ? tempMonomerWidth : 'short';
-    if (monomerWidth === 'short') {
+    if (monomerWidth === 'short')
       maxLengthOfMonomer = tableColTemp[mmcrTemps.maxMonomerLength] ?? _package.properties.maxMonomerLength;
-    }
+
 
     let seqColTemp: MonomerPlacer = tableCol.temp[tempTAGS.bioSeqCol];
     if (!seqColTemp) {
@@ -155,16 +140,24 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
           const uh = UnitsHandler.getOrCreate(tableCol);
           return {
             unitsHandler: uh,
-            monomerCharWidth: 7, separatorWidth: !uh.isMsa() ? gapRenderer : 8,
+            monomerCharWidth: 7, separatorWidth: !uh.isMsa() ? gapLength : msaGapLength,
             monomerToShort: monomerToShortFunction, monomerLengthLimit: maxLengthOfMonomer,
             monomerLib: getBioLib()
           };
         });
     }
 
+    if (tableCol.tags[mmcrTags.RendererSettingsChanged] === rendererSettingsChangedState.true) {
+      gapLength = tableColTemp[mmcrTemps.gapLength] as number ?? gapLength;
+      // this event means that the mm renderer settings have changed, particularly monomer representation and max width.
+      seqColTemp.setMonomerLengthLimit(maxLengthOfMonomer);
+      seqColTemp.setSeparatorWidth(seqColTemp.isMsa() ? msaGapLength : gapLength);
+      tableCol.setTag(mmcrTags.RendererSettingsChanged, rendererSettingsChangedState.false);
+    }
+
     const [maxLengthWords, maxLengthWordsSum]: [number[], number[]] =
       seqColTemp.getCellMonomerLengths(gridCell.tableRowIndex!);
-    const maxIndex = maxLengthWords.length;
+    const _maxIndex = maxLengthWords.length;
 
     // Store updated seqColTemp to the col temp
     if (seqColTemp.updated) tableColTemp[tempTAGS.bioSeqCol] = seqColTemp;

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

@@ -1,13 +1,18 @@
 import * as ui from 'datagrok-api/ui';
+import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
-import * as rxjs from 'rxjs';
-import {WebLogoViewer, PROPS as wlPROPS} from '../viewers/web-logo-viewer';
-import {IVdRegionsViewer,
+import {fromEvent, Unsubscribable} from 'rxjs';
+
+import {
+  IVdRegionsViewer,
   VdRegion, VdRegionType,
 } from '@datagrok-libraries/bio/src/viewers/vd-regions';
-import {FilterSources, PositionHeight} from '@datagrok-libraries/bio/src/viewers/web-logo';
-import {Unsubscribable} from 'rxjs';
+import {FilterSources, IWebLogoViewer, PositionHeight} from '@datagrok-libraries/bio/src/viewers/web-logo';
+
+import {WebLogoViewer, PROPS as wlPROPS} from '../viewers/web-logo-viewer';
+
+import {_package} from '../package';
 
 const vrt = VdRegionType;
 
@@ -101,22 +106,29 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     // this.mlbView.dockManager.dock(this.regionsFg.root, DG.DOCK_TYPE.LEFT, rootNode, 'Filter regions', 0.2);
 
     this.subs.push(ui.onSizeChanged(this.root).subscribe(this.rootOnSizeChanged.bind(this)));
-    this.subs.push(rxjs.fromEvent<MouseEvent>(this.root, 'mousemove').subscribe(this.rootOnMouseMove.bind(this)));
+    this.subs.push(fromEvent<MouseEvent>(this.root, 'mousemove').subscribe(this.rootOnMouseMove.bind(this)));
 
     // await this.buildView('init'); // init
   }
 
-  public override async onTableAttached() {
-    const superOnTableAttached = super.onTableAttached.bind(this);
-    this.viewPromise = this.viewPromise.then(async () => { // onTableAttached
-      superOnTableAttached();
-      if (!this.viewed) {
-        await this.buildView('onTableAttached'); // onTableAttached
-        this.viewed = true;
+  override detach() {
+    if (this.setDataInProgress) return;
+    const superDetach = super.detach.bind(this);
+    this.detachPromise = this.detachPromise.then(async () => { // detach
+      await this.viewPromise;
+      if (this.viewed) {
+        await this.destroyView('detach');
+        this.viewed = false;
       }
+      superDetach();
     });
   }
 
+  override onTableAttached() {
+    super.onTableAttached();
+    this.setData(this.dataFrame, this.regions);
+  }
+
   public override onPropertyChanged(property: DG.Property | null): void {
     super.onPropertyChanged(property);
 
@@ -156,39 +168,41 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
 
   // TODO: .onTableAttached is not calling on dataFrame set, onPropertyChanged  also not calling
   public setData(mlbDf: DG.DataFrame, regions: VdRegion[]) {
-    console.debug('Bio: VdRegionsViewer.setData()');
+    if (!this.setDataInProgress) this.setDataInProgress = true; else return;
+    _package.logger.debug('Bio: VdRegionsViewer.setData()');
+
     this.viewPromise = this.viewPromise.then(async () => { // setData
       if (this.viewed) {
-        await this.destroyView('setData'); // setData
+        await this.destroyView('setData');
         this.viewed = false;
       }
-    });
-
-    this.regions = regions;
-    this.dataFrame = mlbDf; // causes detach and onTableAttached
-
-    this.viewPromise = this.viewPromise.then(async () => { // setData
+    }).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'); // setData
+        await this.buildView('setData');
         this.viewed = true;
       }
-    });
-  }
-
-  override detach() {
-    const superDetach = super.detach.bind(this);
-    this.viewPromise = this.viewPromise.then(async () => { // detach
-      if (this.viewed) {
-        await this.destroyView('detach'); // detach
-        this.viewed = false;
-      }
-      superDetach();
+    }).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;
     });
   }
 
   // -- View --
 
   private viewPromise: Promise<void> = Promise.resolve();
+  private detachPromise: Promise<void> = Promise.resolve();
+  private setDataInProgress: boolean = false;
 
   private host: HTMLElement | null = null;
   private filterSourceInput: DG.InputBase<boolean | null> | null = null;
@@ -223,25 +237,32 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     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();
 
-    this.logos = [];
+    const logoPromiseList: Promise<[number, string, WebLogoViewer]>[] = [];
     for (let orderI = 0; orderI < orderList.length; orderI++) {
-      const regionChains: { [chain: string]: WebLogoViewer } = {};
       for (const chain of this.chains) {
         const region: VdRegion | undefined = regionsFiltered
           .find((r) => r.order == orderList[orderI] && r.chain == chain);
-        regionChains[chain] = (await this.dataFrame.plot.fromType('WebLogo', {
-          sequenceColumnName: region!.sequenceColumnName,
-          startPositionName: region!.positionStartName,
-          endPositionName: region!.positionEndName,
-          fixWidth: true,
-          skipEmptyPositions: this.skipEmptyPositions,
-          positionWidth: this.positionWidth,
-          positionHeight: this.positionHeight,
-        })) as unknown as WebLogoViewer;
+        logoPromiseList.push((async () => {
+          const wl: WebLogoViewer = await this.dataFrame.plot.fromType('WebLogo', {
+            sequenceColumnName: region!.sequenceColumnName,
+            startPositionName: region!.positionStartName,
+            endPositionName: region!.positionEndName,
+            fixWidth: true,
+            skipEmptyPositions: this.skipEmptyPositions,
+            positionWidth: this.positionWidth,
+            positionHeight: this.positionHeight,
+          }) as WebLogoViewer;
+          return [orderI, chain, wl];
+        })());
       }
-      // WebLogo creation fires onRootSizeChanged event even before control being added to this.logos
-      this.logos[orderI] = regionChains;
     }
+    const logoList: [number, string, WebLogoViewer][] = await Promise.all(logoPromiseList);
+    // Fill in this.logos with created viewers
+    this.logos = new Array(orderList.length);
+    for (let orderI = 0; orderI < orderList.length; ++orderI)
+      this.logos[orderI] = {};
+    for (const [orderI, chain, wl] of logoList)
+      this.logos[orderI][chain] = wl;
 
     // ui.tableFromMap()
     // DG.HtmlTable.create()

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

@@ -5,24 +5,27 @@ import * as DG from 'datagrok-api/dg';
 import wu from 'wu';
 import {fromEvent, Unsubscribable} from 'rxjs';
 
-import {SliderOptions} from 'datagrok-api/dg';
 import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
 import {
-  getSplitter, monomerToShort, pickUpPalette, pickUpSeqCol, SplitterFunc,
+  monomerToShort,
+  pickUpPalette,
+  pickUpSeqCol,
   TAGS as bioTAGS,
 } from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {
-  WebLogoPropsDefault, WebLogoProps,
+  FilterSources,
+  HorizontalAlignments,
   PositionHeight,
+  PositionMarginStates,
   positionSeparator,
+  TAGS as wlTAGS,
   VerticalAlignments,
-  HorizontalAlignments,
-  PositionMarginStates,
-  FilterSources,
+  WebLogoProps,
+  WebLogoPropsDefault,
 } from '@datagrok-libraries/bio/src/viewers/web-logo';
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
-import {TAGS as wlTAGS} from '@datagrok-libraries/bio/src/viewers/web-logo';
+
 import {_package} from '../package';
 
 declare global {
@@ -450,7 +453,7 @@ export class WebLogoViewer extends DG.JsViewer {
     this.filterSource = this.string(PROPS.filterSource, defaults.filterSource,
       {category: PROPS_CATS.BEHAVIOR, choices: Object.values(FilterSources)}) as FilterSources;
 
-    const style: SliderOptions = {style: 'barbell'};
+    const style: DG.SliderOptions = {style: 'barbell'};
     this.slider = ui.rangeSlider(0, 100, 0, 20, false, style);
     this.canvas = ui.canvas();
     this.canvas.style.width = '100%';
@@ -576,7 +579,7 @@ export class WebLogoViewer extends DG.JsViewer {
         } catch (err: any) {
           this.seqCol = null;
           this.error = err instanceof Error ? err : new Error(err.toString());
-          _package.logger.error(this.error.message, undefined, this.error.stack);
+          throw err;
         }
         if (!this.seqCol) {
           this.unitsHandler = null;
@@ -700,7 +703,18 @@ export class WebLogoViewer extends DG.JsViewer {
         break;
     }
 
-    this.render(RecalcLevel.Freqs, 'onPropertyChanged');
+    switch (property.name) {
+      case PROPS.fixWidth:
+      case PROPS.fitArea:
+      case PROPS.positionWidth:
+      case PROPS.positionMargin:
+        this.render(RecalcLevel.Layout, 'onPropertyChanged');
+        break;
+
+      default:
+        this.render(RecalcLevel.Freqs, 'onPropertyChanged');
+        break;
+    }
   }
 
   /** Add filter handlers when table is a attached  */
@@ -751,7 +765,7 @@ export class WebLogoViewer extends DG.JsViewer {
 
   /** Helper function for remove empty positions */
   // TODO: use this function in from core
-  protected removeWhere(array: Array<any>, predicate: (T: any) => boolean): Array<any> {
+  protected removeWhere<T>(array: Array<T>, predicate: (item: T) => boolean): Array<any> {
     const length = array.length;
     let updateIterator = 0;
     for (let deleteIterator = 0; deleteIterator < length; deleteIterator++) {
@@ -767,7 +781,7 @@ export class WebLogoViewer extends DG.JsViewer {
   /** Function for removing empty positions */
   protected _removeEmptyPositions() {
     if (this.skipEmptyPositions)
-      this.removeWhere(this.positions, (item) => item?.freq['-']?.count === item.rowCount);
+      this.removeWhere(this.positions, (item) => item?.getFreq('-')?.count === item?.rowCount);
   }
 
   private renderRequested: boolean = false;
@@ -780,11 +794,11 @@ export class WebLogoViewer extends DG.JsViewer {
       `.render( recalcLevel=${recalcLevel}, reason='${reason}' )`);
 
     /** Calculate freqs of monomers */
-    const calculateFreqsInt = (length: number): void => {
+    const calculateFreqsInt = (): void => {
       _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.calculateFreqsInt(), start `);
-
       if (!this.host || !this.seqCol || !this.dataFrame) return;
 
+      const length: number = this.startPosition <= this.endPosition ? this.endPosition - this.startPosition + 1 : 0;
       this.unitsHandler = UnitsHandler.getOrCreate(this.seqCol);
       const posCount: number = this.startPosition <= this.endPosition ? this.endPosition - this.startPosition + 1 : 0;
       this.positions = new Array(posCount);
@@ -815,9 +829,10 @@ export class WebLogoViewer extends DG.JsViewer {
     };
 
     /** Calculate layout of monomers on screen (canvas) based on freqs, required to handle mouse events */
-    const calculateLayoutInt = (length: number, dpr: number): void => {
+    const calculateLayoutInt = (dpr: number): void => {
       _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.calculateLayoutInt(), start `);
 
+      const length = this.positions.length;
       this.calcSize();
       const absoluteMaxHeight = this.canvas.height - this.axisHeight * dpr;
       const alphabetSize = this.getAlphabetSize();
@@ -835,7 +850,8 @@ export class WebLogoViewer extends DG.JsViewer {
      *@param {boolean} recalcFreqs - indicates that need to recalculate data for rendering
      */
     const renderInt = (recalcLevel: RecalcLevel) => {
-      _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.renderInt( recalcLevel=${recalcLevel} ), start `);
+      _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}').`;
@@ -854,11 +870,11 @@ export class WebLogoViewer extends DG.JsViewer {
 
       this.slider.root.style.width = `${this.host.clientWidth}px`;
 
-      const length: number = this.Length;
       const dpr: number = window.devicePixelRatio;
-      if (recalcLevel >= RecalcLevel.Freqs) calculateFreqsInt(length);
-      if (recalcLevel >= RecalcLevel.Layout) calculateLayoutInt(length, window.devicePixelRatio);
+      if (recalcLevel >= RecalcLevel.Freqs) calculateFreqsInt();
+      if (recalcLevel >= RecalcLevel.Layout) calculateLayoutInt(window.devicePixelRatio);
 
+      const length: number = this.Length;
       g.resetTransform();
       g.fillStyle = DG.Color.toHtml(this.backgroundColor);
       g.fillRect(0, 0, this.canvas.width, this.canvas.height);
@@ -896,7 +912,7 @@ export class WebLogoViewer extends DG.JsViewer {
           this.positionWidthWithMargin, firstVisibleIndex, this.cp);
       }
 
-      _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.renderInt( recalcLevel=${recalcLevel} ), end `);
+      _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.renderInt( recalcLevel=${recalcLevel} ), end`);
     };
 
     this.recalcLevelRequested = Math.max(this.recalcLevelRequested, recalcLevel);
@@ -1039,7 +1055,8 @@ export class WebLogoViewer extends DG.JsViewer {
     _package.logger.debug('Bio: WebLogoViewer<${this.viewerId}>.dataFrameFilterChanged()');
     try {
       this.updatePositions();
-      this.render(RecalcLevel.Freqs, 'dataFrameFilterOnChanged');
+      if (this.filterSource === FilterSources.Filtered)
+        this.render(RecalcLevel.Freqs, 'dataFrameFilterOnChanged');
     } catch (err: any) {
       const errMsg = errorToConsole(err);
       _package.logger.error('Bio: WebLogoViewer<${this.viewerId}>.dataFrameFilterOnChanged() error:\n' + errMsg);
@@ -1050,7 +1067,8 @@ export class WebLogoViewer extends DG.JsViewer {
   private dataFrameSelectionOnChanged(_value: any): void {
     _package.logger.debug('Bio: WebLogoViewer<${this.viewerId}>.dataFrameSelectionOnChanged()');
     try {
-      this.render(RecalcLevel.Freqs, 'dataFrameSelectionOnChanged');
+      if (this.filterSource === FilterSources.Selected)
+        this.render(RecalcLevel.Freqs, 'dataFrameSelectionOnChanged');
     } catch (err: any) {
       const errMsg = errorToConsole(err);
       _package.logger.error('Bio: WebLogoViewer<${this.viewerId}>.dataFrameSelectionOnChanged() error:\n' + errMsg);
@@ -1132,10 +1150,6 @@ export class WebLogoViewer extends DG.JsViewer {
 export function checkSeqForMonomerAtPos(
   df: DG.DataFrame, unitsHandler: UnitsHandler, filter: DG.BitSet, rowI: number, monomer: string, at: PositionInfo,
 ): boolean {
-  // if (!filter.get(rowI)) return false;
-  // TODO: Use BitSet.get(idx)
-  if (!filter.getSelectedIndexes().includes(rowI)) return false;
-
   const seqMList: string[] = unitsHandler.splitted[rowI];
   const seqM = at.pos < seqMList.length ? seqMList[at.pos] : null;
   return ((seqM === monomer) || (seqM === '' && monomer === '-'));