fix fetching pubMedID is linked to "mouseover" event

web/src/components/CondensateDetailPage.vue

@@ -680,7 +680,7 @@
                     Experiments
                   </h4>
                   <div class="panel panel-default">
-                    <table class="csi table table-hover table-responsive">
+                    <table id='experiment-table' class="csi table table-hover table-responsive">
                       <thead>
                         <tr class="active">
                           <!--                                    <th>Exp. ID</th>-->
@@ -706,43 +706,17 @@
                           <td>{{ item.is_phase_separated }}</td>
                           <td>{{ item.ph_value }}</td>
                           <td>{{ item.morphology }}</td>
-                          <td>
-                            <fetch-pub-med :link="item.publication_link">
-                              <template
-                                slot-scope="{
-                                  response: pubmed_response,
-                                  loading: pubmed_loading,
-                                }"
-                              >
-                                <slot
-                                  :response="pubmed_response"
-                                  :loading="pubmed_loading"
-                                >
-                                  <div v-if="pubmed_loading" />
-                                  <div v-else>
-                                    <a
-                                      :href="item.publication_link"
-                                      class="
-                                        uniprot-link
-                                        tooltipped
-                                        tooltipped-n
-                                        tooltipped-multiline
-                                      "
-                                      :aria-label="
-                                        getTitleAuthors(
-                                          pubmed_response.title,
-                                          pubmed_response.authors
-                                        )
-                                      "
-                                      target="_blank"
-                                    >
-                                      PubMed
-                                      <i class="glyphicon glyphicon-link" />
-                                    </a>
-                                  </div>
-                                </slot>
-                              </template>
-                            </fetch-pub-med>
+                          <td class="text-nowrap">
+                            <a
+                              :id="item.publication_link.split('/')[3]"
+                              :href="item.publication_link"
+                              @mouseover="fetchPubMedId(item.publication_link.split('/')[3])"
+                              class="uniprot-link tooltipped tooltipped-n tooltipped-multiline"
+                              target="_blank"
+                            >
+                              {{ item.publication_link.split('/')[3] }}
+                              <i class="glyphicon glyphicon-link" />
+                            </a>
                           </td>
                           <td>
                             {{ tokenize(item.solute_concentrations, ";") }}
@@ -1058,7 +1032,6 @@
 <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';
@@ -1079,7 +1052,6 @@ export default {
   components: {
     fetchCondensate,
     llpsTable,
-    fetchPubMed,
     AddDeleteMarker,
     BaseSpinner,
     CondensateUpdateItemsTable,
@@ -1157,9 +1129,7 @@ export default {
     
   },
   created(){
- 
     this.$store.dispatch('Param/getIsExperimentalFlagFromStorage');
-  
   },
   methods: {
     cancelAddProtein(){
@@ -1618,7 +1588,37 @@ export default {
       
     },
 
-    
+    fetchPubMedId(item) {
+      if (item) {
+        const url =
+          'https://eutils.ncbi.nlm.nih.gov/entrez/eutils/esummary.fcgi?db=pubmed&retmode=json&id=';
+        const request = url + item;
+        let $row = $('#' + item);
+
+        if (!$row.attr('aria-label')) {
+          fetch(request, {
+            method: 'GET',
+            mode: 'cors',
+            headers: {},
+          })
+            .then((response) => response.json())
+            .then((response) => {
+              setTimeout(() => {
+                const res = response.result[item];
+
+                $(`a[id="${item}"]`).each(function () {
+                  $(this).attr(
+                    'aria-label',
+                    `${res.title}\n\n${_.map(res.authors, (a) => a.name).join(
+                      ', '
+                    )}`
+                  );
+                });
+              }, 0);
+            });
+        }
+      }
+    },
 
     getProteinLinks(uniprots) {
       if (uniprots)