Use Hit Test

What's under the cursor, answered once.

Preview

About

This question was answered thirty-one separate times here and no two answers agreed. Five viewers wrote their own nearest-point search — a linear scan over every datum per pointermove with a radius picked by eye. Nineteen kept their own hover state, each clearing it on slightly different events. Keyboard users could reach about half the plots. An index answers find(px, py) with the right structure for its archetype — a spatial hash for a point cloud, a scale inversion for a matrix, a binary search for intervals — and useHitTest wraps it with hover, click-to-select, keyboard traversal, the entity-link broadcast, tooltip positioning, and the a11y live region.

Usage

import { useHitTest, usePointIndex } from "@/components/ui/use-hit-test"

const index = usePointIndex(hits, (h) => ({ x: x(h.pos), y: y(h.pval) }), {
  deps: [x, y],
})
const hit = useHitTest({
  index,
  label: `Manhattan plot — ${hits.length} variants`,
  describe: (h) => `${h.chrom}:${h.pos}, p ${h.pval.toExponential(1)}`,
  entity: (h) => (h.gene ? { kind: "gene", id: h.gene } : null),
})

<canvas {...hit.pointerProps} {...hit.a11yProps} className={hit.focusRing} />