Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

perf(editor): Improve node rendering performance when opening large workflows #7904

Merged
merged 2 commits into from
Dec 1, 2023
Merged

perf(editor): Improve node rendering performance when opening large workflows #7904

merged 2 commits into from
Dec 1, 2023

Conversation

MiloradFilipovic
Copy link
Contributor

@MiloradFilipovic MiloradFilipovic commented Dec 1, 2023 •
edited
Loading

Summary

In an effort to do as little processing as possible in each Node component, this PR passes current workflow object to it as a property instead of calling the slow getCurrentWorkflow store getter a few times in each node. This should substantially improve loading times for large workflows.

As a benchmark, I was using a workflow from this Linear ticket and this fix brought down opening time by 20 seconds. Together with fixes from #7901, this workflow was opening in less than 10 seconds on my laptop.

Latest e2e run

How to test the change:

  1. Open a large workflow
  2. Observe loading time

Issues fixed

ADO-1523
https://community.n8n.io/t/ui-very-slow-with-more-than-100-nodes/8236/14

Review / Merge checklist

  • PR title and summary are descriptive. Remember, the title automatically goes into the changelog. Use (no-changelog) otherwise. (conventions)
  • Docs updated or follow-up ticket created.
  • Tests included.

    A bug is not considered fixed, unless a test is added to prevent it from happening again. A feature is not complete without tests.

    (internal) You can use Slack commands to trigger e2e tests or deploy test instance or deploy early access version on Cloud.

@MiloradFilipovic MiloradFilipovic self-assigned this Dec 1, 2023
@cypress Cypress
Copy link

cypress bot commented Dec 1, 2023 •
edited
Loading

Passing run #3163 ↗︎

0 297 5 0 Flakiness 0

Details:

🌳 🖥️ browsers:node18.12.0-chrome107 🤖 MiloradFilipovic 🗃️ e2e/*
Project: n8n Commit: b89bd4d148
Status: Passed Duration: 06:28 💡
Started: Dec 1, 2023 4:37 PM Ended: Dec 1, 2023 4:43 PM

Review all test suite changes for PR #7904 ↗︎

@n8n-assistant n8n-assistant bot added n8n team Authored by the n8n team ui Enhancement in /editor-ui or /design-system labels Dec 1, 2023
@mutdmour mutdmour changed the title perf(editor): Improve node rendering performance when opening workflows perf(editor): Improve node rendering performance when opening large workflows Dec 1, 2023
mutdmour
mutdmour reviewed Dec 1, 2023
View reviewed changes
Copy link
Contributor

@mutdmour mutdmour left a comment

Choose a reason for hiding this comment

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

Awesome

packages/editor-ui/src/mixins/nodeBase.ts Outdated Show resolved Hide resolved
@mutdmour
Copy link
Contributor

mutdmour commented Dec 1, 2023

can you update the checklist? have you tried adding an e2e test to open a huge workflow? I wonder if that will work..

@MiloradFilipovic
Copy link
Contributor Author

can you update the checklist? have you tried adding an e2e test to open a huge workflow? I wonder if that will work..

Not yet, since now we have a project we can tackle adding performance tests as part of it if that sounds reasonable

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Dec 1, 2023

✅ All Cypress E2E specs passed

@MiloradFilipovic MiloradFilipovic merged commit a8049a0 into master Dec 1, 2023
@MiloradFilipovic MiloradFilipovic deleted the speed-up-opening-workflows-pt2 branch December 1, 2023 16:50
MiloradFilipovic added a commit that referenced this pull request Dec 1, 2023
@MiloradFilipovic
Merge branch 'master' into speed-up-opening-workflows
43d17ac 
* master:
  perf(editor): Improve node rendering performance when opening large workflows (#7904)
  docs: Create PR template (no-changelog) (#7902)
  fix(editor): Tune styles of template credential setup (no-changelog) (#7898)

# Conflicts:
#	packages/editor-ui/src/views/NodeView.vue
@github-actions github-actions bot mentioned this pull request Dec 6, 2023
Merged
ivov added a commit that referenced this pull request Dec 6, 2023
@github-actions @ivov
🚀 Release 1.20.0 (#7940)
823b589 
#
[1.20.0](https://github.com/n8n-io/n8n/compare/n8n@1.19.0...n8n@1.20.0)
(2023-12-06)


### Bug Fixes

* **AWS DynamoDB Node:** Improve error message parsing
([#7793](#7793))
([5ba5ed8](5ba5ed8))
* **core:** Allow grace period for binary data deletion after manual
execution ([#7889](#7889))
([61d8aeb](61d8aeb))
* **core:** Consolidate ownership and sharing data on workflows and
credentials ([#7920](#7920))
([38b88b9](38b88b9))
* **core:** Fix hard deletes stopping if database query throws
([#7848](#7848))
([46dd4d3](46dd4d3))
* **core:** Make sure mfa secret and recovery codes are not returned on
login ([#7936](#7936))
([f5502cc](f5502cc))
* **editor:** Fix deletion of last execution at execution preview
([#7883](#7883))
([ce2d388](ce2d388))
* **editor:** Replace isInstanceOwner checks with scopes where
applicable ([#7858](#7858))
([132d691](132d691))
* **Google Sheets Node:** Fix issue with paired items not being set
correctly ([#7862](#7862))
([5207a2f](5207a2f))
* **Notion Node:** Fix broken Notion node parameters
([#7864](#7864))
([51d1f5b](51d1f5b)),
closes [#7791](#7791)


### Features

* **BambooHR Node:** Add support for Only Current on company reports
([#7878](#7878))
([4175801](4175801))
* **core:** Allow admin creation
([#7837](#7837))
([476806e](476806e))
* **editor:** Add sections to create node panel
([#7831](#7831))
([39fa8d2](39fa8d2))
* **editor:** Open template credential setup from collection
([#7882](#7882))
([627ddb9](627ddb9))
* **editor:** Select credentials in template setup if theres only one
([#7879](#7879))
([fe3417a](fe3417a))


### Performance Improvements

* **editor:** Improve node rendering performance when opening large
workflows ([#7904](#7904))
([a8049a0](a8049a0))
* **editor:** Improve performance when opening large workflows with node
issues ([#7901](#7901))
([4bd7ae2](4bd7ae2))

Co-authored-by: ivov <ivov@users.noreply.github.com>
@janober
Copy link
Member

janober commented Dec 6, 2023

Got released with n8n@1.20.0

@github-actions github-actions bot mentioned this pull request Dec 13, 2023
Closed
# for free to join this conversation on GitHub. Already have an account? # to comment
Reviewers

@mutdmour mutdmour mutdmour approved these changes

Assignees

@MiloradFilipovic MiloradFilipovic

Labels
n8n team Authored by the n8n team Released ui Enhancement in /editor-ui or /design-system
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@MiloradFilipovic @mutdmour @janober