collabs cards

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

@@ -79,7 +79,13 @@
         <i class="fas fa-filter" aria-hidden="true"></i>
       </span> Filter Viral Proteins
             </p>
+            <a (click)="collabsDFilter = !collabsDFilter" 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="collabsDFilter">
             <div class="card-content overflow">
               <div *ngFor="let bait of viralProteinCheckboxes">
                 <label class="checkbox">
@@ -89,6 +95,7 @@
                 </label>
               </div>
             </div>
+          </div>
           <footer class="card-footer">
             <a (click)="reset($event);" class="card-footer-item has-text-danger">
               <span class="icon">
@@ -158,7 +165,13 @@
         <i class="fas fa-info" aria-hidden="true"></i>
       </span> {{currentProteinAc}}
         </p>
+        <a (click)="collabsDetails = !collabsDetails" 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="collabsDetails">
         <div class="card-content">
           <div *ngIf="showDetails">
             <p><b>Protein Name:</b> {{ currentProteinAc }}</p>
@@ -197,6 +210,7 @@
           </div>
         </div>
       </div>
+    </div>
 
     <div class="card bar-large">
       <header class="card-header">
@@ -205,7 +219,13 @@
         <i class="fas fa-flask" aria-hidden="true"></i>
       </span> Analysis
         </p>
+        <a (click)="collabsAnalysis = !collabsAnalysis" 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="collabsAnalysis">
         <div class="card-content">
           <button (click)="showAnalysisDialog = true"
                   class="button is-primary is-fullwidth is-rounded"
@@ -219,6 +239,7 @@
           </button>
         </div>
       </div>
+    </div>
 
     <div class="card bar-large">
       <header class="card-header">
@@ -227,7 +248,13 @@
               <i class="fas fa-filter" aria-hidden="true"></i>
             </span> Tasks
         </p>
+        <a (click)="collabsTask = !collabsTask" 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="collabsTask">
         <div class="card-content overflow">
           <app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
         </div>
@@ -242,6 +269,8 @@
           </a>
         </footer>
       </div>
+    </div>
+
 
     <div class="card bar-large">
       <header class="card-header">
@@ -250,7 +279,13 @@
               <i class="fas fa-filter" aria-hidden="true"></i>
             </span> Selection
         </p>
+        <a (click)="collabsSelection = !collabsSelection" 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="collabsSelection">
         <div class="card-content overflow">
           <table class="table" *ngIf="analysis.getCount() > 0">
             <thead>
@@ -274,6 +309,7 @@
             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">

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

@@ -23,6 +23,11 @@ declare var vis: any;
 export class ExplorerPageComponent implements OnInit, AfterViewInit {
 
   public showDetails = false;
+  public collabsAnalysis = true;
+  public collabsDetails = true;
+  public collabsTask = true;
+  public collabsSelection = true;
+  public collabsDFilter = true;
   public currentProteinAc = '';
   public geneNames: Array<string> = [];
   public proteinNames: Array<string> = [];