Merge branch 'show-drugs-in-trial-information' into 'master'

Add in trial drugs

See merge request covid-19/frontend!112

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;

src/app/components/info-box/info-box.component.html

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

src/app/interfaces.ts

@@ -155,6 +155,7 @@ export interface Drug {
   drugId: string;
   name: string;
   status: 'approved' | 'investigational';
+  inTrial: boolean;
 }
 
 export interface Dataset {

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