Skip to content

Commit

Permalink
NN-421 Implement a switch to show all clusters with numbers
Browse files Browse the repository at this point in the history
  • Loading branch information
TripZz committed Dec 18, 2023
1 parent 4916e14 commit a8eea9d
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 8 deletions.
31 changes: 31 additions & 0 deletions frontend/src/components/toolbar/modules/ShowModules.vue
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 6 additions & 1 deletion frontend/src/components/toolbar/windows/MenuWindow.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
<ConnectedGraph
:mode = 'mode'
></ConnectedGraph>
<ShowModules
:mode = 'mode'
></ShowModules>
<ModuleSelection
:mode = 'mode'
></ModuleSelection>
Expand Down Expand Up @@ -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'
Expand All @@ -74,7 +78,8 @@ export default {
ToggleLabel,
ModuleSelection,
FDRValue,
ExportProteins
ExportProteins,
ShowModules
},
data() {
Expand Down
21 changes: 16 additions & 5 deletions frontend/src/components/visualization/MainVis.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -98,7 +98,8 @@ export default {
mousemoveCheck: false,
sigmaFocus: true,
moduleSelectionActive: true,
heatmap: false
heatmap: false,
showCluster: false
}
},
watch: {
Expand Down Expand Up @@ -910,7 +911,6 @@ export default {
},
getCircleStyle(circle){
return {
width: `${(circle.r+10) * 2}px`,
height: `${(circle.r+10) * 2}px`,
Expand All @@ -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)
Expand Down Expand Up @@ -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
});
Expand Down Expand Up @@ -1194,7 +1206,6 @@ color: #fff; /* set the font color to white */
}
.modularity-class {
font-size: 4vw;
color: white;
font-weight:bolder;
opacity: 40%;
Expand Down
18 changes: 16 additions & 2 deletions frontend/src/components/visualization/TermVis.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -58,6 +58,7 @@ export default {
mousemoveCheck: false,
sigmaFocus: true,
moduleSelectionActive: true,
showCluster: false
}
},
watch: {
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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
});
Expand Down

0 comments on commit a8eea9d

Please sign in to comment.