fix(components): gs-relative-growth-advantage: validate attributes

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

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

@@ -1,13 +1,14 @@
 import { type FunctionComponent } from 'preact';
 import { useContext, useState } from 'preact/hooks';
+import z from 'zod';
 
 import RelativeGrowthAdvantageChart from './relative-growth-advantage-chart';
 import {
     NotEnoughDataToComputeFitError,
     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>

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

@@ -1,13 +1,15 @@
 import z from 'zod';
 
-export interface YAxisMaxConfig {
-    linear?: AxisMax;
-    logarithmic?: AxisMax;
-}
-
 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) {
         return 1;

components/src/web-components/visualization/gs-relative-growth-advantage.tsx

@@ -38,17 +38,13 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
 @customElement('gs-relative-growth-advantage')
 export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
     /**
-     * Required.
-     *
      * LAPIS filter to select the data of the focal variant.
      * It must be a valid LAPIS filter object.
      */
     @property({ type: Object })
     numeratorFilter: Record<string, string | number | null | boolean> = {};
 
     /**
-     * Required.
-     *
      * LAPIS filter to select the data of the baseline variant.
      * It must be a valid LAPIS filter object.
      */
@@ -92,7 +88,7 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
      * Must be a field of type `date` in LAPIS.
      */
     @property({ type: String })
-    lapisDateField: string = 'date';
+    lapisDateField: string = '';
 
     /**
      * The maximum value for the y-axis on all graphs in linear view.