AboutPage.vue

<template>
  <div
    id="page-content-wrapper"
    class="flex flex-wrap justify-center"
  >
    <div class="w-5/6">
      <h2 class="text-uppercase">
        DD-Code
      </h2>
      <p>
        DD-CODE is a comprehensive, manually curated database for
        <a
          href="https://wiki.ddcode.org/Membraneless_compartments"
          class="hover:no-underline hover:text-green-600"
        >biomolecular condensates</a> and their constituents as well as
        an <a
          href="https://wiki.ddcode.org/"
          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="https://wiki.ddcode.org/Membraneless_compartments"
          class="hover:no-underline hover:text-green-600"
        >phase separation</a>. In cells, phase separation is driven by <a
          href="https://wiki.ddcode.org/Scaffolds_and_Clients"
          class="hover:text-green-600 hover:no-underline"
        >driver</a> 
        proteins/nucleic acid, which in turn recruit <a
          href="https://wiki.ddcode.org/Scaffolds_and_Clients"
          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="https://wiki.ddcode.org/Scaffolds_and_Clients"
          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 scoring system.
      </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"
          /> (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"
            />
          </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>