@genspectrum/dashboard-components 0.10.1 → 0.10.3

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

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
+import { type ZodError } from 'zod';
 
 import { LapisError, UnknownLapisError } from '../../lapisApi/lapisApi';
 
@@ -24,9 +25,19 @@ export class UserFacingError extends Error {
     }
 }
 
+export class InvalidPropsError extends Error {
+    constructor(
+        public readonly zodError: ZodError,
+        public readonly componentProps: Record<string, unknown>,
+    ) {
+        super(zodError.message);
+        this.name = 'InvalidPropsError';
+    }
+}
+
 export type ErrorDisplayProps = {
     error: Error;
-    resetError: () => void;
+    resetError?: () => void;
     layout?: 'horizontal' | 'vertical';
 };
 
@@ -66,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>
@@ -76,10 +87,12 @@ export const ErrorDisplay: FunctionComponent<ErrorDisplayProps> = ({ error, rese
                     )}
                 </div>
             </div>
-            <button onClick={resetError} className='btn btn-sm flex items-center m-4'>
-                <span className='iconify mdi--reload text-lg' />
-                Try again
-            </button>
+            {resetError !== undefined && (
+                <button onClick={resetError} className='btn btn-sm flex items-center m-4'>
+                    <span className='iconify mdi--reload text-lg' />
+                    Try again
+                </button>
+            )}
         </div>
     );
 };
@@ -115,5 +128,48 @@ function getDisplayedErrorMessage(error: Error) {
         };
     }
 
+    if (error instanceof InvalidPropsError) {
+        return {
+            headline: 'Error - Invalid component attributes',
+            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/dateRangeSelector/computeInitialValues.spec.ts

@@ -50,9 +50,15 @@ describe('computeInitialValues', () => {
         expectDateMatches(result.initialSelectedDateTo, today);
     });
 
-    it('should fall back to default when initial value is unknown', () => {
+    it('should throw when initial value is unknown', () => {
+        expect(() =>
+            computeInitialValues('not a known value', undefined, undefined, earliestDate, dateRangeOptions),
+        ).toThrowError(/Invalid initialValue "not a known value", It must be one of/);
+    });
+
+    it('should throw when initial value is set but no options are provided', () => {
         expect(() => computeInitialValues('not a known value', undefined, undefined, earliestDate, [])).toThrowError(
-            /Invalid initialValue "not a known value", It must be one of/,
+            /There are no selectable options/,
         );
     });
 

package/src/preact/dateRangeSelector/computeInitialValues.ts

@@ -18,6 +18,12 @@ export function computeInitialValues(
         const initialSelectedDateRange = selectableOptions.find((option) => option.value === initialValue)?.value;
 
         if (initialValue !== undefined && initialSelectedDateRange === undefined) {
+            if (selectableOptions.length === 0) {
+                throw new UserFacingError(
+                    'Invalid initialValue',
+                    'There are no selectable options, but initialValue is set.',
+                );
+            }
             throw new UserFacingError(
                 'Invalid initialValue',
                 `Invalid initialValue "${initialValue}", It must be one of ${selectableOptions.map((option) => `'${option.value}'`).join(', ')}`,

package/src/preact/dateRangeSelector/date-range-selector.stories.tsx

@@ -8,6 +8,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { dateRangeOptionPresets } from './dateRangeOption';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
 
 const earliestDate = '1970-01-01';
 
@@ -55,8 +56,8 @@ const meta: Meta<DateRangeSelectorProps> = {
         initialValue: dateRangeOptionPresets.lastMonth.label,
         dateColumn: 'aDateColumn',
         width: '100%',
-        initialDateFrom: '',
-        initialDateTo: '',
+        initialDateFrom: undefined,
+        initialDateTo: undefined,
     },
 };
 
@@ -221,6 +222,19 @@ export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
     },
 };
 
+export const WithNoDateColumn: StoryObj<DateRangeSelectorProps> = {
+    ...Primary,
+    args: {
+        ...Primary.args,
+        dateColumn: '',
+    },
+    play: async ({ canvasElement, step }) => {
+        step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
+        });
+    },
+};
+
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
     const canvas = within(canvasElement);
 

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -1,10 +1,11 @@
 import flatpickr from 'flatpickr';
 import 'flatpickr/dist/flatpickr.min.css';
 import { useEffect, useRef, useState } from 'preact/hooks';
+import z from 'zod';
 
 import { computeInitialValues } from './computeInitialValues';
 import { toYYYYMMDD } from './dateConversion';
-import { type DateRangeOption, DateRangeOptionChangedEvent, type DateRangeSelectOption } from './dateRangeOption';
+import { DateRangeOptionChangedEvent, dateRangeOptionSchema, type DateRangeSelectOption } from './dateRangeOption';
 import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Select } from '../components/select';
@@ -12,24 +13,28 @@ import type { ScaleType } from '../shared/charts/getYAxisScale';
 
 const customOption = 'Custom';
 
-export interface DateRangeSelectorProps extends DateRangeSelectorPropsInner {
-    width: string;
-}
+const dateRangeSelectorInnerPropsSchema = z.object({
+    dateRangeOptions: z.array(dateRangeOptionSchema),
+    earliestDate: z.string().date(),
+    initialValue: z.string().optional(),
+    initialDateFrom: z.string().date().optional(),
+    initialDateTo: z.string().date().optional(),
+    dateColumn: z.string().min(1),
+});
 
-export interface DateRangeSelectorPropsInner {
-    dateRangeOptions: DateRangeOption[];
-    earliestDate: string;
-    initialValue: string | undefined;
-    initialDateFrom: string;
-    initialDateTo: string;
-    dateColumn: string;
-}
+const dateRangeSelectorPropsSchema = dateRangeSelectorInnerPropsSchema.extend({
+    width: z.string(),
+});
 
-export const DateRangeSelector = ({ width, ...innerProps }: DateRangeSelectorProps) => {
+export type DateRangeSelectorProps = z.infer<typeof dateRangeSelectorPropsSchema>;
+export type DateRangeSelectorInnerProps = z.infer<typeof dateRangeSelectorInnerPropsSchema>;
+
+export const DateRangeSelector = (props: DateRangeSelectorProps) => {
+    const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size} layout='horizontal'>
+        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={dateRangeSelectorPropsSchema}>
             <div style={{ width }}>
                 <DateRangeSelectorInner {...innerProps} />
             </div>
@@ -44,7 +49,7 @@ export const DateRangeSelectorInner = ({
     dateColumn,
     initialDateFrom,
     initialDateTo,
-}: DateRangeSelectorPropsInner) => {
+}: DateRangeSelectorInnerProps) => {
     const initialValues = computeInitialValues(
         initialValue,
         initialDateFrom,

package/src/preact/dateRangeSelector/dateRangeOption.ts

@@ -1,24 +1,29 @@
+import z from 'zod';
+
 import { toYYYYMMDD } from './dateConversion';
 
 /**
  * A date range option that can be used in the `gs-date-range-selector` component.
  */
-export type DateRangeOption = {
+export const dateRangeOptionSchema = z.object({
     /** The label of the date range option that will be shown to the user */
-    label: string;
+    label: z.string(),
     /**
      * The start date of the date range in the format `YYYY-MM-DD`.
      * If not set, the date range selector will default to the `earliestDate` property.
      */
-    dateFrom?: string;
+    dateFrom: z.string().date().optional(),
     /**
      * The end date of the date range in the format `YYYY-MM-DD`.
      * If not set, the date range selector will default to the current date.
      */
-    dateTo?: string;
-};
+    dateTo: z.string().date().optional(),
+});
+
+export type DateRangeOption = z.infer<typeof dateRangeOptionSchema>;
 
 export type DateRangeSelectOption = string | { dateFrom: string; dateTo: string };
+
 export class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {
     constructor(detail: DateRangeSelectOption) {
         super('gs-date-range-option-changed', {

package/src/preact/lineageFilter/lineage-filter.stories.tsx

@@ -5,6 +5,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
 
 const meta: Meta = {
     title: 'Input/LineageFilter',
@@ -31,6 +32,12 @@ const meta: Meta = {
             ],
         },
     },
+    args: {
+        lapisField: 'pangoLineage',
+        placeholderText: 'Enter lineage',
+        initialValue: '',
+        width: '100%',
+    },
 };
 
 export default meta;
@@ -46,10 +53,17 @@ export const Default: StoryObj<LineageFilterProps> = {
             />
         </LapisUrlContext.Provider>
     ),
+};
+
+export const WithNoLapisField: StoryObj<LineageFilterProps> = {
+    ...Default,
     args: {
-        lapisField: 'pangoLineage',
-        placeholderText: 'Enter lineage',
-        initialValue: '',
-        width: '100%',
+        ...Default.args,
+        lapisField: '',
+    },
+    play: async ({ canvasElement, step }) => {
+        step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
+        });
     },
 };

package/src/preact/lineageFilter/lineage-filter.tsx

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { useContext, useRef } from 'preact/hooks';
+import z from 'zod';
 
 import { fetchLineageAutocompleteList } from './fetchLineageAutocompleteList';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -9,21 +10,25 @@ import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
 
-export interface LineageFilterInnerProps {
-    lapisField: string;
-    placeholderText: string;
-    initialValue: string;
-}
+const lineageFilterInnerPropsSchema = z.object({
+    lapisField: z.string().min(1),
+    placeholderText: z.string().optional(),
+    initialValue: z.string(),
+});
 
-export interface LineageFilterProps extends LineageFilterInnerProps {
-    width: string;
-}
+const lineageFilterPropsSchema = lineageFilterInnerPropsSchema.extend({
+    width: z.string(),
+});
 
-export const LineageFilter: FunctionComponent<LineageFilterProps> = ({ width, ...innerProps }) => {
+export type LineageFilterInnerProps = z.infer<typeof lineageFilterInnerPropsSchema>;
+export type LineageFilterProps = z.infer<typeof lineageFilterPropsSchema>;
+
+export const LineageFilter: FunctionComponent<LineageFilterProps> = (props) => {
+    const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size} layout='horizontal'>
+        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={lineageFilterPropsSchema}>
             <ResizeContainer size={size}>
                 <LineageFilterInner {...innerProps} />
             </ResizeContainer>

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -5,6 +5,7 @@ import { LocationFilter, type LocationFilterProps } from './location-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
 
 const meta: Meta<LocationFilterProps> = {
     title: 'Input/LocationFilter',
@@ -75,3 +76,16 @@ export const Primary: StoryObj<LocationFilterProps> = {
         </LapisUrlContext.Provider>
     ),
 };
+
+export const WithNoFields: StoryObj<LocationFilterProps> = {
+    ...Primary,
+    args: {
+        ...Primary.args,
+        fields: [],
+    },
+    play: async ({ canvasElement, step }) => {
+        step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(canvasElement, 'Array must contain at least 1 element(s)');
+        });
+    },
+};

package/src/preact/locationFilter/location-filter.tsx

@@ -1,6 +1,7 @@
 import { type FunctionComponent } from 'preact';
 import { useContext, useRef, useState } from 'preact/hooks';
 import { type JSXInternal } from 'preact/src/jsx';
+import z from 'zod';
 
 import { fetchAutocompletionList } from './fetchAutocompletionList';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -9,21 +10,25 @@ import { LoadingDisplay } from '../components/loading-display';
 import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
 
-export interface LocationFilterInnerProps {
-    initialValue: string;
-    placeholderText: string;
-    fields: string[];
-}
+const lineageFilterInnerPropsSchema = z.object({
+    initialValue: z.string().optional(),
+    placeholderText: z.string().optional(),
+    fields: z.array(z.string()).min(1),
+});
 
-export interface LocationFilterProps extends LocationFilterInnerProps {
-    width: string;
-}
+const lineageFilterPropsSchema = lineageFilterInnerPropsSchema.extend({
+    width: z.string(),
+});
 
-export const LocationFilter: FunctionComponent<LocationFilterProps> = ({ width, ...innerProps }) => {
+export type LocationFilterInnerProps = z.infer<typeof lineageFilterInnerPropsSchema>;
+export type LocationFilterProps = z.infer<typeof lineageFilterPropsSchema>;
+
+export const LocationFilter: FunctionComponent<LocationFilterProps> = (props) => {
+    const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size} layout='horizontal'>
+        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={lineageFilterPropsSchema}>
             <ResizeContainer size={size}>
                 <LocationFilterInner {...innerProps} />
             </ResizeContainer>

package/src/preact/mutationComparison/mutation-comparison-venn.tsx

@@ -1,7 +1,7 @@
 import { type ActiveElement, Chart, type ChartConfiguration, type ChartEvent, registerables } from 'chart.js';
 import { ArcSlice, extractSets, VennDiagramController } from 'chartjs-chart-venn';
 import { type FunctionComponent } from 'preact';
-import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { useMemo, useState } from 'preact/hooks';
 
 import { type MutationData } from './queryMutationData';
 import { type Dataset } from '../../operator/Dataset';
@@ -19,8 +19,6 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
     data,
     proportionInterval,
 }) => {
-    const divRef = useRef<HTMLDivElement>(null);
-    const noElementSelectedMessage = 'You have no elements selected. Click in the venn diagram to select.';
     const [selectedDatasetIndex, setSelectedDatasetIndex] = useState<null | number>(null);
 
     const sets = useMemo(
@@ -45,20 +43,6 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
         [data, proportionInterval],
     );
 
-    useEffect(() => {
-        if (divRef.current === null) {
-            return;
-        }
-        if (selectedDatasetIndex === null) {
-            divRef.current.innerText = noElementSelectedMessage;
-            return;
-        }
-
-        const values = sets.datasets[0].data[selectedDatasetIndex].values;
-        const label = sets.datasets[0].data[selectedDatasetIndex].label;
-        divRef.current!.innerText = `${label}: ${values.join(', ')}` || '';
-    }, [divRef, selectedDatasetIndex, sets]);
-
     const config: ChartConfiguration = useMemo(
         () => ({
             type: 'venn',
@@ -119,7 +103,22 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
             <div className='flex-1'>
                 <GsChart configuration={config} />
             </div>
-            <div class='flex flex-wrap break-words m-2' ref={divRef} />
+            <p class='flex flex-wrap break-words m-2'>{getSelectedMutationsDescription(selectedDatasetIndex, sets)}</p>
         </div>
     );
 };
+
+const noElementSelectedMessage = 'You have no elements selected. Click in the venn diagram to select.';
+
+function getSelectedMutationsDescription(
+    selectedDatasetIndex: number | null,
+    sets: ReturnType<typeof extractSets<string>>,
+) {
+    if (selectedDatasetIndex === null) {
+        return noElementSelectedMessage;
+    }
+
+    const values = sets.datasets[0].data[selectedDatasetIndex].values;
+    const label = sets.datasets[0].data[selectedDatasetIndex].label;
+    return `${label}: ${values.join(', ')}` || '';
+}

package/src/preact/mutationComparison/mutation-comparison.tsx

@@ -1,11 +1,17 @@
 import { type FunctionComponent } from 'preact';
 import { type Dispatch, type StateUpdater, useContext, useMemo, useState } from 'preact/hooks';
+import z from 'zod';
 
 import { getMutationComparisonTableData } from './getMutationComparisonTableData';
 import { MutationComparisonTable } from './mutation-comparison-table';
 import { MutationComparisonVenn } from './mutation-comparison-venn';
 import { filterMutationData, type MutationData, queryMutationData } from './queryMutationData';
-import { type NamedLapisFilter, type SequenceType } from '../../types';
+import {
+    type MutationComparisonView,
+    mutationComparisonViewSchema,
+    namedLapisFilterSchema,
+    sequenceTypeSchema,
+} from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -21,23 +27,23 @@ import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '..
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
-export type View = 'table' | 'venn';
+const mutationComparisonPropsSchema = z.object({
+    width: z.string(),
+    height: z.string(),
+    lapisFilters: z.array(namedLapisFilterSchema).min(1),
+    sequenceType: sequenceTypeSchema,
+    views: z.array(mutationComparisonViewSchema),
+    pageSize: z.union([z.boolean(), z.number()]),
+});
 
-export interface MutationComparisonProps {
-    width: string;
-    height: string;
-    lapisFilters: NamedLapisFilter[];
-    sequenceType: SequenceType;
-    views: View[];
-    pageSize: boolean | number;
-}
+export type MutationComparisonProps = z.infer<typeof mutationComparisonPropsSchema>;
 
 export const MutationComparison: FunctionComponent<MutationComparisonProps> = (componentProps) => {
     const { width, height } = componentProps;
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} componentProps={componentProps} schema={mutationComparisonPropsSchema}>
             <ResizeContainer size={size}>
                 <MutationComparisonInner {...componentProps} />
             </ResizeContainer>
@@ -86,7 +92,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
         [data, displayedSegments, displayedMutationTypes],
     );
 
-    const getTab = (view: View) => {
+    const getTab = (view: MutationComparisonView) => {
         switch (view) {
             case 'table':
                 return {

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>