@genspectrum/dashboard-components 0.10.2 → 0.10.4

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/expectErrorMessage';
 
 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/expectErrorMessage';
 
 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/expectErrorMessage';
 
 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/expectErrorMessage';
 
 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/expectErrorMessage.ts

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

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/expectErrorMessage';
 
 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/useQuery.ts

@@ -23,5 +23,13 @@ export function useQuery<Data>(fetchDataCallback: () => Promise<Data>, dependenc
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [JSON.stringify(dependencies)]);
 
-    return { data, error, isLoading };
+    if (isLoading) {
+        return { isLoading: true } as const;
+    }
+
+    if (error !== null) {
+        return { error, isLoading: false as const };
+    }
+
+    return { data: data!, error: null, isLoading: false as const };
 }

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;

package/src/styles/tailwind.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;