Merge branch 'pretty-tables' into 'master'

Pretty tables

See merge request covid-19/frontend!74

.htmlhintrc

@@ -8,5 +8,5 @@
   "space-tab-mixed-disabled": true,
   "style-disabled": true,
   "attr-no-duplication": true,
-  "tagname-lowercase": true
+  "tagname-lowercase": false
 }

package-lock.json

@@ -201,9 +201,9 @@
       }
     },
     "@angular/animations": {
-      "version": "9.0.7",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.0.7.tgz",
-      "integrity": "sha512-74gY7onajmmnksy5E0/32bFv3B9NuWxV64kqD15YjGrh8AWe1BHt5enQI+rJ2tO8m2DKnwZsctis6k0Kcy+YKQ=="
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.1.tgz",
+      "integrity": "sha512-IvKv8sV0ymbzDEX2ZLW+F6nOTQqDYallHexuzRVT9txvNE8TNHyySvLcyC5dTmX9fj9LA72NZ6nFyhxq0LFvtQ=="
     },
     "@angular/cdk": {
       "version": "9.2.0",
@@ -9147,6 +9147,16 @@
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
       "dev": true
     },
+    "primeicons": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-2.0.0.tgz",
+      "integrity": "sha512-GJTCeMSQU8UU1GqbsaDrg/IH+b/vSinJQl52NVpdJ7sShYLZA8Eq6jLF48Ye3N/dQloGrE07i7XsZvxQ9pNbqg=="
+    },
+    "primeng": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/primeng/-/primeng-9.0.5.tgz",
+      "integrity": "sha512-juugoXZaU7TyGyTSFx0PNjObqM+/RTY/arJ/LwyH/0KaIv0V+Oqfvnx8btJ96kLOZ+h0xLWXLuAbxsTXe9EX6w=="
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",

package.json

@@ -11,7 +11,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.0.2",
+    "@angular/animations": "^9.1.1",
     "@angular/cdk": "^9.2.0",
     "@angular/common": "~9.0.2",
     "@angular/compiler": "~9.0.2",
@@ -28,6 +28,8 @@
     "bulma": "^0.8.1",
     "bulma-toast": "^1.5.4",
     "html2canvas": "^1.0.0-rc.5",
+    "primeicons": "^2.0.0",
+    "primeng": "^9.0.5",
     "python": "0.0.4",
     "python-shell": "^1.0.8",
     "rxjs": "~6.5.4",

src/app/app.module.ts

-import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
 import {NgSelectModule} from '@ng-select/ng-select';
-
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
+import {HttpClientModule} from '@angular/common/http';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {TableModule} from 'primeng/table';
 
-import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
+import {AppRoutingModule} from './app-routing.module';
 import {ExplorerPageComponent} from './pages/explorer-page/explorer-page.component';
 import {AboutPageComponent} from './pages/about-page/about-page.component';
 import {HomePageComponent} from './pages/home-page/home-page.component';
-import {HttpClientModule} from '@angular/common/http';
 import {QueryComponent} from './components/query/query.component';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {LaunchAnalysisComponent} from './components/launch-analysis/launch-analysis.component';
 import {SelectDatasetComponent} from './components/select-dataset/select-dataset.component';
 import {AnalysisWindowComponent} from './components/analysis-window/analysis-window.component';
 import {TaskListComponent} from './components/task-list/task-list.component';
+import {ToggleComponent} from './components/toggle/toggle.component';
+
 import {AnalysisService} from './analysis.service';
-import { ToggleComponent } from './components/toggle/toggle.component';
 
 
 @NgModule({
@@ -42,6 +43,7 @@ import { ToggleComponent } from './components/toggle/toggle.component';
     CommonModule,
     HttpClientModule,
     BrowserAnimationsModule,
+    TableModule,
   ],
   providers: [AnalysisService],
   bootstrap: [AppComponent]

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

@@ -138,24 +138,36 @@
             <span>Download</span>
           </a>
         </div>
-        <table class="table is-striped" *ngIf="tableDrugs.length > 0">
-          <thead>
-          <tr>
-            <td>ID</td>
-            <td>Name</td>
-            <td>Status</td>
-            <td *ngIf="tableHasScores">Score</td>
-          </tr>
-          </thead>
-          <tbody>
-          <tr *ngFor="let e of tableDrugs">
-            <td><a href="https://www.drugbank.ca/drugs/{{ e.drugId }}" target="_blank">{{ e.drugId }}</a></td>
-            <td>{{e.name}}</td>
-            <td>{{e.status}}</td>
-            <td *ngIf="tableHasScores">{{e.score}}</td>
-          </tr>
-          </tbody>
-        </table>
+        <p-table *ngIf="tableDrugs.length > 0" [value]="tableDrugs">
+          <ng-template pTemplate="header">
+            <tr>
+              <th [pSortableColumn]="'drugId'">
+                ID
+                <p-sortIcon [field]="'drugId'"></p-sortIcon>
+              </th>
+              <th [pSortableColumn]="'name'">
+                Name
+                <p-sortIcon [field]="'name'"></p-sortIcon>
+              </th>
+              <th [pSortableColumn]="'status'">
+                Status
+                <p-sortIcon [field]="'status'"></p-sortIcon>
+              </th>
+              <th *ngIf="tableHasScores" [pSortableColumn]="'score'">
+                Score
+                <p-sortIcon [field]="'score'"></p-sortIcon>
+              </th>
+            </tr>
+          </ng-template>
+          <ng-template pTemplate="body" let-e>
+            <tr>
+              <td><a href="https://www.drugbank.ca/drugs/{{ e.drugId }}" target="_blank">{{ e.drugId }}</a></td>
+              <td>{{e.name}}</td>
+              <td>{{e.status}}</td>
+              <td *ngIf="tableHasScores">{{e.score || ''}}</td>
+            </tr>
+          </ng-template>
+        </p-table>
 
         <div *ngIf="tableProteins.length > 0">
           <h4 class="is-4">
@@ -167,22 +179,31 @@
             <span>Download</span>
           </a>
         </div>
-        <table class="table is-striped" *ngIf="tableProteins.length > 0">
-          <thead>
+        <p-table *ngIf="tableProteins.length > 0" [value]="tableProteins">
+          <ng-template pTemplate="header">
           <tr>
-            <td>AC</td>
-            <td>Gene</td>
-            <td *ngIf="tableHasScores">Score</td>
+            <th [pSortableColumn]="'proteinAc'">
+              AC
+              <p-sortIcon [field]="'proteinAc'"></p-sortIcon>
+            </th>
+            <th [pSortableColumn]="'name'">
+              Gene
+              <p-sortIcon [field]="'name'"></p-sortIcon>
+            </th>
+            <th *ngIf="tableHasScores" [pSortableColumn]="'score'">
+              Score
+              <p-sortIcon [field]="'score'"></p-sortIcon>
+            </th>
           </tr>
-          </thead>
-          <tbody>
-          <tr *ngFor="let e of tableProteins">
+          </ng-template>
+          <ng-template pTemplate="body" let-e>
+          <tr>
             <td><a href="https://www.uniprot.org/uniprot/{{ e.proteinAc }}" target="_blank">{{ e.proteinAc }}</a></td>
             <td>{{e.name}}</td>
-            <td *ngIf="tableHasScores">{{e.score}}</td>
+            <td *ngIf="tableHasScores">{{e.score || ''}}</td>
           </tr>
-          </tbody>
-        </table>
+          </ng-template>
+        </p-table>
 
         <div *ngIf="tableViralProteins.length > 0">
           <h4 class="is-4">
@@ -194,22 +215,31 @@
             <span>Download</span>
           </a>
         </div>
-        <table class="table is-striped" *ngIf="tableViralProteins.length > 0">
-          <thead>
+        <p-table *ngIf="tableViralProteins.length > 0" [value]="tableViralProteins">
+          <ng-template pTemplate="header">
           <tr>
-            <td>Name</td>
-            <td>Virus Strain</td>
-            <td *ngIf="tableHasScores">Score</td>
+            <td [pSortableColumn]="'effectName'">
+              Name
+              <p-sortIcon [field]="'effectName'"></p-sortIcon>
+            </td>
+            <td [pSortableColumn]="'virusName'">
+              Virus Strain
+              <p-sortIcon [field]="'virusName'"></p-sortIcon>
+            </td>
+            <td *ngIf="tableHasScores" [pSortableColumn]="'score'">
+              Score
+              <p-sortIcon [field]="'score'"></p-sortIcon>
+            </td>
           </tr>
-          </thead>
-          <tbody>
-          <tr *ngFor="let e of tableViralProteins">
+          </ng-template>
+          <ng-template pTemplate="body" let-e>
+          <tr>
             <td>{{e.effectName}}</td>
             <td>{{e.virusName}}</td>
-            <td *ngIf="tableHasScores">{{e.score}}</td>
+            <td *ngIf="tableHasScores">{{e.score || ''}}</td>
           </tr>
-          </tbody>
-        </table>
+          </ng-template>
+        </p-table>
       </div>
     </div>
   </div>

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

@@ -26,7 +26,7 @@ interface Scored {
 @Component({
   selector: 'app-analysis-window',
   templateUrl: './analysis-window.component.html',
-  styleUrls: ['./analysis-window.component.scss']
+  styleUrls: ['./analysis-window.component.scss'],
 })
 export class AnalysisWindowComponent implements OnInit, OnChanges {
 

src/styles.scss

@@ -4,8 +4,11 @@
 
 @import url('https://fonts.googleapis.com/css?family=Varela+Round');
 @import "~@ng-select/ng-select/themes/default.theme.css";
+
 $family-sans-serif: "Varela Round", sans-serif;
 @import "~bulma/bulma.sass";
+@import "~primeng/resources/primeng.css";
+@import "~primeicons/primeicons.css";
 
 html {
   overflow: hidden;
@@ -117,14 +120,17 @@ div.card.network {
 }
 
 div.network {
-   height: calc(100vh - 210px);
+  height: calc(100vh - 210px);
 }
+
 div.parent {
   position: relative;
 }
+
 div.image1 {
   position: relative;
 }
+
 div.image2 {
   position: absolute;
   bottom: 0px;
@@ -185,5 +191,11 @@ div.field.has-addons.add-remove-toggle {
   border-top: 2px solid #d0d0d0;
 }
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}