Skip to content

fix: scroll the logs search page to the bottom on chart clicks and the subnav link - #3969

Merged
Ziinc merged 2 commits into
mainfrom
fix/search-scroll-to-bottom
Sep 14, 2026
Merged

Ziinc merged 2 commits into
mainfrom
fix/search-scroll-to-bottom

Conversation

@chasers

@chasers chasers commented Sep 12, 2026

Copy link
Copy Markdown
Contributor

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 dispatches logflare: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 sets tailing? to false. Since #3688 the SourceLogsSearchList hook 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? on datetime_update and pushes scroll-to-bottom when that search's first event page lands. The hook handles the event in mounted/0. 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.

Verification

  • mix test test/logflare_web/live/search_live/logs_search_lv_test.exs — 89 tests, 0 failures, including a new assertion that datetime_update pushes scroll-to-bottom once 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

…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
@chasers

chasers commented Sep 12, 2026

Copy link
Copy Markdown
Contributor Author

Follow-up commit: the top Load more button.

The older page was loading 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 already 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 for :previous now pushes scroll-to-event with the DOM id of the oldest loaded row, and the hook scrolls it into view. The bottom button, tailing, and scroll-to-bottom are unchanged. The pagination test asserts the push and that no scroll-to-bottom fires.

Verified: logs_search_lv_test.exs 89/0, npm test 65/0, MIX_ENV=test mix ci exit 0.

@chasers
chasers changed the base branch from main to master September 12, 2026 21:38
@chasers
chasers added this pull request to stack #3971 September 12, 2026 21:38
@chasers
chasers removed this pull request from stack #3971 September 12, 2026 21:38
@chasers
chasers changed the base branch from master to main September 12, 2026 21:38
@chasers
chasers added this pull request to stack #3972 September 12, 2026 21:38
@Ziinc
Ziinc merged commit 4a39872 into main Sep 14, 2026
16 checks passed
@Ziinc
Ziinc deleted the fix/search-scroll-to-bottom branch September 14, 2026 03:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants