From 5e779a26f04fc0207115f942313d6a7a06876dc2 Mon Sep 17 00:00:00 2001
From: Kevin Zheng <kaiwen530@gmail.com>
Date: Thu, 21 Nov 2024 13:40:47 +1100
Subject: [PATCH] Fix some type errors

---
 client/src/components/generic/Modal.tsx       |  6 +++++-
 .../components/script-editor/templates.tsx    |  3 ++-
 client/src/hooks/useBreakpoints.tsx           |  2 +-
 client/src/pages/TreePage.tsx                 | 19 ++++++++++++++++---
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/client/src/components/generic/Modal.tsx b/client/src/components/generic/Modal.tsx
index 178e4e51..ab0302b0 100644
--- a/client/src/components/generic/Modal.tsx
+++ b/client/src/components/generic/Modal.tsx
@@ -365,7 +365,11 @@ export function ManagedModal({
                 </Box>
               </Popover>
             ) : (
-              <Modal open={isOpen} onClose={close} {...slotProps?.modal}>
+              <Modal
+                open={isOpen}
+                onClose={close as () => void}
+                {...slotProps?.modal}
+              >
                 <ModalAppBar onClose={close} {...ModalAppBarProps} />
                 {chi2}
               </Modal>
diff --git a/client/src/components/script-editor/templates.tsx b/client/src/components/script-editor/templates.tsx
index 5d3a4e6f..38f6bf9d 100644
--- a/client/src/components/script-editor/templates.tsx
+++ b/client/src/components/script-editor/templates.tsx
@@ -1,8 +1,9 @@
 import { TraceEvent } from "protocol/Trace";
 import { FunctionTemplate } from "./FunctionTemplate";
+import { EventTree } from "pages/tree.worker";
 
 export type ShouldBreak = FunctionTemplate<
-  [number, TraceEvent, TraceEvent[], TraceEvent, TraceEvent[]],
+  [number, TraceEvent, TraceEvent[], EventTree | void, EventTree[] | void],
   boolean
 >;
 
diff --git a/client/src/hooks/useBreakpoints.tsx b/client/src/hooks/useBreakpoints.tsx
index 7e1cff66..88cf4f34 100644
--- a/client/src/hooks/useBreakpoints.tsx
+++ b/client/src/hooks/useBreakpoints.tsx
@@ -106,7 +106,7 @@ export function useBreakpoints(key?: string) {
               event,
               events,
               trees[step]?.parent,
-              trees[step]?.children,
+              trees[step]?.children ?? [],
             ])
           ) {
             return { result: "Script editor" };
diff --git a/client/src/pages/TreePage.tsx b/client/src/pages/TreePage.tsx
index 27d6b72d..4a45c82d 100644
--- a/client/src/pages/TreePage.tsx
+++ b/client/src/pages/TreePage.tsx
@@ -132,7 +132,7 @@ const orientationOptions = {
 };
 
 type R = {
-  event: MouseEvent;
+  event: MouseEvent | TouchEvent;
   node: string;
 };
 
@@ -407,6 +407,19 @@ export function TreePage({ template: Page }: PageContentProps) {
   }, [trace, setTrackedProperty]);
 
   const [selection, setSelection] = useState<R>();
+
+  const { x, y } = selection
+    ? selection.event instanceof MouseEvent
+      ? {
+          x: selection.event.clientX,
+          y: selection.event.clientY,
+        }
+      : {
+          x: selection.event.touches?.[0]?.clientX,
+          y: selection.event.touches?.[0]?.clientY,
+        }
+    : { x: 0, y: 0 };
+
   const [menuOpen, setMenuOpen] = useState(false);
 
   const [mode, setMode] = useState<"tree" | "directed-graph">("tree");
@@ -491,8 +504,8 @@ export function TreePage({ template: Page }: PageContentProps) {
                     onClose={() => setMenuOpen(false)}
                     anchorReference="anchorPosition"
                     anchorPosition={{
-                      left: selection?.event.clientX ?? 0,
-                      top: selection?.event.clientY ?? 0,
+                      left: x,
+                      top: y,
                     }}
                     transformOrigin={{
                       horizontal: "left",