@datagrok/peptides 0.4.2 → 0.6.1

package/src/viewers/sar-viewer.ts

@@ -6,11 +6,18 @@ import $ from 'cash-dom';
 
 import {model} from './model';
 
+/**
+ * Structure-activity relationship viewer.
+ *
+ * @export
+ * @class SARViewer
+ * @extends {DG.JsViewer}
+ */
 export class SARViewer extends DG.JsViewer {
   protected viewerGrid: DG.Grid | null;
   protected sourceGrid: DG.Grid | null;
-  protected activityColumnColumnName: string;
-  protected activityScalingMethod: string;
+  protected activityColumnName: string;
+  protected scaling: string;
   protected bidirectionalAnalysis: boolean;
   protected filterMode: boolean;
   protected statsDf: DG.DataFrame | null;
@@ -22,10 +29,15 @@ export class SARViewer extends DG.JsViewer {
   protected currentBitset: DG.BitSet | null;
   grouping: boolean;
   groupMapping: {[key: string]: string} | null;
-  // private df: DG.DataFrame | null;
   // protected pValueThreshold: number;
   // protected amountOfBestAARs: number;
   // duplicatesHandingMethod: string;
+
+  /**
+   * Creates an instance of SARViewer.
+   *
+   * @memberof SARViewer
+   */
   constructor() {
     super();
 
@@ -39,9 +51,9 @@ export class SARViewer extends DG.JsViewer {
     this.viewGridInitialized = false;
     this.currentBitset = null;
 
-    //TODO: find a way to restrict activityColumnColumnName to accept only numerical columns (double even better)
-    this.activityColumnColumnName = this.string('activityColumnColumnName');
-    this.activityScalingMethod = this.string('activityScalingMethod', 'none', {choices: ['none', 'lg', '-lg']});
+    //TODO: find a way to restrict activityColumnName to accept only numerical columns (double even better)
+    this.activityColumnName = this.string('activityColumnName');
+    this.scaling = this.string('scaling', 'none', {choices: ['none', 'lg', '-lg']});
     this.filterMode = this.bool('filterMode', false);
     this.bidirectionalAnalysis = this.bool('bidirectionalAnalysis', false);
     this.grouping = this.bool('grouping', false);
@@ -52,6 +64,11 @@ export class SARViewer extends DG.JsViewer {
     this.sourceGrid = null;
   }
 
+  /**
+   * Initializes SARViewer.
+   *
+   * @memberof SARViewer
+   */
   init() {
     this._initialBitset = this.dataFrame!.filter.clone();
     this.initialized = true;
@@ -64,16 +81,32 @@ export class SARViewer extends DG.JsViewer {
     this.subs.push(model.groupMapping$.subscribe((data) => this.groupMapping = data));
   }
 
+  /**
+   * Function that is executed when the table is attached.
+   *
+   * @memberof SARViewer
+   */
   onTableAttached() {
     this.sourceGrid = this.view.grid;
     this.sourceGrid?.dataFrame?.setTag('dataType', 'peptides');
     this.render();
   }
 
+  /**
+   * Function that is executed when the viewer is detached from the table.
+   *
+   * @memberof SARViewer
+   */
   detach() {
     this.subs.forEach((sub) => sub.unsubscribe());
   }
 
+  /**
+   * Function that is executed when the property is changed.
+   *
+   * @param {DG.Property} property New property.
+   * @memberof SARViewer
+   */
   onPropertyChanged(property: DG.Property) {
     super.onPropertyChanged(property);
 
@@ -82,14 +115,14 @@ export class SARViewer extends DG.JsViewer {
       return;
     }
 
-    if (property.name === 'activityScalingMethod' && typeof this.dataFrame !== 'undefined') {
+    if (property.name === 'scaling' && typeof this.dataFrame !== 'undefined') {
       const minActivity = DG.Stats.fromColumn(
-        this.dataFrame!.col(this.activityColumnColumnName)!,
+        this.dataFrame!.col(this.activityColumnName)!,
         this._initialBitset,
       ).min;
-      if (minActivity && minActivity <= 0 && this.activityScalingMethod !== 'none') {
-        grok.shell.warning(`Could not apply ${this.activityScalingMethod}: ` +
-          `activity column ${this.activityColumnColumnName} contains zero or negative values, falling back to 'none'.`);
+      if (minActivity && minActivity <= 0 && this.scaling !== 'none') {
+        grok.shell.warning(`Could not apply ${this.scaling}: ` +
+          `activity column ${this.activityColumnName} contains zero or negative values, falling back to 'none'.`);
         property.set(this, 'none');
         return;
       }
@@ -98,6 +131,12 @@ export class SARViewer extends DG.JsViewer {
     this.render();
   }
 
+  /**
+   * Filtering/selecting sequences with the specified amino acid residue at specified position.
+   *
+   * @private
+   * @memberof SARViewer
+   */
   private applyBitset() {
     if (
       this.dataFrame &&
@@ -123,21 +162,9 @@ export class SARViewer extends DG.JsViewer {
       splitCol!.init((i) => isChosen(i) ? aarLabel : otherLabel);
 
       //TODO: use column.compact
-
-      // if (this.filterMode) {
-      //   this.dataFrame.selection.setAll(false, false);
-      //   this.dataFrame.filter.init(isChosen).and(this._initialBitset!, false);
-      // } else {
-      //   this.dataFrame.filter.copyFrom(this._initialBitset!);
-      //   this.dataFrame.selection.init(isChosen).and(this._initialBitset!, false);
-      // }
       this.currentBitset = DG.BitSet.create(this.dataFrame.rowCount, isChosen).and(this._initialBitset!);
-      // (this.filterMode ? this.dataFrame.selection.setAll(false) :
-      // this.dataFrame.filter.copyFrom(this._initialBitset!)).fireChanged();
       this.sourceFilteringFunc();
 
-
-      // df.getCol(splitColName).setCategoryOrder([otherLabel, aarLabel]);
       const colorMap: {[index: string]: string | number} = {};
       colorMap[otherLabel] = DG.Color.blue;
       colorMap[aarLabel] = DG.Color.orange;
@@ -146,6 +173,12 @@ export class SARViewer extends DG.JsViewer {
     }
   }
 
+  /**
+   * Selecting/filtering sequences according to the current bitset.
+   *
+   * @private
+   * @memberof SARViewer
+   */
   private sourceFilteringFunc() {
     if (this.filterMode) {
       this.dataFrame!.selection.setAll(false, false);
@@ -156,6 +189,13 @@ export class SARViewer extends DG.JsViewer {
     }
   }
 
+  /**
+   * Property panel accordion construction function.
+   *
+   * @private
+   * @param {DG.Accordion} accordion Accordion.
+   * @memberof SARViewer
+   */
   private accordionFunc(accordion: DG.Accordion) {
     if (accordion.context instanceof DG.RowGroup) {
       const originalDf: DG.DataFrame = DG.toJs(accordion.context.dataFrame);
@@ -190,7 +230,7 @@ export class SARViewer extends DG.JsViewer {
           const hist = originalDf.clone(this._initialBitset).plot.histogram({
           // const hist = originalDf.plot.histogram({
             filteringEnabled: false,
-            valueColumnName: `${this.activityColumnColumnName}Scaled`,
+            valueColumnName: `${this.activityColumnName}Scaled`,
             splitColumnName: '~splitCol',
             legendVisibility: 'Never',
             showXAxis: true,
@@ -216,7 +256,13 @@ export class SARViewer extends DG.JsViewer {
     }
   }
 
-  syncGridsFunc(sourceVertical: boolean) { //TODO: refactor
+  /**
+   * Function for viewer girds synchronization.
+   *
+   * @param {boolean} sourceVertical Event source is vertical viewer.
+   * @memberof SARViewer
+   */
+  syncGridsFunc(sourceVertical: boolean) { //TODO: refactor, move
     if (this.viewerGrid && this.viewerGrid.dataFrame && this.viewerVGrid && this.viewerVGrid.dataFrame) {
       if (sourceVertical) {
         const dfCell = this.viewerVGrid.dataFrame.currentCell;
@@ -258,27 +304,24 @@ export class SARViewer extends DG.JsViewer {
       }
     }
   }
-  // argument compute data can be used to just redraw grids.
-  // Probably iirelevant since mostly grids are updating themselves, and render is only used to update data.
+
+  /**
+   * Viewer render function.
+   *
+   * @param {boolean} [computeData=true] Recalculate data.
+   * @memberof SARViewer
+   */
   async render(computeData = true) {
     if (!this.initialized) {
       return;
     }
     //TODO: optimize. Don't calculate everything again if only view changes
     if (computeData) {
-      if (typeof this.dataFrame !== 'undefined' && this.activityColumnColumnName && this.sourceGrid) {
-        // [this.viewerGrid, this.viewerVGrid, this.statsDf] = await describe(
-        //   this.dataFrame,
-        //   this.activityColumnColumnName,
-        //   this.activityScalingMethod,
-        //   this.sourceGrid,
-        //   this.bidirectionalAnalysis,
-        //   this._initialBitset,
-        // );
+      if (typeof this.dataFrame !== 'undefined' && this.activityColumnName && this.sourceGrid) {
         await model?.updateData(
           this.dataFrame!,
-          this.activityColumnColumnName,
-          this.activityScalingMethod,
+          this.activityColumnName,
+          this.scaling,
           this.sourceGrid,
           this.bidirectionalAnalysis,
           this._initialBitset,
@@ -303,8 +346,21 @@ export class SARViewer extends DG.JsViewer {
   }
 }
 
+/**
+ * Vertical structure activity relationship viewer.
+ *
+ * @export
+ * @class SARViewerVertical
+ * @extends {DG.JsViewer}
+ */
 export class SARViewerVertical extends DG.JsViewer {
   viewerVGrid: DG.Grid | null;
+
+  /**
+   * Creates an instance of SARViewerVertical.
+   *
+   * @memberof SARViewerVertical
+   */
   constructor() {
     super();
 
@@ -315,6 +371,11 @@ export class SARViewerVertical extends DG.JsViewer {
     }));
   }
 
+  /**
+   * Viewer render function.
+   *
+   * @memberof SARViewerVertical
+   */
   render() {
     if (this.viewerVGrid) {
       $(this.root).empty();

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) => {
@@ -287,8 +311,7 @@ export class StackedBarChart extends DG.JsViewer {
         if (h * margin / 2 <= sBarHeight - gapSize && h * margin / 2 <= w) {
           g.fillStyle = 'rgb(0,0,0)';
           g.font = `${h * margin / 2}px`;
-          // eslint-disable-next-line no-unused-vars
-          const [_c, aar, _p] = cp.getColorAAPivot(obj['name']);
+          const [, aar] = cp.getColorAAPivot(obj['name']);
           g.fillText(aar,
             x + w / 2 - h * margin / 8,
             y + h * (this.max - sum + curSum) / this.max + gapSize / 2 + (sBarHeight - gapSize)/2 - h * margin / 8);
@@ -398,11 +421,63 @@ export class StackedBarChart extends DG.JsViewer {
         return;
       }
       this.dataFrame!.selection.handleClick((i) => {
-        //let selected = true;
         // @ts-ignore
         return this.highlighted!['aaName'] === (this.dataFrame.getCol(this.highlighted!['colName']).get(i));
-
-        //&& (scope.dataFrame.selection.get(i) === selected);
       }, 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 [];
+    }
 }