From 944fbb50fe35ee837ae2a142b2e0b39da94acfa4 Mon Sep 17 00:00:00 2001
From: anlisha-maharjan <anlishamaharjan@gmail.com>
Date: Tue, 12 Nov 2024 20:16:22 +0100
Subject: [PATCH] NN-608 update gene search in highlight nodes UI

---
 .../toolbar/modules/ExportEdges.vue           |   6 +-
 .../toolbar/modules/ExportGraph.vue           |   4 +-
 .../toolbar/modules/ExportGraphData.vue       |  37 +++++
 ...portingButton.vue => ExportGraphImage.vue} |   6 +-
 .../toolbar/modules/ExportProteins.vue        |   4 +-
 .../toolbar/modules/ProteinList.vue           | 149 +++++++++---------
 .../toolbar/windows/ExportWindow.vue          |  23 +--
 7 files changed, 124 insertions(+), 105 deletions(-)
 create mode 100644 frontend/src/components/toolbar/modules/ExportGraphData.vue
 rename frontend/src/components/toolbar/modules/{ExportingButton.vue => ExportGraphImage.vue} (89%)

diff --git a/frontend/src/components/toolbar/modules/ExportEdges.vue b/frontend/src/components/toolbar/modules/ExportEdges.vue
index c7f7eb27..4cedc74d 100644
--- a/frontend/src/components/toolbar/modules/ExportEdges.vue
+++ b/frontend/src/components/toolbar/modules/ExportEdges.vue
@@ -1,6 +1,6 @@
 <template>
-  <Button severity="secondary" type="button" label="Export edges as .csv" icon="pi pi-download" iconPos="right"
-    class="!w-full !justify-between !rounded-lg" @click="export_edges" />
+  <Button text plain severity="secondary" type="button" label="Export edges as .csv" class="!justify-start !py-1"
+    @click="export_edges" />
 </template>
 
 <script>
@@ -38,7 +38,7 @@ export default {
       hiddenElement.target = "_blank";
       hiddenElement.href =
         "data:text/csv;charset=utf-8," + encodeURI(terms_csv);
-      hiddenElement.download = "Proteins.csv";
+      hiddenElement.download = "Edges.csv";
       hiddenElement.click();
     },
   },
diff --git a/frontend/src/components/toolbar/modules/ExportGraph.vue b/frontend/src/components/toolbar/modules/ExportGraph.vue
index 63416837..43082452 100644
--- a/frontend/src/components/toolbar/modules/ExportGraph.vue
+++ b/frontend/src/components/toolbar/modules/ExportGraph.vue
@@ -1,6 +1,6 @@
 <template>
-  <Button severity="secondary" type="button" label="Export graph as .js" icon="pi pi-download" iconPos="right"
-  class="!w-full !justify-between !rounded-lg" @click="export_graph" />
+  <Button text plain severity="secondary" type="button" label="Export graph as .js" class="!justify-start !py-1"
+    @click="export_graph" />
 </template>
 
 <script>
diff --git a/frontend/src/components/toolbar/modules/ExportGraphData.vue b/frontend/src/components/toolbar/modules/ExportGraphData.vue
new file mode 100644
index 00000000..f59d2d36
--- /dev/null
+++ b/frontend/src/components/toolbar/modules/ExportGraphData.vue
@@ -0,0 +1,37 @@
+<template>
+  <Button severity="secondary" type="button" label="Export protein graph data" icon="pi pi-download" iconPos="right"
+    class="!w-full !justify-between !rounded-lg" @click="toggle" />
+  <Popover class="w-[13rem]" ref="op" :pt="{ content: { class: 'px-1 flex flex-col gap-1' } }">
+    <ExportGraph></ExportGraph>
+    <ExportProteins :gephi_data="gephi_data"></ExportProteins>
+    <ExportEdges :gephi_data="gephi_data" :ensembl_name_index="ensembl_name_index"></ExportEdges>
+  </Popover>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const op = ref();
+
+const toggle = (event) => {
+  op.value.toggle(event);
+};
+</script>
+
+<script>
+import ExportProteins from "@/components/toolbar/modules/ExportProteins.vue";
+import ExportEdges from "@/components/toolbar/modules/ExportEdges.vue";
+import ExportGraph from "@/components/toolbar/modules/ExportGraph.vue";
+export default {
+  name: "ExportGraphData",
+  props: ["mode", "gephi_data", "ensembl_name_index"],
+  components: {
+    ExportProteins,
+    ExportEdges,
+    ExportGraph
+  },
+  data() {
+    return {};
+  },
+};
+</script>
diff --git a/frontend/src/components/toolbar/modules/ExportingButton.vue b/frontend/src/components/toolbar/modules/ExportGraphImage.vue
similarity index 89%
rename from frontend/src/components/toolbar/modules/ExportingButton.vue
rename to frontend/src/components/toolbar/modules/ExportGraphImage.vue
index 13758aa1..9dd3a75a 100644
--- a/frontend/src/components/toolbar/modules/ExportingButton.vue
+++ b/frontend/src/components/toolbar/modules/ExportGraphImage.vue
@@ -1,7 +1,7 @@
 <template>
-  <Button severity="secondary" type="button" label="Export proteins as .csv" icon="pi pi-download" iconPos="right"
+  <Button severity="secondary" type="button" label="Export protein graph image" icon="pi pi-download" iconPos="right"
     class="!w-full !justify-between !rounded-lg" @click="toggle" />
-  <Popover class="w-[12rem]" ref="op" :pt="{ content: { class: 'px-1 flex flex-col gap-1' } }">
+  <Popover class="w-[13rem]" ref="op" :pt="{ content: { class: 'px-1 flex flex-col gap-1' } }">
     <Button text plain severity="secondary" type="button" label="White / .png" class="!justify-start !py-1"
       @click="take_screen('white', 'png')" />
     <Button text plain severity="secondary" type="button" label="Black / .png" class="!justify-start !py-1"
@@ -26,7 +26,7 @@ const toggle = (event) => {
 
 <script>
 export default {
-  name: "ExportingButton",
+  name: "ExportGraphImage",
   props: ["mode"],
   data() {
     return {};
diff --git a/frontend/src/components/toolbar/modules/ExportProteins.vue b/frontend/src/components/toolbar/modules/ExportProteins.vue
index b8ba66f4..34219e8f 100644
--- a/frontend/src/components/toolbar/modules/ExportProteins.vue
+++ b/frontend/src/components/toolbar/modules/ExportProteins.vue
@@ -1,6 +1,6 @@
 <template>
-  <Button severity="secondary" type="button" label="Export proteins as .csv" icon="pi pi-download" iconPos="right"
-    class="!w-full !justify-between !rounded-lg" @click="export_proteins" />
+  <Button text plain severity="secondary" type="button" label="Export proteins as .csv" class="!justify-start !py-1"
+    @click="export_proteins" />
 </template>
 
 <script>
diff --git a/frontend/src/components/toolbar/modules/ProteinList.vue b/frontend/src/components/toolbar/modules/ProteinList.vue
index df187ad9..1aa9ad1e 100644
--- a/frontend/src/components/toolbar/modules/ProteinList.vue
+++ b/frontend/src/components/toolbar/modules/ProteinList.vue
@@ -1,56 +1,49 @@
 <template>
-  <div class="tool-item">
+  <h6 class="mb-5 text-sm text-slate-300">
+    <span
+      class="inline-block mr-1 text-xl leading-none align-bottom material-symbols-rounded font-variation-ico-filled">help</span>
+    To find multiple nodes separate each node name with comma (<span
+      class="leading-[0] text-primary-400 text-4xl">,</span>)
+  </h6>
+  <Textarea v-model="raw_text" rows="4" cols="45" autofocus placeholder="Search by gene..." />
+  <Button label="Apply" severity="secondary" type="button" class="mt-2.5 !rounded-lg" @click="highlight(raw_text)">
+  </Button>
+
+  <!-- <div class="hidden tool-item">
     <div id="protein_highlight" class="window-menu">
       <div id="protein_highlight_header" class="window-header">
         <div class="headertext">
           <span>highlight nodes</span>
-          <img
-            class="protein_close"
-            src="@/assets/toolbar/cross.png"
-            v-on:click="unactive_proteinlist()"
-          />
+          <img class="protein_close" src="@/assets/toolbar/cross.png" v-on:click="unactive_proteinlist()" />
         </div>
       </div>
       <div class="keyword-search">
         <div class="window-label">keyword search</div>
         <div class="keyword-searchbar">
           <span v-on:click="search_subset(filt_keyword)">></span>
-          <input
-            type="text"
-            v-model="search_raw"
-            class="empty"
-            placeholder="input keyword"
-          />
+          <input type="text" v-model="search_raw" class="empty" placeholder="input keyword" />
         </div>
         <div class="keyword-result">
           <div v-for="(entry, index) in filt_keyword" :key="index">
-            <a
-              href="#"
-              v-on:click="select_node(entry)"
-              :class="{ in_subset: active_genes.has(entry.label) }"
-              >{{ entry.attributes["Name"] }}</a
-            >
+            <a href="#" v-on:click="select_node(entry)" :class="{ in_subset: active_genes.has(entry.label) }">{{
+              entry.attributes["Name"] }}</a>
           </div>
         </div>
       </div>
       <div class="highlight-list">
         <div class="window-label">gene search</div>
         <textarea v-model="raw_text" rows="10" cols="30" autofocus></textarea>
-        <button
-          v-on:click="highlight(raw_text)"
-          id="highlight_protein"
-          class="colortype"
-        >
+        <button v-on:click="highlight(raw_text)" id="highlight_protein" class="colortype">
           apply
         </button>
       </div>
     </div>
-  </div>
+  </div> -->
 </template>
 
+
 <script>
 // import {QuickScore} from "quick-score";
-
 export default {
   name: "ProteinList",
   props: ["gephi_data", "mode"],
@@ -63,57 +56,58 @@ export default {
     };
   },
   methods: {
-    dragElement(elmnt) {
-      var pos1 = 0,
-        pos2 = 0,
-        pos3 = 0,
-        pos4 = 0;
-      if (document.getElementById(elmnt.id + "_header")) {
-        // if present, the header is where you move the DIV from:
-        document.getElementById(elmnt.id + "_header").onmousedown =
-          dragMouseDown;
-      } else {
-        // otherwise, move the DIV from anywhere inside the DIV:
-        elmnt.onmousedown = dragMouseDown;
-      }
+    // dragElement(elmnt) {
+    //   var pos1 = 0,
+    //     pos2 = 0,
+    //     pos3 = 0,
+    //     pos4 = 0;
+    //   if (document.getElementById(elmnt.id + "_header")) {
+    //     // if present, the header is where you move the DIV from:
+    //     document.getElementById(elmnt.id + "_header").onmousedown =
+    //       dragMouseDown;
+    //   } else {
+    //     // otherwise, move the DIV from anywhere inside the DIV:
+    //     elmnt.onmousedown = dragMouseDown;
+    //   }
 
-      function dragMouseDown(e) {
-        e = e || window.event;
-        e.preventDefault();
-        // get the mouse cursor position at startup:
-        pos3 = e.clientX;
-        pos4 = e.clientY;
-        document.onmouseup = closeDragElement;
-        // call a function whenever the cursor moves:
-        document.onmousemove = elementDrag;
-      }
+    //   function dragMouseDown(e) {
+    //     e = e || window.event;
+    //     e.preventDefault();
+    //     // get the mouse cursor position at startup:
+    //     pos3 = e.clientX;
+    //     pos4 = e.clientY;
+    //     document.onmouseup = closeDragElement;
+    //     // call a function whenever the cursor moves:
+    //     document.onmousemove = elementDrag;
+    //   }
 
-      function elementDrag(e) {
-        e = e || window.event;
-        e.preventDefault();
-        // calculate the new cursor position:
-        pos1 = pos3 - e.clientX;
-        pos2 = pos4 - e.clientY;
-        pos3 = e.clientX;
-        pos4 = e.clientY;
-        // set the element's new position:
-        elmnt.style.top = elmnt.offsetTop - pos2 + "px";
-        elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
-      }
+    //   function elementDrag(e) {
+    //     e = e || window.event;
+    //     e.preventDefault();
+    //     // calculate the new cursor position:
+    //     pos1 = pos3 - e.clientX;
+    //     pos2 = pos4 - e.clientY;
+    //     pos3 = e.clientX;
+    //     pos4 = e.clientY;
+    //     // set the element's new position:
+    //     elmnt.style.top = elmnt.offsetTop - pos2 + "px";
+    //     elmnt.style.left = elmnt.offsetLeft - pos1 + "px";
+    //   }
 
-      function closeDragElement() {
-        // stop moving when mouse button is released:
-        document.onmouseup = null;
-        document.onmousemove = null;
-      }
-    },
-    unactive_proteinlist() {
-      this.$emit("protein_active_changed", false);
-    },
+    //   function closeDragElement() {
+    //     // stop moving when mouse button is released:
+    //     document.onmouseup = null;
+    //     document.onmousemove = null;
+    //   }
+    // },
+    // unactive_proteinlist() {
+    //   this.$emit("protein_active_changed", false);
+    // },
     highlight(proteins) {
       var com = this;
-
-      const protein_names = new Set(proteins.toUpperCase().split("\n"));
+      // This regex is not user friendly instead use ','
+      // const protein_names = new Set(proteins.toUpperCase().split("\n"));
+      const protein_names = new Set(proteins.toUpperCase().split(",").map(item => item.trim()));
       const subset = [];
       com.gephi_data.nodes.forEach((node) => {
         if (protein_names.has(node.attributes["Name"].toUpperCase())) {
@@ -133,11 +127,10 @@ export default {
     },
   },
   mounted() {
-    var com = this;
-
-    this.$nextTick(() => {
-      com.dragElement(document.getElementById("protein_highlight"));
-    });
+    // var com = this;
+    // this.$nextTick(() => {
+    //   com.dragElement(document.getElementById("protein_highlight"));
+    // });
   },
   computed: {
     regex() {
@@ -167,7 +160,7 @@ export default {
 };
 </script>
 
-<style>
+<!-- <style>
 .window-menu {
   position: fixed;
   display: flex;
@@ -305,4 +298,4 @@ export default {
 .keyword-result .in_subset {
   color: lightgreen;
 }
-</style>
+</style> -->
diff --git a/frontend/src/components/toolbar/windows/ExportWindow.vue b/frontend/src/components/toolbar/windows/ExportWindow.vue
index 315f9b24..8d14ec46 100644
--- a/frontend/src/components/toolbar/windows/ExportWindow.vue
+++ b/frontend/src/components/toolbar/windows/ExportWindow.vue
@@ -1,35 +1,24 @@
 <template>
   <ul class="flex flex-col gap-1.5 p-0 m-0 list-none">
     <li class="flex items-center justify-between gap-2 dark:text-[#c3c3c3]">
-      <ExportingButton :mode="mode"></ExportingButton>
+      <ExportGraphImage :mode="mode"></ExportGraphImage>
     </li>
     <li v-if="mode == 'protein'" class="flex items-center justify-between gap-2 dark:text-[#c3c3c3]">
-      <ExportGraph></ExportGraph>
-    </li>
-    <li v-if="mode == 'protein'" class="flex items-center justify-between gap-2 dark:text-[#c3c3c3]">
-      <ExportProteins :gephi_data="gephi_data"></ExportProteins>
-    </li>
-    <li v-if="mode == 'protein'" class="flex items-center justify-between gap-2 dark:text-[#c3c3c3]">
-      <ExportEdges :gephi_data="gephi_data" :ensembl_name_index="ensembl_name_index">
-      </ExportEdges>
+      <ExportGraphData :mode="mode" :gephi_data="gephi_data" :ensembl_name_index="ensembl_name_index"></ExportGraphData>
     </li>
   </ul>
 </template>
 
 <script>
-import ExportProteins from "@/components/toolbar/modules/ExportProteins.vue";
-import ExportEdges from "@/components/toolbar/modules/ExportEdges.vue";
-import ExportingButton from "@/components/toolbar/modules/ExportingButton.vue";
-import ExportGraph from "@/components/toolbar/modules/ExportGraph.vue";
+import ExportGraphImage from "@/components/toolbar/modules/ExportGraphImage.vue";
+import ExportGraphData from "@/components/toolbar/modules/ExportGraphData.vue";
 
 export default {
   name: "ExportWindow",
   props: ["mode", "gephi_data", "ensembl_name_index"],
   components: {
-    ExportingButton,
-    ExportGraph,
-    ExportProteins,
-    ExportEdges,
+    ExportGraphImage,
+    ExportGraphData,
   },
   data() {
     return {};