Simple tabbed algo frontend

src/app/components/protein-analysis/protein-analysis.component.html

@@ -5,39 +5,24 @@
       <p class="modal-card-title">Launch Protein Analysis</p>
       <button class="delete" aria-label="close" (click)="close()"></button>
     </header>
-    <section class="modal-card-body">
-      <h4 class="title is-4">Selection</h4>
-      <table class="table">
-        <thead>
-        <tr>
-          <td>AC</td>
-          <td>Actions</td>
-        </tr>
-        </thead>
-        <tbody>
-        <tr *ngFor="let p of analysis.getSelection()">
-          <td>{{p.proteinAc}}</td>
-          <td>
-            <button (click)="analysis.removeProtein(p)" class="button is-small is-danger">
-              <i class="fa fa-trash"></i>
-            </button>
-          </td>
-        </tr>
-        </tbody>
-      </table>
-    </section>
+    <div class="modal-card-body">
+      <div class="tabs">
+        <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>
+        </ul>
+      </div>
+      <div *ngIf="algorithm === 'dummy'">
+        NO PARAMS
+      </div>
+      <div *ngIf="algorithm === 'trustrank'">
+        SHOW PARAMETERS HERE LATER
+      </div>
+    </div>
     <footer class="modal-card-foot">
-      <button class="button is-primary" [disabled]="true">
+      <button class="button is-success" (click)="startTask(); close()">
         <span class="icon"><i class="fa fa-play"></i></span>
-        <span>Multi Steiner</span>
-      </button>
-      <button class="button is-primary" [disabled]="true">
-        <span class="icon"><i class="fa fa-play"></i></span>
-        <span>Key Pathway Miner</span>
-      </button>
-      <button class="button is-primary" (click)="startTask(); close()">
-        <span class="icon"><i class="fa fa-play"></i></span>
-        <span>Demo</span>
+        <span>Start</span>
       </button>
     </footer>
   </div>

src/app/components/protein-analysis/protein-analysis.component.ts

@@ -10,10 +10,16 @@ export class ProteinAnalysisComponent implements OnInit {
 
   @Input()
   public show = false;
-
   @Output()
   public showChange = new EventEmitter<boolean>();
 
+  public algorithm: 'dummy' | 'trustrank' = 'dummy';
+
+  public strain = 'SARS_CoV2';
+  public dampingFactor = 0.85;
+  public resultSize = 20;
+  private /*sic!*/ numThreads = 1;
+
   constructor(public analysis: AnalysisService) {
   }
 
@@ -26,9 +32,22 @@ export class ProteinAnalysisComponent implements OnInit {
   }
 
   public async startTask() {
-    await this.analysis.startAnalysis('dummy', {
+    const parameters: any = {
       proteins: this.analysis.getSelection().map((protein) => protein.proteinAc),
-    });
+    };
+
+    if (this.algorithm === 'dummy') {
+      // No parameters for dummy
+    } else if (this.algorithm === 'trustrank') {
+      parameters.strain = this.strain;
+      parameters.datasets = [];
+      parameters.ignored_edge_types = [];
+      parameters.damping_factor = this.dampingFactor;
+      parameters.result_size = this.resultSize;
+      parameters.num_threads = this.numThreads;
+    }
+
+    await this.analysis.startAnalysis(this.algorithm, parameters);
   }
 
 }