Skip to content
Snippets Groups Projects
Commit b77d0e80 authored by raghosh's avatar raghosh
Browse files

#75: font changed.

parent 2444888d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
web/src/assets/figures/Figure_1a_v2.png 0 → 100644
+ 0
− 0
View file @ b77d0e80
web/src/assets/figures/Figure_1a_v2.png

362 KiB

web/src/components/AboutPage.vue
+ 1
− 1
View file @ b77d0e80
......@@ -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"
>
......
web/src/components/LandingPage.vue
+ 96
− 104
View file @ b77d0e80
......@@ -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>,&nbsp;&nbsp;
<router-link
to="/condensate_example"
>nucleolus__3702</router-link>
<router-link to="/protein_example">UNE6</router-link
>,&nbsp;&nbsp;
<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,
......
web/src/components/Navigation/TheNavBar.vue
+ 55
− 48
View file @ b77d0e80
......@@ -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");
},
},
};
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment