feat(website): don't reload the whole page when applying the filters

[fengelniederhammer]

resolves #984

Summary

Screenshot

PR Checklist

• All necessary documentation has been adapted.
• The implemented feature is covered by an appropriate test.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
dashboards	Ready	Preview, Comment	Jan 13, 2026 7:23am

[Copilot]

Pull request overview

This PR implements client-side filter application without full page reloads. When users apply filters, the page state is now updated dynamically via React hooks and the URL is modified using the History API, rather than triggering a navigation event.

Key changes:

• Introduced a usePageState hook that manages page state in React and syncs it with the URL
• Converted filter application from anchor links to button clicks with state updates
• Implemented draft state management in filter selectors to allow modifications before applying

Reviewed changes

Copilot reviewed 31 out of 31 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
website/src/components/views/usePageState.ts	New hook that manages page state from URL and updates URL via History API
website/src/components/pageStateSelectors/ApplyFilterButton.tsx	Changed from anchor link to button with onClick handler
website/src/components/pageStateSelectors/SingleVariantPageStateSelector.tsx	Manages draft state and syncs with parent page state via useEffect
website/src/components/pageStateSelectors/CompareVariantsPageStateSelector.tsx	Added draft state management with useEffect synchronization
website/src/components/pageStateSelectors/CompareVariantsToBaselineStateSelector.tsx	Added draft state management with useEffect synchronization
website/src/components/pageStateSelectors/CompareSideBySidePageStateSelector.tsx	Added draft state management with useEffect synchronization
website/src/components/pageStateSelectors/SequencingEffortsPageStateSelector.tsx	Added draft state management with useEffect synchronization
website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx	Added setPageState prop to apply filters without reload
website/src/components/views/analyzeSingleVariant/CollectionsList.tsx	Changed from link navigation to state updates via setPageState
website/src/components/views/analyzeSingleVariant/QuickstartLinks.tsx	Changed from href links to onClick handlers for filter application
website/src/components/views/wasap/WasapPage.tsx	Integrated usePageState hook and removed currentUrl prop
website/src/components/views/wasap/Wasap.astro	Removed URL prop passing to React component
website/src/views/OrganismConstants.ts	Added earliestDate field to OrganismConstants interface
website/src/components/genspectrum/GsSequencesByLocation.tsx	Added key prop to force remount when mapName changes

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[fhennig]

Looks good! Just a minor docs thing

[fhennig]

This is quite central to the whole working of the dashboards now. I like it! I think because it's important, it'd be good to add documentation; it'll help new people find their way around the codebase when we explain some core mechanisms here. Maybe something like this:

Given a PageStateHandler, this hook initially parses the page state from the current URL. It returns a pageState object and a setPageState function. When the function is called, the new page state is turned into a URL and set as the current URL (added to the page history). This way, the URL and current page state are kept in sync.

[fhennig]

const { pageState: { base, analysis }, setPageState } = usePageState(pageStateHandler);