From 1d8f6cafdab3fd6705f25a73978be1c58743df18 Mon Sep 17 00:00:00 2001 From: Eliot Ragueneau Date: Mon, 5 Aug 2024 17:04:28 +0100 Subject: [PATCH] :bug: Update to new version of human experiment + support any species from Expression Atlas + poxy cof to make GXA work locally --- package.json | 2 +- proxy-gxa.conf.json | 11 +++ .../complex-details.component.html | 3 +- .../complex-expression.component.ts | 24 +++--- .../gxa-heatmap/gxa-heatmap.component.ts | 73 +++++++------------ 5 files changed, 52 insertions(+), 61 deletions(-) create mode 100644 proxy-gxa.conf.json diff --git a/package.json b/package.json index 4472a04a..67a97ad9 100644 --- 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 new file mode 100644 index 00000000..493a8f5e --- /dev/null +++ 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 index a2de9baf..074e0544 100644 --- 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">
- 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 index 665a7467..81a30c9f 100644 --- 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 index c7691a5f..d7412471 100644 --- 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([ + ['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; }