Add feature viewer in Modification section

Refs #2203
pombase · Oct 19, 2024 · def211c · def211c
1 parent bca819a
commit def211c
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 11 deletions.
diff --git a/src/app/annotation-table/annotation-table.component.css b/src/app/annotation-table/annotation-table.component.css
@@ -10,3 +10,17 @@
 .annotation-table-slim, .gene-alleles-link {
   margin-bottom: 0.8em;
 }
+
+.view-all-link {
+  margin-left: 13.5em;
+}
+
+.view-all-link .help-icon {
+  font-size: 90%;
+  opacity: 80%;
+}
+
+.embedded-protein-viewer {
+  width: 1050px;
+  border: 0;
+}
diff --git a/src/app/annotation-table/annotation-table.component.html b/src/app/annotation-table/annotation-table.component.html
@@ -23,6 +23,22 @@
     <a routerLink="/gene_alleles/{{geneDetails.uniquename}}">View all alleles of <span class="name-id-highlight">{{geneDetails.displayName}}</span></a>
   </div>
 
+  <div *ngIf="sanitizedFeatureViewURL">
+    <div class="view-all-link">
+      <span class="help-icon">
+        <app-help-link [route]="'/documentation/gene-page-protein-features'"
+          [title]="'Click to view documentation for this section'">
+        </app-help-link>
+      </span>
+
+      <a routerLink="/gene_protein_features/{{geneDetails!.uniquename}}">View all protein features ...</a>
+    </div>
+
+    <iframe [src]="getProteinViewerIFrameURL()" id="protein-feature-viewer-mods" frameborder="0" scrolling="no"
+            onload="resizeIframe(this, 100)" class="embedded-protein-viewer" #modsproteinfeaturesiframe>
+    </iframe>
+  </div>
+
   <div *ngIf="split_by_parents.length == 0">
     <app-annotation-sub-table
        [annotationTypeName]="annotationTypeName"

diff --git a/src/app/annotation-table/annotation-table.component.ts b/src/app/annotation-table/annotation-table.component.ts
@@ -4,6 +4,7 @@ import { TermAnnotation, GeneDetails } from '../pombase-api.service';
 import { getAnnotationTableConfig, AnnotationTableConfig, AnnotationType,
          SplitByParentsConfig } from '../config';
 import { DeployConfigService } from '../deploy-config.service';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-annotation-table',
@@ -26,8 +27,10 @@ export class AnnotationTableComponent implements OnInit, OnChanges {
   splitSummaryList = {};
   split_by_parents: Array<SplitByParentsConfig> = [];
   helpIconTitle = 'Click to view documention';
+  sanitizedFeatureViewURL?: SafeResourceUrl;
 
-  constructor(public deployConfigService: DeployConfigService) { }
+  constructor(private sanitizer: DomSanitizer,
+              public deployConfigService: DeployConfigService) { }
 
   maybeDoSplit() {
     if (this.annotationTable && this.typeConfig && this.typeConfig.split_by_parents) {
@@ -75,6 +78,10 @@ export class AnnotationTableComponent implements OnInit, OnChanges {
     }
   }
 
+  getProteinViewerIFrameURL(): SafeResourceUrl | undefined {
+    return this.sanitizedFeatureViewURL;
+  }
+
   ngOnInit() {
   }
 
@@ -96,6 +103,15 @@ export class AnnotationTableComponent implements OnInit, OnChanges {
       this.helpIconTitle = 'Click to view documentation';
     }
 
+    if (this.geneDetails && this.typeConfig.protein_viewer_type) {
+      const rawUrl = 'protein_feature_view/' + this.typeConfig.protein_viewer_type + '/' +
+        this.geneDetails.uniquename;
+      this.sanitizedFeatureViewURL =
+        this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);
+    } else {
+      this.sanitizedFeatureViewURL = undefined;
+    }
+
     this.maybeDoSplit();
   }
 }
diff --git a/src/app/config.ts b/src/app/config.ts
@@ -488,6 +488,7 @@ export interface AnnotationType {
   slim_description?: string;
   slim_link?: string;
   slim_no_category_text?: string;
+  protein_viewer_type?: string;
   downstream_query_title?: string;
   downstream_relations?: Array<TermId>;
   modification_abbreviations?: {

diff --git a/src/app/protein-feature-viewer/protein-feature-viewer.component.ts b/src/app/protein-feature-viewer/protein-feature-viewer.component.ts
@@ -28,12 +28,8 @@ export class ProteinFeatureViewerComponent {
       this.geneDisplayName = this.geneDetails.uniquename;
     }
 
-    if (this.geneDetails.uniprot_identifier) {
-      const rawUrl = 'protein_feature_view/widget/' + this.geneDetails.uniquename;
-      this.sanitizedURL =
-        this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);
-    } else {
-      this.sanitizedURL = undefined;
-    }
+    const rawUrl = 'protein_feature_view/widget/' + this.geneDetails.uniquename;
+    this.sanitizedURL =
+      this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);
   }
 }
diff --git a/src/app/protein-features/protein-features.component.css b/src/app/protein-features/protein-features.component.css
@@ -36,4 +36,4 @@
 .view-all-link .help-icon {
   font-size: 90%;
   opacity: 80%;
-}
+}
diff --git a/src/japonicus/index.html b/src/japonicus/index.html
@@ -70,7 +70,7 @@
   function resizeIframe(obj, minHeight, timeout) {
     if (!obj || !obj.contentWindow || !obj.contentWindow.document || !obj.contentWindow.document.body) { return; }
     if (!timeout) { timeout = 100; }
-    let height = obj.contentWindow.document.body.scrollHeight + 40;
+    let height = obj.contentWindow.document.body.scrollHeight + 25;
     if (height < minHeight) { height = minHeight; }
     obj.style.height = height + 'px';
     const nextTimeout = Math.round(timeout * 1.1);

diff --git a/src/pombase/index.html b/src/pombase/index.html
@@ -82,7 +82,7 @@
   function resizeIframe(obj, minHeight, timeout) {
     if (!obj || !obj.contentWindow || !obj.contentWindow.document || !obj.contentWindow.document.body) { return; }
     if (!timeout) { timeout = 100; }
-    let height = obj.contentWindow.document.body.scrollHeight + 40;
+    let height = obj.contentWindow.document.body.scrollHeight + 25;
     if (height < minHeight) { height = minHeight; }
     obj.style.height = height + 'px';
     const nextTimeout = Math.round(timeout * 1.1);