From cf14ee0111c0eab378550178158e9a81de81db37 Mon Sep 17 00:00:00 2001
From: Nicole Rappe <nicole.rappe@bunny-lab.io>
Date: Wed, 30 Apr 2025 23:40:15 -0600
Subject: [PATCH] Added Collapsible Sidebar

---
 Data/Server/WebUI/src/Borealis.css            |   4 +-
 Data/Server/WebUI/src/Node_Sidebar.jsx        | 236 ++++++++++--------
 .../WebUI/src/nodes/Agents/Node_Agent.jsx     |  14 +-
 Data/Server/WebUI/tsconfig.json               |  47 ++--
 4 files changed, 159 insertions(+), 142 deletions(-)

diff --git a/Data/Server/WebUI/src/Borealis.css b/Data/Server/WebUI/src/Borealis.css
index 2799c93..b513965 100644
--- a/Data/Server/WebUI/src/Borealis.css
+++ b/Data/Server/WebUI/src/Borealis.css
@@ -82,7 +82,7 @@
 input,
 select,
 button {
-    background-color: #2a2a2a;
+    background-color: #1d1d1d;
     color: #ccc;
     border: 1px solid #444;
     font-size: 12px;
@@ -91,7 +91,7 @@ button {
 /* Label / Dark Text styling */
 label {
     color: #aaa;
-    font-size: 10px;
+    font-size: 9px;
 }
 
 /* ======================================= */
diff --git a/Data/Server/WebUI/src/Node_Sidebar.jsx b/Data/Server/WebUI/src/Node_Sidebar.jsx
index f7c5afb..ab0ae68 100644
--- a/Data/Server/WebUI/src/Node_Sidebar.jsx
+++ b/Data/Server/WebUI/src/Node_Sidebar.jsx
@@ -7,7 +7,8 @@ import {
   AccordionDetails,
   Button,
   Tooltip,
-  Typography
+  Typography,
+  IconButton
 } from "@mui/material";
 import {
   ExpandMore as ExpandMoreIcon,
@@ -15,7 +16,9 @@ import {
   FileOpen as FileOpenIcon,
   DeleteForever as DeleteForeverIcon,
   DragIndicator as DragIndicatorIcon,
-  Polyline as PolylineIcon
+  Polyline as PolylineIcon,
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon
 } from "@mui/icons-material";
 
 export default function NodeSidebar({
@@ -27,6 +30,7 @@ export default function NodeSidebar({
   onFileInputChange
 }) {
   const [expandedCategory, setExpandedCategory] = useState(null);
+  const [collapsed, setCollapsed] = useState(false);
 
   const handleAccordionChange = (category) => (_, isExpanded) => {
     setExpandedCategory(isExpanded ? category : null);
@@ -35,132 +39,154 @@ export default function NodeSidebar({
   return (
     <div
       style={{
-        width: 300, //Width of the Node Sidebar
+        width: collapsed ? 40 : 300,
         backgroundColor: "#121212",
         borderRight: "1px solid #333",
-        overflowY: "auto"
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
       }}
     >
-      {/* Workflows Section */}
-      <Accordion
-        defaultExpanded
-        square
-        disableGutters
-        sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}
-      >
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon />}
-          sx={{
-            backgroundColor: "#2c2c2c",
-            minHeight: "36px",
-            "& .MuiAccordionSummary-content": { margin: 0 }
-          }}
-        >
-          <Typography sx={{ fontSize: "0.9rem", color: "#0475c2" }}>
-            <b>Workflows</b>
-          </Typography>
-        </AccordionSummary>
-        <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
-          <Button fullWidth startIcon={<SaveIcon />} onClick={handleExportFlow} sx={buttonStyle}>
-            Export Current Flow
-          </Button>
-          <Button fullWidth startIcon={<FileOpenIcon />} onClick={handleImportFlow} sx={buttonStyle}>
-            Import Flow
-          </Button>
-          <Button fullWidth startIcon={<DeleteForeverIcon />} onClick={handleOpenCloseAllDialog} sx={buttonStyle}>
-            Close All Flows
-          </Button>
-        </AccordionDetails>
-      </Accordion>
-
-      {/* Nodes Section */}
-      <Accordion
-        defaultExpanded
-        square
-        disableGutters
-        sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}
-      >
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon />}
-          sx={{
-            backgroundColor: "#2c2c2c",
-            minHeight: "36px",
-            "& .MuiAccordionSummary-content": { margin: 0 }
-          }}
-        >
-          <Typography sx={{ fontSize: "0.9rem", color: "#0475c2" }}>
-            <b>Nodes</b>
-          </Typography>
-        </AccordionSummary>
-        <AccordionDetails sx={{ p: 0 }}>
-          {Object.entries(categorizedNodes).map(([category, items]) => (
+      <div style={{ flex: 1, overflowY: "auto" }}>
+        {!collapsed && (
+          <>
+            {/* Workflows Section */}
             <Accordion
-              key={category}
+              defaultExpanded
               square
-              expanded={expandedCategory === category}
-              onChange={handleAccordionChange(category)}
               disableGutters
-              sx={{
-                bgcolor: "#232323",
-                "&:before": { display: "none" },
-                margin: 0,
-                border: 0
-              }}
+              sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}
             >
               <AccordionSummary
                 expandIcon={<ExpandMoreIcon />}
                 sx={{
-                  bgcolor: "#1e1e1e",
-                  px: 2,
-                  minHeight: "32px",
+                  backgroundColor: "#2c2c2c",
+                  minHeight: "36px",
                   "& .MuiAccordionSummary-content": { margin: 0 }
                 }}
               >
-                <Typography sx={{ color: "#888", fontSize: "0.75rem" }}>
-                  {category}
+                <Typography sx={{ fontSize: "0.9rem", color: "#0475c2" }}>
+                  <b>Workflows</b>
                 </Typography>
               </AccordionSummary>
-              <AccordionDetails sx={{ px: 1, py: 0 }}>
-                {items.map((nodeDef) => (
-                  <Tooltip
-                    key={`${category}-${nodeDef.type}`}
-                    title={
-                      <span style={{ whiteSpace: "pre-line", wordWrap: "break-word", maxWidth: 220 }}>
-                        {nodeDef.description || "Drag & Drop into Editor"}
-                      </span>
-                    }
-                    placement="right"
-                    arrow
+              <AccordionDetails sx={{ p: 0, bgcolor: "#232323" }}>
+                <Button fullWidth startIcon={<SaveIcon />} onClick={handleExportFlow} sx={buttonStyle}>
+                  Export Current Flow
+                </Button>
+                <Button fullWidth startIcon={<FileOpenIcon />} onClick={handleImportFlow} sx={buttonStyle}>
+                  Import Flow
+                </Button>
+                <Button fullWidth startIcon={<DeleteForeverIcon />} onClick={handleOpenCloseAllDialog} sx={buttonStyle}>
+                  Close All Flows
+                </Button>
+              </AccordionDetails>
+            </Accordion>
+
+            {/* Nodes Section */}
+            <Accordion
+              defaultExpanded
+              square
+              disableGutters
+              sx={{ "&:before": { display: "none" }, margin: 0, border: 0 }}
+            >
+              <AccordionSummary
+                expandIcon={<ExpandMoreIcon />}
+                sx={{
+                  backgroundColor: "#2c2c2c",
+                  minHeight: "36px",
+                  "& .MuiAccordionSummary-content": { margin: 0 }
+                }}
+              >
+                <Typography sx={{ fontSize: "0.9rem", color: "#0475c2" }}>
+                  <b>Nodes</b>
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails sx={{ p: 0 }}>
+                {Object.entries(categorizedNodes).map(([category, items]) => (
+                  <Accordion
+                    key={category}
+                    square
+                    expanded={expandedCategory === category}
+                    onChange={handleAccordionChange(category)}
+                    disableGutters
+                    sx={{
+                      bgcolor: "#232323",
+                      "&:before": { display: "none" },
+                      margin: 0,
+                      border: 0
+                    }}
                   >
-                    <Button
-                      fullWidth
-                      sx={nodeButtonStyle}
-                      draggable
-                      onDragStart={(event) => {
-                        event.dataTransfer.setData("application/reactflow", nodeDef.type);
-                        event.dataTransfer.effectAllowed = "move";
+                    <AccordionSummary
+                      expandIcon={<ExpandMoreIcon />}
+                      sx={{
+                        bgcolor: "#1e1e1e",
+                        px: 2,
+                        minHeight: "32px",
+                        "& .MuiAccordionSummary-content": { margin: 0 }
                       }}
-                      startIcon={<DragIndicatorIcon sx={{ color: "#666", fontSize: 18 }} />}
                     >
-                      <span style={{ flexGrow: 1, textAlign: "left" }}>{nodeDef.label}</span>
-                      <PolylineIcon sx={{ color: "#58a6ff", fontSize: 18, ml: 1 }} />
-                    </Button>
-                  </Tooltip>
+                      <Typography sx={{ color: "#888", fontSize: "0.75rem" }}>
+                        {category}
+                      </Typography>
+                    </AccordionSummary>
+                    <AccordionDetails sx={{ px: 1, py: 0 }}>
+                      {items.map((nodeDef) => (
+                        <Tooltip
+                          key={`${category}-${nodeDef.type}`}
+                          title={
+                            <span style={{ whiteSpace: "pre-line", wordWrap: "break-word", maxWidth: 220 }}>
+                              {nodeDef.description || "Drag & Drop into Editor"}
+                            </span>
+                          }
+                          placement="right"
+                          arrow
+                        >
+                          <Button
+                            fullWidth
+                            sx={nodeButtonStyle}
+                            draggable
+                            onDragStart={(event) => {
+                              event.dataTransfer.setData("application/reactflow", nodeDef.type);
+                              event.dataTransfer.effectAllowed = "move";
+                            }}
+                            startIcon={<DragIndicatorIcon sx={{ color: "#666", fontSize: 18 }} />}
+                          >
+                            <span style={{ flexGrow: 1, textAlign: "left" }}>{nodeDef.label}</span>
+                            <PolylineIcon sx={{ color: "#58a6ff", fontSize: 18, ml: 1 }} />
+                          </Button>
+                        </Tooltip>
+                      ))}
+                    </AccordionDetails>
+                  </Accordion>
                 ))}
               </AccordionDetails>
             </Accordion>
-          ))}
-        </AccordionDetails>
-      </Accordion>
 
-      {/* Hidden file input fallback for older browsers */}
-      <input
-        type="file"
-        accept=".json,application/json"
-        style={{ display: "none" }}
-        ref={fileInputRef}
-        onChange={onFileInputChange}
-      />
+            {/* Hidden file input */}
+            <input
+              type="file"
+              accept=".json,application/json"
+              style={{ display: "none" }}
+              ref={fileInputRef}
+              onChange={onFileInputChange}
+            />
+          </>
+        )}
+      </div>
+
+      {/* Bottom toggle button */}
+      <div style={{ padding: "6px", borderTop: "1px solid #333", display: "flex", justifyContent: "center" }}>
+        <Tooltip title={collapsed ? "Expand Sidebar" : "Collapse Sidebar"} placement="right">
+          <IconButton
+            onClick={() => setCollapsed(!collapsed)}
+            size="small"
+            sx={{ color: "#888" }}
+          >
+            {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+          </IconButton>
+        </Tooltip>
+      </div>
     </div>
   );
 }
diff --git a/Data/Server/WebUI/src/nodes/Agents/Node_Agent.jsx b/Data/Server/WebUI/src/nodes/Agents/Node_Agent.jsx
index 985fd14..3ee2115 100644
--- a/Data/Server/WebUI/src/nodes/Agents/Node_Agent.jsx
+++ b/Data/Server/WebUI/src/nodes/Agents/Node_Agent.jsx
@@ -104,7 +104,7 @@ const BorealisAgentNode = ({ id, data }) => {
                 >
                     <option value="">-- Select --</option>
                     {Object.entries(agents).map(([id, info]) => {
-                        const label = info.status === "provisioned" ? "(Provisioned)" : "(Idle)";
+                        const label = info.status === "provisioned" ? "(Provisioned)" : "(Not Provisioned)";
                         return (
                             <option key={id} value={id}>
                                 {id} {label}
@@ -123,16 +123,8 @@ const BorealisAgentNode = ({ id, data }) => {
                 <hr style={{ margin: "6px 0", borderColor: "#444" }} />
 
                 <div style={{ fontSize: "8px", color: "#aaa" }}>
-                    Connect <strong>Instruction Nodes</strong> below to define roles.
-                    Each instruction node will send back its results (like screenshots) and act as a separate data output.
-                </div>
-
-                <div style={{ fontSize: "8px", color: "#aaa", marginTop: "4px" }}>
-                    <strong>Supported Roles:</strong>
-                    <ul style={{ paddingLeft: "14px", marginTop: "2px", marginBottom: "0" }}>
-                        <li><code>screenshot</code>: Capture a region with interval and overlay</li>
-                        {/* Future roles will be listed here */}
-                    </ul>
+                    Connect <strong>Agent Role Nodes</strong> below to define roles for this agent.
+                    Each connected <strong>Agent Role Node</strong> will send back its collected data (like screenshots) through the role node itself and act as a separate data output.
                 </div>
             </div>
         </div>
diff --git a/Data/Server/WebUI/tsconfig.json b/Data/Server/WebUI/tsconfig.json
index 5e36961..304994a 100644
--- a/Data/Server/WebUI/tsconfig.json
+++ b/Data/Server/WebUI/tsconfig.json
@@ -1,25 +1,24 @@
 {
-    "compilerOptions": {
-      "target": "ESNext",
-      "useDefineForClassFields": true,
-      "lib": ["DOM", "DOM.Iterable", "ESNext"],
-      "allowJs": false,
-      "skipLibCheck": true,
-      "esModuleInterop": false,
-      "allowSyntheticDefaultImports": true,
-      "strict": true,
-      "forceConsistentCasingInFileNames": true,
-      "module": "ESNext",
-      "moduleResolution": "Node",
-      "resolveJsonModule": true,
-      "isolatedModules": true,
-      "jsx": "react-jsx",
-      "baseUrl": ".",
-      "paths": {
-        "@/*": ["src/*"]
-      }
-    },
-    "include": ["src"],
-    "exclude": ["node_modules", "build", "dist"]
-  }
-  
\ No newline at end of file
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "build", "dist"]
+}
\ No newline at end of file