Skip to content
Snippets Groups Projects
Commit 29dd10a2 authored by Julian Späth's avatar Julian Späth
Browse files

Merge branch 'quick-find-drugs' into 'master' 

Add quick find button

See merge request covid-19/frontend!69
parents d8df3a4a acfbbbe4
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 153 additions and 51 deletions
src/app/analysis.service.ts
+ 28
− 8
View file @ 29dd10a2
......@@ -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);
}
......
src/app/components/analysis-window/analysis-window.component.ts
+ 1
− 1
View file @ 29dd10a2
......@@ -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);
}
......
src/app/interfaces.ts
+ 1
− 1
View file @ 29dd10a2
......@@ -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;
......
src/app/pages/explorer-page/explorer-page.component.html
+ 81
− 33
View file @ 29dd10a2
......@@ -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>
......
src/app/pages/explorer-page/explorer-page.component.scss
+ 32
− 0
View file @ 29dd10a2
.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;
}
}
src/app/pages/explorer-page/explorer-page.component.ts
+ 10
− 8
View file @ 29dd10a2
......@@ -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 }> = [];
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment