@genspectrum/dashboard-components 0.15.0 → 0.16.1

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

@@ -21,6 +21,7 @@ import { ProportionSelectorDropdown } from '../components/proportion-selector-dr
 import { ResizeContainer } from '../components/resize-container';
 import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/segment-selector';
 import Tabs from '../components/tabs';
+import { getMaintainAspectRatio } from '../shared/charts/getMaintainAspectRatio';
 import { useQuery } from '../useQuery';
 
 export const mutationComparisonViewSchema = z.union([z.literal(views.table), z.literal(views.venn)]);
@@ -28,7 +29,7 @@ export type MutationComparisonView = z.infer<typeof mutationComparisonViewSchema
 
 const mutationComparisonPropsSchema = z.object({
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     lapisFilters: z.array(namedLapisFilterSchema).min(1),
     sequenceType: sequenceTypeSchema,
     views: z.array(mutationComparisonViewSchema),
@@ -91,6 +92,8 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
         [data, displayedSegments, displayedMutationTypes],
     );
 
+    const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
+
     const getTab = (view: MutationComparisonView) => {
         switch (view) {
             case 'table':
@@ -111,6 +114,7 @@ const MutationComparisonTabs: FunctionComponent<MutationComparisonTabsProps> = (
                         <MutationComparisonVenn
                             data={{ content: filteredData }}
                             proportionInterval={proportionInterval}
+                            maintainAspectRatio={maintainAspectRatio}
                         />
                     ),
                 };

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

@@ -1,4 +1,4 @@
-import { type PreactRenderer, type Meta, type StoryObj } from '@storybook/preact';
+import { type Meta, type PreactRenderer, type StoryObj } from '@storybook/preact';
 import { expect, fireEvent, fn, userEvent, waitFor, within } from '@storybook/test';
 import { type StepFunction } from '@storybook/types';
 
@@ -8,6 +8,7 @@ import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
+import { playThatExpectsErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta<MutationFilterProps> = {
     title: 'Input/MutationFilter',
@@ -219,6 +220,21 @@ export const WithInitialValue: StoryObj<MutationFilterProps> = {
     },
 };
 
+export const WithNoReferenceSequencesDefined: StoryObj<MutationFilterProps> = {
+    ...Default,
+    render: (args) => (
+        <LapisUrlContextProvider value={LAPIS_URL}>
+            <ReferenceGenomeContext.Provider value={{ nucleotideSequences: [], genes: [] }}>
+                <MutationFilter {...args} />
+            </ReferenceGenomeContext.Provider>
+        </LapisUrlContextProvider>
+    ),
+    play: playThatExpectsErrorMessage(
+        'Error - No reference sequences available',
+        'This organism has neither nucleotide nor amino acid sequences',
+    ),
+};
+
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
     const canvas = within(canvasElement);
 

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

@@ -10,6 +10,7 @@ import { type MutationsFilter, mutationsFilterSchema } from '../../types';
 import { type DeletionClass, type InsertionClass, type SubstitutionClass } from '../../utils/mutations';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
 import { ErrorBoundary } from '../components/error-boundary';
+import { UserFacingError } from '../components/error-display';
 import { singleGraphColorRGBByName } from '../shared/charts/colors';
 
 const mutationFilterInnerPropsSchema = z.object({
@@ -54,6 +55,13 @@ export const MutationFilterInner: FunctionComponent<MutationFilterInnerProps> =
 
     const filterRef = useRef<HTMLDivElement>(null);
 
+    if (referenceGenome.nucleotideSequences.length === 0 && referenceGenome.genes.length === 0) {
+        throw new UserFacingError(
+            'No reference sequences available',
+            'This organism has neither nucleotide nor amino acid sequences configured in its reference genome. You cannot filter by mutations.',
+        );
+    }
+
     const handleRemoveValue = (option: ParsedMutationFilter) => {
         const newSelectedFilters = {
             ...selectedFilters,

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

@@ -55,7 +55,6 @@ export const Default: StoryObj<MutationsProps> = {
         sequenceType: 'nucleotide',
         views: ['grid', 'table', 'insertions'],
         width: '100%',
-        height: '700px',
         pageSize: 10,
     },
     parameters: {

package/src/preact/mutations/mutations.tsx

@@ -41,7 +41,7 @@ const mutationsPropsSchema = z.object({
     views: mutationsViewSchema.array(),
     pageSize: z.union([z.boolean(), z.number()]),
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
 });
 export type MutationsProps = z.infer<typeof mutationsPropsSchema>;
 

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,49 +38,32 @@ 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',
         views: ['grid'],
         width: '100%',
-        height: '700px',
         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%',
-        height: '700px',
         granularity: 'year',
-        lapisDateField: 'date',
     },
     play: async ({ canvas }) => {
         await waitFor(() => expect(canvas.getByText('Showing 100 of 137 mutations.', { exact: false })).toBeVisible(), {
@@ -88,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(), {
@@ -106,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(), {
@@ -124,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 });
@@ -157,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,8 +44,13 @@ 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(),
+    height: z.string().optional(),
 });
 export type MutationsOverTimeProps = z.infer<typeof mutationOverTimeSchema>;
 
@@ -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) {