Merge branch 'enhance-analysis-window' into 'master'

Enhance analysis window

See merge request covid-19/frontend!36

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

@@ -13,17 +13,49 @@
         </span>
       </a>
     </header>
+
     <div class="card-content">
       <div class="content">
         <div class="network center" #network>
           <button class="button is-loading center">Loading</button>
         </div>
-      </div>
-      <button (click)="toggleDrugs()">Show/hide</button>
-    </div>
         <footer class="card-footer">
+          <div class="field has-addons">
+            <p class="control">
+              <button class="button is-rounded" (click)="toggleDrugs(true)">
+      <span class="icon is-small">
+        <i class="fas fa-capsules"></i>
+      </span>
+                <span>Drugs On</span>
+              </button>
+            </p>
+            <p class="control">
+              <button class="button is-rounded" (click)="toggleDrugs(false)">
+      <span class="icon is-small">
+        <i class="fas fa-times"></i>
+      </span>
+                <span>Drugs Off</span>
+              </button>
+            </p>
+          </div>
+          <button class="card-footer-item button is-primary">
+                <span class="icon">
+        <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
+      </span> <span>Export Results</span>
+          </button>
+          <button class="card-footer-item button">
+                <span class="icon">
+        <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
+      </span> <span>Save as PNG</span>
+          </button>
+          <button class="card-footer-item button is-danger">
+                <span class="icon">
+        <i class="fas fa-trash" aria-hidden="true"></i>
+      </span> <span>Delete Analysis</span>
+          </button>
         </footer>
       </div>
+    </div>
 
     <div class="card analysis" *ngIf="task && !task.info.startedAt">
       <header class="card-header">
@@ -98,3 +130,4 @@
       </footer>
     </div>
   </div>
+</div>

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

@@ -155,8 +155,8 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
     };
   }
 
-  public toggleDrugs() {
-    this.showDrugs = !this.showDrugs;
+  public toggleDrugs(bool) {
+    this.showDrugs = bool;
 
     if (!this.showDrugs) {
       this.nodeData.nodes.remove(this.drugNodes);

src/app/pages/explorer-page/explorer-page.component.html

@@ -112,13 +112,26 @@
               <button (click)="toCanvas()" class="card-footer-item button is-primary">
                 <span class="icon">
         <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
+      </span> <span>Save as PNG</span>
+              </button>
+              <div class="field has-addons">
+                <p class="control">
+                  <button class="button is-rounded" (click)="updatePhysicsEnabled(true)">
+                    <span class="icon is-small">
+                      <i class="fas fa-wind"></i>
                     </span>
+                    <span>Animation On</span>
                   </button>
-              <label class="checkbox">
-                <input type="checkbox" class="checkbox" [(ngModel)]="physicsEnabled"
-                       (ngModelChange)="physicsEnabled = $event; updatePhysicsEnabled()">
-                Physics enabled
-              </label>
+                </p>
+                <p class="control">
+                  <button class="button is-rounded" (click)="updatePhysicsEnabled(false)">
+                    <span class="icon is-small">
+                      <i class="fas fa-times"></i>
+                    </span>
+                    <span>Animation Off</span>
+                  </button>
+                </p>
+              </div>
             </footer>
           </div>
         </div>

src/app/pages/explorer-page/explorer-page.component.ts

@@ -347,10 +347,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
 
   }
 
-  public updatePhysicsEnabled() {
+  public updatePhysicsEnabled(bool) {
     this.network.setOptions({
       physics: {
-        enabled: this.physicsEnabled,
+        enabled: bool,
         stabilization: {
           enabled: false,
         },

src/styles.scss

@@ -32,7 +32,7 @@ body {
 }
 
 .button.is-success, .button.is-success:hover, .button.is-success:disabled {
-  background-color: #06D6A0;
+  background-color: #48C774;
 }
 
 div.navbar-menu {