[2443] Use dynamic handles

[mcharfadi]

Bug: #2443

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]

I have not yet reviewed everything in depth, but I prefer publishing my current remarks now so that we can iterate instead of waiting any longer.

It's too late now, but the PR mixes several changes that should probably have been done separately and iteratively. As it is, it's difficult to follow what code changes correspond to which UI/behavior change between:

• distinguish between the "create connection" handles displayed on a node to start the edge creation process from the "edge source/target handle" displayed on an edge to trigger a reconnection;
• only display the "create connection" handles (resp. "edge source/target handle") on a node (resp. edge) when it is selected);
• hightlight the compatible nodes (and fade the incompatible ones) during the edge creation process (actually, this does not seem to work as expected);
• distribute the endpoints of multiple edges which share the same side of a node so that they are visually distinguished.

The names chosen (especially "Custom Handle") do not help.

Cypress tests should also be added.

[pcdavid]

Not sure about this, this looks like a potential performance issue.
Same remark for the other kinds of nodes.

[sbegaudeau]

• This code should not be there, we don't want to repeat that code in every single node, this belongs in a dedicated handle hook. Custom shapes will have to reuse it for example.
• Why do you need this ref? Why not a state?

I agree with @pcdavid, on top of being a potential performance issue, you do not have any idea of what would this behavior be in the future. That being said, it works for a large number of use cases it can be a pretty code solutions BUT, and I say this "but" with every single letter in upper case, I think that the unique place where this code would be needs a link to the original explanation which details why we need to be VERY VERY careful with this kind of solutions: facebook/react#14476 (comment)

Honestly, given the use case, I would rather have something like this:

const connectionHandlesIdentity = data.connectionHandles
                                      .map(handle => `${handle.nodeId}#${handle.edgeId}`)
                                      .join(', ');

useEffect(() => { ... }, [connectionHandlesIdentity])

The main difference being that if we change the structure of ConnectionHandle, we can select whether or not this code should be impacted.

[mcharfadi]

Thanks for the explanation, I'll use a string as dependency of the useffect and put it in a custom hook then.

I used a ref because a state change would trigger a re render (unlike a ref change) and call updateNodeInternals which if called too much can impact the performance a lot. From my testing in this particular use case I get more render by using a state than a ref.

[pcdavid]

There are some known issues/possible improvements, but the basics are in place and work. @sbegaudeau unless you see something that jusitfies a veto from you, I say we merge this and continue improving in further PRs.

[pcdavid]

Just to prevent this being merged before we decide how to proceed.