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

[3983] Add drag and drop support for explorer #4025

Merged
merged 1 commit into from
Oct 26, 2024
Merged

[3983] Add drag and drop support for explorer #4025

merged 1 commit into from
Oct 26, 2024

Conversation

frouene
Copy link
Contributor

@frouene frouene commented Sep 23, 2024

Bug: #3983

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?

@frouene frouene added this to the 2024.11.0 milestone Sep 23, 2024
@frouene frouene linked an issue Sep 23, 2024 that may be closed by this pull request
Support drag and drop in the explorer #3983
Closed
@frouene frouene force-pushed the fro/enh/dnd-explorer branch 2 times, most recently from d6d0c0a to 7bb7d8d Compare September 24, 2024 12:58
@frouene frouene force-pushed the fro/enh/dnd-explorer branch 2 times, most recently from a905a77 to 0970c1f Compare October 9, 2024 07:57
@frouene frouene force-pushed the fro/enh/dnd-explorer branch 2 times, most recently from 06057a2 to 8de634b Compare October 23, 2024 12:58
sbegaudeau
sbegaudeau requested changes Oct 25, 2024
View reviewed changes
Copy link
Member

@sbegaudeau sbegaudeau left a comment

Choose a reason for hiding this comment

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

I'll rebase it and merge it in a couple minutes after a quick test

packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItem.tsx
<div
className={`${state.partHovered === 'before' ? classes.treeItemHover : ''} ${classes.treeItemBefore}`}
onDrop={onDropBefore}
onDragEnter={() => handleMouseEnter('before')}
Copy link
Member

Choose a reason for hiding this comment

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

I won't block the PR for that but this will update the state of this treeItem and thus re-render all of its children when we are dragging elements just to update some CSS. We may have to re-create that in pure CSS since it is very similar to another major performance issue identified on tree items.

You can change the style of an element because another one is :hover in CSS.

Copy link
Member

Choose a reason for hiding this comment

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

See #4139 for an attempt at this.

sbegaudeau
sbegaudeau approved these changes Oct 25, 2024
View reviewed changes
Copy link
Member

@sbegaudeau sbegaudeau left a comment

Choose a reason for hiding this comment

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

I clicked the wrong button :)

@sbegaudeau
Copy link
Member

I'll merge it as is for now but it creates some issues with the hover feedback since tons of nodes seems to be selected after the drag and drop

Enregistrement.de.l.ecran.2024-10-25.a.15.50.31.mov

@sbegaudeau
Copy link
Member

It appears that this PR makes the code coverage of org.eclipse.sirius.web.application.views.explorer.services drop from 95% to 89%, I'll look into it

sbegaudeau
sbegaudeau reviewed Oct 25, 2024
View reviewed changes
...rg/eclipse/sirius/web/application/controllers/trees/ExplorerDropTreeItemControllerTests.java
@DisplayName("Given a studio, when we drag and drop an item in the explore, then the object is moved")
@Sql(scripts = { "/scripts/studio.sql" }, executionPhase = Sql.ExecutionPhase.BEFORE_TEST_METHOD)
@Sql(scripts = { "/scripts/cleanup.sql" }, executionPhase = Sql.ExecutionPhase.AFTER_TEST_METHOD, config = @SqlConfig(transactionMode = SqlConfig.TransactionMode.ISOLATED))
public void givenStudioWhenWeDragAndDropAnItemThenTheObjectIsMoved() {
Copy link
Member

Choose a reason for hiding this comment

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

This test is only testing one of the three (?) kind of move possible, additional tests are required. I'll update it myself.

sbegaudeau
sbegaudeau reviewed Oct 25, 2024
View reviewed changes
...a/org/eclipse/sirius/web/application/configuration/SiriusWebMessageServiceConfiguration.java Outdated
@@ -0,0 +1,36 @@
/*******************************************************************************
Copy link
Member

Choose a reason for hiding this comment

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

We already have a message service in Sirius Web used by multiple services of sirius-web-application, do we really need a second one?

@pcdavid
Copy link
Member

pcdavid commented Oct 25, 2024

I'll merge it as is for now but it creates some issues with the hover feedback since tons of nodes seems to be selected after the drag and drop

Hover can be very slow for nodes with lots of visible descendants: #4094. I've seen it lag for several seconds when testing with a few thousands tree items displayed.

@sbegaudeau sbegaudeau force-pushed the fro/enh/dnd-explorer branch 3 times, most recently from 18708c4 to edb4130 Compare October 25, 2024 21:12
@frouene @sbegaudeau
[3983] Add drag and drop support for explorer
3fa9b6c 
Bug: #3983
Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>
@sbegaudeau sbegaudeau merged commit 4a81339 into master Oct 26, 2024
4 checks passed
@sbegaudeau sbegaudeau deleted the fro/enh/dnd-explorer branch October 26, 2024 20:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sbegaudeau sbegaudeau sbegaudeau approved these changes

@gcoutable gcoutable gcoutable approved these changes

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

@AxelRICHARD AxelRICHARD Awaiting requested review from AxelRICHARD

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

Successfully merging this pull request may close these issues.

Support drag and drop in the explorer
4 participants
@frouene @sbegaudeau @pcdavid @gcoutable