Skip to content

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.

Sign up for GitHub

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

Open
fengelniederhammer wants to merge 1 commit into
base: 973-migrate-compare-side-by-side-to-react
Choose a base branch
from
Open

refactor(website): migrate covid "compare side-by-side" to React #982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions website/src/components/views/compareSideBySide/GenericCompareSideBySideDataDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { type FC, useMemo } from 'react';

import type { OrganismsConfig } from '../../../config.ts';
import { Organisms } from '../../../types/Organism.ts';
import { chooseGranularityBasedOnDateRange } from '../../../util/chooseGranularityBasedOnDateRange.ts';
import { ComponentHeight } from '../../../views/OrganismConstants.ts';
import type { DatasetAndVariantData } from '../../../views/View.ts';
Expand All @@ -10,6 +11,7 @@ import { compareSideBySideViewKey } from '../../../views/viewKeys.ts';
import { GsAggregate } from '../../genspectrum/GsAggregate.tsx';
import { GsMutations } from '../../genspectrum/GsMutations.tsx';
import { GsPrevalenceOverTime } from '../../genspectrum/GsPrevalenceOverTime.tsx';
import { GsRelativeGrowthAdvantage } from '../../genspectrum/GsRelativeGrowthAdvantage.tsx';

export type GenericCompareSideBySideDataDisplayProps = {
organismViewKey: `${OrganismWithViewKey<typeof compareSideBySideViewKey>}.${typeof compareSideBySideViewKey}`;
Expand Down Expand Up @@ -53,6 +55,14 @@ export const GenericCompareSideBySideDataDisplay: FC<GenericCompareSideBySideDat
height={ComponentHeight.large}
pageSize={10}
/>
{view.organismConstants.organism === Organisms.covid && (
<GsRelativeGrowthAdvantage
numeratorFilter={numeratorFilter}
denominatorFilter={datasetLapisFilter}
lapisDateField={view.organismConstants.mainDateField}
height={ComponentHeight.large}
/>
)}
{hideMutationComponents !== true && (
<>
<GsMutations
Expand Down
130 changes: 3 additions & 127 deletions website/src/pages/covid/compare-side-by-side.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,130 +1,6 @@
---
import GsAggregate from '../../components/genspectrum/GsAggregate.astro';
import GsMutations from '../../components/genspectrum/GsMutations.astro';
import GsPrevalenceOverTime from '../../components/genspectrum/GsPrevalenceOverTime.astro';
import GsRelativeGrowthAdvantage from '../../components/genspectrum/GsRelativeGrowthAdvantage.astro';
import { CompareSideBySidePageStateSelector } from '../../components/pageStateSelectors/CompareSideBySidePageStateSelector';
import { CompareSideBySideSelectorFallback } from '../../components/pageStateSelectors/FallbackElement';
import { toDownloadLink } from '../../components/views/compareSideBySide/toDownloadLink';
import { isStaging, getDashboardsConfig, getLapisUrl } from '../../config';
import OrganismViewPageLayout from '../../layouts/OrganismPage/OrganismViewPageLayout.astro';
import { chooseGranularityBasedOnDateRange } from '../../util/chooseGranularityBasedOnDateRange';
import { ComponentHeight } from '../../views/OrganismConstants';
import { toLapisFilterWithoutVariant } from '../../views/pageStateHandlers/toLapisFilterWithoutVariant';
import type { OrganismViewKey } from '../../views/routing';
import { ServerSide } from '../../views/serverSideRouting';
const organismViewKey: OrganismViewKey = 'covid.compareSideBySideView';
const view = ServerSide.routing.getOrganismView(organismViewKey);
const pageState = view.pageStateHandler.parsePageStateFromUrl(Astro.url);
const downloadLinks = [...pageState.filters.entries()].map(
toDownloadLink(view.pageStateHandler, view.organismConstants.organism),
);
import GenericCompareSideBySidePage from '../../components/views/compareSideBySide/GenericCompareSideBySidePage.astro';
import { Organisms } from '../../types/Organism';
---

<OrganismViewPageLayout view={view} downloadLinks={downloadLinks}>
<gs-app lapis={getLapisUrl(view.organismConstants.organism)}>
<div class='flex overflow-x-auto'>
{
Array.from(pageState.filters).map(([id, { variantFilter, datasetFilter }]) => {
const baselineLapisFilter = toLapisFilterWithoutVariant(
datasetFilter,
view.organismConstants.additionalFilters,
);
const timeGranularity = chooseGranularityBasedOnDateRange({
earliestDate: new Date(view.organismConstants.earliestDate),
dateRange: datasetFilter.dateFilters[view.organismConstants.mainDateField],
});
const numeratorFilter = {
...variantFilter.lineages,
...variantFilter.mutations,
variantQuery: variantFilter.variantQuery,
...baselineLapisFilter,
};
Comment on lines -40 to -45
Copy link
Contributor Author

@fengelniederhammer fengelniederhammer Dec 19, 2025

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),
};
}
}


return (
<div class='flex min-w-[500px] flex-1 flex-col gap-4 border-r-2 border-gray-200 px-2'>
<div class='mb-4'>
{pageState.filters.size > 1 && (
<a
class='block w-full px-2 py-1 text-sm font-light hover:bg-neutral-100'
href={view.pageStateHandler.toUrl(
view.pageStateHandler.removeFilter(pageState, id),
)}
>
Remove column
</a>
)}
<CompareSideBySidePageStateSelector
filterId={id}
initialPageState={pageState}
organismsConfig={getDashboardsConfig().dashboards.organisms}
organismViewKey={organismViewKey}
enableAdvancedQueryFilter={isStaging()}
client:only='react'
>
<CompareSideBySideSelectorFallback
slot='fallback'
numFilters={pageState.filters.size}
/>
</CompareSideBySidePageStateSelector>
</div>

<GsPrevalenceOverTime
numeratorFilters={[
{
displayName: '',
lapisFilter: numeratorFilter,
},
]}
denominatorFilter={baselineLapisFilter}
lapisDateField={view.organismConstants.mainDateField}
granularity={timeGranularity}
height={ComponentHeight.large}
pageSize={10}
/>
<GsRelativeGrowthAdvantage
numeratorFilter={numeratorFilter}
denominatorFilter={baselineLapisFilter}
lapisDateField={view.organismConstants.mainDateField}
height={ComponentHeight.large}
/>
<GsMutations
lapisFilter={numeratorFilter}
baselineLapisFilter={baselineLapisFilter}
sequenceType='nucleotide'
pageSize={10}
/>
<GsMutations
lapisFilter={numeratorFilter}
baselineLapisFilter={baselineLapisFilter}
sequenceType='amino acid'
pageSize={10}
/>
{view.organismConstants.aggregatedVisualizations.compareSideBySide.map(
({ label, fields, views }) => (
<GsAggregate
title={label}
fields={fields}
lapisFilter={numeratorFilter}
views={views}
pageSize={10}
/>
),
)}
</div>
);
})
}
<a
class='py-4 pt-8 text-left text-sm font-light hover:bg-neutral-100'
href={view.pageStateHandler.toUrl(view.pageStateHandler.addEmptyFilter(pageState))}
style='writing-mode: vertical-rl;'
>
Add column
</a>
</div>
</gs-app>
</OrganismViewPageLayout>
<GenericCompareSideBySidePage organism={Organisms.covid} />