Add very hacky fix to iframe back button issue

When the URL of an iframe changes, an entry is pushed onto the history stack: whatwg/html#6501 We get two history entries if we change gene page. Then we need to oush the back button twice to go back to the previous gene page. And the first click shows the wrong iframe contents. This hack recreate the iframe component on page change so it's not added to the history. Sort of like this: https://stackoverflow.com/a/79096750 Refs #2284
pombase · Nov 25, 2024 · 3a5e53b · 3a5e53b
1 parent b556fe3
commit 3a5e53b
Show file tree

Hide file tree

Showing 12 changed files with 27 additions and 23 deletions.
diff --git a/src/app/alphafold-viewer/alphafold-viewer.component.html b/src/app/alphafold-viewer/alphafold-viewer.component.html
@@ -9,9 +9,8 @@
 </div>
 
 <div *ngIf="!proteinTooLong()" class="alphafold-container">
-  <div class="alphafold-iframe-container">
-    <iframe (load)="alphaFoldFinishedLoading()" [src]="getAlphaFoldIFrameURL()" scrolling="no" #alphafoldiframe
-      class="embedded-alphafold">
+  <div *ngFor="let gene of [geneDetails]" class="alphafold-iframe-container">
+    <iframe (load)="alphaFoldFinishedLoading()" #alphafoldiframe scrolling="no" class="embedded-alphafold">
     </iframe>
   </div>
 

diff --git a/src/app/alphafold-viewer/alphafold-viewer.component.ts b/src/app/alphafold-viewer/alphafold-viewer.component.ts
@@ -1,5 +1,4 @@
 import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { GeneDetails } from '../pombase-api.service';
 import { AppConfig, getAppConfig } from '../config';
 
@@ -16,12 +15,10 @@ export class AlphafoldViewerComponent implements OnInit {
 
   appConfig: AppConfig = getAppConfig();
 
-  sanitizedAlphaFoldURL?: SafeResourceUrl;
-
   alphaFoldStatus: 'loading' | 'loaded' = 'loading';
 
 
-  constructor(private sanitizer: DomSanitizer) { }
+  constructor() { }
 
   proteinTooLong(): boolean {
     const protLength = this.geneDetails.transcripts[0].protein?.sequence.length;
@@ -45,19 +42,13 @@ export class AlphafoldViewerComponent implements OnInit {
     return this.alphaFoldStatus == 'loading';
   }
 
-  getAlphaFoldIFrameURL(): SafeResourceUrl | undefined {
-    return this.sanitizedAlphaFoldURL;
-  }
-
   ngOnChanges(): void {
-
-    if (this.geneDetails.uniprot_identifier) {
-      const rawUrl = 'structure_view/alphafold/' + this.geneDetails.uniprot_identifier;
-      this.sanitizedAlphaFoldURL =
-        this.sanitizer.bypassSecurityTrustResourceUrl(rawUrl);
-    } else {
-      this.sanitizedAlphaFoldURL = undefined;
-    }
+    setTimeout(() => {
+      if (this.geneDetails.uniprot_identifier && this.alphafoldiframe) {
+        const rawUrl = 'structure_view/alphafold/' + this.geneDetails.uniprot_identifier;
+        this.alphafoldiframe.nativeElement.contentWindow.location.replace(rawUrl);
+      }
+    }, 100);
   }
 
   ngOnInit(): void {

diff --git a/src/app/annotation-table/annotation-table.component.html b/src/app/annotation-table/annotation-table.component.html
@@ -34,9 +34,11 @@
       <a routerLink="/gene_protein_features/{{geneDetails!.uniquename}}">View all protein features ...</a>
     </div>
 
+    <div *ngFor="let gene of [geneDetails]">
     <iframe [src]="getProteinViewerIFrameURL()" id="protein-feature-viewer-mods" frameborder="0" scrolling="no"
             onload="resizeIframe(this, 175)" class="embedded-protein-viewer" #modsproteinfeaturesiframe>
     </iframe>
+    </div>
   </div>
 
   <div *ngIf="split_by_parents.length == 0">

diff --git a/src/app/gene-page-widgets/gene-page-widgets.component.html b/src/app/gene-page-widgets/gene-page-widgets.component.html
@@ -106,10 +106,12 @@
 
 <div *ngIf="currentWidget() == 'genome_browser'" class="chromosome-region-view">
 
+  <div *ngFor="let gene of [geneDetails]">
   <div *ngIf="getJBrowseIFrameURL()" class="jbrowse-container">
     <iframe [src]="getJBrowseIFrameURL()! | safeUrl" scrolling="no" class="embedded-jbrowse">
     </iframe>
   </div>
+  </div>
 
   <app-gene-neighbourhood [focusGeneUniquename]="geneDetails.uniquename"
                           [focusGeneName]="geneDetails.name"

diff --git a/src/app/gene-protein-features/gene-protein-features.component.html b/src/app/gene-protein-features/gene-protein-features.component.html
@@ -36,11 +36,13 @@
 
   <div *ngIf="!featureTableVisible">
   <div *ngIf="getIFrameURL()">
+    <div *ngFor="let gene of [geneDetails]">
     <iframe [src]="getIFrameURL()"
             frameborder="0" scrolling="no" onload="resizeIframe(this, 400)"
             id="protein-feature-viewer-full"
             class="full-protein-viewer" #proteinfeaturesiframe>
     </iframe>
+    </div>
   </div>
   </div>
 

diff --git a/src/app/go-cam-viewer/go-cam-viewer.component.html b/src/app/go-cam-viewer/go-cam-viewer.component.html
@@ -11,8 +11,10 @@
     <span class="help-link"><a routerLink="/documentation/go-cam-pathway-models">Documentation <img class="help-icon" src="/assets/info_icon.svg"/></a></span>
   </div>
 
+  <div *ngFor="let o of [geneOrTermDetails]">
   <iframe [src]="getIFrameURL()" class="embedded-go-cam-viewer" #gocamiframe>
   </iframe>
+  </div>
 </div>
 
 <div *ngIf="!hasGoCam && displayName" class="no-go-cams">

diff --git a/src/app/pdb-structure-viewer/pdb-structure-viewer.component.html b/src/app/pdb-structure-viewer/pdb-structure-viewer.component.html
@@ -3,7 +3,7 @@
 </div>
 
 <div class="pdb-structure-view">
-  <div class="pdb-iframe-container">
+  <div *ngFor="let dn of [displayName]" class="pdb-iframe-container">
     <iframe (load)="finishedLoading()" [src]="sanitizedURL" scrolling="no" #pdbiframe class="embedded-pdb">
     </iframe>
   </div>
@@ -85,4 +85,4 @@
   <div class="entry-popover-image">
     <img src="{{popoverImageUrl(pdbId)}}"/>
   </div>
-</ng-template>
+</ng-template>
diff --git a/src/app/pdb-structure-viewer/pdb-structure-viewer.component.ts b/src/app/pdb-structure-viewer/pdb-structure-viewer.component.ts
@@ -28,7 +28,7 @@ interface DisplayEntry {
     standalone: false
 })
 export class PdbStructureViewerComponent implements OnInit {
-  @Input() displayName?: string;
+  @Input() displayName: string;
   @Input() pdbEntries: Array<PDBEntry>;
   @Input() pageType: 'gene' | 'reference';
 

diff --git a/src/app/protein-feature-viewer/protein-feature-viewer.component.html b/src/app/protein-feature-viewer/protein-feature-viewer.component.html
@@ -14,12 +14,14 @@
     </div>
   </div>
 
+<div *ngFor="let gene of [geneDetails]">
   <iframe [src]="getIFrameURL()"
           frameborder="0" scrolling="no" onload="resizeIframe(this, 240)"
           id="protein-feature-viewer-widget"
           class="embedded-protein-viewer" #proteinfeaturesiframe>
   </iframe>
 </div>
+</div>
 
 <div *ngIf="!geneDetails.has_protein_features && geneDisplayName" class="no-features">
 No features available for {{geneDisplayName}}

diff --git a/src/app/protein-features/protein-features.component.html b/src/app/protein-features/protein-features.component.html
@@ -23,12 +23,14 @@
       <a routerLink="/gene_protein_features/{{geneDetails.uniquename}}">View all protein features ...</a>
     </div>
 
+    <div *ngFor="let gene of [geneDetails]">
     <iframe [src]="getIFrameURL()"
             #proteinFeatureViewerInterpro
             id="protein-feature-viewer-interpro"
             frameborder="0" scrolling="no" onload="resizeIframe(this, 240)"
             class="embedded-protein-viewer" #proteinfeaturesiframe>
     </iframe>
+    </div>
 
   </div>
 

diff --git a/src/app/reference-details/reference-details.component.html b/src/app/reference-details/reference-details.component.html
@@ -99,7 +99,7 @@
   </div>
 
 <div *ngIf="refDetails.pdb_entries.length > 0" class="pdb-structure-view">
-  <app-pdb-structure-viewer [pdbEntries]="refDetails.pdb_entries" [pageType]="'reference'">
+  <app-pdb-structure-viewer [displayName]="refDetails.title" [pdbEntries]="refDetails.pdb_entries" [pageType]="'reference'">
   </app-pdb-structure-viewer>
 </div>
 

diff --git a/src/app/rna-structure/rna-structure.component.html b/src/app/rna-structure/rna-structure.component.html
@@ -1,4 +1,6 @@
 <div *ngIf="geneDetails.rnacentral_urs_identifier">
+<div *ngFor="let gene of [geneDetails]">
   <iframe [src]="getIFrameURL()" class="embedded-rna-structure" #rnastructureiframe>
   </iframe>
 </div>
+</div>