Skip to content

Commit

Permalink
Mouse fixes (#729)
Browse files Browse the repository at this point in the history 
* y-axis

* loading message

* better but still briefly shows not found message when not appropriate

* shows 'not found' message only when truly not found

* Loading message for diff exp

* p-value filters

* gene page p-value mouse filters

* mouse tissue column on gene page linked to diff exp browser

* mouse Ensembl

* link to human gene page

* defaults to not loading
  • Loading branch information
@moriondo2022
moriondo2022 authored Oct 21, 2024
1 parent 7100851 commit 04ac45e
Show file tree
Hide file tree
Showing 7 changed files with 145 additions and 27 deletions.
32 changes: 26 additions & 6 deletions src/components/MouseSummaryTable.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<div v-if="items.length > 0">
<div v-html="'Total rows: ' + items.length"
<div v-if="rows > 0">
<div v-html="'Total rows: ' + rows"
class="table-total-rows"
></div>
<div class="text-right mb-2">
Expand All @@ -11,26 +11,36 @@
</div>
<b-table
small
:items="items"
:items="filteredData"
:fields="fields"
:sort-by="!isGenePage ? 'gene' : 'tissue'"
:per-page="perPage"
:current-page="currentPage"
:sort-compare="sortRows"
>
<template #cell(tissue)="row">
<a :href="`/mouse_diff_exp.html?gene=${row.item.gene}&tissue=${row.item.tissue}`">
{{ row.item.tissue }}
</a>
</template>
<template #cell(gene)="row">
<a :href="`/mouse_diff_exp.html?gene=${row.item.gene}&tissue=${row.item.tissue}`">
{{ row.item.gene }}
</a>
</template>
<template #cell(gene_id)="row">
<a :href="`https://useast.ensembl.org/Mus_musculus/Gene/Summary?db=core;g=${row.item.gene_id}`">
{{ row.item.gene_id }}
</a>
</template>
<template #cell(gene_region)="row">
{{ `${row.item.chromosome}:${row.item.start}-${row.item.end}` }}
</template>
</b-table>
<b-pagination
v-model="currentPage"
class="pagination-sm justify-content-center"
:total-rows="items.length"
:total-rows="rows"
:per-page="perPage"
>
</b-pagination>
Expand All @@ -46,7 +56,7 @@
components: {
DataDownload,
},
props: ["items", "isGenePage"],
props: ["items", "isGenePage", "filter"],
data() {
return {
perPage: 10,
Expand All @@ -64,7 +74,7 @@
},
{
key: "P_adj_strain_sex",
label: "Adjusted p-value: strain + sex",
label: "Adjusted p-value: strain and sex",
sortable: true
}
],
Expand Down Expand Up @@ -102,6 +112,16 @@
pageParam(){
let field = !this.isGenePage ? "tissue" : "gene";
return this.items[0]?.[field] || '';
},
filteredData(){
let data = structuredClone(this.items);
if (!!this.filter){
data = data.filter(this.filter);
}
return data;
},
rows(){
return this.filteredData.length;
}
},
methods: {
Expand Down
13 changes: 11 additions & 2 deletions src/components/MouseWhiskerPlot.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ export default Vue.component("mouse-whisker-plot", {
yScale: null,
founderScale: null,
tooltip: null,
dividerGray: "#CCCCCC"
dividerGray: "#CCCCCC",
yAxisLabel: "log2( normalized gene expression )"
};
},
mounted() {
Expand Down Expand Up @@ -82,7 +83,7 @@ export default Vue.component("mouse-whisker-plot", {
top: 20,
right: 30,
bottom: 50,
left: 40,
left: 60,
},
width = this.chartWidth - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
Expand Down Expand Up @@ -184,6 +185,14 @@ export default Vue.component("mouse-whisker-plot", {
.tickSizeOuter(0))
.selectAll("text")
.style("font-size", "13px");
this.svg.append("text")
.attr("text-anchor", "middle")
.attr("transform", "rotate(-90)")
.attr("y", -margin.left + 20)
.attr("x", - height / 2 - margin.top)
.text(this.yAxisLabel)
.style("font-size", "13px");
this.svg.selectAll("vertLines")
.data(sumstat)
Expand Down
32 changes: 28 additions & 4 deletions src/views/Gene/Template.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -690,10 +690,34 @@
:content-map="$store.state.bioPortal.documentations"
>
</documentation>
<mouse-summary-table
:items="$store.state.mouseSummary.data"
:is-gene-page="true"
></mouse-summary-table>
<criterion-function-group>
<filter-pvalue-control
field="P_adj_sex"
placeholder="Set P-Value ..."
>
<div class="label">Adjusted p-value: sex (&le;)</div>
</filter-pvalue-control>
<filter-pvalue-control
field="P_adj_strain"
placeholder="Set P-Value ..."
>
<div class="label">Adjusted p-value: strain (&le;)</div>
</filter-pvalue-control>
<filter-pvalue-control
field="P_adj_strain_sex"
placeholder="Set P-Value ..."
>
<div class="label">Adjusted p-value: strain and sex (&le;)</div>
</filter-pvalue-control>
<template slot="filtered" slot-scope="{ filter }">
<mouse-summary-table
:items="$store.state.mouseSummary.data"
:is-gene-page="true"
:filter="filter">
</mouse-summary-table>

</template>
</criterion-function-group>
</div>
</div>
<div class="card mdkp-card">
Expand Down
32 changes: 23 additions & 9 deletions src/views/MouseDiffExp/Template.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,18 +41,14 @@
</div>
<div class="card mdkp-card">
<div class="card-body">
<div>
<h4 v-if="$parent.diffExpData.length > 0">
<div v-if="$parent.diffExpData.length > 0">
<h4>
Differential Expression for
{{ $store.state.gene }} in
{{
$parent.tissueFormatter($store.state.tissue)
}}
</h4>
<div v-else>
No differential expression data found for this
query.
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
Expand All @@ -74,12 +70,24 @@
>
</mouse-diff-exp-table>
</div>
<div v-else-if="!$store.state.gene || !$store.state.tissue">
Select a tissue and a gene to view differential expression data.
</div>
<div v-else-if="!$store.state.loadingExpression">
No differential expression data found for this
query.
</div>
<div v-else>Loading...</div>
</div>
</div>
<div class="card mdkp-card">
<div class="card-body">
<div v-if="$store.state.homologGene.data.length !== 0">
<h4>
Human Homolog {{ $store.state.gene }}
Human Homolog
<a :href="`/gene.html?gene=${$store.state.gene}`">
{{ $store.state.gene }}
</a>
<tooltip-documentation
name="mouse.diff-exp.homolog.tooltip"
:is-hover="true"
Expand Down Expand Up @@ -451,8 +459,14 @@
</template>
</criterion-function-group>
</div>

<div v-else>No human homolog found.</div>
<div v-else>Loading...</div>
</div>
<div v-else-if="!$store.state.gene">
Select a gene to view human homolog data.
</div>
<div v-else-if="!$store.state.loadingGene">
No human homolog found for {{ $store.state.gene }}.
</div>
</div>
</div>
</div>
Expand Down
15 changes: 15 additions & 0 deletions src/views/MouseDiffExp/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ new Vue({
bottom: 300,
},
},
mouseGeneOnly: false,
};
},
computed: {
Expand Down Expand Up @@ -296,6 +297,10 @@ new Vue({
let x = Object.values(hugeMap);
return x;
},
mouseOnly(){
return this.mouseGeneOnly;
}

},
created() {
// get the disease group and set of phenotypes available
Expand Down Expand Up @@ -324,5 +329,15 @@ new Vue({
}, 500);
},
},
watch: {
"$store.state.homologGene"(newGene){
console.log(JSON.stringify(newGene));
this.mouseGeneOnly = false;
if (newGene.data.length === 0){
console.log("data missing");
this.mouseGeneOnly = true;
}
}
},
render: (h) => h(Template),
}).$mount("#app");
17 changes: 15 additions & 2 deletions src/views/MouseDiffExp/store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ export default new Vuex.Store({
tissueToQuery: "",
geneToQuery: "",
selectedAncestry: "",
loadingGene: false,
loadingExpression: false,
},

mutations: {
Expand All @@ -45,6 +47,12 @@ export default new Vuex.Store({
setCommonVariantsLength(state, NUM) {
state.commonVariantsLength = NUM;
},
setLoadingGene(state, loading=true){
state.loadingGene = loading;
},
setLoadingExpression(state, loading=true){
state.loadingExpression = loading;
}
},
getters: {
region(state) {
Expand Down Expand Up @@ -80,8 +88,13 @@ export default new Vuex.Store({
context.state.geneToQuery = geneName;
},
async queryDiffExp(context) {
context.commit("setLoadingExpression");

let gene = context.state.geneToQuery || context.state.gene;
context.commit("setLoadingGene");
context.commit("setGeneName", gene);
await context.dispatch("homologGene/query", {q: gene});
context.commit("setLoadingGene", false);

let tissue = context.state.tissueToQuery || context.state.tissue;
context.commit("setTissueName", tissue);
Expand All @@ -95,12 +108,12 @@ export default new Vuex.Store({
context.dispatch("hugeScores/query", query);
context.dispatch("associations52k/query", query);
context.dispatch("geneassociations/query", query);
context.dispatch("homologGene/query", query);
context.dispatch("geneToTranscript/query", query);
}
if (!!gene && !!tissue) {
context.dispatch("diffExp/query", { q:
await context.dispatch("diffExp/query", { q:
`${gene},${tissue}` });
context.commit("setLoadingExpression", false);
}
},
},
Expand Down
31 changes: 27 additions & 4 deletions src/views/Tissue/Template.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,10 +225,33 @@
:content-map="$store.state.bioPortal.documentations"
>
</documentation>
<mouse-summary-table
:items="$store.state.mouseSummary.data"
>
</mouse-summary-table>
<criterion-function-group>
<filter-pvalue-control
field="P_adj_sex"
placeholder="Set P-Value ..."
>
<div class="label">Adjusted p-value: sex (&le;)</div>
</filter-pvalue-control>
<filter-pvalue-control
field="P_adj_strain"
placeholder="Set P-Value ..."
>
<div class="label">Adjusted p-value: strain (&le;)</div>
</filter-pvalue-control>
<filter-pvalue-control
field="P_adj_strain_sex"
placeholder="Set P-Value ..."
>
<div class="label">Adjusted p-value: strain and sex (&le;)</div>
</filter-pvalue-control>
<template slot="filtered" slot-scope="{ filter }">
<mouse-summary-table
:items="$store.state.mouseSummary.data"
:filter="filter">
</mouse-summary-table>

</template>
</criterion-function-group>
</div>
</div>
<div class="card mdkp-card">
Expand Down

0 comments on commit 04ac45e

Please sign in to comment.