@genspectrum/dashboard-components 0.10.1 → 0.10.3

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

@@ -54,7 +54,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                                 <MutationCell mutation={mutation} />
                             </div>
                             {dates.map((date, columnIndex) => {
-                                const value = data.get(mutation, date) ?? { proportion: 0, count: 0, totalCount: 0 };
+                                const value = data.get(mutation, date) ?? null;
                                 const tooltipPosition = getTooltipPosition(
                                     rowIndex,
                                     shownMutations.length,
@@ -106,10 +106,16 @@ const ProportionCell: FunctionComponent<{
             </p>
             <p>({timeIntervalDisplay(dateClass)})</p>
             <p>{mutation.code}</p>
-            <p>Proportion: {formatProportion(value.proportion)}</p>
-            <p>
-                Count: {value.count} / {value.totalCount} total
-            </p>
+            {value === null ? (
+                <p>No data</p>
+            ) : (
+                <>
+                    <p>Proportion: {formatProportion(value.proportion)}</p>
+                    <p>
+                        Count: {value.count} / {value.totalCount} total
+                    </p>
+                </>
+            )}
         </div>
     );
 
@@ -118,12 +124,14 @@ const ProportionCell: FunctionComponent<{
             <Tooltip content={tooltipContent} position={tooltipPosition}>
                 <div
                     style={{
-                        backgroundColor: getColorWithingScale(value.proportion, colorScale),
-                        color: getTextColorForScale(value.proportion, colorScale),
+                        backgroundColor: getColorWithingScale(value?.proportion, colorScale),
+                        color: getTextColorForScale(value?.proportion, colorScale),
                     }}
                     className={`w-full h-full text-center hover:font-bold text-xs group @container`}
                 >
-                    <span className='invisible @[2rem]:visible'>{formatProportion(value.proportion, 0)}</span>
+                    <span className='invisible @[2rem]:visible'>
+                        {value === null ? '' : formatProportion(value.proportion, 0)}
+                    </span>
                 </div>
             </Tooltip>
         </div>

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>
@@ -72,11 +76,9 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> =
         };
     }, [granularity, lapis, lapisDateField, lapisFilter, sequenceType]);
 
-    const worker = useMemo(() => new MutationOverTimeWorker(), []);
-
     const { data, error, isLoading } = useWebWorker<MutationOverTimeQuery, MutationOverTimeWorkerResponse>(
         messageToWorker,
-        worker,
+        MutationOverTimeWorker,
     );
 
     if (isLoading) {

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) {

package/src/preact/shared/stories/expectInvalidAttributesErrorMessage.ts

@@ -0,0 +1,13 @@
+import { expect, waitFor, within } from '@storybook/test';
+
+export async function expectInvalidAttributesErrorMessage(canvasElement: HTMLElement, errorMessage: string) {
+    const canvas = within(canvasElement);
+
+    await waitFor(() =>
+        expect(canvas.getByText('Error - Invalid component attributes', { exact: false })).toBeInTheDocument(),
+    );
+
+    canvas.getByRole('button', { name: 'Show details.' }).click();
+
+    await waitFor(() => expect(canvas.getByText(errorMessage, { exact: false })).toBeVisible());
+}

package/src/preact/statistic/statistics.tsx

@@ -1,8 +1,9 @@
 import { type FunctionComponent } from 'preact';
 import { useContext } from 'preact/hooks';
+import z from 'zod';
 
 import { queryGeneralStatistics } from '../../query/queryGeneralStatistics';
-import { type LapisFilter } from '../../types';
+import { lapisFilterSchema } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
@@ -11,19 +12,20 @@ import { ResizeContainer } from '../components/resize-container';
 import { formatProportion } from '../shared/table/formatProportion';
 import { useQuery } from '../useQuery';
 
-export type StatisticsProps = {
-    width: string;
-    height: string;
-    numeratorFilter: LapisFilter;
-    denominatorFilter: LapisFilter;
-};
+const statisticsPropsSchema = z.object({
+    width: z.string(),
+    height: z.string(),
+    numeratorFilter: lapisFilterSchema,
+    denominatorFilter: lapisFilterSchema,
+});
+export type StatisticsProps = z.infer<typeof statisticsPropsSchema>;
 
 export const Statistics: FunctionComponent<StatisticsProps> = (componentProps) => {
     const { width, height } = componentProps;
     const size = { height, width };
 
     return (
-        <ErrorBoundary size={size}>
+        <ErrorBoundary size={size} schema={statisticsPropsSchema} componentProps={componentProps}>
             <ResizeContainer size={size}>
                 <StatisticsInner {...componentProps} />
             </ResizeContainer>

package/src/preact/textInput/text-input.stories.tsx

@@ -6,6 +6,7 @@ import { TextInput, type TextInputProps } from './text-input';
 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<TextInputProps> = {
     title: 'Input/TextInput',
@@ -93,3 +94,16 @@ export const WithInitialValue: StoryObj<TextInputProps> = {
         });
     },
 };
+
+export const WithNoLapisField: StoryObj<TextInputProps> = {
+    ...Default,
+    args: {
+        ...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/textInput/text-input.tsx

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { useContext, useRef } from 'preact/hooks';
+import z from 'zod';
 
 import { fetchAutocompleteList } from './fetchAutocompleteList';
 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 TextInputInnerProps {
-    lapisField: string;
-    placeholderText: string;
-    initialValue: string;
-}
+const textInputInnerPropsSchema = z.object({
+    lapisField: z.string().min(1),
+    placeholderText: z.string().optional(),
+    initialValue: z.string().optional(),
+});
 
-export interface TextInputProps extends TextInputInnerProps {
-    width: string;
-}
+const textInputPropsSchema = textInputInnerPropsSchema.extend({
+    width: z.string(),
+});
 
-export const TextInput: FunctionComponent<TextInputProps> = ({ width, ...innerProps }) => {
+export type TextInputInnerProps = z.infer<typeof textInputInnerPropsSchema>;
+export type TextInputProps = z.infer<typeof textInputPropsSchema>;
+
+export const TextInput: FunctionComponent<TextInputProps> = (props) => {
+    const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size} layout='horizontal'>
+        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={textInputPropsSchema}>
             <ResizeContainer size={size}>
                 <TextInputInner {...innerProps} />
             </ResizeContainer>
@@ -76,7 +81,7 @@ const TextInputInner: FunctionComponent<TextInputInnerProps> = ({ lapisField, pl
             <input
                 type='text'
                 class='input input-bordered w-full'
-                placeholder={placeholderText !== undefined ? placeholderText : lapisField}
+                placeholder={placeholderText ?? lapisField}
                 onInput={onInput}
                 ref={inputRef}
                 list={lapisField}

package/src/preact/webWorkers/useWebWorker.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useMemo, useState } from 'preact/hooks';
 
 import { UserFacingError } from '../components/error-display';
 
@@ -23,12 +23,14 @@ export type ErrorWorkerStatus =
       };
 export type WorkerStatus<Response> = LoadingWorkerStatus | SuccessWorkerStatus<Response> | ErrorWorkerStatus;
 
-export function useWebWorker<Request, Response>(messageToWorker: Request, worker: Worker) {
+export function useWebWorker<Request, Response>(messageToWorker: Request, WorkerConstructor: new () => Worker) {
     const [data, setData] = useState<Response | undefined>(undefined);
     const [error, setError] = useState<Error | undefined>(undefined);
     const [isLoading, setIsLoading] = useState(true);
 
-    useEffect(() => {
+    const worker = useMemo(() => {
+        const worker = new WorkerConstructor();
+
         worker.onmessage = (event: MessageEvent<WorkerStatus<Response>>) => {
             const eventData = event.data;
             const status = eventData.status;
@@ -59,7 +61,9 @@ export function useWebWorker<Request, Response>(messageToWorker: Request, worker
             setError(new Error(`Worker received a message that it cannot deserialize: ${event.data}`));
             setIsLoading(false);
         };
-    }, [worker]);
+
+        return worker;
+    }, [WorkerConstructor]);
 
     useEffect(() => {
         worker.postMessage(messageToWorker);

package/src/query/queryAggregateData.ts

@@ -1,8 +1,9 @@
 import { FetchAggregatedOperator } from '../operator/FetchAggregatedOperator';
 import { SortOperator } from '../operator/SortOperator';
-import { type InitialSort } from '../preact/aggregatedData/aggregate';
 import { type LapisFilter } from '../types';
 
+export type InitialSort = { field: string; direction: 'ascending' | 'descending' };
+
 export type AggregateData = (Record<string, string | null | number | boolean> & {
     count: number;
     proportion: number;