Start working on gene page

backend/metagenedb/api/catalog/views/gene.py

 import pandas as pd
 from drf_yasg import openapi
 from drf_yasg.utils import swagger_auto_schema
-from rest_framework import status
+from rest_framework import filters, status
 from rest_framework.decorators import action
 from rest_framework.response import Response
 
@@ -43,6 +43,8 @@ class DocGeneLength(object):
 
 
 class GeneViewSet(BulkViewSet):
+    search_fields = ['gene_name']
+    filter_backends = (filters.SearchFilter,)
     queryset = Gene.objects.select_related('taxonomy').prefetch_related('functions').all()
     serializer_class = GeneSerializer
     lookup_field = 'gene_id'

frontend/src/router.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Router from 'vue-router';
 
 import Home from '@/views/Home.vue';
+import GeneDetail from '@/views/GeneDetail.vue';
 import Genes from '@/views/Genes.vue';
 import Catalogstats from '@/views/Stats.vue';
 
@@ -26,6 +27,11 @@ export default new Router({
       name: 'genes',
       component: Genes,
     },
+    {
+      path: '/gene-detail/:id',
+      name: 'gene',
+      component: GeneDetail,
+    },
     {
       path: '/about',
       name: 'about',

frontend/src/views/GeneDetail.vue

+<template>
+  <div class="gene">
+     {{ gene_id }} {{ gene_detail }} {{ kegg_detail }}
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'genes',
+  data() {
+    return {
+      gene_id: "",
+      gene_detail: {},
+      kegg_id: "",
+      kegg_detail: {},
+    };
+  },
+  mounted() {
+    this.gene_id = this.$route.params.id;
+    this.getGeneDetail();
+  },
+  methods: {
+    getGeneDetail() {
+      axios.get('/api/catalog/v1/genes/' + this.gene_id, {
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+      .then((response) => {
+        this.gene_detail = response.data;
+        var kegg_id = response.data.functions[0];
+        return axios.get('http://togows.org/entry/kegg-orthology/' + kegg_id + '.json', {
+          headers: {
+          Accept: 'application/json',
+          },
+        })
+      })
+      .then((response) => {
+        this.kegg_detail = response.data[0]
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+    },
+  },
+};
+</script>

frontend/src/views/Genes.vue

 <template>
   <div class="genes">
-    <h1 class="subheading primary--text">Genes</h1>
 
     <v-container fluid>
       <v-layout row wrap>

frontend/src/views/Stats.vue

@@ -56,7 +56,7 @@ export default {
       })
       .catch((error) => {
         console.log(error);
-      })
+      });
     },
   },
   components: { histogram: Histogram },