@datagrok/peptides 1.3.8 → 1.4.0

package/src/package.ts

@@ -2,7 +2,6 @@
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
-import * as bio from '@datagrok-libraries/bio';
 import * as C from './utils/constants';
 
 import {analyzePeptidesUI} from './widgets/peptides';
@@ -12,14 +11,15 @@ import {MutationCliffsViewer, MostPotentResiduesViewer} from './viewers/sar-view
 
 import {PeptideSpaceViewer} from './viewers/peptide-space-viewer';
 import {LogoSummary} from './viewers/logo-summary';
+import {MonomerWorks} from '@datagrok-libraries/bio';
 
-export let monomerWorks: bio.MonomerWorks | null;
+export let monomerWorks: MonomerWorks | null;
 
 export const _package = new DG.Package();
 let currentTable: DG.DataFrame;
 let alignedSequenceColumn: DG.Column;
 
-export function getMoomerWorks() {
+export function getMonomerWorks() {
   return monomerWorks;
 };
 
@@ -42,7 +42,7 @@ export async function Peptides(): Promise<void> {
   const textLink = ui.inlineText(['For more details, see our ', wikiLink, '.']);
   if (monomerWorks == null) {
     let lib = await grok.functions.call('Bio:getBioLib');
-    monomerWorks = new bio.MonomerWorks(lib);
+    monomerWorks = new MonomerWorks(lib);
   }
   const appDescription = ui.info(
     [

package/src/tests/algorithms.ts

@@ -0,0 +1,51 @@
+import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
+
+import {category, test, expect, delay, before} from '@datagrok-libraries/utils/src/test';
+
+import {_package} from '../package-test';
+import {startAnalysis} from '../widgets/peptides';
+import {PeptidesModel} from '../model';
+import * as C from '../utils/constants';
+import {scaleActivity} from '../utils/misc';
+import {ALPHABET, TAGS, NOTATION, ALIGNMENT} from '@datagrok-libraries/bio';
+import {findMutations} from '../utils/algorithms';
+import * as type from '../utils/types';
+
+category('Algorithms', () => {
+  let activityCol: DG.Column<number>;
+  let monomerColumns: DG.Column<string>[];
+  let settings: type.PeptidesSettings;
+
+  before(async () => {
+    activityCol = DG.Column.fromList('int', 'test', [1, 2, 5]);
+    monomerColumns = [
+      DG.Column.fromList('string', '1', 'ABC'.split('')),
+      DG.Column.fromList('string', '2', 'ACC'.split('')),
+      DG.Column.fromList('string', '3', 'ACD'.split('')),
+    ];
+    settings = {maxMutations: 1, minActivityDelta: 2};
+  });
+
+  test('MutationCliffs', async () => {
+    const substInfo: type.SubstitutionsInfo = findMutations(activityCol, monomerColumns, settings);
+    expect(substInfo.has('C'), true);
+    expect(substInfo.has('D'), true);
+    expect(substInfo.has('A'), false);
+
+    const c = substInfo.get('C')!;
+    const d = substInfo.get('D')!;
+    expect(c.has('3'), true);
+    expect(d.has('3'), true);
+
+    const c3 = c.get('3')!;
+    const d3 = d.get('3')!;
+    expect(c3.has(2), true);
+    expect(d3.has(3), true);
+
+    const c32 = c3.get(2)!;
+    const d33 = d3.get(3)!;
+    expect(c32[0], 3);
+    expect(d33[0], 2);
+  });
+});

package/src/tests/core.ts

@@ -1,6 +1,5 @@
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
-import * as bio from '@datagrok-libraries/bio';
 
 import {category, test, expect, delay} from '@datagrok-libraries/utils/src/test';
 
@@ -9,6 +8,7 @@ import {startAnalysis} from '../widgets/peptides';
 import {PeptidesModel} from '../model';
 import * as C from '../utils/constants';
 import {scaleActivity} from '../utils/misc';
+import {ALPHABET, TAGS, NOTATION, ALIGNMENT} from '@datagrok-libraries/bio';
 
 category('Core', () => {
   let simpleTable: DG.DataFrame;
@@ -33,9 +33,9 @@ category('Core', () => {
     simpleActivityCol = simpleTable.getCol(simpleActivityColName);
     simpleAlignedSeqCol = simpleTable.getCol(alignedSequenceCol);
     simpleAlignedSeqCol.semType = C.SEM_TYPES.MACROMOLECULE;
-    simpleAlignedSeqCol.setTag(C.TAGS.ALPHABET, bio.ALPHABET.PT);
-    simpleAlignedSeqCol.setTag(DG.TAGS.UNITS, bio.NOTATION.FASTA);
-    simpleAlignedSeqCol.setTag(bio.TAGS.aligned, bio.ALIGNMENT.SEQ_MSA);
+    simpleAlignedSeqCol.setTag(C.TAGS.ALPHABET, ALPHABET.PT);
+    simpleAlignedSeqCol.setTag(DG.TAGS.UNITS, NOTATION.FASTA);
+    simpleAlignedSeqCol.setTag(TAGS.aligned, ALIGNMENT.SEQ_MSA);
     simpleScaledCol = scaleActivity(simpleActivityCol, '-lg');
 
     model = await startAnalysis(simpleActivityCol, simpleAlignedSeqCol, null, simpleTable, simpleScaledCol, '-lg');
@@ -53,9 +53,9 @@ category('Core', () => {
     complexActivityCol = complexTable.getCol(complexActivityColName);
     complexAlignedSeqCol = complexTable.getCol('MSA');
     complexAlignedSeqCol.semType = C.SEM_TYPES.MACROMOLECULE;
-    complexAlignedSeqCol.setTag(C.TAGS.ALPHABET, bio.ALPHABET.UN);
-    complexAlignedSeqCol.setTag(DG.TAGS.UNITS, bio.NOTATION.SEPARATOR);
-    complexAlignedSeqCol.setTag(bio.TAGS.aligned, bio.ALIGNMENT.SEQ_MSA);
+    complexAlignedSeqCol.setTag(C.TAGS.ALPHABET, ALPHABET.UN);
+    complexAlignedSeqCol.setTag(DG.TAGS.UNITS, NOTATION.SEPARATOR);
+    complexAlignedSeqCol.setTag(TAGS.aligned, ALIGNMENT.SEQ_MSA);
     complexAlignedSeqCol.tags[C.TAGS.SEPARATOR] = '/';
     complexScaledCol = scaleActivity(complexActivityCol, '-lg');
 
@@ -75,9 +75,9 @@ category('Core', () => {
     simpleActivityCol = simpleTable.getCol(simpleActivityColName);
     simpleAlignedSeqCol = simpleTable.getCol(alignedSequenceCol);
     simpleAlignedSeqCol.semType = C.SEM_TYPES.MACROMOLECULE;
-    simpleAlignedSeqCol.setTag(C.TAGS.ALPHABET, bio.ALPHABET.PT);
-    simpleAlignedSeqCol.setTag(DG.TAGS.UNITS, bio.NOTATION.FASTA);
-    simpleAlignedSeqCol.setTag(bio.TAGS.aligned, bio.ALIGNMENT.SEQ_MSA);
+    simpleAlignedSeqCol.setTag(C.TAGS.ALPHABET, ALPHABET.PT);
+    simpleAlignedSeqCol.setTag(DG.TAGS.UNITS, NOTATION.FASTA);
+    simpleAlignedSeqCol.setTag(TAGS.aligned, ALIGNMENT.SEQ_MSA);
     simpleScaledCol = scaleActivity(simpleActivityCol, '-lg');
 
     model = await startAnalysis(simpleActivityCol, simpleAlignedSeqCol, null, simpleTable, simpleScaledCol, '-lg');

package/src/utils/algorithms.ts

@@ -0,0 +1,91 @@
+import * as DG from 'datagrok-api/dg';
+
+import * as C from './constants';
+import * as type from './types';
+import {getTypedArrayConstructor} from './misc';
+
+//TODO: move out
+export function findMutations(activityCol: DG.Column<number>, monomerColumns: DG.Column<string>[],
+  settings: type.PeptidesSettings = {}): type.SubstitutionsInfo {
+  const nCols = monomerColumns.length;
+  if (nCols == 0)
+    throw new Error(`PepAlgorithmError: Couldn't find any column of semType '${C.SEM_TYPES.MONOMER}'`);
+
+  const substitutionsInfo: type.SubstitutionsInfo = new Map();
+  const nRows = activityCol.length;
+  for (let seq1Idx = 0; seq1Idx < nRows - 1; seq1Idx++) {
+    for (let seq2Idx = seq1Idx + 1; seq2Idx < nRows; seq2Idx++) {
+      let substCounter = 0;
+      const activityValSeq1 = activityCol.get(seq1Idx)!;
+      const activityValSeq2 = activityCol.get(seq2Idx)!;
+      const delta = activityValSeq1 - activityValSeq2;
+      if (Math.abs(delta) < (settings.minActivityDelta ?? 0))
+        continue;
+
+      let substCounterFlag = false;
+      const tempData: { pos: string, seq1monomer: string, seq2monomer: string, seq1Idx: number, seq2Idx: number }[] =
+        [];
+      for (const currentPosCol of monomerColumns) {
+        const seq1monomer = currentPosCol.get(seq1Idx)!;
+        const seq2monomer = currentPosCol.get(seq2Idx)!;
+        if (seq1monomer == seq2monomer)
+          continue;
+
+        substCounter++;
+        substCounterFlag = substCounter > (settings.maxMutations ?? 1);
+        if (substCounterFlag)
+          break;
+
+        tempData.push({
+          pos: currentPosCol.name,
+          seq1monomer: seq1monomer,
+          seq2monomer: seq2monomer,
+          seq1Idx: seq1Idx,
+          seq2Idx: seq2Idx,
+        });
+      }
+
+      if (substCounterFlag || substCounter == 0)
+        continue;
+
+      for (const tempDataElement of tempData) {
+        const position = tempDataElement.pos;
+
+        //Working with seq1monomer
+        const seq1monomer = tempDataElement.seq1monomer;
+        if (!substitutionsInfo.has(seq1monomer))
+          substitutionsInfo.set(seq1monomer, new Map());
+
+        let positionsMap = substitutionsInfo.get(seq1monomer)!;
+        if (!positionsMap.has(position))
+          positionsMap.set(position, new Map());
+
+        let indexes = positionsMap.get(position)!;
+
+        !indexes.has(seq1Idx) ? indexes.set(seq1Idx, [seq2Idx]) : (indexes.get(seq1Idx)! as number[]).push(seq2Idx);
+
+        //Working with seq2monomer
+        const seq2monomer = tempDataElement.seq2monomer;
+        if (!substitutionsInfo.has(seq2monomer))
+          substitutionsInfo.set(seq2monomer, new Map());
+
+        positionsMap = substitutionsInfo.get(seq2monomer)!;
+        if (!positionsMap.has(position))
+          positionsMap.set(position, new Map());
+
+        indexes = positionsMap.get(position)!;
+        !indexes.has(seq2Idx) ? indexes.set(seq2Idx, [seq1Idx]) : (indexes.get(seq2Idx)! as number[]).push(seq1Idx);
+      }
+    }
+  }
+
+  const TypedArray = getTypedArrayConstructor(nRows);
+  for (const positionMap of substitutionsInfo.values()) {
+    for (const indexMap of positionMap.values()) {
+      for (const [index, indexArray] of indexMap.entries())
+        indexMap.set(index, new TypedArray(indexArray));
+    }
+  }
+
+  return substitutionsInfo;
+}

package/src/utils/cell-renderer.ts

@@ -1,8 +1,8 @@
 import * as DG from 'datagrok-api/dg';
-import * as bio from '@datagrok-libraries/bio';
 
 import * as C from './constants';
 import * as types from './types';
+import * as bio from '@datagrok-libraries/bio';
 
 function renderCellSelection(canvasContext: CanvasRenderingContext2D, bound: DG.Rect): void {
   canvasContext.strokeStyle = '#000';
@@ -62,7 +62,8 @@ export function renderMutationCliffCell(canvasContext: CanvasRenderingContext2D,
   if (substitutionsInfo.size > 0) {
     canvasContext.textBaseline = 'middle';
     canvasContext.textAlign = 'center';
-    canvasContext.fillStyle = DG.Color.toHtml(DG.Color.getContrastColor(DG.Color.fromHtml(coef)));
+    // canvasContext.fillStyle = DG.Color.toHtml(DG.Color.getContrastColor(DG.Color.fromHtml(coef)));
+    canvasContext.fillStyle = DG.Color.toHtml(DG.Color.black);
     canvasContext.font = '13px Roboto, Roboto Local, sans-serif';
     let substValue = 0;
     substitutionsInfo.get(currentAAR)?.get(currentPosition)?.forEach((idxs) => substValue += idxs.length);
@@ -100,86 +101,52 @@ export function renderLogoSummaryCell(canvasContext: CanvasRenderingContext2D, c
     renderCellSelection(canvasContext, bound);
 }
 
-export function renderBarchart(ctx: CanvasRenderingContext2D, col: DG.Column, monomerColStats: types.MonomerColStats,
-  bounds: DG.Rect, max: number): types.BarCoordinates {
-  let sum = col.length - (monomerColStats['-']?.count ?? 0);
-  const colorPalette = bio.getPaletteByType(col.tags[C.TAGS.ALPHABET]);
-  const name = col.name;
-  const colNameSize = ctx.measureText(name);
-  const margin = 0.2;
-  const innerMargin = 0.02;
-  const selectLineRatio = 0.1;
-  const fontSize = 11;
-
-  const xMargin = bounds.x + bounds.width * margin;
-  const yMargin = bounds.y + bounds.height * margin / 4;
-  const wMargin = bounds.width - bounds.width * margin * 2;
-  const hMargin = bounds.height - bounds.height * margin;
-  const barWidth = 10;
-  ctx.fillStyle = 'black';
-  ctx.textBaseline = 'top';
-  ctx.font = `${hMargin * margin / 2}px`;
-  ctx.fillText(name, xMargin + (wMargin - colNameSize.width) / 2, yMargin + hMargin + hMargin * margin / 4);
-
-
-  const barCoordinates: types.BarCoordinates = {};
-
-  const xStart = xMargin + (wMargin - barWidth) / 2;
-  for (const [monomer, monomerStats] of Object.entries(monomerColStats)) {
-    if (monomer == '-')
-      continue;
-
-    const count = monomerStats.count;
-    const sBarHeight = hMargin * count / max;
-    const gapSize = sBarHeight * innerMargin;
-    const verticalShift = (max - sum) / max;
-    const textSize = ctx.measureText(monomer);
-    const subBarHeight = sBarHeight - gapSize;
-    const yStart = yMargin + hMargin * verticalShift + gapSize / 2;
-    barCoordinates[monomer] = new DG.Rect(xStart, yStart, barWidth, subBarHeight);
-
-    const color = colorPalette.get(monomer);
-    ctx.strokeStyle = color;
-    ctx.fillStyle = color;
-
-    if (textSize.width <= subBarHeight) {
-      if (color != bio.SeqPaletteBase.undefinedColor)
-        ctx.fillRect(xStart, yStart, barWidth, subBarHeight);
-      else {
-        ctx.strokeRect(xStart + 0.5, yStart, barWidth - 1, subBarHeight);
-        barCoordinates[monomer].x -= 0.5;
-        barCoordinates[monomer].width -= 1;
-      }
-
-      const leftMargin = (wMargin - (monomer.length > 1 ? fontSize : textSize.width - 8)) / 2;
-      const absX = xMargin + leftMargin;
-      const absY = yStart + subBarHeight / 2 + (monomer.length == 1 ? 4 : 0);
-      const origTransform = ctx.getTransform();
-
-      if (monomer.length > 1) {
-        ctx.translate(absX, absY);
-        ctx.rotate(Math.PI / 2);
-        ctx.translate(-absX, -absY);
-      }
-
-      ctx.fillStyle = 'black';
-      ctx.font = `${fontSize}px monospace`;
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'bottom';
-      ctx.fillText(monomer, absX, absY);
-      ctx.setTransform(origTransform);
-    } else
-      ctx.fillRect(xStart, yStart, barWidth, subBarHeight);
-
-    const selectedCount = monomerStats.selected;
-    if (selectedCount) {
-      ctx.fillStyle = 'rgb(255,165,0)';
-      ctx.fillRect(xStart - wMargin * selectLineRatio * 2, yStart,
-        barWidth * selectLineRatio, hMargin * selectedCount / max - gapSize);
-    }
 
-    sum -= count;
+export function drawLogoInBounds(ctx: CanvasRenderingContext2D, bounds: DG.Rect, statsInfo: types.StatsInfo,
+  rowCount: number, cp: bio.SeqPalette, monomerSelectionStats: {[monomer: string]: number} = {},
+  drawOptions: types.DrawOptions = {}): {[monomer: string]: DG.Rect} {
+  drawOptions.fontStyle ??= '16px Roboto, Roboto Local, sans-serif';
+  drawOptions.upperLetterHeight ??= 12.2;
+  drawOptions.upperLetterAscent ??= 0.25;
+  drawOptions.marginVertical ??= 5;
+  drawOptions.marginHorizontal ??= 5;
+
+  const totalSpaceBetweenLetters = (statsInfo.orderedIndexes.length - 1) * drawOptions.upperLetterAscent;
+  const barHeight = bounds.height - 2 * drawOptions.marginVertical - totalSpaceBetweenLetters;
+  const leftShift = drawOptions.marginHorizontal * 2;
+  const barWidth = bounds.width - leftShift * 2;
+  const xStart = bounds.x + leftShift;
+  const selectionWidth = 4;
+  const xSelection = bounds.x + 3;
+  let currentY = bounds.y + drawOptions.marginVertical;
+
+  const monomerBounds: {[monomer: string]: DG.Rect} = {};
+  for (const index of statsInfo.orderedIndexes) {
+    const monomer = statsInfo.monomerCol.get(index)!;
+    const monomerHeight = barHeight * (statsInfo.countCol.get(index)! / rowCount);
+    const selectionHeight = barHeight * ((monomerSelectionStats[monomer] ?? 0) / rowCount);
+    const currentBound = new DG.Rect(xStart, currentY, barWidth, monomerHeight);
+    monomerBounds[monomer] = currentBound;
+
+    ctx.resetTransform();
+    if (monomer !== '-') {
+      const monomerTxt = bio.monomerToShort(monomer, 5);
+      const mTm: TextMetrics = ctx.measureText(monomerTxt);
+
+      // Filling selection
+      ctx.lineWidth = selectionWidth;
+      ctx.line(xSelection, currentY, xSelection, currentY + selectionHeight, DG.Color.rowSelection);
+
+      ctx.fillStyle = cp.get(monomer) ?? cp.get('other');
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'top';
+      ctx.font = drawOptions.fontStyle;
+      // Hacks to scale uppercase characters to target rectangle
+      ctx.setTransform(barWidth / mTm.width, 0, 0, monomerHeight / drawOptions.upperLetterHeight, xStart, currentY);
+      ctx.fillText(monomerTxt, 0, 0);
+    }
+    currentY += monomerHeight + drawOptions.upperLetterAscent;
   }
 
-  return barCoordinates;
+  return monomerBounds;
 }

package/src/utils/misc.ts

@@ -45,30 +45,22 @@ export function scaleActivity(activityCol: DG.Column<number>, scaling: string =
   return scaledCol;
 }
 
-export function calculateBarsData(columns: DG.Column<string>[], selection: DG.BitSet): type.MonomerDfStats {
-  const dfStats: type.MonomerDfStats = {};
-  const columnsLen = columns.length;
-
-  for (let colIndex = 0; colIndex < columnsLen; colIndex++) {
-    const col = columns[colIndex];
-    dfStats[col.name] = calculateSingleBarData(col, selection);
-  }
-
-  return dfStats;
-}
-
-export function calculateSingleBarData(col: DG.Column<string>, selection: DG.BitSet): type.MonomerColStats {
-  const colLen = col.length;
-  const colStats: type.MonomerColStats = {};
-  col.categories.forEach((monomer) => colStats[monomer] = {count: 0, selected: 0});
-
-  for (let rowIndex = 0; rowIndex < colLen; rowIndex++) {
-    const monomerStats = colStats[col.get(rowIndex)!];
-    monomerStats.count += 1;
-    monomerStats.selected += +selection.get(rowIndex);
+export function calculateSelected(df: DG.DataFrame): type.MonomerSelectionStats {
+  const monomerColumns: DG.Column<string>[] = df.columns.bySemTypeAll(C.SEM_TYPES.MONOMER);
+  const selectedObj: type.MonomerSelectionStats = {};
+  for (const idx of df.selection.getSelectedIndexes()) {
+    for (const col of monomerColumns) {
+      const monomer = col.get(idx);
+      if (!monomer)
+        continue;
+      
+      selectedObj[col.name] ??= {};
+      selectedObj[col.name][monomer] ??= 0;
+      selectedObj[col.name][monomer] += 1;
+    }
   }
 
-  return colStats;
+  return selectedObj;
 }
 
 export function isGridCellInvalid(gc: DG.GridCell | null): boolean {

package/src/utils/statistics.ts

@@ -20,11 +20,10 @@ export function getStats(data: StatsData, mask: DG.BitSet): Stats {
 
   const testResult = tTest(selected, rest);
   const currentMeanDiff = testResult['Mean difference']!;
-  const realCount = selected.length || data.length;
   return {
-    count: realCount,
+    count: selected.length,
     pValue: testResult[currentMeanDiff >= 0 ? 'p-value more' : 'p-value less'],
     meanDifference: currentMeanDiff,
-    ratio: realCount / data.length,
+    ratio: selected.length / data.length,
   };
 }

package/src/utils/types.ts

@@ -1,5 +1,4 @@
 import * as DG from 'datagrok-api/dg';
-import * as bio from '@datagrok-libraries/bio';
 
 export type DataFrameDict = {[key: string]: DG.DataFrame};
 
@@ -8,13 +7,30 @@ export type UTypedArray = Uint8Array | Uint16Array | Uint32Array;
 export type SubstitutionsInfo = Map<string, Map<string, Map<number, number[] | UTypedArray>>>;
 export type PositionToAARList = {[postiton: string]: string[]};
 
-export type HELMMonomer = bio.Monomer;
+export type MonomerSelectionStats = {[position: string]: {[monomer: string]: number}};
 
-export type MonomerColStats = {[monomer: string]: {count: number, selected: number}};
-export type MonomerDfStats = {[position: string]: MonomerColStats};
+export type ScalingMethods = 'none' | 'lg' | '-lg';
+export type PeptidesSettings = {
+  scaling?: ScalingMethods,
+  isBidirectional?: boolean,
+  maxMutations?: number,
+  minActivityDelta?: number,
+  columns?: {[col: string]: string},
+};
 
-export type BarCoordinates = {[monomer: string]: DG.Rect};
+export type DrawOptions = {
+  fontStyle?: string,
+  upperLetterHeight?: number,
+  upperLetterAscent?: number,
+  bounds?: DG.Rect,
+  textAlign?: CanvasTextAlign,
+  textBaseline?: CanvasTextBaseline,
+  marginVertical?: number,
+  marginHorizontal?: number,
+};
 
-export type ScalingMethods = 'none' | 'lg' | '-lg';
-export type PeptidesSettings =
-  {scaling?: ScalingMethods, isBidirectional?: boolean, maxMutations?: number, minActivityDelta?: number};
+export type StatsInfo = {
+  monomerCol: DG.Column<string>,
+  countCol: DG.Column<number>,
+  orderedIndexes: Int32Array,
+}

package/src/viewers/logo-summary.ts

@@ -3,28 +3,40 @@ import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
 import {PeptidesModel} from '../model';
+import * as C from '../utils/constants';
+import * as CR from '../utils/cell-renderer';
+import * as bio from '@datagrok-libraries/bio';
 
 export class LogoSummary extends DG.JsViewer {
   _titleHost = ui.divText('Logo Summary Table', {id: 'pep-viewer-title'});
   model!: PeptidesModel;
   viewerGrid!: DG.Grid;
   initialized: boolean = false;
+  webLogoMode: string;
+  importanceThreshold: number;
 
   constructor() {
     super();
+
+    this.webLogoMode = this.string('webLogoMode', bio.PositionHeight.full, {choices: [bio.PositionHeight.full, bio.PositionHeight.Entropy]});
+    this.importanceThreshold = this.float('importanceThreshold', 0.7);
   }
 
   async onTableAttached(): Promise<void> {
     super.onTableAttached();
 
     this.model = await PeptidesModel.getInstance(this.dataFrame);
-
-    this.subs.push(this.model.onLogoSummaryGridChanged.subscribe((grid) => {
-      this.viewerGrid = grid;
+    this.subs.push(this.model.onSettingsChanged.subscribe(() => {
+      this.createLogoSummaryGrid();
       this.render();
     }));
-    this.model.updateDefault();
-    this.viewerGrid = this.model.logoSummaryGrid;
+    // this.subs.push(this.model.onLogoSummaryGridChanged.subscribe((grid) => {
+    //   this.viewerGrid = grid;
+    //   this.render();
+    // }));
+    // this.model.updateDefault();
+    // this.viewerGrid = this.model.logoSummaryGrid;
+    this.createLogoSummaryGrid();
     this.initialized = true;
     this.render();
   }
@@ -39,4 +51,104 @@ export class LogoSummary extends DG.JsViewer {
       this.viewerGrid.invalidate();
     }
   }
+
+  onPropertyChanged(): void {
+    this.createLogoSummaryGrid();
+    this.render();
+  }
+
+  createLogoSummaryGrid(): DG.Grid {
+    let summaryTableBuilder = this.dataFrame.groupBy([C.COLUMNS_NAMES.CLUSTERS]);
+    for (const [colName, aggregationFunc] of Object.entries(this.model.settings.columns ?? {}))
+      summaryTableBuilder = summaryTableBuilder.add(aggregationFunc as any, colName, `${aggregationFunc}(${colName})`);
+
+    const summaryTable = summaryTableBuilder.aggregate();
+    const summaryTableLength = summaryTable.rowCount;
+    const clustersCol: DG.Column<number> = summaryTable.getCol(C.COLUMNS_NAMES.CLUSTERS);
+    const membersCol: DG.Column<number> = summaryTable.columns.addNewInt('Members');
+    const webLogoCol: DG.Column<string> = summaryTable.columns.addNew('WebLogo', DG.COLUMN_TYPE.STRING);
+    const tempDfList: DG.DataFrame[] = new Array(summaryTableLength);
+    const originalClustersCol = this.dataFrame.getCol(C.COLUMNS_NAMES.CLUSTERS);
+    const peptideCol: DG.Column<string> = this.dataFrame.getCol(C.COLUMNS_NAMES.MACROMOLECULE);
+
+    for (let index = 0; index < summaryTableLength; ++index) {
+      const indexes: number[] = [];
+      for (let j = 0; j < originalClustersCol.length; ++j) {
+        if (originalClustersCol.get(j) === clustersCol.get(index))
+          indexes.push(j);
+      }
+      const tCol = DG.Column.string('peptides', indexes.length);
+      tCol.init((i) => peptideCol.get(indexes[i]));
+
+      for (const tag of peptideCol.tags)
+        tCol.setTag(tag[0], tag[1]);
+
+      const uh = new bio.UnitsHandler(tCol);
+      tCol.setTag(bio.TAGS.alphabetSize, uh.getAlphabetSize().toString());
+
+      const dfSlice = DG.DataFrame.fromColumns([tCol]);
+      tempDfList[index] = dfSlice;
+      webLogoCol.set(index, index.toString());
+      membersCol.set(index, dfSlice.rowCount);
+      //TODO: user should be able to choose threshold
+      if (dfSlice.rowCount <= Math.ceil(this.model.clusterStatsDf.getCol(C.COLUMNS_NAMES.COUNT).stats.max * this.importanceThreshold))
+        summaryTable.filter.set(index, false, false);
+    }
+    webLogoCol.setTag(DG.TAGS.CELL_RENDERER, 'html');
+
+    this.viewerGrid = summaryTable.plot.grid();
+    const gridClustersCol = this.viewerGrid.col(C.COLUMNS_NAMES.CLUSTERS)!;
+    gridClustersCol.name = 'Clusters';
+    gridClustersCol.visible = true;
+    this.viewerGrid.columns.rowHeader!.visible = false;
+    this.viewerGrid.props.rowHeight = 55;
+    this.viewerGrid.onCellPrepare((cell) => {
+      if (cell.isTableCell && cell.tableColumn?.name === 'WebLogo') {
+        tempDfList[parseInt(cell.cell.value)].plot.fromType('WebLogo', {maxHeight: 50, positionHeight: this.webLogoMode})
+          .then((viewer) => cell.element = viewer.root);
+      }
+    });
+    this.viewerGrid.root.addEventListener('click', (ev) => {
+      const cell = this.viewerGrid.hitTest(ev.offsetX, ev.offsetY);
+      if (!cell || !cell.isTableCell)
+        return;
+
+      const cluster = clustersCol.get(cell.tableRowIndex!)!;
+      summaryTable.currentRowIdx = -1;
+      if (ev.shiftKey)
+        this.model.modifyClusterSelection(cluster);
+      else
+        this.model.initClusterSelection(cluster);
+    });
+    this.viewerGrid.onCellRender.subscribe((gridCellArgs) => {
+      const gc = gridCellArgs.cell;
+      if (gc.tableColumn?.name !== C.COLUMNS_NAMES.CLUSTERS || gc.isColHeader)
+        return;
+      const canvasContext = gridCellArgs.g;
+      const bound = gridCellArgs.bounds;
+      canvasContext.save();
+      canvasContext.beginPath();
+      canvasContext.rect(bound.x, bound.y, bound.width, bound.height);
+      canvasContext.clip();
+      CR.renderLogoSummaryCell(canvasContext, gc.cell.value, this.model.logoSummarySelection, bound);
+      gridCellArgs.preventDefault();
+      canvasContext.restore();
+    });
+    this.viewerGrid.onCellTooltip((cell, x, y) => {
+      if (!cell.isColHeader && cell.tableColumn?.name === C.COLUMNS_NAMES.CLUSTERS)
+        this.model.showTooltipCluster(cell.cell.value, x, y);
+      return true;
+    });
+    const webLogoGridCol = this.viewerGrid.columns.byName('WebLogo')!;
+    webLogoGridCol.cellType = 'html';
+    webLogoGridCol.width = 350;
+
+    const gridProps = this.viewerGrid.props;
+    gridProps.allowEdit = false;
+    gridProps.allowRowSelection = false;
+    gridProps.allowBlockSelection = false;
+    gridProps.allowColSelection = false;
+
+    return this.viewerGrid;
+  }
 }

package/src/viewers/sar-viewer.ts

@@ -43,7 +43,7 @@ export class SARViewerBase extends DG.JsViewer {
       return;
     if (!refreshOnly) {
       $(this.root).empty();
-      let switchHost = ui.div();
+      let switchHost = ui.divText('Most Potent Residues', {id: 'pep-viewer-title'});
       if (this.name == 'MC') {
         const mutationCliffsMode = ui.boolInput('', this.isMutationCliffsMode === '1', () => {
           if (this.isModeChanging)

package/src/widgets/manual-alignment.ts

@@ -1,11 +1,11 @@
 import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
-import * as bio from '@datagrok-libraries/bio';
 
 import $ from 'cash-dom';
 import '../styles.css';
 import {PeptidesModel} from '../model';
+import {splitAlignedSequences} from '@datagrok-libraries/bio';
 
 /** Manual sequence alignment widget.
  *
@@ -19,7 +19,7 @@ export function manualAlignmentWidget(alignedSequenceCol: DG.Column<string>, cur
   const applyChangesBtn = ui.button('Apply', async () => {
     const newSequence = sequenceInput.value;
     const affectedRowIndex = currentDf.currentRowIdx;
-    const splitSequence = bio.splitAlignedSequences(DG.Column.fromStrings('splitSequence', [newSequence]));
+    const splitSequence = splitAlignedSequences(DG.Column.fromStrings('splitSequence', [newSequence]));
 
     alignedSequenceCol.set(affectedRowIndex, newSequence);
     for (const part of splitSequence.columns) {