diff --git a/packages/stats/app/src/routes/index.tsx b/packages/stats/app/src/routes/index.tsx index 4c76d8ccb2..d5a5101c4b 100644 --- a/packages/stats/app/src/routes/index.tsx +++ b/packages/stats/app/src/routes/index.tsx @@ -612,6 +612,11 @@ function TopModelsChart(props: { role="img" aria-label="Stacked top model usage chart" style={{ "--top-models-count": props.data.length } as JSX.CSSProperties} + onPointerLeave={(event) => { + if (event.pointerType === "touch") return + setActiveIndex(undefined) + props.onActiveModelChange(undefined) + }} > -
+
{ + if (event.pointerType === "touch") return + setActiveIndex(undefined) + props.onActiveModelChange(undefined) + }} + > {(day, dayIndex) => (
{ + onPointerEnter={(event) => { setActiveIndex(dayIndex()) - props.onActiveModelChange(undefined) + if (isTopModelsBlankHover(event.currentTarget, event.clientY)) props.onActiveModelChange(undefined) }} - onPointerLeave={(event) => { + onPointerMove={(event) => { if (event.pointerType === "touch") return - setActiveIndex(undefined) - props.onActiveModelChange(undefined) + setActiveIndex(dayIndex()) + if (isTopModelsBlankHover(event.currentTarget, event.clientY)) props.onActiveModelChange(undefined) }} onClick={() => { setActiveIndex(dayIndex()) @@ -756,6 +768,12 @@ function TopModelsChart(props: { ) } +function isTopModelsBlankHover(bar: HTMLElement, clientY: number) { + const stack = bar.querySelector('[data-slot="top-models-stack"]') + if (!stack) return true + return clientY < stack.getBoundingClientRect().top - 6 +} + function getTopModelsBarHeight(total: number, max: number) { if (total <= 0) return 0 return Math.max(2, Math.min(100, (total / max) * 100))