From 9ca50215683a4ef3dd9677d6753a0fc996ecd43c Mon Sep 17 00:00:00 2001 From: Kenzo-Hugo Hillion <kenzo-hugo.hillion1@pasteur.fr> Date: Tue, 12 Nov 2019 18:18:35 +0100 Subject: [PATCH] Add link from gene list and deal with no information from kegg and taxonomy --- frontend/src/components/KeggCard.vue | 15 ++++++++++++++- frontend/src/components/TaxonomyCard.vue | 15 ++++++++++++++- frontend/src/views/GeneDetail.vue | 14 ++++++++++++-- frontend/src/views/Genes.vue | 2 +- 4 files changed, 41 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/KeggCard.vue b/frontend/src/components/KeggCard.vue index ad92189..13cf967 100644 --- a/frontend/src/components/KeggCard.vue +++ b/frontend/src/components/KeggCard.vue @@ -7,12 +7,17 @@ KEGG Function </v-toolbar-title> </v-toolbar> - <div class="text-xs-center" v-if="kegg_details.length == 0"> + <div class="text-xs-center" v-if="kegg_id == '' || request_done == false"> <v-progress-circular indeterminate color="genefunction" ></v-progress-circular> </div> + <div v-else-if="kegg_details.length == 0" class="text-xs-center"> + <v-btn block color="tertiary"> + No annotation for this entry + </v-btn> + </div> <v-list v-else> <!-- Basic information about the KEGG KO--> <template v-for="(item, index) in kegg_details"> @@ -136,10 +141,15 @@ export default { kegg_details: [], kegg_expand_details: [], kegg_references: [], + request_done: false, }; }, methods: { getKeggDetail() { + if (this.kegg_id == "no_kegg") { + this.request_done = true; + return; + } axios.get('http://togows.org/entry/kegg-orthology/' + this.kegg_id + '.json', { headers: { Accept: 'application/json', @@ -152,6 +162,9 @@ export default { }) .catch((error) => { console.log(error); + }) + .finally(() => { + this.request_done = true }); }, buildKeggDetails(response) { diff --git a/frontend/src/components/TaxonomyCard.vue b/frontend/src/components/TaxonomyCard.vue index cfe1650..bb392e1 100644 --- a/frontend/src/components/TaxonomyCard.vue +++ b/frontend/src/components/TaxonomyCard.vue @@ -7,12 +7,17 @@ Taxonomy </v-toolbar-title> </v-toolbar> - <div class="text-xs-center" v-if="taxonomy_detail.length == 0"> + <div class="text-xs-center" v-if="taxonomy_id == '' || request_done == false"> <v-progress-circular indeterminate color="taxonomy" ></v-progress-circular> </div> + <div v-else-if="taxonomy_detail.length == 0" class="text-xs-center"> + <v-btn block color="tertiary"> + No annotation for this entry + </v-btn> + </div> <v-list v-else> <template v-for="(item, index) in taxonomy_detail"> <v-divider @@ -46,10 +51,15 @@ export default { data() { return { taxonomy_detail: [], + request_done: false, }; }, methods: { getTaxonomyDetail() { + if (this.taxonomy_id == 'no_taxonomy') { + this.request_done = true; + return; + } axios.get('/api/catalog/v1/taxonomy/' + this.taxonomy_id, { headers: { Accept: 'application/json', @@ -93,6 +103,9 @@ export default { }) .catch((error) => { console.log(error); + }) + .finally(() => { + this.request_done = true }); } } diff --git a/frontend/src/views/GeneDetail.vue b/frontend/src/views/GeneDetail.vue index a9f307d..b0ff4d0 100644 --- a/frontend/src/views/GeneDetail.vue +++ b/frontend/src/views/GeneDetail.vue @@ -95,8 +95,18 @@ export default { content: response.data.length, }, ]; - this.kegg_id = response.data.functions[0].function_id; - this.taxonomy_id = response.data.taxonomy.tax_id; + if (response.data.functions.length > 0) { + this.kegg_id = response.data.functions[0].function_id; + } + else { + this.kegg_id = "no_kegg" + } + if (response.data.taxonomy) { + this.taxonomy_id = response.data.taxonomy.tax_id; + } + else { + this.taxonomy_id = "no_taxonomy" + } }) .catch((error) => { console.log(error); diff --git a/frontend/src/views/Genes.vue b/frontend/src/views/Genes.vue index 2d22aa0..bf13d27 100644 --- a/frontend/src/views/Genes.vue +++ b/frontend/src/views/Genes.vue @@ -19,7 +19,7 @@ :items="genes" > <template v-slot:items="props"> - <td>{{ props.item.gene_id }}</td> + <td><a :href="/gene-detail/ + props.item.gene_id">{{ props.item.gene_id }}</a></td> <td>{{ props.item.gene_name }}</td> <td class="text-xs">{{ props.item.length }}</td> <td class="text-xs"></td> -- GitLab