@genspectrum/dashboard-components 0.10.1 → 0.10.3

package/src/query/queryMutationsOverTime.spec.ts

@@ -99,12 +99,8 @@ describe('queryMutationsOverTime', () => {
             granularity: 'day',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
-            [
-                { proportion: 0.4, count: 4, totalCount: 11 },
-                { proportion: 0, count: 0, totalCount: 0 },
-                { proportion: 0, count: 0, totalCount: 0 },
-            ],
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
+            [{ proportion: 0.4, count: 4, totalCount: 11 }, null, null],
             [
                 { proportion: 0.1, count: 1, totalCount: 11 },
                 { proportion: 0.2, count: 2, totalCount: 12 },
@@ -250,17 +246,9 @@ describe('queryMutationsOverTime', () => {
             granularity: 'day',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
-            [
-                { proportion: 0.4, count: 4, totalCount: 11 },
-                { proportion: 0, count: 0, totalCount: 0 },
-                { proportion: 0, count: 0, totalCount: 0 },
-            ],
-            [
-                { proportion: 0.1, count: 1, totalCount: 11 },
-                { proportion: 0, count: 0, totalCount: 0 },
-                { proportion: 0.3, count: 3, totalCount: 13 },
-            ],
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
+            [{ proportion: 0.4, count: 4, totalCount: 11 }, null, null],
+            [{ proportion: 0.1, count: 1, totalCount: 11 }, null, { proportion: 0.3, count: 3, totalCount: 13 }],
         ]);
 
         const sequences = mutationOverTimeData.getFirstAxisKeys();
@@ -368,7 +356,7 @@ describe('queryMutationsOverTime', () => {
             granularity: 'day',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([]);
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([]);
         expect(mutationOverTimeData.getFirstAxisKeys()).to.deep.equal([]);
         expect(mutationOverTimeData.getSecondAxisKeys()).to.deep.equal([]);
     });
@@ -450,7 +438,7 @@ describe('queryMutationsOverTime', () => {
             granularity: 'day',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
                 { proportion: 0.2, count: 2, totalCount: 11 },
                 { proportion: 0.3, count: 3, totalCount: 12 },
@@ -542,7 +530,7 @@ describe('queryMutationsOverTime', () => {
             granularity: 'day',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
                 { proportion: 0.1, count: 1, totalCount: 11 },
                 { proportion: 0.2, count: 2, totalCount: 12 },
@@ -605,7 +593,7 @@ describe('queryMutationsOverTime', () => {
             granularity: 'day',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
             [
                 {
                     proportion: 0.2,
@@ -699,11 +687,8 @@ describe('queryMutationsOverTime', () => {
             granularity: 'month',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([
-            [
-                { proportion: 0.4, count: 4, totalCount: 11 },
-                { proportion: 0, count: 0, totalCount: 0 },
-            ],
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([
+            [{ proportion: 0.4, count: 4, totalCount: 11 }, null],
             [
                 { proportion: 0.1, count: 1, totalCount: 11 },
                 { proportion: 0.2, count: 2, totalCount: 12 },
@@ -740,7 +725,7 @@ describe('queryMutationsOverTime', () => {
             granularity: 'month',
         });
 
-        expect(mutationOverTimeData.getAsArray({ count: 0, proportion: 0, totalCount: 0 })).to.deep.equal([]);
+        expect(mutationOverTimeData.getAsArray()).to.deep.equal([]);
 
         const sequences = mutationOverTimeData.getFirstAxisKeys();
         expect(sequences.length).toBe(0);

package/src/query/queryMutationsOverTime.ts

@@ -41,7 +41,7 @@ export type MutationOverTimeData = {
     totalCount: number;
 };
 
-export type MutationOverTimeMutationValue = { proportion: number; count: number; totalCount: number };
+export type MutationOverTimeMutationValue = { proportion: number; count: number; totalCount: number } | null;
 export type MutationOverTimeDataGroupedByMutation = Map2d<
     SubstitutionClass | DeletionClass,
     TemporalClass,
@@ -239,11 +239,7 @@ export function groupByMutation(
 
     sortedOverallMutationData.forEach((mutationData) => {
         sortedDates.forEach((date) => {
-            dataArray.set(mutationData, date, {
-                count: 0,
-                proportion: 0,
-                totalCount: 0,
-            });
+            dataArray.set(mutationData, date, null);
         });
     });
 

package/src/types.ts

@@ -1,3 +1,5 @@
+import z from 'zod';
+
 import {
     type Deletion,
     type DeletionClass,
@@ -7,16 +9,25 @@ import {
     type SubstitutionClass,
 } from './utils/mutations';
 
-export type LapisFilter = Record<string, string | number | null | boolean>;
+export const lapisFilterSchema = z.record(z.union([z.string(), z.number(), z.null(), z.boolean()]));
+export type LapisFilter = z.infer<typeof lapisFilterSchema>;
 
-export type NamedLapisFilter = {
-    lapisFilter: LapisFilter;
-    displayName: string;
-};
+export const namedLapisFilterSchema = z.object({
+    lapisFilter: lapisFilterSchema,
+    displayName: z.string(),
+});
+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 type SequenceType = 'nucleotide' | 'amino acid';
+export const sequenceTypeSchema = z.union([z.literal('nucleotide'), z.literal('amino acid')]);
+export type SequenceType = z.infer<typeof sequenceTypeSchema>;
 
 export type SubstitutionOrDeletion = 'substitution' | 'deletion';
 
@@ -44,3 +55,16 @@ export type SubstitutionOrDeletionEntry<
 > = SubstitutionEntry<S> | DeletionEntry<D>;
 
 export type MutationEntry = SubstitutionEntry | DeletionEntry | InsertionEntry;
+
+export const views = {
+    table: 'table',
+    venn: 'venn',
+    grid: 'grid',
+    insertions: 'insertions',
+    bar: 'bar',
+    line: 'line',
+    bubble: 'bubble',
+} as const;
+
+export const mutationComparisonViewSchema = z.union([z.literal(views.table), z.literal(views.venn)]);
+export type MutationComparisonView = z.infer<typeof mutationComparisonViewSchema>;

package/src/utilEntrypoint.ts

@@ -4,3 +4,18 @@ export {
     dateRangeOptionPresets,
     DateRangeOptionChangedEvent,
 } from './preact/dateRangeSelector/dateRangeOption';
+
+export {
+    type NamedLapisFilter,
+    type LapisFilter,
+    type SequenceType,
+    views,
+    type MutationComparisonView,
+    type TemporalGranularity,
+} from './types';
+
+export { type SelectedMutationFilterStrings } from './preact/mutationFilter/mutation-filter';
+
+export { type ConfidenceIntervalMethod } from './preact/shared/charts/confideceInterval';
+
+export { type AxisMax, type YAxisMaxConfig } from './preact/shared/charts/getYAxisMax';

package/src/utils/map2d.spec.ts

@@ -32,7 +32,7 @@ describe('Map2dBase', () => {
         map2d.set('c', 'b', 3);
         map2d.set('c', 'd', 4);
 
-        expect(map2d.getAsArray(0)).toEqual([
+        expect(map2d.getAsArray()).toEqual([
             [1, 2],
             [3, 4],
         ]);
@@ -45,9 +45,9 @@ describe('Map2dBase', () => {
         );
         map2d.set('a', 'b', 2);
         map2d.set('c', 'd', 4);
-        expect(map2d.getAsArray(0)).toEqual([
-            [2, 0],
-            [0, 4],
+        expect(map2d.getAsArray()).toEqual([
+            [2, undefined],
+            [undefined, 4],
         ]);
     });
 
@@ -103,8 +103,8 @@ describe('Map2dBase', () => {
         map2d.set('a', 'b', 2);
         map2d.set('c', 'd', 4);
 
-        expect(map2d.getRow('a', 0)).toEqual([2, 0]);
-        expect(map2d.getRow('c', 0)).toEqual([0, 4]);
+        expect(map2d.getRow('a')).toEqual([2, undefined]);
+        expect(map2d.getRow('c')).toEqual([undefined, 4]);
     });
 
     it('should return an empty array when the row does not exist', () => {
@@ -114,7 +114,7 @@ describe('Map2dBase', () => {
         );
         map2d.set('a', 'b', 2);
 
-        expect(map2d.getRow('c', 0)).toEqual([]);
+        expect(map2d.getRow('c')).toEqual([]);
     });
 
     it('should return content as object', () => {
@@ -185,7 +185,7 @@ describe('Map2dView', () => {
         const view = new Map2dView<string, string, number>(container);
         view.deleteRow('c');
 
-        expect(view.getAsArray(0)).toEqual([[1, 0]]);
+        expect(view.getAsArray()).toEqual([[1, undefined]]);
     });
 
     it('should throw an error when trying to set a value', () => {
@@ -198,7 +198,7 @@ describe('Map2dView', () => {
         const container = createBaseContainer();
         const view = new Map2dView<string, string, number>(container);
 
-        expect(view.getRow('a', 0)).toEqual([1, 0]);
+        expect(view.getRow('a')).toEqual([1, undefined]);
     });
 
     it('should return an empty array when the row does not exist', () => {
@@ -206,7 +206,7 @@ describe('Map2dView', () => {
         const view = new Map2dView<string, string, number>(container);
         view.deleteRow('c');
 
-        expect(view.getRow('c', 0)).toEqual([]);
+        expect(view.getRow('c')).toEqual([]);
     });
 
     function createBaseContainer() {

package/src/utils/map2d.ts

@@ -3,7 +3,7 @@ export interface Map2d<Key1, Key2, Value> {
 
     set(keyFirstAxis: Key1, keySecondAxis: Key2, value: Value): void;
 
-    getRow(key: Key1, fillEmptyWith: Value): Value[];
+    getRow(key: Key1): (Value | undefined)[];
 
     deleteRow(key: Key1): void;
 
@@ -11,7 +11,7 @@ export interface Map2d<Key1, Key2, Value> {
 
     getSecondAxisKeys(): Key2[];
 
-    getAsArray(fillEmptyWith: Value): Value[][];
+    getAsArray(): (Value | undefined)[][];
 
     serializeFirstAxis(key: Key1): string;
 
@@ -52,13 +52,13 @@ export class Map2dBase<Key1 extends object | string, Key2 extends object | strin
         return this.data.get(serializedKeyFirstAxis)?.get(serializedKeySecondAxis);
     }
 
-    getRow(key: Key1, fillEmptyWith: Value) {
+    getRow(key: Key1) {
         const serializedKeyFirstAxis = this.serializeFirstAxis(key);
         const row = this.data.get(serializedKeyFirstAxis);
         if (row === undefined) {
             return [];
         }
-        return Array.from(this.keysSecondAxis.keys()).map((key) => row.get(key) ?? fillEmptyWith);
+        return Array.from(this.keysSecondAxis.keys()).map((key) => row.get(key));
     }
 
     set(keyFirstAxis: Key1, keySecondAxis: Key2, value: Value) {
@@ -89,10 +89,10 @@ export class Map2dBase<Key1 extends object | string, Key2 extends object | strin
         return Array.from(this.keysSecondAxis.values());
     }
 
-    getAsArray(fillEmptyWith: Value) {
+    getAsArray() {
         return this.getFirstAxisKeys().map((firstAxisKey) => {
             return this.getSecondAxisKeys().map((secondAxisKey) => {
-                return this.get(firstAxisKey, secondAxisKey) ?? fillEmptyWith;
+                return this.get(firstAxisKey, secondAxisKey);
             });
         });
     }
@@ -159,20 +159,20 @@ export class Map2dView<Key1 extends object | string, Key2 extends object | strin
         return Array.from(this.keysSecondAxis.values());
     }
 
-    getAsArray(fillEmptyWith: Value) {
+    getAsArray() {
         return this.getFirstAxisKeys().map((firstAxisKey) => {
             return this.getSecondAxisKeys().map((secondAxisKey) => {
-                return this.baseMap.get(firstAxisKey, secondAxisKey) ?? fillEmptyWith;
+                return this.baseMap.get(firstAxisKey, secondAxisKey);
             });
         });
     }
 
-    getRow(key: Key1, fillEmptyWith: Value) {
+    getRow(key: Key1) {
         const serializedKeyFirstAxis = this.serializeFirstAxis(key);
         if (!this.keysFirstAxis.has(serializedKeyFirstAxis)) {
             return [];
         }
 
-        return this.baseMap.getRow(key, fillEmptyWith);
+        return this.baseMap.getRow(key);
     }
 }

package/src/web-components/app.stories.ts

@@ -57,6 +57,21 @@ export const Default: StoryObj<{ lapis: string }> = {
     },
 };
 
+export const WithNoLapisUrl: StoryObj<{ lapis: string }> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        lapis: 'notAValidUrl',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => {
+            expect(canvas.getByText("Error: Invalid LAPIS URL: 'notAValidUrl'", { exact: false })).toBeVisible();
+        });
+    },
+};
+
 export const DelayFetchingReferenceGenome: StoryObj<{ lapis: string }> = {
     ...Template,
     parameters: {
@@ -83,13 +98,13 @@ export const DelayFetchingReferenceGenome: StoryObj<{ lapis: string }> = {
 export const FailsToFetchReferenceGenome: StoryObj<{ lapis: string }> = {
     ...Template,
     args: {
-        lapis: 'definitely-not-a-valid-url',
+        lapis: 'https://url.to.lapis-definitely-not-a-valid-url',
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
         await waitFor(() => {
-            expect(canvas.getByText('Error', { exact: false })).toBeVisible();
+            expect(canvas.getByText('Error: Cannot fetch reference genome.', { exact: false })).toBeVisible();
         });
     },
 };

package/src/web-components/app.ts

@@ -3,12 +3,15 @@ import { Task } from '@lit/task';
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { type DetailedHTMLProps, type HTMLAttributes } from 'react';
+import z from 'zod';
 
 import { lapisContext } from './lapis-context';
 import { referenceGenomeContext } from './reference-genome-context';
 import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
 import { fetchReferenceGenome } from '../lapisApi/lapisApi';
 
+const lapisUrlSchema = z.string().url();
+
 /**
  * ## Context
  *
@@ -50,7 +53,9 @@ export class App extends LitElement {
      */
     private updateReferenceGenome = new Task(this, {
         task: async () => {
-            this.referenceGenome = await fetchReferenceGenome(this.lapis);
+            const lapisUrl = lapisUrlSchema.parse(this.lapis);
+
+            this.referenceGenome = await fetchReferenceGenome(lapisUrl);
         },
         args: () => [this.lapis],
     });
@@ -58,10 +63,13 @@ export class App extends LitElement {
     override render() {
         return this.updateReferenceGenome.render({
             complete: () => html``, // Children will be rendered in the light DOM anyway. We can't use slots without a shadow DOM.
-            error: () =>
-                html` <div class="m-2 w-full alert alert-error">
-                    Error: Cannot fetch reference genome. Is LAPIS available?
-                </div>`,
+            error: (error) => {
+                if (error instanceof z.ZodError) {
+                    return GsAppError(`Invalid LAPIS URL: '${this.lapis}'`);
+                }
+
+                return GsAppError('Cannot fetch reference genome. Is LAPIS available?');
+            },
         });
     }
 
@@ -70,6 +78,10 @@ export class App extends LitElement {
     }
 }
 
+function GsAppError(error: string) {
+    return html` <div class="m-2 w-full alert alert-error">Error: ${error}</div>`;
+}
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-app': App;

package/src/web-components/input/gs-date-range-selector.stories.ts

@@ -74,8 +74,8 @@ const meta: Meta<Required<DateRangeSelectorProps>> = {
         initialValue: dateRangeOptionPresets.lastMonth.label,
         dateColumn: 'aDateColumn',
         width: '100%',
-        initialDateFrom: '',
-        initialDateTo: '',
+        initialDateFrom: undefined,
+        initialDateTo: undefined,
     },
     tags: ['autodocs'],
 };

package/src/web-components/input/gs-date-range-selector.tsx

@@ -84,7 +84,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
      * If `initialDateTo` is set, but this is unset, it will default to `earliestDate`.
      */
     @property()
-    initialDateFrom: string = '';
+    initialDateFrom: string | undefined = undefined;
 
     /**
      * A date string in the format `YYYY-MM-DD`.
@@ -92,7 +92,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
      * If `initialDateFrom` is set, but this is unset, it will default to the current date.
      */
     @property()
-    initialDateTo: string = '';
+    initialDateTo: string | undefined = undefined;
 
     /**
      * The width of the component.
@@ -106,7 +106,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
      * The name of the column in LAPIS that contains the date information.
      */
     @property({ type: String })
-    dateColumn: string = 'date';
+    dateColumn: string = '';
 
     override render() {
         return (

package/src/web-components/input/gs-lineage-filter.tsx

@@ -48,7 +48,7 @@ export class LineageFilterComponent extends PreactLitAdapter {
      * The placeholder text to display in the input field.
      */
     @property()
-    placeholderText: string = '';
+    placeholderText: string | undefined = undefined;
 
     /**
      * The width of the component.

package/src/web-components/input/gs-location-filter.tsx

@@ -40,7 +40,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
      * Must be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.
      */
     @property()
-    initialValue = '';
+    initialValue: string | undefined = undefined;
 
     /**
      * Required.
@@ -65,7 +65,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
      * The placeholder text to display in the input field, if it is empty.
      */
     @property()
-    placeholderText: string = '';
+    placeholderText: string | undefined = undefined;
 
     override render() {
         return (

package/src/web-components/input/gs-mutation-filter.stories.ts

@@ -60,6 +60,7 @@ const Template: StoryObj<MutationFilterProps> = {
 export const Default: StoryObj<MutationFilterProps> = {
     ...Template,
     args: {
+        ...Template.args,
         initialValue: ['A123T'],
     },
 };
@@ -105,6 +106,7 @@ export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
 export const MultiSegmentedReferenceGenomes: StoryObj<MutationFilterProps> = {
     ...Template,
     args: {
+        ...Template.args,
         initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'],
     },
     parameters: {

package/src/web-components/input/gs-text-input.tsx

@@ -27,7 +27,7 @@ export class TextInputComponent extends PreactLitAdapter {
      * The initial value to use for this text input.
      */
     @property()
-    initialValue: string = '';
+    initialValue: string | undefined = undefined;
 
     /**
      * Required.
@@ -42,7 +42,7 @@ export class TextInputComponent extends PreactLitAdapter {
      * The placeholder text to display in the input field.
      */
     @property()
-    placeholderText: string = '';
+    placeholderText: string | undefined = undefined;
 
     /**
      * The width of the component.

package/src/web-components/introduction.mdx

@@ -24,10 +24,10 @@ data of a specific instance of [LAPIS](https://github.com/GenSpectrum/LAPIS).
 
 We primarily provide two kinds of components:
 
--   Visualization components (charts, tables, etc.).
-    Those components fetch data from the LAPIS instance and visualize it.
--   Input components that let you specify sequence filters for the LAPIS requests.
-    Input changes will fire events that can be listened to by the visualization components. It is the responsibility of the dashbaord maintainer to listen to those events and to wire the data correctly into the visualization components.
+- Visualization components (charts, tables, etc.).
+  Those components fetch data from the LAPIS instance and visualize it.
+- Input components that let you specify sequence filters for the LAPIS requests.
+  Input changes will fire events that can be listened to by the visualization components. It is the responsibility of the dashbaord maintainer to listen to those events and to wire the data correctly into the visualization components.
 
 ## Installation
 

package/src/web-components/visualization/data_visualization_statistical_analysis.mdx

@@ -12,9 +12,9 @@ By default, it is set to a linear scale.
 
 In general, for each scale the displayed height of a value is calculated by applying the corresponding scale function.
 
--   Linear: `value`
--   Logarithmic: `ln(value)`
--   Logistic: `ln(value / (1 - value))`
+- Linear: `value`
+- Logarithmic: `ln(value)`
+- Logistic: `ln(value / (1 - value))`
 
 ## Confidence Intervals
 

package/src/web-components/visualization/gs-aggregate.tsx

@@ -101,7 +101,7 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -109,7 +109,7 @@ declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/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> = {};

package/src/web-components/visualization/gs-mutations.tsx

@@ -35,9 +35,7 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
 @customElement('gs-mutations')
 export class MutationsComponent 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> = {};

package/src/web-components/visualization/gs-number-sequences-over-time.tsx

@@ -25,8 +25,6 @@ export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJs
     // prettier-ignore
     // The multiline union type must not start with `|` because it looks weird in the Storybook docs
     /**
-     * Required.
-     *
      * Either a LAPIS filter or an array of LAPIS filters to fetch the number of sequences for.
      *
      * The `lapisFilter` will be sent as is to LAPIS to select the data.
@@ -54,7 +52,7 @@ export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJs
      * Must be a field of type `date` in LAPIS.
      */
     @property({ type: String })
-    lapisDateField: string = 'date';
+    lapisDateField: string = '';
 
     /**
      * A list of tabs with views that this component should provide.

package/src/web-components/visualization/gs-prevalence-over-time.tsx

@@ -47,7 +47,6 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
     // prettier-ignore
     // The multiline union type must not start with `|` because it looks weird in the Storybook docs
     /**
-     *   Required.
      * Either a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.
      *
      * The `lapisFilter` will be sent as is to LAPIS to select the data.
@@ -57,7 +56,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
      * It should be human-readable.
      *
      */
-    @property({type: Object})
+    @property({ type: Object })
     numeratorFilter:
         {
             lapisFilter: Record<string, string | number | null | boolean>;
@@ -66,11 +65,9 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
         | {
         lapisFilter: Record<string, string | number | null | boolean>;
         displayName: string;
-    }[] = {displayName: '', lapisFilter: {}};
+    }[] = { displayName: '', lapisFilter: {} };
 
     /**
-     * Required.
-     *
      * The LAPIS filter, to select the data of the reference.
      * It must be a valid LAPIS filter object.
      */
@@ -133,7 +130,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
      * Must be a field of type `date` in LAPIS.
      */
     @property({ type: String })
-    lapisDateField: string = 'date';
+    lapisDateField: string = '';
 
     /**
      * The maximum number of rows to display in the table view.