@datagrok/peptides 1.26.1 → 1.27.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/peptides",
   "friendlyName": "Peptides",
-  "version": "1.26.1",
+  "version": "1.27.0",
   "author": {
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"

package/src/model.ts

@@ -65,6 +65,7 @@ export enum VIEWER_TYPE {
   DENDROGRAM = 'Dendrogram',
   CLUSTER_MAX_ACTIVITY = 'Active peptide selection',
   MCL = 'MCL',
+  SEQUENCE_MUTATION_CLIFFS = 'Sequence Mutation Cliffs',
 }
 
 export type CachedWebLogoTooltip = { bar: string, tooltip: HTMLDivElement | null };
@@ -621,6 +622,7 @@ export class PeptidesModel {
         sequenceColumnName: sarViewer.sequenceColumnName,
         positionColumns: sarViewer.positionColumns,
         activityCol: sarViewer.getScaledActivityColumn(),
+        mutationCliffStats: sarViewer.cliffStats,
       }).root, true);
     }
     const isModelSource = requestSource === trueModel.settings;

package/src/tests/widgets.ts

@@ -146,6 +146,7 @@ category('Widgets: Mutation cliffs', () => {
       sequenceColumnName: sarViewer.sequenceColumnName,
       positionColumns: sarViewer.positionColumns,
       activityCol: scaledActivityCol,
+      mutationCliffStats: sarViewer.cliffStats,
     });
   });
 });

package/src/utils/algorithms.ts

@@ -63,19 +63,31 @@ export function calculateCliffsStatistics(
     const monomerSubMap = cliffs.get(monomer)!;
     for (const position of monomerSubMap.keys()) {
       const subMap = monomerSubMap.get(position)!;
-      const mask = new BitArray(activityArray.length, false);
       if (subMap.size === 0)
         continue;
+      // create two masks, one filtering the activities to only mutation cliffs (with given monomer at given position and its substitutions)
+      // another one corresponding to only the given monomer at given position within the mutation cliffs
+      const filterMask = new BitArray(activityArray.length, false);
+      const maskMCWithMonomerAtPosition = new BitArray(activityArray.length, false);
       for (const index of subMap.keys()) {
-        mask.setFast(index, true);
+        // set the filter mask to true for all sequences within the mutation cliff pairs
+        filterMask.setFast(index, true);
         const toIndexes = subMap.get(index)!;
-        toIndexes.forEach((i) => mask.setFast(i, true));
+        toIndexes.forEach((i) => filterMask.setFast(i, true));
+        // set the mask for sequences with the given monomer at the given position within the mutation cliffs
+        maskMCWithMonomerAtPosition.setFast(index, true);
       }
-      const stats = getStats(activityArray, mask);
+      const stats = getStats(activityArray, maskMCWithMonomerAtPosition, filterMask);
+      stats.mask = filterMask; // store the filter mask for later use in the viewer
       minDiff = Math.min(minDiff, stats.meanDifference);
       maxDiff = Math.max(maxDiff, stats.meanDifference);
       minCount = Math.min(minCount, stats.count);
       maxCount = Math.max(maxCount, stats.count);
+      // here, stats will show the following
+      // count - number of sequences with the given monomer at the given position within the mutation cliffs
+      // mask.trueCount - number of unique sequences within the mutation cliffs (with given monomer at given position and its substitutions)
+      // meanDifference - difference between mean activity of sequences with the given monomer at the given position within the mutation cliffs
+      // and mean activity of other sequences within the mutation cliffs (with given monomer at given position substitutions)
       monomerStatsMap.set(position, stats);
     }
   }

package/src/utils/misc.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
@@ -111,13 +112,10 @@ export function getDistributionPanel(hist: DG.Viewer<DG.IHistogramSettings>, sta
   const splitCol = hist.dataFrame.getCol(C.COLUMNS_NAMES.SPLIT_COL);
   const labels = [];
   const categories = splitCol.categories as SPLIT_CATEGORY[];
-  const rawData = splitCol.getRawData();
   for (let categoryIdx = 0; categoryIdx < categories.length; ++categoryIdx) {
-    if (!Object.values(SPLIT_CATEGORY).includes(categories[categoryIdx]))
+    if (!categories[categoryIdx])
       continue;
-
-
-    const color = DG.Color.toHtml(splitCol.meta.colors.getColor(rawData.indexOf(categoryIdx)));
+    const color = DG.Color.toHtml(DG.Color.categoricalPalette[categoryIdx % DG.Color.categoricalPalette.length]);
     const label = ui.label(labelMap[categories[categoryIdx]] ?? categories[categoryIdx], {style: {color}});
     labels.push(label);
   }
@@ -133,10 +131,8 @@ export function getDistributionPanel(hist: DG.Viewer<DG.IHistogramSettings>, sta
  * @param selection - Selection bitset.
  * @return - Dataframe with activity distribution.
  */
-export function getDistributionTable(activityCol: DG.Column<number>, selection: DG.BitSet): DG.DataFrame {
-  if (!activityCol.dataFrame)
-    DG.DataFrame.fromColumns([activityCol]); // to make sure that activityCol has a parent dataframe
-  const filter = activityCol.dataFrame!.filter;
+export function getDistributionTable(activityCol: DG.Column<number>, selection: DG.BitSet, dataFrame: DG.DataFrame): DG.DataFrame {
+  const filter = dataFrame.filter;
   const selectionAndFilter = selection.clone().and(filter);
   const rowCount = activityCol.length;
   const activityColData = activityCol.getRawData();
@@ -166,6 +162,44 @@ export function getDistributionTable(activityCol: DG.Column<number>, selection:
   return DG.DataFrame.fromColumns([DG.Column.fromFloat32Array(C.COLUMNS_NAMES.ACTIVITY, activityData), splitCol]);
 }
 
+/**
+ * Creates distribution table for mutation cliffs.
+ * @param activityCol
+ * @param mpCliffs
+ */
+export function getMutationCliffsDistributionTable(activityCol: DG.Column<number>, mpCliffs: Map<type.INDEX, type.INDEXES>, monomerName: string) {
+  // instead of stats.selection vs everything, here we want to show mutated vs non-mutated
+  if (!activityCol.dataFrame)
+    DG.DataFrame.fromColumns([activityCol]); // to make sure that activityCol has a parent dataframe
+  const tableFilter = activityCol.dataFrame!.filter;
+  const activityData = activityCol.getRawData();
+  const uniqueMPCliffsIndexes = Array.from(new Set(mpCliffs.keys())).map((k) => Number(k)).filter((i) => tableFilter.get(i));
+  const uniqueMutatedCliffsIndexesSet = new Set<number>();
+  for (const indexes of mpCliffs.values()) {
+    for (const index of indexes as number[])
+      uniqueMutatedCliffsIndexesSet.add(index);
+  }
+  const uniqueMutatedCliffsIndexes = Array.from(uniqueMutatedCliffsIndexesSet).filter((i) => tableFilter.get(i));
+  const totalRowCount = uniqueMPCliffsIndexes.length + uniqueMutatedCliffsIndexes.length;
+  const categories: string[] = new Array(totalRowCount);
+  const activityValues = new Float32Array(totalRowCount);
+  for (let i = 0; i < uniqueMPCliffsIndexes.length; ++i) {
+    const rowIndex = uniqueMPCliffsIndexes[i];
+    activityValues[i] = activityData[rowIndex];
+    categories[i] = monomerName;
+  }
+  for (let i = 0; i < uniqueMutatedCliffsIndexes.length; ++i) {
+    const rowIndex = uniqueMutatedCliffsIndexes[i];
+    activityValues[uniqueMPCliffsIndexes.length + i] = activityData[rowIndex];
+    categories[uniqueMPCliffsIndexes.length + i] = 'Mutated';
+  }
+  const splitCol = DG.Column.fromStrings(C.COLUMNS_NAMES.SPLIT_COL, categories);
+  const categoryOrder = [monomerName, 'Mutated'];
+  splitCol.setCategoryOrder(categoryOrder);
+  splitCol.meta.colors.setCategorical();
+  return DG.DataFrame.fromColumns([DG.Column.fromFloat32Array(C.COLUMNS_NAMES.ACTIVITY, activityValues), splitCol]);
+}
+
 /**
  * Adds expand in full screen icon to the grid.
  * @param grid - Grid to add expand icon to.

package/src/utils/tooltips.ts

@@ -6,7 +6,7 @@ import * as type from './types';
 import * as C from '../utils/constants';
 
 import {getActivityDistribution, getStatsTableMap} from '../widgets/distribution';
-import {getDistributionPanel, getDistributionTable} from './misc';
+import {getDistributionPanel, getDistributionTable, getMutationCliffsDistributionTable} from './misc';
 import {getAggregatedColumnValues, MonomerPositionStats} from './statistics';
 import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations';
 
@@ -14,7 +14,7 @@ export type TooltipOptions = {
   fromViewer?: boolean, isMutationCliffs?: boolean, x: number, y: number, monomerPosition: type.SelectionItem,
   mpStats: MonomerPositionStats, aggrColValues?: StringDictionary,
   isMostPotentResidues?: boolean, cliffStats?: type.MutationCliffStats['stats'],
-  postfixes?: StringDictionary, additionalStats?: StringDictionary
+  postfixes?: StringDictionary, additionalStats?: StringDictionary, cliffIndexes?: Map<type.INDEX, type.INDEXES>,
 };
 
 /**
@@ -52,7 +52,7 @@ export function showTooltipAt(df: DG.DataFrame, activityCol: DG.Column<number>,
   options.isMutationCliffs ??= false;
   options.isMostPotentResidues ??= false;
   options.additionalStats ??= {};
-  if (!options.cliffStats || !options.isMutationCliffs) {
+  if (!options.cliffStats || !options.isMutationCliffs || !options.cliffIndexes) { // monomer position stats
     const stats = options
       .mpStats[options.monomerPosition.positionOrClusterType]![options.monomerPosition.monomerOrCluster];
     if (!stats?.count)
@@ -61,7 +61,7 @@ export function showTooltipAt(df: DG.DataFrame, activityCol: DG.Column<number>,
 
     const mask = DG.BitSet.fromBytes(stats.mask.buffer.buffer as ArrayBuffer, activityCol.length);
     mask.and(df.filter);
-    const hist = getActivityDistribution(getDistributionTable(activityCol, mask), true);
+    const hist = getActivityDistribution(getDistributionTable(activityCol, mask, df), true);
     const tableMap = getStatsTableMap(stats);
     if (options.fromViewer) {
       tableMap['Mean difference'] = `${tableMap['Mean difference']}${options.isMostPotentResidues ? ' (size)' : ''}`;
@@ -79,7 +79,7 @@ export function showTooltipAt(df: DG.DataFrame, activityCol: DG.Column<number>,
     if (!options.fromViewer)
       setTimeout(() => hist.props.legendVisibility = 'Never', 100); // cause rerendering
     return distroStatsElem;
-  } else {
+  } else { // mutation cliffs
     const stats = options.cliffStats?.get(options.monomerPosition.monomerOrCluster)
       ?.get(options.monomerPosition.positionOrClusterType)
       ;
@@ -87,12 +87,16 @@ export function showTooltipAt(df: DG.DataFrame, activityCol: DG.Column<number>,
       return null;
     const mask = DG.BitSet.fromBytes(stats.mask.buffer.buffer as ArrayBuffer, activityCol.length);
     mask.and(df.filter);
-    const hist = getActivityDistribution(getDistributionTable(activityCol, mask), true);
-    const tableMap = getStatsTableMap(stats, {countName: 'Unique count'});
+    const hist = getActivityDistribution(
+      getMutationCliffsDistributionTable(activityCol, options.cliffIndexes, options.monomerPosition.monomerOrCluster),
+      true);
+    const countName = 'MP in cliffs count';
+    const tableMap = getStatsTableMap(stats, {countName: countName});
     if (options.fromViewer) {
       tableMap['Mean difference'] = `${tableMap['Mean difference']}${' (Color)'}`;
-      if (tableMap['Unique count'])
-        tableMap['Unique count'] = `${tableMap['Unique count']}${' (Size)'}`;
+      if (tableMap[countName])
+        tableMap[countName] = `${tableMap[countName]}${' (Size)'}`;
+      options.additionalStats!['Unique count'] = mask.trueCount.toString();
     }
     const aggregatedColMap = options.aggrColValues ?? getAggregatedColumnValues(df, columns, {mask: mask});
     const resultMap = {...options.additionalStats, ...tableMap, ...aggregatedColMap};

package/src/utils/types.ts

@@ -8,8 +8,8 @@ import {getGPUAdapterDescription} from '@datagrok-libraries/math/src/webGPU/getG
 export type RawData = Int32Array | Uint32Array | Float32Array | Float64Array;
 type MONOMER = string;
 type POSITION = string;
-type INDEX = number;
-type INDEXES = number[] | UTypedArray;
+export type INDEX = number;
+export type INDEXES = number[] | UTypedArray;
 export type UTypedArray = Uint8Array | Uint16Array | Uint32Array;
 //Monomer: (Position: (index: indexList))
 export type MutationCliffs = Map<MONOMER, Map<POSITION, Map<INDEX, INDEXES>>>;

package/src/viewers/logo-summary.ts

@@ -761,7 +761,9 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
         } else if (gridCell.tableColumn?.name === C.LST_COLUMN_NAMES.DISTRIBUTION) {
           let viewer = distCache.get(currentRowIdx);
           if (viewer === undefined) {
-            const distributionDf = getDistributionTable(activityCol, clusterBitSet);
+            if (!activityCol.dataFrame)
+              DG.DataFrame.fromColumns([activityCol]);
+            const distributionDf = getDistributionTable(activityCol, clusterBitSet, activityCol.dataFrame);
             viewer = distributionDf.plot.histogram({
               filteringEnabled: false,
               valueColumnName: activityCol.name,
@@ -1070,7 +1072,9 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
 
 
     const mask = DG.BitSet.fromBytes(bitArray.buffer.buffer as ArrayBuffer, rowCount);
-    const distributionTable = getDistributionTable(activityCol, mask);
+    if (!activityCol.dataFrame)
+      DG.DataFrame.fromColumns([activityCol]);
+    const distributionTable = getDistributionTable(activityCol, mask, activityCol.dataFrame);
     const hist = getActivityDistribution(distributionTable, true);
     const tableMap = getStatsTableMap(stats);
     const aggregatedColMap = getAggregatedColumnValues(this.dataFrame,

package/src/viewers/mutation-cliffs-viewer.ts

@@ -20,6 +20,7 @@ export class MutationCliffsViewer extends DG.JsViewer {
   public seriesColumnName: string;
   public activityColumnName: string;
   public position = 1;
+  public currentRowMutationsOnly: boolean = false;
   public yAxisType: 'Linear' | 'Logarithmic' = 'Linear';
   constructor() {
     super();
@@ -28,6 +29,7 @@ export class MutationCliffsViewer extends DG.JsViewer {
     this.activityColumnName = this.column('activity', {columnTypeFilter: 'numerical', nullable: false});
     this.position = this.int('position', 1, {nullable: false, showSlider: false, min: 1, max: 100, showPlusMinus: true, description: 'Position in the sequence to analyze (1 Based).', category: 'Data'});
     this.yAxisType = this.string('yAxisType', 'Linear', {choices: ['Linear', 'Logarithmic'], description: 'Y-Axis scale type.', nullable: false, category: 'Data'}) as 'Linear' | 'Logarithmic';
+    this.currentRowMutationsOnly = this.bool('currentRowMutationsOnly', false, {nullable: false, defaultValue: false, description: 'When enabled, the viewer will show mutations related to the peptide in current row in the dataframe and selected position.', category: 'Data'});
   }
 
   onTableAttached(): void {
@@ -105,8 +107,11 @@ export class MutationCliffsViewer extends DG.JsViewer {
     mutationCliffs.cliffs.forEach((positionMap) => {
       positionMap.forEach((mcData) => { // should be only one position
         Array.from(mcData.entries()).forEach(([from, toIndexes]) => {
-          uniqueIndexes.add(Number(from));
-          toIndexes.forEach((toIdx) => uniqueIndexes.add(Number(toIdx)));
+          const f = Number(from);
+          if (!this.currentRowMutationsOnly || this.dataFrame.currentRowIdx === f) {
+            uniqueIndexes.add(f);
+            toIndexes.forEach((toIdx) => uniqueIndexes.add(Number(toIdx)));
+          }
         });
       });
     });
@@ -160,14 +165,31 @@ export class MutationCliffsViewer extends DG.JsViewer {
       }),
     );
 
+    let currentRowFromLineChartFired = false;
+    // when clicking on point in line chart, set current row in main df
     this._dfSubs.push(
       df.onCurrentRowChanged.subscribe((_) => {
         if (df.currentRowIdx >= 0) {
+          currentRowFromLineChartFired = true;
           const originalIdx = indexesArray[df.currentRowIdx];
           this.dataFrame.currentRowIdx = originalIdx;
         }
       }),
     );
+    // if the viewer is set to follow current row, listen to it
+    if (this.currentRowMutationsOnly) {
+      this._dfSubs.push(
+        this.dataFrame.onCurrentRowChanged.subscribe((_) => {
+          if (currentRowFromLineChartFired) {
+            currentRowFromLineChartFired = false;
+            return;
+          }
+          // recalculate viewer df
+          this.clearCache(false);
+          this.debouncedRender();
+        }));
+    }
+
 
     let firedFromViewer = false;
     let firedFromTable = false;
@@ -272,7 +294,8 @@ export class MutationCliffsViewer extends DG.JsViewer {
   private async render() {
     $(this.root).empty();
     if (!this.dataFrame || !this.activityColumnName || !this.sequenceColumnName || !this.position) {
-      this.root.appendChild(ui.divText('Please set Activity column, Sequence column and Position properties.'));
+      ui.setUpdateIndicator(this.root, false);
+      this.root.appendChild(noDataDiv('Please set Activity column, Sequence column and Position properties.'));
       return;
     }
 
@@ -290,32 +313,40 @@ export class MutationCliffsViewer extends DG.JsViewer {
     this.root.style.flexDirection = 'column';
 
     const df = await this.innerDf;
-
-    this._lineChart = df.plot.line({
-      xColumnName: `Position ${this.position}`,
-      yColumnNames: [this.activityColumnName],
-      splitColumnNames: this.seriesColumnName ? [this.seriesColumnName] : [],
-      legendVisibility: this.seriesColumnName ? 'Always' : 'Never',
-      legendPosition: 'Right',
-      showXSelector: false,
-      showYSelector: true,
-      showSplitSelector: false,
-      xAxisLabelOrientation: 'Auto',
-      axisFont: 'normal normal 14px "Roboto"',
-      controlsFont: 'normal normal 14px "Roboto"',
-    } as Partial<DG.ILineChartSettings>) as DG.LineChartViewer;
-
-
-    this._lineChart.sub(this._lineChart.onPropertyValueChanged.subscribe((_e) => {
-      if (this._lineChart?.props?.yColumnNames && this._lineChart?.props?.yColumnNames?.[0] !== this.activityColumnName) {
-        const value = this._lineChart?.props?.yColumnNames?.[0];
-        setTimeout(() => this.getProperty('activityColumnName')!.set(this, value), 1);
-      }
-    }));
-
     ui.setUpdateIndicator(this.root, false);
-    this.root.appendChild(this._lineChart.root);
+    if (df.rowCount === 0) {
+      if (this.currentRowMutationsOnly) {
+        if (this.dataFrame.currentRowIdx >= 0)
+          this.root.appendChild(noDataDiv('No mutations cliffs found for the current peptide at the selected position.'));
+        else
+          this.root.appendChild(noDataDiv('Please select a row in the main table to see mutation cliffs for the corresponding peptide at the selected position.'));
+      } else
+        this.root.appendChild(noDataDiv('No mutation cliffs found for the selected position.'));
+    } else {
+      this._lineChart = df.plot.line({
+        xColumnName: `Position ${this.position}`,
+        yColumnNames: [this.activityColumnName],
+        splitColumnNames: this.seriesColumnName ? [this.seriesColumnName] : [],
+        legendVisibility: this.seriesColumnName ? 'Always' : 'Never',
+        legendPosition: 'Right',
+        showXSelector: false,
+        showYSelector: true,
+        showSplitSelector: false,
+        xAxisLabelOrientation: 'Auto',
+        axisFont: 'normal normal 14px "Roboto"',
+        controlsFont: 'normal normal 14px "Roboto"',
+      } as Partial<DG.ILineChartSettings>) as DG.LineChartViewer;
+
+
+      this._lineChart.sub(this._lineChart.onPropertyValueChanged.subscribe((_e) => {
+        if (this._lineChart?.props?.yColumnNames && this._lineChart?.props?.yColumnNames?.[0] !== this.activityColumnName) {
+          const value = this._lineChart?.props?.yColumnNames?.[0];
+          setTimeout(() => this.getProperty('activityColumnName')!.set(this, value), 1);
+        }
+      }));
 
+      this.root.appendChild(this._lineChart.root);
+    }
     const maxPosition = this.positionColumns.length + 1;
     const positions = new Array<number>(maxPosition - 1).fill(0).map((_, i) => i + 1).map((v) => v.toString());
     const positionInput = ui.input.choice('Position', {value: this.position.toString(), items: positions, nullable: false,
@@ -330,16 +361,18 @@ export class MutationCliffsViewer extends DG.JsViewer {
     positionInput.input.style.width = '40px';
     this.root.appendChild(ui.divH([positionInput.root], {style: {justifyContent: 'center', marginTop: '4px', width: '100%', font: 'normal normal 14px "Roboto"'}}));
 
-    const seriesColSelector = ui.input.column('Series', {table: this.dataFrame,
-      filter: (col: DG.Column) => {
-        return col.isCategorical && col.name !== this.sequenceColumnName;
-      }, tooltipText: 'Select column for series splitting.',
-      onValueChanged: (col: DG.Column | null) => {
-        const colName = col ? col.name : undefined;
+    if (df.rowCount > 0) {
+      const seriesColSelector = ui.input.column('Series', {table: this.dataFrame,
+        filter: (col: DG.Column) => {
+          return col.isCategorical && col.name !== this.sequenceColumnName;
+        }, tooltipText: 'Select column for series splitting.',
+        onValueChanged: (col: DG.Column | null) => {
+          const colName = col ? col.name : undefined;
         this.getProperty('seriesColumnName')!.set(this, colName);
-      }, value: this.seriesColumnName ? this.dataFrame.col(this.seriesColumnName)! : undefined,
-    });
-    this.root.prepend(ui.divH([seriesColSelector.root], {style: {justifyContent: 'flex-end', paddingBottom: '4px', padding: '8px', width: '100%', font: 'normal normal 14px "Roboto"'}}));
+        }, value: this.seriesColumnName ? this.dataFrame.col(this.seriesColumnName)! : undefined,
+      });
+      this.root.prepend(ui.divH([seriesColSelector.root], {style: {justifyContent: 'flex-end', paddingBottom: '4px', padding: '8px', width: '100%', font: 'normal normal 14px "Roboto"'}}));
+    }
   }
 
   private _debounceTimer: any = null;
@@ -350,8 +383,10 @@ export class MutationCliffsViewer extends DG.JsViewer {
     this._debounceTimer = setTimeout(() => this.render(), 300);
   }
 
-  private clearCache() {
-    this._mutationCliffsData = null;
+  private clearCache(clearMutationCliffsData: boolean = true) {
+    // while following current row, makes no sense to clear mutation cliffs data.
+    if (clearMutationCliffsData)
+      this._mutationCliffsData = null;
     this._innerDf = null;
     this._dfSubs.forEach((s) => s.unsubscribe());
     this._dfSubs = [];
@@ -368,11 +403,27 @@ export class MutationCliffsViewer extends DG.JsViewer {
   onPropertyChanged(property: DG.Property | null): void {
     super.onPropertyChanged(property);
     if (property?.name === 'activityColumnName' || property?.name === 'sequenceColumnName' || property?.name === 'position' || property?.name === 'seriesColumnName') {
-      this.clearCache();
+      const retainMutationCliffsData = property?.name === 'seriesColumnName' || property?.name === 'activityColumnName'; // these do not affect mutation cliffs calculation
+      this.clearCache(!retainMutationCliffsData);
+      if (property?.name === 'sequenceColumnName')
+        this._positionColumns = null;
+
       this.debouncedRender();
-    } if (property?.name === 'yAxisType') {
+    } else if (property?.name === 'yAxisType') {
       if (this._lineChart)
         this._lineChart.props.yAxisType = this.yAxisType.toLowerCase() as DG.AxisType;
+    } else if (property?.name === 'currentRowMutationsOnly') {
+      // when this changes, we only clear the dataframe cache to reflect current row changes
+      this.clearCache(false);
+      this.debouncedRender();
     }
   }
 }
+
+function noDataDiv(message: string): HTMLDivElement {
+  const noDataDiv = ui.divText(message);
+  noDataDiv.style.fontSize = '14px';
+  noDataDiv.style.marginTop = '10px';
+  noDataDiv.style.textAlign = 'center';
+  return noDataDiv;
+}

package/src/viewers/sar-viewer.ts

@@ -131,7 +131,7 @@ export abstract class SARViewer extends DG.JsViewer implements ISARViewer {
     }) as 'All' | 'Filtered';
 
     this.activityColumnName = this.column(SAR_PROPERTIES.ACTIVITY,
-      {category: PROPERTY_CATEGORIES.GENERAL, nullable: false});
+      {category: PROPERTY_CATEGORIES.GENERAL, nullable: false, columnTypeFilter: 'numerical'});
     this.activityScaling = this.string(SAR_PROPERTIES.ACTIVITY_SCALING, C.SCALING_METHODS.NONE,
       {category: PROPERTY_CATEGORIES.GENERAL, choices: Object.values(C.SCALING_METHODS), nullable: false},
     ) as C.SCALING_METHODS;
@@ -555,10 +555,11 @@ export abstract class SARViewer extends DG.JsViewer implements ISARViewer {
     if (isApplicableDataframe(this.dataFrame)) {
       this.getProperty(`${SAR_PROPERTIES.SEQUENCE}${COLUMN_NAME}`)
         ?.set(this, this.dataFrame.columns.bySemType(DG.SEMTYPE.MACROMOLECULE)!.name);
+      const potentialActivityColumn = wu(this.dataFrame.columns.numerical).find((col) => col.name.toLowerCase().includes('activity'))?.name;
       this.getProperty(`${SAR_PROPERTIES.ACTIVITY}${COLUMN_NAME}`)
-        ?.set(this, wu(this.dataFrame.columns.numerical).next().value.name);
+        ?.set(this, potentialActivityColumn ?? wu(this.dataFrame.columns.numerical).next().value.name);
       this.getProperty(`${SAR_PROPERTIES.VALUE_INVARIANT_MAP}${COLUMN_NAME}`)
-        ?.set(this, wu(this.dataFrame.columns.numerical).next().value.name);
+        ?.set(this, potentialActivityColumn ?? wu(this.dataFrame.columns.numerical).next().value.name);
       if (this.mutationCliffs === null && this.sequenceColumnName && this.activityColumnName)
         this.calculateMutationCliffs().then((mc) => {this.mutationCliffs = mc.cliffs; this.cliffStats = mc.cliffStats;});
       this.subs.push(grok.events.onContextMenu.subscribe((a: DG.EventData) => {
@@ -934,7 +935,7 @@ export class MonomerPosition extends SARViewer {
         if (this.valueColumnName && this.valueAggregation && this.valueAggregation !== DG.AGG.VALUE_COUNT && this.valueAggregation !== DG.AGG.TOTAL_COUNT)
           columnEntries.unshift([this.valueColumnName, this.valueAggregation as DG.AGG]);
       } else {
-        // in invariant map, show pairs count along with unique sequences count
+        // in mutation cliffs, show pairs count along with unique sequences count
         const pairs = this.mutationCliffs?.get(monomerPosition.monomerOrCluster)?.get(monomerPosition.positionOrClusterType);
         if (pairs) {
           let pairsCount = 0;
@@ -947,6 +948,7 @@ export class MonomerPosition extends SARViewer {
         fromViewer: true,
         isMutationCliffs: this.mode === SELECTION_MODE.MUTATION_CLIFFS, monomerPosition, x, y,
         mpStats: this.monomerPositionStats, cliffStats: this.cliffStats?.stats ?? undefined, postfixes, additionalStats,
+        cliffIndexes: this.mutationCliffs?.get(monomerPosition.monomerOrCluster)?.get(monomerPosition.positionOrClusterType),
       });
     });
     grid.root.addEventListener('mouseleave', (_ev) => this.model.unhighlight());

package/src/widgets/distribution.ts

@@ -144,7 +144,7 @@ export function getStatsTableMap(stats: StatsItem,
  */
 function getSingleDistribution(table: DG.DataFrame, stats: StatsItem, options: DistributionItemOptions,
   labelMap: DistributionLabelMap = {}): HTMLDivElement {
-  const hist = getActivityDistribution(getDistributionTable(options.activityCol, table.selection));
+  const hist = getActivityDistribution(getDistributionTable(options.activityCol, table.selection, table));
   const aggregatedColMap = getAggregatedColumnValues(table, Object.entries(options.columns),
     {filterDf: true, mask: DG.BitSet.fromBytes(stats.mask.buffer.buffer as ArrayBuffer, stats.mask.length)});
   const tableMap = getStatsTableMap(stats);

package/src/widgets/mutation-cliffs.ts

@@ -3,12 +3,14 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import * as C from '../utils/constants';
 import * as type from '../utils/types';
-import {addExpandIconGen, getSeparator, setGridProps} from '../utils/misc';
+import {addExpandIconGen, getDistributionPanel, getMutationCliffsDistributionTable, getSeparator, setGridProps} from '../utils/misc';
 import {renderCellSelection} from '../utils/cell-renderer';
 import {SeqTemps} from '@datagrok-libraries/bio/src/utils/macromolecule/seq-handler';
+import {getActivityDistribution, getStatsTableMap} from './distribution';
+import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations';
 
-export type MutationCliffsOptions = {
-  mutationCliffs: type.MutationCliffs, mutationCliffsSelection: type.Selection, sequenceColumnName: string,
+export type MutationCliffsWidgetOptions = {
+  mutationCliffs: type.MutationCliffs, mutationCliffStats: type.MutationCliffStats | null, mutationCliffsSelection: type.Selection, sequenceColumnName: string,
   positionColumns: DG.Column<string>[], gridColumns: DG.GridColumnList, activityCol: DG.Column<number>,
 };
 
@@ -21,7 +23,7 @@ export type MutationCliffsOptions = {
  * @return - mutation cliffs widget.
  */
 export function mutationCliffsWidget(
-  table: DG.DataFrame, options: MutationCliffsOptions, allowExpand = true,
+  table: DG.DataFrame, options: MutationCliffsWidgetOptions, allowExpand = true,
 ): DG.Widget {
   //addExpandIcon(pairsGrid);
   //addExpandIcon(uniqueSequencesGrid);
@@ -32,6 +34,37 @@ export function mutationCliffsWidget(
   const comboGrids = [pairsGrid, uniqueSequencesGrid];
   const widgetRoot = ui.divV([aminoToInput.root, ...comboGrids.map((grid) => grid.root)],
     {style: {width: '100%'}});
+  // add mutation cliffs distribution histogram
+  const isSingleMutationPosition = Object.values(options.mutationCliffsSelection).filter((monomers) => monomers.length > 0).length === 1;
+  if (isSingleMutationPosition) {
+    const position = Object.keys(options.mutationCliffsSelection).find((pos) => options.mutationCliffsSelection[pos].length > 0)!;
+    const monomers = options.mutationCliffsSelection[position];
+    if (monomers.length === 1) {
+      const monomerName = monomers[0];
+      const cliffs = options.mutationCliffs?.get(monomerName)?.get(position);
+      if (cliffs && cliffs.size > 0) {
+        const distributionTable = getMutationCliffsDistributionTable(options.activityCol, cliffs, monomerName);
+        const hist = getActivityDistribution(distributionTable, false);
+        // quick stats
+        const stats = options.mutationCliffStats?.stats?.get(monomerName)?.get(position);
+        const tableMap = {} as StringDictionary;
+        let pairsCount = 0;
+        for (const indexArray of cliffs.values())
+          pairsCount += indexArray.length;
+        tableMap['Pairs count'] = pairsCount.toString();
+        if (stats) {
+          tableMap['Unique Count'] = stats.mask.trueCount().toString();
+          Object.assign(tableMap, getStatsTableMap(stats, {countName: 'MP in cliffs count'}));
+        }
+        const distributionPanel = getDistributionPanel(hist, tableMap); // no need to show stats here
+        hist.root.style.maxHeight = '100px';
+        distributionPanel.style.marginTop = '10px';
+        widgetRoot.appendChild(distributionPanel);
+      }
+    }
+  }
+
+
   if (allowExpand) {
     addExpandIconGen('Mutation Cliffs pairs', aminoToInput.root, widgetRoot,
       () => {
@@ -74,7 +107,7 @@ export function mutationCliffsWidget(
 }
 
 
-function cliffsPairsWidgetParts(table: DG.DataFrame, options: MutationCliffsOptions):
+function cliffsPairsWidgetParts(table: DG.DataFrame, options: MutationCliffsWidgetOptions):
   {pairsGrid: DG.Grid, uniqueSequencesGrid: DG.Grid, aminoToInput: DG.InputBase<string>} | null {
   const filteredIndexes = table.filter.getSelectedIndexes();
   const positions = Object.keys(options.mutationCliffsSelection);