From c7b5f4705579feefef28cfaf8f938aad504bd324 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Tue, 20 Jan 2026 22:02:16 -0800
Subject: [PATCH] feat(canvas): hide widgets marked advanced unless
 node.showAdvanced is true (#8147)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hides widgets marked with `options.advanced = true` on the Vue Node
canvas unless `node.showAdvanced` is true.

## Changes
- Updates `NodeWidgets.vue` template to check `widget.options.advanced`
combined with `nodeData.showAdvanced`
- Updates `gridTemplateRows` computed to exclude hidden advanced widgets
- Adds `showAdvanced` to `VueNodeData` interface in
`useGraphNodeManager.ts`

## Related
- Backend PR that adds `advanced` flag: comfyanonymous/ComfyUI#11939
- Toggle button PR: feat/advanced-widgets-toggle-button

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8147-feat-canvas-hide-widgets-marked-advanced-unless-node-showAdvanced-is-true-2ec6d73d36508179931ce78a6ffd6b0a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
---
 src/composables/graph/useGraphNodeManager.ts         | 11 ++++++++++-
 src/lib/litegraph/src/LGraphNodeProperties.ts        |  4 +++-
 .../extensions/vueNodes/components/NodeWidgets.vue   | 12 ++++++++++--
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts
index db9173058..33822d1c5 100644
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/src/composables/graph/useGraphNodeManager.ts
@@ -77,6 +77,7 @@ export interface VueNodeData {
   outputs?: INodeOutputSlot[]
   resizable?: boolean
   shape?: number
+  showAdvanced?: boolean
   subgraphId?: string | null
   titleMode?: TitleMode
   widgets?: SafeWidgetData[]
@@ -314,7 +315,8 @@ export function extractVueNodeData(node: LGraphNode): VueNodeData {
     color: node.color || undefined,
     bgcolor: node.bgcolor || undefined,
     resizable: node.resizable,
-    shape: node.shape
+    shape: node.shape,
+    showAdvanced: node.showAdvanced
   }
 }
 
@@ -568,6 +570,13 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
                     ? propertyEvent.newValue
                     : undefined
               })
+              break
+            case 'showAdvanced':
+              vueNodeData.set(nodeId, {
+                ...currentData,
+                showAdvanced: Boolean(propertyEvent.newValue)
+              })
+              break
           }
         }
       },
diff --git a/src/lib/litegraph/src/LGraphNodeProperties.ts b/src/lib/litegraph/src/LGraphNodeProperties.ts
index ae51d3739..9df938298 100644
--- a/src/lib/litegraph/src/LGraphNodeProperties.ts
+++ b/src/lib/litegraph/src/LGraphNodeProperties.ts
@@ -13,7 +13,9 @@ const DEFAULT_TRACKED_PROPERTIES: string[] = [
   'flags.pinned',
   'mode',
   'color',
-  'bgcolor'
+  'bgcolor',
+  'shape',
+  'showAdvanced'
 ]
 /**
  * Manages node properties with optional change tracking and instrumentation.
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 9975ec864..ff47510e6 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -25,7 +25,10 @@
       :key="`widget-${index}-${widget.name}`"
     >
       <div
-        v-if="!widget.simplified.options?.hidden"
+        v-if="
+          !widget.simplified.options?.hidden &&
+          (!widget.simplified.options?.advanced || nodeData?.showAdvanced)
+        "
         class="lg-node-widget group col-span-full grid grid-cols-subgrid items-stretch"
       >
         <!-- Widget Input Slot Dot -->
@@ -206,7 +209,12 @@ const gridTemplateRows = computed((): string => {
   if (!nodeData?.widgets) return ''
   const processedNames = new Set(toValue(processedWidgets).map((w) => w.name))
   return nodeData.widgets
-    .filter((w) => processedNames.has(w.name) && !w.options?.hidden)
+    .filter(
+      (w) =>
+        processedNames.has(w.name) &&
+        !w.options?.hidden &&
+        (!w.options?.advanced || nodeData?.showAdvanced)
+    )
     .map((w) =>
       shouldExpand(w.type) || w.hasLayoutSize ? 'auto' : 'min-content'
     )