launch-analysis.component.html

<div class="modal" [class.is-active]="show">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Launch Analysis</p>
      <button (click)="close()" class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <div class="tabs is-toggle is-small is-fullwidth is-rounded">
        <ul>
          <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==='trustrank'">
        <div class="field">
          <label class="label" for="trustrank-strain">Strain</label>
          <div  class="control">
            <div class="select">
              <select id="trustrank-strain" [(ngModel)]="trustrankStrain">
                <option [ngValue]="'SARS_CoV2'">SARS Coronavirus 2</option>
                <option [ngValue]="'drugs'">Drugs</option>
              </select>
            </div>
          </div>
        </div>
        <div class="field">
          <label class="label" for="trustrank-df">Damping Factor</label>
          <div  class="control">
            <input [(ngModel)]="trustrankDampingFactor" id="trustrank-df" class="input" type="number"
                   placeholder="Damping factor"
                   min="0" max="1"
                   required>
          </div>
        </div>
        <div class="field">
          <label class="label" for="trustrank-rs">Result Size</label>
          <div  class="control">
            <input [(ngModel)]="trustrankResultSize" id="trustrank-rs" class="input" type="number"
                   placeholder="Result size" required>
          </div>
        </div>
      </div>

      <div *ngIf="algorithm==='keypathwayminer'">
        <div class="field">
          <label class="label" for="keypathwayminer-k">K</label>
          <div  class="control">
            <div class="select">
              <select id="keypathwayminer-k" [(ngModel)]="keypathwayminerK">
                <option [ngValue]="1">1</option>
                <option [ngValue]="2">2</option>
                <option [ngValue]="3">3</option>
                <option [ngValue]="4">4</option>
                <option [ngValue]="5">5</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      <div *ngIf="algorithm==='multisteiner'">
        <div class="field">
          <label class="label" for="multisteiner-strain">Virus Strain</label>
          <div  class="control">
            <div class="select">
              <select id="multisteiner-strain" [(ngModel)]="multisteinerStrain">
                <option [ngValue]="'SARS_CoV2'">SARS Coronavirus 2</option>
              </select>
            </div>
          </div>
        </div>
        <div class="field">
          <label class="label" for="multisteiner-numtrees">Number of Steiner trees to return</label>
          <div  class="control">
            <div class="select">
              <select id="multisteiner-numtrees" [(ngModel)]="multisteinerNumTrees">
                <option [ngValue]="1">1</option>
                <option [ngValue]="2">2</option>
                <option [ngValue]="3">3</option>
                <option [ngValue]="5">5</option>
                <option [ngValue]="10">10</option>
                <option [ngValue]="15">15</option>
                <option [ngValue]="20">20</option>
                <option [ngValue]="25">25</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </section>

    <footer class="modal-card-foot">
      <button (click)="startTask(); close()" class="button is-success is-rounded">Launch</button>
      <button (click)="close()" class="button is-rounded">Close</button>
    </footer>
  </div>
</div>