Merge branch 'fix-smaller-issues' into 'master'

Fix smaller issues

See merge request covid-19/frontend!25

src/app/pages/explorer-page/explorer-page.component.html

@@ -32,13 +32,13 @@
           <nav class="level" *ngIf="proteinData">
             <div class="level-item has-text-centered">
               <div>
-                <p class="heading">Viral protein</p>
+                <p class="heading">Viral Proteins</p>
                 <p class="title"> {{ proteinData.effects.length }}</p>
               </div>
             </div>
             <div class="level-item has-text-centered">
               <div>
-                <p class="heading">Host protein</p>
+                <p class="heading">Host Proteins</p>
                 <p class="title">{{ proteinData.proteins.length }}</p>
               </div>
             </div>
@@ -58,7 +58,7 @@
         <p class="card-header-title">
           <span class="icon">
         <i class="fas fa-search" aria-hidden="true"></i>
-      </span> Query Protein/Gene
+      </span> Query Protein
         </p>
       </header>
       <div class="card-content">
@@ -78,12 +78,11 @@
         <p class="card-header-title">
           <span class="icon">
         <i class="fas fa-filter" aria-hidden="true"></i>
-      </span> Filtering
+      </span> Filter Viral Proteins
         </p>
       </header>
       <div class="card-content">
         <div class="content">
-          <p><b>Baits</b></p>
           <div class="bait-frame">
             <div *ngFor="let bait of viralProteinCheckboxes">
               <label class="checkbox">
@@ -124,6 +123,58 @@
 
   <div class="content bar-right">
 
+    <div class="card bar">
+      <header class="card-header">
+        <p class="card-header-title">
+          <span class="icon">
+        <i class="fas fa-info" aria-hidden="true"></i>
+      </span> {{currentProteinAc}}
+        </p>
+      </header>
+      <div class="card-content">
+        <div *ngIf="showDetails" class="content">
+
+          <p><b>Protein Name:</b> {{ currentProteinAc }}</p>
+          <!--          <p><b>Gene Name(s):</b> <span *ngFor="let geneName of geneNames"> {{ geneName }}</span></p>-->
+          <!--          <p><b>Protein Name(s):</b> <span *ngFor="let proteinName of proteinNames"> {{ proteinName }}</span></p>-->
+          <p><b>Protein AC(s):</b>
+            <a href="https://www.uniprot.org/uniprot/{{proteinAc}}" target="_blank"
+               *ngFor="let proteinAc of proteinAcs">
+              {{ proteinAc }}
+            </a>
+          </p>
+          <button class="button is-primary" *ngIf="!inSelection(currentProteinAc)"
+                  (click)="addToSelection(currentProteinAc)">Add to Analysis
+          </button>
+          <button class="button is-danger" *ngIf="inSelection(currentProteinAc)"
+                  (click)="removeFromSelection(currentProteinAc)">Remove from Analysis
+          </button>
+        </div>
+
+        <div *ngIf="!showDetails">
+          Please select a node for further information.
+        </div>
+
+      </div>
+    </div>
+
+    <div class="card bar">
+            <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">
       <header class="card-header">
         <p class="card-header-title">
@@ -133,6 +184,8 @@
         </p>
       </header>
       <div class="card-content">
+        <p>Hold down the CTRL button to select multiple proteins.</p>
+
         <button (click)="showAnalysisDialog = true"
                 class="button"
                 [class.is-info]="!analysis.getTask()"
@@ -145,7 +198,7 @@
               <i class="fa fa-list"></i>
             </span>
             <span>
-              Open Protein Selection
+              Open Analysis
             </span>
           </span>
 
@@ -179,59 +232,6 @@
       </div>
     </div>
 
-    <div class="card bar">
-      <header class="card-header">
-        <p class="card-header-title">
-          <span class="icon">
-        <i class="fas fa-info" aria-hidden="true"></i>
-      </span> Details
-        </p>
-      </header>
-      <div class="card-content">
-        <div *ngIf="showDetails" class="content">
-
-          <p><b>Protein Group:</b> {{ currentProteinAc }}</p>
-          <!--          <p><b>Gene Name(s):</b> <span *ngFor="let geneName of geneNames"> {{ geneName }}</span></p>-->
-          <!--          <p><b>Protein Name(s):</b> <span *ngFor="let proteinName of proteinNames"> {{ proteinName }}</span></p>-->
-          <p><b>Protein AC(s):</b>
-            <a href="https://www.uniprot.org/uniprot/{{proteinAc}}" target="_blank"
-               *ngFor="let proteinAc of proteinAcs">
-              {{ proteinAc }}
-            </a>
-          </p>
-        </div>
-        <div *ngIf="!showDetails">
-          Please select a node for further information.
-        </div>
-
-      </div>
-    </div>
-
-    <div class="card bar">
-            <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">
-<!--          <h2>Summary</h2>-->
-          <p>Hold down the CTRL button to select multiple proteins.</p>
-          <figure class="image">
-            <!--            <img src="assets/boxplot.png" alt="Boxplots">-->
-          </figure>
-          <button class="button is-primary" *ngIf="!inSelection(currentProteinAc)"
-                  (click)="addToSelection(currentProteinAc)">Select for analysis
-          </button>
-          <button class="button is-danger" *ngIf="inSelection(currentProteinAc)"
-                  (click)="removeFromSelection(currentProteinAc)">Remove from analysis
-          </button>
-        </div>
-      </div>
-    </div>
-
   </div>
 
   <div class="content network">
@@ -239,7 +239,7 @@
     <div class="card network">
       <header class="card-header">
         <p class="card-header-title">
-          SARS-CoV-2 Protein-Protein Interaction Network
+          Protein-Protein Interaction Network
         </p>
       </header>
       <div class="card-content">

src/app/pages/explorer-page/explorer-page.component.ts

@@ -42,6 +42,8 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
   public queryItems = [];
   public showAnalysisDialog = false;
 
+  public currentDataset = [];
+
   public datasetItems: Array<{ label: string, datasets: string, data: Array<[string, string]> }> = [
     {label: 'All', datasets: 'TUM & Krogan', data: [['TUM', 'HCoV'], ['TUM', 'SARS-CoV2'], ['Krogan', 'SARS-CoV2']]},
     {label: 'HCoV', datasets: 'TUM', data: [['TUM', 'HCoV']]},
@@ -143,6 +145,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
   }
 
   private async getNetwork(dataset: Array<[string, string]>) {
+    this.currentDataset = dataset;
     const data: any = await this.api.getNetwork(dataset);
     this.proteins = data.proteins;
     this.effects = data.effects;

src/styles.scss

@@ -71,18 +71,18 @@ div.card.bar {
 
 div.content.network {
   width: 68%;
-  height: calc(100vh - 90px);
+  height: calc(100vh - 100px);
   margin-left: auto;
   margin-right: auto;
 }
 
 div.card.network {
   width: 100%;
-  height: calc(100vh - 100px);
+  height: calc(100vh - 80px);
 }
 
 div.network {
-   height: calc(100vh - 220px);
+   height: calc(100vh - 200px);
 }
 
 div.center {