DataTable.vue 15.19 KiB
<template>
<div>
<a ref="download" />
<table
:id="id"
class="table table-striped table-bordered table-hover"
width="100%"
/>
</div>
</template>
<script>
const _ = require('lodash');
const $ = window.jQuery = require('jquery');
require('./js/datatable');
let table;
function getRating(data) {
const rating = data;
const r = ['<div style="white-space: nowrap;">']
for (let i = 0; i < 5; i++) {
if (i < rating) {
if (rating - i === 0.5) {
r.push('<span class="fa fa-star-half-o checked"/>');
} else {
r.push('<span class="fa fa-star checked"/>');
}
} else {
r.push('<span class="fa fa-star"/>');
}
}
r.push('</div>')
return r;
}
//import StarRating from "vue-star-rating"
export default {
name: 'DataTable',
props: ['id', 'data', 'keyword', 'category'],
mounted() {
const vm = this;
vm.createTable(vm.id, vm.data);
console.log("in data table condensate data", vm.data);
},
// watch: {
// selectedItem: function update(newValue) {
// const vm = this;
//
// switch (newValue) {
// case 'Genes':
// default:
// vm.createTable(vm.id, vm.data);
// }
// },
// },
methods: {
moveDetailPage(id) {
const vm = this;
const url = vm.category === "protein" ? `/protein/${id}` : `/condensate/${id}`
// eslint-disable-next-line
// console.log(url)
window.open(url)
},
createTable(id, data) {
const vm = this;
_.forEach(data, (d) => {
d.DT_RowID = vm.category === "protein" ? `${d.proteinId}` : `${d.canonical_id}`;
});
const proteinColumns = [
{
title: 'Uniprot',
data: 'uniprot_id',
// visible: false,
// fnCreatedCell: (nTd, sData, oData) => {
// $(nTd).html(`<a href="" class="detail-link gene"><i class="glyphicon glyphicon-list-alt"></i> </a>`);
// },
// render: function ( data, type, row, meta ) {
// return data + ' (' + row.uniprot_readable_id + ')';
// }
fnCreatedCell: (nTd, sData, oData) => {
let n = `${oData.uniprot_id} (${oData.uniprot_readable_id})`;
if(vm.keyword) {
n.replace(new RegExp(vm.keyword, 'gi'), `<mark>$&</mark>`);
}
$(nTd).html(`<a href="" class="detail-link"> ${n}</a>`);
},
},
{
title: 'Gene Name',
data: 'gene_name',
fnCreatedCell: (nTd, sData, oData) => {
let n = `${oData.gene_name ? oData.gene_name : 'N/A'}`;
if(vm.keyword) {
n = n.replace(new RegExp(vm.keyword, 'gi'), `<mark>$&</mark>`);
}
$(nTd).html(`${n}`);
},
},
{
title: 'Name',
data: 'name',
fnCreatedCell: (nTd, sData, oData) => {
let n = oData.name !== null ? `${oData.name}`: '';
if(vm.keyword) {
n = n.replace(new RegExp(vm.keyword, 'gi'), `<mark>$&</mark>`);
}
$(nTd).html(`${n}`);
},
},
{
title: 'Functional Type',
data: 'functional_type',
render: function ( data, type, row, meta ) {
return data;
}
},
{
title: 'Species',
data: 'species_name',
render: function ( data, type, row, meta ) {
return data + ' (' + row.species_tax_id + ')';
}
},
// {
// title: 'Evidence Stars',
// className: "text-nowrap",
// data: 'condensates',
// render: function ( data, type, row, meta ) {
// if(row.condensates) {
// return getRatingValue(_.flatMap(row.condensates, c => c.data_sources));
// }
// return '';
// },
// fnCreatedCell: (nTd, sData, oData) => {
// let data = _.flatMap(sData, c => c.data_sources);
// if(data) {
// $(nTd).html(getRating(data).join('\n'));
// }
// }
// },
];
const condensateColumns = [
{
title: 'Name',
data: 'name',
fnCreatedCell: (nTd, sData, oData) => {
if(vm.keyword) {
let n = `${oData.name}`.replace(new RegExp(vm.keyword, 'gi'), `<mark>$&</mark>`);
$(nTd).html(`<a href="" class="detail-link"> ${n}</a>`);
} else {
$(nTd).html(`<a href="" class="detail-link"> ${oData.name}</a>`);
}
},
},
{
title: 'Proteins',
data: 'proteins',
fnCreatedCell: (nTd, sData, oData) => {
// console.log(sData)
if(sData) {
$(nTd).html(sData.length > 4 ? sData.splice(0, 4).join(', ') + ' ...' : sData.join(', '));
}
}
},
{
title: 'No. Proteins',
render: function ( data, type, row, meta ) {
return row.protein_count;
}
},
{
title: 'Species',
data: 'species_name',
render: function ( data, type, row, meta ) {
return data + ' (' + row.species_tax_id + ')';
}
},
{
title: 'Evidence Stars',
data: 'confidence_score',
defaultContent:`0`,
render: function ( data, type, row, meta ) {
return data;
},
fnCreatedCell: (nTd, sData, oData) => {
// console.log(sData)
if(sData) {
$(nTd).html(getRating(sData).join('\n'));
} else {
$(nTd).html(getRating(0).join('\n'));
}
}
},
// {
// title: 'Localization',
// render: function ( data, type, row, meta ) {
// return '(placeholder)';
// }
// },
// {
// title: 'Species',
// data: 'species_name',
// render: function ( data, type, row, meta ) {
// return data + ' (' + row.species_tax_id + ')';
// }
// },
];
const columns = vm.category === "protein" ? proteinColumns : condensateColumns;
// console.log(columns)
const doms = vm.category === "protein" ? '<"row"<"col-sm-3"f><"#function_filter.col-sm-3"><"col-sm-6"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>' : '<"row"<"col-sm-3"f><"col-sm-9"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>';
const nTableOptions = {
columns,
// aaSorting: [[ 0, 'asc' ]],
paging: true,
searching: true,
info: true,
data,
order: [], // order: [[0, 'asc']],
bDestroy: true, // Add this property to new setting,
oLanguage: {
sSearch: "Filter",
},
dom: doms,
initComplete: function () {
if(vm.category === "protein") {
this.api().columns([3]).every( function () {
// console.log(this);
let column = this;
let select = $('<select class="form-control input-sm"><option value=""></option></select>')
.appendTo( $('#function_filter').empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? val === 'null' ? '^\\s*$' : '^'+val+'$' : '', true, false )
.draw();
} );
$( "<label>Functional Type</label>" ).prependTo( '#function_filter' );
column.data().unique().sort().each( function ( d, j ) {
if( d === null) {
select.append( '<option value="'+d+'">unknown</option>' )
} else {
select.append( '<option value="'+d+'">'+d+'</option>' )
}
} );
} );
}
},
};
const tableId = `#${id}`;
if (table) {
table.destroy();
$(tableId).empty();
}
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>\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`;
$(tableBody).on('click', 'tr td a.detail-link', (e) => {
e.preventDefault()
const tr = $(e.target).parent().parent();
const row = table.row(tr);
// console.log(row.data().proteinName)
if (vm.category === "protein") {
vm.moveDetailPage(row.data().uniprot_id);
} else {
vm.moveDetailPage(row.data().canonical_id);
}
});
// $('#download').on('click', 'a.dropdown-item', (e) => {
// e.preventDefault()
// switch ($(e.target).text()) {
// case 'CSV':
// vm.downloadCsv(); break;
// case 'TSV':
// vm.downloadTsv(); break;
// case 'JSON':
// vm.downloadJson(); break;
// }
// });
},
// 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() {
// const vm = this;
// let exports = [];
//
// let header = ['Gene', 'GO Terms', 'Description', 'Phenotypic Top Matches'];
// exports.push(header.join('\t'));
//
// _.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(', '), item.description, tophits.join(', ')].join('\t'));
// })
//
// let blob = new Blob([exports.join('\n')], {type: 'text/tsv'})
//
// let contentDisposition = 'Content-Disposition: attachment; filename="download-data.tsv"'
// 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()
// },
// 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.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()
// },
},
};
</script>
<style>
.no-padding {
padding: 0;
}
.checked {
color: orange;
}
.gene {
font-size: large;
}
table.pheno {
width: 330px;
}
td.pheno-title {
text-align: center;
}
td.pheno {
width: 33%;
border-top: none;
border-bottom: none;
text-align: center;
vertical-align: middle;
font-size: small;
word-wrap: break-spaces;
}
td.pheno-item {
width: 33%;
text-align: center;
border-width: 0 1px;
word-wrap: break-word;
}
.table thead td.pheno {
border-width: 0 1px;
}
table.dataTable.row-border > tbody > tr:first-child > th,
table.dataTable.row-border > tbody > tr:first-child > td,
table.dataTable.display > tbody > tr:first-child > th,
table.dataTable.display > tbody > tr:first-child > td {
border-top: none;
}
table.dataTable.row-border > tbody > tr > th,
table.dataTable.row-border > tbody > tr > td,
table.dataTable.display > tbody > tr > th,
table.dataTable.display > tbody > tr > td {
border-top: 1px solid #ddd;
}
table.dataTable > tbody > tr {
background-color: #ffffff;
}
table.dataTable.row-border > tbody > tr:hover,
table.dataTable.display > tbody > tr:hover {
background-color: #f6f6f6;
}
.detail-link {
color: #0065b9;
font-weight: bold;
}
.dropdown-item {
font-size: 1.2rem;
}
select.form-control {
font-size: 12px;
padding: 3px 12px;
}
.pagination {
font-size: 1.2rem;
}
a mark {
color: #0065b9;
padding: 0;
text-decoration: underline;
font-style: oblique;
}
div#function_filter label {
font-weight: normal;
text-align: left;
margin-right: 10px;
}
</style>