diff --git a/.htmlhintrc b/.htmlhintrc
index 19115c1c25ab059dee0544148e5b8d088533ce9b..9fadc026c4fde488e9b4845bb7da56ff78f8d211 100644
--- a/.htmlhintrc
+++ b/.htmlhintrc
@@ -8,5 +8,5 @@
"space-tab-mixed-disabled": true,
"style-disabled": true,
"attr-no-duplication": true,
- "tagname-lowercase": true
+ "tagname-lowercase": false
}
diff --git a/package-lock.json b/package-lock.json
index 28e8d6283c98ecadac74aa1ae05a2ca6faea002a..655fb4f58bea610d0e1fc497775c96d09b9a84be 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index fd54ac8d792e242958ea2635f4082de8c83b6452..bb1a835a1464c0ea5bdab79ff8cab5e2a09a95c0 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5b416e7e5beab6a04bc3587b3d69bd44751067b6..c48a54efeb930cd50579dbd4d02b75a21ac14bde 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,24 +1,25 @@
-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]
diff --git a/src/app/components/analysis-window/analysis-window.component.html b/src/app/components/analysis-window/analysis-window.component.html
index a3119078ceae169440acd75eca2040834cb9bb1b..a549721d09e267f61ba44c5c86b25845c6457daa 100644
--- a/src/app/components/analysis-window/analysis-window.component.html
+++ b/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>
diff --git a/src/app/components/analysis-window/analysis-window.component.ts b/src/app/components/analysis-window/analysis-window.component.ts
index adf307ed6724defacbd32921883e43b748138061..bcec53671663063d14f432ab3035cd92aa84063a 100644
--- a/src/app/components/analysis-window/analysis-window.component.ts
+++ b/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 {
diff --git a/src/styles.scss b/src/styles.scss
index 57f1acbdb6bd836649f83616e542d092d6a6092d..84ced324ca10b07f040ce0eb9aed25d35f20522f 100644
--- a/src/styles.scss
+++ b/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;
+}