@datagrok/peptides 0.2.0 → 0.4.3

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,20 +1,20 @@
 {
 	"name": "@datagrok/peptides",
-	"version": "0.2.0",
+	"version": "0.4.3",
 	"description": "",
 	"dependencies": {
 		"@keckelt/tsne": "^1.0.2",
 		"cash-dom": "latest",
 		"d3": "latest",
-		"datagrok-api": ">0.95.4",
+		"datagrok-api": ">=0.95.11",
 		"dayjs": "latest",
 		"jaro-winkler-typescript": "^1.0.1",
 		"jstat": "^1.9.5",
 		"logojs-react": "^2.1.1",
 		"rxjs": "^6.5.5",
 		"umap-js": "^1.3.3",
-		"@datagrok-libraries/utils": ">=0.0.9",
-		"@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"
 	},
@@ -52,4 +52,4 @@
 		"lint": "eslint \"./src/**/*.ts\"",
 		"lint-fix": "eslint \"./src/**/*.ts\" --fix"
 	}
-}
+}

package/src/describe.ts

@@ -1,15 +1,50 @@
-// eslint-disable-next-line no-unused-vars
-import * as grok from 'datagrok-api/grok';
 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 +52,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 +86,7 @@ export async function describe(
       setAARRenderer(col, sourceGrid);
     }
   }
+
   if (sourceGrid) {
     const colNames:string[] = [];
     for (let i = 0; i < sourceGrid.columns.length; i++) {
@@ -105,6 +142,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 +183,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)
@@ -190,11 +238,9 @@ export async function describe(
   aarList.sort((first, second) => getWeight(second) - getWeight(first));
 
   matrixDf.getCol(aminoAcidResidue).setCategoryOrder(aarList);
-  //const sequenceDf = segregateBestAtAllCateg(statsDf, twoColorMode);
 
   // SAR vertical table (naive, choose best Mean difference from pVals <= 0.01)
   // TODO: aquire ALL of the positions
-
   let sequenceDf = statsDf.groupBy(['Mean difference', aminoAcidResidue, positionColName, 'Count', 'Ratio', 'pValue'])
     .where('pValue <= 0.1')
     .aggregate();
@@ -224,17 +270,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);
     }
   }
 
@@ -251,19 +294,6 @@ export async function describe(
       return;
     }
 
-    // if (args.cell.isColHeader) {
-    //   if (args.cell.gridColumn.name != aminoAcidResidue) {
-    //     const textSize = args.g.measureText(args.cell.gridColumn.name);
-    //     args.g.fillStyle = '#4b4b4a';
-    //     args.g.fillText(
-    //       args.cell.gridColumn.name,
-    //       args.bounds.x + (args.bounds.width - textSize.width) / 2,
-    //       args.bounds.y + (textSize.actualBoundingBoxAscent + textSize.actualBoundingBoxDescent),
-    //     );
-    //   }
-    //   args.preventDefault();
-    // }
-
     if (
       args.cell.isTableCell &&
       args.cell.tableRowIndex !== null &&
@@ -357,12 +387,18 @@ export async function describe(
     }
     if (
       !cell.isColHeader &&
-        cell.tableColumn !== null &&
-        cell.tableColumn.name == aminoAcidResidue &&
-        cell.cell.value !== null &&
-        cell.tableRowIndex !== null
+      cell.tableColumn !== null &&
+      cell.tableColumn.name == aminoAcidResidue &&
+      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 +412,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

@@ -14,7 +14,8 @@ import {analyzePeptidesWidget} from './widgets/analyze-peptides';
 import {PeptideSimilaritySpaceWidget} from './utils/peptide-similarity-space';
 import {manualAlignmentWidget} from './widgets/manual-alignment';
 import {SARViewer, SARViewerVertical} from './viewers/sar-viewer';
-import { peptideMoleculeWidget } from './widgets/peptide-molecule';
+import {peptideMoleculeWidget} from './widgets/peptide-molecule';
+import {correlationAnalysisPlots} from './utils/correlation-analysis';
 
 export const _package = new DG.Package();
 let tableGrid: DG.Grid;
@@ -24,35 +25,13 @@ let view: DG.TableView;
 
 async function main(chosenFile: string) {
   const pi = DG.TaskBarProgressIndicator.create('Loading Peptides');
-  //let peptides =
-  //  await grok.data.loadTable('https://datagrok.jnj.com/p/ejaeger.il23peptideidp5562/il-23_peptide_idp-5562');
   const path = _package.webRoot + 'files/' + chosenFile;
   const peptides = (await grok.data.loadTable(path));
   peptides.name = 'Peptides';
   peptides.setTag('dataType', 'peptides');
   const view = grok.shell.addTableView(peptides);
   tableGrid = view.grid;
-  // peptides.onSemanticTypeDetecting.subscribe((_: any) => {
-  //   const regexp = new RegExp(/^([^-^\n]*-){2,49}(\w|\(|\))+$/);
-  //   for (const col of peptides.columns) {
-  //     col.semType = DG.Detector.sampleCategories(col, (s: any) => regexp.test(s.trim())) ? 'alignedSequence' : null;
-  //     if (col.semType == 'alignedSequence') {
-  //       expandColumn(col, tableGrid, (ent)=>{
-  //         const subParts:string[] = ent.split('-');
-  //         // eslint-disable-next-line no-unused-vars
-  //         const [text, _] = processSequence(subParts);
-  //         let textSize = 0;
-  //         text.forEach((aar)=>{
-  //           textSize += aar.length;
-  //         });
-  //         return textSize;
-  //       });
-  //     }
-  //   }
-  // });
-
   view.name = 'PeptidesView';
-
   grok.shell.windows.showProperties = true;
 
   pi.close();
@@ -66,7 +45,6 @@ export function Peptides() {
 
   const appDescription = ui.info(
     [
-      // ui.divText('\n To start the application :', {style: {'font-weight': 'bolder'}}),
       ui.list([
         '- automatic recognition of peptide sequences',
         '- native integration with tons of Datagrok out-of-the box features (visualization, filtering, clustering, ' +
@@ -196,6 +174,18 @@ 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();
 }
+
+//name: Correllation analysis
+export async function correlationAnalysis() {
+  view = (grok.shell.v as DG.TableView);
+
+  const df = await grok.data.files.openTable('Demo:TestJobs:Files:DemoFiles/bio/peptides.csv');
+  const tview = grok.shell.addTableView(df);
+  const [cpviewer, bpviewer] = correlationAnalysisPlots(df.getCol('AlignedSequence'));
+
+  tview.dockManager.dock(cpviewer, 'right');
+  tview.dockManager.dock(bpviewer, 'down');
+}

package/src/peptides.ts

@@ -0,0 +1,76 @@
+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');
+    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`,
+    );
+    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 = (currentDf.columns as DG.ColumnList);
+      for (const colName of cols.names()) {
+        if (!originalDfColumns.includes(colName)) {
+          cols.remove(colName);
+        }
+      }
+
+      currentDf.selection.setAll(false);
+      currentDf.filter.setAll(true);
+
+      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])];
@@ -24,15 +23,19 @@ export class ChemPalette {
         if (s in ChemPalette.AAFullNames) {
           toDisplay = [ui.divText(ChemPalette.AANames[ChemPalette.AAFullNames[s]])];
         }
-        const sketch = grok.chem.svgMol(ChemPalette.AASmiles[aar]);
+        const options = {
+          autoCrop: true,
+          autoCropMargin: 0,
+          suppressChiralText: true,
+        };
+        const sketch = grok.chem.svgMol(ChemPalette.AASmiles[aar], undefined, undefined, options);
         toDisplay.push(sketch);
       }
       ui.tooltip.show(ui.divV(toDisplay), x, y);
     }
 
     getColor( c: string) {
-    // eslint-disable-next-line no-unused-vars
-      const [color, _] = this.getColorPivot(c);
+      const [color] = this.getColorPivot(c);
       return color;
     }
 
@@ -77,8 +80,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];
     };
 
@@ -105,14 +107,6 @@ export class ChemPalette {
       'white': ['rgb(230,230,230)'],
     }
 
-    // static grokGroups: [string[], string][] = [
-    //   [['C', 'U'], 'yellow'],
-    //   [['G', 'P'], 'red'],
-    //   [['A', 'V', 'I', 'L', 'M', 'F', 'Y', 'W'], 'all_green'],
-    //   [['R', 'H', 'K'], 'light_blue'],
-    //   [['D', 'E'], 'dark_blue'],
-    //   [['S', 'T', 'N', 'Q'], 'orange'],
-    // ];
     static grokGroups: {[key: string]: string[]} = {
       'yellow': ['C', 'U'],
       'red': ['G', 'P'],
@@ -130,14 +124,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 +231,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

@@ -0,0 +1,123 @@
+/* Do not change these import lines. Datagrok will import API library in exactly the same manner */
+import * as DG from 'datagrok-api/dg';
+
+import {AlignedSequenceEncoder} from '@datagrok-libraries/utils/src/sequence-encoder';
+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';
+
+/**
+ * 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.
+ */
+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)));
+  const positions = transposeMatrix(encSeqs);
+  return matrix2DataFrame(positions);
+}
+
+/**
+ * Unfolds a data frame into <category>-<value> format.
+ *
+ * @param {DG.DataFrame} df A data frame to unfold.
+ * @return {DG.DataFrame} The resulting data frame.
+ */
+function melt(df: DG.DataFrame): DG.DataFrame {
+  let keys: string[] = [];
+  const values: Float32Array = new Float32Array(df.columns.length*df.rowCount);
+  let i = 0;
+
+  for (const c of df.columns.toList()) {
+    keys = keys.concat(Array<string>(c.length).fill(c.name));
+    values.set(c.getRawData(), i);
+    i += df.rowCount;
+  }
+  assert(keys.length == values.length);
+  return DG.DataFrame.fromColumns([DG.Column.fromStrings('keys', keys), DG.Column.fromFloat32Array('values', values)]);
+}
+
+/**
+ * Calculates Spearman's rho rank correlation coefficient.
+ *
+ * @param {DG.DataFrame} df A data frame to process.
+ * @return {DG.DataFrame} The correlation matrix.
+ */
+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] = df.columns.byIndex(i).stats.spearmanCorr(df.columns.byIndex(j));
+      rho[j][i] = rho[i][j];
+    }
+  }
+  return matrix2DataFrame(rho);
+}
+
+/**
+ * Calculates Kendall's tau rank correlation coefficient.
+ *
+ * @param {DG.DataFrame} df A data frame to process.
+ * @param {number} [alpha=0.05] The significance threshold.
+ * @return {DG.DataFrame} The correlation matrix.
+ */
+function calcKendallTauMatrix(df: DG.DataFrame, alpha: number = 0.05): DG.DataFrame {
+  const nItems = df.columns.length;
+  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) {
+      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(tau);
+}
+
+/**
+ * Creates acorrelation plot and a box plot to perform correlation analysis.
+ *
+ * @export
+ * @param {DG.Column} sequencesColumn A column containing amino acid sequences.
+ * @return {[DG.Viewer, DG.Viewer]} These two plots.
+ */
+export function correlationAnalysisPlots(sequencesColumn: DG.Column): [DG.Viewer, DG.Viewer] {
+  const posDF = calcPositions(sequencesColumn);
+  const cpviewer = DG.Viewer.fromType(
+    DG.VIEWER.CORR_PLOT,
+    posDF,
+    {
+      'xColumnNames': posDF.columns.names(),
+      'yColumnNames': posDF.columns.names(),
+      'correlationType': 'Spearman',
+    });
+
+  const rhoDF = calcKendallTauMatrix(posDF);
+  const meltDF = melt(rhoDF);
+
+  const bpviewer = DG.Viewer.fromType(
+    DG.VIEWER.BOX_PLOT,
+    meltDF, {
+      'categoryColumnName': 'keys',
+      'valueColumnName': 'values',
+      'statistics': ['min', 'max', 'avg', 'med'],
+    });
+  return [cpviewer, bpviewer];
+}

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

@@ -1,6 +1,4 @@
 /* Do not change these import lines. Datagrok will import API library in exactly the same manner */
-// eslint-disable-next-line no-unused-vars
-import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
@@ -8,17 +6,8 @@ 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.
- *
- * @param {any[]} columnData Samples to process.
- * @param {string} method Embedding method.
- * @param {string} measure Distance metric.
- * @param {number} cyclesCount Number of cycles to repeat.
- * @return {Promise<unknown>} Promise.
- */
 function createDimensinalityReducingWorker(
   columnData: any[],
   method: string,
@@ -65,6 +54,7 @@ function inferActivityColumnsName(table: DG.DataFrame): string | null {
  * @param {string} method Embedding method to apply.
  * @param {string} measure Distance metric.
  * @param {number} cyclesCount Number of cycles to repeat.
+ * @param {(DG.TableView | null)} view View to add scatter plot to
  * @param {(string | null)} [activityColumnName] Activity containing column to assign it to points radius.
  * @param {boolean} [zoom=false] Whether to fit view.
  * @return {Promise<DG.ScatterPlotViewer>} A viewer.
@@ -75,6 +65,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 +108,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 +123,7 @@ export async function createPeptideSimilaritySpaceViewer(
     );
   }*/
   pi.close();
-  return viewer;
+  return (viewer as DG.ScatterPlotViewer);
 }
 
 /**
@@ -147,13 +141,15 @@ 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.
+   * @param {DG.TableView} view Current view
    * @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 +157,7 @@ export class PeptideSimilaritySpaceWidget {
     this.currentDf = alignedSequencesColumn.dataFrame;
     this.alignedSequencesColumn = alignedSequencesColumn;
     this.viewer = ui.div([]);
+    this.view = view;
   }
 
   /**
@@ -177,6 +174,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,6 @@ 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/logo-viewer.ts

@@ -61,7 +61,6 @@ export class Logo extends DG.JsViewer {
 
   init() {
     this.initialized = true;
-    // this.reactHost = ui.div([]);
     console.log('INIT');
     this.target = this.dataFrame;
     [this.splitted] = splitAlignedPeptides(this.dataFrame!.columns.bySemType(this.colSemType));
@@ -111,10 +110,6 @@ export class Logo extends DG.JsViewer {
 
     if (typeof this.dataFrame !== 'undefined') {
       this.findLogo();
-
-      // if (this.reactHost !== null) {
-      //   this.root.appendChild(this.reactHost);
-      // }
     }
   }
 

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,18 @@ export class SARViewer extends DG.JsViewer {
   protected _initialBitset: DG.BitSet | null;
   protected viewerVGrid: DG.Grid | null;
   protected currentBitset: DG.BitSet | null;
-  // private df: DG.DataFrame | null;
+  grouping: boolean;
+  groupMapping: {[key: string]: string} | 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 +43,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 +54,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,25 +118,13 @@ 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
-
-      // if (this.filterMode) {
-      //   this.dataFrame.selection.setAll(false, false);
-      //   this.dataFrame.filter.init(isChosen).and(this._initialBitset!, false);
-      // } else {
-      //   this.dataFrame.filter.copyFrom(this._initialBitset!);
-      //   this.dataFrame.selection.init(isChosen).and(this._initialBitset!, false);
-      // }
       this.currentBitset = DG.BitSet.create(this.dataFrame.rowCount, isChosen).and(this._initialBitset!);
-      // (this.filterMode ? this.dataFrame.selection.setAll(false) :
-      // this.dataFrame.filter.copyFrom(this._initialBitset!)).fireChanged();
       this.sourceFilteringFunc();
 
-
-      // df.getCol(splitColName).setCategoryOrder([otherLabel, aarLabel]);
       const colorMap: {[index: string]: string | number} = {};
       colorMap[otherLabel] = DG.Color.blue;
       colorMap[aarLabel] = DG.Color.orange;
@@ -262,14 +254,6 @@ export class SARViewer extends DG.JsViewer {
     //TODO: optimize. Don't calculate everything again if only view changes
     if (computeData) {
       if (typeof this.dataFrame !== 'undefined' && this.activityColumnColumnName && this.sourceGrid) {
-        // [this.viewerGrid, this.viewerVGrid, this.statsDf] = await describe(
-        //   this.dataFrame,
-        //   this.activityColumnColumnName,
-        //   this.activityScalingMethod,
-        //   this.sourceGrid,
-        //   this.bidirectionalAnalysis,
-        //   this._initialBitset,
-        // );
         await model?.updateData(
           this.dataFrame!,
           this.activityColumnColumnName,
@@ -277,6 +261,7 @@ export class SARViewer extends DG.JsViewer {
           this.sourceGrid,
           this.bidirectionalAnalysis,
           this._initialBitset,
+          this.grouping,
         );
 
         if (this.viewerGrid !== null && this.viewerVGrid !== null) {
@@ -303,7 +288,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 +301,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();
@@ -287,8 +287,7 @@ export class StackedBarChart extends DG.JsViewer {
         if (h * margin / 2 <= sBarHeight - gapSize && h * margin / 2 <= w) {
           g.fillStyle = 'rgb(0,0,0)';
           g.font = `${h * margin / 2}px`;
-          // eslint-disable-next-line no-unused-vars
-          const [_c, aar, _p] = cp.getColorAAPivot(obj['name']);
+          const [, aar] = cp.getColorAAPivot(obj['name']);
           g.fillText(aar,
             x + w / 2 - h * margin / 8,
             y + h * (this.max - sum + curSum) / this.max + gapSize / 2 + (sBarHeight - gapSize)/2 - h * margin / 8);
@@ -398,11 +397,8 @@ export class StackedBarChart extends DG.JsViewer {
         return;
       }
       this.dataFrame!.selection.handleClick((i) => {
-        //let selected = true;
         // @ts-ignore
         return this.highlighted!['aaName'] === (this.dataFrame.getCol(this.highlighted!['colName']).get(i));
-
-        //&& (scope.dataFrame.selection.get(i) === selected);
       }, event);
     }
 }

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);
+      const 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.