Skip to content

Conversation

@DrJKL
Copy link
Contributor

@DrJKL DrJKL commented Oct 22, 2025

Summary

Simplify the TransformPane.

Changes

  • What: Remove the settling and culling composables. Gets rid of a frequent event emission and some event handling addition/removals.

Review Focus

In testing with a huge workflow in Vue mode, it was a lot faster without these than with.
Can you check to see if you experience the same benefits?

┆Issue is synchronized with this Notion page by Unito

@dosubot dosubot bot added the size:XL This PR changes 500-999 lines, ignoring generated files. label Oct 22, 2025
@github-actions
Copy link

github-actions bot commented Oct 22, 2025

🎭 Playwright Test Results

Some tests failed

⏰ Completed at: 10/29/2025, 12:37:01 AM UTC

📈 Summary

  • Total Tests: 500
  • Passed: 468 ✅
  • Failed: 1 ❌
  • Flaky: 1 ⚠️
  • Skipped: 30 ⏭️

📊 Test Reports by Browser

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

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

@github-actions
Copy link

github-actions bot commented Oct 22, 2025

🎨 Storybook Build Status

Build completed successfully!

⏰ Completed at: 10/29/2025, 12:22:47 AM UTC

🔗 Links


🎉 Your Storybook is ready for review!

@github-actions
Copy link

github-actions bot commented Oct 22, 2025

Bundle Size Report

Summary

  • Raw size: 12.2 MB baseline 12.2 MB — 🟢 -3.86 kB
  • Gzip: 2.48 MB baseline 2.48 MB — 🟢 -1.04 kB
  • Brotli: 1.96 MB baseline 1.96 MB — 🟢 -566 B
  • Bundles: 56 current • 56 baseline • 12 added / 12 removed

Category Glance
Graph Workspace 🟢 -3.86 kB (712 kB) · Vendor & Third-Party ⚪ 0 B (5.36 MB) · App Entry Points ⚪ 0 B (3.3 MB) · Other ⚪ 0 B (2.55 MB) · Panels & Settings ⚪ 0 B (294 kB) · UI Components ⚪ 0 B (12.3 kB) · + 3 more

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

Main entry bundles and manifests

File Before After Δ Raw Δ Gzip Δ Brotli
assets/index-Ce1dZtjM.js (new) 2.69 MB 🔴 +2.69 MB 🔴 +559 kB 🔴 +423 kB
assets/index-dhqGwAuR.js (removed) 2.69 MB 🟢 -2.69 MB 🟢 -559 kB 🟢 -423 kB
assets/index-BI8MDPj4.js (new) 617 kB 🔴 +617 kB 🔴 +114 kB 🔴 +90.4 kB
assets/index-IXVL-p54.js (removed) 617 kB 🟢 -617 kB 🟢 -114 kB 🟢 -90.5 kB

Status: 2 added / 2 removed

Graph Workspace — 712 kB (baseline 716 kB) • 🟢 -3.86 kB

Graph editor runtime, canvas, workflow orchestration

File Before After Δ Raw Δ Gzip Δ Brotli
assets/GraphView-ujmUhcrg.js (removed) 716 kB 🟢 -716 kB 🟢 -140 kB 🟢 -108 kB
assets/GraphView-B4ns4B6X.js (new) 712 kB 🔴 +712 kB 🔴 +139 kB 🔴 +107 kB

Status: 1 added / 1 removed

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

Top-level views, pages, and routed surfaces

File Before After Δ Raw Δ Gzip Δ Brotli
assets/UserSelectView-DBlLacTt.js (new) 8.15 kB 🔴 +8.15 kB 🔴 +2.47 kB 🔴 +2.15 kB
assets/UserSelectView-DRF-W22m.js (removed) 8.15 kB 🟢 -8.15 kB 🟢 -2.47 kB 🟢 -2.15 kB

Status: 1 added / 1 removed

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

Configuration panels, inspectors, and settings screens

File Before After Δ Raw Δ Gzip Δ Brotli
assets/CreditsPanel-BC0k1PXM.js (new) 22.1 kB 🔴 +22.1 kB 🔴 +5.28 kB 🔴 +4.62 kB
assets/CreditsPanel-CdT-4Yz7.js (removed) 22.1 kB 🟢 -22.1 kB 🟢 -5.28 kB 🟢 -4.62 kB
assets/KeybindingPanel-BqjGUnpZ.js (new) 15.2 kB 🔴 +15.2 kB 🔴 +3.76 kB 🔴 +3.31 kB
assets/KeybindingPanel-DPw5CLhq.js (removed) 15.2 kB 🟢 -15.2 kB 🟢 -3.77 kB 🟢 -3.31 kB
assets/ExtensionPanel-BZ-v-83z.js (new) 12.1 kB 🔴 +12.1 kB 🔴 +2.83 kB 🔴 +2.48 kB
assets/ExtensionPanel-gVjSxH0T.js (removed) 12.1 kB 🟢 -12.1 kB 🟢 -2.83 kB 🟢 -2.48 kB
assets/AboutPanel-BIPBgD2F.js (removed) 10.3 kB 🟢 -10.3 kB 🟢 -2.66 kB 🟢 -2.33 kB
assets/AboutPanel-CKDMlUw0.js (new) 10.3 kB 🔴 +10.3 kB 🔴 +2.66 kB 🔴 +2.33 kB
assets/ServerConfigPanel-BH0OsBSK.js (new) 8.2 kB 🔴 +8.2 kB 🔴 +2.17 kB 🔴 +1.9 kB
assets/ServerConfigPanel-vVTGh39D.js (removed) 8.2 kB 🟢 -8.2 kB 🟢 -2.17 kB 🟢 -1.9 kB
assets/UserPanel-BdjXiFcV.js (removed) 7.91 kB 🟢 -7.91 kB 🟢 -2.06 kB 🟢 -1.79 kB
assets/UserPanel-DIARxdym.js (new) 7.91 kB 🔴 +7.91 kB 🔴 +2.06 kB 🔴 +1.79 kB
assets/settings-B-df0dZe.js 20.7 kB 20.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-CI6OKvJn.js 22.9 kB 22.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-CXGVj_nD.js 24.5 kB 24.5 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DfQ6dSJj.js 31.6 kB 31.6 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DJ2QgDzm.js 25.2 kB 25.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DRNLPMG6.js 23.7 kB 23.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-DVVycxDc.js 19.9 kB 19.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-G6Dybj1b.js 24.1 kB 24.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/settings-M6_GZccG.js 26 kB 26 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 6 added / 6 removed

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

Reusable component library chunks

File Before After Δ Raw Δ Gzip Δ Brotli
assets/ComfyQueueButton-B8Z_AKPW.js (new) 11.1 kB 🔴 +11.1 kB 🔴 +2.76 kB 🔴 +2.43 kB
assets/ComfyQueueButton-DNsERFps.js (removed) 11.1 kB 🟢 -11.1 kB 🟢 -2.76 kB 🟢 -2.44 kB
assets/UserAvatar.vue_vue_type_script_setup_true_lang-C9bSkTC5.js 1.12 kB 1.12 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 1 added / 1 removed

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

Stores, services, APIs, and repositories

File Before After Δ Raw Δ Gzip Δ Brotli
assets/keybindingService-C69Fg4Nj.js (removed) 7.21 kB 🟢 -7.21 kB 🟢 -1.75 kB 🟢 -1.5 kB
assets/keybindingService-D1pWgpcs.js (new) 7.21 kB 🔴 +7.21 kB 🔴 +1.74 kB 🔴 +1.5 kB
assets/serverConfigStore-DKFCHTwG.js 2.79 kB 2.79 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

Status: 1 added / 1 removed

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

Helpers, composables, and utility bundles

File Before After Δ Raw Δ Gzip Δ Brotli
assets/mathUtil-CTARWQ-l.js 1.07 kB 1.07 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
Vendor & Third-Party — 5.36 MB (baseline 5.36 MB) • ⚪ 0 B

External libraries and shared vendor chunks

File Before After Δ Raw Δ Gzip Δ Brotli
assets/vendor-other-DeLqDzIL.js 3.22 MB 3.22 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-primevue-PESgPnbc.js 517 B 517 B ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-tiptap-Ci_SvJNs.js 232 kB 232 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-visualization-BEfdbjRw.js 1.82 MB 1.82 MB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/vendor-vue-DV4Jvukv.js 92.4 kB 92.4 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
Other — 2.55 MB (baseline 2.55 MB) • ⚪ 0 B

Bundles that do not match a named category

File Before After Δ Raw Δ Gzip Δ Brotli
assets/commands-B2KZRBmX.js 15.1 kB 15.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-Bw-ckyga.js 13.9 kB 13.9 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-C_NmM85I.js 13.8 kB 13.8 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-CuozCW4W.js 14 kB 14 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DGfVUJCR.js 16.2 kB 16.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-dOJNDogK.js 14.5 kB 14.5 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-DwiE551e.js 14.7 kB 14.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-Fw7mvqSy.js 13.1 kB 13.1 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/commands-FXnO1W4Q.js 13.2 kB 13.2 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-Bgu6_Hvd.js 59.5 kB 59.5 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-Bv0L0qvp.js 93 kB 93 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-C3Doz3n_.js 67.6 kB 67.6 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-C7eBl607.js 70.7 kB 70.7 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-CHiV9ds2.js 76.4 kB 76.4 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-CIc79Nts.js 68.5 kB 68.5 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-DK5LmuBm.js 58.8 kB 58.8 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-J1nit7cj.js 66.3 kB 66.3 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/main-W97XgvAQ.js 80.4 kB 80.4 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-8Ef8lY1m.js 196 kB 196 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-BdF8EiZl.js 200 kB 200 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-Bv9Y8Cvp.js 229 kB 229 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-cMdB_wHv.js 179 kB 179 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-CvNWbbtX.js 194 kB 194 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-CwDWxzVz.js 215 kB 215 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-CyPAVHpA.js 191 kB 191 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-D6QTD6bJ.js 181 kB 181 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B
assets/nodeDefs-DKn6VmRJ.js 192 kB 192 kB ⚪ 0 B ⚪ 0 B ⚪ 0 B

cn(
'absolute inset-0 w-full h-full pointer-events-none',
isInteracting ? 'transform-pane--interacting' : 'will-change-auto',
'absolute inset-0 w-full h-full pointer-events-none will-change-auto',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IIRC transform-pane--interacting, will-change: transform which served 2 purposes:

  1. A browser hint to promote the layer to the compositor. Without will-change: transform what are we relying on to ensure promotion? Is the css transform declaration on the transform pane itself enough? https://webperf.tips/tip/layers-and-compositing/#when-are-layers-created
  2. The flip back to will-change: auto forced a reflow and subsequent paint which ensured at close zoom pixel stretch wouldn't be noticeable. @christian-byrne I remember earlier conversations where I was unsure if it was needed but found a few examples where without it, the node's text and borders were significantly stretched. Can we confirm this is not needed now?

// Vue node system
const vueNodeLifecycle = useVueNodeLifecycle()
const { handleTransformUpdate } = useViewportCulling()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Viewport Culling was one of if not the most needle moving performance improvement to large workflows (removing nodes from the layout tree via display: none in order to shrink the layer bounds) from the performance dev tool flame graph traces I ran.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I compared this branch with main (that has viewport culling) and in 300+ node large workflows when zoomed in helps the responsiveness by a considerable amount. What tests did you use to determine it was unnecessary?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested with a workflow with 896 nodes and it was a lot smoother to both zoom and pan.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could definitely vary across OS/Browser/Browser settings.

@DrJKL DrJKL force-pushed the drjkl/slap-it-on branch 4 times, most recently from b92e640 to 5ac24b2 Compare October 28, 2025 20:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XL This PR changes 500-999 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants