Add drug toggle button

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

@@ -81,23 +81,42 @@
               </button>
             </p>
           </div>
-              <div class="field has-addons footer-toggle-buttons">
-                <p class="control">
-                  <button class="button is-rounded" [class.is-primary]="physicsEnabled"
-                          (click)="updatePhysicsEnabled(true)">
+
+          <div *ngIf="task.info.target === 'drug-target' " class="field has-addons footer-toggle-buttons">
+            <p class="control">
+              <button class="button is-rounded" [class.is-primary]="showDrugs"
+                      (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" [class.is-primary]="!showDrugs"
+                      (click)="toggleDrugs(false)">
+                <span>Off</span>
+              </button>
+            </p>
+          </div>
+
+          <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-wind"></i>
                 </span>
-                    <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>
+                <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

@@ -14,6 +14,7 @@ import {environment} from '../../../environments/environment';
 import {AnalysisService} from '../../analysis.service';
 import {Protein, Task, NodeType, ViralProtein, Drug} from '../../interfaces';
 import html2canvas from 'html2canvas';
+import {toast} from 'bulma-toast';
 
 declare var vis: any;
 
@@ -46,14 +47,13 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
 
   private network: any;
   private nodeData: { nodes: any, edges: any } = {nodes: null, edges: null};
-  private drugNodes = [];
+  private drugNodes: any[] = [];
+  private drugEdges: any[] = [];
   public showDrugs = false;
   public tab = 'network';
   public physicsEnabled = true;
 
 
-
-
   private proteins: any;
   public effects: any;
 
@@ -229,10 +229,6 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
     this.emitVisibleItems(false);
   }
 
-  discard() {
-
-  }
-
   export() {
 
   }
@@ -371,17 +367,46 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
     };
   }
 
-  public toggleDrugs(bool) {
+  public async toggleDrugs(bool: boolean) {
     this.showDrugs = bool;
+    this.nodeData.nodes.remove(this.drugNodes);
+    this.nodeData.edges.remove(this.drugEdges);
+    this.drugNodes = [];
+    this.drugEdges = [];
+    if (this.showDrugs) {
+      const proteinAcs = this.proteins.map((protein) => protein.proteinAc);
+      // tslint:disable-next-line:max-line-length
+      const result = await this.http.get<any>(`${environment.backend}drug_interactions/?proteins=${JSON.stringify(proteinAcs)}`).toPromise();
+      const drugs = result.drugs;
+      const edges = result.edges;
+
+      if (drugs.length === 0) {
+        toast({
+          message: 'No drugs found.',
+          duration: 5000,
+          dismissible: true,
+          pauseOnHover: true,
+          type: 'is-warning',
+          position: 'top-center',
+          animate: {in: 'fadeIn', out: 'fadeOut'}
+        });
+      } else {
+        for (const drug of drugs) {
+          this.drugNodes.push(this.mapNode(drug.drugId, 'drug', false, null, drug));
+        }
 
-    if (!this.showDrugs) {
-      this.nodeData.nodes.remove(this.drugNodes);
-    } else {
-      this.nodeData.nodes.add(this.drugNodes);
+        for (const interaction of edges) {
+          const edge = {from: interaction.proteinAc, to: interaction.drugId};
+          this.drugEdges.push(this.mapEdge(edge));
+        }
+        this.nodeData.nodes.add(Array.from(this.drugNodes.values()));
+        this.nodeData.edges.add(Array.from(this.drugEdges.values()));
+      }
     }
   }
 
-  public updatePhysicsEnabled(bool) {
+
+  public updatePhysicsEnabled(bool: boolean) {
     this.physicsEnabled = bool;
     this.network.setOptions({
       physics: {
@@ -389,9 +414,6 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
         stabilization: {
           enabled: false,
         },
-        // edges : {
-        //    smooth : false
-        // },
       }
     });
   }