@datagrok/peptides 0.3.0 → 0.4.1

package/.eslintrc.json

@@ -0,0 +1,29 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "google"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "rules": {
+    "indent": [
+      "error",
+      2
+    ],
+    "max-len": [
+      "error",
+      120
+    ],
+    "spaced-comment": "off",
+    "require-jsdoc": "off"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@datagrok/peptides",
-	"version": "0.3.0",
+	"version": "0.4.1",
 	"description": "",
 	"dependencies": {
 		"@keckelt/tsne": "^1.0.2",
@@ -13,8 +13,8 @@
 		"logojs-react": "^2.1.1",
 		"rxjs": "^6.5.5",
 		"umap-js": "^1.3.3",
-		"@datagrok-libraries/utils": ">=0.0.10",
-		"@datagrok-libraries/statistics": ">=0.1.4",
+		"@datagrok-libraries/utils": ">=0.0.11",
+		"@datagrok-libraries/statistics": ">=0.1.5",
 		"@types/d3": "^7.0.0",
 		"@types/jquery": "^3.5.6"
 	},

package/src/describe.ts

@@ -4,12 +4,49 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import {splitAlignedPeptides} from './utils/split-aligned';
 import {tTest} from '@datagrok-libraries/statistics/src/tests';
-import {fdrcorrection} from '@datagrok-libraries/statistics/src/multiple-tests.js';
+import {fdrcorrection} from '@datagrok-libraries/statistics/src/multiple-tests';
 import {ChemPalette} from './utils/chem-palette';
 import {setAARRenderer} from './utils/cell-renderer';
 
 const cp = new ChemPalette('grok');
 
+const aarGroups = {
+  'R': 'PC',
+  'H': 'PC',
+  'K': 'PC',
+  'D': 'NC',
+  'E': 'NC',
+  'S': 'U',
+  'T': 'U',
+  'N': 'U',
+  'Q': 'U',
+  'C': 'SC',
+  'U': 'SC',
+  'G': 'SC',
+  'P': 'SC',
+  'A': 'H',
+  'V': 'H',
+  'I': 'H',
+  'L': 'H',
+  'M': 'H',
+  'F': 'H',
+  'Y': 'H',
+  'W': 'H',
+  '-': '-',
+};
+
+const groupDescription: {[key: string]: {'description': string, 'aminoAcids': string[]}} = {
+  'PC': {'description': 'Positive Amino Acids, with Electrically Charged Side Chains', 'aminoAcids': ['R', 'H', 'K']},
+  'NC': {'description': 'Negative Amino Acids, with Electrically Charged Side Chains', 'aminoAcids': ['D', 'E']},
+  'U': {'description': 'Amino Acids with Polar Uncharged Side Chains', 'aminoAcids': ['S', 'T', 'N', 'Q']},
+  'SC': {'description': 'Special Cases', 'aminoAcids': ['C', 'U', 'G', 'P']},
+  'H': {
+    'description': 'Amino Acids with Hydrophobic Side Chain',
+    'aminoAcids': ['A', 'V', 'I', 'L', 'M', 'F', 'Y', 'W'],
+  },
+  '-': {'description': 'Unknown Amino Acid', 'aminoAcids': ['-']},
+};
+
 export async function describe(
   df: DG.DataFrame,
   activityColumn: string,
@@ -17,7 +54,8 @@ export async function describe(
   sourceGrid: DG.Grid,
   twoColorMode: boolean,
   initialBitset: DG.BitSet | null,
-): Promise<[DG.Grid, DG.Grid, DG.DataFrame]> {
+  grouping: boolean,
+): Promise<[DG.Grid, DG.Grid, DG.DataFrame, {[key: string]: string}]> {
   //Split the aligned sequence into separate AARs
   let splitSeqDf: DG.DataFrame | undefined;
   let invalidIndexes: number[];
@@ -50,6 +88,7 @@ export async function describe(
       setAARRenderer(col, sourceGrid);
     }
   }
+
   if (sourceGrid) {
     const colNames:string[] = [];
     for (let i = 0; i < sourceGrid.columns.length; i++) {
@@ -105,6 +144,17 @@ export async function describe(
 
   let matrixDf = splitSeqDf.unpivot([activityColumnScaled], positionColumns, positionColName, aminoAcidResidue);
 
+  //TODO: move to chem palette
+  let groupMapping: {[key: string]: string} = {};
+  if (grouping) {
+    groupMapping = aarGroups;
+    const aarCol = matrixDf.getCol(aminoAcidResidue);
+    aarCol.init((index) => groupMapping[aarCol.get(index)[0]] ?? '-');
+    aarCol.compact();
+  } else {
+    Object.keys(aarGroups).forEach((value) => groupMapping[value] = value);
+  }
+
   //statistics for specific AAR at a specific position
   matrixDf = matrixDf.groupBy([positionColName, aminoAcidResidue])
     .add('count', activityColumnScaled, 'Count')
@@ -135,14 +185,14 @@ export async function describe(
     AAR = matrixDf.get(aminoAcidResidue, i);
 
     //@ts-ignore
-    splitSeqDf.rows.select((row) => row[position] === AAR);
+    splitSeqDf.rows.select((row) => groupMapping[row[position]] === AAR);
     currentActivity = splitSeqDf
       .clone(splitSeqDf.selection, [activityColumnScaled])
       .getCol(activityColumnScaled)
       .toList();
 
     //@ts-ignore
-    splitSeqDf.rows.select((row) => row[position] !== AAR);
+    splitSeqDf.rows.select((row) => groupMapping[row[position]] !== AAR);
     otherActivity = splitSeqDf
       .clone(splitSeqDf.selection, [activityColumnScaled])
       .getCol(activityColumnScaled)
@@ -224,17 +274,14 @@ export async function describe(
   SARVgrid.col('pValue')!.format = 'four digits after comma';
   SARVgrid.col('pValue')!.name = 'P-Value';
 
-  //FIXME: looks inefficient
-  for (const col of matrixDf.columns) {
-    if (col.name === aminoAcidResidue) {
-      setAARRenderer(col, SARgrid);
-      break;
+  if (!grouping) {
+    let tempCol = matrixDf.columns.byName(aminoAcidResidue);
+    if (tempCol) {
+      setAARRenderer(tempCol, SARgrid);
     }
-  }
-  for (const col of sequenceDf.columns) {
-    if (col.name === aminoAcidResidue) {
-      setAARRenderer(col, SARVgrid);
-      break;
+    tempCol = sequenceDf.columns.byName(aminoAcidResidue);
+    if (tempCol) {
+      setAARRenderer(tempCol, SARgrid);
     }
   }
 
@@ -362,7 +409,13 @@ export async function describe(
         cell.cell.value !== null &&
         cell.tableRowIndex !== null
     ) {
-      cp.showTooltip(cell, x, y);
+      if (grouping) {
+        const currentGroup = groupDescription[cell.cell.value];
+        const divText = ui.divText('Amino Acids in this group: ' + currentGroup['aminoAcids'].join(', '));
+        ui.tooltip.show(ui.divV([ui.h3(currentGroup['description']), divText]), x, y);
+      } else {
+        cp.showTooltip(cell, x, y);
+      }
     }
     return true;
   };
@@ -376,9 +429,14 @@ export async function describe(
     }
   });
 
-  // for (const col of matrixDf.columns.names()) {
-  //   SARgrid.col(col)!.width = SARgrid.props.rowHeight;
-  // }
+  for (const col of matrixDf.columns.names()) {
+    SARgrid.col(col)!.width = SARgrid.props.rowHeight;
+  }
+
+  if (grouping) {
+    SARgrid.col(aminoAcidResidue)!.name = 'Groups';
+    SARVgrid.col(aminoAcidResidue)!.name = 'Groups';
+  }
 
-  return [SARgrid, SARVgrid, statsDf];
+  return [SARgrid, SARVgrid, statsDf, groupMapping];
 }

package/src/package.ts

@@ -197,7 +197,7 @@ export function manualAlignment(monomer: string) {
 //input: column col {semType: alignedSequence}
 //output: widget result
 export async function peptideSpacePanel(col: DG.Column): Promise<DG.Widget> {
-  const widget = new PeptideSimilaritySpaceWidget(col);
+  const widget = new PeptideSimilaritySpaceWidget(col, view ?? grok.shell.v);
   return await widget.draw();
 }
 

package/src/peptides.ts

@@ -0,0 +1,74 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+import {createPeptideSimilaritySpaceViewer} from './utils/peptide-similarity-space';
+import {addViewerToHeader} from './viewers/stacked-barchart-viewer';
+
+export class Peptides {
+  async init(
+      tableGrid: DG.Grid,
+      view: DG.TableView,
+      currentDf: DG.DataFrame,
+      options: {[key: string]: string},
+      col: DG.Column,
+      activityColumnChoice: string
+    ) {
+    for (let i = 0; i < tableGrid.columns.length; i++) {
+      const col = tableGrid.columns.byIndex(i);
+      if (col &&
+          col.name &&
+          col.column?.semType != 'aminoAcids'
+      ) {
+        //@ts-ignore
+        tableGrid.columns.byIndex(i)?.visible = false;
+      }
+    }
+
+    const originalDfColumns = (currentDf.columns as DG.ColumnList).names();
+
+    const sarViewer = view.addViewer('peptide-sar-viewer', options);
+    const sarNode = view.dockManager.dock(sarViewer, DG.DOCK_TYPE.DOWN, null, 'SAR Viewer');
+
+    const sarViewerVertical = view.addViewer('peptide-sar-viewer-vertical');
+    const sarVNode = view.dockManager.dock(sarViewerVertical, DG.DOCK_TYPE.RIGHT, sarNode, 'SAR Vertical Viewer');
+
+    const peptideSpaceViewer = await createPeptideSimilaritySpaceViewer(
+      currentDf,
+      col,
+      't-SNE',
+      'Levenshtein',
+      100,
+      view,
+      `${activityColumnChoice}Scaled`,
+    );
+    const psNode = view.dockManager.dock(peptideSpaceViewer, DG.DOCK_TYPE.LEFT, sarNode, 'Peptide Space Viewer', 0.3);
+
+    const StackedBarchartProm = currentDf.plot.fromType('StackedBarChartAA');
+    addViewerToHeader(tableGrid, StackedBarchartProm);
+
+    const hideIcon = ui.iconFA('window-close', () => { //undo?, times?
+        const viewers = [];
+        for (const viewer of view.viewers) {
+          if (viewer.type !== DG.VIEWER.GRID) {
+            viewers.push(viewer);
+          }
+        }
+        viewers.forEach((v) => v.close());
+
+        const cols = (view.dataFrame.columns as DG.ColumnList);
+        for (const colName of cols.names()) {
+          if (!originalDfColumns.includes(colName)) {
+            cols.remove(colName);
+          }
+        }
+
+        tableGrid.setOptions({'colHeaderHeight': 20});
+        tableGrid.columns.setVisible(originalDfColumns);
+
+        view.setRibbonPanels(ribbonPanels);
+    }, 'Close viewers and restore dataframe');
+    
+    const ribbonPanels = view.getRibbonPanels();
+    view.setRibbonPanels([[hideIcon]]);
+  }
+}

package/src/utils/cell-renderer.ts

@@ -23,24 +23,27 @@ export function expandColumn(col:DG.Column,
   timeout);
 }
 
-export function setAARRenderer(col:DG.Column, grid:DG.Grid|null = null) {
+export function setAARRenderer(col: DG.Column, grid: DG.Grid | null = null, grouping = false) {
   col.semType = 'aminoAcids';
   col.setTag('cell.renderer', 'aminoAcids');
-  if (grid)
+  if (grouping) {
+    col.setTag('groups', `${grouping}`);
+  }
+  if (grid) {
     expandColumn(col, grid, (ent) => measureAAR(ent));
+  }
 }
 
 export function measureAAR(s: string): number {
   const end = s.lastIndexOf(')');
   const beg = s.indexOf('(');
-  return end == beg ? s.length:s.length - (end-beg)+1;
+  return end == beg ? s.length : s.length - (end - beg) + 1;
 }
 
 function printLeftCentered(
-      x: number, y: number, w: number, h: number,
-      g: CanvasRenderingContext2D, s: string, color = ChemPalette.undefinedColor,
-      pivot: number = 0, left = false, hideMod = false) {
-
+  x: number, y: number, w: number, h: number,
+  g: CanvasRenderingContext2D, s: string, color = ChemPalette.undefinedColor,
+  pivot: number = 0, left = false, hideMod = false) {
   g.textAlign = 'start';
   let colorPart = pivot == -1 ? s.substring(0) : s.substring(0, pivot);
   if (colorPart.length == 1) {
@@ -91,8 +94,7 @@ function printLeftCentered(
   if (left || textSize.width > w) {
     draw(indent, indent + colorTextSize.width);
     return x + colorTextSize.width + g.measureText(grayPart).width;
-  }
-  else {
+  } else {
     draw((w - textSize.width) / 2, (w - textSize.width) / 2 + colorTextSize.width);
     return x + (w - textSize.width) / 2 + colorTextSize.width;
   }
@@ -100,13 +102,26 @@ function printLeftCentered(
 
 
 export class AminoAcidsCellRenderer extends DG.GridCellRenderer {
+    chemPalette: ChemPalette | null;
+
+    get name() {
+      return 'aminoAcidsCR';
+    }
 
-    get name() { return 'aminoAcidsCR'; }
+    get cellType() {
+      return 'aminoAcids';
+    }
 
-    get cellType() { return 'aminoAcids'; }
+    constructor() {
+      super();
+      this.chemPalette = null;
+    }
 
     render(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number,
-           gridCell: DG.GridCell, cellStyle: DG.GridCellStyle) {
+      gridCell: DG.GridCell, cellStyle: DG.GridCellStyle) {
+      if (this.chemPalette === null) {
+        this.chemPalette = new ChemPalette('grok', gridCell.tableColumn?.getTag('groups') ? true : false);
+      }
       g.save();
       g.beginPath();
       g.rect(x, y, w, h);
@@ -122,44 +137,47 @@ export class AminoAcidsCellRenderer extends DG.GridCellRenderer {
 
 
 export class AlignedSequenceCellRenderer extends DG.GridCellRenderer {
+  get name() {
+    return 'alignedSequenceCR';
+  }
 
-    get name() { return 'alignedSequenceCR'; }
-
-    get cellType() { return 'alignedSequence'; }
-
-    render(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number,
-           gridCell: DG.GridCell, cellStyle: DG.GridCellStyle ) {
-      w = Math.min(gridCell.grid.canvas.width - x, w);
-      g.save();
-      g.beginPath();
-      g.rect(x, y, w, h);
-      g.clip();
-      g.font = '14px monospace';
-      g.textBaseline = 'top';
-      const s: string = gridCell.cell.value ?? '';
-
-      const subParts = s.split('-');
-      const [text, simplified] = processSequence(subParts);
-      const textSize = g.measureText(text.join(''));
-      x = Math.max(x, x + (w - textSize.width) / 2);
-
-      subParts.forEach((amino: string, index) => {
-        const [color, pivot] = cp.getColorPivot(amino);
-        g.fillStyle = ChemPalette.undefinedColor;
-        if (index + 1 < subParts.length) {
-          const gap = simplified?'':' ';
-          amino += `${amino?'':'-'}${gap}`;
-        }
-        x = printLeftCentered(x, y, w, h, g, amino, color, pivot, true);
-      });
+  get cellType() {
+    return 'alignedSequence';
+  }
 
-      g.restore();
-    }
+  render(g: CanvasRenderingContext2D, x: number, y: number, w: number, h: number,
+    gridCell: DG.GridCell, cellStyle: DG.GridCellStyle ) {
+    w = Math.min(gridCell.grid.canvas.width - x, w);
+    g.save();
+    g.beginPath();
+    g.rect(x, y, w, h);
+    g.clip();
+    g.font = '14px monospace';
+    g.textBaseline = 'top';
+    const s: string = gridCell.cell.value ?? '';
+
+    //TODO: can this be replaced/merged with splitSequence?
+    const subParts = s.split('-');
+    const [text, simplified] = processSequence(subParts);
+    const textSize = g.measureText(text.join(''));
+    x = Math.max(x, x + (w - textSize.width) / 2);
+
+    subParts.forEach((amino: string, index) => {
+      const [color, pivot] = cp.getColorPivot(amino);
+      g.fillStyle = ChemPalette.undefinedColor;
+      if (index + 1 < subParts.length) {
+        const gap = simplified?'':' ';
+        amino += `${amino?'':'-'}${gap}`;
+      }
+      x = printLeftCentered(x, y, w, h, g, amino, color, pivot, true);
+    });
+
+    g.restore();
+  }
 }
 
 
 export function processSequence(subParts:string[]) : [string[], boolean] {
-
   const simplified = !subParts.some((amino, index) =>
     amino.length > 1 &&
     index != 0 &&
@@ -174,4 +192,4 @@ export function processSequence(subParts:string[]) : [string[], boolean] {
     text.push(amino);
   });
   return [text, simplified];
-}
+}

package/src/utils/chem-palette.ts

@@ -6,17 +6,16 @@ import * as DG from 'datagrok-api/dg';
 export class ChemPalette {
     cp: {[key: string]: string} = {};
 
-    constructor(scheme: string) {
+    constructor(scheme: string, grouping = false) {
       if (scheme == 'grok') {
-        this.cp = ChemPalette.getDatagrok();
+        this.cp = ChemPalette.getDatagrok(grouping);
       }
     }
 
     showTooltip(cell:DG.GridCell, x:number, y:number) {
       const s = cell.cell.value as string;
       let toDisplay = [ui.divText(s)];
-      // eslint-disable-next-line no-unused-vars
-      const [_c, aar, _p] = this.getColorAAPivot(s);
+      const [, aar] = this.getColorAAPivot(s);
       if (aar in ChemPalette.AASmiles) {
         if (s in ChemPalette.AANames) {
           toDisplay = [ui.divText(ChemPalette.AANames[s])];
@@ -31,8 +30,7 @@ export class ChemPalette {
     }
 
     getColor( c: string) {
-    // eslint-disable-next-line no-unused-vars
-      const [color, _] = this.getColorPivot(c);
+      const [color] = this.getColorPivot(c);
       return color;
     }
 
@@ -77,8 +75,7 @@ export class ChemPalette {
     }
 
     getColorPivot(c = ''): [string, number] {
-      // eslint-disable-next-line no-unused-vars
-      const [color, _, pivot] = this.getColorAAPivot(c);
+      const [color,, pivot] = this.getColorAAPivot(c);
       return [color, pivot];
     };
 
@@ -130,14 +127,17 @@ export class ChemPalette {
       'all_blue': ['K', 'R'],
     }
 
-    static undefinedColor = 'rgb(100,100,100)'
+    static undefinedColor = 'rgb(100,100,100)';
 
-    static makePalette(dt: {[key: string]: string[]}, simplified = false) {
+    static makePalette(dt: {[key: string]: string[]}, simplified = false, grouping = false) {
       const palette: { [key: string]: string } = {};
+      const groups = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+      let currentGroup = 0;
       for (const [color, monomers] of Object.entries(dt)) {
         monomers.forEach((monomer, index) => {
-          palette[monomer] = ChemPalette.colourPalette[color][simplified ? 0 : index];
+          palette[grouping ? groups[currentGroup] : monomer] = ChemPalette.colourPalette[color][simplified ? 0 : index];
         });
+        currentGroup++;
       }
       return palette;
     }
@@ -234,8 +234,8 @@ export class ChemPalette {
       'Val': 'V',
     }
 
-    static getDatagrok() {
-      return ChemPalette.makePalette(ChemPalette.grokGroups);
+    static getDatagrok(grouping = false) {
+      return ChemPalette.makePalette(ChemPalette.grokGroups, false, grouping);
     }
 
     static getLesk() {

package/src/utils/correlation-analysis.ts

@@ -4,17 +4,28 @@
 import * as DG from 'datagrok-api/dg';
 
 import {AlignedSequenceEncoder} from '@datagrok-libraries/utils/src/sequence-encoder';
-import {assert, transposeMatrix, matrix2DataFrame} from '@datagrok-libraries/utils/src/operations';
-import {Vector} from '@datagrok-libraries/utils/src/type_declarations';
+import {assert, transposeMatrix} from '@datagrok-libraries/utils/src/operations';
+import {Vector, Matrix} from '@datagrok-libraries/utils/src/type-declarations';
+import {kendallsTau} from '@datagrok-libraries/statistics/src/correlation-coefficient';
 
 /**
- * Encodes amino acid sequences into a numeric representation.
+ * Converts a Matrix into a DataFrame.
  *
  * @export
+ * @param {Matrix} matrix A matrix.
+ * @return {DG.DataFrame} The data frame.
+ */
+ export function matrix2DataFrame(matrix: Matrix): DG.DataFrame {
+  return DG.DataFrame.fromColumns(matrix.map((v, i) => DG.Column.fromFloat32Array(`${i+1}`, v)));  
+}
+
+/**
+ * Encodes amino acid sequences into a numeric representation.
+ *
  * @param {DG.Column} col A column containing the sequences.
  * @return {DG.DataFrame} The resulting data frame.
  */
-export function calcPositions(col: DG.Column): DG.DataFrame {
+function calcPositions(col: DG.Column): DG.DataFrame {
   const sequences = col.toList().map((v, _) => AlignedSequenceEncoder.clean(v));
   const enc = new AlignedSequenceEncoder();
   const encSeqs = sequences.map((v) => Vector.from(enc.encode(v)));
@@ -25,11 +36,10 @@ export function calcPositions(col: DG.Column): DG.DataFrame {
 /**
  * Unfolds a data frame into <category>-<value> format.
  *
- * @export
  * @param {DG.DataFrame} df A data frame to unfold.
  * @return {DG.DataFrame} The resulting data frame.
  */
-export function melt(df: DG.DataFrame): DG.DataFrame {
+function melt(df: DG.DataFrame): DG.DataFrame {
   let keys: string[] = [];
   const values: Float32Array = new Float32Array(df.columns.length*df.rowCount);
   let i = 0;
@@ -43,38 +53,45 @@ export function melt(df: DG.DataFrame): DG.DataFrame {
   return DG.DataFrame.fromColumns([DG.Column.fromStrings('keys', keys), DG.Column.fromFloat32Array('values', values)]);
 }
 
-/*export async function calcSpearmanRhoMatrixExt(positions: Matrix): Promise<Matrix> {
-  const Spearman = require('spearman-rho');
-  const nItems = positions.length;
+/**
+ * Calculates Spearman's rho rank correlation coefficient.
+ *
+ * @param {DG.DataFrame} df A data frame to process.
+ * @return {DG.DataFrame} The correlation matrix.
+ */
+// eslint-disable-next-line no-unused-vars
+function calcSpearmanRhoMatrix(df: DG.DataFrame): DG.DataFrame {
+  const nItems = df.columns.length;
   const rho = new Array(nItems).fill(0).map((_) => new Float32Array(nItems).fill(0));
 
   for (let i = 0; i < nItems; ++i) {
     for (let j = i+1; j < nItems; ++j) {
-      rho[i][j] = await(new Spearman(positions[i], positions[j])).calc();
+      rho[i][j] = df.columns.byIndex(i).stats.spearmanCorr(df.columns.byIndex(j));
       rho[j][i] = rho[i][j];
     }
   }
-  return rho;
-}*/
+  return matrix2DataFrame(rho);
+}
 
 /**
- * Calculates Spearman's rho rank correlation coefficient.
+ * Calculates Kendall's tau rank correlation coefficient.
  *
- * @export
  * @param {DG.DataFrame} df A data frame to process.
+ * @param {number} [alpha=0.05] The significance threshold.
  * @return {DG.DataFrame} The correlation matrix.
  */
-export function calcSpearmanRhoMatrix(df: DG.DataFrame): DG.DataFrame {
+function calcKendallTauMatrix(df: DG.DataFrame, alpha: number = 0.05): DG.DataFrame {
   const nItems = df.columns.length;
-  const rho = new Array(nItems).fill(0).map((_) => new Float32Array(nItems).fill(0));
+  const tau = new Array(nItems).fill(0).map((_) => new Float32Array(nItems).fill(0));
 
   for (let i = 0; i < nItems; ++i) {
     for (let j = i+1; j < nItems; ++j) {
-      rho[i][j] = df.columns.byIndex(i).stats.spearmanCorr(df.columns.byIndex(j));
-      rho[j][i] = rho[i][j];
+      const res = kendallsTau(df.columns.byIndex(i).getRawData(), df.columns.byIndex(j).getRawData());
+      tau[i][j] = res.prob < alpha ? res.test : 0;
+      tau[j][i] = tau[i][j];
     }
   }
-  return matrix2DataFrame(rho);
+  return matrix2DataFrame(tau);
 }
 
 /**
@@ -95,7 +112,7 @@ export function correlationAnalysisPlots(sequencesColumn: DG.Column): [DG.Viewer
       'correlationType': 'Spearman',
     });
 
-  const rhoDF = calcSpearmanRhoMatrix(posDF);
+  const rhoDF = calcKendallTauMatrix(posDF);
   const meltDF = melt(rhoDF);
 
   const bpviewer = DG.Viewer.fromType(

package/src/utils/peptide-similarity-space.ts

@@ -8,7 +8,7 @@ import {getSequenceMolecularWeight} from './molecular-measure';
 import {AlignedSequenceEncoder} from '@datagrok-libraries/utils/src/sequence-encoder';
 import {DimensionalityReducer} from '@datagrok-libraries/utils/src/reduce-dimensionality';
 import {Measurer} from '@datagrok-libraries/utils/src/string-measure';
-import {Coordinates} from '@datagrok-libraries/utils/src/type_declarations';
+import {Coordinates} from '@datagrok-libraries/utils/src/type-declarations';
 
 /**
  * Creates a worker to perform a dimensionality reduction.
@@ -75,6 +75,7 @@ export async function createPeptideSimilaritySpaceViewer(
   method: string,
   measure: string,
   cyclesCount: number,
+  view: DG.TableView | null,
   activityColumnName?: string | null,
   zoom: boolean = false,
 ): Promise<DG.ScatterPlotViewer> {
@@ -117,8 +118,11 @@ export async function createPeptideSimilaritySpaceViewer(
       table.columns.replace(col, edf.getCol(axis));
     }
   }
-  const viewer = DG.Viewer.scatterPlot(table, {x: '~X', y: '~Y', color: activityColumnName ?? '~MW', size: '~MW'});
 
+  // const viewer = DG.Viewer.scatterPlot(table, {x: '~X', y: '~Y', color: activityColumnName ?? '~MW', size: '~MW'});
+  const viewerOptions = {x: '~X', y: '~Y', color: activityColumnName ?? '~MW', size: '~MW'};
+  const viewer = view !== null ?
+    view.addViewer(DG.VIEWER.SCATTER_PLOT, viewerOptions) : DG.Viewer.scatterPlot(table, viewerOptions);
   // Fit view if needed.
   /*if (zoom) {
     viewer.zoom(
@@ -129,7 +133,7 @@ export async function createPeptideSimilaritySpaceViewer(
     );
   }*/
   pi.close();
-  return viewer;
+  return (viewer as DG.ScatterPlotViewer);
 }
 
 /**
@@ -147,13 +151,14 @@ export class PeptideSimilaritySpaceWidget {
   protected availableMethods: string[];
   protected availableMetrics: string[];
   protected viewer: HTMLElement;
+  view: DG.TableView;
 
   /**
    * Creates an instance of PeptideSimilaritySpaceWidget.
    * @param {DG.Column} alignedSequencesColumn The column to get amino acid sequences from.
    * @memberof PeptideSimilaritySpaceWidget
    */
-  constructor(alignedSequencesColumn: DG.Column) {
+  constructor(alignedSequencesColumn: DG.Column, view: DG.TableView) {
     this.availableMethods = DimensionalityReducer.availableMethods;
     this.availableMetrics = Measurer.availableMeasures;
     this.method = this.availableMethods[0];
@@ -161,6 +166,7 @@ export class PeptideSimilaritySpaceWidget {
     this.currentDf = alignedSequencesColumn.dataFrame;
     this.alignedSequencesColumn = alignedSequencesColumn;
     this.viewer = ui.div([]);
+    this.view = view;
   }
 
   /**
@@ -177,6 +183,7 @@ export class PeptideSimilaritySpaceWidget {
       this.metrics,
       this.cycles,
       null,
+      null,
       true,
     );
     viewer.root.style.width = 'auto';

package/src/utils/split-aligned.ts

@@ -45,7 +45,7 @@ export function splitAlignedPeptides(peptideColumn: DG.Column, filter: boolean =
   columnNames.push('C-terminal');
 
   // filter out the columns with the same values
-  
+
   if (filter) {
     splitColumns = splitColumns.filter((positionArray, index) => {
       const isRetained = new Set(positionArray).size > 1;

package/src/viewers/model.ts

@@ -1,15 +1,17 @@
 import * as DG from 'datagrok-api/dg';
 
 import {describe} from '../describe';
-import { Subject } from 'rxjs';
+import {Subject} from 'rxjs';
 
 class SARViewerModel {
   private viewerGrid: Subject<DG.Grid> = new Subject<DG.Grid>();
   private viewerVGrid: Subject<DG.Grid> = new Subject<DG.Grid>();
   private statsDf: Subject<DG.DataFrame> = new Subject<DG.DataFrame>();
-  public viewerGrid$ = this.viewerGrid.asObservable();
-  public viewerVGrid$ = this.viewerVGrid.asObservable();
-  public statsDf$ = this.statsDf.asObservable();
+  private groupMapping: Subject<{[key: string]: string}> = new Subject<{[key: string]: string}>();
+  public viewerGrid$;
+  public viewerVGrid$;
+  public statsDf$;
+  public groupMapping$;
   private dataFrame: DG.DataFrame | null;
   private activityColumn: string | null;
   private activityScaling: string | null;
@@ -17,6 +19,7 @@ class SARViewerModel {
   private twoColorMode: boolean | null;
   private initialBitset: DG.BitSet | null;
   private isUpdating = false;
+  grouping: boolean;
 
   constructor() {
     this.dataFrame = null;
@@ -25,39 +28,49 @@ class SARViewerModel {
     this.sourceGrid = null;
     this.twoColorMode = null;
     this.initialBitset = null;
+    this.grouping = false;
+    this.viewerGrid$ = this.viewerGrid.asObservable();
+    this.viewerVGrid$ = this.viewerVGrid.asObservable();
+    this.statsDf$ = this.statsDf.asObservable();
+    this.groupMapping$ = this.groupMapping.asObservable();
   }
 
   async updateData(
-      df: DG.DataFrame,
-      activityCol: string,
-      activityScaling: string,
-      sourceGrid: DG.Grid,
-      twoColorMode: boolean,
-      initialBitset: DG.BitSet | null,
-    ) {
+    df: DG.DataFrame,
+    activityCol: string,
+    activityScaling: string,
+    sourceGrid: DG.Grid,
+    twoColorMode: boolean,
+    initialBitset: DG.BitSet | null,
+    grouping: boolean,
+  ) {
     this.dataFrame = df;
     this.activityColumn = activityCol;
     this.activityScaling = activityScaling;
     this.sourceGrid = sourceGrid;
     this.twoColorMode = twoColorMode;
     this.initialBitset = initialBitset;
+    this.grouping = grouping;
     await this.updateDefault();
   }
 
   async updateDefault() {
-    if (this.dataFrame && this.activityColumn && this.activityScaling && this.sourceGrid && this.twoColorMode !== null && !this.isUpdating) {
+    if (
+      this.dataFrame && this.activityColumn && this.activityScaling &&
+        this.sourceGrid && this.twoColorMode !== null && !this.isUpdating
+    ) {
       this.isUpdating = true;
-      const [viewerGrid, viewerVGrid, statsDf] = await describe(
+      const [viewerGrid, viewerVGrid, statsDf, groupMapping] = await describe(
         this.dataFrame, this.activityColumn, this.activityScaling,
-        this.sourceGrid, this.twoColorMode, this.initialBitset
+        this.sourceGrid, this.twoColorMode, this.initialBitset, this.grouping,
       );
       this.viewerGrid.next(viewerGrid);
       this.viewerVGrid.next(viewerVGrid);
       this.statsDf.next(statsDf);
+      this.groupMapping.next(groupMapping);
       this.isUpdating = false;
     }
   }
 }
 
-export let model = new SARViewerModel();
-  
+export const model = new SARViewerModel();

package/src/viewers/sar-viewer.ts

@@ -4,7 +4,7 @@ import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
 
-import { model } from './model';
+import {model} from './model';
 
 export class SARViewer extends DG.JsViewer {
   protected viewerGrid: DG.Grid | null;
@@ -20,16 +20,19 @@ export class SARViewer extends DG.JsViewer {
   protected _initialBitset: DG.BitSet | null;
   protected viewerVGrid: DG.Grid | null;
   protected currentBitset: DG.BitSet | null;
+  grouping: boolean;
+  groupMapping: {[key: string]: string} | null;
   // private df: DG.DataFrame | null;
   // protected pValueThreshold: number;
   // protected amountOfBestAARs: number;
   // duplicatesHandingMethod: string;
   constructor() {
     super();
-    
+
     this.viewerGrid = null;
     this.viewerVGrid = null;
     this.statsDf = null;
+    this.groupMapping = null;
     this.initialized = false;
     this.aminoAcidResidue = 'AAR';
     this._initialBitset = null;
@@ -41,6 +44,7 @@ export class SARViewer extends DG.JsViewer {
     this.activityScalingMethod = this.string('activityScalingMethod', 'none', {choices: ['none', 'lg', '-lg']});
     this.filterMode = this.bool('filterMode', false);
     this.bidirectionalAnalysis = this.bool('bidirectionalAnalysis', false);
+    this.grouping = this.bool('grouping', false);
     // this.pValueThreshold = this.float('pValueThreshold', 0.1);
     // this.amountOfBestAARs = this.int('amountOfBestAAR', 1);
     // this.duplicatesHandingMethod = this.string('duplicatesHandlingMethod', 'median', {choices: ['median']});
@@ -51,12 +55,13 @@ export class SARViewer extends DG.JsViewer {
   init() {
     this._initialBitset = this.dataFrame!.filter.clone();
     this.initialized = true;
-    this.subs.push(model.statsDf$.subscribe(data => this.statsDf = data));
-    this.subs.push(model.viewerGrid$.subscribe(data => {
+    this.subs.push(model.statsDf$.subscribe((data) => this.statsDf = data));
+    this.subs.push(model.viewerGrid$.subscribe((data) => {
       this.viewerGrid = data;
       this.render();
     }));
-    this.subs.push(model.viewerVGrid$.subscribe(data => this.viewerVGrid = data));
+    this.subs.push(model.viewerVGrid$.subscribe((data) => this.viewerVGrid = data));
+    this.subs.push(model.groupMapping$.subscribe((data) => this.groupMapping = data));
   }
 
   onTableAttached() {
@@ -114,7 +119,7 @@ export class SARViewer extends DG.JsViewer {
         splitCol = this.dataFrame.columns.addNew(splitColName, 'string');
       }
 
-      const isChosen = (i: number) => this.dataFrame!.get(currentPosition, i) === currentAAR;
+      const isChosen = (i: number) => this.groupMapping![this.dataFrame!.get(currentPosition, i)] === currentAAR;
       splitCol!.init((i) => isChosen(i) ? aarLabel : otherLabel);
 
       //TODO: use column.compact
@@ -277,6 +282,7 @@ export class SARViewer extends DG.JsViewer {
           this.sourceGrid,
           this.bidirectionalAnalysis,
           this._initialBitset,
+          this.grouping,
         );
 
         if (this.viewerGrid !== null && this.viewerVGrid !== null) {
@@ -303,7 +309,7 @@ export class SARViewerVertical extends DG.JsViewer {
     super();
 
     this.viewerVGrid = null;
-    this.subs.push(model.viewerVGrid$.subscribe(data => {
+    this.subs.push(model.viewerVGrid$.subscribe((data) => {
       this.viewerVGrid = data;
       this.render();
     }));
@@ -316,4 +322,4 @@ export class SARViewerVertical extends DG.JsViewer {
     }
     this.viewerVGrid?.invalidate();
   }
-}
+}

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

@@ -115,8 +115,8 @@ export class StackedBarChart extends DG.JsViewer {
       let i = 0;
       for (const value of Object.values(groups)) {
         i++;
-        for (const obj in value) {
-          this.ord[value[obj]] = i;
+        for (const obj of value) {
+          this.ord[obj] = i;
         }
       }
       this.yScale = scaleLinear();

package/src/widgets/analyze-peptides.ts

@@ -1,9 +1,7 @@
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
-import {createPeptideSimilaritySpaceViewer} from '../utils/peptide-similarity-space';
-import {addViewerToHeader} from '../viewers/stacked-barchart-viewer';
-import {model} from '../viewers/model';
+import { Peptides } from '../peptides';
 
 export async function analyzePeptidesWidget(
   col: DG.Column, view: DG.TableView, tableGrid: DG.Grid, currentDf: DG.DataFrame,
@@ -24,6 +22,7 @@ export async function analyzePeptidesWidget(
     async (currentMethod: string) => {
       const currentActivityCol = activityColumnChoice.value.name;
       const tempDf = currentDf.clone(currentDf.filter, [currentActivityCol]);
+      //TODO: merge with scaling in describe
       switch (currentMethod) {
       case 'lg':
         await tempDf.columns.addNewCalculated('scaledActivity', 'Log10(${' + currentActivityCol + '})');
@@ -64,45 +63,20 @@ export async function analyzePeptidesWidget(
   activityScalingMethod.fireChanged();
 
   const startBtn = ui.button('Launch SAR', async () => {
-    const progress = DG.TaskBarProgressIndicator.create('Loading SAR...');
     if (activityColumnChoice.value.type === DG.TYPE.FLOAT) {
+      const progress = DG.TaskBarProgressIndicator.create('Loading SAR...');
       const options: {[key: string]: string} = {
         'activityColumnColumnName': activityColumnChoice.value.name,
         'activityScalingMethod': activityScalingMethod.value,
       };
-      for (let i = 0; i < tableGrid.columns.length; i++) {
-        const col = tableGrid.columns.byIndex(i);
-        if (col &&
-            col.name &&
-            col.column?.semType != 'aminoAcids'
-        ) {
-          //@ts-ignore
-          tableGrid.columns.byIndex(i)?.visible = false;
-        }
-      }
 
-      const sarViewer = view.addViewer('peptide-sar-viewer', options);
-      const sarViewerVertical = view.addViewer('peptide-sar-viewer-vertical');
-      const peptideSpaceViewer = await createPeptideSimilaritySpaceViewer(
-        currentDf,
-        col,
-        't-SNE',
-        'Levenshtein',
-        100,
-        `${activityColumnChoice}Scaled`,
-      );
-      let refNode = view.dockManager.dock(peptideSpaceViewer, 'down');
-      refNode = view.dockManager.dock(sarViewer, 'right', refNode);
-      view.dockManager.dock(sarViewerVertical, 'right', refNode);
+      let peptides = new Peptides();
+      await peptides.init(tableGrid, view, currentDf, options, col, activityColumnChoice.value.name);      
 
-      const StackedBarchartProm = currentDf.plot.fromType('StackedBarChartAA');
-      addViewerToHeader(tableGrid, StackedBarchartProm);
-      
-      // currentDf.onValuesChanged.subscribe(async () => await model.updateDefault());
+      progress.close();
     } else {
       grok.shell.error('The activity column must be of floating point number type!');
     }
-    progress.close();
   });
 
   const viewer = await currentDf.plot.fromType('peptide-logo-viewer');

package/src/widgets/manual-alignment.ts

@@ -2,8 +2,8 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
-import { model } from '../viewers/model';
-import { splitAlignedPeptides } from '../utils/split-aligned';
+import {model} from '../viewers/model';
+import {splitAlignedPeptides} from '../utils/split-aligned';
 
 export function manualAlignmentWidget(alignedSequenceCol: DG.Column, currentDf: DG.DataFrame) {
   const sequenceInput = ui.textInput('', alignedSequenceCol.get(currentDf.currentRowIdx));
@@ -13,12 +13,13 @@ export function manualAlignmentWidget(alignedSequenceCol: DG.Column, currentDf:
   const applyChangesBtn = ui.button('Apply', async () => {
     const newSequence = sequenceInput.value;
     const affectedRowIndex = currentDf.currentRowIdx;
-    const [splitSequence,] = splitAlignedPeptides(DG.Column.fromStrings('splitSequence', [newSequence]), false);
+    const [splitSequence] = splitAlignedPeptides(DG.Column.fromStrings('splitSequence', [newSequence]), false);
 
     alignedSequenceCol.set(affectedRowIndex, newSequence);
     for (const part of splitSequence.columns) {
-      if (currentDf.col(part.name) !== null)
+      if (currentDf.col(part.name) !== null) {
         currentDf.set(part.name, affectedRowIndex, part.get(0));
+      }
     }
 
     await model.updateDefault();

package/src/widgets/peptide-molecule.ts

@@ -39,4 +39,4 @@ export async function peptideMoleculeWidget(pep: string): Promise<DG.Widget> {
   pi.close();
 
   return new DG.Widget(ui.div([panel, nglHost]));
-}
+}

package/src/workers/dimensionality-reducer.ts

@@ -1,5 +1,5 @@
 import {DimensionalityReducer} from '@datagrok-libraries/utils/src/reduce-dimensionality';
-import {Coordinates} from '@datagrok-libraries/utils/src/type_declarations';
+import {Coordinates} from '@datagrok-libraries/utils/src/type-declarations';
 
 /**
  * Worker thread receiving data function.