allow download of sequences at fasta format (for query <100000 genes)

frontend/src/views/genes/genes.html

@@ -17,7 +17,7 @@
       ></v-text-field>
       </v-toolbar>
       <!-- Filters -->
-      <v-expansion-panel>
+      <v-expansion-panel v-model="showFilters" expand>
       <v-expansion-panel-content class="grey lighten-2">
         <template v-slot:header>
         <div>Show Filters</div>
@@ -189,47 +189,112 @@
       </v-expansion-panel-content>
       </v-expansion-panel>
       <!-- Table -->
-      <v-list v-if="!loadTable">
-        <v-data-table
-          :rows-per-page-items="rowsPerPageItems"
-          :pagination.sync="pagination"
-          :headers="headers"
-          :items="genes"
-          hide-actions
+
+      <v-card flat id="tablegenes" v-if="!loadTable">
+        <v-speed-dial
+          v-model="fab"
+          top
+          :right="downloadRight"
+          :left="downloadLeft"
+          :direction="downloadOpen"
+          transition="scale-transition"
+          v-if="showDownloads"
         >
-          <template v-slot:items="props">
-          <td>
-            <router-link :to="/gene-detail/ + props.item.gene_id">{{ props.item.gene_id }}</router-link>
-          </td>
-          <td>{{ props.item.name }}</td>
-          <td class="text-xs">{{ props.item.length }}</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">
-            <template v-for="(kegg_item, kegg_index) in props.item.keggs">
-              {{ kegg_item.kegg_id }}
-              <v-btn :href="kegg_item.kegg_url" icon flat small target="_blank" class="kegg--text mt-1 ml-0" v-if="kegg_item.kegg_id">
+          <template v-slot:activator>
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on }">
+                <v-btn
+                  :loading="loadingDownloads"
+                  v-model="fab"
+                  color="secondary"
+                  fab
+                  small
+                  class="pt-2"
+                  v-on="on"
+                >
+                  <v-icon>fas fa-download</v-icon>
+                  <v-icon>close</v-icon>
+                </v-btn>
+              </template>
+              <span>Downloads</span>
+            </v-tooltip>
+          </template>
+          <!-- FASTA file -->
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-btn
+                fab
+                small
+                :loading="loadingFastaDownload"
+                :disabled="loadingFastaDownload"
+                color="primary lighten-3"
+                @click="downloadFasta"
+                v-on="on"
+              >
+                .FA
+              </v-btn>
+            </template>
+            <span>Download sequences (.fasta)</span>
+          </v-tooltip>
+          <!-- CSV -->
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-btn
+                fab
+                dark
+                small
+                color="primary lighten-3"
+                v-on="on"
+                disabled
+              >
+                .CSV
+              </v-btn>
+            </template>
+            <span>Download metadata (.csv)</span>
+          </v-tooltip>
+        </v-speed-dial>
+        <v-list>
+          <v-data-table
+            :rows-per-page-items="rowsPerPageItems"
+            :pagination.sync="pagination"
+            :headers="headers"
+            :items="genes"
+            hide-actions
+          >
+            <template v-slot:items="props">
+            <td>
+              <router-link :to="/gene-detail/ + props.item.gene_id">{{ props.item.gene_id }}</router-link>
+            </td>
+            <td>{{ props.item.name }}</td>
+            <td class="text-xs">{{ props.item.length }}</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">
+              <template v-for="(kegg_item, kegg_index) in props.item.keggs">
+                {{ kegg_item.kegg_id }}
+                <v-btn :href="kegg_item.kegg_url" icon flat small target="_blank" class="kegg--text mt-1 ml-0" v-if="kegg_item.kegg_id">
+                <v-icon small>
+                  open_in_new
+                </v-icon>
+                </v-btn>
+              </template>
+            </td>
+            <td class="text-xs">
+              <template v-for="(eggnog_item, eggnog_index) in props.item.eggnogs">
+                {{ eggnog_item.eggnog_id }}
+              </template>
+            </td>
+            <td class="text-xs">{{ props.item.source }}</td>
             </template>
-          </td>
-          <td class="text-xs">
-            <template v-for="(eggnog_item, eggnog_index) in props.item.eggnogs">
-              {{ eggnog_item.eggnog_id }}
-            </template>
-          </td>
-          <td class="text-xs">{{ props.item.source }}</td>
-          </template>
-        </v-data-table>
-      </v-list>
+          </v-data-table>
+        </v-list>
+      </v-card>
       <!-- Loading bar -->
       <v-card class="text-xs-center" v-if="!requestDone">
         <v-progress-linear

frontend/src/views/genes/genes.js

@@ -15,6 +15,7 @@ export default {
       maxNumberPages: 50000,
       tooManyPages: false,
       // Filters
+      showFilters: [false],
       // - Gene info
       geneSource: 'all',
       searchGeneName: null,
@@ -29,6 +30,9 @@ export default {
       // Information about request
       loadTable: true,
       requestDone: false,
+      // Download FASTA loading
+      downloadReady: true,
+      fab: false,
     };
   },
   computed: {
@@ -104,6 +108,33 @@ export default {
         return numberPages + 1;
       }
       return numberPages;
+    },
+    loadingFastaDownload() {
+      return !this.downloadReady;
+    },
+    loadingDownloads() {
+      if (this.loadingFastaDownload) {
+        return true;
+      }
+      return false;
+    },
+    showDownloads() {
+      if (this.count != 0 && this.count <= 100000) {
+        return true;
+      }
+      return false;
+    },
+    downloadRight() {
+      return !this.showFilters[0];
+    },
+    downloadLeft() {
+      return this.showFilters[0];
+    },
+    downloadOpen() {
+      if (this.showFilters[0]) {
+        return 'right';
+      }
+      return 'left';
     }
   },
   mounted() {
@@ -165,6 +196,35 @@ export default {
           this.requestDone = true;
         });
     },
+    forceFileDownload(response){
+      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
+      document.body.appendChild(link)
+      link.click()
+    },
+    downloadFasta() {
+      this.downloadReady = false;
+      var qParams = this.qParams;
+      qParams.fasta = "true";
+      delete qParams['page_size']
+      delete qParams['page']
+      axios.get('/api/catalog/v1/genes', {
+        params: qParams,
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+        .then((response) => {
+          this.downloadReady = true;
+          this.forceFileDownload(response);
+        })
+        .catch((error) => {
+          console.error(error);
+          this.downloadReady = true;
+        });
+    },
     emptyGeneInformationFilter() {
       this.geneSource = 'all';
       this.filterGeneLength = false;

frontend/src/views/genes/genes.scss

+/* This is for documentation purposes and will not be needed in your application */
+#tablegenes .v-speed-dial {
+  position: absolute;
+  margin-top: -45px;
+  margin-right: 50px;
+}
+
+#tablegenes .v-btn--floating {
+  position: relative;
+}
\ No newline at end of file

frontend/src/views/genes/genes.vue

 <template src="./genes.html" lang="html"></template>
-<script src="./genes.js" lang="js"></script>
\ No newline at end of file
+<script src="./genes.js" lang="js"></script>
+<style src="./genes.scss" lang="scss" scoped></style>
\ No newline at end of file