diff --git a/web/src/components/Datatable/ProteinDataTable.vue b/web/src/components/Datatable/ProteinDataTable.vue
index 12a72a547ec2f337e276cd3aef05e357fac9b1d7..a89df3a8680886b7c0103b06c3963952f878a069 100644
--- a/web/src/components/Datatable/ProteinDataTable.vue
+++ b/web/src/components/Datatable/ProteinDataTable.vue
@@ -27,6 +27,7 @@ export default {
rows: [],
header: [],
total: 0,
+ downloadUrl: '',
isDev: process.env.NODE_ENV === 'development',
};
},
@@ -157,14 +158,9 @@ export default {
table = $(tableId).DataTable(nTableOptions);
$('#download').html('<div style="text-align: right;"><div class="dropdown">\n' +
- ' <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\n' +
- ' Download\n' +
+ ' <button class="btn btn-primary" type="button" id="dropdownMenuButton">\n' +
+ ' Download CSV\n' +
' </button>\n' +
- ' <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">\n' +
- ' <a class="dropdown-item" href="#" ref="csv">CSV</a>\n' +
- ' <a class="dropdown-item" href="#" ref="tsv">TSV</a>\n' +
- ' <a class="dropdown-item" href="#" ref="json">JSON</a>\n' +
- ' </div>\n' +
'</div></div>');
const tableBody = `${tableId} tbody`;
@@ -176,16 +172,9 @@ export default {
vm.moveDetailPage(row.data().uniprot_id);
});
- $('#download').on('click', 'a.dropdown-item', (e) => {
+ $('#download').on('click', (e) => {
e.preventDefault()
- switch ($(e.target).text()) {
- case 'CSV':
- vm.downloadCsv(); break;
- case 'TSV':
- vm.downloadTsv(); break;
- case 'JSON':
- vm.downloadJson(); break;
- }
+ vm.downloadCsv();
});
},
async fetchCallback (data, aoData, fnCallback) {
@@ -197,7 +186,7 @@ export default {
let lengthItem = aoData.find(x => x.name === 'length')
let searchItem = aoData.find(x => x.name === 'search')
let functionalType = aoData.find(x => x.name === 'columns').value[3]
- console.log(functionalType.search.value)
+ // console.log(functionalType.search.value)
// console.log(`length = ${lengthItem.value}, offset = ${startItem.value}`)
@@ -226,6 +215,11 @@ export default {
host = require('../js/const').devHost;
}
+ vm.downloadUrl = `${host}/proteins?fields=ensembl_gene_id,ensembl_id,functional_type,gene_name,name,species_name,species_tax_id,uniprot_id,uniprot_readable_id&size=50000`
+ + (order.length > 0 ? `&sort=${order.join(',')}`:'')
+ + (search ? `&query=${search}` : '')
+ + (functionalType.search.value ? `&functional_type=${functionalType.search.value}` : '');
+
let url = `${host}/proteins?fields=ensembl_gene_id,ensembl_id,functional_type,gene_name,name,species_name,species_tax_id,uniprot_id,uniprot_readable_id&size=10&page=${page}`
+ (order.length > 0 ? `&sort=${order.join(',')}`:'')
+ (search ? `&query=${search}` : '')
@@ -256,94 +250,44 @@ export default {
this.errorMsg = 'You are not authorized to access this item.'
}
},
- downloadCsv() {
- const vm = this;
- let exports = [];
-
- let header = ['Gene', 'GO Terms', 'Description', 'Phenotypic Top Matches'];
- exports.push(header.join(', '));
-
- _.forEach(vm.data, item => {
- let goTerms = [];
- _.each(item.gos, (i) => {
- goTerms.push(`${i[1]}(${i[0]})`)
- })
-
- let tophits = [];
- _.each(item.em_tophits, (i) => {
- tophits.push(`${i}`)
- })
- _.each(item.ee_tophits, (i) => {
- tophits.push(`${i}`)
- })
- _.each(item.gm_tophits, (i) => {
- tophits.push(`${i}`)
- })
-
- exports.push([item.locusName, `"${goTerms.join('\t')}"`, `"${item.description}"`, tophits.join('\t')].join(','));
- })
-
- let blob = new Blob([exports.join('\n')], {type: 'text/csv'})
-
- let contentDisposition = 'Content-Disposition: attachment; filename="download-data.csv"'
- let filename = contentDisposition.split('filename=')[1]
- filename = filename.replace(/"/g, '')
-
- let link = vm.$refs.download
- link.href = window.URL.createObjectURL(blob)
- link.download = filename
- link.click()
- },
- downloadTsv() {
+ async downloadCsv() {
const vm = this;
- let exports = [];
-
- let header = ['Gene', 'GO Terms', 'Description', 'Phenotypic Top Matches'];
- exports.push(header.join('\t'));
+ try {
+ const res = await this.axios.get(vm.downloadUrl, {
+ headers: {
+ Authorization: `Bearer ${apikey}`
+ }
+ });
- _.forEach(vm.data, item => {
- let goTerms = [];
- _.each(item.gos, (i) => {
- goTerms.push(`${i[1]}(${i[0]})`)
- })
+ if (res.data) {
+ const data = res.data.data;
- let tophits = [];
- _.each(item.em_tophits, (i) => {
- tophits.push(`${i}`)
- })
- _.each(item.ee_tophits, (i) => {
- tophits.push(`${i}`)
- })
- _.each(item.gm_tophits, (i) => {
- tophits.push(`${i}`)
- })
+ let exports = [];
- exports.push([item.locusName, goTerms.join(', '), item.description, tophits.join(', ')].join('\t'));
- })
+ let header = ['Uniprot', 'Gene Name', 'Name', 'Functional Type', 'Species'];
+ exports.push(header.join(', '));
- let blob = new Blob([exports.join('\n')], {type: 'text/tsv'})
+ _.forEach(data, item => {
+ exports.push([item.uniprot_id, item.gene_name, `"${item.name}"`, item.functional_type, item.species_name].join(','));
+ })
- let contentDisposition = 'Content-Disposition: attachment; filename="download-data.tsv"'
- let filename = contentDisposition.split('filename=')[1]
- filename = filename.replace(/"/g, '')
+ let blob = new Blob([exports.join('\n')], {type: 'text/csv'})
- let link = vm.$refs.download
- link.href = window.URL.createObjectURL(blob)
- link.download = filename
- link.click()
- },
- downloadJson() {
- const vm = this;
- let blob = new Blob([JSON.stringify(vm.data, null, 2)], {type: 'application/json'})
+ let contentDisposition = 'Content-Disposition: attachment; filename="download-data.csv"'
+ let filename = contentDisposition.split('filename=')[1]
+ filename = filename.replace(/"/g, '')
- let contentDisposition = 'Content-Disposition: attachment; filename="download-data.json"'
- let filename = contentDisposition.split('filename=')[1]
- filename = filename.replace(/"/g, '')
+ let link = vm.$refs.download
+ link.href = window.URL.createObjectURL(blob)
+ link.download = filename
+ link.click()
- let link = vm.$refs.download
- link.href = window.URL.createObjectURL(blob)
- link.download = filename
- link.click()
+ }
+ } catch(error) {
+ // console.error(error)
+ this.error = true
+ this.errorMsg = 'You are not authorized to access this item.'
+ }
},
},
};