@datagrok/peptides 0.4.3 → 0.7.1

package/src/viewers/sar-viewer.ts

@@ -4,13 +4,20 @@ import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
 
-import {model} from './model';
-
+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;
@@ -25,6 +32,12 @@ export class SARViewer extends DG.JsViewer {
   // protected pValueThreshold: number;
   // protected amountOfBestAARs: number;
   // duplicatesHandingMethod: string;
+
+  /**
+   * Creates an instance of SARViewer.
+   *
+   * @memberof SARViewer
+   */
   constructor() {
     super();
 
@@ -38,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);
@@ -51,8 +64,14 @@ export class SARViewer extends DG.JsViewer {
     this.sourceGrid = null;
   }
 
+  /**
+   * Initializes SARViewer.
+   *
+   * @memberof SARViewer
+   */
   init() {
     this._initialBitset = this.dataFrame!.filter.clone();
+    this.currentBitset = this._initialBitset.clone();
     this.initialized = true;
     this.subs.push(model.statsDf$.subscribe((data) => this.statsDf = data));
     this.subs.push(model.viewerGrid$.subscribe((data) => {
@@ -63,16 +82,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);
 
@@ -81,14 +116,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;
       }
@@ -97,167 +132,23 @@ export class SARViewer extends DG.JsViewer {
     this.render();
   }
 
-  private applyBitset() {
-    if (
-      this.dataFrame &&
-      this.viewerGrid &&
-      this.viewerGrid.dataFrame &&
-      this.viewerGrid.dataFrame.currentCell.value &&
-      this.viewerGrid.dataFrame.currentCol.name !== this.aminoAcidResidue
-    ) {
-      const currentAAR: string =
-        this.viewerGrid.dataFrame.get(this.aminoAcidResidue, this.viewerGrid.dataFrame.currentRowIdx);
-      const currentPosition = this.viewerGrid.dataFrame.currentCol.name;
-
-      const splitColName = '~splitCol';
-      const otherLabel = 'Other';
-      const aarLabel = `${currentAAR === '-' ? 'Empty' : currentAAR} - ${currentPosition}`;
-
-      let splitCol = this.dataFrame.col(splitColName);
-      if (!splitCol) {
-        splitCol = this.dataFrame.columns.addNew(splitColName, 'string');
-      }
-
-      const isChosen = (i: number) => this.groupMapping![this.dataFrame!.get(currentPosition, i)] === currentAAR;
-      splitCol!.init((i) => isChosen(i) ? aarLabel : otherLabel);
-
-      //TODO: use column.compact
-      this.currentBitset = DG.BitSet.create(this.dataFrame.rowCount, isChosen).and(this._initialBitset!);
-      this.sourceFilteringFunc();
-
-      const colorMap: {[index: string]: string | number} = {};
-      colorMap[otherLabel] = DG.Color.blue;
-      colorMap[aarLabel] = DG.Color.orange;
-      // colorMap[currentAAR] = cp.getColor(currentAAR);
-      this.dataFrame.getCol(splitColName).colors.setCategorical(colorMap);
-    }
-  }
-
-  private sourceFilteringFunc() {
-    if (this.filterMode) {
-      this.dataFrame!.selection.setAll(false, false);
-      this.dataFrame!.filter.copyFrom(this.currentBitset!);
-    } else {
-      this.dataFrame!.filter.copyFrom(this._initialBitset!);
-      this.dataFrame!.selection.copyFrom(this.currentBitset!);
-    }
-  }
-
-  private accordionFunc(accordion: DG.Accordion) {
-    if (accordion.context instanceof DG.RowGroup) {
-      const originalDf: DG.DataFrame = DG.toJs(accordion.context.dataFrame);
-      const viewerDf = this.viewerGrid?.dataFrame;
-
-      if (
-        originalDf.getTag('dataType') === 'peptides' &&
-        originalDf.col('~splitCol') &&
-        this.viewerGrid &&
-        viewerDf &&
-        viewerDf.currentCol !== null
-      ) {
-        const currentAAR: string = viewerDf.get(
-          this.aminoAcidResidue,
-          viewerDf.currentRowIdx,
-        );
-        const currentPosition = viewerDf.currentCol.name;
-
-        const labelStr = `${currentAAR === '-' ? 'Empty' : currentAAR} - ${currentPosition}`;
-        const currentColor = DG.Color.toHtml(DG.Color.orange);
-        const otherColor = DG.Color.toHtml(DG.Color.blue);
-        const currentLabel = ui.label(labelStr, {style: {color: currentColor}});
-        const otherLabel = ui.label('Other', {style: {color: otherColor}});
-
-        const elements: (HTMLLabelElement | HTMLElement)[] = [currentLabel, otherLabel];
-
-        const distPane = accordion.getPane('Distribution');
-        if (distPane) {
-          accordion.removePane(distPane);
-        }
-        accordion.addPane('Distribution', () => {
-          const hist = originalDf.clone(this._initialBitset).plot.histogram({
-          // const hist = originalDf.plot.histogram({
-            filteringEnabled: false,
-            valueColumnName: `${this.activityColumnColumnName}Scaled`,
-            splitColumnName: '~splitCol',
-            legendVisibility: 'Never',
-            showXAxis: true,
-            showColumnSelector: false,
-            showRangeSlider: false,
-          }).root;
-          hist.style.width = 'auto';
-          elements.push(hist);
-
-          const tableMap: {[key: string]: string} = {'Statistics:': ''};
-          for (const colName of new Set(['Count', 'pValue', 'Mean difference'])) {
-            const query = `${this.aminoAcidResidue} = ${currentAAR} and Position = ${currentPosition}`;
-            const textNum = this.statsDf?.groupBy([colName]).where(query).aggregate().get(colName, 0);
-            // const text = textNum === 0 ? '<0.01' : `${colName === 'Count' ? textNum : textNum.toFixed(2)}`;
-            const text = colName === 'Count' ? `${textNum}` : textNum < 0.01 ? '<0.01' : textNum.toFixed(2);
-            tableMap[colName === 'pValue' ? 'p-value' : colName] = text;
-          }
-          elements.push(ui.tableFromMap(tableMap));
-
-          return ui.divV(elements);
-        }, true);
-      }
-    }
-  }
-
-  syncGridsFunc(sourceVertical: boolean) { //TODO: refactor
-    if (this.viewerGrid && this.viewerGrid.dataFrame && this.viewerVGrid && this.viewerVGrid.dataFrame) {
-      if (sourceVertical) {
-        const dfCell = this.viewerVGrid.dataFrame.currentCell;
-        if (dfCell.column === null || dfCell.column.name !== 'Mean difference') {
-          return;
-        }
-        const otherColName: string = this.viewerVGrid.dataFrame.get('Position', dfCell.rowIndex);
-        const otherRowName: string = this.viewerVGrid.dataFrame.get(this.aminoAcidResidue, dfCell.rowIndex);
-        let otherRowIndex = -1;
-        for (let i = 0; i < this.viewerGrid.dataFrame.rowCount; i++) {
-          if (this.viewerGrid.dataFrame.get(this.aminoAcidResidue, i) === otherRowName) {
-            otherRowIndex = i;
-            break;
-          }
-        }
-        if (otherRowIndex !== -1) {
-          this.viewerGrid.dataFrame.currentCell = this.viewerGrid.dataFrame.cell(otherRowIndex, otherColName);
-        }
-      } else {
-        const otherPos: string = this.viewerGrid.dataFrame.currentCol?.name;
-        if (typeof otherPos === 'undefined' && otherPos !== this.aminoAcidResidue) {
-          return;
-        }
-        const otherAAR: string =
-          this.viewerGrid.dataFrame.get(this.aminoAcidResidue, this.viewerGrid.dataFrame.currentRowIdx);
-        let otherRowIndex = -1;
-        for (let i = 0; i < this.viewerVGrid.dataFrame.rowCount; i++) {
-          if (
-            this.viewerVGrid.dataFrame.get(this.aminoAcidResidue, i) === otherAAR &&
-            this.viewerVGrid.dataFrame.get('Position', i) === otherPos
-          ) {
-            otherRowIndex = i;
-            break;
-          }
-        }
-        if (otherRowIndex !== -1) {
-          this.viewerVGrid.dataFrame.currentCell = this.viewerVGrid.dataFrame.cell(otherRowIndex, 'Mean difference');
-        }
-      }
-    }
-  }
-  // 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) {
+      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,
@@ -268,12 +159,24 @@ export class SARViewer extends DG.JsViewer {
           $(this.root).empty();
           this.root.appendChild(this.viewerGrid.root);
           this.viewerGrid.dataFrame!.onCurrentCellChanged.subscribe((_) => {
-            this.applyBitset();
-            this.syncGridsFunc(false);
+            this.currentBitset = applyBitset(
+              this.dataFrame!, this.viewerGrid!, this.aminoAcidResidue,
+              this.groupMapping!, this._initialBitset!, this.filterMode,
+            ) ?? this.currentBitset;
+            syncGridsFunc(false, this.viewerGrid!, this.viewerVGrid!, this.aminoAcidResidue);
+          });
+          this.viewerVGrid.dataFrame!.onCurrentCellChanged.subscribe((_) => {
+            syncGridsFunc(true, this.viewerGrid!, this.viewerVGrid!, this.aminoAcidResidue);
+          });
+          this.dataFrame!.onRowsFiltering.subscribe((_) => {
+            sourceFilteringFunc(this.filterMode, this.dataFrame!, this.currentBitset!, this._initialBitset!);
+          });
+          grok.events.onAccordionConstructed.subscribe((accordion: DG.Accordion) => {
+            accordionFunc(
+              accordion, this.viewerGrid!, this.aminoAcidResidue,
+              this._initialBitset!, this.activityColumnName, this.statsDf!,
+            );
           });
-          this.viewerVGrid.dataFrame!.onCurrentCellChanged.subscribe((_) => this.syncGridsFunc(true));
-          this.dataFrame!.onRowsFiltering.subscribe((_) => this.sourceFilteringFunc());
-          grok.events.onAccordionConstructed.subscribe((accordion: DG.Accordion) => this.accordionFunc(accordion));
         }
       }
     }
@@ -282,8 +185,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();
 
@@ -294,6 +210,11 @@ export class SARViewerVertical extends DG.JsViewer {
     }));
   }
 
+  /**
+   * Viewer render function.
+   *
+   * @memberof SARViewerVertical
+   */
   render() {
     if (this.viewerVGrid) {
       $(this.root).empty();
@@ -302,3 +223,175 @@ export class SARViewerVertical extends DG.JsViewer {
     this.viewerVGrid?.invalidate();
   }
 }
+
+function syncGridsFunc(
+  sourceVertical: boolean,
+  viewerGrid: DG.Grid,
+  viewerVGrid: DG.Grid,
+  aminoAcidResidue: string,
+) { //TODO: refactor, move
+  if (viewerGrid && viewerGrid.dataFrame && viewerVGrid && viewerVGrid.dataFrame) {
+    if (sourceVertical) {
+      const dfCell = viewerVGrid.dataFrame.currentCell;
+      if (dfCell.column === null || dfCell.column.name !== 'Mean difference') {
+        return;
+      }
+      const otherColName: string = viewerVGrid.dataFrame.get('Position', dfCell.rowIndex);
+      const otherRowName: string = viewerVGrid.dataFrame.get(aminoAcidResidue, dfCell.rowIndex);
+      let otherRowIndex = -1;
+      for (let i = 0; i < viewerGrid.dataFrame.rowCount; i++) {
+        if (viewerGrid.dataFrame.get(aminoAcidResidue, i) === otherRowName) {
+          otherRowIndex = i;
+          break;
+        }
+      }
+      if (otherRowIndex !== -1) {
+        viewerGrid.dataFrame.currentCell = viewerGrid.dataFrame.cell(otherRowIndex, otherColName);
+      }
+    } else {
+      const otherPos: string = viewerGrid.dataFrame.currentCol?.name;
+      if (typeof otherPos === 'undefined' && otherPos !== aminoAcidResidue) {
+        return;
+      }
+      const otherAAR: string =
+        viewerGrid.dataFrame.get(aminoAcidResidue, viewerGrid.dataFrame.currentRowIdx);
+      let otherRowIndex = -1;
+      for (let i = 0; i < viewerVGrid.dataFrame.rowCount; i++) {
+        if (
+          viewerVGrid.dataFrame.get(aminoAcidResidue, i) === otherAAR &&
+          viewerVGrid.dataFrame.get('Position', i) === otherPos
+        ) {
+          otherRowIndex = i;
+          break;
+        }
+      }
+      if (otherRowIndex !== -1) {
+        viewerVGrid.dataFrame.currentCell = viewerVGrid.dataFrame.cell(otherRowIndex, 'Mean difference');
+      }
+    }
+  }
+}
+
+function sourceFilteringFunc(
+  filterMode: boolean,
+  dataFrame: DG.DataFrame,
+  currentBitset: DG.BitSet,
+  initialBitset: DG.BitSet,
+) {
+  if (filterMode) {
+    dataFrame.selection.setAll(false, false);
+    dataFrame.filter.copyFrom(currentBitset);
+  } else {
+    dataFrame.filter.copyFrom(initialBitset);
+    dataFrame.selection.copyFrom(currentBitset);
+  }
+}
+
+function applyBitset(
+  dataFrame: DG.DataFrame,
+  viewerGrid: DG.Grid,
+  aminoAcidResidue: string,
+  groupMapping: {[key: string]: string},
+  initialBitset: DG.BitSet,
+  filterMode: boolean,
+) {
+  let currentBitset = null;
+  if (
+    viewerGrid.dataFrame &&
+    viewerGrid.dataFrame.currentCell.value &&
+    viewerGrid.dataFrame.currentCol.name !== aminoAcidResidue
+  ) {
+    const currentAAR: string =
+      viewerGrid.dataFrame.get(aminoAcidResidue, viewerGrid.dataFrame.currentRowIdx);
+    const currentPosition = viewerGrid.dataFrame.currentCol.name;
+
+    const splitColName = '~splitCol';
+    const otherLabel = 'Other';
+    const aarLabel = `${currentAAR === '-' ? 'Empty' : currentAAR} - ${currentPosition}`;
+
+    let splitCol = dataFrame.col(splitColName);
+    if (!splitCol) {
+      splitCol = dataFrame.columns.addNew(splitColName, 'string');
+    }
+
+    const isChosen = (i: number) => groupMapping[dataFrame!.get(currentPosition, i)] === currentAAR;
+    splitCol!.init((i) => isChosen(i) ? aarLabel : otherLabel);
+
+    //TODO: use column.compact
+    currentBitset = DG.BitSet.create(dataFrame.rowCount, isChosen).and(initialBitset);
+    sourceFilteringFunc(filterMode, dataFrame, currentBitset, initialBitset);
+
+    const colorMap: {[index: string]: string | number} = {};
+    colorMap[otherLabel] = DG.Color.blue;
+    colorMap[aarLabel] = DG.Color.orange;
+    // colorMap[currentAAR] = cp.getColor(currentAAR);
+    dataFrame.getCol(splitColName).colors.setCategorical(colorMap);
+  }
+  return currentBitset;
+}
+
+function accordionFunc(
+  accordion: DG.Accordion,
+  viewerGrid: DG.Grid,
+  aminoAcidResidue: string,
+  initialBitset: DG.BitSet,
+  activityColumnName: string,
+  statsDf: DG.DataFrame,
+) {
+  if (accordion.context instanceof DG.RowGroup) {
+    const originalDf: DG.DataFrame = DG.toJs(accordion.context.dataFrame);
+    const viewerDf = viewerGrid.dataFrame;
+
+    if (
+      originalDf.getTag('dataType') === 'peptides' &&
+      originalDf.col('~splitCol') &&
+      viewerDf &&
+      viewerDf.currentCol !== null
+    ) {
+      const currentAAR: string = viewerDf.get(
+        aminoAcidResidue,
+        viewerDf.currentRowIdx,
+      );
+      const currentPosition = viewerDf.currentCol.name;
+
+      const labelStr = `${currentAAR === '-' ? 'Empty' : currentAAR} - ${currentPosition}`;
+      const currentColor = DG.Color.toHtml(DG.Color.orange);
+      const otherColor = DG.Color.toHtml(DG.Color.blue);
+      const currentLabel = ui.label(labelStr, {style: {color: currentColor}});
+      const otherLabel = ui.label('Other', {style: {color: otherColor}});
+
+      const elements: (HTMLLabelElement | HTMLElement)[] = [currentLabel, otherLabel];
+
+      const distPane = accordion.getPane('Distribution');
+      if (distPane) {
+        accordion.removePane(distPane);
+      }
+      accordion.addPane('Distribution', () => {
+        const hist = originalDf.clone(initialBitset).plot.histogram({
+        // const hist = originalDf.plot.histogram({
+          filteringEnabled: false,
+          valueColumnName: `${activityColumnName}Scaled`,
+          splitColumnName: '~splitCol',
+          legendVisibility: 'Never',
+          showXAxis: true,
+          showColumnSelector: false,
+          showRangeSlider: false,
+        }).root;
+        hist.style.width = 'auto';
+        elements.push(hist);
+
+        const tableMap: {[key: string]: string} = {'Statistics:': ''};
+        for (const colName of new Set(['Count', 'pValue', 'Mean difference'])) {
+          const query = `${aminoAcidResidue} = ${currentAAR} and Position = ${currentPosition}`;
+          const textNum = statsDf.groupBy([colName]).where(query).aggregate().get(colName, 0);
+          // const text = textNum === 0 ? '<0.01' : `${colName === 'Count' ? textNum : textNum.toFixed(2)}`;
+          const text = colName === 'Count' ? `${textNum}` : textNum < 0.01 ? '<0.01' : textNum.toFixed(2);
+          tableMap[colName === 'pValue' ? 'p-value' : colName] = text;
+        }
+        elements.push(ui.tableFromMap(tableMap));
+
+        return ui.divV(elements);
+      }, true);
+    }
+  }
+}

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

@@ -42,7 +42,9 @@ 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)]);
+              ui.tooltip.show(ui.divV(elements), x, y);
             }
             return true;
           }
@@ -54,6 +56,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,
@@ -251,7 +254,14 @@ export class StackedBarChart extends DG.JsViewer {
       this.max = df.filter.trueCount;
     }
 
-    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;