@datagrok/peptides 1.2.0 → 1.3.1

package/src/model.ts

@@ -9,31 +9,36 @@ import * as rxjs from 'rxjs';
 import * as C from './utils/constants';
 import * as type from './utils/types';
 import {calculateBarsData, getTypedArrayConstructor, isGridCellInvalid, scaleActivity} from './utils/misc';
-import {SARViewer, SARViewerBase, SARViewerVertical} from './viewers/sar-viewer';
-import {PeptideSpaceViewer} from './viewers/peptide-space-viewer';
-import {renderBarchart, renderSARCell, setAARRenderer} from './utils/cell-renderer';
+import {MutationCliffsViewer, SARViewerBase, MostPotentResiduesViewer} from './viewers/sar-viewer';
+import * as CR from './utils/cell-renderer';
 import {mutationCliffsWidget} from './widgets/mutation-cliffs';
 import {getDistributionAndStats, getDistributionWidget} from './widgets/distribution';
 import {getStats, Stats} from './utils/statistics';
+import {LogoSummary} from './viewers/logo-summary';
 
 export class PeptidesModel {
   static modelName = 'peptidesModel';
 
-  _sarGridSubject = new rxjs.Subject<DG.Grid>();
-  _sarVGridSubject = new rxjs.Subject<DG.Grid>();
+  mutationCliffsGridSubject = new rxjs.Subject<DG.Grid>();
+  mostPotentResiduesGridSubject = new rxjs.Subject<DG.Grid>();
+  logoSummaryGridSubject = new rxjs.Subject<DG.Grid>();
 
   _isUpdating: boolean = false;
   isBitsetChangedInitialized = false;
   isCellChanging = false;
 
-  _sarGrid!: DG.Grid;
-  _sarVGrid!: DG.Grid;
-  _sourceGrid!: DG.Grid;
+  mutationCliffsGrid!: DG.Grid;
+  mostPotentResiduesGrid!: DG.Grid;
+  logoSummaryGrid!: DG.Grid;
+  sourceGrid!: DG.Grid;
   df: DG.DataFrame;
   splitCol!: DG.Column<boolean>;
   edf: DG.DataFrame | null = null;
-  statsDf!: DG.DataFrame;
-  _currentSelection!: type.SelectionObject;
+  monomerPositionStatsDf!: DG.DataFrame;
+  clusterStatsDf!: DG.DataFrame;
+  _mutationCliffsSelection: type.PositionToAARList = {};
+  _invariantMapSelection: type.PositionToAARList = {};
+  _logoSummarySelection: number[] = [];
   substitutionsInfo: type.SubstitutionsInfo = new Map();
   isInitialized = false;
   currentView!: DG.TableView;
@@ -41,8 +46,8 @@ export class PeptidesModel {
   isPeptideSpaceChangingBitset = false;
   isChangingEdfBitset = false;
 
-  sarViewer!: SARViewer;
-  sarViewerVertical!: SARViewerVertical;
+  mutationCliffsViewer!: MutationCliffsViewer;
+  mostPotentResiduesViewer!: MostPotentResiduesViewer;
 
   _usedProperties: {[propName: string]: string | number | boolean} = {};
   monomerMap: {[key: string]: {molfile: string, fullName: string}} = {};
@@ -61,19 +66,49 @@ export class PeptidesModel {
     return dataFrame.temp[PeptidesModel.modelName] as PeptidesModel;
   }
 
-  get onSARGridChanged(): rxjs.Observable<DG.Grid> {return this._sarGridSubject.asObservable();}
+  get onMutationCliffsGridChanged(): rxjs.Observable<DG.Grid> {
+    return this.mutationCliffsGridSubject.asObservable();
+  }
+
+  get onMostPotentResiduesGridChanged(): rxjs.Observable<DG.Grid> {
+    return this.mostPotentResiduesGridSubject.asObservable();
+  }
 
-  get onSARVGridChanged(): rxjs.Observable<DG.Grid> {return this._sarVGridSubject.asObservable();}
+  get onLogoSummaryGridChanged(): rxjs.Observable<DG.Grid> {
+    return this.logoSummaryGridSubject.asObservable();
+  }
 
-  get currentSelection(): type.SelectionObject {
-    this._currentSelection ??= JSON.parse(this.df.tags[C.TAGS.SELECTION] || '{}');
-    return this._currentSelection;
+  get mutationCliffsSelection(): type.PositionToAARList {
+    this._mutationCliffsSelection ??= JSON.parse(this.df.tags[C.TAGS.SELECTION] || '{}');
+    return this._mutationCliffsSelection;
   }
-  set currentSelection(selection: type.SelectionObject) {
-    this._currentSelection = selection;
+  set mutationCliffsSelection(selection: type.PositionToAARList) {
+    this._mutationCliffsSelection = 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);
+    this.fireBitsetChanged();
+    this.invalidateGrids();
+  }
+
+  get invariantMapSelection(): type.PositionToAARList {
+    this._invariantMapSelection ??= JSON.parse(this.df.tags[C.TAGS.FILTER] || '{}');
+    return this._invariantMapSelection;
+  }
+  set invariantMapSelection(selection: type.PositionToAARList) {
+    this._invariantMapSelection = selection;
+    this.df.tags[C.TAGS.FILTER] = JSON.stringify(selection);
+    this.df.filter.fireChanged();
+    this.invalidateGrids();
+  }
+
+  get logoSummarySelection(): number[] {
+    this._logoSummarySelection ??= JSON.parse(this.df.tags[C.TAGS.CLUSTER_SELECTION] || '[]');
+    return this._logoSummarySelection;
+  }
+  set logoSummarySelection(selection: number[]) {
+    this._logoSummarySelection = selection;
+    this.df.tags[C.TAGS.CLUSTER_SELECTION] = JSON.stringify(selection);
+    this.fireBitsetChanged();
+    this.invalidateGrids();
   }
 
   get usedProperties(): {[propName: string]: string | number | boolean} {
@@ -103,23 +138,25 @@ export class PeptidesModel {
     this.df.tags['distributionSplit'] = `${splitByAARFlag}${flag ? 1 : 0}`;
   }
 
-  invalidateSelection(): void {
-    this.fireBitsetChanged();
-    this.invalidateGrids();
+  get isInvariantMap(): boolean {
+    return this.df.getTag('isInvariantMap') === '1';
+  }
+  set isInvariantMap(x: boolean) {
+    this.df.setTag('isInvariantMap', x ? '1' : '0');
   }
 
   createAccordion(): DG.Accordion {
     const acc = ui.accordion();
     acc.root.style.width = '100%';
     acc.addTitle(ui.h1(`${this.df.selection.trueCount} selected rows`));
-    acc.addPane('Substitutions', () => mutationCliffsWidget(this.df, this).root, true);
-    acc.addPane('Distribtution', () => getDistributionWidget(this.df, this).root, true);
+    acc.addPane('Mutation Cliff pairs', () => mutationCliffsWidget(this.df, this).root, true);
+    acc.addPane('Distribution', () => getDistributionWidget(this.df, this).root, true);
 
     return acc;
   }
 
   getViewer(): SARViewerBase {
-    const viewer = this.sarViewer ?? this.sarViewerVertical;
+    const viewer = this.mutationCliffsViewer ?? this.mostPotentResiduesViewer;
     if (!viewer)
       throw new Error('ViewerError: none of the SAR viewers is initialized');
     return viewer;
@@ -145,28 +182,30 @@ export class PeptidesModel {
   }
 
   updateDefault(): void {
-    const viewer = this.getViewer();
-    const proprtyChanged = this.isPropertyChanged(this.sarViewer) || this.isPropertyChanged(this.sarViewerVertical);
-    if ((this._sourceGrid && !this._isUpdating && proprtyChanged) || !this.isInitialized) {
+    const proprtyChanged =
+      this.isPropertyChanged(this.mutationCliffsViewer) || this.isPropertyChanged(this.mostPotentResiduesViewer);
+    if ((this.sourceGrid && !this._isUpdating && proprtyChanged) || !this.isInitialized) {
       this.isInitialized = true;
       this._isUpdating = true;
-      const [viewerGrid, viewerVGrid] = this.initializeViewersComponents();
+      this.initializeViewersComponents();
       //FIXME: modify during the initializeViewersComponents stages
-      this._sarGridSubject.next(viewerGrid);
-      this._sarVGridSubject.next(viewerVGrid);
+      this.mutationCliffsGridSubject.next(this.mutationCliffsGrid);
+      this.mostPotentResiduesGridSubject.next(this.mostPotentResiduesGrid);
+      if (this.df.getTag(C.TAGS.CLUSTERS))
+        this.logoSummaryGridSubject.next(this.logoSummaryGrid);
 
-      this.invalidateSelection();
+      this.fireBitsetChanged();
+      this.invalidateGrids();
       this._isUpdating = false;
     }
   }
 
-  initializeViewersComponents(): [DG.Grid, DG.Grid] {
-    if (this._sourceGrid === null)
+  initializeViewersComponents(): void {
+    if (this.sourceGrid === null)
       throw new Error(`Source grid is not initialized`);
 
     //Split the aligned sequence into separate AARs
-    const col: DG.Column<string> = this.df.columns.bySemType(C.SEM_TYPES.MACROMOLECULE)!;
-    // const alphabet = col.tags[DG.TAGS.UNITS].split(':')[2];
+    const col = this.df.getCol(C.COLUMNS_NAMES.MACROMOLECULE);
     const alphabet = col.tags['alphabet'];
     const splitSeqDf = splitAlignedSequences(col);
 
@@ -177,12 +216,7 @@ export class PeptidesModel {
     const activityCol = this.df.columns.bySemType(C.SEM_TYPES.ACTIVITY)!;
     splitSeqDf.columns.add(activityCol);
 
-    this.joinDataFrames(positionColumns, splitSeqDf);
-
-    for (const dfCol of this.df.columns) {
-      if (positionColumns.includes(dfCol.name))
-        setAARRenderer(dfCol, alphabet, this._sourceGrid);
-    }
+    this.joinDataFrames(positionColumns, splitSeqDf, alphabet);
 
     this.sortSourceGrid();
 
@@ -196,11 +230,11 @@ export class PeptidesModel {
     matrixDf = matrixDf.unpivot([], positionColumns, C.COLUMNS_NAMES.POSITION, C.COLUMNS_NAMES.MONOMER);
 
     //statistics for specific AAR at a specific position
-    this.statsDf = this.calculateStatistics(matrixDf);
+    this.monomerPositionStatsDf = this.calculateMonomerPositionStatistics(matrixDf);
 
     // SAR matrix table
     //pivot a table to make it matrix-like
-    matrixDf = this.statsDf.groupBy([C.COLUMNS_NAMES.MONOMER])
+    matrixDf = this.monomerPositionStatsDf.groupBy([C.COLUMNS_NAMES.MONOMER])
       .pivot(C.COLUMNS_NAMES.POSITION)
       .add('first', C.COLUMNS_NAMES.MEAN_DIFFERENCE, '')
       .aggregate();
@@ -214,28 +248,31 @@ export class PeptidesModel {
 
     this.calcSubstitutions();
 
-    const [sarGrid, sarVGrid] = this.createGrids(matrixDf, positionColumns, sequenceDf, alphabet);
+    [this.mutationCliffsGrid, this.mostPotentResiduesGrid] =
+      this.createGrids(matrixDf, sequenceDf, positionColumns, alphabet);
 
-    this._sarGrid = sarGrid;
-    this._sarVGrid = sarVGrid;
+    if (this.df.getTag(C.TAGS.CLUSTERS)) {
+      this.clusterStatsDf = this.calculateClusterStatistics();
+      this.logoSummaryGrid = this.createLogoSummaryGrid();
+    }
+
+    // init invariant map & mutation cliffs selections
+    this.initSelections(positionColumns);
 
     positionColumns.push(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
 
     this.setBarChartInteraction();
 
-    this.setCellRenderers(positionColumns, sarGrid, sarVGrid);
+    this.setCellRenderers(positionColumns);
 
     // show all the statistics in a tooltip over cell
-    this.setTooltips(positionColumns, sarGrid, sarVGrid);
+    this.setTooltips(positionColumns);
 
     this.setInteractionCallback();
 
     this.setBitsetCallback();
 
-    this.postProcessGrids(sarGrid, sarVGrid);
-
-    //TODO: return class instead
-    return [sarGrid, sarVGrid];
+    this.postProcessGrids();
   }
 
   calcSubstitutions(): void {
@@ -323,13 +360,31 @@ export class PeptidesModel {
     }
   }
 
-  joinDataFrames(positionColumns: string[], splitSeqDf: DG.DataFrame): void {
+  initSelections(positionColumns: string[]): void {
+    const tempInvariantMapSelection: type.PositionToAARList = this.invariantMapSelection;
+    const mutationCliffsSelection: type.PositionToAARList = this.mutationCliffsSelection;
+    for (const pos of positionColumns) {
+      tempInvariantMapSelection[pos] ??= [];
+      mutationCliffsSelection[pos] ??= [];
+    }
+    this.invariantMapSelection = tempInvariantMapSelection;
+    this.mutationCliffsSelection = mutationCliffsSelection;
+    this.barData = calculateBarsData(this.df.columns.bySemTypeAll(C.SEM_TYPES.MONOMER), this.df.selection);
+  }
+
+  joinDataFrames(positionColumns: string[], splitSeqDf: DG.DataFrame, alphabet: string): void {
     // append splitSeqDf columns to source table and make sure columns are not added more than once
     const name = this.df.name;
-    const dfColsSet = new Set(this.df.columns.names());
-    if (!positionColumns.every((col: string) => dfColsSet.has(col))) {
-      this.df.join(splitSeqDf, [C.COLUMNS_NAMES.ACTIVITY], [C.COLUMNS_NAMES.ACTIVITY],
-        this.df.columns.names(), positionColumns, 'inner', true);
+    for (const colName of positionColumns) {
+      const col = this.df.col(colName);
+      const newCol = splitSeqDf.getCol(colName);
+      if (col === null)
+        this.df.columns.add(newCol);
+      else {
+        this.df.columns.remove(colName);
+        this.df.columns.add(newCol);
+      }
+      CR.setAARRenderer(newCol, alphabet, this.sourceGrid);
     }
     this.df.name = name;
     this.currentView.name = name;
@@ -337,8 +392,8 @@ export class PeptidesModel {
 
   sortSourceGrid(): void {
     const colNames: DG.GridColumn[] = [];
-    for (let i = 1; i < this._sourceGrid.columns.length; i++)
-      colNames.push(this._sourceGrid.columns.byIndex(i)!);
+    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) {
@@ -350,28 +405,28 @@ export class PeptidesModel {
         return 1;
       return 0;
     });
-    this._sourceGrid.columns.setOrder(colNames.map((v) => v.name));
+    this.sourceGrid.columns.setOrder(colNames.map((v) => v.name));
   }
 
   createScaledCol(activityScaling: string, splitSeqDf: DG.DataFrame): void {
-    const [scaledDf, newColName] =
-      scaleActivity(activityScaling, this.df, this.df.tags[C.COLUMNS_NAMES.ACTIVITY]);
+    const [scaledDf, _, newColName] =
+      scaleActivity(activityScaling, this.df.getCol(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 = this.df.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
     this.df.columns.replace(oldScaledCol, scaledCol);
-    const gridCol = this._sourceGrid.col(C.COLUMNS_NAMES.ACTIVITY_SCALED);
+    const gridCol = this.sourceGrid.col(C.COLUMNS_NAMES.ACTIVITY_SCALED);
     if (gridCol !== null) {
       gridCol.name = newColName;
       this.df.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED] = newColName;
     }
 
-    this._sourceGrid.columns.setOrder([newColName]);
+    this.sourceGrid.columns.setOrder([newColName]);
   }
 
-  calculateStatistics(matrixDf: DG.DataFrame): DG.DataFrame {
+  calculateMonomerPositionStatistics(matrixDf: DG.DataFrame): DG.DataFrame {
     matrixDf = matrixDf.groupBy([C.COLUMNS_NAMES.POSITION, C.COLUMNS_NAMES.MONOMER]).aggregate();
 
     //calculate p-values based on t-test
@@ -388,7 +443,7 @@ export class PeptidesModel {
     for (let i = 0; i < matrixDf.rowCount; i++) {
       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 mask = DG.BitSet.create(sourceDfLen, (j) => this.df.get(position, j) === aar);
       const stats = getStats(activityCol, mask);
 
       mdCol.set(i, stats.meanDifference);
@@ -397,23 +452,43 @@ export class PeptidesModel {
       ratioCol.set(i, stats.ratio);
     }
 
-    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 as DG.DataFrame;
   }
 
+  calculateClusterStatistics(): DG.DataFrame {
+    const originalClustersCol = this.df.getCol(C.COLUMNS_NAMES.CLUSTERS);
+    const statsDf = this.df.groupBy([C.COLUMNS_NAMES.CLUSTERS]).aggregate();
+    const clustersCol = statsDf.getCol(C.COLUMNS_NAMES.CLUSTERS);
+    const statsDfCols = statsDf.columns;
+    const mdCol= statsDfCols.addNewFloat(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
+    const pValCol = statsDfCols.addNewFloat(C.COLUMNS_NAMES.P_VALUE);
+    const countCol = statsDfCols.addNewInt(C.COLUMNS_NAMES.COUNT);
+    const ratioCol = statsDfCols.addNewFloat(C.COLUMNS_NAMES.RATIO);
+    const activityList: number[] = this.df.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED).toList();
+
+    for (let rowIdx = 0; rowIdx < clustersCol.length; ++rowIdx) {
+      const cluster = clustersCol.get(rowIdx);
+      const mask = DG.BitSet.create(activityList.length, (bitIdx) => originalClustersCol.get(bitIdx) === cluster);
+      const stats = getStats(activityList, mask);
+
+      mdCol.set(rowIdx, stats.meanDifference);
+      pValCol.set(rowIdx, stats.pValue);
+      countCol.set(rowIdx, stats.count);
+      ratioCol.set(rowIdx, stats.ratio);
+    }
+    return statsDf;
+  }
+
   setCategoryOrder(matrixDf: DG.DataFrame): void {
     let sortArgument: string = C.COLUMNS_NAMES.MEAN_DIFFERENCE;
     if (this.getViewer().bidirectionalAnalysis) {
-      const mdCol = this.statsDf.getCol(sortArgument);
+      const mdCol = this.monomerPositionStatsDf.getCol(sortArgument);
       sortArgument = 'Absolute Mean difference';
-      const absMDCol = this.statsDf.columns.addNewFloat(sortArgument);
+      const absMDCol = this.monomerPositionStatsDf.columns.addNewFloat(sortArgument);
       absMDCol.init((i) => Math.abs(mdCol.get(i)));
     }
 
-    const aarWeightsDf = this.statsDf.groupBy([C.COLUMNS_NAMES.MONOMER]).sum(sortArgument, 'weight')
+    const aarWeightsDf = this.monomerPositionStatsDf.groupBy([C.COLUMNS_NAMES.MONOMER]).sum(sortArgument, 'weight')
       .aggregate();
     const aarList = aarWeightsDf.getCol(C.COLUMNS_NAMES.MONOMER).toList();
     const getWeight = (aar: string): number => aarWeightsDf
@@ -430,7 +505,7 @@ export class PeptidesModel {
     // TODO: aquire ALL of the positions
     const columns = [C.COLUMNS_NAMES.MEAN_DIFFERENCE, C.COLUMNS_NAMES.MONOMER, C.COLUMNS_NAMES.POSITION,
       'Count', 'Ratio', C.COLUMNS_NAMES.P_VALUE];
-    let sequenceDf = this.statsDf.groupBy(columns)
+    let sequenceDf = this.monomerPositionStatsDf.groupBy(columns)
       .where('pValue <= 0.1')
       .aggregate();
 
@@ -451,32 +526,125 @@ export class PeptidesModel {
     return sequenceDf;
   }
 
-  createGrids(
-    matrixDf: DG.DataFrame, positionColumns: string[], sequenceDf: DG.DataFrame, alphabet: string): DG.Grid[] {
-    const sarGrid = matrixDf.plot.grid();
-    sarGrid.sort([C.COLUMNS_NAMES.MONOMER]);
-    sarGrid.columns.setOrder([C.COLUMNS_NAMES.MONOMER].concat(positionColumns as C.COLUMNS_NAMES[]));
-
-    const sarVGrid = sequenceDf.plot.grid();
-    sarVGrid.sort([C.COLUMNS_NAMES.POSITION]);
-    const pValGridCol = sarVGrid.col(C.COLUMNS_NAMES.P_VALUE)!;
+  createGrids(mutationCliffsDf: DG.DataFrame, mostPotentResiduesDf: DG.DataFrame, positionColumns: string[],
+    alphabet: string): [DG.Grid, DG.Grid] {
+    // Creating Mutation Cliffs grid and sorting columns
+    const mutationCliffsGrid = mutationCliffsDf.plot.grid();
+    mutationCliffsGrid.sort([C.COLUMNS_NAMES.MONOMER]);
+    mutationCliffsGrid.columns.setOrder([C.COLUMNS_NAMES.MONOMER].concat(positionColumns as C.COLUMNS_NAMES[]));
+
+    // Creating Monomer-Position grid, sorting and setting column format
+    const mostPotentResiduesGrid = mostPotentResiduesDf.plot.grid();
+    mostPotentResiduesGrid.sort([C.COLUMNS_NAMES.POSITION]);
+    const pValGridCol = mostPotentResiduesGrid.col(C.COLUMNS_NAMES.P_VALUE)!;
     pValGridCol.format = '#.000';
     pValGridCol.name = 'P-value';
 
-    let tempCol = matrixDf.getCol(C.COLUMNS_NAMES.MONOMER);
-    if (tempCol)
-      setAARRenderer(tempCol, alphabet, sarGrid);
+    // Setting Monomer column renderer
+    CR.setAARRenderer(mutationCliffsDf.getCol(C.COLUMNS_NAMES.MONOMER), alphabet, mutationCliffsGrid);
+    CR.setAARRenderer(mostPotentResiduesDf.getCol(C.COLUMNS_NAMES.MONOMER), alphabet, mostPotentResiduesGrid);
+
+    return [mutationCliffsGrid, mostPotentResiduesGrid];
+  }
+
+  createLogoSummaryGrid(): DG.Grid {
+    const summaryTable = this.df.groupBy([C.COLUMNS_NAMES.CLUSTERS]).aggregate();
+    const summaryTableLength = summaryTable.rowCount;
+    const clustersCol: DG.Column<number> = summaryTable.getCol(C.COLUMNS_NAMES.CLUSTERS);
+    const membersCol: DG.Column<number> = summaryTable.columns.addNewInt('Members');
+    const webLogoCol: DG.Column<string> = summaryTable.columns.addNew('WebLogo', DG.COLUMN_TYPE.STRING);
+    const tempDfList: DG.DataFrame[] = new Array(summaryTableLength);
+    const originalClustersCol = this.df.getCol(C.COLUMNS_NAMES.CLUSTERS);
+    const peptideCol: DG.Column<string> = this.df.getCol(C.COLUMNS_NAMES.MACROMOLECULE);
+
+    for (let index = 0; index < summaryTableLength; ++index) {
+      const indexes: number[] = [];
+      for (let j = 0; j < originalClustersCol.length; ++j) {
+        if (originalClustersCol.get(j) === clustersCol.get(index))
+          indexes.push(j);
+      }
+      const tCol = DG.Column.string('peptides', indexes.length);
+      tCol.init((i) => peptideCol.get(indexes[i]));
+
+      for (const tag of peptideCol.tags)
+        tCol.setTag(tag[0], tag[1]);
+
+      const dfSlice = DG.DataFrame.fromColumns([tCol]);
+      tempDfList[index] = dfSlice;
+      webLogoCol.set(index, index.toString());
+      membersCol.set(index, dfSlice.rowCount);
+    }
+    webLogoCol.setTag(DG.TAGS.CELL_RENDERER, 'html');
+
+    const grid = summaryTable.plot.grid();
+    const gridClustersCol = grid.col(C.COLUMNS_NAMES.CLUSTERS)!;
+    gridClustersCol.name = 'Clusters';
+    gridClustersCol.visible = true;
+    grid.columns.rowHeader!.visible = false;
+    grid.props.rowHeight = 55;
+    grid.onCellPrepare((cell) => {
+      if (cell.isTableCell && cell.tableColumn?.name === 'WebLogo') {
+        tempDfList[parseInt(cell.cell.value)].plot.fromType('WebLogo', {maxHeight: 50})
+          .then((viewer) => cell.element = viewer.root);
+      }
+    });
+    grid.root.addEventListener('click', (ev) => {
+      const cell = grid.hitTest(ev.offsetX, ev.offsetY);
+      if (!cell || !cell.isTableCell)
+        return;
+
+      const cluster = clustersCol.get(cell.tableRowIndex!)!;
+      summaryTable.currentRowIdx = -1;
+      if (ev.shiftKey)
+        this.modifyClusterSelection(cluster);
+      else
+        this.initClusterSelection(cluster);
+      this.barData = calculateBarsData(this.df.columns.bySemTypeAll(C.SEM_TYPES.MONOMER), this.df.selection);
+    });
+    grid.onCellRender.subscribe((gridCellArgs) => {
+      const gc = gridCellArgs.cell;
+      if (gc.tableColumn?.name !== C.COLUMNS_NAMES.CLUSTERS || gc.isColHeader)
+        return;
+      const canvasContext = gridCellArgs.g;
+      const bound = gridCellArgs.bounds;
+      canvasContext.save();
+      canvasContext.beginPath();
+      canvasContext.rect(bound.x, bound.y, bound.width, bound.height);
+      canvasContext.clip();
+      CR.renderLogoSummaryCell(canvasContext, gc.cell.value, this.logoSummarySelection, bound);
+      gridCellArgs.preventDefault();
+      canvasContext.restore();
+    });
+    grid.onCellTooltip((cell, x, y) => {
+      if (!cell.isColHeader && cell.tableColumn?.name === C.COLUMNS_NAMES.CLUSTERS)
+        this.showTooltipCluster(cell.cell.value, x, y);
+      return true;
+    });
+    const webLogoGridCol = grid.columns.byName('WebLogo')!;
+    webLogoGridCol.cellType = 'html';
+    webLogoGridCol.width = 350;
+
+    return grid;
+  }
+
+  modifyClusterSelection(cluster: number): void {
+    const tempSelection = this.logoSummarySelection;
+    const idx = tempSelection.indexOf(cluster);
+    if (idx !== -1)
+      tempSelection.splice(idx, 1);
+    else
+      tempSelection.push(cluster);
 
-    tempCol = sequenceDf.getCol(C.COLUMNS_NAMES.MONOMER);
-    if (tempCol)
-      setAARRenderer(tempCol, alphabet, sarGrid);
+    this.logoSummarySelection = tempSelection;
+  }
 
-    return [sarGrid, sarVGrid];
+  initClusterSelection(cluster: number): void {
+    this.logoSummarySelection = [cluster];
   }
 
   setBarChartInteraction(): void {
     const eventAction = (ev: MouseEvent): void => {
-      const cell = this._sourceGrid.hitTest(ev.offsetX, ev.offsetY);
+      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);
@@ -484,9 +652,9 @@ export class PeptidesModel {
     };
 
     // The following events makes the barchart interactive
-    rxjs.fromEvent<MouseEvent>(this._sourceGrid.overlay, 'mousemove')
+    rxjs.fromEvent<MouseEvent>(this.sourceGrid.overlay, 'mousemove')
       .subscribe((mouseMove: MouseEvent) => eventAction(mouseMove));
-    rxjs.fromEvent<MouseEvent>(this._sourceGrid.overlay, 'click')
+    rxjs.fromEvent<MouseEvent>(this.sourceGrid.overlay, 'click')
       .subscribe((mouseMove: MouseEvent) => eventAction(mouseMove));
   }
 
@@ -508,8 +676,9 @@ export class PeptidesModel {
     const monomer = barPart.monomer;
     const position = barPart.position;
     if (ev.type === 'click') {
-      ev.shiftKey ? this.modifyCurrentSelection(monomer, position) :
-        this.initCurrentSelection(monomer, position);
+      ev.shiftKey ? this.modifyMonomerPositionSelection(monomer, position, true) :
+        this.initMonomerPositionSelection(monomer, position, true);
+      this.barData = calculateBarsData(this.df.columns.bySemTypeAll(C.SEM_TYPES.MONOMER), this.df.selection);
     } else {
       const bar = `${monomer}:${position}`;
       if (this.cachedBarchartTooltip.bar == bar)
@@ -519,8 +688,8 @@ export class PeptidesModel {
     }
   }
 
-  setCellRenderers(renderColNames: string[], sarGrid: DG.Grid, sarVGrid: DG.Grid): void {
-    const mdCol = this.statsDf.getCol(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
+  setCellRenderers(renderColNames: string[]): void {
+    const mdCol = this.monomerPositionStatsDf.getCol(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
     //decompose into two different renering funcs
     const renderCell = (args: DG.GridCellRenderArgs): void => {
       const canvasContext = args.g;
@@ -551,18 +720,28 @@ export class PeptidesModel {
           const currentAAR: string = gridTable.get(C.COLUMNS_NAMES.MONOMER, tableRowIndex);
 
           const viewer = this.getViewer();
-          renderSARCell(canvasContext, currentAAR, currentPosition, this.statsDf, viewer.bidirectionalAnalysis, mdCol,
-            bound, cellValue, this.currentSelection, this.substitutionsInfo);
+          if (this.isInvariantMap) {
+            const value: number = this.monomerPositionStatsDf
+              .groupBy([C.COLUMNS_NAMES.POSITION, C.COLUMNS_NAMES.MONOMER, C.COLUMNS_NAMES.COUNT])
+              .where(`${C.COLUMNS_NAMES.POSITION} = ${currentPosition} and ${C.COLUMNS_NAMES.MONOMER} = ${currentAAR}`)
+              .aggregate().get(C.COLUMNS_NAMES.COUNT, 0);
+            CR.renderInvaraintMapCell(
+              canvasContext, currentAAR, currentPosition, this.invariantMapSelection, value, bound);
+          } else {
+            CR.renderMutationCliffCell(
+              canvasContext, currentAAR, currentPosition, this.monomerPositionStatsDf, viewer.bidirectionalAnalysis,
+              mdCol, bound, cellValue, this.mutationCliffsSelection, this.substitutionsInfo);
+          }
         }
         args.preventDefault();
       }
       canvasContext.restore();
     };
-    sarGrid.onCellRender.subscribe(renderCell);
-    sarVGrid.onCellRender.subscribe(renderCell);
+    this.mutationCliffsGrid.onCellRender.subscribe(renderCell);
+    this.mostPotentResiduesGrid.onCellRender.subscribe(renderCell);
 
-    this._sourceGrid.setOptions({'colHeaderHeight': 130});
-    this._sourceGrid.onCellRender.subscribe((gcArgs) => {
+    this.sourceGrid.setOptions({'colHeaderHeight': 130});
+    this.sourceGrid.onCellRender.subscribe((gcArgs) => {
       const context = gcArgs.g;
       const bounds = gcArgs.bounds;
       const col = gcArgs.cell.tableColumn;
@@ -573,7 +752,7 @@ export class PeptidesModel {
       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);
+        const barBounds = CR.renderBarchart(context, col, this.barData[col.name], bounds, this.df.filter.trueCount);
         this.barsBounds[col.name] = barBounds;
         gcArgs.preventDefault();
       }
@@ -582,7 +761,7 @@ export class PeptidesModel {
     });
   }
 
-  setTooltips(renderColNames: string[], sarGrid: DG.Grid, sarVGrid: DG.Grid): void {
+  setTooltips(renderColNames: string[]): void {
     const showTooltip = (cell: DG.GridCell, x: number, y: number): boolean => {
       const tableCol = cell.tableColumn;
       const tableColName = tableCol?.name;
@@ -604,9 +783,9 @@ export class PeptidesModel {
       return true;
     };
 
-    sarGrid.onCellTooltip(showTooltip);
-    sarVGrid.onCellTooltip(showTooltip);
-    this._sourceGrid.onCellTooltip((cell, x, y) => {
+    this.mutationCliffsGrid.onCellTooltip(showTooltip);
+    this.mostPotentResiduesGrid.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)
@@ -617,8 +796,6 @@ export class PeptidesModel {
 
   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) {
@@ -632,8 +809,9 @@ export class PeptidesModel {
   }
 
   showTooltipAt(aar: string, position: string, x: number, y: number): HTMLDivElement | null {
-    const currentStatsDf = this.statsDf.rows.match({Pos: position, AAR: aar}).toDataFrame();
+    const currentStatsDf = this.monomerPositionStatsDf.rows.match({Pos: position, AAR: aar}).toDataFrame();
     const activityCol = this.df.columns.bySemType(C.SEM_TYPES.ACTIVITY_SCALED)!;
+    //TODO: use bitset instead of splitCol
     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);
@@ -654,32 +832,60 @@ export class PeptidesModel {
     return tooltip;
   }
 
-  setInteractionCallback(): void {
-    const sarDf = this._sarGrid.dataFrame;
-    const sarVDf = this._sarVGrid.dataFrame;
+  showTooltipCluster(cluster: number, x: number, y: number): HTMLDivElement | null {
+    const currentStatsDf = this.clusterStatsDf.rows.match({clusters: cluster}).toDataFrame();
+    const activityCol = this.df.columns.bySemType(C.SEM_TYPES.ACTIVITY_SCALED)!;
+    //TODO: use bitset instead of splitCol
+    const splitCol = DG.Column.bool(C.COLUMNS_NAMES.SPLIT_COL, activityCol.length);
+    const currentClusterCol = this.df.getCol(C.COLUMNS_NAMES.CLUSTERS);
+    splitCol.init((i) => currentClusterCol.get(i) == cluster);
+    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, `Cluster: ${cluster}`, 'Other', true);
+
+    ui.tooltip.show(tooltip, x, y);
 
-    const chooseAction = (aar: string, position: string, isShiftPressed: boolean): void =>
-      isShiftPressed ? this.modifyCurrentSelection(aar, position) : this.initCurrentSelection(aar, position);
+    return tooltip;
+  }
 
-    this._sarGrid.root.addEventListener('click', (ev) => {
-      const gridCell = this._sarGrid.hitTest(ev.offsetX, ev.offsetY);
+  setInteractionCallback(): void {
+    const mutationCliffsDf = this.mutationCliffsGrid.dataFrame;
+    const mostPotentResiduesDf = this.mostPotentResiduesGrid.dataFrame;
+
+    const chooseAction =
+      (aar: string, position: string, isShiftPressed: boolean, isInvariantMapSelection: boolean = true): void => {
+        isShiftPressed ? this.modifyMonomerPositionSelection(aar, position, isInvariantMapSelection) :
+          this.initMonomerPositionSelection(aar, position, isInvariantMapSelection);
+        this.barData = calculateBarsData(this.df.columns.bySemTypeAll(C.SEM_TYPES.MONOMER), this.df.selection);
+      };
+
+    this.mutationCliffsGrid.root.addEventListener('click', (ev) => {
+      const gridCell = this.mutationCliffsGrid.hitTest(ev.offsetX, ev.offsetY);
       if (isGridCellInvalid(gridCell) || gridCell!.tableColumn!.name == C.COLUMNS_NAMES.MONOMER)
         return;
 
       const position = gridCell!.tableColumn!.name;
-      const aar = sarDf.get(C.COLUMNS_NAMES.MONOMER, gridCell!.tableRowIndex!);
-      chooseAction(aar, position, ev.shiftKey);
+      const aar = mutationCliffsDf.get(C.COLUMNS_NAMES.MONOMER, gridCell!.tableRowIndex!);
+      chooseAction(aar, position, ev.shiftKey, this.isInvariantMap);
     });
 
-    this._sarVGrid.root.addEventListener('click', (ev) => {
-      const gridCell = this._sarVGrid.hitTest(ev.offsetX, ev.offsetY);
+    this.mostPotentResiduesGrid.root.addEventListener('click', (ev) => {
+      const gridCell = this.mostPotentResiduesGrid.hitTest(ev.offsetX, ev.offsetY);
       if (isGridCellInvalid(gridCell) || gridCell!.tableColumn!.name != C.COLUMNS_NAMES.MEAN_DIFFERENCE)
         return;
 
       const tableRowIdx = gridCell!.tableRowIndex!;
-      const position = sarVDf.get(C.COLUMNS_NAMES.POSITION, tableRowIdx);
-      const aar = sarVDf.get(C.COLUMNS_NAMES.MONOMER, tableRowIdx);
-      chooseAction(aar, position, ev.shiftKey);
+      const position = mostPotentResiduesDf.get(C.COLUMNS_NAMES.POSITION, tableRowIdx);
+      const aar = mostPotentResiduesDf.get(C.COLUMNS_NAMES.MONOMER, tableRowIdx);
+      chooseAction(aar, position, ev.shiftKey, false);
     });
 
     const cellChanged = (table: DG.DataFrame): void => {
@@ -689,45 +895,50 @@ export class PeptidesModel {
       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.mutationCliffsGrid.onCurrentCellChanged.subscribe((_gc) => cellChanged(mutationCliffsDf));
+    this.mostPotentResiduesGrid.onCurrentCellChanged.subscribe((_gc) => cellChanged(mostPotentResiduesDf));
+  }
 
-    this.currentSelection = tempSelection;
+  modifyMonomerPositionSelection(aar: string, position: string, isInvariantMapSelection: boolean): void {
+    const tempSelection = isInvariantMapSelection ? this.invariantMapSelection : this.mutationCliffsSelection;
+    const tempSelectionAt = tempSelection[position];
+    const aarIndex = tempSelectionAt.indexOf(aar);
+    if (aarIndex === -1)
+      tempSelectionAt.push(aar);
+    else
+      tempSelectionAt.splice(aarIndex, 1);
+
+    if (isInvariantMapSelection)
+      this.invariantMapSelection = tempSelection;
+    else
+      this.mutationCliffsSelection = tempSelection;
   }
 
-  initCurrentSelection(aar: string, position: string): void {
-    const tempSelection: type.SelectionObject = {};
+  initMonomerPositionSelection(aar: string, position: string, isInvariantMapSelection: boolean): void {
+    const tempSelection = isInvariantMapSelection ? this.invariantMapSelection : this.mutationCliffsSelection;
     tempSelection[position] = [aar];
-    this.currentSelection = tempSelection;
+
+    if (isInvariantMapSelection)
+      this.invariantMapSelection = tempSelection;
+    else
+      this.mutationCliffsSelection = tempSelection;
   }
 
   invalidateGrids(): void {
-    // this.stackedBarchart?.computeData();
-    this._sarGrid.invalidate();
-    this._sarVGrid.invalidate();
-    this._sourceGrid?.invalidate();
-    //TODO: this.peptideSpaceGrid.invalidate();
+    this.mutationCliffsGrid.invalidate();
+    this.mostPotentResiduesGrid.invalidate();
+    this.logoSummaryGrid?.invalidate();
+    this.sourceGrid?.invalidate();
   }
 
   setBitsetCallback(): void {
     if (this.isBitsetChangedInitialized)
       return;
     const selection = this.df.selection;
+    const filter = this.df.filter;
+    const clusterCol = this.df.col(C.COLUMNS_NAMES.CLUSTERS);
 
-    const changeBitset = (currentBitset: DG.BitSet): void => {
+    const changeSelectionBitset = (currentBitset: DG.BitSet): void => {
       const edfSelection = this.edf?.selection;
       if (this.isPeptideSpaceChangingBitset) {
         if (edfSelection == null)
@@ -743,20 +954,17 @@ export class PeptidesModel {
         this.isChangingEdfBitset = false;
       };
 
-      const positionList = Object.keys(this.currentSelection);
-      if (positionList.length == 0) {
-        currentBitset.init(() => false, false);
-        updateEdfSelection();
-        return;
-      }
+      const positionList = Object.keys(this.mutationCliffsSelection);
 
       //TODO: move out
       const getBitAt = (i: number): boolean => {
         for (const position of positionList) {
           const positionCol: DG.Column<string> = this.df.getCol(position);
-          if (this._currentSelection[position].includes(positionCol.get(i)!))
+          if (this._mutationCliffsSelection[position].includes(positionCol.get(i)!))
             return true;
         }
+        if (this._logoSummarySelection.includes(clusterCol?.get(i)!))
+          return true;
         return false;
       };
       currentBitset.init(getBitAt, false);
@@ -764,7 +972,18 @@ export class PeptidesModel {
       updateEdfSelection();
     };
 
-    selection.onChanged.subscribe(() => changeBitset(selection));
+    selection.onChanged.subscribe(() => changeSelectionBitset(selection));
+    filter.onChanged.subscribe(() => {
+      const positionList = Object.keys(this.invariantMapSelection);
+      filter.init((i) => {
+        let result = true;
+        for (const position of positionList) {
+          const aarList = this._invariantMapSelection[position];
+          result &&= aarList.length == 0 || aarList.includes(this.df.get(position, i));
+        }
+        return result;
+      }, false);
+    });
     this.isBitsetChangedInitialized = true;
   }
 
@@ -776,11 +995,11 @@ export class PeptidesModel {
     this.isPeptideSpaceChangingBitset = false;
   }
 
-  postProcessGrids(sarGrid: DG.Grid, sarVGrid: DG.Grid): void {
-    const mdCol: DG.GridColumn = sarVGrid.col(C.COLUMNS_NAMES.MEAN_DIFFERENCE)!;
+  postProcessGrids(): void {
+    const mdCol: DG.GridColumn = this.mostPotentResiduesGrid.col(C.COLUMNS_NAMES.MEAN_DIFFERENCE)!;
     mdCol.name = 'Diff';
 
-    for (const grid of [sarGrid, sarVGrid]) {
+    for (const grid of [this.mutationCliffsGrid, this.mostPotentResiduesGrid]) {
       const gridProps = grid.props;
       gridProps.rowHeight = 20;
       const girdCols = grid.columns;
@@ -788,21 +1007,24 @@ export class PeptidesModel {
       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.MONOMER)
-          col.width = 50;
-        else
-          col.width = gridProps.rowHeight + 10;
+        col.width =
+          grid == this.mostPotentResiduesGrid && colName !== 'Diff' && colName !== C.COLUMNS_NAMES.MONOMER ? 50 :
+            gridProps.rowHeight + 10;
       }
     }
 
     const setViewerGridProps = (grid: DG.Grid): void => {
-      grid.props.allowEdit = false;
-      grid.props.allowRowSelection = false;
-      grid.props.allowBlockSelection = false;
+      const gridProps = grid.props;
+      gridProps.allowEdit = false;
+      gridProps.allowRowSelection = false;
+      gridProps.allowBlockSelection = false;
+      gridProps.allowColSelection = false;
     };
 
-    setViewerGridProps(sarGrid);
-    setViewerGridProps(sarVGrid);
+    setViewerGridProps(this.mutationCliffsGrid);
+    setViewerGridProps(this.mostPotentResiduesGrid);
+    if (this.df.getTag(C.TAGS.CLUSTERS))
+      setViewerGridProps(this.logoSummaryGrid);
   }
 
   getSplitColValueAt(index: number, aar: string, position: string, aarLabel: string): string {
@@ -819,9 +1041,9 @@ export class PeptidesModel {
   }
 
   syncProperties(isSourceSAR = true): void {
-    if (this.sarViewer && this.sarViewerVertical) {
-      const [sourceViewer, targetViewer] = isSourceSAR ? [this.sarViewer, this.sarViewerVertical] :
-        [this.sarViewerVertical, this.sarViewer];
+    if (this.mutationCliffsViewer && this.mostPotentResiduesViewer) {
+      const [sourceViewer, targetViewer] = isSourceSAR ? [this.mutationCliffsViewer, this.mostPotentResiduesViewer] :
+        [this.mostPotentResiduesViewer, this.mutationCliffsViewer];
       const properties = sourceViewer.props.getProperties();
       const newProps: {[propName: string]: string | number | boolean} = {};
       for (const property of properties) {
@@ -845,14 +1067,16 @@ export class PeptidesModel {
 
     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;
+    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;
+    const scaledGridCol = this.sourceGrid.col(C.COLUMNS_NAMES.ACTIVITY_SCALED)!;
+    scaledGridCol.name = this.df.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED];
+    scaledGridCol.format = '#.000';
+    this.sourceGrid.columns.setOrder([this.df.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED]]);
+    this.sourceGrid.props.allowColSelection = false;
 
     this.df.temp[C.EMBEDDING_STATUS] = false;
     const adjustCellSize = (grid: DG.Grid): void => {
@@ -864,63 +1088,40 @@ export class PeptidesModel {
       grid.props.rowHeight = 20;
     };
 
-    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;
+    for (let i = 0; i < this.sourceGrid.columns.length; i++) {
+      const currentCol = this.sourceGrid.columns.byIndex(i);
+      if (currentCol?.column?.getTag(C.TAGS.VISIBLE) === '0')
+        currentCol.visible = false;
     }
 
     const options = {scaling: this.df.tags['scaling']};
 
     const dockManager = this.currentView.dockManager;
 
-    this.sarViewer = await this.df.plot.fromType('peptide-sar-viewer', options) as SARViewer;
-
-    this.sarViewerVertical =
-      await this.df.plot.fromType('peptide-sar-viewer-vertical', options) as SARViewerVertical;
+    this.mutationCliffsViewer = await this.df.plot.fromType('peptide-sar-viewer', options) as MutationCliffsViewer;
 
-    const sarViewersGroup: viewerTypes[] = [this.sarViewer, this.sarViewerVertical];
+    this.mostPotentResiduesViewer =
+      await this.df.plot.fromType('peptide-sar-viewer-vertical', options) as MostPotentResiduesViewer;
 
-    // TODO: completely remove this viewer?
-    // if (this.df.rowCount <= 10000) {
-    //   const peptideSpaceViewerOptions = {method: 'UMAP', measure: 'Levenshtein', cyclesCount: 100};
-    //   const peptideSpaceViewer =
-    //     await this.df.plot.fromType('peptide-space-viewer', peptideSpaceViewerOptions) as PeptideSpaceViewer;
-    //   dockManager.dock(peptideSpaceViewer, DG.DOCK_TYPE.RIGHT, null, 'Peptide Space Viewer');
-    // }
+    if (this.df.getTag(C.TAGS.CLUSTERS)) {
+      const logoSummary = await this.df.plot.fromType('logo-summary-viewer') as LogoSummary;
+      dockManager.dock(logoSummary, DG.DOCK_TYPE.RIGHT, null, 'Logo Summary Table');
+    }
 
     this.updateDefault();
 
-    this.currentView.filters({filters: [{type: 'Peptides:invariantMapFilter'}]});
+    const mcNode =
+      dockManager.dock(this.mutationCliffsViewer, DG.DOCK_TYPE.DOWN, null, this.mutationCliffsViewer.name);
+
+    dockManager.dock(
+      this.mostPotentResiduesViewer, DG.DOCK_TYPE.RIGHT, mcNode, this.mostPotentResiduesViewer.name, 0.3);
 
-    dockViewers(sarViewersGroup, DG.DOCK_TYPE.RIGHT, dockManager, DG.DOCK_TYPE.DOWN);
 
-    this._sourceGrid.props.allowEdit = false;
-    adjustCellSize(this._sourceGrid);
+    this.sourceGrid.props.allowEdit = false;
+    adjustCellSize(this.sourceGrid);
 
     this.invalidateGrids();
   }
 
-  invalidateSourceGrid(): void {this._sourceGrid.invalidate();}
-}
-
-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;
-
-  let currentViewer = viewerList[0];
-  const nodeList = [dockManager.dock(currentViewer, initialAttachDirection, null, currentViewer.name ?? '')];
-  const ratio = 1 / viewerListLength;
-
-  for (let i = 1; i < viewerListLength; i++) {
-    currentViewer = viewerList[i];
-    nodeList.push(dockManager.dock(currentViewer, attachDirection, nodeList[i - 1], currentViewer.name ?? '', ratio));
-  }
-  return nodeList;
+  invalidateSourceGrid(): void {this.sourceGrid.invalidate();}
 }