-
Julian Matschinske authoredJulian Matschinske authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
analysis-window.component.html 13.78 KiB
<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 === 'table'"><a (click)="tab = 'table'">Table</a></li>
<li [class.is-active]="tab === 'network'"><a (click)="tab = 'network'">Network</a></li>
<li [class.is-active]="tab === 'meta'"><a (click)="tab = 'meta'">Parameters</a></li>
</ul>
</div>
<div class="content tab-content meta" *ngIf="task && task.info.done" [class.is-visible]="tab === 'meta'">
<div *ngIf="task">
<p *ngIf="task.info.algorithm !== 'quick' && task.info.algorithm !== 'super'">
Algorithm: <strong>{{algorithmNames[task.info.algorithm]}}</strong>
</p>
<div>
<table class="table is-narrow">
<tbody>
<tr *ngIf="task.info.parameters.resultSize">
<td>Result Size</td>
<td>{{task.info.parameters.resultSize}}</td>
</tr>
<tr *ngIf="task.info.parameters.k">
<td>K</td>
<td>{{task.info.parameters.k}}</td>
</tr>
<tr *ngIf="task.info.parameters.numTrees">
<td>Number of trees</td>
<td>{{task.info.parameters.numTrees}}</td>
</tr>
<tr *ngIf="task.info.parameters.tolerance || task.info.parameters.tolerance === 0">
<td>Tolerance</td>
<td>{{task.info.parameters.tolerance}}</td>
</tr>
<tr *ngIf="task.info.parameters.dampingFactor">
<td>Damping Factor</td>
<td>{{task.info.parameters.dampingFactor}}</td>
</tr>
<tr *ngIf="task.info.parameters.maxDeg !== undefined">
<td>Maximum Degree</td>
<td>{{task.info.parameters.maxDeg}}</td>
</tr>
<tr *ngIf="task.info.parameters.hubPenalty !== undefined">
<td>Hub Penality</td>
<td>{{task.info.parameters.hubPenalty}}</td>
</tr>
<tr *ngIf="task.info.parameters.includeIndirectDrugs !== undefined && task.info.target === 'drug'">
<td>Include indirect drugs</td>
<td>
<i *ngIf="task.info.parameters.includeIndirectDrugs" class="fa fa-check"></i>
<i *ngIf="!task.info.parameters.includeIndirectDrugs" class="fa fa-times"></i>
</td>
</tr>
<tr *ngIf="task.info.parameters.includeNonApprovedDrugs !== undefined && task.info.target === 'drug'">
<td>Include non-approved drugs</td>
<td>
<i *ngIf="task.info.parameters.includeNonApprovedDrugs" class="fa fa-check"></i> <i *ngIf="!task.info.parameters.includeNonApprovedDrugs" class="fa fa-times"></i>
</td>
</tr>
<tr *ngIf="task.info.parameters.ignoreNonSeedBaits !== undefined && task.info.target === 'drug-target'">
<td>Include non-seed viral proteins</td>
<td>
<i *ngIf="!task.info.parameters.ignoreNonSeedBaits" class="fa fa-check"></i>
<i *ngIf="task.info.parameters.ignoreNonSeedBaits" class="fa fa-times"></i>
</td>
</tr>
</tbody>
</table>
</div>
<div *ngIf="task.info.algorithm === 'quick' || task.info.algorithm === 'super'">
<p>
Algorithm: <strong>{{algorithmNames['multisteiner']}}</strong>
</p>
<table class="table is-narrow">
<tbody>
<tr>
<td>Number of Trees</td>
<td>1</td>
</tr>
<tr>
<td>Tolerance</td>
<td>10</td>
</tr>
</tbody>
</table>
<p>
Algorithm: <strong>{{algorithmNames['trustrank']}}</strong>
</p>
<table class="table is-narrow">
<tbody>
<tr>
<td>Damping Factor</td>
<td>0.85</td>
</tr>
<tr>
<td>Include indirect drugs</td>
<td>
<i class="fa fa-times"></i>
</td>
</tr>
<tr>
<td>Include non-approved drugs</td>
<td>
<i class="fa fa-times"></i>
</td>
</tr>
<tr>
<td>Result Size</td>
<td>30</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 image1" #network>
<button class="button is-loading center">Loading</button>
</div>
<div class="image2">
<img src="assets/ll2.png" width="200px"/>
</div>
</div>
<footer class="card-footer toolbar">
<div class="field"> <p class="control footer-buttons">
<button class="button is-primary is-rounded has-tooltip"
data-tooltip="Take a screenshot of the current network." (click)="toCanvas()">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
</span>
<span>
Screenshot
</span>
</button>
</p>
</div>
<div class="field">
<p class="control footer-buttons">
<button class="button is-danger is-rounded has-tooltip" data-tooltip="Delete the current analysis."
(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>
<app-toggle *ngIf="task.info.target === 'drug-target'" class="footer-buttons" textOn="Drugs On" textOff="Off"
tooltipOn="Display drugs in the network" tooltipOff="Hide drugs in the network"
[value]="showDrugs" (valueChange)="toggleDrugs($event)"></app-toggle>
<app-toggle class="footer-buttons" textOn="Animation On" textOff="Off"
tooltipOn="Enable the network animation." tooltipOff="Disable the network animation and freeze nodes."
[value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)"></app-toggle>
<div class="field">
<p class="control footer-buttons">
<a [href]="graphmlLink()" class="button is-success is-rounded has-tooltip" data-tooltip="Export this network as .graphml file.">
<span class="icon">
<i class="fas fa-download" aria-hidden="true"></i>
</span>
<span>
Export as .graphml
</span>
</a>
</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" *ngIf="tableHasScores">
<p class="control">
<button class="button is-rounded has-tooltip" data-tooltip="Normalize the scores"
[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 has-tooltip" data-tooltip="Disable normalization of the scores."
[class.is-primary]="!tableNormalize" (click)="toggleNormalization(false)">
<span>Off</span>
</button>
</p>
</div>
<div *ngIf="tableDrugs.length > 0" class="table-header">
<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>
<p-table *ngIf="tableDrugs.length > 0" [value]="tableDrugs">
<ng-template pTemplate="header">
<tr>
<th [pSortableColumn]="'drugId'">
ID
<p-sortIcon [field]="'drugId'"></p-sortIcon>
</th>
<th [pSortableColumn]="'name'">
Name
<p-sortIcon [field]="'name'"></p-sortIcon>
</th>
<th [pSortableColumn]="'status'">
Status
<p-sortIcon [field]="'status'"></p-sortIcon>
</th>
<th *ngIf="tableHasScores" [pSortableColumn]="'score'">
Score
<p-sortIcon [field]="'score'"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-e>
<tr>
<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 | number}}</td>
</tr>
</ng-template>
</p-table>
<div *ngIf="tableProteins.length > 0" class="table-header">
<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>
<p-table *ngIf="tableProteins.length > 0" selectionMode="multiple"
[value]="tableProteins" [selection]="tableSelectedProteins" dataKey="proteinAc"
(selectionChange)="tableProteinSelection($event)">
<ng-template pTemplate="header">
<tr>
<th class="checkbox-col">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th [pSortableColumn]="'proteinAc'">
UniProt Code
<p-sortIcon [field]="'proteinAc'"></p-sortIcon>
</th>
<th [pSortableColumn]="'name'">
Gene
<p-sortIcon [field]="'name'"></p-sortIcon>
</th>
<th *ngIf="tableHasScores" [pSortableColumn]="'score'">
Score
<p-sortIcon [field]="'score'"></p-sortIcon>
</th>
</tr> </ng-template>
<ng-template pTemplate="body" let-e>
<tr>
<td>
<p-tableCheckbox [value]="e"></p-tableCheckbox>
</td>
<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 | number}}</td>
</tr>
</ng-template>
</p-table>
<div *ngIf="tableViralProteins.length > 0" class="table-header">
<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>
<p-table *ngIf="tableViralProteins.length > 0" selectionMode="multiple"
[value]="tableViralProteins" [selection]="tableSelectedViralProteins" dataKey="effectId"
(selectionChange)="tableViralProteinSelection($event)">
<ng-template pTemplate="header">
<tr>
<th class="checkbox-col">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th [pSortableColumn]="'effectName'">
Name
<p-sortIcon [field]="'effectName'"></p-sortIcon>
</th>
<th [pSortableColumn]="'virusName'">
Virus Strain
<p-sortIcon [field]="'virusName'"></p-sortIcon>
</th>
<th *ngIf="tableHasScores" [pSortableColumn]="'score'">
Score
<p-sortIcon [field]="'score'"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-e>
<tr>
<td>
<p-tableCheckbox [value]="e"></p-tableCheckbox>
</td>
<td>{{e.effectName}}</td>
<td>{{e.virusName}}</td>
<td *ngIf="tableHasScores">{{e.score | number}}</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
</div>
</div>