Merge branch 'show-gene-names' into 'master'

Show gene names

See merge request covid-19/frontend!68

src/app/components/analysis-window/analysis-window.component.ts

@@ -9,7 +9,7 @@ import {
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import {HttpClient} from '@angular/common/http';
+import {HttpClient, HttpErrorResponse} from '@angular/common/http';
 import {environment} from '../../../environments/environment';
 import {AnalysisService} from '../../analysis.service';
 import {Protein, Task, NodeType, ViralProtein, Drug} from '../../interfaces';
@@ -150,7 +150,7 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
               selectedStatus = null;
               selectedItem = {name: selectedNodes[0].id, type: 'Host Protein', data: protein};
               // TODO use gene name here
-              selectedName = protein.proteinAc;
+              selectedName = protein.name;
               selectedId = protein.proteinAc;
               selectedType = 'Host Protein';
               if (properties.event.srcEvent.ctrlKey) {
@@ -351,9 +351,15 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
 
   private mapNode(nodeId: any, nodeType?: NodeType, isSeed?: boolean, score?: number, details?): any {
     const {shape, color, size, font, shadow} = this.getNodeLooks(nodeId, nodeType, isSeed);
+    let nodeLabel = nodeId;
+    if (nodeType === 'host') {
+      nodeLabel = details.name;
+    } else if (nodeType === 'drug') {
+      nodeLabel = details.name;
+    }
     return {
       id: nodeId,
-      label: nodeId,
+      label: nodeLabel,
       size, color, shape, font, shadow,
       nodeType, isSeed, details
     };
@@ -376,7 +382,21 @@ export class AnalysisWindowComponent implements OnInit, OnChanges {
     if (this.showDrugs) {
       const proteinAcs = this.proteins.map((protein) => protein.proteinAc);
       // tslint:disable-next-line:max-line-length
-      const result = await this.http.get<any>(`${environment.backend}drug_interactions/?proteins=${JSON.stringify(proteinAcs)}`).toPromise();
+      const result = await this.http.get<any>(`${environment.backend}drug_interactions/?proteins=${JSON.stringify(proteinAcs)}`).toPromise().catch((err: HttpErrorResponse) => {
+        // simple logging, but you can do a lot more, see below
+        toast({
+          message: 'An error occured while fetching the drugs.',
+          duration: 5000,
+          dismissible: true,
+          pauseOnHover: true,
+          type: 'is-danger',
+          position: 'top-center',
+          animate: {in: 'fadeIn', out: 'fadeOut'}
+        });
+        this.showDrugs = false;
+        return;
+      });
+
       const drugs = result.drugs;
       const edges = result.edges;
 

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

 <div class="content">
   <ng-select [items]="queryItems" bindLabel="name" bindValue="data" [virtualScroll]="true" class="custom"
-             placeholder="Search..." (change)="select($event)">
+             placeholder="Search..." [hideSelected]="true" [searchFn]="querySearch" (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>
+      <b *ngIf="item.type == 'Host Protein'"> {{item.data.name}}</b>
+      <b *ngIf="item.type == 'Viral Protein'"> {{item.data.effectName}}</b> <br/>
+      <span><small>{{item.type}}</small> | </span>
+      <span *ngIf="item.type == 'Host Protein'"><small>AC: <b>{{item.data.proteinAc}}</b></small> </span>
+      <span *ngIf="item.type == 'Viral Protein'"><small><b>{{item.data.virusName}}</b></small></span>
     </ng-template>
   </ng-select>
 </div>

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

-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import {QueryItem} from '../../interfaces';
+import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {Protein, QueryItem, ViralProtein} from '../../interfaces';
 
 @Component({
   selector: 'app-query-component',
@@ -12,6 +12,19 @@ export class QueryComponent {
   @Output() selectItem: EventEmitter<any> = new EventEmitter();
   @Input() queryItems: QueryItem[];
 
+  querySearch(term: string, item: QueryItem) {
+    term = term.toLowerCase();
+    if (item.type === 'Host Protein') {
+      const data = item.data as Protein;
+      return data.name.toLowerCase().indexOf(term) > -1 || data.proteinAc.toLowerCase().indexOf(term) > -1 ||
+        item.type.toLowerCase().indexOf(term) > -1;
+    } else {
+      const data = item.data as ViralProtein;
+      return data.effectName.toLowerCase().indexOf(term) > -1 || data.virusName.toLowerCase().indexOf(term) > -1 ||
+        item.type.toLowerCase().indexOf(term) > -1;
+    }
+  }
+
   select(item) {
     this.selectItem.emit(item);
   }

src/app/pages/explorer-page/explorer-page.component.html

@@ -77,7 +77,7 @@
             <p class="card-header-title">
           <span class="icon">
         <i class="fas fa-search" aria-hidden="true"></i>
-      </span> Query Protein
+      </span> Query Protein/Gene
             </p>
             <a (click)="collabsQuery = !collabsQuery" data-action="collapse"
                class="card-header-icon is-hidden-fullscreen" aria-label="more options">
@@ -386,7 +386,8 @@
                       <i class="fa fa-virus" *ngIf="p.type =='Viral Protein'"></i>
                     </span>
               </td>
-              <td>{{p.name}}</td>
+              <td *ngIf="p.type == 'Viral Protein'">{{p.name}}</td>
+              <td *ngIf="p.type == 'Host Protein'">{{p.data.name}}</td>
               <td>
                 <button (click)="analysis.removeItem(p.name)" class="button is-small is-danger is-outlined">
                   <i class="fa fa-trash"></i>

src/app/pages/explorer-page/explorer-page.component.ts

@@ -175,9 +175,12 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     this.selectedItem = item;
     this.selectedType = item.type;
     this.selectedName = item.name;
+
     if (this.selectedType === 'Host Protein') {
       const hostProtein = item.data as Protein;
       this.selectedId = hostProtein.proteinAc;
+      this.selectedName = hostProtein.name;
+
       if (zoom) {
         this.zoomToNode(`p_${item.name}`);
       }
@@ -312,7 +315,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     this.queryItems = [];
     hostProteins.forEach((protein) => {
       this.queryItems.push({
-        name: protein.proteinAc,
+        name: protein.name,
         type: 'Host Protein',
         data: protein
       });
@@ -409,12 +412,12 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
 
   private mapHostProteinToNode(hostProtein: Protein): any {
     let color = '#e2b600';
-    if (this.analysis.inSelection(hostProtein.proteinAc)) {
+    if (this.analysis.inSelection(hostProtein.name)) {
       color = '#48C774';
     }
     return {
       id: `p_${hostProtein.proteinAc}`,
-      label: `${hostProtein.proteinAc}`,
+      label: `${hostProtein.name}`,
       size: 10, font: '5px', color, shape: 'ellipse', shadow: false,
       x: hostProtein.x,
       y: hostProtein.y,