Merge branch 'bars_enhance' into 'master'

enhance the lift and the right bar and add the protein selection to the right bar

See merge request covid-19/frontend!31

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",

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>

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

-.card {
-  height: 100%;
-  display:flex;
-  flex-direction: column;
-}
 
-.card-block{
-  height: 100%;
-}
-
-.bait-frame {
-  height: 300px;
-  overflow: scroll;
-}

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);