@genspectrum/dashboard-components 0.6.13 → 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;
@@ -990,21 +1008,21 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time-component': MutationsOverTimeComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-mutations-over-time-component': MutationsOverTimeComponent;
     }
 }
 
@@ -1041,21 +1059,21 @@ declare global {
 
 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

@@ -376,7 +376,7 @@ input[type="range"] {
     background-color: #C6C6C6;
     pointer-events: none;
 }/*
-! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -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.13",
+    "version": "0.6.15",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -16,18 +16,19 @@
             "require": "./dist/dashboard-components.js",
             "types": "./dist/genspectrum-components.d.ts"
         },
-        "./custom-elements.json": "./custom-,elements.json",
+        "./custom-elements.json": "./custom-elements.json",
         "./package.json": "./package.json",
         "./style.css": "./dist/style.css"
     },
     "files": [
         "dist",
+        "standalone-bundle",
         "src",
         "custom-elements.json",
         "package.json"
     ],
     "scripts": {
-        "build": "vite --config vite.release.config.ts build && npm run generate-manifest",
+        "build": "vite --config vite.release.config.ts build && npm run generate-manifest && vite --config vite.release-standalone.config.ts build",
         "build-and-pack": "npm run build && npm pack | xargs -I {} cp {} genspectrum-dashboard-components.tgz",
         "test": "vitest",
         "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
@@ -67,9 +68,6 @@
         "dayjs": "^1.11.10",
         "flatpickr": "^4.6.13",
         "gridjs": "^6.2.0",
-        "@iconify-json/mdi": "^1.1.67",
-        "@iconify-json/mdi-light": "^1.1.10",
-        "@iconify/tailwind": "^1.1.1",
         "lit": "^3.1.3",
         "object-hash": "^3.0.0",
         "preact": "^10.20.1",
@@ -77,6 +75,9 @@
     },
     "devDependencies": {
         "@custom-elements-manifest/analyzer": "^0.10.2",
+        "@iconify-json/mdi": "^1.1.67",
+        "@iconify-json/mdi-light": "^1.1.10",
+        "@iconify/tailwind": "^1.1.2",
         "@playwright/test": "^1.43.1",
         "@storybook/addon-actions": "^8.0.9",
         "@storybook/addon-essentials": "^8.0.9",
@@ -92,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/operator/FetchAggregatedOperator.ts

@@ -5,16 +5,11 @@ import { type AggregatedItem } from '../lapisApi/lapisTypes';
 import { type LapisFilter } from '../types';
 
 export class FetchAggregatedOperator<Fields extends Record<string, unknown>>
-    implements
-        Operator<
-            Fields & {
-                count: number;
-            }
-        >
+    implements Operator<Fields & { count: number }>
 {
     constructor(
         private filter: LapisFilter,
-        private fields: string[],
+        private fields: string[] = [],
     ) {}
 
     async evaluate(lapisUrl: string, signal?: AbortSignal): Promise<Dataset<Fields & { count: number }>> {

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 = () => {
@@ -124,7 +122,7 @@ function generateFullExampleCode(componentCode: string, componentName: string) {
     const storyBookPath = `/docs/visualization-${componentName}--docs`;
     return `<html>
 <head>
-  <script type="module" src="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/dashboard-components.js"></script>
+  <script type="module" src="https://unpkg.com/@genspectrum/dashboard-components@latest/standalone-bundle/dashboard-components.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/style.css" />
 </head>
 

package/src/preact/components/percent-intput.tsx

@@ -4,13 +4,18 @@ import { useEffect, useState } from 'preact/hooks';
 export type PercentInputProps = {
     percentage: number;
     setPercentage: (percentage: number) => void;
+    indicateError?: boolean;
 };
 
 const percentageInRange = (percentage: number) => {
     return percentage <= 100 && percentage >= 0;
 };
 
-export const PercentInput: FunctionComponent<PercentInputProps> = ({ percentage, setPercentage }) => {
+export const PercentInput: FunctionComponent<PercentInputProps> = ({
+    percentage,
+    setPercentage,
+    indicateError = false,
+}) => {
     const [internalPercentage, setInternalPercentage] = useState(percentage);
 
     useEffect(() => {
@@ -33,7 +38,7 @@ export const PercentInput: FunctionComponent<PercentInputProps> = ({ percentage,
         setInternalPercentage(value);
     };
 
-    const isError = !percentageInRange(internalPercentage);
+    const isError = indicateError || !percentageInRange(internalPercentage);
     return (
         <label className={`input input-bordered flex items-center gap-2 w-32 ${isError ? 'input-error' : ''}`}>
             <input

package/src/preact/components/proportion-selector.tsx

@@ -57,12 +57,22 @@ export const ProportionSelector: FunctionComponent<ProportionSelectorProps> = ({
         setInternalMaxProportion(newMaxProportion);
     };
 
+    const indicateError = internalMinProportion > internalMaxProportion;
+
     return (
         <div class='flex flex-col w-64 mb-2'>
             <div class='flex items-center '>
-                <PercentInput percentage={internalMinProportion * 100} setPercentage={updateMinPercentage} />
+                <PercentInput
+                    percentage={internalMinProportion * 100}
+                    setPercentage={updateMinPercentage}
+                    indicateError={indicateError}
+                />
                 <div class='m-2'>-</div>
-                <PercentInput percentage={internalMaxProportion * 100} setPercentage={updateMaxPercentage} />
+                <PercentInput
+                    percentage={internalMaxProportion * 100}
+                    setPercentage={updateMaxPercentage}
+                    indicateError={indicateError}
+                />
             </div>
             <div class='my-1'>
                 <MinMaxRangeSlider

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/dateRangeSelector/date-range-selector.tsx

@@ -20,10 +20,10 @@ export interface DateRangeSelectorProps<CustomLabel extends string> extends Date
 
 export interface DateRangeSelectorPropsInner<CustomLabel extends string> {
     customSelectOptions: CustomSelectOption<CustomLabel>[];
-    earliestDate?: string;
-    initialValue?: PresetOptionValues | CustomLabel;
-    initialDateFrom?: string;
-    initialDateTo?: string;
+    earliestDate: string;
+    initialValue: PresetOptionValues | CustomLabel;
+    initialDateFrom: string;
+    initialDateTo: string;
     dateColumn: string;
 }
 

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;