diff --git a/Data/WebUI/src/App.jsx b/Data/WebUI/src/App.jsx index accfe5a..96880c4 100644 --- a/Data/WebUI/src/App.jsx +++ b/Data/WebUI/src/App.jsx @@ -17,7 +17,8 @@ import { DialogTitle, DialogContent, DialogContentText, - DialogActions + DialogActions, + Divider } from "@mui/material"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; @@ -29,59 +30,34 @@ import ReactFlow, { applyNodeChanges, applyEdgeChanges, ReactFlowProvider, - useReactFlow, - Handle, - Position + useReactFlow } from "reactflow"; import "reactflow/dist/style.css"; import "./Borealis.css"; -// ✅ Custom styled node with handles -const CustomNode = ({ data }) => { - return ( -
- - -
- {data.label || "Custom Node"} -
-
- {data.content || "Placeholder"} -
-
- ); -}; +const nodeContext = require.context("./nodes", true, /\.jsx$/); +const nodeTypes = {}; +const categorizedNodes = {}; -function FlowEditor({ nodes, edges, setNodes, setEdges }) { +nodeContext.keys().forEach((path) => { + const mod = nodeContext(path); + if (!mod.default) return; + const { type, label, component } = mod.default; + if (!type || !component) return; + + const pathParts = path.replace("./", "").split("/"); + if (pathParts.length < 2) return; + const category = pathParts[0]; + + if (!categorizedNodes[category]) { + categorizedNodes[category] = []; + } + categorizedNodes[category].push({ type, label }); + + nodeTypes[type] = component; +}); + +function FlowEditor({ nodes, edges, setNodes, setEdges, nodeTypes }) { const reactFlowWrapper = useRef(null); const { project } = useReactFlow(); @@ -98,13 +74,18 @@ function FlowEditor({ nodes, edges, setNodes, setEdges }) { }); const id = `node-${Date.now()}`; + + const nodeMeta = Object.values(categorizedNodes) + .flat() + .find((n) => n.type === type); + const newNode = { id, - type: "custom", + type, position, data: { - label: "Custom Node", - content: "Placeholder" + label: nodeMeta?.label || type, + content: nodeMeta?.label || "Node" } }; @@ -160,7 +141,7 @@ function FlowEditor({ nodes, edges, setNodes, setEdges }) { proOptions={{ hideAttribution: true }} nodes={nodes} edges={edges} - nodeTypes={{ custom: CustomNode }} + nodeTypes={nodeTypes} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} @@ -300,14 +281,7 @@ export default function App() { - + } sx={accordionHeaderStyle}> Workflows @@ -319,22 +293,49 @@ export default function App() { - + } sx={accordionHeaderStyle}> Nodes - + {Object.entries(categorizedNodes).map(([category, items]) => ( + + + + {category} + + + {items.map(({ type, label }) => ( + + ))} + + ))} @@ -346,6 +347,7 @@ export default function App() { edges={edges} setNodes={setNodes} setEdges={setEdges} + nodeTypes={nodeTypes} /> diff --git a/Data/WebUI/src/nodes/Experimental/Experimental_Node.jsx b/Data/WebUI/src/nodes/Experimental/Experimental_Node.jsx new file mode 100644 index 0000000..27aa7da --- /dev/null +++ b/Data/WebUI/src/nodes/Experimental/Experimental_Node.jsx @@ -0,0 +1,65 @@ +// src/nodes/General Purpose/CustomNode.jsx +import React from "react"; +import { Handle, Position } from "reactflow"; + +const experimentalNode = ({ data }) => { + return ( +
+ + +
+ {data.label || "Experimental Node"} +
+
+ {data.content || "Experimental Node"} +
+
+ ); +}; + +export default { + type: "experimentalNode", // Must match the type used in nodeTypes + label: "Experimental Node", + component: experimentalNode +}; diff --git a/Data/WebUI/src/nodes/Flyff Universe/Flyff_Node.jsx b/Data/WebUI/src/nodes/Flyff Universe/Flyff_Node.jsx new file mode 100644 index 0000000..c6dce2d --- /dev/null +++ b/Data/WebUI/src/nodes/Flyff Universe/Flyff_Node.jsx @@ -0,0 +1,65 @@ +// src/nodes/General Purpose/CustomNode.jsx +import React from "react"; +import { Handle, Position } from "reactflow"; + +const flyffNode = ({ data }) => { + return ( +
+ + +
+ {data.label || "Flyff Node"} +
+
+ {data.content || "Flyff Node"} +
+
+ ); +}; + +export default { + type: "flyffNode", // Must match the type used in nodeTypes + label: "Flyff Node", + component: flyffNode +}; diff --git a/Data/WebUI/src/nodes/General Purpose/Data_Node.jsx b/Data/WebUI/src/nodes/General Purpose/Data_Node.jsx new file mode 100644 index 0000000..6217563 --- /dev/null +++ b/Data/WebUI/src/nodes/General Purpose/Data_Node.jsx @@ -0,0 +1,65 @@ +// src/nodes/General Purpose/CustomNode.jsx +import React from "react"; +import { Handle, Position } from "reactflow"; + +const dataNode = ({ data }) => { + return ( +
+ + +
+ {data.label || "Data Node"} +
+
+ {data.content || "Data Node"} +
+
+ ); +}; + +export default { + type: "dataNode", // Must match the type used in nodeTypes + label: "Data Node", + component: dataNode +}; diff --git a/Data/WebUI/src/nodes/Organization/Node_Group_Box.jsx b/Data/WebUI/src/nodes/Organization/Node_Group_Box.jsx new file mode 100644 index 0000000..33f7dd7 --- /dev/null +++ b/Data/WebUI/src/nodes/Organization/Node_Group_Box.jsx @@ -0,0 +1,65 @@ +// src/nodes/General Purpose/CustomNode.jsx +import React from "react"; +import { Handle, Position } from "reactflow"; + +const nodeGroupBox = ({ data }) => { + return ( +
+ + +
+ {data.label || "Node Group Box"} +
+
+ {data.content || "Node Group Box"} +
+
+ ); +}; + +export default { + type: "nodeGroupBox", // Must match the type used in nodeTypes + label: "Node Group Box", + component: nodeGroupBox +}; diff --git a/Data/WebUI/src/nodes/Reporting/Export_to_CSV.jsx b/Data/WebUI/src/nodes/Reporting/Export_to_CSV.jsx new file mode 100644 index 0000000..f06d480 --- /dev/null +++ b/Data/WebUI/src/nodes/Reporting/Export_to_CSV.jsx @@ -0,0 +1,65 @@ +// src/nodes/General Purpose/CustomNode.jsx +import React from "react"; +import { Handle, Position } from "reactflow"; + +const ExportToCSVNode = ({ data }) => { + return ( +
+ + +
+ {data.label || "Export to CSV"} +
+
+ {data.content || "Export to CSV"} +
+
+ ); +}; + +export default { + type: "ExportToCSVNode", // Must match the type used in nodeTypes + label: "Export to CSV", + component: ExportToCSVNode +}; diff --git a/Data/WebUI/src/nodes/TestNode.jsx b/Data/WebUI/src/nodes/TestNode.jsx deleted file mode 100644 index cb69241..0000000 --- a/Data/WebUI/src/nodes/TestNode.jsx +++ /dev/null @@ -1,14 +0,0 @@ -// Data/WebUI/src/nodes/TestNode.jsx -import React from 'react'; -import { Handle, Position } from 'reactflow'; - -export default function TestNode({ data }) { - return ( -
- Test Node -
{data.label}
- - -
- ); -}