@datagrok/peptides 1.2.0 → 1.3.1

package/src/package.ts

@@ -5,13 +5,13 @@ import * as DG from 'datagrok-api/dg';
 
 import * as C from './utils/constants';
 
-import {analyzePeptidesWidget} from './widgets/analyze-peptides';
+import {analyzePeptidesWidget} from './widgets/peptides';
 import {PeptideSimilaritySpaceWidget} from './utils/peptide-similarity-space';
 import {manualAlignmentWidget} from './widgets/manual-alignment';
-import {SARViewer, SARViewerVertical} from './viewers/sar-viewer';
+import {MutationCliffsViewer, MostPotentResiduesViewer} from './viewers/sar-viewer';
 
 import {PeptideSpaceViewer} from './viewers/peptide-space-viewer';
-import {InvariantMap} from './utils/invariant-map';
+import {LogoSummary} from './viewers/logo-summary';
 
 export const _package = new DG.Package();
 let currentTable: DG.DataFrame;
@@ -84,16 +84,23 @@ export async function peptidesPanel(col: DG.Column): Promise<DG.Widget> {
 //description: Peptides SAR Viewer
 //tags: viewer
 //output: viewer result
-export function sar(): SARViewer {
-  return new SARViewer();
+export function sar(): MutationCliffsViewer {
+  return new MutationCliffsViewer();
 }
 
 //name: peptide-sar-viewer-vertical
 //description: Peptides Vertical SAR Viewer
 //tags: viewer
 //output: viewer result
-export function sarVertical(): SARViewerVertical {
-  return new SARViewerVertical();
+export function sarVertical(): MostPotentResiduesViewer {
+  return new MostPotentResiduesViewer();
+}
+
+//name: logo-summary-viewer
+//tags: viewer
+//output: viewer result
+export function logoSummary(): LogoSummary {
+  return new LogoSummary();
 }
 
 //name: peptide-space-viewer
@@ -148,16 +155,10 @@ export function getPeptidesStructure(col: DG.Column): DG.Widget {
 
 function getOrDefine(dataframe?: DG.DataFrame, column?: DG.Column | null): [DG.DataFrame, DG.Column] {
   dataframe ??= grok.shell.t;
-  column ??= dataframe.columns.bySemType(C.SEM_TYPES.MACROMOLECULE);
+  // column ??= dataframe.columns.bySemType(C.SEM_TYPES.MACROMOLECULE);
+  column ??= dataframe.getCol(C.COLUMNS_NAMES.MACROMOLECULE);
   if (column === null)
     throw new Error('Table does not contain aligned sequence columns');
 
   return [dataframe, column];
 }
-
-//name: Invariant Map Filter
-//tags: filter
-//output: filter result
-export function invariantMapFilter() {
-  return new InvariantMap();
-}

package/src/styles.css

@@ -51,4 +51,5 @@
   font-family: 'Roboto', 'Roboto Local', sans-serif;
   color: #4D5261;
   text-align: center;
+  width: 100%;
 }

package/src/tests/core.ts

@@ -4,7 +4,7 @@ import * as DG from 'datagrok-api/dg';
 import {category, test, expect, delay} from '@datagrok-libraries/utils/src/test';
 
 import {_package} from '../package-test';
-import {startAnalysis} from '../widgets/analyze-peptides';
+import {startAnalysis} from '../widgets/peptides';
 import {PeptidesModel} from '../model';
 import * as C from '../utils/constants';
 import {scaleActivity} from '../utils/misc';
@@ -14,6 +14,7 @@ category('Core', () => {
   let simpleActivityCol: DG.Column<number>;
   let simpleAlignedSeqCol: DG.Column<string>;
   let simpleScaledDf: DG.DataFrame;
+  let scalingFormula: (x: number) => number;
   let simpleScaledColName: string;
 
   let complexTable: DG.DataFrame;
@@ -34,14 +35,14 @@ category('Core', () => {
     simpleAlignedSeqCol.tags[C.TAGS.ALPHABET] = 'PT';
     simpleAlignedSeqCol.tags[DG.TAGS.UNITS] = 'fasta';
     simpleAlignedSeqCol.tags['aligned'] = 'SEQ.MSA';
-    [simpleScaledDf, simpleScaledColName] = scaleActivity('-lg', simpleTable, simpleActivityColName, true);
+    [simpleScaledDf, scalingFormula, simpleScaledColName] = scaleActivity('-lg', simpleActivityCol);
 
     model = await startAnalysis(
-      simpleActivityCol, simpleAlignedSeqCol, simpleTable, simpleScaledDf, simpleScaledColName);
+      simpleActivityCol, simpleAlignedSeqCol, null, simpleTable, scalingFormula, simpleScaledColName, '-lg', []);
     expect(model instanceof PeptidesModel, true);
 
     if (model != null) {
-      model.currentSelection = {'11': ['D']};
+      model.mutationCliffsSelection = {'11': ['D']};
       grok.shell.closeTable(model.df);
     }
   });
@@ -56,14 +57,14 @@ category('Core', () => {
     complexAlignedSeqCol.tags[DG.TAGS.UNITS] = 'separator';
     complexAlignedSeqCol.tags['aligned'] = 'SEQ.MSA';
     complexAlignedSeqCol.tags[C.TAGS.SEPARATOR] = '/';
-    [complexScaledDf, complexScaledColName] = scaleActivity('-lg', complexTable, complexActivityColName, true);
+    [complexScaledDf, scalingFormula, complexScaledColName] = scaleActivity('-lg', complexActivityCol);
 
     model = await startAnalysis(
-      complexActivityCol, complexAlignedSeqCol, complexTable, complexScaledDf, complexScaledColName);
+      complexActivityCol, complexAlignedSeqCol, null, complexTable, scalingFormula, complexScaledColName, '-lg', []);
     expect(model instanceof PeptidesModel, true);
 
     if (model != null) {
-      model.currentSelection = {'13': ['-']};
+      model.mutationCliffsSelection = {'13': ['-']};
       grok.shell.closeTable(model.df);
     }
   });
@@ -77,10 +78,10 @@ category('Core', () => {
     simpleAlignedSeqCol.tags[C.TAGS.ALPHABET] = 'PT';
     simpleAlignedSeqCol.tags[DG.TAGS.UNITS] = 'fasta';
     simpleAlignedSeqCol.tags['aligned'] = 'SEQ.MSA';
-    [simpleScaledDf, simpleScaledColName] = scaleActivity('-lg', simpleTable, simpleActivityColName, true);
+    [simpleScaledDf, scalingFormula, simpleScaledColName] = scaleActivity('-lg', simpleActivityCol);
 
     model = await startAnalysis(
-      simpleActivityCol, simpleAlignedSeqCol, simpleTable, simpleScaledDf, simpleScaledColName);
+      simpleActivityCol, simpleAlignedSeqCol, null, simpleTable, scalingFormula, simpleScaledColName, '-lg', []);
     let v = grok.shell.getTableView('Peptides analysis');
     const d = v.dataFrame;
     const layout = v.saveLayout();

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

@@ -58,40 +58,40 @@ category('Peptide space', async () => {
   });
 });
 
-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...');
+// 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}} = {};
+//     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 method of methods) {
+//         const measureObj: {[key: string]: number} = {};
 
-        for (const metric of metrics) {
-          console.log(`Run ${run++}/${totalRuns}`);
+//         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();
+//           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);
-  });
-});
+//           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/utils/cell-renderer.ts

@@ -5,65 +5,24 @@ import * as C from './constants';
 import {getPalleteByType} from './misc';
 import * as types from './types';
 
-/**
- * A function to expand column size based on its contents.
- *
- * @export
- * @param {DG.Column} col Column to expand.
- * @param {DG.Grid} grid Grid containing colum for expansion.
- * @param {(cellVal: string) => number} cellRenderSize An anonymous function that calculates cell value length.
- * @param {number} [textSizeMult=10] Text size muliplier.
- * @param {number} [minSize=30] Minimal column width.
- * @param {number} [maxSize=650] Maximum column width.
- * @param {number} [timeout=500] Timeout value.
- */
-export function expandColumn(col: DG.Column, grid: DG.Grid, cellRenderSize: (cellVal: string) => number,
-  textSizeMult = 10, minSize = 30, maxSize = 650, timeout = 500): void {
-  let maxLen = 0;
-  col.categories.forEach((ent: string) => {
-    const len = cellRenderSize(ent);
-    if (len > maxLen)
-      maxLen = len;
-  });
-  setTimeout(() => {
-      grid.columns.byName(col.name)!.width = Math.min(Math.max(maxLen * textSizeMult, minSize), maxSize);
-  },
-  timeout);
+function renderCellSelection(canvasContext: CanvasRenderingContext2D, bound: DG.Rect): void {
+  canvasContext.strokeStyle = '#000';
+  canvasContext.lineWidth = 1;
+  canvasContext.strokeRect(bound.x + 1, bound.y + 1, bound.width - 1, bound.height - 1);
 }
 
-/**
- * A function that sets amino acid residue to the specified column.
- *
- * @export
- * @param {DG.Column} col Column to set renderer for.
- * @param {(DG.Grid | null)} [grid=null] Grid that contains the col column.
- * @param {boolean} [grouping=false] Is grouping enabled.
- */
-export function setAARRenderer(col: DG.Column, alphabet: string, grid?: DG.Grid): void {
+/** A function that sets amino acid residue cell renderer to the specified column */
+export function setAARRenderer(col: DG.Column, alphabet: string, grid: DG.Grid, timeout: number = 500): void {
   col.semType = C.SEM_TYPES.MONOMER;
   col.setTag('cell.renderer', C.SEM_TYPES.MONOMER);
   col.tags[C.TAGS.ALPHABET] = alphabet;
-
-  if (grid)
-    expandColumn(col, grid, (ent) => measureAAR(ent));
-}
-
-/**
- * A function to measure amino acid residue
- *
- * @export
- * @param {string} s Amino acid residue string.
- * @return {number} Amino acid residue size.
- */
-export function measureAAR(s: string): number {
-  const end = s.lastIndexOf(')');
-  const beg = s.indexOf('(');
-  return end == beg ? s.length : s.length - (end - beg) + 1;
+  setTimeout(() => grid.columns.byName(col.name)!.width = 60, timeout);
 }
 
-export function renderSARCell(canvasContext: CanvasRenderingContext2D, currentAAR: string, currentPosition: string,
-  statsDf: DG.DataFrame, twoColorMode: boolean, mdCol: DG.Column<number>, bound: DG.Rect, cellValue: number,
-  currentSelection: types.SelectionObject, substitutionsInfo: types.SubstitutionsInfo): void {
+export function renderMutationCliffCell(canvasContext: CanvasRenderingContext2D, currentAAR: string,
+  currentPosition: string, statsDf: DG.DataFrame, twoColorMode: boolean, mdCol: DG.Column<number>, bound: DG.Rect,
+  cellValue: number, mutationCliffsSelection: types.PositionToAARList, substitutionsInfo: types.SubstitutionsInfo,
+): void {
   const queryAAR = `${C.COLUMNS_NAMES.MONOMER} = ${currentAAR}`;
   const query = `${queryAAR} and ${C.COLUMNS_NAMES.POSITION} = ${currentPosition}`;
   const pVal: number = statsDf
@@ -112,13 +71,34 @@ export function renderSARCell(canvasContext: CanvasRenderingContext2D, currentAA
       canvasContext.fillText(substValue.toString(), midX, midY);
   }
 
-  //TODO: frame based on currentSelection
-  const aarSelection = currentSelection[currentPosition];
-  if (aarSelection && aarSelection.includes(currentAAR)) {
-    canvasContext.strokeStyle = '#000';
-    canvasContext.lineWidth = 1;
-    canvasContext.strokeRect(bound.x + 1, bound.y + 1, bound.width - 1, bound.height - 1);
-  }
+  const aarSelection = mutationCliffsSelection[currentPosition];
+  if (aarSelection && aarSelection.includes(currentAAR))
+    renderCellSelection(canvasContext, bound);
+}
+
+export function renderInvaraintMapCell(canvasContext: CanvasRenderingContext2D, currentAAR: string,
+  currentPosition: string, invariantMapSelection: types.PositionToAARList, cellValue: number, 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);
+
+  const aarSelection = invariantMapSelection[currentPosition];
+  if (aarSelection && aarSelection.includes(currentAAR))
+    renderCellSelection(canvasContext, bound);
+}
+
+export function renderLogoSummaryCell(canvasContext: CanvasRenderingContext2D, cellValue: number,
+  clusterSelection: number[], 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(cellValue))
+    renderCellSelection(canvasContext, bound);
 }
 
 export function renderBarchart(ctx: CanvasRenderingContext2D, col: DG.Column, monomerColStats: types.MonomerColStats,

package/src/utils/constants.ts

@@ -9,6 +9,8 @@ export enum COLUMNS_NAMES {
   MEAN_DIFFERENCE = 'Mean difference',
   COUNT = 'Count',
   RATIO = 'Ratio',
+  CLUSTERS = 'clusters',
+  MACROMOLECULE = 'macromolecule',
 }
 
 export enum CATEGORIES {
@@ -17,11 +19,16 @@ export enum CATEGORIES {
 }
 
 export enum TAGS {
-  AAR = 'AAR',
-  POSITION = 'Pos',
+  MONOMER = 'monomer',
+  POSITION = 'pos',
   SEPARATOR = 'separator',
   SELECTION = 'selection',
   ALPHABET = 'alphabet',
+  FILTER = 'filter',
+  CLUSTERS = 'clusters',
+  SAR_MODE = 'sarMode',
+  CLUSTER_SELECTION = 'clusterSelection',
+  VISIBLE = 'visible',
 }
 
 export enum SEM_TYPES {

package/src/utils/misc.ts

@@ -32,38 +32,33 @@ export function getSeparator(col: DG.Column<string>): string {
   return col.getTag(C.TAGS.SEPARATOR) ?? '';
 }
 
-export function scaleActivity(
-  activityScaling: string, df: DG.DataFrame, originalActivityName?: string, cloneBitset = false,
-): [DG.DataFrame, string] {
-  let currentActivityColName = originalActivityName ?? C.COLUMNS_NAMES.ACTIVITY;
-  const flag = df.columns.names().includes(currentActivityColName) &&
-    currentActivityColName === originalActivityName;
-  currentActivityColName = flag ? currentActivityColName : C.COLUMNS_NAMES.ACTIVITY;
-  const tempDf = df.clone(cloneBitset ? df.filter : null, [currentActivityColName]);
+export function scaleActivity(activityScaling: string, activityCol: DG.Column<number>, indexes?: number[],
+): [DG.DataFrame, (x: number) => number, string] {
+  const tempDf = DG.DataFrame.create(activityCol.length);
 
-  let formula = (v: number): number => v;
+  let formula = (x: number): number => x;
   let newColName = 'activity';
   switch (activityScaling) {
   case 'none':
     break;
   case 'lg':
-    formula = (v: number): number => Math.log10(v);
+    formula = (x: number): number => Math.log10(x);
     newColName = `Log10(${newColName})`;
     break;
   case '-lg':
-    formula = (v: number): number => -Math.log10(v);
+    formula = (x: number): number => -Math.log10(x);
     newColName = `-Log10(${newColName})`;
     break;
   default:
     throw new Error(`ScalingError: method \`${activityScaling}\` is not available.`);
   }
+  tempDf.columns.addNewVirtual(
+    C.COLUMNS_NAMES.ACTIVITY_SCALED, (i) => {
+      const val = activityCol.get(indexes ? indexes[i] : i);
+      return val ? formula(val) : val;
+    }, DG.TYPE.FLOAT);
 
-  const asCol = tempDf.columns.addNewFloat(C.COLUMNS_NAMES.ACTIVITY_SCALED);
-  const activityCol = df.getCol(currentActivityColName);
-  asCol.init((i) => formula(activityCol.get(i)));
-  df.tags['scaling'] = activityScaling;
-
-  return [tempDf, newColName];
+  return [tempDf, formula, newColName];
 }
 
 export function calculateBarsData(columns: DG.Column<string>[], selection: DG.BitSet): type.MonomerDfStats {

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

@@ -44,7 +44,8 @@ export async function createPeptideSimilaritySpaceViewer(
   const pi = DG.TaskBarProgressIndicator.create('Creating embedding...');
 
   const axesNames = ['~X', '~Y', '~MW'];
-  col ??= table.columns.bySemType(C.SEM_TYPES.MACROMOLECULE)!;
+  // col ??= table.columns.bySemType(C.SEM_TYPES.MACROMOLECULE)!;
+  col ??= table.getCol(C.COLUMNS_NAMES.MACROMOLECULE);
   const columnData = col.toList().map((v) => AlignedSequenceEncoder.clean(v));
 
   const reduceDimRes: IReduceDimensionalityResult = await createDimensinalityReducingWorker(

package/src/utils/types.ts

@@ -5,7 +5,7 @@ export type DataFrameDict = {[key: string]: DG.DataFrame};
 export type UTypedArray = Uint8Array | Uint16Array | Uint32Array;
 //AAR: (Position: (index: indexList))
 export type SubstitutionsInfo = Map<string, Map<string, Map<number, number[] | UTypedArray>>>;
-export type SelectionObject = {[postiton: string]: string[]};
+export type PositionToAARList = {[postiton: string]: string[]};
 
 export type HELMMonomer = {at: {[key: string]: string}, id: string, m: string, na: string, n: string, rs: number};
 

package/src/viewers/logo-summary.ts

@@ -0,0 +1,42 @@
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
+import $ from 'cash-dom';
+import {PeptidesModel} from '../model';
+
+export class LogoSummary extends DG.JsViewer {
+  _titleHost = ui.divText('Logo Summary Table', {id: 'pep-viewer-title'});
+  model!: PeptidesModel;
+  viewerGrid!: DG.Grid;
+  initialized: boolean = false;
+
+  constructor() {
+    super();
+  }
+
+  async onTableAttached(): Promise<void> {
+    super.onTableAttached();
+
+    this.model = await PeptidesModel.getInstance(this.dataFrame);
+
+    this.subs.push(this.model.onLogoSummaryGridChanged.subscribe((grid) => {
+      this.viewerGrid = grid;
+      this.render();
+    }));
+    this.model.updateDefault();
+    this.viewerGrid = this.model.logoSummaryGrid;
+    this.initialized = true;
+    this.render();
+  }
+
+  detach(): void {this.subs.forEach((sub) => sub.unsubscribe());}
+
+  render(): void {
+    if (this.initialized) {
+      $(this.root).empty();
+      this.viewerGrid.root.style.width = 'auto';
+      this.root.appendChild(ui.divV([this._titleHost, this.viewerGrid.root]));
+      this.viewerGrid.invalidate();
+    }
+  }
+}

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

@@ -61,8 +61,9 @@ export class PeptideSpaceViewer extends DG.JsViewer {
       this.isEmbeddingCreating = true;
       $(this.root).empty();
       const viewerHost = ui.waitBox(async () => {
-        const aligendSeqCol = this.dataFrame.columns.bySemType(C.SEM_TYPES.MACROMOLECULE)!;
-        const edf = await computeWeights(this.dataFrame, this.method, this.measure, this.cyclesCount, aligendSeqCol);
+        // const aligendSeqCol = this.dataFrame.columns.bySemType(C.SEM_TYPES.MACROMOLECULE)!;
+        const alignedSeqCol = this.dataFrame.getCol(C.COLUMNS_NAMES.MACROMOLECULE);
+        const edf = await computeWeights(this.dataFrame, this.method, this.measure, this.cyclesCount, alignedSeqCol);
         this.dataFrame.temp[C.EMBEDDING_STATUS] = true;
         this.model.edf = edf;
 
@@ -92,7 +93,7 @@ export class PeptideSpaceViewer extends DG.JsViewer {
           if (idx != -1) {
             const table = ui.tableFromMap({
               'Activity': colorCol.get(idx),
-              'Sequence': aligendSeqCol.get(idx),
+              'Sequence': alignedSeqCol.get(idx),
               'Row ID': idx,
             });
             ui.tooltip.show(table, ev.clientX, ev.clientY);
@@ -117,7 +118,8 @@ export async function computeWeights(
   let edf: DG.DataFrame | null = null;
   try {
     const axesNames = ['~X', '~Y', '~MW'];
-    col ??= table.columns.bySemType(C.SEM_TYPES.MACROMOLECULE)!;
+    // col ??= table.columns.bySemType(C.SEM_TYPES.MACROMOLECULE)!;
+    col ??= table.getCol(C.COLUMNS_NAMES.MACROMOLECULE);
     const columnData = col.toList().map((v) => AlignedSequenceEncoder.clean(v));
 
     const reduceDimRes: IReduceDimensionalityResult = await createDimensinalityReducingWorker(

package/src/viewers/sar-viewer.ts

@@ -20,6 +20,8 @@ export class SARViewerBase extends DG.JsViewer {
   _titleHost = ui.divText('SAR Viewer', {id: 'pep-viewer-title'});
   initialized = false;
   isPropertyChanging: boolean = false;
+  _isVertical = false;
+  isModeChanging = false;
 
   constructor() {
     super();
@@ -30,6 +32,8 @@ export class SARViewerBase extends DG.JsViewer {
     this.minActivityDelta = this.float('minActivityDelta', 0);
   }
 
+  get name(): string {return '';}
+
   async onTableAttached(): Promise<void> {
     super.onTableAttached();
     this.sourceGrid = this.view?.grid ?? (grok.shell.v as DG.TableView).grid;
@@ -49,14 +53,56 @@ export class SARViewerBase extends DG.JsViewer {
 
   detach(): void {this.subs.forEach((sub) => sub.unsubscribe());}
 
+  get state(): string {
+    return this.dataFrame.getTag(C.TAGS.SAR_MODE) ?? '10';
+  }
+  set state(s: string) {
+    this.dataFrame.setTag(C.TAGS.SAR_MODE, s);
+  }
+
   render(refreshOnly = false): void {
     if (!this.initialized)
       return;
     if (!refreshOnly) {
       $(this.root).empty();
+      let switchHost = ui.div();
+      if (this.name == 'MC') {
+        const mutationCliffsMode = ui.boolInput('', this.state[0] === '1', () => {
+          if (this.isModeChanging)
+            return;
+          this.isModeChanging = true;
+          invariantMapMode.value = !invariantMapMode.value;
+          this.isModeChanging = false;
+          this._titleHost.innerText = 'Mutation Cliffs';
+          this.model.isInvariantMap = false;
+          this.viewerGrid.invalidate();
+        });
+        mutationCliffsMode.addPostfix('Mutation Cliffs');
+        const invariantMapMode = ui.boolInput('', this.state[1] === '1', () => {
+          if (this.isModeChanging)
+            return;
+          this.isModeChanging = true;
+          mutationCliffsMode.value = !mutationCliffsMode.value;
+          this.isModeChanging = false;
+          this._titleHost.innerText = 'Invariant Map';
+          this.model.isInvariantMap = true;
+          this.viewerGrid.invalidate();
+        });
+        invariantMapMode.addPostfix('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');
+        };
+        setDefaultProperties(mutationCliffsMode);
+        setDefaultProperties(invariantMapMode);
+        $(mutationCliffsMode.root).css('padding-right', '10px').css('padding-left', '5px');
+
+        switchHost = ui.divH([mutationCliffsMode.root, invariantMapMode.root]);
+        switchHost.style.position = 'absolute';
+      }
       const viewerRoot = this.viewerGrid.root;
       viewerRoot.style.width = 'auto';
-      this.root.appendChild(ui.divV([this._titleHost, viewerRoot]));
+      this.root.appendChild(ui.divV([ui.divH([switchHost, this._titleHost]), viewerRoot]));
     }
     this.viewerGrid?.invalidate();
   }
@@ -88,9 +134,10 @@ export class SARViewerBase extends DG.JsViewer {
 /**
  * Structure-activity relationship viewer.
  */
-export class SARViewer extends SARViewerBase {
+export class MutationCliffsViewer extends SARViewerBase {
   _titleHost = ui.divText('Mutation Cliffs', {id: 'pep-viewer-title'});
-  _name = 'Structure-Activity Relationship';
+  _name = 'MC';
+  _isVertical = false;
 
   constructor() {super();}
 
@@ -98,26 +145,29 @@ export class SARViewer extends SARViewerBase {
 
   async onTableAttached(): Promise<void> {
     await super.onTableAttached();
-    this.model.sarViewer ??= this;
+    this.model.mutationCliffsViewer ??= this;
 
-    this.subs.push(this.model.onSARGridChanged.subscribe((data) => {
+    this.subs.push(this.model.onMutationCliffsGridChanged.subscribe((data) => {
       this.viewerGrid = data;
       this.render();
     }));
 
     this.model.updateDefault();
-    this.viewerGrid = this.model._sarGrid;
+    this.viewerGrid = this.model.mutationCliffsGrid;
     this.initialized = true;
     this.render();
   }
 
-  isInitialized(): DG.Grid {return this.model?._sarGrid;}
+  isInitialized(): DG.Grid {return this.model?.mutationCliffsGrid;}
 
   //1. debouncing in rxjs; 2. flags?
   onPropertyChanged(property: DG.Property): void {
     if (!this.isInitialized() || IS_PROPERTY_CHANGING)
       return;
 
+    if (property.name == 'invariantMap')
+      this._titleHost = ui.divText(property.get(this) ? 'Invariant Map' : 'Mutation Cliffs', {id: 'pep-viewer-title'});
+
     super.onPropertyChanged(property);
     IS_PROPERTY_CHANGING = true;
     this.model.syncProperties(true);
@@ -126,9 +176,10 @@ export class SARViewer extends SARViewerBase {
 }
 
 /** Vertical structure activity relationship viewer. */
-export class SARViewerVertical extends SARViewerBase {
-  _name = 'Sequence-Activity relationship';
+export class MostPotentResiduesViewer extends SARViewerBase {
+  _name = 'MPR';
   _titleHost = ui.divText('Most Potent Residues', {id: 'pep-viewer-title'});
+  _isVertical = true;
 
   constructor() {
     super();
@@ -138,21 +189,21 @@ export class SARViewerVertical extends SARViewerBase {
 
   async onTableAttached(): Promise<void> {
     await super.onTableAttached();
-    this.model.sarViewerVertical ??= this;
+    this.model.mostPotentResiduesViewer ??= this;
 
-    this.subs.push(this.model.onSARVGridChanged.subscribe((data) => {
+    this.subs.push(this.model.onMostPotentResiduesGridChanged.subscribe((data) => {
       this.viewerGrid = data;
       this.render();
     }));
 
     this.model.updateDefault();
-    this.viewerGrid = this.model._sarVGrid;
+    this.viewerGrid = this.model.mostPotentResiduesGrid;
 
     this.initialized = true;
     this.render();
   }
 
-  isInitialized(): DG.Grid {return this.model?._sarVGrid;}
+  isInitialized(): DG.Grid {return this.model?.mostPotentResiduesGrid;}
 
   onPropertyChanged(property: DG.Property): void {
     if (!this.isInitialized() || IS_PROPERTY_CHANGING)