Skip to content
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

Jump to bottom

New debugInfo and console section #136

Closed
wants to merge 2 commits into from
Closed

New debugInfo and console section #136

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
c622fc0
New debugInfo and console section
LukaszMMazur Apr 6, 2024
331e5d2
Linting
LukaszMMazur Apr 6, 2024
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
5 changes: 4 additions & 1 deletion components/Editor/Console.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,11 @@ const Console = () => {
return (
<div
ref={container}
className="px-4 pb-2 leading-5 font-mono text-tiny text-gray-400 dark:text-gray-500"
className="px-4 py-4 leading-5 font-mono text-tiny text-gray-400 dark:text-gray-500"
>
<div className="text-gray-500 dark:text-gray-400 uppercase text-[11px]">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of text-[11px] lets use font-medium to keep consistency with titles in the debug info section

Console
</div>
{consoleLog.map((log, index) => (
<pre key={toKeyIndex('line', index)}>
{log.type === LogType.Error && (
Expand Down
2 changes: 1 addition & 1 deletion components/Editor/EditorFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function EditorFooter() {
return (
<div
className={cn(
'px-5 bg-gray-100 dark:bg-black-700 border-t border-gray-200 dark:border-black-500 text-xs h-[42px] items-center text-gray-600 ml-auto flex justify-between',
'px-4 bg-gray-100 dark:bg-black-700 border-t border-gray-200 dark:border-black-500 text-xs h-[42px] items-center text-gray-600 ml-auto flex justify-between',
!isFullScreen && 'rounded-b-lg',
)}
>
Expand Down
2 changes: 1 addition & 1 deletion components/Editor/ExtraColumn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const ExtraColumn = ({
} = useContext(CairoVMApiContext)

return (
<div className="w-full md:w-1/3 flex flex-col">
<div className="w-full md:w-1/2 flex flex-col">
<div className="border-b border-gray-200 dark:border-black-500 flex items-center pl-6 pr-2 h-14 md:border-r flex-none">
<Header
codeType={codeType}
Expand Down
164 changes: 88 additions & 76 deletions components/Editor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import { AppUiContext, CodeType, LogType } from '../../context/appUiContext'

import { ArgumentsHelperModal } from './ArgumentsHelperModal'
import { registerCairoLanguageSupport } from './cairoLangConfig'
import Console from './Console'
import EditorControls from './EditorControls'
import EditorFooter from './EditorFooter'
import ExtraColumn from './ExtraColumn'
Expand Down Expand Up @@ -317,90 +318,101 @@ const Editor = ({ readOnly = false }: Props) => {
>
<div
className={cn(
'w-full md:w-1/2 flex flex-col',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the reason for this change on line 320? It will break the app on mobile screen..

isThreeColumnLayout && 'md:w-1/3',
'w-1/2 flex flex-col',
isThreeColumnLayout && 'md:w-2/3',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If isThreeColumtLayout is true, the md:w-1/2 class should be removed.

)}
>
<div className="border-b border-gray-200 dark:border-black-500 flex items-center pl-6 pr-2 h-14 flex-none md:border-r justify-between">
<Header
codeType={codeType}
onCodeTypeChange={({ value }) => setCodeType(value)}
withLogo={isFullScreen}
/>
</div>
<div className="flex" style={{ height: 'calc(100% - 22vh)' }}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we setting the height here? Can it be removed? We should be able to just use grow to avoid setting any constant values here.

<div
className={cn(
'w-full flex flex-col',
isThreeColumnLayout && 'md:w-1/2',
)}
>
<div className="border-b border-gray-200 dark:border-black-500 flex items-center pl-4 pr-2 h-14 flex-none md:border-r justify-between">
<Header
codeType={codeType}
onCodeTypeChange={({ value }) => setCodeType(value)}
withLogo={isFullScreen}
/>
</div>

<div className="relative pane grow pane-light overflow-auto md:border-r bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500">
{codeType === CodeType.CASM ? (
<InstructionsTable
instructions={casmInstructions}
codeType={codeType}
activeIndexes={[activeCasmInstructionIndex]}
errorIndexes={[errorCasmInstructionIndex]}
variables={{}}
/>
) : codeType === CodeType.Sierra ? (
<InstructionsTable
instructions={sierraStatements}
codeType={codeType}
activeIndexes={
casmToSierraProgramMap[activeCasmInstructionIndex] ?? []
}
errorIndexes={
casmToSierraProgramMap[errorCasmInstructionIndex] ?? []
<div className="relative pane grow pane-light overflow-auto md:border-r bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500">
{codeType === CodeType.CASM ? (
<InstructionsTable
instructions={casmInstructions}
codeType={codeType}
activeIndexes={[activeCasmInstructionIndex]}
errorIndexes={[errorCasmInstructionIndex]}
variables={{}}
/>
) : codeType === CodeType.Sierra ? (
<InstructionsTable
instructions={sierraStatements}
codeType={codeType}
activeIndexes={
casmToSierraProgramMap[activeCasmInstructionIndex] ?? []
}
errorIndexes={
casmToSierraProgramMap[errorCasmInstructionIndex] ?? []
}
variables={currentSierraVariables || {}}
/>
) : (
<div className="h-full overflow-auto pane pane-light">
<MonacoEditor
// @ts-ignore: SCEditor is not TS-friendly

onMount={handleEditorDidMount}
options={{
minimap: { enabled: false },
wordBreak: 'keepAll',
wordWrap: 'on',
readOnly: readOnly,
}}
value={codeType === CodeType.Cairo ? cairoCode : ''}
onChange={handleCairoCodeChange}
language={'cairo'}
className={cn(
'code-editor whitespace-pre-wrap overflow-hidden',
{
'with-numbers': !isBytecode,
},
)}
/>
</div>
)}
</div>

<EditorControls
isCompileDisabled={isCompileDisabled}
programArguments={programArguments}
areProgramArgumentsValid={areProgramArgumentsValid}
onCopyPermalink={handleCopyPermalink}
onProgramArgumentsUpdate={handleProgramArgumentsUpdate}
onCompileRun={handleCompileRun}
onShowArgumentsHelper={() => setShowArgumentsHelper(true)}
handleChangeExampleOption={(newExample) =>
newExample !== null
? setExampleOption(newExample.value)
: setExampleOption(0)
}
variables={currentSierraVariables || {}}
/>
) : (
<div className="h-full overflow-auto pane pane-light">
<MonacoEditor
// @ts-ignore: SCEditor is not TS-friendly

onMount={handleEditorDidMount}
options={{
minimap: { enabled: false },
wordBreak: 'keepAll',
wordWrap: 'on',
readOnly: readOnly,
}}
value={codeType === CodeType.Cairo ? cairoCode : ''}
onChange={handleCairoCodeChange}
language={'cairo'}
className={cn(
'code-editor whitespace-pre-wrap overflow-hidden',
{
'with-numbers': !isBytecode,
},
)}
/>
</div>
</div>

{isThreeColumnLayout && (
<ExtraColumn
cairoCode={cairoCode}
handleCairoCodeChange={handleCairoCodeChange}
handleEditorDidMount={handleEditorDidMount}
isBytecode={isBytecode}
/>
)}
</div>

<EditorControls
isCompileDisabled={isCompileDisabled}
programArguments={programArguments}
areProgramArgumentsValid={areProgramArgumentsValid}
onCopyPermalink={handleCopyPermalink}
onProgramArgumentsUpdate={handleProgramArgumentsUpdate}
onCompileRun={handleCompileRun}
onShowArgumentsHelper={() => setShowArgumentsHelper(true)}
handleChangeExampleOption={(newExample) =>
newExample !== null
? setExampleOption(newExample.value)
: setExampleOption(0)
}
/>
<div className="h-[22vh] w-full overflow-auto border-t border-r border-gray-200 dark:border-black-500 pane pane-light">
<Console />
</div>
</div>

{isThreeColumnLayout && (
<ExtraColumn
cairoCode={cairoCode}
handleCairoCodeChange={handleCairoCodeChange}
handleEditorDidMount={handleEditorDidMount}
isBytecode={isBytecode}
/>
)}

<div
className={cn(
'w-full md:w-1/2 flex flex-col justify-between',
Expand Down
106 changes: 12 additions & 94 deletions components/Tracer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,6 @@
import {
useContext,
useEffect,
useState,
useRef,
useReducer,
memo,
} from 'react'
import { useContext, useEffect, useRef, useReducer, memo } from 'react'

import cn from 'classnames'
import { Priority, useRegisterActions } from 'kbar'
import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso'

import {
Expand All @@ -17,8 +9,6 @@ import {
ProgramExecutionState,
} from 'context/cairoVMApiContext'

import Console from '../Editor/Console'

import ExecutionStatus from './ExecutionStatus'

export interface Instruction {
Expand Down Expand Up @@ -59,11 +49,6 @@ export interface TracerData {
entryToSierraVarsMap: { [key: string]: SierraVariables }
}

enum IConsoleTab {
Console = 'debug-console',
DebugInfo = 'output',
}

export const Tracer = () => {
const {
executionState,
Expand All @@ -84,10 +69,6 @@ export const Tracer = () => {
: null
const currentCallstackEntry = tracerData?.callstack[executionTraceStepNumber]

const [selectedConsoleTab, setSelectedConsoleTab] = useState<IConsoleTab>(
IConsoleTab.Console,
)

const [currentFocus, setCurrentFocus] = useReducer(
(state: any, newIdx: number) => {
state = {
Expand Down Expand Up @@ -154,35 +135,6 @@ export const Tracer = () => {
}
}

const actions = [
{
id: 'debugInfo',
name: 'Debug Info',
shortcut: ['d'],
keywords: 'Debug info',
section: 'Execution',
perform: () => {
setSelectedConsoleTab(IConsoleTab.DebugInfo)
},
subtitle: 'Switch to Debug Info',
priority: Priority.HIGH,
},
{
id: 'console',
name: 'Console',
shortcut: ['e'],
keywords: 'Console',
section: 'Execution',
perform: () => {
setSelectedConsoleTab(IConsoleTab.Console)
},
subtitle: 'Switch to Console',
priority: Priority.HIGH,
},
]

useRegisterActions(actions, [setSelectedConsoleTab])

return (
<>
<div className="border-t md:border-t-0 border-b border-gray-200 dark:border-black-500 flex items-center pl-4 pr-6 h-14 flex-none">
Expand Down Expand Up @@ -216,49 +168,15 @@ export const Tracer = () => {
</div>
)}

<div className="border-gray-200 border-t dark:border-black-500 flex-none overflow-hidden mb-[10px] h-[22vh]">
<div className="px-4">
<nav className="-mb-px uppercase flex space-x-8" aria-label="Tabs">
<button
className={`hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin ${cn(
{
'border-indigo-600 text-gray-700':
selectedConsoleTab === IConsoleTab.DebugInfo,
'border-transparent text-gray-500':
selectedConsoleTab !== IConsoleTab.DebugInfo,
},
)}`}
onClick={() => setSelectedConsoleTab(IConsoleTab.DebugInfo)}
>
Debug Info [d]
</button>
<button
onClick={() => setSelectedConsoleTab(IConsoleTab.Console)}
className={`hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin ${cn(
{
'border-indigo-600 text-gray-700':
selectedConsoleTab === IConsoleTab.Console,
'border-transparent text-gray-500':
selectedConsoleTab !== IConsoleTab.Console,
},
)}`}
>
Console [e]
</button>
</nav>
</div>
<div className="pane pane-light overflow-auto pb-4 grow h-[90%]">
{selectedConsoleTab === IConsoleTab.Console && <Console />}

{selectedConsoleTab === IConsoleTab.DebugInfo && (
<DebugInfoTab
trace={trace}
currentTraceEntry={currentTraceEntry}
executionTraceStepNumber={executionTraceStepNumber}
currentCallstackEntry={currentCallstackEntry}
handleRegisterPointerClick={handleRegisterPointerClick}
/>
)}
<div className="border-gray-200 border-t dark:border-black-500 flex-none overflow-hidden h-[22vh]">
<div className="pane pane-light overflow-auto pb-4 grow h-full">
<DebugInfoTab
trace={trace}
currentTraceEntry={currentTraceEntry}
executionTraceStepNumber={executionTraceStepNumber}
currentCallstackEntry={currentCallstackEntry}
handleRegisterPointerClick={handleRegisterPointerClick}
/>
</div>
</div>
</>
Expand All @@ -279,7 +197,7 @@ function DebugInfoTab({
handleRegisterPointerClick: (num: number) => void
}) {
return (
<div className="px-4 pb-4">
<div className="px-4 py-4">
{trace === undefined ? (
<p className="text-mono text-tiny text-gray-400 dark:text-gray-500">
Run the app to get debug info
Expand Down Expand Up @@ -337,7 +255,7 @@ function DebugInfoTab({
<dd className="font-mono mb-2">
<table className="w-full font-mono text-tiny border border-gray-300 dark:border-black-500">
<thead>
<tr className="text-left sticky top-0 bg-gray-50 dark:bg-black-600 text-gray-400 dark:text-gray-600 border-b border-gray-300 dark:border-black-500">
<tr className="text-left sticky top-0 bg-gray-50 dark:bg-black-600 text-gray-400 dark:text-gray-600 border-b border-gray-300 dark:border-black-500 z-10">
<th className="py-1 px-2 font-thin">FP</th>
<th className="py-1 px-2 font-thin">CALL PC</th>
<th className="py-1 px-2 font-thin">RET PC</th>
Expand Down
Loading