feat(website): add compare to baseline landing page (#422)

* feat(website): add baseline compare landing page * feat(website): fix e2e tests and add e2e to ensure no errors in web components on any page
GenSpectrum · Dec 13, 2024 · f954a5e · f954a5e
1 parent e492f2e
commit f954a5e
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 10 deletions.
diff --git a/website/src/components/views/compareToBaseline/GenericCompareToBaselinePage.astro b/website/src/components/views/compareToBaseline/GenericCompareToBaselinePage.astro
@@ -1,4 +1,5 @@
 ---
+import SelectBaseline from './SelectBaseline.astro';
 import { getDashboardsConfig } from '../../../config';
 import SingleVariantOrganismPageLayout from '../../../layouts/OrganismPage/SingleVariantOrganismPageLayout.astro';
 import { chooseGranularityBasedOnDateRange } from '../../../util/chooseGranularityBasedOnDateRange';
@@ -31,6 +32,7 @@ const variantFilterConfigs = view.pageStateHandler.toVariantFilterConfigs(pageSt
 const baselineFilterConfig = view.pageStateHandler.toBaselineFilterConfig(pageState);
 
 const numeratorLapisFilters = view.pageStateHandler.variantFiltersToNamedLapisFilters(pageState);
+const noVariantSelected = pageState.variants.size < 1;
 ---
 
 <SingleVariantOrganismPageLayout view={view}>
@@ -55,13 +57,19 @@ const numeratorLapisFilters = view.pageStateHandler.variantFiltersToNamedLapisFi
     >
         <CompareToBaselineSelectorFallback slot='fallback' numFilters={numeratorLapisFilters.length} />
     </CompareVariantsToBaselineStateSelector>
-    <ComponentsGrid slot='dataDisplay'>
-        <GsPrevalenceOverTime
-            numeratorFilters={numeratorLapisFilters}
-            denominatorFilter={baselineLapisFilter}
-            lapisDateField={view.organismConstants.mainDateField}
-            granularity={timeGranularity}
-            views={['line', 'table', 'bar']}
-        />
-    </ComponentsGrid>
+    {
+        noVariantSelected ? (
+            <SelectBaseline slot='dataDisplay' />
+        ) : (
+            <ComponentsGrid slot='dataDisplay'>
+                <GsPrevalenceOverTime
+                    numeratorFilters={numeratorLapisFilters}
+                    denominatorFilter={baselineLapisFilter}
+                    lapisDateField={view.organismConstants.mainDateField}
+                    granularity={timeGranularity}
+                    views={['line', 'table', 'bar']}
+                />
+            </ComponentsGrid>
+        )
+    }
 </SingleVariantOrganismPageLayout>
diff --git a/website/src/components/views/compareToBaseline/SelectBaseline.astro b/website/src/components/views/compareToBaseline/SelectBaseline.astro
@@ -0,0 +1,15 @@
+---
+import { PageHeadline } from '../../../styles/containers/PageHeadline';
+---
+
+<div class='mx-4 mt-20 flex min-h-64 flex-col items-center'>
+    <PageHeadline>Analyze a variant compared to a baseline</PageHeadline>
+    <div class='max-w-xl'>
+        <p class='mb-2'>To proceed, please select a variant filter.</p>
+        <p>
+            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.
+        </p>
+    </div>
+</div>
diff --git a/website/tests/mainPage.spec.ts b/website/tests/mainPage.spec.ts
@@ -16,7 +16,11 @@ const views = [
     },
     { linkName: 'Sequencing efforts', title: 'Sequencing efforts', expectedHeadline: 'Number sequences' },
     { linkName: 'Compare variants', title: 'Compare variants', expectedHeadline: 'Compare Variants' },
-    { linkName: 'Compare to baseline', title: 'Compare to baseline', expectedHeadline: 'Prevalence over time' },
+    {
+        linkName: 'Compare to baseline',
+        title: 'Compare to baseline',
+        expectedHeadline: 'Analyze a variant compared to a baseline',
+    },
 ];
 
 test.describe('Main page', () => {
@@ -37,6 +41,8 @@ test.describe('Main page', () => {
                     .locator('..')
                     .getByText(linkName, { exact: true })
                     .click();
+                await expect(page.locator('text=Error -')).not.toBeVisible();
+                await expect(page.locator('text=Something went wrong')).not.toBeVisible();
                 await expect(page).toHaveTitle(`${title} | ${organism} | GenSpectrum`);
                 await expect(page.getByRole('heading', { name: expectedHeadline }).first()).toBeVisible();
             }

diff --git a/website/tests/sequencingEfforts.spec.ts b/website/tests/sequencingEfforts.spec.ts
@@ -21,6 +21,7 @@ test.describe('The Sequencing Efforts Page', () => {
                 const options = organismOptions[organism];
 
                 await sequencingEffortsPage.goto(organism);
+                await sequencingEffortsPage.expectToSeeNoComponentErrors();
                 await sequencingEffortsPage.selectLocation(options.location);
                 await sequencingEffortsPage.selectDateRange('All times');
                 await sequencingEffortsPage.submitFilters();