Initial Commit

Data/WebUI/src/App.js

@@ -0,0 +1,139 @@
+import React from "react";
+import FlowEditor from "./components/FlowEditor";
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  Box,
+  Menu,
+  MenuItem,
+  Button,
+  CssBaseline,
+  ThemeProvider,
+  createTheme
+} from "@mui/material";
+
+const darkTheme = createTheme({
+  palette: {
+    mode: "dark",
+    background: {
+      default: "#121212",
+      paper: "#1e1e1e"
+    },
+    text: {
+      primary: "#ffffff"
+    }
+  }
+});
+
+export default function App() {
+  const [workflowsAnchorEl, setWorkflowsAnchorEl] = React.useState(null);
+  const [aboutAnchorEl, setAboutAnchorEl] = React.useState(null);
+
+  const handleWorkflowsMenuOpen = (event) => {
+    setWorkflowsAnchorEl(event.currentTarget);
+  };
+
+  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}
+              endIcon={<KeyboardArrowDownIcon />}
+            >
+              About
+            </Button>
+            <Menu
+              anchorEl={aboutAnchorEl}
+              open={Boolean(aboutAnchorEl)}
+              onClose={handleAboutMenuClose}
+            >
+              <MenuItem onClick={handleAboutMenuClose}>Gitea Project</MenuItem>
+              <MenuItem onClick={handleAboutMenuClose}>Credits</MenuItem>
+            </Menu>
+          </Toolbar>
+        </AppBar>
+
+        {/* --- REACT FLOW EDITOR --- */}
+        {/*
+          flexGrow={1} ⇒ This box expands to fill remaining vertical space 
+          overflow="hidden" ⇒ No scroll bars, so React Flow does internal panning
+          mt: 1 ⇒ Add top margin so the gradient starts closer to the AppBar.
+        */}
+        <Box flexGrow={1} overflow="hidden" sx={{ mt: 0 }}>
+          <FlowEditor
+            updateNodeCount={(count) => {
+              document.getElementById("nodeCount").innerText = count;
+            }}
+          />
+        </Box>
+
+        {/* --- STATUS BAR at BOTTOM --- */}
+        <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>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>
+  );
+}

Data/WebUI/src/components/FlowEditor.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.jsx

@@ -0,0 +1,68 @@
+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>
+  );
+}