From c42016442fc4c936d986eb5038b412fde0b47281 Mon Sep 17 00:00:00 2001 From: HongKee Moon <moon@mpi-cbg.de> Date: Thu, 23 Jun 2022 16:41:06 +0200 Subject: [PATCH] lint:fixed --- web/src/components/AboutPage.vue | 22 +- web/src/components/AddNovelCondensate.vue | 414 +++++++++++------- web/src/components/CMS/addDeletePubmed.vue | 341 ++++++++------- web/src/components/CondensateDetailPage.vue | 335 +++++++------- web/src/components/DDCODE/fetchCondensate.vue | 42 +- .../Datatable/CondensateDataTable.vue | 137 +++--- web/src/components/LlpsTable.vue | 284 ++++++------ web/src/components/Team/TheTeamList.vue | 56 +-- web/src/views/Profile.vue | 7 +- 9 files changed, 891 insertions(+), 747 deletions(-) diff --git a/web/src/components/AboutPage.vue b/web/src/components/AboutPage.vue index d1e3f04..32a551a 100644 --- a/web/src/components/AboutPage.vue +++ b/web/src/components/AboutPage.vue @@ -223,11 +223,11 @@ </template> <script> -import StarRating from "vue-star-rating"; -const _ = require("lodash"); +import StarRating from 'vue-star-rating'; +const _ = require('lodash'); export default { - name: "LandingPage", + name: 'LandingPage', components: { StarRating }, props: { msg: String, @@ -235,19 +235,19 @@ export default { data() { return { driversList: [ - "Undergo phase separation or self-assembly into liquid droplets independent of other proteins.", - "Induce the formation of a condensate.", - "Are essential for the integrity of a condensate.", + 'Undergo phase separation or self-assembly into liquid droplets independent of other proteins.', + 'Induce the formation of a condensate.', + 'Are essential for the integrity of a condensate.', ], confidenceScoreTable: [ // { star: 0, description: "Reported in other LLPS database" }, - { star: 1, description: "PubMed reference annotated" }, - { star: 2, description: "High throuput experiment (eg. Mass spect.)" }, - { star: 3, description: "In vitro" }, + { star: 1, description: 'PubMed reference annotated' }, + { star: 2, description: 'High throuput experiment (eg. Mass spect.)' }, + { star: 3, description: 'In vitro' }, - { star: 4, description: "In cellulo" }, - { star: 5, description: "In vivo" }, + { star: 4, description: 'In cellulo' }, + { star: 5, description: 'In vivo' }, ], }; }, diff --git a/web/src/components/AddNovelCondensate.vue b/web/src/components/AddNovelCondensate.vue index 3e2010e..b8705ea 100644 --- a/web/src/components/AddNovelCondensate.vue +++ b/web/src/components/AddNovelCondensate.vue @@ -1,7 +1,10 @@ <template> <div class="flex flex-wrap bg-white"> <div class="w-5/6"> - <form autocomplete="off" @submit.prevent="addCondensate()"> + <form + autocomplete="off" + @submit.prevent="addCondensate()" + > <div v-if="isLoading"> <base-spinner /> </div> @@ -16,9 +19,10 @@ gap-y-4 " > - <label class="text-right" for="condensate_is_experimental" - >Synthetic/Biomolecular</label - > + <label + class="text-right" + for="condensate_is_experimental" + >Synthetic/Biomolecular</label> <div class="col-span-2"> <input id="condensate_is_experimental_true" @@ -26,25 +30,28 @@ type="radio" name="condensate_is_experimental" value="true" - /> - <label for="condensate_is_experimental_true" class="ml-2 mr-3" - >Synthetic</label > + <label + for="condensate_is_experimental_true" + class="ml-2 mr-3" + >Synthetic</label> <input id="condensate_is_experimental_false" v-model="condensate.is_experimental" type="radio" name="condensate_is_experimental" value="false" - /> - <label for="condensate_is_experimental_false" class="ml-2 mr-3" - >Biomolecular</label > + <label + for="condensate_is_experimental_false" + class="ml-2 mr-3" + >Biomolecular</label> </div> - <label class="text-right" for="condensate_name" - >Condensate Name</label - > + <label + class="text-right" + for="condensate_name" + >Condensate Name</label> <div class="col-span-2"> <input id="condensate_name" @@ -63,7 +70,7 @@ " type="text" placeholder="Name" - /> + > <p v-if="condensate.errors.name" @@ -73,19 +80,28 @@ </p> </div> - <label class="text-right" for="condensate_protein">Proteins</label> + <label + class="text-right" + for="condensate_protein" + >Proteins</label> <div class="col-span-2"> <tags-input v-model="proteinNameList" class="w-1/3 w-full" @proteinNotFound="notFound" /> - <p v-if="searchProtein.errors" class="text-red-500 font-bold"> + <p + v-if="searchProtein.errors" + class="text-red-500 font-bold" + > {{ searchProtein.message }} </p> </div> - <label class="text-right" for="protein_table" /> + <label + class="text-right" + for="protein_table" + /> <div class="col-span-2 relative sm:rounded-lg"> <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400" @@ -99,12 +115,40 @@ " > <tr> - <th scope="col" class="px-6 py-3">Uniprot</th> - <th scope="col" class="px-6 py-3">Functional type</th> - <th scope="col" class="px-6 py-3">Pubmed</th> - <th scope="col" class="px-6 py-3">Driver criterion</th> - <th scope="col" class="px-6 py-3">Experimental evidences</th> - <th scope="col" class="px-6 py-3"> + <th + scope="col" + class="px-6 py-3" + > + Uniprot + </th> + <th + scope="col" + class="px-6 py-3" + > + Functional type + </th> + <th + scope="col" + class="px-6 py-3" + > + Pubmed + </th> + <th + scope="col" + class="px-6 py-3" + > + Driver criterion + </th> + <th + scope="col" + class="px-6 py-3" + > + Experimental evidences + </th> + <th + scope="col" + class="px-6 py-3" + > <span class="sr-only">Edit</span> </th> </tr> @@ -154,15 +198,17 @@ hover:underline " @click="editProtein(item)" - >Edit</a - > + >Edit</a> </td> </tr> </tbody> </table> </div> - <div v-if="showAddNewProtein" id="deleteModal"> + <div + v-if="showAddNewProtein" + id="deleteModal" + > <div class="fixed z-40 h-full inset-0 opacity-25 bg-black" /> <div class=" @@ -261,8 +307,7 @@ newProtein.uniprot_id === "" ? "new protein" : newProtein.uniprot_id - }}</b - >. + }}</b>. </h2> <form @@ -271,15 +316,17 @@ @submit.prevent="addUniprot" > <div class="form-group"> - <label class="control-label col-sm-3" for="uniprot_id" - >Uniprot ID * + <label + class="control-label col-sm-3" + for="uniprot_id" + >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. + 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.' + 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> @@ -302,7 +349,7 @@ " type="text" placeholder="Uniprot ID" - /> + > <p v-if="newProtein.errors.uniprot_id" @@ -316,8 +363,7 @@ <label class="control-label col-sm-3" for="functional_type" - >Functional Type</label - > + >Functional Type</label> <div class="col-sm-8"> <select id="functional_type" @@ -336,10 +382,18 @@ hover:border-blue-700 " > - <option value="">Select Functional Type</option> - <option value="client">client</option> - <option value="driver">driver</option> - <option value="regulator">regulator</option> + <option value=""> + Select Functional Type + </option> + <option value="client"> + client + </option> + <option value="driver"> + driver + </option> + <option value="regulator"> + regulator + </option> </select> <p @@ -351,9 +405,10 @@ </div> </div> <div class="form-group"> - <label class="control-label col-sm-3" for="pubmed_ids" - >PubMed IDs *</label - > + <label + class="control-label col-sm-3" + for="pubmed_ids" + >PubMed IDs *</label> <div class="col-sm-8"> <input id="pubmed_ids" @@ -371,7 +426,7 @@ " type="text" placeholder="PubMed IDs (separated by comma)" - /> + > <p v-if="newProtein.errors.pubmed_ids" @@ -385,35 +440,39 @@ <label class="control-label col-sm-3" for="driver_criterion" - >Driver Criterion</label - > + >Driver Criterion</label> <div class="col-sm-8"> <input id="self_ps" v-model="newProtein.driver_criterion" type="checkbox" value="self_ps" - /> - <label for="self_ps" class="px-2">Self-PS</label> + > + <label + for="self_ps" + class="px-2" + >Self-PS</label> <input id="induces_assembly" v-model="newProtein.driver_criterion" type="checkbox" value="induces_assembly" - /> - <label for="induces_assembly" class="px-2" - >Induces Assembly</label > - <br /> + <label + for="induces_assembly" + class="px-2" + >Induces Assembly</label> + <br> <input id="essential_for_integrity" v-model="newProtein.driver_criterion" type="checkbox" value="essential_for_integrity" - /> - <label for="essential_for_integrity" class="px-2" - >Essential For Integrity</label > + <label + for="essential_for_integrity" + class="px-2" + >Essential For Integrity</label> </div> <p v-if="newProtein.errors.driver_criterion" @@ -426,67 +485,81 @@ <label class="control-label col-sm-3" for="experimental_evidences" - >Experimental Evidences</label - > + >Experimental Evidences</label> <div class="col-sm-6"> <input id="in_vitro" v-model="newProtein.experimental_evidences" type="checkbox" value="in_vitro" - /> - <label for="in_vitro" class="px-2">In Vitro</label> + > + <label + for="in_vitro" + class="px-2" + >In Vitro</label> <input id="in_vivo" v-model="newProtein.experimental_evidences" type="checkbox" value="in_vivo" - /> - <label for="in_vivo" class="px-2">In Vivo</label> - <br /> + > + <label + for="in_vivo" + class="px-2" + >In Vivo</label> + <br> <input id="in_cellulo" v-model="newProtein.experimental_evidences" type="checkbox" value="in_cellulo" - /> - <label for="in_cellulo" class="px-2" - >In Cellulo</label > - <br /> + <label + for="in_cellulo" + class="px-2" + >In Cellulo</label> + <br> <input id="mass_spectrometry" v-model="newProtein.experimental_evidences" type="checkbox" value="mass_spectrometry" - /> - <label for="mass_spectrometry" class="px-2" - >Mass Spectrometry</label > - <br /> + <label + for="mass_spectrometry" + class="px-2" + >Mass Spectrometry</label> + <br> <input id="colocalization" v-model="newProtein.experimental_evidences" type="checkbox" value="colocalization" - /> - <label for="colocalization" class="px-2" - >Colocalization</label > + <label + for="colocalization" + class="px-2" + >Colocalization</label> <input id="frap" v-model="newProtein.experimental_evidences" type="checkbox" value="frap" - /> - <label for="frap" class="px-2">FRAP</label> + > + <label + for="frap" + class="px-2" + >FRAP</label> <input id="others" v-model="newProtein.experimental_evidences" type="checkbox" value="others" - /> - <label for="others" class="px-2">Others</label> + > + <label + for="others" + class="px-2" + >Others</label> </div> <p v-if="newProtein.errors.experimental_evidences" @@ -544,7 +617,10 @@ </div> </div> - <label class="text-right" for="condensate_synonyms">Synonyms</label> + <label + class="text-right" + for="condensate_synonyms" + >Synonyms</label> <div class="col-span-2"> <input id="condensate_synonyms" @@ -563,7 +639,7 @@ " type="text" placeholder="Synonyms (comma-separated)" - /> + > <p v-if="condensate.errors.synonyms" @@ -573,9 +649,10 @@ </p> </div> - <label class="text-right" for="condensate_description" - >Description</label - > + <label + class="text-right" + for="condensate_description" + >Description</label> <div class="col-span-2"> <input id="condensate_description" @@ -594,11 +671,13 @@ " type="text" placeholder="Description" - /> + > </div> - <label class="text-right" for="condensate_comments" - >Comments <span v-show="getUserData !== 'Maintainer'">*</span> + <label + class="text-right" + for="condensate_comments" + >Comments <span v-show="getUserData !== 'Maintainer'">*</span> </label> <div class="col-span-2"> <textarea @@ -666,7 +745,10 @@ </div> <div> - <h3 v-if="fetchError" class="text-red-500"> + <h3 + v-if="fetchError" + class="text-red-500" + > {{ fetchError }} </h3> </div> @@ -678,13 +760,13 @@ <script> // require modules /* eslint-disable no-unused-vars */ -import TagsInput from "@/components/TagsInput.vue"; -import BaseSpinner from "./UI/BaseSpinner.vue"; -import { apikey } from "@/components/js/const"; -const _ = require("lodash"); +import TagsInput from '@/components/TagsInput.vue'; +import BaseSpinner from './UI/BaseSpinner.vue'; +import { apikey } from '@/components/js/const'; +const _ = require('lodash'); export default { - name: "AddNovelCondensate", + name: 'AddNovelCondensate', components: { TagsInput, BaseSpinner, @@ -695,12 +777,12 @@ export default { showAddNewProtein: false, searchProtein: { errors: false, - message: "", + message: '', }, newProtein: { - uniprot_id: "", - functional_type: "", - pubmed_ids: "", + uniprot_id: '', + functional_type: '', + pubmed_ids: '', driver_criterion: [], experimental_evidences: [], errors: { @@ -710,35 +792,35 @@ export default { driver_criterion: false, experimental_evidences: false, }, - errorMsg: "", + errorMsg: '', }, condensate: { - name: "", + name: '', is_experimental: false, proteins: [], - synonyms: "", - comments: "", - description: "", + synonyms: '', + comments: '', + description: '', errors: { name: false, species: false, synonyms: false, comments: false, }, - errorMsg: "", + errorMsg: '', }, isLoading: false, - proteinList: this.$store.getters["Param/proteinList"], - fetchError: "", - isDev: process.env.NODE_ENV === "development", + proteinList: this.$store.getters['Param/proteinList'], + fetchError: '', + isDev: process.env.NODE_ENV === 'development', }; }, computed: { jwt: function () { - return this.$store.getters["User/jwt"]; + return this.$store.getters['User/jwt']; }, getUserData() { - const userRole = this.$store.getters["User/userRole"]; + const userRole = this.$store.getters['User/userRole']; // console.log('role is', userRole); return userRole; }, @@ -752,7 +834,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']) }, @@ -761,7 +843,7 @@ export default { mounted: function () { const vm = this; // vm.proteinNameList.push(vm.protein); - vm.$store.dispatch("Param/resetProteins"); + vm.$store.dispatch('Param/resetProteins'); }, methods: { editProtein(protein) { @@ -773,7 +855,7 @@ export default { this.newProtein.driver_criterion.length ); protein.driver_criterion - .split(",") + .split(',') .forEach((c) => this.newProtein.driver_criterion.push(c)); this.newProtein.experimental_evidences.splice( @@ -781,32 +863,32 @@ export default { this.newProtein.experimental_evidences.length ); protein.experimental_evidences - .split(",") + .split(',') .forEach((c) => this.newProtein.experimental_evidences.push(c)); - this.newProtein.errorMsg = ""; + this.newProtein.errorMsg = ''; this.showAddNewProtein = true; }, notFound(val, isEmpty) { if (!val && !isEmpty) { this.searchProtein.errors = true; this.searchProtein.message = - "Protein not found. Try adding new protein."; + 'Protein not found. Try adding new protein.'; } else { this.searchProtein.errors = false; - this.searchProtein.message = ""; + this.searchProtein.message = ''; } }, close() { - this.condensate.name = ""; + this.condensate.name = ''; this.condensate.is_experimental = false; - this.condensate.species = ""; + this.condensate.species = ''; this.condensate.proteins = []; - this.condensate.synonyms = ""; - this.condensate.comments = ""; - this.condensate.description = ""; - this.condensate.errorMsg = ""; - this.$router.push("/"); + this.condensate.synonyms = ''; + this.condensate.comments = ''; + this.condensate.description = ''; + this.condensate.errorMsg = ''; + this.$router.push('/'); }, async addUniprot() { const vm = this; @@ -814,7 +896,7 @@ export default { Object.keys(vm.newProtein.errors).forEach( (v) => (vm.newProtein.errors[v] = false) ); - console.log("uniprot is", this.newProtein.uniprot_id); + console.log('uniprot is', this.newProtein.uniprot_id); const validUniprot = await this.uniprotIdValidation( this.newProtein.uniprot_id ); @@ -825,8 +907,8 @@ export default { return; } - if (vm.newProtein.pubmed_ids === "") { - vm.newProtein.errorMsg = "Pubmed IDs should not be empty!"; + if (vm.newProtein.pubmed_ids === '') { + vm.newProtein.errorMsg = 'Pubmed IDs should not be empty!'; vm.newProtein.errors.pubmed_ids = true; return; } @@ -834,14 +916,14 @@ export default { const idx = vm.proteinList.findIndex( (d) => d.uniprot_id === vm.newProtein.uniprot_id ); - vm.$store.dispatch("Param/removeProtein", idx); + vm.$store.dispatch('Param/removeProtein', idx); - vm.$store.dispatch("Param/addProtein", { + 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(","), + driver_criterion: vm.newProtein.driver_criterion.join(','), + experimental_evidences: vm.newProtein.experimental_evidences.join(','), }); vm.newProtein.driver_criterion.splice( @@ -852,8 +934,8 @@ export default { 0, vm.newProtein.experimental_evidences.length ); - vm.newProtein.pubmed_ids = ""; - vm.newProtein.functional_type = ""; + vm.newProtein.pubmed_ids = ''; + vm.newProtein.functional_type = ''; vm.showAddNewProtein = false; }, @@ -871,15 +953,15 @@ export default { 0, vm.newProtein.experimental_evidences.length ); - vm.newProtein.pubmed_ids = ""; - vm.newProtein.functional_type = ""; + vm.newProtein.pubmed_ids = ''; + vm.newProtein.functional_type = ''; vm.showAddNewProtein = false; }, async uniprotIdValidation(id) { try { const res = await fetch(`https://www.uniprot.org/uniprot/${id}`, { - method: "HEAD", + method: 'HEAD', }); const response = await res; if (!response.ok && response.status === 404) { @@ -896,15 +978,15 @@ export default { >mail@cd-code.org</a> for further assist. `, }; } else { - return { valid: true, msg: "Valid Uniprot ID." }; + return { valid: true, msg: 'Valid Uniprot ID.' }; } } catch (err) { - console.log("error", err); + console.log('error', err); return { valid: false, msg: err.message + - "." + + '.' + `Please contact CD-CODE admin <a href="mailto:mail@cd-code.org" class="text-blue-500 hover:text-blue-700" @@ -917,41 +999,41 @@ export default { const vm = this; let host = vm.isDev - ? require("./js/const").devHost - : require("./js/const").host; + ? require('./js/const').devHost + : require('./js/const').host; Object.keys(vm.newProtein.errors).forEach( (v) => (vm.newProtein.errors[v] = false) ); - if (vm.newProtein.uniprot_id === "") { - vm.newProtein.errorMsg = "Uniprot ID should not be empty!"; + if (vm.newProtein.uniprot_id === '') { + vm.newProtein.errorMsg = 'Uniprot ID should not be empty!'; vm.newProtein.errors.uniprot_id = true; return; } else if (vm.newProtein.uniprot_id.length < 6) { - vm.newProtein.errorMsg = "Uniprot ID should be minimum of 6 character."; + vm.newProtein.errorMsg = 'Uniprot ID should be minimum of 6 character.'; vm.newProtein.errors.uniprot_id = true; return; } else if (vm.newProtein.uniprot_id.length > 10) { vm.newProtein.errorMsg = - "Uniprot ID should be maximum of 10 character."; + 'Uniprot ID should be maximum of 10 character.'; vm.newProtein.errors.uniprot_id = true; return; } else if (/(\s)/.test(vm.newProtein.uniprot_id)) { - vm.newProtein.errorMsg = "Uniprot ID should not have space in between."; + vm.newProtein.errorMsg = 'Uniprot ID should not have space in between.'; vm.newProtein.errors.uniprot_id = true; return; } else { let host = vm.isDev - ? require("./js/const").devHost - : require("./js/const").host; + ? require('./js/const').devHost + : require('./js/const').host; let url = `${host}/proteins?fields=uniprot_id,gene_name,name&query=${vm.newProtein.uniprot_id}`; const ret = await fetch(url, { - method: "GET", - mode: "cors", - cache: "no-cache", + method: 'GET', + mode: 'cors', + cache: 'no-cache', headers: { Authorization: `Bearer ${apikey}`, }, @@ -959,14 +1041,14 @@ export default { if (ret.count !== 0) { vm.newProtein.errorMsg = - "Uniprot ID already exists in the database. Add the tag!"; + 'Uniprot ID already exists in the database. Add the tag!'; vm.newProtein.errors.uniprot_id = true; return; } } - if (vm.newProtein.pubmed_ids === "") { - vm.newProtein.errorMsg = "Pubmed IDs should not be empty!"; + if (vm.newProtein.pubmed_ids === '') { + vm.newProtein.errorMsg = 'Pubmed IDs should not be empty!'; vm.newProtein.errors.pubmed_ids = true; return; } @@ -983,7 +1065,7 @@ export default { // return; // } - vm.$store.dispatch("Param/addProtein", { + vm.$store.dispatch('Param/addProtein', { uniprot_id: vm.newProtein.uniprot_id, functional_type: vm.newProtein.functional_type, proteins: vm.newProtein.proteins, @@ -995,7 +1077,7 @@ export default { vm.newProtein.uniprot_id = vm.newProtein.functional_type = vm.newProtein.pubmed_ids = - ""; + ''; vm.newProtein.driver_criterion = []; vm.newProtein.experimental_evidences = []; vm.showAddNewProtein = false; @@ -1007,32 +1089,32 @@ export default { (v) => (vm.condensate.errors[v] = false) ); - if (vm.condensate.name === "") { - vm.condensate.errorMsg = "Condensate name should not be empty!"; + if (vm.condensate.name === '') { + vm.condensate.errorMsg = 'Condensate name should not be empty!'; vm.condensate.errors.name = true; return; } else if (vm.proteinList.length === 0) { vm.searchProtein.errors = true; - vm.searchProtein.message = "Proteins field should not be empty."; + vm.searchProtein.message = 'Proteins field should not be empty.'; return; } let host = vm.isDev - ? require("./js/const").devApiHost - : require("./js/const").apiHost; + ? require('./js/const').devApiHost + : require('./js/const').apiHost; let url = `${host}/api/novel-condensates`; let data; - if (this.getUserData === "Maintainer") { + if (this.getUserData === 'Maintainer') { data = { Name: vm.condensate.name, IsExperimental: vm.condensate.is_experimental, Proteins: vm.proteinList, Synonyms: vm.condensate.synonyms, Description: vm.condensate.description, - Status: "accepted", + Status: 'accepted', SubmissionComments: - "Maintainer do not need to provide a reason for such change at the moment!", + 'Maintainer do not need to provide a reason for such change at the moment!', }; } else { data = { @@ -1041,7 +1123,7 @@ export default { Proteins: vm.proteinList, Synonyms: vm.condensate.synonyms, Description: vm.condensate.description, - Status: "requested", + Status: 'requested', SubmissionComments: vm.condensate.comments, }; } @@ -1065,18 +1147,18 @@ export default { vm.condensate.synonyms = vm.condensate.comments = vm.condensate.description = - ""; - vm.$store.dispatch("Param/resetProteins"); - vm.$emit("showToaster", "Condensate added successfully!"); + ''; + vm.$store.dispatch('Param/resetProteins'); + vm.$emit('showToaster', 'Condensate added successfully!'); setTimeout(() => { - vm.$emit("hideToaster"); + vm.$emit('hideToaster'); }, 2000); } catch (e) { console.error(e); vm.isLoading = false; vm.fetchError = - e.message || "Something went wrong, please try again later!"; + e.message || 'Something went wrong, please try again later!'; vm.isSubmitted = true; vm.error = true; } diff --git a/web/src/components/CMS/addDeletePubmed.vue b/web/src/components/CMS/addDeletePubmed.vue index 4bfbb54..ad48135 100644 --- a/web/src/components/CMS/addDeletePubmed.vue +++ b/web/src/components/CMS/addDeletePubmed.vue @@ -1,6 +1,9 @@ <template> <div> - <base-toaster :open="toasterIsOpen" @close="hideDialog"> + <base-toaster + :open="toasterIsOpen" + @close="hideDialog" + > <div class="flex justify-between items-center"> <font-awesome-icon class="ml-3" @@ -9,8 +12,14 @@ /> <h4>Request submitted successfully!</h4> - <button class="btn btn-outline" @click="hideDialog"> - <font-awesome-icon icon="fa-regular fa-circle-xmark" size="2x" /> + <button + class="btn btn-outline" + @click="hideDialog" + > + <font-awesome-icon + icon="fa-regular fa-circle-xmark" + size="2x" + /> </button> </div> </base-toaster> @@ -37,8 +46,7 @@ " for="pubId" > - Enter Pubmed ID to add.</label - > + Enter Pubmed ID to add.</label> <input id="pubId" @@ -47,18 +55,17 @@ type="text" placeholder="Pubmed ID" @keyup="validation" - /> + > <p v-if="!isValid && error" - v-html="error" class="text-red-600 mt-4 font-bold" - ></p> + v-html="error" + /> <label class="text-left font-bold mb-2 text-xl sm:text-2xl" for="funComment" - >Reason</label - > + >Reason</label> <div> <textarea @@ -163,8 +170,7 @@ sm:text-2xl font-montserrat " - >Select Pubmed ID to remove.</label - > + >Select Pubmed ID to remove.</label> <div> <div v-for="(item, index) in getPubmed" @@ -177,7 +183,7 @@ type="radio" :value="item" @click="selectPubmedId" - /> + > <div class="flex items-center"> <label :for="index"> {{ item }} @@ -196,8 +202,7 @@ font-montserrat " for="funComment" - >Reason</label - > + >Reason</label> <div> <textarea @@ -226,7 +231,10 @@ placeholder="Please provide evidence/PubMed ID." @keyup="validateComment" /> - <p v-if="!isValid && error" class="text-red-600 mt-4 font-bold"> + <p + v-if="!isValid && error" + class="text-red-600 mt-4 font-bold" + > {{ error }} </p> <p @@ -295,10 +303,14 @@ </div> </div> </div> - <div v-if="mode === 'protein'" class="form-group"> - <label class="control-label col-sm-4" for="actionType" - >Select Action</label - > + <div + v-if="mode === 'protein'" + class="form-group" + > + <label + class="control-label col-sm-4" + for="actionType" + >Select Action</label> <div class="col-sm-8"> <div> <select @@ -307,7 +319,11 @@ class="form-control" @change="selectValue" > - <option v-for="item in actionOptions" :key="item" class=""> + <option + v-for="item in actionOptions" + :key="item" + class="" + > {{ item }} </option> </select> @@ -317,9 +333,10 @@ <div v-if="showAddPubmedId"> <div class="form-group"> - <label class="control-label col-sm-4" for="pubId" - >Enter pubmed ID</label - > + <label + class="control-label col-sm-4" + for="pubId" + >Enter pubmed ID</label> <div class="col-sm-8"> <input id="pubId" @@ -328,18 +345,19 @@ type="text" placeholder="Pubmed ID" @keyup="validation" - /> + > <p v-if="!isValid && error" - v-html="error" class="text-red-600 mt-4 font-bold" - ></p> + v-html="error" + /> </div> </div> <div class="form-group"> - <label class="control-label col-sm-4" for="funComment" - >Reason</label - > + <label + class="control-label col-sm-4" + for="funComment" + >Reason</label> <div class="col-sm-8"> <textarea @@ -394,8 +412,11 @@ type="radio" :value="item" @click="selectPubmedId" - /> - <label class="control-label" :for="index"> + > + <label + class="control-label" + :for="index" + > {{ item }} </label> </div> @@ -404,9 +425,10 @@ </div> </div> <div class="form-group -mt-9"> - <label class="control-label col-sm-4" for="funComment" - >Reason</label - > + <label + class="control-label col-sm-4" + for="funComment" + >Reason</label> <div class="col-sm-8"> <textarea @@ -435,7 +457,10 @@ placeholder="Please provide evidence/PubMed ID." @keyup="validateComment" /> - <p v-if="!isValid && error" class="text-red-600 mt-4 font-bold"> + <p + v-if="!isValid && error" + class="text-red-600 mt-4 font-bold" + > {{ error }} </p> <p @@ -517,50 +542,50 @@ </template> <script> -import BaseSpinner from "../UI/BaseSpinner.vue"; -import BaseToaster from "../UI/BaseToaster.vue"; +import BaseSpinner from '../UI/BaseSpinner.vue'; +import BaseToaster from '../UI/BaseToaster.vue'; //import BaseToaster from '../UI/BaseToaster.vue' -const _ = require("lodash"); -let host = require("../js/const").apiHost; +const _ = require('lodash'); +let host = require('../js/const').apiHost; export default { components: { BaseSpinner, BaseToaster }, - props: ["data", "mode", "pubmed", "uniprot", "type", "canonicalId"], + props: ['data', 'mode', 'pubmed', 'uniprot', 'type', 'canonicalId'], data() { return { - actionType: "", - pubmedId: "", - buttonText: "", + actionType: '', + pubmedId: '', + buttonText: '', showButtons: false, - actionOptions: ["Add", "Delete"], + actionOptions: ['Add', 'Delete'], showAddPubmedId: false, showDeletePubmedId: false, isValid: false, inputVal: true, - error: "", - commentError: "", - comment: "", - message: "", - pubmedIds: "", + error: '', + commentError: '', + comment: '', + message: '', + pubmedIds: '', serverError: false, whitespaceRegex: /(\s)/, - isDev: process.env.NODE_ENV === "development", + isDev: process.env.NODE_ENV === 'development', isLoading: false, toasterIsOpen: false, }; }, computed: { btnDisabled() { - if (!this.pubmedId || (!this.comment && this.role !== "Maintainer")) { + if (!this.pubmedId || (!this.comment && this.role !== 'Maintainer')) { return true; } return false; }, jwt: function () { - return this.$store.getters["User/jwt"]; + return this.$store.getters['User/jwt']; }, role: function () { - return this.$store.getters["User/userRole"]; + return this.$store.getters['User/userRole']; }, getPubmed() { let pubIds; @@ -573,7 +598,7 @@ export default { return pubIds; }, disableButton() { - if (!this.pubmedId || (!this.comment && this.role !== "Maintainer")) { + if (!this.pubmedId || (!this.comment && this.role !== 'Maintainer')) { return true; } return false; @@ -596,8 +621,8 @@ export default { }, validateComment() { this.isValid = true; - this.error = ""; - this.message = ""; + this.error = ''; + this.message = ''; this.serverError = false; }, @@ -605,14 +630,14 @@ export default { let foundPubId; if ( - this.mode === "condensate" && - this.type === "Add" && + this.mode === 'condensate' && + this.type === 'Add' && Object.keys(data).length > 0 ) { let pubmedData; for (let key in data) { if (key === this.uniprot) { - console.log("working in add", data[key]); + console.log('working in add', data[key]); pubmedData = data[key]; } } @@ -624,15 +649,15 @@ export default { } } } else if ( - this.mode === "protein" && - this.actionType === "Add" && + this.mode === 'protein' && + this.actionType === 'Add' && Object.keys(data).length > 0 ) { foundPubId = data.pubmed_ids.find((p) => p === this.pubmedId); } - this.message = ""; - if (this.pubmedId === "") { - this.error = "Pubmed Id should not be empty!"; + this.message = ''; + if (this.pubmedId === '') { + this.error = 'Pubmed Id should not be empty!'; return false; } @@ -644,13 +669,13 @@ export default { // } else if (foundPubId) { this.isValid = false; - this.commentError = ""; + this.commentError = ''; this.error = - "Given pubmed id is already present. Please add another pubmed id."; + 'Given pubmed id is already present. Please add another pubmed id.'; return false; } - this.message = ""; + this.message = ''; return true; }, @@ -659,16 +684,16 @@ export default { const vm = this; if (vm.isDev) { - host = require("../js/const").devApiHost; + host = require('../js/const').devApiHost; } let url = `${host}/api/update-items`; let data; - if (this.mode === "condensate" && this.type === "Add") { + if (this.mode === 'condensate' && this.type === 'Add') { //const foundPubId = this.pubmed.find((p) => p === this.pubmedId); - console.log("return val", this.inputValidation(this.pubmed)); + console.log('return val', this.inputValidation(this.pubmed)); let valid = this.inputValidation(this.pubmed); @@ -677,160 +702,160 @@ export default { } let entityId = `${this.canonicalId}==${this.uniprot}`; - if (this.role === "Maintainer") { + if (this.role === 'Maintainer') { data = { - Entity: "condensate_protein", + Entity: 'condensate_protein', EntityId: entityId, - ChangeOperation: "add", - Attribute: "pubmed_ids", + ChangeOperation: 'add', + Attribute: 'pubmed_ids', Value: this.pubmedId, SubmissionComments: this.comment ? this.comment - : "Maintainer do not need to provide a reason for such change at the moment!", - Status: "accepted", + : 'Maintainer do not need to provide a reason for such change at the moment!', + Status: 'accepted', }; } else { - if (this.comment === "" || this.comment.length < 50) { + if (this.comment === '' || this.comment.length < 50) { this.isValid = false; this.commentError = - "Reason should not be empty or less than 50 character!"; + 'Reason should not be empty or less than 50 character!'; return false; } data = { - Entity: "condensate_protein", + Entity: 'condensate_protein', EntityId: entityId, - ChangeOperation: "add", - Attribute: "pubmed_ids", + ChangeOperation: 'add', + Attribute: 'pubmed_ids', Value: this.pubmedId, SubmissionComments: this.comment, - Status: "requested", + Status: 'requested', }; } - } else if (this.mode === "condensate" && this.type === "Delete") { + } else if (this.mode === 'condensate' && this.type === 'Delete') { //val if (!this.inputValidation(this.pubmed)) { return; } - this.message = ""; - if (this.pubmedId === "") { + this.message = ''; + if (this.pubmedId === '') { this.isValid = false; - this.error = "Please select a pubmed id to remove!"; + this.error = 'Please select a pubmed id to remove!'; return; } let entityId = `${this.canonicalId}==${this.uniprot}`; - if (this.role === "Maintainer") { + if (this.role === 'Maintainer') { data = { - Entity: "condensate_protein", + Entity: 'condensate_protein', EntityId: entityId, - ChangeOperation: "remove", - Attribute: "pubmed_ids", + ChangeOperation: 'remove', + Attribute: 'pubmed_ids', Value: this.pubmedId, SubmissionComments: this.comment ? this.comment - : "Maintainer do not need to provide a reason for such change at the moment!", - Status: "accepted", + : 'Maintainer do not need to provide a reason for such change at the moment!', + Status: 'accepted', }; } else { - if (this.comment === "" || this.comment.length < 50) { + if (this.comment === '' || this.comment.length < 50) { this.isValid = false; this.commentError = - "Reason should not be empty or less than 50 character!"; + 'Reason should not be empty or less than 50 character!'; return false; } data = { - Entity: "condensate_protein", + Entity: 'condensate_protein', EntityId: entityId, - ChangeOperation: "remove", - Attribute: "pubmed_ids", + ChangeOperation: 'remove', + Attribute: 'pubmed_ids', Value: this.pubmedId, SubmissionComments: this.comment, - Status: "requested", + Status: 'requested', }; } - } else if (this.mode === "protein" && this.actionType === "Add") { + } else if (this.mode === 'protein' && this.actionType === 'Add') { //val if (!this.inputValidation(this.data)) { return; } - if (this.role === "Maintainer") { + if (this.role === 'Maintainer') { data = { - Entity: "protein", + Entity: 'protein', EntityId: this.data.uniprot_id, - ChangeOperation: "add", - Attribute: "proteins", + ChangeOperation: 'add', + Attribute: 'proteins', Value: this.pubmedId, SubmissionComments: this.comment ? this.comment - : "Maintainer do not need to provide a reason for such change at the moment!", - Status: "accepted", + : 'Maintainer do not need to provide a reason for such change at the moment!', + Status: 'accepted', }; } else { - if (this.comment === "" || this.comment.length < 50) { + if (this.comment === '' || this.comment.length < 50) { this.isValid = false; this.commentError = - "Reason should not be empty or less than 50 character!"; + 'Reason should not be empty or less than 50 character!'; return false; } data = { - Entity: "protein", + Entity: 'protein', EntityId: this.data.uniprot_id, - ChangeOperation: "add", - Attribute: "proteins", + ChangeOperation: 'add', + Attribute: 'proteins', Value: this.pubmedId, SubmissionComments: this.comment, - Status: "requested", + Status: 'requested', }; } - } else if (this.mode === "protein" && this.actionType === "Delete") { + } else if (this.mode === 'protein' && this.actionType === 'Delete') { if (!this.inputValidation(this.data)) { return; } - this.message = ""; - if (this.pubmedId === "") { + this.message = ''; + if (this.pubmedId === '') { this.isValid = false; - this.error = "Please select a pubmed id to remove!"; + this.error = 'Please select a pubmed id to remove!'; return; } - if (this.role === "Maintainer") { + if (this.role === 'Maintainer') { data = { - Entity: "protein", + Entity: 'protein', EntityId: this.data.uniprot_id, - ChangeOperation: "remove", - Attribute: "proteins", + ChangeOperation: 'remove', + Attribute: 'proteins', Value: this.pubmedId, SubmissionComments: this.comment ? this.comment - : "Maintainer do not need to provide a reason for such change at the moment!", - Status: "accepted", + : 'Maintainer do not need to provide a reason for such change at the moment!', + Status: 'accepted', }; } else { - if (this.comment === "" || this.comment.length < 50) { + if (this.comment === '' || this.comment.length < 50) { this.isValid = false; this.commentError = - "Reason should not be empty or less than 50 character!"; + 'Reason should not be empty or less than 50 character!'; return false; } data = { - Entity: "protein", + Entity: 'protein', EntityId: this.data.uniprot_id, - ChangeOperation: "remove", - Attribute: "proteins", + ChangeOperation: 'remove', + Attribute: 'proteins', Value: this.pubmedId, SubmissionComments: this.comment, - Status: "requested", + Status: 'requested', }; } } this.isValid = true; - this.error = ""; - this.message = ""; + this.error = ''; + this.message = ''; this.isLoading = true; this.toasterIsOpen = true; @@ -847,12 +872,12 @@ export default { this.isLoading = false; this.isValid = true; - this.comment = ""; - this.error = ""; + this.comment = ''; + this.error = ''; this.serverError = false; - this.pubmedId = ""; - this.commentError = ""; - this.$emit("update-key"); + this.pubmedId = ''; + this.commentError = ''; + this.$emit('update-key'); setTimeout(() => { this.toasterIsOpen = false; }, 2000); @@ -861,59 +886,59 @@ export default { this.isLoading = false; this.serverError = true; this.message = - e.message || "Something went wrong, please try again later!"; + e.message || 'Something went wrong, please try again later!'; } }, selectPubmedId() { - this.error = ""; - this.serverError = ""; + this.error = ''; + this.serverError = ''; }, close() { - this.$emit("cancel"); + this.$emit('cancel'); }, closeAddPubmed() { - this.$emit("closeToggleAddPubmed"); + this.$emit('closeToggleAddPubmed'); }, closeDeletePubmed() { - this.$emit("closeToggleDeletePubmed"); + this.$emit('closeToggleDeletePubmed'); }, validation(e) { - if (this.pubmedId === "") { + if (this.pubmedId === '') { this.isValid = false; - this.error = "Pubmed Id should not be empty!"; + this.error = 'Pubmed Id should not be empty!'; return false; } if (e.keyCode === 32) { this.isValid = false; - this.error = "Pubmed Id should not have empty space!"; + this.error = 'Pubmed Id should not have empty space!'; return false; } if (this.whitespaceRegex.test(this.pubmedId)) { this.isValid = false; - this.error = "Pubmed Id should not have empty space!"; + this.error = 'Pubmed Id should not have empty space!'; return false; } this.isValid = true; - this.message = ""; - this.error = ""; + this.message = ''; + this.error = ''; return true; }, selectValue() { - if (this.actionType === "Add") { - this.error = ""; - this.commentError = ""; - this.message = ""; - this.buttonText = "Add"; - (this.pubmedId = ""), (this.isValid = true); + if (this.actionType === 'Add') { + this.error = ''; + this.commentError = ''; + this.message = ''; + this.buttonText = 'Add'; + (this.pubmedId = ''), (this.isValid = true); this.showAddPubmedId = true; this.showButtons = true; this.showDeletePubmedId = false; - } else if (this.actionType === "Delete") { - this.buttonText = "Delete"; - this.error = ""; - this.commentError = ""; - this.message = ""; + } else if (this.actionType === 'Delete') { + this.buttonText = 'Delete'; + this.error = ''; + this.commentError = ''; + this.message = ''; this.showDeletePubmedId = true; this.showButtons = true; this.showAddPubmedId = false; diff --git a/web/src/components/CondensateDetailPage.vue b/web/src/components/CondensateDetailPage.vue index 6895133..a896f76 100644 --- a/web/src/components/CondensateDetailPage.vue +++ b/web/src/components/CondensateDetailPage.vue @@ -1,6 +1,9 @@ <template> <div> - <base-toaster :open="toasterIsOpen" @close="hideDialog"> + <base-toaster + :open="toasterIsOpen" + @close="hideDialog" + > <div class="flex justify-between items-center"> <font-awesome-icon class="ml-3" @@ -9,8 +12,14 @@ /> <h4>Request submitted successfully!</h4> - <button class="btn btn-outline" @click="hideDialog"> - <font-awesome-icon icon="fa-regular fa-circle-xmark" size="2x" /> + <button + class="btn btn-outline" + @click="hideDialog" + > + <font-awesome-icon + icon="fa-regular fa-circle-xmark" + size="2x" + /> </button> </div> </base-toaster> @@ -41,7 +50,10 @@ <base-spinner /> </div> <div> - <h2 v-if="fetchError" class="text-red-500"> + <h2 + v-if="fetchError" + class="text-red-500" + > {{ fetchError }} </h2> </div> @@ -55,7 +67,7 @@ <button v-if=" getUserData !== null && - (getUserData === 'Maintainer' || + (getUserData === 'Maintainer' || getUserData === 'Contributor') " class="rounded-lg px-5 py-4 text-center" @@ -87,8 +99,7 @@ <label for="condensateName" class="control-label col-sm-2" - >Name</label - > + >Name</label> <div class="col-sm-10"> <div class="w-1/4"> <input @@ -98,7 +109,7 @@ type="text" placeholder="Enter condensate name." @keyup="validateName" - /> + > <p v-if="nameError && nameErrMsg" class="text-red-500 mt-2 text-2xl font-bold" @@ -113,8 +124,7 @@ <label for="condensateName" class="control-label col-sm-2" - >Reason</label - > + >Reason</label> <div class="col-sm-10"> <div class="w-3/4"> <textarea @@ -197,7 +207,9 @@ </div> </form> </div> - <h4 class="round">General Information</h4> + <h4 class="round"> + General Information + </h4> <div class=" bg-white @@ -217,7 +229,9 @@ </div> </div> --> <div class="row"> - <div class="text col-sm-3 text-2xl">Species</div> + <div class="text col-sm-3 text-2xl"> + Species + </div> <div class="col-sm-9 text-2xl"> {{ response.data.species_name }} ({{ response.data.species_tax_id @@ -225,13 +239,15 @@ </div> </div> <div class="row text-2xl"> - <div class="text col-sm-3">Description</div> + <div class="text col-sm-3"> + Description + </div> <div class="col-sm-9 text-2xl"> {{ response.data.description }} <button v-if=" getUserData !== null && - (getUserData === 'Maintainer' || + (getUserData === 'Maintainer' || getUserData === 'Contributor') " class="btn btn-primary btn-link" @@ -261,8 +277,7 @@ <label class="control-label col-sm-2" for="keyword" - >Update description</label - > + >Update description</label> <div class="col-sm-10"> <textarea id="comment" @@ -303,8 +318,7 @@ <label class="control-label col-sm-2" for="funComment" - >Reason</label - > + >Reason</label> <div class="col-sm-10"> <textarea @@ -439,7 +453,7 @@ <button v-if=" getUserData !== null && - (getUserData === 'Maintainer' || + (getUserData === 'Maintainer' || getUserData === 'Contributor') " class="btn btn-primary btn-link" @@ -461,13 +475,17 @@ </div> <div class="row text-2xl"> - <div class="text col-sm-3">No. of Proteins</div> + <div class="text col-sm-3"> + No. of Proteins + </div> <div class="col-sm-9"> {{ response.data.protein_count }} </div> </div> <div class="row text-2xl"> - <div class="text col-sm-3 text-2xl">Evidence star</div> + <div class="text col-sm-3 text-2xl"> + Evidence star + </div> <div class="flex col-sm-9"> <star-rating :star-size="20" @@ -487,7 +505,9 @@ </div> <div v-show="response.data.experiments.length > 0"> - <h4 class="round">Experiments</h4> + <h4 class="round"> + Experiments + </h4> <div class="panel panel-default"> <table class="csi table table-hover table-responsive"> <thead> @@ -583,8 +603,8 @@ <button v-if=" getUserData !== null && - !response.data.is_experimental && - (getUserData === 'Maintainer' || + !response.data.is_experimental && + (getUserData === 'Maintainer' || getUserData === 'Contributor') " class=" @@ -605,7 +625,10 @@ > Add a protein to this condensate </button> - <div v-if="showAddProtein" class="panel panel-default mt-4"> + <div + v-if="showAddProtein" + class="panel panel-default mt-4" + > <div class="panel-body"> <div class="container-fluid col-md-12"> <div v-if="isLoading"> @@ -617,9 +640,10 @@ @submit.prevent="addProtein(response)" > <div class="form-group"> - <label class="control-label col-sm-2" for="species" - >Add protein with uniprot ID</label - > + <label + class="control-label col-sm-2" + for="species" + >Add protein with uniprot ID</label> <div class="col-sm-4 text-2xl"> <div class="flex"> <input @@ -629,7 +653,7 @@ type="text" placeholder="Uniprot ID. (e.g. P35637)" @keyup="uniprotKeyup" - /> + > <a class=" @@ -646,15 +670,16 @@ <p v-if="isUniProtIdError" - v-html="uniprotIdErrorMsg" class="text-red-600 mt-4 font-bold" - ></p> + v-html="uniprotIdErrorMsg" + /> </div> </div> <div class="form-group"> - <label class="control-label col-sm-2" for="keyword" - >Reason</label - > + <label + class="control-label col-sm-2" + for="keyword" + >Reason</label> <div class="col-sm-8"> <textarea id="comment" @@ -800,7 +825,9 @@ /> </div> <div class="my-14 border border-gray-300 rounded-lg p-8"> - <h4 class="round mb-8">Top Contributors</h4> + <h4 class="round mb-8"> + Top Contributors + </h4> <contributor-list-table :id="response.data.canonical_id" entity="condensate" @@ -858,26 +885,26 @@ </template> <script> -import fetchCondensate from "@/components/DDCODE/fetchCondensate.vue"; -import llpsTable from "@/components/LlpsTable.vue"; -import fetchPubMed from "@/components/DDCODE/fetchPubMed"; -import AddDeleteMarker from "./CMS/addDeleteMarker.vue"; -import BaseSpinner from "./UI/BaseSpinner.vue"; -import CondensateUpdateItemsTable from "./CondensateUpdateItemsTable.vue"; -import BaseToaster from "./UI/BaseToaster.vue"; -import StarRating from "vue-star-rating"; -import ContributorListTable from "./ContributorListTable.vue"; +import fetchCondensate from '@/components/DDCODE/fetchCondensate.vue'; +import llpsTable from '@/components/LlpsTable.vue'; +import fetchPubMed from '@/components/DDCODE/fetchPubMed'; +import AddDeleteMarker from './CMS/addDeleteMarker.vue'; +import BaseSpinner from './UI/BaseSpinner.vue'; +import CondensateUpdateItemsTable from './CondensateUpdateItemsTable.vue'; +import BaseToaster from './UI/BaseToaster.vue'; +import StarRating from 'vue-star-rating'; +import ContributorListTable from './ContributorListTable.vue'; //import FetchUserSpecificUpdateItems from './CMS/fetchUserSpecificUpdateItems.vue'; //import RequestUpdateItemTable from "./RequestUpdateItemTable.vue"; // import TheModal from './UI/TheModal.vue'; -const _ = require("lodash"); -require("./js/clipboard"); +const _ = require('lodash'); +require('./js/clipboard'); -let host = require("./js/const").apiHost; +let host = require('./js/const').apiHost; export default { - name: "CondensateDetailPage", + name: 'CondensateDetailPage', components: { fetchCondensate, llpsTable, @@ -892,39 +919,39 @@ export default { // RequestUpdateItemTable, }, - props: ["condensateId"], + props: ['condensateId'], data() { return { condensate: this.$route.params.condensate ? this.$route.params.condensate : this.condensateId, - dbNames: require("./js/const").db, - isDev: process.env.NODE_ENV === "development", + dbNames: require('./js/const').db, + isDev: process.env.NODE_ENV === 'development', showAddProtein: false, - uniprotId: "", - comment: "", - proteinComment: "", - condensateNameComment: "", - condensateNameCommentErrMsg: "", - markerComment: "", - descriptionComment: "", - description: "", - descriptionMsg: "", - condensateName: "", - descriptionErrorMsg: "", + uniprotId: '', + comment: '', + proteinComment: '', + condensateNameComment: '', + condensateNameCommentErrMsg: '', + markerComment: '', + descriptionComment: '', + description: '', + descriptionMsg: '', + condensateName: '', + descriptionErrorMsg: '', isUniProtIdError: false, isCommentError: false, isSubmitted: false, error: false, showUpdateDescription: false, showAddDeleteMarker: false, - commentErrorMsg: "", + commentErrorMsg: '', descriptionCommentErr: false, nameCommentErr: false, proteinCommentErr: false, markerCommentErr: false, - uniprotIdErrorMsg: "", - message: "", + uniprotIdErrorMsg: '', + message: '', whitespaceRegex: /(\s)/, nameError: false, toggleModel: false, @@ -936,10 +963,10 @@ export default { }, computed: { jwt: function () { - return this.$store.getters["User/jwt"]; + return this.$store.getters['User/jwt']; }, getUserData() { - const userRole = this.$store.getters["User/userRole"]; + const userRole = this.$store.getters['User/userRole']; return userRole; }, @@ -947,7 +974,7 @@ export default { methods: { validateName() { - (this.nameErrMsg = ""), (this.nameError = false); + (this.nameErrMsg = ''), (this.nameError = false); }, showDialog() { this.toasterIsOpen = true; @@ -963,83 +990,83 @@ export default { }, toggleChangeName() { this.changeName = !this.changeName; - this.condensateName = ""; + this.condensateName = ''; }, closeAddDeleteMarker() { - this.comment = ""; + this.comment = ''; this.showAddDeleteMarker = false; }, uniprotKeyup() { - this.message = ""; + this.message = ''; this.isUniProtIdError = false; }, commentKeyup() { - this.message = ""; + this.message = ''; this.descriptionCommentErr = false; this.isCommentError = false; }, descriptionKeyup() { - this.descriptionMsg = ""; - this.descriptionErrorMsg = ""; + this.descriptionMsg = ''; + this.descriptionErrorMsg = ''; }, toggleUpdateDescription(res) { this.description = res; - this.descriptionMsg = ""; - this.descriptionErrorMsg = ""; + this.descriptionMsg = ''; + this.descriptionErrorMsg = ''; this.descriptionCommentErr = false; - this.descriptionComment = ""; + this.descriptionComment = ''; this.showUpdateDescription = !this.showUpdateDescription; }, validateProteinComment() { this.proteinCommentErr = false; - this.commentErrorMsg = ""; + this.commentErrorMsg = ''; }, async changeCondensateName(response) { if (!this.condensateName) { this.nameError = true; - this.nameErrMsg = "Enter a condensate name."; + this.nameErrMsg = 'Enter a condensate name.'; return; } this.nameError = false; - this.nameErrMsg = ""; + this.nameErrMsg = ''; if (this.isDev) { - host = require("./js/const").devApiHost; + host = require('./js/const').devApiHost; } let url = `${host}/api/update-items`; let data; - if (this.getUserData === "Maintainer") { + if (this.getUserData === 'Maintainer') { data = { - Entity: "condensate", + Entity: 'condensate', EntityId: response.data.canonical_id, - ChangeOperation: "update", - Attribute: "name", + ChangeOperation: 'update', + Attribute: 'name', Value: this.condensateName, SubmissionComments: this.condensateNameComment ? this.condensateNameComment - : "Maintainer do not need to provide a reason for such change at the moment!", - Status: "accepted", + : 'Maintainer do not need to provide a reason for such change at the moment!', + Status: 'accepted', }; } else { if ( - this.condensateNameComment === "" || + this.condensateNameComment === '' || this.condensateNameComment.length < 50 ) { this.nameCommentErr = true; this.condensateNameCommentErrMsg = - "Reason should not be empty or less than 50 characters!"; + 'Reason should not be empty or less than 50 characters!'; return; } data = { - Entity: "condensate", + Entity: 'condensate', EntityId: response.data.canonical_id, - ChangeOperation: "update", - Attribute: "name", + ChangeOperation: 'update', + Attribute: 'name', Value: this.condensateName, SubmissionComments: this.condensateNameComment, - Status: "requested", + Status: 'requested', }; } this.isLoading = true; @@ -1056,9 +1083,9 @@ export default { this.isLoading = false; this.toasterIsOpen = true; this.nameCommentErr = false; - this.condensateNameCommentErrMsg = ""; - this.condensateNameComment = ""; - this.condensateName = ""; + this.condensateNameCommentErrMsg = ''; + this.condensateNameComment = ''; + this.condensateName = ''; this.updatedKey += 1; setTimeout(() => { this.toasterIsOpen = false; @@ -1068,56 +1095,56 @@ export default { this.isLoading = false; this.nameCommentErr = true; this.condensateNameCommentErrMsg = - e.message || "Something went wrong, please try again later!"; + e.message || 'Something went wrong, please try again later!'; } }, async updateDescription(response) { - if (this.description === "") { - this.descriptionErrorMsg = "Description should not be empty!"; + if (this.description === '') { + this.descriptionErrorMsg = 'Description should not be empty!'; return; } else if (this.description === response.data.description) { this.descriptionErrorMsg = - "You have not added any description. Please modify the existing description."; - this.descriptionMsg = ""; + 'You have not added any description. Please modify the existing description.'; + this.descriptionMsg = ''; return; } if (this.isDev) { - host = require("./js/const").devApiHost; + host = require('./js/const').devApiHost; } let url = `${host}/api/update-items`; let data; - if (this.getUserData === "Maintainer") { + if (this.getUserData === 'Maintainer') { data = { - Entity: "condensate", + Entity: 'condensate', EntityId: response.data.canonical_id, - ChangeOperation: "update", - Attribute: "description", + ChangeOperation: 'update', + Attribute: 'description', Value: this.description, SubmissionComments: this.descriptionComment ? this.descriptionComment - : "Maintainer do not need to provide a reason for such change at the moment!", - Status: "accepted", + : 'Maintainer do not need to provide a reason for such change at the moment!', + Status: 'accepted', }; } else { if ( - this.descriptionComment === "" || + this.descriptionComment === '' || this.descriptionComment.length < 50 ) { this.descriptionCommentErr = true; this.commentErrorMsg = - "Reason should not be empty or less than 50 characters!"; + 'Reason should not be empty or less than 50 characters!'; return; } data = { - Entity: "condensate", + Entity: 'condensate', EntityId: response.data.canonical_id, - ChangeOperation: "update", - Attribute: "description", + ChangeOperation: 'update', + Attribute: 'description', Value: this.description, SubmissionComments: this.descriptionComment, - Status: "requested", + Status: 'requested', }; } this.isLoading = true; @@ -1134,11 +1161,11 @@ export default { this.isLoading = false; this.toasterIsOpen = true; this.descriptionCommentErr = false; - this.descriptionComment = ""; - this.descriptionErrorMsg = ""; + this.descriptionComment = ''; + this.descriptionErrorMsg = ''; this.description = response.data.description; - this.commentErrorMsg = ""; - this.comment = ""; + this.commentErrorMsg = ''; + this.comment = ''; this.isCommentError = false; this.updatedKey += 1; setTimeout(() => { @@ -1146,15 +1173,15 @@ export default { }, 2000); } catch (e) { console.error(e); - this.descriptionMsg = ""; + this.descriptionMsg = ''; this.descriptionErrorMsg = - e.message || "Something went wrong, please try again later!"; + e.message || 'Something went wrong, please try again later!'; } }, async uniprotIdValidation(id) { try { const res = await fetch(`https://www.uniprot.org/uniprot/${id}`, { - method: "HEAD", + method: 'HEAD', }); const response = await res; if (!response.ok && response.status === 404) { @@ -1171,15 +1198,15 @@ export default { >mail@cd-code.org</a> for further assist. `, }; } else { - return { valid: true, msg: "Valid Uniprot ID." }; + return { valid: true, msg: 'Valid Uniprot ID.' }; } } catch (err) { - console.log("error", err); + console.log('error', err); return { valid: false, msg: err.message + - "." + + '.' + `Please contact CD-CODE admin <a href="mailto:mail@cd-code.org" class="text-blue-500 hover:text-blue-700" @@ -1188,21 +1215,21 @@ export default { } }, async addProtein(response) { - if (this.uniprotId === "") { - this.uniprotIdErrorMsg = "Uniprot ID should not be empty!"; + if (this.uniprotId === '') { + this.uniprotIdErrorMsg = 'Uniprot ID should not be empty!'; this.isUniProtIdError = true; return; } else if (this.uniprotId.length < 6) { - this.uniprotIdErrorMsg = "Uniprot ID should be minimum of 6 character."; + this.uniprotIdErrorMsg = 'Uniprot ID should be minimum of 6 character.'; this.isUniProtIdError = true; return; } else if (this.uniprotId.length > 10) { this.uniprotIdErrorMsg = - "Uniprot ID should be maximum of 10 character."; + 'Uniprot ID should be maximum of 10 character.'; this.isUniProtIdError = true; return; } else if (this.whitespaceRegex.test(this.uniprotId)) { - this.uniprotIdErrorMsg = "Uniprot ID should not have space in between."; + this.uniprotIdErrorMsg = 'Uniprot ID should not have space in between.'; this.isUniProtIdError = true; return; } @@ -1210,7 +1237,7 @@ export default { const validUniprot = await this.uniprotIdValidation(this.uniprotId); if (!validUniprot.valid) { - this.message = ""; + this.message = ''; this.uniprotIdErrorMsg = validUniprot.msg; this.isUniProtIdError = true; return; @@ -1220,46 +1247,46 @@ export default { (u) => u.uniprot_id === this.uniprotId ); if (findUniprotId) { - this.message = ""; - this.uniprotIdErrorMsg = "The Uniprot ID already exists!"; + this.message = ''; + this.uniprotIdErrorMsg = 'The Uniprot ID already exists!'; this.isUniProtIdError = true; return; } this.isError = false; if (this.isDev) { - host = require("./js/const").devApiHost; + host = require('./js/const').devApiHost; } let url = `${host}/api/update-items`; let data; - if (this.getUserData === "Maintainer") { + if (this.getUserData === 'Maintainer') { data = { - Entity: "condensate", + Entity: 'condensate', EntityId: response.data.canonical_id, - ChangeOperation: "add", - Attribute: "proteins", + ChangeOperation: 'add', + Attribute: 'proteins', Value: this.uniprotId, SubmissionComments: this.proteinComment ? this.proteinComment - : "Maintainer do not need to provide a reason for such change at the moment!", - Status: "accepted", + : 'Maintainer do not need to provide a reason for such change at the moment!', + Status: 'accepted', }; } else { - if (this.proteinComment === "" || this.proteinComment.length < 50) { + if (this.proteinComment === '' || this.proteinComment.length < 50) { this.proteinCommentErr = true; this.commentErrorMsg = - "Reason should not be empty or less than 50 characters!"; + 'Reason should not be empty or less than 50 characters!'; return; } data = { - Entity: "condensate", + Entity: 'condensate', EntityId: response.data.canonical_id, - ChangeOperation: "add", - Attribute: "proteins", + ChangeOperation: 'add', + Attribute: 'proteins', Value: this.uniprotId, SubmissionComments: this.proteinComment, - Status: "requested", + Status: 'requested', }; } this.isLoading = true; @@ -1279,10 +1306,10 @@ export default { this.error = false; this.isSubmitted = true; - this.uniprotId = ""; - this.comment = ""; + this.uniprotId = ''; + this.comment = ''; this.proteinCommentErr = false; - this.commentErrorMsg = ""; + this.commentErrorMsg = ''; this.updatedKey += 1; setTimeout(() => { this.toasterIsOpen = false; @@ -1290,7 +1317,7 @@ export default { } catch (e) { console.error(e); this.message = - e.message || "Something went wrong, please try again later!"; + e.message || 'Something went wrong, please try again later!'; this.isSubmitted = true; this.error = true; } @@ -1352,17 +1379,17 @@ export default { (a) => `<a href='/protein/${a}' class="link" target='_blank'>${a}</a>` ) - .join(", "); - else return ""; + .join(', '); + else return ''; }, getDbNames(names) { - return _.map(names, (i) => this.dbNames[i]).join(", "); + return _.map(names, (i) => this.dbNames[i]).join(', '); }, getTitleAuthors(title, data) { - return `${title}\n\n${_.map(data, (a) => a.name).join(", ")}`; + return `${title}\n\n${_.map(data, (a) => a.name).join(', ')}`; }, tokenize(input, token) { - return input.replaceAll(token, "<br/>"); + return input.replaceAll(token, '<br/>'); }, }, }; diff --git a/web/src/components/DDCODE/fetchCondensate.vue b/web/src/components/DDCODE/fetchCondensate.vue index 1e33bdb..c424f86 100644 --- a/web/src/components/DDCODE/fetchCondensate.vue +++ b/web/src/components/DDCODE/fetchCondensate.vue @@ -1,26 +1,30 @@ <template> <div class="mainContent"> - <slot :response="response" :loading="loading" :fetchError="fetchError" /> + <slot + :response="response" + :loading="loading" + :fetchError="fetchError" + /> </div> </template> <script> -import LoginVue from "../../views/Login.vue"; +import LoginVue from '../../views/Login.vue'; // require modules /* eslint-disable no-unused-vars */ -const _ = require("lodash"); -let host = require("../js/const").host; -const apikey = require("../js/const").apikey; +const _ = require('lodash'); +let host = require('../js/const').host; +const apikey = require('../js/const').apikey; export default { - name: "FetchCondensate", - props: ["condensate"], + name: 'FetchCondensate', + props: ['condensate'], data() { return { response: null, loading: false, - fetchError: "", - isDev: process.env.NODE_ENV === "development", + fetchError: '', + isDev: process.env.NODE_ENV === 'development', }; }, mounted() { @@ -39,20 +43,20 @@ export default { vm.loading = true; if (vm.isDev) { - host = require("../js/const").devHost; + host = require('../js/const').devHost; } let url = `${host}/condensates/${vm.condensate}`; - console.log("url is", url); + console.log('url is', url); if (vm.condensate && !_.isEmpty(vm.condensate)) { // console.log('True'); try { const res = await fetch(url, { - method: "GET", - mode: "cors", - cache: "no-cache", + method: 'GET', + mode: 'cors', + cache: 'no-cache', headers: { Authorization: `Bearer ${apikey}`, }, @@ -60,11 +64,11 @@ export default { if (!res.ok) { vm.loading = false; - vm.response = ""; + vm.response = ''; vm.fetchError = `${res.status} Internal Error, please write a mail to CDCode Admin.`; return; } - vm.fetchError = ""; + vm.fetchError = ''; const response = await res.json(); setTimeout(() => { vm.loading = false; @@ -92,14 +96,14 @@ export default { // }, 10); // }); } catch (err) { - console.log("in catch", err.message); + console.log('in catch', err.message); vm.loading = false; - vm.response = ""; + vm.response = ''; vm.fetchError = `${err.message} Internal Error, please write a mail to CDCode Admin.`; } } else { vm.loading = false; - vm.response = ""; + vm.response = ''; } }, }, diff --git a/web/src/components/Datatable/CondensateDataTable.vue b/web/src/components/Datatable/CondensateDataTable.vue index 76e876f..2247147 100644 --- a/web/src/components/Datatable/CondensateDataTable.vue +++ b/web/src/components/Datatable/CondensateDataTable.vue @@ -1,6 +1,9 @@ <template> <div> - <h2 v-if="error" class="text-red-500"> + <h2 + v-if="error" + class="text-red-500" + > {{ errorMsg }} </h2> <div v-if="!error"> @@ -15,11 +18,11 @@ </template> <script> -const _ = require("lodash"); -let host = require("../js/const").host; -const apikey = require("../js/const").apikey; -const $ = (window.jQuery = require("jquery")); -require("../js/datatable"); +const _ = require('lodash'); +let host = require('../js/const').host; +const apikey = require('../js/const').apikey; +const $ = (window.jQuery = require('jquery')); +require('../js/datatable'); let table; @@ -39,22 +42,22 @@ function getRating(data) { } } - r.push("</div>"); + r.push('</div>'); return r; } export default { - name: "DataTable", - props: ["id", "data", "category", "isExperimental"], + name: 'DataTable', + props: ['id', 'data', 'category', 'isExperimental'], data() { return { rows: [], header: [], total: 0, - downloadUrl: "", + downloadUrl: '', error: false, - errorMsg: "", - isDev: process.env.NODE_ENV === "development", + errorMsg: '', + isDev: process.env.NODE_ENV === 'development', }; }, mounted() { @@ -68,7 +71,7 @@ export default { } else if (this.isExperimental === false) { return `&is_experimental=false`; } else if (!this.isExperimental) { - return ""; + return ''; } }, moveDetailPage(id) { @@ -85,8 +88,8 @@ export default { const columns = [ { - title: "Name", - data: "name", + title: 'Name', + data: 'name', fnCreatedCell: (nTd, sData, oData) => { $(nTd).html(`<a href="" class="detail-link"> ${oData.name}</a>`); }, @@ -106,25 +109,25 @@ export default { // }, // }, { - title: "No. Proteins", + title: 'No. Proteins', render: function (data, type, row, meta) { return row.protein_count; }, }, { - title: "Species", - data: "species_name", + title: 'Species', + data: 'species_name', render: function (data, type, row, meta) { if (data) { - return data + " (" + row.species_tax_id + ")"; + return data + ' (' + row.species_tax_id + ')'; } else { - return "Chimeras"; + return 'Chimeras'; } }, }, { - title: "Confidence Score", - data: "confidence_score", + title: 'Confidence Score', + data: 'confidence_score', defaultContent: `0`, render: function (data, type, row, meta) { return data; @@ -132,9 +135,9 @@ export default { fnCreatedCell: (nTd, sData, oData) => { // console.log(sData) if (sData) { - $(nTd).html(getRating(sData).join("\n")); + $(nTd).html(getRating(sData).join('\n')); } else { - $(nTd).html(getRating(0).join("\n")); + $(nTd).html(getRating(0).join('\n')); } }, }, @@ -142,7 +145,7 @@ export default { const nTableOptions = { columns, - aaSorting: [[0, "asc"]], + aaSorting: [[0, 'asc']], stateSave: true, paging: true, searching: true, @@ -153,10 +156,10 @@ export default { oSettings.jqXHR = vm.fetchCallback(vm.rows, aoData, fnCallback); }, pageLength: 50, - order: [[2, "desc"]], // order: [[0, 'asc']], + order: [[2, 'desc']], // order: [[0, 'asc']], bDestroy: true, // Add this property to new setting, oLanguage: { - sSearch: "Filter ", + sSearch: 'Filter ', }, dom: '<"row"<"col-sm-8"f><"#download.col-sm-4">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>', // dom: '<"row"<"col-sm-4"l><"col-sm-6"f><"#download.col-sm-2">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>' @@ -170,17 +173,17 @@ export default { table = $(tableId).DataTable(nTableOptions); - $("#download").html( + $('#download').html( '<div style="text-align: right;"><div class="dropdown">\n' + ' <button class="btn download-link" type="button" id="dropdownMenuButton">\n' + - " Download CSV\n" + - " </button>\n" + - "</div></div>" + ' Download CSV\n' + + ' </button>\n' + + '</div></div>' ); const tableBody = `${tableId} tbody`; - $(tableBody).on("click", "tr td a.detail-link", (e) => { + $(tableBody).on('click', 'tr td a.detail-link', (e) => { e.preventDefault(); const tr = $(e.target).parent().parent(); const row = table.row(tr); @@ -188,7 +191,7 @@ export default { vm.moveDetailPage(row.data().canonical_id); }); - $("#download").on("click", (e) => { + $('#download').on('click', (e) => { e.preventDefault(); vm.downloadCsv(); }); @@ -197,11 +200,11 @@ export default { let vm = this; // console.log(aoData) - let orderItem = aoData.find((x) => x.name === "order"); - let startItem = aoData.find((x) => x.name === "start"); - let lengthItem = aoData.find((x) => x.name === "length"); - let searchItem = aoData.find((x) => x.name === "search"); - let functionalType = aoData.find((x) => x.name === "columns").value[3]; + let orderItem = aoData.find((x) => x.name === 'order'); + let startItem = aoData.find((x) => x.name === 'start'); + let lengthItem = aoData.find((x) => x.name === 'length'); + let searchItem = aoData.find((x) => x.name === 'search'); + let functionalType = aoData.find((x) => x.name === 'columns').value[3]; // console.log(functionalType.search.value) // console.log(`length = ${lengthItem.value}, offset = ${startItem.value}`) @@ -212,17 +215,17 @@ export default { let search = searchItem.value.value; const columns = [ - "name", - "protein_count", - "species_name", - "confidence_score", + 'name', + 'protein_count', + 'species_name', + 'confidence_score', ]; let order = []; if (orderItem.value.length > 0) { orderItem.value.forEach(function (data) { // console.log(data) - if (data.dir === "desc") { + if (data.dir === 'desc') { order.push(`-${columns[data.column]}`); } else { order.push(`${columns[data.column]}`); @@ -232,25 +235,25 @@ export default { } if (vm.isDev) { - host = require("../js/const").devHost; + host = require('../js/const').devHost; } vm.downloadUrl = `${host}/condensates?fields=biomarkers,canonical_id,description,is_experimental,name,protein_count,proteins,species_name,species_tax_id,synonyms,confidence_score&size=50000` + - (order.length > 0 ? `&sort=${order.join(",")}` : "") + - (search ? `&query=${search}` : "") + + (order.length > 0 ? `&sort=${order.join(',')}` : '') + + (search ? `&query=${search}` : '') + (functionalType.search.value ? `&functional_type=${functionalType.search.value}` - : "") + + : '') + this.hasExperimental(); let url = `${host}/condensates?fields=biomarkers,canonical_id,description,is_experimental,name,protein_count,proteins,species_name,species_tax_id,synonyms,confidence_score&size=50&page=${page}` + - (order.length > 0 ? `&sort=${order.join(",")}` : "") + - (search ? `&query=${search}` : "") + + (order.length > 0 ? `&sort=${order.join(',')}` : '') + + (search ? `&query=${search}` : '') + (functionalType.search.value ? `&functional_type=${functionalType.search.value}` - : "") + + : '') + this.hasExperimental(); try { @@ -260,13 +263,13 @@ export default { }, }); - if (res.statusText !== "OK") { + if (res.statusText !== 'OK') { this.error = true; this.errorMsg = `${res.status} Internal Error, please write a mail to CDCode Admin.`; return; } this.error = false; - this.errorMsg = ""; + this.errorMsg = ''; if (res.data) { // vm.meta = res.meta; // vm.data = res.data; @@ -286,7 +289,7 @@ export default { this.error = true; this.errorMsg = error.response.data.error.message + - "Internal Error, please write a mail to CDCode Admin."; + 'Internal Error, please write a mail to CDCode Admin.'; } }, async downloadCsv() { @@ -304,15 +307,15 @@ export default { let exports = []; let header = [ - "Name", - "Canonical ID", - "Biomolecular/Synthetic", - "Species Name", - "Species Tax Id", - "Proteins", + 'Name', + 'Canonical ID', + 'Biomolecular/Synthetic', + 'Species Name', + 'Species Tax Id', + 'Proteins', ]; - exports.push(header.join(", ")); + exports.push(header.join(', ')); _.forEach(data, (item) => { let proteins = []; @@ -324,20 +327,20 @@ export default { [ `"${item.name}"`, `"${item.canonical_id}"`, - `"${item.is_experimental ? "Synthetic" : "Biomolecular"}"`, + `"${item.is_experimental ? 'Synthetic' : 'Biomolecular'}"`, `"${item.species_name}"`, item.species_tax_id, - `"${proteins.join("\t")}"`, - ].join(",") + `"${proteins.join('\t')}"`, + ].join(',') ); }); - let blob = new Blob([exports.join("\n")], { type: "text/csv" }); + let blob = new Blob([exports.join('\n')], { type: 'text/csv' }); let contentDisposition = 'Content-Disposition: attachment; filename="download-data.csv"'; - let filename = contentDisposition.split("filename=")[1]; - filename = filename.replace(/"/g, ""); + let filename = contentDisposition.split('filename=')[1]; + filename = filename.replace(/"/g, ''); let link = vm.$refs.download; link.href = window.URL.createObjectURL(blob); @@ -347,7 +350,7 @@ export default { } catch (error) { // console.error(error) this.error = true; - this.errorMsg = "You are not authorized to access this item."; + this.errorMsg = 'You are not authorized to access this item.'; } }, }, diff --git a/web/src/components/LlpsTable.vue b/web/src/components/LlpsTable.vue index 228f035..e1df06f 100644 --- a/web/src/components/LlpsTable.vue +++ b/web/src/components/LlpsTable.vue @@ -31,30 +31,30 @@ </template> <script> -import TheActionModal from "./UI/TheActionModal.vue"; -import TheDeleteModal from "./UI/TheDeleteModal.vue"; -import { apikey } from "@/components/js/const"; +import TheActionModal from './UI/TheActionModal.vue'; +import TheDeleteModal from './UI/TheDeleteModal.vue'; +import { apikey } from '@/components/js/const'; -const _ = require("lodash"); -const $ = (window.jQuery = require("jquery")); -require("./js/clipboard"); -require("@/components/js/datatable"); +const _ = require('lodash'); +const $ = (window.jQuery = require('jquery')); +require('./js/clipboard'); +require('@/components/js/datatable'); let table; const scoreMap = { - "http://llps.biocuckoo.cn/": 1, - "http://db.phasep.pro/browse/highthroughput/": 2, - "http://db.phasep.pro/browse/reviewed/": 4, - "http://db.phasep.pro/browse/uniprotreviewed/": 4, - "http://bio-comp.org.cn/llpsdb/": 4, - "https://phasepro.elte.hu/": 4, - "https://pubmed.ncbi.nlm.nih.gov/": 4, - "https://cd-code.org/": 5, + 'http://llps.biocuckoo.cn/': 1, + 'http://db.phasep.pro/browse/highthroughput/': 2, + 'http://db.phasep.pro/browse/reviewed/': 4, + 'http://db.phasep.pro/browse/uniprotreviewed/': 4, + 'http://bio-comp.org.cn/llpsdb/': 4, + 'https://phasepro.elte.hu/': 4, + 'https://pubmed.ncbi.nlm.nih.gov/': 4, + 'https://cd-code.org/': 5, }; function getStartWith(url) { - let ret = ""; + let ret = ''; _.forEach(_.keys(scoreMap), (i) => { if (url.startsWith(i)) { ret = i; @@ -80,39 +80,39 @@ function getRating(data) { } } - r.push("</div>"); + r.push('</div>'); return r; } export default { - name: "LlpsTable", + name: 'LlpsTable', components: { TheActionModal, TheDeleteModal, }, props: [ - "id", - "data", - "map", - "pubmed", - "dbTags", - "isExperimental", - "canonicalId", - "proteinDriverCriterion", - "proteinExperimentalEvidence", - "proteinFunctionalType", + 'id', + 'data', + 'map', + 'pubmed', + 'dbTags', + 'isExperimental', + 'canonicalId', + 'proteinDriverCriterion', + 'proteinExperimentalEvidence', + 'proteinFunctionalType', ], data() { return { toggleActionModal: false, toggleDeleteModal: false, - uniprotId: "", - selectedRowData: "", - canonicaliD: "", + uniprotId: '', + selectedRowData: '', + canonicaliD: '', proteinConfidenceScore: 0, - proteinFunctionalTypeData: "", - proteinExperimentalEvidenceData: "", - proteinDriverCriterionData: "", + proteinFunctionalTypeData: '', + proteinExperimentalEvidenceData: '', + proteinDriverCriterionData: '', }; }, mounted() { @@ -123,11 +123,11 @@ export default { methods: { closeModal() { this.toggleActionModal = false; - this.$emit("update-key"); + this.$emit('update-key'); }, closeDeleteModal() { this.toggleDeleteModal = false; - this.$emit("update-key"); + this.$emit('update-key'); }, fetchProtein(uniprot_id) { const vm = this; @@ -164,14 +164,14 @@ export default { // console.log(item) if (item) { const url = - "https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&retmode=json&id="; + 'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&retmode=json&id='; const request = url + item; - let $row = $("#" + item); + let $row = $('#' + item); - if (!$row.attr("aria-label")) { + if (!$row.attr('aria-label')) { fetch(request, { - method: "GET", - mode: "cors", + method: 'GET', + mode: 'cors', headers: {}, }) .then((response) => response.json()) @@ -181,9 +181,9 @@ export default { $(`a[id="${item}"]`).each(function () { $(this).attr( - "aria-label", + 'aria-label', `${res.title}\n\n${_.map(res.authors, (a) => a.name).join( - ", " + ', ' )}` ); }); @@ -202,16 +202,16 @@ export default { const columns = vm.isExperimental ? [ { - title: "UniProt", - data: "uniprot_id", - className: "text-nowrap", + title: 'UniProt', + data: 'uniprot_id', + className: 'text-nowrap', fnCreatedCell: (nTd, sData, oData) => { $(nTd).html(`<a href="" class="protein-link"> ${sData} </a>`); }, }, { - title: "Gene Name", - data: "gene_name", + title: 'Gene Name', + data: 'gene_name', fnCreatedCell: (nTd, sData, oData) => { if (sData) { $(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`); @@ -221,9 +221,9 @@ export default { }, }, { - title: "Name", - data: "name", - className: "text-nowrap", + title: 'Name', + data: 'name', + className: 'text-nowrap', fnCreatedCell: (nTd, sData, oData) => { if (sData) { $(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`); @@ -268,19 +268,19 @@ export default { // } // }, { - title: "Pubmed *", - data: "uniprot_id", - className: "text-nowrap", + title: 'Pubmed *', + data: 'uniprot_id', + className: 'text-nowrap', render: function (data, type, row, meta) { if (vm.pubmed) { let dat = vm.pubmed[row.uniprot_id]; if (dat) { - return dat.join(", "); + return dat.join(', '); } else { - return ""; + return ''; } } else { - return ""; + return ''; } }, fnCreatedCell: (nTd, sData, oData) => { @@ -292,13 +292,13 @@ export default { // $(nTd).html(data.filter(a => a.startsWith('http')).join('\n')); // $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>')); $(nTd).html( - data.map((i) => vm.createPubMedLink(i)).join(" ") + data.map((i) => vm.createPubMedLink(i)).join(' ') ); } else { - $(nTd).html(""); + $(nTd).html(''); } } else { - $(nTd).html(""); + $(nTd).html(''); } }, }, @@ -388,22 +388,22 @@ export default { // }, // } { - title: "Confidence Score", - className: "text-nowrap", - data: "uniprot_id", + title: 'Confidence Score', + className: 'text-nowrap', + data: 'uniprot_id', render: function (data, type, row, meta) { // console.log(_.flatMap(row.condensates, c => c.data_sources)) let dat = vm.map[row.uniprot_id]; if (dat) { return dat; } - return ""; + return ''; }, fnCreatedCell: (nTd, sData, oData) => { // console.log(sData) let data = vm.map[oData.uniprot_id]; if (data) { - $(nTd).html(getRating(data).join("\n")); + $(nTd).html(getRating(data).join('\n')); } }, }, @@ -437,17 +437,17 @@ export default { ] : [ { - title: "UniProt", - data: "uniprot_id", - className: "whitespace-normal", + title: 'UniProt', + data: 'uniprot_id', + className: 'whitespace-normal', fnCreatedCell: (nTd, sData, oData) => { $(nTd).html(`<a href="" class="protein-link"> ${sData} </a>`); }, }, { - title: "Gene Name", - data: "gene_name", - className: "whitespace-normal break-words", + title: 'Gene Name', + data: 'gene_name', + className: 'whitespace-normal break-words', fnCreatedCell: (nTd, sData, oData) => { if (sData) { $(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`); @@ -457,9 +457,9 @@ export default { }, }, { - title: "Name", - data: "name", - className: "whitespace-normal break-words", + title: 'Name', + data: 'name', + className: 'whitespace-normal break-words', fnCreatedCell: (nTd, sData, oData) => { if (sData) { $(nTd).html(`<a href="" class="protein-link"> ${sData}</a>`); @@ -491,20 +491,20 @@ export default { 'Pubmed <a class="uniprot-link tooltipped tooltipped-e tooltipped-multiline"\n' + ' aria-label="Publications providing evidence for protein being a component in this condensate"><span class="fa fa-info-circle" /></a>', tooltip: - "Publications providing evidence for protein being a component in this condensate", - data: "uniprot_id", - className: "whitespace-normal break-words", + 'Publications providing evidence for protein being a component in this condensate', + data: 'uniprot_id', + className: 'whitespace-normal break-words', render: function (data, type, row, meta) { if (vm.pubmed) { let dat = vm.pubmed[row.uniprot_id]; if (dat) { - return dat.join(", "); + return dat.join(', '); } else { - return ""; + return ''; } } else { - return ""; + return ''; } }, fnCreatedCell: (nTd, sData, oData) => { @@ -515,20 +515,20 @@ export default { // $(nTd).html(data.filter(a => a.startsWith('http')).join('\n')); // $(nTd).html(data.map(i => vm.createLink(i)).join('<br/>')); $(nTd).html( - data.map((i) => vm.createPubMedLink(i)).join(" ") + data.map((i) => vm.createPubMedLink(i)).join(' ') ); } else { - $(nTd).html(""); + $(nTd).html(''); } } else { - $(nTd).html(""); + $(nTd).html(''); } }, }, { - title: "Functional Type", - data: "protein_functional_type", - className: "whitespace-normal break-words", + title: 'Functional Type', + data: 'protein_functional_type', + className: 'whitespace-normal break-words', render: function (data, type, row, meta) { // console.log(_.flatMap(row.condensates, c => c.data_sources)) @@ -539,15 +539,15 @@ export default { if (dat) { return _.startCase(dat); } else { - return ""; + return ''; } }, }, { - title: "Experimental Evidence", - data: "protein_exp_evidence", - defaultContent: "", - className: "whitespace-normal break-words", + title: 'Experimental Evidence', + data: 'protein_exp_evidence', + defaultContent: '', + className: 'whitespace-normal break-words', render: function (data, type, row, meta) { // console.log(_.flatMap(row.condensates, c => c.data_sources)) @@ -558,18 +558,18 @@ export default { if (dat) { const val = dat.map((i) => - i === "frap" ? (dat[i] = i.toUpperCase()) : _.startCase(i) + i === 'frap' ? (dat[i] = i.toUpperCase()) : _.startCase(i) ); - return val.join(", "); + return val.join(', '); } - return ""; + return ''; }, }, { - title: "Driver Criterion", - data: "driver_criterion", - className: "whitespace-normal break-words", + title: 'Driver Criterion', + data: 'driver_criterion', + className: 'whitespace-normal break-words', render: function (data, type, row, meta) { // console.log(_.flatMap(row.condensates, c => c.data_sources)) @@ -579,12 +579,12 @@ export default { let dat = vm.proteinDriverCriterion[row.uniprot_id]; if (dat) { const val = dat.map((i) => - i === "self_ps" ? (dat[i] = "Self-PS") : _.startCase(i) + i === 'self_ps' ? (dat[i] = 'Self-PS') : _.startCase(i) ); - return val.join(", "); + return val.join(', '); } - return ""; + return ''; }, }, // { @@ -618,10 +618,10 @@ export default { // }, // } { - title: "Confidence Score", - className: "whitespace-nowrap", - data: "uniprot_id", - name: "confidenceScore", + title: 'Confidence Score', + className: 'whitespace-nowrap', + data: 'uniprot_id', + name: 'confidenceScore', render: function (data, type, row, meta) { // console.log(_.flatMap(row.condensates, c => c.data_sources)) let dat = vm.map[row.uniprot_id]; @@ -629,20 +629,20 @@ export default { // console.log(getRatingValue(vm.map[row.uniprot_id])) return dat; } - return ""; + return ''; }, fnCreatedCell: (nTd, sData, oData) => { let data = vm.map[oData.uniprot_id]; if (data) { - $(nTd).html(getRating(data).join("\n")); + $(nTd).html(getRating(data).join('\n')); } }, }, { - title: "Action", - data: "uniprot_id", - name: "action", - className: "text-nowrap", + title: 'Action', + data: 'uniprot_id', + name: 'action', + className: 'text-nowrap', fnCreatedCell: (nTd, sData, oData) => { $(nTd).html( `<button class="rounded-md bg-transparent hover:bg-blue-500 text-blue-700 @@ -692,7 +692,7 @@ export default { // aaSorting: [[ 0, 'asc' ]], lengthMenu: [ [10, 25, 50, -1], - [10, 25, 50, "All"], + [10, 25, 50, 'All'], ], paging: true, searching: true, @@ -701,7 +701,7 @@ export default { order: [], // order: [[0, 'asc']], bDestroy: true, // Add this property to new setting, oLanguage: { - sSearch: "Filter", + sSearch: 'Filter', }, dom: '<"row"<"col-sm-2"l><"col-sm-2"f><"col-sm-6"p><"#download.col-sm-2">><"row"t><"row"<"col-sm-4"i><"col-sm-8"p>>', initComplete: function () { @@ -743,22 +743,22 @@ export default { table = $(tableId).DataTable(nTableOptions); - $("#download").html( + $('#download').html( '<div style="text-align: right;"><div class="dropdown">\n' + ' <button class="btn download-link" type="button" id="dropdownMenuButton">\n' + - " Download CSV\n" + - " </button>\n" + - "</div></div>" + ' Download CSV\n' + + ' </button>\n' + + '</div></div>' ); if ( - !this.$store.getters["User/userRole"] || - this.$store.getters["User/userRole"] === "Administrator" || - this.$store.getters["User/userRole"] === "Authenticated" + !this.$store.getters['User/userRole'] || + this.$store.getters['User/userRole'] === 'Administrator' || + this.$store.getters['User/userRole'] === 'Authenticated' ) { var colIndex; table.columns().every(function () { - colIndex = table.column("action:name").index(); + colIndex = table.column('action:name').index(); // ... do something with data(), or this.nodes(), etc }); @@ -767,20 +767,20 @@ export default { const tableBody = `${tableId} tbody`; - $(tableBody).on("click", "tr td a.protein-link", (e) => { + $(tableBody).on('click', 'tr td a.protein-link', (e) => { e.preventDefault(); const tr = $(e.target).parent().parent(); const row = table.row(tr); vm.fetchProtein(row.data().uniprot_id); }); - $(tableBody).on("click", "tr td a.uniprot-link", (e) => { + $(tableBody).on('click', 'tr td a.uniprot-link', (e) => { e.preventDefault(); const tr = $(e.target).parent().parent(); const row = table.row(tr); vm.forwardUniprot(row.data().uniprot_id); }); - $(tableBody).on("click", "tr td button.edit-link", (e) => { + $(tableBody).on('click', 'tr td button.edit-link', (e) => { e.preventDefault(); const tr = $(e.target).parent().parent(); @@ -824,7 +824,7 @@ export default { // vm.$router.push(`/protein/editDetails/${id}`); // vm.fetchPubMedId(e.target.id); }); - $(tableBody).on("click", "tr td button.delete-link", (e) => { + $(tableBody).on('click', 'tr td button.delete-link', (e) => { e.preventDefault(); const tr = $(e.target).parent().parent(); @@ -836,12 +836,12 @@ export default { // vm.$router.push(`/protein/editDetails/${id}`); // vm.fetchPubMedId(e.target.id); }); - $(tableBody).on("mouseover", "tr td a.pubmed-link", (e) => { + $(tableBody).on('mouseover', 'tr td a.pubmed-link', (e) => { e.preventDefault(); // console.log(e.target.id) vm.fetchPubMedId(e.target.id); }); - $("#download").on("click", (e) => { + $('#download').on('click', (e) => { e.preventDefault(); vm.downloadCsv(); }); @@ -854,18 +854,18 @@ export default { let exports = []; let header = [ - "UniProt", - "Gene Name", - "Name", - "Pubmed", - "Functional Type", - "Experimental Evidence", - "Driver Criterion", - "DB", - "Confidence Score", + 'UniProt', + 'Gene Name', + 'Name', + 'Pubmed', + 'Functional Type', + 'Experimental Evidence', + 'Driver Criterion', + 'DB', + 'Confidence Score', ]; - exports.push(header.join(", ")); + exports.push(header.join(', ')); _.forEach(data, (item) => { let pubMedIds = []; @@ -907,7 +907,7 @@ export default { let dbTags; if (vm.dbTags) { let dat = vm.dbTags[id]; - dbTags = dat.join("\t"); + dbTags = dat.join('\t'); } exports.push( @@ -915,22 +915,22 @@ export default { `"${item.uniprot_id}"`, `"${item.gene_name}"`, `"${item.name}"`, - `"${pubMedIds.join("\t")}"`, + `"${pubMedIds.join('\t')}"`, findProteinFunctionalType, proteinExpEvi, proteinDriCri, dbTags, findScore, - ].join(",") + ].join(',') ); }); - let blob = new Blob([exports.join("\n")], { type: "text/csv" }); + let blob = new Blob([exports.join('\n')], { type: 'text/csv' }); let contentDisposition = 'Content-Disposition: attachment; filename="download-data.csv"'; - let filename = contentDisposition.split("filename=")[1]; - filename = filename.replace(/"/g, ""); + let filename = contentDisposition.split('filename=')[1]; + filename = filename.replace(/"/g, ''); let link = vm.$refs.download; link.href = window.URL.createObjectURL(blob); diff --git a/web/src/components/Team/TheTeamList.vue b/web/src/components/Team/TheTeamList.vue index e093d18..b041337 100644 --- a/web/src/components/Team/TheTeamList.vue +++ b/web/src/components/Team/TheTeamList.vue @@ -48,7 +48,7 @@ " :src="items.img" alt="profile image" - /> + > </a> </div> <div class="my-2 inline-block font-medium text-center"> @@ -66,61 +66,61 @@ export default { teamMembers: [ { id: 1, - name: "Agnes Toth-Petroczy", - img: require("../../assets/teams/agnes.jpeg"), + name: 'Agnes Toth-Petroczy', + img: require('../../assets/teams/agnes.jpeg'), profileLink: - "https://www.mpi-cbg.de/research/researchgroups/currentgroups/agnes-toth-petroczy/research-focus", + 'https://www.mpi-cbg.de/research/researchgroups/currentgroups/agnes-toth-petroczy/research-focus', }, { id: 2, - name: "Nadia Rostam", - img: require("../../assets/teams/Nadia.png"), - profileLink: "https://de.linkedin.com/in/nadia-rostam-2657bb122/", + name: 'Nadia Rostam', + img: require('../../assets/teams/Nadia.png'), + profileLink: 'https://de.linkedin.com/in/nadia-rostam-2657bb122/', }, { id: 3, - name: "Soumyadeep Ghosh", - img: require("../../assets/teams/deep.jpeg"), - profileLink: "https://www.linkedin.com/in/soumyadeep11194/", + name: 'Soumyadeep Ghosh', + img: require('../../assets/teams/deep.jpeg'), + profileLink: 'https://www.linkedin.com/in/soumyadeep11194/', }, { id: 4, - name: "Chi Fung Willis Chow", - img: require("../../assets/teams/willies.jpeg"), - profileLink: "https://www.linkedin.com/in/chi-fung-chow-4a365314b/", + name: 'Chi Fung Willis Chow', + img: require('../../assets/teams/willies.jpeg'), + profileLink: 'https://www.linkedin.com/in/chi-fung-chow-4a365314b/', }, { id: 5, - name: "Anna Hadarovich", - img: require("../../assets/teams/anna.png"), - profileLink: "https://www.linkedin.com/in/anna-hadarovich/", + name: 'Anna Hadarovich', + img: require('../../assets/teams/anna.png'), + profileLink: 'https://www.linkedin.com/in/anna-hadarovich/', }, { id: 7, - name: "Rajat Ghosh", - img: require("../../assets/teams/rajat.jpg"), - profileLink: "https://www.linkedin.com/in/rajat-ghosh-9a535096/", + name: 'Rajat Ghosh', + img: require('../../assets/teams/rajat.jpg'), + profileLink: 'https://www.linkedin.com/in/rajat-ghosh-9a535096/', }, { id: 8, - name: "HongKee Moon", - img: require("../../assets/teams/HK.jpeg"), - profileLink: "https://www.linkedin.com/in/moony/", + name: 'HongKee Moon', + img: require('../../assets/teams/HK.jpeg'), + profileLink: 'https://www.linkedin.com/in/moony/', }, { id: 9, - name: "Lena Hersemann", - img: require("../../assets/teams/lenna.png"), - profileLink: "https://de.linkedin.com/in/lenahersemann", + name: 'Lena Hersemann', + img: require('../../assets/teams/lenna.png'), + profileLink: 'https://de.linkedin.com/in/lenahersemann', }, { id: 10, - name: "Anthony Hyman", - img: require("../../assets/teams/Hyman.jpeg"), - profileLink: "https://hymanlab.org/hyman_lab/", + name: 'Anthony Hyman', + img: require('../../assets/teams/Hyman.jpeg'), + profileLink: 'https://hymanlab.org/hyman_lab/', }, ], }; diff --git a/web/src/views/Profile.vue b/web/src/views/Profile.vue index 536b832..ede5e8c 100644 --- a/web/src/views/Profile.vue +++ b/web/src/views/Profile.vue @@ -14,7 +14,7 @@ size="lg" /> - <h4>{{toasterMessage}}</h4> + <h4>{{ toasterMessage }}</h4> <button class="btn btn-outline" @click="hideDialog" @@ -452,7 +452,10 @@ </template> </fetch-profile> - <fetch-users v-if="getRole === 'Administrator'" :key="'users-' + updatedUsersKey"> + <fetch-users + v-if="getRole === 'Administrator'" + :key="'users-' + updatedUsersKey" + > <template slot-scope="{ response, loading }"> <slot :response="response" -- GitLab