[charts] Support multiple marker size in findClosestPoint

Author: alexfauquette

packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.ts

@@ -51,6 +51,8 @@ import {
   selectorChartXAxisExtrema,
   selectorChartYAxisExtrema,
 } from './useChartAxisExtrema.selectors';
+import { selectorChartZAxis } from '../useChartZAxis';
+import getMarkerSize, { type ScatterSizeGetter } from '../../../../ScatterChart/seriesConfig/getMarkerSize';
 
 export const createZoomMap = (zoom: readonly ZoomData[]) => {
   const zoomItemMap = new Map<AxisId, ZoomData>();
@@ -524,7 +526,15 @@ export const selectorChartDefaultYAxisId = createSelector(
   (yAxes) => yAxes![0].id,
 );
 
-const EMPTY_MAP = new Map<SeriesId, Flatbush>();
+export type ScatterFlatbushEntry = {
+  flatbush: Flatbush;
+  /** Per-point marker radius, in pixels. */
+  getItemRadius: number | ((dataIndex: number) => number);
+  /** Largest radius across all points in this series, in pixels. */
+  maxItemRadius: number;
+};
+
+const EMPTY_MAP = new Map<SeriesId, ScatterFlatbushEntry>();
 export const selectorChartSeriesEmptyFlatbushMap = () => EMPTY_MAP;
 
 export const selectorChartSeriesFlatbushMap = createSelectorMemoized(
@@ -533,42 +543,61 @@ export const selectorChartSeriesFlatbushMap = createSelectorMemoized(
   selectorChartNormalizedYScales,
   selectorChartDefaultXAxisId,
   selectorChartDefaultYAxisId,
+  selectorChartZAxis,
+  selectorChartDrawingArea,
 
   function selectChartSeriesFlatbushMap(
     allSeries,
     xAxesScaleMap,
     yAxesScaleMap,
     defaultXAxisId,
     defaultYAxisId,
+    zAxisState,
   ) {
     // FIXME: Do we want to support non-scatter series here?
     const validSeries = allSeries.scatter;
-    const flatbushMap = new Map<SeriesId, Flatbush>();
+    const flatbushMap = new Map<SeriesId, ScatterFlatbushEntry>();
 
     if (!validSeries) {
       return flatbushMap;
     }
 
+    const zAxes = zAxisState?.axis ?? {};
+    const zAxisIds = zAxisState?.axisIds ?? [];
+
     validSeries.seriesOrder.forEach((seriesId) => {
-      const {
-        data,
-        xAxisId = defaultXAxisId,
-        yAxisId = defaultYAxisId,
-      } = validSeries.series[seriesId];
+      const series = validSeries.series[seriesId];
+      const { data, xAxisId = defaultXAxisId, yAxisId = defaultYAxisId } = series;
+
+      if (data.length === 0) {
+        return;
+      }
 
       const flatbush = new Flatbush(data.length);
 
+      const sizeAxis = zAxes[series.sizeAxisId ?? zAxisIds[0]];
+
+      const isFixedSize = !sizeAxis || !sizeAxis.sizeScale;
+      const getItemRadius = isFixedSize
+        ? series.markerSize ?? 0
+        : getMarkerSize(series, sizeAxis);
+
+      let maxItemRadius = isFixedSize ? getItemRadius as number : 0;
+
       const originalXScale = xAxesScaleMap[xAxisId];
       const originalYScale = yAxesScaleMap[yAxisId];
 
-      for (const datum of data) {
+      for (let i = 0; i < data.length; i += 1) {
+        if (!isFixedSize) {
+          maxItemRadius = Math.max(maxItemRadius, (getItemRadius as ScatterSizeGetter)(i));
+        }
         // Add the points using a [0, 1] range so that we don't need to recreate the Flatbush structure when zooming.
         // This doesn't happen in practice, though, because currently the scales depend on the drawing area.
-        flatbush.add(originalXScale(datum.x)!, originalYScale(datum.y)!);
+        flatbush.add(originalXScale(data[i].x)!, originalYScale(data[i].y)!);
       }
 
       flatbush.finish();
-      flatbushMap.set(seriesId, flatbush);
+      flatbushMap.set(seriesId, { flatbush, getItemRadius, maxItemRadius });
     });
 
     return flatbushMap;

packages/x-charts/src/internals/plugins/featurePlugins/useChartClosestPoint/findClosestPoints.ts

@@ -3,6 +3,9 @@ import { type Flatbush } from '../../../Flatbush';
 import { type D3Scale } from '../../../../models/axis';
 import { isOrdinalScale } from '../../../scaleGuards';
 
+// Arbitrary large number to be sure we don't pull the entire dataset from flatbush when radius is not fixed.
+const LARGE_NUMBER = 50;
+
 export function findClosestPoints(
   flatbush: Flatbush,
   seriesData: readonly ScatterValueType[],
@@ -15,7 +18,8 @@ export function findClosestPoints(
   svgPointX: number,
   svgPointY: number,
   maxRadius: number = Infinity,
-  maxResults = 1,
+  maxResults: number = 1,
+  getItemRadius: number | ((dataIndex: number) => number) = 0,
 ) {
   const originalXScale = xScale.copy();
   const originalYScale = yScale.copy();
@@ -47,14 +51,56 @@ export function findClosestPoints(
     invertScale(yScale, svgPointY, (dataIndex) => seriesData[dataIndex]?.y),
   );
 
-  return flatbush.neighbors(
+  if (pointX === undefined || pointY === undefined) {
+    return [];
+  }
+
+  const withFixRadius = typeof getItemRadius === 'number';
+  const maxRadiusSq = Number.isFinite(maxRadius) ? maxRadius * maxRadius : Infinity;
+
+  // Pull every candidate whose lower-bound (box) distance is within the hit threshold.
+  // Any unpulled point j has box-dist > maxRadius, hence center-dist ≥ box-dist > maxRadius,
+  // so it cannot be a hit. We re-rank by true edge distance below.
+  const candidates = flatbush.neighbors(
     pointX,
     pointY,
-    maxResults,
-    maxRadius != null ? maxRadius * maxRadius : Infinity,
+    withFixRadius ? maxResults : LARGE_NUMBER,
+    maxRadiusSq,
     excludeIfOutsideDrawingArea,
     sqDistFn,
   );
+
+
+  if (withFixRadius) {
+    // If radius is constant, we can skip the expensive edge-distance calculation and return candidates in box-distance order.
+    return candidates;
+  }
+
+  // Re-rank by true (signed) edge distance. Negative values mean the cursor is inside
+  // the marker — those win over any outside marker, with deeper containment ranked first.
+  let ranked: { index: number; edge: number; centerDistSq: number }[] = [];
+  for (const i of candidates) {
+    const cx = originalXScale(seriesData[i].x)!;
+    const cy = originalYScale(seriesData[i].y)!;
+    const centerDistSq = sqDistFn(cx - pointX, cy - pointY);
+    // Preserve the existing hit-area semantics: hit means center distance ≤ maxRadius.
+    if (centerDistSq > maxRadiusSq) {
+      continue;
+    }
+    const edge = Math.sqrt(centerDistSq) - getItemRadius(i);
+    ranked.push({ index: i, edge, centerDistSq });
+  }
+  ranked.sort((a, b) => a.edge - b.edge);
+
+  // The pointer is inside multiple marks, we sore them by distance to the center.
+  const splitIndex = ranked.findIndex((d) => d.edge > 0);
+  if (splitIndex !== -1) {
+    ranked = [...ranked.slice(0, splitIndex).sort((a, b) => a.centerDistSq - b.centerDistSq), ...ranked.slice(splitIndex)];
+
+  }
+  return ranked
+    .slice(0, Math.min(ranked.length, maxResults))
+    .map((d) => d.index);
 }
 
 function invertScale<T>(scale: D3Scale, value: number, getDataPoint: (dataIndex: number) => T) {

packages/x-charts/src/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.ts

@@ -65,24 +65,27 @@ export const useChartClosestPoint: ChartPlugin<UseChartClosestPointSignature> =
         return 'outside-chart';
       }
 
-      let closestPoint: { dataIndex: number; seriesId: SeriesId; distanceSq: number } | undefined =
-        undefined;
+      let closestPoint:
+        | { dataIndex: number; seriesId: SeriesId; edgeDistance: number }
+        | undefined = undefined;
 
       for (const seriesId of seriesOrder ?? []) {
         const aSeries = (series ?? {})[seriesId];
-        const flatbush = flatbushMap.get(seriesId);
+        const entry = flatbushMap.get(seriesId);
 
-        if (!flatbush) {
+        if (!entry) {
           continue;
         }
 
+        const { flatbush, getItemRadius, maxItemRadius } = entry;
+
         const xAxisId = aSeries.xAxisId ?? defaultXAxisId;
         const yAxisId = aSeries.yAxisId ?? defaultYAxisId;
 
         const xAxisZoom = selectorChartAxisZoomData(store.state, xAxisId);
         const yAxisZoom = selectorChartAxisZoomData(store.state, yAxisId);
         const maxRadius =
-          resolvedHitAreaRadius === 'item' ? aSeries.markerSize : resolvedHitAreaRadius;
+          resolvedHitAreaRadius === 'item' ? maxItemRadius : resolvedHitAreaRadius;
 
         const xZoomStart = (xAxisZoom?.start ?? 0) / 100;
         const xZoomEnd = (xAxisZoom?.end ?? 100) / 100;
@@ -104,6 +107,8 @@ export const useChartClosestPoint: ChartPlugin<UseChartClosestPointSignature> =
           svgPoint.x,
           svgPoint.y,
           maxRadius,
+          1,
+          getItemRadius
         )[0];
 
         if (closestPointIndex === undefined) {
@@ -114,13 +119,20 @@ export const useChartClosestPoint: ChartPlugin<UseChartClosestPointSignature> =
         const scaledX = xScale(point.x);
         const scaledY = yScale(point.y);
 
-        const distSq = (scaledX! - svgPoint.x) ** 2 + (scaledY! - svgPoint.y) ** 2;
+        const centerDist = Math.hypot(scaledX! - svgPoint.x, scaledY! - svgPoint.y);
+        const closestPointRadius = typeof getItemRadius === 'number' ? getItemRadius : getItemRadius(closestPointIndex);
+        const edgeDistance = centerDist - closestPointRadius;
 
-        if (closestPoint === undefined || distSq < closestPoint.distanceSq) {
+        if (edgeDistance > closestPointRadius && resolvedHitAreaRadius === 'item') {
+          continue;
+        }
+        if (closestPoint === undefined || edgeDistance < closestPoint.edgeDistance ||
+          (resolvedHitAreaRadius === 'item' && edgeDistance === closestPoint.edgeDistance)
+        ) {
           closestPoint = {
             dataIndex: closestPointIndex,
             seriesId,
-            distanceSq: distSq,
+            edgeDistance,
           };
         }
       }

packages/x-charts/src/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.types.ts

@@ -6,6 +6,7 @@ import { type UseChartCartesianAxisSignature } from '../useChartCartesianAxis';
 import { type UseChartHighlightSignature } from '../useChartHighlight';
 import { type UseChartInteractionSignature } from '../useChartInteraction';
 import { type UseChartTooltipSignature } from '../useChartTooltip';
+import { type UseChartZAxisSignature } from '../useChartZAxis';
 
 export interface UseChartVoronoiInstance {
   /**
@@ -64,5 +65,6 @@ export type UseChartClosestPointSignature<SeriesType extends ChartSeriesType = C
       UseChartInteractionSignature,
       UseChartHighlightSignature<SeriesType>,
       UseChartTooltipSignature,
+      UseChartZAxisSignature
     ];
   }>;