From 8a6ea4bfad4add56b566d27f38674be115ab1ddf Mon Sep 17 00:00:00 2001
From: Joey <90795735+joey-grafana@users.noreply.github.com>
Date: Fri, 15 Dec 2023 10:43:35 +0000
Subject: [PATCH] Tempo: Fix graph dragging (#79508)

* Fix graph dragging

* Add comment
---
 .betterer.results                                | 3 +++
 public/app/plugins/panel/nodeGraph/usePanning.ts | 8 +++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 98a583652b6..fb06f6296fa 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -6377,6 +6377,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
+    "public/app/plugins/panel/nodeGraph/usePanning.ts:5381": [
+      [0, 0, 0, "Do not use any type assertions.", "0"]
+    ],
     "public/app/plugins/panel/nodeGraph/utils.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
diff --git a/public/app/plugins/panel/nodeGraph/usePanning.ts b/public/app/plugins/panel/nodeGraph/usePanning.ts
index 1e012c3d071..995646b15b4 100644
--- a/public/app/plugins/panel/nodeGraph/usePanning.ts
+++ b/public/app/plugins/panel/nodeGraph/usePanning.ts
@@ -183,12 +183,14 @@ function inBounds(value: number, min: number | undefined, max: number | undefine
   return Math.min(Math.max(value, min ?? -Infinity), max ?? Infinity);
 }
 
+// The issue here is that TouchEvent is undefined while using instanceof in Firefox and Safari
+// which will throw an exception but if it's (event as TouchEvent).changedTouches it will be undefined
+// and the if check will fail so it will go to the else but will not throw an exception
 function getEventXY(event: Event): { x: number; y: number } {
-  if (event instanceof TouchEvent) {
+  if ((event as TouchEvent).changedTouches && event instanceof TouchEvent) {
     return { x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY };
   } else if (event instanceof MouseEvent) {
     return { x: event.clientX, y: event.clientY };
-  } else {
-    return { x: 0, y: 0 };
   }
+  return { x: 0, y: 0 };
 }