@datagrok/bio 2.4.49 → 2.4.50

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.4.49",
+  "version": "2.4.50",
   "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",

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

@@ -1,13 +1,18 @@
 import * as ui from 'datagrok-api/ui';
+import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
-import * as rxjs from 'rxjs';
-import {WebLogoViewer, PROPS as wlPROPS} from '../viewers/web-logo-viewer';
-import {IVdRegionsViewer,
+import {fromEvent, Unsubscribable} from 'rxjs';
+
+import {
+  IVdRegionsViewer,
   VdRegion, VdRegionType,
 } from '@datagrok-libraries/bio/src/viewers/vd-regions';
-import {FilterSources, PositionHeight} from '@datagrok-libraries/bio/src/viewers/web-logo';
-import {Unsubscribable} from 'rxjs';
+import {FilterSources, IWebLogoViewer, PositionHeight} from '@datagrok-libraries/bio/src/viewers/web-logo';
+
+import {WebLogoViewer, PROPS as wlPROPS} from '../viewers/web-logo-viewer';
+
+import {_package} from '../package';
 
 const vrt = VdRegionType;
 
@@ -101,22 +106,29 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     // this.mlbView.dockManager.dock(this.regionsFg.root, DG.DOCK_TYPE.LEFT, rootNode, 'Filter regions', 0.2);
 
     this.subs.push(ui.onSizeChanged(this.root).subscribe(this.rootOnSizeChanged.bind(this)));
-    this.subs.push(rxjs.fromEvent<MouseEvent>(this.root, 'mousemove').subscribe(this.rootOnMouseMove.bind(this)));
+    this.subs.push(fromEvent<MouseEvent>(this.root, 'mousemove').subscribe(this.rootOnMouseMove.bind(this)));
 
     // await this.buildView('init'); // init
   }
 
-  public override async onTableAttached() {
-    const superOnTableAttached = super.onTableAttached.bind(this);
-    this.viewPromise = this.viewPromise.then(async () => { // onTableAttached
-      superOnTableAttached();
-      if (!this.viewed) {
-        await this.buildView('onTableAttached'); // onTableAttached
-        this.viewed = true;
+  override detach() {
+    if (this.setDataInProgress) return;
+    const superDetach = super.detach.bind(this);
+    this.detachPromise = this.detachPromise.then(async () => { // detach
+      await this.viewPromise;
+      if (this.viewed) {
+        await this.destroyView('detach');
+        this.viewed = false;
       }
+      superDetach();
     });
   }
 
+  override onTableAttached() {
+    super.onTableAttached();
+    this.setData(this.dataFrame, this.regions);
+  }
+
   public override onPropertyChanged(property: DG.Property | null): void {
     super.onPropertyChanged(property);
 
@@ -156,39 +168,41 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
 
   // TODO: .onTableAttached is not calling on dataFrame set, onPropertyChanged  also not calling
   public setData(mlbDf: DG.DataFrame, regions: VdRegion[]) {
-    console.debug('Bio: VdRegionsViewer.setData()');
+    if (!this.setDataInProgress) this.setDataInProgress = true; else return;
+    _package.logger.debug('Bio: VdRegionsViewer.setData()');
+
     this.viewPromise = this.viewPromise.then(async () => { // setData
       if (this.viewed) {
-        await this.destroyView('setData'); // setData
+        await this.destroyView('setData');
         this.viewed = false;
       }
-    });
-
-    this.regions = regions;
-    this.dataFrame = mlbDf; // causes detach and onTableAttached
-
-    this.viewPromise = this.viewPromise.then(async () => { // setData
+    }).then(async () => {
+      await this.detachPromise;
+      // Wait whether this.dataFrame assigning has called detach() before continue set data and build view
+
+      // -- Data --
+      this.regions = regions;
+      if (this.dataFrame.dart !== mlbDf.dart) this.dataFrame = mlbDf; // causes detach and onTableAttached
+    }).then(async () => {
       if (!this.viewed) {
-        await this.buildView('setData'); // setData
+        await this.buildView('setData');
         this.viewed = true;
       }
-    });
-  }
-
-  override detach() {
-    const superDetach = super.detach.bind(this);
-    this.viewPromise = this.viewPromise.then(async () => { // detach
-      if (this.viewed) {
-        await this.destroyView('detach'); // detach
-        this.viewed = false;
-      }
-      superDetach();
+    }).catch((err: any) => {
+      const errMsg = err instanceof Error ? err.message : err.toString();
+      const stack = err instanceof Error ? err.stack : undefined;
+      grok.shell.error(errMsg);
+      _package.logger.error(errMsg, undefined, stack);
+    }).finally(() => {
+      this.setDataInProgress = false;
     });
   }
 
   // -- View --
 
   private viewPromise: Promise<void> = Promise.resolve();
+  private detachPromise: Promise<void> = Promise.resolve();
+  private setDataInProgress: boolean = false;
 
   private host: HTMLElement | null = null;
   private filterSourceInput: DG.InputBase<boolean | null> | null = null;
@@ -223,25 +237,32 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     const regionsFiltered: VdRegion[] = this.regions.filter((r: VdRegion) => this.regionTypes.includes(r.type));
     const orderList: number[] = Array.from(new Set(regionsFiltered.map((r) => r.order))).sort();
 
-    this.logos = [];
+    const logoPromiseList: Promise<[number, string, WebLogoViewer]>[] = [];
     for (let orderI = 0; orderI < orderList.length; orderI++) {
-      const regionChains: { [chain: string]: WebLogoViewer } = {};
       for (const chain of this.chains) {
         const region: VdRegion | undefined = regionsFiltered
           .find((r) => r.order == orderList[orderI] && r.chain == chain);
-        regionChains[chain] = (await this.dataFrame.plot.fromType('WebLogo', {
-          sequenceColumnName: region!.sequenceColumnName,
-          startPositionName: region!.positionStartName,
-          endPositionName: region!.positionEndName,
-          fixWidth: true,
-          skipEmptyPositions: this.skipEmptyPositions,
-          positionWidth: this.positionWidth,
-          positionHeight: this.positionHeight,
-        })) as unknown as WebLogoViewer;
+        logoPromiseList.push((async () => {
+          const wl: WebLogoViewer = await this.dataFrame.plot.fromType('WebLogo', {
+            sequenceColumnName: region!.sequenceColumnName,
+            startPositionName: region!.positionStartName,
+            endPositionName: region!.positionEndName,
+            fixWidth: true,
+            skipEmptyPositions: this.skipEmptyPositions,
+            positionWidth: this.positionWidth,
+            positionHeight: this.positionHeight,
+          }) as WebLogoViewer;
+          return [orderI, chain, wl];
+        })());
       }
-      // WebLogo creation fires onRootSizeChanged event even before control being added to this.logos
-      this.logos[orderI] = regionChains;
     }
+    const logoList: [number, string, WebLogoViewer][] = await Promise.all(logoPromiseList);
+    // Fill in this.logos with created viewers
+    this.logos = new Array(orderList.length);
+    for (let orderI = 0; orderI < orderList.length; ++orderI)
+      this.logos[orderI] = {};
+    for (const [orderI, chain, wl] of logoList)
+      this.logos[orderI][chain] = wl;
 
     // ui.tableFromMap()
     // DG.HtmlTable.create()

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

@@ -5,24 +5,27 @@ import * as DG from 'datagrok-api/dg';
 import wu from 'wu';
 import {fromEvent, Unsubscribable} from 'rxjs';
 
-import {SliderOptions} from 'datagrok-api/dg';
 import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 import {SeqPalette} from '@datagrok-libraries/bio/src/seq-palettes';
 import {
-  getSplitter, monomerToShort, pickUpPalette, pickUpSeqCol, SplitterFunc,
+  monomerToShort,
+  pickUpPalette,
+  pickUpSeqCol,
   TAGS as bioTAGS,
 } from '@datagrok-libraries/bio/src/utils/macromolecule';
 import {
-  WebLogoPropsDefault, WebLogoProps,
+  FilterSources,
+  HorizontalAlignments,
   PositionHeight,
+  PositionMarginStates,
   positionSeparator,
+  TAGS as wlTAGS,
   VerticalAlignments,
-  HorizontalAlignments,
-  PositionMarginStates,
-  FilterSources,
+  WebLogoProps,
+  WebLogoPropsDefault,
 } from '@datagrok-libraries/bio/src/viewers/web-logo';
 import {errorToConsole} from '@datagrok-libraries/utils/src/to-console';
-import {TAGS as wlTAGS} from '@datagrok-libraries/bio/src/viewers/web-logo';
+
 import {_package} from '../package';
 
 declare global {
@@ -450,7 +453,7 @@ export class WebLogoViewer extends DG.JsViewer {
     this.filterSource = this.string(PROPS.filterSource, defaults.filterSource,
       {category: PROPS_CATS.BEHAVIOR, choices: Object.values(FilterSources)}) as FilterSources;
 
-    const style: SliderOptions = {style: 'barbell'};
+    const style: DG.SliderOptions = {style: 'barbell'};
     this.slider = ui.rangeSlider(0, 100, 0, 20, false, style);
     this.canvas = ui.canvas();
     this.canvas.style.width = '100%';
@@ -576,7 +579,7 @@ export class WebLogoViewer extends DG.JsViewer {
         } catch (err: any) {
           this.seqCol = null;
           this.error = err instanceof Error ? err : new Error(err.toString());
-          _package.logger.error(this.error.message, undefined, this.error.stack);
+          throw err;
         }
         if (!this.seqCol) {
           this.unitsHandler = null;
@@ -700,7 +703,18 @@ export class WebLogoViewer extends DG.JsViewer {
         break;
     }
 
-    this.render(RecalcLevel.Freqs, 'onPropertyChanged');
+    switch (property.name) {
+      case PROPS.fixWidth:
+      case PROPS.fitArea:
+      case PROPS.positionWidth:
+      case PROPS.positionMargin:
+        this.render(RecalcLevel.Layout, 'onPropertyChanged');
+        break;
+
+      default:
+        this.render(RecalcLevel.Freqs, 'onPropertyChanged');
+        break;
+    }
   }
 
   /** Add filter handlers when table is a attached  */
@@ -751,7 +765,7 @@ export class WebLogoViewer extends DG.JsViewer {
 
   /** Helper function for remove empty positions */
   // TODO: use this function in from core
-  protected removeWhere(array: Array<any>, predicate: (T: any) => boolean): Array<any> {
+  protected removeWhere<T>(array: Array<T>, predicate: (item: T) => boolean): Array<any> {
     const length = array.length;
     let updateIterator = 0;
     for (let deleteIterator = 0; deleteIterator < length; deleteIterator++) {
@@ -767,7 +781,7 @@ export class WebLogoViewer extends DG.JsViewer {
   /** Function for removing empty positions */
   protected _removeEmptyPositions() {
     if (this.skipEmptyPositions)
-      this.removeWhere(this.positions, (item) => item?.freq['-']?.count === item.rowCount);
+      this.removeWhere(this.positions, (item) => item?.getFreq('-')?.count === item?.rowCount);
   }
 
   private renderRequested: boolean = false;
@@ -780,11 +794,11 @@ export class WebLogoViewer extends DG.JsViewer {
       `.render( recalcLevel=${recalcLevel}, reason='${reason}' )`);
 
     /** Calculate freqs of monomers */
-    const calculateFreqsInt = (length: number): void => {
+    const calculateFreqsInt = (): void => {
       _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.calculateFreqsInt(), start `);
-
       if (!this.host || !this.seqCol || !this.dataFrame) return;
 
+      const length: number = this.startPosition <= this.endPosition ? this.endPosition - this.startPosition + 1 : 0;
       this.unitsHandler = UnitsHandler.getOrCreate(this.seqCol);
       const posCount: number = this.startPosition <= this.endPosition ? this.endPosition - this.startPosition + 1 : 0;
       this.positions = new Array(posCount);
@@ -815,9 +829,10 @@ export class WebLogoViewer extends DG.JsViewer {
     };
 
     /** Calculate layout of monomers on screen (canvas) based on freqs, required to handle mouse events */
-    const calculateLayoutInt = (length: number, dpr: number): void => {
+    const calculateLayoutInt = (dpr: number): void => {
       _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.calculateLayoutInt(), start `);
 
+      const length = this.positions.length;
       this.calcSize();
       const absoluteMaxHeight = this.canvas.height - this.axisHeight * dpr;
       const alphabetSize = this.getAlphabetSize();
@@ -835,7 +850,8 @@ export class WebLogoViewer extends DG.JsViewer {
      *@param {boolean} recalcFreqs - indicates that need to recalculate data for rendering
      */
     const renderInt = (recalcLevel: RecalcLevel) => {
-      _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.renderInt( recalcLevel=${recalcLevel} ), start `);
+      _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.renderInt( recalcLevel=${recalcLevel} ), ` +
+        `start `);
       if (this.msgHost) {
         if (this.seqCol && !this.cp) {
           this.msgHost!.innerText = `Unknown palette (column semType: '${this.seqCol.semType}').`;
@@ -854,11 +870,11 @@ export class WebLogoViewer extends DG.JsViewer {
 
       this.slider.root.style.width = `${this.host.clientWidth}px`;
 
-      const length: number = this.Length;
       const dpr: number = window.devicePixelRatio;
-      if (recalcLevel >= RecalcLevel.Freqs) calculateFreqsInt(length);
-      if (recalcLevel >= RecalcLevel.Layout) calculateLayoutInt(length, window.devicePixelRatio);
+      if (recalcLevel >= RecalcLevel.Freqs) calculateFreqsInt();
+      if (recalcLevel >= RecalcLevel.Layout) calculateLayoutInt(window.devicePixelRatio);
 
+      const length: number = this.Length;
       g.resetTransform();
       g.fillStyle = DG.Color.toHtml(this.backgroundColor);
       g.fillRect(0, 0, this.canvas.width, this.canvas.height);
@@ -896,7 +912,7 @@ export class WebLogoViewer extends DG.JsViewer {
           this.positionWidthWithMargin, firstVisibleIndex, this.cp);
       }
 
-      _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.renderInt( recalcLevel=${recalcLevel} ), end `);
+      _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.renderInt( recalcLevel=${recalcLevel} ), end`);
     };
 
     this.recalcLevelRequested = Math.max(this.recalcLevelRequested, recalcLevel);
@@ -1039,7 +1055,8 @@ export class WebLogoViewer extends DG.JsViewer {
     _package.logger.debug('Bio: WebLogoViewer<${this.viewerId}>.dataFrameFilterChanged()');
     try {
       this.updatePositions();
-      this.render(RecalcLevel.Freqs, 'dataFrameFilterOnChanged');
+      if (this.filterSource === FilterSources.Filtered)
+        this.render(RecalcLevel.Freqs, 'dataFrameFilterOnChanged');
     } catch (err: any) {
       const errMsg = errorToConsole(err);
       _package.logger.error('Bio: WebLogoViewer<${this.viewerId}>.dataFrameFilterOnChanged() error:\n' + errMsg);
@@ -1050,7 +1067,8 @@ export class WebLogoViewer extends DG.JsViewer {
   private dataFrameSelectionOnChanged(_value: any): void {
     _package.logger.debug('Bio: WebLogoViewer<${this.viewerId}>.dataFrameSelectionOnChanged()');
     try {
-      this.render(RecalcLevel.Freqs, 'dataFrameSelectionOnChanged');
+      if (this.filterSource === FilterSources.Selected)
+        this.render(RecalcLevel.Freqs, 'dataFrameSelectionOnChanged');
     } catch (err: any) {
       const errMsg = errorToConsole(err);
       _package.logger.error('Bio: WebLogoViewer<${this.viewerId}>.dataFrameSelectionOnChanged() error:\n' + errMsg);
@@ -1132,10 +1150,6 @@ export class WebLogoViewer extends DG.JsViewer {
 export function checkSeqForMonomerAtPos(
   df: DG.DataFrame, unitsHandler: UnitsHandler, filter: DG.BitSet, rowI: number, monomer: string, at: PositionInfo,
 ): boolean {
-  // if (!filter.get(rowI)) return false;
-  // TODO: Use BitSet.get(idx)
-  if (!filter.getSelectedIndexes().includes(rowI)) return false;
-
   const seqMList: string[] = unitsHandler.splitted[rowI];
   const seqM = at.pos < seqMList.length ? seqMList[at.pos] : null;
   return ((seqM === monomer) || (seqM === '' && monomer === '-'));