8000 [3895] Reduce the number & scope of re-renders of the Explorer by pcdavid · Pull Request #5020 · eclipse-sirius/sirius-web · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

[3895] Reduce the number & scope of re-renders of the Explorer #5020

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 21 commits into
base: master
Choose a base branch
from
Open

[3895] Reduce the number & scope of re-renders of the Explorer #5020

wants to merge 21 commits into from

Conversation

pcdavid
Copy link
Member
@pcdavid pcdavid commented Jun 4, 2025 •
edited
Loading

Pull request template

General purpose

What is the main goal of this pull request?

  • Bug fixes
  • New features
  • Documentation
  • Cleanup
  • Tests
  • Build / releng

Project management

  • Has the pull request been added to the relevant project and milestone? (Only if you know that your work is part of a specific iteration such as the current one)
  • Have the priority: and pr: labels been added to the pull request? (In case of doubt, start with the labels priority: low and pr: to review later)
  • Have the relevant issues been added to the pull request?
  • Have the relevant labels been added to the issues? (area:, difficulty:, type:)
  • Have the relevant issues been added to the same project and milestone as the pull request?
  • Has the CHANGELOG.adoc been updated to reference the relevant issues?
  • Have the relevant API breaks been described in the CHANGELOG.adoc? (Including changes in the GraphQL API)
  • In case of a change with a visual impact, are there any screenshots in the CHANGELOG.adoc? For example in doc/screenshots/2022.5.0-my-new-feature.png

Architectural decision records (ADR)

  • Does the title of the commit contributing the ADR start with [doc]?
  • Are the ADRs mentioned in the relevant section of the CHANGELOG.adoc?

Dependencies

  • Are the new / upgraded dependencies mentioned in the relevant section of the CHANGELOG.adoc?
  • Are the new dependencies justified in the CHANGELOG.adoc?

Frontend

This section is not relevant if your contribution does not come with changes to the frontend.

General purpose

  • Is the code properly tested? (Plain old JavaScript tests for business code and tests based on React Testing Library for the components)

Typing

We need to improve the typing of our code, as such, we require every contribution to come with proper TypeScript typing for both changes contributing new files and those modifying existing files.
Please ensure that the following statements are true for each file created or modified (this may require you to improve code outside of your contribution).

  • Variables have a proper type
  • Functions’ arguments have a proper type
  • Functions’ return type are specified
  • Hooks are properly typed:
    • useMutation<DATA_TYPE, VARIABLE_TYPE>(…)
    • useQuery<DATA_TYPE, VARIABLE_TYPE>(…)
    • useSubscription<DATA_TYPE, VARIABLE_TYPE>(…)
    • useMachine<CONTEXT_TYPE, EVENTS_TYPE>(…)
    • useState<STATE_TYPE>(…)
  • All components have a proper typing for their props
  • No useless optional chaining with ?. (if the GraphQL API specifies that a field cannot be null, do not treat it has potentially null for example)
  • Nullable values have a proper type (for example let diagram: Diagram | null = null;)

Backend

This section is not relevant if your contribution does not come with changes to the backend.

General purpose

  • Are all the event handlers tested?
  • Are the event processor tested?
  • Is the business code (services) tested?
  • Are diagram layout changes tested?

Architecture

  • Are data structure classes properly separated from behavioral classes?
  • Are all the relevant fields final?
  • Is any data structure mutable? If so, please write a comment indicating why
  • Are behavioral classes either stateless or side effect free?

Review

How to test this PR?

Please describe here the various use cases to test this pull request

  • Has the Kiwi TCMS test suite been updated with tests for this contribution?

@pcdavid pcdavid changed the title Reduce the number & scope of re-renders of the Explorer [3895] Reduce the number & scope of re-renders of the Explorer Jun 4, 2025
@pcdavid pcdavid force-pushed the pcd/enh/reduce-explorer-renders branch from 7575816 to 168e433 Compare June 10, 2025 06:59
pcdavid added 21 commits June 11, 2025 14:53
@pcdavid
[3895] Memoize StyledLabel
f4b63b7 
Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Minor TS tweak in Workbench.types.ts
996b3d8 
Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Memoize TreeItemArrow
ddfd876 
Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Use actual constants for empty array props
1b9a297 
Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Use memo() and callbacks in ModelBrowserTreeView
b070835 
Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Use memo() and callbacks in SelectionDialogTreeView
87d24a4 
Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Memoize elements computed from the extension registry in Workb…
e88070c 
…ench.tsx

Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Memoize more elements in EditProjectView
35223fc 
Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Memoize the convertedTree in TreeView
3cbf9a5 
Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3985] Avoid setting the workbench selection if re-clicking on the se…
e3e58fd 
…lected tree item

Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Remove unnecessary dependency on the workbench to the selection
b481eed 
Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Make TreeItem independent on the global list of selected or ma…
045f232 
…rked items

Now that a tree item only renders itself, we can pass it its
individual selected & marked status instead of the full lists.

Also lift up the dragStart callback which itself needs to know the
full selectedTreeItemIds, but can be defined outside of TreeItem.

Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Memoize TreeItem
e3d785d 
Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Pull onDragStart callback up in TreeView
2157af8 
Use the data-treeitemid from the drag event target to make the
callback independent on the TreeItem instance.

The callback is still dependent on selectedTreeItemIds, but at least
should change only *once* per selection change.

Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Memoize selectedTreeItemIds in ExplorerView instead of re-comp…
386cb32 
…uting a new array value on each render

Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Avoid rendering TreeItemWithChildren for empty subtrees
20e157a 
Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Add toggleSelected() API to useSelection()
23b98ff 
This allows client components to toggle the selected state of an item
without depending themselves on the state of the selection.

Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Memoize the callbacks defined in ExplorerView
103bf6c 
Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Memoize TreeItemWithChildren
7990f7d 
Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3985] Reuse the same object for ExplorerView's expanded attribute if…
dd37ee3 
… possible

Even when the user simply *selected* a different tree item, with no
item expanded or collapsed, we modified the value of state.expanded
with an equivalent but distinct value, which prevented non-impacted
tree items to be properly memoized.

Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid
[3895] Make onTreeItemClick independant on selectedTreeItemIds
4861a01 
Instead of using selectedTreeItemIds to test if the clicked item is
selected, let it pass the information directly.

Bug: #3895
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
@pcdavid pcdavid force-pushed the pcd/enh/reduce-explorer-renders branch from 168e433 to 4861a01 Compare June 11, 2025 12:53
@pcdavid pcdavid marked this pull request as ready for review June 16, 2025 08:03
@pcdavid pcdavid added this to the 2025.10.0 milestone Jun 16, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sbegaudeau sbegaudeau Awaiting requested review from sbegaudeau sbegaudeau is a code owner

@AxelRICHARD AxelRICHARD Awaiting requested review from AxelRICHARD AxelRICHARD is a code owner

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

Assignees
No one assigned
Labels
pr: to review later priority: low
Projects
None yet
Milestone
2025.10.0
Development

Successfully merging this pull request may close these issues.
1 participant
@pcdavid
0