Skip to content

Commit

Permalink
initialise debugger dev
Browse files Browse the repository at this point in the history
  • Loading branch information
francisanthony17 committed Nov 29, 2023
1 parent d9ee965 commit 1b2b208
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 59 deletions.
141 changes: 83 additions & 58 deletions client/src/hooks/useBreakpoints.tsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,85 @@
import { useCallback } from "react";
import { call } from "components/script-editor/call";
import { get, keyBy, toLower as lower, startCase } from "lodash";
import memoizee from "memoizee";
import { TraceEventType } from "protocol";
import { useMemo } from "react";
import { UploadedTrace } from "slices/UIState";
import { useLayer } from "slices/layers";


export type Comparator = {
key: string;
apply: (value: number, reference: number) => boolean;
};

export type Breakpoint = {
key: string;
property?: string;
reference?: number;
condition?: Comparator;
active?: boolean;
type?: TraceEventType;
};

export type DebugLayerData = {
code?: string;
monotonicF?: boolean;
monotonicG?: boolean;
breakpoints?: Breakpoint[];
trace?: UploadedTrace;
};
export function useBreakpoints(key?: string) {
const { layer } = useLayer<DebugLayerData>(key);
const {monotonicF, monotonicG,breakpoints ,code,trace} = layer?.source??{}
// TODO:
return useMemo(() => {
const memo = keyBy(trace?.content?.events, "id");
return memoizee((step: number) => {
const event = trace?.content?.events?.[step];
if (event) {
try {
// Check monotonic f or g values
if (step) {
for (const p of [monotonicF && "f", monotonicG && "g"]) {
if (p && get(memo[`${event.pId}`], p) > get(event, p)) {
return { result: `Monotonicity violation on ${p}` };
}
}
}
// Check breakpoints in the breakpoints section
for (const {
active,
condition,
type,
property = "",
reference = 0,
} of breakpoints??[]) {
const isType = !type || type === event.type;
const match = condition?.apply?.(get(event, property), reference);
if (active && isType && match) {
return {
result: `${property} ${lower(
startCase(condition?.key)
)} ${reference}`,
};
}
}
// Check breakpoints in the script editor section
if (
call(code ?? "", "shouldBreak", [
step,
event,
trace?.content?.events?? [],
])
) {
return { result: "Script editor" };
}
} catch (e) {
return { error: `${e}` };
}
}
return { result: "" };
});
}, [code, trace?.content, breakpoints, monotonicF, monotonicG]);

export function useBreakpoints() {
//TODO:
// const [{ specimen }] = useSpecimen();
// const [{ code, breakpoints = [], monotonicF, monotonicG }] = useUIState();
// return useMemo(() => {
// const memo = keyBy(specimen?.eventList, "id");
// return memoize((step: number) => {
// const event = specimen?.eventList?.[step];
// if (event) {
// try {
// // Check monotonic f or g values
// if (step) {
// for (const p of [monotonicF && "f", monotonicG && "g"]) {
// if (p && get(memo[`${event.pId}`], p) > get(event, p)) {
// return { result: `Monotonicity violation on ${p}` };
// }
// }
// }
// // Check breakpoints in the breakpoints section
// for (const {
// active,
// condition,
// type,
// property = "",
// reference = 0,
// } of breakpoints) {
// const isType = !type || type === event.type;
// const match = condition?.apply?.(get(event, property), reference);
// if (active && isType && match) {
// return {
// result: `${property} ${lower(
// startCase(condition?.key)
// )} ${reference}`,
// };
// }
// }
// // Check breakpoints in the script editor section
// if (
// call(code ?? "", "shouldBreak", [
// step,
// event,
// specimen?.eventList ?? [],
// ])
// ) {
// return { result: "Script editor" };
// }
// } catch (e) {
// return { error: `${e}` };
// }
// }
// return { result: "" };
// });
// }, [code, specimen, breakpoints, monotonicF, monotonicG]);
return useCallback(
(_i: number) => ({ result: "", error: undefined, offset: 0 }),
[]
);
}
3 changes: 2 additions & 1 deletion client/src/layers/trace/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { colorsHex, getColorHex } from "components/renderer/colors";
import { parseString } from "components/renderer/parser/parseString";
import { useTraceParser } from "components/renderer/parser/parseTrace";
import { ParseTraceWorkerReturnType } from "components/renderer/parser/parseTraceSlave.worker";
import { DebugLayerData } from "hooks/useBreakpoints";
import { useEffectWhen } from "hooks/useEffectWhen";
import { LayerController, inferLayerName } from "layers";
import {
Expand Down Expand Up @@ -99,7 +100,7 @@ export type TraceLayerData = {
trace?: UploadedTrace;
parsedTrace?: ParseTraceWorkerReturnType;
onion?: "off" | "transparent" | "solid";
} & PlaybackLayerData;
} & PlaybackLayerData & DebugLayerData;

export type TraceLayer = Layer<TraceLayerData>;

Expand Down
21 changes: 21 additions & 0 deletions client/src/pages/DebugPage.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import { TabContext, TabList, TabPanel } from "@mui/lab";
import { Box, Tab, Typography as Type } from "@mui/material";
import {
LayersOutlined as LayersIcon,
SortOutlined as StepsIcon,
} from "@mui/icons-material";
import { delay, map } from "lodash";
import { Flex } from "components/generic/Flex";
import { Space } from "components/generic/Space";
import { Switch } from "components/generic/Switch";
Expand All @@ -9,11 +14,16 @@ import { Page } from "pages/Page";
import { ReactNode, useState } from "react";
import { useUIState } from "slices/UIState";
import { BreakpointListEditor } from "../components/breakpoint-editor/BreakpointListEditor";
import { useLayer } from "slices/layers";
import { FeaturePicker } from "components/app-bar/FeaturePicker";
import { inferLayerName, layerHandlers } from "layers/Layer";


export function DebugPage() {
const { controls, onChange, state } = useViewTreeContext();
const [{ monotonicF, monotonicG }, setUIState] = useUIState();
const [tab, setTab] = useState("standard");
const { key, setKey, layers, layer } = useLayer();
function renderHeading(label: ReactNode) {
return (
<Type variant="overline" color="text.secondary">
Expand All @@ -25,6 +35,17 @@ export function DebugPage() {
<TabContext value={tab}>
<Page onChange={onChange} stack={state}>
<Page.Options>
<FeaturePicker
icon={<LayersIcon />}
label="Layer"
value={key}
items={map(layers, (l) => ({
id: l.key,
name: inferLayerName(l),
}))}
onChange={setKey}
showArrow
/>
<TabList onChange={(_, v) => setTab(v)}>
<Tab label="Standard" value="standard" />
<Tab label="Advanced" value="advanced" />
Expand Down

0 comments on commit 1b2b208

Please sign in to comment.