fix(components): gs-mutations-over-time: validate attributes

Resolves: #574

components/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)');
+        });
+    },
+};

components/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>

components/src/types.ts

@@ -18,7 +18,13 @@ export const namedLapisFilterSchema = z.object({
 });
 export type NamedLapisFilter = z.infer<typeof namedLapisFilterSchema>;
 
-export type TemporalGranularity = 'day' | 'week' | 'month' | 'year';
+export const temporalGranularitySchema = z.union([
+    z.literal('day'),
+    z.literal('week'),
+    z.literal('month'),
+    z.literal('year'),
+]);
+export type TemporalGranularity = z.infer<typeof temporalGranularitySchema>;
 
 export const sequenceTypeSchema = z.union([z.literal('nucleotide'), z.literal('amino acid')]);
 export type SequenceType = z.infer<typeof sequenceTypeSchema>;
@@ -53,6 +59,7 @@ export type MutationEntry = SubstitutionEntry | DeletionEntry | InsertionEntry;
 export const views = {
     table: 'table',
     venn: 'venn',
+    grid: 'grid',
 } as const;
 
 export const mutationComparisonViewSchema = z.union([z.literal(views.table), z.literal(views.venn)]);

components/src/utilEntrypoint.ts

@@ -11,4 +11,5 @@ export {
     type SequenceType,
     views,
     type MutationComparisonView,
+    type TemporalGranularity,
 } from './types';

components/src/web-components/visualization/gs-mutations-over-time.tsx

@@ -33,9 +33,7 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
 @customElement('gs-mutations-over-time')
 export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
     /**
-     * Required.
-     *
-     * LAPIS filter to select the displayed data.
+     * LAPIS filter to select the displayed data. If not provided, all data is displayed.
      */
     @property({ type: Object })
     lapisFilter: Record<string, string | number | null | boolean> = {};