@datagrok/peptides 0.0.1 → 0.4.2

package/src/peptides.ts

@@ -0,0 +1,76 @@
+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';
+
+export class Peptides {
+  async init(
+    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'
+      ) {
+        //@ts-ignore
+        tableGrid.columns.byIndex(i)?.visible = false;
+      }
+    }
+
+    const originalDfColumns = (currentDf.columns as DG.ColumnList).names();
+
+    const sarViewer = view.addViewer('peptide-sar-viewer', options);
+    const sarNode = view.dockManager.dock(sarViewer, DG.DOCK_TYPE.DOWN, null, 'SAR Viewer');
+
+    const sarViewerVertical = view.addViewer('peptide-sar-viewer-vertical');
+    view.dockManager.dock(sarViewerVertical, DG.DOCK_TYPE.RIGHT, sarNode, 'SAR Vertical Viewer');
+
+    const peptideSpaceViewer = await createPeptideSimilaritySpaceViewer(
+      currentDf,
+      col,
+      't-SNE',
+      'Levenshtein',
+      100,
+      view,
+      `${activityColumnChoice}Scaled`,
+    );
+    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);
+        }
+      }
+      viewers.forEach((v) => v.close());
+
+      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);
+
+      view.setRibbonPanels(ribbonPanels);
+    }, 'Close viewers and restore dataframe');
+
+    const ribbonPanels = view.getRibbonPanels();
+    view.setRibbonPanels([[hideIcon]]);
+  }
+}

package/src/utils/cell-renderer.ts

@@ -1,5 +1,6 @@
 import {ChemPalette} from './chem-palette';
 import * as DG from 'datagrok-api/dg';
+
 const cp = new ChemPalette('grok');
 
 export function expandColumn(col:DG.Column,
@@ -22,35 +23,27 @@ export function expandColumn(col:DG.Column,
   timeout);
 }
 
-export function setAARRenderer(
-  col:DG.Column,
-  grid:DG.Grid|null = null,
-) {
+export function setAARRenderer(col: DG.Column, grid: DG.Grid | null = null, grouping = false) {
   col.semType = 'aminoAcids';
   col.setTag('cell.renderer', 'aminoAcids');
+  if (grouping) {
+    col.setTag('groups', `${grouping}`);
+  }
   if (grid) {
-    expandColumn(col, grid, (ent) => measureAAR(ent, true));
+    expandColumn(col, grid, (ent) => measureAAR(ent));
   }
 }
 
-export function measureAAR(s:string,
-  hideMod = false):number {
+export function measureAAR(s: string): number {
   const end = s.lastIndexOf(')');
   const beg = s.indexOf('(');
-  return end == beg ? s.length:s.length - (end-beg)+1;
+  return end == beg ? s.length : s.length - (end - beg) + 1;
 }
+
 function printLeftCentered(
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  g: CanvasRenderingContext2D,
-  s: string,
-  color = ChemPalette.undefinedColor,
-  pivot: number = 0,
-  left = false,
-  hideMod = false,
-) {
+  x: number, y: number, w: number, h: number,
+  g: CanvasRenderingContext2D, s: string, color = ChemPalette.undefinedColor,
+  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) {
@@ -60,7 +53,7 @@ function printLeftCentered(
     if (colorPart.substring(0, 3) in ChemPalette.AAFullNames) {
       colorPart = ChemPalette.AAFullNames[s.substring(0, 3)] + colorPart.substr(3);
     } else if (colorPart.substring(1, 4) in ChemPalette.AAFullNames) {
-      colorPart = colorPart.at(0) + ChemPalette.AAFullNames[s.substring(1, 4)] + colorPart.substr(4);
+      colorPart = colorPart[0] + ChemPalette.AAFullNames[s.substring(1, 4)] + colorPart.substr(4);
     }
   }
   let grayPart = pivot == -1 ? '' : s.substr(pivot);
@@ -80,42 +73,36 @@ function printLeftCentered(
   const textSize = g.measureText(colorPart + grayPart);
   const indent = 5;
 
-
   const colorTextSize = g.measureText(colorPart);
-  if (left || textSize.width > w) {
+
+  function draw(dx1: number, dx2: number) {
     g.fillStyle = color;
     g.fillText(
       colorPart,
-      x + indent,
+      x + dx1,
       y + (textSize.fontBoundingBoxAscent + textSize.fontBoundingBoxDescent) / 2,
     );
     g.fillStyle = ChemPalette.undefinedColor;
     g.fillText(
       grayPart,
-      x + indent + colorTextSize.width,
+      x + dx2,
       y + (textSize.fontBoundingBoxAscent + textSize.fontBoundingBoxDescent) / 2,
     );
+  }
+
+
+  if (left || textSize.width > w) {
+    draw(indent, indent + colorTextSize.width);
     return x + colorTextSize.width + g.measureText(grayPart).width;
   } else {
-    g.fillStyle = color;
-    g.fillText(
-      colorPart,
-      x + (w - textSize.width) / 2,
-      y + (textSize.fontBoundingBoxAscent + textSize.fontBoundingBoxDescent) / 2,
-    );
-    g.fillStyle = ChemPalette.undefinedColor;
-    g.fillText(
-      grayPart,
-      x + (w - textSize.width) / 2 + colorTextSize.width,
-      y + (textSize.fontBoundingBoxAscent + textSize.fontBoundingBoxDescent) / 2,
-    );
+    draw((w - textSize.width) / 2, (w - textSize.width) / 2 + colorTextSize.width);
     return x + (w - textSize.width) / 2 + colorTextSize.width;
   }
 }
 
-export class AminoAcidsCellRenderer extends DG.GridCellRenderer {
-    private fontSize = 15;
 
+export class AminoAcidsCellRenderer extends DG.GridCellRenderer {
+    chemPalette: ChemPalette | null;
 
     get name() {
       return 'aminoAcidsCR';
@@ -125,21 +112,21 @@ export class AminoAcidsCellRenderer extends DG.GridCellRenderer {
       return 'aminoAcids';
     }
 
+    constructor() {
+      super();
+      this.chemPalette = null;
+    }
 
-    render(
-      g: CanvasRenderingContext2D,
-      x: number,
-      y: number,
-      w: number,
-      h: number,
-      gridCell: DG.GridCell,
-      cellStyle: DG.GridCellStyle,
-    ) {
+    render(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number,
+      gridCell: DG.GridCell, cellStyle: DG.GridCellStyle) {
+      if (this.chemPalette === null) {
+        this.chemPalette = new ChemPalette('grok', gridCell.tableColumn?.getTag('groups') ? true : false);
+      }
       g.save();
       g.beginPath();
       g.rect(x, y, w, h);
       g.clip();
-      g.font = `${this.fontSize}px monospace`;
+      g.font = `14px monospace`;
       g.textBaseline = 'top';
       const s: string = gridCell.cell.value ? gridCell.cell.value : '-';
       const [color, pivot] = cp.getColorPivot(s);
@@ -148,64 +135,54 @@ export class AminoAcidsCellRenderer extends DG.GridCellRenderer {
     }
 }
 
-export class AlignedSequenceCellRenderer extends DG.GridCellRenderer {
-    private maxCellWidth = 200;
-
-
-    constructor() {
-      super();
-    }
 
+export class AlignedSequenceCellRenderer extends DG.GridCellRenderer {
+  get name() {
+    return 'alignedSequenceCR';
+  }
 
-    get name() {
-      return 'alignedSequenceCR';
-    }
+  get cellType() {
+    return 'alignedSequence';
+  }
 
-    get cellType() {
-      return 'alignedSequence';
-    }
+  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);
+    g.save();
+    g.beginPath();
+    g.rect(x, y, w, h);
+    g.clip();
+    g.font = '14px monospace';
+    g.textBaseline = 'top';
+    const s: string = gridCell.cell.value ?? '';
+
+    //TODO: can this be replaced/merged with splitSequence?
+    const subParts = s.split('-');
+    const [text, simplified] = processSequence(subParts);
+    const textSize = g.measureText(text.join(''));
+    x = Math.max(x, x + (w - textSize.width) / 2);
+
+    subParts.forEach((amino: string, index) => {
+      const [color, pivot] = cp.getColorPivot(amino);
+      g.fillStyle = ChemPalette.undefinedColor;
+      if (index + 1 < subParts.length) {
+        const gap = simplified?'':' ';
+        amino += `${amino?'':'-'}${gap}`;
+      }
+      x = printLeftCentered(x, y, w, h, g, amino, color, pivot, true);
+    });
+
+    g.restore();
+  }
+}
 
 
-    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);
-      g.save();
-      g.beginPath();
-      g.rect(x, y, w, h);
-      g.clip();
-      g.font = '15px monospace';
-      g.textBaseline = 'top';
-      const s: string = gridCell.cell.value;
-
-      const subParts = s.split('-');
-      const [text, simplified] = processSequence(subParts);
-      const textSize = g.measureText(text.join(''));
-      x = Math.max(x, x+(w-textSize.width)/2);
-      subParts.forEach((amino: string, index) => {
-        const [color, pivot] = cp.getColorPivot(amino);
-        g.fillStyle = ChemPalette.undefinedColor;
-        if (index + 1 < subParts.length) {
-          const gap = simplified?'':' ';
-          amino += `${amino?'':'-'}${gap}`;
-        }
-        x = printLeftCentered(x, y, w, h, g, amino, color, pivot, true);
-      });
-      g.restore();
-    }
-}
 export function processSequence(subParts:string[]) : [string[], boolean] {
-  const simplified = !subParts.some((amino, index)=>{
-    return amino.length>1 &&
-        index !=0 &&
-        index != subParts.length-1;
-  });
+  const simplified = !subParts.some((amino, index) =>
+    amino.length > 1 &&
+    index != 0 &&
+    index != subParts.length - 1);
+
   const text:string[] = [];
   subParts.forEach((amino: string, index) => {
     if (index < subParts.length) {
@@ -216,4 +193,3 @@ export function processSequence(subParts:string[]) : [string[], boolean] {
   });
   return [text, simplified];
 }
-

package/src/utils/chem-palette.ts

@@ -1,19 +1,21 @@
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
+
+
 export class ChemPalette {
-    cp:{ [Key: string]: string; } = {};
-    constructor(scheme: string) {
+    cp: {[key: string]: string} = {};
+
+    constructor(scheme: string, grouping = false) {
       if (scheme == 'grok') {
-        this.cp = ChemPalette.getDatagrok();
+        this.cp = ChemPalette.getDatagrok(grouping);
       }
     }
 
     showTooltip(cell:DG.GridCell, x:number, y:number) {
       const s = cell.cell.value as string;
       let toDisplay = [ui.divText(s)];
-      // eslint-disable-next-line no-unused-vars
-      const [_c, aar, _p] = this.getColorAAPivot(s);
+      const [, aar] = this.getColorAAPivot(s);
       if (aar in ChemPalette.AASmiles) {
         if (s in ChemPalette.AANames) {
           toDisplay = [ui.divText(ChemPalette.AANames[s])];
@@ -21,43 +23,51 @@ export class ChemPalette {
         if (s in ChemPalette.AAFullNames) {
           toDisplay = [ui.divText(ChemPalette.AANames[ChemPalette.AAFullNames[s]])];
         }
-        const sketch = grok.chem.svgMol(ChemPalette.AASmiles[aar]);
+        const options = {
+          autoCrop: true,
+          autoCropMargin: 0,
+          suppressChiralText: true,
+        };
+        const sketch = grok.chem.svgMol(ChemPalette.AASmiles[aar], undefined, undefined, options);
         toDisplay.push(sketch);
       }
       ui.tooltip.show(ui.divV(toDisplay), x, y);
     }
 
     getColor( c: string) {
-    // eslint-disable-next-line no-unused-vars
-      const [color, _] = this.getColorPivot(c);
+      const [color] = this.getColorPivot(c);
       return color;
     }
+
     getColorAAPivot(c = ''): [string, string, number] {
-      if (c.length == 1 || c.at(1) == '(') {
-        const amino = c.at(0)?.toUpperCase()!;
+      if (c.length == 1 || c[1] == '(') {
+        const amino = c[0]?.toUpperCase()!;
         return amino in this.cp?
           [this.cp[amino], amino, 1]:
           [ChemPalette.undefinedColor, '', 1];
       }
-      if (c.at(0) == 'd' && c.at(1)! in this.cp) {
-        if (c.length == 2 || c.at(2) == '(') {
-          const amino = c.at(1)?.toUpperCase()!;
+
+      if (c[0] == 'd' && c[1]! in this.cp) {
+        if (c.length == 2 || c[2] == '(') {
+          const amino = c[1]?.toUpperCase()!;
           return amino in this.cp?
             [this.cp[amino], amino, 2]:
             [ChemPalette.undefinedColor, '', 2];
         }
       }
+
       if (c.substr(0, 3) in ChemPalette.AAFullNames) {
-        if (c.length == 3 || c.at(3) == '(') {
+        if (c.length == 3 || c[3] == '(') {
           const amino = ChemPalette.AAFullNames[c.substr(0, 3)];
           return amino in this.cp?
             [this.cp[amino], amino, 3]:
             [ChemPalette.undefinedColor, '', 3];
         }
       }
-      if (c.at(0)?.toLowerCase() == c.at(0)) {
+
+      if (c[0]?.toLowerCase() == c[0]) {
         if (c.substr(1, 3) in ChemPalette.AAFullNames) {
-          if (c.length == 4 || c.at(4) == '(') {
+          if (c.length == 4 || c[4] == '(') {
             const amino = ChemPalette.AAFullNames[c.substr(1, 3)];
             return amino in this.cp?
               [this.cp[amino], amino, 4]:
@@ -65,16 +75,16 @@ export class ChemPalette {
           }
         }
       }
+
       return [ChemPalette.undefinedColor, '', 0];
-      //return c ? DG.Color.toRgb(this.colorScale(c)) : 'rgb(127,127,127)'
     }
+
     getColorPivot(c = ''): [string, number] {
-      // eslint-disable-next-line no-unused-vars
-      const [color, _, pivot] = this.getColorAAPivot(c);
+      const [color,, pivot] = this.getColorAAPivot(c);
       return [color, pivot];
     };
 
-    static colourPalette: { [key: string]: string[] } = {
+    static colourPalette: {[key: string]: string[]} = {
       'orange': ['rgb(255,187,120)', 'rgb(245,167,100)', 'rgb(235,137,70)', 'rgb(205, 111, 71)'],
       'all_green': ['rgb(44,160,44)', 'rgb(74,160,74)', 'rgb(23,103,57)', 'rgb(30,110,96)', 'rgb(60,131,95)',
         'rgb(24,110,79)', 'rgb(152,223,138)', 'rgb(182, 223, 138)', 'rgb(152, 193, 138)'],
@@ -97,29 +107,47 @@ export class ChemPalette {
       'white': ['rgb(230,230,230)'],
     }
 
-    static grokGroups: [string[], string][] = [
-      [['C', 'U'], 'yellow'],
-      [['G', 'P'], 'red'],
-      [['A', 'V', 'I', 'L', 'M', 'F', 'Y', 'W'], 'all_green'],
-      [['R', 'H', 'K'], 'light_blue'],
-      [['D', 'E'], 'dark_blue'],
-      [['S', 'T', 'N', 'Q'], 'orange'],
-    ];
-    static undefinedColor = 'rgb(100,100,100)'
-
-    static makePalette(dt: [string[], string][], simplified = false) {
+    // static grokGroups: [string[], string][] = [
+    //   [['C', 'U'], 'yellow'],
+    //   [['G', 'P'], 'red'],
+    //   [['A', 'V', 'I', 'L', 'M', 'F', 'Y', 'W'], 'all_green'],
+    //   [['R', 'H', 'K'], 'light_blue'],
+    //   [['D', 'E'], 'dark_blue'],
+    //   [['S', 'T', 'N', 'Q'], 'orange'],
+    // ];
+    static grokGroups: {[key: string]: string[]} = {
+      'yellow': ['C', 'U'],
+      'red': ['G', 'P'],
+      'all_green': ['A', 'V', 'I', 'L', 'M', 'F', 'Y', 'W'],
+      'light_blue': ['R', 'H', 'K'],
+      'dark_blue': ['D', 'E'],
+      'orange': ['S', 'T', 'N', 'Q'],
+    }
+
+    static leskGroups: {[key: string]: string[]} = {
+      'orange': ['G', 'A', 'S', 'T'],
+      'all_green': ['C', 'V', 'I', 'L', 'P', 'F', 'Y', 'M', 'W'],
+      'magenta': ['N', 'Q', 'H'],
+      'red': ['D', 'E'],
+      'all_blue': ['K', 'R'],
+    }
+
+    static undefinedColor = 'rgb(100,100,100)';
+
+    static makePalette(dt: {[key: string]: string[]}, simplified = false, grouping = false) {
       const palette: { [key: string]: string } = {};
-      dt.forEach((cp) => {
-        const objList = cp[0];
-        const colour = cp[1];
-        objList.forEach((obj, ind) => {
-          palette[obj] = ChemPalette.colourPalette[colour][simplified ? 0 : ind];
+      const groups = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+      let currentGroup = 0;
+      for (const [color, monomers] of Object.entries(dt)) {
+        monomers.forEach((monomer, index) => {
+          palette[grouping ? groups[currentGroup] : monomer] = ChemPalette.colourPalette[color][simplified ? 0 : index];
         });
-      });
+        currentGroup++;
+      }
       return palette;
     }
 
-    static AANames:{ [Key: string]: string; } = {
+    static AANames: {[key: string]: string} = {
       'G': 'Glycine',
       'L': 'Leucine',
       'Y': 'Tyrosine',
@@ -141,7 +169,8 @@ export class ChemPalette {
       'M': 'Methionine',
       'T': 'Threonine',
     }
-    static AASmiles: { [Key: string]: string; } = {
+
+    static AASmiles: {[key: string]: string} = {
       'G': 'NCC(=O)O',
       'L': 'N[C@H](CC(C)C)C(=O)O',
       'Y': 'NC(CC1=CC=C(O)C=C1)C(=O)O',
@@ -153,7 +182,7 @@ export class ChemPalette {
       'F': 'NC(CC1=CC=CC=C1)C(=O)O',
       'A': 'N[C@H](C)C(=O)O',
       'K': 'NC(CCCCN)C(=O)O',
-      'R': 'N[C(=O)OH](CCCNC(N)=N)C(=O)O',
+      'R': 'N[C@H](CCCNC(=N)C)C(=O)O',
       'H': 'NC(CC1=CN=C[N]1)C(=O)O',
       'C': 'N[C@@H](CS)C(=O)O',
       'V': 'NC(C(C)C)C(=O)O',
@@ -163,7 +192,8 @@ export class ChemPalette {
       'M': 'NC(CCSC)C(=O)O',
       'T': 'NC(C(O)C)C(=O)O',
     }
-    static AASmilesTruncated: { [Key: string]: string; } = {
+
+    static AASmilesTruncated: {[key: string]: string} = {
       'G': '*C*',
       'L': 'CC(C)C[C@H](*)*',
       'Y': 'C1=CC(=CC=C1CC(*)*)O',
@@ -175,7 +205,7 @@ export class ChemPalette {
       'F': 'C1=CC=C(C=C1)CC(*)*',
       'A': 'C[C@H](*)*',
       'K': 'C(CCN)CC(*)*',
-      'R': '*[C(=O)OH](CCCNC(N)=N)*',
+      'R': '*[C@H](CCCNC(=N)C)*',
       'H': 'C1=C(NC=N1)CC(*)*',
       'C': 'C([C@@H](*)*)S',
       'V': 'CC(C)C(*)*',
@@ -186,7 +216,7 @@ export class ChemPalette {
       'T': 'CC(O)C(*)*',
     }
 
-    static AAFullNames: { [Key: string]: string; } = {
+    static AAFullNames: {[key: string]: string} = {
       'Ala': 'A',
       'Arg': 'R',
       'Asn': 'N',
@@ -207,16 +237,13 @@ export class ChemPalette {
       'Trp': 'W',
       'Tyr': 'Y',
       'Val': 'V',
-    };
+    }
 
-    static getDatagrok = ():{ [Key: string]: string; } => {
-      return ChemPalette.makePalette(ChemPalette.grokGroups);
-    };
+    static getDatagrok(grouping = false) {
+      return ChemPalette.makePalette(ChemPalette.grokGroups, false, grouping);
+    }
 
-    getLesk = () => ChemPalette.makePalette([
-      [['G', 'A', 'S', 'T'], 'orange'],
-      [['C', 'V', 'I', 'L', 'P', 'F', 'Y', 'M', 'W'], 'all_green'],
-      [['N', 'Q', 'H'], 'magenta'],
-      [['D', 'E'], 'red'],
-      [['K', 'R'], 'all_blue']])
+    static getLesk() {
+      return ChemPalette.makePalette(ChemPalette.leskGroups);
+    }
 }