feat(website): add fragment links to scroll to component headlines (#444

) resolves #426
GenSpectrum · Jan 7, 2025 · 3f3b5c1 · 3f3b5c1
1 parent 83cb9b6
commit 3f3b5c1
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 24 deletions.
diff --git a/website/src/components/ComponentHeadline.astro b/website/src/components/ComponentHeadline.astro
@@ -1,7 +1,17 @@
 ---
+import { fragmentLinkScrollMargin } from '../layouts/base/header/headerConstants';
+interface Props {
+    title: string;
+}
 
+const { title } = Astro.props;
+
+const fragmentId = title.toLowerCase().replace(/ /g, '-');
 ---
 
-<h2 class='font-bold'>
-    <slot />
+<h2 class={`font-bold ${fragmentLinkScrollMargin} `} id={fragmentId}>
+    <a href={`#${fragmentId}`} class='group flex items-center gap-1'>
+        {title}
+        <span class='iconify font-normal opacity-0 mdi--link-variant group-hover:opacity-100'></span>
+    </a>
 </h2>
diff --git a/website/src/components/ComponentWrapper.astro b/website/src/components/ComponentWrapper.astro
@@ -9,7 +9,7 @@ const { title, height = '400px' } = Astro.props;
 ---
 
 <div>
-    <ComponentHeadline>{title}</ComponentHeadline>
+    <ComponentHeadline title={title} />
     <div style={{ height }}>
         <slot />
     </div>

diff --git a/website/src/components/genspectrum/GsStatistics.astro b/website/src/components/genspectrum/GsStatistics.astro
@@ -0,0 +1,21 @@
+---
+import type { LapisFilter } from '@genspectrum/dashboard-components/util';
+
+import ComponentHeadline from '../ComponentHeadline.astro';
+
+interface Props {
+    numeratorFilter: LapisFilter;
+    denominatorFilter: LapisFilter;
+}
+
+const { numeratorFilter, denominatorFilter } = Astro.props;
+---
+
+<div class='h-56 sm:h-32'>
+    <ComponentHeadline title='Stats' />
+    <gs-statistics
+        numeratorFilter={JSON.stringify(numeratorFilter)}
+        denominatorFilter={JSON.stringify(denominatorFilter)}
+        width='100%'
+        height='100%'></gs-statistics>
+</div>
diff --git a/website/src/components/views/analyzeSingleVariant/GenericAnalyzeSingleVariantPage.astro b/website/src/components/views/analyzeSingleVariant/GenericAnalyzeSingleVariantPage.astro
@@ -10,12 +10,12 @@ import { toDisplayName } from '../../../views/pageStateHandlers/PageStateHandler
 import { type OrganismViewKey, type OrganismWithViewKey } from '../../../views/routing';
 import { ServerSide } from '../../../views/serverSideRouting';
 import { singleVariantViewKey } from '../../../views/viewKeys';
-import ComponentHeadline from '../../ComponentHeadline.astro';
 import ComponentsGrid from '../../ComponentsGrid.astro';
 import GsAggregate from '../../genspectrum/GsAggregate.astro';
 import GsMutations from '../../genspectrum/GsMutations.astro';
 import GsMutationsOverTime from '../../genspectrum/GsMutationsOverTime.astro';
 import GsPrevalenceOverTime from '../../genspectrum/GsPrevalenceOverTime.astro';
+import GsStatistics from '../../genspectrum/GsStatistics.astro';
 import { AnalyzeSingleVariantSelectorFallback } from '../../pageStateSelectors/FallbackElement';
 import { SingleVariantPageStateSelector } from '../../pageStateSelectors/SingleVariantPageStateSelector';
 import { sanitizeForFilename } from '../compareSideBySide/toDownloadLink';
@@ -92,15 +92,7 @@ const downloadLinks = noVariantSelected
             <SelectVariant slot='dataDisplay' />
         ) : (
             <div class='mx-[8px] flex flex-col gap-y-6' slot='dataDisplay'>
-                <div class='h-56 sm:h-32'>
-                    <ComponentHeadline>Stats</ComponentHeadline>
-                    <gs-statistics
-                        numeratorFilter={JSON.stringify(variantLapisFilter)}
-                        denominatorFilter={JSON.stringify(datasetLapisFilter)}
-                        width='100%'
-                        height='100%'
-                    />
-                </div>
+                <GsStatistics numeratorFilter={variantLapisFilter} denominatorFilter={datasetLapisFilter} />
                 <ComponentsGrid>
                     <GsPrevalenceOverTime
                         numeratorFilters={[

diff --git a/website/src/layouts/base/BaseLayout.astro b/website/src/layouts/base/BaseLayout.astro
@@ -16,7 +16,7 @@ interface Props {
 const { title, forceLoggedOutState = false } = Astro.props;
 ---
 
-<html lang='en'>
+<html lang='en' class='scroll-smooth'>
     <head>
         <meta charset='utf-8' />
         <link rel='icon' type='image/png' href='/virus-outline-colorful.svg' />

diff --git a/website/src/layouts/base/header/headerConstants.ts b/website/src/layouts/base/header/headerConstants.ts
@@ -1 +1,8 @@
 export const headerHeight = 'h-16';
+
+/**
+ * Account for the header when scrolling to a fragment link (href="#my-fragment").
+ * Otherwise, the fragment that we scroll to will be hidden behind the header.
+ * The height must match the header height (plus a little extra spacing).
+ */
+export const fragmentLinkScrollMargin = 'scroll-mt-20';
diff --git a/website/src/pages/covid/single-variant.astro b/website/src/pages/covid/single-variant.astro
@@ -1,11 +1,11 @@
 ---
-import ComponentHeadline from '../../components/ComponentHeadline.astro';
 import ComponentsGrid from '../../components/ComponentsGrid.astro';
 import GsAggregate from '../../components/genspectrum/GsAggregate.astro';
 import GsMutations from '../../components/genspectrum/GsMutations.astro';
 import GsMutationsOverTime from '../../components/genspectrum/GsMutationsOverTime.astro';
 import GsPrevalenceOverTime from '../../components/genspectrum/GsPrevalenceOverTime.astro';
 import GsRelativeGrowthAdvantage from '../../components/genspectrum/GsRelativeGrowthAdvantage.astro';
+import GsStatistics from '../../components/genspectrum/GsStatistics.astro';
 import { AnalyzeSingleVariantSelectorFallback } from '../../components/pageStateSelectors/FallbackElement';
 import { SingleVariantPageStateSelector } from '../../components/pageStateSelectors/SingleVariantPageStateSelector';
 import { CollectionsList } from '../../components/views/analyzeSingleVariant/CollectionsList';
@@ -95,15 +95,7 @@ const downloadLinks = noVariantSelected
             <SelectVariant slot='dataDisplay' />
         ) : (
             <div class='mx-[8px] flex flex-col gap-y-6' slot='dataDisplay'>
-                <div class='h-56 sm:h-32'>
-                    <ComponentHeadline>Stats</ComponentHeadline>
-                    <gs-statistics
-                        numeratorFilter={JSON.stringify(variantFilter)}
-                        denominatorFilter={JSON.stringify(datasetLapisFilter)}
-                        width='100%'
-                        height='100%'
-                    />
-                </div>
+                <GsStatistics numeratorFilter={variantFilter} denominatorFilter={datasetLapisFilter} />
                 <ComponentsGrid>
                     <GsPrevalenceOverTime
                         numeratorFilters={[