<div id="appWindow" (window:resize)="onResize($event)">
<div class="is-hidden-mobile fullheight" id="appContainer">
<app-fa-icons></app-fa-icons>
<app-loading-screen></app-loading-screen>
<app-license-agreement></app-license-agreement>
<app-launch-analysis
[(show)]="showAnalysisDialog"
[target]="analysisDialogTarget"
(taskEvent)="emitTaskEvent($event)"
>
</app-launch-analysis>
<app-add-expressed-proteins
[(show)]="showThresholdDialog"
[selectedTissue]="networkHandler.activeNetwork.currentViewSelectedTissue"
[visibleNodes]="networkHandler.activeNetwork.currentViewNodes"
[currentViewProteins]="networkHandler.activeNetwork.currentViewProteins"
[expressionMap]="networkHandler.activeNetwork.expressionMap"
>
</app-add-expressed-proteins>
<!-- Start explorer -->
<div
class="drugstone explorer columns is-gapless"
[ngClass]="{
'is-flex-direction-row-reverse':
drugstoneConfig.config.showSidebar === 'right'
}"
>
<!-- Start left sidebar -->
<div
class="drugstone sidebar column"
*ngIf="drugstoneConfig.config.showSidebar"
>
<div
*ngIf="drugstoneConfig.config.showItemSelector"
class="card bar-large mt-0"
>
<header
class="card-header"
[ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
>
<p class="card-header-title">
<ng-container
*ngIf="!networkHandler.activeNetwork.selectedWrapper"
>
<app-fa-solid-icon icon="info"></app-fa-solid-icon>
<span> No item selected </span>
</ng-container>
<ng-container
*ngIf="networkHandler.activeNetwork.selectedWrapper"
>
<span>
{{ drugstoneConfig.currentConfig().nodeGroups[networkHandler.activeNetwork.selectedWrapper.data[networkHandler.activeNetwork.selectedWrapper.data.group === 'selectedNode' ? '_group':'group']].groupName}}
</span>
</ng-container>
</p>
<a
(click)="collapseDetails = !collapseDetails"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<app-fa-solid-icon
*ngIf="collapseDetails"
icon="angle-down"
></app-fa-solid-icon>
<app-fa-solid-icon
*ngIf="!collapseDetails"
icon="angle-left"
></app-fa-solid-icon>
</a>
</header>
<div *ngIf="collapseDetails">
<div class="card-content">
<app-info-tile
[expressions]="networkHandler.activeNetwork.expressionMap"
[wrapper]="networkHandler.activeNetwork.selectedWrapper"
></app-info-tile>
</div>
</div>
</div>
<div
*ngIf="drugstoneConfig.config.showOverview"
class="card bar-large"
[ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
>
<header class="card-header">
<p class="card-header-title">
<app-fa-solid-icon icon="info"></app-fa-solid-icon>
Network Overview
</p>
<a
(click)="collapseOverview = !collapseOverview"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<app-fa-solid-icon
*ngIf="collapseOverview"
icon="angle-down"
></app-fa-solid-icon>
<app-fa-solid-icon
*ngIf="!collapseOverview"
icon="angle-left"
></app-fa-solid-icon>
</a>
</header>
<div *ngIf="collapseOverview">
<div class="card-content">
<nav class="level" *ngIf="proteinData">
<!-- TO DO : CHANGE THIS LATER
<div class="level-item has-text-centered">
<div>
<p class="heading">Viral<br>Proteins</p>
<p class="title"> {{ proteinData.effects.length }}</p>
</div>
</div>
-->
<div class="level-item has-text-centered">
<div>
<p class="heading">Nodes</p>
<p class="title">
{{
networkHandler.activeNetwork.currentViewNodes != null
? networkHandler.activeNetwork.currentViewNodes.length
: 0
}}
</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Edges</p>
<p class="title">
{{
networkHandler.activeNetwork.currentViewEdges != null
? networkHandler.activeNetwork.currentViewEdges.length
: 0
}}
</p>
</div>
</div>
</nav>
</div>
</div>
</div>
<div
*ngIf="drugstoneConfig.config.showQuery"
class="card bar-large"
[ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
>
<header class="card-header">
<p class="card-header-title">
<app-fa-solid-icon icon="search"></app-fa-solid-icon>
Query Node
</p>
<a
(click)="collapseQuery = !collapseQuery"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<app-fa-solid-icon
*ngIf="collapseQuery"
icon="angle-down"
></app-fa-solid-icon>
<app-fa-solid-icon
*ngIf="!collapseQuery"
icon="angle-left"
></app-fa-solid-icon>
</a>
</header>
<div *ngIf="collapseQuery">
<div class="card-content">
<div class="field">
<div class="control">
<app-query-tile-component
(selectItem)="queryAction($event)"
[queryItems]="networkHandler.activeNetwork.queryItems"
></app-query-tile-component>
</div>
</div>
</div>
</div>
</div>
<app-quick-drug-target
*ngIf="drugstoneConfig.config.showConnectGenes"
(taskEvent)="emitTaskEvent($event)"
></app-quick-drug-target>
<app-quick-drug
*ngIf="drugstoneConfig.config.showSimpleAnalysis"
(taskEvent)="emitTaskEvent($event)"
></app-quick-drug>
<div
*ngIf="drugstoneConfig.config.showAdvAnalysis"
class="card bar-large"
>
<header
class="card-header"
[ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
>
<p class="card-header-title">
<app-fa-solid-icon icon="flask"></app-fa-solid-icon>
Analysis
</p>
<a
(click)="collapseAnalysis = !collapseAnalysis"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<app-fa-solid-icon
*ngIf="collapseAnalysis"
icon="angle-down"
></app-fa-solid-icon>
<app-fa-solid-icon
*ngIf="!collapseAnalysis"
icon="angle-left"
></app-fa-solid-icon>
</a>
</header>
<div *ngIf="collapseAnalysis">
<div class="card-content">
<div class="field"
*ngIf="!drugstoneConfig.config.showAdvAnalysisContent || drugstoneConfig.config.showAdvAnalysisContent.includes('drug-target-search')">
<div
class="control"
pTooltip="Find drug targets for the selected proteins."
[tooltipStyleClass]="
'drgstn drgstn-tooltip drgstn-tooltip-top'
"
tooltipPosition="top"
>
<button
(click)="
analysisDialogTarget = 'drug-target';
showAnalysisDialog = true
"
class="button is-primary is-fullwidth is-rounded has-tooltip"
[disabled]="analysis.getCount() === 0"
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>
<app-fa-solid-icon icon="crosshairs" classString="first-item-in-button"></app-fa-solid-icon>
<span>{{ drugstoneConfig.config.taskTargetName }}</span>
</button>
</div>
</div>
<div class="field" *ngIf="!drugstoneConfig.config.showAdvAnalysisContent || drugstoneConfig.config.showAdvAnalysisContent.includes('drug-search')">
<div
class="control"
pTooltip="Find drugs for the selected proteins."
[tooltipStyleClass]="
'drgstn drgstn-tooltip drgstn-tooltip-top'
"
tooltipPosition="top"
>
<button
(click)="
analysisDialogTarget = 'drug'; showAnalysisDialog = true
"
class="button is-primary is-fullwidth is-rounded has-tooltip"
[disabled]="analysis.getCount() === 0"
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>
<app-fa-solid-icon icon="capsules" classString="first-item-in-button"></app-fa-solid-icon>
<span>
{{ drugstoneConfig.config.taskDrugName }}
</span>
</button>
</div>
</div>
<div class="field" *ngIf="!drugstoneConfig.config.showAdvAnalysisContent || drugstoneConfig.config.showAdvAnalysisContent.includes('enrichment-gprofiler')">
<div class="control">
<a
*ngIf="analysis.getCount() > 0"
(click)="openExternal(gProfilerLink())"
target="_blank"
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
class="button is-primary is-fullwidth is-rounded has-tooltip"
pTooltip="Use enrichment analysis via g:Profiler (external)."
[tooltipStyleClass]="
'drgstn drgstn-tooltip drgstn-tooltip-top'
"
tooltipPosition="top"
>
<app-fa-solid-icon
classString="first-item-in-button"
icon="external-link-alt"
></app-fa-solid-icon>
<span
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>
g:Profiler Enrichment Analysis
</span>
</a>
<a
*ngIf="analysis.getCount() === 0"
disabled
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
class="button is-primary is-fullwidth is-rounded has-tooltip"
pTooltip="Use enrichment analysis via g:Profiler (external)."
[tooltipStyleClass]="
'drgstn drgstn-tooltip drgstn-tooltip-top'
"
tooltipPosition="top"
>
<app-fa-solid-icon
icon="external-link-alt"
classString="first-item-in-button"
></app-fa-solid-icon>
<span
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>
g:Profiler Enrichment Analysis
</span>
</a>
</div>
</div>
<div class="field" *ngIf="!drugstoneConfig.config.showAdvAnalysisContent || drugstoneConfig.config.showAdvAnalysisContent.includes('enrichment-digest')">
<div class="control">
<a
*ngIf="analysis.getCount() > 0"
(click)="openDigest()"
target="_blank"
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
class="button is-primary is-fullwidth is-rounded has-tooltip"
pTooltip="Use enrichment analysis via DIGEST (external)."
[tooltipStyleClass]="
'drgstn drgstn-tooltip drgstn-tooltip-top'
"
tooltipPosition="top"
>
<app-fa-solid-icon
classString="first-item-in-button"
icon="external-link-alt"
></app-fa-solid-icon>
<span
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>
DIGEST Enrichment Analysis
</span>
</a>
<a
*ngIf="analysis.getCount() === 0"
disabled
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
class="button is-primary is-fullwidth is-rounded has-tooltip"
pTooltip="Use enrichment analysis via DIGEST (external)."
[tooltipStyleClass]="
'drgstn drgstn-tooltip drgstn-tooltip-top'
"
tooltipPosition="top"
>
<app-fa-solid-icon
icon="external-link-alt"
classString="first-item-in-button"
></app-fa-solid-icon>
<span
[ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
>
DIGEST Enrichment Analysis
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="drugstoneConfig.config.showTasks" class="card bar-large">
<header
class="card-header"
[ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
>
<p class="card-header-title">
<app-fa-solid-icon icon="tasks"></app-fa-solid-icon>
Tasks ({{ analysis.tasks != null ? analysis.tasks.length : 0 }})
</p>
<a
(click)="collapseTask = !collapseTask"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<app-fa-solid-icon
*ngIf="collapseTask"
icon="angle-down"
></app-fa-solid-icon>
<app-fa-solid-icon
*ngIf="!collapseTask"
icon="angle-left"
></app-fa-solid-icon>
</a>
</header>
<div *ngIf="collapseTask">
<div
class="card-content overflow task-list-container"
*ngIf="analysis.tasks && analysis.tasks.length > 0"
>
<app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
</div>
<footer class="card-footer">
<a
*ngIf="analysis.tasks && analysis.tasks.length > 0"
(click)="
analysis.removeAllTasks(); selectedAnalysisToken = null
"
class="card-footer-item has-text-danger"
pTooltip="Delete all tasks."
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
tooltipPosition="top"
>
<app-fa-solid-icon icon="trash"></app-fa-solid-icon>
<span> Delete all </span>
</a>
</footer>
</div>
</div>
<div
*ngIf="drugstoneConfig.config.showSelection"
class="card bar-large"
>
<header
class="card-header"
[ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
>
<p class="card-header-title">
<app-fa-solid-icon icon="filter"></app-fa-solid-icon>
Selection ({{ analysis.getCount() }})
</p>
<a
(click)="collapseSelection = !collapseSelection"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<app-fa-solid-icon
*ngIf="collapseSelection"
icon="angle-down"
></app-fa-solid-icon>
<app-fa-solid-icon
*ngIf="!collapseSelection"
icon="angle-left"
></app-fa-solid-icon>
</a>
</header>
<div
*ngIf="collapseSelection"
class="seed-selection"
[ngClass]="{ 'text-normal': 'drugstoneConfig.smallStyle' }"
>
<div class="card-content overflow">
<table
class="table selection-table"
*ngIf="analysis.getCount() > 0"
>
<thead>
<tr>
<td>Label</td>
<td>Group</td>
<td *ngIf="drugstoneConfig.currentConfig().identifier !== 'symbol'">
Symbol
</td>
<td *ngIf="drugstoneConfig.currentConfig().identifier !== 'uniprot'">
Uniprot
</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let p of analysis.getSelection()">
<td>
<p class="is-capitalized">{{ p.data.label }}</p>
</td>
<td>
<p>
{{
drugstoneConfig.currentConfig().nodeGroups[p.data['_group']][
"groupName"
]
}}
</p>
</td>
<td *ngIf="drugstoneConfig.currentConfig().identifier !== 'symbol'">
<p>{{ p.data.symbol }}</p>
</td>
<td
*ngIf="drugstoneConfig.currentConfig().identifier !== 'uniprot'"
class="uniprot"
title="{{ p.data.uniprotAc }}"
>
<p>{{ p.data.uniprotAc }}</p>
</td>
<td>
<button
(click)="analysis.removeItems([p])"
class="button is-small is-danger is-outlined has-tooltip"
tooltipPosition="top"
pTooltip="Remove from selection."
>
<app-fa-solid-icon icon="trash"></app-fa-solid-icon>
</button>
</td>
</tr>
</tbody>
</table>
<i *ngIf="analysis.getCount() === 0">
Double-click on a node to select it for the analysis.
</i>
</div>
<footer class="card-footer">
<a
(click)="analysis.addAllToSelection()"
class="card-footer-item text-primary"
tooltipPosition="top"
pTooltip="Add all proteins to the selection."
>
<app-fa-solid-icon icon="plus"></app-fa-solid-icon>
<span> Add all </span>
</a>
</footer>
<footer class="card-footer">
<a
class="card-footer-item text-primary"
tooltipPosition="top"
pTooltip="Add all proteins to the selection."
>
<app-fa-solid-icon icon="plus"></app-fa-solid-icon>
<span class="is-fullwidth">
<app-group-selection
(selectGroupEmitter)="analysis.addGroupToSelection($event)"
[nodeGroups]="drugstoneConfig.currentConfig().nodeGroups"
></app-group-selection>
</span>
</a>
</footer>
<footer class="card-footer">
<a
(click)="
analysis.invertSelection(
networkHandler.activeNetwork.currentViewNodes
)
"
class="card-footer-item text-primary"
tooltipPosition="top"
pTooltip="Invert the current selection."
>
<app-fa-solid-icon icon="sync"></app-fa-solid-icon>
<span> Invert </span>
</a>
<a
*ngIf="analysis.getSelection().length"
(click)="analysis.resetSelection()"
class="card-footer-item has-text-danger"
tooltipPosition="top"
pTooltip="Remove all entries from the selection."
>
<app-fa-solid-icon icon="broom"></app-fa-solid-icon>
<span> Reset </span>
</a>
</footer>
<!-- </div> -->
<!-- </div> -->
</div>
</div>
</div>
<!-- Start network block -->
<div class="drugstone network column" id="main-column">
<!-- analysis panel with analysis network -->
<div class="analysis-view" *ngIf="selectedAnalysisToken">
<app-analysis-panel
[(token)]="selectedAnalysisToken"
(showDetailsChange)="
networkHandler.activeNetwork.selectedWrapper = $event
"
(visibleItems)="analysisWindowChanged($event)"
></app-analysis-panel>
</div>
<!-- explorer network -->
<app-network networkType="explorer" [nodeData]="nodeData"></app-network>
</div>
<!-- End network block -->
<div class="is-hidden-tablet mobile-fallback">
Sorry, drugstone is not available for mobile phones. To find information
about drugstone, please check the <a routerLink="/about">About</a> page
or visit this page with another device with a larger screen.
</div>
</div>
</div>
<app-toast></app-toast>
</div>