Skip to content

refactor: stop fighting the DOM #7421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
christian-byrne merged 1 commit into from
Dec 12, 2025
Merged

refactor: stop fighting the DOM #7421

christian-byrne merged 1 commit into from
Dec 12, 2025

Conversation

@simula-r
Copy link
Contributor

@simula-r simula-r commented Dec 12, 2025 •
edited by sync-by-unito bot
Loading

Summary

Remove keyDown provider on the LGraphNode, remove inject on widget.

Changes

  • What: LGraphNode.vue ImagePreview.vue
  • Breaking:
  • Dependencies:

┆Issue is synchronized with this Notion page by Unito

@simula-r simula-r requested a review from a team as a code owner December 12, 2025 22:02
@dosubot dosubot bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Dec 12, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 12, 2025 •
edited
Loading

📝 Walkthrough

Walkthrough

The changes refactor keyboard event handling by removing the centralized provide/inject pattern from LGraphNode and moving to local keyboard event bindings in ImagePreview.

Changes

Cohort / File(s) Summary
Image Preview Event Binding
src/renderer/extensions/vueNodes/components/ImagePreview.vue		 Replaced injected keyEvent listener with direct @keydown binding on the root container; removed inject, ShallowRef imports and associated watcher logic.
Node Event Handler Removal
src/renderer/extensions/vueNodes/components/LGraphNode.vue		 Removed @keydown="handleNodeKeydown" template binding, deleted handleNodeKeydown function, and removed provide('keyEvent', keyEvent) mechanism; dropped provide and shallowRef imports from Vue.

Possibly related PRs

✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch refactor/image-preview-lg-node-event-handling
📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1cdea30 and 5f9c515.

📒 Files selected for processing (2)
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue (2 hunks)
  • src/renderer/extensions/vueNodes/components/LGraphNode.vue (1 hunks)
🧰 Additional context used
📓 Path-based instructions (9)
src/**/*.vue

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

src/**/*.vue: Use the Vue 3 Composition API instead of the Options API when writing Vue components (exception: when overriding or extending PrimeVue components for compatibility)
Use setup() function for component logic
Utilize ref and reactive for reactive state
Implement computed properties with computed()
Use watch and watchEffect for side effects
Implement lifecycle hooks with onMounted, onUpdated, etc.
Utilize provide/inject for dependency injection
Use vue 3.5 style of default prop declaration
Use Tailwind CSS for styling
Implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Follow Vue 3 style guide and naming conventions

Files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
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/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
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/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
src/**/{composables,components}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Clean up subscriptions in state management to prevent memory leaks

Files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
src/**/*.{vue,ts,tsx}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Follow Vue 3 composition API style guide

Files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
src/**/{components,composables}/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (src/CLAUDE.md)

Use vue-i18n for ALL user-facing strings by adding them to src/locales/en/main.json

Files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
**/*.vue

📄 CodeRabbit inference engine (AGENTS.md)

**/*.vue: Use Vue 3 SFCs (Single File Components) with Composition API only; do not use Options API
Vue components must use <script setup lang="ts"> for component logic
Use Vue 3.5 TypeScript style for default prop declaration with reactive props destructuring; do not use withDefaults or runtime props declaration
Prefer useModel to separately defining a prop and emit
Use Tailwind 4 utility classes for styling; avoid using <style> blocks in Vue components
Use semantic Tailwind values from style.css theme instead of the dark: variant; for example, use bg-node-component-surface instead of dark: prefixes
Always use cn() utility from @/utils/tailwindUtil to merge Tailwind class names; do not use :class="[]" syntax
Use ref for reactive state in Vue Composition API components
Implement computed properties with computed() from Vue; avoid using a ref with a watch if a computed would work instead
Use watch and watchEffect for side effects in Vue components
Implement lifecycle hooks using onMounted, onUpdated, and other Vue lifecycle functions
Use provide/inject for dependency injection; do not use dependency injection if a Store or shared composable would be simpler
Do not import Vue macros unnecessarily; only use when needed
Be judicious with addition of new refs or other state: prefer props, avoid redundant computed, and prefer computed over watch
Use VueUse functions for performance-enhancing styles
In Vue Components, implement proper props and emits definitions
Utilize Vue 3's Teleport component when needed
Use Suspense for async components
Implement proper error handling in Vue components
Follow Vue 3 style guide and naming conventions
Use vue-i18n in composition API for any string literals; place new translation entries in src/locales/en/main.json
Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead

Files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
**/*.{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/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,vue}: Imports must be sorted and grouped by plugin; run pnpm format before committing
Use TypeScript for type safety; never use any type - use proper TypeScript types
Never use as any type 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 nested if or for statements); 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/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
🧠 Learnings (23)
📓 Common learnings 
Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:51.755Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.
📚 Learning: 2025-12-11T03:55:51.755Z 
Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:51.755Z
Learning: In Vue components under src/renderer/extensions/vueNodes (e.g., ImagePreview.vue and LGraphNode.vue), implement image gallery keyboard navigation so that it responds to the node's focus state rather than requiring focus inside the image preview wrapper. Achieve this by wiring keyEvent handling at the node focus level and injecting or propagating key events (arrow keys) to the gallery when the node is focused/selected. This improves accessibility and aligns navigation with node-level focus behavior.

Applied to files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
📚 Learning: 2025-12-04T21:43:49.363Z 
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7137
File: src/components/rightSidePanel/parameters/TabParameters.vue:10-0
Timestamp: 2025-12-04T21:43:49.363Z
Learning: Vue 3.5+ supports reactive props destructure in <script setup>. Destructuring props directly (e.g., `const { nodes } = defineProps<{ nodes: LGraphNode[] }>()`) maintains reactivity through compiler transformation. This is the recommended modern approach and does not require using `props.x` or `toRef`/`toRefs`.

Applied to files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-11-24T19:47:45.616Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Prefer emit/event-name for state changes over other communication patterns

Applied to files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-12-09T20:22:23.620Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `ref` for reactive state in Vue Composition API components

Applied to files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
📚 Learning: 2025-11-24T19:47:45.616Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API

Applied to files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-11-24T19:47:02.860Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state

Applied to files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
📚 Learning: 2025-11-24T19:47:45.616Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use setup() function in Vue 3 Composition API

Applied to files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-12-09T20:22:23.620Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Be judicious with addition of new refs or other state: prefer props, avoid redundant `computed`, and prefer `computed` over `watch`

Applied to files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-12-09T20:22:23.620Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Vue components must use `<script setup lang="ts">` for component logic

Applied to files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-12-09T20:22:23.620Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `provide`/`inject` for dependency injection; do not use dependency injection if a Store or shared composable would be simpler

Applied to files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-12-09T20:22:23.620Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Implement computed properties with `computed()` from Vue; avoid using a `ref` with a `watch` if a `computed` would work instead

Applied to files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-11-24T19:47:45.616Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API

Applied to files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
📚 Learning: 2025-12-09T03:49:52.828Z 
Learnt from: christian-byrne
Repo: Comfy-Org/ComfyUI_frontend PR: 6300
File: src/platform/updates/components/WhatsNewPopup.vue:5-13
Timestamp: 2025-12-09T03:49:52.828Z
Learning: In Vue files across the ComfyUI_frontend repo, when a button is needed, prefer the repo's common button components from src/components/button/ (IconButton.vue, TextButton.vue, IconTextButton.vue) over plain HTML <button> elements. These components wrap PrimeVue with the project’s design system styling. Use only the common button components for consistency and theming, and import them from src/components/button/ as needed.

Applied to files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
📚 Learning: 2025-12-09T21:40:12.361Z 
Learnt from: benceruleanlu
Repo: Comfy-Org/ComfyUI_frontend PR: 7297
File: src/components/actionbar/ComfyActionbar.vue:33-43
Timestamp: 2025-12-09T21:40:12.361Z
Learning: In Vue single-file components, allow inline Tailwind CSS class strings for static classes and avoid extracting them into computed properties solely for readability. Prefer keeping static class names inline for simplicity and performance. For dynamic or conditional classes, use Vue bindings (e.g., :class) to compose classes.

Applies to all Vue files in the repository (e.g., src/**/*.vue) where Tailwind utilities are used for static styling.

Applied to files:

  • src/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
📚 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/renderer/extensions/vueNodes/components/LGraphNode.vue
  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
📚 Learning: 2025-11-24T19:47:45.616Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use Teleport/Suspense when needed for component rendering

Applied to files:

  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
📚 Learning: 2025-11-24T19:47:02.860Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles

Applied to files:

  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
📚 Learning: 2025-11-24T19:47:02.860Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Use Suspense for async components

Applied to files:

  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
📚 Learning: 2025-11-24T19:47:02.860Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize Vue 3's Teleport component when needed

Applied to files:

  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
📚 Learning: 2025-12-09T20:22:23.620Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use Suspense for async components

Applied to files:

  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
📚 Learning: 2025-12-09T20:22:23.620Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Avoid new usage of PrimeVue components; prefer shadcn/vue or Reka UI instead

Applied to files:

  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
📚 Learning: 2025-12-09T20:22:23.620Z 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Utilize Vue 3's Teleport component when needed

Applied to files:

  • src/renderer/extensions/vueNodes/components/ImagePreview.vue
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
  • GitHub Check: deploy-and-comment
  • GitHub Check: setup
  • GitHub Check: test
  • GitHub Check: lint-and-format
  • GitHub Check: collect
🔇 Additional comments (4)
src/renderer/extensions/vueNodes/components/ImagePreview.vue (3)

5-5: Local keydown handler is technically sound but changes focus behavior.

The @keydown="handleKeyDown" binding on the root container correctly handles keyboard events that bubble up from the focused imageWrapperEl (line 11, tabindex="0"). This is standard DOM event handling.

However, this requires users to focus inside the ImagePreview component to use keyboard navigation, rather than having it work when the parent LGraphNode is focused (as the inject pattern enabled).

Please verify that the keyboard navigation UX meets requirements. Test that arrow key navigation works as expected for the intended user workflow.

124-124: LGTM: Import cleanup is correct.

The removal of ShallowRef and inject correctly reflects the transition from the inject/provide pattern to local event handling.

281-310: LGTM: handleKeyDown implementation is solid.

The keyboard navigation logic correctly handles:

  • Arrow keys for previous/next navigation with wrapping
  • Home/End keys for first/last image
  • Early return when only one image exists
  • Proper event.preventDefault() to avoid unwanted scrolling
src/renderer/extensions/vueNodes/components/LGraphNode.vue (1)

134-134: Move the @keydown handler to the focusable imageWrapperEl element.

The @keydown handler is currently attached to the outer image-preview div, which has no tabindex and cannot receive keyboard focus. Only the imageWrapperEl child element is focusable with tabindex="0". This prevents arrow key navigation (and Home/End keys) from working, breaking the accessibility requirement that keyboard navigation should respond when the image preview is focused.

Move @keydown="handleKeyDown" from the outer image-preview div to the imageWrapperEl div.

⛔ Skipped due to learnings 
Learnt from: simula-r
Repo: Comfy-Org/ComfyUI_frontend PR: 7252
File: src/renderer/extensions/vueNodes/components/ImagePreview.vue:151-158
Timestamp: 2025-12-11T03:55:51.755Z
Learning: In src/renderer/extensions/vueNodes/components/ImagePreview.vue and LGraphNode.vue, keyboard navigation for image galleries should respond to node-level focus (via keyEvent injection from LGraphNode), not require focus within the image preview wrapper itself. This allows users to navigate the gallery with arrow keys immediately when the node is focused/selected.

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,ts,js} : Use useIntersectionObserver for visibility detection instead of custom scroll handlers

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Implement computed properties with `computed()` from Vue; avoid using a `ref` with a `watch` if a `computed` would work instead

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Be judicious with addition of new refs or other state: prefer props, avoid redundant `computed`, and prefer `computed` over `watch`

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use lifecycle hooks: onMounted, onUpdated in Vue 3 Composition API

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `ref` for reactive state in Vue Composition API components

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Implement computed() for derived state in Vue 3 Composition API

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Implement computed properties with computed()

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Use `watch` and `watchEffect` for side effects in Vue components

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Use ref/reactive for state management in Vue 3 Composition API

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-09T20:22:23.620Z
Learning: Applies to **/*.vue : Implement lifecycle hooks using `onMounted`, `onUpdated`, and other Vue lifecycle functions

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link

github-actions bot commented Dec 12, 2025 •
edited
Loading

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 12/12/2025, 10:13:32 PM UTC

📈 Summary

  • Total Tests: 499
  • Passed: 486 ✅
  • Failed: 0
  • Flaky: 4 ⚠️
  • Skipped: 9 ⏭️

📊 Test Reports by Browser

  • ✅ chromium: View Report • ✅ 477 / ❌ 0 / ⚠️ 4 / ⏭️ 9
  • ✅ chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • ✅ chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
  • ✅ mobile-chrome: View Report • ✅ 6 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

@github-actions
Copy link

github-actions bot commented Dec 12, 2025 •
edited
Loading

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 12/12/2025, 10:04:27 PM UTC

🔗 Links

🎉 Your Storybook is ready for review!

@github-actions
Copy link

github-actions bot commented Dec 12, 2025

Bundle Size Report

Summary

  • Raw size: 17.1 MB baseline 17.1 MB — 🟢 -376 B
  • Gzip: 3.39 MB baseline 3.39 MB — 🟢 -123 B
  • Brotli: 2.6 MB baseline 2.6 MB — 🟢 -136 B
  • Bundles: 97 current • 97 baseline • 39 added / 39 removed

Category Glance
Graph Workspace 🟢 -376 B (983 kB) · Vendor & Third-Party ⚪ 0 B (8.56 MB) · Other ⚪ 0 B (3.81 MB) · App Entry Points ⚪ 0 B (3.24 MB) · Panels & Settings ⚪ 0 B (298 kB) · UI Components ⚪ 0 B (178 kB) · + 3 more

Per-category breakdown
App Entry Points — 3.24 MB (baseline 3.24 MB) • ⚪ 0 B

Main entry bundles and manifests

File Before After Δ Raw Δ Gzip Δ Brotli
assets/index-B6sLUE0g.js (new) — 3.01 MB 🔴 +3.01 MB 🔴 +626 kB 🔴 +476 kB
assets/index-Cptm5_HR.js (removed) 3.01 MB — 🟢 -3.01 MB 🟢 -626 kB 🟢 -477 kB
assets/index-Caf-MhKv.js (new) — 227 kB 🔴 +227 kB 🔴 +48.6 kB 🔴 +39.9 kB
assets/index-ncDDatU8.js (removed) 227 kB — 🟢 -227 kB 🟢 -48.6 kB 🟢 -39.8 kB
assets/index-BydX8XP4.js (removed) 345 B — 🟢 -345 B 🟢 -245 B 🟢 -235 B
assets/index-Cwi6vuwE.js (new) — 345 B 🔴 +345 B 🔴 +245 B 🔴 +239 B

Status: 3 added / 3 removed

Graph Workspace — 983 kB (baseline 983 kB) • 🟢 -376 B

Graph editor runtime, canvas, workflow orchestration

File Before After Δ Raw Δ Gzip Δ Brotli
assets/GraphView-DjJAWPeR.js (removed) 983 kB — 🟢 -983 kB 🟢 -190 kB 🟢 -145 kB
assets/GraphView-CiuSfMOn.js (new) — 983 kB 🔴 +983 kB 🔴 +190 kB 🔴 +145 kB

Status: 1 added / 1 removed

Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 B

Top-level views, pages, and routed surfaces

File Before After Δ Raw Δ Gzip Δ Brotli
assets/UserSelectView-ChgGBVvP.js (removed) 6.54 kB — 🟢 -6.54 kB 🟢 -2.14 kB 🟢 -1.89 kB
assets/UserSelectView-YPv5XQp3.js (new) — 6.54 kB 🔴 +6.54 kB 🔴 +2.14 kB 🔴 +1.9 kB

Status: 1 added / 1 removed

Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 B

Configuration panels, inspectors, and settings screens

File Before After Δ Raw Δ Gzip Δ Brotli
assets/LegacyCreditsPanel-D9Nhc5FL.js (removed) 21.4 kB — 🟢 -21.4 kB 🟢 -5.16 kB 🟢 -4.5 kB
assets/LegacyCreditsPanel-ISUoj6I-.js (new) — 21.4 kB 🔴 +21.4 kB 🔴 +5.16 kB 🔴 +4.5 kB
assets/KeybindingPanel-BeUC9oHl.js (removed) 13.6 kB — 🟢 -13.6 kB 🟢 -3.42 kB 🟢 -3.01 kB
assets/KeybindingPanel-DJX0uKcz.js (new) — 13.6 kB 🔴 +13.6 kB 🔴 +3.42 kB 🔴 +3.03 kB
assets/ExtensionPanel-MMhzbojy.js (new) — 10.8 kB 🔴 +10.8 kB 🔴 +2.57 kB 🔴 +2.26 kB
assets/ExtensionPanel-TP0BLWlV.js (removed) 10.8 kB — 🟢 -10.8 kB 🟢 -2.57 kB 🟢 -2.26 kB
assets/AboutPanel-B6Mlo1E4.js (removed) 9.16 kB — 🟢 -9.16 kB 🟢 -2.46 kB 🟢 -2.21 kB
assets/AboutPanel-BVq3Py_S.js (new) — 9.16 kB 🔴 +9.16 kB 🔴 +2.46 kB 🔴 +2.21 kB
assets/ServerConfigPanel-CK6fEHXF.js (removed) 6.56 kB — 🟢 -6.56 kB 🟢 -1.83 kB 🟢 -1.63 kB
assets/ServerConfigPanel-DxTBbmOj.js (new) — 6.56 kB 🔴 +6.56 kB 🔴 +1.83 kB 🔴 +1.63 kB
assets/UserPanel-CWUrmDBR.js (removed) 6.23 kB — 🟢 -6.23 kB 🟢 -1.72 kB 🟢 -1.51 kB
assets/UserPanel-DN8VOmfD.js (new) — 6.23 kB 🔴 +6.23 kB 🔴 +1.72 kB 🔴 +1.51 kB
assets/settings-B_sqawkt.js 27.3 kB 27.3 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-BhbWhsRg.js 101 B 101 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-BlDXT7wp.js 21.7 kB 21.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-Bz8HAvJu.js 21.1 kB 21.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-C2vW8UNv.js 24.2 kB 24.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-C9vsDM17.js 25.1 kB 25.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DWD49kQp.js 33.3 kB 33.3 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DZE27_Iz.js 25.9 kB 25.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-OXaZPcZF.js 26.6 kB 26.6 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-RbkKsnDG.js 25.2 kB 25.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 6 added / 6 removed

UI Components — 178 kB (baseline 178 kB) • ⚪ 0 B

Reusable component library chunks

File Before After Δ Raw Δ Gzip Δ Brotli
assets/Load3D.vue_vue_type_script_setup_true_lang-DL69-Wfc.js (removed) 53.7 kB — 🟢 -53.7 kB 🟢 -8.49 kB 🟢 -7.29 kB
assets/Load3D.vue_vue_type_script_setup_true_lang-DxvKGTCT.js (new) — 53.7 kB 🔴 +53.7 kB 🔴 +8.49 kB 🔴 +7.29 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-BCmCXYr4.js (new) — 48.1 kB 🔴 +48.1 kB 🔴 +10.4 kB 🔴 +8.98 kB
assets/WidgetSelect.vue_vue_type_script_setup_true_lang-BFfV5w6L.js (removed) 48.1 kB — 🟢 -48.1 kB 🟢 -10.4 kB 🟢 -9 kB
assets/LazyImage.vue_vue_type_script_setup_true_lang-B7hXldrT.js (new) — 48 kB 🔴 +48 kB 🔴 +10.6 kB 🔴 +9.32 kB
assets/LazyImage.vue_vue_type_script_setup_true_lang-DZc3TYje.js (removed) 48 kB — 🟢 -48 kB 🟢 -10.6 kB 🟢 -9.32 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-CGXTrFnd.js (new) — 12.9 kB 🔴 +12.9 kB 🔴 +3.37 kB 🔴 +2.97 kB
assets/WidgetInputNumber.vue_vue_type_script_setup_true_lang-CikKY5sh.js (removed) 12.9 kB — 🟢 -12.9 kB 🟢 -3.37 kB 🟢 -2.98 kB
assets/ComfyQueueButton-BaMuVpPS.js (new) — 8.44 kB 🔴 +8.44 kB 🔴 +2.48 kB 🔴 +2.22 kB
assets/ComfyQueueButton-Bk7wF2jo.js (removed) 8.44 kB — 🟢 -8.44 kB 🟢 -2.48 kB 🟢 -2.22 kB
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-BrrUZVDC.js (removed) 2.15 kB — 🟢 -2.15 kB 🟢 -897 B 🟢 -766 B
assets/WidgetLayoutField.vue_vue_type_script_setup_true_lang-CeHmdi76.js (new) — 2.15 kB 🔴 +2.15 kB 🔴 +896 B 🔴 +774 B
assets/MediaTitle.vue_vue_type_script_setup_true_lang-BoiIFHqp.js (removed) 897 B — 🟢 -897 B 🟢 -501 B 🟢 -429 B
assets/MediaTitle.vue_vue_type_script_setup_true_lang-DcsN1KBD.js (new) — 897 B 🔴 +897 B 🔴 +503 B 🔴 +460 B
assets/UserAvatar.vue_vue_type_script_setup_true_lang-Bjfb_hoW.js 1.34 kB 1.34 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetButton-Bm2lwPFd.js 2.04 kB 2.04 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 7 added / 7 removed

Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 B

Stores, services, APIs, and repositories

File Before After Δ Raw Δ Gzip Δ Brotli
assets/keybindingService--Vosooin.js (new) — 7.51 kB 🔴 +7.51 kB 🔴 +1.83 kB 🔴 +1.58 kB
assets/keybindingService-CIcC579y.js (removed) 7.51 kB — 🟢 -7.51 kB 🟢 -1.83 kB 🟢 -1.58 kB
assets/audioService-D13ci3Zv.js (removed) 2.2 kB — 🟢 -2.2 kB 🟢 -963 B 🟢 -822 B
assets/audioService-DR_FTTfs.js (new) — 2.2 kB 🔴 +2.2 kB 🔴 +962 B 🔴 +821 B
assets/serverConfigStore-BP9UaJXd.js 2.83 kB 2.83 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 2 added / 2 removed

Utilities & Hooks — 3.18 kB (baseline 3.18 kB) • ⚪ 0 B

Helpers, composables, and utility bundles

File Before After Δ Raw Δ Gzip Δ Brotli
assets/audioUtils-CVb-9wBp.js (new) — 1.41 kB 🔴 +1.41 kB 🔴 +651 B 🔴 +543 B
assets/audioUtils-D5l5aGC2.js (removed) 1.41 kB — 🟢 -1.41 kB 🟢 -650 B 🟢 -543 B
assets/mathUtil-CD4DsosH.js 1.32 kB 1.32 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeFilterUtil-CXKCRJ-m.js 460 B 460 B ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 1 added / 1 removed

Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 B

External libraries and shared vendor chunks

File Before After Δ Raw Δ Gzip Δ Brotli
assets/vendor-chart-W_3Knk2t.js 452 kB 452 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-other-BzuNIfYH.js 3.98 MB 3.98 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-primevue-CmhMHYBF.js 1.96 MB 1.96 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-three-aR6ntw5X.js 1.37 MB 1.37 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-tiptap-DCLYW5rb.js 232 kB 232 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-vue-C3MDzIsc.js 160 kB 160 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-xterm-BZLod3g9.js 407 kB 407 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
Other — 3.81 MB (baseline 3.81 MB) • ⚪ 0 B

Bundles that do not match a named category

File Before After Δ Raw Δ Gzip Δ Brotli
assets/WidgetRecordAudio-CIQwtJK9.js (removed) 20.4 kB — 🟢 -20.4 kB 🟢 -5.23 kB 🟢 -4.63 kB
assets/WidgetRecordAudio-CUfHzwG9.js (new) — 20.4 kB 🔴 +20.4 kB 🔴 +5.23 kB 🔴 +4.63 kB
assets/AudioPreviewPlayer-1OawtQz8.js (removed) 13.4 kB — 🟢 -13.4 kB 🟢 -3.37 kB 🟢 -3.01 kB
assets/AudioPreviewPlayer-B6A2n_04.js (new) — 13.4 kB 🔴 +13.4 kB 🔴 +3.37 kB 🔴 +3.01 kB
assets/WidgetGalleria-BFrCzXUE.js (removed) 4.1 kB — 🟢 -4.1 kB 🟢 -1.44 kB 🟢 -1.3 kB
assets/WidgetGalleria-DftrGcGF.js (new) — 4.1 kB 🔴 +4.1 kB 🔴 +1.44 kB 🔴 +1.3 kB
assets/WidgetColorPicker-DtDL-9CA.js (new) — 3.41 kB 🔴 +3.41 kB 🔴 +1.38 kB 🔴 +1.23 kB
assets/WidgetColorPicker-JPiA9k8j.js (removed) 3.41 kB — 🟢 -3.41 kB 🟢 -1.38 kB 🟢 -1.23 kB
assets/WidgetTextarea-BoLriZVt.js (removed) 3.08 kB — 🟢 -3.08 kB 🟢 -1.21 kB 🟢 -1.08 kB
assets/WidgetTextarea-CworlkX9.js (new) — 3.08 kB 🔴 +3.08 kB 🔴 +1.21 kB 🔴 +1.07 kB
assets/WidgetMarkdown-BiOnv-S1.js (removed) 3.08 kB — 🟢 -3.08 kB 🟢 -1.28 kB 🟢 -1.12 kB
assets/WidgetMarkdown-CWZ8QH2v.js (new) — 3.08 kB 🔴 +3.08 kB 🔴 +1.28 kB 🔴 +1.13 kB
assets/WidgetAudioUI-BTqO_Bug.js (new) — 2.86 kB 🔴 +2.86 kB 🔴 +1.16 kB 🔴 +1.05 kB
assets/WidgetAudioUI-DjFmZJ54.js (removed) 2.86 kB — 🟢 -2.86 kB 🟢 -1.17 kB 🟢 -1.06 kB
assets/WidgetInputText-BTbG52vb.js (new) — 1.99 kB 🔴 +1.99 kB 🔴 +916 B 🔴 +828 B
assets/WidgetInputText-DLaxcKd8.js (removed) 1.99 kB — 🟢 -1.99 kB 🟢 -917 B 🟢 -852 B
assets/WidgetToggleSwitch-B56OjlL-.js (removed) 1.76 kB — 🟢 -1.76 kB 🟢 -831 B 🟢 -732 B
assets/WidgetToggleSwitch-BPk_idme.js (new) — 1.76 kB 🔴 +1.76 kB 🔴 +832 B 🔴 +734 B
assets/MediaImageBottom-BTR-fNJe.js (new) — 1.55 kB 🔴 +1.55 kB 🔴 +736 B 🔴 +640 B
assets/MediaImageBottom-J1undEoi.js (removed) 1.55 kB — 🟢 -1.55 kB 🟢 -734 B 🟢 -639 B
assets/MediaAudioBottom-1wtWhgy1.js (removed) 1.51 kB — 🟢 -1.51 kB 🟢 -733 B 🟢 -652 B
assets/MediaAudioBottom-CDDivFWY.js (new) — 1.51 kB 🔴 +1.51 kB 🔴 +735 B 🔴 +653 B
assets/Media3DBottom-B1uAPqUw.js (new) — 1.5 kB 🔴 +1.5 kB 🔴 +734 B 🔴 +651 B
assets/Media3DBottom-CC4Iuk2b.js (removed) 1.5 kB — 🟢 -1.5 kB 🟢 -730 B 🟢 -650 B
assets/MediaVideoBottom-B6-F3ZQS.js (new) — 1.5 kB 🔴 +1.5 kB 🔴 +737 B 🔴 +652 B
assets/MediaVideoBottom-BThJ0WNZ.js (removed) 1.5 kB — 🟢 -1.5 kB 🟢 -732 B 🟢 -652 B
assets/Media3DTop-Bz8qrhkJ.js (new) — 1.49 kB 🔴 +1.49 kB 🔴 +765 B 🔴 +653 B
assets/Media3DTop-Lz7-u4QU.js (removed) 1.49 kB — 🟢 -1.49 kB 🟢 -765 B 🟢 -654 B
assets/WidgetSelect-CTWWfAj-.js (removed) 655 B — 🟢 -655 B 🟢 -340 B 🟢 -291 B
assets/WidgetSelect-D5UNnqvT.js (new) — 655 B 🔴 +655 B 🔴 +340 B 🔴 +289 B
assets/WidgetInputNumber-B0o3AqFF.js (removed) 595 B — 🟢 -595 B 🟢 -328 B 🟢 -274 B
assets/WidgetInputNumber-BHbkd8rX.js (new) — 595 B 🔴 +595 B 🔴 +327 B 🔴 +272 B
assets/Load3D-Cph909oB.js (removed) 424 B — 🟢 -424 B 🟢 -263 B 🟢 -223 B
assets/Load3D-DF-TtjnO.js (new) — 424 B 🔴 +424 B 🔴 +267 B 🔴 +223 B
assets/WidgetLegacy-CnHDHrpp.js (new) — 364 B 🔴 +364 B 🔴 +235 B 🔴 +229 B
assets/WidgetLegacy-CsX1yaQH.js (removed) 364 B — 🟢 -364 B 🟢 -235 B 🟢 -193 B
assets/commands-_s-RvhJR.js 13.6 kB 13.6 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-BuUILW6P.js 13 kB 13 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-BV4R6fLx.js 14.9 kB 14.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-BWp4HdfU.js 101 B 101 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-CLwPdnT6.js 14.2 kB 14.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-CWMchBmd.js 15.9 kB 15.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DazTQhtc.js 12.9 kB 12.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DmWrOe93.js 13.7 kB 13.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DwiH7Kr6.js 13.8 kB 13.8 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-mS3LCNPn.js 14.5 kB 14.5 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-BMi-Aksj.js 99 kB 99 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-CqR8skJT.js 73.1 kB 73.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-Cw9RZWRY.js 89 B 89 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-DcRHAFEy.js 81.7 kB 81.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-DdFdLxku.js 72.2 kB 72.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-DJAtuVu5.js 84.3 kB 84.3 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-DK8I9Rk3.js 114 kB 114 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-gP_ssnMb.js 83.4 kB 83.4 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-nxXY9vGp.js 94 kB 94 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-Ycd3gqkA.js 86.5 kB 86.5 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaAudioTop-taU5Yj_Q.js 1.46 kB 1.46 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaImageTop-BoT3yC-l.js 1.75 kB 1.75 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/MediaVideoTop-Csf8f_9c.js 2.65 kB 2.65 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-BC3OlaIn.js 342 kB 342 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-BsqN8-W1.js 285 kB 285 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-Bw_Jitw_.js 101 B 101 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-CK2saYDx.js 307 kB 307 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-Cm5kR4Hi.js 306 kB 306 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-CMrh-uxB.js 310 kB 310 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-DlUIOit1.js 369 kB 369 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-DNu_xoP2.js 282 kB 282 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-DpcvlpZe.js 303 kB 303 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-IyjOYIl-.js 317 kB 317 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetChart-CWEwKtMY.js 2.48 kB 2.48 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/WidgetImageCompare-DSf2ZEwg.js 2.21 kB 2.21 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/widgetPropFilter-BIbGSUAt.js 1.28 kB 1.28 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 18 added / 18 removed

@christian-byrne christian-byrne merged commit 9c15729 into main Dec 12, 2025
32 checks passed
@christian-byrne christian-byrne deleted the refactor/image-preview-lg-node-event-handling branch December 12, 2025 22:40
Enferlain pushed a commit to Enferlain/ComfyUI_frontend that referenced this pull request Dec 18, 2025
@simula-r @Enferlain
refactor: stop fighting the DOM (Comfy-Org#7421)
51f2a11 
## Summary

Remove keyDown provider on the LGraphNode, remove inject on widget.

## Changes

- **What**: LGraphNode.vue ImagePreview.vue
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7421-refactor-stop-fighting-the-DOM-2c76d73d365081e6b5e9c99a61bbd883)
by [Unito](https://www.unito.io)
Yourz pushed a commit that referenced this pull request Dec 24, 2025
@simula-r @Yourz
refactor: stop fighting the DOM (#7421)
0d85eb9 
## Summary

Remove keyDown provider on the LGraphNode, remove inject on widget.

## Changes

- **What**: LGraphNode.vue ImagePreview.vue
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7421-refactor-stop-fighting-the-DOM-2c76d73d365081e6b5e9c99a61bbd883)
by [Unito](https://www.unito.io)
@coderabbitai coderabbitai bot mentioned this pull request Jan 5, 2026
Open
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@christian-byrne christian-byrne christian-byrne approved these changes

Assignees

No one assigned

Labels

size:M This PR changes 30-99 lines, ignoring generated files.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@simula-r @christian-byrne