<template>
<div
id="page-content-wrapper"
class="flex flex-wrap justify-center mb-14 text-justify"
>
<div class="w-5/6 text-2xl tracking-wide">
<h2 class="font-bold">
CD-CODE
</h2>
<p>
CD-CODE (CrowDsourcing COndensate Database and Encyclopedia) is a comprehensive, semi-manually curated crowdsourcing database of <a
href="https://wiki.cd-code.org/Membraneless_compartments"
class="color-accent-color"
>biomolecular condensates</a> and their constituents as well as
an <a
href="https://wiki.cd-code.org/"
class="color-accent-color"
>encyclopedia</a> for the scientific terms used to describe
them. Biomolecular condensates are membrane-less organelles that are formed by
<a
href="https://wiki.cd-code.org/Mechanisms_of_Condensate_Formation"
class="color-accent-color"
>liquid-liquid phase separation(LLPS)</a>. In cells, phase separation is driven by <a
href="https://wiki.cd-code.org/Scaffolds_and_Clients"
class="color-accent-color"
>driver</a>
proteins and nucleic acid, which recruit <a
href="https://wiki.cd-code.org/Scaffolds_and_Clients"
class="color-accent-color"
>client</a> molecules into the
condensate.
</p>
<p>
CD-CODE allows for the dynamic and fast addition, and review of new condensates and proteins by contributing users. CD-CODE is a semi-manually curated and annotated database that aggregates information from primary literature and other protein and LLPS databases.
</p>
<p>
<ul class="list-decimal list-inside px-8">
<li>
Uniprot: <a
href="https://uniprot.org"
class="color-accent-color"
>
https://uniprot.org</a>
</li>
<li>
PhaSePro: <a
href="https://phasepro.elte.hu"
class="color-accent-color"
>
https://phasepro.elte.hu</a>
</li>
<li>
LLPSDB: <a
href="http://bio-comp.org.cn/llpsdb/home.html"
class="color-accent-color"
>
http://bio-comp.org.cn/llpsdb/home.html</a>
</li>
<li>
DrLLPS: <a
href="http://llps.biocuckoo.cn"
class="color-accent-color"
>
http://llps.biocuckoo.cn</a>
</li>
<li>
PhaSepDB: <a
href="http://db.phasep.pro"
class="color-accent-color"
>
http://db.phasep.pro</a>
</li>
</ul>
</p>
<p>
If you are interested in becoming a contributor, please join us <a
href="/signup"
class="color-accent-color"
>here</a>.
</p>
<h2 class="font-bold">
Definitions at CD-CODE
</h2>
<p>
<b>Biomolecular condensates:</b> Membrane-less organelles formed by LLPS observed <i>in vivo</i>.
</p>
<p>
<b>Synthetic condensates:</b> <i>In vitro</i> experiments of LLPS.
</p>
<p>
<b>Markers:</b> Proteins that are used to define and label/mark a specific biomolecular condensate. They can help in unique identification of membrane-less organelles. Markers are often drivers.
</p>
<p>
Proteins in CD-CODE are divided into four groups:
</p>
<p>
<b>1. Drivers:</b> Proteins which fulfill at least one of the following criteria (confidence score max. 3 stars).
<ul class="list-disc list-inside px-8">
<li
v-for="items in driversList"
:key="items"
>
{{ items }}
</li>
</ul>
</p>
<p>
<b>2. Clients:</b> Proteins which are part of a condensate, but they are recruited into the condensate by driver proteins. They are not essential to the integrity of a condensate.
</p>
<p>
<b>3. Regulators:</b> Proteins which biochemically or enzymatically regulate the formation of a condensate, but are structurally not part of it.
</p>
<p>
<b>4. Unknown:</b> Proteins that have been associated with condensates but for which the role is unknown.
</p>
<div class="flex justify-center rounded-lg border bg-white my-6 bg-opacity-90 border-gray-300">
<img
src="../assets/figures/version_4.png"
class="object-contain md:w-2/5 lg:w-3/5 rounded-lg"
alt="Driver, Client, Regulator illustration"
>
</div>
<p>
It is important to note that a particular protein may be a driver in one condensate and a client in another one. Moreover, the formation of condensates might be regulated by regulator proteins through specific biochemical activities, but they do not necessarily need to be a part of the condensate.
</p>
<br>
<h4 class="font-bold">
Confidence score for a protein being in a condensate (max. 5 stars):
</h4>
<table class="border-collapse border border-slate-400 table-auto">
<thead>
<tr>
<th class="p-3 border border-slate-300">
Number of stars
</th>
<th class="p-3 border border-slate-300">
Description
</th>
<!-- <th class="p-3 border border-slate-300">
Annotation
</th> -->
</tr>
</thead>
<tbody>
<tr
v-for="items in confidenceScoreTable"
:key="items.description"
>
<td class="p-3 border border-slate-300">
<star-rating
:star-size="20"
:show-rating="false"
:rating="
items.star
"
:read-only="true"
/>
</td>
<td
class="p-3 border border-slate-300"
:class="items.description ==='In vitro' || items.description ==='In vivo'|| items.description ==='In cellulo' ? 'italic' : ''"
>
{{ items.description }}
</td>
<!-- <td class="p-3 border border-slate-300">
Automated
</td> -->
</tr>
<!-- <tr>
<td class="p-3 border border-slate-300">
Two
</td>
<td class="p-3 border border-slate-300">
PubMed reference annotated
</td>
<td class="p-3 border border-slate-300">
Automated
</td>
</tr>
<tr>
<td class="p-3 border border-slate-300">
Three
</td>
<td class="p-3 border border-slate-300">
High-throughput evidence (e.g. mass spectrometry)
</td>
<td class="p-3 border border-slate-300">
Manual
</td>
</tr>
<tr>
<td class="p-3 border border-slate-300">
Four
</td>
<td class="p-3 border border-slate-300">
<i>In vitro</i> evidence (e.g. FRAP)
</td>
<td class="p-3 border border-slate-300">
Manual
</td>
</tr>
<tr>
<td class="p-3 border border-slate-300">
Five
</td>
<td class="p-3 border border-slate-300">
<i>In vivo</i> or <i>in cellulo</i> evidence (e.g. colocalization)
</td>
<td class="p-3 border border-slate-300">
Manual
</td>
</tr> -->
</tbody>
</table>
<br>
<p>
<b>Confidence score for a condensate (max. 5 stars):</b> mean of the confidence scores of its member proteins.
</p>
</div>
</div>
</template>
<script>
import StarRating from 'vue-star-rating';
const _ = require('lodash');
export default {
name: 'LandingPage',
components: { StarRating },
props: {
msg: String,
},
data() {
return {
driversList: [
'Undergo phase separation or self-assembly into liquid droplets independent of other proteins (1/3 stars).',
'Induce the formation of a condensate (2/3 stars).',
'Are essential for the integrity of a condensate (3/3 stars).',
],
confidenceScoreTable: [
// { star: 0, description: "Reported in other LLPS database" },
{ star: 1, description: 'PubMed reference annotated' },
{ star: 2, description: 'High throuput experiment (eg. Mass spect.)' },
{ star: 3, description: 'In vitro' },
{ star: 4, description: 'In cellulo' },
{ star: 5, description: 'In vivo' },
],
};
},
computed: {},
methods: {
convertItalic(val) {
console.log(val.italics());
return val.italics();
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("~@/assets/bootstrap.css");
.main {
margin: 1.5rem;
}
h3 {
margin: 40px 0 0;
}
ul.a {
list-style-type: disc;
list-style-position: inside;
}
input[type="radio"] {
margin: 2px;
}
.radio-label {
margin-left: 0px;
margin-right: 5px;
}
</style>