Skip to content
Snippets Groups Projects
Commit a21d8887 authored by Julian Matschinske's avatar Julian Matschinske
Browse files

Merge branch 'beautify_site' into 'master' 

Beautify site

See merge request covid-19/frontend!42
parents 96cfc057 948bbdc8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 198 additions and 134 deletions
src/app/analysis.service.ts
+ 12
− 0
View file @ a21d8887
...@@ -26,6 +26,18 @@ export class AnalysisService { ...@@ -26,6 +26,18 @@ export class AnalysisService {
this.startWatching(); this.startWatching();
} }
removeTask(token) {
this.tokens = this.tokens.filter((item) => item !== token);
this.tasks = this.tasks.filter((item) => item.token !== (token));
localStorage.setItem('tokens', JSON.stringify(this.tokens));
}
removeAllTasks() {
this.tasks.forEach((task) => {
this.removeTask(task.token);
});
}
async getTasks() { async getTasks() {
return await this.http.get<any>(`${environment.backend}tasks/?tokens=${JSON.stringify(this.tokens)}`).toPromise().catch((e) => { return await this.http.get<any>(`${environment.backend}tasks/?tokens=${JSON.stringify(this.tokens)}`).toPromise().catch((e) => {
clearInterval(this.intervalId); clearInterval(this.intervalId);
......
src/app/components/analysis-window/analysis-window.component.html
+ 36
− 26
View file @ a21d8887
...@@ -16,49 +16,59 @@ ...@@ -16,49 +16,59 @@
<div class="card-content"> <div class="card-content">
<div class="content"> <div class="content">
<div class="network center" #network> <div class="card-image">
<button class="button is-loading center">Loading</button> <div class="network center" #network>
<button class="button is-loading center">Loading</button>
</div>
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<div class="field has-addons"> <div class="field has-addons">
<p class="control"> <p class="control">
<button class="button is-rounded" [class.is-primary]="showDrugs" (click)="toggleDrugs(true)"> <button class="button is-rounded is-success" [disabled]="true">
<span class="icon is-small">
<i class="fas fa-capsules"></i>
</span>
<span>Drugs On</span>
</button>
</p>
<p class="control">
<button class="button is-rounded" [class.is-primary]="!showDrugs" (click)="toggleDrugs(false)">
<span>Off</span>
</button>
</p>
</div>
<button class="card-footer-item button is-primary" [disabled]="true">
<span class="icon"> <span class="icon">
<i class="fas fa-cloud-download-alt" aria-hidden="true"></i> <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
</span> </span>
<span> <span>
Export Results Export Results
</span> </span>
</button> </button>
<button class="card-footer-item button" [disabled]="true"> </p>
<p class="control">
<button class="button is-primary" [disabled]="true">
<span class="icon"> <span class="icon">
<i class="fas fa-cloud-download-alt" aria-hidden="true"></i> <i class="fas fa-camera" aria-hidden="true"></i>
</span> </span>
<span> <span>
Save as PNG Screenshot
</span> </span>
</button> </button>
<button class="card-footer-item button is-danger" [disabled]="true"> </p>
<p class="control">
<button class="button is-danger is-rounded" (click)="analysis.removeTask(token)">
<span class="icon"> <span class="icon">
<i class="fas fa-trash" aria-hidden="true"></i> <i class="fas fa-trash" aria-hidden="true"></i>
</span> </span>
<span> <span>
Delete Analysis Delete Analysis
</span> </span>
</button> </button>
</p>
</div>
<div class="field has-addons footer-toggle-buttons">
<p class="control">
<button class="button is-rounded" [class.is-primary]="showDrugs" (click)="toggleDrugs(true)">
<span class="icon is-small">
<i class="fas fa-capsules"></i>
</span>
<span>Drugs On</span>
</button>
</p>
<p class="control">
<button class="button is-rounded" [class.is-primary]="!showDrugs" (click)="toggleDrugs(false)">
<span>Off</span>
</button>
</p>
</div>
</footer> </footer>
</div> </div>
</div> </div>
......
src/app/components/analysis-window/analysis-window.component.ts
+ 3
− 3
View file @ a21d8887
...@@ -36,7 +36,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges { ...@@ -36,7 +36,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
public showDrugs = false; public showDrugs = false;
private result: any; private result: any;
constructor(private http: HttpClient, private analysis: AnalysisService) { constructor(private http: HttpClient, public analysis: AnalysisService) {
} }
async ngOnInit() { async ngOnInit() {
...@@ -119,7 +119,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges { ...@@ -119,7 +119,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
node.x = pos[nodeId].x; node.x = pos[nodeId].x;
node.y = pos[nodeId].y; node.y = pos[nodeId].y;
if (selected) { if (selected) {
node.color = '#c42eff'; node.color = '#48C774';
this.nodeData.nodes.update(node); this.nodeData.nodes.update(node);
} else { } else {
node.color = '#e2b600'; node.color = '#e2b600';
...@@ -169,7 +169,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges { ...@@ -169,7 +169,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
private mapProteinToNode(protein: any): any { private mapProteinToNode(protein: any): any {
let color = '#e2b600'; let color = '#e2b600';
if (this.analysis.inSelection(protein)) { if (this.analysis.inSelection(protein)) {
color = '#c42eff'; color = '#48C774';
} }
return { return {
id: `p_${protein.proteinAc}`, id: `p_${protein.proteinAc}`,
......
src/app/components/task-list/task-list.component.html
+ 14
− 6
View file @ a21d8887
...@@ -2,17 +2,25 @@ ...@@ -2,17 +2,25 @@
<div class="list is-hoverable"> <div class="list is-hoverable">
<a *ngFor="let task of analysis.tasks" class="list-item" [class.is-active]="task.token === token"> <a *ngFor="let task of analysis.tasks" class="list-item" [class.is-active]="task.token === token">
<div *ngIf="!task.info.startedAt" (click)="open(task.token)"> <div *ngIf="!task.info.startedAt" (click)="open(task.token)">
<b>Algorithm: {{task.info.algorithm}}</b><br> <span><b>{{task.info.algorithm}} (Queued)</b></span>
<span class="icon"><i class="fas fa-pause" aria-hidden="true"></i></span><br>
Queue Length: {{task.stats.queueLength}}<br> Queue Length: {{task.stats.queueLength}}<br>
Queue Position:{{task.stats.queuePosition}} Queue Position:{{task.stats.queuePosition}}
</div> </div>
<div *ngIf="task.info.startedAt && !task.info.done" (click)="open(task.token)"> <div *ngIf="task.info.startedAt && !task.info.done && !task.info.failed" (click)="open(task.token)">
<a>Algorithm: {{task.info.algorithm}}</a><br> <span><b>{{task.info.algorithm}} ({{task.info.startedAt | date :'short'}})</b></span>
<span class="icon"><i class="fas fa-spinner" aria-hidden="true"></i></span>
<br>
<progress class="progress is-primary" [value]="task.info.progress * 100" max="100"></progress> <progress class="progress is-primary" [value]="task.info.progress * 100" max="100"></progress>
</div> </div>
<div *ngIf="task.info.done" (click)="open(task.token)"> <div *ngIf="task.info.failed && task.info.finishedAt == null">
<span>Algorithm: {{task.info.algorithm}}</span> <span><b>{{task.info.algorithm}} ({{task.info.startedAt | date :'short'}})</b></span>
<span class="icon is-success"><i class="fas fa-check is-success" aria-hidden="true"></i> <span class="icon"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
</span>
</div>
<div *ngIf="task.info.done && !task.info.failed" (click)="open(task.token)">
<span><b>{{task.info.algorithm}} ({{task.info.startedAt | date :'short'}})</b></span>
<span class="icon"><i class="fas fa-check" aria-hidden="true"></i>
</span> </span>
</div> </div>
</a> </a>
......
src/app/pages/explorer-page/explorer-page.component.html
+ 106
− 95
View file @ a21d8887
...@@ -90,9 +90,14 @@ ...@@ -90,9 +90,14 @@
</div> </div>
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<button (click)="reset($event);" class="card-footer-item button is-danger"> <a (click)="reset($event);" class="card-footer-item has-text-danger">
<span class="icon">
<i class="fa fa-refresh"></i>
</span>
<span>
Reset Reset
</button> </span>
</a>
</footer> </footer>
</div> </div>
</div> </div>
...@@ -111,26 +116,25 @@ ...@@ -111,26 +116,25 @@
</div> </div>
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<button (click)="toCanvas()" class="card-footer-item button is-primary"> <button (click)="toCanvas()" class="button is-primary">
<span class="icon"> <span class="icon">
<i class="fas fa-cloud-download-alt" aria-hidden="true"></i> <i class="fas fa-camera" aria-hidden="true"></i>
</span> <span>Save as PNG</span> </span> <span>Screenshot</span>
</button> </button>
<div class="field has-addons"> <div class="field has-addons footer-toggle-buttons">
<p class="control"> <p class="control">
<button class="button is-rounded" (click)="updatePhysicsEnabled(true)"> <button class="button is-rounded" [class.is-primary]="physicsEnabled"
<span class="icon is-small"> (click)="updatePhysicsEnabled(true)">
<i class="fas fa-wind"></i> <span class="icon is-small">
</span> <i class="fas fa-wind"></i>
</span>
<span>Animation On</span> <span>Animation On</span>
</button> </button>
</p> </p>
<p class="control"> <p class="control">
<button class="button is-rounded" (click)="updatePhysicsEnabled(false)"> <button class="button is-rounded" [class.is-primary]="!physicsEnabled"
<span class="icon is-small"> (click)="updatePhysicsEnabled(false)">
<i class="fas fa-times"></i> <span>Off</span>
</span>
<span>Animation Off</span>
</button> </button>
</p> </p>
</div> </div>
...@@ -147,7 +151,7 @@ ...@@ -147,7 +151,7 @@
<div class="covex bar-right"> <div class="covex bar-right">
<div class="card bar-medium"> <div class="card bar-large">
<header class="card-header"> <header class="card-header">
<p class="card-header-title"> <p class="card-header-title">
<span class="icon"> <span class="icon">
...@@ -157,27 +161,44 @@ ...@@ -157,27 +161,44 @@
</header> </header>
<div class="card-content"> <div class="card-content">
<div *ngIf="showDetails"> <div *ngIf="showDetails">
<p><b>Protein Name:</b> {{ currentProteinAc }}</p> <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> <p><b>Protein AC(s):</b>
<a href="https://www.uniprot.org/uniprot/{{proteinAc}}" target="_blank" <a href="https://www.uniprot.org/uniprot/{{proteinAc}}" target="_blank"
*ngFor="let proteinAc of proteinAcs"> *ngFor="let proteinAc of proteinAcs">
{{ proteinAc }} {{ proteinAc }}
</a> </a>
</p> </p>
<div class="field has-addons add-remove-toggle">
<p class="control">
<button class="button is-rounded" [class.is-success]="!inSelection(currentProteinAc)"
[disabled]="inSelection(currentProteinAc)"
(click)="addToSelection(currentProteinAc)">
<span class="icon is-small">
<i class="fas fa-plus"></i>
</span>
<span>Add to Analysis</span>
</button>
</p>
<p class="control">
<button class="button is-rounded" [class.is-danger]="inSelection(currentProteinAc)"
[disabled]="!inSelection(currentProteinAc)"
(click)="removeFromSelection(currentProteinAc)">
<span>Remove</span>
<span class="icon is-small">
<i class="fas fa-trash"></i>
</span>
</button>
</p>
</div>
</div> </div>
<div *ngIf="!showDetails"> <div *ngIf="!showDetails">
Please select a node for further information. Please select a node for further information.
<!-- <a (click)="selectedAnalysisToken = 'oy4UsXfBDobTucdQBhN9IUzfnpqKwzqx'"> Open Analysis Window </a>--> <!-- <a (click)="selectedAnalysisToken = 'oy4UsXfBDobTucdQBhN9IUzfnpqKwzqx'"> Open Analysis Window </a>-->
</div> </div>
</div> </div>
</div> </div>
<div class="card bar-medium"> <div class="card bar-large">
<header class="card-header"> <header class="card-header">
<p class="card-header-title"> <p class="card-header-title">
<span class="icon"> <span class="icon">
...@@ -186,96 +207,86 @@ ...@@ -186,96 +207,86 @@
</p> </p>
</header> </header>
<div class="card-content"> <div class="card-content">
<button class="button is-success" *ngIf="!inSelection(currentProteinAc)"
(click)="addToSelection(currentProteinAc)">
<span>
<span class="icon">
<i class="fa fa-plus"></i>
</span>
<span>
Add to Analysis
</span>
</span>
</button>
<button class="button is-danger" *ngIf="inSelection(currentProteinAc)"
(click)="removeFromSelection(currentProteinAc)">
<span>
<span class="icon">
<i class="fa fa-minus"></i>
</span>
<span>
Remove from Analysis
</span>
</span>
</button>
<p></p>
<button (click)="showAnalysisDialog = true" <button (click)="showAnalysisDialog = true"
class="button is-primary" class="button is-primary is-fullwidth"
[disabled]="analysis.getCount() === 0"> [disabled]="analysis.getCount() === 0">
<span class="icon">
<i class="fa fa-rocket"></i>
</span>
<span> <span>
<span class="icon"> Launch Analysis
<i class="fa fa-list"></i>
</span>
<span>
Open Analysis
</span>
</span> </span>
</button> </button>
</div> </div>
</div>
<div class="card bar-large">
<div class="card bar-large"> <header class="card-header">
<header class="card-header"> <p class="card-header-title">
<p class="card-header-title">
<span class="icon"> <span class="icon">
<i class="fas fa-filter" aria-hidden="true"></i> <i class="fas fa-filter" aria-hidden="true"></i>
</span> Tasks </span> Tasks
</p> </p>
</header> </header>
<div class="card-content"> <div class="card-content overflow">
<app-task-list [(token)]="selectedAnalysisToken"></app-task-list> <app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
</div>
</div> </div>
<footer class="card-footer">
<a (click)="analysis.removeAllTasks();" class="card-footer-item has-text-danger">
<span class="icon">
<i class="fa fa-trash"></i>
</span>
<span>
Delete All
</span>
</a>
</footer>
</div>
<div class="card bar-large"> <div class="card bar-large">
<header class="card-header"> <header class="card-header">
<p class="card-header-title"> <p class="card-header-title">
<span class="icon"> <span class="icon">
<i class="fas fa-filter" aria-hidden="true"></i> <i class="fas fa-filter" aria-hidden="true"></i>
</span> Selection </span> Selection
</p> </p>
</header> </header>
<div class="card-content overflow"> <div class="card-content overflow">
<table class="table"> <table class="table" *ngIf="analysis.getCount() > 0">
<thead> <thead>
<tr> <tr>
<td>AC</td> <td>AC</td>
<td>Actions</td> <td>Actions</td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr *ngFor="let p of analysis.getSelection()"> <tr *ngFor="let p of analysis.getSelection()">
<td>{{p.proteinAc}}</td> <td>{{p.proteinAc}}</td>
<td> <td>
<button (click)="analysis.removeProtein(p)" class="button is-small is-danger"> <button (click)="analysis.removeProtein(p)" class="button is-small is-danger is-outlined">
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
</button> </button>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<footer class="card-footer"> <i *ngIf="analysis.getCount() === 0">
<button [disabled]="analysis.getSelection().length < 1" (click)="analysis.resetSelection();" To select proteins, click them while pressing CTRL.
class="card-footer-item button is-danger"> </i>
Reset
</button>
</footer>
</div>
</div> </div>
<footer class="card-footer">
<a (click)="analysis.resetSelection()" class="card-footer-item has-text-danger">
<span class="icon">
<i class="fa fa-refresh"></i>
</span>
<span>
Reset
</span>
</a>
</footer>
</div> </div>
</div> </div>
</div> </div>
src/app/pages/explorer-page/explorer-page.component.ts
+ 4
− 3
View file @ a21d8887
...@@ -48,7 +48,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -48,7 +48,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public selectedAnalysisToken: string | null = null; public selectedAnalysisToken: string | null = null;
public currentDataset = []; public currentDataset = [];
private array = [0]; private screenshotArray = [0];
public datasetItems: Array<{ label: string, datasets: string, data: Array<[string, string]> }> = [ 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: 'All', datasets: 'TUM & Krogan', data: [['TUM', 'HCoV'], ['TUM', 'SARS-CoV2'], ['Krogan', 'SARS-CoV2']]},
...@@ -348,9 +348,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -348,9 +348,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
} }
public updatePhysicsEnabled(bool) { public updatePhysicsEnabled(bool) {
this.physicsEnabled = bool;
this.network.setOptions({ this.network.setOptions({
physics: { physics: {
enabled: bool, enabled: this.physicsEnabled,
stabilization: { stabilization: {
enabled: false, enabled: false,
}, },
...@@ -446,7 +447,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -446,7 +447,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
} }
public toCanvas() { public toCanvas() {
this.array.forEach((key, index) => { this.screenshotArray.forEach((key, index) => {
const elem = document.getElementById(index.toString()); const elem = document.getElementById(index.toString());
html2canvas(elem).then((canvas) => { html2canvas(elem).then((canvas) => {
const generatedImage = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'); const generatedImage = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
......
src/styles.scss
+ 23
− 1
View file @ a21d8887
...@@ -139,9 +139,31 @@ div.covex.explorer { ...@@ -139,9 +139,31 @@ div.covex.explorer {
margin-top: 0; margin-top: 0;
} }
i.fas.is-success { div.field.has-addons.add-remove-toggle {
margin-top: 20px;
}
.fa-check {
color: #48C774;
}
.fa-spinner {
color: #e2b600;
} }
.fa-pause {
color: #e2b600;
}
.fa-exclamation-triangle {
color: #EF476F;
}
div.field.has-addons.footer-toggle-buttons {
margin-left: 20px;
margin-right: 10px;
}
html, body { height: 100%; } html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
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