fix: scroll the logs search page to the bottom on chart clicks and the subnav link - #3969
Conversation
…e subnav link Two breaks on the logs search page. The subnav "scroll down" link called `Source.scrollOverflowBottom/0`, which selects `#logs-list li:nth(0)`. `:nth()` is not a jQuery 3 selector, so the click throws and nothing scrolls. The link now dispatches `logflare:scroll-to-bottom`, the same pattern as the copy link, and the function is removed. A click or a drag-selection on the bar chart pushes `datetime_update`, which sets `tailing?` to false. Since #3688 the `SourceLogsSearchList` hook only scrolls to the bottom while tailing, so the page stayed where it was. Before #3688 every list update scrolled to the bottom as a side effect. The LiveView now sets `scroll_to_bottom_on_result?` on `datetime_update` and pushes `scroll-to-bottom` when that search's first event page lands. Pagination keeps its scroll anchor. `scrollToPageBottom/0` in `assets/js/utils.js` is the single implementation for the hook, the window listener and the link. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YQ8Y8zCvSKUFNPvkwH2WS4
The top "Load more" button loads the older page correctly: `#logs-list` is `column-reverse`, rows are newest-first, and `put_event_page/3` appends the page at the DOM end, which is the visual top. The pagination tests assert that order. What hid it: `SourceLogsSearchList.updated/0` restores the scroll anchor, so the existing rows keep their screen position and the new rows land above the viewport together with the button. Nothing appears to change. `put_event_page/3` now pushes `scroll-to-event` with the DOM id of the oldest loaded row, the visual top of the new page, and the hook scrolls it into view. The bottom button, tailing, and `scroll-to-bottom` are unchanged. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YQ8Y8zCvSKUFNPvkwH2WS4
|
Follow-up commit: the top Load more button. The older page was loading correctly. What hid it:
Verified: |
Two breaks on the logs search page.
Subnav "scroll down" link did nothing
The link called
Source.scrollOverflowBottom/0, which selects#logs-list li:nth(0).:nth()is not a jQuery 3 selector, so the click throws. Even if it ran, it targeted the first event, which is the top of the list. The link now dispatcheslogflare:scroll-to-bottom, the same pattern the copy link uses, and the function is removed.Chart clicks and drag-selections did not scroll to the results
The chart pushes
datetime_update, which setstailing?tofalse. Since #3688 theSourceLogsSearchListhook scrolls to the bottom only while tailing and otherwise restores the previous scroll anchor, so the page stayed put. Before #3688 every list update scrolled to the bottom as a side effect.The LiveView now sets
scroll_to_bottom_on_result?ondatetime_updateand pushesscroll-to-bottomwhen that search's first event page lands. The hook handles the event inmounted/0. Pagination keeps its scroll anchor.scrollToPageBottom/0inassets/js/utils.jsis the single implementation for the hook, the window listener and the link.Verification
mix test test/logflare_web/live/search_live/logs_search_lv_test.exs— 89 tests, 0 failures, including a new assertion thatdatetime_updatepushesscroll-to-bottomonce and clears the flag.npm test— 63 tests, 0 failures, with two new files covering the hook handler and the helper.MIX_ENV=test mix ci— exit 0.🤖 Generated with Claude Code
https://claude.ai/code/session_01YQ8Y8zCvSKUFNPvkwH2WS4