@datagrok/bio 2.11.21 → 2.11.23

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.11.21",
+  "version": "2.11.23",
   "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",
@@ -39,6 +39,7 @@
     "@datagrok-libraries/ml": "^6.3.68",
     "@datagrok-libraries/tutorials": "^1.3.11",
     "@datagrok-libraries/utils": "^4.1.36",
+    "@datagrok-libraries/math": "^1.0.7",
     "cash-dom": "^8.0.0",
     "css-loader": "^6.7.3",
     "datagrok-api": "^1.16.0",

package/src/demo/bio01a-hierarchical-clustering-and-sequence-space.ts

@@ -3,13 +3,11 @@ import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
 import {_package} from '../package';
-
-import * as lev from 'fastest-levenshtein';
-import {DistanceMatrix} from '@datagrok-libraries/ml/src/distance-matrix';
 import {getTreeHelper, ITreeHelper} from '@datagrok-libraries/bio/src/trees/tree-helper';
 import {getDendrogramService, IDendrogramService} from '@datagrok-libraries/bio/src/trees/dendrogram';
 import {demoSequenceSpace, handleError} from './utils';
 import {DemoScript} from '@datagrok-libraries/tutorials/src/demo-script';
+import {getClusterMatrixWorker} from '@datagrok-libraries/math';
 
 const dataFn = 'data/sample_FASTA_PT_activity.csv';
 const seqColName = 'sequence';
@@ -55,13 +53,11 @@ export async function demoBio01aUI() {
         delay: 2000,
       })
       .step('Cluster sequences', async () => {
-        const seqCol: DG.Column<string> = df.getCol(seqColName);
-        const seqList = seqCol.toList();
-        const distance: DistanceMatrix = DistanceMatrix.calc(seqList, (aSeq: string, bSeq: string) => {
-          const levDistance = lev.distance(aSeq, bSeq);
-          return levDistance / ((aSeq.length + bSeq.length) / 2);
-        });
-        const treeRoot = await treeHelper.hierarchicalClusteringByDistance(distance, 'ward');
+        const distance = await treeHelper.calcDistanceMatrix(df, [seqColName]);
+        const clusterMatrix = await getClusterMatrixWorker(
+          distance!.data, df.rowCount, 1,
+        );
+        const treeRoot = treeHelper.parseClusterMatrix(clusterMatrix);
         dendrogramSvc.injectTreeForGrid(view.grid, treeRoot, undefined, 150, undefined);
       }, {
         description: `Perform hierarchical clustering to reveal relationships between sequences.`,

package/src/demo/bio01b-hierarchical-clustering-and-activity-cliffs.ts

@@ -6,14 +6,13 @@ import {_package, activityCliffs} from '../package';
 import $ from 'cash-dom';
 
 import {TEMPS as acTEMPS} from '@datagrok-libraries/ml/src/viewers/activity-cliffs';
-import * as lev from 'fastest-levenshtein';
-import {DistanceMatrix} from '@datagrok-libraries/ml/src/distance-matrix';
 import {getTreeHelper, ITreeHelper} from '@datagrok-libraries/bio/src/trees/tree-helper';
 import {getDendrogramService, IDendrogramService} from '@datagrok-libraries/bio/src/trees/dendrogram';
 import {handleError} from './utils';
 import {DemoScript} from '@datagrok-libraries/tutorials/src/demo-script';
 import {DimReductionMethods} from '@datagrok-libraries/ml/src/reduce-dimensionality';
 import {MmDistanceFunctionsNames} from '@datagrok-libraries/ml/src/macromolecule-distance-functions';
+import {getClusterMatrixWorker} from '@datagrok-libraries/math';
 
 const dataFn: string = 'data/sample_FASTA_PT_activity.csv';
 
@@ -67,13 +66,12 @@ export async function demoBio01bUI() {
       })
       .step('Cluster sequences', async () => {
         const progressBar = DG.TaskBarProgressIndicator.create(`Running sequence clustering...`);
-        const seqCol: DG.Column<string> = df.getCol('sequence');
-        const seqList = seqCol.toList();
-        const distance: DistanceMatrix = DistanceMatrix.calc(seqList, (aSeq: string, bSeq: string) => {
-          const levDistance = lev.distance(aSeq, bSeq);
-          return levDistance / ((aSeq.length + bSeq.length) / 2);
-        });
-        const treeRoot = await treeHelper.hierarchicalClusteringByDistance(distance, 'ward');
+
+        const distance = await treeHelper.calcDistanceMatrix(df, ['sequence']);
+        const clusterMatrix = await getClusterMatrixWorker(
+          distance!.data, df.rowCount, 1,
+        );
+        const treeRoot = treeHelper.parseClusterMatrix(clusterMatrix);
         progressBar.close();
         dendrogramSvc.injectTreeForGrid(view.grid, treeRoot, undefined, 150, undefined);
 

package/src/utils/macromolecule-column-widget.ts

@@ -12,7 +12,7 @@ import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 export class MacromoleculeColumnWidget extends DG.Widget {
   private viewed: boolean = false;
 
-  private seqCol: DG.Column<string>;
+  private readonly seqCol: DG.Column<string>;
 
   private wlViewer: WebLogoViewer;
 
@@ -44,4 +44,9 @@ export class MacromoleculeColumnWidget extends DG.Widget {
       this.root.style.width = '100%';
     }
   }
+
+  override detach() {
+    this.wlViewer.detach();
+    super.detach();
+  }
 }

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

@@ -2,6 +2,7 @@ import * as grok from 'datagrok-api/grok';
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
 
+import $ from 'cash-dom';
 import wu from 'wu';
 import {fromEvent, Observable, Subject, Unsubscribable} from 'rxjs';
 
@@ -293,6 +294,10 @@ enum WlRenderLevel {
   Freqs = 2,
 }
 
+export const Debounces = new class {
+  render: number = 20;
+}();
+
 const POSITION_LABELS_HEIGHT: number = 12;
 
 export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
@@ -506,7 +511,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     const dataFrameTxt: string = this.dataFrame ? 'data' : 'null';
     _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.buildView( dataFrame = ${dataFrameTxt} ) start`);
     const dpr = window.devicePixelRatio;
-    this.viewSubs.push(DG.debounce(this.renderRequest)
+    this.viewSubs.push(DG.debounce(this.renderRequest, Debounces.render)
       .subscribe(this.renderRequestOnDebounce.bind(this)));
 
     this.helpUrl = '/help/visualize/viewers/web-logo.md';
@@ -558,7 +563,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     this.viewSubs.push(
       fromEvent<WheelEvent>(this.canvas, 'wheel').subscribe(this.canvasOnWheel.bind(this)));
 
-    await this.render(WlRenderLevel.Freqs, 'buildView');
+    this.render(WlRenderLevel.Freqs, 'buildView');
     _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.buildView() end`);
   }
 
@@ -589,7 +594,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
           this.unitsHandler = UnitsHandler.getOrCreate(this.seqCol);
 
           this.palette = pickUpPalette(this.seqCol);
-          this.updatePositions();
+          this.render(WlRenderLevel.Freqs, 'updateSeqCol()');
           this.error = null;
         } catch (err: any) {
           this.seqCol = null;
@@ -608,36 +613,6 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
     }
   }
 
-  /** Updates {@link positionNames} and calculates {@link startPosition} and {@link endPosition}.
-   * Calls {@link render}() with {@link WlRenderLevel.Freqs}
-   */
-  private updatePositions(): void {
-    if (!this.seqCol) return;
-
-    const dfFilter = this.getFilter();
-    const maxLength: number = dfFilter.trueCount === 0 ? this.unitsHandler!.maxLength :
-      wu.enumerate(this.unitsHandler!.splitted).map(([mList, rowI]) => {
-        return dfFilter.get(rowI) && !!mList ? mList.length : 0;
-      }).reduce((max, l) => Math.max(max, l), 0);
-
-    /** positionNames and positionLabel can be set up through the column's tags only */
-    const positionNamesTxt = this.seqCol.getTag(bioTAGS.positionNames);
-    const positionLabelsTxt = this.seqCol.getTag(bioTAGS.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)) ?
-      this.positionNames.indexOf(this.startPositionName) : 0;
-    this.endPosition = (this.endPositionName && this.positionNames &&
-      this.positionNames.includes(this.endPositionName)) ?
-      this.positionNames.indexOf(this.endPositionName) : (maxLength - 1);
-
-    this.render(WlRenderLevel.Freqs, 'updatePositions');
-  }
-
   private getFilter(): DG.BitSet {
     let dfFilterRes: DG.BitSet;
     switch (this.filterSource) {
@@ -851,13 +826,13 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       case PROPS.shrinkEmptyTail:
       case PROPS.skipEmptyPositions:
       case PROPS.positionHeight: {
-        this.updatePositions();
+        this.render(WlRenderLevel.Freqs, `onPropertyChanged( ${property.name} )`);
         break;
       }
 
       case PROPS.valueColumnName:
       case PROPS.valueAggrType: {
-        this.render(WlRenderLevel.Freqs, `onPropertyChanged(${property.name})`);
+        this.render(WlRenderLevel.Freqs, `onPropertyChanged( ${property.name} )`);
         break;
       }
       // this.positionWidth obtains a new value
@@ -892,7 +867,7 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   }
 
   /** Remove all handlers when table is a detach  */
-  public override async detach() {
+  public override detach() {
     const logPrefix = `${this.viewerToLog()}.detach()`;
     _package.logger.debug(`${logPrefix}, in`);
 
@@ -984,6 +959,31 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.render.calculateFreqsInt(), start `);
       if (!this.host || !this.seqCol || !this.dataFrame) return;
 
+      // region updatePositions
+
+      const dfFilter = this.getFilter();
+      const maxLength: number = dfFilter.trueCount === 0 ? this.unitsHandler!.maxLength :
+        wu.enumerate(this.unitsHandler!.splitted).map(([mList, rowI]) => {
+          return dfFilter.get(rowI) && !!mList ? mList.length : 0;
+        }).reduce((max, l) => Math.max(max, l), 0);
+
+      /** positionNames and positionLabel can be set up through the column's tags only */
+      const positionNamesTxt = this.seqCol.getTag(bioTAGS.positionNames);
+      const positionLabelsTxt = this.seqCol.getTag(bioTAGS.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)) ?
+        this.positionNames.indexOf(this.startPositionName) : 0;
+      this.endPosition = (this.endPositionName && this.positionNames &&
+        this.positionNames.includes(this.endPositionName)) ?
+        this.positionNames.indexOf(this.endPositionName) : (maxLength - 1);
+
+      // endregion updatePositions
+
       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;
@@ -996,7 +996,6 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
       }
 
       // 2022-05-05 askalkin instructed to show WebLogo based on filter (not selection)
-      const dfFilter = this.getFilter();
       const dfRowCount = this.dataFrame.rowCount;
       const splitted = this.unitsHandler.splitted;
 
@@ -1136,6 +1135,11 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   }
 
   private renderRequestOnDebounce(renderLevel: WlRenderLevel): void {
+    const logPrefix = `${this.viewerToLog()}.renderRequestOnDebounce()`;
+    if ($(this.root).offsetParent().get()[0]?.tagName === 'HTML') {
+      _package.logger.warning(`${logPrefix}, $(this.root).offsetParent() is the 'HTML' tag.`);
+      return;
+    }
     this.requestedRenderLevel = WlRenderLevel.None;
     this.renderInt(renderLevel)
       .catch((err: any) => {
@@ -1176,7 +1180,6 @@ export class WebLogoViewer extends DG.JsViewer implements IWebLogoViewer {
   private dataFrameFilterOnChanged(_value: any): void {
     _package.logger.debug(`Bio: WebLogoViewer<${this.viewerId}>.dataFrameFilterChanged()`);
     try {
-      this.updatePositions();
       if (this.filterSource === FilterSources.Filtered)
         this.render(WlRenderLevel.Freqs, 'dataFrameFilterOnChanged');
     } catch (err: any) {