@datagrok/peptides 1.17.14 → 1.17.16

package/package.json

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

package/src/model.ts

@@ -60,7 +60,7 @@ export enum VIEWER_TYPE {
   MOST_POTENT_RESIDUES = 'Most Potent Residues',
   LOGO_SUMMARY_TABLE = 'Logo Summary Table',
   DENDROGRAM = 'Dendrogram',
-  CLUSTER_MAX_ACTIVITY = 'Cluster Max Activity',
+  CLUSTER_MAX_ACTIVITY = 'Active peptide selection',
 }
 
 export type CachedWebLogoTooltip = { bar: string, tooltip: HTMLDivElement | null };
@@ -1132,6 +1132,9 @@ export class PeptidesModel {
       activityColumnName: this.settings!.activityColumnName,
       clusterColumnName: potentialClusterCol ?? wu(this.df.columns.categorical).next().value?.name,
       activityTarget: C.ACTIVITY_TARGET.HIGH,
+      connectivityColumnName: this._mclCols.find((colName) => colName.toLowerCase().startsWith('connectivity')),
+      clusterSizeThreshold: 20,
+      activityThreshold: 1000,
     };
     const _clusterMaxActivity = await this.df.plot
       .fromType(VIEWER_TYPE.CLUSTER_MAX_ACTIVITY, viewerProperties) as ClusterMaxActivityViewer;

package/src/package.ts

@@ -130,7 +130,7 @@ export function logoSummaryTable(): LogoSummaryTable {
   return new LogoSummaryTable();
 }
 
-//name: Cluster Max Activity
+//name: Active peptide selection
 //tags: viewer
 //output: viewer result
 export function clusterMaxActivity(): ClusterMaxActivityViewer {

package/src/viewers/cluster-max-activity-viewer.ts

@@ -5,33 +5,51 @@ import {Options} from '@datagrok-libraries/utils/src/type-declarations';
 import {ACTIVITY_TARGET, COLUMN_NAME, COLUMNS_NAMES} from '../utils/constants';
 import wu from 'wu';
 import $ from 'cash-dom';
+import * as rxjs from 'rxjs';
+import {filter} from 'rxjs/operators';
 export const enum ClusterMaxActivityProps {
     CLUSTER_COLUMN = 'cluster',
     ACTIVITY_COLUMN = 'activity',
+    CONNECTIVITY_COLUMN = 'connectivity',
     COLOR_COLUMN = 'color',
+    CLUSTER_SIZE_THRESHOLD = 'clusterSizeThreshold',
+    ACTIVITY_THRESHOLD = 'activityThreshold',
 }
 
 export interface IClusterMaxActivity {
     clusterColumnName: string;
     activityColumnName: string;
+    connectivityColumnName?: string;
     colorColumnName?: string;
     activityTarget: ACTIVITY_TARGET;
+    clusterSizeThreshold: number;
+    activityThreshold: number;
 }
 
 
 export class ClusterMaxActivityViewer extends DG.JsViewer implements IClusterMaxActivity {
-  _titleHost = ui.divText(VIEWER_TYPE.CLUSTER_MAX_ACTIVITY, {id: 'pep-viewer-title'});
+  _titleHost = ui.divText(VIEWER_TYPE.CLUSTER_MAX_ACTIVITY, {id: 'pep-viewer-title', style: {marginRight: 'auto'}});
+  _selsectIcon: HTMLElement = ui.div();
   clusterColumnName: string;
   activityColumnName: string;
   colorColumnName: string;
+  connectivityColumnName?: string | undefined;
   activityTarget: ACTIVITY_TARGET = ACTIVITY_TARGET.HIGH;
   _scViewer?: DG.ScatterPlotViewer | null;
   viewerError: string = '';
   renderTimeout: NodeJS.Timeout | number | null = null;
   renderDebounceTime = 500;
+  clusterSizeThreshold: number;
+  activityThreshold: number;
   static clusterSizeColName = '~cluster.size' as const;
-  static maxActivityInClusterSizeColName = '~max.activity.for.cluster.size' as const;
-  private scFilterQuery = `\$\{${ClusterMaxActivityViewer.maxActivityInClusterSizeColName}\} == 1` as const;
+  static maxActivityInClusterColName = '~max.activity.for.cluster' as const;
+  static maxConnectivityInClusterColName = '~max.connectivity.for.cluster' as const;
+  static synSelectionColName = 'Syn Selection' as const;
+  static maxActivityLabel = 'Max Activity' as const;
+  static maxConnectivityLabel = 'Max Connectivity' as const;
+  private scFilterQuery = `\$\{${ClusterMaxActivityViewer.maxActivityInClusterColName}\} == 1` as const;
+  private selectionSubscription: rxjs.Subscription | null = null;
+  private linesDrawSubscription: rxjs.Subscription | null = null;
   get scViewer(): DG.ScatterPlotViewer | null {
     if (!this._scViewer)
       this._scViewer = this.createSCViewer();
@@ -46,6 +64,9 @@ export class ClusterMaxActivityViewer extends DG.JsViewer implements IClusterMax
     this.activityTarget = this.string(
       'activityTarget', ACTIVITY_TARGET.HIGH, {choices: [ACTIVITY_TARGET.HIGH, ACTIVITY_TARGET.LOW]},
     ) as ACTIVITY_TARGET;
+    this.clusterSizeThreshold = this.int(ClusterMaxActivityProps.CLUSTER_SIZE_THRESHOLD, 20);
+    this.activityThreshold = this.int(ClusterMaxActivityProps.ACTIVITY_THRESHOLD, 1000);
+    this.connectivityColumnName = this.column(ClusterMaxActivityProps.CONNECTIVITY_COLUMN, {nullable: true});
   }
 
   /**
@@ -80,6 +101,8 @@ export class ClusterMaxActivityViewer extends DG.JsViewer implements IClusterMax
     }
     const activityCol = this.dataFrame.columns.byName(this.activityColumnName);
     const clusterCol = this.dataFrame.columns.byName(this.clusterColumnName);
+    const connectivityCol = this.connectivityColumnName != null ?
+      this.dataFrame.columns.byName(this.connectivityColumnName) : null;
     const numericColTypes: DG.ColumnType[] =
         [DG.COLUMN_TYPE.FLOAT, DG.COLUMN_TYPE.INT, DG.COLUMN_TYPE.BIG_INT, DG.COLUMN_TYPE.QNUM];
     if (!numericColTypes.includes(activityCol.type)) {
@@ -95,55 +118,155 @@ export class ClusterMaxActivityViewer extends DG.JsViewer implements IClusterMax
         continue;
       clusterSizeMap[cluster] = (clusterSizeMap[cluster] ?? 0) + 1;
     }
-    // for (let i = 0; i < this.dataFrame.rowCount; i++) {
-    //   const cluster: string | number = clusterCol.get(i);
-    //   if (clusterCol.isNone(i) || !clusterSizeMap[cluster])
-    //     continue;
-    //   clusterSizeCol.set(i, clusterSizeMap[cluster]);
-    // }
-    // clusterSizeCol.init((i) => {
-    //   const cluster: string | number = clusterCol.get(i);
-    //   if (clusterCol.isNone(i) || !clusterSizeMap[cluster])
-    //     return null;
-    //   return clusterSizeMap[cluster];
-    // });
+
     clusterSizeCol.init((i) => clusterCol.isNone(i) ? null : clusterSizeMap[clusterCol.get(i)] ?? null);
 
     if (activityCol.stats.min <= 0)
       scatterPlotProps.yAxisType = 'linear';
 
     // create a new column to store max activity for each cluster size
-    const maxActivityIndexPerClusterSizeMap: {[key: number]: number} = {};
-
+    const maxActivityIndexPerClusterMap: {[key: number]: number} = {};
+    const maxConnectivityIndexPerClusterMap: {[key: number]: number} = {};
     for (let i = 0; i < this.dataFrame.rowCount; i++) {
-      const clusterSize: number | null = clusterSizeCol.get(i);
-      if (clusterSize == null || clusterSizeCol.isNone(i) || activityCol.isNone(i))
+      const cluster: number | null = clusterCol.get(i);
+      if (cluster == null || clusterCol.isNone(i) || activityCol.isNone(i))
         continue;
       const activity: number = activityCol.get(i);
-      const prevMaxActivityIndex = maxActivityIndexPerClusterSizeMap[clusterSize];
+      const prevMaxActivityIndex = maxActivityIndexPerClusterMap[cluster];
       if (prevMaxActivityIndex == null || prevMaxActivityIndex == undefined)
-        maxActivityIndexPerClusterSizeMap[clusterSize] = i;
+        maxActivityIndexPerClusterMap[cluster] = i;
       else {
         if (activity > activityCol.get(prevMaxActivityIndex) && this.activityTarget === ACTIVITY_TARGET.HIGH)
-          maxActivityIndexPerClusterSizeMap[clusterSize] = i;
+          maxActivityIndexPerClusterMap[cluster] = i;
         else if (activity < activityCol.get(prevMaxActivityIndex) && this.activityTarget === ACTIVITY_TARGET.LOW)
-          maxActivityIndexPerClusterSizeMap[clusterSize] = i;
+          maxActivityIndexPerClusterMap[cluster] = i;
+      }
+      if (connectivityCol) {
+        const connectivity: number = connectivityCol.get(i);
+        const prevMaxConnectivityIndex = maxConnectivityIndexPerClusterMap[cluster];
+        if (prevMaxConnectivityIndex == null || prevMaxConnectivityIndex == undefined)
+          maxConnectivityIndexPerClusterMap[cluster] = i;
+        else {
+          if (connectivity > connectivityCol.get(prevMaxConnectivityIndex))
+            maxConnectivityIndexPerClusterMap[cluster] = i;
+        }
       }
     }
 
     const maxAtivityInClusterSizeCol = this.dataFrame.columns.getOrCreate(
-      ClusterMaxActivityViewer.maxActivityInClusterSizeColName, DG.COLUMN_TYPE.INT, this.dataFrame.rowCount);
+      ClusterMaxActivityViewer.maxActivityInClusterColName, DG.COLUMN_TYPE.INT, this.dataFrame.rowCount);
     maxAtivityInClusterSizeCol.init((i) => {
-      if (clusterSizeCol.isNone(i))
+      if (clusterCol.isNone(i))
+        return 0;
+      return i === maxActivityIndexPerClusterMap[clusterCol.get(i)] ? 1 : 0;
+    });
+
+    const maxConnectivityInClusterSizeCol = this.dataFrame.columns.getOrCreate(
+      ClusterMaxActivityViewer.maxConnectivityInClusterColName, DG.COLUMN_TYPE.INT, this.dataFrame.rowCount);
+    maxConnectivityInClusterSizeCol.init((i) => {
+      if (clusterCol.isNone(i))
         return 0;
-      return i === maxActivityIndexPerClusterSizeMap[clusterSizeCol.get(i)] ? 1 : 0;
+      return i === maxConnectivityIndexPerClusterMap[clusterCol.get(i)] ? 1 : 0;
     });
+
+    const synSelectionCol = this.dataFrame.columns.getOrCreate(
+      ClusterMaxActivityViewer.synSelectionColName, DG.TYPE.STRING, this.dataFrame.rowCount);
+
+    synSelectionCol.init((i) => {
+      if (clusterCol.isNone(i))
+        return null;
+      if (i === maxActivityIndexPerClusterMap[clusterCol.get(i)])
+        return ClusterMaxActivityViewer.maxActivityLabel;
+      if (connectivityCol && i === maxConnectivityIndexPerClusterMap[clusterCol.get(i)])
+        return ClusterMaxActivityViewer.maxConnectivityLabel;
+      return null;
+    });
+
     scatterPlotProps.xColumnName = ClusterMaxActivityViewer.clusterSizeColName;
     scatterPlotProps.yColumnName = this.activityColumnName;
     scatterPlotProps.filter = this.scFilterQuery;
     this.viewerError = '';
     const sc = DG.Viewer.scatterPlot(this.dataFrame, scatterPlotProps);
 
+    if (this.selectionSubscription)
+      this.selectionSubscription.unsubscribe();
+    this.selectionSubscription = sc.onDataEvent.pipe(filter((e) => e.type == 'd4-select')).subscribe((e) => {
+      const indexes = e.bitset?.getSelectedIndexes() ?? [];
+      const currentSelection = this.dataFrame.selection;
+      const filterBitset = DG.BitSet.create(this.dataFrame.rowCount, (i) => maxAtivityInClusterSizeCol.get(i) == 1);
+      filterBitset.and(currentSelection);
+      for (let i = 0; i < indexes.length; i++) {
+        const index = indexes[i];
+        const cluster = clusterCol.get(index);
+        if (clusterCol.isNone(index))
+          continue;
+        filterBitset.set(index, true);
+        if (maxConnectivityIndexPerClusterMap[cluster] != null)
+          filterBitset.set(maxConnectivityIndexPerClusterMap[cluster], true);
+      }
+      filterBitset.fireChanged();
+      const filteredIndexes = filterBitset.getSelectedIndexes();
+      for (const i of filteredIndexes) {
+        const cluster = clusterCol.get(i);
+        if (cluster == null)
+          continue;
+        if (maxConnectivityIndexPerClusterMap[cluster] != null)
+          filterBitset.set(maxConnectivityIndexPerClusterMap[cluster], true);
+      }
+      setTimeout(() => {
+        this.dataFrame.selection.copyFrom(filterBitset, true);
+        setTimeout(() => {
+          if (this.model)
+            this.model.createAccordion();
+        }, 200);
+      }, 200);
+    });
+
+    const selectTopQuadrants = (): void => {
+      const selectionBitset = DG.BitSet.create(this.dataFrame.rowCount);
+      Object.entries(maxActivityIndexPerClusterMap).forEach(([cluster, index]) => {
+        if (cluster == null || index == null)
+          return;
+        const clusterInt = parseInt(cluster);
+        const activity = activityCol.get(index);
+        const clusterSize = clusterSizeMap[clusterInt] ?? clusterSizeMap[cluster];
+        if (activity < this.activityThreshold && clusterSize < this.clusterSizeThreshold)
+          return;
+        selectionBitset.set(index, true, false);
+        if (maxConnectivityIndexPerClusterMap[clusterInt] != null)
+          selectionBitset.set(maxConnectivityIndexPerClusterMap[clusterInt], true, false);
+      });
+      selectionBitset.fireChanged();
+      this.dataFrame.selection.copyFrom(selectionBitset, true);
+    };
+
+    this._selsectIcon = ui.iconSvg('select-all', () => {
+      selectTopQuadrants();
+    }, 'Select 3 Active quadrants');
+    this._selsectIcon.style.cursor = 'pointer';
+    this._selsectIcon.style.marginRight = '5px';
+    selectTopQuadrants();
+    if (this.linesDrawSubscription)
+      this.linesDrawSubscription.unsubscribe();
+    this.linesDrawSubscription = sc.onBeforeDrawScene.subscribe(() => {
+      const canvas = sc.getInfo().canvas;
+      const ctx: CanvasRenderingContext2D = canvas.getContext('2d');
+      const viewPort = sc.viewport;
+      const startPointHor = sc.worldToScreen(viewPort.x, this.activityThreshold);
+      const startPointVer = sc.worldToScreen(this.clusterSizeThreshold, viewPort.y);
+      const endPointHor = sc.worldToScreen(viewPort.x + viewPort.width, this.activityThreshold);
+      const endPointVer = sc.worldToScreen(this.clusterSizeThreshold, viewPort.y + viewPort.height);
+      ctx.beginPath();
+      ctx.strokeStyle = 'rgb(0,0,0)';
+      ctx.lineWidth = 1;
+      ctx.moveTo(startPointHor.x, startPointHor.y);
+      ctx.lineTo(endPointHor.x, endPointHor.y);
+      ctx.moveTo(startPointVer.x, startPointVer.y);
+      ctx.lineTo(endPointVer.x, endPointVer.y);
+      ctx.stroke();
+      ctx.closePath();
+    });
+
     return sc;
   }
 
@@ -158,12 +281,13 @@ export class ClusterMaxActivityViewer extends DG.JsViewer implements IClusterMax
     if (clusterCol != null)
       this.getProperty(`${ClusterMaxActivityProps.CLUSTER_COLUMN}${COLUMN_NAME}`)?.set(this, clusterCol.name);
 
+    const connectivityCol: DG.Column | null = wu(this.dataFrame?.columns.numerical).next()?.value;
+    if (connectivityCol != null)
+      this.getProperty(`${ClusterMaxActivityProps.CONNECTIVITY_COLUMN}${COLUMN_NAME}`)?.set(this, connectivityCol.name);
+
     this.render();
 
     this.dataFrame.onDataChanged.subscribe(() => {
-    //   this._scViewer = null;
-    //   this.render();
-
       this.render();
     });
   }
@@ -193,14 +317,16 @@ export class ClusterMaxActivityViewer extends DG.JsViewer implements IClusterMax
           marginLeft: '5px',
         }});
       scViewer.props.colorColumnName = this.colorColumnName ?? null;
+
       this.root.appendChild(
         ui.divH([
           maxActivityLabel,
           ui.divV([
-            ui.divH([this._titleHost], {
+            ui.divH([this._titleHost, this._selsectIcon], {
               style: {
                 alignSelf: 'center',
                 lineHeight: 'normal',
+                width: '100%',
               },
             }),
             scViewer.root,

package/webpack.config.js

@@ -2,6 +2,9 @@ const path = require('path');
 const packageName = path.parse(require('./package.json').name).name.toLowerCase().replace(/-/g, '');
 
 module.exports = {
+  cache: {
+    type: 'filesystem',
+  },
   mode: 'development',
   entry: {
     package: ['./src/package.ts'],