From 19e9537c6e458b655db10591e4429ae34f921acd Mon Sep 17 00:00:00 2001
From: Mhaned Oubounyt <m.oubounyt@tum.de>
Date: Sat, 4 Apr 2020 20:28:04 +0200
Subject: [PATCH] enhance the lift and the right bar and add the protein
selection to the right bar
---
package-lock.json | 15 ---
.../explorer-page.component.html | 121 +++++++++---------
.../explorer-page.component.scss | 13 --
src/styles.scss | 11 +-
4 files changed, 73 insertions(+), 87 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 8e433e51..df6e4b4a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1464,21 +1464,6 @@
"to-fast-properties": "^2.0.0"
}
},
- "@creativebulma/bulma-collapsible": {
- "version": "1.0.4",
- "resolved": "https://registry.npmjs.org/@creativebulma/bulma-collapsible/-/bulma-collapsible-1.0.4.tgz",
- "integrity": "sha512-aNqSwyuJxshoIc4oD3wJ3eRqOANRweYfpzqmef/fj5tf0Yn7UVx99yh8ovY6vhB8Il31bFcc7f/eRfJvEMNUPw==",
- "requires": {
- "bulma": "^0.8.1"
- },
- "dependencies": {
- "bulma": {
- "version": "0.8.1",
- "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.8.1.tgz",
- "integrity": "sha512-Afi2zv4DKmNSYfmx55V+Mtnt8+WfR8Rs65kWArmzEuWP7vNr7dSAEDI+ORZlgOR1gueNZwpKaPdUi4ZiTNwgPA=="
- }
- }
- },
"@fortawesome/angular-fontawesome": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.6.1.tgz",
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 714bcb89..d46b84e5 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -15,10 +15,8 @@
</p>
</header>
<div class="card-content">
- <div class="content">
- <app-select-dataset [datasetItems]="datasetItems"
- (selectDataset)="createNetwork($event)"></app-select-dataset>
- </div>
+ <app-select-dataset [datasetItems]="datasetItems"
+ (selectDataset)="createNetwork($event)"></app-select-dataset>
</div>
</div>
@@ -31,28 +29,26 @@
</p>
</header>
<div class="card-content">
- <div class="content">
- <nav class="level" *ngIf="proteinData">
- <div class="level-item has-text-centered">
- <div>
- <p class="heading">Viral<br>Proteins</p>
- <p class="title"> {{ proteinData.effects.length }}</p>
- </div>
+ <nav class="level" *ngIf="proteinData">
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Viral<br>Proteins</p>
+ <p class="title"> {{ proteinData.effects.length }}</p>
</div>
- <div class="level-item has-text-centered">
- <div>
- <p class="heading">Host<br>Proteins</p>
- <p class="title">{{ proteinData.proteins.length }}</p>
- </div>
+ </div>
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Host<br>Proteins</p>
+ <p class="title">{{ proteinData.proteins.length }}</p>
</div>
- <div class="level-item has-text-centered">
- <div>
- <p class="heading">Virus-Host<br>Interactions</p>
- <p class="title">{{ proteinData.edges.length }}</p>
- </div>
+ </div>
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Virus-Host<br>Interactions</p>
+ <p class="title">{{ proteinData.edges.length }}</p>
</div>
- </nav>
- </div>
+ </div>
+ </nav>
</div>
</div>
@@ -65,12 +61,10 @@
</p>
</header>
<div class="card-content">
- <div class="content">
- <div class="field">
- <div class="control">
- <app-query-component [queryItems]="queryItems"
- (selectProtein)="openSummary($event, true)"></app-query-component>
- </div>
+ <div class="field">
+ <div class="control">
+ <app-query-component [queryItems]="queryItems"
+ (selectProtein)="openSummary($event, true)"></app-query-component>
</div>
</div>
</div>
@@ -84,17 +78,13 @@
</span> Filter Viral Proteins
</p>
</header>
- <div class="card-content">
- <div class="content">
- <div class="bait-frame">
- <div *ngFor="let bait of viralProteinCheckboxes">
- <label class="checkbox">
- <input type="checkbox" class="checkbox" [ngModel]="bait.checked"
- (ngModelChange)="bait.checked = $event; filterNodes()">
- {{ bait.data.effectName }}
- </label>
- </div>
- </div>
+ <div class="card-content overflow">
+ <div *ngFor="let bait of viralProteinCheckboxes">
+ <label class="checkbox">
+ <input type="checkbox" class="checkbox" [ngModel]="bait.checked"
+ (ngModelChange)="bait.checked = $event; filterNodes()">
+ {{ bait.data.effectName }}
+ </label>
</div>
</div>
<footer class="card-footer">
@@ -105,6 +95,7 @@
</div>
</div>
+
<div class="content network">
<div class="card network">
@@ -152,7 +143,7 @@
</p>
</header>
<div class="card-content">
- <div *ngIf="showDetails" class="content">
+ <div *ngIf="showDetails">
<p><b>Protein Name:</b> {{ currentProteinAc }}</p>
<!-- <p><b>Gene Name(s):</b> <span *ngFor="let geneName of geneNames"> {{ geneName }}</span></p>-->
@@ -173,23 +164,6 @@
</div>
</div>
- <div class="card bar-medium">
- <header class="card-header">
- <p class="card-header-title">
- <span class="icon">
- <i class="fas fa-filter" aria-hidden="true"></i>
- </span> Summary
- </p>
- </header>
- <div *ngIf="showDetails" class="card-content">
- <div class="content">
- <figure class="image">
- <img src="assets/boxplot.png" alt="Boxplots">
- </figure>
- </div>
- </div>
- </div>
-
<div class="card bar-medium">
<header class="card-header">
<p class="card-header-title">
@@ -252,6 +226,37 @@
</div>
</div>
+ <div class="card bar-large">
+ <header class="card-header">
+ <p class="card-header-title">
+ <span class="icon">
+ <i class="fas fa-filter" aria-hidden="true"></i>
+ </span> Selection
+ </p>
+ </header>
+ <div class="card-content overflow">
+ <table class="table">
+ <thead>
+ <tr>
+ <td>AC</td>
+ <td>Actions</td>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let p of analysis.getSelection()">
+ <td>{{p.proteinAc}}</td>
+ <td>
+ <button (click)="analysis.removeProtein(p)" class="button is-small is-danger">
+ <i class="fa fa-trash"></i>
+ </button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+
</div>
</div>
diff --git a/src/app/pages/explorer-page/explorer-page.component.scss b/src/app/pages/explorer-page/explorer-page.component.scss
index 378457d7..8b137891 100644
--- a/src/app/pages/explorer-page/explorer-page.component.scss
+++ b/src/app/pages/explorer-page/explorer-page.component.scss
@@ -1,14 +1 @@
-.card {
- height: 100%;
- display:flex;
- flex-direction: column;
-}
-.card-block{
- height: 100%;
-}
-
-.bait-frame {
- height: 300px;
- overflow: scroll;
-}
diff --git a/src/styles.scss b/src/styles.scss
index a90f8428..32bf1fab 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -64,11 +64,14 @@ div.content.bar-left {
float: left;
width: 350px;
height: calc(100vh - 102px);
+ overflow: auto;
}
div.content.bar-right {
float: right;
width: 350px;
+ height: calc(100vh - 102px);
+ overflow: auto;
}
div.card.bar-small {
@@ -85,9 +88,15 @@ div.card.bar-medium {
div.card.bar-large {
margin-bottom: 15px;
- height: calc(100vh - 660px);
+ height: 600px;
+}
+
+div.card-content.overflow {
+ overflow: auto;
+ height: 500px;
}
+
div.content.left-window {
float: left;
width: calc(100vw - 350px - 2 * 20px);
--
GitLab