@datagrok/bio 1.0.6 → 1.2.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@datagrok/bio",
   "beta": false,
   "friendlyName": "Bio",
-  "version": "1.0.6",
+  "version": "1.2.1",
   "description": "Bio is a [package](https://datagrok.ai/help/develop/develop#packages) for the [Datagrok](https://datagrok.ai) platform",
   "repository": {
     "type": "git",
@@ -10,7 +10,7 @@
     "directory": "packages/Bio"
   },
   "dependencies": {
-    "@datagrok-libraries/bio": "^2.0.3",
+    "@datagrok-libraries/bio": "^2.1.0",
     "@datagrok-libraries/utils": "^0.4.2",
     "cash-dom": "latest",
     "datagrok-api": "^1.3.5",

package/src/package.ts

@@ -7,6 +7,7 @@ import {SequenceAlignment, Aligned} from './seq_align';
 export const _package = new DG.Package();
 
 import {WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
+import {VdRegionsViewer} from './viewers/vd-regions-viewer';
 
 //name: sequenceAlignment
 //input: string alignType {choices: ['Local alignment', 'Global alignment']}
@@ -29,3 +30,11 @@ export function sequenceAlignment(alignType: string, alignTable: string, gap: nu
 export function webLogoViewer() {
   return new WebLogo();
 }
+
+//name: VdRegions
+//description: V-Domain regions viewer
+//tags: viewer, panel
+//output: viewer result
+export function vdRegionViewer() {
+  return new VdRegionsViewer();
+}

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

@@ -0,0 +1,274 @@
+import * as ui from 'datagrok-api/ui';
+import * as grok from 'datagrok-api/grok';
+import * as DG from 'datagrok-api/dg';
+
+import {VdRegionType, VdRegion} from '@datagrok-libraries/bio/src/vd-regions';
+import {WebLogo} from '@datagrok-libraries/bio/src/viewers/web-logo';
+
+const vrt = VdRegionType;
+
+// Positions of regions for numbering schemes
+// http://www.bioinf.org.uk/abs/info.html
+
+// const imgtRegions: VdRegion[] = [
+//   new VdRegion(vrt.FR, 'FR1', 'Light', 1, '1', '26'),
+//   new VdRegion(vrt.FR, 'FR1', 'Heavy', 1, '1', '26'),
+//
+//   new VdRegion(vrt.CDR, 'CDR1', 'Light', 2, '27', '38'), // 27-32
+//   new VdRegion(vrt.CDR, 'CDR1', 'Heavy', 2, '27', '38'), // 27-32
+//
+//   new VdRegion(vrt.FR, 'FR2', 'Light', 3, '39', '55'),
+//   new VdRegion(vrt.FR, 'FR2', 'Heavy', 3, '39', '55'),
+//
+//   new VdRegion(vrt.CDR, 'CDR2', 'Light', 4, '56', '65'),
+//   new VdRegion(vrt.CDR, 'CDR2', 'Heavy', 4, '56', '65'),
+//
+//   new VdRegion(vrt.FR, 'FR3', 'Light', 5, '66', '104'),
+//   new VdRegion(vrt.FR, 'FR3', 'Heavy', 5, '66', '104'),
+//
+//   new VdRegion(vrt.CDR, 'CDR3', 'Light', 6, '105', '117'),
+//   new VdRegion(vrt.CDR, 'CDR3', 'Heavy', 6, '105', '117'),
+//
+//   new VdRegion(vrt.FR, 'FR4', 'Light', 7, '118', null/*127*/),
+//   new VdRegion(vrt.FR, 'FR4', 'Heavy', 7, '118', null/*128*/),
+// ];
+
+/** Viewer with tabs based on description of chain regions.
+ *  Used to define regions of an immunoglobulin LC.
+ */
+export class VdRegionsViewer extends DG.JsViewer {
+  // private regionsDf: DG.DataFrame;
+  private regionsFg: DG.FilterGroup | null = null;
+  // private regionsTV: DG.TableView;
+  private regionsRoot: HTMLElement | null = null;
+
+  private isOpened: boolean = false;
+  private panelNode: DG.DockNode | null = null;
+
+  public regions: VdRegion[] = [];
+  public regionTypes: string[];
+  public chains: string[];
+  public sequenceColumnNamePostfix: 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();
+  }
+
+  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)});
+    this.chains = this.stringList('chains', ['Heavy', 'Light'],
+      {choices: ['Heavy', 'Light']});
+    this.sequenceColumnNamePostfix = this.string('sequenceColumnNamePostfix', 'chain sequence');
+  }
+
+  public async init() {
+    //#region regionsDF with filter
+    // this.regionsDf = DG.DataFrame.fromObjects(this.regions);
+    // this.regionsDf.rows.filter((row) => row.name == 'CDR1');
+    // // To available options /
+    // this.regionsFg = (await this.regionsDf.plot.fromType(DG.VIEWER.FILTERS, {
+    //   // columnNames: ['name',],
+    //   showFilterCountsIndication: false,
+    //   showHeader: false,
+    //   showSearchBox: false,
+    //   filters: [
+    //     {type: DG.FILTER_TYPE.CATEGORICAL, column: 'type', label: 'Region name', showHistogram: false},
+    //     {type: DG.FILTER_TYPE.CATEGORICAL, column: 'name', label: 'Region type', showHistogram: false},
+    //   ],
+    //   title: 'Regions filter',
+    //   showTitle: true,
+    //   description: 'Filter for regions of multiple alignment by IMGT nomenclature',
+    //   someProperty: 'Hello',
+    // })) as DG.FilterGroup;
+
+    //#endregion regionsDF with filter
+
+    // 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));
+
+    await this.buildView();
+  }
+
+  public override async onTableAttached() {
+    await this.init();
+  }
+
+  public override async onPropertyChanged(property: DG.Property | null) {
+    super.onPropertyChanged(property);
+    if (property) {
+      switch (property.name) {
+      case 'regionTypes':
+        break;
+      case 'chains':
+        break;
+      case 'sequenceColumnNamePostfix':
+        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);
+    }
+  }
+
+  public async show(mlbView: DG.TableView) {
+
+  }
+
+  // #region -- Handle controls' events --
+
+  private resizing: boolean = false;
+
+  private rootOnSizeChanged(args: any): void {
+    this.calcSize();
+  }
+
+  // #endregion
+
+  //#region -- View --
+  private host: HTMLElement | null = null;
+  private mainLayout: HTMLTableElement | null = null;
+  private logos: { [chain: string]: WebLogo }[] = [];
+
+  private async destroyView(): Promise<void> {
+    // TODO: Unsubscribe from and remove all view elements
+    console.debug(`VdRegionsViewer.destroyView( mainLayout = ${!this.mainLayout ? 'none' : 'value'} )`);
+    if (this.mainLayout != null) {
+      // this.root.removeChild(this.host);
+      this.mainLayout.remove();
+      this.host!.remove();
+      this.host = null;
+      this.mainLayout = null;
+    }
+  }
+
+  private async buildView(): Promise<void> {
+    console.debug('VdRegionsViewer.buildView() start');
+
+    const colNames: { [chain: string]: string } = Object.assign({},
+      ...this.chains.map((chain) => ({[chain]: `${chain} ${this.sequenceColumnNamePostfix}`})));
+
+    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]: WebLogo } = {};
+      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],
+          startPositionName: region!.positionStartName,
+          endPositionName: region!.positionEndName,
+          fixWidth: true,
+        })) as unknown as WebLogo;
+      }
+      // WebLogo creation fires onRootSizeChanged event even before control being added to this.logos
+      this.logos[orderI] = regionChains;
+    }
+
+    // ui.tableFromMap()
+    // DG.HtmlTable.create()
+    this.mainLayout = ui.table(
+      this.chains,
+      (chain) => {
+        const elements = [
+          // This is chain label
+          ...(orderList.length > 0 ? [ui.div(chain, {
+            style: {
+              transform: 'rotate(-90deg)',
+              font: '12px Roboto, Roboto Local, sans-serif',
+              textAlign: 'center',
+              width: '16px',
+              marginTop: '24px',
+              marginLeft: '6px',
+            }
+          })] : []),
+          // List with controls for regions
+          ...[...Array(orderList.length).keys()].map((orderI) => {
+            const wl: WebLogo = this.logos[orderI][chain];
+            wl.root.style.height = '100%';
+
+            const resDiv = ui.div([wl.root]/*`${chain} ${regionsFiltered[rI]}`*/, {
+              style: {
+                // height: '100%',
+                marginTop: '4px',
+                marginBottom: '4px',
+              }
+            });
+
+            return resDiv;
+          })];
+        return elements;
+      },
+      ['', ...[...Array(orderList.length).keys()].map(
+        (orderI: number) => regionsFiltered.find(
+          (r: VdRegion) => r.order == orderList[orderI] && r.chain == this.chains[0]
+        )!.name || 'Name')]
+    );
+    this.mainLayout.className = 'mlb-vd-regions-viewer-table2';
+    // this.mainLayout.style.background = '#EEEEFF';
+    // this.mainLayout.style.height = '100%';
+    // this.mainLayout.style.border = '1px solid black';
+
+    const color: string = `#ffbb${Math.ceil(Math.random() * 255).toString(16)}`;
+    this.host = ui.box(this.mainLayout,
+      {/*style: {backgroundColor: color}*/});
+    this.root.appendChild(this.host);
+    this.root.style.overflowX = 'auto';
+
+    this.calcSize();
+
+    console.debug('VdRegionsViewer.buildView() end');
+  }
+
+  private calcSize() {
+    const logoHeight = (this.root.clientHeight - 54) / this.chains.length;
+
+    const maxHeight: number = Math.min(logoHeight,
+      Math.max(...this.logos.map((wlDict) =>
+        Math.max(...Object.values(wlDict).map((wl) => wl.maxHeight))))
+    );
+
+    for (let orderI = 0; orderI < this.logos.length; orderI++) {
+      for (let chainI = 0; chainI < this.chains.length; chainI++) {
+        const chain: string = this.chains[chainI];
+        this.logos[orderI][chain].root.style.height = `${maxHeight}px`;
+      }
+    }
+  }
+
+  //#endregion -- View --
+
+  private onMouseMoveRoot(e: MouseEvent) {
+    // ui.tooltip.show('text', e.x + 8, e.y + 8,);
+    // console.log(`onMouseMoveRoot.( x: ${e.x}, y: ${e.y} )`);
+  }
+}

package/{test-Bio-186527ba2cc3-380e3a80.html → test-Bio-3109311545e4-270baeb2.html}

@@ -1,4 +1,4 @@
-<html><head><meta charset="utf-8"/><title>Bio Test Report. Datagrok version datagrok/datagrok:latest SHA=186527ba2cc3. Commit 380e3a80.</title><style type="text/css">html,
+<html><head><meta charset="utf-8"/><title>Bio Test Report. Datagrok version datagrok/datagrok:latest SHA=3109311545e4. Commit 270baeb2.</title><style type="text/css">html,
 body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1rem;
@@ -229,7 +229,7 @@ header {
   font-size: 1rem;
   padding: 0 0.5rem;
 }
-</style></head><body><div id="jesthtml-content"><header><h1 id="title">Bio Test Report. Datagrok version datagrok/datagrok:latest SHA=186527ba2cc3. Commit 380e3a80.</h1></header><div id="metadata-container"><div id="timestamp">Started: 2022-06-16 17:12:07</div><div id="summary"><div id="suite-summary"><div class="summary-total">Suites (1)</div><div class="summary-passed">1 passed</div><div class="summary-failed summary-empty">0 failed</div><div class="summary-pending summary-empty">0 pending</div></div><div id="test-summary"><div class="summary-total">Tests (1)</div><div class="summary-passed">1 passed</div><div class="summary-failed summary-empty">0 failed</div><div class="summary-pending summary-empty">0 pending</div></div></div></div><div id="suite-1" class="suite-container"><div class="suite-info"><div class="suite-path">/home/runner/work/public/public/packages/Bio/src/__jest__/remote.test.ts</div><div class="suite-time warn">17.166s</div></div><div class="suite-tests"><div class="test-result passed"><div class="test-info"><div class="test-suitename"> </div><div class="test-title">TEST</div><div class="test-status">passed</div><div class="test-duration">6.769s</div></div></div></div><div class="suite-consolelog"><div class="suite-consolelog-header">Console Log</div><div class="suite-consolelog-item"><pre class="suite-consolelog-item-origin">    at Object.&lt;anonymous&gt; (/home/runner/work/public/public/packages/Bio/src/__jest__/test-node.ts:63:11)
+</style></head><body><div id="jesthtml-content"><header><h1 id="title">Bio Test Report. Datagrok version datagrok/datagrok:latest SHA=3109311545e4. Commit 270baeb2.</h1></header><div id="metadata-container"><div id="timestamp">Started: 2022-06-23 09:29:26</div><div id="summary"><div id="suite-summary"><div class="summary-total">Suites (1)</div><div class="summary-passed">1 passed</div><div class="summary-failed summary-empty">0 failed</div><div class="summary-pending summary-empty">0 pending</div></div><div id="test-summary"><div class="summary-total">Tests (1)</div><div class="summary-passed">1 passed</div><div class="summary-failed summary-empty">0 failed</div><div class="summary-pending summary-empty">0 pending</div></div></div></div><div id="suite-1" class="suite-container"><div class="suite-info"><div class="suite-path">/home/runner/work/public/public/packages/Bio/src/__jest__/remote.test.ts</div><div class="suite-time warn">17.389s</div></div><div class="suite-tests"><div class="test-result passed"><div class="test-info"><div class="test-suitename"> </div><div class="test-title">TEST</div><div class="test-status">passed</div><div class="test-duration">6.514s</div></div></div></div><div class="suite-consolelog"><div class="suite-consolelog-header">Console Log</div><div class="suite-consolelog-item"><pre class="suite-consolelog-item-origin">    at Object.&lt;anonymous&gt; (/home/runner/work/public/public/packages/Bio/src/__jest__/test-node.ts:63:11)
     at Generator.next (&lt;anonymous&gt;)
     at fulfilled (/home/runner/work/public/public/packages/Bio/src/__jest__/test-node.ts:28:58)
     at processTicksAndRejections (internal/process/task_queues.js:97:5)</pre><pre class="suite-consolelog-item-message">Using web root: http://localhost:8080</pre></div><div class="suite-consolelog-item"><pre class="suite-consolelog-item-origin">    at /home/runner/work/public/public/packages/Bio/src/__jest__/remote.test.ts:24:11