From c5a6ea65f042348166dcb5e9d4d1b431ae9a1ccb Mon Sep 17 00:00:00 2001
From: MalithaPrabhashana <malithaprabhashana@gmail.com>
Date: Mon, 12 May 2025 08:03:50 +0530
Subject: [PATCH 1/2] Enhance debugging functionality by conditionally
 highlighting execution lines and managing breakpoints based on debug state

---
 src/pages/Index.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index ec13982..baf45a2 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -57,7 +57,9 @@ const Index = () => {
 
     // Assign all the callbacks --------------------------------------------
     pythonThread.callbackBreakHit = (line: number) => {
-      codeEditorRef.current?.highlightExecutionLine(line);
+      if (isDebugging) {
+        codeEditorRef.current?.highlightExecutionLine(line);
+      }
     }
     pythonThread.callbackStdout = (outputText: string) => {
       setOutput(prev => prev + outputText);
@@ -120,15 +122,18 @@ const Index = () => {
 
   useEffect(() => {
     if (pythonThread != null && pythonThread.loaded) {
-      pythonThread.setBreakpoints(breakpoints);
+      if (isDebugging) {
+        pythonThread.setBreakpoints(breakpoints);
+      } else {
+        pythonThread.setBreakpoints([]);
+      }
     }
-  }, [breakpoints, pythonThread]);
+  }, [breakpoints, pythonThread, isDebugging]);
 
 
   const handleDebugAction = useCallback(async (action: DebugAction) => {
     switch (action) {
 
-
       // Toggles between debug and run mode.
       case "toggle":
         setIsDebugging(prev => {

From dd3b85925b016b16229b5450ca0ccfc9ff1bee8a Mon Sep 17 00:00:00 2001
From: MalithaPrabhashana <malithaprabhashana@gmail.com>
Date: Mon, 12 May 2025 09:42:18 +0530
Subject: [PATCH 2/2] Refactor DebugControls and DebugPanel components for
 improved readability and functionality; update Index page to manage debugging
 state correctly

---
 src/components/DebugControls.tsx | 95 ++++++++++++++------------------
 src/components/DebugPanel.tsx    |  6 +-
 src/pages/Index.tsx              |  6 +-
 3 files changed, 48 insertions(+), 59 deletions(-)

diff --git a/src/components/DebugControls.tsx b/src/components/DebugControls.tsx
index 154c567..926e300 100644
--- a/src/components/DebugControls.tsx
+++ b/src/components/DebugControls.tsx
@@ -1,17 +1,17 @@
 
 import { Button } from "@/components/ui/button";
 import { Toggle } from "@/components/ui/toggle";
-import { 
-  Play, 
-  SkipForward, 
-  ArrowDown, 
-  ArrowUp, 
-  RotateCw, 
-  Square, 
+import {
+  Play,
+  SkipForward,
+  ArrowDown,
+  ArrowUp,
+  RotateCw,
+  Square,
   ToggleRight
 } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { 
+import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
@@ -27,7 +27,7 @@ interface DebugControlsProps {
   className?: string;
 }
 
-export function DebugControls({ 
+export function DebugControls({
   isDebugging,
   isPaused,
   onDebugAction,
@@ -36,37 +36,26 @@ export function DebugControls({
   return (
     <TooltipProvider>
       <div className={cn(
-        "flex items-center gap-1 md:gap-2 p-1 md:p-2 bg-card border-t border-border overflow-x-auto", 
+        "flex items-center gap-1 md:gap-2 p-1 md:p-2 bg-card border-t border-border overflow-x-auto",
         className
       )}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Toggle 
-              pressed={isDebugging}
-              onPressedChange={() => onDebugAction("toggle")}
-              aria-label="Toggle debug mode"
-              className="gap-1"
-            >
-              <ToggleRight className="h-4 w-4" />
-              <span className="hidden sm:inline">
-                {!isDebugging ? "Debug Mode" : "Run Mode"}
-              </span>
-            </Toggle>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Debug Mode</p>
-          </TooltipContent>
-        </Tooltip>
-        
+        <label className="inline-flex items-center cursor-pointer p-2">
+          <input type="checkbox" value="" checked={isDebugging} onChange={() => onDebugAction("toggle")} className="sr-only peer" />
+          <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
+          <span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+            {isDebugging ? "Debug Mode" : "Run Mode"}
+          </span>
+        </label>
+
         {isDebugging && (
           <>
             <div className="h-4 border-l border-border mx-1" />
-            
+
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button 
-                  variant="ghost" 
-                  size="sm" 
+                <Button
+                  variant="ghost"
+                  size="sm"
                   onClick={() => onDebugAction("continue")}
                   disabled={!isPaused}
                 >
@@ -77,12 +66,12 @@ export function DebugControls({
                 <p>Continue</p>
               </TooltipContent>
             </Tooltip>
-            
+
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button 
-                  variant="ghost" 
-                  size="sm" 
+                <Button
+                  variant="ghost"
+                  size="sm"
                   onClick={() => onDebugAction("stepOver")}
                   disabled={!isPaused}
                 >
@@ -93,12 +82,12 @@ export function DebugControls({
                 <p>Step Over</p>
               </TooltipContent>
             </Tooltip>
-            
+
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button 
-                  variant="ghost" 
-                  size="sm" 
+                <Button
+                  variant="ghost"
+                  size="sm"
                   onClick={() => onDebugAction("stepInto")}
                   disabled={!isPaused}
                 >
@@ -109,12 +98,12 @@ export function DebugControls({
                 <p>Step Into</p>
               </TooltipContent>
             </Tooltip>
-            
+
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button 
-                  variant="ghost" 
-                  size="sm" 
+                <Button
+                  variant="ghost"
+                  size="sm"
                   onClick={() => onDebugAction("stepOut")}
                   disabled={!isPaused}
                 >
@@ -125,12 +114,12 @@ export function DebugControls({
                 <p>Step Out</p>
               </TooltipContent>
             </Tooltip>
-            
+
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button 
-                  variant="ghost" 
-                  size="sm" 
+                <Button
+                  variant="ghost"
+                  size="sm"
                   onClick={() => onDebugAction("restart")}
                 >
                   <RotateCw className="h-4 w-4" />
@@ -140,12 +129,12 @@ export function DebugControls({
                 <p>Restart</p>
               </TooltipContent>
             </Tooltip>
-            
+
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button 
-                  variant="ghost" 
-                  size="sm" 
+                <Button
+                  variant="ghost"
+                  size="sm"
                   onClick={() => onDebugAction("stop")}
                   className="text-red-500 hover:text-red-600"
                 >
diff --git a/src/components/DebugPanel.tsx b/src/components/DebugPanel.tsx
index b98fdb5..25df40c 100644
--- a/src/components/DebugPanel.tsx
+++ b/src/components/DebugPanel.tsx
@@ -57,10 +57,6 @@ export function DebugPanel({ graph, debugStatus, className }: DebugPanelProps) {
 
     dataNodesRef.current = [];
     dataEdgesRef.current = [];
-
-    // if (networkElement.current) {
-    //   networkElement.current.innerHTML = "";
-    // }
   }
 
 
@@ -182,7 +178,7 @@ export function DebugPanel({ graph, debugStatus, className }: DebugPanelProps) {
         ref={networkElement}
         id="mynetwork"
         className={cn(
-          "w-full h-[80vh] border border-gray-300",
+          "w-full h-[80vh]",
           isGraphVisible ? "block" : "hidden"
         )}
       ></div>
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index baf45a2..cc95451 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -71,6 +71,7 @@ const Index = () => {
     }
     pythonThread.callbackExecEnd = () => {
       setIsRunning(false);
+      setIsPaused(false);
       codeEditorRef.current?.clearExecutionLine();
     }
 
@@ -86,6 +87,9 @@ const Index = () => {
     try {
       setIsRunning(true);
       pythonThread.startExecution(code);
+      if (isDebugging) {
+        setIsPaused(true);
+      }
     } catch (error) {
       console.error("Error running Jac code:", error);
       setOutput(`Error: ${error}`);
@@ -230,7 +234,7 @@ const Index = () => {
 
             <DebugControls
               isDebugging={isDebugging}
-              isPaused={true}
+              isPaused={isPaused}
               onDebugAction={handleDebugAction}
             />