diff --git a/website/src/components/pageStateSelectors/DynamicDateFilter.tsx b/website/src/components/pageStateSelectors/DynamicDateFilter.tsx
index 26a966a73..61c447345 100644
--- a/website/src/components/pageStateSelectors/DynamicDateFilter.tsx
+++ b/website/src/components/pageStateSelectors/DynamicDateFilter.tsx
@@ -46,7 +46,7 @@ export function DynamicDateFilter({
// When the value has a "Custom" label, try to match it back to one of the generated options
// by comparing dateFrom and dateTo. If there's a match, use that option's label instead of "Custom".
const normalizedValue = useMemo(() => {
- if (value === undefined || value.label !== CustomDateRangeLabel) {
+ if (value?.label !== CustomDateRangeLabel) {
return value;
}
diff --git a/website/src/components/pageStateSelectors/FallbackElement.tsx b/website/src/components/pageStateSelectors/FallbackElement.tsx
deleted file mode 100644
index ed5d3090e..000000000
--- a/website/src/components/pageStateSelectors/FallbackElement.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-export function SequencingEffortsSelectorFallback() {
- return ;
-}
-
-export function AnalyzeSingleVariantSelectorFallback() {
- return ;
-}
-
-export function CompareSideBySideSelectorFallback({ numFilters }: { numFilters: number }) {
- return (
-
- {numFilters > 2 && }
- {numFilters <= 2 && }
-
- );
-}
-
-export function CompareToBaselineSelectorFallback({ numFilters }: { numFilters: number }) {
- return (
- <>
-
- {Array.from({ length: numFilters }).map((_, index) => (
-
- ))}
-
- );
-}
-
-export function CompareVariantsSelectorFallback({ numFilters }: { numFilters: number }) {
- return (
- <>
-
- {Array.from({ length: numFilters }).map((_, index) => (
-
- ))}
-
- );
-}
diff --git a/website/src/components/pageStateSelectors/SequencingEffortsPageStateSelector.tsx b/website/src/components/pageStateSelectors/SequencingEffortsPageStateSelector.tsx
index ee58b8bca..e095837a5 100644
--- a/website/src/components/pageStateSelectors/SequencingEffortsPageStateSelector.tsx
+++ b/website/src/components/pageStateSelectors/SequencingEffortsPageStateSelector.tsx
@@ -1,33 +1,31 @@
-import { useMemo, useState } from 'react';
+import { type Dispatch, type SetStateAction, useEffect, useMemo, useState } from 'react';
import { ApplyFilterButton } from './ApplyFilterButton.tsx';
import { BaselineSelector } from './BaselineSelector.tsx';
import { LineageFilterInput } from './LineageFilterInput.tsx';
import { SelectorHeadline } from './SelectorHeadline.tsx';
-import { type OrganismsConfig } from '../../config.ts';
import { Inset } from '../../styles/Inset.tsx';
+import { GenericSequencingEffortsView } from '../../views/BaseView.ts';
+import type { OrganismConstants } from '../../views/OrganismConstants.ts';
import type { DatasetAndVariantData } from '../../views/View.ts';
-import { type OrganismViewKey, Routing } from '../../views/routing.ts';
-import type { sequencingEffortsViewKey } from '../../views/viewKeys.ts';
export function SequencingEffortsPageStateSelector({
- organismViewKey,
- organismsConfig,
- initialPageState,
+ view,
+ pageState,
+ setPageState,
enableAdvancedQueryFilter,
}: {
- organismViewKey: OrganismViewKey & `${string}.${typeof sequencingEffortsViewKey}`;
- organismsConfig: OrganismsConfig;
- initialPageState: DatasetAndVariantData;
+ view: GenericSequencingEffortsView;
+ pageState: DatasetAndVariantData;
+ setPageState: Dispatch>;
enableAdvancedQueryFilter: boolean;
}) {
- const view = useMemo(() => new Routing(organismsConfig), [organismsConfig]).getOrganismView(organismViewKey);
-
- const [pageState, setPageState] = useState(initialPageState);
+ const [draftPageState, setDraftPageState] = useState(pageState);
+ useEffect(() => setDraftPageState(pageState), [pageState]);
const currentLapisFilter = useMemo(() => {
- return view.pageStateHandler.toLapisFilter(pageState);
- }, [pageState, view.pageStateHandler]);
+ return view.pageStateHandler.toLapisFilter(draftPageState);
+ }, [draftPageState, view.pageStateHandler]);
return (
diff --git a/website/src/components/pageStateSelectors/wasap/InfoBlocks.tsx b/website/src/components/pageStateSelectors/wasap/InfoBlocks.tsx
index e5bf4cdf4..e8505938d 100644
--- a/website/src/components/pageStateSelectors/wasap/InfoBlocks.tsx
+++ b/website/src/components/pageStateSelectors/wasap/InfoBlocks.tsx
@@ -97,6 +97,13 @@ export function DefineClinicalSignatureInfo() {
indicate that either not all sequences of the variant have the mutation or not all sequences with the
mutation belong to the variant (or both).
+
+
Time Frame
+
+ Time frame for sequence selection. Shorter windows reduce dominance of well-sequenced historical
+ variants, yielding higher Jaccard values for emerging variants with fewer clinical sequences. Use this
+ filter to exclude variants no longer in circulation when assessing significance of current mutations.
+
);
}
diff --git a/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx b/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
index 811c21333..62d18f6de 100644
--- a/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
+++ b/website/src/components/pageStateSelectors/wasap/WasapPageStateSelector.tsx
@@ -1,5 +1,5 @@
import { useQuery } from '@tanstack/react-query';
-import { useState } from 'react';
+import { type Dispatch, type SetStateAction, useState } from 'react';
import { ApplyFilterButton } from '../ApplyFilterButton';
import { DynamicDateFilter } from '../DynamicDateFilter';
@@ -34,11 +34,13 @@ export function WasapPageStateSelector({
pageStateHandler,
initialBaseFilterState,
initialAnalysisFilterState,
+ setPageState,
}: {
config: WasapPageConfig;
pageStateHandler: PageStateHandler;
initialBaseFilterState: WasapBaseFilter;
initialAnalysisFilterState: WasapAnalysisFilter;
+ setPageState: Dispatch>;
}) {
const [baseFilterState, setBaseFilterState] = useState(initialBaseFilterState);
@@ -201,7 +203,11 @@ export function WasapPageStateSelector({
}
})()}
-
+
);
}
diff --git a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx
index e2e23b58e..dca132918 100644
--- a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx
+++ b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.browser.spec.tsx
@@ -17,6 +17,7 @@ describe('VariantExplorerFilter', () => {
minProportion: 0.05,
minCount: 10,
minJaccard: 0.5,
+ timeFrame: 'all',
};
it('calls setPageState when changing sequence type', async ({ routeMockers: { lapis } }) => {
diff --git a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
index 86624a8c3..635f01fb7 100644
--- a/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
+++ b/website/src/components/pageStateSelectors/wasap/filters/VariantExplorerFilter.tsx
@@ -1,6 +1,11 @@
import { Inset } from '../../../../styles/Inset';
import { GsLineageFilter } from '../../../genspectrum/GsLineageFilter';
-import type { WasapVariantFilter } from '../../../views/wasap/wasapPageConfig';
+import {
+ VARIANT_TIME_FRAME,
+ variantTimeFrameLabel,
+ type VariantTimeFrame,
+ type WasapVariantFilter,
+} from '../../../views/wasap/wasapPageConfig';
import { SelectorHeadline } from '../../SelectorHeadline';
import { DefineClinicalSignatureInfo } from '../InfoBlocks';
import { LabeledField } from '../utils/LabeledField';
@@ -70,6 +75,21 @@ export function VariantExplorerFilter({
step={0.01}
onChange={(v) => setPageState({ ...pageState, minJaccard: v })}
/>
+
+
+
);
diff --git a/website/src/components/views/analyzeSingleVariant/CollectionsList.tsx b/website/src/components/views/analyzeSingleVariant/CollectionsList.tsx
index 0af04924c..d20b9b051 100644
--- a/website/src/components/views/analyzeSingleVariant/CollectionsList.tsx
+++ b/website/src/components/views/analyzeSingleVariant/CollectionsList.tsx
@@ -1,15 +1,12 @@
import { useQuery } from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
+import { type Dispatch, type SetStateAction, useState } from 'react';
import { z } from 'zod';
import { getClientLogger } from '../../../clientLogger.ts';
-import type { OrganismsConfig } from '../../../config.ts';
import { type CovidVariantData } from '../../../views/covid.ts';
-import { Routing } from '../../../views/routing.ts';
import { useErrorToast } from '../../ErrorReportInstruction.tsx';
-import { withQueryProvider } from '../../subscriptions/backendApi/withQueryProvider.tsx';
-export const collectionVariantClassName = 'border bg-white px-4 py-2 hover:bg-cyan border-gray-200';
+export const collectionVariantClassName = 'border bg-white px-4 py-2 hover:bg-cyan border-gray-200 cursor-pointer';
type CollectionVariant = {
name: string;
@@ -25,12 +22,11 @@ type Collection = {
type CollectionsListProps = {
initialCollectionId?: number;
- organismsConfig: OrganismsConfig;
+ pageState: CovidVariantData;
+ setPageState: Dispatch>;
};
-export const CollectionsList = withQueryProvider(CollectionsListInner);
-
-function CollectionsListInner({ initialCollectionId, organismsConfig }: CollectionsListProps) {
+export function CollectionsList({ initialCollectionId, pageState, setPageState }: CollectionsListProps) {
const [selectedCollectionId, setSelectedCollectionId] = useState(initialCollectionId ?? 1);
const query = useQuery({
@@ -56,7 +52,8 @@ function CollectionsListInner({ initialCollectionId, organismsConfig }: Collecti
/>
c.id === selectedCollectionId) ?? query.data[0]}
- organismsConfig={organismsConfig}
+ pageState={pageState}
+ setPageState={setPageState}
/>
);
@@ -96,10 +93,11 @@ const querySchema = z.object({
type CollectionVariantListProps = {
collection: Collection;
- organismsConfig: OrganismsConfig;
+ pageState: CovidVariantData;
+ setPageState: Dispatch>;
};
-function CollectionVariantList({ collection, organismsConfig }: CollectionVariantListProps) {
+function CollectionVariantList({ collection, pageState, setPageState }: CollectionVariantListProps) {
const variants = collection.variants;
return (
@@ -108,8 +106,9 @@ function CollectionVariantList({ collection, organismsConfig }: CollectionVarian
))}
@@ -118,32 +117,37 @@ function CollectionVariantList({ collection, organismsConfig }: CollectionVarian
type VariantLinkProps = {
variant: CollectionVariant;
- organismsConfig: OrganismsConfig;
collectionId: number;
+ pageState: CovidVariantData;
+ setPageState: Dispatch>;
};
-function VariantLink({ variant, organismsConfig, collectionId }: VariantLinkProps) {
- const variantLink = useVariantLink(organismsConfig, collectionId, variant);
+function VariantLink({ variant, collectionId, pageState, setPageState }: VariantLinkProps) {
+ const newPageState = useVariantLinkPageState(pageState, collectionId, variant);
+
+ const applyFilters = () => {
+ if (newPageState === undefined) {
+ return;
+ }
+ setPageState(newPageState);
+ };
return (
-
+
+
);
}
const logger = getClientLogger('CollectionList');
-function useVariantLink(organismsConfig: OrganismsConfig, collectionId: number, variant: CollectionVariant) {
- const routing = useMemo(() => new Routing(organismsConfig), [organismsConfig]);
-
+function useVariantLinkPageState(
+ currentPageState: CovidVariantData,
+ collectionId: number,
+ variant: CollectionVariant,
+): CovidVariantData | undefined {
const { showErrorToast } = useErrorToast(logger);
- const currentPageState = routing
- .getOrganismView('covid.singleVariantView')
- .pageStateHandler.parsePageStateFromUrl(new URL(window.location.href));
- let newPageState: CovidVariantData;
-
const queryParseResult = querySchema.safeParse(JSON.parse(variant.query));
if (!queryParseResult.success) {
@@ -158,7 +162,7 @@ function useVariantLink(organismsConfig: OrganismsConfig, collectionId: number,
const query = queryParseResult.data;
if (query.variantQuery !== undefined) {
- newPageState = {
+ return {
...currentPageState,
collectionId: collectionId,
variantFilter: {
@@ -168,7 +172,7 @@ function useVariantLink(organismsConfig: OrganismsConfig, collectionId: number,
},
};
} else {
- newPageState = {
+ return {
...currentPageState,
collectionId: collectionId,
variantFilter: {
@@ -184,5 +188,4 @@ function useVariantLink(organismsConfig: OrganismsConfig, collectionId: number,
},
};
}
- return routing.getOrganismView('covid.singleVariantView').pageStateHandler.toUrl(newPageState);
}
diff --git a/website/src/components/views/analyzeSingleVariant/CovidSingleVariantDataDisplay.tsx b/website/src/components/views/analyzeSingleVariant/CovidSingleVariantDataDisplay.tsx
index b07241b50..8ee878318 100644
--- a/website/src/components/views/analyzeSingleVariant/CovidSingleVariantDataDisplay.tsx
+++ b/website/src/components/views/analyzeSingleVariant/CovidSingleVariantDataDisplay.tsx
@@ -1,17 +1,13 @@
import { views } from '@genspectrum/dashboard-components/util';
-import { type FC, useMemo } from 'react';
+import { type Dispatch, type FC, type SetStateAction } from 'react';
import { CollectionsList } from './CollectionsList.tsx';
import { SelectVariant } from './SelectVariant.tsx';
-import type { OrganismsConfig } from '../../../config.ts';
-import type { Organisms } from '../../../types/Organism.ts';
import { chooseGranularityBasedOnDateRange } from '../../../util/chooseGranularityBasedOnDateRange.ts';
import { hasOnlyUndefinedValues } from '../../../util/hasOnlyUndefinedValues.ts';
-import type { CovidVariantData } from '../../../views/covid.ts';
+import { CovidAnalyzeSingleVariantView, type CovidVariantData } from '../../../views/covid.ts';
import { getLocationSubdivision } from '../../../views/locationHelpers.ts';
import { locationFieldsToFilterIdentifier } from '../../../views/pageStateHandlers/locationFilterFromToUrl.ts';
-import { Routing } from '../../../views/routing.ts';
-import type { singleVariantViewKey } from '../../../views/viewKeys.ts';
import { ComponentsGrid } from '../../ComponentsGrid.tsx';
import { GsAggregate } from '../../genspectrum/GsAggregate.tsx';
import { GsMutations } from '../../genspectrum/GsMutations.tsx';
@@ -21,18 +17,16 @@ import { GsRelativeGrowthAdvantage } from '../../genspectrum/GsRelativeGrowthAdv
import { GsStatistics } from '../../genspectrum/GsStatistics.tsx';
export type CovidSingleVariantDataDisplayProps = {
- organismViewKey: `${typeof Organisms.covid}.${typeof singleVariantViewKey}`;
- organismsConfig: OrganismsConfig;
+ view: CovidAnalyzeSingleVariantView;
pageState: CovidVariantData;
+ setPageState: Dispatch>;
};
export const CovidSingleVariantDataDisplay: FC = ({
- organismViewKey,
- organismsConfig,
+ view,
pageState,
+ setPageState,
}) => {
- const view = useMemo(() => new Routing(organismsConfig), [organismsConfig]).getOrganismView(organismViewKey);
-
const variantFilter = view.pageStateHandler.toLapisFilter(pageState);
const datasetLapisFilter = view.pageStateHandler.toLapisFilterWithoutVariant(pageState);
const timeGranularity = chooseGranularityBasedOnDateRange({
@@ -55,7 +49,8 @@ export const CovidSingleVariantDataDisplay: FC
diff --git a/website/src/components/views/analyzeSingleVariant/CovidSingleVariantReactPage.tsx b/website/src/components/views/analyzeSingleVariant/CovidSingleVariantReactPage.tsx
new file mode 100644
index 000000000..438ea46b9
--- /dev/null
+++ b/website/src/components/views/analyzeSingleVariant/CovidSingleVariantReactPage.tsx
@@ -0,0 +1,76 @@
+import { type FC, useMemo } from 'react';
+
+import { CollectionsList } from './CollectionsList.tsx';
+import { CovidSingleVariantDataDisplay } from './CovidSingleVariantDataDisplay.tsx';
+import type { OrganismsConfig } from '../../../config.ts';
+import { SingleVariantOrganismPageLayout } from '../../../layouts/OrganismPage/SingleVariantOrganismPageLayout.tsx';
+import { hasOnlyUndefinedValues } from '../../../util/hasOnlyUndefinedValues.ts';
+import { toDisplayName } from '../../../views/pageStateHandlers/PageStateHandler.ts';
+import { type OrganismViewKey, Routing } from '../../../views/routing.ts';
+import { SelectorHeadline } from '../../pageStateSelectors/SelectorHeadline.tsx';
+import { SingleVariantPageStateSelector } from '../../pageStateSelectors/SingleVariantPageStateSelector.tsx';
+import { sanitizeForFilename } from '../compareSideBySide/toDownloadLink.ts';
+import { usePageState } from '../usePageState.ts';
+
+export type CovidSingleVariantReactPageProps = {
+ organismsConfig: OrganismsConfig;
+ isStaging: boolean;
+};
+
+export const CovidSingleVariantReactPage: FC = ({ organismsConfig, isStaging }) => {
+ const organismViewKey: OrganismViewKey = 'covid.singleVariantView';
+ const view = useMemo(() => new Routing(organismsConfig).getOrganismView(organismViewKey), [organismsConfig]);
+
+ const { pageState, setPageState } = usePageState(view.pageStateHandler);
+
+ const variantFilter = view.pageStateHandler.toLapisFilter(pageState);
+
+ const noVariantSelected = hasOnlyUndefinedValues(pageState.variantFilter);
+
+ const displayName = toDisplayName(pageState.variantFilter);
+ const downloadLinks = noVariantSelected
+ ? [
+ {
+ label: 'Download all accessions',
+ filter: variantFilter,
+ downloadFileBasename: `${view.organismConstants.organism}_accessions`,
+ },
+ ]
+ : [
+ {
+ label: `Download accessions of ${displayName}`,
+ filter: variantFilter,
+ downloadFileBasename: `${view.organismConstants.organism}_${sanitizeForFilename(displayName)}_accessions`,
+ },
+ ];
+
+ return (
+
+
+
+
+ Collections
+
+
+
+ }
+ dataDisplay={
+
+ }
+ />
+ );
+};
diff --git a/website/src/components/views/analyzeSingleVariant/GenericAnalyseSingleVariantDataDisplay.tsx b/website/src/components/views/analyzeSingleVariant/GenericAnalyseSingleVariantDataDisplay.tsx
index 8dbdf3865..0bd266e27 100644
--- a/website/src/components/views/analyzeSingleVariant/GenericAnalyseSingleVariantDataDisplay.tsx
+++ b/website/src/components/views/analyzeSingleVariant/GenericAnalyseSingleVariantDataDisplay.tsx
@@ -1,16 +1,15 @@
import { views } from '@genspectrum/dashboard-components/util';
-import { type FC, useMemo } from 'react';
+import { type Dispatch, type FC, type SetStateAction } from 'react';
import { QuickstartLinks } from './QuickstartLinks.tsx';
import { SelectVariant } from './SelectVariant.tsx';
-import type { OrganismsConfig } from '../../../config.ts';
import { Organisms } from '../../../types/Organism.ts';
import { chooseGranularityBasedOnDateRange } from '../../../util/chooseGranularityBasedOnDateRange.ts';
import { hasOnlyUndefinedValues } from '../../../util/hasOnlyUndefinedValues.ts';
import type { DatasetAndVariantData } from '../../../views/View.ts';
import { getLocationSubdivision } from '../../../views/locationHelpers.ts';
import { locationFieldsToFilterIdentifier } from '../../../views/pageStateHandlers/locationFilterFromToUrl.ts';
-import { type OrganismViewKey, Routing, type SingleVariantOrganism } from '../../../views/routing.ts';
+import { type SingleVariantOrganism, type ViewsMap } from '../../../views/routing.ts';
import type { singleVariantViewKey } from '../../../views/viewKeys.ts';
import { ComponentsGrid } from '../../ComponentsGrid.tsx';
import { GsAggregate } from '../../genspectrum/GsAggregate.tsx';
@@ -20,19 +19,16 @@ import { GsPrevalenceOverTime } from '../../genspectrum/GsPrevalenceOverTime.tsx
import { GsStatistics } from '../../genspectrum/GsStatistics.tsx';
export type GenericAnalyseSingleVariantDataDisplayProps = {
- organismViewKey: OrganismViewKey &
- `${Exclude}.${typeof singleVariantViewKey}`;
- organismsConfig: OrganismsConfig;
+ view: ViewsMap[Exclude][typeof singleVariantViewKey];
pageState: DatasetAndVariantData;
+ setPageState: Dispatch>;
};
export const GenericAnalyseSingleVariantDataDisplay: FC = ({
- organismViewKey,
- organismsConfig,
+ view,
pageState,
+ setPageState,
}) => {
- const view = useMemo(() => new Routing(organismsConfig), [organismsConfig]).getOrganismView(organismViewKey);
-
const variantLapisFilter = view.pageStateHandler.toLapisFilter(pageState);
const datasetLapisFilter = view.pageStateHandler.toLapisFilterWithoutVariant(pageState);
const timeGranularity = chooseGranularityBasedOnDateRange({
@@ -52,7 +48,7 @@ export const GenericAnalyseSingleVariantDataDisplay: FC
{noVariantSelected && (
-
+
)}
diff --git a/website/src/components/views/analyzeSingleVariant/GenericAnalyseSingleVariantReactPage.tsx b/website/src/components/views/analyzeSingleVariant/GenericAnalyseSingleVariantReactPage.tsx
new file mode 100644
index 000000000..477e9a5a8
--- /dev/null
+++ b/website/src/components/views/analyzeSingleVariant/GenericAnalyseSingleVariantReactPage.tsx
@@ -0,0 +1,73 @@
+import { type FC, useMemo } from 'react';
+
+import { GenericAnalyseSingleVariantDataDisplay } from './GenericAnalyseSingleVariantDataDisplay';
+import { type OrganismsConfig } from '../../../config';
+import { SingleVariantOrganismPageLayout } from '../../../layouts/OrganismPage/SingleVariantOrganismPageLayout.tsx';
+import { Organisms } from '../../../types/Organism';
+import { hasOnlyUndefinedValues } from '../../../util/hasOnlyUndefinedValues';
+import { toDisplayName } from '../../../views/pageStateHandlers/PageStateHandler';
+import { type OrganismViewKey, type OrganismWithViewKey, Routing } from '../../../views/routing';
+import { singleVariantViewKey } from '../../../views/viewKeys';
+import { SingleVariantPageStateSelector } from '../../pageStateSelectors/SingleVariantPageStateSelector';
+import { sanitizeForFilename } from '../compareSideBySide/toDownloadLink';
+import { usePageState } from '../usePageState.ts';
+
+export type GenericAnalyseSingleVariantReactPageProps = {
+ organism: Exclude, typeof Organisms.covid>;
+ organismsConfig: OrganismsConfig;
+ isStaging: boolean;
+};
+
+export const GenericAnalyseSingleVariantReactPage: FC = ({
+ organism,
+ organismsConfig,
+ isStaging,
+}) => {
+ const organismViewKey = `${organism}.${singleVariantViewKey}` satisfies OrganismViewKey;
+ const view = useMemo(
+ () => new Routing(organismsConfig).getOrganismView(organismViewKey),
+ [organismsConfig, organismViewKey],
+ );
+
+ const { pageState, setPageState } = usePageState(view.pageStateHandler);
+
+ const variantLapisFilter = view.pageStateHandler.toLapisFilter(pageState);
+
+ const noVariantSelected = hasOnlyUndefinedValues(pageState.variantFilter);
+
+ const displayName = toDisplayName(pageState.variantFilter);
+ const downloadLinks = noVariantSelected
+ ? [
+ {
+ label: 'Download all accessions',
+ filter: variantLapisFilter,
+ downloadFileBasename: `${view.organismConstants.organism}_accessions`,
+ },
+ ]
+ : [
+ {
+ label: `Download accessions of "${displayName}"`,
+ filter: variantLapisFilter,
+ downloadFileBasename: `${organism}_${sanitizeForFilename(displayName)}_accessions`,
+ },
+ ];
+
+ return (
+
+ }
+ dataDisplay={
+
+ }
+ />
+ );
+};
diff --git a/website/src/components/views/analyzeSingleVariant/GenericAnalyzeSingleVariantPage.astro b/website/src/components/views/analyzeSingleVariant/GenericAnalyzeSingleVariantPage.astro
index 256b7079a..83fe543bf 100644
--- a/website/src/components/views/analyzeSingleVariant/GenericAnalyzeSingleVariantPage.astro
+++ b/website/src/components/views/analyzeSingleVariant/GenericAnalyzeSingleVariantPage.astro
@@ -1,70 +1,26 @@
---
-import { GenericAnalyseSingleVariantDataDisplay } from './GenericAnalyseSingleVariantDataDisplay';
+import { GenericAnalyseSingleVariantReactPage } from './GenericAnalyseSingleVariantReactPage';
import { isStaging, getDashboardsConfig } from '../../../config';
-import SingleVariantOrganismPageLayout from '../../../layouts/OrganismPage/SingleVariantOrganismPageLayout.astro';
+import BaseLayout from '../../../layouts/base/BaseLayout.astro';
import { Organisms } from '../../../types/Organism';
-import { hasOnlyUndefinedValues } from '../../../util/hasOnlyUndefinedValues';
-import { toDisplayName } from '../../../views/pageStateHandlers/PageStateHandler';
-import { type OrganismViewKey, type OrganismWithViewKey } from '../../../views/routing';
+import { type OrganismWithViewKey } from '../../../views/routing';
import { ServerSide } from '../../../views/serverSideRouting';
import { singleVariantViewKey } from '../../../views/viewKeys';
-import { AnalyzeSingleVariantSelectorFallback } from '../../pageStateSelectors/FallbackElement';
-import { SingleVariantPageStateSelector } from '../../pageStateSelectors/SingleVariantPageStateSelector';
-import { sanitizeForFilename } from '../compareSideBySide/toDownloadLink';
-type OrganismViewCompareVariant = OrganismWithViewKey;
interface Props {
- organism: Exclude;
+ organism: Exclude, typeof Organisms.covid>;
}
const { organism } = Astro.props;
-const organismViewKey = `${organism}.${singleVariantViewKey}` satisfies OrganismViewKey;
-const view = ServerSide.routing.getOrganismView(organismViewKey);
-const pageState = view.pageStateHandler.parsePageStateFromUrl(Astro.url);
-
-const variantLapisFilter = view.pageStateHandler.toLapisFilter(pageState);
-
-const noVariantSelected = hasOnlyUndefinedValues(pageState.variantFilter);
-
-const organismConfig = getDashboardsConfig().dashboards.organisms;
-
-const displayName = toDisplayName(pageState.variantFilter);
-const downloadLinks = noVariantSelected
- ? [
- {
- label: 'Download all accessions',
- filter: variantLapisFilter,
- downloadFileBasename: `${view.organismConstants.organism}_accessions`,
- },
- ]
- : [
- {
- label: `Download accessions of "${displayName}"`,
- filter: variantLapisFilter,
- downloadFileBasename: `${organism}_${sanitizeForFilename(displayName)}_accessions`,
- },
- ];
+const view = ServerSide.routing.getOrganismView(`${organism}.${singleVariantViewKey}`);
---
-
-
+
-
-
-
-
-
-
-
+ />
+
diff --git a/website/src/components/views/analyzeSingleVariant/QuickstartLinks.tsx b/website/src/components/views/analyzeSingleVariant/QuickstartLinks.tsx
index 9745d57d8..86eac39e9 100644
--- a/website/src/components/views/analyzeSingleVariant/QuickstartLinks.tsx
+++ b/website/src/components/views/analyzeSingleVariant/QuickstartLinks.tsx
@@ -1,8 +1,8 @@
-import type { FC } from 'react';
+import type { Dispatch, FC, SetStateAction } from 'react';
import { collectionVariantClassName } from './CollectionsList';
import { Organisms } from '../../../types/Organism';
-import type { DatasetFilter } from '../../../views/View.ts';
+import type { DatasetAndVariantData, DatasetFilter } from '../../../views/View.ts';
import { toDisplayName } from '../../../views/pageStateHandlers/PageStateHandler';
import type { SingleVariantOrganism, ViewsMap } from '../../../views/routing';
import { singleVariantViewKey } from '../../../views/viewKeys';
@@ -10,9 +10,10 @@ import { singleVariantViewKey } from '../../../views/viewKeys';
export type QuickstartLinksProps = {
view: ViewsMap[Exclude][typeof singleVariantViewKey];
datasetFilter: DatasetFilter;
+ setPageState: Dispatch>;
};
-export const QuickstartLinks: FC = ({ view, datasetFilter }) => {
+export const QuickstartLinks: FC = ({ view, datasetFilter, setPageState }) => {
const variants = view.organismConstants.predefinedVariants;
return (
@@ -21,13 +22,17 @@ export const QuickstartLinks: FC = ({ view, datasetFilter
- If no baseline is selected all sequences will be used as a baseline for comparing against sequences with a
- specified variant. Note that the dataset filter is applied to the entire dataset including both the baseline
- and variant subsets. Adjust the dataset filter as needed to refine your selection.
-
-
-
diff --git a/website/src/components/views/compareToBaseline/SelectBaseline.tsx b/website/src/components/views/compareToBaseline/SelectBaseline.tsx
new file mode 100644
index 000000000..c2132159c
--- /dev/null
+++ b/website/src/components/views/compareToBaseline/SelectBaseline.tsx
@@ -0,0 +1,19 @@
+import type { FC } from 'react';
+
+import { PageHeadline } from '../../../styles/containers/PageHeadline.tsx';
+
+export const SelectBaseline: FC = () => {
+ return (
+
+ Analyze a variant compared to a baseline
+
+
To proceed, please select a variant filter.
+
+ If no baseline is selected all sequences will be used as a baseline for comparing against sequences
+ with a specified variant. Note that the dataset filter is applied to the entire dataset including
+ both the baseline and variant subsets. Adjust the dataset filter as needed to refine your selection.
+
+
+
+ );
+};
diff --git a/website/src/components/views/compareVariants/GenericCompareVariantsDataDisplay.tsx b/website/src/components/views/compareVariants/GenericCompareVariantsDataDisplay.tsx
new file mode 100644
index 000000000..6610477b3
--- /dev/null
+++ b/website/src/components/views/compareVariants/GenericCompareVariantsDataDisplay.tsx
@@ -0,0 +1,61 @@
+import { type FC } from 'react';
+
+import { SelectVariants } from './SelectVariants.tsx';
+import { chooseGranularityBasedOnDateRange } from '../../../util/chooseGranularityBasedOnDateRange.ts';
+import { GenericCompareVariantsView } from '../../../views/BaseView.ts';
+import type { OrganismConstants } from '../../../views/OrganismConstants.ts';
+import type { CompareVariantsData } from '../../../views/View.ts';
+import { ComponentsGrid } from '../../ComponentsGrid.tsx';
+import { GsMutationComparison } from '../../genspectrum/GsMutationComparison.tsx';
+import { GsPrevalenceOverTime } from '../../genspectrum/GsPrevalenceOverTime.tsx';
+
+export type GenericCompareVariantsDataDisplayProps = {
+ view: GenericCompareVariantsView;
+ pageState: CompareVariantsData;
+};
+
+const componentHeight = '540px'; // prevalence over time table with 10 rows
+
+export const GenericCompareVariantsDataDisplay: FC = ({ view, pageState }) => {
+ const datasetLapisFilter = view.pageStateHandler.datasetFilterToLapisFilter(pageState.datasetFilter);
+ const timeGranularity = chooseGranularityBasedOnDateRange({
+ earliestDate: new Date(view.organismConstants.earliestDate),
+ dateRange: pageState.datasetFilter.dateFilters[view.organismConstants.mainDateField],
+ });
+
+ const numeratorLapisFilters = view.pageStateHandler.variantFiltersToNamedLapisFilters(pageState);
+
+ const notEnoughVariantsSelected = pageState.variants.size < 2;
+
+ return (
+