@datagrok/peptides 0.8.13 → 1.0.0

package/src/model.ts

@@ -4,7 +4,6 @@ import * as DG from 'datagrok-api/dg';
 
 import {Subject, Observable} from 'rxjs';
 import {addViewerToHeader, StackedBarChart} from './viewers/stacked-barchart-viewer';
-import {PeptidesController} from './peptides';
 import {tTest} from '@datagrok-libraries/statistics/src/tests';
 import {fdrcorrection} from '@datagrok-libraries/statistics/src/multiple-tests';
 import {ChemPalette} from './utils/chem-palette';
@@ -12,22 +11,28 @@ 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 {PeptideSpaceViewer} from './viewers/peptide-space-viewer';
+import {setAARRenderer} from './utils/cell-renderer';
+import {substitutionsWidget} from './widgets/subst-table';
+import {getDistributionWidget} from './widgets/distribution';
 
 export class PeptidesModel {
   static _modelName = 'peptidesModel';
-  
+
   _statsDataFrameSubject = new Subject<DG.DataFrame>();
   _sarGridSubject = new Subject<DG.Grid>();
   _sarVGridSubject = new Subject<DG.Grid>();
-  // _groupMappingSubject = new Subject<StringDictionary>();
-  _substitutionTableSubject = new Subject<DG.DataFrame>();
+  _substitutionTableSubject = new Subject<type.SubstitutionsInfo>();
 
   _isUpdating: boolean = false;
   _isSubstInitialized = false;
   isBitsetChangedInitialized = false;
+  isCellChanging = false;
 
   //viewer properties
-  // _grouping!: boolean;
   _filterMode!: boolean;
   _twoColorMode!: boolean;
   _activityScaling!: string;
@@ -39,79 +44,107 @@ export class PeptidesModel {
   _sarVGrid!: DG.Grid;
   _sourceGrid!: DG.Grid;
   _dataFrame: DG.DataFrame;
-  _substitutionTable!: DG.DataFrame;
-  splitCol!: DG.Column;
+  splitCol!: DG.Column<boolean>;
   stackedBarchart!: StackedBarChart;
+  edf: DG.DataFrame | null = null;
+
+  substitutionsInfo: type.SubstitutionsInfo = new Map();
+  isInitialized: boolean = false;
+  currentView!: DG.TableView;
 
-  // _substTableTooltipData!: { [aar: string]: number[][][]; };
-  _casesTable!: type.SubstitutionCases;
-  _substTableTooltipData!: type.SubstitutionTooltips;
+  _currentSelection!: type.SelectionObject;
+  isPeptideSpaceChangingBitset: boolean = false;
+  isChangingEdfBitset: boolean = false;
 
   private constructor(dataFrame: DG.DataFrame) {
     this._dataFrame = dataFrame;
-    this._dataFrame.temp[C.PEPTIDES_ANALYSIS] = true;
-
     this.updateProperties();
   }
 
-  static getInstance(dataFrame: DG.DataFrame): PeptidesModel {
+  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);
+    }
     dataFrame.temp[PeptidesModel.modelName] ??= new PeptidesModel(dataFrame);
-    return dataFrame.temp[PeptidesModel.modelName];
+    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();}
+
+  get onSARVGridChanged(): Observable<DG.Grid> {return this._sarVGridSubject.asObservable();}
+
+  get onSubstTableChanged(): Observable<type.SubstitutionsInfo> {return this._substitutionTableSubject.asObservable();}
+
+  get currentSelection(): type.SelectionObject {
+    this._currentSelection ??= JSON.parse(this._dataFrame.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.invalidateSelection();
+  }
+
+  invalidateSelection(): void {
+    this.fireBitsetChanged();
+    this.invalidateGrids();
   }
 
-  updateProperties() {
+  createAccordion() {
+    const acc = ui.accordion('Selection info');
+    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);
+
+    return acc;
+  }
+
+  updateProperties(): void {
     this._activityScaling = this._dataFrame.tags['scaling'];
-    this._filterMode = this.stringToBool(this._dataFrame.tags['filterMode']);
-    this._twoColorMode = this.stringToBool(this._dataFrame.tags['bidirectionalAnalysis']);
-    // this._grouping = this.stringToBool(this._dataFrame.tags['grouping']);
-    this._isSubstitutionOn = this.stringToBool(this._dataFrame.tags['showSubstitution']);
+    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']);
   }
 
-  stringToBool(str: string) {
-    return str === 'true' ? true : false;
-  }
-
   setProperties(
     activityScaling: string, filterMode: boolean, twoColorMode: boolean, isSubstitutionOn: boolean,
     maxSubstitutions: number, activityLimit: number, forceUpdate = false,
-  ) {
-    const chooseAction = (value: string, defaultValue: any) => forceUpdate ? value : defaultValue ?? value;
+  ): 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['grouping'] = chooseAction(`${grouping}`, this._dataFrame.tags['grouping']);
-    this._dataFrame.tags['showSubstitution'] = chooseAction(`${isSubstitutionOn}`, this._dataFrame.tags['showSubstitution']);
-    this._dataFrame.tags['maxSubstitutions'] = chooseAction(`${maxSubstitutions}`, this._dataFrame.tags['maxSubstitutions']);
+    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();
   }
 
-  get dataFrame(): DG.DataFrame {return this._dataFrame;}
-
-  get onStatsDataFrameChanged(): Observable<DG.DataFrame> {return this._statsDataFrameSubject.asObservable();}
-
-  get onSARGridChanged(): Observable<DG.Grid> {return this._sarGridSubject.asObservable();}
-
-  get onSARVGridChanged(): Observable<DG.Grid> {return this._sarVGridSubject.asObservable();}
-
-  // get onGroupMappingChanged(): Observable<StringDictionary> {return this._groupMappingSubject.asObservable();}
-
-  get onSubstTableChanged(): Observable<DG.DataFrame> {return this._substitutionTableSubject.asObservable();}
-
-  get substTooltipData(): type.SubstitutionTooltips {return this._substTableTooltipData!;}
-
   async updateData(
-    activityScaling?: string, sourceGrid?: DG.Grid, twoColorMode?: boolean,  activityLimit?: number, 
+    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._grouping = grouping ?? this._grouping;
     this._activityLimit = activityLimit ?? this._activityLimit;
     this._maxSubstitutions = maxSubstitutions ?? this._maxSubstitutions;
     this._isSubstitutionOn = isSubstitutionOn ?? this._isSubstitutionOn;
@@ -122,81 +155,68 @@ export class PeptidesModel {
     await this.updateDefault();
   }
 
-  async updateDefault() {
+  async updateDefault(): Promise<void> {
     if (this._activityScaling && this._sourceGrid && this._twoColorMode !== null && !this._isUpdating) {
       this._isUpdating = true;
-      const [viewerGrid, viewerVGrid, statsDf, substTable] = await this.initializeViewersComponents();
+      const [viewerGrid, viewerVGrid, statsDf] = await this.initializeViewersComponents();
       //FIXME: modify during the initializeViewersComponents stages
       this._statsDataFrameSubject.next(statsDf);
-      // this._groupMappingSubject.next(groupMapping);
       this._sarGridSubject.next(viewerGrid);
       this._sarVGridSubject.next(viewerVGrid);
       if (this._isSubstitutionOn) {
-        this._substitutionTableSubject.next(substTable);
+        this._substitutionTableSubject.next(this.substitutionsInfo);
         this._isSubstInitialized = true;
       }
     }
     await this.updateBarchart();
-    this.invalidateGrids();
+    this.invalidateSelection();
 
     this._isUpdating = false;
   }
 
-  async updateBarchart() {
+  async updateBarchart(): Promise<void> {
     this.stackedBarchart ??= await this._dataFrame?.plot.fromType('StackedBarChartAA') as StackedBarChart;
     if (this.stackedBarchart && this._sourceGrid)
       addViewerToHeader(this._sourceGrid, this.stackedBarchart);
   }
 
-  static get modelName() { return PeptidesModel._modelName; }
-
-  async initializeViewersComponents(): Promise<[DG.Grid, DG.Grid, DG.DataFrame, DG.DataFrame]> {
+  async initializeViewersComponents(): Promise<[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 as DG.ColumnList).bySemType(C.SEM_TYPES.ALIGNED_SEQUENCE)!;
-    [splitSeqDf, invalidIndexes] = PeptidesController.splitAlignedPeptides(col);
+    const col: DG.Column = this._dataFrame.columns.bySemType(C.SEM_TYPES.ALIGNED_SEQUENCE)!;
+    [splitSeqDf, invalidIndexes] = PeptidesModel.splitAlignedPeptides(col);
 
-    const positionColumns = (splitSeqDf.columns as DG.ColumnList).names();
-    const renderColNames: string[] = (splitSeqDf.columns as DG.ColumnList).names();
+    const positionColumns = splitSeqDf.columns.names();
+    const renderColNames: string[] = splitSeqDf.columns.names();
 
-    (splitSeqDf.columns as DG.ColumnList).add(this._dataFrame.getCol(C.COLUMNS_NAMES.ACTIVITY));
+    const activityCol = this._dataFrame.columns.bySemType(C.SEM_TYPES.ACTIVITY)!;
+    splitSeqDf.columns.add(activityCol);
 
-    this.joinDataFrames(this._dataFrame, positionColumns, splitSeqDf);
+    this.joinDataFrames(positionColumns, splitSeqDf);
 
-    for (const dfCol of (this._dataFrame.columns as DG.ColumnList)) {
-      if (splitSeqDf.col(dfCol.name) && dfCol.name != C.COLUMNS_NAMES.ACTIVITY)
-        PeptidesController.setAARRenderer(dfCol, this._sourceGrid);
+    for (const dfCol of this._dataFrame.columns) {
+      if (positionColumns.includes(dfCol.name))
+        setAARRenderer(dfCol, this._sourceGrid);
     }
 
     this.sortSourceGrid(this._sourceGrid);
 
-    await this.createScaledCol(this._activityScaling!, this._dataFrame, this._sourceGrid, splitSeqDf);
+    await this.createScaledCol(this._activityScaling, this._dataFrame, this._sourceGrid, splitSeqDf);
 
     //unpivot a table and handle duplicates
     splitSeqDf = splitSeqDf.groupBy(positionColumns)
       .add('med', C.COLUMNS_NAMES.ACTIVITY_SCALED, C.COLUMNS_NAMES.ACTIVITY_SCALED)
       .aggregate();
 
-    const peptidesCount = splitSeqDf.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED).length;
+    const peptidesCount = splitSeqDf.rowCount;
 
     let matrixDf = splitSeqDf.unpivot(
       [C.COLUMNS_NAMES.ACTIVITY_SCALED], positionColumns, C.COLUMNS_NAMES.POSITION, C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
 
-    //TODO: move to chem palette
-    // let groupMapping: StringDictionary = {};
-    // if (this._grouping) {
-    //   groupMapping = C.aarGroups;
-    //   const aarCol = matrixDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
-    //   aarCol.init((index) => groupMapping[aarCol.get(index)[0]] ?? '-');
-    //   aarCol.compact();
-    // } else
-    //   Object.keys(C.aarGroups).forEach((value) => groupMapping[value] = value);
-
-
     //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);
@@ -210,15 +230,15 @@ export class PeptidesModel {
     matrixDf.name = 'SAR';
 
     // Setting category order
-    await this.setCategoryOrder(this._twoColorMode!, statsDf, matrixDf);
+    await this.setCategoryOrder(this._twoColorMode, statsDf, matrixDf);
 
     // SAR vertical table (naive, choose best Mean difference from pVals <= 0.01)
-    const sequenceDf = this.createVerticalTable(statsDf, this._twoColorMode!);
+    const sequenceDf = this.createVerticalTable(statsDf, this._twoColorMode);
     renderColNames.push(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
 
-    let substTable: DG.DataFrame | null = null;
+
     if (this._isSubstitutionOn || !this._isSubstInitialized)
-      substTable = this.calcSubstitutions();
+      this.calcSubstitutions();
 
     //TODO: move everything below out to controller
     const [sarGrid, sarVGrid] = this.createGrids(matrixDf, positionColumns, sequenceDf);
@@ -234,165 +254,112 @@ export class PeptidesModel {
 
     this.setInteractionCallback();
 
-    this.modifyOrCreateSplitCol(C.CATEGORIES.ALL, C.CATEGORIES.ALL);
-
     this.setBitsetCallback();
 
     this.postProcessGrids(this._sourceGrid, invalidIndexes, sarGrid, sarVGrid);
 
-    if (this.dataFrame.tags[C.TAGS.AAR] && this.dataFrame.tags[C.TAGS.POSITION]) {
-      const sarDf = sarGrid.dataFrame;
-      const rowCount = sarDf.rowCount;
-      let index = -1;
-      for (let i = 0; i < rowCount; i++) {
-        if (sarDf.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, i) === this.dataFrame.tags[C.TAGS.AAR]) {
-          index = i;
-          break;
-        }
-      }
-      sarDf.currentCell = sarDf.cell(index, this.dataFrame.tags[C.TAGS.POSITION]);
-    }
-
     //TODO: return class instead
-    return [sarGrid, sarVGrid, statsDf, substTable!];
+    return [sarGrid, sarVGrid, statsDf];
   }
 
-  calcSubstitutions() {
-    // const col: DG.Column = this.dataFrame.columns.bySemType(C.SEM_TYPES.ALIGNED_SEQUENCE);
-    // const values: number[] = this.dataFrame.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED).toList();
-    const activityValues = this.dataFrame.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
-    // const splitedMatrix = this.split(col);
-     const columnList = (this.dataFrame.columns as DG.ColumnList).toList()
-      .filter(col => col.semType === C.SEM_TYPES.AMINO_ACIDS);
-    if (columnList.length === 0)
-      throw new Error(`Couldn't find any column of semType '${C.SEM_TYPES.AMINO_ACIDS}'`);
-
-    const tableValues: { [aar: string]: number[]; } = {};
-    const tableTooltips: { [aar: string]: {}[][]; } = {};
-    const tableCases: { [aar: string]: number[][][]; } = {};
-
-    // const nRows = splitedMatrix.length;
-    // const nCols = splitedMatrix[0].length;
-    // const nColsArray = Array(nCols);
+  //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 nCols = columnList.length;
-    const nRows = this.dataFrame.rowCount;
+    if (nCols == 0)
+      throw new Error(`Couldn't find any column of semType '${C.SEM_TYPES.AMINO_ACIDS}'`);
 
-    //TODO: this looks **very** expensive
-    for (let i = 0; i < nRows - 1; i++) {
-      for (let j = i + 1; j < nRows; j++) {
+    this.substitutionsInfo = new Map();
+    const nRows = this._dataFrame.rowCount;
+    for (let seq1Idx = 0; seq1Idx < nRows - 1; seq1Idx++) {
+      for (let seq2Idx = seq1Idx + 1; seq2Idx < nRows; seq2Idx++) {
         let substCounter = 0;
-        const subst1: { [pos: number]: [string, {key: string, value: string, diff: number}] } = {};
-        const subst2: { [pos: number]: [string, {key: string, value: string, diff: number}] } = {};
-        const activityValI = activityValues.get(i) as number;
-        const activityValJ = activityValues.get(j) as number;
-        const strActivityValI = activityValI.toFixed(2);
-        const strActivityValJ = activityValJ.toFixed(2);
-        const delta = activityValI - activityValJ;
-
+        const activityValSeq1 = activityValues.get(seq1Idx);
+        const activityValSeq2 = activityValues.get(seq2Idx);
+        const delta = activityValSeq1 - activityValSeq2;
         if (Math.abs(delta) < this._activityLimit)
           continue;
 
-        for (let k = 0; k < nCols; k++) {
-          // const smik = splitedMatrix[i][k];
-          // const smjk = splitedMatrix[j][k];
-          const smik = columnList[k].get(i) as string;
-          const smjk = columnList[k].get(j) as string;
-
-          if (smik === smjk)
+        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);
+          if (seq1monomer == seq2monomer)
             continue;
 
           substCounter++;
-          subst1[k] = [
-            smik,
-            {
-              key: `${smik === '-' ? 'Empty' : smik} → ${smjk === '-' ? 'Empty' : smjk}`,
-              value: `${strActivityValI} → ${strActivityValJ}`,
-              diff: -delta,
-            },
-          ];
-          subst2[k] = [
-            smjk,
-            {
-              key: `${smjk === '-' ? 'Empty' : smjk} → ${smik === '-' ? 'Empty' : smik}`,
-              value: `${strActivityValJ} → ${strActivityValI}`,
-              diff: delta,
-            },
-          ];
+          substCounterFlag = substCounter > this._maxSubstitutions;
+          if (substCounterFlag)
+            break;
+
+          tempData.push({
+            pos: currentPosCol.name,
+            seq1monomer: seq1monomer,
+            seq2monomer: seq2monomer,
+            seq1Idx: seq1Idx,
+            seq2Idx: seq2Idx,
+          });
         }
 
-        if (substCounter > this._maxSubstitutions || substCounter === 0)
+        if (substCounterFlag || substCounter == 0)
           continue;
 
-        for (const subst of [subst1, subst2]) {
-          Object.keys(subst).forEach((pos) => {
-            const posInt = parseInt(pos);
-            const aar = subst[posInt][0];
-            if (!Object.keys(tableValues).includes(aar)) {
-              // tableValues[aar] = Array(...nColsArray).map(() => DG.INT_NULL);
-              // tableTooltips[aar] = Array(...nColsArray).map(() => []);
-              // tableCases[aar] = Array(...nColsArray).map(() => []);
-              tableValues[aar] = Array(nCols).fill(DG.INT_NULL);
-              tableTooltips[aar] = Array(nCols).fill([]);
-              tableCases[aar] = Array(nCols).fill([]);
-            }
-
-            tableValues[aar][posInt] = tableValues[aar][posInt] === DG.INT_NULL ? 1 : tableValues[aar][posInt] + 1;
-            tableTooltips[aar][posInt] = !tableTooltips[aar][posInt].length ?
-              [{key: 'Substitution', value: 'Values'}] : tableTooltips[aar][posInt];
-            tableTooltips[aar][posInt].push(subst[posInt][1]);
-            tableCases[aar][posInt].push([i, j, subst == subst1 ? delta : -delta]);
-          });
-        }
-      }
-    }
+        for (const tempDataElement of tempData) {
+          const position = tempDataElement.pos;
 
-    const tableValuesKeys = Object.keys(tableValues);
-    const dfLength = tableValuesKeys.length;
-    const cols = columnList.map(col => {
-      const newCol = DG.Column.int(`${col.name}`, dfLength);
-      newCol.semType = 'Substitution';
-      return newCol;
-    });
-    const aarCol = DG.Column.string(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, dfLength);
-    cols.splice(0, 0, aarCol);
-    const table = DG.DataFrame.fromColumns(cols);
-
-    for (let i = 0; i < dfLength; i++) {
-      const aar = tableValuesKeys[i];
-      // tableValues[aar].splice(0, 1);
-      table.rows.setValues(i, [aar, ...tableValues[aar]]);
-    }
+          //Working with seq1monomer
+          const seq1monomer = tempDataElement.seq1monomer;
+          if (!this.substitutionsInfo.has(seq1monomer))
+            this.substitutionsInfo.set(seq1monomer, new Map());
 
-    // let groupMapping: { [key: string]: string } =  {};
+          let positionsMap = this.substitutionsInfo.get(seq1monomer)!;
+          if (!positionsMap.has(position))
+            positionsMap.set(position, new Map());
 
-    //TODO: enable grouping
-    // Object.keys(aarGroups).forEach((value) => groupMapping[value] = value);
-    this._substTableTooltipData = tableTooltips;
-    this._casesTable = tableCases;
-    this.substitutionTable = table;
+          let indexes = positionsMap.get(position)!;
 
-    return table;
-  }
+          !indexes.has(seq1Idx) ? indexes.set(seq1Idx, [seq2Idx]) : (indexes.get(seq1Idx)! as number[]).push(seq2Idx);
+
+          //Working with seq2monomer
+          const seq2monomer = tempDataElement.seq2monomer;
+          if (!this.substitutionsInfo.has(seq2monomer))
+            this.substitutionsInfo.set(seq2monomer, new Map());
+
+          positionsMap = this.substitutionsInfo.get(seq2monomer)!;
+          if (!positionsMap.has(position))
+            positionsMap.set(position, new Map());
+
+          indexes = positionsMap.get(position)!;
+          !indexes.has(seq2Idx) ? indexes.set(seq2Idx, [seq1Idx]) : (indexes.get(seq2Idx)! as number[]).push(seq1Idx);
+        }
+      }
+    }
 
-  get substitutionTable() { return this._substitutionTable; }
-  set substitutionTable(table: DG.DataFrame) {
-    if (!table)
-      throw new Error(`Substitution table cannot be set to null`);
-    this._substitutionTable = table;
-    this._substitutionTableSubject.next(table);
+    const TypedArray = getTypedArrayConstructor(nRows);
+    for (const positionMap of this.substitutionsInfo.values()) {
+      for (const indexMap of positionMap.values()) {
+        for (const [index, indexArray] of indexMap.entries())
+          indexMap.set(index, new TypedArray(indexArray));
+      }
+    }
   }
 
-  joinDataFrames(df: DG.DataFrame, positionColumns: string[], splitSeqDf: DG.DataFrame) {
+  joinDataFrames(positionColumns: string[], splitSeqDf: DG.DataFrame): void {
     // append splitSeqDf columns to source table and make sure columns are not added more than once
-    const dfColsSet = new Set((df.columns as DG.ColumnList).names());
+    const name = this._dataFrame.name;
+    const dfColsSet = new Set(this._dataFrame.columns.names());
     if (!positionColumns.every((col: string) => dfColsSet.has(col))) {
-      df.join(
-        splitSeqDf, [C.COLUMNS_NAMES.ACTIVITY], [C.COLUMNS_NAMES.ACTIVITY], (df.columns as DG.ColumnList).names(),
-        positionColumns, 'inner', true);
+      this._dataFrame.join(splitSeqDf, [C.COLUMNS_NAMES.ACTIVITY], [C.COLUMNS_NAMES.ACTIVITY],
+        this._dataFrame.columns.names(), positionColumns, 'inner', true);
     }
+    this._dataFrame.name = name;
+    this.currentView.name = name;
   }
 
-  sortSourceGrid(sourceGrid: DG.Grid) {
+  sortSourceGrid(sourceGrid: DG.Grid): void {
     if (sourceGrid) {
       const colNames: DG.GridColumn[] = [];
       for (let i = 1; i < sourceGrid.columns.length; i++)
@@ -412,54 +379,57 @@ export class PeptidesModel {
     }
   }
 
+  //TODO: move out, merge with controller's scaleActivity
   async createScaledCol(
     activityScaling: string, df: DG.DataFrame, sourceGrid: DG.Grid, splitSeqDf: DG.DataFrame,
-  ) {
-    const [scaledDf, newColName] = await PeptidesController.scaleActivity(
-      activityScaling, df, df.temp[C.COLUMNS_NAMES.ACTIVITY]);
+  ): Promise<void> {
+    const [scaledDf, newColName] = await PeptidesModel.scaleActivity(
+      activityScaling, df, df.tags[C.COLUMNS_NAMES.ACTIVITY]);
     //TODO: make another func
     const scaledCol = scaledDf.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
-    (splitSeqDf.columns as DG.ColumnList).add(scaledCol);
+    scaledCol.semType = C.SEM_TYPES.ACTIVITY_SCALED;
+    splitSeqDf.columns.add(scaledCol);
     const oldScaledCol = df.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
-    (df.columns as DG.ColumnList).replace(oldScaledCol, scaledCol);
+    df.columns.replace(oldScaledCol, scaledCol);
     const gridCol = sourceGrid.col(C.COLUMNS_NAMES.ACTIVITY_SCALED);
     if (gridCol !== null) {
       gridCol.name = newColName;
-      df.temp[C.COLUMNS_NAMES.ACTIVITY_SCALED] = newColName;
+      df.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED] = newColName;
     }
 
     sourceGrid.columns.setOrder([newColName]);
   }
 
-  async calculateStatistics(matrixDf: DG.DataFrame, peptidesCount: number, splitSeqDf: DG.DataFrame) {
+  //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;
-    //@ts-ignore: never gets old
     matrixDf.rows.filter((row) => row.Count >= countThreshold && row.Count <= peptidesCount - countThreshold);
     matrixDf = matrixDf.clone(matrixDf.filter);
 
     // calculate additional stats
-    await (matrixDf.columns as DG.ColumnList).addNewCalculated('Ratio', '${count}/'.concat(`${peptidesCount}`));
+    await matrixDf.columns.addNewCalculated('Ratio', '${count}/'.concat(`${peptidesCount}`));
 
     //calculate p-values based on t-test
     let pvalues: Float32Array = new Float32Array(matrixDf.rowCount).fill(1);
-    const mdCol: DG.Column = (matrixDf.columns as DG.ColumnList).addNewFloat(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
-    const pValCol: DG.Column = (matrixDf.columns as DG.ColumnList).addNewFloat(C.COLUMNS_NAMES.P_VALUE);
+    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 aarCol = matrixDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
+    const posCol = matrixDf.getCol(C.COLUMNS_NAMES.POSITION);
     for (let i = 0; i < matrixDf.rowCount; i++) {
-      const position = matrixDf.get(C.COLUMNS_NAMES.POSITION, i);
-      const aar = matrixDf.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, i);
+      const position = posCol.get(i);
+      const aar = aarCol.get(i);
 
-      //@ts-ignore
       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();
 
-      //@ts-ignore
       splitSeqDf.rows.select((row) => row[position] !== aar);
       const otherActivity: number[] = splitSeqDf
         .clone(splitSeqDf.selection, [C.COLUMNS_NAMES.ACTIVITY_SCALED])
@@ -467,7 +437,6 @@ export class PeptidesModel {
         .toList();
 
       const testResult = tTest(currentActivity, otherActivity);
-      // testResult = uTest(currentActivity, otherActivity);
       const currentMeanDiff = testResult[C.COLUMNS_NAMES.MEAN_DIFFERENCE]!;
       const pvalue = testResult[currentMeanDiff >= 0 ? 'p-value more' : 'p-value less'];
 
@@ -483,25 +452,25 @@ export class PeptidesModel {
     return matrixDf.clone();
   }
 
-  async setCategoryOrder(twoColorMode: boolean, statsDf: DG.DataFrame, matrixDf: 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 as DG.ColumnList).addNewCalculated(absMD, 'Abs(${Mean difference})');
+      await statsDf.columns.addNewCalculated(absMD, 'Abs(${Mean difference})');
 
     const aarWeightsDf = 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) => aarWeightsDf
+    const getWeight = (aar: string): number => aarWeightsDf
       .groupBy(['weight'])
       .where(`${C.COLUMNS_NAMES.AMINO_ACID_RESIDUE} = ${aar}`)
       .aggregate()
-      .get('weight', 0);
+      .get('weight', 0) as number;
     aarList.sort((first, second) => getWeight(second) - getWeight(first));
 
     matrixDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE).setCategoryOrder(aarList);
   }
 
-  createVerticalTable(statsDf: DG.DataFrame, twoColorMode: boolean) {
+  createVerticalTable(statsDf: DG.DataFrame, twoColorMode: boolean): 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];
@@ -511,47 +480,51 @@ export class PeptidesModel {
 
     let tempStats: DG.Stats;
     const maxAtPos: {[index: string]: number} = {};
-    for (const pos of sequenceDf.getCol(C.COLUMNS_NAMES.POSITION).categories) {
-      tempStats = DG.Stats.fromColumn(
-        sequenceDf.getCol(C.COLUMNS_NAMES.MEAN_DIFFERENCE),
-        DG.BitSet.create(sequenceDf.rowCount, (i) => sequenceDf.get(C.COLUMNS_NAMES.POSITION, i) === pos),
-      );
+    const posColCategories = sequenceDf.getCol(C.COLUMNS_NAMES.POSITION).categories;
+    const mdCol = sequenceDf.getCol(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
+    const posCol = sequenceDf.getCol(C.COLUMNS_NAMES.POSITION);
+    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 ?
-        (tempStats.max > Math.abs(tempStats.min) ? tempStats.max : tempStats.min) : tempStats.max;
+        (tempStats.max > Math.abs(tempStats.min) ? tempStats.max : tempStats.min) :
+        tempStats.max;
     }
-    sequenceDf = sequenceDf.clone(DG.BitSet.create(sequenceDf.rowCount, (i) =>
-      sequenceDf.get(C.COLUMNS_NAMES.MEAN_DIFFERENCE, i) === maxAtPos[sequenceDf.get(C.COLUMNS_NAMES.POSITION, i)]));
+    sequenceDf = sequenceDf.clone(DG.BitSet.create(rowCount, (i) => mdCol.get(i) === maxAtPos[posCol.get(i)]));
 
     return sequenceDf;
   }
 
-  createGrids(matrixDf: DG.DataFrame, positionColumns: string[], sequenceDf: DG.DataFrame) {
+  createGrids(matrixDf: DG.DataFrame, positionColumns: string[], sequenceDf: DG.DataFrame): 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[]));
 
     const sarVGrid = sequenceDf.plot.grid();
     sarVGrid.sort([C.COLUMNS_NAMES.POSITION]);
-    sarVGrid.col(C.COLUMNS_NAMES.P_VALUE)!.format = 'four digits after comma';
-    sarVGrid.col(C.COLUMNS_NAMES.P_VALUE)!.name = 'P-Value';
+    const pValGridCol = sarVGrid.col(C.COLUMNS_NAMES.P_VALUE)!;
+    pValGridCol.format = '#.000';
+    pValGridCol.name = 'P-value';
 
-    let tempCol = (matrixDf.columns as DG.ColumnList).byName(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
+    let tempCol = matrixDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
     if (tempCol)
-      PeptidesController.setAARRenderer(tempCol, sarGrid);
+      setAARRenderer(tempCol, sarGrid);
 
-    tempCol = (sequenceDf.columns as DG.ColumnList).byName(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
+    tempCol = sequenceDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
     if (tempCol)
-      PeptidesController.setAARRenderer(tempCol, sarGrid);
+      setAARRenderer(tempCol, 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);
-    const cellRendererAction = (args: DG.GridCellRenderArgs) => {
+    //decompose into two different renering funcs
+    const cellRendererAction = (args: DG.GridCellRenderArgs): void => {
       const canvasContext = args.g;
       const bound = args.bounds;
       const cell = args.cell;
@@ -574,12 +547,10 @@ export class PeptidesModel {
 
       if (cell.isTableCell && tableColName && tableRowIndex !== null && renderColNames.indexOf(tableColName) !== -1) {
         const gridTable = cell.grid.table;
-        const currentPosition = tableColName !== C.COLUMNS_NAMES.MEAN_DIFFERENCE ?
+        const currentPosition: string = tableColName !== C.COLUMNS_NAMES.MEAN_DIFFERENCE ?
           tableColName : gridTable.get(C.COLUMNS_NAMES.POSITION, tableRowIndex);
-        const currentAAR = gridTable.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, tableRowIndex);
-        if (currentAAR === 'Aib' && currentPosition === '02')
-          console.log('stop');
-        
+        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}`;
@@ -601,9 +572,9 @@ export class PeptidesModel {
             coef = DG.Color.toHtml(DG.Color.lightLightGray);
 
 
-          const chooseMin = () => twoColorMode ? 0 : mdCol.min;
-          const chooseMax = () => twoColorMode ? Math.max(Math.abs(mdCol.min), mdCol.max) : mdCol.max;
-          const chooseCurrent = () => twoColorMode ? Math.abs(cellValue) : cellValue;
+          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());
 
@@ -619,15 +590,20 @@ export class PeptidesModel {
           if (isSubstitutionOn) {
             canvasContext.textBaseline = 'middle';
             canvasContext.textAlign = 'center';
-            canvasContext.fillStyle = DG.Color.toHtml(DG.Color.black);
-            // DG.Color.getContrastColor()
+            canvasContext.fillStyle = DG.Color.toHtml(DG.Color.getContrastColor(DG.Color.fromHtml(coef)));
             canvasContext.font = '13px Roboto, Roboto Local, sans-serif';
-            const substValue = this.substitutionTable.groupBy([currentPosition])
-              .where(queryAAR)
-              .aggregate()
-              .get(currentPosition, 0);
-            if (substValue && substValue !== DG.INT_NULL)
-              canvasContext.fillText(substValue, midX, midY);
+            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);
           }
         }
         args.preventDefault();
@@ -638,17 +614,18 @@ export class PeptidesModel {
     sarVGrid.onCellRender.subscribe(cellRendererAction);
   }
 
+  //FIXME: doesn't work at all
   setTooltips(
     renderColNames: string[], statsDf: DG.DataFrame, peptidesCount: number, sarGrid: DG.Grid, sarVGrid: DG.Grid,
     sourceDf: DG.DataFrame,
-  ) {
-    const onCellTooltipAction = async (cell: DG.GridCell, x: number, y: number) => {
+  ): 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 as DG.ColumnList).names()) {
+        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);
@@ -672,11 +649,6 @@ export class PeptidesModel {
         ui.tooltip.show(ui.tableFromMap(tooltipMap), x, y);
       }
       if (!cell.isColHeader && cell.tableColumn?.name == C.COLUMNS_NAMES.AMINO_ACID_RESIDUE) {
-        // if (grouping) {
-        //   const currentGroup = C.groupDescription[cell.cell.value];
-        //   const divText = ui.divText('Amino Acids in this group: ' + currentGroup[C.SEM_TYPES.AMINO_ACIDS].join(', '));
-        //   ui.tooltip.show(ui.divV([ui.h3(currentGroup['description']), divText]), x, y);
-        // } else {
         const monomerLib = sourceDf.temp[MonomerLibrary.id];
         ChemPalette.showTooltip(cell, x, y, monomerLib);
       }
@@ -686,53 +658,71 @@ export class PeptidesModel {
     sarVGrid.onCellTooltip(onCellTooltipAction);
   }
 
-  setInteractionCallback() {
+  //TODO: think about it, move out?
+  setInteractionCallback(): void {
     const sarDf = this._sarGrid.dataFrame;
     const sarVDf = this._sarVGrid.dataFrame;
 
-    const getAARandPosition = (isVertical = false): [string, string] => {
-      let aar : string;
-      let position: string;
-      if (isVertical) {
-        const currentRowIdx = sarVDf.currentRowIdx;
-        aar = sarVDf.get(C.COLUMNS_NAMES.MEAN_DIFFERENCE, currentRowIdx);
-        position = sarVDf.get(C.COLUMNS_NAMES.POSITION, currentRowIdx);
-      } else {
-        aar = sarDf.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, sarDf.currentRowIdx);
-        position = sarDf.currentCol.name;
-      }
-      return [aar, position];
+    const chooseAction = (aar: string, position: string, isShiftPressed: boolean) => {
+      isShiftPressed ? this.modifyCurrentSelection(aar, position) : this.initCurrentSelection(aar, position);
     };
 
-    this._sarGrid.onCurrentCellChanged.subscribe((gc) => {
-      const isNegativeRowIndex = sarDf.currentRowIdx === -1;
-      if (!sarDf.currentCol || (!sarDf.currentCell.value && !isNegativeRowIndex))
+    const gridCellValidation = (gc: DG.GridCell | null) => !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);
+      if (gridCellValidation(gridCell) || gridCell!.tableColumn!.name == C.COLUMNS_NAMES.AMINO_ACID_RESIDUE)
         return;
-      this.syncGrids(false, sarDf, sarVDf);
-      let aar: string = C.CATEGORIES.ALL;
-      let position: string = C.CATEGORIES.ALL;
-      if (!isNegativeRowIndex) {
-        [aar, position] = getAARandPosition();
-        this.dataFrame.tags[C.TAGS.AAR] = aar;
-        this.dataFrame.tags[C.TAGS.POSITION] = position;
-      } else {
-        this.dataFrame.tags[C.TAGS.AAR] = this.dataFrame.tags[C.TAGS.POSITION] = null;
-      }
-      this.dataFrame.temp['substTable'] = this.getSubstitutionTable();
-      this.modifyOrCreateSplitCol(aar, position);
-      this.fireBitsetChanged();
-      this.invalidateGrids();
-      grok.shell.o = this.dataFrame;
+
+      const position = gridCell!.tableColumn!.name;
+      const aar = sarDf.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, gridCell!.tableRowIndex!);
+      chooseAction(aar, position, ev.shiftKey);
     });
 
-    this._sarVGrid.onCurrentCellChanged.subscribe((gc) => {
-      if (!sarVDf.currentCol || sarVDf.currentRowIdx === -1)
+    this._sarVGrid.root.addEventListener('click', (ev) => {
+      const gridCell = this._sarVGrid.hitTest(ev.offsetX, ev.offsetY);
+      if (gridCellValidation(gridCell) || gridCell!.tableColumn!.name != C.COLUMNS_NAMES.MEAN_DIFFERENCE)
         return;
-      this.syncGrids(true, sarDf, sarVDf);
+
+      const tableRowIdx = gridCell!.tableRowIndex!;
+      const position = sarVDf.get(C.COLUMNS_NAMES.POSITION, tableRowIdx);
+      const aar = sarVDf.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, tableRowIdx);
+      chooseAction(aar, position, ev.shiftKey);
     });
+
+    const cellChanged = (table: DG.DataFrame) => {
+      if (this.isCellChanging)
+        return;
+      this.isCellChanging = true;
+      table.currentRowIdx = -1;
+      this.isCellChanging = false;
+    };
+    this._sarGrid.onCurrentCellChanged.subscribe((_gc) => cellChanged(sarDf));
+    this._sarVGrid.onCurrentCellChanged.subscribe((_gc) => cellChanged(sarVDf));
+  }
+
+  modifyCurrentSelection(aar: string, position: string): void {
+    const tempSelection = this.currentSelection;
+    if (!tempSelection.hasOwnProperty(position))
+      tempSelection[position] = [aar];
+    else {
+      const tempSelectionAt = tempSelection[position];
+      const aarIndex = tempSelectionAt.indexOf(aar);
+      aarIndex == -1 ? tempSelectionAt.push(aar) :
+        tempSelectionAt.length == 1 ? delete tempSelection[position] :
+          tempSelectionAt.splice(aarIndex, 1);
+    }
+
+    this.currentSelection = tempSelection;
+  }
+
+  initCurrentSelection(aar: string, position: string): void {
+    const tempSelection: type.SelectionObject = {};
+    tempSelection[position] = [aar];
+    this.currentSelection = tempSelection;
   }
 
-  invalidateGrids() {
+  invalidateGrids(): void {
     this.stackedBarchart?.computeData();
     this._sarGrid.invalidate();
     this._sarVGrid.invalidate();
@@ -740,22 +730,53 @@ export class PeptidesModel {
     //TODO: this.peptideSpaceGrid.invalidate();
   }
 
-  setBitsetCallback() {
+  setBitsetCallback(): void {
     if (this.isBitsetChangedInitialized)
       return;
-    const filter = this.dataFrame.filter;
-    const selection = this.dataFrame.selection;
+    const filter = this._dataFrame.filter;
+    const selection = this._dataFrame.selection;
 
-    const changeBitset = (currentBitset: DG.BitSet, previousBitset: DG.BitSet) => {
+    const changeBitset = (currentBitset: DG.BitSet, previousBitset: DG.BitSet): void => {
       previousBitset.setAll(!this._filterMode, false);
-      currentBitset.init((i) => {
-        const currentCategory = this.splitCol.get(i);
-        return currentCategory !== C.CATEGORIES.OTHER && currentCategory !== C.CATEGORIES.ALL;
-    }, false);
+
+      const edfSelection = this.edf?.selection;
+      if (this.isPeptideSpaceChangingBitset) {
+        if (edfSelection == null)
+          return;
+
+        currentBitset.init((i) => edfSelection.get(i) ?? false, false);
+        return;
+      }
+
+      const updateEdfSelection = () => {
+        this.isChangingEdfBitset = true;
+        edfSelection?.copyFrom(currentBitset);
+        this.isChangingEdfBitset = false;
+      };
+
+      const positionList = Object.keys(this.currentSelection);
+      if (positionList.length == 0) {
+        currentBitset.init(() => false, false);
+        updateEdfSelection();
+        return;
+      }
+
+      //TODO: move out
+      const getBitAt = (i: number) => {
+        for (const position of positionList) {
+          const positionCol: DG.Column<string> = this._dataFrame.getCol(position);
+          if (this._currentSelection[position].includes(positionCol.get(i)))
+            return true;
+        }
+        return false;
+      };
+      currentBitset.init(getBitAt, false);
+
+      updateEdfSelection();
     };
 
     const recalculateStatistics =
-      (bitset: DG.BitSet) => (this.dataFrame.temp[C.STATS] as FilteringStatistics).setMask(bitset);
+      (bitset: DG.BitSet): void => (this._dataFrame.temp[C.STATS] as FilteringStatistics).setMask(bitset);
 
     filter.onChanged.subscribe(() => {
       changeBitset(filter, selection);
@@ -768,9 +789,18 @@ export class PeptidesModel {
     this.isBitsetChangedInitialized = true;
   }
 
-  fireBitsetChanged() {(this._filterMode ? this._dataFrame.filter : this._dataFrame.selection).fireChanged();}
+  fireBitsetChanged(isPeptideSpaceSource: boolean = false): void {
+    this.isPeptideSpaceChangingBitset = isPeptideSpaceSource;
+    this.getBiteset().fireChanged();
+    this.isPeptideSpaceChangingBitset = false;
+    this.modifyOrCreateSplitCol();
+    grok.shell.o = this.createAccordion().root;
+  }
+
+  getBiteset(): DG.BitSet {return this._filterMode ? this._dataFrame.filter : this._dataFrame.selection;}
 
-  postProcessGrids(sourceGrid: DG.Grid, invalidIndexes: number[], sarGrid: DG.Grid, sarVGrid: DG.Grid) {
+  //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)
@@ -781,27 +811,77 @@ export class PeptidesModel {
     mdCol.name = 'Diff';
 
     for (const grid of [sarGrid, sarVGrid]) {
-      grid.props.rowHeight = 20;
-      grid.columns.rowHeader!.width = 20;
-      for (let i = 0; i < grid.columns.length; ++i) {
-        const col = grid.columns.byIndex(i)!;
-        if (grid == sarVGrid && col.name !== 'Diff' && col.name !== C.COLUMNS_NAMES.AMINO_ACID_RESIDUE)
-          col.width = 45;
+      const gridProps = grid.props;
+      gridProps.rowHeight = 20;
+      const girdCols = grid.columns;
+      const colNum = girdCols.length;
+      for (let i = 0; i < colNum; ++i) {
+        const col = girdCols.byIndex(i)!;
+        const colName = col.name;
+        if (grid == sarVGrid && colName !== 'Diff' && colName !== C.COLUMNS_NAMES.AMINO_ACID_RESIDUE)
+          col.width = 50;
         else
-          col.width = grid.props.rowHeight;
+          col.width = gridProps.rowHeight + 10;
       }
     }
 
-    // if (grouping) {
-    //   sarGrid.col(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE)!.name = 'Groups';
-    //   sarVGrid.col(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE)!.name = 'Groups';
-    // }
+    const setViewerGridProps = (grid: DG.Grid) => {
+      grid.props.allowEdit = false;
+      grid.props.allowRowSelection = false;
+      grid.props.allowBlockSelection = false;
+    };
+
+    setViewerGridProps(sarGrid);
+    setViewerGridProps(sarVGrid);
+  }
+
+  getSplitColValueAt(index: number, aar: string, position: string, aarLabel: string): string {
+    const currentAAR = this._dataFrame.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);
+    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;
 
-    sarGrid.props.allowEdit = false;
-    sarVGrid.props.allowEdit = false;
+    return [tempDf, newColName];
   }
 
-  split(peptideColumn: DG.Column, filter: boolean = true): string[][] {
+  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;
@@ -809,16 +889,16 @@ export class PeptidesModel {
     const colLength = peptideColumn.length;
 
     // splitting data
-    const monomerLengths: { [index: string]: number } = {};
+    const monomerLengths: {[index: string]: number} = {};
     for (let i = 0; i < colLength; i++) {
-      currentSplitPeptide = peptideColumn.get(i).split('-').map((value: string) => value ? value : '-');
+      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;
     }
-    //@ts-ignore: what I do here is converting string to number the most effective way I could find. parseInt is slow
-    modeMonomerCount = 1 * Object.keys(monomerLengths).reduce((a, b) => monomerLengths[a] > monomerLengths[b] ? a : b);
+    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
@@ -841,9 +921,9 @@ export class PeptidesModel {
     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-terminal');
-    columnNames.push('C-terminal');
+    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) {
@@ -856,134 +936,110 @@ export class PeptidesModel {
       });
     }
 
-    return splitPeptidesArray;
+    return [
+      DG.DataFrame.fromColumns(splitColumns.map((positionArray, index) => {
+        return DG.Column.fromList('string', columnNames[index], positionArray);
+      })),
+      invalidIndexes,
+    ];
   }
 
-  getSubstitutionTable() {
-    if (!this._casesTable)
-      this.calcSubstitutions();
-    const sarDf = this._sarGrid.dataFrame;
-    const sourceDf = this._sourceGrid.dataFrame;
-    if (sarDf.currentRowIdx === -1)
-      return null;
-    const currentColName = sarDf.currentCol.name;
-    if (currentColName !== C.COLUMNS_NAMES.AMINO_ACID_RESIDUE) {
-      const col: DG.Column = sourceDf.columns.bySemType(C.SEM_TYPES.ALIGNED_SEQUENCE);
-      const aar = sarDf.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, sarDf.currentRowIdx);
-      const pos = parseInt(currentColName);
-      const substitutionsCount = this.substitutionTable.groupBy([currentColName])
-        .where(`${C.COLUMNS_NAMES.AMINO_ACID_RESIDUE} = ${aar}`)
-        .aggregate()
-        .get(currentColName, 0);
-      if (substitutionsCount === DG.INT_NULL)
-        return null;
-      const currentCase = this._casesTable[aar][pos];
-      const tempDfLength = currentCase.length;
-      const initCol = DG.Column.string('Initial', tempDfLength);
-      const subsCol = DG.Column.string('Substituted', tempDfLength);
-
-      const tempDf = DG.DataFrame.fromColumns([
-        initCol,
-        subsCol,
-        DG.Column.float('Difference', tempDfLength),
-      ]);
-
-      for (let i = 0; i < tempDfLength; i++) {
-        const row = currentCase[i];
-        tempDf.rows.setValues(i, [col.get(row[0]), col.get(row[1]), row[2]]);
-      }
+  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));
+  }
+
+  /** 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]]);
 
-      // tempDf.temp['isReal'] = true;
 
-      initCol.semType = C.SEM_TYPES.ALIGNED_SEQUENCE;
-      initCol.temp['isAnalysisApplicable'] = false;
-      subsCol.semType = C.SEM_TYPES.ALIGNED_SEQUENCE;
-      subsCol.temp['isAnalysisApplicable'] = false;
+    this._dataFrame.temp[C.EMBEDDING_STATUS] = false;
+    const adjustCellSize = (grid: DG.Grid): void => {
+      const colNum = grid.columns.length;
+      for (let i = 0; i < colNum; ++i) {
+        const iCol = grid.columns.byIndex(i)!;
+        iCol.width = isNaN(parseInt(iCol.name)) ? 50 : 40;
+      }
+      grid.props.rowHeight = 20;
+    };
 
-      // grok.shell.o = DG.SemanticValue.fromValueType(tempDf, 'Substitution');
-      return tempDf;
+    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])
+        aarCol.visible = false;
     }
-    return null;
-  }
 
-  //TODO: refactor, use this.sarDf and accept aar & position as parameters
-  syncGrids(sourceVertical: boolean, sarDf: DG.DataFrame, sarVDf: DG.DataFrame) {
-    let otherColName: string;
-    let otherRowIndex: number;
-    const otherDf = sourceVertical ? sarDf : sarVDf;
+    const options = {scaling: this._dataFrame.tags['scaling']};
+    await this.updateData(this._dataFrame.tags['scaling'], sourceGrid, false, 1, 2, false, false);
 
-    if (otherDf.temp[C.FLAGS.CELL_CHANGING])
-      return;
+    const dockManager = this.currentView.dockManager;
 
-    //on vertical SAR viewer click
-    if (sourceVertical) {
-      const currentRowIdx = sarVDf.currentRowIdx;
-      const currentColName = sarVDf.currentCol.name;
-      if (currentColName !== C.COLUMNS_NAMES.MEAN_DIFFERENCE)
-        return;
+    const sarViewer = await this._dataFrame.plot.fromType('peptide-sar-viewer', options) as SARViewer;
 
-      otherColName = sarVDf.get(C.COLUMNS_NAMES.POSITION, currentRowIdx);
-      const otherRowName: string = sarVDf.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, currentRowIdx);
-      otherRowIndex = -1;
-      const rows = otherDf.rowCount;
-      for (let i = 0; i < rows; i++) {
-        if (otherDf.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, i) === otherRowName) {
-          otherRowIndex = i;
-          break;
-        }
-      }
-    //on SAR viewer click
-    } else {
-      otherColName = C.COLUMNS_NAMES.MEAN_DIFFERENCE;
-      const otherPos: string = sarDf.currentCol.name;
-      if (otherPos === C.COLUMNS_NAMES.AMINO_ACID_RESIDUE)
-        return;
+    const sarViewerVertical =
+      await this._dataFrame.plot.fromType('peptide-sar-viewer-vertical', options) as SARViewerVertical;
 
-      const otherAAR: string =
-        sarDf.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, sarDf.currentRowIdx);
-      otherRowIndex = -1;
-      for (let i = 0; i < sarVDf.rowCount; i++) {
-        if (
-          sarVDf.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, i) === otherAAR &&
-          sarVDf.get(C.COLUMNS_NAMES.POSITION, i) === otherPos
-        ) {
-          otherRowIndex = i;
-          break;
-        }
-      }
+    const sarViewersGroup: viewerTypes[] = [sarViewer, sarViewerVertical];
+
+    if (this._dataFrame.rowCount <= 10000) {
+      const peptideSpaceViewerOptions = {method: 'UMAP', measure: 'Levenshtein', cyclesCount: 100};
+      const peptideSpaceViewer =
+        await this._dataFrame.plot.fromType('peptide-space-viewer', peptideSpaceViewerOptions) as PeptideSpaceViewer;
+      dockManager.dock(peptideSpaceViewer, DG.DOCK_TYPE.RIGHT, null, 'Peptide Space Viewer');
     }
-    otherDf.temp[C.FLAGS.CELL_CHANGING] = true;
-    otherDf.currentCell = otherDf.cell(otherRowIndex, otherColName);
-    otherDf.temp[C.FLAGS.CELL_CHANGING] = false;
-  }
 
-  getSplitColValueAt(index: number, aar: string, position: string, aarLabel: string): string {
-    const currentAAR = this.dataFrame.get(position, index) as string;
-    return currentAAR === aar ? aarLabel : C.CATEGORIES.OTHER;
-  }
+    dockViewers(sarViewersGroup, DG.DOCK_TYPE.RIGHT, dockManager, DG.DOCK_TYPE.DOWN);
 
-  modifyOrCreateSplitCol(aar: string, position: string): void {
-    const df = this.dataFrame;
-    this.splitCol = df.col(C.COLUMNS_NAMES.SPLIT_COL) ??
-      df.columns.addNew(C.COLUMNS_NAMES.SPLIT_COL, 'string') as DG.Column;
+    sourceGrid.props.allowEdit = false;
+    adjustCellSize(sourceGrid);
 
-    if (aar === C.CATEGORIES.ALL && position === C.CATEGORIES.ALL) {
-      this.splitCol.init(() => C.CATEGORIES.ALL);
-      return;
-    }
+    this.invalidateGrids();
+  }
 
-    const aarLabel = `${aar === '-' ? 'Gap' : aar} : ${position}`;
-    this.splitCol.init((i) => this.getSplitColValueAt(i, aar, position, aarLabel));
+  invalidateSourceGrid(): void {this._sourceGrid.invalidate();}
+}
 
-    // splitCol.init((i) => bitset.get(i) ? aarLabel : C.CATEGORY_OTHER);
-    this.splitCol.setCategoryOrder([aarLabel]);
-    this.splitCol.compact();
+type viewerTypes = SARViewer | SARViewerVertical;
+
+function dockViewers(
+  viewerList: viewerTypes[], attachDirection: DG.DockType, dockManager: DG.DockManager,
+  initialAttachDirection?: DG.DockType): DG.DockNode[] | null {
+  const viewerListLength = viewerList.length;
+  if (viewerListLength === 0)
+    return null;
 
-    const colorMap: {[index: string]: string | number} = {};
+  let currentViewer = viewerList[0];
+  const nodeList = [dockManager.dock(currentViewer, initialAttachDirection, null, currentViewer.name ?? '')];
+  const ratio = 1 / viewerListLength;
 
-    colorMap[C.CATEGORIES.OTHER] = DG.Color.blue;
-    colorMap[aarLabel] = DG.Color.orange;
-    // colorMap[currentAAR] = cp.getColor(currentAAR);
-    df.getCol(C.COLUMNS_NAMES.SPLIT_COL).colors.setCategorical(colorMap);
+  for (let i = 1; i < viewerListLength; i++) {
+    currentViewer = viewerList[i];
+    nodeList.push(dockManager.dock(currentViewer, attachDirection, nodeList[i - 1], currentViewer.name ?? '', ratio));
   }
+  return nodeList;
 }