From d253f67919136b90707b8daa2341419a998eb436 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Mon, 22 Dec 2025 02:12:11 -0800
Subject: [PATCH] refactor node help watch source (#7660)

Extract the node help watch source into a computed value.

## What changed
- Move the watch predicate in `NodeHelpPage.vue` into a named
`activeHelpDef` computed and pass it to `whenever`
- Keep behavior identical while making the watch source easier to read
and reference

## Why
- Motivation: a review comment requested separating the predicate from
the watcher for readability and idiomatic usage
- Why this approach: a local computed is the smallest change that
preserves behavior and matches the requested structure
- Tradeoffs / limitations: adds a couple of lines and a computed without
changing runtime behavior

## Evidence
- Tests: Not run (existing unit tests for help sync live in
`tests-ui/tests/components/sidebar/nodeLibrary/NodeHelpPage.test.ts`)

## References
- Review comment:
https://github.com/Comfy-Org/ComfyUI_frontend/pull/7105#discussion_r2636631268
(request to extract the watcher predicate into a computed)
- Related PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/7105
(original help sync change)

---------

Co-authored-by: Christian Byrne <cbyrne@comfy.org>
---
 .../sidebar/tabs/nodeLibrary/NodeHelpPage.vue | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
index 2c12089f1..f457c84e4 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
@@ -21,6 +21,7 @@
 <script setup lang="ts">
 import { whenever } from '@vueuse/core'
 import Button from 'primevue/button'
+import { computed } from 'vue'
 
 import NodeHelpContent from '@/components/node/NodeHelpContent.vue'
 import { useSelectionState } from '@/composables/graph/useSelectionState'
@@ -36,14 +37,14 @@ defineEmits<{
 const nodeHelpStore = useNodeHelpStore()
 const { nodeDef } = useSelectionState()
 
-// Keep the open help page synced with the current selection while help is open.
-whenever(
-  () => (nodeHelpStore.isHelpOpen ? nodeDef.value : null),
-  (def) => {
-    if (!def) return
-    const currentHelpNode = nodeHelpStore.currentHelpNode
-    if (currentHelpNode?.nodePath === def.nodePath) return
-    nodeHelpStore.openHelp(def)
-  }
+const activeHelpDef = computed(() =>
+  nodeHelpStore.isHelpOpen ? nodeDef.value : null
 )
+
+// Keep the open help page synced with the current selection while help is open.
+whenever(activeHelpDef, (def) => {
+  const currentHelpNode = nodeHelpStore.currentHelpNode
+  if (currentHelpNode?.nodePath === def.nodePath) return
+  nodeHelpStore.openHelp(def)
+})
 </script>