Skip to content

Commit e12e92f

Browse files
nictrunictru
authored
Merge pull request #106 from daisybio/dev
Add psivec to transcript modal
2 parents bde7273 + 7c60f8b commit e12e92f

File tree

4 files changed

+84
-44
lines changed

4 files changed

+84
-44
lines changed

‎src/app/components/transcript-modal/transcript-modal.component.html‎

Lines changed: 42 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,38 @@ <h1 mat-dialog-title>{{ BrowseService.getFullName(transcript) }}</h1>
33
<mat-tab-group [(selectedIndex)]="activeTab$" preserveContent>
44
<mat-tab label="General information">
55
@if (transcriptInfo$.isLoading()) {
6-
<div class="spinner-container">
7-
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
8-
</div>
6+
<div class="spinner-container">
7+
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
8+
</div>
99
}
1010
@if (transcriptInfo$.value(); as transcriptInfo) {
11-
<table>
12-
<tr>
13-
<th>Ensembl ID</th>
14-
<td>{{ transcript.enst_number }}</td>
15-
</tr>
16-
<tr>
17-
<th>Parent gene</th>
18-
<td>
19-
<button (click)="showGene()" mat-button>Show {{ BrowseService.getFullName(transcript.gene) }}</button>
20-
</td>
21-
</tr>
22-
<tr>
23-
<th>Position</th>
24-
<td>{{ transcriptInfo.chromosome_name }}:{{ transcriptInfo.start_pos }}-{{ transcriptInfo.end_pos }}</td>
25-
</tr>
26-
<tr>
27-
<th>Type</th>
28-
<td>{{ transcriptInfo.transcript_type }}</td>
29-
</tr>
30-
<tr>
31-
<th>Canonical</th>
32-
<td>{{ isCanonical$() }}</td>
33-
</tr>
34-
</table>
11+
<table>
12+
<tr>
13+
<th>Ensembl ID</th>
14+
<td>{{ transcript.enst_number }}</td>
15+
</tr>
16+
<tr>
17+
<th>Parent gene</th>
18+
<td>
19+
<button (click)="showGene()" mat-button>Show {{ BrowseService.getFullName(transcript.gene) }}</button>
20+
</td>
21+
</tr>
22+
<tr>
23+
<th>Position</th>
24+
<td>{{ transcriptInfo.chromosome_name }}:{{ transcriptInfo.start_pos }}-{{ transcriptInfo.end_pos }}</td>
25+
</tr>
26+
<tr>
27+
<th>Type</th>
28+
<td>{{ transcriptInfo.transcript_type }}</td>
29+
</tr>
30+
<tr>
31+
<th>Canonical</th>
32+
<td>{{ isCanonical$() }}</td>
33+
</tr>
34+
</table>
3535
}
3636
</mat-tab>
37-
<mat-tab label="Alternative splicing">
37+
<mat-tab label="Alternative splicing" [disabled]="!hasAsEvents$()">
3838
<table [dataSource]="asDatasource" class="mat-elevation-z8" mat-table>
3939
<ng-container matColumnDef="event_type">
4040
<th *matHeaderCellDef mat-header-cell>Type</th>
@@ -52,23 +52,29 @@ <h1 mat-dialog-title>{{ BrowseService.getFullName(transcript) }}</h1>
5252
</td>
5353
</ng-container>
5454

55+
<ng-container matColumnDef="psi">
56+
<th *matHeaderCellDef mat-header-cell>Psivec</th>
57+
<td *matCellDef="let asEntry" mat-cell>
58+
{{ asEntry.psi | async }}
59+
</td>
60+
</ng-container>
61+
5562
<tr *matHeaderRowDef="columns" mat-header-row></tr>
5663
<tr *matRowDef="let row; columns: columns;" mat-row></tr>
5764
</table>
58-
<mat-paginator [pageSizeOptions]="[5, 10]" [pageSize]="5"
59-
aria-label="Select page of users"></mat-paginator>
65+
<mat-paginator [pageSizeOptions]="[5, 10]" [pageSize]="5" aria-label="Select page of users"></mat-paginator>
6066

6167
</mat-tab>
6268

6369
<mat-tab label="Genome view">
6470
@if (miRNAtracks$.isLoading()) {
65-
<div class="spinner-container">
66-
<mat-spinner mode="indeterminate"></mat-spinner>
67-
</div>
71+
<div class="spinner-container">
72+
<mat-spinner mode="indeterminate"></mat-spinner>
73+
</div>
6874
} @else {
69-
<igv [location]="this.location$()" [reference]="IGV_REFGENOME" [refresh]="activeTab$()"
70-
[tracks]="miRNAtracks$.value() || []"></igv>
75+
<igv [location]="this.location$()" [reference]="IGV_REFGENOME" [refresh]="activeTab$()"
76+
[tracks]="miRNAtracks$.value() || []"></igv>
7177
}
7278
</mat-tab>
7379
</mat-tab-group>
74-
</mat-dialog-content>
80+
</mat-dialog-content>

‎src/app/components/transcript-modal/transcript-modal.component.ts‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,10 @@ import { MatTooltip } from '@angular/material/tooltip';
3636
import { AS_DESCRIPTIONS, IGV_REFGENOME } from '../../constants';
3737
import { ModalsService } from '../modals-service/modals.service';
3838
import { Igv, Location } from '@visa-ge/ng-igv';
39+
import { AsyncPipe } from '@angular/common';
3940

4041
interface AsEventWithPsi extends AlternativeSplicingEvent {
41-
psi: number;
42+
psi: Promise<number>;
4243
}
4344

4445
@Component({
@@ -56,6 +57,7 @@ interface AsEventWithPsi extends AlternativeSplicingEvent {
5657
MatProgressSpinner,
5758
MatChip,
5859
MatTooltip,
60+
AsyncPipe,
5961
Igv,
6062
],
6163
templateUrl: './transcript-modal.component.html',
@@ -64,7 +66,7 @@ interface AsEventWithPsi extends AlternativeSplicingEvent {
6466
export class TranscriptModalComponent implements AfterViewInit {
6567
readonly dialog = inject(MatDialog);
6668
paginator = viewChild.required(MatPaginator);
67-
columns = ['event_type', 'event_name'];
69+
columns = ['event_type', 'event_name', 'psi'];
6870

6971
modalsService = inject(ModalsService);
7072
readonly browseService = inject(BrowseService);
@@ -110,13 +112,33 @@ export class TranscriptModalComponent implements AfterViewInit {
110112
return 'Unknown';
111113
}
112114
});
115+
113116
alternativeSplicingEvents = resource({
114-
loader: () => {
115-
return this.backend.getAlternativeSplicingEvents([
117+
loader: async() => {
118+
const asEvents = await this.backend.getAlternativeSplicingEvents([
116119
this.transcript.enst_number,
117120
]);
121+
122+
return asEvents.map((event) => ({
123+
...event,
124+
psi: this.getEventPsi(event.alternative_splicing_event_transcripts_ID),
125+
})) as AsEventWithPsi[];
118126
},
119127
});
128+
129+
async getEventPsi(eventId: number) {
130+
const disease = this.browseService.disease$();
131+
if (!disease) {
132+
return 0;
133+
}
134+
return this.backend.getASPsiValues(this.version$(), eventId, this.transcript.enst_number, disease).then((values) => {
135+
if (values.length === 0) {
136+
return 0;
137+
}
138+
return values.reduce((acc, value) => acc + value.psi_value, 0) / values.length;
139+
});
140+
}
141+
120142
hasAsEvents$ = computed(() => {
121143
return (this.alternativeSplicingEvents.value() || []).length > 0;
122144
});

‎src/app/interfaces.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,7 @@ export interface SpongEffectsGeneModuleMembers {
330330
gene_symbol: string;
331331
};
332332
spongEffects_gene_module_ID: number
333-
spongEffects_gene_module_members_ID: number;
333+
spongEffects_gene_module_members_ID: number;
334334
}
335335

336336
export interface SpongEffectsTranscriptModules {
@@ -348,7 +348,7 @@ export interface SpongEffectsTranscriptModuleMembers {
348348
enst_number: string;
349349
};
350350
spongEffects_gene_module_ID: number
351-
spongEffects_gene_module_members_ID: number;
351+
spongEffects_gene_module_members_ID: number;
352352
}
353353

354354
export interface SpongEffectsModule {
@@ -446,6 +446,13 @@ export interface AlternativeSplicingEvent {
446446
};
447447
}
448448

449+
export interface ASPsiValue {
450+
alternative_splicing_event_transcripts: AlternativeSplicingEvent;
451+
psi_value: number;
452+
psivec_ID: number;
453+
sample_ID: string;
454+
}
455+
449456
export interface MiRNA {
450457
hs_nr: string;
451458
mir_ID: string;

‎src/app/services/backend.service.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
22
import { HttpService } from './http.service';
33
import {
44
AlternativeSplicingEvent,
5+
ASPsiValue,
56
BrowseQuery,
67
CeRNAExpression,
78
CeRNAInteraction,
@@ -710,15 +711,19 @@ export class BackendService {
710711
return 'type' in resp ? resp : undefined;
711712
}
712713

713-
async getASPsiValues(asEventID: number, enst: string) {
714+
async getASPsiValues(version: number, asEventID: number, enst: string, disease: Dataset): Promise<ASPsiValue[]> {
714715
const route = 'alternativeSplicing/getPsiValues';
715716

716717
const query: Query = {
717718
alternative_splicing_event_transcripts_ID: asEventID,
718719
enst_number: enst,
720+
dataset_ID: disease.dataset_ID,
721+
sponge_db_version: version,
719722
};
720723

721-
return this.http.getRequest<number>(this.getRequestURL(route, query));
724+
const resp = await this.http.getRequest<ASPsiValue[]>(this.getRequestURL(route, query));
725+
726+
return 'detail' in resp ? [] : resp;
722727
}
723728

724729
async getGSEAterms(

0 commit comments

Comments
 (0)