From 55e4a8e4c4c0ab48c61e3719019a63adc1a1d779 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20Sp=C3=A4th?= <julian.spaeth@wzw.tum.de>
Date: Wed, 8 Apr 2020 19:30:18 +0200
Subject: [PATCH] Add drug toggle button
---
.../analysis-window.component.html | 47 +++++++++++-----
.../analysis-window.component.ts | 54 +++++++++++++------
2 files changed, 71 insertions(+), 30 deletions(-)
diff --git a/src/app/components/analysis-window/analysis-window.component.html b/src/app/components/analysis-window/analysis-window.component.html
index a638b5b1..e16d4a9c 100644
--- a/src/app/components/analysis-window/analysis-window.component.html
+++ b/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'">
diff --git a/src/app/components/analysis-window/analysis-window.component.ts b/src/app/components/analysis-window/analysis-window.component.ts
index c61f0684..d5871bf8 100644
--- a/src/app/components/analysis-window/analysis-window.component.ts
+++ b/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
- // },
}
});
}
--
GitLab