Skip to content
Snippets Groups Projects
Commit 1aba5e56 authored by Julian Späth's avatar Julian Späth
Browse files

Merge branch 'fix-smaller-issues' into 'master' 

Fix smaller issues

See merge request covid-19/frontend!25
parents 7be3535f 37e0f1c5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/pages/explorer-page/explorer-page.component.html
+ 60
− 60
View file @ 1aba5e56
......@@ -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">
......
src/app/pages/explorer-page/explorer-page.component.ts
+ 3
− 0
View file @ 1aba5e56
......@@ -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;
......
src/styles.scss
+ 3
− 3
View file @ 1aba5e56
......@@ -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 {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment