#39: Removed marker from condensate detail page if it is synthetic...

#39: Removed marker from condensate detail page if it is synthetic condensate.(if IsExperimental=true)

web/src/components/AddNovelCondensate.vue

 <template>
-  <div class="flex flex-wrap bg-white">
-    <div class="w-5/6">
+  <div class="flex flex-wrap bg-white border border-gray-300 bg-opacity-80 justify-center p-8 rounded-lg">
+    <div class="w-5/6 ">
       <form
         autocomplete="off"
         @submit.prevent="addCondensate()"
@@ -13,7 +13,7 @@
             grid grid-cols-3 grid-flow-row-dense
             items-center
             gap-x-6
-            border border-gray-300
+            
             rounded-md
             p-4
             gap-y-4
@@ -687,7 +687,7 @@
                 text-xl
                 outline-none
                 w-full
-                bg-transparent
+                 bg-white
                 px-4
                 py-5
                 rounded-lg

web/src/components/BiomolecularPage.vue

@@ -10,7 +10,7 @@
       <data-table
         id="condensateTable"
         category="condensate"
-        :is-experimental="false"
+        :is-experimental="isExperimentalFlag"
       />
     </div>
   </div>
@@ -25,14 +25,20 @@ export default {
   components: {
     DataTable,
   },
+  
   props: {
     msg: String,
   },
   data() {
     return {
       isDev: process.env.NODE_ENV === 'development',
+      isExperimentalFlag: false
     };
   },
+ mounted(){
+  
+  this.$store.dispatch('Param/setIsExperimental', this.isExperimentalFlag)
+ },
   computed: {},
   methods: {},
 };

web/src/components/CondensateDetailPage.vue

@@ -432,7 +432,7 @@
                         </div>
                       </div> -->
 
-                      <div class="row text-2xl">
+                      <div v-if="getIsExperimental=== 'false'" class="row text-2xl">
                         <div class="text col-sm-3 text-2xl">
                           Markers
                           <a
@@ -919,6 +919,7 @@ export default {
 
     // RequestUpdateItemTable,
   },
+  
   props: ['condensateId'],
   data() {
     return {
@@ -970,8 +971,18 @@ export default {
 
       return userRole;
     },
+    getIsExperimental(){
+     
+     return this.$store.getters['Param/isExperimental']
+    }
+      
+    
+  },
+  created(){
+ 
+    this.$store.dispatch('Param/getIsExperimentalFlagFromStorage');
+  
   },
-
   methods: {
     validateName() {
       (this.nameErrMsg = ''), (this.nameError = false);

web/src/components/Datatable/CondensateDataTable.vue

 <template>
   <div>
+      <div v-if="loading">
+              <base-spinner />
+            </div>
     <h2
       v-if="error"
       class="text-red-500"
@@ -57,6 +60,8 @@ export default {
       downloadUrl: '',
       error: false,
       errorMsg: '',
+      loading: false,
+      
       isDev: process.env.NODE_ENV === 'development',
     };
   },
@@ -64,6 +69,7 @@ export default {
     const vm = this;
     vm.createTable(vm.id, vm.data);
   },
+ 
   methods: {
     hasExperimental() {
       if (this.isExperimental === true) {
@@ -244,7 +250,7 @@ export default {
           ? `&functional_type=${functionalType.search.value}`
           : '') +
         this.hasExperimental();
-
+      this.loading= true
       try {
         const res = await this.axios.get(url, {
           headers: {
@@ -252,13 +258,19 @@ export default {
           },
         });
 
-        if (res.statusText !== 'OK') {
+        if (res.statusText !== 'OK' && res.status >=400 && res.status <=499) {
+          this.error = true;
+          this.errorMsg = `${res.status} ${res.message}`;
+          return;
+        }
+         if (res.statusText !== 'OK' && res.status >=500 && res.status <=599) {
           this.error = true;
           this.errorMsg = `${res.status} Internal Error, please write a mail to CDCode Admin.`;
           return;
         }
         this.error = false;
         this.errorMsg = '';
+        this.loading= false
         if (res.data) {
           // vm.meta = res.meta;
           // vm.data = res.data;
@@ -274,7 +286,7 @@ export default {
           fnCallback(dat);
         }
       } catch (error) {
-     
+        this.loading= false
         this.error = true;
         this.errorMsg =
           error.response.data.error.message +

web/src/components/SyntheticPage.vue

@@ -10,7 +10,7 @@
       <data-table
         id="condensateTable"
         category="condensate"
-        :is-experimental="true"
+        :is-experimental="isExperimentalFlag"
       />
     </div>
   </div>
@@ -25,15 +25,20 @@ export default {
   components: {
     DataTable,
   },
+  
   props: {
     msg: String,
   },
   data() {
     return {
       isDev: process.env.NODE_ENV === 'development',
+      isExperimentalFlag: true
     };
   },
   computed: {},
+  mounted(){
+   this.$store.dispatch('Param/setIsExperimental', this.isExperimentalFlag)
+  },
   methods: {},
 };
 </script>

web/src/store/modules/Param.js

@@ -2,6 +2,7 @@ const namespaced = true
 
 const state = {
   proteinList: [],
+  isExperimental: null
 }
 
 const mutations = {
@@ -22,10 +23,14 @@ const mutations = {
   RESET_PROTEINS (state) {
     state.proteinList.splice(0, state.proteinList.length)
   },
+  ADD_EXPERIMENTAL_FLAG(state, payload){
+    state.isExperimental = payload
+  }
 }
 
 const getters = {
   proteinList: state => state.proteinList,
+  isExperimental: state => state.isExperimental
 }
 
 const actions = {
@@ -41,6 +46,17 @@ const actions = {
   resetProteins ({ commit }) {
     commit('RESET_PROTEINS')
   },
+  setIsExperimental(context, data){
+    window.localStorage.setItem('isExperimental', data);
+    context.commit('ADD_EXPERIMENTAL_FLAG', data)
+  },
+  getIsExperimentalFlagFromStorage(context) {
+    const jwtToken = localStorage.getItem('isExperimental');
+    
+
+    context.commit('ADD_EXPERIMENTAL_FLAG', jwtToken);
+    
+  },
 }
 
 export default {