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

[keepcalmncode]

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]

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): https://github.com/sqlhabit/sql_schema_visualizer/commit/1fde8b1d56df2b92334b6126c8d1c3a18be01ee3

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 🚀