diff --git a/web/src/assets/figures/Figure_1a_v2.png b/web/src/assets/figures/Figure_1a_v2.png
new file mode 100644
index 0000000000000000000000000000000000000000..196cd26fde9ff1019cda79f9516f10e424b06acf
Binary files /dev/null and b/web/src/assets/figures/Figure_1a_v2.png differ
diff --git a/web/src/assets/figures/version 4.png b/web/src/assets/figures/version_4.png
similarity index 100%
rename from web/src/assets/figures/version 4.png
rename to web/src/assets/figures/version_4.png
diff --git a/web/src/components/AboutPage.vue b/web/src/components/AboutPage.vue
index 109e9c922703304ef665c1fd9358e96ae24ca63d..7c56c4379cb267265b43c2cbb32f077340fa0005 100644
--- a/web/src/components/AboutPage.vue
+++ b/web/src/components/AboutPage.vue
@@ -117,7 +117,7 @@
</p>
<div class="flex justify-center rounded-lg border bg-white my-6 bg-opacity-90 border-gray-300">
<img
- src="../assets/figures/version 4.png"
+ src="../assets/figures/version_4.png"
class="object-contain md:w-2/5 lg:w-3/5 rounded-lg"
alt="Driver, Client, Regulator illustration"
>
diff --git a/web/src/components/LandingPage.vue b/web/src/components/LandingPage.vue
index 367bc0e211fafca61573a872d24c4207fe891381..cc0940aa241f57cfc236db1f24928af10907c86d 100644
--- a/web/src/components/LandingPage.vue
+++ b/web/src/components/LandingPage.vue
@@ -47,35 +47,36 @@
class="radio-inline"
type="radio"
value="protein"
- >
+ />
<label
class="radio-label text-2xl font-medium"
for="protein"
- >Protein</label>
+ >Protein</label
+ >
<input
id="condensate"
v-model="pick"
class="radio-inline"
type="radio"
value="condensate"
- >
+ />
<label
class="radio-label text-2xl font-medium"
for="condensate"
- >Condensate</label>
+ >Condensate</label
+ >
</div>
</div>
<div class="form-group">
<label
class="control-label font-medium col-sm-2"
for="species"
- >Species</label>
+ >Species</label
+ >
<div class="col-sm-8">
<fetch-species>
<template slot-scope="{ response, loading }">
- <div v-if="loading">
- Loading...
- </div>
+ <div v-if="loading">Loading...</div>
<div v-else>
<select
id="species"
@@ -114,7 +115,8 @@
<label
class="control-label font-medium col-sm-2"
for="keyword"
- >Search</label>
+ >Search</label
+ >
<div class="col-sm-8">
<vue-simple-suggest
v-model="selected"
@@ -139,26 +141,26 @@
"
type="text"
:placeholder="placeholder"
- >
+ />
<div
slot="suggestion-item"
slot-scope="{ suggestion: suggestionItem }"
>
- <span
- v-if="suggestionItem.type === 'protein'"
- >{{ suggestionItem.gene_name }} ({{
- suggestionItem.id
- }}): {{ suggestionItem.species_name }}</span>
- <span
- v-else-if="suggestionItem.type === 'condensate'"
- >{{ suggestionItem.id }}:
- {{ suggestionItem.species_name }}</span>
- <span
- v-else-if="suggestionItem.type === 'search'"
- >Search for
+ <span v-if="suggestionItem.type === 'protein'"
+ >{{ suggestionItem.gene_name }} ({{
+ suggestionItem.id
+ }}): {{ suggestionItem.species_name }}</span
+ >
+ <span v-else-if="suggestionItem.type === 'condensate'"
+ >{{ suggestionItem.id }}:
+ {{ suggestionItem.species_name }}</span
+ >
+ <span v-else-if="suggestionItem.type === 'search'"
+ >Search for
<b>{{
suggestionItem.id.replace(/\#/g, "")
- }}</b></span>
+ }}</b></span
+ >
</div>
</vue-simple-suggest>
</div>
@@ -184,16 +186,14 @@
<div class="form-group">
<label class="col-sm-2" />
<div class="col-sm-8 input-sm">
- <span
- style="float: right"
- class="font-medium"
- >
+ <span style="float: right" class="font-medium">
Examples:
<span class="text-pink-base font-medium">
- <router-link to="/protein_example">UNE6</router-link>,
- <router-link
- to="/condensate_example"
- >nucleolus__3702</router-link>
+ <router-link to="/protein_example">UNE6</router-link
+ >,
+ <router-link to="/condensate_example"
+ >nucleolus__3702</router-link
+ >
</span>
</span>
</div>
@@ -209,13 +209,9 @@
<div>
<Search ref="search">
<template slot-scope="{ response, loading }">
- <div v-if="loading">
- Loading...
- </div>
+ <div v-if="loading">Loading...</div>
<div v-else-if="response">
- <div v-show="response.count === 0">
- No results!
- </div>
+ <div v-show="response.count === 0">No results!</div>
<data-table
v-show="response.count > 0"
id="dataTable"
@@ -280,12 +276,12 @@
<div class="border p-8 border-gray-300 rounded-lg">
<div class="flex justify-center">
<img
- src="@/assets/figures/figure_1a-removebg-preview.png"
+ src="@/assets/figures/Figure_1a_v2.png"
class="object-contain md:w-full lg:w-4/5 rounded-lg"
alt="Figure"
- >
+ />
</div>
- <p class="text-xl p-4 mt-2 text-justify font-semibold">
+ <p class="text-xl p-4 mt-2 text-justify lg:text-3xl">
Schematic Workflow of CD-CODE. CD-CODE contains curated data
about 225 condensates and 10571 proteins which can be viewed by
users. Contributors can edit the existing data and add more
@@ -303,9 +299,10 @@
<div class="border border-gray-300 rounded-lg">
<a
class="twitter-timeline"
- data-height="800"
+ data-height="1000"
href="https://twitter.com/agnestothp?ref_src=twsrc%5Etfw"
- >Tweets by agnestothp</a>
+ >Tweets by agnestothp</a
+ >
</div>
<div
class="
@@ -318,13 +315,8 @@
p-8
"
>
- <h2 class="mb-10 text-3xl text-center">
- All Contributors
- </h2>
- <contributor-list-table
- id="all"
- entity="all"
- />
+ <h2 class="mb-10 text-3xl text-center">All Contributors</h2>
+ <contributor-list-table id="all" entity="all" />
</div>
<div
class="
@@ -348,18 +340,18 @@
</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';
-import ContributorListTable from './ContributorListTable.vue';
-import TheTeamList from './Team/TheTeamList.vue';
+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";
+import ContributorListTable from "./ContributorListTable.vue";
+import TheTeamList from "./Team/TheTeamList.vue";
-const _ = require('lodash');
-const apikey = require('./js/const').apikey;
+const _ = require("lodash");
+const apikey = require("./js/const").apikey;
export default {
- name: 'LandingPage',
+ name: "LandingPage",
components: {
Search,
FetchSpecies,
@@ -373,28 +365,28 @@ export default {
},
data() {
return {
- selected: '',
- keyword: '',
- species: 'All',
- speciesOption: '',
+ selected: "",
+ keyword: "",
+ species: "All",
+ speciesOption: "",
speciesOptions: undefined,
- searchKeyword: '',
- pick: 'protein',
- searchPick: '',
- placeholder: 'Enter Uniprot ID, gene name, or protein name',
- suggestion: '',
- isDev: process.env.NODE_ENV === 'development',
+ searchKeyword: "",
+ pick: "protein",
+ searchPick: "",
+ placeholder: "Enter Uniprot ID, gene name, or protein name",
+ suggestion: "",
+ isDev: process.env.NODE_ENV === "development",
};
},
computed: {
jwt: function () {
- return this.$store.getters['User/jwt'];
+ return this.$store.getters["User/jwt"];
},
userData: function () {
- return this.$store.getters['User/userData'];
+ return this.$store.getters["User/userData"];
},
getRole: function () {
- return this.$store.getters['User/userRole'];
+ return this.$store.getters["User/userRole"];
},
proteinNameList: {
get() {
@@ -406,7 +398,7 @@ export default {
const idx = this.proteinList.findIndex(
(d) => d.uniprot_id === obj.tag.text
);
- this.$store.dispatch('Param/removeProtein', idx);
+ this.$store.dispatch("Param/removeProtein", idx);
obj.deleteTag();
// console.log(this.$store.getters['Param/proteinList'])
},
@@ -423,10 +415,10 @@ export default {
},
pick: {
handler: function (val) {
- if (val === 'protein') {
- this.placeholder = 'Enter Uniprot ID, gene name, or protein name';
- } else if (val === 'condensate') {
- this.placeholder = 'Enter condensate name';
+ if (val === "protein") {
+ this.placeholder = "Enter Uniprot ID, gene name, or protein name";
+ } else if (val === "condensate") {
+ this.placeholder = "Enter condensate name";
}
},
},
@@ -451,7 +443,7 @@ export default {
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
- js.src = 'https://platform.twitter.com/widgets.js';
+ js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
@@ -460,22 +452,22 @@ export default {
};
return t;
- })(document, 'script', 'twitter-wjs');
+ })(document, "script", "twitter-wjs");
if (window.twttr.widgets) {
window.twttr.widgets.load(
- document.getElementsByClassName('twitter-timeline')
+ document.getElementsByClassName("twitter-timeline")
);
}
},
methods: {
onSelect(item) {
- if (item.type === 'protein') {
- this.keyword = '(' + item.id + ')';
- } else if (item.type === 'condensate') {
- this.keyword = '(' + item.canonical_id + ')';
- } else if (item.type === 'search') {
- this.keyword = item.id.replace(/\#/g, '');
+ if (item.type === "protein") {
+ this.keyword = "(" + item.id + ")";
+ } else if (item.type === "condensate") {
+ this.keyword = "(" + item.canonical_id + ")";
+ } else if (item.type === "search") {
+ this.keyword = item.id.replace(/\#/g, "");
} else {
this.keyword = item.id;
}
@@ -494,7 +486,7 @@ export default {
vm.species =
item._id && item._id !== 0
? `${item._id} (${item.tax_id})`
- : 'All';
+ : "All";
}
});
}
@@ -510,12 +502,12 @@ export default {
const query = vm.keyword;
let host = vm.isDev
- ? require('./js/const').devHost
- : require('./js/const').host;
+ ? require("./js/const").devHost
+ : require("./js/const").host;
const taxId =
- vm.species === 'All' ? 'all' : /\((\d+)\)$/gm.exec(vm.species)[1];
+ vm.species === "All" ? "all" : /\((\d+)\)$/gm.exec(vm.species)[1];
let url =
- vm.species === 'All'
+ vm.species === "All"
? `${host}/${vm.pick}s?fields=gene_name,name,uniprot_id,species_name&query=${query}&size=20000`
: `${host}/${vm.pick}s?fields=gene_name,name,uniprot_id,species_name&query=${query}&species_tax_id=${taxId}&size=10000`;
@@ -523,9 +515,9 @@ export default {
// console.log(process.env.VUE_APP_API_KEY)
return fetch(url, {
- method: 'GET',
- mode: 'cors',
- cache: 'no-cache',
+ method: "GET",
+ mode: "cors",
+ cache: "no-cache",
headers: {
Authorization: `Bearer ${apikey}`,
},
@@ -541,24 +533,24 @@ export default {
species_name: c.species_name,
gene_name: c.gene_name,
name: c.name,
- type: 'protein',
+ type: "protein",
};
} else {
return {
id: c.name,
species_name: c.species_name,
canonical_id: c.canonical_id,
- type: 'condensate',
+ type: "condensate",
};
}
}),
- 'id'
+ "id"
);
if (ret.length > 9) {
- ret.splice(9, 0, { id: '#' + query, type: 'search' });
+ ret.splice(9, 0, { id: "#" + query, type: "search" });
} else {
- ret.push({ id: '#' + query, type: 'search' });
+ ret.push({ id: "#" + query, type: "search" });
}
// console.log(ret);
@@ -571,10 +563,10 @@ export default {
// console.log(/\((\d+)\)$/gm.exec(vm.species))
// console.log(vm.species);
const taxId =
- vm.species === 'All'
- ? 'all'
- : vm.species === 'Chimeras'
- ? 'null'
+ 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}`)
@@ -583,7 +575,7 @@ export default {
// vm.searchPick = vm.pick;
vm.$router.replace({
- name: 'home',
+ name: "home",
query: {
q: vm.keyword,
t: vm.pick,
@@ -592,7 +584,7 @@ export default {
});
vm.$router.push({
- name: 'search',
+ name: "search",
query: {
q: vm.keyword,
t: vm.pick,
diff --git a/web/src/components/Navigation/TheNavBar.vue b/web/src/components/Navigation/TheNavBar.vue
index 183640b7eb9a1ac60b02d929206f53be64c0e1f3..c3d62521a3f37c13de4e2be1522ab72cf775dd75 100644
--- a/web/src/components/Navigation/TheNavBar.vue
+++ b/web/src/components/Navigation/TheNavBar.vue
@@ -12,9 +12,7 @@
mb-3
"
>
- <div class="text-right px-8 w-full">
- Last updated: 30-06-2022
- </div>
+ <div class="text-right px-8 w-full">Last updated: 30-06-2022</div>
<div class="px-4 flex mb-2 flex-wrap w-full items-center justify-between">
<div class="ml-4">
<a href="/">
@@ -22,7 +20,7 @@
alt="logo"
class="w-36 object-contain rounded-lg"
src="@/assets/cd-code-logo.png"
- >
+ />
</a>
</div>
<div class="flex items-center space-x-4">
@@ -40,10 +38,11 @@
flex
items-center
text-4xl
- font-semibold
+ font-medium
hover:text-pink-base
"
- >Home</span>
+ >Home</span
+ >
</router-link>
<router-link
@@ -60,9 +59,10 @@
items-center
hover:text-pink-base
text-4xl
- font-semibold
+ font-medium
"
- >About</span>
+ >About</span
+ >
</router-link>
<router-link
@@ -79,10 +79,11 @@
items-center
hover:text-pink-base
text-4xl
- font-semibold
+ font-medium
leading-snug
"
- >Proteins</span>
+ >Proteins</span
+ >
</router-link>
<div class="relative rounded-lg">
<router-link
@@ -105,10 +106,11 @@
items-center
hover:text-pink-base
text-4xl
- font-semibold
+ font-medium
leading-snug
"
- >Condensates</span>
+ >Condensates</span
+ >
</router-link>
<div
v-if="openCondensateSubMenu"
@@ -127,10 +129,7 @@
@mouseleave="openCondensateSubMenu = false"
>
<div>
- <router-link
- to="/biomolecular"
- class="rounded-lg"
- >
+ <router-link to="/biomolecular" class="rounded-lg">
<span
class="
px-4
@@ -141,20 +140,18 @@
hover:text-pink-base
items-center
text-4xl
- font-semibold
+ font-medium
"
:class="
$route.name === 'biomolecular' ? 'text-pink-base' : ''
"
>
- Biomolecular Condensates</span>
+ Biomolecular Condensates</span
+ >
</router-link>
</div>
<div>
- <router-link
- to="/synthetic"
- class="rounded-lg"
- >
+ <router-link to="/synthetic" class="rounded-lg">
<span
class="
px-4
@@ -164,10 +161,11 @@
flex
items-center
text-4xl
- font-semibold
+ font-medium
"
:class="$route.name === 'synthetic' ? 'text-pink-base' : ''"
- >Synthetic Condensates</span>
+ >Synthetic Condensates</span
+ >
</router-link>
</div>
@@ -176,7 +174,7 @@
<router-link
v-if="
userRole !== null &&
- (userRole === 'Maintainer' || userRole === 'Contributor')
+ (userRole === 'Maintainer' || userRole === 'Contributor')
"
to="/addCondensate"
class="rounded-lg"
@@ -191,12 +189,13 @@
flex
items-center
text-4xl
- font-semibold
+ font-medium
"
:class="
$route.name === 'addCondensate' ? 'text-pink-base' : ''
"
- >Add New Condensate</span>
+ >Add New Condensate</span
+ >
</router-link>
</div>
</div>
@@ -216,9 +215,10 @@
flex
items-center
text-4xl
- font-semibold
+ font-medium
"
- >Statistics</span>
+ >Statistics</span
+ >
</router-link>
<a
@@ -235,9 +235,10 @@
flex
items-center
text-4xl
- font-semibold
+ font-medium
"
- >Encyclopedia</span>
+ >Encyclopedia</span
+ >
</a>
<router-link
@@ -254,9 +255,10 @@
flex
items-center
text-4xl
- font-semibold
+ font-medium
"
- >Help</span>
+ >Help</span
+ >
</router-link>
</div>
@@ -282,7 +284,8 @@
text-3xl
font-medium
"
- >Sign in</span>
+ >Sign in</span
+ >
</router-link>
<router-link
v-if="userData === null"
@@ -304,7 +307,8 @@
text-3xl
font-medium
"
- >Sign up</span>
+ >Sign up</span
+ >
</router-link>
</div>
@@ -416,14 +420,15 @@
text-2xl
font-medium
"
- >Profile</span>
+ >Profile</span
+ >
</router-link>
</div>
<div>
<router-link
v-show="
userData !== null &&
- (userRole === 'Contributor' || userRole === 'Maintainer')
+ (userRole === 'Contributor' || userRole === 'Maintainer')
"
to="/updateItems"
role="presentation"
@@ -470,7 +475,8 @@
text-2xl
font-medium
"
- >All Submitted Condensates</span>
+ >All Submitted Condensates</span
+ >
</router-link>
</div>
<div>
@@ -493,7 +499,8 @@
text-2xl
font-medium
"
- >Logout</span>
+ >Logout</span
+ >
</router-link>
</div>
</div>
@@ -514,7 +521,7 @@ export default {
},
computed: {
userData: function () {
- return this.$store.getters['User/userData'];
+ return this.$store.getters["User/userData"];
},
userName() {
const data = this.parsingUserData();
@@ -530,7 +537,7 @@ export default {
return initials;
},
userRole: function () {
- return this.$store.getters['User/userRole'];
+ return this.$store.getters["User/userRole"];
},
},
mounted: function () {
@@ -544,12 +551,12 @@ export default {
},
methods: {
parsingUserData() {
- const data = this.$store.getters['User/userData'];
+ const data = this.$store.getters["User/userData"];
let parsedData = JSON.parse(data);
return parsedData;
},
getInitials(string) {
- var names = string.split(' '),
+ var names = string.split(" "),
initials = names[0].substring(0, 1).toUpperCase();
if (names.length > 1) {
@@ -565,11 +572,11 @@ export default {
},
signOut() {
const vm = this;
- window.localStorage.removeItem('jwt');
- window.localStorage.removeItem('userData');
- window.localStorage.removeItem('roleName');
- vm.$store.dispatch('User/logOut');
- vm.$router.push('/login');
+ window.localStorage.removeItem("jwt");
+ window.localStorage.removeItem("userData");
+ window.localStorage.removeItem("roleName");
+ vm.$store.dispatch("User/logOut");
+ vm.$router.push("/login");
},
},
};