Skip to content
Snippets Groups Projects
Commit 948bbdc8 authored by Julian Späth's avatar Julian Späth Committed by Julian Matschinske
Browse files

Beautify site

parent 96cfc057
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 198 additions and 134 deletions
src/app/analysis.service.ts
+ 12
− 0
View file @ 948bbdc8
......@@ -26,6 +26,18 @@ export class AnalysisService {
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() {
return await this.http.get<any>(`${environment.backend}tasks/?tokens=${JSON.stringify(this.tokens)}`).toPromise().catch((e) => {
clearInterval(this.intervalId);
......
src/app/components/analysis-window/analysis-window.component.html
+ 36
− 26
View file @ 948bbdc8
......@@ -16,26 +16,15 @@
<div class="card-content">
<div class="content">
<div class="card-image">
<div class="network center" #network>
<button class="button is-loading center">Loading</button>
</div>
</div>
<footer class="card-footer">
<div class="field has-addons">
<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>
<button class="card-footer-item button is-primary" [disabled]="true">
<button class="button is-rounded is-success" [disabled]="true">
<span class="icon">
<i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
</span>
......@@ -43,15 +32,19 @@
Export Results
</span>
</button>
<button class="card-footer-item button" [disabled]="true">
</p>
<p class="control">
<button class="button is-primary" [disabled]="true">
<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
Screenshot
</span>
</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">
<i class="fas fa-trash" aria-hidden="true"></i>
</span>
......@@ -59,6 +52,23 @@
Delete Analysis
</span>
</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>
</div>
</div>
......
src/app/components/analysis-window/analysis-window.component.ts
+ 3
− 3
View file @ 948bbdc8
......@@ -36,7 +36,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
public showDrugs = false;
private result: any;
constructor(private http: HttpClient, private analysis: AnalysisService) {
constructor(private http: HttpClient, public analysis: AnalysisService) {
}
async ngOnInit() {
......@@ -119,7 +119,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
node.x = pos[nodeId].x;
node.y = pos[nodeId].y;
if (selected) {
node.color = '#c42eff';
node.color = '#48C774';
this.nodeData.nodes.update(node);
} else {
node.color = '#e2b600';
......@@ -169,7 +169,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
private mapProteinToNode(protein: any): any {
let color = '#e2b600';
if (this.analysis.inSelection(protein)) {
color = '#c42eff';
color = '#48C774';
}
return {
id: `p_${protein.proteinAc}`,
......
src/app/components/task-list/task-list.component.html
+ 14
− 6
View file @ 948bbdc8
......@@ -2,17 +2,25 @@
<div class="list is-hoverable">
<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)">
<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 Position:{{task.stats.queuePosition}}
</div>
<div *ngIf="task.info.startedAt && !task.info.done" (click)="open(task.token)">
<a>Algorithm: {{task.info.algorithm}}</a><br>
<div *ngIf="task.info.startedAt && !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-spinner" aria-hidden="true"></i></span>
<br>
<progress class="progress is-primary" [value]="task.info.progress * 100" max="100"></progress>
</div>
<div *ngIf="task.info.done" (click)="open(task.token)">
<span>Algorithm: {{task.info.algorithm}}</span>
<span class="icon is-success"><i class="fas fa-check is-success" aria-hidden="true"></i>
<div *ngIf="task.info.failed && task.info.finishedAt == null">
<span><b>{{task.info.algorithm}} ({{task.info.startedAt | date :'short'}})</b></span>
<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>
</div>
</a>
......
src/app/pages/explorer-page/explorer-page.component.html
+ 106
− 95
View file @ 948bbdc8
......@@ -90,9 +90,14 @@
</div>
</div>
<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
</button>
</span>
</a>
</footer>
</div>
</div>
......@@ -111,14 +116,15 @@
</div>
</div>
<footer class="card-footer">
<button (click)="toCanvas()" class="card-footer-item button is-primary">
<button (click)="toCanvas()" class="button is-primary">
<span class="icon">
<i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
</span> <span>Save as PNG</span>
<i class="fas fa-camera" aria-hidden="true"></i>
</span> <span>Screenshot</span>
</button>
<div class="field has-addons">
<div class="field has-addons footer-toggle-buttons">
<p class="control">
<button class="button is-rounded" (click)="updatePhysicsEnabled(true)">
<button class="button is-rounded" [class.is-primary]="physicsEnabled"
(click)="updatePhysicsEnabled(true)">
<span class="icon is-small">
<i class="fas fa-wind"></i>
</span>
......@@ -126,11 +132,9 @@
</button>
</p>
<p class="control">
<button class="button is-rounded" (click)="updatePhysicsEnabled(false)">
<span class="icon is-small">
<i class="fas fa-times"></i>
</span>
<span>Animation Off</span>
<button class="button is-rounded" [class.is-primary]="!physicsEnabled"
(click)="updatePhysicsEnabled(false)">
<span>Off</span>
</button>
</p>
</div>
......@@ -147,7 +151,7 @@
<div class="covex bar-right">
<div class="card bar-medium">
<div class="card bar-large">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
......@@ -157,27 +161,44 @@
</header>
<div class="card-content">
<div *ngIf="showDetails">
<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>
<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 *ngIf="!showDetails">
Please select a node for further information.
<!-- <a (click)="selectedAnalysisToken = 'oy4UsXfBDobTucdQBhN9IUzfnpqKwzqx'"> Open Analysis Window </a>-->
</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">
......@@ -186,44 +207,18 @@
</p>
</header>
<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"
class="button is-primary"
class="button is-primary is-fullwidth"
[disabled]="analysis.getCount() === 0">
<span>
<span class="icon">
<i class="fa fa-list"></i>
<i class="fa fa-rocket"></i>
</span>
<span>
Open Analysis
Launch Analysis
</span>
</span>
</button>
</div>
</div>
<div class="card bar-large">
<header class="card-header">
......@@ -233,9 +228,19 @@
</span> Tasks
</p>
</header>
<div class="card-content">
<div class="card-content overflow">
<app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
</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">
......@@ -247,7 +252,7 @@
</p>
</header>
<div class="card-content overflow">
<table class="table">
<table class="table" *ngIf="analysis.getCount() > 0">
<thead>
<tr>
<td>AC</td>
......@@ -258,24 +263,30 @@
<tr *ngFor="let p of analysis.getSelection()">
<td>{{p.proteinAc}}</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>
</button>
</td>
</tr>
</tbody>
</table>
<i *ngIf="analysis.getCount() === 0">
To select proteins, click them while pressing CTRL.
</i>
</div>
<footer class="card-footer">
<button [disabled]="analysis.getSelection().length < 1" (click)="analysis.resetSelection();"
class="card-footer-item button is-danger">
<a (click)="analysis.resetSelection()" class="card-footer-item has-text-danger">
<span class="icon">
<i class="fa fa-refresh"></i>
</span>
<span>
Reset
</button>
</span>
</a>
</footer>
</div>
</div>
</div>
</div>
</div>
src/app/pages/explorer-page/explorer-page.component.ts
+ 4
− 3
View file @ 948bbdc8
......@@ -48,7 +48,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public selectedAnalysisToken: string | null = null;
public currentDataset = [];
private array = [0];
private screenshotArray = [0];
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']]},
......@@ -348,9 +348,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
public updatePhysicsEnabled(bool) {
this.physicsEnabled = bool;
this.network.setOptions({
physics: {
enabled: bool,
enabled: this.physicsEnabled,
stabilization: {
enabled: false,
},
......@@ -446,7 +447,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
public toCanvas() {
this.array.forEach((key, index) => {
this.screenshotArray.forEach((key, index) => {
const elem = document.getElementById(index.toString());
html2canvas(elem).then((canvas) => {
const generatedImage = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
......
src/styles.scss
+ 23
− 1
View file @ 948bbdc8
......@@ -139,9 +139,31 @@ div.covex.explorer {
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%; }
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.
Please register or to comment