Merge pull request #147 from datavisyn/datavisyn/release_5.0.4

Datavisyn/release 5.0.4
datavisyn · Dec 19, 2018 · e72f9e0 · e72f9e0
2 parents 6f3d4ec + 0cde9ba
commit e72f9e0
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 122 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "tdp_core",
   "description": "Target discovery platform for exploring rankings of genes, disease models, and other entities.",
   "homepage": "https://phovea.caleydo.org",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "author": {
     "name": "datavisyn",
     "email": "contact@caleydo.org",

diff --git a/src/lineup/ARankingView.ts b/src/lineup/ARankingView.ts
@@ -63,7 +63,7 @@ export interface IARankingViewOptions {
    */
   enableZoom: boolean;
 
-  enableSidePanel: boolean | 'collapsed';
+  enableSidePanel: boolean | 'collapsed' | 'top';
 
   enableAddingColumns: boolean;
 
@@ -233,7 +233,9 @@ export abstract class ARankingView extends AView {
 
     if (this.options.enableSidePanel) {
       this.node.appendChild(this.panel.node);
-      this.taggle.pushUpdateAble((ctx) => this.panel.panel.update(ctx));
+      if (this.options.enableSidePanel !== 'top') {
+        this.taggle.pushUpdateAble((ctx) => this.panel.panel.update(ctx));
+      }
     }
 
     this.selectionHelper = new LineUpSelectionHelper(this.provider, () => this.itemIDType);
@@ -248,7 +250,12 @@ export abstract class ARankingView extends AView {
       // inject stats
       const base = <HTMLElement>params.querySelector('form') || params;
       base.insertAdjacentHTML('beforeend', `<div class="form-group"></div>`);
-      base.lastElementChild!.appendChild(this.stats);
+      const container = <HTMLElement>base.lastElementChild!;
+      container.appendChild(this.stats);
+
+      if (this.options.enableSidePanel === 'top') {
+        container.insertAdjacentElement('afterbegin', this.panel.node);
+      }
     });
   }
 

diff --git a/src/lineup/internal/LineUpPanelActions.ts b/src/lineup/internal/LineUpPanelActions.ts
@@ -59,7 +59,8 @@ export default class LineUpPanelActions extends EventHandler {
 
   private readonly search: SearchBox<ISearchOption> | null;
 
-  readonly panel: SidePanel;
+  readonly panel: SidePanel | null;
+  readonly node: HTMLElement;
   private overview: HTMLElement;
   private wasCollapsed = false;
 
@@ -71,18 +72,22 @@ export default class LineUpPanelActions extends EventHandler {
         placeholder: 'Add Column...'
       });
       this.search.on(SearchBox.EVENT_SELECT, (item) => {
-        this.node.querySelector('header')!.classList.remove('once');
+        this.node.querySelector('.lu-adder')!.classList.remove('once');
         item.action();
       });
     }
 
-    this.panel = new SidePanel(ctx, doc, {
-      chooser: false
-    });
-
-    if (options.enableSidePanel === 'collapsed') {
-      this.collapse = true;
+    if (this.options.enableSidePanel !== 'top') {
+      this.panel = new SidePanel(ctx, doc, {
+        chooser: false
+      });
+      this.node = this.panel.node;
+    } else {
+      this.node = doc.createElement('div');
+      this.node.classList.add('lu-side-panel', 'lu-side-panel-top');
     }
+    this.node.classList.add('tdp-view-lineup');
+    this.collapse = options.enableSidePanel === 'top' || options.enableSidePanel === 'collapsed';
 
     this.init();
   }
@@ -118,26 +123,28 @@ export default class LineUpPanelActions extends EventHandler {
     this.node.style.display = 'flex';
   }
 
-  get wasHidden() {
-    return this.node.style.display === 'none';
+  private get isTopMode() {
+    return this.options.enableSidePanel === 'top';
   }
 
-  get node() {
-    return this.panel.node;
+  get wasHidden() {
+    return this.node.style.display === 'none';
   }
 
   private init() {
     this.node.insertAdjacentHTML('afterbegin', `
-      <a href="#" title="(Un)Collapse"></a>
       <section></section>
       <div class="lu-adder">${this.search ? '<button class="fa fa-plus" title="Add Column"></button>' : ''}
       </div>`);
 
-    this.node.querySelector('a')!.addEventListener('click', (evt) => {
-      evt.preventDefault();
-      evt.stopPropagation();
-      this.collapse = !this.collapse;
-    });
+    if (!this.isTopMode) { // top mode doesn't need collapse feature
+      this.node.insertAdjacentHTML('afterbegin', `<a href="#" title="(Un)Collapse"></a>`);
+      this.node.querySelector('a')!.addEventListener('click', (evt) => {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.collapse = !this.collapse;
+      });
+    }
 
     const buttons = this.node.querySelector('section');
     this.appendExtraButtons().forEach((b) => buttons.appendChild(b));
@@ -211,7 +218,7 @@ export default class LineUpPanelActions extends EventHandler {
     node.innerHTML = `
       <button type="button" class="dropdown-toggle fa fa-download" style="width: 100%;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Download Data">
       </button>
-      <ul class="dropdown-menu dropdown-menu-right">
+      <ul class="dropdown-menu dropdown-menu-${this.isTopMode ? 'left' : 'right'}">
         <li class="dropdown-header">Download All Rows</li>
         <li><a href="#" data-s="a" data-t="csv">CSV (comma separated)</a></li>
         <li><a href="#" data-s="a" data-t="tsv">TSV (tab separated)</a></li>