From a4ea8d2d1343bbf403b4502d8382dd0cb8000566 Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Wed, 19 Jul 2023 14:56:51 -0400 Subject: [PATCH 1/3] use global state directly in components rather than passing them as props --- .../components/composed/Debugger/Stack.tsx | 16 +++++++++++---- .../composed/Debugger/Variables.tsx | 20 ++++++++++--------- .../components/composed/Debugger/index.tsx | 4 ++-- 3 files changed, 25 insertions(+), 15 deletions(-) diff --git a/packages/dashboard/src/components/composed/Debugger/Stack.tsx b/packages/dashboard/src/components/composed/Debugger/Stack.tsx index e08823092aa..5e6a1b1d932 100644 --- a/packages/dashboard/src/components/composed/Debugger/Stack.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Stack.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; -import type { Session } from "src/components/composed/Debugger/utils"; import { createStyles, Flex } from "@mantine/core"; +import { useDash } from "src/hooks"; const useStyles = createStyles(theme => ({ sectionHeader: { @@ -41,17 +41,25 @@ const useStyles = createStyles(theme => ({ })); type StackArgs = { - session: Session; currentStep: string; }; -function Stack({ session, currentStep }: StackArgs): JSX.Element | null { +function Stack({ currentStep }: StackArgs): JSX.Element | null { const { classes } = useStyles(); + const { + state: { + debugger: { session } + } + } = useDash()!; + const [stackReport, setStackReport] = useState(null); // when the debugger step changes, update variables useEffect(() => { async function getStack() { - const report = session.view(session.selectors.stacktrace.current.report); + // we don't render this component until session is defined + const report = session!.view( + session!.selectors.stacktrace.current.report + ); if (!report) return; // we need to display this information in the reverse order report.reverse(); diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx index 7b7141064f1..87def264dde 100644 --- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx @@ -1,8 +1,8 @@ import { useEffect, useState } from "react"; -import type { Session } from "src/components/composed/Debugger/utils"; import * as CodecComponents from "@truffle/codec-components/react"; import "@truffle/codec-components/react-styles"; import { createStyles, Flex } from "@mantine/core"; +import { useDash } from "src/hooks"; const useStyles = createStyles(theme => ({ sectionHeader: { @@ -59,24 +59,26 @@ const useStyles = createStyles(theme => ({ })); type VariablesArgs = { - session: Session; currentStep: string; }; -function Variables({ - session, - currentStep -}: VariablesArgs): JSX.Element | null { +function Variables({ currentStep }: VariablesArgs): JSX.Element | null { const { classes } = useStyles(); + const { + state: { + debugger: { session } + } + } = useDash()!; const [variables, setVariables] = useState(null); // when the debugger step changes, update variables useEffect(() => { async function getVariables() { - const sections = session.view( - session.selectors.data.current.identifiers.sections + // we don't render this component until session is defined + const sections = session!.view( + session!.selectors.data.current.identifiers.sections ); - const vars = await session.variables(); + const vars = await session!.variables(); if (!vars || Object.keys(vars).length === 0) return; const variableValues: { [key: string]: any } = {}; diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx index 182ddfb2bc8..29042cb201b 100644 --- a/packages/dashboard/src/components/composed/Debugger/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/index.tsx @@ -262,13 +262,13 @@ function Debugger(): JSX.Element { /> - + - + From 4be9fb61aa7dcbdbb1704bfa38df66709cff381f Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Wed, 19 Jul 2023 16:31:12 -0400 Subject: [PATCH 2/3] get rid of currentStep variable --- .../dashboard/src/components/composed/Debugger/Stack.tsx | 8 ++------ .../src/components/composed/Debugger/Variables.tsx | 8 ++------ .../dashboard/src/components/composed/Debugger/index.tsx | 8 +++----- 3 files changed, 7 insertions(+), 17 deletions(-) diff --git a/packages/dashboard/src/components/composed/Debugger/Stack.tsx b/packages/dashboard/src/components/composed/Debugger/Stack.tsx index 5e6a1b1d932..2a0f0191d11 100644 --- a/packages/dashboard/src/components/composed/Debugger/Stack.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Stack.tsx @@ -40,11 +40,7 @@ const useStyles = createStyles(theme => ({ } })); -type StackArgs = { - currentStep: string; -}; - -function Stack({ currentStep }: StackArgs): JSX.Element | null { +function Stack(): JSX.Element | null { const { classes } = useStyles(); const { state: { @@ -66,7 +62,7 @@ function Stack({ currentStep }: StackArgs): JSX.Element | null { setStackReport(report); } getStack(); - }, [currentStep, session]); + }, [session!.view(session!.selectors.trace.index)]); const output = stackReport ? stackReport.map((reportItem: any, index: number) => { diff --git a/packages/dashboard/src/components/composed/Debugger/Variables.tsx b/packages/dashboard/src/components/composed/Debugger/Variables.tsx index 87def264dde..769400cb8d8 100644 --- a/packages/dashboard/src/components/composed/Debugger/Variables.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Variables.tsx @@ -58,11 +58,7 @@ const useStyles = createStyles(theme => ({ } })); -type VariablesArgs = { - currentStep: string; -}; - -function Variables({ currentStep }: VariablesArgs): JSX.Element | null { +function Variables(): JSX.Element | null { const { classes } = useStyles(); const { state: { @@ -99,7 +95,7 @@ function Variables({ currentStep }: VariablesArgs): JSX.Element | null { } getVariables(); - }, [currentStep, session, classes.variablesTypes, classes.variablesSection]); + }, [session!.view(session!.selectors.trace.index)]); const output = variables ? Object.keys(variables).map(sectionName => { diff --git a/packages/dashboard/src/components/composed/Debugger/index.tsx b/packages/dashboard/src/components/composed/Debugger/index.tsx index 29042cb201b..a7cb6acc1eb 100644 --- a/packages/dashboard/src/components/composed/Debugger/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/index.tsx @@ -113,7 +113,6 @@ function Debugger(): JSX.Element { traceIndex: -1 }; - let currentStep; // wait until the debugger has been initialized and then get source info if (session) { currentSourceRange = getCurrentSourceRange(session); @@ -129,7 +128,6 @@ function Debugger(): JSX.Element { setCurrentSourceId(currentContractAddress); } } - currentStep = session.view(session.selectors.trace.index); } const scrollToLine = ({ @@ -206,7 +204,7 @@ function Debugger(): JSX.Element { const { source, start } = currentSourceRange!; scrollToLine({ sourceId: source.id, line: start.line }); } - }, [currentStep, currentSourceId]); + }, [session!.view(session!.selectors.trace.index), currentSourceId]); // check whether we need to scroll to a breakpoint // this is to ensure the source has fully rendered before scrolling @@ -262,13 +260,13 @@ function Debugger(): JSX.Element { /> - + - + From b95ef79d7f6233ff76f93be6c31d0752422b5e26 Mon Sep 17 00:00:00 2001 From: eggplantzzz Date: Thu, 20 Jul 2023 11:31:17 -0400 Subject: [PATCH 3/3] move source range data into Sources component and make it state --- .../composed/Debugger/Sources/index.tsx | 47 ++++++++++++++++--- .../components/composed/Debugger/index.tsx | 43 ++--------------- 2 files changed, 44 insertions(+), 46 deletions(-) diff --git a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx index 9d1238d8c78..856d658a7e0 100644 --- a/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx +++ b/packages/dashboard/src/components/composed/Debugger/Sources/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from "react"; +import { useEffect, useRef, useState } from "react"; import { basename } from "path"; import { createStyles, Tabs } from "@mantine/core"; import Source from "src/components/composed/Debugger/Sources/Source"; @@ -9,6 +9,7 @@ import type { Source as SourceType, UnknownAddress } from "src/components/composed/Debugger/utils"; +import { getCurrentSourceRange } from "src/components/composed/Debugger/utils"; const useStyles = createStyles((theme, _params, _getRef) => ({ maxHeight: { @@ -67,25 +68,32 @@ interface SourcesProps { session: Session; sessionUpdated: any; sources: SourceType[]; - currentSourceRange: SourceRange; unknownAddresses: UnknownAddress[] | null; currentSourceId: string | undefined; setCurrentSourceId: (sourceId: string) => void; + scrollToLine: (arg: { sourceId: string; line: number }) => void; } function Sources({ sources, session, sessionUpdated, - currentSourceRange, unknownAddresses, currentSourceId, - setCurrentSourceId + setCurrentSourceId, + scrollToLine }: SourcesProps): JSX.Element { const { classes } = useStyles(); const currentSourceIdRef = useRef(currentSourceId); currentSourceIdRef.current = currentSourceId; + const [currentSourceRange, setCurrentSourceRange] = useState< + SourceRange | { traceIndex: number; source: any } + >({ + traceIndex: -1, + source: {} + }); + // display the first source when currentSourceRange is `undefined` useEffect(() => { if (currentSourceId === undefined) { @@ -94,7 +102,7 @@ function Sources({ }, [sources, currentSourceId, setCurrentSourceId]); useEffect(() => { - const sessionSourceId = currentSourceRange.source.id; + const sessionSourceId = currentSourceRange.source!.id; if (sessionSourceId !== currentSourceIdRef.current) { setCurrentSourceId(sessionSourceId); } @@ -105,10 +113,37 @@ function Sources({ setCurrentSourceId ]); + useEffect(() => { + setCurrentSourceRange(getCurrentSourceRange(session)); + // if the starting source is unknown, we may get `undefined` in the source + // range - in that case we'll initialize it manually from the stacktrace + if (!currentSourceRange.source?.id && !currentSourceId) { + const currentContractAddress = session.view( + session.selectors.stacktrace.current.report + )[0].address; + // when the contract is "unknown", the source id will be the address + // we need this if check so that no loop occurs when the value is falsy + if (currentContractAddress) { + setCurrentSourceId(currentContractAddress); + } + } + }, [session.view(session.selectors.trace.index)]); + + const isSourceRange = (item: any): item is SourceRange => { + return item.source.id !== undefined; + }; + + useEffect(() => { + if (isSourceRange(currentSourceRange)) { + const { source, start } = currentSourceRange!; + scrollToLine({ sourceId: source.id, line: start.line }); + } + }, [session!.view(session!.selectors.trace.index), currentSourceId]); + const unknownSourcesExist = unknownAddresses && unknownAddresses.length > 0; let sourcesContent, unknownSourcesContent; - if (currentSourceId !== undefined) { + if (isSourceRange(currentSourceRange) && currentSourceId !== undefined) { sourcesContent = sources.map((source: SourceType) => ( ({ @@ -109,27 +105,6 @@ function Debugger(): JSX.Element { undefined ); - let currentSourceRange: SourceRange | Partial = { - traceIndex: -1 - }; - - // wait until the debugger has been initialized and then get source info - if (session) { - currentSourceRange = getCurrentSourceRange(session); - // if the starting source is unknown, we may get `undefined` in the source - // range - in that case we'll initialize it manually from the stacktrace - if (!currentSourceRange.source?.id && !currentSourceId) { - const currentContractAddress = session.view( - session.selectors.stacktrace.current.report - )[0].address; - // when the contract is "unknown", the source id will be the address - // we need this if check so that no loop occurs when the value is falsy - if (currentContractAddress) { - setCurrentSourceId(currentContractAddress); - } - } - } - const scrollToLine = ({ sourceId, line @@ -199,13 +174,6 @@ function Debugger(): JSX.Element { } }; - useEffect(() => { - if (isSourceRange(currentSourceRange) && currentSourceRange.source.id) { - const { source, start } = currentSourceRange!; - scrollToLine({ sourceId: source.id, line: start.line }); - } - }, [session!.view(session!.selectors.trace.index), currentSourceId]); - // check whether we need to scroll to a breakpoint // this is to ensure the source has fully rendered before scrolling useEffect(() => { @@ -231,13 +199,8 @@ function Debugger(): JSX.Element { }); }; - const isSourceRange = (item: any): item is SourceRange => { - // when source exists, that means it should be a full SourceRange - return item.source !== undefined; - }; - let content; - if (session && sources && isSourceRange(currentSourceRange)) { + if (session && sources) { content = (