Add link from gene list and deal with no information from kegg and taxonomy

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) {

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

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

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>