Render app builder in arrange mode#9260
Merged
pythongosssss merged 2 commits intomainfrom Feb 27, 2026
Merged
Conversation
- add orderable widget list - fix splitter layout issues
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review infoConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds an "arrange inputs" builder mode, centralizes splitter sizing via new constants, and refactors mode flags (select/arrange). Multiple components now conditionally render and size panels based on these modes, and the splitter state-key and sizing use shared constants. Changes
Sequence DiagramsequenceDiagram
participant User
participant ModeSystem as App Mode
participant LinearView
participant Splitter
participant AppBuilder
User->>ModeSystem: switch mode -> 'builder:arrange'
ModeSystem->>LinearView: isArrangeMode updates
LinearView->>Splitter: set panel sizes & min-sizes (CENTER_PANEL_SIZE, SIDE_PANEL_SIZE, *_MIN_SIZE)
LinearView->>AppBuilder: render in left/right panels if showLeft/RightBuilder
AppBuilder->>AppBuilder: render DraggableList (arrange inputs) / hide outputs
Splitter->>LinearView: update gutters and visibility
LinearView-->>User: display arranged 3-panel layout
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎨 Storybook: ✅ Built — View Storybook |
🎭 Playwright: ✅ 549 passed, 0 failed · 4 flaky📊 Browser Reports
|
📦 Bundle: 4.44 MB gzip 🔴 +1.07 kBDetailsSummary
Category Glance App Entry Points — 17.9 kB (baseline 17.9 kB) • ⚪ 0 BMain entry bundles and manifests
Status: 1 added / 1 removed Graph Workspace — 1.01 MB (baseline 1.01 MB) • 🔴 +4.42 kBGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 72.1 kB (baseline 72.1 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 9 added / 9 removed Panels & Settings — 435 kB (baseline 435 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 10 added / 10 removed User & Accounts — 16 kB (baseline 16 kB) • ⚪ 0 BAuthentication, profile, and account management bundles
Status: 5 added / 5 removed Editors & Dialogs — 736 B (baseline 736 B) • ⚪ 0 BModals, dialogs, drawers, and in-app editors
Status: 1 added / 1 removed UI Components — 47.1 kB (baseline 47.1 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed Data & Services — 2.55 MB (baseline 2.55 MB) • 🔴 +151 BStores, services, APIs, and repositories
Status: 13 added / 13 removed Utilities & Hooks — 55.5 kB (baseline 55.5 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 11 added / 11 removed Vendor & Third-Party — 8.84 MB (baseline 8.84 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 7.77 MB (baseline 7.77 MB) • ⚪ 0 BBundles that do not match a named category
Status: 52 added / 52 removed |
⚡ Performance Report
Raw data{
"timestamp": "2026-02-26T21:08:49.741Z",
"gitSha": "6330dcc12ccb0465f19f81115a11adad48f8fa0f",
"branch": "pysssss/app-builder-preview",
"measurements": [
{
"name": "canvas-idle",
"durationMs": 2023.9600000000166,
"styleRecalcs": 123,
"styleRecalcDurationMs": 23.805,
"layouts": 0,
"layoutDurationMs": 0,
"taskDurationMs": 418.47600000000006,
"heapDeltaBytes": -3469500
},
{
"name": "canvas-mouse-sweep",
"durationMs": 2055.3090000000225,
"styleRecalcs": 185,
"styleRecalcDurationMs": 62.012,
"layouts": 13,
"layoutDurationMs": 3.502,
"taskDurationMs": 1065.4460000000001,
"heapDeltaBytes": -1608628
},
{
"name": "dom-widget-clipping",
"durationMs": 655.7480000000169,
"styleRecalcs": 49,
"styleRecalcDurationMs": 21.177,
"layouts": 1,
"layoutDurationMs": 0.2599999999999998,
"taskDurationMs": 423.018,
"heapDeltaBytes": 7099584
}
]
} |
![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/views/LinearView.vue (1)
214-230: Refactor new splitter gutter styling away from local<style scoped>.This block can be moved to Tailwind/
pt-driven classes (or shared theme CSS) to stay aligned with repo conventions for Vue SFC styling.As per coding guidelines,
**/*.vue: "Use Tailwind 4 styling; avoid<style>blocks".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/views/LinearView.vue` around lines 214 - 230, The scoped <style> in LinearView.vue that targets .p-splitter-gutter and .arrange-panel should be refactored out: remove the local <style scoped> block and implement equivalent styling using Tailwind/pt utility classes or the shared theme CSS (preserving pointer-events behavior, hover/resizing background-color transition using --p-primary-color, and hiding gutters adjacent to arrange-panel with display:none rules); update the template/classes on the elements that currently rely on .p-splitter-gutter and .arrange-panel so they use the new utility or shared CSS classes and ensure the hover/resizing state selector (data-p-gutter-resizing='true') is covered by the new styles.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/builder/AppBuilder.vue`:
- Around line 49-58: The rendered draggable items can diverge from the drag
model because arrangeInputs removes unresolved tuples but the DraggableList is
still bound to appModeStore.selectedInputs; update the component binding so
DraggableList uses the sanitized computed arrangeInputs (not raw
appModeStore.selectedInputs), or alternatively reconcile
appModeStore.selectedInputs whenever arrangeInputs filters items (e.g., replace
stale tuples with the filtered list), by referencing the arrangeInputs computed
and the DraggableList prop/methods to ensure the list model and rendered items
stay in sync.
---
Nitpick comments:
In `@src/views/LinearView.vue`:
- Around line 214-230: The scoped <style> in LinearView.vue that targets
.p-splitter-gutter and .arrange-panel should be refactored out: remove the local
<style scoped> block and implement equivalent styling using Tailwind/pt utility
classes or the shared theme CSS (preserving pointer-events behavior,
hover/resizing background-color transition using --p-primary-color, and hiding
gutters adjacent to arrange-panel with display:none rules); update the
template/classes on the elements that currently rely on .p-splitter-gutter and
.arrange-panel so they use the new utility or shared CSS classes and ensure the
hover/resizing state selector (data-p-gutter-resizing='true') is covered by the
new styles.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/components/LiteGraphCanvasSplitterOverlay.vuesrc/components/builder/AppBuilder.vuesrc/components/rightSidePanel/parameters/WidgetItem.vuesrc/composables/useAppMode.tssrc/constants/splitterConstants.tssrc/views/LinearView.vue
…de and the input is kept
dosubot
bot
added
the
size:L
Collaborator
|
Looks like a another doubled implementation with 6acb3a1. Your implementation seems much shorter in terms of line count. There's some style between the preview stage and the post-creation display, but the linear mode implementation will need another pass anyways (since widgets are no longer grouped by nodes) and it may just be easiest to plug the needed functionality in to the right side panel 🤔 |
AustinMroz
approved these changes
Feb 26, 2026
Collaborator
AustinMroz
left a comment
AustinMroz
left a comment
There was a problem hiding this comment.
Code is fine and I'm approving as is.
I'll eat the rebase on my end to keep things moving, if there's a change of decision later, the implementations can always be swapped in a future PR
DrJKL
pushed a commit
that referenced
this pull request
Feb 28, 2026
## Summary Adds app builder in arrange/preview mode with re-orderable widgets, maintaining size (as much as possible) between the select + preview steps ## Changes - **What**: - Extract sidebar size constants for sharing between canvas splitter + app mode - Add widget list using DraggableList and render inert WidgetItems ## Screenshots (if applicable) <img width="1391" height="923" alt="image" src="https://github.com/user-attachments/assets/3e17eafe-db1e-40a3-83b5-15a7d0672909" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9260-Render-app-builder-in-arrange-mode-3136d73d365081ef875acab683d01d9e) by [Unito](https://www.unito.io)
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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
Adds app builder in arrange/preview mode with re-orderable widgets, maintaining size (as much as possible) between the select + preview steps
Changes
Screenshots (if applicable)
┆Issue is synchronized with this Notion page by Unito