@genspectrum/dashboard-components 0.2.0 → 0.3.1

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

@@ -1,23 +1,14 @@
 import { type FunctionComponent } from 'preact';
 
 export type Size = {
-    width?: string;
-    height?: string;
+    width: string;
+    height: string;
 };
 
 export interface ResizeContainerProps {
-    size?: Size;
-    defaultSize: Size;
+    size: 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 };
+export const ResizeContainer: FunctionComponent<ResizeContainerProps> = ({ children, size }) => {
+    return <div style={size}>{children}</div>;
 };

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

@@ -60,6 +60,7 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
         customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
         earliestDate: '1970-01-01',
         initialValue: PRESET_VALUE_LAST_3_MONTHS,
+        dateColumn: 'aDateColumn',
         width: '100%',
     },
     decorators: [withActions],
@@ -75,6 +76,7 @@ export const Primary: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
                 earliestDate={args.earliestDate}
                 initialValue={args.initialValue}
                 width={args.width}
+                dateColumn={args.dateColumn}
             />
         </LapisUrlContext.Provider>
     ),

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

@@ -11,13 +11,14 @@ import type { ScaleType } from '../shared/charts/getYAxisScale';
 export type CustomSelectOption<CustomLabel extends string> = { label: CustomLabel; dateFrom: string; dateTo: string };
 
 export interface DateRangeSelectorProps<CustomLabel extends string> extends DateRangeSelectorPropsInner<CustomLabel> {
-    width?: string;
+    width: string;
 }
 
 export interface DateRangeSelectorPropsInner<CustomLabel extends string> {
     customSelectOptions: CustomSelectOption<CustomLabel>[];
     earliestDate?: string;
     initialValue?: PresetOptionValues | CustomLabel;
+    dateColumn: string;
 }
 
 export const PRESET_VALUE_CUSTOM = 'custom';
@@ -45,17 +46,18 @@ export const DateRangeSelector = <CustomLabel extends string>({
     earliestDate = '1900-01-01',
     initialValue,
     width,
+    dateColumn,
 }: DateRangeSelectorProps<CustomLabel>) => {
-    const defaultSize = { width: '100%', height: '3rem' };
-    const size = width === undefined ? undefined : { width, height: defaultSize.height };
+    const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary defaultSize={defaultSize} size={size}>
-            <ResizeContainer defaultSize={defaultSize} size={size}>
+        <ErrorBoundary size={size}>
+            <ResizeContainer size={size}>
                 <DateRangeSelectorInner
                     customSelectOptions={customSelectOptions}
                     earliestDate={earliestDate}
                     initialValue={initialValue}
+                    dateColumn={dateColumn}
                 />
             </ResizeContainer>
         </ErrorBoundary>
@@ -66,7 +68,8 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
     customSelectOptions,
     earliestDate = '1900-01-01',
     initialValue,
-}: DateRangeSelectorProps<CustomLabel>) => {
+    dateColumn,
+}: DateRangeSelectorPropsInner<CustomLabel>) => {
     const fromDatePickerRef = useRef<HTMLInputElement>(null);
     const toDatePickerRef = useRef<HTMLInputElement>(null);
     const divRef = useRef<HTMLDivElement>(null);
@@ -165,8 +168,8 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
         const dateTo = toYYYYMMDD(dateToPicker?.selectedDates[0]);
 
         const detail = {
-            ...(dateFrom !== undefined && { dateFrom }),
-            ...(dateTo !== undefined && { dateTo }),
+            ...(dateFrom !== undefined && { [`${dateColumn}From`]: dateFrom }),
+            ...(dateTo !== undefined && { [`${dateColumn}To`]: dateTo }),
         };
 
         divRef.current?.dispatchEvent(

package/src/preact/locationFilter/fetchAutocompletionList.ts

@@ -1,4 +1,6 @@
+import { LapisError } from '../../lapisApi/lapisApi';
 import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
+import { UserFacingError } from '../components/error-display';
 
 export async function fetchAutocompletionList(fields: string[], lapis: string, signal?: AbortSignal) {
     const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1)
@@ -8,7 +10,19 @@ export async function fetchAutocompletionList(fields: string[], lapis: string, s
 
     const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string | null>>({}, fields);
 
-    const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
+    let data;
+    try {
+        data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
+    } catch (error) {
+        if (error instanceof LapisError) {
+            throw new UserFacingError(
+                `Failed to fetch autocomplete list from LAPIS: ${error.problemDetail.status} ${error.problemDetail.title ?? ''}`,
+                error.problemDetail.detail ?? error.message,
+            );
+        }
+        throw error;
+    }
+
     const locationValues = data
         .map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {}))
         .reduce<Set<string>>((setOfAllHierarchies, entry) => {

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

@@ -34,7 +34,7 @@ const meta: Meta<LocationFilterProps> = {
     args: {
         width: '100%',
         fields: ['region', 'country', 'division', 'location'],
-        initialValue: 'United States',
+        initialValue: 'Europe',
     },
     argTypes: {
         fields: {

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

@@ -1,5 +1,6 @@
 import { type FunctionComponent } from 'preact';
 import { useContext, useRef, useState } from 'preact/hooks';
+import { type JSXInternal } from 'preact/src/jsx';
 
 import { fetchAutocompletionList } from './fetchAutocompletionList';
 import { LapisUrlContext } from '../LapisUrlContext';
@@ -15,16 +16,15 @@ export interface LocationFilterInnerProps {
 }
 
 export interface LocationFilterProps extends LocationFilterInnerProps {
-    width?: string;
+    width: string;
 }
 
 export const LocationFilter: FunctionComponent<LocationFilterProps> = ({ width, initialValue, fields }) => {
-    const defaultSize = { width: '100%', height: '3rem' };
-    const size = width === undefined ? undefined : { width, height: defaultSize.height };
+    const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary defaultSize={defaultSize} size={size}>
-            <ResizeContainer size={size} defaultSize={defaultSize}>
+        <ErrorBoundary size={size}>
+            <ResizeContainer size={size}>
                 <LocationFilterInner initialValue={initialValue} fields={fields} />
             </ResizeContainer>
         </ErrorBoundary>
@@ -37,7 +37,7 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
     const [value, setValue] = useState(initialValue ?? '');
     const [unknownLocation, setUnknownLocation] = useState(false);
 
-    const formRef = useRef<HTMLFormElement>(null);
+    const divRef = useRef<HTMLDivElement>(null);
 
     const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
 
@@ -48,40 +48,29 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
         return <ErrorDisplay error={error} />;
     }
 
-    const onInput = (event: InputEvent) => {
-        if (event.target instanceof HTMLInputElement) {
-            const inputValue = event.target.value;
-            setValue(inputValue);
-            if (unknownLocation) {
-                const eventDetail = parseLocation(inputValue, fields);
-                if (hasMatchingEntry(data, eventDetail)) {
-                    setUnknownLocation(false);
-                }
-            }
+    const onInput = (event: JSXInternal.TargetedInputEvent<HTMLInputElement>) => {
+        const inputValue = event.currentTarget.value;
+        setValue(inputValue);
+        if (inputValue.trim() === value.trim()) {
+            return;
         }
-    };
-
-    const submit = (event: SubmitEvent) => {
-        event.preventDefault();
-        const eventDetail = parseLocation(value, fields);
-
+        const eventDetail = parseLocation(inputValue, fields);
         if (hasMatchingEntry(data, eventDetail)) {
-            setUnknownLocation(false);
-
-            formRef.current?.dispatchEvent(
+            divRef.current?.dispatchEvent(
                 new CustomEvent('gs-location-changed', {
                     detail: eventDetail,
                     bubbles: true,
                     composed: true,
                 }),
             );
+            setUnknownLocation(false);
         } else {
             setUnknownLocation(true);
         }
     };
 
     return (
-        <form class='flex w-full' onSubmit={submit} ref={formRef}>
+        <div class='flex w-full' ref={divRef}>
             <input
                 type='text'
                 class={`input input-bordered grow ${unknownLocation ? 'border-2 border-error' : ''}`}
@@ -98,10 +87,7 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
                     return <option key={value} value={value} />;
                 })}
             </datalist>
-            <button class='btn btn-primary ml-1' type='submit'>
-                Submit
-            </button>
-        </form>
+        </div>
     );
 };
 

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

@@ -27,7 +27,8 @@ const meta: Meta<MutationComparisonProps> = {
             options: ['table', 'venn'],
             control: { type: 'check' },
         },
-        size: [{ control: 'object' }],
+        width: { control: 'text' },
+        height: { control: 'text' },
         headline: { control: 'text' },
     },
     parameters: {
@@ -81,7 +82,8 @@ const Template: StoryObj<MutationComparisonProps> = {
                     variants={args.variants}
                     sequenceType={args.sequenceType}
                     views={args.views}
-                    size={args.size}
+                    width={args.width}
+                    height={args.height}
                     headline={args.headline}
                 />
             </ReferenceGenomeContext.Provider>
@@ -109,7 +111,8 @@ export const TwoVariants: StoryObj<MutationComparisonProps> = {
         ],
         sequenceType: 'nucleotide',
         views: ['table', 'venn'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Mutation comparison',
     },
 };

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

@@ -5,7 +5,7 @@ import { getMutationComparisonTableData } from './getMutationComparisonTableData
 import { MutationComparisonTable } from './mutation-comparison-table';
 import { MutationComparisonVenn } from './mutation-comparison-venn';
 import { filterMutationData, type MutationData, queryMutationData } from './queryMutationData';
-import { type LapisFilter, type SequenceType } from '../../types';
+import { type NamedLapisFilter, type SequenceType } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
 import { CsvDownloadButton } from '../components/csv-download-button';
@@ -18,24 +18,20 @@ import { type DisplayedMutationType, MutationTypeSelector } from '../components/
 import { NoDataDisplay } from '../components/no-data-display';
 import { type ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
-import { ResizeContainer, type Size } from '../components/resize-container';
+import { ResizeContainer } from '../components/resize-container';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
 export type View = 'table' | 'venn';
 
-export interface MutationComparisonVariant {
-    lapisFilter: LapisFilter;
-    displayName: string;
-}
-
 export interface MutationComparisonProps extends MutationComparisonInnerProps {
-    size?: Size;
+    width: string;
+    height: string;
     headline?: string;
 }
 
 export interface MutationComparisonInnerProps {
-    variants: MutationComparisonVariant[];
+    variants: NamedLapisFilter[];
     sequenceType: SequenceType;
     views: View[];
 }
@@ -44,14 +40,15 @@ export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({
     variants,
     sequenceType,
     views,
-    size,
+    width,
+    height,
     headline = 'Mutation comparison',
 }) => {
-    const defaultSize = { height: '600px', width: '100%' };
+    const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} defaultSize={defaultSize} headline={headline}>
-            <ResizeContainer size={size} defaultSize={defaultSize}>
+        <ErrorBoundary size={size} headline={headline}>
+            <ResizeContainer size={size}>
                 <Headline heading={headline}>
                     <MutationComparisonInner variants={variants} sequenceType={sequenceType} views={views} />
                 </Headline>

package/src/preact/mutationComparison/queryMutationData.ts

@@ -1,6 +1,5 @@
-import { type MutationComparisonVariant } from './mutation-comparison';
 import { querySubstitutionsOrDeletions } from '../../query/querySubstitutionsOrDeletions';
-import { type SubstitutionOrDeletionEntry } from '../../types';
+import { type NamedLapisFilter, type SubstitutionOrDeletionEntry } from '../../types';
 import { type DisplayedSegment } from '../components/SegmentSelector';
 import { type DisplayedMutationType } from '../components/mutation-type-selector';
 
@@ -10,7 +9,7 @@ export type MutationData = {
 };
 
 export async function queryMutationData(
-    variants: MutationComparisonVariant[],
+    variants: NamedLapisFilter[],
     sequenceType: 'nucleotide' | 'amino acid',
     lapis: string,
 ) {

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

@@ -19,11 +19,8 @@ const meta: Meta<MutationFilterProps> = {
         fetchMock: {},
     },
     argTypes: {
-        size: {
-            control: {
-                type: 'object',
-            },
-        },
+        width: { control: 'text' },
+        height: { control: 'text' },
         initialValue: {
             control: {
                 type: 'object',
@@ -39,12 +36,13 @@ export const Default: StoryObj<MutationFilterProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationFilter size={args.size} initialValue={args.initialValue} />
+                <MutationFilter width={args.width} height={args.height} initialValue={args.initialValue} />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
     args: {
-        size: { width: '100%' },
+        width: '100%',
+        height: '700px',
     },
 };
 
@@ -155,7 +153,7 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationFilter initialValue={args.initialValue} />
+                <MutationFilter initialValue={args.initialValue} width={args.width} height={args.height} />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
@@ -166,6 +164,8 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
             nucleotideInsertions: ['ins_123:AAA'],
             aminoAcidInsertions: ['ins_S:123:AAA'],
         },
+        width: '100%',
+        height: '700px',
     },
     play: async ({ canvasElement, step }) => {
         const { canvas, onBlurListenerMock } = await prepare(canvasElement, step);

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

@@ -7,7 +7,7 @@ import { type Deletion, type Insertion, type Mutation, type Substitution } from
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import Info from '../components/info';
-import { ResizeContainer, type Size } from '../components/resize-container';
+import { ResizeContainer } from '../components/resize-container';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 import { DeleteIcon } from '../shared/icons/DeleteIcon';
 
@@ -16,7 +16,8 @@ export interface MutationFilterInnerProps {
 }
 
 export interface MutationFilterProps extends MutationFilterInnerProps {
-    size?: Size;
+    width: string;
+    height: string;
 }
 
 export type SelectedFilters = {
@@ -30,12 +31,12 @@ export type SelectedMutationFilterStrings = {
     [Key in keyof SelectedFilters]: string[];
 };
 
-export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initialValue, size }) => {
-    const defaultSize = { width: '100%', height: '6.5rem' };
+export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initialValue, width, height }) => {
+    const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} defaultSize={defaultSize}>
-            <ResizeContainer size={size} defaultSize={defaultSize}>
+        <ErrorBoundary size={size}>
+            <ResizeContainer size={size}>
                 <MutationFilterInner initialValue={initialValue} />
             </ResizeContainer>
         </ErrorBoundary>

package/src/preact/mutations/mutations.stories.tsx

@@ -22,7 +22,8 @@ const meta: Meta<MutationsProps> = {
             options: ['table', 'grid', 'insertions'],
             control: { type: 'check' },
         },
-        size: [{ control: 'object' }],
+        width: { control: 'text' },
+        height: { control: 'text' },
         headline: { control: 'text' },
     },
 };
@@ -37,7 +38,8 @@ const Template = {
                     variant={args.variant}
                     sequenceType={args.sequenceType}
                     views={args.views}
-                    size={args.size}
+                    width={args.width}
+                    height={args.height}
                     headline={args.headline}
                 />
             </ReferenceGenomeContext.Provider>
@@ -51,7 +53,8 @@ export const Default: StoryObj<MutationsProps> = {
         variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
         sequenceType: 'nucleotide',
         views: ['grid', 'table', 'insertions'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Mutations',
     },
     parameters: {

package/src/preact/mutations/mutations.tsx

@@ -25,7 +25,7 @@ import { type DisplayedMutationType, MutationTypeSelector } from '../components/
 import { NoDataDisplay } from '../components/no-data-display';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
-import { ResizeContainer, type Size } from '../components/resize-container';
+import { ResizeContainer } from '../components/resize-container';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
@@ -38,7 +38,8 @@ export interface MutationsInnerProps {
 }
 
 export interface MutationsProps extends MutationsInnerProps {
-    size?: Size;
+    width: string;
+    height: string;
     headline?: string;
 }
 
@@ -46,14 +47,15 @@ export const Mutations: FunctionComponent<MutationsProps> = ({
     variant,
     sequenceType,
     views,
-    size,
+    width,
+    height,
     headline = 'Mutations',
 }) => {
-    const defaultSize = { height: '600px', width: '100%' };
+    const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} defaultSize={defaultSize} headline={headline}>
-            <ResizeContainer size={size} defaultSize={defaultSize}>
+        <ErrorBoundary size={size} headline={headline}>
+            <ResizeContainer size={size}>
                 <Headline heading={headline}>
                     <MutationsInner variant={variant} sequenceType={sequenceType} views={views} />
                 </Headline>

package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx

@@ -29,7 +29,8 @@ export default {
             options: ['wilson'],
             control: { type: 'check' },
         },
-        size: [{ control: 'object' }],
+        width: { control: 'text' },
+        height: { control: 'text' },
         headline: { control: 'text' },
     },
 };
@@ -44,7 +45,8 @@ const Template = {
                 smoothingWindow={args.smoothingWindow}
                 views={args.views}
                 confidenceIntervalMethods={args.confidenceIntervalMethods}
-                size={args.size}
+                width={args.width}
+                height={args.height}
                 headline={args.headline}
             />
         </LapisUrlContext.Provider>
@@ -55,15 +57,16 @@ export const TwoVariants = {
     ...Template,
     args: {
         numerator: [
-            { displayName: 'EG', country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' },
-            { displayName: 'JN.1', country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' },
+            { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } },
+            { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } },
         ],
         denominator: { country: 'USA', dateFrom: '2023-01-01' },
         granularity: 'month',
         smoothingWindow: 0,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Prevalence over time',
     },
     parameters: {
@@ -124,13 +127,17 @@ export const TwoVariants = {
 export const OneVariant = {
     ...Template,
     args: {
-        numerator: { displayName: 'EG', country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
+        numerator: {
+            displayName: 'EG',
+            lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
+        },
         denominator: { country: 'USA', dateFrom: '2023-10-01' },
         granularity: 'day',
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Prevalence over time',
     },
     parameters: {

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -7,7 +7,7 @@ import PrevalenceOverTimeBubbleChart from './prevalence-over-time-bubble-chart';
 import PrevalenceOverTimeLineChart from './prevalence-over-time-line-chart';
 import PrevalenceOverTimeTable from './prevalence-over-time-table';
 import { type PrevalenceOverTimeData, queryPrevalenceOverTime } from '../../query/queryPrevalenceOverTime';
-import { type NamedLapisFilter, type TemporalGranularity } from '../../types';
+import { type LapisFilter, type NamedLapisFilter, type TemporalGranularity } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { ConfidenceIntervalSelector } from '../components/confidence-interval-selector';
 import { CsvDownloadButton } from '../components/csv-download-button';
@@ -17,7 +17,7 @@ import Headline from '../components/headline';
 import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
-import { ResizeContainer, type Size } from '../components/resize-container';
+import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
 import { type ConfidenceIntervalMethod } from '../shared/charts/confideceInterval';
@@ -27,13 +27,14 @@ import { useQuery } from '../useQuery';
 export type View = 'bar' | 'line' | 'bubble' | 'table';
 
 export interface PrevalenceOverTimeProps extends PrevalenceOverTimeInnerProps {
-    size?: Size;
+    width: string;
+    height: string;
     headline?: string;
 }
 
 export interface PrevalenceOverTimeInnerProps {
     numerator: NamedLapisFilter | NamedLapisFilter[];
-    denominator: NamedLapisFilter;
+    denominator: LapisFilter;
     granularity: TemporalGranularity;
     smoothingWindow: number;
     views: View[];
@@ -47,14 +48,15 @@ export const PrevalenceOverTime: FunctionComponent<PrevalenceOverTimeProps> = ({
     smoothingWindow,
     views,
     confidenceIntervalMethods,
-    size,
+    width,
+    height,
     headline = 'Prevalence over time',
 }) => {
-    const defaultSize = { height: '600px', width: '100%' };
+    const size = { height, width };
 
     return (
-        <ErrorBoundary size={size} defaultSize={defaultSize} headline={headline}>
-            <ResizeContainer size={size} defaultSize={defaultSize}>
+        <ErrorBoundary size={size} headline={headline}>
+            <ResizeContainer size={size}>
                 <Headline heading={headline}>
                     <PrevalenceOverTimeInner
                         numerator={numerator}

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.stories.tsx

@@ -18,7 +18,8 @@ export default {
             options: ['line'],
             control: { type: 'check' },
         },
-        size: [{ control: 'object' }],
+        width: { control: 'text' },
+        height: { control: 'text' },
         headline: { control: 'text' },
     },
 };
@@ -31,7 +32,8 @@ export const Primary = {
                 denominator={args.denominator}
                 generationTime={args.generationTime}
                 views={args.views}
-                size={args.size}
+                width={args.width}
+                height={args.height}
                 headline={args.headline}
             />
         </LapisUrlContext.Provider>
@@ -41,7 +43,8 @@ export const Primary = {
         denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
         generationTime: 7,
         views: ['line'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Relative growth advantage',
     },
     parameters: {