@datagrok/peptides 1.2.0 → 1.3.1

package/src/widgets/distribution.ts

@@ -14,7 +14,11 @@ const otherConst = 'Other';
 export function getDistributionWidget(table: DG.DataFrame, model: PeptidesModel): DG.Widget {
   const activityScaledCol = table.columns.bySemType(C.SEM_TYPES.ACTIVITY_SCALED)!;
   const rowCount = activityScaledCol.length;
-  const selectionObject = model.currentSelection;
+  const selectionObject = model.mutationCliffsSelection;
+  let isMutationCliffsSelectionEmpty = true;
+  for (const aarList of Object.values(selectionObject))
+    isMutationCliffsSelectionEmpty &&= aarList.length === 0;
+  const clustersObject = model.logoSummarySelection;
   const positions = Object.keys(selectionObject);
   const positionsLen = positions.length;
   let aarStr = allConst;
@@ -29,12 +33,16 @@ export function getDistributionWidget(table: DG.DataFrame, model: PeptidesModel)
       otherStr = otherConst;
       for (const position of positions) {
         const posCol = table.getCol(position);
-        for (const aar of selectionObject[position]) {
+        const aarList = selectionObject[position];
+        if (aarList.length === 0)
+          continue;
+
+        for (const aar of aarList) {
           aarStr = `${position} : ${aar}`;
           const splitCol = DG.Column.bool(C.COLUMNS_NAMES.SPLIT_COL, rowCount).init((i) => posCol.get(i) == aar);
 
           const distributionTable = DG.DataFrame.fromColumns([activityScaledCol, splitCol]);
-          const currentStatsDf = model.statsDf.rows.match({Pos: position, AAR: aar}).toDataFrame();
+          const currentStatsDf = model.monomerPositionStatsDf.rows.match({Pos: position, AAR: aar}).toDataFrame();
           const stats: Stats = {
             count: currentStatsDf.get(C.COLUMNS_NAMES.COUNT, 0),
             ratio: currentStatsDf.get(C.COLUMNS_NAMES.RATIO, 0),
@@ -49,10 +57,13 @@ export function getDistributionWidget(table: DG.DataFrame, model: PeptidesModel)
       }
     } else if (splitByPosition.value) {
       otherStr = otherConst;
-      const activityScaledData = activityScaledCol.getRawData();
+      const activityScaledData = activityScaledCol.toList();
       for (const position of positions) {
         const posCol = table.getCol(position);
         const aarList = selectionObject[position];
+        if (aarList.length === 0)
+          continue;
+
         aarStr = `${position}: {${aarList.join(', ')}}`;
 
         const mask = DG.BitSet.create(rowCount, (i) => aarList.includes(posCol.get(i)));
@@ -80,7 +91,7 @@ export function getDistributionWidget(table: DG.DataFrame, model: PeptidesModel)
       }
 
       otherStr = otherConst;
-      const activityScaledData = activityScaledCol.getRawData();
+      const activityScaledData = activityScaledCol.toList();
       for (const aar of aars) {
         const posList = reversedSelectionObject[aar];
         aarStr = `${aar}: {${posList.join(', ')}}`;
@@ -112,14 +123,18 @@ export function getDistributionWidget(table: DG.DataFrame, model: PeptidesModel)
           otherStr = otherConst;
         } else if (positionsLen) {
           aarStr = '';
-          for (const position of positions)
-            aarStr += `${position}: {${selectionObject[position].join(', ')}}; `;
-          aarStr = aarStr.slice(0, aarStr.length - 2);
+          for (const position of positions) {
+            const aarList = selectionObject[position];
+            if (aarList.length !== 0)
+              aarStr += `${position}: {${aarList.join(', ')}}; `;
+          }
+          if (clustersObject.length !== 0)
+            aarStr += `Clusters: ${clustersObject.join(', ')}`;
           otherStr = otherConst;
         }
 
         const distributionTable = DG.DataFrame.fromColumns([activityScaledCol, splitCol]);
-        const stats = getStats(activityScaledCol.getRawData(), table.selection);
+        const stats = getStats(activityScaledCol.toList(), table.selection);
         const distributionRoot = getDistributionAndStats(distributionTable, stats, aarStr, otherStr);
         $(distributionRoot).addClass('d4-flex-col');
 
@@ -130,9 +145,9 @@ export function getDistributionWidget(table: DG.DataFrame, model: PeptidesModel)
   };
 
   const setDefaultProperties = (input: DG.InputBase): void => {
-    input.enabled = positionsLen != 0;
+    input.enabled = !isMutationCliffsSelectionEmpty;
     $(input.root).find('.ui-input-editor').css('margin', '0px');
-    $(input.root).find('.ui-input-description').css('padding', '0px');
+    $(input.root).find('.ui-input-description').css('padding', '0px').css('padding-left', '5px');
   };
 
   const splitByPosition = ui.boolInput('', model.splitByPos, updateDistributionHost);

package/src/widgets/mutation-cliffs.ts

@@ -7,7 +7,7 @@ import {getSeparator} from '../utils/misc';
 
 export function mutationCliffsWidget(table: DG.DataFrame, model: PeptidesModel): DG.Widget {
   const substInfo = model.substitutionsInfo;
-  const currentCell = model.currentSelection;
+  const currentCell = model.mutationCliffsSelection;
   const positions = Object.keys(currentCell);
 
   if (!positions.length)
@@ -16,7 +16,8 @@ export function mutationCliffsWidget(table: DG.DataFrame, model: PeptidesModel):
   const substitutionsArray: string[] = [];
   const deltaArray: number[] = [];
   const substitutedToArray: string[] = [];
-  const alignedSeqCol = table.columns.bySemType(C.SEM_TYPES.MACROMOLECULE)!;
+  // const alignedSeqCol = table.columns.bySemType(C.SEM_TYPES.MACROMOLECULE)!;
+  const alignedSeqCol = table.getCol(C.COLUMNS_NAMES.MACROMOLECULE);
   const activityScaledCol = table.columns.bySemType(C.SEM_TYPES.ACTIVITY_SCALED)!;
   const seenIndexes = new Map<number, number[]>();
 

package/src/widgets/{analyze-peptides.ts → peptides.ts}

@@ -12,10 +12,10 @@ import {scaleActivity} from '../utils/misc';
 
 /** Peptide analysis widget.
  *
- * @param {DG.DataFrame} currentDf Working table
+ * @param {DG.DataFrame} df Working table
  * @param {DG.Column} col Aligned sequence column
  * @return {Promise<DG.Widget>} Widget containing peptide analysis */
-export async function analyzePeptidesWidget(currentDf: DG.DataFrame, col: DG.Column): Promise<DG.Widget> {
+export async function analyzePeptidesWidget(df: DG.DataFrame, col: DG.Column): Promise<DG.Widget> {
   if (!col.tags['aligned']?.includes('MSA') && col.tags[DG.TAGS.UNITS].toLowerCase() != 'helm')
     return new DG.Widget(ui.divText('Peptides analysis only works with aligned sequences'));
 
@@ -30,19 +30,27 @@ export async function analyzePeptidesWidget(currentDf: DG.DataFrame, col: DG.Col
   let tempCol = null;
   let scaledDf: DG.DataFrame;
   let newScaledColName: string;
+  let scalingFormula: (x: number) => number;
 
-  for (const column of currentDf.columns.numerical)
+  for (const column of df.columns.numerical)
     tempCol = column.type === DG.TYPE.FLOAT ? column : null;
 
-  const defaultColumn: DG.Column<number> | null = currentDf.col('activity') || currentDf.col('IC50') || tempCol;
+  const defaultActivityColumn: DG.Column<number> | null = df.col('activity') || df.col('IC50') || tempCol;
   const histogramHost = ui.div([], {id: 'pep-hist-host'});
 
+  const indexes: number[] = [];
+  const f = df.filter;
+  df.onFilterChanged.subscribe(() => {
+    for (let i = 0; i < f.length; ++i) {
+      if (f.get(i))
+        indexes.push(i);
+    }
+  });
   const activityScalingMethod = ui.choiceInput(
     'Scaling', 'none', ['none', 'lg', '-lg'],
     async (currentMethod: string): Promise<void> => {
-      const currentActivityCol = activityColumnChoice.value?.name;
-
-      [scaledDf, newScaledColName] = scaleActivity(currentMethod, currentDf, currentActivityCol, true);
+      [scaledDf, scalingFormula, newScaledColName] =
+        scaleActivity(currentMethod, activityColumnChoice.value!, indexes.length !== 0 ? indexes : undefined);
 
       const hist = scaledDf.plot.histogram({
         filteringEnabled: false,
@@ -60,21 +68,23 @@ export async function analyzePeptidesWidget(currentDf: DG.DataFrame, col: DG.Col
 
   const activityScalingMethodState = (_: any): void => {
     activityScalingMethod.enabled = (activityColumnChoice.value ?? false) &&
-      DG.Stats.fromColumn(activityColumnChoice.value!, currentDf.filter).min > 0;
+      DG.Stats.fromColumn(activityColumnChoice.value!, df.filter).min > 0;
     activityScalingMethod.fireChanged();
   };
-  const activityColumnChoice = ui.columnInput('Activity', currentDf, defaultColumn, activityScalingMethodState);
+  const activityColumnChoice = ui.columnInput('Activity', df, defaultActivityColumn, activityScalingMethodState);
+  const clustersColumnChoice = ui.columnInput('Clusters', df, null);
   activityColumnChoice.fireChanged();
   activityScalingMethod.fireChanged();
 
-  const inputsList = [activityColumnChoice, activityScalingMethod];
+  const inputsList = [activityColumnChoice, activityScalingMethod, clustersColumnChoice];
 
   const startBtn = ui.button('Launch SAR', async () => {
-    await startAnalysis(activityColumnChoice.value, col, currentDf, scaledDf, newScaledColName);
+    await startAnalysis(activityColumnChoice.value, col, clustersColumnChoice.value, df, scalingFormula,
+      newScaledColName, activityScalingMethod.value ?? 'none', indexes);
   });
   startBtn.style.alignSelf = 'center';
 
-  const viewer = await currentDf.plot.fromType('WebLogo') as WebLogo;
+  const viewer = await df.plot.fromType('WebLogo') as WebLogo;
   viewer.root.style.setProperty('height', '130px');
   const logoHost = ui.div();
   $(logoHost).empty().append(viewer.root);
@@ -85,38 +95,56 @@ export async function analyzePeptidesWidget(currentDf: DG.DataFrame, col: DG.Col
       ui.splitH([
         ui.splitV([ui.inputs(inputsList), startBtn]),
         histogramHost,
-      ], {style: {height: 'unset'}}),
+      ], {style: {height: '215px'}}),
     ]),
   );
 }
 
-export async function startAnalysis(
-  activityColumn: DG.Column<number> | null, alignedSeqCol: DG.Column<string>, currentDf: DG.DataFrame,
-  scaledDf: DG.DataFrame, newScaledColName: string): Promise<PeptidesModel | null> {
+export async function startAnalysis(activityColumn: DG.Column<number> | null, peptidesCol: DG.Column<string>,
+  clustersColumn: DG.Column | null, currentDf: DG.DataFrame, scaleNum: (x: number) => number, newScaledColName: string,
+  scaling: string, indexes: number[]): Promise<PeptidesModel | null> {
   const progress = DG.TaskBarProgressIndicator.create('Loading SAR...');
   let model = null;
   if (activityColumn?.type === DG.TYPE.FLOAT) {
-    const activityColumnName: string = activityColumn.name;
-
+    const f = currentDf.filter;
     //prepare new DF
-    const newDf = currentDf.clone(currentDf.filter, [alignedSeqCol.name, activityColumnName]);
-    const activityCol = newDf.getCol(activityColumnName);
-    activityCol.name = C.COLUMNS_NAMES.ACTIVITY;
-    activityCol.semType = C.SEM_TYPES.ACTIVITY;
-    newDf.getCol(alignedSeqCol.name).name = C.COLUMNS_NAMES.ALIGNED_SEQUENCE;
-    const activityScaledCol = scaledDf.getCol(C.COLUMNS_NAMES.ACTIVITY_SCALED);
+    const newDf = DG.DataFrame.create(f.trueCount);
+    const getIndex = indexes.length !== 0 ? (i: number) : number => indexes[i] : (i: number): number => i;
+    let activityCol: DG.Column<number> | null = null;
+    for (const col of currentDf.columns.toList()) {
+      let virtualCol: DG.Column<any>;
+      if (col === activityColumn) {
+        virtualCol = newDf.columns.addNewVirtual(
+          C.COLUMNS_NAMES.ACTIVITY, (i) => activityColumn.get(getIndex(i)!), DG.TYPE.FLOAT);
+        activityCol = virtualCol;
+      } else if (col === peptidesCol) {
+        virtualCol = newDf.columns.addNewVirtual(
+          C.COLUMNS_NAMES.MACROMOLECULE, (i) => peptidesCol.get(getIndex(i)!), DG.TYPE.STRING);
+      } else
+        virtualCol = newDf.columns.addNewVirtual(col.name, (i) => col.get(getIndex(i)!), col.type as DG.TYPE);
+      virtualCol.setTag(C.TAGS.VISIBLE, '0');
+    }
+    activityCol!.semType = C.SEM_TYPES.ACTIVITY;
+    const activityScaledCol = newDf.columns.addNewVirtual(C.COLUMNS_NAMES.ACTIVITY_SCALED, (i) => {
+      const val = activityCol!.get(getIndex(i)!);
+      return val ? scaleNum(val) : val;
+    }, DG.TYPE.FLOAT);
     activityScaledCol.semType = C.SEM_TYPES.ACTIVITY_SCALED;
-    newDf.columns.add(activityScaledCol);
     newDf.name = 'Peptides analysis';
     newDf.tags[C.COLUMNS_NAMES.ACTIVITY_SCALED] = newScaledColName;
+    if (clustersColumn) {
+      newDf.getCol(clustersColumn.name).name = C.COLUMNS_NAMES.CLUSTERS;
+      newDf.tags[C.TAGS.CLUSTERS] = C.COLUMNS_NAMES.CLUSTERS;
+    }
     // newDf.tags[C.PEPTIDES_ANALYSIS] = 'true';
+    newDf.tags['scaling'] = scaling;
 
     let monomerType = 'HELM_AA';
-    if (alignedSeqCol.getTag(DG.TAGS.UNITS).toLowerCase() == 'helm') {
-      const sampleSeq = alignedSeqCol.get(0)!;
+    if (peptidesCol.getTag(DG.TAGS.UNITS).toLowerCase() == 'helm') {
+      const sampleSeq = peptidesCol.get(0)!;
       monomerType = sampleSeq.startsWith('PEPTIDE') ? 'HELM_AA' : 'HELM_BASE';
     } else {
-      const alphabet = alignedSeqCol.tags[C.TAGS.ALPHABET];
+      const alphabet = peptidesCol.tags[C.TAGS.ALPHABET];
       monomerType = alphabet == 'DNA' || alphabet == 'RNA' ? 'HELM_BASE' : 'HELM_AA';
     }
 

package/test-Peptides-8408d9b6ee67-ca232121.html

@@ -0,0 +1,246 @@
+<html><head><meta charset="utf-8"/><title>Peptides Test Report. Datagrok version datagrok/datagrok:latest SHA=8408d9b6ee67. Commit ca232121.</title><style type="text/css">html,
+body {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1rem;
+  margin: 0;
+  padding: 0;
+  color: #333;
+}
+body {
+  padding: 2rem 1rem;
+  font-size: 0.85rem;
+}
+#jesthtml-content {
+  margin: 0 auto;
+  max-width: 70rem;
+}
+header {
+  display: flex;
+  align-items: center;
+}
+#title {
+  margin: 0;
+  flex-grow: 1;
+}
+#logo {
+  height: 4rem;
+}
+#timestamp {
+  color: #777;
+  margin-top: 0.5rem;
+}
+
+/** SUMMARY */
+#summary {
+  color: #333;
+  margin: 2rem 0;
+  display: flex;
+  font-family: monospace;
+  font-size: 1rem;
+}
+#summary > div {
+  margin-right: 2rem;
+  background: #eee;
+  padding: 1rem;
+  min-width: 15rem;
+}
+#summary > div:last-child {
+  margin-right: 0;
+}
+@media only screen and (max-width: 720px) {
+  #summary {
+    flex-direction: column;
+  }
+  #summary > div {
+    margin-right: 0;
+    margin-top: 2rem;
+  }
+  #summary > div:first-child {
+    margin-top: 0;
+  }
+}
+
+.summary-total {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+.summary-passed {
+  color: #4f8a10;
+  border-left: 0.4rem solid #4f8a10;
+  padding-left: 0.5rem;
+}
+.summary-failed,
+.summary-obsolete-snapshots {
+  color: #d8000c;
+  border-left: 0.4rem solid #d8000c;
+  padding-left: 0.5rem;
+}
+.summary-pending {
+  color: #9f6000;
+  border-left: 0.4rem solid #9f6000;
+  padding-left: 0.5rem;
+}
+.summary-empty {
+  color: #999;
+  border-left: 0.4rem solid #999;
+}
+
+.test-result {
+  padding: 1rem;
+  margin-bottom: 0.25rem;
+}
+.test-result:last-child {
+  border: 0;
+}
+.test-result.passed {
+  background-color: #dff2bf;
+  color: #4f8a10;
+}
+.test-result.failed {
+  background-color: #ffbaba;
+  color: #d8000c;
+}
+.test-result.pending {
+  background-color: #ffdf61;
+  color: #9f6000;
+}
+
+.test-info {
+  display: flex;
+  justify-content: space-between;
+}
+.test-suitename {
+  width: 20%;
+  text-align: left;
+  font-weight: bold;
+  word-break: break-word;
+}
+.test-title {
+  width: 40%;
+  text-align: left;
+  font-style: italic;
+}
+.test-status {
+  width: 20%;
+  text-align: right;
+}
+.test-duration {
+  width: 10%;
+  text-align: right;
+  font-size: 0.75rem;
+}
+
+.failureMessages {
+  padding: 0 1rem;
+  margin-top: 1rem;
+  border-top: 1px dashed #d8000c;
+}
+.failureMessages.suiteFailure {
+  border-top: none;
+}
+.failureMsg {
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
+}
+
+.suite-container {
+  margin-bottom: 2rem;
+}
+.suite-info {
+  padding: 1rem;
+  background-color: #eee;
+  color: #777;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25rem;
+}
+.suite-info .suite-path {
+  word-break: break-all;
+  flex-grow: 1;
+  font-family: monospace;
+  font-size: 1rem;
+}
+.suite-info .suite-time {
+  margin-left: 0.5rem;
+  padding: 0.2rem 0.3rem;
+  font-size: 0.75rem;
+}
+.suite-info .suite-time.warn {
+  background-color: #d8000c;
+  color: #fff;
+}
+
+/* CONSOLE LOGS */
+.suite-consolelog {
+  margin-bottom: 0.25rem;
+  padding: 1rem;
+  background-color: #efefef;
+}
+.suite-consolelog-header {
+  font-weight: bold;
+}
+.suite-consolelog-item {
+  padding: 0.5rem;
+}
+.suite-consolelog-item pre {
+  margin: 0.5rem 0;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
+}
+.suite-consolelog-item-origin {
+  color: #777;
+  font-weight: bold;
+}
+.suite-consolelog-item-message {
+  color: #000;
+  font-size: 1rem;
+  padding: 0 0.5rem;
+}
+
+/* OBSOLETE SNAPSHOTS */
+.suite-obsolete-snapshots {
+  margin-bottom: 0.25rem;
+  padding: 1rem;
+  background-color: #ffbaba;
+  color: #d8000c;
+}
+.suite-obsolete-snapshots-header {
+  font-weight: bold;
+}
+.suite-obsolete-snapshots-item {
+  padding: 0.5rem;
+}
+.suite-obsolete-snapshots-item pre {
+  margin: 0.5rem 0;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
+}
+.suite-obsolete-snapshots-item-message {
+  color: #000;
+  font-size: 1rem;
+  padding: 0 0.5rem;
+}
+</style></head><body><div id="jesthtml-content"><header><h1 id="title">Peptides Test Report. Datagrok version datagrok/datagrok:latest SHA=8408d9b6ee67. Commit ca232121.</h1></header><div id="metadata-container"><div id="timestamp">Started: 2022-10-11 15:08:32</div><div id="summary"><div id="suite-summary"><div class="summary-total">Suites (1)</div><div class="summary-passed summary-empty">0 passed</div><div class="summary-failed">1 failed</div><div class="summary-pending summary-empty">0 pending</div></div><div id="test-summary"><div class="summary-total">Tests (1)</div><div class="summary-passed summary-empty">0 passed</div><div class="summary-failed">1 failed</div><div class="summary-pending summary-empty">0 pending</div></div></div></div><div id="suite-1" class="suite-container"><div class="suite-info"><div class="suite-path">/home/runner/work/public/public/packages/Peptides/src/__jest__/remote.test.ts</div><div class="suite-time warn">127.821s</div></div><div class="suite-tests"><div class="test-result failed"><div class="test-info"><div class="test-suitename"> </div><div class="test-title">TEST</div><div class="test-status">failed</div><div class="test-duration">112.749s</div></div><div class="failureMessages"> <pre class="failureMsg">Error: Evaluation failed: TypeError: Cannot read properties of null (reading 'get')
+    at __puppeteer_evaluation_script__:17:71
+    at ExecutionContext._evaluateInternal (/home/runner/work/public/public/packages/Peptides/node_modules/puppeteer/src/common/ExecutionContext.ts:273:13)
+    at processTicksAndRejections (internal/process/task_queues.js:97:5)
+    at ExecutionContext.evaluate (/home/runner/work/public/public/packages/Peptides/node_modules/puppeteer/src/common/ExecutionContext.ts:140:12)</pre></div></div></div><div class="suite-consolelog"><div class="suite-consolelog-header">Console Log</div><div class="suite-consolelog-item"><pre class="suite-consolelog-item-origin">    at Object.&lt;anonymous&gt; (/home/runner/work/public/public/packages/Peptides/src/__jest__/test-node.ts:62:11)
+    at Generator.next (&lt;anonymous&gt;)
+    at fulfilled (/home/runner/work/public/public/packages/Peptides/src/__jest__/test-node.ts:28:58)
+    at processTicksAndRejections (internal/process/task_queues.js:97:5)</pre><pre class="suite-consolelog-item-message">Using web root: http://localhost:8080</pre></div><div class="suite-consolelog-item"><pre class="suite-consolelog-item-origin">    at /home/runner/work/public/public/packages/Peptides/src/__jest__/remote.test.ts:40:11
+    at Generator.next (&lt;anonymous&gt;)
+    at /home/runner/work/public/public/packages/Peptides/src/__jest__/remote.test.ts:34:71
+    at new Promise (&lt;anonymous&gt;)
+    at Object.&lt;anonymous&gt;.__awaiter (/home/runner/work/public/public/packages/Peptides/src/__jest__/remote.test.ts:30:12)
+    at Object.&lt;anonymous&gt; (/home/runner/work/public/public/packages/Peptides/src/__jest__/remote.test.ts:38:23)
+    at Promise.then.completed (/home/runner/work/public/public/packages/Peptides/node_modules/jest-circus/build/utils.js:391:28)
+    at new Promise (&lt;anonymous&gt;)</pre><pre class="suite-consolelog-item-message">Testing Peptides package</pre></div></div></div></div></body></html>

package/src/utils/invariant-map.ts

@@ -1,163 +0,0 @@
-import * as ui from 'datagrok-api/ui';
-import * as DG from 'datagrok-api/dg';
-
-import * as C from './constants';
-import {PeptidesModel} from '../model';
-import {isGridCellInvalid} from './misc';
-
-const CELL_SIZE = 20; // 20px cell height and width
-
-export class InvariantMap extends DG.Filter {
-  model: PeptidesModel | null = null;
-  chosenCells: {[position: string]: string[]} = {};
-
-  constructor() {
-    super();
-  }
-
-  get caption(): string {return 'Invariant Map';}
-
-  get filterSummary(): string {
-    let summary = '';
-    for (const [pos, aarList] of Object.entries(this.chosenCells))
-      if (aarList.length > 0)
-        summary += `${pos}: ${aarList}\n`;
-
-    return summary;
-  }
-
-  get isFiltering(): boolean {return true && super.isFiltering;}
-
-  get isReadyToApplyFilter(): boolean {return this.model != null;}
-
-  async attach(df: DG.DataFrame): Promise<void> {
-    super.attach(df);
-    this.model = await PeptidesModel.getInstance(df);
-    this.render(true);
-  }
-
-  saveState(): any {
-    const state = super.saveState();
-    state.chosenCells = JSON.stringify(this.chosenCells);
-    return state;
-  }
-
-  applyState(state: any): void {
-    super.applyState(state);
-    if (state.chosenCells) {
-      this.chosenCells = JSON.parse(state.chosenCells);
-      this.render();
-    }
-  }
-
-  applyFilter(): void {
-    this.dataFrame?.filter.init((bitsetIndex) => {
-      for (const [position, aarList] of Object.entries(this.chosenCells)) {
-        if (aarList.length != 0 && !aarList.includes(this.dataFrame!.get(position, bitsetIndex)))
-          return false;
-      }
-      return true;
-    });
-  }
-
-  render(initChosenCells: boolean = false): void {
-    if (this.model == null)
-      return;
-
-    const invariantDf = this.model.statsDf.groupBy([C.COLUMNS_NAMES.MONOMER])
-      .pivot(C.COLUMNS_NAMES.POSITION)
-      .add('first', C.COLUMNS_NAMES.COUNT, '')
-      .aggregate();
-    invariantDf.getCol(C.COLUMNS_NAMES.MONOMER).semType = C.SEM_TYPES.MONOMER;
-    const orderedColNames = invariantDf.columns.names().sort((a, b) => {
-      const aInt = parseInt(a);
-      const bInt = parseInt(b);
-      if (isNaN(aInt))
-        return -1;
-      else if (isNaN(bInt))
-        return 1;
-      return aInt - bInt;
-    });
-
-    // Create grid and set properties
-    const invariantGrid = invariantDf.plot.grid();
-    const gridCols = invariantGrid.columns;
-    gridCols.rowHeader!.visible = false;
-    gridCols.setOrder(orderedColNames);
-
-    for (let gridColIndex = 0; gridColIndex < gridCols.length; ++gridColIndex) {
-      const gridCol = gridCols.byIndex(gridColIndex)!
-      if (gridCol.name != C.COLUMNS_NAMES.MONOMER) 
-        gridCol.width = CELL_SIZE;
-    }
-
-    if (initChosenCells) {
-      this.chosenCells = {};
-      for (const col of invariantDf.columns)
-        if (col.name != C.COLUMNS_NAMES.MONOMER)
-          this.chosenCells[col.name] = [];
-    }
-
-    invariantGrid.root.addEventListener('click', (ev) => {
-      invariantDf.currentRowIdx = -1;
-      const gridCell = invariantGrid.hitTest(ev.offsetX, ev.offsetY);
-      if (isGridCellInvalid(gridCell) || gridCell!.tableColumn!.name == C.COLUMNS_NAMES.MONOMER)
-        return;
-
-      const position = gridCell!.tableColumn!.name;
-      const aar = invariantDf.get(C.COLUMNS_NAMES.MONOMER, gridCell!.tableRowIndex!);
-      const aarList = this.chosenCells[position];
-      const aarIndex = aarList.indexOf(aar);
-
-      if (aarIndex != -1)
-        aarList.splice(aarIndex, 1);
-      else
-        aarList.push(aar);
-
-      invariantGrid.invalidate();
-      this.applyFilter();
-    });
-
-    invariantGrid.onCellRender.subscribe((args) => {
-      //FIXME: for some reason it doesn't work when I set right away
-      const gridProps = invariantGrid.props;
-      gridProps.allowBlockSelection = false;
-      gridProps.allowColSelection = false;
-      gridProps.allowRowSelection = false;
-      gridProps.allowEdit = false;
-      gridProps.rowHeight = CELL_SIZE;
-
-      const gc = args.cell;
-      const tableColName = gc.tableColumn?.name;
-      const tableRowIndex = gc.tableRowIndex;
-
-      if (isGridCellInvalid(gc) || tableColName == C.COLUMNS_NAMES.MONOMER ||
-        tableRowIndex == null || tableRowIndex == -1)
-        return;
-
-      const currentPosition: string = tableColName !== C.COLUMNS_NAMES.MEAN_DIFFERENCE ?
-        tableColName : invariantDf.get(C.COLUMNS_NAMES.POSITION, tableRowIndex);
-      const currentAAR: string = invariantDf.get(C.COLUMNS_NAMES.MONOMER, tableRowIndex);
-      const canvasContext = args.g;
-      const bound = args.bounds;
-
-      canvasContext.font = '10px Roboto';
-      canvasContext.textAlign = 'center';
-      canvasContext.textBaseline = 'middle';
-      canvasContext.fillStyle = '#000';
-      canvasContext.fillText(gc.cell.value, bound.x + (bound.width / 2), bound.y + (bound.height / 2), bound.width);
-
-      const aarSelection = this.chosenCells[currentPosition];
-      if (aarSelection.includes(currentAAR)) {
-        canvasContext.strokeStyle = '#000';
-        canvasContext.lineWidth = 1;
-        canvasContext.strokeRect(bound.x + 1, bound.y + 1, bound.width - 1, bound.height - 1);
-      }
-      args.preventDefault();
-    });
-
-    const gridHost = ui.box(invariantGrid.root);
-    gridHost.style.width = '100%';
-    this.root.appendChild(gridHost);
-  }
-}