A Graph Builder Tool will allow one to visually create a Burr Graph, by dragging and dropping and interacting on a React Flow-based canvas. This will allow you to view and copy the generated boilerplate Python Burr Graph, which you can then use in your Burr application.

Changes

• added @xyflow/react (React Flow) to enable the graph builder functionality
• added source code editor view (prism-react-renderer) to allow view and copy of generated code to clipboard
• added a new GraphBuilder component with all its supporting functionality

How I tested this (all manual tests)

• The graph builder does not depend on any API functionality, so all I had to test was the new Graph Builder functionality in the Burr UI.
• create, edit and delete Nodes
• create edit and delete Edges
• view and copy generated Python graph to clipboard
• view and copy generated graph JSON to clipboard
• try all the Key commands (keyboard shortcuts)
• expand and collapse left sidepanel
• expand and collapse right sifepanel
• load and view example graphs
• create nodes from te FAB button

Notes

• a separate pull request is created to refactor the GraphView component to use the same version of ReactFlow as being used in this PR, as this is already getting big.

Checklist

• PR has an informative and human-readable title (this will be pulled into the release notes)
• Changes are limited to a single goal (no scope creep)
• Code passed the pre-commit check & code is left cleaner/nicer than when first encountered.
• Any change in functionality is tested
• New functions are documented (with a description, list of inputs, and expected output)
• Placeholder code is flagged / future TODOs are captured in comments
• Project documentation has been updated if adding/changing functionality.