@genspectrum/dashboard-components 0.18.1 → 0.18.3

package/src/preact/components/annotated-mutation.tsx

@@ -45,7 +45,7 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
     annotationsProvider,
     modalRef,
 }) => {
-    const mutationAnnotations = annotationsProvider(mutation.code, sequenceType);
+    const mutationAnnotations = annotationsProvider(mutation, sequenceType);
 
     if (mutationAnnotations === undefined || mutationAnnotations.length === 0) {
         return mutation.code;
@@ -67,7 +67,11 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
     );
 
     return (
-        <ButtonWithModalDialog buttonClassName={'select-text'} modalContent={modalContent} modalRef={modalRef}>
+        <ButtonWithModalDialog
+            buttonClassName={'select-text cursor-pointer'}
+            modalContent={modalContent}
+            modalRef={modalRef}
+        >
             {mutation.code}
             <sup>
                 {mutationAnnotations

package/src/preact/dateRangeFilter/computeInitialValues.spec.ts

@@ -18,8 +18,8 @@ const dateRangeOptions = [
 ];
 
 describe('computeInitialValues', () => {
-    it('should return undefined for unedfined value', () => {
-        const result = computeInitialValues(undefined, earliestDate, dateRangeOptions);
+    it('should return undefined for null value', () => {
+        const result = computeInitialValues(null, earliestDate, dateRangeOptions);
 
         expect(result).toBeUndefined();
     });

package/src/preact/dateRangeFilter/computeInitialValues.ts

@@ -3,7 +3,7 @@ import { getDatesForSelectorValue, getSelectableOptions } from './selectableOpti
 import { UserFacingError } from '../components/error-display';
 
 export function computeInitialValues(value: DateRangeValue, earliestDate: string, dateRangeOptions: DateRangeOption[]) {
-    if (value === undefined) {
+    if (value === null) {
         return undefined;
     }
 

package/src/preact/dateRangeFilter/date-range-filter.stories.tsx

@@ -56,7 +56,7 @@ const meta: Meta<DateRangeFilterProps> = {
     args: {
         dateRangeOptions: [dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.allTimes, customDateRange],
         earliestDate,
-        value: undefined,
+        value: null,
         lapisDateField: 'aDateColumn',
         width: '100%',
         placeholder,
@@ -194,16 +194,14 @@ export const ChangingTheValueProgrammatically: StoryObj<DateRangeFilterProps> =
     ...Primary,
     render: (args) => {
         const StatefulWrapper = () => {
-            const [value, setValue] = useState<DateRangeValue | undefined>('Last month');
+            const [value, setValue] = useState<DateRangeValue>('Last month');
             const ref = useRef<HTMLDivElement>(null);
 
             useEffect(() => {
                 ref.current?.addEventListener('gs-date-range-option-changed', (event) => {
-                    const newValue = (event as CustomEvent).detail;
-                    setValue(newValue ?? undefined);
+                    setValue(event.detail);
                 });
             }, []);
-
             return (
                 <div ref={ref}>
                     <LapisUrlContextProvider value={LAPIS_URL}>

package/src/preact/dateRangeFilter/date-range-filter.tsx

@@ -179,13 +179,18 @@ export const DateRangeFilterInner = ({
     };
 
     const fireOptionChangedEvent = (state: DateRangeFilterState) => {
-        const eventDetail =
-            state?.label === customOption
-                ? {
-                      dateFrom: state.dateFrom !== undefined ? toYYYYMMDD(state.dateFrom) : undefined,
-                      dateTo: state.dateTo !== undefined ? toYYYYMMDD(state.dateTo) : undefined,
-                  }
-                : state?.label;
+        const eventDetail = (() => {
+            if (state === null) {
+                return null;
+            }
+            if (state.label === customOption) {
+                return {
+                    dateFrom: state.dateFrom !== undefined ? toYYYYMMDD(state.dateFrom) : undefined,
+                    dateTo: state.dateTo !== undefined ? toYYYYMMDD(state.dateTo) : undefined,
+                };
+            }
+            return state.label;
+        })();
 
         divRef.current?.dispatchEvent(new DateRangeOptionChangedEvent(eventDetail));
     };

package/src/preact/dateRangeFilter/dateRangeOption.ts

@@ -30,7 +30,7 @@ export const dateRangeValueSchema = z
             dateTo: z.string().date().optional(),
         }),
     ])
-    .optional();
+    .nullable();
 
 export type DateRangeValue = z.infer<typeof dateRangeValueSchema>;
 

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

@@ -6,6 +6,7 @@ import nucleotideMutationsSomeDataset from './__mockData__/nucleotideMutationsSo
 import { MutationComparison, type MutationComparisonProps } from './mutation-comparison';
 import { LAPIS_URL, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
@@ -90,8 +91,9 @@ const mutationAnnotations = [
         symbol: '+',
         nucleotideMutations: ['C3037T', 'A23403G'],
         aminoAcidMutations: ['ORF1a:I2230T'],
+        aminoAcidPositions: ['ORF1a:3675'],
     },
-];
+] satisfies MutationAnnotations;
 
 const Template: StoryObj<MutationComparisonProps> = {
     render: (args) => (

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

@@ -13,6 +13,7 @@ import {
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
 import baselineNucleotideMutations from '../../preact/mutations/__mockData__/baselineNucleotideMutations.json';
 import overallVariantCount from '../../preact/mutations/__mockData__/overallVariantCount.json';
+import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
@@ -45,6 +46,7 @@ const mutationAnnotations = [
         description: 'This describes what is special about these mutations.',
         symbol: '#',
         nucleotideMutations: ['C241T', 'C3037T'],
+        nucleotidePositions: [],
         aminoAcidMutations: ['N:G204R', 'N:S235F'],
     },
     {
@@ -52,9 +54,10 @@ const mutationAnnotations = [
         description: 'This describes what is special about these other mutations.',
         symbol: '+',
         nucleotideMutations: ['C3037T', 'C11750T'],
+        nucleotidePositions: ['14408'],
         aminoAcidMutations: ['ORF1a:S2255F'],
     },
-];
+] satisfies MutationAnnotations;
 
 const Template = {
     render: (args: MutationsProps) => (

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

@@ -0,0 +1,108 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, within } from '@storybook/test';
+
+import {
+    MutationsOverTimeGridTooltip,
+    type MutationsOverTimeGridTooltipProps,
+} from './mutations-over-time-grid-tooltip';
+
+const meta: Meta<MutationsOverTimeGridTooltipProps> = {
+    title: 'Component/Mutation over time grid tooltip',
+    component: MutationsOverTimeGridTooltip,
+    argTypes: {
+        mutation: { control: 'object' },
+        date: { control: 'object' },
+        value: { control: 'object' },
+    },
+    parameters: {
+        fetchMock: {},
+    },
+};
+
+export default meta;
+
+const Template: StoryObj<MutationsOverTimeGridTooltipProps> = {
+    render: (args: MutationsOverTimeGridTooltipProps) => <MutationsOverTimeGridTooltip {...args} />,
+    args: {
+        mutation: {
+            type: 'deletion',
+            position: 500,
+            code: 'A500-',
+            valueAtReference: 'A',
+        },
+        date: {
+            type: 'Year',
+            year: 2025,
+            dateString: '2025',
+        },
+        value: null,
+    },
+};
+
+export const NoValue: StoryObj<MutationsOverTimeGridTooltipProps> = {
+    ...Template,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('2025', { exact: true })).toBeVisible();
+        await expect(canvas.getByText('(2025-01-01 - 2025-12-31)')).toBeVisible();
+        await expect(canvas.getByText('A500-')).toBeVisible();
+        await expect(canvas.getByText('No data')).toBeVisible();
+    },
+};
+
+export const WithValue: StoryObj<MutationsOverTimeGridTooltipProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        value: {
+            type: 'value',
+            proportion: 0.5,
+            count: 100,
+            totalCount: 300,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('Proportion: 50.00%')).toBeVisible();
+        await expect(canvas.getByText('300 samples are in the timeframe')).toBeVisible();
+        await expect(canvas.getByText('200 have coverage, of those 100 have the mutation')).toBeVisible();
+    },
+};
+
+export const WithValueBelowThreshold: StoryObj<MutationsOverTimeGridTooltipProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        value: {
+            type: 'belowThreshold',
+            totalCount: 300,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('Proportion: <0.10%')).toBeVisible();
+        await expect(canvas.getByText('300 samples are in the timeframe')).toBeVisible();
+        await expect(canvas.getByText('none or less than 0.10% have the mutation')).toBeVisible();
+    },
+};
+
+export const WithWastewaterValue: StoryObj<MutationsOverTimeGridTooltipProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        value: {
+            type: 'wastewaterValue',
+            proportion: 0.5,
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await expect(canvas.getByText('Proportion: 50.00%')).toBeVisible();
+        await expect(canvas.queryByText('samples are in the timeframe')).not.toBeInTheDocument();
+        await expect(canvas.queryByText('have coverage')).not.toBeInTheDocument();
+    },
+};

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

@@ -0,0 +1,93 @@
+import type { FunctionComponent } from 'preact';
+
+import {
+    type MutationOverTimeMutationValue,
+    MUTATIONS_OVER_TIME_MIN_PROPORTION,
+} from '../../query/queryMutationsOverTime';
+import type { Deletion, Substitution } from '../../utils/mutations';
+import { type Temporal, type TemporalClass, toTemporalClass, YearMonthDayClass } from '../../utils/temporalClass';
+import { formatProportion } from '../shared/table/formatProportion';
+
+export type MutationsOverTimeGridTooltipProps = {
+    mutation: Substitution | Deletion;
+    date: Temporal;
+    value: MutationOverTimeMutationValue;
+};
+
+export const MutationsOverTimeGridTooltip: FunctionComponent<MutationsOverTimeGridTooltipProps> = ({
+    mutation,
+    date,
+    value,
+}: MutationsOverTimeGridTooltipProps) => {
+    const dateClass = toTemporalClass(date);
+
+    return (
+        <div>
+            <p>
+                <span className='font-bold'>{dateClass.englishName()}</span>
+            </p>
+            <p>({timeIntervalDisplay(dateClass)})</p>
+            <p>{mutation.code}</p>
+            <TooltipValueDescription value={value} />
+        </div>
+    );
+};
+
+const TooltipValueDescription: FunctionComponent<{ value: MutationOverTimeMutationValue }> = ({ value }) => {
+    if (value === null) {
+        return <p>No data</p>;
+    }
+
+    const proportion =
+        value.type === 'belowThreshold'
+            ? `<${formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)}`
+            : formatProportion(value.proportion);
+
+    return (
+        <>
+            <p>Proportion: {proportion}</p>
+            <TooltipValueCountsDescription value={value} />
+        </>
+    );
+};
+
+const TooltipValueCountsDescription: FunctionComponent<{
+    value: NonNullable<MutationOverTimeMutationValue>;
+}> = ({ value }) => {
+    switch (value.type) {
+        case 'wastewaterValue':
+            return;
+        case 'belowThreshold':
+            return (
+                <>
+                    <p>{value.totalCount} samples are in the timeframe</p>
+                    <p>none or less than {formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)} have the mutation</p>
+                </>
+            );
+        case 'value':
+            return (
+                <>
+                    <p>{value.totalCount} samples are in the timeframe</p>
+                    <p>
+                        {totalCountWithCoverage(value.count, value.proportion)} have coverage, of those {value.count}{' '}
+                        have the mutation
+                    </p>
+                </>
+            );
+    }
+};
+
+function totalCountWithCoverage(count: number, proportion: number) {
+    if (count === 0) {
+        return 0;
+    }
+    return Math.round(count / proportion);
+}
+
+const timeIntervalDisplay = (date: TemporalClass) => {
+    if (date instanceof YearMonthDayClass) {
+        return date.toString();
+    }
+
+    return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
+};

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

@@ -3,13 +3,11 @@ import { type FunctionComponent } from 'preact';
 import { useMemo, useState } from 'preact/hooks';
 
 import { type MutationOverTimeDataMap } from './MutationOverTimeData';
-import {
-    type MutationOverTimeMutationValue,
-    MUTATIONS_OVER_TIME_MIN_PROPORTION,
-} from '../../query/queryMutationsOverTime';
+import { MutationsOverTimeGridTooltip } from './mutations-over-time-grid-tooltip';
+import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
 import { type SequenceType } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
-import { type Temporal, type TemporalClass, toTemporalClass, YearMonthDayClass } from '../../utils/temporalClass';
+import { type Temporal } from '../../utils/temporalClass';
 import { AnnotatedMutation } from '../components/annotated-mutation';
 import { type ColorScale, getColorWithinScale, getTextColorForScale } from '../components/color-scale-selector';
 import Tooltip, { type TooltipPosition } from '../components/tooltip';
@@ -181,24 +179,14 @@ const ProportionCell: FunctionComponent<{
     tooltipPosition: TooltipPosition;
     colorScale: ColorScale;
 }> = ({ value, mutation, date, tooltipPosition, colorScale }) => {
-    const dateClass = toTemporalClass(date);
-
-    const tooltipContent = (
-        <div>
-            <p>
-                <span className='font-bold'>{dateClass.englishName()}</span>
-            </p>
-            <p>({timeIntervalDisplay(dateClass)})</p>
-            <p>{mutation.code}</p>
-            <TooltipValueDescription value={value} />
-        </div>
-    );
-
     const proportion = value?.type === 'belowThreshold' ? 0 : value?.proportion;
 
     return (
         <div className={'py-1 w-full h-full'}>
-            <Tooltip content={tooltipContent} position={tooltipPosition}>
+            <Tooltip
+                content={<MutationsOverTimeGridTooltip mutation={mutation} date={date} value={value} />}
+                position={tooltipPosition}
+            >
                 <div
                     style={{
                         backgroundColor: getColorWithinScale(proportion, colorScale),
@@ -217,63 +205,4 @@ const ProportionCell: FunctionComponent<{
     );
 };
 
-const TooltipValueDescription: FunctionComponent<{ value: MutationOverTimeMutationValue }> = ({ value }) => {
-    if (value === null) {
-        return <p>No data</p>;
-    }
-
-    const proportion =
-        value.type === 'belowThreshold'
-            ? `<${formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)}`
-            : formatProportion(value.proportion);
-
-    return (
-        <>
-            <p>Proportion: {proportion}</p>
-            <TooltipValueCountsDescription value={value} />
-        </>
-    );
-};
-
-const TooltipValueCountsDescription: FunctionComponent<{
-    value: NonNullable<MutationOverTimeMutationValue>;
-}> = ({ value }) => {
-    switch (value.type) {
-        case 'wastewaterValue':
-            return;
-        case 'belowThreshold':
-            return (
-                <>
-                    <p>{value.totalCount} samples are in the timeframe</p>
-                    <p>none or less than {formatProportion(MUTATIONS_OVER_TIME_MIN_PROPORTION)} have the mutation</p>
-                </>
-            );
-        case 'value':
-            return (
-                <>
-                    <p>{value.totalCount} samples are in the timeframe</p>
-                    <p>
-                        {totalCountWithCoverage(value.count, value.proportion)} have coverage, of those {value.count}{' '}
-                        have the mutation
-                    </p>
-                </>
-            );
-    }
-};
-
-function totalCountWithCoverage(count: number, proportion: number) {
-    if (count === 0) {
-        return 0;
-    }
-    return Math.round(count / proportion);
-}
-
-const timeIntervalDisplay = (date: TemporalClass) => {
-    if (date instanceof YearMonthDayClass) {
-        return date.toString();
-    }
-
-    return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
-};
-
 export default MutationsOverTimeGrid;

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

@@ -5,6 +5,7 @@ import { type Canvas } from '@storybook/types';
 import { MutationsOverTime, type MutationsOverTimeProps } from './mutations-over-time';
 import { LAPIS_URL } from '../../constants';
 import referenceGenome from '../../lapisApi/__mockData__/referenceGenome.json';
+import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { ReferenceGenomeContext } from '../ReferenceGenomeContext';
@@ -49,6 +50,7 @@ const mutationAnnotations = [
         symbol: '#',
         nucleotideMutations: ['C44T', 'C774T', 'G24872T', 'T23011-'],
         aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
+        nucleotidePositions: ['17334'],
     },
     {
         name: 'I am another mutation annotation!',
@@ -57,7 +59,7 @@ const mutationAnnotations = [
         nucleotideMutations: ['C44T', 'A13121T'],
         aminoAcidMutations: ['S:501Y', 'S:S31-', 'ORF1a:S4286C'],
     },
-];
+] satisfies MutationAnnotations;
 
 export const Default: StoryObj<MutationsOverTimeProps> = {
     render: (args: MutationsOverTimeProps) => (

package/src/preact/sequencesByLocation/leafletStyleModifications.css

@@ -1,3 +1,8 @@
 .leaflet-container {
     background: transparent;
 }
+
+.leaflet-interactive {
+    outline: none;
+    cursor: pointer;
+}

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

@@ -1,4 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect } from '@storybook/test';
 
 import { WastewaterMutationsOverTime, type WastewaterMutationsOverTimeProps } from './wastewater-mutations-over-time';
 import { WISE_DETAILS_ENDPOINT, WISE_LAPIS_URL } from '../../../constants';
@@ -65,3 +66,27 @@ export const Default: StoryObj<WastewaterMutationsOverTimeProps> = {
         },
     },
 };
+
+export const AminoAcids: StoryObj<WastewaterMutationsOverTimeProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        sequenceType: 'amino acid',
+    },
+    play: async ({ canvas, step }) => {
+        await step('Wait for component to render', async () => {
+            await canvas.findByText('All segments');
+        });
+
+        await step("Click 'All segments' button", async () => {
+            canvas.getByRole('button', { name: 'All segments' }).click();
+            await expect(canvas.getByText('Select none')).toBeInTheDocument();
+            canvas.getByRole('button', { name: 'Select none' }).click();
+            await canvas.findAllByText('No data available for your filters.');
+            canvas.getByRole('checkbox', { name: 'S' }).click();
+            await canvas.findAllByText('S:Q493E');
+            const element = canvas.queryByText(/ORF1a:/);
+            await expect(element).not.toBeInTheDocument();
+        });
+    },
+};

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

@@ -1,9 +1,10 @@
 import { type FunctionComponent } from 'preact';
-import { type Dispatch, type StateUpdater, useState } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useMemo, useState } from 'preact/hooks';
 import z from 'zod';
 
 import { computeWastewaterMutationsOverTimeDataPerLocation } from './computeWastewaterMutationsOverTimeDataPerLocation';
 import { lapisFilterSchema, sequenceTypeSchema } from '../../../types';
+import { Map2dView } from '../../../utils/map2d';
 import { useLapisUrl } from '../../LapisUrlContext';
 import { type ColorScale } from '../../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../../components/color-scale-selector-dropdown';
@@ -13,6 +14,7 @@ import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../../com
 import { LoadingDisplay } from '../../components/loading-display';
 import { NoDataDisplay } from '../../components/no-data-display';
 import { ResizeContainer } from '../../components/resize-container';
+import { type DisplayedSegment, SegmentSelector } from '../../components/segment-selector';
 import Tabs from '../../components/tabs';
 import { type MutationOverTimeDataMap } from '../../mutationsOverTime/MutationOverTimeData';
 import MutationsOverTimeGrid from '../../mutationsOverTime/mutations-over-time-grid';
@@ -86,28 +88,67 @@ type MutationOverTimeDataPerLocation = {
     data: MutationOverTimeDataMap;
 }[];
 
+function useDisplayedSegments(mutations: MutationOverTimeDataPerLocation) {
+    const displayedSegments = useMemo(() => {
+        const unique = [
+            ...new Set(
+                mutations.flatMap(({ data }) => data.getFirstAxisKeys().map((mutation) => mutation.segment || '')),
+            ),
+        ];
+
+        return unique.map((segment) => ({ segment, label: segment, checked: true }));
+    }, [mutations]);
+
+    return useState<DisplayedSegment[]>(displayedSegments);
+}
+
 type MutationOverTimeTabsProps = {
     mutationOverTimeDataPerLocation: MutationOverTimeDataPerLocation;
     originalComponentProps: WastewaterMutationsOverTimeProps;
 };
 
+function getFilteredMutationOverTimeData({
+    data,
+    displayedSegments,
+}: {
+    data: MutationOverTimeDataMap;
+    displayedSegments: DisplayedSegment[];
+}): MutationOverTimeDataMap {
+    const filteredData = new Map2dView(data);
+
+    const mutationsToFilterOut = data.getFirstAxisKeys().filter((entry) => {
+        return displayedSegments.some((segment) => segment.segment === entry.segment && !segment.checked);
+    });
+
+    mutationsToFilterOut.forEach((entry) => {
+        filteredData.deleteRow(entry);
+    });
+
+    return filteredData;
+}
+
 const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     mutationOverTimeDataPerLocation,
     originalComponentProps,
 }) => {
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
+    const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(mutationOverTimeDataPerLocation);
 
-    const tabs = mutationOverTimeDataPerLocation.map(({ location, data }) => ({
-        title: location,
-        content: (
-            <MutationsOverTimeGrid
-                data={data}
-                colorScale={colorScale}
-                pageSizes={originalComponentProps.pageSizes}
-                sequenceType={originalComponentProps.sequenceType}
-            />
-        ),
-    }));
+    const tabs = useMemo(
+        () =>
+            mutationOverTimeDataPerLocation.map(({ location, data }) => ({
+                title: location,
+                content: (
+                    <MutationsOverTimeGrid
+                        data={getFilteredMutationOverTimeData({ data, displayedSegments })}
+                        colorScale={colorScale}
+                        pageSizes={originalComponentProps.pageSizes}
+                        sequenceType={originalComponentProps.sequenceType}
+                    />
+                ),
+            })),
+        [mutationOverTimeDataPerLocation, displayedSegments, colorScale, originalComponentProps],
+    );
 
     const toolbar = (
         <Toolbar
@@ -115,6 +156,8 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             setColorScale={setColorScale}
             originalComponentProps={originalComponentProps}
             data={mutationOverTimeDataPerLocation}
+            displayedSegments={displayedSegments}
+            setDisplayedSegments={setDisplayedSegments}
         />
     );
 
@@ -126,12 +169,21 @@ type ToolbarProps = {
     setColorScale: Dispatch<StateUpdater<ColorScale>>;
     originalComponentProps: WastewaterMutationsOverTimeProps;
     data: MutationOverTimeDataPerLocation;
+    displayedSegments: DisplayedSegment[];
+    setDisplayedSegments: (segments: DisplayedSegment[]) => void;
 };
 
-const Toolbar: FunctionComponent<ToolbarProps> = ({ colorScale, setColorScale, originalComponentProps }) => {
+const Toolbar: FunctionComponent<ToolbarProps> = ({
+    colorScale,
+    setColorScale,
+    originalComponentProps,
+    displayedSegments,
+    setDisplayedSegments,
+}) => {
     return (
         <>
             <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
+            <SegmentSelector displayedSegments={displayedSegments} setDisplayedSegments={setDisplayedSegments} />
             <WastewaterMutationsOverTimeInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>