Feat: Load Image (from Outputs) support in Vue Nodes #6836
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dosubot
bot
added
the
size:M
Contributor
📝 WalkthroughWalkthroughPropagates an optional Changes
Sequence Diagram(s)sequenceDiagram
participant Spec as WidgetSpec
participant NW as NodeWidgets.vue
participant IS as InputSlot.vue
participant DOM as DOM
Note over Spec,NW: widget.simplified.spec may include socketless
Spec->>NW: provide widget (includes simplified.spec?.socketless)
NW->>IS: render InputSlot with :socketless
alt socketless = true
IS->>IS: apply classes "pointer-events-none invisible"
IS->>DOM: render hidden/non-interactive slot
else socketless = false or undefined
IS->>IS: render normal slot classes
IS->>DOM: render interactive slot
end
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
🎭 Playwright Test Results⏰ Completed at: 11/23/2025, 07:30:39 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 11/23/2025, 07:20:24 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.18 MB (baseline 3.18 MB) • 🔴 +151 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 940 kB (baseline 940 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 7.97 kB (baseline 7.97 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 306 kB (baseline 306 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 141 kB (baseline 141 kB) • 🟢 -14 BReusable component library chunks
Status: 7 added / 7 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 2.94 kB (baseline 2.94 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 5.7 MB (baseline 5.7 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.87 MB (baseline 3.87 MB) • ⚪ 0 BBundles that do not match a named category
Status: 18 added / 18 removed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue (1)
218-226: Consider clearing selection when item is not found.The watch handler explicitly handles the
undefinedcase well. However, whencurrentValueis defined but the corresponding item is not found indropdownItems, theselectedSetis not cleared. This could leave stale selections that don't matchmodelValue.Apply this diff to ensure selection consistency:
if (currentValue === undefined) { selectedSet.value.clear() return } + selectedSet.value.clear() const item = dropdownItems.value.find((item) => item.name === currentValue) if (item) { - selectedSet.value.clear() selectedSet.value.add(item.id) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/renderer/extensions/vueNodes/components/InputSlot.vue(3 hunks)src/renderer/extensions/vueNodes/components/NodeWidgets.vue(1 hunks)src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue(1 hunks)src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue(2 hunks)src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue(2 hunks)src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts(2 hunks)src/schemas/nodeDefSchema.ts(1 hunks)
⏰ 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 (10)
src/schemas/nodeDefSchema.ts (1)
32-32: LGTM! Clean schema extension.The
socketlessfield is properly defined as an optional boolean and follows the established pattern in the schema. This enables the new socketless input slot feature at the schema level.src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts (2)
239-239: LGTM! Exposes refresh button in Vue UI.Removing the
canvasOnlyconstraint allows the refresh button to be rendered in the Vue node interface, aligning with the PR objective to expose manual refresh controls.
264-264: LGTM! Exposes auto-refresh toggle in Vue UI.Removing the
canvasOnlyconstraint allows the auto-refresh toggle to be rendered in the Vue node interface, aligning with the PR objective to expose auto-refresh controls.src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue (1)
139-145: Excellent fix for dropdown stability!Changing from index-based IDs (
output-${index}) to value-based IDs (output-${output}) ensures dropdown items maintain stable identities when new outputs are added. This resolves the index-dependent issue mentioned in the PR description.src/renderer/extensions/vueNodes/components/InputSlot.vue (2)
8-8: LGTM! Minor class consolidation.Combining the two class strings into one (
'-translate-x-1/2 w-3') is a minor refactor that improves readability without changing behavior.
51-51: LGTM! New socketless prop added.The
socketlessprop is properly typed as an optional boolean and integrates well with the new socketless input slot feature.src/renderer/extensions/vueNodes/components/NodeWidgets.vue (1)
43-43: LGTM! Clean socketless binding.The binding properly propagates the
socketlessflag from the widget spec to the InputSlot component using optional chaining. This completes the socketless feature integration.src/renderer/extensions/vueNodes/widgets/components/WidgetButton.vue (1)
8-12: LGTM! Button label moved inline.Moving the widget name inside the Button component as inline content is a clean UI refactor. The
aria-labelis still properly set for accessibility, and the conditional rendering is preserved.src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue (2)
35-42: LGTM! Cleaner style computation.Consolidating the conditional logic into a single
cn()call with inline conditionals improves readability while maintaining the same behavior.
70-70: LGTM! Clean template simplifications.The changes streamline the template by:
- Using
placeholderdirectly (available viadefinePropsdestructuring)- Moving chevron rotation logic inline with
cn()andisOpenbindingBoth changes improve readability without affecting functionality.
Also applies to: 76-84
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/renderer/extensions/vueNodes/widgets/components/WidgetButton.test.ts (2)
85-90: Consider a more specific assertion.The test uses
wrapper.text()to check all text content, which could be fragile if the component or Button renders additional text elements. Consider asserting on the button's text content specifically.Example:
- expect(wrapper.text()).toBe('test_button') + const button = wrapper.findComponent({ name: 'Button' }) + expect(button.text()).toBe('test_button')
100-113: Consider adding a test for widget.name and options.label interaction.The test at lines 100-113 passes both a widget name (
'test_button') and a custom label in options, but only verifies the prop values, not the final rendered text. It would be valuable to add a test that clarifies how widget.name and options.label interact in the rendered output—whether both appear, or if one takes precedence.Example:
it('renders both widget name and button label when both provided', () => { const widget = createMockWidget({ label: 'Custom Label' }, undefined, 'widget_name') const wrapper = mountComponent(widget) const button = wrapper.findComponent({ name: 'Button' }) // Verify expected behavior: does label override name, do both appear, etc. expect(button.text()).toBe(/* expected text */) })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/renderer/extensions/vueNodes/widgets/components/WidgetButton.test.ts(1 hunks)
⏰ 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: setup
- GitHub Check: lint-and-format
- GitHub Check: test
- GitHub Check: collect
christian-byrne
approved these changes
Nov 23, 2025
christian-byrne
added
needs-backport
github-actions bot
pushed a commit
that referenced
this pull request
Nov 23, 2025
## Summary Expose the Auto-refresh and manual refresh controls. Fixes an issue with the Dropdown where it was index dependent so wasn't updating correctly as new items came in. ## Screenshots <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6836-Feat-Load-Image-from-Outputs-support-in-Vue-Nodes-2b46d73d365081f1b44fcf2054d653da) by [Unito](https://www.unito.io)
github-actions bot
pushed a commit
that referenced
this pull request
Nov 23, 2025
## Summary Expose the Auto-refresh and manual refresh controls. Fixes an issue with the Dropdown where it was index dependent so wasn't updating correctly as new items came in. ## Screenshots <!-- Add screenshots or video recording to help explain your changes --> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6836-Feat-Load-Image-from-Outputs-support-in-Vue-Nodes-2b46d73d365081f1b44fcf2054d653da) by [Unito](https://www.unito.io)
Member
Member
github-actions
bot
removed
the
needs-backport
christian-byrne
pushed a commit
that referenced
this pull request
Nov 23, 2025
…odes (#6871) Backport of #6836 to `core/1.32` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6871-backport-core-1-32-Feat-Load-Image-from-Outputs-support-in-Vue-Nodes-2b46d73d36508121b3b3c9dac9e3de5a) by [Unito](https://www.unito.io) Co-authored-by: Alexander Brown <[email protected]>
christian-byrne
pushed a commit
that referenced
this pull request
Nov 23, 2025
…Nodes (#6872) Backport of #6836 to `cloud/1.32` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6872-backport-cloud-1-32-Feat-Load-Image-from-Outputs-support-in-Vue-Nodes-2b46d73d365081e3a39bc0ba9e19accf) by [Unito](https://www.unito.io) Co-authored-by: Alexander Brown <[email protected]>
This was referenced Dec 2, 2025
3 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Expose the Auto-refresh and manual refresh controls.
Fixes an issue with the Dropdown where it was index dependent so wasn't updating correctly as new items came in.
Screenshots
┆Issue is synchronized with this Notion page by Unito