Add toggle animation button

src/app/components/analysis-window/analysis-window.component.html

@@ -44,12 +44,10 @@
       </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>
-        </div>
         <footer class="card-footer toolbar">
           <div class="field has-addons">
             <p class="control">
@@ -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,17 +81,19 @@
               </button>
             </p>
           </div>
-          <div class="field has-addons footer-toggle-buttons" *ngIf="false"> <!-- temporarliy disabled -->
+              <div class="field has-addons footer-toggle-buttons">
                 <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">
-                  <i class="fas fa-capsules"></i>
+                  <i class="fas fa-wind"></i>
                 </span>
-                <span>Drugs On</span>
+                    <span>Animation On</span>
                   </button>
                 </p>
                 <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>
                   </button>
                 </p>

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) => {