diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 728e81c8..19238d98 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -22,7 +22,7 @@ jobs:
           key: ${{ runner.os }}-node-${{ hashFiles('components/**/package-lock.json') }}
 
       - name: Install npm packages
-        run: npm ci
+        run: npm ci && npm run generate-manifest
 
       - name: Check format
         run: npm run check-format
diff --git a/components/.storybook-preact/preview.ts b/components/.storybook-preact/preview.ts
index 15b9cfdd..7d565959 100644
--- a/components/.storybook-preact/preview.ts
+++ b/components/.storybook-preact/preview.ts
@@ -1,6 +1,8 @@
 import type { Preview } from '@storybook/preact';
 
 import '../src/styles/tailwind.css';
+import { withActions } from '@storybook/addon-actions/decorator';
+import { GS_ERROR_EVENT_TYPE } from '../src/preact/components/error-display';
 
 const preview: Preview = {
     parameters: {
@@ -10,7 +12,9 @@ const preview: Preview = {
                 date: /Date$/i,
             },
         },
+        actions: { handles: [GS_ERROR_EVENT_TYPE] },
     },
+    decorators: [withActions],
 };
 
 export default preview;
diff --git a/components/.storybook/preview.tsx b/components/.storybook/preview.tsx
index 22f9b58b..6d5e2fef 100644
--- a/components/.storybook/preview.tsx
+++ b/components/.storybook/preview.tsx
@@ -4,6 +4,8 @@ import { REFERENCE_GENOME_ENDPOINT } from '../src/constants';
 import referenceGenome from '../src/lapisApi/__mockData__/referenceGenome.json';
 import customElements from '../custom-elements.json';
 import DocumentationTemplate from './DocumentationTemplate.mdx';
+import { withActions } from '@storybook/addon-actions/decorator';
+import { GS_ERROR_EVENT_TYPE } from '../src/preact/components/error-display';
 
 setCustomElementsManifest(customElements);
 
@@ -35,7 +37,11 @@ const preview: Preview = {
         docs: {
             page: DocumentationTemplate,
         },
+        actions: { handles: [GS_ERROR_EVENT_TYPE] },
     },
+    decorators: [withActions],
 };
 
 export default preview;
+
+export const previewHandles = preview.parameters!.actions.handles;
diff --git a/components/src/lapisApi/lapisApi.ts b/components/src/lapisApi/lapisApi.ts
index 434a0f9e..c67aec9f 100644
--- a/components/src/lapisApi/lapisApi.ts
+++ b/components/src/lapisApi/lapisApi.ts
@@ -15,6 +15,7 @@ export class UnknownLapisError extends Error {
     constructor(
         message: string,
         public readonly status: number,
+        public readonly requestedData: string,
     ) {
         super(message);
         this.name = 'UnknownLapisError';
@@ -26,6 +27,7 @@ export class LapisError extends Error {
         message: string,
         public readonly status: number,
         public readonly problemDetail: ProblemDetail,
+        public readonly requestedData: string,
     ) {
         super(message);
         this.name = 'LapisError';
@@ -42,7 +44,7 @@ export async function fetchAggregated(lapisUrl: string, body: LapisBaseRequest,
         signal,
     });
 
-    await handleErrors(response);
+    await handleErrors(response, 'aggregated data');
 
     return aggregatedResponse.parse(await response.json());
 }
@@ -62,7 +64,7 @@ export async function fetchInsertions(
         signal,
     });
 
-    await handleErrors(response);
+    await handleErrors(response, `${sequenceType} insertions`);
 
     return insertionsResponse.parse(await response.json());
 }
@@ -82,7 +84,7 @@ export async function fetchSubstitutionsOrDeletions(
         signal,
     });
 
-    await handleErrors(response);
+    await handleErrors(response, `${sequenceType} mutations`);
 
     return mutationsResponse.parse(await response.json());
 }
@@ -96,11 +98,11 @@ export async function fetchReferenceGenome(lapisUrl: string, signal?: AbortSigna
         signal,
     });
 
-    await handleErrors(response);
+    await handleErrors(response, 'the reference genomes');
     return referenceGenomeResponse.parse(await response.json());
 }
 
-const handleErrors = async (response: Response) => {
+const handleErrors = async (response: Response, requestedData: string) => {
     if (!response.ok) {
         if (response.status >= 400 && response.status < 500) {
             const json = await response.json();
@@ -111,6 +113,7 @@ const handleErrors = async (response: Response) => {
                     response.statusText + lapisErrorResult.data.error.detail,
                     response.status,
                     lapisErrorResult.data.error,
+                    requestedData,
                 );
             }
 
@@ -120,12 +123,17 @@ const handleErrors = async (response: Response) => {
                     response.statusText + problemDetailResult.data.detail,
                     response.status,
                     problemDetailResult.data,
+                    requestedData,
                 );
             }
 
-            throw new UnknownLapisError(`${response.statusText}: ${JSON.stringify(json)}`, response.status);
+            throw new UnknownLapisError(
+                `${response.statusText}: ${JSON.stringify(json)}`,
+                response.status,
+                requestedData,
+            );
         }
-        throw new UnknownLapisError(`${response.statusText}: ${response.status}`, response.status);
+        throw new UnknownLapisError(`${response.statusText}: ${response.status}`, response.status, requestedData);
     }
 };
 
diff --git a/components/src/preact/components/error-boundary.stories.tsx b/components/src/preact/components/error-boundary.stories.tsx
index 3a06ecaa..c71073f7 100644
--- a/components/src/preact/components/error-boundary.stories.tsx
+++ b/components/src/preact/components/error-boundary.stories.tsx
@@ -1,16 +1,14 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, waitFor, within } from '@storybook/test';
 
 import { ErrorBoundary } from './error-boundary';
-import { GS_ERROR_EVENT_TYPE, UserFacingError } from './error-display';
+import { UserFacingError } from './error-display';
 
 const meta: Meta = {
     title: 'Component/Error boundary',
     component: ErrorBoundary,
     parameters: {
         fetchMock: {},
-        actions: { handles: [GS_ERROR_EVENT_TYPE] },
     },
     argTypes: {
         size: { control: 'object' },
@@ -19,7 +17,6 @@ const meta: Meta = {
     args: {
         size: { height: '600px', width: '100%' },
     },
-    decorators: [withActions],
 };
 
 export default meta;
@@ -61,7 +58,7 @@ export const ErrorBoundaryWithUserFacingErrorStory: StoryObj = {
         const canvas = within(canvasElement);
         const content = canvas.queryByText('Some content.', { exact: false });
         await waitFor(() => expect(content).not.toBeInTheDocument());
-        await waitFor(() => expect(canvas.getByText('Error')).toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByText('Error - Error Headline')).toBeInTheDocument());
     },
 };
 
diff --git a/components/src/preact/components/error-display.stories.tsx b/components/src/preact/components/error-display.stories.tsx
index 2604e0c9..3b33840b 100644
--- a/components/src/preact/components/error-display.stories.tsx
+++ b/components/src/preact/components/error-display.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, userEvent, waitFor, within } from '@storybook/test';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 
 import { ErrorDisplay, UserFacingError } from './error-display';
 import { ResizeContainer } from './resize-container';
@@ -12,7 +12,7 @@ const meta: Meta = {
 
 export default meta;
 
-export const ErrorStory: StoryObj = {
+export const GenericErrorStory: StoryObj = {
     render: () => (
         <ResizeContainer size={{ height: '600px', width: '100%' }}>
             <ErrorDisplay error={new Error('some message')} />
@@ -48,3 +48,21 @@ export const UserFacingErrorStory: StoryObj = {
         });
     },
 };
+
+export const FiresEvent: StoryObj = {
+    render: () => (
+        <ResizeContainer size={{ height: '600px', width: '100%' }}>
+            <ErrorDisplay error={new UserFacingError('Error Title', 'some message')} />
+        </ResizeContainer>
+    ),
+
+    play: async ({ canvasElement }) => {
+        const listenerMock = fn();
+        canvasElement.addEventListener('gs-error', listenerMock);
+
+        await waitFor(() => {
+            expect(listenerMock.mock.calls.at(-1)[0].error.name).toStrictEqual('UserFacingError');
+            expect(listenerMock.mock.calls.at(-1)[0].error.message).toStrictEqual('some message');
+        });
+    },
+};
diff --git a/components/src/preact/components/error-display.tsx b/components/src/preact/components/error-display.tsx
index 4ba4dc60..bdc93d44 100644
--- a/components/src/preact/components/error-display.tsx
+++ b/components/src/preact/components/error-display.tsx
@@ -1,10 +1,17 @@
 import { type FunctionComponent } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
 
+import { LapisError, UnknownLapisError } from '../../lapisApi/lapisApi';
+
 export const GS_ERROR_EVENT_TYPE = 'gs-error';
 
-export interface ErrorEvent extends Event {
-    readonly error: Error;
+export class ErrorEvent extends Event {
+    constructor(public readonly error: Error) {
+        super(GS_ERROR_EVENT_TYPE, {
+            bubbles: true,
+            composed: true,
+        });
+    }
 }
 
 export class UserFacingError extends Error {
@@ -24,30 +31,23 @@ export const ErrorDisplay: FunctionComponent<{ error: Error }> = ({ error }) =>
     const ref = useRef<HTMLDialogElement>(null);
 
     useEffect(() => {
-        containerRef.current?.dispatchEvent(
-            new ErrorEvent(GS_ERROR_EVENT_TYPE, {
-                error,
-                bubbles: true,
-                composed: true,
-            }),
-        );
+        containerRef.current?.dispatchEvent(new ErrorEvent(error));
     });
 
+    const { headline, details } = getDisplayedErrorMessage(error);
+
     return (
         <div
             ref={containerRef}
             className='h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center flex-col'
         >
-            <div className='text-red-700 font-bold'>Error</div>
+            <div className='text-red-700 font-bold'>{headline}</div>
             <div>
                 Oops! Something went wrong.
-                {error instanceof UserFacingError && (
+                {details !== undefined && (
                     <>
                         {' '}
-                        <button
-                            className='text-sm text-gray-600 hover:text-gray-300'
-                            onClick={() => ref.current?.showModal()}
-                        >
+                        <button className='underline hover:text-gray-400' onClick={() => ref.current?.showModal()}>
                             Show details.
                         </button>
                         <dialog ref={ref} class='modal'>
@@ -57,8 +57,8 @@ export const ErrorDisplay: FunctionComponent<{ error: Error }> = ({ error }) =>
                                         ✕
                                     </button>
                                 </form>
-                                <h1 class='text-lg'>{error.headline}</h1>
-                                <p class='py-4'>{error.message}</p>
+                                <h1 class='text-lg'>{details.headline}</h1>
+                                <p class='py-4'>{details.message}</p>
                             </div>
                             <form method='dialog' class='modal-backdrop'>
                                 <button>close</button>
@@ -70,3 +70,37 @@ export const ErrorDisplay: FunctionComponent<{ error: Error }> = ({ error }) =>
         </div>
     );
 };
+
+function getDisplayedErrorMessage(error: Error) {
+    if (error instanceof UserFacingError) {
+        return {
+            headline: `Error - ${error.headline}`,
+            details: {
+                headline: error.headline,
+                message: error.message,
+            },
+        };
+    }
+
+    if (error instanceof LapisError) {
+        return {
+            headline: `Error - Failed fetching ${error.requestedData} from LAPIS`,
+            details: {
+                headline: `LAPIS request failed: ${error.requestedData} - ${error.problemDetail.status} ${error.problemDetail.title}`,
+                message: error.problemDetail.detail ?? error.message,
+            },
+        };
+    }
+
+    if (error instanceof UnknownLapisError) {
+        return {
+            headline: `Error - Failed fetching ${error.requestedData} from LAPIS`,
+            details: {
+                headline: `LAPIS request failed: An unexpected error occurred while fetching ${error.requestedData}`,
+                message: error.message,
+            },
+        };
+    }
+
+    return { headline: 'Error', details: undefined };
+}
diff --git a/components/src/preact/dateRangeSelector/date-range-selector.stories.tsx b/components/src/preact/dateRangeSelector/date-range-selector.stories.tsx
index 212b0dbf..6ee0ebb8 100644
--- a/components/src/preact/dateRangeSelector/date-range-selector.stories.tsx
+++ b/components/src/preact/dateRangeSelector/date-range-selector.stories.tsx
@@ -1,4 +1,3 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, waitFor, within } from '@storybook/test';
 import dayjs from 'dayjs/esm';
@@ -13,6 +12,7 @@ import {
     PRESET_VALUE_LAST_6_MONTHS,
     PRESET_VALUE_LAST_MONTH,
 } from './selectableOptions';
+import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 
@@ -23,7 +23,7 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
     component: DateRangeSelector,
     parameters: {
         actions: {
-            handles: ['gs-date-range-changed'],
+            handles: ['gs-date-range-changed', ...previewHandles],
         },
         fetchMock: {},
     },
@@ -68,7 +68,6 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
         initialDateFrom: '',
         initialDateTo: '',
     },
-    decorators: [withActions],
 };
 
 export default meta;
diff --git a/components/src/preact/lineageFilter/lineage-filter.stories.tsx b/components/src/preact/lineageFilter/lineage-filter.stories.tsx
index 18d6940a..c0dd445f 100644
--- a/components/src/preact/lineageFilter/lineage-filter.stories.tsx
+++ b/components/src/preact/lineageFilter/lineage-filter.stories.tsx
@@ -1,7 +1,7 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type StoryObj } from '@storybook/preact';
 
 import { LineageFilter, type LineageFilterProps } from './lineage-filter';
+import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -11,7 +11,7 @@ const meta: Meta = {
     component: LineageFilter,
     parameters: {
         actions: {
-            handles: ['gs-lineage-filter-changed'],
+            handles: ['gs-lineage-filter-changed', ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -31,7 +31,6 @@ const meta: Meta = {
             ],
         },
     },
-    decorators: [withActions],
 };
 
 export default meta;
diff --git a/components/src/preact/locationFilter/fetchAutocompletionList.ts b/components/src/preact/locationFilter/fetchAutocompletionList.ts
index 9fe8da57..40ae2efd 100644
--- a/components/src/preact/locationFilter/fetchAutocompletionList.ts
+++ b/components/src/preact/locationFilter/fetchAutocompletionList.ts
@@ -1,6 +1,4 @@
-import { LapisError } from '../../lapisApi/lapisApi';
 import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
-import { UserFacingError } from '../components/error-display';
 
 export async function fetchAutocompletionList(fields: string[], lapis: string, signal?: AbortSignal) {
     const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1)
@@ -10,18 +8,7 @@ export async function fetchAutocompletionList(fields: string[], lapis: string, s
 
     const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string | null>>({}, fields);
 
-    let data;
-    try {
-        data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
-    } catch (error) {
-        if (error instanceof LapisError) {
-            throw new UserFacingError(
-                `Failed to fetch autocomplete list from LAPIS: ${error.problemDetail.status} ${error.problemDetail.title ?? ''}`,
-                error.problemDetail.detail ?? error.message,
-            );
-        }
-        throw error;
-    }
+    const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
 
     const locationValues = data
         .map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {}))
diff --git a/components/src/preact/locationFilter/location-filter.stories.tsx b/components/src/preact/locationFilter/location-filter.stories.tsx
index 80cbf18d..d50b868c 100644
--- a/components/src/preact/locationFilter/location-filter.stories.tsx
+++ b/components/src/preact/locationFilter/location-filter.stories.tsx
@@ -1,8 +1,8 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type StoryObj } from '@storybook/preact';
 
 import data from './__mockData__/aggregated.json';
 import { LocationFilter, type LocationFilterProps } from './location-filter';
+import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 
@@ -28,7 +28,7 @@ const meta: Meta<LocationFilterProps> = {
             ],
         },
         actions: {
-            handles: ['gs-location-changed'],
+            handles: ['gs-location-changed', ...previewHandles],
         },
     },
     args: {
@@ -59,7 +59,6 @@ const meta: Meta<LocationFilterProps> = {
             },
         },
     },
-    decorators: [withActions],
 };
 
 export default meta;
diff --git a/components/src/preact/mutationFilter/mutation-filter.stories.tsx b/components/src/preact/mutationFilter/mutation-filter.stories.tsx
index e8ab6f6e..12801aad 100644
--- a/components/src/preact/mutationFilter/mutation-filter.stories.tsx
+++ b/components/src/preact/mutationFilter/mutation-filter.stories.tsx
@@ -1,9 +1,9 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type PreactRenderer, type StoryObj } from '@storybook/preact';
 import { expect, fireEvent, fn, userEvent, waitFor, within } from '@storybook/test';
 import { type StepFunction } from '@storybook/types';
 
 import { MutationFilter, type MutationFilterProps } from './mutation-filter';
+import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -14,7 +14,7 @@ const meta: Meta<MutationFilterProps> = {
     component: MutationFilter,
     parameters: {
         actions: {
-            handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur'],
+            handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur', ...previewHandles],
         },
         fetchMock: {},
     },
@@ -26,7 +26,6 @@ const meta: Meta<MutationFilterProps> = {
             },
         },
     },
-    decorators: [withActions],
 };
 
 export default meta;
diff --git a/components/src/preact/prevalenceOverTime/prevalence-over-time.tsx b/components/src/preact/prevalenceOverTime/prevalence-over-time.tsx
index 2d2d3363..e2692a48 100644
--- a/components/src/preact/prevalenceOverTime/prevalence-over-time.tsx
+++ b/components/src/preact/prevalenceOverTime/prevalence-over-time.tsx
@@ -69,7 +69,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeProps>
                 lapis,
                 lapisDateField,
             ),
-        [lapis, numeratorFilter, denominatorFilter, granularity, smoothingWindow],
+        [lapis, numeratorFilter, denominatorFilter, granularity, smoothingWindow, lapisDateField],
     );
 
     if (isLoading) {
diff --git a/components/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx b/components/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx
index 32ad23b5..e9eba433 100644
--- a/components/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx
+++ b/components/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx
@@ -66,7 +66,7 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
 
     const { data, error, isLoading } = useQuery(
         () => queryRelativeGrowthAdvantage(numeratorFilter, denominatorFilter, generationTime, lapis, lapisDateField),
-        [lapis, numeratorFilter, denominatorFilter, generationTime, views],
+        [lapis, numeratorFilter, denominatorFilter, generationTime, views, lapisDateField],
     );
 
     if (isLoading) {
diff --git a/components/src/preact/textInput/text-input.stories.tsx b/components/src/preact/textInput/text-input.stories.tsx
index def54aaa..e08b568a 100644
--- a/components/src/preact/textInput/text-input.stories.tsx
+++ b/components/src/preact/textInput/text-input.stories.tsx
@@ -1,9 +1,9 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, waitFor, within } from '@storybook/test';
 
 import data from './__mockData__/aggregated_hosts.json';
 import { TextInput, type TextInputProps } from './text-input';
+import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 
@@ -12,7 +12,7 @@ const meta: Meta<TextInputProps> = {
     component: TextInput,
     parameters: {
         actions: {
-            handles: ['gs-text-input-changed'],
+            handles: ['gs-text-input-changed', ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -32,7 +32,6 @@ const meta: Meta<TextInputProps> = {
             ],
         },
     },
-    decorators: [withActions],
     argTypes: {
         lapisField: {
             control: {
diff --git a/components/src/web-components/app.stories.ts b/components/src/web-components/app.stories.ts
index 013b7041..5c40d51c 100644
--- a/components/src/web-components/app.stories.ts
+++ b/components/src/web-components/app.stories.ts
@@ -1,5 +1,4 @@
 import { consume } from '@lit/context';
-import { withActions } from '@storybook/addon-actions/decorator';
 import { expect, waitFor, within } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html, LitElement } from 'lit';
@@ -30,7 +29,6 @@ const meta: Meta = {
             codeExample,
         },
     }),
-    decorators: [withActions],
     tags: ['autodocs'],
 };
 
diff --git a/components/src/web-components/input/gs-date-range-selector.stories.ts b/components/src/web-components/input/gs-date-range-selector.stories.ts
index c90bf207..c730df29 100644
--- a/components/src/web-components/input/gs-date-range-selector.stories.ts
+++ b/components/src/web-components/input/gs-date-range-selector.stories.ts
@@ -1,9 +1,9 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { expect, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
 import './gs-date-range-selector';
@@ -36,7 +36,7 @@ const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
     component: 'gs-date-range-selector',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-date-range-changed'],
+            handles: ['gs-date-range-changed', ...previewHandles],
         },
         fetchMock: {},
         componentDocs: {
@@ -87,7 +87,6 @@ const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
         initialDateFrom: '',
         initialDateTo: '',
     },
-    decorators: [withActions],
     tags: ['autodocs'],
 };
 
diff --git a/components/src/web-components/input/gs-lineage-filter.stories.ts b/components/src/web-components/input/gs-lineage-filter.stories.ts
index dcb572ed..74bee82c 100644
--- a/components/src/web-components/input/gs-lineage-filter.stories.ts
+++ b/components/src/web-components/input/gs-lineage-filter.stories.ts
@@ -1,9 +1,9 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { expect, fn, userEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import '../app';
 import './gs-lineage-filter';
@@ -24,7 +24,7 @@ const meta: Meta<Required<LineageFilterProps>> = {
     component: 'gs-lineage-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-lineage-filter-changed'],
+            handles: ['gs-lineage-filter-changed', ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -49,7 +49,6 @@ const meta: Meta<Required<LineageFilterProps>> = {
             codeExample,
         },
     }),
-    decorators: [withActions],
     tags: ['autodocs'],
 };
 
diff --git a/components/src/web-components/input/gs-location-filter.stories.ts b/components/src/web-components/input/gs-location-filter.stories.ts
index da7cc5e4..2322a51b 100644
--- a/components/src/web-components/input/gs-location-filter.stories.ts
+++ b/components/src/web-components/input/gs-location-filter.stories.ts
@@ -1,10 +1,10 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { expect, fn, userEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import '../app';
 import './gs-location-filter';
@@ -25,7 +25,7 @@ const meta: Meta = {
     component: 'gs-location-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-location-changed'],
+            handles: ['gs-location-changed', ...previewHandles],
         },
         componentDocs: {
             opensShadowDom: true,
@@ -55,7 +55,6 @@ const meta: Meta = {
             },
         },
     },
-    decorators: [withActions],
     tags: ['autodocs'],
 };
 
diff --git a/components/src/web-components/input/gs-mutation-filter.stories.ts b/components/src/web-components/input/gs-mutation-filter.stories.ts
index 0b68aa4a..37e2388e 100644
--- a/components/src/web-components/input/gs-mutation-filter.stories.ts
+++ b/components/src/web-components/input/gs-mutation-filter.stories.ts
@@ -1,9 +1,9 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { expect, fn, userEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL, REFERENCE_GENOME_ENDPOINT } from '../../constants';
 import '../app';
 import { type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
@@ -21,7 +21,7 @@ const meta: Meta<MutationFilterProps> = {
     component: 'gs-mutation-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur'],
+            handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur', ...previewHandles],
         },
         fetchMock: {},
         componentDocs: {
@@ -38,7 +38,6 @@ const meta: Meta<MutationFilterProps> = {
         },
         width: { control: 'text' },
     },
-    decorators: [withActions],
     tags: ['autodocs'],
 };
 
diff --git a/components/src/web-components/input/gs-text-input.stories.ts b/components/src/web-components/input/gs-text-input.stories.ts
index 721fad8b..4094ba17 100644
--- a/components/src/web-components/input/gs-text-input.stories.ts
+++ b/components/src/web-components/input/gs-text-input.stories.ts
@@ -1,9 +1,9 @@
-import { withActions } from '@storybook/addon-actions/decorator';
 import { expect, fn, userEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import '../app';
 import './gs-text-input';
@@ -24,7 +24,7 @@ const meta: Meta<Required<TextInputProps>> = {
     component: 'gs-text-input',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-text-input-changed'],
+            handles: ['gs-text-input-changed', ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -71,7 +71,6 @@ const meta: Meta<Required<TextInputProps>> = {
             },
         },
     },
-    decorators: [withActions],
     tags: ['autodocs'],
 };