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="content explorer">
<div class="modal" [class.is-active]="showModal"> <!-- <div class="modal" [class.is-active]="showModal">
<div class="modal-background" (click)="closeSummary()"></div> <div class="modal-background" (click)="closeSummary()"></div>
<div class="modal-card"> <div class="modal-card">
<header class="modal-card-head"> <header class="modal-card-head">
<p class="modal-card-title">{{groupId}}</p> <p class="modal-card-title">{{groupId}}</p>
<button class="delete" aria-label="close" (click)="closeSummary()"></button> <button class="delete" aria-label="close" (click)="closeSummary()"></button>
</header> </header>
<section class="modal-card-body"> <section class="modal-card-body">
<h2>General Information</h2> <h2>General Information</h2>
<ul> <ul>
<li><b>Protein Group:</b> {{proteinGroup}}</li> <li><b>Protein Group:</b> {{proteinGroup}}</li>
<li><b>Gene Name(s):</b> <span *ngFor="let geneName of geneNames"> {{ geneName }}</span> <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><b>Protein Name(s):</b> <span *ngFor="let proteinName of proteinNames"> {{ proteinName }}</span>
</li> </li>
<li><b>Protein AC(s):</b> <li><b>Protein AC(s):</b>
<a href="https://www.uniprot.org/uniprot/{{proteinAC}}" target="_blank" <a href="https://www.uniprot.org/uniprot/{{proteinAC}}" target="_blank"
*ngFor="let proteinAC of proteinACs"> *ngFor="let proteinAC of proteinACs">
{{ proteinAC }}<span><img class="inline" align="center" src="../assets/uniprot.png"></span> {{ proteinAC }}<span><img class="inline" align="center" src="../assets/uniprot.png"></span>
</a> </a>
</li> </li>
<li><b>Number of Interactions:</b> {{numberOfInteractions}}</li> <li><b>Number of Interactions:</b> {{numberOfInteractions}}</li>
</ul> </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>
<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"> <div class="card bar">
<header class="card-header"> <header class="card-header">
...@@ -115,29 +115,79 @@ ...@@ -115,29 +115,79 @@
</div> </div>
</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"> <p><b>Protein Group:</b> {{ proteinGroup }}</p>
<header class="card-header"> <p><b>Gene Name(s):</b> <span *ngFor="let geneName of geneNames"> {{ geneName }}</span></p>
<p class="card-header-title"> <p><b>Protein Name(s):</b> <span *ngFor="let proteinName of proteinNames"> {{ proteinName }}</span></p>
SARS-CoV-2 Protein-Protein Interaction Network <p align="row"><b>Protein AC(s):</b>
</p> <a href="https://www.uniprot.org/uniprot/{{proteinAC}}" target="_blank"
</header> *ngFor="let proteinAC of proteinACs">
<div class="card-content"> {{ proteinAC }}
<div class="card-image"> </a>
<div class="network center" #network> </p>
<button class="button is-loading center">Loading</button>
</div> </div>
<div *ngIf="!showDetails">
Please select a node for further information.
</div>
</div> </div>
<footer class="card-footer"> </div>
<button class="card-footer-item button is-primary">
<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"> <span class="icon">
<i class="fas fa-cloud-download-alt" aria-hidden="true"></i> <i class="fas fa-cloud-download-alt" aria-hidden="true"></i>
</span> </span>
</button> </button>
</footer> </footer>
</div>
</div> </div>
</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'; ...@@ -9,7 +9,7 @@ import {Network, Edge, Node} from 'vis-network';
}) })
export class ExplorerPageComponent implements OnInit, AfterViewInit { export class ExplorerPageComponent implements OnInit, AfterViewInit {
public showModal = false; public showDetails = false;
public groupId = ''; public groupId = '';
public geneNames: Array<string> = []; public geneNames: Array<string> = [];
public proteinGroup = ''; public proteinGroup = '';
...@@ -30,7 +30,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -30,7 +30,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.geneNames.push('IFI16'); this.geneNames.push('IFI16');
this.proteinNames.push('Gamma-interface-inducible protein 16'); this.proteinNames.push('Gamma-interface-inducible protein 16');
this.proteinACs.push('Q16666'); this.proteinACs.push('Q16666');
this.numberOfInteractions = 25;
this.baitNames.push('Bait Protein 1'); this.baitNames.push('Bait Protein 1');
this.baitNames.push('Bait Protein 2'); this.baitNames.push('Bait Protein 2');
this.baitNames.push('Bait Protein 3'); this.baitNames.push('Bait Protein 3');
...@@ -42,7 +41,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -42,7 +41,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
if (!proteinGroup) { if (!proteinGroup) {
// In this case, the URL is just `/explorer` // In this case, the URL is just `/explorer`
// Therefore, we do not show a modal // Therefore, we do not show a modal
this.showModal = false; this.showDetails = false;
return; return;
} }
...@@ -58,8 +57,8 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -58,8 +57,8 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.proteinGroup = proteinGroup; this.proteinGroup = proteinGroup;
// TODO: Perform call here for 'proteinGroup'... // TODO: Perform call here for 'proteinGroup'...
// this.zoomToNode(proteinGroup)
this.showModal = true; this.showDetails = true;
}); });
} }
...@@ -75,12 +74,22 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -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() { public getGroupId() {
return this.groupId; return this.groupId;
} }
public async openSummary(groupId: string) { public async openSummary(groupId: string) {
await this.router.navigate(['explorer'], {queryParams: {proteinGroup: groupId}}); await this.router.navigate(['explorer'], {queryParams: {proteinGroup: groupId}});
this.zoomToNode(this.proteinGroup);
} }
public async closeSummary() { public async closeSummary() {
...@@ -890,8 +899,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -890,8 +899,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}); });
} }
this.numberOfInteractions = edges.length; this.numberOfInteractions = edges.length;
const container = this.networkEl.nativeElement; const container = this.networkEl.nativeElement;
...@@ -913,8 +920,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -913,8 +920,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
// TODO use groupID // TODO use groupID
console.log(id); console.log(id);
if (id.length > 0) { if (id.length > 0) {
console.log('clicked node:', id);
this.openSummary(id[0]); this.openSummary(id[0]);
} else {
this.closeSummary();
} }
}); });
...@@ -925,6 +933,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -925,6 +933,10 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}); });
this.network.stabilize(); this.network.stabilize();
} }
if (this.proteinGroup) {
this.zoomToNode(this.proteinGroup);
}
} }
......
src/styles.scss
+ 10
− 4
View file @ 128ce2cd
...@@ -51,22 +51,28 @@ input.checkbox { ...@@ -51,22 +51,28 @@ input.checkbox {
margin-left: 15px; margin-left: 15px;
} }
div.content.bar { div.content.bar-left {
float: left; float: left;
width: 15%; width: 15%;
height: calc(100vh - 30%); height: calc(100vh - 30%);
} }
div.content.bar-right {
float: right;
width: 15%;
}
div.card.bar { div.card.bar {
margin-bottom: 21px; margin-bottom: 21px;
word-wrap: break-word;
} }
div.content.network { div.content.network {
float: right; width: 68%;
width: 84%;
height: calc(100vh - 90px); height: calc(100vh - 90px);
margin-left: auto;
margin-right: auto;
} }
div.card.network { div.card.network {
...@@ -75,7 +81,7 @@ div.card.network { ...@@ -75,7 +81,7 @@ div.card.network {
} }
div.network { div.network {
height: calc(100vh - 240px); height: calc(100vh - 220px);
} }
div.center { 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