From 5c49ba8e6a91866b610351d905af82b24b6b9a3a Mon Sep 17 00:00:00 2001
From: Aleksandar Petrov <8142643+aleks-p@users.noreply.github.com>
Date: Tue, 2 Dec 2025 10:40:10 -0400
Subject: [PATCH] Make cursors readable at any zoom level

---
 .../explore-map/components/ExploreMapCanvas.tsx        |  2 +-
 .../app/features/explore-map/components/UserCursor.tsx | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/public/app/features/explore-map/components/ExploreMapCanvas.tsx b/public/app/features/explore-map/components/ExploreMapCanvas.tsx
index a460e93816f..e2585c5bca0 100644
--- a/public/app/features/explore-map/components/ExploreMapCanvas.tsx
+++ b/public/app/features/explore-map/components/ExploreMapCanvas.tsx
@@ -254,7 +254,7 @@ export function ExploreMapCanvas() {
               return <ExploreMapPanelContainer key={panel.id} panel={panel} />;
             })}
             {Object.values(cursors).map((cursor) => (
-              <UserCursor key={cursor.sessionId} cursor={cursor} />
+              <UserCursor key={cursor.sessionId} cursor={cursor} zoom={viewport.zoom} />
             ))}
             {selectionRect && (
               <div
diff --git a/public/app/features/explore-map/components/UserCursor.tsx b/public/app/features/explore-map/components/UserCursor.tsx
index dfdd5be4099..c42877aca0e 100644
--- a/public/app/features/explore-map/components/UserCursor.tsx
+++ b/public/app/features/explore-map/components/UserCursor.tsx
@@ -7,9 +7,10 @@ import { UserCursor as UserCursorType } from '../state/types';
 
 interface UserCursorProps {
   cursor: UserCursorType;
+  zoom: number;
 }
 
-export function UserCursor({ cursor }: UserCursorProps) {
+export function UserCursor({ cursor, zoom }: UserCursorProps) {
   const styles = useStyles2(getStyles);
 
   return (
@@ -18,6 +19,8 @@ export function UserCursor({ cursor }: UserCursorProps) {
       style={{
         left: cursor.x,
         top: cursor.y,
+        transform: `scale(${1 / zoom})`,
+        transformOrigin: 'top left',
       }}
     >
       <svg
@@ -52,9 +55,10 @@ const getStyles = (theme: GrafanaTheme2) => {
       zIndex: 10000,
       // Smooth transition matching the update frequency (100ms)
       // Using linear for more predictive movement
-      transition: 'left 0.1s linear, top 0.1s linear',
+      // Also transition transform for smooth scaling when zoom changes
+      transition: 'left 0.1s linear, top 0.1s linear, transform 0.2s ease-out',
       // Will-change hint for better performance
-      willChange: 'left, top',
+      willChange: 'left, top, transform',
     }),
     cursorSvg: css({
       display: 'block',