From dd58b272b8a7b21f63c269cc0d42965bb6837f76 Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Mon, 22 Sep 2025 14:45:05 -0500
Subject: [PATCH] Conditionally display show recommended

Also use a slightly nicer button as placeholder
---
 src/components/selectionbar/SubgraphNode.vue | 23 ++++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/selectionbar/SubgraphNode.vue b/src/components/selectionbar/SubgraphNode.vue
index c23b0488f..62d0f31ca 100644
--- a/src/components/selectionbar/SubgraphNode.vue
+++ b/src/components/selectionbar/SubgraphNode.vue
@@ -150,16 +150,23 @@ const recommendedNodes = [
   'PreviewImage'
 ]
 const recommendedWidgetNames = ['seed']
-function showRecommended() {
+const recommendedWidgets = computed(() => {
   const node = activeNode.value
-  if (!node) return //Not reachable
-  const recommendedWidgets = filteredCandidates.value.filter(
+  if (!node) return [] //Not reachable
+  return filteredCandidates.value.filter(
     ([node, widget]: WidgetItem) =>
       recommendedNodes.includes(node.type) ||
       recommendedWidgetNames.includes(widget.name)
   )
+})
+function showRecommended() {
+  const node = activeNode.value
+  if (!node) return //Not reachable
   node.properties.proxyWidgets = JSON.stringify(
-    recommendedWidgets.map(([node, widget]) => [`${node.id}`, widget.name])
+    recommendedWidgets.value.map(([node, widget]) => [
+      `${node.id}`,
+      widget.name
+    ])
   )
   triggerUpdate.value++
   //TODO: Add sort step here
@@ -249,9 +256,11 @@ const filteredActive = computed<WidgetItem[]>(() => {
           />
         </div>
       </div>
-      <a @click.stop="showRecommended">
-        {{ t('subgraphStore.showRecommended') }}</a
-      >
+      <div v-if="recommendedWidgets.length" class="justify-center flex py-4">
+        <Button size="small" @click.stop="showRecommended">
+          {{ t('subgraphStore.showRecommended') }}
+        </Button>
+      </div>
     </template>
   </SidebarTabTemplate>
 </template>