Skip to content
Snippets Groups Projects
Commit 201584bc authored by moon's avatar moon
Browse files

#69 

species_tax_id is removed.
mandatory field are marked.
Uniprot ID tooltip is added.
Synthetic/Biomolecular for is_experimental field.
parent f8283236
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
cms/src/api/novel-condensate/content-types/novel-condensate/schema.json
+ 1
− 1
View file @ 201584bc
......@@ -22,7 +22,7 @@
},
"SpeciesTaxId": {
"type": "integer",
"required": true
"required": false
},
"Proteins": {
"type": "json",
......
web/src/components/AddNovelCondensate.vue
+ 34
− 68
View file @ 201584bc
......@@ -22,7 +22,7 @@
<label
class="text-right"
for="condensate_is_experimental"
>Synthetic?</label>
>Synthetic/Biomolecular</label>
<div class="col-span-2">
<input
id="condensate_is_experimental_true"
......@@ -34,7 +34,7 @@
<label
for="condensate_is_experimental_true"
class="ml-2 mr-3"
>Yes</label>
>Synthetic</label>
<input
id="condensate_is_experimental_false"
v-model="condensate.is_experimental"
......@@ -45,7 +45,7 @@
<label
for="condensate_is_experimental_false"
class="ml-2 mr-3"
>No</label>
>Biomolecular</label>
</div>
<label
......@@ -80,38 +80,6 @@
</p>
</div>
<label
class="text-right"
for="condensate_species"
>Species</label>
<div class="col-span-2">
<input
id="condensate_species"
v-model.trim="condensate.species"
class="
bg-white
w-1/3
py-4
px-4
w-full
rounded-lg
text-gray-700
bg-transparent
border border-gray-500
hover:border-gray-700
"
type="text"
placeholder="Species (NCBI taxonomy ID)"
>
<p
v-if="condensate.errors.species"
class="text-red-600 mt-4 font-bold"
>
{{ condensate.errorMsg }}
</p>
</div>
<label
class="text-right"
for="condensate_protein"
......@@ -165,7 +133,18 @@
<label
class="text-right"
for="uniprot_id"
>Uniprot ID</label>
>Uniprot ID *
<a
class="uniprot-link tooltipped tooltipped-e"
aria-label='The UniProt ID (accession) is the 6 to the 10-character-long name displayed on the heading of the protein page from Uniprot.
It is a unique identifier for a protein from the whole Uniprot database (https://www.uniprot.org/help/accession_numbers).
Please note that different proteins from the same gene will also have different Uniprot IDs.
For example, The Uniprot ID of "FUS Human" is P35637 (https://www.uniprot.org/uniprot/P35637).
It is usually the last part of the URI of the HTTPS link of the protein page.'
>
<span class="fa fa-info-circle" />
</a>
</label>
<div class="col-span-2">
<input
id="uniprot_id"
......@@ -244,7 +223,7 @@
<label
class="text-right"
for="pubmed_ids"
>PubMed IDs</label>
>PubMed IDs *</label>
<div class="col-span-2">
<input
id="pubmed_ids"
......@@ -411,6 +390,10 @@
>
{{ newProtein.errorMsg }}
</p>
</div>
<label>&nbsp;</label>
<div class="col-span-2">
<div class="space-y-4 space-x-4">
<button
id="addNewProteinButton"
......@@ -608,9 +591,8 @@ export default {
condensate: {
name: '',
is_experimental: false,
species: '',
proteins: [],
synonyms: [],
synonyms: '',
comments: '',
errors: {
name: false,
......@@ -672,7 +654,7 @@ export default {
this.condensate.is_experimental = false;
this.condensate.species = '';
this.condensate.proteins = [];
this.condensate.synonyms = [];
this.condensate.synonyms = '';
this.condensate.comments = '';
this.condensate.errorMsg = '';
this.$router.push('/');
......@@ -739,12 +721,6 @@ export default {
}
}
if (vm.newProtein.functional_type === '') {
vm.newProtein.errorMsg = 'Functional type should not be empty!';
vm.newProtein.errors.functional_type = true;
return;
}
if (vm.newProtein.pubmed_ids === '') {
vm.newProtein.errorMsg = 'Pubmed IDs should not be empty!';
vm.newProtein.errors.pubmed_ids = true;
......@@ -768,16 +744,15 @@ export default {
functional_type: vm.newProtein.functional_type,
proteins: vm.newProtein.proteins,
pubmed_ids: vm.newProtein.pubmed_ids,
driver_criterion: vm.newProtein.driver_criterion.join(','),
experimental_evidences: vm.newProtein.experimental_evidences.join(','),
driver_criterion: vm.newProtein.driver_criterion,
experimental_evidences: vm.newProtein.experimental_evidences,
});
vm.newProtein.uniprot_id =
vm.newProtein.functional_type =
vm.newProtein.pubmed_ids =
vm.newProtein.driver_criterion =
vm.newProtein.experimental_evidences =
'';
vm.newProtein.pubmed_ids = '';
vm.newProtein.driver_criterion = [];
vm.newProtein.experimental_evidences = [];
vm.showAddNewProtein = false;
},
async addCondensate() {
......@@ -791,23 +766,10 @@ export default {
vm.condensate.errorMsg = 'Condensate name should not be empty!';
vm.condensate.errors.name = true;
return;
} else if (vm.condensate.species === '') {
vm.condensate.errorMsg = 'Species should not be empty!';
vm.condensate.errors.species = true;
return;
} else if (!/^\d+$/.test(vm.condensate.species)) {
vm.condensate.errorMsg = 'Species should be numbers!';
vm.condensate.errors.species = true;
return;
} else if (vm.proteinList.length === 0) {
vm.searchProtein.errors = true;
vm.searchProtein.message = 'Proteins field should not be empty.';
return;
} else if (vm.condensate.synonyms.length === 0) {
vm.condensate.errorMsg =
'Synonyms should not be empty! (Separate with comma)';
vm.condensate.errors.synonyms = true;
return;
}
let host = vm.isDev
......@@ -820,7 +782,6 @@ export default {
data = {
Name: vm.condensate.name,
IsExperimental: vm.condensate.is_experimental,
SpeciesTaxId: vm.condensate.species,
Proteins: vm.proteinList,
Synonyms: vm.condensate.synonyms,
Status: 'accepted',
......@@ -831,7 +792,6 @@ export default {
data = {
Name: vm.condensate.name,
IsExperimental: vm.condensate.is_experimental,
SpeciesTaxId: vm.condensate.species,
Proteins: vm.proteinList,
Synonyms: vm.condensate.synonyms,
Status: 'requested',
......@@ -880,8 +840,14 @@ export default {
<style scoped>
@import url("~@/assets/bootstrap.css");
@import url("~@/assets/datatable.css");
@import url("~@/assets/tooltip.css");
.mainContent {
padding: 5px;
}
.uniprot-link {
font-weight: bold;
color: #ef0087 !important;
}
</style>
\ No newline at end of file
web/src/components/Links.vue
+ 2
− 2
View file @ 201584bc
......@@ -87,7 +87,7 @@
</router-link>
</li>
<!-- should uncomment later -->
<!-- <li
<li
v-if="
userRole !== null &&
(userRole === 'Maintainer' ||
......@@ -101,7 +101,7 @@
>
<span class="text-2xl">Add New Condensate</span>
</router-link>
</li> -->
</li>
</ul>
</div>
</li>
......
web/src/components/TagsInput.vue
+ 113
− 3
View file @ 201584bc
......@@ -78,7 +78,7 @@
/>
</svg>
<h2 class="mb-5 text-2xl dark:text-gray-400 text-center">
Please, specify <b>Driver Criterion</b> and <b>Experimental Evidences</b> for <b>{{
Please, specify <b>Functional Type</b>, <b>PubMed IDs</b>, <b>Driver Criterion</b> and <b>Experimental Evidences</b> for <b>{{
newProtein.uniprot_id
}}</b>.
</h2>
......@@ -89,6 +89,86 @@
@submit.prevent="addUniprot"
>
<div class="form-group">
<label
class="control-label col-sm-3"
for="functional_type"
>Functional Type</label>
<div class="col-sm-8">
<select
id="functional_type"
v-model="newProtein.functional_type"
class="
bg-white
px-3
py-4
rounded-lg
border border-gray-400
w-full
text-gray-700
outline-none
bg-transparent
border-b
hover:border-blue-700
"
>
<option value="">
Select Functional Type
</option>
<option value="client">
client
</option>
<option value="driver">
driver
</option>
<option value="null">
unknown
</option>
<option value="regulator">
regulator
</option>
</select>
<p
v-if="newProtein.errors.functional_type"
class="text-red-600 mt-4 font-bold"
>
{{ newProtein.errorMsg }}
</p>
</div>
</div>
<div class="form-group">
<label
class="control-label col-sm-3"
for="pubmed_ids"
>PubMed IDs *</label>
<div class="col-sm-8">
<input
id="pubmed_ids"
v-model.trim="newProtein.pubmed_ids"
class="
bg-white
py-3
px-3
w-full
rounded-lg
text-gray-700
bg-transparent
border border-gray-500
hover:border-gray-700
"
type="text"
placeholder="PubMed IDs (separated by comma)"
>
<p
v-if="newProtein.errors.pubmed_ids"
class="text-red-600 mt-4 font-bold"
>
{{ newProtein.errorMsg }}
</p>
</div>
</div>
<div class="form-group">
<label
class="control-label col-sm-3"
for="driver_criterion"
......@@ -308,10 +388,13 @@ export default {
return {
newProtein: {
uniprot_id: '',
functional_type: '',
pubmed_ids: '',
driver_criterion: [],
experimental_evidences: [],
errors: {
functional_type: false,
pubmed_ids: false,
uniprot_id: false,
driver_criterion: false,
experimental_evidences: false,
......@@ -339,17 +422,44 @@ export default {
methods: {
addUniprot() {
const vm = this;
Object.keys(vm.newProtein.errors).forEach(
(v) => (vm.newProtein.errors[v] = false)
);
if (vm.newProtein.pubmed_ids === '') {
vm.newProtein.errorMsg = 'Pubmed IDs should not be empty!';
vm.newProtein.errors.pubmed_ids = true;
return;
}
vm.$store.dispatch('Param/addProtein', {
uniprot_id: vm.newProtein.uniprot_id,
functional_type: vm.newProtein.functional_type,
pubmed_ids: vm.newProtein.pubmed_ids,
driver_criterion: vm.newProtein.driver_criterion.join(','),
experimental_evidences: vm.newProtein.experimental_evidences.join(',')
experimental_evidences: vm.newProtein.experimental_evidences.join(','),
});
vm.newProtein.driver_criterion.splice(0, vm.newProtein.driver_criterion.length);
vm.newProtein.experimental_evidences.splice(0, vm.newProtein.experimental_evidences.length);
vm.newProtein.pubmed_ids = '';
vm.newProtein.functional_type = '';
vm.show = false;
},
close() {
const vm = this;
Object.keys(vm.newProtein.errors).forEach(
(v) => (vm.newProtein.errors[v] = false)
);
vm.newProtein.driver_criterion.splice(0, vm.newProtein.driver_criterion.length);
vm.newProtein.experimental_evidences.splice(0, vm.newProtein.experimental_evidences.length);
vm.newProtein.pubmed_ids = '';
vm.newProtein.functional_type = '';
this.show = false;
},
addObj(obj) {
......
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