diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 1586bda4..694a7fe5 100644
--- a/src/app/app-routing.module.ts
+++ b/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: {
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index fb5791ca..9e5bf092 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/gene-protein-features/gene-protein-features.component.css b/src/app/gene-protein-features/gene-protein-features.component.css
new file mode 100644
index 00000000..6a8087fe
--- /dev/null
+++ b/src/app/gene-protein-features/gene-protein-features.component.css
@@ -0,0 +1,5 @@
+iframe.full-protein-viewer {
+ width: 1160px;
+ height: 80vh;
+ border: 0;
+}
diff --git a/src/app/gene-protein-features/gene-protein-features.component.html b/src/app/gene-protein-features/gene-protein-features.component.html
new file mode 100644
index 00000000..fe0181c7
--- /dev/null
+++ b/src/app/gene-protein-features/gene-protein-features.component.html
@@ -0,0 +1,23 @@
+
diff --git a/src/app/gene-protein-features/gene-protein-features.component.spec.ts b/src/app/gene-protein-features/gene-protein-features.component.spec.ts
new file mode 100644
index 00000000..8d9077be
--- /dev/null
+++ b/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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ GeneProteinFeaturesComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(GeneProteinFeaturesComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/gene-protein-features/gene-protein-features.component.ts b/src/app/gene-protein-features/gene-protein-features.component.ts
new file mode 100644
index 00000000..47094ae4
--- /dev/null
+++ b/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;
+ }
+ });
+ }
+ })
+ }
+}
diff --git a/src/app/protein-feature-viewer/protein-feature-viewer.component.css b/src/app/protein-feature-viewer/protein-feature-viewer.component.css
index bc28f178..cf455a1f 100644
--- a/src/app/protein-feature-viewer/protein-feature-viewer.component.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/app/protein-feature-viewer/protein-feature-viewer.component.html b/src/app/protein-feature-viewer/protein-feature-viewer.component.html
index 8842e605..9287a96a 100644
--- a/src/app/protein-feature-viewer/protein-feature-viewer.component.html
+++ b/src/app/protein-feature-viewer/protein-feature-viewer.component.html
@@ -1,2 +1,13 @@
-
+
+
+
+
+
+