Description
On the leaderboard page, if a search filter is active (or if zero-score users are filtered out), the number of displayable records is significantly lower than the total user database. However, the pagination logic in pagination.js recalculates totalPages using the raw list length from the global dataset:
// frontend/js/leaderboard/pagination.js
const totalPages = Math.ceil(
leaderboardData[activeDatasetType].length / itemsPerPage
);
This causes the pagination controls to generate extra, empty pages. Users are able to click "Next" and navigate to empty rows beyond the active search results.
Steps to Reproduce
Go to the Leaderboard.
In the search box, search for a rare pattern that matches only 2 or 3 users (e.g., grep -i rare_pattern).
Notice that the pagination controls at the bottom still show multiple pages. Clicking "Next" takes you to pages with zero results.
Expected Behavior
totalPages calculation should dynamically scale based on the length of the filtered results (renderableData.length) rather than the absolute size of the dataset.
Proposed Solution
Modify setupPaginationListeners in frontend/js/leaderboard/pagination.js to read from the dynamic length of the filtered records instead of the raw leaderboardData length.
Description
On the leaderboard page, if a search filter is active (or if zero-score users are filtered out), the number of displayable records is significantly lower than the total user database. However, the pagination logic in
pagination.jsrecalculatestotalPagesusing the raw list length from the global dataset:This causes the pagination controls to generate extra, empty pages. Users are able to click "Next" and navigate to empty rows beyond the active search results.
Steps to Reproduce
Go to the Leaderboard.
In the search box, search for a rare pattern that matches only 2 or 3 users (e.g., grep -i rare_pattern).
Notice that the pagination controls at the bottom still show multiple pages. Clicking "Next" takes you to pages with zero results.
Expected Behavior
totalPages calculation should dynamically scale based on the length of the filtered results (renderableData.length) rather than the absolute size of the dataset.
Proposed Solution
Modify setupPaginationListeners in frontend/js/leaderboard/pagination.js to read from the dynamic length of the filtered records instead of the raw leaderboardData length.