@datagrok/peptides 1.17.10 → 1.17.11

package/package.json

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

package/src/model.ts

@@ -1126,6 +1126,7 @@ export class PeptidesModel {
       activityColumnName: this.settings!.activityColumnName,
       sequenceColumnName: this.settings!.sequenceColumnName,
       minActivityDelta: 0,
+      activityTarget: C.ACTIVITY_TARGET.HIGH,
     };
     const monomerPosition = await this.df.plot
       .fromType(VIEWER_TYPE.MONOMER_POSITION, viewerProperties) as MonomerPosition;
@@ -1147,6 +1148,7 @@ export class PeptidesModel {
       sequenceColumnName: this.settings!.sequenceColumnName,
       minActivityDelta: 0,
       maxMutations: 1,
+      activityTarget: C.ACTIVITY_TARGET.HIGH,
     };
     const mostPotentResidues =
       await this.df.plot.fromType(VIEWER_TYPE.MOST_POTENT_RESIDUES, viewerProperties) as MostPotentResidues;

package/src/tests/benchmarks.ts

@@ -16,7 +16,7 @@ const benchmarkDatasetSizes = [5, 50, 100, 200];
 
 category('Benchmarks: Mutation Cliffs', () => {
   for (const size of benchmarkDatasetSizes)
-    test(`${size}k sequences`, async () => await mutationCliffsBenchmark(size), {timeout: 180000});
+    test(`${size}k sequences`, async () => await mutationCliffsBenchmark(size), {timeout: 300000});
 });
 
 category('Benchmarks: Cluster stats', () => {

package/src/utils/algorithms.ts

@@ -43,6 +43,44 @@ export async function findMutations(activityArray: type.RawData, monomerInfoArra
   return substitutionsInfo;
 }
 
+/**
+ * Calculates statistics for mutation cliffs, used for mutation cliffst table (coloring, tooltips, distribution...)
+ * @param cliffs - mutation cliffs data
+ * @param activityArray - array of activities
+ *
+ */
+export function calculateCliffsStatistics(
+  cliffs: type.MutationCliffs, activityArray: type.RawData,
+): type.MutationCliffStats {
+  const res: type.MutationCliffStats['stats'] = new Map();
+  let minDiff = 999999; let maxDiff = -999999; let minCount = 2; let maxCount = 2;
+  for (const monomer of cliffs.keys()) {
+    const monomerStatsMap: Map<string, StatsItem> = new Map();
+    res.set(monomer, monomerStatsMap);
+    // monomer substitutions map from mutations cliffs
+    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;
+      for (const index of subMap.keys()) {
+        mask.setFast(index, true);
+        const toIndexes = subMap.get(index)!;
+        toIndexes.forEach((i) => mask.setFast(i, true));
+      }
+      const stats = getStats(activityArray, mask);
+      minDiff = Math.min(minDiff, stats.meanDifference);
+      maxDiff = Math.max(maxDiff, stats.meanDifference);
+      minCount = Math.min(minCount, stats.count);
+      maxCount = Math.max(maxCount, stats.count);
+      monomerStatsMap.set(position, stats);
+    }
+  }
+  return {stats: res, minDiff, maxDiff, minCount, maxCount};
+}
+
+
 /**
  * Calculates statistics for each monomer position.
  * @param activityCol - Activity column.

package/src/utils/cell-renderer.ts

@@ -10,7 +10,7 @@ import * as rxjs from 'rxjs';
 import {showTooltipAt, TooltipOptions} from './tooltips';
 import {MonomerPositionStats, MonomerPositionStatsCache, PositionStats} from './statistics';
 import {CLUSTER_TYPE} from '../viewers/logo-summary';
-import {SARViewer} from '../viewers/sar-viewer';
+import {MonomerPosition, MostPotentResidues, SARViewer} from '../viewers/sar-viewer';
 
 /**
  * Renders cell selection border.
@@ -44,37 +44,61 @@ export function setMonomerRenderer(col: DG.Column, alphabet: string): void {
  */
 export function renderMutationCliffCell(canvasContext: CanvasRenderingContext2D, currentMonomer: string,
   currentPosition: string, viewer: SARViewer, bounds: DG.Rect): void {
-  const positionStats = viewer.monomerPositionStats[currentPosition];
-  const pVal = positionStats![currentMonomer]!.pValue;
-  const currentMeanDifference = positionStats![currentMonomer]!.meanDifference;
-
-  // Transform p-value to increase intensity for smaller values and decrease for larger values
-  const maxPValComplement = 1 - positionStats!.general.maxPValue;
-  const minPValComplement = 1 - positionStats!.general.minPValue;
-  const pValCentering = Math.min(maxPValComplement, minPValComplement);
-  const centeredMaxPValComplement = maxPValComplement - pValCentering;
-  const centeredMinPValComplement = minPValComplement - pValCentering;
-  const centeredPValLimit = Math.max(centeredMaxPValComplement, centeredMinPValComplement);
-  const pValComplement = pVal === null ? 0 : 1 - pVal - pValCentering;
-
-  const x = currentMeanDifference >= 0 ? pValComplement : -pValComplement;
-  const coef = DG.Color.toHtml(pVal === null ? DG.Color.lightLightGray :
-    DG.Color.scaleColor(x, -centeredPValLimit, centeredPValLimit, 255));
-
   const halfWidth = bounds.width / 2;
-  const maxMeanDifference = Math.max(Math.abs(viewer.monomerPositionStats.general.minMeanDifference),
-    viewer.monomerPositionStats.general.maxMeanDifference);
-  const rCoef = Math.abs(currentMeanDifference) / maxMeanDifference;
-  const maxRadius = 0.9 * halfWidth / 2; // Fill at most 90% of the half of the cell width
-  const radius = Math.floor(maxRadius * rCoef);
-
   const midX = Math.ceil(bounds.x + 1 + halfWidth);
   const midY = Math.ceil(bounds.y + 1 + bounds.height / 2);
-  canvasContext.beginPath();
-  canvasContext.fillStyle = coef;
-  canvasContext.arc(midX - halfWidth / 2, midY, radius < 3 || pVal === null ? 3 : radius, 0, Math.PI * 2, true);
-  canvasContext.closePath();
-  canvasContext.fill();
+  const maxRadius = 0.9 * halfWidth / 2; // Fill at most 90% of the half of the cell width
+  // render most potent residues cells according to the p-value (color) and mean difference (size)
+  if (viewer instanceof MostPotentResidues) {
+    const positionStats = viewer.monomerPositionStats[currentPosition];
+    const pVal = positionStats![currentMonomer]!.pValue;
+    const currentMeanDifference = positionStats![currentMonomer]!.meanDifference;
+
+    // Transform p-value to increase intensity for smaller values and decrease for larger values
+    const maxPValComplement = 1 - positionStats!.general.maxPValue;
+    const minPValComplement = 1 - positionStats!.general.minPValue;
+    const pValCentering = Math.min(maxPValComplement, minPValComplement);
+    const centeredMaxPValComplement = maxPValComplement - pValCentering;
+    const centeredMinPValComplement = minPValComplement - pValCentering;
+    const centeredPValLimit = Math.max(centeredMaxPValComplement, centeredMinPValComplement);
+    const pValComplement = pVal === null ? 0 : 1 - pVal - pValCentering;
+
+    const x = currentMeanDifference >= 0 ? pValComplement : -pValComplement;
+    const coef = DG.Color.toHtml(pVal === null ? DG.Color.lightLightGray :
+      DG.Color.scaleColor(x, -centeredPValLimit, centeredPValLimit, 255));
+
+
+    const maxMeanDifference = Math.max(Math.abs(viewer.monomerPositionStats.general.minMeanDifference),
+      viewer.monomerPositionStats.general.maxMeanDifference);
+    const rCoef = Math.abs(currentMeanDifference) / maxMeanDifference;
+
+    const radius = Math.floor(maxRadius * rCoef);
+
+
+    canvasContext.beginPath();
+    canvasContext.fillStyle = coef;
+    canvasContext.arc(midX - halfWidth / 2, midY, radius < 3 || pVal === null ? 3 : radius, 0, Math.PI * 2, true);
+    canvasContext.closePath();
+    canvasContext.fill();
+  } else if (viewer instanceof MonomerPosition && viewer.mutationCliffs && viewer.cliffStats) {
+    const maxCount = viewer.cliffStats.maxCount;
+    const minDiff = viewer.cliffStats.minDiff;
+    const maxDiff = viewer.cliffStats.maxDiff;
+    const stats = viewer.cliffStats?.stats?.get(currentMonomer)?.get(currentPosition);
+    if (stats) {
+      const count = stats.count;
+      const diff = stats.meanDifference;
+      const radius = Math.floor(Math.abs((count / Math.max(maxCount, 2))) * maxRadius);
+      const diffScalingFactor = Math.max(Math.abs(minDiff), Math.abs(maxDiff));
+      const colorCoef = DG.Color.toHtml(diff === null ? DG.Color.lightLightGray :
+        DG.Color.scaleColor(diff, -diffScalingFactor, diffScalingFactor, 255));
+      canvasContext.beginPath();
+      canvasContext.fillStyle = colorCoef;
+      canvasContext.arc(midX - halfWidth / 2, midY, radius < 3 || count == 0 ? 3 : radius, 0, Math.PI * 2, true);
+      canvasContext.closePath();
+      canvasContext.fill();
+    }
+  }
 
   canvasContext.textBaseline = 'middle';
   canvasContext.textAlign = 'end';
@@ -404,6 +428,8 @@ function requestWebLogoAction(ev: MouseEvent, monomerPosition: type.SelectionIte
 function findWebLogoMonomerPosition(cell: DG.GridCell, ev: MouseEvent, webLogoBounds: WebLogoBounds,
 ): type.SelectionItem | null {
   const barCoords = webLogoBounds[cell.tableColumn!.name];
+  if (!barCoords)
+    return null;
   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;

package/src/utils/constants.ts

@@ -62,6 +62,11 @@ export enum SCALING_METHODS {
   MINUS_LG = '-lg',
 }
 
+export enum ACTIVITY_TARGET {
+  HIGH = 'High',
+  LOW = 'Low',
+}
+
 export enum SUFFIXES {
   LST = 'lst-', // Logo Summary Table
   MP = 'mp-', // Monomer Position

package/src/utils/misc.ts

@@ -195,6 +195,66 @@ export function addExpandIcon(grid: DG.Grid): void {
   });
 }
 
+export function addExpandIconsToGridPair(grids: DG.Grid[], name: string, onCloseFunc?: Function): void {
+  //const host = ui.divV([], {style: {height: '100%'}});
+  grids.forEach((grid) => {
+    const fullscreenIcon = ui.iconFA('expand-alt', () => {
+      const fullscreenGrids = grids.map((g) => {
+        const out = g;
+        setGridProps(out, false);
+        return out;
+      });
+      //setGridProps(fullscreenGrid, false);
+      //fullscreenGrid.root.style.height = '100%';
+      const pairsFullscreenDialog = ui.dialog(name);
+      const host = ui.divV([], {style: {height: '100%'}});
+      pairsFullscreenDialog.add(host);
+      fullscreenGrids.forEach((g) => {
+        host.appendChild(ui.h1(g.dataFrame.name));
+        host.appendChild(g.root);
+      });
+      //pairsFullscreenDialog.add(fullscreenGrid.root);
+      pairsFullscreenDialog.showModal(true);
+      pairsFullscreenDialog.onClose.subscribe(() => {
+        onCloseFunc?.();
+      });
+      //fullscreenGrid.invalidate();
+      fullscreenGrids.forEach((g) => g.invalidate());
+    });
+    grid.root.appendChild(fullscreenIcon);
+    fullscreenIcon.style.position = 'absolute';
+    fullscreenIcon.style.right = '0px';
+    fullscreenIcon.style.top = '0px';
+    fullscreenIcon.style.visibility = 'hidden';
+    grid.root.addEventListener('mouseenter', (_) => {
+      fullscreenIcon.style.visibility = 'visible';
+    });
+    grid.root.addEventListener('mouseleave', (_) => {
+      fullscreenIcon.style.visibility = 'hidden';
+    });
+  });
+}
+
+export function addExpandIconGen(dialogName: string,
+  root: HTMLElement, mouseOverRoot: HTMLElement, onClickElementFunc: () => HTMLElement,
+): void {
+  const fullScreenIcon = ui.iconFA('expand-alt', () => {
+    const fullScreenElement = onClickElementFunc();
+    const fullScreenDialog = ui.dialog(dialogName);
+    fullScreenDialog.add(fullScreenElement);
+    fullScreenDialog.showModal(true);
+  }, 'Expand to full screen');
+  fullScreenIcon.style.marginLeft = 'auto';
+  fullScreenIcon.style.marginRight = '15px';
+  mouseOverRoot.addEventListener('mouseenter', () => {
+    fullScreenIcon.style.visibility = 'visible';
+  });
+  mouseOverRoot.addEventListener('mouseleave', () => {
+    fullScreenIcon.style.visibility = 'hidden';
+  });
+  root.appendChild(fullScreenIcon);
+}
+
 /**
  * Sets common properties for grid in property panel.
  * @param grid - Grid to set properties to.
@@ -319,8 +379,9 @@ export function getSelectionBitset(selection: type.Selection, stats: MasksInfo):
     const statsType = stats[positionOrClusterType];
     for (const monomerOrCluster of selected) {
       const statsItem = statsType[monomerOrCluster];
+      if (!statsItem) continue;
       combinedBitset ??= new BitArray(statsItem.mask.length, false);
-      combinedBitset!.or(statsType[monomerOrCluster].mask);
+      combinedBitset!.or(statsItem.mask);
     }
   }
 

package/src/utils/tooltips.ts

@@ -14,6 +14,7 @@ import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations'
 export type TooltipOptions = {
   fromViewer?: boolean, isMutationCliffs?: boolean, x: number, y: number, monomerPosition: type.SelectionItem,
   mpStats: MonomerPositionStats, aggrColValues?: StringDictionary,
+  isMostPotentResidues?: boolean, cliffStats?: type.MutationCliffStats['stats']
 };
 
 /**
@@ -55,6 +56,7 @@ export function showTooltip(df: DG.DataFrame, activityCol: DG.Column<number>, co
   options: TooltipOptions): boolean {
   options.fromViewer ??= false;
   options.isMutationCliffs ??= false;
+  options.isMostPotentResidues ??= false;
   if (options.monomerPosition.positionOrClusterType === C.COLUMNS_NAMES.MONOMER)
     showMonomerTooltip(options.monomerPosition.monomerOrCluster, options.x, options.y);
   else
@@ -77,23 +79,45 @@ export function showTooltipAt(df: DG.DataFrame, activityCol: DG.Column<number>,
   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;
+  options.isMostPotentResidues ??= false;
+  if (!options.cliffStats || !options.isMutationCliffs) {
+    const stats = options
+      .mpStats[options.monomerPosition.positionOrClusterType]![options.monomerPosition.monomerOrCluster];
+    if (!stats?.count)
+      return null;
 
 
-  const mask = DG.BitSet.fromBytes(stats.mask.buffer.buffer, activityCol.length);
-  const hist = getActivityDistribution(getDistributionTable(activityCol, mask), 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 mask = DG.BitSet.fromBytes(stats.mask.buffer.buffer, activityCol.length);
+    const hist = getActivityDistribution(getDistributionTable(activityCol, mask), true);
+    const tableMap = getStatsTableMap(stats);
+    if (options.fromViewer) {
+      tableMap['Mean difference'] = `${tableMap['Mean difference']}${options.isMostPotentResidues ? ' (size)' : ''}`;
+      if (tableMap['p-value'])
+        tableMap['p-value'] = `${tableMap['p-value']}${options.isMostPotentResidues ? ' (color)' : ''}`;
+    }
+    const aggregatedColMap = options.aggrColValues ?? getAggregatedColumnValues(df, columns, {mask: mask});
+    const resultMap = {...tableMap, ...aggregatedColMap};
+    const distroStatsElem = getDistributionPanel(hist, resultMap);
+    ui.tooltip.show(distroStatsElem, options.x, options.y);
+    return distroStatsElem;
+  } else {
+    const stats = options.cliffStats?.get(options.monomerPosition.monomerOrCluster)
+      ?.get(options.monomerPosition.positionOrClusterType)
+      ;
+    if (!stats)
+      return null;
+    const mask = DG.BitSet.fromBytes(stats.mask.buffer.buffer, activityCol.length);
+    const hist = getActivityDistribution(getDistributionTable(activityCol, mask), true);
+    const tableMap = getStatsTableMap(stats);
+    if (options.fromViewer) {
+      tableMap['Mean difference'] = `${tableMap['Mean difference']}${' (Color)'}`;
+      if (tableMap['Count'])
+        tableMap['Count'] = `${tableMap['Count']}${' (Size)'}`;
+    }
+    const aggregatedColMap = options.aggrColValues ?? getAggregatedColumnValues(df, columns, {mask: mask});
+    const resultMap = {...tableMap, ...aggregatedColMap};
+    const distroStatsElem = getDistributionPanel(hist, resultMap);
+    ui.tooltip.show(distroStatsElem, options.x, options.y);
+    return distroStatsElem;
   }
-  const aggregatedColMap = options.aggrColValues ?? getAggregatedColumnValues(df, columns, {mask: mask});
-  const resultMap = {...tableMap, ...aggregatedColMap};
-  const distroStatsElem = getDistributionPanel(hist, resultMap);
-  ui.tooltip.show(distroStatsElem, options.x, options.y);
-  return distroStatsElem;
 }

package/src/utils/types.ts

@@ -1,13 +1,22 @@
 import * as DG from 'datagrok-api/dg';
 import {ClusterType} from '../viewers/logo-summary';
 import {SCALING_METHODS} from './constants';
-import {AggregationColumns} from './statistics';
+import {AggregationColumns, StatsItem} from './statistics';
 import {MmDistanceFunctionsNames} from '@datagrok-libraries/ml/src/macromolecule-distance-functions';
 
 export type RawData = Int32Array | Uint32Array | Float32Array | Float64Array;
+type MONOMER = string;
+type POSITION = string;
+type INDEX = number;
+type INDEXES = number[] | UTypedArray;
 export type UTypedArray = Uint8Array | Uint16Array | Uint32Array;
 //Monomer: (Position: (index: indexList))
-export type MutationCliffs = Map<string, Map<string, Map<number, number[] | UTypedArray>>>;
+export type MutationCliffs = Map<MONOMER, Map<POSITION, Map<INDEX, INDEXES>>>;
+//Monomer: (Position: (Stats))
+export type MutationCliffStats = {
+  stats: Map<MONOMER, Map<POSITION, StatsItem>>;
+  minDiff: number; maxDiff: number; maxCount: number; minCount: number;
+};
 export type Selection = { [positionOrClusterType: string | ClusterType]: string[] };
 export type SelectionItem = { positionOrClusterType: string | ClusterType, monomerOrCluster: string };
 export type SelectionStats = { [positionOrClusterType: string | ClusterType]: { [monomerOrCluster: string]: number } };