@datagrok/peptides 1.15.3 → 1.16.0

package/src/utils/cell-renderer.ts

@@ -1,10 +1,15 @@
+import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import * as C from './constants';
-import * as types from './types';
-import {PositionStats, MonomerPositionStats, CLUSTER_TYPE} from '../model';
+import * as type from './types';
+import {CLUSTER_TYPE, PeptidesModel} from '../model';
 import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
 import {monomerToShort} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {calculateMonomerPositionStatistics} from './algorithms';
+import * as rxjs from 'rxjs';
+import {TooltipOptions, showTooltipAt} from './tooltips';
+import {MonomerPositionStats, PositionStats} from './statistics';
 
 export function renderCellSelection(canvasContext: CanvasRenderingContext2D, bound: DG.Rect): void {
   canvasContext.strokeStyle = '#000';
@@ -21,7 +26,7 @@ export function setMonomerRenderer(col: DG.Column, alphabet: string): void {
 
 export function renderMutationCliffCell(canvasContext: CanvasRenderingContext2D, currentMonomer: string,
   currentPosition: string, monomerPositionStats: MonomerPositionStats, bound: DG.Rect,
-  mutationCliffsSelection: types.Selection, substitutionsInfo: types.MutationCliffs | null = null,
+  mutationCliffsSelection: type.Selection, substitutionsInfo: type.MutationCliffs | null = null,
   renderNums: boolean = true): void {
   const positionStats = monomerPositionStats[currentPosition];
   const pVal = positionStats![currentMonomer]!.pValue;
@@ -79,7 +84,7 @@ export function renderMutationCliffCell(canvasContext: CanvasRenderingContext2D,
 }
 
 export function renderInvaraintMapCell(canvasContext: CanvasRenderingContext2D, currentMonomer: string,
-  currentPosition: string, invariantMapSelection: types.Selection, cellValue: number, bound: DG.Rect,
+  currentPosition: string, invariantMapSelection: type.Selection, cellValue: number, bound: DG.Rect,
   color: number): void {
   //FIXME: This is a hack, because `color` value sometimes comes incomplete. E.g. we found that here `color` value is
   // 255 and its contrast color would be black, which is not visible on blue (color code) background. The full number
@@ -99,7 +104,7 @@ export function renderInvaraintMapCell(canvasContext: CanvasRenderingContext2D,
 }
 
 export function renderLogoSummaryCell(canvasContext: CanvasRenderingContext2D, cellValue: string,
-  clusterSelection: types.Selection, bound: DG.Rect): void {
+  clusterSelection: type.Selection, bound: DG.Rect): void {
   canvasContext.font = '13px Roboto, Roboto Local, sans-serif';
   canvasContext.textAlign = 'center';
   canvasContext.textBaseline = 'middle';
@@ -113,7 +118,7 @@ export function renderLogoSummaryCell(canvasContext: CanvasRenderingContext2D, c
 
 export function drawLogoInBounds(ctx: CanvasRenderingContext2D, bounds: DG.Rect, stats: PositionStats, position: string,
   sortedOrder: string[], rowCount: number, cp: SeqPalette, monomerSelectionStats: { [monomer: string]: number } = {},
-  drawOptions: types.DrawOptions = {}): { [monomer: string]: DG.Rect } {
+  drawOptions: type.DrawOptions = {}): { [monomer: string]: DG.Rect } {
   const pr = window.devicePixelRatio;
   drawOptions.symbolStyle ??= '16px Roboto, Roboto Local, sans-serif';
   drawOptions.upperLetterHeight ??= 12.2;
@@ -172,3 +177,114 @@ export function drawLogoInBounds(ctx: CanvasRenderingContext2D, bounds: DG.Rect,
 
   return monomerBounds;
 }
+
+export type CellRendererOptions = {isSelectionTable?: boolean, headerSelectedMonomers?: type.SelectionStats,
+  webLogoBounds?: WebLogoBounds, cachedWebLogoTooltip?: type.CachedWebLogoTooltip};
+export type WebLogoBounds = {[positon: string]: {[monomer: string]: DG.Rect}};
+
+export function setWebLogoRenderer(grid: DG.Grid, model: PeptidesModel, options: CellRendererOptions = {},
+  tooltipOptions: TooltipOptions = {x: 0, y: 0, mpStats: {} as MonomerPositionStats, monomerPosition: {} as type.SelectionItem}): void {
+  options.isSelectionTable ??= false;
+  if (Object.keys(tooltipOptions.mpStats).length == 0)
+    tooltipOptions.mpStats = model.monomerPositionStats;
+  if (options.isSelectionTable && (!options.webLogoBounds || !options.cachedWebLogoTooltip)) {
+    throw new Error('Peptides: Cannot set WebLogo renderer for selection table without `headerSelectedMonomers`, ' +
+      '`webLogoBounds` and `cachedWebLogoTooltip` options.');
+  }
+
+  options.webLogoBounds ??= model.webLogoBounds;
+  options.cachedWebLogoTooltip ??= model.cachedWebLogoTooltip;
+  const df = grid.dataFrame;
+  grid.setOptions({'colHeaderHeight': 130});
+  const headerRenderer = (gcArgs: DG.GridCellRenderArgs): void => {
+    const ctx = gcArgs.g;
+    const bounds = gcArgs.bounds;
+    const col = gcArgs.cell.tableColumn;
+
+    ctx.save();
+    try {
+      ctx.beginPath();
+      ctx.rect(bounds.x, bounds.y, bounds.width, bounds.height);
+      ctx.clip();
+
+      //TODO: optimize
+      if (gcArgs.cell.isColHeader && col?.semType === C.SEM_TYPES.MONOMER) {
+        const isDfFiltered = df.filter.anyFalse;
+        const stats = (isDfFiltered || options.isSelectionTable ?
+          calculateMonomerPositionStatistics(df, model.positionColumns.toArray(), {isFiltered: true, columns: [col.name]}) :
+          model.monomerPositionStats)[col.name];
+        if (!stats)
+          return;
+        //TODO: precalc on stats creation
+        const sortedStatsOrder = Object.keys(stats).sort((a, b) => {
+          if (a === '' || a === '-')
+            return +1;
+          else if (b === '' || b === '-')
+            return -1;
+          return 0;
+        }).filter((v) => v !== 'general');
+
+        options.webLogoBounds![col.name] = drawLogoInBounds(ctx, bounds, stats, col.name,
+          sortedStatsOrder, df.filter.trueCount, model.cp, options.headerSelectedMonomers ? options.headerSelectedMonomers[col.name] : {});
+        gcArgs.preventDefault();
+      }
+    } catch (e) {
+      console.warn(`PeptidesHeaderLogoError: couldn't render WebLogo for column \`${col!.name}\`. ` +
+        `See original error below.`);
+      console.warn(e);
+    } finally {
+      ctx.restore();
+    }
+  };
+  grid.onCellRender.subscribe((gcArgs) => headerRenderer(gcArgs));
+
+  const eventAction = (ev: MouseEvent): void => {
+    const cell = grid.hitTest(ev.offsetX, ev.offsetY);
+    if (cell?.isColHeader && cell.tableColumn?.semType === C.SEM_TYPES.MONOMER) {
+      const monomerPosition = findWebLogoMonomerPosition(cell, ev, (options.webLogoBounds ?? model.webLogoBounds));
+      if (monomerPosition === null) {
+        if (!options.isSelectionTable)
+          model.unhighlight();
+        return;
+      }
+      tooltipOptions.monomerPosition = monomerPosition;
+      requestBarchartAction(ev, monomerPosition, model, df, options, tooltipOptions);
+      if (!options.isSelectionTable)
+          model.highlightMonomerPosition(monomerPosition);
+    }
+  };
+
+  // The following events makes the barchart interactive
+  rxjs.fromEvent<MouseEvent>(grid.overlay, 'mousemove').subscribe((mouseMove: MouseEvent) => eventAction(mouseMove));
+  rxjs.fromEvent<MouseEvent>(grid.overlay, 'click').subscribe((mouseMove: MouseEvent) => eventAction(mouseMove));
+}
+
+function requestBarchartAction(ev: MouseEvent, monomerPosition: type.SelectionItem, model: PeptidesModel, df: DG.DataFrame,
+  options: CellRendererOptions, tooltipOptions: TooltipOptions): void {
+  if (ev.type === 'click' && !options.isSelectionTable)
+    model.modifyInvariantMapSelection(monomerPosition, {shiftPressed: ev.shiftKey, ctrlPressed: ev.ctrlKey});
+  else {
+    const bar = `${monomerPosition.positionOrClusterType} = ${monomerPosition.monomerOrCluster}`;
+    if (options.cachedWebLogoTooltip!.bar === bar)
+      ui.tooltip.show(options.cachedWebLogoTooltip!.tooltip!, ev.clientX, ev.clientY);
+    else {
+      options.cachedWebLogoTooltip!.bar = bar;
+      tooltipOptions.x = ev.clientX;
+      tooltipOptions.y = ev.clientY;
+      tooltipOptions.monomerPosition = monomerPosition;
+      options.cachedWebLogoTooltip!.tooltip = showTooltipAt(df, model.settings.columns!, tooltipOptions);
+    }
+  }
+}
+
+function findWebLogoMonomerPosition(cell: DG.GridCell, ev: MouseEvent, webLogoBounds: WebLogoBounds): type.SelectionItem | null {
+  const barCoords = webLogoBounds[cell.tableColumn!.name];
+  for (const [monomer, coords] of Object.entries(barCoords)) {
+    const isIntersectingX = ev.offsetX >= coords.x && ev.offsetX <= coords.x + coords.width;
+    const isIntersectingY = ev.offsetY >= coords.y && ev.offsetY <= coords.y + coords.height;
+    if (isIntersectingX && isIntersectingY)
+      return {monomerOrCluster: monomer, positionOrClusterType: cell.tableColumn!.name};
+  }
+
+  return null;
+}

package/src/utils/constants.ts

@@ -7,6 +7,7 @@ export enum COLUMNS_NAMES {
   MEAN_DIFFERENCE = 'Mean difference',
   COUNT = 'Count',
   RATIO = 'Ratio',
+  MEAN = 'Mean',
 }
 
 export enum LST_COLUMN_NAMES {

package/src/utils/statistics.ts

@@ -2,6 +2,8 @@ import * as DG from 'datagrok-api/dg';
 import {tTest} from '@datagrok-libraries/statistics/src/tests';
 import {RawData} from './types';
 import BitArray from '@datagrok-libraries/utils/src/bit-array';
+import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations';
+import {ClusterType} from '../model';
 
 export type Stats = {
   count: number,
@@ -9,8 +11,25 @@ export type Stats = {
   meanDifference: number,
   ratio: number,
   mask: BitArray,
+  mean: number,
 };
 
+export type PositionStats = {[monomer: string]: Stats | undefined} & {general: SummaryStats};
+export type MonomerPositionStats = {[position: string]: PositionStats | undefined} & {general: SummaryStats};
+export type ClusterStats = {[cluster: string]: Stats};
+export type ClusterTypeStats = {[clusterType in ClusterType]: ClusterStats};
+
+export type SummaryStats = {
+  minCount: number, maxCount: number,
+  minMeanDifference: number, maxMeanDifference: number,
+  minPValue: number, maxPValue: number,
+  minRatio: number, maxRatio: number,
+  minMean: number, maxMean: number,
+};
+
+export const getAggregatedColName = (aggF: string, colName: string): string => `${aggF}(${colName})`;
+export type AggregationColumns = {[col: string]: DG.AggregationType};
+
 export function getStats(data: RawData | number[], bitArray: BitArray): Stats {
   if (data.length !== bitArray.length && data.some((v, i) => i >= bitArray.length ? v !== 0 : false))
     throw new Error('PeptidesError: Data and bit array have different lengths');
@@ -29,12 +48,13 @@ export function getStats(data: RawData | number[], bitArray: BitArray): Stats {
       rest[restIndex++] = data[i];
   }
 
+  const selectedMean = selected.reduce((a, b) => a + b, 0) / selected.length;
   if (selected.length === 1 || rest.length === 1) {
-    const selectedMean = selected.reduce((a, b) => a + b, 0) / selected.length;
     const restMean = rest.reduce((a, b) => a + b, 0) / rest.length;
     return {
       count: selected.length,
       pValue: null,
+      mean: selectedMean,
       meanDifference: selectedMean - restMean,
       ratio: selected.length / (bitArray.length),
       mask: bitArray,
@@ -46,6 +66,7 @@ export function getStats(data: RawData | number[], bitArray: BitArray): Stats {
   return {
     count: selected.length,
     pValue: testResult[currentMeanDiff >= 0 ? 'p-value more' : 'p-value less'],
+    mean: selectedMean,
     meanDifference: currentMeanDiff,
     ratio: selected.length / (bitArray.length),
     mask: bitArray,
@@ -59,3 +80,19 @@ export function getAggregatedValue(col: DG.Column<number>, agg: DG.AggregationTy
   //@ts-ignore: this is a hack to avoid using switch to access the getters
   return stat[agg] as number;
 }
+
+export function getAggregatedColumnValues(df: DG.DataFrame, columns: AggregationColumns,
+  options: {filterDf?: boolean, mask?: DG.BitSet, fractionDigits?: number} = {}): StringDictionary {
+  options.filterDf ??= false;
+  options.fractionDigits ??= 3;
+
+  const filteredDf = options.filterDf && df.filter.anyFalse ? df.clone(df.filter) : df;
+
+  const colResults: StringDictionary = {};
+  for (const [colName, aggFn] of Object.entries(columns)) {
+    const newColName = getAggregatedColName(aggFn, colName);
+    const value = getAggregatedValue(filteredDf.getCol(colName), aggFn, options.mask);
+    colResults[newColName] = value.toFixed(options.fractionDigits);
+  }
+  return colResults;
+}

package/src/utils/tooltips.ts

@@ -0,0 +1,78 @@
+import * as ui from 'datagrok-api/ui';
+import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
+
+import * as type from './types';
+import * as C from '../utils/constants';
+
+import {getActivityDistribution, getDistributionLegend, getStatsTableMap} from '../widgets/distribution';
+import {getStatsSummary, prepareTableForHistogram} from '../utils/misc';
+import {getMonomerWorksInstance} from '../package';
+import {AggregationColumns, MonomerPositionStats, getAggregatedColumnValues} from './statistics';
+
+export type TooltipOptions = {fromViewer?: boolean, isMutationCliffs?: boolean, x: number, y: number,
+  monomerPosition: type.SelectionItem, mpStats: MonomerPositionStats};
+
+export function showMonomerTooltip(monomer: string, x: number, y: number): boolean {
+  const tooltipElements: HTMLDivElement[] = [];
+  const monomerName = monomer.toLowerCase();
+
+  const mw = getMonomerWorksInstance();
+  const mol = mw?.getCappedRotatedMonomer('PEPTIDE', monomer);
+
+  if (mol) {
+    tooltipElements.push(ui.div(monomerName));
+    const options = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
+    tooltipElements.push(grok.chem.svgMol(mol, undefined, undefined, options));
+  } else if (monomer !== '')
+    tooltipElements.push(ui.div(monomer));
+  else
+    return true;
+
+
+  ui.tooltip.show(ui.divV(tooltipElements), x, y);
+
+  return true;
+}
+
+export function showTooltip(df: DG.DataFrame, columns: AggregationColumns, options: TooltipOptions): boolean {
+  options.fromViewer ??= false;
+  options.isMutationCliffs ??= false;
+  if (options.monomerPosition.positionOrClusterType === C.COLUMNS_NAMES.MONOMER)
+    showMonomerTooltip(options.monomerPosition.monomerOrCluster, options.x, options.y);
+  else
+    showTooltipAt(df, columns, options);
+  return true;
+}
+
+//TODO: move out to viewer code
+export function showTooltipAt(df: DG.DataFrame, columns: AggregationColumns, options: TooltipOptions): HTMLDivElement | null {
+  options.fromViewer ??= false;
+  options.isMutationCliffs ??= false;
+  const stats = options.mpStats[options.monomerPosition.positionOrClusterType]![options.monomerPosition.monomerOrCluster];
+  if (!stats?.count)
+    return null;
+
+  const activityCol = df.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
+  const mask = DG.BitSet.fromBytes(stats.mask.buffer.buffer, activityCol.length);
+  const distributionTable = DG.DataFrame.fromColumns(
+    [activityCol, DG.Column.fromBitSet(C.COLUMNS_NAMES.SPLIT_COL, mask)]);
+  const hist = getActivityDistribution(prepareTableForHistogram(distributionTable), true);
+
+  const tableMap = getStatsTableMap(stats);
+  if (options.fromViewer) {
+    tableMap['Mean difference'] = `${tableMap['Mean difference']}${options.isMutationCliffs ? ' (size)' : ''}`;
+    if (tableMap['p-value'])
+      tableMap['p-value'] = `${tableMap['p-value']}${options.isMutationCliffs ? ' (color)' : ''}`;
+  }
+  const aggregatedColMap = getAggregatedColumnValues(df, columns, {mask: mask});
+  const resultMap = {...tableMap, ...aggregatedColMap};
+
+  const labels = getDistributionLegend(
+    `${options.monomerPosition.positionOrClusterType} : ${options.monomerPosition.monomerOrCluster}`, 'Other');
+  const distroStatsElem = getStatsSummary(labels, hist, resultMap);
+
+  ui.tooltip.show(distroStatsElem, options.x, options.y);
+
+  return distroStatsElem;
+}

package/src/utils/types.ts

@@ -50,3 +50,5 @@ export type StatsInfo = {
 export type RawColumn = {name: string, rawData: RawData, cat?: string[]};
 
 export type SelectionOptions = {shiftPressed: boolean, ctrlPressed: boolean};
+
+export type CachedWebLogoTooltip = {bar: string, tooltip: HTMLDivElement | null};

package/src/viewers/logo-summary.ts

@@ -7,7 +7,7 @@ import {CLUSTER_TYPE, ClusterType, PeptidesModel, VIEWER_TYPE} from '../model';
 import * as C from '../utils/constants';
 import * as CR from '../utils/cell-renderer';
 import {HorizontalAlignments, IWebLogoViewer, PositionHeight} from '@datagrok-libraries/bio/src/viewers/web-logo';
-import {getAggregatedValue, getStats, Stats} from '../utils/statistics';
+import {getAggregatedColumnValues, getAggregatedValue, getStats, Stats} from '../utils/statistics';
 import wu from 'wu';
 import {getActivityDistribution, getDistributionLegend, getStatsTableMap} from '../widgets/distribution';
 import {getStatsSummary, prepareTableForHistogram} from '../utils/misc';
@@ -319,7 +319,21 @@ export class LogoSummaryTable extends DG.JsViewer {
         this.currentRowIndex = gridCell.gridRow;
       }
     });
-    this.viewerGrid.root.addEventListener('keydown', (ev) => this.keyPress = ev.key.startsWith('Arrow'));
+    this.viewerGrid.root.addEventListener('keydown', (ev) => {
+      this.keyPress = ev.key.startsWith('Arrow');
+      if (this.keyPress)
+        return;
+      if (ev.key === 'Escape' || (ev.code === 'KeyA' && ev.shiftKey && ev.ctrlKey))
+        this.model.initClusterSelection({notify: false});
+      else if (ev.code === 'KeyA' && ev.ctrlKey) {
+        for (let rowIdx = 0; rowIdx < summaryTable.rowCount; ++rowIdx) {
+          this.model.modifyClusterSelection(this.getCluster(this.viewerGrid.cell(C.LST_COLUMN_NAMES.CLUSTER, rowIdx)),
+            {shiftPressed: true, ctrlPressed: false}, false);
+        }
+      }
+      this.model.fireBitsetChanged();
+      this.viewerGrid.invalidate();
+    });
     this.viewerGrid.root.addEventListener('click', (ev) => {
       const gridCell = this.viewerGrid.hitTest(ev.offsetX, ev.offsetY);
       if (!gridCell || !gridCell.isTableCell || gridCell.tableColumn?.name !== C.LST_COLUMN_NAMES.CLUSTER)
@@ -449,7 +463,7 @@ export class LogoSummaryTable extends DG.JsViewer {
     const activityColData = activityCol.getRawData();
 
     if (cluster.positionOrClusterType === CLUSTER_TYPE.ORIGINAL) {
-      const origClustCol = filteredDf.getCol(C.LST_COLUMN_NAMES.CLUSTER);
+      const origClustCol = filteredDf.getCol(this.model.settings.clustersColumnName!);
       const origClustColData = origClustCol.getRawData();
       const origClustColCategories = origClustCol.categories;
       const seekValue = origClustColCategories.indexOf(cluster.monomerOrCluster);
@@ -475,7 +489,7 @@ export class LogoSummaryTable extends DG.JsViewer {
     const labels = getDistributionLegend(`Cluster: ${cluster.monomerOrCluster}`, 'Other');
     const hist = getActivityDistribution(distributionTable, true);
     const tableMap = getStatsTableMap(stats);
-    const aggregatedColMap = this.model.getAggregatedColumnValues({filterDf: true, mask: mask});
+    const aggregatedColMap = getAggregatedColumnValues(this.model.df, this.model.settings.columns!, {filterDf: true, mask: mask});
     const resultMap: {[key: string]: any} = {...tableMap, ...aggregatedColMap};
     const tooltip = getStatsSummary(labels, hist, resultMap);
 

package/src/viewers/sar-viewer.ts

@@ -5,11 +5,12 @@ import * as DG from 'datagrok-api/dg';
 import $ from 'cash-dom';
 import * as C from '../utils/constants';
 import * as CR from '../utils/cell-renderer';
-import {PeptidesModel, PositionStats, VIEWER_TYPE} from '../model';
+import {PeptidesModel, VIEWER_TYPE} from '../model';
 import wu from 'wu';
 import {SelectionItem} from '../utils/types';
-import {Stats} from '../utils/statistics';
+import {PositionStats, Stats} from '../utils/statistics';
 import {_package} from '../package';
+import {showTooltip} from '../utils/tooltips';
 
 export enum SELECTION_MODE {
   MUTATION_CLIFFS = 'Mutation Cliffs',
@@ -75,7 +76,7 @@ export class MonomerPosition extends DG.JsViewer {
 
   onTableAttached(): void {
     super.onTableAttached();
-    this.helpUrl = '/help/domains/bio/peptides.md';
+    this.helpUrl = 'https://datagrok.ai/help/datagrok/solutions/domains/bio/peptides-sar';
     this.render();
   }
 
@@ -125,7 +126,9 @@ export class MonomerPosition extends DG.JsViewer {
       }
       const monomerPosition = this.getMonomerPosition(gridCell);
       this.model.highlightMonomerPosition(monomerPosition);
-      return this.model.showTooltip(monomerPosition, x, y, true);
+      return showTooltip(this.model.df, this.model.settings.columns!, {fromViewer: true,
+        isMutationCliffs: this.mode === SELECTION_MODE.MUTATION_CLIFFS, monomerPosition, x, y,
+        mpStats: this.model.monomerPositionStats});
     });
     this.viewerGrid.root.addEventListener('mouseleave', (_ev) => this.model.unhighlight());
     DG.debounce(this.viewerGrid.onCurrentCellChanged, 500).subscribe((gridCell: DG.GridCell) => {
@@ -151,7 +154,31 @@ export class MonomerPosition extends DG.JsViewer {
         this.currentGridCell = gridCell;
       }
     });
-    this.viewerGrid.root.addEventListener('keydown', (ev) => this.keyPressed = ev.key.startsWith('Arrow'));
+    this.viewerGrid.root.addEventListener('keydown', (ev) => {
+      this.keyPressed = ev.key.startsWith('Arrow');
+      if (this.keyPressed)
+        return;
+      if (ev.key === 'Escape' || (ev.code === 'KeyA' && ev.ctrlKey && ev.shiftKey)) {
+        if (this.mode === SELECTION_MODE.INVARIANT_MAP)
+          this.model.initInvariantMapSelection({notify: false});
+        else
+          this.model.initMutationCliffsSelection({notify: false});
+      } else if (ev.code === 'KeyA' && ev.ctrlKey) {
+        const positions = Object.keys(this.model.monomerPositionStats).filter((pos) => pos !== 'general');
+        for (const position of positions) {
+          const monomers = Object.keys(this.model.monomerPositionStats[position]!).filter((monomer) => monomer !== 'general');
+          for (const monomer of monomers) {
+            const monomerPosition = {monomerOrCluster: monomer, positionOrClusterType: position};
+            if (this.mode === SELECTION_MODE.INVARIANT_MAP)
+              this.model.modifyInvariantMapSelection(monomerPosition, {shiftPressed: true, ctrlPressed: false}, false);
+            else
+              this.model.modifyMutationCliffsSelection(monomerPosition, {shiftPressed: true, ctrlPressed: false}, false);
+          }
+        }
+      }
+      this.model.fireBitsetChanged();
+      this.viewerGrid.invalidate();
+    });
     this.viewerGrid.root.addEventListener('click', (ev) => {
       const gridCell = this.viewerGrid.hitTest(ev.offsetX, ev.offsetY);
       if (!gridCell?.isTableCell || gridCell?.tableColumn?.name === C.COLUMNS_NAMES.MONOMER)
@@ -257,7 +284,7 @@ export class MostPotentResidues extends DG.JsViewer {
 
   onTableAttached(): void {
     super.onTableAttached();
-    this.helpUrl = '/help/domains/bio/peptides.md';
+    this.helpUrl = 'https://datagrok.ai/help/datagrok/solutions/domains/bio/peptides-sar';
     this.render();
   }
 
@@ -274,6 +301,7 @@ export class MostPotentResidues extends DG.JsViewer {
     const pValData: (number | null)[] = new Array(posData.length);
     const countData: number[] = new Array(posData.length);
     const ratioData: number[] = new Array(posData.length);
+    const meanData: number[] = new Array(posData.length);
 
     let i = 0;
     for (const [position, positionStats] of monomerPositionStatsEntries) {
@@ -312,6 +340,7 @@ export class MostPotentResidues extends DG.JsViewer {
       pValData[i] = maxEntry![1].pValue;
       countData[i] = maxEntry![1].count;
       ratioData[i] = maxEntry![1].ratio;
+      meanData[i] = maxEntry![1].mean;
       ++i;
     }
 
@@ -327,6 +356,7 @@ export class MostPotentResidues extends DG.JsViewer {
     mprDfCols.add(DG.Column.fromList(DG.TYPE.INT, C.COLUMNS_NAMES.POSITION, posData));
     mprDfCols.add(DG.Column.fromList(DG.TYPE.STRING, C.COLUMNS_NAMES.MONOMER, monomerData));
     mprDfCols.add(DG.Column.fromList(DG.TYPE.FLOAT, C.COLUMNS_NAMES.MEAN_DIFFERENCE, mdData));
+    mprDfCols.add(DG.Column.fromList(DG.TYPE.FLOAT, C.COLUMNS_NAMES.MEAN, meanData));
     mprDfCols.add(DG.Column.fromList(DG.TYPE.FLOAT, C.COLUMNS_NAMES.P_VALUE, pValData));
     mprDfCols.add(DG.Column.fromList(DG.TYPE.INT, C.COLUMNS_NAMES.COUNT, countData));
     mprDfCols.add(DG.Column.fromList(DG.TYPE.FLOAT, C.COLUMNS_NAMES.RATIO, ratioData));
@@ -359,7 +389,8 @@ export class MostPotentResidues extends DG.JsViewer {
         monomerPosition.positionOrClusterType = C.COLUMNS_NAMES.MONOMER;
       else if (gridCell.tableColumn?.name !== C.COLUMNS_NAMES.MEAN_DIFFERENCE)
         return false;
-      return this.model.showTooltip(monomerPosition, x, y, true);
+      return showTooltip(this.model.df, this.model.settings.columns!,
+        {fromViewer: true, isMutationCliffs: true, monomerPosition, x, y, mpStats: this.model.monomerPositionStats});
     });
     DG.debounce(this.viewerGrid.onCurrentCellChanged, 500).subscribe((gridCell: DG.GridCell) => {
       try {
@@ -378,7 +409,21 @@ export class MostPotentResidues extends DG.JsViewer {
         this.currentGridRowIdx = gridCell.gridRow;
       }
     });
-    this.viewerGrid.root.addEventListener('keydown', (ev) => this.keyPressed = ev.key.startsWith('Arrow'));
+    this.viewerGrid.root.addEventListener('keydown', (ev) => {
+      this.keyPressed = ev.key.startsWith('Arrow');
+      if (this.keyPressed)
+        return;
+      if (ev.key === 'Escape' || (ev.code === 'KeyA' && ev.ctrlKey && ev.shiftKey))
+        this.model.initMutationCliffsSelection({notify: false});
+      else if (ev.code === 'KeyA' && ev.ctrlKey) {
+        for (let rowIdx = 0; rowIdx < mostPotentResiduesDf.rowCount; ++rowIdx) {
+          const monomerPosition = this.getMonomerPosition(this.viewerGrid.cell('Diff', rowIdx));
+          this.model.modifyMutationCliffsSelection(monomerPosition, {shiftPressed: true, ctrlPressed: false}, false);
+        }
+      }
+      this.model.fireBitsetChanged();
+      this.viewerGrid.invalidate();
+    });
     this.viewerGrid.root.addEventListener('mouseleave', (_ev) => this.model.unhighlight());
     this.viewerGrid.root.addEventListener('click', (ev) => {
       const gridCell = this.viewerGrid.hitTest(ev.offsetX, ev.offsetY);

package/src/widgets/distribution.ts

@@ -5,7 +5,7 @@ import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations'
 import $ from 'cash-dom';
 
 import * as C from '../utils/constants';
-import {getStats, Stats} from '../utils/statistics';
+import {getAggregatedColumnValues, getStats, Stats} from '../utils/statistics';
 import {PeptidesModel} from '../model';
 import {getStatsSummary, prepareTableForHistogram} from '../utils/misc';
 import BitArray from '@datagrok-libraries/utils/src/bit-array';
@@ -57,7 +57,7 @@ export function getDistributionWidget(table: DG.DataFrame, model: PeptidesModel)
           const stats = model.monomerPositionStats[position]![monomer]!;
           const tableMap = getStatsTableMap(stats);
 
-          const aggregatedColMap = model.getAggregatedColumnValues({filterDf: true, mask});
+          const aggregatedColMap = getAggregatedColumnValues(model.df, model.settings.columns!, {filterDf: true, mask});
 
           const resultMap = {...tableMap, ...aggregatedColMap};
           const distributionRoot = getStatsSummary(labels, hist, resultMap);
@@ -83,7 +83,7 @@ export function getDistributionWidget(table: DG.DataFrame, model: PeptidesModel)
         const mask = DG.BitSet.create(rowCount, (i) => monomerIndexesList.includes(posColData[i]));
         const splitCol = DG.Column.fromBitSet(C.COLUMNS_NAMES.SPLIT_COL, mask);
 
-        const aggregatedColMap = model.getAggregatedColumnValues({filterDf: true, mask});
+        const aggregatedColMap = getAggregatedColumnValues(model.df, model.settings.columns!, {filterDf: true, mask});
 
         const distributionTable = DG.DataFrame.fromColumns([activityCol, splitCol]);
         const hist = getActivityDistribution(prepareTableForHistogram(distributionTable));
@@ -126,7 +126,7 @@ export function getDistributionWidget(table: DG.DataFrame, model: PeptidesModel)
 
         const mask = DG.BitSet.create(rowCount,
           (i) => posColDataList.some((posColData, j) => posColData[i] === monomerCategoryIndexList[j]));
-        const aggregatedColMap = model.getAggregatedColumnValues({filterDf: true, mask});
+        const aggregatedColMap = getAggregatedColumnValues(model.df, model.settings.columns!, {filterDf: true, mask});
 
         const splitCol = DG.Column.fromBitSet(C.COLUMNS_NAMES.SPLIT_COL, mask);
         const distributionTable = DG.DataFrame.fromColumns([activityCol, splitCol]);
@@ -166,8 +166,10 @@ export function getDistributionWidget(table: DG.DataFrame, model: PeptidesModel)
         const bitArray = BitArray.fromString(table.selection.toBinaryString());
         const mask = DG.BitSet.create(rowCount,
           bitArray.allFalse || bitArray.allTrue ? (_): boolean => true : (i): boolean => bitArray.getBit(i));
-        const aggregatedColMap = model.getAggregatedColumnValues({filterDf: true, mask});
-        const stats = bitArray.allFalse || bitArray.allTrue ? {count: rowCount, pValue: null, meanDifference: 0, ratio: 1, mask: bitArray} :
+        const aggregatedColMap = getAggregatedColumnValues(model.df, model.settings.columns!, {filterDf: true, mask});
+        const stats = bitArray.allFalse || bitArray.allTrue ?
+          {count: rowCount, pValue: null, meanDifference: 0, ratio: 1, mask: bitArray,
+            mean: activityCol.stats.avg} :
           getStats(activityColData, bitArray);
         const tableMap = getStatsTableMap(stats);
         const resultMap: {[key: string]: any} = {...tableMap, ...aggregatedColMap};
@@ -231,6 +233,7 @@ export function getStatsTableMap(stats: Stats, options: {fractionDigits?: number
   const tableMap: StringDictionary = {
     'Count': `${stats.count} (${stats.ratio.toFixed(options.fractionDigits)}%)`,
     'Mean difference': stats.meanDifference.toFixed(options.fractionDigits),
+    'Mean activity': stats.mean.toFixed(options.fractionDigits),
   };
   if (stats.pValue !== null)
     tableMap['p-value'] = stats.pValue < 0.01 ? '<0.01' : stats.pValue.toFixed(options.fractionDigits);

package/src/widgets/selection.ts

@@ -6,6 +6,10 @@ import {PeptidesModel} from '../model';
 import wu from 'wu';
 import {COLUMNS_NAMES} from '../utils/constants';
 import {addExpandIcon} from '../utils/misc';
+import {CellRendererOptions, WebLogoBounds, setWebLogoRenderer} from '../utils/cell-renderer';
+import {CachedWebLogoTooltip, SelectionItem} from '../utils/types';
+import {TooltipOptions} from '../utils/tooltips';
+import {calculateMonomerPositionStatistics} from '../utils/algorithms';
 
 export function getSelectionWidget(table: DG.DataFrame, model: PeptidesModel): HTMLElement {
   const compBitset = model.getCompoundBitset();
@@ -58,5 +62,15 @@ export function getSelectionWidget(table: DG.DataFrame, model: PeptidesModel): H
       grid.col(gridCol.name)!.width = gridCol.width;
     }
   }, 500);
+
+  const mpStats = calculateMonomerPositionStatistics(grid.dataFrame, model.positionColumns.toArray());
+
+  const cachedWebLogoTooltip: CachedWebLogoTooltip = {bar: '', tooltip: null};
+  const webLogoBounds: WebLogoBounds = {};
+  const cellRendererOptions: CellRendererOptions = {isSelectionTable: true, cachedWebLogoTooltip, webLogoBounds};
+  const tooltipOptions: TooltipOptions = {x: 0, y: 0, monomerPosition: {} as SelectionItem, mpStats};
+
+  setWebLogoRenderer(grid, model, cellRendererOptions, tooltipOptions);
+
   return gridHost;
 }