From 137f04b2d4079b5ccbfa8ec98358c54290639c9d Mon Sep 17 00:00:00 2001
From: BlackStarkGoku <165695008+BlackStarkGoku@users.noreply.github.com>
Date: Fri, 12 Apr 2024 01:33:28 +0200
Subject: [PATCH 1/2] chore: Scroll on highlight cairo segment when moving
 through the execution trace

---
 components/Editor/index.tsx | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
index 89be2ef..edebc0c 100644
--- a/components/Editor/index.tsx
+++ b/components/Editor/index.tsx
@@ -12,7 +12,7 @@ import { Editor as MonacoEditor, useMonaco, Monaco } from '@monaco-editor/react'
 import cn from 'classnames'
 import copy from 'copy-to-clipboard'
 import { Priority, useRegisterActions } from 'kbar'
-import { editor } from 'monaco-editor'
+import { editor, IRange } from 'monaco-editor'
 import { useRouter } from 'next/router'
 import { useTheme } from 'next-themes'
 
@@ -125,6 +125,18 @@ const Editor = ({ readOnly = false }: Props) => {
               const startCol: number = cairoLocElem.start.col + 1
               const endCol: number = cairoLocElem.end.col + 1
               if (monaco) {
+                let isHighlightOnScreen = false
+                multiplieDecorations.forEach((decoration) => {
+                  if (isRangeVisible(decoration.range as IRange)) {
+                    isHighlightOnScreen = true
+                    return
+                  }
+                })
+                if (!isHighlightOnScreen) {
+                  editorRef.current?.revealRangeInCenter(
+                    new monaco.Range(startLine, startCol, endLine, endCol),
+                  )
+                }
                 multiplieDecorations.push({
                   range: new monaco.Range(startLine, startCol, endLine, endCol),
                   options: { inlineClassName: 'bg-yellow-300 bg-opacity-40' },
@@ -214,6 +226,19 @@ const Editor = ({ readOnly = false }: Props) => {
     executionPanicMessage,
   ])
 
+  const isRangeVisible = (range: IRange) => {
+    const editor = editorRef.current
+    if (editor) {
+      const visibleRanges = editor.getVisibleRanges()
+      return visibleRanges.some(
+        (visibleRange) =>
+          visibleRange.startLineNumber <= range.endLineNumber &&
+          visibleRange.endLineNumber >= range.startLineNumber,
+      )
+    }
+    return false
+  }
+
   const handleCairoCodeChange = (value: string | undefined) => {
     if (value) {
       setCairoCode(value)

From 11cda1208bbd56c0b9177e89b2d4270e1829fb79 Mon Sep 17 00:00:00 2001
From: BlackStarkGoku <165695008+BlackStarkGoku@users.noreply.github.com>
Date: Sun, 14 Apr 2024 14:51:41 +0200
Subject: [PATCH 2/2] chore: does not scroll when highlight is on screen

---
 components/Editor/index.tsx | 44 +++++++++++++++++++++++--------------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
index edebc0c..c1136cb 100644
--- a/components/Editor/index.tsx
+++ b/components/Editor/index.tsx
@@ -12,7 +12,7 @@ import { Editor as MonacoEditor, useMonaco, Monaco } from '@monaco-editor/react'
 import cn from 'classnames'
 import copy from 'copy-to-clipboard'
 import { Priority, useRegisterActions } from 'kbar'
-import { editor, IRange } from 'monaco-editor'
+import { editor } from 'monaco-editor'
 import { useRouter } from 'next/router'
 import { useTheme } from 'next-themes'
 
@@ -107,36 +107,35 @@ 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
               const endCol: number = cairoLocElem.end.col + 1
               if (monaco) {
-                let isHighlightOnScreen = false
-                multiplieDecorations.forEach((decoration) => {
-                  if (isRangeVisible(decoration.range as IRange)) {
-                    isHighlightOnScreen = true
-                    return
-                  }
-                })
-                if (!isHighlightOnScreen) {
-                  editorRef.current?.revealRangeInCenter(
-                    new monaco.Range(startLine, startCol, endLine, endCol),
-                  )
-                }
                 multiplieDecorations.push({
                   range: new monaco.Range(startLine, startCol, endLine, endCol),
                   options: { inlineClassName: 'bg-yellow-300 bg-opacity-40' },
@@ -144,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
@@ -226,14 +236,14 @@ const Editor = ({ readOnly = false }: Props) => {
     executionPanicMessage,
   ])
 
-  const isRangeVisible = (range: IRange) => {
+  const isRangeVisible = (startLine: number, endLine: number) => {
     const editor = editorRef.current
     if (editor) {
       const visibleRanges = editor.getVisibleRanges()
       return visibleRanges.some(
         (visibleRange) =>
-          visibleRange.startLineNumber <= range.endLineNumber &&
-          visibleRange.endLineNumber >= range.startLineNumber,
+          visibleRange.startLineNumber <= endLine &&
+          visibleRange.endLineNumber >= startLine,
       )
     }
     return false