Fix ts errors

client/src/components/app-bar/Playback.tsx

@@ -1,13 +1,13 @@
-import { range, trimEnd } from "lodash";
-import { useRaf } from "react-use";
-import { ReactNode, useCallback, useEffect } from "react";
-import { IconButtonWithTooltip as Button } from "components/generic/IconButtonWithTooltip";
-import { Label } from "components/generic/Label";
-import { useSnackbar } from "components/generic/Snackbar";
-import { useBreakpoints } from "hooks/useBreakpoints";
-import { usePlaybackState } from "hooks/usePlaybackState";
-import { useSettings } from "slices/settings";
-import { Layer, UploadedTrace } from "slices/UIState";
+import { range, trimEnd } from "lodash";
+import { useRaf } from "react-use";
+import { ReactNode, useCallback, useEffect } from "react";
+import { IconButtonWithTooltip as Button } from "components/generic/IconButtonWithTooltip";
+import { Label } from "components/generic/Label";
+import { useSnackbar } from "components/generic/Snackbar";
+import { useBreakpoints } from "hooks/useBreakpoints";
+import { usePlaybackState } from "hooks/usePlaybackState";
+import { useSettings } from "slices/settings";
+import { Layer, UploadedTrace } from "slices/UIState";
 import {
   SkipNextOutlined as ForwardIcon,
   PauseOutlined as PauseIcon,
@@ -16,16 +16,6 @@ import {
   StopOutlined as StopIcon,
 } from "@mui/icons-material";
 
-
-
-
-
-
-
-
-
-
-
 function cancellable<T = void>(f: () => Promise<T>, g: (result: T) => void) {
   let cancelled = false;
   requestAnimationFrame(async () => {
@@ -80,16 +70,16 @@ export function Playback({
                 const r = shouldBreak(step + i);
                 if (r.result || r.error) return { ...r, offset: i };
               }
-              return { result: "", offset: 0 };
+              return { result: "", offset: 0, error: undefined };
             },
             ({ result, offset, error }) => {
               if (!error) {
                 if (result) {
-                  notify(`Breakpoint hit: ${result}.`, offset);
+                  notify(`Breakpoint hit: ${result}.`, `${offset}`);
                   pause(offset);
                 } else tick(playbackRate);
               } else {
-                notify(`${trimEnd(error, ".")}.`, offset);
+                notify(`${trimEnd(error, ".")}.`, `${offset}`);
                 pause();
               }
             }
@@ -145,4 +135,4 @@ export function Playback({
       />
     </>
   );
-}
+}

client/src/components/breakpoint-editor/BreakpointListEditor.tsx

@@ -1,23 +1,20 @@
-import { Box } from "@mui/material";
-import { debounce, flatMap as flat, get, keys, map, uniq } from "lodash";
-import { BreakpointEditor } from "./BreakpointEditor";
-import { comparators } from "./comparators";
-import { intrinsicProperties } from "./intrinsicProperties";
-import { propertyPaths as paths } from "./propertyPaths";
-import { ListEditor } from "components/generic/ListEditor";
-import { useSpecimen } from "slices/specimen";
-import { Breakpoint, useUIState } from "slices/UIState";
-
+import { Box } from "@mui/material";
+import { ListEditor } from "components/generic/ListEditor";
+import { debounce, flatMap as flat, get, keys, map, uniq } from "lodash";
+import { Breakpoint, useUIState } from "slices/UIState";
+import { BreakpointEditor } from "./BreakpointEditor";
+import { comparators } from "./comparators";
+import { intrinsicProperties } from "./intrinsicProperties";
+import { propertyPaths as paths } from "./propertyPaths";
+
 export function BreakpointListEditor() {
   const [{ breakpoints = [] }, setUIState] = useUIState();
-  const [{ specimen }] = useSpecimen();
 
   const properties = uniq([
     ...intrinsicProperties,
     ...flat(paths, (p) =>
-      flat(specimen?.nodeStructure, (v) =>
-        map(keys(get(v, p)), (k) => `${p}.${k}`)
-      )
+      //TODO:
+      flat([], (v) => map(keys(get(v, p)), (k) => `${p}.${k}`))
     ),
   ]);
 
@@ -44,4 +41,4 @@ export function BreakpointListEditor() {
       </Box>
     </Box>
   );
-}
+}

client/src/components/inspector/ViewTree.tsx

@@ -7,7 +7,7 @@ import { Context, createContext, ReactNode, useContext, useMemo } from "react";
 import { ViewControls } from "./ViewControls";
 import { Flex } from "components/generic/Flex";
 import { produce, produce2 } from "produce";
-import { Leaf, Root } from "slices/UIState";
+import { Leaf, Root } from "slices/view";
 
 type ViewTreeContextType<T = any> = {
   controls?: ReactNode;
@@ -169,4 +169,4 @@ export function ViewTree<T>({
       )}
     </>
   );
-}
+}

client/src/components/renderer/NodeMatcher.tsx

@@ -2,9 +2,9 @@ import { TraceEvent } from "protocol/Trace";
 import { Point } from "./Size";
 
 export type NodeMatcher<T extends string = string> = (
-  s: TraceEvent<T>,
+  s: TraceEvent,
   point: Point
 ) => boolean;
 
 export const byPoint: NodeMatcher<keyof Point> = ({ variables }, { x, y }) =>
-  variables?.x === x && variables?.y === y;
+  variables?.x === x && variables?.y === y;

client/src/components/renderer/parser/Context.ts

@@ -1,13 +1,13 @@
 import { Dictionary as Dict } from "lodash";
-import { Component, EventContext, Properties as Props } from "protocol";
+import { CompiledComponent, EventContext, Properties as Props } from "protocol";
 
 export type Context<T extends Props = {}> =
   | PropMap<T>
   | EventContext
-  | Component<any, T>;
+  | CompiledComponent<string, T>;
 
 export type Key<T> = Extract<keyof T, string>;
 
 export type Prop<T extends Props> = (ctx: Context<T>) => T[keyof T];
 
-export type PropMap<T extends Props> = Dict<Prop<T>>;
+export type PropMap<T extends Props> = Dict<Prop<T>>;

client/src/components/renderer/parser/applyScope.ts

@@ -13,4 +13,4 @@ export function applyScope<T extends Props>(
       prop(applyScope(normalize(provided), scope))
   );
   return { ...scope, ...scopedComponent };
-}
+}

client/src/components/renderer/parser/mapProperties.ts

@@ -11,10 +11,10 @@ import { Context } from "./Context";
 export function mapProperties<T extends Props, TResult>(
   context: Context<T> = {},
   iterator: ObjectIterator<T, TResult>
-): Context<T> {
+): Context<T> & { $: string } {
   const { $, ...props } = context;
   return {
     ...mapValues(props, iterator),
     $,
   };
-}
+}

client/src/components/renderer/parser/parse.ts

@@ -1,5 +1,11 @@
 import { Dictionary as Dict } from "lodash";
-import { ComponentDefinition, ComponentDefinitionMap, IntrinsicComponentMap, ParsedComponent, ParsedComponentDefinition } from "protocol";
+import {
+  ComponentDefinition,
+  ComponentDefinitionMap,
+  IntrinsicComponentMap,
+  ParsedComponent,
+  ParsedComponentDefinition,
+} from "protocol";
 import { applyScope } from "./applyScope";
 import { Context, Key } from "./Context";
 import { normalize } from "./normalize";
@@ -16,9 +22,9 @@ export function parse<T extends IntrinsicComponentMap>(
 ): ParsedComponentDefinition<T> {
   return definition.flatMap((component) => {
     const { $ } = component;
-    const scoped = applyScope(normalize(context), normalize(component));
+    const scoped = applyScope(normalize(context), normalize(component) as any);
     return $ in components
       ? parse(components[$], components, scoped)
       : [scoped as ParsedComponent<Key<T>, T[Key<T>]>];
   });
-}
+}

client/src/hooks/useBreakpoints.tsx

@@ -1,60 +1,71 @@
-import { get, keyBy, lowerCase as lower, memoize, startCase } from "lodash";
-import { useMemo } from "react";
-import { call } from "components/script-editor/call";
-import { useSpecimen } from "slices/specimen";
-import { useUIState } from "slices/UIState";
-
-export function useBreakpoints() {
-  const [{ specimen }] = useSpecimen();
-  const [{ code, breakpoints = [], monotonicF, monotonicG }] = useUIState();
+import {
+  get,
+  keyBy,
+  lowerCase as lower,
+  memoize,
+  noop,
+  startCase,
+} from "lodash";
+import { useCallback, useMemo } from "react";
+import { call } from "components/script-editor/call";
+import { useSpecimen } from "slices/specimen";
+import { useUIState } from "slices/UIState";
 
-  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]);
-}
+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 }),
+    []
+  );
+}

client/src/pages/DebugPage.tsx

@@ -14,7 +14,6 @@ import { useUIState } from "slices/UIState";
 
 export function DebugPage() {
   const { controls, onChange, state } = useViewTreeContext();
-  const [{ specimen, format, algorithm }] = useSpecimen();
   const [{ monotonicF, monotonicG }, setUIState] = useUIState();
   const [tab, setTab] = useState("standard");
   function renderHeading(label: ReactNode) {
@@ -61,14 +60,14 @@ export function DebugPage() {
                 <Box>
                   {renderHeading("Export")}
                   <Flex mt={1}>
-                    <Button
+                    {/* <Button
                       variant="contained"
                       disableElevation
                       disabled={!specimen}
                       onClick={() => save(`${algorithm}.${format}`, specimen)}
                     >
                       Save Trace as JSON
-                    </Button>
+                    </Button> */}
                   </Flex>
                 </Box>
               </TabPanel>

client/src/pages/Page.tsx

@@ -7,8 +7,8 @@ import { Flex } from "components/generic/Flex";
 import { Scroll } from "components/generic/Scrollbars";
 import { Space } from "components/generic/Space";
 import { pages } from "pages";
-import { PanelState } from "slices/UIState";
 import { useAcrylic } from "theme";
+import { PanelState } from "slices/view";
 
 const divider = (
   <Divider
@@ -112,4 +112,4 @@ export const Page = withSlots<Slots, PageProps>(
       </Flex>
     );
   }
-);
+);

internal-renderers/src/d2-renderer/D2RendererWorker.ts

@@ -102,7 +102,7 @@ export class D2RendererWorker extends EventEmitter<
   #children: Dictionary<Body<CompiledD2IntrinsicComponent>[]> = {};
 
   getView() {
-    return { system: this.#system };
+    return { system: this.#system, world: this.#children };
   }
 
   setFrustum(frustum: Bounds) {

internal-renderers/src/d2-renderer/D2RendererWorkerAdapter.ts

@@ -13,7 +13,7 @@ export class D2RendererWorkerAdapter extends Worker {
   call<T extends keyof D2RendererWorker>(
     action: D2WorkerRequest<T>["action"],
     payload: D2WorkerRequest<T>["payload"],
-    transfer?: Transferable[]
+    transfer: Transferable[] = []
   ) {
     return this.postMessage({ action, payload }, transfer);
   }