diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index e04d012906d40149442718b45785525fd1e09f61..274dced29535a40c76072efcd6d2de54ea7bdb97 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/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">
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index d12e3ea87b9a3ab756fdf66aa16d16b9b521388c..84a9b0d1dc14ea6e96be48918f0eac1d287bd306 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/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;
diff --git a/src/styles.scss b/src/styles.scss
index 0e2347e1b13f3af3ca66f85e1559644024d035b5..21670134be2b94d33df39e9fb6bc6f82ae8c7be1 100644
--- a/src/styles.scss
+++ b/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 {