Skip to content

Commit 2c32af5

Browse files
JonasKellererJonasKellerer
committed
feat(website): add index page for each organism and wastewater
Resolves #590
1 parent abc1a71 commit 2c32af5

File tree

19 files changed

+162
-113
lines changed

19 files changed

+162
-113
lines changed

‎website/src/components/views/overview/GenericOverview.astro

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
import { defaultBreadcrumbs } from '../../../layouts/Breadcrumbs';
3+
import ContaineredPageLayout from '../../../layouts/ContaineredPage/ContaineredPageLayout.astro';
4+
import { getPathogenMegaMenuSections } from '../../../layouts/base/header/getPathogenMegaMenuSections';
5+
import { PageHeadline } from '../../../styles/containers/PageHeadline';
6+
import { iconMapping } from '../../iconCss';
7+
8+
type Props = {
9+
organism: keyof ReturnType<typeof getPathogenMegaMenuSections>;
10+
};
11+
12+
const { organism } = Astro.props;
13+
14+
const section = getPathogenMegaMenuSections()[organism];
15+
---
16+
17+
<ContaineredPageLayout
18+
title={section.headline}
19+
breadcrumbs={[...defaultBreadcrumbs, { name: section.headline, href: section.href }]}
20+
>
21+
<PageHeadline>{section.headline}</PageHeadline>
22+
<div class='group flex flex-wrap gap-2'>
23+
{
24+
section.navigationEntries.map((view) => {
25+
return (
26+
<div class={`card w-96 shadow`}>
27+
<div class='card-body'>
28+
<div class='card-title'>
29+
<h2 class={`iconify ${iconMapping[view.iconType]}`} />
30+
<div>{view.label}</div>
31+
</div>
32+
<p>{view.description}</p>
33+
<a class='link link-primary' href={view.href}>
34+
Go to {view.label}
35+
</a>
36+
</div>
37+
</div>
38+
);
39+
})
40+
}
41+
</div>
42+
</ContaineredPageLayout>

‎website/src/layouts/base/header/HamburgerMenu.astro

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ type Props = {
1414
1515
const { forceLoggedOutState } = Astro.props;
1616
17-
const pathogenMegaMenuSections = getPathogenMegaMenuSections();
17+
const pathogenMegaMenuSections = Object.values(getPathogenMegaMenuSections());
1818
1919
const session = await getSession(Astro.request);
2020
const showLoggedInState = !forceLoggedOutState && session?.user !== undefined;
@@ -34,11 +34,11 @@ const showLoggedInState = !forceLoggedOutState && session?.user !== undefined;
3434
{
3535
pathogenMegaMenuSections.map((section) => (
3636
<HamburgerMenuSection navigationEntries={section.navigationEntries}>
37-
{section.headline}
37+
<a href={section.href}>{section.headline}</a>
3838
</HamburgerMenuSection>
3939
))
4040
}
41-
<HamburgerMenuItem href={Page.dataSources} itemType='toplevel'>Data Sources </HamburgerMenuItem>
41+
<HamburgerMenuItem href={Page.dataSources} itemType='toplevel'>Data Sources</HamburgerMenuItem>
4242
{
4343
isLoginEnabled() ? (
4444
showLoggedInState ? (

‎website/src/layouts/base/header/MegaMenu.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,29 @@ export function MegaMenu({ className, children }: PropsWithChildren<WithClassNam
1515
export interface MegaMenuSectionProps {
1616
headline: string;
1717
headlineBackgroundColor: string;
18+
href: string;
1819
}
1920

2021
export function MegaMenuSection({
2122
headline,
2223
children,
2324
headlineBackgroundColor,
25+
href,
2426
}: PropsWithChildren<MegaMenuSectionProps>) {
2527
return (
2628
<li>
27-
<MegaMenuSectionHeadline label={headline} className={headlineBackgroundColor} />
29+
<MegaMenuSectionHeadline href={href} label={headline} className={headlineBackgroundColor} />
2830
<ul className='flex flex-col gap-2'>{children}</ul>
2931
</li>
3032
);
3133
}
3234

33-
function MegaMenuSectionHeadline({ label, className }: WithClassName<{ label: string }>) {
34-
return <h3 className={`mb-4 p-2 text-lg font-bold ${className}`}>{label}</h3>;
35+
function MegaMenuSectionHeadline({ label, className, href }: WithClassName<{ label: string; href: string }>) {
36+
return (
37+
<h3 className={`mb-4 p-2 text-lg font-bold ${className}`}>
38+
<a href={href}>{label}</a>
39+
</h3>
40+
);
3541
}
3642

3743
export function MegaMenuListEntry({

‎website/src/layouts/base/header/Navigation.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { headerHeight } from './headerConstants.ts';
66
import { Page } from '../../../types/pages.ts';
77

88
export function Navigation() {
9-
const pathogenMegaMenuSections = getPathogenMegaMenuSections();
9+
const pathogenMegaMenuSections = Object.values(getPathogenMegaMenuSections());
1010

1111
return (
1212
<nav>

‎website/src/layouts/base/header/getPathogenMegaMenuSections.ts

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,46 @@ import { wastewaterConfig } from '../../../types/wastewaterConfig.ts';
33
import { ServerSide } from '../../../views/serverSideRouting.ts';
44

55
export function getPathogenMegaMenuSections() {
6-
const sections = Object.values(organismConfig).map((organism) => {
7-
const megaMenuSections = ServerSide.routing.getAllViewsForOrganism(organism.organism).map((view) => {
8-
const href = view.pageStateHandler.getDefaultPageUrl();
9-
return {
10-
label: view.viewConstants.labelLong,
11-
href,
12-
underlineColor: organism.menuListEntryDecoration,
13-
iconType: view.viewConstants.iconType,
14-
externalLink: false,
15-
};
16-
});
6+
const sections = Object.fromEntries(
7+
Object.entries(organismConfig).map(([organism, config]) => {
8+
const megaMenuSections = ServerSide.routing.getAllViewsForOrganism(config.organism).map((view) => {
9+
const href = view.pageStateHandler.getDefaultPageUrl();
10+
return {
11+
label: view.viewConstants.labelLong,
12+
href,
13+
underlineColor: config.menuListEntryDecoration,
14+
iconType: view.viewConstants.iconType,
15+
externalLink: false,
16+
description: view.viewConstants.description,
17+
};
18+
});
1719

18-
megaMenuSections.push(
19-
...ServerSide.routing.externalPages[organism.organism].map((externalPage) => ({
20-
label: externalPage.label,
21-
href: externalPage.url,
22-
underlineColor: organism.menuListEntryDecoration,
23-
iconType: externalPage.menuIcon,
24-
externalLink: true,
25-
})),
26-
);
20+
megaMenuSections.push(
21+
...ServerSide.routing.externalPages[config.organism].map((externalPage) => ({
22+
label: externalPage.label,
23+
href: externalPage.url,
24+
underlineColor: config.menuListEntryDecoration,
25+
iconType: externalPage.menuIcon,
26+
externalLink: true,
27+
description: undefined,
28+
})),
29+
);
2730

28-
return {
29-
headline: organism.label,
30-
headlineBackgroundColor: organism.backgroundColor,
31-
headlineBackgroundColorFocus: organism.backgroundColorFocus,
32-
borderEntryDecoration: organism.borderEntryDecoration,
33-
navigationEntries: megaMenuSections,
34-
};
35-
});
31+
return [
32+
organism,
33+
{
34+
headline: config.label,
35+
headlineBackgroundColor: config.backgroundColor,
36+
headlineBackgroundColorFocus: config.backgroundColorFocus,
37+
borderEntryDecoration: config.borderEntryDecoration,
38+
navigationEntries: megaMenuSections,
39+
href: `/${config.pathFragment}`,
40+
},
41+
];
42+
}),
43+
);
3644

37-
sections.push({
45+
sections.swissWastewater = {
3846
headline: 'Swiss Wastewater',
3947
headlineBackgroundColor: wastewaterConfig.backgroundColor,
4048
headlineBackgroundColorFocus: wastewaterConfig.backgroundColorFocus,
@@ -46,23 +54,27 @@ export function getPathogenMegaMenuSections() {
4654
href: wastewaterConfig.pages.rsv,
4755
underlineColor: wastewaterConfig.menuListEntryDecoration,
4856
externalLink: false,
57+
description: undefined,
4958
},
5059
{
5160
label: 'Influenza',
5261
iconType: 'table',
5362
href: wastewaterConfig.pages.influenza,
5463
underlineColor: wastewaterConfig.menuListEntryDecoration,
5564
externalLink: false,
65+
description: undefined,
5666
},
5767
{
5868
label: 'Browse data',
5969
iconType: 'database',
6070
href: wastewaterConfig.browseDataUrl,
6171
underlineColor: wastewaterConfig.menuListEntryDecoration,
6272
externalLink: true,
73+
description: undefined,
6374
},
6475
],
65-
});
76+
href: '/swiss-wastewater',
77+
};
6678

6779
return sections;
6880
}

‎website/src/pages/cchf/index.astro

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
---
2+
import GenericOverview from '../../components/views/overview/GenericOverview.astro';
23
import { Organisms } from '../../types/Organism';
3-
import { ServerSide } from '../../views/serverSideRouting';
4-
import { singleVariantViewKey } from '../../views/viewKeys';
5-
6-
return Astro.redirect(
7-
ServerSide.routing
8-
.getOrganismView(`${Organisms.cchf}.${singleVariantViewKey}`)
9-
.pageStateHandler.getDefaultPageUrl(),
10-
);
114
---
5+
6+
<GenericOverview organism={Organisms.cchf} />

‎website/src/pages/covid/index.astro

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
2-
import { ServerSide } from '../../views/serverSideRouting';
3-
4-
return Astro.redirect(
5-
ServerSide.routing.getOrganismView('covid.singleVariantView').pageStateHandler.getDefaultPageUrl(),
6-
);
2+
import GenericOverview from '../../components/views/overview/GenericOverview.astro';
3+
import { Organisms } from '../../types/Organism';
74
---
5+
6+
<GenericOverview organism={Organisms.covid} />

‎website/src/pages/ebola-sudan/index.astro

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
---
2+
import GenericOverview from '../../components/views/overview/GenericOverview.astro';
23
import { Organisms } from '../../types/Organism';
3-
import { ServerSide } from '../../views/serverSideRouting';
4-
import { singleVariantViewKey } from '../../views/viewKeys';
5-
6-
return Astro.redirect(
7-
ServerSide.routing
8-
.getOrganismView(`${Organisms.ebolaSudan}.${singleVariantViewKey}`)
9-
.pageStateHandler.getDefaultPageUrl(),
10-
);
114
---
5+
6+
<GenericOverview organism={Organisms.ebolaSudan} />

‎website/src/pages/ebola-zaire/index.astro

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
---
2+
import GenericOverview from '../../components/views/overview/GenericOverview.astro';
23
import { Organisms } from '../../types/Organism';
3-
import { ServerSide } from '../../views/serverSideRouting';
4-
import { singleVariantViewKey } from '../../views/viewKeys';
5-
6-
return Astro.redirect(
7-
ServerSide.routing
8-
.getOrganismView(`${Organisms.ebolaZaire}.${singleVariantViewKey}`)
9-
.pageStateHandler.getDefaultPageUrl(),
10-
);
114
---
5+
6+
<GenericOverview organism={Organisms.ebolaZaire} />

‎website/src/pages/flu/h5n1/index.astro

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
2-
import { ServerSide } from '../../../views/serverSideRouting';
3-
4-
return Astro.redirect(
5-
ServerSide.routing.getOrganismView('h5n1.singleVariantView').pageStateHandler.getDefaultPageUrl(),
6-
);
2+
import GenericOverview from '../../../components/views/overview/GenericOverview.astro';
3+
import { Organisms } from '../../../types/Organism';
74
---
5+
6+
<GenericOverview organism={Organisms.h5n1} />

‎website/src/pages/flu/index.astro

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
2-
import { ServerSide } from '../../views/serverSideRouting';
3-
4-
return Astro.redirect(
5-
ServerSide.routing.getOrganismView('flu.sequencingEffortsView').pageStateHandler.getDefaultPageUrl(),
6-
);
2+
import GenericOverview from '../../components/views/overview/GenericOverview.astro';
3+
import { Organisms } from '../../types/Organism';
74
---
5+
6+
<GenericOverview organism={Organisms.flu} />

‎website/src/pages/index.astro

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -64,13 +64,13 @@ import { Page } from '../types/pages';
6464
</div>
6565
<div class='items mx-auto mb-8 flex max-w-[1200px] flex-wrap justify-center gap-x-4 gap-y-8'>
6666
{
67-
getPathogenMegaMenuSections().map((section) => (
67+
Object.values(getPathogenMegaMenuSections()).map((section) => (
6868
<div class='group w-[260px]'>
6969
<div class={`${section.borderEntryDecoration} rounded-md border-2 border-gray-100`}>
7070
<h3
7171
class={`rounded-t-md p-4 text-xl ${section.headlineBackgroundColor} ${section.headlineBackgroundColorFocus}`}
7272
>
73-
{section.headline}
73+
<a href={section.href}>{section.headline}</a>
7474
</h3>
7575
<ul class='mx-6 mb-4'>
7676
{section.navigationEntries.map((entry) => (
@@ -99,16 +99,16 @@ import { Page } from '../types/pages';
9999
<div class='mt-4 mb-6 rounded-xl bg-gray-50 p-4'>
100100
Chen, C., Nadeau, S., Yared, M., Voinov, P., Ning, X., Roemer, C. &amp; Stadler, T. "CoV-Spectrum:
101101
Analysis of globally shared SARS-CoV-2 data to Identify and Characterize New Variants" Bioinformatics
102-
(2021); doi: <Link href='https://doi.org/10.1093/bioinformatics/btab856'
103-
>10.1093/bioinformatics/btab856</Link
104-
>.
102+
(2021); doi:
103+
<Link href='https://doi.org/10.1093/bioinformatics/btab856'>10.1093/bioinformatics/btab856 </Link>
104+
.
105105
</div>
106106
If you queried data through our LAPIS API, please consider citing:
107107
<div class='mt-4 mb-6 rounded-xl bg-gray-50 p-4'>
108108
Chen, C., Taepper, A., Engelniederhammer, F., Kellerer, J., Roemer, C. &amp; Stadler, T. "LAPIS is a
109-
fast web API for massive open virus sequencing data" Bioinformatics (2021); doi: <Link
110-
href='https://doi.org/10.1186/s12859-023-05364-3'>10.1186/s12859-023-05364-3</Link
111-
>.
109+
fast web API for massive open virus sequencing data" Bioinformatics (2021); doi:
110+
<Link href='https://doi.org/10.1186/s12859-023-05364-3'>10.1186/s12859-023-05364-3 </Link>
111+
.
112112
</div>
113113
</div>
114114
</div>
@@ -119,12 +119,12 @@ import { Page } from '../types/pages';
119119
</div>
120120
<div>
121121
Feedback, suggestions, bug reports and active contributions are highly welcome, please create an issue in
122-
our <Link external href='https://github.com/GenSpectrum/dashboards'>Github repository</Link>. For general
123-
questions, please contact Chaoran Chen ([email protected]). For media requests, please reach out to
124-
ETH Zurich Media Relations (mediarelations@hk.ethz.ch). A list of all team members can be found <Link
125-
external
126-
href='https://github.com/GenSpectrum'>here</Link
127-
>.
122+
our
123+
<Link external href='https://github.com/GenSpectrum/dashboards'>Github repository</Link>
124+
. For general questions, please contact Chaoran Chen (chaoran.chen@bsse.ethz.ch). For media requests, please
125+
reach out to ETH Zurich Media Relations ([email protected]). A list of all team members can be found
126+
<Link external href='https://github.com/GenSpectrum'>here </Link>
127+
.
128128
</div>
129129
</div>
130130

‎website/src/pages/mpox/index.astro

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
2-
import { ServerSide } from '../../views/serverSideRouting';
3-
4-
return Astro.redirect(
5-
ServerSide.routing.getOrganismView('mpox.singleVariantView').pageStateHandler.getDefaultPageUrl(),
6-
);
2+
import GenericOverview from '../../components/views/overview/GenericOverview.astro';
3+
import { Organisms } from '../../types/Organism';
74
---
5+
6+
<GenericOverview organism={Organisms.mpox} />

‎website/src/pages/rsv-a/index.astro

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
2-
import { ServerSide } from '../../views/serverSideRouting';
3-
4-
return Astro.redirect(
5-
ServerSide.routing.getOrganismView('rsvA.singleVariantView').pageStateHandler.getDefaultPageUrl(),
6-
);
2+
import GenericOverview from '../../components/views/overview/GenericOverview.astro';
3+
import { Organisms } from '../../types/Organism';
74
---
5+
6+
<GenericOverview organism={Organisms.rsvA} />

‎website/src/pages/rsv-b/index.astro

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
2-
import { ServerSide } from '../../views/serverSideRouting';
3-
return Astro.redirect(
4-
ServerSide.routing.getOrganismView('rsvB.singleVariantView').pageStateHandler.getDefaultPageUrl(),
5-
);
2+
import GenericOverview from '../../components/views/overview/GenericOverview.astro';
3+
import { Organisms } from '../../types/Organism';
64
---
5+
6+
<GenericOverview organism={Organisms.rsvB} />

‎website/src/pages/swiss-wastewater/index.astro

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import { wastewaterConfig } from '../../types/wastewaterConfig';
3-
4-
return Astro.redirect(wastewaterConfig.pages.rsv);
2+
import GenericOverview from '../../components/views/overview/GenericOverview.astro';
53
---
4+
5+
<GenericOverview organism={'swissWastewater'} />

0 commit comments

Comments
 (0)