Use the table filenames instead of the metadata name field

client/pages/gwas.vue

@@ -11,25 +11,25 @@
       <h2>Select an ancestry:</h2>
       <div class="init-table-card-list">
         <v-card
-          v-for="table in initTables"
-          :key="table.name"
+          v-for="(tableMeta, fileName) in initTables"
+          :key="fileName"
           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>
+          :class="{ 'selected-table': selectedInitTable === fileName }"
+          :color="selectedInitTable === fileName ? 'blue lighten-4' : ''">
+          <v-card-title>{{ tableMeta.name }}</v-card-title>
+          <v-card-text>{{ tableMeta.desc }}</v-card-text>
           <v-card-text>
             <div>
-              <strong>{{ table.nb_snps.toLocaleString() }}</strong>
+              <strong>{{ tableMeta.nb_snps.toLocaleString() }}</strong>
               SNPS
             </div>
             <div>
-              <strong>{{ table.nb_phenotypes.toLocaleString() }}</strong>
+              <strong>{{ tableMeta.nb_phenotypes.toLocaleString() }}</strong>
               phenotypes
             </div>
           </v-card-text>
           <v-card-actions class="card-buttons">
-            <v-btn class="button" color="primary" @click="selectAncestry(table.name)">
+            <v-btn class="button" color="primary" @click="selectAncestry(fileName)">
               Select this ancestry
             </v-btn>
           </v-card-actions>

client/store/index.js

@@ -3,15 +3,15 @@
 // https://v2.nuxt.com/docs/directory-structure/store
 
 export const state = () => ({
-  initTables: []
+  initTables: {}
 })
 
 export const getters = {
   getTotalTables(state) {
-    return state.initTables.length
+    return Object.keys(state.initTables).length
   },
   getTotalPhenotypes(state) {
-    return state.initTables.reduce((total, table) => {
+    return Object.values(state.initTables).reduce((total, table) => {
       if (typeof (table.nb_phenotypes) === 'number') {
         return total + table.nb_phenotypes
       } else {
@@ -20,7 +20,7 @@ export const getters = {
     }, 0)
   },
   getTotalSNP(state) {
-    return state.initTables.reduce((total, table) => {
+    return Object.values(state.initTables).reduce((total, table) => {
       if (typeof (table.nb_snps) === 'number') {
         return total + table.nb_snps
       } else {
@@ -38,15 +38,23 @@ export const mutations = {
 
 export const actions = {
   async fetchTables({ commit }) {
+    const initTables = {}
+
     return await this.$axios.$get('/tables')
-      .then((initTables) => {
-        const initMetaRequests = initTables.map(initTableName => {
-          return this.$axios.$post('/initmeta', { initTableName })
+      .then((initTablesList) => {
+        const initMetaRequests = initTablesList.map(initTableName => {
+          return this.$axios
+            .$post('/initmeta', { initTableName })
+            .then(initMeta => {
+              initTables[initTableName] = initMeta
+            })
         })
 
         return Promise.all(initMetaRequests)
       })
-      .then(initTables => {
+      .then(() => {
+        // Store the initTables all at once to avoid partial fetching
+        // if one of the previous requests fail.
         commit('setInitTables', initTables)
       })
   }