-
raghosh authoredfixed value field text conversion issue from update item table. Removed protein column and DB column from every table. Renamed Evidence star to Confidence Score everywhere.
raghosh authoredfixed value field text conversion issue from update item table. Removed protein column and DB column from every table. Renamed Evidence star to Confidence Score everywhere.
DataTable.vue 15.45 KiB
<template>
<div>
<a ref="download" />
<table
:id="id"
class="table table-striped table-bordered table-hover"
style="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)
vm.$router.push(url)
// window.location = 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: 'Confidence Score',
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' ]],
stateSave: true,
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 scoped>
.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: #4f9bb2;
font-weight: bold;
}
.detail-link:hover,
.detail-link:focus {
color: #306b56;
text-decoration: underline;
}
.download-link {
color: #fff;
background-color: #4f8fb2;
}
.download-link:hover,
.download-link:focus {
color: #234d3e;
text-decoration: underline;
background-color: #90cddf;
border-color: #395384;
}
.dropdown-item {
font-size: 1.2rem;
}
select.form-control {
font-size: 12px;
padding: 3px 12px;
}
.pagination {
font-size: 1.2rem;
}
a mark {
color: #4fb28f;
padding: 0;
text-decoration: underline;
font-style: oblique;
}
div#function_filter label {
font-weight: normal;
text-align: left;
margin-right: 10px;
}
</style>