Skip to content
Snippets Groups Projects
Commit 128ce2cd authored by Julian Späth's avatar Julian Späth
Browse files

Merge branch 'node-selection-zoom' into 'master' 

Node selection zoom

See merge request covid-19/frontend!7
parents 55da26af 7366bf16
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/pages/explorer-page/explorer-page.component.html
+ 101
− 51
View file @ 128ce2cd
<div class="content explorer">
<div class="modal" [class.is-active]="showModal">
<div class="modal-background" (click)="closeSummary()"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{groupId}}</p>
<button class="delete" aria-label="close" (click)="closeSummary()"></button>
</header>
<section class="modal-card-body">
<h2>General Information</h2>
<ul>
<li><b>Protein Group:</b> {{proteinGroup}}</li>
<li><b>Gene Name(s):</b> <span *ngFor="let geneName of geneNames"> {{ geneName }}</span>
<li><b>Protein Name(s):</b> <span *ngFor="let proteinName of proteinNames"> {{ proteinName }}</span>
</li>
<li><b>Protein AC(s):</b>
<a href="https://www.uniprot.org/uniprot/{{proteinAC}}" target="_blank"
*ngFor="let proteinAC of proteinACs">
{{ proteinAC }}<span><img class="inline" align="center" src="../assets/uniprot.png"></span>
</a>
</li>
<li><b>Number of Interactions:</b> {{numberOfInteractions}}</li>
</ul>
<h2>Summary</h2>
<figure class="image" (click)="openSummary('A4435')">
<img src="../assets/boxplot.png" alt="Boxplots">
</figure>
</section>
<footer class="modal-card-foot">
<button class="button is-danger" (click)="closeSummary()">Close</button>
</footer>
</div>
</div>
<!-- <div class="modal" [class.is-active]="showModal">
<div class="modal-background" (click)="closeSummary()"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{groupId}}</p>
<button class="delete" aria-label="close" (click)="closeSummary()"></button>
</header>
<section class="modal-card-body">
<h2>General Information</h2>
<ul>
<li><b>Protein Group:</b> {{proteinGroup}}</li>
<li><b>Gene Name(s):</b> <span *ngFor="let geneName of geneNames"> {{ geneName }}</span>
<li><b>Protein Name(s):</b> <span *ngFor="let proteinName of proteinNames"> {{ proteinName }}</span>
</li>
<li><b>Protein AC(s):</b>
<a href="https://www.uniprot.org/uniprot/{{proteinAC}}" target="_blank"
*ngFor="let proteinAC of proteinACs">
{{ proteinAC }}<span><img class="inline" align="center" src="../assets/uniprot.png"></span>
</a>
</li>
<li><b>Number of Interactions:</b> {{numberOfInteractions}}</li>
</ul>
<h2>Summary</h2>
<figure class="image" (click)="openSummary('A4435')">
<img src="../assets/boxplot.png" alt="Boxplots">
</figure>
</section>
<footer class="modal-card-foot">
<button class="button is-danger" (click)="closeSummary()">Close</button>
</footer>
</div>
</div>-->
<div class="content bar">
<div class="content bar-left">
<div class="card bar">
<header class="card-header">
......@@ -115,29 +115,79 @@
</div>
</div>
<div class="content network">
<div class="content bar-right">
<div class="card bar">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
<i class="fas fa-info" aria-hidden="true"></i>
</span> Details
</p>
</header>
<div class="card-content">
<div *ngIf="showDetails" class="content">
<div class="card network">
<header class="card-header">
<p class="card-header-title">
SARS-CoV-2 Protein-Protein Interaction Network
</p>
</header>
<div class="card-content">
<div class="card-image">
<div class="network center" #network>
<button class="button is-loading center">Loading</button>
<p><b>Protein Group:</b> {{ proteinGroup }}</p>
<p><b>Gene Name(s):</b> <span *ngFor="let geneName of geneNames"> {{ geneName }}</span></p>
<p><b>Protein Name(s):</b> <span *ngFor="let proteinName of proteinNames"> {{ proteinName }}</span></p>
<p align="row"><b>Protein AC(s):</b>
<a href="https://www.uniprot.org/uniprot/{{proteinAC}}" target="_blank"
*ngFor="let proteinAC of proteinACs">
{{ proteinAC }}
</a>
</p>
</div>
<div *ngIf="!showDetails">
Please select a node for further information.
</div>
</div>
<footer class="card-footer">
<button class="card-footer-item button is-primary">
</div>
<div class="card bar">
<header class="card-header">
<p class="card-header-title">
<span class="icon">
<i class="fas fa-filter" aria-hidden="true"></i>
</span> Summary
</p>
</header>
<div *ngIf="showDetails" class="card-content">
<div class="content">
<h2>Summary</h2>
<figure class="image">
<img src="assets/boxplot.png" alt="Boxplots">
</figure>
</div>
</div>
</div>
</div>
<div class="content network">
<div class="card network">
<header class="card-header">
<p class="card-header-title">
SARS-CoV-2 Protein-Protein Interaction Network
</p>
</header>
<div class="card-content">
<div class="card-image">
<div class="network center" #network>
<button class="button is-loading center">Loading</button>
</div>
</div>
<footer class="card-footer">
<button class="card-footer-item button is-primary">
<span class="icon">
<i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
</span>
</button>
</footer>
</button>
</footer>
</div>
</div>
</div>
</div>
</div>
src/app/pages/explorer-page/explorer-page.component.ts
+ 20
− 8
View file @ 128ce2cd
......@@ -9,7 +9,7 @@ import {Network, Edge, Node} from 'vis-network';
})
export class ExplorerPageComponent implements OnInit, AfterViewInit {
public showModal = false;
public showDetails = false;
public groupId = '';
public geneNames: Array<string> = [];
public proteinGroup = '';
......@@ -30,7 +30,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.geneNames.push('IFI16');
this.proteinNames.push('Gamma-interface-inducible protein 16');
this.proteinACs.push('Q16666');
this.numberOfInteractions = 25;
this.baitNames.push('Bait Protein 1');
this.baitNames.push('Bait Protein 2');
this.baitNames.push('Bait Protein 3');
......@@ -42,7 +41,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
if (!proteinGroup) {
// In this case, the URL is just `/explorer`
// Therefore, we do not show a modal
this.showModal = false;
this.showDetails = false;
return;
}
......@@ -58,8 +57,8 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.proteinGroup = proteinGroup;
// TODO: Perform call here for 'proteinGroup'...
this.showModal = true;
// this.zoomToNode(proteinGroup)
this.showDetails = true;
});
}
......@@ -75,12 +74,22 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
}
public zoomToNode(id: string) {
const coords = this.network.getPositions(id)[id];
this.network.moveTo({
position: {x: coords.x, y: coords.y},
scale: 1.0,
animation: true,
});
}
public getGroupId() {
return this.groupId;
}
public async openSummary(groupId: string) {
await this.router.navigate(['explorer'], {queryParams: {proteinGroup: groupId}});
this.zoomToNode(this.proteinGroup);
}
public async closeSummary() {
......@@ -890,8 +899,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
});
}
this.numberOfInteractions = edges.length;
const container = this.networkEl.nativeElement;
......@@ -913,8 +920,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
// TODO use groupID
console.log(id);
if (id.length > 0) {
console.log('clicked node:', id);
this.openSummary(id[0]);
} else {
this.closeSummary();
}
});
......@@ -925,6 +933,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
});
this.network.stabilize();
}
if (this.proteinGroup) {
this.zoomToNode(this.proteinGroup);
}
}
......
src/styles.scss
+ 10
− 4
View file @ 128ce2cd
......@@ -51,22 +51,28 @@ input.checkbox {
margin-left: 15px;
}
div.content.bar {
div.content.bar-left {
float: left;
width: 15%;
height: calc(100vh - 30%);
}
div.content.bar-right {
float: right;
width: 15%;
}
div.card.bar {
margin-bottom: 21px;
word-wrap: break-word;
}
div.content.network {
float: right;
width: 84%;
width: 68%;
height: calc(100vh - 90px);
margin-left: auto;
margin-right: auto;
}
div.card.network {
......@@ -75,7 +81,7 @@ div.card.network {
}
div.network {
height: calc(100vh - 240px);
height: calc(100vh - 220px);
}
div.center {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment