diff --git a/src/app/analysis.service.ts b/src/app/analysis.service.ts
index e2e80770ba7da3fbdafdefc25d27c666ec70ae33..9bd08cd5470bc18836a9352fc78865a924103ea2 100644
--- a/src/app/analysis.service.ts
+++ b/src/app/analysis.service.ts
@@ -124,6 +124,30 @@ export class AnalysisService {
});
}
+ async startQuickAnalysis() {
+ const resp = await this.http.post<any>(`${environment.backend}task/`, {
+ algorithm: 'quick',
+ target: 'drug',
+ parameters: {
+ seeds: this.getSelection().map((i) => i.name),
+ },
+ }).toPromise();
+ this.tokens.push(resp.token);
+ localStorage.setItem('tokens', JSON.stringify(this.tokens));
+ this.startWatching();
+
+ toast({
+ message: 'Quick analysis started. This may take a while.' +
+ 'Once the computation finished you can view the results in the task list to the right.',
+ duration: 10000,
+ dismissible: true,
+ pauseOnHover: true,
+ type: 'is-success',
+ position: 'top-center',
+ animate: {in: 'fadeIn', out: 'fadeOut'}
+ });
+ }
+
async startAnalysis(algorithm, target: 'drug' | 'drug-target', parameters) {
const resp = await this.http.post<any>(`${environment.backend}task/`, {
algorithm,
@@ -138,18 +162,11 @@ export class AnalysisService {
showToast(task: Task, status: 'DONE' | 'FAILED') {
let toastMessage;
let toastType;
- // const startDate = new Date(task.info.startedAt);
- // const finishedDate = new Date(task.info.finishedAt);
if (status === 'DONE') {
- toastMessage = 'Computation finished succesfully.';
- // \n- Algorithm: ${task.info.algorithm}
- // \n- Started At: ${startDate.getHours()}:${startDate.getMinutes()}
- // \n- Finished At: ${finishedDate.getHours()}:${finishedDate.getMinutes()}`;
+ toastMessage = 'Computation finished successfully. Click the task in the task list to view the results.';
toastType = 'is-success';
} else if (status === 'FAILED') {
toastMessage = 'Computation failed.';
- // \n- Algorithm: ${task.info.algorithm}
- // \n- Started At: ${startDate.getHours()}:${startDate.getMinutes()}`;
toastType = 'is-danger';
}
@@ -186,6 +203,9 @@ export class AnalysisService {
}
};
watch();
+ if (this.intervalId) {
+ clearInterval(this.intervalId);
+ }
this.intervalId = setInterval(watch, 5000);
}
diff --git a/src/app/components/analysis-window/analysis-window.component.ts b/src/app/components/analysis-window/analysis-window.component.ts
index 0834b6de706a7586c9f8fe36e55c9685e28ca91b..910d077c1f54c65faa4fbfdeb11ed06c6d54a0e1 100644
--- a/src/app/components/analysis-window/analysis-window.component.ts
+++ b/src/app/components/analysis-window/analysis-window.component.ts
@@ -126,7 +126,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
}));
await Promise.all(promises);
- this.tableHasScores = this.task.info.algorithm === 'trustrank';
+ this.tableHasScores = this.task.info.algorithm === 'trustrank' || this.task.info.algorithm === 'quick';
if (this.tableHasScores) {
this.toggleNormalization(true);
}
diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts
index e8e47c063540ba37b689e289aa78739c4ae0adc5..de7e1169c5a78e8a62a350aa88918b4a1d9b5e9c 100644
--- a/src/app/interfaces.ts
+++ b/src/app/interfaces.ts
@@ -29,7 +29,7 @@ export interface Task {
token: string;
info: {
target: 'drug' | 'drug-target',
- algorithm: 'trustrank' | 'multisteiner' | 'keypathwayminer';
+ algorithm: 'trustrank' | 'multisteiner' | 'keypathwayminer' | 'quick';
parameters?: { [key: string]: any };
workerId?: string;
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index abbb9e68604a6a4de3f3c54afb5e9ffdc5cda687..a640fd84b95cc9ee08162f9b299fb2d700327534 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -13,15 +13,15 @@
<i class="fas fa-database" aria-hidden="true"></i>
</span> Choose Dataset
</p>
- <a (click)="collabsData = !collabsData" data-action="collapse" class="card-header-icon is-hidden-fullscreen"
+ <a (click)="collapseData = !collapseData" data-action="collapse" class="card-header-icon is-hidden-fullscreen"
aria-label="more options">
<span class="icon">
- <i *ngIf="collabsData" class="fas fa-angle-up" aria-hidden="true"></i>
- <i *ngIf="!collabsData" class="fas fa-angle-down" aria-hidden="true"></i>
+ <i *ngIf="collapseData" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collapseData" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
- <div *ngIf="collabsData">
+ <div *ngIf="collapseData">
<div class="card-content">
<app-select-dataset [datasetItems]="datasetItems" [selectedDataset]="selectedDataset"
@@ -49,14 +49,14 @@
<i class="fas fa-info" aria-hidden="true"></i>
</span> Network Overview
</p>
- <a (click)="collabsOverview= !collabsOverview" data-action="collapse"
+ <a (click)="collapseOverview= !collapseOverview" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
- <i *ngIf="collabsOverview" class="fas fa-angle-up" aria-hidden="true"></i>
- <i *ngIf="!collabsOverview" class="fas fa-angle-down" aria-hidden="true"></i> </span>
+ <i *ngIf="collapseOverview" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collapseOverview" class="fas fa-angle-down" aria-hidden="true"></i> </span>
</a>
</header>
- <div *ngIf="collabsOverview">
+ <div *ngIf="collapseOverview">
<div class="card-content">
<nav class="level" *ngIf="proteinData">
<div class="level-item has-text-centered">
@@ -89,15 +89,15 @@
<i class="fas fa-search" aria-hidden="true"></i>
</span> Query Protein/Gene
</p>
- <a (click)="collabsQuery = !collabsQuery" data-action="collapse"
+ <a (click)="collapseQuery = !collapseQuery" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
- <i *ngIf="collabsQuery" class="fas fa-angle-up" aria-hidden="true"></i>
- <i *ngIf="!collabsQuery" class="fas fa-angle-down" aria-hidden="true"></i>
+ <i *ngIf="collapseQuery" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collapseQuery" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
- <div *ngIf="collabsQuery">
+ <div *ngIf="collapseQuery">
<div class="card-content">
<div class="field">
<div class="control">
@@ -116,15 +116,15 @@
<i class="fas fa-filter" aria-hidden="true"></i>
</span> Filter Viral Proteins
</p>
- <a (click)="collabsDFilter = !collabsDFilter" data-action="collapse"
+ <a (click)="collapseDFilter = !collapseDFilter" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
- <i *ngIf="collabsDFilter" class="fas fa-angle-up" aria-hidden="true"></i>
- <i *ngIf="!collabsDFilter" class="fas fa-angle-down" aria-hidden="true"></i>
+ <i *ngIf="collapseDFilter" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collapseDFilter" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
- <div *ngIf="collabsDFilter">
+ <div *ngIf="collapseDFilter">
<div class="card-content overflow">
<div *ngFor="let bait of viralProteinCheckboxes">
<label class="checkbox">
@@ -215,15 +215,15 @@
<i *ngIf="selectedType === 'Drug'" class="fas fa-capsules" aria-hidden="true"></i>
</span> {{ selectedType }}
</p>
- <a (click)="collabsDetails = !collabsDetails" data-action="collapse"
+ <a (click)="collapseDetails = !collapseDetails" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
- <i *ngIf="collabsDetails" class="fas fa-angle-up" aria-hidden="true"></i>
- <i *ngIf="!collabsDetails" class="fas fa-angle-down" aria-hidden="true"></i>
+ <i *ngIf="collapseDetails" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collapseDetails" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
- <div *ngIf="collabsDetails">
+ <div *ngIf="collapseDetails">
<div class="card-content">
<div *ngIf="showDetails">
<p *ngIf="selectedName && selectedType=='Drug'"><b><span>Name:</span></b> {{ selectedName }} <span
@@ -285,17 +285,65 @@
<p class="card-header-title">
<span class="icon">
<i class="fas fa-flask" aria-hidden="true"></i>
- </span> Analysis
+ </span> Quick Find Drugs
</p>
- <a (click)="collabsAnalysis = !collabsAnalysis" data-action="collapse"
+ <a (click)="collapseAnalysisQuick = !collapseAnalysisQuick" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
- <i *ngIf="collabsAnalysis" class="fas fa-angle-up" aria-hidden="true"></i>
- <i *ngIf="!collabsAnalysis" class="fas fa-angle-down" aria-hidden="true"></i>
+ <i *ngIf="collapseAnalysisQuick" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collapseAnalysisQuick" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
- <div *ngIf="collabsAnalysis">
+ <div *ngIf="collapseAnalysisQuick">
+ <div class="card-content quick-find">
+ <div class="field">
+ <div class="control">
+ <div class="tile notification is-info">
+ <div class="align-vmiddle">
+ <div class="digit" *ngIf="analysis.getCount() == 0">1</div>
+ <div class="digit" *ngIf="analysis.getCount() > 0"><i class="fa fa-check"></i></div>
+ <div>
+ <span>Select Proteins</span>
+ </div>
+ </div>
+ </div>
+ <div class="tile notification is-info">
+ <div class="align-vmiddle">
+ <div class="digit">2</div>
+ <button (click)="analysis.startQuickAnalysis()" [disabled]="analysis.getCount() === 0"
+ class="button is-white is-rounded">
+ <span class="icon">
+ <i class="fa fa-capsules"></i>
+ </span>
+ <span>
+ Find Drugs
+ </span>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="card bar-large">
+ <header class="card-header">
+ <p class="card-header-title">
+ <span class="icon">
+ <i class="fas fa-flask" aria-hidden="true"></i>
+ </span> Advanced Analysis
+ </p>
+ <a (click)="collapseAnalysis = !collapseAnalysis" data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen" aria-label="more options">
+ <span class="icon">
+ <i *ngIf="collapseAnalysis" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collapseAnalysis" class="fas fa-angle-down" aria-hidden="true"></i>
+ </span>
+ </a>
+ </header>
+ <div *ngIf="collapseAnalysis">
<div class="card-content">
<div class="field">
<div class="control">
@@ -336,15 +384,15 @@
<i class="fas fa-filter" aria-hidden="true"></i>
</span> Tasks
</p>
- <a (click)="collabsTask = !collabsTask" data-action="collapse" class="card-header-icon is-hidden-fullscreen"
+ <a (click)="collapseTask = !collapseTask" data-action="collapse" class="card-header-icon is-hidden-fullscreen"
aria-label="more options">
<span class="icon">
- <i *ngIf="collabsSelection" class="fas fa-angle-up" aria-hidden="true"></i>
- <i *ngIf="!collabsSelection" class="fas fa-angle-down" aria-hidden="true"></i>
+ <i *ngIf="collapseSelection" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collapseSelection" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
- <div *ngIf="collabsTask">
+ <div *ngIf="collapseTask">
<div class="card-content overflow">
<app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
</div>
@@ -370,15 +418,15 @@
<i class="fas fa-filter" aria-hidden="true"></i>
</span> Selection
</p>
- <a (click)="collabsSelection = !collabsSelection" data-action="collapse"
+ <a (click)="collapseSelection = !collapseSelection" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
- <i *ngIf="collabsSelection" class="fas fa-angle-up" aria-hidden="true"></i>
- <i *ngIf="!collabsSelection" class="fas fa-angle-down" aria-hidden="true"></i>
+ <i *ngIf="collapseSelection" class="fas fa-angle-up" aria-hidden="true"></i>
+ <i *ngIf="!collapseSelection" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
- <div *ngIf="collabsSelection">
+ <div *ngIf="collapseSelection">
<div class="card-content overflow">
<table class="table" *ngIf="analysis.getCount() > 0">
<thead>
diff --git a/src/app/pages/explorer-page/explorer-page.component.scss b/src/app/pages/explorer-page/explorer-page.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..1323942b7720d999a3d8ccdbb3a6f92de709a3cb 100644
--- a/src/app/pages/explorer-page/explorer-page.component.scss
+++ b/src/app/pages/explorer-page/explorer-page.component.scss
@@ -0,0 +1,32 @@
+.quick-find {
+ .notification {
+ padding: 15px;
+
+ .digit {
+ color: rgba(255, 255, 255, 0.5);
+ font-size: 32px;
+ border: 2px solid rgba(255, 255, 255, 0.5);
+ border-radius: 30px;
+ width: 50px;
+ height: 50px;
+ text-align: center;
+ font-weight: bold;
+ }
+ }
+}
+
+.align-vmiddle {
+ display: table-cell;
+ vertical-align: middle;
+ height: 50px;
+
+ div {
+ display: inline-block;
+ }
+
+ button, span, div {
+ vertical-align: middle;
+ margin-left: 5px;
+ margin-right: 5px;
+ }
+}
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 2bf7e026d7d5d1b07560661b07f1ff4e2f06e021..3eb3691abaf509b880a15295d39a2e19cb285530 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -29,14 +29,16 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public selectedItem = null;
public selectedVirusName = null;
public selectedStatus = null;
- public collabsAnalysis = true;
- public collabsDetails = true;
- public collabsTask = true;
- public collabsSelection = true;
- public collabsDFilter = true;
- public collabsQuery = true;
- public collabsData = true;
- public collabsOverview = true;
+
+ public collapseAnalysisQuick = true;
+ public collapseAnalysis = false;
+ public collapseDetails = true;
+ public collapseTask = true;
+ public collapseSelection = true;
+ public collapseDFilter = true;
+ public collapseQuery = true;
+ public collapseData = true;
+ public collapseOverview = true;
public viralProteinCheckboxes: Array<{ checked: boolean; data: ViralProtein }> = [];