From 5c505f38fc00cdafd32f28007d4f10e1bd742186 Mon Sep 17 00:00:00 2001
From: Mhaned Oubounyt <m.oubounyt@tum.de>
Date: Sun, 5 Apr 2020 19:27:45 +0200
Subject: [PATCH] Analyses tabs
---
src/app/analysis.service.ts | 5 +-
src/app/app.module.ts | 7 +-
.../analysis-window.component.html | 48 +++++++------
.../analysis-window.component.ts | 4 +-
.../protein-analysis.component.html | 68 +++++++++++++++----
.../protein-analysis.component.ts | 32 ++++++---
src/styles.scss | 3 -
7 files changed, 114 insertions(+), 53 deletions(-)
diff --git a/src/app/analysis.service.ts b/src/app/analysis.service.ts
index 05d7d6fb..9bf57b53 100644
--- a/src/app/analysis.service.ts
+++ b/src/app/analysis.service.ts
@@ -40,7 +40,10 @@ export class AnalysisService {
}
resetSelection() {
- this.selectedProteins = new Map<string, Protein>();
+ const oldSelection = this.selectedProteins.values();
+ for (const protein of oldSelection) {
+ this.removeProtein(protein);
+ }
}
inSelection(protein: Protein): boolean {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 12e19347..f6875127 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,6 @@
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
-import { NgSelectModule } from '@ng-select/ng-select';
+import {NgSelectModule} from '@ng-select/ng-select';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
@@ -16,7 +16,8 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ProteinAnalysisComponent} from './components/protein-analysis/protein-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 {TaskListComponent} from './components/task-list/task-list.component';
+import {AnalysisService} from './analysis.service';
@NgModule({
@@ -40,7 +41,7 @@ import { TaskListComponent } from './components/task-list/task-list.component';
HttpClientModule,
BrowserAnimationsModule,
],
- providers: [],
+ 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 25d99deb..52283666 100644
--- a/src/app/components/analysis-window/analysis-window.component.html
+++ b/src/app/components/analysis-window/analysis-window.component.html
@@ -22,36 +22,42 @@
<footer class="card-footer">
<div class="field has-addons">
<p class="control">
- <button class="button is-rounded" (click)="toggleDrugs(true)">
- <span class="icon is-small">
- <i class="fas fa-capsules"></i>
- </span>
+ <button class="button is-rounded" [class.is-primary]="showDrugs" (click)="toggleDrugs(true)">
+ <span class="icon is-small">
+ <i class="fas fa-capsules"></i>
+ </span>
<span>Drugs On</span>
</button>
</p>
<p class="control">
- <button class="button is-rounded" (click)="toggleDrugs(false)">
- <span class="icon is-small">
- <i class="fas fa-times"></i>
- </span>
- <span>Drugs Off</span>
+ <button class="button is-rounded" [class.is-primary]="!showDrugs" (click)="toggleDrugs(false)">
+ <span>Off</span>
</button>
</p>
</div>
- <button class="card-footer-item button is-primary">
- <span class="icon">
- <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
- </span> <span>Export Results</span>
+ <button class="card-footer-item button is-primary" [disabled]="true">
+ <span class="icon">
+ <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
+ </span>
+ <span>
+ Export Results
+ </span>
</button>
- <button class="card-footer-item button">
- <span class="icon">
- <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
- </span> <span>Save as PNG</span>
+ <button class="card-footer-item button" [disabled]="true">
+ <span class="icon">
+ <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
+ </span>
+ <span>
+ Save as PNG
+ </span>
</button>
- <button class="card-footer-item button is-danger">
- <span class="icon">
- <i class="fas fa-trash" aria-hidden="true"></i>
- </span> <span>Delete Analysis</span>
+ <button class="card-footer-item button is-danger" [disabled]="true">
+ <span class="icon">
+ <i class="fas fa-trash" aria-hidden="true"></i>
+ </span>
+ <span>
+ Delete Analysis
+ </span>
</button>
</footer>
</div>
diff --git a/src/app/components/analysis-window/analysis-window.component.ts b/src/app/components/analysis-window/analysis-window.component.ts
index 8f62e08c..e8d4e231 100644
--- a/src/app/components/analysis-window/analysis-window.component.ts
+++ b/src/app/components/analysis-window/analysis-window.component.ts
@@ -33,7 +33,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
private network: any;
private nodeData: { nodes: any, edges: any } = {nodes: null, edges: null};
private drugNodes = [];
- private showDrugs = false;
+ public showDrugs = false;
private result: any;
constructor(private http: HttpClient, private analysis: AnalysisService) {
@@ -55,6 +55,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
this.result = result;
this.networkEl.nativeElement.innerHTML = '';
this.network = null;
+ this.showDrugs = false;
this.nodeData = {nodes: null, edges: null};
this.createNetwork(result);
}
@@ -215,6 +216,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
nodes.push(this.mapProteinToNode(protein));
}
+ this.drugNodes = [];
for (const drug of result.drugs) {
this.drugNodes.push(this.mapDrugToNode(drug));
}
diff --git a/src/app/components/protein-analysis/protein-analysis.component.html b/src/app/components/protein-analysis/protein-analysis.component.html
index 8cb73e17..38b0d7da 100644
--- a/src/app/components/protein-analysis/protein-analysis.component.html
+++ b/src/app/components/protein-analysis/protein-analysis.component.html
@@ -2,28 +2,66 @@
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
- <p class="modal-card-title">Launch Protein Analysis</p>
- <button class="delete" aria-label="close" (click)="close()"></button>
+ <p class="modal-card-title">Launch Analysis</p>
+ <button (click)="close()" class="delete" aria-label="close"></button>
</header>
- <div class="modal-card-body">
- <div class="tabs">
+ <section class="modal-card-body">
+ <div class="tabs is-toggle is-medium is-fullwidth">
<ul>
- <li [class.is-active]="algorithm === 'dummy'"><a (click)="algorithm = 'dummy'">Dummy</a></li>
- <li [class.is-active]="algorithm === 'trustrank'"><a (click)="algorithm = 'trustrank'">Trustrank</a></li>
+ <li [class.is-active]="algorithm === 'dummy'"><a (click)="algorithm = 'dummy'" class="is-boxed is-medium">Dummy</a>
+ </li>
+ <li [class.is-active]="algorithm === 'trustrank'"><a (click)="algorithm = 'trustrank'"
+ class="is-boxed is-medium">Trustrank</a></li>
+ <li [class.is-active]="algorithm === 'keypathwayminer'"><a (click)="algorithm = 'keypathwayminer'"
+ class="is-boxed is-medium">KeyPathwayMiner</a></li>
+ <li [class.is-active]="algorithm === 'multisteiner'"><a (click)="algorithm = 'multisteiner'"
+ class="is-boxed is-medium">Multi-Steiner</a></li>
</ul>
</div>
- <div *ngIf="algorithm === 'dummy'">
- NO PARAMS
+
+ <div *ngIf="algorithm==='trustrank'">
+ <div class="field">
+ <p class="control has-icons-left has-icons-right">
+ <label>Strain</label>
+ <input [(ngModel)]="trustrankStrain" class="input" type="text" placeholder="Strain" required>
+ </p>
+ <p class="control has-icons-left has-icons-right">
+ <label>Damping Factor</label>
+ <input [(ngModel)]="trustrankDampingFactor" class="input" type="number" placeholder="Damping factor"
+ min="0" max="1"
+ required>
+ </p>
+ <p class="control has-icons-left has-icons-right">
+ <label>Result Size</label>
+ <input [(ngModel)]="trustrankResultSize" class="input" type="number" placeholder="Result size" required>
+ </p>
+ </div>
+
</div>
- <div *ngIf="algorithm === 'trustrank'">
- SHOW PARAMETERS HERE LATER
+
+ <div *ngIf="algorithm==='keypathwayminer'">
+ <h1>Key Pathway Miner</h1>
</div>
- </div>
+
+ <div *ngIf="algorithm==='multisteiner'">
+ <h1>Multi-Steiner</h1>
+ <p class="control has-icons-left has-icons-right">
+ <label>Virus Strain</label>
+ <input [(ngModel)]="multisteinerStrain" class="input" type="text" placeholder="Virus Strain" required>
+ </p>
+ <p class="control has-icons-left has-icons-right">
+ <label>Number of Steiner trees to return</label>
+ <input [(ngModel)]="multisteinerNumTrees" class="input" type="number" min="1" max="25"
+ placeholder="Number of Steiner trees to return" required>
+ </p>
+ </div>
+ </section>
+
<footer class="modal-card-foot">
- <button class="button is-success" (click)="startTask(); close()">
- <span class="icon"><i class="fa fa-play"></i></span>
- <span>Start</span>
- </button>
+ <button (click)="startTask(); close()" class="button is-success">Launch</button>
+ <button (click)="close()" class="button">Close</button>
</footer>
</div>
</div>
+
+
diff --git a/src/app/components/protein-analysis/protein-analysis.component.ts b/src/app/components/protein-analysis/protein-analysis.component.ts
index c0a45209..19266918 100644
--- a/src/app/components/protein-analysis/protein-analysis.component.ts
+++ b/src/app/components/protein-analysis/protein-analysis.component.ts
@@ -13,12 +13,20 @@ export class ProteinAnalysisComponent implements OnInit {
@Output()
public showChange = new EventEmitter<boolean>();
- public algorithm: 'dummy' | 'trustrank' = 'dummy';
+ public algorithm: 'dummy' | 'trustrank' | 'keypathwayminer' | 'multisteiner';
+
+ // Trustrank Parameters
+ public trustrankStrain = 'SARS_CoV2';
+ public trustrankDampingFactor = 0.85;
+ public trustrankResultSize = 20;
+ public trustrankNumThreads = 1;
+ public trustrankDatasets = [];
+ public trustrankIgnoredEdgeTypes = [];
+
+ // Multisteiner Parameters
+ public multisteinerStrain = 'SARS_CoV2';
+ public multisteinerNumTrees = 5;
- public strain = 'SARS_CoV2';
- public dampingFactor = 0.85;
- public resultSize = 20;
- private /*sic!*/ numThreads = 1;
constructor(public analysis: AnalysisService) {
}
@@ -39,12 +47,18 @@ export class ProteinAnalysisComponent implements OnInit {
if (this.algorithm === 'dummy') {
// No parameters for dummy
} else if (this.algorithm === 'trustrank') {
- parameters.strain = this.strain;
+ parameters.strain = this.trustrankStrain;
parameters.datasets = [];
parameters.ignored_edge_types = [];
- parameters.damping_factor = this.dampingFactor;
- parameters.result_size = this.resultSize;
- parameters.num_threads = this.numThreads;
+ parameters.damping_factor = this.trustrankDampingFactor;
+ parameters.result_size = this.trustrankResultSize;
+ parameters.num_threads = this.trustrankNumThreads;
+ } else if (this.algorithm === 'keypathwayminer') {
+ // TODO
+ } else if (this.algorithm === 'multisteiner') {
+ parameters.strain = this.multisteinerStrain;
+ parameters.num_trees = this.multisteinerNumTrees;
+
}
await this.analysis.startAnalysis(this.algorithm, parameters);
diff --git a/src/styles.scss b/src/styles.scss
index bfcd0ad5..443146df 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -137,9 +137,6 @@ div.covex.explorer {
width: calc(100% - 20px);
position: relative;
margin-top: 0;
- /* Just for looks*/
- z-index: 30;
- padding: 0;
}
i.fas.is-success {
--
GitLab