From 3ab3ef784c83e598933655a1c5629b811ec86ab7 Mon Sep 17 00:00:00 2001
From: anlisha-maharjan <anlishamaharjan@gmail.com>
Date: Fri, 3 Jan 2025 23:21:39 +0100
Subject: [PATCH] NN-643 modify subset link and subset connection UI

---
 .../pane/modules/subset/SubsetConnections.vue | 131 +++--
 .../pane/modules/subset/SubsetLinks.vue       | 554 ++++++++++--------
 2 files changed, 373 insertions(+), 312 deletions(-)

diff --git a/frontend/src/components/pane/modules/subset/SubsetConnections.vue b/frontend/src/components/pane/modules/subset/SubsetConnections.vue
index c5865139..03a5adb6 100644
--- a/frontend/src/components/pane/modules/subset/SubsetConnections.vue
+++ b/frontend/src/components/pane/modules/subset/SubsetConnections.vue
@@ -1,57 +1,75 @@
 <template>
-  <div id="subset-connect" class="connect">
-    <div class="sorting">
-      <a
-        class="node_filter"
-        v-on:click="
-          sort_node = sort_node === 'asc' ? 'dsc' : 'asc';
+  <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 !== null" optionLabel="label" :options="filt_links" :pt="{
+    header: { class: 'sticky top-0 flex-1 !px-0 bg-[var(--card-bg)] z-[1] order-1' },
+    listContainer: { class: 'order-3' },
+    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"
+    @update:modelValue="select_term" :tabindex="0" emptyMessage="No nodes available.">
+
+    <template #footer>
+      <header class="sticky top-0 bg-[var(--card-bg)] pt-3 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 text-right cursor-pointer" v-on:click="
+            sort_node = sort_node === 'asc' ? 'dsc' : 'asc';
           sort_cluster = '';
           sort_degree = '';
-        "
-        >nodes</a
-      >
-      <a
-        class="cluster_filter"
-        v-on:click="
-          sort_cluster = sort_cluster === 'asc' ? 'dsc' : 'asc';
+          ">
+            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-start col-span-4 gap-1 text-sm text-right cursor-pointer" v-on:click="
+            sort_cluster = sort_cluster === 'asc' ? 'dsc' : 'asc';
           sort_node = '';
           sort_degree = '';
-        "
-        >cluster</a
-      >
-      <a
-        class="degree_filter"
-        v-on:click="
-          sort_degree = sort_degree === 'asc' ? 'dsc' : 'asc';
+          ">
+            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-end col-span-4 gap-1 text-sm text-right cursor-pointer" v-on:click="
+            sort_degree = sort_degree === 'asc' ? 'dsc' : 'asc';
           sort_cluster = '';
           sort_node = '';
-        "
-        >degree</a
-      >
-    </div>
+          ">
+            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 ${slotProps.selected ? '!text-primary-400' : ''}`">
+        <span class="col-span-4 text-xs">{{ slotProps.option.label }}</span>
+
+        <span class="col-span-4 text-xs text-right">{{ slotProps.option?.attributes?.["Modularity Class"] }}</span>
 
-    <div class="network-results" tabindex="0" @keydown="handleKeyDown">
-      <table>
-        <tbody>
-          <tr v-for="(entry, index) in filt_links" :key="index" class="option">
-            <td>
-              <div class="statistics-attr">
-                <a href="#">{{ entry.label }}</a>
-              </div>
-            </td>
-            <td>
-              <a class="statistics-val">{{
-                entry.attributes["Modularity Class"]
-              }}</a>
-            </td>
-            <td>
-              <a class="statistics-val">{{ entry.attributes["Degree"] }}</a>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
+        <span class="col-span-4 text-xs text-right">{{ slotProps.option?.attributes?.["Degree"] }}</span>
+      </div>
+    </template>
+  </Listbox>
 </template>
 
 <script>
@@ -89,8 +107,8 @@ export default {
             ? 1
             : t1.attributes["Name"].toLowerCase() ===
               t2.attributes["Name"].toLowerCase()
-            ? 0
-            : -1;
+              ? 0
+              : -1;
         });
       } else if (com.sort_node == "dsc") {
         filtered.sort(function (t1, t2) {
@@ -99,8 +117,8 @@ export default {
             ? 1
             : t1.attributes["Name"].toLowerCase() ===
               t2.attributes["Name"].toLowerCase()
-            ? 0
-            : -1;
+              ? 0
+              : -1;
         });
       }
 
@@ -127,18 +145,9 @@ export default {
           (t1, t2) => t1.attributes["Degree"] - t2.attributes["Degree"]
         );
       }
-
-      return new Set(filtered);
+      return filtered;
+      // return new Set(filtered);
     },
   },
 };
 </script>
-
-<style>
-#subset-connect {
-  width: 100%;
-  height: 100%;
-  font-family: "ABeeZee", sans-serif;
-  padding: 1.3vw 1.3vw 1vw 1.3vw;
-}
-</style>
diff --git a/frontend/src/components/pane/modules/subset/SubsetLinks.vue b/frontend/src/components/pane/modules/subset/SubsetLinks.vue
index 1aebb5e1..1e67cad9 100644
--- a/frontend/src/components/pane/modules/subset/SubsetLinks.vue
+++ b/frontend/src/components/pane/modules/subset/SubsetLinks.vue
@@ -1,204 +1,231 @@
 <template>
-  <div id="subset-statistics" class="subset-statistics">
+  <ul class="list-none p-0 m-0 mt-2 flex flex-col divide-y dark:divide-[#343b4c]">
+    <li class="flex flex-col gap-2 pb-5 dark:text-[#c3c3c3]">
+      <div class="flex items-center justify-between 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 py-5 dark:text-[#c3c3c3]">
+      <div class="flex items-center justify-between 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 v-if="mode == 'term'" class="flex flex-col gap-2 py-5 dark:text-[#c3c3c3]">
+      <div class="flex items-center justify-between gap-2 mb-2 text-sm">
+        padj value (log10)
+        <fieldset class="flex gap-1">
+          <InputNumber :useGrouping="false" :min="padj_boundary.min" :max="padj_boundary.max" :step="padj_boundary.step"
+            v-model="padj_boundary.minValue" @value-change="searchSubset()"
+            inputClass="w-14 h-7 !px-1.5 !text-xs text-center" />-
+          <InputNumber :useGrouping="false" :min="padj_boundary.min" :max="padj_boundary.max" :step="padj_boundary.step"
+            v-model="padj_boundary.maxValue" @value-change="searchSubset()"
+            inputClass="w-14 h-7 !px-1.5 !text-xs text-center" />
+        </fieldset>
+      </div>
+      <Slider name="padj_boundary" :min="padj_boundary.min" :max="padj_boundary.max" range :step="padj_boundary.step"
+        @update:modelValue="sliderChanged($event, 'padj_boundary')"
+        :modelValue=[padj_boundary.minValue,padj_boundary.maxValue] />
+    </li>
+
+    <li class="flex flex-col gap-2 py-5 dark:text-[#c3c3c3]">
+      <div class="flex items-center justify-between 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>
+  </ul>
+
+  <div v-if="mode != 'term' && mode != 'citation'" class="flex justify-between mt-5 text-sm font-medium">
+    Coloumn section
+    <ToggleSwitch class="toggle-xs" v-model="coloumnsCheck" />
+  </div>
+
+  <span v-if="!dcoloumns" class="flex justify-center pt-2 text-sm dark:text-[#c3c3c3]">No selectable dcoloumns</span>
+
+  <ul v-if="dcoloumns" v-show="coloumnsCheck"
+    class="max-h-[240px] overflow-auto overflow-x-visible list-none mb-4 p-0 m-0 mt-1 px-2.5 flex flex-col divide-y dark:divide-[#343b4c]">
+    <li class="flex flex-col gap-2 py-5 dark:text-[#c3c3c3]" v-for="(entry, index) in dcoloumns" :key="index">
+      <div class="flex items-center justify-between 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>
+  </ul>
+
+  <!-- <div id="subset-statistics" class="subset-statistics">
     <div class="selection_list">
       <div class="window-label">degree value</div>
       <div class="menu-items">
         <div id="subset-degree"></div>
-        <input
-          type="number"
-          v-bind:min="degree_boundary.min"
-          v-bind:max="degree_boundary.max"
-          v-bind:step="degree_boundary.step"
-          v-model="degree_boundary.minValue"
-          v-on:change="searchSubset()"
-          v-on:input="
+        <input type="number" v-bind:min="degree_boundary.min" v-bind:max="degree_boundary.max"
+          v-bind:step="degree_boundary.step" v-model="degree_boundary.minValue" v-on:change="searchSubset()" v-on:input="
             valueChanged('subset-degree', [
               degree_boundary.minValue,
               degree_boundary.maxValue,
             ])
-          "
-        />
+            " />
         <span class="seperator">-</span>
-        <input
-          type="number"
-          v-bind:min="degree_boundary.min"
-          v-bind:max="degree_boundary.max"
-          v-bind:step="degree_boundary.step"
-          v-model="degree_boundary.maxValue"
-          v-on:change="searchSubset()"
-          v-on:input="
+        <input type="number" v-bind:min="degree_boundary.min" v-bind:max="degree_boundary.max"
+          v-bind:step="degree_boundary.step" v-model="degree_boundary.maxValue" v-on:change="searchSubset()" v-on:input="
             valueChanged('subset-degree', [
               degree_boundary.minValue,
               degree_boundary.maxValue,
             ])
-          "
-        />
+            " />
       </div>
       <div class="window-label">betweenness centrality value</div>
       <div class="menu-items">
         <div id="subset-betweenes"></div>
-        <input
-          type="number"
-          v-bind:min="bc_boundary.min"
-          v-bind:max="bc_boundary.max"
-          v-bind:step="bc_boundary.step"
-          v-model="bc_boundary.minValue"
-          v-on:change="searchSubset()"
-          v-on:input="
+        <input type="number" v-bind:min="bc_boundary.min" v-bind:max="bc_boundary.max" v-bind:step="bc_boundary.step"
+          v-model="bc_boundary.minValue" v-on:change="searchSubset()" v-on:input="
             valueChanged('subset-betweenes', [
               bc_boundary.minValue,
               bc_boundary.maxValue,
             ])
-          "
-        />
+            " />
         <span class="seperator">-</span>
-        <input
-          type="number"
-          v-bind:min="bc_boundary.min"
-          v-bind:max="bc_boundary.max"
-          v-bind:step="bc_boundary.step"
-          v-model="bc_boundary.maxValue"
-          v-on:change="searchSubset()"
-          v-on:input="
+        <input type="number" v-bind:min="bc_boundary.min" v-bind:max="bc_boundary.max" v-bind:step="bc_boundary.step"
+          v-model="bc_boundary.maxValue" v-on:change="searchSubset()" v-on:input="
             valueChanged('subset-betweenes', [
               bc_boundary.minValue,
               bc_boundary.maxValue,
             ])
-          "
-        />
+            " />
       </div>
       <div v-if="mode == 'term'">
         <div class="window-label">padj value (log10)</div>
         <div class="menu-items">
           <div id="subset-padj"></div>
-          <input
-            type="number"
-            v-bind:min="padj_boundary.min"
-            v-bind:max="padj_boundary.max"
-            v-bind:step="padj_boundary.step"
-            v-model="padj_boundary.minValue"
-            v-on:change="searchSubset()"
-            v-on:input="
+          <input type="number" v-bind:min="padj_boundary.min" v-bind:max="padj_boundary.max"
+            v-bind:step="padj_boundary.step" v-model="padj_boundary.minValue" v-on:change="searchSubset()" v-on:input="
               valueChanged('subset-padj', [
                 padj_boundary.minValue,
                 padj_boundary.maxValue,
               ])
-            "
-          />
+              " />
           <span class="seperator">-</span>
-          <input
-            type="number"
-            v-bind:min="padj_boundary.min"
-            v-bind:max="padj_boundary.max"
-            v-bind:step="padj_boundary.step"
-            v-model="padj_boundary.maxValue"
-            v-on:change="searchSubset()"
-            v-on:input="
+          <input type="number" v-bind:min="padj_boundary.min" v-bind:max="padj_boundary.max"
+            v-bind:step="padj_boundary.step" v-model="padj_boundary.maxValue" v-on:change="searchSubset()" v-on:input="
               valueChanged('subset-padj', [
                 padj_boundary.minValue,
                 padj_boundary.maxValue,
               ])
-            "
-          />
+              " />
         </div>
       </div>
       <div class="window-label">pagerank value (log10)</div>
       <div class="menu-items">
         <div id="subset-pagerank"></div>
-        <input
-          type="number"
-          v-bind:min="pr_boundary.min"
-          v-bind:max="pr_boundary.max"
-          v-bind:step="pr_boundary.step"
-          v-model="pr_boundary.minValue"
-          v-on:change="searchSubset()"
-          v-on:input="
+        <input type="number" v-bind:min="pr_boundary.min" v-bind:max="pr_boundary.max" v-bind:step="pr_boundary.step"
+          v-model="pr_boundary.minValue" v-on:change="searchSubset()" v-on:input="
             valueChanged('subset-pagerank', [
               pr_boundary.minValue,
               pr_boundary.maxValue,
             ])
-          "
-        />
+            " />
         <span class="seperator">-</span>
-        <input
-          type="number"
-          v-bind:min="pr_boundary.min"
-          v-bind:max="pr_boundary.max"
-          v-bind:step="pr_boundary.step"
-          v-model="pr_boundary.maxValue"
-          v-on:change="searchSubset()"
-          v-on:input="
+        <input type="number" v-bind:min="pr_boundary.min" v-bind:max="pr_boundary.max" v-bind:step="pr_boundary.step"
+          v-model="pr_boundary.maxValue" v-on:change="searchSubset()" v-on:input="
             valueChanged('subset-pagerank', [
               pr_boundary.minValue,
               pr_boundary.maxValue,
             ])
-          "
-        />
+            " />
       </div>
-      <div
-        v-if="dcoloumns && mode != 'term' && mode != 'citation'"
-        class="slider-section-scroll"
-      >
+      <div v-if="dcoloumns && mode != 'term' && mode != 'citation'" class="slider-section-scroll">
         <div v-for="(entry, index) in dcoloumns" :key="index">
           <div class="window-label">{{ entry }}</div>
           <div class="menu-items">
             <div class="checkbox-header">
-              <input
-                type="checkbox"
-                :id="'subset-deval-check-' + index"
-                v-on:change="
-                  change_limits(
-                    'subset-deval-slider-' + index,
-                    'subset-deval-check-' + index,
-                    entry
-                  );
-                  searchSubset();
-                "
-              />
+              <input type="checkbox" :id="'subset-deval-check-' + index" v-on:change="
+                change_limits(
+                  'subset-deval-slider-' + index,
+                  'subset-deval-check-' + index,
+                  entry
+                );
+              searchSubset();
+              " />
               <label for="edgeCheck"> inverse selection</label>
             </div>
             <div class="body-selection">
               <div :id="'subset-deval-slider-' + index"></div>
-              <input
-                type="number"
-                v-bind:min="dboundaries[entry].min"
-                v-bind:max="dboundaries[entry].max"
-                v-bind:step="dboundaries[entry].step"
-                v-model="dboundaries[entry].minValue"
-                v-on:change="searchSubset()"
+              <input type="number" v-bind:min="dboundaries[entry].min" v-bind:max="dboundaries[entry].max"
+                v-bind:step="dboundaries[entry].step" v-model="dboundaries[entry].minValue" v-on:change="searchSubset()"
                 v-on:input="
                   valueChanged('subset-deval-slider-' + index, [
                     dboundaries[entry].minValue,
                     dboundaries[entry].maxValue,
                   ])
-                "
-              />
+                  " />
               <span class="seperator">-</span>
-              <input
-                type="number"
-                v-bind:min="dboundaries[entry].min"
-                v-bind:max="dboundaries[entry].max"
-                v-bind:step="dboundaries[entry].step"
-                v-model="dboundaries[entry].maxValue"
-                v-on:change="searchSubset()"
+              <input type="number" v-bind:min="dboundaries[entry].min" v-bind:max="dboundaries[entry].max"
+                v-bind:step="dboundaries[entry].step" v-model="dboundaries[entry].maxValue" v-on:change="searchSubset()"
                 v-on:input="
                   valueChanged('subset-deval-slider-' + index, [
                     dboundaries[entry].minValue,
                     dboundaries[entry].maxValue,
                   ])
-                "
-              />
+                  " />
             </div>
           </div>
         </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: "SubsetLinks",
@@ -211,45 +238,50 @@ 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 },
       padj_boundary: {
         minValue: 0,
         maxValue: 0,
         min: 0,
-        max: Number,
+        max: 0,
         step: 0.01,
       },
       dcoloumns: this.$store.state.dcoloumns,
       dboundaries: {},
       nodeCheck: false,
-      formatType: null,
       check: {},
     };
   },
   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;
@@ -277,30 +309,30 @@ export default {
         };
       }
     },
-    create_de() {
-      var com = this;
-
-      console.log(com.dcoloumns);
-
-      Object.entries(com.dcoloumns).forEach(([index, coloumn]) => {
-        var slider = document.getElementById("subset-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;
+
+    //   console.log(com.dcoloumns);
+
+    //   Object.entries(com.dcoloumns).forEach(([index, coloumn]) => {
+    //     var slider = document.getElementById("subset-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;
 
@@ -319,25 +351,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("subset-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("subset-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;
@@ -355,25 +389,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("subset-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("subset-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;
@@ -391,26 +427,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("subset-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("subset-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();
+      // });
     },
     initialize_padj() {
       var com = this;
@@ -432,22 +468,24 @@ export default {
 
       com.padj_boundary["maxValue"] = 0;
       com.padj_boundary["minValue"] = minDeg;
-
-      var slider = document.getElementById("subset-padj");
-      noUiSlider.create(slider, {
-        start: [minDeg, 0],
-        connect: true,
-        range: {
-          min: minDeg,
-          max: 0,
-        },
-        step: 0.01,
-      });
-
-      slider.noUiSlider.on("slide", function (values, handle) {
-        com.padj_boundary[handle ? "maxValue" : "minValue"] = values[handle];
-        com.searchSubset();
-      });
+      com.pr_boundary["max"] = 0;
+      com.pr_boundary["min"] = minDeg;
+
+      // var slider = document.getElementById("subset-padj");
+      // noUiSlider.create(slider, {
+      //   start: [minDeg, 0],
+      //   connect: true,
+      //   range: {
+      //     min: minDeg,
+      //     max: 0,
+      //   },
+      //   step: 0.01,
+      // });
+
+      // slider.noUiSlider.on("slide", function (values, handle) {
+      //   com.padj_boundary[handle ? "maxValue" : "minValue"] = values[handle];
+      //   com.searchSubset();
+      // });
     },
     searchSubset() {
       var com = this;
@@ -460,24 +498,24 @@ export default {
       for (var element of dataForm) {
         if (
           parseInt(element.attributes["Degree"]) >=
-            this.degree_boundary.minValue &&
+          this.degree_boundary.minValue &&
           parseInt(element.attributes["Degree"]) <=
-            this.degree_boundary.maxValue &&
+          this.degree_boundary.maxValue &&
           Math.log10(parseFloat(element.attributes["PageRank"])) >=
-            this.pr_boundary.minValue &&
+          this.pr_boundary.minValue &&
           Math.log10(parseFloat(element.attributes["PageRank"])) <=
-            this.pr_boundary.maxValue &&
+          this.pr_boundary.maxValue &&
           parseFloat(element.attributes["Betweenness Centrality"]) >=
-            this.bc_boundary.minValue &&
+          this.bc_boundary.minValue &&
           parseFloat(element.attributes["Betweenness Centrality"]) <=
-            this.bc_boundary.maxValue
+          this.bc_boundary.maxValue
         ) {
           if (com.mode == "term") {
             if (
               Math.log10(parseFloat(element.attributes["FDR"])) >=
-                this.padj_boundary.minValue &&
+              this.padj_boundary.minValue &&
               Math.log10(parseFloat(element.attributes["FDR"])) <=
-                this.padj_boundary.maxValue
+              this.padj_boundary.maxValue
             ) {
               nodes.push(element);
             }
@@ -492,9 +530,9 @@ export default {
               ) {
                 if (
                   parseFloat(element.attributes[coloumn]) <
-                    com.dboundaries[coloumn].minValue ||
+                  com.dboundaries[coloumn].minValue ||
                   parseFloat(element.attributes[coloumn]) >
-                    com.dboundaries[coloumn].maxValue
+                  com.dboundaries[coloumn].maxValue
                 ) {
                   this.nodeCheck = false;
                   break;
@@ -502,9 +540,9 @@ export default {
               } else {
                 if (
                   parseFloat(element.attributes[coloumn]) >
-                    com.dboundaries[coloumn].minValue &&
+                  com.dboundaries[coloumn].minValue &&
                   parseFloat(element.attributes[coloumn]) <
-                    com.dboundaries[coloumn].maxValue
+                  com.dboundaries[coloumn].maxValue
                 ) {
                   this.nodeCheck = false;
                   break;
@@ -523,10 +561,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) =>
@@ -535,31 +589,29 @@ export default {
       return termlist;
     },
     load_data() {
-      console.log("Links");
       this.parameter_data = this.active_subset.selection
         ? this.active_subset.genes
         : this.active_subset;
-
       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);
+    //   },
+    // };
 
-    console.log(this.parameter_data);
+    // console.log(this.parameter_data);
 
     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();
     if (this.mode == "term") this.initialize_padj();
     this.searchSubset();
   },