@datagrok/bio 2.20.5 → 2.21.1

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.20.5",
+  "version": "2.21.1",
   "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,7 +44,7 @@
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.51.0",
+    "@datagrok-libraries/bio": "^5.51.1",
     "@datagrok-libraries/chem-meta": "^1.2.7",
     "@datagrok-libraries/math": "^1.2.4",
     "@datagrok-libraries/ml": "^6.10.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/cell-renderer.ts

@@ -31,6 +31,7 @@ import {CellRendererWithMonomerLibBackBase} from './monomer-cell-renderer-base';
 import * as C from './constants';
 
 import {_package} from '../package';
+import {SeqTemps} from '@datagrok-libraries/bio/src/utils/macromolecule/seq-handler';
 
 type TempType = { [tagName: string]: any };
 
@@ -221,7 +222,7 @@ export class MacromoleculeDifferenceCellRendererBack extends CellRendererWithMon
     w = getUpdatedWidth(grid, g, x, w, dpr);
     //TODO: can this be replaced/merged with splitSequence?
     const [s1, s2] = s.split('#');
-    const splitter = getSplitter(units, separator);
+    const splitter = this.tableCol.temp[SeqTemps.notationProvider]?.separatorSplitter ?? getSplitter(units, separator);
     const s1SS = splitter(s1);
     const s2SS = splitter(s2);
     const subParts1 = wu.count(0).take(s1SS.length).map((posIdx) => s1SS.getCanonical(posIdx)).toArray();

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/seq-helper/seq-handler.ts

@@ -54,7 +54,7 @@ export class SeqHandler implements ISeqHandler {
     const defaultGapOriginal = this.isFasta() ? GapOriginals[NOTATION.FASTA] :
       this.isSeparator() ? GapOriginals[NOTATION.SEPARATOR] :
         this.isHelm() ? GapOriginals[NOTATION.HELM] :
-          this.isCustom() ? this.notationProvider.defaultGapOriginal :
+          this.isCustom() ? (this.notationProvider?.defaultGapOriginal ?? GapOriginals[NOTATION.SEPARATOR]) :
             undefined;
     if (defaultGapOriginal == undefined)
       throw new Error(`Unexpected defaultGapOriginal for notation '${this.notation}'`);
@@ -97,6 +97,72 @@ export class SeqHandler implements ISeqHandler {
     }
 
     this.columnVersion = this.column.version;
+    // refine separator only at this stage
+    if (this.isSeparator() && (!this.isCustom() || !this.notationProvider) && !col.temp['seqHandlerRefined']) {
+      this.refineSeparatorNotation();
+      col.temp['seqHandlerRefined'] = true;
+    }
+  }
+
+  private async refineSeparatorNotation() {
+    // from detectors.
+    const SEQ_SAMPLE_LIMIT = 100; const SEQ_SAMPLE_LENGTH_LIMIT = 100;
+    const categoriesSample = [...new Set((this.column.length < SEQ_SAMPLE_LIMIT ?
+      wu.count(0).take(Math.min(SEQ_SAMPLE_LIMIT, this.column.length)).map((rowI) => this.column.get(rowI)) :
+      this.column.categories.slice(0, SEQ_SAMPLE_LIMIT))
+      .map((seq) => !!seq ? seq.substring(0, SEQ_SAMPLE_LENGTH_LIMIT * 5) : '')
+      .filter((seq) => seq.length !== 0/* skip empty values for detector */),
+    )];
+
+    const getStats = (values: string[], minLength: number, splitter: (s: string) => string[]) => {
+      const freq:{[key: string]: number} = {};
+      let sameLength = true;
+      let firstLength = null;
+
+      for (const seq of values) {
+        const mSeq = !!seq ? splitter(seq) : [];
+
+        if (firstLength === null)
+          firstLength = mSeq.length;
+        else if (mSeq.length !== firstLength)
+          sameLength = false;
+
+        if (mSeq.length >= minLength) {
+          for (const m of mSeq) {
+            if (!(m in freq)) freq[m] = 0;
+            freq[m] += 1;
+          }
+        }
+      }
+      return {freq: freq, sameLength: sameLength};
+    };
+
+    const stats = getStats(categoriesSample, 3, (s) => s.split(this.separator!));
+    let invalidateRequired = false;
+
+    const refinerList = [
+      {package: 'SequenceTranslator', name: 'refineNotationProviderForHarmonizedSequence'},
+    ];
+
+    for (const refineFuncFind of refinerList) {
+      try {
+        const funcList = DG.Func.find(refineFuncFind);
+        if (funcList.length === 0) continue;
+
+        const funcFc = funcList[0].prepare({col: this.column, stats: stats, separator: this.separator});
+        const refineRes = (await funcFc.call()).getOutputParamValue();
+        invalidateRequired ||= refineRes;
+      } catch (err) {
+        console.error(err);
+      }
+    }
+
+    if (invalidateRequired) {
+    // Applying custom notation provider MUST invalidate SeqHandler
+      delete this.column.temp[SeqTemps.seqHandler];
+
+      this.column.fireValuesChanged();
+    }
   }
 
   /** From detectMacromolecule */

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