LandingPage.vue

<template>
    <div id="page-content-wrapper" class="main">
        <h2>Dresden Condensate Database and Encyclopedia {{isDev?'(Dev version)':''}}</h2>
        <p>
            <b>
              DD-CODE is a comprehensive, manually curated database of biomolecular condensates and an encyclopedia of the scientific terms used to describe and characterize those condensates.
            </b>
            <br/>
            <br/>
            Please search for your proteins of interest!
        </p>

        <form class="form-horizontal" autocomplete="off" onSubmit="return false;">
            <div class="form-group">
                <label class="control-label col-sm-2" for="species">Species</label>
                <div class="col-sm-4">
                    <fetch-species>
                        <template slot-scope="{response, loading}">
                            <div v-if="loading">Loading...</div>
                            <div v-else>
                                <select class="form-control input-sm" id="species" v-model="species">
                                    <option v-for="item in response.data" :key="item.tax_id">
                                        {{item._id && item._id !== 0? `${item._id} (${item.tax_id})`: 'All'}}</option>
                                </select>
                            </div>
                        </template>
                    </fetch-species>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="keyword">Search</label>
                <div class="col-sm-4">
                    <vue-simple-suggest
                        v-model="selected"
                        :list="getSuggestionList">
                      <!-- Filter by input text to only show the matching results -->
                      <input class="form-control input-sm" id="keyword" v-model="keyword" type="text" placeholder="Protein or Condensate name: "/>
                    </vue-simple-suggest>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2"></label>
                <div class="col-sm-4 input-sm">
                    <input class="radio-inline" type="radio" v-model="pick" value="protein" id="protein"> <label class="radio-label" for="protein">Protein</label>
                    <input class="radio-inline" type="radio" v-model="pick" value="condensate" id="condensate"> <label class="radio-label" for="condensate">Condensate</label>
                    <span style="float: right">
                    Examples: <router-link to="/protein_example">UNE6</router-link>,&nbsp;&nbsp;
                    <router-link to="/condensate_example">nucleolus__3702</router-link>
                    </span>
                </div>
                <div class="col-sm-2">
                    <button class="btn btn-primary mb-2" type="submit" @click="searchWithKeyword">Search</button>
                </div>
            </div>
        </form>

        <!--<div>{{require('lodash').map(this.$store.getters['Param/proteinList'], d => d.proteinName)}}</div>-->
        <!--<tags-input v-model="proteinNameList"/>-->
        <!--<div>-->
            <!--<router-link to="/endo2" tag="button">Overview</router-link>-->
            <!--<router-link to="/pheno_profile" tag="button">Phenotype Profiles</router-link>-->
        <!--</div>-->

            <Search ref="search" >
                <template slot-scope="{response, loading}">
                    <div v-if="loading">Loading...</div>
                    <div v-else-if="response">
                      <div v-show="response.count === 0">No results!</div>
                      <data-table v-show="response.count > 0" id='dataTable' :category="searchPick" :data='response.data' :keyword='keyword'/>
                    </div>
                </template>
            </Search>
    </div>
</template>

<script>
  import Search from '@/components/Search.vue'
  import DataTable from '@/components/DataTable.vue'
  import FetchSpecies from '@/components/DDCODE/fetchSpecies.vue'
  import VueSimpleSuggest from 'vue-simple-suggest'

  const _ = require('lodash')
  const apikey = require('./js/const').apikey;

  export default {
    name: 'LandingPage',
    components: {
      Search, FetchSpecies, DataTable, VueSimpleSuggest
    },
    props: {
      msg: String
    },
    data() {
      return {
        selected: '',
        keyword: '',
        species: 'Homo sapiens (9606)',
        searchKeyword: '',
        pick: 'protein',
        searchPick: '',
        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'])
        }
      },
    },
    watch: {
      selected: {
        handler: function (key) {
          this.keyword = key
        },
        deep: true
      }
    },
    methods: {
      getSuggestionList() {
        const vm = this

        const query = vm.keyword

        let host = vm.isDev ? require('./js/const').devHost : require('./js/const').host;
        const taxId = vm.species === 'All' ? 'all' : /\((\d+)\)$/gm.exec(vm.species)[1];
        let url = vm.species === 'All' ? `${host}/${vm.pick}s?query=${query}&size=10000` :
          `${host}/${vm.pick}s?query=${query}&species_tax_id=${taxId}&size=10000`;

        // console.log(process.env.VUE_APP_TITLE)
        // console.log(process.env.VUE_APP_API_KEY)

        return fetch(url, {
          method: 'GET',
          mode: 'cors',
          cache: 'no-cache',
          headers: {
            Authorization: `Bearer ${apikey}`
          }})
            .then(response => response.json())
            .then(json => _.uniq(_.map(json.data, c => c.gene_name || c.name)));
      },
      searchWithKeyword() {
        const vm = this

        // console.log(/\((\d+)\)$/gm.exec(vm.species))
        // console.log(vm.species);
        const taxId = vm.species === 'All' ? 'all' : vm.species === 'Chimeras' ? '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)

        vm.searchPick = vm.pick;
        if(vm.searchPick === 'protein') {
          vm.$refs.search.fetchProteinList(vm.keyword, taxId)
        } else if(vm.searchPick === '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');
    @import url('~@/assets/datatable.css');
    @import url('~@/assets/vue-simple-suggest-styles.css');

    .main {
        margin: 1.5rem;
    }

    h3 {
        margin: 40px 0 0;
    }

    a {
        color: #42b983;
    }

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

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