Skip to content
Snippets Groups Projects
Commit 78a7c95d authored by raghosh's avatar raghosh
Browse files

#34: fixed a small bug in add/delete pubmed id and datatable warning error in biomolecular page.

parent 15352eb2
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
web/src/components/CMS/addDeletePubmed.vue
+ 11
− 10
View file @ 78a7c95d
......@@ -160,7 +160,7 @@
</div>
</div>
</div>
<div class="form-group" v-if="!mode">
<div class="form-group" v-if="mode === 'protein'">
<label class="control-label col-sm-4" for="actionType"
>Select Action</label
>
......@@ -289,7 +289,11 @@
{{ message }}
</p>
<div class="flex space-x-4">
<button class="btn btn-primary mb-2" type="submit">
<button
class="btn btn-primary mb-2"
type="submit"
:disabled="!pubmedId || !comment"
>
{{ actionType === "Add" ? "Add" : "Remove" }}
</button>
<button class="btn btn-danger mb-2" type="button" @click="close">
......@@ -372,10 +376,7 @@ export default {
foundPubId = item;
}
}
} else if (
(this.mode === "protein" && this.type === "Add") ||
(this.mode === "protein" && this.type === "Delete")
) {
} else if (this.mode === "protein" && this.actionType === "Add") {
foundPubId = data.pubmed_ids.find((p) => p === this.pubmedId);
}
this.message = "";
......@@ -390,6 +391,7 @@ export default {
return false;
} else if (foundPubId) {
this.isValid = false;
this.commentError = "";
this.error =
"Given pubmed id is aready present. Please add another pubmed id.";
......@@ -453,8 +455,7 @@ export default {
SubmissionComments: this.comment,
Status: "requested",
};
console.log("delte data", data);
} else if (this.mode === "protein" && this.type === "Add") {
} else if (this.mode === "protein" && this.actionType === "Add") {
//val
if (!this.inputValidation(this.data)) {
return;
......@@ -468,7 +469,7 @@ export default {
SubmissionComments: this.comment,
Status: "requested",
};
} else if (this.mode === "protein" && this.type === "Delete") {
} else if (this.mode === "protein" && this.actionType === "Delete") {
if (!this.inputValidation(this.data)) {
return;
}
......@@ -574,7 +575,7 @@ export default {
},
},
mounted() {
console.log("in adddeletepumed", this.uniprot, this.pubmed);
console.log("in adddeletepumed", this.data);
// for (let key in this.pubmed) {
// if (key === this.uniprot) {
......
web/src/components/DataTable.vue
+ 486
− 450
View file @ 78a7c95d
This diff is collapsed.
web/src/components/DataTableCondensate.vue
+ 357
− 307
View file @ 78a7c95d
<template>
<div class="mainContent">
<a ref="download"></a>
<table :id=id class="table table-striped table-bordered table-hover" width="100%"></table>
</div>
<div class="mainContent">
<a ref="download"></a>
<table
:id="id"
class="table table-striped table-bordered table-hover"
width="100%"
></table>
</div>
</template>
<script>
const _ = require('lodash');
const $ = window.jQuery = require('jquery');
require('./js/datatable');
const _ = require("lodash");
const $ = (window.jQuery = require("jquery"));
require("./js/datatable");
let table;
let table;
function getRatingValue(data) {
return _.max(_.values(data));
}
function getRatingValue(data) {
return _.max(_.values(data));
}
function getRating(data) {
const rating = _.max(_.values(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"/>')
}
}
function getRating(data) {
const rating = _.max(_.values(data));
const r = ['<div style="white-space: nowrap;">'];
r.push('</div>')
return r;
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"/>');
}
}
export default {
name: 'data-table',
props: ['id', 'data', 'category'],
data() {
return {
};
r.push("</div>");
return r;
}
export default {
name: "data-table",
props: ["id", "data", "category"],
data() {
return {};
},
methods: {
moveDetailPage(id) {
const url = `/condensate/${id}`;
// eslint-disable-next-line
// console.log(url)
window.open(url);
},
methods: {
moveDetailPage(id) {
const url = `/condensate/${id}`
// eslint-disable-next-line
// console.log(url)
window.open(url)
},
createTable(id, data) {
const vm = this;
_.forEach(data, (d) => {
d.DT_RowID = `${d.unique_name}`;
});
createTable(id, data) {
const vm = this;
const columns = [
{
title: 'Name',
data: 'name',
fnCreatedCell: (nTd, sData, oData) => {
$(nTd).html(`<a href="" class="detail-link"> ${oData.name}</a>`);
},
_.forEach(data, (d) => {
d.DT_RowID = `${d.unique_name}`;
});
const columns = [
{
title: "Name",
data: "name",
fnCreatedCell: (nTd, sData, oData) => {
$(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: "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.proteins.length;
}
},
{
title: "No. Proteins",
render: function (data, type, row, meta) {
return row.proteins.length;
},
// {
// title: 'Biomolecular/Synthetic',
// data: 'is_experimental',
// render: function ( data, type, row, meta ) {
// return data ? 'Synthetic' : 'Biomolecular';
// }
// },
// {
// title: 'Localization',
// render: function ( data, type, row, meta ) {
// return '(placeholder)';
// }
// },
{
title: 'Evidence Stars',
data: 'protein_confidence_score',
render: function ( data, type, row, meta ) {
return getRatingValue(data);
},
fnCreatedCell: (nTd, sData, oData) => {
// console.log(sData)
if(sData) {
$(nTd).html(getRating(sData).join('\n'));
}
}
},
// {
// title: 'Biomolecular/Synthetic',
// data: 'is_experimental',
// render: function ( data, type, row, meta ) {
// return data ? 'Synthetic' : 'Biomolecular';
// }
// },
// {
// title: 'Localization',
// render: function ( data, type, row, meta ) {
// return '(placeholder)';
// }
// },
{
title: "Evidence Stars",
data: "protein_confidence_score",
defaultContent: "<i>Not set</i>",
render: function (data, type, row, meta) {
return getRatingValue(data);
},
{
title: 'Species',
data: 'species_name',
render: function ( data, type, row, meta ) {
if (data) {
return data + ' (' + row.species_tax_id + ')';
} else {
return 'Chimeras';
}
fnCreatedCell: (nTd, sData, oData) => {
// console.log(sData)
if (sData) {
$(nTd).html(getRating(sData).join("\n"));
}
},
];
const nTableOptions = {
columns,
aaSorting: [[ 0, 'asc' ]],
paging: true,
searching: true,
info: true,
data,
pageLength: 100,
order: [[2, 'desc']], // order: [[0, 'asc']],
bDestroy: true, // Add this property to new setting,
oLanguage: {
sSearch: "Filter ",
},
{
title: "Species",
data: "species_name",
render: function (data, type, row, meta) {
if (data) {
return data + " (" + row.species_tax_id + ")";
} else {
return "Chimeras";
}
},
dom: '<"row"<"col-sm-8"f><"#download.col-sm-4">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>',
// dom: '<"row"<"col-sm-4"l><"col-sm-6"f><"#download.col-sm-2">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>'
};
const tableId = `#${id}`;
if (table) {
table.destroy();
$(tableId).empty();
}
},
];
const nTableOptions = {
columns,
aaSorting: [[0, "asc"]],
paging: true,
searching: true,
info: true,
data,
pageLength: 100,
order: [[2, "desc"]], // order: [[0, 'asc']],
bDestroy: true, // Add this property to new setting,
oLanguage: {
sSearch: "Filter ",
},
dom: '<"row"<"col-sm-8"f><"#download.col-sm-4">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>',
// dom: '<"row"<"col-sm-4"l><"col-sm-6"f><"#download.col-sm-2">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>'
};
table = $(tableId).DataTable(nTableOptions);
const tableId = `#${id}`;
if (table) {
table.destroy();
$(tableId).empty();
}
$("#download").html('<div style="text-align: right;"><div class="dropdown">\n' +
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' +
" 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())
vm.moveDetailPage(row.data().canonical_id);
" </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())
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 = [
"Name",
"Canonical ID",
"Biomolecular/Synthetic",
"Species Name",
"Species Tax Id",
"Proteins",
];
exports.push(header.join(", "));
_.forEach(vm.data, (item) => {
let proteins = [];
_.each(item.proteins, (i) => {
proteins.push(`${i}`);
});
$('#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;
}
exports.push(
[
`"${item.name}"`,
`"${item.canonical_id}"`,
`"${item.is_experimental ? "Syntehtic" : "Biomolecular"}"`,
`"${item.species_name}"`,
item.species_tax_id,
`"${proteins.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 = [
"Name",
"Canonical ID",
"Biomolecular/Synthetic",
"Species Name",
"Species Tax Id",
"Proteins",
];
exports.push(header.join(", "));
_.forEach(vm.data, (item) => {
let proteins = [];
_.each(item.proteins, (i) => {
proteins.push(`${i}`);
});
},
downloadCsv() {
const vm = this;
let exports = [];
let header = ['Name', 'Canonical ID', 'Biomolecular/Synthetic', 'Species Name', 'Species Tax Id', 'Proteins'];
exports.push(header.join(', '));
_.forEach(vm.data, item => {
let proteins = [];
_.each(item.proteins, (i) => {
proteins.push(`${i}`)
})
exports.push([`"${item.name}"`, `"${item.canonical_id}"`, `"${item.is_experimental ? 'Syntehtic' : 'Biomolecular'}"`, `"${item.species_name}"`, item.species_tax_id,`"${proteins.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 = ['Name', 'Canonical ID', 'Biomolecular/Synthetic', 'Species Name', 'Species Tax Id', 'Proteins'];
exports.push(header.join(', '));
_.forEach(vm.data, item => {
let proteins = [];
_.each(item.proteins, (i) => {
proteins.push(`${i}`)
})
exports.push([item.name, item.canonical_id, item.is_experimental ? 'Synthetic' : 'Biomolecular', item.species_name, item.species_tax_id, proteins.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()
},
exports.push(
[
item.name,
item.canonical_id,
item.is_experimental ? "Synthetic" : "Biomolecular",
item.species_name,
item.species_tax_id,
proteins.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();
},
mounted() {
downloadJson() {
const vm = this;
vm.createTable(vm.id, vm.data);
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();
},
};
},
mounted() {
const vm = this;
console.log("data table", vm.data);
vm.createTable(vm.id, vm.data);
},
};
</script>
<style>
.mainContent {
padding: 20px;
}
.checked {
color: orange;
}
.no-padding {
padding: 0;
}
.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;
}
.mainContent {
padding: 20px;
}
.checked {
color: orange;
}
.no-padding {
padding: 0;
}
.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;
}
</style>
web/src/components/ProteinDetailPage.vue
+ 1
− 0
View file @ 78a7c95d
......@@ -201,6 +201,7 @@
<add-delete-pubmed
v-if="showAddOrDeletePubmedId"
:data="response.data"
mode="protein"
@cancel="cancelAddOrDeletePubmedId"
/>
</div>
......
web/src/components/UI/TheActionModal.vue
+ 4
− 2
View file @ 78a7c95d
......@@ -3,9 +3,11 @@
<div id="deleteModal" v-if="show">
<div class="fixed z-40 h-full inset-0 opacity-25 bg-black"></div>
<div
class="fixed overflow-y-auto overflow-x-hidden flex justify-center items-center z-50 md:h-full md:inset-0"
class="fixed overflow-y-auto overflow-x-hidden flex justify-center items-center z-50 h-full inset-0"
>
<div class="relative px-4 w-full max-w-3xl h-full md:h-auto">
<div
class="relative px-4 w-full max-w-3xl 2xl:max-w-5xl h-auto md:h-auto"
>
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<div
class="flex justify-between items-center py-4 px-6 rounded-t border-b dark:border-gray-600"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment