feat(ui): add toggle button for hover highlight effect

- Add ✨ button in workspace row to enable/disable hover effects at runtime
- Auto-disable hover for large networks (>200 nodes or >500 edges)
- Sync button state on data load to reflect auto-disabled state
- Lasso toggle respects the hover setting without additional changes

Author: Mnikley

src/config.js

@@ -182,7 +182,8 @@ const CFG = {
   HIDE_LABELS: false,
 
 // if network is greater than defined threshold, hover effects are disabled
-  MAX_NODES_BEFORE_DISABLING_HOVER_EFFECT: 300,
+  MAX_NODES_BEFORE_DISABLING_HOVER_EFFECT: 200,
+  MAX_EDGES_BEFORE_DISABLING_HOVER_EFFECT: 500,
   DISABLE_HOVER_EFFECT: false,
 
 // if network is greater than defined threshold, bubble groups may span across non-bubble group members

src/graph_lens_lite.html

@@ -113,6 +113,7 @@ <h3 id="appHeader" class="disabled-header" onclick="cache.ui.reloadApp()">
           <div class="button-separator"></div>
           <button class="small-btn" title="Fit graph to screen (F)" onclick="cache.gcm.fitViewToVisibleNodes()">⛶</button>
           <button id="hideDisconnectedBtn" class="small-btn red" title="Hide all nodes and edges that are not connected to any other node or edge" onclick="cache.gcm.toggleCleanUpDanglingElements(this)">🚫</button>
+          <button id="hoverToggleBtn" class="small-btn green highlight" title="Disable hover highlight effect" onclick="cache.ui.toggleHoverEffect(this)">✨</button>
           <div id="debugDiv" class="inline"></div>
           <br>
           <h5 class="purple">Shown:

src/managers/io.js

@@ -1145,7 +1145,9 @@ class IOManager {
       fileData.nodes.length > this.cache.CFG.MAX_NODES_BEFORE_HIDING_LABELS;
     this.cache.CFG.DISABLE_HOVER_EFFECT =
       fileData.nodes.length >
-      this.cache.CFG.MAX_NODES_BEFORE_DISABLING_HOVER_EFFECT;
+      this.cache.CFG.MAX_NODES_BEFORE_DISABLING_HOVER_EFFECT ||
+      fileData.edges.length >
+      this.cache.CFG.MAX_EDGES_BEFORE_DISABLING_HOVER_EFFECT;
     this.cache.CFG.AVOID_MEMBERS_IN_BUBBLE_GROUPS =
       fileData.nodes.length >
       this.cache.CFG.MAX_NODES_BEFORE_DISABLING_AVOID_MEMBERS_IN_BUBBLE_GROUPS;
@@ -1703,6 +1705,7 @@ class IOManager {
         }
 
         this.cache.io.preProcessData(fileData);
+        this.cache.ui.updateHoverToggleButton();
         this.cache.buildDataTable(fileData);
         this.cache.ui.buildUI();
 

src/managers/ui.js

@@ -472,6 +472,44 @@ class UIManager {
     await this.cache.graph.updatePlugin({key: 'tooltip', enable: lassoIsActive});
   }
 
+  async toggleHoverEffect(btn) {
+    const isCurrentlyEnabled = !this.cache.CFG.DISABLE_HOVER_EFFECT;
+
+    if (isCurrentlyEnabled) {
+      this.cache.CFG.DISABLE_HOVER_EFFECT = true;
+      btn.classList.remove("green", "highlight");
+      btn.classList.add("red");
+      btn.title = "Enable hover highlight effect";
+      const behaviors = await this.cache.graph.getBehaviors();
+      const filtered = behaviors.filter(b => b.type !== this.cache.gcm.BEHAVIOURS.HOVER_ACTIVATE.type);
+      await this.cache.graph.setBehaviors(filtered);
+      this.info("Hover highlight effect disabled");
+    } else {
+      this.cache.CFG.DISABLE_HOVER_EFFECT = false;
+      btn.classList.remove("red");
+      btn.classList.add("green", "highlight");
+      btn.title = "Disable hover highlight effect";
+      const behaviors = await this.cache.graph.getBehaviors();
+      behaviors.push(this.cache.gcm.BEHAVIOURS.HOVER_ACTIVATE);
+      await this.cache.graph.setBehaviors(behaviors);
+      this.info("Hover highlight effect enabled");
+    }
+  }
+
+  updateHoverToggleButton() {
+    const btn = document.getElementById("hoverToggleBtn");
+    if (!btn) return;
+    if (this.cache.CFG.DISABLE_HOVER_EFFECT) {
+      btn.classList.remove("green", "highlight");
+      btn.classList.add("red");
+      btn.title = "Enable hover highlight effect";
+    } else {
+      btn.classList.remove("red");
+      btn.classList.add("green", "highlight");
+      btn.title = "Disable hover highlight effect";
+    }
+  }
+
   handleEditModeUIChanges() {
     const editBtn = document.getElementById("editBtn");
     if (!editBtn) return;