@datagrok/bio 2.11.29 → 2.11.30

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

@@ -9,43 +9,73 @@ import * as DG from 'datagrok-api/dg';
 import * as grok from 'datagrok-api/grok';
 
 import wu from 'wu';
-import {fromEvent, Subject, Subscription, Unsubscribable} from 'rxjs';
-import {debounceTime} from 'rxjs/operators';
+import $ from 'cash-dom';
+import {fromEvent, Observable, Subject, Subscription, Unsubscribable} from 'rxjs';
 
 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 {IHelmWebEditor} from '@datagrok-libraries/bio/src/types/editor';
+import {errInfo} from '@datagrok-libraries/bio/src/utils/err-info';
+import {delay, testEvent} from '@datagrok-libraries/utils/src/test';
+import {getHelmHelper} from '@datagrok-libraries/bio/src/helm/helm-helper';
+import {IHelmWebEditor, IWebEditorApp} from '@datagrok-libraries/bio/src/helm/types';
+import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
+import {IRenderer} from '@datagrok-libraries/bio/src/types/renderer';
+import {ILogger} from '@datagrok-libraries/bio/src/utils/logger';
+import {PromiseSyncer} from '@datagrok-libraries/bio/src/utils/syncer';
 
 import {helmSubstructureSearch, linearSubstructureSearch} from '../substructure-search/substructure-search';
 import {updateDivInnerHTML} from '../utils/ui-utils';
+import {BioFilterBase, BioFilterProps, IBioFilter, IFilterProps} from './bio-substructure-filter-types';
+import {HelmBioFilter} from './bio-substructure-filter-helm';
 
 import {_package} from '../package';
 
-export class BioSubstructureFilter extends DG.Filter {
-  bioFilter: BioFilterBase | null = null;
+const FILTER_SYNC_EVENT: string = 'bio-substructure-filter';
+
+class FilterState {
+  constructor(
+    public readonly props: IFilterProps,
+    public readonly filterId: number,
+    public readonly dataFrameId: string,
+    public readonly columnName: string,
+    public readonly bitset: DG.BitSet | null,
+  ) {}
+}
+
+export class SeparatorFilterProps extends BioFilterProps {
+  constructor(
+    substructure: string,
+    public separator?: string
+  ) {
+    super(substructure);
+  }
+}
+
+export class BioSubstructureFilter extends DG.Filter implements IRenderer {
+  bioFilter: IBioFilter | null = null;
   bitset: DG.BitSet | null = null;
-  loader: HTMLDivElement = ui.loader();
-  onBioFilterChangedSubs?: Subscription;
+  readonly loader: HTMLDivElement;
   notation: string | undefined = undefined;
 
+  readonly logger: ILogger;
+  readonly filterSyncer: PromiseSyncer;
+
   get calculating(): boolean { return this.loader.style.display == 'initial'; }
 
   set calculating(value: boolean) { this.loader.style.display = value ? 'initial' : 'none'; }
 
   get filterSummary(): string {
-    return this.bioFilter!.substructure;
+    return this.bioFilter!.filterSummary;
   }
 
   get isFiltering(): boolean {
-    return super.isFiltering && this.bioFilter!.substructure !== '';
+    return super.isFiltering && (this.bioFilter?.isFiltering ?? false);
   }
 
   get isReadyToApplyFilter(): boolean {
     return !this.calculating && this.bitset != null;
   }
 
-  get _debounceTime(): number {
+  get debounceTime(): number {
     if (this.column == null)
       return 1000;
     const length = this.column.length;
@@ -54,44 +84,85 @@ export class BioSubstructureFilter extends DG.Filter {
     const msecMax = 1000;
     if (length < minLength) return 0;
     if (length > maxLength) return msecMax;
-    return Math.floor(msecMax * ((length - minLength) / (maxLength - minLength)));
+    const res = Math.floor(msecMax * ((length - minLength) / (maxLength - minLength)));
+    return res;
   }
 
-  //column name setter overload
-
   constructor() {
     super();
     this.root = ui.divV([]);
+    this.loader = ui.loader();
     this.calculating = false;
+    this.filterSyncer = new PromiseSyncer(this.logger = _package.logger);
+
+    return new Proxy(this, {
+      set(target: any, key, value) {
+        if (key === 'column') {
+          const k = 42;
+        }
+        target[key] = value;
+        return true;
+      }
+    });
   }
 
+  private static filterCounter: number = -1;
+  private readonly filterId: number = ++BioSubstructureFilter.filterCounter;
+
+  private filterToLog(): string { return `BioSubstructureFilter<${this.filterId}>`; }
+
+
+  private viewSubs: Unsubscribable[] = [];
+
   attach(dataFrame: DG.DataFrame): void {
-    super.attach(dataFrame);
-    this.column = dataFrame.columns.bySemType(DG.SEMTYPE.MACROMOLECULE);
-    this.columnName ??= this.column?.name;
-    this.notation ??= this.column?.getTag(DG.TAGS.UNITS);
-    this.bioFilter = this.notation === NOTATION.FASTA ?
-      new FastaFilter() : this.notation === NOTATION.SEPARATOR ?
-        new SeparatorFilter(this.column!.getTag(bioTAGS.separator)) : new HelmFilter();
-    this.root.appendChild(this.bioFilter!.filterPanel);
-    this.root.appendChild(this.loader);
-
-    this.onBioFilterChangedSubs?.unsubscribe();
-
-    let onChangedEvent: any = this.bioFilter.onChanged;
-    onChangedEvent = onChangedEvent.pipe(debounceTime(this._debounceTime));
-    this.onBioFilterChangedSubs = onChangedEvent.subscribe(async (_: any) => await this._onInputChanged());
-
-    this.subs.push(grok.events.onResetFilterRequest.subscribe((_value: any) => {
-      this.bioFilter?.resetFilter();
-    }));
+    const superAttach = super.attach.bind(this);
+    const logPrefix = `${this.filterToLog()}.attach()`;
+    this.filterSyncer.sync(logPrefix, async () => {
+      superAttach(dataFrame);
+      this.column = dataFrame.columns.bySemType(DG.SEMTYPE.MACROMOLECULE);
+      const uh = UnitsHandler.getOrCreate(this.column!);
+      this.columnName ??= this.column?.name;
+      this.notation ??= this.column?.getTag(DG.TAGS.UNITS);
+
+      this.bioFilter = this.notation === NOTATION.FASTA ?
+        new FastaBioFilter() : this.notation === NOTATION.SEPARATOR ?
+          new SeparatorBioFilter(this.column!.getTag(bioTAGS.separator)) : new HelmBioFilter();
+      this.root.appendChild(this.bioFilter!.filterPanel);
+      this.root.appendChild(this.loader);
+      await this.bioFilter.attach(); // may await waitForElementInDom
+
+      this.viewSubs.push(DG.debounce(this.bioFilter!.onChanged, this.debounceTime)
+        .subscribe(this.bioFilterOnChangedDebounced.bind(this)));
+      this.viewSubs.push(grok.events.onResetFilterRequest
+        .subscribe((_value: any) => { this.bioFilter?.resetFilter(); }));
+      this.viewSubs.push(grok.events.onCustomEvent(FILTER_SYNC_EVENT)
+        .subscribe(this.filterOnSync.bind(this)));
+    });
   }
 
   detach() {
-    if (this.bioFilter) this.bioFilter.detach();
-    super.detach();
+    const superDetach = super.detach.bind(this);
+    const logPrefix = `${this.filterToLog()}.detach()`;
+    this.filterSyncer.sync(logPrefix, async () => {
+      for (const sub of this.viewSubs) sub.unsubscribe();
+      this.viewSubs = [];
+      superDetach(); // requests this.isFiltering
+      if (this.bioFilter) this.bioFilter.detach();
+      this.bioFilter = null;
+    });
   }
 
+  // -- Sync -
+
+  private filterOnSync(state: FilterState): void {
+    if (state.filterId === this.filterId) return;
+    if (state.dataFrameId !== this.dataFrame!.id || state.columnName !== this.columnName) return;
+
+    this.bioFilter!.props = state.props;
+  }
+
+  // -- Layout --
+
   applyFilter(): void {
     if (this.bitset && !this.isDetached)
       this.dataFrame?.filter.and(this.bitset);
@@ -102,7 +173,7 @@ export class BioSubstructureFilter extends DG.Filter {
    */
   saveState(): any {
     const state = super.saveState();
-    state.bioSubstructure = this.bioFilter?.substructure;
+    state.props = this.bioFilter!.props.save();
     return state;
   }
 
@@ -111,105 +182,165 @@ export class BioSubstructureFilter extends DG.Filter {
    */
   applyState(state: any): void {
     super.applyState(state); //column, columnName
-    if (state.bioSubstructure)
-      this.bioFilter!.substructure = state.bioSubstructure;
+    if (state.props)
+      this.bioFilter!.props.apply(state.props);
+
+    // if (state.bioSubstructure) {
+    //   // (async () => { await this.bioFilterOnChangedDebounced(); })();
+    //   this.bioFilter!.substructure = state.bioSubstructure;
+    // }
+  }
 
-    const that = this;
-    if (state.bioSubstructure)
-      setTimeout(function() { that._onInputChanged(); }, 1000);
+  private fireFilterSync(): void {
+    const logPrefix = `${this.filterToLog()}.fireFilterSync()`;
+    _package.logger.debug(`${logPrefix}, ` +
+      `bioFilter = ${!!this.bioFilter ? this.bioFilter.constructor.name : 'null'}` +
+      (!!this.bioFilter ? `, props = ${JSON.stringify(this.bioFilter!.props.save())}` : ''));
+
+    grok.events.fireCustomEvent(FILTER_SYNC_EVENT, new FilterState(
+      this.bioFilter!.props, this.filterId, this.dataFrame!.id, this.columnName!, this.bitset));
   }
 
+  // -- Handle events
+
   /**
    * Performs the actual filtering
    * When the results are ready, triggers `rows.requestFilter`, which in turn triggers `applyFilter`
    * that would simply apply the bitset synchronously.
    */
-  async _onInputChanged(): Promise<void> {
-    _package.logger.debug('Bio: BioSubstructureFilter._onInputChanged(), start');
+  bioFilterOnChangedDebounced(): void {
+    if (!this.dataFrame) return; // Debounced event can be handled postponed
+    const logPrefix = `${this.filterToLog()}.bioFilterOnChangedDebounced()`;
+    _package.logger.debug(`${logPrefix}, start, ` +
+      `isFiltering = ${this.isFiltering}, ` +
+      `props = ${JSON.stringify(this.bioFilter!.props.save())}`);
+
     if (!this.isFiltering) {
       this.bitset = null;
-      this.dataFrame?.rows.requestFilter();
-    } else if (wu(this.dataFrame!.rows.filters).has(`${this.columnName}: ${this.filterSummary}`)) {
-      // some other filter is already filtering for the exact same thing
+      this.dataFrame!.rows.requestFilter();
+      return;
+    }
+
+    // some other filter is already filtering for the exact same thing
+    if (wu(this.dataFrame!.rows.filters).has(`${this.columnName}: ${this.filterSummary}`))
       return;
-    } else {
+
+    this.filterSyncer.sync(logPrefix, async () => {
       this.calculating = true;
       try {
+        _package.logger.debug(`${logPrefix}, before substructureSearch`);
         this.bitset = await this.bioFilter?.substructureSearch(this.column!)!;
+        _package.logger.debug(`${logPrefix}, after substructureSearch`);
         this.calculating = false;
+        this.fireFilterSync();
         this.dataFrame?.rows.requestFilter();
       } finally {
         this.calculating = false;
+        _package.logger.debug(`${logPrefix}, end`);
       }
-    }
+    });
   }
-}
 
-abstract class BioFilterBase {
-  onChanged: Subject<any> = new Subject<any>();
+  // -- IRenderer --
 
-  get filterPanel() {
-    return new HTMLElement();
-  }
+  private _onRendered = new Subject<void>();
 
-  abstract get substructure(): string;
-  abstract set substructure(s: string);
+  get onRendered(): Observable<void> { return this._onRendered; }
 
-  async substructureSearch(_column: DG.Column): Promise<DG.BitSet | null> {
-    return null;
+  invalidate(caller?: string): void {
+    const logPrefix = `${this.filterToLog()}.invalidate(${caller ? ` <- ${caller} ` : ''})`;
+    this.filterSyncer.sync(logPrefix, async () => { this._onRendered.next(); });
   }
 
-  abstract resetFilter(): void;
+  async awaitRendered(timeout: number = 10000): Promise<void> {
+    const callLog = `awaitRendered( ${timeout} )`;
+    const logPrefix = `${this.filterToLog()}.${callLog}`;
+    await delay(0);
+    await testEvent(this.onRendered, () => {
+      this.logger.debug(`${logPrefix}, ` + '_onRendered event caught');
+    }, () => {
+      this.invalidate(callLog);
+    }, timeout, `${logPrefix} ${timeout} timeout`);
 
-  abstract detach(): void;
+    // Rethrow stored syncer error (for test purposes)
+    const viewErrors = this.filterSyncer.resetErrors();
+    if (viewErrors.length > 0) throw viewErrors[0];
+  }
 }
 
-class FastaFilter extends BioFilterBase {
+export class FastaBioFilter extends BioFilterBase<BioFilterProps> {
+  readonly emptyProps = new BioFilterProps('');
+
   readonly substructureInput: DG.InputBase<string>;
 
+  get type(): string { return 'FastaBioFilter'; }
+
   constructor() {
     super();
 
     this.substructureInput = ui.stringInput('', '', () => {
-      this.onChanged.next();
+      this.props.substructure = this.substructureInput.value;
+      if (!this._propsChanging) this.onChanged.next();
     }, {placeholder: 'Substructure'});
   }
 
-  get filterPanel() {
-    return this.substructureInput.root;
+  public applyProps() {
+    this.substructureInput.value = this.props.substructure;
   }
 
-  get substructure() {
-    return this.substructureInput.value;
+  get filterPanel() {
+    return this.substructureInput.root;
   }
 
-  set substructure(s: string) {
-    this.substructureInput.value = s;
-  }
+  get isFiltering(): boolean { return this.substructureInput.value !== ''; }
 
   async substructureSearch(column: DG.Column): Promise<DG.BitSet | null> {
-    return linearSubstructureSearch(this.substructure, column);
+    return linearSubstructureSearch(this.props.substructure, column);
   }
 
-  resetFilter(): void {
-    this.substructureInput.value = '';
-  }
+  async attach(): Promise<void> {}
 
-  detach(): void { }
+  async detach(): Promise<void> {
+    await super.detach();
+  }
 }
 
-export class SeparatorFilter extends FastaFilter {
+export class SeparatorBioFilter extends BioFilterBase<SeparatorFilterProps> {
+  readonly emptyProps = new SeparatorFilterProps('');
+
+  readonly substructureInput: DG.InputBase<string>;
   readonly separatorInput: DG.InputBase<string>;
   colSeparator = '';
 
-  constructor(separator: string) {
+  get type(): string { return 'SeparatorBioFilter'; }
+
+  constructor(colSeparator: string) {
     super();
 
-    this.separatorInput = ui.stringInput('', '', () => {
-      this.onChanged.next();
+    this.substructureInput = ui.stringInput('', '', () => {
+      this.props.substructure = this.substructureInput.value;
+      if (!this._propsChanging) this.onChanged.next();
+    }, {placeholder: 'Substructure'});
+    this.separatorInput = ui.stringInput('', this.colSeparator = colSeparator, () => {
+      this.props.separator = !!this.separatorInput.value ? this.separatorInput.value : undefined;
+      if (!this._propsChanging) this.onChanged.next();
     }, {placeholder: 'Separator'});
-    this.colSeparator = separator;
-    this.separatorInput.value = separator;
+  }
+
+  applyProps(): void {
+    this.substructureInput.value = this.props.substructure;
+    this.separatorInput.value = this.props.separator ?? this.colSeparator;
+  }
+
+  get filterSummary(): string {
+    const sep: string = this.props.separator ? this.props.separator : this.colSeparator;
+    return `${this.props.substructure}, {sep}`;
+  };
+
+  get isFiltering(): boolean { return this.props.substructure !== ''; };
+
+  resetFilter(): void {
+    this.props = new SeparatorFilterProps('');
   }
 
   get filterPanel() {
@@ -233,100 +364,9 @@ export class SeparatorFilter extends FastaFilter {
     return linearSubstructureSearch(this.substructure, column, this.colSeparator);
   }
 
-  detach(): void { }
-}
-
-export class HelmFilter extends BioFilterBase {
-  helmEditor: IHelmWebEditor;
-  _filterPanel = ui.div('', {style: {cursor: 'pointer'}});
-  helmSubstructure = '';
-
-  constructor() {
-    super();
-    this.init();
-  }
-
-  viewSubs: Unsubscribable[] = [];
-
-  async init() {
-    this.helmEditor = await grok.functions.call('Helm:helmWebEditor');
-    await ui.tools.waitForElementInDom(this._filterPanel);
-    this.updateFilterPanel();
-    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)
-            .replace(/<\/span>/g, '').replace(/<span style='background:#bbf;'>/g, '');
-          this.helmSubstructure = helmString;
-          this.updateFilterPanel(this.substructure);
-          setTimeout(() => { this.onChanged.next(); }, 10);
-        }).show({modal: true, fullScreen: true});
-      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() {
-    return this._filterPanel;
-  }
-
-  get substructure() {
-    return this.helmSubstructure;
-  }
-
-  set substructure(s: string) {
-    this.helmEditor.editor.setHelm(s);
-  }
-
-  updateFilterPanel(helmString?: string) {
-    const width = this._filterPanel.parentElement!.clientWidth < 100 ? 100 :
-      this._filterPanel.parentElement!.clientWidth;
-    const height = width / 2;
-    if (!helmString) {
-      const editDiv = ui.divText('Click to edit', 'helm-substructure-filter');
-      updateDivInnerHTML(this._filterPanel, editDiv);
-    } else {
-      updateDivInnerHTML(this._filterPanel, this.helmEditor.host);
-      this.helmEditor.editor.setHelm(helmString);
-      this.helmEditor.resizeEditor(width, height);
-    }
-  }
-
-  async substructureSearch(column: DG.Column): Promise<DG.BitSet | null> {
-    ui.setUpdateIndicator(this._filterPanel, true);
-    await delay(10);
-    const res = await helmSubstructureSearch(this.substructure, column);
-    ui.setUpdateIndicator(this._filterPanel, false);
-    return res;
-  }
-
-  resetFilter(): void {
-    console.debug('Bio: HelmFilter.resetFilter()');
-    this.helmSubstructure = '';
-    this.updateFilterPanel(this.substructure);
-  }
+  async attach(): Promise<void> {}
 
-  detach(): void {
-    for (const sub of this.viewSubs) sub.unsubscribe();
+  async detach(): Promise<void> {
+    await super.detach();
   }
 }

package/src/widgets/composition-analysis-widget.ts

@@ -11,7 +11,7 @@ import '../../css/composition-analysis.css';
 import {UnitsHandler} from '@datagrok-libraries/bio/src/utils/units-handler';
 
 
-export function getCompositionAnalysisWidget(val: DG.SemanticValue) {
+export function getCompositionAnalysisWidget(val: DG.SemanticValue): DG.Widget {
   const host = ui.div();
   host.classList.add('macromolecule-cell-comp-analysis-host');
   const alphabet = val.cell.column.tags[bioTAGS.alphabet];