feat: add history events filter - #720
Conversation
Adds an event-type filter to the account History tab. The filter button sits on the nav row beside the tabs; HistoryView consumes the selection to decide which events to display. HorizontalScrollContainer gains a hideBorder prop so the parent can draw a divider spanning the filter.
|
@moudi-network is attempting to deploy a commit to the Livepeer Foundation Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughAdds event-type filtering to account history through a new popover, shared filter metadata, layout-owned selection state, filtered event rendering, tailored empty states, and updated infinite scrolling. Also adds an optional ChangesHistory event filtering feature
Horizontal scroll border option
Estimated code review effort: 3 (Moderate) | ~30 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant HistoryFilter
participant AccountLayout
participant HistoryView
User->>HistoryFilter: toggle event filter
HistoryFilter->>AccountLayout: onToggle(filterKey)
AccountLayout->>AccountLayout: update selectedHistoryFilters
AccountLayout->>HistoryView: pass selectedFilters
HistoryView->>HistoryView: compute visibleEvents
alt no events visible
HistoryView->>User: show tailored empty state
else events visible
HistoryView->>User: render filtered history
end
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install timed out. The project may have too many dependencies for the sandbox. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/HistoryView/HistoryFilter.tsx`:
- Around line 159-186: The All and None controls in HistoryFilter are
duplicating the same inline button styles, which should be centralized to
prevent drift. Extract the shared css object or a small reusable button
component for the two Box as="button" elements in HistoryFilter, and update
onSelectAll/onClear usage to reference that shared styling so both buttons stay
consistent as the popover changes.
- Around line 190-215: The filter rows in HistoryFilter are mouse-only because
the Flex wrapper handles onClick but is not focusable or keyboard-operable,
while the Checkbox is removed from the tab order. Update the row interaction in
EVENT_FILTERS.map so each row can receive focus and toggle via keyboard, using
the existing onToggle(filter.key) behavior. Ensure the clickable row has
appropriate accessibility semantics and key handling so users can activate it
without a mouse.
In `@layouts/account.tsx`:
- Around line 301-306: The tab anchor list in the tabs.map render is using the
array index as the React key, which is unstable. Update the key on the A/Link
element in the tab rendering logic to use the stable unique tab.href value
instead of i, keeping the rest of the tab mapping behavior unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: e40da406-9ca3-44ab-8de7-134bdfc2bf7d
📒 Files selected for processing (4)
components/HistoryView/HistoryFilter.tsxcomponents/HistoryView/index.tsxcomponents/HorizontalScrollContainer/index.tsxlayouts/account.tsx
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@moudi-network thanks for the contribution. @mehrdadmms did an initial review, and everything looks good so far. The implementation works, and the code quality is high enough for the bounty to be paid out. I may request a few minor code and UI changes after Adam has reviewed it. |
Having a single toggle to either select all or none would be very user friendly. Also the unchecked checkbox outline is also very faint against the popover background. |
Added the toggle now on 
|
There was a problem hiding this comment.
Pull request overview
Adds a display-only, event-type filter to the Account History tab by lifting filter state to AccountLayout, rendering a new filter popover beside the tabs, and updating HistoryView to render only events matching the selected filter keys while keeping pagination/filtering concerns separated.
Changes:
- Introduces
HistoryFilterpopover UI with event-type categories, All/None shortcuts, and an active-count badge. - Lifts filter state to
layouts/account.tsxso the filter button can live in the account nav row whileHistoryViewconsumes the selection. - Refactors
HistoryViewinfinite scroll to use a callback-refIntersectionObserverto avoid re-trigger loops with short filtered lists, and adds consistent empty states.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| layouts/account.tsx | Lifts history filter state into the account layout and places the filter button beside the tabs; passes selection into HistoryView. |
| components/HorizontalScrollContainer/index.tsx | Adds hideBorder to let a parent container draw a unified divider across tabs + actions. |
| components/HistoryView/index.tsx | Filters rendered events based on selected filter keys; refactors infinite scroll observer; adds shared empty-state card. |
| components/HistoryView/HistoryFilter.tsx | New popover component defining filter categories and UI interactions (toggle, all/none, badge). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
ECWireless
left a comment
ECWireless
left a comment
There was a problem hiding this comment.
Given the following note...
History filtering is display-only. Loading/paging is identical to the unfiltered view (fetchNext no-ops at the end); the filter never changes what's fetched, only what's rendered.
... there could be instances of an old event (say, on subgraph page 3) never showing up because the load new page trigger only goes off once when there are no events on a given page.
As an example: say there is 1 reward claim event on page 3 and nowhere else. If a user wants to find this event through the filter, they would never be able to, since when there are no events on page 1, it triggers page 2 to load, but no events on page 2 does not trigger a new page because the load event never leaves the window (page loads trigger when it leaves and enters the window).
All this being said, I am not sure that this should block the PR. However, it is technically a regression. Ideally the subgraph would be able to add a filter for this. But without that, we may want to add a manual "Load earlier history" button with the text "No matching events found since ." above it. What do you think @rickstaa ?
Another regression appears to be that the RewardCallerSetEvent is being automatically filtered out even with all events are selected. See the difference between https://explorer.livepeer.org/accounts/0x5be44e23041e93cdf9bcd5a0968524e104e38ae1/history and https://explorer-arbitrum-one-git-fork-moudi-d2d163-livepeer-foundation.vercel.app/accounts/0x5be44e23041e93cdf9bcd5a0968524e104e38ae1/history. Notice that "set reward caller" appears on the former, but not the latter.
Description
Adds an event-type filter to the account History tab. A "Filter" popover on the nav row lets you show/hide history by event type (12 categories: Delegated, Reward calls, Reward cut & fee changes, Winning tickets, Votes, etc.), with All/None shortcuts and an active-count badge. Filter state is lifted to
AccountLayoutso the button sits beside the tabs whileHistoryViewconsumes it.Filtering is purely display-side: paging/loading is filter-agnostic, so the filter only changes what's shown, never what's fetched.
Type of Change
Related Issue(s)
Related: #711
Closes: #511
Changes Made
Filter
components/HistoryView/HistoryFilter.tsx. A popover that filters history events by type.EVENT_FILTERSmaps each human-readable label to one or more event__typenames, with a reverseTYPENAME_TO_FILTERlookup; includes All/None shortcuts and an active-count badgeselectedHistoryFilters) intolayouts/account.tsxso the Filter button renders on the nav row beside the tabs;HistoryViewtakes aselectedFiltersprop and renders only matching events (visibleEvents)hideBorderprop tocomponents/HorizontalScrollContainerso the parent can draw a divider that spans both the tabs and the filter button on the nav rowIntersectionObserverthat attaches once on sentinel mount, so paging never self-retriggers (a re-created observer would re-fire on the in-view sentinel and crawl the entire history on a short filtered list)EmptyStatecard (matching Gateway/Delegator lists) with contextual messagesTesting
How to test (optional unless test is not trivial)
Filter
pnpm typecheck,pnpm exec eslint … --max-warnings 0,prettierall clean.Impact / Risk
Risk level: Low
Impacted areas: UI only (History tab nav row + filter popover). Display-only filtering. No DB, infra, config, API, or server code.
User impact: The History tab gains a Filter popover to narrow events by type. Default shows all events (current behavior), so the change is purely additive. Nothing existing is altered.
Rollback plan: Plain PR revert. The change is additive (new
HistoryFiltercomponent + aselectedFiltersprop + ahideBorderprop), so reverting removes the filter with no migration or config cleanup.Screenshots / Recordings (if applicable)
Additional Notes
fetchNextno-ops at the end); the filter never changes what's fetched, only what's rendered.Summary by CodeRabbit
hideBorderoption to horizontal scroll containers for cases where the bottom border should be removed.