Merge pull request #153 from jaipaljadeja/feat/sierra-single-step-deb…

…ugging

feat: single step debugging mode for sierra statements

components/Editor/ExtraColumn.tsx

@@ -35,6 +35,7 @@ const ExtraColumn = ({
     sierraStatements,
     casmToSierraProgramMap,
     currentSierraVariables,
+    activeSierraIndexes,
   } = useContext(CairoVMApiContext)
 
   return (
@@ -59,9 +60,7 @@ const ExtraColumn = ({
           <InstructionsTable
             instructions={sierraStatements}
             codeType={codeType}
-            activeIndexes={
-              casmToSierraProgramMap[activeCasmInstructionIndex] ?? []
-            }
+            activeIndexes={activeSierraIndexes}
             errorIndexes={
               casmToSierraProgramMap[errorCasmInstructionIndex] ?? []
             }

components/Editor/index.tsx

@@ -18,6 +18,7 @@ import { useTheme } from 'next-themes'
 import {
   CairoVMApiContext,
   ProgramCompilationState,
+  ProgramDebugMode,
   ProgramExecutionState,
 } from 'context/cairoVMApiContext'
 import { Setting, SettingsContext } from 'context/settingsContext'
@@ -44,6 +45,19 @@ type Props = {
   readOnly?: boolean
 }
 
+interface DecorationOptions {
+  inlineClassName: string
+}
+interface Decoration {
+  range: {
+    startLineNumber: number
+    startColumn: number
+    endLineNumber: number
+    endColumn: number
+  }
+  options: DecorationOptions
+}
+
 const Editor = ({ readOnly = false }: Props) => {
   const { settingsLoaded, getSetting } = useContext(SettingsContext)
   const router = useRouter()
@@ -63,6 +77,9 @@ const Editor = ({ readOnly = false }: Props) => {
     currentSierraVariables,
     sierraStatementsToCairoInfo,
     logs: apiLogs,
+    sierraSubStepIndex,
+    debugMode,
+    activeSierraIndexes,
   } = useContext(CairoVMApiContext)
 
   const { addToConsoleLog, isThreeColumnLayout } = useContext(AppUiContext)
@@ -74,7 +91,8 @@ const Editor = ({ readOnly = false }: Props) => {
   const [exampleOption, setExampleOption] = useState<number>(0)
   const [codeType, setCodeType] = useState<string | undefined>()
   const [programArguments, setProgramArguments] = useState<string>('')
-
+  const [editorDecorations, setEditorDecorations] =
+    useState<editor.IEditorDecorationsCollection | null>(null)
   const editorRef = useRef<editor.IStandaloneCodeEditor>()
   const monaco = useMonaco()
 
@@ -101,78 +119,88 @@ const Editor = ({ readOnly = false }: Props) => {
     }
   }
 
-  const [decorations, setDecorations] = useState([])
-
-  interface DecorationOptions {
-    inlineClassName: string
-  }
-  interface Decoration {
-    range: {
-      startLineNumber: number
-      startColumn: number
-      endLineNumber: number
-      endColumn: number
+  function highLightEditor(decorations: Decoration[]) {
+    const editor = editorRef.current
+    if (editor) {
+      // we clear previous decorations
+      editorDecorations?.clear()
+      // add editor decorations
+      const editor_decorations = editor.createDecorationsCollection(decorations)
+      // update new decorations
+      setEditorDecorations(editor_decorations)
     }
-    options: DecorationOptions
   }
 
   useEffect(() => {
     setTimeout(() => {
-      const multiplieDecorations: Decoration[] = []
+      const multipleDecorations: Decoration[] = []
       let isHighlightOnScreen = false
-      casmToSierraProgramMap[activeCasmInstructionIndex]?.map((item, i) => {
-        const index = casmToSierraStatementsMap[activeCasmInstructionIndex][i]
+      const isSierraDebugMode = debugMode === ProgramDebugMode.Sierra
+
+      casmToSierraProgramMap[activeCasmInstructionIndex]?.forEach((item, i) => {
+        const index = isSierraDebugMode
+          ? sierraSubStepIndex !== undefined
+            ? casmToSierraStatementsMap[activeCasmInstructionIndex][
+                sierraSubStepIndex
+              ]
+            : undefined
+          : casmToSierraStatementsMap[activeCasmInstructionIndex][i]
+
+        // if in sierra debugmode we dont need to add decorations for
+        // all sierra statements in current activeCasmInstructionIndex
+        // we need to add decorations just for the current substep sierra statement
+        if (isSierraDebugMode && i > 0) {
+          return
+        }
 
-        if (sierraStatementsToCairoInfo) {
-          sierraStatementsToCairoInfo[index]?.cairo_locations.map(
+        if (sierraStatementsToCairoInfo && index !== undefined) {
+          sierraStatementsToCairoInfo[index]?.cairo_locations.forEach(
             (cairoLocElem) => {
-              if (
-                isRangeVisible(cairoLocElem.start.line, cairoLocElem.end.line)
-              ) {
+              const isInsideVisibleRange = isRangeVisible(
+                cairoLocElem.start.line,
+                cairoLocElem.end.line,
+              )
+              if (isInsideVisibleRange) {
                 isHighlightOnScreen = true
               }
               const startLine: number = cairoLocElem.start.line + 1
               const endLine: number = cairoLocElem.end.line + 1
               const startCol: number = cairoLocElem.start.col + 1
               const endCol: number = cairoLocElem.end.col + 1
               if (monaco) {
-                multiplieDecorations.push({
+                multipleDecorations.push({
                   range: new monaco.Range(startLine, startCol, endLine, endCol),
                   options: { inlineClassName: 'bg-yellow-300 bg-opacity-40' },
                 })
               }
             },
           )
 
-          if (!isHighlightOnScreen && multiplieDecorations[0] && monaco) {
+          if (!isHighlightOnScreen && multipleDecorations[0] && monaco) {
             editorRef.current?.revealRangeInCenter(
               new monaco.Range(
-                multiplieDecorations[0].range.startLineNumber,
-                multiplieDecorations[0].range.startColumn,
-                multiplieDecorations[0].range.endLineNumber,
-                multiplieDecorations[0].range.endColumn,
+                multipleDecorations[0].range.startLineNumber,
+                multipleDecorations[0].range.startColumn,
+                multipleDecorations[0].range.endLineNumber,
+                multipleDecorations[0].range.endColumn,
               ),
             )
           }
         }
-      }) || []
-      const editor = editorRef.current as any
-      if (editor) {
-        if (cairoCode === compiledCairoCode) {
-          const newDecorationsIds = editor.deltaDecorations(
-            decorations,
-            multiplieDecorations,
-          )
-          setDecorations(newDecorationsIds)
-        } else {
-          const newDecorationsIds = editor.deltaDecorations(decorations, [])
-          setDecorations(newDecorationsIds)
-        }
-      }
+      })
+
+      highLightEditor(multipleDecorations)
     })
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeCasmInstructionIndex, codeType, cairoCode, compiledCairoCode])
+  }, [
+    activeCasmInstructionIndex,
+    codeType,
+    cairoCode,
+    compiledCairoCode,
+    debugMode,
+    sierraSubStepIndex,
+  ])
   const [showArgumentsHelper, setShowArgumentsHelper] = useState(false)
 
   const { isFullScreen } = useContext(AppUiContext)
@@ -405,9 +433,7 @@ const Editor = ({ readOnly = false }: Props) => {
                 <InstructionsTable
                   instructions={sierraStatements}
                   codeType={codeType}
-                  activeIndexes={
-                    casmToSierraProgramMap[activeCasmInstructionIndex] ?? []
-                  }
+                  activeIndexes={activeSierraIndexes}
                   errorIndexes={
                     casmToSierraProgramMap[errorCasmInstructionIndex] ?? []
                   }

components/Tracer/ExecutionStatus.tsx

@@ -1,14 +1,31 @@
+import { useContext, useId, useMemo } from 'react'
+
 import {
   RiArrowGoForwardLine,
   RiArrowGoBackLine,
   RiPlayCircleLine,
 } from '@remixicon/react'
 import { Priority, useRegisterActions } from 'kbar'
+import Select from 'react-select'
+
+import { CairoVMApiContext, ProgramDebugMode } from 'context/cairoVMApiContext'
 
 import { Button } from 'components/ui'
 
 import { TraceEntry } from '.'
 
+type DebugModeOption = {
+  value: ProgramDebugMode
+  label: ProgramDebugMode
+}
+
+const debugModeOptions: DebugModeOption[] = (
+  Object.keys(ProgramDebugMode) as Array<keyof typeof ProgramDebugMode>
+).map((mode) => ({
+  value: ProgramDebugMode[mode],
+  label: ProgramDebugMode[mode],
+}))
+
 const ExecutionStatus = ({
   onStepIn,
   onStepOut,
@@ -22,6 +39,16 @@ const ExecutionStatus = ({
   trace: TraceEntry[] | undefined
   executionTraceStepNumber: number
 }) => {
+  const { debugMode, setDebugMode } = useContext(CairoVMApiContext)
+
+  const debugModeValue: DebugModeOption = useMemo(
+    () => ({
+      value: debugMode,
+      label: debugMode,
+    }),
+    [debugMode],
+  )
+
   const actions = [
     {
       id: 'stepnext',
@@ -61,14 +88,27 @@ const ExecutionStatus = ({
     },
   ]
 
+  const onChangeDebugMode = (option: DebugModeOption | null) => {
+    if (option) {
+      setDebugMode(option.value)
+    }
+  }
+
   useRegisterActions(actions, [onStepIn, onStepOut, onContinueExecution])
 
   return (
     <div className="flex flex-grow justify-between items-center text-sm">
-      <div>
-        <span className="text-gray-600 dark:text-gray-400 text-sm">
-          Execution Trace
-        </span>
+      <div className="flex items-center">
+        <Select
+          onChange={onChangeDebugMode}
+          options={debugModeOptions}
+          value={debugModeValue}
+          isSearchable={false}
+          classNamePrefix="select"
+          className="[&_.select\_\_menu]:w-56 [&_.select\_\_menu]:z-20"
+          menuPlacement="auto"
+          instanceId={useId()}
+        />
       </div>
 
       <div className="flex flex-row items-center gap-4">