@datagrok/peptides 1.4.0 → 1.5.1

package/src/utils/types.ts

@@ -2,6 +2,7 @@ import * as DG from 'datagrok-api/dg';
 
 export type DataFrameDict = {[key: string]: DG.DataFrame};
 
+export type RawData = Int32Array | Uint32Array | Float32Array | Float64Array;
 export type UTypedArray = Uint8Array | Uint16Array | Uint32Array;
 //AAR: (Position: (index: indexList))
 export type SubstitutionsInfo = Map<string, Map<string, Map<number, number[] | UTypedArray>>>;
@@ -11,6 +12,9 @@ export type MonomerSelectionStats = {[position: string]: {[monomer: string]: num
 
 export type ScalingMethods = 'none' | 'lg' | '-lg';
 export type PeptidesSettings = {
+  sequenceColumnName?: string,
+  activityColumnName?: string,
+  clustersColumnName?: string,
   scaling?: ScalingMethods,
   isBidirectional?: boolean,
   maxMutations?: number,
@@ -34,3 +38,5 @@ export type StatsInfo = {
   countCol: DG.Column<number>,
   orderedIndexes: Int32Array,
 }
+
+export type RawColumn = {name: string, rawData: RawData, cat?: string[]};

package/src/viewers/logo-summary.ts

@@ -6,6 +6,7 @@ import {PeptidesModel} from '../model';
 import * as C from '../utils/constants';
 import * as CR from '../utils/cell-renderer';
 import * as bio from '@datagrok-libraries/bio';
+import { Stats } from '../utils/statistics';
 
 export class LogoSummary extends DG.JsViewer {
   _titleHost = ui.divText('Logo Summary Table', {id: 'pep-viewer-title'});
@@ -13,29 +14,25 @@ export class LogoSummary extends DG.JsViewer {
   viewerGrid!: DG.Grid;
   initialized: boolean = false;
   webLogoMode: string;
-  importanceThreshold: number;
+  membersRatioThreshold: number;
 
   constructor() {
     super();
 
-    this.webLogoMode = this.string('webLogoMode', bio.PositionHeight.full, {choices: [bio.PositionHeight.full, bio.PositionHeight.Entropy]});
-    this.importanceThreshold = this.float('importanceThreshold', 0.7);
+    this.webLogoMode = this.string('webLogoMode', bio.PositionHeight.full,
+      {choices: [bio.PositionHeight.full, bio.PositionHeight.Entropy]});
+    this.membersRatioThreshold = this.float('membersRatioThreshold', 0.7, {min: 0.01, max: 1.0});
   }
 
-  async onTableAttached(): Promise<void> {
+  onTableAttached(): void {
     super.onTableAttached();
 
-    this.model = await PeptidesModel.getInstance(this.dataFrame);
+    this.model = PeptidesModel.getInstance(this.dataFrame);
     this.subs.push(this.model.onSettingsChanged.subscribe(() => {
       this.createLogoSummaryGrid();
       this.render();
     }));
-    // this.subs.push(this.model.onLogoSummaryGridChanged.subscribe((grid) => {
-    //   this.viewerGrid = grid;
-    //   this.render();
-    // }));
-    // this.model.updateDefault();
-    // this.viewerGrid = this.model.logoSummaryGrid;
+
     this.createLogoSummaryGrid();
     this.initialized = true;
     this.render();
@@ -52,33 +49,52 @@ export class LogoSummary extends DG.JsViewer {
     }
   }
 
-  onPropertyChanged(): void {
-    this.createLogoSummaryGrid();
+  onPropertyChanged(property: DG.Property): void {
+    super.onPropertyChanged(property);
+    if (property.name == 'membersRatioThreshold')
+      this.updateFilter();
     this.render();
   }
 
   createLogoSummaryGrid(): DG.Grid {
-    let summaryTableBuilder = this.dataFrame.groupBy([C.COLUMNS_NAMES.CLUSTERS]);
+    const clustersColName = this.model.settings.clustersColumnName!;
+    let summaryTableBuilder = this.dataFrame.groupBy([clustersColName]);
     for (const [colName, aggregationFunc] of Object.entries(this.model.settings.columns ?? {}))
       summaryTableBuilder = summaryTableBuilder.add(aggregationFunc as any, colName, `${aggregationFunc}(${colName})`);
 
     const summaryTable = summaryTableBuilder.aggregate();
-    const summaryTableLength = summaryTable.rowCount;
-    const clustersCol: DG.Column<number> = summaryTable.getCol(C.COLUMNS_NAMES.CLUSTERS);
-    const membersCol: DG.Column<number> = summaryTable.columns.addNewInt('Members');
-    const webLogoCol: DG.Column<string> = summaryTable.columns.addNew('WebLogo', DG.COLUMN_TYPE.STRING);
-    const tempDfList: DG.DataFrame[] = new Array(summaryTableLength);
-    const originalClustersCol = this.dataFrame.getCol(C.COLUMNS_NAMES.CLUSTERS);
-    const peptideCol: DG.Column<string> = this.dataFrame.getCol(C.COLUMNS_NAMES.MACROMOLECULE);
+    const summaryTableCols = summaryTable.columns;
+    const webLogoCol: DG.Column<string> = summaryTableCols.addNewString('WebLogo');
+    // const webLogoColData = webLogoCol.getRawData();
+    const clustersCol: DG.Column<string> = summaryTable.getCol(clustersColName);
+    const clustersColData = clustersCol.getRawData();
+    const clustersColCategories = clustersCol.categories;
+    const summaryTableLength = clustersColData.length;
+    const membersColData = summaryTableCols.addNewInt(C.COLUMNS_NAMES.MEMBERS).getRawData();
+    const tempWebLogoDfPlotList: DG.DataFramePlotHelper[] = new Array(summaryTableLength);
+    const tempDistributionDfPlotList: DG.DataFramePlotHelper[] = new Array(summaryTableLength);
+    const originalClustersCol = this.dataFrame.getCol(clustersColName);
+    const originalClustersColData = originalClustersCol.getRawData();
+    const originalClustersColCategories = originalClustersCol.categories;
+    const originalClustersColLength = originalClustersColData.length;
+    const peptideCol: DG.Column<string> = this.dataFrame.getCol(this.model.settings.sequenceColumnName!);
+    const peptideColData = peptideCol.getRawData();
+    const peptideColCategories = peptideCol.categories;
+    const meanDifferenceColData = summaryTableCols.addNewFloat('Mean difference').getRawData();
+    const pValColData = summaryTableCols.addNewFloat('P-Value').getRawData();
+    const ratioColData = summaryTableCols.addNewFloat('Ratio').getRawData();
+    const distributionCol = summaryTableCols.addNewString('Distribution');
+    // const distributionColData = distributionCol.getRawData();
 
     for (let index = 0; index < summaryTableLength; ++index) {
       const indexes: number[] = [];
-      for (let j = 0; j < originalClustersCol.length; ++j) {
-        if (originalClustersCol.get(j) === clustersCol.get(index))
+      const currentCluster = clustersColCategories[clustersColData[index]];
+      for (let j = 0; j < originalClustersColLength; ++j) {
+        if (originalClustersColCategories[originalClustersColData[j]] == currentCluster)
           indexes.push(j);
       }
       const tCol = DG.Column.string('peptides', indexes.length);
-      tCol.init((i) => peptideCol.get(indexes[i]));
+      tCol.init((i) => peptideColCategories[peptideColData[indexes[i]]]);
 
       for (const tag of peptideCol.tags)
         tCol.setTag(tag[0], tag[1]);
@@ -86,26 +102,69 @@ export class LogoSummary extends DG.JsViewer {
       const uh = new bio.UnitsHandler(tCol);
       tCol.setTag(bio.TAGS.alphabetSize, uh.getAlphabetSize().toString());
 
+      // Get Stats
+      const matcher: {[key: string]: number | string} = {};
+      matcher[this.model.settings.clustersColumnName!] = currentCluster;
+      const currentStatsDf = this.model.clusterStatsDf.rows.match(matcher).toDataFrame();
+      const activityCol = this.dataFrame.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
+      //TODO: use bitset instead of splitCol
+      const splitCol = DG.Column.bool(C.COLUMNS_NAMES.SPLIT_COL, activityCol.length);
+      const currentClusterCol = this.dataFrame.getCol(this.model.settings.clustersColumnName!);
+      splitCol.init((i) => currentClusterCol.get(i) == currentCluster);
+      const distributionTable = DG.DataFrame.fromColumns([activityCol, splitCol]);
+      const stats: Stats = {
+        count: currentStatsDf.get(C.COLUMNS_NAMES.COUNT, 0),
+        ratio: currentStatsDf.get(C.COLUMNS_NAMES.RATIO, 0),
+        pValue: currentStatsDf.get(C.COLUMNS_NAMES.P_VALUE, 0),
+        meanDifference: currentStatsDf.get(C.COLUMNS_NAMES.MEAN_DIFFERENCE, 0),
+      };
+
       const dfSlice = DG.DataFrame.fromColumns([tCol]);
-      tempDfList[index] = dfSlice;
-      webLogoCol.set(index, index.toString());
-      membersCol.set(index, dfSlice.rowCount);
-      //TODO: user should be able to choose threshold
-      if (dfSlice.rowCount <= Math.ceil(this.model.clusterStatsDf.getCol(C.COLUMNS_NAMES.COUNT).stats.max * this.importanceThreshold))
-        summaryTable.filter.set(index, false, false);
+      tempWebLogoDfPlotList[index] = dfSlice.plot;
+      tempDistributionDfPlotList[index] = distributionTable.plot;
+      // webLogoColData[index] = index;
+      // distributionColData[index] = index;
+      membersColData[index] = indexes.length;
+      meanDifferenceColData[index] = stats.meanDifference;
+      pValColData[index] = stats.pValue;
+      ratioColData[index] = stats.ratio;
     }
     webLogoCol.setTag(DG.TAGS.CELL_RENDERER, 'html');
+    distributionCol.setTag(DG.TAGS.CELL_RENDERER, 'html');
 
     this.viewerGrid = summaryTable.plot.grid();
-    const gridClustersCol = this.viewerGrid.col(C.COLUMNS_NAMES.CLUSTERS)!;
+    this.updateFilter();
+    const gridClustersCol = this.viewerGrid.col(clustersColName)!;
     gridClustersCol.name = 'Clusters';
     gridClustersCol.visible = true;
     this.viewerGrid.columns.rowHeader!.visible = false;
     this.viewerGrid.props.rowHeight = 55;
     this.viewerGrid.onCellPrepare((cell) => {
-      if (cell.isTableCell && cell.tableColumn?.name === 'WebLogo') {
-        tempDfList[parseInt(cell.cell.value)].plot.fromType('WebLogo', {maxHeight: 50, positionHeight: this.webLogoMode})
+      const currentRowIdx = cell.tableRowIndex;
+      if (!cell.isTableCell || currentRowIdx == null || currentRowIdx == -1)
+        return;
+
+      if (cell.tableColumn?.name == 'WebLogo') {
+        tempWebLogoDfPlotList[currentRowIdx]
+          .fromType('WebLogo', {maxHeight: cell.grid.props.rowHeight - 5, positionHeight: this.webLogoMode})
           .then((viewer) => cell.element = viewer.root);
+      } else if (cell.tableColumn?.name == 'Distribution') {
+        const viewerRoot = tempDistributionDfPlotList[currentRowIdx].histogram({
+          filteringEnabled: false,
+          valueColumnName: C.COLUMNS_NAMES.ACTIVITY_SCALED,
+          splitColumnName: C.COLUMNS_NAMES.SPLIT_COL,
+          legendVisibility: 'Never',
+          showXAxis: true,
+          showColumnSelector: false,
+          showRangeSlider: false,
+          showBinSelector: false,
+          backColor: '#fffff',
+        }).root;
+
+        viewerRoot.style.width = 'auto';
+        const height = (cell.grid.props.rowHeight - 5) / 2 * 3;
+        viewerRoot.style.height = `${height}px`;
+        cell.element = viewerRoot;
       }
     });
     this.viewerGrid.root.addEventListener('click', (ev) => {
@@ -113,16 +172,17 @@ export class LogoSummary extends DG.JsViewer {
       if (!cell || !cell.isTableCell)
         return;
 
-      const cluster = clustersCol.get(cell.tableRowIndex!)!;
+      const clusterIdx = clustersColData[cell.tableRowIndex!];
       summaryTable.currentRowIdx = -1;
       if (ev.shiftKey)
-        this.model.modifyClusterSelection(cluster);
+        this.model.modifyClusterSelection(clusterIdx);
       else
-        this.model.initClusterSelection(cluster);
+        this.model.initClusterSelection(clusterIdx);
+      this.viewerGrid.invalidate();
     });
     this.viewerGrid.onCellRender.subscribe((gridCellArgs) => {
       const gc = gridCellArgs.cell;
-      if (gc.tableColumn?.name !== C.COLUMNS_NAMES.CLUSTERS || gc.isColHeader)
+      if (gc.tableColumn?.name !== clustersColName || gc.isColHeader)
         return;
       const canvasContext = gridCellArgs.g;
       const bound = gridCellArgs.bounds;
@@ -130,12 +190,13 @@ export class LogoSummary extends DG.JsViewer {
       canvasContext.beginPath();
       canvasContext.rect(bound.x, bound.y, bound.width, bound.height);
       canvasContext.clip();
-      CR.renderLogoSummaryCell(canvasContext, gc.cell.value, this.model.logoSummarySelection, bound);
+      const cellRawData = clustersColData[gc.cell.rowIndex];
+      CR.renderLogoSummaryCell(canvasContext, gc.cell.value, cellRawData, this.model.logoSummarySelection, bound);
       gridCellArgs.preventDefault();
       canvasContext.restore();
     });
     this.viewerGrid.onCellTooltip((cell, x, y) => {
-      if (!cell.isColHeader && cell.tableColumn?.name === C.COLUMNS_NAMES.CLUSTERS)
+      if (!cell.isColHeader && cell.tableColumn?.name === clustersColName)
         this.model.showTooltipCluster(cell.cell.value, x, y);
       return true;
     });
@@ -151,4 +212,12 @@ export class LogoSummary extends DG.JsViewer {
 
     return this.viewerGrid;
   }
+
+  updateFilter(): void {
+    const table = this.viewerGrid.table;
+    const memberstCol = table.getCol(C.COLUMNS_NAMES.MEMBERS);
+    const membersColData = memberstCol.getRawData();
+    const maxCount = memberstCol.stats.max;
+    table.filter.init((i) => membersColData[i] > Math.ceil(maxCount * this.membersRatioThreshold));
+  }
 }

package/src/viewers/peptide-space-viewer.ts

@@ -40,7 +40,7 @@ export class PeptideSpaceViewer extends DG.JsViewer {
   async onTableAttached(): Promise<void> {
     super.onTableAttached();
 
-    this.model = await PeptidesModel.getInstance(this.dataFrame);
+    this.model = PeptidesModel.getInstance(this.dataFrame);
 
     await this.render(!this.dataFrame.temp[C.EMBEDDING_STATUS]);
   }
@@ -62,7 +62,7 @@ export class PeptideSpaceViewer extends DG.JsViewer {
       $(this.root).empty();
       const viewerHost = ui.waitBox(async () => {
         // const aligendSeqCol = this.dataFrame.columns.bySemType(C.SEM_TYPES.MACROMOLECULE)!;
-        const alignedSeqCol = this.dataFrame.getCol(C.COLUMNS_NAMES.MACROMOLECULE);
+        const alignedSeqCol = this.dataFrame.getCol(this.model.settings.sequenceColumnName!);
         const edf = await computeWeights(this.dataFrame, this.method, this.measure, this.cyclesCount, alignedSeqCol);
         this.dataFrame.temp[C.EMBEDDING_STATUS] = true;
         this.model.edf = edf;
@@ -77,7 +77,7 @@ export class PeptideSpaceViewer extends DG.JsViewer {
             this.model.fireBitsetChanged(true);
         });
 
-        const colorCol = this.dataFrame.columns.bySemType(C.SEM_TYPES.ACTIVITY_SCALED)!;
+        const colorCol = this.dataFrame.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
         edf.columns.add(colorCol);
 
         const viewerOptions = {
@@ -112,14 +112,14 @@ export class PeptideSpaceViewer extends DG.JsViewer {
 
 //Do not accept table, only column
 export async function computeWeights(
-  table: DG.DataFrame, method: string, measure: string, cyclesCount: number, col?: DG.Column,
+  table: DG.DataFrame, method: string, measure: string, cyclesCount: number, col: DG.Column,
 ): Promise<DG.DataFrame | null> {
   const pi = DG.TaskBarProgressIndicator.create('Creating embedding...');
   let edf: DG.DataFrame | null = null;
   try {
     const axesNames = ['~X', '~Y', '~MW'];
     // col ??= table.columns.bySemType(C.SEM_TYPES.MACROMOLECULE)!;
-    col ??= table.getCol(C.COLUMNS_NAMES.MACROMOLECULE);
+    // col ??= table.getCol(this.model.settings.sequenceColumnName!);
     const columnData = col.toList().map((v) => AlignedSequenceEncoder.clean(v));
 
     const reduceDimRes: IReduceDimensionalityResult = await createDimensinalityReducingWorker(