Skip to content

Commit f5a5ff9

Browse files
strasserlestrasserle
committed
progressed with spongeffects network, changed spongeffects heatmap from expression to spongeffects score
1 parent 7348973 commit f5a5ff9

File tree

20 files changed

+2727
-1345
lines changed

20 files changed

+2727
-1345
lines changed

‎package-lock.json‎

Lines changed: 2501 additions & 1114 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"@sigma/export-image": "^3.0.0",
2929
"@sigma/node-square": "^3.0.0",
3030
"@visa-ge/ng-igv": "^0.0.11",
31-
"file-saver": "^2.0.5",
31+
"file-saver-es": "^2.0.5",
3232
"graphology": "^0.25.4",
3333
"graphology-layout-force": "^0.2.4",
3434
"katex": "^0.16.21",
@@ -46,6 +46,7 @@
4646
"@angular/cli": "^19.2.7",
4747
"@angular/compiler-cli": "^19.2.6",
4848
"@types/file-saver": "^2.0.7",
49+
"@types/file-saver-es": "^2.0.3",
4950
"@types/jasmine": "~5.1.0",
5051
"@types/katex": "^0.16.7",
5152
"@types/lodash": "^4.17.16",

‎src/app/components/heatmap-plot/heatmap-plot.component.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,8 @@ export class ReusableHeatmapComponent implements OnDestroy {
113113
const samples = this.extractSamples(data);
114114

115115
// Create base heatmap
116-
const heatmapTrace = this.createHeatmapTrace(data);
116+
const heatmapTrace = this.createHeatmapTrace(data, params.value_key);
117+
console.log('Heatmap trace:', heatmapTrace);
117118

118119
// Determine if we need to show subtypes
119120
let plotData: any = [heatmapTrace];
@@ -140,10 +141,10 @@ export class ReusableHeatmapComponent implements OnDestroy {
140141
return [...new Set(data.map(e => ({ sample_ID: e.sample_ID, disease_subtype: e.disease_subtype || 'NA' })))];
141142
}
142143

143-
private createHeatmapTrace(data: any[]) {
144+
private createHeatmapTrace(data: any[], value_key?: string) {
144145
const dataSource = this.dataSource();
145146
return {
146-
z: data.map(e => e.expr_value),
147+
z: value_key ? data.map(e => e[value_key]) : data.map(e => e.expr_value),
147148
x: data.map(e => e.sample_ID),
148149
y: data.map(e => 'gene' in e ? e.gene.gene_symbol : (e.transcript ? e.transcript.enst_number : e.id)),
149150
type: 'heatmap',

‎src/app/constants.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const SUBTYPE_DEFAULT = 'Unspecific';
22

3-
export const API_BASE = 'https://exbio.wzw.tum.de/sponge-api';
4-
// export const API_BASE = 'http://127.0.0.1:5555/sponge-api';
3+
// export const API_BASE = 'https://exbio.wzw.tum.de/sponge-api';
4+
export const API_BASE = 'http://127.0.0.1:5555/sponge-api';
55

66
export const AS_DESCRIPTIONS: { [key: string]: string } = {
77
SE: 'Skipping Exon',

‎src/app/interfaces.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Data } from "@angular/router";
2-
import { List } from "lodash";
32

43
export interface Dataset {
54
data_origin: string;
@@ -119,6 +118,7 @@ export interface TranscriptInteraction extends SpongeRun {
119118
export interface BrowseQuery {
120119
level: 'gene' | 'transcript';
121120
dataset: Dataset;
121+
ensemblID?: string[];
122122
showOrphans: boolean;
123123
sortingDegree: boolean;
124124
sortingEigenvector: boolean;
@@ -374,6 +374,7 @@ export interface SpongEffectsTranscriptModules {
374374
mean_gini_decrease: number;
375375
mean_accuracy_decrease: number;
376376
spongEffects_run_ID: number;
377+
enrichment_score?: number;
377378
}
378379

379380
export interface SpongEffectsTranscriptModuleMembers {
@@ -394,6 +395,8 @@ export interface SpongEffectsModule {
394395
meanGiniDecrease: number;
395396
meanAccuracyDecrease: number;
396397
spongEffects_run_ID: number;
398+
spongEffects_module_ID: number;
399+
enrichment_score?: number;
397400
}
398401

399402
export interface ModuleMember {

‎src/app/routes/browse/form/form.component.html‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,29 @@
11
<form [formGroup]="formGroup" style="margin: 10px">
2-
@if (!activeDataset()) {
2+
@if (!fixedDataset()) {
33
<app-disease-selector (selected)="activeDataset.set($event)" [diseases$]="diseases$()"></app-disease-selector>
4-
} @else {
5-
<mat-form-field appearance="outline" class="full-width">
4+
} @else {
5+
<mat-form-field appearance="outline" style="width: 100%;">
66
<mat-label>Disease</mat-label>
7-
<input matInput [value]="fixedDataset()?.disease_name" readonly>
7+
<input matInput [value]="capitalize(fixedDataset()?.disease_name)" readonly>
88
</mat-form-field>
99
}
1010
@if (version() > 1) {
11-
<div class="card-container">
12-
<mat-button-toggle-group formControlName="level">
13-
<mat-button-toggle value="gene">Genes</mat-button-toggle>
14-
<mat-button-toggle value="transcript">Transcripts</mat-button-toggle>
15-
</mat-button-toggle-group>
16-
</div>
11+
@if (!fixedLevel()) {
12+
<div class="card-container">
13+
<mat-button-toggle-group formControlName="level">
14+
<mat-button-toggle value="gene">Genes</mat-button-toggle>
15+
<mat-button-toggle value="transcript">Transcripts</mat-button-toggle>
16+
</mat-button-toggle-group>
17+
</div>
18+
} @else {
19+
<div class="card-container">
20+
<!-- show a button toggle form group just like when no level is fixed but without functionality just to show which level is fixed -->
21+
<mat-button-toggle-group formControlName="level" [disabled]="!!fixedLevel">
22+
<mat-button-toggle value="gene" disabled>Genes</mat-button-toggle>
23+
<mat-button-toggle value="transcript" disabled>Transcripts</mat-button-toggle>
24+
</mat-button-toggle-group>
25+
</div>
26+
}
1727
}
1828

1929
<mat-accordion>
@@ -38,7 +48,7 @@
3848
<li><b>Betweenness: </b>
3949
<p [innerHTML]="infoService.betweennessText"></p>
4050
</li>
41-
<li><b>Degree:</b>
51+
<li><b>Degree:</b>`
4252
<p [innerHTML]="infoService.degreeText"></p>
4353
</li>
4454
<li><b>Eigenvector: </b>
@@ -165,12 +175,12 @@
165175
</app-info>
166176
<mat-form-field appearance="outline">
167177
<mat-label>Max. adj. p-value</mat-label>
168-
<input formControlName="maxPValue" matInput max="0.2" min="0.025" step="0.025" type="number" />
178+
<input formControlName="maxPValue" matInput max="1" min="0" step="0.025" type="number" />
169179
@if (formGroup.get('maxPValue')?.hasError('min')) {
170-
<mat-error>Value must be at least 0.025</mat-error>
180+
<mat-error>Value must be at least 0</mat-error>
171181
}
172182
@if (formGroup.get('maxPValue')?.hasError('max')) {
173-
<mat-error>Value must be at most 0.2</mat-error>
183+
<mat-error>Value must be at most 1</mat-error>
174184
}
175185
</mat-form-field>
176186
<app-info type="icon">
@@ -179,12 +189,12 @@
179189
</app-info>
180190
<mat-form-field appearance="outline">
181191
<mat-label>Min. MScor</mat-label>
182-
<input formControlName="minMscor" matInput max="1" min="0.1" step="0.05" type="number" />
192+
<input formControlName="minMscor" matInput max="2" min="0" step="0.05" type="number" />
183193
@if (formGroup.get('minMscor')?.hasError('min')) {
184-
<mat-error>Value must be at least 0.1</mat-error>
194+
<mat-error>Value must be at least 0</mat-error>
185195
}
186196
@if (formGroup.get('minMscor')?.hasError('max')) {
187-
<mat-error>Value must be at most 1</mat-error>
197+
<mat-error>Value must be at most 2</mat-error>
188198
}
189199
</mat-form-field>
190200
<app-info type="icon">

‎src/app/routes/browse/form/form.component.ts‎

Lines changed: 45 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
OnInit,
1111
signal,
1212
viewChild,
13+
WritableSignal,
1314
} from '@angular/core';
1415
import { MatFormFieldModule } from '@angular/material/form-field';
1516
import { MatSelectModule } from '@angular/material/select';
@@ -24,7 +25,7 @@ import { MatInputModule } from '@angular/material/input';
2425
import { BrowseQuery, InteractionSorting, Dataset } from '../../../interfaces';
2526
import { BrowseService } from '../../../services/browse.service';
2627
import { VersionsService } from '../../../services/versions.service';
27-
import _ from 'lodash';
28+
import {capitalize} from 'lodash';
2829
import {
2930
MatButtonToggle,
3031
MatButtonToggleGroup,
@@ -62,9 +63,10 @@ export class FormComponent implements OnInit {
6263
browseService = input.required<BrowseService>();
6364
version = this.versionsService.versionReadOnly();
6465
diseases$ = computed(() => this.versionsService.diseases$().value() ?? []);
65-
activeDataset = linkedSignal(() => this.diseases$()[0]);
6666
fixedDataset = input<Dataset | undefined>();
67-
// default thresholds should be different in spongeffects form
67+
fixedLevel = input<(() => 'gene' | 'transcript') | undefined>();
68+
activeDataset: WritableSignal<Dataset | undefined> = this.fixedDataset ? linkedSignal(() => this.fixedDataset()) : linkedSignal(() => this.diseases$()[0]);
69+
// default thresholds should be different in spongeffects form
6870
defaultMinDegree = input<number | undefined>();
6971
defaultMinBetweenness = input<number | undefined>();
7072
defaultMinEigen = input<number | undefined>();
@@ -84,7 +86,7 @@ export class FormComponent implements OnInit {
8486
Validators.min(0),
8587
Validators.max(100),
8688
]),
87-
minDegree: new FormControl<number>(0, [
89+
minDegree: new FormControl<number>(1, [
8890
Validators.min(0),
8991
Validators.max(100),
9092
]),
@@ -104,21 +106,21 @@ export class FormComponent implements OnInit {
104106
Validators.max(1000),
105107
]),
106108
maxPValue: new FormControl<number>(0.05, [
107-
Validators.min(0.025),
108-
Validators.max(0.2),
109+
Validators.min(0),
110+
Validators.max(1),
109111
]),
110112
minMscor: new FormControl<number>(0.1, [
111-
Validators.min(0.1),
112-
Validators.max(1),
113+
Validators.min(0),
114+
Validators.max(2),
113115
]),
114116
});
115117

116-
protected readonly capitalize = _.capitalize;
118+
protected readonly capitalize = capitalize;
117119

118120
ngOnInit() {
119121
// if specific defaults are set (eg spongeffects)
120122
this.formGroup.patchValue({
121-
minDegree: this.defaultMinDegree(),
123+
minDegree: this.defaultMinDegree() ?? 1,
122124
minBetweenness: this.defaultMinBetweenness() ?? 0.05,
123125
minEigen: this.defaultMinEigen() ?? 0.1,
124126
maxPValue: this.defaultMaxPValue() ?? 0.05,
@@ -164,6 +166,39 @@ export class FormComponent implements OnInit {
164166
effect(() => {
165167
this.infoService.renderMscorEquation(this.mscorEquation$()!);
166168
});
169+
170+
effect(() => {
171+
if (this.fixedLevel()) {
172+
this.formGroup.get('level')?.setValue(this.fixedLevel()!(), { emitEvent: true });
173+
// this.browseService().runQuery({
174+
// ...formSignal(),
175+
// level: this.fixedLevel()!(),
176+
// dataset: this.activeDataset()!,
177+
// ensemblID: this.exploreService().ensemblID(),
178+
// } as BrowseQuery);
179+
// } else {
180+
// const dataset = this.activeDataset();
181+
// const config = formSignal();
182+
// if (dataset === undefined) return;
183+
// this.browseService().runQuery({
184+
// ...config,
185+
// level: this.fixedLevel()!(),
186+
// dataset: dataset,
187+
// showOrphans: config.showOrphans ?? false,
188+
// sortingBetweenness: config.sortingBetweenness ?? false,
189+
// sortingDegree: config.sortingDegree ?? false,
190+
// sortingEigenvector: config.sortingEigenvector ?? false,
191+
// maxNodes: config.maxNodes ?? 10,
192+
// minDegree: config.minDegree ?? 1,
193+
// minBetweenness: config.minBetweenness ?? 0.05,
194+
// minEigen: config.minEigen ?? 0.1,
195+
// maxInteractions: config.maxInteractions ?? 100,
196+
// maxPValue: config.maxPValue ?? 0.05,
197+
// minMscor: config.minMscor ?? 0.1,
198+
// interactionSorting: (config.interactionSorting ?? this.getKeys(this.interactionSortings)[0]) as InteractionSorting,
199+
// });
200+
}
201+
});
167202
}
168203

169204
getKeys(enumType: any): string[] {

‎src/app/routes/documentation/example-script/example-script.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { HighlightPlusModule } from 'ngx-highlightjs/plus';
33
import { Highlight } from 'ngx-highlightjs';
44
import { HttpService } from '../../../services/http.service';
55
import { AsyncPipe } from '@angular/common';
6-
import FileSaver from 'file-saver';
6+
import { saveAs } from 'file-saver-es';
77
import { MatButton } from '@angular/material/button';
88
import { MatIcon } from '@angular/material/icon';
99
import { VersionsService } from '../../../services/versions.service';
@@ -26,7 +26,7 @@ export class ExampleScriptComponent {
2626
async download() {
2727
const content = await this.content$;
2828
const file = new File([content], this.file);
29-
FileSaver.saveAs(file);
29+
saveAs(file);
3030
}
3131

3232
async copy() {

‎src/app/routes/spongeffects/explore/explore.component.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,18 @@
22
<mat-drawer [opened]="true" mode="side">
33
<app-explore-form></app-explore-form>
44
@if (selectedTabIndex() == 3 && selectedVis() === 'network') {
5-
<hr style="margin: 266.5px 0 20px 0; width: 100%;" />
5+
<!-- set a vertical line with linePos as vertical offset relative to the viewport -->
6+
<!-- <hr style="position: absolute; width: 100%;" [style.top.px]="lineTop()" /> -->
7+
<hr style="margin: 257px 0 30px 0; width: 99%;" #sectionLine />
68
<app-form
79
[browseService]="browseService"
810
[fixedDataset]="exploreService.selectedDiseaseObject$()"
11+
[fixedLevel]="exploreService.level$"
912
[defaultMinBetweenness]="0"
1013
[defaultMinDegree]="1"
1114
[defaultMinEigen]="0"
12-
[defaultMaxPValue]="0.2"
13-
[defaultMinMscor]="0.1"
15+
[defaultMaxPValue]="1"
16+
[defaultMinMscor]="0"
1417
>
1518
</app-form>
1619
}

‎src/app/routes/spongeffects/explore/explore.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ import { ExploreBrowseService } from '../../../services/explore.browse.service';
5151
export class ExploreComponent {
5252
refreshSignal = signal<number>(0);
5353
exploreService = inject(ExploreService)
54+
lineTop = this.exploreService.lineTop;
5455
selectedTabIndex = signal<number>(0);
5556
selectedVis = this.exploreService.selectedVis;
5657

0 commit comments

Comments
 (0)