@datagrok/bio 2.21.0 → 2.21.2

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.21.0",
+  "version": "2.21.2",
   "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",
@@ -44,12 +44,12 @@
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.51.0",
+    "@datagrok-libraries/bio": "^5.51.2",
     "@datagrok-libraries/chem-meta": "^1.2.7",
     "@datagrok-libraries/math": "^1.2.4",
     "@datagrok-libraries/ml": "^6.10.0",
     "@datagrok-libraries/tutorials": "^1.6.1",
-    "@datagrok-libraries/utils": "^4.5.0",
+    "@datagrok-libraries/utils": "^4.5.7",
     "datagrok-api": "^1.25.0",
     "@webgpu/types": "^0.1.40",
     "ajv": "^8.12.0",

package/src/package.ts

@@ -524,7 +524,6 @@ export async function activityCliffs(table: DG.DataFrame, molecules: DG.Column<s
 //tags: dim-red-preprocessing-function
 //meta.supportedSemTypes: Macromolecule
 //meta.supportedTypes: string
-//meta.supportedUnits: fasta,separator,helm
 //meta.supportedDistanceFunctions: Hamming,Levenshtein,Monomer chemical distance,Needlemann-Wunsch
 //input: column col {semType: Macromolecule}
 //input: string metric

package/src/utils/monomer-lib/monomer-lib-base.ts

@@ -209,8 +209,22 @@ export class MonomerLibBase implements IMonomerLibBase {
         {style: {display: 'flex', flexDirection: 'row', justifyContent: 'center', margin: '6px'}}));
 
       // Source
-      if (monomer.symbol != GAP_SYMBOL)
-        res.append(ui.divText(monomer.lib?.source ?? 'Missed in libraries'));
+      if (monomer.symbol != GAP_SYMBOL) {
+        let source = monomer.lib?.source;
+        if (!source)
+          res.append(ui.divText('Missed in libraries'));
+        else {
+          // remove.json extension
+          if (source.endsWith('.json'))
+            source = source.substring(0, source.length - 5);
+          // convert campelCase/snake_case/kebab-case to space separated words
+          source = source
+            .replace(/_/g, ' ')
+            .replace(/-/g, ' ')
+            .replace(/([a-z])([a-z])([A-Z])/g, '$1$2 $3');
+          res.append(ui.divText(source));
+        }
+      }
     } else {
       res.append(ui.divV([
         ui.divText(`Monomer '${monomerSymbol}' of type '${polymerType}' not found.`),

package/src/utils/monomer-lib/monomer-manager/monomer-manager.ts

@@ -191,23 +191,23 @@ export class MonomerManager implements IMonomerManager {
           args.context.tableView.id !== (this.tv!.id ?? '') || !args.item || !args.item.isTableCell || (args.item.tableRowIndex ?? -1) < 0)
           return;
         const rowIdx = args.item.tableRowIndex;
-        args.menu.item('Edit Monomer', () => {
-          this.cloneMonomer(this.tv!.dataFrame.rows.get(rowIdx));
+        args.menu.item('Edit Monomer', async () => {
+          await this.editMonomer(this.tv!.dataFrame.rows.get(rowIdx));
         });
         if (this.tv!.dataFrame.selection.trueCount > 0) {
-          args.menu.item('Remove Selected Monomers', () => {
-            const monomers = Array.from(this.tv!.dataFrame.selection.getSelectedIndexes())
-              .map((r) => monomerFromDfRow(this.tv!.dataFrame.rows.get(r)));
+          args.menu.item('Remove Selected Monomers', async () => {
+            const monomers = await Promise.all(Array.from(this.tv!.dataFrame.selection.getSelectedIndexes())
+              .map((r) => monomerFromDfRow(this.tv!.dataFrame.rows.get(r))));
             this._newMonomerForm.removeMonomers(monomers, this.libInput.value!);
           });
-          args.menu.item('Selection To New Library', () => {
-            const monomers = Array.from(this.tv!.dataFrame.selection.getSelectedIndexes())
-              .map((r) => monomerFromDfRow(this.tv!.dataFrame.rows.get(r)));
+          args.menu.item('Selection To New Library', async () => {
+            const monomers = await Promise.all(Array.from(this.tv!.dataFrame.selection.getSelectedIndexes())
+              .map((r) => monomerFromDfRow(this.tv!.dataFrame.rows.get(r))));
             this.createNewLibDialog(monomers);
           });
         } else {
-          args.menu.item('Remove Monomer', () => {
-            const monomer = monomerFromDfRow(this.tv!.dataFrame.rows.get(rowIdx));
+          args.menu.item('Remove Monomer', async () => {
+            const monomer = await monomerFromDfRow(this.tv!.dataFrame.rows.get(rowIdx));
             this._newMonomerForm.removeMonomers([monomer], this.libInput.value!);
           });
         }
@@ -271,9 +271,9 @@ export class MonomerManager implements IMonomerManager {
       this._newMonomerForm.setEmptyMonomer();
     }, 'Add New Monomer');
 
-    const editButton = ui.icons.edit(() => {
+    const editButton = ui.icons.edit(async () => {
       if ((this.tv?.dataFrame?.currentRowIdx ?? -1) < 0) return;
-      this.cloneMonomer(this.tv!.dataFrame.rows.get(this.tv!.dataFrame.currentRowIdx));
+      await this.editMonomer(this.tv!.dataFrame.rows.get(this.tv!.dataFrame.currentRowIdx));
     }, 'Edit Monomer');
 
     const deleteButton = ui.icons.delete(async () => {
@@ -282,16 +282,16 @@ export class MonomerManager implements IMonomerManager {
       if (currentRowIdx < 0 && selectedRows.length === 0) return;
 
       if (selectedRows.length > 0) {
-        const monomers = selectedRows.map((r) => monomerFromDfRow(this.tv!.dataFrame.rows.get(r)));
+        const monomers = await Promise.all(selectedRows.map((r) => monomerFromDfRow(this.tv!.dataFrame.rows.get(r))));
         await this._newMonomerForm.removeMonomers(monomers, this.libInput.value!);
         return;
       }
-      const monomer = monomerFromDfRow(this.tv!.dataFrame.rows.get(currentRowIdx));
+      const monomer = await monomerFromDfRow(this.tv!.dataFrame.rows.get(currentRowIdx));
       await this._newMonomerForm.removeMonomers([monomer], this.libInput.value!);
     });
 
     ui.tooltip.bind(deleteButton, () =>
-      `${(this.tv?.dataFrame?.selection?.getSelectedIndexes() ?? []).length > 0 ? 'Delete selected monomers' : 'Delete monomer'}`);
+      `${(this.tv?.dataFrame?.selection?.trueCount ?? 0) > 0 ? 'Delete selected monomers' : 'Delete monomer'}`);
 
     const downloadButton = ui.iconFA('arrow-to-bottom', async () => {
       const libName = this.libInput.value;
@@ -333,8 +333,8 @@ export class MonomerManager implements IMonomerManager {
     return this.tv;
   }
 
-  cloneMonomer(dfRow: DG.Row): Monomer {
-    this._newMonomer = monomerFromDfRow(dfRow);
+  async editMonomer(dfRow: DG.Row): Promise<Monomer> {
+    this._newMonomer = await monomerFromDfRow(dfRow);
     this._newMonomerForm.setMonomer(this._newMonomer);
     return this._newMonomer;
   }
@@ -384,6 +384,17 @@ export class MonomerManager implements IMonomerManager {
           const rgroup = monomers[i].rgroups.find((rg) => rg.label === rgName);
           return rgroup ? getCaseInvariantValue(rgroup, HELM_RGROUP_FIELDS.CAP_GROUP_SMILES) : '';
         });
+        let date: number | null = null;
+
+        if (monomers[i].createDate) {
+          try {
+            date = Date.parse(monomers[i].createDate!);
+          } catch (e) {
+            console.error(`Error parsing date ${monomers[i].createDate}`);
+          }
+        }
+
+
         df.rows.setValues(i, [
           molSmiles,
           monomers[i].symbol,
@@ -394,23 +405,30 @@ export class MonomerManager implements IMonomerManager {
           monomers[i].polymerType,
           monomers[i].naturalAnalog,
           monomers[i].author,
-          monomers[i].createDate,
+          date,
           monomers[i].id,
           JSON.stringify(monomers[i].meta ?? {}),
           monomers[i].lib?.source ?? '',
         ]);
+        // something is wrong with setting dates, so setting it manually for now
+        try {
+          if (date)
+            df.col(MONOMER_DF_COLUMN_NAMES.CREATE_DATE)?.set(i, date, false);
+        } catch (e) {
+          console.error(`Error setting date ${monomers[i].createDate}`);
+        }
       }
       df.col(MONOMER_DF_COLUMN_NAMES.MONOMER)!.semType = DG.SEMTYPE.MOLECULE;
       uniqueRgroupNames.forEach((rgName) => {
         df.col(rgName)!.semType = DG.SEMTYPE.MOLECULE;
       });
       df.currentRowIdx = -1;
-      // eslint-disable-next-line rxjs/no-ignored-subscription
-      df.onCurrentRowChanged.subscribe((_) => {
+      // eslint-disable-next-line rxjs/no-ignored-subscription, rxjs/no-async-subscribe
+      df.onCurrentRowChanged.subscribe(async (_) => {
         try {
           if (df.currentRowIdx === -1 || this._newMonomerForm.molChanged)
             return;
-          this.cloneMonomer(df.rows.get(df.currentRowIdx));
+          await this.editMonomer(df.rows.get(df.currentRowIdx));
         } catch (e) {
           console.error(e);
         }
@@ -753,7 +771,7 @@ class MonomerForm implements INewMonomerForm {
     this.metaGrid.render();
     this.rgroupsGridRoot.style.display = 'flex';
     this.onMonomerInputChanged();
-    if (!monomer.naturalAnalog) {
+    if (!monomer.naturalAnalog && monomer.polymerType) {
       mostSimilarNaturalAnalog(capSmiles(monomer.smiles, this.rgroupsGrid.items as RGroup[]), monomer.polymerType).then((mostSimilar) => {
         if (mostSimilar)
           this.monomerNaturalAnalogInput.value = mostSimilar;
@@ -824,7 +842,7 @@ class MonomerForm implements INewMonomerForm {
       this.molSketcher.root,
       this.inputsTabControl.root,
       saveB,
-    ], {classes: 'ui-form', style: {paddingLeft: '10px', overflow: 'scroll'}});
+    ], {classes: 'ui-form', style: {paddingLeft: '10px', overflow: 'scroll', maxWidth: 'unset'}});
   }
 
   get fieldInputs() {
@@ -933,7 +951,7 @@ class MonomerForm implements INewMonomerForm {
       infoTable = this.getMonomerInfoTable(libJSON[existingMonomerIdx]);
       promptMessage = `Monomer with symbol '${monomer.symbol}' already exists in library ${libName}.\nAre you sure you want to overwrite it?`;
     } else if ((existingStructureIdx ?? -1) >= 0) {
-      const m = monomerFromDfRow(this.getMonomersDataFrame()!.rows.get(existingStructureIdx!));
+      const m = await monomerFromDfRow(this.getMonomersDataFrame()!.rows.get(existingStructureIdx!));
       infoTable = this.getMonomerInfoTable(m);
       promptMessage = `Monomer with the same structure already exists in library ${libName} with different symbol (${m.symbol}).\nAre you sure you want to duplicate it?`;
     }
@@ -1098,12 +1116,22 @@ function capSmiles(smiles: string, rgroups: RGroup[]) {
   return newSmiles;
 }
 
-function monomerFromDfRow(dfRow: DG.Row): Monomer {
+async function monomerFromDfRow(dfRow: DG.Row): Promise<Monomer> {
   // hacky way for now, but meta object for now only supports key value pairs and not nested objects
-  const metaJSON = JSON.parse(dfRow.get(MONOMER_DF_COLUMN_NAMES.META) ?? '{}');
-  for (const key in metaJSON) {
-    if (typeof metaJSON[key] === 'object')
-      metaJSON[key] = JSON.stringify(metaJSON[key]);
+  let metaJSON: any;
+  try {
+    metaJSON = JSON.parse(dfRow.get(MONOMER_DF_COLUMN_NAMES.META) ?? '{}');
+    for (const key in metaJSON) {
+      if (typeof metaJSON[key] === 'object')
+        metaJSON[key] = JSON.stringify(metaJSON[key]);
+      // post-fix for detecting null values in meta object
+      if ((typeof metaJSON[key] === 'string' && (metaJSON[key] === DG.INT_NULL.toString() || metaJSON[key] === DG.FLOAT_NULL.toString())) ||
+        (typeof metaJSON[key] === 'number' && (metaJSON[key] === DG.INT_NULL || metaJSON[key] === DG.FLOAT_NULL))
+      )
+        metaJSON[key] = null;
+    }
+  } catch (e) {
+    console.error(e);
   }
   const smiles = dfRow.get(MONOMER_DF_COLUMN_NAMES.MONOMER);
   if (!smiles)
@@ -1118,16 +1146,30 @@ function monomerFromDfRow(dfRow: DG.Row): Monomer {
     console.error(e);
   }
 
+  let naturalAnalog = dfRow.get(MONOMER_DF_COLUMN_NAMES.NATURAL_ANALOG);
+  const polymerType = dfRow.get(MONOMER_DF_COLUMN_NAMES.POLYMER_TYPE);
+  let rGroups: RGroup[] = [];
+  try {
+    rGroups = JSON.parse(dfRow.get(MONOMER_DF_COLUMN_NAMES.R_GROUPS) ?? '[]');
+    if (!naturalAnalog && polymerType) {
+      const mostSimilar = await mostSimilarNaturalAnalog(capSmiles(smiles, rGroups), polymerType);
+      if (mostSimilar)
+        naturalAnalog = mostSimilar;
+    }
+  } catch (_) {
+    rGroups ??= [];
+  }
+
   return {
     symbol: dfRow.get(MONOMER_DF_COLUMN_NAMES.SYMBOL),
     name: dfRow.get(MONOMER_DF_COLUMN_NAMES.NAME),
     molfile: molfile,
     smiles: smiles,
-    polymerType: dfRow.get(MONOMER_DF_COLUMN_NAMES.POLYMER_TYPE),
+    polymerType: polymerType,
     monomerType: dfRow.get(MONOMER_DF_COLUMN_NAMES.MONOMER_TYPE),
-    naturalAnalog: dfRow.get(MONOMER_DF_COLUMN_NAMES.NATURAL_ANALOG),
+    naturalAnalog: naturalAnalog,
     id: dfRow.get(MONOMER_DF_COLUMN_NAMES.ID),
-    rgroups: JSON.parse(dfRow.get(MONOMER_DF_COLUMN_NAMES.R_GROUPS) ?? '[]'),
+    rgroups: rGroups,
     meta: metaJSON,
     author: dfRow.get(MONOMER_DF_COLUMN_NAMES.AUTHOR),
     createDate: dfRow.get(MONOMER_DF_COLUMN_NAMES.CREATE_DATE),

package/src/viewers/utils.ts

@@ -0,0 +1,4 @@
+
+export function numbersWithinMaxDiff(a: number, b: number, maxDiff: number): boolean {
+  return Math.abs(a - b) <= maxDiff;
+}

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

@@ -33,6 +33,7 @@ import {AggFunc, getAgg} from '../utils/agg';
 import {buildCompositionTable} from '../widgets/composition-analysis-widget';
 
 import {_package, getMonomerLibHelper} from '../package';
+import {numbersWithinMaxDiff} from './utils';
 
 declare global {
   interface HTMLCanvasElement {
@@ -207,11 +208,11 @@ export class PositionInfo {
 
   render(g: CanvasRenderingContext2D,
     fontStyle: string, uppercaseLetterAscent: number, uppercaseLetterHeight: number,
-    biotype: HelmType, monomerLib: IMonomerLibBase | null
+    biotype: HelmType, monomerLib: IMonomerLibBase | null, maxMonomerLetters: number
   ) {
     for (const [monomer, pmInfo] of Object.entries(this._freqs)) {
       if (monomer !== GAP_SYMBOL) {
-        const monomerTxt = monomerToShort(monomer, 5);
+        const monomerTxt = monomerToShort(monomer, maxMonomerLetters);
         const b = pmInfo.bounds!;
         const left = b.left;
 
@@ -285,6 +286,7 @@ export enum PROPS {
   fitArea = 'fitArea',
   minHeight = 'minHeight',
   maxHeight = 'maxHeight',
+  maxMonomerLetters = 'maxMonomerLetters',
   showPositionLabels = 'showPositionLabels',
   positionMarginState = 'positionMarginState',
   positionMargin = 'positionMargin',
@@ -347,7 +349,8 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
 
   public minHeight: number;
   public backgroundColor: number = 0xFFFFFFFF;
-  public maxHeight: number;
+  public maxHeight: number | null;
+  public maxMonomerLetters: number;
   public showPositionLabels: boolean;
   public positionMarginState: PositionMarginStates;
   /** Gets value from properties or setOptions */ public positionMargin: number = 0;
@@ -399,32 +402,32 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
 
     // -- Data --
     this.sequenceColumnName = this.string(PROPS.sequenceColumnName, defaults.sequenceColumnName,
-      {category: PROPS_CATS.DATA, semType: DG.SEMTYPE.MACROMOLECULE});
+      {category: PROPS_CATS.DATA, semType: DG.SEMTYPE.MACROMOLECULE, description: 'Column with sequences'});
     const aggExcludeList = [DG.AGG.KEY, DG.AGG.PIVOT, DG.AGG.MISSING_VALUE_COUNT, DG.AGG.SKEW, DG.AGG.KURT,
       DG.AGG.SELECTED_ROWS_COUNT];
     const aggChoices = Object.values(DG.AGG).filter((agg) => !aggExcludeList.includes(agg));
-    this.valueAggrType = this.string(PROPS.valueAggrType, defaults.valueAggrType,
-      {category: PROPS_CATS.DATA, choices: aggChoices}) as DG.AggregationType;
     this.valueColumnName = this.string(PROPS.valueColumnName, defaults.valueColumnName,
-      {category: PROPS_CATS.DATA, columnTypeFilter: 'numerical'});
+      {category: PROPS_CATS.DATA, columnTypeFilter: 'numerical', description: 'Column with values used in aggregation for position heights'});
+    this.valueAggrType = this.string(PROPS.valueAggrType, defaults.valueAggrType,
+      {category: PROPS_CATS.DATA, choices: aggChoices, description: 'Aggregation method for value column'}) as DG.AggregationType;
     this.startPositionName = this.string(PROPS.startPositionName, defaults.startPositionName,
-      {category: PROPS_CATS.DATA});
+      {category: PROPS_CATS.DATA, description: 'Position or column name for start position. If column with given name is found, its values will be used as start position. If number is supplied, it will be used as start position of WebLogo.'});
     this.endPositionName = this.string(PROPS.endPositionName, defaults.endPositionName,
-      {category: PROPS_CATS.DATA});
+      {category: PROPS_CATS.DATA, description: 'Position or column name for end position. If column with given name is found, its values will be used as end position. If number is supplied, it will be used as end position of WebLogo.'});
     this.skipEmptySequences = this.bool(PROPS.skipEmptySequences, defaults.skipEmptySequences,
-      {category: PROPS_CATS.DATA});
+      {category: PROPS_CATS.DATA, description: 'Skip sequences which are empty in all positions'});
     this.skipEmptyPositions = this.bool(PROPS.skipEmptyPositions, defaults.skipEmptyPositions,
-      {category: PROPS_CATS.DATA});
+      {category: PROPS_CATS.DATA, description: 'Skip positions which are empty in all sequences'});
     this.shrinkEmptyTail = this.bool(PROPS.shrinkEmptyTail, defaults.shrinkEmptyTail,
-      {category: PROPS_CATS.DATA});
+      {category: PROPS_CATS.DATA, description: 'Skip empty tail (if found for all sequences within a subset) in WebLogo'});
 
     // -- Style --
     this.backgroundColor = this.int(PROPS.backgroundColor, defaults.backgroundColor,
-      {category: PROPS_CATS.STYLE});
+      {category: PROPS_CATS.STYLE, description: 'Background color of WebLogo canvas'});
     this.positionHeight = this.string(PROPS.positionHeight, defaults.positionHeight,
-      {category: PROPS_CATS.STYLE, choices: Object.values(PositionHeight)}) as PositionHeight;
+      {category: PROPS_CATS.STYLE, choices: Object.values(PositionHeight), description: 'Monomer-Position height mode. Entropy of 100%(full height)'}) as PositionHeight;
     this._positionWidth = this.positionWidth = this.float(PROPS.positionWidth, defaults.positionWidth,
-      {category: PROPS_CATS.STYLE/* editor: 'slider', min: 4, max: 64, postfix: 'px' */});
+      {category: PROPS_CATS.LAYOUT, editor: 'slider', min: 4, max: 100, description: 'Width of position in WebLogo. If "Fit Area" is enabled, width will be calculated to fit horizontal space'});
 
     // -- Layout --
     this.verticalAlignment = this.string(PROPS.verticalAlignment, defaults.verticalAlignment,
@@ -434,23 +437,25 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     this.fixWidth = this.bool(PROPS.fixWidth, defaults.fixWidth,
       {category: PROPS_CATS.LAYOUT, userEditable: false});
     this.fitArea = this.bool(PROPS.fitArea, defaults.fitArea,
-      {category: PROPS_CATS.LAYOUT});
-    this.minHeight = this.float(PROPS.minHeight, defaults.minHeight,
-      {category: PROPS_CATS.LAYOUT/*, editor: 'slider', min: 25, max: 250, postfix: 'px'*/});
-    this.maxHeight = this.float(PROPS.maxHeight, defaults.maxHeight,
-      {category: PROPS_CATS.LAYOUT/*, editor: 'slider', min: 25, max: 500, postfix: 'px'*/});
+      {category: PROPS_CATS.LAYOUT, description: 'Fit WebLogo to the horizontal space. Calculates position width as maximum between provided width value and value needed to fit whole horizontal space.'});
+    this.minHeight = this.int(PROPS.minHeight, defaults.minHeight,
+      {category: PROPS_CATS.LAYOUT, editor: 'slider', min: 10, max: 250, description: 'Minimum height of WebLogo'});
+    this.maxHeight = this.int(PROPS.maxHeight, defaults.maxHeight,
+      {category: PROPS_CATS.LAYOUT, editor: 'slider', min: 25, max: Math.max(window.innerHeight ?? 0, 1000), nullable: true, description: 'Maximum height of WebLogo'});
+    this.maxMonomerLetters = this.int(PROPS.maxMonomerLetters, defaults.maxMonomerLetters,
+      {category: PROPS_CATS.LAYOUT, editor: 'slider', min: 1, max: 40, description: 'Maximum monomer letters to display before shortening'});
     this.showPositionLabels = this.bool(PROPS.showPositionLabels, defaults.showPositionLabels,
-      {category: PROPS_CATS.LAYOUT});
+      {category: PROPS_CATS.LAYOUT, description: 'Show position labels on top of the weblogo'});
     this.positionMarginState = this.string(PROPS.positionMarginState, defaults.positionMarginState,
-      {category: PROPS_CATS.LAYOUT, choices: Object.values(PositionMarginStates)}) as PositionMarginStates;
+      {category: PROPS_CATS.LAYOUT, choices: Object.values(PositionMarginStates), description: 'Calculate optimal margins between positions or turn it on/off'}) as PositionMarginStates;
     let defaultValueForPositionMargin = 0;
     if (this.positionMarginState === 'auto') defaultValueForPositionMargin = 4;
     this.positionMargin = this.int(PROPS.positionMargin, defaultValueForPositionMargin,
-      {category: PROPS_CATS.LAYOUT, min: 0, max: 16});
+      {category: PROPS_CATS.LAYOUT, min: 0, max: 25, description: 'Margin between positions in WebLogo'});
 
     // -- Behavior --
     this.filterSource = this.string(PROPS.filterSource, defaults.filterSource,
-      {category: PROPS_CATS.BEHAVIOR, choices: Object.values(FilterSources)}) as FilterSources;
+      {category: PROPS_CATS.BEHAVIOR, choices: Object.values(FilterSources), description: 'Data source for weblogo. Selected or filtered rows.'}) as FilterSources;
 
     const style: DG.SliderOptions = {style: 'barbell'};
     this.slider = ui.rangeSlider(0, 100, 0, 20, false, style);
@@ -673,15 +678,15 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
 
     if (this.fixWidth)
       this.calcLayoutFixWidth(dpr);
-    else if (this.fitArea)
-      this.calcLayoutFitArea(dpr);
+    // else if (this.fitArea)
+    //   this.calcLayoutFitArea(dpr);
     else
       this.calcLayoutNoFitArea(dpr);
 
     this.slider.root.style.width = `${this.host.clientWidth}px`;
   }
 
-  /** */
+  /** Only used from outside, useful for embedding weblogo into a viewer or smth else*/
   private calcLayoutFixWidth(dpr: number): void {
     if (!this.host || !this.canvas || !this.slider) return; // for es-lint
 
@@ -689,7 +694,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     this.canvas.classList.add('bio-wl-fitArea');
 
     const areaWidth: number = this._positionWidthWithMargin * this.Length;
-    const areaHeight: number = Math.min(Math.max(this.minHeight, this.root.clientHeight), this.maxHeight);
+    const areaHeight: number = Math.min(Math.max(this.minHeight, this.root.clientHeight), this.maxHeight ?? this.root.clientHeight);
 
     this.host.style.justifyContent = HorizontalAlignments.LEFT;
     this.host.style.removeProperty('margin-left');
@@ -712,15 +717,21 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   private calcLayoutNoFitArea(dpr: number): void {
     if (!this.host || !this.canvas || !this.slider) return; // for es-lint
 
-    const areaWidth: number = this._positionWidthWithMargin * this.Length;
-    const areaHeight: number = Math.min(Math.max(this.minHeight, this.root.clientHeight), this.maxHeight);
+    let areaWidth: number = this._positionWidthWithMargin * this.Length;
+    let width = Math.min(this.root.clientWidth, areaWidth);
+    if (this.fitArea && areaWidth < this.root.clientWidth) { // if weblogo has some space to grow
+      this._positionWidth = Math.floor(this._positionWidth * this.root.clientWidth / areaWidth);
+      this._positionWidthWithMargin = this._positionWidth + this.positionMarginValue;
+      areaWidth = this._positionWidthWithMargin * this.Length;
+      width = Math.min(this.root.clientWidth, areaWidth);
+    }
+    const areaHeight: number = Math.min(Math.max(this.minHeight, this.root.clientHeight), this.maxHeight ?? this.root.clientHeight);
 
     const height = areaHeight;
-    const width = Math.min(this.root.clientWidth, areaWidth);
 
     this.canvas.style.width = `${width}px`;
     this.canvas.style.height = `${height}px`;
-    this.host.style.width = `${width}px`;
+    this.host.style.width = `${this.root.clientWidth}px`;
     this.host.style.height = `${this.root.clientHeight}px`;
 
     // host style flex-direction: row;
@@ -733,10 +744,10 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
 
     if (this.root.clientHeight < this.minHeight) {
       this.host.style.alignContent = 'start'; /* For vertical scroller to work properly */
-      this.host.style.width = `${width + 6}px`; /* */
+      this.host.style.width = `${width + 8}px`; /* */
     }
 
-    this.host.style.width = `${this.host}px`;
+    //this.host.style.width = `${this.host}px`;
 
     const sliderVisibility = areaWidth > width;
     this.setSliderVisibility(sliderVisibility);
@@ -744,30 +755,32 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       this.slider.root.style.removeProperty('display');
       this.host.style.justifyContent = 'left'; /* For horizontal scroller to prevent */
       this.host.style.height = `${this.root.clientHeight - this.slider.root.offsetHeight}px`;
+      this.canvas.style.height = `${height - this.slider.root.offsetHeight}px`;
       this.slider.root.style.top = `${this.host.offsetHeight}px`;
 
       let newMin = Math.min(Math.max(0, this.slider.min), this.Length - 0.001);
       let newMax = Math.min(Math.max(0, this.slider.max), this.Length - 0.001);
 
-      const visibleLength = this.root.clientWidth / this._positionWidthWithMargin;
+      const visibleLength = this.canvas.clientWidth / this._positionWidthWithMargin;
       newMax = Math.min(Math.max(newMin, 0) + visibleLength, this.Length - 0.001);
       newMin = Math.max(0, Math.min(newMax, this.Length - 0.001) - visibleLength);
 
-      this.slider.setValues(0, Math.max(this.Length - 0.001), newMin, newMax);
+      this.safeUpdateSlider(0, Math.max(this.Length - 0.001), newMin, newMax);
     } else {
       //
-      this.slider.setValues(0, Math.max(0, this.Length - 0.001), 0, Math.max(0, this.Length - 0.001));
+      this.safeUpdateSlider(0, Math.max(0, this.Length - 0.001), 0, Math.max(0, this.Length - 0.001));
     }
 
     this.canvas.width = width * dpr;
     this.canvas.height = height * dpr;
   }
 
+  /** Deprecated and currently not in use. */
   private calcLayoutFitArea(dpr: number): void {
     if (!this.host || !this.canvas || !this.slider) return; // for es-lint
 
     const originalAreaWidthWoMargins: number = this._positionWidth * this.Length;
-    const originalAreaHeight: number = Math.min(Math.max(this.minHeight, this.root.clientHeight), this.maxHeight);
+    const originalAreaHeight: number = Math.min(Math.max(this.minHeight, this.root.clientHeight), this.maxHeight ?? this.root.clientHeight);
 
     // TODO: scale
     const xScale = originalAreaWidthWoMargins > 0 ?
@@ -819,16 +832,25 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       newMax = Math.min(Math.max(newMin, 0) + visibleLength, this.Length - 0.001);
       newMin = Math.max(0, Math.min(newMax, this.Length - 0.001) - visibleLength);
 
-      this.slider.setValues(0, Math.max(0, this.Length - 0.001), newMin, newMax);
+      this.safeUpdateSlider(0, Math.max(0, this.Length - 0.001), newMin, newMax);
     } else {
       //
-      this.slider.setValues(0, Math.max(0, this.Length - 0.001), 0, Math.max(0, this.Length - 0.001));
+      this.safeUpdateSlider(0, Math.max(0, this.Length - 0.001), 0, Math.max(0, this.Length - 0.001));
     }
 
     this.canvas.width = width * dpr;
     this.canvas.height = height * dpr;
   }
 
+  /** makes sure that slider actually needs to be updated before updating it. if values are same, no update */
+  private safeUpdateSlider(minRange: number, maxRange: number, min: number, max: number): void {
+    if (!numbersWithinMaxDiff(minRange, this.slider.minRange, 0.1) ||
+      !numbersWithinMaxDiff(maxRange, this.slider.maxRange, 0.1) ||
+      !numbersWithinMaxDiff(min, this.slider.min, 0.1) ||
+      !numbersWithinMaxDiff(max, this.slider.max, 0.1))
+      this.slider.setValues(minRange, maxRange, min, max);
+  }
+
 
   /** Handler of property change events.
    * @param {DG.Property} property - property which was changed.
@@ -857,6 +879,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     }
     case PROPS.minHeight:
     case PROPS.maxHeight:
+    case PROPS.maxMonomerLetters:
     case PROPS.positionWidth:
     case PROPS.showPositionLabels:
     case PROPS.fixWidth:
@@ -1147,7 +1170,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       const uppercaseLetterHeight = 12.2;
       const biotype = this.seqHandler!.defaultBiotype;
       for (let jPos = firstPos; jPos <= lastPos; jPos++)
-        this.positions[jPos].render(g, fontStyle, uppercaseLetterAscent, uppercaseLetterHeight, biotype, this.monomerLib);
+        this.positions[jPos].render(g, fontStyle, uppercaseLetterAscent, uppercaseLetterHeight, biotype, this.monomerLib, this.maxMonomerLetters);
     } finally {
       g.restore();
     }
@@ -1186,9 +1209,18 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
         min: this.slider.min, max: this.slider.max,
         maxRange: this.slider.maxRange
       };
-      _package.logger.debug(
-        `${this.toLog()}.sliderOnValuesChanged( ${JSON.stringify(val)} ), start`);
-      this.render(WlRenderLevel.Layout, 'sliderOnValuesChanged');
+      // _package.logger.debug(
+      //   `${this.toLog()}.sliderOnValuesChanged( ${JSON.stringify(val)} ), start`);
+      // this.render(WlRenderLevel.Layout, 'sliderOnValuesChanged');
+      if (this.canvas && this.canvas.offsetWidth > 0 && (this._positionWidthWithMargin ?? 0) > 0) {
+        const newRange = val.max - val.min;
+        const newPositionWidth = this.canvas.offsetWidth / newRange - this.positionMarginValue;
+        // if the range was changed on the slider
+        if (!numbersWithinMaxDiff(newPositionWidth, this.positionWidth, 0.1))
+          this.getProperty(PROPS.positionWidth)?.set(this, newPositionWidth);
+        else // if range was not changed, but slider was moved
+          this.render(WlRenderLevel.Layout, 'sliderOnValuesChanged');
+      }
     } catch (err: any) {
       const errMsg = errorToConsole(err);
       _package.logger.error(`${this.toLog()}.sliderOnValuesChanged() error:\n` + errMsg);
@@ -1239,6 +1271,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
           tooltipRows.push(pi.buildCompositionTable(biotype, this.monomerLib));
         }
         const tooltipEl = ui.divV(tooltipRows);
+        tooltipEl.style.maxHeight = '80vh';
         ui.tooltip.show(tooltipEl, args.x + 16, args.y + 16);
       } else if (pi !== null && monomer && this.dataFrame && this.seqCol && this.seqHandler) {
         // Monomer at position tooltip