@datagrok/peptides 1.26.2 → 1.27.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/peptides",
   "friendlyName": "Peptides",
-  "version": "1.26.2",
+  "version": "1.27.1",
   "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/styles.css

@@ -60,3 +60,14 @@
   left: 5px;
   top: 1px;
 }
+
+.panel-base:has(.peptides-viewer-show-title:only-child) > .panel-titlebar > .panel-titlebar-text {
+    visibility: visible;
+    display: block;
+    text-align: center;
+    margin-left: 36px;
+    padding: 0;
+    width: 100%;
+    font-size: 14px !important;
+    color: #4d5261 !important;
+}

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.
@@ -466,3 +500,13 @@ export function debounce<T extends Array<any>, K>(f: (...args: T) => Promise<K>,
 export function isInDemo(): boolean {
   return 'isInDemo' in grok.shell && !!grok.shell.isInDemo;
 }
+
+export function dartLike<T extends any>(obj: T) {
+  return {
+    set: function<K extends keyof T>(key: K, value: T[K]) {
+      (obj as any)[key] = value;
+      return this;
+    },
+  };
+}
+

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

@@ -76,7 +76,6 @@ export interface ILogoSummaryTable {
 
 /** LogoSummaryTable viewer shows per cluster information. */
 export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
-  _titleHost = ui.divText(VIEWER_TYPE.LOGO_SUMMARY_TABLE, {id: 'pep-viewer-title'});
   sequenceColumnName: string;
   clustersColumnName: string;
   webLogoMode: string;
@@ -98,6 +97,7 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
   /** Creates LogoSummaryTable properties. */
   constructor() {
     super();
+    this.root.classList.add('peptides-viewer-show-title');
 
     this.sequenceColumnName = this.column(LST_PROPERTIES.SEQUENCE,
       {
@@ -365,7 +365,7 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
     if (!this.logoSummaryTable.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]));
+      this.root.appendChild(ui.divV([emptyDf]));
       return;
     }
     const expand = ui.iconFA('expand-alt', () => {
@@ -380,7 +380,7 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
     this.viewerGrid.root.style.height = 'auto';
     this.viewerGrid.root.style.overflow = 'hidden';
     this.root.appendChild(ui.divV([
-      ui.divH([this._titleHost, expand], {
+      ui.divH([expand], {
         style: {
           alignSelf: 'center',
           lineHeight: 'normal',
@@ -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

@@ -30,6 +30,7 @@ export class MutationCliffsViewer extends DG.JsViewer {
     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'});
+    this.root.classList.add('peptides-viewer-show-title');
   }
 
   onTableAttached(): void {
@@ -320,8 +321,7 @@ export class MutationCliffsViewer extends DG.JsViewer {
           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
+      } else
         this.root.appendChild(noDataDiv('No mutation cliffs found for the selected position.'));
     } else {
       this._lineChart = df.plot.line({
@@ -427,4 +427,4 @@ function noDataDiv(message: string): HTMLDivElement {
   noDataDiv.style.marginTop = '10px';
   noDataDiv.style.textAlign = 'center';
   return noDataDiv;
-}
+}

package/src/viewers/sar-viewer.ts

@@ -23,6 +23,7 @@ import {
 import {showTooltip} from '../utils/tooltips';
 import {calculateCliffsStatistics, calculateMonomerPositionStatistics, findMutations, MutationCliffsOptions} from '../utils/algorithms';
 import {
+  dartLike,
   debounce,
   extractColInfo,
   getTotalAggColumns,
@@ -41,7 +42,6 @@ import {getMonomerLibHelper} from '@datagrok-libraries/bio/src/types/monomer-lib
 import {PolymerTypes} from '@datagrok-libraries/bio/src/helm/consts';
 import {PeptideUtils} from '../peptideUtils';
 import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations';
-import BitArray from '@datagrok-libraries/utils/src/bit-array';
 
 export enum SELECTION_MODE {
   MUTATION_CLIFFS = 'Mutation Cliffs',
@@ -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;
@@ -177,6 +177,7 @@ export abstract class SARViewer extends DG.JsViewer implements ISARViewer {
     // this.targetCategoryInput.root.style.display = 'none';
     // this.targetCategoryInput.root.style.maxWidth = '50%';
     // this.targetCategoryInput.root.style.marginLeft = '8px'
+    this.root.classList.add('peptides-viewer-show-title');
   }
 
   _viewerGrid: DG.Grid | null = null;
@@ -555,10 +556,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) => {
@@ -677,7 +679,7 @@ export class MonomerPosition extends SARViewer {
     this.customColorRange = this.bool(MONOMER_POSITION_PROPERTIES.CUSTOM_COLOR_RANGE, false, {category: PROPERTY_CATEGORIES.INVARIANT_MAP});
     this.minColorValue = this.float(MONOMER_POSITION_PROPERTIES.MIN_COLOR_VALUE, 0, {category: PROPERTY_CATEGORIES.INVARIANT_MAP});
     this.maxColorValue = this.float(MONOMER_POSITION_PROPERTIES.MAX_COLOR_VALUE, 0, {category: PROPERTY_CATEGORIES.INVARIANT_MAP});
-    this.showFilterControls = this.bool(MONOMER_POSITION_PROPERTIES.SHOW_FILTER_CONTROLS, true, {category: PROPERTY_CATEGORIES.GENERAL, description: 'Show monomer search and target controls'});
+    this.showFilterControls = this.bool(MONOMER_POSITION_PROPERTIES.SHOW_FILTER_CONTROLS, true, {category: PROPERTY_CATEGORIES.GENERAL, description: 'Show monomer search and target controls', userEditable: false}); // Old stuff. Not used anymore
     this.monomerSearchInput = ui.input.string('Search', {
       value: '', nullable: true, placeholder: 'Search monomer', tooltipText: 'Search for monomer by symbol. For multiple monomers use comma as a separator.',
       onValueChanged: () => {
@@ -831,7 +833,7 @@ export class MonomerPosition extends SARViewer {
       let maxColorVal = -9999999;
       const filter = (this.dataSource === 'Filtered' && this.dataFrame.filter.anyFalse) ?
         this.dataFrame.filter : null;
-      const isTarget = filter == null ? (index: number) => true : (index: number) => filter.get(index);
+      const isTarget = filter == null ? (_index: number) => true : (index: number) => filter.get(index);
       for (const pCol of this.positionColumns) {
         pCol.temp[C.TAGS.INVARIANT_MAP_COLOR_CACHE] = {};
         const colorCache = pCol.temp[C.TAGS.INVARIANT_MAP_COLOR_CACHE];
@@ -934,7 +936,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 +949,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());
@@ -1102,6 +1105,8 @@ export class MonomerPosition extends SARViewer {
     };
   }
 
+  private _showSearchInput = false;
+
   /** Renders the MonomerPosition viewer body. */
   render(): void {
     $(this.root).empty();
@@ -1148,20 +1153,20 @@ export class MonomerPosition extends SARViewer {
     }
     const viewerRoot = this.viewerGrid.root;
     viewerRoot.style.width = 'auto';
-    // expand button
-    const expand = ui.iconFA('expand-alt', () => {
-      const dialog = ui.dialog();
-      dialog.add(ui.divV([switchHost, viewerRoot], {style: {height: '100%'}}));
-      dialog.onCancel(() => this.render());
-      dialog.showModal(true);
-      this.viewerGrid.invalidate();
-    }, 'Show Sequence Variability Map Table in full screen');
-    $(expand).addClass('pep-help-icon');
-    this.monomerSearchInput.root.style.marginRight = '8px';
-    const targetInputsHost = ui.divH([this.monomerSearchInput.input],
+    // search icon
+    const searchIcon = ui.icons.search(() => {
+      this._showSearchInput = !this._showSearchInput;
+      this.monomerSearchInput.input.style.display = this._showSearchInput ? 'block' : 'none';
+    }, 'Toggle monomer search input visibility');
+
+    this.monomerSearchInput.input.style.display = this._showSearchInput ? 'block' : 'none';
+    $(searchIcon).addClass('pep-help-icon');
+    dartLike(searchIcon.style).set('top', '3px').set('fontSize', '14px');
+
+    const filtersHost = ui.divH([this.monomerSearchInput.input], // plural because might expand in future
       {style: {alignSelf: 'center', justifyContent: 'center', width: '100%', flexWrap: 'wrap'}});
-    targetInputsHost.style.display = this.showFilterControls ? 'flex' : 'none';
-    const header = ui.divH([expand, switchHost, targetInputsHost], {style: {alignSelf: 'center', lineHeight: 'normal', flexDirection: 'column', width: '100%'}});
+    // targetInputsHost.style.display = this.showFilterControls ? 'flex' : 'none';
+    const header = ui.divH([searchIcon, switchHost, filtersHost], {style: {alignSelf: 'center', lineHeight: 'normal', flexDirection: 'column', width: '100%'}});
     this.root.appendChild(ui.divV([header, viewerRoot]));
     this.viewerGrid?.invalidate();
     this.monomerSearchInput.fireChanged();
@@ -1468,11 +1473,11 @@ export class MostPotentResidues extends SARViewer {
       this.root.appendChild(ui.divText('Please, select a sequence and activity columns in the viewer properties'));
       return;
     }
-    const switchHost = ui.divText(VIEWER_TYPE.MOST_POTENT_RESIDUES, {id: 'pep-viewer-title'});
+
     const viewerRoot = this.viewerGrid.root;
     viewerRoot.style.width = 'auto';
-    const header = ui.divH([switchHost], {style: {alignSelf: 'center', lineHeight: 'normal'}});
-    this.root.appendChild(ui.divV([header, viewerRoot]));
+
+    this.root.appendChild(ui.divV([viewerRoot]));
     this.viewerGrid?.invalidate();
   }
 }

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);