Generify auto-scrolling as standalone component

[adamjohnwright]

Migrated from reactome/PathwayBrowser#7, opened by @EliotRagueneau on 2025-09-25. That repository is archived; the Angular pathway browser now lives here.

---

Would be great to make the event hierarchy auto-scrolling behaviour a standalone component, so that we can reuse it elsewhere, as it is better than the tooltip.

Once done, we can apply it to search results, pathways of selected search results, object tree when too big, etc.

[adamjohnwright]

Done in 0f12416, live on beta.

RevealDirective (projects/pathway-browser/src/app/utils/reveal.directive.ts) inverts what the hierarchy was doing: instead of the component finding the node afterwards with document.querySelector, the element that knows it is selected reveals itself.

<li [crReveal]="node.stId === revealTarget()">…</li>

Applied to the three places that had grown their own copy:

• event hierarchy nodes — the original, now with no DOM query in the component
• analysis result table rows — the effect there now only walks the paginator to the right page
• pathway list under a selected search result

Notes for whoever extends it:

• Timing follows rendering rather than a guess about it, so a node that appears later — as its branch expands, or when the tree is rebuilt for an analysis — is revealed when it appears rather than racing whatever finished first.
• It waits two frames. One is enough for the element to exist and not enough for it to be where it ends up: a table still expanding rows, or paging to a different page, moves after the first frame, which left the row 28px past the edge of its container.
• node.isSelected looked like the natural input and is the wrong one — it is also set on every ancestor of the selection, to draw the path. The hierarchy binds against select() ?? pathwayId(), which keeps the old fallback of revealing the pathway when the URL selects something that is not an event in the tree.
• block: 'nearest' everywhere, so nothing moves when the target is already visible and the page is never dragged along. Verified by measurement: the hierarchy scrolls 469px to bring the selected event inside its container, the result row lands directly below the sticky header, and window.scrollY stays 0 in both.
• It respects prefers-reduced-motion, which none of the copies did.

Two places from the list are deliberately untouched. found-table re-scrolls its parent row when its own content finishes loading — that is growth rather than selection, and it does not fit the directive. And the object tree has no selection state to bind to yet; when it gains one, this is a one-line addition.

[adamjohnwright]

Reopening: three of four contexts fixed, one still jumps.

Curators re-tested and reported: "YES-NO — no jumping in the search and the analysis table and none in the upper section of event hierarchy, but pathways near the bottom of the hierarchy (e.g. subevents) still jump."

So the shared implementation fixed search, the analysis table and the upper hierarchy. Deep hierarchy nodes still move when selected. #151 may be the same report from the other direction.