Merge branch 'analyses_tabs' into 'master'

Analyses tabs

See merge request covid-19/frontend!35

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 {

src/app/app.module.ts

 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]
 
 })

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>

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));
     }

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>
+
+

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);

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 {