From feed26da984c017454b01ee6ea3a6face12da4e0 Mon Sep 17 00:00:00 2001
From: Nicole Rappe <nicole.rappe@bunny-lab.io>
Date: Tue, 1 Apr 2025 18:25:24 -0600
Subject: [PATCH] Implemented Material UI Icons throughout GUI

---
 Data/WebUI/src/App.jsx                        | 83 +++++++++++++++++--
 .../src/nodes/Reporting/Export_to_CSV.jsx     |  6 +-
 Launch-Borealis.ps1                           |  3 +-
 3 files changed, 79 insertions(+), 13 deletions(-)

diff --git a/Data/WebUI/src/App.jsx b/Data/WebUI/src/App.jsx
index c8f6aa4..19a262c 100644
--- a/Data/WebUI/src/App.jsx
+++ b/Data/WebUI/src/App.jsx
@@ -26,6 +26,23 @@ import Tooltip from "@mui/material/Tooltip";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
+// Icons for Sidebar Workflow Buttons
+import SaveIcon from "@mui/icons-material/Save";
+import FileOpenIcon from "@mui/icons-material/FileOpen";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+
+// Info Icon for About Menu
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+
+// Node Icon (Left-Side of Each Node in Sidebar Menu)
+import PolylineIcon from "@mui/icons-material/Polyline";
+
+// Gitea Project Icon
+import MergeTypeIcon from "@mui/icons-material/MergeType";
+
+// Credits Icon
+import PeopleIcon from "@mui/icons-material/People";
+
 import ReactFlow, {
     Background,
     addEdge,
@@ -86,7 +103,7 @@ function FlowEditor({ nodes, edges, setNodes, setEdges, nodeTypes }) {
                 position,
                 data: {
                     label: nodeMeta?.label || type,
-                    content: nodeMeta?.defaultContent
+                    content: nodeMeta?.content
                 }
             };
 
@@ -187,6 +204,7 @@ export default function App() {
     const [nodes, setNodes] = useState([]);
     const [edges, setEdges] = useState([]);
     const [confirmCloseOpen, setConfirmCloseOpen] = useState(false);
+    const [creditsDialogOpen, setCreditsDialogOpen] = useState(false);
     const fileInputRef = useRef(null);
 
     const handleAboutMenuOpen = (event) => setAboutAnchorEl(event.currentTarget);
@@ -266,16 +284,34 @@ export default function App() {
                         color="inherit"
                         onClick={handleAboutMenuOpen}
                         endIcon={<KeyboardArrowDownIcon />}
+                        startIcon={<InfoOutlinedIcon />}
                     >
                         About
                     </Button>
+
                     <Menu
                         anchorEl={aboutAnchorEl}
                         open={Boolean(aboutAnchorEl)}
                         onClose={handleAboutMenuClose}
                     >
-                        <MenuItem onClick={handleAboutMenuClose}>Gitea Project</MenuItem>
-                        <MenuItem onClick={handleAboutMenuClose}>Credits</MenuItem>
+                        <MenuItem
+                            onClick={() => {
+                                handleAboutMenuClose();
+                                window.open("https://git.bunny-lab.io/Borealis", "_blank");
+                            }}
+                        >
+                            <MergeTypeIcon sx={{ fontSize: 18, color: "#58a6ff", mr: 1 }} />
+                            Gitea Project
+                        </MenuItem>
+                        <MenuItem
+                            onClick={() => {
+                                handleAboutMenuClose();
+                                setCreditsDialogOpen(true);
+                            }}
+                        >
+                            <PeopleIcon sx={{ fontSize: 18, color: "#58a6ff", mr: 1 }} />
+                            Credits
+                        </MenuItem>
                     </Menu>
                 </Toolbar>
             </AppBar>
@@ -288,9 +324,15 @@ export default function App() {
                                 <Typography align="left" sx={{ fontSize: "0.9rem", color: "#0475c2" }}><b>Workflows</b></Typography>
                             </AccordionSummary>
                             <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
-                                <Button fullWidth sx={sidebarBtnStyle} onClick={handleSaveWorkflow}>SAVE WORKFLOW</Button>
-                                <Button fullWidth sx={sidebarBtnStyle} onClick={handleOpenWorkflow}>OPEN WORKFLOW</Button>
-                                <Button fullWidth sx={sidebarBtnStyle} onClick={handleOpenCloseDialog}>CLOSE WORKFLOW</Button>
+                                <Button fullWidth startIcon={<SaveIcon />} sx={sidebarBtnStyle} onClick={handleSaveWorkflow}>
+                                    SAVE WORKFLOW
+                                </Button>
+                                <Button fullWidth startIcon={<FileOpenIcon />} sx={sidebarBtnStyle} onClick={handleOpenWorkflow}>
+                                    OPEN WORKFLOW
+                                </Button>
+                                <Button fullWidth startIcon={<DeleteForeverIcon />} sx={sidebarBtnStyle} onClick={handleOpenCloseDialog}>
+                                    CLOSE WORKFLOW
+                                </Button>
                             </AccordionDetails>
                         </Accordion>
 
@@ -335,15 +377,20 @@ export default function App() {
                                             >
                                                 <Button
                                                     fullWidth
-                                                    sx={sidebarBtnStyle}
+                                                    sx={{
+                                                        ...sidebarBtnStyle,
+                                                        justifyContent: "space-between", // ensures spacing between left icon/label and right icon
+                                                        pr: 1 // optional: tighter padding on right
+                                                    }}
                                                     draggable
                                                     onDragStart={(event) => {
                                                         event.dataTransfer.setData("application/reactflow", type);
                                                         event.dataTransfer.effectAllowed = "move";
                                                     }}
-                                                    startIcon={<DragIndicatorIcon sx={{ color: "#666" }} />}
+                                                    startIcon={<DragIndicatorIcon sx={{ color: "#666", fontSize: 18 }} />}
                                                 >
-                                                    {label}
+                                                    <Box component="span" sx={{ flexGrow: 1, textAlign: "left" }}>{label}</Box>
+                                                    <PolylineIcon sx={{ color: "#58a6ff", fontSize: 18, ml: 1 }} />
                                                 </Button>
                                             </Tooltip>
                                         ))}
@@ -384,6 +431,24 @@ export default function App() {
                 </DialogActions>
             </Dialog>
 
+            <Dialog
+                open={creditsDialogOpen}
+                onClose={() => setCreditsDialogOpen(false)}
+                PaperProps={{ sx: { bgcolor: "#121212", color: "#fff" } }}
+            >
+                <DialogTitle>Borealis Workflow Automation Tool</DialogTitle>
+                <DialogContent>
+                    <DialogContentText sx={{ color: "#ccc" }}>
+                        Designed by Nicole Rappe @ Bunny Lab
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setCreditsDialogOpen(false)} sx={{ color: "#58a6ff" }}>
+                        Close
+                    </Button>
+                </DialogActions>
+            </Dialog>
+
             <input
                 type="file"
                 accept=".json,application/json"
diff --git a/Data/WebUI/src/nodes/Reporting/Export_to_CSV.jsx b/Data/WebUI/src/nodes/Reporting/Export_to_CSV.jsx
index ecef12b..8fe794b 100644
--- a/Data/WebUI/src/nodes/Reporting/Export_to_CSV.jsx
+++ b/Data/WebUI/src/nodes/Reporting/Export_to_CSV.jsx
@@ -45,12 +45,12 @@ const ExportToCSVNode = ({ data }) => {
             <Handle type="target" position={Position.Left} className="borealis-handle" />
 
             <div className="borealis-node-header">
-                {data.label || "Export to CSV"}
+                {data.label}
             </div>
 
             <div className="borealis-node-content">
                 <div style={{ marginBottom: "8px" }}>
-                    {data.content || "Export Input Data to CSV File"}
+                    {data.content}
                 </div>
 
                 <label style={{ fontSize: "9px", display: "block", marginTop: "6px" }}>
@@ -138,6 +138,6 @@ Inputs:
 Outputs:
 - None (writes directly to disk in future)
 `.trim(),
-    defaultContent: "Export Input Data to CSV File",
+    content: "Export Input Data to CSV File",
     component: ExportToCSVNode
 };
diff --git a/Launch-Borealis.ps1 b/Launch-Borealis.ps1
index 36a0b1b..307736f 100644
--- a/Launch-Borealis.ps1
+++ b/Launch-Borealis.ps1
@@ -135,7 +135,8 @@ Run-Step "Install Material UI Libraries into ReactJS App" {
 
 Run-Step "Build ReactJS App" {
     Push-Location $webUIDestination
-    npm run build | Out-Null
+    #npm run build | Out-Null
+    npm run build
     Pop-Location
 }