Start improving gene list

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

@@ -7,7 +7,7 @@ from .base import BulkViewSet
 
 
 class GeneViewSet(BulkViewSet):
-    queryset = Gene.objects.select_related('taxonomy').prefetch_related('functions').all()
+    queryset = Gene.objects.select_related('taxonomy').prefetch_related('functions')
     serializer_class = GeneSerializer
     filterset_class = GeneFilter
     query_params_parser = GeneQueryParams

frontend/src/views/Genes.vue

@@ -4,9 +4,10 @@
       <v-layout row wrap>
         <v-flex xs12>
           <v-toolbar
-            class="secondary"
-            dark
+            class="secondary darken-1 white--text"
+            dense
           >
+            <v-icon class="white--text">format_list_bulleted</v-icon>
             <v-toolbar-title>Catalog content</v-toolbar-title>
           </v-toolbar>
           <v-list>
@@ -15,15 +16,40 @@
             </v-subheader>
 
             <v-data-table
+              :rows-per-page-items="rowsPerPageItems"
+              :pagination.sync="pagination"
               :headers="headers"
               :items="genes"
+              hide-actions
             >
               <template v-slot:items="props">
-                <td><a :href="/gene-detail/ + props.item.gene_id">{{ props.item.gene_id }}</a></td>
+                <td>
+                  {{ props.item.gene_id }}
+                  <v-btn :to="/gene-detail/ + props.item.gene_id" icon flat small target="_blank" class="primary--text mt-1 ml-0">
+                    <v-icon small>
+                      open_in_new
+                    </v-icon>
+                  </v-btn>
+                </td>
                 <td>{{ props.item.name }}</td>
                 <td class="text-xs">{{ props.item.length }}</td>
-                <td class="text-xs"></td>
-                <td class="text-xs">{{ props.item.functions }}</td>
+                <td class="text-xs">
+                  {{ props.item.taxonomy }}
+                  <v-btn :href="props.item.tax_url" icon flat small target="_blank" class="taxonomy--text mt-1 ml-0" v-if="props.item.taxonomy">
+                    <v-icon small>
+                      open_in_new
+                    </v-icon>
+                  </v-btn>
+                </td>
+                <td class="text-xs">
+                  {{ props.item.kegg }}
+                  <v-btn :href="props.item.kegg_url" icon flat small target="_blank" class="kegg--text mt-1 ml-0" v-if="props.item.kegg">
+                    <v-icon small>
+                      open_in_new
+                    </v-icon>
+                  </v-btn>
+                </td>
+                <td class="text-xs">{{ props.item.eggnog }}</td>
               </template>
             </v-data-table>
           </v-list>
@@ -42,7 +68,16 @@ export default {
     return {
       genes: [],
       count: 0,
-      headers: [
+      page: 1,
+      rowsPerPageItems: [25],
+      pagination: {
+        rowsPerPage: 25
+      },
+    };
+  },
+  computed: {
+    headers() {
+      return [
         {
           text: 'Gene ID',
           align: 'left',
@@ -56,23 +91,48 @@ export default {
           value: 'name',
         },
         { text: 'Length', value: 'length' },
-        { text: 'Taxo', sortable: false },
-        { text: 'Functions', value: 'functions', sortable: false },
-      ],
-    };
+        { text: 'Taxonomy', value: 'taxonomy', sortable: false },
+        { text: 'KEGG', value: 'kegg', sortable: false },
+        { text: 'EggNOG', value: 'eggnog', sortable: false },
+      ];
+    },
   },
   mounted() {
     this.getGenes();
   },
   methods: {
     getGenes() {
-      axios.get('/api/catalog/v1/genes/', {
+      axios.get('/api/catalog/v1/genes', {
+        params: {
+          page_size: 25
+        },
         headers: {
           Accept: 'application/json',
         },
       })
       .then((response) => {
-        this.genes = response.data.results;
+        const ncbi_tax_url = 'https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?name=';
+        const kegg_url = 'https://www.genome.jp/dbget-bin/www_bget?ko:';
+        var genes = response.data.results;
+        genes.forEach(function (item, index) {
+          if (item.taxonomy) {
+            item.tax_url = ncbi_tax_url + item.taxonomy.name;
+            item.taxonomy = item.taxonomy.name;
+          };
+          if (item.functions) {
+            var functions = item.functions;
+            functions.forEach(function (fun, ind) {
+              if (fun.source == 'kegg') {
+                item.kegg_url = kegg_url + fun.function_id;
+                item.kegg = fun.function_id;
+              }
+              else if (fun.source == 'eggnog') {
+                item.eggnog = fun.function_id;
+              };
+            });
+          }
+        });
+        this.genes = genes;
         this.count = response.data.count;
       })
       .catch((error) => {