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