From 1c80a30c6ad94a804556953f1dd07312216da21c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20Sp=C3=A4th?= <julian.spaeth@wzw.tum.de>
Date: Sun, 5 Apr 2020 14:39:04 +0200
Subject: [PATCH] Enhance analysis window
---
.../analysis-window.component.html | 125 +++++++++++-------
.../analysis-window.component.ts | 4 +-
.../explorer-page.component.html | 25 +++-
.../explorer-page/explorer-page.component.ts | 4 +-
src/styles.scss | 2 +-
5 files changed, 103 insertions(+), 57 deletions(-)
diff --git a/src/app/components/analysis-window/analysis-window.component.html b/src/app/components/analysis-window/analysis-window.component.html
index 681e71e2..25d99deb 100644
--- a/src/app/components/analysis-window/analysis-window.component.html
+++ b/src/app/components/analysis-window/analysis-window.component.html
@@ -13,88 +13,121 @@
</span>
</a>
</header>
+
<div class="card-content">
<div class="content">
<div class="network center" #network>
<button class="button is-loading center">Loading</button>
</div>
+ <footer class="card-footer">
+ <div class="field has-addons">
+ <p class="control">
+ <button class="button is-rounded" (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" (click)="toggleDrugs(false)">
+ <span class="icon is-small">
+ <i class="fas fa-times"></i>
+ </span>
+ <span>Drugs Off</span>
+ </button>
+ </p>
+ </div>
+ <button class="card-footer-item button is-primary">
+ <span class="icon">
+ <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
+ </span> <span>Export Results</span>
+ </button>
+ <button class="card-footer-item button">
+ <span class="icon">
+ <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
+ </span> <span>Save as PNG</span>
+ </button>
+ <button class="card-footer-item button is-danger">
+ <span class="icon">
+ <i class="fas fa-trash" aria-hidden="true"></i>
+ </span> <span>Delete Analysis</span>
+ </button>
+ </footer>
</div>
- <button (click)="toggleDrugs()">Show/hide</button>
</div>
- <footer class="card-footer">
- </footer>
- </div>
- <div class="card analysis" *ngIf="task && !task.info.startedAt">
- <header class="card-header">
- <p class="card-header-title">
+ <div class="card analysis" *ngIf="task && !task.info.startedAt">
+ <header class="card-header">
+ <p class="card-header-title">
<span class="icon">
<i class="fas fa-cog" aria-hidden="true"></i>
</span>
- Analysis Queued...
- </p>
- <a (click)="close()" class="card-header-icon" aria-label="close">
+ Analysis Queued...
+ </p>
+ <a (click)="close()" class="card-header-icon" aria-label="close">
<span class="icon">
<i class="fas fa-times" aria-hidden="true"></i>
</span>
- </a>
- </header>
- <div class="card-content">
- <div class="content">
- The analysis is queued
- <!--TODO: Display queue information-->
+ </a>
+ </header>
+ <div class="card-content">
+ <div class="content">
+ The analysis is queued
+ <!--TODO: Display queue information-->
+ </div>
</div>
+ <footer class="card-footer">
+ </footer>
</div>
- <footer class="card-footer">
- </footer>
- </div>
- <div class="card analysis" *ngIf="task && task.info.startedAt && !task.info.done">
- <header class="card-header">
- <p class="card-header-title">
+ <div class="card analysis" *ngIf="task && task.info.startedAt && !task.info.done">
+ <header class="card-header">
+ <p class="card-header-title">
<span class="icon">
<i class="fas fa-cog fa-spin" aria-hidden="true"></i>
</span>
- Analysis in Progress...
- </p>
- <a (click)="close()" class="card-header-icon" aria-label="close">
+ Analysis in Progress...
+ </p>
+ <a (click)="close()" class="card-header-icon" aria-label="close">
<span class="icon">
<i class="fas fa-times" aria-hidden="true"></i>
</span>
- </a>
- </header>
- <div class="card-content">
- <div class="content">
- The analysis is in progress
- <!--TODO: Display analysis progress-->
+ </a>
+ </header>
+ <div class="card-content">
+ <div class="content">
+ The analysis is in progress
+ <!--TODO: Display analysis progress-->
+ </div>
</div>
+ <footer class="card-footer">
+ </footer>
</div>
- <footer class="card-footer">
- </footer>
- </div>
- <div class="card analysis" *ngIf="!task">
- <header class="card-header">
- <p class="card-header-title">
+ <div class="card analysis" *ngIf="!task">
+ <header class="card-header">
+ <p class="card-header-title">
<span class="icon">
<i class="fas fa-question" aria-hidden="true"></i>
</span>
- Analysis not found
- </p>
- <a (click)="close()" class="card-header-icon" aria-label="more options">
+ Analysis not found
+ </p>
+ <a (click)="close()" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-times" aria-hidden="true"></i>
</span>
- </a>
- </header>
- <div class="card-content">
- <div class="content">
+ </a>
+ </header>
+ <div class="card-content">
+ <div class="content">
<span class="notification is-danger">
The analysis you were looking for is either gone or never existed.
</span>
+ </div>
</div>
+ <footer class="card-footer">
+ </footer>
</div>
- <footer class="card-footer">
- </footer>
</div>
</div>
diff --git a/src/app/components/analysis-window/analysis-window.component.ts b/src/app/components/analysis-window/analysis-window.component.ts
index 0c5551c6..f9de7f0f 100644
--- a/src/app/components/analysis-window/analysis-window.component.ts
+++ b/src/app/components/analysis-window/analysis-window.component.ts
@@ -155,8 +155,8 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
};
}
- public toggleDrugs() {
- this.showDrugs = !this.showDrugs;
+ public toggleDrugs(bool) {
+ this.showDrugs = bool;
if (!this.showDrugs) {
this.nodeData.nodes.remove(this.drugNodes);
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 2f80b234..06dbaa5b 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -112,13 +112,26 @@
<button (click)="toCanvas()" class="card-footer-item button is-primary">
<span class="icon">
<i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
- </span>
+ </span> <span>Save as PNG</span>
</button>
- <label class="checkbox">
- <input type="checkbox" class="checkbox" [(ngModel)]="physicsEnabled"
- (ngModelChange)="physicsEnabled = $event; updatePhysicsEnabled()">
- Physics enabled
- </label>
+ <div class="field has-addons">
+ <p class="control">
+ <button class="button is-rounded" (click)="updatePhysicsEnabled(true)">
+ <span class="icon is-small">
+ <i class="fas fa-wind"></i>
+ </span>
+ <span>Animation On</span>
+ </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>
+ </p>
+ </div>
</footer>
</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 0ec2b704..83fd4f92 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -347,10 +347,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
- public updatePhysicsEnabled() {
+ public updatePhysicsEnabled(bool) {
this.network.setOptions({
physics: {
- enabled: this.physicsEnabled,
+ enabled: bool,
stabilization: {
enabled: false,
},
diff --git a/src/styles.scss b/src/styles.scss
index f241c27e..fb9bf9fa 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -32,7 +32,7 @@ body {
}
.button.is-success, .button.is-success:hover, .button.is-success:disabled {
- background-color: #06D6A0;
+ background-color: #48C774;
}
div.navbar-menu {
--
GitLab