@datagrok/bio 2.4.54 → 2.5.0

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.4.54",
+  "version": "2.5.0",
   "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",
@@ -22,7 +22,7 @@
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.32.10",
+    "@datagrok-libraries/bio": "^5.33.0",
     "@datagrok-libraries/chem-meta": "^1.0.1",
     "@datagrok-libraries/ml": "^6.3.39",
     "@datagrok-libraries/tutorials": "^1.3.2",
@@ -46,7 +46,7 @@
     "eslint-config-google": "latest",
     "source-map-loader": "^4.0.1",
     "ts-loader": "^9.2.5",
-    "typescript": "^5.0.4",
+    "typescript": "^4.8.4",
     "webpack": "^5.76.0",
     "webpack-bundle-analyzer": "latest",
     "webpack-cli": "^4.6.0",

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

@@ -3,7 +3,7 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import wu from 'wu';
-import {fromEvent, Unsubscribable} from 'rxjs';
+import {fromEvent, Observable, Subject, Unsubscribable} from 'rxjs';
 
 import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
@@ -16,6 +16,7 @@ import {
 import {
   FilterSources,
   HorizontalAlignments,
+  IWebLogoViewer,
   PositionHeight,
   PositionMarginStates,
   positionSeparator,
@@ -67,6 +68,9 @@ export class PositionInfo {
   /** Position name from column tag*/
   public readonly name: string;
 
+  private readonly _label: string | undefined;
+  public get label(): string { return !!this._label ? this._label : this.name; }
+
   private readonly _freqs: { [m: string]: PositionMonomerInfo };
 
   rowCount: number;
@@ -79,14 +83,16 @@ export class PositionInfo {
    * @param {number} rowCount Count of elements in column
    * @param {number} sumForHeightCalc Sum of all monomer counts for height calculation
    */
-  constructor(pos: number, name: string,
-    freqs: { [m: string]: PositionMonomerInfo } = {}, rowCount: number = 0, sumForHeightCalc: number = 0,
+  constructor(pos: number, name: string, freqs?: { [m: string]: PositionMonomerInfo },
+    options?: { rowCount?: number, sumForHeightCalc?: number, label?: string }
   ) {
     this.pos = pos;
     this.name = name;
-    this._freqs = freqs;
-    this.rowCount = rowCount;
-    this.sumForHeightCalc = sumForHeightCalc;
+    this._freqs = freqs ?? {};
+
+    if (options?.rowCount) this.rowCount = options.rowCount;
+    if (options?.sumForHeightCalc) this.sumForHeightCalc = options.sumForHeightCalc;
+    if (options?.label) this._label = options.label;
   }
 
   public getMonomers(): string[] {
@@ -277,7 +283,7 @@ enum RecalcLevel {
   Freqs = 2,
 }
 
-export class WebLogoViewer extends DG.JsViewer {
+export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   public static residuesSet = 'nucleotides';
   private static viewerCount: number = -1;
 
@@ -319,13 +325,13 @@ export class WebLogoViewer extends DG.JsViewer {
   public minHeight: number;
   public backgroundColor: number = 0xFFFFFFFF;
   public maxHeight: number;
-  public positionMarginState: string;
+  public positionMarginState: PositionMarginStates;
   public positionMargin: number = 0;
   public startPositionName: string | null;
   public endPositionName: string | null;
   public fixWidth: boolean;
-  public verticalAlignment: string | null;
-  public horizontalAlignment: string | null;
+  public verticalAlignment: VerticalAlignments;
+  public horizontalAlignment: HorizontalAlignments;
   public fitArea: boolean;
   public shrinkEmptyTail: boolean;
   public positionHeight: string;
@@ -334,6 +340,7 @@ export class WebLogoViewer extends DG.JsViewer {
   public filterSource: FilterSources;
 
   private positionNames: string[] = [];
+  private positionLabels: string[] | undefined = undefined;
   private startPosition: number = -1;
   private endPosition: number = -1;
 
@@ -353,7 +360,7 @@ export class WebLogoViewer extends DG.JsViewer {
   }
 
   /** For startPosition equals to endPosition Length is 1 */
-  private get Length(): number {
+  public get Length(): number {
     if (this.skipEmptyPositions)
       return this.positions.length;
 
@@ -366,13 +373,13 @@ export class WebLogoViewer extends DG.JsViewer {
   }
 
   private get positionMarginValue() {
-    if ((this.positionMarginState === 'auto') && (this.unitsHandler?.getAlphabetIsMultichar() === true))
-      return this.positionMargin;
+    if (this.positionMarginState === PositionMarginStates.AUTO &&
+      this.unitsHandler?.getAlphabetIsMultichar() === true
+    ) return this.positionMargin;
 
-    if (this.positionMarginState === 'enable')
+    if (this.positionMarginState === PositionMarginStates.ON)
       return this.positionMargin;
 
-
     return 0;
   }
 
@@ -431,9 +438,9 @@ export class WebLogoViewer extends DG.JsViewer {
 
     // -- Layout --
     this.verticalAlignment = this.string(PROPS.verticalAlignment, defaults.verticalAlignment,
-      {category: PROPS_CATS.LAYOUT, choices: Object.values(VerticalAlignments)});
+      {category: PROPS_CATS.LAYOUT, choices: Object.values(VerticalAlignments)}) as VerticalAlignments;
     this.horizontalAlignment = this.string(PROPS.horizontalAlignment, defaults.horizontalAlignment,
-      {category: PROPS_CATS.LAYOUT, choices: Object.values(HorizontalAlignments)});
+      {category: PROPS_CATS.LAYOUT, choices: Object.values(HorizontalAlignments)}) as HorizontalAlignments;
     this.fixWidth = this.bool(PROPS.fixWidth, defaults.fixWidth,
       {category: PROPS_CATS.LAYOUT});
     this.fitArea = this.bool(PROPS.fitArea, defaults.fitArea,
@@ -443,7 +450,7 @@ export class WebLogoViewer extends DG.JsViewer {
     this.maxHeight = this.float(PROPS.maxHeight, defaults.maxHeight,
       {category: PROPS_CATS.LAYOUT/*, editor: 'slider', min: 25, max: 500, postfix: 'px'*/});
     this.positionMarginState = this.string(PROPS.positionMarginState, defaults.positionMarginState,
-      {category: PROPS_CATS.LAYOUT, choices: Object.values(PositionMarginStates)});
+      {category: PROPS_CATS.LAYOUT, choices: Object.values(PositionMarginStates)}) as PositionMarginStates;
     let defaultValueForPositionMargin = 0;
     if (this.positionMarginState === 'auto') defaultValueForPositionMargin = 4;
     this.positionMargin = this.int(PROPS.positionMargin, defaultValueForPositionMargin,
@@ -584,6 +591,7 @@ export class WebLogoViewer extends DG.JsViewer {
         if (!this.seqCol) {
           this.unitsHandler = null;
           this.positionNames = [];
+          this.positionLabels = [];
           this.startPosition = -1;
           this.endPosition = -1;
           this.cp = null;
@@ -601,11 +609,13 @@ export class WebLogoViewer extends DG.JsViewer {
     const maxLength = wu(this.unitsHandler!.splitted).map((mList) => mList ? mList.length : 0)
       .reduce((max, l) => Math.max(max, l), 0);
 
-    // Get position names from data column tag 'positionNames'
+    /** positionNames and positionLabel can be set up through the column's tags only */
     const positionNamesTxt = this.seqCol.getTag(wlTAGS.positionNames);
-    // Fallback if 'positionNames' tag is not provided
-    this.positionNames = positionNamesTxt ? positionNamesTxt.split(positionSeparator).map((n) => n.trim()) :
-      [...Array(maxLength).keys()].map((jPos) => `${jPos + 1}`);
+    const positionLabelsTxt = this.seqCol.getTag(wlTAGS.positionLabels);
+    this.positionNames = !!positionNamesTxt ? positionNamesTxt.split(positionSeparator).map((v) => v.trim()) :
+      [...Array(maxLength).keys()].map((jPos) => `${jPos + 1}`)/* fallback if tag is not provided */;
+    this.positionLabels = !!positionLabelsTxt ? positionLabelsTxt.split(positionSeparator).map((v) => v.trim()) :
+      undefined;
 
     this.startPosition = (this.startPositionName && this.positionNames &&
       this.positionNames.includes(this.startPositionName)) ?
@@ -735,6 +745,10 @@ export class WebLogoViewer extends DG.JsViewer {
     }
   }
 
+  private _onSizeChanged: Subject<void> = new Subject<void>();
+
+  public get onSizeChanged(): Observable<void> { return this._onSizeChanged; }
+
   // -- Routines --
 
   getMonomer(p: DG.Point): [number, string | null, PositionMonomerInfo | null] {
@@ -804,7 +818,9 @@ export class WebLogoViewer extends DG.JsViewer {
       this.positions = new Array(posCount);
       for (let jPos = 0; jPos < length; jPos++) {
         const posName: string = this.positionNames[this.startPosition + jPos];
-        this.positions[jPos] = new PositionInfo(this.startPosition + jPos, posName);
+        const posLabel: string | undefined = this.positionLabels ?
+          this.positionLabels[this.startPosition + jPos] : undefined;
+        this.positions[jPos] = new PositionInfo(this.startPosition + jPos, posName, {}, {label: posLabel});
       }
 
       // 2022-05-05 askalkin instructed to show WebLogo based on filter (not selection)
@@ -900,7 +916,7 @@ export class WebLogoViewer extends DG.JsViewer {
           hScale, 0, 0, 1,
           jPos * this.positionWidthWithMargin + this._positionWidth / 2 -
           this.positionWidthWithMargin * firstVisibleIndex, 0);
-        g.fillText(pos.name, 0, 0);
+        g.fillText(pos.label, 0, 0);
       }
       //#endregion Plot positionNames
       const fontStyle = '16px Roboto, Roboto Local, sans-serif';
@@ -1021,6 +1037,7 @@ export class WebLogoViewer extends DG.JsViewer {
         this.host.style.setProperty('overflow-y', 'hidden', 'important');
       }
     }
+    this._onSizeChanged.next();
   }
 
   public getAlphabetSize(): number {