@datagrok/peptides 0.4.3 → 0.7.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

@@ -2,7 +2,18 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import {Peptides} from '../peptides';
+import '../styles.css';
 
+/**
+ * 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> {
@@ -11,12 +22,12 @@ export async function analyzePeptidesWidget(
     tempCol = column.type === DG.TYPE.FLOAT ? column : null;
   }
   const defaultColumn: DG.Column = currentDf.col('activity') || currentDf.col('IC50') || tempCol;
-  const histogramHost = ui.div([]);
+  const histogramHost = ui.div([], {id: 'pep-hist-host'});
 
   let hist: DG.Viewer;
 
   const activityScalingMethod = ui.choiceInput(
-    'Activity scaling',
+    'Scaling',
     'none',
     ['none', 'lg', '-lg'],
     async (currentMethod: string) => {
@@ -41,6 +52,7 @@ export async function analyzePeptidesWidget(
         showXAxis: true,
         showColumnSelector: false,
         showRangeSlider: false,
+        showBinSelector: false,
       // bins: b,
       });
       histogramHost.lastChild?.remove();
@@ -54,7 +66,7 @@ export async function analyzePeptidesWidget(
     activityScalingMethod.fireChanged();
   };
   const activityColumnChoice = ui.columnInput(
-    'Activity column',
+    'Activity',
     currentDf,
     defaultColumn,
     activityScalingMethodState,
@@ -66,8 +78,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();
@@ -78,10 +90,18 @@ export async function analyzePeptidesWidget(
       grok.shell.error('The activity column must be of floating point number type!');
     }
   });
+  startBtn.style.alignSelf = 'center';
 
   const viewer = await currentDf.plot.fromType('peptide-logo-viewer');
 
   return new DG.Widget(
-    ui.divV([viewer.root, ui.inputs([activityColumnChoice, activityScalingMethod]), startBtn, histogramHost]),
+    ui.divV([
+      viewer.root,
+      ui.splitH([
+        ui.splitV([ui.inputs([activityColumnChoice, activityScalingMethod]), startBtn]),
+        histogramHost,
+      ], {style: {height: 'unset'}}),
+      // histogramHost,
+    ]),
   );
 }

package/src/widgets/manual-alignment.ts

@@ -2,13 +2,20 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
-import {model} from '../viewers/model';
+import {Peptides} from '../peptides';
 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;
@@ -22,7 +29,8 @@ export function manualAlignmentWidget(alignedSequenceCol: DG.Column, currentDf:
       }
     }
 
-    await model.updateDefault();
+    // await model.updateDefault();
+    await Peptides.recalculate();
   });
 
   const resetBtn = ui.button(
@@ -30,7 +38,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/src/workers/dimensionality-reducer.ts

@@ -1,4 +1,4 @@
-import {DimensionalityReducer} from '@datagrok-libraries/utils/src/reduce-dimensionality';
+import {DimensionalityReducer, KnownMethods} from '@datagrok-libraries/ml/src/reduce-dimensionality';
 import {Coordinates} from '@datagrok-libraries/utils/src/type-declarations';
 
 /**
@@ -10,7 +10,7 @@ import {Coordinates} from '@datagrok-libraries/utils/src/type-declarations';
  * @param {number} cyclesCount Number of cycles to repeat.
  * @return {Coordinates} Embedding.
  */
-function onMessage(columnData: [], method: string, measure: string, cyclesCount: number): Coordinates {
+function onMessage(columnData: [], method: KnownMethods, measure: string, cyclesCount: number): Coordinates {
   const reducer = new DimensionalityReducer(
     columnData,
     method,

package/webpack.config.js

@@ -12,10 +12,14 @@ module.exports = {
         use: 'ts-loader',
         exclude: /node_modules/,
       },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
     ],
   },
   resolve: {
-    extensions: ['.tsx', '.js', '.ts'],
+    extensions: ['.tsx', '.ts', '.js'],
   },
   devtool: 'inline-source-map',
   externals: {

package/src/utils/correlation-analysis.ts

@@ -1,123 +0,0 @@
-/* Do not change these import lines. Datagrok will import API library in exactly the same manner */
-import * as DG from 'datagrok-api/dg';
-
-import {AlignedSequenceEncoder} from '@datagrok-libraries/utils/src/sequence-encoder';
-import {assert, transposeMatrix} from '@datagrok-libraries/utils/src/operations';
-import {Vector, Matrix} from '@datagrok-libraries/utils/src/type-declarations';
-import {kendallsTau} from '@datagrok-libraries/statistics/src/correlation-coefficient';
-
-/**
- * Converts a Matrix into a DataFrame.
- *
- * @export
- * @param {Matrix} matrix A matrix.
- * @return {DG.DataFrame} The data frame.
- */
-export function matrix2DataFrame(matrix: Matrix): DG.DataFrame {
-  return DG.DataFrame.fromColumns(matrix.map((v, i) => DG.Column.fromFloat32Array(`${i+1}`, v)));
-}
-
-/**
- * Encodes amino acid sequences into a numeric representation.
- *
- * @param {DG.Column} col A column containing the sequences.
- * @return {DG.DataFrame} The resulting data frame.
- */
-function calcPositions(col: DG.Column): DG.DataFrame {
-  const sequences = col.toList().map((v, _) => AlignedSequenceEncoder.clean(v));
-  const enc = new AlignedSequenceEncoder();
-  const encSeqs = sequences.map((v) => Vector.from(enc.encode(v)));
-  const positions = transposeMatrix(encSeqs);
-  return matrix2DataFrame(positions);
-}
-
-/**
- * Unfolds a data frame into <category>-<value> format.
- *
- * @param {DG.DataFrame} df A data frame to unfold.
- * @return {DG.DataFrame} The resulting data frame.
- */
-function melt(df: DG.DataFrame): DG.DataFrame {
-  let keys: string[] = [];
-  const values: Float32Array = new Float32Array(df.columns.length*df.rowCount);
-  let i = 0;
-
-  for (const c of df.columns.toList()) {
-    keys = keys.concat(Array<string>(c.length).fill(c.name));
-    values.set(c.getRawData(), i);
-    i += df.rowCount;
-  }
-  assert(keys.length == values.length);
-  return DG.DataFrame.fromColumns([DG.Column.fromStrings('keys', keys), DG.Column.fromFloat32Array('values', values)]);
-}
-
-/**
- * Calculates Spearman's rho rank correlation coefficient.
- *
- * @param {DG.DataFrame} df A data frame to process.
- * @return {DG.DataFrame} The correlation matrix.
- */
-function calcSpearmanRhoMatrix(df: DG.DataFrame): DG.DataFrame {
-  const nItems = df.columns.length;
-  const rho = new Array(nItems).fill(0).map((_) => new Float32Array(nItems).fill(0));
-
-  for (let i = 0; i < nItems; ++i) {
-    for (let j = i+1; j < nItems; ++j) {
-      rho[i][j] = df.columns.byIndex(i).stats.spearmanCorr(df.columns.byIndex(j));
-      rho[j][i] = rho[i][j];
-    }
-  }
-  return matrix2DataFrame(rho);
-}
-
-/**
- * Calculates Kendall's tau rank correlation coefficient.
- *
- * @param {DG.DataFrame} df A data frame to process.
- * @param {number} [alpha=0.05] The significance threshold.
- * @return {DG.DataFrame} The correlation matrix.
- */
-function calcKendallTauMatrix(df: DG.DataFrame, alpha: number = 0.05): DG.DataFrame {
-  const nItems = df.columns.length;
-  const tau = new Array(nItems).fill(0).map((_) => new Float32Array(nItems).fill(0));
-
-  for (let i = 0; i < nItems; ++i) {
-    for (let j = i+1; j < nItems; ++j) {
-      const res = kendallsTau(df.columns.byIndex(i).getRawData(), df.columns.byIndex(j).getRawData());
-      tau[i][j] = res.prob < alpha ? res.test : 0;
-      tau[j][i] = tau[i][j];
-    }
-  }
-  return matrix2DataFrame(tau);
-}
-
-/**
- * Creates acorrelation plot and a box plot to perform correlation analysis.
- *
- * @export
- * @param {DG.Column} sequencesColumn A column containing amino acid sequences.
- * @return {[DG.Viewer, DG.Viewer]} These two plots.
- */
-export function correlationAnalysisPlots(sequencesColumn: DG.Column): [DG.Viewer, DG.Viewer] {
-  const posDF = calcPositions(sequencesColumn);
-  const cpviewer = DG.Viewer.fromType(
-    DG.VIEWER.CORR_PLOT,
-    posDF,
-    {
-      'xColumnNames': posDF.columns.names(),
-      'yColumnNames': posDF.columns.names(),
-      'correlationType': 'Spearman',
-    });
-
-  const rhoDF = calcKendallTauMatrix(posDF);
-  const meltDF = melt(rhoDF);
-
-  const bpviewer = DG.Viewer.fromType(
-    DG.VIEWER.BOX_PLOT,
-    meltDF, {
-      'categoryColumnName': 'keys',
-      'valueColumnName': 'values',
-      'statistics': ['min', 'max', 'avg', 'med'],
-    });
-  return [cpviewer, bpviewer];
-}