- Added ReactJS App Rebuild Script (For Rapid Development of WebUI).

- Added Basic Menu Bar and Graphing Surface

Data/WebUI/src/App.js

@@ -1,17 +1,70 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import FlowEditor from "./components/FlowEditor";
+import { AppBar, Toolbar, Typography, Box, Menu, MenuItem, Button, CssBaseline, ThemeProvider, createTheme } from "@mui/material";
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Borealis Workflow Automation Tool
-        </p>
-      </header>
-    </div>
-  );
+const darkTheme = createTheme({
+    palette: {
+        mode: "dark",
+        background: {
+            default: "#121212",
+            paper: "#1e1e1e"
+        },
+        text: {
+            primary: "#ffffff"
+        }
+    }
+});
+
+export default function App() {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+
+    const handleMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleMenuClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <ThemeProvider theme={darkTheme}>
+            <CssBaseline />
+            <Box display="flex" flexDirection="column" height="100vh" bgcolor="#121212">
+                {/* Top Menu Bar */}
+                <AppBar position="static" sx={{ bgcolor: "#092c44" }}>
+                    <Toolbar>
+                        <Typography variant="h6" sx={{ flexGrow: 1 }}>
+                            Borealis - Workflow Automation Tool
+                        </Typography>
+                        <Button color="inherit" onClick={handleMenuOpen}>Workflows</Button>
+                        <Menu
+                            anchorEl={anchorEl}
+                            open={Boolean(anchorEl)}
+                            onClose={handleMenuClose}
+                        >
+                            <MenuItem onClick={handleMenuClose}>Save Workflow</MenuItem>
+                            <MenuItem onClick={handleMenuClose}>Load Workflow</MenuItem>
+                            <MenuItem onClick={handleMenuClose}>Close Workflow</MenuItem>
+                        </Menu>
+                    </Toolbar>
+                </AppBar>
+
+                {/* Main Content - React Flow */}
+                <Box flexGrow={1}>
+                    <FlowEditor updateNodeCount={(count) => {
+                        document.getElementById("nodeCount").innerText = count;
+                    }} />
+                </Box>
+
+                {/* Status Bar */}
+                <Box
+                    component="footer"
+                    sx={{ bgcolor: "#1e1e1e", color: "white", padding: "5px 10px", textAlign: "center" }}
+                >
+                    Nodes: <span id="nodeCount">0</span> | Update Rate: 500ms | Flask API Server:
+                    <a href="http://127.0.0.1:5000/data" style={{ color: "#3c78b4" }}> http://127.0.0.1:5000/data</a>
+                </Box>
+            </Box>
+        </ThemeProvider>
+    );
 }
-
-export default App;