NN-607 update graph settings dialog components

BackofenLab · Nov 7, 2024 · c51bec4 · c51bec4
1 parent d2eb1f1
commit c51bec4
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 93 deletions.
diff --git a/frontend/src/components/toolbar/modules/ConnectedGraph.vue b/frontend/src/components/toolbar/modules/ConnectedGraph.vue
@@ -1,10 +1,8 @@
 <template>
-  <div class="tool-item">
-    <span>Hide unconnected nodes</span>
-    <input id="switch" v-on:change="show_whole()" type="checkbox" /><label
-      for="switch"
-    ></label>
-  </div>
+  <li class="flex items-center justify-between gap-2 py-2 dark:text-[#c3c3c3]">
+    Hide unconnected nodes
+    <ToggleSwitch class="toggle-xs" @value-change="show_whole" />
+  </li>
 </template>
 
 <script>
@@ -15,18 +13,12 @@ export default {
     return {};
   },
   methods: {
-    show_whole() {
+    show_whole(value) {
       this.emitter.emit("unconnectedGraph", {
-        check: document.getElementById("switch").checked,
+        check: value,
         mode: this.mode,
       });
     },
   },
 };
 </script>
-
-<style>
-#switch {
-  margin-left: 5%;
-}
-</style>
diff --git a/frontend/src/components/toolbar/modules/FDRValue.vue b/frontend/src/components/toolbar/modules/FDRValue.vue
@@ -1,16 +1,9 @@
 <template>
-  <div class="tool-item">
-    <span>Visualize fdr-rate</span>
-    <button
-      v-on:click="
-        activate_fdr(check);
-        check = !check;
-      "
-      id="activate-fdr"
-    >
-      yes
-    </button>
-  </div>
+  <li class="flex items-center justify-between gap-2 py-2 dark:text-[#c3c3c3]">
+    Visualize fdr-rate
+    <Button label="yes" size="small" severity="secondary" @click="activate_fdr(check);
+    check = !check;"></Button>
+  </li>
 </template>
 
 <script>
@@ -28,21 +21,3 @@ export default {
   },
 };
 </script>
-
-<style>
-#activate-fdr {
-  width: 9%;
-  height: 6%;
-  position: absolute;
-  right: 6.3%;
-  margin-top: 0.1vw;
-  background-color: #ddd;
-  cursor: pointer;
-  border: none;
-  border-radius: 5px;
-  color: #0a0a1a;
-  font-family: "ABeeZee", sans-serif;
-  font-size: 0.7vw;
-  text-align: center;
-}
-</style>
diff --git a/frontend/src/components/toolbar/modules/ModuleSelection.vue b/frontend/src/components/toolbar/modules/ModuleSelection.vue
@@ -1,10 +1,8 @@
 <template>
-  <div class="tool-item">
-    <span>Disable module selection</span>
-    <input id="module" v-on:change="check()" type="checkbox" /><label
-      for="module"
-    ></label>
-  </div>
+  <li class="flex items-center justify-between gap-2 py-2 dark:text-[#c3c3c3]">
+    Disable module ModuleSelection
+    <ToggleSwitch class="toggle-xs" @value-change="check" />
+  </li>
 </template>
 
 <script>
@@ -21,5 +19,3 @@ export default {
   },
 };
 </script>
-
-<style></style>
diff --git a/frontend/src/components/toolbar/modules/NodeLabelSelect.vue b/frontend/src/components/toolbar/modules/NodeLabelSelect.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="tool-item">
-    <span>Reset labels</span>
-    <button v-on:click="reset_labels()" id="reset-labels">yes</button>
-  </div>
+  <li class="flex items-center justify-between gap-2 py-2 dark:text-[#c3c3c3]">
+    Reset labels
+    <Button label="yes" size="small" severity="secondary" @click="reset_labels"></Button>
+  </li>
 </template>
 
 <script>
@@ -14,27 +14,8 @@ export default {
   },
   methods: {
     reset_labels() {
-      console.log(this.mode);
       this.emitter.emit("resetSelect", { mode: this.mode });
     },
   },
 };
-</script>
-
-<style>
-#reset-labels {
-  width: 9%;
-  height: 6%;
-  position: absolute;
-  right: 6.3%;
-  margin-top: 0.1vw;
-  background-color: #ddd;
-  cursor: pointer;
-  border: none;
-  border-radius: 5px;
-  color: #0a0a1a;
-  font-family: "ABeeZee", sans-serif;
-  font-size: 0.7vw;
-  text-align: center;
-}
-</style>
+</script>
diff --git a/frontend/src/components/toolbar/modules/ShowModules.vue b/frontend/src/components/toolbar/modules/ShowModules.vue
@@ -1,12 +1,8 @@
 <template>
-  <div class="tool-item">
-    <span>Show all cluster</span>
-    <input
-      id="switch-modules"
-      v-on:change="show_whole()"
-      type="checkbox"
-    /><label for="switch-modules"></label>
-  </div>
+  <li class="flex items-center justify-between gap-2 py-2 dark:text-[#c3c3c3]">
+    Show all cluster
+    <ToggleSwitch class="toggle-xs" @value-change="show_whole" />
+    </li>
 </template>
 
 <script>
@@ -17,18 +13,12 @@ export default {
     return {};
   },
   methods: {
-    show_whole() {
+    show_whole(value) {
       this.emitter.emit("showCluster", {
-        check: document.getElementById("switch-modules").checked,
+        check: value,
         mode: this.mode,
       });
     },
   },
 };
-</script>
-
-<style>
-#switch-modules {
-  margin-left: 5%;
-}
-</style>
+</script>