@genspectrum/dashboard-components 0.10.2 → 0.10.3

package/src/preact/components/error-display.tsx

@@ -77,7 +77,7 @@ export const ErrorDisplay: FunctionComponent<ErrorDisplayProps> = ({ error, rese
                                         </button>
                                     </form>
                                     <h1 class='text-lg'>{details.headline}</h1>
-                                    <p class='py-4'>{details.message}</p>
+                                    <div class='py-4'>{details.message}</div>
                                 </div>
                                 <form method='dialog' class='modal-backdrop'>
                                     <button>close</button>
@@ -129,26 +129,47 @@ function getDisplayedErrorMessage(error: Error) {
     }
 
     if (error instanceof InvalidPropsError) {
-        const firstError = error.zodError.errors[0];
-        let message = error.zodError.issues
-            .map((issue) => {
-                const actual =
-                    issue.path[0] in error.componentProps
-                        ? ` '${JSON.stringify(error.componentProps[issue.path[0]])}'`
-                        : '';
-                return `Unexpected value${actual} for "${issue.path.join('.')}": ${issue.message}`;
-            })
-            .join(' - ');
-
-        if (firstError.code === 'invalid_type' && firstError.received === 'null') {
-            message = `Is the "${firstError.path[0]}" attribute in the HTML of the correct type? ${message}`;
-        }
-
         return {
             headline: 'Error - Invalid component attributes',
-            details: { headline: 'Invalid component attributes', message },
+            details: { headline: 'Invalid component attributes', message: <ZodErrorDetails error={error} /> },
         };
     }
 
     return { headline: 'Error', details: undefined };
 }
+
+function ZodErrorDetails({ error }: { error: InvalidPropsError }) {
+    const firstError = error.zodError.errors[0];
+    return (
+        <>
+            <p>
+                <span className='font-bold'>You are a regular user?</span> Unfortunately, there is nothing you can do at
+                the moment. This component is misconfigured. Please contact the administrator of this page.
+            </p>
+            <p>
+                <span className='font-bold'>You are the administrator of this page?</span> You supplied invalid
+                attributes to this component. Please check the browser console for more detailed error messages.
+            </p>
+            {firstError.code === 'invalid_type' && firstError.received === 'null' && (
+                <p>
+                    Is the "{firstError.path[0]}" attribute in the HTML of the correct type? The attribute is expected
+                    to be of type "{firstError.expected}".
+                </p>
+            )}
+            <p>This is a summary of the unexpected attribute values:</p>
+            <ul class='m-4 list-outside list-disc '>
+                {error.zodError.issues.map((issue, index) => {
+                    const actual =
+                        issue.path[0] in error.componentProps
+                            ? `'${JSON.stringify(error.componentProps[issue.path[0]])}'`
+                            : '';
+                    return (
+                        <li key={index}>
+                            Unexpected value {actual} for "{issue.path.join('.')}": {issue.message}
+                        </li>
+                    );
+                })}
+            </ul>
+        </>
+    );
+}

package/src/preact/components/tabs.tsx

@@ -13,7 +13,7 @@ interface ComponentTabsProps {
 }
 
 const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
-    const [activeTab, setActiveTab] = useState(tabs[0].title);
+    const [activeTab, setActiveTab] = useState(tabs[0]?.title);
     const [heightOfTabs, setHeightOfTabs] = useState('3rem');
     const tabRef = useRef<HTMLDivElement>(null);
 
@@ -65,7 +65,7 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
                 {toolbar && <div className='py-2 flex flex-wrap gap-y-1'>{toolbarElement}</div>}
             </div>
             <div
-                className={`p-2 border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === tabs[0].title ? '' : 'rounded-tl-md'}`}
+                className={`p-2 border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === tabs[0]?.title ? '' : 'rounded-tl-md'}`}
                 style={{ height: `calc(100% - ${heightOfTabs})` }}
             >
                 {tabs.map((tab) => (

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
-import { useContext, useState, useRef } from 'preact/hooks';
+import { useContext, useRef, useState } from 'preact/hooks';
+import z from 'zod';
 
 import { MutationFilterInfo } from './mutation-filter-info';
 import { parseAndValidateMutation, type ParsedMutationFilter } from './parseAndValidateMutation';
@@ -9,13 +10,23 @@ import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 
-export interface MutationFilterInnerProps {
-    initialValue?: SelectedMutationFilterStrings | string[] | undefined;
-}
+const selectedMutationFilterStringsSchema = z.object({
+    nucleotideMutations: z.array(z.string()),
+    aminoAcidMutations: z.array(z.string()),
+    nucleotideInsertions: z.array(z.string()),
+    aminoAcidInsertions: z.array(z.string()),
+});
+export type SelectedMutationFilterStrings = z.infer<typeof selectedMutationFilterStringsSchema>;
+const mutationFilterInnerPropsSchema = z.object({
+    initialValue: z.union([selectedMutationFilterStringsSchema.optional(), z.array(z.string()), z.undefined()]),
+});
 
-export interface MutationFilterProps extends MutationFilterInnerProps {
-    width: string;
-}
+const mutationFilterPropsSchema = mutationFilterInnerPropsSchema.extend({
+    width: z.string(),
+});
+
+export type MutationFilterInnerProps = z.infer<typeof mutationFilterInnerPropsSchema>;
+export type MutationFilterProps = z.infer<typeof mutationFilterPropsSchema>;
 
 export type SelectedFilters = {
     nucleotideMutations: (SubstitutionClass | DeletionClass)[];
@@ -24,13 +35,15 @@ export type SelectedFilters = {
     aminoAcidInsertions: InsertionClass[];
 };
 
-export type SelectedMutationFilterStrings = {
-    [Key in keyof SelectedFilters]: string[];
-};
-
-export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initialValue, width }) => {
+export const MutationFilter: FunctionComponent<MutationFilterProps> = (props) => {
+    const { width, initialValue } = props;
     return (
-        <ErrorBoundary size={{ height: '3.375rem', width }} layout='horizontal'>
+        <ErrorBoundary
+            size={{ height: '3.375rem', width }}
+            layout='horizontal'
+            schema={mutationFilterPropsSchema}
+            componentProps={props}
+        >
             <div style={width}>
                 <MutationFilterInner initialValue={initialValue} />
             </div>

package/src/preact/mutations/mutations.tsx

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { type Dispatch, type StateUpdater, useContext, useState } from 'preact/hooks';
+import z from 'zod';
 
 import { getInsertionsTableData } from './getInsertionsTableData';
 import { getMutationsTableData } from './getMutationsTableData';
@@ -9,9 +10,10 @@ import MutationsTable from './mutations-table';
 import { filterMutationsData, queryMutationsData } from './queryMutations';
 import {
     type InsertionEntry,
-    type LapisFilter,
-    type SequenceType,
+    lapisFilterSchema,
+    sequenceTypeSchema,
     type SubstitutionOrDeletionEntry,
+    views,
 } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
@@ -28,23 +30,25 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
-export type View = 'table' | 'grid' | 'insertions';
+const viewSchema = z.union([z.literal(views.table), z.literal(views.grid), z.literal(views.insertions)]);
+export type View = z.infer<typeof viewSchema>;
 
-export interface MutationsProps {
-    width: string;
-    height: string;
-    lapisFilter: LapisFilter;
-    sequenceType: SequenceType;
-    views: View[];
-    pageSize: boolean | number;
-}
+const mutationsPropsSchema = z.object({
+    lapisFilter: lapisFilterSchema,
+    sequenceType: sequenceTypeSchema,
+    views: viewSchema.array(),
+    pageSize: z.union([z.boolean(), z.number()]),
+    width: z.string(),
+    height: z.string(),
+});
+export type MutationsProps = z.infer<typeof mutationsPropsSchema>;
 
 export const Mutations: FunctionComponent<MutationsProps> = (componentProps) => {
     const { width, height } = componentProps;
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} componentProps={componentProps} schema={mutationsPropsSchema}>
             <ResizeContainer size={size}>
                 <MutationsInner {...componentProps} />
             </ResizeContainer>

package/src/preact/mutationsOverTime/mutations-over-time.stories.tsx

@@ -6,6 +6,7 @@ import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
 
 const meta: Meta<MutationsOverTimeProps> = {
     title: 'Visualization/Mutation over time',
@@ -155,3 +156,16 @@ export const ShowsNoDataMessageForStrictFilters: StoryObj<MutationsOverTimeProps
         );
     },
 };
+
+export const WithNoLapisDateFieldField: StoryObj<MutationsOverTimeProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        lapisDateField: '',
+    },
+    play: async ({ canvasElement, step }) => {
+        step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
+        });
+    },
+};

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { type Dispatch, type StateUpdater, useContext, useMemo, useState } from 'preact/hooks';
+import z from 'zod';
 
 // @ts-expect-error -- uses subpath imports and vite worker import
 import MutationOverTimeWorker from '#mutationOverTime?worker&inline';
@@ -9,10 +10,11 @@ import { type MutationOverTimeWorkerResponse } from './mutationOverTimeWorker';
 import MutationsOverTimeGrid from './mutations-over-time-grid';
 import { type MutationOverTimeQuery } from '../../query/queryMutationsOverTime';
 import {
-    type LapisFilter,
-    type SequenceType,
+    lapisFilterSchema,
+    sequenceTypeSchema,
     type SubstitutionOrDeletionEntry,
-    type TemporalGranularity,
+    temporalGranularitySchema,
+    views,
 } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
 import { toTemporalClass } from '../../utils/temporalClass';
@@ -33,24 +35,26 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 import Tabs from '../components/tabs';
 import { useWebWorker } from '../webWorkers/useWebWorker';
 
-export type View = 'grid';
+const viewSchema = z.literal(views.grid);
+export type View = z.infer<typeof viewSchema>;
 
-export interface MutationsOverTimeProps {
-    width: string;
-    height: string;
-    lapisFilter: LapisFilter;
-    sequenceType: SequenceType;
-    views: View[];
-    granularity: TemporalGranularity;
-    lapisDateField: string;
-}
+const mutationOverTimeSchema = z.object({
+    lapisFilter: lapisFilterSchema,
+    sequenceType: sequenceTypeSchema,
+    views: z.array(viewSchema),
+    granularity: temporalGranularitySchema,
+    lapisDateField: z.string().min(1),
+    width: z.string(),
+    height: z.string(),
+});
+export type MutationsOverTimeProps = z.infer<typeof mutationOverTimeSchema>;
 
 export const MutationsOverTime: FunctionComponent<MutationsOverTimeProps> = (componentProps) => {
     const { width, height } = componentProps;
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} schema={mutationOverTimeSchema} componentProps={componentProps}>
             <ResizeContainer size={size}>
                 <MutationsOverTimeInner {...componentProps} />
             </ResizeContainer>

package/src/preact/numberSequencesOverTime/number-sequences-over-time.stories.tsx

@@ -6,6 +6,7 @@ import oneVariantEG from '../../preact/numberSequencesOverTime/__mockData__/oneV
 import twoVariantsEG from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsEG.json';
 import twoVariantsJN1 from '../../preact/numberSequencesOverTime/__mockData__/twoVariantsJN1.json';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
 
 export default {
     title: 'Visualization/NumberSequencesOverTime',
@@ -129,3 +130,16 @@ export const TwoVariants = {
         },
     },
 };
+
+export const WithNoLapisDateField: StoryObj<NumberSequencesOverTimeProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        lapisDateField: '',
+    },
+    play: async ({ canvasElement, step }) => {
+        step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
+        });
+    },
+};

package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { useContext, useState } from 'preact/hooks';
+import z from 'zod';
 
 import { getNumberOfSequencesOverTimeTableData } from './getNumberOfSequencesOverTimeTableData';
 import { NumberSequencesOverTimeBarChart } from './number-sequences-over-time-bar-chart';
@@ -9,7 +10,7 @@ import {
     type NumberOfSequencesDatasets,
     queryNumberOfSequencesOverTime,
 } from '../../query/queryNumberOfSequencesOverTime';
-import type { NamedLapisFilter, TemporalGranularity } from '../../types';
+import { namedLapisFilterSchema, temporalGranularitySchema, views } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -23,25 +24,32 @@ import Tabs from '../components/tabs';
 import type { ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
-type NumberSequencesOverTimeView = 'bar' | 'line' | 'table';
-
-export interface NumberSequencesOverTimeProps {
-    width: string;
-    height: string;
-    lapisFilter: NamedLapisFilter | NamedLapisFilter[];
-    lapisDateField: string;
-    views: NumberSequencesOverTimeView[];
-    granularity: TemporalGranularity;
-    smoothingWindow: number;
-    pageSize: boolean | number;
-}
+const numberSequencesOverTimeViewSchema = z.union([
+    z.literal(views.bar),
+    z.literal(views.line),
+    z.literal(views.table),
+]);
+export type NumberSequencesOverTimeView = z.infer<typeof numberSequencesOverTimeViewSchema>;
+
+const numberSequencesOverTimePropsSchema = z.object({
+    width: z.string(),
+    height: z.string(),
+    lapisFilter: z.union([namedLapisFilterSchema, z.array(namedLapisFilterSchema)]),
+    lapisDateField: z.string().min(1),
+    views: z.array(numberSequencesOverTimeViewSchema),
+    granularity: temporalGranularitySchema,
+    smoothingWindow: z.number(),
+    pageSize: z.union([z.boolean(), z.number()]),
+});
+
+export type NumberSequencesOverTimeProps = z.infer<typeof numberSequencesOverTimePropsSchema>;
 
 export const NumberSequencesOverTime = (componentProps: NumberSequencesOverTimeProps) => {
     const { width, height } = componentProps;
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} componentProps={componentProps} schema={numberSequencesOverTimePropsSchema}>
             <ResizeContainer size={size}>
                 <NumberSequencesOverTimeInner {...componentProps} />
             </ResizeContainer>

package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx

@@ -10,6 +10,7 @@ import numeratorFilterNoData from './__mockData__/numeratorFilterNoData.json';
 import numeratorOneDataset from './__mockData__/numeratorFilterOneDataset.json';
 import { PrevalenceOverTime, type PrevalenceOverTimeProps } from './prevalence-over-time';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
 
 export default {
     title: 'Visualization/PrevalenceOverTime',
@@ -256,3 +257,16 @@ export const ShowsNoDataBanner: StoryObj<PrevalenceOverTimeProps> = {
         });
     },
 };
+
+export const WithNoLapisDateField: StoryObj<PrevalenceOverTimeProps> = {
+    ...OneVariant,
+    args: {
+        ...OneVariant.args,
+        lapisDateField: '',
+    },
+    play: async ({ canvasElement, step }) => {
+        step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
+        });
+    },
+};

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { useContext, useEffect, useState } from 'preact/hooks';
+import z from 'zod';
 
 import { getPrevalenceOverTimeTableData } from './getPrevalenceOverTimeTableData';
 import PrevalenceOverTimeBarChart from './prevalence-over-time-bar-chart';
@@ -7,7 +8,7 @@ import PrevalenceOverTimeBubbleChart from './prevalence-over-time-bubble-chart';
 import PrevalenceOverTimeLineChart from './prevalence-over-time-line-chart';
 import PrevalenceOverTimeTable from './prevalence-over-time-table';
 import { type PrevalenceOverTimeData, queryPrevalenceOverTime } from '../../query/queryPrevalenceOverTime';
-import { type LapisFilter, type NamedLapisFilter, type TemporalGranularity } from '../../types';
+import { lapisFilterSchema, namedLapisFilterSchema, temporalGranularitySchema, views } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ConfidenceIntervalSelector } from '../components/confidence-interval-selector';
 import { CsvDownloadButton } from '../components/csv-download-button';
@@ -19,34 +20,42 @@ import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
-import { type ConfidenceIntervalMethod } from '../shared/charts/confideceInterval';
-import { type AxisMax } from '../shared/charts/getYAxisMax';
+import { type ConfidenceIntervalMethod, confidenceIntervalMethodSchema } from '../shared/charts/confideceInterval';
+import { axisMaxSchema } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
-export type View = 'bar' | 'line' | 'bubble' | 'table';
+const viewSchema = z.union([
+    z.literal(views.table),
+    z.literal(views.bar),
+    z.literal(views.line),
+    z.literal(views.bubble),
+]);
+export type View = z.infer<typeof viewSchema>;
 
-export interface PrevalenceOverTimeProps {
-    width: string;
-    height: string;
-    numeratorFilter: NamedLapisFilter | NamedLapisFilter[];
-    denominatorFilter: LapisFilter;
-    granularity: TemporalGranularity;
-    smoothingWindow: number;
-    views: View[];
-    confidenceIntervalMethods: ConfidenceIntervalMethod[];
-    lapisDateField: string;
-    pageSize: boolean | number;
-    yAxisMaxLinear: AxisMax;
-    yAxisMaxLogarithmic: AxisMax;
-}
+const prevalenceOverTimePropsSchema = z.object({
+    width: z.string(),
+    height: z.string(),
+    numeratorFilter: z.union([namedLapisFilterSchema, z.array(namedLapisFilterSchema)]),
+    denominatorFilter: lapisFilterSchema,
+    granularity: temporalGranularitySchema,
+    smoothingWindow: z.number(),
+    views: z.array(viewSchema),
+    confidenceIntervalMethods: z.array(confidenceIntervalMethodSchema),
+    lapisDateField: z.string().min(1),
+    pageSize: z.union([z.boolean(), z.number()]),
+    yAxisMaxLinear: axisMaxSchema,
+    yAxisMaxLogarithmic: axisMaxSchema,
+});
+
+export type PrevalenceOverTimeProps = z.infer<typeof prevalenceOverTimePropsSchema>;
 
 export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = (componentProps) => {
     const { width, height } = componentProps;
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} schema={prevalenceOverTimePropsSchema} componentProps={componentProps}>
             <ResizeContainer size={size}>
                 <PrevalenceOverTimeInner {...componentProps} />
             </ResizeContainer>

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx

@@ -6,6 +6,7 @@ import numerator from './__mockData__/numeratorFilter.json';
 import { RelativeGrowthAdvantage, type RelativeGrowthAdvantageProps } from './relative-growth-advantage';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
 
 export default {
     title: 'Visualization/RelativeGrowthAdvantage',
@@ -190,3 +191,16 @@ export const TooFewDataToComputeGrowthAdvantage: StoryObj<RelativeGrowthAdvantag
         });
     },
 };
+
+export const WithNoLapisDateField: StoryObj<RelativeGrowthAdvantageProps> = {
+    ...Primary,
+    args: {
+        ...Primary.args,
+        lapisDateField: '',
+    },
+    play: async ({ canvasElement, step }) => {
+        step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
+        });
+    },
+};

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { useContext, useState } from 'preact/hooks';
+import z from 'zod';
 
 import RelativeGrowthAdvantageChart from './relative-growth-advantage-chart';
 import {
@@ -7,7 +8,7 @@ import {
     queryRelativeGrowthAdvantage,
     type RelativeGrowthAdvantageData,
 } from '../../query/queryRelativeGrowthAdvantage';
-import { type LapisFilter } from '../../types';
+import { lapisFilterSchema, views } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
@@ -17,29 +18,31 @@ import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
-import { type YAxisMaxConfig } from '../shared/charts/getYAxisMax';
+import { yAxisMaxConfigSchema } from '../shared/charts/getYAxisMax';
 import { type ScaleType } from '../shared/charts/getYAxisScale';
 import { useQuery } from '../useQuery';
 
-export type View = 'line';
-
-export interface RelativeGrowthAdvantageProps {
-    width: string;
-    height: string;
-    numeratorFilter: LapisFilter;
-    denominatorFilter: LapisFilter;
-    generationTime: number;
-    views: View[];
-    lapisDateField: string;
-    yAxisMaxConfig: YAxisMaxConfig;
-}
+const viewSchema = z.literal(views.line);
+export type View = z.infer<typeof viewSchema>;
+
+export const relativeGrowthAdvantagePropsSchema = z.object({
+    width: z.string(),
+    height: z.string(),
+    numeratorFilter: lapisFilterSchema,
+    denominatorFilter: lapisFilterSchema,
+    generationTime: z.number(),
+    views: z.array(viewSchema),
+    lapisDateField: z.string().min(1),
+    yAxisMaxConfig: yAxisMaxConfigSchema,
+});
+export type RelativeGrowthAdvantageProps = z.infer<typeof relativeGrowthAdvantagePropsSchema>;
 
 export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = (componentProps) => {
     const { width, height } = componentProps;
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} schema={relativeGrowthAdvantagePropsSchema} componentProps={componentProps}>
             <ResizeContainer size={size}>
                 <RelativeGrowthAdvantageInner {...componentProps} />
             </ResizeContainer>

package/src/preact/shared/charts/confideceInterval.ts

@@ -1,10 +1,11 @@
-// calculateWilsonInterval calculates the Wilson score interval for 95% confidence.
-//
-// This function is based on https://github.com/erikfox/wilson-interval, but without
-// high precision math.
-//
-// observed - number of observed positive outcomes
-// sample - number of experiments or size of the sample
+import z from 'zod';
+
+/*
+ * calculateWilsonInterval calculates the Wilson score interval for 95% confidence.
+ *This function is based on https://github.com/erikfox/wilson-interval, but without high precision math.
+ * observed - number of observed positive outcomes
+ * sample - number of experiments or size of the sample
+ */
 export function wilson95PercentConfidenceInterval(observed: number, sample: number) {
     const p = observed / sample;
     const n = sample;
@@ -31,4 +32,5 @@ export const confidenceIntervalDataLabel = (
     return `${label}${value.toFixed(3)} (${lowerLimit?.toFixed(3)} - ${upperLimit?.toFixed(3)})`;
 };
 
-export type ConfidenceIntervalMethod = 'wilson' | 'none';
+export const confidenceIntervalMethodSchema = z.union([z.literal('wilson'), z.literal('none')]);
+export type ConfidenceIntervalMethod = z.infer<typeof confidenceIntervalMethodSchema>;

package/src/preact/shared/charts/getYAxisMax.ts

@@ -1,9 +1,14 @@
-export interface YAxisMaxConfig {
-    linear?: AxisMax;
-    logarithmic?: AxisMax;
-}
+import z from 'zod';
 
-export type AxisMax = 'maxInData' | 'limitTo1' | number;
+export const axisMaxSchema = z.union([z.literal('maxInData'), z.literal('limitTo1'), z.number()]);
+export type AxisMax = z.infer<typeof axisMaxSchema>;
+
+export const yAxisMaxConfigSchema = z.object({
+    linear: axisMaxSchema.optional(),
+    logarithmic: axisMaxSchema.optional(),
+});
+
+export type YAxisMaxConfig = z.infer<typeof yAxisMaxConfigSchema>;
 
 export const getYAxisMax = (maxInData: number, axisMax?: AxisMax) => {
     if (!axisMax) {