-
Julian Matschinske authoredJulian Matschinske authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
explorer-page.component.html 18.88 KiB
<div class="is-hidden-mobile">
<app-launch-analysis [(show)]="showAnalysisDialog"
[target]="analysisDialogTarget"
[dataset]="selectedDataset.backendId">
</app-launch-analysis>
<div class="covex explorer">
<div class="covex left-window">
<div>
<div class="covex sidebar bar-left">
<div class="card bar-large">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
<i class="fas fa-database" aria-hidden="true"></i>
</span> Choose Dataset
</p>
<a (click)="collapseData = !collapseData" data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options">
<span class="icon">
<i *ngIf="collapseData" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseData" class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</a>
</header>
<div *ngIf="collapseData">
<div class="card-content">
<app-select-dataset [datasetItems]="datasetItems" [selectedDataset]="selectedDataset"
(selectedDatasetChange)="selectedDataset = $event; createNetwork($event.data)">
</app-select-dataset>
</div>
</div>
</div>
<div class="card bar-large">
<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 class="icon">
<i *ngIf="collapseOverview" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseOverview" class="fas fa-angle-left" aria-hidden="true"></i> </span>
</a>
</header>
<div *ngIf="collapseOverview">
<div class="card-content">
<nav class="level" *ngIf="proteinData">
<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">Host<br>Proteins</p>
<p class="title">{{ proteinData.proteins.length }}</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Virus-Host<br>Interactions</p>
<p class="title">{{ proteinData.edges.length }}</p> </div>
</div>
</nav>
</div>
</div>
</div>
<div class="card bar-large">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
<i class="fas fa-search" aria-hidden="true"></i>
</span> Query Protein/Gene
</p>
<a (click)="collapseQuery = !collapseQuery" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
<i *ngIf="collapseQuery" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseQuery" class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</a>
</header>
<div *ngIf="collapseQuery">
<div class="card-content">
<div class="field">
<div class="control">
<app-query-component [queryItems]="queryItems"
(selectItem)="queryAction($event)"></app-query-component>
</div>
</div>
</div>
</div>
</div>
<div class="card bar-large">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
<i class="fas fa-filter" aria-hidden="true"></i>
</span> Filter Viral Proteins
</p>
<a (click)="collapseBaitFilter = !collapseBaitFilter" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
<i *ngIf="collapseBaitFilter" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseBaitFilter" class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</a>
</header>
<div *ngIf="collapseBaitFilter">
<div class="card-content overflow">
<div *ngFor="let bait of viralProteinCheckboxes">
<label class="checkbox">
<input type="checkbox" class="checkbox" [ngModel]="bait.checked"
(ngModelChange)="bait.checked = $event; filterNodes()">
{{ bait.data.effectName }}
</label>
</div>
</div>
<footer class="card-footer">
<a (click)="reset($event);" class="card-footer-item has-text-danger" data-tooltip="Remove filter and show all proteins.">
<span class="icon">
<i class="fa fa-refresh"></i>
</span>
<span>
Reset
</span>
</a>
</footer>
</div> </div>
</div>
<div class="covex network">
<div class="card network">
<header class="card-header">
<p class="card-header-title">
Protein-Protein Interaction Network
</p>
</header>
<div class="card-content">
<div class="card-image" id="canvas-content">
<div class="parent">
<div class="network center image1" #network>
<button class="button is-loading center" alt="loading...">Loading</button>
</div>
<div class="image2">
<img src="assets/leg1.png" width="180px"/>
</div>
</div>
</div>
<footer class="card-footer toolbar">
<button (click)="toCanvas()" class="button is-primary is-rounded has-tooltip"
data-tooltip="Take a screenshot of the current network.">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
</span> <span>Screenshot</span>
</button>
<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>
</footer>
</div>
</div>
</div>
</div>
<div class="analysis-view" *ngIf="selectedAnalysisToken">
<app-analysis-window [(token)]="selectedAnalysisToken"
(showDetailsChange)="selectedWrapper = $event"
(visibleItems)="analysisWindowChanged($event)"></app-analysis-window>
</div>
</div>
<div class="covex sidebar bar-right">
<div class="card bar-large">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
<i *ngIf="!selectedWrapper" class="fas fa-info" aria-hidden="true"></i>
<i *ngIf="selectedWrapper && selectedWrapper.type === 'host'" class="fas fa-dna" aria-hidden="true"></i>
<i *ngIf="selectedWrapper && selectedWrapper.type === 'virus'" class="fas fa-virus" aria-hidden="true"></i>
<i *ngIf="selectedWrapper && selectedWrapper.type === 'drug'" class="fas fa-capsules"
aria-hidden="true"></i>
</span>
<span *ngIf="!selectedWrapper">No item selected</span>
<span *ngIf="selectedWrapper">
<span *ngIf="selectedWrapper.type === 'host'">Host Protein</span>
<span *ngIf="selectedWrapper.type === 'virus'">Viral Protein</span>
<span *ngIf="selectedWrapper.type === 'drug'">Drug</span>
</span>
</p>
<a (click)="collapseDetails = !collapseDetails" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
<i *ngIf="collapseDetails" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseDetails" class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</a>
</header> <div *ngIf="collapseDetails">
<div class="card-content">
<app-info-box [wrapper]="selectedWrapper"></app-info-box>
</div>
</div>
</div>
<div class="card bar-large">
<header class="card-header">
<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 class="icon">
<i *ngIf="collapseAnalysisQuick" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseAnalysisQuick" class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</a>
</header>
<div *ngIf="collapseAnalysisQuick">
<div class="card-content quick-find">
<div class="field">
<div class="control">
<div class="tile notification is-danger">
<div class="align-vmiddle">
<div class="digit"><i class="fa fa-fast-forward"></i></div>
<button (click)="analysis.startQuickAnalysis(true, selectedDataset)"
[disabled]="analysis.isLaunchingQuick()"
class="button is-white is-rounded has-tooltip" data-tooltip="Find drugs for all proteins.">
<span class="icon">
<i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
<i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
</span>
<span>
Quick Start
</span>
</button>
</div>
</div>
<div class="divisor-rapid">
— or —
</div>
<div class="tile notification is-info">
<div class="align-vmiddle">
<div class="digit" *ngIf="analysis.getCount() == 0">1</div>
<div class="digit" *ngIf="analysis.getCount() > 0"><i class="fa fa-check"></i></div>
<div>
<span>Select Proteins</span>
</div>
</div>
</div>
<div class="tile notification is-info">
<div class="align-vmiddle">
<div class="digit">2</div>
<button (click)="analysis.startQuickAnalysis(false, selectedDataset)"
[disabled]="analysis.getCount() === 0 || analysis.isLaunchingQuick()"
class="button is-white is-rounded has-tooltip"
data-tooltip="Find drugs for the selected proteins.">
<span class="icon">
<i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
<i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
</span>
<span>
Find Drugs
</span>
</button> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card bar-large">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
<i class="fas fa-flask" aria-hidden="true"></i>
</span>
Advanced Analysis
</p>
<a (click)="collapseAnalysis = !collapseAnalysis" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
<i *ngIf="collapseAnalysis" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseAnalysis" 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">
<button (click)="analysisDialogTarget = 'drug-target'; showAnalysisDialog = true;"
class="button is-primary is-fullwidth is-rounded has-tooltip"
data-tooltip="Find drug targets for the selected proteins."
[disabled]="analysis.getCount() === 0">
<span class="icon">
<i class="fa fa-crosshairs"></i>
</span>
<span>
Find Drug Targets
</span>
</button>
</div>
</div>
<div class="field">
<div class="control">
<button (click)="analysisDialogTarget = 'drug'; showAnalysisDialog = true;"
class="button is-primary is-fullwidth is-rounded has-tooltip"
data-tooltip="Find drugs for the selected proteins."
[disabled]="analysis.getCount() === 0">
<span class="icon">
<i class="fa fa-capsules"></i>
</span>
<span>
Find Drugs
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card bar-large">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
<i class="fas fa-filter" aria-hidden="true"></i>
</span>
Tasks ({{analysis.tasks.length}})
</p>
<a (click)="collapseTask = !collapseTask" data-action="collapse" class="card-header-icon is-hidden-fullscreen"
aria-label="more options"> <span class="icon">
<i *ngIf="collapseTask" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseTask" class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</a>
</header>
<div *ngIf="collapseTask">
<div class="card-content overflow" *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" data-tooltip="Delete all tasks.">
<span class="icon">
<i class="fa fa-trash"></i>
</span>
<span>
Delete All
</span>
</a>
</footer>
</div>
</div>
<div class="card bar-large">
<header class="card-header">
<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 class="icon">
<i *ngIf="collapseSelection" class="fas fa-angle-down" aria-hidden="true"></i>
<i *ngIf="!collapseSelection" class="fas fa-angle-left" aria-hidden="true"></i>
</span>
</a>
</header>
<div *ngIf="collapseSelection">
<div class="card-content overflow">
<table class="table selection-table" *ngIf="analysis.getCount() > 0">
<thead>
<tr>
<td>Type</td>
<td>Name</td>
<td>Actions</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let p of analysis.getSelection()">
<td>
<span class="icon">
<i class="fa fa-dna" *ngIf="p.type == 'host'"></i>
<i class="fa fa-virus" *ngIf="p.type =='virus'"></i>
</span>
</td>
<td *ngIf="p.type == 'virus'">{{p.data.effectName}}</td>
<td *ngIf="p.type == 'host'">{{p.data.name}}</td>
<td>
<button (click)="analysis.removeItems([p])" class="button is-small is-danger is-outlined has-tooltip"
data-tooltip="Remove from selection.">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
<i *ngIf="analysis.getCount() === 0">
Double-click on a protein to select it for the analysis. </i>
</div>
<footer class="card-footer">
<a (click)="analysis.addAllHostProteins(currentViewNodes, currentViewProteins)"
class="card-footer-item has-text-success" data-tooltip="Add all visible host proteins.">
<span class="icon">
<i class="fa fa-plus"></i>
</span>
<span>
Host Proteins
</span>
</a>
<a (click)="analysis.addAllViralProteins(currentViewNodes, currentViewEffects)"
class="card-footer-item has-text-success" data-tooltip="Add all visible viral proteins.">
<span class="icon">
<i class="fa fa-plus"></i>
</span>
<span>
Viral Proteins
</span>
</a>
</footer>
<footer class="card-footer">
<a (click)="analysis.resetSelection()" class="card-footer-item has-text-danger"
data-tooltip="Remove all entries of the selection.">
<span class="icon">
<i class="fa fa-refresh"></i>
</span>
<span>
Reset
</span>
</a>
</footer>
</div>
</div>
</div>
</div>
</div>
<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>