@datagrok/peptides 1.7.2 → 1.8.1

package/src/viewers/logo-summary.ts

@@ -3,33 +3,41 @@ import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
 import $ from 'cash-dom';
-import {PeptidesModel} from '../model';
+import {ClusterType, CLUSTER_TYPE, PeptidesModel, VIEWER_TYPE} from '../model';
 import * as C from '../utils/constants';
 import * as CR from '../utils/cell-renderer';
-import {TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule';
-import {PositionHeight} from '@datagrok-libraries/bio/src/viewers/web-logo';
-import {getStats, MaskInfo, Stats} from '../utils/statistics';
+import {TAGS as bioTAGS, getSplitterForColumn} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {HorizontalAlignments, PositionHeight} from '@datagrok-libraries/bio/src/viewers/web-logo';
+import {getAggregatedValue, getStats, Stats} from '../utils/statistics';
 import wu from 'wu';
 import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {getActivityDistribution, getDistributionLegend, getStatsTableMap} from '../widgets/distribution';
+import {getStatsSummary} from '../utils/misc';
+import BitArray from '@datagrok-libraries/utils/src/bit-array';
 
-export class LogoSummary extends DG.JsViewer {
-  _titleHost = ui.divText('Logo Summary Table', {id: 'pep-viewer-title'});
+const getAggregatedColName = (aggF: string, colName: string): string => `${aggF}(${colName})`;
+
+export enum LST_PROPERTIES {
+  WEB_LOGO_MODE = 'webLogoMode',
+  MEMBERS_RATIO_THRESHOLD = 'membersRatioThreshold',
+};
+
+export class LogoSummaryTable extends DG.JsViewer {
+  _titleHost = ui.divText(VIEWER_TYPE.LOGO_SUMMARY_TABLE, {id: 'pep-viewer-title'});
   model!: PeptidesModel;
   viewerGrid!: DG.Grid;
   initialized: boolean = false;
   webLogoMode: string;
   membersRatioThreshold: number;
-  newClusterName: string;
-  webLogoDfPlot: DG.DataFramePlotHelper[] = [];
-  distributionDfPlot: DG.DataFramePlotHelper[] = [];
+  webLogoDfPlot: DG.DataFrame[] = [];
+  distributionDfPlot: DG.DataFrame[] = [];
 
   constructor() {
     super();
 
-    this.webLogoMode = this.string('webLogoMode', PositionHeight.full,
+    this.webLogoMode = this.string(LST_PROPERTIES.WEB_LOGO_MODE, PositionHeight.Entropy,
       {choices: [PositionHeight.full, PositionHeight.Entropy]});
-    this.membersRatioThreshold = this.float('membersRatioThreshold', 0.7, {min: 0, max: 1.0});
-    this.newClusterName = this.string('newClusterName', 'New cluster');
+    this.membersRatioThreshold = this.float(LST_PROPERTIES.MEMBERS_RATIO_THRESHOLD, 0.3, {min: 0, max: 1.0});
   }
 
   onTableAttached(): void {
@@ -82,142 +90,138 @@ export class LogoSummary extends DG.JsViewer {
     const isDfFiltered = this.dataFrame.filter.anyFalse;
     const filteredDf = isDfFiltered ? this.dataFrame.clone(this.dataFrame.filter) : this.dataFrame;
     const filteredDfCols = filteredDf.columns;
+    const filteredDfRowCount = filteredDf.rowCount;
     const activityCol = filteredDf.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
     const activityColData = activityCol.getRawData();
 
-    const filteredDfClustersCol = filteredDf.getCol(clustersColName);
-    const filteredDfClustersColData = filteredDfClustersCol.getRawData();
-    const filteredDfClustersColCategories = filteredDfClustersCol.categories;
-    const filteredDfClustersColLength = filteredDfClustersColData.length;
+    const filteredDfClustCol = filteredDf.getCol(clustersColName);
+    const filteredDfClustColData = filteredDfClustCol.getRawData();
+    const filteredDfClustColCat = filteredDfClustCol.categories;
+
+    const pepCol: DG.Column<string> = filteredDf.getCol(this.model.settings.sequenceColumnName!);
 
-    // const customClustersColumnsList = wu(this.model.customClusters).toArray();
     const query: { [key: string]: string } = {};
     query[C.TAGS.CUSTOM_CLUSTER] = '1';
-    const customClustersColumnsList = wu(filteredDfCols.byTags(query)).filter(c => c.max > 0).toArray();
-    const getAggregatedColName = (aggF: string, colName: string) => `${aggF}(${colName})`;
-    const isCustomCluster = (cluster: string) => filteredDfCols.contains(cluster);
-
-    let summaryTableBuilder = filteredDf.groupBy([clustersColName]);
-    const aggregateColumnsEntries = Object.entries(this.model.settings.columns ?? {});
-    for (const [colName, aggregationFunc] of aggregateColumnsEntries) {
-      summaryTableBuilder = summaryTableBuilder.add(
-        aggregationFunc as any, colName, getAggregatedColName(aggregationFunc, colName));
+    const customClustColList: DG.Column<boolean>[] =
+      wu(filteredDfCols.byTags(query)).filter((c) => c.max > 0).toArray();
+
+    const customLST = DG.DataFrame.create(customClustColList.length);
+    const customLSTCols = customLST.columns;
+    const customLSTClustCol = customLSTCols.addNewString(clustersColName);
+
+    const customMembersColData = customLSTCols.addNewInt(C.LST_COLUMN_NAMES.MEMBERS).getRawData();
+    const customWebLogoCol = customLSTCols.addNewString(C.LST_COLUMN_NAMES.WEB_LOGO);
+    const customDistCol = customLSTCols.addNewString(C.LST_COLUMN_NAMES.DISTRIBUTION);
+    const customMDColData = customLSTCols.addNewFloat(C.LST_COLUMN_NAMES.MEAN_DIFFERENCE).getRawData();
+    const customPValColData = customLSTCols.addNewFloat(C.LST_COLUMN_NAMES.P_VALUE).getRawData();
+    const customRatioColData = customLSTCols.addNewFloat(C.LST_COLUMN_NAMES.RATIO).getRawData();
+
+    let origLSTBuilder = filteredDf.groupBy([clustersColName]);
+    const aggColsEntries = Object.entries(this.model.settings.columns ?? {});
+    const aggColNames = aggColsEntries.map(([colName, aggFn]) => getAggregatedColName(aggFn, colName));
+    const customAggRawCols = new Array(aggColNames.length);
+    const colAggEntries = aggColsEntries.map(
+      ([colName, aggFn]) => [filteredDf.getCol(colName), aggFn] as [DG.Column<number>, DG.AggregationType]);
+
+    for (let aggIdx = 0; aggIdx < aggColsEntries.length; ++aggIdx) {
+      const [colName, aggFn] = aggColsEntries[aggIdx];
+      origLSTBuilder = origLSTBuilder.add(aggFn, colName, aggColNames[aggIdx]);
+      const customLSTAggCol = customLSTCols.addNewFloat(aggColNames[aggIdx]);
+      customAggRawCols[aggIdx] = customLSTAggCol.getRawData();
     }
 
-    const tempSummaryTable = summaryTableBuilder.aggregate();
-    const tempSummaryTableLength = tempSummaryTable.rowCount;
-    const tempClustersCol: DG.Column<string> = tempSummaryTable.getCol(clustersColName);
-    const summaryTableLength = tempSummaryTableLength + customClustersColumnsList.length;
-    const summaryTable = DG.DataFrame.create(summaryTableLength);
-    const summaryTableCols = summaryTable.columns;
-
-    const clustersCol = summaryTableCols.addNewString(clustersColName);
-    for (let i = 0; i < summaryTableLength; ++i) {
-      clustersCol.set(i, i < tempSummaryTableLength ? tempClustersCol.get(i) :
-        customClustersColumnsList[i - tempSummaryTableLength].name);
+    // BEGIN: fill LST part with custom clusters
+    const customWebLogoTables: DG.DataFrame[] = new Array(customClustColList.length);
+    const customDistTables: DG.DataFrame[] = new Array(customClustColList.length);
+
+    for (let rowIdx = 0; rowIdx < customClustColList.length; ++rowIdx) {
+      const customClustCol = customClustColList[rowIdx];
+      customLSTClustCol.set(rowIdx, customClustCol.name);
+      const bitArray = BitArray.fromUint32Array(filteredDfRowCount, customClustCol.getRawData() as Uint32Array);
+      const bsMask = DG.BitSet.create(filteredDfRowCount, (i) => bitArray.getBit(i));
+
+      const stats: Stats = isDfFiltered ? getStats(activityColData, bitArray) :
+        this.model.clusterStats[CLUSTER_TYPE.CUSTOM][customClustCol.name];
+
+      customMembersColData[rowIdx] = stats.count;
+      customWebLogoTables[rowIdx] = this.createWebLogoPlot(pepCol, bsMask);
+      customDistTables[rowIdx] = this.createDistributionPlot(activityCol, customClustColList[rowIdx]);
+      customMDColData[rowIdx] = stats.meanDifference;
+      customPValColData[rowIdx] = stats.pValue;
+      customRatioColData[rowIdx] = stats.ratio;
+
+      for (let aggColIdx = 0; aggColIdx < aggColNames.length; ++aggColIdx) {
+        const [col, aggFn] = colAggEntries[aggColIdx];
+        customAggRawCols[aggColIdx][rowIdx] = getAggregatedValue(col, aggFn, bsMask);
+      }
     }
-    const clustersColData = clustersCol.getRawData();
-    const clustersColCategories = clustersCol.categories;
 
-    const peptideCol: DG.Column<string> = filteredDf.getCol(this.model.settings.sequenceColumnName!);
-    const peptideColData = peptideCol.getRawData();
-    const peptideColCategories = peptideCol.categories;
-    const peptideColTags = peptideCol.tags;
+    customWebLogoCol.setTag(DG.TAGS.CELL_RENDERER, 'html');
+    customDistCol.setTag(DG.TAGS.CELL_RENDERER, 'html');
 
-    const membersColData = summaryTableCols.addNewInt(C.LST_COLUMN_NAMES.MEMBERS).getRawData();
-    const webLogoCol = summaryTableCols.addNewString(C.LST_COLUMN_NAMES.WEB_LOGO);
-    const distributionCol = summaryTableCols.addNewString(C.LST_COLUMN_NAMES.DISTRIBUTION);
-    const meanDifferenceColData = summaryTableCols.addNewFloat(C.LST_COLUMN_NAMES.MEAN_DIFFERENCE).getRawData();
-    const pValColData = summaryTableCols.addNewFloat(C.LST_COLUMN_NAMES.P_VALUE).getRawData();
-    const ratioColData = summaryTableCols.addNewFloat(C.LST_COLUMN_NAMES.RATIO).getRawData();
-
-    for (const [colName, aggregationFunc] of aggregateColumnsEntries) {
-      const tempSummaryTableCol = tempSummaryTable.getCol(getAggregatedColName(aggregationFunc, colName));
-      const summaryTableCol = summaryTableCols.addNew(tempSummaryTableCol.name, tempSummaryTableCol.type);
-      summaryTableCol.init((i) => i < tempSummaryTableLength ? tempSummaryTableCol.get(i) : null);
-    }
+    // END
 
-    this.webLogoDfPlot = new Array(summaryTableLength);
-    this.distributionDfPlot = new Array(summaryTableLength);
-
-    for (let summaryTableRowIndex = 0; summaryTableRowIndex < summaryTableLength; ++summaryTableRowIndex) {
-      const isOriginalCluster = summaryTableRowIndex < tempSummaryTableLength;
-      const currentClusterCategoryIndex = clustersColData[summaryTableRowIndex];
-      const currentCluster = clustersColCategories[currentClusterCategoryIndex]; // Cluster name
-      const customClusterColData = customClustersColumnsList.find((col) => col.name == currentCluster)?.toList();
-
-      const isValidIndex = isOriginalCluster ?
-        (j: number) => filteredDfClustersColCategories[filteredDfClustersColData[j]] == currentCluster :
-        (j: number) => customClusterColData![j];
-
-        
-      //TODO: use bitset instead of splitCol
-      const splitCol = DG.Column.bool(C.COLUMNS_NAMES.SPLIT_COL, activityCol.length);
-      const getSplitColValueAt = isOriginalCluster ?
-        (splitColIndex: number) => filteredDfClustersColData[splitColIndex] == currentClusterCategoryIndex :
-        (splitColIndex: number) => customClusterColData![splitColIndex];
-      splitCol.init((i) => getSplitColValueAt(i));
-
-      let stats: Stats;
-      if (isDfFiltered) {
-        const trueCount = splitCol.stats.sum;
-        const maskInfo = {
-          trueCount: trueCount,
-          falseCount: activityColData.length - trueCount,
-          mask: splitCol.toList() as boolean[],
-        };
-        stats = getStats(activityColData, maskInfo);
-      } else
-        stats = this.model.clusterStats[currentCluster];
-
-      const tCol = DG.Column.string('peptides', stats.count);
-      let tColIdx = 0;
-      for (let j = 0; j < filteredDfClustersColLength; ++j) {
-        if (isValidIndex(j))
-          tCol.set(tColIdx++, peptideColCategories[peptideColData[j]]);
-      }
+    // BEGIN: fill LST part with original clusters
+    const origLST = origLSTBuilder.aggregate();
+    const origLSTLen = origLST.rowCount;
+    const origLSTCols = origLST.columns;
+    const origLSTClustCol: DG.Column<string> = origLST.getCol(clustersColName);
 
-      for (const tag of peptideColTags)
-        tCol.setTag(tag[0], tag[1]);
+    const origLSTClustColCat = origLSTClustCol.categories;
 
-      const uh = new UnitsHandler(tCol);
-      tCol.setTag(bioTAGS.alphabetSize, uh.getAlphabetSize().toString());
+    const origMembersColData = origLSTCols.addNewInt(C.LST_COLUMN_NAMES.MEMBERS).getRawData();
+    const origWebLogoCol = origLSTCols.addNewString(C.LST_COLUMN_NAMES.WEB_LOGO);
+    const origDistCol = origLSTCols.addNewString(C.LST_COLUMN_NAMES.DISTRIBUTION);
+    const origMDColData = origLSTCols.addNewFloat(C.LST_COLUMN_NAMES.MEAN_DIFFERENCE).getRawData();
+    const origPValColData = origLSTCols.addNewFloat(C.LST_COLUMN_NAMES.P_VALUE).getRawData();
+    const origRatioColData = origLSTCols.addNewFloat(C.LST_COLUMN_NAMES.RATIO).getRawData();
 
+    const origWebLogoTables: DG.DataFrame[] = new Array(origLSTLen);
+    const origDistTables: DG.DataFrame[] = new Array(origLSTLen);
 
-      const distributionTable = DG.DataFrame.fromColumns([activityCol, splitCol]);
-      const dfSlice = DG.DataFrame.fromColumns([tCol]);
+    const origClustMasks = Array.from({length: origLSTLen},
+      () => BitArray.fromSeq(filteredDfRowCount, () => false));
 
-      this.webLogoDfPlot[summaryTableRowIndex] = dfSlice.plot;
-      this.distributionDfPlot[summaryTableRowIndex] = distributionTable.plot;
+    for (let rowIdx = 0; rowIdx < filteredDfRowCount; ++rowIdx) {
+      const filteredClustName = filteredDfClustColCat[filteredDfClustColData[rowIdx]];
+      const origClustIdx = origLSTClustColCat.indexOf(filteredClustName);
+      origClustMasks[origClustIdx].setTrue(rowIdx);
+    }
 
-      membersColData[summaryTableRowIndex] = stats.count;
-      meanDifferenceColData[summaryTableRowIndex] = stats.meanDifference;
-      pValColData[summaryTableRowIndex] = stats.pValue;
-      ratioColData[summaryTableRowIndex] = stats.ratio;
+    for (let rowIdx = 0; rowIdx < origLSTLen; ++rowIdx) {
+      const mask = origClustMasks[rowIdx];
+      const bsMask = DG.BitSet.create(filteredDfRowCount, (i) => mask.getBit(i));
 
-      //Setting aggregated col values
-      if (!isOriginalCluster) {
-        for (const [colName, aggregationFunc] of aggregateColumnsEntries) {
-          const arrayBuffer = filteredDf.getCol(colName).getRawData();
-          const clusterMask = DG.BitSet.fromBytes(arrayBuffer.buffer, arrayBuffer.byteLength / 4);
-          const subDf = filteredDf.clone(clusterMask, [colName]);
-          const newColName = getAggregatedColName(aggregationFunc, colName);
-          const aggregatedDf = subDf.groupBy()
-            .add(aggregationFunc as any, colName, newColName)
-            .aggregate();
-          const value = aggregatedDf.get(newColName, 0);
-          summaryTable.set(newColName, summaryTableRowIndex, value);
-        }
-      }
+      const stats = isDfFiltered ? getStats(activityColData, mask) :
+        this.model.clusterStats[CLUSTER_TYPE.ORIGINAL][origLSTClustColCat[rowIdx]];
+
+      origMembersColData[rowIdx] = stats.count;
+      origWebLogoTables[rowIdx] = this.createWebLogoPlot(pepCol, bsMask);
+      origDistTables[rowIdx] = this.createDistributionPlot(activityCol,
+        DG.Column.fromBitSet(C.COLUMNS_NAMES.SPLIT_COL, bsMask));
+      origMDColData[rowIdx] = stats.meanDifference;
+      origPValColData[rowIdx] = stats.pValue;
+      origRatioColData[rowIdx] = stats.ratio;
     }
-    webLogoCol.setTag(DG.TAGS.CELL_RENDERER, 'html');
-    distributionCol.setTag(DG.TAGS.CELL_RENDERER, 'html');
+
+    origWebLogoCol.setTag(DG.TAGS.CELL_RENDERER, 'html');
+    origDistCol.setTag(DG.TAGS.CELL_RENDERER, 'html');
+    // END
+
+    // combine LSTs and create a grid
+    const summaryTable = origLST.append(customLST);
+    this.webLogoDfPlot = origWebLogoTables.concat(customWebLogoTables);
+    this.distributionDfPlot = origDistTables.concat(customDistTables);
 
     this.viewerGrid = summaryTable.plot.grid();
+    this.viewerGrid.sort([C.LST_COLUMN_NAMES.MEMBERS], [false]);
     this.updateFilter();
     const gridClustersCol = this.viewerGrid.col(clustersColName)!;
-    gridClustersCol.name = 'Clusters';
+    gridClustersCol.name = C.LST_COLUMN_NAMES.CLUSTER;
     gridClustersCol.visible = true;
+    this.viewerGrid.columns.setOrder([C.LST_COLUMN_NAMES.CLUSTER, C.LST_COLUMN_NAMES.MEMBERS,
+      C.LST_COLUMN_NAMES.WEB_LOGO, C.LST_COLUMN_NAMES.DISTRIBUTION, C.LST_COLUMN_NAMES.MEAN_DIFFERENCE,
+      C.LST_COLUMN_NAMES.P_VALUE, C.LST_COLUMN_NAMES.RATIO, ...aggColNames]);
     this.viewerGrid.columns.rowHeader!.visible = false;
     this.viewerGrid.props.rowHeight = 55;
     this.viewerGrid.onCellPrepare((cell) => {
@@ -225,27 +229,40 @@ export class LogoSummary extends DG.JsViewer {
       if (!cell.isTableCell || currentRowIdx == null || currentRowIdx == -1)
         return;
 
-      if (cell.tableColumn?.name == 'WebLogo') {
-        this.webLogoDfPlot[currentRowIdx]
-          .fromType('WebLogo', {maxHeight: cell.grid.props.rowHeight - 5, positionHeight: this.webLogoMode,
-            horizontalAlignment: 'left'})
+      const height = cell.bounds.height;
+      if (cell.tableColumn?.name == C.LST_COLUMN_NAMES.WEB_LOGO) {
+        const webLogoTable = this.webLogoDfPlot[currentRowIdx];
+        const webLogoTableRowCount = webLogoTable.rowCount;
+        const webLogoTablePepCol = webLogoTable.getCol(pepCol.name);
+        const webLogoTablePepColData = webLogoTablePepCol.getRawData();
+        const webLogoTablePepColCat = webLogoTablePepCol.categories;
+        const splitter = getSplitterForColumn(webLogoTablePepCol);
+        let maxSequenceLength = 0;
+        for (let i = 0; i < webLogoTableRowCount; ++i) {
+          maxSequenceLength = Math.max(maxSequenceLength,
+            splitter(webLogoTablePepColCat[webLogoTablePepColData[i]]).length);
+        }
+        const positionWidth = Math.floor((cell.bounds.width - 2 - (4 * (maxSequenceLength - 1))) / maxSequenceLength);
+        webLogoTable.plot
+          .fromType('WebLogo', {positionHeight: this.webLogoMode, horizontalAlignment: HorizontalAlignments.LEFT,
+            maxHeight: 1000, minHeight: height - 2, positionWidth: positionWidth})
           .then((viewer) => cell.element = viewer.root);
-      } else if (cell.tableColumn?.name == 'Distribution') {
-        const viewerRoot = this.distributionDfPlot[currentRowIdx].histogram({
+      } else if (cell.tableColumn?.name == C.LST_COLUMN_NAMES.DISTRIBUTION) {
+        const viewerRoot = this.distributionDfPlot[currentRowIdx].plot.histogram({
           filteringEnabled: false,
           valueColumnName: C.COLUMNS_NAMES.ACTIVITY_SCALED,
           splitColumnName: C.COLUMNS_NAMES.SPLIT_COL,
           legendVisibility: 'Never',
-          showXAxis: true,
+          showXAxis: false,
           showColumnSelector: false,
           showRangeSlider: false,
           showBinSelector: false,
-          backColor: '#fffff',
+          backColor: DG.Color.toHtml(DG.Color.white),
+          xAxisHeight: 1,
         }).root;
 
         viewerRoot.style.width = 'auto';
-        const height = (cell.grid.props.rowHeight - 5) / 2 * 3;
-        viewerRoot.style.height = `${height}px`;
+        viewerRoot.style.height = `${height-2}px`;
         cell.element = viewerRoot;
       }
     });
@@ -255,10 +272,10 @@ export class LogoSummary extends DG.JsViewer {
         return;
 
       summaryTable.currentRowIdx = -1;
-      if (ev.shiftKey)
-        this.model.modifyClusterSelection(cell.cell.value);
-      else
-        this.model.initClusterSelection(cell.cell.value);
+      if (!ev.shiftKey)
+        this.model.initClusterSelection({notify: false});
+
+      this.model.modifyClusterSelection(cell.cell.value);
       this.viewerGrid.invalidate();
     });
     this.viewerGrid.onCellRender.subscribe((gridCellArgs) => {
@@ -271,13 +288,17 @@ export class LogoSummary extends DG.JsViewer {
       canvasContext.beginPath();
       canvasContext.rect(bound.x, bound.y, bound.width, bound.height);
       canvasContext.clip();
-      CR.renderLogoSummaryCell(canvasContext, gc.cell.value, this.model.logoSummarySelection, bound);
+      CR.renderLogoSummaryCell(canvasContext, gc.cell.value, this.model.clusterSelection, bound);
       gridCellArgs.preventDefault();
       canvasContext.restore();
     });
     this.viewerGrid.onCellTooltip((cell, x, y) => {
-      if (!cell.isColHeader && cell.tableColumn?.name === clustersColName)
-        this.model.showTooltipCluster(cell.cell.rowIndex, x, y, cell.cell.value);
+      if (!cell.isColHeader && cell.tableColumn?.name === clustersColName) {
+        const clustName = cell.cell.value;
+        const clustColCat = this.dataFrame.getCol(this.model.settings.clustersColumnName!).categories;
+        const clustType = clustColCat.includes(clustName) ? CLUSTER_TYPE.ORIGINAL : CLUSTER_TYPE.CUSTOM;
+        this.showTooltip(clustName, x, y, clustType);
+      }
       return true;
     });
     const webLogoGridCol = this.viewerGrid.columns.byName('WebLogo')!;
@@ -312,13 +333,10 @@ export class LogoSummary extends DG.JsViewer {
     const newClusterVals = new Array(viewerDfCols.length);
 
     const activityScaledCol = filteredDf.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
-    const maskInfo: MaskInfo = {
-      mask: selection.getBuffer(),
-      trueCount: selection.trueCount,
-      falseCount: selection.falseCount,
-    };
-    const stats = getStats(activityScaledCol.getRawData(), maskInfo);
-    const distributionTable = DG.DataFrame.fromColumns([activityScaledCol, filteredDf.getCol(this.model.splitCol.name)]);
+    const bitArray = BitArray.fromString(selection.toBinaryString());
+    const stats = getStats(activityScaledCol.getRawData(), bitArray);
+    const distributionTable =
+      DG.DataFrame.fromColumns([activityScaledCol, filteredDf.getCol(this.model.splitCol.name)]);
 
     const peptideCol: DG.Column<string> = filteredDf.getCol(this.model.settings.sequenceColumnName!);
     const peptideColData = peptideCol.getRawData();
@@ -336,53 +354,113 @@ export class LogoSummary extends DG.JsViewer {
     tCol.setTag(bioTAGS.alphabetSize, uh.getAlphabetSize().toString());
 
     const webLogoTable = DG.DataFrame.fromColumns([tCol]);
-    this.webLogoDfPlot.push(webLogoTable.plot);
-    this.distributionDfPlot.push(distributionTable.plot);
+    this.webLogoDfPlot.push(webLogoTable);
+    this.distributionDfPlot.push(distributionTable);
 
-    const colCategories = viewerDfCols.byName(this.model.settings.clustersColumnName!).categories;
-    let newClusterName = this.newClusterName;
-    let clusterNum = 1;
-    const getString = !isNaN(parseInt(newClusterName)) ? () => `${parseInt(newClusterName) + 1}` :
-      newClusterName == '' ? () => `${clusterNum++}` :
-        () => `${this.newClusterName} ${clusterNum++}`;
-    while (colCategories.includes(newClusterName))
-      newClusterName = getString();
+    const newClusterName = viewerDfCols.getUnusedName('New Cluster');
 
-    this.getProperty('newClusterName')?.set(this, getString());
+    const aggregatedValues: {[colName: string]: number} = {};
+    const aggColsEntries = Object.entries(this.model.settings.columns ?? {});
+    for (const [colName, aggFn] of aggColsEntries) {
+      const newColName = getAggregatedColName(aggFn, colName);
+      const col = filteredDf.getCol(colName);
+      aggregatedValues[newColName] = getAggregatedValue(col, aggFn, selection);
+    }
 
     for (let i = 0; i < viewerDfColsLength; ++i) {
       const col = viewerDfCols.byIndex(i);
       newClusterVals[i] = col.name == this.model.settings.clustersColumnName! ? newClusterName :
-        col.name == C.LST_COLUMN_NAMES.MEMBERS ? maskInfo.trueCount :
+        col.name == C.LST_COLUMN_NAMES.MEMBERS ? selection.trueCount :
           col.name == C.LST_COLUMN_NAMES.WEB_LOGO ? null :
             col.name == C.LST_COLUMN_NAMES.DISTRIBUTION ? null :
               col.name == C.LST_COLUMN_NAMES.MEAN_DIFFERENCE ? stats.meanDifference:
                 col.name == C.LST_COLUMN_NAMES.P_VALUE ? stats.pValue:
                   col.name == C.LST_COLUMN_NAMES.RATIO ? stats.ratio:
+                    col.name in aggregatedValues ? aggregatedValues[col.name] :
         console.warn(`PeptidesLSTWarn: value for column ${col.name} is undefined`)! || null;
     }
     viewerDf.rows.addNew(newClusterVals);
 
-    this.model.clusterStats[newClusterName] = stats;
+    this.model.clusterStats[CLUSTER_TYPE.CUSTOM][newClusterName] = stats;
     this.model.addNewCluster(newClusterName);
   }
 
   removeCluster(): void {
-    const lss = this.model.logoSummarySelection;
+    const lss = this.model.clusterSelection;
     const dfCols = this.dataFrame.columns;
 
-    const removeClusterIndexesList = lss.filter((cluster) => dfCols.contains(cluster));
-    if (removeClusterIndexesList.length == 0)
-      return grok.shell.info('Nothing removed. Please select a created cluster to remove');
+    // Names of the clusters to remove
+    const clustNames = lss.filter((cluster) => dfCols.contains(cluster));
+    if (clustNames.length == 0)
+      return grok.shell.warning('Only custom clusters can be removed');
+
+    const viewerDf = this.viewerGrid.dataFrame;
+    const viewerDfRows = viewerDf.rows;
+    const clustColCat = viewerDf.getCol(this.model.settings.clustersColumnName!).categories;
 
-    for (const cluster of removeClusterIndexesList) {
+    for (const cluster of clustNames) {
       lss.splice(lss.indexOf(cluster), 1);
       dfCols.remove(cluster);
+      delete this.model.clusterStats[CLUSTER_TYPE.CUSTOM][cluster];
+      const clustIdx = clustColCat.indexOf(cluster);
+      viewerDfRows.removeAt(clustIdx);
+      this.webLogoDfPlot.splice(clustIdx, 1);
+      this.distributionDfPlot.splice(clustIdx, 1);
     }
 
-    this.model.logoSummarySelection = lss;
-    this.model.clusterStats = this.model.calculateClusterStatistics();
-    this.createLogoSummaryGrid();
+    this.model.clusterSelection = lss;
     this.render();
   }
+
+  showTooltip(clustName: string, x: number, y: number, clustType: ClusterType = 'original'): HTMLDivElement | null {
+    const bs = this.dataFrame.filter;
+    const filteredDf = bs.anyFalse ? this.dataFrame.clone(bs) : this.dataFrame;
+    const rowCount = filteredDf.rowCount;
+
+    const bitArray = new BitArray(rowCount);
+    const activityCol = filteredDf.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
+    const activityColData = activityCol.getRawData();
+
+
+    if (clustType == CLUSTER_TYPE.ORIGINAL) {
+      const origClustCol = filteredDf.getCol(this.model.settings.clustersColumnName!);
+      const origClustColData = origClustCol.getRawData();
+      const origClustColCategories = origClustCol.categories;
+      const seekValue = origClustColCategories.indexOf(clustName);
+
+      for (let i = 0; i < rowCount; ++i)
+        bitArray.setBit(i, origClustColData[i] === seekValue);
+    } else {
+      const clustCol: DG.Column<boolean> = filteredDf.getCol(clustName);
+      bitArray.buffer = clustCol.getRawData() as Uint32Array;
+    }
+
+    const stats = bs.anyFalse ? getStats(activityColData, bitArray) : this.model.clusterStats[clustType][clustName];
+
+    if (!stats.count)
+      return null;
+
+    const mask = DG.BitSet.create(rowCount, (i) => bitArray.getBit(i));
+    const distributionTable = DG.DataFrame.fromColumns(
+      [activityCol, DG.Column.fromBitSet(C.COLUMNS_NAMES.SPLIT_COL, mask)]);
+    const labels = getDistributionLegend(`Cluster: ${clustName}`, 'Other');
+    const hist = getActivityDistribution(distributionTable, true);
+    const tableMap = getStatsTableMap(stats, {fractionDigits: 2});
+    const aggregatedColMap = this.model.getAggregatedColumnValues({filterDf: true, mask: mask, fractionDigits: 2});
+
+    const resultMap: {[key: string]: any} = {...tableMap, ...aggregatedColMap};
+    const tooltip = getStatsSummary(labels, hist, resultMap, true);
+
+    ui.tooltip.show(tooltip, x, y);
+
+    return tooltip;
+  }
+
+  createWebLogoPlot(pepCol: DG.Column<string>, mask: DG.BitSet): DG.DataFrame {
+    return DG.DataFrame.fromColumns([pepCol]).clone(mask);
+  }
+
+  createDistributionPlot(activityCol: DG.Column<number>, splitCol: DG.Column<boolean>): DG.DataFrame {
+    return DG.DataFrame.fromColumns([activityCol, splitCol]);
+  }
 }

package/src/viewers/peptide-space-viewer.ts

@@ -57,7 +57,7 @@ export class PeptideSpaceViewer extends DG.JsViewer {
   }
 
   async render(computeData=false): Promise<void> {
-    if (computeData && !this.isEmbeddingCreating && !this.model.isChangingEdfBitset) {
+    if (computeData && !this.isEmbeddingCreating /*&& !this.model.isChangingEdfBitset*/) {
       this.isEmbeddingCreating = true;
       $(this.root).empty();
       const viewerHost = ui.waitBox(async () => {
@@ -65,17 +65,17 @@ export class PeptideSpaceViewer extends DG.JsViewer {
         const alignedSeqCol = this.dataFrame.getCol(this.model.settings.sequenceColumnName!);
         const edf = await computeWeights(this.dataFrame, this.method, this.measure, this.cyclesCount, alignedSeqCol);
         this.dataFrame.temp[C.EMBEDDING_STATUS] = true;
-        this.model.edf = edf;
+        // this.model.edf = edf;
 
         if (edf === null)
           return ui.label('Could not compute embeddings');
 
         const edfSelection = edf.selection;
         edfSelection.copyFrom(this.dataFrame.selection);
-        edfSelection.onChanged.subscribe(() => {
-          if (!this.model.isChangingEdfBitset)
-            this.model.fireBitsetChanged(true);
-        });
+        // edfSelection.onChanged.subscribe(() => {
+        //   if (!this.model.isChangingEdfBitset)
+        //     this.model.fireBitsetChanged(true);
+        // });
 
         const colorCol = this.dataFrame.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
         edf.columns.add(colorCol);