From c0f16ce20191103c599eb899e04f98ea42f41ab6 Mon Sep 17 00:00:00 2001
From: nictru <nictru32@gmail.com>
Date: Fri, 24 Jan 2025 23:58:50 +0100
Subject: [PATCH] Improve IGV implementation

---
 package-lock.json                                    |  8 ++++----
 package.json                                         |  2 +-
 .../components/gene-modal/gene-modal.component.html  | 10 ++++++++--
 .../transcript-modal/transcript-modal.component.html | 10 ++++++++--
 src/app/constants.ts                                 |  2 +-
 src/app/services/browse.service.ts                   | 12 ++++++------
 6 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 962da53a..19a8cf1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,7 +23,7 @@
         "@ngx-dropzone/cdk": "^19.0.0",
         "@ngx-dropzone/material": "^19.0.0",
         "@sigma/node-square": "^3.0.0",
-        "@visa-ge/ng-igv": "^0.0.9",
+        "@visa-ge/ng-igv": "^0.0.11",
         "file-saver": "^2.0.5",
         "graphology": "^0.25.4",
         "graphology-layout-force": "^0.2.4",
@@ -5378,9 +5378,9 @@
       }
     },
     "node_modules/@visa-ge/ng-igv": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/@visa-ge/ng-igv/-/ng-igv-0.0.9.tgz",
-      "integrity": "sha512-6BqiqTUKbs81nggy6II5h6A3ZwU5JLtChDwRSsm0QUxogJgeW2eTRrGm0hEc89Cdhf3a3I3nALHIMWjFwZ5YJw==",
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/@visa-ge/ng-igv/-/ng-igv-0.0.11.tgz",
+      "integrity": "sha512-9qVvxyk+CazhHbL/nGUMo82BCsNg1wl1Kvsu3Db2PqvNYisDwXAyPYiEkz2nDTK1kE0cfixP910Zld76mZ9fLg==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
diff --git a/package.json b/package.json
index eabe7b65..296d6a37 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@ngx-dropzone/cdk": "^19.0.0",
     "@ngx-dropzone/material": "^19.0.0",
     "@sigma/node-square": "^3.0.0",
-    "@visa-ge/ng-igv": "^0.0.9",
+    "@visa-ge/ng-igv": "^0.0.11",
     "file-saver": "^2.0.5",
     "graphology": "^0.25.4",
     "graphology-layout-force": "^0.2.4",
diff --git a/src/app/components/gene-modal/gene-modal.component.html b/src/app/components/gene-modal/gene-modal.component.html
index b4271e46..f8669301 100644
--- a/src/app/components/gene-modal/gene-modal.component.html
+++ b/src/app/components/gene-modal/gene-modal.component.html
@@ -126,8 +126,14 @@ <h1 mat-dialog-title>{{ gene.gene_symbol || gene.ensg_number }}</h1>
       </mat-tab>
     }
     <mat-tab label="Genome view">
-      <igv [location]="this.location$()" [reference]="IGV_REFGENOME" [refresh]="activeTab$()"
-           [tracks]="miRNAtracks$.value() || []"></igv>
+      @if (miRNAtracks$.isLoading()) {
+        <div class="spinner-container">
+          <mat-spinner mode="indeterminate"></mat-spinner>
+        </div>
+      } @else {
+        <igv [location]="this.location$()" [reference]="IGV_REFGENOME" [refresh]="activeTab$()"
+             [tracks]="miRNAtracks$.value() || []"></igv>
+      }
     </mat-tab>
 
   </mat-tab-group>
diff --git a/src/app/components/transcript-modal/transcript-modal.component.html b/src/app/components/transcript-modal/transcript-modal.component.html
index afd0f8b7..63c981f9 100644
--- a/src/app/components/transcript-modal/transcript-modal.component.html
+++ b/src/app/components/transcript-modal/transcript-modal.component.html
@@ -61,8 +61,14 @@ <h1 mat-dialog-title>{{ BrowseService.getFullName(transcript) }}</h1>
     </mat-tab>
 
     <mat-tab label="Genome view">
-      <igv [location]="this.location$()" [reference]="IGV_REFGENOME" [refresh]="activeTab$()"
-           [tracks]="miRNAtracks$.value() || []"></igv>
+      @if (miRNAtracks$.isLoading()) {
+        <div class="spinner-container">
+          <mat-spinner mode="indeterminate"></mat-spinner>
+        </div>
+      } @else {
+        <igv [location]="this.location$()" [reference]="IGV_REFGENOME" [refresh]="activeTab$()"
+             [tracks]="miRNAtracks$.value() || []"></igv>
+      }
     </mat-tab>
   </mat-tab-group>
 </mat-dialog-content>
diff --git a/src/app/constants.ts b/src/app/constants.ts
index b4279b0d..85d7d005 100644
--- a/src/app/constants.ts
+++ b/src/app/constants.ts
@@ -1,6 +1,6 @@
 export const SUBTYPE_DEFAULT = 'Unspecific';
 
-export const API_BASE = 'https://exbio.wzw.tum.de/sponge-api-dev';
+export const API_BASE = 'https://exbio.wzw.tum.de/sponge-api';
 
 export const AS_DESCRIPTIONS: { [key: string]: string } = {
   SE: 'Skipping Exon',
diff --git a/src/app/services/browse.service.ts b/src/app/services/browse.service.ts
index b9445ba7..fd4f74e0 100644
--- a/src/app/services/browse.service.ts
+++ b/src/app/services/browse.service.ts
@@ -48,6 +48,9 @@ interface NetworkData {
 })
 export class BrowseService {
   readonly physicsEnabled$ = signal(true);
+  readonly graph$ = computed(() =>
+    this.createGraph(this.nodes$(), this.interactions$(), this.inverseNodes$()),
+  );
   layout = computed(
     () =>
       new ForceSupervisor(this.graph$(), {
@@ -69,6 +72,8 @@ export class BrowseService {
       return this.backend.getComparisons(param.request);
     },
   });
+  private readonly _currentData$: ResourceRef<NetworkData | undefined>;
+  readonly disease$ = computed(() => this._currentData$.value()?.disease);
   readonly possibleComparisons$ = computed(() => {
     const disease = this.disease$();
     const comparisons = this._comparisons$.value();
@@ -81,8 +86,6 @@ export class BrowseService {
           c.dataset_2.dataset_ID === disease.dataset_ID,
       );
   });
-  private readonly _currentData$: ResourceRef<NetworkData | undefined>;
-  readonly disease$ = computed(() => this._currentData$.value()?.disease);
   readonly nodes$ = computed(() => this._currentData$.value()?.nodes || []);
   readonly inverseNodes$ = computed(
     () => this._currentData$.value()?.inverseNodes || [],
@@ -90,9 +93,6 @@ export class BrowseService {
   readonly interactions$ = computed(
     () => this._currentData$.value()?.edges || [],
   );
-  readonly graph$ = computed(() =>
-    this.createGraph(this.nodes$(), this.interactions$(), this.inverseNodes$()),
-  );
   private readonly _nodeStates$ = signal<Record<string, EntityState>>({});
   activeNodes$ = computed(() => {
     const activeNodeIDs = Object.entries(this._nodeStates$())
@@ -425,7 +425,7 @@ export class BrowseService {
           return {
             name: miRNA,
             url: `https://exbio.wzw.tum.de/sponge-files/miRNA_bed_files/${miRNA}.bed.gz`,
-            indexUrl: `https://exbio.wzw.tum.de/sponge-files/miRNA_bed_files/${miRNA}.bed.gz.tbi`,
+            indexURL: `https://exbio.wzw.tum.de/sponge-files/miRNA_bed_files/${miRNA}.bed.gz.tbi`,
             format: 'bed',
             type: 'annotation',
             height: 30,