@genspectrum/dashboard-components 0.6.11 → 0.6.12

package/src/preact/components/percent-input.stories.tsx

@@ -0,0 +1,93 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
+
+import { PercentInput, type PercentInputProps } from './percent-intput';
+
+const meta: Meta<PercentInputProps> = {
+    title: 'Component/Percent input',
+    component: PercentInput,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithState: FunctionComponent<{
+    value: number;
+    setValue: (value: number) => void;
+}> = ({ value: initialValue, setValue: setExternalValue }) => {
+    const [value, setValue] = useState(initialValue);
+
+    return (
+        <PercentInput
+            percentage={value}
+            setPercentage={(value: number) => {
+                setValue(value);
+                setExternalValue(value);
+            }}
+        />
+    );
+};
+
+export const PercentInputStory: StoryObj<{
+    value: number;
+    setValue: (value: number) => void;
+}> = {
+    render: (args) => {
+        return <WrapperWithState {...args} />;
+    },
+    args: {
+        value: 5,
+        setValue: fn(),
+    },
+    play: async ({ canvasElement, step, args }) => {
+        const canvas = within(canvasElement);
+
+        const input = () => canvas.getByLabelText('%');
+
+        await step('Expect initial value to be 5%', async () => {
+            await expect(input()).toHaveValue(5);
+        });
+
+        await step('Add digits', async () => {
+            await userEvent.type(input(), '1');
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledWith(51));
+            await expect(input()).toHaveValue(51);
+        });
+
+        await step('Remove digits', async () => {
+            await userEvent.type(input(), '{backspace}');
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledWith(5));
+            await expect(input()).toHaveValue(5);
+        });
+
+        await step('Entering a dot should not trigger the external update function', async () => {
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledTimes(2));
+            await userEvent.type(input(), '.');
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledTimes(2));
+        });
+
+        await step('Deleting all digits should not trigger the external update function', async () => {
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledTimes(2));
+            await userEvent.clear(input());
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledTimes(2));
+        });
+
+        await step('Entering a number outside the range should not trigger the external update function', async () => {
+            await userEvent.type(input(), '10');
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledTimes(4));
+            await userEvent.type(input(), '1');
+            await waitFor(() => expect(args.setValue).toHaveBeenCalledTimes(4));
+        });
+
+        await step(
+            'Removing digits until a valid number is reached triggers the external update function',
+            async () => {
+                await userEvent.type(input(), '{backspace}');
+                await waitFor(() => expect(args.setValue).toHaveBeenCalledWith(10));
+                await expect(input()).toHaveValue(10);
+            },
+        );
+    },
+};

package/src/preact/components/percent-intput.tsx

@@ -21,6 +21,10 @@ export const PercentInput: FunctionComponent<PercentInputProps> = ({ percentage,
         const input = event.target as HTMLInputElement;
         const value = Number(input.value);
 
+        if (value === internalPercentage || input.value === '') {
+            return;
+        }
+
         const inRange = percentageInRange(value);
 
         if (inRange) {

package/src/preact/components/proportion-selector-dropdown.stories.tsx

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, fn, userEvent, within } from '@storybook/test';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 import { type FunctionComponent } from 'preact';
 import { useState } from 'preact/hooks';
 
@@ -59,7 +59,7 @@ export const ProportionSelectorStory: StoryObj<ProportionSelectorDropdownProps>
             await userEvent.clear(minInput);
             await userEvent.type(minInput, '10');
 
-            await expect(button).toHaveTextContent('Proportion 10.0% - 100.0%');
+            await waitFor(() => expect(button).toHaveTextContent('Proportion 10.0% - 100.0%'));
             await expect(args.setMinProportion).toHaveBeenCalledWith(0.1);
         });
     },

package/src/preact/components/proportion-selector-dropdown.tsx

@@ -13,12 +13,14 @@ export const ProportionSelectorDropdown: FunctionComponent<ProportionSelectorDro
     const label = `${(proportionInterval.min * 100).toFixed(1)}% - ${(proportionInterval.max * 100).toFixed(1)}%`;
 
     return (
-        <Dropdown buttonTitle={`Proportion ${label}`} placement={'bottom-start'}>
-            <ProportionSelector
-                proportionInterval={proportionInterval}
-                setMinProportion={setMinProportion}
-                setMaxProportion={setMaxProportion}
-            />
-        </Dropdown>
+        <div className='w-44'>
+            <Dropdown buttonTitle={`Proportion ${label}`} placement={'bottom-start'}>
+                <ProportionSelector
+                    proportionInterval={proportionInterval}
+                    setMinProportion={setMinProportion}
+                    setMaxProportion={setMaxProportion}
+                />
+            </Dropdown>
+        </div>
     );
 };

package/src/preact/components/proportion-selector.stories.tsx

@@ -54,27 +54,27 @@ export const ProportionSelectorStory: StoryObj<ProportionSelectorProps> = {
             const minInput = canvas.getAllByLabelText('%')[0];
             await userEvent.clear(minInput);
             await userEvent.type(minInput, '10');
-            await expect(args.setMinProportion).toHaveBeenCalledWith(0.1);
+            await waitFor(() => expect(args.setMinProportion).toHaveBeenCalledWith(0.1));
         });
 
         await step('Change max proportion to 50%', async () => {
             const maxInput = canvas.getAllByLabelText('%')[1];
             await userEvent.clear(maxInput);
             await userEvent.type(maxInput, '50');
-            await expect(args.setMaxProportion).toHaveBeenCalledWith(0.5);
+            await waitFor(() => expect(args.setMaxProportion).toHaveBeenCalledWith(0.5));
         });
 
         await step('Move min proportion silder to 20%', async () => {
             const minSlider = canvas.getAllByRole('slider')[0];
             await fireEvent.input(minSlider, { target: { value: '20' } });
-            await expect(args.setMinProportion).toHaveBeenCalledWith(0.2);
+            await waitFor(() => expect(args.setMinProportion).toHaveBeenCalledWith(0.2));
             await waitFor(() => expect(canvas.getAllByLabelText('%')[0]).toHaveValue(20));
         });
 
         await step('Move max proportion silder to 80%', async () => {
             const maxSlider = canvas.getAllByRole('slider')[1];
             await fireEvent.input(maxSlider, { target: { value: '80' } });
-            await expect(args.setMaxProportion).toHaveBeenCalledWith(0.8);
+            await waitFor(() => expect(args.setMaxProportion).toHaveBeenCalledWith(0.8));
             await waitFor(() => expect(canvas.getAllByLabelText('%')[1]).toHaveValue(80));
         });
     },

package/src/preact/components/proportion-selector.tsx

@@ -1,4 +1,5 @@
 import { type FunctionComponent } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
 
 import { MinMaxRangeSlider } from './min-max-range-slider';
 import { PercentInput } from './percent-intput';
@@ -11,31 +12,64 @@ export interface ProportionSelectorProps {
     setMaxProportion: (maxProportion: number) => void;
 }
 
+function useUpdateExternalValueInIntervals(
+    setExternalValue: (minProportion: number) => void,
+    updateIntervalInMs: number,
+    internalValue: number,
+) {
+    const hasMounted = useRef(false);
+
+    useEffect(() => {
+        if (!hasMounted.current) {
+            hasMounted.current = true;
+            return;
+        }
+
+        const minTimeout = setTimeout(() => {
+            setExternalValue(internalValue);
+        }, updateIntervalInMs);
+
+        return () => clearTimeout(minTimeout);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to run this effect when the internal value changes
+    }, [internalValue]);
+}
+
 export const ProportionSelector: FunctionComponent<ProportionSelectorProps> = ({
     proportionInterval,
     setMinProportion,
     setMaxProportion,
 }) => {
+    const updateIntervalInMs = 300;
     const { min: minProportion, max: maxProportion } = proportionInterval;
+
+    const [internalMinProportion, setInternalMinProportion] = useState(minProportion);
+    const [internalMaxProportion, setInternalMaxProportion] = useState(maxProportion);
+
+    useUpdateExternalValueInIntervals(setMinProportion, updateIntervalInMs, internalMinProportion);
+    const updateMinPercentage = (minPercentage: number) => {
+        const newMinProportion = minPercentage / 100;
+        setInternalMinProportion(newMinProportion);
+    };
+
+    useUpdateExternalValueInIntervals(setMaxProportion, updateIntervalInMs, internalMaxProportion);
+    const updateMaxPercentage = (maxPercentage: number) => {
+        const newMaxProportion = maxPercentage / 100;
+        setInternalMaxProportion(newMaxProportion);
+    };
+
     return (
         <div class='flex flex-col w-64 mb-2'>
             <div class='flex items-center '>
-                <PercentInput
-                    percentage={minProportion * 100}
-                    setPercentage={(percentage) => setMinProportion(percentage / 100)}
-                />
+                <PercentInput percentage={internalMinProportion * 100} setPercentage={updateMinPercentage} />
                 <div class='m-2'>-</div>
-                <PercentInput
-                    percentage={maxProportion * 100}
-                    setPercentage={(percentage) => setMaxProportion(percentage / 100)}
-                />
+                <PercentInput percentage={internalMaxProportion * 100} setPercentage={updateMaxPercentage} />
             </div>
             <div class='my-1'>
                 <MinMaxRangeSlider
-                    min={minProportion * 100}
-                    max={maxProportion * 100}
-                    setMin={(percentage) => setMinProportion(percentage / 100)}
-                    setMax={(percentage) => setMaxProportion(percentage / 100)}
+                    min={internalMinProportion * 100}
+                    max={internalMaxProportion * 100}
+                    setMin={updateMinPercentage}
+                    setMax={updateMaxPercentage}
                 />
             </div>
         </div>

package/src/preact/components/segment-selector.stories.tsx

@@ -0,0 +1,151 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, within } from '@storybook/test';
+import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
+
+import { type DisplayedSegment, SegmentSelector, type SegmentSelectorProps } from './segment-selector';
+
+const meta: Meta<SegmentSelectorProps> = {
+    title: 'Component/Segment selector',
+    component: SegmentSelector,
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithState: FunctionComponent<{
+    displayedSegments: DisplayedSegment[];
+}> = ({ displayedSegments: initialDisplayedSegments }) => {
+    const [displayedSegments, setDisplayedSegments] = useState<DisplayedSegment[]>(initialDisplayedSegments);
+
+    return (
+        <SegmentSelector
+            displayedSegments={displayedSegments}
+            setDisplayedSegments={(items: DisplayedSegment[]) => {
+                setDisplayedSegments(items);
+            }}
+        />
+    );
+};
+
+export const AllSegmentsSelected: StoryObj<SegmentSelectorProps> = {
+    render: (args) => {
+        return <WrapperWithState {...args} />;
+    },
+    args: {
+        displayedSegments: [
+            {
+                segment: 'ORF1a',
+                label: 'ORF1a',
+                checked: true,
+            },
+            {
+                segment: 'S',
+                label: 'S',
+                checked: true,
+            },
+            {
+                segment: 'VeryLongSegmentName',
+                label: 'VeryLongSegmentName',
+                checked: true,
+            },
+        ],
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step("Show 'All segments' as label", async () => {
+            await expect(canvas.getByText('All segments')).toBeInTheDocument();
+        });
+    },
+};
+
+export const NoSegmentsSelected: StoryObj<SegmentSelectorProps> = {
+    ...AllSegmentsSelected,
+    args: {
+        displayedSegments: [
+            {
+                segment: 'ORF1a',
+                label: 'ORF1a',
+                checked: false,
+            },
+            {
+                segment: 'S',
+                label: 'S',
+                checked: false,
+            },
+            {
+                segment: 'VeryLongSegmentName',
+                label: 'VeryLongSegmentName',
+                checked: false,
+            },
+        ],
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step("Show 'No segments' as label", async () => {
+            await expect(canvas.getByText('No segments')).toBeInTheDocument();
+        });
+    },
+};
+
+export const LongSegmentsSelected: StoryObj<SegmentSelectorProps> = {
+    ...AllSegmentsSelected,
+    args: {
+        displayedSegments: [
+            {
+                segment: 'ORF1a',
+                label: 'ORF1a',
+                checked: true,
+            },
+            {
+                segment: 'S',
+                label: 'S',
+                checked: false,
+            },
+            {
+                segment: 'VeryLongSegmentName',
+                label: 'VeryLongSegmentName',
+                checked: true,
+            },
+        ],
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Show number of active segments as label', async () => {
+            await expect(canvas.getByText('2 segments')).toBeInTheDocument();
+        });
+    },
+};
+
+export const ShortSegmentsSelected: StoryObj<SegmentSelectorProps> = {
+    ...AllSegmentsSelected,
+    args: {
+        displayedSegments: [
+            {
+                segment: 'ORF1a',
+                label: 'ORF1a',
+                checked: true,
+            },
+            {
+                segment: 'S',
+                label: 'S',
+                checked: true,
+            },
+            {
+                segment: 'VeryLongSegmentName',
+                label: 'VeryLongSegmentName',
+                checked: false,
+            },
+        ],
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Show active segments as label', async () => {
+            await expect(canvas.getByText('ORF1a, S')).toBeInTheDocument();
+        });
+    },
+};

package/src/preact/components/{SegmentSelector.tsx → segment-selector.tsx}

@@ -13,39 +13,48 @@ export type DisplayedSegment = CheckboxItem & {
 export type SegmentSelectorProps = {
     displayedSegments: DisplayedSegment[];
     setDisplayedSegments: (items: DisplayedSegment[]) => void;
-    prefix?: string;
 };
 
-const getSegmentSelectorLabel = (displayedSegments: DisplayedSegment[], prefix: string) => {
+export const SegmentSelector: FunctionComponent<SegmentSelectorProps> = ({
+    displayedSegments,
+    setDisplayedSegments,
+}) => {
+    if (displayedSegments.length <= 1) {
+        return null;
+    }
+
+    return (
+        <div className='w-24'>
+            <CheckboxSelector
+                items={displayedSegments}
+                label={getSegmentSelectorLabel(displayedSegments)}
+                setItems={(items) => setDisplayedSegments(items)}
+            />
+        </div>
+    );
+};
+
+const getSegmentSelectorLabel = (displayedSegments: DisplayedSegment[]) => {
     const allSelectedSelected = displayedSegments
         .filter((segment) => segment.checked)
         .map((segment) => segment.segment);
 
     if (allSelectedSelected.length === 0) {
-        return `${prefix}none`;
+        return `No segments`;
     }
     if (displayedSegments.length === allSelectedSelected.length) {
-        return `${prefix}all`;
+        return `All segments`;
     }
-    return prefix + allSelectedSelected.join(', ');
-};
 
-export const SegmentSelector: FunctionComponent<SegmentSelectorProps> = ({
-    displayedSegments,
-    setDisplayedSegments,
-    prefix,
-}) => {
-    if (displayedSegments.length <= 1) {
-        return null;
+    const longestDisplayString = `All segments`;
+
+    const allSelectedSelectedString = allSelectedSelected.join(', ');
+
+    if (longestDisplayString.length >= allSelectedSelectedString.length) {
+        return allSelectedSelectedString;
     }
 
-    return (
-        <CheckboxSelector
-            items={displayedSegments}
-            label={getSegmentSelectorLabel(displayedSegments, prefix || 'Segments: ')}
-            setItems={(items) => setDisplayedSegments(items)}
-        />
-    );
+    return `${allSelectedSelected.length} ${allSelectedSelected.length === 1 ? 'segment' : 'segments'}`;
 };
 
 export function useDisplayedSegments(sequenceType: SequenceType) {

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

@@ -128,7 +128,7 @@ export const FilterForOnlyDeletions: StoryObj<MutationComparisonProps> = {
         await waitFor(() => expect(someSubstitution()).toBeVisible());
         await waitFor(() => expect(someDeletion()).toBeVisible());
 
-        canvas.getByRole('button', { name: /Types:/ }).click();
+        canvas.getByRole('button', { name: 'Subst., Del.' }).click();
         canvas.getByLabelText('Substitutions').click();
 
         await waitFor(() => expect(someSubstitution()).not.toBeInTheDocument());

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

@@ -7,7 +7,6 @@ import { MutationComparisonVenn } from './mutation-comparison-venn';
 import { filterMutationData, type MutationData, queryMutationData } from './queryMutationData';
 import { type NamedLapisFilter, type SequenceType } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
@@ -19,6 +18,7 @@ import { NoDataDisplay } from '../components/no-data-display';
 import { type ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
 import { ResizeContainer } from '../components/resize-container';
+import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/segment-selector';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 

package/src/preact/mutationComparison/queryMutationData.ts

@@ -1,7 +1,7 @@
 import { querySubstitutionsOrDeletions } from '../../query/querySubstitutionsOrDeletions';
 import { type NamedLapisFilter, type SubstitutionOrDeletionEntry } from '../../types';
-import { type DisplayedSegment } from '../components/SegmentSelector';
 import { type DisplayedMutationType } from '../components/mutation-type-selector';
+import { type DisplayedSegment } from '../components/segment-selector';
 
 export type MutationData = {
     displayName: string;

package/src/preact/mutations/mutations-grid.tsx

@@ -1,5 +1,6 @@
 import { type Row } from 'gridjs';
 import { type FunctionComponent } from 'preact';
+import { useMemo } from 'preact/hooks';
 
 import { getMutationsGridData } from './getMutationsGridData';
 import { type SequenceType, type SubstitutionOrDeletionEntry } from '../../types';
@@ -84,7 +85,10 @@ export const MutationsGrid: FunctionComponent<MutationsGridProps> = ({
         return {};
     };
 
-    const tableData = getMutationsGridData(data, sequenceType, proportionInterval).map((row) => Object.values(row));
+    const tableData = useMemo(
+        () => getMutationsGridData(data, sequenceType, proportionInterval).map((row) => Object.values(row)),
+        [data, proportionInterval, sequenceType],
+    );
 
     return <Table data={tableData} columns={getHeaders()} pageSize={pageSize} />;
 };

package/src/preact/mutations/mutations.tsx

@@ -14,7 +14,6 @@ import {
     type SubstitutionOrDeletionEntry,
 } from '../../types';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
 import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
@@ -26,6 +25,7 @@ import { NoDataDisplay } from '../components/no-data-display';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
 import { ResizeContainer } from '../components/resize-container';
+import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/segment-selector';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 

package/src/preact/mutations/queryMutations.ts

@@ -6,8 +6,8 @@ import {
     type MutationEntry,
     type SubstitutionOrDeletionEntry,
 } from '../../types';
-import { type DisplayedSegment } from '../components/SegmentSelector';
 import { type DisplayedMutationType } from '../components/mutation-type-selector';
+import { type DisplayedSegment } from '../components/segment-selector';
 
 export async function queryMutationsData(
     lapisFilter: LapisFilter,

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

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 
 import { filterDisplayedSegments, filterMutationTypes, filterProportion } from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
-import { Map2d } from '../../utils/Map2d';
+import { Map2dBase } from '../../utils/map2d';
 import { Deletion, Substitution } from '../../utils/mutations';
 import { type Temporal } from '../../utils/temporal';
 import { yearMonthDay } from '../../utils/temporalTestHelpers';
@@ -10,7 +10,7 @@ import { yearMonthDay } from '../../utils/temporalTestHelpers';
 describe('getFilteredMutationOverTimeData', () => {
     describe('filterDisplayedSegments', () => {
         it('should filter by displayed segments', () => {
-            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+            const data = new Map2dBase<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
 
             data.set(new Substitution('someSegment', 'A', 'T', 123), yearMonthDay('2021-01-01'), {
                 count: 1,
@@ -36,7 +36,7 @@ describe('getFilteredMutationOverTimeData', () => {
 
     describe('filterMutationTypes', () => {
         it('should filter by mutation types', () => {
-            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+            const data = new Map2dBase<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
 
             data.set(new Substitution('someSegment', 'A', 'T', 123), yearMonthDay('2021-01-01'), {
                 count: 1,
@@ -120,7 +120,7 @@ describe('getFilteredMutationOverTimeData', () => {
         });
 
         function getMutationOverTimeData() {
-            const data = new Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
+            const data = new Map2dBase<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>();
             data.set(someSubstitution, yearMonthDay('2021-01-01'), { count: 1, proportion: 0.1 });
             data.set(someSubstitution, yearMonthDay('2021-02-02'), { count: 99, proportion: 0.99 });
             return data;

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -1,8 +1,9 @@
 import { type Dataset } from '../../operator/Dataset';
 import { type MutationOverTimeDataGroupedByMutation } from '../../query/queryMutationsOverTime';
 import { type DeletionEntry, type SubstitutionEntry } from '../../types';
-import type { DisplayedSegment } from '../components/SegmentSelector';
+import { Map2dView } from '../../utils/map2d';
 import type { DisplayedMutationType } from '../components/mutation-type-selector';
+import type { DisplayedSegment } from '../components/segment-selector';
 
 export function getFilteredMutationOverTimeData(
     data: MutationOverTimeDataGroupedByMutation,
@@ -11,7 +12,7 @@ export function getFilteredMutationOverTimeData(
     displayedMutationTypes: DisplayedMutationType[],
     proportionInterval: { min: number; max: number },
 ) {
-    const filteredData = data.copy();
+    const filteredData = new Map2dView(data);
     filterDisplayedSegments(displayedSegments, filteredData);
     filterMutationTypes(displayedMutationTypes, filteredData);
     filterProportion(filteredData, overallMutationData, proportionInterval);

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

@@ -18,7 +18,6 @@ import {
 } from '../../types';
 import { compareTemporal } from '../../utils/temporal';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/SegmentSelector';
 import { type ColorScale } from '../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../components/color-scale-selector-dropdown';
 import { CsvDownloadButton } from '../components/csv-download-button';
@@ -32,6 +31,7 @@ import { NoDataDisplay } from '../components/no-data-display';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
 import { ResizeContainer } from '../components/resize-container';
+import { type DisplayedSegment, SegmentSelector, useDisplayedSegments } from '../components/segment-selector';
 import Tabs from '../components/tabs';
 import { sortSubstitutionsAndDeletions } from '../shared/sort/sortSubstitutionsAndDeletions';
 import { useQuery } from '../useQuery';

package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -62,8 +62,9 @@ const NumberSequencesOverTimeInner = ({
 }: NumberSequencesOverTimeInnerProps) => {
     const lapis = useContext(LapisUrlContext);
 
-    const { data, error, isLoading } = useQuery(() =>
-        queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField, granularity, smoothingWindow),
+    const { data, error, isLoading } = useQuery(
+        () => queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField, granularity, smoothingWindow),
+        [lapis, lapisFilter, lapisDateField, granularity, smoothingWindow],
     );
 
     if (isLoading) {

package/src/preact/useQuery.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'preact/hooks';
 
-export function useQuery<Data>(fetchDataCallback: () => Promise<Data>, dependencies: unknown[] = []) {
+export function useQuery<Data>(fetchDataCallback: () => Promise<Data>, dependencies: unknown[]) {
     const [data, setData] = useState<Data | null>(null);
     const [error, setError] = useState<Error | null>(null);
     const [isLoading, setIsLoading] = useState(true);