@datagrok/peptides 0.8.9 → 0.8.13

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

@@ -1,25 +1,32 @@
 import * as DG from 'datagrok-api/dg';
-import {ChemPalette} from '../utils/chem-palette';
 import * as rxjs from 'rxjs';
 import * as ui from 'datagrok-api/ui';
-const cp = new ChemPalette('grok');
+import {MonomerLibrary} from '../monomer-library';
+import {PeptidesController} from '../peptides';
+
+import * as C from '../utils/constants';
+import * as type from '../utils/types';
 
 export function addViewerToHeader(grid: DG.Grid, barchart: StackedBarChart) {
   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;
 
-  function eventAction(mouseMove: MouseEvent) {
+  const eventAction = (mouseMove: MouseEvent) => {
     const cell = grid.hitTest(mouseMove.offsetX, mouseMove.offsetY);
-    if (cell !== null && cell?.isColHeader && cell.tableColumn?.semType == 'aminoAcids')
-      barchart.highlight(cell, mouseMove.offsetX, mouseMove.offsetY, mouseMove);
-    else
-      return;
-    
-    if (cell?.isColHeader && cell.tableColumn?.semType == 'aminoAcids') 
-      barchart.beginSelection(mouseMove);
-    else 
-      barchart.unhighlight();
-  }
+    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);
+      barchart.computeData();
+    }
+  };
 
   // The following events makes the barchart interactive
   rxjs.fromEvent<MouseEvent>(grid.overlay, 'mousemove').subscribe((mouseMove: MouseEvent) => eventAction(mouseMove));
@@ -32,17 +39,18 @@ export function addViewerToHeader(grid: DG.Grid, barchart: StackedBarChart) {
   grid.setOptions({'colHeaderHeight': 130});
 
   grid.onCellTooltip((cell, x, y) => {
-    if (cell.tableColumn && ['aminoAcids', 'alignedSequence'].includes(cell.tableColumn.semType) ) {
-      if (!cell.isColHeader)
-        cp.showTooltip(cell, x, y);
-      else {
-        if (barchart.highlighted) {
-          let elements: HTMLElement[] = [];
-          elements = elements.concat([ui.divText(barchart.highlighted.aaName)]);
-          ui.tooltip.show(ui.divV(elements), x, y);
-        }
+    if (
+      cell.tableColumn &&
+      [C.SEM_TYPES.AMINO_ACIDS, C.SEM_TYPES.ALIGNED_SEQUENCE].includes(cell.tableColumn.semType as C.SEM_TYPES)
+    ) {
+      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);
       }
-      return true;
     }
     return true;
   });
@@ -67,38 +75,39 @@ 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();
 }
 
-type stackedBarChartDatatype = {
-  'name': string,
-  'data': {'name': string, 'count': number, 'selectedCount': number, 'fixedSelectedCount': number}[],
-}[];
-
-type bartStatsType = {
-  [Key: string]: {'name': string, 'count': number, 'selectedCount': number, 'fixedSelectedCount': number}[],
-};
-
 export class StackedBarChart extends DG.JsViewer {
-  public dataEmptyAA: string;
-  public highlighted: {'colName' : string, 'aaName' : string} | null = null;
-  public tableCanvas: HTMLCanvasElement | undefined;
-  public aminoColumnNames: string[] = [];
-  private ord: { [Key: string]: number; } = {};
-  private aminoColumnIndices: {[Key: string]: number} = {};
-  private aggregatedTables: {[Key: string]: DG.DataFrame} = {};
-  private aggregatedHighlightedTables: {[Key: string]: DG.DataFrame} = {};
-  private max = 0;
-  private barStats: {[Key: string]: {'name': string, 'count': number, 'highlightedCount': number, 'selectedCount': number}[]} = {};
-  private selected: {'colName' : string, 'aaName' : string}[] = [];
-  private highlightedMask: DG.BitSet | null = null;
-  private aggregatedSelectedTables: {[Key: string]: DG.DataFrame} = {};
+  dataEmptyAA: string;
+  _currentBarPart: type.BarChart.BarPart | null = null;
+  tableCanvas: HTMLCanvasElement | undefined;
+  aminoColumnNames: string[] = [];
+  ord: { [Key: string]: number; } = {};
+  aminoColumnIndices: {[Key: string]: number} = {};
+  aggregatedFilterTables: type.DataFrameDict = {};
+  max = 0;
+  barStats: {[Key: string]: type.BarChart.BarStatsObject[]} = {};
+  selected: type.BarChart.BarPart[] = [];
+  aggregatedSelectedTables: type.DataFrameDict = {};
+  controller!: PeptidesController;
+  isSameBarClicked: boolean = false;
+  _previousClickedBarPart: type.BarChart.BarPart | null = null;
 
   constructor() {
     super();
     this.dataEmptyAA = this.string('dataEmptyAA', '-');
   }
 
-  init(): void {
+  get currentBarPart() { return this._currentBarPart; }
+  set currentBarPart(barPart: type.BarChart.BarPart | null) {
+    this._currentBarPart = barPart;
+    this.isSameBarClicked = false;
+  }
+
+  init() {
     const groups: {[key: string]: string[]} = {
       'yellow': ['C', 'U'],
       'red': ['G', 'P'],
@@ -108,35 +117,38 @@ export class StackedBarChart extends DG.JsViewer {
       'orange': ['S', 'T', 'N', 'Q'],
     };
     let i = 0;
-    
-    for (const value of Object.values(groups)) 
+
+    for (const value of Object.values(groups)) {
       for (const obj of value)
         this.ord[obj] = i++;
+    }
 
     this.aminoColumnNames = [];
   }
 
   // Stream subscriptions
-  onTableAttached(): void {
+  async onTableAttached() {
     this.init();
+    this.controller = await PeptidesController.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.highlightedMask = DG.BitSet.create(this.dataFrame.rowCount);
+      this.subs.push(DG.debounce(this.dataFrame.onValuesChanged, 50).subscribe(() => this.computeData()));
     }
   }
 
   // Cancel subscriptions when the viewer is detached
-  detach(): void {
+  detach() {
     this.subs.forEach((sub) => sub.unsubscribe());
   }
 
-  computeData(): void {
+  computeData() {
     this.aminoColumnNames = [];
     this.aminoColumnIndices = {};
 
     this.dataFrame!.columns.names().forEach((name: string) => {
-      if (this.dataFrame!.getCol(name).semType === 'aminoAcids' &&
+      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;
@@ -144,22 +156,15 @@ export class StackedBarChart extends DG.JsViewer {
       }
     });
 
-    this.aggregatedTables = {};
-    this.aggregatedHighlightedTables = {};
+    this.aggregatedFilterTables = {};
     this.aggregatedSelectedTables = {};
     //TODO: optimize it, why store so many tables?
     this.aminoColumnNames.forEach((name) => {
-      this.aggregatedTables[name] = this.dataFrame!
+      this.aggregatedFilterTables[name] = this.dataFrame!
         .groupBy([name])
         .whereRowMask(this.dataFrame!.filter)
         .add('count', name, `${name}_count`)
         .aggregate();
-      
-      this.aggregatedHighlightedTables[name] = this.dataFrame!
-        .groupBy([name])
-        .whereRowMask(this.highlightedMask!)
-        .add('count', name, `${name}_count`)
-        .aggregate();
 
       this.aggregatedSelectedTables[name] = this.dataFrame!
         .groupBy([name])
@@ -170,64 +175,41 @@ export class StackedBarChart extends DG.JsViewer {
 
     this.barStats = {};
 
-    for (const [name, df] of Object.entries(this.aggregatedTables)) {
-      const colObj: {
-        'name': string,
-        'data': { 'name': string, 'count': number, 'highlightedCount': number, 'selectedCount': number}[],
-      } = {'name': name, 'data': []};
+    for (const [name, df] of Object.entries(this.aggregatedFilterTables)) {
+      const colData: {'name': string, 'count': number, 'selectedCount': number}[] = [];
       const aminoCol = df.getCol(name);
       const aminoCountCol = df.getCol(`${name}_count`);
-      this.barStats[colObj['name']] = colObj['data'];
-      
+      this.barStats[name] = colData;
+
       for (let i = 0; i < df.rowCount; i++) {
         const amino = aminoCol.get(i);
         const aminoCount = aminoCountCol.get(i);
-        const aminoObj = {'name': amino, 'count': aminoCount, 'highlightedCount': 0, 'selectedCount': 0};
-        const aggHighlightedAminoCol = this.aggregatedHighlightedTables[name].getCol(`${name}`);
-        const aggHighlightedCountCol = this.aggregatedHighlightedTables[name].getCol(`${name}_count`);
+        const aminoObj = {'name': amino, 'count': aminoCount, 'selectedCount': 0};
         const aggSelectedAminoCol = this.aggregatedSelectedTables[name].getCol(`${name}`);
         const aggSelectedCountCol = this.aggregatedSelectedTables[name].getCol(`${name}_count`);
 
         if (!amino || amino === this.dataEmptyAA)
           continue;
 
-        colObj['data'].push(aminoObj);
-
-        for (const col of [aggHighlightedCountCol, aggSelectedCountCol]) {
-          for (let j = 0; j < col.length; j++) {
-            const highlightedAmino = aggHighlightedAminoCol.get(j);
-            const selectedAmino = aggSelectedAminoCol.get(j);
-            const curAmino = (col == aggHighlightedCountCol ? highlightedAmino : selectedAmino);
-            if (curAmino == amino) {
-              aminoObj[col == aggHighlightedCountCol ? 'highlightedCount' : 'selectedCount'] = col.get(j);
-              break;
-            }
+        colData.push(aminoObj);
+
+        for (let j = 0; j < aggSelectedCountCol.length; j++) {
+          const selectedAmino = aggSelectedAminoCol.get(j);
+          const curAmino = (selectedAmino);
+          if (curAmino == amino) {
+            aminoObj['selectedCount'] = aggSelectedCountCol.get(j);
+            break;
           }
         }
       }
 
-      colObj['data'] = colObj['data'].sort((o1, o2) => {
-        if (this.ord[o1['name']] > this.ord[o2['name']])
-          return -1;
-
-        if (this.ord[o1['name']] < this.ord[o2['name']])
-          return 1;
-
-        return 0;
-      });
+      colData.sort((o1, o2) => this.ord[o2['name']] - this.ord[o1['name']]);
     }
 
     this.max = this.dataFrame!.filter.trueCount;
   }
 
-  renderBarToCanvas(
-    g: CanvasRenderingContext2D,
-    cell: DG.GridCell,
-    x: number,
-    y: number,
-    w: number,
-    h: number,
-  ): void {
+  renderBarToCanvas(g: CanvasRenderingContext2D, cell: DG.GridCell, x: number, y: number, w: number, h: number) {
     const name = cell.tableColumn!.name;
     const colNameSize = g.measureText(name).width;
     const barData = this.barStats[name];
@@ -254,7 +236,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,,] = cp.getColorAAPivot(obj['name']);
+      const [color, aarOuter] = PeptidesController.chemPalette.getColorAAPivot(obj['name']);
       const textSize = g.measureText(aarOuter);
       const fontSize = 11;
       const leftMargin = (w - (aarOuter.length > 1 ? fontSize : textSize.width - 8)) / 2;
@@ -270,11 +252,10 @@ export class StackedBarChart extends DG.JsViewer {
       if (textSize.width <= subBartHeight) {
         const origTransform = g.getTransform();
 
-        if (color != ChemPalette.undefinedColor) {
+        if (color != PeptidesController.chemPalette.undefinedColor) {
           g.fillRect(x + xStart, y + yStart, barWidth, subBartHeight);
           g.fillStyle = 'black';
-        }
-        else
+        } else
           g.strokeRect(x + xStart + 0.5, y + yStart, barWidth - 1, subBartHeight);
 
         g.font = `${fontSize}px monospace`;
@@ -289,9 +270,8 @@ export class StackedBarChart extends DG.JsViewer {
 
         g.fillText(aarOuter, absX, absY);
         g.setTransform(origTransform);
-      } else {
+      } else
         g.fillRect(x + xStart, y + yStart, barWidth, subBartHeight);
-      }
 
       if (obj['selectedCount'] > eps) {
         g.fillStyle = 'rgb(255,165,0)';
@@ -299,29 +279,20 @@ export class StackedBarChart extends DG.JsViewer {
           x + xStart - w * selectLineRatio * 2,
           y + yStart,
           barWidth * selectLineRatio,
-          h * obj['selectedCount'] / this.max - gapSize
-        );
-      } 
-
-      if (obj['highlightedCount'] > eps && obj['highlightedCount'] > obj['selectedCount']) {
-        g.fillStyle = 'rgb(209,242,251)';
-        g.fillRect(
-          x + xStart - w * selectLineRatio * 2,
-          y + yStart + h * obj['selectedCount'] / this.max - gapSize,
-          barWidth * selectLineRatio,
-          h * (obj['highlightedCount'] - obj['selectedCount']) / this.max - gapSize
+          h * obj['selectedCount'] / this.max - gapSize,
         );
       }
 
       sum -= obj['count'];
     });
-    return;
   }
 
-  highlight(cell: DG.GridCell, offsetX:number, offsetY:number, mouseEvent: MouseEvent): void {
+  findAARandPosition(cell: DG.GridCell, mouseEvent: MouseEvent) {
     if (!cell.tableColumn?.name || !this.aminoColumnNames.includes(cell.tableColumn.name))
-      return;
-      
+      return null;
+
+    const offsetX = mouseEvent.offsetX;
+    const offsetY = mouseEvent.offsetY;
     const colName = cell.tableColumn?.name;
     const innerMargin = 0.02;
     const margin = 0.2;
@@ -339,71 +310,53 @@ export class StackedBarChart extends DG.JsViewer {
       sum += obj['count'];
     });
 
-    this.highlighted = null;
-    barData.forEach((obj) => {
+    const xStart = x + (w - barWidth) / 2;
+    for (const obj of barData) {
       const sBarHeight = h * obj['count'] / this.max;
       const gapSize = sBarHeight * innerMargin;
       const verticalShift = (this.max - sum) / this.max;
       const subBartHeight = sBarHeight - gapSize;
-      const yStart = h * verticalShift + gapSize / 2;
-      const xStart = (w - barWidth) / 2;
-
-      if (offsetX >= x + xStart &&
-          offsetY >= y + yStart &&
-          offsetX <= x + xStart + barWidth &&
-          offsetY <= y + yStart + subBartHeight) {
-        this.highlighted = {'colName': colName, 'aaName': obj['name']};
-      }
-      
-      sum -= obj['count'];
-    });
-
-    if (!this.highlighted)
-      return;
+      const yStart = y + h * verticalShift + gapSize / 2;
 
-    if (mouseEvent.type == 'click') {
-      let idx = -1;
+      const isIntersectingX = offsetX >= xStart && offsetX <= xStart + barWidth;
+      const isIntersectingY = offsetY >= yStart && offsetY <= yStart + subBartHeight;
 
-      for (let i = 0; i < this.selected.length; ++i) 
-        if (JSON.stringify(this.selected[i]) == JSON.stringify(this.highlighted))
-          idx = i;
+      if (isIntersectingX && isIntersectingY)
+        return {'colName': colName, 'aaName': obj['name']};
 
-      if (mouseEvent.shiftKey && idx == -1) 
-        this.selected.push(this.highlighted);
+      sum -= obj['count'];
+    }
 
-      if (mouseEvent.shiftKey && (mouseEvent.ctrlKey || mouseEvent.metaKey) && idx != -1) 
-        this.selected.splice(idx, 1);
-    } 
+    return null;
   }
 
-  unhighlight(): void {
-    this.highlighted = null;
-    this.highlightedMask!.setAll(false);
+  unhighlight() {
+    ui.tooltip.hide();
     this.computeData();
   }
 
-  beginSelection(event: MouseEvent): void {
-    if (!this.dataFrame)
+  /**
+   * Requests highlight/select/filter action based on currentBarPart
+   * @param event 
+   * @returns 
+   */
+  requestAction(event: MouseEvent) {
+    if (!this._currentBarPart)
       return;
-
-    this.highlightedMask!.setAll(false);
-
-    this.dataFrame.selection.handleClick((i: number) => {
-      for (const high of this.selected) 
-        if (high['aaName'] === (this.dataFrame!.getCol(high['colName']).get(i)))
-          return true;
-      return false;
-    }, event);
-    
-    if (this.highlighted) {
-      this.dataFrame.rows.match({[this.highlighted['colName']]: this.highlighted['aaName']}).highlight();
-      this.highlightedMask!.handleClick((i: number) => {
-        if (this.highlighted!['aaName'] === (this.dataFrame!.getCol(this.highlighted!['colName']).get(i)))
-          return true;
-        return false;
-      }, event);
-    } 
-
-    this.computeData();
+    let aar = this._currentBarPart!['aaName'];
+    let position = this._currentBarPart!['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);
+    }
   }
 }

package/src/widgets/analyze-peptides.ts

@@ -1,9 +1,12 @@
 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';
 
 /**
  * Peptide analysis widget.
@@ -15,9 +18,7 @@ import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations'
  * @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> {
+export async function analyzePeptidesWidget(currentDf: DG.DataFrame, col: DG.Column): Promise<DG.Widget> {
   let tempCol = null;
   let tempDf: DG.DataFrame;
   let newScaledColName: string;
@@ -32,13 +33,14 @@ export async function analyzePeptidesWidget(
     'Scaling', 'none', ['none', 'lg', '-lg'],
     async (currentMethod: string) => {
       const currentActivityCol = activityColumnChoice.value.name;
+      
 
       [tempDf, newScaledColName] = await PeptidesController.scaleActivity(
-        currentMethod, currentActivityCol, `${currentActivityCol}Scaled`, currentDf);
+        currentMethod, currentDf, currentActivityCol, true);
 
       const hist = tempDf.plot.histogram({
         filteringEnabled: false,
-        valueColumnName: `${currentActivityCol}Scaled`,
+        valueColumnName: C.COLUMNS_NAMES.ACTIVITY_SCALED,
         legendVisibility: 'Never',
         showXAxis: true,
         showColumnSelector: false,
@@ -68,30 +70,49 @@ export async function analyzePeptidesWidget(
   const startBtn = ui.button('Launch SAR', async () => {
     const progress = DG.TaskBarProgressIndicator.create('Loading SAR...');
     if (activityColumnChoice.value.type === DG.TYPE.FLOAT) {
-      const activityColumn = activityColumnChoice.value.name;
-      const activityColumnScaled = `${activityColumn}Scaled`;
-      const originalDfColumns = (currentDf.columns as DG.ColumnList).names();
+      const activityColumn: string = activityColumnChoice.value.name;
+      // const activityColumnScaled = `${activityColumn}Scaled`;
+      // const originalDfColumns = (currentDf.columns as DG.ColumnList).names();
       const options: StringDictionary = {
-        'activityColumnName': activityColumn,
         'scaling': activityScalingMethod.value,
       };
 
-      const scaledCol = tempDf.getCol(activityColumnScaled);
-      (currentDf.columns as DG.ColumnList).add(scaledCol);
-      tableGrid.col(activityColumnScaled)!.name = newScaledColName;
-      scaledCol.temp['gridName'] = newScaledColName;
-      if (newScaledColName === activityColumn)
-        tableGrid.col(activityColumn)!.name = `~${activityColumn}`;
-      tableGrid.columns.setOrder([newScaledColName]);
+      //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 peptides = PeptidesController.getInstance(currentDf);
-      await peptides.init(tableGrid, view, options, col, originalDfColumns);
+      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();
   });
   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');
 
   return new DG.Widget(

package/src/widgets/distribution.ts

@@ -0,0 +1,61 @@
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import * as C from '../utils/constants';
+import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations';
+import {FilteringStatistics} from '../utils/filtering-statistics';
+
+export function getDistributionPlot(df: DG.DataFrame, valueCol: string, splitCol: string) {
+  return df.plot.histogram({
+    // const hist = originalDf.plot.histogram({
+    filteringEnabled: false,
+    valueColumnName: valueCol,
+    splitColumnName: splitCol,
+    legendVisibility: 'Never',
+    showXAxis: true,
+    showColumnSelector: false,
+    showRangeSlider: false,
+  });
+}
+
+export function getDistributionWidget(table: DG.DataFrame): DG.Widget {
+  // const labelStr = this.multipleFilter.filterLabel;
+  const splitCol = table.col(C.COLUMNS_NAMES.SPLIT_COL);
+  if (!splitCol)
+    return new DG.Widget(ui.divText('No distribution'));
+  let [aarStr, otherStr] = splitCol.categories;
+  if (typeof otherStr === 'undefined')
+    [aarStr, otherStr] = [otherStr, aarStr];
+  // const currentColor = DG.Color.toHtml(DG.Color.orange);
+  // const otherColor = DG.Color.toHtml(DG.Color.blue);
+  const currentColor = DG.Color.toHtml(DG.Color.getCategoryColor(splitCol, aarStr));
+  const otherColor = DG.Color.toHtml(DG.Color.getCategoryColor(splitCol, otherStr));
+
+  const currentLabel = ui.label(aarStr, {style: {color: currentColor}});
+  const otherLabel = ui.label(otherStr, {style: {color: otherColor}});
+  const elements: (HTMLLabelElement | HTMLElement)[] = [currentLabel, otherLabel];
+
+  const getContent = () => {
+    // const processedDf =
+    //   table.clone(null, [C.COLUMNS_NAMES.ACTIVITY_SCALED, C.COLUMNS_NAMES.SPLIT_COL]);
+    const hist = getDistributionPlot(table, C.COLUMNS_NAMES.ACTIVITY_SCALED, C.COLUMNS_NAMES.SPLIT_COL).root;
+
+    hist.style.width = 'auto';
+    elements.push(hist);
+
+    const stats = (table.temp[C.STATS] as FilteringStatistics).result;
+    if (stats) {
+      const tableMap: StringDictionary = {
+        'Statistics:': '',
+        'Count': stats.count.toString(),
+        'p-value': stats.pValue < 0.01 ? '<0.01' : stats.pValue.toFixed(2),
+        'Mean difference': stats.meanDifference.toFixed(2),
+      };
+
+      elements.push(ui.tableFromMap(tableMap));
+    }
+    return ui.divV(elements);
+  };
+
+  return new DG.Widget(getContent());
+}

package/src/widgets/manual-alignment.ts

@@ -33,9 +33,9 @@ export function manualAlignmentWidget(alignedSequenceCol: DG.Column, currentDf:
     grok.shell.o = null;
     grok.shell.o = temp;
 
-    // PeptidesModel.getOrInit(currentDf).updateDefault();
-    // Peptides.getOrInitModel(currentDf);
-    await PeptidesController.getInstance(currentDf).updateDefault();
+    const peptidesController = await PeptidesController.getInstance(currentDf);
+    peptidesController.init(currentDf);
+    peptidesController.updateDefault();
   });
 
   const resetBtn = ui.button(

package/src/widgets/peptide-molecule.ts

@@ -44,16 +44,16 @@ export async function peptideMoleculeWidget(pep: string): Promise<DG.Widget> {
 export function getMolecule(pep: string): string {
   const split = pep.split('-');
   const mols = [];
-  const chemPalette = PeptidesController.getChemPalette();
+  const chemPalette = PeptidesController.chemPalette;
   for (let i = 1; i < split.length - 1; i++) {
     if (split[i] in chemPalette.AASmiles) {
       const aar = chemPalette.AASmiles[split[i]];
-      mols[i] = aar.substr(0, aar.length - 1);
+      mols[i] = aar.substring(0, aar.length - 1);
     } else if (!split[i] || split[i] == '-')
       mols[i] = '';
     else
       return '';
   }
-  const smiles = mols.join('') + 'O';
-  return smiles;
+
+  return mols.join('') + 'O';
 }