🐛 Update to new version of human experiment + support any species fro…

…m Expression Atlas + poxy cof to make GXA work locally
Complex-Portal · Aug 5, 2024 · 1d8f6ca · 1d8f6ca
1 parent 4dea8a7
commit 1d8f6ca
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 61 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "ng-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng",
     "ng": "ng",
-    "start": "ng serve",
+    "start": "export NODE_OPTIONS=--openssl-legacy-provider; ng serve --proxy-config proxy-gxa.conf.json",
     "start-with-proxy": "ng serve --proxy-config proxy.conf.json",
     "publish-gh-pages": "rm -rf dist; node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --output-path=dist --configuration production --base-href \"https://complex-portal.github.io/complex-portal-view/\"; sudo ngh -r https://github.com/Complex-Portal/complex-portal-view",
     "publish-test-gh-pages": "rm -rf dist; node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng build --output-path=dist --configuration test --base-href \"https://complex-portal.github.io/complex-portal-view/\"; sudo ngh -r https://github.com/Complex-Portal/complex-portal-view",

diff --git a/proxy-gxa.conf.json b/proxy-gxa.conf.json
@@ -0,0 +1,11 @@
+{
+  "/gxa/*": {
+    "target": "https://ebi.ac.uk/gxa/",
+    "pathRewrite": {
+      "^/gxa/": ""
+    },
+    "secure": true,
+    "logLevel": "debug",
+    "changeOrigin": true
+  }
+}
diff --git a/src/app/complex/complex-details/complex-details.component.html b/src/app/complex/complex-details/complex-details.component.html
@@ -28,8 +28,9 @@
                                  [assemblies]="complexDetails.complexAssemblies"></cp-complex-properties>
         </div>
         <div id="expression" class="columns medium-12" style="margin-bottom: 30px">
-          <cp-complex-expression *ngIf="complexDetails && gxa;"
+          <cp-complex-expression *ngIf="complexDetails && gxa && complexMIJSON;"
                                  [gxa]="gxa"
+                                 [complexMIJSON]="complexMIJSON"
                                  [participants]="complexDetails.participants"
                                  [complexSpecies]="complexDetails.species"
                                  [crossReferences]="complexDetails.crossReferences"></cp-complex-expression>

diff --git a/src/app/complex/complex-details/complex-expression/complex-expression.component.ts b/src/app/complex/complex-details/complex-expression/complex-expression.component.ts
@@ -1,6 +1,7 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {Participant} from '../../shared/model/complex-details/participant.model';
 import {CrossReference} from '../../shared/model/complex-details/cross-reference.model';
+import {MIJson} from 'complexviewer';
 
 @Component({
   selector: 'cp-complex-expression',
@@ -15,12 +16,15 @@ export class ComplexExpressionComponent implements OnInit {
   private _gxaParamsQueries: string;
   private _goCellularXRefs: CrossReference[];
 
+  @Input()
+  complexMIJSON: MIJson;
+
   constructor() {
   }
 
   ngOnInit() {
     this.findXRefs();
-    this.findGXAQueryies();
+    this.findGXAQueries();
   }
 
   private findXRefs() {
@@ -38,16 +42,14 @@ export class ComplexExpressionComponent implements OnInit {
     }
   }
 
-  private findGXAQueryies() {
-    for (let i = 0; i < this._participants.length; i++) {
-      if (this._participants[i].interactorType === 'protein') {
-        if (this._gxaParamsQueries === undefined) {
-          this.gxaParamsQueries = this._participants[i].identifier;
-        } else {
-          this.gxaParamsQueries += ' ' + this._participants[i].identifier;
-        }
-      }
-    }
+  private findGXAQueries() {
+    this.gxaParamsQueries = [...new Set(this.complexMIJSON.data
+      .filter(e => e.object === 'interactor')
+      .map(e => e.identifier)
+      .filter(i => i.db === 'uniprotkb')
+      .map(i => i.id)
+      .map(id => id.split('-')[0])) // extract canonical id
+    ].join(' ');
   }
 
   get gxa() {

diff --git a/src/app/complex/complex-details/shared/visualisation/gxa-heatmap/gxa-heatmap.component.ts b/src/app/complex/complex-details/shared/visualisation/gxa-heatmap/gxa-heatmap.component.ts
@@ -1,10 +1,12 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {Participant} from '../../../../shared/model/complex-details/participant.model';
+import {SpeciesPipe} from '../../../../shared/pipe/species.pipe';
 
 @Component({
   selector: 'cp-gxa-heatmap',
   templateUrl: 'gxa-heatmap.component.html',
-  styleUrls: ['gxa-heatmap.component.css']
+  styleUrls: ['gxa-heatmap.component.css'],
+  providers: [SpeciesPipe]
 })
 export class GxaHeatmapComponent implements OnInit {
   private _gxa;
@@ -14,48 +16,32 @@ export class GxaHeatmapComponent implements OnInit {
   private _isLoaded = true;
   private _experimentId: string;
 
-  constructor() {
+  constructor(private species: SpeciesPipe) {
   }
 
+  exceptions = new Map<string, string>([
+    ['homo sapiens', 'E-GTEX-8'],
+    ['mus musculus', 'E-MTAB-4644'],
+  ]);
+
   ngOnInit() {
-    switch (this._complexSpecies) {
-      case 'Homo sapiens; 9606':
-        this._experimentId = 'E-MTAB-5214';
-        // this._experimentId = 'E-MTAB-2836';
-        break;
-      case 'Mus musculus; 10090':
-        this._experimentId = 'E-MTAB-4644';
-        break;
-      case 'Rattus norvegicus; 10116':
-        this._experimentId = 'E-GEOD-53960';
-        break;
-      case 'Gallus gallus (Chicken); 9031':
-        this._experimentId = 'E-MTAB-2797';
-        break;
-      case 'Caenorhabditis elegans; 6239':
-        this._experimentId = 'E-MTAB-2812';
-        break;
-      case 'Sus scrofa (Pig); 9823':
-        this._experimentId = 'E-MTAB-5895';
-        break;
-      default:
-        this._isLoaded = false;
-    }
+    this._complexSpecies = this.species.transform(this.complexSpecies, false).toLowerCase();
+
+    this._experimentId = this.exceptions.get(this._complexSpecies);
 
-    if (this._experimentId) {
-      const context = this;
-      this._gxa.render({
-        target: 'highchartsContainer',
-        experiment: this._experimentId,
-        atlasUrl: 'https://www.ebi.ac.uk/gxa/',
-        query: {
-          gene: this.gxaParamsQueries
-        },
-        fail: function () {
-          context._isLoaded = false;
-        }
-      });
-    }
+    const context = this;
+    this._gxa.render({
+      target: 'highchartsContainer',
+      experiment: this._experimentId || 'reference',
+      atlasUrl: 'https://www.ebi.ac.uk/gxa/',
+      query: {
+        gene: this.gxaParamsQueries,
+        species: this._complexSpecies
+      },
+      fail: function () {
+        context._isLoaded = false;
+      }
+    });
   }
 
   get gxa() {
@@ -67,15 +53,6 @@ export class GxaHeatmapComponent implements OnInit {
     this._gxa = value;
   }
 
-  get participants(): Participant[] {
-    return this._participants;
-  }
-
-  @Input()
-  set participants(value: Participant[]) {
-    this._participants = value;
-  }
-
   get complexSpecies(): string {
     return this._complexSpecies;
   }