@genspectrum/dashboard-components 1.13.0 → 1.14.0

package/src/preact/queriesOverTime/queries-over-time.tsx

@@ -0,0 +1,304 @@
+import { type FunctionComponent } from 'preact';
+import { type Dispatch, type StateUpdater, useMemo, useState, useEffect, useLayoutEffect, useRef } from 'preact/hooks';
+import z from 'zod';
+
+import { getFilteredQueryOverTimeData, type QueryFilter } from './getFilteredQueriesOverTimeData';
+import { QueriesOverTimeFilter } from './queries-over-time-filter';
+import { QueriesOverTimeGridTooltip } from './queries-over-time-grid-tooltip';
+import { type ProportionValue, getProportion } from '../../query/queryMutationsOverTime';
+import { queryQueriesOverTimeData } from '../../query/queryQueriesOverTime';
+import { lapisFilterSchema, temporalGranularitySchema, views } from '../../types';
+import { type Temporal, toTemporalClass } from '../../utils/temporalClass';
+import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinishedLoadingEvent';
+import { useLapisUrl } from '../LapisUrlContext';
+import { type ColorScale } from '../components/color-scale-selector';
+import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-dropdown';
+import { CsvDownloadButton } from '../components/csv-download-button';
+import { ErrorBoundary } from '../components/error-boundary';
+import FeaturesOverTimeGrid, { type FeatureRenderer, customColumnSchema } from '../components/features-over-time-grid';
+import { Fullscreen } from '../components/fullscreen';
+import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
+import { LoadingDisplay } from '../components/loading-display';
+import { NoDataDisplay } from '../components/no-data-display';
+import type { ProportionInterval } from '../components/proportion-selector';
+import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
+import { ResizeContainer } from '../components/resize-container';
+import Tabs from '../components/tabs';
+import { pageSizesSchema } from '../shared/tanstackTable/pagination';
+import { PageSizeContextProvider } from '../shared/tanstackTable/pagination-context';
+import { useQuery } from '../useQuery';
+
+const queriesOverTimeViewSchema = z.literal(views.grid);
+export type QueriesOverTimeView = z.infer<typeof queriesOverTimeViewSchema>;
+
+const meanProportionIntervalSchema = z.object({
+    min: z.number().min(0).max(1),
+    max: z.number().min(0).max(1),
+});
+export type MeanProportionInterval = z.infer<typeof meanProportionIntervalSchema>;
+
+const queriesOverTimeSchema = z.object({
+    lapisFilter: lapisFilterSchema,
+    queries: z
+        .array(
+            z.object({
+                displayLabel: z.string(),
+                countQuery: z.string(),
+                coverageQuery: z.string(),
+            }),
+        )
+        .min(1),
+    views: z.array(queriesOverTimeViewSchema),
+    granularity: temporalGranularitySchema,
+    lapisDateField: z.string().min(1),
+    initialMeanProportionInterval: meanProportionIntervalSchema,
+    hideGaps: z.boolean().optional(),
+    width: z.string(),
+    height: z.string().optional(),
+    pageSizes: pageSizesSchema,
+    customColumns: z.array(customColumnSchema).optional(),
+});
+export type QueriesOverTimeProps = z.infer<typeof queriesOverTimeSchema>;
+
+export const QueriesOverTime: FunctionComponent<QueriesOverTimeProps> = (componentProps) => {
+    const { width, height } = componentProps;
+    const size = { height, width };
+
+    return (
+        <ErrorBoundary size={size} schema={queriesOverTimeSchema} componentProps={componentProps}>
+            <ResizeContainer size={size}>
+                <QueriesOverTimeInner {...componentProps} />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const QueriesOverTimeInner: FunctionComponent<QueriesOverTimeProps> = ({ ...componentProps }) => {
+    const lapis = useLapisUrl();
+    const { lapisFilter, queries, granularity, lapisDateField } = componentProps;
+
+    const { data, error, isLoading } = useQuery(
+        () => queryQueriesOverTimeData(lapisFilter, queries, lapis, lapisDateField, granularity),
+        [granularity, lapis, lapisDateField, lapisFilter, queries],
+    );
+
+    if (isLoading) {
+        return <LoadingDisplay />;
+    }
+
+    if (error !== null) {
+        throw error;
+    }
+
+    const { queryOverTimeData } = data;
+
+    // Check if there's any data
+    if (queryOverTimeData.keysFirstAxis.size === 0) {
+        return <NoDataDisplay />;
+    }
+
+    return <QueriesOverTimeTabs queryOverTimeData={queryOverTimeData} originalComponentProps={componentProps} />;
+};
+
+type QueriesOverTimeTabsProps = {
+    queryOverTimeData: Awaited<ReturnType<typeof queryQueriesOverTimeData>>['queryOverTimeData'];
+    originalComponentProps: QueriesOverTimeProps;
+};
+
+const QueriesOverTimeTabs: FunctionComponent<QueriesOverTimeTabsProps> = ({
+    queryOverTimeData,
+    originalComponentProps,
+}) => {
+    const tabsRef = useDispatchFinishedLoadingEvent();
+    const tooltipPortalTargetRef = useRef<HTMLDivElement>(null);
+    const [tooltipPortalTarget, setTooltipPortalTarget] = useState<HTMLDivElement | null>(null);
+
+    useLayoutEffect(() => {
+        setTooltipPortalTarget(tooltipPortalTargetRef.current);
+    }, []);
+
+    const [queryFilterValue, setQueryFilterValue] = useState<QueryFilter>({
+        textFilter: '',
+    });
+
+    const [proportionInterval, setProportionInterval] = useState(originalComponentProps.initialMeanProportionInterval);
+    const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
+    const [hideGaps, setHideGaps] = useState<boolean>(originalComponentProps.hideGaps ?? false);
+
+    useEffect(() => setHideGaps(originalComponentProps.hideGaps ?? false), [originalComponentProps.hideGaps]);
+
+    const filteredData = useMemo(() => {
+        return getFilteredQueryOverTimeData({
+            data: queryOverTimeData,
+            proportionInterval,
+            hideGaps,
+            queryFilterValue,
+        });
+    }, [queryOverTimeData, proportionInterval, hideGaps, queryFilterValue]);
+
+    const queryRenderer = useMemo<FeatureRenderer<string>>(
+        () => ({
+            asString: (value: string) => value,
+            renderRowLabel: (value: string) => (
+                <div className='text-center'>
+                    <span>{value}</span>
+                </div>
+            ),
+            renderTooltip: (value: string, temporal: Temporal, proportionValue: ProportionValue) => (
+                <QueriesOverTimeGridTooltip query={value} date={temporal} value={proportionValue} />
+            ),
+        }),
+        [],
+    );
+
+    const getTab = (view: QueriesOverTimeView) => {
+        switch (view) {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- for extensibility
+            case 'grid':
+                return {
+                    title: 'Grid',
+                    content: (
+                        <FeaturesOverTimeGrid
+                            rowLabelHeader='Query'
+                            data={filteredData}
+                            colorScale={colorScale}
+                            pageSizes={originalComponentProps.pageSizes}
+                            customColumns={originalComponentProps.customColumns}
+                            featureRenderer={queryRenderer}
+                            tooltipPortalTarget={tooltipPortalTarget}
+                        />
+                    ),
+                };
+        }
+    };
+
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
+
+    const toolbar = (activeTab: string) => (
+        <Toolbar
+            activeTab={activeTab}
+            proportionInterval={proportionInterval}
+            setProportionInterval={setProportionInterval}
+            hideGaps={hideGaps}
+            setHideGaps={setHideGaps}
+            filteredData={filteredData}
+            colorScale={colorScale}
+            setColorScale={setColorScale}
+            originalComponentProps={originalComponentProps}
+            setFilterValue={setQueryFilterValue}
+            queryFilterValue={queryFilterValue}
+        />
+    );
+
+    return (
+        <div ref={tooltipPortalTargetRef}>
+            <PageSizeContextProvider pageSizes={originalComponentProps.pageSizes}>
+                <Tabs ref={tabsRef} tabs={tabs} toolbar={toolbar} />
+            </PageSizeContextProvider>
+        </div>
+    );
+};
+
+type ToolbarProps = {
+    activeTab: string;
+    proportionInterval: ProportionInterval;
+    setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
+    hideGaps: boolean;
+    setHideGaps: Dispatch<StateUpdater<boolean>>;
+    filteredData: ReturnType<typeof getFilteredQueryOverTimeData>;
+    colorScale: ColorScale;
+    setColorScale: Dispatch<StateUpdater<ColorScale>>;
+    originalComponentProps: QueriesOverTimeProps;
+    queryFilterValue: QueryFilter;
+    setFilterValue: Dispatch<StateUpdater<QueryFilter>>;
+};
+
+const Toolbar: FunctionComponent<ToolbarProps> = ({
+    activeTab,
+    proportionInterval,
+    setProportionInterval,
+    hideGaps,
+    setHideGaps,
+    filteredData,
+    colorScale,
+    setColorScale,
+    originalComponentProps,
+    setFilterValue,
+    queryFilterValue,
+}) => {
+    return (
+        <>
+            <QueriesOverTimeFilter setFilterValue={setFilterValue} value={queryFilterValue} />
+            <ProportionSelectorDropdown
+                proportionInterval={proportionInterval}
+                setMinProportion={(min) => setProportionInterval((prev) => ({ ...prev, min }))}
+                setMaxProportion={(max) => setProportionInterval((prev) => ({ ...prev, max }))}
+                labelPrefix='Mean proportion'
+            />
+            <button
+                className='btn btn-xs w-24'
+                onClick={() => setHideGaps((s) => !s)}
+                title={
+                    hideGaps
+                        ? 'Date ranges that do not contain data are excluded from the table'
+                        : 'Exclude date ranges without data from the table'
+                }
+            >
+                {hideGaps ? 'Gaps hidden' : 'Hide gaps'}
+            </button>
+            {activeTab === 'Grid' && (
+                <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
+            )}
+            <CsvDownloadButton
+                className='btn btn-xs'
+                getData={() => getDownloadData(filteredData)}
+                filename='queries_over_time.csv'
+            />
+            <QueriesOverTimeInfo originalComponentProps={originalComponentProps} />
+            <Fullscreen />
+        </>
+    );
+};
+
+type QueriesOverTimeInfoProps = {
+    originalComponentProps: QueriesOverTimeProps;
+};
+
+const QueriesOverTimeInfo: FunctionComponent<QueriesOverTimeInfoProps> = ({ originalComponentProps }) => {
+    const lapis = useLapisUrl();
+    return (
+        <Info>
+            <InfoHeadline1>Queries over time</InfoHeadline1>
+            <InfoParagraph>
+                This component displays the proportions of custom queries per {originalComponentProps.granularity}. Each
+                query consists of a count query (what to count) and a coverage query (what to use as the denominator).
+                In the toolbar, you can filter queries by text and configure which queries are displayed by applying a
+                filter based on the mean proportion of the query's occurrence over the entire time range.
+            </InfoParagraph>
+            <InfoParagraph>
+                The grid cells have a tooltip that will show more detailed information. It shows the count of samples
+                that match the count query and the count of samples that match the coverage query in this timeframe. It
+                also shows the total count of samples in this timeframe.
+            </InfoParagraph>
+            <InfoComponentCode componentName='queries-over-time' params={originalComponentProps} lapisUrl={lapis} />
+        </Info>
+    );
+};
+
+function getDownloadData(filteredData: ReturnType<typeof getFilteredQueryOverTimeData>) {
+    const dates = filteredData.getSecondAxisKeys().map((date) => toTemporalClass(date));
+
+    return filteredData.getFirstAxisKeys().map((query) => {
+        return dates.reduce(
+            (accumulated, date) => {
+                const value = filteredData.get(query, date);
+                const proportion = getProportion(value ?? null) ?? '';
+                return {
+                    ...accumulated,
+                    [date.dateString]: proportion,
+                };
+            },
+            { query },
+        );
+    });
+}

package/src/utilEntrypoint.ts

@@ -24,6 +24,7 @@ export type {
     NumberSequencesOverTimeProps,
 } from './preact/numberSequencesOverTime/number-sequences-over-time';
 export type { PrevalenceOverTimeView, PrevalenceOverTimeProps } from './preact/prevalenceOverTime/prevalence-over-time';
+export type { QueriesOverTimeView, QueriesOverTimeProps } from './preact/queriesOverTime/queries-over-time';
 export type {
     RelativeGrowthAdvantageView,
     RelativeGrowthAdvantageProps,

package/src/web-components/visualization/gs-mutations-over-time.spec-d.ts

@@ -32,6 +32,9 @@ describe('gs-mutations-over-time', () => {
         expectTypeOf<typeof MutationsOverTimeComponent.prototype.initialMeanProportionInterval>().toEqualTypeOf<
             MutationsOverTimeProps['initialMeanProportionInterval']
         >();
+        expectTypeOf<typeof MutationsOverTimeComponent.prototype.hideGaps>().toEqualTypeOf<
+            MutationsOverTimeProps['hideGaps']
+        >();
         expectTypeOf<typeof MutationsOverTimeComponent.prototype.pageSizes>().toEqualTypeOf<
             MutationsOverTimeProps['pageSizes']
         >();

package/src/web-components/visualization/gs-mutations-over-time.tsx

@@ -120,7 +120,7 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
      * Can be switched with a button in the toolbar.
      */
     @property({ type: Boolean })
-    hideGaps: boolean = false;
+    hideGaps: boolean | undefined = false;
 
     /**
      * The number of rows per page, which can be selected by the user.

package/src/web-components/visualization/gs-queries-over-time.spec-d.ts

@@ -0,0 +1,38 @@
+import { describe, expectTypeOf, it } from 'vitest';
+
+import { type QueriesOverTimeComponent } from './gs-queries-over-time';
+import { type QueriesOverTimeProps } from '../../preact/queriesOverTime/queries-over-time';
+
+describe('gs-queries-over-time', () => {
+    it('types of preact and lit component should match', () => {
+        expectTypeOf<typeof QueriesOverTimeComponent.prototype.lapisFilter>().toEqualTypeOf<
+            QueriesOverTimeProps['lapisFilter']
+        >();
+        expectTypeOf<typeof QueriesOverTimeComponent.prototype.queries>().toEqualTypeOf<
+            QueriesOverTimeProps['queries']
+        >();
+        expectTypeOf<typeof QueriesOverTimeComponent.prototype.views>().toEqualTypeOf<QueriesOverTimeProps['views']>();
+        expectTypeOf<typeof QueriesOverTimeComponent.prototype.width>().toEqualTypeOf<QueriesOverTimeProps['width']>();
+        expectTypeOf<typeof QueriesOverTimeComponent.prototype.height>().toEqualTypeOf<
+            QueriesOverTimeProps['height']
+        >();
+        expectTypeOf<typeof QueriesOverTimeComponent.prototype.granularity>().toEqualTypeOf<
+            QueriesOverTimeProps['granularity']
+        >();
+        expectTypeOf<typeof QueriesOverTimeComponent.prototype.lapisDateField>().toEqualTypeOf<
+            QueriesOverTimeProps['lapisDateField']
+        >();
+        expectTypeOf<typeof QueriesOverTimeComponent.prototype.initialMeanProportionInterval>().toEqualTypeOf<
+            QueriesOverTimeProps['initialMeanProportionInterval']
+        >();
+        expectTypeOf<typeof QueriesOverTimeComponent.prototype.hideGaps>().toEqualTypeOf<
+            QueriesOverTimeProps['hideGaps']
+        >();
+        expectTypeOf<typeof QueriesOverTimeComponent.prototype.pageSizes>().toEqualTypeOf<
+            QueriesOverTimeProps['pageSizes']
+        >();
+        expectTypeOf<typeof QueriesOverTimeComponent.prototype.customColumns>().toEqualTypeOf<
+            QueriesOverTimeProps['customColumns']
+        >();
+    });
+});

package/src/web-components/visualization/gs-queries-over-time.stories.ts

@@ -0,0 +1,288 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './gs-queries-over-time';
+import '../gs-app';
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { LAPIS_URL } from '../../constants';
+import mockDefaultQueriesOverTime from '../../preact/queriesOverTime/__mockData__/defaultMockData/queriesOverTime.json';
+import mockWithGapsQueriesOverTime from '../../preact/queriesOverTime/__mockData__/withGaps.json';
+import { type QueriesOverTimeProps } from '../../preact/queriesOverTime/queries-over-time';
+
+const codeExample = String.raw`
+<gs-queries-over-time
+    lapisFilter='{ "pangoLineage": "JN.1*", "dateFrom": "2024-01-15", "dateTo": "2024-04-30" }'
+    queries='[
+        {
+            "displayLabel": "S:F456L (single mutation)",
+            "countQuery": "S:456L",
+            "coverageQuery": "!S:456N"
+        },
+        {
+            "displayLabel": "R346T + F456L (combination)",
+            "countQuery": "S:346T & S:456L",
+            "coverageQuery": "!S:346N & !S:456N"
+        }
+    ]'
+    views='["grid"]'
+    width='100%'
+    height='700px'
+    granularity="month"
+    lapisDateField="date"
+    pageSizes='[5,10]'
+></gs-queries-over-time>`;
+
+const meta: Meta<Required<QueriesOverTimeProps>> = {
+    title: 'Visualization/Queries over time',
+    component: 'gs-queries-over-time',
+    argTypes: {
+        lapisFilter: { control: 'object' },
+        queries: { control: 'object' },
+        views: {
+            options: ['grid'],
+            control: { type: 'check' },
+        },
+        width: { control: 'text' },
+        height: { control: 'text' },
+        granularity: {
+            options: ['day', 'week', 'month', 'year'],
+            control: { type: 'radio' },
+        },
+        lapisDateField: { control: 'text' },
+        initialMeanProportionInterval: { control: 'object' },
+        hideGaps: { control: 'boolean' },
+        pageSizes: { control: 'object' },
+        customColumns: { control: 'object' },
+    },
+    args: {
+        lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-04-30' },
+        queries: [
+            {
+                displayLabel: 'S:F456L (single mutation)',
+                countQuery: 'S:456L',
+                coverageQuery: '!S:456N',
+            },
+            {
+                displayLabel: 'R346T + F456L (combination)',
+                countQuery: 'S:346T & S:456L',
+                coverageQuery: '!S:346N & !S:456N',
+            },
+            {
+                displayLabel: 'C22916T or T22917G (nucleotide OR)',
+                countQuery: 'C22916T | T22917G',
+                coverageQuery: '!22916N & !22917N',
+            },
+        ],
+        views: ['grid'],
+        width: '100%',
+        granularity: 'month',
+        lapisDateField: 'date',
+        initialMeanProportionInterval: { min: 0, max: 1 },
+        hideGaps: false,
+        pageSizes: [10, 20, 30, 40, 50],
+    },
+    parameters: withComponentDocs({
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        url: `${LAPIS_URL}/component/queriesOverTime`,
+                        body: {
+                            filters: {
+                                pangoLineage: 'JN.1*',
+                                dateFrom: '2024-01-15',
+                                dateTo: '2024-04-30',
+                            },
+                            queries: [
+                                {
+                                    displayLabel: 'S:F456L (single mutation)',
+                                    countQuery: 'S:456L',
+                                    coverageQuery: '!S:456N',
+                                },
+                                {
+                                    displayLabel: 'R346T + F456L (combination)',
+                                    countQuery: 'S:346T & S:456L',
+                                    coverageQuery: '!S:346N & !S:456N',
+                                },
+                                {
+                                    displayLabel: 'C22916T or T22917G (nucleotide OR)',
+                                    countQuery: 'C22916T | T22917G',
+                                    coverageQuery: '!22916N & !22917N',
+                                },
+                            ],
+                            dateRanges: [
+                                { dateFrom: '2024-01-01', dateTo: '2024-01-31' },
+                                { dateFrom: '2024-02-01', dateTo: '2024-02-29' },
+                                { dateFrom: '2024-03-01', dateTo: '2024-03-31' },
+                                { dateFrom: '2024-04-01', dateTo: '2024-04-30' },
+                            ],
+                            dateField: 'date',
+                        },
+                        matchPartialBody: true,
+                        response: {
+                            status: 200,
+                            body: mockDefaultQueriesOverTime,
+                        },
+                    },
+                },
+            ],
+        },
+    }),
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+const Template: StoryObj<Required<QueriesOverTimeProps>> = {
+    render: (args) => html`
+        <gs-app lapis="${LAPIS_URL}">
+            <gs-queries-over-time
+                .lapisFilter=${args.lapisFilter}
+                .queries=${args.queries}
+                .views=${args.views}
+                .width=${args.width}
+                .height=${args.height}
+                .granularity=${args.granularity}
+                .lapisDateField=${args.lapisDateField}
+                .initialMeanProportionInterval=${args.initialMeanProportionInterval}
+                .hideGaps=${args.hideGaps}
+                .pageSizes=${args.pageSizes}
+                .customColumns=${args.customColumns}
+            ></gs-queries-over-time>
+        </gs-app>
+    `,
+};
+
+export const Default: StoryObj<Required<QueriesOverTimeProps>> = {
+    ...Template,
+};
+
+export const WithFixedHeight: StoryObj<Required<QueriesOverTimeProps>> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        height: '700px',
+    },
+};
+
+export const ByWeek: StoryObj<Required<QueriesOverTimeProps>> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-02-11' },
+        granularity: 'week',
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        url: `${LAPIS_URL}/component/queriesOverTime`,
+                        body: {
+                            filters: {
+                                pangoLineage: 'JN.1*',
+                                dateFrom: '2024-01-15',
+                                dateTo: '2024-02-11',
+                            },
+                            dateRanges: [
+                                { dateFrom: '2024-01-15', dateTo: '2024-01-21' },
+                                { dateFrom: '2024-01-22', dateTo: '2024-01-28' },
+                                { dateFrom: '2024-01-29', dateTo: '2024-02-04' },
+                                { dateFrom: '2024-02-05', dateTo: '2024-02-11' },
+                            ],
+                        },
+                        matchPartialBody: true,
+                        response: {
+                            status: 200,
+                            body: mockDefaultQueriesOverTime,
+                        },
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const WithCustomColumns: StoryObj<Required<QueriesOverTimeProps>> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        customColumns: [
+            {
+                header: 'Jaccard Index',
+                values: {
+                    'S:F456L (single mutation)': 0.75,
+                    'R346T + F456L (combination)': 0.92,
+                    'C22916T or T22917G (nucleotide OR)': 0.58,
+                },
+            },
+        ],
+    },
+};
+
+export const HideGaps: StoryObj<Required<QueriesOverTimeProps>> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
+        queries: [
+            {
+                displayLabel: 'S:F456L',
+                countQuery: 'S:456L',
+                coverageQuery: '!S:456N',
+            },
+            {
+                displayLabel: 'S:R346T',
+                countQuery: 'S:346T',
+                coverageQuery: '!S:346N',
+            },
+            {
+                displayLabel: 'S:Q493E',
+                countQuery: 'S:493E',
+                coverageQuery: '!S:493N',
+            },
+        ],
+        hideGaps: true,
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        url: `${LAPIS_URL}/component/queriesOverTime`,
+                        body: {
+                            filters: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
+                            dateRanges: [
+                                { dateFrom: '2024-01-01', dateTo: '2024-01-31' },
+                                { dateFrom: '2024-02-01', dateTo: '2024-02-29' },
+                                { dateFrom: '2024-03-01', dateTo: '2024-03-31' },
+                                { dateFrom: '2024-04-01', dateTo: '2024-04-30' },
+                                { dateFrom: '2024-05-01', dateTo: '2024-05-31' },
+                                { dateFrom: '2024-06-01', dateTo: '2024-06-30' },
+                                { dateFrom: '2024-07-01', dateTo: '2024-07-31' },
+                            ],
+                        },
+                        matchPartialBody: true,
+                        response: {
+                            status: 200,
+                            body: mockWithGapsQueriesOverTime,
+                        },
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const SmallWidth: StoryObj<Required<QueriesOverTimeProps>> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        width: '300px',
+    },
+};