Skip to content

refactor(website): refactor footer to pull "download data" button closer to React-rendered content #978

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 2 commits into
base: 981-migrate-covid-compare-side-by-side-page-to-react
Choose a base branch
from
Open

refactor(website): refactor footer to pull "download data" button closer to React-rendered content #978

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
351142b
refactor(website): refactor footer to pull "download data" button clo…
fengelniederhammer Dec 17, 2025
98d0fc4
refactor(website): move it back
fengelniederhammer Dec 17, 2025
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
98 changes: 48 additions & 50 deletions website/src/components/views/compareSideBySide/GenericCompareSideBySidePage.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
import { GenericCompareSideBySideDataDisplay } from './GenericCompareSideBySideDataDisplay.tsx';
import { toDownloadLink } from './toDownloadLink';
import { isStaging, getDashboardsConfig, getLapisUrl } from '../../../config';
import { isStaging, getDashboardsConfig } from '../../../config';
import OrganismViewPageLayout from '../../../layouts/OrganismPage/OrganismViewPageLayout.astro';
import { type OrganismViewKey, type OrganismWithViewKey } from '../../../views/routing';
import { ServerSide } from '../../../views/serverSideRouting';
Expand All @@ -27,56 +27,54 @@ const downloadLinks = [...pageState.filters.entries()].map(toDownloadLink(view.p
---

<OrganismViewPageLayout view={view} downloadLinks={downloadLinks}>
<gs-app lapis={getLapisUrl(view.organismConstants.organism)}>
Copy link
Contributor Author

@fengelniederhammer fengelniederhammer Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I deleted this line (moved to OrganismViewPageLayout) and reformatted the rest.

<div class='flex overflow-x-auto'>
{
Array.from(pageState.filters).map(([id, datasetAndVariantData]) => {
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={organismConfig}
organismViewKey={organismViewKey}
enableAdvancedQueryFilter={isStaging()}
client:only='react'
<div class='flex overflow-x-auto'>
{
Array.from(pageState.filters).map(([id, datasetAndVariantData]) => {
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),
)}
>
<CompareSideBySideSelectorFallback
slot='fallback'
numFilters={pageState.filters.size}
/>
</CompareSideBySidePageStateSelector>
</div>

<GenericCompareSideBySideDataDisplay
organismViewKey={organismViewKey}
Remove column
</a>
)}
<CompareSideBySidePageStateSelector
filterId={id}
initialPageState={pageState}
organismsConfig={organismConfig}
datasetAndVariantData={datasetAndVariantData}
hideMutationComponents={hideMutationComponents}
client:load
/>
organismViewKey={organismViewKey}
enableAdvancedQueryFilter={isStaging()}
client:only='react'
>
<CompareSideBySideSelectorFallback
slot='fallback'
numFilters={pageState.filters.size}
/>
</CompareSideBySidePageStateSelector>
</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>

<GenericCompareSideBySideDataDisplay
organismViewKey={organismViewKey}
organismsConfig={organismConfig}
datasetAndVariantData={datasetAndVariantData}
hideMutationComponents={hideMutationComponents}
client:load
/>
</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>
</OrganismViewPageLayout>
46 changes: 25 additions & 21 deletions website/src/layouts/OrganismPage/DataPageLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
---
import type { ComponentProps } from 'astro/types';

import AccessionsDownloadButton from './AccessionsDownloadButton.astro';
import LastUpdatedInfo from './LastUpdatedInfo.astro';
import LapisUnreachableWrapperClient from '../../components/LapisUnreachableWrapperClient';
import type { DataOrigin } from '../../types/dataOrigins';
import { type BreadcrumbElement, Breadcrumbs } from '../Breadcrumbs';
import AccessionsDownloadButton from './AccessionsDownloadButton.astro';
import LastUpdatedInfo from './LastUpdatedInfo.astro';
import type { DataOrigin } from '../../types/dataOrigins.ts';
import BaseLayout from '../base/BaseLayout.astro';
import DataInfo from '../base/footer/DataInfo.astro';

Expand All @@ -22,23 +22,27 @@ const { title, breadcrumbs, dataOrigins, lapisUrl, downloadLinks = [], accession
---

<BaseLayout title={title}>
<div class='ml-2'>
<Breadcrumbs breadcrumbs={breadcrumbs} />
</div>
<LapisUnreachableWrapperClient lapisUrl={lapisUrl} client:only='react'>
<slot />
</LapisUnreachableWrapperClient>
<div class='mt-2 flex flex-col items-center justify-center sm:mt-0 sm:flex-row sm:gap-4' slot='secondary-footer'>
{
downloadLinks.length > 0 && (
<AccessionsDownloadButton
accessionDownloadFields={accessionDownloadFields}
downloadLinks={downloadLinks}
lapisUrl={lapisUrl}
/>
)
}
<LastUpdatedInfo lapisUrl={lapisUrl} />
<DataInfo dataOrigins={dataOrigins} />
<div class='flex h-full flex-col'>
<div class='ml-2'>
<Breadcrumbs breadcrumbs={breadcrumbs} />
</div>
<div class='grow'>
<LapisUnreachableWrapperClient lapisUrl={lapisUrl} client:only='react'>
<slot />
</LapisUnreachableWrapperClient>
</div>
<div class='mt-2 flex flex-col items-center justify-center border-t border-gray-200 sm:flex-row sm:gap-4'>
{
downloadLinks.length > 0 && (
<AccessionsDownloadButton
accessionDownloadFields={accessionDownloadFields}
downloadLinks={downloadLinks}
lapisUrl={lapisUrl}
/>
)
}
<LastUpdatedInfo lapisUrl={lapisUrl} />
<DataInfo dataOrigins={dataOrigins} />
</div>
</div>
</BaseLayout>
7 changes: 6 additions & 1 deletion website/src/layouts/OrganismPage/OrganismViewPageLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,10 @@ const { view, downloadLinks } = Astro.props;
lapisUrl={getLapisUrl(view.organismConstants.organism)}
accessionDownloadFields={view.organismConstants.accessionDownloadFields}
>
<slot />
<gs-app
lapis={getLapisUrl(view.organismConstants.organism)}
mutationAnnotations={JSON.stringify(view.organismConstants.mutationAnnotations)}
>
<slot />
</gs-app>
</DataPageLayout>
16 changes: 5 additions & 11 deletions website/src/layouts/OrganismPage/SingleVariantOrganismPageLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import type { ComponentProps } from 'astro/types';

import AccessionsDownloadButton from './AccessionsDownloadButton.astro';
import OrganismViewPageLayout from './OrganismViewPageLayout.astro';
import { getLapisUrl } from '../../config';
import type { OrganismConstants } from '../../views/OrganismConstants';
import type { View } from '../../views/View';
import { type PageStateHandler } from '../../views/pageStateHandlers/PageStateHandler';
Expand All @@ -17,15 +16,10 @@ const { view, downloadLinks } = Astro.props;
---

<OrganismViewPageLayout view={view} downloadLinks={downloadLinks}>
<gs-app
lapis={getLapisUrl(view.organismConstants.organism)}
mutationAnnotations={JSON.stringify(view.organismConstants.mutationAnnotations)}
>
<div class='grid-cols-[300px_1fr] gap-x-4 lg:grid'>
<div class='h-fit p-2 shadow-lg'>
<slot name='filters' />
</div>
<slot name='dataDisplay' />
<div class='grid-cols-[300px_1fr] gap-x-4 lg:grid'>
<div class='h-fit p-2 shadow-lg'>
<slot name='filters' />
</div>
</gs-app>
<slot name='dataDisplay' />
</div>
</OrganismViewPageLayout>
5 changes: 2 additions & 3 deletions website/src/layouts/base/BaseLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,13 @@ const { title, forceLoggedOutState = false } = Astro.props;
</script>
</head>

<body class='flex min-h-screen flex-col'>
<body class='flex h-screen flex-col'>
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing from min-h-screen to h-screen restricts the body height to exactly the viewport height. This will cause content overflow issues on pages with content taller than the viewport, preventing users from scrolling to see all content. Consider keeping min-h-screen or ensure all pages using this layout can fit within a single viewport.

Suggested change
<body class='flex h-screen flex-col'>
<body class='flex min-h-screen flex-col'>

Copilot uses AI. Check for mistakes.
Copy link
Contributor Author

@fengelniederhammer fengelniederhammer Dec 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The body needs a defined height so that h-full inside flex and grow works. The content does overflow the body, but it looks like it works, so I assume that this is fine?

<ToastContainer client:load />
<Header forceLoggedOutState={forceLoggedOutState} />
<div class='grow'>
<Header forceLoggedOutState={forceLoggedOutState} />
<slot />
</div>
<Footer>
<slot slot='secondary-footer' name='secondary-footer' />
<FooterNavigation slot='primary-footer' />
</Footer>
</body>
Expand Down
4 changes: 0 additions & 4 deletions website/src/layouts/base/footer/Footer.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
---
import PrimaryFooter from './PrimaryFooter.astro';
import SecondaryFooter from './SecondaryFooter.astro';
---

<footer class='mt-auto'>
<SecondaryFooter>
<slot name='secondary-footer' />
</SecondaryFooter>
<PrimaryFooter>
<slot name='primary-footer' />
</PrimaryFooter>
Expand Down
7 changes: 0 additions & 7 deletions website/src/layouts/base/footer/SecondaryFooter.astro
View file
Open in desktop

This file was deleted.

4 changes: 3 additions & 1 deletion website/src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,5 +117,7 @@ import { Page } from '../types/pages';
</div>
</div>

<DataInfo slot='secondary-footer' dataOrigins={[dataOrigins.insdc, dataOrigins.pathoplexus, dataOrigins.wise]} />
<div class='mt-2 border-t border-gray-200'>
<DataInfo dataOrigins={[dataOrigins.insdc, dataOrigins.pathoplexus, dataOrigins.wise]} />
</div>
</BaseLayout>