@datagrok/bio 2.10.0 → 2.10.2

package/files/data/sample_HELM_empty_unkn.csv

@@ -0,0 +1,11 @@
+HELM,Activity
+,5.30751
+PEPTIDE1{meI.hHis.Aca.Cys_SEt.T.dK.Thr_PO3H2.Aca.Tyr_PO3H2.D-Chg.dV.Phe_ab-dehydro.N.D-Orn.D-aThr.Phe_4Me}$$$$,5.72388
+,5.18581
+PEPTIDE1{meI.hHis.unkn1.Cys_SEt.unkn2.dK.Thr_PO3H2.Aca.Tyr_PO3H2.D-Chg.dV.Thr_PO3H2.N.D-Orn.D-aThr.Phe_4Me}$$$$,6.22350
+PEPTIDE1{meI.hHis.Aca.N.T.dK.Thr_PO3H2.Aca.D-Tyr_Et.Tyr_ab-dehydroMe.dV.Chg.N.D-Orn.D-aThr.Phe_4Me}$$$$,3.84591
+PEPTIDE1{meI.hHis.Aca.N.unkn3.dK.Thr_PO3H2.Aca.D-Tyr_Et.Tyr_Bn.dV.E.N.dV.Phe_4Me}$$$$,3.27920
+,2.10585
+PEPTIDE1{meI.hHis.Aca.N.T.dK.Thr_PO3H2.Aca.D-Tyr_Et.meQ.dV.E.N.dV.Phe_4Me}$$$$,1.80369
+PEPTIDE1{meI.hHis.Aca.N.T.dK.Thr_PO3H2.Aca.Oic_3aS-7aS.D-Chg.dV.E.N.D-Orn.D-aThr.Phe_4Me}$$$$,6.38806
+PEPTIDE1{meI.hHis.Aca.N.T.dK.Thr_PO3H2.Aca.meM.D-Chg.dV.E.N.D-Orn.D-aThr.Phe_4Me}$$$$,4.44165

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.10.0",
+  "version": "2.10.2",
   "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.0",
+    "@datagrok-libraries/bio": "^5.38.2",
     "@datagrok-libraries/chem-meta": "^1.0.1",
     "@datagrok-libraries/ml": "^6.3.39",
     "@datagrok-libraries/tutorials": "^1.3.6",

package/src/apps/get-region-app.ts

@@ -7,38 +7,44 @@ import {IWebLogoViewer} from '@datagrok-libraries/bio/src/viewers/web-logo';
 
 import {_package} from '../package';
 
-const csv = `seq,value
+const defaultData: GetRegionAppData = {
+  df: DG.DataFrame.fromCsv(`seq,value
 ATCCGTCGT,0.5
 TGTTCGTCA,0.4
 ATGGTCGTA,0.7
-ATCCGTGCA,0.1`;
+ATCCGTGCA,0.1`),
+  colName: 'seq',
+  positionNames: ['1', '1A', '1C', '2', '4', '4A', '4B', '5', '6'].join(positionSeparator),
+  regions: [
+    {name: 'first region', start: '1', end: '2'},
+    {name: 'second region', start: '1C', end: '4'},
+    {name: 'overlapping second', start: '1C', end: '4A'},
+    {name: 'whole sequence', start: '1', end: '6'},
+    {name: 'bad start', start: '0', end: '6'},
+    {name: 'bad end', start: '1', end: '4C'},
+    {name: 'bad start & end', start: '0', end: '4C'},
+  ]
+};
 
-const positionNames = ['1', '1A', '1C', '2', '4', '4A', '4B', '5', '6'].join(positionSeparator);
-
-const regions = [
-  {name: 'first region', start: '1', end: '2'},
-  {name: 'second region', start: '1C', end: '4'},
-  {name: 'overlapping second', start: '1C', end: '4A'},
-  {name: 'whole sequence', start: '1', end: '6'},
-  {name: 'bad start', start: '0', end: '6'},
-  {name: 'bad end', start: '1', end: '4C'},
-  {name: 'bad start & end', start: '0', end: '4C'},
-];
+export type GetRegionAppData = {
+  df: DG.DataFrame, colName: string,
+  positionNames?: string, regions?: { name: string, start: string, end: string }[]
+};
 
 export class GetRegionApp {
-  df: DG.DataFrame;
   view: DG.TableView;
+  data!: GetRegionAppData;
 
   constructor(
     private readonly urlParams: URLSearchParams,
     private readonly funcName: string
   ) {}
 
-  async init(): Promise<void> {
-    this.df = DG.DataFrame.fromCsv(csv);
-    const seqCol = this.df.getCol('seq');
-    seqCol.setTag(TAGS.positionNames, positionNames);
-    seqCol.setTag(TAGS.regions, JSON.stringify(regions));
+  async init(data?: GetRegionAppData): Promise<void> {
+    this.data = data ?? defaultData;
+    const seqCol = this.data.df.getCol(this.data.colName);
+    if (!!this.data.positionNames) seqCol.setTag(TAGS.positionNames, this.data.positionNames);
+    if (!!this.data.regions) seqCol.setTag(TAGS.regions, JSON.stringify(this.data.regions));
 
     await this.buildView();
   }
@@ -46,11 +52,14 @@ export class GetRegionApp {
   // -- View --
 
   async buildView(): Promise<void> {
-    this.view = grok.shell.addTableView(this.df);
+    // To allow showing a WebLogoViewer
+    await grok.data.detectSemanticTypes(this.data.df);
+
+    this.view = grok.shell.addTableView(this.data.df);
     this.view.path = this.view.basePath = `func/${_package.name}.${this.funcName}`;
 
     const viewer: DG.Viewer & IWebLogoViewer = (await this.view.dataFrame.plot
-      .fromType('WebLogo')) as DG.Viewer & IWebLogoViewer;
+      .fromType('WebLogo', {sequenceColumnName: this.data.colName})) as DG.Viewer & IWebLogoViewer;
     this.view.dockManager.dock(viewer, DG.DOCK_TYPE.DOWN, null, 'WebLogo', 0.35);
   }
 }

package/src/package.ts

@@ -365,13 +365,13 @@ export function getRegion(
 //input: string end       {optional: true}         [Region end position name]
 //input: string name      {optional: true}         [Region column name]
 //editor: Bio:GetRegionEditor
-export function getRegionTopMenu(
+export async function getRegionTopMenu(
   table: DG.DataFrame, sequence: DG.Column,
   start: string | undefined, end: string | undefined, name: string | undefined
-): void {
+): Promise<void> {
   const regCol = getRegionDo(sequence, start ?? null, end ?? null, name ?? null);
   sequence.dataFrame.columns.add(regCol);
-  regCol.setTag(DG.TAGS.CELL_RENDERER, 'sequence');
+  await grok.data.detectSemanticTypes(sequence.dataFrame); // to set renderer
 }
 
 //top-menu: Bio | Analyze | Activity Cliffs...
@@ -656,13 +656,6 @@ export async function compositionAnalysis(): Promise<void> {
   await handler(col);
 }
 
-//top-menu: Bio | Convert | SDF to JSON Library...
-//name: SDF to JSON Library
-//input: dataframe table
-export async function sdfToJsonLib(table: DG.DataFrame) {
-  const _jsonMonomerLibrary = createJsonMonomerLibFromSdf(table);
-}
-
 // 2023-05-17 Representations does not work at BioIT
 // //name: Representations
 // //tags: panel, widgets
@@ -915,6 +908,19 @@ export async function getRegionApp(): Promise<void> {
   }
 }
 
+//name: getRegionHelmApp
+export async function getRegionHelmApp(): Promise<void> {
+  const pi = DG.TaskBarProgressIndicator.create('getRegion ...');
+  try {
+    const urlParams = new URLSearchParams(window.location.search);
+    const df = await _package.files.readCsv('data/sample_HELM_empty_vals.csv');
+    const app = new GetRegionApp(urlParams, 'getRegionHelmApp');
+    await app.init({df: df, colName: 'HELM'});
+  } finally {
+    pi.close();
+  }
+}
+
 // -- Handle context menu --
 
 ///name: addCopyMenu

package/src/tests/detectors-tests.ts

@@ -38,6 +38,7 @@ category('detectors', () => {
     sepUn1 = 'sepUn1',
     sepUn2 = 'sepUn2',
     sepMsaDna1 = 'sepMsaDna1',
+    sepMsaUnWEmpty = 'sepMsaUnWEmpty',
     fastaMsaDna1 = 'fastaMsaDna1',
     fastaMsaPt1 = 'fastaMsaPt1',
   }
@@ -109,6 +110,11 @@ rut12/rty/her2/abc/cfr3//wert/rut12`;
 A-C--G-T--C-T
 C-A-C--T--G-T
 A-C-C-G-T-A-C-T`;
+    [csvTests.sepMsaUnWEmpty]: string = `seq
+m1-M-m3-mon4-mon5-N-T-MON8-N9
+m1-mon2-m3-mon4-mon5-Num--MON8-N9
+
+mon1-M-mon3-mon4-mon5---MON8-N9`;
     [csvTests.fastaMsaDna1]: string = `seq
 AC-GT-CT
 CAC-T-GT
@@ -234,6 +240,11 @@ MWRSWY-CKHP`;
     await _testPos(readCsv(csvTests.fastaUn), 'seq',
       NOTATION.FASTA, ALIGNMENT.SEQ_MSA, ALPHABET.UN, 12, true);
   });
+
+  test('SepMsaUnWEmpty', async () => {
+    await _testPos(readCsv(csvTests.sepMsaUnWEmpty), 'seq',
+      NOTATION.SEPARATOR, ALIGNMENT.SEQ_MSA, ALPHABET.UN, 14, true);
+  });
   test('FastaMsaDna1', async () => {
     await _testPos(readCsv(csvTests.fastaMsaDna1), 'seq',
       NOTATION.FASTA, ALIGNMENT.SEQ_MSA, ALPHABET.DNA, 4, false);
@@ -274,13 +285,13 @@ MWRSWY-CKHP`;
     await _testDf(readSamples(Samples.fastaCsv), {
       'Sequence': new PosCol(NOTATION.FASTA, ALIGNMENT.SEQ, ALPHABET.PT, 20, false),
     });
-  }, {skipReason: 'GROK-13851: Unhandled exceptions'});
+  });
 
   test('samplesFastaFasta', async () => {
     await _testDf(readSamples(Samples.fastaFasta), {
       'sequence': new PosCol(NOTATION.FASTA, ALIGNMENT.SEQ, ALPHABET.PT, 20, false),
     });
-  }, {skipReason: 'GROK-13851: Unhandled exceptions'});
+  });
 
   // peptidesComplex contains monomers with spaces in AlignedSequence columns, which are forbidden
   // test('samplesPeptidesComplexPositiveAlignedSequence', async () => {

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

@@ -2,12 +2,14 @@ import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 
-import {_package} from '../package-test';
+import wu from 'wu';
 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';
 
+import {_package} from '../package-test';
+
 category('renderers: monomerPlacer', () => {
   const tests = {
     splitter: {
@@ -34,21 +36,27 @@ category('renderers: monomerPlacer', () => {
     },
     splitterMsa: {
       /** For charWidth=7 and sepWidth=12, MSA
-       * Array(10) [0, 26, 52, 78, 104, 130, 156, 175, 201, 227]
+       * Array(10) [5, 38, 71, 104, 137, 170, 203, 222, 255, 281]
        */
       csv: 'id,seq\n' +
-        'id1,m1-M-m3-mon4-mon5-N-T-MON8-N9\n' + //Array(10) [0, 26, 52, 78, 104, 130, 156, 175, 201, 227]
-        'id2,m1-mon2-m3-mon4-mon5-Num--MON8-N9\n' + //
-        'id3,mon1-M-mon3-mon4-mon5---MON8-N9\n', //
+        'id1,m1-M-m3-mon4-mon5-N-T-MON8-N9\n' +
+        'id2,m1-mon2-m3-mon4-mon5-Num--MON8-N9\n' +
+        'id3,\n' + // empty
+        'id4,mon1-M-mon3-mon4-mon5---MON8-N9\n',
       testList: [
         {src: {row: 0, x: -1}, 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: 4}, tgt: {pos: null}},
+        {src: {row: 1, x: 5}, tgt: {pos: 0}},
+        {src: {row: 1, x: 37}, tgt: {pos: 0}},
+        {src: {row: 1, x: 38}, tgt: {pos: 1}},
         {src: {row: 1, x: 170}, tgt: {pos: 4}},
         {src: {row: 1, x: 200}, tgt: {pos: 5}},
-        {src: {row: 2, x: 200}, tgt: {pos: 5}},
-        {src: {row: 2, x: 203}, tgt: {pos: 5}},
+        {src: {row: 2, x: 20}, tgt: {pos: null}}, // empty value
+        {src: {row: 3, x: 170}, tgt: {pos: 4}},
+        {src: {row: 3, x: 200}, tgt: {pos: 5}},
+        {src: {row: 3, x: 282}, tgt: {pos: null}},
       ]
     },
     fastaMsa: {
@@ -58,6 +66,7 @@ category('renderers: monomerPlacer', () => {
       csv: `id,seq
 id1,QQYNIYPLT
 id2,QQWSSFPYT
+id3,
 id3,QHIRE--LT
 `,
       testList: [
@@ -67,14 +76,15 @@ id3,QHIRE--LT
         {src: {row: 1, x: 19}, tgt: {pos: 0}},
         {src: {row: 1, x: 170}, tgt: {pos: 8}},
         {src: {row: 1, x: 171}, tgt: {pos: 8}},
-        {src: {row: 2, x: 170}, tgt: {pos: 8}},
-        {src: {row: 2, x: 181}, tgt: {pos: null}},
+        {src: {row: 2, x: 5}, tgt: {pos: null}}, // empty value
+        {src: {row: 3, x: 170}, tgt: {pos: 8}},
+        {src: {row: 3, x: 181}, tgt: {pos: null}},
       ]
     },
   };
 
   for (const [testName, testData] of Object.entries(tests)) {
-    test(`getPosition_${testName}`, async () => {
+    test(`getPosition-${testName}`, async () => {
       const df: DG.DataFrame = DG.DataFrame.fromCsv(testData.csv);
       await grok.data.detectSemanticTypes(df);
       const seqCol: DG.Column = df.getCol('seq');
@@ -94,9 +104,12 @@ id3,QHIRE--LT
       });
 
       const testList = testData.testList;
+      // simulate rendering
+      for (let rowI: number = 0; rowI < seqCol.length; ++rowI)
+        colTemp.getCellMonomerLengths(rowI);
 
       const errorList: string[] = [];
-      for (const test of testList) {
+      for (const [test, _testI] of wu.enumerate(testList)) {
         const res = {pos: colTemp.getPosition(test.src.row, test.src.x)};
         if (test.tgt.pos != res.pos) {
           errorList.push(`Test src ${JSON.stringify(test.src)} expected tgt ${JSON.stringify(test.tgt)},` +

package/src/utils/get-region-func-editor.ts

@@ -29,7 +29,7 @@ export class GetRegionFuncEditor {
     region: DG.InputBase<SeqRegion>;
     start: DG.InputBase<string>;
     end: DG.InputBase<string>;
-    name: DG.InputBase;
+    name: DG.InputBase<string>;
   }();
 
   constructor(
@@ -54,8 +54,9 @@ export class GetRegionFuncEditor {
     this.inputs.region = ui.choiceInput<SeqRegion>('Region', null as unknown as SeqRegion, [],
       this.regionInputChanged.bind(this)) as DG.InputBase<SeqRegion>;
 
-    this.inputs.name = ui.stringInput('Name', '', () => {},
-      {placeholder: this.getDefaultName()});
+    this.inputs.name = ui.stringInput('Column name', this.getDefaultName(),
+      this.nameInputChanged.bind(this), {clearIcon: true});
+    this.inputs.name.onInput(this.nameInputInput.bind(this)); // To catch clear event
 
     // tooltips
     for (const paramName in this.call.inputParams) {
@@ -73,7 +74,7 @@ export class GetRegionFuncEditor {
     this.updateRegionItems();
     this.updateStartEndInputItems();
     this.updateRegion(true);
-    this.updateNameInputPlaceholder();
+    this.updateNameInput();
   }
 
   private fixRegion: boolean = false;
@@ -99,12 +100,24 @@ export class GetRegionFuncEditor {
 
   private startInputChanged(): void {
     this.updateRegion(false);
-    this.updateNameInputPlaceholder();
+    this.updateNameInput();
   }
 
   private endInputChanged(): void {
     this.updateRegion(false);
-    this.updateNameInputPlaceholder();
+    this.updateNameInput();
+  }
+
+  private nameInputChanged(): void {
+    if (!this.defaultNameUpdating)
+      this.defaultName = false;
+  }
+
+  private nameInputInput(): void {
+    if (!this.inputs.name.value) {
+      this.defaultName = true;
+      this.inputs.name.input.focus();
+    }
   }
 
   private updateStartEndInputItems(): void {
@@ -168,9 +181,16 @@ export class GetRegionFuncEditor {
     }
   }
 
-  private updateNameInputPlaceholder(): void {
-    // @ts-ignore
-    this.inputs.name.input.attributes['placeholder'].value = this.getDefaultName();
+  private defaultName: boolean = true;
+  private defaultNameUpdating: boolean = false;
+
+  private updateNameInput(): void {
+    this.defaultNameUpdating = true;
+    try {
+      if (this.defaultName) this.inputs.name.value = this.getDefaultName();
+    } finally {
+      this.defaultNameUpdating = false;
+    }
   }
 
   private getDefaultName(): string {
@@ -192,7 +212,7 @@ export class GetRegionFuncEditor {
       sequence: this.inputs.sequence.value!,
       start: this.getStart(),
       end: this.getEnd(),
-      name: this.getName() ?? this.getDefaultName(),
+      name: this.getName(),
     };
   }
 

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

@@ -144,7 +144,7 @@ export class PositionInfo {
   }
 
   calcScreen(
-    posIdx: number, firstVisiblePosIdx: number,
+    isGap: (m: string) => boolean, posIdx: number, firstVisiblePosIdx: number,
     absoluteMaxHeight: number, heightMode: PositionHeight, alphabetSizeLog: number,
     positionWidthWithMargin: number, positionWidth: number, dpr: number, axisHeight: number
   ): void {
@@ -155,13 +155,13 @@ export class PositionInfo {
 
     const entries = Object.entries(this._freqs)
       .sort((a, b) => {
-        if (a[0] !== '-' && b[0] !== '-')
+        if (!isGap(a[0]) && !isGap(b[0]))
           return b[1].count - a[1].count;
-        else if (a[0] === '-' && b[0] === '-')
+        else if (isGap(a[0]) && isGap(b[0]))
           return 0;
-        else if (a[0] === '-')
+        else if (isGap(a[0]))
           return -1;
-        else /* (b[0] === '-') */
+        else /* (isGap(b[0])) */
           return +1;
       });
     for (const entry of entries) {
@@ -177,10 +177,11 @@ export class PositionInfo {
   }
 
   render(g: CanvasRenderingContext2D,
+    isGap: (m: string) => boolean,
     fontStyle: string, uppercaseLetterAscent: number, uppercaseLetterHeight: number, cp: SeqPalette
   ) {
     for (const [monomer, pmInfo] of Object.entries(this._freqs)) {
-      if (monomer !== '-') {
+      if (!isGap(monomer)) {
         const monomerTxt = monomerToShort(monomer, 5);
         const b = pmInfo.bounds!;
         const left = b.left;
@@ -416,21 +417,33 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   // -- Data --
 
   setData(): void {
-    if (this.viewed) {
-      this.destroyView();
-      this.viewed = false;
-    }
-
-    this.updateSeqCol();
+    if (!this.setDataInProgress) this.setDataInProgress = true; else return;
+    _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.setData() `);
 
-    if (!this.viewed) {
-      this.buildView();
-      this.viewed = true;
-    }
+    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;
+      }
+    }).finally(() => {
+      this.setDataInProgress = false;
+    });
   }
 
   // -- View --
 
+  private viewPromise: Promise<void> = Promise.resolve();
+  private detachPromise: Promise<void> = Promise.resolve();
+  private setDataInProgress: boolean = false;
   private viewSubs: Unsubscribable[] = [];
 
   private async destroyView(): Promise<void> {
@@ -439,7 +452,6 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
 
     const dataFrameTxt = `${this.dataFrame ? 'data' : 'null'}`;
     _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.destroyView( dataFrame = ${dataFrameTxt} ) start`);
-    super.detach();
 
     this.viewSubs.forEach((sub) => sub.unsubscribe());
     this.host!.remove();
@@ -525,8 +537,6 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       }
       if (this.seqCol) {
         try {
-          const units: string = this.seqCol!.getTag(DG.TAGS.UNITS);
-          const separator: string = this.seqCol!.getTag(bioTAGS.separator);
           this.unitsHandler = UnitsHandler.getOrCreate(this.seqCol);
 
           this.cp = pickUpPalette(this.seqCol);
@@ -811,10 +821,18 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
 
   /** Remove all handlers when table is a detach  */
   public override async detach() {
-    if (this.viewed) {
-      this.destroyView();
-      this.viewed = false;
-    }
+    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.viewed) {
+        await this.destroyView();
+        this.viewed = false;
+      }
+      superDetach();
+    });
   }
 
   private _onSizeChanged: Subject<void> = new Subject<void>();
@@ -861,8 +879,10 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   /** Function for removing empty positions */
   protected _removeEmptyPositions() {
     if (this.skipEmptyPositions) {
-      this.positions = wu(this.positions)
-        .filter((pi) => !pi.hasMonomer('-') || pi.getFreq('-').count !== pi.rowCount).toArray();
+      this.positions = wu(this.positions).filter((pi) => {
+        const gapSymbol: string = this.unitsHandler!.defaultGapSymbol;
+        return !pi.hasMonomer(gapSymbol) || pi.getFreq(gapSymbol).count !== pi.rowCount;
+      }).toArray();
     }
   }
 
@@ -899,7 +919,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
         if (dfFilter.get(rowI)) {
           const seqMList: ISeqSplitted = splitted[rowI];
           for (let jPos = 0; jPos < length; ++jPos) {
-            const m: string = seqMList[this.startPosition + jPos] || '-';
+            const m: string = seqMList[this.startPosition + jPos] || this.unitsHandler.defaultGapSymbol;
             const pmInfo = this.positions[jPos].getFreq(m);
             pmInfo.count++;
           }
@@ -908,7 +928,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
 
       //#region Polish freq counts
       for (let jPos = 0; jPos < length; jPos++) {
-        // delete this.positions[jPos].freq['-'];
+        // delete this.positions[jPos].freq[this.unitsHandler.defaultGapSymbol];
         this.positions[jPos].calcHeights(this.positionHeight as PositionHeight);
       }
       //#endregion
@@ -928,7 +948,13 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       const alphabetSizeLog = Math.log2(alphabetSize);
 
       for (let jPos = Math.floor(this.slider.min); jPos <= Math.floor(this.slider.max); ++jPos) {
-        this.positions[jPos].calcScreen(jPos, this.slider.min, absoluteMaxHeight, this.positionHeight,
+        if (!(jPos in this.positions)) {
+          console.warn(`Bio: WebLogoViewer<${this.viewerId}>.render.calculateLayoutInt() ` +
+            `this.positions.length = ${this.positions.length}, jPos = ${jPos}`);
+          continue;
+        }
+        this.positions[jPos].calcScreen((m) => { return this.unitsHandler!.isGap(m); },
+          jPos, this.slider.min, absoluteMaxHeight, this.positionHeight,
           alphabetSizeLog, this._positionWidthWithMargin, this._positionWidth, dpr, positionLabelsHeight);
       }
       _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.calculateLayoutInt(), end `);
@@ -991,7 +1017,8 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       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, fontStyle, uppercaseLetterAscent, uppercaseLetterHeight,
+        this.positions[jPos].render(g, (m) => { return this.unitsHandler!.isGap(m); },
+          fontStyle, uppercaseLetterAscent, uppercaseLetterHeight,
           /* this._positionWidthWithMargin, firstVisiblePosIdx,*/ this.cp);
       }
 
@@ -1040,32 +1067,32 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       this.render(WlRenderLevel.Layout, 'sliderOnValuesChanged').then(() => {});
     } catch (err: any) {
       const errMsg = errorToConsole(err);
-      _package.logger.error('Bio: WebLogoViewer<${this.viewerId}>.sliderOnValuesChanged() error:\n' + errMsg);
+      _package.logger.error(`Bio: WebLogoViewer<${this.viewerId}>.sliderOnValuesChanged() error:\n` + errMsg);
       //throw err; // Do not throw to prevent disabling event handler
     }
   }
 
   private dataFrameFilterOnChanged(_value: any): void {
-    _package.logger.debug('Bio: WebLogoViewer<${this.viewerId}>.dataFrameFilterChanged()');
+    _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.dataFrameFilterChanged()`);
     try {
       this.updatePositions();
       if (this.filterSource === FilterSources.Filtered)
         this.render(WlRenderLevel.Freqs, 'dataFrameFilterOnChanged').then(() => {});
     } catch (err: any) {
       const errMsg = errorToConsole(err);
-      _package.logger.error('Bio: WebLogoViewer<${this.viewerId}>.dataFrameFilterOnChanged() error:\n' + errMsg);
+      _package.logger.error(`Bio: WebLogoViewer<${this.viewerId}>.dataFrameFilterOnChanged() error:\n` + errMsg);
       //throw err; // Do not throw to prevent disabling event handler
     }
   }
 
   private dataFrameSelectionOnChanged(_value: any): void {
-    _package.logger.debug('Bio: WebLogoViewer<${this.viewerId}>.dataFrameSelectionOnChanged()');
+    _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.dataFrameSelectionOnChanged()`);
     try {
       if (this.filterSource === FilterSources.Selected)
         this.render(WlRenderLevel.Freqs, 'dataFrameSelectionOnChanged').then(() => {});
     } catch (err: any) {
       const errMsg = errorToConsole(err);
-      _package.logger.error('Bio: WebLogoViewer<${this.viewerId}>.dataFrameSelectionOnChanged() error:\n' + errMsg);
+      _package.logger.error(`Bio: WebLogoViewer<${this.viewerId}>.dataFrameSelectionOnChanged() error:\n` + errMsg);
       //throw err; // Do not throw to prevent disabling event handler
     }
   }
@@ -1099,7 +1126,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       }
     } catch (err: any) {
       const errMsg = errorToConsole(err);
-      _package.logger.error('Bio: WebLogoViewer<${this.viewerId}>.canvasOnMouseMove() error:\n' + errMsg);
+      _package.logger.error(`Bio: WebLogoViewer<${this.viewerId}>.canvasOnMouseMove() error:\n` + errMsg);
       //throw err; // Do not throw to prevent disabling event handler
     }
   }
@@ -1122,7 +1149,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       }
     } catch (err: any) {
       const errMsg = errorToConsole(err);
-      _package.logger.error('Bio: WebLogoViewer<${this.viewerId}>.canvasOnMouseDown() error:\n' + errMsg);
+      _package.logger.error(`Bio: WebLogoViewer<${this.viewerId}>.canvasOnMouseDown() error:\n` + errMsg);
       //throw err; // Do not throw to prevent disabling event handler
     }
   }
@@ -1136,7 +1163,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       this.slider.scrollBy(this.slider.min + countOfScrollPositions);
     } catch (err: any) {
       const errMsg = errorToConsole(err);
-      _package.logger.error('Bio: WebLogoViewer<${this.viewerId}>.canvasOnWheel() error:\n' + errMsg);
+      _package.logger.error(`Bio: WebLogoViewer<${this.viewerId}>.canvasOnWheel() error:\n` + errMsg);
       //throw err; // Do not throw to prevent disabling event handler
     }
   }
@@ -1161,7 +1188,7 @@ export function checkSeqForMonomerAtPos(
 ): boolean {
   const seqMList: ISeqSplitted = unitsHandler.splitted[rowI];
   const seqM = at.pos < seqMList.length ? seqMList[at.pos] : null;
-  return ((seqM === monomer) || (seqM === '' && monomer === '-'));
+  return ((seqM === monomer) || (seqM === '' && monomer === unitsHandler.defaultGapSymbol));
 }
 
 export function countForMonomerAtPosition(