@datagrok/peptides 1.3.7 → 1.3.9

package/src/package.ts

@@ -2,21 +2,27 @@
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
-
 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';
 
 import {PeptideSpaceViewer} from './viewers/peptide-space-viewer';
 import {LogoSummary} from './viewers/logo-summary';
+import {MonomerWorks} from '@datagrok-libraries/bio';
+
+export let monomerWorks: MonomerWorks | null;
 
 export const _package = new DG.Package();
 let currentTable: DG.DataFrame;
 let alignedSequenceColumn: DG.Column;
 
+export function getMonomerWorks() {
+  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 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/algorithms.ts

@@ -0,0 +1,51 @@
+import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
+
+import {category, test, expect, delay, before} from '@datagrok-libraries/utils/src/test';
+
+import {_package} from '../package-test';
+import {startAnalysis} from '../widgets/peptides';
+import {PeptidesModel} from '../model';
+import * as C from '../utils/constants';
+import {scaleActivity} from '../utils/misc';
+import {ALPHABET, TAGS, NOTATION, ALIGNMENT} from '@datagrok-libraries/bio';
+import {findMutations} from '../utils/algorithms';
+import * as type from '../utils/types';
+
+category('Algorithms', () => {
+  let activityCol: DG.Column<number>;
+  let monomerColumns: DG.Column<string>[];
+  let settings: type.PeptidesSettings;
+
+  before(async () => {
+    activityCol = DG.Column.fromList('int', 'test', [1, 2, 5]);
+    monomerColumns = [
+      DG.Column.fromList('string', '1', 'ABC'.split('')),
+      DG.Column.fromList('string', '2', 'ACC'.split('')),
+      DG.Column.fromList('string', '3', 'ACD'.split('')),
+    ];
+    settings = {maxMutations: 1, minActivityDelta: 2};
+  });
+
+  test('MutationCliffs', async () => {
+    const substInfo: type.SubstitutionsInfo = findMutations(activityCol, monomerColumns, settings);
+    expect(substInfo.has('C'), true);
+    expect(substInfo.has('D'), true);
+    expect(substInfo.has('A'), false);
+
+    const c = substInfo.get('C')!;
+    const d = substInfo.get('D')!;
+    expect(c.has('3'), true);
+    expect(d.has('3'), true);
+
+    const c3 = c.get('3')!;
+    const d3 = d.get('3')!;
+    expect(c3.has(2), true);
+    expect(d3.has(3), true);
+
+    const c32 = c3.get(2)!;
+    const d33 = d3.get(3)!;
+    expect(c32[0], 3);
+    expect(d33[0], 2);
+  });
+});

package/src/tests/core.ts

@@ -1,6 +1,5 @@
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
-import * as bio from '@datagrok-libraries/bio';
 
 import {category, test, expect, delay} from '@datagrok-libraries/utils/src/test';
 
@@ -9,6 +8,7 @@ import {startAnalysis} from '../widgets/peptides';
 import {PeptidesModel} from '../model';
 import * as C from '../utils/constants';
 import {scaleActivity} from '../utils/misc';
+import {ALPHABET, TAGS, NOTATION, ALIGNMENT} from '@datagrok-libraries/bio';
 
 category('Core', () => {
   let simpleTable: DG.DataFrame;
@@ -33,10 +33,10 @@ category('Core', () => {
     simpleActivityCol = simpleTable.getCol(simpleActivityColName);
     simpleAlignedSeqCol = simpleTable.getCol(alignedSequenceCol);
     simpleAlignedSeqCol.semType = C.SEM_TYPES.MACROMOLECULE;
-    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);
+    simpleAlignedSeqCol.setTag(C.TAGS.ALPHABET, ALPHABET.PT);
+    simpleAlignedSeqCol.setTag(DG.TAGS.UNITS, NOTATION.FASTA);
+    simpleAlignedSeqCol.setTag(TAGS.aligned, ALIGNMENT.SEQ_MSA);
+    simpleScaledCol = scaleActivity(simpleActivityCol, '-lg');
 
     model = await startAnalysis(simpleActivityCol, simpleAlignedSeqCol, null, simpleTable, simpleScaledCol, '-lg');
     expect(model instanceof PeptidesModel, true);
@@ -53,11 +53,11 @@ category('Core', () => {
     complexActivityCol = complexTable.getCol(complexActivityColName);
     complexAlignedSeqCol = complexTable.getCol('MSA');
     complexAlignedSeqCol.semType = C.SEM_TYPES.MACROMOLECULE;
-    complexAlignedSeqCol.setTag(C.TAGS.ALPHABET, bio.ALPHABET.UN);
-    complexAlignedSeqCol.setTag(DG.TAGS.UNITS, bio.NOTATION.SEPARATOR);
-    complexAlignedSeqCol.setTag(bio.TAGS.aligned, bio.ALIGNMENT.SEQ_MSA);
+    complexAlignedSeqCol.setTag(C.TAGS.ALPHABET, ALPHABET.UN);
+    complexAlignedSeqCol.setTag(DG.TAGS.UNITS, NOTATION.SEPARATOR);
+    complexAlignedSeqCol.setTag(TAGS.aligned, 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');
@@ -75,10 +75,10 @@ category('Core', () => {
     simpleActivityCol = simpleTable.getCol(simpleActivityColName);
     simpleAlignedSeqCol = simpleTable.getCol(alignedSequenceCol);
     simpleAlignedSeqCol.semType = C.SEM_TYPES.MACROMOLECULE;
-    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);
+    simpleAlignedSeqCol.setTag(C.TAGS.ALPHABET, ALPHABET.PT);
+    simpleAlignedSeqCol.setTag(DG.TAGS.UNITS, NOTATION.FASTA);
+    simpleAlignedSeqCol.setTag(TAGS.aligned, ALIGNMENT.SEQ_MSA);
+    simpleScaledCol = scaleActivity(simpleActivityCol, '-lg');
 
     model = await startAnalysis(simpleActivityCol, simpleAlignedSeqCol, null, simpleTable, simpleScaledCol, '-lg');
     let v = grok.shell.getTableView('Peptides analysis');

package/src/utils/algorithms.ts

@@ -0,0 +1,91 @@
+import * as DG from 'datagrok-api/dg';
+
+import * as C from './constants';
+import * as type from './types';
+import {getTypedArrayConstructor} from './misc';
+
+//TODO: move out
+export function findMutations(activityCol: DG.Column<number>, monomerColumns: DG.Column<string>[],
+  settings: type.PeptidesSettings = {}): type.SubstitutionsInfo {
+  const nCols = monomerColumns.length;
+  if (nCols == 0)
+    throw new Error(`PepAlgorithmError: Couldn't find any column of semType '${C.SEM_TYPES.MONOMER}'`);
+
+  const substitutionsInfo: type.SubstitutionsInfo = new Map();
+  const nRows = activityCol.length;
+  for (let seq1Idx = 0; seq1Idx < nRows - 1; seq1Idx++) {
+    for (let seq2Idx = seq1Idx + 1; seq2Idx < nRows; seq2Idx++) {
+      let substCounter = 0;
+      const activityValSeq1 = activityCol.get(seq1Idx)!;
+      const activityValSeq2 = activityCol.get(seq2Idx)!;
+      const delta = activityValSeq1 - activityValSeq2;
+      if (Math.abs(delta) < (settings.minActivityDelta ?? 0))
+        continue;
+
+      let substCounterFlag = false;
+      const tempData: { pos: string, seq1monomer: string, seq2monomer: string, seq1Idx: number, seq2Idx: number }[] =
+        [];
+      for (const currentPosCol of monomerColumns) {
+        const seq1monomer = currentPosCol.get(seq1Idx)!;
+        const seq2monomer = currentPosCol.get(seq2Idx)!;
+        if (seq1monomer == seq2monomer)
+          continue;
+
+        substCounter++;
+        substCounterFlag = substCounter > (settings.maxMutations ?? 1);
+        if (substCounterFlag)
+          break;
+
+        tempData.push({
+          pos: currentPosCol.name,
+          seq1monomer: seq1monomer,
+          seq2monomer: seq2monomer,
+          seq1Idx: seq1Idx,
+          seq2Idx: seq2Idx,
+        });
+      }
+
+      if (substCounterFlag || substCounter == 0)
+        continue;
+
+      for (const tempDataElement of tempData) {
+        const position = tempDataElement.pos;
+
+        //Working with seq1monomer
+        const seq1monomer = tempDataElement.seq1monomer;
+        if (!substitutionsInfo.has(seq1monomer))
+          substitutionsInfo.set(seq1monomer, new Map());
+
+        let positionsMap = substitutionsInfo.get(seq1monomer)!;
+        if (!positionsMap.has(position))
+          positionsMap.set(position, new Map());
+
+        let indexes = positionsMap.get(position)!;
+
+        !indexes.has(seq1Idx) ? indexes.set(seq1Idx, [seq2Idx]) : (indexes.get(seq1Idx)! as number[]).push(seq2Idx);
+
+        //Working with seq2monomer
+        const seq2monomer = tempDataElement.seq2monomer;
+        if (!substitutionsInfo.has(seq2monomer))
+          substitutionsInfo.set(seq2monomer, new Map());
+
+        positionsMap = substitutionsInfo.get(seq2monomer)!;
+        if (!positionsMap.has(position))
+          positionsMap.set(position, new Map());
+
+        indexes = positionsMap.get(position)!;
+        !indexes.has(seq2Idx) ? indexes.set(seq2Idx, [seq1Idx]) : (indexes.get(seq2Idx)! as number[]).push(seq1Idx);
+      }
+    }
+  }
+
+  const TypedArray = getTypedArrayConstructor(nRows);
+  for (const positionMap of substitutionsInfo.values()) {
+    for (const indexMap of positionMap.values()) {
+      for (const [index, indexArray] of indexMap.entries())
+        indexMap.set(index, new TypedArray(indexArray));
+    }
+  }
+
+  return substitutionsInfo;
+}

package/src/utils/cell-renderer.ts

@@ -1,8 +1,8 @@
 import * as DG from 'datagrok-api/dg';
-import * as bio from '@datagrok-libraries/bio';
 
 import * as C from './constants';
 import * as types from './types';
+import * as bio from '@datagrok-libraries/bio';
 
 function renderCellSelection(canvasContext: CanvasRenderingContext2D, bound: DG.Rect): void {
   canvasContext.strokeStyle = '#000';
@@ -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
@@ -100,86 +100,40 @@ export function renderLogoSummaryCell(canvasContext: CanvasRenderingContext2D, c
     renderCellSelection(canvasContext, bound);
 }
 
-export function renderBarchart(ctx: CanvasRenderingContext2D, col: DG.Column, monomerColStats: types.MonomerColStats,
-  bounds: DG.Rect, max: number): types.BarCoordinates {
-  let sum = col.length - (monomerColStats['-']?.count ?? 0);
-  const colorPalette = bio.getPaletteByType(col.tags[C.TAGS.ALPHABET]);
-  const name = col.name;
-  const colNameSize = ctx.measureText(name);
-  const margin = 0.2;
-  const innerMargin = 0.02;
-  const selectLineRatio = 0.1;
-  const fontSize = 11;
-
-  const xMargin = bounds.x + bounds.width * margin;
-  const yMargin = bounds.y + bounds.height * margin / 4;
-  const wMargin = bounds.width - bounds.width * margin * 2;
-  const hMargin = bounds.height - bounds.height * margin;
-  const barWidth = 10;
-  ctx.fillStyle = 'black';
-  ctx.textBaseline = 'top';
-  ctx.font = `${hMargin * margin / 2}px`;
-  ctx.fillText(name, xMargin + (wMargin - colNameSize.width) / 2, yMargin + hMargin + hMargin * margin / 4);
-
-
-  const barCoordinates: types.BarCoordinates = {};
-
-  const xStart = xMargin + (wMargin - barWidth) / 2;
-  for (const [monomer, monomerStats] of Object.entries(monomerColStats)) {
-    if (monomer == '-')
-      continue;
-
-    const count = monomerStats.count;
-    const sBarHeight = hMargin * count / max;
-    const gapSize = sBarHeight * innerMargin;
-    const verticalShift = (max - sum) / max;
-    const textSize = ctx.measureText(monomer);
-    const subBarHeight = sBarHeight - gapSize;
-    const yStart = yMargin + hMargin * verticalShift + gapSize / 2;
-    barCoordinates[monomer] = new DG.Rect(xStart, yStart, barWidth, subBarHeight);
-
-    const color = colorPalette.get(monomer);
-    ctx.strokeStyle = color;
-    ctx.fillStyle = color;
-
-    if (textSize.width <= subBarHeight) {
-      if (color != bio.SeqPaletteBase.undefinedColor)
-        ctx.fillRect(xStart, yStart, barWidth, subBarHeight);
-      else {
-        ctx.strokeRect(xStart + 0.5, yStart, barWidth - 1, subBarHeight);
-        barCoordinates[monomer].x -= 0.5;
-        barCoordinates[monomer].width -= 1;
-      }
-
-      const leftMargin = (wMargin - (monomer.length > 1 ? fontSize : textSize.width - 8)) / 2;
-      const absX = xMargin + leftMargin;
-      const absY = yStart + subBarHeight / 2 + (monomer.length == 1 ? 4 : 0);
-      const origTransform = ctx.getTransform();
-
-      if (monomer.length > 1) {
-        ctx.translate(absX, absY);
-        ctx.rotate(Math.PI / 2);
-        ctx.translate(-absX, -absY);
-      }
-
-      ctx.fillStyle = 'black';
-      ctx.font = `${fontSize}px monospace`;
-      ctx.textAlign = 'center';
-      ctx.textBaseline = 'bottom';
-      ctx.fillText(monomer, absX, absY);
-      ctx.setTransform(origTransform);
-    } else
-      ctx.fillRect(xStart, yStart, barWidth, subBarHeight);
-
-    const selectedCount = monomerStats.selected;
-    if (selectedCount) {
-      ctx.fillStyle = 'rgb(255,165,0)';
-      ctx.fillRect(xStart - wMargin * selectLineRatio * 2, yStart,
-        barWidth * selectLineRatio, hMargin * selectedCount / max - gapSize);
-    }
 
-    sum -= count;
+export function drawLogoInBounds(ctx: CanvasRenderingContext2D, bounds: DG.Rect, statsInfo: types.StatsInfo,
+  rowCount: number, cp: bio.SeqPalette, drawOptions: types.DrawOptions = {}): void {
+  drawOptions.fontStyle ??= '16px Roboto, Roboto Local, sans-serif';
+  drawOptions.upperLetterHeight ??= 12.2;
+  drawOptions.upperLetterAscent ??= 0.25;
+  drawOptions.marginVertical ??= 5;
+  drawOptions.marginHorizontal ??= 5;
+
+  const totalSpaceBetweenLetters = (statsInfo.orderedIndexes.length - 1) * drawOptions.upperLetterAscent;
+  const barHeight = bounds.height - 2 * drawOptions.marginVertical - totalSpaceBetweenLetters;
+  const leftShift = drawOptions.marginHorizontal * 2;
+  const barWidth = bounds.width - leftShift - drawOptions.marginHorizontal;
+  const xStart = bounds.x + leftShift;
+  let currentY = bounds.y + drawOptions.marginVertical;
+
+
+  for (const index of statsInfo.orderedIndexes) {
+    const monomer = statsInfo.monomerCol.get(index)!;
+    const monomerHeight = barHeight * (statsInfo.countCol.get(index)! / rowCount);
+
+    ctx.resetTransform();
+    if (monomer !== '-') {
+      const monomerTxt = bio.monomerToShort(monomer, 5);
+      const mTm: TextMetrics = ctx.measureText(monomerTxt);
+
+      ctx.fillStyle = cp.get(monomer) ?? cp.get('other');
+      ctx.textAlign = 'left';
+      ctx.textBaseline = 'top';
+      ctx.font = drawOptions.fontStyle;
+      // Hacks to scale uppercase characters to target rectangle
+      ctx.setTransform(barWidth / mTm.width, 0, 0, monomerHeight / drawOptions.upperLetterHeight, xStart, currentY);
+      ctx.fillText(monomerTxt, 0, 0);
+    }
+    currentY += monomerHeight + drawOptions.upperLetterAscent;
   }
-
-  return barCoordinates;
 }

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

@@ -1,5 +1,4 @@
 import * as DG from 'datagrok-api/dg';
-import * as bio from '@datagrok-libraries/bio';
 
 export type DataFrameDict = {[key: string]: DG.DataFrame};
 
@@ -8,9 +7,31 @@ export type UTypedArray = Uint8Array | Uint16Array | Uint32Array;
 export type SubstitutionsInfo = Map<string, Map<string, Map<number, number[] | UTypedArray>>>;
 export type PositionToAARList = {[postiton: string]: string[]};
 
-export type HELMMonomer = bio.Monomer;
-
 export type MonomerColStats = {[monomer: string]: {count: number, selected: number}};
 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,
+  columns?: {[col: string]: string},
+};
+
+export type DrawOptions = {
+  fontStyle?: string,
+  upperLetterHeight?: number,
+  upperLetterAscent?: number,
+  bounds?: DG.Rect,
+  textAlign?: CanvasTextAlign,
+  textBaseline?: CanvasTextBaseline,
+  marginVertical?: number,
+  marginHorizontal?: number,
+};
+
+export type StatsInfo = {
+  monomerCol: DG.Column<string>,
+  countCol: DG.Column<number>,
+  orderedIndexes: Int32Array,
+}

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');

package/src/widgets/manual-alignment.ts

@@ -1,11 +1,11 @@
 import * as ui from 'datagrok-api/ui';
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
-import * as bio from '@datagrok-libraries/bio';
 
 import $ from 'cash-dom';
 import '../styles.css';
 import {PeptidesModel} from '../model';
+import {splitAlignedSequences} from '@datagrok-libraries/bio';
 
 /** Manual sequence alignment widget.
  *
@@ -19,7 +19,7 @@ export function manualAlignmentWidget(alignedSequenceCol: DG.Column<string>, cur
   const applyChangesBtn = ui.button('Apply', async () => {
     const newSequence = sequenceInput.value;
     const affectedRowIndex = currentDf.currentRowIdx;
-    const splitSequence = bio.splitAlignedSequences(DG.Column.fromStrings('splitSequence', [newSequence]));
+    const splitSequence = splitAlignedSequences(DG.Column.fromStrings('splitSequence', [newSequence]));
 
     alignedSequenceCol.set(affectedRowIndex, newSequence);
     for (const part of splitSequence.columns) {