From 3cfe38e42d6424851d4c4500c06fd7cd8a0cb8dc Mon Sep 17 00:00:00 2001
From: anlisha-maharjan <anlishamaharjan@gmail.com>
Date: Mon, 6 Jan 2025 11:26:50 +0100
Subject: [PATCH] NN-643 complete term pane UI

---
 .../modules/pathways/PathwayConnections.vue   |  82 ++++-
 .../pane/modules/pathways/PathwayLinks.vue    | 312 ++++++++++++------
 .../modules/pathways/PathwayStatistics.vue    |  12 +-
 .../pane/modules/pathways/TermPane.vue        | 181 +++++-----
 4 files changed, 387 insertions(+), 200 deletions(-)

diff --git a/frontend/src/components/pane/modules/pathways/PathwayConnections.vue b/frontend/src/components/pane/modules/pathways/PathwayConnections.vue
index 3327f5ba..0bb38991 100644
--- a/frontend/src/components/pane/modules/pathways/PathwayConnections.vue
+++ b/frontend/src/components/pane/modules/pathways/PathwayConnections.vue
@@ -1,5 +1,75 @@
 <template>
-  <div id="pathway-connect" class="connect">
+  <p v-if="!filt_links?.length" class="flex items-center justify-center py-1 text-sm text-slate-300">No nodes
+  </p>
+
+  <Listbox v-if="filt_links?.length" optionLabel="" :options="filt_links" :pt="{
+    listContainer: { class: 'order-2' },
+    list: { class: '!p-0' },
+    emptyMessage: { class: '!flex !justify-center !items-center !text-sm !text-slate-500 dark:!text-slate-300' },
+    option: {
+      class:
+        '!px-0 !py-1 !text-slate-500 dark:!text-slate-300 leading-tight transition-all duration-300 ease-in-out',
+    },
+  }" listStyle="max-height:100%" class="h-full flex flex-col !p-0 !bg-transparent !border-0" :tabindex="0"
+    emptyMessage="No nodes available.">
+
+    <template #footer>
+      <header class="sticky -top-2 bg-[var(--card-bg)] items-center gap-2 z-[1] order-1">
+        <!-- sorting -->
+        <div
+          class="grid grid-cols-12 items-center gap-2 py-2 bg-[var(--card-bg)] shadow-[0_10px_30px_-18px_#34343D] dark:shadow-[0_10px_30px_-18px_#ffffff] z-[1]">
+
+          <a class="flex items-center justify-start col-span-4 gap-1 text-sm cursor-pointer" v-on:click="
+            sort_node = sort_node === 'asc' ? 'dsc' : 'asc';
+          sort_cluster = '';
+          sort_degree = '';
+          ">
+            Nodes
+            <span :class="`material-symbols-rounded text-sm cursor-pointer 
+            ${sort_node ? 'text-primary-500' : 'text-slate-600'}`">
+              {{ !sort_node ? "swap_vert" : sort_node === "asc" ? "south" : "north" }}
+            </span>
+          </a>
+
+          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+            sort_cluster = sort_cluster === 'asc' ? 'dsc' : 'asc';
+          sort_node = '';
+          sort_degree = '';
+          ">
+            Cluster
+            <span :class="`material-symbols-rounded text-sm cursor-pointer 
+            ${sort_cluster ? 'text-primary-500' : 'text-slate-600'}`">
+              {{ !sort_cluster ? "swap_vert" : sort_cluster === "asc" ? "south" : "north" }}
+            </span>
+          </a>
+
+          <a class="flex items-center justify-center col-span-4 gap-1 text-sm text-center cursor-pointer" v-on:click="
+            sort_degree = sort_degree === 'asc' ? 'dsc' : 'asc';
+          sort_cluster = '';
+          sort_node = '';
+          ">
+            Degree
+            <span :class="`material-symbols-rounded text-sm cursor-pointer 
+            ${sort_degree ? 'text-primary-500' : 'text-slate-600'}`">
+              {{ !sort_degree ? "swap_vert" : sort_degree === "asc" ? "south" : "north" }}
+            </span>
+          </a>
+        </div>
+      </header>
+    </template>
+    <!-- options -->
+    <template #option="slotProps">
+      <div :class="`grid items-center w-full grid-cols-12 gap-2`">
+        <span class="col-span-4 text-xs">{{ slotProps.option?.attributes?.["Name"] }}</span>
+
+        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
+
+        <span class="col-span-4 text-xs text-center">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+      </div>
+    </template>
+  </Listbox>
+
+  <!-- <div id="pathway-connect" class="connect">
     <div class="sorting">
       <a
         class="node_filter"
@@ -51,7 +121,7 @@
         </tbody>
       </table>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
@@ -134,8 +204,8 @@ export default {
           (t1, t2) => t1.attributes["Degree"] - t2.attributes["Degree"]
         );
       }
-
-      return new Set(filtered);
+      return filtered;
+      // return new Set(filtered);
     },
   },
   methods: {
@@ -150,11 +220,11 @@ export default {
 };
 </script>
 
-<style>
+<!-- <style>
 #pathway-connect {
   width: 100%;
   height: 100%;
   font-family: "ABeeZee", sans-serif;
   padding: 1.3vw 1.3vw 1vw 1.3vw;
 }
-</style>
+</style> -->
diff --git a/frontend/src/components/pane/modules/pathways/PathwayLinks.vue b/frontend/src/components/pane/modules/pathways/PathwayLinks.vue
index ead880ad..88ca2066 100644
--- a/frontend/src/components/pane/modules/pathways/PathwayLinks.vue
+++ b/frontend/src/components/pane/modules/pathways/PathwayLinks.vue
@@ -1,5 +1,80 @@
 <template>
-  <div id="term-statistics" class="term-statistics">
+  <ul class="list-none p-0 m-0 flex flex-col divide-y dark:divide-[#343b4c]">
+    <li class="flex flex-col gap-2 px-2.5 pb-3 dark:text-[#c3c3c3]">
+      <div class="flex items-center justify-between -mx-2.5 gap-2 mb-2 text-sm">
+        Degree value
+        <fieldset class="flex gap-1">
+          <InputNumber :useGrouping="false" :min="degree_boundary.min" :max="degree_boundary.max"
+            :step="degree_boundary.step" v-model="degree_boundary.minValue" @value-change="searchSubset()"
+            inputClass="w-14 h-7 !px-1.5 !text-xs text-center" />-
+          <InputNumber :useGrouping="false" :min="degree_boundary.min" :max="degree_boundary.max"
+            :step="degree_boundary.step" v-model="degree_boundary.maxValue" @value-change="searchSubset()"
+            inputClass="w-14 h-7 !px-1.5 !text-xs text-center" />
+        </fieldset>
+      </div>
+      <Slider name="degree_boundary" :min="degree_boundary.min" :max="degree_boundary.max" range
+        :step="degree_boundary.step" @update:modelValue="sliderChanged($event, 'degree_boundary')"
+        :modelValue=[degree_boundary.minValue,degree_boundary.maxValue] />
+    </li>
+
+    <li class="flex flex-col gap-2 px-2.5 py-3 dark:text-[#c3c3c3]">
+      <div class="flex items-center justify-between -mx-2.5 gap-2 mb-2 text-sm">
+        Betweenness centrality value
+        <fieldset class="flex gap-1">
+          <InputNumber :useGrouping="false" :min="bc_boundary.min" :max="bc_boundary.max" :step="bc_boundary.step"
+            v-model="bc_boundary.minValue" @value-change="searchSubset()"
+            inputClass="w-14 h-7 !px-1.5 !text-xs text-center" />-
+          <InputNumber :useGrouping="false" :min="bc_boundary.min" :max="bc_boundary.max" :step="bc_boundary.step"
+            v-model="bc_boundary.maxValue" @value-change="searchSubset()"
+            inputClass="w-14 h-7 !px-1.5 !text-xs text-center" />
+        </fieldset>
+      </div>
+      <Slider name="bc_boundary" :min="bc_boundary.min" :max="bc_boundary.max" range :step="bc_boundary.step"
+        @update:modelValue="sliderChanged($event, 'bc_boundary')" :modelValue=[bc_boundary.minValue,bc_boundary.maxValue] />
+    </li>
+
+    <li class="flex flex-col gap-2 px-2.5 py-3 dark:text-[#c3c3c3]">
+      <div class="flex items-center justify-between -mx-2.5 gap-2 mb-2 text-sm">
+        pagerank value (log10)
+        <fieldset class="flex gap-1">
+          <InputNumber :useGrouping="false" :min="pr_boundary.min" :max="pr_boundary.max" :step="pr_boundary.step"
+            v-model="pr_boundary.minValue" @value-change="searchSubset()"
+            inputClass="w-14 h-7 !px-1.5 !text-xs text-center" />-
+          <InputNumber :useGrouping="false" :min="pr_boundary.min" :max="pr_boundary.max" :step="pr_boundary.step"
+            v-model="pr_boundary.maxValue" @value-change="searchSubset()"
+            inputClass="w-14 h-7 !px-1.5 !text-xs text-center" />
+        </fieldset>
+      </div>
+      <Slider name="pr_boundary" :min="pr_boundary.min" :max="pr_boundary.max" range :step="pr_boundary.step"
+        @update:modelValue="sliderChanged($event, 'pr_boundary')" :modelValue=[pr_boundary.minValue,pr_boundary.maxValue] />
+    </li>
+
+    <template v-if="dcoloumns && mode != 'term' && mode != 'citation'">
+      <li class="flex flex-col gap-2 px-2.5 py-3 dark:text-[#c3c3c3]" v-for="(entry, index) in dcoloumns" :key="index">
+        <div class="flex items-center justify-between -mx-2.5 gap-2 mb-2">
+          <span class="text-sm">{{ entry }}</span>
+          <fieldset class="flex gap-1">
+            <InputNumber :useGrouping="false" :min="dboundaries[entry].min" :max="dboundaries[entry].max"
+              :step="dboundaries[entry].step" v-model="dboundaries[entry].minValue" @value-change="searchSubset()"
+              inputClass="w-14 h-7 !px-1.5 !text-xs text-center" />-
+            <InputNumber :useGrouping="false" :min="dboundaries[entry].min" :max="dboundaries[entry].max"
+              :step="dboundaries[entry].step" v-model="dboundaries[entry].maxValue" @value-change="searchSubset()"
+              inputClass="w-14 h-7 !px-1.5 !text-xs text-center" />
+          </fieldset>
+        </div>
+        <span class="flex items-center justify-end gap-2 mb-2 text-sm">
+          Inverse selection
+          <ToggleSwitch :id="'deval-check-' + index" class="toggle-xs"
+            @value-change="change_limits($event, entry); searchSubset();" />
+        </span>
+        <Slider :name="'deval-slider-' + index" :min="dboundaries[entry].min" :max="dboundaries[entry].max" range
+          :step="dboundaries[entry].step" @update:modelValue="devalSliderChanged($event, entry)"
+          :modelValue=[dboundaries[entry].minValue,dboundaries[entry].maxValue] />
+      </li>
+    </template>
+  </ul>
+    
+  <!-- <div id="term-statistics" class="term-statistics">
     <div class="selection_list">
       <div class="window-label">degree value</div>
       <div class="menu-items">
@@ -158,12 +233,12 @@
         </div>
       </div>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
-import * as noUiSlider from "nouislider";
-import "@/slider.css";
+// import * as noUiSlider from "nouislider";
+// import "@/slider.css";
 
 export default {
   name: "PathwayLinks",
@@ -176,17 +251,17 @@ export default {
         minValue: 0,
         maxValue: 0,
         min: 0,
-        max: Number,
+        max: 0,
         step: 1,
       },
       pr_boundary: {
         minValue: 0,
         maxValue: 0,
         min: 0,
-        max: Number,
+        max: 0,
         step: 0.01,
       },
-      bc_boundary: { minValue: 0, maxValue: 0, min: 0, max: Number, step: 1 },
+      bc_boundary: { minValue: 0, maxValue: 0, min: 0, max: 0, step: 1 },
       dcoloumns: this.$store.state.dcoloumns,
       dboundaries: {},
       nodeCheck: false,
@@ -195,19 +270,25 @@ export default {
     };
   },
   methods: {
-    change_limits(slider_id, check_id, entry) {
+    change_limits(value, entry) {
       let com = this;
-      let slider = document.getElementById(slider_id);
-      com.check[entry] = document.getElementById(check_id).checked;
-
-      com.check[entry]
-        ? slider.noUiSlider.set([0, 0])
-        : slider.noUiSlider.reset();
-
-      let currentBorder = slider.noUiSlider.get();
-      com.dboundaries[entry].minValue = currentBorder[0];
-      com.dboundaries[entry].maxValue = currentBorder[1];
+      com.check[entry] = value;
+      com.dboundaries[entry].minValue = com.check[entry] ? 0.001 : com.dboundaries[entry].min;
+      com.dboundaries[entry].maxValue = com.check[entry] ? 0 : com.dboundaries[entry].max;
     },
+    // change_limits(slider_id, check_id, entry) {
+    //   let com = this;
+    //   let slider = document.getElementById(slider_id);
+    //   com.check[entry] = document.getElementById(check_id).checked;
+
+    //   com.check[entry]
+    //     ? slider.noUiSlider.set([0, 0])
+    //     : slider.noUiSlider.reset();
+
+    //   let currentBorder = slider.noUiSlider.get();
+    //   com.dboundaries[entry].minValue = currentBorder[0];
+    //   com.dboundaries[entry].maxValue = currentBorder[1];
+    // },
     initialize_de() {
       var com = this;
       var dataForm = com.parameter_data;
@@ -235,28 +316,28 @@ export default {
         };
       }
     },
-    create_de() {
-      var com = this;
-
-      Object.entries(com.dcoloumns).forEach(([index, coloumn]) => {
-        var slider = document.getElementById("term-deval-slider-" + index);
-        noUiSlider.create(slider, {
-          start: [com.dboundaries[coloumn].min, com.dboundaries[coloumn].max],
-          connect: true,
-          range: {
-            min: com.dboundaries[coloumn].min,
-            max: com.dboundaries[coloumn].max,
-          },
-          step: 0.01,
-        });
-
-        slider.noUiSlider.on("slide", function (values, handle) {
-          com.dboundaries[coloumn][handle ? "maxValue" : "minValue"] =
-            values[handle];
-          com.searchSubset();
-        });
-      });
-    },
+    // create_de() {
+    //   var com = this;
+
+    //   Object.entries(com.dcoloumns).forEach(([index, coloumn]) => {
+    //     var slider = document.getElementById("term-deval-slider-" + index);
+    //     noUiSlider.create(slider, {
+    //       start: [com.dboundaries[coloumn].min, com.dboundaries[coloumn].max],
+    //       connect: true,
+    //       range: {
+    //         min: com.dboundaries[coloumn].min,
+    //         max: com.dboundaries[coloumn].max,
+    //       },
+    //       step: 0.01,
+    //     });
+
+    //     slider.noUiSlider.on("slide", function (values, handle) {
+    //       com.dboundaries[coloumn][handle ? "maxValue" : "minValue"] =
+    //         values[handle];
+    //       com.searchSubset();
+    //     });
+    //   });
+    // },
     initialize_dg: function () {
       var com = this;
 
@@ -275,25 +356,27 @@ export default {
       });
 
       var maxDeg = Math.max(...result); // Need to use spread operator!
+      com.degree_boundary["max"] = maxDeg;
+      com.degree_boundary["min"] = 0;
       com.degree_boundary["maxValue"] = maxDeg;
       com.degree_boundary["minValue"] = 0;
 
-      var slider = document.getElementById("term-degree");
-      noUiSlider.create(slider, {
-        start: [0, maxDeg],
-        connect: true,
-        range: {
-          min: 0,
-          max: maxDeg,
-        },
-        format: this.formatType,
-        step: 1,
-      });
-
-      slider.noUiSlider.on("slide", function (values, handle) {
-        com.degree_boundary[handle ? "maxValue" : "minValue"] = values[handle];
-        com.searchSubset();
-      });
+      // var slider = document.getElementById("term-degree");
+      // noUiSlider.create(slider, {
+      //   start: [0, maxDeg],
+      //   connect: true,
+      //   range: {
+      //     min: 0,
+      //     max: maxDeg,
+      //   },
+      //   format: this.formatType,
+      //   step: 1,
+      // });
+
+      // slider.noUiSlider.on("slide", function (values, handle) {
+      //   com.degree_boundary[handle ? "maxValue" : "minValue"] = values[handle];
+      //   com.searchSubset();
+      // });
     },
     initialize_bc() {
       var com = this;
@@ -311,25 +394,27 @@ export default {
         return parseFloat(x, 10);
       });
       var maxDeg = Math.max(...result) + 10; // Need to use spread operator!
+      com.bc_boundary["max"] = maxDeg;
+      com.bc_boundary["min"] = 0;
       com.bc_boundary["maxValue"] = maxDeg;
       com.bc_boundary["minValue"] = 0;
 
-      var slider = document.getElementById("term-betweenes");
-      noUiSlider.create(slider, {
-        start: [0, maxDeg],
-        connect: true,
-        range: {
-          min: 0,
-          max: maxDeg,
-        },
-        format: this.formatType,
-        step: 1,
-      });
-
-      slider.noUiSlider.on("slide", function (values, handle) {
-        com.bc_boundary[handle ? "maxValue" : "minValue"] = values[handle];
-        com.searchSubset();
-      });
+      // var slider = document.getElementById("term-betweenes");
+      // noUiSlider.create(slider, {
+      //   start: [0, maxDeg],
+      //   connect: true,
+      //   range: {
+      //     min: 0,
+      //     max: maxDeg,
+      //   },
+      //   format: this.formatType,
+      //   step: 1,
+      // });
+
+      // slider.noUiSlider.on("slide", function (values, handle) {
+      //   com.bc_boundary[handle ? "maxValue" : "minValue"] = values[handle];
+      //   com.searchSubset();
+      // });
     },
     initialize_pagerank() {
       var com = this;
@@ -347,26 +432,26 @@ export default {
         return parseFloat(x);
       });
       var minDeg = Math.log10(Math.min(...result)) - 1;
+      com.pr_boundary["max"] = 0;
+      com.pr_boundary["min"] = minDeg;
       com.pr_boundary["maxValue"] = 0;
       com.pr_boundary["minValue"] = minDeg;
 
-      this.pr_boundary.min = minDeg;
-      this.pr_boundary.max = 0;
-      var slider = document.getElementById("term-pagerank");
-      noUiSlider.create(slider, {
-        start: [minDeg, 0],
-        connect: true,
-        range: {
-          min: minDeg,
-          max: 0,
-        },
-        step: 0.01,
-      });
-
-      slider.noUiSlider.on("slide", function (values, handle) {
-        com.pr_boundary[handle ? "maxValue" : "minValue"] = values[handle];
-        com.searchSubset();
-      });
+      // var slider = document.getElementById("term-pagerank");
+      // noUiSlider.create(slider, {
+      //   start: [minDeg, 0],
+      //   connect: true,
+      //   range: {
+      //     min: minDeg,
+      //     max: 0,
+      //   },
+      //   step: 0.01,
+      // });
+
+      // slider.noUiSlider.on("slide", function (values, handle) {
+      //   com.pr_boundary[handle ? "maxValue" : "minValue"] = values[handle];
+      //   com.searchSubset();
+      // });
     },
     searchSubset() {
       var com = this;
@@ -444,10 +529,26 @@ export default {
         mode: this.mode,
       });
     },
-    valueChanged(id, value) {
-      var slider = document.getElementById(id);
-      slider.noUiSlider.set(value);
+    sliderChanged(values, obj) {
+      var com = this;
+      com[obj]["minValue"] =
+        values[0];
+      com[obj]["maxValue"] =
+        values[1];
+      com.searchSubset();
+    },
+    devalSliderChanged(values, entry) {
+      var com = this;
+      com.dboundaries[entry]["minValue"] =
+        values[0];
+      com.dboundaries[entry]["maxValue"] =
+        values[1];
+      com.searchSubset();
     },
+    // valueChanged(id, value) {
+    //   var slider = document.getElementById(id);
+    //   slider.noUiSlider.set(value);
+    // },
     term_genes(list) {
       var term_genes = new Set(list);
       var termlist = this.$store.state.gephi_json.data.nodes.filter((element) =>
@@ -456,27 +557,24 @@ export default {
       return termlist;
     },
     load_data() {
-      console.log("Links");
       this.parameter_data = this.term_genes(this.active_term.symbols);
-
-      console.log(this.parameter_data);
     },
   },
   mounted() {
-    this.formatType = {
-      from: function (value) {
-        return parseInt(value);
-      },
-      to: function (value) {
-        return parseInt(value);
-      },
-    };
+    // this.formatType = {
+    //   from: function (value) {
+    //     return parseInt(value);
+    //   },
+    //   to: function (value) {
+    //     return parseInt(value);
+    //   },
+    // };
 
     this.initialize_dg();
     this.initialize_bc();
     this.initialize_pagerank();
-    if (this.dcoloumns && this.mode != "term" && this.mode != "citation")
-      this.create_de();
+    // if (this.dcoloumns && this.mode != "term" && this.mode != "citation")
+    //   this.create_de();
     this.searchSubset();
   },
   created() {
@@ -486,7 +584,7 @@ export default {
 };
 </script>
 
-<style>
+<!-- <style>
 .term-statistics .menu-items {
   display: flex;
   margin: 0;
@@ -515,4 +613,4 @@ export default {
   font-family: "ABeeZee", sans-serif;
   padding: 0.5vw;
 }
-</style>
+</style> -->
diff --git a/frontend/src/components/pane/modules/pathways/PathwayStatistics.vue b/frontend/src/components/pane/modules/pathways/PathwayStatistics.vue
index 76c9b81f..23f061ee 100644
--- a/frontend/src/components/pane/modules/pathways/PathwayStatistics.vue
+++ b/frontend/src/components/pane/modules/pathways/PathwayStatistics.vue
@@ -1,5 +1,11 @@
 <template>
-  <div id="statistics">
+  <ul class="list-none p-0 m-0 flex flex-col divide-y dark:divide-[#343b4c]">
+    <li class="flex gap-1.5 py-1 dark:text-[#c3c3c3]" v-for="(key, entry, index) in statistics" :key="index">
+      <strong class="flex-shrink-0 text-sm font-normal w-[20%] dark:text-slate-400">{{ entry }}</strong>
+      <span class="flex-shrink-0 text-sm break-all w-[80%]">{{ key }}</span>
+    </li>
+  </ul>
+  <!-- <div id="statistics">
     <div class="network-results" tabindex="0" @keydown="handleKeyDown">
       <table>
         <tbody>
@@ -20,7 +26,7 @@
         </tbody>
       </table>
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
@@ -44,5 +50,3 @@ export default {
   },
 };
 </script>
-
-<style></style>
diff --git a/frontend/src/components/pane/modules/pathways/TermPane.vue b/frontend/src/components/pane/modules/pathways/TermPane.vue
index d0cf3c34..043bdc6b 100644
--- a/frontend/src/components/pane/modules/pathways/TermPane.vue
+++ b/frontend/src/components/pane/modules/pathways/TermPane.vue
@@ -1,13 +1,82 @@
 <template>
-  <div class="text" v-show="active_term !== null">
+  <div v-show="active_term !== null">
+    <header v-if="active_term !== null" class="flex flex-wrap items-center gap-2">
+      <span class="flex items-center gap-1 text-sm font-medium">
+        <span v-on:click.stop="bookmark_pathway()" :class="`text-xl material-symbols-rounded text-slate-600 cursor-pointer 
+          ${favourite_pathways.has(active_term)
+            ? 'font-variation-ico-filled text-yellow-500 hover:text-yellow-400'
+            : 'hover:text-yellow-600'
+          }`">
+          star
+        </span>
+        <strong class="font-normal">{{ active_term.clean }}</strong>
+      </span>
+      <Button class="w-5 h-5 ml-auto" size="small" text plain rounded @click="to_term()">
+        <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>
+            <PathwayStatistics :active_term="active_term"></PathwayStatistics>
+          </TabPanel>
+          <TabPanel value="statistics" v-if="active_term !== null">
+            <h3 class="mb-3 text-sm font-medium">
+              Parameter Selection
+            </h3>
+            <PathwayLinks :active_term="active_term" :mode="mode"></PathwayLinks>
+          </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="copyToClipboard()">
+                <span class="dark:text-white material-symbols-rounded !text-lg"> content_copy </span>
+              </Button>
+            </div>
+            <PathwayConnections :active_term="active_term" :gephi_data="gephi_data"></PathwayConnections>
+          </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_term !== 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="hidden text" v-show="active_term !== null">
     <div class="path_attribute" v-if="active_term !== null">
       <div class="favourite-pane-symbol">
         <label class="custom-checkbox">
-          <div
-            class="checkbox-image"
-            v-on:click="bookmark_pathway()"
-            :class="{ checked: favourite_pathways.has(active_term) }"
-          ></div>
+          <div class="checkbox-image" v-on:click="bookmark_pathway()"
+            :class="{ checked: favourite_pathways.has(active_term) }"></div>
         </label>
       </div>
       <div class="term">{{ active_term.clean }}</div>
@@ -16,41 +85,11 @@
       </div>
     </div>
 
-    <!-- <div class="nodeattributes">
-            <div id="network" class="subsection">
-                <div class="subsection-header">
-                    <span>pathway statistics</span>
-                </div>
-                <div class="subsection-main colortype">
-
-                </div>
-            </div>
-            <div id="pathway-connections" class="subsection">
-                <div class="subsection-header">
-                    <span>connections</span>
-                    <div id='vis-button'>
-                        <img src="@/assets/pane/invisible.png" v-if="!hide" v-on:click="show_layer()">
-                        <img src="@/assets/pane/visible.png" v-if="hide" v-on:click="show_layer()">
-                        <img src="@/assets/pane/copy.png" v-on:click="copyclipboard()">
-                    </div>
-                </div>
-                <div class="subsection-main colortype">
-
-                </div>
-            </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>information</span>
         </div>
@@ -58,13 +97,9 @@
           <PathwayStatistics :active_term="active_term"></PathwayStatistics>
         </div>
       </div>
-      <div
-        id="network"
-        class="subsection"
-        v-if="
-          tool_active && active_section == 'statistics' && active_term !== null
-        "
-      >
+      <div id="network" class="subsection" v-if="
+        tool_active && active_section == 'statistics' && active_term !== null
+      ">
         <div class="subsection-header">
           <span>parameter selection</span>
         </div>
@@ -72,54 +107,33 @@
           <PathwayLinks :active_term="active_term" :mode="mode"></PathwayLinks>
         </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">
-          <PathwayConnections
-            :active_term="active_term"
-            :gephi_data="gephi_data"
-          ></PathwayConnections>
+          <PathwayConnections :active_term="active_term" :gephi_data="gephi_data"></PathwayConnections>
         </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/logout.png" v-on:click="change_section(!tool_active,'routing')"> -->
+      <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)" />
+      // No
+      <img  class="icons" src="@/assets/toolbar/logout.png" v-on:click="change_section(!tool_active,'routing')">
     </div>
-  </div>
+  </div> -->
 </template>
 
 <script>
 import PathwayStatistics from "@/components/pane/modules/pathways/PathwayStatistics.vue";
 import PathwayConnections from "@/components/pane/modules/pathways/PathwayConnections.vue";
 import PathwayLinks from "@/components/pane/modules/pathways/PathwayLinks.vue";
+import { useToast } from "primevue/usetoast";
 
 export default {
   name: "TermPane",
@@ -179,11 +193,12 @@ export default {
     },
     copyclipboard() {
       this.emitter.emit("copyConnections");
+      this.toast.add({ severity: 'success', detail: 'Message copied to clipboard.', life: 4000 });
     },
     to_term() {
       var com = this;
       if (!com.$store.state.term_graph_data) {
-        alert("There is no term graph");
+        this.toast.add({ severity: 'error', detail: 'There is no term graph.', life: 4000 });
         return;
       }
 
@@ -208,7 +223,6 @@ export default {
       com.hide = !com.hide;
     },
     call_chatbot(mode) {
-      console.log(this.active_term);
       this.emitter.emit("addToChatbot", {
         id: this.active_term.id,
         mode: mode,
@@ -218,6 +232,7 @@ export default {
     },
   },
   mounted() {
+    this.toast = useToast();
     this.emitter.on("updateFavouriteList", (value) => {
       this.favourite_pathways = value;
     });
@@ -225,7 +240,7 @@ export default {
 };
 </script>
 
-<style>
+<!-- <style>
 .term {
   width: 70%;
   margin-left: 0.3vw;
@@ -303,4 +318,4 @@ export default {
   right: unset;
   padding: 0%;
 }
-</style>
+</style> -->