Skip to content

In Run Mode, can not do debugging #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: thakee-thread2
Choose a base branch
from
Open

In Run Mode, can not do debugging #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5a6ea6
Enhance debugging functionality by conditionally highlighting executi…
MalithaPrabhashana May 12, 2025
dd3b859
Refactor DebugControls and DebugPanel components for improved readabi…
MalithaPrabhashana May 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 42 additions & 53 deletions src/components/DebugControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -27,7 +27,7 @@ interface DebugControlsProps {
className?: string;
}

export function DebugControls({
export function DebugControls({
isDebugging,
isPaused,
onDebugAction,
Expand All @@ -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}
>
Expand All @@ -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}
>
Expand All @@ -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}
>
Expand All @@ -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}
>
Expand All @@ -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" />
Expand All @@ -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"
>
Expand Down
6 changes: 1 addition & 5 deletions src/components/DebugPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,6 @@ export function DebugPanel({ graph, debugStatus, className }: DebugPanelProps) {

dataNodesRef.current = [];
dataEdgesRef.current = [];

// if (networkElement.current) {
// networkElement.current.innerHTML = "";
// }
}


Expand Down Expand Up @@ -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>
Expand Down
19 changes: 14 additions & 5 deletions src/pages/Index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -69,6 +71,7 @@ const Index = () => {
}
pythonThread.callbackExecEnd = () => {
setIsRunning(false);
setIsPaused(false);
codeEditorRef.current?.clearExecutionLine();
}

Expand All @@ -84,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}`);
Expand Down Expand Up @@ -120,15 +126,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 => {
Expand Down Expand Up @@ -225,7 +234,7 @@ const Index = () => {

<DebugControls
isDebugging={isDebugging}
isPaused={true}
isPaused={isPaused}
onDebugAction={handleDebugAction}
/>

Expand Down