@genspectrum/dashboard-components 0.6.14 → 0.6.15

package/dist/genspectrum-components.d.ts

@@ -178,6 +178,12 @@ export declare class DateRangeSelectorComponent extends PreactLitAdapter {
     render(): JSX_2.Element;
 }
 
+declare class ErrorEvent_2 extends Event {
+    readonly error: Error;
+    constructor(error: Error);
+}
+export { ErrorEvent_2 as ErrorEvent }
+
 declare type LapisFilter = Record<string, string | number | null | boolean>;
 
 /**
@@ -948,11 +954,23 @@ export declare class TextInputComponent extends PreactLitAdapter {
     render(): JSX_2.Element;
 }
 
+export declare class UserFacingError extends Error {
+    readonly headline: string;
+    constructor(headline: string, message: string);
+}
+
 declare type View = 'table';
 
 export { }
 
 
+declare global {
+    interface HTMLElementEventMap {
+        'gs-error': ErrorEvent;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-app': App;
@@ -1021,41 +1039,41 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-input': TextInputComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
-        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 

package/dist/style.css

@@ -3372,9 +3372,9 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
-.hover\:text-gray-300:hover {
+.hover\:text-gray-400:hover {
   --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
+  color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 .hover\:text-gray-700:hover {
   --tw-text-opacity: 1;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.6.14",
+    "version": "0.6.15",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -93,8 +93,8 @@
         "@storybook/web-components-vite": "^8.0.9",
         "@types/node": "^22.0.0",
         "@types/object-hash": "^3.0.6",
-        "@typescript-eslint/eslint-plugin": "^7.14.1",
-        "@typescript-eslint/parser": "^7.14.1",
+        "@typescript-eslint/eslint-plugin": "^8.2.0",
+        "@typescript-eslint/parser": "^8.2.0",
         "autoprefixer": "^10.4.19",
         "daisyui": "^4.10.2",
         "depcheck": "^1.4.7",

package/src/index.ts

@@ -1 +1,9 @@
 export * from './web-components';
+
+export { type ErrorEvent, UserFacingError } from './preact/components/error-display';
+
+declare global {
+    interface HTMLElementEventMap {
+        'gs-error': ErrorEvent;
+    }
+}

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

package/src/preact/components/color-scale-selector-dropdown.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<ColorScaleSelectorDropdownProps> = {
 
 export default meta;
 
-const WrapperWithState: FunctionComponent<{}> = () => {
+const WrapperWithState: FunctionComponent = () => {
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
 
     return <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />;

package/src/preact/components/error-boundary.stories.tsx

@@ -2,11 +2,14 @@ import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, waitFor, within } from '@storybook/test';
 
 import { ErrorBoundary } from './error-boundary';
+import { UserFacingError } from './error-display';
 
 const meta: Meta = {
     title: 'Component/Error boundary',
     component: ErrorBoundary,
-    parameters: { fetchMock: {} },
+    parameters: {
+        fetchMock: {},
+    },
     argTypes: {
         size: { control: 'object' },
         defaultSize: { control: 'object' },
@@ -34,7 +37,7 @@ export const ErrorBoundaryWithoutErrorStory: StoryObj = {
 export const ErrorBoundaryWithErrorStory: StoryObj = {
     render: (args) => (
         <ErrorBoundary size={args.size}>
-            <ContentThatThrowsError />
+            <ContentThatThrowsError error={() => new Error('Some error')} />
         </ErrorBoundary>
     ),
     play: async ({ canvasElement }) => {
@@ -45,6 +48,20 @@ export const ErrorBoundaryWithErrorStory: StoryObj = {
     },
 };
 
-const ContentThatThrowsError = () => {
-    throw new Error('Some error');
+export const ErrorBoundaryWithUserFacingErrorStory: StoryObj = {
+    render: (args) => (
+        <ErrorBoundary size={args.size}>
+            <ContentThatThrowsError error={() => new UserFacingError('Error Headline', 'Some error')} />
+        </ErrorBoundary>
+    ),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const content = canvas.queryByText('Some content.', { exact: false });
+        await waitFor(() => expect(content).not.toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByText('Error - Error Headline')).toBeInTheDocument());
+    },
+};
+
+const ContentThatThrowsError = (props: { error: () => Error }) => {
+    throw props.error();
 };

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

package/src/preact/components/error-display.tsx

@@ -1,5 +1,18 @@
 import { type FunctionComponent } from 'preact';
-import { useRef } from 'preact/hooks';
+import { useEffect, useRef } from 'preact/hooks';
+
+import { LapisError, UnknownLapisError } from '../../lapisApi/lapisApi';
+
+export const GS_ERROR_EVENT_TYPE = 'gs-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 {
     constructor(
@@ -14,20 +27,27 @@ export class UserFacingError extends Error {
 export const ErrorDisplay: FunctionComponent<{ error: Error }> = ({ error }) => {
     console.error(error);
 
+    const containerRef = useRef<HTMLInputElement>(null);
     const ref = useRef<HTMLDialogElement>(null);
 
+    useEffect(() => {
+        containerRef.current?.dispatchEvent(new ErrorEvent(error));
+    });
+
+    const { headline, details } = getDisplayedErrorMessage(error);
+
     return (
-        <div 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
+            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'>{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'>
@@ -37,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>
@@ -50,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 };
+}

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

@@ -1,9 +1,9 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, userEvent, waitFor, within } from '@storybook/test';
 
-import Info, { type InfoProps } from './info';
+import Info from './info';
 
-const meta: Meta<InfoProps> = {
+const meta: Meta = {
     title: 'Component/Info',
     component: Info,
     parameters: { fetchMock: {} },
@@ -13,7 +13,7 @@ export default meta;
 
 const tooltipText = 'This is a tooltip which shows some information.';
 
-export const InfoStory: StoryObj<InfoProps> = {
+export const InfoStory: StoryObj = {
     render: (args) => (
         <div class='flex justify-center px-4 py-16'>
             <Info {...args}>{tooltipText}</Info>
@@ -21,7 +21,7 @@ export const InfoStory: StoryObj<InfoProps> = {
     ),
 };
 
-export const OpenInfo: StoryObj<InfoProps> = {
+export const OpenInfo: StoryObj = {
     ...InfoStory,
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
@@ -30,7 +30,7 @@ export const OpenInfo: StoryObj<InfoProps> = {
     },
 };
 
-export const ShowsAndClosesInfoOnClick: StoryObj<InfoProps> = {
+export const ShowsAndClosesInfoOnClick: StoryObj = {
     ...InfoStory,
     play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);

package/src/preact/components/info.tsx

@@ -1,9 +1,7 @@
 import { type FunctionComponent } from 'preact';
 import { useRef } from 'preact/hooks';
 
-export interface InfoProps {}
-
-const Info: FunctionComponent<InfoProps> = ({ children }) => {
+const Info: FunctionComponent = ({ children }) => {
     const dialogRef = useRef<HTMLDialogElement>(null);
 
     const toggleHelp = () => {

package/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;

package/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;

package/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] }), {}))

package/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;

package/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;

package/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) {

package/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) {

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

@@ -9,7 +9,7 @@ export function useFloatingUi(
     middleware?: Array<Middleware | null | undefined | false>,
     placement?: Placement,
 ) {
-    const cleanupRef = useRef<Function | null>(null);
+    const cleanupRef = useRef<() => void | null>(null);
 
     useEffect(() => {
         if (!referenceRef.current || !floatingRef.current) {

package/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: {