Add button on frontend to download csv from metadata list

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

@@ -83,7 +83,8 @@ class GeneViewSet(BulkViewSet):
         return ','.join([str(item) for item in gene_items])
 
     def _build_csv_response(self):
-        queryset = self.filter_queryset(self.get_queryset())
+        queryset = self.get_queryset().select_related("taxonomy").prefetch_related("functions")
+        queryset = self.filter_queryset(queryset)
         if self._check_too_many_genes(queryset):
             return self.too_many_genes_error_response
         with StringIO() as csv_file:
@@ -92,7 +93,7 @@ class GeneViewSet(BulkViewSet):
                 'gene_id', 'gene_name', 'gene_source', 'length', 'tax_id', 'tax_name', 'tax_rank',
                 'kegg_id', 'eggnog_id',
             ])
-            csv_file.write(header)
+            csv_file.write(f"{header}\n")
             for gene in queryset.iterator():
                 csv_file.write(f"{self._get_metadata_line(gene)}\n")
             # generate the file

frontend/src/views/genes/genes.html

@@ -241,11 +241,12 @@
             <template v-slot:activator="{ on }">
               <v-btn
                 fab
-                dark
                 small
+                :loading="loadingCSVDownload"
+                :disabled="loadingCSVDownload"
                 color="primary lighten-3"
+                @click="downloadMetadataCSV"
                 v-on="on"
-                disabled
               >
                 .CSV
               </v-btn>

frontend/src/views/genes/genes.js

@@ -31,7 +31,8 @@ export default {
       loadTable: true,
       requestDone: false,
       // Download FASTA loading
-      downloadReady: true,
+      downloadFastaReady: true,
+      downloadCSVReady: true,
       fab: false,
     };
   },
@@ -110,12 +111,18 @@ export default {
       return numberPages;
     },
     loadingFastaDownload() {
-      return !this.downloadReady;
+      return !this.downloadFastaReady;
+    },
+    loadingCSVDownload() {
+      return !this.downloadCSVReady;
     },
     loadingDownloads() {
       if (this.loadingFastaDownload) {
         return true;
       }
+      else if (this.loadingCSVDownload) {
+        return true;
+      }
       return false;
     },
     showDownloads() {
@@ -196,17 +203,18 @@ export default {
           this.requestDone = true;
         });
     },
-    forceFileDownload(response){
+    forceFileDownload(response, fileName){
       const url = window.URL.createObjectURL(new Blob([response.data]))
       const link = document.createElement('a')
       link.href = url
-      link.setAttribute('download', 'metagenedb_sequences.fasta') //or any other extension
+      link.setAttribute('download', fileName) //or any other extension
       document.body.appendChild(link)
       link.click()
     },
     downloadFasta() {
-      this.downloadReady = false;
-      var qParams = this.qParams;
+      this.downloadFastaReady = false;
+      var qParams = {};
+      Object.assign(qParams, this.qParams);
       qParams.fasta = "true";
       delete qParams['page_size']
       delete qParams['page']
@@ -217,8 +225,30 @@ export default {
         },
       })
         .then((response) => {
+          this.downloadFastaReady = true;
+          this.forceFileDownload(response, 'metagenedb_sequences.fasta');
+        })
+        .catch((error) => {
+          console.error(error);
           this.downloadReady = true;
-          this.forceFileDownload(response);
+        });
+    },
+    downloadMetadataCSV() {
+      this.downloadCSVReady = false;
+      var qParams = {};
+      Object.assign(qParams, this.qParams);
+      qParams.csv = "true";
+      delete qParams['page_size']
+      delete qParams['page']
+      axios.get('/api/catalog/v1/genes', {
+        params: qParams,
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+        .then((response) => {
+          this.downloadCSVReady = true;
+          this.forceFileDownload(response, 'metagenedb_metadata.csv');
         })
         .catch((error) => {
           console.error(error);