diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index 2540115de2fbe9e887e0d9c196a689fe62a35e08..3a662520e9938b33f45330b0653f93e44fb4f943 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -161,6 +161,7 @@ export default {
},
},
created() {
+ this.$store.dispatch('fetchTables');
this.getQueueStatus();
},
methods: {
diff --git a/client/pages/gwas.vue b/client/pages/gwas.vue
index ab5839b98afb1694be3d54e4d4d2c4b37afd4bb3..942a6aa723067010fd710f2b46a480151bfb95c5 100644
--- a/client/pages/gwas.vue
+++ b/client/pages/gwas.vue
@@ -3,33 +3,33 @@
<div class="header">
<h1>Genome-wide analysis parameters</h1>
<p>
- Please select the traits you want to analyze jointly with the Omnibus test. A research box bellow allows you to query our current database. The maximum number of trait that can be analyzed jointly is 64 traits. Computation time for a large number of trait can take up to half an hour.
+ Please select the phenotypes you want to analyze jointly with the Omnibus test. A research box bellow allows you to query our current database. The maximum number of trait that can be analyzed jointly is 64 phenotypes. Computation time for a large number of trait can take up to half an hour.
</p>
</div>
<section>
<h2>Select an ancestry:</h2>
- <div class="initmeta-card-list">
+ <div class="init-table-card-list">
<v-card
- v-for="meta in initMetaList"
- :key="meta.name"
- class="initmeta-card"
- :class="{ 'selected-table': selectedInitTable === meta.name }"
- :color="selectedInitTable === meta.name ? 'blue lighten-4' : ''">
- <v-card-title>{{ meta.name }}</v-card-title>
- <v-card-text>{{ meta.desc }}</v-card-text>
+ v-for="table in initTables"
+ :key="table.name"
+ class="init-table-card"
+ :class="{ 'selected-table': selectedInitTable === table.name }"
+ :color="selectedInitTable === table.name ? 'blue lighten-4' : ''">
+ <v-card-title>{{ table.name }}</v-card-title>
+ <v-card-text>{{ table.desc }}</v-card-text>
<v-card-text>
<div>
- <strong>{{ meta.nb_snps.toLocaleString() }}</strong>
+ <strong>{{ table.nb_snps.toLocaleString() }}</strong>
SNPS
</div>
<div>
- <strong>{{ meta.nb_phenotypes.toLocaleString() }}</strong>
+ <strong>{{ table.nb_phenotypes.toLocaleString() }}</strong>
phenotypes
</div>
</v-card-text>
<v-card-actions class="card-buttons">
- <v-btn class="button" color="primary" @click="selectAncestry(meta.name)">
+ <v-btn class="button" color="primary" @click="selectAncestry(table.name)">
Select this ancestry
</v-btn>
</v-card-actions>
@@ -71,22 +71,8 @@
<script>
export default {
- async asyncData({ $axios }) {
- return await $axios.$get('/tables')
- .then((initTables) => {
- const initMetaRequests = initTables.map(initTableName => {
- return $axios.$post('/initmeta', { initTableName })
- })
-
- return Promise.all(initMetaRequests)
- })
- .then(initMetaList => {
- return { initMetaList }
- })
- },
data() {
return {
- initMetaList: {},
selectedInitTable: '',
headers: [
{ text: 'Outcome', value: 'outcome' },
@@ -100,6 +86,9 @@ export default {
selectedRows: [],
}
},
+ computed: {
+ initTables() { return this.$store.state.initTables }
+ },
methods: {
selectAncestry(initTableName) {
this.selectedInitTable = initTableName
@@ -161,14 +150,14 @@ section h2 {
text-align: center;
}
-.initmeta-card-list {
+.init-table-card-list {
display: flex;
flex-flow: row wrap;
gap: 20px;
justify-content: center;
}
-.initmeta-card {
+.init-table-card {
width: 400px;
}
diff --git a/client/pages/index.vue b/client/pages/index.vue
index 50fd46f198be6c1283ea623486b7e5082c6ec0a3..24154ae8cf0d40e724c36420a5cb0fbfe66f166f 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -7,8 +7,8 @@
<v-card-text class="main-intro">
The JASS web interface efficiently compute multi-trait genome-wide association study (GWAS) and enable user to interactively explore results.
Multi-trait GWAS can increase statistical power by leveraging pleiotropy, but also can deepen our understanding of SNPs functional effect (for a detailed explanation see the citation box below).
- Currently this website host <b> NNNNNN </b> traits available for analysis with the Omnibus test.
- All GWAS have been pre-processed using the <a href="https://gitlab.pasteur.fr/statistical-genetics/jass_suite_pipeline">JASS pre-processing pipeline</a> and imputation of missing statistics has been conducted using the <a href="https://gitlab.pasteur.fr/statistical-genetics/raiss">RAISS software</a>, resulting in a total of <b> NNNNN </b> SNPs available for analysis.
+ Currently this website host a total of <b>{{ getTotalPhenotypes }}</b> phenotypes available from <b>{{ getTotalTables }}</b> ancestries for analysis with the Omnibus test.
+ All GWAS have been pre-processed using the <a href="https://gitlab.pasteur.fr/statistical-genetics/jass_suite_pipeline">JASS pre-processing pipeline</a> and imputation of missing statistics has been conducted using the <a href="https://gitlab.pasteur.fr/statistical-genetics/raiss">RAISS software</a>, resulting in a total of <b>{{ getTotalSNP }}</b> SNPs available for analysis.
To analyze data in your own facility and/or access supplementary joint analysis tests, please download and install the <a href="https://statistical-genetics.pages.pasteur.fr/jass/">JASS python package.</a>
</v-card-text>
</v-col>
@@ -46,6 +46,7 @@
</template>
<script>
+import { mapGetters } from 'vuex'
import AnalysisCard from "@/components/AnalysisCard.vue"
export default {
@@ -57,7 +58,7 @@ export default {
analyses: [
{
title: 'Genome wide Analysis',
- description: 'Run JASS on a set of traits genome wide, Explore result interactively and download results summary or full genome wide results. Can take up to ~30 to run depending on the number of trait selected.',
+ description: 'Run JASS on a set of phenotypes genome wide, explore result interactively and download results summary or full genome wide results. Can take up to ~30 to run depending on the number of trait selected.',
shortBtn: 'Browse Genome Wide Analysis',
shortDesc: 'Run Analysis',
link: '/gwas',
@@ -68,6 +69,13 @@ export default {
}
]
}
+ },
+ computed: {
+ ...mapGetters([
+ 'getTotalTables',
+ 'getTotalPhenotypes',
+ 'getTotalSNP'
+ ])
}
}
</script>
diff --git a/client/store/index.js b/client/store/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..b3b332bcbd35f9ce5029b8e95e2b0b9e41ff1804
--- /dev/null
+++ b/client/store/index.js
@@ -0,0 +1,53 @@
+// Main store for getting and sharing initTables data
+// across components.
+// https://v2.nuxt.com/docs/directory-structure/store
+
+export const state = () => ({
+ initTables: []
+})
+
+export const getters = {
+ getTotalTables(state) {
+ return state.initTables.length
+ },
+ getTotalPhenotypes(state) {
+ return state.initTables.reduce((total, table) => {
+ if (typeof (table.nb_phenotypes) === 'number') {
+ return total + table.nb_phenotypes
+ } else {
+ return total
+ }
+ }, 0)
+ },
+ getTotalSNP(state) {
+ return state.initTables.reduce((total, table) => {
+ if (typeof (table.nb_snps) === 'number') {
+ return total + table.nb_snps
+ } else {
+ return total
+ }
+ }, 0)
+ },
+}
+
+export const mutations = {
+ setInitTables(state, initTables) {
+ state.initTables = initTables
+ }
+}
+
+export const actions = {
+ async fetchTables({ commit }) {
+ return await this.$axios.$get('/tables')
+ .then((initTables) => {
+ const initMetaRequests = initTables.map(initTableName => {
+ return this.$axios.$post('/initmeta', { initTableName })
+ })
+
+ return Promise.all(initMetaRequests)
+ })
+ .then(initTables => {
+ commit('setInitTables', initTables)
+ })
+ }
+}