@datagrok/peptides 1.5.1 → 1.7.2

package/src/viewers/logo-summary.ts

@@ -1,12 +1,16 @@
 import * as ui from 'datagrok-api/ui';
+import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
 import {PeptidesModel} from '../model';
 import * as C from '../utils/constants';
 import * as CR from '../utils/cell-renderer';
-import * as bio from '@datagrok-libraries/bio';
-import { Stats } from '../utils/statistics';
+import {TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {PositionHeight} from '@datagrok-libraries/bio/src/viewers/web-logo';
+import {getStats, MaskInfo, Stats} from '../utils/statistics';
+import wu from 'wu';
+import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 
 export class LogoSummary extends DG.JsViewer {
   _titleHost = ui.divText('Logo Summary Table', {id: 'pep-viewer-title'});
@@ -15,13 +19,17 @@ export class LogoSummary extends DG.JsViewer {
   initialized: boolean = false;
   webLogoMode: string;
   membersRatioThreshold: number;
+  newClusterName: string;
+  webLogoDfPlot: DG.DataFramePlotHelper[] = [];
+  distributionDfPlot: DG.DataFramePlotHelper[] = [];
 
   constructor() {
     super();
 
-    this.webLogoMode = this.string('webLogoMode', bio.PositionHeight.full,
-      {choices: [bio.PositionHeight.full, bio.PositionHeight.Entropy]});
-    this.membersRatioThreshold = this.float('membersRatioThreshold', 0.7, {min: 0.01, max: 1.0});
+    this.webLogoMode = this.string('webLogoMode', PositionHeight.full,
+      {choices: [PositionHeight.full, PositionHeight.Entropy]});
+    this.membersRatioThreshold = this.float('membersRatioThreshold', 0.7, {min: 0, max: 1.0});
+    this.newClusterName = this.string('newClusterName', 'New cluster');
   }
 
   onTableAttached(): void {
@@ -32,6 +40,12 @@ export class LogoSummary extends DG.JsViewer {
       this.createLogoSummaryGrid();
       this.render();
     }));
+    this.subs.push(this.model.onNewCluster.subscribe(() => this.clusterFromSelection()));
+    this.subs.push(this.model.onRemoveCluster.subscribe(() => this.removeCluster()));
+    this.subs.push(this.model.onFilterChanged.subscribe(() => {
+      this.createLogoSummaryGrid();
+      this.render();
+    }));
 
     this.createLogoSummaryGrid();
     this.initialized = true;
@@ -43,6 +57,13 @@ export class LogoSummary extends DG.JsViewer {
   render(): void {
     if (this.initialized) {
       $(this.root).empty();
+      const df = this.viewerGrid.dataFrame;
+      if (!df.filter.anyTrue) {
+        const emptyDf = ui.divText('No clusters to satisfy the threshold. ' +
+          'Please, lower the threshold in viewer proeperties to include clusters');
+        this.root.appendChild(ui.divV([this._titleHost, emptyDf]));
+        return;
+      }
       this.viewerGrid.root.style.width = 'auto';
       this.root.appendChild(ui.divV([this._titleHost, this.viewerGrid.root]));
       this.viewerGrid.invalidate();
@@ -58,76 +79,136 @@ export class LogoSummary extends DG.JsViewer {
 
   createLogoSummaryGrid(): DG.Grid {
     const clustersColName = this.model.settings.clustersColumnName!;
-    let summaryTableBuilder = this.dataFrame.groupBy([clustersColName]);
-    for (const [colName, aggregationFunc] of Object.entries(this.model.settings.columns ?? {}))
-      summaryTableBuilder = summaryTableBuilder.add(aggregationFunc as any, colName, `${aggregationFunc}(${colName})`);
+    const isDfFiltered = this.dataFrame.filter.anyFalse;
+    const filteredDf = isDfFiltered ? this.dataFrame.clone(this.dataFrame.filter) : this.dataFrame;
+    const filteredDfCols = filteredDf.columns;
+    const activityCol = filteredDf.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
+    const activityColData = activityCol.getRawData();
+
+    const filteredDfClustersCol = filteredDf.getCol(clustersColName);
+    const filteredDfClustersColData = filteredDfClustersCol.getRawData();
+    const filteredDfClustersColCategories = filteredDfClustersCol.categories;
+    const filteredDfClustersColLength = filteredDfClustersColData.length;
+
+    // const customClustersColumnsList = wu(this.model.customClusters).toArray();
+    const query: { [key: string]: string } = {};
+    query[C.TAGS.CUSTOM_CLUSTER] = '1';
+    const customClustersColumnsList = wu(filteredDfCols.byTags(query)).filter(c => c.max > 0).toArray();
+    const getAggregatedColName = (aggF: string, colName: string) => `${aggF}(${colName})`;
+    const isCustomCluster = (cluster: string) => filteredDfCols.contains(cluster);
 
-    const summaryTable = summaryTableBuilder.aggregate();
+    let summaryTableBuilder = filteredDf.groupBy([clustersColName]);
+    const aggregateColumnsEntries = Object.entries(this.model.settings.columns ?? {});
+    for (const [colName, aggregationFunc] of aggregateColumnsEntries) {
+      summaryTableBuilder = summaryTableBuilder.add(
+        aggregationFunc as any, colName, getAggregatedColName(aggregationFunc, colName));
+    }
+
+    const tempSummaryTable = summaryTableBuilder.aggregate();
+    const tempSummaryTableLength = tempSummaryTable.rowCount;
+    const tempClustersCol: DG.Column<string> = tempSummaryTable.getCol(clustersColName);
+    const summaryTableLength = tempSummaryTableLength + customClustersColumnsList.length;
+    const summaryTable = DG.DataFrame.create(summaryTableLength);
     const summaryTableCols = summaryTable.columns;
-    const webLogoCol: DG.Column<string> = summaryTableCols.addNewString('WebLogo');
-    // const webLogoColData = webLogoCol.getRawData();
-    const clustersCol: DG.Column<string> = summaryTable.getCol(clustersColName);
+
+    const clustersCol = summaryTableCols.addNewString(clustersColName);
+    for (let i = 0; i < summaryTableLength; ++i) {
+      clustersCol.set(i, i < tempSummaryTableLength ? tempClustersCol.get(i) :
+        customClustersColumnsList[i - tempSummaryTableLength].name);
+    }
     const clustersColData = clustersCol.getRawData();
     const clustersColCategories = clustersCol.categories;
-    const summaryTableLength = clustersColData.length;
-    const membersColData = summaryTableCols.addNewInt(C.COLUMNS_NAMES.MEMBERS).getRawData();
-    const tempWebLogoDfPlotList: DG.DataFramePlotHelper[] = new Array(summaryTableLength);
-    const tempDistributionDfPlotList: DG.DataFramePlotHelper[] = new Array(summaryTableLength);
-    const originalClustersCol = this.dataFrame.getCol(clustersColName);
-    const originalClustersColData = originalClustersCol.getRawData();
-    const originalClustersColCategories = originalClustersCol.categories;
-    const originalClustersColLength = originalClustersColData.length;
-    const peptideCol: DG.Column<string> = this.dataFrame.getCol(this.model.settings.sequenceColumnName!);
+
+    const peptideCol: DG.Column<string> = filteredDf.getCol(this.model.settings.sequenceColumnName!);
     const peptideColData = peptideCol.getRawData();
     const peptideColCategories = peptideCol.categories;
-    const meanDifferenceColData = summaryTableCols.addNewFloat('Mean difference').getRawData();
-    const pValColData = summaryTableCols.addNewFloat('P-Value').getRawData();
-    const ratioColData = summaryTableCols.addNewFloat('Ratio').getRawData();
-    const distributionCol = summaryTableCols.addNewString('Distribution');
-    // const distributionColData = distributionCol.getRawData();
-
-    for (let index = 0; index < summaryTableLength; ++index) {
-      const indexes: number[] = [];
-      const currentCluster = clustersColCategories[clustersColData[index]];
-      for (let j = 0; j < originalClustersColLength; ++j) {
-        if (originalClustersColCategories[originalClustersColData[j]] == currentCluster)
-          indexes.push(j);
-      }
-      const tCol = DG.Column.string('peptides', indexes.length);
-      tCol.init((i) => peptideColCategories[peptideColData[indexes[i]]]);
+    const peptideColTags = peptideCol.tags;
 
-      for (const tag of peptideCol.tags)
-        tCol.setTag(tag[0], tag[1]);
+    const membersColData = summaryTableCols.addNewInt(C.LST_COLUMN_NAMES.MEMBERS).getRawData();
+    const webLogoCol = summaryTableCols.addNewString(C.LST_COLUMN_NAMES.WEB_LOGO);
+    const distributionCol = summaryTableCols.addNewString(C.LST_COLUMN_NAMES.DISTRIBUTION);
+    const meanDifferenceColData = summaryTableCols.addNewFloat(C.LST_COLUMN_NAMES.MEAN_DIFFERENCE).getRawData();
+    const pValColData = summaryTableCols.addNewFloat(C.LST_COLUMN_NAMES.P_VALUE).getRawData();
+    const ratioColData = summaryTableCols.addNewFloat(C.LST_COLUMN_NAMES.RATIO).getRawData();
 
-      const uh = new bio.UnitsHandler(tCol);
-      tCol.setTag(bio.TAGS.alphabetSize, uh.getAlphabetSize().toString());
+    for (const [colName, aggregationFunc] of aggregateColumnsEntries) {
+      const tempSummaryTableCol = tempSummaryTable.getCol(getAggregatedColName(aggregationFunc, colName));
+      const summaryTableCol = summaryTableCols.addNew(tempSummaryTableCol.name, tempSummaryTableCol.type);
+      summaryTableCol.init((i) => i < tempSummaryTableLength ? tempSummaryTableCol.get(i) : null);
+    }
+
+    this.webLogoDfPlot = new Array(summaryTableLength);
+    this.distributionDfPlot = new Array(summaryTableLength);
+
+    for (let summaryTableRowIndex = 0; summaryTableRowIndex < summaryTableLength; ++summaryTableRowIndex) {
+      const isOriginalCluster = summaryTableRowIndex < tempSummaryTableLength;
+      const currentClusterCategoryIndex = clustersColData[summaryTableRowIndex];
+      const currentCluster = clustersColCategories[currentClusterCategoryIndex]; // Cluster name
+      const customClusterColData = customClustersColumnsList.find((col) => col.name == currentCluster)?.toList();
+
+      const isValidIndex = isOriginalCluster ?
+        (j: number) => filteredDfClustersColCategories[filteredDfClustersColData[j]] == currentCluster :
+        (j: number) => customClusterColData![j];
 
-      // Get Stats
-      const matcher: {[key: string]: number | string} = {};
-      matcher[this.model.settings.clustersColumnName!] = currentCluster;
-      const currentStatsDf = this.model.clusterStatsDf.rows.match(matcher).toDataFrame();
-      const activityCol = this.dataFrame.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
+        
       //TODO: use bitset instead of splitCol
       const splitCol = DG.Column.bool(C.COLUMNS_NAMES.SPLIT_COL, activityCol.length);
-      const currentClusterCol = this.dataFrame.getCol(this.model.settings.clustersColumnName!);
-      splitCol.init((i) => currentClusterCol.get(i) == currentCluster);
-      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),
-      };
+      const getSplitColValueAt = isOriginalCluster ?
+        (splitColIndex: number) => filteredDfClustersColData[splitColIndex] == currentClusterCategoryIndex :
+        (splitColIndex: number) => customClusterColData![splitColIndex];
+      splitCol.init((i) => getSplitColValueAt(i));
+
+      let stats: Stats;
+      if (isDfFiltered) {
+        const trueCount = splitCol.stats.sum;
+        const maskInfo = {
+          trueCount: trueCount,
+          falseCount: activityColData.length - trueCount,
+          mask: splitCol.toList() as boolean[],
+        };
+        stats = getStats(activityColData, maskInfo);
+      } else
+        stats = this.model.clusterStats[currentCluster];
 
+      const tCol = DG.Column.string('peptides', stats.count);
+      let tColIdx = 0;
+      for (let j = 0; j < filteredDfClustersColLength; ++j) {
+        if (isValidIndex(j))
+          tCol.set(tColIdx++, peptideColCategories[peptideColData[j]]);
+      }
+
+      for (const tag of peptideColTags)
+        tCol.setTag(tag[0], tag[1]);
+
+      const uh = new UnitsHandler(tCol);
+      tCol.setTag(bioTAGS.alphabetSize, uh.getAlphabetSize().toString());
+
+
+      const distributionTable = DG.DataFrame.fromColumns([activityCol, splitCol]);
       const dfSlice = DG.DataFrame.fromColumns([tCol]);
-      tempWebLogoDfPlotList[index] = dfSlice.plot;
-      tempDistributionDfPlotList[index] = distributionTable.plot;
-      // webLogoColData[index] = index;
-      // distributionColData[index] = index;
-      membersColData[index] = indexes.length;
-      meanDifferenceColData[index] = stats.meanDifference;
-      pValColData[index] = stats.pValue;
-      ratioColData[index] = stats.ratio;
+
+      this.webLogoDfPlot[summaryTableRowIndex] = dfSlice.plot;
+      this.distributionDfPlot[summaryTableRowIndex] = distributionTable.plot;
+
+      membersColData[summaryTableRowIndex] = stats.count;
+      meanDifferenceColData[summaryTableRowIndex] = stats.meanDifference;
+      pValColData[summaryTableRowIndex] = stats.pValue;
+      ratioColData[summaryTableRowIndex] = stats.ratio;
+
+      //Setting aggregated col values
+      if (!isOriginalCluster) {
+        for (const [colName, aggregationFunc] of aggregateColumnsEntries) {
+          const arrayBuffer = filteredDf.getCol(colName).getRawData();
+          const clusterMask = DG.BitSet.fromBytes(arrayBuffer.buffer, arrayBuffer.byteLength / 4);
+          const subDf = filteredDf.clone(clusterMask, [colName]);
+          const newColName = getAggregatedColName(aggregationFunc, colName);
+          const aggregatedDf = subDf.groupBy()
+            .add(aggregationFunc as any, colName, newColName)
+            .aggregate();
+          const value = aggregatedDf.get(newColName, 0);
+          summaryTable.set(newColName, summaryTableRowIndex, value);
+        }
+      }
     }
     webLogoCol.setTag(DG.TAGS.CELL_RENDERER, 'html');
     distributionCol.setTag(DG.TAGS.CELL_RENDERER, 'html');
@@ -145,11 +226,12 @@ export class LogoSummary extends DG.JsViewer {
         return;
 
       if (cell.tableColumn?.name == 'WebLogo') {
-        tempWebLogoDfPlotList[currentRowIdx]
-          .fromType('WebLogo', {maxHeight: cell.grid.props.rowHeight - 5, positionHeight: this.webLogoMode})
+        this.webLogoDfPlot[currentRowIdx]
+          .fromType('WebLogo', {maxHeight: cell.grid.props.rowHeight - 5, positionHeight: this.webLogoMode,
+            horizontalAlignment: 'left'})
           .then((viewer) => cell.element = viewer.root);
       } else if (cell.tableColumn?.name == 'Distribution') {
-        const viewerRoot = tempDistributionDfPlotList[currentRowIdx].histogram({
+        const viewerRoot = this.distributionDfPlot[currentRowIdx].histogram({
           filteringEnabled: false,
           valueColumnName: C.COLUMNS_NAMES.ACTIVITY_SCALED,
           splitColumnName: C.COLUMNS_NAMES.SPLIT_COL,
@@ -169,15 +251,14 @@ export class LogoSummary extends DG.JsViewer {
     });
     this.viewerGrid.root.addEventListener('click', (ev) => {
       const cell = this.viewerGrid.hitTest(ev.offsetX, ev.offsetY);
-      if (!cell || !cell.isTableCell)
+      if (!cell || !cell.isTableCell || cell.tableColumn?.name != clustersColName)
         return;
 
-      const clusterIdx = clustersColData[cell.tableRowIndex!];
       summaryTable.currentRowIdx = -1;
       if (ev.shiftKey)
-        this.model.modifyClusterSelection(clusterIdx);
+        this.model.modifyClusterSelection(cell.cell.value);
       else
-        this.model.initClusterSelection(clusterIdx);
+        this.model.initClusterSelection(cell.cell.value);
       this.viewerGrid.invalidate();
     });
     this.viewerGrid.onCellRender.subscribe((gridCellArgs) => {
@@ -190,14 +271,13 @@ export class LogoSummary extends DG.JsViewer {
       canvasContext.beginPath();
       canvasContext.rect(bound.x, bound.y, bound.width, bound.height);
       canvasContext.clip();
-      const cellRawData = clustersColData[gc.cell.rowIndex];
-      CR.renderLogoSummaryCell(canvasContext, gc.cell.value, cellRawData, this.model.logoSummarySelection, bound);
+      CR.renderLogoSummaryCell(canvasContext, gc.cell.value, this.model.logoSummarySelection, bound);
       gridCellArgs.preventDefault();
       canvasContext.restore();
     });
     this.viewerGrid.onCellTooltip((cell, x, y) => {
       if (!cell.isColHeader && cell.tableColumn?.name === clustersColName)
-        this.model.showTooltipCluster(cell.cell.value, x, y);
+        this.model.showTooltipCluster(cell.cell.rowIndex, x, y, cell.cell.value);
       return true;
     });
     const webLogoGridCol = this.viewerGrid.columns.byName('WebLogo')!;
@@ -215,9 +295,94 @@ export class LogoSummary extends DG.JsViewer {
 
   updateFilter(): void {
     const table = this.viewerGrid.table;
-    const memberstCol = table.getCol(C.COLUMNS_NAMES.MEMBERS);
+    const memberstCol = table.getCol(C.LST_COLUMN_NAMES.MEMBERS);
     const membersColData = memberstCol.getRawData();
     const maxCount = memberstCol.stats.max;
-    table.filter.init((i) => membersColData[i] > Math.ceil(maxCount * this.membersRatioThreshold));
+    const minMembers = Math.ceil(maxCount * this.membersRatioThreshold);
+    table.filter.init((i) => membersColData[i] > minMembers);
+  }
+
+  clusterFromSelection(): void {
+    const filteredDf = this.dataFrame.filter.anyFalse ? this.dataFrame.clone(this.dataFrame.filter, null, true) :
+      this.dataFrame;
+    const selection = filteredDf.selection;
+    const viewerDf = this.viewerGrid.dataFrame;
+    const viewerDfCols = viewerDf.columns;
+    const viewerDfColsLength = viewerDfCols.length;
+    const newClusterVals = new Array(viewerDfCols.length);
+
+    const activityScaledCol = filteredDf.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
+    const maskInfo: MaskInfo = {
+      mask: selection.getBuffer(),
+      trueCount: selection.trueCount,
+      falseCount: selection.falseCount,
+    };
+    const stats = getStats(activityScaledCol.getRawData(), maskInfo);
+    const distributionTable = DG.DataFrame.fromColumns([activityScaledCol, filteredDf.getCol(this.model.splitCol.name)]);
+
+    const peptideCol: DG.Column<string> = filteredDf.getCol(this.model.settings.sequenceColumnName!);
+    const peptideColData = peptideCol.getRawData();
+    const peptideColCategories = peptideCol.categories;
+    const peptideColTags = peptideCol.tags;
+    const selectedIndexes = selection.getSelectedIndexes();
+    const tCol = DG.Column.string('peptides', selectedIndexes.length);
+
+    for (let i = 0; i < selectedIndexes.length; ++i)
+      tCol.set(i, peptideColCategories[peptideColData[selectedIndexes[i]]]);
+    for (const tag of peptideColTags)
+      tCol.setTag(tag[0], tag[1]);
+
+    const uh = new UnitsHandler(tCol);
+    tCol.setTag(bioTAGS.alphabetSize, uh.getAlphabetSize().toString());
+
+    const webLogoTable = DG.DataFrame.fromColumns([tCol]);
+    this.webLogoDfPlot.push(webLogoTable.plot);
+    this.distributionDfPlot.push(distributionTable.plot);
+
+    const colCategories = viewerDfCols.byName(this.model.settings.clustersColumnName!).categories;
+    let newClusterName = this.newClusterName;
+    let clusterNum = 1;
+    const getString = !isNaN(parseInt(newClusterName)) ? () => `${parseInt(newClusterName) + 1}` :
+      newClusterName == '' ? () => `${clusterNum++}` :
+        () => `${this.newClusterName} ${clusterNum++}`;
+    while (colCategories.includes(newClusterName))
+      newClusterName = getString();
+
+    this.getProperty('newClusterName')?.set(this, getString());
+
+    for (let i = 0; i < viewerDfColsLength; ++i) {
+      const col = viewerDfCols.byIndex(i);
+      newClusterVals[i] = col.name == this.model.settings.clustersColumnName! ? newClusterName :
+        col.name == C.LST_COLUMN_NAMES.MEMBERS ? maskInfo.trueCount :
+          col.name == C.LST_COLUMN_NAMES.WEB_LOGO ? null :
+            col.name == C.LST_COLUMN_NAMES.DISTRIBUTION ? null :
+              col.name == C.LST_COLUMN_NAMES.MEAN_DIFFERENCE ? stats.meanDifference:
+                col.name == C.LST_COLUMN_NAMES.P_VALUE ? stats.pValue:
+                  col.name == C.LST_COLUMN_NAMES.RATIO ? stats.ratio:
+        console.warn(`PeptidesLSTWarn: value for column ${col.name} is undefined`)! || null;
+    }
+    viewerDf.rows.addNew(newClusterVals);
+
+    this.model.clusterStats[newClusterName] = stats;
+    this.model.addNewCluster(newClusterName);
+  }
+
+  removeCluster(): void {
+    const lss = this.model.logoSummarySelection;
+    const dfCols = this.dataFrame.columns;
+
+    const removeClusterIndexesList = lss.filter((cluster) => dfCols.contains(cluster));
+    if (removeClusterIndexesList.length == 0)
+      return grok.shell.info('Nothing removed. Please select a created cluster to remove');
+
+    for (const cluster of removeClusterIndexesList) {
+      lss.splice(lss.indexOf(cluster), 1);
+      dfCols.remove(cluster);
+    }
+
+    this.model.logoSummarySelection = lss;
+    this.model.clusterStats = this.model.calculateClusterStatistics();
+    this.createLogoSummaryGrid();
+    this.render();
   }
 }

package/src/viewers/sar-viewer.ts

@@ -6,13 +6,12 @@ import $ from 'cash-dom';
 import * as C from '../utils/constants';
 import * as CR from '../utils/cell-renderer';
 import {PeptidesModel} from '../model';
-import {isGridCellInvalid} from '../utils/misc';
 
 export class SARViewerBase extends DG.JsViewer {
   tempName!: string;
   _viewerGrid!: DG.Grid;
   sourceGrid!: DG.Grid;
-  model!: PeptidesModel;
+  _model!: PeptidesModel;
   isPropertyChanging: boolean = false;
   _isVertical = false;
 
@@ -29,10 +28,15 @@ export class SARViewerBase extends DG.JsViewer {
     this._viewerGrid = grid;
   }
 
+  get model(): PeptidesModel {
+    this._model ??= PeptidesModel.getInstance(this.dataFrame);
+    return this._model;
+  }
+
   onTableAttached(): void {
     super.onTableAttached();
     this.sourceGrid = this.view?.grid ?? (grok.shell.v as DG.TableView).grid;
-    this.model = PeptidesModel.getInstance(this.dataFrame);
+    // this.model = PeptidesModel.getInstance(this.dataFrame);
     this.subs.push(this.model.onMutationCliffsSelectionChanged.subscribe(() => this.viewerGrid.invalidate()));
     this.helpUrl = '/help/domains/bio/peptides.md';
   }
@@ -80,9 +84,16 @@ export class SARViewerBase extends DG.JsViewer {
         switchHost = ui.divH([mutationCliffsMode.root, invariantMapMode.root], {id: 'pep-viewer-title'});
         $(switchHost).css('width', 'auto').css('align-self', 'center');
       }
+      const tips: HTMLElement = ui.iconFA('question');
+      ui.tooltip.bind(tips,
+        () => ui.divV([ui.divText('Color intensity - p-value'), ui.divText('Circle size - Mean difference')]));
+
+      $(tips).addClass('pep-help-icon');
+
       const viewerRoot = this.viewerGrid.root;
       viewerRoot.style.width = 'auto';
-      this.root.appendChild(ui.divV([switchHost, viewerRoot]));
+      const header = ui.divH([switchHost, tips], {style: {alignSelf: 'center', lineHeight: 'normal'}});
+      this.root.appendChild(ui.divV([header, viewerRoot]));
     }
     this.viewerGrid?.invalidate();
   }
@@ -143,18 +154,18 @@ export class MonomerPosition extends SARViewerBase {
     this.viewerGrid.onCellTooltip((cell: DG.GridCell, x: number, y: number) => showTooltip(cell, x, y, this.model));
     this.viewerGrid.root.addEventListener('click', (ev) => {
       const gridCell = this.viewerGrid.hitTest(ev.offsetX, ev.offsetY);
-      if (isGridCellInvalid(gridCell) || gridCell!.tableColumn!.name == C.COLUMNS_NAMES.MONOMER)
+      if (!gridCell?.isTableCell || gridCell?.tableColumn?.name == C.COLUMNS_NAMES.MONOMER)
         return;
 
       const position = gridCell!.tableColumn!.name;
       const aar = monomerCol.get(gridCell!.tableRowIndex!);
       chooseAction(aar, position, ev.shiftKey, this.model.isInvariantMap, this.model);
       this.viewerGrid.invalidate();
+      this.model.fireBitsetChanged();
     });
     this.viewerGrid.onCurrentCellChanged.subscribe((_gc) => cellChanged(this.model.monomerPositionDf, this.model));
 
     setViewerGridProps(this.viewerGrid, false);
-    setTimeout(() => this.viewerGrid.col(C.COLUMNS_NAMES.MONOMER)!.width = 60, 10);
   }
 }
 
@@ -199,7 +210,7 @@ export class MostPotentResiduesViewer extends SARViewerBase {
     pValGridCol.format = '#.000';
     pValGridCol.name = 'P-value';
     const monomerCol = this.model.mostPotentResiduesDf.getCol(C.COLUMNS_NAMES.MONOMER);
-    const positionCol = this.model.mostPotentResiduesDf.getCol(C.COLUMNS_NAMES.POSITION);
+    const positionCol: DG.Column<number> = this.model.mostPotentResiduesDf.getCol(C.COLUMNS_NAMES.POSITION);
 
     // Setting Monomer column renderer
     CR.setAARRenderer(monomerCol, this.model.alphabet);
@@ -207,27 +218,27 @@ export class MostPotentResiduesViewer extends SARViewerBase {
     this.viewerGrid.onCellTooltip((cell: DG.GridCell, x: number, y: number) => showTooltip(cell, x, y, this.model));
     this.viewerGrid.root.addEventListener('click', (ev) => {
       const gridCell = this.viewerGrid.hitTest(ev.offsetX, ev.offsetY);
-      if (isGridCellInvalid(gridCell) || gridCell!.tableColumn!.name != C.COLUMNS_NAMES.MEAN_DIFFERENCE)
+      if (!gridCell?.isTableCell || gridCell!.tableColumn!.name != C.COLUMNS_NAMES.MEAN_DIFFERENCE)
         return;
 
       const tableRowIdx = gridCell!.tableRowIndex!;
       const position = positionCol.get(tableRowIdx);
       const aar = monomerCol.get(tableRowIdx);
-      chooseAction(aar, position, ev.shiftKey, false, this.model);
+      chooseAction(aar, position!.toFixed(), ev.shiftKey, false, this.model);
       this.viewerGrid.invalidate();
+      this.model.fireBitsetChanged();
     });
     this.viewerGrid.onCurrentCellChanged.subscribe((_gc) => cellChanged(this.model.mostPotentResiduesDf, this.model));
     const mdCol: DG.GridColumn = this.viewerGrid.col(C.COLUMNS_NAMES.MEAN_DIFFERENCE)!;
     mdCol.name = 'Diff';
     setViewerGridProps(this.viewerGrid, true);
-    setTimeout(() => this.viewerGrid.col(C.COLUMNS_NAMES.MONOMER)!.width = 60, 10);
   }
 }
 
 function renderCell(args: DG.GridCellRenderArgs, model: PeptidesModel, isInvariantMap?: boolean,
   colorCol?: DG.Column<number>, colorAgg?: DG.AggregationType): void {
   const renderColNames = [...model.splitSeqDf.columns.names(), C.COLUMNS_NAMES.MEAN_DIFFERENCE];
-  const mdCol = model.monomerPositionStatsDf.getCol(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
+  // const mdCol = model.monomerPositionStats.getCol(C.COLUMNS_NAMES.MEAN_DIFFERENCE);
   const canvasContext = args.g;
   const bound = args.bounds;
 
@@ -241,49 +252,52 @@ function renderCell(args: DG.GridCellRenderArgs, model: PeptidesModel, isInvaria
   if (cell.isRowHeader && cell.gridColumn.visible) {
     cell.gridColumn.visible = false;
     args.preventDefault();
+    canvasContext.restore();
     return;
   }
 
   const tableColName = cell.tableColumn?.name;
   const tableRowIndex = cell.tableRowIndex!;
-  if (cell.isTableCell && tableColName && tableRowIndex !== null && renderColNames.indexOf(tableColName) !== -1) {
-    const cellValue: number | null = cell.cell.value;
-
-    if (cellValue && cellValue !== DG.INT_NULL && cellValue !== DG.FLOAT_NULL) {
-      const gridTable = cell.grid.table;
-      const currentPosition: string = tableColName !== C.COLUMNS_NAMES.MEAN_DIFFERENCE ?
-        tableColName : gridTable.get(C.COLUMNS_NAMES.POSITION, tableRowIndex);
-      const currentAAR: string = gridTable.get(C.COLUMNS_NAMES.MONOMER, tableRowIndex);
-
-      if (isInvariantMap) {
-        const value: number = model.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);
-        const positionCol = model.df.getCol(currentPosition);
-        const positionColData = positionCol.getRawData();
-        const positionColCategories = positionCol.categories;
-
-        const colorColData = colorCol!.getRawData();
-        const colorDataList: number[] = [];
-        for (let i = 0; i < positionColData.length; ++i) {
-          if (positionColCategories[positionColData[i]] === currentAAR)
-            colorDataList.push(colorColData[i]);
-        }
-        const cellColorDataCol = DG.Column.fromList('double', '', colorDataList);
-        const colorColStats = colorCol!.stats;
-
-        const color = DG.Color.scaleColor(cellColorDataCol.aggregate(colorAgg!), colorColStats.min, colorColStats.max);
-        CR.renderInvaraintMapCell(
-          canvasContext, currentAAR, currentPosition, model.invariantMapSelection, value, bound, color);
-      } else {
-        CR.renderMutationCliffCell(canvasContext, currentAAR, currentPosition, model.monomerPositionStatsDf,
-          mdCol, bound, cellValue, model.mutationCliffsSelection, model.substitutionsInfo,
-          model.settings.isBidirectional);
-      }
-    }
+  if (!cell.isTableCell || renderColNames.indexOf(tableColName!) == -1) {
+    canvasContext.restore();
+    return;
+  }
+
+  const gridTable = cell.grid.table;
+  const currentMonomer: string = gridTable.get(C.COLUMNS_NAMES.MONOMER, tableRowIndex);
+  const currentPosition: string = tableColName !== C.COLUMNS_NAMES.MEAN_DIFFERENCE ? tableColName :
+    gridTable.get(C.COLUMNS_NAMES.POSITION, tableRowIndex).toFixed();
+  const currentPosStats = model.monomerPositionStats[currentPosition];
+
+  if (!currentPosStats[currentMonomer]) {
     args.preventDefault();
+    canvasContext.restore();
+    return;
+  }
+
+  if (isInvariantMap) {
+    const value = currentPosStats[currentMonomer].count;
+    const positionCol = model.df.getCol(currentPosition);
+    const positionColData = positionCol.getRawData();
+    const positionColCategories = positionCol.categories;
+
+    const colorColData = colorCol!.getRawData();
+    const colorDataList: number[] = [];
+    for (let i = 0; i < positionColData.length; ++i) {
+      if (positionColCategories[positionColData[i]] === currentMonomer)
+        colorDataList.push(colorColData[i]);
+    }
+    const cellColorDataCol = DG.Column.fromList('double', '', colorDataList);
+    const colorColStats = colorCol!.stats;
+
+    const color = DG.Color.scaleColor(cellColorDataCol.aggregate(colorAgg!), colorColStats.min, colorColStats.max);
+    CR.renderInvaraintMapCell(
+      canvasContext, currentMonomer, currentPosition, model.invariantMapSelection, value, bound, color);
+  } else {
+    CR.renderMutationCliffCell(canvasContext, currentMonomer, currentPosition, model.monomerPositionStats, bound,
+      model.mutationCliffsSelection, model.substitutionsInfo, model.settings.isBidirectional);
   }
+  args.preventDefault();
   canvasContext.restore();
 }
 
@@ -299,9 +313,9 @@ function showTooltip(cell: DG.GridCell, x: number, y: number, model: PeptidesMod
 
     if (tableCol.semType == C.SEM_TYPES.MONOMER)
       model.showMonomerTooltip(currentAAR, x, y);
-    else if (cell.cell.value && renderColNames.includes(tableColName!)) {
+    else if (renderColNames.includes(tableColName!)) {
       const currentPosition = tableColName !== C.COLUMNS_NAMES.MEAN_DIFFERENCE ? tableColName :
-        table.get(C.COLUMNS_NAMES.POSITION, tableRowIndex);
+        table.get(C.COLUMNS_NAMES.POSITION, tableRowIndex).toFixed();
 
       model.showTooltipAt(currentAAR, currentPosition, x, y);
     }