@datagrok/peptides 0.8.14 → 1.0.1

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

@@ -1,29 +1,21 @@
 import * as DG from 'datagrok-api/dg';
 import * as rxjs from 'rxjs';
-import * as ui from 'datagrok-api/ui';
 import {MonomerLibrary} from '../monomer-library';
-import {PeptidesController} from '../peptides';
 
 import * as C from '../utils/constants';
 import * as type from '../utils/types';
+import {PeptidesModel} from '../model';
 
-export function addViewerToHeader(grid: DG.Grid, barchart: StackedBarChart) {
+export function addViewerToHeader(grid: DG.Grid, barchart: StackedBarChart): void {
   if (grid.temp['containsBarchart'])
     return;
-  
-  const compareBarParts = (bar1: type.BarChart.BarPart | null, bar2: type.BarChart.BarPart | null) =>
-    bar1 && bar2 && bar1.aaName === bar2.aaName && bar1.colName === bar2.colName;
 
-  const eventAction = (mouseMove: MouseEvent) => {
-    const cell = grid.hitTest(mouseMove.offsetX, mouseMove.offsetY);
+  const eventAction = (ev: MouseEvent): void => {
+    const cell = grid.hitTest(ev.offsetX, ev.offsetY);
     if (cell?.isColHeader && cell.tableColumn?.semType == C.SEM_TYPES.AMINO_ACIDS) {
-      const newBarPart = barchart.findAARandPosition(cell, mouseMove);
-      const previousClickedBarPart = barchart._previousClickedBarPart;
-      if (mouseMove.type === 'click' && compareBarParts(newBarPart, previousClickedBarPart))
-        barchart.isSameBarClicked = true;
-      else
-        barchart.currentBarPart = newBarPart;
-      barchart.requestAction(mouseMove);
+      const newBarPart = barchart.findAARandPosition(cell, ev);
+      // barchart._currentBarPart = newBarPart;
+      barchart.requestAction(ev, newBarPart);
       barchart.computeData();
     }
   };
@@ -31,7 +23,7 @@ export function addViewerToHeader(grid: DG.Grid, barchart: StackedBarChart) {
   // The following events makes the barchart interactive
   rxjs.fromEvent<MouseEvent>(grid.overlay, 'mousemove').subscribe((mouseMove: MouseEvent) => eventAction(mouseMove));
   rxjs.fromEvent<MouseEvent>(grid.overlay, 'click').subscribe((mouseMove: MouseEvent) => eventAction(mouseMove));
-  rxjs.fromEvent<MouseEvent>(grid.overlay, 'mouseout').subscribe(() => barchart.unhighlight());
+  rxjs.fromEvent<MouseEvent>(grid.overlay, 'mouseout').subscribe(() => barchart.computeData());
 
   barchart.tableCanvas = grid.canvas;
 
@@ -39,17 +31,11 @@ export function addViewerToHeader(grid: DG.Grid, barchart: StackedBarChart) {
   grid.setOptions({'colHeaderHeight': 130});
 
   grid.onCellTooltip((cell, x, y) => {
-    if (
-      cell.tableColumn &&
-      [C.SEM_TYPES.AMINO_ACIDS, C.SEM_TYPES.ALIGNED_SEQUENCE].includes(cell.tableColumn.semType as C.SEM_TYPES)
-    ) {
+    const colSemType = cell.tableColumn?.semType as C.SEM_TYPES;
+    if (colSemType == C.SEM_TYPES.ALIGNED_SEQUENCE || colSemType == C.SEM_TYPES.AMINO_ACIDS) {
       if (!cell.isColHeader) {
         const monomerLib = cell.cell.dataFrame.temp[MonomerLibrary.id];
-        PeptidesController.chemPalette.showTooltip(cell, x, y, monomerLib);
-      } else if (barchart.currentBarPart) {
-        let elements: HTMLElement[] = [];
-        elements = elements.concat([ui.divText(barchart.currentBarPart.aaName)]);
-        ui.tooltip.show(ui.divV(elements), x, y);
+        PeptidesModel.chemPalette.showTooltip(cell, x, y, monomerLib);
       }
     }
     return true;
@@ -75,14 +61,10 @@ export function addViewerToHeader(grid: DG.Grid, barchart: StackedBarChart) {
   });
 
   grid.temp['containsBarchart'] = true;
-  //FIXME: for some reason barchat didn't show when running analysis. This fixes it, but it's bad. Find a way to fix
-  // the problem
-  barchart.unhighlight();
 }
 
 export class StackedBarChart extends DG.JsViewer {
   dataEmptyAA: string;
-  _currentBarPart: type.BarChart.BarPart | null = null;
   tableCanvas: HTMLCanvasElement | undefined;
   aminoColumnNames: string[] = [];
   ord: { [Key: string]: number; } = {};
@@ -92,22 +74,14 @@ export class StackedBarChart extends DG.JsViewer {
   barStats: {[Key: string]: type.BarChart.BarStatsObject[]} = {};
   selected: type.BarChart.BarPart[] = [];
   aggregatedSelectedTables: type.DataFrameDict = {};
-  controller!: PeptidesController;
-  isSameBarClicked: boolean = false;
-  _previousClickedBarPart: type.BarChart.BarPart | null = null;
+  model!: PeptidesModel;
 
   constructor() {
     super();
     this.dataEmptyAA = this.string('dataEmptyAA', '-');
   }
 
-  get currentBarPart() { return this._currentBarPart; }
-  set currentBarPart(barPart: type.BarChart.BarPart | null) {
-    this._currentBarPart = barPart;
-    this.isSameBarClicked = false;
-  }
-
-  init() {
+  init(): void {
     const groups: {[key: string]: string[]} = {
       'yellow': ['C', 'U'],
       'red': ['G', 'P'],
@@ -127,30 +101,31 @@ export class StackedBarChart extends DG.JsViewer {
   }
 
   // Stream subscriptions
-  async onTableAttached() {
+  async onTableAttached(): Promise<void> {
     this.init();
-    this.controller = await PeptidesController.getInstance(this.dataFrame);
-    this.controller.init(this.dataFrame);
+    this.model = await PeptidesModel.getInstance(this.dataFrame);
+    // this.controller.init(this.dataFrame);
     if (this.dataFrame) {
       this.subs.push(DG.debounce(this.dataFrame.selection.onChanged, 50).subscribe((_) => this.computeData()));
       this.subs.push(DG.debounce(this.dataFrame.filter.onChanged, 50).subscribe((_) => this.computeData()));
       this.subs.push(DG.debounce(this.dataFrame.onValuesChanged, 50).subscribe(() => this.computeData()));
     }
+    this.computeData();
   }
 
   // Cancel subscriptions when the viewer is detached
-  detach() {
+  detach(): void {
     this.subs.forEach((sub) => sub.unsubscribe());
   }
 
-  computeData() {
+  computeData(): void {
     this.aminoColumnNames = [];
     this.aminoColumnIndices = {};
 
-    this.dataFrame!.columns.names().forEach((name: string) => {
-      if (this.dataFrame!.getCol(name).semType === C.SEM_TYPES.AMINO_ACIDS &&
-          !this.dataFrame!.getCol(name).categories.includes('COOH') &&
-          !this.dataFrame!.getCol(name).categories.includes('NH2')) {
+    this.dataFrame.columns.names().forEach((name: string) => {
+      if (this.dataFrame.getCol(name).semType === C.SEM_TYPES.AMINO_ACIDS &&
+          !this.dataFrame.getCol(name).categories.includes('COOH') &&
+          !this.dataFrame.getCol(name).categories.includes('NH2')) {
         this.aminoColumnIndices[name] = this.aminoColumnNames.length + 1;
         this.aminoColumnNames.push(name);
       }
@@ -160,15 +135,15 @@ export class StackedBarChart extends DG.JsViewer {
     this.aggregatedSelectedTables = {};
     //TODO: optimize it, why store so many tables?
     this.aminoColumnNames.forEach((name) => {
-      this.aggregatedFilterTables[name] = this.dataFrame!
+      this.aggregatedFilterTables[name] = this.dataFrame
         .groupBy([name])
-        .whereRowMask(this.dataFrame!.filter)
+        .whereRowMask(this.dataFrame.filter)
         .add('count', name, `${name}_count`)
         .aggregate();
 
-      this.aggregatedSelectedTables[name] = this.dataFrame!
+      this.aggregatedSelectedTables[name] = this.dataFrame
         .groupBy([name])
-        .whereRowMask(this.dataFrame!.selection)
+        .whereRowMask(this.dataFrame.selection)
         .add('count', name, `${name}_count`)
         .aggregate();
     });
@@ -206,10 +181,10 @@ export class StackedBarChart extends DG.JsViewer {
       colData.sort((o1, o2) => this.ord[o2['name']] - this.ord[o1['name']]);
     }
 
-    this.max = this.dataFrame!.filter.trueCount;
+    this.max = this.dataFrame.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): void {
     const name = cell.tableColumn!.name;
     const colNameSize = g.measureText(name).width;
     const barData = this.barStats[name];
@@ -236,7 +211,7 @@ export class StackedBarChart extends DG.JsViewer {
       const sBarHeight = h * obj['count'] / this.max;
       const gapSize = sBarHeight * innerMargin;
       const verticalShift = (this.max - sum) / this.max;
-      const [color, aarOuter] = PeptidesController.chemPalette.getColorAAPivot(obj['name']);
+      const [color, aarOuter] = PeptidesModel.chemPalette.getColorAAPivot(obj['name']);
       const textSize = g.measureText(aarOuter);
       const fontSize = 11;
       const leftMargin = (w - (aarOuter.length > 1 ? fontSize : textSize.width - 8)) / 2;
@@ -252,7 +227,7 @@ export class StackedBarChart extends DG.JsViewer {
       if (textSize.width <= subBartHeight) {
         const origTransform = g.getTransform();
 
-        if (color != PeptidesController.chemPalette.undefinedColor) {
+        if (color != PeptidesModel.chemPalette.undefinedColor) {
           g.fillRect(x + xStart, y + yStart, barWidth, subBartHeight);
           g.fillStyle = 'black';
         } else
@@ -287,7 +262,8 @@ export class StackedBarChart extends DG.JsViewer {
     });
   }
 
-  findAARandPosition(cell: DG.GridCell, mouseEvent: MouseEvent) {
+  //TODO: refactor and simplify it
+  findAARandPosition(cell: DG.GridCell, mouseEvent: MouseEvent): {colName: string, aaName: string} | null {
     if (!cell.tableColumn?.name || !this.aminoColumnNames.includes(cell.tableColumn.name))
       return null;
 
@@ -330,33 +306,16 @@ export class StackedBarChart extends DG.JsViewer {
     return null;
   }
 
-  unhighlight() {
-    ui.tooltip.hide();
-    this.computeData();
-  }
-
-  /**
-   * Requests highlight/select/filter action based on currentBarPart
-   * @param event 
-   * @returns 
-   */
-  requestAction(event: MouseEvent) {
-    if (!this._currentBarPart)
+  /** Requests highlight/select/filter action based on currentBarPart */
+  requestAction(event: MouseEvent, barPart: {colName: string, aaName: string} | null): void {
+    if (!barPart)
       return;
-    let aar = this._currentBarPart!['aaName'];
-    let position = this._currentBarPart!['colName'];
+    const aar = barPart['aaName'];
+    const position = barPart['colName'];
     if (event.type === 'click') {
-      if (this.isSameBarClicked) {
-        aar = position = C.CATEGORIES.ALL;
-        this.currentBarPart = null;
-      }
-      this.controller.setSARGridCellAt(aar, position);
-      this._previousClickedBarPart = this._currentBarPart;
-    } else {
-      ui.tooltip.showRowGroup(this.dataFrame, (i) => {
-        const currentAAR = this.dataFrame.get(position, i);
-        return currentAAR === aar;
-      }, event.offsetX, event.offsetY);
-    }
+      event.shiftKey ? this.model.modifyCurrentSelection(aar, position) :
+        this.model.initCurrentSelection(aar, position);
+    } else
+      this.model.showTooltip(aar, position, event.clientX, event.clientY);
   }
 }

package/src/widgets/analyze-peptides.ts

@@ -1,44 +1,40 @@
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
-import {callMVA} from '../utils/multivariate-analysis';
-import {PeptidesController} from '../peptides';
 import '../styles.css';
-import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations';
 import * as C from '../utils/constants';
-import {FilteringStatistics} from '../utils/filtering-statistics';
+import {getSeparator} from '../utils/misc';
+import {PeptidesModel} from '../model';
+import {_package} from '../package';
+import $ from 'cash-dom';
 
-/**
- * Peptide analysis widget.
+/** 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.
- */
+ * @param {DG.DataFrame} currentDf Working table
+ * @param {DG.Column} col Aligned sequence column
+ * @return {Promise<DG.Widget>} Widget containing peptide analysis */
 export async function analyzePeptidesWidget(currentDf: DG.DataFrame, col: DG.Column): Promise<DG.Widget> {
   let tempCol = null;
-  let tempDf: DG.DataFrame;
+  let scaledDf: DG.DataFrame;
   let newScaledColName: string;
+  const separator = getSeparator(col);
+  col.tags[C.TAGS.SEPARATOR] ??= separator;
 
   for (const column of currentDf.columns.numerical)
     tempCol = column.type === DG.TYPE.FLOAT ? column : null;
 
-  const defaultColumn: DG.Column = currentDf.col('activity') || currentDf.col('IC50') || tempCol;
+  const defaultColumn: DG.Column<number> | null = currentDf.col('activity') || currentDf.col('IC50') || tempCol;
   const histogramHost = ui.div([], {id: 'pep-hist-host'});
 
   const activityScalingMethod = ui.choiceInput(
     'Scaling', 'none', ['none', 'lg', '-lg'],
-    async (currentMethod: string) => {
-      const currentActivityCol = activityColumnChoice.value.name;
-      
+    async (currentMethod: string): Promise<void> => {
+      const currentActivityCol = activityColumnChoice.value?.name;
 
-      [tempDf, newScaledColName] = await PeptidesController.scaleActivity(
+      [scaledDf, newScaledColName] = await PeptidesModel.scaleActivity(
         currentMethod, currentDf, currentActivityCol, true);
 
-      const hist = tempDf.plot.histogram({
+      const hist = scaledDf.plot.histogram({
         filteringEnabled: false,
         valueColumnName: C.COLUMNS_NAMES.ACTIVITY_SCALED,
         legendVisibility: 'Never',
@@ -46,83 +42,75 @@ export async function analyzePeptidesWidget(currentDf: DG.DataFrame, col: DG.Col
         showColumnSelector: false,
         showRangeSlider: false,
         showBinSelector: false,
-      // bins: b,
       });
       histogramHost.lastChild?.remove();
       histogramHost.appendChild(hist.root);
     });
   activityScalingMethod.setTooltip('Function to apply for each value in activity column');
 
-  const activityScalingMethodState = function(_: any) {
-    activityScalingMethod.enabled =
-      activityColumnChoice.value && DG.Stats.fromColumn(activityColumnChoice.value, currentDf.filter).min > 0;
+  const activityScalingMethodState = (_: any): void => {
+    activityScalingMethod.enabled = (activityColumnChoice.value ?? false) &&
+      DG.Stats.fromColumn(activityColumnChoice.value!, currentDf.filter).min > 0;
     activityScalingMethod.fireChanged();
   };
-  const activityColumnChoice = ui.columnInput(
-    'Activity',
-    currentDf,
-    defaultColumn,
-    activityScalingMethodState,
-  );
+  const activityColumnChoice = ui.columnInput('Activity', currentDf, defaultColumn, activityScalingMethodState);
   activityColumnChoice.fireChanged();
   activityScalingMethod.fireChanged();
 
-  const startBtn = ui.button('Launch SAR', async () => {
-    const progress = DG.TaskBarProgressIndicator.create('Loading SAR...');
-    if (activityColumnChoice.value.type === DG.TYPE.FLOAT) {
-      const activityColumn: string = activityColumnChoice.value.name;
-      // const activityColumnScaled = `${activityColumn}Scaled`;
-      // const originalDfColumns = (currentDf.columns as DG.ColumnList).names();
-      const options: StringDictionary = {
-        'scaling': activityScalingMethod.value,
-      };
-
-      //prepare new DF
-      const newDf = currentDf.clone(currentDf.filter, [col.name, activityColumn]);
-      newDf.getCol(activityColumn).name = C.COLUMNS_NAMES.ACTIVITY;
-      newDf.getCol(col.name).name = C.COLUMNS_NAMES.ALIGNED_SEQUENCE;
-      const activityScaledCol = tempDf.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
-      (newDf.columns as DG.ColumnList).add(activityScaledCol);
-      // newDf.temp[C.COLUMNS_NAMES.ACTIVITY] = activityColumn;
-      newDf.name = 'Peptides analysis';
-      newDf.temp[C.COLUMNS_NAMES.ACTIVITY_SCALED] = newScaledColName;
-      newDf.tags['isPeptidesAnalysis'] = 'true';
+  const inputsList = [activityColumnChoice, activityScalingMethod];
 
-      const peptides = await PeptidesController.getInstance(newDf);
-      await peptides.init(newDf);
-    } else
-      grok.shell.error('The activity column must be of floating point number type!');
-    progress.close();
+  const startBtn = ui.button('Launch SAR', async () => {
+    await startAnalysis(activityColumnChoice.value, col, currentDf, scaledDf, newScaledColName);
   });
   startBtn.style.alignSelf = 'center';
 
-  // const startMVABtn = ui.button('Launch MVA', async () => {
-  //   if (activityColumnChoice.value.type === DG.TYPE.FLOAT) {
-  //     const progress = DG.TaskBarProgressIndicator.create('Loading MVA...');
-
-  //     const options: {[key: string]: string} = {
-  //       'activityColumnName': activityColumnChoice.value.name,
-  //       'scaling': activityScalingMethod.value,
-  //     };
-
-  //     await callMVA(tableGrid, view, currentDf, options, col);
-
-  //     progress.close();
-  //   } else
-  //     grok.shell.error('The activity column must be of floating point number type!');
-  // });
-
-
-  const viewer = await currentDf.plot.fromType('peptide-logo-viewer');
+  const bioList = (await grok.dapi.packages.list({filter: 'name = "Bio"'})).filter(p => p.name == 'Bio');
+  const logoHost = ui.div('Install Bio package to see WebLogo');
+  if (bioList.length > 0) {
+    const viewer = await currentDf.plot.fromType('WebLogo');
+    viewer.root.style.setProperty('height', '130px');
+    $(logoHost).empty().append(viewer.root);
+  } else {
+    logoHost.style.color = DG.Color.toHtml(DG.Color.red);
+    logoHost.style.alignSelf = 'center';
+    logoHost.style.margin = '10px';
+  }
 
   return new DG.Widget(
     ui.divV([
-      viewer.root,
+      logoHost,
       ui.splitH([
-        ui.splitV([ui.inputs([activityColumnChoice, activityScalingMethod]), startBtn]),
+        ui.splitV([ui.inputs(inputsList), startBtn]),
         histogramHost,
       ], {style: {height: 'unset'}}),
-      // histogramHost,
     ]),
   );
 }
+
+export async function startAnalysis(
+  activityColumn: DG.Column<number> | null, alignedSeqCol: DG.Column<string>, currentDf: DG.DataFrame,
+  scaledDf: DG.DataFrame, newScaledColName: string, dgPackage?: DG.Package): Promise<PeptidesModel | null> {
+  const progress = DG.TaskBarProgressIndicator.create('Loading SAR...');
+  let model = null;
+  if (activityColumn?.type === DG.TYPE.FLOAT) {
+    const activityColumnName: string = activityColumn.name;
+
+    //prepare new DF
+    const newDf = currentDf.clone(currentDf.filter, [alignedSeqCol.name, activityColumnName]);
+    const activityCol = newDf.getCol(activityColumnName);
+    activityCol.name = C.COLUMNS_NAMES.ACTIVITY;
+    activityCol.semType = C.SEM_TYPES.ACTIVITY;
+    newDf.getCol(alignedSeqCol.name).name = C.COLUMNS_NAMES.ALIGNED_SEQUENCE;
+    const activityScaledCol = scaledDf.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
+    activityScaledCol.semType = C.SEM_TYPES.ACTIVITY_SCALED;
+    newDf.columns.add(activityScaledCol);
+    newDf.name = 'Peptides analysis';
+    newDf.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED] = newScaledColName;
+    // newDf.tags[C.PEPTIDES_ANALYSIS] = 'true';
+
+    model = await PeptidesModel.getInstance(newDf, dgPackage ?? _package);
+  } else
+    grok.shell.error('The activity column must be of floating point number type!');
+  progress.close();
+  return model;
+}