From ee58c59cbc803ecdc8afb37f27bccdfc2749ccef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20Sp=C3=A4th?= <julian.spaeth@wzw.tum.de>
Date: Sat, 11 Apr 2020 18:51:04 +0200
Subject: [PATCH] Add in trial drugs
---
.../analysis-window.component.ts | 4 ++-
.../info-box/info-box.component.html | 19 ++++++++-----
src/app/interfaces.ts | 1 +
src/app/network-settings.ts | 28 +++++++++++++++----
4 files changed, 38 insertions(+), 14 deletions(-)
diff --git a/src/app/components/analysis-window/analysis-window.component.ts b/src/app/components/analysis-window/analysis-window.component.ts
index 78d759ba..a2ae23cd 100644
--- a/src/app/components/analysis-window/analysis-window.component.ts
+++ b/src/app/components/analysis-window/analysis-window.component.ts
@@ -360,6 +360,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
let nodeLabel;
let wrapper: Wrapper;
let drugType;
+ let drugInTrial;
if (nodeType === 'host') {
const protein = details as Protein;
wrapper = getWrapperFromProtein(protein);
@@ -371,6 +372,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
const drug = details as Drug;
wrapper = getWrapperFromDrug(drug);
drugType = drug.status;
+ drugInTrial = drug.inTrial;
if (drugType === 'approved') {
nodeLabel = drug.name;
} else {
@@ -382,7 +384,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
nodeLabel = viralProtein.effectName;
}
- const node = NetworkSettings.getNodeStyle(nodeType, isSeed, this.analysis.inSelection(wrapper), drugType);
+ const node = NetworkSettings.getNodeStyle(nodeType, isSeed, this.analysis.inSelection(wrapper), drugType, drugInTrial);
node.id = wrapper.nodeId;
node.label = nodeLabel;
node.nodeType = nodeType;
diff --git a/src/app/components/info-box/info-box.component.html b/src/app/components/info-box/info-box.component.html
index d8a0bbb9..743e7178 100644
--- a/src/app/components/info-box/info-box.component.html
+++ b/src/app/components/info-box/info-box.component.html
@@ -1,12 +1,12 @@
<div *ngIf="wrapper">
<div *ngIf="wrapper.type === 'host'">
<p>
- <b><span>Gene Name:</span></b>
+ <b><span>Gene Name: </span></b>
{{ wrapper.data.name }}
<span class="icon is-small"><i class="fas fa-dna"></i></span>
</p>
<p>
- <b><span>Uniprot AC:</span></b>
+ <b><span>Uniprot AC :</span></b>
<a href="https://www.uniprot.org/uniprot/{{ wrapper.data.proteinAc }}" target="_blank">
{{ wrapper.data.proteinAc }}
</a>
@@ -19,27 +19,32 @@
<span class="icon is-small"><i class="fas fa-virus"></i></span>
</p>
<p>
- <b><span>Effect:</span></b>
+ <b><span>Effect: </span></b>
{{ wrapper.data.effectName }}
</p>
</div>
<div *ngIf="wrapper.type === 'drug'">
<p>
- <b><span>Name:</span></b>
+ <b><span>Name: </span></b>
{{ wrapper.data.name }}
<span class="icon is-small"><i class="fas fa-capsules"></i></span>
</p>
<p>
- <b>DrugBank ID:</b>
+ <b>DrugBank ID: </b>
<a href="https://www.drugbank.ca/drugs/{{ wrapper.data.drugId }}" target="_blank"> {{ wrapper.data.drugId }}</a>
</p>
<p *ngIf="wrapper.data.status === 'unapproved' ">
- <b>Status:</b> Unapproved
+ <b>Status: </b> Unapproved
<span class="icon is-small"><i class="fas fa-search investigational"></i></span>
<p *ngIf="wrapper.data.status === 'approved' ">
- <b>Status:</b> Approved
+ <b>Status: </b> Approved
<span class="icon is-small"><i class="fas fa-check"></i></span>
</p>
+ <p *ngIf="wrapper.data.inTrial">
+ <b>In Trial: </b> <span class="icon is-small"><i class="fas fa-check"></i></span>
+ <p *ngIf="!wrapper.data.inTrial">
+ <b>In Trial: </b> <span class="icon is-small"><i class="fas fa-times"></i></span>
+ </p>
</div>
<div class="field has-addons add-remove-toggle" *ngIf="wrapper.type !== 'drug'">
diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts
index 4f8c774e..f2448d71 100644
--- a/src/app/interfaces.ts
+++ b/src/app/interfaces.ts
@@ -155,6 +155,7 @@ export interface Drug {
drugId: string;
name: string;
status: 'approved' | 'investigational';
+ inTrial: boolean;
}
export interface Dataset {
diff --git a/src/app/network-settings.ts b/src/app/network-settings.ts
index 2cf13315..30476257 100644
--- a/src/app/network-settings.ts
+++ b/src/app/network-settings.ts
@@ -33,6 +33,7 @@ export class NetworkSettings {
private static hostFontColor = '#FFFFFF';
private static virusFontColor = '#FFFFFF';
private static drugFontColor = '#FFFFFF';
+ private static drugInTrialFontColor = 'black';
// Network Layout
private static analysisLayout = {
@@ -68,7 +69,8 @@ export class NetworkSettings {
// Node shape
private static hostShape = 'ellipse';
private static virusShape = 'ellipse';
- private static drugShape = 'box';
+ private static drugNotInTrialShape = 'box';
+ private static drugInTrialShape = 'triangle';
static getNodeSize(wrapperType: WrapperType) {
if (wrapperType === 'host') {
@@ -80,13 +82,17 @@ export class NetworkSettings {
}
}
- static getNodeShape(wrapperType: WrapperType) {
+ static getNodeShape(wrapperType: WrapperType, drugInTrial?: boolean) {
if (wrapperType === 'host') {
return this.hostShape;
} else if (wrapperType === 'virus') {
return this.virusShape;
} else if (wrapperType === 'drug') {
- return this.drugShape;
+ if (drugInTrial) {
+ return this.drugInTrialShape;
+ } else {
+ return this.drugNotInTrialShape;
+ }
}
}
@@ -138,17 +144,21 @@ export class NetworkSettings {
}
}
- static getFont(wrapperType: WrapperType) {
+ static getFont(wrapperType: WrapperType, drugInTrial?: boolean) {
if (wrapperType === 'host') {
return {color: this.hostFontColor, size: this.hostFontSize};
} else if (wrapperType === 'virus') {
return {color: this.virusFontColor, size: this.virusFontSize};
} else if (wrapperType === 'drug') {
- return {color: this.drugFontColor, size: this.drugFontSize};
+ if (!drugInTrial) {
+ return {color: this.drugFontColor, size: this.drugFontSize};
+ } else {
+ return {color: this.drugInTrialFontColor, size: this.drugFontSize};
+ }
}
}
- static getNodeStyle(nodeType: WrapperType, isSeed: boolean, isSelected: boolean, drugType?: string): any {
+ static getNodeStyle(nodeType: WrapperType, isSeed: boolean, isSelected: boolean, drugType?: string, drugInTrial?: boolean): any {
let nodeColor;
let nodeShape;
let nodeSize;
@@ -177,6 +187,12 @@ export class NetworkSettings {
} else {
nodeColor = NetworkSettings.getColor('unapprovedDrug');
}
+ if (drugInTrial) {
+ nodeShape = NetworkSettings.getNodeShape('drug', true);
+ nodeFont = NetworkSettings.getFont('drug', true);
+ } else {
+ nodeShape = NetworkSettings.getNodeShape('drug', false);
+ }
}
const node: any = {
--
GitLab