Skip to content
Snippets Groups Projects
Commit acfbbbe4 authored by Julian Matschinske's avatar Julian Matschinske Committed by Julian Späth
Browse files

Add quick find button

parent b371d838
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 153 additions and 51 deletions
src/app/analysis.service.ts
+ 28
− 8
View file @ acfbbbe4
......@@ -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 @ acfbbbe4
......@@ -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 @ acfbbbe4
......@@ -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 @ acfbbbe4
......@@ -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"
......@@ -39,14 +39,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">
......@@ -79,15 +79,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">
......@@ -106,15 +106,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">
......@@ -205,15 +205,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
......@@ -275,17 +275,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">
......@@ -326,15 +374,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>
......@@ -360,15 +408,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 @ acfbbbe4
.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 @ acfbbbe4
......@@ -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