Add citations component

components/detailPage/Citations.vue

+<template>
+  <v-container id="Citations">
+    <div class="vf-section-header">
+      <h2 class="vf-section-header__heading">Citations</h2>
+    </div>
+    <br />
+    <div v-if="loading" class="loader">
+      <v-progress-circular indeterminate color="primary"></v-progress-circular>
+    </div>
+    <div v-else>
+      <p class="vf-text-body vf-text-body--3">
+        <v-table class="vf-table">
+          <tbody class="vf-table__body">
+            <tr
+              v-for="citation in citations"
+              :key="citation.id"
+              class="vf-table__row"
+            >
+              <td class="">
+                <i
+                  >{{ citation.authorString }} ({{ citation.pubYear }})<br
+                /></i>
+                {{ citation.title }}<br />
+                {{ citation.journalInfo?.title }}
+                <span v-if="citation.journalInfo?.volume"
+                  >{{ citation.journalInfo?.volume }},
+                </span>
+                {{ citation.pageInfo }}
+                [<a class="vf-link" :href="citation.url" target="_blank">{{
+                  citation.accessionNumber
+                }}</a
+                >]<br />
+                <v-expand-transition>
+                  <div v-if="citation.showAbstract">
+                    <v-container>
+                      <div
+                        v-html="citation.abstractText"
+                        class="abstract-text"
+                      ></div>
+                    </v-container>
+                  </div>
+                </v-expand-transition>
+                <div @click="toggleAbstract(citation)">
+                  <a class="vf-link" style="cursor: pointer">{{
+                    citation.showAbstract ? "Hide Abstract" : "Show Abstract"
+                  }}</a>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </v-table>
+      </p>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+interface Citation {
+  id: number;
+  accessionNumber: string;
+  url: string;
+  title: string;
+  authorString: string;
+  pubYear: string;
+  abstractText: string;
+  pageInfo: string;
+  showAbstract: boolean;
+  journalInfo?: {
+    volume?: string;
+    title?: string;
+  };
+}
+
+const loading = ref(true);
+const citations = ref<Citation[]>([]);
+
+const props = defineProps<{
+  citationsData?: {
+    id: number;
+    accession_number: string;
+    type_name: string;
+    source_name: string;
+    category: string;
+    url: string;
+  }[];
+}>();
+
+const fetchCitationDetails = async () => {
+  const requests = props.citationsData?.map(async (citation) => {
+    const [type, id] = citation.url.split("/").slice(-2);
+    const apiUrl = `https://www.ebi.ac.uk/europepmc/webservices/rest/article/${type}/${id}?resultType=core&format=json`;
+
+    const response = await fetch(apiUrl);
+    const data = await response.json();
+
+    return {
+      id: citation.id,
+      accessionNumber: citation.accession_number,
+      url: citation.url,
+      showAbstract: false,
+      title: data.result.title,
+      authorString: data.result.authorString,
+      pubYear: data.result.pubYear,
+      abstractText: data.result.abstractText,
+      pageInfo: data.result.pageInfo,
+      journalInfo: {
+        volume: data.result.journalInfo?.volume,
+        title: data.result.journalInfo?.["journal"]?.title,
+      },
+    };
+  });
+
+  citations.value = await Promise.all<any>(requests);
+  loading.value = false;
+};
+
+onMounted(() => {
+  fetchCitationDetails();
+});
+
+const toggleAbstract = (citation: Citation) => {
+  citation.showAbstract = !citation.showAbstract;
+};
+</script>
+
+<style scoped>
+.loader {
+  display: flex;
+  justify-content: center;
+}
+
+.abstract-text {
+  border: 1px solid #000;
+  padding: 10px;
+}
+</style>

components/detailPage/DatabaseAccessions.vue

@@ -62,27 +62,6 @@
               </tr>
             </tbody>
           </v-table>
-          <br />
-          <!--          <v-table-->
-          <!--            hover-->
-          <!--            density="comfortable"-->
-          <!--            v-if="database_accessions['CITATION']"-->
-          <!--          >-->
-          <!--            <thead>-->
-          <!--              <tr>-->
-          <!--                <th>Registry Numbers</th>-->
-          <!--                <th>Types</th>-->
-          <!--                <th>Sources</th>-->
-          <!--              </tr>-->
-          <!--            </thead>-->
-          <!--            <tbody>-->
-          <!--              <tr v-for="i in database_accessions['CITATION']" :key="i.id">-->
-          <!--                <td>{{ i.accession_number }}</td>-->
-          <!--                <td>{{ i.type_name }}</td>-->
-          <!--                <td>{{ i.source_name }}</td>-->
-          <!--              </tr>-->
-          <!--            </tbody>-->
-          <!--          </v-table>-->
         </v-col>
       </v-row>
     </div>

components/detailPage/Intro.vue

@@ -154,6 +154,7 @@
               >
                 <a class="vf-list__link" href="#Names">Names</a>
               </li>
+              <!--TODO: This logic needs to be fixed, for case where citatiosn do exist but there's are no manual Xref or Reg Numbers-->
               <li
                 class="vf-list__item"
                 v-if="Object.keys(entity.database_accessions).length > 0"
@@ -162,6 +163,15 @@
                   >Database Accessions</a
                 >
               </li>
+              <li
+                class="vf-list__item"
+                v-if="
+                  entity.database_accessions?.CITATION &&
+                  Object.keys(entity.database_accessions.CITATION).length > 0
+                "
+              >
+                <a class="vf-list__link" href="#Citations">Citations</a>
+              </li>
             </ul>
           </div>
         </aside>

components/search/ResultsList.vue

@@ -177,7 +177,7 @@ defineProps<{
   -webkit-box-orient: vertical;
   white-space: normal;
 }
-.vf-link:hover{
+.vf-link:hover {
   text-decoration: none;
 }
 </style>

pages/[ChebiID].vue

@@ -16,6 +16,10 @@
     <DetailPageDatabaseAccessions
       :database_accessions="entity.database_accessions"
     />
+    <DetailPageCitations
+      :citationsData="entity.database_accessions.CITATION"
+      v-if="entity.database_accessions?.CITATION"
+    />
   </div>
 </template>