Select Git revision
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
analysis-panel.component.html 19.80 KiB
<div *ngIf="token">
<div class="card analysis analysis-view" [ngClass]="{ fullscreen: fullscreen }">
<header class="card-header">
<p class="card-header-title">
<app-fa-solid-icon icon="flask"></app-fa-solid-icon>
Analysis Results
</p>
<span class="mr-1 is-pulled-right columns is-flex is-vcentered">
<div class="field has-addons">
<p class="control" *ngIf="!fullscreen">
<button
(click)="analysis.removeTask(token); close()"
class="button is-rounded is-small is-outlined highlight-danger has-text-danger"
aria-label="delete"
pTooltip="Delete analysis"
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
tooltipPosition="left"
>
<app-fa-solid-icon
classString="only-item-in-button"
icon="trash"
title="Delete analysis"
></app-fa-solid-icon>
</button>
</p>
<p class="control">
<button
pTooltip="Open in fullscreen"
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
tooltipPosition="left"
*ngIf="!fullscreen"
(click)="toggleFullscreen()"
class="button is-rounded is-small is-outlined highlight-primary"
>
<app-fa-solid-icon
icon="expand"
classString="only-item-in-button"
></app-fa-solid-icon>
</button>
<button
pTooltip="Close fullscreen"
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
tooltipPosition="left"
*ngIf="fullscreen"
(click)="toggleFullscreen()"
class="button is-rounded is-small is-outlined highlight-primary"
>
<app-fa-solid-icon
icon="compress"
classString="only-item-in-button"
></app-fa-solid-icon>
</button>
</p>
<div class="control dropdown" ngbDropdown>
<button ngbDropdownToggle
class="button is-rounded is-small is-outlined highlight-primary"
type="button" (click)="showMenu = !showMenu"
[class]="{'dropdown-toggle-enabled': showMenu}" (focusout)="hideMenu()">
<app-fa-solid-icon icon="bars" classString="only-item-in-button"></app-fa-solid-icon>
</button>
<ul ngbDropdownMenu class="dropdown-content dropdown-list"
[style]="{'display':showMenu ? 'inline-block':'none'}">
<li ngbDropdownItem pTooltip="Display end-user license agreement (EULA)." tooltipPosition="left"
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
(click)="showEULA()"><a>Show EULA</a></li>
<li ngbDropdownItem pTooltip="Opens Drugst.One website" tooltipPosition="left"
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"><a target="_blank"
href="https://drugst.one/home">About Drugst.One</a></li>
</ul>
</div>
<p class="control">
<button
class="button is-rounded is-small is-outlined highlight-danger has-text-danger"
(click)="close()"
aria-label="close"
pTooltip="Close analysis"
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
tooltipPosition="left"
>
<app-fa-solid-icon
icon="times"
classString="only-item-in-button"
title="Close analysis"
></app-fa-solid-icon>
</button>
</p>
</div>
</span>
</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 parameter-tab"
*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">
<app-fa-solid-icon
icon="wrench"
title="Algorithm"
></app-fa-solid-icon>
{{
["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 parameter-table">
<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>
<app-fa-solid-icon
*ngIf="task.info.parameters.includeIndirectDrugs"
icon="check"
title="indirect drugs included"
classString="has-text-success"
></app-fa-solid-icon>
<app-fa-solid-icon
*ngIf="!task.info.parameters.includeIndirectDrugs"
icon="times"
classString="has-text-danger"
title="indirect drugs excluded"
></app-fa-solid-icon>
</td>
</tr>
<tr
*ngIf="
task.info.parameters.includeNonApprovedDrugs !==
undefined && task.info.target === 'drug'
"
>
<td>Include non-approved drugs</td>
<td>
<app-fa-solid-icon
*ngIf="task.info.parameters.includeNonApprovedDrugs"
icon="check"
title="non-approved drugs included"
classString="has-text-success"
></app-fa-solid-icon>
<app-fa-solid-icon
*ngIf="!task.info.parameters.includeNonApprovedDrugs"
icon="times"
classString="has-text-danger"
title="non-approved drugs excluded"
></app-fa-solid-icon>
</td>
</tr>
<tr *ngIf="task.info.parameters.customEdges !== undefined">
<td>Include all displayed edges</td>
<td>
<app-fa-solid-icon
*ngIf="task.info.parameters.customEdges"
icon="check"
title="custom edges drugs included"
classString="has-text-success"
></app-fa-solid-icon>
<app-fa-solid-icon
*ngIf="!task.info.parameters.customEdges"
icon="times"
classString="has-text-danger"
title="custom edges drugs excluded"
></app-fa-solid-icon>
</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">
<app-fa-solid-icon
icon="wrench"
title="algorithm"
></app-fa-solid-icon>
Algorithm:
{{ algorithmNames["multisteiner"] }}
</h4>
<table class="table parameter-table">
<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">
<app-fa-solid-icon
icon="wrench"
title="algorithm"
></app-fa-solid-icon>
Algorithm:
{{ algorithmNames["closeness"] }}
</h4>
<table class="table parameter-table">
<tbody>
<tr>
<td>Include indirect drugs</td>
<td>
<app-fa-solid-icon
icon="times"
classString="has-text-danger"
title="indirect drugs excluded"
></app-fa-solid-icon>
</td>
</tr>
<tr>
<td>Include non-approved drugs</td>
<td>
<app-fa-solid-icon
icon="check"
title="non-approved drugs included"
classString="has-text-success"
></app-fa-solid-icon>
</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">
<app-fa-solid-icon
icon="capsules"
title="drug icon"
></app-fa-solid-icon>
<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"
>
<app-fa-solid-icon
icon="download"
title="download resulting drugs"
></app-fa-solid-icon>
<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 }"
>
<app-fa-solid-icon
icon="ruler-vertical"
title="normalization icon"
classString="is-small"
></app-fa-solid-icon>
<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">
<app-fa-solid-icon
icon="dna"
title="protein table"
></app-fa-solid-icon>
<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"
>
<app-fa-solid-icon
icon="download"
title="download resulting proteins"
></app-fa-solid-icon>
<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 }"
>
<app-fa-solid-icon
classString="is-small"
icon="ruler-vertical"
title="normalization for drug target results"
></app-fa-solid-icon>
<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]="drugstoneConfig.currentConfig().identifier"
></app-prot-table>
</div>
</div>
</div>
</div>
</div>
</div>