<template>
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<!--<div class="bg-light border-right" id="sidebar-wrapper">-->
<!--<!–<div class="sidebar-heading">Menu </div>–>-->
<!--<div class="list-group list-group-flush">-->
<!--<a href="#" class="list-group-item list-group-item-action bg-light">Search</a>-->
<!--<a href="#" class="list-group-item list-group-item-action bg-light">Columns</a>-->
<!--<a href="#" class="list-group-item list-group-item-action bg-light">Filters</a>-->
<!--<a href="#" class="list-group-item list-group-item-action bg-light">Download</a>-->
<!--<a href="#" class="list-group-item list-group-item-action bg-light">Contacts</a>-->
<!--</div>-->
<!--</div>-->
<!-- /#sidebar-wrapper -->
<div id="page-content-wrapper" class="main">
<fetch-protein :protein="protein">
<template slot-scope="{response, loading}">
<slot :response="response" :loading="loading">
<div v-if="loading">Loading...</div>
<div v-else-if="response !== null">
<h2>{{ response.data.gene_name }}</h2>
<h4 class="round">General Information</h4>
<div class="panel panel-default">
<div class="panel-body">
<div class="container-fluid col-md-12">
<div class="row">
<div class="text col-sm-3">Name</div>
<div class="col-sm-9">
<b>Protein {{response.data.name}}</b>
</div>
</div>
<div class="row">
<div class="text col-sm-3">Species</div>
<div class="col-sm-9">
{{response.data.species_name + ' (' + response.data.species_tax_id + ')'}}
</div>
</div>
<div class="row">
<div class="text col-sm-3">Ensembl ID</div>
<div class="col-sm-9">
<div v-if="response.data.ensembl_id">
<a :href="'https://www.ensembl.org/id/' + response.data.ensembl_id" class="uniprot-link" target="_blank">
{{response.data.ensembl_id}}
<i class="glyphicon glyphicon-link"></i></a>
</div>
</div>
</div>
<div class="row">
<div class="text col-sm-3">Ensembl Gene ID</div>
<div class="col-sm-9">
<div v-if="response.data.ensembl_gene_id">
<a :href="'https://www.ensembl.org/id/' + response.data.ensembl_gene_id" class="uniprot-link" target="_blank">
{{response.data.ensembl_gene_id}}
<i class="glyphicon glyphicon-link"></i></a>
</div>
</div>
</div>
<div class="row">
<div class="text col-sm-3">UniProt</div>
<div class="col-sm-9">
<div v-if="response.data.uniprot_id">
<a :href="'https://www.uniprot.org/uniprot/' + response.data.uniprot_id" class="uniprot-link" target="_blank">
{{response.data.uniprot_id + ' (' + response.data.uniprot_readable_id + ')'}}
<i class="glyphicon glyphicon-link"></i></a>
</div>
</div>
</div>
<div class="row">
<div class="text col-sm-3">Antibodies</div>
<div class="col-sm-9">
<div v-if="response.data.uniprot_id">
<a :href="response.data.antibody_link" class="uniprot-link" target="_blank">
{{response.data.uniprot_id}}
<i class="glyphicon glyphicon-link"></i></a>
</div>
</div>
</div>
<div class="row">
<div class="text col-sm-3">Functional Type
<a href="#" class="uniprot-link tooltipped tooltipped-e tooltipped-multiline" aria-label="- Driver: A protein that undergoes phase separation or self assembles to form liquid droplets independent of other proteins, induces the formation of a condensate, or is essential for the integrity of a condensate. This protein is known to be a driver in at least one of the known condensates.
- Client: A protein that is part of a condensate, but is driven to the condensate by a driver protein. This protein is known to be a client in at least one of the known condensates, but never known to be a driver.
- Regulator: A protein that biochemically or enzymatically regulates the formation of a condensate, but is not a part of the condensate. This protein is never known to be a driver or client.
" target="_blank">
<span class="fa fa-info-circle"/>
</a>
</div>
<div class="col-sm-9">
{{response.data.functional_type}}
</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">-->
<!--<span v-for="(item, index) in getRating(response.data.condensates)" :class="item" v-bind:key="index"/>-->
<!--</div>-->
<!--</div>-->
<div class="row">
<div class="text col-sm-3">Sequence</div>
<div class="col-sm-9">
<input type="text" :value="response.data.sequence">
<button class="copy-button" :name="'sequence'" :id="'sequence'" :data-clipboard-text="response.data.sequence"><i class="glyphicon glyphicon-copy"></i> </button>
</div>
</div>
</div>
</div>
</div>
<div v-if="response.data.iupred_score !== null">
<iu-pred2-chart :x="response.data.sequence" :score="response.data.iupred_score"></iu-pred2-chart>
</div>
<barcode-plot :x="response.data.sequence"></barcode-plot>
<div v-show="response.data.llps_ptms !== null && response.data.llps_ptms.length > 0">
<h4 class="round">PTMs affecting condensate formation</h4>
<div class="panel panel-default">
<table class="csi table table-hover table-responsive">
<thead>
<tr class="active">
<th>Name</th>
<th>Type</th>
<th>Enzyme</th>
<th>Position</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in response.data.llps_ptms" v-bind:key="index">
<td>{{item.name}}</td>
<td>{{item.effect_type}}</td>
<td class="text-nowrap">{{item.enzyme}}</td>
<td>{{item.position}}</td>
<td>{{item.effect_description}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div v-show="response.data.condensates !== null && response.data.condensates.length > 0">
<h4 class="round">Condensates</h4>
<div class="panel panel-default">
<table class="csi table table-hover table-responsive">
<thead>
<tr class="active">
<th>Name</th>
<!--<th>Data Sources</th>-->
<th>No. of Proteins</th>
<!--<th>Evidence Stars</th>-->
<th>Species</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in response.data.condensates" v-bind:key="index">
<td>
<a :href="'/condensate/' + item.canonical_id" class="uniprot-link" target="_blank">{{item.name}}</a>
</td>
<!--<td>{{getDbNames(item.data_sources)}}</td>-->
<td>{{item.protein_count}}</td>
<!--<td>-->
<!--<span v-for="(item, index) in getSingleRating(item.data_sources)" :class="item" v-bind:key="index"/>-->
<!--</td>-->
<td>{{item.species_name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</slot>
</template>
</fetch-protein>
</div>
</div>
<!-- /#wrapper -->
</template>
<script>
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')
export default {
name: 'LandingPage',
components: {
fetchProtein, IuPred2Chart, BarcodePlot
},
props: ['proteinId'],
data() {
return {
shownMore: {
pub: false,
},
protein: this.$route.params.protein ? this.$route.params.protein : this.proteinId,
dbNames: require('./js/const').db
}
},
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;
let $row = $('#' + item)
if(!$row.attr('aria-label')) {
fetch(request)
.then(response => response.json())
.then((response) => {
setTimeout(() => {
const res = response.result[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 = []
_.each(data, c => {
r.push(_.max(_.map(c.data_sources, i => scoreMap[i])));
})
const rating = _.max(r);
r = []
for (let i = 0; i < 5; i++) {
if (i < rating) {
r.push('fa fa-star checked')
} else {
r.push('fa fa-star')
}
}
return r;
},
getSingleRating(data) {
const scoreMap = {'hungarian': 5, 'blue': 5, 'pink': 1, 'grey': 1}
const rating = _.max(_.map(data, i => scoreMap[i]));
let r = []
for (let i = 0; i < 5; i++) {
if (i < rating) {
r.push('fa fa-star checked')
} else {
r.push('fa fa-star')
}
}
return r;
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
@import url('~@/assets/bootstrap.css');
@import url('~@/assets/datatable.css');
@import url('~@/assets/tooltip.css');
.main {
/*margin-left: 200px;*/
margin-left: 20px;
}
h3 {
margin: 40px 0 0;
}
a {
color: #42b983;
}
#wrapper {
overflow-x: hidden;
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
position: absolute;
z-index: 1; /* Stay on top */
left: 0;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
position: -webkit-sticky;
position: sticky;
top: 0;
width: 15rem;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
@media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
.uniprot-link {
font-weight: bold;
color: #0065b9;
}
.checked {
color: orange;
}
.d-flex {
display: -ms-flexbox !important;
display: flex !important;
}
.panel {
font-size: 1.2rem;
}
#more {
display: none;
}
#more.active {
display: table-row;
}
</style>