From c05eb7e2d9386f9a2846bad59c47e0a8f369c024 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20Sp=C3=A4th?= <julian.spaeth@wzw.tum.de>
Date: Sun, 5 Apr 2020 13:04:12 +0200
Subject: [PATCH] Add viral proteins to query
---
src/app/components/query/query.component.html | 8 ++-
src/app/components/query/query.component.ts | 10 ++--
src/app/interfaces.ts | 6 +++
.../explorer-page.component.html | 2 +-
.../explorer-page/explorer-page.component.ts | 51 ++++++++++++++++---
5 files changed, 64 insertions(+), 13 deletions(-)
diff --git a/src/app/components/query/query.component.html b/src/app/components/query/query.component.html
index a7d7d8eb..03a4f2d3 100644
--- a/src/app/components/query/query.component.html
+++ b/src/app/components/query/query.component.html
@@ -1,5 +1,11 @@
<div class="content">
- <ng-select [items]="queryItems" bindLabel="proteinAc" [virtualScroll]="true" class="custom"
+ <ng-select [items]="queryItems" bindLabel="name" bindValue="data" [virtualScroll]="true" class="custom"
placeholder="Search..." (change)="select($event)">
+ <ng-template ng-option-tmp let-item="item">
+ <b>{{item.name}}</b> <br/>
+ <span *ngIf="item.type == 'Host Protein'"><small>{{item.type}}</small></span>
+ <span *ngIf="item.type == 'Viral Protein'"><small>{{item.data.virusName}}</small> | </span>
+ <span *ngIf="item.type == 'Viral Protein'"><small>{{item.data.datasetName}}</small> </span>
+ </ng-template>
</ng-select>
</div>
diff --git a/src/app/components/query/query.component.ts b/src/app/components/query/query.component.ts
index 7426d3d9..ee71a44d 100644
--- a/src/app/components/query/query.component.ts
+++ b/src/app/components/query/query.component.ts
@@ -1,5 +1,5 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
-import {Protein} from '../../interfaces';
+import {QueryItem} from '../../interfaces';
@Component({
selector: 'app-query-component',
@@ -9,11 +9,11 @@ import {Protein} from '../../interfaces';
export class QueryComponent {
- @Output() selectProtein: EventEmitter<Protein> = new EventEmitter();
- @Input() queryItems: Protein[];
+ @Output() selectItem: EventEmitter<any> = new EventEmitter();
+ @Input() queryItems: QueryItem[];
- select(protein) {
- this.selectProtein.emit(protein);
+ select(item) {
+ this.selectItem.emit(item);
}
}
diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts
index 845b0458..b8e87b54 100644
--- a/src/app/interfaces.ts
+++ b/src/app/interfaces.ts
@@ -46,3 +46,9 @@ export interface Task {
queueLength: number;
};
}
+
+export interface QueryItem {
+ name: string;
+ type: 'Host Protein' | 'Viral Protein';
+ data: Protein | ViralProtein;
+}
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 3893ce6b..2f80b234 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -64,7 +64,7 @@
<div class="field">
<div class="control">
<app-query-component [queryItems]="queryItems"
- (selectProtein)="openSummary($event, true)"></app-query-component>
+ (selectItem)="queryAction($event)"></app-query-component>
</div>
</div>
</div>
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 159066e9..0ec2b704 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -6,7 +6,7 @@ import {
ViewChild
} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
-import {ProteinViralInteraction, ViralProtein, Protein} from '../../interfaces';
+import {ProteinViralInteraction, ViralProtein, Protein, QueryItem} from '../../interfaces';
import {ProteinNetwork, getDatasetFilename} from '../../main-network';
import {HttpClient, HttpParams} from '@angular/common/http';
import {AnalysisService} from '../../analysis.service';
@@ -15,7 +15,6 @@ import {environment} from '../../../environments/environment';
declare var vis: any;
-
@Component({
selector: 'app-explorer-page',
templateUrl: './explorer-page.component.html',
@@ -43,7 +42,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
private dumpPositions = false;
public physicsEnabled = false;
- public queryItems = [];
+ public queryItems: QueryItem[] = [];
public showAnalysisDialog = false;
public selectedAnalysisToken: string | null = null;
@@ -150,9 +149,15 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
if (!coords) {
return;
}
+ let zoomScale = null;
+ if (id.startsWith('eff')) {
+ zoomScale = 1.0;
+ } else {
+ zoomScale = 3.0;
+ }
this.network.moveTo({
position: {x: coords.x, y: coords.y},
- scale: 1.0,
+ scale: zoomScale,
animation: true,
});
}
@@ -248,7 +253,28 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.zoomToNode(`pg_${this.currentProteinAc}`);
}
- this.queryItems = this.proteins;
+ this.queryItems = [];
+ this.fillQueryItems(this.proteins, this.effects);
+ }
+
+
+ fillQueryItems(hostProteins: Protein[], viralProteins: ViralProtein[]) {
+ this.queryItems = [];
+ hostProteins.forEach((protein) => {
+ this.queryItems.push({
+ name: protein.proteinAc,
+ type: 'Host Protein',
+ data: protein
+ });
+ });
+
+ viralProteins.forEach((effect) => {
+ this.queryItems.push({
+ name: effect.effectName,
+ type: 'Viral Protein',
+ data: effect
+ });
+ });
}
public async filterNodes() {
@@ -260,6 +286,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
const showAll = !this.viralProteinCheckboxes.find((eff) => eff.checked);
const connectedProteinAcs = new Set<string>();
+ const filteredViralProteins = [];
this.viralProteinCheckboxes.forEach((cb) => {
const effects: Array<ViralProtein> = [];
this.proteinData.effects.forEach((effect) => {
@@ -279,6 +306,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
removeIds.add(nodeId);
}
if (cb.checked || showAll) {
+ filteredViralProteins.push(effect);
effect.proteins.forEach((pg) => {
connectedProteinAcs.add(pg.proteinAc);
});
@@ -304,8 +332,19 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.nodeData.nodes.remove(Array.from(removeIds.values()));
this.nodeData.nodes.add(Array.from(addNodes.values()));
+ this.fillQueryItems(filteredProteins, filteredViralProteins);
+ }
+
+ public queryAction(item: any) {
+ if (item) {
+ if (item.type === 'Host Protein') {
+ this.openSummary(item.data, true);
+ } else if (item.type === 'Viral Protein') {
+ this.zoomToNode(`eff_${item.data.effectName}_${item.data.virusName}_${item.data.datasetName}`
+ );
+ }
+ }
- this.queryItems = filteredProteins;
}
public updatePhysicsEnabled() {
--
GitLab