diff --git a/src/app/components/query/query.component.html b/src/app/components/query/query.component.html index a7d7d8eb2dc667366fb2cc984bd9dd9fe202343e..03a4f2d33781a98a0d82904dae9e00fe20d7bde6 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 7426d3d9ad0b5cf0c48e582d2ba78831a3e1c405..ee71a44d1bc4a29ec306ebab1ff278448de6bc42 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 845b04589ee0a4fc15df9cec4147a2902a79719b..b8e87b54867bb3dcb417dcad587f8b7455d6ec18 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 3893ce6bf6ff16431e5a3f95b0aae83d2f197007..2f80b234629461a8849fc5906bd5841fd99f1370 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 159066e9a6186f461c8d45f7ee564214a83bc3b1..0ec2b7040a58cb5fb07bfbee8f8ad8efabce7e6c 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() {