Repository: vishalpalaniappan/automated-system-viewer
Pull request #10: Add variable container to view trace and node input/output.
Author: login: vishalpalaniappan
Created: 2025-04-25T09:58:09Z | Merged: 2025-04-25T11:15:51Z

This PR adds a container to the right of the screen to view variable values associated with the trace. It creates four containers:


| Type               | Description                                           |
|--------------------|-------------------------------------------------------|
| Trace Input Value  | This is the output of the start node of the trace.    |
| Trace Output Value | This is the input of the end node of the trace.       |
| Node Input Value   | This is the input of the selected node in the trace diagram.  |
| Node Output Value  | This is the output of the selected node in the trace diagram. |

Please see this [PR](https://github.com/vishalpalaniappan/asp/pull/25) for more information on the meaning of start and end nodes.

Note: The current workflow visualizes the internal traces of the system. Once external inputs and outputs are added, the trace will be extended to include those events and this visualization will change.

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a right-side panel with a resizable accordion displaying variable data for trace input/output and selected node input/output.
  - Added draggable handles for resizing variable sections vertically and the right panel horizontally.
  - Highlighted the active node in diagrams with a colored border.
- **Improvements**
  - Split the side container into distinct left and right panels for improved layout and usability.
- **Style**
  - Added new styles for variable containers, draggable handles, and panel layouts.
- **Chores**
  - Updated dependencies to include a JSON viewer component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/package.json b/package.json
index 66e33ab..82a9ff2 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
   "homepage": "https://github.com/vishalpalaniappan/diagnostic-log-viewer#readme",
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
+    "@microlink/react-json-view": "^1.26.1",
     "@monaco-editor/react": "^4.4.6",
     "@xyflow/react": "^12.6.0",
     "bootstrap": "^5.2.3",
diff --git a/src/Components/TraceDiagram/TraceDiagram.jsx b/src/Components/TraceDiagram/TraceDiagram.jsx
index d97f94c..3d6761a 100644
--- a/src/Components/TraceDiagram/TraceDiagram.jsx
+++ b/src/Components/TraceDiagram/TraceDiagram.jsx
@@ -11,11 +11,13 @@ import {
 } from "@xyflow/react";
 import PropTypes from "prop-types";
 
+import ActiveNodeContext from "../../Providers/ActiveNodeContext.js";
 import ActiveTraceContext from "../../Providers/ActiveTraceContext.js";
 import {getLayoutedElements} from "./DagreLayout.js";
 import {getNodesFromTrace} from "./helper.js";
 
 import "@xyflow/react/dist/style.css";
+import "./TraceDiagram.scss";
 
 
 const Flow = ({trace}) => {
@@ -24,18 +26,7 @@ const Flow = ({trace}) => {
     const [nodes, setNodes, onNodesChange] = useNodesState([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-    const onChange = (evt) =>
-        setColorMode(evt.target.value);
-
-    const onLayout = useCallback(
-        (direction) => {
-            const layouted = getLayoutedElements(nodes, edges, {direction});
-            setNodes([...layouted.nodes]);
-            setEdges([...layouted.edges]);
-            fitView();
-        },
-        [nodes, edges]
-    );
+    const {activeNode, setActiveNode}= useContext(ActiveNodeContext);
 
     useEffect(() => {
         if (trace) {
@@ -55,7 +46,11 @@ const Flow = ({trace}) => {
     }, [trace]);
 
     const onNodeClick = (e, node) => {
-        console.log(e, node);
+        setActiveNode(node);
+    };
+
+    const onPanelClick = (e, node) => {
+        setActiveNode(node);
     };
 
     return (
@@ -66,22 +61,10 @@ const Flow = ({trace}) => {
             onEdgesChange={onEdgesChange}
             colorMode={colorMode}
             onNodeClick={onNodeClick}
+            onPaneClick={onPanelClick}
             fitView
         >
             <Controls />
-
-            <Panel position="top-right">
-                <select onChange={onChange} data-testid="colormode-select">
-                    <option value="dark">dark</option>
-                    <option value="light">light</option>
-                    <option value="system">system</option>
-                </select>
-            </Panel>
-
-            <Panel position="top-left">
-                <button onClick={() => onLayout("TB")}>vertical layout</button>
-                <button onClick={() => onLayout("LR")}>horizontal layout</button>
-            </Panel>
         </ReactFlow>
     );
 };
diff --git a/src/Components/TraceDiagram/TraceDiagram.scss b/src/Components/TraceDiagram/TraceDiagram.scss
index e69de29..a8c7337 100644
--- a/src/Components/TraceDiagram/TraceDiagram.scss
+++ b/src/Components/TraceDiagram/TraceDiagram.scss
@@ -0,0 +1,3 @@
+.react-flow__node.selected {
+    border: 1px solid #ff6767; /* or any color you like */
+  }
\ No newline at end of file
diff --git a/src/Components/VariableStackContainer/VariableContainer/VariableContainer.js b/src/Components/VariableStackContainer/VariableContainer/VariableContainer.js
new file mode 100644
index 0000000..b2701ca
--- /dev/null
+++ b/src/Components/VariableStackContainer/VariableContainer/VariableContainer.js
@@ -0,0 +1,65 @@
+import React, {useContext} from "react";
+
+import ReactJsonView from "@microlink/react-json-view";
+import PropTypes from "prop-types";
+
+import "./VariableContainer.scss";
+
+VariableContainer.propTypes = {
+    type: PropTypes.string,
+    variables: PropTypes.object,
+};
+
+/**
+ * Contains the variable stack container.
+ * @return {JSX.Element}
+ */
+export function VariableContainer ({type, variables}) {
+    const variableStackTheme = {
+        base00: "#252526",
+        base01: "#ddd",
+        base02: "#474747",
+        base03: "#444",
+        base04: "#717171",
+        base05: "#444",
+        base06: "#444",
+        base07: "#c586c0", // keys
+        base08: "#444",
+        base09: "#ce9178", // String
+        base0A: "rgba(70, 70, 230, 1)",
+        base0B: "#ce9178",
+        base0C: "rgba(70, 70, 230, 1)",
+        base0D: "#bbb18c", // indent arrow
+        base0E: "#bbb18c", // indent arrow
+        base0F: "#a7ce8a",
+    };
+
+    const getStyle = () => {
+        const hasValue = Object.keys(variables).length > 0;
+        if (type === "node" && hasValue) {
+            return {
+                border: "solid 1px #ff6767",
+            };
+        } else if (type === "trace" && hasValue) {
+            return {};
+        }
+    };
+
+    return (
+        <div className="variableStackContainer w-100 h-100" style={getStyle()}>
+            {Object.keys(variables).length > 0 &&
+                <ReactJsonView
+                    src={variables}
+                    theme={variableStackTheme}
+                    collapsed={1}
+                    name={"value"}
+                    groupArraysAfterLength={100}
+                    sortKeys={true}
+                    displayDataTypes={false}
+                    quotesOnKeys={true}
+                    collapseStringsAfterLength={30}>
+                </ReactJsonView>
+            }
+        </div>
+    );
+}
diff --git a/src/Components/VariableStackContainer/VariableContainer/VariableContainer.scss b/src/Components/VariableStackContainer/VariableContainer/VariableContainer.scss
new file mode 100644
index 0000000..4215efd
--- /dev/null
+++ b/src/Components/VariableStackContainer/VariableContainer/VariableContainer.scss
@@ -0,0 +1,10 @@
+
+.variableStackContainer {
+    width:100%;
+    height:100%;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    scrollbar-color: #47474766 #252526;
+    scrollbar-width: thin;
+    font-size:12px;
+}
\ No newline at end of file
diff --git a/src/Components/VariableStackContainer/VariableStackContainer.js b/src/Components/VariableStackContainer/VariableStackContainer.js
new file mode 100644
index 0000000..d1009bf
--- /dev/null
+++ b/src/Components/VariableStackContainer/VariableStackContainer.js
@@ -0,0 +1,104 @@
+import React, {useContext, useEffect, useRef, useState} from "react";
+
+import ActiveNodeContext from "../../Providers/ActiveNodeContext";
+import ActiveTraceContext from "../../Providers/ActiveTraceContext";
+import {VariableContainer} from "./VariableContainer/VariableContainer";
+import {VerticleHandle} from "./VerticleHandle/VerticleHandle";
+
+import "./VariableStackContainer.scss";
+
+/**
+ * Contains the debugger accordian sections.
+ * @return {JSX.Element}
+ */
+export function VariableStackContainer () {
+    const variableContainerRef = useRef();
+    const {activeTrace, setActiveTrace} = useContext(ActiveTraceContext);
+    const {activeNode, setActiveNode} = useContext(ActiveNodeContext);
+
+    const [traceInput, setTraceInput] = useState({});
+    const [traceOutput, setTraceOutput] = useState({});
+    const [nodeInput, setNodeInput] = useState({});
+    const [nodeOutput, setNodeOutput] = useState({});
+
+    const traceInputRef = useRef();
+    const traceOutputRef = useRef();
+    const nodeInputRef = useRef();
+    const nodeOutputRef = useRef();
+
+    const TITLE_HEIGHT = 20;
+
+    const redrawContainers = () => {
+        const height = variableContainerRef.current.clientHeight;
+        const containerHeight = height/4;
+        traceInputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        traceOutputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        nodeInputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        nodeOutputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+    };
+
+    useEffect(() => {
+        redrawContainers();
+    }, []);
+
+    useEffect(() => {
+        if (activeNode) {
+            const node = activeNode.sourceNode;
+            if (node.type == "adli_output") {
+                setNodeInput({});
+                setNodeOutput(node.adliValue);
+            } else if (node.type == "adli_input") {
+                if ("output" in node) {
+                    setNodeInput(node.adliValue);
+                    setNodeOutput(node.output[0].adliValue);
+                } else {
+                    setNodeInput(node.adliValue);
+                    setNodeOutput({});
+                }
+            }
+        } else {
+            setNodeInput({});
+            setNodeOutput({});
+        }
+    }, [activeNode]);
+
+    useEffect(() => {
+        if (activeTrace) {
+            const trace = JSON.parse(activeTrace.traces);
+            setTraceInput(trace[0].adliValue);
+            setTraceOutput(trace[trace.length -1].adliValue);
+        }
+    }, [activeTrace]);
+
+    return (
+        <div ref={variableContainerRef} className="variable-container w-100 d-flex flex-column">
+            <div className="w-100 variable-title" style={{height: TITLE_HEIGHT + "px"}}>
+                Trace Input
+            </div>
+            <div className="section" ref={traceInputRef}>
+                <VariableContainer type={"trace"} variables={traceInput}/>
+            </div>
+            <VerticleHandle topDiv={traceInputRef} bottomDiv={traceOutputRef}/>
+            <div className="w-100 variable-title" style={{height: TITLE_HEIGHT + "px"}}>
+                Trace Output
+            </div>
+            <div className="section" ref={traceOutputRef}>
+                <VariableContainer type={"trace"} variables={traceOutput}/>
+            </div>
+            <VerticleHandle topDiv={traceOutputRef} bottomDiv={nodeInputRef}/>
+            <div className="w-100 variable-title" style={{height: TITLE_HEIGHT + "px"}}>
+                Selected Node Input
+            </div>
+            <div className="section" ref={nodeInputRef}>
+                <VariableContainer type={"node"} variables={nodeInput}/>
+            </div>
+            <VerticleHandle topDiv={nodeInputRef} bottomDiv={nodeOutputRef}/>
+            <div className="w-100 variable-title" style={{height: TITLE_HEIGHT + "px"}}>
+                Selected Node Output
+            </div>
+            <div className="section" ref={nodeOutputRef}>
+                <VariableContainer type={"node"} variables={nodeOutput}/>
+            </div>
+        </div>
+    );
+}
diff --git a/src/Components/VariableStackContainer/VariableStackContainer.scss b/src/Components/VariableStackContainer/VariableStackContainer.scss
new file mode 100644
index 0000000..72c3dcd
--- /dev/null
+++ b/src/Components/VariableStackContainer/VariableStackContainer.scss
@@ -0,0 +1,13 @@
+.variable-container {
+    width:100%;
+    height:100%;
+}
+
+.variable-container > .section {
+    width:100%;
+}
+
+.variable-title{
+    color: rgb(155, 155, 155);
+    font-size: 12px;
+}
\ No newline at end of file
diff --git a/src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.js b/src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.js
new file mode 100644
index 0000000..a409a27
--- /dev/null
+++ b/src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.js
@@ -0,0 +1,66 @@
+import React, {useRef} from "react";
+
+import PropTypes from "prop-types";
+
+import "./VerticleHandle.scss";
+
+VerticleHandle.propTypes = {
+    topDiv: PropTypes.object,
+    bottomDiv: PropTypes.object,
+};
+
+/**
+ * Renders a vertically resizable handle for the accordian components.
+ * It accepts two components which are resized when the handle is moved.
+ * @return {JSX.Element}
+ */
+export function VerticleHandle ({topDiv, bottomDiv}) {
+    const handleRef = useRef();
+
+    const MIN_CONTAINER_HEIGHT = 25;
+
+    // Initial values used to calculate delta on mouse move.
+    let downValueY;
+    let topHeight;
+    let bottomHeight;
+
+    const handleMouseDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+
+        downValueY = e.clientY;
+        topHeight = topDiv.current.getBoundingClientRect().height;
+        bottomHeight = bottomDiv.current.getBoundingClientRect().height;
+
+        handleRef.current.classList.add("handle-active");
+    };
+
+    const handleMouseMove = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const delta = e.clientY - downValueY;
+        const newPreHeight = topHeight + delta;
+        const newPostHeight = bottomHeight - delta;
+
+        if (newPreHeight > MIN_CONTAINER_HEIGHT && newPostHeight > MIN_CONTAINER_HEIGHT) {
+            topDiv.current.style.height = newPreHeight + "px";
+            bottomDiv.current.style.height = newPostHeight + "px";
+        }
+    };
+
+    const handleMouseUp = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        handleRef.current.classList.remove("handle-active");
+    };
+
+    return (
+        <div ref={handleRef} onMouseDown={handleMouseDown} className="vertical-handle"></div>
+    );
+}
diff --git a/src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.scss b/src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.scss
new file mode 100644
index 0000000..54b4be5
--- /dev/null
+++ b/src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.scss
@@ -0,0 +1,10 @@
+.variable-container .vertical-handle {
+    width:100%;
+    height:2px;
+    background-color: #474747;
+    cursor: ns-resize;
+}
+
+.variable-container .handle-active{
+    background-color:#007acc;
+}
\ No newline at end of file
diff --git a/src/Providers/ASPProviders.js b/src/Providers/ASPProviders.js
index dbb32d4..c436cf6 100644
--- a/src/Providers/ASPProviders.js
+++ b/src/Providers/ASPProviders.js
@@ -3,6 +3,7 @@ import React, {useEffect, useState} from "react";
 import PropTypes from "prop-types";
 import useWebSocket, {ReadyState} from "react-use-websocket";
 
+import ActiveNodeContext from "./ActiveNodeContext";
 import ActiveSystemContext from "./ActiveSystemContext";
 import ActiveTraceContext from "./ActiveTraceContext";
 import ActiveTracesContext from "./ActiveTracesContext";
@@ -29,6 +30,7 @@ function ASPProviders ({children}) {
     const [activeSystem, setActiveSystem] = useState();
     const [activeTraces, setActiveTraces] = useState();
     const [activeTrace, setActiveTrace] = useState();
+    const [activeNode, setActiveNode] = useState();
 
     // Open websocket connection and reconnect when it closes
     const {sendJsonMessage, lastJsonMessage, readyState} = useWebSocket(
@@ -104,7 +106,7 @@ function ASPProviders ({children}) {
     }, [activeTrace]);
 
     return (
-        <>
+        <ActiveNodeContext.Provider value={{activeNode, setActiveNode}}>
             <ActiveTraceContext.Provider value={{activeTrace, setActiveTrace}}>
                 <SystemsContext.Provider value={{systemsList}}>
                     <ActiveSystemContext.Provider value={{activeSystem, setActiveSystem}}>
@@ -114,7 +116,7 @@ function ASPProviders ({children}) {
                     </ActiveSystemContext.Provider>
                 </SystemsContext.Provider>
             </ActiveTraceContext.Provider>
-        </>
+        </ActiveNodeContext.Provider>
     );
 };
 
diff --git a/src/Providers/ActiveNodeContext.js b/src/Providers/ActiveNodeContext.js
new file mode 100644
index 0000000..4ce6b1d
--- /dev/null
+++ b/src/Providers/ActiveNodeContext.js
@@ -0,0 +1,6 @@
+import {createContext} from "react";
+
+// This context stores the active node.
+const ActiveNodeContext = createContext();
+
+export default ActiveNodeContext;
diff --git a/src/Viewer/SideContainer/SideContainer.js b/src/Viewer/LeftSideContainer/LeftSideContainer.js
similarity index 92%
rename from src/Viewer/SideContainer/SideContainer.js
rename to src/Viewer/LeftSideContainer/LeftSideContainer.js
index 40d9636..90c737c 100644
--- a/src/Viewer/SideContainer/SideContainer.js
+++ b/src/Viewer/LeftSideContainer/LeftSideContainer.js
@@ -1,15 +1,16 @@
 import React, {useRef, useState} from "react";
 
 import {Diagram3, Gear, Keyboard} from "react-bootstrap-icons";
-import { SystemSelectorContainer } from "../../Components/SystemSelectorContainer/SystemSelectorContainer";
 
-import "./SideContainer.scss";
+import {SystemSelectorContainer} from "../../Components/SystemSelectorContainer/SystemSelectorContainer";
+
+import "./LeftSideContainer.scss";
 
 /**
- * Renders the side menu and accordian containers.
+ * Renders the left side menu and accordian containers.
  * @return {JSX.Element}
  */
-export function SideContainer () {
+export function LeftSideContainer () {
     const [activeMenu, setActiveMenu] = useState(1);
 
     const accordian = useRef();
diff --git a/src/Viewer/SideContainer/SideContainer.scss b/src/Viewer/LeftSideContainer/LeftSideContainer.scss
similarity index 100%
rename from src/Viewer/SideContainer/SideContainer.scss
rename to src/Viewer/LeftSideContainer/LeftSideContainer.scss
diff --git a/src/Viewer/RightSideContainer/RightSideContainer.js b/src/Viewer/RightSideContainer/RightSideContainer.js
new file mode 100644
index 0000000..5cd10aa
--- /dev/null
+++ b/src/Viewer/RightSideContainer/RightSideContainer.js
@@ -0,0 +1,57 @@
+import React, {useRef, useState} from "react";
+
+import {VariableStackContainer} from "../../Components/VariableStackContainer/VariableStackContainer";
+
+import "./RightSideContainer.scss";
+
+/**
+ * Renders the right side menu and accordian containers.
+ * @return {JSX.Element}
+ */
+export function RightSideContainer () {
+    const accordian = useRef();
+    const handle = useRef();
+
+    const ACCORDIAN_WIDTH = 400;
+    const MIN_EDITOR_WIDTH = 400;
+    const MIN_ACCORDIAN_WIDTH = 200;
+    const MAX_ACCORDIAN_WIDTH = document.body.clientWidth - MIN_EDITOR_WIDTH;
+
+    let downValueX;
+    const handleMouseDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        handle.current.classList.add("handle-active");
+        downValueX = e.clientX;
+    };
+
+    const handleMouseMove = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const delta = e.clientX - downValueX;
+        const newWidth = accordian.current.getBoundingClientRect().width - delta;
+        if (newWidth > MIN_ACCORDIAN_WIDTH && newWidth < MAX_ACCORDIAN_WIDTH) {
+            accordian.current.style.width = newWidth + "px";
+            downValueX = e.clientX;
+        }
+    };
+
+    const handleMouseUp = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        handle.current.classList.remove("handle-active");
+    };
+
+    return (
+        <div className="side-container d-flex flex-row">
+            <div className="handle" ref={handle} onMouseDown={handleMouseDown}></div>
+            <div className="accordian" ref={accordian} style={{width: ACCORDIAN_WIDTH+"px"}}>
+                <VariableStackContainer />
+            </div>
+        </div>
+    );
+}
diff --git a/src/Viewer/RightSideContainer/RightSideContainer.scss b/src/Viewer/RightSideContainer/RightSideContainer.scss
new file mode 100644
index 0000000..80f0804
--- /dev/null
+++ b/src/Viewer/RightSideContainer/RightSideContainer.scss
@@ -0,0 +1,27 @@
+.side-container .menu {
+    height:100%;
+    width:100%;
+    background:#333333;
+}
+
+.menu-icon {
+    margin:10px 0;
+    cursor:pointer;
+}
+
+.side-container > .accordian {
+    height:100%;
+    width:300px;
+    background:#252526;
+}
+
+.side-container > .handle {
+    height: 100%;
+    width: 3px;
+    background: #252526;
+    cursor: ew-resize;
+}
+
+.side-container > .handle-active{
+    background-color:#007acc;
+}
\ No newline at end of file
diff --git a/src/Viewer/Viewer.js b/src/Viewer/Viewer.js
index 6c9d5d1..da8c7d8 100644
--- a/src/Viewer/Viewer.js
+++ b/src/Viewer/Viewer.js
@@ -1,7 +1,8 @@
 import React from "react";
 
 import {FileViewer} from "./FileViewer/FileViewer";
-import {SideContainer} from "./SideContainer/SideContainer";
+import {LeftSideContainer} from "./LeftSideContainer/LeftSideContainer";
+import {RightSideContainer} from "./RightSideContainer/RightSideContainer";
 
 import "./Viewer.scss";
 
@@ -15,11 +16,14 @@ export function Viewer () {
             <div className="menu-container"></div>
             <div className="body-container d-flex flex-row">
                 <div className="d-flex h-100">
-                    <SideContainer />
+                    <LeftSideContainer />
                 </div>
                 <div className="d-flex flex-grow-1 h-100 overflow-hidden">
                     <FileViewer />
                 </div>
+                <div className="d-flex h-100">
+                    <RightSideContainer />
+                </div>
             </div>
             <div className="status-bar-container">
             </div>


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 11**

<details>
<summary>🧹 Nitpick comments (15)</summary><blockquote>

<details>
<summary>src/Providers/ActiveNodeContext.js (1)</summary><blockquote>

`1-6`: **Add `displayName` and consider typing defaults.**  
For improved debugging in React DevTools, set a `displayName` on the context. Also, consider providing a default shape (e.g., `{ activeNode: null, setActiveNode: () => {} }`) or typing via PropTypes/TypeScript to clarify the value contract.

</blockquote></details>
<details>
<summary>src/Components/VariableStackContainer/VariableContainer/VariableStackContainer.scss (1)</summary><blockquote>

`1-10`: **Align CSS class naming convention.**  
The class `.variableStackContainer` uses camelCase, whereas other styles use kebab-case (e.g., `.variable-container`). For consistency and readability, rename to `.variable-stack-container`.

</blockquote></details>
<details>
<summary>src/Components/TraceDiagram/TraceDiagram.scss (1)</summary><blockquote>

`1-3`: **Style addition looks good, but remove the comment**

The highlighted border style for selected nodes provides good visual feedback for the user. This helps identify which node's data is being displayed in the variable panel.

```diff
.react-flow__node.selected {
-    border: 1px solid #ff6767; /* or any color you like */
+    border: 1px solid #ff6767;
}
```

</blockquote></details>
<details>
<summary>src/Components/TraceDiagram/TraceDiagram.jsx (1)</summary><blockquote>

`65-67`: **Fix naming inconsistency between handler and prop.**

The handler is named `onPanelClick` but used as `onPaneClick` prop on the ReactFlow component. This naming mismatch could lead to confusion.


```diff
-const onPanelClick = (e, node) => {
+const onPaneClick = (e, node) => {
    setActiveNode(node);
};
```


Also applies to: 77-77

</blockquote></details>
<details>
<summary>src/Components/VariableStackContainer/VariableContainer/VariableStackContainer.js (2)</summary><blockquote>

`1-7`: **File location doesn't match naming convention.**

The file is named `VariableStackContainer.js` but is located in a folder called `VariableContainer`. This misalignment could cause confusion during maintenance.


Consider either:
1. Renaming the file to `VariableContainer.js` to match its folder
2. Moving the file to a folder that matches its name

---

`37-46`: **Use strict equality and improve conditional handling.**

The comparison uses loose equality (`==`) and the function may return undefined in some cases.


```diff
const getStyle = () => {
    const hasValue = Object.keys(variables).length > 0;
-    if (type == "node" && hasValue) {
+    if (type === "node" && hasValue) {
        return {
            border: "solid 1px #ff6767",
        };
-    } else if (type == "trace" && hasValue) {
+    } else if (type === "trace" && hasValue) {
        return {};
    }
+    return {}; // Return empty object as default
};
```

</blockquote></details>
<details>
<summary>src/Viewer/RightSideContainer/RightSideContainer.js (1)</summary><blockquote>

`1-57`: **Consistent spelling of "accordion" throughout the codebase.**

There is a typo in the word "accordian" (should be "accordion") throughout the file. This inconsistency should be corrected for better code maintainability.


Replace all instances of "accordian" with "accordion" throughout the file:

```diff
-const accordian = useRef();
+const accordion = useRef();

-const ACCORDIAN_WIDTH = 400;
+const ACCORDION_WIDTH = 400;

-const MIN_ACCORDIAN_WIDTH = 200;
+const MIN_ACCORDION_WIDTH = 200;

-const MAX_ACCORDIAN_WIDTH = document.body.clientWidth - MIN_EDITOR_WIDTH;
+const MAX_ACCORDION_WIDTH = document.body.clientWidth - MIN_EDITOR_WIDTH;

const handleMouseMove = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const delta = e.clientX - downValueX;
-    const newWidth = accordian.current.getBoundingClientRect().width - delta;
+    const newWidth = accordion.current.getBoundingClientRect().width - delta;
-    if (newWidth > MIN_ACCORDIAN_WIDTH && newWidth < MAX_ACCORDIAN_WIDTH) {
+    if (newWidth > MIN_ACCORDION_WIDTH && newWidth < MAX_ACCORDION_WIDTH) {
-        accordian.current.style.width = newWidth + "px";
+        accordion.current.style.width = newWidth + "px";
        downValueX = e.clientX;
    }
};

return (
    <div className="side-container d-flex flex-row">
        <div className="handle" ref={handle} onMouseDown={handleMouseDown}></div>
-        <div className="accordian" ref={accordian} style={{width: ACCORDIAN_WIDTH+"px"}}>
+        <div className="accordion" ref={accordion} style={{width: ACCORDION_WIDTH+"px"}}>
            <VariableStackContainer />
        </div>
    </div>
);
```

</blockquote></details>
<details>
<summary>src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.js (5)</summary><blockquote>

`1-5`: **Spelling error in component name.**

The component name "VerticleHandle" has a spelling error - it should be "VerticalHandle" (with an 'a' instead of 'e'). This misspelling is used consistently throughout the file and imports.


Consider renaming the component, file, and stylesheet to use the correct spelling "VerticalHandle":

```diff
-import React, {useRef} from "react";
+import React, {useRef} from "react";

import PropTypes from "prop-types";

-import "./VerticleHandle.scss";
+import "./VerticalHandle.scss";
```

---

`7-10`: **PropTypes are defined before the component declaration.**

Typically, PropTypes are defined after the component declaration, not before. This would improve readability and follow React conventions.


Move the PropTypes definition after the component declaration:

```diff
-VerticleHandle.propTypes = {
-    topDiv: PropTypes.object,
-    bottomDiv: PropTypes.object,
-};
```

And add it after the component at the end of the file.

---

`12-16`: **JSDoc comment needs improvement.**

The JSDoc comment is helpful but contains a spelling error ("accordian" should be "accordion") and could be more precise about the component's purpose.


```diff
/**
- * Renders a vertically resizable handle for the accordian components.
+ * Renders a vertically resizable handle between two container components.
 * It accepts two components which are resized when the handle is moved.
 * @return {JSX.Element}
 */
```

---

`41-53`: **The handleMouseMove function doesn't update the starting position.**

The current implementation doesn't update `downValueY` after each move, which could cause jumpy behavior during continuous dragging.


The handleMouseMove function should be updated to use the ref-based state variables:

```diff
const handleMouseMove = (e) => {
    e.preventDefault();
    e.stopPropagation();

-    const delta = e.clientY - downValueY;
-    const newPreHeight = topHeight + delta;
-    const newPostHeight = bottomHeight - delta;
+    const delta = e.clientY - dragState.current.downValueY;
+    const newPreHeight = dragState.current.topHeight + delta;
+    const newPostHeight = dragState.current.bottomHeight - delta;

    if (newPreHeight > MIN_CONTAINER_HEIGHT && newPostHeight > MIN_CONTAINER_HEIGHT) {
        topDiv.current.style.height = newPreHeight + "px";
        bottomDiv.current.style.height = newPostHeight + "px";
    }
};
```

---

`55-61`: **Function signature is inconsistent with React event naming.**

The function signature is inconsistent with typical React event handler naming conventions, where handler functions are usually named after the events they handle.


Rename the function to better reflect that it's handling the mouseup event:

```diff
-const handleMouseUp = (e) => {
+const handleMouseUp = (e) => {
    e.preventDefault();
    e.stopPropagation();
    document.removeEventListener("mousemove", handleMouseMove);
    document.removeEventListener("mouseup", handleMouseUp);
    handleRef.current.classList.remove("handle-active");
};
```

The naming is actually fine, but consistency across the codebase should be maintained.

</blockquote></details>
<details>
<summary>src/Components/VariableStackContainer/VariableStackContainer.js (3)</summary><blockquote>

`16-17`: **Destructuring unused setter from context.**

The code destructures `setActiveTrace` and `setActiveNode` from the contexts, but these setters are never used in this component.


Remove the unused context setters:

```diff
-    const {activeTrace, setActiveTrace} = useContext(ActiveTraceContext);
-    const {activeNode, setActiveNode} = useContext(ActiveNodeContext);
+    const {activeTrace} = useContext(ActiveTraceContext);
+    const {activeNode} = useContext(ActiveNodeContext);
```

---

`73-98`: **The component could benefit from lazy initialization and persistent layouts.**

The current implementation resets section heights on every mount. It might be better to persist user-defined layouts across sessions.


Consider using localStorage to save and restore the user's preferred section heights:

```diff
useEffect(() => {
+    // Try to restore saved heights
+    const savedHeights = localStorage.getItem('variableSectionHeights');
+    if (savedHeights) {
+        try {
+            const heights = JSON.parse(savedHeights);
+            traceInputRef.current.style.height = heights.traceInput + "px";
+            traceOutputRef.current.style.height = heights.traceOutput + "px";
+            nodeInputRef.current.style.height = heights.nodeInput + "px";
+            nodeOutputRef.current.style.height = heights.nodeOutput + "px";
+            return;
+        } catch (e) {
+            // Fall back to default distribution
+        }
+    }
+    
    redrawContainers();
}, []);

// Add function to save heights when they change
+const saveHeights = () => {
+    const heights = {
+        traceInput: parseInt(traceInputRef.current.style.height),
+        traceOutput: parseInt(traceOutputRef.current.style.height),
+        nodeInput: parseInt(nodeInputRef.current.style.height),
+        nodeOutput: parseInt(nodeOutputRef.current.style.height)
+    };
+    localStorage.setItem('variableSectionHeights', JSON.stringify(heights));
+};

// Modify VerticleHandle props to include callback
-<VerticleHandle topDiv={traceInputRef} bottomDiv={traceOutputRef}/>
+<VerticleHandle topDiv={traceInputRef} bottomDiv={traceOutputRef} onResizeEnd={saveHeights}/>
```

This would require updating the VerticleHandle component to accept and call an onResizeEnd callback.

---

`85-87`: **Inconsistent whitespace in JSX.**

The indentation and spacing is inconsistent between the "Selected Node Input" and "Selected Node Output" section titles.


Make the indentation and whitespace consistent:

```diff
<div className="w-100 variable-title" style={{height: TITLE_HEIGHT + "px"}}>
-                Selected Node Input
+    Selected Node Input
</div>
```

And:

```diff
<div className="w-100 variable-title" style={{height: TITLE_HEIGHT + "px"}}>
-                Selected Node Output
+    Selected Node Output
</div>
```


Also applies to: 92-94

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 07dd564162459ce50e69b5e5b2293475026c9316 and 0eb4138adb8e317a61a427893899d9e100859971.

</details>

<details>
<summary>📒 Files selected for processing (15)</summary>

* `package.json` (1 hunks)
* `src/Components/TraceDiagram/TraceDiagram.jsx` (4 hunks)
* `src/Components/TraceDiagram/TraceDiagram.scss` (1 hunks)
* `src/Components/VariableStackContainer/VariableContainer/VariableStackContainer.js` (1 hunks)
* `src/Components/VariableStackContainer/VariableContainer/VariableStackContainer.scss` (1 hunks)
* `src/Components/VariableStackContainer/VariableStackContainer.js` (1 hunks)
* `src/Components/VariableStackContainer/VariableStackContainer.scss` (1 hunks)
* `src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.js` (1 hunks)
* `src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.scss` (1 hunks)
* `src/Providers/ASPProviders.js` (4 hunks)
* `src/Providers/ActiveNodeContext.js` (1 hunks)
* `src/Viewer/LeftSideContainer/LeftSideContainer.js` (1 hunks)
* `src/Viewer/RightSideContainer/RightSideContainer.js` (1 hunks)
* `src/Viewer/RightSideContainer/RightSideContainer.scss` (1 hunks)
* `src/Viewer/Viewer.js` (2 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (5)</summary>

<details>
<summary>src/Viewer/RightSideContainer/RightSideContainer.js (3)</summary><blockquote>

<details>
<summary>src/Viewer/LeftSideContainer/LeftSideContainer.js (10)</summary>

* `accordian` (16-16)
* `handle` (17-17)
* `ACCORDIAN_WIDTH` (20-20)
* `MIN_EDITOR_WIDTH` (21-21)
* `MIN_ACCORDIAN_WIDTH` (22-22)
* `MAX_ACCORDIAN_WIDTH` (23-23)
* `downValueX` (25-25)
* `handleMouseDown` (26-33)
* `handleMouseMove` (35-44)
* `handleMouseUp` (46-52)

</details>
<details>
<summary>src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.js (3)</summary>

* `handleMouseDown` (27-39)
* `handleMouseMove` (41-53)
* `handleMouseUp` (55-61)

</details>
<details>
<summary>src/Components/VariableStackContainer/VariableStackContainer.js (1)</summary>

* `VariableStackContainer` (14-100)

</details>

</blockquote></details>
<details>
<summary>src/Providers/ASPProviders.js (1)</summary><blockquote>

<details>
<summary>src/Providers/ActiveNodeContext.js (1)</summary>

* `ActiveNodeContext` (4-4)

</details>

</blockquote></details>
<details>
<summary>src/Components/TraceDiagram/TraceDiagram.jsx (3)</summary><blockquote>

<details>
<summary>src/Components/VariableStackContainer/VariableStackContainer.js (2)</summary>

* `useContext` (16-16)
* `useContext` (17-17)

</details>
<details>
<summary>src/Components/SystemSelectorContainer/TraceView/TraceView.js (2)</summary>

* `useContext` (14-14)
* `useContext` (15-15)

</details>
<details>
<summary>src/Providers/ActiveNodeContext.js (1)</summary>

* `ActiveNodeContext` (4-4)

</details>

</blockquote></details>
<details>
<summary>src/Components/VariableStackContainer/VariableStackContainer.js (5)</summary><blockquote>

<details>
<summary>src/Providers/ActiveTraceContext.js (1)</summary>

* `ActiveTraceContext` (4-4)

</details>
<details>
<summary>src/Providers/ActiveNodeContext.js (1)</summary>

* `ActiveNodeContext` (4-4)

</details>
<details>
<summary>src/Providers/ASPProviders.js (2)</summary>

* `activeNode` (33-33)
* `activeTrace` (32-32)

</details>
<details>
<summary>src/Components/VariableStackContainer/VariableContainer/VariableStackContainer.js (1)</summary>

* `VariableContainer` (17-65)

</details>
<details>
<summary>src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.js (1)</summary>

* `VerticleHandle` (17-66)

</details>

</blockquote></details>
<details>
<summary>src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.js (1)</summary><blockquote>

<details>
<summary>src/Viewer/RightSideContainer/RightSideContainer.js (3)</summary>

* `handleMouseDown` (21-28)
* `handleMouseMove` (30-39)
* `handleMouseUp` (41-47)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (11)</summary><blockquote>

<details>
<summary>package.json (1)</summary>

`25-25`: <details>
<summary>❓ Verification inconclusive</summary>

**Verify new dependency version and security.**  
Ensure that `@microlink/react-json-view@^1.26.1` is a valid release on npm and free from known vulnerabilities before merging.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check that the desired version exists
npm view @microlink/react-json-view@1.26.1 version

# Run an audit to catch any vulnerabilities
npm audit --json | jq '.'
```

Length of output: 674

---



</details>

**Verify dependency security with a lockfile**  
The version `1.26.1` of `@microlink/react-json-view` is valid on npm. To ensure it’s free from known vulnerabilities, you’ll need an auditable lockfile. Please run:

```bash
npm install --package-lock-only
npm audit --json | jq '.'
```

Review and address any reported issues before merging.

</details>
<details>
<summary>src/Components/VariableStackContainer/VariableStackContainer.scss (1)</summary>

`1-13`: **SCSS layout styles look good.**  
The container and section classes correctly handle sizing and hierarchy, and the title styling is clear and consistent.

</details>
<details>
<summary>src/Viewer/Viewer.js (1)</summary>

`4-5`: **Container split implementation looks good**

The refactoring from a single SideContainer to separate LeftSideContainer and RightSideContainer components aligns perfectly with the PR objective of adding a right-side variable display panel.

The structure maintains proper layout with flexbox classes and follows the existing pattern in the codebase.



Also applies to: 19-19, 24-26

</details>
<details>
<summary>src/Providers/ASPProviders.js (2)</summary>

`6-6`: **Good implementation of active node state management**

The addition of the ActiveNodeContext import and useState initialization follows the existing pattern in the codebase for managing state via context.



Also applies to: 33-33

---

`109-119`: **Context provider wrapper looks good**

The ActiveNodeContext provider correctly wraps the existing context providers, making the active node state accessible throughout the component tree. This is essential for the variable display panel to show data for the selected node.

</details>
<details>
<summary>src/Components/TraceDiagram/TraceDiagram.jsx (3)</summary>

`14-14`: **Good addition of ActiveNodeContext.**

The integration of the ActiveNodeContext provides the necessary state management for tracking selected nodes.

---

`29-29`: **LGTM - Context properly integrated.**

The activeNode context is correctly destructured to access both the state and setter function.

---

`61-63`: **Well-implemented node selection handler.**

The onNodeClick handler now updates the active node in the context, which will drive the variable display in the right-side panel.

</details>
<details>
<summary>src/Viewer/LeftSideContainer/LeftSideContainer.js (2)</summary>

`5-7`: **Renamed imports match new component structure.**

The import paths have been correctly updated to reflect the new component organization with distinct left and right containers.

---

`10-13`: **Component rename is consistent.**

The component has been appropriately renamed from SideContainer to LeftSideContainer to match its more specific role in the new UI layout.

</details>
<details>
<summary>src/Components/VariableStackContainer/VariableContainer/VariableStackContainer.js (1)</summary>

`48-64`: **Well-structured variable display component.**

The component properly handles conditional rendering of JSON data and applies appropriate styling. The use of ReactJsonView with custom theming provides a good user experience for inspecting variable values.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-25T10:55:26Z
user: login: vishalpalaniappan
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-25T10:58:31Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-25T10:58:58Z
user: login: vishalpalaniappan
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-25T11:04:00Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-25T11:04:21Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 3**

<details>
<summary>🧹 Nitpick comments (4)</summary><blockquote>

<details>
<summary>src/Components/VariableStackContainer/VariableContainer/VariableContainer.js (4)</summary><blockquote>

`8-11`: **PropTypes should be defined after the component declaration.**

The PropTypes are currently defined before the component function, which is unconventional. Typically, PropTypes are defined after the component so they reference the existing component.

Move the PropTypes definition to after the component declaration:

```diff
-VariableContainer.propTypes = {
-    type: PropTypes.string,
-    variables: PropTypes.object,
-};

/**
 * Contains the variable stack container.
 * @return {JSX.Element}
 */
export function VariableContainer ({type, variables}) {
    // component implementation
}

+VariableContainer.propTypes = {
+    type: PropTypes.string,
+    variables: PropTypes.object,
+};
```

---

`13-16`: **Improve component documentation.**

The current JSDoc comment is vague and doesn't accurately describe what this component does. A more descriptive comment would help developers understand the component's purpose and usage.


```diff
/**
- * Contains the variable stack container.
+ * Renders a JSON viewer for displaying variable data with custom styling.
+ * Applies conditional border styling based on the variable type and content.
+ * @param {string} type - The type of variables ('node' or 'trace')
+ * @param {object} variables - The variable data to display in JSON format
 * @return {JSX.Element}
 */
```

---

`17-35`: **Consider extracting the theme object.**

The theme object is quite large and could be moved outside the component to improve readability and prevent it from being recreated on each render.


```diff
+const variableStackTheme = {
+    base00: "#252526",
+    base01: "#ddd",
+    base02: "#474747",
+    base03: "#444",
+    base04: "#717171",
+    base05: "#444",
+    base06: "#444",
+    base07: "#c586c0", // keys
+    base08: "#444",
+    base09: "#ce9178", // String
+    base0A: "rgba(70, 70, 230, 1)",
+    base0B: "#ce9178",
+    base0C: "rgba(70, 70, 230, 1)",
+    base0D: "#bbb18c", // indent arrow
+    base0E: "#bbb18c", // indent arrow
+    base0F: "#a7ce8a",
+};

export function VariableContainer ({type, variables}) {
-    const variableStackTheme = {
-        base00: "#252526",
-        base01: "#ddd",
-        base02: "#474747",
-        base03: "#444",
-        base04: "#717171",
-        base05: "#444",
-        base06: "#444",
-        base07: "#c586c0", // keys
-        base08: "#444",
-        base09: "#ce9178", // String
-        base0A: "rgba(70, 70, 230, 1)",
-        base0B: "#ce9178",
-        base0C: "rgba(70, 70, 230, 1)",
-        base0D: "#bbb18c", // indent arrow
-        base0E: "#bbb18c", // indent arrow
-        base0F: "#a7ce8a",
-    };
```

---

`1-6`: **Remove unused import and add defensive imports.**

The `useContext` import is not used in this component.


```diff
-import React, {useContext} from "react";
+import React from "react";

import ReactJsonView from "@microlink/react-json-view";
import PropTypes from "prop-types";

import "./VariableContainer.scss";
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 17cada3c4f24aa9d2af823f41f9b592a1bf145f6 and ceba54f1114c55e561ad25ce44b670de03fbfa41.

</details>

<details>
<summary>📒 Files selected for processing (3)</summary>

* `src/Components/VariableStackContainer/VariableContainer/VariableContainer.js` (1 hunks)
* `src/Components/VariableStackContainer/VariableContainer/VariableContainer.scss` (1 hunks)
* `src/Components/VariableStackContainer/VariableStackContainer.js` (1 hunks)

</details>

<details>
<summary>✅ Files skipped from review due to trivial changes (1)</summary>

* src/Components/VariableStackContainer/VariableContainer/VariableContainer.scss

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* src/Components/VariableStackContainer/VariableStackContainer.js

</details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-25T11:06:50Z
user: login: vishalpalaniappan
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-25T11:07:55Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-25T11:08:28Z
user: login: vishalpalaniappan
state: COMMENTED
author_association: OWNER
submitted_at: 2025-04-25T11:10:20Z
user: login: coderabbitai[bot]
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-25T11:10:41Z

Review comments:
diff_hunk: @@ -0,0 +1,27 @@
+.side-container .menu {
+    height:100%;
+    width:100%;
+    background:#333333;
+}
+
+.menu-icon {
+    margin:10px 0;
+    cursor:pointer;
+}
+
+.side-container > .accordian {
+    height:100%;
+    width:300px;
+    background:#252526;
+}
path: src/Viewer/RightSideContainer/RightSideContainer.scss
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Fix typo in accordion class name.**  
The selector `.accordian` is misspelled; it should be `.accordion` to match the component naming and avoid broken styles.  


```diff
-side-container > .accordian {
+ .side-container > .accordion {
     height:100%;
     width:300px;
     background:#252526;
 }
```


> Committable suggestion skipped: line range outside the PR's diff.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-25T10:55:24Z
author_association: NONE
diff_hunk: @@ -0,0 +1,10 @@
+.variable-container .vertical-handle {
+    width:100%;
+    height:2px;
+    background-color: #474747;
+    cursor: ns-resize;
+}
+
+.variable-container .handle-active{
+    background-color:#007acc;
+}
path: src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.scss
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Fix typo in component name: "Verticle" should be "Vertical"**

The styling itself looks good - the thin handle with appropriate cursor and color change provides excellent user feedback. However, there's a spelling error in the component name that should be fixed.

"Verticle" is misspelled and should be "Vertical". This affects the file name, class names, and any imports or references to this component.


The component should be renamed for consistency and correctness. This would involve:
1. Renaming the file/folder from "VerticleHandle" to "VerticalHandle" 
2. Updating all imports and references across the codebase
3. Keeping the styling as-is since it's appropriately implemented

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-25T10:55:24Z
author_association: NONE
diff_hunk: @@ -0,0 +1,57 @@
+import React, {useRef, useState} from "react";
+
+import {VariableStackContainer} from "../../Components/VariableStackContainer/VariableStackContainer";
+
+import "./RightSideContainer.scss";
+
+/**
+ * Renders the right side menu and accordian containers.
+ * @return {JSX.Element}
+ */
+export function RightSideContainer () {
+    const accordian = useRef();
+    const handle = useRef();
+
+    const ACCORDIAN_WIDTH = 400;
+    const MIN_EDITOR_WIDTH = 400;
+    const MIN_ACCORDIAN_WIDTH = 200;
+    const MAX_ACCORDIAN_WIDTH = document.body.clientWidth - MIN_EDITOR_WIDTH;
path: src/Viewer/RightSideContainer/RightSideContainer.js
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Incorrect maximum width calculation for right side container.**

The MAX_ACCORDIAN_WIDTH calculation doesn't account for any left side elements, potentially allowing the accordion to grow too large.


```diff
const ACCORDIAN_WIDTH = 400;
const MIN_EDITOR_WIDTH = 400;
const MIN_ACCORDIAN_WIDTH = 200;
-const MAX_ACCORDIAN_WIDTH = document.body.clientWidth - MIN_EDITOR_WIDTH;
+// Consider the left container width when calculating maximum width
+const LEFT_SIDE_WIDTH = 450; // Estimated width of left side container
+const MAX_ACCORDIAN_WIDTH = document.body.clientWidth - MIN_EDITOR_WIDTH - LEFT_SIDE_WIDTH;
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    const ACCORDIAN_WIDTH = 400;
    const MIN_EDITOR_WIDTH = 400;
    const MIN_ACCORDIAN_WIDTH = 200;
    // Consider the left container width when calculating maximum width
    const LEFT_SIDE_WIDTH = 450; // Estimated width of left side container
    const MAX_ACCORDIAN_WIDTH = document.body.clientWidth - MIN_EDITOR_WIDTH - LEFT_SIDE_WIDTH;
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-25T10:55:24Z
author_association: NONE
diff_hunk: @@ -0,0 +1,57 @@
+import React, {useRef, useState} from "react";
+
+import {VariableStackContainer} from "../../Components/VariableStackContainer/VariableStackContainer";
+
+import "./RightSideContainer.scss";
+
+/**
+ * Renders the right side menu and accordian containers.
+ * @return {JSX.Element}
+ */
+export function RightSideContainer () {
+    const accordian = useRef();
+    const handle = useRef();
+
+    const ACCORDIAN_WIDTH = 400;
+    const MIN_EDITOR_WIDTH = 400;
+    const MIN_ACCORDIAN_WIDTH = 200;
+    const MAX_ACCORDIAN_WIDTH = document.body.clientWidth - MIN_EDITOR_WIDTH;
+
+    let downValueX;
+    const handleMouseDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        handle.current.classList.add("handle-active");
+        downValueX = e.clientX;
+    };
+
+    const handleMouseMove = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const delta = e.clientX - downValueX;
+        const newWidth = accordian.current.getBoundingClientRect().width - delta;
+        if (newWidth > MIN_ACCORDIAN_WIDTH && newWidth < MAX_ACCORDIAN_WIDTH) {
+            accordian.current.style.width = newWidth + "px";
+            downValueX = e.clientX;
+        }
+    };
path: src/Viewer/RightSideContainer/RightSideContainer.js
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Counter-intuitive resize behavior for right side panel.**

The width calculation uses `width - delta` which makes the panel narrower when dragging right and wider when dragging left. This is counter-intuitive for a right-side panel.


```diff
const handleMouseMove = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const delta = e.clientX - downValueX;
-    const newWidth = accordian.current.getBoundingClientRect().width - delta;
+    const newWidth = accordian.current.getBoundingClientRect().width - delta;
    if (newWidth > MIN_ACCORDIAN_WIDTH && newWidth < MAX_ACCORDIAN_WIDTH) {
        accordian.current.style.width = newWidth + "px";
        downValueX = e.clientX;
    }
};
```

This is counter-intuitive because dragging left makes the panel wider and dragging right makes it narrower. Consider adjusting the calculation to behave in the expected manner:

```diff
const handleMouseMove = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const delta = e.clientX - downValueX;
-    const newWidth = accordian.current.getBoundingClientRect().width - delta;
+    // For right side panel, dragging left should make it smaller, right should make it larger
+    const newWidth = accordian.current.getBoundingClientRect().width + delta;
    if (newWidth > MIN_ACCORDIAN_WIDTH && newWidth < MAX_ACCORDIAN_WIDTH) {
        accordian.current.style.width = newWidth + "px";
        downValueX = e.clientX;
    }
};
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    const handleMouseMove = (e) => {
        e.preventDefault();
        e.stopPropagation();
        const delta = e.clientX - downValueX;
        // For right side panel, dragging left should make it smaller, right should make it larger
        const newWidth = accordian.current.getBoundingClientRect().width + delta;
        if (newWidth > MIN_ACCORDIAN_WIDTH && newWidth < MAX_ACCORDIAN_WIDTH) {
            accordian.current.style.width = newWidth + "px";
            downValueX = e.clientX;
        }
    };
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-25T10:55:24Z
author_association: NONE
diff_hunk: @@ -0,0 +1,66 @@
+import React, {useRef} from "react";
+
+import PropTypes from "prop-types";
+
+import "./VerticleHandle.scss";
+
+VerticleHandle.propTypes = {
+    topDiv: PropTypes.object,
+    bottomDiv: PropTypes.object,
+};
+
+/**
+ * Renders a vertically resizable handle for the accordian components.
+ * It accepts two components which are resized when the handle is moved.
+ * @return {JSX.Element}
+ */
+export function VerticleHandle ({topDiv, bottomDiv}) {
+    const handleRef = useRef();
+
+    const MIN_CONTAINER_HEIGHT = 25;
+
+    // Initial values used to calculate delta on mouse move.
+    let downValueY;
+    let topHeight;
+    let bottomHeight;
+
+    const handleMouseDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+
+        downValueY = e.clientY;
+        topHeight = topDiv.current.getBoundingClientRect().height;
+        bottomHeight = bottomDiv.current.getBoundingClientRect().height;
+
+        handleRef.current.classList.add("handle-active");
+    };
+
+    const handleMouseMove = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const delta = e.clientY - downValueY;
+        const newPreHeight = topHeight + delta;
+        const newPostHeight = bottomHeight - delta;
+
+        if (newPreHeight > MIN_CONTAINER_HEIGHT && newPostHeight > MIN_CONTAINER_HEIGHT) {
+            topDiv.current.style.height = newPreHeight + "px";
+            bottomDiv.current.style.height = newPostHeight + "px";
+        }
+    };
+
+    const handleMouseUp = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        handleRef.current.classList.remove("handle-active");
+    };
+
+    return (
+        <div ref={handleRef} onMouseDown={handleMouseDown} className="vertical-handle"></div>
+    );
+}
path: src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.js
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Missing accessibility attributes.**

The draggable handle lacks proper accessibility attributes, making it difficult for users with disabilities to interact with it.


Add appropriate ARIA attributes and keyboard interaction:

```diff
return (
-    <div ref={handleRef} onMouseDown={handleMouseDown} className="vertical-handle"></div>
+    <div 
+        ref={handleRef} 
+        onMouseDown={handleMouseDown} 
+        className="vertical-handle"
+        role="separator"
+        aria-orientation="horizontal"
+        tabIndex="0"
+        aria-label="Resize panels"
+    ></div>
);
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    return (
        <div 
            ref={handleRef} 
            onMouseDown={handleMouseDown} 
            className="vertical-handle"
            role="separator"
            aria-orientation="horizontal"
            tabIndex="0"
            aria-label="Resize panels"
        ></div>
    );
}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-25T10:55:24Z
author_association: NONE
diff_hunk: @@ -0,0 +1,66 @@
+import React, {useRef} from "react";
+
+import PropTypes from "prop-types";
+
+import "./VerticleHandle.scss";
+
+VerticleHandle.propTypes = {
+    topDiv: PropTypes.object,
+    bottomDiv: PropTypes.object,
+};
+
+/**
+ * Renders a vertically resizable handle for the accordian components.
+ * It accepts two components which are resized when the handle is moved.
+ * @return {JSX.Element}
+ */
+export function VerticleHandle ({topDiv, bottomDiv}) {
+    const handleRef = useRef();
+
+    const MIN_CONTAINER_HEIGHT = 25;
+
+    // Initial values used to calculate delta on mouse move.
+    let downValueY;
+    let topHeight;
+    let bottomHeight;
+
+    const handleMouseDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+
+        downValueY = e.clientY;
+        topHeight = topDiv.current.getBoundingClientRect().height;
+        bottomHeight = bottomDiv.current.getBoundingClientRect().height;
+
+        handleRef.current.classList.add("handle-active");
+    };
path: src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.js
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Missing event listener cleanup if component unmounts during drag.**

If the component unmounts while dragging is in progress, the event listeners added to the document will not be cleaned up.


Add a useEffect hook to ensure event listeners are cleaned up:

```diff
import React, {useRef, useEffect} from "react";

// ...

export function VerticleHandle ({topDiv, bottomDiv}) {
    // ...

+    useEffect(() => {
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, []);

    const handleMouseDown = (e) => {
        e.preventDefault();
        e.stopPropagation();

        document.addEventListener("mousemove", handleMouseMove);
        document.addEventListener("mouseup", handleMouseUp);

-        downValueY = e.clientY;
-        topHeight = topDiv.current.getBoundingClientRect().height;
-        bottomHeight = bottomDiv.current.getBoundingClientRect().height;
+        dragState.current.downValueY = e.clientY;
+        dragState.current.topHeight = topDiv.current.getBoundingClientRect().height;
+        dragState.current.bottomHeight = bottomDiv.current.getBoundingClientRect().height;

        handleRef.current.classList.add("handle-active");
    };
```


> Committable suggestion skipped: line range outside the PR's diff.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-25T10:55:24Z
author_association: NONE
diff_hunk: @@ -0,0 +1,66 @@
+import React, {useRef} from "react";
+
+import PropTypes from "prop-types";
+
+import "./VerticleHandle.scss";
+
+VerticleHandle.propTypes = {
+    topDiv: PropTypes.object,
+    bottomDiv: PropTypes.object,
+};
+
+/**
+ * Renders a vertically resizable handle for the accordian components.
+ * It accepts two components which are resized when the handle is moved.
+ * @return {JSX.Element}
+ */
+export function VerticleHandle ({topDiv, bottomDiv}) {
+    const handleRef = useRef();
+
+    const MIN_CONTAINER_HEIGHT = 25;
+
+    // Initial values used to calculate delta on mouse move.
+    let downValueY;
+    let topHeight;
+    let bottomHeight;
+
path: src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.js
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Variables defined outside React lifecycle might cause issues.**

The variables `downValueY`, `topHeight`, and `bottomHeight` are mutable and defined outside of React's state management system. This can cause issues with React's rendering model, especially during re-renders.


Use React's useRef for variables that need to persist across renders but don't trigger re-renders:

```diff
export function VerticleHandle ({topDiv, bottomDiv}) {
    const handleRef = useRef();
+    const dragState = useRef({
+        downValueY: 0,
+        topHeight: 0,
+        bottomHeight: 0
+    });

    const MIN_CONTAINER_HEIGHT = 25;

-    // Initial values used to calculate delta on mouse move.
-    let downValueY;
-    let topHeight;
-    let bottomHeight;
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
export function VerticleHandle ({topDiv, bottomDiv}) {
    const handleRef = useRef();
    const dragState = useRef({
        downValueY: 0,
        topHeight: 0,
        bottomHeight: 0
    });

    const MIN_CONTAINER_HEIGHT = 25;

    // …rest of your implementation…
}
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-25T10:55:25Z
author_association: NONE
diff_hunk: @@ -0,0 +1,100 @@
+import React, {useContext, useEffect, useRef, useState} from "react";
+
+import ActiveNodeContext from "../../Providers/ActiveNodeContext";
+import ActiveTraceContext from "../../Providers/ActiveTraceContext";
+import {VariableContainer} from "./VariableContainer/VariableStackContainer";
+import {VerticleHandle} from "./VerticleHandle/VerticleHandle";
+
+import "./VariableStackContainer.scss";
+
+/**
+ * Contains the debugger accordian sections.
+ * @return {JSX.Element}
+ */
+export function VariableStackContainer () {
+    const variableContainerRef = useRef();
+    const {activeTrace, setActiveTrace} = useContext(ActiveTraceContext);
+    const {activeNode, setActiveNode} = useContext(ActiveNodeContext);
+
+    const [traceInput, setTraceInput] = useState({});
+    const [traceOutput, setTraceOutput] = useState({});
+    const [nodeInput, setNodeInput] = useState({});
+    const [nodeOutput, setNodeOutput] = useState({});
+
+    const traceInputRef = useRef();
+    const traceOutputRef = useRef();
+    const nodeInputRef = useRef();
+    const nodeOutputRef = useRef();
+
+    const TITLE_HEIGHT = 20;
+
+    const redrawContainers = () => {
+        const height = variableContainerRef.current.clientHeight;
+        const containerHeight = height/4;
+        traceInputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        traceOutputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        nodeInputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        nodeOutputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+    };
+
+    useEffect(() => {
+        redrawContainers();
+    }, []);
+
+    useEffect(() => {
+        if (activeNode) {
+            const node = activeNode.sourceNode;
+            if (node.type == "adli_output") {
+                setNodeInput({});
+                setNodeOutput(node.adliValue);
+            } else if (node.type == "adli_input") {
+                if ("output" in node) {
+                    setNodeInput(node.adliValue);
+                    setNodeOutput(node.output[0].adliValue);
+                } else {
+                    setNodeInput(node.adliValue);
+                    setNodeOutput({});
+                }
+            }
+        } else {
+            setNodeInput({});
+            setNodeOutput({});
+        }
+    }, [activeNode]);
+
+    useEffect(() => {
+        if (activeTrace) {
+            const trace = JSON.parse(activeTrace.traces);
+            setTraceInput(trace[0].adliValue);
+            setTraceOutput(trace[trace.length -1].adliValue);
+        }
+    }, [activeTrace]);
path: src/Components/VariableStackContainer/VariableStackContainer.js
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Missing error handling for JSON parsing.**

The code uses `JSON.parse` without any error handling, which could cause the component to crash if the JSON is malformed.


Add try-catch block for safer JSON parsing:

```diff
useEffect(() => {
    if (activeTrace) {
+        try {
            const trace = JSON.parse(activeTrace.traces);
-            setTraceInput(trace[0].adliValue);
-            setTraceOutput(trace[trace.length -1].adliValue);
+            if (trace && Array.isArray(trace) && trace.length > 0) {
+                setTraceInput(trace[0].adliValue || {});
+                setTraceOutput(trace[trace.length - 1].adliValue || {});
+            } else {
+                setTraceInput({});
+                setTraceOutput({});
+            }
+        } catch (error) {
+            console.error("Failed to parse trace JSON:", error);
+            setTraceInput({});
+            setTraceOutput({});
+        }
    }
}, [activeTrace]);
```

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-25T10:55:25Z
author_association: NONE
diff_hunk: @@ -0,0 +1,100 @@
+import React, {useContext, useEffect, useRef, useState} from "react";
+
+import ActiveNodeContext from "../../Providers/ActiveNodeContext";
+import ActiveTraceContext from "../../Providers/ActiveTraceContext";
+import {VariableContainer} from "./VariableContainer/VariableStackContainer";
+import {VerticleHandle} from "./VerticleHandle/VerticleHandle";
+
+import "./VariableStackContainer.scss";
+
+/**
+ * Contains the debugger accordian sections.
+ * @return {JSX.Element}
+ */
+export function VariableStackContainer () {
+    const variableContainerRef = useRef();
+    const {activeTrace, setActiveTrace} = useContext(ActiveTraceContext);
+    const {activeNode, setActiveNode} = useContext(ActiveNodeContext);
+
+    const [traceInput, setTraceInput] = useState({});
+    const [traceOutput, setTraceOutput] = useState({});
+    const [nodeInput, setNodeInput] = useState({});
+    const [nodeOutput, setNodeOutput] = useState({});
+
+    const traceInputRef = useRef();
+    const traceOutputRef = useRef();
+    const nodeInputRef = useRef();
+    const nodeOutputRef = useRef();
+
+    const TITLE_HEIGHT = 20;
+
+    const redrawContainers = () => {
+        const height = variableContainerRef.current.clientHeight;
+        const containerHeight = height/4;
+        traceInputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        traceOutputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        nodeInputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        nodeOutputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+    };
path: src/Components/VariableStackContainer/VariableStackContainer.js
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Consider window resize event handling.**

The `redrawContainers` function is only called once on component mount, but the container sizes might need to be recalculated if the window or parent container is resized.


Add a window resize event listener:

```diff
useEffect(() => {
    redrawContainers();
+    
+    const handleResize = () => {
+        redrawContainers();
+    };
+    
+    window.addEventListener('resize', handleResize);
+    return () => {
+        window.removeEventListener('resize', handleResize);
+    };
}, []);
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    const redrawContainers = () => {
        const height = variableContainerRef.current.clientHeight;
        const containerHeight = height / 4;
        traceInputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
        traceOutputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
        nodeInputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
        nodeOutputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
    };

    useEffect(() => {
        // Initial sizing on mount
        redrawContainers();

        // Re-run on window resize
        const handleResize = () => {
            redrawContainers();
        };

        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-25T10:55:25Z
author_association: NONE
diff_hunk: @@ -0,0 +1,100 @@
+import React, {useContext, useEffect, useRef, useState} from "react";
+
+import ActiveNodeContext from "../../Providers/ActiveNodeContext";
+import ActiveTraceContext from "../../Providers/ActiveTraceContext";
+import {VariableContainer} from "./VariableContainer/VariableStackContainer";
+import {VerticleHandle} from "./VerticleHandle/VerticleHandle";
path: src/Components/VariableStackContainer/VariableStackContainer.js
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Import path suggests incorrect file naming.**

The import statement for `VariableContainer` suggests that the file is named `VariableStackContainer.js`, which is confusing since it's being imported into a file also named `VariableStackContainer.js`.


Rename the component file to match its exported component name:

```diff
-import {VariableContainer} from "./VariableContainer/VariableStackContainer";
+import {VariableContainer} from "./VariableContainer/VariableContainer";
```

This requires renaming the actual file from `VariableContainer/VariableStackContainer.js` to `VariableContainer/VariableContainer.js`.


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
import {VariableContainer} from "./VariableContainer/VariableContainer";
import {VerticleHandle} from "./VerticleHandle/VerticleHandle";
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->

✅ Addressed in commit ceba54f
created_at: 2025-04-25T10:55:25Z
author_association: NONE
diff_hunk: @@ -0,0 +1,100 @@
+import React, {useContext, useEffect, useRef, useState} from "react";
+
+import ActiveNodeContext from "../../Providers/ActiveNodeContext";
+import ActiveTraceContext from "../../Providers/ActiveTraceContext";
+import {VariableContainer} from "./VariableContainer/VariableStackContainer";
+import {VerticleHandle} from "./VerticleHandle/VerticleHandle";
+
+import "./VariableStackContainer.scss";
+
+/**
+ * Contains the debugger accordian sections.
+ * @return {JSX.Element}
+ */
+export function VariableStackContainer () {
+    const variableContainerRef = useRef();
+    const {activeTrace, setActiveTrace} = useContext(ActiveTraceContext);
+    const {activeNode, setActiveNode} = useContext(ActiveNodeContext);
+
+    const [traceInput, setTraceInput] = useState({});
+    const [traceOutput, setTraceOutput] = useState({});
+    const [nodeInput, setNodeInput] = useState({});
+    const [nodeOutput, setNodeOutput] = useState({});
+
+    const traceInputRef = useRef();
+    const traceOutputRef = useRef();
+    const nodeInputRef = useRef();
+    const nodeOutputRef = useRef();
+
+    const TITLE_HEIGHT = 20;
+
+    const redrawContainers = () => {
+        const height = variableContainerRef.current.clientHeight;
+        const containerHeight = height/4;
+        traceInputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        traceOutputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        nodeInputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        nodeOutputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+    };
+
+    useEffect(() => {
+        redrawContainers();
+    }, []);
+
+    useEffect(() => {
+        if (activeNode) {
+            const node = activeNode.sourceNode;
+            if (node.type == "adli_output") {
+                setNodeInput({});
+                setNodeOutput(node.adliValue);
+            } else if (node.type == "adli_input") {
+                if ("output" in node) {
+                    setNodeInput(node.adliValue);
+                    setNodeOutput(node.output[0].adliValue);
+                } else {
+                    setNodeInput(node.adliValue);
+                    setNodeOutput({});
+                }
+            }
+        } else {
+            setNodeInput({});
+            setNodeOutput({});
+        }
+    }, [activeNode]);
path: src/Components/VariableStackContainer/VariableStackContainer.js
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Missing error handling for accessing node properties.**

The code assumes the activeNode object and its properties will always be structured as expected. This could lead to runtime errors if the structure changes.


Add proper null checks and error handling:

```diff
useEffect(() => {
    if (activeNode) {
        const node = activeNode.sourceNode;
-        if (node.type == "adli_output") {
+        if (!node) {
+            setNodeInput({});
+            setNodeOutput({});
+        } else if (node.type == "adli_output") {
            setNodeInput({});
-            setNodeOutput(node.adliValue);
+            setNodeOutput(node.adliValue || {});
        } else if (node.type == "adli_input") {
            if ("output" in node) {
-                setNodeInput(node.adliValue);
-                setNodeOutput(node.output[0].adliValue);
+                setNodeInput(node.adliValue || {});
+                setNodeOutput(node.output && node.output.length > 0 ? node.output[0].adliValue || {} : {});
            } else {
-                setNodeInput(node.adliValue);
+                setNodeInput(node.adliValue || {});
                setNodeOutput({});
            }
        }
    } else {
        setNodeInput({});
        setNodeOutput({});
    }
}, [activeNode]);
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
useEffect(() => {
    if (activeNode) {
        const node = activeNode.sourceNode;
        if (!node) {
            setNodeInput({});
            setNodeOutput({});
        } else if (node.type == "adli_output") {
            setNodeInput({});
            setNodeOutput(node.adliValue || {});
        } else if (node.type == "adli_input") {
            if ("output" in node) {
                setNodeInput(node.adliValue || {});
                setNodeOutput(
                    node.output && node.output.length > 0
                        ? node.output[0].adliValue || {}
                        : {}
                );
            } else {
                setNodeInput(node.adliValue || {});
                setNodeOutput({});
            }
        }
    } else {
        setNodeInput({});
        setNodeOutput({});
    }
}, [activeNode]);
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-25T10:55:25Z
author_association: NONE
diff_hunk: @@ -0,0 +1,100 @@
+import React, {useContext, useEffect, useRef, useState} from "react";
+
+import ActiveNodeContext from "../../Providers/ActiveNodeContext";
+import ActiveTraceContext from "../../Providers/ActiveTraceContext";
+import {VariableContainer} from "./VariableContainer/VariableStackContainer";
+import {VerticleHandle} from "./VerticleHandle/VerticleHandle";
+
+import "./VariableStackContainer.scss";
+
+/**
+ * Contains the debugger accordian sections.
+ * @return {JSX.Element}
+ */
+export function VariableStackContainer () {
+    const variableContainerRef = useRef();
+    const {activeTrace, setActiveTrace} = useContext(ActiveTraceContext);
+    const {activeNode, setActiveNode} = useContext(ActiveNodeContext);
+
+    const [traceInput, setTraceInput] = useState({});
+    const [traceOutput, setTraceOutput] = useState({});
+    const [nodeInput, setNodeInput] = useState({});
+    const [nodeOutput, setNodeOutput] = useState({});
+
+    const traceInputRef = useRef();
+    const traceOutputRef = useRef();
+    const nodeInputRef = useRef();
+    const nodeOutputRef = useRef();
+
+    const TITLE_HEIGHT = 20;
+
+    const redrawContainers = () => {
+        const height = variableContainerRef.current.clientHeight;
+        const containerHeight = height/4;
+        traceInputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        traceOutputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        nodeInputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        nodeOutputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+    };
path: src/Components/VariableStackContainer/VariableStackContainer.js
user: login: vishalpalaniappan
body: The issue with this is, it will redraw the containers back to their original height. So if the user resized any of the containers, then that information will be lost. 

I plan to implement a more modular reusable accordion component in the component library and I will address this issue there.
created_at: 2025-04-25T10:58:31Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,100 @@
+import React, {useContext, useEffect, useRef, useState} from "react";
+
+import ActiveNodeContext from "../../Providers/ActiveNodeContext";
+import ActiveTraceContext from "../../Providers/ActiveTraceContext";
+import {VariableContainer} from "./VariableContainer/VariableStackContainer";
+import {VerticleHandle} from "./VerticleHandle/VerticleHandle";
+
+import "./VariableStackContainer.scss";
+
+/**
+ * Contains the debugger accordian sections.
+ * @return {JSX.Element}
+ */
+export function VariableStackContainer () {
+    const variableContainerRef = useRef();
+    const {activeTrace, setActiveTrace} = useContext(ActiveTraceContext);
+    const {activeNode, setActiveNode} = useContext(ActiveNodeContext);
+
+    const [traceInput, setTraceInput] = useState({});
+    const [traceOutput, setTraceOutput] = useState({});
+    const [nodeInput, setNodeInput] = useState({});
+    const [nodeOutput, setNodeOutput] = useState({});
+
+    const traceInputRef = useRef();
+    const traceOutputRef = useRef();
+    const nodeInputRef = useRef();
+    const nodeOutputRef = useRef();
+
+    const TITLE_HEIGHT = 20;
+
+    const redrawContainers = () => {
+        const height = variableContainerRef.current.clientHeight;
+        const containerHeight = height/4;
+        traceInputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        traceOutputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        nodeInputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+        nodeOutputRef.current.style.height = containerHeight - TITLE_HEIGHT + "px";
+    };
path: src/Components/VariableStackContainer/VariableStackContainer.js
user: login: coderabbitai[bot]
body: @vishalpalaniappan You're absolutely right - adding the window resize handler would reset user-customized container heights. That's a good catch. Your plan to implement a more modular reusable accordion component in the component library sounds like a better approach to handle this properly. That will give you the opportunity to design a solution that preserves user-defined section heights during window resizing.

---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: vishalpalaniappan
PR: vishalpalaniappan/automated-system-viewer#10
File: src/Components/VariableStackContainer/VariableStackContainer.js:31-0
Timestamp: 2025-04-25T10:58:57.193Z
Learning: In the VariableStackContainer component, window resize events should not automatically trigger redrawContainers() as this would override user-customized section heights set via the VerticleHandle components. This will be addressed in a future modular accordion component implementation.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>




<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@vishalpalaniappan You're absolutely right - adding the window resize handler would reset user-customized container heights. That's a good catch. Your plan to implement a more modular reusable accordion component in the component library sounds like a better approach to handle this properly. That will give you the opportunity to design a solution that preserves user-defined section heights during window resizing.

---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: vishalpalaniappan
PR: vishalpalaniappan/automated-system-viewer#10
File: src/Components/VariableStackContainer/VariableStackContainer.js:31-0
Timestamp: 2025-04-25T10:58:57.193Z
Learning: In the VariableStackContainer component, window resize events should not automatically trigger redrawContainers() as this would override user-customized section heights set via the VerticleHandle components. This will be addressed in a future modular accordion component implementation.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>

</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-25T10:58:58Z
author_association: NONE
diff_hunk: @@ -0,0 +1,100 @@
+import React, {useContext, useEffect, useRef, useState} from "react";
+
+import ActiveNodeContext from "../../Providers/ActiveNodeContext";
+import ActiveTraceContext from "../../Providers/ActiveTraceContext";
+import {VariableContainer} from "./VariableContainer/VariableStackContainer";
+import {VerticleHandle} from "./VerticleHandle/VerticleHandle";
path: src/Components/VariableStackContainer/VariableStackContainer.js
user: login: vishalpalaniappan
body: I renamed the final incorrectly while making changes. I have addressed the issue in commit https://github.com/vishalpalaniappan/automated-system-viewer/pull/10/commits/ceba54f1114c55e561ad25ce44b670de03fbfa41.
created_at: 2025-04-25T11:04:00Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,100 @@
+import React, {useContext, useEffect, useRef, useState} from "react";
+
+import ActiveNodeContext from "../../Providers/ActiveNodeContext";
+import ActiveTraceContext from "../../Providers/ActiveTraceContext";
+import {VariableContainer} from "./VariableContainer/VariableStackContainer";
+import {VerticleHandle} from "./VerticleHandle/VerticleHandle";
path: src/Components/VariableStackContainer/VariableStackContainer.js
user: login: coderabbitai[bot]
body: @vishalpalaniappan Thanks for the quick fix! It's great that you've addressed the incorrect file naming issue so promptly. This will help maintain consistency in your codebase and prevent potential import confusion for future development.

---

<!-- This is an auto-generated comment: tweet message by coderabbit.ai -->

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=Avoid%20confusing%20imports%20by%20matching%20file%20names%20to%20exported%20components!%20Renaming%20%60VariableStackContainer.js%60%20to%20%60VariableContainer.js%60%20keeps%20your%20code%20clean%20and%20clear.%20Try%20%40coderabbitai%20for%20smart%20reviews!%20%F0%9F%90%87%E2%9C%A8&url=https%3A%2F%2Fgithub.com%2Fvishalpalaniappan%2Fautomated-system-viewer%2Fpull%2F10%23discussion_r2060018240)?

Thank you for using CodeRabbit!

<!-- end of auto-generated comment: tweet message by coderabbit.ai -->




<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@vishalpalaniappan Thanks for the quick fix! It's great that you've addressed the incorrect file naming issue so promptly. This will help maintain consistency in your codebase and prevent potential import confusion for future development.

---

&lt;!-- This is an auto-generated comment: tweet message by coderabbit.ai --&gt;

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=Avoid%20confusing%20imports%20by%20matching%20file%20names%20to%20exported%20components!%20Renaming%20%60VariableStackContainer.js%60%20to%20%60VariableContainer.js%60%20keeps%20your%20code%20clean%20and%20clear.%20Try%20%40coderabbitai%20for%20smart%20reviews!%20%F0%9F%90%87%E2%9C%A8&url=https%3A%2F%2Fgithub.com%2Fvishalpalaniappan%2Fautomated-system-viewer%2Fpull%2F10%23discussion_r2060018240)?

Thank you for using CodeRabbit!

&lt;!-- end of auto-generated comment: tweet message by coderabbit.ai --&gt;

</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-25T11:04:21Z
author_association: NONE
diff_hunk: @@ -0,0 +1,65 @@
+import React, {useContext} from "react";
+
+import ReactJsonView from "@microlink/react-json-view";
+import PropTypes from "prop-types";
+
+import "./VariableContainer.scss";
+
+VariableContainer.propTypes = {
+    type: PropTypes.string,
+    variables: PropTypes.object,
+};
+
+/**
+ * Contains the variable stack container.
+ * @return {JSX.Element}
+ */
+export function VariableContainer ({type, variables}) {
+    const variableStackTheme = {
+        base00: "#252526",
+        base01: "#ddd",
+        base02: "#474747",
+        base03: "#444",
+        base04: "#717171",
+        base05: "#444",
+        base06: "#444",
+        base07: "#c586c0", // keys
+        base08: "#444",
+        base09: "#ce9178", // String
+        base0A: "rgba(70, 70, 230, 1)",
+        base0B: "#ce9178",
+        base0C: "rgba(70, 70, 230, 1)",
+        base0D: "#bbb18c", // indent arrow
+        base0E: "#bbb18c", // indent arrow
+        base0F: "#a7ce8a",
+    };
+
+    const getStyle = () => {
+        const hasValue = Object.keys(variables).length > 0;
+        if (type == "node" && hasValue) {
+            return {
+                border: "solid 1px #ff6767",
+            };
+        } else if (type == "trace" && hasValue) {
+            return {};
+        }
+    };
path: src/Components/VariableStackContainer/VariableContainer/VariableContainer.js
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Use strict equality and add a default return value.**

The function uses loose equality (`==`) instead of strict equality (`===`) and doesn't explicitly handle the case when neither condition is met.


```diff
const getStyle = () => {
    const hasValue = Object.keys(variables).length > 0;
-    if (type == "node" && hasValue) {
+    if (type === "node" && hasValue) {
        return {
            border: "solid 1px #ff6767",
        };
-    } else if (type == "trace" && hasValue) {
+    } else if (type === "trace" && hasValue) {
        return {};
    }
+    return {}; // Default return for cases not handled above
};
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
    const getStyle = () => {
        const hasValue = Object.keys(variables).length > 0;
        if (type === "node" && hasValue) {
            return {
                border: "solid 1px #ff6767",
            };
        } else if (type === "trace" && hasValue) {
            return {};
        }
        return {}; // Default return for cases not handled above
    };
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-25T11:06:49Z
author_association: NONE
diff_hunk: @@ -0,0 +1,65 @@
+import React, {useContext} from "react";
+
+import ReactJsonView from "@microlink/react-json-view";
+import PropTypes from "prop-types";
+
+import "./VariableContainer.scss";
+
+VariableContainer.propTypes = {
+    type: PropTypes.string,
+    variables: PropTypes.object,
+};
+
+/**
+ * Contains the variable stack container.
+ * @return {JSX.Element}
+ */
+export function VariableContainer ({type, variables}) {
+    const variableStackTheme = {
+        base00: "#252526",
+        base01: "#ddd",
+        base02: "#474747",
+        base03: "#444",
+        base04: "#717171",
+        base05: "#444",
+        base06: "#444",
+        base07: "#c586c0", // keys
+        base08: "#444",
+        base09: "#ce9178", // String
+        base0A: "rgba(70, 70, 230, 1)",
+        base0B: "#ce9178",
+        base0C: "rgba(70, 70, 230, 1)",
+        base0D: "#bbb18c", // indent arrow
+        base0E: "#bbb18c", // indent arrow
+        base0F: "#a7ce8a",
+    };
+
+    const getStyle = () => {
+        const hasValue = Object.keys(variables).length > 0;
+        if (type == "node" && hasValue) {
+            return {
+                border: "solid 1px #ff6767",
+            };
+        } else if (type == "trace" && hasValue) {
+            return {};
+        }
+    };
+
+    return (
+        <div className="variableStackContainer w-100 h-100" style={getStyle()}>
+            {Object.keys(variables).length > 0 &&
+                <ReactJsonView
+                    src={variables}
+                    theme={variableStackTheme}
+                    collapsed={1}
+                    name={"value"}
+                    groupArraysAfterLength={100}
+                    sortKeys={true}
+                    displayDataTypes={false}
+                    quotesOnKeys={true}
+                    collapseStringsAfterLength={30}>
+                </ReactJsonView>
+            }
+        </div>
path: src/Components/VariableStackContainer/VariableContainer/VariableContainer.js
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Optimize conditional rendering and add default props.**

The check for empty variables is duplicated in both the `getStyle` method and the render function. Also, the component doesn't handle potential undefined variables.


```diff
// Add at the top of the file after the imports
+const defaultProps = {
+    type: "trace",
+    variables: {}
+};

// In the render function
return (
    <div className="variableStackContainer w-100 h-100" style={getStyle()}>
-        {Object.keys(variables).length > 0 &&
+        {variables && Object.keys(variables).length > 0 &&
            <ReactJsonView
                src={variables}
                theme={variableStackTheme}
                collapsed={1}
                name={"value"}
                groupArraysAfterLength={100}
                sortKeys={true}
                displayDataTypes={false}
                quotesOnKeys={true}
                collapseStringsAfterLength={30}>
            </ReactJsonView>
        }
    </div>
);

// Add after the PropTypes
+VariableContainer.defaultProps = defaultProps;
```

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-25T11:06:50Z
author_association: NONE
diff_hunk: @@ -0,0 +1,65 @@
+import React, {useContext} from "react";
+
+import ReactJsonView from "@microlink/react-json-view";
+import PropTypes from "prop-types";
+
+import "./VariableContainer.scss";
+
+VariableContainer.propTypes = {
+    type: PropTypes.string,
+    variables: PropTypes.object,
+};
+
+/**
+ * Contains the variable stack container.
+ * @return {JSX.Element}
+ */
+export function VariableContainer ({type, variables}) {
+    const variableStackTheme = {
+        base00: "#252526",
+        base01: "#ddd",
+        base02: "#474747",
+        base03: "#444",
+        base04: "#717171",
+        base05: "#444",
+        base06: "#444",
+        base07: "#c586c0", // keys
+        base08: "#444",
+        base09: "#ce9178", // String
+        base0A: "rgba(70, 70, 230, 1)",
+        base0B: "#ce9178",
+        base0C: "rgba(70, 70, 230, 1)",
+        base0D: "#bbb18c", // indent arrow
+        base0E: "#bbb18c", // indent arrow
+        base0F: "#a7ce8a",
+    };
+
+    const getStyle = () => {
+        const hasValue = Object.keys(variables).length > 0;
+        if (type == "node" && hasValue) {
+            return {
+                border: "solid 1px #ff6767",
+            };
+        } else if (type == "trace" && hasValue) {
+            return {};
+        }
+    };
+
+    return (
+        <div className="variableStackContainer w-100 h-100" style={getStyle()}>
+            {Object.keys(variables).length > 0 &&
+                <ReactJsonView
+                    src={variables}
+                    theme={variableStackTheme}
+                    collapsed={1}
+                    name={"value"}
+                    groupArraysAfterLength={100}
+                    sortKeys={true}
+                    displayDataTypes={false}
+                    quotesOnKeys={true}
+                    collapseStringsAfterLength={30}>
+                </ReactJsonView>
+            }
path: src/Components/VariableStackContainer/VariableContainer/VariableContainer.js
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Add error handling for the ReactJsonView component.**

The component doesn't handle potential rendering errors from ReactJsonView when dealing with complex or invalid JSON structures.


```diff
{variables && Object.keys(variables).length > 0 &&
+    <React.ErrorBoundary fallback={<div className="error-message">Error rendering JSON view</div>}>
        <ReactJsonView
            src={variables}
            theme={variableStackTheme}
            collapsed={1}
            name={"value"}
            groupArraysAfterLength={100}
            sortKeys={true}
            displayDataTypes={false}
            quotesOnKeys={true}
            collapseStringsAfterLength={30}>
        </ReactJsonView>
+    </React.ErrorBoundary>
}
```

---

🌐 Web query:

```web
Does React have a built-in ErrorBoundary component?
```

💡 Result:

## Does React Have a Built-in ErrorBoundary Component?

React itself does **not provide a built-in ErrorBoundary component as part of its core export**. Instead, it introduces the *concept* of error boundaries and provides the necessary APIs to implement them using **class components**. Developers are expected to create their own ErrorBoundary components by extending `React.Component` and implementing specific lifecycle methods—primarily `static getDerivedStateFromError` and optionally `componentDidCatch`—to catch rendering errors in their component tree and display fallback UI[1][3][6].

Here’s a typical example from the React documentation:

```jsx
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}
```
You would then wrap parts of your component tree with `<ErrorBoundary>` to enable this behavior[1][3][6].

### Key Points

- **Core React does not export an ErrorBoundary component by default.** You must implement it yourself if using only React[1][3][6].
- **Only class components** can function as error boundaries in React's API—there is still no support for functional error boundaries in core React[3].
- **Third-party libraries** such as `react-error-boundary` or integrations like Sentry **do provide ready-to-use ErrorBoundary components**, often with extra features and hooks for functional components[2][5][6][7].

### Third-Party ErrorBoundary Components

If you prefer not to implement your own, you can use:
- **[react-error-boundary](https://www.npmjs.com/package/react-error-boundary):** An open source package that provides an ErrorBoundary component and extra utilities, supporting more flexible usage and integration with functional components[2][5][6].
- **Sentry's React SDK:** If you're already using Sentry for error tracking, it exports its own ErrorBoundary component that works seamlessly with its error reporting tools[7].

### Summary Table

| Source           | Built-in ErrorBoundary?  | Notes                                                                       |
|------------------|-------------------------|-----------------------------------------------------------------------------|
| React Core       | No                      | Provides API only; you must implement as a class component[1][3][6].        |
| react-error-boundary | Yes (third-party)        | Provides drop-in ErrorBoundary and hooks for functional components[2][5][6].|
| Sentry           | Yes (third-party)        | ErrorBoundary included for integration with Sentry error tracking[7].        |

**In conclusion:**  
React does not ship a built-in ErrorBoundary component—you must implement one yourself for error handling, or use a third-party library for out-of-the-box solutions[1][3][6].

Citations:

- 1: https://legacy.reactjs.org/docs/error-boundaries.html
- 2: https://www.npmjs.com/package/react-error-boundary
- 3: https://react.dev/reference/react/Component
- 4: https://dev.to/hellonehha/mastering-error-boundaries-in-react-how-to-catch-handle-errors-effectively-2e01
- 5: https://www.tatvasoft.com/outsourcing/2025/02/react-error-boundary.html
- 6: https://refine.dev/blog/react-error-boundaries/
- 7: https://docs.sentry.io/platforms/javascript/guides/react/features/error-boundary/

---



</details>

**Wrap `ReactJsonView` in a proper ErrorBoundary**  
React does not export a built-in `<ErrorBoundary>` component—you’ll need to use your own class-based boundary or a third-party one (e.g. `react-error-boundary`) to catch render failures in complex/invalid JSON.

• File: `src/Components/VariableStackContainer/VariableContainer/VariableContainer.js`  
• Lines: ~50–62  

Suggested change (using `react-error-boundary` as an example):

```diff
 import ReactJsonView from 'react-json-view';
+import { ErrorBoundary } from 'react-error-boundary';

 {Object.keys(variables).length > 0 &&
-    <ReactJsonView
+    <ErrorBoundary
+      FallbackComponent={() => (
+        <div className="error-message">
+          Error rendering JSON view
+        </div>
+      )}>
+      <ReactJsonView
         src={variables}
         theme={variableStackTheme}
         collapsed={1}
         name="value"
         groupArraysAfterLength={100}
         sortKeys
         displayDataTypes={false}
         quotesOnKeys
         collapseStringsAfterLength={30}
-    </ReactJsonView>
+      />
+    </ErrorBoundary>
 }
```

If you already have a custom `ErrorBoundary` component in your codebase, import and use that instead of a third-party library.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-25T11:06:50Z
author_association: NONE
diff_hunk: @@ -0,0 +1,57 @@
+import React, {useRef, useState} from "react";
+
+import {VariableStackContainer} from "../../Components/VariableStackContainer/VariableStackContainer";
+
+import "./RightSideContainer.scss";
+
+/**
+ * Renders the right side menu and accordian containers.
+ * @return {JSX.Element}
+ */
+export function RightSideContainer () {
+    const accordian = useRef();
+    const handle = useRef();
+
+    const ACCORDIAN_WIDTH = 400;
+    const MIN_EDITOR_WIDTH = 400;
+    const MIN_ACCORDIAN_WIDTH = 200;
+    const MAX_ACCORDIAN_WIDTH = document.body.clientWidth - MIN_EDITOR_WIDTH;
+
+    let downValueX;
+    const handleMouseDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        handle.current.classList.add("handle-active");
+        downValueX = e.clientX;
+    };
+
+    const handleMouseMove = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const delta = e.clientX - downValueX;
+        const newWidth = accordian.current.getBoundingClientRect().width - delta;
+        if (newWidth > MIN_ACCORDIAN_WIDTH && newWidth < MAX_ACCORDIAN_WIDTH) {
+            accordian.current.style.width = newWidth + "px";
+            downValueX = e.clientX;
+        }
+    };
path: src/Viewer/RightSideContainer/RightSideContainer.js
user: login: vishalpalaniappan
body: From your comment, "For right side panel, dragging left should make it smaller, right should make it larger", this doesn't seem right to me.

The reason the logic works is because when they drag left, the delta will be negative because e.clientX will be smaller than downValueX. So when calculating the new width, -delta will become positive.

I agree that it might be confusing for users who are trying to develop this. As I said in another comment, I plan to modularize this component, make it more reusable and make it easier to maintain when I implement this feature in the react component library.
created_at: 2025-04-25T11:07:55Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,57 @@
+import React, {useRef, useState} from "react";
+
+import {VariableStackContainer} from "../../Components/VariableStackContainer/VariableStackContainer";
+
+import "./RightSideContainer.scss";
+
+/**
+ * Renders the right side menu and accordian containers.
+ * @return {JSX.Element}
+ */
+export function RightSideContainer () {
+    const accordian = useRef();
+    const handle = useRef();
+
+    const ACCORDIAN_WIDTH = 400;
+    const MIN_EDITOR_WIDTH = 400;
+    const MIN_ACCORDIAN_WIDTH = 200;
+    const MAX_ACCORDIAN_WIDTH = document.body.clientWidth - MIN_EDITOR_WIDTH;
+
+    let downValueX;
+    const handleMouseDown = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        handle.current.classList.add("handle-active");
+        downValueX = e.clientX;
+    };
+
+    const handleMouseMove = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const delta = e.clientX - downValueX;
+        const newWidth = accordian.current.getBoundingClientRect().width - delta;
+        if (newWidth > MIN_ACCORDIAN_WIDTH && newWidth < MAX_ACCORDIAN_WIDTH) {
+            accordian.current.style.width = newWidth + "px";
+            downValueX = e.clientX;
+        }
+    };
path: src/Viewer/RightSideContainer/RightSideContainer.js
user: login: coderabbitai[bot]
body: @vishalpalaniappan You're absolutely right, and I apologize for my incorrect analysis. Looking at the math again:

- When dragging left: `delta` is negative, so `width - delta` makes the panel wider
- When dragging right: `delta` is positive, so `width - delta` makes the panel narrower

This is indeed the correct and intuitive behavior for a right-side panel. Thank you for explaining the logic.

Your plan to modularize this component to make it more reusable and maintainable in the future sounds excellent. That will definitely help with code clarity and developer experience.

---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: vishalpalaniappan
PR: vishalpalaniappan/automated-system-viewer#10
File: src/Viewer/RightSideContainer/RightSideContainer.js:30-39
Timestamp: 2025-04-25T11:08:27.549Z
Learning: The resize logic for the right-side panel in RightSideContainer.js is correctly implemented. When calculating width changes, `newWidth = currentWidth - delta` produces the intuitive behavior: dragging left (negative delta) makes the panel wider, and dragging right (positive delta) makes it narrower.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>




<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@vishalpalaniappan You're absolutely right, and I apologize for my incorrect analysis. Looking at the math again:

- When dragging left: `delta` is negative, so `width - delta` makes the panel wider
- When dragging right: `delta` is positive, so `width - delta` makes the panel narrower

This is indeed the correct and intuitive behavior for a right-side panel. Thank you for explaining the logic.

Your plan to modularize this component to make it more reusable and maintainable in the future sounds excellent. That will definitely help with code clarity and developer experience.

---

<details>
<summary>✏️ Learnings added</summary>

```
Learnt from: vishalpalaniappan
PR: vishalpalaniappan/automated-system-viewer#10
File: src/Viewer/RightSideContainer/RightSideContainer.js:30-39
Timestamp: 2025-04-25T11:08:27.549Z
Learning: The resize logic for the right-side panel in RightSideContainer.js is correctly implemented. When calculating width changes, `newWidth = currentWidth - delta` produces the intuitive behavior: dragging left (negative delta) makes the panel wider, and dragging right (positive delta) makes it narrower.
```

> Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure [review instructions](https://docs.coderabbit.ai/guides/review-instructions). You can manage existing learnings in the [app](https://app.coderabbit.ai/learnings).

</details>

</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-25T11:08:28Z
author_association: NONE
diff_hunk: @@ -0,0 +1,65 @@
+import React, {useContext} from "react";
+
+import ReactJsonView from "@microlink/react-json-view";
+import PropTypes from "prop-types";
+
+import "./VariableContainer.scss";
+
+VariableContainer.propTypes = {
+    type: PropTypes.string,
+    variables: PropTypes.object,
+};
+
+/**
+ * Contains the variable stack container.
+ * @return {JSX.Element}
+ */
+export function VariableContainer ({type, variables}) {
+    const variableStackTheme = {
+        base00: "#252526",
+        base01: "#ddd",
+        base02: "#474747",
+        base03: "#444",
+        base04: "#717171",
+        base05: "#444",
+        base06: "#444",
+        base07: "#c586c0", // keys
+        base08: "#444",
+        base09: "#ce9178", // String
+        base0A: "rgba(70, 70, 230, 1)",
+        base0B: "#ce9178",
+        base0C: "rgba(70, 70, 230, 1)",
+        base0D: "#bbb18c", // indent arrow
+        base0E: "#bbb18c", // indent arrow
+        base0F: "#a7ce8a",
+    };
+
+    const getStyle = () => {
+        const hasValue = Object.keys(variables).length > 0;
+        if (type == "node" && hasValue) {
+            return {
+                border: "solid 1px #ff6767",
+            };
+        } else if (type == "trace" && hasValue) {
+            return {};
+        }
+    };
path: src/Components/VariableStackContainer/VariableContainer/VariableContainer.js
user: login: vishalpalaniappan
body: Addressed in commit https://github.com/vishalpalaniappan/automated-system-viewer/pull/10/commits/d22a1ddf28f20528cf3df979ffde40ca0bfef985.
created_at: 2025-04-25T11:10:20Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,65 @@
+import React, {useContext} from "react";
+
+import ReactJsonView from "@microlink/react-json-view";
+import PropTypes from "prop-types";
+
+import "./VariableContainer.scss";
+
+VariableContainer.propTypes = {
+    type: PropTypes.string,
+    variables: PropTypes.object,
+};
+
+/**
+ * Contains the variable stack container.
+ * @return {JSX.Element}
+ */
+export function VariableContainer ({type, variables}) {
+    const variableStackTheme = {
+        base00: "#252526",
+        base01: "#ddd",
+        base02: "#474747",
+        base03: "#444",
+        base04: "#717171",
+        base05: "#444",
+        base06: "#444",
+        base07: "#c586c0", // keys
+        base08: "#444",
+        base09: "#ce9178", // String
+        base0A: "rgba(70, 70, 230, 1)",
+        base0B: "#ce9178",
+        base0C: "rgba(70, 70, 230, 1)",
+        base0D: "#bbb18c", // indent arrow
+        base0E: "#bbb18c", // indent arrow
+        base0F: "#a7ce8a",
+    };
+
+    const getStyle = () => {
+        const hasValue = Object.keys(variables).length > 0;
+        if (type == "node" && hasValue) {
+            return {
+                border: "solid 1px #ff6767",
+            };
+        } else if (type == "trace" && hasValue) {
+            return {};
+        }
+    };
path: src/Components/VariableStackContainer/VariableContainer/VariableContainer.js
user: login: coderabbitai[bot]
body: @vishalpalaniappan Thanks for implementing the suggested changes in your commit! Using strict equality operators and adding a default return value will make the code more robust and prevent unexpected behavior. Great work! 👍

---

<!-- This is an auto-generated comment: tweet message by coderabbit.ai -->

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=Avoid%20bugs%20by%20using%20strict%20equality%20(%60%3D%3D%3D%60)%20and%20always%20return%20a%20default%20value%20to%20handle%20unexpected%20cases.%20Cleaner%2C%20safer%20code%20with%20%40coderabbitai!%20%F0%9F%9B%A0%EF%B8%8F%E2%9C%A8%20Give%20it%20a%20try!&url=https%3A%2F%2Fgithub.com%2Fvishalpalaniappan%2Fautomated-system-viewer%2Fpull%2F10%23discussion_r2060031606)?

Thank you for using CodeRabbit!

<!-- end of auto-generated comment: tweet message by coderabbit.ai -->




<!-- <agentComponentType>chat-answer</agentComponentType> -->

<!-- <rawResChunk><answer>@vishalpalaniappan Thanks for implementing the suggested changes in your commit! Using strict equality operators and adding a default return value will make the code more robust and prevent unexpected behavior. Great work! 👍

---

&lt;!-- This is an auto-generated comment: tweet message by coderabbit.ai --&gt;

If you found this review helpful, would you consider giving us a shout-out on [X](https://twitter.com/intent/tweet?related=CodeRabbitAI&text=Avoid%20bugs%20by%20using%20strict%20equality%20(%60%3D%3D%3D%60)%20and%20always%20return%20a%20default%20value%20to%20handle%20unexpected%20cases.%20Cleaner%2C%20safer%20code%20with%20%40coderabbitai!%20%F0%9F%9B%A0%EF%B8%8F%E2%9C%A8%20Give%20it%20a%20try!&url=https%3A%2F%2Fgithub.com%2Fvishalpalaniappan%2Fautomated-system-viewer%2Fpull%2F10%23discussion_r2060031606)?

Thank you for using CodeRabbit!

&lt;!-- end of auto-generated comment: tweet message by coderabbit.ai --&gt;

</answer></rawResChunk> -->

<!-- This is an auto-generated reply by CodeRabbit -->
created_at: 2025-04-25T11:10:41Z
author_association: NONE

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-04-25T09:58:15Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- This is an auto-generated comment: rate limited by coderabbit.ai -->

> [!WARNING]
> ## Rate limit exceeded
> 
> @vishalpalaniappan has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait **18 minutes and 12 seconds** before requesting another review.
> 
> <details>
> <summary>⌛ How to resolve this issue?</summary>
> 
> After the wait time has elapsed, a review can be triggered using the `@coderabbitai review` command as a PR comment. Alternatively, push new commits to this PR.
> 
> We recommend that you space out your commits to avoid hitting the rate limit.
> 
> </details>
> 
> 
> <details>
> <summary>🚦 How do rate limits work?</summary>
> 
> CodeRabbit enforces hourly rate limits for each developer per organization.
> 
> Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.
> 
> Please see our [FAQ](https://docs.coderabbit.ai/faq) for further information.
> 
> </details>
> 
> <details>
> <summary>📥 Commits</summary>
> 
> Reviewing files that changed from the base of the PR and between ceba54f1114c55e561ad25ce44b670de03fbfa41 and 54eba7cc9bb8fbce47098dd745d726372a0060aa.
> 
> </details>
> 
> <details>
> <summary>📒 Files selected for processing (2)</summary>
> 
> * `src/Components/TraceDiagram/TraceDiagram.jsx` (4 hunks)
> * `src/Components/VariableStackContainer/VariableContainer/VariableContainer.js` (1 hunks)
> 
> </details>

<!-- end of auto-generated comment: rate limited by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough

This update introduces a modular right-side variable stack panel with resizable sections, a vertical resizing handle, and a JSON viewer for variable data. It adds new React components for variable display, context management for the active node, and styling for both the new UI elements and existing diagram components. The previous single side container is split into left and right containers, with the right side now dedicated to variable inspection. The dependency `@microlink/react-json-view` is added for JSON visualization. Context providers are updated to support active node state, and related SCSS files are included for consistent styling.

## Changes

| File(s)                                                                                  | Change Summary                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
|------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `package.json`                                                                           | Added dependency: `@microlink/react-json-view` version `^1.26.1`.                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `src/Components/TraceDiagram/TraceDiagram.jsx`, `TraceDiagram.scss`                      | Integrated `ActiveNodeContext` for active node state; updated node/pane click handlers; removed color/layout UI controls; imported new SCSS for selected node styling.                                                                                                                                                                                                                                                                                                                         |
| `src/Components/VariableStackContainer/VariableStackContainer.js`, `.scss`               | Added a new variable stack container component with four vertically stacked sections for variable display, dynamic height calculation, and associated styling.                                                                                                                                                                                                                                                                                                                                  |
| `src/Components/VariableStackContainer/VariableContainer/VariableContainer.js`, `.scss`  | Introduced a JSON variable viewer component using `ReactJsonView`, with custom theming and conditional styling; included SCSS for layout and scrollbar customization.                                                                                                                                                                                                                                                                                                                          |
| `src/Components/VariableStackContainer/VerticleHandle/VerticleHandle.js`, `.scss`        | Created a vertical handle component for resizing stacked sections; implemented mouse event handling for resizing; provided active state styling.                                                                                                                                                                                                                                                                                                                                                |
| `src/Providers/ASPProviders.js`, `ActiveNodeContext.js`                                 | Added `ActiveNodeContext` to manage and provide active node state across the app; updated providers to include this context.                                                                                                                                                                                                                                                                                                                                                                   |
| `src/Viewer/LeftSideContainer/LeftSideContainer.js`                                     | Renamed from `SideContainer` to `LeftSideContainer`; updated imports and function name for clarity; no logic changes.                                                                                                                                                                                                                                                                                                                                                                         |
| `src/Viewer/RightSideContainer/RightSideContainer.js`, `.scss`                          | Added a new right-side container component with horizontal resizing handle and accordion for variable stack; included corresponding SCSS for layout and handle styling.                                                                                                                                                                                                                                                                                                                        |
| `src/Viewer/Viewer.js`                                                                  | Updated layout to use separate left and right side containers instead of a single side container.                                                                                                                                                                                                                                                                                                                                                                                             |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant User
    participant Viewer
    participant LeftSideContainer
    participant RightSideContainer
    participant VariableStackContainer
    participant ActiveNodeContext

    User->>Viewer: Loads Viewer
    Viewer->>LeftSideContainer: Render left menu
    Viewer->>RightSideContainer: Render right panel
    RightSideContainer->>VariableStackContainer: Render variable stack
    VariableStackContainer->>ActiveNodeContext: Access active node state
    User->>TraceDiagram: Clicks on node or pane
    TraceDiagram->>ActiveNodeContext: Update active node
    ActiveNodeContext-->>VariableStackContainer: Notify of active node change
    VariableStackContainer->>VariableContainer: Display updated variables
```

## Poem

> In the garden of code where variables grow,  
> A stack now blooms on the right in a tidy row.  
> Handles to drag, and JSONs to view,  
> With context for nodes both active and new.  
> The left side stands guard, the right side reveals—  
> A rabbit's delight in these resizable fields!  
> 🐇✨

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=vishalpalaniappan/automated-system-viewer&utm_content=10):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: vishalpalaniappan
created_at: 2025-04-25T11:03:58Z
body: @coderabbitai pause
author_association: OWNER
user: login: coderabbitai[bot]
created_at: 2025-04-25T11:06:59Z
body: <!-- This is an auto-generated reply by CodeRabbit -->
<details>
<summary>✅ Actions performed</summary>

Reviews paused.

</details>
author_association: NONE
user: login: vishalpalaniappan
created_at: 2025-04-25T11:12:07Z
body: @coderabbitai resume
author_association: OWNER
user: login: coderabbitai[bot]
created_at: 2025-04-25T11:12:12Z
body: <!-- This is an auto-generated reply by CodeRabbit -->
<details>
<summary>✅ Actions performed</summary>

Reviews resumed.

</details>
author_association: NONE