From 9d85bc7c97f5f69bd84ac0e73da542aac236baa2 Mon Sep 17 00:00:00 2001
From: anlisha-maharjan <anlishamaharjan@gmail.com>
Date: Mon, 23 Dec 2024 22:12:37 +0100
Subject: [PATCH] NN-637 complete citation pane dialog

---
 .../src/components/citation/CitationPane.vue  | 364 +++++-------------
 1 file changed, 100 insertions(+), 264 deletions(-)

diff --git a/frontend/src/components/citation/CitationPane.vue b/frontend/src/components/citation/CitationPane.vue
index a4b9cb60..56342984 100644
--- a/frontend/src/components/citation/CitationPane.vue
+++ b/frontend/src/components/citation/CitationPane.vue
@@ -1,83 +1,88 @@
 <template>
-  <div id="citation_pane" v-if="active_node !== null">
-    <div id="citation-pane">
-      <div class="pane_header">
-        <a
-          id="abstract-id"
-          href=""
-          v-on:click="google_search(active_node.id)"
-          target="_blank"
-          >PMID: {{ active_node.id }}</a
-        >
-        <img
-          class="pane_close"
-          src="@/assets/toolbar/cross.png"
-          v-on:click="close_pane()"
-        />
-        <img
-          class="abstract_add"
-          src="@/assets/pathwaybar/plus.png"
-          v-on:click="add_abstract(active_node.id)"
-        />
-      </div>
-      <div class="pane-window">
-        <div class="text">
-          <div class="gene_attribute">
-            <div class="abstracts_attr">
-              {{ active_node.attributes["Title"] }}
-            </div>
-          </div>
-          <div class="tool-section-active citborder">
-            <div id="informations" class="subsection">
-              <div class="subsection-header abstract-header">
-                <span> year:{{ active_node.attributes["Year"] }}</span>
-                <span> citations:{{ active_node.attributes["Citation"] }}</span>
-                <span> deg:{{ active_node.attributes["Degree"] }};</span>
-                <span>
-                  pr:{{
-                    Math.abs(
-                      Math.log10(active_node.attributes["PageRank"])
-                    ).toFixed(2)
-                  }}</span
-                >
-              </div>
-              <div class="subsection-main abstract">
-                <div id="chatbot">
-                  <div class="text" v-if="active_function == 'abstract'">
-                    {{ active_node.attributes["Abstract"] }}
-                  </div>
-                  <div v-if="await_load == true" class="loading_pane"></div>
-                  <div
-                    class="text"
-                    v-if="active_function == 'summary' && await_load == false"
-                  >
-                    {{ summary_dict[active_node.id] }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="nodeattributes">
-        <img
-          class="icons"
-          src="@/assets/toolbar/menu-burger.png"
-          v-on:click="active_function = 'abstract'"
-        />
-        <img
-          class="icons"
-          src="@/assets/toolbar/settings-sliders.png"
-          v-on:click="change_section('summary', active_node)"
-        />
-        <img
-          class="icons"
-          src="@/assets/toolbar/bote.png"
-          v-on:click="call_chatbot('citation')"
-        />
+  <Dialog :visible="!!active_node" position="topright" :minY="60" :minX="60" :pt="{
+    root: { class: 'w-[25rem] !mt-[60px] !ml-[60px]' },
+    header: { class: '!py-2.5' },
+    title: { class: '!text-base' },
+    content: { class: '!max-h-[24rem]' },
+  }" :closable="false" @hide="close_pane()">
+    <template #header>
+      <h3 class="flex items-center gap-2 cursor-pointer hover:text-primary-500"
+        v-on:click="google_search(active_node.id)">
+        PMID: {{ active_node.id }}
+        <span class="text-sm material-symbols-rounded"> open_in_new </span>
+      </h3>
+
+      <div class="flex items-center gap-1 ml-auto">
+        <Button class="w-8 h-8" size="small" text rounded plain v-tooltip.bottom="'Add to summary'"
+          @click="add_abstract(active_node.id)">
+          <span class="material-symbols-rounded"> add </span>
+        </Button>
+        <Button class="w-8 h-8 group" icon="material-symbols-rounded" size="small" text plain rounded
+          v-tooltip.bottom="'Add to AxoBot'" @click="call_chatbot('citation')">
+          <span class="material-symbols-rounded">forum</span>
+        </Button>
+        <Button class="w-8 h-8" size="small" text rounded plain @click="close_pane()">
+          <span class="dark:text-white material-symbols-rounded"> close </span>
+        </Button>
       </div>
+    </template>
+
+    <h5 class="mb-4">
+      {{ active_node.attributes["Title"] }}
+    </h5>
+
+    <div class="flex justify-between gap-2 mb-3 bg-[var(--card-bg)] z-[2]">
+      <span class="flex flex-col items-center">
+        {{ active_node.attributes["Year"] }}
+        <strong class="text-sm font-normal text-primary-400">Year</strong>
+      </span>
+      <span class="flex flex-col items-center">
+        {{ active_node.attributes["Citation"] }}
+        <strong class="text-sm font-normal text-primary-400">Citations</strong>
+      </span>
+      <span class="flex flex-col items-center">
+        {{ active_node.attributes["Degree"] }}
+        <strong class="text-sm font-normal text-primary-400">Deg</strong>
+      </span>
+      <span class="flex flex-col items-center">
+        {{ Math.abs(Math.log10(active_node.attributes["PageRank"])).toFixed(2) }}
+        <strong class="text-sm font-normal text-primary-400">PR</strong>
+      </span>
     </div>
-  </div>
+
+    <Divider />
+
+    <Tabs :value="active_function" @update:value="onChangeTab">
+      <TabList class="sticky top-0">
+        <Tab value="abstract" class="!pt-0 !pb-2">Abstract</Tab>
+        <Tab value="summary" class="!pt-0 !pb-2">Summary</Tab>
+      </TabList>
+
+      <TabPanels class="!px-0 !pb-0">
+        <TabPanel value="abstract">
+          <p class="m-0 whitespace-pre-wrap">
+            {{ active_node.attributes["Abstract"] }}
+          </p>
+        </TabPanel>
+
+        <TabPanel value="summary">
+          <div v-if="await_load" class="flex flex-col items-center justify-center h-full gap-3">
+            <h6 class="flex items-center gap-2 dark:text-slate-300">Fetching summary
+              <span class="relative flex">
+                <span
+                  class="absolute inline-flex w-full h-full rounded-full opacity-75 animate-ping bg-primary-500"></span>
+                <span
+                  class="material-symbols-rounded text-primary-500 animate animate-[spin_1s_ease-in-out_infinite]">scatter_plot</span>
+              </span>
+            </h6>
+          </div>
+          <p class="m-0 whitespace-pre-wrap" v-if="!await_load">
+            {{ summary_dict[active_node.id] }}
+          </p>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  </Dialog>
 </template>
 
 <script>
@@ -105,9 +110,7 @@ export default {
   },
   methods: {
     google_search(id) {
-      document
-        .getElementById("abstract-id")
-        .setAttribute("href", "http://www.ncbi.nlm.nih.gov/pubmed/" + id);
+      window.open(`http://www.ncbi.nlm.nih.gov/pubmed/${id}`, "_blank");
     },
     add_abstract(id) {
       this.emitter.emit("addNodeToSummary", id);
@@ -116,24 +119,25 @@ export default {
       this.$emit("active_node_changed", null);
       this.$emit("active_subset_changed", null);
     },
-    change_section(tab, node) {
+    onChangeTab(tab) {
       var com = this;
       com.active_function = tab;
-
-      var finalList = [];
-      var nodeDict = {};
-      if (!com.summary_dict[node.id]) {
-        com.await_load = true;
-        var formData = new FormData();
-        nodeDict[node.id] = node;
-        finalList.push(nodeDict);
-        formData.append("abstracts", JSON.stringify(finalList));
-
-        //POST request for generating pathways
-        com.axios.post(com.api.summary, formData).then((response) => {
-          com.summary_dict[node.id] = response.data;
-          com.await_load = false;
-        });
+      if (tab == 'summary' && this.active_node) {
+        var finalList = [];
+        var nodeDict = {};
+        if (!com.summary_dict[this.active_node.id]) {
+          com.await_load = true;
+          var formData = new FormData();
+          nodeDict[this.active_node.id] = this.active_node;
+          finalList.push(nodeDict);
+          formData.append("abstracts", JSON.stringify(finalList));
+
+          //POST request for generating pathways
+          com.axios.post(com.api.summary, formData).then((response) => {
+            com.summary_dict[this.active_node.id] = response.data;
+            com.await_load = false;
+          });
+        }
       }
     },
     call_chatbot(mode) {
@@ -147,171 +151,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.abstract {
-  background: #0a0a1a;
-}
-
-.abstract_add {
-  right: 9%;
-  width: 0.5vw;
-  height: 0.5vw;
-  position: absolute;
-}
-
-#citation-pane {
-  position: absolute;
-  right: 1vw;
-  top: 1vw;
-  width: 24vw;
-  display: block;
-  background: #d9d9d9;
-  align-items: center;
-  z-index: 99;
-}
-
-.text {
-  height: 100%;
-}
-
-.gene_attribute {
-  display: flex;
-  font-family: "ABeeZee", sans-serif;
-  align-items: center;
-  justify-content: center;
-  background: #d9d9d9;
-  color: #0a0a1a;
-  padding: 0 0.5vw 0 0.5vw;
-}
-.tool-section {
-  height: 0vw;
-}
-
-.tool-section-active {
-  height: 10vw;
-}
-
-#colorbar {
-  position: relative;
-  display: flex;
-  border-radius: 100%;
-  width: 0.5vw;
-  height: 0.5vw;
-}
-.gene {
-  margin-left: 0.3vw;
-  font-size: 0.9vw;
-}
-.abstracts_attr {
-  font-size: 0.7vw;
-  margin-left: 0.3vw;
-  font-weight: bold;
-}
-
-.nodeattributes {
-  position: absolute;
-  display: flex;
-  width: 100%;
-  height: 2vw;
-  align-items: center;
-  justify-content: center;
-}
-.nodeattributes .icons {
-  width: 0.8vw;
-  height: 0.8vw;
-  margin: 0 0.5vw 0 0.5vw;
-}
-.nodeattributes .subsection {
-  margin-bottom: 4%;
-  position: relative;
-  width: 90%;
-}
-
-#citation-pane .subsection .subsection-header {
-  position: absolute;
-  width: 98%;
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  font-family: "ABeeZee", sans-serif;
-  font-size: 0.7vw;
-  padding: 0.2vw 0 0 0.5vw;
-  color: rgba(255, 255, 255, 0.5);
-  z-index: 999;
-  background-color: #0a0a1a;
-}
-
-.subsection .abstract-header span {
-  padding: 0.5vw;
-}
-
-#citation-pane .pane_header a {
-  height: 100%;
-  display: flex;
-  font-size: 0.9vw;
-  font-family: "ABeeZee", sans-serif;
-  align-items: center;
-  text-decoration: none;
-}
-
-.subsection .subsection-header img {
-  position: absolute;
-  width: 50%;
-  right: -15%;
-  display: -webkit-flex;
-  padding: 1%;
-  padding: 5% 23% 5% 23%;
-  filter: invert(100%);
-}
-
-.subsection .subsection-main {
-  height: 100%;
-  width: 100%;
-  padding-top: 1vw;
-}
-
-#citation-pane .pane_header {
-  color: #0a0a1a;
-  height: 1.5vw;
-  width: 100%;
-  padding: 0.6vw;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-bottom: 0.05vw solid #0a0a1a;
-}
-#citation-pane .pane_header span {
-  height: 100%;
-  display: flex;
-  font-size: 0.9vw;
-  font-family: "ABeeZee", sans-serif;
-  align-items: center;
-}
-
-#citation-pane .pane_close {
-  right: 3%;
-  width: 0.5vw;
-  height: 0.5vw;
-  position: absolute;
-}
-
-.citborder {
-  border: #d9d9d9;
-  border-width: 0.2px;
-  border-style: solid;
-}
-
-#citation-pane #chatbot {
-  padding: 1vw 1.3vw 1vw 1.3vw;
-}
-
-#citation-pane .nodeattributes {
-  position: relative;
-  height: 1.5vw;
-}
-#citation-pane .pane-window {
-  height: unset;
-  position: relative;
-}
-</style>