Add a complex viewer section on the gene pages

Refs #2559

Author: kimrutherford

src/app/app.module.ts

@@ -72,6 +72,7 @@ import { ReferenceShortListComponent } from './reference-short-list/reference-sh
 import { TranscriptSequenceSelectComponent } from './transcript-sequence-select/transcript-sequence-select.component';
 import { ProteinPropertiesComponent } from './protein-properties/protein-properties.component';
 import { ProteinFeaturesComponent } from './protein-features/protein-features.component';
+import { ComplexViewerComponent } from './complex-viewer/complex-viewer.component';
 import { GeneSubsetViewComponent } from './gene-subset-view/gene-subset-view.component';
 import { TranscriptViewComponent } from './transcript-view/transcript-view.component';
 import { InterproMatchesComponent } from './interpro-matches/interpro-matches.component';
@@ -248,6 +249,7 @@ export class PomBaseUrlSerializer extends DefaultUrlSerializer {
         TranscriptSequenceSelectComponent,
         ProteinPropertiesComponent,
         ProteinFeaturesComponent,
+        ComplexViewerComponent,
         GeneSubsetViewComponent,
         TranscriptViewComponent,
         InterproMatchesComponent,

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

@@ -0,0 +1,25 @@
+.complex-info {
+  font-size: 110%;
+}
+
+.complex-select, .complex-info div {
+  padding-bottom: 0.5em;
+}
+
+.complex-view-frame {
+  width: 800px;
+  height: 450px;
+}
+
+.complex-view-frame iframe {
+  width: 780px;
+  height: 420px;
+}
+
+.complex-container {
+  margin-bottom: 1.5em;
+}
+
+.complex-name {
+  font-weight: bold;
+}

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

@@ -0,0 +1,30 @@
+<fieldset *ngIf="complexes.length > 0" class="annotation-table">
+  <legend>
+    Protein complexes
+  </legend>
+
+  <div class="complex-select" *ngIf="complexes.length > 1">
+    Select a complex containing {{geneDetails.name || geneDetails.uniquename}}:
+    <select title="Select a complex" [(ngModel)]="currentComplex"
+            (change)="complexChanged()">
+      <option *ngFor = "let complex of complexes" [ngValue]="complex">
+        {{complex.complex_uniquename}} <span *ngIf="complex.complex_name">{{complex.complex_name}}</span>
+      </option>
+    </select>
+  </div>
+
+  <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_uniquename}}
+        <span class="complex-name" *ngIf="currentComplex.complex_name">"{{currentComplex.complex_name}}"</span></div>
+      <div>View details at <a href="{{complexPortalUrl(currentComplex.complex_uniquename)}}">Complex Portal</a></div>
+    </div>
+
+    <div class="complex-view-frame">
+      <iframe [src]="getIFrameURL(currentComplex.complex_uniquename)" frameborder="0" scrolling="no"
+              id="complex-viewer" class="embedded-complex-viewer" #complexvieweriframe>
+      </iframe>
+    </div>
+  </div>
+</fieldset>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ComplexViewerComponent } from './complex-viewer.component';
+
+describe('ComplexViewerComponent', () => {
+  let component: ComplexViewerComponent;
+  let fixture: ComponentFixture<ComplexViewerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ComplexViewerComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ComplexViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,50 @@
+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 { getXrfWithPrefix } from '../config';
+
+@Component({
+  selector: 'app-complex-viewer',
+  templateUrl: './complex-viewer.component.html',
+  styleUrl: './complex-viewer.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false
+})
+export class ComplexViewerComponent implements OnInit, OnChanges {
+  @Input() geneDetails: GeneDetails;
+
+  complexes: Array<ProteinComplexDetails> = [];
+  currentComplexUniquename?: string = undefined;
+  currentComplex?: ProteinComplexDetails = undefined;
+
+  constructor(private changeDetectorRef: ChangeDetectorRef,
+              private sanitizer: DomSanitizer) { }
+
+  complexPortalUrl(complexId: string): string {
+    const xrfDetails = getXrfWithPrefix('ComplexPortal', complexId)!;
+    return xrfDetails.url;
+  }
+
+  getIFrameURL(complexId: string): SafeResourceUrl {
+    const rawUrl = '/complex_viewer/' + complexId;
+    return this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);
+  }
+
+  complexChanged() {
+    this.changeDetectorRef.detectChanges();
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges() {
+    if (this.geneDetails) {
+      this.complexes = this.geneDetails.complexes;
+      this.currentComplex = this.complexes[0];
+    } else {
+      this.complexes = [];
+      this.currentComplex = undefined;
+    }
+  }
+}

src/app/gene-details/gene-details.component.html

@@ -215,6 +215,11 @@
                          (intersection)="intersect('transcript_view', $event.intersect)"
                          [geneDetails]="geneDetails"></app-transcript-view>
 
+    <app-complex-viewer id="complex_viewer"
+                        *ngIf="geneDetails!.complexes.length > 0" intersectionObserver
+                        (intersection)="intersect('complex_viewer', $event.intersect)"
+                        [geneDetails]="geneDetails"></app-complex-viewer>
+
     <app-transcript-sequence-select *ngIf="isConfiguredOrganism" id="transcript-sequence"
                                     intersectionObserver
                                     (intersection)="intersect('transcript-sequence', $event.intersect)"

src/app/gene-details/gene-details.component.ts

@@ -344,6 +344,13 @@ export class GeneDetailsComponent implements OnInit {
       });
     }
 
+    if (this.geneDetails && this.geneDetails.complexes.length > 0) {
+      this.menuItems.push({
+        id: 'complex_viewer',
+        displayName: 'Protein complexes',
+      });
+    }
+
     seqSubItems.push({
       id: 'transcript-sequence',
       displayName: 'Sequence',

src/app/pombase-api.service.ts

@@ -15,6 +15,8 @@ export type ChromosomeShortMap = {[uniquename: string]: ChromosomeShort};
 export type FeatureTypeSummaryMap = { [featureTypeName: string]: FeatureTypeSummary };
 export type GoCamMap = { [gocamid: GoCamModelId]: GoCamSummary };
 
+export type ComplexPortalId = string;
+
 type ReferenceDetailsMap = { [referenceUniquename: string]: ReferenceDetails };
 
 type TermIdTermMap = { [termid: string]: TermShort };
@@ -639,6 +641,12 @@ export interface AssignedByPeptideRange {
   assigned_by: string;
 }
 
+export interface ProteinComplexDetails {
+  complex_uniquename: ProteinComplexId;
+  complex_name?: string;
+  genes: Array<GeneUniquename>;
+}
+
 export class GeneDetails {
   uniquename: string;
   name: string;
@@ -667,6 +675,7 @@ export class GeneDetails {
   tfexplorer_chipseq_identifier: string;
   tfexplorer_ipms_identifier: string;
   pdb_entries: Array<PDBEntry>;
+  complexes: Array<ProteinComplexDetails>;
   gocams: Array<GoCamIdAndTitle>;
   characterisation_status?: string;
   location: ChromosomeLocation;
@@ -827,6 +836,8 @@ export type GoCamModelId = string;
 export type GoCamModelTitle = string;
 export type GoCamDirection = 'Incoming' |'IncomingConstitutivelyUpstream'|'Outgoing'|'None';
 
+export type ProteinComplexId = string;
+
 export interface GoCamIdAndTitle {
   gocam_id: string;
   title?: string;
@@ -1365,6 +1376,10 @@ export class PombaseAPIService {
       json.transcripts = [];
     }
 
+    if (!json.complexes) {
+      json.complexes = [];
+    }
+
     for (let fieldName of ['cv_annotations',
                            'genes_by_uniquename', 'genotypes_by_uniquename',
                            'alleles_by_uniquename', 'references_by_uniquename',