Fix vue node slot position calculation#7877
Conversation
dosubot
bot
added
the
size:L
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (2)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the 📝 WalkthroughWalkthroughRefactors slot-position computation to centralize via getSlotPosition and gate Vue-specific logic behind LiteGraph.vueNodesMode; reduces exported slot helpers. Adds test helpers (waitForGraphNodes, enterSubgraph) and an E2E test that drills into subgraphs and verifies slot linking behavior. Changes
Sequence DiagramsequenceDiagram
participant Test as E2E Test
participant ComfyPage as ComfyPage Fixture
participant VueHelpers as VueNodeHelpers Fixture
participant App as window['app'] / Canvas Graph
participant DOM as Browser DOM
Test->>ComfyPage: create blank workflow & add node
Test->>ComfyPage: convert node -> subgraph
Test->>VueHelpers: enterSubgraph(nodeId?)
VueHelpers->>DOM: click subgraph-enter-button
Test->>ComfyPage: waitForGraphNodes(count)
ComfyPage->>App: query `canvas.graph` (includeSubgraph=true)
App-->>ComfyPage: return node refs
Test->>DOM: query slot elements for coordinates
DOM-->>Test: return slot positions
Test->>DOM: simulate drag from subgraph input -> target slot
DOM->>App: drop triggers connection creation
App-->>Test: report link counts on target/other slots
Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 2✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 01/14/2026, 02:03:41 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Tests: ❌ FailedResults: 499 passed, 2 failed, 2 flaky, 8 skipped (Total: 511) ❌ Failed Tests📊 Browser Reports
|
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.32 MB (baseline 3.32 MB) • 🔴 +8 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 1.04 MB (baseline 1.04 MB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.63 kB (baseline 6.63 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 372 kB (baseline 372 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 206 kB (baseline 206 kB) • ⚪ 0 BReusable component library chunks
Status: 8 added / 8 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 1.41 kB (baseline 1.41 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 9.19 MB (baseline 9.19 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 5.25 MB (baseline 5.25 MB) • ⚪ 0 BBundles that do not match a named category
Status: 16 added / 16 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: 1
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (5)
browser_tests/fixtures/ComfyPage.tsbrowser_tests/fixtures/VueNodeHelpers.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/lib/litegraph/src/LGraphNode.tssrc/renderer/core/canvas/litegraph/slotCalculations.ts
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,vue}: Use TypeScript exclusively; do not write new JavaScript code
Use sorted and grouped imports organized by plugin/source
Enforce ESLint rules including Vue + TypeScript rules, disallow floating promises, disallow unused imports, and restrict i18n raw text in templates
Do not useanytype oras anytype assertions; fix the underlying type issue instead
Write code that is expressive and self-documenting; avoid redundant comments and clean as you go
Keep functions short and functional; minimize nesting and follow the arrow anti-pattern
Avoid mutable state; prefer immutability and assignment at point of declaration
Use function declarations instead of function expressions when possible
Use es-toolkit for utility functions
Implement proper error handling in code
Files:
browser_tests/fixtures/VueNodeHelpers.tssrc/lib/litegraph/src/LGraphNode.tssrc/renderer/core/canvas/litegraph/slotCalculations.tsbrowser_tests/fixtures/ComfyPage.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
**/*.{ts,tsx,vue,js,jsx,json,css}
📄 CodeRabbit inference engine (AGENTS.md)
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, and 80-character line width
Files:
browser_tests/fixtures/VueNodeHelpers.tssrc/lib/litegraph/src/LGraphNode.tssrc/renderer/core/canvas/litegraph/slotCalculations.tsbrowser_tests/fixtures/ComfyPage.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Minimize the surface area (exported values) of each module and composable
Files:
browser_tests/fixtures/VueNodeHelpers.tssrc/lib/litegraph/src/LGraphNode.tssrc/renderer/core/canvas/litegraph/slotCalculations.tsbrowser_tests/fixtures/ComfyPage.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
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/lib/litegraph/src/LGraphNode.tssrc/renderer/core/canvas/litegraph/slotCalculations.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/lib/litegraph/src/LGraphNode.tssrc/renderer/core/canvas/litegraph/slotCalculations.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/lib/litegraph/src/LGraphNode.tssrc/renderer/core/canvas/litegraph/slotCalculations.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/lib/litegraph/src/LGraphNode.tssrc/renderer/core/canvas/litegraph/slotCalculations.ts
src/lib/litegraph/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
src/lib/litegraph/**/*.{js,ts,jsx,tsx}: Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns using thepnpm lint:fixcommand
Take advantage ofTypedArraysubarraywhen appropriate
Thesizeandposproperties ofRectangleshare the same array buffer (subarray); they may be used to set the rectangle's size and position
Prefer single lineifsyntax over adding curly braces, when the statement has a very concise expression and concise, single line statement
Do not replace&&=or||=with=when there is no reason to do so. If you do find a reason to remove either&&=or||=, leave a comment explaining why the removal occurred
When writing methods, prefer returning idiomatic JavaScriptundefinedovernull
Files:
src/lib/litegraph/src/LGraphNode.ts
src/lib/litegraph/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Files:
src/lib/litegraph/src/LGraphNode.ts
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (browser_tests/CLAUDE.md)
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}: Test user workflows in browser tests
Use Playwright fixtures for browser tests
Follow naming conventions for browser tests
Check assets/ directory for test data when writing tests
Prefer specific selectors in browser tests
Test across multiple viewports
Files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
browser_tests/**/*.spec.ts
📄 CodeRabbit inference engine (AGENTS.md)
browser_tests/**/*.spec.ts: Use E2E tests inbrowser_tests/**/*.spec.tswith Playwright framework
Do not usewaitForTimeoutin Playwright tests; use Locator actions and retrying assertions instead
Use tags like@mobileand@2xin Playwright tests for relevant test variations; tags are respected by config
Files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
🧠 Learnings (19)
📓 Common learnings
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
browser_tests/fixtures/VueNodeHelpers.tssrc/lib/litegraph/src/LGraphNode.tsbrowser_tests/fixtures/ComfyPage.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 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:
browser_tests/fixtures/VueNodeHelpers.tssrc/lib/litegraph/src/LGraphNode.tssrc/renderer/core/canvas/litegraph/slotCalculations.tsbrowser_tests/fixtures/ComfyPage.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.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:
browser_tests/fixtures/VueNodeHelpers.tssrc/lib/litegraph/src/LGraphNode.tssrc/renderer/core/canvas/litegraph/slotCalculations.tsbrowser_tests/fixtures/ComfyPage.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-12-17T00:40:09.635Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).
Applied to files:
browser_tests/fixtures/VueNodeHelpers.tssrc/lib/litegraph/src/LGraphNode.tssrc/renderer/core/canvas/litegraph/slotCalculations.tsbrowser_tests/fixtures/ComfyPage.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-12-30T22:22:33.836Z
Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().
Applied to files:
browser_tests/fixtures/VueNodeHelpers.tssrc/lib/litegraph/src/LGraphNode.tssrc/renderer/core/canvas/litegraph/slotCalculations.tsbrowser_tests/fixtures/ComfyPage.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.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:
browser_tests/fixtures/VueNodeHelpers.tssrc/lib/litegraph/src/LGraphNode.tssrc/renderer/core/canvas/litegraph/slotCalculations.tsbrowser_tests/fixtures/ComfyPage.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : The `size` and `pos` properties of `Rectangle` share the same array buffer (`subarray`); they may be used to set the rectangle's size and position
Applied to files:
src/lib/litegraph/src/LGraphNode.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues
Applied to files:
src/lib/litegraph/src/LGraphNode.tsbrowser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-12-21T06:04:12.562Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-21T06:04:12.562Z
Learning: Applies to **/*.{ts,tsx} : Minimize the surface area (exported values) of each module and composable
Applied to files:
src/renderer/core/canvas/litegraph/slotCalculations.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Do not replace `&&=` or `||=` with `=` when there is no reason to do so. If you do find a reason to remove either `&&=` or `||=`, leave a comment explaining why the removal occurred
Applied to files:
src/renderer/core/canvas/litegraph/slotCalculations.tsbrowser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{js,ts,jsx,tsx} : When adding features, always write vitest unit tests using cursor rules in @.cursor
Applied to files:
browser_tests/fixtures/ComfyPage.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-12-13T05:54:35.779Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7415
File: browser_tests/tests/mobileBaseline.spec.ts:17-22
Timestamp: 2025-12-13T05:54:35.779Z
Learning: In browser_tests tests for the Comfy-Org/ComfyUI_frontend repository, the `comfyPage.loadWorkflow()` method already handles all necessary synchronization and waiting. No additional `await comfyPage.nextFrame()` call is needed before taking screenshots after loading a workflow.
Applied to files:
browser_tests/fixtures/ComfyPage.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Take advantage of `TypedArray` `subarray` when appropriate
Applied to files:
browser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Applied to files:
browser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Prefer specific selectors in browser tests
Applied to files:
browser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns using the `pnpm lint:fix` command
Applied to files:
browser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test user workflows in browser tests
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-12-13T05:34:15.488Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7415
File: browser_tests/tests/mobileBaseline.spec.ts:7-15
Timestamp: 2025-12-13T05:34:15.488Z
Learning: In Playwright tests for the ComfyUI frontend, the toPass() assertion uses incremental backoff during retries. When a test may involve async operations, increasing the timeout (e.g., to 5000 ms) can be sufficient instead of aggressively extending timeouts. Apply this understanding to tests under browser_tests/tests/; if not resolved, review the toPass() backoff behavior and ensure timeouts align with expected async completion without masking issues.
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
🧬 Code graph analysis (3)
src/lib/litegraph/src/LGraphNode.ts (1)
src/renderer/core/canvas/litegraph/slotCalculations.ts (1)
getSlotPosition(136-189)
browser_tests/fixtures/ComfyPage.ts (3)
src/scripts/app.ts (1)
graph(165-167)browser_tests/fixtures/VueNodeHelpers.ts (1)
nodes(14-16)src/lib/litegraph/src/LGraphNode.ts (4)
LGraphNode(209-211)LGraphNode(221-4193)LGraphNode(743-751)LGraphNode(753-759)
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts (1)
browser_tests/helpers/fitToView.ts (1)
fitToViewInstant(15-104)
⏰ 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). (4)
- GitHub Check: test
- GitHub Check: lint-and-format
- GitHub Check: setup
- GitHub Check: collect
🔇 Additional comments (4)
src/lib/litegraph/src/LGraphNode.ts (1)
3346-3348: Centralizing slot position viagetSlotPositionlooks correct
getInputPos/getOutputPosnow delegate to the sharedgetSlotPositionutility, so both Vue and LiteGraph nodes use the same DOM/layout‑aware path with consistent fallbacks. Signatures are preserved and the change keeps behavior aligned with the new slot calculation pipeline.Also applies to: 3366-3368
src/renderer/core/canvas/litegraph/slotCalculations.ts (1)
48-56: Slot calculation helpers are correctly internalized behindgetSlotPositionMaking
calculateInputSlotPos/calculateOutputSlotPosinternal and routing external callers throughgetSlotPositionkeeps a single public API while preserving the same collapsed/absolute/default‑stack behavior. TheSlotPositionContextconstruction ingetSlotPositionmatches usage inLGraphNode, so Vue and LiteGraph paths stay consistent.Also applies to: 96-126, 136-189
browser_tests/fixtures/ComfyPage.ts (1)
6-6: Subgraph‑aware node lookup and graph‑node wait helper look sound
waitForGraphNodeswatchingwindow['app']?.canvas.graph?.nodes?.lengthplus the updatedgetNodeRefsByType(type, includeSubgraph)that selectscanvas.graphvsgraphgive tests a clear way to target either the active subgraph or the root graph without changing existing call sites. The use of TS‑onlyLGraph/LGraphNodetypes insidepage.evaluateis safe at runtime and keeps the browser context unpolluted.Also applies to: 1594-1619
browser_tests/fixtures/VueNodeHelpers.ts (1)
167-175:enterSubgraphhelper is straightforward and matches test usageSelecting either a specific node container or the whole page and clicking
data-testid="subgraph-enter-button"cleanly encapsulates “enter subgraph” behavior for tests; no additional synchronization is strictly required here since callers already wait on layout/graph state.
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
Outdated
Show resolved
Hide resolved
pythongosssss
added
the
New Browser Test Expectations
|
Updating Playwright Expectations |
github-actions
bot
removed
the
New Browser Test Expectations
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts:
- Line 105: Remove the commented-out call to comfyPage.setup() on the test line
(the dead code left as "// await comfyPage.setup()") rather than leaving it
commented; if setup is no longer required because loadWorkflow or other test
helpers handle initialization, delete the commented line entirely so the test
file contains no commented-out dead code and version control preserves history
if restoration is needed.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (2)
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.pngis excluded by!**/*.png
📒 Files selected for processing (2)
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/renderer/core/canvas/litegraph/slotCalculations.ts
🧰 Additional context used
📓 Path-based instructions (9)
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (browser_tests/CLAUDE.md)
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}: Test user workflows in browser tests
Use Playwright fixtures for browser tests
Follow naming conventions for browser tests
Check assets/ directory for test data when writing tests
Prefer specific selectors in browser tests
Test across multiple viewports
Files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
browser_tests/**/*.spec.ts
📄 CodeRabbit inference engine (AGENTS.md)
browser_tests/**/*.spec.ts: E2E tests use Playwright and belong inbrowser_tests/**/*.spec.ts
Follow Playwright best practices for E2E testing
Do not use waitForTimeout in Playwright tests - use Locator actions and retrying assertions instead
Use tags like@mobile,@2xin Playwright tests for configuration-aware test selection
Files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
+(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts)
📄 CodeRabbit inference engine (AGENTS.md)
+(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts): Do not write change detector tests - avoid tests that only assert default values
Be parsimonious in testing - do not write redundant tests
Don't Mock What You Don't Own
Files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
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/core/canvas/litegraph/slotCalculations.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Derive component types usingvue-component-type-helpers(ComponentProps,ComponentSlots) instead of separate type files
Use es-toolkit for utility functions
Minimize the surface area (exported values) of each module and composable
Favor pure functions, especially testable ones
Files:
src/renderer/core/canvas/litegraph/slotCalculations.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
src/**/*.{ts,tsx,vue}: Use separateimport typestatements instead of inlinetypein mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, runpnpm formatbefore committing
Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Write code that is expressive and self-documenting - avoid unnecessary comments
Do not add or retain redundant comments - clean as you go
Avoid mutable state - prefer immutability and assignment at point of declaration
Watch out for Code Smells and refactor to avoid them
Files:
src/renderer/core/canvas/litegraph/slotCalculations.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/renderer/core/canvas/litegraph/slotCalculations.ts
src/**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,vue}: Usereffor reactive state,computed()for derived values, andwatch/watchEffectfor side effects in Composition API
Avoid usingrefwithwatchif acomputedwould suffice - minimize refs and derived state
Useprovide/injectfor dependency injection only when simpler alternatives (Store or shared composable) won't work
Leverage VueUse functions for performance-enhancing composables
Use VueUse function for useI18n in composition API for string literals
Files:
src/renderer/core/canvas/litegraph/slotCalculations.ts
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx}: Keep functions short and functional
Minimize nesting (if statements, for loops, etc.)
Use function declarations instead of function expressions when possible
Files:
src/renderer/core/canvas/litegraph/slotCalculations.ts
🧠 Learnings (26)
📓 Common learnings
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Prefer specific selectors in browser tests
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test across multiple viewports
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test user workflows in browser tests
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{js,ts,jsx,tsx} : When adding features, always write vitest unit tests using cursor rules in @.cursor
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to +(tests-ui|src)/**/*.test.ts : Write tests for all changes, especially bug fixes to catch future regressions
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Prefer specific selectors in browser tests
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to browser_tests/**/*.spec.ts : Do not use waitForTimeout in Playwright tests - use Locator actions and retrying assertions instead
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to browser_tests/**/*.spec.ts : Follow Playwright best practices for E2E testing
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-12-13T05:54:35.779Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7415
File: browser_tests/tests/mobileBaseline.spec.ts:17-22
Timestamp: 2025-12-13T05:54:35.779Z
Learning: In browser_tests tests for the Comfy-Org/ComfyUI_frontend repository, the `comfyPage.loadWorkflow()` method already handles all necessary synchronization and waiting. No additional `await comfyPage.nextFrame()` call is needed before taking screenshots after loading a workflow.
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-12-13T05:34:15.488Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7415
File: browser_tests/tests/mobileBaseline.spec.ts:7-15
Timestamp: 2025-12-13T05:34:15.488Z
Learning: In Playwright tests for the ComfyUI frontend, the toPass() assertion uses incremental backoff during retries. When a test may involve async operations, increasing the timeout (e.g., to 5000 ms) can be sufficient instead of aggressively extending timeouts. Apply this understanding to tests under browser_tests/tests/; if not resolved, review the toPass() backoff behavior and ensure timeouts align with expected async completion without masking issues.
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-12-10T03:09:19.636Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7303
File: src/components/topbar/CurrentUserPopover.test.ts:199-205
Timestamp: 2025-12-10T03:09:19.636Z
Learning: For test files in the Comfy-Org/ComfyUI_frontend repository: When writing tests, prefer selecting elements by accessible properties (text content, aria-label, role, accessible name) over data-testid attributes. This ensures tests verify actual user-facing behavior and accessibility compliance.
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Use Playwright fixtures for browser tests
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test across multiple viewports
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to browser_tests/**/*.spec.ts : E2E tests use Playwright and belong in `browser_tests/**/*.spec.ts`
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-12-22T21:36:46.909Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts:189-194
Timestamp: 2025-12-22T21:36:46.909Z
Learning: In the Comfy-Org/ComfyUI_frontend repository test files: Do not stub primitive UI components or customized primitive components (e.g., Button). Instead, import and register the real components in test setup. This ensures tests accurately reflect production behavior and component API usage.
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 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:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to +(tests-ui|src)/**/*.test.ts : Use Vue Test Utils for Component testing and follow best practices for making components easy to test
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 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 setup() function for component logic
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 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:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/renderer/core/canvas/litegraph/slotCalculations.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:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/renderer/core/canvas/litegraph/slotCalculations.ts
📚 Learning: 2025-12-17T00:40:09.635Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/renderer/core/canvas/litegraph/slotCalculations.ts
📚 Learning: 2025-12-30T22:22:33.836Z
Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/renderer/core/canvas/litegraph/slotCalculations.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:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/renderer/core/canvas/litegraph/slotCalculations.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Do not replace `&&=` or `||=` with `=` when there is no reason to do so. If you do find a reason to remove either `&&=` or `||=`, leave a comment explaining why the removal occurred
Applied to files:
src/renderer/core/canvas/litegraph/slotCalculations.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.ts : Minimize the surface area (exported values) of each module and composable
Applied to files:
src/renderer/core/canvas/litegraph/slotCalculations.ts
🧬 Code graph analysis (1)
src/renderer/core/canvas/litegraph/slotCalculations.ts (3)
src/renderer/core/layout/slots/slotIdentifier.ts (1)
getSlotKey(25-40)src/renderer/core/layout/store/layoutStore.ts (1)
layoutStore(1485-1485)src/lib/litegraph/src/LGraphNode.ts (1)
SlotPositionContext(3324-3337)
🔇 Additional comments (4)
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts (1)
997-1042: Good regression test for the subgraph slot positioning fix.This test properly validates the fix for Issue #7446 by:
- Creating a subgraph with a KSampler node
- Entering the subgraph and dragging from the subgraph input slot
- Verifying the connection lands on the correct slot (positive input, not negative)
The test follows Playwright best practices with proper waiting mechanisms (
waitForGraphNodes,nextFrame) instead of arbitrary timeouts.src/renderer/core/canvas/litegraph/slotCalculations.ts (3)
48-56: Good reduction of module surface area.Making
calculateInputSlotPosinternal aligns with the guideline to minimize exported values. The function is now only accessible through the publicgetSlotPositionAPI.
96-126: Consistent API surface reduction.Same treatment as
calculateInputSlotPos— now internal and only accessible viagetSlotPosition.
141-192: Core fix for slot position calculation looks correct.The three-tier fallback strategy is well-structured:
- DOM-registered slot positions (most precise)
- Node layout tree positions (derived)
- Legacy LiteGraph calculation (ultimate fallback)
Gating behind
LiteGraph.vueNodesModeensures the Vue-specific layout data is only consulted when Vue nodes are actually enabled, fixing the subgraph socket positioning bug.
| await comfyPage.setSetting('Comfy.UseNewMenu', 'Top') | ||
| await comfyPage.setSetting('Comfy.VueNodes.Enabled', true) | ||
| await comfyPage.setup() | ||
| // await comfyPage.setup() |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Remove commented-out code instead of leaving it commented.
Dead code should be removed rather than commented out. If this setup call is truly no longer needed (perhaps because loadWorkflow handles it internally), delete the line entirely. Version control preserves history if it needs to be restored.
Proposed fix
- // await comfyPage.setup()📝 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.
| // await comfyPage.setup() |
🤖 Prompt for AI Agents
In @browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts at
line 105, Remove the commented-out call to comfyPage.setup() on the test line
(the dead code left as "// await comfyPage.setup()") rather than leaving it
commented; if setup is no longer required because loadWorkflow or other test
helpers handle initialization, delete the commented line entirely so the test
file contains no commented-out dead code and version control preserves history
if restoration is needed.
|
I am fixing conflicts now |
- update get input/output pos to use getSlotPosition, handling both node types - add regression test
christian-byrne
force-pushed
the
pysssss/fix-link-position-calc
branch
from
521c778 to
1a80229
Compare
christian-byrne
added
the
New Browser Test Expectations
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/renderer/core/canvas/litegraph/slotCalculations.ts (2)
48-56: Don’t silently return(nodeX,nodeY)/(nodeX+width,nodeY)on invalid slot index
calculateInputSlotPos/calculateOutputSlotPosnow return a “valid-looking” coordinate when the slot is missing. That can mask upstream bugs (bad slot index) and produce confusing link behavior.Consider returning a clearly-invalid sentinel (e.g.
[NaN, NaN]) or at least using a consistent “best effort” (e.g. clamp to last slot) depending on how tolerant callers should be.Also applies to: 96-126
124-126: Resolve or document the+1offsetThe
// TODO: Why +1?is now in the centralized calculation path. Either remove the TODO and document the rationale (pixel alignment / stroke width), or compute it from a named constant so it’s intentional.
🤖 Fix all issues with AI agents
In `@browser_tests/fixtures/ComfyPage.ts`:
- Around line 1594-1598: The test helper waitForGraphNodes is using strict
equality on window['app'].canvas.graph.nodes.length === count which is brittle;
update the implementation in waitForGraphNodes to use a non-strict condition
(e.g., >= count) or add a parameter like exact: boolean to choose between exact
and at-least semantics, and use that parameter to decide whether to compare with
=== or >=; ensure the call to page.waitForFunction passes the count and the
option so the function inside the browser uses the correct comparison.
In `@browser_tests/fixtures/VueNodeHelpers.ts`:
- Around line 167-175: enterSubgraph() can click the wrong button when many
subgraph nodes exist and may race because it doesn't wait for visibility; update
enterSubgraph (and the locator built by getNodeLocator when nodeId is provided)
to scope to the specific node when nodeId is passed and to explicitly pick the
first matching enter button when nodeId is omitted (e.g., use the
locator.first() variant), then wait for the button to be visible/ready before
calling click (use the locator waitFor/visibility check on the
'subgraph-enter-button' locator prior to click).
In `@browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts`:
- Around line 997-1042: Test flakiness: after calling
comfyPage.executeCommand('Comfy.Graph.ConvertToSubgraph') and before querying
the inner KSampler, wait for the subgraph Vue nodes (or the KSampler) to appear,
assert that ksamplerNode is defined, and call comfyPage.vueNodes.enterSubgraph
with the node id (e.g.
comfyPage.vueNodes.enterSubgraph(String(ksamplerNode.id))) instead of the no-arg
enter to avoid ambiguous clicks; then proceed to call
comfyPage.getNodeRefsByType('KSampler', true) and the subsequent slot/position
logic.
♻️ Duplicate comments (1)
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts (1)
102-107: Remove commented-out dead code inbeforeEach
This still has// await comfyPage.setup().
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (5)
browser_tests/fixtures/ComfyPage.tsbrowser_tests/fixtures/VueNodeHelpers.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/lib/litegraph/src/LGraphNode.tssrc/renderer/core/canvas/litegraph/slotCalculations.ts
🧰 Additional context used
📓 Path-based instructions (11)
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/core/canvas/litegraph/slotCalculations.tssrc/lib/litegraph/src/LGraphNode.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
src/**/*.ts: Derive component types usingvue-component-type-helpers(ComponentProps,ComponentSlots) instead of separate type files
Use es-toolkit for utility functions
Minimize the surface area (exported values) of each module and composable
Favor pure functions, especially testable ones
Files:
src/renderer/core/canvas/litegraph/slotCalculations.tssrc/lib/litegraph/src/LGraphNode.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
src/**/*.{ts,tsx,vue}: Use separateimport typestatements instead of inlinetypein mixed imports
Apply Prettier formatting with 2-space indentation, single quotes, no trailing semicolons, 80-character width
Sort and group imports by plugin, runpnpm formatbefore committing
Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Write code that is expressive and self-documenting - avoid unnecessary comments
Do not add or retain redundant comments - clean as you go
Avoid mutable state - prefer immutability and assignment at point of declaration
Watch out for Code Smells and refactor to avoid them
Files:
src/renderer/core/canvas/litegraph/slotCalculations.tssrc/lib/litegraph/src/LGraphNode.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/renderer/core/canvas/litegraph/slotCalculations.tssrc/lib/litegraph/src/LGraphNode.ts
src/**/*.{ts,vue}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,vue}: Usereffor reactive state,computed()for derived values, andwatch/watchEffectfor side effects in Composition API
Avoid usingrefwithwatchif acomputedwould suffice - minimize refs and derived state
Useprovide/injectfor dependency injection only when simpler alternatives (Store or shared composable) won't work
Leverage VueUse functions for performance-enhancing composables
Use VueUse function for useI18n in composition API for string literals
Files:
src/renderer/core/canvas/litegraph/slotCalculations.tssrc/lib/litegraph/src/LGraphNode.ts
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,tsx}: Keep functions short and functional
Minimize nesting (if statements, for loops, etc.)
Use function declarations instead of function expressions when possible
Files:
src/renderer/core/canvas/litegraph/slotCalculations.tssrc/lib/litegraph/src/LGraphNode.ts
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (browser_tests/CLAUDE.md)
browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx}: Test user workflows in browser tests
Use Playwright fixtures for browser tests
Follow naming conventions for browser tests
Check assets/ directory for test data when writing tests
Prefer specific selectors in browser tests
Test across multiple viewports
Files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
browser_tests/**/*.spec.ts
📄 CodeRabbit inference engine (AGENTS.md)
browser_tests/**/*.spec.ts: E2E tests use Playwright and belong inbrowser_tests/**/*.spec.ts
Follow Playwright best practices for E2E testing
Do not use waitForTimeout in Playwright tests - use Locator actions and retrying assertions instead
Use tags like@mobile,@2xin Playwright tests for configuration-aware test selection
Files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
+(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts)
📄 CodeRabbit inference engine (AGENTS.md)
+(tests-ui|src|browser_tests)/**/*.+(test.ts|spec.ts): Do not write change detector tests - avoid tests that only assert default values
Be parsimonious in testing - do not write redundant tests
Don't Mock What You Don't Own
Files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
src/lib/litegraph/**/*.{js,ts,jsx,tsx}
📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
src/lib/litegraph/**/*.{js,ts,jsx,tsx}: Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns using thepnpm lint:fixcommand
Take advantage ofTypedArraysubarraywhen appropriate
Thesizeandposproperties ofRectangleshare the same array buffer (subarray); they may be used to set the rectangle's size and position
Prefer single lineifsyntax over adding curly braces, when the statement has a very concise expression and concise, single line statement
Do not replace&&=or||=with=when there is no reason to do so. If you do find a reason to remove either&&=or||=, leave a comment explaining why the removal occurred
When writing methods, prefer returning idiomatic JavaScriptundefinedovernull
Files:
src/lib/litegraph/src/LGraphNode.ts
src/lib/litegraph/**/*.{ts,tsx}
📄 CodeRabbit inference engine (src/lib/litegraph/CLAUDE.md)
Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Files:
src/lib/litegraph/src/LGraphNode.ts
🧠 Learnings (34)
📓 Common learnings
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{js,ts,jsx,tsx} : When adding features, always write vitest unit tests using cursor rules in @.cursor
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.vue : Define slots via template usage, not via `defineSlots`
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:57.926Z
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-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Do not replace `&&=` or `||=` with `=` when there is no reason to do so. If you do find a reason to remove either `&&=` or `||=`, leave a comment explaining why the removal occurred
Applied to files:
src/renderer/core/canvas/litegraph/slotCalculations.tssrc/lib/litegraph/src/LGraphNode.ts
📚 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/renderer/core/canvas/litegraph/slotCalculations.tsbrowser_tests/fixtures/VueNodeHelpers.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/lib/litegraph/src/LGraphNode.tsbrowser_tests/fixtures/ComfyPage.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/renderer/core/canvas/litegraph/slotCalculations.tsbrowser_tests/fixtures/VueNodeHelpers.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/lib/litegraph/src/LGraphNode.tsbrowser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-12-17T00:40:09.635Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7537
File: src/components/ui/button/Button.stories.ts:45-55
Timestamp: 2025-12-17T00:40:09.635Z
Learning: Prefer pure function declarations over function expressions (e.g., use function foo() { ... } instead of const foo = () => { ... }) for pure functions in the repository. Function declarations are more functional-leaning, offer better hoisting clarity, and can improve readability and tooling consistency. Apply this guideline across TypeScript files in Comfy-Org/ComfyUI_frontend, including story and UI component code, except where a function expression is semantically required (e.g., callbacks, higher-order functions with closures).
Applied to files:
src/renderer/core/canvas/litegraph/slotCalculations.tsbrowser_tests/fixtures/VueNodeHelpers.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/lib/litegraph/src/LGraphNode.tsbrowser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-12-30T22:22:33.836Z
Learnt from: kaili-yang
Repo: Comfy-Org/ComfyUI_frontend PR: 7805
File: src/composables/useCoreCommands.ts:439-439
Timestamp: 2025-12-30T22:22:33.836Z
Learning: When accessing reactive properties from Pinia stores in TypeScript files, avoid using .value on direct property access (e.g., useStore().isOverlayExpanded). Pinia auto-wraps refs when accessed directly, returning the primitive value. The .value accessor is only needed when destructuring store properties or when using storeToRefs().
Applied to files:
src/renderer/core/canvas/litegraph/slotCalculations.tsbrowser_tests/fixtures/VueNodeHelpers.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/lib/litegraph/src/LGraphNode.tsbrowser_tests/fixtures/ComfyPage.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/renderer/core/canvas/litegraph/slotCalculations.tsbrowser_tests/fixtures/VueNodeHelpers.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/lib/litegraph/src/LGraphNode.tsbrowser_tests/fixtures/ComfyPage.ts
📚 Learning: 2026-01-12T17:39:27.738Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7906
File: src/components/sidebar/tabs/AssetsSidebarTab.vue:545-552
Timestamp: 2026-01-12T17:39:27.738Z
Learning: In Vue/TypeScript files (src/**/*.{ts,tsx,vue}), prefer if/else statements over ternary operators when performing side effects or actions (e.g., mutating state, calling methods with side effects). Ternaries should be reserved for computing and returning values.
Applied to files:
src/renderer/core/canvas/litegraph/slotCalculations.tssrc/lib/litegraph/src/LGraphNode.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
browser_tests/fixtures/VueNodeHelpers.tsbrowser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/lib/litegraph/src/LGraphNode.tsbrowser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test user workflows in browser tests
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tsbrowser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tssrc/lib/litegraph/src/LGraphNode.tsbrowser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{js,ts,jsx,tsx} : When adding features, always write vitest unit tests using cursor rules in @.cursor
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tsbrowser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Prefer specific selectors in browser tests
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to +(tests-ui|src)/**/*.test.ts : Write tests for all changes, especially bug fixes to catch future regressions
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tsbrowser_tests/fixtures/ComfyPage.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to browser_tests/**/*.spec.ts : Follow Playwright best practices for E2E testing
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tsbrowser_tests/fixtures/ComfyPage.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to +(tests-ui|src)/**/*.test.ts : Aim for behavioral coverage of critical and new features in unit tests
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to browser_tests/**/*.spec.ts : Do not use waitForTimeout in Playwright tests - use Locator actions and retrying assertions instead
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tsbrowser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-12-13T05:54:35.779Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7415
File: browser_tests/tests/mobileBaseline.spec.ts:17-22
Timestamp: 2025-12-13T05:54:35.779Z
Learning: In browser_tests tests for the Comfy-Org/ComfyUI_frontend repository, the `comfyPage.loadWorkflow()` method already handles all necessary synchronization and waiting. No additional `await comfyPage.nextFrame()` call is needed before taking screenshots after loading a workflow.
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.tsbrowser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-12-13T05:34:15.488Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7415
File: browser_tests/tests/mobileBaseline.spec.ts:7-15
Timestamp: 2025-12-13T05:34:15.488Z
Learning: In Playwright tests for the ComfyUI frontend, the toPass() assertion uses incremental backoff during retries. When a test may involve async operations, increasing the timeout (e.g., to 5000 ms) can be sufficient instead of aggressively extending timeouts. Apply this understanding to tests under browser_tests/tests/; if not resolved, review the toPass() backoff behavior and ensure timeouts align with expected async completion without masking issues.
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-12-10T03:09:19.636Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7303
File: src/components/topbar/CurrentUserPopover.test.ts:199-205
Timestamp: 2025-12-10T03:09:19.636Z
Learning: For test files in the Comfy-Org/ComfyUI_frontend repository: When writing tests, prefer selecting elements by accessible properties (text content, aria-label, role, accessible name) over data-testid attributes. This ensures tests verify actual user-facing behavior and accessibility compliance.
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Use Playwright fixtures for browser tests
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-11-24T19:47:22.909Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: browser_tests/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:22.909Z
Learning: Applies to browser_tests/**/*.{e2e,spec}.{ts,tsx,js,jsx} : Test across multiple viewports
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-12-05T06:11:09.383Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7177
File: src/platform/assets/components/UploadModelFooter.vue:72-78
Timestamp: 2025-12-05T06:11:09.383Z
Learning: For the ComfyUI_frontend repository, avoid suggesting comments that would be redundant when the code is already self-explanatory through descriptive naming (e.g., filenames, prop names, aria-labels). The project prefers clean code without unnecessary documentation comments.
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-12-12T23:02:37.473Z
Learnt from: Myestery
Repo: Comfy-Org/ComfyUI_frontend PR: 7422
File: .github/workflows/pr-update-playwright-expectations.yaml:131-135
Timestamp: 2025-12-12T23:02:37.473Z
Learning: In the `.github/workflows/pr-update-playwright-expectations.yaml` workflow in the Comfy-Org/ComfyUI_frontend repository, the snapshot update process is intentionally scoped to only add and update snapshot images. Deletions of snapshot files are handled explicitly outside this workflow and should not be suggested as part of this automation.
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to src/**/*.{ts,tsx,vue} : Do not add or retain redundant comments - clean as you go
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-12-22T21:36:46.909Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7649
File: tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts:189-194
Timestamp: 2025-12-22T21:36:46.909Z
Learning: In the Comfy-Org/ComfyUI_frontend repository test files: Do not stub primitive UI components or customized primitive components (e.g., Button). Instead, import and register the real components in test setup. This ensures tests accurately reflect production behavior and component API usage.
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 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:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2026-01-10T00:24:17.695Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-10T00:24:17.695Z
Learning: Applies to +(tests-ui|src)/**/*.test.ts : Use Vue Test Utils for Component testing and follow best practices for making components easy to test
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 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 setup() function for component logic
Applied to files:
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : The `size` and `pos` properties of `Rectangle` share the same array buffer (`subarray`); they may be used to set the rectangle's size and position
Applied to files:
src/lib/litegraph/src/LGraphNode.ts
📚 Learning: 2026-01-08T02:40:22.621Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7894
File: src/renderer/extensions/vueNodes/widgets/components/WidgetToggleSwitch.test.ts:11-14
Timestamp: 2026-01-08T02:40:22.621Z
Learning: In the Comfy-Org/ComfyUI_frontend repository test files: When testing components, import the real type definitions from the component files instead of duplicating interface definitions in the test files. This prevents type drift and maintains consistency.
Applied to files:
browser_tests/fixtures/ComfyPage.ts
📚 Learning: 2026-01-09T02:07:59.035Z
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7898
File: src/composables/usePaste.test.ts:248-248
Timestamp: 2026-01-09T02:07:59.035Z
Learning: In test files at src/**/*.test.ts, when creating mock objects that partially implement an interface (e.g., LGraphNode), use `as Partial<InterfaceType> as InterfaceType` instead of `as any` or `as unknown as InterfaceType` to explicitly acknowledge the incomplete implementation while maintaining type safety.
Applied to files:
browser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns using the `pnpm lint:fix` command
Applied to files:
browser_tests/fixtures/ComfyPage.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Applied to files:
browser_tests/fixtures/ComfyPage.ts
🧬 Code graph analysis (3)
src/renderer/core/canvas/litegraph/slotCalculations.ts (4)
src/lib/litegraph/src/litegraph.ts (1)
LiteGraph(17-17)src/renderer/core/layout/slots/slotIdentifier.ts (1)
getSlotKey(25-40)src/renderer/core/layout/store/layoutStore.ts (1)
layoutStore(1485-1485)src/lib/litegraph/src/LGraphNode.ts (1)
SlotPositionContext(3327-3340)
browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts (1)
browser_tests/helpers/fitToView.ts (1)
fitToViewInstant(15-104)
src/lib/litegraph/src/LGraphNode.ts (1)
src/renderer/core/canvas/litegraph/slotCalculations.ts (1)
getSlotPosition(136-192)
⏰ 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). (6)
- GitHub Check: deploy-and-comment
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: lint-and-format
- GitHub Check: setup
- GitHub Check: collect
🔇 Additional comments (1)
src/renderer/core/canvas/litegraph/slotCalculations.ts (1)
141-173:getNodeLayoutRef()returns cached refs, not newly allocated onesThe concern about ref allocation is unfounded—
getNodeLayoutRef()caches refs in an internal Map and returns the same ref instance for each nodeId. Subsequent calls for the same node do not allocate new refs, so there's no hot-path allocation cost. The.valueaccessor is appropriate here since the method explicitly returns aRef.Likely an incorrect or invalid review comment.
| async waitForGraphNodes(count: number) { | ||
| await this.page.waitForFunction((count) => { | ||
| return window['app']?.canvas.graph?.nodes?.length === count | ||
| }, count) | ||
| } |
There was a problem hiding this comment.
waitForGraphNodes() strict equality is likely to be flaky
Waiting for nodes.length === count is brittle if the app ever adds implicit nodes (or if async graph init briefly overshoots and settles). Prefer >= (or make “exact” vs “at least” explicit via an option).
Proposed change
- async waitForGraphNodes(count: number) {
+ async waitForGraphNodes(count: number, opts?: { exact?: boolean }) {
await this.page.waitForFunction((count) => {
- return window['app']?.canvas.graph?.nodes?.length === count
- }, count)
+ const len = window['app']?.canvas.graph?.nodes?.length
+ if (len == null) return false
+ return opts?.exact ? len === count : len >= count
+ }, count)
}🤖 Prompt for AI Agents
In `@browser_tests/fixtures/ComfyPage.ts` around lines 1594 - 1598, The test
helper waitForGraphNodes is using strict equality on
window['app'].canvas.graph.nodes.length === count which is brittle; update the
implementation in waitForGraphNodes to use a non-strict condition (e.g., >=
count) or add a parameter like exact: boolean to choose between exact and
at-least semantics, and use that parameter to decide whether to compare with ===
or >=; ensure the call to page.waitForFunction passes the count and the option
so the function inside the browser uses the correct comparison.
| async getNodeRefsByType( | ||
| type: string, | ||
| includeSubgraph: boolean = false | ||
| ): Promise<NodeReference[]> { | ||
| return Promise.all( | ||
| ( | ||
| await this.page.evaluate((type) => { | ||
| return window['app'].graph.nodes | ||
| .filter((n: LGraphNode) => n.type === type) | ||
| .map((n: LGraphNode) => n.id) | ||
| }, type) | ||
| await this.page.evaluate( | ||
| ({ type, includeSubgraph }) => { | ||
| const graph = ( | ||
| includeSubgraph ? window['app'].canvas.graph : window['app'].graph | ||
| ) as LGraph | ||
| const nodes = graph.nodes | ||
| return nodes | ||
| .filter((n: LGraphNode) => n.type === type) | ||
| .map((n: LGraphNode) => n.id) | ||
| }, | ||
| { type, includeSubgraph } | ||
| ) |
There was a problem hiding this comment.
Guard against missing graph when includeSubgraph is true
If window['app'].canvas.graph isn’t set yet (or the user isn’t inside a subgraph), this evaluate can throw. Consider returning [] when the graph is unavailable to keep helpers resilient.
| /** | ||
| * Enter the subgraph of a node. | ||
| * @param nodeId - The ID of the node to enter the subgraph of. If not provided, the first matched subgraph will be entered. | ||
| */ | ||
| async enterSubgraph(nodeId?: string): Promise<void> { | ||
| const locator = nodeId ? this.getNodeLocator(nodeId) : this.page | ||
| const editButton = locator.getByTestId('subgraph-enter-button') | ||
| await editButton.click() | ||
| } |
There was a problem hiding this comment.
enterSubgraph() should disambiguate + wait for visibility
As written, enterSubgraph() can click an arbitrary matching button when multiple subgraph nodes exist, and it doesn’t wait for the button to be visible/enabled (potential flake).
Proposed change
async enterSubgraph(nodeId?: string): Promise<void> {
const locator = nodeId ? this.getNodeLocator(nodeId) : this.page
- const editButton = locator.getByTestId('subgraph-enter-button')
- await editButton.click()
+ const editButton = locator.getByTestId('subgraph-enter-button').first()
+ await editButton.waitFor({ state: 'visible' })
+ await editButton.click()
}🤖 Prompt for AI Agents
In `@browser_tests/fixtures/VueNodeHelpers.ts` around lines 167 - 175,
enterSubgraph() can click the wrong button when many subgraph nodes exist and
may race because it doesn't wait for visibility; update enterSubgraph (and the
locator built by getNodeLocator when nodeId is provided) to scope to the
specific node when nodeId is passed and to explicitly pick the first matching
enter button when nodeId is omitted (e.g., use the locator.first() variant),
then wait for the button to be visible/ready before calling click (use the
locator waitFor/visibility check on the 'subgraph-enter-button' locator prior to
click).
| test('Dragging from subgraph input connects to correct slot', async ({ | ||
| comfyPage, | ||
| comfyMouse | ||
| }) => { | ||
| // Setup workflow with a KSampler node | ||
| await comfyPage.executeCommand('Comfy.NewBlankWorkflow') | ||
| await comfyPage.waitForGraphNodes(0) | ||
| await comfyPage.executeCommand('Workspace.SearchBox.Toggle') | ||
| await comfyPage.nextFrame() | ||
| await comfyPage.searchBox.fillAndSelectFirstNode('KSampler') | ||
| await comfyPage.waitForGraphNodes(1) | ||
|
|
||
| // Convert the KSampler node to a subgraph | ||
| let ksamplerNode = (await comfyPage.getNodeRefsByType('KSampler'))?.[0] | ||
| await comfyPage.vueNodes.selectNode(String(ksamplerNode.id)) | ||
| await comfyPage.executeCommand('Comfy.Graph.ConvertToSubgraph') | ||
|
|
||
| // Enter the subgraph | ||
| await comfyPage.vueNodes.enterSubgraph() | ||
| await fitToViewInstant(comfyPage) | ||
|
|
||
| // Get the KSampler node inside the subgraph | ||
| ksamplerNode = (await comfyPage.getNodeRefsByType('KSampler', true))?.[0] | ||
| const positiveInput = await ksamplerNode.getInput(1) | ||
| const negativeInput = await ksamplerNode.getInput(2) | ||
|
|
||
| const positiveInputPos = await getSlotCenter( | ||
| comfyPage.page, | ||
| ksamplerNode.id, | ||
| 1, | ||
| true | ||
| ) | ||
|
|
||
| const sourceSlot = await comfyPage.getSubgraphInputSlot() | ||
| const calculatedSourcePos = await sourceSlot.getOpenSlotPosition() | ||
|
|
||
| await comfyMouse.move(calculatedSourcePos) | ||
| await comfyMouse.drag(positiveInputPos) | ||
| await comfyMouse.drop() | ||
|
|
||
| // Verify connection went to the correct slot | ||
| const positiveLinks = await positiveInput.getLinkCount() | ||
| const negativeLinks = await negativeInput.getLinkCount() | ||
| expect(positiveLinks).toBe(1) | ||
| expect(negativeLinks).toBe(0) | ||
| }) |
There was a problem hiding this comment.
Subgraph regression test: add sync + avoid “first subgraph” ambiguity
- After
ConvertToSubgraph+enterSubgraph(), add an explicit wait for subgraph Vue nodes (or the KSampler node) before queryinggetNodeRefsByType('KSampler', true). - Use
enterSubgraph(String(ksamplerNode.id))since the helper supports it, to prevent accidental clicks if multiple subgraph-enter buttons exist. - Add a quick assertion that
ksamplerNodeexists before dereferencing.id.
Proposed change
let ksamplerNode = (await comfyPage.getNodeRefsByType('KSampler'))?.[0]
+ expect(ksamplerNode).toBeTruthy()
await comfyPage.vueNodes.selectNode(String(ksamplerNode.id))
await comfyPage.executeCommand('Comfy.Graph.ConvertToSubgraph')
// Enter the subgraph
- await comfyPage.vueNodes.enterSubgraph()
+ await comfyPage.vueNodes.enterSubgraph(String(ksamplerNode.id))
await fitToViewInstant(comfyPage)
+ await comfyPage.vueNodes.waitForNodes()
// Get the KSampler node inside the subgraph
ksamplerNode = (await comfyPage.getNodeRefsByType('KSampler', true))?.[0]
+ expect(ksamplerNode).toBeTruthy()🤖 Prompt for AI Agents
In `@browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts`
around lines 997 - 1042, Test flakiness: after calling
comfyPage.executeCommand('Comfy.Graph.ConvertToSubgraph') and before querying
the inner KSampler, wait for the subgraph Vue nodes (or the KSampler) to appear,
assert that ksamplerNode is defined, and call comfyPage.vueNodes.enterSubgraph
with the node id (e.g.
comfyPage.vueNodes.enterSubgraph(String(ksamplerNode.id))) instead of the no-arg
enter to avoid ambiguous clicks; then proceed to call
comfyPage.getNodeRefsByType('KSampler', true) and the subsequent slot/position
logic.
| getInputPos(slot: number): Point { | ||
| return calculateInputSlotPos(this.#getSlotPositionContext(), slot) | ||
| return getSlotPosition(this, slot, true) | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Avoid ambiguous getSlotPosition symbol resolution (import vs method)
With getInputPos / getOutputPos now delegating to getSlotPosition(...), the class also defines a getSlotPosition(...) method later, which makes call-sites easy to misread. Consider aliasing the import to make it unambiguous.
Proposed change
import {
calculateInputSlotPosFromSlot,
- getSlotPosition
+ getSlotPosition as getSlotPositionFromLayout
} from '@/renderer/core/canvas/litegraph/slotCalculations'
getInputPos(slot: number): Point {
- return getSlotPosition(this, slot, true)
+ return getSlotPositionFromLayout(this, slot, true)
}
getOutputPos(outputSlotIndex: number): Point {
- return getSlotPosition(this, outputSlotIndex, false)
+ return getSlotPositionFromLayout(this, outputSlotIndex, false)
}
getSlotPosition(slotIndex: number, isInput: boolean): Point {
- return getSlotPosition(this, slotIndex, isInput)
+ return getSlotPositionFromLayout(this, slotIndex, isInput)
}Also applies to: 3369-3371
github-actions
bot
removed
the
New Browser Test Expectations
2 participants
Summary
Fix slot position for Vue nodes using LiteGraph calculation
Fixes #7446
Changes
┆Issue is synchronized with this Notion page by Unito