diff --git a/src/app/analysis.service.ts b/src/app/analysis.service.ts index 05d7d6fb5ba15895470983156b6dc5f25380faae..9bf57b53da03ad1cfd4eb3afaab8ab8401e85ee8 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 12e1934716a9cb637ca1e4f6d5e4693a2670fbb3..f6875127ebbd61fbfc15eea71777904a9ff02811 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 25d99deb83eb6ad0555d9a39699fadaa04abc97c..52283666387d92fe2eaa4d436256c65bab5d0ca2 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 8f62e08c6636c8709457c9437abbae4754d4fc4a..e8d4e2319ae7dfde561f6e52834d84a7f9a5e7c6 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 8cb73e1760d465297497adf2b432fdb52ec97ea5..38b0d7da93d3546850feb282603342f4ebc7c2eb 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 c0a452095a59cfccf8319a7c468af14772456efb..19266918c89ac10d2500bc71ce80fa4bbe35473d 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 bfcd0ad5a373b48393f5588ab407cb40df0c1cb4..443146df191152e43b90928333c3ec1f12189c53 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 {