@datagrok/peptides 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagrok/peptides",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": {
     "name": "Volodymyr Dyma",
     "email": "vdyma@datagrok.ai"
@@ -43,10 +43,6 @@
     "@types/node-fetch": "^2.6.2",
     "node-fetch": "^2.6.7"
   },
-  "sources": [
-    "common/ngl_viewer/ngl.js",
-    "helm/JSDraw/Pistoia.HELM.js"
-  ],
   "scripts": {
     "link-api": "npm link datagrok-api",
     "link-utils": "npm link @datagrok-libraries/utils",

package/src/__jest__/remote.test.ts

@@ -46,15 +46,16 @@ it('TEST', async () => {
         const cMessage = df.columns.byName('result');
         const cCat = df.columns.byName('category');
         const cName = df.columns.byName('name');
+        const cTime = df.columns.byName('ms');
         let failed = false;
         let passReport = '';
         let failReport = '';
         for (let i = 0; i < df.rowCount; i++) {
           if (cStatus.get(i))
-            passReport += `Test result : Success : ${targetPackage}.${cCat.get(i)}.${cName.get(i)} : ${cMessage.get(i)}\n`;
+            passReport += `Test result : Success : ${cTime.get(i)} : ${targetPackage}.${cCat.get(i)}.${cName.get(i)} : ${cMessage.get(i)}\n`;
           else {
             failed = true;
-            failReport += `Test result : Failed : ${targetPackage}.${cCat.get(i)}.${cName.get(i)} : ${cMessage.get(i)}\n`;
+            failReport += `Test result : Failed : ${cTime.get(i)} : ${targetPackage}.${cCat.get(i)}.${cName.get(i)} : ${cMessage.get(i)}\n`;
           }
         }
         resolve({failReport, passReport, failed});

package/src/model.ts

@@ -4,29 +4,25 @@ import * as DG from 'datagrok-api/dg';
 
 import {splitAlignedSequences} from '@datagrok-libraries/bio/src/utils/splitter';
 
-import {Subject, Observable} from 'rxjs';
+import * as rxjs from 'rxjs';
+
 import * as C from './utils/constants';
 import * as type from './utils/types';
-import {calculateBarsData, getTypedArrayConstructor, scaleActivity} from './utils/misc';
+import {calculateBarsData, getTypedArrayConstructor, isGridCellInvalid, scaleActivity} from './utils/misc';
 import {SARViewer, SARViewerBase, SARViewerVertical} from './viewers/sar-viewer';
 import {PeptideSpaceViewer} from './viewers/peptide-space-viewer';
 import {renderBarchart, renderSARCell, setAARRenderer} from './utils/cell-renderer';
-import {substitutionsWidget} from './widgets/subst-table';
+import {mutationCliffsWidget} from './widgets/mutation-cliffs';
 import {getDistributionAndStats, getDistributionWidget} from './widgets/distribution';
-import {getStats, Stats} from './utils/filtering-statistics';
-import * as rxjs from 'rxjs';
-
+import {getStats, Stats} from './utils/statistics';
 
 export class PeptidesModel {
   static modelName = 'peptidesModel';
 
-  _statsDataFrameSubject = new Subject<DG.DataFrame>();
-  _sarGridSubject = new Subject<DG.Grid>();
-  _sarVGridSubject = new Subject<DG.Grid>();
-  _substitutionTableSubject = new Subject<type.SubstitutionsInfo>();
+  _sarGridSubject = new rxjs.Subject<DG.Grid>();
+  _sarVGridSubject = new rxjs.Subject<DG.Grid>();
 
   _isUpdating: boolean = false;
-  _isSubstInitialized = false;
   isBitsetChangedInitialized = false;
   isCellChanging = false;
 
@@ -65,13 +61,9 @@ export class PeptidesModel {
     return dataFrame.temp[PeptidesModel.modelName] as PeptidesModel;
   }
 
-  get onStatsDataFrameChanged(): Observable<DG.DataFrame> {return this._statsDataFrameSubject.asObservable();}
-
-  get onSARGridChanged(): Observable<DG.Grid> {return this._sarGridSubject.asObservable();}
-
-  get onSARVGridChanged(): Observable<DG.Grid> {return this._sarVGridSubject.asObservable();}
+  get onSARGridChanged(): rxjs.Observable<DG.Grid> {return this._sarGridSubject.asObservable();}
 
-  get onSubstTableChanged(): Observable<type.SubstitutionsInfo> {return this._substitutionTableSubject.asObservable();}
+  get onSARVGridChanged(): rxjs.Observable<DG.Grid> {return this._sarVGridSubject.asObservable();}
 
   get currentSelection(): type.SelectionObject {
     this._currentSelection ??= JSON.parse(this.df.tags[C.TAGS.SELECTION] || '{}');
@@ -120,7 +112,7 @@ export class PeptidesModel {
     const acc = ui.accordion();
     acc.root.style.width = '100%';
     acc.addTitle(ui.h1(`${this.df.selection.trueCount} selected rows`));
-    acc.addPane('Substitutions', () => substitutionsWidget(this.df, this).root, true);
+    acc.addPane('Substitutions', () => mutationCliffsWidget(this.df, this).root, true);
     acc.addPane('Distribtution', () => getDistributionWidget(this.df, this).root, true);
 
     return acc;
@@ -158,23 +150,17 @@ export class PeptidesModel {
     if ((this._sourceGrid && !this._isUpdating && proprtyChanged) || !this.isInitialized) {
       this.isInitialized = true;
       this._isUpdating = true;
-      const [viewerGrid, viewerVGrid, statsDf] = this.initializeViewersComponents();
+      const [viewerGrid, viewerVGrid] = this.initializeViewersComponents();
       //FIXME: modify during the initializeViewersComponents stages
-      this._statsDataFrameSubject.next(statsDf);
       this._sarGridSubject.next(viewerGrid);
       this._sarVGridSubject.next(viewerVGrid);
-      if (viewer.showSubstitution) {
-        this._substitutionTableSubject.next(this.substitutionsInfo);
-        this._isSubstInitialized = true;
-      }
 
       this.invalidateSelection();
-
       this._isUpdating = false;
     }
   }
 
-  initializeViewersComponents(): [DG.Grid, DG.Grid, DG.DataFrame] {
+  initializeViewersComponents(): [DG.Grid, DG.Grid] {
     if (this._sourceGrid === null)
       throw new Error(`Source grid is not initialized`);
 
@@ -207,14 +193,14 @@ export class PeptidesModel {
     //unpivot a table and handle duplicates
     let matrixDf = splitSeqDf.groupBy(positionColumns).aggregate();
 
-    matrixDf = matrixDf.unpivot([], positionColumns, C.COLUMNS_NAMES.POSITION, C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
+    matrixDf = matrixDf.unpivot([], positionColumns, C.COLUMNS_NAMES.POSITION, C.COLUMNS_NAMES.MONOMER);
 
     //statistics for specific AAR at a specific position
     this.statsDf = this.calculateStatistics(matrixDf);
 
     // SAR matrix table
     //pivot a table to make it matrix-like
-    matrixDf = this.statsDf.groupBy([C.COLUMNS_NAMES.AMINO_ACID_RESIDUE])
+    matrixDf = this.statsDf.groupBy([C.COLUMNS_NAMES.MONOMER])
       .pivot(C.COLUMNS_NAMES.POSITION)
       .add('first', C.COLUMNS_NAMES.MEAN_DIFFERENCE, '')
       .aggregate();
@@ -226,8 +212,7 @@ export class PeptidesModel {
     // SAR vertical table (naive, choose best Mean difference from pVals <= 0.01)
     const sequenceDf = this.createVerticalTable();
 
-    if (viewer.showSubstitution || !this._isSubstInitialized)
-      this.calcSubstitutions();
+    this.calcSubstitutions();
 
     const [sarGrid, sarVGrid] = this.createGrids(matrixDf, positionColumns, sequenceDf, alphabet);
 
@@ -250,7 +235,7 @@ export class PeptidesModel {
     this.postProcessGrids(sarGrid, sarVGrid);
 
     //TODO: return class instead
-    return [sarGrid, sarVGrid, this.statsDf];
+    return [sarGrid, sarVGrid];
   }
 
   calcSubstitutions(): void {
@@ -387,7 +372,7 @@ export class PeptidesModel {
   }
 
   calculateStatistics(matrixDf: DG.DataFrame): DG.DataFrame {
-    matrixDf = matrixDf.groupBy([C.COLUMNS_NAMES.POSITION, C.COLUMNS_NAMES.AMINO_ACID_RESIDUE]).aggregate();
+    matrixDf = matrixDf.groupBy([C.COLUMNS_NAMES.POSITION, C.COLUMNS_NAMES.MONOMER]).aggregate();
 
     //calculate p-values based on t-test
     const matrixCols = matrixDf.columns;
@@ -395,7 +380,7 @@ export class PeptidesModel {
     const pValCol = matrixCols.addNewFloat(C.COLUMNS_NAMES.P_VALUE);
     const countCol = matrixCols.addNewInt(C.COLUMNS_NAMES.COUNT);
     const ratioCol = matrixCols.addNewFloat(C.COLUMNS_NAMES.RATIO);
-    const aarCol = matrixDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
+    const aarCol = matrixDf.getCol(C.COLUMNS_NAMES.MONOMER);
     const posCol = matrixDf.getCol(C.COLUMNS_NAMES.POSITION);
     const activityCol: number[] = this.df.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED).toList();
     const sourceDfLen = activityCol.length;
@@ -428,22 +413,22 @@ export class PeptidesModel {
       absMDCol.init((i) => Math.abs(mdCol.get(i)));
     }
 
-    const aarWeightsDf = this.statsDf.groupBy([C.COLUMNS_NAMES.AMINO_ACID_RESIDUE]).sum(sortArgument, 'weight')
+    const aarWeightsDf = this.statsDf.groupBy([C.COLUMNS_NAMES.MONOMER]).sum(sortArgument, 'weight')
       .aggregate();
-    const aarList = aarWeightsDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE).toList();
+    const aarList = aarWeightsDf.getCol(C.COLUMNS_NAMES.MONOMER).toList();
     const getWeight = (aar: string): number => aarWeightsDf
       .groupBy(['weight'])
-      .where(`${C.COLUMNS_NAMES.AMINO_ACID_RESIDUE} = ${aar}`)
+      .where(`${C.COLUMNS_NAMES.MONOMER} = ${aar}`)
       .aggregate()
       .get('weight', 0) as number;
     aarList.sort((first, second) => getWeight(second) - getWeight(first));
 
-    matrixDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE).setCategoryOrder(aarList);
+    matrixDf.getCol(C.COLUMNS_NAMES.MONOMER).setCategoryOrder(aarList);
   }
 
   createVerticalTable(): DG.DataFrame {
     // TODO: aquire ALL of the positions
-    const columns = [C.COLUMNS_NAMES.MEAN_DIFFERENCE, C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, C.COLUMNS_NAMES.POSITION,
+    const columns = [C.COLUMNS_NAMES.MEAN_DIFFERENCE, C.COLUMNS_NAMES.MONOMER, C.COLUMNS_NAMES.POSITION,
       'Count', 'Ratio', C.COLUMNS_NAMES.P_VALUE];
     let sequenceDf = this.statsDf.groupBy(columns)
       .where('pValue <= 0.1')
@@ -469,8 +454,8 @@ export class PeptidesModel {
   createGrids(
     matrixDf: DG.DataFrame, positionColumns: string[], sequenceDf: DG.DataFrame, alphabet: string): DG.Grid[] {
     const sarGrid = matrixDf.plot.grid();
-    sarGrid.sort([C.COLUMNS_NAMES.AMINO_ACID_RESIDUE]);
-    sarGrid.columns.setOrder([C.COLUMNS_NAMES.AMINO_ACID_RESIDUE].concat(positionColumns as C.COLUMNS_NAMES[]));
+    sarGrid.sort([C.COLUMNS_NAMES.MONOMER]);
+    sarGrid.columns.setOrder([C.COLUMNS_NAMES.MONOMER].concat(positionColumns as C.COLUMNS_NAMES[]));
 
     const sarVGrid = sequenceDf.plot.grid();
     sarVGrid.sort([C.COLUMNS_NAMES.POSITION]);
@@ -478,11 +463,11 @@ export class PeptidesModel {
     pValGridCol.format = '#.000';
     pValGridCol.name = 'P-value';
 
-    let tempCol = matrixDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
+    let tempCol = matrixDf.getCol(C.COLUMNS_NAMES.MONOMER);
     if (tempCol)
       setAARRenderer(tempCol, alphabet, sarGrid);
 
-    tempCol = sequenceDf.getCol(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE);
+    tempCol = sequenceDf.getCol(C.COLUMNS_NAMES.MONOMER);
     if (tempCol)
       setAARRenderer(tempCol, alphabet, sarGrid);
 
@@ -563,11 +548,11 @@ export class PeptidesModel {
           const gridTable = cell.grid.table;
           const currentPosition: string = tableColName !== C.COLUMNS_NAMES.MEAN_DIFFERENCE ?
             tableColName : gridTable.get(C.COLUMNS_NAMES.POSITION, tableRowIndex);
-          const currentAAR: string = gridTable.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, tableRowIndex);
+          const currentAAR: string = gridTable.get(C.COLUMNS_NAMES.MONOMER, tableRowIndex);
 
           const viewer = this.getViewer();
           renderSARCell(canvasContext, currentAAR, currentPosition, this.statsDf, viewer.bidirectionalAnalysis, mdCol,
-            bound, cellValue, this.currentSelection, viewer.showSubstitution ? this.substitutionsInfo : null);
+            bound, cellValue, this.currentSelection, this.substitutionsInfo);
         }
         args.preventDefault();
       }
@@ -605,7 +590,7 @@ export class PeptidesModel {
 
       if (!cell.isRowHeader && !cell.isColHeader && tableCol && tableRowIndex != null) {
         const table = cell.grid.table;
-        const currentAAR = table.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, tableRowIndex);
+        const currentAAR = table.get(C.COLUMNS_NAMES.MONOMER, tableRowIndex);
 
         if (tableCol.semType == C.SEM_TYPES.MONOMER)
           this.showMonomerTooltip(currentAAR, x, y);
@@ -676,26 +661,24 @@ export class PeptidesModel {
     const chooseAction = (aar: string, position: string, isShiftPressed: boolean): void =>
       isShiftPressed ? this.modifyCurrentSelection(aar, position) : this.initCurrentSelection(aar, position);
 
-    const gridCellValidation = (gc: DG.GridCell | null): boolean => !gc || !gc.cell.value || !gc.tableColumn ||
-      gc.tableRowIndex == null || gc.tableRowIndex == -1;
     this._sarGrid.root.addEventListener('click', (ev) => {
       const gridCell = this._sarGrid.hitTest(ev.offsetX, ev.offsetY);
-      if (gridCellValidation(gridCell) || gridCell!.tableColumn!.name == C.COLUMNS_NAMES.AMINO_ACID_RESIDUE)
+      if (isGridCellInvalid(gridCell) || gridCell!.tableColumn!.name == C.COLUMNS_NAMES.MONOMER)
         return;
 
       const position = gridCell!.tableColumn!.name;
-      const aar = sarDf.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, gridCell!.tableRowIndex!);
+      const aar = sarDf.get(C.COLUMNS_NAMES.MONOMER, gridCell!.tableRowIndex!);
       chooseAction(aar, position, ev.shiftKey);
     });
 
     this._sarVGrid.root.addEventListener('click', (ev) => {
       const gridCell = this._sarVGrid.hitTest(ev.offsetX, ev.offsetY);
-      if (gridCellValidation(gridCell) || gridCell!.tableColumn!.name != C.COLUMNS_NAMES.MEAN_DIFFERENCE)
+      if (isGridCellInvalid(gridCell) || gridCell!.tableColumn!.name != C.COLUMNS_NAMES.MEAN_DIFFERENCE)
         return;
 
       const tableRowIdx = gridCell!.tableRowIndex!;
       const position = sarVDf.get(C.COLUMNS_NAMES.POSITION, tableRowIdx);
-      const aar = sarVDf.get(C.COLUMNS_NAMES.AMINO_ACID_RESIDUE, tableRowIdx);
+      const aar = sarVDf.get(C.COLUMNS_NAMES.MONOMER, tableRowIdx);
       chooseAction(aar, position, ev.shiftKey);
     });
 
@@ -805,7 +788,7 @@ export class PeptidesModel {
       for (let i = 0; i < colNum; ++i) {
         const col = girdCols.byIndex(i)!;
         const colName = col.name;
-        if (grid == sarVGrid && colName !== 'Diff' && colName !== C.COLUMNS_NAMES.AMINO_ACID_RESIDUE)
+        if (grid == sarVGrid && colName !== 'Diff' && colName !== C.COLUMNS_NAMES.MONOMER)
           col.width = 50;
         else
           col.width = gridProps.rowHeight + 10;
@@ -899,15 +882,18 @@ export class PeptidesModel {
 
     const sarViewersGroup: viewerTypes[] = [this.sarViewer, this.sarViewerVertical];
 
-    if (this.df.rowCount <= 10000) {
-      const peptideSpaceViewerOptions = {method: 'UMAP', measure: 'Levenshtein', cyclesCount: 100};
-      const peptideSpaceViewer =
-        await this.df.plot.fromType('peptide-space-viewer', peptideSpaceViewerOptions) as PeptideSpaceViewer;
-      dockManager.dock(peptideSpaceViewer, DG.DOCK_TYPE.RIGHT, null, 'Peptide Space Viewer');
-    }
+    // TODO: completely remove this viewer?
+    // if (this.df.rowCount <= 10000) {
+    //   const peptideSpaceViewerOptions = {method: 'UMAP', measure: 'Levenshtein', cyclesCount: 100};
+    //   const peptideSpaceViewer =
+    //     await this.df.plot.fromType('peptide-space-viewer', peptideSpaceViewerOptions) as PeptideSpaceViewer;
+    //   dockManager.dock(peptideSpaceViewer, DG.DOCK_TYPE.RIGHT, null, 'Peptide Space Viewer');
+    // }
 
     this.updateDefault();
 
+    this.currentView.filters({filters: [{type: 'Peptides:invariantMapFilter'}]});
+
     dockViewers(sarViewersGroup, DG.DOCK_TYPE.RIGHT, dockManager, DG.DOCK_TYPE.DOWN);
 
     this._sourceGrid.props.allowEdit = false;

package/src/package.ts

@@ -11,6 +11,7 @@ import {manualAlignmentWidget} from './widgets/manual-alignment';
 import {SARViewer, SARViewerVertical} from './viewers/sar-viewer';
 
 import {PeptideSpaceViewer} from './viewers/peptide-space-viewer';
+import {InvariantMap} from './utils/invariant-map';
 
 export const _package = new DG.Package();
 let currentTable: DG.DataFrame;
@@ -153,3 +154,10 @@ function getOrDefine(dataframe?: DG.DataFrame, column?: DG.Column | null): [DG.D
 
   return [dataframe, column];
 }
+
+//name: Invariant Map Filter
+//tags: filter
+//output: filter result
+export function invariantMapFilter() {
+  return new InvariantMap();
+}

package/src/utils/cell-renderer.ts

@@ -63,8 +63,8 @@ export function measureAAR(s: string): number {
 
 export function renderSARCell(canvasContext: CanvasRenderingContext2D, currentAAR: string, currentPosition: string,
   statsDf: DG.DataFrame, twoColorMode: boolean, mdCol: DG.Column<number>, bound: DG.Rect, cellValue: number,
-  currentSelection: types.SelectionObject, substitutionsInfo: types.SubstitutionsInfo | null): void {
-  const queryAAR = `${C.COLUMNS_NAMES.AMINO_ACID_RESIDUE} = ${currentAAR}`;
+  currentSelection: types.SelectionObject, substitutionsInfo: types.SubstitutionsInfo): void {
+  const queryAAR = `${C.COLUMNS_NAMES.MONOMER} = ${currentAAR}`;
   const query = `${queryAAR} and ${C.COLUMNS_NAMES.POSITION} = ${currentPosition}`;
   const pVal: number = statsDf
     .groupBy([C.COLUMNS_NAMES.P_VALUE])
@@ -101,7 +101,7 @@ export function renderSARCell(canvasContext: CanvasRenderingContext2D, currentAA
   canvasContext.closePath();
 
   canvasContext.fill();
-  if (substitutionsInfo) {
+  if (substitutionsInfo.size > 0) {
     canvasContext.textBaseline = 'middle';
     canvasContext.textAlign = 'center';
     canvasContext.fillStyle = DG.Color.toHtml(DG.Color.getContrastColor(DG.Color.fromHtml(coef)));

package/src/utils/constants.ts

@@ -3,7 +3,7 @@ export enum COLUMNS_NAMES {
   ACTIVITY = '~activity',
   ACTIVITY_SCALED = 'activity_scaled',
   ALIGNED_SEQUENCE = '~aligned_sequence',
-  AMINO_ACID_RESIDUE = 'AAR',
+  MONOMER = 'AAR',
   POSITION = 'Pos',
   P_VALUE = 'pValue',
   MEAN_DIFFERENCE = 'Mean difference',

package/src/utils/invariant-map.ts

@@ -0,0 +1,163 @@
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import * as C from './constants';
+import {PeptidesModel} from '../model';
+import {isGridCellInvalid} from './misc';
+
+const CELL_SIZE = 20; // 20px cell height and width
+
+export class InvariantMap extends DG.Filter {
+  model: PeptidesModel | null = null;
+  chosenCells: {[position: string]: string[]} = {};
+
+  constructor() {
+    super();
+  }
+
+  get caption(): string {return 'Invariant Map';}
+
+  get filterSummary(): string {
+    let summary = '';
+    for (const [pos, aarList] of Object.entries(this.chosenCells))
+      if (aarList.length > 0)
+        summary += `${pos}: ${aarList}\n`;
+
+    return summary;
+  }
+
+  get isFiltering(): boolean {return true && super.isFiltering;}
+
+  get isReadyToApplyFilter(): boolean {return this.model != null;}
+
+  async attach(df: DG.DataFrame): Promise<void> {
+    super.attach(df);
+    this.model = await PeptidesModel.getInstance(df);
+    this.render(true);
+  }
+
+  saveState(): any {
+    const state = super.saveState();
+    state.chosenCells = JSON.stringify(this.chosenCells);
+    return state;
+  }
+
+  applyState(state: any): void {
+    super.applyState(state);
+    if (state.chosenCells) {
+      this.chosenCells = JSON.parse(state.chosenCells);
+      this.render();
+    }
+  }
+
+  applyFilter(): void {
+    this.dataFrame?.filter.init((bitsetIndex) => {
+      for (const [position, aarList] of Object.entries(this.chosenCells)) {
+        if (aarList.length != 0 && !aarList.includes(this.dataFrame!.get(position, bitsetIndex)))
+          return false;
+      }
+      return true;
+    });
+  }
+
+  render(initChosenCells: boolean = false): void {
+    if (this.model == null)
+      return;
+
+    const invariantDf = this.model.statsDf.groupBy([C.COLUMNS_NAMES.MONOMER])
+      .pivot(C.COLUMNS_NAMES.POSITION)
+      .add('first', C.COLUMNS_NAMES.COUNT, '')
+      .aggregate();
+    invariantDf.getCol(C.COLUMNS_NAMES.MONOMER).semType = C.SEM_TYPES.MONOMER;
+    const orderedColNames = invariantDf.columns.names().sort((a, b) => {
+      const aInt = parseInt(a);
+      const bInt = parseInt(b);
+      if (isNaN(aInt))
+        return -1;
+      else if (isNaN(bInt))
+        return 1;
+      return aInt - bInt;
+    });
+
+    // Create grid and set properties
+    const invariantGrid = invariantDf.plot.grid();
+    const gridCols = invariantGrid.columns;
+    gridCols.rowHeader!.visible = false;
+    gridCols.setOrder(orderedColNames);
+
+    for (let gridColIndex = 0; gridColIndex < gridCols.length; ++gridColIndex) {
+      const gridCol = gridCols.byIndex(gridColIndex)!
+      if (gridCol.name != C.COLUMNS_NAMES.MONOMER) 
+        gridCol.width = CELL_SIZE;
+    }
+
+    if (initChosenCells) {
+      this.chosenCells = {};
+      for (const col of invariantDf.columns)
+        if (col.name != C.COLUMNS_NAMES.MONOMER)
+          this.chosenCells[col.name] = [];
+    }
+
+    invariantGrid.root.addEventListener('click', (ev) => {
+      invariantDf.currentRowIdx = -1;
+      const gridCell = invariantGrid.hitTest(ev.offsetX, ev.offsetY);
+      if (isGridCellInvalid(gridCell) || gridCell!.tableColumn!.name == C.COLUMNS_NAMES.MONOMER)
+        return;
+
+      const position = gridCell!.tableColumn!.name;
+      const aar = invariantDf.get(C.COLUMNS_NAMES.MONOMER, gridCell!.tableRowIndex!);
+      const aarList = this.chosenCells[position];
+      const aarIndex = aarList.indexOf(aar);
+
+      if (aarIndex != -1)
+        aarList.splice(aarIndex, 1);
+      else
+        aarList.push(aar);
+
+      invariantGrid.invalidate();
+      this.applyFilter();
+    });
+
+    invariantGrid.onCellRender.subscribe((args) => {
+      //FIXME: for some reason it doesn't work when I set right away
+      const gridProps = invariantGrid.props;
+      gridProps.allowBlockSelection = false;
+      gridProps.allowColSelection = false;
+      gridProps.allowRowSelection = false;
+      gridProps.allowEdit = false;
+      gridProps.rowHeight = CELL_SIZE;
+
+      const gc = args.cell;
+      const tableColName = gc.tableColumn?.name;
+      const tableRowIndex = gc.tableRowIndex;
+
+      if (isGridCellInvalid(gc) || tableColName == C.COLUMNS_NAMES.MONOMER ||
+        tableRowIndex == null || tableRowIndex == -1)
+        return;
+
+      const currentPosition: string = tableColName !== C.COLUMNS_NAMES.MEAN_DIFFERENCE ?
+        tableColName : invariantDf.get(C.COLUMNS_NAMES.POSITION, tableRowIndex);
+      const currentAAR: string = invariantDf.get(C.COLUMNS_NAMES.MONOMER, tableRowIndex);
+      const canvasContext = args.g;
+      const bound = args.bounds;
+
+      canvasContext.font = '10px Roboto';
+      canvasContext.textAlign = 'center';
+      canvasContext.textBaseline = 'middle';
+      canvasContext.fillStyle = '#000';
+      canvasContext.fillText(gc.cell.value, bound.x + (bound.width / 2), bound.y + (bound.height / 2), bound.width);
+
+      const aarSelection = this.chosenCells[currentPosition];
+      if (aarSelection.includes(currentAAR)) {
+        canvasContext.strokeStyle = '#000';
+        canvasContext.lineWidth = 1;
+        canvasContext.strokeRect(bound.x + 1, bound.y + 1, bound.width - 1, bound.height - 1);
+      }
+      args.preventDefault();
+    });
+
+    const gridHost = ui.box(invariantGrid.root);
+    gridHost.style.width = '100%';
+    this.root.appendChild(gridHost);
+  }
+}

package/src/utils/misc.ts

@@ -91,3 +91,8 @@ export function calculateSingleBarData(col: DG.Column<string>, selection: DG.Bit
 
   return colStats;
 }
+
+export function isGridCellInvalid(gc: DG.GridCell | null): boolean {
+  return !gc || !gc.cell.value || !gc.tableColumn || gc.tableRowIndex == null || gc.tableRowIndex == -1 ||
+    gc.cell.value == DG.INT_NULL || gc.cell.value == DG.FLOAT_NULL;
+}

package/src/viewers/sar-viewer.ts

@@ -15,7 +15,6 @@ export class SARViewerBase extends DG.JsViewer {
   model!: PeptidesModel;
   scaling: string;
   bidirectionalAnalysis: boolean;
-  showSubstitution: boolean;
   maxSubstitutions: number;
   minActivityDelta: number;
   _titleHost = ui.divText('SAR Viewer', {id: 'pep-viewer-title'});
@@ -27,18 +26,15 @@ export class SARViewerBase extends DG.JsViewer {
 
     this.scaling = this.string('scaling', 'none', {choices: ['none', 'lg', '-lg']});
     this.bidirectionalAnalysis = this.bool('bidirectionalAnalysis', false);
-    this.showSubstitution = this.bool('showSubstitution', true);
-    this.maxSubstitutions = this.int('maxSubstitutions', 2);
-    this.minActivityDelta = this.float('minActivityDelta', 1);
+    this.maxSubstitutions = this.int('maxSubstitutions', 1);
+    this.minActivityDelta = this.float('minActivityDelta', 0);
   }
 
   async onTableAttached(): Promise<void> {
     super.onTableAttached();
     this.sourceGrid = this.view?.grid ?? (grok.shell.v as DG.TableView).grid;
     this.model = await PeptidesModel.getInstance(this.dataFrame);
-    // this.model.init(this.dataFrame);
     this.helpUrl = '/help/domains/bio/peptides.md';
-    // await this.requestDataUpdate();
 
     this.initProperties();
   }
@@ -65,11 +61,6 @@ export class SARViewerBase extends DG.JsViewer {
     this.viewerGrid?.invalidate();
   }
 
-  // async requestDataUpdate(): Promise<void> {
-  //   await this.model.updateData(this.scaling, this.sourceGrid, this.bidirectionalAnalysis,
-  //     this.minActivityDelta, this.maxSubstitutions, this.showSubstitution);
-  // }
-
   onPropertyChanged(property: DG.Property): void {
     super.onPropertyChanged(property);
     this.dataFrame.tags[property.name] = `${property.get(this)}`;
@@ -89,10 +80,6 @@ export class SARViewerBase extends DG.JsViewer {
       }
     }
 
-    if (!this.showSubstitution && ['maxSubstitutions', 'activityLimit'].includes(propName))
-      return;
-
-    // await this.requestDataUpdate();
     this.model.updateDefault();
     this.render(true);
   }
@@ -102,7 +89,7 @@ export class SARViewerBase extends DG.JsViewer {
  * Structure-activity relationship viewer.
  */
 export class SARViewer extends SARViewerBase {
-  _titleHost = ui.divText('Monomer-Positions', {id: 'pep-viewer-title'});
+  _titleHost = ui.divText('Mutation Cliffs', {id: 'pep-viewer-title'});
   _name = 'Structure-Activity Relationship';
 
   constructor() {super();}
@@ -112,7 +99,6 @@ export class SARViewer extends SARViewerBase {
   async onTableAttached(): Promise<void> {
     await super.onTableAttached();
     this.model.sarViewer ??= this;
-    // this.dataFrame.temp['sarViewer'] = this;
 
     this.subs.push(this.model.onSARGridChanged.subscribe((data) => {
       this.viewerGrid = data;

package/src/widgets/analyze-peptides.ts

@@ -22,7 +22,7 @@ export async function analyzePeptidesWidget(currentDf: DG.DataFrame, col: DG.Col
   let funcs = DG.Func.find({package: 'Bio', name: 'webLogoViewer'});
   if (funcs.length == 0)
     return new DG.Widget(ui.label('Bio package is missing or out of date. Please install the latest version.'));
-  
+
   funcs = DG.Func.find({package: 'Helm', name: 'getMonomerLib'});
   if (funcs.length == 0)
     return new DG.Widget(ui.label('Helm package is missing or out of date. Please install the latest version.'));

package/src/widgets/distribution.ts

@@ -5,7 +5,7 @@ import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations'
 import $ from 'cash-dom';
 
 import * as C from '../utils/constants';
-import {getStats, Stats} from '../utils/filtering-statistics';
+import {getStats, Stats} from '../utils/statistics';
 import {PeptidesModel} from '../model';
 
 const allConst = 'All';

package/src/widgets/{subst-table.ts → mutation-cliffs.ts}

@@ -5,13 +5,13 @@ import * as type from '../utils/types';
 import {PeptidesModel} from '../model';
 import {getSeparator} from '../utils/misc';
 
-export function substitutionsWidget(table: DG.DataFrame, model: PeptidesModel): DG.Widget {
+export function mutationCliffsWidget(table: DG.DataFrame, model: PeptidesModel): DG.Widget {
   const substInfo = model.substitutionsInfo;
   const currentCell = model.currentSelection;
   const positions = Object.keys(currentCell);
 
   if (!positions.length)
-    return new DG.Widget(ui.label('No substitution table generated'));
+    return new DG.Widget(ui.label('No mutations table generated'));
 
   const substitutionsArray: string[] = [];
   const deltaArray: number[] = [];
@@ -49,9 +49,9 @@ export function substitutionsWidget(table: DG.DataFrame, model: PeptidesModel):
   }
 
   if (!substitutionsArray.length)
-    return new DG.Widget(ui.label('No substitution table generated'));
+    return new DG.Widget(ui.label('No mutations table generated'));
 
-  const substCol = DG.Column.fromStrings('Substiutions', substitutionsArray);
+  const substCol = DG.Column.fromStrings('Mutation', substitutionsArray);
   substCol.semType = C.SEM_TYPES.MACROMOLECULE_DIFFERENCE;
   substCol.tags[C.TAGS.SEPARATOR] = getSeparator(alignedSeqCol);
   substCol.tags[DG.TAGS.UNITS] = alignedSeqCol.tags[DG.TAGS.UNITS];
@@ -61,7 +61,7 @@ export function substitutionsWidget(table: DG.DataFrame, model: PeptidesModel):
   const substTable =
     DG.DataFrame.fromColumns([substCol, DG.Column.fromList('double', 'Delta', deltaArray), hiddenSubstToAarCol]);
 
-  const aminoToInput = ui.stringInput('Substituted to:', '', () => {
+  const aminoToInput = ui.stringInput('Mutated to:', '', () => {
     const substitutedToAar = aminoToInput.stringValue;
     if (substitutedToAar != '')
       substTable.filter.init((idx) => hiddenSubstToAarCol.get(idx) === substitutedToAar);