From 4f4f766b487121fc2d0a1b39e34e651b5c551f2b Mon Sep 17 00:00:00 2001
From: Nicole Rappe <nicole.rappe@bunny-lab.io>
Date: Wed, 14 May 2025 06:19:00 -0600
Subject: [PATCH] Isolated Node Configuration Sidebar into its own JSX file.
---
Data/Server/WebUI/src/Flow_Editor.jsx | 88 ++----------------
.../WebUI/src/Node_Configuration_Sidebar.jsx | 91 +++++++++++++++++++
2 files changed, 98 insertions(+), 81 deletions(-)
create mode 100644 Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx
diff --git a/Data/Server/WebUI/src/Flow_Editor.jsx b/Data/Server/WebUI/src/Flow_Editor.jsx
index 69a22c8..471309c 100644
--- a/Data/Server/WebUI/src/Flow_Editor.jsx
+++ b/Data/Server/WebUI/src/Flow_Editor.jsx
@@ -1,5 +1,8 @@
// //////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Flow_Editor.jsx
+// Import Node Configuration Sidebar
+import NodeConfigurationSidebar from "./Node_Configuration_Sidebar";
+
import React, { useState, useEffect, useCallback, useRef } from "react";
import ReactFlow, {
Background,
@@ -47,6 +50,9 @@ export default function FlowEditor({
nodeTypes,
categorizedNodes
}) {
+ // Node Configuration Sidebar State
+ const [drawerOpen, setDrawerOpen] = useState(false);
+
const wrapperRef = useRef(null);
const { project } = useReactFlow();
@@ -60,7 +66,6 @@ export default function FlowEditor({
const [labelOpacity, setLabelOpacity] = useState(0.8);
const [tempColor, setTempColor] = useState({ hex: "#58a6ff" });
const [pickerPos, setPickerPos] = useState({ x: 0, y: 0 });
- const [drawerOpen, setDrawerOpen] = useState(false);
// helper-line state
// guides: array of { xFlow, xPx } or { yFlow, yPx } for stationary nodes
@@ -351,86 +356,7 @@ export default function FlowEditor({
ref={wrapperRef}
style={{ position: "relative" }}
>
- {/* Top-right gear icon */}
- <IconButton
- onClick={() => setDrawerOpen(true)}
- size="small"
- sx={{
- position: "absolute",
- top: 8,
- right: 8,
- zIndex: 1500,
- bgcolor: "#2a2a2a",
- color: "#58a6ff",
- border: "1px solid #444",
- "&:hover": { bgcolor: "#3a3a3a" }
- }}
- >
- <SettingsIcon fontSize="small" />
- </IconButton>
-
-{/* Dim overlay when drawer is open */}
-{drawerOpen && (
- <Box
- onClick={() => setDrawerOpen(false)}
- sx={{
- position: "absolute",
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- backgroundColor: "rgba(0,0,0,0.4)",
- zIndex: 10
- }}
- />
-)}
-
-{/* Right-Side Node Configuration Panel */}
- <Box
- onClick={() => setDrawerOpen(false)}
- sx={{
- position: "absolute",
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- backgroundColor: "rgba(0, 0, 0, 0.3)",
- opacity: drawerOpen ? 1 : 0,
- pointerEvents: drawerOpen ? "auto" : "none",
- transition: "opacity 0.6s ease",
- zIndex: 10
- }}
- />
-
- {/* Animated right drawer panel */}
- <Box
- sx={{
- position: "absolute",
- top: 0,
- right: 0,
- bottom: 0,
- width: 400, // Width of the Node Configuration Sidebar
- bgcolor: "#121212", // Matches NodeSidebar base color
- color: "#ccc",
- borderLeft: "1px solid #333",
- padding: 2,
- zIndex: 11,
- overflowY: "auto",
- transform: drawerOpen ? "translateX(0)" : "translateX(100%)",
- transition: "transform 0.3s ease"
- }}
- onClick={(e) => e.stopPropagation()} // Prevent closing when clicking inside drawer
- >
- <Typography variant="h6" sx={{ mb: 2, color: "#0475c2" }}>
- Node Configuration Panel
- </Typography>
- <p style={{ fontSize: "0.85rem", color: "#aaa" }}>
- This sidebar will be used to configure nodes in the future.
- </p>
- <p style={{ fontSize: "0.85rem", color: "#aaa" }}>
- The idea is that this area will allow for more node configuration controls to by dynamically-populated by the nodes to allow more complex node documentation and configuration.
- </p>
- </Box>
+<NodeConfigurationSidebar drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
<ReactFlow
nodes={nodes}
diff --git a/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx b/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx
new file mode 100644
index 0000000..a9cf24b
--- /dev/null
+++ b/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx
@@ -0,0 +1,91 @@
+////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Node_Configuration_Sidebar.jsx
+import React from "react";
+import { Box, Typography, IconButton } from "@mui/material";
+import { Settings as SettingsIcon } from "@mui/icons-material";
+
+export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen }) {
+ return (
+ <>
+ {/* Top-right gear icon */}
+ <IconButton
+ onClick={() => setDrawerOpen(true)}
+ size="small"
+ sx={{
+ position: "absolute",
+ top: 8,
+ right: 8,
+ zIndex: 1500,
+ bgcolor: "#2a2a2a",
+ color: "#58a6ff",
+ border: "1px solid #444",
+ "&:hover": { bgcolor: "#3a3a3a" }
+ }}
+ >
+ <SettingsIcon fontSize="small" />
+ </IconButton>
+
+ {/* Dim overlay when drawer is open */}
+ {drawerOpen && (
+ <Box
+ onClick={() => setDrawerOpen(false)}
+ sx={{
+ position: "absolute",
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ backgroundColor: "rgba(0,0,0,0.4)",
+ zIndex: 10
+ }}
+ />
+ )}
+
+ {/* Right-Side Node Configuration Panel */}
+ <Box
+ onClick={() => setDrawerOpen(false)}
+ sx={{
+ position: "absolute",
+ top: 0,
+ left: 0,
+ right: 0,
+ bottom: 0,
+ backgroundColor: "rgba(0, 0, 0, 0.3)",
+ opacity: drawerOpen ? 1 : 0,
+ pointerEvents: drawerOpen ? "auto" : "none",
+ transition: "opacity 0.6s ease",
+ zIndex: 10
+ }}
+ />
+
+ {/* Animated right drawer panel */}
+ <Box
+ sx={{
+ position: "absolute",
+ top: 0,
+ right: 0,
+ bottom: 0,
+ width: 400,
+ bgcolor: "#121212",
+ color: "#ccc",
+ borderLeft: "1px solid #333",
+ padding: 2,
+ zIndex: 11,
+ overflowY: "auto",
+ transform: drawerOpen ? "translateX(0)" : "translateX(100%)",
+ transition: "transform 0.3s ease"
+ }}
+ onClick={(e) => e.stopPropagation()}
+ >
+ <Typography variant="h6" sx={{ mb: 2, color: "#0475c2" }}>
+ Node Configuration Panel
+ </Typography>
+ <p style={{ fontSize: "0.85rem", color: "#aaa" }}>
+ This sidebar will be used to configure nodes in the future.
+ </p>
+ <p style={{ fontSize: "0.85rem", color: "#aaa" }}>
+ The idea is that this area will allow for more node configuration controls to be dynamically-populated by the nodes to allow more complex node documentation and configuration.
+ </p>
+ </Box>
+ </>
+ );
+}