- Added Sidebar Menu
- Removed Workflows from Menu Bar - Implemented Node Drawing Logic - Misc Adjustments
This commit is contained in:
@ -1,139 +1,329 @@
|
||||
import React from "react";
|
||||
import FlowEditor from "./components/FlowEditor";
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import React, { useState, useEffect, useCallback, useRef } from "react";
|
||||
import {
|
||||
AppBar,
|
||||
Toolbar,
|
||||
Typography,
|
||||
Box,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Button,
|
||||
CssBaseline,
|
||||
ThemeProvider,
|
||||
createTheme
|
||||
AppBar,
|
||||
Toolbar,
|
||||
Typography,
|
||||
Box,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Button,
|
||||
CssBaseline,
|
||||
ThemeProvider,
|
||||
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",
|
||||
background: {
|
||||
default: "#121212",
|
||||
paper: "#1e1e1e"
|
||||
},
|
||||
text: {
|
||||
primary: "#ffffff"
|
||||
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 [aboutAnchorEl, setAboutAnchorEl] = useState(null);
|
||||
const [nodes, setNodes] = useState([]);
|
||||
const [edges, setEdges] = useState([]);
|
||||
|
||||
const handleWorkflowsMenuOpen = (event) => {
|
||||
setWorkflowsAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleAboutMenuOpen = (event) => setAboutAnchorEl(event.currentTarget);
|
||||
const handleAboutMenuClose = () => setAboutAnchorEl(null);
|
||||
|
||||
const handleAboutMenuOpen = (event) => {
|
||||
setAboutAnchorEl(event.currentTarget);
|
||||
};
|
||||
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 handleWorkflowsMenuClose = () => {
|
||||
setWorkflowsAnchorEl(null);
|
||||
};
|
||||
return (
|
||||
<ThemeProvider theme={darkTheme}>
|
||||
<CssBaseline />
|
||||
<AppBar position="static" sx={{ bgcolor: "#092c44" }}>
|
||||
<Toolbar>
|
||||
<Typography variant="h6" sx={{ flexGrow: 1 }}>
|
||||
Borealis - Workflow Automation Tool
|
||||
</Typography>
|
||||
<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>
|
||||
|
||||
const handleAboutMenuClose = () => {
|
||||
setAboutAnchorEl(null);
|
||||
};
|
||||
<Box display="flex" flexDirection="column" height="calc(100vh - 64px)">
|
||||
<Box display="flex" flexGrow={1} minHeight={0}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 240,
|
||||
bgcolor: "#121212",
|
||||
borderRight: "1px solid #333",
|
||||
overflowY: "auto"
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
|
||||
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>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
<Box flexGrow={1} overflow="hidden">
|
||||
<ReactFlowProvider>
|
||||
<FlowEditor
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
setNodes={setNodes}
|
||||
setEdges={setEdges}
|
||||
/>
|
||||
</ReactFlowProvider>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
<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
|
||||
</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 }
|
||||
};
|
||||
|
||||
23
Data/WebUI/src/Borealis.css
Normal file
23
Data/WebUI/src/Borealis.css
Normal file
@ -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 */
|
||||
}
|
||||
@ -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 */
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
14
Data/WebUI/src/nodes/TestNode.jsx
Normal file
14
Data/WebUI/src/nodes/TestNode.jsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user