fix minimap not re-rendering when Vue nodes change mode (bypass, mute) (#6110)

## Summary

Fixes minimap not updating when node bypass/mute state changes in vue
nodes mode by adding `onTrigger` tracking of relevant instrumented
properties.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6110-fix-minimap-not-re-rendering-when-Vue-nodes-change-mode-bypass-mute-28f6d73d36508112bab1ce031705c6a9)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts

@@ -15,11 +15,14 @@ test.describe('Vue Node Bypass', () => {
   test('should allow toggling bypass on a selected node with hotkey', async ({
     comfyPage
   }) => {
+    await comfyPage.setup()
     await comfyPage.page.getByText('Load Checkpoint').click()
     await comfyPage.page.keyboard.press(BYPASS_HOTKEY)
 
     const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
     await expect(checkpointNode).toHaveClass(BYPASS_CLASS)
+    await comfyPage.page.mouse.click(400, 300)
+    await comfyPage.page.waitForTimeout(128)
     await expect(comfyPage.canvas).toHaveScreenshot(
       'vue-node-bypassed-state.png'
     )

src/renderer/extensions/minimap/composables/useMinimapGraph.ts

@@ -2,7 +2,11 @@ import { useThrottleFn } from '@vueuse/core'
 import { ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
-import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type {
+  LGraph,
+  LGraphNode,
+  LGraphTriggerEvent
+} from '@/lib/litegraph/src/litegraph'
 import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { api } from '@/scripts/api'
@@ -14,6 +18,7 @@ interface GraphCallbacks {
   onNodeAdded?: (node: LGraphNode) => void
   onNodeRemoved?: (node: LGraphNode) => void
   onConnectionChange?: (node: LGraphNode) => void
+  onTrigger?: (event: LGraphTriggerEvent) => void
 }
 
 export function useMinimapGraph(
@@ -53,7 +58,8 @@ export function useMinimapGraph(
     const originalCallbacks: GraphCallbacks = {
       onNodeAdded: g.onNodeAdded,
       onNodeRemoved: g.onNodeRemoved,
-      onConnectionChange: g.onConnectionChange
+      onConnectionChange: g.onConnectionChange,
+      onTrigger: g.onTrigger
     }
     originalCallbacksMap.set(g.id, originalCallbacks)
 
@@ -72,6 +78,22 @@ export function useMinimapGraph(
       originalCallbacks.onConnectionChange?.call(this, node)
       void handleGraphChangedThrottled()
     }
+
+    g.onTrigger = function (event: LGraphTriggerEvent) {
+      originalCallbacks.onTrigger?.call(this, event)
+
+      // Listen for visual property changes that affect minimap rendering
+      if (
+        event.type === 'node:property:changed' &&
+        (event.property === 'mode' ||
+          event.property === 'bgcolor' ||
+          event.property === 'color')
+      ) {
+        // Invalidate cache for this node to force redraw
+        nodeStatesCache.delete(String(event.nodeId))
+        void handleGraphChangedThrottled()
+      }
+    }
   }
 
   const cleanupEventListeners = (oldGraph?: LGraph) => {
@@ -89,6 +111,7 @@ export function useMinimapGraph(
     g.onNodeAdded = originalCallbacks.onNodeAdded
     g.onNodeRemoved = originalCallbacks.onNodeRemoved
     g.onConnectionChange = originalCallbacks.onConnectionChange
+    g.onTrigger = originalCallbacks.onTrigger
 
     originalCallbacksMap.delete(g.id)
   }