Skip to content

Commit 947a073

Browse files
moriondo2022moriondo2022
authored
Merge pull request #1025 from broadinstitute/sysbio-single-enrichr
Sysbio single enrichr
2 parents 716359c + bc70ce9 commit 947a073

File tree

5 files changed

+40
-49
lines changed

5 files changed

+40
-49
lines changed

‎src/portals/SysBio/components/BulkTable.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -333,6 +333,9 @@ export default Vue.component("bulk-table", {
333333
},
334334
async currentData(newData){
335335
console.log("Current data received");
336+
},
337+
allGenes(newData){
338+
this.$emit("allGenes", newData);
336339
}
337340
}
338341
});

‎src/portals/SysBio/components/BulkVolcanoPlot.vue‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,13 @@ export default Vue.component("bulk-volcano-plot", {
185185
.style("text-anchor", "middle")
186186
187187
let amp = this.$store.state?.selectedAMP || null;
188+
if (this.sectionId.startsWith("_bulk")){
189+
let index = this.sectionId.at(-1);
190+
let comp = index === "1"
191+
? this.$store.state.selectedComp1
192+
: this.$store.state.selectedComp2;
193+
amp = this.$store.state.currentComparisons[comp].label;
194+
}
188195
let upregulatedIn = !!amp ? amp.split("vs")[0] : "";
189196
if (!!amp){
190197
this.svg.select("#axisLabelsGroup")
@@ -206,14 +213,14 @@ export default Vue.component("bulk-volcano-plot", {
206213
this.svg.append("text")
207214
.attr('text-anchor', 'middle')
208215
.attr("x", (margin.left + (width / 2)))
209-
.attr("y", (height + margin.bottom + margin.top - 14))
216+
.attr("y", (height + margin.bottom / 2 + 10))
210217
.style("font-family", "Arial").style("font-size", 14)
211218
.text(this.renderConfig['x axis label']);
212219
213220
this.svg.append("text")
214221
.attr('text-anchor', 'middle')
215-
.attr("x", -(margin.top+(height/2)))
216-
.attr("y", 14)
222+
.attr("x", -((height/2)))
223+
.attr("y", 55)
217224
.attr("transform", "rotate(-90)")
218225
.style("font-family", "Arial").style("font-size", 14)
219226
.text(this.renderConfig['y axis label']);

‎src/portals/SysBio/components/EnrichrPlot.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -637,7 +637,7 @@ export default Vue.component("enrichr-plot", {
637637
let dotIndex = -0.5;
638638
639639
let barWidth = ((canvasWidth - (plotMargin.left + plotMargin.right))/totalNum) - 10;
640-
barWidth = barWidth <= 4 ? 4 : barWidth >= 80? 80 : barWidth;
640+
barWidth = barWidth <= 4 ? 4 : barWidth >= 160 ? 160 : barWidth;
641641
642642
if (totalNum >0) {
643643
for (const [key, value] of Object.entries(renderData)) {

‎src/portals/SysBio/views/Comparator/Template.vue‎

Lines changed: 18 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,8 @@
230230
:scatterConfig="$parent.scatterplotConfig"
231231
:highlightedGene="$store.state.selectedGene"
232232
:regulationConditions="$parent.regulationConditions"
233-
:isCompPage="true">
233+
:isCompPage="true"
234+
@allGenes="genes => $parent.getAllGenes(genes)">
234235
</bulk-table>
235236
</div>
236237
</div>
@@ -248,9 +249,7 @@
248249
<div class="tab-section">
249250
<div class="row">
250251
<p id="enrichr-explain">The top 10 pathways from the selected gene set library are provided
251-
for all differentially expressed genes from the above-selected dataset
252-
and p-value filters (<strong>{{ $parent.upGenes.length }}</strong> upregulated,
253-
<strong>{{ $parent.downGenes.length}}</strong> downregulated genes).
252+
for all differentially expressed genes from the table above.
254253
If you use data from this tool, please review our <a href="/about.html?page=policies">Citation
255254
Policies</a> to ensure proper citation of the underlying resource(s)
256255
used to generate these analyses.</p>
@@ -328,42 +327,21 @@
328327
<div id="enrichr">
329328
<div class="tabs-group">
330329
<div class="tabs-section-wrapper">
331-
<div class="tab-section" >
332-
<div class="flex-gap">
333-
<div class="wide-block">
334-
<enrichr-plot
335-
v-if="$parent.enrichrReady && $parent.dataReady"
336-
ref="DownregulatedGenes"
337-
:phenotypesData="$parent.enrichrDown"
338-
:colors="$parent.colors"
339-
:colorScale="$parent.enrichrColorScale"
340-
canvasId="Downregulated"
341-
:utils="$parent.utils"
342-
:truncate="$parent.truncateEnrichr"
343-
></enrichr-plot>
344-
</div>
345-
</div>
346-
</div>
347-
</div>
348-
</div>
349-
<div class="tabs-group">
350-
<div class="tabs-section-wrapper">
351-
<div class="tab-section" >
352-
<div class="flex-gap">
353-
<div class="wide-block">
354-
<enrichr-plot
355-
v-if="$parent.enrichrReady && $parent.dataReady"
356-
ref="UpregulatedGenes"
357-
:phenotypesData="$parent.enrichrUp"
358-
:colors="$parent.colors"
359-
:colorScale="$parent.enrichrColorScale"
360-
canvasId="Upregulated"
361-
:utils="$parent.utils"
362-
:truncate="$parent.truncateEnrichr"
363-
></enrichr-plot>
364-
</div>
330+
<div class="tab-section">
331+
<enrichr-plot
332+
v-if="$parent.enrichrReady && $parent.dataReady"
333+
:phenotypesData="$parent.enrichrDown"
334+
:colors="$parent.colors"
335+
:colorScale="$parent.enrichrColorScale"
336+
canvasId="Top"
337+
:utils="$parent.utils"
338+
:truncate="$parent.truncateEnrichr"
339+
></enrichr-plot>
340+
<div v-else>
341+
Loading ENRICHR data...
342+
</div>
343+
365344
</div>
366-
</div>
367345
</div>
368346
</div>
369347
</div>
@@ -461,8 +439,7 @@
461439
display: flex;
462440
}
463441
#enrichr .tabs-group{
464-
width: 680px;
465-
height: 345px;
442+
width: 100%;
466443
}
467444
468445
.legends {

‎src/portals/SysBio/views/Comparator/main.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,8 @@ new Vue({
108108
x1: "logFoldChange_1",
109109
x2: "logFoldChange_2",
110110
y1: "minusLog10P_1",
111-
y2: "minusLog10P_2"
111+
y2: "minusLog10P_2",
112+
allGenes: []
112113
};
113114
},
114115
computed: {
@@ -284,10 +285,8 @@ new Vue({
284285
},
285286
async populateEnrichr(){
286287
this.enrichrReady = false;
287-
this.enrichrUp = [];
288288
this.enrichrDown = [];
289-
this.enrichrUp = await getEnrichr(this.upGenes, this.enrichrLibrary, this.truncateEnrichr);
290-
this.enrichrDown = await getEnrichr(this.downGenes, this.enrichrLibrary, this.truncateEnrichr);
289+
this.enrichrDown = await getEnrichr(this.allGenes, this.enrichrLibrary, this.truncateEnrichr);
291290
this.enrichrColorScale = createColorScale(this.colorScaleEndpoints, [ACCESSIBLE_DARK_GRAY, ACCESSIBLE_PURPLE]);
292291
this.enrichrReady = true;
293292
},
@@ -417,6 +416,11 @@ new Vue({
417416
};
418417
return config;
419418
},
419+
async getAllGenes(genes){
420+
this.allGenes = genes;
421+
console.log("Genes received", JSON.stringify(genes));
422+
await this.populateEnrichr();
423+
}
420424
},
421425
watch: {
422426
async selectedDataset(newData, oldData) {

0 commit comments

Comments
 (0)