Close #2, #3

Remove "Browse" Page; Replace with example page
Separate Tabs for Biomolecular Condensates(Cell Organeles) & Synthetic Condensates(Experiments)

web/src/components/BiomolecularPage.vue

+<template>
+    <div id="page-content-wrapper" class="main">
+        <h2>Biomolecular Condensates(Cell Organeles)</h2>
+
+        <fetch-all-condensates is-experimental="false">
+            <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='condensateTable' category="condensate" :data='response.data'/>
+                </div>
+            </template>
+        </fetch-all-condensates>
+    </div>
+</template>
+
+<script>
+  import FetchAllCondensates from "@/components/DDCODE/fetchAllCondensates";
+  import DataTable from '@/components/DataTableCondensate.vue'
+  const _ = require('lodash')
+
+  export default {
+    name: 'BiomolecularPage',
+    components: {
+      FetchAllCondensates, DataTable
+    },
+    props: {
+      msg: String
+    },
+    data() {
+      return {
+        isDev: process.env.NODE_ENV === 'development'
+      }
+    },
+    computed: {
+    },
+    methods: {
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+    @import url('~@/assets/bootstrap.css');
+    @import url('~@/assets/datatable.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>

web/src/components/DDCODE/fetchAllCondensates.vue

@@ -11,6 +11,7 @@ let host = require('../js/const').host;
 
 export default {
   name: "fetchAllCondensates",
+  props: ['is-experimental'],
   data() {
     return {
       loading: true,
@@ -28,7 +29,9 @@ export default {
         host = require('../js/const').devHost;
       }
 
-      let url = `${host}/condensates?size=100000`;
+      // console.log(vm.isExperimental)
+
+      let url = `${host}/condensates?size=100000&is_experimental=${vm.isExperimental}`;
 
       fetch(url)
           .then(response => response.json())

web/src/components/DataTableCondensate.vue

@@ -181,7 +181,7 @@
         const vm = this;
         let exports = [];
 
-        let header = ['Name', 'Unique Name', 'Species Name', 'Species Tax Id', 'Proteins'];
+        let header = ['Name', 'Canonical ID', 'Biomolecular/Synthetic', 'Species Name', 'Species Tax Id', 'Proteins'];
         exports.push(header.join(', '));
 
         _.forEach(vm.data, item => {
@@ -190,7 +190,7 @@
             proteins.push(`${i}`)
           })
 
-          exports.push([`"${item.name}"`, `"${item.unique_name}"`, `"${item.species_name}"`, item.species_tax_id,`"${proteins.join('\t')}"`].join(','));
+          exports.push([`"${item.name}"`, `"${item.canonical_id}"`, `"${item.is_experimental ? 'Syntehtic' : 'Biomolecular'}"`, `"${item.species_name}"`, item.species_tax_id,`"${proteins.join('\t')}"`].join(','));
         })
 
         let blob = new Blob([exports.join('\n')], {type: 'text/csv'})
@@ -208,7 +208,7 @@
         const vm = this;
         let exports = [];
 
-        let header = ['Name', 'Unique Name', 'Species Name', 'Species Tax Id', 'Proteins'];
+        let header = ['Name', 'Canonical ID', 'Biomolecular/Synthetic', 'Species Name', 'Species Tax Id', 'Proteins'];
         exports.push(header.join(', '));
 
         _.forEach(vm.data, item => {
@@ -217,7 +217,7 @@
             proteins.push(`${i}`)
           })
 
-          exports.push([item.name, item.unique_name, item.species_name, item.species_tax_id, proteins.join(', ')].join('\t'));
+          exports.push([item.name, item.canonical_id, item.is_experimental ? 'Syntehtic' : 'Biomolecular', item.species_name, item.species_tax_id, proteins.join(', ')].join('\t'));
         })
 
         let blob = new Blob([exports.join('\n')], {type: 'text/tsv'})

web/src/components/Links.vue

@@ -15,9 +15,19 @@
         <!--Condensates-->
       <!--</router-link>-->
     <!--</li>-->
-    <li role="presentation" v-bind:class="{ active: $route.name === 'browse' }">
-      <router-link to="/browse">
-        Browse
+    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'browse' }">-->
+      <!--<router-link to="/browse">-->
+        <!--Browse-->
+      <!--</router-link>-->
+    <!--</li>-->
+    <li role="presentation" v-bind:class="{ active: $route.name === 'biomolecular' }">
+      <router-link to="/biomolecular">
+        Biomolecular Condensates
+      </router-link>
+    </li>
+    <li role="presentation" v-bind:class="{ active: $route.name === 'synthetic' }">
+      <router-link to="/synthetic">
+        Synthetic Condensates
       </router-link>
     </li>
     <li role="presentation" v-bind:class="{ active: $route.name === 'statistics' }">

web/src/components/SyntheticPage.vue

+<template>
+    <div id="page-content-wrapper" class="main">
+        <h2>Synthetic Condensates(Experiments)</h2>
+
+        <fetch-all-condensates is-experimental="true">
+            <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='condensateTable' category="condensate" :data='response.data'/>
+                </div>
+            </template>
+        </fetch-all-condensates>
+    </div>
+</template>
+
+<script>
+  import FetchAllCondensates from "@/components/DDCODE/fetchAllCondensates";
+  import DataTable from '@/components/DataTableCondensate.vue'
+  const _ = require('lodash')
+
+  export default {
+    name: 'SyntheticPage',
+    components: {
+      FetchAllCondensates, DataTable
+    },
+    props: {
+      msg: String
+    },
+    data() {
+      return {
+        isDev: process.env.NODE_ENV === 'development'
+      }
+    },
+    computed: {
+    },
+    methods: {
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+    @import url('~@/assets/bootstrap.css');
+    @import url('~@/assets/datatable.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>

web/src/router/index.js

@@ -31,11 +31,16 @@ export default new Router({
       name: 'browse',
       component: () => import('@/components/BrowsePage'),
     },
-    // {
-    //   path: '/condensates',
-    //   name: 'condensates',
-    //   component: () => import('@/components/BrowsePage'),
-    // },
+    {
+      path: '/biomolecular',
+      name: 'biomolecular',
+      component: () => import('@/components/BiomolecularPage'),
+    },
+    {
+      path: '/synthetic',
+      name: 'synthetic',
+      component: () => import('@/components/SyntheticPage'),
+    },
     {
       path: '/statistics',
       name: 'statistics',