Tap on Forgetting Curve Scrolls Page to Top (Android)

[brishtibheja]

Steps

1. Open card info for any card.
2. Scroll down to forgetting curve.
3. Click it.

Behaviour

The screen scrolls to top.

Backend Version = 0.1.48-anki24.11 (24.11 c47638ca36f99dd4f3b81ae82d964aec66e392e0)

(Originally reported on ankidroid/Anki-Android#17546 (comment))

---

Copying from @david-allison's comment:

• Related to Feat/forgetting curve in card info ankitects/anki#3437

anki/ts/routes/card-info/forgetting-curve.ts

Line 255 in f6a3e98

showTooltip(tooltipText(d), x1, y1);

const [x1, y1] = pointer(event, document.body);
// ...
showTooltip(tooltipText(d), x1, y1);

anki/ts/routes/card-info/forgetting-curve.ts

Lines 239 to 260 in f6a3e98

	svg.append("g")
	.attr("class", "hover-columns")
	.selectAll("rect")
	.data(data)
	.join("rect")
	.attr("x", d => x(d.date) - 1)
	.attr("y", bounds.marginTop)
	.attr("width", 2)
	.attr("height", bounds.height - bounds.marginTop - bounds.marginBottom)
	.attr("fill", "transparent")
	.on("mousemove", (event: MouseEvent, d: DataPoint) => {
	const [x1, y1] = pointer(event, document.body);
	focusLine.attr("x1", x(d.date) - 1).attr("x2", x(d.date) + 1).style(
	"opacity",
	1,
	);
	showTooltip(tooltipText(d), x1, y1);
	})
	.on("mouseout", () => {
	focusLine.style("opacity", 0);
	hideTooltip();
	});

https://github.com/ankitects/anki/blob/f6a3e98ac3dcb19d54e7fdbba96bf2fa15fc2b3f/ts/routes/graphs/Tooltip.svelte

Potential Issues (I don't know Svelte):

• I believe mounting the Tooltip causes the scroll to the top (not confirmed)

• On the first click, the tooltip is created, rather than showing it unconditionally and keeping it at 0 opacity (as is done after it's dismissed for the first time)

• Tooltip.svelte only appears to have code for avoiding the border in the X direction, not the Y direction

• mousemove and mouseout should probably have touchscreen alternatives

[OuOu2021]

I find that the FSRS Simulator in the Deck Options is similar to the Forgetting Curve, as both have tooltips. However, the FSRS Simulator doesn't seem to have the same issue. Perhaps the key difference is that the Forgetting Curve is positioned at the bottom of the page, and there isn't enough space for the tooltip. As a result, the tooltip may extend off the screen, finally causing it to slide to the top.

I’m not familiar with the touch alternatives to mousemove, but the behavior of the FSRS Simulator seems to be good enough, as the mousemove event somehow turns to an "onTouchEnd" behavior on my mobile device. I don’t think it’s necessary to handle events like "touchMove" because the finger tends to overlap the graph quite a bit.