@datagrok/bio 2.11.22 → 2.11.24

package/package.json

@@ -5,7 +5,7 @@
     "name": "Leonid Stolbov",
     "email": "lstolbov@datagrok.ai"
   },
-  "version": "2.11.22",
+  "version": "2.11.24",
   "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",
@@ -34,11 +34,12 @@
   ],
   "dependencies": {
     "@biowasm/aioli": "^3.1.0",
-    "@datagrok-libraries/bio": "^5.39.16",
+    "@datagrok-libraries/bio": "^5.39.18",
     "@datagrok-libraries/chem-meta": "^1.2.1",
     "@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",
@@ -65,7 +66,7 @@
     "webpack-bundle-analyzer": "latest",
     "webpack-cli": "^4.9.1",
     "@datagrok/chem": "^1.8.8",
-    "@datagrok/helm": "^2.1.22",
+    "@datagrok/helm": "^2.1.24",
     "@datagrok/dendrogram": "^1.2.22"
   },
   "scripts": {

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/viewers/web-logo-viewer.ts

@@ -294,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 {
@@ -507,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';

package/src/widgets/bio-substructure-filter.ts

@@ -6,17 +6,21 @@
 
 import * as ui from 'datagrok-api/ui';
 import * as DG from 'datagrok-api/dg';
-
 import * as grok from 'datagrok-api/grok';
+
 import wu from 'wu';
-import {helmSubstructureSearch, linearSubstructureSearch} from '../substructure-search/substructure-search';
-import {Subject, Subscription} from 'rxjs';
-import {updateDivInnerHTML} from '../utils/ui-utils';
+import {fromEvent, Subject, Subscription, Unsubscribable} from 'rxjs';
+import {debounceTime} from 'rxjs/operators';
+
 import {TAGS as bioTAGS, NOTATION} from '@datagrok-libraries/bio/src/utils/macromolecule';
+import {errInfo, errStack} from '@datagrok-libraries/bio/src/utils/err-info';
 import {delay} from '@datagrok-libraries/utils/src/test';
-import {debounceTime} from 'rxjs/operators';
+import {IHelmWebEditor} from '@datagrok-libraries/bio/src/types/editor';
 
-import {_package} from '../package-test';
+import {helmSubstructureSearch, linearSubstructureSearch} from '../substructure-search/substructure-search';
+import {updateDivInnerHTML} from '../utils/ui-utils';
+
+import {_package} from '../package';
 
 export class BioSubstructureFilter extends DG.Filter {
   bioFilter: BioFilterBase | null = null;
@@ -84,6 +88,7 @@ export class BioSubstructureFilter extends DG.Filter {
   }
 
   detach() {
+    if (this.bioFilter) this.bioFilter.detach();
     super.detach();
   }
 
@@ -147,18 +152,16 @@ abstract class BioFilterBase {
     return new HTMLElement();
   }
 
-  get substructure() {
-    return '';
-  }
-
-  set substructure(s: string) {
-  }
+  abstract get substructure(): string;
+  abstract set substructure(s: string);
 
   async substructureSearch(_column: DG.Column): Promise<DG.BitSet | null> {
     return null;
   }
 
   abstract resetFilter(): void;
+
+  abstract detach(): void;
 }
 
 class FastaFilter extends BioFilterBase {
@@ -191,6 +194,8 @@ class FastaFilter extends BioFilterBase {
   resetFilter(): void {
     this.substructureInput.value = '';
   }
+
+  detach(): void { }
 }
 
 export class SeparatorFilter extends FastaFilter {
@@ -227,10 +232,12 @@ export class SeparatorFilter extends FastaFilter {
   async substructureSearch(column: DG.Column): Promise<DG.BitSet | null> {
     return linearSubstructureSearch(this.substructure, column, this.colSeparator);
   }
+
+  detach(): void { }
 }
 
 export class HelmFilter extends BioFilterBase {
-  helmEditor: any;
+  helmEditor: IHelmWebEditor;
   _filterPanel = ui.div('', {style: {cursor: 'pointer'}});
   helmSubstructure = '';
 
@@ -239,14 +246,18 @@ export class HelmFilter extends BioFilterBase {
     this.init();
   }
 
+  viewSubs: Unsubscribable[] = [];
+
   async init() {
-    this.helmEditor = await grok.functions.call('HELM:helmWebEditor');
+    this.helmEditor = await grok.functions.call('Helm:helmWebEditor');
     await ui.tools.waitForElementInDom(this._filterPanel);
     this.updateFilterPanel();
-    this._filterPanel.addEventListener('click', (_event: MouseEvent) => {
-      const {editorDiv, webEditor} = this.helmEditor.createWebEditor(this.helmSubstructure);
-      //@ts-ignore
-      ui.dialog({showHeader: false, showFooter: true})
+    let editorDiv: HTMLDivElement | undefined;
+    let webEditor: any | undefined;
+    // TODO: Unsubscribe 'click' and 'sizeChanged'
+    this.viewSubs.push(fromEvent(this._filterPanel, 'click').subscribe(() => {
+      ({editorDiv, webEditor} = this.helmEditor.createWebEditor(this.helmSubstructure));
+      const dlg = ui.dialog({showHeader: false, showFooter: true})
         .add(editorDiv)
         .onOK(() => {
           const helmString = webEditor.canvas.getHelm(true)
@@ -255,12 +266,24 @@ export class HelmFilter extends BioFilterBase {
           this.updateFilterPanel(this.substructure);
           setTimeout(() => { this.onChanged.next(); }, 10);
         }).show({modal: true, fullScreen: true});
-    });
-    ui.onSizeChanged(this._filterPanel).subscribe((_) => {
-      const helmString = this.helmEditor
-        .webEditor.canvas.getHelm(true).replace(/<\/span>/g, '').replace(/<span style='background:#bbf;'>/g, '');
-      this.updateFilterPanel(helmString);
-    });
+      const onCloseSub = dlg.onClose.subscribe(() => {
+        onCloseSub.unsubscribe();
+        editorDiv = undefined;
+        webEditor = undefined;
+      });
+    }));
+    this.viewSubs.push(ui.onSizeChanged(this._filterPanel).subscribe((_) => {
+      try {
+        if (!!webEditor) {
+          const helmString = webEditor.canvas.getHelm(true)
+            .replace(/<\/span>/g, '').replace(/<span style='background:#bbf;'>/g, '');
+          this.updateFilterPanel(helmString);
+        }
+      } catch (err: any) {
+        const [errMsg, errStack] = errInfo(err);
+        _package.logger.error(errMsg, undefined, errStack);
+      }
+    }));
   }
 
   get filterPanel() {
@@ -302,4 +325,8 @@ export class HelmFilter extends BioFilterBase {
     this.helmSubstructure = '';
     this.updateFilterPanel(this.substructure);
   }
+
+  detach(): void {
+    for (const sub of this.viewSubs) sub.unsubscribe();
+  }
 }