From 7941890b09450dca24a0f3db60d99f10bfcc1493 Mon Sep 17 00:00:00 2001
From: Valentin Chanas <anisometropie@gmail.com>
Date: Wed, 19 Feb 2025 14:40:49 +0100
Subject: [PATCH] ui-spacetimechart: improve data label

data label would disappear if we go too close to the right or bottom border of the canvas. the label now shifts above or left of the mouse to stay visible
---
 ui-spacetimechart/src/stories/lib/components.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/ui-spacetimechart/src/stories/lib/components.tsx b/ui-spacetimechart/src/stories/lib/components.tsx
index 485ede84a..b4983010e 100644
--- a/ui-spacetimechart/src/stories/lib/components.tsx
+++ b/ui-spacetimechart/src/stories/lib/components.tsx
@@ -58,11 +58,15 @@ const DataLabel = ({
   position,
   isDiff,
   marginTop = 0,
+  shiftTextX = 0,
+  shiftTextY = 0,
 }: {
   data: DataPoint;
   position: Point;
   isDiff?: boolean;
   marginTop?: number;
+  shiftTextX?: number;
+  shiftTextY?: number;
 }) => (
   <div
     style={{
@@ -75,7 +79,10 @@ const DataLabel = ({
     }}
   >
     <Cross />
-    <div className="content" style={{ background: WHITE_75 }}>
+    <div
+      className="content"
+      style={{ background: WHITE_75, marginTop: `${shiftTextY}px`, marginLeft: `${shiftTextX}px` }}
+    >
       {isDiff ? (
         <>
           <div>Time difference: {formatTimeLength(new Date(data.time))}</div>
@@ -95,7 +102,7 @@ const DataLabel = ({
  * This component renders a DataLabel under the mouse, using the MouseContext from the SpaceTimeChart:
  */
 export const MouseTracker = ({ reference }: { reference?: DataPoint }) => {
-  const { getPoint } = useContext(SpaceTimeChartContext);
+  const { getPoint, width, height } = useContext(SpaceTimeChartContext);
   const { position, data, isHover } = useContext(MouseContext);
 
   return isHover ? (
@@ -113,7 +120,8 @@ export const MouseTracker = ({ reference }: { reference?: DataPoint }) => {
         }
         position={position}
         isDiff={!!reference}
-        marginTop={30}
+        shiftTextX={position.x > width - 100 ? -100 : 10}
+        shiftTextY={position.y > height - 50 ? -50 : 20}
       />
     </>
   ) : null;