Added Dynamic Sidebar Title Logic

This commit is contained in:
Nicole Rappe 2025-05-14 06:46:47 -06:00
parent 4f4f766b48
commit 059eda8b01
3 changed files with 42 additions and 5 deletions

View File

@ -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}

View File

@ -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.

View File

@ -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" }}>