@datagrok/bio 2.11.42 → 2.12.1

package/src/utils/poly-tool/ui.ts

@@ -5,144 +5,55 @@ import * as DG from 'datagrok-api/dg';
 
 import {addTransformedColumn} from './transformation';
 import {RULES_PATH, RULES_STORAGE_NAME} from './transformation';
+import {ActiveFiles} from '@datagrok-libraries/utils/src/settings/active-files-base';
 
-export type UserRuleSettings = {
-  included: string[],
-  notIncluded: string[],
-}
-
-async function getAllAvailableRuleFiles(): Promise<string[]> {
-  const list = await grok.dapi.files.list(RULES_PATH);
-  const paths = list.map((fileInfo) => {
-    return fileInfo.fullPath;
-  });
-
-  return paths;
-}
-
-async function getUserRulesSettings(): Promise<UserRuleSettings> {
-  const resStr: string = await grok.dapi.userDataStorage.getValue(RULES_STORAGE_NAME, 'Settings', true);
-  const res = resStr ? JSON.parse(resStr) : {included: [], enotIncludedxplicit: []};
-
-  res.included = res.included instanceof Array ? res.included : [];
-  res.notIncluded = res.notIncluded instanceof Array ? res.notIncluded : [];
-
-  return res!;
-}
-
-async function setUserLibSettings(value: UserRuleSettings): Promise<void> {
-  await grok.dapi.userDataStorage.postValue(RULES_STORAGE_NAME, 'Settings', JSON.stringify(value), true);
-}
-
-export class PolyTool {
-  ruleFiles: string[];
-  userRuleSettings: UserRuleSettings;
-  ruleFilesInputs: HTMLDivElement;// DG.InputBase<boolean | null>[];
-  dialog: DG.Dialog;
-
-  constructor() {
-    this.ruleFiles = [];
-    this.userRuleSettings = {included: [], notIncluded: []};
-  }
-
-  private updateRulesSelectionStatus(ruleFileName: string, isSelected: boolean): void {
-    const isRuleFileSelected = this.userRuleSettings.included.includes(ruleFileName);
-
-    if (!isRuleFileSelected && isSelected) {
-      this.userRuleSettings.included.push(ruleFileName);
-      this.userRuleSettings.included = this.userRuleSettings.included.sort();
-
-      const index = this.userRuleSettings.notIncluded.indexOf(ruleFileName);
-      if (index > -1)
-        this.userRuleSettings.notIncluded.splice(index, 1);
-    } else {
-      const index = this.userRuleSettings.included.indexOf(ruleFileName);
-      if (index > -1)
-        this.userRuleSettings.included.splice(index, 1);
-
-      this.userRuleSettings.notIncluded.push(ruleFileName);
-      this.userRuleSettings.notIncluded = this.userRuleSettings.notIncluded.sort();
-    }
-
-    setUserLibSettings(this.userRuleSettings);
+class RuleInputs extends ActiveFiles {
+  constructor(path: string, userStorageName: string, ext: string ) {
+    super(path, userStorageName, ext);
   }
+}
 
-  private getAddButton(): HTMLButtonElement {
-    return ui.button('ADD RULES', () => {
-      DG.Utils.openFile({
-        accept: '.csv',
-        open: async (selectedFile) => {
-          const content = await selectedFile.text();
-          await grok.dapi.files.writeAsText(RULES_PATH + `${selectedFile.name}`, content);
-          this.updateRulesSelectionStatus(selectedFile.name, false);
-          const cb = ui.boolInput(
-            selectedFile.name,
-            false,
-            (isSelected: boolean) => this.updateRulesSelectionStatus(RULES_PATH + `${selectedFile.name}`, isSelected)
-          );
-          this.ruleFilesInputs.append(cb.root);
-        },
-      });
+export async function getPolyToolDialog(): Promise<DG.Dialog> {
+  const targetColumns = grok.shell.t.columns.bySemTypeAll(DG.SEMTYPE.MACROMOLECULE);
+  if (!targetColumns)
+    throw new Error('No dataframe with macromolecule columns open');
+
+  const targetColumnInput = ui.columnInput(
+    'Column', grok.shell.t, targetColumns[0], null,
+    {filter: (col: DG.Column) => col.semType === DG.SEMTYPE.MACROMOLECULE}
+  );
+
+  const generateHelmChoiceInput = ui.boolInput('Get HELM', true);
+  ui.tooltip.bind(generateHelmChoiceInput.root, 'Add HELM column');
+
+  const chiralityEngineInput = ui.boolInput('Chirality engine', false);
+  const ruleInputs = new RuleInputs(RULES_PATH, RULES_STORAGE_NAME, '.csv');
+  const rulesForm = await ruleInputs.getForm();
+
+  const div = ui.div([
+    targetColumnInput,
+    generateHelmChoiceInput,
+    chiralityEngineInput,
+    'Rules used',
+    rulesForm
+  ]);
+
+  const dialog = ui.dialog('Poly Tool')
+    .add(div)
+    .onOK(async () => {
+      const molCol = targetColumnInput.value;
+      if (!molCol) {
+        grok.shell.warning('No marcomolecule column chosen!');
+        return;
+      }
+
+      const files = await ruleInputs.getActive();
+
+      addTransformedColumn(molCol!,
+        generateHelmChoiceInput.value!,
+        files,
+        chiralityEngineInput.value!);
     });
-  }
-
-  private async getRuleFilesBlock(): Promise<DG.InputBase<boolean | null>[]> {
-    this.ruleFiles = await getAllAvailableRuleFiles();
-    this.userRuleSettings = await getUserRulesSettings();
-    const cBoxes: DG.InputBase<boolean | null>[] = [];
-
-    for (let i = 0; i < this.ruleFiles.length; i++) {
-      const ruleFileName = this.ruleFiles[i];
-      const isRuleFileSelected = this.userRuleSettings.included.includes(ruleFileName);
-      const cb = ui.boolInput(
-        ruleFileName.replace(RULES_PATH, ''),
-        isRuleFileSelected,
-        (isSelected: boolean) => this.updateRulesSelectionStatus(ruleFileName, isSelected)
-      );
-
-      cBoxes.push(cb);
-    }
-    return cBoxes;
-  }
 
-  async getPolyToolDialog(): Promise<DG.Dialog> {
-    const targetColumns = grok.shell.t.columns.bySemTypeAll(DG.SEMTYPE.MACROMOLECULE);
-    if (!targetColumns)
-      throw new Error('No dataframe with macromolecule columns open');
-
-    const targetColumnInput = ui.columnInput(
-      'Column', grok.shell.t, targetColumns[0], null,
-      {filter: (col: DG.Column) => col.semType === DG.SEMTYPE.MACROMOLECULE}
-    );
-
-    const generateHelmChoiceInput = ui.boolInput('Get HELM', true);
-    ui.tooltip.bind(generateHelmChoiceInput.root, 'Add HELM column');
-
-    const addButton = this.getAddButton();
-    this.ruleFilesInputs = ui.div(await this.getRuleFilesBlock());
-    //const rulesFiles = ui.div(this.ruleFilesInputs);
-    const chiralityEngineInput = ui.boolInput('Chirality engine', false);
-
-    const div = ui.div([
-      targetColumnInput,
-      generateHelmChoiceInput,
-      chiralityEngineInput,
-      'Rules used',
-      this.ruleFilesInputs,
-      addButton
-    ]);
-
-    this.dialog = ui.dialog('Poly Tool')
-      .add(div)
-      .onOK(async () => {
-        const molCol = targetColumnInput.value;
-        if (!molCol) {
-          grok.shell.warning('No marcomolecule column chosen!');
-          return;
-        }
-        addTransformedColumn(molCol!, generateHelmChoiceInput.value!, this.userRuleSettings.included, chiralityEngineInput.value!);
-      });
-
-    return this.dialog;
-  }
+  return dialog;
 }

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

@@ -3,8 +3,8 @@ import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
 
 import wu from 'wu';
-import {splitterAsFasta, SplitterFunc} from '@datagrok-libraries/bio/src/utils/macromolecule';
-import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {SeqHandler} from '@datagrok-libraries/bio/src/utils/seq-handler';
+import {ISeqSplitted} from '@datagrok-libraries/bio/src/utils/macromolecule/types';
 
 const FASTA_LINE_WIDTH = 60;
 
@@ -28,8 +28,8 @@ export function saveAsFastaUI() {
     .filter((gc: DG.GridColumn) => {
       const col: DG.Column | null = gc.column;
       if (col && col.semType === DG.SEMTYPE.MACROMOLECULE) {
-        const uh = UnitsHandler.getOrCreate(col);
-        return uh.isFasta();
+        const sh = SeqHandler.forColumn(col);
+        return sh.isFasta();
       }
       return false;
     }).toArray();
@@ -77,17 +77,16 @@ export function saveAsFastaUI() {
 export function saveAsFastaDo(
   idColList: DG.Column[], seqCol: DG.Column, lineWidth: number = FASTA_LINE_WIDTH, lineSeparator: string = '\n',
 ): string {
-  const splitter: SplitterFunc = splitterAsFasta;
-
+  const sh = SeqHandler.forColumn(seqCol);
   const fastaLines: string[] = [];
 
-  for (let rowI: number = 0; rowI < seqCol.length; rowI++) {
+  for (let rowIdx: number = 0; rowIdx < seqCol.length; rowIdx++) {
     // 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);
+    const seqId: string = idColList.map((col) => col.get(rowIdx).toString()).join('|');
+    const srcSS = sh.getSplitted(rowIdx);
+    const seqLineList: string[] = wrapSequence(srcSS, lineWidth);
 
     fastaLines.push(`>${seqId}${lineSeparator}`);
     for (const line of seqLineList)
@@ -99,16 +98,16 @@ export function saveAsFastaDo(
 }
 
 /* split sequence for monomers to prevent wrapping monomer partially */
-export function wrapSequence(seq: string, splitter: SplitterFunc, lineWidth: number = FASTA_LINE_WIDTH): string[] {
-  const seqMonomerList = splitter(seq);
+export function wrapSequence(srcSS: ISeqSplitted, lineWidth: number = FASTA_LINE_WIDTH): string[] {
   let seqPos: number = 0;
-  const seqLength: number = seqMonomerList.length;
+  const seqLength: number = srcSS.length;
 
   const seqLineList: string[] = [];
   while (seqPos < seqLength) {
     /* join sliced monomer into line */
-    const seqLine: string[] = wu(seqMonomerList).slice(seqPos, seqPos + lineWidth).toArray();
-    const seqLineTxt: string = seqLine.map((m) => m.length > 1 ? `[${m}]` : m).join('');
+    const seqLine = wu(srcSS.originals).slice(seqPos, seqPos + lineWidth).toArray();
+    const seqLineTxt: string = seqLine.map((om) => om.length > 1 ? `[${om}]` : om)
+      .reduce((a, b) => a + b, '');
     seqLineList.push(seqLineTxt);
     seqPos += seqLine.length;
   }

package/src/utils/sequence-to-mol.ts

@@ -8,7 +8,7 @@ import {helm2mol} from './helm-to-molfile';
 import {IMonomerLib} from '@datagrok-libraries/bio/src/types';
 import {checkInputColumnUI} from './check-input-column';
 import {getMonomerLibHelper} from '../package';
-import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {SeqHandler} from '@datagrok-libraries/bio/src/utils/seq-handler';
 import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
 
 export async function sequenceToMolfile(df: DG.DataFrame, macroMolecule: DG.Column, nonlinear: boolean): Promise<void> {
@@ -17,9 +17,9 @@ export async function sequenceToMolfile(df: DG.DataFrame, macroMolecule: DG.Colu
     return;
   }
   if (nonlinear) {
-    const seqUh = UnitsHandler.getOrCreate(macroMolecule);
-    if (!seqUh.isHelm())
-      macroMolecule = seqUh.convert(NOTATION.HELM);
+    const seqSh = SeqHandler.forColumn(macroMolecule);
+    if (!seqSh.isHelm())
+      macroMolecule = seqSh.convert(NOTATION.HELM);
     helm2mol(df, macroMolecule);
     return;
   }

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

@@ -6,7 +6,7 @@ import $ from 'cash-dom';
 import wu from 'wu';
 import {fromEvent, Observable, Subject, Unsubscribable} from 'rxjs';
 
-import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {SeqHandler} from '@datagrok-libraries/bio/src/utils/seq-handler';
 import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
 import {
   monomerToShort, pickUpPalette, pickUpSeqCol, TAGS as bioTAGS, positionSeparator
@@ -17,8 +17,7 @@ import {
 } from '@datagrok-libraries/bio/src/viewers/web-logo';
 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 '@datagrok-libraries/bio/src/utils/err-info';
+import {GAP_SYMBOL, ISeqSplitted} from '@datagrok-libraries/bio/src/utils/macromolecule/types';
 import {testEvent} from '@datagrok-libraries/utils/src/test';
 import {PromiseSyncer} from '@datagrok-libraries/bio/src/utils/syncer';
 
@@ -26,7 +25,6 @@ import {AggFunc, getAgg} from '../utils/agg';
 import {buildCompositionTable} from '../widgets/composition-analysis-widget';
 
 import {_package} from '../package';
-import {GAP_SYMBOL} from '../const';
 
 declare global {
   interface HTMLCanvasElement {
@@ -168,8 +166,7 @@ export class PositionInfo {
     }
   }
 
-  calcScreen(
-    isGap: (m: string) => boolean, posIdx: number, firstVisiblePosIdx: number,
+  calcScreen(posIdx: number, firstVisiblePosIdx: number,
     absoluteMaxHeight: number, heightMode: PositionHeight, alphabetSizeLog: number,
     positionWidthWithMargin: number, positionWidth: number, dpr: number, positionLabelsHeight: number
   ): void {
@@ -180,13 +177,13 @@ export class PositionInfo {
 
     const entries = Object.entries(this._freqs)
       .sort((a, b) => {
-        if (!isGap(a[0]) && !isGap(b[0]))
+        if (a[0] !== GAP_SYMBOL && b[0] !== GAP_SYMBOL)
           return b[1].value - a[1].value;
-        else if (isGap(a[0]) && isGap(b[0]))
+        else if (a[0] === GAP_SYMBOL && b[0] === GAP_SYMBOL)
           return 0;
-        else if (isGap(a[0]))
+        else if (a[0] === GAP_SYMBOL)
           return -1;
-        else /* (isGap(b[0])) */
+        else /* (b[0] === GAP_SYMBOL) */
           return +1;
       });
     for (const [_m, pmi] of entries) {
@@ -200,11 +197,10 @@ 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 (!isGap(monomer)) {
+      if (monomer !== GAP_SYMBOL) {
         const monomerTxt = monomerToShort(monomer, 5);
         const b = pmInfo.bounds!;
         const left = b.left;
@@ -303,7 +299,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
 
   private viewed: boolean = false;
 
-  private unitsHandler: UnitsHandler | null;
+  private seqHandler: SeqHandler | null;
   private initialized: boolean = false;
 
   // private readonly colorScheme: ColorScheme = ColorSchemes[NucleotidesWebLogo.residuesSet];
@@ -373,7 +369,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   }
 
   public get positionMarginValue(): number {
-    if (this.positionMarginState === PositionMarginStates.AUTO && this.unitsHandler!.getAlphabetIsMultichar() === true)
+    if (this.positionMarginState === PositionMarginStates.AUTO && this.seqHandler!.getAlphabetIsMultichar() === true)
       return this.positionMargin;
     else if (this.positionMarginState === PositionMarginStates.ON)
       return this.positionMargin;
@@ -385,7 +381,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     super();
 
     this.textBaseline = 'top';
-    this.unitsHandler = null;
+    this.seqHandler = null;
 
     // -- Data --
     this.sequenceColumnName = this.string(PROPS.sequenceColumnName, defaults.sequenceColumnName,
@@ -589,7 +585,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       }
       if (this.seqCol) {
         try {
-          this.unitsHandler = UnitsHandler.getOrCreate(this.seqCol);
+          this.seqHandler = SeqHandler.forColumn(this.seqCol);
 
           this.palette = pickUpPalette(this.seqCol);
           this.render(WlRenderLevel.Freqs, 'updateSeqCol()');
@@ -600,7 +596,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
           throw err;
         }
         if (!this.seqCol) {
-          this.unitsHandler = null;
+          this.seqHandler = null;
           this.positionNames = [];
           this.positionLabels = [];
           this.startPosition = -1;
@@ -817,6 +813,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     case PROPS.sequenceColumnName:
       this.updateSeqCol();
       break;
+    case PROPS.sequenceColumnName:
     case PROPS.startPositionName:
     case PROPS.endPositionName:
     case PROPS.filterSource:
@@ -956,9 +953,10 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       // region updatePositions
 
       const dfFilter = this.getFilter();
-      const maxLength: number = dfFilter.trueCount === 0 ? this.unitsHandler!.maxLength :
-        wu.enumerate(this.unitsHandler!.splitted).map(([mList, rowI]) => {
-          return dfFilter.get(rowI) && !!mList ? mList.length : 0;
+      const maxLength: number = dfFilter.trueCount === 0 ? this.seqHandler!.maxLength :
+        wu.count(0).take(this.seqHandler!.length).map((rowIdx) => {
+          const mList = this.seqHandler!.getSplitted(rowIdx);
+          return dfFilter.get(rowIdx) && !!mList ? mList.length : 0;
         }).reduce((max, l) => Math.max(max, l), 0);
 
       /** positionNames and positionLabel can be set up through the column's tags only */
@@ -979,7 +977,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       // endregion updatePositions
 
       const length: number = this.startPosition <= this.endPosition ? this.endPosition - this.startPosition + 1 : 0;
-      this.unitsHandler = UnitsHandler.getOrCreate(this.seqCol);
+      this.seqHandler = SeqHandler.forColumn(this.seqCol);
       const posCount: number = this.startPosition <= this.endPosition ? this.endPosition - this.startPosition + 1 : 0;
       this.positions = new Array(posCount);
       for (let jPos = 0; jPos < length; jPos++) {
@@ -991,18 +989,16 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
 
       // 2022-05-05 askalkin instructed to show WebLogo based on filter (not selection)
       const dfRowCount = this.dataFrame.rowCount;
-      const splitted = this.unitsHandler.splitted;
 
       for (let jPos = 0; jPos < length; ++jPos) {
+        const pi = this.positions[jPos];
         // Here we want to build lists of values for every monomer in position jPos
         for (let rowI = 0; rowI < dfRowCount; ++rowI) {
           if (dfFilter.get(rowI)) {
-            const seqMList: ISeqSplitted = splitted[rowI];
-            const om: string = seqMList[this.startPosition + jPos] || this.unitsHandler.defaultGapSymbol;
-            const cm: string = this.unitsHandler?.defaultGapSymbol === om ? GAP_SYMBOL : om;
-            const pi = this.positions[jPos];
-            const pmi = pi.getFreq(cm);
             ++pi.sumRowCount;
+            const seqMList: ISeqSplitted = this.seqHandler.getSplitted(rowI);
+            const cm: string = seqMList.getCanonical(this.startPosition + jPos);
+            const pmi = pi.getFreq(cm);
             pmi.value = ++pmi.rowCount;
           }
         }
@@ -1019,10 +1015,10 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
 
         for (let rowI = 0; rowI < dfRowCount; ++rowI) {
           if (dfFilter.get(rowI)) { // respect the filter
-            const seqMList: ISeqSplitted = splitted[rowI];
-            const m: string = seqMList[this.startPosition + jPos] || this.unitsHandler.defaultGapSymbol;
+            const seqMList: ISeqSplitted = this.seqHandler.getSplitted(rowI);
+            const cm: string = seqMList.getCanonical(this.startPosition + jPos);
             const value: number | null = valueCol.get(rowI);
-            this.positions[jPos].getFreq(m).push(value);
+            this.positions[jPos].getFreq(cm).push(value);
           }
         }
         this.positions[jPos].aggregate(this.valueAggrType);
@@ -1061,7 +1057,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
             `this.positions.length = ${this.positions.length}, jPos = ${jPos}`);
           continue;
         }
-        this.positions[jPos].calcScreen((m) => { return this.unitsHandler!.isGap(m); },
+        this.positions[jPos].calcScreen(
           jPos, this.slider.min, absoluteMaxHeight, this.positionHeight,
           alphabetSizeLog, this._positionWidthWithMargin, this._positionWidth, dpr, positionLabelsHeight);
       }
@@ -1117,10 +1113,8 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       // Hacks to scale uppercase characters to target rectangle
       const uppercaseLetterAscent = 0.25;
       const uppercaseLetterHeight = 12.2;
-      for (let jPos = firstPos; jPos <= lastPos; jPos++) {
-        this.positions[jPos].render(g, (m) => { return this.unitsHandler!.isGap(m); },
-          fontStyle, uppercaseLetterAscent, uppercaseLetterHeight, this.palette);
-      }
+      for (let jPos = firstPos; jPos <= lastPos; jPos++)
+        this.positions[jPos].render(g, fontStyle, uppercaseLetterAscent, uppercaseLetterHeight, this.palette);
     } finally {
       g.restore();
     }
@@ -1135,18 +1129,16 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       return;
     }
     this.requestedRenderLevel = WlRenderLevel.None;
-    this.renderInt(renderLevel)
-      .catch((err: any) => {
-        const [errMsg, errStack] = errInfo(err);
-        _package.logger.error(errMsg, undefined, errStack);
-      });
+    this.viewSyncer.sync(logPrefix, async () => {
+      await this.renderInt(renderLevel);
+    });
   }
 
   private _lastWidth: number;
   private _lastHeight: number;
 
   public getAlphabetSize(): number {
-    return this.unitsHandler?.getAlphabetSize() ?? 0;
+    return this.seqHandler?.getAlphabetSize() ?? 0;
   }
 
   // -- Handle events --
@@ -1212,10 +1204,10 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
           tooltipRows.push(pi.buildCompositionTable(this.palette!));
         const tooltipEl = ui.divV(tooltipRows);
         ui.tooltip.show(tooltipEl, args.x + 16, args.y + 16);
-      } else if (pi !== null && monomer && this.dataFrame && this.seqCol && this.unitsHandler) {
+      } else if (pi !== null && monomer && this.dataFrame && this.seqCol && this.seqHandler) {
         // Monomer at position tooltip
         // const monomerAtPosSeqCount = countForMonomerAtPosition(
-        //   this.dataFrame, this.unitsHandler!, this.getFilter(), monomer, atPI);
+        //   this.dataFrame, this.seqHandler!, this.getFilter(), monomer, atPI);
         const pmi = pi.getFreq(monomer);
 
         const tooltipRows = [
@@ -1243,10 +1235,10 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       const [pi, monomer] = this.getMonomer(this.canvas.getCursorPosition(args, dpr), dpr);
 
       // prevents deselect all rows if we miss monomer bounds
-      if (pi !== null && monomer !== null && this.dataFrame && this.seqCol && this.unitsHandler) {
+      if (pi !== null && monomer !== null && this.dataFrame && this.seqCol && this.seqHandler) {
         // Calculate a new BitSet object for selection to prevent interfering with existing
         const selBS: DG.BitSet = DG.BitSet.create(this.dataFrame.selection.length, (rowI: number) => {
-          return checkSeqForMonomerAtPos(this.dataFrame, this.unitsHandler!, this.getFilter(), rowI, monomer, pi);
+          return checkSeqForMonomerAtPos(this.dataFrame, this.seqHandler!, this.getFilter(), rowI, monomer, pi);
         });
         this.dataFrame.selection.init((i) => selBS.get(i));
       }
@@ -1281,8 +1273,8 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     const callLog = `invalidate(${caller ? ` <- ${caller} ` : ''})`;
     const logPrefix = `${this.viewerToLog()}.${callLog}`;
     // Put the event trigger in the tail of the synced calls queue.
+    this.render(WlRenderLevel.None, callLog); // Put render request to the syncer
     this.viewSyncer.sync(`${logPrefix}`, async () => {
-      this.render(WlRenderLevel.None, callLog);
       this._onRendered.next();
     });
   }
@@ -1333,23 +1325,23 @@ function renderPositionLabels(g: CanvasRenderingContext2D,
 }
 
 export function checkSeqForMonomerAtPos(
-  df: DG.DataFrame, unitsHandler: UnitsHandler, filter: DG.BitSet, rowI: number, monomer: string, at: PositionInfo,
+  df: DG.DataFrame, sh: SeqHandler, filter: DG.BitSet, rowI: number, monomer: string, at: PositionInfo,
 ): boolean {
-  const seqMList: ISeqSplitted = unitsHandler.splitted[rowI];
-  const seqM = at.pos < seqMList.length ? seqMList[at.pos] : null;
-  return ((seqM === monomer) || (seqM === '' && monomer === unitsHandler.defaultGapSymbol));
+  const seqMList: ISeqSplitted = sh.getSplitted(rowI);
+  const seqCM: string | null = at.pos < seqMList.length ? seqMList.getCanonical(at.pos) : null;
+  return seqCM !== null && seqCM === monomer;
 }
 
 export function countForMonomerAtPosition(
-  df: DG.DataFrame, uh: UnitsHandler, filter: DG.BitSet, monomer: string, at: PositionInfo
+  df: DG.DataFrame, sh: SeqHandler, filter: DG.BitSet, monomer: string, at: PositionInfo
 ): number {
   let count = 0;
   let rowI = -1;
   while ((rowI = filter.findNext(rowI, true)) != -1) {
-    const seqMList: ISeqSplitted = uh.splitted[rowI];
+    const seqMList: ISeqSplitted = sh.getSplitted(rowI);
     const seqMPos: number = at.pos;
-    const seqM: string | null = seqMPos < seqMList.length ? seqMList[seqMPos] : null;
-    if (seqM === monomer) count++;
+    const seqCM: string | null = seqMPos < seqMList.length ? seqMList.getCanonical(seqMPos) : null;
+    if (seqCM !== null && seqCM === monomer) count++;
   }
   return count;
 }