@genspectrum/dashboard-components 0.14.2 → 0.16.0

package/src/preact/{map → sequencesByLocation}/sequences-by-location-map.tsx

@@ -6,6 +6,7 @@ import { useEffect, useRef } from 'preact/hooks';
 import type { EnhancedGeoJsonFeatureProperties } from '../../query/computeMapLocationData';
 import { InfoHeadline1, InfoParagraph } from '../components/info';
 import { Modal, useModalRef } from '../components/modal';
+import { AspectRatio } from '../shared/aspectRatio/AspectRatio';
 import { formatProportion } from '../shared/table/formatProportion';
 
 type SequencesByLocationMapProps = {
@@ -20,6 +21,7 @@ type SequencesByLocationMapProps = {
     offsetX: number;
     offsetY: number;
     hasTableView: boolean;
+    maintainAspectRatio: boolean;
 };
 
 export const SequencesByLocationMap: FunctionComponent<SequencesByLocationMapProps> = ({
@@ -34,6 +36,7 @@ export const SequencesByLocationMap: FunctionComponent<SequencesByLocationMapPro
     offsetX,
     offsetY,
     hasTableView,
+    maintainAspectRatio,
 }) => {
     const ref = useRef<HTMLDivElement>(null);
 
@@ -69,8 +72,8 @@ export const SequencesByLocationMap: FunctionComponent<SequencesByLocationMapPro
     }, [ref, locations, enableMapNavigation, lapisLocationField, zoom, offsetX, offsetY]);
 
     return (
-        <div className='h-full'>
-            <div ref={ref} className='h-full' />
+        <AspectRatio aspectRatio={maintainAspectRatio ? 50 : undefined}>
+            <div className='h-full' ref={ref} />
             <div className='relative'>
                 <DataMatchInformation
                     totalCount={totalCount}
@@ -80,7 +83,7 @@ export const SequencesByLocationMap: FunctionComponent<SequencesByLocationMapPro
                     hasTableView={hasTableView}
                 />
             </div>
-        </div>
+        </AspectRatio>
     );
 };
 

package/src/preact/{map → sequencesByLocation}/sequences-by-location-table.tsx

@@ -32,7 +32,7 @@ export const SequencesByLocationTable: FunctionComponent<SequencesByLocationTabl
             sort: true,
             formatter: (cell: number) => formatProportion(cell),
         },
-        ...('isShownOnMap' in tableData[0]
+        ...(tableData.length > 0 && 'isShownOnMap' in tableData[0]
             ? [{ id: 'isShownOnMap', name: 'shown on map', sort: true, width: '20%' }]
             : []),
     ];

package/src/preact/{map → sequencesByLocation}/sequences-by-location.stories.tsx

@@ -1,4 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
 
 import worldAtlas from './__mockData__/worldAtlas.json';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
@@ -13,6 +14,21 @@ import './leafletStyleModifications.css';
 const meta: Meta<SequencesByLocationProps> = {
     title: 'Visualization/SequencesByLocation',
     component: SequencesByLocation,
+    argTypes: {
+        lapisFilter: { control: 'object' },
+        lapisLocationField: { control: { type: 'text' } },
+        enableMapNavigation: { control: { type: 'boolean' } },
+        width: { control: { type: 'text' } },
+        height: { control: { type: 'text' } },
+        views: {
+            options: ['map', 'table'],
+            control: { type: 'check' },
+        },
+        zoom: { control: { type: 'number' } },
+        offsetX: { control: { type: 'number' } },
+        offsetY: { control: { type: 'number' } },
+        pageSize: { control: 'object' },
+    },
 };
 
 export default meta;
@@ -51,7 +67,6 @@ export const Default: StoryObj<SequencesByLocationProps> = {
         },
         enableMapNavigation: false,
         width: '1100px',
-        height: '800px',
         views: ['map', 'table'],
         zoom: 2,
         offsetX: 0,
@@ -77,6 +92,48 @@ export const Default: StoryObj<SequencesByLocationProps> = {
     },
 };
 
+export const NoData: StoryObj<SequencesByLocationProps> = {
+    ...Default,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'worldMap',
+                        url: worldMapUrl,
+                    },
+                    response: {
+                        status: 200,
+                        body: worldAtlas,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'aggregatedData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['country'],
+                            dateFrom: '2022-01-01',
+                            dateTo: '2022-04-01',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: { data: [] },
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(async () => {
+            await expect(canvas.getByText('No data available.')).toBeVisible();
+        });
+    },
+};
+
 export const InvalidTopoJsonTopology: StoryObj<SequencesByLocationProps> = {
     ...Default,
     parameters: {

package/src/preact/{map → sequencesByLocation}/sequences-by-location.tsx

@@ -20,7 +20,9 @@ import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
 import { mapSourceSchema } from './loadMapSource';
 import { lapisFilterSchema, views } from '../../types';
+import { NoDataDisplay } from '../components/no-data-display';
 import Tabs from '../components/tabs';
+import { getMaintainAspectRatio } from '../shared/charts/getMaintainAspectRatio';
 
 export const sequencesByLocationViewSchema = z.union([z.literal(views.map), z.literal(views.table)]);
 export type SequencesByLocationMapView = z.infer<typeof sequencesByLocationViewSchema>;
@@ -31,7 +33,7 @@ const sequencesByLocationPropsSchema = z.object({
     mapSource: mapSourceSchema.optional(),
     enableMapNavigation: z.boolean(),
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     views: z.array(sequencesByLocationViewSchema),
     zoom: z.number(),
     offsetX: z.number(),
@@ -75,6 +77,10 @@ const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationProps> =
         throw error;
     }
 
+    if (data.tableData.length === 0) {
+        return <NoDataDisplay />;
+    }
+
     return <SequencesByLocationMapTabs data={data} originalComponentProps={props} />;
 };
 
@@ -87,6 +93,8 @@ const SequencesByLocationMapTabs: FunctionComponent<SequencesByLocationMapTabsPr
     originalComponentProps,
     data,
 }) => {
+    const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
+
     const getTab = (view: SequencesByLocationMapView) => {
         switch (view) {
             case views.map: {
@@ -105,6 +113,7 @@ const SequencesByLocationMapTabs: FunctionComponent<SequencesByLocationMapTabsPr
                             offsetX={originalComponentProps.offsetX}
                             offsetY={originalComponentProps.offsetY}
                             hasTableView={originalComponentProps.views.includes(views.table)}
+                            maintainAspectRatio={maintainAspectRatio}
                         />
                     ),
                 };

package/src/preact/shared/aspectRatio/AspectRatio.tsx

@@ -0,0 +1,13 @@
+import { type PropsWithChildren } from 'react';
+
+export function AspectRatio({ children, aspectRatio }: PropsWithChildren<{ aspectRatio?: number }>) {
+    if (aspectRatio === undefined) {
+        return children;
+    }
+
+    return (
+        <div class={`w-full relative`} style={{ paddingTop: `${aspectRatio}%` }}>
+            <div className='absolute inset-0'>{children}</div>
+        </div>
+    );
+}

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

@@ -0,0 +1,3 @@
+export function getMaintainAspectRatio(height: string | undefined) {
+    return height === undefined || height === '';
+}

package/src/preact/statistic/statistics.stories.tsx

@@ -68,7 +68,6 @@ export const Default: StoryObj<StatisticsProps> = {
             division: 'Alabama',
         },
         width: '100%',
-        height: '100%',
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);

package/src/preact/statistic/statistics.tsx

@@ -13,7 +13,7 @@ import { useQuery } from '../useQuery';
 
 const statisticsPropsSchema = z.object({
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     numeratorFilter: lapisFilterSchema,
     denominatorFilter: lapisFilterSchema,
 });
@@ -62,17 +62,17 @@ type MetricDataTabsProps = {
 const MetricDataTabs: FunctionComponent<MetricDataTabsProps> = ({ data }) => {
     const { count, proportion } = data;
     return (
-        <div className='flex flex-col sm:flex-row rounded-md border-2 border-gray-100'>
+        <div className='flex flex-col sm:flex-row rounded-md border-2 border-gray-100 min-w-[180px]'>
             <div className='stat'>
                 <div className='stat-title'>Sequences</div>
                 <div className='stat-value text-2xl sm:text-4xl'>{count.toLocaleString('en-us')}</div>
-                <div className='stat-desc'>The total number of sequenced samples</div>
+                <div className='stat-desc text-wrap'>The total number of sequenced samples</div>
             </div>
 
             <div className='stat'>
                 <div className='stat-title'>Overall proportion</div>
                 <div className='stat-value text-2xl sm:text-4xl'>{formatProportion(proportion)}</div>
-                <div className='stat-desc'>The proportion among all sequenced samples</div>
+                <div className='stat-desc text-wrap'>The proportion among all sequenced samples</div>
             </div>
         </div>
     );

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

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

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

@@ -2,18 +2,18 @@ import { type Meta, type StoryObj } from '@storybook/preact';
 import { expect, fireEvent, fn, waitFor, within } from '@storybook/test';
 
 import data from './__mockData__/aggregated_hosts.json';
-import { TextInput, type TextInputProps } from './text-input';
+import { TextFilter, type TextFilterProps } from './text-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
-const meta: Meta<TextInputProps> = {
-    title: 'Input/TextInput',
-    component: TextInput,
+const meta: Meta<TextFilterProps> = {
+    title: 'Input/TextFilter',
+    component: TextFilter,
     parameters: {
         actions: {
-            handles: ['gs-text-input-changed', ...previewHandles],
+            handles: ['gs-text-filter-changed', ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -65,10 +65,10 @@ const meta: Meta<TextInputProps> = {
 
 export default meta;
 
-export const Default: StoryObj<TextInputProps> = {
+export const Default: StoryObj<TextFilterProps> = {
     render: (args) => (
         <LapisUrlContextProvider value={LAPIS_URL}>
-            <TextInput {...args} />
+            <TextFilter {...args} />
         </LapisUrlContextProvider>
     ),
     args: {
@@ -82,7 +82,7 @@ export const Default: StoryObj<TextInputProps> = {
     },
 };
 
-export const RemoveInitialValue: StoryObj<TextInputProps> = {
+export const RemoveInitialValue: StoryObj<TextFilterProps> = {
     ...Default,
     args: {
         ...Default.args,
@@ -93,7 +93,7 @@ export const RemoveInitialValue: StoryObj<TextInputProps> = {
 
         const changedListenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-text-input-changed', changedListenerMock);
+            canvasElement.addEventListener('gs-text-filter-changed', changedListenerMock);
         });
 
         await waitFor(async () => {
@@ -115,7 +115,7 @@ export const RemoveInitialValue: StoryObj<TextInputProps> = {
     },
 };
 
-export const WithNoLapisField: StoryObj<TextInputProps> = {
+export const WithNoLapisField: StoryObj<TextFilterProps> = {
     ...Default,
     args: {
         ...Default.args,

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

@@ -2,7 +2,7 @@ import { type FunctionComponent } from 'preact';
 import z from 'zod';
 
 import { useLapisUrl } from '../LapisUrlContext';
-import { TextInputChangedEvent } from './TextInputChangedEvent';
+import { TextFilterChangedEvent } from './TextFilterChangedEvent';
 import { fetchStringAutocompleteList } from './fetchStringAutocompleteList';
 import { lapisFilterSchema } from '../../types';
 import { DownshiftCombobox } from '../components/downshift-combobox';
@@ -17,29 +17,29 @@ const textSelectorPropsSchema = z.object({
     placeholderText: z.string().optional(),
     value: z.string().optional(),
 });
-const textInputInnerPropsSchema = textSelectorPropsSchema.extend({ lapisFilter: lapisFilterSchema });
-const textInputPropsSchema = textInputInnerPropsSchema.extend({
+const textFilterInnerPropsSchema = textSelectorPropsSchema.extend({ lapisFilter: lapisFilterSchema });
+const textFilterPropsSchema = textFilterInnerPropsSchema.extend({
     width: z.string(),
 });
 
-export type TextInputInnerProps = z.infer<typeof textInputInnerPropsSchema>;
-export type TextInputProps = z.infer<typeof textInputPropsSchema>;
+export type TextFilterInnerProps = z.infer<typeof textFilterInnerPropsSchema>;
+export type TextFilterProps = z.infer<typeof textFilterPropsSchema>;
 type TextSelectorProps = z.infer<typeof textSelectorPropsSchema>;
 
-export const TextInput: FunctionComponent<TextInputProps> = (props) => {
+export const TextFilter: FunctionComponent<TextFilterProps> = (props) => {
     const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={textInputPropsSchema}>
+        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={textFilterPropsSchema}>
             <ResizeContainer size={size}>
-                <TextInputInner {...innerProps} />
+                <TextFilterInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-const TextInputInner: FunctionComponent<TextInputInnerProps> = ({
+const TextFilterInner: FunctionComponent<TextFilterInnerProps> = ({
     value,
     lapisField,
     placeholderText,
@@ -88,7 +88,7 @@ const TextSelector = ({
             value={initialSelectedItem}
             filterItemsByInputValue={filterByInputValue}
             createEvent={(item: SelectItem | null) =>
-                new TextInputChangedEvent({ [lapisField]: item?.value ?? undefined })
+                new TextFilterChangedEvent({ [lapisField]: item?.value ?? undefined })
             }
             itemToString={(item: SelectItem | undefined | null) => item?.value ?? ''}
             placeholderText={placeholderText}

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

@@ -40,7 +40,6 @@ export const Default: StoryObj<WastewaterMutationsOverTimeProps> = {
     ...Template,
     args: {
         width: '100%',
-        height: '700px',
         lapisFilter: {},
         sequenceType: 'nucleotide',
         maxNumberOfGridRows: 100,

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

@@ -22,7 +22,7 @@ const wastewaterMutationOverTimeSchema = z.object({
     lapisFilter: lapisFilterSchema,
     sequenceType: sequenceTypeSchema,
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     maxNumberOfGridRows: z.number(),
 });
 

package/src/query/computeMapLocationData.spec.ts

@@ -2,7 +2,7 @@ import type { FeatureCollection, GeometryObject } from 'geojson';
 import { describe, expect, test } from 'vitest';
 
 import { computeMapLocationData } from './computeMapLocationData';
-import type { GeoJsonFeatureProperties } from '../preact/map/loadMapSource';
+import type { GeoJsonFeatureProperties } from '../preact/sequencesByLocation/loadMapSource';
 
 const lapisLocationField = 'locationField';
 

package/src/query/computeMapLocationData.ts

@@ -1,7 +1,7 @@
 import type { Feature, FeatureCollection, GeometryObject } from 'geojson';
 
 import type { AggregateData } from './queryAggregateData';
-import type { GeoJsonFeatureProperties } from '../preact/map/loadMapSource';
+import type { GeoJsonFeatureProperties } from '../preact/sequencesByLocation/loadMapSource';
 
 export type FeatureData = { proportion: number; count: number };
 

package/src/query/querySequencesByLocationData.ts

@@ -1,6 +1,6 @@
 import { computeMapLocationData } from './computeMapLocationData';
 import { queryAggregateData } from './queryAggregateData';
-import { loadMapSource, type MapSource } from '../preact/map/loadMapSource';
+import { loadMapSource, type MapSource } from '../preact/sequencesByLocation/loadMapSource';
 import type { LapisFilter } from '../types';
 
 export async function querySequencesByLocationData(

package/src/utilEntrypoint.ts

@@ -3,7 +3,7 @@ export {
     type DateRangeSelectOption,
     dateRangeOptionPresets,
     DateRangeOptionChangedEvent,
-} from './preact/dateRangeSelector/dateRangeOption';
+} from './preact/dateRangeFilter/dateRangeOption';
 
 export {
     type NamedLapisFilter,
@@ -27,7 +27,7 @@ export type {
     RelativeGrowthAdvantageProps,
 } from './preact/relativeGrowthAdvantage/relative-growth-advantage';
 export type { StatisticsProps } from './preact/statistic/statistics';
-export type { MapSource } from './preact/map/loadMapSource';
+export type { MapSource } from './preact/sequencesByLocation/loadMapSource';
 
 export type { ConfidenceIntervalMethod } from './preact/shared/charts/confideceInterval';
 
@@ -35,4 +35,4 @@ export type { AxisMax, YAxisMaxConfig } from './preact/shared/charts/getYAxisMax
 
 export { LocationChangedEvent } from './preact/locationFilter/LocationChangedEvent';
 export { LineageFilterChangedEvent } from './preact/lineageFilter/LineageFilterChangedEvent';
-export { TextInputChangedEvent } from './preact/textInput/TextInputChangedEvent';
+export { TextFilterChangedEvent } from './preact/textFilter/TextFilterChangedEvent';

package/src/web-components/ResizeContainer.mdx

@@ -5,7 +5,10 @@ import { Meta } from '@storybook/blocks';
 # Size of components
 
 All visualization and input components can be provided with a width prop (or height, when applicable) to control the size of the component.
-If not provided, the default width or height is used. In most cases, the default is a width of '100%' of its parent container and a predefined height.
+If the width is not provided, the default is used. In most cases, the default is a width of '100%' of its parent container.
+If the height is not set, the component takes up as much space as needed in the vertical direction.
+For table views, this includes showing the complete table.
+For diagrams, a fixed aspect ratio of 2:1 (width/height) is used.
 
 Both width and height can be set using the css units (e.g. 'px', 'em', 'rem', '%', 'vh', 'vw', etc.).
 By using '%', the size of the component can be controlled by the parent component.

package/src/web-components/input/{gs-date-range-selector.stories.ts → gs-date-range-filter.stories.ts}

@@ -5,27 +5,27 @@ 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';
+import { type DateRangeFilterProps } from '../../preact/dateRangeFilter/date-range-filter';
+import './gs-date-range-filter';
 import '../gs-app';
-import { toYYYYMMDD } from '../../preact/dateRangeSelector/dateConversion';
-import { dateRangeOptionPresets } from '../../preact/dateRangeSelector/dateRangeOption';
+import { toYYYYMMDD } from '../../preact/dateRangeFilter/dateConversion';
+import { dateRangeOptionPresets } from '../../preact/dateRangeFilter/dateRangeOption';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
-<gs-date-range-selector
+<gs-date-range-filter
     dateRangeOptions='[{ "label": "Year 2021", "dateFrom": "2021-01-01", "dateTo": "2021-12-31" }]'
     earliestDate="1970-01-01"
     value="Year 2021"
     width="100%"
     lapisDateField="myDateColumn"
-></gs-date-range-selector>`;
+></gs-date-range-filter>`;
 
 const customDateRange = { label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' };
 
-const meta: Meta<Required<DateRangeSelectorProps>> = {
-    title: 'Input/DateRangeSelector',
-    component: 'gs-date-range-selector',
+const meta: Meta<Required<DateRangeFilterProps>> = {
+    title: 'Input/DateRangeFilter',
+    component: 'gs-date-range-filter',
     parameters: withComponentDocs({
         actions: {
             handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles],
@@ -65,6 +65,7 @@ const meta: Meta<Required<DateRangeSelectorProps>> = {
             dateRangeOptionPresets.lastMonth,
             dateRangeOptionPresets.last3Months,
             dateRangeOptionPresets.allTimes,
+            { label: '2021', dateFrom: '2021-01-01', dateTo: '2021-12-31' },
             customDateRange,
         ],
         earliestDate: '1970-01-01',
@@ -77,25 +78,69 @@ const meta: Meta<Required<DateRangeSelectorProps>> = {
 
 export default meta;
 
-export const Default: StoryObj<Required<DateRangeSelectorProps>> = {
+export const Default: StoryObj<Required<DateRangeFilterProps>> = {
     render: (args) =>
         html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
-                <gs-date-range-selector
+                <gs-date-range-filter
                     .dateRangeOptions=${args.dateRangeOptions}
                     .earliestDate=${args.earliestDate}
                     .value=${args.value}
                     .width=${args.width}
                     .lapisDateField=${args.lapisDateField}
-                ></gs-date-range-selector>
+                ></gs-date-range-filter>
             </div>
         </gs-app>`,
 };
 
-export const FiresEvents: StoryObj<Required<DateRangeSelectorProps>> = {
+export const TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression: StoryObj<Required<DateRangeFilterProps>> = {
+    render: (args) =>
+        html` <gs-app lapis="${LAPIS_URL}">
+            <div class="max-w-screen-lg">
+                <gs-date-range-filter
+                    .dateRangeOptions=${args.dateRangeOptions}
+                    earliestDate="${args.earliestDate}"
+                    value="${args.value}"
+                    width="${args.width}"
+                    lapisDateField="${args.lapisDateField}"
+                ></gs-date-range-filter>
+            </div>
+        </gs-app>`,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter');
+
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('Last month');
+        });
+    },
+    argTypes: {
+        value: {
+            control: {
+                type: 'text',
+            },
+        },
+    },
+};
+
+export const TestSettingANumericValueIsTreatedAsString: StoryObj<Required<DateRangeFilterProps>> = {
+    ...TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression,
+    args: {
+        ...TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression.args,
+        value: '2021',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter');
+
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('2021');
+        });
+    },
+};
+
+export const FiresEvents: StoryObj<Required<DateRangeFilterProps>> = {
     ...Default,
     play: async ({ canvasElement, step }) => {
-        const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector');
+        const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter');
 
         const filterChangedListenerMock = fn();
         const optionChangedListenerMock = fn();