@datagrok/peptides 0.4.1 → 0.6.0

package/package.json

@@ -1,19 +1,19 @@
 {
 	"name": "@datagrok/peptides",
-	"version": "0.4.1",
+	"version": "0.6.0",
 	"description": "",
 	"dependencies": {
 		"@keckelt/tsne": "^1.0.2",
 		"cash-dom": "latest",
 		"d3": "latest",
-		"datagrok-api": ">0.95.4",
+		"datagrok-api": ">=0.104.0",
 		"dayjs": "latest",
 		"jaro-winkler-typescript": "^1.0.1",
 		"jstat": "^1.9.5",
 		"logojs-react": "^2.1.1",
 		"rxjs": "^6.5.5",
 		"umap-js": "^1.3.3",
-		"@datagrok-libraries/utils": ">=0.0.11",
+		"@datagrok-libraries/utils": ">=0.0.13",
 		"@datagrok-libraries/statistics": ">=0.1.5",
 		"@types/d3": "^7.0.0",
 		"@types/jquery": "^3.5.6"

package/src/describe.ts

@@ -1,5 +1,3 @@
-// eslint-disable-next-line no-unused-vars
-import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import {splitAlignedPeptides} from './utils/split-aligned';
@@ -10,7 +8,7 @@ import {setAARRenderer} from './utils/cell-renderer';
 
 const cp = new ChemPalette('grok');
 
-const aarGroups = {
+export const aarGroups = {
   'R': 'PC',
   'H': 'PC',
   'K': 'PC',
@@ -47,6 +45,15 @@ const groupDescription: {[key: string]: {'description': string, 'aminoAcids': st
   '-': {'description': 'Unknown Amino Acid', 'aminoAcids': ['-']},
 };
 
+/*function customGridColumnHeader(cell: DG.GridCell) {
+  if (cell.isColHeader && cell.tableColumn != null) {
+    if (highlightedColumns.includes(parseInt(cell.tableColumn.name))) {
+      cell.style.backColor = 0xff1f77b4;
+    }
+  }
+}*/
+
+//TODO: decomposition!
 export async function describe(
   df: DG.DataFrame,
   activityColumn: string,
@@ -62,6 +69,7 @@ export async function describe(
   const col: DG.Column = df.columns.bySemType('alignedSequence');
   [splitSeqDf, invalidIndexes] = splitAlignedPeptides(col);
   splitSeqDf.name = 'Split sequence';
+
   const positionColumns = splitSeqDf.columns.names();
   const activityColumnScaled = `${activityColumn}Scaled`;
   const renderColNames: string[] = splitSeqDf.columns.names();
@@ -240,11 +248,9 @@ export async function describe(
   aarList.sort((first, second) => getWeight(second) - getWeight(first));
 
   matrixDf.getCol(aminoAcidResidue).setCategoryOrder(aarList);
-  //const sequenceDf = segregateBestAtAllCateg(statsDf, twoColorMode);
 
   // SAR vertical table (naive, choose best Mean difference from pVals <= 0.01)
   // TODO: aquire ALL of the positions
-
   let sequenceDf = statsDf.groupBy(['Mean difference', aminoAcidResidue, positionColName, 'Count', 'Ratio', 'pValue'])
     .where('pValue <= 0.1')
     .aggregate();
@@ -298,19 +304,6 @@ export async function describe(
       return;
     }
 
-    // if (args.cell.isColHeader) {
-    //   if (args.cell.gridColumn.name != aminoAcidResidue) {
-    //     const textSize = args.g.measureText(args.cell.gridColumn.name);
-    //     args.g.fillStyle = '#4b4b4a';
-    //     args.g.fillText(
-    //       args.cell.gridColumn.name,
-    //       args.bounds.x + (args.bounds.width - textSize.width) / 2,
-    //       args.bounds.y + (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent),
-    //     );
-    //   }
-    //   args.preventDefault();
-    // }
-
     if (
       args.cell.isTableCell &&
       args.cell.tableRowIndex !== null &&
@@ -404,10 +397,10 @@ export async function describe(
     }
     if (
       !cell.isColHeader &&
-        cell.tableColumn !== null &&
-        cell.tableColumn.name == aminoAcidResidue &&
-        cell.cell.value !== null &&
-        cell.tableRowIndex !== null
+      cell.tableColumn !== null &&
+      cell.tableColumn.name == aminoAcidResidue &&
+      cell.cell.value !== null &&
+      cell.tableRowIndex !== null
     ) {
       if (grouping) {
         const currentGroup = groupDescription[cell.cell.value];
@@ -422,7 +415,7 @@ export async function describe(
   SARgrid.onCellTooltip(onCellTooltipFunc);
   SARVgrid.onCellTooltip(onCellTooltipFunc);
 
-  sourceGrid.onCellPrepare((cell) => {
+  sourceGrid.onCellPrepare((cell: DG.GridCell) => {
     const currentRowIndex = cell.tableRowIndex;
     if (currentRowIndex && invalidIndexes.includes(currentRowIndex) && !cell.isRowHeader) {
       cell.style.backColor = DG.Color.lightLightGray;

package/src/package.ts

@@ -15,7 +15,8 @@ import {PeptideSimilaritySpaceWidget} from './utils/peptide-similarity-space';
 import {manualAlignmentWidget} from './widgets/manual-alignment';
 import {SARViewer, SARViewerVertical} from './viewers/sar-viewer';
 import {peptideMoleculeWidget} from './widgets/peptide-molecule';
-import {correlationAnalysisPlots} from './utils/correlation-analysis';
+import {SpiralPlot} from './viewers/spiral-plot';
+import { SubstViewer } from './viewers/subst-viewer';
 
 export const _package = new DG.Package();
 let tableGrid: DG.Grid;
@@ -25,35 +26,13 @@ let view: DG.TableView;
 
 async function main(chosenFile: string) {
   const pi = DG.TaskBarProgressIndicator.create('Loading Peptides');
-  //let peptides =
-  //  await grok.data.loadTable('https://datagrok.jnj.com/p/ejaeger.il23peptideidp5562/il-23_peptide_idp-5562');
   const path = _package.webRoot + 'files/' + chosenFile;
   const peptides = (await grok.data.loadTable(path));
   peptides.name = 'Peptides';
   peptides.setTag('dataType', 'peptides');
   const view = grok.shell.addTableView(peptides);
   tableGrid = view.grid;
-  // peptides.onSemanticTypeDetecting.subscribe((_: any) => {
-  //   const regexp = new RegExp(/^([^-^\n]*-){2,49}(\w|\(|\))+$/);
-  //   for (const col of peptides.columns) {
-  //     col.semType = DG.Detector.sampleCategories(col, (s: any) => regexp.test(s.trim())) ? 'alignedSequence' : null;
-  //     if (col.semType == 'alignedSequence') {
-  //       expandColumn(col, tableGrid, (ent)=>{
-  //         const subParts:string[] = ent.split('-');
-  //         // eslint-disable-next-line no-unused-vars
-  //         const [text, _] = processSequence(subParts);
-  //         let textSize = 0;
-  //         text.forEach((aar)=>{
-  //           textSize += aar.length;
-  //         });
-  //         return textSize;
-  //       });
-  //     }
-  //   }
-  // });
-
   view.name = 'PeptidesView';
-
   grok.shell.windows.showProperties = true;
 
   pi.close();
@@ -67,7 +46,6 @@ export function Peptides() {
 
   const appDescription = ui.info(
     [
-      // ui.divText('\n To start the application :', {style: {'font-weight': 'bolder'}}),
       ui.list([
         '- automatic recognition of peptide sequences',
         '- native integration with tons of Datagrok out-of-the box features (visualization, filtering, clustering, ' +
@@ -136,6 +114,14 @@ export function sarVertical(): SARViewerVertical {
   return new SARViewerVertical();
 }
 
+//name: substitution-analysis-viewer
+//description: Substitution Analysis Viewer
+//tags: viewer
+//output: viewer result
+export function subst(): SubstViewer {
+  return new SubstViewer();
+}
+
 //name: StackedBarchart Widget
 //tags: panel, widgets
 //input: column col {semType: aminoAcids}
@@ -201,14 +187,15 @@ export async function peptideSpacePanel(col: DG.Column): Promise<DG.Widget> {
   return await widget.draw();
 }
 
-//name: Correllation analysis
-export async function correlationAnalysis() {
-  view = (grok.shell.v as DG.TableView);
-
-  const df = await grok.data.files.openTable('Demo:TestJobs:Files:DemoFiles/bio/peptides.csv');
-  const tview = grok.shell.addTableView(df);
-  const [cpviewer, bpviewer] = correlationAnalysisPlots(df.getCol('AlignedSequence'));
-
-  tview.dockManager.dock(cpviewer, 'right');
-  tview.dockManager.dock(bpviewer, 'down');
+//name: Spiral Plot
+////input: dataframe table
+////input: column activity
+//tags: viewer, panel
+//output: viewer result
+export async function spiralPlot(): Promise<DG.Viewer> {//(table: DG.DataFrame, activity: DG.Column) {
+// Read as dataframe
+  const table = await grok.data.files.openTable('Demo:TestJobs:Files:DemoFiles/bio/peptides.csv');
+  const activity = await table.columns.addNewCalculated('-log10(Activity)', '0-Log10(${Activity})');
+  view = grok.shell.addTableView(table);
+  return view.addViewer(SpiralPlot.fromTable(table, {valuesColumnName: activity.name}));
 }

package/src/peptides.ts

@@ -1,23 +1,39 @@
-import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import {createPeptideSimilaritySpaceViewer} from './utils/peptide-similarity-space';
 import {addViewerToHeader} from './viewers/stacked-barchart-viewer';
 
+/**
+ * Peptides controller class.
+ *
+ * @export
+ * @class Peptides
+ */
 export class Peptides {
+  /**
+   * Class initializer
+   *
+   * @param {DG.Grid} tableGrid Working talbe grid.
+   * @param {DG.TableView} view Working view.
+   * @param {DG.DataFrame} currentDf Working table.
+   * @param {{[key: string]: string}} options SAR viewer options
+   * @param {DG.Column} col Aligned sequences column.
+   * @param {string} activityColumnChoice Activity column name.
+   * @memberof Peptides
+   */
   async init(
-      tableGrid: DG.Grid,
-      view: DG.TableView,
-      currentDf: DG.DataFrame,
-      options: {[key: string]: string},
-      col: DG.Column,
-      activityColumnChoice: string
-    ) {
+    tableGrid: DG.Grid,
+    view: DG.TableView,
+    currentDf: DG.DataFrame,
+    options: {[key: string]: string},
+    col: DG.Column,
+    activityColumnChoice: string,
+  ) {
     for (let i = 0; i < tableGrid.columns.length; i++) {
-      const col = tableGrid.columns.byIndex(i);
-      if (col &&
-          col.name &&
-          col.column?.semType != 'aminoAcids'
+      const aarCol = tableGrid.columns.byIndex(i);
+      if (aarCol &&
+          aarCol.name &&
+          aarCol.column?.semType != 'aminoAcids'
       ) {
         //@ts-ignore
         tableGrid.columns.byIndex(i)?.visible = false;
@@ -26,6 +42,11 @@ export class Peptides {
 
     const originalDfColumns = (currentDf.columns as DG.ColumnList).names();
 
+    const substViewer = view.addViewer(
+      'substitution-analysis-viewer', {'activityColumnName': options['activityColumnColumnName']},
+    );
+    view.dockManager.dock(substViewer, DG.DOCK_TYPE.RIGHT, null, 'Substitution Analysis');
+
     const sarViewer = view.addViewer('peptide-sar-viewer', options);
     const sarNode = view.dockManager.dock(sarViewer, DG.DOCK_TYPE.DOWN, null, 'SAR Viewer');
 
@@ -41,34 +62,37 @@ export class Peptides {
       view,
       `${activityColumnChoice}Scaled`,
     );
-    const psNode = view.dockManager.dock(peptideSpaceViewer, DG.DOCK_TYPE.LEFT, sarNode, 'Peptide Space Viewer', 0.3);
+    view.dockManager.dock(peptideSpaceViewer, DG.DOCK_TYPE.LEFT, sarNode, 'Peptide Space Viewer', 0.3);
 
     const StackedBarchartProm = currentDf.plot.fromType('StackedBarChartAA');
     addViewerToHeader(tableGrid, StackedBarchartProm);
 
     const hideIcon = ui.iconFA('window-close', () => { //undo?, times?
-        const viewers = [];
-        for (const viewer of view.viewers) {
-          if (viewer.type !== DG.VIEWER.GRID) {
-            viewers.push(viewer);
-          }
+      const viewers = [];
+      for (const viewer of view.viewers) {
+        if (viewer.type !== DG.VIEWER.GRID) {
+          viewers.push(viewer);
         }
-        viewers.forEach((v) => v.close());
+      }
+      viewers.forEach((v) => v.close());
 
-        const cols = (view.dataFrame.columns as DG.ColumnList);
-        for (const colName of cols.names()) {
-          if (!originalDfColumns.includes(colName)) {
-            cols.remove(colName);
-          }
+      const cols = (currentDf.columns as DG.ColumnList);
+      for (const colName of cols.names()) {
+        if (!originalDfColumns.includes(colName)) {
+          cols.remove(colName);
         }
+      }
+
+      currentDf.selection.setAll(false);
+      currentDf.filter.setAll(true);
 
-        tableGrid.setOptions({'colHeaderHeight': 20});
-        tableGrid.columns.setVisible(originalDfColumns);
+      tableGrid.setOptions({'colHeaderHeight': 20});
+      tableGrid.columns.setVisible(originalDfColumns);
 
-        view.setRibbonPanels(ribbonPanels);
+      view.setRibbonPanels(ribbonPanels);
     }, 'Close viewers and restore dataframe');
-    
+
     const ribbonPanels = view.getRibbonPanels();
     view.setRibbonPanels([[hideIcon]]);
   }
-}
+}

package/src/utils/cell-renderer.ts

@@ -3,13 +3,22 @@ import * as DG from 'datagrok-api/dg';
 
 const cp = new ChemPalette('grok');
 
-export function expandColumn(col:DG.Column,
-  grid:DG.Grid,
-  cellRenderSize: (celVal:string)=>number,
-  textSizeMult = 10,
-  minSize = 30,
-  maxSize = 650,
-  timeout = 500) {
+/**
+ * A function to expand column size based on its contents.
+ *
+ * @export
+ * @param {DG.Column} col Column to expand.
+ * @param {DG.Grid} grid Grid containing colum for expansion.
+ * @param {(cellVal: string) => number} cellRenderSize An anonymous function that calculates cell value length.
+ * @param {number} [textSizeMult=10] Text size muliplier.
+ * @param {number} [minSize=30] Minimal column width.
+ * @param {number} [maxSize=650] Maximum column width.
+ * @param {number} [timeout=500] Timeout value.
+ */
+export function expandColumn(
+  col: DG.Column, grid: DG.Grid, cellRenderSize: (cellVal: string) => number,
+  textSizeMult = 10, minSize = 30, maxSize = 650, timeout = 500,
+) {
   let maxLen = 0;
   col.categories.forEach((ent: string) => {
     const len = cellRenderSize(ent);
@@ -23,6 +32,14 @@ export function expandColumn(col:DG.Column,
   timeout);
 }
 
+/**
+ * A function that sets amino acid residue to the specified column.
+ *
+ * @export
+ * @param {DG.Column} col Column to set renderer for.
+ * @param {(DG.Grid | null)} [grid=null] Grid that contains the col column.
+ * @param {boolean} [grouping=false] Is grouping enabled.
+ */
 export function setAARRenderer(col: DG.Column, grid: DG.Grid | null = null, grouping = false) {
   col.semType = 'aminoAcids';
   col.setTag('cell.renderer', 'aminoAcids');
@@ -33,17 +50,39 @@ export function setAARRenderer(col: DG.Column, grid: DG.Grid | null = null, grou
     expandColumn(col, grid, (ent) => measureAAR(ent));
   }
 }
-
+/**
+ * A function to measure amino acid residue
+ *
+ * @export
+ * @param {string} s Amino acid residue string.
+ * @return {number} Amino acid residue size.
+ */
 export function measureAAR(s: string): number {
   const end = s.lastIndexOf(')');
   const beg = s.indexOf('(');
   return end == beg ? s.length : s.length - (end - beg) + 1;
 }
 
-function printLeftCentered(
+/**
+ * A function that prints a string aligned to left or centered.
+ *
+ * @param {number} x x coordinate.
+ * @param {number} y y coordinate.
+ * @param {number} w Width.
+ * @param {number} h Height.
+ * @param {CanvasRenderingContext2D} g Canvas rendering context.
+ * @param {string} s String to print.
+ * @param {string} [color=ChemPalette.undefinedColor] String color.
+ * @param {number} [pivot=0] Pirvot.
+ * @param {boolean} [left=false] Is left aligned.
+ * @param {boolean} [hideMod=false] Hide amino acid redidue modifications.
+ * @return {number} x coordinate to start printing at.
+ */
+function printLeftOrCentered(
   x: number, y: number, w: number, h: number,
   g: CanvasRenderingContext2D, s: string, color = ChemPalette.undefinedColor,
-  pivot: number = 0, left = false, hideMod = false) {
+  pivot: number = 0, left = false, hideMod = false,
+) {
   g.textAlign = 'start';
   let colorPart = pivot == -1 ? s.substring(0) : s.substring(0, pivot);
   if (colorPart.length == 1) {
@@ -100,23 +139,55 @@ function printLeftCentered(
   }
 }
 
-
+/**
+ * Amino acid residue cell renderer.
+ *
+ * @export
+ * @class AminoAcidsCellRenderer
+ * @extends {DG.GridCellRenderer}
+ */
 export class AminoAcidsCellRenderer extends DG.GridCellRenderer {
     chemPalette: ChemPalette | null;
 
+    /**
+     * Renderer name.
+     *
+     * @readonly
+     * @memberof AminoAcidsCellRenderer
+     */
     get name() {
       return 'aminoAcidsCR';
     }
 
+    /**
+     * Cell type.
+     *
+     * @readonly
+     * @memberof AminoAcidsCellRenderer
+     */
     get cellType() {
       return 'aminoAcids';
     }
 
+    /**
+     * Constructor.
+     */
     constructor() {
       super();
       this.chemPalette = null;
     }
 
+    /**
+     * Cell renderer function.
+     *
+     * @param {CanvasRenderingContext2D} g Canvas rendering context.
+     * @param {number} x x coordinate on the canvas.
+     * @param {number} y y coordinate on the canvas.
+     * @param {number} w width of the cell.
+     * @param {number} h height of the cell.
+     * @param {DG.GridCell} gridCell Grid cell.
+     * @param {DG.GridCellStyle} cellStyle Cell style.
+     */
     render(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number,
       gridCell: DG.GridCell, cellStyle: DG.GridCellStyle) {
       if (this.chemPalette === null) {
@@ -130,21 +201,51 @@ export class AminoAcidsCellRenderer extends DG.GridCellRenderer {
       g.textBaseline = 'top';
       const s: string = gridCell.cell.value ? gridCell.cell.value : '-';
       const [color, pivot] = cp.getColorPivot(s);
-      printLeftCentered(x, y, w, h, g, s, color, pivot, false, true);
+      printLeftOrCentered(x, y, w, h, g, s, color, pivot, false, true);
       g.restore();
     }
 }
 
-
+/**
+ * Aligned sequence cell renderer.
+ *
+ * @export
+ * @class AlignedSequenceCellRenderer
+ * @extends {DG.GridCellRenderer}
+ */
 export class AlignedSequenceCellRenderer extends DG.GridCellRenderer {
+  /**
+   * Renderer name.
+   *
+   * @readonly
+   * @memberof AlignedSequenceCellRenderer
+   */
   get name() {
     return 'alignedSequenceCR';
   }
 
+  /**
+   * Cell type.
+   *
+   * @readonly
+   * @memberof AlignedSequenceCellRenderer
+   */
   get cellType() {
     return 'alignedSequence';
   }
 
+  /**
+   * Cell renderer function.
+   *
+   * @param {CanvasRenderingContext2D} g Canvas rendering context.
+   * @param {number} x x coordinate on the canvas.
+   * @param {number} y y coordinate on the canvas.
+   * @param {number} w width of the cell.
+   * @param {number} h height of the cell.
+   * @param {DG.GridCell} gridCell Grid cell.
+   * @param {DG.GridCellStyle} cellStyle Cell style.
+   * @memberof AlignedSequenceCellRenderer
+   */
   render(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number,
     gridCell: DG.GridCell, cellStyle: DG.GridCellStyle ) {
     w = Math.min(gridCell.grid.canvas.width - x, w);
@@ -169,25 +270,31 @@ export class AlignedSequenceCellRenderer extends DG.GridCellRenderer {
         const gap = simplified?'':' ';
         amino += `${amino?'':'-'}${gap}`;
       }
-      x = printLeftCentered(x, y, w, h, g, amino, color, pivot, true);
+      x = printLeftOrCentered(x, y, w, h, g, amino, color, pivot, true);
     });
 
     g.restore();
   }
 }
 
-
-export function processSequence(subParts:string[]) : [string[], boolean] {
+/**
+ * Function for sequence processing.
+ *
+ * @export
+ * @param {string[]} subParts Sequence subparts.
+ * @return {[string[], boolean]}
+ */
+export function processSequence(subParts: string[]): [string[], boolean] {
   const simplified = !subParts.some((amino, index) =>
     amino.length > 1 &&
     index != 0 &&
     index != subParts.length - 1);
 
-  const text:string[] = [];
+  const text: string[] = [];
+  const gap = simplified ? '' : ' ';
   subParts.forEach((amino: string, index) => {
     if (index < subParts.length) {
-      const gap = simplified?'':' ';
-      amino += `${amino?'':'-'}${gap}`;
+      amino += `${amino ? '' : '-'}${gap}`;
     }
     text.push(amino);
   });