@datagrok/bio 2.10.4 → 2.10.6

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@datagrok/bio",
   "friendlyName": "Bio",
-  "skipCI": true,
   "author": {
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.10.4",
+  "version": "2.10.6",
   "description": "Bioinformatics support (import/export of sequences, conversion, visualization, analysis). [See more](https://github.com/datagrok-ai/public/blob/master/packages/Bio/README.md) for details.",
   "repository": {
     "type": "git",
@@ -35,7 +34,7 @@
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.38.3",
+    "@datagrok-libraries/bio": "^5.38.4",
     "@datagrok-libraries/chem-meta": "^1.0.1",
     "@datagrok-libraries/ml": "^6.3.39",
     "@datagrok-libraries/tutorials": "^1.3.6",
@@ -64,7 +63,7 @@
     "webpack-bundle-analyzer": "latest",
     "webpack-cli": "^4.9.1",
     "@datagrok/chem": "1.7.2",
-    "@datagrok/helm": "2.1.16"
+    "@datagrok/helm": "2.1.17"
   },
   "scripts": {
     "link-api": "npm link datagrok-api",

package/src/analysis/sequence-diversity-viewer.ts

@@ -22,7 +22,7 @@ export class SequenceDiversityViewer extends SequenceSearchBaseViewer {
     this.diverseColumnLabel = this.string('diverseColumnLabel', null);
   }
 
-  async render(computeData = true): Promise<void> {
+  override async renderInt(computeData: boolean): Promise<void> {
     if (!this.beforeRender())
       return;
     if (this.dataFrame) {

package/src/analysis/sequence-search-base-viewer.ts

@@ -6,6 +6,7 @@ import {CHEM_SIMILARITY_METRICS} from '@datagrok-libraries/ml/src/distance-metri
 import {TAGS as bioTAGS} from '@datagrok-libraries/bio/src/utils/macromolecule';
 
 const MAX_ROWS_FOR_DISTANCE_MATRIX = 22000;
+
 export class SequenceSearchBaseViewer extends DG.JsViewer {
   name: string = '';
   distanceMetric: string;
@@ -13,11 +14,12 @@ export class SequenceSearchBaseViewer extends DG.JsViewer {
   fingerprint: string;
   metricsProperties = ['distanceMetric', 'fingerprint'];
   fingerprintChoices = ['Morgan', 'Pattern'];
-  moleculeColumn?: DG.Column|null;
+  moleculeColumn?: DG.Column | null;
   moleculeColumnName: string;
   initialized: boolean = false;
   tags = [DG.TAGS.UNITS, bioTAGS.aligned, bioTAGS.separator, bioTAGS.alphabet];
   preComputeDistanceMatrix: boolean = false;
+
   constructor(name: string) {
     super();
     this.fingerprint = this.string('fingerprint', this.fingerprintChoices[0], {choices: this.fingerprintChoices});
@@ -40,19 +42,20 @@ export class SequenceSearchBaseViewer extends DG.JsViewer {
 
     if (this.dataFrame) {
       this.preComputeDistanceMatrix = this.dataFrame.rowCount <= MAX_ROWS_FOR_DISTANCE_MATRIX;
-      this.subs.push(DG.debounce(this.dataFrame.onRowsRemoved, 50).subscribe(async (_: any) => await this.render()));
+      this.subs.push(DG.debounce(this.dataFrame.onRowsRemoved, 50)
+        .subscribe((_: any) => this.render(true)));
       const compute = this.name !== 'diversity';
       this.subs.push(DG.debounce(this.dataFrame.onCurrentRowChanged, 50)
-        .subscribe(async (_: any) => await this.render(compute)));
+        .subscribe((_: any) => this.render(compute)));
       this.subs.push(DG.debounce(this.dataFrame.selection.onChanged, 50)
-        .subscribe(async (_: any) => await this.render(false)));
+        .subscribe((_: any) => this.render(false)));
       this.subs.push(DG.debounce(ui.onSizeChanged(this.root), 50)
-        .subscribe(async (_: any) => await this.render(false)));
+        .subscribe((_: any) => this.render(false)));
       this.moleculeColumn = this.dataFrame.columns.bySemType(DG.SEMTYPE.MACROMOLECULE);
       this.moleculeColumnName = this.moleculeColumn?.name!;
       this.getProperty('limit')!.fromOptions({min: 1, max: this.dataFrame.rowCount});
     }
-    await this.render();
+    this.render();
   }
 
   onPropertyChanged(property: DG.Property): void {
@@ -67,7 +70,17 @@ export class SequenceSearchBaseViewer extends DG.JsViewer {
     this.render();
   }
 
-  async render(_computeData = true) {
+  /** For tests */ public computeRequested: boolean;
+  public renderPromise: Promise<void> = Promise.resolve();
+
+  protected render(computeData = true): void {
+    this.renderPromise = this.renderPromise.then(async () => {
+      this.computeRequested = this.computeRequested || computeData;
+      await this.renderInt(computeData);
+    });
+  }
+
+  async renderInt(_computeData: boolean): Promise<void> {
 
   }
 

package/src/analysis/sequence-similarity-viewer.ts

@@ -39,7 +39,7 @@ export class SequenceSimilarityViewer extends SequenceSearchBaseViewer {
     this.initialized = true;
   }
 
-  async render(computeData = true): Promise<void> {
+  override async renderInt(computeData: boolean): Promise<void> {
     if (!this.beforeRender())
       return;
     if (this.moleculeColumn) {

package/src/package.ts

@@ -162,13 +162,6 @@ export function getBioLib(): IMonomerLib {
 //input: column seqCol {semType: Macromolecule}
 //output: widget result
 export function getRegionPanel(seqCol: DG.Column<string>): DG.Widget {
-  // const host = ui.divV([
-  //   ui.inputs([
-  //     ui.stringInput('Region', ''),
-  //   ]),
-  //   ui.button('Ok', () => {})
-  // ]);
-  // return DG.Widget.fromRoot(host);
   const funcName: string = 'getRegionTopMenu';
   const funcList = DG.Func.find({package: _package.name, name: funcName});
   if (funcList.length !== 1) throw new Error(`Package '${_package.name}' func '${funcName}' not found`);
@@ -357,7 +350,7 @@ export function getRegion(
 }
 
 //top-menu: Bio | Convert | Get Region...
-//name: Get Region
+//name: Get Region Top Menu
 //description: Get sequences for a region specified from a Macromolecule
 //input: dataframe table                           [Input data table]
 //input: column sequence  {semType: Macromolecule} [Sequence column]
@@ -784,7 +777,7 @@ export function similaritySearchViewer(): SequenceSimilarityViewer {
   return new SequenceSimilarityViewer();
 }
 
-//top-menu: Bio | Search | Similarity
+//top-menu: Bio | Search | Similarity Search
 //name: similaritySearch
 //description: Finds similar sequences
 //output: viewer result
@@ -802,7 +795,7 @@ export function diversitySearchViewer(): SequenceDiversityViewer {
   return new SequenceDiversityViewer();
 }
 
-//top-menu: Bio | Search | Diversity
+//top-menu: Bio | Search | Diversity Search
 //name: diversitySearch
 //description: Finds the most diverse sequences
 //output: viewer result
@@ -823,7 +816,7 @@ export function searchSubsequenceEditor(call: DG.FuncCall) {
     new SubstructureSearchDialog(columns);
 }
 
-//top-menu: Bio | Search | Subsequence...
+//top-menu: Bio | Search | Subsequence Search ...
 //name: Subsequence Search
 //input: column macromolecules
 //editor: Bio:SearchSubsequenceEditor

package/src/tests/activity-cliffs-tests.ts

@@ -38,7 +38,7 @@ category('activityCliffs', async () => {
     const cliffsNum = DG.Test.isInBenchmark ? 6 : 3;
 
     await _testActivityCliffsOpen(actCliffsDf, cliffsNum, DimReductionMethods.UMAP, 'sequence');
-  });
+  }, {skipReason: 'GROK-13952'});
 
   test('activityCliffsWithEmptyRows', async () => {
     actCliffsDfWithEmptyRows = await readDataframe('tests/100_3_clustests_empty_vals.csv');

package/src/tests/similarity-diversity-tests.ts

@@ -1,8 +1,9 @@
-import {category, test, expect, awaitCheck} from '@datagrok-libraries/utils/src/test';
+import {category, test, expect, awaitCheck, delay} from '@datagrok-libraries/utils/src/test';
 import * as DG from 'datagrok-api/dg';
 import {createTableView} from './utils';
 import * as grok from 'datagrok-api/grok';
 import {SequenceSimilarityViewer} from '../analysis/sequence-similarity-viewer';
+import {SequenceDiversityViewer} from '../analysis/sequence-diversity-viewer';
 
 category('similarity/diversity', async () => {
   test('similaritySearchViewer', async () => {
@@ -15,49 +16,86 @@ category('similarity/diversity', async () => {
 });
 
 async function _testSimilaritySearchViewer() {
-  const molecules = await createTableView('tests/sample_MSA_data.csv');
-  const viewer = molecules.addViewer('Sequence Similarity Search');
-  await awaitCheck(() => getSearchViewer(viewer, 'Sequence Similarity Search') !== undefined,
-    'Sequence Similarity Search has not been created', 5000);
-  const similaritySearchViewer: SequenceSimilarityViewer = getSearchViewer(viewer, 'Sequence Similarity Search');
+  const moleculesView = await createTableView('tests/sample_MSA_data.csv');
+
+  const viewer: SequenceSimilarityViewer = (await moleculesView.dataFrame.plot
+    .fromType('Sequence Similarity Search')) as SequenceSimilarityViewer;
+  let computeCompleted: boolean = false;
+  viewer.computeCompleted.subscribe((value) => {
+    if (value) computeCompleted = true;
+  });
+  moleculesView.dockManager.dock(viewer, DG.DOCK_TYPE.RIGHT, null, 'Similarity');
+  await viewer.renderPromise; // required to wait for computeCompleted
+
+  await awaitCheck(() => getSearchViewer(moleculesView, 'Sequence Similarity Search') !== undefined,
+    'Sequence Similarity Search viewer has not been created', 100);
+  if (!viewer.initialized) throw new Error('The viewer is not initialized.');
+  if (!viewer.moleculeColumn) throw new Error('The viewer has not molecule column (onTableAttached).');
+  if (!viewer.beforeRender()) throw new Error('The viewer is not able to render.');
+  if (!viewer.computeRequested) throw new Error('The viewer has not compute requested even.');
+  if (!computeCompleted) throw new Error('The viewer has not compute completed.');
+
+  const similaritySearchViewer = viewer;
   await awaitCheck(() => similaritySearchViewer.root.getElementsByClassName('d4-grid').length !== 0,
-    'Sequence Similarity Search has not been created', 5000);
+    'Sequence Similarity Search viewer grid has not been created', 100);
+
+  /* eslint-disable max-len */
+  const str0: string = 'D-Tyr_Et/Tyr_ab-dehydroMe/dV/E/N/D-Orn/D-aThr//Phe_4Me';
+  const str1: string = 'meI/hHis//Aca/meM/Tyr_ab-dehydroMe/dV/E/N/D-Orn/D-aThr//Phe_4Me';
+  const simStr1: string = 'meI/hHis/Aca/Cys_SEt/T/dK/Thr_PO3H2/Aca/Tyr_PO3H2/D-Chg/dV/Phe_ab-dehydro/N/D-Orn/D-aThr//Phe_4Me';
+  /* eslint-enable max-len */
+
   expect(similaritySearchViewer.fingerprint, 'Morgan');
   expect(similaritySearchViewer.distanceMetric, 'Tanimoto');
   expect(similaritySearchViewer.scores!.get(0), DG.FLOAT_NULL);
   expect(similaritySearchViewer.idxs!.get(0), 0);
-  expect(similaritySearchViewer.molCol!.get(0),
-    'D-Tyr_Et/Tyr_ab-dehydroMe/dV/E/N/D-Orn/D-aThr//Phe_4Me');
+  expect(similaritySearchViewer.molCol!.get(0), str0);
   expect(similaritySearchViewer.scores!.get(1), 0.4722222089767456);
   expect(similaritySearchViewer.idxs!.get(1), 11);
-  expect(similaritySearchViewer.molCol!.get(1),
-    'meI/hHis//Aca/meM/Tyr_ab-dehydroMe/dV/E/N/D-Orn/D-aThr//Phe_4Me');
-  molecules.dataFrame.currentRowIdx = 1;
+  expect(similaritySearchViewer.molCol!.get(1), str1);
+  moleculesView.dataFrame.currentRowIdx = 1;
   await awaitCheck(() => similaritySearchViewer.targetMoleculeIdx === 1,
     'Target molecule has not been changed', 5000);
-  await awaitCheck(() => similaritySearchViewer.molCol!.get(0) ===
-      'meI/hHis/Aca/Cys_SEt/T/dK/Thr_PO3H2/Aca/Tyr_PO3H2/D-Chg/dV/Phe_ab-dehydro/N/D-Orn/D-aThr//Phe_4Me',
-  'Incorrect first similar molecule', 5000);
+  await awaitCheck(() => similaritySearchViewer.molCol!.get(0) === simStr1,
+    'Incorrect first similar molecule', 5000);
 }
 
 async function _testDiversitySearchViewer() {
-  const molecules = await createTableView('tests/sample_MSA_data.csv');
-  const viewer = molecules.addViewer('Sequence Diversity Search');
-  await awaitCheck(() => getSearchViewer(viewer, 'Sequence Diversity Search') !== undefined,
-    'Sequence Diversity Search has not been created', 5000);
-  const diversitySearchviewer = getSearchViewer(viewer, 'Sequence Diversity Search');
-  await awaitCheck(() => diversitySearchviewer.root.getElementsByClassName('d4-grid').length !== 0,
-    'Sequence Diversity Search has not been created', 5000);
-  expect(diversitySearchviewer.fingerprint, 'Morgan');
-  expect(diversitySearchviewer.distanceMetric, 'Tanimoto');
-  expect(diversitySearchviewer.initialized, true);
-  expect(diversitySearchviewer.renderMolIds.length > 0, true);
+  const moleculesView = await createTableView('tests/sample_MSA_data.csv');
+
+  const viewer: SequenceDiversityViewer = (await moleculesView.dataFrame.plot
+    .fromType('Sequence Diversity Search')) as SequenceDiversityViewer;
+  let computeCompleted: boolean = false;
+  viewer.computeCompleted.subscribe((value) => {
+    if (value) computeCompleted = true;
+  });
+  moleculesView.dockManager.dock(viewer, DG.DOCK_TYPE.DOWN, null, 'Diversity');
+  await viewer.renderPromise;
+
+  await awaitCheck(() => getSearchViewer(moleculesView, 'Sequence Diversity Search') !== undefined,
+    'Sequence Diversity Search viewer has not been created', 100);
+  if (!viewer.initialized) throw new Error('The viewer is not initialized.');
+  if (!viewer.moleculeColumn) throw new Error('The viewer has not molecule column (onTableAttached).');
+  if (!viewer.beforeRender()) throw new Error('The viewer is not able to render.');
+  if (!viewer.computeRequested) throw new Error('The viewer has not compute requested even.');
+  if (!computeCompleted) throw new Error('The viewer has not compute completed.');
+
+  //const diversitySearchViewer = getSearchViewer(viewer, 'Sequence Diversity Search');
+  const diversitySearchViewer = viewer;
+  await awaitCheck(() => diversitySearchViewer.root.getElementsByClassName('d4-grid').length !== 0,
+    'Sequence Diversity Search viewer grid has not been created', 100);
+
+  expect(diversitySearchViewer.fingerprint, 'Morgan');
+  expect(diversitySearchViewer.distanceMetric, 'Tanimoto');
+  expect(diversitySearchViewer.initialized, true);
+  expect(diversitySearchViewer.renderMolIds!.length > 0, true);
 }
 
-function getSearchViewer(viewer: DG.Viewer, name: string) {
-  //@ts-ignore
-  for (const v of viewer.view.viewers) {
+function getSearchViewer(tv: DG.TableView, name: string): DG.Viewer | null {
+  let res: DG.Viewer | null = null;
+  for (const v of tv.viewers) {
     if (v.type === name)
-      return v;
+      res = v;
   }
+  return res;
 }

package/src/tests/viewers.ts

@@ -12,6 +12,13 @@ category('viewers', () => {
     test(v, async () => {
       const df = await readDataframe('data/sample_FASTA_DNA.csv');
       await testViewer(v, df, {detectSemanticTypes: true});
-    }, v === 'Sequence Similarity Search' ? {skipReason: 'GROK-13162'} : undefined);
+    }, {
+      skipReason: {
+        'Sequence Similarity Search': 'GROK-13162',
+        'Sequence Diversity Search': 'GROK-13162',
+        'WebLogo': 'GROK-13162',
+        'VdRegions': 'GROK-13162',
+      }[v],
+    });
   }
 });

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

@@ -18,7 +18,6 @@ export const rendererSettingsChangedState = {
 
 export const enum Temps {
   monomerWidth = '.mm.cellRenderer.monomerWidth',
-  maxMonomerLength = '.mm.cellRenderer.maxMonomerLength',
   colorCode = '.mm.cellRenderer.colorCode',
   compareWithCurrent = '.mm.cellRenderer.compareWithCurrent',
   highlightDifference = '.mm.cellRenderer.highlightDifference',

package/src/utils/cell-renderer.ts

@@ -4,7 +4,7 @@ import * as ui from 'datagrok-api/ui';
 
 import wu from 'wu';
 
-import {printLeftOrCentered, DrawStyle} from '@datagrok-libraries/bio/src/utils/cell-renderer';
+import {printLeftOrCentered, DrawStyle, TAGS as mmcrTAGS} from '@datagrok-libraries/bio/src/utils/cell-renderer';
 import {MonomerPlacer} from '@datagrok-libraries/bio/src/utils/cell-renderer-monomer-placer';
 import {
   getPaletteByType,
@@ -132,7 +132,7 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
   ): void {
     let gapLength = 0;
     const msaGapLength = 8;
-    let maxLengthOfMonomer = 999; // in case of long monomer representation, do not limit max length
+    let maxLengthOfMonomer = 50; // in case of long monomer representation, do not limit max length
 
     // TODO: Store temp data to GridColumn
     // Now the renderer requires data frame table Column underlying GridColumn
@@ -146,10 +146,11 @@ export class MacromoleculeSequenceCellRenderer extends DG.GridCellRenderer {
     if (monomerWidth === 'short') {
       // Renderer can start to work before Bio package initialized, in that time _package.properties is null.
       // TODO: Render function is available but package init method is not completed
-      maxLengthOfMonomer = tableColTemp[mmcrTemps.maxMonomerLength] ?? _package.properties?.MaxMonomerLength ?? 4;
+      const tagMaxMonomerLength: number = parseInt(tableCol.getTag(mmcrTAGS.maxMonomerLength));
+      maxLengthOfMonomer =
+        (!isNaN(tagMaxMonomerLength) ? tagMaxMonomerLength : _package.properties?.MaxMonomerLength) ?? 4;
     }
 
-
     let seqColTemp: MonomerPlacer = tableCol.temp[tempTAGS.bioSeqCol];
     if (!seqColTemp) {
       seqColTemp = new MonomerPlacer(grid, tableCol,

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

@@ -7,6 +7,7 @@ import {fromEvent, Unsubscribable} from 'rxjs';
 import {
   IVdRegionsViewer,
   VdRegion, VdRegionType,
+  VdRegionsProps, VdRegionsPropsDefault,
 } from '@datagrok-libraries/bio/src/viewers/vd-regions';
 import {FilterSources, IWebLogoViewer, PositionHeight} from '@datagrok-libraries/bio/src/viewers/web-logo';
 
@@ -55,11 +56,14 @@ export enum PROPS {
   regionTypes = 'regionTypes',
   chains = 'chains',
 
-  // -- Style --
+  // -- Layout --
+  fitWidth = 'fitWidth',
   positionWidth = 'positionWidth',
   positionHeight = 'positionHeight',
 }
 
+const defaults: VdRegionsProps = VdRegionsPropsDefault;
+
 /** Viewer with tabs based on description of chain regions.
  *  Used to define regions of an immunoglobulin LC.
  */
@@ -80,7 +84,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   // public sequenceColumnNamePostfix: string;
 
   public skipEmptyPositions: boolean;
-  /* A value of zero means autofit to the width. */
+  public fitWidth: boolean;
   public positionWidth: number;
   public positionHeight: PositionHeight;
 
@@ -88,22 +92,24 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     super();
 
     // -- Data --
-    this.skipEmptyPositions = this.bool(PROPS.skipEmptyPositions, false,
+    this.skipEmptyPositions = this.bool(PROPS.skipEmptyPositions, defaults.skipEmptyPositions,
       {category: PROPS_CATS.DATA});
 
     // To prevent ambiguous numbering scheme in MLB
-    this.regionTypes = this.stringList(PROPS.regionTypes, [vrt.CDR], {
+    this.regionTypes = this.stringList(PROPS.regionTypes, defaults.regionTypes, {
       category: PROPS_CATS.DATA, choices: Object.values(vrt).filter((t) => t != vrt.Unknown)
     }) as VdRegionType[];
-    this.chains = this.stringList(PROPS.chains, ['Heavy', 'Light'],
+    this.chains = this.stringList(PROPS.chains, defaults.chains,
       {category: PROPS_CATS.DATA, choices: ['Heavy', 'Light']});
 
     // -- Layout --
-    this.positionWidth = this.float(PROPS.positionWidth, 16, {
+    this.fitWidth = this.bool(PROPS.fitWidth, defaults.fitWidth,
+      {category: PROPS_CATS.LAYOUT});
+    this.positionWidth = this.float(PROPS.positionWidth, defaults.positionWidth, {
       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.'
+      description: 'Internal WebLogo viewers property width of position.'
     });
-    this.positionHeight = this.string(PROPS.positionHeight, PositionHeight.Entropy,
+    this.positionHeight = this.string(PROPS.positionHeight, defaults.positionHeight,
       {category: PROPS_CATS.LAYOUT, choices: Object.keys(PositionHeight)}) as PositionHeight;
   }
 
@@ -178,6 +184,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
         this.calcSize();
         break;
 
+      case PROPS.fitWidth:
       case PROPS.positionWidth:
         this.calcSize();
         break;
@@ -274,7 +281,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
       for (const chain of this.chains) {
         const region: VdRegion | undefined = regionsFiltered
           .find((r) => r.order == orderList[orderI] && r.chain == chain);
-        logoPromiseList.push((async () => {
+        logoPromiseList.push((async (): Promise<[number, string, WebLogoViewer]> => {
           const wl: WebLogoViewer = await this.dataFrame.plot.fromType('WebLogo', {
             sequenceColumnName: region!.sequenceColumnName,
             startPositionName: region!.positionStartName,
@@ -381,7 +388,7 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
         totalPos += Math.max(...this.chains.map((chain) => this.logos[orderI][chain].Length));
       }
 
-      if (this.positionWidth === 0) {
+      if (this.fitWidth) {
         if (this.logos.length > 0 && totalPos > 0) {
           const leftPad = 22/* Chain label */;
           const rightPad = 6 + 6 + 1;
@@ -392,16 +399,18 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
           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.setOptions({[wlPROPS.positionWidth]: (fitPositionWidth - wl.positionMarginValue)});
               wl.root.style.width = `${fitPositionWidth * wl.Length}px`;
             }
           }
         }
+        this.host.style.setProperty('overflow', 'hidden', 'important');
       } 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});
         }
+        this.host.style.removeProperty('overflow');
       }
 
       if (this.positionWidth === 0)

package/src/viewers/web-logo-viewer.ts

@@ -339,7 +339,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     return this.startPosition <= this.endPosition ? this.endPosition - this.startPosition + 1 : 0;
   }
 
-  private get positionMarginValue(): number {
+  public get positionMarginValue(): number {
     if (this.positionMarginState === PositionMarginStates.AUTO && this.unitsHandler!.getAlphabetIsMultichar() === true)
       return this.positionMargin;
     else if (this.positionMarginState === PositionMarginStates.ON)
@@ -598,12 +598,11 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     }
   }
 
-  /** Updates {@link host}, {@link canvas}, {@link slider}.
+  /** Updates {@link host}, {@link canvas}, {@link slider} .min, .max.
    * Calls {@link render} with {@link WlRenderLevel.Layout}
    */
   private calcLayout(dpr: number): void {
     if (!this.host || !this.canvas || !this.slider) return;
-    if (this.root.clientHeight === 0 || this.root.clientWidth === 0) return;
 
     this.host.classList.remove('bio-wl-fixWidth', 'bio-wl-fitArea');
     this.canvas.classList.remove('bio-wl-fixWidth', 'bio-wl-fitArea');
@@ -892,7 +891,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   /** Renders requested repeatedly will be performed once on window.requestAnimationFrame() */
   render(recalcLevel: WlRenderLevel, reason: string): Promise<void> {
     _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>` +
-      `.render( recalcLevel=${recalcLevel}, reason='${reason}' )`);
+      `.render( recalcLevelVal=${recalcLevel}, reason='${reason}' )`);
 
     /** Calculate freqs of monomers */
     const calculateFreqsInt = (): void => {
@@ -989,6 +988,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       /** 0 is for no position labels */
       const positionLabelsHeight = this.showPositionLabels ? POSITION_LABELS_HEIGHT : 0;
       if (recalcLevel >= WlRenderLevel.Freqs) calculateFreqsInt();
+      if (this.positions.length === 0) return;
       if (recalcLevel >= WlRenderLevel.Layout) calculateLayoutInt(window.devicePixelRatio, positionLabelsHeight);
 
       const length: number = this.Length;

package/src/widgets/representations.ts

@@ -1,9 +1,15 @@
 import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
+
 import {getMolfilesFromSingleSeq} from '@datagrok-libraries/bio/src/monomer-works/monomer-utils';
-import {Tags as mmcrTags, Temps as mmcrTemps, MonomerWidthMode,
-  tempTAGS, rendererSettingsChangedState} from '../utils/cell-renderer-consts';
+import {TAGS as mmcrTAGS} from '@datagrok-libraries/bio/src/utils/cell-renderer';
+
+import {
+  Tags as mmcrTags, Temps as mmcrTemps, MonomerWidthMode,
+  tempTAGS, rendererSettingsChangedState
+} from '../utils/cell-renderer-consts';
+
 import {_package} from '../package';
 
 
@@ -31,10 +37,11 @@ export function getMacromoleculeColumnPropertyPanel(col: DG.Column): DG.Widget {
     `In short mode, only the 'Max monomer length' characters are displayed, followed by .. if there are more`,
   );
 
+  const tagMaxMonomerLength: number = parseInt(col.getTag(mmcrTAGS.maxMonomerLength));
   const maxMonomerLength: DG.InputBase = ui.intInput('Max monomer length',
-    col.temp[mmcrTemps.maxMonomerLength] ?? _package.properties.MaxMonomerLength,
+    !isNaN(tagMaxMonomerLength) ? tagMaxMonomerLength : _package.properties.MaxMonomerLength,
     (value: number) => {
-      col.temp[mmcrTemps.maxMonomerLength] = value;
+      col.setTag(mmcrTAGS.maxMonomerLength, value.toString());
       col.setTag(mmcrTags.RendererSettingsChanged, rendererSettingsChangedState.true);
       col.dataFrame.fireValuesChanged();
     });