refactor(ComboWidget): just use ComboWidget

Author: arjansingh

src/components/graph/GraphCanvas.vue

@@ -115,7 +115,6 @@ import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { useChainCallback } from '@/composables/functional/useChainCallback'
-import { useCanvasRefresh } from '@/composables/graph/useCanvasRefresh'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useViewportCulling } from '@/composables/graph/useViewportCulling'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
@@ -128,7 +127,6 @@ import { usePaste } from '@/composables/usePaste'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { i18n, t } from '@/i18n'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
-import { isCloud } from '@/platform/distribution/types'
 import { useLitegraphSettings } from '@/platform/settings/composables/useLitegraphSettings'
 import { CORE_SETTINGS } from '@/platform/settings/constants/coreSettings'
 import { useSettingStore } from '@/platform/settings/settingStore'
@@ -148,7 +146,6 @@ import { ChangeTracker } from '@/scripts/changeTracker'
 import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
 import { useColorPaletteService } from '@/services/colorPaletteService'
 import { newUserService } from '@/services/newUserService'
-import { useAssetsStore } from '@/stores/assetsStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
@@ -175,8 +172,6 @@ const toastStore = useToastStore()
 const colorPaletteStore = useColorPaletteStore()
 const colorPaletteService = useColorPaletteService()
 const canvasInteractions = useCanvasInteractions()
-const assetsStore = useAssetsStore()
-const { refreshCanvas } = useCanvasRefresh()
 
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
@@ -227,18 +222,6 @@ watch(
   }
 )
 
-// Refresh canvas when input assets are loaded (cloud only)
-if (isCloud) {
-  watch(
-    () => assetsStore.inputAssets.length,
-    (newLength, oldLength) => {
-      if (oldLength === 0 && newLength > 0) {
-        refreshCanvas()
-      }
-    }
-  )
-}
-
 const allNodes = computed((): VueNodeData[] =>
   Array.from(vueNodeLifecycle.nodeManager.value?.vueNodeData?.values() ?? [])
 )

src/lib/litegraph/src/litegraph.ts

@@ -148,11 +148,7 @@ export { BaseWidget } from './widgets/BaseWidget'
 
 export { LegacyWidget } from './widgets/LegacyWidget'
 
-export {
-  isComboWidget,
-  isMappedComboWidget,
-  isAssetWidget
-} from './widgets/widgetMap'
+export { isComboWidget, isAssetWidget } from './widgets/widgetMap'
 // Additional test-specific exports
 export { LGraphButton } from './LGraphButton'
 export { MovingOutputLink } from './canvas/MovingOutputLink'

src/lib/litegraph/src/types/widgets.ts

@@ -29,6 +29,8 @@ export interface IWidgetOptions<TValues = unknown[]> {
   canvasOnly?: boolean
 
   values?: TValues
+  /** Optional function to format values for display (e.g., hash → human-readable name) */
+  getOptionLabel?: (value?: string | null) => string
   callback?: IWidget['callback']
 }
 
@@ -63,7 +65,6 @@ export type IWidget =
   | IStringWidget
   | IComboWidget
   | IStringComboWidget
-  | IMappedComboWidget
   | ICustomWidget
   | ISliderWidget
   | IButtonWidget
@@ -117,37 +118,22 @@ export interface IStringComboWidget
   value: string
 }
 
-export type ComboWidgetValues =
+type ComboWidgetValues =
   | string[]
   | Record<string, string>
   | ((widget?: IComboWidget, node?: LGraphNode) => string[])
 
-/**
- * Type accepts both 'combo' and 'mapped_combo' for polymorphism with {@link IMappedComboWidget}.
- *
- * This matches runtime: MappedComboWidget class extends ComboWidget class, so instances of
- * MappedComboWidget must be assignable to functions/properties expecting IComboWidget.
- */
+/** A combo-box widget (dropdown, select, etc) */
 export interface IComboWidget
   extends IBaseWidget<
     string | number,
-    'combo' | 'mapped_combo',
+    'combo',
     RequiredProps<IWidgetOptions<ComboWidgetValues>, 'values'>
   > {
-  type: 'combo' | 'mapped_combo'
+  type: 'combo'
   value: string | number
 }
 
-/** A mapped combo widget that displays human-readable names for hash-based filenames */
-export interface IMappedComboWidget
-  extends Omit<IComboWidget, 'type' | 'options'> {
-  type: 'mapped_combo'
-  options: RequiredProps<IWidgetOptions<ComboWidgetValues>, 'values'> & {
-    /** Optional function to map widget value to display value (e.g., hash filename to human-readable name) */
-    mapValue?: (value: string) => string
-  }
-}
-
 /** A widget with a string value */
 export interface IStringWidget
   extends IBaseWidget<string, 'string' | 'text', IWidgetOptions<string[]>> {

src/lib/litegraph/src/utils/hashFilenameUtils.ts

@@ -30,17 +30,28 @@ export class ComboWidget
   extends BaseSteppedWidget<IStringComboWidget | IComboWidget>
   implements IComboWidget
 {
-  // Accepts 'mapped_combo' to allow MappedComboWidget subclass to override
-  override type: 'combo' | 'mapped_combo' = 'combo'
+  override type = 'combo' as const
 
   override get _displayValue() {
     if (this.computedDisabled) return ''
+
+    if (this.options.getOptionLabel) {
+      try {
+        return this.options.getOptionLabel(
+          this.value ? String(this.value) : null
+        )
+      } catch (e) {
+        console.error('Failed to map value:', e)
+        return this.value ? String(this.value) : ''
+      }
+    }
+
     const { values: rawValues } = this.options
     if (rawValues) {
       const values = typeof rawValues === 'function' ? rawValues() : rawValues
 
       if (values && !Array.isArray(values)) {
-        return values[String(this.value)]
+        return values[this.value]
       }
     }
     return typeof this.value === 'number' ? String(this.value) : this.value
@@ -132,7 +143,31 @@ export class ComboWidget
     const values = this.getValues(node)
     const values_list = toArray(values)
 
-    // Handle center click - show dropdown menu
+    // Use addItem to solve duplicate filename issues
+    if (this.options.getOptionLabel) {
+      const menuOptions = {
+        scale: Math.max(1, canvas.ds.scale),
+        event: e,
+        className: 'dark',
+        callback: (value: string) => {
+          this.setValue(value, { e, node, canvas })
+        }
+      }
+      const menu = new LiteGraph.ContextMenu([], menuOptions)
+
+      for (const value of values_list) {
+        try {
+          const label = this.options.getOptionLabel(String(value))
+          menu.addItem(label, value, menuOptions)
+        } catch (err) {
+          console.error('Failed to map value:', err)
+          menu.addItem(String(value), value, menuOptions)
+        }
+      }
+      return
+    }
+
+    // Show dropdown menu when user clicks on widget label
     const text_values = values != values_list ? Object.values(values) : values
     new LiteGraph.ContextMenu(text_values, {
       scale: Math.max(1, canvas.ds.scale),

src/lib/litegraph/src/widgets/ComboWidget.ts

@@ -3,7 +3,6 @@ import type {
   IAssetWidget,
   IBaseWidget,
   IComboWidget,
-  IMappedComboWidget,
   IWidget,
   TWidgetType
 } from '@/lib/litegraph/src/types/widgets'
@@ -21,7 +20,6 @@ import { GalleriaWidget } from './GalleriaWidget'
 import { ImageCompareWidget } from './ImageCompareWidget'
 import { KnobWidget } from './KnobWidget'
 import { LegacyWidget } from './LegacyWidget'
-import { MappedComboWidget } from './MappedComboWidget'
 import { MarkdownWidget } from './MarkdownWidget'
 import { MultiSelectWidget } from './MultiSelectWidget'
 import { NumberWidget } from './NumberWidget'
@@ -37,7 +35,6 @@ export type WidgetTypeMap = {
   slider: SliderWidget
   knob: KnobWidget
   combo: ComboWidget
-  mapped_combo: MappedComboWidget
   number: NumberWidget
   string: TextWidget
   text: TextWidget
@@ -95,11 +92,6 @@ export function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(
       return toClass(KnobWidget, narrowedWidget, node)
     case 'combo':
       return toClass(ComboWidget, narrowedWidget, node)
-    case 'mapped_combo':
-      if (!isMappedComboWidget(narrowedWidget)) {
-        throw new Error('Expected IMappedComboWidget but got IComboWidget')
-      }
-      return toClass(MappedComboWidget, narrowedWidget, node)
     case 'number':
       return toClass(NumberWidget, narrowedWidget, node)
     case 'string':
@@ -141,13 +133,6 @@ export function isComboWidget(widget: IBaseWidget): widget is IComboWidget {
   return widget.type === 'combo'
 }
 
-/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IMappedComboWidget}. */
-export function isMappedComboWidget(
-  widget: IBaseWidget
-): widget is IMappedComboWidget {
-  return widget.type === 'mapped_combo'
-}
-
 /** Type guard: Narrow **from {@link IBaseWidget}** to {@link IAssetWidget}. */
 export function isAssetWidget(widget: IBaseWidget): widget is IAssetWidget {
   return widget.type === 'asset'