Skip to content

Commit 6f6389e

Browse files
keller-markkeller-mark
committed
Add gene and clinical variable left axis
1 parent 4a95bfd commit 6f6389e

File tree

5 files changed

+215
-52
lines changed

5 files changed

+215
-52
lines changed

‎src/components/ClinicalTracks.vue‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<template>
2+
<div>
3+
<PlotInfo title="Clinical Variables" :style="{'margin-top': '15px'}">
4+
<p slot="info">
5+
This plot shows clinical variables for each sample.
6+
</p>
7+
</PlotInfo>
8+
<div class="clinical-tracks-wrapper">
9+
<div class="clinical-axis-wrapper">
10+
<PlotContainer
11+
:pWidth="0"
12+
:pHeight="(numClinicalVariables * 24.3)"
13+
:pMarginTop="0"
14+
:pMarginLeft="150"
15+
:pMarginRight="0"
16+
:pMarginBottom="10"
17+
>
18+
<Axis
19+
slot="axisLeft"
20+
side="left"
21+
:tickRotation="-25"
22+
variable="clinical_variable"
23+
:getScale="getScale"
24+
:getStack="getStack"
25+
:disableBrushing="true"
26+
/>
27+
</PlotContainer>
28+
</div>
29+
<div v-for="clinicalVar in selectedClinicalVariables" :key="clinicalVar">
30+
<PlotContainer
31+
:pWidth="(colWidth-150-5)"
32+
:pHeight="20"
33+
:pMarginTop="0"
34+
:pMarginLeft="150"
35+
:pMarginRight="5"
36+
:pMarginBottom="5"
37+
>
38+
<TrackPlot
39+
slot="plot"
40+
:data="('cv_' + clinicalVar)"
41+
x="sample_id"
42+
:c="('cv_' + clinicalVar)"
43+
:getData="getData"
44+
:getScale="getScale"
45+
/>
46+
</PlotContainer>
47+
</div>
48+
</div>
49+
</div>
50+
</template>
51+
52+
<script>
53+
import { mapGetters } from 'vuex';
54+
import PlotInfo from './PlotInfo.vue';
55+
56+
export default {
57+
name: 'ClinicalTracks',
58+
components: {
59+
PlotInfo,
60+
},
61+
props: {
62+
'widthProportion': {
63+
type: Number
64+
}
65+
},
66+
computed: {
67+
colWidth() {
68+
return this.windowWidth * this.widthProportion - 25;
69+
},
70+
numClinicalVariables() {
71+
return (this.getConfig().selectedClinicalVariables.length);
72+
},
73+
selectedClinicalVariables() {
74+
return (this.getConfig().selectedClinicalVariables);
75+
},
76+
...mapGetters([
77+
'windowHeight',
78+
'windowWidth',
79+
'getConfig',
80+
'getStack',
81+
'getData',
82+
'getScale'
83+
])
84+
}
85+
}
86+
</script>
87+
88+
<style scoped lang="scss">
89+
@import './../style/variables.scss';
90+
@import '~vue-declarative-plots/dist/vue-declarative-plots.css';
91+
92+
.clinical-tracks-wrapper {
93+
position: relative;
94+
}
95+
96+
.clinical-axis-wrapper {
97+
position: absolute;
98+
}
99+
</style>

‎src/components/Explorer.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,11 @@ export default {
287287
}
288288
289289
/* CLINICAL DATA */
290-
const clinicalVariableScale = new CategoricalScale("clinical_variable", "Clinical Variable", this.getConfig().selectedClinicalVariables);
290+
const clinicalVariableScale = new CategoricalScale(
291+
"clinical_variable",
292+
"Clinical Variable",
293+
this.getConfig().selectedClinicalVariables
294+
);
291295
this.setScale({key:"clinical_variable", scale: clinicalVariableScale});
292296
293297
for(const clinicalVar of this.getConfig().selectedClinicalVariables) {

‎src/components/ExplorerMain.vue‎

Lines changed: 10 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -251,62 +251,19 @@
251251

252252
<!-- Gene Alterations -->
253253
<div v-if="showGenes">
254-
<PlotInfo title="Gene Mutation Classification">
255-
<p slot="info">
256-
This plot shows mutation classification for each selected gene for each sample.
257-
</p>
258-
</PlotInfo>
259-
<div v-for="geneId in selectedGenes" :key="geneId">
260-
<PlotContainer
261-
:pWidth="(colWidth-150-5)"
262-
:pHeight="20"
263-
:pMarginTop="0"
264-
:pMarginLeft="150"
265-
:pMarginRight="5"
266-
:pMarginBottom="5"
267-
>
268-
<TrackPlot
269-
slot="plot"
270-
:data="('gene_' + geneId)"
271-
x="sample_id"
272-
c="mut_class"
273-
:getData="getData"
274-
:getScale="getScale"
275-
/>
276-
</PlotContainer>
277-
</div>
254+
<GeneTracks :widthProportion="widthProportion" />
278255
</div>
279256

280257
<!-- Clinical Variables -->
281258
<div v-if="showClinical">
282-
<PlotInfo title="Clinical Variables">
283-
<p slot="info">
284-
This plot shows clinical variables for each sample.
285-
</p>
286-
</PlotInfo>
287-
<div v-for="clinicalVar in selectedClinicalVariables" :key="clinicalVar">
288-
<PlotContainer
289-
:pWidth="(colWidth-150-5)"
290-
:pHeight="20"
291-
:pMarginTop="0"
292-
:pMarginLeft="150"
293-
:pMarginRight="5"
294-
:pMarginBottom="5"
295-
>
296-
<TrackPlot
297-
slot="plot"
298-
:data="('cv_' + clinicalVar)"
299-
x="sample_id"
300-
:c="('cv_' + clinicalVar)"
301-
:getData="getData"
302-
:getScale="getScale"
303-
/>
304-
</PlotContainer>
305-
</div>
259+
<ClinicalTracks :widthProportion="widthProportion" />
306260
</div>
307261

308262
<!-- Hierarchical Clustering -->
309-
<PlotInfo title="Hierarchical Clustering of Normalized Mutation Signature Exposures">
263+
<PlotInfo
264+
title="Hierarchical Clustering of Normalized Mutation Signature Exposures"
265+
:style="{'margin-top': '15px'}"
266+
>
310267
<p slot="info">
311268
This plot shows normalized exposures to mutation signatures per sample after clustering.<br>
312269
Ward linkage has been used to cluster samples.
@@ -424,11 +381,15 @@
424381
<script>
425382
import { mapGetters } from 'vuex';
426383
import PlotInfo from './PlotInfo.vue';
384+
import ClinicalTracks from './ClinicalTracks.vue';
385+
import GeneTracks from './GeneTracks.vue';
427386
428387
export default {
429388
name: 'ExplorerMain',
430389
components: {
431390
PlotInfo,
391+
ClinicalTracks,
392+
GeneTracks
432393
},
433394
props: {
434395
'widthProportion': {

‎src/components/GeneTracks.vue‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<template>
2+
<div>
3+
<PlotInfo title="Gene Alterations" :style="{'margin-top': '15px'}">
4+
<p slot="info">
5+
This plot shows mutation classification for each selected gene for each sample.
6+
</p>
7+
</PlotInfo>
8+
<div class="gene-tracks-wrapper">
9+
<div class="gene-axis-wrapper">
10+
<PlotContainer
11+
:pWidth="0"
12+
:pHeight="(numGenes * 24.5)"
13+
:pMarginTop="0"
14+
:pMarginLeft="150"
15+
:pMarginRight="0"
16+
:pMarginBottom="10"
17+
>
18+
<Axis
19+
slot="axisLeft"
20+
side="left"
21+
:tickRotation="-25"
22+
variable="gene"
23+
:getScale="getScale"
24+
:getStack="getStack"
25+
:disableBrushing="true"
26+
/>
27+
</PlotContainer>
28+
</div>
29+
<div v-for="geneId in selectedGenes" :key="geneId">
30+
<PlotContainer
31+
:pWidth="(colWidth-150-5)"
32+
:pHeight="20"
33+
:pMarginTop="0"
34+
:pMarginLeft="150"
35+
:pMarginRight="5"
36+
:pMarginBottom="5"
37+
>
38+
<TrackPlot
39+
slot="plot"
40+
:data="('gene_' + geneId)"
41+
x="sample_id"
42+
c="mut_class"
43+
:getData="getData"
44+
:getScale="getScale"
45+
/>
46+
</PlotContainer>
47+
</div>
48+
</div>
49+
</div>
50+
</template>
51+
52+
<script>
53+
import { mapGetters } from 'vuex';
54+
import PlotInfo from './PlotInfo.vue';
55+
56+
export default {
57+
name: 'GeneTracks',
58+
components: {
59+
PlotInfo,
60+
},
61+
props: {
62+
'widthProportion': {
63+
type: Number
64+
}
65+
},
66+
computed: {
67+
colWidth() {
68+
return this.windowWidth * this.widthProportion - 25;
69+
},
70+
numGenes() {
71+
return (this.getConfig().selectedGenes.length);
72+
},
73+
selectedGenes() {
74+
return (this.getConfig().selectedGenes);
75+
},
76+
...mapGetters([
77+
'windowHeight',
78+
'windowWidth',
79+
'getConfig',
80+
'getStack',
81+
'getData',
82+
'getScale'
83+
])
84+
}
85+
}
86+
</script>
87+
88+
<style scoped lang="scss">
89+
@import './../style/variables.scss';
90+
@import '~vue-declarative-plots/dist/vue-declarative-plots.css';
91+
92+
.gene-tracks-wrapper {
93+
position: relative;
94+
}
95+
96+
.gene-axis-wrapper {
97+
position: absolute;
98+
}
99+
</style>

‎yarn.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8243,8 +8243,8 @@ vm-browserify@0.0.4:
82438243
indexof "0.0.1"
82448244

82458245
vue-declarative-plots@^1.0.0:
8246-
version "1.2.8"
8247-
resolved "https://registry.yarnpkg.com/vue-declarative-plots/-/vue-declarative-plots-1.2.8.tgz#c644754a01a134e4343399442a67082566768814"
8246+
version "1.2.9"
8247+
resolved "https://registry.yarnpkg.com/vue-declarative-plots/-/vue-declarative-plots-1.2.9.tgz#feef8c1d5919ab5806ab82e332c9c20141abbff1"
82488248
dependencies:
82498249
colorjoe "^4.1.0"
82508250
d3 "^5.7.0"

0 commit comments

Comments
 (0)