@datagrok/peptides 1.5.1 → 1.7.1

package/src/package-test.ts

@@ -4,6 +4,7 @@ import {runTests, tests, TestContext} from '@datagrok-libraries/utils/src/test';
 import './tests/core';
 import './tests/peptide-space-test';
 import './tests/algorithms';
+import './tests/viewers';
 
 export const _package = new DG.Package();
 export {tests};

package/src/package.ts

@@ -10,19 +10,23 @@ import {MonomerPosition, MostPotentResiduesViewer} from './viewers/sar-viewer';
 
 import {PeptideSpaceViewer} from './viewers/peptide-space-viewer';
 import {LogoSummary} from './viewers/logo-summary';
-import {MonomerWorks} from '@datagrok-libraries/bio';
+import {MonomerWorks} from '@datagrok-libraries/bio/src/monomer-works/monomer-works';
+import {PeptidesModel} from './model';
 
-export let monomerWorks: MonomerWorks | null;
+let monomerWorks: MonomerWorks | null = null;
 
 export const _package = new DG.Package();
-let currentTable: DG.DataFrame;
-let alignedSequenceColumn: DG.Column;
 
 export function getMonomerWorks(): MonomerWorks | null {
   return monomerWorks;
-};
+}
+
+//tags: init
+export async function initPeptides(): Promise<void> {
+  monomerWorks ??= new MonomerWorks(await grok.functions.call('Bio:getBioLib'));
+}
 
-async function main(chosenFile: string): Promise<void> {
+async function openDemoData(chosenFile: string): Promise<void> {
   const pi = DG.TaskBarProgressIndicator.create('Loading Peptides');
   const path = _package.webRoot + 'files/' + chosenFile;
   const peptides = await grok.data.loadTable(path);
@@ -36,13 +40,10 @@ async function main(chosenFile: string): Promise<void> {
 
 //name: Peptides
 //tags: app
-export async function Peptides(): Promise<void> {
+export function Peptides(): void {
   const wikiLink = ui.link('wiki', 'https://github.com/datagrok-ai/public/blob/master/help/domains/bio/peptides.md');
   const textLink = ui.inlineText(['For more details, see our ', wikiLink, '.']);
-  if (monomerWorks == null) {
-    const lib = await grok.functions.call('Bio:getBioLib');
-    monomerWorks = new MonomerWorks(lib);
-  }
+
   const appDescription = ui.info(
     [
       ui.list([
@@ -72,9 +73,9 @@ export async function Peptides(): Promise<void> {
     appDescription,
     ui.info([textLink]),
     ui.divH([
-      ui.button('Simple demo', () => main('aligned.csv'), ''),
-      ui.button('Complex demo', () => main('aligned_2.csv'), ''),
-      ui.button('HELM demo', () => main('aligned_3.csv'), ''),
+      ui.button('Simple demo', () => openDemoData('aligned.csv'), ''),
+      ui.button('Complex demo', () => openDemoData('aligned_2.csv'), ''),
+      ui.button('HELM demo', () => openDemoData('aligned_3.csv'), ''),
     ]),
   ]);
 }
@@ -96,8 +97,7 @@ export function peptidesDialog(): DG.Dialog {
 //input: column col {semType: Macromolecule}
 //output: widget result
 export function peptidesPanel(col: DG.Column): DG.Widget {
-  [currentTable, alignedSequenceColumn] = getOrDefine(col.dataFrame, col);
-  const analyzeObject = analyzePeptidesUI(currentTable, alignedSequenceColumn);
+  const analyzeObject = analyzePeptidesUI(col.dataFrame, col);
   return new DG.Widget(analyzeObject.host);
 }
 
@@ -137,9 +137,14 @@ export function peptideSpace(): PeptideSpaceViewer {
 //input: string _monomer {semType: Monomer}
 //output: widget result
 export function manualAlignment(_monomer: string): DG.Widget {
-  [currentTable, alignedSequenceColumn] = getOrDefine();
   //TODO: recalculate Molfile and Molecule panels on sequence update
-  return manualAlignmentWidget(alignedSequenceColumn, currentTable);
+  const df = grok.shell.t;
+  const model: PeptidesModel | null = df?.temp[PeptidesModel.modelName];
+  if (!model)
+    return new DG.Widget(ui.divText('Manual alignment works with peptides analysis'));
+
+  const col = df.getCol(model.settings.sequenceColumnName!);
+  return manualAlignmentWidget(col, df);
 }
 
 //name: Peptide Space
@@ -147,38 +152,6 @@ export function manualAlignment(_monomer: string): DG.Widget {
 //input: column col {semType: Macromolecule}
 //output: widget result
 export async function peptideSpacePanel(col: DG.Column): Promise<DG.Widget> {
-  [currentTable, alignedSequenceColumn] = getOrDefine(col.dataFrame, col);
   const widget = new PeptideSimilaritySpaceWidget(col, grok.shell.v as DG.TableView);
   return widget.draw();
 }
-
-//name: Get Peptides Structure
-//tags: panel, widgets
-//input: column col {semType: Macromolecule}
-//output: widget result
-export function getPeptidesStructure(col: DG.Column): DG.Widget {
-  const getButtonTooltip = 'Retrieves peptides structure from customer database by special id column';
-  const getButton = ui.button('Get structure', async () => {
-    const progress = DG.TaskBarProgressIndicator.create('Getting structure...');
-    try {
-      const params = {peptidesTable: col.dataFrame};
-      const result = await grok.functions.call('Customerextensions:getPeptidesStructure', params);
-      const text = result ? 'Structure retreived' : 'Structure retreivial is not possible';
-      grok.shell.info(text);
-    } catch (e) {
-      console.warn(e);
-    } finally {
-      progress.close();
-    }
-  }, getButtonTooltip);
-  return new DG.Widget(getButton);
-}
-
-function getOrDefine(dataframe?: DG.DataFrame, column?: DG.Column | null): [DG.DataFrame, DG.Column] {
-  dataframe ??= grok.shell.t;
-  column ??= dataframe.columns.bySemType(DG.SEMTYPE.MACROMOLECULE)!;
-  if (column === null)
-    throw new Error('Table does not contain aligned sequence columns');
-
-  return [dataframe, column];
-}

package/src/styles.css

@@ -52,4 +52,11 @@
   color: #4D5261;
   text-align: center;
   width: 100%;
+  align-self: end;
+}
+
+.pep-help-icon {
+  position: absolute;
+  left: 5px;
+  top: 1px;
 }

package/src/tests/core.ts

@@ -8,7 +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';
+import {ALIGNMENT, ALPHABET, NOTATION, TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule';
 
 category('Core', () => {
   let simpleTable: DG.DataFrame;
@@ -32,16 +32,14 @@ category('Core', () => {
     simpleAlignedSeqCol.semType = DG.SEMTYPE.MACROMOLECULE;
     simpleAlignedSeqCol.setTag(C.TAGS.ALPHABET, ALPHABET.PT);
     simpleAlignedSeqCol.setTag(DG.TAGS.UNITS, NOTATION.FASTA);
-    simpleAlignedSeqCol.setTag(TAGS.aligned, ALIGNMENT.SEQ_MSA);
+    simpleAlignedSeqCol.setTag(bioTAGS.aligned, ALIGNMENT.SEQ_MSA);
     simpleScaledCol = scaleActivity(simpleActivityCol, '-lg');
 
     model = await startAnalysis(simpleActivityCol, simpleAlignedSeqCol, null, simpleTable, simpleScaledCol, '-lg');
     expect(model instanceof PeptidesModel, true);
 
-    if (model != null) {
+    if (model != null)
       model.mutationCliffsSelection = {'11': ['D']};
-      grok.shell.closeTable(model.df);
-    }
   });
 
   test('Start analysis: сomplex', async () => {
@@ -52,18 +50,16 @@ category('Core', () => {
     complexAlignedSeqCol.semType = DG.SEMTYPE.MACROMOLECULE;
     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] = '/';
+    complexAlignedSeqCol.setTag(bioTAGS.aligned, ALIGNMENT.SEQ_MSA);
+    complexAlignedSeqCol.setTag(C.TAGS.SEPARATOR, '/');
     complexScaledCol = scaleActivity(complexActivityCol, '-lg');
 
     model = await startAnalysis(
       complexActivityCol, complexAlignedSeqCol, null, complexTable, complexScaledCol, '-lg');
     expect(model instanceof PeptidesModel, true);
 
-    if (model != null) {
+    if (model != null)
       model.mutationCliffsSelection = {'13': ['-']};
-      grok.shell.closeTable(model.df);
-    }
   });
 
   test('Save and load project', async () => {
@@ -74,7 +70,7 @@ category('Core', () => {
     simpleAlignedSeqCol.semType = DG.SEMTYPE.MACROMOLECULE;
     simpleAlignedSeqCol.setTag(C.TAGS.ALPHABET, ALPHABET.PT);
     simpleAlignedSeqCol.setTag(DG.TAGS.UNITS, NOTATION.FASTA);
-    simpleAlignedSeqCol.setTag(TAGS.aligned, ALIGNMENT.SEQ_MSA);
+    simpleAlignedSeqCol.setTag(bioTAGS.aligned, ALIGNMENT.SEQ_MSA);
     simpleScaledCol = scaleActivity(simpleActivityCol, '-lg');
 
     model = await startAnalysis(simpleActivityCol, simpleAlignedSeqCol, null, simpleTable, simpleScaledCol, '-lg');
@@ -95,12 +91,57 @@ category('Core', () => {
     grok.shell.closeTable(d);
     await delay(500);
 
-    await grok.dapi.projects.open('Peptides project unique test');
+    await sp.open();
     v = grok.shell.getTableView('Peptides analysis');
-    grok.shell.closeTable(v.dataFrame);
 
     await grok.dapi.layouts.delete(sl);
     await grok.dapi.tables.delete(sti);
     await grok.dapi.projects.delete(sp);
   });
+
+  test('Cluster stats - Benchmark HELM 5k', async () => {
+    const df = (await _package.files.readBinaryDataFrames('tests/aligned_5k_2.d42'))[0];
+    const activityCol = df.getCol('Activity');
+    const scaledActivityCol = scaleActivity(activityCol, 'none');
+    const clustersCol = df.getCol('Cluster');
+    const sequenceCol = df.getCol('HELM');
+    sequenceCol.semType = DG.SEMTYPE.MACROMOLECULE;
+    sequenceCol.setTag(DG.TAGS.UNITS, NOTATION.HELM);
+    const model = await startAnalysis(activityCol, sequenceCol, clustersCol, df, scaledActivityCol, 'none');
+
+    for (let i = 0; i < 5; ++i)
+      DG.time('Cluster stats', () => model?.calculateClusterStatistics());
+  }, {skipReason: 'Benchmark'});
+
+  test('Monomer Position stats - Benchmark HELM 5k', async () => {
+    const df = (await _package.files.readBinaryDataFrames('tests/aligned_5k.d42'))[0];
+    const activityCol = df.getCol('Activity');
+    const scaledActivityCol = scaleActivity(activityCol, 'none');
+    const clustersCol = df.getCol('Cluster');
+    const sequenceCol = df.getCol('HELM');
+    sequenceCol.semType = DG.SEMTYPE.MACROMOLECULE;
+    sequenceCol.setTag(DG.TAGS.UNITS, NOTATION.HELM);
+    const model = await startAnalysis(activityCol, sequenceCol, clustersCol, df, scaledActivityCol, 'none');
+
+    for (let i = 0; i < 5; ++i)
+      DG.time('Monomer position stats', () => model?.calculateMonomerPositionStatistics());
+  }, {skipReason: 'Benchmark'});
+
+  test('Analysis start - Benchmark HELM 5k', async () => {
+    const df = (await _package.files.readBinaryDataFrames('tests/aligned_5k.d42'))[0];
+    const activityCol = df.getCol('Activity');
+    const scaledActivityCol = scaleActivity(activityCol, 'none');
+    const clustersCol = df.getCol('Cluster');
+    const sequenceCol = df.getCol('HELM');
+    sequenceCol.semType = DG.SEMTYPE.MACROMOLECULE;
+    sequenceCol.setTag(DG.TAGS.UNITS, NOTATION.HELM);
+
+    for (let i = 0; i < 5; ++i) {
+      await DG.timeAsync('Analysis start', async () => {
+        const model = await startAnalysis(activityCol, sequenceCol, clustersCol, df, scaledActivityCol, 'none');
+        if (model)
+          grok.shell.closeTable(model.df);
+      });
+    }
+  }, {skipReason: 'Benchmark'});
 });

package/src/tests/peptide-space-test.ts

@@ -1,10 +1,5 @@
 import {/*before, after, */after, category, test} from '@datagrok-libraries/utils/src/test';
-import {
-  _testViewerIsDrawing,
-  _testDimensionalityReducer,
-  _testPeptideSimilaritySpaceViewer,
-  _testTableIsNotEmpty,
-} from './utils';
+import * as utils from './utils';
 import {DimensionalityReducer} from '@datagrok-libraries/ml/src/reduce-dimensionality';
 import {cleanAlignedSequencesColumn} from '../utils/peptide-similarity-space';
 import {aligned1} from './test-data';
@@ -12,7 +7,6 @@ import {aligned1} from './test-data';
 import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
 import {StringMetrics} from '@datagrok-libraries/ml/src/typed-metrics';
-import {computeWeights} from '../viewers/peptide-space-viewer';
 import {_package} from '../package-test';
 
 let table: DG.DataFrame;
@@ -22,12 +16,12 @@ category('Peptide space', async () => {
   table = DG.DataFrame.fromCsv(aligned1);
 
   test('test_table.is_not_empty', async () => {
-    _testTableIsNotEmpty(table);
+    utils._testTableIsNotEmpty(table);
   });
 
   test('PeptideSimilaritySpaceWidget.is_drawing', async () => {
     view = grok.shell.addTableView(table);
-    await _testViewerIsDrawing(table, view);
+    await utils._testViewerIsDrawing(table, view);
   });
 
   const alignedSequencesColumn = table.getCol('AlignedSequence');
@@ -37,7 +31,7 @@ category('Peptide space', async () => {
     for (const method of DimensionalityReducer.availableMethods) {
       for (const measure of DimensionalityReducer.availableMetricsByType('String')) {
         test(`peptide_space.DimensinalityReducer.${method}.${measure}.is_numeric`, async () => {
-          await _testDimensionalityReducer(columnData, method as StringMetrics, measure);
+          await utils._testDimensionalityReducer(columnData, method as StringMetrics, measure);
         });
       }
     }
@@ -47,51 +41,9 @@ category('Peptide space', async () => {
     for (const method of DimensionalityReducer.availableMethods) {
       for (const measure of DimensionalityReducer.availableMetricsByType('String')) {
         test(`peptide_space.PeptideSimilaritySpaceViewer.${method}.${measure}.is_proper`, async () => {
-          await _testPeptideSimilaritySpaceViewer(table, alignedSequencesColumn, method, measure, 100);//, view);
+          await utils._testPeptideSimilaritySpaceViewer(table, alignedSequencesColumn, method, measure, 100);//, view);
         });
       }
     }
   });
-
-  after(async () => {
-    view?.close();
-  });
 });
-
-// category('Peptide Space Performance', () => {
-//   test('test_compute_weights_performance', async () => {
-//     const table = DG.DataFrame.fromCsv(await _package.files.readAsText('peptides_large.csv'));
-//     const results: {[key: string]: {[key: string]: {[key: string]: number}}} = {};
-//     const sliceVolumes = [1, 2, 3, 4, 5, 7, 10];
-//     const methods = DimensionalityReducer.availableMethods;
-//     const metrics = DimensionalityReducer.availableMetricsByType('String');
-//     const totalRuns = sliceVolumes.length * methods.length * metrics.length;
-//     console.log('Started Peptide Space Performance benchmark...');
-
-//     let run = 0;
-//     for (const slice of sliceVolumes) {
-//       const bitset = DG.BitSet.create(table.rowCount, (i) => i < slice * 1000);
-//       const tableSlice = table.clone(bitset);
-//       const col = tableSlice.getCol('sequence');
-//       const methodObj: {[key: string]: {[key: string]: number}} = {};
-
-//       for (const method of methods) {
-//         const measureObj: {[key: string]: number} = {};
-
-//         for (const metric of metrics) {
-//           console.log(`Run ${run++}/${totalRuns}`);
-
-//           const start = new Date();
-//           await computeWeights(tableSlice, method, metric, 100, col);
-//           const stop = new Date();
-
-//           measureObj[metric] = stop.getTime() - start.getTime();
-//         }
-//         methodObj[method] = measureObj;
-//       }
-//       results[`${slice}k`] = methodObj;
-//     }
-//     console.log('Peptide Space Performance benchmark finished...');
-//     console.log(results);
-//   });
-// });

package/src/tests/viewers.ts

@@ -0,0 +1,17 @@
+import * as DG from 'datagrok-api/dg';
+import * as grok from 'datagrok-api/grok';
+//import * as ui from 'datagrok-api/ui';
+
+import {category, test, testViewer} from '@datagrok-libraries/utils/src/test';
+import {aligned1} from './test-data';
+
+
+category('Viewers', () => {
+  const df = DG.DataFrame.fromCsv(aligned1);
+  const viewers = DG.Func.find({package: 'Peptides', tags: ['viewer']}).map((f) => f.friendlyName);
+  for (const v of viewers) {
+    test(v, async () => {
+      await testViewer(v, df.clone(), true);
+    }, {skipReason: 'GROK-11534'});
+  }
+});

package/src/utils/cell-renderer.ts

@@ -2,7 +2,9 @@ import * as DG from 'datagrok-api/dg';
 
 import * as C from './constants';
 import * as types from './types';
-import * as bio from '@datagrok-libraries/bio';
+import {PositionStats, SummaryStats, MonomerPositionStats} from '../model';
+import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
+import {monomerToShort} from '@datagrok-libraries/bio/src/utils/macromolecule';
 
 function renderCellSelection(canvasContext: CanvasRenderingContext2D, bound: DG.Rect): void {
   canvasContext.strokeStyle = '#000';
@@ -18,34 +20,32 @@ export function setAARRenderer(col: DG.Column, alphabet: string): void {
 }
 
 export function renderMutationCliffCell(canvasContext: CanvasRenderingContext2D, currentAAR: string,
-  currentPosition: string, statsDf: DG.DataFrame, mdCol: DG.Column<number>, bound: DG.Rect, cellValue: number,
+  currentPosition: string, monomerPositionStats: MonomerPositionStats, bound: DG.Rect,
   mutationCliffsSelection: types.PositionToAARList, substitutionsInfo: types.SubstitutionsInfo,
   twoColorMode: boolean = false): void {
-  const queryAAR = `${C.COLUMNS_NAMES.MONOMER} = ${currentAAR}`;
-  const query = `${queryAAR} and ${C.COLUMNS_NAMES.POSITION} = ${currentPosition}`;
-  const pVal: number = statsDf
-    .groupBy([C.COLUMNS_NAMES.P_VALUE])
-    .where(query)
-    .aggregate()
-    .get(C.COLUMNS_NAMES.P_VALUE, 0);
+  const positionStats = monomerPositionStats[currentPosition];
+  const pVal: number = positionStats[currentAAR].pValue;
+  const currentMeanDiff = positionStats[currentAAR].meanDifference;
 
   let coef: string;
-  const variant = cellValue < 0;
+  const isMeanDeltaNegative = currentMeanDiff < 0;
   if (pVal < 0.01)
-    coef = variant && twoColorMode ? '#FF7900' : '#299617';
+    coef = isMeanDeltaNegative && twoColorMode ? '#FF7900' : '#299617';
   else if (pVal < 0.05)
-    coef = variant && twoColorMode ? '#FFA500' : '#32CD32';
+    coef = isMeanDeltaNegative && twoColorMode ? '#FFA500' : '#32CD32';
   else if (pVal < 0.1)
-    coef = variant && twoColorMode ? '#FBCEB1' : '#98FF98';
+    coef = isMeanDeltaNegative && twoColorMode ? '#FBCEB1' : '#98FF98';
   else
     coef = DG.Color.toHtml(DG.Color.lightLightGray);
 
 
-  const chooseMin = (): number => twoColorMode ? 0 : mdCol.min;
-  const chooseMax = (): number => twoColorMode ? Math.max(Math.abs(mdCol.min), mdCol.max) : mdCol.max;
-  const chooseCurrent = (): any => twoColorMode ? Math.abs(cellValue) : cellValue;
+  const minMeanDifference = twoColorMode ? 0 : monomerPositionStats.general.minMeanDifference;
+  const maxMeanDifference = twoColorMode ?
+    Math.max(Math.abs(monomerPositionStats.general.minMeanDifference), monomerPositionStats.general.maxMeanDifference) :
+    monomerPositionStats.general.maxMeanDifference;
+  const currentMeanDifference = twoColorMode ? Math.abs(currentMeanDiff) : currentMeanDiff;
 
-  const rCoef = (chooseCurrent() - chooseMin()) / (chooseMax() - chooseMin());
+  const rCoef = (currentMeanDifference - minMeanDifference) / (maxMeanDifference - minMeanDifference);
 
   const maxRadius = 0.9 * (bound.width > bound.height ? bound.height : bound.width) / 2;
   const radius = Math.floor(maxRadius * rCoef);
@@ -92,22 +92,22 @@ export function renderInvaraintMapCell(canvasContext: CanvasRenderingContext2D,
     renderCellSelection(canvasContext, bound);
 }
 
-export function renderLogoSummaryCell(canvasContext: CanvasRenderingContext2D, cellValue: string, cellRawData: number,
-  clusterSelection: number[], bound: DG.Rect): void {
+export function renderLogoSummaryCell(canvasContext: CanvasRenderingContext2D, cellValue: string,
+  clusterSelection: string[], bound: DG.Rect): void {
   canvasContext.font = '13px Roboto, Roboto Local, sans-serif';
   canvasContext.textAlign = 'center';
   canvasContext.textBaseline = 'middle';
   canvasContext.fillStyle = '#000';
   canvasContext.fillText(cellValue.toString(), bound.x + (bound.width / 2), bound.y + (bound.height / 2), bound.width);
 
-  if (clusterSelection.includes(cellRawData))
+  if (clusterSelection.includes(cellValue))
     renderCellSelection(canvasContext, bound);
 }
 
 
-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} {
+export function drawLogoInBounds(ctx: CanvasRenderingContext2D, bounds: DG.Rect, stats: PositionStats,
+  sortedOrder: string[], rowCount: number, cp: 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;
@@ -115,7 +115,7 @@ export function drawLogoInBounds(ctx: CanvasRenderingContext2D, bounds: DG.Rect,
   drawOptions.marginHorizontal ??= 5;
 
   const pr = window.devicePixelRatio;
-  const totalSpaceBetweenLetters = (statsInfo.orderedIndexes.length - 1) * drawOptions.upperLetterAscent;
+  const totalSpaceBetweenLetters = (sortedOrder.length - 1) * drawOptions.upperLetterAscent;
   const barHeight = (bounds.height - 2 * drawOptions.marginVertical - totalSpaceBetweenLetters) * pr;
   const leftShift = drawOptions.marginHorizontal * 2;
   const barWidth = (bounds.width - leftShift * 2) * pr;
@@ -124,17 +124,16 @@ export function drawLogoInBounds(ctx: CanvasRenderingContext2D, bounds: DG.Rect,
   const xSelection = (bounds.x + 3) * pr;
   let currentY = (bounds.y + drawOptions.marginVertical) * pr;
 
-  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 monomerBounds: { [monomer: string]: DG.Rect } = {};
+  for (const monomer of sortedOrder) {
+    const monomerHeight = barHeight * (stats[monomer].count / rowCount);
     const selectionHeight = barHeight * ((monomerSelectionStats[monomer] ?? 0) / rowCount);
     const currentBound = new DG.Rect(xStart / pr, currentY / pr, barWidth / pr, monomerHeight / pr);
     monomerBounds[monomer] = currentBound;
 
     ctx.resetTransform();
     if (monomer !== '-' && monomer !== '') {
-      const monomerTxt = bio.monomerToShort(monomer, 5);
+      const monomerTxt = monomerToShort(monomer, 5);
       const mTm: TextMetrics = ctx.measureText(monomerTxt);
 
       // Filling selection

package/src/utils/constants.ts

@@ -7,7 +7,15 @@ export enum COLUMNS_NAMES {
   MEAN_DIFFERENCE = 'Mean difference',
   COUNT = 'Count',
   RATIO = 'Ratio',
+}
+
+export enum LST_COLUMN_NAMES {
   MEMBERS = 'Members',
+  WEB_LOGO = 'WebLogo',
+  DISTRIBUTION = 'Distribution',
+  MEAN_DIFFERENCE = 'Mean difference',
+  P_VALUE = 'P-Value',
+  RATIO = 'Ratio',
 }
 
 export enum CATEGORIES {
@@ -26,6 +34,8 @@ export enum TAGS {
   CLUSTER_SELECTION = 'clusterSelection',
   VISIBLE = 'visible',
   SETTINGS = 'settings',
+  CUSTOM_CLUSTER = 'customCluster',
+  UUID = 'pep-uuid',
 }
 
 export enum SEM_TYPES {
@@ -35,4 +45,4 @@ export enum SEM_TYPES {
 
 export const EMBEDDING_STATUS = 'embeddingStatus';
 
-export const PEPTIDES_ANALYSIS = 'isPeptidesAnalysis';
+export const MULTIPLE_VIEWS = 'isMultipleViews';

package/src/utils/misc.ts

@@ -1,3 +1,5 @@
+import {StringDictionary} from '@datagrok-libraries/utils/src/type-declarations';
+import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 import * as C from './constants';
 import * as type from './types';
@@ -36,6 +38,7 @@ export function scaleActivity(activityCol: DG.Column<number>, scaling: string =
   return scaledCol;
 }
 
+//TODO: optimize
 export function calculateSelected(df: DG.DataFrame): type.MonomerSelectionStats {
   const monomerColumns: DG.Column<string>[] = df.columns.bySemTypeAll(C.SEM_TYPES.MONOMER);
   const selectedObj: type.MonomerSelectionStats = {};
@@ -54,10 +57,10 @@ export function calculateSelected(df: DG.DataFrame): type.MonomerSelectionStats
   return selectedObj;
 }
 
-export function isGridCellInvalid(gc: DG.GridCell | null): boolean {
-  return !gc || !gc.cell.value || !gc.tableColumn || gc.tableRowIndex == null || gc.tableRowIndex == -1 ||
-    gc.cell.value == DG.INT_NULL || gc.cell.value == DG.FLOAT_NULL;
-}
+// export function isGridCellInvalid(gc: DG.GridCell | null): boolean {
+//   return !gc || !gc.cell.value || !gc.tableColumn || gc.tableRowIndex == null || gc.tableRowIndex == -1 ||
+//     gc.cell.value == DG.INT_NULL || gc.cell.value == DG.FLOAT_NULL;
+// }
 
 export function extractMonomerInfo(col: DG.Column<string>): type.RawColumn {
   return {
@@ -66,3 +69,12 @@ export function extractMonomerInfo(col: DG.Column<string>): type.RawColumn {
     rawData: col.getRawData(),
   };
 }
+
+export function wrapDistroAndStatsDefault(labels: HTMLDivElement, histRoot: HTMLElement, tableMap: StringDictionary,
+  isTooltip: boolean = false): HTMLDivElement {
+  const result = ui.divV([labels, histRoot, ui.tableFromMap(tableMap)]);
+  result.style.minWidth = '200px';
+  if (isTooltip)
+    histRoot.style.maxHeight = '150px';
+  return result;
+}

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

@@ -188,7 +188,7 @@ export class PeptideSimilaritySpaceWidget {
   }
 
   /**
-   * Draws a viewer on property panel.
+   * Draws a viewer on context panel.
    *
    * @return {Promise<DG.Widget>} The corresponding widget.
    * @memberof PeptideSimilaritySpaceWidget

package/src/utils/types.ts

@@ -40,3 +40,5 @@ export type StatsInfo = {
 }
 
 export type RawColumn = {name: string, rawData: RawData, cat?: string[]};
+
+export type CustomClusters = {[clusterName: string]: number[] | Int32Array};