@genspectrum/dashboard-components 0.3.2 → 0.4.1

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

@@ -2,14 +2,19 @@ import flatpickr from 'flatpickr';
 import 'flatpickr/dist/flatpickr.min.css';
 import { useEffect, useRef, useState } from 'preact/hooks';
 
+import { computeInitialValues } from './computeInitialValues';
 import { toYYYYMMDD } from './dateConversion';
+import {
+    type CustomSelectOption,
+    getDatesForSelectorValue,
+    getSelectableOptions,
+    type PresetOptionValues,
+} from './selectableOptions';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ResizeContainer } from '../components/resize-container';
 import { Select } from '../components/select';
 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;
 }
@@ -18,35 +23,19 @@ export interface DateRangeSelectorPropsInner<CustomLabel extends string> {
     customSelectOptions: CustomSelectOption<CustomLabel>[];
     earliestDate?: string;
     initialValue?: PresetOptionValues | CustomLabel;
+    initialDateFrom?: string;
+    initialDateTo?: string;
     dateColumn: string;
 }
 
-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,
     width,
     dateColumn,
+    initialDateFrom,
+    initialDateTo,
 }: DateRangeSelectorProps<CustomLabel>) => {
     const size = { width, height: '3rem' };
 
@@ -58,6 +47,8 @@ export const DateRangeSelector = <CustomLabel extends string>({
                     earliestDate={earliestDate}
                     initialValue={initialValue}
                     dateColumn={dateColumn}
+                    initialDateFrom={initialDateFrom}
+                    initialDateTo={initialDateTo}
                 />
             </ResizeContainer>
         </ErrorBoundary>
@@ -69,24 +60,30 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
     earliestDate = '1900-01-01',
     initialValue,
     dateColumn,
+    initialDateFrom,
+    initialDateTo,
 }: DateRangeSelectorPropsInner<CustomLabel>) => {
+    const initialValues = computeInitialValues(
+        initialValue,
+        initialDateFrom,
+        initialDateTo,
+        earliestDate,
+        customSelectOptions,
+    );
+
     const fromDatePickerRef = useRef<HTMLInputElement>(null);
     const toDatePickerRef = 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 selectableOptions = getSelectableOptions(customSelectOptions);
-
     const [selectedDateRange, setSelectedDateRange] = useState<CustomLabel | PresetOptionValues>(
-        initialValue !== undefined && selectableOptions.some((option) => option.value === initialValue)
-            ? initialValue
-            : PRESET_VALUE_LAST_6_MONTHS,
+        initialValues.initialSelectedDateRange,
     );
 
     const [selectedDates, setSelectedDates] = useState<{ dateFrom: Date; dateTo: Date }>({
-        dateFrom: getDatesForSelectorValue('last6Months', customSelectOptions, earliestDate).dateFrom,
-        dateTo: getDatesForSelectorValue('last6Months', customSelectOptions, earliestDate).dateTo,
+        dateFrom: initialValues.initialSelectedDateFrom,
+        dateTo: initialValues.initialSelectedDateTo,
     });
 
     useEffect(() => {
@@ -182,11 +179,11 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
     };
 
     return (
-        <div class='join w-full' ref={divRef}>
+        <div class='flex flex-wrap' ref={divRef}>
             <Select
-                items={selectableOptions}
+                items={getSelectableOptions(customSelectOptions)}
                 selected={selectedDateRange}
-                selectStyle='select-bordered rounded-none join-item grow'
+                selectStyle='select-bordered rounded-none flex-grow w-40'
                 onChange={(event: Event) => {
                     event.preventDefault();
                     const select = event.target as HTMLSelectElement;
@@ -194,80 +191,26 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
                     onSelectChange(value as CustomLabel | PresetOptionValues);
                 }}
             />
-            <input
-                class='input input-bordered rounded-none join-item grow'
-                type='text'
-                placeholder='Date from'
-                ref={fromDatePickerRef}
-                onChange={onChangeDateFrom}
-                onBlur={onChangeDateFrom}
-            />
-            <input
-                class='input input-bordered rounded-none join-item grow'
-                type='text'
-                placeholder='Date to'
-                ref={toDatePickerRef}
-                onChange={onChangeDateTo}
-                onBlur={onChangeDateTo}
-            />
+            <div className={'flex flex-wrap flex-grow'}>
+                <input
+                    class='input input-bordered rounded-none flex-grow min-w-40'
+                    type='text'
+                    size={10}
+                    placeholder='Date from'
+                    ref={fromDatePickerRef}
+                    onChange={onChangeDateFrom}
+                    onBlur={onChangeDateFrom}
+                />
+                <input
+                    class='input input-bordered rounded-none flex-grow min-w-40'
+                    type='text'
+                    size={10}
+                    placeholder='Date to'
+                    ref={toDatePickerRef}
+                    onChange={onChangeDateTo}
+                    onBlur={onChangeDateTo}
+                />
+            </div>
         </div>
     );
 };
-
-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 = <Label extends string>(
-    selectorValue: string,
-    customSelectOptions: CustomSelectOption<Label>[],
-    earliestDate: string,
-) => {
-    const today = new Date();
-
-    const customSelectOption = customSelectOptions.find((option) => option.label === selectorValue);
-    if (customSelectOption) {
-        return { dateFrom: new Date(customSelectOption.dateFrom), dateTo: new Date(customSelectOption.dateTo) };
-    }
-
-    switch (selectorValue) {
-        case PRESET_VALUE_LAST_2_WEEKS: {
-            const twoWeeksAgo = new Date(today);
-            twoWeeksAgo.setDate(today.getDate() - 14);
-            return { dateFrom: twoWeeksAgo, dateTo: today };
-        }
-        case PRESET_VALUE_LAST_MONTH: {
-            const lastMonth = new Date(today);
-            lastMonth.setMonth(today.getMonth() - 1);
-            return { dateFrom: lastMonth, dateTo: today };
-        }
-        case PRESET_VALUE_LAST_2_MONTHS: {
-            const twoMonthsAgo = new Date(today);
-            twoMonthsAgo.setMonth(today.getMonth() - 2);
-            return { dateFrom: twoMonthsAgo, dateTo: today };
-        }
-        case PRESET_VALUE_LAST_3_MONTHS: {
-            const threeMonthsAgo = new Date(today);
-            threeMonthsAgo.setMonth(today.getMonth() - 3);
-            return { dateFrom: threeMonthsAgo, dateTo: today };
-        }
-        case PRESET_VALUE_LAST_6_MONTHS: {
-            const sixMonthsAgo = new Date(today);
-            sixMonthsAgo.setMonth(today.getMonth() - 6);
-            return { dateFrom: sixMonthsAgo, dateTo: today };
-        }
-        case PRESET_VALUE_ALL_TIMES: {
-            return { dateFrom: new Date(earliestDate), dateTo: today };
-        }
-        default:
-            return { dateFrom: today, dateTo: today };
-    }
-};

package/src/preact/dateRangeSelector/selectableOptions.ts

@@ -0,0 +1,79 @@
+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 type CustomSelectOption<CustomLabel extends string> = { label: CustomLabel; dateFrom: string; dateTo: string };
+
+export 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];
+};
+
+export const getDatesForSelectorValue = <Label extends string>(
+    selectorValue: string,
+    customSelectOptions: CustomSelectOption<Label>[],
+    earliestDate: string,
+) => {
+    const today = new Date();
+
+    const customSelectOption = customSelectOptions.find((option) => option.label === selectorValue);
+    if (customSelectOption) {
+        return { dateFrom: new Date(customSelectOption.dateFrom), dateTo: new Date(customSelectOption.dateTo) };
+    }
+
+    switch (selectorValue) {
+        case PRESET_VALUE_LAST_2_WEEKS: {
+            const twoWeeksAgo = new Date(today);
+            twoWeeksAgo.setDate(today.getDate() - 14);
+            return { dateFrom: twoWeeksAgo, dateTo: today };
+        }
+        case PRESET_VALUE_LAST_MONTH: {
+            const lastMonth = new Date(today);
+            lastMonth.setMonth(today.getMonth() - 1);
+            return { dateFrom: lastMonth, dateTo: today };
+        }
+        case PRESET_VALUE_LAST_2_MONTHS: {
+            const twoMonthsAgo = new Date(today);
+            twoMonthsAgo.setMonth(today.getMonth() - 2);
+            return { dateFrom: twoMonthsAgo, dateTo: today };
+        }
+        case PRESET_VALUE_LAST_3_MONTHS: {
+            const threeMonthsAgo = new Date(today);
+            threeMonthsAgo.setMonth(today.getMonth() - 3);
+            return { dateFrom: threeMonthsAgo, dateTo: today };
+        }
+        case PRESET_VALUE_LAST_6_MONTHS: {
+            const sixMonthsAgo = new Date(today);
+            sixMonthsAgo.setMonth(today.getMonth() - 6);
+            return { dateFrom: sixMonthsAgo, dateTo: today };
+        }
+        case PRESET_VALUE_ALL_TIMES: {
+            return { dateFrom: new Date(earliestDate), dateTo: today };
+        }
+        default:
+            return { dateFrom: today, dateTo: today };
+    }
+};

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

@@ -93,7 +93,7 @@ export const LocationFilterInner = ({ initialValue, fields }: LocationFilterInne
 
 const parseLocation = (location: string, fields: string[]) => {
     const fieldValues = location.split('/').map((part) => part.trim());
-    return fieldValues.reduce((acc, fieldValue, i) => ({ ...acc, [fields[i]]: fieldValue }), {});
+    return fields.reduce((acc, field, i) => ({ ...acc, [field]: fieldValues[i] }), {});
 };
 
 const hasMatchingEntry = (data: Record<string, string>[] | null, eventDetail: Record<string, string>) => {

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

@@ -167,7 +167,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     setProportionInterval,
 }) => {
     return (
-        <div class='flex flex-row'>
+        <>
             <ProportionSelectorDropdown
                 proportionInterval={proportionInterval}
                 setMinProportion={(min) => setProportionInterval((prev) => ({ ...prev, min }))}
@@ -183,7 +183,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getMutationComparisonTableData({ content: filteredData }, proportionInterval)}
                 filename='mutation_comparison.csv'
             />
-            <Info>Info for mutation comparison</Info>
-        </div>
+            <Info height={'100px'}>Info for mutation comparison</Info>
+        </>
     );
 };

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

@@ -20,7 +20,6 @@ const meta: Meta<MutationFilterProps> = {
     },
     argTypes: {
         width: { control: 'text' },
-        height: { control: 'text' },
         initialValue: {
             control: {
                 type: 'object',
@@ -36,13 +35,12 @@ export const Default: StoryObj<MutationFilterProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationFilter width={args.width} height={args.height} initialValue={args.initialValue} />
+                <MutationFilter width={args.width} initialValue={args.initialValue} />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
     args: {
         width: '100%',
-        height: '700px',
     },
 };
 
@@ -106,7 +104,7 @@ export const FiresFilterChangedEvents: StoryObj<MutationFilterProps> = {
         });
 
         await step('Remove the first mutation', async () => {
-            const firstMutationDeleteButton = canvas.getAllByRole('button')[0];
+            const firstMutationDeleteButton = canvas.getAllByRole('button')[1];
             await waitFor(() => fireEvent.click(firstMutationDeleteButton));
 
             await expect(changedListenerMock).toHaveBeenCalledWith(
@@ -153,7 +151,7 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationFilter initialValue={args.initialValue} width={args.width} height={args.height} />
+                <MutationFilter initialValue={args.initialValue} width={args.width} />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContext.Provider>
     ),
@@ -165,7 +163,6 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
             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,6 @@ 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 } from '../components/resize-container';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 import { DeleteIcon } from '../shared/icons/DeleteIcon';
 
@@ -17,7 +16,6 @@ export interface MutationFilterInnerProps {
 
 export interface MutationFilterProps extends MutationFilterInnerProps {
     width: string;
-    height: string;
 }
 
 export type SelectedFilters = {
@@ -31,14 +29,12 @@ export type SelectedMutationFilterStrings = {
     [Key in keyof SelectedFilters]: string[];
 };
 
-export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initialValue, width, height }) => {
-    const size = { height, width };
-
+export const MutationFilter: FunctionComponent<MutationFilterProps> = ({ initialValue, width }) => {
     return (
-        <ErrorBoundary size={size}>
-            <ResizeContainer size={size}>
+        <ErrorBoundary size={{ height: '3.375rem', width }}>
+            <div style={width}>
                 <MutationFilterInner initialValue={initialValue} />
-            </ResizeContainer>
+            </div>
         </ErrorBoundary>
     );
 };
@@ -54,6 +50,9 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
 
     const handleSubmit = (event: Event) => {
         event.preventDefault();
+        if (inputValue === '') {
+            return;
+        }
 
         const parsedMutation = parseAndValidateMutation(inputValue, referenceGenome);
 
@@ -102,30 +101,33 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
     };
 
     return (
-        <div class={`h-full w-full rounded-lg border border-gray-300 bg-white p-2 overflow-scroll`}>
-            <div class='flex justify-between'>
+        <form className='w-full border boder-gray-300 rounded-md relative' onSubmit={handleSubmit} ref={formRef}>
+            <div className='absolute -top-3 -right-3'>
+                <Info height={'100px'}>Info for mutation filter</Info>
+            </div>
+            <div className='w-full flex p-2 flex-wrap items-center'>
                 <SelectedMutationDisplay
                     selectedFilters={selectedFilters}
                     setSelectedFilters={setSelectedFilters}
                     fireChangeEvent={fireChangeEvent}
                 />
-                <Info>Info for mutation filter</Info>
-            </div>
-
-            <form className='mt-2 w-full' onSubmit={handleSubmit} ref={formRef}>
-                <label className={`input flex items-center gap-2 ${isError ? 'input-error' : 'input-bordered'}`}>
+                <div
+                    className={`w-full flex border ${isError ? 'border-red-500' : 'border-gray-300'} border-solid m-2 text-sm focus-within:border-gray-400 `}
+                >
                     <input
-                        className='grow min-w-0'
+                        className='grow flex-1 p-1 border-none focus:outline-none focus:ring-0'
                         type='text'
                         value={inputValue}
                         onInput={handleInputChange}
                         placeholder={getPlaceholder(referenceGenome)}
                         onBlur={handleOnBlur}
                     />
-                    <button className='btn btn-sm'>+</button>
-                </label>
-            </form>
-        </div>
+                    <button type='submit' className='btn btn-xs m-1'>
+                        +
+                    </button>
+                </div>
+            </div>
+        </form>
     );
 };
 
@@ -193,44 +195,36 @@ const SelectedMutationDisplay: FunctionComponent<{
     };
 
     return (
-        <ul class='flex flex-wrap'>
+        <>
             {selectedFilters.nucleotideMutations.map((mutation) => (
-                <li key={mutation.toString()}>
-                    <SelectedNucleotideMutation
-                        mutation={mutation}
-                        onDelete={(mutation: Substitution | Deletion) =>
-                            onSelectedRemoved(mutation, 'nucleotideMutations')
-                        }
-                    />
-                </li>
+                <SelectedNucleotideMutation
+                    key={mutation.toString()}
+                    mutation={mutation}
+                    onDelete={(mutation: Substitution | Deletion) => onSelectedRemoved(mutation, 'nucleotideMutations')}
+                />
             ))}
             {selectedFilters.aminoAcidMutations.map((mutation) => (
-                <li key={mutation.toString()}>
-                    <SelectedAminoAcidMutation
-                        mutation={mutation}
-                        onDelete={(mutation: Substitution | Deletion) =>
-                            onSelectedRemoved(mutation, 'aminoAcidMutations')
-                        }
-                    />
-                </li>
+                <SelectedAminoAcidMutation
+                    key={mutation.toString()}
+                    mutation={mutation}
+                    onDelete={(mutation: Substitution | Deletion) => onSelectedRemoved(mutation, 'aminoAcidMutations')}
+                />
             ))}
             {selectedFilters.nucleotideInsertions.map((insertion) => (
-                <li key={insertion.toString()}>
-                    <SelectedNucleotideInsertion
-                        insertion={insertion}
-                        onDelete={(insertion) => onSelectedRemoved(insertion, 'nucleotideInsertions')}
-                    />
-                </li>
+                <SelectedNucleotideInsertion
+                    key={insertion.toString()}
+                    insertion={insertion}
+                    onDelete={(insertion) => onSelectedRemoved(insertion, 'nucleotideInsertions')}
+                />
             ))}
             {selectedFilters.aminoAcidInsertions.map((insertion) => (
-                <li key={insertion.toString()}>
-                    <SelectedAminoAcidInsertion
-                        insertion={insertion}
-                        onDelete={(insertion: Insertion) => onSelectedRemoved(insertion, 'aminoAcidInsertions')}
-                    />
-                </li>
+                <SelectedAminoAcidInsertion
+                    key={insertion.toString()}
+                    insertion={insertion}
+                    onDelete={(insertion: Insertion) => onSelectedRemoved(insertion, 'aminoAcidInsertions')}
+                />
             ))}
-        </ul>
+        </>
     );
 };
 
@@ -313,15 +307,15 @@ const SelectedFilter = <MutationType extends Mutation>({
     textColor,
 }: SelectedFilterProps<MutationType>) => {
     return (
-        <div
-            class='flex items-center flex-nowrap gap-1 rounded me-1 px-2.5 py-0.5 font-medium text-xs mb-1 min-w-max'
+        <span
+            class='inline-block mx-1 px-2 py-1 font-medium text-xs rounded-full'
             style={{ backgroundColor, color: textColor }}
         >
-            <div className='whitespace-nowrap min-w-max'>{mutation.toString()}</div>
+            {mutation.toString()}
             <button type='button' onClick={() => onDelete(mutation)}>
                 <DeleteIcon />
             </button>
-        </div>
+        </span>
     );
 };
 

package/src/preact/mutations/mutations.tsx

@@ -168,7 +168,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     setProportionInterval,
 }) => {
     return (
-        <div class='flex flex-row'>
+        <>
             <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
             {activeTab === 'Table' && (
                 <MutationTypeSelector
@@ -182,7 +182,6 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                         proportionInterval={proportionInterval}
                         setMinProportion={(min) => setProportionInterval((prev) => ({ ...prev, min }))}
                         setMaxProportion={(max) => setProportionInterval((prev) => ({ ...prev, max }))}
-                        openDirection={'left'}
                     />
                     <CsvDownloadButton
                         className='mx-1 btn btn-xs'
@@ -205,7 +204,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                     filename='insertions.csv'
                 />
             )}
-            <Info>Info for mutations</Info>
-        </div>
+            <Info height={'100px'}>Info for mutations</Info>
+        </>
     );
 };

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

@@ -208,7 +208,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     granularity,
 }) => {
     return (
-        <div class='flex'>
+        <>
             {activeTab !== 'Table' && (
                 <ScalingSelector yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
             )}
@@ -226,17 +226,15 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
             />
 
             <PrevalenceOverTimeInfo />
-        </div>
+        </>
     );
 };
 
 const PrevalenceOverTimeInfo: FunctionComponent = () => {
     return (
-        <Info size={{ width: '600px', height: '30vh' }}>
+        <Info height={'100px'}>
             <InfoHeadline1>Prevalence over time</InfoHeadline1>
             <InfoParagraph>Prevalence over time info.</InfoParagraph>
         </Info>
     );
 };
-
-export default PrevalenceOverTime;

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

@@ -161,16 +161,16 @@ const RelativeGrowthAdvantageToolbar: FunctionComponent<RelativeGrowthAdvantageT
     generationTime,
 }) => {
     return (
-        <div class='flex'>
+        <>
             <ScalingSelector yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
             <RelativeGrowthAdvantageInfo generationTime={generationTime} />
-        </div>
+        </>
     );
 };
 
 const RelativeGrowthAdvantageInfo: FunctionComponent<{ generationTime: number }> = ({ generationTime }) => {
     return (
-        <Info size={{ width: '600px', height: '30vh' }}>
+        <Info>
             <InfoHeadline1>Relative growth advantage</InfoHeadline1>
             <InfoParagraph>
                 If variants spread pre-dominantly by local transmission across demographic groups, this estimate