From 844c8a30b6303aa89363062a39be946e28588717 Mon Sep 17 00:00:00 2001
From: Nicole Rappe <nicole.rappe@bunny-lab.io>
Date: Wed, 14 May 2025 05:10:37 -0600
Subject: [PATCH] Added Placeholder for Node Configuration Panel

---
 Data/Server/WebUI/src/Borealis.css    |   7 +-
 Data/Server/WebUI/src/Flow_Editor.jsx | 110 +++++++++++++++++++++++++-
 2 files changed, 110 insertions(+), 7 deletions(-)

diff --git a/Data/Server/WebUI/src/Borealis.css b/Data/Server/WebUI/src/Borealis.css
index 84cfb8d..e441f7e 100644
--- a/Data/Server/WebUI/src/Borealis.css
+++ b/Data/Server/WebUI/src/Borealis.css
@@ -6,9 +6,10 @@
 
 /* FlowEditor background container */
 .flow-editor-container {
-    position: relative;
-    width: 100vw;
-    height: 100vh;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }
 
 /* Blue Gradient Overlay */
diff --git a/Data/Server/WebUI/src/Flow_Editor.jsx b/Data/Server/WebUI/src/Flow_Editor.jsx
index 813f75b..69a22c8 100644
--- a/Data/Server/WebUI/src/Flow_Editor.jsx
+++ b/Data/Server/WebUI/src/Flow_Editor.jsx
@@ -8,7 +8,18 @@ import ReactFlow, {
   applyEdgeChanges,
   useReactFlow
 } from "reactflow";
-import { Menu, MenuItem, MenuList, Slider, Box } from "@mui/material";
+
+import { 
+  Menu, 
+  MenuItem, 
+  MenuList, 
+  Slider, 
+  Box,
+  Drawer,
+  IconButton,
+  Typography
+} from "@mui/material";
+
 import {
   Polyline as PolylineIcon,
   DeleteForever as DeleteForeverIcon,
@@ -17,9 +28,14 @@ import {
   Timeline as TimelineIcon,
   FormatColorFill as FormatColorFillIcon,
   ArrowRight as ArrowRightIcon,
-  Edit as EditIcon
+  Edit as EditIcon,
+  Settings as SettingsIcon
 } from "@mui/icons-material";
-import { SketchPicker } from "react-color";
+
+import { 
+  SketchPicker 
+} from "react-color";
+
 import "reactflow/dist/style.css";
 
 export default function FlowEditor({
@@ -44,6 +60,7 @@ 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
@@ -329,7 +346,92 @@ export default function FlowEditor({
   }, [nodes]);
 
   return (
-    <div className="flow-editor-container" ref={wrapperRef}>
+    <div
+  className="flow-editor-container"
+  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>
+
       <ReactFlow
         nodes={nodes}
         edges={edges}