@datagrok/peptides 0.4.2 → 0.6.1

package/src/viewers/subst-viewer.ts

@@ -0,0 +1,276 @@
+// import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import $ from 'cash-dom';
+
+// import {aarGroups} from '../describe';
+import {setAARRenderer} from '../utils/cell-renderer';
+
+export class SubstViewer extends DG.JsViewer {
+  viewerGrid: DG.Grid | null;
+  maxSubstitutions: number;
+  activityLimit: number;
+  activityColumnName: string;
+  casesGrid: DG.Grid | null;
+
+  constructor() {
+    super();
+
+    this.activityColumnName = this.string('activityColumnName');
+
+    this.maxSubstitutions = this.int('maxSubstitutions', 1);
+    this.activityLimit = this.float('activityLimit', 2);
+
+    this.viewerGrid = null;
+    this.casesGrid = null;
+  }
+
+  onPropertyChanged(property: DG.Property): void {
+    this.calcSubstitutions();
+  }
+
+  calcSubstitutions() {
+    const aarColName = 'AAR';
+    const df: DG.DataFrame = this.dataFrame!;
+    const col: DG.Column = df.columns.bySemType('alignedSequence');
+    // let values: number[] = df.columns.byName('IC50').toList();
+    const values = df.getCol(this.activityColumnName).toList().map((x) => -Math.log10(x));
+    // values = values;
+    const splitedMatrix = this.split(col);
+
+    const tableValues: { [aar: string]: number[] } = {};
+    const tableTooltips: { [aar: string]: {[index: string]: string}[][] } = {};
+    const tableCases: { [aar: string]: number[][][] } = {};
+
+    const nRows = splitedMatrix.length;
+    const nCols = splitedMatrix[0].length;
+    const nColsArray = Array(nCols);
+
+    for (let i = 0; i < nRows - 1; i++) {
+      for (let j = i + 1; j < nRows; j++) {
+        let substCounter = 0;
+        const subst1: { [pos: number]: [string, {[index: string]: string}] } = {};
+        const subst2: { [pos: number]: [string, {[index: string]: string}] } = {};
+        const delta = values[i] - values[j];
+
+        for (let k = 0; k < nCols; k++) {
+          const smik = splitedMatrix[i][k];
+          const smjk = splitedMatrix[j][k];
+          if (smik != smjk && Math.abs(delta) >= this.activityLimit) {
+            const vi = values[i].toFixed(2);
+            const vj = values[j].toFixed(2);
+            substCounter++;
+            subst1[k] = [
+              smik,
+              {key: `${smik === '-' ? 'Empty' : smik} → ${smjk === '-' ? 'Empty' : smjk}`, value: `${vi} → ${vj}`},
+            ];
+            subst2[k] = [
+              smjk,
+              {key: `${smjk === '-' ? 'Empty' : smjk} → ${smik === '-' ? 'Empty' : smik}`, value: `${vj} → ${vi}`},
+            ];
+          }
+        }
+
+        if (substCounter <= this.maxSubstitutions && substCounter > 0) {
+          Object.keys(subst1).forEach((pos) => {
+            const posInt = parseInt(pos);
+            const aar = subst1[posInt][0];
+            if (!Object.keys(tableValues).includes(aar)) {
+              tableValues[aar] = Array.apply(null, nColsArray).map(function() {
+                return DG.INT_NULL;
+              });
+              tableTooltips[aar] = Array.apply(null, nColsArray).map(function() {
+                return [];
+              });
+              tableCases[aar] = Array.apply(null, nColsArray).map(function() {
+                return [];
+              });
+            }
+
+            tableValues[aar][posInt] = tableValues[aar][posInt] === DG.INT_NULL ? 1 : tableValues[aar][posInt] + 1;
+            tableTooltips[aar][posInt] = !tableTooltips[aar][posInt].length ?
+              [{key: 'Substitution', value: 'Values'}] : tableTooltips[aar][posInt];
+            tableTooltips[aar][posInt].push(subst1[posInt][1]);
+            tableCases[aar][posInt].push([i, j, delta]);
+          });
+          Object.keys(subst2).forEach((pos) => {
+            const posInt = parseInt(pos);
+            const aar = subst2[posInt][0];
+            if (!Object.keys(tableValues).includes(aar)) {
+              tableValues[aar] = Array.apply(null, nColsArray).map(function() {
+                return DG.INT_NULL;
+              });
+              tableTooltips[aar] = Array.apply(null, nColsArray).map(function() {
+                return [];
+              });
+              tableCases[aar] = Array.apply(null, nColsArray).map(function() {
+                return [];
+              });
+            }
+
+            tableValues[aar][posInt] = tableValues[aar][posInt] === DG.INT_NULL ? 1 : tableValues[aar][posInt] + 1;
+            // tableValues[aar][posInt]++;
+            tableTooltips[aar][posInt] = !tableTooltips[aar][posInt].length ?
+              [{key: 'Substitution', value: 'Values'}] : tableTooltips[aar][posInt];
+            tableTooltips[aar][posInt].push(subst2[posInt][1]);
+            tableCases[aar][posInt].push([j, i, -delta]);
+          });
+        }
+      }
+    }
+
+    const tableValuesKeys = Object.keys(tableValues);
+    const dfLength = tableValuesKeys.length;
+    const cols = [...nColsArray.keys()].map((v) => DG.Column.int(v.toString(), dfLength));
+    const aarCol = DG.Column.string(aarColName, dfLength);
+    cols.splice(0, 1, aarCol);
+    const table = DG.DataFrame.fromColumns(cols);
+
+    for (let i = 0; i < dfLength; i++) {
+      const aar = tableValuesKeys[i];
+      tableValues[aar].splice(0, 1);
+      table.rows.setValues(i, [aar, ...tableValues[aar]]);
+    }
+
+    // let groupMapping: { [key: string]: string } = {};
+
+    //TODO: enable grouping
+    // Object.keys(aarGroups).forEach((value) => groupMapping[value] = value);
+
+    this.viewerGrid = table.plot.grid();
+
+    setAARRenderer(aarCol, this.viewerGrid);
+
+    this.viewerGrid.onCellTooltip(
+      (gCell, x, y) => {
+        if (gCell.cell.value !== DG.INT_NULL && gCell.tableColumn !== null && gCell.tableRowIndex !== null) {
+          const colName = gCell.tableColumn.name;
+          if (colName !== aarColName) {
+            const aar = this.viewerGrid!.table.get(aarColName, gCell.tableRowIndex);
+            const pos = parseInt(colName);
+            const tooltipText = tableTooltips[aar][pos].length ?
+              DG.HtmlTable.create(
+                tableTooltips[aar][pos], (item: {[index: string]: string}, idx: number) => [item.key, item.value],
+              ).root : ui.divText('No substitutions');
+            ui.tooltip.show(tooltipText, x, y);
+          }
+        }
+        return true;
+      },
+    );
+
+    for (const col of table.columns.names()) {
+      this.viewerGrid.col(col)!.width = this.viewerGrid.props.rowHeight;
+    }
+
+    this.viewerGrid.onCellRender.subscribe((args) => {
+      if (args.cell.isRowHeader && args.cell.gridColumn.visible) {
+        args.cell.gridColumn.visible = false;
+        args.preventDefault();
+      }
+    });
+
+    this.viewerGrid.props.allowEdit = false;
+
+    table.onCurrentCellChanged.subscribe((_) => {
+      if (table.currentCol !== null && table.currentCol.name !== aarColName && table.currentCell.value !== null) {
+        const aar = table.get(aarColName, table.currentRowIdx);
+        const pos = parseInt(table.currentCol.name);
+        const currentCase = tableCases[aar][pos];
+        const tempDfLength = currentCase.length;
+        const initCol = DG.Column.string('Initial', tempDfLength);
+        const subsCol = DG.Column.string('Substituted', tempDfLength);
+
+        const tempDf = DG.DataFrame.fromColumns([
+          initCol,
+          subsCol,
+          DG.Column.float('Difference', tempDfLength),
+        ]);
+
+        for (let i = 0; i < tempDfLength; i++) {
+          const row = currentCase[i];
+          tempDf.rows.setValues(i, [col.get(row[0]), col.get(row[1]), row[2]]);
+        }
+
+        initCol.semType = 'alignedSequence';
+        initCol.setTag('isAnalysisApplicable', 'false');
+        subsCol.semType = 'alignedSequence';
+        subsCol.setTag('isAnalysisApplicable', 'false');
+
+        this.casesGrid = tempDf.plot.grid();
+        this.casesGrid.props.allowEdit = false;
+      } else {
+        this.casesGrid = null;
+      }
+      this.render();
+    });
+
+    this.render();
+  }
+
+  render() {
+    $(this.root).empty();
+    this.root.appendChild(this.casesGrid === null ?
+      this.viewerGrid!.root : ui.splitH([this.viewerGrid!.root, this.casesGrid.root]),
+    );
+  }
+
+  split(peptideColumn: DG.Column, filter: boolean = true): string[][] {
+    const splitPeptidesArray: string[][] = [];
+    let currentSplitPeptide: string[];
+    let modeMonomerCount = 0;
+    let currentLength;
+    const colLength = peptideColumn.length;
+
+    // splitting data
+    const monomerLengths: { [index: string]: number } = {};
+    for (let i = 0; i < colLength; i++) {
+      currentSplitPeptide = peptideColumn.get(i).split('-').map((value: string) => value ? value : '-');
+      splitPeptidesArray.push(currentSplitPeptide);
+      currentLength = currentSplitPeptide.length;
+      monomerLengths[currentLength + ''] =
+        monomerLengths[currentLength + ''] ? monomerLengths[currentLength + ''] + 1 : 1;
+    }
+    //@ts-ignore: what I do here is converting string to number the most effective way I could find. parseInt is slow
+    modeMonomerCount = 1 * Object.keys(monomerLengths).reduce((a, b) => monomerLengths[a] > monomerLengths[b] ? a : b);
+
+    // making sure all of the sequences are of the same size
+    // and marking invalid sequences
+    let nTerminal: string;
+    const invalidIndexes: number[] = [];
+    let splitColumns: string[][] = Array.from({length: modeMonomerCount}, (_) => []);
+    modeMonomerCount--; // minus N-terminal
+    for (let i = 0; i < colLength; i++) {
+      currentSplitPeptide = splitPeptidesArray[i];
+      nTerminal = currentSplitPeptide.pop()!; // it is guaranteed that there will be at least one element
+      currentLength = currentSplitPeptide.length;
+      if (currentLength !== modeMonomerCount) {
+        invalidIndexes.push(i);
+      }
+      for (let j = 0; j < modeMonomerCount; j++) {
+        splitColumns[j].push(j < currentLength ? currentSplitPeptide[j] : '-');
+      }
+      splitColumns[modeMonomerCount].push(nTerminal);
+    }
+    modeMonomerCount--; // minus C-terminal
+
+    //create column names list
+    const columnNames = Array.from({length: modeMonomerCount}, (_, index) => `${index + 1 < 10 ? 0 : ''}${index + 1}`);
+    columnNames.splice(0, 0, 'N-terminal');
+    columnNames.push('C-terminal');
+
+    // filter out the columns with the same values
+    if (filter) {
+      splitColumns = splitColumns.filter((positionArray, index) => {
+        const isRetained = new Set(positionArray).size > 1;
+        if (!isRetained) {
+          columnNames.splice(index, 1);
+        }
+        return isRetained;
+      });
+    }
+
+    return splitPeptidesArray;
+  }
+}

package/src/widgets/analyze-peptides.ts

@@ -3,6 +3,16 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import {Peptides} from '../peptides';
 
+/**
+ * Peptide analysis widget.
+ *
+ * @export
+ * @param {DG.Column} col Aligned sequence column.
+ * @param {DG.TableView} view Working view.
+ * @param {DG.Grid} tableGrid Working table grid.
+ * @param {DG.DataFrame} currentDf Working table.
+ * @return {Promise<DG.Widget>} Widget containing peptide analysis.
+ */
 export async function analyzePeptidesWidget(
   col: DG.Column, view: DG.TableView, tableGrid: DG.Grid, currentDf: DG.DataFrame,
 ): Promise<DG.Widget> {
@@ -16,7 +26,7 @@ export async function analyzePeptidesWidget(
   let hist: DG.Viewer;
 
   const activityScalingMethod = ui.choiceInput(
-    'Activity scaling',
+    'Scaling',
     'none',
     ['none', 'lg', '-lg'],
     async (currentMethod: string) => {
@@ -54,7 +64,7 @@ export async function analyzePeptidesWidget(
     activityScalingMethod.fireChanged();
   };
   const activityColumnChoice = ui.columnInput(
-    'Activity column',
+    'Activity',
     currentDf,
     defaultColumn,
     activityScalingMethodState,
@@ -66,8 +76,8 @@ export async function analyzePeptidesWidget(
     if (activityColumnChoice.value.type === DG.TYPE.FLOAT) {
       const progress = DG.TaskBarProgressIndicator.create('Loading SAR...');
       const options: {[key: string]: string} = {
-        'activityColumnColumnName': activityColumnChoice.value.name,
-        'activityScalingMethod': activityScalingMethod.value,
+        'activityColumnName': activityColumnChoice.value.name,
+        'scaling': activityScalingMethod.value,
       };
 
       const peptides = new Peptides();

package/src/widgets/manual-alignment.ts

@@ -4,11 +4,18 @@ import * as DG from 'datagrok-api/dg';
 import $ from 'cash-dom';
 import {model} from '../viewers/model';
 import {splitAlignedPeptides} from '../utils/split-aligned';
+import '../styles.css';
 
+/**
+ * Manual sequence alignment widget.
+ *
+ * @param {DG.Column} alignedSequenceCol Aligned sequence column.
+ * @param {DG.DataFrame} currentDf Working table.
+ * @return {DG.Widget} Widget for manual sequence alignment.
+ */
 export function manualAlignmentWidget(alignedSequenceCol: DG.Column, currentDf: DG.DataFrame) {
   const sequenceInput = ui.textInput('', alignedSequenceCol.get(currentDf.currentRowIdx));
-  (sequenceInput.input as HTMLElement).style.height = '50px';
-  (sequenceInput.input as HTMLElement).style.overflow = 'hidden';
+  $(sequenceInput.root).addClass('pep-textinput');
 
   const applyChangesBtn = ui.button('Apply', async () => {
     const newSequence = sequenceInput.value;
@@ -30,7 +37,7 @@ export function manualAlignmentWidget(alignedSequenceCol: DG.Column, currentDf:
     () => sequenceInput.value = alignedSequenceCol.get(currentDf.currentRowIdx),
     'Reset',
   );
-  $(resetBtn).addClass('dt-snippet-editor-icon dt-reset-icon');
+  $(resetBtn).addClass('pep-snippet-editor-icon pep-reset-icon');
 
-  return new DG.Widget(ui.divV([resetBtn, sequenceInput.root, applyChangesBtn], 'dt-textarea-box'));
+  return new DG.Widget(ui.divV([resetBtn, sequenceInput.root, applyChangesBtn], 'pep-textarea-box'));
 }

package/src/widgets/peptide-molecule.ts

@@ -3,6 +3,13 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import {ChemPalette} from '../utils/chem-palette';
 
+/**
+ * 3D representation widget of peptide molecule.
+ *
+ * @export
+ * @param {string} pep Peptide string.
+ * @return {Promise<DG.Widget>} Widget.
+ */
 export async function peptideMoleculeWidget(pep: string): Promise<DG.Widget> {
   const pi = DG.TaskBarProgressIndicator.create('Creating NGL view');
 

package/webpack.config.js

@@ -12,6 +12,10 @@ module.exports = {
         use: 'ts-loader',
         exclude: /node_modules/,
       },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
     ],
   },
   resolve: {