bunny-lab/Borealis-Github-Replica
1
0
Fork 0
mirror of https://github.com/bunny-lab-io/Borealis.git synced 2025-07-27 08:48:27 -06:00
Code Issues Packages Projects Releases Wiki Activity

Milestone 2

Browse Source
This commit is contained in:
Nicole Rappe
2025-05-15 00:03:21 -06:00
parent 8e1d7d0de7
commit 6f6fc96d17
3 changed files with 181 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
Data/Server/WebUI/src/Node_Configuration_Sidebar.jsx
View File

@ -1,26 +1,38 @@
////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/Node_Configuration_Sidebar.jsx
import { Box, Typography } from "@mui/material";
import { Box, Typography, Tabs, Tab, TextField } from "@mui/material";
import React, { useState } from "react";
export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, title }) {
return (
<>
{/* 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
export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, title, nodeData }) {
const [activeTab, setActiveTab] = useState(0);
const handleTabChange = (_, newValue) => setActiveTab(newValue);
const renderConfigFields = () => {
const config = nodeData?.config || [];
return config.map((field, index) => (
<Box key={index} sx={{ mb: 2 }}>
<Typography variant="body2" sx={{ color: "#ccc", mb: 0.5 }}>
{field.label || field.key}
</Typography>
<TextField
variant="outlined"
size="small"
fullWidth
value={nodeData?.[field.key] || ""}
InputProps={{
sx: {
backgroundColor: "#1e1e1e",
color: "#ccc",
"& fieldset": { borderColor: "#444" },
"&:hover fieldset": { borderColor: "#666" }
}
}}
/>
)}
</Box>
));
};
{/* Right-Side Node Configuration Panel */}
return (
<>
<Box
onClick={() => setDrawerOpen(false)}
sx={{
@ -37,7 +49,6 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, ti
}}
/>
{/* Animated right drawer panel */}
<Box
sx={{
position: "absolute",
@ -56,27 +67,32 @@ export default function NodeConfigurationSidebar({ drawerOpen, setDrawerOpen, ti
}}
onClick={(e) => e.stopPropagation()}
>
{/* Title bar section */}
<Box
sx={{
backgroundColor: "#232323",
padding: "16px",
borderBottom: "1px solid #333"
}}
>
<Typography variant="h6" sx={{ color: "#0475c2" }}>
{title || "Node Configuration Panel"}
</Typography>
<Box sx={{ backgroundColor: "#232323", borderBottom: "1px solid #333" }}>
<Box sx={{ padding: "12px 16px" }}>
<Typography variant="h7" sx={{ color: "#0475c2", fontWeight: "bold" }}>
{"Edit " + (title || "Node")}
</Typography>
</Box>
<Tabs
value={activeTab}
onChange={handleTabChange}
variant="fullWidth"
textColor="inherit"
TabIndicatorProps={{ style: { backgroundColor: "#58a6ff" } }}
sx={{ borderTop: "1px solid #333", borderBottom: "1px solid #333", minHeight: "36px", height: "36px" }}
>
<Tab label="Config" sx={{ color: "#ccc", minHeight: "36px", height: "36px", textTransform: "none" }} />
<Tab label="Usage Docs" sx={{ color: "#ccc", minHeight: "36px", height: "36px", textTransform: "none" }} />
</Tabs>
</Box>
{/* Content */}
<Box sx={{ padding: 2 }}>
<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>
{activeTab === 0 && renderConfigFields()}
{activeTab === 1 && (
<Typography sx={{ whiteSpace: "pre-wrap", fontSize: "0.85rem", color: "#aaa" }}>
{nodeData?.usage_documentation || "No documentation provided for this node."}
</Typography>
)}
</Box>
</Box>
</>