@datagrok/peptides 0.8.10 → 0.8.12

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

@@ -4,22 +4,29 @@ 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';
+
 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,16 +39,17 @@ 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.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.highlighted) {
-          let elements: HTMLElement[] = [];
-          elements = elements.concat([ui.divText(barchart.highlighted.aaName)]);
-          ui.tooltip.show(ui.divV(elements), x, y);
-        }
+      } 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;
@@ -72,36 +80,33 @@ export function addViewerToHeader(grid: DG.Grid, barchart: StackedBarChart) {
   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', '-');
   }
 
+  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'],
@@ -122,12 +127,14 @@ export class StackedBarChart extends DG.JsViewer {
   }
 
   // Stream subscriptions
-  onTableAttached() {
+  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()));
     }
   }
 
@@ -141,7 +148,7 @@ export class StackedBarChart extends DG.JsViewer {
     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;
@@ -149,23 +156,16 @@ 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])
         .whereRowMask(this.dataFrame!.selection)
@@ -175,43 +175,35 @@ 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'].sort((o1, o2) => this.ord[o2['name']] - this.ord[o1['name']]);
+      colData.sort((o1, o2) => this.ord[o2['name']] - this.ord[o1['name']]);
     }
 
     this.max = this.dataFrame!.filter.trueCount;
@@ -291,24 +283,16 @@ export class StackedBarChart extends DG.JsViewer {
         );
       }
 
-      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,
-        );
-      }
-
       sum -= obj['count'];
     });
   }
 
-  highlight(cell: DG.GridCell, offsetX:number, offsetY:number, mouseEvent: MouseEvent) {
+  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;
@@ -326,73 +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;
+      const yStart = y + h * verticalShift + gapSize / 2;
 
-      if (offsetX >= x + xStart &&
-          offsetY >= y + yStart &&
-          offsetX <= x + xStart + barWidth &&
-          offsetY <= y + yStart + subBartHeight)
-        this.highlighted = {'colName': colName, 'aaName': obj['name']};
+      const isIntersectingX = offsetX >= xStart && offsetX <= xStart + barWidth;
+      const isIntersectingY = offsetY >= yStart && offsetY <= yStart + subBartHeight;
 
+      if (isIntersectingX && isIntersectingY)
+        return {'colName': colName, 'aaName': obj['name']};
 
       sum -= obj['count'];
-    });
-
-    if (!this.highlighted)
-      return;
-
-    if (mouseEvent.type == 'click') {
-      let idx = -1;
-
-      for (let i = 0; i < this.selected.length; ++i) {
-        if (JSON.stringify(this.selected[i]) == JSON.stringify(this.highlighted))
-          idx = i;
-      }
-
-      if (mouseEvent.shiftKey && idx == -1)
-        this.selected.push(this.highlighted);
-
-      if (mouseEvent.shiftKey && (mouseEvent.ctrlKey || mouseEvent.metaKey) && idx != -1)
-        this.selected.splice(idx, 1);
     }
+
+    return null;
   }
 
   unhighlight() {
-    this.highlighted = null;
-    this.highlightedMask!.setAll(false);
+    ui.tooltip.hide();
     this.computeData();
   }
 
-  beginSelection(event: MouseEvent) {
-    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;
+    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;
       }
-      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.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);
     }
-
-    this.computeData();
   }
 }

package/src/widgets/analyze-peptides.ts

@@ -5,6 +5,8 @@ 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.
@@ -16,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;
@@ -33,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,
@@ -69,45 +70,47 @@ 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]);
-
-      const peptides = await PeptidesController.getInstance(currentDf);
-      await peptides.init(tableGrid, view, options, col, originalDfColumns);
+      //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 = 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 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,
-      };
+  //     const options: {[key: string]: string} = {
+  //       'activityColumnName': activityColumnChoice.value.name,
+  //       'scaling': activityScalingMethod.value,
+  //     };
 
-      await callMVA(tableGrid, view, currentDf, options, col);
+  //     await callMVA(tableGrid, view, currentDf, options, col);
 
-      progress.close();
-    } else
-      grok.shell.error('The activity column must be of floating point number type!');
-  });
+  //     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');

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

@@ -34,6 +34,7 @@ export function manualAlignmentWidget(alignedSequenceCol: DG.Column, currentDf:
     grok.shell.o = temp;
 
     const peptidesController = await PeptidesController.getInstance(currentDf);
+    peptidesController.init(currentDf);
     peptidesController.updateDefault();
   });
 

package/src/widgets/subst-table.ts

@@ -1,27 +1,27 @@
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
+import { PeptidesController } from '../peptides';
 
-export function substTableWidget(table: DG.DataFrame): DG.Widget {
-  if (!table?.temp['isReal'])
-    return new DG.Widget(ui.label('No substitution'));
+export async function substitutionsWidget(table: DG.DataFrame): Promise<DG.Widget> {
+  const controller = await PeptidesController.getInstance(table);
+  controller.init(table);
+  const substTable = controller.getSubstitutions();
 
-  const dfRowCount = table.rowCount;
+  if (!substTable)
+    return new DG.Widget(ui.label('No substitution table generated'));
+
+  const dfRowCount = substTable.rowCount;
   const aminoInputFrom = ui.stringInput('from', '');
   const aminoInputTo = ui.stringInput('to', '');
   const fromToMap: {[key: string]: DG.BitSet} = {};
   let aminoFrom = '';
   let aminoTo = '';
-  const initialCol: DG.Column = table.columns.byName('Initial');
-  const substitutedCol: DG.Column = table.columns.byName('Substituted');
-
-  for (let i = 0; i < initialCol.length; ++i) {
-    const sequenceDifference = `${initialCol.get(i)}#${substitutedCol.get(i)}`;
-    initialCol.set(i, sequenceDifference);
-  }
+  const initialCol: DG.Column = substTable.getCol('Initial');
+  const substitutedCol: DG.Column = substTable.getCol('Substituted');
 
   initialCol.semType = 'alignedSequenceDifference';
   initialCol.name = 'Substitution';
-  table.columns.remove('Substituted');
+  // substTable.columns.remove('Substituted');
   // const substCol = table.getCol('Substitution');
 
   for (let i = 0; i < dfRowCount; ++i) {
@@ -33,7 +33,7 @@ export function substTableWidget(table: DG.DataFrame): DG.Widget {
 
     for (let j = 0; j < aminosFrom.length; ++j) {
       if (aminosFrom[j] != aminosTo[j]) {
-        const idx = (aminosFrom[j] === '' ? '-' : aminosFrom[j]) + '#' + (aminosTo[j] === '' ? '-' : aminosTo[j]);
+        const idx = `${getAmino(aminosFrom[j])}#${getAmino(aminosTo[j])}`;
 
         if (!(idx in fromToMap))
           fromToMap[idx] = DG.BitSet.create(dfRowCount);
@@ -42,22 +42,32 @@ export function substTableWidget(table: DG.DataFrame): DG.Widget {
     }
   }
 
+  for (let i = 0; i < initialCol.length; ++i) {
+    const sequenceDifference = `${initialCol.get(i)}#${substitutedCol.get(i)}`;
+    initialCol.set(i, sequenceDifference);
+  }
+
   aminoInputFrom.onInput(() => {
-    aminoFrom = aminoInputFrom.value;
-    const fromKey = aminoFrom + '#' + aminoTo;
+    aminoFrom = getAmino(aminoInputFrom.value);
+    const fromKey = `${aminoFrom}#${aminoTo}`;
     if (fromKey in fromToMap)
-      table.selection.copyFrom(fromToMap[fromKey]);
+      substTable.selection.copyFrom(fromToMap[fromKey]);
   });
 
   aminoInputTo.onInput(() => {
-    aminoTo = aminoInputTo.value;
-    const toKey = aminoFrom + '#' + aminoTo;
+    aminoTo = getAmino(aminoInputTo.value);
+    const toKey = `${aminoFrom}#${aminoTo}`;
     if (toKey in fromToMap)
-      table.selection.copyFrom(fromToMap[toKey]);
+      substTable.selection.copyFrom(fromToMap[toKey]);
   });
 
-  const grid = table.plot.grid();
+  const grid = substTable.plot.grid();
   grid.props.allowEdit = false;
   grid.root.style.width = 'auto';
+  grid.root.style.height = '150px';
   return new DG.Widget(ui.divV([aminoInputFrom.root, aminoInputTo.root, grid.root]));
 }
+
+function getAmino(amino: string): string {
+  return amino === '' ? '-' : amino;
+}