Put the init tables in a store to have access everywhere

client/layouts/default.vue

@@ -161,6 +161,7 @@ export default {
     },
   },
   created() {
+    this.$store.dispatch('fetchTables');
     this.getQueueStatus();
   },
   methods: {

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;
 }
 

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>

client/store/index.js

+// 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)
+      })
+  }
+}