Skip to content

Commit

Permalink
refactor(website): extract GenericSequencingEffortsPage (#412)
Browse files Browse the repository at this point in the history
resolves #406
  • Loading branch information
fengelniederhammer authored Dec 12, 2024
1 parent bbaaba4 commit d2a4d03
Show file tree
Hide file tree
Showing 22 changed files with 235 additions and 523 deletions.
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@
---
import ComponentWrapper from '../../components/ComponentWrapper.astro';
import ComponentsGrid from '../../components/ComponentsGrid.astro';
import { getDashboardsConfig } from '../../config';
import SingleVariantOrganismPageLayout from '../../layouts/OrganismPage/SingleVariantOrganismPageLayout.astro';
import { type Organisms } from '../../types/Organism';
import { chooseGranularityBasedOnDateRange } from '../../util/chooseGranularityBasedOnDateRange';
import { defaultTablePageSize } from '../../views/View';
import { getLocationSubdivision } from '../../views/helpers';
import type { OrganismViewKey } from '../../views/routing';
import { ServerSide } from '../../views/serverSideRouting';
import { sequencingEffortsViewKey } from '../../views/viewKeys';
import { SequencingEffortsSelectorFallback } from '../pageStateSelectors/FallbackElement';
import { SequencingEffortsPageStateSelector } from '../pageStateSelectors/SequencingEffortsPageStateSelector';
import { getDashboardsConfig } from '../../../config';
import SingleVariantOrganismPageLayout from '../../../layouts/OrganismPage/SingleVariantOrganismPageLayout.astro';
import { type Organism } from '../../../types/Organism';
import { chooseGranularityBasedOnDateRange } from '../../../util/chooseGranularityBasedOnDateRange';
import { defaultTablePageSize } from '../../../views/View';
import { getLocationSubdivision } from '../../../views/helpers';
import { type OrganismViewKey } from '../../../views/routing';
import { ServerSide } from '../../../views/serverSideRouting';
import { sequencingEffortsViewKey } from '../../../views/viewKeys';
import ComponentWrapper from '../../ComponentWrapper.astro';
import ComponentsGrid from '../../ComponentsGrid.astro';
import { SequencingEffortsSelectorFallback } from '../../pageStateSelectors/FallbackElement';
import { SequencingEffortsPageStateSelector } from '../../pageStateSelectors/SequencingEffortsPageStateSelector';
interface Props {
organism: typeof Organisms.rsvA | typeof Organisms.rsvB;
organism: Organism;
}
const { organism } = Astro.props;
const organismViewKey = `${organism}.${sequencingEffortsViewKey}` satisfies OrganismViewKey;
const organismViewKey: OrganismViewKey = `${organism}.${sequencingEffortsViewKey}` satisfies OrganismViewKey;
const view = ServerSide.routing.getOrganismView(organismViewKey);
const pageState = view.pageStateHandler.parsePageStateFromUrl(Astro.url);
const datasetLapisFilter = view.pageStateHandler.toLapisFilter(pageState);
Expand Down Expand Up @@ -91,24 +90,18 @@ const { label: subdivisionLabel, field: subdivisionField } = getLocationSubdivis
width='100%'
height='100%'></gs-aggregate>
</ComponentWrapper>
<ComponentWrapper title='Author affiliations' height='600px'>
<gs-aggregate
fields={JSON.stringify([view.organismConstants.authorAffiliationsField])}
filter={JSON.stringify(datasetLapisFilter)}
pageSize={defaultTablePageSize}
width='100%'
height='100%'></gs-aggregate>
</ComponentWrapper>
<ComponentWrapper title='Authors' height='600px'>
<gs-aggregate
fields={JSON.stringify([
view.organismConstants.authorsField,
view.organismConstants.authorAffiliationsField,
])}
filter={JSON.stringify(datasetLapisFilter)}
pageSize={defaultTablePageSize}
width='100%'
height='100%'></gs-aggregate>
</ComponentWrapper>
{
view.organismConstants.additionalSequencingEffortsFields.map(({ label, fields, height }) => (
<ComponentWrapper title={label} height={height}>
<gs-aggregate
fields={JSON.stringify(fields)}
filter={JSON.stringify(datasetLapisFilter)}
pageSize={defaultTablePageSize}
width='100%'
height='100%'
/>
</ComponentWrapper>
))
}
</ComponentsGrid>
</SingleVariantOrganismPageLayout>
103 changes: 3 additions & 100 deletions website/src/pages/covid/sequencing-efforts.astro
Original file line number Diff line number Diff line change
@@ -1,103 +1,6 @@
---
import ComponentWrapper from '../../components/ComponentWrapper.astro';
import ComponentsGrid from '../../components/ComponentsGrid.astro';
import { SequencingEffortsSelectorFallback } from '../../components/pageStateSelectors/FallbackElement';
import { SequencingEffortsPageStateSelector } from '../../components/pageStateSelectors/SequencingEffortsPageStateSelector';
import { getDashboardsConfig } from '../../config';
import SingleVariantOrganismPageLayout from '../../layouts/OrganismPage/SingleVariantOrganismPageLayout.astro';
import { chooseGranularityBasedOnDateRange } from '../../util/chooseGranularityBasedOnDateRange';
import { defaultTablePageSize } from '../../views/View';
import { getLocationSubdivision } from '../../views/helpers';
import type { OrganismViewKey } from '../../views/routing';
import { ServerSide } from '../../views/serverSideRouting';
const organismViewKey: OrganismViewKey = 'covid.sequencingEffortsView';
const view = ServerSide.routing.getOrganismView(organismViewKey);
const pageState = view.pageStateHandler.parsePageStateFromUrl(Astro.url);
const datasetLapisFilter = view.pageStateHandler.toLapisFilter(pageState);
const timeGranularity = chooseGranularityBasedOnDateRange(
pageState.datasetFilter.dateRange,
new Date(view.organismConstants.earliestDate),
);
const { label: subdivisionLabel, field: subdivisionField } = getLocationSubdivision(
view.organismConstants.locationFields,
pageState.datasetFilter.location,
);
import GenericSequencingEffortsPage from '../../components/views/sequencingEfforts/GenericSequencingEffortsPage.astro';
import { Organisms } from '../../types/Organism';
---

<SingleVariantOrganismPageLayout view={view}>
<SequencingEffortsPageStateSelector
slot='filters'
locationFilterConfig={{
locationFields: view.organismConstants.locationFields,
initialLocation: pageState.datasetFilter.location,
placeholderText: 'Sampling location',
}}
dateRangeFilterConfig={{
initialDateRange: pageState.datasetFilter.dateRange,
dateRangeOptions: view.organismConstants.dateRangeOptions,
earliestDate: view.organismConstants.earliestDate,
dateColumn: view.organismConstants.mainDateField,
}}
organismViewKey={organismViewKey}
organismsConfig={getDashboardsConfig().dashboards.organisms}
client:only='react'
>
<SequencingEffortsSelectorFallback slot='fallback' />
</SequencingEffortsPageStateSelector>

<ComponentsGrid slot='dataDisplay'>
<ComponentWrapper title='Number sequences' height='600px'>
<gs-number-sequences-over-time
lapisFilter={JSON.stringify({
displayName: '',
lapisFilter: datasetLapisFilter,
})}
lapisDateField={view.organismConstants.mainDateField}
views='["bar", "line", "table"]'
pageSize={defaultTablePageSize}
width='100%'
height='100%'
granularity={timeGranularity}></gs-number-sequences-over-time>
</ComponentWrapper>
{
subdivisionField !== undefined && (
<ComponentWrapper title={subdivisionLabel} height='600px'>
<gs-aggregate
fields={JSON.stringify([subdivisionField])}
filter={JSON.stringify(datasetLapisFilter)}
pageSize={defaultTablePageSize}
width='100%'
height='100%'
/>
</ComponentWrapper>
)
}
<ComponentWrapper title='Hosts' height='600px'>
<gs-aggregate
fields={JSON.stringify([view.organismConstants.hostField])}
filter={JSON.stringify(datasetLapisFilter)}
pageSize={defaultTablePageSize}
width='100%'
height='100%'></gs-aggregate>
</ComponentWrapper>
<ComponentWrapper title='Originating lab' height='600px'>
<gs-aggregate
fields={JSON.stringify([view.organismConstants.originatingLabField])}
filter={JSON.stringify(datasetLapisFilter)}
pageSize={defaultTablePageSize}
width='100%'
height='100%'></gs-aggregate>
</ComponentWrapper>
<ComponentWrapper title='Submitting lab' height='600px'>
<gs-aggregate
fields={JSON.stringify([view.organismConstants.submittingLabField])}
filter={JSON.stringify(datasetLapisFilter)}
pageSize={defaultTablePageSize}
width='100%'
height='100%'></gs-aggregate>
</ComponentWrapper>
</ComponentsGrid>
</SingleVariantOrganismPageLayout>
<GenericSequencingEffortsPage organism={Organisms.covid} />
106 changes: 3 additions & 103 deletions website/src/pages/flu/h5n1/sequencing-efforts.astro
Original file line number Diff line number Diff line change
@@ -1,106 +1,6 @@
---
import ComponentWrapper from '../../../components/ComponentWrapper.astro';
import ComponentsGrid from '../../../components/ComponentsGrid.astro';
import { SequencingEffortsSelectorFallback } from '../../../components/pageStateSelectors/FallbackElement';
import { SequencingEffortsPageStateSelector } from '../../../components/pageStateSelectors/SequencingEffortsPageStateSelector';
import { getDashboardsConfig } from '../../../config';
import SingleVariantOrganismPageLayout from '../../../layouts/OrganismPage/SingleVariantOrganismPageLayout.astro';
import { chooseGranularityBasedOnDateRange } from '../../../util/chooseGranularityBasedOnDateRange';
import { defaultTablePageSize } from '../../../views/View';
import { getLocationSubdivision } from '../../../views/helpers';
import type { OrganismViewKey } from '../../../views/routing';
import { ServerSide } from '../../../views/serverSideRouting';
const organismViewKey: OrganismViewKey = 'h5n1.sequencingEffortsView';
const view = ServerSide.routing.getOrganismView(organismViewKey);
const pageState = view.pageStateHandler.parsePageStateFromUrl(Astro.url);
const datasetLapisFilter = view.pageStateHandler.toLapisFilter(pageState);
const timeGranularity = chooseGranularityBasedOnDateRange(
pageState.datasetFilter.dateRange,
new Date(view.organismConstants.earliestDate),
);
const { label: subdivisionLabel, field: subdivisionField } = getLocationSubdivision(
view.organismConstants.locationFields,
pageState.datasetFilter.location,
);
import GenericSequencingEffortsPage from '../../../components/views/sequencingEfforts/GenericSequencingEffortsPage.astro';
import { Organisms } from '../../../types/Organism';
---

<SingleVariantOrganismPageLayout view={view}>
<SequencingEffortsPageStateSelector
slot='filters'
locationFilterConfig={{
locationFields: view.organismConstants.locationFields,
initialLocation: pageState.datasetFilter.location,
placeholderText: 'Sampling location',
}}
dateRangeFilterConfig={{
initialDateRange: pageState.datasetFilter.dateRange,
dateRangeOptions: view.organismConstants.dateRangeOptions,
earliestDate: view.organismConstants.earliestDate,
dateColumn: view.organismConstants.mainDateField,
}}
organismViewKey={organismViewKey}
organismsConfig={getDashboardsConfig().dashboards.organisms}
client:only='react'
>
<SequencingEffortsSelectorFallback slot='fallback' />
</SequencingEffortsPageStateSelector>

<ComponentsGrid slot='dataDisplay'>
<ComponentWrapper title='Number sequences' height='600px'>
<gs-number-sequences-over-time
lapisFilter={JSON.stringify({
displayName: '',
lapisFilter: datasetLapisFilter,
})}
lapisDateField={view.organismConstants.mainDateField}
views='["bar", "line", "table"]'
pageSize={defaultTablePageSize}
width='100%'
height='100%'
granularity={timeGranularity}></gs-number-sequences-over-time>
</ComponentWrapper>
{
subdivisionField !== undefined && (
<ComponentWrapper title={subdivisionLabel} height='600px'>
<gs-aggregate
fields={JSON.stringify([subdivisionField])}
filter={JSON.stringify(datasetLapisFilter)}
pageSize={defaultTablePageSize}
width='100%'
height='100%'
/>
</ComponentWrapper>
)
}
<ComponentWrapper title='Hosts' height='600px'>
<gs-aggregate
fields={JSON.stringify([view.organismConstants.hostField])}
filter={JSON.stringify(datasetLapisFilter)}
pageSize={defaultTablePageSize}
width='100%'
height='100%'></gs-aggregate>
</ComponentWrapper>
<ComponentWrapper title='Author affiliations' height='600px'>
<gs-aggregate
fields={JSON.stringify([view.organismConstants.authorAffiliationsField])}
filter={JSON.stringify(datasetLapisFilter)}
pageSize={defaultTablePageSize}
width='100%'
height='100%'></gs-aggregate>
</ComponentWrapper>
<ComponentWrapper title='Authors' height='600px'>
<gs-aggregate
fields={JSON.stringify([
view.organismConstants.authorsField,
view.organismConstants.authorAffiliationsField,
])}
filter={JSON.stringify(datasetLapisFilter)}
pageSize={defaultTablePageSize}
width='100%'
height='100%'></gs-aggregate>
</ComponentWrapper>
</ComponentsGrid>
</SingleVariantOrganismPageLayout>
<GenericSequencingEffortsPage organism={Organisms.h5n1} />
Loading

0 comments on commit d2a4d03

Please sign in to comment.