@datagrok/peptides 1.9.2 → 1.11.3

package/src/viewers/logo-summary.ts

@@ -6,14 +6,11 @@ import $ from 'cash-dom';
 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 {getSplitterForColumn} from '@datagrok-libraries/bio/src/utils/macromolecule/utils';
-import {HorizontalAlignments, PositionHeight} from '@datagrok-libraries/bio/src/viewers/web-logo';
+import {HorizontalAlignments, IWebLogoViewer, 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 {getStatsSummary, prepareTableForHistogram} from '../utils/misc';
 import BitArray from '@datagrok-libraries/utils/src/bit-array';
 
 const getAggregatedColName = (aggF: string, colName: string): string => `${aggF}(${colName})`;
@@ -30,8 +27,7 @@ export class LogoSummaryTable extends DG.JsViewer {
   initialized: boolean = false;
   webLogoMode: string;
   membersRatioThreshold: number;
-  webLogoDfPlot: DG.DataFrame[] = [];
-  distributionDfPlot: DG.DataFrame[] = [];
+  bitsets: DG.BitSet[] = [];
 
   constructor() {
     super();
@@ -43,20 +39,8 @@ export class LogoSummaryTable extends DG.JsViewer {
 
   onTableAttached(): void {
     super.onTableAttached();
-
     this.model = PeptidesModel.getInstance(this.dataFrame);
-    this.subs.push(this.model.onSettingsChanged.subscribe(() => {
-      this.createLogoSummaryGrid();
-      this.render();
-    }));
-    this.subs.push(this.model.onNewCluster.subscribe(() => this.clusterFromSelection()));
-    this.subs.push(this.model.onRemoveCluster.subscribe(() => this.removeCluster()));
-    this.subs.push(this.model.onFilterChanged.subscribe(() => {
-      this.createLogoSummaryGrid();
-      this.render();
-    }));
-
-    this.createLogoSummaryGrid();
+    this.createLogoSummaryTableGrid();
     this.initialized = true;
     this.render();
   }
@@ -64,19 +48,30 @@ export class LogoSummaryTable extends DG.JsViewer {
   detach(): void {this.subs.forEach((sub) => sub.unsubscribe());}
 
   render(): void {
-    if (this.initialized) {
-      $(this.root).empty();
-      const df = this.viewerGrid.dataFrame;
-      if (!df.filter.anyTrue) {
-        const emptyDf = ui.divText('No clusters to satisfy the threshold. ' +
-          'Please, lower the threshold in viewer proeperties to include clusters');
-        this.root.appendChild(ui.divV([this._titleHost, emptyDf]));
-        return;
-      }
-      this.viewerGrid.root.style.width = 'auto';
-      this.root.appendChild(ui.divV([this._titleHost, this.viewerGrid.root]));
-      this.viewerGrid.invalidate();
+    if (!this.initialized)
+      return;
+    $(this.root).empty();
+    const df = this.viewerGrid.dataFrame;
+    if (!df.filter.anyTrue) {
+      const emptyDf = ui.divText('No clusters to satisfy the threshold. ' +
+        'Please, lower the threshold in viewer proeperties to include clusters');
+      this.root.appendChild(ui.divV([this._titleHost, emptyDf]));
+      return;
     }
+    const expand = ui.iconFA('expand-alt', () => {
+      const dialog = ui.dialog('Logo Summary Table');
+      dialog.add(this.viewerGrid.root);
+      dialog.onCancel(() => this.render());
+      dialog.showModal(true);
+      this.viewerGrid.invalidate();
+    }, 'Show Logo Summary Table in full screen');
+    $(expand).addClass('pep-help-icon');
+    this.viewerGrid.root.style.width = 'auto';
+    this.root.appendChild(ui.divV([
+      ui.divH([this._titleHost, expand], {style: {alignSelf: 'center', lineHeight: 'normal'}}),
+      this.viewerGrid.root,
+    ]));
+    this.viewerGrid.invalidate();
   }
 
   onPropertyChanged(property: DG.Property): void {
@@ -86,7 +81,7 @@ export class LogoSummaryTable extends DG.JsViewer {
     this.render();
   }
 
-  createLogoSummaryGrid(): DG.Grid {
+  createLogoSummaryTableGrid(): DG.Grid {
     const clustersColName = this.model.settings.clustersColumnName!;
     const isDfFiltered = this.dataFrame.filter.anyFalse;
     const filteredDf = isDfFiltered ? this.dataFrame.clone(this.dataFrame.filter) : this.dataFrame;
@@ -132,21 +127,19 @@ export class LogoSummaryTable extends DG.JsViewer {
     }
 
     // BEGIN: fill LST part with custom clusters
-    const customWebLogoTables: DG.DataFrame[] = new Array(customClustColList.length);
-    const customDistTables: DG.DataFrame[] = new Array(customClustColList.length);
+    const customBitsets: DG.BitSet[] = 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 bsMask = DG.BitSet.fromBytes(bitArray.buffer.buffer, filteredDfRowCount);
 
       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]);
+      customBitsets[rowIdx] = bsMask;
       customMDColData[rowIdx] = stats.meanDifference;
       customPValColData[rowIdx] = stats.pValue;
       customRatioColData[rowIdx] = stats.ratio;
@@ -176,12 +169,10 @@ export class LogoSummaryTable extends DG.JsViewer {
     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 origBitsets: DG.BitSet[] = new Array(origLSTLen);
 
     const origClustMasks = Array.from({length: origLSTLen},
-      () => BitArray.fromSeq(filteredDfRowCount, () => false));
+      () => new BitArray(filteredDfRowCount, false));
 
     for (let rowIdx = 0; rowIdx < filteredDfRowCount; ++rowIdx) {
       const filteredClustName = filteredDfClustColCat[filteredDfClustColData[rowIdx]];
@@ -191,15 +182,13 @@ export class LogoSummaryTable extends DG.JsViewer {
 
     for (let rowIdx = 0; rowIdx < origLSTLen; ++rowIdx) {
       const mask = origClustMasks[rowIdx];
-      const bsMask = DG.BitSet.create(filteredDfRowCount, (i) => mask.getBit(i));
+      const bsMask = DG.BitSet.fromBytes(mask.buffer.buffer, filteredDfRowCount);
 
       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));
+      origBitsets[rowIdx] = bsMask;
       origMDColData[rowIdx] = stats.meanDifference;
       origPValColData[rowIdx] = stats.pValue;
       origRatioColData[rowIdx] = stats.ratio;
@@ -211,8 +200,7 @@ export class LogoSummaryTable extends DG.JsViewer {
 
     // combine LSTs and create a grid
     const summaryTable = origLST.append(customLST);
-    this.webLogoDfPlot = origWebLogoTables.concat(customWebLogoTables);
-    this.distributionDfPlot = origDistTables.concat(customDistTables);
+    this.bitsets = origBitsets.concat(customBitsets);
 
     this.viewerGrid = summaryTable.plot.grid();
     this.viewerGrid.sort([C.LST_COLUMN_NAMES.MEMBERS], [false]);
@@ -225,46 +213,85 @@ export class LogoSummaryTable extends DG.JsViewer {
       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) => {
-      const currentRowIdx = cell.tableRowIndex;
-      if (!cell.isTableCell || currentRowIdx === null || currentRowIdx === -1)
+
+    const webLogoCache = new DG.LruCache<number, DG.Viewer & IWebLogoViewer>();
+    const distCache = new DG.LruCache<number, DG.Viewer<DG.IHistogramLookSettings>>();
+    const maxSequenceLen = this.model.splitSeqDf.columns.length;
+    const webLogoGridCol = this.viewerGrid.columns.byName(C.LST_COLUMN_NAMES.WEB_LOGO)!;
+    webLogoGridCol.cellType = 'html';
+    webLogoGridCol.width = 350;
+
+    this.viewerGrid.onCellRender.subscribe(async (gridCellArgs) => {
+      const gridCell = gridCellArgs.cell;
+      const currentRowIdx = gridCell.tableRowIndex;
+      if (!gridCell.isTableCell || currentRowIdx === null || currentRowIdx === -1)
         return;
 
-      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 canvasContext = gridCellArgs.g;
+      const bound = gridCellArgs.bounds;
+      canvasContext.save();
+      canvasContext.beginPath();
+      canvasContext.rect(bound.x, bound.y, bound.width, bound.height);
+      canvasContext.clip();
+
+      try {
+        const height = Math.max(gridCell.bounds.height - 2, 0);
+        const clusterBitSet = this.bitsets[currentRowIdx];
+
+        if (gridCell.tableColumn?.name === C.LST_COLUMN_NAMES.CLUSTER) {
+          CR.renderLogoSummaryCell(canvasContext, gridCell.cell.value, this.model.clusterSelection, bound);
+          gridCellArgs.preventDefault();
+        } else if (gridCell.tableColumn?.name === C.LST_COLUMN_NAMES.WEB_LOGO) {
+          const positionWidth = Math.floor((gridCell.bounds.width - 2 - (4 * (maxSequenceLen - 1))) / maxSequenceLen);
+
+          let viewer = webLogoCache.get(currentRowIdx);
+          if (viewer !== undefined) {
+            const viewerProps = viewer.getProperties();
+
+            for (const prop of viewerProps) {
+              if (prop.name === 'positionHeight' && prop.get(viewer) !== this.webLogoMode)
+                prop.set(viewer, this.webLogoMode);
+              else if (prop.name === 'positionWidth' && prop.get(viewer) !== positionWidth)
+                prop.set(viewer, positionWidth);
+              else if (prop.name === 'minHeight' && prop.get(viewer) !== height)
+                prop.set(viewer, height);
+            }
+            const viewerRoot = $(viewer.root).css('height', `${height}px`);//;
+            viewerRoot.children().first().css('overflow-y', 'hidden !important');
+          } else {
+            const webLogoTable = this.createWebLogoDf(pepCol, clusterBitSet);
+            viewer = await webLogoTable.plot
+              .fromType('WebLogo', {positionHeight: this.webLogoMode, horizontalAlignment: HorizontalAlignments.LEFT,
+                maxHeight: 1000, minHeight: height, positionWidth: positionWidth});
+            webLogoCache.set(currentRowIdx, viewer);
+          }
+          gridCell.element = viewer.root;
+          gridCellArgs.preventDefault();
+        } else if (gridCell.tableColumn?.name === C.LST_COLUMN_NAMES.DISTRIBUTION) {
+          let viewer = distCache.get(currentRowIdx);
+          if (viewer === undefined) {
+            const distributionDf = this.createDistributionDf(activityCol, clusterBitSet);
+            viewer = distributionDf.plot.histogram({
+              filteringEnabled: false,
+              valueColumnName: C.COLUMNS_NAMES.ACTIVITY_SCALED,
+              splitColumnName: C.COLUMNS_NAMES.SPLIT_COL,
+              legendVisibility: 'Never',
+              showXAxis: false,
+              showColumnSelector: false,
+              showRangeSlider: false,
+              showBinSelector: false,
+              backColor: DG.Color.toHtml(DG.Color.white),
+              xAxisHeight: 1,
+            });
+            viewer.root.style.width = 'auto';
+            distCache.set(currentRowIdx, viewer);
+          }
+          viewer.root.style.height = `${height}px`;
+          gridCell.element = viewer.root;
+          gridCellArgs.preventDefault();
         }
-        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 === 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: false,
-          showColumnSelector: false,
-          showRangeSlider: false,
-          showBinSelector: false,
-          backColor: DG.Color.toHtml(DG.Color.white),
-          xAxisHeight: 1,
-        }).root;
-
-        viewerRoot.style.width = 'auto';
-        viewerRoot.style.height = `${height-2}px`;
-        cell.element = viewerRoot;
+      } finally {
+        canvasContext.restore();
       }
     });
     this.viewerGrid.root.addEventListener('click', (ev) => {
@@ -279,20 +306,6 @@ export class LogoSummaryTable extends DG.JsViewer {
       this.model.modifyClusterSelection(cell.cell.value);
       this.viewerGrid.invalidate();
     });
-    this.viewerGrid.onCellRender.subscribe((gridCellArgs) => {
-      const gc = gridCellArgs.cell;
-      if (gc.tableColumn?.name !== clustersColName || 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.clusterSelection, bound);
-      gridCellArgs.preventDefault();
-      canvasContext.restore();
-    });
     this.viewerGrid.onCellTooltip((cell, x, y) => {
       if (!cell.isColHeader && cell.tableColumn?.name === clustersColName) {
         const clustName = cell.cell.value;
@@ -302,9 +315,6 @@ export class LogoSummaryTable extends DG.JsViewer {
       }
       return true;
     });
-    const webLogoGridCol = this.viewerGrid.columns.byName('WebLogo')!;
-    webLogoGridCol.cellType = 'html';
-    webLogoGridCol.width = 350;
 
     const gridProps = this.viewerGrid.props;
     gridProps.allowEdit = false;
@@ -336,27 +346,8 @@ export class LogoSummaryTable extends DG.JsViewer {
     const activityScaledCol = filteredDf.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
     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();
-    const peptideColCategories = peptideCol.categories;
-    const peptideColTags = peptideCol.tags;
-    const selectedIndexes = selection.getSelectedIndexes();
-    const tCol = DG.Column.string('peptides', selectedIndexes.length);
-
-    for (let i = 0; i < selectedIndexes.length; ++i)
-      tCol.set(i, peptideColCategories[peptideColData[selectedIndexes[i]]]);
-    for (const tag of peptideColTags)
-      tCol.setTag(tag[0], tag[1]);
-
-    const uh = new UnitsHandler(tCol);
-    tCol.setTag(bioTAGS.alphabetSize, uh.getAlphabetSize().toString());
 
-    const webLogoTable = DG.DataFrame.fromColumns([tCol]);
-    this.webLogoDfPlot.push(webLogoTable);
-    this.distributionDfPlot.push(distributionTable);
+    this.bitsets.push(selection.clone());
 
     const newClusterName = viewerDfCols.getUnusedName('New Cluster');
 
@@ -407,8 +398,7 @@ export class LogoSummaryTable extends DG.JsViewer {
       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.bitsets.splice(clustIdx, 1);
     }
 
     clustCol.compact();
@@ -421,20 +411,21 @@ export class LogoSummaryTable extends DG.JsViewer {
     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 bitArray = new BitArray(rowCount, false);
     const activityCol = filteredDf.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
     const activityColData = activityCol.getRawData();
 
-
     if (clustType === CLUSTER_TYPE.ORIGINAL) {
       const origClustCol = filteredDf.getCol(C.LST_COLUMN_NAMES.CLUSTER);
       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);
+      for (let i = 0; i < rowCount; ++i) {
+        if (origClustColData[i] === seekValue)
+          bitArray.setTrue(i);
+      }
+      bitArray.incrementVersion();
     } else {
       const clustCol: DG.Column<boolean> = filteredDf.getCol(clustName);
       bitArray.buffer = clustCol.getRawData() as Uint32Array;
@@ -445,27 +436,28 @@ export class LogoSummaryTable extends DG.JsViewer {
     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 mask = DG.BitSet.fromBytes(bitArray.buffer.buffer, rowCount);
+    const distributionTable = this.createDistributionDf(activityCol, 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 tableMap = getStatsTableMap(stats);
+    const aggregatedColMap = this.model.getAggregatedColumnValues({filterDf: true, mask: mask});
     const resultMap: {[key: string]: any} = {...tableMap, ...aggregatedColMap};
-    const tooltip = getStatsSummary(labels, hist, resultMap, true);
+    const tooltip = getStatsSummary(labels, hist, resultMap);
 
     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);
+  createWebLogoDf(pepCol: DG.Column<string>, mask: DG.BitSet): DG.DataFrame {
+    const newDf = DG.DataFrame.fromColumns([pepCol]);
+    newDf.filter.copyFrom(mask);
+    return newDf;
   }
 
-  createDistributionPlot(activityCol: DG.Column<number>, splitCol: DG.Column<boolean>): DG.DataFrame {
-    return DG.DataFrame.fromColumns([activityCol, splitCol]);
+  createDistributionDf(activityCol: DG.Column<number>, splitMask: DG.BitSet): DG.DataFrame {
+    const table = DG.DataFrame.fromColumns([activityCol, DG.Column.fromBitSet(C.COLUMNS_NAMES.SPLIT_COL, splitMask)]);
+    return prepareTableForHistogram(table);
   }
 }

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

@@ -6,11 +6,12 @@ import $ from 'cash-dom';
 
 import {getSequenceMolecularWeight} from '../utils/molecular-measure';
 import {AlignedSequenceEncoder} from '@datagrok-libraries/bio/src/sequence-encoder';
-import {createDimensinalityReducingWorker, IReduceDimensionalityResult,
+import {createDimensinalityReducingWorker,
 } from '@datagrok-libraries/ml/src/workers/dimensionality-reducing-worker-creator';
 import {StringMetrics} from '@datagrok-libraries/ml/src/typed-metrics';
 import * as C from '../utils/constants';
 import {PeptidesModel} from '../model';
+import {IReduceDimensionalityResult} from '@datagrok-libraries/ml/src/reduce-dimensionality';
 
 export class PeptideSpaceViewer extends DG.JsViewer {
   method: string;

package/src/viewers/sar-viewer.ts

@@ -1,3 +1,4 @@
+import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
@@ -5,6 +6,7 @@ import $ from 'cash-dom';
 import * as C from '../utils/constants';
 import * as CR from '../utils/cell-renderer';
 import {PeptidesModel, VIEWER_TYPE} from '../model';
+import wu from 'wu';
 
 export enum MONOMER_POSITION_MODE {
   MUTATION_CLIFFS = 'Mutation Cliffs',
@@ -12,7 +14,7 @@ export enum MONOMER_POSITION_MODE {
 }
 
 export enum MONOMER_POSITION_PROPERTIES {
-  COLOR_COLUMN_NAME = 'colorColumnName',
+  COLOR_COLUMN_NAME = 'color',
   AGGREGATION = 'aggregation',
   TARGET = 'target',
 };
@@ -22,7 +24,7 @@ export class MonomerPosition extends DG.JsViewer {
   _titleHost = ui.divText(MONOMER_POSITION_MODE.MUTATION_CLIFFS, {id: 'pep-viewer-title'});
   _viewerGrid!: DG.Grid;
   _model!: PeptidesModel;
-  colorColumnName: string;
+  colorCol: string;
   aggregation: string;
   target: string;
 
@@ -30,10 +32,13 @@ export class MonomerPosition extends DG.JsViewer {
     super();
     this.target = this.string(MONOMER_POSITION_PROPERTIES.TARGET, null,
       {category: MONOMER_POSITION_MODE.MUTATION_CLIFFS, choices: []});
-    this.colorColumnName = this.string(MONOMER_POSITION_PROPERTIES.COLOR_COLUMN_NAME, C.COLUMNS_NAMES.ACTIVITY_SCALED,
-      {category: MONOMER_POSITION_MODE.INVARIANT_MAP});
+    this.colorCol = this.string(MONOMER_POSITION_PROPERTIES.COLOR_COLUMN_NAME, C.COLUMNS_NAMES.ACTIVITY_SCALED,
+      {category: MONOMER_POSITION_MODE.INVARIANT_MAP,
+        choices: wu(grok.shell.t.columns.numerical).toArray().map((col) => col.name)});
     this.aggregation = this.string(MONOMER_POSITION_PROPERTIES.AGGREGATION, DG.AGG.AVG,
-      {category: MONOMER_POSITION_MODE.INVARIANT_MAP, choices: Object.values(DG.AGG)});
+      {category: MONOMER_POSITION_MODE.INVARIANT_MAP,
+        choices: Object.values(DG.AGG)
+          .filter((agg) => ![DG.AGG.KEY, DG.AGG.PIVOT, DG.AGG.SELECTED_ROWS_COUNT].includes(agg))});
   }
 
   get name(): string {return VIEWER_TYPE.MONOMER_POSITION;}
@@ -65,12 +70,7 @@ export class MonomerPosition extends DG.JsViewer {
 
   onTableAttached(): void {
     super.onTableAttached();
-    this.subs.push(this.model.onMonomerPositionSelectionChanged.subscribe(() => this.viewerGrid.invalidate()));
     this.helpUrl = '/help/domains/bio/peptides.md';
-    this.subs.push(this.model.onSettingsChanged.subscribe(() => {
-      this.createMonomerPositionGrid();
-      this.render();
-    }));
     this.render();
   }
 
@@ -89,7 +89,7 @@ export class MonomerPosition extends DG.JsViewer {
     const monomerCol = this.model.monomerPositionDf.getCol(C.COLUMNS_NAMES.MONOMER);
     CR.setAARRenderer(monomerCol, this.model.alphabet);
     this.viewerGrid.onCellRender.subscribe((args: DG.GridCellRenderArgs) => renderCell(args, this.model,
-      this.mode === MONOMER_POSITION_MODE.INVARIANT_MAP, this.dataFrame.getCol(this.colorColumnName),
+      this.mode === MONOMER_POSITION_MODE.INVARIANT_MAP, this.dataFrame.getCol(this.colorCol),
       this.aggregation as DG.AggregationType));
     this.viewerGrid.onCellTooltip((cell: DG.GridCell, x: number, y: number) => showTooltip(cell, x, y, this.model));
     this.viewerGrid.root.addEventListener('click', (ev) => {
@@ -101,9 +101,11 @@ export class MonomerPosition extends DG.JsViewer {
       const aar = monomerCol.get(gridCell!.tableRowIndex!);
       chooseAction(aar, position, ev.shiftKey, this.mode === MONOMER_POSITION_MODE.INVARIANT_MAP, this.model);
       this.viewerGrid.invalidate();
-      // this.model.fireBitsetChanged();
     });
-    this.viewerGrid.onCurrentCellChanged.subscribe((_gc) => cellChanged(this.model.monomerPositionDf, this.model));
+    this.viewerGrid.onCurrentCellChanged.subscribe((_gc) => {
+      cellChanged(this.model.monomerPositionDf, this.model);
+      this.viewerGrid.invalidate();
+    });
 
     setViewerGridProps(this.viewerGrid, false);
   }
@@ -129,18 +131,20 @@ export class MonomerPosition extends DG.JsViewer {
         invariantMapMode.addPostfix(MONOMER_POSITION_MODE.INVARIANT_MAP);
         const setDefaultProperties = (input: DG.InputBase): void => {
           $(input.root).find('.ui-input-editor').css('margin', '0px').attr('type', 'radio');
-          $(input.root).find('.ui-input-description').css('padding', '0px').css('padding-left', '5px');
+          $(input.root).find('.ui-input-description').css('padding', '0px').css('padding-right', '16px');
         };
         setDefaultProperties(mutationCliffsMode);
         setDefaultProperties(invariantMapMode);
-        $(mutationCliffsMode.root).css('padding-right', '10px').css('padding-left', '5px');
 
         switchHost = ui.divH([mutationCliffsMode.root, invariantMapMode.root], {id: 'pep-viewer-title'});
         $(switchHost).css('width', 'auto').css('align-self', 'center');
       }
       const tips: HTMLElement = ui.iconFA('question');
-      ui.tooltip.bind(tips,
-        () => ui.divV([ui.divText('Color intensity - p-value'), ui.divText('Circle size - Mean difference')]));
+      ui.tooltip.bind(tips, () => ui.divV([
+        ui.divText('Color intensity - p-value'),
+        ui.divText('Circle size - Mean difference'),
+        ui.divText('Number - # of unique sequences that form mutation cliffs pairs'),
+      ]));
 
       $(tips).addClass('pep-help-icon');
 
@@ -154,7 +158,7 @@ export class MonomerPosition extends DG.JsViewer {
 }
 
 /** Vertical structure activity relationship viewer */
-export class MostPotentResiduesViewer extends DG.JsViewer {
+export class MostPotentResidues extends DG.JsViewer {
   _titleHost = ui.divText(VIEWER_TYPE.MOST_POTENT_RESIDUES, {id: 'pep-viewer-title'});
   _viewerGrid!: DG.Grid;
   _model!: PeptidesModel;
@@ -183,12 +187,7 @@ export class MostPotentResiduesViewer extends DG.JsViewer {
 
   onTableAttached(): void {
     super.onTableAttached();
-    this.subs.push(this.model.onMonomerPositionSelectionChanged.subscribe(() => this.viewerGrid.invalidate()));
     this.helpUrl = '/help/domains/bio/peptides.md';
-    this.subs.push(this.model.onSettingsChanged.subscribe(() => {
-      this.createMostPotentResiduesGrid();
-      this.render();
-    }));
     this.render();
   }
 
@@ -208,7 +207,8 @@ export class MostPotentResiduesViewer extends DG.JsViewer {
 
     // Setting Monomer column renderer
     CR.setAARRenderer(monomerCol, this.model.alphabet);
-    this.viewerGrid.onCellRender.subscribe((args: DG.GridCellRenderArgs) => renderCell(args, this.model));
+    this.viewerGrid.onCellRender.subscribe(
+      (args: DG.GridCellRenderArgs) => renderCell(args, this.model, false, undefined, undefined, false));
     this.viewerGrid.onCellTooltip((cell: DG.GridCell, x: number, y: number) => showTooltip(cell, x, y, this.model));
     this.viewerGrid.root.addEventListener('click', (ev) => {
       const gridCell = this.viewerGrid.hitTest(ev.offsetX, ev.offsetY);
@@ -222,7 +222,10 @@ export class MostPotentResiduesViewer extends DG.JsViewer {
       this.viewerGrid.invalidate();
       // this.model.fireBitsetChanged();
     });
-    this.viewerGrid.onCurrentCellChanged.subscribe((_gc) => cellChanged(this.model.mostPotentResiduesDf, this.model));
+    this.viewerGrid.onCurrentCellChanged.subscribe((_gc) => {
+      cellChanged(this.model.mostPotentResiduesDf, this.model);
+      this.viewerGrid.invalidate();
+    });
     const mdCol: DG.GridColumn = this.viewerGrid.col(C.COLUMNS_NAMES.MEAN_DIFFERENCE)!;
     mdCol.name = 'Diff';
     setViewerGridProps(this.viewerGrid, true);
@@ -233,8 +236,11 @@ export class MostPotentResiduesViewer extends DG.JsViewer {
       $(this.root).empty();
       const switchHost = ui.divText(VIEWER_TYPE.MOST_POTENT_RESIDUES, {id: 'pep-viewer-title'});
       const tips: HTMLElement = ui.iconFA('question');
-      ui.tooltip.bind(tips,
-        () => ui.divV([ui.divText('Color intensity - p-value'), ui.divText('Circle size - Mean difference')]));
+      ui.tooltip.bind(tips, () => ui.divV([
+        ui.divText('Color intensity - p-value'),
+        ui.divText('Circle size - Mean difference'),
+        ui.divText('Number - # of unique sequences that form mutation cliffs pairs'),
+      ]));
 
       $(tips).addClass('pep-help-icon');
 
@@ -248,7 +254,7 @@ export class MostPotentResiduesViewer extends DG.JsViewer {
 }
 
 function renderCell(args: DG.GridCellRenderArgs, model: PeptidesModel, isInvariantMap?: boolean,
-  colorCol?: DG.Column<number>, colorAgg?: DG.AggregationType): void {
+  colorCol?: DG.Column<number>, colorAgg?: DG.AggregationType, renderNums?: boolean): void {
   const renderColNames = [...model.splitSeqDf.columns.names(), C.COLUMNS_NAMES.MEAN_DIFFERENCE];
   const canvasContext = args.g;
   const bound = args.bounds;
@@ -293,20 +299,21 @@ function renderCell(args: DG.GridCellRenderArgs, model: PeptidesModel, isInvaria
     const positionColCategories = positionCol.categories;
 
     const colorColData = colorCol!.getRawData();
-    const colorDataList: number[] = [];
-    for (let i = 0; i < positionColData.length; ++i) {
+    const colorValuesIndexes: number[] = [];
+    for (let i = 0; i < positionCol.length; ++i) {
       if (positionColCategories[positionColData[i]] === currentMonomer)
-        colorDataList.push(colorColData[i]);
+        colorValuesIndexes.push(i);
     }
-    const cellColorDataCol = DG.Column.fromList('double', '', colorDataList);
+    const cellColorDataCol = DG.Column.float('color', colorValuesIndexes.length)
+      .init((i) => colorColData[colorValuesIndexes[i]]);
     const colorColStats = colorCol!.stats;
 
     const color = DG.Color.scaleColor(cellColorDataCol.aggregate(colorAgg!), colorColStats.min, colorColStats.max);
     CR.renderInvaraintMapCell(
-      canvasContext, currentMonomer, currentPosition, model.monomerPositionFilter, value, bound, color);
+      canvasContext, currentMonomer, currentPosition, model.invariantMapSelection, value, bound, color);
   } else {
     CR.renderMutationCliffCell(canvasContext, currentMonomer, currentPosition, model.monomerPositionStats, bound,
-      model.monomerPositionSelection, model.mutationCliffs, model.settings.isBidirectional);
+      model.mutationCliffsSelection, model.mutationCliffs, model.settings.isBidirectional, renderNums);
   }
   args.preventDefault();
   canvasContext.restore();
@@ -334,16 +341,16 @@ export function showTooltip(cell: DG.GridCell, x: number, y: number, model: Pept
   return true;
 }
 
-function chooseAction(aar: string, position: string, isShiftPressed: boolean, isFilter: boolean,
+function chooseAction(aar: string, position: string, isShiftPressed: boolean, isInvariantMap: boolean,
   model: PeptidesModel): void {
   if (!isShiftPressed) {
-    if (isFilter)
-      model.initMonomerPositionFilter({cleanInit: true, notify: false});
+    if (isInvariantMap)
+      model.initInvariantMapSelection({cleanInit: true, notify: false});
     else
-      model.initMonomerPositionSelection({cleanInit: true, notify: false});
+      model.initMutationCliffsSelection({cleanInit: true, notify: false});
   }
 
-  model.modifyMonomerPositionSelection(aar, position, isFilter);
+  model.modifyMonomerPositionSelection(aar, position, isInvariantMap);
 }
 
 function cellChanged(table: DG.DataFrame, model: PeptidesModel): void {