@genspectrum/dashboard-components 0.6.19 → 0.7.1

package/src/preact/dateRangeSelector/computeInitialValues.ts

@@ -1,36 +1,30 @@
-import {
-    type CustomSelectOption,
-    getDatesForSelectorValue,
-    getSelectableOptions,
-    PRESET_VALUE_CUSTOM,
-    PRESET_VALUE_LAST_6_MONTHS,
-    type PresetOptionValues,
-} from './selectableOptions';
+import { type DateRangeOption } from './dateRangeOption';
+import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
 import { UserFacingError } from '../components/error-display';
 
-export function computeInitialValues<CustomLabel extends string>(
-    initialValue: PresetOptionValues | CustomLabel | undefined,
+export function computeInitialValues(
+    initialValue: string | undefined,
     initialDateFrom: string | undefined,
     initialDateTo: string | undefined,
     earliestDate: string,
-    customSelectOptions: CustomSelectOption<CustomLabel>[],
+    dateRangeOptions: DateRangeOption[],
 ): {
-    initialSelectedDateRange: CustomLabel | PresetOptionValues;
+    initialSelectedDateRange: string | undefined;
     initialSelectedDateFrom: Date;
     initialSelectedDateTo: Date;
 } {
     if (isUndefinedOrEmpty(initialDateFrom) && isUndefinedOrEmpty(initialDateTo)) {
-        const selectableOptions = getSelectableOptions(customSelectOptions);
-        const initialSelectedDateRange =
-            initialValue !== undefined && selectableOptions.some((option) => option.value === initialValue)
-                ? initialValue
-                : PRESET_VALUE_LAST_6_MONTHS;
+        const selectableOptions = getSelectableOptions(dateRangeOptions);
+        const initialSelectedDateRange = selectableOptions.find((option) => option.value === initialValue)?.value;
 
-        const { dateFrom, dateTo } = getDatesForSelectorValue(
-            initialSelectedDateRange,
-            customSelectOptions,
-            earliestDate,
-        );
+        if (initialValue !== undefined && initialSelectedDateRange === undefined) {
+            throw new UserFacingError(
+                'Invalid initialValue',
+                `Invalid initialValue "${initialValue}", It must be one of ${selectableOptions.map((option) => `'${option.value}'`).join(', ')}`,
+            );
+        }
+
+        const { dateFrom, dateTo } = getDatesForSelectorValue(initialSelectedDateRange, dateRangeOptions, earliestDate);
 
         return {
             initialSelectedDateRange,
@@ -62,7 +56,7 @@ export function computeInitialValues<CustomLabel extends string>(
     }
 
     return {
-        initialSelectedDateRange: PRESET_VALUE_CUSTOM,
+        initialSelectedDateRange: undefined,
         initialSelectedDateFrom,
         initialSelectedDateTo,
     };

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

@@ -1,24 +1,16 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 import dayjs from 'dayjs/esm';
 
 import { DateRangeSelector, type DateRangeSelectorProps } from './date-range-selector';
-import {
-    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 './selectableOptions';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { dateRangeOptionPresets } from './dateRangeOption';
 
 const earliestDate = '1970-01-01';
 
-const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
+const meta: Meta<DateRangeSelectorProps> = {
     title: 'Input/DateRangeSelector',
     component: DateRangeSelector,
     parameters: {
@@ -32,18 +24,9 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
             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',
-            ],
+            options: [dateRangeOptionPresets.lastMonth.label, dateRangeOptionPresets.allTimes.label, 'CustomDateRange'],
         },
-        customSelectOptions: {
+        dateRangeOptions: {
             control: {
                 type: 'object',
             },
@@ -60,9 +43,17 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
         },
     },
     args: {
-        customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
+        dateRangeOptions: [
+            dateRangeOptionPresets.lastMonth,
+            dateRangeOptionPresets.allTimes,
+            {
+                label: 'CustomDateRange',
+                dateFrom: '2021-01-01',
+                dateTo: '2021-12-31',
+            },
+        ],
         earliestDate,
-        initialValue: PRESET_VALUE_LAST_3_MONTHS,
+        initialValue: dateRangeOptionPresets.lastMonth.label,
         dateColumn: 'aDateColumn',
         width: '100%',
         initialDateFrom: '',
@@ -72,11 +63,11 @@ const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
 
 export default meta;
 
-export const Primary: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+export const Primary: StoryObj<DateRangeSelectorProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
             <DateRangeSelector
-                customSelectOptions={args.customSelectOptions}
+                dateRangeOptions={args.dateRangeOptions}
                 earliestDate={args.earliestDate}
                 initialValue={args.initialValue}
                 initialDateFrom={args.initialDateFrom}
@@ -88,7 +79,7 @@ export const Primary: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
     ),
 };
 
-export const SetCorrectInitialValues: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+export const SetCorrectInitialValues: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -111,7 +102,7 @@ export const SetCorrectInitialValues: StoryObj<DateRangeSelectorProps<'CustomDat
 
 const initialDateFrom = '2000-01-01';
 
-export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -125,7 +116,7 @@ export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps<'CustomD
         const selectField = () => canvas.getByRole('combobox');
 
         await waitFor(() => {
-            expect(selectField()).toHaveValue(PRESET_VALUE_CUSTOM);
+            expect(selectField()).toHaveValue('Custom');
             expect(dateFrom()).toHaveValue(initialDateFrom);
             expect(dateTo()).toHaveValue(dayjs().format('YYYY-MM-DD'));
         });
@@ -134,7 +125,7 @@ export const SetCorrectInitialDateFrom: StoryObj<DateRangeSelectorProps<'CustomD
 
 const initialDateTo = '2000-01-01';
 
-export const SetCorrectInitialDateTo: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+export const SetCorrectInitialDateTo: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
@@ -148,14 +139,37 @@ export const SetCorrectInitialDateTo: StoryObj<DateRangeSelectorProps<'CustomDat
         const selectField = () => canvas.getByRole('combobox');
 
         await waitFor(() => {
-            expect(selectField()).toHaveValue(PRESET_VALUE_CUSTOM);
+            expect(selectField()).toHaveValue('Custom');
             expect(dateFrom()).toHaveValue(earliestDate);
             expect(dateTo()).toHaveValue(initialDateTo);
         });
     },
 };
 
-export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
+export const ChangingDateSetsOptionToCustom: StoryObj<DateRangeSelectorProps> = {
+    ...Primary,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const dateFrom = () => canvas.getByPlaceholderText('Date from');
+        const dateTo = () => canvas.getByPlaceholderText('Date to');
+        const selectField = () => canvas.getByRole('combobox');
+
+        await waitFor(() => {
+            expect(selectField()).toHaveValue('Last month');
+        });
+
+        await userEvent.type(dateFrom(), '{backspace>12}');
+        await userEvent.type(dateFrom(), '2000-01-01');
+        await userEvent.click(dateTo());
+
+        await waitFor(() => {
+            expect(selectField()).toHaveValue('Custom');
+        });
+    },
+};
+
+export const HandlesInvalidInitialDateFrom: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,

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

@@ -4,33 +4,28 @@ 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 { type DateRangeOption } from './dateRangeOption';
+import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Select } from '../components/select';
 import type { ScaleType } from '../shared/charts/getYAxisScale';
 
-export interface DateRangeSelectorProps<CustomLabel extends string> extends DateRangeSelectorPropsInner<CustomLabel> {
+const customOption = 'Custom';
+
+export interface DateRangeSelectorProps extends DateRangeSelectorPropsInner {
     width: string;
 }
 
-export interface DateRangeSelectorPropsInner<CustomLabel extends string> {
-    customSelectOptions: CustomSelectOption<CustomLabel>[];
+export interface DateRangeSelectorPropsInner {
+    dateRangeOptions: DateRangeOption[];
     earliestDate: string;
-    initialValue: PresetOptionValues | CustomLabel;
+    initialValue: string | undefined;
     initialDateFrom: string;
     initialDateTo: string;
     dateColumn: string;
 }
 
-export const DateRangeSelector = <CustomLabel extends string>({
-    width,
-    ...innerProps
-}: DateRangeSelectorProps<CustomLabel>) => {
+export const DateRangeSelector = ({ width, ...innerProps }: DateRangeSelectorProps) => {
     const size = { width, height: '3rem' };
 
     return (
@@ -42,20 +37,20 @@ export const DateRangeSelector = <CustomLabel extends string>({
     );
 };
 
-export const DateRangeSelectorInner = <CustomLabel extends string>({
-    customSelectOptions,
+export const DateRangeSelectorInner = ({
+    dateRangeOptions,
     earliestDate = '1900-01-01',
     initialValue,
     dateColumn,
     initialDateFrom,
     initialDateTo,
-}: DateRangeSelectorPropsInner<CustomLabel>) => {
+}: DateRangeSelectorPropsInner) => {
     const initialValues = computeInitialValues(
         initialValue,
         initialDateFrom,
         initialDateTo,
         earliestDate,
-        customSelectOptions,
+        dateRangeOptions,
     );
 
     const fromDatePickerRef = useRef<HTMLInputElement>(null);
@@ -64,7 +59,7 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
     const [dateFromPicker, setDateFromPicker] = useState<flatpickr.Instance | null>(null);
     const [dateToPicker, setDateToPicker] = useState<flatpickr.Instance | null>(null);
 
-    const [selectedDateRange, setSelectedDateRange] = useState<CustomLabel | PresetOptionValues>(
+    const [selectedDateRange, setSelectedDateRange] = useState<string | undefined>(
         initialValues.initialSelectedDateRange,
     );
 
@@ -104,10 +99,10 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fromDatePickerRef, toDatePickerRef]);
 
-    const onSelectChange = (value: CustomLabel | PresetOptionValues) => {
+    const onSelectChange = (value: string) => {
         setSelectedDateRange(value);
 
-        const dateRange = getDatesForSelectorValue(value, customSelectOptions, earliestDate);
+        const dateRange = getDatesForSelectorValue(value, dateRangeOptions, earliestDate);
 
         dateToPicker?.set('minDate', dateRange.dateFrom);
         dateFromPicker?.set('maxDate', dateRange.dateTo);
@@ -130,7 +125,7 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
 
         selectedDates.dateFrom = dateFromPicker?.selectedDates[0] || new Date();
         dateToPicker?.set('minDate', dateFromPicker?.selectedDates[0]);
-        setSelectedDateRange('custom');
+        setSelectedDateRange(customOption);
 
         submit();
     };
@@ -142,7 +137,7 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
 
         selectedDates.dateTo = dateToPicker?.selectedDates[0] || new Date();
         dateFromPicker?.set('maxDate', dateToPicker?.selectedDates[0]);
-        setSelectedDateRange('custom');
+        setSelectedDateRange(customOption);
 
         submit();
     };
@@ -168,14 +163,17 @@ export const DateRangeSelectorInner = <CustomLabel extends string>({
     return (
         <div class='flex flex-wrap' ref={divRef}>
             <Select
-                items={getSelectableOptions(customSelectOptions)}
-                selected={selectedDateRange}
+                items={[
+                    ...getSelectableOptions(dateRangeOptions),
+                    { label: customOption, value: customOption, disabled: true },
+                ]}
+                selected={selectedDateRange ?? customOption}
                 selectStyle='select-bordered rounded-none flex-grow min-w-[7.5rem]'
                 onChange={(event: Event) => {
                     event.preventDefault();
                     const select = event.target as HTMLSelectElement;
                     const value = select.value as ScaleType;
-                    onSelectChange(value as CustomLabel | PresetOptionValues);
+                    onSelectChange(value);
                 }}
             />
             <div className={'flex flex-wrap flex-grow'}>

package/src/preact/dateRangeSelector/dateRangeOption.ts

@@ -0,0 +1,65 @@
+import { toYYYYMMDD } from './dateConversion';
+
+/**
+ * A date range option that can be used in the `gs-date-range-selector` component.
+ */
+export type DateRangeOption = {
+    /** The label of the date range option that will be shown to the user */
+    label: string;
+    /**
+     * The start date of the date range in the format `YYYY-MM-DD`.
+     * If not set, the date range selector will default to the `earliestDate` property.
+     */
+    dateFrom?: string;
+    /**
+     * The end date of the date range in the format `YYYY-MM-DD`.
+     * If not set, the date range selector will default to the current date.
+     */
+    dateTo?: string;
+};
+
+const today = new Date();
+
+const twoWeeksAgo = new Date();
+twoWeeksAgo.setDate(today.getDate() - 14);
+
+const lastMonth = new Date(today);
+lastMonth.setMonth(today.getMonth() - 1);
+
+const last2Months = new Date(today);
+last2Months.setMonth(today.getMonth() - 2);
+
+const last3Months = new Date(today);
+last3Months.setMonth(today.getMonth() - 3);
+
+const last6Months = new Date(today);
+last6Months.setMonth(today.getMonth() - 6);
+
+/**
+ * Presets for the `gs-date-range-selector` component that can be used as `dateRangeOptions`.
+ */
+export const dateRangeOptionPresets = {
+    last2Weeks: {
+        label: 'Last 2 weeks',
+        dateFrom: toYYYYMMDD(twoWeeksAgo),
+    },
+    lastMonth: {
+        label: 'Last month',
+        dateFrom: toYYYYMMDD(lastMonth),
+    },
+    last2Months: {
+        label: 'Last 2 months',
+        dateFrom: toYYYYMMDD(last2Months),
+    },
+    last3Months: {
+        label: 'Last 3 months',
+        dateFrom: toYYYYMMDD(last3Months),
+    },
+    last6Months: {
+        label: 'Last 6 months',
+        dateFrom: toYYYYMMDD(last6Months),
+    },
+    allTimes: {
+        label: 'All times',
+    },
+} satisfies Record<string, DateRangeOption>;

package/src/preact/dateRangeSelector/selectableOptions.ts

@@ -1,79 +1,30 @@
-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';
+import { type DateRangeOption } from './dateRangeOption';
 
-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) => {
+export const getSelectableOptions = (dateRangeOptions: DateRangeOption[]) => {
+    return dateRangeOptions.map((customSelectOption) => {
         return { label: customSelectOption.label, value: customSelectOption.label };
     });
-
-    return [...presetOptions, ...customOptions];
 };
 
-export const getDatesForSelectorValue = <Label extends string>(
-    selectorValue: string,
-    customSelectOptions: CustomSelectOption<Label>[],
+export const getDatesForSelectorValue = (
+    initialSelectedDateRange: string | undefined,
+    dateRangeOptions: DateRangeOption[],
     earliestDate: string,
 ) => {
     const today = new Date();
+    const defaultDates = { dateFrom: new Date(earliestDate), dateTo: today };
 
-    const customSelectOption = customSelectOptions.find((option) => option.label === selectorValue);
-    if (customSelectOption) {
-        return { dateFrom: new Date(customSelectOption.dateFrom), dateTo: new Date(customSelectOption.dateTo) };
+    if (initialSelectedDateRange === undefined) {
+        return defaultDates;
     }
 
-    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 };
+    const dateRangeOption = dateRangeOptions.find((option) => option.label === initialSelectedDateRange);
+    if (dateRangeOption) {
+        return {
+            dateFrom: new Date(dateRangeOption.dateFrom ?? earliestDate),
+            dateTo: new Date(dateRangeOption.dateTo ?? today),
+        };
     }
+
+    return defaultDates;
 };

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

@@ -11,7 +11,7 @@ import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
 import { NoDataDisplay } from '../components/no-data-display';
@@ -24,36 +24,30 @@ import { useQuery } from '../useQuery';
 
 export type View = 'table' | 'venn';
 
-export interface MutationComparisonProps extends MutationComparisonInnerProps {
+export interface MutationComparisonProps {
     width: string;
     height: string;
-}
-
-export interface MutationComparisonInnerProps {
     lapisFilters: NamedLapisFilter[];
     sequenceType: SequenceType;
     views: View[];
     pageSize: boolean | number;
 }
 
-export const MutationComparison: FunctionComponent<MutationComparisonProps> = ({ width, height, ...innerProps }) => {
+export const MutationComparison: FunctionComponent<MutationComparisonProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <MutationComparisonInner {...innerProps} />
+                <MutationComparisonInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const MutationComparisonInner: FunctionComponent<MutationComparisonInnerProps> = ({
-    lapisFilters,
-    sequenceType,
-    views,
-    pageSize,
-}) => {
+export const MutationComparisonInner: FunctionComponent<MutationComparisonProps> = (componentProps) => {
+    const { lapisFilters, sequenceType } = componentProps;
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
@@ -72,35 +66,21 @@ export const MutationComparisonInner: FunctionComponent<MutationComparisonInnerP
         return <NoDataDisplay />;
     }
 
-    return (
-        <MutationComparisonTabs
-            data={data.mutationData}
-            sequenceType={sequenceType}
-            views={views}
-            pageSize={pageSize}
-        />
-    );
+    return <MutationComparisonTabs data={data.mutationData} originalComponentProps={componentProps} />;
 };
 
 type MutationComparisonTabsProps = {
     data: MutationData[];
-    views: View[];
-    sequenceType: SequenceType;
-    pageSize: boolean | number;
+    originalComponentProps: MutationComparisonProps;
 };
 
-const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = ({
-    data,
-    views,
-    sequenceType,
-    pageSize,
-}) => {
+const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = ({ data, originalComponentProps }) => {
     const [proportionInterval, setProportionInterval] = useState({ min: 0.5, max: 1 });
     const [displayedMutationTypes, setDisplayedMutationTypes] = useState<DisplayedMutationType[]>([
         { label: 'Substitutions', checked: true, type: 'substitution' },
         { label: 'Deletions', checked: true, type: 'deletion' },
     ]);
-    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
+    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
 
     const filteredData = useMemo(
         () => filterMutationData(data, displayedSegments, displayedMutationTypes),
@@ -116,7 +96,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
                         <MutationComparisonTable
                             data={{ content: filteredData }}
                             proportionInterval={proportionInterval}
-                            pageSize={pageSize}
+                            pageSize={originalComponentProps.pageSize}
                         />
                     ),
                 };
@@ -133,7 +113,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
         }
     };
 
-    const tabs = views.map((view) => getTab(view));
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
 
     return (
         <Tabs
@@ -147,6 +127,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
                     filteredData={filteredData}
                     proportionInterval={proportionInterval}
                     setProportionInterval={setProportionInterval}
+                    originalComponentProps={originalComponentProps}
                 />
             }
         />
@@ -161,6 +142,7 @@ type ToolbarProps = {
     filteredData: MutationData[];
     proportionInterval: ProportionInterval;
     setProportionInterval: Dispatch<StateUpdater<ProportionInterval>>;
+    originalComponentProps: MutationComparisonProps;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -171,6 +153,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     filteredData,
     proportionInterval,
     setProportionInterval,
+    originalComponentProps,
 }) => {
     return (
         <>
@@ -189,8 +172,23 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
                 getData={() => getMutationComparisonTableData({ content: filteredData }, proportionInterval)}
                 filename='mutation_comparison.csv'
             />
-            <Info>Info for mutation comparison</Info>
+            <MutationComparisonInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>
     );
 };
+
+type MutationComparisonInfoProps = {
+    originalComponentProps: MutationComparisonProps;
+};
+
+const MutationComparisonInfo: FunctionComponent<MutationComparisonInfoProps> = ({ originalComponentProps }) => {
+    const lapis = useContext(LapisUrlContext);
+    return (
+        <Info>
+            <InfoHeadline1>Info for mutation comparison</InfoHeadline1>
+            <InfoParagraph>TODO: https://github.com/GenSpectrum/dashboard-components/issues/465</InfoParagraph>
+            <InfoComponentCode componentName='mutation-comparison' params={originalComponentProps} lapisUrl={lapis} />
+        </Info>
+    );
+};