@genspectrum/dashboard-components 0.16.0 → 0.16.2

package/dist/util.d.ts

@@ -912,7 +912,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -920,7 +920,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -928,7 +928,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -936,7 +936,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -992,11 +992,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1004,7 +1003,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1012,10 +1011,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1023,7 +1023,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.16.0",
+    "version": "0.16.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/ReferenceGenomeContext.ts

@@ -4,10 +4,12 @@ import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
 
 const UNINITIALIZED_SEQUENCE = '__uninitialized__';
 
-export const ReferenceGenomeContext = createContext<ReferenceGenome>({
+export const INITIAL_REFERENCE_GENOMES = {
     nucleotideSequences: [{ name: UNINITIALIZED_SEQUENCE, sequence: '' }],
     genes: [],
-});
+};
+
+export const ReferenceGenomeContext = createContext<ReferenceGenome>(INITIAL_REFERENCE_GENOMES);
 
 export function isNotInitialized(referenceGenome: ReferenceGenome) {
     return (

package/src/preact/components/downshift-combobox.tsx

@@ -1,6 +1,6 @@
 import { useCombobox } from 'downshift/preact';
 import { type ComponentChild } from 'preact';
-import { useRef, useState } from 'preact/hooks';
+import { useMemo, useRef, useState } from 'preact/hooks';
 
 export function DownshiftCombobox<Item>({
     allItems,
@@ -21,8 +21,10 @@ export function DownshiftCombobox<Item>({
 }) {
     const initialSelectedItem = value ?? null;
 
-    const [items, setItems] = useState(
-        allItems.filter((item) => filterItemsByInputValue(item, itemToString(initialSelectedItem))),
+    const [itemsFilter, setItemsFilter] = useState(itemToString(initialSelectedItem));
+    const items = useMemo(
+        () => allItems.filter((item) => filterItemsByInputValue(item, itemsFilter)),
+        [allItems, filterItemsByInputValue, itemsFilter],
     );
     const divRef = useRef<HTMLDivElement>(null);
 
@@ -52,7 +54,7 @@ export function DownshiftCombobox<Item>({
         closeMenu,
     } = useCombobox({
         onInputValueChange({ inputValue }) {
-            setItems(allItems.filter((item) => filterItemsByInputValue(item, inputValue)));
+            setItemsFilter(inputValue);
         },
         onSelectedItemChange({ selectedItem }) {
             if (selectedItem !== null) {

package/src/preact/components/info.tsx

@@ -97,6 +97,7 @@ function componentParametersToCode(componentName: string, params: object, lapisU
 
     const attributes = indentLines(
         Object.entries(params)
+            .filter(([_, value]) => value !== undefined)
             .map(([key, value]) => `${key}='${stringifyIfNeeded(value) as string}'`)
             .join('\n'),
         4,

package/src/preact/mutationsOverTime/getFilteredMutationsOverTime.spec.ts

@@ -15,16 +15,17 @@ describe('getFilteredMutationOverTimeData', () => {
             someDeletionEntry,
         ]);
 
-        const result = getFilteredMutationOverTimeData(
+        const result = getFilteredMutationOverTimeData({
             data,
             overallMutationData,
-            [
+            displayedSegments: [
                 { segment: 'someSegment', checked: false, label: 'Some Segment' },
                 { segment: 'someOtherSegment', checked: true, label: 'Some Other Segment' },
             ],
-            [],
+            displayedMutationTypes: [],
             proportionInterval,
-        );
+            displayMutations: undefined,
+        });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution]);
     });
@@ -36,11 +37,11 @@ describe('getFilteredMutationOverTimeData', () => {
             someDeletionEntry,
         ]);
 
-        const result = getFilteredMutationOverTimeData(
+        const result = getFilteredMutationOverTimeData({
             data,
             overallMutationData,
-            [],
-            [
+            displayedSegments: [],
+            displayedMutationTypes: [
                 {
                     type: 'substitution',
                     checked: false,
@@ -53,7 +54,7 @@ describe('getFilteredMutationOverTimeData', () => {
                 },
             ],
             proportionInterval,
-        );
+        });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([someDeletion]);
     });
@@ -65,7 +66,13 @@ describe('getFilteredMutationOverTimeData', () => {
             { ...someDeletionEntry, proportion: inFilter },
         ]);
 
-        const result = getFilteredMutationOverTimeData(data, overallMutationData, [], [], proportionInterval);
+        const result = getFilteredMutationOverTimeData({
+            data,
+            overallMutationData,
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+        });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution, someDeletion]);
     });
@@ -77,7 +84,13 @@ describe('getFilteredMutationOverTimeData', () => {
             { ...someDeletionEntry, proportion: inFilter },
         ]);
 
-        const result = getFilteredMutationOverTimeData(data, overallMutationData, [], [], proportionInterval);
+        const result = getFilteredMutationOverTimeData({
+            data,
+            overallMutationData,
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+        });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution, someDeletion]);
     });
@@ -90,7 +103,13 @@ describe('getFilteredMutationOverTimeData', () => {
         ]);
         data.set(someSubstitution, someTemporal, { ...someMutationOverTimeValue, proportion: belowFilter });
 
-        const result = getFilteredMutationOverTimeData(data, overallMutationData, [], [], proportionInterval);
+        const result = getFilteredMutationOverTimeData({
+            data,
+            overallMutationData,
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+        });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution, anotherSubstitution, someDeletion]);
     });
@@ -103,7 +122,13 @@ describe('getFilteredMutationOverTimeData', () => {
         ]);
         data.set(someSubstitution, someTemporal, { ...someMutationOverTimeValue, proportion: aboveFilter });
 
-        const result = getFilteredMutationOverTimeData(data, overallMutationData, [], [], proportionInterval);
+        const result = getFilteredMutationOverTimeData({
+            data,
+            overallMutationData,
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+        });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution, anotherSubstitution, someDeletion]);
     });
@@ -114,7 +139,13 @@ describe('getFilteredMutationOverTimeData', () => {
             { ...anotherSubstitutionEntry, proportion: inFilter },
             { ...someDeletionEntry, proportion: inFilter },
         ]);
-        const result = getFilteredMutationOverTimeData(data, overallMutationData, [], [], proportionInterval);
+        const result = getFilteredMutationOverTimeData({
+            data,
+            overallMutationData,
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+        });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution, anotherSubstitution, someDeletion]);
     });
@@ -126,11 +157,36 @@ describe('getFilteredMutationOverTimeData', () => {
             { ...someDeletionEntry, proportion: inFilter },
         ]);
 
-        const result = getFilteredMutationOverTimeData(data, overallMutationData, [], [], proportionInterval);
+        const result = getFilteredMutationOverTimeData({
+            data,
+            overallMutationData,
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+        });
 
         expect(result.getFirstAxisKeys()).to.deep.equal([someSubstitution, anotherSubstitution, someDeletion]);
     });
 
+    it('should filter by displayMutations', () => {
+        const { data, overallMutationData } = prepareMutationOverTimeData([
+            someSubstitutionEntry,
+            anotherSubstitutionEntry,
+            someDeletionEntry,
+        ]);
+
+        const result = getFilteredMutationOverTimeData({
+            data,
+            overallMutationData,
+            displayedSegments: [],
+            displayedMutationTypes: [],
+            proportionInterval,
+            displayMutations: [anotherSubstitution.code, someDeletion.code],
+        });
+
+        expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution, someDeletion]);
+    });
+
     const belowFilter = 0.1;
     const atFilterMin = 0.2;
     const inFilter = 0.5;

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -1,3 +1,5 @@
+import z from 'zod';
+
 import { type MutationOverTimeDataMap } from './MutationOverTimeData';
 import { type SubstitutionOrDeletionEntry } from '../../types';
 import { Map2dView } from '../../utils/map2d';
@@ -5,15 +7,31 @@ import type { Deletion, Substitution } from '../../utils/mutations';
 import type { DisplayedMutationType } from '../components/mutation-type-selector';
 import type { DisplayedSegment } from '../components/segment-selector';
 
-export function getFilteredMutationOverTimeData(
-    data: MutationOverTimeDataMap,
-    overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[],
-    displayedSegments: DisplayedSegment[],
-    displayedMutationTypes: DisplayedMutationType[],
-    proportionInterval: { min: number; max: number },
-) {
+export const displayMutationsSchema = z.array(z.string()).min(1);
+export type DisplayMutations = z.infer<typeof displayMutationsSchema>;
+
+export type GetFilteredMutationOverTimeDataArgs = {
+    data: MutationOverTimeDataMap;
+    overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[];
+    displayedSegments: DisplayedSegment[];
+    displayedMutationTypes: DisplayedMutationType[];
+    proportionInterval: { min: number; max: number };
+    displayMutations?: DisplayMutations;
+};
+
+export function getFilteredMutationOverTimeData({
+    data,
+    overallMutationData,
+    displayedSegments,
+    displayedMutationTypes,
+    proportionInterval,
+    displayMutations,
+}: GetFilteredMutationOverTimeDataArgs) {
     const filteredData = new Map2dView(data);
 
+    const displayMutationsSet =
+        displayMutations === undefined ? null : new Set(displayMutations.map((it) => it.toUpperCase()));
+
     const mutationsToFilterOut = overallMutationData.filter((entry) => {
         if (entry.proportion < proportionInterval.min || entry.proportion > proportionInterval.max) {
             return true;
@@ -21,6 +39,11 @@ export function getFilteredMutationOverTimeData(
         if (displayedSegments.some((segment) => segment.segment === entry.mutation.segment && !segment.checked)) {
             return true;
         }
+
+        if (displayMutationsSet !== null && !displayMutationsSet.has(entry.mutation.code)) {
+            return true;
+        }
+
         return displayedMutationTypes.some(
             (mutationType) => mutationType.type === entry.mutation.type && !mutationType.checked,
         );

package/src/preact/mutationsOverTime/mutations-over-time-grid.tsx

@@ -39,63 +39,64 @@ const MutationsOverTimeGrid: FunctionComponent<MutationsOverTimeGridProps> = ({
                     to reduce the number of mutations.
                 </div>
             )}
-            {allMutations.length === 0 && (
+            {allMutations.length === 0 ? (
                 <div className={'flex justify-center'}>No data available for your filters.</div>
+            ) : (
+                <div
+                    ref={gridRef}
+                    style={{
+                        display: 'grid',
+                        gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
+                        gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`,
+                    }}
+                    className='text-center'
+                >
+                    {dates.map((date, columnIndex) => (
+                        <div
+                            className='@container font-semibold'
+                            style={{ gridRowStart: 1, gridColumnStart: columnIndex + 2 }}
+                            key={date.dateString}
+                        >
+                            <p {...styleGridHeader(columnIndex, dates)}>{date.dateString}</p>
+                        </div>
+                    ))}
+                    {shownMutations.map((mutation, rowIndex) => {
+                        return (
+                            <Fragment key={`fragment-${mutation.code}`}>
+                                <div
+                                    key={`mutation-${mutation.code}`}
+                                    style={{ gridRowStart: rowIndex + 2, gridColumnStart: 1 }}
+                                >
+                                    <MutationCell mutation={mutation} />
+                                </div>
+                                {dates.map((date, columnIndex) => {
+                                    const value = data.get(mutation, date) ?? null;
+                                    const tooltipPosition = getTooltipPosition(
+                                        rowIndex,
+                                        shownMutations.length,
+                                        columnIndex,
+                                        dates.length,
+                                    );
+                                    return (
+                                        <div
+                                            style={{ gridRowStart: rowIndex + 2, gridColumnStart: columnIndex + 2 }}
+                                            key={`${mutation.code}-${date.dateString}`}
+                                        >
+                                            <ProportionCell
+                                                value={value}
+                                                date={date}
+                                                mutation={mutation}
+                                                tooltipPosition={tooltipPosition}
+                                                colorScale={colorScale}
+                                            />
+                                        </div>
+                                    );
+                                })}
+                            </Fragment>
+                        );
+                    })}
+                </div>
             )}
-            <div
-                ref={gridRef}
-                style={{
-                    display: 'grid',
-                    gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
-                    gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`,
-                }}
-                className='text-center'
-            >
-                {dates.map((date, columnIndex) => (
-                    <div
-                        className='@container font-semibold'
-                        style={{ gridRowStart: 1, gridColumnStart: columnIndex + 2 }}
-                        key={date.dateString}
-                    >
-                        <p {...styleGridHeader(columnIndex, dates)}>{date.dateString}</p>
-                    </div>
-                ))}
-                {shownMutations.map((mutation, rowIndex) => {
-                    return (
-                        <Fragment key={`fragment-${mutation.code}`}>
-                            <div
-                                key={`mutation-${mutation.code}`}
-                                style={{ gridRowStart: rowIndex + 2, gridColumnStart: 1 }}
-                            >
-                                <MutationCell mutation={mutation} />
-                            </div>
-                            {dates.map((date, columnIndex) => {
-                                const value = data.get(mutation, date) ?? null;
-                                const tooltipPosition = getTooltipPosition(
-                                    rowIndex,
-                                    shownMutations.length,
-                                    columnIndex,
-                                    dates.length,
-                                );
-                                return (
-                                    <div
-                                        style={{ gridRowStart: rowIndex + 2, gridColumnStart: columnIndex + 2 }}
-                                        key={`${mutation.code}-${date.dateString}`}
-                                    >
-                                        <ProportionCell
-                                            value={value}
-                                            date={date}
-                                            mutation={mutation}
-                                            tooltipPosition={tooltipPosition}
-                                            colorScale={colorScale}
-                                        />
-                                    </div>
-                                );
-                            })}
-                        </Fragment>
-                    );
-                })}
-            </div>
         </>
     );
 };

package/src/preact/mutationsOverTime/mutations-over-time.stories.tsx

@@ -28,6 +28,8 @@ const meta: Meta<MutationsOverTimeProps> = {
             control: { type: 'radio' },
         },
         lapisDateField: { control: 'text' },
+        displayMutations: { control: 'object' },
+        initialMeanProportionInterval: { control: 'object' },
     },
     parameters: {
         fetchMock: {},
@@ -36,27 +38,14 @@ const meta: Meta<MutationsOverTimeProps> = {
 
 export default meta;
 
-const Template = {
+export const Default: StoryObj<MutationsOverTimeProps> = {
     render: (args: MutationsOverTimeProps) => (
         <LapisUrlContextProvider value={LAPIS_URL}>
             <ReferenceGenomeContext.Provider value={referenceGenome}>
-                <MutationsOverTime
-                    lapisFilter={args.lapisFilter}
-                    sequenceType={args.sequenceType}
-                    views={args.views}
-                    width={args.width}
-                    height={args.height}
-                    granularity={args.granularity}
-                    lapisDateField={args.lapisDateField}
-                />
+                <MutationsOverTime {...args} />
             </ReferenceGenomeContext.Provider>
         </LapisUrlContextProvider>
     ),
-};
-
-// This test uses mock data: defaultMockData.ts (through mutationOverTimeWorker.mock.ts)
-export const Default: StoryObj<MutationsOverTimeProps> = {
-    ...Template,
     args: {
         lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
         sequenceType: 'nucleotide',
@@ -64,19 +53,17 @@ export const Default: StoryObj<MutationsOverTimeProps> = {
         width: '100%',
         granularity: 'month',
         lapisDateField: 'date',
+        initialMeanProportionInterval: { min: 0.05, max: 0.9 },
     },
 };
 
 // This test uses mock data: showMessagWhenTooManyMutations.ts (through mutationOverTimeWorker.mock.ts)
 export const ShowsMessageWhenTooManyMutations: StoryObj<MutationsOverTimeProps> = {
-    ...Template,
+    ...Default,
     args: {
+        ...Default.args,
         lapisFilter: { dateFrom: '2023-01-01', dateTo: '2023-12-31' },
-        sequenceType: 'nucleotide',
-        views: ['grid'],
-        width: '100%',
         granularity: 'year',
-        lapisDateField: 'date',
     },
     play: async ({ canvas }) => {
         await waitFor(() => expect(canvas.getByText('Showing 100 of 137 mutations.', { exact: false })).toBeVisible(), {
@@ -86,15 +73,12 @@ export const ShowsMessageWhenTooManyMutations: StoryObj<MutationsOverTimeProps>
 };
 
 export const ShowsNoDataWhenNoMutationsAreInFilter: StoryObj<MutationsOverTimeProps> = {
-    ...Template,
+    ...Default,
     args: {
+        ...Default.args,
         lapisFilter: { dateFrom: '1800-01-01', dateTo: '1800-01-02' },
-        sequenceType: 'nucleotide',
-        views: ['grid'],
-        width: '100%',
         height: '700px',
         granularity: 'year',
-        lapisDateField: 'date',
     },
     play: async ({ canvas }) => {
         await waitFor(() => expect(canvas.getByText('No data available.', { exact: false })).toBeVisible(), {
@@ -104,15 +88,12 @@ export const ShowsNoDataWhenNoMutationsAreInFilter: StoryObj<MutationsOverTimePr
 };
 
 export const ShowsNoDataMessageWhenThereAreNoDatesInFilter: StoryObj<MutationsOverTimeProps> = {
-    ...Template,
+    ...Default,
     args: {
+        ...Default.args,
         lapisFilter: { dateFrom: '2345-01-01', dateTo: '2020-01-02' },
-        sequenceType: 'nucleotide',
-        views: ['grid'],
-        width: '100%',
         height: '700px',
         granularity: 'year',
-        lapisDateField: 'date',
     },
     play: async ({ canvas }) => {
         await waitFor(() => expect(canvas.getByText('No data available.', { exact: false })).toBeVisible(), {
@@ -122,15 +103,10 @@ export const ShowsNoDataMessageWhenThereAreNoDatesInFilter: StoryObj<MutationsOv
 };
 
 export const ShowsNoDataMessageForStrictFilters: StoryObj<MutationsOverTimeProps> = {
-    ...Template,
+    ...Default,
     args: {
+        ...Default.args,
         lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
-        sequenceType: 'nucleotide',
-        views: ['grid'],
-        width: '100%',
-        height: '700px',
-        granularity: 'month',
-        lapisDateField: 'date',
     },
     play: async ({ canvas }) => {
         await waitFor(() => expect(canvas.getByText('Grid')).toBeVisible(), { timeout: 10000 });
@@ -155,6 +131,19 @@ export const ShowsNoDataMessageForStrictFilters: StoryObj<MutationsOverTimeProps
     },
 };
 
+export const ShowsNoDataForStrictInitialProportionInterval: StoryObj<MutationsOverTimeProps> = {
+    ...ShowsNoDataMessageForStrictFilters,
+    args: {
+        ...ShowsNoDataMessageForStrictFilters.args,
+        initialMeanProportionInterval: { min: 0.4, max: 0.41 },
+    },
+    play: async ({ canvas }) => {
+        await waitFor(() =>
+            expect(canvas.getByText('No data available for your filters.', { exact: false })).toBeVisible(),
+        );
+    },
+};
+
 export const WithNoLapisDateFieldField: StoryObj<MutationsOverTimeProps> = {
     ...Default,
     args: {

package/src/preact/mutationsOverTime/mutations-over-time.tsx

@@ -5,7 +5,7 @@ import z from 'zod';
 // @ts-expect-error -- uses subpath imports and vite worker import
 import MutationOverTimeWorker from '#mutationOverTime?worker&inline';
 import { BaseMutationOverTimeDataMap, type MutationOverTimeDataMap } from './MutationOverTimeData';
-import { getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
+import { displayMutationsSchema, getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeWorkerResponse } from './mutationOverTimeWorker';
 import MutationsOverTimeGrid from './mutations-over-time-grid';
 import { type MutationOverTimeQuery } from '../../query/queryMutationsOverTime';
@@ -44,6 +44,11 @@ const mutationOverTimeSchema = z.object({
     views: z.array(mutationsOverTimeViewSchema),
     granularity: temporalGranularitySchema,
     lapisDateField: z.string().min(1),
+    displayMutations: displayMutationsSchema.optional(),
+    initialMeanProportionInterval: z.object({
+        min: z.number().min(0).max(1),
+        max: z.number().min(0).max(1),
+    }),
     width: z.string(),
     height: z.string().optional(),
 });
@@ -116,7 +121,7 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     originalComponentProps,
     overallMutationData,
 }) => {
-    const [proportionInterval, setProportionInterval] = useState({ min: 0.05, max: 0.9 });
+    const [proportionInterval, setProportionInterval] = useState(originalComponentProps.initialMeanProportionInterval);
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
 
     const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
@@ -125,15 +130,25 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
         { label: 'Deletions', checked: true, type: 'deletion' },
     ]);
 
+    const displayMutations = originalComponentProps.displayMutations;
+
     const filteredData = useMemo(() => {
-        return getFilteredMutationOverTimeData(
-            mutationOverTimeData,
+        return getFilteredMutationOverTimeData({
+            data: mutationOverTimeData,
             overallMutationData,
             displayedSegments,
             displayedMutationTypes,
             proportionInterval,
-        );
-    }, [mutationOverTimeData, overallMutationData, displayedSegments, displayedMutationTypes, proportionInterval]);
+            displayMutations,
+        });
+    }, [
+        mutationOverTimeData,
+        overallMutationData,
+        displayedSegments,
+        displayedMutationTypes,
+        proportionInterval,
+        displayMutations,
+    ]);
 
     const getTab = (view: MutationsOverTimeView) => {
         if (filteredData === undefined) {