From 9e83f2aba5638db14491ec2d733a673203ce0150 Mon Sep 17 00:00:00 2001
From: anlisha-maharjan <anlishamaharjan@gmail.com>
Date: Fri, 6 Dec 2024 19:57:56 +0100
Subject: [PATCH] NN-624 complete citation tab

---
 .../src/components/citation/CitationGraph.vue | 79 +++++++++++++++++--
 .../src/components/citation/CitationMenu.vue  | 27 ++++++-
 .../components/citation/SnapshotCitation.vue  |  6 +-
 .../src/components/enrichment/PathwaySet.vue  | 24 +++---
 .../enrichment/graph/PathwayGraph.vue         |  2 -
 .../toolbar/modules/KeywordList.vue           |  2 +-
 6 files changed, 114 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/citation/CitationGraph.vue b/frontend/src/components/citation/CitationGraph.vue
index 2669356f..57b5fd19 100644
--- a/frontend/src/components/citation/CitationGraph.vue
+++ b/frontend/src/components/citation/CitationGraph.vue
@@ -1,5 +1,56 @@
 <template>
-  <div class="loading-section">
+  <EmptyState v-if="citation_graphs.size == 0" message="There is no generated citation graph.">
+  </EmptyState>
+
+  <section v-if="citation_graphs.size != 0" class="grid grid-cols-2 gap-2.5 pt-3">
+    <Card v-for="(entry, index) in filt_graphs" :class="`group relative overflow-hidden border ${active_citation_id === entry.id
+      ? 'border-primary-600 !bg-primary-600/25'
+      : 'dark:!bg-slate-300/25 border-transparent'
+      }`" :key="index" :pt="{
+        header: { class: 'h-26 relative rounded-md mt-[6px] mx-[6px] overflow-hidden' },
+        body: { class: '!p-0 !gap-0' },
+        footer: { class: 'flex gap-2 px-2 pb-2' },
+        title: { class: 'relative' },
+      }">
+      <template #header>
+        <SnapshotCitation :propValue="entry" :index="entry.id" />
+
+        <div
+          class="w-full h-full flex justify-between absolute top-0 left-0 p-1.5 bg-slate-800/50 opacity-0 duration-300 group-hover:opacity-100 z-[1]">
+          <Button class="w-7 h-7" severity="secondary" rounded size="small" plain @click.stop="add_graph(entry)">
+            <span :class="`material-symbols-rounded ${favourite_graphs.has(entry.id)
+              ? 'text-base font-variation-ico-filled text-yellow-500 hover:text-yellow-400'
+              : 'text-xl hover:text-yellow-600'
+              }`">
+              star
+            </span>
+          </Button>
+
+          <Button class="w-7 h-7" severity="danger" rounded size="small" plain @click.stop="remove_graph(entry)">
+            <span class="text-xl text-white material-symbols-rounded"> close </span>
+          </Button>
+        </div>
+      </template>
+
+      <template #title>
+        <h6 :class="`w-full h-full flex items-center gap-2 absolute top-0 left-0 py-2 px-2 text-sm font-medium cursor-text z-[1]
+          ${focus_citation_id === entry.id ? '!hidden' : ''}`" v-on:click="setFocus(entry.id, index)">
+          {{ entry.label }} <span class="text-lg material-symbols-rounded dark:text-slate-200"> edit </span>
+        </h6>
+        <input ref="citationInputs" type="text" v-model="entry.label"
+          :class="`bg-transparent py-2 px-2 text-sm font-medium ${focus_citation_id === entry.id ? '' : 'opacity-0'}`"
+          @click.stop @blur="clearFocus" />
+      </template>
+
+      <template #footer>
+        <Button class="flex-1 h-8" severity="secondary" size="small" plain @click="switch_graph(entry)">
+          View <span class="text-xl material-symbols-rounded"> arrow_circle_right </span>
+        </Button>
+      </template>
+    </Card>
+  </section>
+  
+  <!-- <div class="loading-section">
     <div class="loading-text" v-if="citation_graphs.size == 0">
       <span>There is no generated citation graph.</span>
     </div>
@@ -38,11 +89,13 @@
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
 import SnapshotCitation from "@/components/citation/SnapshotCitation.vue";
+import EmptyState from "@/components/verticalpane/EmptyState.vue";
+import { nextTick } from "vue";
 
 export default {
   name: "CitationGraphs",
@@ -50,13 +103,29 @@ export default {
   emits: ["favourite_graph_changed"],
   components: {
     SnapshotCitation,
+    EmptyState
   },
   data() {
     return {
-      activeGraphIndex: -1,
+      // activeGraphIndex: -1,
+      focus_citation_id: null,
+      active_citation_id: null
     };
   },
   methods: {
+    setFocus(id, index) {
+      this.focus_citation_id = id;
+      nextTick(() => {
+        // Focus the input if focus_citation_id matches the current id
+        const input = this.$refs.citationInputs[index];
+        if (input) {
+          input.focus();
+        }
+      });
+    },
+    clearFocus() {
+      this.focus_citation_id = null;
+    },
     switch_graph(entry) {
       this.$store.commit("assign_citation_graph", {
         id: entry.id,
@@ -105,7 +174,7 @@ export default {
 };
 </script>
 
-<style>
+<!-- <style>
 .graph-citation-name {
   position: fixed;
   display: flex;
@@ -125,4 +194,4 @@ export default {
   font-family: "ABeeZee", sans-serif;
   border: none;
 }
-</style>
+</style> -->
diff --git a/frontend/src/components/citation/CitationMenu.vue b/frontend/src/components/citation/CitationMenu.vue
index dd097996..48b605e4 100644
--- a/frontend/src/components/citation/CitationMenu.vue
+++ b/frontend/src/components/citation/CitationMenu.vue
@@ -1,5 +1,22 @@
 <template>
-  <div id="citation-tools" class="pathways">
+  <ListActionHeader :title="`List of citation graph`">
+    <Button severity="secondary" rounded size="small" plain v-on:click="bookmark_off = !bookmark_off" class="w-8 h-8"
+      v-tooltip.bottom="bookmark_off ? 'Show only favorites' : 'Show all'">
+      <span :class="`material-symbols-rounded text-2xl
+          ${bookmark_off ? '' : 'font-variation-ico-filled text-yellow-500 hover:text-yellow-400'}`">
+        star
+      </span>
+    </Button>
+
+    <Button severity="secondary" label="Generate citation" icon="pi pi-plus" size="small" :loading="loading_state"
+      v-on:click="get_citation_graph(context_raw)" />
+  </ListActionHeader>
+
+  <CitationGraph :citation_graphs="citation_graphs" :favourite_graphs="favourite_graphs" :bookmark_off="bookmark_off"
+    @loading_state_changed="loading_state = $event" @favourite_graphs_changed="favourite_graphs = $event">
+  </CitationGraph>
+
+  <!-- <div id="citation-tools" class="pathways">
     <div class="pathwaybar">
       <div id="citation-graphs">
         <div class="tool-section-graph">
@@ -23,17 +40,19 @@
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
 import CitationGraph from "@/components/citation/CitationGraph.vue";
+import ListActionHeader from "@/components/verticalpane/ListActionHeader.vue";
 
 export default {
   name: "CitationMenu",
   props: ["active_node", "active_background"],
   components: {
     CitationGraph,
+    ListActionHeader
   },
   data() {
     return {
@@ -144,7 +163,7 @@ export default {
 };
 </script>
 
-<style>
+<!-- <style>
 #citation-graphs {
   width: 100%;
   height: 100%;
@@ -251,4 +270,4 @@ export default {
   right: 1vw;
   animation: button-loading-spinner 1s ease infinite;
 }
-</style>
+</style> -->
diff --git a/frontend/src/components/citation/SnapshotCitation.vue b/frontend/src/components/citation/SnapshotCitation.vue
index d5b188f5..c02f651e 100644
--- a/frontend/src/components/citation/SnapshotCitation.vue
+++ b/frontend/src/components/citation/SnapshotCitation.vue
@@ -1,5 +1,5 @@
 <template>
-  <img :id="'citation-visual-' + index" />
+  <img class="object-cover w-full h-full" :id="'citation-visual-' + index" />
 </template>
 
 <script>
@@ -77,7 +77,7 @@ export default {
 };
 </script>
 
-<style>
+<!-- <style>
 [id^="citation-visual-"] {
   height: 100%;
   width: 100%;
@@ -85,4 +85,4 @@ export default {
   object-fit: scale-down;
   border: solid 0.05vw rgba(255, 255, 255, 0.3);
 }
-</style>
+</style> -->
diff --git a/frontend/src/components/enrichment/PathwaySet.vue b/frontend/src/components/enrichment/PathwaySet.vue
index fc57a97d..e8f75fc0 100644
--- a/frontend/src/components/enrichment/PathwaySet.vue
+++ b/frontend/src/components/enrichment/PathwaySet.vue
@@ -73,10 +73,12 @@
     </template>
 
     <div class="grid grid-cols-5 gap-3">
-      <span class="text-sm text-center capitalize" v-for="element in entry.stats" :key="element">{{ element }}</span>
+      <span class="text-sm text-center capitalize" v-for="element in entry.stats" :key="element">
+        {{ element?.split(":")?.[0] }} <br />
+        {{ element?.split(":")?.[1] }}
+      </span>
     </div>
 
-    
     <Button v-if="!entry.stats" severity="contrast" label="Apply enrichment" icon="pi pi-plus" size="small" raised fluid
       :loading="loading_state" @click="apply_enrichment(entry)" />
   </Panel>
@@ -85,14 +87,14 @@
   </EmptyState>
 
   <Popover ref="op" class="w-[14rem]" :pt="{ content: { class: '!flex !flex-col' } }">
-    <Button text plain severity="secondary" type="button" label="From active subset"
-      class="!justify-start !py-1" @click="save_subset();toggle();"/>
-    <Button text plain severity="secondary" type="button" label="By searching in genes"
-      class="!justify-start !py-1"  @click="active_protein();toggle();"/>
-    <Button text plain severity="secondary" type="button" label="By searching in keywords"
-      class="!justify-start !py-1" @click="active_keyword_protein();toggle();"/>
-    <Button text plain severity="secondary" type="button" label="By parameter filtering"
-      class="!justify-start !py-1" @click="active_selection();toggle();"/>
+    <Button text plain severity="secondary" type="button" label="From active subset" class="!justify-start !py-1"
+      @click="save_subset(); toggle();" />
+    <Button text plain severity="secondary" type="button" label="By searching in genes" class="!justify-start !py-1"
+      @click="active_protein(); toggle();" />
+    <Button text plain severity="secondary" type="button" label="By searching in keywords" class="!justify-start !py-1"
+      @click="active_keyword_protein(); toggle();" />
+    <Button text plain severity="secondary" type="button" label="By parameter filtering" class="!justify-start !py-1"
+      @click="active_selection(); toggle();" />
   </Popover>
 
   <!-- <div id="pathways-set">
@@ -207,7 +209,7 @@ export default {
     ListActionHeader,
     EmptyState
   },
-  emits: ["term_set_changed","selection_active_changed","protein_active_changed","keyword_active_changed"],
+  emits: ["term_set_changed", "selection_active_changed", "protein_active_changed", "keyword_active_changed"],
   data() {
     return {
       sort_alph: "",
diff --git a/frontend/src/components/enrichment/graph/PathwayGraph.vue b/frontend/src/components/enrichment/graph/PathwayGraph.vue
index 98b14b19..31099409 100644
--- a/frontend/src/components/enrichment/graph/PathwayGraph.vue
+++ b/frontend/src/components/enrichment/graph/PathwayGraph.vue
@@ -70,8 +70,6 @@
       </template>
     </Card>
   </section>
-
-
 </template>
 
 <script>
diff --git a/frontend/src/components/toolbar/modules/KeywordList.vue b/frontend/src/components/toolbar/modules/KeywordList.vue
index 9594d1a8..4c4baa16 100644
--- a/frontend/src/components/toolbar/modules/KeywordList.vue
+++ b/frontend/src/components/toolbar/modules/KeywordList.vue
@@ -2,7 +2,7 @@
   <InputGroup>
     <InputText v-model="search_raw" placeholder="Search by keywords..." />
     <InputGroupAddon class="!p-0">
-      <Button icon="material-symbols-rounded" text plain v-tooltip.bottom="'Search subset'"
+      <Button icon="material-symbols-rounded" text plain v-tooltip.bottom="'Select all keywords'"
         @click="search_subset(filt_keyword)">
         <span class="material-symbols-rounded">arrow_forward_ios</span>
       </Button>