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

Misc Testing

Browse Source
This commit is contained in:
Nicole Rappe
2025-03-30 05:50:18 -06:00
parent 1239f57b46
commit c930f310eb
7 changed files with 49 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
Data/WebUI/src/App.jsx
View File

@ -21,6 +21,8 @@ import {
Divider Divider
} from "@mui/material"; } from "@mui/material";
import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
import Tooltip from "@mui/material/Tooltip";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
@ -52,8 +54,7 @@ nodeContext.keys().forEach((path) => {
if (!categorizedNodes[category]) { if (!categorizedNodes[category]) {
categorizedNodes[category] = []; categorizedNodes[category] = [];
} }
categorizedNodes[category].push({ type, label }); categorizedNodes[category].push(mod.default); // includes type, label, component, defaultContent
nodeTypes[type] = component; nodeTypes[type] = component;
}); });
@ -85,7 +86,7 @@ function FlowEditor({ nodes, edges, setNodes, setEdges, nodeTypes }) {
position, position,
data: { data: {
label: nodeMeta?.label || type, label: nodeMeta?.label || type,
content: nodeMeta?.label || "Node" content: nodeMeta?.defaultContent
} }
}; };
@ -286,7 +287,7 @@ export default function App() {
<AccordionSummary expandIcon={<ExpandMoreIcon />} sx={accordionHeaderStyle}> <AccordionSummary expandIcon={<ExpandMoreIcon />} sx={accordionHeaderStyle}>
<Typography align="left" sx={{ fontSize: "0.9rem", color: "#0475c2" }}><b>Workflows</b></Typography> <Typography align="left" sx={{ fontSize: "0.9rem", color: "#0475c2" }}><b>Workflows</b></Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails sx={{ p: 0 }}> <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
<Button fullWidth sx={sidebarBtnStyle} onClick={handleSaveWorkflow}>SAVE WORKFLOW</Button> <Button fullWidth sx={sidebarBtnStyle} onClick={handleSaveWorkflow}>SAVE WORKFLOW</Button>
<Button fullWidth sx={sidebarBtnStyle} onClick={handleOpenWorkflow}>OPEN WORKFLOW</Button> <Button fullWidth sx={sidebarBtnStyle} onClick={handleOpenWorkflow}>OPEN WORKFLOW</Button>
<Button fullWidth sx={sidebarBtnStyle} onClick={handleOpenCloseDialog}>CLOSE WORKFLOW</Button> <Button fullWidth sx={sidebarBtnStyle} onClick={handleOpenCloseDialog}>CLOSE WORKFLOW</Button>
@ -299,16 +300,17 @@ export default function App() {
</AccordionSummary> </AccordionSummary>
<AccordionDetails sx={{ p: 0 }}> <AccordionDetails sx={{ p: 0 }}>
{Object.entries(categorizedNodes).map(([category, items]) => ( {Object.entries(categorizedNodes).map(([category, items]) => (
<Box key={category} sx={{ mb: 2 }}> <Box key={category} sx={{ mb: 0, bgcolor: "#232323" }}>
<Divider <Divider
sx={{ sx={{
bgcolor: "#2c2c2c", bgcolor: "transparent",
mb: 1, px: 2,
px: 1, py: 0.75,
py: 0.5,
display: "flex", display: "flex",
justifyContent: "center" justifyContent: "center",
borderColor: "#333"
}} }}
variant="fullWidth"
> >
<Typography <Typography
variant="caption" variant="caption"
@ -321,18 +323,20 @@ export default function App() {
</Typography> </Typography>
</Divider> </Divider>
{items.map(({ type, label }) => ( {items.map(({ type, label }) => (
<Button <Tooltip key={`${category}-${type}`} title="Drag & Drop into Editor" placement="right">
key={`${category}-${type}`} <Button
fullWidth fullWidth
sx={sidebarBtnStyle} sx={sidebarBtnStyle}
draggable draggable
onDragStart={(event) => { onDragStart={(event) => {
event.dataTransfer.setData("application/reactflow", type); event.dataTransfer.setData("application/reactflow", type);
event.dataTransfer.effectAllowed = "move"; event.dataTransfer.effectAllowed = "move";
}} }}
> startIcon={<DragIndicatorIcon sx={{ color: "#666" }} />}
{label} >
</Button> {label}
</Button>
</Tooltip>
))} ))}
</Box> </Box>
))} ))}
@ -400,7 +404,11 @@ const sidebarBtnStyle = {
backgroundColor: "#232323", backgroundColor: "#232323",
justifyContent: "flex-start", justifyContent: "flex-start",
pl: 2, pl: 2,
fontSize: "0.9rem" fontSize: "0.9rem",
textTransform: "none",
"&:hover": {
backgroundColor: "#2a2a2a"
}
}; };
const accordionHeaderStyle = { const accordionHeaderStyle = {

9
Data/WebUI/src/Borealis.css
View File

@ -20,4 +20,11 @@
rgba(9, 44, 68, 0.7) 100% /* Deep blue at the bottom */ rgba(9, 44, 68, 0.7) 100% /* Deep blue at the bottom */
); );
z-index: -1; /* Ensures it stays behind the React Flow elements */ z-index: -1; /* Ensures it stays behind the React Flow elements */
} }
/* Emphasize Drag & Drop Node Functionality */
.sidebar-button:hover {
background-color: #2a2a2a !important;
box-shadow: 0 0 5px rgba(88, 166, 255, 0.3);
cursor: grab;
}

3
Data/WebUI/src/nodes/Experimental/Experimental_Node.jsx
View File

@ -52,7 +52,7 @@ const experimentalNode = ({ data }) => {
{data.label || "Experimental Node"} {data.label || "Experimental Node"}
</div> </div>
<div style={{ padding: "10px" }}> <div style={{ padding: "10px" }}>
{data.content || "Experimental Node"} {data.content || "Placeholder Experimental Content"}
</div> </div>
</div> </div>
); );
@ -61,5 +61,6 @@ const experimentalNode = ({ data }) => {
export default { export default {
type: "experimentalNode", // Must match the type used in nodeTypes type: "experimentalNode", // Must match the type used in nodeTypes
label: "Experimental Node", label: "Experimental Node",
defaultContent: "Placeholder Node",
component: experimentalNode component: experimentalNode
}; };

3
Data/WebUI/src/nodes/Flyff Universe/Flyff_Node.jsx
View File

@ -52,7 +52,7 @@ const flyffNode = ({ data }) => {
{data.label || "Flyff Node"} {data.label || "Flyff Node"}
</div> </div>
<div style={{ padding: "10px" }}> <div style={{ padding: "10px" }}>
{data.content || "Flyff Node"} {data.content || "Placeholder Flyff Content"}
</div> </div>
</div> </div>
); );
@ -61,5 +61,6 @@ const flyffNode = ({ data }) => {
export default { export default {
type: "flyffNode", // Must match the type used in nodeTypes type: "flyffNode", // Must match the type used in nodeTypes
label: "Flyff Node", label: "Flyff Node",
defaultContent: "Placeholder Node",
component: flyffNode component: flyffNode
}; };

3
Data/WebUI/src/nodes/General Purpose/Data_Node.jsx
View File

@ -52,7 +52,7 @@ const dataNode = ({ data }) => {
{data.label || "Data Node"} {data.label || "Data Node"}
</div> </div>
<div style={{ padding: "10px" }}> <div style={{ padding: "10px" }}>
{data.content || "Data Node"} {data.content || "Placeholder Data Content"}
</div> </div>
</div> </div>
); );
@ -61,5 +61,6 @@ const dataNode = ({ data }) => {
export default { export default {
type: "dataNode", // Must match the type used in nodeTypes type: "dataNode", // Must match the type used in nodeTypes
label: "Data Node", label: "Data Node",
defaultContent: "Placeholder Node",
component: dataNode component: dataNode
}; };

3
Data/WebUI/src/nodes/Organization/Node_Group_Box.jsx
View File

@ -52,7 +52,7 @@ const nodeGroupBox = ({ data }) => {
{data.label || "Node Group Box"} {data.label || "Node Group Box"}
</div> </div>
<div style={{ padding: "10px" }}> <div style={{ padding: "10px" }}>
{data.content || "Node Group Box"} {data.content || "Placeholder Group Box Content"}
</div> </div>
</div> </div>
); );
@ -61,5 +61,6 @@ const nodeGroupBox = ({ data }) => {
export default { export default {
type: "nodeGroupBox", // Must match the type used in nodeTypes type: "nodeGroupBox", // Must match the type used in nodeTypes
label: "Node Group Box", label: "Node Group Box",
defaultContent: "Placeholder Node",
component: nodeGroupBox component: nodeGroupBox
}; };

3
Data/WebUI/src/nodes/Reporting/Export_to_CSV.jsx
View File

@ -52,7 +52,7 @@ const ExportToCSVNode = ({ data }) => {
{data.label || "Export to CSV"} {data.label || "Export to CSV"}
</div> </div>
<div style={{ padding: "10px" }}> <div style={{ padding: "10px" }}>
{data.content || "Export to CSV"} {data.content || "Placeholder CSV Content"}
</div> </div>
</div> </div>
); );
@ -61,5 +61,6 @@ const ExportToCSVNode = ({ data }) => {
export default { export default {
type: "ExportToCSVNode", // Must match the type used in nodeTypes type: "ExportToCSVNode", // Must match the type used in nodeTypes
label: "Export to CSV", label: "Export to CSV",
defaultContent: "Placeholder Node",
component: ExportToCSVNode component: ExportToCSVNode
}; };