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)
+ }}
>
@@ -632,7 +637,14 @@ function TopModelsChart(props: {
)}
-
+
{
+ 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))