feat(WidgetSelectDropdown): support mapped display names (#6602)

## Summary

Add the ability for `WidgetSelectDropdown` to leverage `getOptionLabel`
for custom display labels.

## Review Focus

Will note inline.

## Screenshots


https://github.com/user-attachments/assets/0167cc12-e23d-4b6d-8f7f-74fd97a18397

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6602-feat-WidgetSelectDropdown-support-mapped-display-names-2a26d73d365081709c56c846e3455339)
by [Unito](https://www.unito.io)

src/composables/node/useNodeImage.ts

@@ -168,6 +168,7 @@ export const useNodeVideo = (node: LGraphNode, callback?: () => void) => {
     const hasWidget = node.widgets?.some((w) => w.name === VIDEO_WIDGET_NAME)
     if (!hasWidget) {
       const widget = node.addDOMWidget(VIDEO_WIDGET_NAME, 'video', container, {
+        canvasOnly: true,
         hideOnZoom: false
       })
       widget.serialize = false

src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue

@@ -67,6 +67,23 @@ const filterOptions = ref<FilterOption[]>([
 ])
 
 const selectedSet = ref<Set<SelectedKey>>(new Set())
+
+/**
+ * Transforms a value using getOptionLabel if available.
+ * Falls back to the original value if getOptionLabel is not provided or throws an error.
+ */
+function getDisplayLabel(value: string): string {
+  const getOptionLabel = props.widget.options?.getOptionLabel
+  if (!getOptionLabel) return value
+
+  try {
+    return getOptionLabel(value)
+  } catch (e) {
+    console.error('Failed to map value:', e)
+    return value
+  }
+}
+
 const inputItems = computed<DropdownItem[]>(() => {
   const values = props.widget.options?.values || []
 
@@ -78,6 +95,7 @@ const inputItems = computed<DropdownItem[]>(() => {
     id: `input-${index}`,
     mediaSrc: getMediaUrl(value, 'input'),
     name: value,
+    label: getDisplayLabel(value),
     metadata: ''
   }))
 })
@@ -108,6 +126,7 @@ const outputItems = computed<DropdownItem[]>(() => {
     id: `output-${index}`,
     mediaSrc: getMediaUrl(output.replace(' [output]', ''), 'output'),
     name: output,
+    label: getDisplayLabel(output),
     metadata: ''
   }))
 })

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue

@@ -77,7 +77,7 @@ const theButtonStyle = computed(() =>
           {{ props.placeholder }}
         </span>
         <span v-else class="line-clamp-1 min-w-0 break-all">
-          {{ selectedItems.map((item) => (item as any)?.name).join(', ') }}
+          {{ selectedItems.map((item) => item.label ?? item.name).join(', ') }}
         </span>
       </span>
       <i class="icon-[lucide--chevron-down]" :class="chevronClass" />

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue

@@ -86,6 +86,7 @@ const searchQuery = defineModel<string>('searchQuery')
           :selected="isSelected(item, index)"
           :media-src="item.mediaSrc"
           :name="item.name"
+          :label="item.label"
           :metadata="item.metadata"
           :layout="layoutMode"
           @click="emit('item-click', item, index)"

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue

@@ -12,6 +12,7 @@ interface Props {
   selected: boolean
   mediaSrc: string
   name: string
+  label?: string
   metadata?: string
   layout?: LayoutMode
 }
@@ -139,7 +140,7 @@ function handleVideoLoad(event: Event) {
           )
         "
       >
-        {{ name }}
+        {{ label ?? name }}
       </span>
       <!-- Meta Data -->
       <span class="block text-xs text-slate-400">{{

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/types.ts

@@ -9,6 +9,7 @@ export interface DropdownItem {
   id: SelectedKey
   mediaSrc: string // URL for image, video, or other media
   name: string
+  label?: string
   metadata: string
 }
 export interface SortOption {

tests-ui/tests/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts

@@ -0,0 +1,174 @@
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import type { VueWrapper } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import type { ComponentPublicInstance } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+
+import type { ComboInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
+import type { DropdownItem } from '@/renderer/extensions/vueNodes/widgets/components/form/dropdown/types'
+import type { SimplifiedWidget } from '@/types/simplifiedWidget'
+
+import WidgetSelectDropdown from '@/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue'
+
+interface WidgetSelectDropdownInstance extends ComponentPublicInstance {
+  inputItems: DropdownItem[]
+  outputItems: DropdownItem[]
+  updateSelectedItems: (selectedSet: Set<string>) => void
+}
+
+describe('WidgetSelectDropdown custom label mapping', () => {
+  const createMockWidget = (
+    value: string = 'img_001.png',
+    options: {
+      values?: string[]
+      getOptionLabel?: (value: string | null) => string
+    } = {},
+    spec?: ComboInputSpec
+  ): SimplifiedWidget<string | number | undefined> => ({
+    name: 'test_image_select',
+    type: 'combo',
+    value,
+    options: {
+      values: ['img_001.png', 'photo_abc.jpg', 'hash789.png'],
+      ...options
+    },
+    spec
+  })
+
+  const mountComponent = (
+    widget: SimplifiedWidget<string | number | undefined>,
+    modelValue: string | number | undefined,
+    assetKind: 'image' | 'video' | 'audio' = 'image'
+  ): VueWrapper<WidgetSelectDropdownInstance> => {
+    return mount(WidgetSelectDropdown, {
+      props: {
+        widget,
+        modelValue,
+        assetKind,
+        allowUpload: true,
+        uploadFolder: 'input'
+      },
+      global: {
+        plugins: [PrimeVue, createTestingPinia()]
+      }
+    }) as unknown as VueWrapper<WidgetSelectDropdownInstance>
+  }
+
+  describe('when custom labels are not provided', () => {
+    it('uses values as labels when no mapping provided', () => {
+      const widget = createMockWidget('img_001.png')
+      const wrapper = mountComponent(widget, 'img_001.png')
+
+      const inputItems = wrapper.vm.inputItems
+      expect(inputItems).toHaveLength(3)
+      expect(inputItems[0].name).toBe('img_001.png')
+      expect(inputItems[0].label).toBe('img_001.png')
+      expect(inputItems[1].name).toBe('photo_abc.jpg')
+      expect(inputItems[1].label).toBe('photo_abc.jpg')
+      expect(inputItems[2].name).toBe('hash789.png')
+      expect(inputItems[2].label).toBe('hash789.png')
+    })
+  })
+
+  describe('when custom labels are provided via getOptionLabel', () => {
+    it('displays custom labels while preserving original values', () => {
+      const getOptionLabel = vi.fn((value: string | null) => {
+        if (!value) return 'No file'
+        const mapping: Record<string, string> = {
+          'img_001.png': 'Vacation Photo',
+          'photo_abc.jpg': 'Family Portrait',
+          'hash789.png': 'Sunset Beach'
+        }
+        return mapping[value] || value
+      })
+
+      const widget = createMockWidget('img_001.png', {
+        getOptionLabel
+      })
+      const wrapper = mountComponent(widget, 'img_001.png')
+
+      const inputItems = wrapper.vm.inputItems
+      expect(inputItems).toHaveLength(3)
+      expect(inputItems[0].name).toBe('img_001.png')
+      expect(inputItems[0].label).toBe('Vacation Photo')
+      expect(inputItems[1].name).toBe('photo_abc.jpg')
+      expect(inputItems[1].label).toBe('Family Portrait')
+      expect(inputItems[2].name).toBe('hash789.png')
+      expect(inputItems[2].label).toBe('Sunset Beach')
+
+      expect(getOptionLabel).toHaveBeenCalledWith('img_001.png')
+      expect(getOptionLabel).toHaveBeenCalledWith('photo_abc.jpg')
+      expect(getOptionLabel).toHaveBeenCalledWith('hash789.png')
+    })
+
+    it('emits original values when items with custom labels are selected', async () => {
+      const getOptionLabel = vi.fn((value: string | null) => {
+        if (!value) return 'No file'
+        return `Custom: ${value}`
+      })
+
+      const widget = createMockWidget('img_001.png', {
+        getOptionLabel
+      })
+      const wrapper = mountComponent(widget, 'img_001.png')
+
+      // Simulate selecting an item
+      const selectedSet = new Set(['input-1']) // index 1 = photo_abc.jpg
+      wrapper.vm.updateSelectedItems(selectedSet)
+
+      // Should emit the original value, not the custom label
+      expect(wrapper.emitted('update:modelValue')).toBeDefined()
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual([
+        'photo_abc.jpg'
+      ])
+    })
+
+    it('falls back to original value when label mapping fails', () => {
+      const getOptionLabel = vi.fn((value: string | null) => {
+        if (value === 'photo_abc.jpg') {
+          throw new Error('Mapping failed')
+        }
+        return `Labeled: ${value}`
+      })
+
+      const consoleErrorSpy = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => {})
+
+      const widget = createMockWidget('img_001.png', {
+        getOptionLabel
+      })
+      const wrapper = mountComponent(widget, 'img_001.png')
+
+      const inputItems = wrapper.vm.inputItems
+      expect(inputItems[0].name).toBe('img_001.png')
+      expect(inputItems[0].label).toBe('Labeled: img_001.png')
+      expect(inputItems[1].name).toBe('photo_abc.jpg')
+      expect(inputItems[1].label).toBe('photo_abc.jpg')
+      expect(inputItems[2].name).toBe('hash789.png')
+      expect(inputItems[2].label).toBe('Labeled: hash789.png')
+
+      expect(consoleErrorSpy).toHaveBeenCalled()
+      consoleErrorSpy.mockRestore()
+    })
+  })
+
+  describe('output items with custom label mapping', () => {
+    it('applies custom label mapping to output items from queue history', () => {
+      const getOptionLabel = vi.fn((value: string | null) => {
+        if (!value) return 'No file'
+        return `Output: ${value}`
+      })
+
+      const widget = createMockWidget('img_001.png', {
+        getOptionLabel
+      })
+      const wrapper = mountComponent(widget, 'img_001.png')
+
+      const outputItems = wrapper.vm.outputItems
+      expect(outputItems).toBeDefined()
+      expect(Array.isArray(outputItems)).toBe(true)
+    })
+  })
+})