AboutPage.vue

<template>
  <div id="page-content-wrapper" class="flex flex-wrap justify-center">
    <div class="w-5/6">
       <h2>DD-Code</h2>
    <p>
      DD-CODE is a comprehensive, manually curated database for
      <a href="/encyclopedia" class="hover:no-underline hover:text-green-600">biomolecular condensates</a> and their constituents as well as
      an <a href="/encyclopedia" class="hover:no-underline hover:text-green-600">encyclopedia</a> for the scientific terms used to describe
      them. Biomolecular condensates are cellular structures that are formed by
     <a href="/encyclopedia" class="hover:no-underline hover:text-green-600">phase separation</a>. In cells, phase separation is driven by <a href="/encyclopedia" class="hover:text-green-600 hover:no-underline">driver</a> 
      proteins/nucleic acid, which in turn recruit <a href="/encyclopedia" class="hover:no-underline hover:text-green-600">client</a> molecules into the
      condensate. It is important to note that a particular protein/nucleic acid
      may be a driver in one condensate but the client in another. Moreover, the
      formation of condensates might be regulated by <a href="/encyclopedia" class="hover:no-underline hover:text-green-600">regulator</a> proteins through
      specific biochemical activities, but they do not necessarily need to be a
      part of the condensate.
    </p>
    <p>
      DD-CODE is aimed at becoming a valuable resource for the phase separation
      and condensate community by providing 1) a reliable literature mined
      database on all biomolecular condensates and their constituents; 2) an
      encyclopedia and ontology of the scientific terms and definitions used in
      the field of phase separation and condensate biology and 3) a standardised
      list of terminologyes in the field. All data here are manually curated and
      experimental details and references are provided; this provides the basis
      of our <a href="/encyclopedia" class="hover:no-underline hover:text-green-600">scoring system</a>.
    </p>
    <p>
     Protein definition: Proteins on DD-CODE are divided three groups.
</p>
    <p>
       <b>Drivers:</b> Proteins which have at least one of the following features.
     <ul class="list-decimal list-inside px-8">
  <li v-for="items in driversList" :key="items">
    {{items}}
  </li>
 
</ul>
    </p>
    <p>
     <b>Clients:</b> Proteins which are part of a condensate, but driven into it by driver proteins.
    </p>
    <p>
     <b>Regulators:</b> Proteins which biochemically/enzymatically regulate the formation of a condensate, but are structurally not part of it. 
    </p>
    <p>
     <b>Scoring system on DD-CODE:</b> At DD-CODE is having three-fold scoring system (evidence stars) 
     <ol class="list-decimal list-inside  px-8">
       <li v-for="items in scoringSysList" :key="items">
         {{items}}
       </li>
     </ol>
    </p>
    <div>
    <p class="underline">
      Evidence of a protein being in a condensate: 
     
    </p>
    <p>
       DD-CODE initially started off as an aggregation of 
      existing protein-phase-separation databases namely - <a href="http://llps.biocuckoo.cn/" class="hover:no-underline hover:text-green-600">http://llps.biocuckoo.cn/</a> (dr_llps), <a href="http://bio-comp.org.cn/llpsdb/home.html " class="hover:no-underline hover:text-green-600">http://bio-comp.org.cn/llpsdb/home.html </a> (llps_db), <a href="http://db.phasep.pro/" class="hover:no-underline hover:text-green-600">http://db.phasep.pro/</a> (phase_pro) and <a href="https://phasepro.elte.hu/" class="hover:no-underline hover:text-green-600"></a> (phase_hu). Within these four source databases, we were also able to find publications (via text mining) stating localization of these phase-separating proteins into biomolecular condensates. 
    </p>
    </div>
    
   <div>
    <p>
      Using the above two datapoints (source database annotations and publications), we devised a rule-based mechanism to rate the evidence of a protein being a condensate, which goes as follow:
      <ul class="list-disc list-inside  px-8">
        <li v-for="items in evidenceProteinRateList" :key="items" v-html="items">
          
        </li>
      </ul>
    </p>
     <p>
      Besides these initial ratings, it is also possible for a contributor to modify these ratings.
    </p>
   </div>
    

   <div>
     <p class="undeline">
      Evidence of the existence of a condensate along with its proteome:

    </p>
    <p>
      Using the above ratings of a protein existing in a condensate, and computing the median of these scores, we provide a rating to the existence of the condensate as a whole.
    </p>
    <p>
      This rating, unlike the previous one though is not editable, and is always recomputed after a round of contributions are accepted and synced.
    </p>
   </div>

   <div>
     <p>
     <span class="underline">Evidence for a protein being a driver:</span> Having any of the below-mentioned features provide a star for a protein being a driver. 
      <ul class="list-decimal list-inside  px-8">
        <li v-for="items in proteinFeaturesList" :key="items">
          {{items}}
        </li>
      </ul>
    </p>
    <p>
      This provides maximum three starts (***) for a protein which is confidently a driver.
    </p>
    </div>
   



    

    <!-- <ul class="a">
      <li>Database: <a href="/">DD-CODE</a></li>
      <li><a href="/encyclopedia">Definitions</a></li>
      <li><a href="/">Crowdsourcing</a></li>
      <li><a href="/about">Evidence stars</a></li>
    </ul> -->
    </div>
   
  </div>
</template>

<script>
const _ = require("lodash");

export default {
  name: "LandingPage",
  components: {},
  props: {
    msg: String,
  },
  data() {
    return {
      driversList: [
        "Undergo phase separation or self-assembly into liquid droplets independent of other proteins.",
        "Induce the formation of a condensate.",
        "Are essential for the integrity of a condensate.",
      ],
      scoringSysList: [
        "A protein being present in a condensate (Rated out of 5)",
        "The existence of a condensate along with its proteome as a whole (Rated out of 5)",
        "A protein being present as a driver in the condensate (Rated out of 3)",
      ],
      evidenceProteinRateList: [
        "Having source database as <b>dr_llps</b> or <b>llps_db</b>: 1/5",
        "Having source database as <b>phase_pro</b> (high-throughput-exp): 2/5",
        "Having source database as <b>phase_pro</b> or <b>phase_hu</b>: 4/5",
        "Having a publication: 4/5",
      ],
      proteinFeaturesList: [
        "Undergo phase separation or self-assembly into liquid droplets independent of other proteins (*).",
        "Induce the formation of a condensate (*).",
        "Are essential for the integrity of a condensate (*)",
      ],
    };
  },
  computed: {},
  methods: {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
@import url("~@/assets/bootstrap.css");

.main {
  margin: 1.5rem;
}

h3 {
  margin: 40px 0 0;
}

a {
  color: #42b983;
}

ul.a {
  list-style-type: disc;
  list-style-position: inside;
}

input[type="radio"] {
  margin: 2px;
}

.radio-label {
  margin-left: 0px;
  margin-right: 5px;
}
</style>