@datagrok/peptides 1.3.7 → 1.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagrok/peptides",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "author": {
     "name": "Volodymyr Dyma",
     "email": "vdyma@datagrok.ai"
@@ -12,7 +12,7 @@
     "directory": "packages/Peptides"
   },
   "dependencies": {
-    "@datagrok-libraries/bio": "^5.6.0",
+    "@datagrok-libraries/bio": "^5.9.12",
     "@datagrok-libraries/ml": "^2.0.1",
     "@datagrok-libraries/statistics": "^0.1.6",
     "@datagrok-libraries/utils": "^1.11.1",

package/src/model.ts

@@ -17,6 +17,8 @@ import {mutationCliffsWidget} from './widgets/mutation-cliffs';
 import {getDistributionAndStats, getDistributionWidget} from './widgets/distribution';
 import {getStats, Stats} from './utils/statistics';
 import {LogoSummary} from './viewers/logo-summary';
+import {getSettingsDialog} from './widgets/settings';
+import {getMoomerWorks} from './package';
 
 export class PeptidesModel {
   static modelName = 'peptidesModel';
@@ -48,16 +50,13 @@ export class PeptidesModel {
   isPeptideSpaceChangingBitset = false;
   isChangingEdfBitset = false;
 
-  mutationCliffsViewer!: MutationCliffsViewer;
-  mostPotentResiduesViewer!: MostPotentResiduesViewer;
-
-  _usedProperties: { [propName: string]: string | number | boolean } = {};
   monomerMap: { [key: string]: { molfile: string, fullName: string } } = {};
   barData: type.MonomerDfStats = {};
   barsBounds: { [position: string]: type.BarCoordinates } = {};
   cachedBarchartTooltip: { bar: string, tooltip: null | HTMLDivElement } = {bar: '', tooltip: null};
-  monomerLib: bio.IMonomerLib | null = null; // To get monomers from lib(s)
-  monomerWorks: bio.MonomerWorks | null = null; // To get processed monomers
+
+  _settings!: type.PeptidesSettings;
+  isRibbonSet = false;
 
   private constructor(dataFrame: DG.DataFrame) {
     this.df = dataFrame;
@@ -117,16 +116,6 @@ export class PeptidesModel {
     this.invalidateGrids();
   }
 
-  get usedProperties(): { [propName: string]: string | number | boolean } {
-    this._usedProperties = JSON.parse(this.df.tags['sarProperties'] ?? '{}');
-    return this._usedProperties;
-  }
-
-  set usedProperties(properties: { [propName: string]: string | number | boolean }) {
-    this.df.tags['sarProperties'] = JSON.stringify(properties);
-    this._usedProperties = properties;
-  }
-
   get splitByPos(): boolean {
     const splitByPosFlag = (this.df.tags['distributionSplit'] ?? '00')[0];
     return splitByPosFlag == '1' ? true : false;
@@ -156,9 +145,10 @@ export class PeptidesModel {
   }
 
   get isMutationCliffSelectionEmpty(): boolean {
-    for (const aarList of Object.values(this.mutationCliffsSelection))
+    for (const aarList of Object.values(this.mutationCliffsSelection)) {
       if (aarList.length !== 0)
         return false;
+    }
     return true;
   }
 
@@ -166,6 +156,18 @@ export class PeptidesModel {
     return this.logoSummarySelection.length === 0;
   }
 
+  get settings(): type.PeptidesSettings {
+    this._settings ??= JSON.parse(this.df.getTag('settings') ?? '{}');
+    return this._settings;
+  }
+  set settings(s: type.PeptidesSettings) {
+    for (const [key, value] of Object.entries(s))
+      this._settings[key as keyof type.PeptidesSettings] = value as any;
+    this.df.setTag('settings', JSON.stringify(this._settings));
+    //TODO: update only needed components
+    this.updateDefault();
+  }
+
   createAccordion(): DG.Accordion {
     const acc = ui.accordion();
     acc.root.style.width = '100%';
@@ -176,36 +178,8 @@ export class PeptidesModel {
     return acc;
   }
 
-  getViewer(): SARViewerBase {
-    const viewer = this.mutationCliffsViewer ?? this.mostPotentResiduesViewer;
-    if (!viewer)
-      throw new Error('ViewerError: none of the SAR viewers is initialized');
-    return viewer;
-  }
-
-  isPropertyChanged(viewer: SARViewerBase): boolean {
-    let result = false;
-    if (typeof viewer == 'undefined')
-      return result;
-
-    const viewerProps = viewer.props.getProperties();
-    const tempProps = this.usedProperties;
-    for (const property of viewerProps) {
-      const propName = property.name;
-      const propVal = property.get(viewer);
-      if (tempProps[propName] != propVal) {
-        tempProps[propName] = propVal;
-        result = true;
-      }
-    }
-    this.usedProperties = tempProps;
-    return result;
-  }
-
   updateDefault(): void {
-    const proprtyChanged =
-      this.isPropertyChanged(this.mutationCliffsViewer) || this.isPropertyChanged(this.mostPotentResiduesViewer);
-    if ((this.sourceGrid && !this._isUpdating && proprtyChanged) || !this.isInitialized) {
+    if ((this.sourceGrid && !this._isUpdating) || !this.isInitialized) {
       this.isInitialized = true;
       this._isUpdating = true;
       this.initializeViewersComponents();
@@ -241,9 +215,7 @@ export class PeptidesModel {
 
     this.sortSourceGrid();
 
-    const viewer = this.getViewer();
-
-    this.createScaledCol(viewer.scaling, splitSeqDf);
+    this.createScaledCol(splitSeqDf);
 
     //unpivot a table and handle duplicates
     let matrixDf = splitSeqDf.groupBy(positionColumns).aggregate();
@@ -296,6 +268,7 @@ export class PeptidesModel {
     this.postProcessGrids();
   }
 
+  //TODO: move out
   calcSubstitutions(): void {
     const activityValues: DG.Column<number> = this.df.columns.bySemType(C.SEM_TYPES.ACTIVITY_SCALED)!;
     const columnList: DG.Column<string>[] = this.df.columns.bySemTypeAll(C.SEM_TYPES.MONOMER);
@@ -303,7 +276,6 @@ export class PeptidesModel {
     if (nCols == 0)
       throw new Error(`Couldn't find any column of semType '${C.SEM_TYPES.MONOMER}'`);
 
-    const viewer = this.getViewer();
     this.substitutionsInfo = new Map();
     const nRows = this.df.rowCount;
     for (let seq1Idx = 0; seq1Idx < nRows - 1; seq1Idx++) {
@@ -312,7 +284,7 @@ export class PeptidesModel {
         const activityValSeq1 = activityValues.get(seq1Idx)!;
         const activityValSeq2 = activityValues.get(seq2Idx)!;
         const delta = activityValSeq1 - activityValSeq2;
-        if (Math.abs(delta) < viewer.minActivityDelta)
+        if (Math.abs(delta) < (this.settings.minActivityDelta ?? 0))
           continue;
 
         let substCounterFlag = false;
@@ -325,7 +297,7 @@ export class PeptidesModel {
             continue;
 
           substCounter++;
-          substCounterFlag = substCounter > viewer.maxSubstitutions;
+          substCounterFlag = substCounter > (this.settings.maxMutations ?? 1);
           if (substCounterFlag)
             break;
 
@@ -430,8 +402,8 @@ export class PeptidesModel {
     this.sourceGrid.columns.setOrder(colNames.map((v) => v.name));
   }
 
-  createScaledCol(activityScaling: string, splitSeqDf: DG.DataFrame): void {
-    const scaledCol = scaleActivity(activityScaling, this.df.getCol(C.COLUMNS_NAMES.ACTIVITY));
+  createScaledCol(splitSeqDf: DG.DataFrame): void {
+    const scaledCol = scaleActivity(this.df.getCol(C.COLUMNS_NAMES.ACTIVITY), this.settings.scaling);
     //TODO: make another func
     splitSeqDf.columns.add(scaledCol);
     this.df.columns.replace(C.COLUMNS_NAMES.ACTIVITY_SCALED, scaledCol);
@@ -499,7 +471,7 @@ export class PeptidesModel {
 
   setCategoryOrder(matrixDf: DG.DataFrame): void {
     let sortArgument: string = C.COLUMNS_NAMES.MEAN_DIFFERENCE;
-    if (this.getViewer().bidirectionalAnalysis) {
+    if (this.settings.isBidirectional) {
       const mdCol = this.monomerPositionStatsDf.getCol(sortArgument);
       sortArgument = 'Absolute Mean difference';
       const absMDCol = this.monomerPositionStatsDf.columns.addNewFloat(sortArgument);
@@ -535,7 +507,7 @@ export class PeptidesModel {
     const rowCount = sequenceDf.rowCount;
     for (const pos of posColCategories) {
       tempStats = DG.Stats.fromColumn(mdCol, DG.BitSet.create(rowCount, (i) => posCol.get(i) === pos));
-      maxAtPos[pos] = this.getViewer().bidirectionalAnalysis ?
+      maxAtPos[pos] = this.settings.isBidirectional ?
         (tempStats.max > Math.abs(tempStats.min) ? tempStats.max : tempStats.min) :
         tempStats.max;
     }
@@ -737,7 +709,6 @@ export class PeptidesModel {
             tableColName : gridTable.get(C.COLUMNS_NAMES.POSITION, tableRowIndex);
           const currentAAR: string = gridTable.get(C.COLUMNS_NAMES.MONOMER, tableRowIndex);
 
-          const viewer = this.getViewer();
           if (this.isInvariantMap) {
             const value: number = this.monomerPositionStatsDf
               .groupBy([C.COLUMNS_NAMES.POSITION, C.COLUMNS_NAMES.MONOMER, C.COLUMNS_NAMES.COUNT])
@@ -746,9 +717,9 @@ export class PeptidesModel {
             CR.renderInvaraintMapCell(
               canvasContext, currentAAR, currentPosition, this.invariantMapSelection, value, bound);
           } else {
-            CR.renderMutationCliffCell(
-              canvasContext, currentAAR, currentPosition, this.monomerPositionStatsDf, viewer.bidirectionalAnalysis,
-              mdCol, bound, cellValue, this.mutationCliffsSelection, this.substitutionsInfo);
+            CR.renderMutationCliffCell(canvasContext, currentAAR, currentPosition, this.monomerPositionStatsDf,
+              mdCol, bound, cellValue, this.mutationCliffsSelection, this.substitutionsInfo,
+              this.settings.isBidirectional);
           }
         }
         args.preventDefault();
@@ -816,14 +787,13 @@ export class PeptidesModel {
     const tooltipElements: HTMLDivElement[] = [];
     const monomerName = aar.toLowerCase();
 
-    const monomer: bio.Monomer | null = wu(['HELM_AA', 'HELM_CHEM'])
-      .map((monomerType) => this.monomerWorks!.getCappedMonomer(monomerType, monomerName))
-      .find((m) => m != null) ?? null;
+    let mw = getMoomerWorks();
+    let mol = mw?.getCappedRotatedMonomer('PEPTIDE', aar);
 
-    if (monomer) {
-      tooltipElements.push(ui.div(monomer.n));
+    if (mol) {
+      tooltipElements.push(ui.div(monomerName));
       const options = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
-      tooltipElements.push(grok.chem.svgMol(monomer.m, undefined, undefined, options));
+      tooltipElements.push(grok.chem.svgMol(mol, undefined, undefined, options));
     } else
       tooltipElements.push(ui.div(aar));
 
@@ -1066,37 +1036,17 @@ export class PeptidesModel {
     this.splitCol.compact();
   }
 
-  syncProperties(isSourceSAR = true): void {
-    if (this.mutationCliffsViewer && this.mostPotentResiduesViewer) {
-      const [sourceViewer, targetViewer] = isSourceSAR ? [this.mutationCliffsViewer, this.mostPotentResiduesViewer] :
-        [this.mostPotentResiduesViewer, this.mutationCliffsViewer];
-      const properties = sourceViewer.props.getProperties();
-      const newProps: { [propName: string]: string | number | boolean } = {};
-      for (const property of properties) {
-        const propName = property.name;
-        const propVal = property.get(sourceViewer);
-        targetViewer.props.set(propName, propVal);
-        newProps[propName] = propVal;
-      }
-      this.usedProperties = newProps;
-    } else
-      console.warn('Warning: could not sync viewer properties, one of the viewers is not initialized');
-  }
-
   /** Class initializer */
   async init(): Promise<void> {
     if (this.isInitialized)
       return;
 
-    // Get monomer library through bio library
-    this.monomerLib = await bio.getMonomerLib();
-    this.monomerLib.onChanged.subscribe(() => {
-      this.sourceGrid.invalidate();
-    });
-    this.monomerWorks = new bio.MonomerWorks(this.monomerLib);
-
     this.currentView = wu(grok.shell.tableViews).find(({dataFrame}) => dataFrame.tags[C.PEPTIDES_ANALYSIS] === 'true') ??
       grok.shell.addTableView(this.df);
+    if (!this.isRibbonSet) {
+      this.currentView.setRibbonPanels([[ui.icons.settings(() => getSettingsDialog(this))]], false);
+      this.isRibbonSet = true;
+    }
     grok.shell.v = this.currentView;
     this.sourceGrid = this.currentView.grid;
     if (this.df.tags[C.PEPTIDES_ANALYSIS] === 'true')
@@ -1129,9 +1079,9 @@ export class PeptidesModel {
 
     const dockManager = this.currentView.dockManager;
 
-    this.mutationCliffsViewer = await this.df.plot.fromType('peptide-sar-viewer', options) as MutationCliffsViewer;
+    const mutationCliffsViewer = await this.df.plot.fromType('peptide-sar-viewer', options) as MutationCliffsViewer;
 
-    this.mostPotentResiduesViewer =
+    const mostPotentResiduesViewer =
       await this.df.plot.fromType('peptide-sar-viewer-vertical', options) as MostPotentResiduesViewer;
 
     if (this.df.getTag(C.TAGS.CLUSTERS)) {
@@ -1142,10 +1092,9 @@ export class PeptidesModel {
     this.updateDefault();
 
     const mcNode =
-      dockManager.dock(this.mutationCliffsViewer, DG.DOCK_TYPE.DOWN, null, this.mutationCliffsViewer.name);
+      dockManager.dock(mutationCliffsViewer, DG.DOCK_TYPE.DOWN, null, mutationCliffsViewer.name);
 
-    dockManager.dock(
-      this.mostPotentResiduesViewer, DG.DOCK_TYPE.RIGHT, mcNode, this.mostPotentResiduesViewer.name, 0.3);
+    dockManager.dock(mostPotentResiduesViewer, DG.DOCK_TYPE.RIGHT, mcNode, mostPotentResiduesViewer.name, 0.3);
 
 
     this.sourceGrid.props.allowEdit = false;
@@ -1153,6 +1102,4 @@ export class PeptidesModel {
 
     this.invalidateGrids();
   }
-
-  invalidateSourceGrid(): void {this.sourceGrid.invalidate();}
 }

package/src/package.ts

@@ -2,10 +2,10 @@
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
-
+import * as bio from '@datagrok-libraries/bio';
 import * as C from './utils/constants';
 
-import {analyzePeptidesWidget} from './widgets/peptides';
+import {analyzePeptidesUI} from './widgets/peptides';
 import {PeptideSimilaritySpaceWidget} from './utils/peptide-similarity-space';
 import {manualAlignmentWidget} from './widgets/manual-alignment';
 import {MutationCliffsViewer, MostPotentResiduesViewer} from './viewers/sar-viewer';
@@ -13,10 +13,16 @@ import {MutationCliffsViewer, MostPotentResiduesViewer} from './viewers/sar-view
 import {PeptideSpaceViewer} from './viewers/peptide-space-viewer';
 import {LogoSummary} from './viewers/logo-summary';
 
+export let monomerWorks: bio.MonomerWorks | null;
+
 export const _package = new DG.Package();
 let currentTable: DG.DataFrame;
 let alignedSequenceColumn: DG.Column;
 
+export function getMoomerWorks() {
+  return monomerWorks;
+};
+
 async function main(chosenFile: string): Promise<void> {
   const pi = DG.TaskBarProgressIndicator.create('Loading Peptides');
   const path = _package.webRoot + 'files/' + chosenFile;
@@ -34,7 +40,10 @@ async function main(chosenFile: string): Promise<void> {
 export async function Peptides(): Promise<void> {
   const wikiLink = ui.link('wiki', 'https://github.com/datagrok-ai/public/blob/master/help/domains/bio/peptides.md');
   const textLink = ui.inlineText(['For more details, see our ', wikiLink, '.']);
-
+  if (monomerWorks == null) {
+    let lib = await grok.functions.call('Bio:getBioLib');
+    monomerWorks = new bio.MonomerWorks(lib);
+  }
   const appDescription = ui.info(
     [
       ui.list([
@@ -71,13 +80,23 @@ export async function Peptides(): Promise<void> {
   ]);
 }
 
+//top-menu: Bio | Peptides...
+//name: Bio Peptides
+export async function peptidesDialog(): Promise<DG.Dialog> {
+  const analyzeObject = await analyzePeptidesUI(grok.shell.t);
+  const dialog = ui.dialog('Analyze Peptides').add(analyzeObject.host).onOK(analyzeObject.callback);
+  dialog.show();
+  return dialog.show();
+}
+
 //name: Peptides
 //tags: panel, widgets
 //input: column col {semType: Macromolecule}
 //output: widget result
 export async function peptidesPanel(col: DG.Column): Promise<DG.Widget> {
   [currentTable, alignedSequenceColumn] = getOrDefine(col.dataFrame, col);
-  return analyzePeptidesWidget(currentTable, alignedSequenceColumn);
+  const analyzeObject = await analyzePeptidesUI(currentTable, alignedSequenceColumn);
+  return new DG.Widget(analyzeObject.host);
 }
 
 //name: peptide-sar-viewer

package/src/tests/core.ts

@@ -36,7 +36,7 @@ category('Core', () => {
     simpleAlignedSeqCol.setTag(C.TAGS.ALPHABET, bio.ALPHABET.PT);
     simpleAlignedSeqCol.setTag(DG.TAGS.UNITS, bio.NOTATION.FASTA);
     simpleAlignedSeqCol.setTag(bio.TAGS.aligned, bio.ALIGNMENT.SEQ_MSA);
-    simpleScaledCol = scaleActivity('-lg', simpleActivityCol);
+    simpleScaledCol = scaleActivity(simpleActivityCol, '-lg');
 
     model = await startAnalysis(simpleActivityCol, simpleAlignedSeqCol, null, simpleTable, simpleScaledCol, '-lg');
     expect(model instanceof PeptidesModel, true);
@@ -57,7 +57,7 @@ category('Core', () => {
     complexAlignedSeqCol.setTag(DG.TAGS.UNITS, bio.NOTATION.SEPARATOR);
     complexAlignedSeqCol.setTag(bio.TAGS.aligned, bio.ALIGNMENT.SEQ_MSA);
     complexAlignedSeqCol.tags[C.TAGS.SEPARATOR] = '/';
-    complexScaledCol = scaleActivity('-lg', complexActivityCol);
+    complexScaledCol = scaleActivity(complexActivityCol, '-lg');
 
     model = await startAnalysis(
       complexActivityCol, complexAlignedSeqCol, null, complexTable, complexScaledCol, '-lg');
@@ -78,7 +78,7 @@ category('Core', () => {
     simpleAlignedSeqCol.setTag(C.TAGS.ALPHABET, bio.ALPHABET.PT);
     simpleAlignedSeqCol.setTag(DG.TAGS.UNITS, bio.NOTATION.FASTA);
     simpleAlignedSeqCol.setTag(bio.TAGS.aligned, bio.ALIGNMENT.SEQ_MSA);
-    simpleScaledCol = scaleActivity('-lg', simpleActivityCol);
+    simpleScaledCol = scaleActivity(simpleActivityCol, '-lg');
 
     model = await startAnalysis(simpleActivityCol, simpleAlignedSeqCol, null, simpleTable, simpleScaledCol, '-lg');
     let v = grok.shell.getTableView('Peptides analysis');

package/src/utils/cell-renderer.ts

@@ -19,9 +19,9 @@ export function setAARRenderer(col: DG.Column, alphabet: string, grid: DG.Grid,
 }
 
 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 {
+  currentPosition: string, statsDf: DG.DataFrame, mdCol: DG.Column<number>, bound: DG.Rect, cellValue: number,
+  mutationCliffsSelection: types.PositionToAARList, substitutionsInfo: types.SubstitutionsInfo,
+  twoColorMode: boolean = false): void {
   const queryAAR = `${C.COLUMNS_NAMES.MONOMER} = ${currentAAR}`;
   const query = `${queryAAR} and ${C.COLUMNS_NAMES.POSITION} = ${currentPosition}`;
   const pVal: number = statsDf

package/src/utils/misc.ts

@@ -18,7 +18,7 @@ export function getSeparator(col: DG.Column<string>): string {
   return col.getTag(C.TAGS.SEPARATOR) ?? '';
 }
 
-export function scaleActivity(scaling: string, activityCol: DG.Column<number>): DG.Column<number> {
+export function scaleActivity(activityCol: DG.Column<number>, scaling: string = 'none'): DG.Column<number> {
   let formula = (x: number): number => x;
   let newColName = 'activity';
   switch (scaling) {

package/src/utils/types.ts

@@ -14,3 +14,7 @@ export type MonomerColStats = {[monomer: string]: {count: number, selected: numb
 export type MonomerDfStats = {[position: string]: MonomerColStats};
 
 export type BarCoordinates = {[monomer: string]: DG.Rect};
+
+export type ScalingMethods = 'none' | 'lg' | '-lg';
+export type PeptidesSettings =
+  {scaling?: ScalingMethods, isBidirectional?: boolean, maxMutations?: number, minActivityDelta?: number};

package/src/viewers/sar-viewer.ts

@@ -6,18 +6,11 @@ import $ from 'cash-dom';
 import * as C from '../utils/constants';
 import {PeptidesModel} from '../model';
 
-let IS_PROPERTY_CHANGING = false;
-
 export class SARViewerBase extends DG.JsViewer {
   tempName!: string;
   viewerGrid!: DG.Grid;
   sourceGrid!: DG.Grid;
   model!: PeptidesModel;
-  scaling: string;
-  bidirectionalAnalysis: boolean;
-  maxSubstitutions: number;
-  minActivityDelta: number;
-  _titleHost = ui.divText('SAR Viewer', {id: 'pep-viewer-title'});
   initialized = false;
   isPropertyChanging: boolean = false;
   _isVertical = false;
@@ -25,11 +18,6 @@ export class SARViewerBase extends DG.JsViewer {
 
   constructor() {
     super();
-
-    this.scaling = this.string('scaling', 'none', {choices: ['none', 'lg', '-lg']});
-    this.bidirectionalAnalysis = this.bool('bidirectionalAnalysis', false);
-    this.maxSubstitutions = this.int('maxSubstitutions', 1);
-    this.minActivityDelta = this.float('minActivityDelta', 0);
   }
 
   get name(): string {return '';}
@@ -39,16 +27,6 @@ export class SARViewerBase extends DG.JsViewer {
     this.sourceGrid = this.view?.grid ?? (grok.shell.v as DG.TableView).grid;
     this.model = await PeptidesModel.getInstance(this.dataFrame);
     this.helpUrl = '/help/domains/bio/peptides.md';
-
-    this.initProperties();
-  }
-
-  initProperties(): void {
-    const props = this.model.usedProperties;
-    IS_PROPERTY_CHANGING = true;
-    for (const [propName, propVal] of Object.entries(props))
-      this.props.set(propName, propVal as any as object);
-    IS_PROPERTY_CHANGING = false;
   }
 
   detach(): void {this.subs.forEach((sub) => sub.unsubscribe());}
@@ -74,7 +52,6 @@ export class SARViewerBase extends DG.JsViewer {
           invariantMapMode.value = !invariantMapMode.value;
           this.isMutationCliffsMode = '1';
           this.isModeChanging = false;
-          this._titleHost.innerText = 'Mutation Cliffs';
           this.model.isInvariantMap = false;
           this.viewerGrid.invalidate();
         });
@@ -86,7 +63,6 @@ export class SARViewerBase extends DG.JsViewer {
           mutationCliffsMode.value = !mutationCliffsMode.value;
           this.isMutationCliffsMode = '0';
           this.isModeChanging = false;
-          this._titleHost.innerText = 'Invariant Map';
           this.model.isInvariantMap = true;
           this.viewerGrid.invalidate();
         });
@@ -99,34 +75,21 @@ export class SARViewerBase extends DG.JsViewer {
         setDefaultProperties(invariantMapMode);
         $(mutationCliffsMode.root).css('padding-right', '10px').css('padding-left', '5px');
 
-        switchHost = ui.divH([mutationCliffsMode.root, invariantMapMode.root]);
-        switchHost.style.position = 'absolute';
+        switchHost = ui.divH([mutationCliffsMode.root, invariantMapMode.root], {id: 'pep-viewer-title'});
+        $(switchHost).css('width', 'auto').css('align-self', 'center');
       }
       const viewerRoot = this.viewerGrid.root;
       viewerRoot.style.width = 'auto';
-      this.root.appendChild(ui.divV([ui.divH([switchHost, this._titleHost]), viewerRoot]));
+      this.root.appendChild(ui.divV([switchHost, viewerRoot]));
     }
     this.viewerGrid?.invalidate();
   }
 
   onPropertyChanged(property: DG.Property): void {
     super.onPropertyChanged(property);
-    this.dataFrame.tags[property.name] = `${property.get(this)}`;
-    if (!this.initialized || IS_PROPERTY_CHANGING)
-      return;
 
-    const propName = property.name;
-
-    if (propName === 'scaling' && typeof this.dataFrame !== 'undefined') {
-      const activityCol = this.dataFrame.columns.bySemType(C.SEM_TYPES.ACTIVITY)!;
-      const minActivity = activityCol.stats.min;
-      if (minActivity && minActivity <= 0 && this.scaling !== 'none') {
-        grok.shell.warning(`Could not apply ${this.scaling}: ` +
-          `activity column ${activityCol.name} contains zero or negative values, falling back to 'none'.`);
-        property.set(this, 'none');
-        return;
-      }
-    }
+    if (!this.initialized)
+      return;
 
     this.model.updateDefault();
     this.render(true);
@@ -147,7 +110,6 @@ export class MutationCliffsViewer extends SARViewerBase {
 
   async onTableAttached(): Promise<void> {
     await super.onTableAttached();
-    this.model.mutationCliffsViewer ??= this;
 
     this.subs.push(this.model.onMutationCliffsGridChanged.subscribe((data) => {
       this.viewerGrid = data;
@@ -164,16 +126,10 @@ export class MutationCliffsViewer extends SARViewerBase {
 
   //1. debouncing in rxjs; 2. flags?
   onPropertyChanged(property: DG.Property): void {
-    if (!this.isInitialized() || IS_PROPERTY_CHANGING)
+    if (!this.isInitialized())
       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);
-    IS_PROPERTY_CHANGING = false;
   }
 }
 
@@ -191,7 +147,6 @@ export class MostPotentResiduesViewer extends SARViewerBase {
 
   async onTableAttached(): Promise<void> {
     await super.onTableAttached();
-    this.model.mostPotentResiduesViewer ??= this;
 
     this.subs.push(this.model.onMostPotentResiduesGridChanged.subscribe((data) => {
       this.viewerGrid = data;
@@ -208,12 +163,9 @@ export class MostPotentResiduesViewer extends SARViewerBase {
   isInitialized(): DG.Grid {return this.model?.mostPotentResiduesGrid;}
 
   onPropertyChanged(property: DG.Property): void {
-    if (!this.isInitialized() || IS_PROPERTY_CHANGING)
+    if (!this.isInitialized())
       return;
 
     super.onPropertyChanged(property);
-    IS_PROPERTY_CHANGING = true;
-    this.model.syncProperties(false);
-    IS_PROPERTY_CHANGING = false;
   }
 }

package/src/widgets/distribution.ts

@@ -152,7 +152,7 @@ export function getDistributionWidget(table: DG.DataFrame, model: PeptidesModel)
   if (!model.isLogoSummarySelectionEmpty && model.isMutationCliffSelectionEmpty) {
     defaultValuePos = false;
     defaultValueAAR = false;
-  }    
+  }
 
   const splitByPosition = ui.boolInput('', defaultValuePos, updateDistributionHost);
   splitByPosition.addPostfix('Split by position');