@datagrok/peptides 0.8.7 → 0.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@datagrok/peptides",
-	"version": "0.8.7",
+	"version": "0.8.8",
 	"description": "",
 	"dependencies": {
 		"@biowasm/aioli": ">=2.4.0",
@@ -32,8 +32,6 @@
 		"webpack-cli": "latest"
 	},
 	"sources": [
-		"files/aligned.csv",
-		"files/aligned_2.csv",
 		"common/ngl_viewer/ngl.js"
 	],
 	"scripts": {

package/setup.cmd

@@ -0,0 +1,18 @@
+call npm unlink datagrok-api
+call npm unlink @datagrok-libraries/utils
+call npm unlink @datagrok-libraries/ml
+cd ../../js-api
+call npm install
+call npm link
+cd ../libraries/utils
+call npm install
+call npm link
+call npm link datagrok-api
+cd ../../libraries/ml
+call npm install
+call npm link
+call npm link @datagrok-libraries/utils
+cd ../../packages/Peptides
+call npm install
+call npm link datagrok-api @datagrok-libraries/utils @datagrok-libraries/ml
+webpack

package/src/describe.ts

@@ -356,7 +356,7 @@ function setTooltipFunc(
   sarGrid: DG.Grid,
   sarVGrid: DG.Grid,
 ) {
-  const onCellTooltipFunc = function(cell: DG.GridCell, x: number, y: number) {
+  const onCellTooltipFunc = async function(cell: DG.GridCell, x: number, y: number) {
     if (
       !cell.isRowHeader &&
       !cell.isColHeader &&
@@ -401,7 +401,7 @@ function setTooltipFunc(
         const divText = ui.divText('Amino Acids in this group: ' + currentGroup['aminoAcids'].join(', '));
         ui.tooltip.show(ui.divV([ui.h3(currentGroup['description']), divText]), x, y);
       } else
-        cp.showTooltip(cell, x, y);
+        await cp.showTooltip(cell, x, y);
     }
     return true;
   };

package/src/monomer-library.ts

@@ -16,7 +16,6 @@ export class MonomerLibrary {
   private monomers: string[] = [];
 
   constructor(sdf: string) {
-    //sdf = sdf.replaceAll('\n\[', '\[');
     const sdfReader = new SDFReader();
     const data = sdfReader.get_colls(sdf);
     this.monomerFields.forEach((f) => {
@@ -39,7 +38,7 @@ export class MonomerLibrary {
 
       const name = data.MonomerCode[i] !== '.' ? data.MonomerCode[i] : data.MonomerName[i];
       this.library[name] = entry;
-      this.monomers.push(data.MonomerName[i]);
+      this.monomers.push(name);
     }
   }
 

package/src/package.ts

@@ -232,18 +232,40 @@ export async function peptideSubstitution(table: DG.DataFrame): Promise<DG.Widge
   if (!table) {
     return new DG.Widget(ui.label('No difference'));
   }
+  const peptideLength = 17;
   let initialCol: DG.Column = table.columns.byName('Initial');
   let substitutedCol: DG.Column = table.columns.byName('Substituted');
+  let substCounts = [];
+  let cnt = 0;
 
   for (let i = 0; i < initialCol.length; ++i) {
-    let concat = initialCol.get(i) + '#' + substitutedCol.get(i);
+    const initialPeptide: string = initialCol.get(i);
+    const substPeptide: string = substitutedCol.get(i);
+    const concat = initialPeptide + '#' + substPeptide;
+
     initialCol.set(i, concat);
+
+    const initialAminos = initialPeptide.split('-');
+    const substAminos = substPeptide.split('-');
+
+    for (let j = 0; j < peptideLength; ++j) {
+      if (initialAminos[j] != substAminos[j])
+        substCounts[cnt++] = j;
+    }
+  }
+
+  const countCol = DG.Column.fromInt32Array('substCounts', substCounts as unknown as Int32Array);
+  const df = DG.DataFrame.fromColumns([countCol]);
+  const barchart = df.plot.histogram({value: 'substCounts'});
+  if (barchart) {
+    barchart.root.style.width = '200px';
+    barchart.root.style.marginLeft = '30px';
   }
 
   initialCol.semType = 'alignedSequenceDifference';
   initialCol.name = 'Substitution';
   table.columns.remove('Substituted');
-  return new DG.Widget(ui.divH([table.plot.grid().root]));
+  return new DG.Widget(ui.div([barchart?.root, table.plot.grid().root]));
 }
 
 //name: alignedSequenceDifferenceCellRenderer

package/src/utils/cell-renderer.ts

@@ -74,12 +74,13 @@ export function measureAAR(s: string): number {
  * @param {number} [pivot=0] Pirvot.
  * @param {boolean} [left=false] Is left aligned.
  * @param {boolean} [hideMod=false] Hide amino acid redidue modifications.
+ * @param {number} [transparencyRate=0.0] Transparency rate where 1.0 is fully transparent
  * @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, transparencyRate: number = 1.0
 ) {
   g.textAlign = 'start';
   let colorPart = pivot == -1 ? s.substring(0) : s.substring(0, pivot);
@@ -112,6 +113,7 @@ function printLeftOrCentered(
 
   function draw(dx1: number, dx2: number) {
     g.fillStyle = color;
+    g.globalAlpha = transparencyRate;
     g.fillText(
       colorPart,
       x + dx1,
@@ -230,6 +232,16 @@ export class AlignedSequenceCellRenderer extends DG.GridCellRenderer {
     return 'alignedSequence';
   }
 
+  /**
+   * Cell width.
+   *
+   * @readonly
+   * @memberof AlignedSequenceCellRenderer
+   */
+   get defaultWidth() {
+    return 230;
+  }
+
   /**
    * Cell renderer function.
    *
@@ -337,7 +349,17 @@ export function processSequence(subParts: string[]): [string[], boolean] {
    * @memberof AlignedSequenceDifferenceCellRenderer
    */
   get defaultHeight() {
-    return 35;
+    return 30;
+  }
+
+  /**
+   * Cell width.
+   *
+   * @readonly
+   * @memberof AlignedSequenceDifferenceCellRenderer
+   */
+   get defaultWidth() {
+    return 200;
   }
 
   /**
@@ -360,7 +382,7 @@ export function processSequence(subParts: string[]): [string[], boolean] {
     const cell = gridCell.cell;
 
     w = grid ? Math.min(grid.canvas.width - x, w) : g.canvas.width - x;
-    y += 3;
+    y += 2;
     g.save();
     g.beginPath();
     g.rect(x, y, w, h);
@@ -387,17 +409,17 @@ export function processSequence(subParts: string[]): [string[], boolean] {
         [color, pivot] = cp.getColorPivot(amino2);
       
       if (amino1 != amino2) {
-        const verticalShift = 10;
+        const verticalShift = 7;
 
         if (amino1 == '') 
           amino1 = '-';
         if (amino2 == '') 
           amino2 = '-';
 
-        printLeftOrCentered(x, y - verticalShift, w, h, g, amino1, 'red', pivot, true);
-        x = printLeftOrCentered(x, y + verticalShift, w, h, g, amino2, 'red', pivot, true);
+        printLeftOrCentered(x, y - verticalShift, w, h, g, amino1, color, pivot, true);
+        x = printLeftOrCentered(x, y + verticalShift, w, h, g, amino2, color, pivot, true);
       } else {
-        x = printLeftOrCentered(x, y, w, h, g, amino1, color, pivot, true);
+        x = printLeftOrCentered(x, y, w, h, g, amino1, color, pivot, true, false, 0.5);
       } 
     });
     g.restore();

package/src/utils/chem-palette.ts

@@ -3,6 +3,8 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations';
+import {_package} from '../package';
+import {MonomerLibrary} from '../monomer-library';
 
 /**
  * Chem palette class.
@@ -12,7 +14,8 @@ import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations'
  */
 export class ChemPalette {
   cp: StringDictionary = {};
-
+  isInit: boolean = false;
+  monomerLib: MonomerLibrary | null = null;
   /**
    * Creates an instance of ChemPalette.
    *
@@ -32,11 +35,14 @@ export class ChemPalette {
    * @param {number} x x coordinate of the mouse pointer.
    * @param {number} y y coordinate of the mouse pointer.
    */
-  showTooltip(cell: DG.GridCell, x: number, y: number) {
+  async showTooltip(cell: DG.GridCell, x: number, y: number) {
+    if(!this.isInit)
+      this.monomerLib = new MonomerLibrary(await _package.files.readAsText(`HELMMonomers_June10.sdf`));
+
     const s = cell.cell.value as string;
     let toDisplay = [ui.divText(s)];
     const [, aar] = this.getColorAAPivot(s);
-    if (aar in ChemPalette.AASmiles) {
+    if (this.monomerLib!.monomerNames.includes(aar)) {
       if (s in ChemPalette.AANames)
         toDisplay = [ui.divText(ChemPalette.AANames[s])];
 
@@ -48,7 +54,7 @@ export class ChemPalette {
         autoCropMargin: 0,
         suppressChiralText: true,
       };
-      const sketch = grok.chem.svgMol(ChemPalette.AASmiles[aar], undefined, undefined, options);
+      const sketch = grok.chem.svgMol(this.monomerLib!.getMonomerMol(aar), undefined, undefined, options);
       toDisplay.push(sketch);
     }
     ui.tooltip.show(ui.divV(toDisplay), x, y);

package/src/viewers/subst-viewer.ts

@@ -13,12 +13,14 @@ export class SubstViewer extends DG.JsViewer {
   maxSubstitutions: number;
   activityLimit: number;
   activityColumnName: string;
+  title: string;
   casesGrid: DG.Grid | null;
 
   constructor() {
     super();
 
     this.activityColumnName = this.string('activityColumnName');
+    this.title = this.string('title', 'Substitution analysis');
 
     this.maxSubstitutions = this.int('maxSubstitutions', 1);
     this.activityLimit = this.float('activityLimit', 2);
@@ -216,7 +218,11 @@ export class SubstViewer extends DG.JsViewer {
 
   render() {
     $(this.root).empty();
-    this.root.appendChild(this.viewerGrid!.root);
+    const title = ui.h1(this.title, {style: {'align-self': 'center'}});
+    const grid = this.viewerGrid!.root;
+    title.style.alignContent = 'center';
+    grid.style.width = 'auto';
+    this.root.appendChild(ui.divV([title, grid]));
   }
 
   split(peptideColumn: DG.Column, filter: boolean = true): string[][] {