#108: Uniprot style (with sequence length) added. General information section...

#108: Uniprot style (with sequence length) added. General information section have no of biomolecular condensate details.

web/src/components/ProteinDetailPage.vue

@@ -326,12 +326,13 @@
                           Show less</a>
                       </div>
                     </div>
-                    <div class="row text-2xl">
+                    <div class="row text-2xl" v-if="sequenceFormatting(response.data.sequence)">
                       <div class="text col-sm-3">
                         Sequence
                       </div>
                       <div class="col-sm-9">
-                        <input
+                       
+                        <!-- <input
                           type="text"
                           :value="response.data.sequence"
                         >
@@ -342,7 +343,35 @@
                           :data-clipboard-text="response.data.sequence"
                         >
                           <i class="glyphicon glyphicon-copy" />
+                        </button> -->
+                    
+                     <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 grid-flow-row-dense">
+                     
+                      <div  v-for="(item, index) in sequenceFormat" :key="index">
+                       <div class="text-right" v-if="item.length===10" > {{ getSeqLength(item.length,index)}}  </div>
+                        <div class="text-right">{{item}}</div>
+                      </div>
+                      
+                      <button
+                          :id="'sequence'"
+                          class="copy-button"
+                          :name="'sequence'"
+                          :data-clipboard-text="response.data.sequence"
+                        >
+                         <span>Copy </span>
+                          <i class="glyphicon glyphicon-copy" />
                         </button>
+                     </div>
+                    
+                    
+                      </div>
+                    </div>
+                    <div class="row text-2xl" v-if="getBiomolecularCondensate(response.data.condensates)">
+                      <div class="text col-sm-3">
+                        No. of Biomolecular Condensates
+                      </div>
+                      <div class="col-sm-9">
+                       {{ biomolecularCondenstaes.length }}
                       </div>
                     </div>
                   </div>
@@ -400,7 +429,7 @@
 
               <div 
                 v-if="
-                 getBiomolecularCondensate(response.data.condensates)
+                biomolecularCondenstaes.length > 0
                 "
                 class="my-14 bg-white shadow-md border rounded-lg p-8"
               >
@@ -412,46 +441,14 @@
               </div>
 
 
-                <!-- <button
-                  v-if="
-                    getUserData !== null &&
-                    (getUserData === 'Maintainer' ||
-                      getUserData === 'Contributor')
-                  "
-                  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-3
-                    mb-5
-                    text-center
-                    font-bold
-                  "
-                  type="button"
-                  @click="showAddCondensate = !showAddCondensate"
-                >
-                  Add a condensate to this protein
-                </button>
-                <div v-if="showAddCondensate" class="panel panel-default mt-4">
-                  <add-novel-condensate
-                    :protein="response.data.uniprot_id"
-                    @hide="showAddCondensate = false"
-                    @showToaster="showDialog"
-                    @hideToaster="hideDialog"
-                  />
-                </div> -->
+                
                 <table class="border-collapse table-fixed border table table-hover table-responsive">
                     <thead>
                       <tr class="active">
                        <th class="w-2/5">Name</th>
-                        <!--<th>Data Sources</th>-->
+                  
                         <th class="w-1/4">No. of Proteins</th>
-                        <!--<th>Evidence Stars</th>-->
+                       
                         <th class="w-1/4">Species</th>
                          <th class="w-1/4">Functional Type</th>
                       </tr>
@@ -467,11 +464,9 @@
                             class="uniprot-link"
                           >{{ item.name }}</a>
                         </td>
-                        <!--<td>{{getDbNames(item.data_sources)}}</td>-->
+                    
                         <td>{{ item.protein_count }}</td>
-                        <!--<td>-->
-                        <!--<span v-for="(item, index) in getSingleRating(item.data_sources)" :class="item" v-bind:key="index"/>-->
-                        <!--</td>-->
+                      
                         <td>{{ item.species_name }}</td>
                          <td>{{ item.protein_functional_type }}</td>
                       </tr>
@@ -610,7 +605,8 @@ export default {
       updatedKey: 0,
       isLoading: false,
       syntheticCondensates: null,
-      biomolecularCondenstaes: null
+      biomolecularCondenstaes: null,
+      sequenceFormat: []
     };
   },
   computed: {
@@ -621,6 +617,38 @@ export default {
     },
   },
   methods: {
+    getSeqLength(seqLength, index){
+     if(index === 0){
+      return 10;
+     }else if(index > 0){
+      return seqLength * (index + 1);
+     }
+    },
+    sequenceFormatting(data){
+     const sequence = data
+     let spaced = ''
+    //  let start = 0
+    //  for (const char of sequence) {
+     
+    //     spaced += char + ' ';
+        
+        
+    //  }
+    let n = 10
+      var a = [], start=0, b=[]
+   while(start<data.length) {
+      a.push(data.slice(start, start+n));
+      start+=n;
+      b.push(start)
+   }
+  
+   this.sequenceFormat = a
+  
+   
+  
+
+return a
+    },
     getSyntheticCondensate(data){
       const filterSyntheticCondensate = data.filter(f=>f.is_experimental === true)