NN-400 Added cluster identification for module selection

- aswell added colortype to heatmaps
BackofenLab · Nov 30, 2023 · bf70b41 · bf70b41
1 parent bdf03f2
commit bf70b41
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 23 deletions.
diff --git a/frontend/src/components/enrichment/heatmap/PathwayHeatmap.vue b/frontend/src/components/enrichment/heatmap/PathwayHeatmap.vue
@@ -5,7 +5,7 @@
             <div class="graph-options" v-show="activeHeatmapIndex == index" >
                 <div class="bookmark-graph" v-on:click.stop="add_graph(entry)" :class="{ checked: favourite_heatmaps.has(entry)}" ref="checkboxStatesHeatmap"></div>
                 <img  class="remove-graph" src="@/assets/pathwaybar/cross.png" v-on:click.stop="remove_graph(entry)">
-                <div class="graph-name">
+                <div class="graph-name colortype">
                     <input type="text" v-model="entry.label" class="empty" @click.stop />
                 </div>
             </div>

diff --git a/frontend/src/components/visualization/MainVis.vue b/frontend/src/components/visualization/MainVis.vue
@@ -8,17 +8,15 @@
             <p> <span id="value"> </span></p>
         </div>
     <div id="sigma-webgl"></div>
-    <div id="sigma-canvas" :class="{'loading': threeview}" 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"
-      :class="{
-        'outside': !isMouseInside(circle.data),
-        'inside': isMouseInside(circle.data) && !unconnectedActive(circle.modularity) && !mousedownrightCheck && !(mousedownleftCheck && mousemoveCheck) && sigmaFocus,
-      }"
-      v-bind:style="getCircleStyle(circle.data)"
-    ></div>
+    <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="inside" v-bind:style="getCircleStyle(circle.data)">
+            <div class="modularity-class">{{ circle.modularity }}</div>
+          </div>
+        </div>
+      </div>
 
       <img class="twoview" v-show="threeview" v-on:click="two_view" src="@/assets/share-2.png" alt="Center Icon">
 
@@ -1194,8 +1192,17 @@ color: #fff; /* set the font color to white */
   border-width: 1px;
   border-color: white;
 }
-.outside {
-  background-color: transparent;
+
+.modularity-class {
+  font-size: 4vw;
+  color: white;
+  font-weight:bolder;
+  opacity: 40%;
+  font-family: 'ABeeZee', sans-serif;
+}
+
+.modules {
+  position: absolute;
 }
 
 </style>

diff --git a/frontend/src/components/visualization/TermVis.vue b/frontend/src/components/visualization/TermVis.vue
@@ -2,15 +2,13 @@
     <div class="visualization">
       <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"
-        :class="{
-          'outside': !isMouseInside(circle.data),
-          'inside': isMouseInside(circle.data) && !unconnectedActive(circle.modularity) && !mousedownrightCheck && !(mousedownleftCheck && mousemoveCheck) && sigmaFocus,
-        }"
-        v-bind:style="getCircleStyle(circle.data)"
-      ></div>
+           <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="inside" v-bind:style="getCircleStyle(circle.data)">
+                <div class="modularity-class">{{ circle.modularity }}</div>
+              </div>
+            </div>
+          </div>
       </div>
     </div>
   </template>