diff --git a/src/app/components/analysis-window/analysis-window.component.html b/src/app/components/analysis-window/analysis-window.component.html index 9d3ee34a8caa080a1c9a4f7bcf79127d8bccaaf0..a638b5b12b71ff5c38bd1b8582baa81d6539f46d 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 8e50e28f1298232ba2e2fe70662f7182e1757c83..c61f068482b51a8efe81649814472245ee4f72b8 100644 --- a/src/app/components/analysis-window/analysis-window.component.ts +++ b/src/app/components/analysis-window/analysis-window.component.ts @@ -49,6 +49,9 @@ export class AnalysisWindowComponent implements OnInit, OnChanges { private drugNodes = []; public showDrugs = false; public tab = 'network'; + public physicsEnabled = true; + + private proteins: any; @@ -88,7 +91,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); @@ -365,6 +381,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) => {