@datagrok/peptides 1.0.0 → 1.1.0

package/src/model.ts

@@ -2,25 +2,23 @@ import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
+import {splitAlignedSequences} from '@datagrok-libraries/bio/src/utils/splitter';
+
 import {Subject, Observable} from 'rxjs';
-import {addViewerToHeader, StackedBarChart} from './viewers/stacked-barchart-viewer';
-import {tTest} from '@datagrok-libraries/statistics/src/tests';
-import {fdrcorrection} from '@datagrok-libraries/statistics/src/multiple-tests';
-import {ChemPalette} from './utils/chem-palette';
-import {MonomerLibrary} from './monomer-library';
 import * as C from './utils/constants';
 import * as type from './utils/types';
-import {FilteringStatistics} from './utils/filtering-statistics';
-import {getSeparator, getTypedArrayConstructor, stringToBool} from './utils/misc';
-import {_package} from './package';
-import {SARViewer, SARViewerVertical} from './viewers/sar-viewer';
+import {calculateBarsData, getTypedArrayConstructor, scaleActivity} from './utils/misc';
+import {SARViewer, SARViewerBase, SARViewerVertical} from './viewers/sar-viewer';
 import {PeptideSpaceViewer} from './viewers/peptide-space-viewer';
-import {setAARRenderer} from './utils/cell-renderer';
+import {renderBarchart, renderSARCell, setAARRenderer} from './utils/cell-renderer';
 import {substitutionsWidget} from './widgets/subst-table';
-import {getDistributionWidget} from './widgets/distribution';
+import {getDistributionAndStats, getDistributionWidget} from './widgets/distribution';
+import {getStats, Stats} from './utils/filtering-statistics';
+import * as rxjs from 'rxjs';
+
 
 export class PeptidesModel {
-  static _modelName = 'peptidesModel';
+  static modelName = 'peptidesModel';
 
   _statsDataFrameSubject = new Subject<DG.DataFrame>();
   _sarGridSubject = new Subject<DG.Grid>();
@@ -32,49 +30,41 @@ export class PeptidesModel {
   isBitsetChangedInitialized = false;
   isCellChanging = false;
 
-  //viewer properties
-  _filterMode!: boolean;
-  _twoColorMode!: boolean;
-  _activityScaling!: string;
-  _isSubstitutionOn!: boolean;
-  _activityLimit!: number;
-  _maxSubstitutions!: number;
-
   _sarGrid!: DG.Grid;
   _sarVGrid!: DG.Grid;
   _sourceGrid!: DG.Grid;
-  _dataFrame: DG.DataFrame;
+  df: DG.DataFrame;
   splitCol!: DG.Column<boolean>;
-  stackedBarchart!: StackedBarChart;
   edf: DG.DataFrame | null = null;
-
+  statsDf!: DG.DataFrame;
+  _currentSelection!: type.SelectionObject;
   substitutionsInfo: type.SubstitutionsInfo = new Map();
-  isInitialized: boolean = false;
+  isInitialized = false;
   currentView!: DG.TableView;
 
-  _currentSelection!: type.SelectionObject;
-  isPeptideSpaceChangingBitset: boolean = false;
-  isChangingEdfBitset: boolean = false;
+  isPeptideSpaceChangingBitset = false;
+  isChangingEdfBitset = false;
+
+  sarViewer!: SARViewer;
+  sarViewerVertical!: SARViewerVertical;
+
+  _usedProperties: {[propName: string]: string | number | boolean} = {};
+  monomerMap: {[key: string]: {molfile: string, fullName: string}} = {};
+  barData: type.MonomerDfStats = {};
+  barsBounds: {[position: string]: type.BarCoordinates} = {};
+  cachedBarchartTooltip: {bar: string, tooltip: null | HTMLDivElement} = {bar: '', tooltip: null};
+  monomerLib: any;
 
   private constructor(dataFrame: DG.DataFrame) {
-    this._dataFrame = dataFrame;
-    this.updateProperties();
+    this.df = dataFrame;
   }
 
-  static async getInstance(dataFrame: DG.DataFrame, dgPackage?: DG.Package): Promise<PeptidesModel> {
-    if (dataFrame.temp[MonomerLibrary.id] === null) {
-      const sdf = await (dgPackage ?? _package).files.readAsText('HELMMonomers_June10.sdf');
-      dataFrame.temp[MonomerLibrary.id] ??= new MonomerLibrary(sdf);
-    }
+  static async getInstance(dataFrame: DG.DataFrame): Promise<PeptidesModel> {
     dataFrame.temp[PeptidesModel.modelName] ??= new PeptidesModel(dataFrame);
     await (dataFrame.temp[PeptidesModel.modelName] as PeptidesModel).init();
     return dataFrame.temp[PeptidesModel.modelName] as PeptidesModel;
   }
 
-  static get modelName(): string {return PeptidesModel._modelName;}
-
-  static get chemPalette(): typeof ChemPalette {return ChemPalette;}
-
   get onStatsDataFrameChanged(): Observable<DG.DataFrame> {return this._statsDataFrameSubject.asObservable();}
 
   get onSARGridChanged(): Observable<DG.Grid> {return this._sarGridSubject.asObservable();}
@@ -84,13 +74,41 @@ export class PeptidesModel {
   get onSubstTableChanged(): Observable<type.SubstitutionsInfo> {return this._substitutionTableSubject.asObservable();}
 
   get currentSelection(): type.SelectionObject {
-    this._currentSelection ??= JSON.parse(this._dataFrame.tags[C.TAGS.SELECTION] || '{}');
+    this._currentSelection ??= JSON.parse(this.df.tags[C.TAGS.SELECTION] || '{}');
     return this._currentSelection;
   }
   set currentSelection(selection: type.SelectionObject) {
     this._currentSelection = selection;
-    this._dataFrame.tags[C.TAGS.SELECTION] = JSON.stringify(selection);
+    this.df.tags[C.TAGS.SELECTION] = JSON.stringify(selection);
     this.invalidateSelection();
+    this.barData = calculateBarsData(this.df.columns.bySemTypeAll(C.SEM_TYPES.MONOMER), this.df.selection);
+  }
+
+  get usedProperties(): {[propName: string]: string | number | boolean} {
+    this._usedProperties = JSON.parse(this.df.tags['sarProperties'] ?? '{}');
+    return this._usedProperties;
+  }
+  set usedProperties(properties: {[propName: string]: string | number | boolean}) {
+    this.df.tags['sarProperties'] = JSON.stringify(properties);
+    this._usedProperties = properties;
+  }
+
+  get splitByPos(): boolean {
+    const splitByPosFlag = (this.df.tags['distributionSplit'] ?? '00')[0];
+    return splitByPosFlag == '1' ? true : false;
+  }
+  set splitByPos(flag: boolean) {
+    const splitByAARFlag = (this.df.tags['distributionSplit'] ?? '00')[1];
+    this.df.tags['distributionSplit'] = `${flag ? 1 : 0}${splitByAARFlag}`;
+  }
+
+  get splitByAAR(): boolean {
+    const splitByPosFlag = (this.df.tags['distributionSplit'] ?? '00')[1];
+    return splitByPosFlag == '1' ? true : false;
+  }
+  set splitByAAR(flag: boolean) {
+    const splitByAARFlag = (this.df.tags['distributionSplit'] ?? '00')[0];
+    this.df.tags['distributionSplit'] = `${splitByAARFlag}${flag ? 1 : 0}`;
   }
 
   invalidateSelection(): void {
@@ -98,200 +116,173 @@ export class PeptidesModel {
     this.invalidateGrids();
   }
 
-  createAccordion() {
-    const acc = ui.accordion('Selection info');
+  createAccordion(): DG.Accordion {
+    const acc = ui.accordion();
     acc.root.style.width = '100%';
-    acc.addTitle(ui.h1('Selection info'));
-    acc.addPane('Substitutions', () => substitutionsWidget(this._dataFrame, this).root, true);
-    acc.addPane('Distribtution', () => getDistributionWidget(this._dataFrame).root, true);
+    acc.addTitle(ui.h1(`${this.df.selection.trueCount} selected rows`));
+    acc.addPane('Substitutions', () => substitutionsWidget(this.df, this).root, true);
+    acc.addPane('Distribtution', () => getDistributionWidget(this.df, this).root, true);
 
     return acc;
   }
 
-  updateProperties(): void {
-    this._activityScaling = this._dataFrame.tags['scaling'];
-    this._filterMode = stringToBool(this._dataFrame.tags['filterMode']);
-    this._twoColorMode = stringToBool(this._dataFrame.tags['bidirectionalAnalysis']);
-    this._isSubstitutionOn = stringToBool(this._dataFrame.tags['showSubstitution']);
-    this._maxSubstitutions = parseInt(this._dataFrame.tags['maxSubstitutions']);
-    this._activityLimit = parseFloat(this._dataFrame.tags['activityLimit']);
+  getViewer(): SARViewerBase {
+    const viewer = this.sarViewer ?? this.sarViewerVertical;
+    if (!viewer)
+      throw new Error('ViewerError: none of the SAR viewers is initialized');
+    return viewer;
   }
 
-  setProperties(
-    activityScaling: string, filterMode: boolean, twoColorMode: boolean, isSubstitutionOn: boolean,
-    maxSubstitutions: number, activityLimit: number, forceUpdate = false,
-  ): void {
-    const chooseAction =
-      (value: string, defaultValue: string | boolean | number): string | boolean | number =>
-        forceUpdate ? value : defaultValue ?? value;
-    this._dataFrame.tags['scaling'] = chooseAction(`${activityScaling}`, this._dataFrame.tags['scaling']);
-    this._dataFrame.tags['filterMode'] = chooseAction(`${filterMode}`, this._dataFrame.tags['filterMode']);
-    this._dataFrame.tags['bidirectionalAnalysis'] =
-      chooseAction(`${twoColorMode}`, this._dataFrame.tags['bidirectionalAnalysis']);
-    this._dataFrame.tags['showSubstitution'] =
-      chooseAction(`${isSubstitutionOn}`, this._dataFrame.tags['showSubstitution']);
-    this._dataFrame.tags['maxSubstitutions'] =
-      chooseAction(`${maxSubstitutions}`, this._dataFrame.tags['maxSubstitutions']);
-    this._dataFrame.tags['activityLimit'] = chooseAction(`${activityLimit}`, this._dataFrame.tags['activityLimit']);
-
-    this.updateProperties();
-  }
+  isPropertyChanged(viewer: SARViewerBase): boolean {
+    let result = false;
+    if (typeof viewer == 'undefined')
+      return result;
 
-  async updateData(
-    activityScaling?: string, sourceGrid?: DG.Grid, twoColorMode?: boolean, activityLimit?: number,
-    maxSubstitutions?: number, isSubstitutionOn?: boolean, filterMode?: boolean,
-  ): Promise<void> {
-    //FIXME: threre are too many assignments, some are duplicating
-    this._activityScaling = activityScaling ?? this._activityScaling;
-    this._sourceGrid = sourceGrid ?? this._sourceGrid;
-    this._twoColorMode = twoColorMode ?? this._twoColorMode;
-    this._activityLimit = activityLimit ?? this._activityLimit;
-    this._maxSubstitutions = maxSubstitutions ?? this._maxSubstitutions;
-    this._isSubstitutionOn = isSubstitutionOn ?? this._isSubstitutionOn;
-    this._filterMode = filterMode ?? this._filterMode;
-    this.setProperties(this._activityScaling, this._filterMode, this._twoColorMode, this._isSubstitutionOn,
-      this._maxSubstitutions, this._activityLimit, true);
-
-    await this.updateDefault();
+    const viewerProps = viewer.props.getProperties();
+    const tempProps = this.usedProperties;
+    for (const property of viewerProps) {
+      const propName = property.name;
+      const propVal = property.get(viewer);
+      if (tempProps[propName] != propVal) {
+        tempProps[propName] = propVal;
+        result = true;
+      }
+    }
+    this.usedProperties = tempProps;
+    return result;
   }
 
-  async updateDefault(): Promise<void> {
-    if (this._activityScaling && this._sourceGrid && this._twoColorMode !== null && !this._isUpdating) {
+  updateDefault(): void {
+    const viewer = this.getViewer();
+    const proprtyChanged = this.isPropertyChanged(this.sarViewer) || this.isPropertyChanged(this.sarViewerVertical);
+    if ((this._sourceGrid && !this._isUpdating && proprtyChanged) || !this.isInitialized) {
+      this.isInitialized = true;
       this._isUpdating = true;
-      const [viewerGrid, viewerVGrid, statsDf] = await this.initializeViewersComponents();
+      const [viewerGrid, viewerVGrid, statsDf] = this.initializeViewersComponents();
       //FIXME: modify during the initializeViewersComponents stages
       this._statsDataFrameSubject.next(statsDf);
       this._sarGridSubject.next(viewerGrid);
       this._sarVGridSubject.next(viewerVGrid);
-      if (this._isSubstitutionOn) {
+      if (viewer.showSubstitution) {
         this._substitutionTableSubject.next(this.substitutionsInfo);
         this._isSubstInitialized = true;
       }
-    }
-    await this.updateBarchart();
-    this.invalidateSelection();
 
-    this._isUpdating = false;
-  }
+      this.invalidateSelection();
 
-  async updateBarchart(): Promise<void> {
-    this.stackedBarchart ??= await this._dataFrame?.plot.fromType('StackedBarChartAA') as StackedBarChart;
-    if (this.stackedBarchart && this._sourceGrid)
-      addViewerToHeader(this._sourceGrid, this.stackedBarchart);
+      this._isUpdating = false;
+    }
   }
 
-  async initializeViewersComponents(): Promise<[DG.Grid, DG.Grid, DG.DataFrame]> {
+  initializeViewersComponents(): [DG.Grid, DG.Grid, DG.DataFrame] {
     if (this._sourceGrid === null)
       throw new Error(`Source grid is not initialized`);
 
     //Split the aligned sequence into separate AARs
-    let splitSeqDf: DG.DataFrame | undefined;
-    let invalidIndexes: number[];
-    const col: DG.Column = this._dataFrame.columns.bySemType(C.SEM_TYPES.ALIGNED_SEQUENCE)!;
-    [splitSeqDf, invalidIndexes] = PeptidesModel.splitAlignedPeptides(col);
+    const col: DG.Column<string> = this.df.columns.bySemType(C.SEM_TYPES.MACROMOLECULE)!;
+    // const alphabet = col.tags[DG.TAGS.UNITS].split(':')[2];
+    const alphabet = col.tags['alphabet'];
+    const splitSeqDf = splitAlignedSequences(col);
+
+    this.barData = calculateBarsData(splitSeqDf.columns.toList(), this.df.selection);
 
     const positionColumns = splitSeqDf.columns.names();
-    const renderColNames: string[] = splitSeqDf.columns.names();
 
-    const activityCol = this._dataFrame.columns.bySemType(C.SEM_TYPES.ACTIVITY)!;
+    const activityCol = this.df.columns.bySemType(C.SEM_TYPES.ACTIVITY)!;
     splitSeqDf.columns.add(activityCol);
 
     this.joinDataFrames(positionColumns, splitSeqDf);
 
-    for (const dfCol of this._dataFrame.columns) {
+    for (const dfCol of this.df.columns) {
       if (positionColumns.includes(dfCol.name))
-        setAARRenderer(dfCol, this._sourceGrid);
+        setAARRenderer(dfCol, alphabet, this._sourceGrid);
     }
 
-    this.sortSourceGrid(this._sourceGrid);
+    this.sortSourceGrid();
 
-    await this.createScaledCol(this._activityScaling, this._dataFrame, this._sourceGrid, splitSeqDf);
+    const viewer = this.getViewer();
 
-    //unpivot a table and handle duplicates
-    splitSeqDf = splitSeqDf.groupBy(positionColumns)
-      .add('med', C.COLUMNS_NAMES.ACTIVITY_SCALED, C.COLUMNS_NAMES.ACTIVITY_SCALED)
-      .aggregate();
+    this.createScaledCol(viewer.scaling, splitSeqDf);
 
-    const peptidesCount = splitSeqDf.rowCount;
+    //unpivot a table and handle duplicates
+    let matrixDf = splitSeqDf.groupBy(positionColumns).aggregate();
 
-    let matrixDf = splitSeqDf.unpivot(
-      [C.COLUMNS_NAMES.ACTIVITY_SCALED], positionColumns, C.COLUMNS_NAMES.POSITION, C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
+    matrixDf = matrixDf.unpivot([], positionColumns, C.COLUMNS_NAMES.POSITION, C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
 
-    //FIXME: for some reason Mean difference is not calculated for all the AARs
     //statistics for specific AAR at a specific position
-    const statsDf = await this.calculateStatistics(matrixDf, peptidesCount, splitSeqDf);
+    this.statsDf = this.calculateStatistics(matrixDf);
 
     // SAR matrix table
     //pivot a table to make it matrix-like
-    matrixDf = statsDf.groupBy([C.COLUMNS_NAMES.AMINO_ACID_RESIDUE])
+    matrixDf = this.statsDf.groupBy([C.COLUMNS_NAMES.AMINO_ACID_RESIDUE])
       .pivot(C.COLUMNS_NAMES.POSITION)
       .add('first', C.COLUMNS_NAMES.MEAN_DIFFERENCE, '')
       .aggregate();
     matrixDf.name = 'SAR';
 
     // Setting category order
-    await this.setCategoryOrder(this._twoColorMode, statsDf, matrixDf);
+    this.setCategoryOrder(matrixDf);
 
     // SAR vertical table (naive, choose best Mean difference from pVals <= 0.01)
-    const sequenceDf = this.createVerticalTable(statsDf, this._twoColorMode);
-    renderColNames.push(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
+    const sequenceDf = this.createVerticalTable();
 
-
-    if (this._isSubstitutionOn || !this._isSubstInitialized)
+    if (viewer.showSubstitution || !this._isSubstInitialized)
       this.calcSubstitutions();
 
-    //TODO: move everything below out to controller
-    const [sarGrid, sarVGrid] = this.createGrids(matrixDf, positionColumns, sequenceDf);
+    const [sarGrid, sarVGrid] = this.createGrids(matrixDf, positionColumns, sequenceDf, alphabet);
 
     this._sarGrid = sarGrid;
     this._sarVGrid = sarVGrid;
 
-    this.setCellRenderers(
-      renderColNames, statsDf, this._twoColorMode, sarGrid, sarVGrid, this._isSubstitutionOn);
+    positionColumns.push(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
+
+    this.setBarChartInteraction();
+
+    this.setCellRenderers(positionColumns, sarGrid, sarVGrid);
 
     // show all the statistics in a tooltip over cell
-    this.setTooltips(renderColNames, statsDf, peptidesCount, sarGrid, sarVGrid, this._dataFrame);
+    this.setTooltips(positionColumns, sarGrid, sarVGrid);
 
     this.setInteractionCallback();
 
     this.setBitsetCallback();
 
-    this.postProcessGrids(this._sourceGrid, invalidIndexes, sarGrid, sarVGrid);
+    this.postProcessGrids(sarGrid, sarVGrid);
 
     //TODO: return class instead
-    return [sarGrid, sarVGrid, statsDf];
+    return [sarGrid, sarVGrid, this.statsDf];
   }
 
-  //TODO: move to controller?
   calcSubstitutions(): void {
-    const activityValues: DG.Column<number> = this._dataFrame.columns.bySemType(C.SEM_TYPES.ACTIVITY_SCALED)!;
-    const columnList: DG.Column<string>[] = this._dataFrame.columns.bySemTypeAll(C.SEM_TYPES.AMINO_ACIDS);
+    const activityValues: DG.Column<number> = this.df.columns.bySemType(C.SEM_TYPES.ACTIVITY_SCALED)!;
+    const columnList: DG.Column<string>[] = this.df.columns.bySemTypeAll(C.SEM_TYPES.MONOMER);
     const nCols = columnList.length;
     if (nCols == 0)
-      throw new Error(`Couldn't find any column of semType '${C.SEM_TYPES.AMINO_ACIDS}'`);
+      throw new Error(`Couldn't find any column of semType '${C.SEM_TYPES.MONOMER}'`);
 
+    const viewer = this.getViewer();
     this.substitutionsInfo = new Map();
-    const nRows = this._dataFrame.rowCount;
+    const nRows = this.df.rowCount;
     for (let seq1Idx = 0; seq1Idx < nRows - 1; seq1Idx++) {
       for (let seq2Idx = seq1Idx + 1; seq2Idx < nRows; seq2Idx++) {
         let substCounter = 0;
-        const activityValSeq1 = activityValues.get(seq1Idx);
-        const activityValSeq2 = activityValues.get(seq2Idx);
+        const activityValSeq1 = activityValues.get(seq1Idx)!;
+        const activityValSeq2 = activityValues.get(seq2Idx)!;
         const delta = activityValSeq1 - activityValSeq2;
-        if (Math.abs(delta) < this._activityLimit)
+        if (Math.abs(delta) < viewer.minActivityDelta)
           continue;
 
         let substCounterFlag = false;
         const tempData: {pos: string, seq1monomer: string, seq2monomer: string, seq1Idx: number, seq2Idx: number}[] =
           [];
         for (const currentPosCol of columnList) {
-          const seq1monomer = currentPosCol.get(seq1Idx);
-          const seq2monomer = currentPosCol.get(seq2Idx);
+          const seq1monomer = currentPosCol.get(seq1Idx)!;
+          const seq2monomer = currentPosCol.get(seq2Idx)!;
           if (seq1monomer == seq2monomer)
             continue;
 
           substCounter++;
-          substCounterFlag = substCounter > this._maxSubstitutions;
+          substCounterFlag = substCounter > viewer.maxSubstitutions;
           if (substCounterFlag)
             break;
 
@@ -349,116 +340,96 @@ export class PeptidesModel {
 
   joinDataFrames(positionColumns: string[], splitSeqDf: DG.DataFrame): void {
     // append splitSeqDf columns to source table and make sure columns are not added more than once
-    const name = this._dataFrame.name;
-    const dfColsSet = new Set(this._dataFrame.columns.names());
+    const name = this.df.name;
+    const dfColsSet = new Set(this.df.columns.names());
     if (!positionColumns.every((col: string) => dfColsSet.has(col))) {
-      this._dataFrame.join(splitSeqDf, [C.COLUMNS_NAMES.ACTIVITY], [C.COLUMNS_NAMES.ACTIVITY],
-        this._dataFrame.columns.names(), positionColumns, 'inner', true);
+      this.df.join(splitSeqDf, [C.COLUMNS_NAMES.ACTIVITY], [C.COLUMNS_NAMES.ACTIVITY],
+        this.df.columns.names(), positionColumns, 'inner', true);
     }
-    this._dataFrame.name = name;
+    this.df.name = name;
     this.currentView.name = name;
   }
 
-  sortSourceGrid(sourceGrid: DG.Grid): void {
-    if (sourceGrid) {
-      const colNames: DG.GridColumn[] = [];
-      for (let i = 1; i < sourceGrid.columns.length; i++)
-        colNames.push(sourceGrid.columns.byIndex(i)!);
-
-      colNames.sort((a, b)=>{
-        if (a.column!.semType == C.SEM_TYPES.AMINO_ACIDS) {
-          if (b.column!.semType == C.SEM_TYPES.AMINO_ACIDS)
-            return 0;
-          return -1;
-        }
-        if (b.column!.semType == C.SEM_TYPES.AMINO_ACIDS)
-          return 1;
-        return 0;
-      });
-      sourceGrid.columns.setOrder(colNames.map((v) => v.name));
-    }
+  sortSourceGrid(): void {
+    const colNames: DG.GridColumn[] = [];
+    for (let i = 1; i < this._sourceGrid.columns.length; i++)
+      colNames.push(this._sourceGrid.columns.byIndex(i)!);
+
+    colNames.sort((a, b)=>{
+      if (a.column!.semType == C.SEM_TYPES.MONOMER) {
+        if (b.column!.semType == C.SEM_TYPES.MONOMER)
+          return 0;
+        return -1;
+      }
+      if (b.column!.semType == C.SEM_TYPES.MONOMER)
+        return 1;
+      return 0;
+    });
+    this._sourceGrid.columns.setOrder(colNames.map((v) => v.name));
   }
 
-  //TODO: move out, merge with controller's scaleActivity
-  async createScaledCol(
-    activityScaling: string, df: DG.DataFrame, sourceGrid: DG.Grid, splitSeqDf: DG.DataFrame,
-  ): Promise<void> {
-    const [scaledDf, newColName] = await PeptidesModel.scaleActivity(
-      activityScaling, df, df.tags[C.COLUMNS_NAMES.ACTIVITY]);
+  createScaledCol(activityScaling: string, splitSeqDf: DG.DataFrame): void {
+    const [scaledDf, newColName] =
+      scaleActivity(activityScaling, this.df, this.df.tags[C.COLUMNS_NAMES.ACTIVITY]);
     //TODO: make another func
     const scaledCol = scaledDf.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
     scaledCol.semType = C.SEM_TYPES.ACTIVITY_SCALED;
     splitSeqDf.columns.add(scaledCol);
-    const oldScaledCol = df.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
-    df.columns.replace(oldScaledCol, scaledCol);
-    const gridCol = sourceGrid.col(C.COLUMNS_NAMES.ACTIVITY_SCALED);
+    const oldScaledCol = this.df.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
+    this.df.columns.replace(oldScaledCol, scaledCol);
+    const gridCol = this._sourceGrid.col(C.COLUMNS_NAMES.ACTIVITY_SCALED);
     if (gridCol !== null) {
       gridCol.name = newColName;
-      df.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED] = newColName;
+      this.df.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED] = newColName;
     }
 
-    sourceGrid.columns.setOrder([newColName]);
+    this._sourceGrid.columns.setOrder([newColName]);
   }
 
-  //TODO: move out
-  async calculateStatistics(
-    matrixDf: DG.DataFrame, peptidesCount: number, splitSeqDf: DG.DataFrame): Promise<DG.DataFrame> {
-    matrixDf = matrixDf.groupBy([C.COLUMNS_NAMES.POSITION, C.COLUMNS_NAMES.AMINO_ACID_RESIDUE])
-      .add('count', C.COLUMNS_NAMES.ACTIVITY_SCALED, 'Count')
-      .aggregate();
-
-    const countThreshold = 4;
-    matrixDf.rows.filter((row) => row.Count >= countThreshold && row.Count <= peptidesCount - countThreshold);
-    matrixDf = matrixDf.clone(matrixDf.filter);
-
-    // calculate additional stats
-    await matrixDf.columns.addNewCalculated('Ratio', '${count}/'.concat(`${peptidesCount}`));
+  calculateStatistics(matrixDf: DG.DataFrame): DG.DataFrame {
+    matrixDf = matrixDf.groupBy([C.COLUMNS_NAMES.POSITION, C.COLUMNS_NAMES.AMINO_ACID_RESIDUE]).aggregate();
 
     //calculate p-values based on t-test
-    let pvalues: Float32Array = new Float32Array(matrixDf.rowCount).fill(1);
-    const mdCol: DG.Column = matrixDf.columns.addNewFloat(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
-    const pValCol: DG.Column = matrixDf.columns.addNewFloat(C.COLUMNS_NAMES.P_VALUE);
+    const matrixCols = matrixDf.columns;
+    const mdCol= matrixCols.addNewFloat(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
+    const pValCol = matrixCols.addNewFloat(C.COLUMNS_NAMES.P_VALUE);
+    const countCol = matrixCols.addNewInt(C.COLUMNS_NAMES.COUNT);
+    const ratioCol = matrixCols.addNewFloat(C.COLUMNS_NAMES.RATIO);
     const aarCol = matrixDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
     const posCol = matrixDf.getCol(C.COLUMNS_NAMES.POSITION);
+    const activityCol: number[] = this.df.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED).toList();
+    const sourceDfLen = activityCol.length;
+
     for (let i = 0; i < matrixDf.rowCount; i++) {
-      const position = posCol.get(i);
-      const aar = aarCol.get(i);
-
-      splitSeqDf.rows.select((row) => row[position] === aar);
-      const currentActivity: number[] = splitSeqDf
-        .clone(splitSeqDf.selection, [C.COLUMNS_NAMES.ACTIVITY_SCALED])
-        .getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED)
-        .toList();
-
-      splitSeqDf.rows.select((row) => row[position] !== aar);
-      const otherActivity: number[] = splitSeqDf
-        .clone(splitSeqDf.selection, [C.COLUMNS_NAMES.ACTIVITY_SCALED])
-        .getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED)
-        .toList();
-
-      const testResult = tTest(currentActivity, otherActivity);
-      const currentMeanDiff = testResult[C.COLUMNS_NAMES.MEAN_DIFFERENCE]!;
-      const pvalue = testResult[currentMeanDiff >= 0 ? 'p-value more' : 'p-value less'];
-
-      mdCol.set(i, currentMeanDiff);
-      pvalues[i] = pvalue;
+      const position: string = posCol.get(i);
+      const aar: string = aarCol.get(i);
+      const mask = DG.BitSet.create(sourceDfLen, (j) => this.df.get(position, j) == aar);
+      const stats = getStats(activityCol, mask);
+
+      mdCol.set(i, stats.meanDifference);
+      pValCol.set(i, stats.pValue);
+      countCol.set(i, stats.count);
+      ratioCol.set(i, stats.ratio);
     }
 
-    pvalues = fdrcorrection(pvalues)[1];
-
-    for (let i = 0; i < pvalues.length; ++i)
-      pValCol.set(i, pvalues[i]);
+    const countThreshold = 4;
+    matrixDf = matrixDf.rows.match(`${C.COLUMNS_NAMES.COUNT} >= ${countThreshold}`).toDataFrame();
+    matrixDf = matrixDf.rows.match(`${C.COLUMNS_NAMES.COUNT} <= ${sourceDfLen - countThreshold}`).toDataFrame();
 
-    return matrixDf.clone();
+    return matrixDf as DG.DataFrame;
   }
 
-  async setCategoryOrder(twoColorMode: boolean, statsDf: DG.DataFrame, matrixDf: DG.DataFrame): Promise<void> {
-    const absMD = 'Absolute Mean difference';
-    const sortArgument = twoColorMode ? absMD : C.COLUMNS_NAMES.MEAN_DIFFERENCE;
-    if (twoColorMode)
-      await statsDf.columns.addNewCalculated(absMD, 'Abs(${Mean difference})');
+  setCategoryOrder(matrixDf: DG.DataFrame): void {
+    let sortArgument: string = C.COLUMNS_NAMES.MEAN_DIFFERENCE;
+    if (this.getViewer().bidirectionalAnalysis) {
+      const mdCol = this.statsDf.getCol(sortArgument);
+      sortArgument = 'Absolute Mean difference';
+      const absMDCol = this.statsDf.columns.addNewFloat(sortArgument);
+      absMDCol.init((i) => Math.abs(mdCol.get(i)));
+    }
 
-    const aarWeightsDf = statsDf.groupBy([C.COLUMNS_NAMES.AMINO_ACID_RESIDUE]).sum(sortArgument, 'weight').aggregate();
+    const aarWeightsDf = this.statsDf.groupBy([C.COLUMNS_NAMES.AMINO_ACID_RESIDUE]).sum(sortArgument, 'weight')
+      .aggregate();
     const aarList = aarWeightsDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE).toList();
     const getWeight = (aar: string): number => aarWeightsDf
       .groupBy(['weight'])
@@ -470,11 +441,11 @@ export class PeptidesModel {
     matrixDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE).setCategoryOrder(aarList);
   }
 
-  createVerticalTable(statsDf: DG.DataFrame, twoColorMode: boolean): DG.DataFrame {
+  createVerticalTable(): DG.DataFrame {
     // TODO: aquire ALL of the positions
     const columns = [C.COLUMNS_NAMES.MEAN_DIFFERENCE, C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, C.COLUMNS_NAMES.POSITION,
       'Count', 'Ratio', C.COLUMNS_NAMES.P_VALUE];
-    let sequenceDf = statsDf.groupBy(columns)
+    let sequenceDf = this.statsDf.groupBy(columns)
       .where('pValue <= 0.1')
       .aggregate();
 
@@ -486,7 +457,7 @@ export class PeptidesModel {
     const rowCount = sequenceDf.rowCount;
     for (const pos of posColCategories) {
       tempStats = DG.Stats.fromColumn(mdCol, DG.BitSet.create(rowCount, (i) => posCol.get(i) === pos));
-      maxAtPos[pos] = twoColorMode ?
+      maxAtPos[pos] = this.getViewer().bidirectionalAnalysis ?
         (tempStats.max > Math.abs(tempStats.min) ? tempStats.max : tempStats.min) :
         tempStats.max;
     }
@@ -495,7 +466,8 @@ export class PeptidesModel {
     return sequenceDf;
   }
 
-  createGrids(matrixDf: DG.DataFrame, positionColumns: string[], sequenceDf: DG.DataFrame): DG.Grid[] {
+  createGrids(
+    matrixDf: DG.DataFrame, positionColumns: string[], sequenceDf: DG.DataFrame, alphabet: string): DG.Grid[] {
     const sarGrid = matrixDf.plot.grid();
     sarGrid.sort([C.COLUMNS_NAMES.AMINO_ACID_RESIDUE]);
     sarGrid.columns.setOrder([C.COLUMNS_NAMES.AMINO_ACID_RESIDUE].concat(positionColumns as C.COLUMNS_NAMES[]));
@@ -508,166 +480,203 @@ export class PeptidesModel {
 
     let tempCol = matrixDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
     if (tempCol)
-      setAARRenderer(tempCol, sarGrid);
+      setAARRenderer(tempCol, alphabet, sarGrid);
 
     tempCol = sequenceDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
     if (tempCol)
-      setAARRenderer(tempCol, sarGrid);
+      setAARRenderer(tempCol, alphabet, sarGrid);
 
     return [sarGrid, sarVGrid];
   }
 
-  //TODO: move out
-  setCellRenderers(
-    renderColNames: string[], statsDf: DG.DataFrame, twoColorMode: boolean, sarGrid: DG.Grid, sarVGrid: DG.Grid,
-    isSubstitutionOn: boolean,
-  ): void {
-    const mdCol = statsDf.getCol(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
+  setBarChartInteraction(): void {
+    const eventAction = (ev: MouseEvent): void => {
+      const cell = this._sourceGrid.hitTest(ev.offsetX, ev.offsetY);
+      if (cell?.isColHeader && cell.tableColumn?.semType == C.SEM_TYPES.MONOMER) {
+        const newBarPart = this.findAARandPosition(cell, ev);
+        this.requestBarchartAction(ev, newBarPart);
+      }
+    };
+
+    // The following events makes the barchart interactive
+    rxjs.fromEvent<MouseEvent>(this._sourceGrid.overlay, 'mousemove')
+      .subscribe((mouseMove: MouseEvent) => eventAction(mouseMove));
+    rxjs.fromEvent<MouseEvent>(this._sourceGrid.overlay, 'click')
+      .subscribe((mouseMove: MouseEvent) => eventAction(mouseMove));
+  }
+
+  findAARandPosition(cell: DG.GridCell, ev: MouseEvent): {monomer: string, position: string} | null {
+    const barCoords = this.barsBounds[cell.tableColumn!.name];
+    for (const [monomer, coords] of Object.entries(barCoords)) {
+      const isIntersectingX = ev.offsetX >= coords.x && ev.offsetX <= coords.x + coords.width;
+      const isIntersectingY = ev.offsetY >= coords.y && ev.offsetY <= coords.y + coords.height;
+      if (isIntersectingX && isIntersectingY)
+        return {monomer: monomer, position: cell.tableColumn!.name};
+    }
+
+    return null;
+  }
+
+  requestBarchartAction(ev: MouseEvent, barPart: {position: string, monomer: string} | null): void {
+    if (!barPart)
+      return;
+    const monomer = barPart.monomer;
+    const position = barPart.position;
+    if (ev.type === 'click') {
+      ev.shiftKey ? this.modifyCurrentSelection(monomer, position) :
+        this.initCurrentSelection(monomer, position);
+    } else {
+      const bar = `${monomer}:${position}`;
+      if (this.cachedBarchartTooltip.bar == bar)
+        ui.tooltip.show(this.cachedBarchartTooltip.tooltip!, ev.clientX, ev.clientY);
+      else
+        this.cachedBarchartTooltip = {bar: bar, tooltip: this.showTooltipAt(monomer, position, ev.clientX, ev.clientY)};
+    }
+  }
+
+  setCellRenderers(renderColNames: string[], sarGrid: DG.Grid, sarVGrid: DG.Grid): void {
+    const mdCol = this.statsDf.getCol(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
     //decompose into two different renering funcs
-    const cellRendererAction = (args: DG.GridCellRenderArgs): void => {
+    const renderCell = (args: DG.GridCellRenderArgs): void => {
       const canvasContext = args.g;
       const bound = args.bounds;
-      const cell = args.cell;
-      const tableColName = cell.tableColumn?.name;
-      const tableRowIndex = cell.tableRowIndex!;
-      const cellValue = cell.cell.value;
-      const midX = bound.x + bound.width / 2;
-      const midY = bound.y + bound.height / 2;
 
       canvasContext.save();
       canvasContext.beginPath();
       canvasContext.rect(bound.x, bound.y, bound.width, bound.height);
       canvasContext.clip();
 
+      // Hide row column
+      const cell = args.cell;
       if (cell.isRowHeader && cell.gridColumn.visible) {
         cell.gridColumn.visible = false;
         args.preventDefault();
         return;
       }
 
+      const tableColName = cell.tableColumn?.name;
+      const tableRowIndex = cell.tableRowIndex!;
       if (cell.isTableCell && tableColName && tableRowIndex !== null && renderColNames.indexOf(tableColName) !== -1) {
-        const gridTable = cell.grid.table;
-        const currentPosition: string = tableColName !== C.COLUMNS_NAMES.MEAN_DIFFERENCE ?
-          tableColName : gridTable.get(C.COLUMNS_NAMES.POSITION, tableRowIndex);
-        const currentAAR: string = gridTable.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, tableRowIndex);
-
-        const queryAAR = `${C.COLUMNS_NAMES.AMINO_ACID_RESIDUE} = ${currentAAR}`;
-        if (cellValue) {
-          const query = `${queryAAR} and ${C.COLUMNS_NAMES.POSITION} = ${currentPosition}`;
-          const pVal: number = statsDf
-            .groupBy([C.COLUMNS_NAMES.P_VALUE])
-            .where(query)
-            .aggregate()
-            .get(C.COLUMNS_NAMES.P_VALUE, 0);
-
-          let coef: string;
-          const variant = cellValue < 0;
-          if (pVal < 0.01)
-            coef = variant && twoColorMode ? '#FF7900' : '#299617';
-          else if (pVal < 0.05)
-            coef = variant && twoColorMode ? '#FFA500' : '#32CD32';
-          else if (pVal < 0.1)
-            coef = variant && twoColorMode ? '#FBCEB1' : '#98FF98';
-          else
-            coef = DG.Color.toHtml(DG.Color.lightLightGray);
-
-
-          const chooseMin = (): number => twoColorMode ? 0 : mdCol.min;
-          const chooseMax = (): number => twoColorMode ? Math.max(Math.abs(mdCol.min), mdCol.max) : mdCol.max;
-          const chooseCurrent = (): any => twoColorMode ? Math.abs(cellValue) : cellValue;
-
-          const rCoef = (chooseCurrent() - chooseMin()) / (chooseMax() - chooseMin());
-
-          const maxRadius = 0.9 * (bound.width > bound.height ? bound.height : bound.width) / 2;
-          const radius = Math.floor(maxRadius * rCoef);
-
-          canvasContext.beginPath();
-          canvasContext.fillStyle = coef;
-          canvasContext.arc(midX, midY, radius < 3 ? 3 : radius, 0, Math.PI * 2, true);
-          canvasContext.closePath();
-
-          canvasContext.fill();
-          if (isSubstitutionOn) {
-            canvasContext.textBaseline = 'middle';
-            canvasContext.textAlign = 'center';
-            canvasContext.fillStyle = DG.Color.toHtml(DG.Color.getContrastColor(DG.Color.fromHtml(coef)));
-            canvasContext.font = '13px Roboto, Roboto Local, sans-serif';
-            let substValue = 0;
-            this.substitutionsInfo.get(currentAAR)?.get(currentPosition)?.forEach((idxs) => substValue += idxs.length);
-            if (substValue && substValue != 0)
-              canvasContext.fillText(substValue.toString(), midX, midY);
-          }
-
-          //TODO: frame based on currentSelection
-          const aarSelection = this.currentSelection[currentPosition];
-          if (aarSelection && aarSelection.includes(currentAAR)) {
-            canvasContext.strokeStyle = '#000';
-            canvasContext.lineWidth = 1;
-            canvasContext.strokeRect(bound.x + 1, bound.y + 1, bound.width - 1, bound.height - 1);
-          }
+        const cellValue: number | null = cell.cell.value;
+
+        if (cellValue && cellValue !== DG.INT_NULL && cellValue !== DG.FLOAT_NULL) {
+          const gridTable = cell.grid.table;
+          const currentPosition: string = tableColName !== C.COLUMNS_NAMES.MEAN_DIFFERENCE ?
+            tableColName : gridTable.get(C.COLUMNS_NAMES.POSITION, tableRowIndex);
+          const currentAAR: string = gridTable.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, tableRowIndex);
+
+          const viewer = this.getViewer();
+          renderSARCell(canvasContext, currentAAR, currentPosition, this.statsDf, viewer.bidirectionalAnalysis, mdCol,
+            bound, cellValue, this.currentSelection, viewer.showSubstitution ? this.substitutionsInfo : null);
         }
         args.preventDefault();
       }
       canvasContext.restore();
     };
-    sarGrid.onCellRender.subscribe(cellRendererAction);
-    sarVGrid.onCellRender.subscribe(cellRendererAction);
+    sarGrid.onCellRender.subscribe(renderCell);
+    sarVGrid.onCellRender.subscribe(renderCell);
+
+    this._sourceGrid.setOptions({'colHeaderHeight': 130});
+    this._sourceGrid.onCellRender.subscribe((gcArgs) => {
+      const context = gcArgs.g;
+      const bounds = gcArgs.bounds;
+      const col = gcArgs.cell.tableColumn;
+
+      context.save();
+      context.beginPath();
+      context.rect(bounds.x, bounds.y, bounds.width, bounds.height);
+      context.clip();
+
+      if (gcArgs.cell.isColHeader && col?.semType == C.SEM_TYPES.MONOMER) {
+        const barBounds = renderBarchart(context, col, this.barData[col.name], bounds, this.df.filter.trueCount);
+        this.barsBounds[col.name] = barBounds;
+        gcArgs.preventDefault();
+      }
+
+      context.restore();
+    });
   }
 
-  //FIXME: doesn't work at all
-  setTooltips(
-    renderColNames: string[], statsDf: DG.DataFrame, peptidesCount: number, sarGrid: DG.Grid, sarVGrid: DG.Grid,
-    sourceDf: DG.DataFrame,
-  ): void {
-    const onCellTooltipAction = async (cell: DG.GridCell, x: number, y: number): Promise<boolean> => {
-      if (
-        !cell.isRowHeader && !cell.isColHeader && cell.tableColumn !== null && cell.cell.value !== null &&
-          cell.tableRowIndex !== null && renderColNames.indexOf(cell.tableColumn.name) !== -1) {
-        const tooltipMap: { [index: string]: string } = {};
-
-        for (const col of statsDf.columns.names()) {
-          if (col !== C.COLUMNS_NAMES.AMINO_ACID_RESIDUE && col !== C.COLUMNS_NAMES.POSITION) {
-            const currentPosition = cell.tableColumn.name !== C.COLUMNS_NAMES.MEAN_DIFFERENCE ?
-              cell.tableColumn.name : cell.grid.table.get(C.COLUMNS_NAMES.POSITION, cell.tableRowIndex);
-            const query =
-              `${C.COLUMNS_NAMES.AMINO_ACID_RESIDUE} = ` +
-              `${cell.grid.table.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, cell.tableRowIndex)} ` +
-              `and ${C.COLUMNS_NAMES.POSITION} = ${currentPosition}`;
-            const textNum = statsDf.groupBy([col]).where(query).aggregate().get(col, 0);
-            let text = `${col === 'Count' ? textNum : textNum.toFixed(5)}`;
-
-            if (col === 'Count')
-              text += ` / ${peptidesCount}`;
-            else if (col === C.COLUMNS_NAMES.P_VALUE)
-              text = parseFloat(text) !== 0 ? text : '<0.01';
-
-
-            tooltipMap[col === C.COLUMNS_NAMES.P_VALUE ? 'p-value' : col] = text;
-          }
-        }
+  setTooltips(renderColNames: string[], sarGrid: DG.Grid, sarVGrid: DG.Grid): void {
+    const showTooltip = (cell: DG.GridCell, x: number, y: number): boolean => {
+      const tableCol = cell.tableColumn;
+      const tableColName = tableCol?.name;
+      const tableRowIndex = cell.tableRowIndex;
 
-        ui.tooltip.show(ui.tableFromMap(tooltipMap), x, y);
-      }
-      if (!cell.isColHeader && cell.tableColumn?.name == C.COLUMNS_NAMES.AMINO_ACID_RESIDUE) {
-        const monomerLib = sourceDf.temp[MonomerLibrary.id];
-        ChemPalette.showTooltip(cell, x, y, monomerLib);
+      if (!cell.isRowHeader && !cell.isColHeader && tableCol && tableRowIndex != null) {
+        const table = cell.grid.table;
+        const currentAAR = table.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, tableRowIndex);
+
+        if (tableCol.semType == C.SEM_TYPES.MONOMER)
+          this.showMonomerTooltip(currentAAR, x, y);
+        else if (cell.cell.value && renderColNames.includes(tableColName!)) {
+          const currentPosition = tableColName !== C.COLUMNS_NAMES.MEAN_DIFFERENCE ? tableColName :
+            table.get(C.COLUMNS_NAMES.POSITION, tableRowIndex);
+
+          this.showTooltipAt(currentAAR, currentPosition, x, y);
+        }
       }
       return true;
     };
-    sarGrid.onCellTooltip(onCellTooltipAction);
-    sarVGrid.onCellTooltip(onCellTooltipAction);
+
+    sarGrid.onCellTooltip(showTooltip);
+    sarVGrid.onCellTooltip(showTooltip);
+    this._sourceGrid.onCellTooltip((cell, x, y) => {
+      const col = cell.tableColumn;
+      const cellValue = cell.cell.value;
+      if (cellValue && col && col.semType === C.SEM_TYPES.MONOMER)
+        this.showMonomerTooltip(cellValue, x, y);
+      return true;
+    });
+  }
+
+  showMonomerTooltip(aar: string, x: number, y: number): void {
+    const tooltipElements: HTMLDivElement[] = [];
+    //@ts-ignore: no types for org
+    // const monomer: type.HELMMonomer = org.helm.webeditor.monomers.getMonomer('HELM_AA', aar);
+    const monomer: type.HELMMonomer = this.monomerLib[aar.toLowerCase()];
+
+    if (monomer) {
+      tooltipElements.push(ui.div(monomer.n));
+      const options = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
+      tooltipElements.push(grok.chem.svgMol(monomer.m, undefined, undefined, options));
+    } else
+      tooltipElements.push(ui.div(aar));
+
+    ui.tooltip.show(ui.divV(tooltipElements), x, y);
+  }
+
+  showTooltipAt(aar: string, position: string, x: number, y: number): HTMLDivElement | null {
+    const currentStatsDf = this.statsDf.rows.match({Pos: position, AAR: aar}).toDataFrame();
+    const activityCol = this.df.columns.bySemType(C.SEM_TYPES.ACTIVITY_SCALED)!;
+    const splitCol = DG.Column.bool(C.COLUMNS_NAMES.SPLIT_COL, activityCol.length);
+    const currentPosCol = this.df.getCol(position);
+    splitCol.init((i) => currentPosCol.get(i) == aar);
+    const distributionTable = DG.DataFrame.fromColumns([activityCol, splitCol]);
+    const stats: Stats = {
+      count: currentStatsDf.get(C.COLUMNS_NAMES.COUNT, 0),
+      ratio: currentStatsDf.get(C.COLUMNS_NAMES.RATIO, 0),
+      pValue: currentStatsDf.get(C.COLUMNS_NAMES.P_VALUE, 0),
+      meanDifference: currentStatsDf.get(C.COLUMNS_NAMES.MEAN_DIFFERENCE, 0),
+    };
+    if (!stats.count)
+      return null;
+
+    const tooltip = getDistributionAndStats(distributionTable, stats, `${position} : ${aar}`, 'Other', true);
+
+    ui.tooltip.show(tooltip, x, y);
+
+    return tooltip;
   }
 
-  //TODO: think about it, move out?
   setInteractionCallback(): void {
     const sarDf = this._sarGrid.dataFrame;
     const sarVDf = this._sarVGrid.dataFrame;
 
-    const chooseAction = (aar: string, position: string, isShiftPressed: boolean) => {
+    const chooseAction = (aar: string, position: string, isShiftPressed: boolean): void =>
       isShiftPressed ? this.modifyCurrentSelection(aar, position) : this.initCurrentSelection(aar, position);
-    };
 
-    const gridCellValidation = (gc: DG.GridCell | null) => !gc || !gc.cell.value || !gc.tableColumn ||
+    const gridCellValidation = (gc: DG.GridCell | null): boolean => !gc || !gc.cell.value || !gc.tableColumn ||
       gc.tableRowIndex == null || gc.tableRowIndex == -1;
     this._sarGrid.root.addEventListener('click', (ev) => {
       const gridCell = this._sarGrid.hitTest(ev.offsetX, ev.offsetY);
@@ -690,7 +699,7 @@ export class PeptidesModel {
       chooseAction(aar, position, ev.shiftKey);
     });
 
-    const cellChanged = (table: DG.DataFrame) => {
+    const cellChanged = (table: DG.DataFrame): void => {
       if (this.isCellChanging)
         return;
       this.isCellChanging = true;
@@ -723,7 +732,7 @@ export class PeptidesModel {
   }
 
   invalidateGrids(): void {
-    this.stackedBarchart?.computeData();
+    // this.stackedBarchart?.computeData();
     this._sarGrid.invalidate();
     this._sarVGrid.invalidate();
     this._sourceGrid?.invalidate();
@@ -733,12 +742,9 @@ export class PeptidesModel {
   setBitsetCallback(): void {
     if (this.isBitsetChangedInitialized)
       return;
-    const filter = this._dataFrame.filter;
-    const selection = this._dataFrame.selection;
-
-    const changeBitset = (currentBitset: DG.BitSet, previousBitset: DG.BitSet): void => {
-      previousBitset.setAll(!this._filterMode, false);
+    const selection = this.df.selection;
 
+    const changeBitset = (currentBitset: DG.BitSet): void => {
       const edfSelection = this.edf?.selection;
       if (this.isPeptideSpaceChangingBitset) {
         if (edfSelection == null)
@@ -748,7 +754,7 @@ export class PeptidesModel {
         return;
       }
 
-      const updateEdfSelection = () => {
+      const updateEdfSelection = (): void => {
         this.isChangingEdfBitset = true;
         edfSelection?.copyFrom(currentBitset);
         this.isChangingEdfBitset = false;
@@ -762,10 +768,10 @@ export class PeptidesModel {
       }
 
       //TODO: move out
-      const getBitAt = (i: number) => {
+      const getBitAt = (i: number): boolean => {
         for (const position of positionList) {
-          const positionCol: DG.Column<string> = this._dataFrame.getCol(position);
-          if (this._currentSelection[position].includes(positionCol.get(i)))
+          const positionCol: DG.Column<string> = this.df.getCol(position);
+          if (this._currentSelection[position].includes(positionCol.get(i)!))
             return true;
         }
         return false;
@@ -775,38 +781,19 @@ export class PeptidesModel {
       updateEdfSelection();
     };
 
-    const recalculateStatistics =
-      (bitset: DG.BitSet): void => (this._dataFrame.temp[C.STATS] as FilteringStatistics).setMask(bitset);
-
-    filter.onChanged.subscribe(() => {
-      changeBitset(filter, selection);
-      recalculateStatistics(filter);
-    });
-    selection.onChanged.subscribe(() => {
-      changeBitset(selection, filter);
-      recalculateStatistics(selection);
-    });
+    selection.onChanged.subscribe(() => changeBitset(selection));
     this.isBitsetChangedInitialized = true;
   }
 
   fireBitsetChanged(isPeptideSpaceSource: boolean = false): void {
     this.isPeptideSpaceChangingBitset = isPeptideSpaceSource;
-    this.getBiteset().fireChanged();
-    this.isPeptideSpaceChangingBitset = false;
+    this.df.selection.fireChanged();
     this.modifyOrCreateSplitCol();
     grok.shell.o = this.createAccordion().root;
+    this.isPeptideSpaceChangingBitset = false;
   }
 
-  getBiteset(): DG.BitSet {return this._filterMode ? this._dataFrame.filter : this._dataFrame.selection;}
-
-  //TODO: move out
-  postProcessGrids(sourceGrid: DG.Grid, invalidIndexes: number[], sarGrid: DG.Grid, sarVGrid: DG.Grid): void {
-    sourceGrid.onCellPrepare((cell: DG.GridCell) => {
-      const currentRowIndex = cell.tableRowIndex;
-      if (currentRowIndex && invalidIndexes.includes(currentRowIndex) && !cell.isRowHeader)
-        cell.style.backColor = DG.Color.lightLightGray;
-    });
-
+  postProcessGrids(sarGrid: DG.Grid, sarVGrid: DG.Grid): void {
     const mdCol: DG.GridColumn = sarVGrid.col(C.COLUMNS_NAMES.MEAN_DIFFERENCE)!;
     mdCol.name = 'Diff';
 
@@ -825,7 +812,7 @@ export class PeptidesModel {
       }
     }
 
-    const setViewerGridProps = (grid: DG.Grid) => {
+    const setViewerGridProps = (grid: DG.Grid): void => {
       grid.props.allowEdit = false;
       grid.props.allowRowSelection = false;
       grid.props.allowBlockSelection = false;
@@ -836,148 +823,55 @@ export class PeptidesModel {
   }
 
   getSplitColValueAt(index: number, aar: string, position: string, aarLabel: string): string {
-    const currentAAR = this._dataFrame.get(position, index) as string;
+    const currentAAR = this.df.get(position, index) as string;
     return currentAAR === aar ? aarLabel : C.CATEGORIES.OTHER;
   }
 
   modifyOrCreateSplitCol(): void {
-    const bs = this.getBiteset();
-    this.splitCol = this._dataFrame.col(C.COLUMNS_NAMES.SPLIT_COL) ??
-      this._dataFrame.columns.addNewBool(C.COLUMNS_NAMES.SPLIT_COL);
+    const bs = this.df.selection;
+    this.splitCol = this.df.col(C.COLUMNS_NAMES.SPLIT_COL) ??
+      this.df.columns.addNewBool(C.COLUMNS_NAMES.SPLIT_COL);
     this.splitCol.init((i) => bs.get(i));
     this.splitCol.compact();
   }
 
-  static async scaleActivity(
-    activityScaling: string, df: DG.DataFrame, originalActivityName?: string, cloneBitset = false,
-  ): Promise<[DG.DataFrame, string]> {
-    let currentActivityColName = originalActivityName ?? C.COLUMNS_NAMES.ACTIVITY;
-    const flag = df.columns.names().includes(currentActivityColName) &&
-      currentActivityColName === originalActivityName;
-    currentActivityColName = flag ? currentActivityColName : C.COLUMNS_NAMES.ACTIVITY;
-    const tempDf = df.clone(cloneBitset ? df.filter : null, [currentActivityColName]);
-
-    let formula = '${' + currentActivityColName + '}';
-    let newColName = 'activity';
-    switch (activityScaling) {
-    case 'none':
-      break;
-    case 'lg':
-      formula = `Log10(${formula})`;
-      newColName = `Log10(${newColName})`;
-      break;
-    case '-lg':
-      formula = `-1*Log10(${formula})`;
-      newColName = `-Log10(${newColName})`;
-      break;
-    default:
-      throw new Error(`ScalingError: method \`${activityScaling}\` is not available.`);
-    }
-
-    await tempDf.columns.addNewCalculated(C.COLUMNS_NAMES.ACTIVITY_SCALED, formula);
-    df.tags['scaling'] = activityScaling;
-
-    return [tempDf, newColName];
-  }
-
-  static splitAlignedPeptides(peptideColumn: DG.Column<string>, filter: boolean = true): [DG.DataFrame, number[]] {
-    const separator = peptideColumn.tags[C.TAGS.SEPARATOR] ?? getSeparator(peptideColumn);
-    const splitPeptidesArray: string[][] = [];
-    let currentSplitPeptide: string[];
-    let modeMonomerCount = 0;
-    let currentLength;
-    const colLength = peptideColumn.length;
-
-    // splitting data
-    const monomerLengths: {[index: string]: number} = {};
-    for (let i = 0; i < colLength; i++) {
-      currentSplitPeptide = peptideColumn.get(i).split(separator).map((value: string) => value ? value : '-');
-      splitPeptidesArray.push(currentSplitPeptide);
-      currentLength = currentSplitPeptide.length;
-      monomerLengths[currentLength + ''] =
-        monomerLengths[currentLength + ''] ? monomerLengths[currentLength + ''] + 1 : 1;
-    }
-    modeMonomerCount =
-      parseInt(Object.keys(monomerLengths).reduce((a, b) => monomerLengths[a] > monomerLengths[b] ? a : b));
-
-    // making sure all of the sequences are of the same size
-    // and marking invalid sequences
-    let nTerminal: string;
-    const invalidIndexes: number[] = [];
-    let splitColumns: string[][] = Array.from({length: modeMonomerCount}, (_) => []);
-    modeMonomerCount--; // minus N-terminal
-    for (let i = 0; i < colLength; i++) {
-      currentSplitPeptide = splitPeptidesArray[i];
-      nTerminal = currentSplitPeptide.pop()!; // it is guaranteed that there will be at least one element
-      currentLength = currentSplitPeptide.length;
-      if (currentLength !== modeMonomerCount)
-        invalidIndexes.push(i);
-
-      for (let j = 0; j < modeMonomerCount; j++)
-        splitColumns[j].push(j < currentLength ? currentSplitPeptide[j] : '-');
-
-      splitColumns[modeMonomerCount].push(nTerminal);
-    }
-    modeMonomerCount--; // minus C-terminal
-
-    //create column names list
-    const columnNames = Array.from({length: modeMonomerCount}, (_, index) => `${index + 1 < 10 ? 0 : ''}${index + 1 }`);
-    columnNames.splice(0, 0, 'N');
-    columnNames.push('C');
-
-    // filter out the columns with the same values
-    if (filter) {
-      splitColumns = splitColumns.filter((positionArray, index) => {
-        const isRetained = new Set(positionArray).size > 1;
-        if (!isRetained)
-          columnNames.splice(index, 1);
-
-        return isRetained;
-      });
-    }
-
-    return [
-      DG.DataFrame.fromColumns(splitColumns.map((positionArray, index) => {
-        return DG.Column.fromList('string', columnNames[index], positionArray);
-      })),
-      invalidIndexes,
-    ];
-  }
-
   syncProperties(isSourceSAR = true): void {
-    const sarViewer: SARViewer = this._dataFrame.temp['sarViewer'];
-    const sarViewerVertical: SARViewerVertical = this._dataFrame.temp['sarViewerVertical'];
-    const sourceViewer = isSourceSAR ? sarViewer : sarViewerVertical;
-    const targetViewer = isSourceSAR ? sarViewerVertical : sarViewer;
-    const properties = sourceViewer.props.getProperties();
-    for (const property of properties)
-      targetViewer.props.set(property.name, property.get(sourceViewer));
+    if (this.sarViewer && this.sarViewerVertical) {
+      const [sourceViewer, targetViewer] = isSourceSAR ? [this.sarViewer, this.sarViewerVertical] :
+        [this.sarViewerVertical, this.sarViewer];
+      const properties = sourceViewer.props.getProperties();
+      const newProps: {[propName: string]: string | number | boolean} = {};
+      for (const property of properties) {
+        const propName = property.name;
+        const propVal = property.get(sourceViewer);
+        targetViewer.props.set(propName, propVal);
+        newProps[propName] = propVal;
+      }
+      this.usedProperties = newProps;
+    } else
+      console.warn('Warning: could not sync viewer properties, one of the viewers is not initialized');
   }
 
   /** Class initializer */
   async init(): Promise<void> {
     if (this.isInitialized)
       return;
-    this.isInitialized = true;
-    //calculate initial stats
-    const stats = new FilteringStatistics();
-    const activityScaledCol = this._dataFrame.columns.bySemType(C.SEM_TYPES.ACTIVITY_SCALED)!;
-    stats.setData(activityScaledCol.getRawData() as Float32Array);
-    stats.setMask(this._dataFrame.selection);
-    this._dataFrame.temp[C.STATS] = stats;
-
-    this.currentView = this._dataFrame.tags[C.PEPTIDES_ANALYSIS] == 'true' ? grok.shell.v as DG.TableView :
-      grok.shell.addTableView(this._dataFrame);
-    const sourceGrid = this.currentView.grid;
-    if (this._dataFrame.tags[C.PEPTIDES_ANALYSIS] == 'true')
-      return;
 
-    this._dataFrame.tags[C.PEPTIDES_ANALYSIS] = 'true';
-    sourceGrid.col(C.COLUMNS_NAMES.ACTIVITY_SCALED)!.name = this._dataFrame.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED];
-    sourceGrid.columns.setOrder([this._dataFrame.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED]]);
+    this.monomerLib =
+      JSON.parse(await grok.functions.call('Helm:getMonomerLib', {type: this.df.getTag('monomerType')}) as string);
 
+    this.currentView = this.df.tags[C.PEPTIDES_ANALYSIS] == 'true' ? grok.shell.v as DG.TableView :
+      grok.shell.addTableView(this.df);
+    this._sourceGrid = this.currentView.grid;
+    if (this.df.tags[C.PEPTIDES_ANALYSIS] == 'true')
+      return;
+
+    this.df.tags[C.PEPTIDES_ANALYSIS] = 'true';
+    this._sourceGrid.col(C.COLUMNS_NAMES.ACTIVITY_SCALED)!.name = this.df.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED];
+    this._sourceGrid.columns.setOrder([this.df.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED]]);
+    this._sourceGrid.props.allowColSelection = false;
 
-    this._dataFrame.temp[C.EMBEDDING_STATUS] = false;
+    this.df.temp[C.EMBEDDING_STATUS] = false;
     const adjustCellSize = (grid: DG.Grid): void => {
       const colNum = grid.columns.length;
       for (let i = 0; i < colNum; ++i) {
@@ -987,36 +881,37 @@ export class PeptidesModel {
       grid.props.rowHeight = 20;
     };
 
-    for (let i = 0; i < sourceGrid.columns.length; i++) {
-      const aarCol = sourceGrid.columns.byIndex(i);
-      if (aarCol && aarCol.name && aarCol.column?.semType !== C.SEM_TYPES.AMINO_ACIDS &&
-        aarCol.name !== this._dataFrame.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED])
+    for (let i = 0; i < this._sourceGrid.columns.length; i++) {
+      const aarCol = this._sourceGrid.columns.byIndex(i);
+      if (aarCol && aarCol.name && aarCol.column?.semType !== C.SEM_TYPES.MONOMER &&
+        aarCol.name !== this.df.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED])
         aarCol.visible = false;
     }
 
-    const options = {scaling: this._dataFrame.tags['scaling']};
-    await this.updateData(this._dataFrame.tags['scaling'], sourceGrid, false, 1, 2, false, false);
+    const options = {scaling: this.df.tags['scaling']};
 
     const dockManager = this.currentView.dockManager;
 
-    const sarViewer = await this._dataFrame.plot.fromType('peptide-sar-viewer', options) as SARViewer;
+    this.sarViewer = await this.df.plot.fromType('peptide-sar-viewer', options) as SARViewer;
 
-    const sarViewerVertical =
-      await this._dataFrame.plot.fromType('peptide-sar-viewer-vertical', options) as SARViewerVertical;
+    this.sarViewerVertical =
+      await this.df.plot.fromType('peptide-sar-viewer-vertical', options) as SARViewerVertical;
 
-    const sarViewersGroup: viewerTypes[] = [sarViewer, sarViewerVertical];
+    const sarViewersGroup: viewerTypes[] = [this.sarViewer, this.sarViewerVertical];
 
-    if (this._dataFrame.rowCount <= 10000) {
+    if (this.df.rowCount <= 10000) {
       const peptideSpaceViewerOptions = {method: 'UMAP', measure: 'Levenshtein', cyclesCount: 100};
       const peptideSpaceViewer =
-        await this._dataFrame.plot.fromType('peptide-space-viewer', peptideSpaceViewerOptions) as PeptideSpaceViewer;
+        await this.df.plot.fromType('peptide-space-viewer', peptideSpaceViewerOptions) as PeptideSpaceViewer;
       dockManager.dock(peptideSpaceViewer, DG.DOCK_TYPE.RIGHT, null, 'Peptide Space Viewer');
     }
 
+    this.updateDefault();
+
     dockViewers(sarViewersGroup, DG.DOCK_TYPE.RIGHT, dockManager, DG.DOCK_TYPE.DOWN);
 
-    sourceGrid.props.allowEdit = false;
-    adjustCellSize(sourceGrid);
+    this._sourceGrid.props.allowEdit = false;
+    adjustCellSize(this._sourceGrid);
 
     this.invalidateGrids();
   }