From 059eda8b01cfc68b86e4f4c5eabf67849390e837 Mon Sep 17 00:00:00 2001
From: Nicole Rappe <nicole.rappe@bunny-lab.io>
Date: Wed, 14 May 2025 06:46:47 -0600
Subject: [PATCH] Added Dynamic Sidebar Title Logic

---
 Data/Server/WebUI/src/Flow_Editor.jsx         | 18 ++++++++++++-
 .../WebUI/src/Node_Configuration_Sidebar.jsx  |  4 +--
 .../src/nodes/General Purpose/Node_Data.jsx   | 25 +++++++++++++++++--
 3 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/Data/Server/WebUI/src/Flow_Editor.jsx b/Data/Server/WebUI/src/Flow_Editor.jsx
index 471309c..1f22d8b 100644
--- a/Data/Server/WebUI/src/Flow_Editor.jsx
+++ b/Data/Server/WebUI/src/Flow_Editor.jsx
@@ -52,6 +52,18 @@ export default function FlowEditor({
 }) {
   // Node Configuration Sidebar State
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [selectedNodeLabel, setSelectedNodeLabel] = useState(null);
+
+  useEffect(() => {
+    window.BorealisOpenDrawer = (label) => {
+      setSelectedNodeLabel(label);
+      setDrawerOpen(true);
+    };
+    return () => {
+      delete window.BorealisOpenDrawer;
+    };
+  }, []);
+
 
   const wrapperRef = useRef(null);
   const { project } = useReactFlow();
@@ -356,7 +368,11 @@ export default function FlowEditor({
   ref={wrapperRef}
   style={{ position: "relative" }}
 >
-<NodeConfigurationSidebar drawerOpen={drawerOpen} setDrawerOpen={setDrawerOpen} />
+<NodeConfigurationSidebar
+  drawerOpen={drawerOpen}
+  setDrawerOpen={setDrawerOpen}
+  title={selectedNodeLabel}
+/>
 
       <ReactFlow
         nodes={nodes}
diff --git a/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx b/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx
index a9cf24b..31dce5b 100644
--- a/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx
+++ b/Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx
@@ -3,7 +3,7 @@ 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 }) {
+export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, title }) {
   return (
     <>
       {/* Top-right gear icon */}
@@ -77,7 +77,7 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen })
         onClick={(e) => e.stopPropagation()}
       >
         <Typography variant="h6" sx={{ mb: 2, color: "#0475c2" }}>
-          Node Configuration Panel
+          {title || "Node Configuration Panel"}
         </Typography>
         <p style={{ fontSize: "0.85rem", color: "#aaa" }}>
           This sidebar will be used to configure nodes in the future.
diff --git a/Data/Server/WebUI/src/nodes/General Purpose/Node_Data.jsx b/Data/Server/WebUI/src/nodes/General Purpose/Node_Data.jsx
index f4700ac..5f0323a 100644
--- a/Data/Server/WebUI/src/nodes/General Purpose/Node_Data.jsx	
+++ b/Data/Server/WebUI/src/nodes/General Purpose/Node_Data.jsx	
@@ -41,6 +41,8 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import { Handle, Position, useReactFlow, useStore } from "reactflow";
+import { IconButton } from "@mui/material";
+import { Settings as SettingsIcon } from "@mui/icons-material";
 
 // Global Shared Bus for Node Data Propagation
 if (!window.BorealisValueBus) {
@@ -141,10 +143,29 @@ const DataNode = ({ id, data }) => {
         <div className="borealis-node">
             <Handle type="target" position={Position.Left} className="borealis-handle" />
 
-            <div className="borealis-node-header">
-                {data?.label || "Data Node"}
+            <div className="borealis-node-header" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            <span>{data?.label || "Data Node"}</span>
+                <IconButton
+                size="small"
+                  onClick={() =>
+                    window.BorealisOpenDrawer &&
+                    window.BorealisOpenDrawer(data?.label || "Unknown Node")
+                }
+                sx={{
+                    padding: "0px",
+                    marginRight: "-3px",
+                    color: "#58a6ff",
+                    fontSize: "14px", // affects inner icon when no size prop
+                    width: "20px",
+                    height: "20px",
+                    minWidth: "20px"
+                }}
+                >
+                <SettingsIcon sx={{ fontSize: "16px" }} />
+                </IconButton>
             </div>
 
+
             <div className="borealis-node-content">
                 {/* Description visible in node body */}
                 <div style={{ marginBottom: "8px", fontSize: "9px", color: "#ccc" }}>