-
Hartung, Michael authoredHartung, Michael authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
analysis-panel.component.html 16.08 KiB
<div *ngIf="token">
<div class="card analysis" [ngClass]="{'fullscreen': fullscreen}">
<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)="analysis.removeTask(token); close()"
class="card-header-icon"
aria-label="delete"
pTooltip="Delete analysis"
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
tooltipPosition="left"
>
<span class="icon has-text-danger" title="Delete analysis">
<i class="fas fa-trash" aria-hidden="true"></i>
</span>
</a>
<a
(click)="close()"
class="card-header-icon"
aria-label="close"
pTooltip="Close analysis"
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
tooltipPosition="left"
>
<span class="icon" title="Close analysis">
<i class="fas fa-times color-danger" aria-hidden="true"></i>
</span>
</a>
<a
pTooltip="Open in fullscreen"
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
tooltipPosition="left"
*ngIf="!fullscreen"
(click)="toggleFullscreen()"
class="card-header-icon"
>
<span class="icon is-small">
<i class="fas fa-expand"></i>
</span>
</a>
<a
title="close fullscreen"
*ngIf="fullscreen"
(click)="toggleFullscreen()"
class="card-header-icon"
>
<span class="icon is-small">
<i class="fas fa-compress"></i>
</span>
</a>
</header>
<div
class="card-content tab-header-small"
[class.network-view-settings]="tab === 'network'"
>
<div class="tabs is-centered tabs-header">
<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="tab-content meta"
*ngIf="task && task.info.done"
[class.is-visible]="tab === 'meta'"
>
<div *ngIf="task">
<div class="columns m-1">
<div class="column content">
<h4 class="is-4 has-text-weight-bold">
<span class="icon">
<i class="fas fa-wrench" aria-hidden="true"></i>
</span>
{{
["quick", "super", "connect", "connectSelected"].indexOf(
task.info.algorithm
) === -1
? "Algorithm:"
: "Method:"
}}
{{ algorithmNames[task.info.algorithm] }}
</h4>
</div>
</div>
<div class="columns m-1">
<div class="column">
<table class="table is-narrow">
<tbody>
<tr
*ngIf="
result && result.geneInteractionDataset !== undefined
"
>
<td>Protein-Protein Interaction Dataset</td>
<td>
{{ result.geneInteractionDataset.name }} (Version
{{ result.geneInteractionDataset.version }})
</td>
</tr>
<tr
*ngIf="
result && result.drugInteractionDataset !== undefined
"
>
<td>Protein-Drug Interaction Dataset</td>
<td>
{{ result.drugInteractionDataset.name }} (Version
{{ result.drugInteractionDataset.version }})
</td>
</tr>
<tr *ngIf="task.info.parameters.resultSize !== undefined">
<td>Result Size</td>
<td>{{ task.info.parameters.resultSize }}</td>
</tr>
<tr *ngIf="task.info.parameters.k !== undefined">
<td>K</td>
<td>{{ task.info.parameters.k }}</td>
</tr>
<tr *ngIf="task.info.parameters.numTrees !== undefined">
<td>Number of trees</td>
<td>{{ task.info.parameters.numTrees }}</td>
</tr>
<tr *ngIf="task.info.parameters.tolerance !== undefined">
<td>Tolerance</td>
<td>{{ task.info.parameters.tolerance }}</td> </tr>
<tr *ngIf="task.info.parameters.dampingFactor !== undefined">
<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 color-danger"
></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 color-danger"
></i>
</td>
</tr>
<tr *ngIf="task.info.parameters.customEdges !== undefined">
<td>Include all displayed edges</td>
<td>
<i
*ngIf="task.info.parameters.customEdges"
class="fa fa-check"
></i>
<i
*ngIf="!task.info.parameters.customEdges"
class="fa fa-times color-danger"
></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
class="columns m-1"
*ngIf="
['quick', 'super', 'connect', 'connectSelected'].indexOf( task.info.algorithm
) > -1
"
>
<div class="column">
<h4 class="is-4 has-text-weight-bold">
<span class="icon">
<i class="fas fa-wrench" aria-hidden="true"></i>
</span>
Algorithm:
{{ algorithmNames["multisteiner"] }}
</h4>
<table class="table is-narrow">
<tbody>
<tr>
<td>Number of Trees</td>
<td>1</td>
</tr>
<tr>
<td>Tolerance</td>
<td>0</td>
</tr>
<tr>
<td>Hub Penality</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
<div
class="columns m-1"
*ngIf="['quick', 'super'].indexOf(task.info.algorithm) > -1"
>
<div class="column">
<h4 class="is-4 has-text-weight-bold">
<span class="icon">
<i class="fas fa-wrench" aria-hidden="true"></i>
</span>
Algorithm:
{{ algorithmNames["closeness"] }}
</h4>
<table class="table is-narrow">
<tbody>
<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-check"></i>
</td>
</tr>
<tr>
<td>Hub Penality</td>
<td>1</td>
</tr>
<tr>
<td>Result Size</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="tab-content" [class.is-visible]="tab === 'network'">
<!-- network start -->
<app-network networkType="analysis" [nodeData]="nodeData"></app-network>
<!-- network end -->
</div>
<div
class="content tab-content scrollable table-tab"
*ngIf="task && task.info.done"
[class.is-visible]="tab === 'table'"
>
<div *ngIf="task.info.target === 'drug'">
<div class="columns m-1">
<!-- column normalization for drugs button START -->
<div class="column">
<h4 class="is-4">
<span class="icon"><i class="fa fa-capsules"></i></span>
<span>Drugs</span>
</h4>
</div>
<div class="column">
<div class="field has-addons is-pulled-right m-1">
<a
[href]="downloadLink('drugs')"
class="button is-primary control is-outlined is-rounded is-pulled-right is-small"
>
<span class="icon"><i class="fa fa-download"></i></span>
<span>Download</span>
</a>
</div>
<div
class="field has-addons is-pulled-right m-1"
*ngIf="tableHasScores && task.info.algorithm !== 'proximity'"
>
<p class="control">
<button
class="button is-rounded has-tooltip is-small"
pTooltip="Normalize the scores"
[tooltipStyleClass]="
'drgstn drgstn-tooltip drgstn-tooltip-top'
"
tooltipPosition="top"
[class.is-primary]="tableNormalize"
(click)="toggleNormalization(true)"
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>
<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 is-small"
pTooltip="Disable normalization of the scores."
[tooltipStyleClass]="
'drgstn drgstn-tooltip drgstn-tooltip-top'
"
tooltipPosition="top"
[class.is-primary]="!tableNormalize"
(click)="toggleNormalization(false)"
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>
<span>Off</span>
</button>
</p>
</div>
</div> <!-- column normalization for drugs button START -->
</div>
<div class="columns m-1">
<!-- drug table or placeholder if no drugs found START -->
<div class="column">
<div *ngIf="tableDrugs.length === 0">
<i>No drugs have been found.</i>
</div>
<app-drug-table
[tableDrugs]="tableDrugs"
[tableDrugScoreTooltip]="tableDrugScoreTooltip"
[tableHasScores]="tableHasScores"
></app-drug-table>
</div>
<!-- drug table or placeholder if no drugs found END -->
</div>
</div>
<div *ngIf="tableProteins.length > 0" class="table-header">
<div class="columns m-1">
<div class="column">
<h4 class="is-4">
<span class="icon"><i class="fa fa-dna"></i></span>
<span>Proteins</span>
</h4>
</div>
<div class="column">
<div class="field has-addons is-pulled-right m-1 control">
<a
[href]="downloadLink('proteins')"
class="button is-primary is-rounded is-outlined is-pulled-right is-small"
>
<span class="icon"><i class="fa fa-download"></i></span>
<span>Download</span>
</a>
</div>
<div
class="field has-addons is-pulled-right m-1"
*ngIf="tableHasScores && task.info.target !== 'drug'"
>
<p class="control">
<button
class="button is-rounded has-tooltip is-small"
pTooltip="Normalize the scores"
[tooltipStyleClass]="
'drgstn drgstn-tooltip drgstn-tooltip-top'
"
tooltipPosition="top"
[class.is-primary]="tableNormalize"
(click)="toggleNormalization(true)"
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>
<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 is-small"
pTooltip="Disable normalization of the scores."
[tooltipStyleClass]="
'drgstn drgstn-tooltip drgstn-tooltip-top'
"
tooltipPosition="top"
[class.is-primary]="!tableNormalize"
(click)="toggleNormalization(false)"
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }" >
<span>Off</span>
</button>
</p>
</div>
</div>
</div>
</div>
<div class="columns m-1">
<div class="column">
<app-prot-table
[tableHasScores]="tableHasScores"
[tableProteins]="tableProteins"
[tableProteinScoreTooltip]="tableDrugScoreTooltip"
[tableProteinSelection]="tableProteinSelection"
[tableSelectedProteins]="tableSelectedProteins"
[identifier]="myConfig.identifier"
></app-prot-table>
</div>
</div>
</div>
</div>
</div>
</div>