fix(ddm): Clicking chart hides tooltip (#64859)

- closes https://github.com/getsentry/sentry/issues/64451

static/app/views/ddm/chartUtils.spec.tsx

@@ -1,35 +1,4 @@
-import {fitToValueRect, isInRect} from 'sentry/views/ddm/chartUtils';
-
-describe('isInRect', () => {
-  const rect = {
-    top: 0,
-    left: 0,
-    right: 10,
-    bottom: 10,
-    x: 0,
-    y: 0,
-    width: 10,
-    height: 10,
-    toJSON: () => {},
-  };
-
-  it('should return false if rect is undefined', () => {
-    expect(isInRect(1, 2, undefined)).toBe(false);
-  });
-
-  it('should return true if point is within the rect', () => {
-    expect(isInRect(5, 5, rect)).toBe(true);
-  });
-
-  it('should return false if point is outside the rect', () => {
-    expect(isInRect(11, 11, rect)).toBe(false);
-  });
-
-  it('should return true if point is exactly on the border of the rect', () => {
-    expect(isInRect(0, 0, rect)).toBe(true);
-    expect(isInRect(10, 10, rect)).toBe(true);
-  });
-});
+import {fitToValueRect} from 'sentry/views/ddm/chartUtils';
 
 describe('fitToValueRect', () => {
   it('should return original x and y if rect is undefined', () => {

static/app/views/ddm/chartUtils.tsx

@@ -3,14 +3,6 @@ import moment from 'moment';
 
 import type {ReactEchartsRef} from 'sentry/types/echarts';
 
-export function isInRect(x: number, y: number, rect: DOMRect | undefined) {
-  if (!rect) {
-    return false;
-  }
-
-  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
-}
-
 export type ValueRect = {
   xMax: number;
   xMin: number;

static/app/views/ddm/focusArea.tsx

@@ -14,7 +14,7 @@ import {space} from 'sentry/styles/space';
 import type {EChartBrushEndHandler, ReactEchartsRef} from 'sentry/types/echarts';
 import type {SelectionRange} from 'sentry/utils/metrics/types';
 import type {ValueRect} from 'sentry/views/ddm/chartUtils';
-import {getValueRect, isInRect} from 'sentry/views/ddm/chartUtils';
+import {getValueRect} from 'sentry/views/ddm/chartUtils';
 import {CHART_HEIGHT} from 'sentry/views/ddm/constants';
 import type {FocusAreaProps} from 'sentry/views/ddm/context';
 
@@ -76,22 +76,27 @@ export function useFocusArea({
         brushType: 'rect',
       },
     });
-    isDrawingRef.current = true;
   }, [chartRef, hasFocusArea, isDisabled, onDraw]);
 
   useEffect(() => {
-    const handleMouseDown = event => {
-      const rect = chartRef.current?.ele.getBoundingClientRect();
+    const chartElement = chartRef.current?.ele;
+    const handleMouseDown = () => {
+      isDrawingRef.current = true;
+      startBrush();
+    };
 
-      if (isInRect(event.clientX, event.clientY, rect)) {
-        startBrush();
-      }
+    // Handle mouse up is called after onBrushEnd
+    // We can use it for a final reliable cleanup as onBrushEnd is not always called (e.g. when simply clicking the chart)
+    const handleMouseUp = () => {
+      isDrawingRef.current = false;
     };
 
-    window.addEventListener('mousedown', handleMouseDown, {capture: true});
+    chartElement?.addEventListener('mousedown', handleMouseDown, {capture: true});
+    window.addEventListener('mouseup', handleMouseUp);
 
     return () => {
-      window.removeEventListener('mousedown', handleMouseDown, {capture: true});
+      chartElement?.removeEventListener('mousedown', handleMouseDown, {capture: true});
+      window.removeEventListener('mouseup', handleMouseUp);
     };
   }, [chartRef, startBrush]);