From a8eea9d49d665cc22048726760840b6a46b44d65 Mon Sep 17 00:00:00 2001
From: TripZz <nico.greiner9@gmail.com>
Date: Mon, 18 Dec 2023 13:00:17 +0100
Subject: [PATCH] NN-421 Implement a switch to show all clusters with numbers

---
 .../toolbar/modules/ShowModules.vue           | 31 +++++++++++++++++++
 .../components/toolbar/windows/MenuWindow.vue |  7 ++++-
 .../src/components/visualization/MainVis.vue  | 21 ++++++++++---
 .../src/components/visualization/TermVis.vue  | 18 +++++++++--
 4 files changed, 69 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/toolbar/modules/ShowModules.vue

diff --git a/frontend/src/components/toolbar/modules/ShowModules.vue b/frontend/src/components/toolbar/modules/ShowModules.vue
new file mode 100644
index 00000000..9f006dae
--- /dev/null
+++ b/frontend/src/components/toolbar/modules/ShowModules.vue
@@ -0,0 +1,31 @@
+<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>
+</template>
+
+<script>
+
+export default {
+    name: 'ShowModules',
+    props: ['mode'],
+    data() {
+        return {
+        }
+    },
+    methods: {
+        show_whole() {
+          this.emitter.emit("showCluster", {check: document.getElementById('switch-modules').checked,mode: this.mode});
+                
+        }
+    }
+}
+</script>
+
+
+<style>
+#switch-modules {
+  margin-left: 5%;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/toolbar/windows/MenuWindow.vue b/frontend/src/components/toolbar/windows/MenuWindow.vue
index d86c7359..a36ba806 100644
--- a/frontend/src/components/toolbar/windows/MenuWindow.vue
+++ b/frontend/src/components/toolbar/windows/MenuWindow.vue
@@ -10,6 +10,9 @@
                 <ConnectedGraph
                 :mode = 'mode'
                 ></ConnectedGraph>
+                <ShowModules
+                :mode = 'mode'
+                ></ShowModules>
                 <ModuleSelection
                 :mode = 'mode'
                 ></ModuleSelection>
@@ -56,6 +59,7 @@ import FDRValue from '@/components/toolbar/modules/FDRValue.vue'
 import ExportGraph from '@/components/toolbar/modules/ExportGraph.vue'
 import NodeLabelSelect from '@/components/toolbar/modules/NodeLabelSelect.vue'
 import ConnectedGraph from '@/components/toolbar/modules/ConnectedGraph.vue'
+import ShowModules from '@/components/toolbar/modules/ShowModules.vue'
 import ToggleLabel from '@/components/toolbar/modules/ToggleLabel.vue'
 import EdgeOpacity from '@/components/toolbar/modules/EdgeOpacity.vue'
 import ModuleSelection from '@/components/toolbar/modules/ModuleSelection.vue'
@@ -74,7 +78,8 @@ export default {
         ToggleLabel,
         ModuleSelection,
         FDRValue,
-        ExportProteins
+        ExportProteins,
+        ShowModules
 
     },
     data() {
diff --git a/frontend/src/components/visualization/MainVis.vue b/frontend/src/components/visualization/MainVis.vue
index 247c53cf..8264dd35 100644
--- a/frontend/src/components/visualization/MainVis.vue
+++ b/frontend/src/components/visualization/MainVis.vue
@@ -11,9 +11,9 @@
     <div id="sigma-canvas" :class="{'loading': threeview, 'split': heatmap }" class="sigma-parent" ref="sigmaContainer" 
          @contextmenu.prevent="handleSigmaContextMenu" @mouseleave="sigmaFocus = false" @mouseenter="sigmaFocus = true">
       <div v-show="moduleSelectionActive === true" v-for="(circle, index) in moduleSet" :key="index">
-        <div class="modules" v-if="isMouseInside(circle.data) && !unconnectedActive(circle.modularity) && !mousedownrightCheck && !(mousedownleftCheck && mousemoveCheck) && sigmaFocus">
+        <div class="modules" v-if="(isMouseInside(circle.data) && !unconnectedActive(circle.modularity) && !mousedownrightCheck && !(mousedownleftCheck && mousemoveCheck) && sigmaFocus) || showCluster">
           <div class="inside" v-bind:style="getCircleStyle(circle.data)">
-            <div class="modularity-class">{{ circle.modularity }}</div>
+            <div class="modularity-class" v-bind:style="getTextStyle(circle.data)" >{{ circle.modularity }}</div>
           </div>
         </div>
       </div>
@@ -98,7 +98,8 @@ export default {
       mousemoveCheck: false,
       sigmaFocus: true,
       moduleSelectionActive: true,
-      heatmap: false
+      heatmap: false,
+      showCluster: false
     }
   },
   watch: {
@@ -910,7 +911,6 @@ export default {
 
   },
   getCircleStyle(circle){
-
     return {
         width: `${(circle.r+10) * 2}px`,
         height: `${(circle.r+10) * 2}px`,
@@ -920,6 +920,15 @@ export default {
         top: `${circle.y - (circle.r+10)}px`,
       };
   },
+
+  getTextStyle(circle){
+    return {
+        "font-size": `${(circle.r+10)}px`,
+        position: "absolute", // Position absolute to control x and y coordinates
+        left: `${(circle.r)}px`,
+        top: `${(circle.r)}px`,
+      };
+  },
     isMouseInside(circle) {
       const distance = Math.sqrt(
         Math.pow(circle.x - this.mouseX, 2) + Math.pow(circle.y - this.mouseY, 2)
@@ -1089,6 +1098,9 @@ export default {
     this.emitter.on("selectDE", (value) => {
       this.highlight_de(value)
     });
+    this.emitter.on("showCluster", (state) => {
+      if(state.mode=="protein")  this.showCluster = state.check
+    });
     this.emitter.on("deactivateModules", (state) => {
       if(state.mode=="protein") com.moduleSelectionActive = !com.moduleSelectionActive
     });
@@ -1194,7 +1206,6 @@ color: #fff; /* set the font color to white */
 }
 
 .modularity-class {
-  font-size: 4vw;
   color: white;
   font-weight:bolder;
   opacity: 40%;
diff --git a/frontend/src/components/visualization/TermVis.vue b/frontend/src/components/visualization/TermVis.vue
index 4a118566..c208f748 100644
--- a/frontend/src/components/visualization/TermVis.vue
+++ b/frontend/src/components/visualization/TermVis.vue
@@ -3,9 +3,9 @@
       <div id="sigma-canvas" class="sigma-parent" ref="sigmaContainer" 
            @contextmenu.prevent="handleSigmaContextMenu" @mouseleave="sigmaFocus = false" @mouseenter="sigmaFocus = true">
            <div v-show="moduleSelectionActive === true" v-for="(circle, index) in moduleSet" :key="index">
-            <div class="modules" v-if="isMouseInside(circle.data) && !unconnectedActive(circle.modularity) && !mousedownrightCheck && !(mousedownleftCheck && mousemoveCheck) && sigmaFocus">
+            <div class="modules" v-if="(isMouseInside(circle.data) && !unconnectedActive(circle.modularity) && !mousedownrightCheck && !(mousedownleftCheck && mousemoveCheck) && sigmaFocus) || showCluster ">
               <div class="inside" v-bind:style="getCircleStyle(circle.data)">
-                <div class="modularity-class">{{ circle.modularity }}</div>
+                <div class="modularity-class" v-bind:style="getTextStyle(circle.data)" >{{ circle.modularity }}</div>
               </div>
             </div>
           </div>
@@ -58,6 +58,7 @@ export default {
       mousemoveCheck: false,
       sigmaFocus: true,
       moduleSelectionActive: true,
+      showCluster: false
     }
   },
   watch: {
@@ -531,6 +532,15 @@ getCircleStyle(circle){
       top: `${circle.y - (circle.r+10)}px`,
     };
 },
+  getTextStyle(circle){
+    return {
+        "font-size": `${(circle.r+10)}px`,
+        position: "absolute", // Position absolute to control x and y coordinates
+        left: `${(circle.r)}px`,
+        top: `${(circle.r)}px`,
+      };
+  },
+
   isMouseInside(circle) {
     const distance = Math.sqrt(
       Math.pow(circle.x - this.mouseX, 2) + Math.pow(circle.y - this.mouseY, 2)
@@ -673,6 +683,10 @@ getCircleStyle(circle){
       if(state.mode=="term") this.hide_labels(state.check)
     });
 
+    this.emitter.on("showCluster", (state) => {
+      if(state.mode=="term")  this.showCluster = state.check
+    });
+
     this.emitter.on("deactivateModules", (state) => {
       if(state.mode=="term") com.moduleSelectionActive = !com.moduleSelectionActive
     });