- Added Sidebar Menu

- Removed Workflows from Menu Bar
- Implemented Node Drawing Logic
- Misc Adjustments

Data/WebUI/src/App.js

@@ -1,6 +1,4 @@
-import React from "react";
+import React, { useState, useEffect, useCallback, useRef } from "react";
-import FlowEditor from "./components/FlowEditor";
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import {
     AppBar,
     Toolbar,
@@ -11,9 +9,180 @@ import {
     Button,
     CssBaseline,
     ThemeProvider,
-  createTheme
+    createTheme,
+    Accordion,
+    AccordionSummary,
+    AccordionDetails
 } from "@mui/material";
 
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+
+import ReactFlow, {
+    Background,
+    addEdge,
+    applyNodeChanges,
+    applyEdgeChanges,
+    ReactFlowProvider,
+    useReactFlow,
+    Handle,
+    Position
+} from "reactflow";
+import "reactflow/dist/style.css";
+import "./Borealis.css";
+
+// ✅ Custom styled node with handles
+const CustomNode = ({ data }) => {
+    return (
+        <div style={{
+            background: "#2c2c2c",
+            border: "1px solid #3a3a3a",
+            borderRadius: "6px",
+            color: "#ccc",
+            fontSize: "12px",
+            minWidth: "160px",
+            maxWidth: "260px",
+            boxShadow: "0 0 10px rgba(0,0,0,0.2)",
+            position: "relative"
+        }}>
+            {/* Input handle on the left */}
+            <Handle
+                type="target"
+                position={Position.Left}
+                style={{ background: "#58a6ff", width: 10, height: 10 }}
+            />
+
+            {/* Output handle on the right */}
+            <Handle
+                type="source"
+                position={Position.Right}
+                style={{ background: "#58a6ff", width: 10, height: 10 }}
+            />
+
+            <div style={{
+                background: "#232323",
+                padding: "6px 10px",
+                borderTopLeftRadius: "6px",
+                borderTopRightRadius: "6px",
+                fontWeight: "bold",
+                fontSize: "13px"
+            }}>
+                {data.label || "Custom Node"}
+            </div>
+            <div style={{ padding: "10px" }}>
+                {data.content || "Placeholder"}
+            </div>
+        </div>
+    );
+};
+
+// FlowEditor with drag-and-drop and updated behavior
+function FlowEditor({ nodes, edges, setNodes, setEdges }) {
+    const reactFlowWrapper = useRef(null);
+    const { project } = useReactFlow();
+
+    const onDrop = useCallback(
+        (event) => {
+            event.preventDefault();
+            const type = event.dataTransfer.getData("application/reactflow");
+            if (!type) return;
+
+            const bounds = reactFlowWrapper.current.getBoundingClientRect();
+            const position = project({
+                x: event.clientX - bounds.left,
+                y: event.clientY - bounds.top
+            });
+
+            const id = `node-${Date.now()}`;
+            const newNode = {
+                id,
+                type: "custom",
+                position,
+                data: {
+                    label: "Custom Node",
+                    content: "Placeholder"
+                }
+            };
+
+            setNodes((nds) => [...nds, newNode]);
+        },
+        [project, setNodes]
+    );
+
+    const onDragOver = useCallback((event) => {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+    }, []);
+
+    const onConnect = useCallback(
+        (params) =>
+            setEdges((eds) =>
+                addEdge(
+                    {
+                        ...params,
+                        type: "smoothstep",
+                        animated: true,
+                        style: {
+                            strokeDasharray: "6 3",
+                            stroke: "#58a6ff"
+                        }
+                    },
+                    eds
+                )
+            ),
+        [setEdges]
+    );
+
+    const onNodesChange = useCallback(
+        (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
+        [setNodes]
+    );
+
+    const onEdgesChange = useCallback(
+        (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+        [setEdges]
+    );
+
+    useEffect(() => {
+        const nodeCountEl = document.getElementById("nodeCount");
+        if (nodeCountEl) {
+            nodeCountEl.innerText = nodes.length;
+        }
+    }, [nodes]);
+
+    return (
+        <div className="flow-editor-container" ref={reactFlowWrapper}>
+            <ReactFlow
+                proOptions={{ hideAttribution: true }}
+                nodes={nodes}
+                edges={edges}
+                nodeTypes={{ custom: CustomNode }}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                onConnect={onConnect}
+                onDrop={onDrop}
+                onDragOver={onDragOver}
+                defaultViewport={{ x: 0, y: 0, zoom: 1.5 }}
+                edgeOptions={{
+                    type: "smoothstep",
+                    animated: true,
+                    style: {
+                        strokeDasharray: "6 3",
+                        stroke: "#58a6ff"
+                    }
+                }}
+            >
+                <Background
+                    variant="lines"
+                    gap={65}
+                    size={1}
+                    color="rgba(255, 255, 255, 0.2)"
+                />
+            </ReactFlow>
+        </div>
+    );
+}
+
 const darkTheme = createTheme({
     palette: {
         mode: "dark",
@@ -28,60 +197,38 @@ const darkTheme = createTheme({
 });
 
 export default function App() {
-  const [workflowsAnchorEl, setWorkflowsAnchorEl] = React.useState(null);
+    const [aboutAnchorEl, setAboutAnchorEl] = useState(null);
-  const [aboutAnchorEl, setAboutAnchorEl] = React.useState(null);
+    const [nodes, setNodes] = useState([]);
+    const [edges, setEdges] = useState([]);
 
-  const handleWorkflowsMenuOpen = (event) => {
+    const handleAboutMenuOpen = (event) => setAboutAnchorEl(event.currentTarget);
-    setWorkflowsAnchorEl(event.currentTarget);
+    const handleAboutMenuClose = () => setAboutAnchorEl(null);
+
+    const handleAddTestNode = () => {
+        const id = `test-node-${Date.now()}`;
+        const newNode = {
+            id,
+            type: "custom",
+            data: {
+                label: "Custom Node",
+                content: "Placeholder"
+            },
+            position: {
+                x: 250 + Math.random() * 300,
+                y: 150 + Math.random() * 200
+            }
         };
-
+        setNodes((nds) => [...nds, newNode]);
-  const handleAboutMenuOpen = (event) => {
-    setAboutAnchorEl(event.currentTarget);
-  };
-
-  const handleWorkflowsMenuClose = () => {
-    setWorkflowsAnchorEl(null);
-  };
-
-  const handleAboutMenuClose = () => {
-    setAboutAnchorEl(null);
     };
 
     return (
         <ThemeProvider theme={darkTheme}>
             <CssBaseline />
-      {/*
-        Main container that:
-          - fills 100% viewport height
-          - organizes content with flexbox (vertical)
-      */}
-      <Box display="flex" flexDirection="column" height="100vh">
-        {/* --- TOP BAR --- */}
             <AppBar position="static" sx={{ bgcolor: "#092c44" }}>
                 <Toolbar>
                     <Typography variant="h6" sx={{ flexGrow: 1 }}>
                         Borealis - Workflow Automation Tool
                     </Typography>
-
-            {/* Workflows Menu */}
-            <Button
-              color="inherit"
-              onClick={handleWorkflowsMenuOpen}
-              endIcon={<KeyboardArrowDownIcon />}
-            >
-              Workflows
-            </Button>
-            <Menu
-              anchorEl={workflowsAnchorEl}
-              open={Boolean(workflowsAnchorEl)}
-              onClose={handleWorkflowsMenuClose}
-            >
-              <MenuItem onClick={handleWorkflowsMenuClose}>Save Workflow</MenuItem>
-              <MenuItem onClick={handleWorkflowsMenuClose}>Load Workflow</MenuItem>
-              <MenuItem onClick={handleWorkflowsMenuClose}>Close Workflow</MenuItem>
-            </Menu>
-
-            {/* About Menu */}
                     <Button
                         color="inherit"
                         onClick={handleAboutMenuOpen}
@@ -100,40 +247,83 @@ export default function App() {
                 </Toolbar>
             </AppBar>
 
-        {/* --- REACT FLOW EDITOR --- */}
+            <Box display="flex" flexDirection="column" height="calc(100vh - 64px)">
-        {/*
+                <Box display="flex" flexGrow={1} minHeight={0}>
-          flexGrow={1} ⇒ This box expands to fill remaining vertical space 
+                    <Box
-          overflow="hidden" ⇒ No scroll bars, so React Flow does internal panning
+                        sx={{
-          mt: 1 ⇒ Add top margin so the gradient starts closer to the AppBar.
+                            width: 240,
-        */}
+                            bgcolor: "#121212",
-        <Box flexGrow={1} overflow="hidden" sx={{ mt: 0 }}>
+                            borderRight: "1px solid #333",
-          <FlowEditor
+                            overflowY: "auto"
-            updateNodeCount={(count) => {
-              document.getElementById("nodeCount").innerText = count;
                         }}
-          />
+                    >
+                        <Accordion defaultExpanded square disableGutters sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}>
+                            <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={accordionHeaderStyle}>
+                                <Typography align="left" sx={{ fontSize: "0.9rem", color: "#0475c2" }}><b>Workflows</b></Typography>
+                            </AccordionSummary>
+                            <AccordionDetails sx={{ p: 0 }}>
+                                <Button fullWidth sx={sidebarBtnStyle}>SAVE WORKFLOW</Button>
+                                <Button fullWidth sx={sidebarBtnStyle}>OPEN WORKFLOW</Button>
+                                <Button fullWidth sx={sidebarBtnStyle}>CLOSE WORKFLOW</Button>
+                            </AccordionDetails>
+                        </Accordion>
+
+                        <Accordion square disableGutters sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}>
+                            <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={accordionHeaderStyle}>
+                                <Typography align="left" sx={{ fontSize: "0.9rem", color: "#0475c2" }}><b>Nodes</b></Typography>
+                            </AccordionSummary>
+                            <AccordionDetails sx={{ p: 0 }}>
+                                <Button
+                                    fullWidth
+                                    sx={sidebarBtnStyle}
+                                    draggable
+                                    onDragStart={(event) => {
+                                        event.dataTransfer.setData("application/reactflow", "testNode");
+                                        event.dataTransfer.effectAllowed = "move";
+                                    }}
+                                >
+                                    TEST NODE
+                                </Button>
+                            </AccordionDetails>
+                        </Accordion>
                     </Box>
 
-        {/* --- STATUS BAR at BOTTOM --- */}
+                    <Box flexGrow={1} overflow="hidden">
-        <Box
+                        <ReactFlowProvider>
-          component="footer"
+                            <FlowEditor
-          sx={{
+                                nodes={nodes}
+                                edges={edges}
+                                setNodes={setNodes}
+                                setEdges={setEdges}
+                            />
+                        </ReactFlowProvider>
+                    </Box>
+                </Box>
+
+                <Box component="footer" sx={{
                     bgcolor: "#1e1e1e",
                     color: "white",
                     px: 2,
                     py: 1,
                     textAlign: "left"
-          }}
+                }}>
-        >
+                    <b>Nodes</b>: <span id="nodeCount">0</span> | <b>Update Rate</b>: 500ms
-          <b>Nodes</b>: <span id="nodeCount">0</span> | <b>Update Rate</b>: 500ms | <b>Flask API Server:</b>{" "}
-          <a
-            href="http://127.0.0.1:5000/api/nodes"
-            style={{ color: "#3c78b4" }}
-          >
-            http://127.0.0.1:5000/data/api/nodes
-          </a>
                 </Box>
             </Box>
         </ThemeProvider>
     );
 }
+
+const sidebarBtnStyle = {
+    color: "#ccc",
+    backgroundColor: "#232323",
+    justifyContent: "flex-start",
+    pl: 2,
+    fontSize: "0.9rem"
+};
+
+const accordionHeaderStyle = {
+    backgroundColor: "#2c2c2c",
+    minHeight: "36px",
+    "& .MuiAccordionSummary-content": { margin: 0 }
+};

Data/WebUI/src/Borealis.css

@@ -0,0 +1,23 @@
+/* FlowEditor background container */
+.flow-editor-container {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+}
+
+/* Blue Gradient Overlay */
+.flow-editor-container::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none; /* Ensures grid and nodes remain fully interactive */
+    background: linear-gradient( to bottom, rgba(9, 44, 68, 0.9) 0%, /* Deep blue at the top */
+    rgba(30, 30, 30, 0) 45%, /* Fade out towards center */
+    rgba(30, 30, 30, 0) 75%, /* No gradient in the middle */
+    rgba(9, 44, 68, 0.7) 100% /* Deep blue at the bottom */
+    );
+    z-index: -1; /* Ensures it stays behind the React Flow elements */
+}

Data/WebUI/src/components/FlowEditor.css

@@ -1,23 +0,0 @@
-/* FlowEditor background container */
-.flow-editor-container {
-    position: relative;
-    width: 100vw;
-    height: 100vh;
-}
-
-    /* Blue Gradient Overlay */
-    .flow-editor-container::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none; /* Ensures grid and nodes remain fully interactive */
-        background: linear-gradient( to bottom, rgba(9, 44, 68, 0.9) 0%, /* Deep blue at the top */
-        rgba(30, 30, 30, 0) 45%, /* Fade out towards center */
-        rgba(30, 30, 30, 0) 75%, /* No gradient in the middle */
-        rgba(9, 44, 68, 0.7) 100% /* Deep blue at the bottom */
-        );
-        z-index: -1; /* Ensures it stays behind the React Flow elements */
-    }

Data/WebUI/src/components/FlowEditor.jsx

@@ -1,68 +0,0 @@
-import React, { useState, useEffect, useCallback } from "react";
-import ReactFlow, {
-  addEdge,
-  Controls,
-  Background,
-} from "reactflow";
-import "reactflow/dist/style.css";
-import "./FlowEditor.css";
-
-const fetchNodes = async () => {
-  const response = await fetch("/api/workflow");
-  return response.json();
-};
-
-const saveWorkflow = async (workflow) => {
-  await fetch("/api/workflow", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(workflow),
-  });
-};
-
-export default function FlowEditor() {
-  const [elements, setElements] = useState([]);
-
-  useEffect(() => {
-    fetchNodes().then((data) => {
-      // Data should contain nodes and edges arrays
-      const newElements = [...data.nodes, ...data.edges];
-      setElements(newElements);
-    });
-  }, []);
-
-  const onConnect = useCallback(
-    (params) => {
-      const newEdge = { id: `e${params.source}-${params.target}`, ...params };
-      setElements((els) => [...els, newEdge]);
-
-      // Separate nodes/edges for saving:
-      const nodes = elements.filter((el) => el.type);
-      const edges = elements.filter((el) => !el.type);
-
-      saveWorkflow({
-        nodes,
-        edges: [...edges, newEdge],
-      });
-    },
-    [elements]
-  );
-
-  return (
-    <div className="flow-editor-container">
-      <ReactFlow
-        proOptions={{ hideAttribution: true }}  // Remove the React Flow watermark
-        elements={elements}
-        onConnect={onConnect}
-      >
-        <Controls />
-        <Background
-          variant="lines"
-          gap={100}
-          size={1}
-          color="rgba(255, 255, 255, 0.2)" // White grid lines at 20% opacity
-        />
-      </ReactFlow>
-    </div>
-  );
-}

Data/WebUI/src/nodes/TestNode.jsx

@@ -0,0 +1,14 @@
+// Data/WebUI/src/nodes/TestNode.jsx
+import React from 'react';
+import { Handle, Position } from 'reactflow';
+
+export default function TestNode({ data }) {
+    return (
+        <div style={{ background: '#fff', padding: '8px', border: '1px solid #999' }}>
+            <b>Test Node</b>
+            <div>{data.label}</div>
+            <Handle type="target" position={Position.Top} />
+            <Handle type="source" position={Position.Bottom} />
+        </div>
+    );
+}

Data/server.py

@@ -1,9 +1,5 @@
-from flask import Flask, send_from_directory, jsonify, request, abort
+from flask import Flask, send_from_directory
 import os
-import importlib
-import inspect
-import uuid
-from OdenGraphQt import BaseNode
 
 # Determine the absolute path for the React build folder
 build_folder = os.path.join(os.getcwd(), "web-interface", "build")
@@ -12,41 +8,6 @@ if not os.path.exists(build_folder):
 
 app = Flask(__name__, static_folder=build_folder, static_url_path="/")
 
-# Directory where nodes are stored
-NODES_PACKAGE = "Nodes"
-
-# In-memory workflow storage
-workflow_data = {
-    "nodes": [],
-    "edges": []  # Store connections separately
-}
-
-def import_nodes_from_folder(package_name):
-    """Dynamically import node classes from the given package and list them."""
-    nodes_by_category = {}
-    package = importlib.import_module(package_name)
-    package_path = package.__path__[0]
-
-    for root, _, files in os.walk(package_path):
-        rel_path = os.path.relpath(root, package_path).replace(os.sep, ".")
-        module_prefix = f"{package_name}.{rel_path}" if rel_path != "." else package_name
-        category_name = os.path.basename(root)
-
-        for file in files:
-            if file.endswith(".py") and file != "__init__.py":
-                module_name = f"{module_prefix}.{file[:-3]}"
-                try:
-                    module = importlib.import_module(module_name)
-                    for name, obj in inspect.getmembers(module, inspect.isclass):
-                        if issubclass(obj, BaseNode) and obj.__module__ == module.__name__:
-                            if category_name not in nodes_by_category:
-                                nodes_by_category[category_name] = []
-                            nodes_by_category[category_name].append(obj.NODE_NAME)
-                except Exception as e:
-                    print(f"Failed to import {module_name}: {e}")
-
-    return nodes_by_category
-
 @app.route("/")
 def serve_frontend():
     """Serve the React app."""
@@ -55,77 +16,5 @@ def serve_frontend():
         return send_from_directory(app.static_folder, "index.html")
     return "<h1>Borealis React App Code Not Found</h1><p>Please re-deploy Borealis Workflow Automation Tool</p>", 404
 
-@app.route("/api/nodes", methods=["GET"])
-def get_available_nodes():
-    """Return available node types."""
-    nodes = import_nodes_from_folder(NODES_PACKAGE)
-    return jsonify(nodes)
-
-@app.route("/api/workflow", methods=["GET", "POST"])
-def handle_workflow():
-    """Retrieve or update the workflow."""
-    global workflow_data
-    if request.method == "GET":
-        return jsonify(workflow_data)
-    elif request.method == "POST":
-        data = request.get_json()
-        if not data:
-            abort(400, "Invalid workflow data")
-        workflow_data = data
-        return jsonify({"status": "success", "workflow": workflow_data})
-
-@app.route("/api/node", methods=["POST"])
-def create_node():
-    """Create a new node with a unique UUID."""
-    data = request.get_json()
-    if not data or "nodeType" not in data:
-        abort(400, "Invalid node data")
-
-    node_id = str(uuid.uuid4())  # Generate a unique ID
-    node = {
-        "id": node_id,
-        "type": data["nodeType"],
-        "position": data.get("position", {"x": 100, "y": 100}),
-        "properties": data.get("properties", {})
-    }
-    workflow_data["nodes"].append(node)
-    return jsonify({"status": "success", "node": node})
-
-@app.route("/api/node/<string:node_id>", methods=["PUT", "DELETE"])
-def modify_node(node_id):
-    """Update or delete a node."""
-    global workflow_data
-    if request.method == "PUT":
-        data = request.get_json()
-        for node in workflow_data["nodes"]:
-            if node["id"] == node_id:
-                node["position"] = data.get("position", node["position"])
-                node["properties"] = data.get("properties", node["properties"])
-                return jsonify({"status": "success", "node": node})
-        abort(404, "Node not found")
-
-    elif request.method == "DELETE":
-        workflow_data["nodes"] = [n for n in workflow_data["nodes"] if n["id"] != node_id]
-        return jsonify({"status": "success", "deletedNode": node_id})
-
-@app.route("/api/edge", methods=["POST"])
-def create_edge():
-    """Create a new connection (edge) between nodes."""
-    data = request.get_json()
-    if not data or "source" not in data or "target" not in data:
-        abort(400, "Invalid edge data")
-
-    edge_id = str(uuid.uuid4())
-    edge = {"id": edge_id, "source": data["source"], "target": data["target"]}
-    workflow_data["edges"].append(edge)
-    return jsonify({"status": "success", "edge": edge})
-
-@app.route("/api/edge/<string:edge_id>", methods=["DELETE"])
-def delete_edge(edge_id):
-    """Delete an edge by ID."""
-    global workflow_data
-    workflow_data["edges"] = [e for e in workflow_data["edges"] if e["id"] != edge_id]
-    return jsonify({"status": "success", "deletedEdge": edge_id})
-
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=5000, debug=False)