fix: use WidgetSelectDropdown for models (#6607)

## Summary As the commit says, the model loaders were broken in cloud if you enabled Vue Nodes (not a thing I think user does yet). This fixes it by configuring the `WidgetSelectDropdown` to load so the user load models like they would load a input or output asset. ## Review Focus Probably `useAssetWidgetData` to make sure it's idomatic. This part of [assetsStore](https://github.com/Comfy-Org/ComfyUI_frontend/pull/6607/files#diff-18a5914c9f12c16d9c9c3a9f6d0e203a9c00598414d3d1c8637da9ca77339d83R158-R234) as well. ## Screenshots <img width="1196" height="1005" alt="Screenshot 2025-11-05 at 5 34 22 PM" src="https://github.com/user-attachments/assets/804cd3c4-3370-4667-b606-bed52fcd6278" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6607-fix-use-WidgetSelectDropdown-for-models-2a36d73d36508143b185d06d736e4af9) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com>
2026-01-26 19:09:52 +00:00 · 2025-11-05 19:34:17 -08:00
parent 63cb271509
commit 8849d54e20
13 changed files with 986 additions and 37 deletions
--- a/tests-ui/tests/composables/useAssetWidgetData.desktop.test.ts
+++ b/tests-ui/tests/composables/useAssetWidgetData.desktop.test.ts
@@ -0,0 +1,42 @@
+import { describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import { useAssetWidgetData } from '@/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData'
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: false
+}))
+
+const mockUpdateModelsForNodeType = vi.fn()
+const mockGetCategoryForNodeType = vi.fn()
+
+vi.mock('@/stores/assetsStore', () => ({
+  useAssetsStore: () => ({
+    modelAssetsByNodeType: new Map(),
+    modelLoadingByNodeType: new Map(),
+    modelErrorByNodeType: new Map(),
+    updateModelsForNodeType: mockUpdateModelsForNodeType
+  })
+}))
+
+vi.mock('@/stores/modelToNodeStore', () => ({
+  useModelToNodeStore: () => ({
+    getCategoryForNodeType: mockGetCategoryForNodeType
+  })
+}))
+
+describe('useAssetWidgetData (desktop/isCloud=false)', () => {
+  it('returns empty/default values without calling stores', () => {
+    const nodeType = ref('CheckpointLoaderSimple')
+    const { category, assets, dropdownItems, isLoading, error } =
+      useAssetWidgetData(nodeType)
+
+    expect(category.value).toBeUndefined()
+    expect(assets.value).toEqual([])
+    expect(dropdownItems.value).toEqual([])
+    expect(isLoading.value).toBe(false)
+    expect(error.value).toBeNull()
+    expect(mockUpdateModelsForNodeType).not.toHaveBeenCalled()
+    expect(mockGetCategoryForNodeType).not.toHaveBeenCalled()
+  })
+})
--- a/tests-ui/tests/composables/useAssetWidgetData.test.ts
+++ b/tests-ui/tests/composables/useAssetWidgetData.test.ts
@@ -0,0 +1,245 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick, ref } from 'vue'
+
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
+import { useAssetWidgetData } from '@/renderer/extensions/vueNodes/widgets/composables/useAssetWidgetData'
+
+vi.mock('@/platform/distribution/types', () => ({
+  isCloud: true
+}))
+
+const mockModelAssetsByNodeType = new Map<string, AssetItem[]>()
+const mockModelLoadingByNodeType = new Map<string, boolean>()
+const mockModelErrorByNodeType = new Map<string, Error | null>()
+const mockUpdateModelsForNodeType = vi.fn()
+const mockGetCategoryForNodeType = vi.fn()
+
+vi.mock('@/stores/assetsStore', () => ({
+  useAssetsStore: () => ({
+    modelAssetsByNodeType: mockModelAssetsByNodeType,
+    modelLoadingByNodeType: mockModelLoadingByNodeType,
+    modelErrorByNodeType: mockModelErrorByNodeType,
+    updateModelsForNodeType: mockUpdateModelsForNodeType
+  })
+}))
+
+vi.mock('@/stores/modelToNodeStore', () => ({
+  useModelToNodeStore: () => ({
+    getCategoryForNodeType: mockGetCategoryForNodeType
+  })
+}))
+
+describe('useAssetWidgetData (cloud mode, isCloud=true)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockModelAssetsByNodeType.clear()
+    mockModelLoadingByNodeType.clear()
+    mockModelErrorByNodeType.clear()
+    mockGetCategoryForNodeType.mockReturnValue(undefined)
+
+    mockUpdateModelsForNodeType.mockImplementation(
+      async (): Promise<AssetItem[]> => {
+        return []
+      }
+    )
+  })
+
+  const createMockAsset = (
+    id: string,
+    name: string,
+    filename: string,
+    previewUrl?: string
+  ): AssetItem => ({
+    id,
+    name,
+    size: 1024,
+    tags: ['models', 'checkpoints'],
+    created_at: '2025-01-01T00:00:00Z',
+    preview_url: previewUrl,
+    user_metadata: {
+      filename
+    }
+  })
+
+  it('fetches assets and transforms to dropdown items', async () => {
+    const mockAssets: AssetItem[] = [
+      createMockAsset(
+        'asset-1',
+        'Beautiful Model',
+        'models/beautiful_model.safetensors',
+        '/api/preview/asset-1'
+      ),
+      createMockAsset('asset-2', 'Model B', 'model_b.safetensors', '/preview/2')
+    ]
+
+    mockGetCategoryForNodeType.mockReturnValue('checkpoints')
+
+    mockUpdateModelsForNodeType.mockImplementation(
+      async (_nodeType: string): Promise<AssetItem[]> => {
+        mockModelAssetsByNodeType.set(_nodeType, mockAssets)
+        mockModelLoadingByNodeType.set(_nodeType, false)
+        return mockAssets
+      }
+    )
+
+    const nodeType = ref('CheckpointLoaderSimple')
+    const { category, assets, dropdownItems, isLoading } =
+      useAssetWidgetData(nodeType)
+
+    await nextTick()
+    await vi.waitFor(() => !isLoading.value)
+
+    expect(mockUpdateModelsForNodeType).toHaveBeenCalledWith(
+      'CheckpointLoaderSimple'
+    )
+    expect(category.value).toBe('checkpoints')
+    expect(assets.value).toEqual(mockAssets)
+
+    expect(dropdownItems.value).toHaveLength(2)
+    const item = dropdownItems.value[0]
+    expect(item.id).toBe('asset-1')
+    expect(item.name).toBe('models/beautiful_model.safetensors')
+    expect(item.label).toBe('Beautiful Model')
+    expect(item.mediaSrc).toBe('/api/preview/asset-1')
+  })
+
+  it('handles API errors gracefully', async () => {
+    const mockError = new Error('Network error')
+
+    mockUpdateModelsForNodeType.mockImplementation(
+      async (_nodeType: string): Promise<AssetItem[]> => {
+        mockModelErrorByNodeType.set(_nodeType, mockError)
+        mockModelAssetsByNodeType.set(_nodeType, [])
+        mockModelLoadingByNodeType.set(_nodeType, false)
+        return []
+      }
+    )
+
+    const nodeType = ref('CheckpointLoaderSimple')
+    const { assets, error, isLoading } = useAssetWidgetData(nodeType)
+
+    await nextTick()
+    await vi.waitFor(() => !isLoading.value)
+
+    expect(error.value).toBe(mockError)
+    expect(assets.value).toEqual([])
+  })
+
+  it('returns empty for unknown node type', async () => {
+    mockGetCategoryForNodeType.mockReturnValue(undefined)
+
+    mockUpdateModelsForNodeType.mockImplementation(
+      async (_nodeType: string): Promise<AssetItem[]> => {
+        mockModelAssetsByNodeType.set(_nodeType, [])
+        mockModelLoadingByNodeType.set(_nodeType, false)
+        return []
+      }
+    )
+
+    const nodeType = ref('UnknownNodeType')
+    const { category, assets } = useAssetWidgetData(nodeType)
+
+    await nextTick()
+
+    expect(category.value).toBeUndefined()
+    expect(assets.value).toEqual([])
+  })
+
+  describe('MaybeRefOrGetter parameter support', () => {
+    it('accepts plain string value', async () => {
+      const mockAssets: AssetItem[] = [
+        createMockAsset('asset-1', 'Model A', 'model_a.safetensors')
+      ]
+
+      mockGetCategoryForNodeType.mockReturnValue('checkpoints')
+      mockUpdateModelsForNodeType.mockImplementation(
+        async (_nodeType: string): Promise<AssetItem[]> => {
+          mockModelAssetsByNodeType.set(_nodeType, mockAssets)
+          mockModelLoadingByNodeType.set(_nodeType, false)
+          return mockAssets
+        }
+      )
+
+      const { category, assets, isLoading } = useAssetWidgetData(
+        'CheckpointLoaderSimple'
+      )
+
+      await nextTick()
+      await vi.waitFor(() => !isLoading.value)
+
+      expect(mockUpdateModelsForNodeType).toHaveBeenCalledWith(
+        'CheckpointLoaderSimple'
+      )
+      expect(category.value).toBe('checkpoints')
+      expect(assets.value).toEqual(mockAssets)
+    })
+
+    it('accepts getter function', async () => {
+      const mockAssets: AssetItem[] = [
+        createMockAsset('asset-1', 'Model A', 'model_a.safetensors')
+      ]
+
+      mockGetCategoryForNodeType.mockReturnValue('loras')
+      mockUpdateModelsForNodeType.mockImplementation(
+        async (_nodeType: string): Promise<AssetItem[]> => {
+          mockModelAssetsByNodeType.set(_nodeType, mockAssets)
+          mockModelLoadingByNodeType.set(_nodeType, false)
+          return mockAssets
+        }
+      )
+
+      const nodeType = ref('LoraLoader')
+      const { category, assets, isLoading } = useAssetWidgetData(
+        () => nodeType.value
+      )
+
+      await nextTick()
+      await vi.waitFor(() => !isLoading.value)
+
+      expect(mockUpdateModelsForNodeType).toHaveBeenCalledWith('LoraLoader')
+      expect(category.value).toBe('loras')
+      expect(assets.value).toEqual(mockAssets)
+    })
+
+    it('accepts ref (backward compatibility)', async () => {
+      const mockAssets: AssetItem[] = [
+        createMockAsset('asset-1', 'Model A', 'model_a.safetensors')
+      ]
+
+      mockGetCategoryForNodeType.mockReturnValue('checkpoints')
+      mockUpdateModelsForNodeType.mockImplementation(
+        async (_nodeType: string): Promise<AssetItem[]> => {
+          mockModelAssetsByNodeType.set(_nodeType, mockAssets)
+          mockModelLoadingByNodeType.set(_nodeType, false)
+          return mockAssets
+        }
+      )
+
+      const nodeTypeRef = ref('CheckpointLoaderSimple')
+      const { category, assets, isLoading } = useAssetWidgetData(nodeTypeRef)
+
+      await nextTick()
+      await vi.waitFor(() => !isLoading.value)
+
+      expect(mockUpdateModelsForNodeType).toHaveBeenCalledWith(
+        'CheckpointLoaderSimple'
+      )
+      expect(category.value).toBe('checkpoints')
+      expect(assets.value).toEqual(mockAssets)
+    })
+
+    it('handles undefined node type gracefully', async () => {
+      const { category, assets, dropdownItems, isLoading, error } =
+        useAssetWidgetData(undefined)
+
+      await nextTick()
+
+      expect(mockUpdateModelsForNodeType).not.toHaveBeenCalled()
+      expect(category.value).toBeUndefined()
+      expect(assets.value).toEqual([])
+      expect(dropdownItems.value).toEqual([])
+      expect(isLoading.value).toBe(false)
+      expect(error.value).toBeNull()
+    })
+  })
+})