From 4243c0e85cf71eec85201efc6888f45c4fce22c1 Mon Sep 17 00:00:00 2001
From: anlisha-maharjan <anlishamaharjan@gmail.com>
Date: Mon, 6 Jan 2025 20:49:44 +0100
Subject: [PATCH] NN-644 complete pane of citation and term view

---
 .../components/pane/CitationPaneSystem.vue    | 166 +++++++++--------
 .../src/components/pane/TermPaneSystem.vue    | 171 +++++++++---------
 .../pane/modules/pathway/PathwayPane.vue      | 133 ++++++++------
 frontend/src/views/CitationView.vue           |   2 +-
 frontend/src/views/TermView.vue               |   8 +-
 5 files changed, 258 insertions(+), 222 deletions(-)

diff --git a/frontend/src/components/pane/CitationPaneSystem.vue b/frontend/src/components/pane/CitationPaneSystem.vue
index 8461b657..8aa0fe16 100644
--- a/frontend/src/components/pane/CitationPaneSystem.vue
+++ b/frontend/src/components/pane/CitationPaneSystem.vue
@@ -1,38 +1,45 @@
 <template>
-  <div
-    v-show="
-      (active_subset !== null && active_node == null) || paneHidden == false
-    "
-  >
+  <Dialog :visible="(active_subset !== null && active_node == null) || paneHidden == false" @hide="close_pane()"
+    position="bottom" :closable="false" :minY="60" :minX="60" :pt="{
+      root: { class: 'w-[18rem] !mt-[60px] !ml-[60px]' },
+      header: { class: '!px-2.5 !py-1.5 cursor-move' },
+      content: { class: '!px-2.5 !py-0' },
+    }">
+    <template #header>
+      <h3 class="text-sm font-bold">
+        {{ active_tab }}
+      </h3>
+      <div class="flex items-center gap-1 ml-auto">
+        <Button class="w-5 h-5 ml-auto" size="small" text rounded plain @click="add_subset(active_subset)">
+          <span class="dark:text-white !text-lg material-symbols-rounded"> add </span>
+        </Button>
+        <Button class="w-5 h-5" size="small" text rounded plain @click="close_pane()">
+          <span class="dark:text-white !text-lg material-symbols-rounded"> close </span>
+        </Button>
+      </div>
+    </template>
+    <SubsetPane v-show="active_tab === 'Subset'" :mode="mode" :tool_active="tool_active"
+      @tool_active_changed="tool_active = $event" :active_subset="active_subset" :gephi_data="gephi_data"
+      @active_item_changed="active_item = $event" @highlight_subset_changed="highlight_subset = $event"
+      @active_layer_changed="active_layer = $event"></SubsetPane>
+  </Dialog>
+  
+  <!-- <div v-show="(active_subset !== null && active_node == null) || paneHidden == false
+    ">
     <div class="pane" id="pane" :class="{ active: tool_active }">
       <div class="pane_header" id="pane_header">
         <span>{{ active_tab }}</span>
-        <img
-          class="abstract_add"
-          src="@/assets/pathwaybar/plus.png"
-          v-on:click="add_subset(active_subset)"
-        />
-        <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_subset(active_subset)" />
+        <img class="pane_close" src="@/assets/toolbar/cross.png" v-on:click="close_pane()" />
       </div>
       <div class="pane-window">
-        <SubsetPane
-          v-show="active_tab === 'Subset'"
-          :mode="mode"
-          :tool_active="tool_active"
-          @tool_active_changed="tool_active = $event"
-          :active_subset="active_subset"
-          :gephi_data="gephi_data"
-          @active_item_changed="active_item = $event"
-          @highlight_subset_changed="highlight_subset = $event"
-          @active_layer_changed="active_layer = $event"
-        ></SubsetPane>
+        <SubsetPane v-show="active_tab === 'Subset'" :mode="mode" :tool_active="tool_active"
+          @tool_active_changed="tool_active = $event" :active_subset="active_subset" :gephi_data="gephi_data"
+          @active_item_changed="active_item = $event" @highlight_subset_changed="highlight_subset = $event"
+          @active_layer_changed="active_layer = $event"></SubsetPane>
       </div>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
@@ -40,7 +47,7 @@ import SubsetPane from "@/components/pane/modules/subset/SubsetPane.vue";
 
 export default {
   name: "TermPaneSystem",
-  props: ["gephi_data", "active_subset", "active_node", "node_color_index"],
+  props: ["mode","gephi_data", "active_subset", "active_node", "node_color_index"],
   emits: [
     "active_node_changed",
     "active_subset_changed",
@@ -57,7 +64,6 @@ export default {
       active_tab: "Subset",
       highlight_subset: null,
       paneHidden: true,
-      mode: "citation",
       tool_active: false,
     };
   },
@@ -74,61 +80,61 @@ 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 conditions:
-        var parentWidth = window.innerWidth;
-        var parentHeight = window.innerHeight;
-        var elementWidth = elmnt.offsetWidth;
-        var elementHeight = elmnt.offsetHeight;
+    //   function elementDrag(e) {
+    //     e = e || window.event;
+    //     e.preventDefault();
+    //     // calculate the conditions:
+    //     var parentWidth = window.innerWidth;
+    //     var parentHeight = window.innerHeight;
+    //     var elementWidth = elmnt.offsetWidth;
+    //     var elementHeight = elmnt.offsetHeight;
 
-        // calculate the new coordinates:
-        pos1 = pos3 - e.clientX;
-        pos2 = pos4 - e.clientY;
-        pos3 = e.clientX;
-        pos4 = e.clientY;
+    //     // calculate the new coordinates:
+    //     pos1 = pos3 - e.clientX;
+    //     pos2 = pos4 - e.clientY;
+    //     pos3 = e.clientX;
+    //     pos4 = e.clientY;
 
-        // Calculate the new coordinates for bottom and right
-        var newBottom = parentHeight - (elmnt.offsetTop - pos2 + elementHeight);
-        var newRight = parentWidth - (elmnt.offsetLeft - pos1 + elementWidth);
+    //     // Calculate the new coordinates for bottom and right
+    //     var newBottom = parentHeight - (elmnt.offsetTop - pos2 + elementHeight);
+    //     var newRight = parentWidth - (elmnt.offsetLeft - pos1 + elementWidth);
 
-        // set the element's new position:
-        elmnt.style.bottom = newBottom + "px";
-        elmnt.style.right = newRight + "px";
-      }
+    //     // set the element's new position:
+    //     elmnt.style.bottom = newBottom + "px";
+    //     elmnt.style.right = newRight + "px";
+    //   }
 
-      function closeDragElement() {
-        // stop moving when mouse button is released:
-        document.onmouseup = null;
-        document.onmousemove = null;
-      }
-    },
+    //   function closeDragElement() {
+    //     // stop moving when mouse button is released:
+    //     document.onmouseup = null;
+    //     document.onmousemove = null;
+    //   }
+    // },
     close_pane() {
       this.active_dict = {};
 
@@ -158,7 +164,7 @@ export default {
     },
   },
   mounted() {
-    this.dragElement(document.getElementById("pane"));
+    // this.dragElement(document.getElementById("pane"));
 
     this.emitter.on("reset_protein", (state) => {
       this.selectTab("node", state);
@@ -167,4 +173,4 @@ export default {
 };
 </script>
 
-<style></style>
+<!-- <style></style> -->
diff --git a/frontend/src/components/pane/TermPaneSystem.vue b/frontend/src/components/pane/TermPaneSystem.vue
index 6ac3d4e4..152823df 100644
--- a/frontend/src/components/pane/TermPaneSystem.vue
+++ b/frontend/src/components/pane/TermPaneSystem.vue
@@ -1,43 +1,45 @@
 <template>
-  <div
-    v-show="
-      active_node !== null || active_subset !== null || paneHidden == false
-    "
-  >
+  <Dialog :visible="active_node !== null || active_subset !== null || paneHidden == false" @hide="close_pane()"
+    position="bottom" :closable="false" :minY="60" :minX="60" :pt="{
+      root: { class: 'w-[18rem] !mt-[60px] !ml-[60px]' },
+      header: { class: '!px-2.5 !py-1.5 cursor-move' },
+      content: { class: '!px-2.5 !py-0' },
+    }">
+    <template #header>
+      <h3 class="text-sm font-bold">
+        {{ active_tab }}
+      </h3>
+      <Button class="w-5 h-5 ml-auto" size="small" text rounded plain @click="close_pane()">
+        <span class="dark:text-white !text-lg material-symbols-rounded"> close </span>
+      </Button>
+    </template>
+    <PathwayPane v-show="active_tab === 'Protein'" :mode="mode" :tool_active="tool_active"
+      @tool_active_changed="tool_active = $event" :active_node="active_node" :node_color_index="node_color_index"
+      :gephi_data="gephi_data" @active_item_changed="active_item = $event"></PathwayPane>
+    <SubsetPane v-show="active_tab === 'Subset'" :mode="mode" :tool_active="tool_active"
+      @tool_active_changed="tool_active = $event" :active_subset="active_subset" :gephi_data="gephi_data"
+      @active_item_changed="active_item = $event" @highlight_subset_changed="highlight_subset = $event"
+      @active_layer_changed="active_layer = $event"></SubsetPane>
+  </Dialog>
+
+  <!-- <div v-show="active_node !== null || active_subset !== null || paneHidden == false
+    ">
     <div class="pane" id="pane" :class="{ active: tool_active }">
       <div class="pane_header" id="pane_header">
         <span>{{ active_tab }}</span>
-        <img
-          class="pane_close"
-          src="@/assets/toolbar/cross.png"
-          v-on:click="close_pane()"
-        />
+        <img class="pane_close" src="@/assets/toolbar/cross.png" v-on:click="close_pane()" />
       </div>
       <div class="pane-window">
-        <PathwayPane
-          v-show="active_tab === 'Protein'"
-          :mode="mode"
-          :tool_active="tool_active"
-          @tool_active_changed="tool_active = $event"
-          :active_node="active_node"
-          :node_color_index="node_color_index"
-          :gephi_data="gephi_data"
-          @active_item_changed="active_item = $event"
-        ></PathwayPane>
-        <SubsetPane
-          v-show="active_tab === 'Subset'"
-          :mode="mode"
-          :tool_active="tool_active"
-          @tool_active_changed="tool_active = $event"
-          :active_subset="active_subset"
-          :gephi_data="gephi_data"
-          @active_item_changed="active_item = $event"
-          @highlight_subset_changed="highlight_subset = $event"
-          @active_layer_changed="active_layer = $event"
-        ></SubsetPane>
+        <PathwayPane v-show="active_tab === 'Protein'" :mode="mode" :tool_active="tool_active"
+          @tool_active_changed="tool_active = $event" :active_node="active_node" :node_color_index="node_color_index"
+          :gephi_data="gephi_data" @active_item_changed="active_item = $event"></PathwayPane>
+        <SubsetPane v-show="active_tab === 'Subset'" :mode="mode" :tool_active="tool_active"
+          @tool_active_changed="tool_active = $event" :active_subset="active_subset" :gephi_data="gephi_data"
+          @active_item_changed="active_item = $event" @highlight_subset_changed="highlight_subset = $event"
+          @active_layer_changed="active_layer = $event"></SubsetPane>
       </div>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
@@ -46,7 +48,7 @@ import SubsetPane from "@/components/pane/modules/subset/SubsetPane.vue";
 
 export default {
   name: "TermPaneSystem",
-  props: ["gephi_data", "active_subset", "active_node", "node_color_index"],
+  props: ["mode", "gephi_data", "active_subset", "active_node", "node_color_index"],
   emits: [
     "active_node_changed",
     "active_subset_changed",
@@ -64,7 +66,6 @@ export default {
       active_tab: "Protein",
       highlight_subset: null,
       paneHidden: true,
-      mode: "term",
       tool_active: false,
     };
   },
@@ -80,61 +81,61 @@ 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 conditions:
-        var parentWidth = window.innerWidth;
-        var parentHeight = window.innerHeight;
-        var elementWidth = elmnt.offsetWidth;
-        var elementHeight = elmnt.offsetHeight;
+    //   function elementDrag(e) {
+    //     e = e || window.event;
+    //     e.preventDefault();
+    //     // calculate the conditions:
+    //     var parentWidth = window.innerWidth;
+    //     var parentHeight = window.innerHeight;
+    //     var elementWidth = elmnt.offsetWidth;
+    //     var elementHeight = elmnt.offsetHeight;
 
-        // calculate the new coordinates:
-        pos1 = pos3 - e.clientX;
-        pos2 = pos4 - e.clientY;
-        pos3 = e.clientX;
-        pos4 = e.clientY;
+    //     // calculate the new coordinates:
+    //     pos1 = pos3 - e.clientX;
+    //     pos2 = pos4 - e.clientY;
+    //     pos3 = e.clientX;
+    //     pos4 = e.clientY;
 
-        // Calculate the new coordinates for bottom and right
-        var newBottom = parentHeight - (elmnt.offsetTop - pos2 + elementHeight);
-        var newRight = parentWidth - (elmnt.offsetLeft - pos1 + elementWidth);
+    //     // Calculate the new coordinates for bottom and right
+    //     var newBottom = parentHeight - (elmnt.offsetTop - pos2 + elementHeight);
+    //     var newRight = parentWidth - (elmnt.offsetLeft - pos1 + elementWidth);
 
-        // set the element's new position:
-        elmnt.style.bottom = newBottom + "px";
-        elmnt.style.right = newRight + "px";
-      }
+    //     // set the element's new position:
+    //     elmnt.style.bottom = newBottom + "px";
+    //     elmnt.style.right = newRight + "px";
+    //   }
 
-      function closeDragElement() {
-        // stop moving when mouse button is released:
-        document.onmouseup = null;
-        document.onmousemove = null;
-      }
-    },
+    //   function closeDragElement() {
+    //     // stop moving when mouse button is released:
+    //     document.onmouseup = null;
+    //     document.onmousemove = null;
+    //   }
+    // },
     close_pane() {
       this.active_dict = {};
 
@@ -156,7 +157,7 @@ export default {
     },
   },
   mounted() {
-    this.dragElement(document.getElementById("pane"));
+    // this.dragElement(document.getElementById("pane"));
 
     this.emitter.on("reset_protein", (state) => {
       this.selectTab("node", state);
@@ -165,4 +166,4 @@ export default {
 };
 </script>
 
-<style></style>
+<!-- <style></style> -->
diff --git a/frontend/src/components/pane/modules/pathway/PathwayPane.vue b/frontend/src/components/pane/modules/pathway/PathwayPane.vue
index 9dfa3f45..8739302f 100644
--- a/frontend/src/components/pane/modules/pathway/PathwayPane.vue
+++ b/frontend/src/components/pane/modules/pathway/PathwayPane.vue
@@ -1,5 +1,70 @@
 <template>
-  <div class="text" v-show="active_node !== null">
+  <div v-show="active_node !== null">
+    <header v-if="active_node !== null" class="flex gap-2">
+      <span class="flex gap-1 text-sm font-medium">
+        <small class="flex-shrink-0 w-3 h-3 mt-1 border rounded-full border-slate-400" :style="{ backgroundColor: colornode }"></small>
+        <strong class="font-normal line-clamp-1">{{ active_node.attributes["Name"] }}</strong>
+      </span>
+      <Button class="flex-shrink-0 w-5 h-5 ml-auto" size="small" text plain rounded @click="to_proteins()">
+        <span class="dark:text-white material-symbols-rounded !text-lg">
+          open_in_new
+        </span>
+      </Button>
+    </header>
+    <Tabs :value="active_section" @update:value="change_section">
+      <div
+        :class="`${active_section ? '!pt-2 !border-t !border-slate-700 !mt-2' : ''} px-2.5 -mx-2.5 max-h-[10rem] overflow-auto overflow-x-visible`">
+        <TabPanels class="!p-0">
+          <TabPanel value="informations">
+            <h3 class="mb-3 text-sm font-medium">
+              Informations
+            </h3>
+
+          </TabPanel>
+          <TabPanel value="statistics" v-if="active_node !== null">
+            <h3 class="mb-3 text-sm font-medium">
+              Network statistics
+            </h3>
+            <NetworkStatistics :active_node="active_node" :mode="mode"></NetworkStatistics>
+          </TabPanel>
+          <TabPanel value="connections">
+            <div class="flex items-center justify-between mb-3">
+              <h3 class="text-sm font-medium">
+                Connections
+              </h3>
+              <Button class="w-5 h-5" size="small" text plain rounded @click="copyclipboard()">
+                <span class="dark:text-white material-symbols-rounded !text-lg"> content_copy </span>
+              </Button>
+            </div>
+            <NodeConnections :active_node="active_node" :links="links"></NodeConnections>
+          </TabPanel>
+        </TabPanels>
+      </div>
+
+      <footer class="flex items-end !mt-2 !border-t !border-slate-600 py-2">
+        <TabList class="" :pt="{
+          tabList: { class: '!border-0 !gap-4' },
+          activeBar: { class: '!hidden' }
+        }">
+          <Tab value="informations" class="!p-0 !border-0"><span
+              :class="`material-symbols-rounded !text-lg ${active_section == 'informations' ? 'font-variation-ico-filled' : ''}`">info</span>
+          </Tab>
+          <Tab value="statistics" class="!p-0 !border-0" v-if="active_node !== null"><span
+              :class="`material-symbols-rounded !text-lg ${active_section == 'statistics' ? 'font-variation-ico-filled' : ''}`">tune</span>
+          </Tab>
+          <Tab value="connections" class="!p-0 !border-0"><span
+              :class="`material-symbols-rounded !text-base ${active_section == 'connections' ? 'font-variation-ico-filled' : ''}`">hub</span>
+          </Tab>
+        </TabList>
+
+        <Button class="w-5 h-5 !ml-auto" size="small" text rounded plain @click="call_chatbot()">
+          <span class="dark:text-white material-symbols-rounded !text-lg">forum</span>
+        </Button>
+      </footer>
+    </Tabs>
+  </div>
+
+  <!-- <div class="text" v-show="active_node !== null">
     <div class="path_attribute" v-if="active_node !== null">
       <div id="colorbar" :style="{ backgroundColor: colornode }"></div>
       <div class="term">{{ active_node.attributes["Name"] }};</div>
@@ -7,77 +72,41 @@
         <img src="@/assets/pane/follow.png" />
       </div>
     </div>
-    <div
-      :class="{
-        'tool-section': !tool_active,
-        'tool-section-active': tool_active,
-      }"
-    >
-      <div
-        id="informations"
-        class="subsection"
-        v-show="tool_active && active_section == 'information'"
-      >
+    <div :class="{
+      'tool-section': !tool_active,
+      'tool-section-active': tool_active,
+    }">
+      <div id="informations" class="subsection" v-show="tool_active && active_section == 'information'">
         <div class="subsection-header">
           <span>informations</span>
         </div>
         <div class="subsection-main colortype"></div>
       </div>
-      <div
-        id="network"
-        class="subsection"
-        v-show="tool_active && active_section == 'statistics'"
-      >
+      <div id="network" class="subsection" v-show="tool_active && active_section == 'statistics'">
         <div class="subsection-header">
           <span>network statistics</span>
         </div>
         <div class="subsection-main colortype">
-          <NetworkStatistics
-            :active_node="active_node"
-            :mode="mode"
-          ></NetworkStatistics>
+          <NetworkStatistics :active_node="active_node" :mode="mode"></NetworkStatistics>
         </div>
       </div>
-      <div
-        id="connections"
-        class="subsection"
-        v-show="tool_active && active_section == 'connections'"
-      >
+      <div id="connections" class="subsection" v-show="tool_active && active_section == 'connections'">
         <div class="subsection-header">
           <span>connections</span>
           <img src="@/assets/pane/copy.png" v-on:click="copyclipboard()" />
         </div>
         <div class="subsection-main colortype">
-          <NodeConnections
-            :active_node="active_node"
-            :links="links"
-          ></NodeConnections>
+          <NodeConnections :active_node="active_node" :links="links"></NodeConnections>
         </div>
       </div>
     </div>
     <div class="nodeattributes">
-      <img
-        class="icons"
-        src="@/assets/toolbar/menu-burger.png"
-        v-on:click="change_section('information')"
-      />
-      <img
-        class="icons"
-        src="@/assets/toolbar/settings-sliders.png"
-        v-on:click="change_section('statistics')"
-      />
-      <img
-        class="icons"
-        src="@/assets/toolbar/proteinselect.png"
-        v-on:click="change_section('connections')"
-      />
-      <img
-        class="icons"
-        src="@/assets/toolbar/bote.png"
-        v-on:click="call_chatbot(mode)"
-      />
+      <img class="icons" src="@/assets/toolbar/menu-burger.png" v-on:click="change_section('information')" />
+      <img class="icons" src="@/assets/toolbar/settings-sliders.png" v-on:click="change_section('statistics')" />
+      <img class="icons" src="@/assets/toolbar/proteinselect.png" v-on:click="change_section('connections')" />
+      <img class="icons" src="@/assets/toolbar/bote.png" v-on:click="call_chatbot(mode)" />
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
@@ -187,4 +216,4 @@ export default {
 };
 </script>
 
-<style></style>
+<!-- <style></style> -->
diff --git a/frontend/src/views/CitationView.vue b/frontend/src/views/CitationView.vue
index 4df7286c..ddea4925 100644
--- a/frontend/src/views/CitationView.vue
+++ b/frontend/src/views/CitationView.vue
@@ -9,7 +9,7 @@
       @active_subset_changed="active_subset = $event"></CitationPane>
   </keep-alive>
   <keep-alive>
-    <CitationPaneSystem :gephi_data="citation_data" :active_node="active_node"
+    <CitationPaneSystem :mode="mode" :gephi_data="citation_data" :active_node="active_node"
       @active_node_changed="active_node = $event" :active_subset="active_subset"
       @active_subset_changed="active_subset = $event" @active_layer_changed="active_layer = $event"
       @active_combine_changed="active_combine = $event" :node_color_index="node_color_index"></CitationPaneSystem>
diff --git a/frontend/src/views/TermView.vue b/frontend/src/views/TermView.vue
index 292227ac..35f1323a 100644
--- a/frontend/src/views/TermView.vue
+++ b/frontend/src/views/TermView.vue
@@ -5,10 +5,10 @@
     </AppBar>
   </keep-alive>
   <keep-alive>
-    <TermPaneSystem :gephi_data="term_data" :active_node="active_node" @active_node_changed="active_node = $event"
-      :active_subset="active_subset" @active_subset_changed="active_subset = $event"
-      @active_layer_changed="active_layer = $event" @active_combine_changed="active_combine = $event"
-      :node_color_index="node_color_index"></TermPaneSystem>
+    <TermPaneSystem :mode="mode" :gephi_data="term_data" :active_node="active_node"
+      @active_node_changed="active_node = $event" :active_subset="active_subset"
+      @active_subset_changed="active_subset = $event" @active_layer_changed="active_layer = $event"
+      @active_combine_changed="active_combine = $event" :node_color_index="node_color_index"></TermPaneSystem>
   </keep-alive>
   <main class="h-[calc(100vh-65px)] flex flex-1 overflow-hidden">
     <keep-alive>