From 9f9db8edebffcc51dac21c487c8d844ae9f0de36 Mon Sep 17 00:00:00 2001
From: Mhaned Oubounyt <m.oubounyt@tum.de>
Date: Wed, 8 Apr 2020 15:31:32 +0200
Subject: [PATCH] Add toggle animation button
---
.../analysis-window.component.html | 36 +++++++++----------
.../analysis-window.component.ts | 33 ++++++++++++++++-
2 files changed, 50 insertions(+), 19 deletions(-)
diff --git a/src/app/components/analysis-window/analysis-window.component.html b/src/app/components/analysis-window/analysis-window.component.html
index 9d3ee34a..a638b5b1 100644
--- a/src/app/components/analysis-window/analysis-window.component.html
+++ b/src/app/components/analysis-window/analysis-window.component.html
@@ -44,10 +44,8 @@
</div>
<div class="content tab-content" *ngIf="task && task.info.done" [class.is-visible]="tab === 'network'">
<div class="card-image">
- <div class="parent" id="1">
- <div class="network center" #network>
- <button class="button is-loading center">Loading</button>
- </div>
+ <div class="network center" #network>
+ <button class="button is-loading center">Loading</button>
</div>
</div>
<footer class="card-footer toolbar">
@@ -63,7 +61,7 @@
</button>
</p>
<p class="control">
- <button (click)="screenshot()" class="button is-primary is-rounded" >
+ <button class="button is-primary is-rounded" [disabled]="true">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
</span>
@@ -83,21 +81,23 @@
</button>
</p>
</div>
- <div class="field has-addons footer-toggle-buttons" *ngIf="false"> <!-- temporarliy disabled -->
- <p class="control">
- <button class="button is-rounded" [class.is-primary]="showDrugs" (click)="toggleDrugs(true)">
+ <div class="field has-addons footer-toggle-buttons">
+ <p class="control">
+ <button class="button is-rounded" [class.is-primary]="physicsEnabled"
+ (click)="updatePhysicsEnabled(true)">
<span class="icon is-small">
- <i class="fas fa-capsules"></i>
+ <i class="fas fa-wind"></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>
+ <span>Animation On</span>
+ </button>
+ </p>
+ <p class="control">
+ <button class="button is-rounded" [class.is-primary]="!physicsEnabled"
+ (click)="updatePhysicsEnabled(false)">
+ <span>Off</span>
+ </button>
+ </p>
+ </div>
</footer>
</div>
<div class="content tab-content scrollable" *ngIf="task && task.info.done" [class.is-visible]="tab === 'table'">
diff --git a/src/app/components/analysis-window/analysis-window.component.ts b/src/app/components/analysis-window/analysis-window.component.ts
index bad571f4..3236ef98 100644
--- a/src/app/components/analysis-window/analysis-window.component.ts
+++ b/src/app/components/analysis-window/analysis-window.component.ts
@@ -46,6 +46,9 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
private drugNodes = [];
public showDrugs = false;
public tab = 'network';
+ public physicsEnabled = true;
+
+
public tableDrugs: Array<Drug & Scored> = [];
public tableProteins: Array<Protein & Scored> = [];
@@ -82,7 +85,20 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
this.nodeData.edges = new vis.DataSet(edges);
const container = this.networkEl.nativeElement;
- const options = {};
+ const options = {
+ layout: {
+ improvedLayout: false,
+ },
+ edges: {
+ smooth: false,
+ },
+ physics: {
+ enabled: this.physicsEnabled,
+ stabilization: {
+ enabled: false,
+ },
+ },
+ };
this.network = new vis.Network(container, this.nodeData, options);
@@ -344,6 +360,21 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
}
}
+ public updatePhysicsEnabled(bool) {
+ this.physicsEnabled = bool;
+ this.network.setOptions({
+ physics: {
+ enabled: this.physicsEnabled,
+ stabilization: {
+ enabled: false,
+ },
+ // edges : {
+ // smooth : false
+ // },
+ }
+ });
+ }
+
public screenshot() {
const elem = document.getElementById(this.indexscreenshot.toString());
html2canvas(elem).then((canvas) => {
--
GitLab