@genspectrum/dashboard-components 0.1.3 → 0.1.4

package/src/preact/components/resize-container.tsx

@@ -0,0 +1,23 @@
+import { type FunctionComponent } from 'preact';
+
+export type Size = {
+    width?: string;
+    height?: string;
+};
+
+export interface ResizeContainerProps {
+    size?: Size;
+    defaultSize: Size;
+}
+
+export const ResizeContainer: FunctionComponent<ResizeContainerProps> = ({ children, size, defaultSize }) => {
+    return <div style={extendByDefault(size, defaultSize)}>{children}</div>;
+};
+
+const extendByDefault = (size: Size | undefined, defaultSize: Size) => {
+    if (size === undefined) {
+        return defaultSize;
+    }
+
+    return { ...defaultSize, ...size };
+};

package/src/preact/components/table.tsx

@@ -3,6 +3,7 @@ import { type OneDArray, type TColumn, type TData } from 'gridjs/dist/src/types'
 import { type PaginationConfig } from 'gridjs/dist/src/view/plugin/pagination';
 import { type ComponentChild } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
+
 import 'gridjs/dist/theme/mermaid.css';
 
 export const tableStyle = {

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

@@ -51,10 +51,10 @@ export const TabsWithToolbarOnlyShowingOnSecondTab: StoryObj = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => expect(canvas.getByLabelText('FirstTab', { selector: 'input' })).toBeVisible());
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'SecondTab' })).toBeVisible());
         await expect(canvas.queryByText('Toolbar')).not.toBeInTheDocument();
 
-        await fireEvent.click(canvas.getByLabelText('SecondTab', { selector: 'input' }));
+        await fireEvent.click(canvas.getByRole('button', { name: 'SecondTab' }));
         await waitFor(() => expect(canvas.getByText('Toolbar')).toBeVisible());
     },
 };

package/src/preact/components/tabs.tsx

@@ -1,5 +1,5 @@
 import { Fragment, type FunctionComponent } from 'preact';
-import { useState } from 'preact/hooks';
+import { useEffect, useRef, useState } from 'preact/hooks';
 import { type JSXInternal } from 'preact/src/jsx';
 
 type Tab = {
@@ -14,34 +14,57 @@ interface ComponentTabsProps {
 
 const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
     const [activeTab, setActiveTab] = useState(tabs[0].title);
+    const [heightOfTabs, setHeightOfTabs] = useState('3rem');
+    const tabRef = useRef<HTMLDivElement>(null);
 
-    const tabNames = tabs.map((tab) => tab.title).join(', ');
-
-    const tabElements = tabs.map((tab) => {
-        return (
-            <Fragment key={tab.title}>
-                <input
-                    type='radio'
-                    name={tabNames}
-                    role='tab'
-                    className='tab'
-                    aria-label={tab.title}
-                    checked={activeTab === tab.title}
-                    onChange={() => setActiveTab(tab.title)}
-                />
-                <div role='tabpanel' className='tab-content bg-base-100 border-base-300 rounded-box p-1'>
-                    {tab.content}
-                </div>
-            </Fragment>
-        );
-    });
+    useEffect(() => {
+        if (tabRef.current) {
+            const heightOfTabs = tabRef.current.getBoundingClientRect().height;
+            setHeightOfTabs(`${heightOfTabs}px`);
+        }
+    }, []);
+
+    const tabElements = (
+        <div className='flex flex-row'>
+            {tabs.map((tab) => {
+                return (
+                    <Fragment key={tab.title}>
+                        <button
+                            className={`px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 ${
+                                activeTab === tab.title
+                                    ? 'border-b-2 border-gray-400'
+                                    : 'text-gray-600 hover:bg-gray-100 hover:text-gray-700'
+                            }`}
+                            onClick={() => {
+                                setActiveTab(tab.title);
+                            }}
+                        >
+                            {tab.title}
+                        </button>
+                    </Fragment>
+                );
+            })}
+        </div>
+    );
 
     const toolbarElement = typeof toolbar === 'function' ? toolbar(activeTab) : toolbar;
 
     return (
-        <div role='tablist' className='tabs tabs-lifted'>
-            {tabElements}
-            {toolbar && <div className='m-1 col-[9999]'>{toolbarElement}</div>}
+        <div className='h-full w-full'>
+            <div ref={tabRef} className='flex flex-row justify-between'>
+                {tabElements}
+                {toolbar && <div className='py-2'>{toolbarElement}</div>}
+            </div>
+            <div
+                className={`p-2 border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === tabs[0].title ? '' : 'rounded-tl-md'}`}
+                style={{ height: `calc(100% - ${heightOfTabs})` }}
+            >
+                {tabs.map((tab) => (
+                    <div className='h-full overflow-auto' key={tab.title} hidden={activeTab !== tab.title}>
+                        {tab.content}
+                    </div>
+                ))}
+            </div>
         </div>
     );
 };

package/src/preact/dateRangeSelector/date-range-selector.stories.tsx

@@ -1,11 +1,21 @@
 import { withActions } from '@storybook/addon-actions/decorator';
 import { type Meta, type StoryObj } from '@storybook/preact';
 
-import { DateRangeSelector, type DateRangeSelectorProps } from './date-range-selector';
+import {
+    DateRangeSelector,
+    type DateRangeSelectorProps,
+    PRESET_VALUE_ALL_TIMES,
+    PRESET_VALUE_CUSTOM,
+    PRESET_VALUE_LAST_2_MONTHS,
+    PRESET_VALUE_LAST_2_WEEKS,
+    PRESET_VALUE_LAST_3_MONTHS,
+    PRESET_VALUE_LAST_6_MONTHS,
+    PRESET_VALUE_LAST_MONTH,
+} from './date-range-selector';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 
-const meta: Meta<DateRangeSelectorProps> = {
+const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
     title: 'Input/DateRangeSelector',
     component: DateRangeSelector,
     parameters: {
@@ -14,19 +24,41 @@ const meta: Meta<DateRangeSelectorProps> = {
         },
         fetchMock: {},
     },
+    argTypes: {
+        initialValue: {
+            control: {
+                type: 'select',
+            },
+            options: [
+                PRESET_VALUE_CUSTOM,
+                PRESET_VALUE_ALL_TIMES,
+                PRESET_VALUE_LAST_2_WEEKS,
+                PRESET_VALUE_LAST_MONTH,
+                PRESET_VALUE_LAST_2_MONTHS,
+                PRESET_VALUE_LAST_3_MONTHS,
+                PRESET_VALUE_LAST_6_MONTHS,
+                'CustomDateRange',
+            ],
+        },
+    },
     args: {
         customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
         earliestDate: '1970-01-01',
+        initialValue: PRESET_VALUE_LAST_3_MONTHS,
     },
     decorators: [withActions],
 };
 
 export default meta;
 
-export const Primary: StoryObj<DateRangeSelectorProps> = {
+export const Primary: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
-            <DateRangeSelector customSelectOptions={args.customSelectOptions} earliestDate={args.earliestDate} />
+            <DateRangeSelector
+                customSelectOptions={args.customSelectOptions}
+                earliestDate={args.earliestDate}
+                initialValue={args.initialValue}
+            />
         </LapisUrlContext.Provider>
     ),
 };

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -1,5 +1,4 @@
 import flatpickr from 'flatpickr';
-import { type FunctionComponent } from 'preact';
 import 'flatpickr/dist/flatpickr.min.css';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
@@ -7,24 +6,53 @@ import { toYYYYMMDD } from './dateConversion';
 import { Select } from '../components/select';
 import type { ScaleType } from '../shared/charts/getYAxisScale';
 
-export type CustomSelectOption = { label: string; dateFrom: string; dateTo: string };
+export type CustomSelectOption<CustomLabel extends string> = { label: CustomLabel; dateFrom: string; dateTo: string };
 
-export interface DateRangeSelectorProps {
-    customSelectOptions: CustomSelectOption[];
+export interface DateRangeSelectorProps<CustomLabel extends string> {
+    customSelectOptions: CustomSelectOption<CustomLabel>[];
     earliestDate?: string;
+    initialValue?: PresetOptionValues | CustomLabel;
 }
 
-export const DateRangeSelector: FunctionComponent<DateRangeSelectorProps> = ({
+export const PRESET_VALUE_CUSTOM = 'custom';
+export const PRESET_VALUE_ALL_TIMES = 'allTimes';
+export const PRESET_VALUE_LAST_2_WEEKS = 'last2Weeks';
+export const PRESET_VALUE_LAST_MONTH = 'lastMonth';
+export const PRESET_VALUE_LAST_2_MONTHS = 'last2Months';
+export const PRESET_VALUE_LAST_3_MONTHS = 'last3Months';
+export const PRESET_VALUE_LAST_6_MONTHS = 'last6Months';
+
+export const presets = {
+    [PRESET_VALUE_CUSTOM]: { label: 'Custom' },
+    [PRESET_VALUE_ALL_TIMES]: { label: 'All times' },
+    [PRESET_VALUE_LAST_2_WEEKS]: { label: 'Last 2 weeks' },
+    [PRESET_VALUE_LAST_MONTH]: { label: 'Last month' },
+    [PRESET_VALUE_LAST_2_MONTHS]: { label: 'Last 2 months' },
+    [PRESET_VALUE_LAST_3_MONTHS]: { label: 'Last 3 months' },
+    [PRESET_VALUE_LAST_6_MONTHS]: { label: 'Last 6 months' },
+};
+
+export type PresetOptionValues = keyof typeof presets;
+
+export const DateRangeSelector = <CustomLabel extends string>({
     customSelectOptions,
     earliestDate = '1900-01-01',
-}) => {
+    initialValue,
+}: DateRangeSelectorProps<CustomLabel>) => {
     const datePickerRef = useRef<HTMLInputElement>(null);
     const endDatePickerRef = useRef<HTMLInputElement>(null);
     const divRef = useRef<HTMLDivElement>(null);
     const [dateFromPicker, setDateFromPicker] = useState<flatpickr.Instance | null>(null);
     const [dateToPicker, setDateToPicker] = useState<flatpickr.Instance | null>(null);
 
-    const [selectedDateRange, setSelectedDateRange] = useState('last6Months');
+    const selectableOptions = getSelectableOptions(customSelectOptions);
+
+    const [selectedDateRange, setSelectedDateRange] = useState<CustomLabel | PresetOptionValues>(
+        initialValue !== undefined && selectableOptions.some((option) => option.value === initialValue)
+            ? initialValue
+            : PRESET_VALUE_LAST_6_MONTHS,
+    );
+
     const [selectedDates, setSelectedDates] = useState<{ dateFrom: Date; dateTo: Date }>({
         dateFrom: getDatesForSelectorValue('last6Months', customSelectOptions, earliestDate).dateFrom,
         dateTo: getDatesForSelectorValue('last6Months', customSelectOptions, earliestDate).dateTo,
@@ -61,27 +89,7 @@ export const DateRangeSelector: FunctionComponent<DateRangeSelectorProps> = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [datePickerRef, endDatePickerRef]);
 
-    const selectableOptions = () => {
-        const presetOptions = [
-            { label: 'Custom', value: 'custom' },
-            { label: 'All times', value: 'allTimes' },
-            { label: 'Last 2 weeks', value: 'last2Weeks' },
-            { label: 'Last month', value: 'lastMonth' },
-            { label: 'Last 2 weeks', value: 'last2Weeks' },
-            { label: 'Last month', value: 'lastMonth' },
-            { label: 'Last 2 months', value: 'last2Months' },
-            { label: 'Last 3 months', value: 'last3Months' },
-            { label: 'Last 6 months', value: 'last6Months' },
-        ];
-
-        const customOptions = customSelectOptions.map((customSelectOption) => {
-            return { label: customSelectOption.label, value: customLabelToOptionValue(customSelectOption.label) };
-        });
-
-        return [...presetOptions, ...customOptions];
-    };
-
-    const onSelectChange = (value: string) => {
+    const onSelectChange = (value: CustomLabel | PresetOptionValues) => {
         setSelectedDateRange(value);
 
         const dateRange = getDatesForSelectorValue(value, customSelectOptions, earliestDate);
@@ -145,14 +153,14 @@ export const DateRangeSelector: FunctionComponent<DateRangeSelectorProps> = ({
     return (
         <div class='join' ref={divRef}>
             <Select
-                items={selectableOptions()}
+                items={selectableOptions}
                 selected={selectedDateRange}
                 selectStyle='select-bordered rounded-none join-item'
                 onChange={(event: Event) => {
                     event.preventDefault();
                     const select = event.target as HTMLSelectElement;
                     const value = select.value as ScaleType;
-                    onSelectChange(value);
+                    onSelectChange(value as CustomLabel | PresetOptionValues);
                 }}
             />
             <input
@@ -175,51 +183,57 @@ export const DateRangeSelector: FunctionComponent<DateRangeSelectorProps> = ({
     );
 };
 
-const customLabelToOptionValue = (customLabel: string) => {
-    return `${customLabel}customLabel`;
+const getSelectableOptions = <Label extends string>(customSelectOptions: CustomSelectOption<Label>[]) => {
+    const presetOptions = Object.entries(presets).map(([key, value]) => {
+        return { label: value.label, value: key };
+    });
+
+    const customOptions = customSelectOptions.map((customSelectOption) => {
+        return { label: customSelectOption.label, value: customSelectOption.label };
+    });
+
+    return [...presetOptions, ...customOptions];
 };
 
-const getDatesForSelectorValue = (
+const getDatesForSelectorValue = <Label extends string>(
     selectorValue: string,
-    customSelectOptions: CustomSelectOption[],
+    customSelectOptions: CustomSelectOption<Label>[],
     earliestDate: string,
 ) => {
     const today = new Date();
 
-    const customSelectOption = customSelectOptions.find(
-        (option) => customLabelToOptionValue(option.label) === selectorValue,
-    );
+    const customSelectOption = customSelectOptions.find((option) => option.label === selectorValue);
     if (customSelectOption) {
         return { dateFrom: new Date(customSelectOption.dateFrom), dateTo: new Date(customSelectOption.dateTo) };
     }
 
     switch (selectorValue) {
-        case 'last2Weeks': {
+        case PRESET_VALUE_LAST_2_WEEKS: {
             const twoWeeksAgo = new Date(today);
             twoWeeksAgo.setDate(today.getDate() - 14);
             return { dateFrom: twoWeeksAgo, dateTo: today };
         }
-        case 'lastMonth': {
+        case PRESET_VALUE_LAST_MONTH: {
             const lastMonth = new Date(today);
             lastMonth.setMonth(today.getMonth() - 1);
             return { dateFrom: lastMonth, dateTo: today };
         }
-        case 'last2Months': {
+        case PRESET_VALUE_LAST_2_MONTHS: {
             const twoMonthsAgo = new Date(today);
             twoMonthsAgo.setMonth(today.getMonth() - 2);
             return { dateFrom: twoMonthsAgo, dateTo: today };
         }
-        case 'last3Months': {
+        case PRESET_VALUE_LAST_3_MONTHS: {
             const threeMonthsAgo = new Date(today);
             threeMonthsAgo.setMonth(today.getMonth() - 3);
             return { dateFrom: threeMonthsAgo, dateTo: today };
         }
-        case 'last6Months': {
+        case PRESET_VALUE_LAST_6_MONTHS: {
             const sixMonthsAgo = new Date(today);
             sixMonthsAgo.setMonth(today.getMonth() - 6);
             return { dateFrom: sixMonthsAgo, dateTo: today };
         }
-        case 'allTimes': {
+        case PRESET_VALUE_ALL_TIMES: {
             return { dateFrom: new Date(earliestDate), dateTo: today };
         }
         default:

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

@@ -5,11 +5,11 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { useQuery } from '../useQuery';
 
 export type LocationFilterProps = {
-    value?: string;
+    initialValue?: string;
     fields: string[];
 };
 
-export const LocationFilter = ({ value: initialValue, fields }: LocationFilterProps) => {
+export const LocationFilter = ({ initialValue, fields }: LocationFilterProps) => {
     const lapis = useContext(LapisUrlContext);
 
     const [value, setValue] = useState(initialValue ?? '');

package/src/preact/mutationComparison/getMutationComparisonTableData.spec.ts

@@ -51,12 +51,12 @@ describe('getPrevalenceOverTimeTableData', () => {
 
         expect(result).toEqual([
             {
-                mutation: 'A123T',
+                mutation: new Substitution(undefined, 'A', 'T', 123),
                 'Test 1 prevalence': 0.123,
                 'Test 2 prevalence': 0.345,
             },
             {
-                mutation: 'G234A',
+                mutation: new Substitution(undefined, 'G', 'A', 234),
                 'Test 1 prevalence': 0.567,
                 'Test 2 prevalence': 0.789,
             },
@@ -106,17 +106,17 @@ describe('getPrevalenceOverTimeTableData', () => {
 
         expect(result).toEqual([
             {
-                mutation: 'A200T',
+                mutation: new Substitution(undefined, 'A', 'T', 200),
                 'Test 1 prevalence': inRange,
                 'Test 2 prevalence': belowRange,
             },
             {
-                mutation: 'A300T',
+                mutation: new Substitution(undefined, 'A', 'T', 300),
                 'Test 1 prevalence': inRange,
                 'Test 2 prevalence': inRange,
             },
             {
-                mutation: 'A400T',
+                mutation: new Substitution(undefined, 'A', 'T', 400),
                 'Test 1 prevalence': inRange,
                 'Test 2 prevalence': aboveRange,
             },

package/src/preact/mutationComparison/getMutationComparisonTableData.ts

@@ -1,35 +1,53 @@
 import { type MutationData } from './queryMutationData';
 import { type Dataset } from '../../operator/Dataset';
+import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type ProportionInterval } from '../components/proportion-selector';
 
 type Proportions = {
     [displayName: string]: number;
 };
 
+type MutationComparisonRow = {
+    mutation: Substitution | Deletion;
+    proportions: Proportions;
+};
+
 export function getMutationComparisonTableData(data: Dataset<MutationData>, proportionInterval: ProportionInterval) {
-    const mutationsToProportions = new Map<string, Proportions>();
+    const mutationsToProportions = new Map<string, MutationComparisonRow>();
 
     for (const mutationData of data.content) {
         for (const mutationEntry of mutationData.data) {
-            const mutation = mutationEntry.mutation.toString();
-            const proportions = mutationsToProportions.get(mutation) || {};
-            proportions[mutationData.displayName] = mutationEntry.proportion;
-            mutationsToProportions.set(mutation, proportions);
+            const mutationKey = mutationEntry.mutation.toString();
+            const existingRow = mutationsToProportions.get(mutationKey);
+
+            if (!existingRow) {
+                mutationsToProportions.set(
+                    mutationKey,
+                    initializeMutationRow(mutationEntry.mutation, mutationData.displayName, mutationEntry.proportion),
+                );
+            } else {
+                existingRow.proportions = updateProportions(
+                    existingRow.proportions,
+                    mutationData.displayName,
+                    mutationEntry.proportion,
+                );
+                mutationsToProportions.set(mutationKey, existingRow);
+            }
         }
     }
 
-    return [...mutationsToProportions.entries()]
-        .map(([mutation, proportions]) => {
+    return [...mutationsToProportions.values()]
+        .map((row) => {
             return {
-                mutation,
+                mutation: row.mutation,
                 ...data.content
                     .map((mutationData) => {
                         return {
-                            [`${mutationData.displayName} prevalence`]: proportions[mutationData.displayName] || 0,
+                            [`${mutationData.displayName} prevalence`]: row.proportions[mutationData.displayName] || 0,
                         };
                     })
                     .reduce((acc, val) => ({ ...acc, ...val }), {}),
-            } as { mutation: string } & Proportions;
+            } as { mutation: Substitution | Deletion } & Proportions;
         })
         .filter((row) =>
             Object.values(row).some(
@@ -38,3 +56,20 @@ export function getMutationComparisonTableData(data: Dataset<MutationData>, prop
             ),
         );
 }
+
+function initializeMutationRow(
+    mutation: Substitution | Deletion,
+    displayName: string,
+    proportion: number,
+): MutationComparisonRow {
+    return {
+        mutation,
+        proportions: {
+            [displayName]: proportion,
+        },
+    };
+}
+
+function updateProportions(proportions: Proportions, displayName: string, proportion: number): Proportions {
+    return { ...proportions, [displayName]: proportion };
+}

package/src/preact/mutationComparison/mutation-comparison-table.tsx

@@ -3,6 +3,7 @@ import { type FunctionComponent } from 'preact';
 import { getMutationComparisonTableData } from './getMutationComparisonTableData';
 import { type MutationData } from './queryMutationData';
 import { type Dataset } from '../../operator/Dataset';
+import { type Deletion, type Substitution } from '../../utils/mutations';
 import { type ProportionInterval } from '../components/proportion-selector';
 import { Table } from '../components/table';
 import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
@@ -14,30 +15,27 @@ export interface MutationsTableProps {
 }
 
 export const MutationComparisonTable: FunctionComponent<MutationsTableProps> = ({ data, proportionInterval }) => {
-    const getHeaders = () => {
-        return [
-            {
-                name: 'Mutation',
-                sort: {
-                    compare: (a: string, b: string) => {
-                        return sortSubstitutionsAndDeletions(a, b);
-                    },
-                },
+    const headers = [
+        {
+            name: 'Mutation',
+            sort: {
+                compare: sortSubstitutionsAndDeletions,
             },
-            {
-                name: 'Prevalence',
-                columns: data.content.map((mutationData) => {
-                    return {
-                        name: mutationData.displayName,
-                        sort: true,
-                        formatter: (cell: number) => formatProportion(cell),
-                    };
-                }),
-            },
-        ];
-    };
+            formatter: (cell: Substitution | Deletion) => cell.toString(),
+        },
+        {
+            name: 'Prevalence',
+            columns: data.content.map((mutationData) => {
+                return {
+                    name: mutationData.displayName,
+                    sort: true,
+                    formatter: (cell: number) => formatProportion(cell),
+                };
+            }),
+        },
+    ];
 
     const tableData = getMutationComparisonTableData(data, proportionInterval).map((row) => Object.values(row));
 
-    return <Table data={tableData} columns={getHeaders()} pagination={true} />;
+    return <Table data={tableData} columns={headers} pagination={true} />;
 };

package/src/preact/mutationComparison/mutation-comparison-venn.tsx

@@ -64,6 +64,7 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
             type: 'venn',
             data: sets,
             options: {
+                maintainAspectRatio: false,
                 scales: {
                     x: {
                         ticks: {
@@ -114,9 +115,11 @@ export const MutationComparisonVenn: FunctionComponent<MutationComparisonVennPro
     }
 
     return (
-        <>
-            <GsChart configuration={config} />
+        <div className='h-full flex flex-col'>
+            <div className='flex-1'>
+                <GsChart configuration={config} />
+            </div>
             <div class='flex flex-wrap break-words m-2' ref={divRef} />
-        </>
+        </div>
     );
 };

package/src/preact/mutationComparison/mutation-comparison.stories.tsx

@@ -27,6 +27,7 @@ const meta: Meta<MutationComparisonProps> = {
             options: ['table', 'venn'],
             control: { type: 'check' },
         },
+        size: [{ control: 'object' }],
     },
     parameters: {
         fetchMock: {
@@ -75,7 +76,12 @@ const Template: StoryObj<MutationComparisonProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationComparison variants={args.variants} sequenceType={args.sequenceType} views={args.views} />
+                <MutationComparison
+                    variants={args.variants}
+                    sequenceType={args.sequenceType}
+                    views={args.views}
+                    size={args.size}
+                />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
@@ -101,6 +107,7 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
         ],
         sequenceType: 'nucleotide',
         views: ['table', 'venn'],
+        size: { width: '100%', height: '700px' },
     },
 };