@datagrok/peptides 0.4.3 → 0.5.6

package/src/viewers/spiral-plot.ts

@@ -0,0 +1,97 @@
+import * as DG from 'datagrok-api/dg';
+import {_toJson} from 'datagrok-api/src/utils';
+
+import {assert, argSort} from '@datagrok-libraries/utils/src/operations';
+import {Options} from '@datagrok-libraries/utils/src/type-declarations';
+
+const api = <any>window;
+
+/**
+ * Draws 2D scatter plot from 1D series.
+ *
+ * @export
+ * @class SpiralPlot
+ * @extends {DG.ScatterPlotViewer}
+ */
+export class SpiralPlot extends DG.ScatterPlotViewer {
+    static axesNames = ['~X', '~Y'];
+    static valuesKey = 'valuesColumnName';
+
+    /**
+     * Calculates coordinates of the projection into a spiral.
+     *
+     * @static
+     * @param {DG.DataFrame} t Source data frame.
+     * @param {Options} options Options to read values column name from. Must include {valuesColumnName: string}.
+     * @return {DG.DataFrame} Updated dataframe.
+     * @memberof SpiralPlot
+     */
+    static updateCoordinates(t: DG.DataFrame, options: Options): DG.DataFrame {
+      assert(options[SpiralPlot.valuesKey] != undefined);
+
+      const values = t.getCol(options[SpiralPlot.valuesKey]).getRawData() as Float32Array;
+      const columns = _calcSpiralProjection(values);
+      const cdf = DG.DataFrame.fromColumns(
+        Array.from(columns).map((v, i) => DG.Column.fromFloat32Array(SpiralPlot.axesNames[i], v)),
+      );
+      return _updateCoordinates(t, cdf);
+    }
+
+    /**
+     * Creates new SpiralPlot from a data frame with selected values column.
+     *
+     * @static
+     * @param {DG.DataFrame} t A data frame.
+     * @param {Options} options Controlling options.
+     * @return {SpiralPlot} The plot.
+     * @memberof SpiralPlot
+     */
+    static fromTable(t: DG.DataFrame, options: Options): SpiralPlot {
+      t = SpiralPlot.updateCoordinates(t, options);
+      [options.x, options.y] = SpiralPlot.axesNames;
+      options.color = options[SpiralPlot.valuesKey];
+      return new SpiralPlot(api.grok_Viewer_ScatterPlot(t.dart, _toJson(options)));
+    }
+}
+
+/**
+ * Calculates 2D projection of 1D series as a spiral.
+ *
+ * @param {(number[] | Float32Array)} values The series.
+ * @return {[Float32Array, Float32Array]} X and Y componenets of the projection.
+ */
+function _calcSpiralProjection(values: number[] | Float32Array): [Float32Array, Float32Array] {
+  const nItems = values.length;
+  const order = argSort(Array.from(values), true);
+  const maxV = values[order[0]];
+  const X = new Float32Array(nItems).fill(0);
+  const Y = new Float32Array(nItems).fill(0);
+
+  for (const i of order) {
+    const v = maxV - values[i];
+    X[i] = v * Math.cos(Math.PI * v) - Math.random() * 1.5 + 0.75;
+    Y[i] = v * Math.sin(Math.PI * v) - Math.random() * 1.5 + 0.75;
+  }
+  return [X, Y];
+}
+
+/**
+ * Adds new columns from one data frame into another one.
+ *
+ * @param {DG.DataFrame} table Destination data frame.
+ * @param {DG.DataFrame} coords Source data frame.
+ * @return {DG.DataFrame} Updated data frame.
+ */
+function _updateCoordinates(table: DG.DataFrame, coords: DG.DataFrame): DG.DataFrame {
+  const coordsColNames: string[] = coords.columns.names();
+  const tableColNames: string[] = table.columns.names();
+  const restColNames = tableColNames.filter((v: string) => !coordsColNames.includes(v));
+
+  if (tableColNames.length == restColNames.length) {
+    for (const col of coords.columns) {
+      table.columns.add(col);
+    }
+    return table;
+  }
+  return table.join(coords, coordsColNames, coordsColNames, restColNames, [], 'right', false);
+}

package/src/viewers/stacked-barchart-viewer.ts

@@ -5,6 +5,8 @@ import {ChemPalette} from '../utils/chem-palette';
 import * as rxjs from 'rxjs';
 const cp = new ChemPalette('grok');
 
+import {CorrelationAnalysisVisualizer} from '../utils/correlation-analysis';
+
 //TODO: the function should not accept promise. Await the parameters where it is used
 export function addViewerToHeader(grid: DG.Grid, viewer: Promise<DG.Widget>) {
   viewer.then((viewer) => {
@@ -42,7 +44,10 @@ export function addViewerToHeader(grid: DG.Grid, viewer: Promise<DG.Widget>) {
             return true;
           } else {
             if (barchart.highlighted) {
-              ui.tooltip.show(ui.divV([ui.divText(barchart.highlighted.aaName)]), x, y);
+              let elements: HTMLElement[] = [];
+              elements = elements.concat([ui.divText(barchart.highlighted.aaName)]);
+              elements = elements.concat(barchart.getTooltipElements(cell.tableColumn.name, barchart.aminoColumnNames));
+              ui.tooltip.show(ui.divV(elements), x, y);
             }
             return true;
           }
@@ -54,6 +59,7 @@ export function addViewerToHeader(grid: DG.Grid, viewer: Promise<DG.Widget>) {
       args.g.beginPath();
       args.g.rect(args.bounds.x, args.bounds.y, args.bounds.width, args.bounds.height);
       args.g.clip();
+
       if (args.cell.isColHeader && barchart.aminoColumnNames.includes(args.cell.gridColumn.name)) {
         barchart.renderBarToCanvas(
           args.g,
@@ -95,11 +101,13 @@ export class StackedBarChart extends DG.JsViewer {
     private barStats: {[Key: string]: {'name': string, 'count': number, 'selectedCount': number}[]} = {};
     tableCanvas: HTMLCanvasElement | undefined;
     private registered: {[Key: string]: DG.GridCell} = {};
+    protected corrViz: CorrelationAnalysisVisualizer | undefined;
 
     constructor() {
       super();
       this.dataEmptyAA = this.string('dataEmptyAA', '-');
       this.initialized = false;
+      this.corrViz = undefined;
     }
 
     init() {
@@ -249,9 +257,17 @@ export class StackedBarChart extends DG.JsViewer {
         });
       }
       this.max = df.filter.trueCount;
+      this.corrViz = new CorrelationAnalysisVisualizer(df, this.aminoColumnNames);
     }
 
-    renderBarToCanvas(g: CanvasRenderingContext2D, cell: DG.GridCell, x: number, y: number, w: number, h: number) {
+    renderBarToCanvas(
+      g: CanvasRenderingContext2D,
+      cell: DG.GridCell,
+      x: number,
+      y: number,
+      w: number,
+      h: number,
+    ) {
       const margin = 0.2;
       const innerMargin = 0.02;
       const selectLineRatio = 0.1;
@@ -268,6 +284,14 @@ export class StackedBarChart extends DG.JsViewer {
       g.fillText(name,
         x + (w - colNameSize)/2,
         y + h + h * margin / 4);
+      this.higlightCorrelatedPositionHeader(
+        g,
+        name,
+        x + (w - colNameSize)/2,
+        y + h + h * margin / 4,
+        colNameSize,
+        margin,
+      );
       const barData = this.barStats[name]? this.barStats[name]: this.barStats[name];
       let sum = 0;
       barData.forEach((obj) => {
@@ -401,4 +425,59 @@ export class StackedBarChart extends DG.JsViewer {
         return this.highlighted!['aaName'] === (this.dataFrame.getCol(this.highlighted!['colName']).get(i));
       }, event);
     }
+
+    /**
+     * Highlights column header if the corresponding position is correlated with any other.
+     *
+     * @protected
+     * @param {CanvasRenderingContext2D} g A context to draw on.
+     * @param {string} name The name of the column.
+     * @param {number} x X coordinate to draw at.
+     * @param {number} y Y coordinate to draw at.
+     * @param {number} width The width to take to draw the highlighting.
+     * @param {number} margin The margin to take into account.
+     * @memberof StackedBarChart
+     */
+    protected higlightCorrelatedPositionHeader(
+      g: CanvasRenderingContext2D,
+      name: string,
+      x: number,
+      y: number,
+      width: number,
+      margin: number,
+    ) {
+      if (this.corrViz?.isPositionCorrelating(name)) {
+        const height = width/name.length; //TODO: measure height more precisely.s
+        g.fillRect(x, y + height + margin * 20, width, 2);
+      }
+    }
+
+    /**
+     * Formats HTML elements with the correlation analysis to add to the tooltip.
+     *
+     * @param {string} name A column name to consider.
+     * @param {string[]} positions Optional list of columns containing positions.
+     * @return {HTMLElement[]} The list of elements. Is empty if the position is not correlating.
+     * @memberof StackedBarChart
+     */
+    getTooltipElements(name: string, positions: string[]): HTMLElement[] {
+      const pos1 = parseInt(name);
+
+      if (this.corrViz?.isPositionCorrelating(name)) {
+        const padLen = Math.round(Math.log10(positions.length))+1;
+
+        const elements: HTMLElement[] = [];
+        elements.push(ui.divText(name, {style: {fontWeight: 'bold', fontSize: 10}}));
+        elements.push(ui.divText('Found correlations with:\n'));
+
+        for (const [pos2, weight] of Object.entries(this.corrViz.path[pos1])) {
+          const w = (weight as number);
+          const style = {style: {color: w > 0 ? 'red' : 'blue'}};
+          elements.push(ui.divText(`${pos2.padStart(padLen, '0')}: R = ${w.toFixed(2)}\n`, style));
+        }
+
+        return elements;
+      }
+      return [];
+    }
 }

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,

package/src/widgets/manual-alignment.ts

@@ -5,6 +5,13 @@ import $ from 'cash-dom';
 import {model} from '../viewers/model';
 import {splitAlignedPeptides} from '../utils/split-aligned';
 
+/**
+ * Manual sequence alignment widget.
+ *
+ * @param {DG.Column} alignedSequenceCol Aligned sequence column.
+ * @param {DG.DataFrame} currentDf Working table.
+ * @returns {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';

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