-
Michael Hartung authoredMichael Hartung authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
explorer-page.component.html 33.87 KiB
<div id="appWindow" (window:resize)="onResize($event)">
<div class="is-hidden-mobile fullheight" id="appContainer">
<app-launch-analysis
[(show)]="showAnalysisDialog"
[target]="analysisDialogTarget"
[config]="myConfig"
[inputNetwork]="{ nodes: proteins, edges: edges }"
(taskEvent)="emitTaskEvent($event)"
>
</app-launch-analysis>
<app-custom-proteins
[(show)]="showCustomProteinsDialog"
[visibleNodes]="currentViewNodes"
>
</app-custom-proteins>
<app-add-expressed-proteins
[(show)]="showThresholdDialog"
[selectedTissue]="currentViewSelectedTissue"
[visibleNodes]="currentViewNodes"
[currentViewProteins]="currentViewProteins"
[expressionMap]="expressionMap"
>
</app-add-expressed-proteins>
<!-- Start explorer -->
<div class="covex explorer">
<!-- Start left sidebar -->
<div class="covex sidebar" [ngClass]="{ 'is-pulled-right': myConfig.sidebarPos === 'right' }">
<div *ngIf="myConfig.showItemSelector" class="card bar-large mt-0">
<header
class="card-header"
[ngClass]="{ 'b-text-small': smallStyle }"
>
<p class="card-header-title">
<span *ngIf="!selectedWrapper" class="icon">
<i class="fas fa-info" aria-hidden="true"></i>
</span>
<!-- <i *ngIf="selectedWrapper && selectedWrapper.data.netexId && selectedWrapper.data.netexId.startsWith('p')" class="fas fa-dna" aria-hidden="true"></i>
<i *ngIf="selectedWrapper && selectedWrapper.data.netexId && selectedWrapper.data.netexId.startsWith('d')" class="fas fa-capsules"
aria-hidden="true"></i> -->
<span *ngIf="!selectedWrapper">No item selected</span>
<span *ngIf="selectedWrapper">
<span>{{ selectedWrapper.data.type }}</span>
</span>
</p>
<a
(click)="collapseDetails = !collapseDetails"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<span *ngIf="collapseDetails" class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
<span *ngIf="!collapseDetails" class="icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</a>
</header>
<div *ngIf="collapseDetails">
<div class="card-content">
<app-info-tile
[wrapper]="selectedWrapper"
[smallStyle]="smallStyle"
></app-info-tile>
</div>
</div>
</div>
<div
*ngIf="myConfig.showOverview"
class="card bar-large"
[ngClass]="{ 'b-text-small': smallStyle }"
>
<header class="card-header">
<p class="card-header-title">
<span class="icon">
<i class="fas fa-info" aria-hidden="true"></i>
</span>
Network Overview
</p>
<a
(click)="collapseOverview = !collapseOverview"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<span *ngIf="collapseOverview" class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
<span *ngIf="!collapseOverview" class="icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</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">
{{
currentViewNodes != null ? currentViewNodes.length : 0
}}
</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Interactions</p>
<p class="title">
{{
currentViewEdges != null ? currentViewEdges.length : 0
}}
</p>
</div>
</div>
</nav>
</div>
</div>
</div>
<div
*ngIf="myConfig.showQuery"
class="card bar-large"
[ngClass]="{ 'b-text-small': smallStyle }"
>
<header class="card-header"> <p class="card-header-title">
<span class="icon">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
Query Node
</p>
<a
(click)="collapseQuery = !collapseQuery"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<span class="icon">
<span *ngIf="collapseQuery" class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
<span *ngIf="!collapseQuery" class="icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</span>
</a>
</header>
<div *ngIf="collapseQuery">
<div class="card-content">
<div class="field">
<div class="control">
<app-query-tile-component
(selectItem)="queryAction($event)"
[queryItems]="queryItems"
></app-query-tile-component>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="myConfig.showSimpleAnalysis" class="card bar-large">
<header
class="card-header"
[ngClass]="{ 'b-text-small': smallStyle }"
>
<p class="card-header-title">
<span class="icon">
<i class="fas fa-flask" aria-hidden="true"></i>
</span>
Simple Analysis
</p>
<a
(click)="collapseAnalysisQuick = !collapseAnalysisQuick"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<span *ngIf="collapseAnalysisQuick" class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
<span *ngIf="!collapseAnalysisQuick" class="icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</a>
</header>
<div *ngIf="collapseAnalysisQuick">
<div
class="card-content quick-find"
[ngClass]="{ small: smallStyle }"
>
<div class="field">
<div class="control">
<div
class="tile notification quick-start warning" [ngClass]="{ small: smallStyle }"
>
<div class="align-vmiddle">
<div
[ngClass]="{
digit: !smallStyle,
'digit-small': smallStyle
}"
>
<i class="fa fa-fast-forward"></i>
</div>
<div
style="
display: flex;
justify-content: center;
width: 100%;
"
>
<button
(click)="analysis.startQuickAnalysis(true, null)"
[disabled]="analysis.isLaunchingQuick()"
class="
button
is-white is-rounded
has-tooltip
quick-start-btn
"
pTooltip="Find drugs for all proteins."
[tooltipStyleClass]="'drgstn drgstn-tooltip'"
tooltipPosition="top"
>
<span class="icon quick-icon">
<span *ngIf="!analysis.isLaunchingQuick()">
<i class="fa fa-capsules"></i>
</span>
<span *ngIf="analysis.isLaunchingQuick()">
<i class="fa fa-spin fa-spinner"></i>
</span>
</span>
<span [ngClass]="{ 'text-normal': smallStyle }">
Quick Start
</span>
</button>
</div>
</div>
</div>
<div class="divisor-rapid">— or —</div>
<div
class="tile notification quick-start info"
[ngClass]="{ small: smallStyle }"
>
<div class="align-vmiddle">
<div
[ngClass]="{
digit: !smallStyle,
'digit-small': smallStyle
}"
*ngIf="analysis.getCount() == 0"
>
1
</div>
<div
[ngClass]="{
digit: !smallStyle,
'digit-small': smallStyle
}"
*ngIf="analysis.getCount() > 0"
>
<i class="fa fa-check"></i>
</div> <div
style="
display: flex;
justify-content: center;
width: 100%;
"
>
<div
[ngClass]="{ 'text-normal': smallStyle }"
class="quick-start-btn"
>
Select Proteins
</div>
</div>
</div>
</div>
<div
class="tile notification quick-start info"
[ngClass]="{ small: smallStyle }"
>
<div class="align-vmiddle">
<div
[ngClass]="{
digit: !smallStyle,
'digit-small': smallStyle
}"
>
2
</div>
<div
style="
display: flex;
justify-content: center;
width: 100%;
"
>
<button
(click)="analysis.startQuickAnalysis(false, null)"
[disabled]="
analysis.getCount() === 0 ||
analysis.isLaunchingQuick()
"
class="
button
is-white is-rounded
quick-start-btn
drugs-btn
"
pTooltip="Find drugs for the selected proteins."
[tooltipStyleClass]="'drgstn drgstn-tooltip'"
tooltipPosition="top"
>
<span class="icon quick-icon">
<span *ngIf="!analysis.isLaunchingQuick()">
<i class="fa fa-capsules"></i>
</span>
<span *ngIf="analysis.isLaunchingQuick()">
<i class="fa fa-spin fa-spinner"></i>
</span>
</span>
<span [ngClass]="{ 'text-normal': smallStyle }">
{{ myConfig.taskDrugName }}
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div>
<div *ngIf="myConfig.showAdvAnalysis" class="card bar-large">
<header
class="card-header"
[ngClass]="{ 'b-text-small': smallStyle }"
>
<p class="card-header-title">
<span class="icon">
<i class="fas fa-flask" aria-hidden="true"></i>
</span>
Analysis
</p>
<a
(click)="collapseAnalysis = !collapseAnalysis"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<span *ngIf="collapseAnalysis" class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
<span *ngIf="!collapseAnalysis" class="icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</a>
</header>
<div *ngIf="collapseAnalysis">
<div class="card-content">
<div class="field">
<div
class="control"
pTooltip="Find drug targets for the selected proteins."
[tooltipStyleClass]="'drgstn drgstn-tooltip'"
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': smallStyle }"
>
<span class="icon">
<i class="fa fa-crosshairs"></i>
</span>
<span>{{ myConfig.taskDrugName }}</span>
</button>
</div>
</div>
<div class="field">
<div
class="control"
pTooltip="Find drugs for the selected proteins."
[tooltipStyleClass]="'drgstn drgstn-tooltip'"
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': smallStyle }"
>
<span class="icon">
<i class="fa fa-capsules"></i>
</span>
<span>
{{ myConfig.taskDrugName }}
</span>
</button>
</div>
</div>
<div class="field">
<div class="control">
<a
*ngIf="analysis.getCount() > 0"
[href]="gProfilerLink()"
target="_blank"
class="
button
is-primary is-fullwidth is-rounded
has-tooltip
"
pTooltip="Use enrichment analysis via g:Profiler (external)."
[tooltipStyleClass]="'drgstn drgstn-tooltip'"
tooltipPosition="top"
>
<span class="icon">
<i class="fa fa-external-link-alt"></i>
</span>
<span [ngClass]="{ 'text-small': smallStyle }">
Enrichment Analysis
</span>
</a>
<a
*ngIf="analysis.getCount() === 0"
disabled
class="
button
is-primary is-fullwidth is-rounded
has-tooltip
"
pTooltip="Use enrichment analysis via g:Profiler (external)."
[tooltipStyleClass]="'drgstn drgstn-tooltip'"
tooltipPosition="top"
>
<span class="icon">
<i class="fa fa-external-link-alt"></i>
</span>
<span [ngClass]="{ 'text-small': smallStyle }">
Enrichment Analysis
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="myConfig.showTasks" class="card bar-large">
<header
class="card-header"
[ngClass]="{ 'b-text-small': smallStyle }"
>
<p class="card-header-title">
<span class="icon">
<i class="fas fa-tasks" aria-hidden="true"></i> </span>
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"
>
<span *ngIf="collapseTask" class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
<span *ngIf="!collapseTask" class="icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</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" [smallStyle]="smallStyle"></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 text-danger"
pTooltip="Delete all tasks."
[tooltipStyleClass]="'drgstn drgstn-tooltip'"
tooltipPosition="top"
>
<span class="icon">
<i class="fa fa-trash"></i>
</span>
<span> Delete all </span>
</a>
</footer>
</div>
</div>
<div *ngIf="myConfig.showSelection" class="card bar-large">
<header
class="card-header"
[ngClass]="{ 'b-text-small': smallStyle }"
>
<p class="card-header-title">
<span class="icon">
<i class="fas fa-filter" aria-hidden="true"></i>
</span>
Selection ({{ analysis.getCount() }})
</p>
<a
(click)="collapseSelection = !collapseSelection"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<span *ngIf="collapseSelection" class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
<span *ngIf="!collapseSelection" class="icon">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</a>
</header>
<div *ngIf="collapseSelection"
class="seed-selection"
[ngClass]="{ 'text-normal': '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="myConfig.identifier !== 'symbol'">Symbol</td>
<td *ngIf="myConfig.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>
{{ myConfig.nodeGroups[p.data.group]["groupName"] }}
</p>
</td>
<td *ngIf="myConfig.identifier !== 'symbol'">
<p>{{ p.data.symbol }}</p>
</td>
<td *ngIf="myConfig.identifier !== 'uniprot'">
<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."
>
<i class="fa fa-trash"></i>
</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" *ngIf="selectedAnalysisToken">
<a (click)="analysis.addSeeds(currentViewNodes)"
class="card-footer-item has-text-success" tooltipPosition="top" pTooltip="Add all visible seeds.">
<span class="icon">
<i class="fa fa-plus"></i>
</span>
<span>
Add seeds
</span>
</a>
<a (click)="analysis.removeSeeds(currentViewNodes)"
class="card-footer-item text-danger" tooltipPosition="top" pTooltip="Remove all seeds.">
<span class="icon"> <i class="fa fa-minus"></i>
</span>
<span>
Remove seeds
</span>
</a>
</footer>
<footer class="card-footer">
<a (click)="showCustomProteinsDialog = true"
class="card-footer-item text-primary"
tooltipPosition="top" pTooltip="Add a custom list of proteins.">
<span class="icon">
<i class="fa fa-upload"></i>
</span>
<span>
Custom proteins
</span>
</a>
<a (click)="showThresholdDialog = true"
class="card-footer-item text-primary"
pTooltip="Add proteins expressed in the tissue." tooltipPosition="top">
<span class="icon">
<i class="fas fa-angle-double-up"></i>
</span>
<span>
Tissue proteins
</span>
</a>
</footer> -->
<footer class="card-footer">
<!-- <a (click)="analysis.invertSelection(currentViewNodes)" class="card-footer-item text-primary"
tooltipPosition="top" pTooltip="Invert the current selection.">
<span class="icon">
<i class="fa fa-sync"></i>
</span>
<span>
Invert
</span>
</a> -->
<a
*ngIf="analysis.getSelection().length"
(click)="analysis.resetSelection()"
class="card-footer-item text-danger"
tooltipPosition="top"
pTooltip="Remove all entries from the selection."
>
<span class="icon">
<i class="fa fa-broom"></i>
</span>
<span> Reset </span>
</a>
</footer>
<!-- </div> -->
<!-- </div> -->
</div>
</div>
</div>
<!-- Start network block -->
<div class="covex network center-panel" id="main-column">
<div class="analysis-view" *ngIf="selectedAnalysisToken">
<app-analysis-panel
[(token)]="selectedAnalysisToken"
(showDetailsChange)="selectedWrapper = $event"
(visibleItems)="analysisWindowChanged($event)"
[config]="myConfig"
[smallStyle]="smallStyle" ></app-analysis-panel>
</div>
<div class="card network">
<header class="card-header network-header">
<p class="card-header-title">
{{ myConfig.title }}
</p>
</header>
<div class="card-content explorer-network-view-settings">
<div class="card-image canvas-content" #networkWithLegend>
<div *ngIf="myConfig.showLegend">
<app-network-legend
[config]="myConfig"
[context]="legendContext"
[smallStyle]="smallStyle"
></app-network-legend>
</div>
<div class="center image1 fullheight" #network>
<button class="button is-loading center" alt="loading...">
Loading
</button>
</div>
</div>
<footer
*ngIf="myConfig.showFooter"
class="card-footer toolbar network-footer-toolbar"
>
<div class="network-footer-toolbar-inner-container">
<ng-container *ngIf="myConfig.showFooterButtonScreenshot">
<div class="footer-buttons network-footer-toolbar-element">
<button
(click)="toImage()"
class="button is-primary is-rounded has-tooltip"
pTooltip="Take a screenshot of the current network."
[ngClass]="{ 'button-small': smallStyle }"
[tooltipStyleClass]="'drgstn drgstn-tooltip'"
tooltipPosition="top"
>
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
</span>
<span [ngClass]="{ 'text-normal': smallStyle }"
>Screenshot</span
>
</button>
</div>
</ng-container>
<ng-container *ngIf="myConfig.showFooterButtonExportGraphml">
<app-download-button
[nodeData]="nodeData"
[smallStyle]="smallStyle"
[buttonId]="'explorer-download'"
></app-download-button>
</ng-container>
<ng-container *ngIf="myConfig.showFooterButtonExpression">
<div
class="
footer-buttons
dropdown
is-up
network-footer-toolbar-element
"
[class.is-active]="expressionExpanded"
>
<div class="dropdown-trigger">
<button (click)="expressionExpanded = !expressionExpanded"
class="button is-rounded is-primary"
[class.is-outlined]="!selectedTissue"
aria-haspopup="true"
aria-controls="dropdown-menu"
pTooltip="Tissue expression data is provided by the GTEx project."
[tooltipStyleClass]="'drgstn drgstn-tooltip'"
tooltipPosition="top"
[ngClass]="{ 'button-small': smallStyle }"
>
<span
*ngIf="!selectedTissue"
[ngClass]="{ 'text-small': smallStyle }"
>Tissue</span
>
<span *ngIf="selectedTissue">{{
selectedTissue.name
}}</span>
<span *ngIf="expressionExpanded" class="icon is-small">
<i class="fas fa-angle-up" aria-hidden="true"></i>
</span>
<span *ngIf="!expressionExpanded" class="icon is-small">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content tissue-dropdown">
<div class="scroll-area">
<a
(click)="selectTissue(null)"
[class.is-active]="!selectedTissue"
class="dropdown-item"
>
None
</a>
<a
*ngFor="let tissue of analysis.getTissues()"
(click)="selectTissue(tissue)"
[class.is-active]="
selectedTissue &&
tissue.netexId === selectedTissue.netexId
"
class="dropdown-item"
>
{{ tissue.name }}
</a>
</div>
</div>
</div>
</div>
</ng-container>
<app-toggle
class="footer-buttons network-footer-toolbar-element"
textOn="Drugs"
textOff="Off"
tooltipOn="Display adjacent drugs ON."
tooltipOff="Display adjacent drugs OFF."
[smallStyle]="smallStyle"
[value]="adjacentDrugs"
(valueChange)="updateAdjacentDrugs($event)"
></app-toggle>
<app-toggle
class="footer-buttons network-footer-toolbar-element"
textOn="Disorders (protein)"
textOff="Off"
tooltipOn="Show disorders adjacent to all currently displayed proteins/genes ON."
tooltipOff="Show disorders adjacent to all currently displayed proteins/genes OFF."
[smallStyle]="smallStyle"
[value]="adjacentDisordersProtein" (valueChange)="updateAdjacentProteinDisorders($event)"
></app-toggle>
<app-toggle
class="footer-buttons network-footer-toolbar-element"
textOn="Disorders (drugs)"
textOff="Off"
tooltipOn="Show disorders adjacent to all currently displayed drugs ON."
tooltipOff="Show disorders adjacent to all currently displayed drugs OFF."
[smallStyle]="smallStyle"
[value]="adjacentDisordersDrug"
[disabled]="!hasDrugsLoaded()"
(valueChange)="updateAdjacentDrugDisorders($event)"
></app-toggle>
<app-toggle
class="footer-buttons network-footer-toolbar-element"
textOn="Animation"
textOff="Off"
tooltipOn="Enable the network animation."
tooltipOff="Disable the network animation and freeze nodes."
[smallStyle]="smallStyle"
[value]="physicsEnabled"
(valueChange)="updatePhysicsEnabled($event)"
></app-toggle>
</div>
</footer>
</div>
</div>
</div>
<!-- End network block -->
<div class="is-hidden-tablet mobile-fallback">
Sorry, CoVex is not available for mobile phones. To find information
about CoVex, please check the <a routerLink="/about">About</a> page or
visit this page with another device with a larger screen.
</div>
</div>
</div>
</div>