collabs cards

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

@@ -6,14 +6,21 @@
     <div>
       <div class="covex bar-left">
 
-        <div class="card bar-small">
+        <div class="card bar-large">
           <header class="card-header">
             <p class="card-header-title">
           <span class="icon">
         <i class="fas fa-database" aria-hidden="true"></i>
       </span> Choose Dataset
             </p>
+            <a (click)="collabsData = !collabsData" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options">
+             <span class="icon">
+               <i class="fas fa-angle-down" aria-hidden="true"></i>
+             </span>
+            </a>
           </header>
+          <div *ngIf="collabsData">
+
             <div class="card-content">
               <app-select-dataset [datasetItems]="datasetItems"  [selectedDataset]="selectedDataset"
                                   (selectedDatasetChange)="selectedDataset = $event; createNetwork($event.data)">
@@ -21,15 +28,22 @@
 
             </div>
           </div>
+        </div>
 
-        <div class="card bar-medium">
+        <div class="card bar-large">
           <header class="card-header">
             <p class="card-header-title">
           <span class="icon">
         <i class="fas fa-info" aria-hidden="true"></i>
       </span> Network Overview
             </p>
+            <a (click)="collabsOverview= !collabsOverview" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options">
+             <span class="icon">
+               <i class="fas fa-angle-down" aria-hidden="true"></i>
+             </span>
+            </a>
           </header>
+          <div *ngIf="collabsOverview">
             <div class="card-content">
               <nav class="level" *ngIf="proteinData">
                 <div class="level-item has-text-centered">
@@ -53,15 +67,22 @@
               </nav>
             </div>
           </div>
+        </div>
 
-        <div class="card bar-small">
+        <div class="card bar-large" >
           <header class="card-header">
             <p class="card-header-title">
           <span class="icon">
         <i class="fas fa-search" aria-hidden="true"></i>
       </span> Query Protein
             </p>
+            <a (click)="collabsQuery = !collabsQuery" data-action="collapse" class="card-header-icon is-hidden-fullscreen" aria-label="more options">
+           <span class="icon">
+             <i class="fas fa-angle-down" aria-hidden="true"></i>
+           </span>
+          </a>
           </header >
+          <div *ngIf="collabsQuery">
             <div class="card-content">
               <div class="field">
                 <div class="control">
@@ -71,6 +92,7 @@
               </div>
             </div>
           </div>
+      </div>
 
         <div class="card bar-large">
           <header class="card-header">
@@ -95,7 +117,6 @@
                 </label>
               </div>
             </div>
-          </div>
           <footer class="card-footer">
             <a (click)="reset($event);" class="card-footer-item has-text-danger">
               <span class="icon">
@@ -108,6 +129,7 @@
           </footer>
         </div>
       </div>
+      </div>
 
       <div class="covex network">
         <div class="card network">
@@ -309,7 +331,6 @@
             To select proteins, click them while pressing CTRL.
           </i>
         </div>
-      </div>
       <footer class="card-footer">
         <a (click)="addAllHostProteins()" class="card-footer-item has-text-success">
           <span class="icon">
@@ -339,6 +360,7 @@
         </a>
       </footer>
     </div>
+    </div>
 
 
   </div>

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

@@ -28,6 +28,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
   public collabsTask = true;
   public collabsSelection = true;
   public collabsDFilter = true;
+  public collabsQuery = true;
+  public collabsData = true;
+  public collabsOverview = true;
   public currentProteinAc = '';
   public geneNames: Array<string> = [];
   public proteinNames: Array<string> = [];