diff --git a/.github/workflows/test-ui.yaml b/.github/workflows/test-ui.yaml index 43e43578d..6897940e4 100644 --- a/.github/workflows/test-ui.yaml +++ b/.github/workflows/test-ui.yaml @@ -17,7 +17,7 @@ jobs: steps: - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.2 with: - devtools_ref: a9c49e4c57464da41ec346deb4a9eeeb00a52c9a + devtools_ref: 8ff192366066cd44bfc2a25713c9957ccf665938 - name: Run Jest tests run: | npm run test:generate @@ -29,7 +29,7 @@ jobs: steps: - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.2 with: - devtools_ref: a9c49e4c57464da41ec346deb4a9eeeb00a52c9a + devtools_ref: 8ff192366066cd44bfc2a25713c9957ccf665938 - name: Install Playwright Browsers run: npx playwright install chromium --with-deps working-directory: ComfyUI_frontend @@ -48,7 +48,7 @@ jobs: steps: - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.2 with: - devtools_ref: a9c49e4c57464da41ec346deb4a9eeeb00a52c9a + devtools_ref: 8ff192366066cd44bfc2a25713c9957ccf665938 - name: Install Playwright Browsers run: npx playwright install chromium --with-deps working-directory: ComfyUI_frontend @@ -67,7 +67,7 @@ jobs: steps: - uses: Comfy-Org/ComfyUI_frontend_setup_action@v2.2 with: - devtools_ref: a9c49e4c57464da41ec346deb4a9eeeb00a52c9a + devtools_ref: 8ff192366066cd44bfc2a25713c9957ccf665938 - name: Install Playwright Browsers run: npx playwright install chromium --with-deps working-directory: ComfyUI_frontend diff --git a/src/hooks/remoteWidgetHook.ts b/src/hooks/remoteWidgetHook.ts index 0783d0d85..957fe6165 100644 --- a/src/hooks/remoteWidgetHook.ts +++ b/src/hooks/remoteWidgetHook.ts @@ -1,7 +1,7 @@ import axios from 'axios' import { useWidgetStore } from '@/stores/widgetStore' -import type { InputSpec } from '@/types/apiTypes' +import type { InputSpec, RemoteWidgetConfig } from '@/types/apiTypes' export interface CacheEntry { data: T[] @@ -16,8 +16,8 @@ export interface CacheEntry { const dataCache = new Map>() -const createCacheKey = (inputData: InputSpec): string => { - const { route, query_params = {}, refresh = 0 } = inputData[1] +const createCacheKey = (config: RemoteWidgetConfig): string => { + const { route, query_params = {}, refresh = 0 } = config const paramsKey = Object.entries(query_params) .sort(([a], [b]) => a.localeCompare(b)) @@ -32,10 +32,10 @@ const getBackoff = (retryCount: number) => { } async function fetchData( - inputData: InputSpec, + config: RemoteWidgetConfig, controller: AbortController ): Promise { - const { route, response_key, query_params } = inputData[1] + const { route, response_key, query_params } = config const res = await axios.get(route, { params: query_params, signal: controller.signal, @@ -45,9 +45,10 @@ async function fetchData( } export function useRemoteWidget(inputData: InputSpec) { - const { refresh = 0 } = inputData[1] + const config: RemoteWidgetConfig = inputData[1].remote + const { refresh = 0 } = config const isPermanent = refresh <= 0 - const cacheKey = createCacheKey(inputData) + const cacheKey = createCacheKey(config) const defaultValue = useWidgetStore().getDefaultValue(inputData) const setSuccess = (entry: CacheEntry, data: T[]) => { @@ -113,10 +114,7 @@ export function useRemoteWidget(inputData: InputSpec) { currentEntry.error = null currentEntry.controller = new AbortController() - currentEntry.fetchPromise = fetchData( - inputData, - currentEntry.controller - ) + currentEntry.fetchPromise = fetchData(config, currentEntry.controller) const data = await currentEntry.fetchPromise setSuccess(currentEntry, data) diff --git a/src/scripts/widgets.ts b/src/scripts/widgets.ts index 9e576a22c..05b9b0f10 100644 --- a/src/scripts/widgets.ts +++ b/src/scripts/widgets.ts @@ -565,8 +565,7 @@ export const ComfyWidgets: Record = { }, COMBO(node, inputName, inputData: InputSpec) { const widgetStore = useWidgetStore() - - const { type, options } = inputData[1] + const { remote, options } = inputData[1] const defaultValue = widgetStore.getDefaultValue(inputData) const res = { @@ -575,7 +574,7 @@ export const ComfyWidgets: Record = { }) as IComboWidget } - if (type === 'remote') { + if (remote) { const remoteWidget = useRemoteWidget(inputData) const origOptions = res.widget.options diff --git a/src/stores/widgetStore.ts b/src/stores/widgetStore.ts index 3bb1cbace..140731d81 100644 --- a/src/stores/widgetStore.ts +++ b/src/stores/widgetStore.ts @@ -53,7 +53,7 @@ export const useWidgetStore = defineStore('widget', () => { if (props.default) return props.default if (widgetType === 'COMBO' && props.options?.length) return props.options[0] - if (props.type === 'remote') return 'Loading...' + if (props.remote) return 'Loading...' return undefined } diff --git a/src/types/apiTypes.ts b/src/types/apiTypes.ts index 63cd6211d..3189fe7ce 100644 --- a/src/types/apiTypes.ts +++ b/src/types/apiTypes.ts @@ -269,6 +269,13 @@ function inputSpec( ]) } +const zRemoteWidgetConfig = z.object({ + route: z.string().url().or(z.string().startsWith('/')), + refresh: z.number().gte(128).safe().or(z.number().lte(0).safe()).optional(), + response_key: z.string().optional(), + query_params: z.record(z.string(), z.string()).optional() +}) + const zBaseInputSpecValue = z .object({ default: z.any().optional(), @@ -332,11 +339,7 @@ const zStringInputSpec = inputSpec([ const zComboInputProps = zBaseInputSpecValue.extend({ control_after_generate: z.boolean().optional(), image_upload: z.boolean().optional(), - type: z.enum(['remote']).optional(), - route: z.string().url().or(z.string().startsWith('/')).optional(), - refresh: z.number().gte(128).safe().or(z.number().lte(0).safe()).optional(), - response_key: z.string().optional(), - query_params: z.record(z.string(), z.string()).optional() + remote: zRemoteWidgetConfig.optional() }) // Dropdown Selection. @@ -594,3 +597,4 @@ export type UserDataFullInfo = z.infer export type TerminalSize = z.infer export type LogEntry = z.infer export type LogsRawResponse = z.infer +export type RemoteWidgetConfig = z.infer diff --git a/tests-ui/tests/remoteWidgetHook.test.ts b/tests-ui/tests/remoteWidgetHook.test.ts index b399a291a..2b2072c61 100644 --- a/tests-ui/tests/remoteWidgetHook.test.ts +++ b/tests-ui/tests/remoteWidgetHook.test.ts @@ -35,10 +35,11 @@ function createMockInputData(overrides = {}): ComboInputSpecV2 { 'COMBO', { name: 'test_widget', - type: 'remote', - route: `/api/test/${Date.now()}${Math.random().toString(36).substring(2, 15)}`, - refresh: 0, - ...overrides + remote: { + route: `/api/test/${Date.now()}${Math.random().toString(36).substring(2, 15)}`, + refresh: 0, + ...overrides + } } ] }