@genspectrum/dashboard-components 0.14.1 → 0.15.0

package/src/preact/components/table.stories.tsx

@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 
-import { Table } from './table';
+import { Table, type TableProps } from './table';
 
 const meta: Meta = {
     title: 'Component/Table',
@@ -16,7 +16,7 @@ const meta: Meta = {
 
 export default meta;
 
-export const TableStory: StoryObj = {
+export const TableStory: StoryObj<TableProps> = {
     render: (args) => {
         return <Table data={args.data} columns={args.columns} pageSize={args.pageSize} />;
     },
@@ -49,7 +49,7 @@ export const TableStory: StoryObj = {
     },
 };
 
-export const TableStoryNoPagination: StoryObj = {
+export const TableStoryNoPagination: StoryObj<TableProps> = {
     render: (args) => {
         return <Table data={args.data} columns={args.columns} pageSize={args.pageSize} />;
     },

package/src/preact/components/table.tsx

@@ -22,7 +22,7 @@ export const tableStyle = {
     },
 };
 
-interface TableProps {
+export interface TableProps {
     data: TData;
     columns: OneDArray<TColumn | string | ComponentChild>;
     pageSize: number | boolean;

package/src/preact/{dateRangeSelector/date-range-selector.stories.tsx → dateRangeFilter/date-range-filter.stories.tsx}

@@ -4,7 +4,7 @@ import type { StepFunction } from '@storybook/types';
 import dayjs from 'dayjs/esm';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
-import { DateRangeSelector, type DateRangeSelectorProps } from './date-range-selector';
+import { DateRangeFilter, type DateRangeFilterProps } from './date-range-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
@@ -19,9 +19,9 @@ const customDateRange = {
     dateTo: '2021-12-31',
 };
 
-const meta: Meta<DateRangeSelectorProps> = {
-    title: 'Input/DateRangeSelector',
-    component: DateRangeSelector,
+const meta: Meta<DateRangeFilterProps> = {
+    title: 'Input/DateRangeFilter',
+    component: DateRangeFilter,
     parameters: {
         actions: {
             handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles],
@@ -61,15 +61,15 @@ const meta: Meta<DateRangeSelectorProps> = {
 
 export default meta;
 
-const Primary: StoryObj<DateRangeSelectorProps> = {
+const Primary: StoryObj<DateRangeFilterProps> = {
     render: (args) => (
         <LapisUrlContextProvider value={LAPIS_URL}>
-            <DateRangeSelector {...args} />
+            <DateRangeFilter {...args} />
         </LapisUrlContextProvider>
     ),
 };
 
-export const SetCorrectInitialValues: StoryObj<DateRangeSelectorProps> = {
+export const SetCorrectInitialValues: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -88,7 +88,7 @@ export const SetCorrectInitialValues: StoryObj<DateRangeSelectorProps> = {
 
 const initialDateFrom = '2000-01-01';
 
-export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
+export const SetCorrectInitialDateFrom: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -107,7 +107,7 @@ export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
 
 const initialDateTo = '2000-01-01';
 
-export const SetCorrectInitialDateTo: StoryObj<DateRangeSelectorProps> = {
+export const SetCorrectInitialDateTo: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -124,7 +124,7 @@ export const SetCorrectInitialDateTo: StoryObj<DateRangeSelectorProps> = {
     },
 };
 
-export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeSelectorProps> = {
+export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -167,7 +167,7 @@ export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeSelectorProps> =
     },
 };
 
-export const ChangingTheValueProgrammatically: StoryObj<DateRangeSelectorProps> = {
+export const ChangingTheValueProgrammatically: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     render: (args) => {
         const StatefulWrapper = () => {
@@ -183,7 +183,7 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeSelectorProps>
             return (
                 <div ref={ref}>
                     <LapisUrlContextProvider value={LAPIS_URL}>
-                        <DateRangeSelector {...args} value={value} />
+                        <DateRangeFilter {...args} value={value} />
                     </LapisUrlContextProvider>
                     <button className='btn' onClick={() => setValue(customDateRange.label)}>
                         Set to Custom
@@ -230,7 +230,7 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeSelectorProps>
     },
 };
 
-export const ChangingDateOption: StoryObj<DateRangeSelectorProps> = {
+export const ChangingDateOption: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     play: async ({ canvasElement, step }) => {
         const { canvas, filterChangedListenerMock, optionChangedListenerMock } = await prepare(canvasElement, step);
@@ -263,7 +263,7 @@ export const ChangingDateOption: StoryObj<DateRangeSelectorProps> = {
     },
 };
 
-export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
+export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -278,14 +278,14 @@ export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
     },
 };
 
-export const WithNoDateColumn: StoryObj<DateRangeSelectorProps> = {
+export const WithNoDateColumn: StoryObj<DateRangeFilterProps> = {
     ...Primary,
     args: {
         ...Primary.args,
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },
@@ -295,12 +295,9 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     const canvas = within(canvasElement);
 
     const filterChangedListenerMock = fn();
-    await step('Setup event listener mock', async () => {
-        canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
-    });
-
     const optionChangedListenerMock = fn();
-    await step('Setup event listener mock', async () => {
+    await step('Setup event listener mock', () => {
+        canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
         canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock);
     });
 

package/src/preact/{dateRangeSelector/date-range-selector.tsx → dateRangeFilter/date-range-filter.tsx}

@@ -18,39 +18,39 @@ import type { ScaleType } from '../shared/charts/getYAxisScale';
 
 const customOption = 'Custom';
 
-const dateRangeSelectorInnerPropsSchema = z.object({
+const dateRangeFilterInnerPropsSchema = z.object({
     dateRangeOptions: z.array(dateRangeOptionSchema),
     earliestDate: z.string().date(),
     value: dateRangeValueSchema.optional(),
     lapisDateField: z.string().min(1),
 });
 
-const dateRangeSelectorPropsSchema = dateRangeSelectorInnerPropsSchema.extend({
+const dateRangeFilterPropsSchema = dateRangeFilterInnerPropsSchema.extend({
     width: z.string(),
 });
 
-export type DateRangeSelectorProps = z.infer<typeof dateRangeSelectorPropsSchema>;
-export type DateRangeSelectorInnerProps = z.infer<typeof dateRangeSelectorInnerPropsSchema>;
+export type DateRangeFilterProps = z.infer<typeof dateRangeFilterPropsSchema>;
+export type DateRangeFilterInnerProps = z.infer<typeof dateRangeFilterInnerPropsSchema>;
 
-export const DateRangeSelector = (props: DateRangeSelectorProps) => {
+export const DateRangeFilter = (props: DateRangeFilterProps) => {
     const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={dateRangeSelectorPropsSchema}>
+        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={dateRangeFilterPropsSchema}>
             <div style={{ width }}>
-                <DateRangeSelectorInner {...innerProps} />
+                <DateRangeFilterInner {...innerProps} />
             </div>
         </ErrorBoundary>
     );
 };
 
-export const DateRangeSelectorInner = ({
+export const DateRangeFilterInner = ({
     dateRangeOptions,
     earliestDate = '1900-01-01',
     value,
     lapisDateField,
-}: DateRangeSelectorInnerProps) => {
+}: DateRangeFilterInnerProps) => {
     const initialValues = useMemo(
         () => computeInitialValues(value, earliestDate, dateRangeOptions),
         [value, earliestDate, dateRangeOptions],
@@ -148,7 +148,7 @@ export const DateRangeSelectorInner = ({
         fireFilterChangedEvent();
         fireOptionChangedEvent({
             dateFrom: dateFrom !== undefined ? toYYYYMMDD(dateFrom) : earliestDate,
-            dateTo: toYYYYMMDD(dateTo || new Date())!,
+            dateTo: toYYYYMMDD(dateTo || new Date()),
         });
     };
 
@@ -167,7 +167,7 @@ export const DateRangeSelectorInner = ({
         fireFilterChangedEvent();
         fireOptionChangedEvent({
             dateFrom: dateFrom !== undefined ? toYYYYMMDD(dateFrom) : earliestDate,
-            dateTo: toYYYYMMDD(dateTo || new Date())!,
+            dateTo: toYYYYMMDD(dateTo || new Date()),
         });
     };
 

package/src/preact/{dateRangeSelector → dateRangeFilter}/dateRangeOption.ts

@@ -3,7 +3,7 @@ import z from 'zod';
 import { toYYYYMMDD } from './dateConversion';
 
 /**
- * A date range option that can be used in the `gs-date-range-selector` component.
+ * A date range option that can be used in the `gs-date-range-filter` component.
  */
 export const dateRangeOptionSchema = z.object({
     /** The label of the date range option that will be shown to the user */
@@ -65,7 +65,7 @@ const lastYear = new Date(today);
 lastYear.setFullYear(today.getFullYear() - 1);
 
 /**
- * Presets for the `gs-date-range-selector` component that can be used as `dateRangeOptions`.
+ * Presets for the `gs-date-range-filter` component that can be used as `dateRangeOptions`.
  */
 export const dateRangeOptionPresets = {
     last2Weeks: {

package/src/preact/lineageFilter/lineage-filter.stories.tsx

@@ -85,7 +85,7 @@ export const Default: StoryObj<LineageFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('change lineage filter value fires event', async () => {
+        await step('change lineage filter value fires event', async () => {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.type(input, 'B.1');
@@ -105,7 +105,7 @@ export const ClearSelection: StoryObj<LineageFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('clear selection fires event with empty filter', async () => {
+        await step('clear selection fires event with empty filter', async () => {
             const clearSelectionButton = await canvas.findByLabelText('clear selection');
             await userEvent.click(clearSelectionButton);
 
@@ -123,7 +123,7 @@ export const OnBlurInput: StoryObj<LineageFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, lineageChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('after cleared selection by hand and then blur fires event with empty filter', async () => {
+        await step('after cleared selection by hand and then blur fires event with empty filter', async () => {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.click(canvas.getByLabelText('toggle menu'));
@@ -144,7 +144,7 @@ export const WithNoLapisField: StoryObj<LineageFilterProps> = {
         lapisField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },
@@ -154,11 +154,11 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     const canvas = within(canvasElement);
 
     const lineageChangedListenerMock = fn();
-    step('Setup event listener mock', () => {
+    await step('Setup event listener mock', () => {
         canvasElement.addEventListener('gs-lineage-filter-changed', lineageChangedListenerMock);
     });
 
-    step('location filter is rendered with value', async () => {
+    await step('location filter is rendered with value', async () => {
         await waitFor(async () => {
             return expect(await inputField(canvas)).toHaveValue('A.1');
         });

package/src/preact/locationFilter/fetchAutocompletionList.ts

@@ -43,7 +43,7 @@ export async function fetchAutocompletionList({
 
     return [...locationValues]
         .map<EntryWithNullValues>(([json, count]) => ({
-            value: JSON.parse(json),
+            value: JSON.parse(json) as Record<string, string | null>,
             count,
         }))
         .sort(compareLocationEntries(fields))

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -84,7 +84,7 @@ export const Primary: StoryObj<LocationFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, locationChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('change location filter value fires event', async () => {
+        await step('change location filter value fires event', async () => {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.type(input, 'Germany');
@@ -107,7 +107,7 @@ export const ClearSelection: StoryObj<LocationFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, locationChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('clear selection fires event with empty filter', async () => {
+        await step('clear selection fires event with empty filter', async () => {
             const clearSelectionButton = await canvas.findByLabelText('clear selection');
             await userEvent.click(clearSelectionButton);
 
@@ -128,7 +128,7 @@ export const OnBlurInput: StoryObj<LocationFilterProps> = {
     play: async ({ canvasElement, step }) => {
         const { canvas, locationChangedListenerMock } = await prepare(canvasElement, step);
 
-        step('after cleared selection by hand and then blur fires event with empty filter', async () => {
+        await step('after cleared selection by hand and then blur fires event with empty filter', async () => {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.click(canvas.getByLabelText('toggle menu'));
@@ -151,11 +151,11 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     const canvas = within(canvasElement);
 
     const locationChangedListenerMock = fn();
-    step('Setup event listener mock', () => {
+    await step('Setup event listener mock', () => {
         canvasElement.addEventListener('gs-location-changed', locationChangedListenerMock);
     });
 
-    step('location filter is rendered with value', async () => {
+    await step('location filter is rendered with value', async () => {
         await waitFor(async () => {
             return expect(await inputField(canvas)).toHaveValue('Europe');
         });
@@ -171,7 +171,7 @@ export const WithNoFields: StoryObj<LocationFilterProps> = {
         fields: [],
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'Array must contain at least 1 element(s)');
         });
     },

package/src/preact/map/sequences-by-location.stories.tsx

@@ -134,7 +134,7 @@ export const InvalidProps: StoryObj<SequencesByLocationProps> = {
         lapisLocationField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(
                 canvasElement,
                 '"lapisLocationField": String must contain at least 1 character(s)',

package/src/preact/mutationFilter/mutation-filter.stories.tsx

@@ -223,7 +223,7 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
     const canvas = within(canvasElement);
 
     const changedListenerMock = fn();
-    await step('Setup event listener mock', async () => {
+    await step('Setup event listener mock', () => {
         canvasElement.addEventListener('gs-mutation-filter-changed', changedListenerMock);
     });
 
@@ -265,5 +265,5 @@ const testNoOptionsExist = async (canvas: ReturnType<typeof within>, mutation: s
     await expect(options).toHaveLength(0);
 };
 
-const inputField = (canvas: ReturnType<typeof within>) =>
+const inputField = (canvas: ReturnType<typeof within>): HTMLElement =>
     canvas.getByPlaceholderText('Enter a mutation', { exact: false });

package/src/preact/mutations/getMutationsGridData.ts

@@ -25,7 +25,7 @@ const accumulateByPosition = (data: SubstitutionOrDeletionEntry[], sequenceType:
 
         const initiallyFillPositionsToProportionAtBase = () => {
             if (!positionsToProportionAtBase.has(position)) {
-                const empty = new Map();
+                const empty = new Map<string | undefined, number>();
                 basesOfView.forEach((base) => empty.set(base, 0));
                 empty.set(mutationEntry.mutation.valueAtReference, 1);
                 positionsToProportionAtBase.set(position, empty);

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

@@ -62,9 +62,9 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                 ))}
                 {shownMutations.map((mutation, rowIndex) => {
                     return (
-                        <Fragment key={`fragment-${mutation.toString()}`}>
+                        <Fragment key={`fragment-${mutation.code}`}>
                             <div
-                                key={`mutation-${mutation.toString()}`}
+                                key={`mutation-${mutation.code}`}
                                 style={{ gridRowStart: rowIndex + 2, gridColumnStart: 1 }}
                             >
                                 <MutationCell mutation={mutation} />
@@ -80,7 +80,7 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                                 return (
                                     <div
                                         style={{ gridRowStart: rowIndex + 2, gridColumnStart: columnIndex + 2 }}
-                                        key={`${mutation.toString()}-${date.toString()}`}
+                                        key={`${mutation.code}-${date.dateString}`}
                                     >
                                         <ProportionCell
                                             value={value}

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

@@ -164,7 +164,7 @@ export const WithNoLapisDateFieldField: StoryObj<MutationsOverTimeProps> = {
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

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

@@ -78,6 +78,7 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> =
 
     const { data, error, isLoading } = useWebWorker<MutationOverTimeQuery, MutationOverTimeWorkerResponse>(
         messageToWorker,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         MutationOverTimeWorker,
     );
 

package/src/preact/numberSequencesOverTime/number-sequences-over-time.stories.tsx

@@ -129,7 +129,7 @@ export const WithNoLapisDateField: StoryObj<NumberSequencesOverTimeProps> = {
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

package/src/preact/prevalenceOverTime/prevalence-over-time-bubble-chart.tsx

@@ -87,13 +87,13 @@ const PrevalenceOverTimeBubbleChart = ({
                     intersect: false,
                     callbacks: {
                         title: (context) => {
-                            const dataset = nonNullDateRangeData[context[0].datasetIndex!];
-                            const dataPoint = dataset.content[context[0].dataIndex!];
+                            const dataset = nonNullDateRangeData[context[0].datasetIndex];
+                            const dataPoint = dataset.content[context[0].dataIndex];
                             return dataPoint.dateRange?.toString();
                         },
                         label: (context) => {
-                            const dataset = nonNullDateRangeData[context.datasetIndex!];
-                            const dataPoint = dataset.content[context.dataIndex!];
+                            const dataset = nonNullDateRangeData[context.datasetIndex];
+                            const dataPoint = dataset.content[context.dataIndex];
 
                             const percentage = (dataPoint.prevalence * 100).toFixed(2);
                             const count = dataPoint.count.toFixed(0);

package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx

@@ -254,7 +254,7 @@ export const WithNoLapisDateField: StoryObj<PrevalenceOverTimeProps> = {
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx

@@ -188,7 +188,7 @@ export const WithNoLapisDateField: StoryObj<RelativeGrowthAdvantageProps> = {
         lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },

package/src/preact/shared/floating-ui/hooks.ts

@@ -20,7 +20,7 @@ export function useFloatingUi(
         const { current: floating } = floatingRef;
 
         const update = () => {
-            computePosition(reference, floating, {
+            void computePosition(reference, floating, {
                 placement,
                 middleware,
             }).then(({ x, y }) => {

package/src/preact/{textInput/TextInputChangedEvent.ts → textFilter/TextFilterChangedEvent.ts}

@@ -1,8 +1,8 @@
 type LapisTextFilter = Record<string, string | undefined>;
 
-export class TextInputChangedEvent extends CustomEvent<LapisTextFilter> {
+export class TextFilterChangedEvent extends CustomEvent<LapisTextFilter> {
     constructor(detail: LapisTextFilter) {
-        super('gs-text-input-changed', {
+        super('gs-text-filter-changed', {
             detail,
             bubbles: true,
             composed: true,

package/src/preact/{textInput/text-input.stories.tsx → textFilter/text-filter.stories.tsx}

@@ -2,18 +2,18 @@ import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, fireEvent, fn, waitFor, within } from '@storybook/test';
 
 import data from './__mockData__/aggregated_hosts.json';
-import { TextInput, type TextInputProps } from './text-input';
+import { TextFilter, type TextFilterProps } from './text-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
-const meta: Meta<TextInputProps> = {
-    title: 'Input/TextInput',
-    component: TextInput,
+const meta: Meta<TextFilterProps> = {
+    title: 'Input/TextFilter',
+    component: TextFilter,
     parameters: {
         actions: {
-            handles: ['gs-text-input-changed', ...previewHandles],
+            handles: ['gs-text-filter-changed', ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -65,10 +65,10 @@ const meta: Meta<TextInputProps> = {
 
 export default meta;
 
-export const Default: StoryObj<TextInputProps> = {
+export const Default: StoryObj<TextFilterProps> = {
     render: (args) => (
         <LapisUrlContextProvider value={LAPIS_URL}>
-            <TextInput {...args} />
+            <TextFilter {...args} />
         </LapisUrlContextProvider>
     ),
     args: {
@@ -82,7 +82,7 @@ export const Default: StoryObj<TextInputProps> = {
     },
 };
 
-export const RemoveInitialValue: StoryObj<TextInputProps> = {
+export const RemoveInitialValue: StoryObj<TextFilterProps> = {
     ...Default,
     args: {
         ...Default.args,
@@ -92,13 +92,13 @@ export const RemoveInitialValue: StoryObj<TextInputProps> = {
         const canvas = within(canvasElement);
 
         const changedListenerMock = fn();
-        await step('Setup event listener mock', async () => {
-            canvasElement.addEventListener('gs-text-input-changed', changedListenerMock);
+        await step('Setup event listener mock', () => {
+            canvasElement.addEventListener('gs-text-filter-changed', changedListenerMock);
         });
 
-        await waitFor(() => {
+        await waitFor(async () => {
             const input = canvas.getByPlaceholderText('Enter a host name', { exact: false });
-            expect(input).toHaveValue('Homo sapiens');
+            await expect(input).toHaveValue('Homo sapiens');
         });
 
         await step('Remove initial value', async () => {
@@ -115,14 +115,14 @@ export const RemoveInitialValue: StoryObj<TextInputProps> = {
     },
 };
 
-export const WithNoLapisField: StoryObj<TextInputProps> = {
+export const WithNoLapisField: StoryObj<TextFilterProps> = {
     ...Default,
     args: {
         ...Default.args,
         lapisField: '',
     },
     play: async ({ canvasElement, step }) => {
-        step('expect error message', async () => {
+        await step('expect error message', async () => {
             await expectInvalidAttributesErrorMessage(canvasElement, 'String must contain at least 1 character(s)');
         });
     },