Add viral proteins to query

src/app/components/query/query.component.html

 <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>

src/app/components/query/query.component.ts

 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);
   }
 
 }

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;
+}

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>

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() {