@datagrok/bio 2.1.12 → 2.4.2

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

@@ -1,8 +1,14 @@
 import * as ui from 'datagrok-api/ui';
-import * as grok from 'datagrok-api/grok';
 import * as DG from 'datagrok-api/dg';
 
-import {IVdRegionsViewer, PositionHeight, VdRegion, VdRegionType, WebLogoViewer} from '@datagrok-libraries/bio';
+import * as rxjs from 'rxjs';
+import {FilterSources, WebLogoViewer, PROPS as wlPROPS} from '../viewers/web-logo-viewer';
+import {
+  VdRegionsPropsDefault, VdRegionsProps, IVdRegionsViewer,
+  VdRegion, VdRegionType
+} from '@datagrok-libraries/bio/src/viewers/vd-regions';
+import {PositionHeight} from '@datagrok-libraries/bio/src/viewers/web-logo';
+import {Unsubscribable} from 'rxjs';
 
 const vrt = VdRegionType;
 
@@ -36,6 +42,8 @@ const vrt = VdRegionType;
  *  Used to define regions of an immunoglobulin LC.
  */
 export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
+  private viewed: boolean = false;
+
   // private regionsDf: DG.DataFrame;
   private regionsFg: DG.FilterGroup | null = null;
   // private regionsTV: DG.TableView;
@@ -45,42 +53,28 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
   private panelNode: DG.DockNode | null = null;
 
   public regions: VdRegion[] = [];
-  public regionTypes: string[];
+  public regionTypes: VdRegionType[];
   public chains: string[];
-  public sequenceColumnNamePostfix: string;
+  // public sequenceColumnNamePostfix: string;
 
   public skipEmptyPositions: boolean;
   public positionWidth: number;
-  public positionHeight: string;
-
-
-  public get df(): DG.DataFrame {
-    return this.dataFrame;
-  }
-
-  // TODO: .onTableAttached is not calling on dataFrame set, onPropertyChanged  also not calling
-  public async setDf(value: DG.DataFrame, regions: VdRegion[]) {
-    console.debug('VdRegionsViewer.setDf()');
-    await this.destroyView();
-    this.regions = regions;
-    this.dataFrame = value;
-    await this.buildView();
-  }
+  public positionHeight: PositionHeight;
 
   constructor() {
     super();
 
     // To prevent ambiguous numbering scheme in MLB
     this.regionTypes = this.stringList('regionTypes', [vrt.CDR],
-      {choices: Object.values(vrt).filter((t) => t != vrt.Unknown)});
+      {choices: Object.values(vrt).filter((t) => t != vrt.Unknown)}) as VdRegionType[];
     this.chains = this.stringList('chains', ['Heavy', 'Light'],
       {choices: ['Heavy', 'Light']});
-    this.sequenceColumnNamePostfix = this.string('sequenceColumnNamePostfix', 'chain sequence');
+    // this.sequenceColumnNamePostfix = this.string('sequenceColumnNamePostfix', 'chain sequence');
 
     this.skipEmptyPositions = this.bool('skipEmptyPositions', false);
     this.positionWidth = this.float('positionWidth', 16);
     this.positionHeight = this.string('positionHeight', PositionHeight.Entropy,
-      {choices: Object.keys(PositionHeight)});
+      {choices: Object.keys(PositionHeight)}) as PositionHeight;
   }
 
   public async init() {
@@ -108,18 +102,30 @@ 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)));
-    // rxjs.fromEvent(this.root, 'mousemove').subscribe(this.onMouseMoveRoot.bind(this));
-    this.root.addEventListener('mousemove', this.onMouseMoveRoot.bind(this));
+    this.subs.push(rxjs.fromEvent<MouseEvent>(this.root, 'mousemove').subscribe(this.rootOnMouseMove.bind(this)));
 
-    await this.buildView();
+    // await this.buildView('init'); // init
   }
 
   public override async onTableAttached() {
-    await this.init();
+    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;
+      }
+    });
   }
 
-  public override async onPropertyChanged(property: DG.Property | null) {
+  public override onPropertyChanged(property: DG.Property | null): void {
     super.onPropertyChanged(property);
+
+    if (!property) {
+      console.warn('Bio: VdRegionsViewer.onPropertyChanged() property is null');
+      return;
+    }
+
     if (property) {
       switch (property.name) {
       case 'regionTypes':
@@ -128,7 +134,6 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
         break;
       case 'sequenceColumnNamePostfix':
         break;
-      case 'skipEmptyPositions':
         // for (let orderI = 0; orderI < this.logos.length; orderI++) {
         //   for (let chainI = 0; chainI < this.chains.length; chainI++) {
         //     const chain: string = this.chains[chainI];
@@ -136,56 +141,72 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
         //   }
         // }
         // this.calcSize();
-        await this.destroyView();
-        await this.buildView();
-        break;
-      case 'positionWidth':
-        await this.destroyView();
-        await this.buildView();
-        break;
-
-      case 'positionHeight':
-        await this.destroyView();
-        await this.buildView();
-        break;
       }
     }
-  }
 
-
-  public async reset() {
-
-  }
-
-  public async open(mlbView: DG.TableView) {
-    if (!this.isOpened) {
-      this.isOpened = true;
-      this.panelNode = mlbView.dockManager.dock(this.root, DG.DOCK_TYPE.TOP, null, 'Regions', 0.2);
+    switch (property.name) {
+    case 'skipEmptyPositions':
+    case 'positionWidth':
+    case 'positionHeight':
+      this.setData(this.dataFrame, this.regions); // onPropertyChanged
+      break;
     }
   }
 
-  public async show(mlbView: DG.TableView) {
+  // -- Data --
 
-  }
+  // TODO: .onTableAttached is not calling on dataFrame set, onPropertyChanged  also not calling
+  public setData(mlbDf: DG.DataFrame, regions: VdRegion[]) {
+    console.debug('Bio: VdRegionsViewer.setData()');
+    this.viewPromise = this.viewPromise.then(async () => { // setData
+      if (this.viewed) {
+        await this.destroyView('setData'); // setData
+        this.viewed = false;
+      }
+    });
 
-  // #region -- Handle controls' events --
+    this.regions = regions;
+    this.dataFrame = mlbDf; // causes detach and onTableAttached
 
-  private resizing: boolean = false;
+    this.viewPromise = this.viewPromise.then(async () => { // setData
+      if (!this.viewed) {
+        await this.buildView('setData'); // setData
+        this.viewed = true;
+      }
+    });
+  }
 
-  private rootOnSizeChanged(args: any): void {
-    this.calcSize();
+  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();
+    });
   }
 
-  // #endregion
+  // -- View --
+
+  private viewPromise: Promise<void> = Promise.resolve();
 
-  //#region -- View --
   private host: HTMLElement | null = null;
+  private filterSourceInput: DG.InputBase<boolean | null> | null = null;
   private mainLayout: HTMLTableElement | null = null;
   private logos: { [chain: string]: WebLogoViewer }[] = [];
 
-  private async destroyView(): Promise<void> {
+  private viewSubs: Unsubscribable[] = [];
+
+  private async destroyView(purpose: string): Promise<void> {
     // TODO: Unsubscribe from and remove all view elements
-    console.debug(`VdRegionsViewer.destroyView( mainLayout = ${!this.mainLayout ? 'none' : 'value'} )`);
+    console.debug(`Bio: VdRegionsViewer.destroyView( mainLayout = ${!this.mainLayout ? 'none' : 'value'} ), ` +
+      `purpose = '${purpose}'`);
+    if (this.filterSourceInput) {
+      //
+      ui.empty(this.filterSourceInput.root);
+    }
+
     if (this.mainLayout != null) {
       // this.root.removeChild(this.host);
       this.mainLayout.remove();
@@ -193,27 +214,24 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
       this.host = null;
       this.mainLayout = null;
     }
-  }
 
-  private async buildView(): Promise<void> {
-    console.debug('VdRegionsViewer.buildView() start');
+    for (const sub of this.viewSubs) sub.unsubscribe();
+  }
 
-    const colNames: { [chain: string]: string } = Object.assign({},
-      ...this.chains.map((chain) => ({[chain]: `${chain} ${this.sequenceColumnNamePostfix}`})));
+  private async buildView(purpose: string): Promise<void> {
+    console.debug(`Bio: VdRegionsViewer.buildView() begin, ` + `purpose = '${purpose}'`);
 
     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 = [];
-
     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: colNames[chain],
+          sequenceColumnName: region!.sequenceColumnName,
           startPositionName: region!.positionStartName,
           endPositionName: region!.positionEndName,
           fixWidth: true,
@@ -270,15 +288,21 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     // this.mainLayout.style.height = '100%';
     // this.mainLayout.style.border = '1px solid black';
 
+    this.filterSourceInput = ui.boolInput('', false, this.filterSourceInputOnValueChanged.bind(this));
+    this.filterSourceInput.root.style.position = 'absolute';
+    this.filterSourceInput.root.style.left = '10px';
+    this.filterSourceInput.root.style.top = '-3px';
+    ui.tooltip.bind(this.filterSourceInput.root, 'Check to filter sequences for selected VRs');
+
     const color: string = `#ffbb${Math.ceil(Math.random() * 255).toString(16)}`;
-    this.host = ui.box(this.mainLayout,
+    this.host = ui.div([this.mainLayout, this.filterSourceInput!.root],
       {/*style: {backgroundColor: color}*/});
     this.root.appendChild(this.host);
     this.root.style.overflowX = 'auto';
 
     this.calcSize();
 
-    console.debug('VdRegionsViewer.buildView() end');
+    console.debug('Bio: VdRegionsViewer.buildView() end');
   }
 
   private calcSize() {
@@ -297,10 +321,27 @@ export class VdRegionsViewer extends DG.JsViewer implements IVdRegionsViewer {
     }
   }
 
-  //#endregion -- View --
+  // -- Handle events --
 
-  private onMouseMoveRoot(e: MouseEvent) {
+  private rootOnSizeChanged(args: any): void {
+    this.calcSize();
+  }
+
+  private rootOnMouseMove(e: MouseEvent) {
     // ui.tooltip.show('text', e.x + 8, e.y + 8,);
     // console.log(`onMouseMoveRoot.( x: ${e.x}, y: ${e.y} )`);
   }
+
+  private filterSourceInputOnValueChanged(): void {
+    const filterSource: FilterSources = this.filterSourceInput!.value == true ?
+      FilterSources.Selected : FilterSources.Filtered;
+
+    for (let orderI = 0; orderI < this.logos.length; orderI++) {
+      for (let chainI = 0; chainI < this.chains.length; chainI++) {
+        const chain: string = this.chains[chainI];
+        const wl: DG.JsViewer = this.logos[orderI][chain];
+        wl.setOptions({[wlPROPS.filterSource]: filterSource});
+      }
+    }
+  }
 }