LlpsTable.vue 18.84 KiB
<template>
<div>
<div class="inline-block no-underline font-bold mb-4"></div>
<table
:id="id"
class="table table-striped table-bordered table-hover"
width="100%"
></table>
<the-action-modal
v-if="toggleActionModal"
:protein-uniprot="uniprotId"
:show="toggleActionModal"
:pubmed="pubmed"
:canonical-id="canonicaliD"
:protein-evidence-score="proteinConfidenceScore"
@close="closeModal"
/>
</div>
</template>
<script>
import TheActionModal from "./UI/TheActionModal.vue";
const _ = require("lodash");
const $ = (window.jQuery = require("jquery"));
require("./js/clipboard");
require("@/components/js/datatable");
let table;
const scoreMap = {
"http://llps.biocuckoo.cn/": 1,
"http://db.phasep.pro/browse/highthroughput/": 2,
"http://db.phasep.pro/browse/reviewed/": 4,
"http://db.phasep.pro/browse/uniprotreviewed/": 4,
"http://bio-comp.org.cn/llpsdb/": 4,
"https://phasepro.elte.hu/": 4,
"https://pubmed.ncbi.nlm.nih.gov/": 4,
"https://ddcode.org/": 5,
};
function getStartWith(url) {
let ret = "";
_.forEach(_.keys(scoreMap), (i) => {
if (url.startsWith(i)) {
ret = i;
}
});
return ret;
}
function getRatingValue(data) {
return _.max([data]);
}
function getRating(data) {
const rating = _.max([data]);
const r = ['<div style="white-space: nowrap;">'];
for (let i = 0; i < 5; i++) {
if (i < rating) {
r.push('<span class="fa fa-star checked"/>');
} else {
r.push('<span class="fa fa-star"/>');
}
}
r.push("</div>");
return r;
}
export default {
name: "llps-table",
props: [
"id",
"data",
"map",
"pubmed",
"db-tags",
"is-experimental",
"canonicalId",
],
components: {
TheActionModal,
},
data() {
return {
toggleActionModal: false,
uniprotId: "",
selectedRowData: "",
canonicaliD: "",
proteinConfidenceScore: 0,
};
},
methods: {
closeModal() {
this.toggleActionModal = false;
},
fetchProtein(uniprot_id) {
// eslint-disable-next-line
const url = `/protein/${uniprot_id}`;
// // eslint-disable-next-line
// console.log(url)
window.open(url);
},
forwardUniprot(uniprot_id) {
// eslint-disable-next-line
const url = `https://www.uniprot.org/uniprot/${uniprot_id}`;
// // eslint-disable-next-line
// console.log(url)
window.open(url);
},
createLink(link) {
return `<a href="${link}" class="external-link tooltipped tooltipped-n tooltipped-multiline"
aria-label="Clicking this link opens Evidence page." target="_blank"> ${link}
</a>`;
},
createPubMedLink(item) {
return `<a id="${item}" href="https://pubmed.ncbi.nlm.nih.gov/${item}" class="pubmed-link tooltipped tooltipped-n tooltipped-multiline"
target="_blank">
${item}
<i class="glyphicon glyphicon-link"></i>
</a>`;
},
fetchPubMedId(item) {
// console.log(item)
if (item) {
const url =
"https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&retmode=json&id=";
const request = url + item;
let $row = $("#" + item);
if (!$row.attr("aria-label")) {
fetch(request)
.then((response) => response.json())
.then((response) => {
setTimeout(() => {
const res = response.result[item];
$(`a[id="${item}"]`).each(function () {
$(this).attr(
"aria-label",
`${res.title}\n\n${_.map(res.authors, (a) => a.name).join(
", "
)}`
);
});
}, 0);
});
}
}
},
createTable(id, data) {
const vm = this;
_.forEach(data, (d) => {
d.DT_RowID = `${d.n}`;
});
$(id).DataTable({
responsive: true,
});
const columns = vm.isExperimental
? [
{
title: "Gene Name",
data: "gene_name",
fnCreatedCell: (nTd, sData, oData) => {
if (sData) {
$(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
} else {
$(nTd).html(
`<a href="" class="protein-link"> ${oData.uniprot_id}</a>`
);
}
},
},
{
title: "Name",
data: "name",
fnCreatedCell: (nTd, sData, oData) => {
if (sData) {
$(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
} else {
$(nTd).html(
`<a href="" class="protein-link"> ${oData.uniprot_id}</a>`
);
}
},
},
// {
// title: 'Species',
// data: 'species_name',
// className: "text-nowrap"
// },
// {
// title: 'Evidences',
// data: 'species_name',
// className: "text-nowrap",
// fnCreatedCell: (nTd, sData, oData) => {
// // console.log(sData)
// let data = vm.map[oData.uniprot_id];
// if(data) {
// // $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
// $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
// } else {
// $(nTd).html('')
// }
// }
// },
{
title: "Pubmed",
data: "uniprot_id",
className: "text-nowrap",
render: function (data, type, row, meta) {
if (vm.pubmed) {
let dat = vm.pubmed[row.uniprot_id];
if (dat) {
return dat.join(", ");
} else {
return "";
}
} else {
return "";
}
},
fnCreatedCell: (nTd, sData, oData) => {
// console.log(sData)
if (vm.pubmed) {
let data = vm.pubmed[oData.uniprot_id];
if (data) {
// $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
// $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
$(nTd).html(
data.map((i) => vm.createPubMedLink(i)).join(" ")
);
} else {
$(nTd).html("");
}
} else {
$(nTd).html("");
}
},
},
{
title: "DB",
data: "uniprot_id",
className: "text-nowrap",
render: function (data, type, row, meta) {
// console.log(_.flatMap(row.condensates, c => c.data_sources))
let dat = vm.dbTags[row.uniprot_id];
if (dat) {
return dat.join(", ");
}
return "";
},
},
{
title: "UniProt",
data: "uniprot_id",
className: "text-nowrap",
fnCreatedCell: (nTd, sData, oData) => {
$(nTd)
.html(`<a href="" class="uniprot-link tooltipped tooltipped-n tooltipped-multiline"
aria-label="Clicking this link opens UniProt page."> ${sData} <i class="glyphicon glyphicon-link"></i></a>`);
},
},
// {
// title: 'Evidence',
// data: 'uniprot_id',
// className: "text-nowrap",
// fnCreatedCell: (nTd, sData, oData) => {
// $(nTd).html(`${vm.map[oData.uniprot_id]}`);
// },
// },
// {
// title: 'Sequence',
// data: 'sequence',
// className: "text-nowrap",
// fnCreatedCell: (nTd, sData, oData) => {
// $(nTd).html(`<input type="text" value="${sData}">
// <button class="copy-button" name="${oData.uniprot_id}" id="${oData.uniprot_id}" data-clipboard-text="${sData}"><i class="glyphicon glyphicon-copy"></i> </button>`);
// },
// }
{
title: "Evidence Stars",
className: "text-nowrap",
data: "uniprot_id",
render: function (data, type, row, meta) {
// console.log(_.flatMap(row.condensates, c => c.data_sources))
let dat = vm.map[row.uniprot_id];
if (dat) {
return getRatingValue(vm.map[row.uniprot_id]);
}
return "";
},
fnCreatedCell: (nTd, sData, oData) => {
// console.log(sData)
let data = vm.map[oData.uniprot_id];
if (data) {
$(nTd).html(getRating(data).join("\n"));
}
},
},
]
: [
{
title: "Gene Name",
data: "gene_name",
fnCreatedCell: (nTd, sData, oData) => {
if (sData) {
$(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
} else {
$(nTd).html(
`<a href="" class="protein-link"> ${oData.uniprot_id}</a>`
);
}
},
},
{
title: "Name",
data: "name",
fnCreatedCell: (nTd, sData, oData) => {
if (sData) {
$(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`);
} else {
$(nTd).html(
`<a href="" class="protein-link"> ${oData.uniprot_id}</a>`
);
}
},
},
// {
// title: 'Evidences',
// data: 'uniprot_id',
// className: "text-nowrap",
// fnCreatedCell: (nTd, sData, oData) => {
// // console.log(sData)
// let data = vm.map[oData.uniprot_id];
//
// if(data) {
// // $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
// $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
// } else {
// $(nTd).html('')
// }
// }
// },
{
title: "Pubmed",
data: "uniprot_id",
className: "text-nowrap",
render: function (data, type, row, meta) {
if (vm.pubmed) {
let dat = vm.pubmed[row.uniprot_id];
if (dat) {
return dat.join(", ");
} else {
return "";
}
} else {
return "";
}
},
fnCreatedCell: (nTd, sData, oData) => {
// console.log(sData)
if (vm.pubmed) {
let data = vm.pubmed[oData.uniprot_id];
if (data) {
// $(nTd).html(data.filter(a => a.startsWith('http')).join('\n'));
// $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>'));
$(nTd).html(
data.map((i) => vm.createPubMedLink(i)).join(" ")
);
} else {
$(nTd).html("");
}
} else {
$(nTd).html("");
}
},
},
{
title: "DB",
data: "uniprot_id",
className: "text-nowrap",
render: function (data, type, row, meta) {
// console.log(_.flatMap(row.condensates, c => c.data_sources))
let dat = vm.dbTags[row.uniprot_id];
if (dat) {
return dat.join(", ");
}
return "";
},
},
{
title: "UniProt",
data: "uniprot_id",
className: "text-nowrap",
fnCreatedCell: (nTd, sData, oData) => {
$(nTd)
.html(`<a href="" class="uniprot-link tooltipped tooltipped-n tooltipped-multiline"
aria-label="Clicking this link opens UniProt page."> ${sData} <i class="glyphicon glyphicon-link"></i></a>`);
},
},
// {
// title: 'Evidence',
// data: 'uniprot_id',
// className: "text-nowrap",
// fnCreatedCell: (nTd, sData, oData) => {
// $(nTd).html(`${vm.map[oData.uniprot_id]}`);
// },
// },
// {
// title: 'Sequence',
// data: 'sequence',
// className: "text-nowrap",
// fnCreatedCell: (nTd, sData, oData) => {
// $(nTd).html(`<input type="text" value="${sData}">
// <button class="copy-button" name="${oData.uniprot_id}" id="${oData.uniprot_id}" data-clipboard-text="${sData}"><i class="glyphicon glyphicon-copy"></i> </button>`);
// },
// }
{
title: "Evidence Stars",
className: "text-nowrap",
data: "uniprot_id",
render: function (data, type, row, meta) {
// console.log(_.flatMap(row.condensates, c => c.data_sources))
let dat = vm.map[row.uniprot_id];
if (dat) {
// console.log(getRatingValue(vm.map[row.uniprot_id]))
return getRatingValue(dat);
}
return "";
},
fnCreatedCell: (nTd, sData, oData) => {
let data = vm.map[oData.uniprot_id];
if (data) {
$(nTd).html(getRating(data).join("\n"));
}
},
},
{
title: "Action",
data: "uniprot_id",
className: "text-nowrap",
fnCreatedCell: (nTd, sData, oData) => {
$(nTd).html(
`<button class="btn btn-primary edit-link btn-outline font-bold" style="font-weight:bold">Edit
<i class="fa ml-2 fa-edit" style="font-weight:bold"></i>
</button>`
);
},
// render: function (data, type, row, meta) {
// if (this.$store.getters["User/userRole"] === "Maintainer") {
// $(nTd).html(
// `<button class="btn btn-primary btn-outline font-bold" style="font-weight:bold">Edit
// <i class="fa ml-2 fa-edit" style="font-weight:bold"></i>
// </button>`
// );
// } else {
// return "";
// }
// },
},
];
const nTableOptions = {
columns,
// aaSorting: [[ 0, 'asc' ]],
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, "All"],
],
paging: true,
searching: true,
info: false,
data,
order: [], // order: [[0, 'asc']],
bDestroy: true, // Add this property to new setting,
oLanguage: {
sSearch: "Filter",
},
dom: '<"row"<"col-sm-2"l><"col-sm-2"f><"col-sm-8"p>><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>',
};
const tableId = `#${id}`;
if (table) {
table.destroy();
$(tableId).empty();
}
table = $(tableId).DataTable(nTableOptions);
if (
!this.$store.getters["User/userRole"] ||
this.$store.getters["User/userRole"] === "Administrator"
) {
table.column(6).visible(false);
}
const tableBody = `${tableId} tbody`;
$(tableBody).on("click", "tr td a.protein-link", (e) => {
e.preventDefault();
const tr = $(e.target).parent().parent();
const row = table.row(tr);
vm.fetchProtein(row.data().uniprot_id);
});
$(tableBody).on("click", "tr td a.uniprot-link", (e) => {
e.preventDefault();
const tr = $(e.target).parent().parent();
const row = table.row(tr);
vm.forwardUniprot(row.data().uniprot_id);
});
$(tableBody).on("click", "tr td button.edit-link", (e) => {
e.preventDefault();
const tr = $(e.target).parent().parent();
const row = table.row(tr);
const id = row.data().uniprot_id;
let findScore;
for (let score in vm.map) {
if (score === id) {
findScore = vm.map[score];
}
}
console.log("rating is", findScore);
vm.proteinConfidenceScore = findScore;
vm.selectedRowData = row.data();
vm.uniprotId = id;
vm.canonicaliD = vm.canonicalId;
vm.toggleActionModal = true;
// vm.$router.push(`/protein/editDetails/${id}`);
// vm.fetchPubMedId(e.target.id);
});
$(tableBody).on("mouseover", "tr td a.pubmed-link", (e) => {
e.preventDefault();
// console.log(e.target.id)
vm.fetchPubMedId(e.target.id);
});
},
exportTsv() {
// const vm = this;
},
},
mounted() {
const vm = this;
vm.createTable(vm.id, vm.data);
console.log("in table pubmed data", this.data);
},
};
</script>
<style>
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;
}
select.form-control {
font-size: 12px;
padding: 3px 12px;
}
ul.pagination {
font-size: 1rem;
}
.form-inline .form-control {
height: 25px;
line-height: 25px;
vertical-align: middle;
}
.protein-link {
font-weight: bold;
color: #0065b9;
}
.uniprot-link {
font-weight: bold;
color: #0065b9;
}
.pubmed-link {
font-weight: bold;
color: #0065b9;
}
.external-link {
font-weight: bold;
color: #0065b9;
}
.pagination {
font-size: 1.2rem;
}
</style>