Newer
Older
<div class="flex justify-between items-center">
<font-awesome-icon
class="ml-3"
icon="fa-solid fa-thumbs-up "
size="lg"
/>
<h4>Request submitted successfully!</h4>
<button
class="btn btn-outline"
@click="hideDialog"
>
<font-awesome-icon
icon="fa-regular fa-circle-xmark"
size="2x"
/>
</button>
</div>
</base-toaster>
raghosh
committed
<div class="flex flex-wrap justify-center">
<!-- Sidebar -->
<!--<div class="bg-light border-right" id="sidebar-wrapper">-->
<!--<!–<div class="sidebar-heading">Menu </div>–>-->
<!--<div class="list-group list-group-flush">-->
<!--<a href="#" class="list-group-item list-group-item-action bg-light">Search</a>-->
<!--<a href="#" class="list-group-item list-group-item-action bg-light">Columns</a>-->
<!--<a href="#" class="list-group-item list-group-item-action bg-light">Filters</a>-->
<!--<a href="#" class="list-group-item list-group-item-action bg-light">Download</a>-->
<!--<a href="#" class="list-group-item list-group-item-action bg-light">Contacts</a>-->
<!--</div>-->
<!--</div>-->
<!-- /#sidebar-wrapper -->
raghosh
committed
<div class="w-5/6">
<fetch-condensate :condensate="condensate">
<template slot-scope="{ response, loading, fetchError }">
:fetchError="fetchError"
<div v-if="loading || response === null">
</div>
<!-- <div v-if="loading">
<base-spinner></base-spinner>
</div> -->
<div class="flex space-x-4">
<h2>{{ response.data.name }}</h2>
<button
v-if="
getUserData !== null &&
getUserData === 'Contributor')
"
class="rounded-lg px-5 py-4 text-center"
@click="toggleChangeName"
>
<font-awesome-icon
size="lg"
icon="fa-solid fa-pen-to-square fa-xl"
/>
</button>
</div>
raghosh
committed
v-if="changeName && (getUserData === 'Maintainer' ||
getUserData === 'Contributor')"
class="
bg-white
p-4
border border-gray-300
rounded-lg
bg-opacity-80
"
>
<form
class="form-horizontal"
@submit.prevent="changeCondensateName(response)"
>
<div class="form-group space-y-4">
<div class="row">
<label
for="condensateName"
class="control-label col-sm-2"
<div class="col-sm-10">
<div class="w-1/4">
<input
id="condensateName"
v-model.trim="condensateName"
class="form-control"
type="text"
placeholder="Enter condensate name."
@keyup="validateName"
<p
v-if="nameError && nameErrMsg"
class="text-red-500 mt-2 text-2xl font-bold"
>
{{ nameErrMsg }}
</p>
</div>
</div>
<div class="row">
<label
for="condensateName"
class="control-label col-sm-2"
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<div class="col-sm-10">
<div class="w-3/4">
<textarea
v-model.trim="condensateNameComment"
class="
form-control
block
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700
focus:bg-white
focus:border-blue-600
focus:outline-none
"
rows="5"
:placeholder="
getUserData === 'Maintainer'
? 'Optional'
: 'Mandatory'
"
@keyup="descriptionKeyup"
/>
<p
v-if="
nameCommentErr && condensateNameCommentErrMsg
"
class="text-red-500 mt-2 text-2xl font-bold"
>
{{ condensateNameCommentErrMsg }}
</p>
</div>
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<div class="flex space-x-4 mt-4">
<button
type="submit"
class="
text-white
bg-blue-500
hover:bg-blue-700
focus:ring-2 focus:ring-blue-300
rounded-lg
inline-flex
items-center
px-5
py-2.5
text-center
font-bold
"
>
Save
</button>
<button
class="
bg-white
hover:bg-gray-200
focus:ring-2 focus:ring-gray-300
rounded-lg
border border-gray-300
px-5
py-2.5
hover:text-gray-900
font-bold
"
@click="toggleChangeName"
>
Cancel
</button>
</div>
</div>
</div>
</div>
<div
class="
bg-white
rounded-lg
bg-opacity-80
"
>
<div class="panel-body">
<div class="container-fluid col-md-12">
<!-- <div class="row">
<div class="col-sm-9">
{{ response.data.canonical_id }}
</div>
</div> -->
<div class="col-sm-9 text-2xl">
{{ response.data.species_name }} ({{
response.data.species_tax_id
}})
</div>
<div class="row text-2xl">
<div class="col-sm-9 text-2xl">
{{ response.data.description }}
<button
v-if="
getUserData !== null &&
getUserData === 'Contributor')
"
class="btn btn-primary btn-link"
@click="
toggleUpdateDescription(response.data.description)
"
>
<font-awesome-icon
icon="fa-solid fa-pen-to-square fa-xl"
/>
</button>
<div
raghosh
committed
v-if="showUpdateDescription && (getUserData === 'Maintainer' ||
getUserData === 'Contributor')"
>
<div class="panel-body">
<div class="container-fluid col-md-12">
<form
class="form-horizontal"
autocomplete="off"
@submit.prevent="updateDescription(response)"
>
<div v-if="isLoading">
</div>
<div class="form-group">
<label
class="control-label col-sm-2"
for="keyword"
<div class="col-sm-10">
<textarea
class="
form-control
block
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700
focus:bg-white
focus:border-blue-600
focus:outline-none
"
rows="5"
placeholder="Description"
@keyup="descriptionKeyup"
<p
v-if="descriptionErrorMsg"
class="text-red-600 font-bold"
>
{{ descriptionErrorMsg }}
</p>
</div>
</div>
<div class="form-group">
<label
class="control-label col-sm-2"
for="funComment"
<div class="col-sm-10">
<textarea
v-model.trim="descriptionComment"
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
class="
form-control
block
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700
focus:bg-white
focus:border-blue-600
focus:outline-none
"
rows="5"
:placeholder="
getUserData === 'Maintainer'
? 'Optional'
: 'Mandatory'
"
@keyup="commentKeyup"
v-if="descriptionCommentErr"
>
{{ commentErrorMsg }}
</p>
<p
v-if="descriptionMsg"
class="text-green-600 font-bold"
>
{{ descriptionMsg }}
</p>
<div class="flex space-x-4">
<button
class="
text-white
hover:bg-blue-700
focus:ring-2 focus:ring-blue-300
rounded-lg
inline-flex
items-center
px-5
py-2.5
text-center
font-bold
"
type="submit"
>
Update
</button>
<button
class="
bg-white
hover:bg-gray-200
focus:ring-2 focus:ring-gray-300
rounded-lg
border border-gray-300
px-5
py-2.5
hover:text-gray-900
font-bold
"
type="button"
@click="toggleUpdateDescription"
>
Cancel
</div>
</div>
</div>
</div>
</div>
</div>
v-show="response.data.synonyms"
class="row"
>
<div class="text col-sm-3">
Also Known As
</div>
<div class="col-sm-9">
{{
response.data.synonyms
? response.data.synonyms
.replaceAll("-", " ")
<button
v-if="
getUserData !== null &&
(getUserData === 'Maintainer' ||
getUserData === 'Contributor')
"
class="btn btn-primary btn-link"
@click="showAddDeleteSynonym = !showAddDeleteSynonym"
>
<font-awesome-icon
icon="fa-solid fa-pen-to-square fa-xl"
/>
</button>
raghosh
committed
v-if="showAddDeleteSynonym && (getUserData === 'Maintainer' ||
getUserData === 'Contributor')"
:synonym-data="response.data.synonyms"
:condensate-id="response.data.canonical_id"
@update-key="updatedKey += 1"
@close="closeAddDeleteSynonym"
/>
<div
v-if="getIsExperimental=== 'false'"
class="row text-2xl"
>
<div class="text col-sm-3 text-2xl">
Markers
<a
class="uniprot-link tooltipped tooltipped-e"
aria-label="Proteins which can help in unique identification of the condensate organelle"
>
<span class="fa fa-info-circle" />
</a>
</div>
<div class="col-sm-9">
<span v-if="!response.data.biomarkers"> None </span>
<span
v-else
v-html="getProteinLinks(response.data.biomarkers)"
<button
v-if="
getUserData !== null &&
getUserData === 'Contributor')
"
class="btn btn-primary btn-link"
@click="showAddDeleteMarker = !showAddDeleteMarker"
>
<font-awesome-icon
icon="fa-solid fa-pen-to-square fa-xl"
/>
</button>
<add-delete-marker
raghosh
committed
v-if="showAddDeleteMarker && (getUserData === 'Maintainer' ||
getUserData === 'Contributor')"
:marker-data="response.data.biomarkers"
:condensate-id="response.data.canonical_id"
:proteins="response.data.proteins"
</div>
<div class="row text-2xl">
<div class="col-sm-9">
{{ response.data.protein_count }}
</div>
</div>
<div class="flex col-sm-9">
<star-rating
:star-size="20"
:show-rating="false"
:rating="
response.data.confidence_score
? response.data.confidence_score
"
:read-only="true"
:increment="0.01"
</div>
</div>
</div>
<div
v-show="response.data.experiments.length > 0"
class="border bg-white shadow-md rounded-lg my-14 p-8"
>
<table
id="experiment-table"
class="csi table table-hover table-responsive"
>
<thead>
<tr class="active">
<!-- <th>Exp. ID</th>-->
<th>Method</th>
<th>Phase Separated</th>
<th>pH value</th>
<th>Morphology</th>
<th>PubMed</th>
<th>Solute Concentration</th>
<th>Temperature</th>
<th>Salts</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in response.data.experiments"
>
<!-- <td>{{item.exp_id}}</td>-->
<td class="text-nowrap">
{{ item.detection_method }}
</td>
<td>{{ item.is_phase_separated }}</td>
<td>{{ item.ph_value }}</td>
<td>{{ item.morphology }}</td>
<td class="text-nowrap">
<a
:id="item.publication_link.split('/')[3]"
:href="item.publication_link"
class="uniprot-link tooltipped tooltipped-n tooltipped-multiline"
target="_blank"
>
{{ item.publication_link.split('/')[3] }}
<i class="glyphicon glyphicon-link" />
</a>
<td>
{{ tokenize(item.solute_concentrations, ";") }}
</td>
<td>
{{ item.temperature }}
</td>
<td>
<ul
v-for="(item_salt, index_salt) in item.salts"
:key="index_salt"
v-for="(value, key, index_li) in item_salt"
:key="index_li"
>
{{ key }} : {{ value }}
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="my-14 border bg-white shadow-md rounded-lg p-8">
getUserData !== null &&
!response.data.is_experimental &&
(getUserData === 'Maintainer' ||
hover:bg-blue-700
focus:ring-2 focus:ring-blue-300
rounded-lg
inline-flex
items-center
px-5
py-3
text-center
font-bold
"
type="button"
@click="showAddProtein = !showAddProtein"
>
Add a protein to this condensate
</button>
raghosh
committed
v-if="showAddProtein && (getUserData === 'Maintainer' ||
getUserData === 'Contributor')"
<div class="panel-body">
<div class="container-fluid col-md-12">
<div v-if="isLoading">
<base-spinner />
<form
class="form-horizontal"
autocomplete="off"
@submit.prevent="addProtein(response)"
>
<div class="form-group">
<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
id="keyword"
v-model.trim="uniprotId"
class="form-control"
type="text"
<a
class="
uniprot-link
tooltipped
ml-2
tooltipped-e
"
aria-label="Proteins which can help in unique identification of the condensate organelle"
>
<span class="fa fa-info-circle" />
</a>
</div>
<p
v-if="isUniProtIdError"
class="text-red-600 mt-4 font-bold"
<label
class="control-label col-sm-2"
for="keyword"
>Reason</label>
<div class="col-sm-8">
<textarea
id="comment"
v-model.trim="proteinComment"
class="
form-control
block
px-3
py-1.5
text-base
font-normal
text-gray-700
bg-white bg-clip-padding
border border-solid border-gray-300
rounded
transition
ease-in-out
m-0
focus:text-gray-700
focus:bg-white
focus:border-blue-600
focus:outline-none
"
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
rows="5"
:placeholder="
getUserData === 'Maintainer'
? 'Optional.'
: 'Mandatory.'
"
@keyup="validateProteinComment"
/>
<p
v-if="proteinCommentErr"
class="text-red-600 font-bold"
>
{{ commentErrorMsg }}
</p>
<p
v-if="isSubmitted"
:class="
error
? 'text-red-600 font-bold'
: 'text-green-600 font-bold'
"
>
{{ message }}
</p>
<div class="flex space-x-4">
<button
id="dropdownMenuButton"
class="
hover:bg-blue-700
focus:ring-2 focus:ring-blue-300
rounded-lg
inline-flex
items-center
px-5
py-2.5
text-center
font-bold
"
type="submit"
>
Add
</button>
<button
id="dropdownMenuButton"
class="
bg-white
hover:bg-gray-200
focus:ring-2 focus:ring-gray-300
rounded-lg
border border-gray-300
px-5
py-2.5
hover:text-gray-900
font-bold
"
</div>
</div>
<llps-table
id="protein-table"
:data="response.data.proteins"
:canonical-id="response.data.canonical_id"
:map="response.data.protein_confidence_score"
:is-experimental="response.data.is_experimental"
:pubmed="response.data.protein_pubmed_ids"
:db-tags="response.data.protein_source_db_tags"
response.data.protein_driver_criterion
"
:protein-experimental-evidence="
response.data.protein_exp_evidence
"
:protein-functional-type="
response.data.protein_functional_type
raghosh
committed
</div>
raghosh
committed
<!-- for above llps table protein functiona type data -->
<!-- :protein-driver-criterion="response.data.protein_driver_criterion"
raghosh
committed
:protein-experimental-evidence="response.data.protein_exp_evidence" -->
<!-- :protein-functional-type="response.data.protein_functional_type" -->
<!-- <fetch-user-specific-update-items :id="response.data.canonical_id">
raghosh
committed
<template slot-scope="{ response, loading }">
<slot :response="response" :loading="loading">
<div v-if="loading || response === null">Loading...</div>
<div v-else>
<h4 class="round">Requests</h4>
<condensate-update-items-table id="condensateUpdateItem" :data="response" />
</div>
</slot>
</template>
raghosh
committed
</fetch-user-specific-update-items> -->
v-if="getUserData "
class="border bg-white shadow-md rounded-lg p-8"
>
<h4 class="round mb-8">
All submitted changes for this condensate
</h4>
<contributor-list-table class="my-14"
<!-- <request-update-item-table
id="protein-table"
:data="response.data.proteins"
/> -->
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
<!-- {{response.data.experiments}}-->
<!--<div class="panel panel-default">-->
<!--<table class="csi table table-hover table-responsive">-->
<!--<thead>-->
<!--<tr class="active">-->
<!--<th>Name</th>-->
<!--<th>Species</th>-->
<!--<th>Uniprot</th>-->
<!--<th>Sequence</th>-->
<!--</tr>-->
<!--</thead>-->
<!--<tbody>-->
<!--<tr v-for="(item, index) in response.data.llps_ptms" v-bind:key="index">-->
<!--<td class="col-sm-6">{{item.name}}</td>-->
<!--<td>{{item.species_name}}</td>-->
<!--<td>{{item.uniprot_id}}</td>-->
<!--<td>-->
<!--<input type="text" :value="item.sequence">-->
<!--<button class="copy-button" :name="'item.uniprot_id'" :id="'item.uniprot_id'" :data-clipboard-text="item.sequence">Copy</button>-->
<!--</td>-->
<!--</tr>-->
<!--</tbody>-->
<!--</table>-->
<!--</div>-->
<!--<h4 class="round">Additional Information</h4>-->
<!--<div class="panel panel-default">-->
<!--<div class="panel-body">-->
<!--<div class="row">-->
<!--<div class="text col-sm-3">Proteins</div>-->
<!--<div class="col-sm-9">-->
<!--{{response.data.proteins}}-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
</div>
</slot>
</template>
</fetch-condensate>
</div>
</div>
<!-- /#wrapper -->
import fetchCondensate from '@/components/DDCODE/fetchCondensate.vue';
import llpsTable from '@/components/LlpsTable.vue';
import AddDeleteMarker from './CMS/addDeleteMarker.vue';
import AddDeleteSynonym from './CMS/addDeleteSynonym.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';
raghosh
committed
//import FetchUserSpecificUpdateItems from './CMS/fetchUserSpecificUpdateItems.vue';
raghosh
committed
//import RequestUpdateItemTable from "./RequestUpdateItemTable.vue";
// import TheModal from './UI/TheModal.vue';
export default {
components: {
fetchCondensate,
llpsTable,
AddDeleteMarker,
raghosh
committed
CondensateUpdateItemsTable,
StarRating,
ContributorListTable,
raghosh
committed
// FetchUserSpecificUpdateItems,
// RequestUpdateItemTable,
data() {
return {
condensate: this.$route.params.condensate
? this.$route.params.condensate
: this.condensateId,
dbNames: require('./js/const').db,
isDev: process.env.NODE_ENV === 'development',
showAddProtein: false,
uniprotId: '',
comment: '',
proteinComment: '',
condensateNameComment: '',
condensateNameCommentErrMsg: '',
markerComment: '',
descriptionComment: '',
description: '',
descriptionMsg: '',
condensateName: '',
descriptionErrorMsg: '',
isUniProtIdError: false,
isCommentError: false,
isSubmitted: false,
error: false,
showUpdateDescription: false,
showAddDeleteMarker: false,
descriptionCommentErr: false,
nameCommentErr: false,
proteinCommentErr: false,
markerCommentErr: false,
whitespaceRegex: /(\s)/,
nameError: false,
toggleModel: false,
isLoading: false,
toasterIsOpen: false,
changeName: false,
moon
committed
updatedKey: 0,
};
},
computed: {
jwt: function () {
getUserData() {
raghosh
committed
return userRole;
},
getIsExperimental(){
return this.$store.getters['Param/isExperimental']
}
},
created(){
this.$store.dispatch('Param/getIsExperimentalFlagFromStorage');
},
methods: {
cancelAddProtein(){
this.uniprotId='',
this.proteinComment = '',
this.showAddProtein = false
},
validateName() {
},