From 3a5e53be3caf508e8f9b087cfa5668da5cc457dc Mon Sep 17 00:00:00 2001
From: Kim Rutherford <kmr@aska.gen.nz>
Date: Tue, 26 Nov 2024 10:05:30 +1300
Subject: [PATCH] Add very hacky fix to iframe back button issue

When the URL of an iframe changes, an entry is pushed onto the history
stack:
  https://github.com/whatwg/html/issues/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 pombase/website#2284
---
 .../alphafold-viewer.component.html           |  5 ++--
 .../alphafold-viewer.component.ts             | 23 ++++++-------------
 .../annotation-table.component.html           |  2 ++
 .../gene-page-widgets.component.html          |  2 ++
 .../gene-protein-features.component.html      |  2 ++
 .../go-cam-viewer.component.html              |  2 ++
 .../pdb-structure-viewer.component.html       |  4 ++--
 .../pdb-structure-viewer.component.ts         |  2 +-
 .../protein-feature-viewer.component.html     |  2 ++
 .../protein-features.component.html           |  2 ++
 .../reference-details.component.html          |  2 +-
 .../rna-structure.component.html              |  2 ++
 12 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/app/alphafold-viewer/alphafold-viewer.component.html b/src/app/alphafold-viewer/alphafold-viewer.component.html
index b7ad47c7..711c3a16 100644
--- 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
index d0380fbc..90b55dd3 100644
--- 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
index 8a18936c..3374a5c3 100644
--- 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
index e128e4c1..ca16caf5 100644
--- 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
index cd2bf1ce..e6335967 100644
--- 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
index 2cca67cc..85fd7bfe 100644
--- 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
index 0a5cab17..51cb39e7 100644
--- 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>
\ No newline at end of file
+</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
index 41e91973..965efe91 100644
--- 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
index 793a3416..5df1c465 100644
--- 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
index fb79b936..1c23dc3e 100644
--- 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
index 9365e5d1..5b3d9cdc 100644
--- 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
index f0ca37b6..038f3fee 100644
--- 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>