Merge branch 'scores' into 'master'

Display score

See merge request covid-19/frontend!59

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

@@ -101,13 +101,14 @@
         </footer>
       </div>
       <div class="content tab-content scrollable" *ngIf="task && task.info.done" [class.is-visible]="tab === 'table'">
-        <h4 class="is-4">Drugs</h4>
-        <table class="table is-striped">
+        <h4 class="is-4" *ngIf="tableDrugs.length > 0">Drugs</h4>
+        <table class="table is-striped" *ngIf="tableDrugs.length > 0">
           <thead>
           <tr>
             <td>ID</td>
             <td>Name</td>
             <td>Status</td>
+            <td>Score</td>
           </tr>
           </thead>
           <tbody>
@@ -115,38 +116,43 @@
             <td>{{e.drugId}}</td>
             <td>{{e.name}}</td>
             <td>{{e.status}}</td>
+            <td>{{e.score}}</td>
           </tr>
           </tbody>
         </table>
 
-        <h4 class="is-4">Proteins</h4>
-        <table class="table is-striped">
+        <h4 class="is-4" *ngIf="tableProteins.length > 0">Proteins</h4>
+        <table class="table is-striped" *ngIf="tableProteins.length > 0">
           <thead>
           <tr>
             <td>AC</td>
             <td>Gene</td>
+            <td>Score</td>
           </tr>
           </thead>
           <tbody>
           <tr *ngFor="let e of tableProteins">
             <td>{{e.proteinAc}}</td>
             <td>{{e.name}}</td>
+            <td>{{e.score}}</td>
           </tr>
           </tbody>
         </table>
 
-        <h4 class="is-4">Viral Proteins</h4>
-        <table class="table is-striped">
+        <h4 class="is-4" *ngIf="tableViralProteins.length > 0">Viral Proteins</h4>
+        <table class="table is-striped" *ngIf="tableViralProteins.length > 0">
           <thead>
           <tr>
             <td>Name</td>
             <td>Virus Strain</td>
+            <td>Score</td>
           </tr>
           </thead>
           <tbody>
           <tr *ngFor="let e of tableViralProteins">
             <td>{{e.effectName}}</td>
             <td>{{e.virusName}}</td>
+            <td>{{e.score}}</td>
           </tr>
           </tbody>
         </table>

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

@@ -42,9 +42,9 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
   public showDrugs = false;
   public tab = 'network';
 
-  public tableDrugs: Array<Drug> = [];
-  public tableProteins: Array<Protein> = [];
-  public tableViralProteins: Array<ViralProtein> = [];
+  public tableDrugs: Array<any> = [];
+  public tableProteins: Array<any> = [];
+  public tableViralProteins: Array<any> = [];
 
   constructor(private http: HttpClient, public analysis: AnalysisService) {
   }
@@ -79,22 +79,33 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
           const attributes = result.nodeAttributes[i];
           const nodeTypes = attributes.nodeTypes || {};
           const nodeDetails = attributes.details || {};
+          const nodeScores = attributes.scores || {};
+          const normalizeScore = network.maxScore || 1.0;
           network.nodes.forEach((nodeId, j) => {
             const nodeType = nodeTypes[nodeId] || this.inferNodeType(nodeId);
+            const entry = nodeDetails[nodeId] || {};
+            entry.score = nodeScores[nodeId] || null;
+            if (entry.score) {
+              entry.score /= normalizeScore;
+            }
             switch (nodeType) {
               case 'drug':
-                this.tableDrugs.push(nodeDetails[nodeId] || {});
+                this.tableDrugs.push(entry);
                 break;
               case 'host':
-                this.tableProteins.push(nodeDetails[nodeId] || {});
+                this.tableProteins.push(entry);
                 break;
               case 'virus':
-                this.tableViralProteins.push(nodeDetails[nodeId] || {});
+                this.tableViralProteins.push(entry);
                 break;
             }
           });
         });
 
+        this.tableDrugs = this.tableDrugs.reverse();
+        this.tableProteins = this.tableProteins.reverse();
+        this.tableViralProteins = this.tableViralProteins.reverse();
+
         const container = this.networkEl.nativeElement;
         const options = {};