Add a full page protein feature view mode

Refs #2071

src/app/app-routing.module.ts

@@ -3,6 +3,7 @@ import { Routes, RouterModule, NoPreloading } from '@angular/router';
 
 import { GeneDetailsComponent } from './gene-details/gene-details.component';
 import { GeneAlleleListComponent } from './gene-allele-list/gene-allele-list.component';
+import { GeneProteinFeaturesComponent } from './gene-protein-features/gene-protein-features.component';
 import { GenotypeDetailsComponent } from './genotype-details/genotype-details.component';
 import { AlleleDetailsComponent } from './allele-details/allele-details.component';
 import { TermDetailsComponent } from './term-details/term-details.component';
@@ -36,6 +37,11 @@ const routes: Routes = [
     data: {
     }
   },
+  {
+    path: 'gene_protein_features/:uniquename', component: GeneProteinFeaturesComponent,
+    data: {
+    }
+  },
   { path: 'genotype/:uniquename', component: GenotypeDetailsComponent,
     data: {
     }

src/app/app.module.ts

@@ -142,6 +142,7 @@ import { PdbStructureViewerComponent } from './pdb-structure-viewer/pdb-structur
 import { TermPageWidgetsComponent } from './term-page-widgets/term-page-widgets.component';
 import { ReactionViewComponent } from './reaction-view/reaction-view.component';
 import { ProteinFeatureViewerComponent } from './protein-feature-viewer/protein-feature-viewer.component';
+import { GeneProteinFeaturesComponent } from './gene-protein-features/gene-protein-features.component';
 
 export function documentFactory() {
     return document;
@@ -258,6 +259,7 @@ export function windowFactory() {
     TermPageWidgetsComponent,
     ReactionViewComponent,
     ProteinFeatureViewerComponent,
+    GeneProteinFeaturesComponent,
   ],
   imports: [
     BrowserModule,

src/app/gene-protein-features/gene-protein-features.component.css

@@ -0,0 +1,5 @@
+iframe.full-protein-viewer {
+  width: 1160px;
+  height: 80vh;
+  border: 0;
+}

src/app/gene-protein-features/gene-protein-features.component.html

@@ -0,0 +1,23 @@
+<div *ngIf="geneDetails">
+
+<!--  <a routerLink="/gene/{{geneDetails.uniquename}}">&lt;- Back to gene page</a> -->
+
+  <div class="details-page-name-and-id">
+    <span class="details-page-name-and-id-prefix">Protein features: </span>
+
+    <a routerLink="/gene/{{geneDetails.uniquename}}">
+      <span *ngIf="geneDetails.name">
+        <span class="name-id"><span class="name-id-highlight">{{geneDetails.name}}</span> / {{geneDetails.uniquename}}</span>
+      </span>
+      <span class="gene-name" *ngIf="!geneDetails.name">
+        <span class="name-id">{{geneDetails.uniquename}}</span>
+      </span>
+    </a>
+
+  </div>
+
+  <div *ngIf="getIFrameURL()">
+    <iframe [src]="getIFrameURL()" class="full-protein-viewer" #proteinfeaturesiframe>
+    </iframe>
+  </div>
+</div>

src/app/gene-protein-features/gene-protein-features.component.spec.ts

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

src/app/gene-protein-features/gene-protein-features.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import { ActivatedRoute, Params } from '@angular/router';
+import { GeneDetails, PombaseAPIService } from '../pombase-api.service';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-gene-protein-features',
+  templateUrl: './gene-protein-features.component.html',
+  styleUrls: ['./gene-protein-features.component.css']
+})
+export class GeneProteinFeaturesComponent implements OnInit {
+  @Input() geneDetails: GeneDetails;
+
+  sanitizedURL?: SafeResourceUrl;
+
+  constructor(private sanitizer: DomSanitizer,
+              private pombaseApiService: PombaseAPIService,
+              private route: ActivatedRoute) {
+  }
+
+  getIFrameURL(): SafeResourceUrl | undefined {
+    return this.sanitizedURL;
+  }
+
+  ngOnInit(): void {
+    this.route.params.forEach((params: Params) => {
+      if (params['uniquename'] !== undefined) {
+          const uniquename = params['uniquename'];
+
+          this.pombaseApiService.getGene(uniquename)
+            .then(geneDetails => {
+              this.geneDetails = geneDetails;
+
+              if (this.geneDetails.uniprot_identifier) {
+                const rawUrl = 'protein_feature_view/full/' + this.geneDetails.uniquename;
+                this.sanitizedURL = this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);
+              } else {
+                this.sanitizedURL = undefined;
+              }
+            });
+      }
+    })
+  }
+}

src/app/protein-feature-viewer/protein-feature-viewer.component.css

@@ -1,5 +1,11 @@
 .embedded-protein-viewer {
-  width: 1050px;
+  width: 1260px;
   height: 400px;
   border: 0;
 }
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  width: 1000px;
+}

src/app/protein-feature-viewer/protein-feature-viewer.component.html

@@ -1,2 +1,13 @@
-<iframe [src]="getIFrameURL()" class="embedded-protein-viewer" scrolling="no" #proteinfeaturesiframe>
-</iframe>
+<div>
+
+  <div class="header">
+    <div>
+    </div>
+    <div>
+      <a routerLink="/gene_protein_features/{{geneDetails.uniquename}}">View all protein features ...</a>
+    </div>
+  </div>
+
+  <iframe [src]="getIFrameURL()" class="embedded-protein-viewer" #proteinfeaturesiframe>
+  </iframe>
+</div>