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.

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

Extend edges functionality to support drag and drop to add relationship between tables. #12

Open
keepcalmncode opened this issue Apr 19, 2024 · 1 comment

Comments

@keepcalmncode
Copy link

Hi wonderful work with the visualizer.
I have a specific request, maybe you could help me out in breaking down the implementation.

So is there a possibility to add a drag and drop functionality where I can select a field in a source table and drag a line(similar to the line present in edges) to a field in the target table and it will automatically generate the config for the edges.

So regarding generating the config for edges, it could be done when I implement the drag and drop functionality, so is there any way how I can achieve it on the UI.

@makaroni4
Copy link
Contributor

Hey @keepcalmncode 👋

Brilliant idea, I love it! 👏

Yes, there's a onConnect callback in ReactFlow that's fired when you're drawing a new edge: https://reactflow.dev/api-reference/react-flow#on-connect

As you can see, I've disabled it (since edges are defined in the config file): 1fde8b1

We can have a very nice UX, where we draw a one-to-many relationship by default. If a user holds the 1 key, then we draw a one-to-one relationship.

❓ The question is – how do we deliver the edge config back to the app? You can do something similar to table positions and copy the edge config to the clipboard or even better – write it to a file.

Happy to help you with a PR review, but it has to be you to drive it 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants