Move filter clear button to header with round × icon#97
Merged
Conversation
Copilot
AI
changed the title
[WIP] Move clear button for filters to the header
Move filter clear button to header with round × icon
Jun 4, 2026
The applyThemeLink function was directly assigning to link.href property, which triggered Vite's reactivity system and caused the browser to hang/crash. Replace with setAttribute() to avoid HMR loops and ensure stable page loads.
Resolves 'command not found: storybook' error when running yarn dev. Use npx to resolve storybook from node_modules/.bin/
Resolved browser crash caused by infinite React render loops when viewing FilterPanel stories in Storybook. Root causes: - Filter arrays defined inline in stories created new references on every render - useFilterState hook had filters array in useEffect dependency, triggering on every reference change - buildEditorMap() called on every render without memoization Fixes applied: - useFilterState: Added key serialization to detect actual filter changes vs reference changes - FilterPanel: Memoized editorMap with useMemo - All stories: Wrapped filter definitions with useMemo for stable references All FilterPanel story variants now load and interact correctly without crashing.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Relocated clear button from filter content area to header, positioned next to the active selection count badge. Button is now a round × icon with tooltip, consistent across all filter types.
Changed
RangeHistogramFilterno longer renders its own clear button—handled by parentFilterPanel(#issue)Implementation
FilterPanel.tsx: Clear buttons conditionally rendered in header for all filter types:
onFilterClear(filterKey)onRangeChange(filterKey, null)onCustomValueChange(filterKey, undefined)CSS:
.pv-filter-clear-headerwith circular shape, transitions, and accessibility attributes.Specs: Four specification files document expected behavior (when buttons appear, what actions they trigger, tooltip text).