Add a list of members in "Protein complexes" sect.

Refs #2559

Author: kimrutherford

src/app/complex-viewer/complex-viewer.component.css

@@ -1,8 +1,22 @@
-.complex-info {
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.complex-members {
+  flex: auto;
+  width: 10em;
   font-size: 110%;
+  padding-left: 1em;
+  padding-top: 1.9em;
+}
+
+.complex-container {
+  flex: 0;
 }
 
-.complex-select, .complex-info div {
+.complex-select, .complex-info {
+  font-size: 110%;
   padding-bottom: 0.5em;
 }
 

src/app/complex-viewer/complex-viewer.component.html

@@ -3,7 +3,8 @@
     Protein complexes
   </legend>
 
-  <div class="complex-select" *ngIf="complexes.length > 1">
+  <div class="complex-select">
+  <div *ngIf="complexes.length > 1">
     Select a complex containing {{geneDetails.name || geneDetails.uniquename}}:
     <select title="Select a complex" [(ngModel)]="currentComplex"
             (change)="complexChanged()">
@@ -13,12 +14,16 @@
     </select>
   </div>
 
+  <div *ngIf="complexes.length == 1">
+    {{geneDetails.name || geneDetails.uniquename}} is a part of protein complex {{currentComplex.complex_id}}
+    <span class="complex-name" *ngIf="currentComplex.complex_name">"{{currentComplex.complex_name}}"</span>
+  </div>
+  </div>
+
+  <div class="flex-container">
   <div class="complex-container">
     <div class="complex-info">
-      <div *ngIf="complexes.length == 1">{{geneDetails.name || geneDetails.uniquename}} is a part of protein
-        complex {{currentComplex.complex_id}}
-        <span class="complex-name" *ngIf="currentComplex.complex_name">"{{currentComplex.complex_name}}"</span></div>
-      <div>View details at <a href="{{complexPortalUrl(currentComplex.complex_id)}}">Complex Portal</a></div>
+      View details at <a href="{{complexPortalUrl(currentComplex.complex_id)}}">Complex Portal</a>
     </div>
 
     <div class="complex-view-frame">
@@ -27,4 +32,21 @@
       </iframe>
     </div>
   </div>
+
+  <div *ngIf="currentGenes.length > 0" class="complex-members">
+    Complex members:
+    <ul>
+      <li *ngFor = "let gene of currentGenes">
+        <span *ngIf="gene.uniquename == geneDetails.uniquename" title="Current gene">
+          {{gene.name || gene.uniquename}}
+        </span>
+        <a *ngIf="gene.uniquename != geneDetails.uniquename"
+           title="Visit gene page for {{gene.name || gene.uniquename}}: {{gene.product || ''}}"
+           routerLink="/gene/{{gene.uniquename}}">
+          {{gene.name || gene.uniquename}}
+        </a>
+      </li>
+    </ul>
+  </div>
+  </div>
 </fieldset>

src/app/complex-viewer/complex-viewer.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit, OnChanges, Input,
          ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { GeneDetails, ProteinComplexDetails } from '../pombase-api.service';
+import { PombaseAPIService, GeneSummaryMap, GeneSummary,
+         GeneDetails, ProteinComplexDetails } from '../pombase-api.service';
 import { getXrfWithPrefix } from '../config';
 
 @Component({
@@ -17,9 +18,15 @@ export class ComplexViewerComponent implements OnInit, OnChanges {
   complexes: Array<ProteinComplexDetails> = [];
   currentComplexUniquename?: string = undefined;
   currentComplex?: ProteinComplexDetails = undefined;
+  currentGenes: Array<GeneSummary> = [];
+
+  private geneSummaryMapPromise: Promise<GeneSummaryMap>;
 
   constructor(private changeDetectorRef: ChangeDetectorRef,
-              private sanitizer: DomSanitizer) { }
+              private sanitizer: DomSanitizer,
+              private pombaseApiService: PombaseAPIService) {
+    this.geneSummaryMapPromise = this.pombaseApiService.getGeneSummaryMapPromise();
+  }
 
   complexPortalUrl(complexId: string): string {
     const xrfDetails = getXrfWithPrefix('ComplexPortal', complexId)!;
@@ -32,19 +39,35 @@ export class ComplexViewerComponent implements OnInit, OnChanges {
   }
 
   complexChanged() {
-    this.changeDetectorRef.detectChanges();
+    this.setGenes();
+    this.changeDetectorRef.detectChanges(); 
+  }
+
+  setGenes() {
+    this.currentGenes = [];
+    this.geneSummaryMapPromise.then(summaryMap => {
+      if (this.currentComplex) {
+        this.currentGenes = this.currentComplex.genes
+          .map(geneUniquename => summaryMap[geneUniquename])
+        this.changeDetectorRef.detectChanges();
+      }
+    });
   }
 
   ngOnInit() {
+    console.log("ngOnInit()")
   }
 
   ngOnChanges() {
+    console.log("ngOnChanges()")
     if (this.geneDetails) {
       this.complexes = this.geneDetails.complexes;
       this.currentComplex = this.complexes[0];
+      this.setGenes();
     } else {
       this.complexes = [];
       this.currentComplex = undefined;
+      this.currentGenes = [];
     }
   }
 }