AboutPage.vue

<template>
  <div id="page-content-wrapper" class="main">
    <ul class="nav nav-tabs">
      <li role="presentation">
        <router-link to="/">
          Home
        </router-link>
      </li>
      <li role="presentation" class="active">
        <router-link to="/about">
          About
        </router-link>
      </li>
      <li role="presentation">
        <router-link to="/browse">
          Browse
        </router-link>
      </li>
      <li role="presentation">
        <router-link to="/statistics">
          Statistics
        </router-link>
      </li>
      <li role="presentation">
        <router-link to="/encyclopedia">
          Encyclopedia
        </router-link>
      </li>
    </ul>
    <h2>DD-Code</h2>
    <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>
    <p>
      DD-CODE is a comprehensive, manually curated database of biomolecular condensates and their constituents as well as an encyclopedia of the scientific terms used to describe and characterize them.
      Biomolecular condensates are cellular structures that are formed by phase separation. Phase separation is a thermodynamically passive process by which a homogeneous liquid solution (or phase) of macromolecular components separates (or demixes) into two distinct phases, one phase that is enriched for the macromolecules (<b>dense</b>) and another phase that is depleted of the same macromolecules (<b>dilute</b>). This allows for selective enrichment (or depletion) of certain proteins, thereby facilitating compartmentalisation. In cells, phase separation is driven by <b>scaffold</b> proteins/nucleic acids, which in turn recruit <b>client</b> molecules into the condensate. It is important to note that a particular protein/nucleic acid may be a scaffold in one condensate but the client in another; (and that most molecules exist along the scaffold-client spectrum).
      Phase separation is now thought to underlie many biological processes, including heterochromatin formation, nucleocytoplasmic transport, and the formation of membraneless compartments such as nucleoli.
      Membraneless compartments exhibit various material properties, such as liquid-like compartments (e.g. P-granules), amorphous gels (e.g. centrosomes), dynamic solids (e.g. microtubules). The “hardening” or aging of liquid-like compartments is also linked to diseases (e.g FUS and ALS).
    </p>
    <p>
      We hope that DD-CODE will become a valuable resource for the phase separation community. The DD-CODE project aims to 1) collect information on all biomolecular condensates and on their constituents proteins and nucleic acids; 2) create an encyclopedia and ontology of the scientific terms and definitions used by the community and 3) standardise the terminology of the field.
    </p>
    <p>
      All data are manually curated and experimental details and references are provided; this forms the basis of our scoring system for experimental evidence for condensate formation.
      <br/>
      This is an exciting, new, dynamic and rapidly growing field illustrated by the steep growth in the number of publications in PubMed. Here, we engage the community to codify and validate scientific information via crowd-scourcing. Become an annotator!
    </p>


    <div style="float: left">
      <h3>Contact Information</h3>
      <p>
        <a href="mailto:sghosh@mpi-cbg.de">sghosh@mpi-cbg.de</a>
        and
        <a href="mailto:toth-petroczy@mpi-cbg.de">toth-petroczy@mpi-cbg.de</a>
      </p>
      <!--        <h3>Reference</h3>-->
      <!--        <p>-->
      <!--            New publication authors will be provided.-->
      <!--            <strong>New publication title will be provided.</strong> Journal Name: ***-***.<br>-->
      <!--            <a href="http://www.ncbi.nlm.nih.gov/pubmed/[id]">[PubMed]</a>-->
      <!--        </p>-->
    </div>
  </div>
</template>

<script>
const _ = require('lodash')

export default {
  name: 'LandingPage',
  components: {
  },
  props: {
    msg: String
  },
  data() {
    return {
      keyword: '',
      species: 'Homo sapiens (9606)',
      searchKeyword: '',
      pick: 'protein',
      isDev: process.env.NODE_ENV === 'development'
    }
  },
  computed: {
    proteinNameList: {
      get() {
        return _.map(this.proteinList, d => { return {text: d.proteinName}; })
      },
      set(obj) {
        const idx = this.proteinList.findIndex(d => d.proteinName === obj.tag.text)
        this.$store.dispatch('Param/removeProtein', idx);
        obj.deleteTag()
        // console.log(this.$store.getters['Param/proteinList'])
      }
    },
  },
  methods: {
    searchWithKeyword() {
      const vm = this

      const host = vm.isDev? require('./js/const').devHost : require('./js/const').host;
      // console.log(/\((\d+)\)$/gm.exec(vm.species))
      // console.log(vm.species);
      const taxId = vm.species === 'All' ? null : /\((\d+)\)$/gm.exec(vm.species)[1];
      const page = 1;
      // console.log(`http://${host}/proteins?query=${vm.keyword}&species_tax_id=${taxId}&page=${page}`)
      vm.searchKeyword = vm.keyword
      // console.log(vm.pick)

      if(vm.pick === 'protein') {
        vm.$refs.search.fetchProteinList(vm.keyword, taxId)
      } else if(vm.pick === 'condensate') {
        vm.$refs.search.fetchCondensateList(vm.keyword, taxId)
      }
      // /* eslint-disable no-console */
      // console.log(this.searchKeyword)
    }
  }
}
</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>