Improve IGV implementation

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",

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>

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>

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',

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,18 +86,13 @@ 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 || [],
   );
   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,