diff --git a/client/pages/gwas.vue b/client/pages/gwas.vue index c77ac5526994823e903b4877a96d2c1f2bbd43e0..7d31240511967d10bc0798f2e68986dd457e709b 100644 --- a/client/pages/gwas.vue +++ b/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> diff --git a/client/store/index.js b/client/store/index.js index b3b332bcbd35f9ce5029b8e95e2b0b9e41ff1804..4db8b3b07c46ce608a97726b04a422187122da87 100644 --- a/client/store/index.js +++ b/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) }) }