Skip to content
Snippets Groups Projects
Commit fd4fcb35 authored by HongKee Moon's avatar HongKee Moon
Browse files

Close #27, #28 

#27: New data on Proteins Detail Page
#28: Condensate Detail Page; Protein Table Modification
parent f4a6be66
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
web/src/components/CondensateDetailPage.vue
+ 10
− 1
View file @ fd4fcb35
......@@ -63,6 +63,13 @@
<span v-html="getProteinLinks(response.data.biomarkers)"></span>
</div>
</div>
<div class="row">
<div class="text col-sm-3">No. of Proteins</div>
<div class="col-sm-9">
{{response.data.protein_count}}
</div>
</div>
</div>
</div>
</div>
......@@ -125,7 +132,9 @@
</div>
<h4 class="round">Proteins</h4>
<llps-table id="protein-table" :data="response.data.proteins" :map="response.data.protein_evidence_map" :is-experimental="response.data.is_experimental">
<llps-table id="protein-table" :data="response.data.proteins"
:map="response.data.protein_evidence_map" :is-experimental="response.data.is_experimental"
:pubmed="response.data.protein_pubmed_ids" :db-tags="response.data.protein_source_db_tags">
</llps-table>
<!-- {{response.data.experiments}}-->
......
web/src/components/LlpsTable.vue
+ 104
− 1
View file @ fd4fcb35
......@@ -56,7 +56,7 @@
export default {
name: 'llps-table',
props: ['id', 'data', 'map', 'is-experimental'],
props: ['id', 'data', 'map', 'pubmed', 'db-tags', 'is-experimental'],
data() {
return {
};
......@@ -81,6 +81,29 @@
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)
const url = 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&retmode=json&id='
const request = url + item;
fetch(request)
.then(response => response.json())
.then((response) => {
setTimeout(() => {
const res = response.result[item]
let $row = $('#' + item)
$row.attr('aria-label', `${res.title}\n\n${_.map(res.authors, a => a.name).join(', ')}`)
}, 0);
});
},
createTable(id, data) {
const vm = this;
......@@ -126,6 +149,40 @@
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",
fnCreatedCell: (nTd, sData, oData) => {
// console.log(sData)
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('')
}
}
},
{
title: 'DB',
data: 'uniprot_id',
className: "text-nowrap",
fnCreatedCell: (nTd, sData, oData) => {
// console.log(sData)
let data = vm.dbTags[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.join(", "));
} else {
$(nTd).html('')
}
}
},
......@@ -205,9 +262,44 @@
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",
fnCreatedCell: (nTd, sData, oData) => {
// console.log(sData)
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('')
}
}
},
{
title: 'DB',
data: 'uniprot_id',
className: "text-nowrap",
fnCreatedCell: (nTd, sData, oData) => {
// console.log(sData)
let data = vm.dbTags[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.join(", "));
} else {
$(nTd).html('')
}
}
},
......@@ -298,6 +390,12 @@
const row = table.row(tr);
vm.forwardUniprot(row.data().uniprot_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;
......@@ -359,6 +457,11 @@
color: #0065b9;
}
.pubmed-link {
font-weight: bold;
color: #0065b9;
}
.external-link {
font-weight: bold;
color: #0065b9;
......
web/src/components/ProteinDetailPage.vue
+ 97
− 7
View file @ fd4fcb35
......@@ -83,12 +83,41 @@
{{response.data.functional_type}}
</div>
</div>
<!--<div class="row">-->
<!--<div class="text col-sm-3">Primary Datasource</div>-->
<!--<div class="col-sm-9">-->
<!--{{dbNames[response.data.primary_data_source]}}-->
<!--</div>-->
<!--</div>-->
<div class="row">
<div class="text col-sm-3">Primary Datasource</div>
<div class="col-sm-9">
{{response.data.source_db_tags.join(", ")}}
</div>
</div>
<div class="row">
<div class="text col-sm-3">Pubmed</div>
<div class="col-sm-6">
<div>
<span v-for="(item, index) in getPubMedIds(response.data.pubmed_ids)" v-bind:key="index">
<a :id="item" :href="'https://pubmed.ncbi.nlm.nih.gov/' + item" class="uniprot-link tooltipped tooltipped-n tooltipped-multiline" @mouseover="fetchPubMedId(item)"
target="_blank">
{{item}}
<i class="glyphicon glyphicon-link"></i>
</a>
</span>
</div>
<div id="more"
v-bind:class="{active: response.data.pubmed_ids.length <= 7}">
<span v-for="(item, index) in getMorePubIds(response.data.pubmed_ids)" v-bind:key="index">
<a :id="item" :href="'https://pubmed.ncbi.nlm.nih.gov/' + item" class="uniprot-link tooltipped tooltipped-n tooltipped-multiline" @mouseover="fetchPubMedId(item)" target="_blank">
{{item}}
<i class="glyphicon glyphicon-link"></i>
</a>
<br v-if="index % 7 === 6" />
</span>
</div>
</div>
<div class="col-sm-2" v-show="response.data.pubmed_ids.length > 7">
<a class="uniprot-link" v-on:click="showMore('#more', 'pub', response.length)" v-show="!shownMore.pub"><i class="fa fa-angle-double-down" aria-hidden="true" style="color: royalblue;" ></i> Show more</a>
<a class="uniprot-link" v-on:click="showLess('#more', 'pub')" v-show="shownMore.pub"><i class="fa fa-angle-double-up" aria-hidden="true" style="color: royalblue;" ></i> Show less</a>
</div>
</div>
<!--<div class="row">-->
<!--<div class="text col-sm-3">Evidence Stars</div>-->
<!--<div class="col-sm-9">-->
......@@ -156,7 +185,7 @@
<a :href="'/condensate/' + item.canonical_id" class="uniprot-link" target="_blank">{{item.name}}</a>
</td>
<!--<td>{{getDbNames(item.data_sources)}}</td>-->
<td>{{item.proteins.length}}</td>
<td>{{item.protein_count}}</td>
<!--<td>-->
<!--<span v-for="(item, index) in getSingleRating(item.data_sources)" :class="item" v-bind:key="index"/>-->
<!--</td>-->
......@@ -180,6 +209,8 @@
import fetchProtein from '@/components/DDCODE/fetchProtein.vue'
import IuPred2Chart from "@/components/IUPred2Chart";
import BarcodePlot from "@/components/BarcodePlot";
const $ = window.jQuery = require('jquery');
const _ = require('lodash')
require('./js/clipboard')
......@@ -191,6 +222,9 @@
props: ['proteinId'],
data() {
return {
shownMore: {
pub: false,
},
protein: this.$route.params.protein ? this.$route.params.protein : this.proteinId,
dbNames: require('./js/const').db
}
......@@ -198,9 +232,57 @@
computed: {
},
methods: {
getPubMedIds(ids) {
let outIds = [];
ids.forEach((i, idx) => {
outIds.push(`${i}`)
})
return outIds.slice(0, 7)
},
getMorePubIds(ids) {
let outIds = [];
ids.forEach(i => {
outIds.push(`${i}`)
})
return outIds.slice(7)
},
showLess(id, clazz) {
let $rows = $(id)
$rows.removeClass('active')
this.shownMore[clazz] = false
},
showMore(id, clazz) {
let $rows = $(id)
$rows.addClass('active')
this.shownMore[clazz] = true
},
getDbNames(names) {
return _.map(names, i => this.dbNames[i]).join(', ')
},
getTitleAuthors(title, data) {
return `${title}\n\n${_.map(data, a => a.name).join(', ')}`
},
fetchPubMedId(item) {
const vm = this
console.log(item)
const url = 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&retmode=json&id='
const request = url + item;
fetch(request)
.then(response => response.json())
.then((response) => {
setTimeout(() => {
const res = response.result[item]
let $row = $('#' + item)
$row.attr('aria-label', vm.getTitleAuthors(res.title, res.authors))
}, 0);
});
},
getRating(data) {
const scoreMap = {'hungarian': 5, 'blue': 5, 'pink': 1, 'grey': 1}
let r = []
......@@ -325,4 +407,12 @@
.panel {
font-size: 1.2rem;
}
#more {
display: none;
}
#more.active {
display: table-row;
}
</style>
web/src/components/js/const.js
+ 2
− 1
View file @ fd4fcb35
export const host = '/api';
export const devHost = 'http://localhost:5001';
// export const devHost = 'http://localhost:5001';
export const devHost = '/api';
export const db = { 'pink': 'DrLLPS', 'blue': 'LLPSDB', 'hungarian': 'PhaSePro', 'grey': 'PhaSepDB' }
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