Skip to content

feat(ui): Optimize Diff Rendering Asynchronous Loading with Virtual Scrolling to Improve Performance #19921

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
Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat(ui): Optimize Diff Rendering Asynchronous Loading with Virtual Scrolling to Improve Performance #19921

wants to merge 3 commits into from
+331 −79

Conversation

linghaoSu
Copy link
Member

@linghaoSu linghaoSu commented Sep 13, 2024 •
edited
Loading

Fixes #17859, Fixes #20136

Since a large number of diff files can cause a page to get stuck, the diff behaviour is split into asynchronous to avoid blocking the browser rendering.

At the same time, add virtual scrolling in the code display area to avoid adding too many dom at once, which will cause performance pressure on the browser at the same time.

Before

2024-09-13.15.23.50.720p.mov

Now

cliped-480p.mov

Checklist:

  • Either (a) I've created an enhancement proposal and discussed it with the community, (b) this is a bug fix, or (c) this does not need to be in the release notes.
  • The title of the PR states what changed and the related issues number (used for the release note).
  • The title of the PR conforms to the Toolchain Guide
  • I've included "Closes [ISSUE #]" or "Fixes [ISSUE #]" in the description to automatically close the associated issue.
  • I've updated both the CLI and UI to expose my feature, or I plan to submit a second PR with them.
  • Does this PR require documentation updates?
  • I've updated documentation as required by this PR.
  • I have signed off all my commits as required by DCO
  • I have written unit and/or e2e tests for my change. PRs without these are unlikely to be merged.
  • My build is green (troubleshooting builds).
  • My new feature complies with the feature status guidelines.
  • I have added a brief description of why this PR is necessary and/or what this PR solves.
  • Optional. My organization is added to USERS.md.
  • Optional. For bug fixes, I've indicated what older releases this fix should be cherry-picked into (this may or may not happen depending on risk/complexity).

@bunnyshell Bunnyshell
Copy link

bunnyshell bot commented Sep 13, 2024 •
edited
Loading

❗ Preview Environment undeploy from Bunnyshell failed

See: Environment Details | Pipeline Logs

Available commands (reply to this comment):

  • 🚀 /bns:deploy to redeploy the environment
  • ❌ /bns:delete to try again to remove the environment

@bunnyshell Bunnyshell
Copy link

bunnyshell bot commented Sep 13, 2024

✅ Preview Environment created on Bunnyshell but will not be auto-deployed

See: Environment Details

Available commands (reply to this comment):

  • 🚀 /bns:deploy to deploy the environment

@linghaoSu linghaoSu force-pushed the feat/multi-diff-async branch from 8afb1af to cffa9e7 Compare September 13, 2024 03:11
@linghaoSu linghaoSu marked this pull request as ready for review September 13, 2024 07:25
@linghaoSu linghaoSu requested a review from a team as a code owner September 13, 2024 07:25
@linghaoSu linghaoSu force-pushed the feat/multi-diff-async branch 2 times, most recently from 07eef52 to fe981cf Compare September 13, 2024 07:39
@linghaoSu
Copy link
Member Author

Hi team Where do I get the account password for this preview environment? https://argocd-2z2443.bunnyenv.com/

@linghaoSu linghaoSu changed the title feat(ui): diff file async in app detail feat(ui): Optimize Diff Rendering Asynchronous Loading with Virtual Scrolling to Improve Performance Sep 13, 2024
nitishfy
nitishfy reviewed Sep 16, 2024
View reviewed changes
Copy link
Member

@nitishfy nitishfy left a comment

Choose a reason for hiding this comment

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

LGTM!

@linghaoSu
feat(ui): diff file async in app detail
45df661 
Signed-off-by: linghaoSu <linghao.su@daocloud.io>
@linghaoSu
feat(ui): add virtual scroll in app diff avoid to crash
53fa737 
Signed-off-by: linghaoSu <linghao.su@daocloud.io>
@linghaoSu linghaoSu force-pushed the feat/multi-diff-async branch from fe981cf to 53fa737 Compare September 19, 2024 01:53
This was referenced Sep 19, 2024
Merged
Closed
@linghaoSu
Copy link
Member Author

@CodiumAI-Agent /review

@CodiumAI-Agent
Copy link

CodiumAI-Agent commented Sep 26, 2024 •
edited
Loading

PR Reviewer Guide 🔍

(Review updated until commit 53fa737)

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Key issues to review

Performance Concern
The use of virtual scrolling and asynchronous loading is implemented, but there's no handling for potential race conditions or errors during the asynchronous operations. This could lead to inconsistent states or UI errors under certain conditions.

Error Handling
The processQueue function lacks comprehensive error handling, which might lead to unhandled promise rejections or failures that are not communicated to the user.

@crenshaw-dev
Copy link
Member

I tested in the Bunnyshell environment, and this seems to work beautifully. I'm not enough of a frontend expert to give a proper review, but hopefully one of our UI folks can take a look soon. Thanks for the PR!!

@CodiumAI-Agent
Copy link

Persistent review updated to latest commit 53fa737

@nitishfy nitishfy mentioned this pull request Oct 25, 2024
Closed
6 tasks
@andrii-korotkov-verkada
Copy link
Contributor

@linghaoSu, I've asked for review in CNCF Slack. Can you rebase on the latest master and re-test, please?

@thesuperzapper
Copy link

As part of the work for #17188, I am making some significant updates to the underlying diff code, can we hold off on merging this until I have raised that PR to avoid conflicts?

There is a good chance some kind of asynchronous solution will still be needed, but it's probably easier if we merge the update first.

I will post a link to my PR (hopefully ready sometime today) on that issue.

@thesuperzapper
Copy link

@andrii-korotkov-verkada @linghaoSu I have raised my PR: #20834

It will probably take a little while to review, but it's very important for the project.

Once it's merged, we can either discuss rebasing this PR, or perhaps you could help do the migration from react-diff-view to monaco (which is the YAML editor we use for the non-diff views, but it turns out can also diff much better than react-diff-view).

keithchong
keithchong reviewed Nov 21, 2024
View reviewed changes
...pp/applications/components/application-resources-diff/application-resources-diff-section.tsx
const [diffFiles, setDiffFiles] = React.useState<DiffFileModel[]>(
prepareDiff.map(() => ({
loading: true,
file: {}
Copy link
Contributor

@keithchong keithchong Nov 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Is it possible that hunks is undefined that it can pose a problem in the call to markEdits during loading?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@keithchong keithchong keithchong left review comments

@nitishfy nitishfy nitishfy left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Optimize diff performance in the application detail diff tab Diff page becomes unresponsive if it is large
7 participants
@linghaoSu @CodiumAI-Agent @crenshaw-dev @andrii-korotkov-verkada @thesuperzapper @keithchong @nitishfy