@genspectrum/dashboard-components 0.19.1 → 0.19.3

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

@@ -77,16 +77,16 @@ const LineageSelector = ({
             allItems={data}
             value={value}
             filterItemsByInputValue={filterByInputValue}
-            createEvent={(item: string | null) => new LineageFilterChangedEvent({ [lapisField]: item ?? undefined })}
-            itemToString={(item: string | undefined | null) => item ?? ''}
+            createEvent={(item) => new LineageFilterChangedEvent({ [lapisField]: item ?? undefined })}
+            itemToString={(item) => item ?? ''}
             placeholderText={placeholderText}
             formatItemInList={(item: string) => item}
         />
     );
 };
 
-function filterByInputValue(item: string, inputValue: string | undefined | null) {
-    if (inputValue === undefined || inputValue === null || inputValue === '') {
+function filterByInputValue(item: string, inputValue: string | null) {
+    if (inputValue === null || inputValue === '') {
         return true;
     }
     return item?.toLowerCase().includes(inputValue?.toLowerCase() || '');

package/src/preact/locationFilter/LocationChangedEvent.ts

@@ -1,8 +1,9 @@
 import { type LapisLocationFilter } from '../../types';
+import { gsEventNames } from '../../utils/gsEventNames';
 
 export class LocationChangedEvent extends CustomEvent<LapisLocationFilter> {
     constructor(detail: LapisLocationFilter) {
-        super('gs-location-changed', {
+        super(gsEventNames.locationChanged, {
             detail,
             bubbles: true,
             composed: true,

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

@@ -6,6 +6,7 @@ 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 { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
@@ -32,7 +33,7 @@ const meta: Meta<LocationFilterProps> = {
             ],
         },
         actions: {
-            handles: ['gs-location-changed', ...previewHandles],
+            handles: [gsEventNames.locationChanged, ...previewHandles],
         },
     },
     args: {
@@ -152,7 +153,7 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
 
     const locationChangedListenerMock = fn();
     await step('Setup event listener mock', () => {
-        canvasElement.addEventListener('gs-location-changed', locationChangedListenerMock);
+        canvasElement.addEventListener(gsEventNames.locationChanged, locationChangedListenerMock);
     });
 
     await step('location filter is rendered with value', async () => {

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

@@ -87,12 +87,10 @@ const LocationSelector = ({
     return (
         <DownshiftCombobox
             allItems={allItems}
-            value={selectedItem}
+            value={selectedItem ?? null}
             filterItemsByInputValue={filterByInputValue}
-            createEvent={(item: SelectItem | null) =>
-                new LocationChangedEvent(item?.lapisFilter ?? emptyLocationFilter(fields))
-            }
-            itemToString={(item: SelectItem | undefined | null) => item?.label ?? ''}
+            createEvent={(item) => new LocationChangedEvent(item?.lapisFilter ?? emptyLocationFilter(fields))}
+            itemToString={(item) => item?.label ?? ''}
             placeholderText={placeholderText}
             formatItemInList={(item: SelectItem) => (
                 <>
@@ -107,8 +105,8 @@ const LocationSelector = ({
     );
 };
 
-function filterByInputValue(item: SelectItem, inputValue: string | undefined | null) {
-    if (inputValue === undefined || inputValue === null) {
+function filterByInputValue(item: SelectItem, inputValue: string | null) {
+    if (inputValue === null) {
         return true;
     }
     return (

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

@@ -6,6 +6,7 @@ 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 { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
@@ -15,7 +16,7 @@ const meta: Meta<MutationFilterProps> = {
     component: MutationFilter,
     parameters: {
         actions: {
-            handles: ['gs-mutation-filter-changed', ...previewHandles],
+            handles: [gsEventNames.mutationFilterChanged, ...previewHandles],
         },
         fetchMock: {},
     },
@@ -357,7 +358,7 @@ async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRend
 
     const changedListenerMock = fn();
     await step('Setup event listener mock', () => {
-        canvasElement.addEventListener('gs-mutation-filter-changed', changedListenerMock);
+        canvasElement.addEventListener(gsEventNames.mutationFilterChanged, changedListenerMock);
     });
 
     await step('wait until data is loaded', async () => {

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

@@ -8,6 +8,7 @@ import { MutationFilterInfo } from './mutation-filter-info';
 import { parseAndValidateMutation } from './parseAndValidateMutation';
 import { type ReferenceGenome } from '../../lapisApi/ReferenceGenome';
 import { type MutationsFilter, mutationsFilterSchema } from '../../types';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { type DeletionClass, type InsertionClass, type SubstitutionClass } from '../../utils/mutations';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -86,7 +87,7 @@ function MutationFilterInner({ initialValue }: MutationFilterInnerProps) {
         const detail = mapToMutationFilterStrings(selectedFilters);
 
         filterRef.current?.dispatchEvent(
-            new CustomEvent<MutationsFilter>('gs-mutation-filter-changed', {
+            new CustomEvent<MutationsFilter>(gsEventNames.mutationFilterChanged, {
                 detail,
                 bubbles: true,
                 composed: true,

package/src/preact/shared/charts/colors.ts

@@ -1,6 +1,6 @@
 // colorblind friendly colors taken from https://personal.sron.nl/~pault/
 
-const ColorsRGB = {
+export const ColorsRGB = {
     indigo: [51, 34, 136],
     green: [17, 119, 51],
     cyan: [136, 204, 238],

package/src/preact/textFilter/TextFilterChangedEvent.ts

@@ -1,8 +1,10 @@
+import { gsEventNames } from '../../utils/gsEventNames';
+
 type LapisTextFilter = Record<string, string | undefined>;
 
 export class TextFilterChangedEvent extends CustomEvent<LapisTextFilter> {
     constructor(detail: LapisTextFilter) {
-        super('gs-text-filter-changed', {
+        super(gsEventNames.textFilterChanged, {
             detail,
             bubbles: true,
             composed: true,

package/src/preact/textFilter/text-filter.stories.tsx

@@ -1,10 +1,11 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, fireEvent, fn, waitFor, within } from '@storybook/test';
+import { expect, fireEvent, fn, userEvent, waitFor, within } from '@storybook/test';
 
 import data from './__mockData__/aggregated_hosts.json';
 import { TextFilter, type TextFilterProps } from './text-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
@@ -13,7 +14,7 @@ const meta: Meta<TextFilterProps> = {
     component: TextFilter,
     parameters: {
         actions: {
-            handles: ['gs-text-filter-changed', ...previewHandles],
+            handles: [gsEventNames.textFilterChanged, ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -93,7 +94,7 @@ export const RemoveInitialValue: StoryObj<TextFilterProps> = {
 
         const changedListenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-text-filter-changed', changedListenerMock);
+            canvasElement.addEventListener(gsEventNames.textFilterChanged, changedListenerMock);
         });
 
         await waitFor(async () => {
@@ -104,13 +105,73 @@ export const RemoveInitialValue: StoryObj<TextFilterProps> = {
         await step('Remove initial value', async () => {
             await fireEvent.click(canvas.getByRole('button', { name: 'clear selection' }));
 
-            await expect(changedListenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        host: undefined,
-                    },
-                }),
-            );
+            await waitFor(async () => {
+                await expect(changedListenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            host: undefined,
+                        },
+                    }),
+                );
+            });
+        });
+    },
+};
+
+export const KeepsPartialInputInInputField: StoryObj<TextFilterProps> = {
+    ...Default,
+    render: (args) => (
+        <>
+            <button data-testid='focusHelper'>Focus helper</button>
+            <LapisUrlContextProvider value={LAPIS_URL}>
+                <TextFilter {...args} />
+            </LapisUrlContextProvider>
+        </>
+    ),
+    args: {
+        ...Default.args,
+        value: '',
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        const changedListenerMock = fn();
+        await step('Setup event listener mock', () => {
+            canvasElement.addEventListener(gsEventNames.textFilterChanged, changedListenerMock);
+        });
+        const inputField = () => canvas.getByPlaceholderText('Enter a host name', { exact: false });
+        async function typeAndBlur(input: string) {
+            await userEvent.click(inputField());
+            await userEvent.type(inputField(), input);
+            await userEvent.click(canvas.getByTestId('focusHelper'));
+        }
+
+        await waitFor(async () => {
+            await expect(inputField()).toHaveValue('');
+        });
+
+        await step('Type a value that it not valid yet and focus out', async () => {
+            await typeAndBlur('Homo sapi');
+            await waitFor(async () => {
+                await expect(inputField()).toHaveValue('Homo sapi');
+            });
+            await expect(changedListenerMock).not.toHaveBeenCalled();
+        });
+
+        await step('Complete the input value and expect an event', async () => {
+            await typeAndBlur('ens');
+            await waitFor(async () => {
+                await expect(inputField()).toHaveValue('Homo sapiens');
+            });
+            await waitFor(async () => {
+                await expect(changedListenerMock).toHaveBeenLastCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            host: 'Homo sapiens',
+                        },
+                    }),
+                );
+            });
         });
     },
 };

package/src/preact/textFilter/text-filter.tsx

@@ -85,12 +85,10 @@ const TextSelector = ({
     return (
         <DownshiftCombobox
             allItems={data}
-            value={initialSelectedItem}
+            value={initialSelectedItem ?? null}
             filterItemsByInputValue={filterByInputValue}
-            createEvent={(item: SelectItem | null) =>
-                new TextFilterChangedEvent({ [lapisField]: item?.value ?? undefined })
-            }
-            itemToString={(item: SelectItem | undefined | null) => item?.value ?? ''}
+            createEvent={(item) => new TextFilterChangedEvent({ [lapisField]: item?.value ?? undefined })}
+            itemToString={(item) => item?.value ?? ''}
             placeholderText={placeholderText}
             formatItemInList={(item: SelectItem) => {
                 return (
@@ -104,8 +102,8 @@ const TextSelector = ({
     );
 };
 
-function filterByInputValue(item: SelectItem, inputValue: string | undefined | null) {
-    if (inputValue === undefined || inputValue === null || inputValue === '') {
+function filterByInputValue(item: SelectItem, inputValue: string | null) {
+    if (inputValue === null || inputValue === '') {
         return true;
     }
     return item.value?.toLowerCase().includes(inputValue?.toLowerCase() || '');

package/src/utilEntrypoint.ts

@@ -38,3 +38,5 @@ export { LineageFilterChangedEvent } from './preact/lineageFilter/LineageFilterC
 export { TextFilterChangedEvent } from './preact/textFilter/TextFilterChangedEvent';
 
 export type { MutationAnnotations, MutationAnnotation } from './web-components/mutation-annotations-context';
+
+export { gsEventNames } from './utils/gsEventNames';

package/src/utils/gsEventNames.ts

@@ -0,0 +1,9 @@
+export const gsEventNames = {
+    error: 'gs-error',
+    dateRangeFilterChanged: 'gs-date-range-filter-changed',
+    dateRangeOptionChanged: 'gs-date-range-option-changed',
+    mutationFilterChanged: 'gs-mutation-filter-changed',
+    lineageFilterChanged: 'gs-lineage-filter-changed',
+    locationChanged: 'gs-location-changed',
+    textFilterChanged: 'gs-text-filter-changed',
+} as const;

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

@@ -10,6 +10,7 @@ import './gs-date-range-filter';
 import '../gs-app';
 import { toYYYYMMDD } from '../../preact/dateRangeFilter/dateConversion';
 import { dateRangeOptionPresets } from '../../preact/dateRangeFilter/dateRangeOption';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
@@ -29,7 +30,7 @@ const meta: Meta<Required<DateRangeFilterProps>> = {
     component: 'gs-date-range-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles],
+            handles: [gsEventNames.dateRangeFilterChanged, gsEventNames.dateRangeOptionChanged, ...previewHandles],
         },
         fetchMock: {},
         componentDocs: {
@@ -144,8 +145,8 @@ export const FiresEvents: StoryObj<Required<DateRangeFilterProps>> = {
         const filterChangedListenerMock = fn();
         const optionChangedListenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
-            canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock);
+            canvasElement.addEventListener(gsEventNames.dateRangeFilterChanged, filterChangedListenerMock);
+            canvasElement.addEventListener(gsEventNames.dateRangeOptionChanged, optionChangedListenerMock);
         });
 
         await step('Expect last 6 months to be selected', async () => {

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

@@ -5,6 +5,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { DateRangeFilter, type DateRangeFilterProps } from '../../preact/dateRangeFilter/date-range-filter';
 import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeFilter/dateRangeOption';
+import { type gsEventNames } from '../../utils/gsEventNames';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -143,8 +144,8 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 

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

@@ -9,6 +9,7 @@ import '../gs-app';
 import './gs-lineage-filter';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
 import { type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
@@ -25,7 +26,7 @@ const meta: Meta<Required<LineageFilterProps>> = {
     component: 'gs-lineage-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-lineage-filter-changed', ...previewHandles],
+            handles: [gsEventNames.lineageFilterChanged, ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -182,7 +183,7 @@ export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
         const inputField = () => canvas.getByPlaceholderText('Enter a lineage');
         const listenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-lineage-filter-changed', listenerMock);
+            canvasElement.addEventListener(gsEventNames.lineageFilterChanged, listenerMock);
         });
 
         await step('wait until data is loaded', async () => {

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

@@ -3,6 +3,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type LineageFilterChangedEvent } from '../../preact/lineageFilter/LineageFilterChangedEvent';
 import { LineageFilter, type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
+import { type gsEventNames } from '../../utils/gsEventNames';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -91,7 +92,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
     }
 }
 

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

@@ -10,6 +10,7 @@ import '../gs-app';
 import './gs-location-filter';
 import data from '../../preact/locationFilter/__mockData__/aggregated.json';
 import { type LocationFilterProps } from '../../preact/locationFilter/location-filter';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
@@ -26,7 +27,7 @@ const meta: Meta = {
     component: 'gs-location-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-location-changed', ...previewHandles],
+            handles: [gsEventNames.locationChanged, ...previewHandles],
         },
         componentDocs: {
             opensShadowDom: true,
@@ -189,7 +190,7 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
 
         const listenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-location-changed', listenerMock);
+            canvasElement.addEventListener(gsEventNames.locationChanged, listenerMock);
         });
 
         await step('wait until data is loaded', async () => {

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

@@ -3,6 +3,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type LocationChangedEvent } from '../../preact/locationFilter/LocationChangedEvent';
 import { LocationFilter, type LocationFilterProps } from '../../preact/locationFilter/location-filter';
+import { type gsEventNames } from '../../utils/gsEventNames';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -95,7 +96,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 

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

@@ -7,6 +7,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL, REFERENCE_GENOME_ENDPOINT } from '../../constants';
 import '../gs-app';
 import { type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 import './gs-mutation-filter';
 
@@ -21,7 +22,7 @@ const meta: Meta<MutationFilterProps> = {
     component: 'gs-mutation-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-mutation-filter-changed', ...previewHandles],
+            handles: [gsEventNames.mutationFilterChanged, ...previewHandles],
         },
         fetchMock: {},
         componentDocs: {
@@ -73,7 +74,7 @@ export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
         const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
         const listenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock);
+            canvasElement.addEventListener(gsEventNames.mutationFilterChanged, listenerMock);
         });
 
         await step('wait until data is loaded', async () => {

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

@@ -4,6 +4,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 import { ReferenceGenomesAwaiter } from '../../preact/components/ReferenceGenomesAwaiter';
 import { MutationFilter, type MutationFilterProps } from '../../preact/mutationFilter/mutation-filter';
 import type { MutationsFilter } from '../../types';
+import { type gsEventNames } from '../../utils/gsEventNames';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -95,7 +96,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        [gsEventNames.mutationFilterChanged]: CustomEvent<MutationsFilter>;
     }
 }
 

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

@@ -1,4 +1,4 @@
-import { expect, fireEvent, fn, userEvent, waitFor } from '@storybook/test';
+import { expect, fn, userEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
@@ -9,6 +9,7 @@ import '../gs-app';
 import './gs-text-filter';
 import data from '../../preact/textFilter/__mockData__/aggregated_hosts.json';
 import type { TextFilterProps } from '../../preact/textFilter/text-filter';
+import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
@@ -25,7 +26,7 @@ const meta: Meta<Required<TextFilterProps>> = {
     component: 'gs-text-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-text-filter-changed', ...previewHandles],
+            handles: [gsEventNames.textFilterChanged, ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -114,7 +115,7 @@ export const FiresEvents: StoryObj<Required<TextFilterProps>> = {
         const inputField = () => canvas.getByPlaceholderText('Enter host name');
         const listenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-text-filter-changed', listenerMock);
+            canvasElement.addEventListener(gsEventNames.textFilterChanged, listenerMock);
         });
 
         await step('wait until data is loaded', async () => {
@@ -152,9 +153,9 @@ export const FiresEvents: StoryObj<Required<TextFilterProps>> = {
         });
 
         await step('Remove initial value', async () => {
-            await fireEvent.click(canvas.getByRole('button', { name: 'clear selection' }));
+            await userEvent.click(canvas.getByRole('button', { name: 'clear selection' }));
 
-            await expect(listenerMock).toHaveBeenCalledWith(
+            await expect(listenerMock).toHaveBeenLastCalledWith(
                 expect.objectContaining({
                     detail: {
                         host: undefined,
@@ -162,13 +163,6 @@ export const FiresEvents: StoryObj<Required<TextFilterProps>> = {
                 }),
             );
         });
-
-        await step('Empty input', async () => {
-            inputField().blur();
-            await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
-                host: undefined,
-            });
-        });
     },
     args: {
         ...Default.args,

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

@@ -3,6 +3,7 @@ import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
 import { type TextFilterChangedEvent } from '../../preact/textFilter/TextFilterChangedEvent';
 import { TextFilter, type TextFilterProps } from '../../preact/textFilter/text-filter';
+import { type gsEventNames } from '../../utils/gsEventNames';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -85,7 +86,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-text-filter-changed': TextFilterChangedEvent;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 

package/src/web-components/visualization/gs-genome-data-viewer.spec-d.ts

@@ -0,0 +1,18 @@
+import { describe, expectTypeOf, test } from 'vitest';
+
+import { GenomeDataViewerComponent } from './gs-genome-data-viewer';
+import type { GenomeDataViewerProps } from '../../preact/genomeViewer/genome-data-viewer';
+
+describe('gs-app types', () => {
+    test('mutationAnnotations type should match', ({}) => {
+        expectTypeOf(GenomeDataViewerComponent.prototype)
+            .toHaveProperty('gff3Source')
+            .toEqualTypeOf<GenomeDataViewerProps['gff3Source']>();
+        expectTypeOf(GenomeDataViewerComponent.prototype)
+            .toHaveProperty('genomeLength')
+            .toEqualTypeOf<GenomeDataViewerProps['genomeLength']>();
+        expectTypeOf(GenomeDataViewerComponent.prototype)
+            .toHaveProperty('width')
+            .toEqualTypeOf<GenomeDataViewerProps['width']>();
+    });
+});