Merge branch 'task1' into 'master'

Add toggle animation button

See merge request covid-19/frontend!61

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'">

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