@datagrok/bio 2.8.4 → 2.9.0

package/src/tests/splitters-test.ts

@@ -14,8 +14,16 @@ import {
 } from '@datagrok-libraries/utils/src/test';
 import * as C from '../utils/constants';
 import {_package, getHelmMonomers} from '../package';
-import {TAGS as bioTAGS, splitterAsFasta, splitterAsHelm} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {
+  TAGS as bioTAGS,
+  splitterAsFasta,
+  splitterAsHelm,
+  NOTATION
+} from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {splitToMonomersUI} from '../utils/split-to-monomers';
+import {SEMTYPE} from 'datagrok-api/dg';
+import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {TAGS} from '../utils/constants';
 
 
 category('splitters', async () => {
@@ -35,6 +43,12 @@ category('splitters', async () => {
       ['M', 'MeI', 'Y', 'K', 'E', 'T', 'L', 'L', 'MeF', 'P',
         'K', 'T', 'D', 'F', 'P', 'M', 'R', 'G', 'G', 'L', 'MeA'],
     ],
+    fastaFromHelm: [
+      '[meI][Pip][dK][Thr_PO3H2][L-hArg(Et,Et)][D-Tyr_Et][Tyr_ab-dehydroMe][dV]EN[D-Orn][D-aThr][Phe_4Me]',
+      ['meI', 'Pip', 'dK', 'Thr_PO3H2', 'L-hArg(Et,Et)', 'D-Tyr_Et', 'Tyr_ab-dehydroMe', 'dV', 'E', 'N', 'D-Orn',
+        'D-aThr', 'Phe_4Me'],
+    ],
+
     helm1: [
       'PEPTIDE1{meI.hHis.Aca.N.T.dE.Thr_PO3H2.Aca.D-Tyr_Et.Tyr_ab-dehydroMe.dV.E.N.D-Orn.D-aThr.Phe_4Me}$$$',
       ['meI', 'hHis', 'Aca', 'N', 'T', 'dE', 'Thr_PO3H2', 'Aca', 'D-Tyr_Et',
@@ -68,6 +82,7 @@ category('splitters', async () => {
   };
 
   test('fastaMulti', async () => { await _testFastaSplitter(data.fastaMulti[0], data.fastaMulti[1]); });
+  test('fastaFromHelm', async () => { await _testFastaSplitter(data.fastaFromHelm[0], data.fastaFromHelm[1]); });
 
   test('helm1', async () => { await _testHelmSplitter(data.helm1[0], data.helm1[1]); });
   test('helm2', async () => { await _testHelmSplitter(data.helm2[0], data.helm2[1]); });
@@ -78,6 +93,7 @@ category('splitters', async () => {
   test('testHelm2', async () => { await _testHelmSplitter(data.testHelm2[0], data.testHelm2[1]); });
   test('testHelm3', async () => { await _testHelmSplitter(data.testHelm3[0], data.testHelm3[1]); });
 
+
   test('splitToMonomers', async () => {
     const df: DG.DataFrame = await grok.dapi.files.readCsv('System:AppData/Bio/samples/MSA.csv');
 
@@ -122,6 +138,16 @@ PEPTIDE1{hHis.Aca.Cys_SEt}$$$,5.72388
       throw new Error(msgs.join(' '));
     }
   });
+
+  // test('helmAsFasta', async () => {
+  //   // The columns can't be empty for UnitsHandler
+  //   /* eslint-disable max-len */
+  //   const srcSeq = '[meI][Pip][dK][Thr_PO3H2][L-hArg(Et,Et)][D-Tyr_Et][Tyr_ab-dehydroMe][dV]EN[D-Orn][D-aThr][Phe_4Me]';
+  //   const tgtSeqA = ['meI', 'Pip', 'dK', 'Thr_PO3H2', 'L-hArg(Et,Et)', 'D-Tyr_Et', 'Tyr_ab-dehydroMe', 'dV', 'E', 'N', 'D-Orn', 'D-aThr', 'Phe_4Me'];
+  //   /* eslint-enable max-len */
+  //   const resSeqA = splitterAsFasta(srcSeq);
+  //   expectArray(resSeqA, tgtSeqA);
+  // });
 });
 
 export async function _testFastaSplitter(src: string, tgt: string[]) {

package/src/tests/units-handler-splitted-tests.ts

@@ -2,11 +2,18 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
+import wu from 'wu';
+
 import {category, test, expect, expectArray} from '@datagrok-libraries/utils/src/test';
-import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {GapSymbols, UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {ISeqSplitted} from '@datagrok-libraries/bio/src/utils/macromolecule/types';
 
 category('UnitsHandler', () => {
-  const data: { [testName: string]: { src: { csv: string }, tgt: { splitted: string[][] } } } = {
+  const fG = GapSymbols[NOTATION.FASTA];
+  const hG = GapSymbols[NOTATION.HELM];
+  const sG = GapSymbols[NOTATION.SEPARATOR];
+  const data: { [testName: string]: { src: { csv: string }, tgt: { splitted: (string[] | string)[] } } } = {
     fasta: {
       src: {
         csv: `seq
@@ -16,9 +23,9 @@ TTCAAC`
       },
       tgt: {
         splitted: [
-          ['A', 'C', 'G', 'T', 'C'],
-          ['C', 'A', 'G', 'T', 'G', 'T'],
-          ['T', 'T', 'C', 'A', 'A', 'C']
+          'ACGTC',
+          'CAGTGT',
+          'TTCAAC',
         ]
       }
     },
@@ -32,9 +39,9 @@ ACCGTACT`,
       tgt: {
         splitted: [
           //@formatter:off
-          ['A', 'C', '' , 'G', 'T', '' , 'C', 'T'],
-          ['C', 'A', 'C', '' , 'T', '' , 'G', 'T'],
-          ['A', 'C', 'C', 'G', 'T', 'A', 'C', 'T'],
+          'AC-GT-CT',
+          'CAC-T-GT',
+          'ACCGTACT',
           //@formatter:on
         ]
       }
@@ -65,8 +72,8 @@ rut12-rty-her2---wert`
       tgt: {
         splitted: [
           ['abc', 'dfgg', 'abc1', 'cfr3', 'rty', 'wert'],
-          ['rut12', 'her2', 'rty', '', 'abc1', 'dfgg'],
-          ['rut12', 'rty', 'her2', '', '', 'wert'],
+          ['rut12', 'her2', 'rty', sG, 'abc1', 'dfgg'],
+          ['rut12', 'rty', 'her2', sG, sG, 'wert'],
         ]
       }
     },
@@ -99,8 +106,8 @@ PEPTIDE1{meI.hHis.Aca.Cys_SEt.T.dK.Thr_PO3H2}$$$$`
       expect(col.semType, DG.SEMTYPE.MACROMOLECULE);
 
       const uh = UnitsHandler.getOrCreate(col);
-      const splitted: string[][] = uh.splitted;
-      expectArray(splitted, testData.tgt.splitted);
+      const resSplitted: ISeqSplitted[] = uh.splitted;
+      expectArray(resSplitted, testData.tgt.splitted);
     });
   }
 });

package/src/tests/units-handler-tests.ts

@@ -41,25 +41,25 @@ category('UnitsHandler', () => {
   });
 
   test('Seq-Fasta-units', async () => {
-    const [_df, uh] = await loadCsvWithTag(seqDna, DG.TAGS.UNITS, NOTATION.FASTA);
+    const [_df, uh] = await loadCsvWithDetection(seqDna);
     expect(uh.notation, NOTATION.FASTA);
     expect(uh.isMsa(), false);
   });
 
   test('Seq-Fasta-MSA-units', async () => {
-    const [_df, uh] = await loadCsvWithTag(seqDnaMsa, DG.TAGS.UNITS, NOTATION.FASTA);
+    const [_df, uh] = await loadCsvWithDetection(seqDnaMsa);
     expect(uh.notation, NOTATION.FASTA);
     expect(uh.isMsa(), true);
   });
 
   test('Seq-Helm', async () => {
-    const [_df, uh] = await loadCsvWithTag(seqHelm, DG.TAGS.UNITS, NOTATION.HELM);
+    const [_df, uh] = await loadCsvWithDetection(seqHelm);
     expect(uh.notation, NOTATION.HELM);
     expect(uh.isHelm(), true);
   });
 
   test('Seq-UN', async () => {
-    const [_df, uh] = await loadCsvWithTag(seqUn, DG.TAGS.UNITS, NOTATION.SEPARATOR);
+    const [_df, uh] = await loadCsvWithDetection(seqUn);
     expect(uh.notation, NOTATION.SEPARATOR);
     expect(uh.separator, '-');
     expect(uh.alphabet, ALPHABET.UN);
@@ -79,15 +79,15 @@ category('UnitsHandler', () => {
     return [df, uh];
   }
 
-  async function loadCsvWithTag(csv: string, tag: string, value: string):
-    Promise<[df: DG.DataFrame, uh: UnitsHandler]> {
-    const df = DG.DataFrame.fromCsv(csv);
-    const col = df.getCol('seq');
-    col.setTag(tag, value);
-    col.semType = DG.SEMTYPE.MACROMOLECULE;
-    if (value === NOTATION.SEPARATOR)
-      col.setTag(TAGS.separator, '-');
-    const uh = UnitsHandler.getOrCreate(df.getCol('seq'));
-    return [df, uh];
-  }
+  // async function loadCsvWithTag(csv: string, tag: string, value: string):
+  //   Promise<[df: DG.DataFrame, uh: UnitsHandler]> {
+  //   const df = DG.DataFrame.fromCsv(csv);
+  //   const col = df.getCol('seq');
+  //   col.setTag(tag, value);
+  //   col.semType = DG.SEMTYPE.MACROMOLECULE;
+  //   if (value === NOTATION.SEPARATOR)
+  //     col.setTag(TAGS.separator, '-');
+  //   const uh = UnitsHandler.getOrCreate(df.getCol('seq'));
+  //   return [df, uh];
+  // }
 });

package/src/utils/cell-renderer.ts

@@ -2,13 +2,12 @@ import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 import * as ui from 'datagrok-api/ui';
 
-import {_package, getBioLib} from '../package';
+import wu from 'wu';
+
 import {printLeftOrCentered, DrawStyle} from '@datagrok-libraries/bio/src/utils/cell-renderer';
-import * as C from './constants';
 import {MonomerPlacer} from '@datagrok-libraries/bio/src/utils/cell-renderer-monomer-placer';
 import {
   getPaletteByType,
-  getSplitter,
   monomerToShort,
   MonomerToShortFunc,
   NOTATION,
@@ -18,8 +17,17 @@ import {
 import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
 import {UnknownSeqPalettes} from '@datagrok-libraries/bio/src/unknown';
 import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
-import {Temps as mmcrTemps, Tags as mmcrTags,
-  tempTAGS, rendererSettingsChangedState} from '../utils/cell-renderer-consts';
+
+import {
+  Temps as mmcrTemps, Tags as mmcrTags,
+  tempTAGS, rendererSettingsChangedState
+} from '../utils/cell-renderer-consts';
+import * as C from './constants';
+
+import {_package, getBioLib} from '../package';
+import {ISeqSplitted} from '@datagrok-libraries/bio/src/utils/macromolecule/types';
+import {getSplitter} from '@datagrok-libraries/bio/src/utils/macromolecule/utils';
+
 
 type TempType = { [tagName: string]: any };
 
@@ -30,20 +38,21 @@ function getUpdatedWidth(grid: DG.Grid | null, g: CanvasRenderingContext2D, x: n
   return grid ? Math.min(grid.canvas.width - x, w) : g.canvas.width - x;
 }
 
-export function processSequence(subParts: string[]): [string[], boolean] {
-  const simplified = !subParts.some((amino, index) =>
+export function processSequence(subParts: ISeqSplitted): [string[], boolean] {
+  const simplified = !wu.enumerate(subParts).some(([amino, index]) =>
     amino.length > 1 &&
     index != 0 &&
     index != subParts.length - 1);
 
   const text: string[] = [];
   const gap = simplified ? '' : ' ';
-  subParts.forEach((amino: string, index) => {
+  for (const [amino, index] of wu.enumerate(subParts)) {
+    let aminoRes = amino;
     if (index < subParts.length)
-      amino += `${amino ? '' : '-'}${gap}`;
+      aminoRes += `${amino ? '' : '-'}${gap}`;
 
-    text.push(amino);
-  });
+    text.push(aminoRes);
+  }
   return [text, simplified];
 }
 
@@ -188,11 +197,12 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
 
       const separator = tableCol.getTag(bioTAGS.separator) ?? '';
       const splitLimit = w / 5;
-      const splitterFunc: SplitterFunc = getSplitter(units, separator, splitLimit);
+      const uh = UnitsHandler.getOrCreate(tableCol);
+      const splitterFunc: SplitterFunc = uh.getSplitter(splitLimit);
 
       const tempReferenceSequence: string | null = tableColTemp[tempTAGS.referenceSequence];
       const tempCurrentWord: string | null = tableColTemp[tempTAGS.currentWord];
-      const referenceSequence: string[] = splitterFunc(
+      const referenceSequence: ISeqSplitted = splitterFunc(
         ((tempReferenceSequence != null) && (tempReferenceSequence != '')) ?
           tempReferenceSequence : tempCurrentWord ?? '');
 
@@ -226,7 +236,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
       //   maxLengthWords = colTemp[tempTAGS.bioMaxLengthWords];
       // }
 
-      const subParts: string[] = splitterFunc(value);
+      const subParts: ISeqSplitted = splitterFunc(value);
       /* let x1 = x; */
       let color = undefinedColor;
       let drawStyle = DrawStyle.classic;
@@ -234,7 +244,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
       if (aligned && aligned.includes('MSA') && units == NOTATION.SEPARATOR)
         drawStyle = DrawStyle.MSA;
 
-      for (const [index, amino] of subParts.entries()) {
+      for (const [amino, index] of wu.enumerate(subParts)) {
         color = palette.get(amino);
         g.fillStyle = undefinedColor;
         const last = index === subParts.length - 1;
@@ -281,9 +291,10 @@ export class MacromoleculeDifferenceCellRenderer extends DG.GridCellRenderer {
     _cellStyle: DG.GridCellStyle): void {
     const grid = gridCell.grid;
     const cell = gridCell.cell;
+    const tableCol = gridCell.tableColumn as DG.Column<string>;
     const s: string = cell.value ?? '';
-    const separator = gridCell.tableColumn!.tags[bioTAGS.separator];
-    const units: string = gridCell.tableColumn!.tags[DG.TAGS.UNITS];
+    const separator = tableCol.tags[bioTAGS.separator];
+    const units: string = tableCol.tags[DG.TAGS.UNITS];
     w = getUpdatedWidth(grid, g, x, w);
     //TODO: can this be replaced/merged with splitSequence?
     const [s1, s2] = s.split('#');
@@ -300,14 +311,14 @@ export function drawMoleculeDifferenceOnCanvas(
   y: number,
   w: number,
   h: number,
-  subParts1: string [],
-  subParts2: string [],
+  subParts1: ISeqSplitted,
+  subParts2: ISeqSplitted,
   units: string,
   fullStringLength?: boolean,
   molDifferences?: { [key: number]: HTMLCanvasElement },
 ): void {
   if (subParts1.length !== subParts2.length) {
-    const sequences: IComparedSequences = fillShorterSequence(subParts1, subParts2);
+    const sequences: IComparedSequences = fillShorterSequence(wu(subParts1).toArray(), wu(subParts2).toArray());
     subParts1 = sequences.subParts1;
     subParts2 = sequences.subParts2;
   }

package/src/utils/monomer-cell-renderer.ts

@@ -16,16 +16,18 @@ const Tags = new class {
 const svgMolOptions = {autoCrop: true, autoCropMargin: 0, suppressChiralText: true};
 
 export class MonomerTooltipHandler {
-  private readonly grid: DG.Grid;
+  private readonly gridCol: DG.GridColumn;
 
-  constructor(grid: DG.Grid) {
-    this.grid = grid;
-    this.grid.onCellTooltip(this.onCellTooltip.bind(this));
+  constructor(gridCol: DG.GridColumn) {
+    this.gridCol = gridCol;
+    this.gridCol.grid.onCellTooltip(this.onCellTooltip.bind(this));
   }
 
   private onCellTooltip(gridCell: DG.GridCell, x: number, y: number): any {
-    if (gridCell.grid.dart != this.grid.dart || !gridCell.tableColumn || !gridCell.isTableCell ||
-      gridCell.tableColumn.semType != 'Monomer') return false;
+    if (
+      gridCell.grid.dart != this.gridCol.grid.dart || gridCell.gridColumn.dart != this.gridCol.dart ||
+      !gridCell.tableColumn || !gridCell.isTableCell
+    ) return false;
 
     const alphabet = gridCell.tableColumn.getTag(bioTAGS.alphabet);
     const monomerName = gridCell.cell.value;
@@ -46,13 +48,11 @@ export class MonomerTooltipHandler {
     return true; // To prevent default tooltip behaviour
   }
 
-  public static getOrCreate(grid: DG.Grid): MonomerTooltipHandler {
-    const gridTemp: { [tempName: string]: any } = grid.dataFrame.temp;
-    if (!(Tags.tooltipHandlerTemp in gridTemp)) {
-      gridTemp[Tags.tooltipHandlerTemp] = new MonomerTooltipHandler(grid);
-      grid.temp = gridTemp;
-    }
-    return gridTemp[Tags.tooltipHandlerTemp];
+  public static getOrCreate(gridCol: DG.GridColumn): MonomerTooltipHandler {
+    let res = gridCol.temp[Tags.tooltipHandlerTemp];
+    if (!res)
+      res = gridCol.temp[Tags.tooltipHandlerTemp] = new MonomerTooltipHandler(gridCol);
+    return res;
   }
 }
 
@@ -81,7 +81,7 @@ export class MonomerCellRenderer extends DG.GridCellRenderer {
     _cellStyle: DG.GridCellStyle
   ): void {
     if (gridCell.gridRow < 0) return;
-    MonomerTooltipHandler.getOrCreate(gridCell.grid);
+    MonomerTooltipHandler.getOrCreate(gridCell.gridColumn);
 
 
     g.font = `12px monospace`;

package/src/utils/save-as-fasta.ts

@@ -107,7 +107,7 @@ export function wrapSequence(seq: string, splitter: SplitterFunc, lineWidth: num
   const seqLineList: string[] = [];
   while (seqPos < seqLength) {
     /* join sliced monomer into line */
-    const seqLine: string[] = seqMonomerList.slice(seqPos, seqPos + lineWidth);
+    const seqLine: string[] = wu(seqMonomerList).slice(seqPos, seqPos + lineWidth).toArray();
     const seqLineTxt: string = seqLine.map((m) => m.length > 1 ? `[${m}]` : m).join('');
     seqLineList.push(seqLineTxt);
     seqPos += seqLine.length;

package/src/utils/split-to-monomers.ts

@@ -1,10 +1,13 @@
+import * as grok from 'datagrok-api/grok';
+import * as ui from 'datagrok-api/ui';
+import * as DG from 'datagrok-api/dg';
+
 import {delay} from '@datagrok-libraries/utils/src/test';
 import {checkInputColumnUI} from './check-input-column';
 import {splitAlignedSequences} from '@datagrok-libraries/bio/src/utils/splitter';
 import * as C from './constants';
 import {TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule/consts';
-import * as grok from 'datagrok-api/grok';
-import * as DG from 'datagrok-api/dg';
+import {SEM_TYPES} from './constants';
 
 
 export async function splitToMonomersUI(table: DG.DataFrame, seqCol: DG.Column<string>): Promise<DG.DataFrame> {
@@ -14,6 +17,7 @@ export async function splitToMonomersUI(table: DG.DataFrame, seqCol: DG.Column<s
   if (!checkInputColumnUI(seqCol, 'Sequence space')) return table;
 
   const tempDf = splitAlignedSequences(seqCol);
+  tempDf.name = 'splitToMonomers';
   const originalDf = seqCol.dataFrame;
   for (const tempCol of tempDf.columns) {
     // TODO: GROK-11212
@@ -21,9 +25,39 @@ export async function splitToMonomersUI(table: DG.DataFrame, seqCol: DG.Column<s
     tempCol.semType = C.SEM_TYPES.MONOMER;
     tempCol.setTag(bioTAGS.alphabet, seqCol.getTag(bioTAGS.alphabet));
   }
-  // Create the new data frame to enable platform to setup cell renderers
-  const newDf = originalDf.join(tempDf, [], [], undefined, undefined, DG.JOIN_TYPE.LEFT, false);
-  grok.shell.addTableView(newDf);
 
-  return newDf;
+  const colNameRe = /(\d+)(?: \((\d+)\))?/;
+  const generateNewColName = (srcName: string): string => {
+    colNameRe.lastIndex = 0;
+    const ma = srcName.match(colNameRe);
+    if (!ma) return srcName;
+    return `${ma[1]} (${parseInt(ma[2] ?? 0) + 1})`;
+  };
+
+  // if (tempDf.columns.length === 0) return;
+
+  for (let tempColI = 0; tempColI < tempDf.columns.length; tempColI++) {
+    const tempCol = tempDf.columns.byIndex(tempColI);
+    tempCol.semType = SEM_TYPES.MONOMER;
+    tempCol.setTag(bioTAGS.alphabet, seqCol.getTag(bioTAGS.alphabet));
+
+    const wdMax = 100;
+    let wdCount = 0;
+    while (originalDf.columns.byName(tempCol.name) && wdCount < wdMax) {
+      tempCol.name = generateNewColName(tempCol.name);
+      wdCount++;
+    }
+
+    originalDf.columns.add(tempCol);
+  }
+
+  // originalDf.join(tempDf, [], [], undefined, undefined, DG.JOIN_TYPE.LEFT, true);
+  await grok.data.detectSemanticTypes(originalDf);
+
+  for (let tempColI = 0; tempColI < tempDf.columns.length; tempColI++) {
+    const tempCol = tempDf.columns.byIndex(tempColI);
+    tempCol.setTag(DG.TAGS.CELL_RENDERER, 'Monomer');
+  }
+
+  return originalDf;
 }

package/src/utils/ui-utils.ts

@@ -1,13 +1,13 @@
 import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
-export function getMacromoleculeColumn(): DG.Column | any {
-  const col = grok.shell.t.columns.bySemType(DG.SEMTYPE.MACROMOLECULE);
-  if (col === null) {
+export function getMacromoleculeColumns(): DG.Column<any>[] | any {
+  const columns = grok.shell.t.columns.bySemTypeAll(DG.SEMTYPE.MACROMOLECULE);
+  if (columns === null) {
     grok.shell.error('Current table does not contain macromolecules');
     return;
   }
-  return col;
+  return columns;
 }
 
 export function updateDivInnerHTML(div: HTMLElement, content: string | Node): void {

package/src/viewers/vd-regions-viewer.ts

@@ -42,6 +42,24 @@ const vrt = VdRegionType;
 //   new VdRegion(vrt.FR, 'FR4', 'Heavy', 7, '118', null/*128*/),
 // ];
 
+export enum PROPS_CATS {
+  STYLE = 'Style',
+  BEHAVIOR = 'Behavior',
+  LAYOUT = 'Layout',
+  DATA = 'Data',
+}
+
+export enum PROPS {
+  // -- Data --
+  skipEmptyPositions = 'skipEmptyPositions',
+  regionTypes = 'regionTypes',
+  chains = 'chains',
+
+  // -- Style --
+  positionWidth = 'positionWidth',
+  positionHeight = 'positionHeight',
+}
+
 /** Viewer with tabs based on description of chain regions.
  *  Used to define regions of an immunoglobulin LC.
  */
@@ -69,20 +87,24 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   constructor() {
     super();
 
+    // -- Data --
+    this.skipEmptyPositions = this.bool(PROPS.skipEmptyPositions, false,
+      {category: PROPS_CATS.DATA});
+
     // To prevent ambiguous numbering scheme in MLB
-    this.regionTypes = this.stringList('regionTypes', [vrt.CDR],
-      {choices: Object.values(vrt).filter((t) => t != vrt.Unknown)}) as VdRegionType[];
-    this.chains = this.stringList('chains', ['Heavy', 'Light'],
-      {choices: ['Heavy', 'Light']});
-    // this.sequenceColumnNamePostfix = this.string('sequenceColumnNamePostfix', 'chain sequence');
-
-    this.skipEmptyPositions = this.bool('skipEmptyPositions', false);
-    this.positionWidth = this.float('positionWidth', 16, {
-      editor: 'slider', min: 0, max: 64,
+    this.regionTypes = this.stringList(PROPS.regionTypes, [vrt.CDR], {
+      category: PROPS_CATS.DATA, choices: Object.values(vrt).filter((t) => t != vrt.Unknown)
+    }) as VdRegionType[];
+    this.chains = this.stringList(PROPS.chains, ['Heavy', 'Light'],
+      {category: PROPS_CATS.DATA, choices: ['Heavy', 'Light']});
+
+    // -- Layout --
+    this.positionWidth = this.float(PROPS.positionWidth, 16, {
+      category: PROPS_CATS.LAYOUT, editor: 'slider', min: 0, max: 64,
       description: 'Internal WebLogo viewers property width of position. A value of zero means autofit to the width.'
     });
-    this.positionHeight = this.string('positionHeight', PositionHeight.Entropy,
-      {choices: Object.keys(PositionHeight)}) as PositionHeight;
+    this.positionHeight = this.string(PROPS.positionHeight, PositionHeight.Entropy,
+      {category: PROPS_CATS.LAYOUT, choices: Object.keys(PositionHeight)}) as PositionHeight;
   }
 
   public async init() {
@@ -140,28 +162,35 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
       return;
     }
 
-    if (property) {
-      switch (property.name) {
-        case 'regionTypes':
-          break;
-        case 'chains':
-          break;
-        case 'sequenceColumnNamePostfix':
-          break;
-        // for (let orderI = 0; orderI < this.logos.length; orderI++) {
-        //   for (let chainI = 0; chainI < this.chains.length; chainI++) {
-        //     const chain: string = this.chains[chainI];
-        //     this.logos[orderI][chain].setOptions({skipEmptyPositions: this.skipEmptyPositions});
-        //   }
-        // }
-        // this.calcSize();
-      }
+    switch (property.name) {
+      case PROPS.regionTypes:
+      case PROPS.chains:
+        this.setData(this.dataFrame, this.regions);
+        break;
     }
 
     switch (property.name) {
-      case 'skipEmptyPositions':
-      case 'positionWidth':
-      case 'positionHeight':
+      case PROPS.skipEmptyPositions:
+        for (let orderI = 0; orderI < this.logos.length; ++orderI) {
+          for (const chain of this.chains)
+            this.logos[orderI][chain].setOptions({[wlPROPS.skipEmptyPositions]: this.skipEmptyPositions});
+        }
+        this.calcSize();
+        break;
+
+      case PROPS.positionWidth:
+        this.calcSize();
+        break;
+
+      case PROPS.positionHeight:
+        for (let orderI = 0; orderI < this.logos.length; ++orderI) {
+          for (const chain of this.chains)
+            this.logos[orderI][chain].setOptions({[wlPROPS.positionWidth]: this.positionWidth});
+        }
+        this.calcSize();
+        break;
+
+      default:
         this.setData(this.dataFrame, this.regions); // onPropertyChanged
         break;
     }
@@ -265,8 +294,10 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     this.logos = new Array(orderList.length);
     for (let orderI = 0; orderI < orderList.length; ++orderI)
       this.logos[orderI] = {};
-    for (const [orderI, chain, wl] of logoList)
+    for (const [orderI, chain, wl] of logoList) {
       this.logos[orderI][chain] = wl;
+      this.viewSubs.push(wl.onFreqsCalculated.subscribe(() => { this.calcSize(); }));
+    }
 
     // ui.tableFromMap()
     // DG.HtmlTable.create()
@@ -336,35 +367,41 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   private calcSize() {
     _package.logger.debug(`Bio: VdRegionsViewer.calcSize(), start`);
     const calcSizeInt = (): void => {
-      const dpr: number = window.devicePixelRatio;
-      const logoHeight = (this.root.clientHeight - 54) / this.chains.length;
-
-      const maxHeight: number = Math.min(logoHeight,
-        Math.max(...this.logos.map((wlDict) =>
-          Math.max(...Object.values(wlDict).map((wl) => wl.maxHeight)))),
-      );
+      // Postponed calcSizeInt can result call after the viewer has been closed (on tests)
+      if (!this.host) return;
 
+      const logoHeight = (this.root.clientHeight - 54) / this.chains.length;
       let totalPos: number = 0;
       for (let orderI = 0; orderI < this.logos.length; orderI++) {
-        for (const chain of this.chains)
-          this.logos[orderI][chain].root.style.height = `${maxHeight}px`;
+        for (const chain of this.chains) {
+          const wl = this.logos[orderI][chain];
+          wl.root.style.height = `${logoHeight}px`;
+        }
 
         totalPos += Math.max(...this.chains.map((chain) => this.logos[orderI][chain].Length));
       }
 
-      if (this.positionWidth === 0 && this.logos.length > 0 && totalPos > 0) {
-        const leftPad = 22/* Chain label */;
-        const rightPad = 6 + 6 + 1;
-        const logoMargin = 8 + 1;
-        const fitPositionWidth =
-          (this.root.clientWidth - leftPad - (this.logos.length - 1) * logoMargin - rightPad) / totalPos * dpr;
-
-        for (let orderI = 0; orderI < this.logos.length; orderI++) {
-          for (let chainI = 0; chainI < this.chains.length; chainI++) {
-            const chain: string = this.chains[chainI];
-            this.logos[orderI][chain].setOptions({positionWidth: fitPositionWidth});
+      if (this.positionWidth === 0) {
+        if (this.logos.length > 0 && totalPos > 0) {
+          const leftPad = 22/* Chain label */;
+          const rightPad = 6 + 6 + 1;
+          const logoMargin = 8 + 1;
+          const fitPositionWidth =
+            (this.root.clientWidth - leftPad - (this.logos.length - 1) * logoMargin - rightPad) / totalPos;
+
+          for (let orderI = 0; orderI < this.logos.length; orderI++) {
+            for (const chain of this.chains) {
+              const wl = this.logos[orderI][chain];
+              wl.setOptions({[wlPROPS.positionWidth]: fitPositionWidth});
+              wl.root.style.width = `${fitPositionWidth * wl.Length}px`;
+            }
           }
         }
+      } else {
+        for (let orderI = 0; orderI < this.logos.length; orderI++) {
+          for (const chain of this.chains)
+            this.logos[orderI][chain].setOptions({[wlPROPS.positionWidth]: this.positionWidth});
+        }
       }
 
       if (this.positionWidth === 0)