perf(editor): Use virtual scrolling in RunDataJson.vue
#10838
Conversation
RicardoE105
changed the title
RicardoE105
changed the title
RunDataJson.vue
n8n-assistant
bot
added
n8n team
RicardoE105
changed the title
RunDataJson.vueRunDataJson.vue
| const jsonDataContainer = this.$refs.jsonDataContainer as HTMLDivElement; | ||
| this.jsonDataContainerHeight = jsonDataContainer.offsetHeight; |
There was a problem hiding this comment.
have you considered using https://vueuse.org/core/useElementSize/#usage ?
this implementation won't work properly if for some reason the user resizes the screen
There was a problem hiding this comment.
Ahh interesting! Will update it to use it. Thanks for the suggestion. Did not know about it. As you can see, I'm a newbie in the FE.
There was a problem hiding this comment.
Agree with @r00gm, either that or with manual listener but we need to make sure it's updated when the element is resized.
There was a problem hiding this comment.
Will apply this PR is merged, as could not get the reference to the div in the template from the setup method. Probably because we are mixing setup method and options API.
There was a problem hiding this comment.
You should be able, you just need to return it from the setup method but still nice that you did the migration.
| const jsonDataContainer = this.$refs.jsonDataContainer as HTMLDivElement; | ||
| this.jsonDataContainerHeight = jsonDataContainer.offsetHeight; |
There was a problem hiding this comment.
Agree with @r00gm, either that or with manual listener but we need to make sure it's updated when the element is resized.
n8n
|
||||||||||||||||||||||||||||
| Project |
n8n
|
| Branch Review |
ado-2598-enable-virtual-scrolling-in-node-output
|
| Run status |
|
| Run duration | 04m 42s |
| Commit |
|
| Committer | Ricardo Espinoza |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
2
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
430
|
| View all changes introduced in this branch ↗︎ | |
|
✅ All Cypress E2E specs passed |
RicardoE105
deleted the
ado-2598-enable-virtual-scrolling-in-node-output
branch
Summary
Community member suggested to enable virtual scrolling in
vue-json-prettyto improve performance when rendering big datasets. There is a massive difference in performance when virtual is enabled.Before: https://share.cleanshot.com/MF4hyWMN
Now: https://share.cleanshot.com/G2v0kSPg
Related Linear tickets, Github issues, and Community forum posts
GH issue: #7584
Linear ticket: https://linear.app/n8n/issue/ADO-2598/enable-virtual-scrolling-in-node-output
Review / Merge checklist
release/backport(if the PR is an urgent fix that needs to be backported)