<div *ngIf="token">
<div class="card analysis">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
<i class="fas fa-flask" aria-hidden="true"></i>
</span>
Analysis Results
</p>
<a (click)="close()" class="card-header-icon" aria-label="close">
<span class="icon">
<i class="fas fa-times" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="tabs is-centered">
<ul>
<li [class.is-active]="tab === 'meta'"><a (click)="tab = 'meta'">Meta</a></li>
<li [class.is-active]="tab === 'network'"><a (click)="tab = 'network'">Network</a></li>
<li [class.is-active]="tab === 'table'"><a (click)="tab = 'table'">Table</a></li>
</ul>
</div>
<div class="content tab-content" *ngIf="task && task.info.done" [class.is-visible]="tab === 'meta'">
<div *ngIf="task">
<p>
Algorithm: {{task.info.algorithm}}
</p>
<div *ngIf="task.info.algorithm === 'trustrank'">
<table class="table is-narrow">
<tbody>
<tr>
<td>Damping Factor</td>
<td>{{task.info.parameters.dampingFactor}}</td>
</tr>
<tr>
<td>Result Size</td>
<td>{{task.info.parameters.resultSize}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="content tab-content" *ngIf="task && task.info.done" [class.is-visible]="tab === 'network'">
<div class="card-image">
<div class="network center" #network>
<button class="button is-loading center">Loading</button>
</div>
</div>
<footer class="card-footer toolbar">
<div class="field has-addons">
<p class="control">
<button class="button is-rounded is-success is-rounded" [disabled]="true">
<span class="icon">
<i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
</span>
<span>
Export Results
</span>
</button>
</p>
<p class="control">
<button class="button is-primary is-rounded" [disabled]="true">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
</span>
<span>
Screenshot
</span>
</button>
</p>
<p class="control">
<button class="button is-danger is-rounded" (click)="analysis.removeTask(token); close()">
<span class="icon">
<i class="fas fa-trash" aria-hidden="true"></i>
</span>
<span>
Delete Analysis
</span>
</button>
</p>
</div>
<div *ngIf="task.info.target === 'drug-target' " class="field has-addons footer-toggle-buttons">
<p class="control">
<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" [class.is-primary]="!showDrugs"
(click)="toggleDrugs(false)">
<span>Off</span>
</button>
</p>
</div>
<div class="field has-addons footer-toggle-buttons">
<p class="control">
<button class="button is-rounded" [class.is-primary]="physicsEnabled"
(click)="updatePhysicsEnabled(true)">
<span class="icon is-small">
<i class="fas fa-wind"></i>
</span>
<span>Animation On</span>
</button>
</p>
<p class="control">
<button class="button is-rounded" [class.is-primary]="!physicsEnabled"
(click)="updatePhysicsEnabled(false)">
<span>Off</span>
</button>
</p>
</div>
</footer>
</div>
<div class="content tab-content scrollable" *ngIf="task && task.info.done" [class.is-visible]="tab === 'table'">
<div class="field has-addons footer-toggle-buttons" *ngIf="tableHasScores">
<p class="control">
<button class="button is-rounded" [class.is-primary]="tableNormalize" (click)="toggleNormalization(true)">
<span class="icon is-small">
<i class="fa fa-ruler-vertical"></i>
</span>
<span>Normalization On</span>
</button>
</p>
<p class="control">
<button class="button is-rounded" [class.is-primary]="!tableNormalize" (click)="toggleNormalization(false)">
<span>Off</span>
</button>
</p>
</div>
<div *ngIf="tableDrugs.length > 0">
<h4 class="is-4">
<span class="icon"><i class="fa fa-capsules"></i></span>
<span>Drugs</span>
</h4>
<a [href]="downloadLink('drugs')" class="button is-primary is-outlined is-pulled-right is-small">
<span class="icon"><i class="fa fa-download"></i></span>
<span>Download</span>
</a>
</div>
<table class="table is-striped" *ngIf="tableDrugs.length > 0">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Status</td>
<td *ngIf="tableHasScores">Score</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let e of tableDrugs">
<td><a href="https://www.drugbank.ca/drugs/{{ e.drugId }}" target="_blank">{{ e.drugId }}</a></td>
<td>{{e.name}}</td>
<td>{{e.status}}</td>
<td *ngIf="tableHasScores">{{e.score}}</td>
</tr>
</tbody>
</table>
<div *ngIf="tableProteins.length > 0">
<h4 class="is-4">
<span class="icon"><i class="fa fa-dna"></i></span>
<span>Proteins</span>
</h4>
<a [href]="downloadLink('proteins')" class="button is-primary is-outlined is-pulled-right is-small">
<span class="icon"><i class="fa fa-download"></i></span>
<span>Download</span>
</a>
</div>
<table class="table is-striped" *ngIf="tableProteins.length > 0">
<thead>
<tr>
<td>AC</td>
<td>Gene</td>
<td *ngIf="tableHasScores">Score</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let e of tableProteins">
<td><a href="https://www.uniprot.org/uniprot/{{ e.proteinAc }}" target="_blank">{{ e.proteinAc }}</a></td>
<td>{{e.name}}</td>
<td *ngIf="tableHasScores">{{e.score}}</td>
</tr>
</tbody>
</table>
<div *ngIf="tableViralProteins.length > 0">
<h4 class="is-4">
<span class="icon"><i class="fa fa-virus"></i></span>
<span>Viral Proteins</span>
</h4>
<a [href]="downloadLink('viral_proteins')" class="button is-primary is-outlined is-pulled-right is-small">
<span class="icon"><i class="fa fa-download"></i></span>
<span>Download</span>
</a>
</div>
<table class="table is-striped" *ngIf="tableViralProteins.length > 0">
<thead>
<tr>
<td>Name</td>
<td>Virus Strain</td>
<td *ngIf="tableHasScores">Score</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let e of tableViralProteins">
<td>{{e.effectName}}</td>
<td>{{e.virusName}}</td>
<td *ngIf="tableHasScores">{{e.score}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>