Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in 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
20 checks passed
@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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in 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