Skip to content
Snippets Groups Projects
Commit 9f9db8ed authored by Mhaned Oubounyt's avatar Mhaned Oubounyt Committed by Julian Späth
Browse files

Add toggle animation button

parent ad875bae
No related branches found
No related tags found
No related merge requests found
...@@ -44,12 +44,10 @@ ...@@ -44,12 +44,10 @@
</div> </div>
<div class="content tab-content" *ngIf="task && task.info.done" [class.is-visible]="tab === 'network'"> <div class="content tab-content" *ngIf="task && task.info.done" [class.is-visible]="tab === 'network'">
<div class="card-image"> <div class="card-image">
<div class="parent" id="1">
<div class="network center" #network> <div class="network center" #network>
<button class="button is-loading center">Loading</button> <button class="button is-loading center">Loading</button>
</div> </div>
</div> </div>
</div>
<footer class="card-footer toolbar"> <footer class="card-footer toolbar">
<div class="field has-addons"> <div class="field has-addons">
<p class="control"> <p class="control">
...@@ -63,7 +61,7 @@ ...@@ -63,7 +61,7 @@
</button> </button>
</p> </p>
<p class="control"> <p class="control">
<button (click)="screenshot()" class="button is-primary is-rounded" > <button class="button is-primary is-rounded" [disabled]="true">
<span class="icon"> <span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i> <i class="fas fa-camera" aria-hidden="true"></i>
</span> </span>
...@@ -83,17 +81,19 @@ ...@@ -83,17 +81,19 @@
</button> </button>
</p> </p>
</div> </div>
<div class="field has-addons footer-toggle-buttons" *ngIf="false"> <!-- temporarliy disabled --> <div class="field has-addons footer-toggle-buttons">
<p class="control"> <p class="control">
<button class="button is-rounded" [class.is-primary]="showDrugs" (click)="toggleDrugs(true)"> <button class="button is-rounded" [class.is-primary]="physicsEnabled"
(click)="updatePhysicsEnabled(true)">
<span class="icon is-small"> <span class="icon is-small">
<i class="fas fa-capsules"></i> <i class="fas fa-wind"></i>
</span> </span>
<span>Drugs On</span> <span>Animation On</span>
</button> </button>
</p> </p>
<p class="control"> <p class="control">
<button class="button is-rounded" [class.is-primary]="!showDrugs" (click)="toggleDrugs(false)"> <button class="button is-rounded" [class.is-primary]="!physicsEnabled"
(click)="updatePhysicsEnabled(false)">
<span>Off</span> <span>Off</span>
</button> </button>
</p> </p>
......
...@@ -46,6 +46,9 @@ export class AnalysisWindowComponent implements OnInit, OnChanges { ...@@ -46,6 +46,9 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
private drugNodes = []; private drugNodes = [];
public showDrugs = false; public showDrugs = false;
public tab = 'network'; public tab = 'network';
public physicsEnabled = true;
public tableDrugs: Array<Drug & Scored> = []; public tableDrugs: Array<Drug & Scored> = [];
public tableProteins: Array<Protein & Scored> = []; public tableProteins: Array<Protein & Scored> = [];
...@@ -82,7 +85,20 @@ export class AnalysisWindowComponent implements OnInit, OnChanges { ...@@ -82,7 +85,20 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
this.nodeData.edges = new vis.DataSet(edges); this.nodeData.edges = new vis.DataSet(edges);
const container = this.networkEl.nativeElement; 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); this.network = new vis.Network(container, this.nodeData, options);
...@@ -344,6 +360,21 @@ export class AnalysisWindowComponent implements OnInit, OnChanges { ...@@ -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() { public screenshot() {
const elem = document.getElementById(this.indexscreenshot.toString()); const elem = document.getElementById(this.indexscreenshot.toString());
html2canvas(elem).then((canvas) => { html2canvas(elem).then((canvas) => {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment