From 6535138e0b74decb1e31a0fa49ec73c0916a78b9 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Sat, 7 Feb 2026 15:30:20 -0800
Subject: [PATCH] fix(vue-nodes): hide slot labels for reroute nodes with empty
 names (#8574)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary
Fixes reroute node styling in Vue Nodes 2.0 by hiding slot labels when
slot names are intentionally empty.


| Before | After |
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
---------------------------------------------------------------------------------------------------------------------------------------------
|
| <img width="1437" height="473" alt="image"
src="https://github.com/user-attachments/assets/603f52e0-7b75-4822-8c91-0a8374cc0cb6"
/> | <img width="1350" height="493" alt="image"
src="https://github.com/user-attachments/assets/38168955-4d35-4c61-a685-a54efb44cd5d"
/> |


## Problem
Reroute nodes displayed unwanted fallback labels ("Input 0", "Output 0")
instead of appearing as minimal connection-only nodes. This happened
because:
- Reroute nodes intentionally use empty string (`""`) for slot names
- Slot components used `||` operator for fallback labels, treating `''`
as falsy

## Solution
- Add `hasNoLabel` computed property to detect when all label sources
(`label`, `localized_name`, `name`) are empty/falsy
- Derive `dotOnly` from either the existing prop OR `hasNoLabel` being
true
- When `dotOnly` is true: label text is hidden, padding removed
(`lg-slot--dot-only` class), only connection dot visible

Combined with existing `NO_TITLE` support from #7589, reroutes now
display as minimal nodes with just connection dots—matching classic
reroute appearance.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **Bug Fixes**
* Enhanced input and output slot label handling to automatically conceal
labels when unavailable
* Improved fallback display names for slots with more reliable naming
logic

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8574-fix-vue-nodes-hide-slot-labels-for-reroute-nodes-with-empty-names-2fc6d73d365081c38031e260402283d3)
by [Unito](https://www.unito.io)
---
 .../extensions/vueNodes/components/InputSlot.vue  | 15 +++++++++++----
 .../extensions/vueNodes/components/OutputSlot.vue | 14 +++++++++++---
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/InputSlot.vue b/src/renderer/extensions/vueNodes/components/InputSlot.vue
index 61c4dd35a8..ba8ae57b1d 100644
--- a/src/renderer/extensions/vueNodes/components/InputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/InputSlot.vue
@@ -7,7 +7,7 @@
       cn(
         'lg-slot lg-slot--input flex items-center group rounded-r-lg m-0',
         'cursor-crosshair',
-        props.dotOnly ? 'lg-slot--dot-only' : 'pr-6',
+        dotOnly ? 'lg-slot--dot-only' : 'pr-6',
         {
           'lg-slot--connected': props.connected,
           'lg-slot--compatible': props.compatible,
@@ -36,7 +36,7 @@
     <!-- Slot Name -->
     <div class="h-full flex items-center min-w-0">
       <span
-        v-if="!dotOnly"
+        v-if="!props.dotOnly && !hasNoLabel"
         :class="
           cn(
             'truncate text-node-component-slot-text',
@@ -47,8 +47,7 @@
         {{
           slotData.label ||
           slotData.localized_name ||
-          slotData.name ||
-          `Input ${index}`
+          (slotData.name ?? `Input ${index}`)
         }}
       </span>
     </div>
@@ -84,6 +83,14 @@ interface InputSlotProps {
 
 const props = defineProps<InputSlotProps>()
 
+const hasNoLabel = computed(
+  () =>
+    !props.slotData.label &&
+    !props.slotData.localized_name &&
+    props.slotData.name === ''
+)
+const dotOnly = computed(() => props.dotOnly || hasNoLabel.value)
+
 const executionStore = useExecutionStore()
 
 const hasSlotError = computed(() => {
diff --git a/src/renderer/extensions/vueNodes/components/OutputSlot.vue b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
index 9a7506130f..f9dfeca022 100644
--- a/src/renderer/extensions/vueNodes/components/OutputSlot.vue
+++ b/src/renderer/extensions/vueNodes/components/OutputSlot.vue
@@ -3,8 +3,11 @@
   <div v-else v-tooltip.right="tooltipConfig" :class="slotWrapperClass">
     <div class="relative h-full flex items-center min-w-0">
       <!-- Slot Name -->
-      <span v-if="!dotOnly" class="truncate text-node-component-slot-text">
-        {{ slotData.localized_name || slotData.name || `Output ${index}` }}
+      <span
+        v-if="!props.dotOnly && !hasNoLabel"
+        class="truncate text-node-component-slot-text"
+      >
+        {{ slotData.localized_name || (slotData.name ?? `Output ${index}`) }}
       </span>
     </div>
     <!-- Connection Dot -->
@@ -44,6 +47,11 @@ interface OutputSlotProps {
 
 const props = defineProps<OutputSlotProps>()
 
+const hasNoLabel = computed(
+  () => !props.slotData.localized_name && props.slotData.name === ''
+)
+const dotOnly = computed(() => props.dotOnly || hasNoLabel.value)
+
 // Error boundary implementation
 const renderError = ref<string | null>(null)
 
@@ -79,7 +87,7 @@ const slotWrapperClass = computed(() =>
   cn(
     'lg-slot lg-slot--output flex items-center justify-end group rounded-l-lg h-6',
     'cursor-crosshair',
-    props.dotOnly ? 'lg-slot--dot-only justify-center' : 'pl-6',
+    dotOnly.value ? 'lg-slot--dot-only justify-center' : 'pl-6',
     {
       'lg-slot--connected': props.connected,
       'lg-slot--compatible': props.compatible,