@datagrok/peptides 1.17.12 → 1.17.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datagrok/peptides",
   "friendlyName": "Peptides",
-  "version": "1.17.12",
+  "version": "1.17.14",
   "author": {
     "name": "Davit Rizhinashvili",
     "email": "drizhinashvili@datagrok.ai"
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@datagrok-libraries/bio": "^5.40.0",
-    "@datagrok-libraries/ml": "^6.4.12",
+    "@datagrok-libraries/ml": "^6.4.13",
     "@datagrok-libraries/statistics": "^1.2.12",
     "@datagrok-libraries/utils": "^4.1.45",
     "@datagrok-libraries/tutorials": "^1.3.12",

package/src/model.ts

@@ -53,12 +53,14 @@ import {splitAlignedSequences} from '@datagrok-libraries/bio/src/utils/splitter'
 import {getDbscanWorker} from '@datagrok-libraries/math';
 import {markovCluster} from '@datagrok-libraries/ml/src/MCL/clustering-view';
 import {DistanceAggregationMethods} from '@datagrok-libraries/ml/src/distance-matrix/types';
+import {ClusterMaxActivityViewer, IClusterMaxActivity} from './viewers/cluster-max-activity-viewer';
 
 export enum VIEWER_TYPE {
   MONOMER_POSITION = 'Monomer-Position',
   MOST_POTENT_RESIDUES = 'Most Potent Residues',
   LOGO_SUMMARY_TABLE = 'Logo Summary Table',
   DENDROGRAM = 'Dendrogram',
+  CLUSTER_MAX_ACTIVITY = 'Cluster Max Activity',
 }
 
 export type CachedWebLogoTooltip = { bar: string, tooltip: HTMLDivElement | null };
@@ -190,6 +192,9 @@ export class PeptidesModel {
       case 'showDendrogram':
         updateVars.add('dendrogram');
         break;
+      case 'showClusterMaxActivity':
+        updateVars.add('clusterMaxActivity');
+        break;
       case 'showSequenceSpace':
         updateVars.add('showSequenceSpace');
         break;
@@ -250,6 +255,10 @@ export class PeptidesModel {
       case 'dendrogram':
         this.settings!.showDendrogram ? this.addDendrogram() : this.closeViewer(VIEWER_TYPE.DENDROGRAM);
         break;
+      case 'clusterMaxActivity':
+        this.settings!.showClusterMaxActivity ? this.addClusterMaxActivityViewer() :
+          this.closeViewer(VIEWER_TYPE.CLUSTER_MAX_ACTIVITY);
+        break;
       case 'logoSummaryTable':
         this.settings!.showLogoSummaryTable ? this.addLogoSummaryTable() :
           this.closeViewer(VIEWER_TYPE.LOGO_SUMMARY_TABLE);
@@ -1115,6 +1124,22 @@ export class PeptidesModel {
     logoSummaryTable.viewerGrid.invalidate();
   }
 
+  async addClusterMaxActivityViewer(viewerProperties?: IClusterMaxActivity): Promise<void> {
+    const potentialClusterCol = this._mclCols?.find((colName) => colName.toLowerCase().startsWith('cluster (mcl)')) ??
+      (this.findViewer(VIEWER_TYPE.LOGO_SUMMARY_TABLE) as LogoSummaryTable | null)?.clustersColumnName ??
+      this._sequenceSpaceCols?.find((colName) => colName.toLowerCase().startsWith('cluster'));
+    viewerProperties ??= {
+      activityColumnName: this.settings!.activityColumnName,
+      clusterColumnName: potentialClusterCol ?? wu(this.df.columns.categorical).next().value?.name,
+      activityTarget: C.ACTIVITY_TARGET.HIGH,
+    };
+    const _clusterMaxActivity = await this.df.plot
+      .fromType(VIEWER_TYPE.CLUSTER_MAX_ACTIVITY, viewerProperties) as ClusterMaxActivityViewer;
+    const lstNode = this.findViewerNode(VIEWER_TYPE.LOGO_SUMMARY_TABLE) ?? null;
+    this.analysisView.dockManager.dock(_clusterMaxActivity, lstNode ? DG.DOCK_TYPE.DOWN: DG.DOCK_TYPE.RIGHT,
+      lstNode, VIEWER_TYPE.CLUSTER_MAX_ACTIVITY);
+  }
+
   /**
    * Adds Monomer-Position viewer to the analysis view
    * @param {ISARViewer} [viewerProperties] - Viewer properties
@@ -1231,13 +1256,13 @@ export class PeptidesModel {
     const seqCol = this.df.getCol(this.settings!.sequenceColumnName!);
     this.settings!.mclSettings ??= new type.MCLSettings();
     const mclParams = this.settings?.mclSettings;
-
     let counter = 0;
-    const addedColCount = 4;
+    const addedColCount = 5; // embedx, embedy, cluster, cluster size and connectivity count
     const columnAddedSub = this.df.onColumnsAdded.subscribe((colArgs: DG.ColumnsArgs) => {
       for (const col of colArgs.columns) {
-        if (col.name.toLowerCase().startsWith('embed') ||
-        col.name.toLowerCase().startsWith('cluster')) {
+        if ((col.name.toLowerCase().startsWith('embed') ||
+        col.name.toLowerCase().startsWith('cluster') ||
+        col.name.toLowerCase().startsWith('connectivity')) && col.name.toLowerCase().includes('mcl')) {
           const gridCol = this.analysisView.grid.col(col.name);
           if (gridCol == null || this._mclCols.includes(col.name))
             continue;
@@ -1276,7 +1301,7 @@ export class PeptidesModel {
       }], mclParams!.threshold, mclParams!.maxIterations,
     );
     mclAdditionSub.unsubscribe();
-    this._mclViewer = mclViewer ?? null;
+    this._mclViewer = mclViewer?.sc ?? null;
   }
 
   /**

package/src/package.ts

@@ -13,6 +13,7 @@ import {MonomerWorks} from '@datagrok-libraries/bio/src/monomer-works/monomer-wo
 import {PeptidesModel} from './model';
 import {macromoleculeSarFastaDemoUI} from './demo/fasta';
 import {u2} from '@datagrok-libraries/utils/src/u2';
+import {ClusterMaxActivityViewer} from './viewers/cluster-max-activity-viewer';
 
 let monomerWorks: MonomerWorks | null = null;
 let treeHelper: ITreeHelper;
@@ -129,6 +130,13 @@ export function logoSummaryTable(): LogoSummaryTable {
   return new LogoSummaryTable();
 }
 
+//name: Cluster Max Activity
+//tags: viewer
+//output: viewer result
+export function clusterMaxActivity(): ClusterMaxActivityViewer {
+  return new ClusterMaxActivityViewer();
+}
+
 //name: Manual Alignment
 //tags: panel, widgets
 //input: string _monomer {semType: Monomer}

package/src/utils/types.ts

@@ -29,6 +29,7 @@ export interface PeptidesSettings {
   showMostPotentResidues?: boolean,
   showLogoSummaryTable?: boolean,
   showDendrogram?: boolean,
+  showClusterMaxActivity?: boolean,
   showSequenceSpace?: boolean,
   columns?: AggregationColumns,
   sequenceSpaceParams: SequenceSpaceParams,

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

@@ -0,0 +1,228 @@
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+import {PeptidesModel, VIEWER_TYPE} from '../model';
+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';
+export const enum ClusterMaxActivityProps {
+    CLUSTER_COLUMN = 'cluster',
+    ACTIVITY_COLUMN = 'activity',
+    COLOR_COLUMN = 'color',
+}
+
+export interface IClusterMaxActivity {
+    clusterColumnName: string;
+    activityColumnName: string;
+    colorColumnName?: string;
+    activityTarget: ACTIVITY_TARGET;
+}
+
+
+export class ClusterMaxActivityViewer extends DG.JsViewer implements IClusterMaxActivity {
+  _titleHost = ui.divText(VIEWER_TYPE.CLUSTER_MAX_ACTIVITY, {id: 'pep-viewer-title'});
+  clusterColumnName: string;
+  activityColumnName: string;
+  colorColumnName: string;
+  activityTarget: ACTIVITY_TARGET = ACTIVITY_TARGET.HIGH;
+  _scViewer?: DG.ScatterPlotViewer | null;
+  viewerError: string = '';
+  renderTimeout: NodeJS.Timeout | number | null = null;
+  renderDebounceTime = 500;
+  static clusterSizeColName = '~cluster.size' as const;
+  static maxActivityInClusterSizeColName = '~max.activity.for.cluster.size' as const;
+  private scFilterQuery = `\$\{${ClusterMaxActivityViewer.maxActivityInClusterSizeColName}\} == 1` as const;
+  get scViewer(): DG.ScatterPlotViewer | null {
+    if (!this._scViewer)
+      this._scViewer = this.createSCViewer();
+    return this._scViewer;
+  }
+  constructor() {
+    super();
+    this.clusterColumnName = this.column(ClusterMaxActivityProps.CLUSTER_COLUMN, {nullable: false});
+    this.activityColumnName = this.column(ClusterMaxActivityProps.ACTIVITY_COLUMN, {nullable: false});
+    this.colorColumnName = this.column(ClusterMaxActivityProps.COLOR_COLUMN,
+      {nullable: true, defaultValue: null});
+    this.activityTarget = this.string(
+      'activityTarget', ACTIVITY_TARGET.HIGH, {choices: [ACTIVITY_TARGET.HIGH, ACTIVITY_TARGET.LOW]},
+    ) as ACTIVITY_TARGET;
+  }
+
+  /**
+   * Returns PeptidesModel instance that belongs to the attached dataframe.
+   * @return - PeptidesModel instance.
+   */
+  get model(): PeptidesModel {
+    return PeptidesModel.getInstance(this.dataFrame);
+  }
+
+  private createSCViewer(): DG.ScatterPlotViewer | null {
+    const scatterPlotProps: Partial<DG.IScatterPlotLookSettings> & Options = {
+      showXAxis: true,
+      showYAxis: true,
+      showXSelector: false,
+      showYSelector: false,
+      showColorSelector: false,
+      xAxisType: 'logarithmic',
+      yAxisType: 'logarithmic',
+      invertYAxis: this.activityTarget === ACTIVITY_TARGET.LOW,
+      xColumnName: ClusterMaxActivityViewer.clusterSizeColName,
+      markerType: 'circle',
+      markerDefaultSize: 10,
+      showSizeSelector: false,
+    };
+    if (this.clusterColumnName == null || this.activityColumnName == null ||
+         !this.dataFrame.columns.contains(this.clusterColumnName) ||
+         !this.dataFrame.columns.contains(this.activityColumnName)
+    ) {
+      this.viewerError = 'Please set valid cluster and activity columns';
+      return null;
+    }
+    const activityCol = this.dataFrame.columns.byName(this.activityColumnName);
+    const clusterCol = this.dataFrame.columns.byName(this.clusterColumnName);
+    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)) {
+      this.viewerError = 'Activity column should be numeric';
+      return null;
+    }
+    const clusterSizeCol = this.dataFrame.columns.getOrCreate(ClusterMaxActivityViewer.clusterSizeColName,
+      DG.TYPE.INT, this.dataFrame.rowCount);
+    const clusterSizeMap: {[key: number | string]: number} = {};
+    for (let i = 0; i < this.dataFrame.rowCount; i++) {
+      const cluster: string | number = clusterCol.get(i);
+      if (cluster == null)
+        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} = {};
+
+    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))
+        continue;
+      const activity: number = activityCol.get(i);
+      const prevMaxActivityIndex = maxActivityIndexPerClusterSizeMap[clusterSize];
+      if (prevMaxActivityIndex == null || prevMaxActivityIndex == undefined)
+        maxActivityIndexPerClusterSizeMap[clusterSize] = i;
+      else {
+        if (activity > activityCol.get(prevMaxActivityIndex) && this.activityTarget === ACTIVITY_TARGET.HIGH)
+          maxActivityIndexPerClusterSizeMap[clusterSize] = i;
+        else if (activity < activityCol.get(prevMaxActivityIndex) && this.activityTarget === ACTIVITY_TARGET.LOW)
+          maxActivityIndexPerClusterSizeMap[clusterSize] = i;
+      }
+    }
+
+    const maxAtivityInClusterSizeCol = this.dataFrame.columns.getOrCreate(
+      ClusterMaxActivityViewer.maxActivityInClusterSizeColName, DG.COLUMN_TYPE.INT, this.dataFrame.rowCount);
+    maxAtivityInClusterSizeCol.init((i) => {
+      if (clusterSizeCol.isNone(i))
+        return 0;
+      return i === maxActivityIndexPerClusterSizeMap[clusterSizeCol.get(i)] ? 1 : 0;
+    });
+    scatterPlotProps.xColumnName = ClusterMaxActivityViewer.clusterSizeColName;
+    scatterPlotProps.yColumnName = this.activityColumnName;
+    scatterPlotProps.filter = this.scFilterQuery;
+    this.viewerError = '';
+    const sc = DG.Viewer.scatterPlot(this.dataFrame, scatterPlotProps);
+
+    return sc;
+  }
+
+  onTableAttached(): void {
+    super.onTableAttached();
+    const activityCol: DG.Column | null = this.dataFrame?.col(COLUMNS_NAMES.ACTIVITY) ??
+        wu(this.dataFrame?.columns.numerical).next()?.value;
+    if (activityCol != null)
+      this.getProperty(`${ClusterMaxActivityProps.ACTIVITY_COLUMN}${COLUMN_NAME}`)?.set(this, activityCol.name);
+
+    const clusterCol: DG.Column | null = wu(this.dataFrame?.columns.categorical).next()?.value;
+    if (clusterCol != null)
+      this.getProperty(`${ClusterMaxActivityProps.CLUSTER_COLUMN}${COLUMN_NAME}`)?.set(this, clusterCol.name);
+
+    this.render();
+
+    this.dataFrame.onDataChanged.subscribe(() => {
+    //   this._scViewer = null;
+    //   this.render();
+
+      this.render();
+    });
+  }
+
+  render(): void {
+    if (this.renderTimeout)
+      clearTimeout(this.renderTimeout);
+    this.renderTimeout = setTimeout(() => {
+      $(this.root).empty();
+      const scViewer = this.scViewer;
+      if (scViewer == null) {
+        this.root.appendChild(ui.divText(this.viewerError ?? 'Error creating scatter plot'));
+        return;
+      }
+      const clusterSizeLabel = ui.div('Cluster Size', {style: {
+        alignSelf: 'center',
+        color: 'var(--grey-6)',
+        marginBottom: '5px'},
+      });
+      const maxActivityLabel = ui.div(
+        this.activityTarget === ACTIVITY_TARGET.HIGH ? 'Maximum Activity' : 'Minimum Activity', {style: {
+          color: 'var(--grey-6)',
+          alignSelf: 'center',
+          textOrientation: 'mixed',
+          writingMode: 'tb',
+          transform: 'rotate(180deg)',
+          marginLeft: '5px',
+        }});
+      scViewer.props.colorColumnName = this.colorColumnName ?? null;
+      this.root.appendChild(
+        ui.divH([
+          maxActivityLabel,
+          ui.divV([
+            ui.divH([this._titleHost], {
+              style: {
+                alignSelf: 'center',
+                lineHeight: 'normal',
+              },
+            }),
+            scViewer.root,
+            clusterSizeLabel,
+          ], {style: {flexGrow: '1'},
+          }),
+        ]),
+      );
+      scViewer.root.style.width = '100%';
+      //this.root.appendChild(scViewer.root);
+      setTimeout(() => {
+        scViewer.props.filter = this.scFilterQuery;
+        scViewer.invalidateCanvas();
+      }, 100);
+    }, this.renderDebounceTime);
+  }
+
+  onPropertyChanged(property: DG.Property | null): void {
+    super.onPropertyChanged(property);
+    if (property?.name !== `${ClusterMaxActivityProps.COLOR_COLUMN}${COLUMN_NAME}`)
+      this._scViewer = null;
+    this.render();
+  }
+}
+

package/src/viewers/logo-summary.ts

@@ -580,7 +580,7 @@ export class LogoSummaryTable extends DG.JsViewer implements ILogoSummaryTable {
     grid.onCellRender.subscribe(async (gridCellArgs) => {
       const gridCell = gridCellArgs.cell;
       const currentRowIdx = gridCell.tableRowIndex;
-      if (!gridCell.isTableCell || currentRowIdx === null || currentRowIdx === -1)
+      if (!gridCell.isTableCell || currentRowIdx == null || currentRowIdx === -1)
         return;
 
 

package/src/widgets/settings.ts

@@ -113,6 +113,9 @@ export function getSettingsDialog(model: PeptidesModel): SettingsElements {
   const isDendrogramEnabled = wu(model.analysisView.viewers).some((v) => v.type === VIEWER_TYPE.DENDROGRAM);
   const dendrogram = ui.boolInput(VIEWER_TYPE.DENDROGRAM, isDendrogramEnabled ?? false,
     () => result.showDendrogram = dendrogram.value) as DG.InputBase<boolean>;
+  const clusterMaxActivity = ui.boolInput(VIEWER_TYPE.CLUSTER_MAX_ACTIVITY, !!settings?.showClusterMaxActivity, () => {
+    result.showClusterMaxActivity = clusterMaxActivity.value ?? undefined;
+  });
   const showSeqSpace = ui.boolInput('Sequence space', !!settings?.showSequenceSpace, () => {
     result.showSequenceSpace = showSeqSpace.value ?? undefined;
     if (showSeqSpace.value) {
@@ -126,11 +129,12 @@ export function getSettingsDialog(model: PeptidesModel): SettingsElements {
     if (result.showSequenceSpace === settings?.showSequenceSpace)
       delete result.showSequenceSpace;
   });
+  clusterMaxActivity.setTooltip('Show cluster max activity viewer');
   dendrogram.setTooltip('Show dendrogram viewer');
   dendrogram.enabled = getTreeHelperInstance() !== null;
 
-  accordion.addPane(SETTINGS_PANES.VIEWERS, () => ui.inputs([dendrogram, showSeqSpace]), true);
-  inputs[SETTINGS_PANES.VIEWERS] = [dendrogram];
+  accordion.addPane(SETTINGS_PANES.VIEWERS, () => ui.inputs([dendrogram, showSeqSpace, clusterMaxActivity]), true);
+  inputs[SETTINGS_PANES.VIEWERS] = [dendrogram, showSeqSpace, clusterMaxActivity];
 
   // Columns to include pane options
   const inputsRows: HTMLElement[] = [];