feat(explore-suspect-attrs): Positioning floating trigger to the bottom right (#94939)

Always positioning at the bottom right prevents the trigger from
covering the selected region.


https://github.com/user-attachments/assets/af27c944-b830-4eb2-b283-8e7b8ccf7dc1

---------

Co-authored-by: Abdullah Khan <abdullahkhan@PG9Y57YDXQ.local>

Author: Abdkhan14

static/app/views/explore/components/suspectTags/floatingTrigger.tsx

@@ -21,7 +21,7 @@ type Props = {
 
 export function FloatingTrigger({boxSelectOptions, triggerWrapperRef, chartInfo}: Props) {
   const router = useRouter();
-  const pageCoords = boxSelectOptions.pageCoords;
+  const triggerPosition = boxSelectOptions.floatingTriggerPosition;
 
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const {openDrawer} = useDrawer();
@@ -73,15 +73,15 @@ export function FloatingTrigger({boxSelectOptions, triggerWrapperRef, chartInfo}
     }
   }, [boxSelectOptions, chartInfo, isDrawerOpen, openDrawer]);
 
-  if (!pageCoords) return null;
+  if (!triggerPosition) return null;
 
   return createPortal(
     <div
       ref={triggerWrapperRef}
       style={{
         position: 'absolute',
-        top: pageCoords.y,
-        left: pageCoords.x,
+        top: triggerPosition.top,
+        left: triggerPosition.left,
       }}
     >
       <List>

static/app/views/explore/hooks/useChartBoxSelect.spec.tsx

@@ -26,6 +26,13 @@ describe('useChartBoxSelect', () => {
   const mockChartInstance = {
     getModel: jest.fn(),
     dispatchAction: jest.fn(),
+    convertToPixel: jest.fn().mockReturnValue([100, 200]),
+    getDom: jest.fn().mockReturnValue({
+      getBoundingClientRect: jest.fn().mockReturnValue({
+        left: 50,
+        top: 100,
+      }),
+    }),
   };
 
   const mockAxis = {

static/app/views/explore/hooks/useChartBoxSelect.tsx

@@ -25,9 +25,9 @@ export type BoxSelectOptions = {
   } | null;
   brush: EChartsOption['brush'];
   clearSelection: () => void;
+  floatingTriggerPosition: {left: number; top: number} | null;
   onBrushEnd: EChartBrushEndHandler;
   onBrushStart: EChartBrushStartHandler;
-  pageCoords: {x: number; y: number} | null;
   reActivateSelection: () => void;
   toolBox: ToolboxComponentOption | undefined;
 };
@@ -64,7 +64,10 @@ export function useChartBoxSelect({
 
   // This exposes the page coordinates when the user finishes drawing the box. This is used
   // to render floating CTAs on top of the chart.
-  const [pageCoords, setPageCoords] = useState<{x: number; y: number} | null>(null);
+  const [floatingTriggerPosition, setFloatingTriggerPosition] = useState<{
+    left: number;
+    top: number;
+  } | null>(null);
 
   // This increments a counter to force a re-activation of the brush mode. We expose the
   // re-activation function in the return value, so that the parent component can call it
@@ -96,47 +99,50 @@ export function useChartBoxSelect({
 
       const area = evt.areas[0];
 
+      const [x0, x1] = area.coordRange[0];
+      const [y0, y1] = area.coordRange[1];
+
+      const clampedCoordRange: [[number, number], [number, number]] = [
+        [Math.max(xMin, x0), Math.min(xMax, x1)],
+        [Math.max(yMin, y0), Math.min(yMax, y1)],
+      ];
+
       const newBrushArea: EchartBrushAreas = [
         {
           ...area,
-          coordRange: [
-            [
-              Math.max(xMin, area.coordRange[0][0]),
-              Math.min(xMax, area.coordRange[0][1]),
-            ],
-            [
-              Math.max(yMin, area.coordRange[1][0]),
-              Math.min(yMax, area.coordRange[1][1]),
-            ],
-          ],
+          coordRange: clampedCoordRange,
         },
       ];
 
       setBrushArea(newBrushArea);
-    },
-    [chartRef]
-  );
 
-  useEffect(() => {
-    const handleMouseUp = (e: MouseEvent) => {
-      if (brushArea) {
-        setPageCoords({x: e.clientX, y: e.clientY + window.scrollY});
-      } else {
-        setPageCoords(null);
-      }
-    };
+      // Get the bottom right coordinates of the box
+      const [clamped_x1, clamped_y0] = [clampedCoordRange[0][1], clampedCoordRange[1][0]];
 
-    const wrapper = chartWrapperRef.current;
-    if (!wrapper) return;
+      // Convert the bottom right coordinates to pixel coordinates, so that we can use them to
+      // absolutely position the floating CTAs.
+      const [clamped_x1_pixels, clamped_y0_pixels] = chart.convertToPixel(
+        {xAxisIndex: 0, yAxisIndex: 0},
+        [clamped_x1, clamped_y0]
+      );
 
-    wrapper.addEventListener('mouseup', handleMouseUp);
-  }, [brushArea, chartWrapperRef]);
+      const chartRect = chart.getDom().getBoundingClientRect();
+
+      if (chartRect) {
+        setFloatingTriggerPosition({
+          left: chartRect.left + clamped_x1_pixels,
+          top: chartRect.top + clamped_y0_pixels + window.scrollY,
+        });
+      }
+    },
+    [chartRef]
+  );
 
   const clearSelection = useCallback(() => {
     const chartInstance = chartRef.current?.getEchartsInstance();
     chartInstance?.dispatchAction({type: 'brush', areas: []});
     setBrushArea(null);
-    setPageCoords(null);
+    setFloatingTriggerPosition(null);
   }, [chartRef]);
 
   const handleOutsideClick = useCallback(
@@ -199,7 +205,7 @@ export function useChartBoxSelect({
     chartRef.current,
     enableBrushMode,
     handleOutsideClick,
-    pageCoords,
+    floatingTriggerPosition,
     forceReActivateSelection,
   ]);
 
@@ -237,7 +243,7 @@ export function useChartBoxSelect({
       onBrushEnd,
       onBrushStart,
       toolBox,
-      pageCoords,
+      floatingTriggerPosition,
       reActivateSelection,
       clearSelection,
     };
@@ -247,7 +253,7 @@ export function useChartBoxSelect({
     brush,
     toolBox,
     onBrushStart,
-    pageCoords,
+    floatingTriggerPosition,
     reActivateSelection,
     clearSelection,
   ]);