pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Refactoring all nodes functionality into their own files, create a modular framework for the visual programming. #21

Merged
9828273 merged 15 commits from refactor/node-encapsulation into dev 2025-11-20 15:00:02 +00:00
Conversation 37 Commits 15 Files Changed 25 +949 -2001
9828273 commented 2025-11-19 09:47:14 +00:00 (Migrated from git.science.uu.nl)
Copy Link

We should refactor the visual programming to make sure that all the nodes' functionality is encapsulated in their own files, and that through the use of polymorphism we can address the correct functionality from within the needed ReactFlow functions.

PLEASE NOTE that there are no tests written for the new visual programming page. This will need to be done in the future.

In order to test this merge, follow the steps and check the checklist:

  1. Switch to this branch on UI.
  2. Switch to dev on RI/CB.
  3. Make sure everything is fetched and pulled where needed.
  4. npm i to install everything needed.
  5. For system tests, make sure your certificates are in order on CB. These could differ depending on the naming refactor there.

Check which apply:

  • npx eslint --fix shows that there are no code style errors.
  • npx jest shows that all tests pass. (Even though the Visual Prog tests are just placeholders.)
  • This branch is up to date with dev.
  • All acceptance criteria are met in ticket N25B-294 Refactor the UI visual programming to encapsulate node's functionality.
  • Booting up everything, shows that all normal functionality works.
  • Everything is well documented.
  • The new structure is clear, and clean.
  • In the visual programming page, all nodes have their correct functionality and style, and outputting a program to the console gives the correct format.

To test how modular the new refactor is, you can opt to test this by creating a new node and seeing if it completely works:

  1. Create two new files in Node/, <Node>.jsx and <Node>.default.jsx.
  2. Copy the functionality / data from a similar node to the one you want to create (or make everything anew but that takes time).
  3. Change all occurrences of the to match <your_name>.
  4. Change any functionality/ data you would like in any of the two files. Make sure to match the default data in <Node>.default.ts to the data you defined in <Node>.tsx
  5. Optionally, create a style in the VisProg.module.css for .draggable-node-<your_type> and .node-<your_type>.
  6. Finally, reference all the functions and data in NodeRegistry, just following the structure there (make sure to correctly import).

Then check the following:

  • The new node shows up in the toolbar if you set the droppable data to true (if you set it to false you should probably manually add it in the initial nodes in VisProgStores.tsx).
  • The new node shows up and can connect to other nodes in the way you specified at your export default function <Node>(props){}
  • The new node will also already correctly reduce to the way you specified at your reduce function.
  • The new node will show up as its own type of data within phases when you reduce in case you didn't set the typing to return false in NodeRegistry's NodesInPhase.
  • The new node will use the Connects(...) function when connected with any node.

Additional comments:
In case you need any help understanding how to correctly setup a new node, you can message me. However, if it means the structure isn't clear enough, or, there needs to be more documentation, that means that the current implementation is not good enough.

ref: N25B-294 Refactor the UI visual programming to encapsulate node's functionality.

We should refactor the visual programming to make sure that all the nodes' functionality is encapsulated in their own files, and that through the use of polymorphism we can address the correct functionality from within the needed ReactFlow functions. > **PLEASE NOTE** that there are no tests written for the new visual programming page. This will need to be done in the future. In order to test this merge, follow the steps and check the checklist: 1. Switch to this branch on UI. 2. Switch to dev on RI/CB. 3. Make sure everything is fetched and pulled where needed. 4. `npm i` to install everything needed. 5. For system tests, make sure your certificates are in order on CB. These could differ depending on the naming refactor there. Check which apply: - [x] `npx eslint --fix` shows that there are no code style errors. - [x] `npx jest` shows that all tests pass. (Even though the Visual Prog tests are just placeholders.) - [x] This branch is up to date with dev. - [x] All acceptance criteria are met in ticket `N25B-294 Refactor the UI visual programming to encapsulate node's functionality.` - [x] Booting up everything, shows that all normal functionality works. - [x] Everything is well documented. - [x] The new structure is clear, and clean. - [x] In the visual programming page, all nodes have their correct functionality and style, and outputting a program to the console gives the correct format. To test how modular the new refactor is, you can opt to test this by creating a new node and seeing if it completely works: 1. Create two new files in `Node/`, `<Node>.jsx` and `<Node>.default.jsx`. 2. Copy the functionality / data from a similar node to the one you want to create (or make everything anew but that takes time). 3. Change all occurrences of the <name><Node> to match <your_name><Node>. 4. Change any functionality/ data you would like in any of the two files. Make sure to match the default data in `<Node>.default.ts` to the data you defined in `<Node>.tsx` 5. Optionally, create a style in the `VisProg.module.css` for `.draggable-node-<your_type>` and `.node-<your_type>`. 6. Finally, reference all the functions and data in NodeRegistry, just following the structure there (make sure to correctly import). Then check the following: - [x] The new node shows up in the toolbar if you set the `droppable` data to true (if you set it to false you should probably manually add it in the initial nodes in `VisProgStores.tsx`). - [x] The new node shows up and can connect to other nodes in the way you specified at your `export default function <Node>(props){}` - [x] The new node will also already correctly reduce to the way you specified at your reduce function. - [x] The new node will show up as its own type of data within phases when you reduce in case you didn't set the typing to return false in `NodeRegistry's NodesInPhase`. - [x] The new node will use the <Node>Connects(...) function when connected with any node. Additional comments: In case you need any help understanding how to correctly setup a new node, you can message me. However, if it means the structure isn't clear enough, or, there needs to be more documentation, that means that the current implementation is not good enough. ref: N25B-294 Refactor the UI visual programming to encapsulate node's functionality.
9828273 commented 2025-11-19 09:47:15 +00:00 (Migrated from git.science.uu.nl)
Copy Link

assigned to @9828273

assigned to @9828273
9828273 commented 2025-11-19 09:48:01 +00:00 (Migrated from git.science.uu.nl)
Copy Link

added 4 commits

  • 1f70ebd7...4f7c7309 - 3 commits from branch dev
  • f892db7b - Merge branch 'dev' into refactor/node-encapsulation

Compare with previous version

added 4 commits <ul><li>1f70ebd7...4f7c7309 - 3 commits from branch <code>dev</code></li><li>f892db7b - Merge branch &#39;dev&#39; into refactor/node-encapsulation</li></ul> [Compare with previous version](/ics/sp/2025/n25b/pepperplus-ui/-/merge_requests/21/diffs?diff_id=133780&start_sha=1f70ebd799f0657cb5d26273420d1a4390fa9ad9)
9828273 commented 2025-11-19 09:51:03 +00:00 (Migrated from git.science.uu.nl)
Copy Link

changed the description

changed the description
9828273 commented 2025-11-19 09:51:41 +00:00 (Migrated from git.science.uu.nl)
Copy Link

changed the description

changed the description
2584433 commented 2025-11-19 12:32:15 +00:00 (Migrated from git.science.uu.nl)
Copy Link

marked the checklist item npx eslint --fix shows that there are no code style errors. as completed

marked the checklist item **`npx eslint --fix` shows that there are no code style errors.** as completed
2584433 commented 2025-11-19 12:32:16 +00:00 (Migrated from git.science.uu.nl)
Copy Link

marked the checklist item npx jest shows that all tests pass. (Even though the Visual Prog tests are just placeholders.) as completed

marked the checklist item **`npx jest` shows that all tests pass. (Even though the Visual Prog tests are just placeholders.)** as completed
2584433 commented 2025-11-19 12:32:17 +00:00 (Migrated from git.science.uu.nl)
Copy Link

marked the checklist item This branch is up to date with dev. as completed

marked the checklist item **This branch is up to date with dev.** as completed
2584433 commented 2025-11-19 12:51:47 +00:00 (Migrated from git.science.uu.nl)
Copy Link

marked the checklist item All acceptance criteria are met in ticket N25B-294 Refactor the UI visual programming to encapsulate node's functionality. as completed

marked the checklist item **All acceptance criteria are met in ticket `N25B-294 Refactor the UI visual programming to encapsulate node's functionality.`** as completed
2584433 commented 2025-11-19 12:54:32 +00:00 (Migrated from git.science.uu.nl)
Copy Link

marked the checklist item Booting up everything, shows that all normal functionality works. as completed

marked the checklist item **Booting up everything, shows that all normal functionality works.** as completed
2584433 commented 2025-11-19 12:56:27 +00:00 (Migrated from git.science.uu.nl)
Copy Link

marked the checklist item Everything is well documented. as completed

marked the checklist item **Everything is well documented.** as completed
2584433 commented 2025-11-19 12:56:28 +00:00 (Migrated from git.science.uu.nl)
Copy Link

marked the checklist item The new structure is clear, and clean. as completed

marked the checklist item **The new structure is clear, and clean.** as completed
2584433 commented 2025-11-19 12:59:37 +00:00 (Migrated from git.science.uu.nl)
Copy Link

marked the checklist item In the visual programming page, all nodes have their correct functionality and style, and outputting a program to the console gives the correct format. as completed

marked the checklist item **In the visual programming page, all nodes have their correct functionality and style, and outputting a program to the console gives the correct format.** as completed
2584433 commented 2025-11-19 13:03:07 +00:00 (Migrated from git.science.uu.nl)
Copy Link

requested review from @2584433

requested review from @2584433
2584433 commented 2025-11-19 13:13:47 +00:00 (Migrated from git.science.uu.nl)
Copy Link

marked the checklist item The new node shows up in the toolbar if you set the droppable data to true (if you set it to false you should probably manually add it in the initial nodes in VisProgStores.tsx). as completed

marked the checklist item **The new node shows up in the toolbar if you set the `droppable` data to true (if you set it to false you should probably manually add it in the initial nodes in `VisProgStores.tsx`).** as completed
2584433 commented 2025-11-19 13:14:08 +00:00 (Migrated from git.science.uu.nl)
Copy Link

marked the checklist item The new node shows up and can connect to other nodes in the way you specified at your export default function <Node>(props){} as completed

marked the checklist item **The new node shows up and can connect to other nodes in the way you specified at your `export default function <Node>(props){}`** as completed
2584433 commented 2025-11-19 13:15:04 +00:00 (Migrated from git.science.uu.nl)
Copy Link

marked the checklist item The new node will also already correctly reduce to the way you specified at your reduce function. as completed

marked the checklist item **The new node will also already correctly reduce to the way you specified at your reduce function.** as completed
2584433 commented 2025-11-19 13:15:11 +00:00 (Migrated from git.science.uu.nl)
Copy Link

marked the checklist item The new node will show up as its own type of data within phases when you reduce in case you didn't set the typing to return false in NodeRegistry's NodesInPhase. as completed

marked the checklist item **The new node will show up as its own type of data within phases when you reduce in case you didn't set the typing to return false in `NodeRegistry's NodesInPhase`.** as completed
2584433 commented 2025-11-19 13:15:16 +00:00 (Migrated from git.science.uu.nl)
Copy Link

marked the checklist item The new node will use the Connects(...) function when connected with any node. as completed

marked the checklist item **The new node will use the <Node>Connects(...) function when connected with any node.** as completed
2584433 commented 2025-11-19 13:15:48 +00:00 (Migrated from git.science.uu.nl)
Copy Link

approved this merge request

approved this merge request
0950726 commented 2025-11-19 17:02:29 +00:00 (Migrated from git.science.uu.nl)
Copy Link

This is not used

This is not used ```suggestion:-48+0 ```
9828273 commented 2025-11-19 17:31:13 +00:00 (Migrated from git.science.uu.nl)
Copy Link

resolved all threads

resolved all threads
9828273 commented 2025-11-19 17:31:16 +00:00 (Migrated from git.science.uu.nl)
Copy Link

changed this line in version 3 of the diff

changed this line in [version 3 of the diff](/ics/sp/2025/n25b/pepperplus-ui/-/merge_requests/21/diffs?diff_id=133876&start_sha=f892db7be284dcec3b5f35334e77432f59df4e54#71960a03b024c5f4b82da3254970937fe6595081_82_35)
9828273 commented 2025-11-19 17:31:16 +00:00 (Migrated from git.science.uu.nl)
Copy Link

added 1 commit

  • c84f7307 - Apply 1 suggestion(s) to 1 file(s)

Compare with previous version

added 1 commit <ul><li>c84f7307 - Apply 1 suggestion(s) to 1 file(s)</li></ul> [Compare with previous version](/ics/sp/2025/n25b/pepperplus-ui/-/merge_requests/21/diffs?diff_id=133876&start_sha=f892db7be284dcec3b5f35334e77432f59df4e54)
0950726 commented 2025-11-20 10:10:13 +00:00 (Migrated from git.science.uu.nl)
Copy Link

Nice, thanks for applying the suggestion already.

I'll be working on this merge request for a while, will let you know when I'm done so that you can apply any further changes in one go.

Nice, thanks for applying the suggestion already. I'll be working on this merge request for a while, will let you know when I'm done so that you can apply any further changes in one go.
0950726 commented 2025-11-20 10:11:11 +00:00 (Migrated from git.science.uu.nl)
Copy Link

The styles are no longer used after deleting the EditableName component. Also slight formatting change.

import {NodeToolbar} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
The styles are no longer used after deleting the EditableName component. Also slight formatting change. ```suggestion:-3+0 import {NodeToolbar} from '@xyflow/react'; import '@xyflow/react/dist/style.css'; ```
0950726 commented 2025-11-20 12:55:48 +00:00 (Migrated from git.science.uu.nl)
Copy Link

Here and in all other nodes, we should use the specific node type (here GoalNode), then we don't need to use as. In general I think we should avoid using as.

export default function GoalNode(props: NodeProps<GoalNode>) {
  const data = props.data;
Here and in all other nodes, we should use the specific node type (here `GoalNode`), then we don't need to use `as`. In general I think we should avoid using `as`. ```suggestion:-1+0 export default function GoalNode(props: NodeProps<GoalNode>) { const data = props.data; ```
0950726 commented 2025-11-20 13:11:37 +00:00 (Migrated from git.science.uu.nl)
Copy Link

All of the .node-text-input styles are no longer used, can also be removed.

All of the `.node-text-input` styles are no longer used, can also be removed.
9828273 commented 2025-11-20 13:33:26 +00:00 (Migrated from git.science.uu.nl)
Copy Link

changed this line in version 4 of the diff

changed this line in [version 4 of the diff](/ics/sp/2025/n25b/pepperplus-ui/-/merge_requests/21/diffs?diff_id=133920&start_sha=c84f7307826e2da705366afad2dc108a0275a743#71960a03b024c5f4b82da3254970937fe6595081_4_4)
9828273 commented 2025-11-20 13:33:26 +00:00 (Migrated from git.science.uu.nl)
Copy Link

added 1 commit

  • 1dfc14ed - chore: remove unused style reference

Compare with previous version

added 1 commit <ul><li>1dfc14ed - chore: remove unused style reference</li></ul> [Compare with previous version](/ics/sp/2025/n25b/pepperplus-ui/-/merge_requests/21/diffs?diff_id=133920&start_sha=c84f7307826e2da705366afad2dc108a0275a743)
9828273 commented 2025-11-20 13:53:21 +00:00 (Migrated from git.science.uu.nl)
Copy Link

resolved all threads

resolved all threads
9828273 commented 2025-11-20 13:54:57 +00:00 (Migrated from git.science.uu.nl)
Copy Link

changed this line in version 5 of the diff

changed this line in [version 5 of the diff](/ics/sp/2025/n25b/pepperplus-ui/-/merge_requests/21/diffs?diff_id=133925&start_sha=1dfc14ede87b64d09323a998af8f6a438e17eb08#95aa0c696ac93c65ac2ce520965fd798d7b7441f_36_35)
9828273 commented 2025-11-20 13:54:57 +00:00 (Migrated from git.science.uu.nl)
Copy Link

changed this file in version 5 of the diff

changed this file in [version 5 of the diff](/ics/sp/2025/n25b/pepperplus-ui/-/merge_requests/21/diffs?diff_id=133925&start_sha=1dfc14ede87b64d09323a998af8f6a438e17eb08#6840464cf6c0808348ac09c46707e540a723b876)
9828273 commented 2025-11-20 13:54:58 +00:00 (Migrated from git.science.uu.nl)
Copy Link

added 1 commit

  • 79b645df - chore: apply suggestions from threads for merge.

Compare with previous version

added 1 commit <ul><li>79b645df - chore: apply suggestions from threads for merge.</li></ul> [Compare with previous version](/ics/sp/2025/n25b/pepperplus-ui/-/merge_requests/21/diffs?diff_id=133925&start_sha=1dfc14ede87b64d09323a998af8f6a438e17eb08)
0950726 commented 2025-11-20 14:57:37 +00:00 (Migrated from git.science.uu.nl)
Copy Link

approved this merge request

approved this merge request
2584433 commented 2025-11-20 15:00:03 +00:00 (Migrated from git.science.uu.nl)
Copy Link

mentioned in commit f87c7fed03

mentioned in commit f87c7fed03575fbe87087140481920e75c474edb
2584433 (Migrated from git.science.uu.nl) merged commit f87c7fed03 into dev 2025-11-20 15:00:03 +00:00
2584433 (Migrated from git.science.uu.nl) approved these changes 2026-02-02 13:31:16 +00:00
0950726 (Migrated from git.science.uu.nl) approved these changes 2026-02-02 13:31:16 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
2584433
0950726
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
kasper twirre pepperplus
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: pepperplus/pepperplus-ui#21
Delete Branch "refactor/node-encapsulation"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?