From d2c8d16c3785c82dfd8652a5119995224218053e Mon Sep 17 00:00:00 2001
From: ge54hev <m.oubounyt@tum.de>
Date: Mon, 6 Apr 2020 20:10:12 +0200
Subject: [PATCH] collabs cards
---
.../explorer-page.component.html | 90 ++++++++++++-------
.../explorer-page/explorer-page.component.ts | 3 +
2 files changed, 59 insertions(+), 34 deletions(-)
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 40624c92..80a425d9 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -6,71 +6,93 @@
<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 class="card-content">
- <app-select-dataset [datasetItems]="datasetItems" [selectedDataset]="selectedDataset"
- (selectedDatasetChange)="selectedDataset = $event; createNetwork($event.data)">
- </app-select-dataset>
+ <div *ngIf="collabsData">
+ <div class="card-content">
+ <app-select-dataset [datasetItems]="datasetItems" [selectedDataset]="selectedDataset"
+ (selectedDatasetChange)="selectedDataset = $event; createNetwork($event.data)">
+ </app-select-dataset>
+
+ </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 class="card-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 *ngIf="collabsOverview">
+ <div class="card-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>
</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 class="level-item has-text-centered">
+ <div>
+ <p class="heading">Host<br>Proteins</p>
+ <p class="title">{{ proteinData.proteins.length }}</p>
+ </div>
</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 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>
- </nav>
+ </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>
- </header>
- <div class="card-content">
- <div class="field">
- <div class="control">
- <app-query-component [queryItems]="queryItems"
- (selectItem)="queryAction($event)"></app-query-component>
+ <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">
+ <app-query-component [queryItems]="queryItems"
+ (selectItem)="queryAction($event)"></app-query-component>
+ </div>
</div>
</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>
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 1ff727b2..92db3b0f 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/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> = [];
--
GitLab