Update Search Box IO filters to support multitype #7542
Conversation
dosubot
bot
added
the
size:S
📝 WalkthroughWalkthroughThe changes enhance comma-separated type handling in node search functionality. Input and output types are now split by commas and flattened for granular matching. The FuseFilter matching logic is updated to support comma-separated values in filtering. Changes
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎭 Playwright Test Results⏰ Completed at: 12/16/2025, 04:29:27 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/16/2025, 04:21:23 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.25 MB (baseline 3.25 MB) • 🔴 +211 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 990 kB (baseline 990 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 184 kB (baseline 184 kB) • ⚪ 0 BReusable component library chunks
Status: 7 added / 7 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 3.18 kB (baseline 3.18 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.75 MB (baseline 3.75 MB) • ⚪ 0 BBundles that do not match a named category
Status: 19 added / 19 removed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
src/services/nodeSearchService.ts(1 hunks)src/utils/fuseUtil.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/services/nodeSearchService.tssrc/utils/fuseUtil.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safetyMinimize the surface area (exported values) of each module and composable
Files:
src/services/nodeSearchService.tssrc/utils/fuseUtil.ts
src/**/{services,composables}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/{services,composables}/**/*.{ts,tsx}: Useapi.apiURL()for backend endpoints instead of constructing URLs directly
Useapi.fileURL()for static file access instead of constructing URLs directly
Files:
src/services/nodeSearchService.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/services/nodeSearchService.tssrc/utils/fuseUtil.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/services/nodeSearchService.tssrc/utils/fuseUtil.ts
**/*.{ts,tsx,js,jsx,vue,json}
📄 CodeRabbit inference engine (AGENTS.md)
Code style: Use 2-space indentation, single quotes, no trailing semicolons, and 80-character line width (see
.prettierrc)
Files:
src/services/nodeSearchService.tssrc/utils/fuseUtil.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; runpnpm formatbefore committing
Use TypeScript for type safety; never useanytype - use proper TypeScript types
Never useas anytype assertions; fix the underlying type issue instead
Use es-toolkit for utility functions
Write code that is expressive and self-documenting; avoid comments unless absolutely necessary; do not add or retain redundant comments
Keep functions short and functional
Minimize nesting in code (e.g., deeply nestediforforstatements); apply the Arrow Anti-Pattern principle
Avoid mutable state; prefer immutability and assignment at point of declaration
Favor pure functions, especially testable ones
Files:
src/services/nodeSearchService.tssrc/utils/fuseUtil.ts
🧠 Learnings (3)
📚 Learning: 2025-12-09T03:39:54.501Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7169
File: src/platform/remote/comfyui/jobs/jobTypes.ts:1-107
Timestamp: 2025-12-09T03:39:54.501Z
Learning: In the ComfyUI_frontend project, Zod is on v3.x. Do not suggest Zod v4 standalone validators (z.uuid, z.ulid, z.cuid2, z.nanoid) until an upgrade to Zod 4 is performed. When reviewing TypeScript files (e.g., src/platform/remote/comfyui/jobs/jobTypes.ts) validate against Zod 3 capabilities and avoid introducing v4-specific features; flag any proposal to upgrade or incorporate v4-only validators and propose staying with compatible 3.x patterns.
Applied to files:
src/services/nodeSearchService.tssrc/utils/fuseUtil.ts
📚 Learning: 2025-12-13T11:03:11.264Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7416
File: src/stores/imagePreviewStore.ts:5-7
Timestamp: 2025-12-13T11:03:11.264Z
Learning: In the ComfyUI_frontend repository, lint rules require keeping 'import type' statements separate from non-type imports, even if importing from the same module. Do not suggest consolidating them into a single import statement. Ensure type imports remain on their own line (import type { ... } from 'module') and regular imports stay on separate lines.
Applied to files:
src/services/nodeSearchService.tssrc/utils/fuseUtil.ts
📚 Learning: 2025-12-11T12:25:15.470Z
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 7358
File: src/components/dialog/content/signin/SignUpForm.vue:45-54
Timestamp: 2025-12-11T12:25:15.470Z
Learning: This repository uses CI automation to format code (pnpm format). Do not include manual formatting suggestions in code reviews for Comfy-Org/ComfyUI_frontend. If formatting issues are detected, rely on the CI formatter or re-run pnpm format. Focus reviews on correctness, readability, performance, accessibility, and maintainability rather than style formatting.
Applied to files:
src/services/nodeSearchService.tssrc/utils/fuseUtil.ts
🧬 Code graph analysis (1)
src/services/nodeSearchService.ts (2)
src/utils/fuseUtil.ts (1)
FuseFilter(11-72)src/stores/nodeDefStore.ts (1)
ComfyNodeDefImpl(26-170)
🔇 Additional comments (2)
src/services/nodeSearchService.ts (1)
38-49: Verify search performance with comma-separated type handling.As noted in the PR description, please confirm that splitting types during each
getItemOptionscall doesn't degrade search box responsiveness. ThegetItemOptionsfunction is invoked during filter construction and repeatedly during matching operations.Consider testing with a large node library to measure any performance impact. If degradation is observed, consider caching the split results in the filter construction phase.
src/utils/fuseUtil.ts (1)
65-70: Trim whitespace from comma-separated type values to prevent matching failures.When splitting comma-separated type values, whitespace after commas should be removed to ensure reliable matching. The current code doesn't trim or filter empty strings.
Apply this diff:
-const values = value.split(',') +const values = value.split(',').map(v => v.trim()).filter(v => v.length > 0) //Alas, typescript doesn't understand string satisfies O return values.some((v) => options.includes(v as O))
| Object.values(node.inputs ?? []).flatMap((input) => | ||
| input.type.split(',') | ||
| ), |
There was a problem hiding this comment.
Trim whitespace and filter empty strings when splitting input types.
The same whitespace and empty string issues from FuseFilter.matches apply here. If input types contain spaces after commas (e.g., 'IMAGE, MASK') or trailing commas (e.g., 'IMAGE,'), the split results will contain malformed values.
Apply this diff:
getItemOptions: (node) =>
Object.values(node.inputs ?? []).flatMap((input) =>
- input.type.split(',')
+ input.type.split(',').map(t => t.trim()).filter(t => t.length > 0)
),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| Object.values(node.inputs ?? []).flatMap((input) => | |
| input.type.split(',') | |
| ), | |
| Object.values(node.inputs ?? []).flatMap((input) => | |
| input.type.split(',').map(t => t.trim()).filter(t => t.length > 0) | |
| ), |
🤖 Prompt for AI Agents
In src/services/nodeSearchService.ts around lines 38 to 40, the code splits
input.type by commas but doesn't trim whitespace or remove empty strings; update
the split logic to map each part through .trim() and filter out empty values
(e.g., after split, do parts.map(p => p.trim()).filter(Boolean)) so entries like
"IMAGE, MASK" or "IMAGE," produce clean tokens before flatMap/aggregation.
| getItemOptions: (node) => | ||
| node.outputs.flatMap((output) => output.type.split(',')), |
There was a problem hiding this comment.
Trim whitespace and filter empty strings when splitting output types.
Consistent with the input type handling, output types should also trim whitespace and filter empty strings after splitting.
Apply this diff:
getItemOptions: (node) =>
- node.outputs.flatMap((output) => output.type.split(',')),
+ node.outputs.flatMap((output) => output.type.split(',').map(t => t.trim()).filter(t => t.length > 0)),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| getItemOptions: (node) => | |
| node.outputs.flatMap((output) => output.type.split(',')), | |
| getItemOptions: (node) => | |
| node.outputs.flatMap((output) => output.type.split(',').map(t => t.trim()).filter(t => t.length > 0)), |
🤖 Prompt for AI Agents
In src/services/nodeSearchService.ts around lines 48 to 49, the getItemOptions
mapping splits output.type by ',' but does not trim whitespace or filter empty
strings; update the split handling to mirror input type processing by splitting
on ',', mapping each part through .trim(), and filtering out any empty strings
so returned options contain only non-empty, trimmed types.
It doesn't feel like this further hurts the lackluster responsiveness of the searchbox, but second opinions would be appreciated. | Before | After | | ------ | ----- | | <img width="360" alt="before" src="https://github.com/user-attachments/assets/fb4b81f7-6eac-45bd-9bc8-17aebf739f0c"/>| <img width="360" alt="after" src="https://github.com/user-attachments/assets/7844cab4-0f73-4a3f-beb0-850efc09497a" />| ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7542-Update-Search-Box-IO-filters-to-support-multitype-2cb6d73d365081ccbeabf1a891351996) by [Unito](https://www.unito.io)
It doesn't feel like this further hurts the lackluster responsiveness of the searchbox, but second opinions would be appreciated. | Before | After | | ------ | ----- | | <img width="360" alt="before" src="https://github.com/user-attachments/assets/fb4b81f7-6eac-45bd-9bc8-17aebf739f0c"/>| <img width="360" alt="after" src="https://github.com/user-attachments/assets/7844cab4-0f73-4a3f-beb0-850efc09497a" />| ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7542-Update-Search-Box-IO-filters-to-support-multitype-2cb6d73d365081ccbeabf1a891351996) by [Unito](https://www.unito.io)
It doesn't feel like this further hurts the lackluster responsiveness of the searchbox, but second opinions would be appreciated.
┆Issue is synchronized with this Notion page by Unito