-
Notifications
You must be signed in to change notification settings - Fork 0
refactor(website): migrate covid "compare side-by-side" to React #982
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: 973-migrate-compare-side-by-side-to-react
Are you sure you want to change the base?
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR refactors the COVID "compare side-by-side" page by migrating from Astro-based rendering to a React-based component architecture. The changes centralize the page logic into a reusable generic component while maintaining organism-specific functionality.
- Replaces 130+ lines of inline Astro code with a generic component pattern
- Moves the relative growth advantage visualization to the shared component with organism-specific rendering
- Simplifies the page entry point to a single component instantiation
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| website/src/pages/covid/compare-side-by-side.astro | Replaced inline implementation with GenericCompareSideBySidePage component call |
| website/src/components/views/compareSideBySide/GenericCompareSideBySideDataDisplay.tsx | Added organism-specific conditional rendering for GsRelativeGrowthAdvantage component |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
website/src/components/views/compareSideBySide/GenericCompareSideBySideDataDisplay.tsx
Show resolved
Hide resolved
| const numeratorFilter = { | ||
| ...variantFilter.lineages, | ||
| ...variantFilter.mutations, | ||
| variantQuery: variantFilter.variantQuery, | ||
| ...baselineLapisFilter, | ||
| }; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was another difference to the generic page - but I think the logic is already handled by this:
dashboards/website/src/views/pageStateHandlers/PageStateHandler.ts
Lines 14 to 28 in ae2e48e
| export function toLapisFilterWithVariant({ variantFilter, datasetFilter, additionalFilters }: FilterData) { | |
| if (variantFilter.variantQuery) { | |
| return { | |
| ...toLapisFilterWithoutVariant(datasetFilter, additionalFilters), | |
| variantQuery: variantFilter.variantQuery, | |
| }; | |
| } else { | |
| return { | |
| ...toLapisFilterWithoutVariant(datasetFilter, additionalFilters), | |
| ...variantFilter.lineages, | |
| ...variantFilter.mutations, | |
| advancedQuery: concatenateAdvancedQueries(datasetFilter.advancedQuery, variantFilter.advancedQuery), | |
| }; | |
| } | |
| } |
resolves #981
Summary
Screenshot
PR Checklist
- [ ] All necessary documentation has been adapted.