Code owners
Assign users and groups as approvers for specific file changes. Learn more.
explorer-page.component.html 19.74 KiB
<app-launch-analysis [(show)]="showAnalysisDialog" [target]="analysisDialogTarget"></app-launch-analysis>
<div class="covex explorer">
<div class="covex left-window">
<div>
<div class="covex 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-up" aria-hidden="true"></i>
<i *ngIf="!collapseData" class="fas fa-angle-down" 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>
<br>
<font size="2">
<p ><span>Virus: SARS-CoV-2</span>
<p ><span>Host/target: Human cell line, HEK-293T kidney cells</span>
<p ><span>Method: AP-MS (affinity purification-mass spectrometry)</span>
<p ><span>Source:<a href="https://www.biorxiv.org/content/10.1101/2020.03.22.002386v3" target="_blank"> Gordon et al., 2020</a></span></font>
</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-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-up" aria-hidden="true"></i>
<i *ngIf="!collapseOverview" class="fas fa-angle-down" 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-up" aria-hidden="true"></i>
<i *ngIf="!collapseQuery" class="fas fa-angle-down" 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)="collapseDFilter = !collapseDFilter" data-action="collapse"
class="card-header-icon is-hidden-fullscreen" aria-label="more options">
<span class="icon">
<i *ngIf="collapseDFilter" class="fas fa-angle-up" aria-hidden="true"></i>
<i *ngIf="!collapseDFilter" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
<div *ngIf="collapseDFilter">
<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">
<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="0">
<div class="parent">
<div class="network center image1" #network>
<button class="button is-loading center" alt="Snow">Loading</button>
</div>
<div class="image2">
<img src="assets/legend.png" width="160px"/>
</div>
</div>
</div>
<footer class="card-footer toolbar">
<button (click)="toCanvas()" class="button is-primary is-rounded">
<span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i>
</span> <span>Screenshot</span>
</button>
<div class="field has-addons footer-toggle-buttons">
<p class="control">
<button class="button is-rounded" [class.is-primary]="physicsEnabled"
(click)="updatePhysicsEnabled(true)">
<span class="icon is-small">
<i class="fas fa-wind"></i>
</span>
<span>Animation On</span>
</button>
</p>
<p class="control">
<button class="button is-rounded" [class.is-primary]="!physicsEnabled"
(click)="updatePhysicsEnabled(false)">
<span>Off</span>
</button>
</p>
</div>
</footer>
</div>
</div>
</div>
</div>
<div class="analysis-view" *ngIf="selectedAnalysisToken">
<app-analysis-window [(token)]="selectedAnalysisToken"
(showDetailsChange)="showDetails = $event[0]; changeInfo($event[1])"
(visibleItems)="analysisWindowChanged($event)"
></app-analysis-window>
</div>
</div>
<div class="covex bar-right">
<div class="card bar-large">
<header class="card-header">
<p class="card-header-title"> <span class="icon">
<i *ngIf="!showDetails" class="fas fa-info" aria-hidden="true"></i>
<i *ngIf="selectedType === 'Host Protein'" class="fas fa-dna" aria-hidden="true"></i>
<i *ngIf="selectedType === 'Viral Protein'" class="fas fa-virus" aria-hidden="true"></i>
<i *ngIf="selectedType === 'Drug'" class="fas fa-capsules" aria-hidden="true"></i>
</span> {{ selectedType }}
</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-up" aria-hidden="true"></i>
<i *ngIf="!collapseDetails" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
<div *ngIf="collapseDetails">
<div class="card-content">
<div *ngIf="showDetails">
<p *ngIf="selectedName && selectedType=='Drug'"><b><span>Name:</span></b> {{ selectedName }} <span
class="icon is-small">
<i class="fas fa-capsules"></i>
</span></p>
<p *ngIf="selectedName && selectedType=='Host Protein'"><b><span>Gene Name:</span></b> {{ selectedName }}
<span class="icon is-small">
<i class="fas fa-dna"></i>
</span></p>
<p *ngIf="selectedVirusName"><b><span>Virus:</span></b> {{ selectedVirusName }} <span class="icon is-small">
<i class="fas fa-virus"></i>
</span></p>
<p *ngIf="selectedName && selectedType=='Viral Protein'"><b>Effect:</b> {{ selectedName }}</p>
<p *ngIf="selectedId && selectedType == 'Host Protein'"><b>Uniprot AC:</b>
<a href="https://www.uniprot.org/uniprot/{{ selectedId }}"
target="_blank"> {{ selectedId }}</a>
</p>
<p *ngIf="selectedId && selectedType == 'Drug'"><b>DrugBank ID:</b>
<a href="https://www.drugbank.ca/drugs/{{ selectedId }}"
target="_blank"> {{ selectedId }}</a>
</p>
<p *ngIf="selectedStatus === 'investigational' "><b>Status:</b> Investigational <span class="icon is-small"><i class="fas fa-search investigational"></i></span>
<p *ngIf="selectedStatus === 'approved' "><b>Status:</b> Approved <span class="icon is-small"><i class="fas fa-check"></i></span>
</p>
<div class="field has-addons add-remove-toggle">
<p *ngIf="selectedType !== 'Drug'" class="control">
<button class="button is-rounded" [class.is-success]="!analysis.inSelection(selectedName)"
[disabled]="analysis.inSelection(selectedName)"
(click)="analysis.addItem(selectedItem)">
<span class="icon is-small">
<i class="fas fa-plus"></i>
</span>
<span>Add to Analysis</span>
</button>
</p>
<p *ngIf="selectedType !== 'Drug'" class="control">
<button class="button is-rounded" [class.is-danger]="analysis.inSelection(selectedName)"
[disabled]="!analysis.inSelection(selectedName)"
(click)="analysis.removeItem(selectedName)">
<span>Remove</span>
<span class="icon is-small">
<i class="fas fa-trash"></i>
</span>
</button>
</p>
</div>
</div>
<div *ngIf="!showDetails">
Please select a node for further information.
<!-- <a (click)="selectedAnalysisToken = 'oy4UsXfBDobTucdQBhN9IUzfnpqKwzqx'"> Open Analysis Window </a>-->
</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> Quick Find Drugs
</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-up" aria-hidden="true"></i>
<i *ngIf="!collapseAnalysisQuick" class="fas fa-angle-down" 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-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()" [disabled]="analysis.getCount() === 0"
class="button is-white is-rounded">
<span class="icon">
<i class="fa fa-capsules"></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-up" aria-hidden="true"></i>
<i *ngIf="!collapseAnalysis" class="fas fa-angle-down" 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"
[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"
[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.tokens.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-up" aria-hidden="true"></i>
<i *ngIf="!collapseTask" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
<div *ngIf="collapseTask">
<div class="card-content overflow">
<app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
</div>
<footer class="card-footer">
<a (click)="analysis.removeAllTasks(); selectedAnalysisToken = null;"
class="card-footer-item has-text-danger">
<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-up" aria-hidden="true"></i>
<i *ngIf="!collapseSelection" class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</header>
<div *ngIf="collapseSelection">
<div class="card-content overflow">
<table class="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 Protein'"></i>
<i class="fa fa-virus" *ngIf="p.type =='Viral Protein'"></i>
</span>
</td>
<td *ngIf="p.type == 'Viral Protein'">{{p.name}}</td>
<td *ngIf="p.type == 'Host Protein'">{{p.data.name}}</td>
<td>
<button (click)="analysis.removeItem(p.name)" class="button is-small is-danger is-outlined">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
<i *ngIf="analysis.getCount() === 0">
To select proteins, click them while pressing CTRL.
</i>
</div>
<footer class="card-footer">
<a (click)="analysis.addAllHostProteins(currentViewNodes, currentViewProteins)" class="card-footer-item has-text-success">
<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">
<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">
<span class="icon">
<i class="fa fa-refresh"></i>
</span>
<span>
Reset
</span>
</a>
</footer>
</div>
</div>
</div>
</div>