feat: added ReactFlow-based node graph #11

2025-10-12T12:10:20Z

j.gerla commented

2025-10-12 12:10:20 +00:00

(Migrated from git.science.uu.nl)

Added ReactFlow to dependencies (@xyflow/react). Added a basic ReactFlow template to test the functionality of ReactFlow and to build the visual programming UI on top of. Also created a basic dummy implementation to start editor development.

The current features include:

state management using Zustand: can be tested by seeing if editor behavior works as expected, and nodes can be moved, connected and deleted.
Nodes can be added to the Graph from a drag and drop panel at the top of the editor window: to test, left-click and drag a node from the panel into the editor window, then release the left mouse button to drop it into the graph.
A node can be moved inside the graph by dragging it: to drag, press and hold the left mouse button over a node inside the graph, and move the mouse to drag the node around
A node can be connected to another node by creating an edge. To do this, left-click on a handle and release the left mouse button when hovering over a different handle. Connections flow from source to target nodes; a target handle cannot link to another target handle.
A node can be deleted by clicking on the node inside the graph, which opens up the node toolbar. This currently contains one button, namely the delete button; click this to delete the selected node. Start and End nodes cannot be deleted, thus the delete button will be greyed out when a Start or End node is selected.
To remove an edge between two nodes left left-click close (but not on) one of its connected handles and drag the edge away from the node, then release the left mouse button to drop the edge and remove the connection from the graph.

to run the unit tests use "npx jest" in the terminal

ref: N25B-114

Added ReactFlow to dependencies (@xyflow/react). Added a basic ReactFlow template to test the functionality of ReactFlow and to build the visual programming UI on top of. Also created a basic dummy implementation to start editor development. The current features include: * state management using Zustand: can be tested by seeing if editor behavior works as expected, and nodes can be moved, connected and deleted. * Nodes can be added to the Graph from a drag and drop panel at the top of the editor window: to test, left-click and drag a node from the panel into the editor window, then release the left mouse button to drop it into the graph. * A node can be moved inside the graph by dragging it: to drag, press and hold the left mouse button over a node inside the graph, and move the mouse to drag the node around * A node can be connected to another node by creating an edge. To do this, left-click on a handle and release the left mouse button when hovering over a different handle. Connections flow from source to target nodes; a target handle cannot link to another target handle. * A node can be deleted by clicking on the node inside the graph, which opens up the node toolbar. This currently contains one button, namely the delete button; click this to delete the selected node. Start and End nodes cannot be deleted, thus the delete button will be greyed out when a Start or End node is selected. * To remove an edge between two nodes left left-click close (but not on) one of its connected handles and drag the edge away from the node, then release the left mouse button to drop the edge and remove the connection from the graph. to run the unit tests use "npx jest" in the terminal ref: N25B-114

j.gerla commented

2025-10-12 12:11:04 +00:00

(Migrated from git.science.uu.nl)

assigned to @j.gerla

0950726 commented

2025-10-21 09:52:41 +00:00

(Migrated from git.science.uu.nl)

        <Link to={"/editor"}>Editor →</Link>

Make this capitalized like other links (sorry, nit pick)

```suggestion:-0+0 <Link to={"/editor"}>Editor →</Link> ``` Make this capitalized like other links (sorry, nit pick)

0950726 commented

2025-10-21 09:56:30 +00:00

(Migrated from git.science.uu.nl)

This link is no longer necessary, cause the main App defines a header with a link to home.

After this link is removed, the only thing left will be <VisProgUI>. I suggest putting the contents of ./components/VisProgUI.tsx to this file, making code navigation easier.

This link is no longer necessary, cause the main `App` defines a header with a link to home. After this link is removed, the only thing left will be `<VisProgUI>`. I suggest putting the contents of `./components/VisProgUI.tsx` to this file, making code navigation easier.

0950726 commented

2025-10-21 10:15:23 +00:00

(Migrated from git.science.uu.nl)

We should avoid using inline styles. Performance is worse, and some of this can be done very easy with the CSS classes in App.css. Namely: padding, display, flexDirection and gap can be covered with just three classes, like className="flex-col gap-lg padding-md".

We should avoid using inline styles. [Performance is worse](https://legacy.reactjs.org/docs/faq-styling.html#are-inline-styles-bad), and some of this can be done very easy with the CSS classes in `App.css`. Namely: `padding`, `display`, `flexDirection` and `gap` can be covered with just three classes, like `className="flex-col gap-lg padding-md"`.

0950726 commented

2025-10-21 10:20:26 +00:00

(Migrated from git.science.uu.nl)

Make this a .module.css file to ensure we get no contamination/conflicts/confusion when two classes (coincidentally) use the same CSS classname.

Also requires rewriting the references to these classes, like classname={styles.outerEditorContainer} instead of classname="outer-editor-container".

Make this a `.module.css` file to ensure we get no contamination/conflicts/confusion when two classes (coincidentally) use the same CSS classname. Also requires rewriting the references to these classes, like `classname={styles.outerEditorContainer}` instead of `classname="outer-editor-container"`.

0950726 commented

2025-10-21 10:43:20 +00:00

(Migrated from git.science.uu.nl)

requested review from @0950726

j.gerla commented

2025-10-21 11:59:46 +00:00

(Migrated from git.science.uu.nl)

changed this line in version 2 of the diff

changed this line in [version 2 of the diff](/ics/sp/2025/n25b/pepperplus-ui/-/merge_requests/11/diffs?diff_id=132616&start_sha=5cbcf30f6838c25ef3f44e5162c455c7765c92cd#520aaaf3bcf49e84fdfead5bdc2b3e40848b9d1d_15_15)

j.gerla commented

2025-10-21 11:59:47 +00:00

(Migrated from git.science.uu.nl)

added 1 commit

9235b82f - Apply 1 suggestion(s) to 1 file(s)