Merge pull request #146 from BlackStarkGoku/scroll_execution_trace

chore: Scroll on highlight cairo segment when moving through the exec…
walnuthq · Apr 15, 2024 · 66eca55 · 66eca55
2 parents bfd5a9e + 11cda12
commit 66eca55
Showing 1 changed file with 36 additions and 1 deletion.
diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
@@ -107,19 +107,30 @@ const Editor = ({ readOnly = false }: Props) => {
     inlineClassName: string
   }
   interface Decoration {
-    range: {}
+    range: {
+      startLineNumber: number
+      startColumn: number
+      endLineNumber: number
+      endColumn: number
+    }
     options: DecorationOptions
   }
 
   useEffect(() => {
     setTimeout(() => {
       const multiplieDecorations: Decoration[] = []
+      let isHighlightOnScreen = false
       casmToSierraProgramMap[activeCasmInstructionIndex]?.map((item, i) => {
         const index = casmToSierraStatementsMap[activeCasmInstructionIndex][i]
 
         if (sierraStatementsToCairoInfo) {
           sierraStatementsToCairoInfo[index]?.cairo_locations.map(
             (cairoLocElem) => {
+              if (
+                isRangeVisible(cairoLocElem.start.line, cairoLocElem.end.line)
+              ) {
+                isHighlightOnScreen = true
+              }
               const startLine: number = cairoLocElem.start.line + 1
               const endLine: number = cairoLocElem.end.line + 1
               const startCol: number = cairoLocElem.start.col + 1
@@ -132,6 +143,17 @@ const Editor = ({ readOnly = false }: Props) => {
               }
             },
           )
+
+          if (!isHighlightOnScreen && multiplieDecorations[0] && monaco) {
+            editorRef.current?.revealRangeInCenter(
+              new monaco.Range(
+                multiplieDecorations[0].range.startLineNumber,
+                multiplieDecorations[0].range.startColumn,
+                multiplieDecorations[0].range.endLineNumber,
+                multiplieDecorations[0].range.endColumn,
+              ),
+            )
+          }
         }
       }) || []
       const editor = editorRef.current as any
@@ -214,6 +236,19 @@ const Editor = ({ readOnly = false }: Props) => {
     executionPanicMessage,
   ])
 
+  const isRangeVisible = (startLine: number, endLine: number) => {
+    const editor = editorRef.current
+    if (editor) {
+      const visibleRanges = editor.getVisibleRanges()
+      return visibleRanges.some(
+        (visibleRange) =>
+          visibleRange.startLineNumber <= endLine &&
+          visibleRange.endLineNumber >= startLine,
+      )
+    }
+    return false
+  }
+
   const handleCairoCodeChange = (value: string | undefined) => {
     if (value) {
       setCairoCode(value)