refactor(website): extract Gs*.astro components that wrap the web com…

…ponents (#417)

This requires some types from the components library so that we can type
the wrapper props.
Also clean up some types in general.

website/package.json

@@ -21,7 +21,7 @@
     "dependencies": {
         "@astrojs/node": "^9.0.0",
         "@auth/core": "^0.37.4",
-        "@genspectrum/dashboard-components": "^0.10.3",
+        "@genspectrum/dashboard-components": "^0.11.0",
         "@tanstack/react-query": "^5.62.7",
         "astro": "^5.0.5",
         "auth-astro": "^4.2.0",

website/src/components/genspectrum/GsAggregate.astro

@@ -0,0 +1,24 @@
+---
+import { type LapisFilter } from '@genspectrum/dashboard-components/util';
+
+import { defaultTablePageSize } from '../../views/View';
+import ComponentWrapper from '../ComponentWrapper.astro';
+
+interface Props {
+    title: string;
+    height?: string;
+    fields: string[];
+    lapisFilter: LapisFilter;
+}
+
+const { title, height, fields, lapisFilter } = Astro.props;
+---
+
+<ComponentWrapper title={title} height={height}>
+    <gs-aggregate
+        fields={JSON.stringify(fields)}
+        lapisFilter={JSON.stringify(lapisFilter)}
+        pageSize={defaultTablePageSize}
+        width='100%'
+        height='100%'></gs-aggregate>
+</ComponentWrapper>

website/src/components/genspectrum/GsDateRangeSelector.tsx

@@ -9,10 +9,10 @@ export function GsDateRangeSelector({
     initialValue,
     dateRangeOptions,
     earliestDate,
-    dateColumn,
+    lapisDateField,
     width,
 }: {
-    dateColumn: string;
+    lapisDateField: string;
     onDateRangeChange?: (dateRange: DateRangeOption) => void;
     initialValue?: DateRangeOption;
     dateRangeOptions?: DateRangeOption[];
@@ -50,7 +50,7 @@ export function GsDateRangeSelector({
                 );
             }
         };
-    }, [dateRangeOptions, dateColumn, onDateRangeChange, dateRangeSelectorRef]);
+    }, [dateRangeOptions, lapisDateField, onDateRangeChange, dateRangeSelectorRef]);
 
     const isCustom = initialValue?.label === CustomDateRangeLabel;
 
@@ -62,7 +62,7 @@ export function GsDateRangeSelector({
             initialValue={isCustom ? undefined : initialValue?.label}
             initialDateFrom={isCustom ? initialValue.dateFrom : undefined}
             initialDateTo={isCustom ? initialValue.dateTo : undefined}
-            dateColumn={dateColumn}
+            lapisDateField={lapisDateField}
             width={width}
         ></gs-date-range-selector>
     );

website/src/components/genspectrum/GsLineageFilter.tsx

@@ -38,7 +38,7 @@ export function GsLineageFilter<Lineage extends string>({
         <gs-lineage-filter
             lapisField={lapisField}
             placeholderText={placeholderText}
-            initialValue={initialValue}
+            initialValue={initialValue ?? ''}
             width={width}
             ref={lineageFilterRef}
         ></gs-lineage-filter>

website/src/components/genspectrum/GsMutationComparison.astro

@@ -0,0 +1,23 @@
+---
+import type { NamedLapisFilter, SequenceType } from '@genspectrum/dashboard-components/util';
+
+import { defaultTablePageSize } from '../../views/View';
+import ComponentWrapper from '../ComponentWrapper.astro';
+
+interface Props {
+    lapisFilters: NamedLapisFilter[];
+    sequenceType: SequenceType;
+}
+
+const { lapisFilters, sequenceType } = Astro.props;
+---
+
+<ComponentWrapper title={sequenceType === 'nucleotide' ? 'Nucleotide changes' : 'Amino acid changes'}>
+    <gs-mutation-comparison
+        lapisFilters={JSON.stringify(lapisFilters)}
+        sequenceType={sequenceType}
+        views='["venn", "table"]'
+        pageSize={defaultTablePageSize}
+        width='100%'
+        height='100%'></gs-mutation-comparison>
+</ComponentWrapper>

website/src/components/genspectrum/GsMutations.astro

@@ -0,0 +1,23 @@
+---
+import type { LapisFilter, SequenceType } from '@genspectrum/dashboard-components/util';
+
+import { defaultTablePageSize } from '../../views/View';
+import ComponentWrapper from '../ComponentWrapper.astro';
+
+interface Props {
+    lapisFilter: LapisFilter;
+    sequenceType: SequenceType;
+}
+
+const { lapisFilter, sequenceType } = Astro.props;
+---
+
+<ComponentWrapper title={sequenceType === 'nucleotide' ? 'Nucleotide mutations' : 'Amino acid mutations'}>
+    <gs-mutations
+        lapisFilter={JSON.stringify(lapisFilter)}
+        sequenceType={sequenceType}
+        views='["grid", "table", "insertions"]'
+        pageSize={defaultTablePageSize}
+        width='100%'
+        height='100%'></gs-mutations>
+</ComponentWrapper>

website/src/components/genspectrum/GsMutationsOverTime.astro

@@ -0,0 +1,29 @@
+---
+import type { TemporalGranularity, LapisFilter, SequenceType } from '@genspectrum/dashboard-components/util';
+
+import { ComponentHeight } from '../../views/OrganismConstants';
+import ComponentWrapper from '../ComponentWrapper.astro';
+
+interface Props {
+    lapisFilter: LapisFilter;
+    sequenceType: SequenceType;
+    granularity: TemporalGranularity;
+    lapisDateField: string;
+}
+
+const { lapisFilter, sequenceType, granularity, lapisDateField } = Astro.props;
+---
+
+<ComponentWrapper
+    title={sequenceType === 'nucleotide' ? 'Nucleotide mutations over time' : 'Amino acid mutations over time'}
+    height={ComponentHeight.large}
+>
+    <gs-mutations-over-time
+        width='100%'
+        height='100%'
+        lapisFilter={JSON.stringify(lapisFilter)}
+        sequenceType={sequenceType}
+        views='["grid"]'
+        granularity={granularity}
+        lapisDateField={lapisDateField}></gs-mutations-over-time>
+</ComponentWrapper>

website/src/components/genspectrum/GsNumberSequencesOverTime.astro

@@ -0,0 +1,26 @@
+---
+import type { NamedLapisFilter } from '@genspectrum/dashboard-components/util';
+
+import { ComponentHeight } from '../../views/OrganismConstants';
+import { defaultTablePageSize } from '../../views/View';
+import ComponentWrapper from '../ComponentWrapper.astro';
+
+interface Props {
+    lapisFilters: NamedLapisFilter[];
+    lapisDateField: string;
+    granularity: string;
+}
+
+const { lapisFilters, lapisDateField, granularity } = Astro.props;
+---
+
+<ComponentWrapper title='Number sequences' height={ComponentHeight.large}>
+    <gs-number-sequences-over-time
+        lapisFilters={JSON.stringify(lapisFilters)}
+        lapisDateField={lapisDateField}
+        views='["bar", "line", "table"]'
+        pageSize={defaultTablePageSize}
+        width='100%'
+        height='100%'
+        granularity={granularity}></gs-number-sequences-over-time>
+</ComponentWrapper>

website/src/components/genspectrum/GsNumberSequencesOverTime.tsx

@@ -1,16 +1,5 @@
 import '@genspectrum/dashboard-components/components';
-
-import type { LapisFilter } from './GsPrevalenceOverTime.tsx';
-
-type LapisFilters =
-    | {
-          lapisFilter: LapisFilter;
-          displayName: string;
-      }
-    | {
-          lapisFilter: LapisFilter;
-          displayName: string;
-      }[];
+import type { NamedLapisFilter } from '@genspectrum/dashboard-components/util';
 
 type Views = 'bar' | 'line' | 'table';
 
@@ -27,7 +16,7 @@ export function GsNumberSequencesOverTime({
     pageSize,
 }: {
     lapisDateField: string;
-    lapisFilter?: LapisFilters;
+    lapisFilter: NamedLapisFilter[];
     views?: Views[];
     width?: string;
     height?: string;

website/src/components/genspectrum/GsPrevalenceOverTime.astro

@@ -0,0 +1,40 @@
+---
+import type {
+    LapisFilter,
+    NamedLapisFilter,
+    PrevalenceOverTimeView,
+    TemporalGranularity,
+} from '@genspectrum/dashboard-components/util';
+
+import { defaultTablePageSize } from '../../views/View';
+import ComponentWrapper from '../ComponentWrapper.astro';
+
+interface Props {
+    numeratorFilters: NamedLapisFilter[];
+    denominatorFilter: LapisFilter;
+    lapisDateField: string;
+    granularity: TemporalGranularity;
+    views?: PrevalenceOverTimeView[];
+}
+
+const {
+    numeratorFilters,
+    denominatorFilter,
+    lapisDateField,
+    granularity,
+    views = ['bar', 'line', 'bubble', 'table'],
+} = Astro.props;
+---
+
+<ComponentWrapper title='Prevalence over time'>
+    <gs-prevalence-over-time
+        numeratorFilters={JSON.stringify(numeratorFilters)}
+        denominatorFilter={JSON.stringify(denominatorFilter)}
+        lapisDateField={lapisDateField}
+        granularity={granularity}
+        smoothingWindow='0'
+        pageSize={defaultTablePageSize}
+        views={JSON.stringify(views)}
+        width='100%'
+        height='100%'></gs-prevalence-over-time>
+</ComponentWrapper>

website/src/components/genspectrum/GsPrevalenceOverTime.tsx

@@ -1,18 +1,6 @@
 import '@genspectrum/dashboard-components/components';
+import type { LapisFilter, NamedLapisFilter } from '@genspectrum/dashboard-components/util';
 
-export type LapisFilter = Record<string, string | number | null | boolean | undefined | string[]>;
-
-type NumeratorFilter =
-    | {
-          lapisFilter: LapisFilter;
-          displayName: string;
-      }
-    | {
-          lapisFilter: LapisFilter;
-          displayName: string;
-      }[];
-
-type DenominatorFilter = LapisFilter;
 type Views = 'bar' | 'line' | 'bubble' | 'table';
 type ConfidenceIntervalMethod = 'none' | 'wilson';
 type AxisMax = 'maxInData' | 'limitTo1' | number;
@@ -30,8 +18,8 @@ export function GsPrevalenceOverTime({
     pageSize,
     yAxisMaxLinear,
 }: {
-    numeratorFilter: NumeratorFilter;
-    denominatorFilter: DenominatorFilter;
+    numeratorFilter: NamedLapisFilter[];
+    denominatorFilter: LapisFilter;
     views?: Views[];
     granularity?: 'day' | 'week' | 'month' | 'year';
     smoothingWindow?: number;

website/src/components/genspectrum/GsRelativeGrowthAdvantage.astro

@@ -0,0 +1,25 @@
+---
+import type { LapisFilter } from '@genspectrum/dashboard-components/util';
+
+import { defaultTablePageSize } from '../../views/View';
+import ComponentWrapper from '../ComponentWrapper.astro';
+
+interface Props {
+    numeratorFilter: LapisFilter;
+    denominatorFilter: LapisFilter;
+    lapisDateField: string;
+}
+
+const { numeratorFilter, denominatorFilter, lapisDateField } = Astro.props;
+---
+
+<ComponentWrapper title='Relative growth advantage'>
+    <gs-relative-growth-advantage
+        numeratorFilter={JSON.stringify(numeratorFilter)}
+        denominatorFilter={JSON.stringify(denominatorFilter)}
+        generationTime='7'
+        pageSize={defaultTablePageSize}
+        width='100%'
+        height='100%'
+        lapisDateField={lapisDateField}></gs-relative-growth-advantage>
+</ComponentWrapper>

website/src/components/genspectrum/GsTextInput.tsx

@@ -40,7 +40,7 @@ export function GsTextInput<LapisField extends string>({
             lapisField={lapisField}
             placeholderText={placeholderText}
             width={width}
-            initialValue={initialValue}
+            initialValue={initialValue ?? ''}
         ></gs-text-input>
     );
 }