@datagrok/peptides 0.4.3 → 0.5.6

package/package.json

@@ -1,19 +1,19 @@
 {
 	"name": "@datagrok/peptides",
-	"version": "0.4.3",
+	"version": "0.5.6",
 	"description": "",
 	"dependencies": {
 		"@keckelt/tsne": "^1.0.2",
 		"cash-dom": "latest",
 		"d3": "latest",
-		"datagrok-api": ">=0.95.11",
+		"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

@@ -45,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,
@@ -60,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();
@@ -405,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,7 @@ 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';
 
 export const _package = new DG.Package();
 let tableGrid: DG.Grid;
@@ -178,14 +178,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

@@ -3,7 +3,24 @@ 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,
@@ -13,10 +30,10 @@ export class Peptides {
     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;

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);
   });