@genspectrum/dashboard-components 1.0.1 → 1.2.0

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -11,6 +11,11 @@ import type { DisplayedSegment } from '../components/segment-selector';
 export const displayMutationsSchema = z.array(z.string()).min(1);
 export type DisplayMutations = z.infer<typeof displayMutationsSchema>;
 
+export type MutationFilter = {
+    textFilter: string;
+    annotationNameFilter: Set<string>;
+};
+
 export type GetFilteredMutationOverTimeDataArgs = {
     data: MutationOverTimeDataMap;
     overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[];
@@ -18,7 +23,7 @@ export type GetFilteredMutationOverTimeDataArgs = {
     displayedMutationTypes: DisplayedMutationType[];
     proportionInterval: { min: number; max: number };
     displayMutations?: DisplayMutations;
-    mutationFilterValue: string;
+    mutationFilterValue: MutationFilter;
     sequenceType: SequenceType;
     annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>;
 };
@@ -72,25 +77,54 @@ export function getFilteredMutationOverTimeData({
 export function mutationOrAnnotationDoNotMatchFilter(
     mutation: Mutation,
     sequenceType: SequenceType,
-    filterValue: string,
+    mutationFilter: MutationFilter,
     annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>,
 ) {
-    if (filterValue === '') {
-        return false;
+    return !(
+        mutationOrAnnotationMatchesTextFilter(mutation, sequenceType, mutationFilter.textFilter, annotationProvider) &&
+        mutationMatchesAnnotationFilter(mutation, sequenceType, mutationFilter.annotationNameFilter, annotationProvider)
+    );
+}
+
+function mutationOrAnnotationMatchesTextFilter(
+    mutation: Mutation,
+    sequenceType: SequenceType,
+    textFilter: string,
+    annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>,
+) {
+    if (textFilter === '') {
+        return true;
     }
 
-    if (mutation.code.includes(filterValue)) {
-        return false;
+    if (mutation.code.includes(textFilter)) {
+        return true;
     }
 
     const mutationAnnotations = annotationProvider(mutation, sequenceType);
     if (mutationAnnotations === undefined || mutationAnnotations.length === 0) {
-        return true;
+        return false;
     }
-    return !mutationAnnotations.some(
+    return mutationAnnotations.some(
         (annotation) =>
-            annotation.description.includes(filterValue) ||
-            annotation.name.includes(filterValue) ||
-            annotation.symbol.includes(filterValue),
+            annotation.description.includes(textFilter) ||
+            annotation.name.includes(textFilter) ||
+            annotation.symbol.includes(textFilter),
     );
 }
+
+function mutationMatchesAnnotationFilter(
+    mutation: Mutation,
+    sequenceType: SequenceType,
+    annotationNameFilter: Set<string>,
+    annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>,
+) {
+    if (annotationNameFilter.size === 0) {
+        return true;
+    }
+
+    const mutationAnnotations = annotationProvider(mutation, sequenceType);
+    if (mutationAnnotations === undefined || mutationAnnotations.length === 0) {
+        return false;
+    }
+    return mutationAnnotations.some((annotation) => annotationNameFilter.has(annotation.name));
+}

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

@@ -5,10 +5,13 @@ 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 { displayMutationsSchema, getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
+import {
+    displayMutationsSchema,
+    getFilteredMutationOverTimeData,
+    type MutationFilter,
+} from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeWorkerResponse } from './mutationOverTimeWorker';
 import MutationsOverTimeGrid from './mutations-over-time-grid';
-import { type MutationOverTimeQuery } from '../../query/queryMutationsOverTime';
 import {
     lapisFilterSchema,
     sequenceTypeSchema,
@@ -29,7 +32,7 @@ import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
-import { MutationsOverTimeTextFilter } from '../components/mutations-over-time-text-filter';
+import { MutationsOverTimeMutationsFilter } from '../components/mutations-over-time-mutations-filter';
 import { NoDataDisplay } from '../components/no-data-display';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
@@ -87,7 +90,7 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> =
         };
     }, [granularity, lapis, lapisDateField, lapisFilter, sequenceType]);
 
-    const { data, error, isLoading } = useWebWorker<MutationOverTimeQuery, MutationOverTimeWorkerResponse>(
+    const { data, error, isLoading } = useWebWorker<MutationOverTimeWorkerResponse>(
         messageToWorker,
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         MutationOverTimeWorker,
@@ -101,7 +104,7 @@ export const MutationsOverTimeInner: FunctionComponent<MutationsOverTimeProps> =
         throw error;
     }
 
-    if (data === null || data === undefined || data.overallMutationData.length === 0) {
+    if (data === undefined || data.overallMutationData.length === 0) {
         return <NoDataDisplay />;
     }
 
@@ -129,7 +132,10 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
 }) => {
     const tabsRef = useDispatchFinishedLoadingEvent();
 
-    const [mutationFilterValue, setMutationFilterValue] = useState('');
+    const [mutationFilterValue, setMutationFilterValue] = useState<MutationFilter>({
+        textFilter: '',
+        annotationNameFilter: new Set(),
+    });
     const annotationProvider = useMutationAnnotationsProvider();
 
     const [proportionInterval, setProportionInterval] = useState(originalComponentProps.initialMeanProportionInterval);
@@ -166,13 +172,8 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     ]);
 
     const getTab = (view: MutationsOverTimeView) => {
-        if (filteredData === undefined) {
-            return {
-                title: 'Calculating',
-                content: <LoadingDisplay />,
-            };
-        }
         switch (view) {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- for extensibility
             case 'grid':
                 return {
                     title: 'Grid',
@@ -227,8 +228,8 @@ type ToolbarProps = {
     colorScale: ColorScale;
     setColorScale: Dispatch<StateUpdater<ColorScale>>;
     originalComponentProps: MutationsOverTimeProps;
-    mutationFilterValue: string;
-    setFilterValue: (filterValue: string) => void;
+    mutationFilterValue: MutationFilter;
+    setFilterValue: Dispatch<StateUpdater<MutationFilter>>;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -248,7 +249,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
 }) => {
     return (
         <>
-            <MutationsOverTimeTextFilter setFilterValue={setFilterValue} value={mutationFilterValue} />
+            <MutationsOverTimeMutationsFilter setFilterValue={setFilterValue} value={mutationFilterValue} />
             {activeTab === 'Grid' && (
                 <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
             )}

package/src/preact/numberRangeFilter/number-range-filter.tsx

@@ -90,10 +90,10 @@ const NumberRangeFilterInner: FunctionComponent<NumberRangeFilterInnerProps> = (
                 <div className={`join-item w-full flex input px-2 ${inputError}`}>
                     <input
                         type='text'
-                        inputmode='numeric'
+                        inputMode='numeric'
                         className='w-full grow capitalize'
                         placeholder={`${lapisField} from`}
-                        value={currentRange.inputState.min ?? ''}
+                        value={currentRange.inputState.min}
                         onInput={(e) => {
                             dispatchRange({
                                 type: SetRangeActionType.SET_MIN,
@@ -116,10 +116,10 @@ const NumberRangeFilterInner: FunctionComponent<NumberRangeFilterInnerProps> = (
                 <div className={`join-item w-full flex input px-2 ${inputError}`}>
                     <input
                         type='text'
-                        inputmode='numeric'
+                        inputMode='numeric'
                         className='w-full grow capitalize'
                         placeholder={`${lapisField} to`}
-                        value={currentRange.inputState.max ?? ''}
+                        value={currentRange.inputState.max}
                         onInput={(e) => {
                             dispatchRange({
                                 type: SetRangeActionType.SET_MAX,

package/src/preact/numberSequencesOverTime/getNumberOfSequencesOverTimeTableData.ts

@@ -1,7 +1,7 @@
 import type { NumberOfSequencesDatasets } from '../../query/queryNumberOfSequencesOverTime';
 import { generateAllInRange, getMinMaxTemporal, type TemporalClass } from '../../utils/temporalClass';
 
-type TableRow<DateRangeKey extends string> = { [K in DateRangeKey]: string } & { [key: string]: number };
+type TableRow<DateRangeKey extends string> = Record<DateRangeKey, string> & Record<string, number>;
 
 export const getNumberOfSequencesOverTimeTableData = <DateRangeKey extends string>(
     data: NumberOfSequencesDatasets,
@@ -17,9 +17,6 @@ export const getNumberOfSequencesOverTimeTableData = <DateRangeKey extends strin
         .reduce((acc, keys) => new Set([...acc, ...keys]), new Set<TemporalClass | null>());
 
     const minMax = getMinMaxTemporal(allDateRangesThatOccurInData);
-    if (minMax === null) {
-        return [];
-    }
 
     const allDateRanges: (TemporalClass | null)[] = generateAllInRange(minMax.min, minMax.max);
 

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

@@ -18,7 +18,6 @@ import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
-import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { ScalingSelector } from '../components/scaling-selector';
 import Tabs from '../components/tabs';
@@ -76,10 +75,6 @@ const NumberSequencesOverTimeInner = (componentProps: NumberSequencesOverTimePro
         throw error;
     }
 
-    if (data === null) {
-        return <NoDataDisplay />;
-    }
-
     return <NumberSequencesOverTimeTabs data={data} originalComponentProps={componentProps} />;
 };
 

package/src/preact/prevalenceOverTime/prevalence-over-time-bar-chart.tsx

@@ -56,7 +56,7 @@ const PrevalenceOverTimeBarChart = ({
 
         const maxY =
             yAxisScaleType !== 'logit'
-                ? getYAxisMax(maxInData(nullFirstData), yAxisMaxConfig?.[yAxisScaleType])
+                ? getYAxisMax(maxInData(nullFirstData), yAxisMaxConfig[yAxisScaleType])
                 : undefined;
 
         return {

package/src/preact/prevalenceOverTime/prevalence-over-time-bubble-chart.tsx

@@ -54,7 +54,7 @@ const PrevalenceOverTimeBubbleChart = ({
 
         const maxY =
             yAxisScaleType !== 'logit'
-                ? getYAxisMax(maxInData(nonNullDateRangeData), yAxisMaxConfig?.[yAxisScaleType])
+                ? getYAxisMax(maxInData(nonNullDateRangeData), yAxisMaxConfig[yAxisScaleType])
                 : undefined;
 
         return {

package/src/preact/prevalenceOverTime/prevalence-over-time-line-chart.tsx

@@ -55,7 +55,7 @@ const PrevalenceOverTimeLineChart = ({
 
         const maxY =
             yAxisScaleType !== 'logit'
-                ? getYAxisMax(maxInData(nonNullDateRangeData), yAxisMaxConfig?.[yAxisScaleType])
+                ? getYAxisMax(maxInData(nonNullDateRangeData), yAxisMaxConfig[yAxisScaleType])
                 : undefined;
 
         return {

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -90,7 +90,7 @@ export const PrevalenceOverTimeInner: FunctionComponent<PrevalenceOverTimeProps>
         throw error;
     }
 
-    if (data === null || data.every((variant) => variant.content.length === 0)) {
+    if (data.every((variant) => variant.content.length === 0)) {
         return <NoDataDisplay />;
     }
 

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage-chart.tsx

@@ -43,7 +43,7 @@ const RelativeGrowthAdvantageChart = ({
     const config = useMemo<ChartConfiguration>(() => {
         const maxY =
             yAxisScaleType !== 'logit'
-                ? getYAxisMax(Math.max(...data.proportion), yAxisMaxConfig?.[yAxisScaleType])
+                ? getYAxisMax(Math.max(...data.proportion), yAxisMaxConfig[yAxisScaleType])
                 : undefined;
 
         return {
@@ -92,11 +92,11 @@ const RelativeGrowthAdvantageDisplay = ({
     relativeAdvantageUpperBound: number;
 }) => {
     return (
-        <div class='mx-auto flex items-end flex-wrap'>
-            <span class='text-[#606060]'>Relative advantage:</span>
+        <div className='mx-auto flex items-end flex-wrap'>
+            <span className='text-[#606060]'>Relative advantage:</span>
             <div>
-                <span class='text-2xl ml-3'> {formatProportion(relativeAdvantage)} </span>
-                <span class='ml-2.5'>
+                <span className='text-2xl ml-3'> {formatProportion(relativeAdvantage)} </span>
+                <span className='ml-2.5'>
                     ({formatProportion(relativeAdvantageLowerBound)} - {formatProportion(relativeAdvantageUpperBound)})
                 </span>
             </div>

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -77,10 +77,6 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
         throw error;
     }
 
-    if (data === null) {
-        return <NoDataDisplay />;
-    }
-
     return (
         <RelativeGrowthAdvantageTabs
             data={data}
@@ -110,6 +106,7 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
 
     const getTab = (view: RelativeGrowthAdvantageView) => {
         switch (view) {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- for extensibility
             case 'line':
                 return {
                     title: 'Line',

package/src/preact/sequencesByLocation/loadMapSource.tsx

@@ -18,6 +18,7 @@ export type GeoJsonFeatureProperties = {
 
 export async function loadMapSource(mapSource: MapSource) {
     switch (mapSource.type) {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- for future extensibility
         case 'topojson':
             return await loadTopojsonMap(mapSource);
     }
@@ -28,17 +29,19 @@ async function loadTopojsonMap(
 ): Promise<FeatureCollection<GeometryObject, GeoJsonFeatureProperties>> {
     const response = await fetch(mapSource.url);
     const topology = (await response.json()) as Topology;
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- for future extensibility
     if (topology?.type !== 'Topology') {
         throw new UserFacingError(
             'Invalid map source',
             `JSON downloaded from ${mapSource.url} does not look like a topojson Topology definition: missing 'type: "Topology"', got '${JSON.stringify(topology).substring(0, 100)}'`,
         );
     }
-    const object = topology?.objects[mapSource.topologyObjectsKey] as GeometryCollection<GeoJsonFeatureProperties>;
+    const object = topology.objects[mapSource.topologyObjectsKey] as GeometryCollection<GeoJsonFeatureProperties>;
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- to be safe
     if (object?.type !== 'GeometryCollection') {
         throw new UserFacingError(
             'Invalid map source',
-            `JSON downloaded from ${mapSource.url} does not have a GeometryCollection at key objects.${mapSource.topologyObjectsKey}, got '${JSON.stringify(topology)?.substring(0, 100)}'`,
+            `JSON downloaded from ${mapSource.url} does not have a GeometryCollection at key objects.${mapSource.topologyObjectsKey}, got '${JSON.stringify(topology).substring(0, 100)}'`,
         );
     }
     return topojson.feature(topology, object);

package/src/preact/shared/aspectRatio/AspectRatio.tsx

@@ -6,7 +6,7 @@ export function AspectRatio({ children, aspectRatio }: PropsWithChildren<{ aspec
     }
 
     return (
-        <div class={`w-full relative`} style={{ paddingTop: `${aspectRatio}%` }}>
+        <div className={`w-full relative`} style={{ paddingTop: `${aspectRatio}%` }}>
             <div className='absolute inset-0'>{children}</div>
         </div>
     );

package/src/preact/shared/floating-ui/hooks.ts

@@ -6,10 +6,10 @@ import type { MutableRefObject } from 'react';
 export function useFloatingUi(
     referenceRef: MutableRefObject<HTMLElement | null>,
     floatingRef: MutableRefObject<HTMLElement | null>,
-    middleware?: Array<Middleware | null | undefined | false>,
+    middleware?: (Middleware | null | undefined | false)[],
     placement?: Placement,
 ) {
-    const cleanupRef = useRef<() => void | null>(null);
+    const cleanupRef = useRef<(() => void) | null>(null);
 
     useEffect(() => {
         if (!referenceRef.current || !floatingRef.current) {

package/src/preact/shared/sort/sortMutationPositions.ts

@@ -1,8 +1,8 @@
 const pattern = /(?:([A-Za-z0-9]+):)?(\d+)$/;
 
 export const sortMutationPositions = (a: string, b: string) => {
-    const aMatch = a.match(pattern);
-    const bMatch = b.match(pattern);
+    const aMatch = pattern.exec(a);
+    const bMatch = pattern.exec(b);
 
     if (aMatch && bMatch) {
         if (aMatch[1] !== bMatch[1]) {

package/src/preact/shared/tanstackTable/pagination.tsx

@@ -67,10 +67,10 @@ function PageSizeSelector({
                 className={`select select-ghost select-sm ${heightForSmallerLines}`}
                 value={pageSize}
                 onChange={(e) => {
-                    const pageSize = Number(e.currentTarget?.value);
+                    const pageSize = Number(e.currentTarget.value);
                     if (Number.isNaN(pageSize)) {
                         throw new Error(
-                            `Invalid page size selected: The value ${e.currentTarget?.value} could not be parsed as a number.`,
+                            `Invalid page size selected: The value ${e.currentTarget.value} could not be parsed as a number.`,
                         );
                     }
                     setPageSize(pageSize);

package/src/preact/shared/tanstackTable/tanstackTable.tsx

@@ -1,5 +1,5 @@
 import { createTable, type RowData, type TableOptions, type TableOptionsResolved } from '@tanstack/table-core';
-import { type ComponentType, h, type VNode } from 'preact';
+import { type ComponentType, type VNode } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 
 import { usePageSizeContext } from './pagination-context';

package/src/preact/statistic/statistics.tsx

@@ -7,7 +7,6 @@ import { useDispatchFinishedLoadingEvent } from '../../utils/useDispatchFinished
 import { useLapisUrl } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
-import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { formatProportion } from '../shared/table/formatProportion';
 import { useQuery } from '../useQuery';
@@ -49,10 +48,6 @@ export const StatisticsInner: FunctionComponent<StatisticsProps> = (componentPro
         throw error;
     }
 
-    if (data === null) {
-        return <NoDataDisplay />;
-    }
-
     return <MetricDataTabs data={data} />;
 };
 

package/src/preact/textFilter/fetchStringAutocompleteList.ts

@@ -21,14 +21,5 @@ export async function fetchStringAutocompleteList({
     return data
         .map((item) => ({ count: item.count, value: item[field] }))
         .filter((item): item is { count: number; value: string } => item.value !== null)
-        .sort((a, b) => {
-            if (a.value === null) {
-                return 1;
-            }
-            if (b.value === null) {
-                return -1;
-            }
-
-            return a.value.localeCompare(b.value);
-        });
+        .sort((a, b) => a.value.localeCompare(b.value));
 }

package/src/preact/textFilter/text-filter.tsx

@@ -8,7 +8,6 @@ import { lapisFilterSchema } from '../../types';
 import { DownshiftCombobox } from '../components/downshift-combobox';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
-import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
 
@@ -60,10 +59,6 @@ const TextFilterInner: FunctionComponent<TextFilterInnerProps> = ({
         throw error;
     }
 
-    if (data === null) {
-        return <NoDataDisplay />;
-    }
-
     return <TextSelector lapisField={lapisField} value={value} placeholderText={placeholderText} data={data} />;
 };
 
@@ -106,5 +101,5 @@ function filterByInputValue(item: SelectItem, inputValue: string | null) {
     if (inputValue === null || inputValue === '') {
         return true;
     }
-    return item.value?.toLowerCase().includes(inputValue?.toLowerCase() || '');
+    return item.value.toLowerCase().includes(inputValue.toLowerCase());
 }

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

@@ -14,13 +14,16 @@ import { ErrorBoundary } from '../../components/error-boundary';
 import { Fullscreen } from '../../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../../components/info';
 import { LoadingDisplay } from '../../components/loading-display';
-import { MutationsOverTimeTextFilter } from '../../components/mutations-over-time-text-filter';
+import { MutationsOverTimeMutationsFilter } from '../../components/mutations-over-time-mutations-filter';
 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 { mutationOrAnnotationDoNotMatchFilter } from '../../mutationsOverTime/getFilteredMutationsOverTimeData';
+import {
+    type MutationFilter,
+    mutationOrAnnotationDoNotMatchFilter,
+} from '../../mutationsOverTime/getFilteredMutationsOverTimeData';
 import MutationsOverTimeGrid from '../../mutationsOverTime/mutations-over-time-grid';
 import { pageSizesSchema } from '../../shared/tanstackTable/pagination';
 import { PageSizeContextProvider } from '../../shared/tanstackTable/pagination-context';
@@ -97,7 +100,7 @@ function useDisplayedSegments(mutations: MutationOverTimeDataPerLocation) {
     const displayedSegments = useMemo(() => {
         const unique = [
             ...new Set(
-                mutations.flatMap(({ data }) => data.getFirstAxisKeys().map((mutation) => mutation.segment || '')),
+                mutations.flatMap(({ data }) => data.getFirstAxisKeys().map((mutation) => mutation.segment ?? '')),
             ),
         ];
 
@@ -121,7 +124,7 @@ function getFilteredMutationOverTimeData({
 }: {
     data: MutationOverTimeDataMap;
     displayedSegments: DisplayedSegment[];
-    mutationFilterValue: string;
+    mutationFilterValue: MutationFilter;
     sequenceType: SequenceType;
     annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>;
 }): MutationOverTimeDataMap {
@@ -148,7 +151,10 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
 }) => {
     const tabsRef = useDispatchFinishedLoadingEvent();
 
-    const [mutationFilterValue, setMutationFilterValue] = useState('');
+    const [mutationFilterValue, setMutationFilterValue] = useState<MutationFilter>({
+        textFilter: '',
+        annotationNameFilter: new Set(),
+    });
     const annotationProvider = useMutationAnnotationsProvider();
 
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
@@ -211,8 +217,8 @@ type ToolbarProps = {
     data: MutationOverTimeDataPerLocation;
     displayedSegments: DisplayedSegment[];
     setDisplayedSegments: (segments: DisplayedSegment[]) => void;
-    mutationFilterValue: string;
-    setFilterValue: (filterValue: string) => void;
+    mutationFilterValue: MutationFilter;
+    setFilterValue: Dispatch<StateUpdater<MutationFilter>>;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -226,7 +232,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
 }) => {
     return (
         <>
-            <MutationsOverTimeTextFilter setFilterValue={setFilterValue} value={mutationFilterValue} />
+            <MutationsOverTimeMutationsFilter setFilterValue={setFilterValue} value={mutationFilterValue} />
             <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
             <SegmentSelector
                 displayedSegments={displayedSegments}

package/src/preact/webWorkers/useWebWorker.ts

@@ -23,7 +23,8 @@ export type ErrorWorkerStatus =
       };
 export type WorkerStatus<Response> = LoadingWorkerStatus | SuccessWorkerStatus<Response> | ErrorWorkerStatus;
 
-export function useWebWorker<Request, Response>(messageToWorker: Request, WorkerConstructor: new () => Worker) {
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters -- We need the return type
+export function useWebWorker<Response>(messageToWorker: unknown, WorkerConstructor: new () => Worker) {
     const [data, setData] = useState<Response | undefined>(undefined);
     const [error, setError] = useState<Error | undefined>(undefined);
     const [isLoading, setIsLoading] = useState(true);

package/src/preact/webWorkers/workerFunction.ts

@@ -1,7 +1,7 @@
 import { type ErrorWorkerStatus, type LoadingWorkerStatus, type SuccessWorkerStatus } from './useWebWorker';
 import { UserFacingError } from '../components/error-display';
 
-export async function workerFunction<R>(queryFunction: () => R) {
+export async function workerFunction(queryFunction: () => unknown) {
     try {
         postMessage({ status: 'loading' } satisfies LoadingWorkerStatus);
 
@@ -10,7 +10,7 @@ export async function workerFunction<R>(queryFunction: () => R) {
         postMessage({
             status: 'success',
             data: workerResponse,
-        } satisfies SuccessWorkerStatus<R>);
+        } satisfies SuccessWorkerStatus<unknown>);
     } catch (error) {
         postMessage(
             (error instanceof UserFacingError

package/src/query/computeMapLocationData.ts

@@ -83,7 +83,7 @@ function matchLocationDataAndGeoJsonFeatures(
 
     const locations: Feature<GeometryObject, EnhancedGeoJsonFeatureProperties>[] = geojsonData.features.map(
         (feature) => {
-            const name = feature?.properties?.name;
+            const name = feature.properties.name;
             if (typeof name !== 'string') {
                 throw new Error(
                     `GeoJSON feature with id '${feature.id}' does not have 'properties.name' of type string, was: '${name}'`,

package/src/query/queryAggregatedDataOverTime.ts

@@ -14,13 +14,13 @@ import {
     type TemporalClass,
 } from '../utils/temporalClass';
 
-export function queryAggregatedDataOverTime<LapisDateField extends string>(
+export function queryAggregatedDataOverTime(
     filter: LapisFilter,
     granularity: TemporalGranularity,
     smoothingWindow: number,
-    lapisDateField: LapisDateField,
+    lapisDateField: string,
 ) {
-    const fetchData = new FetchAggregatedOperator<{ [key in LapisDateField]: string | null }>(filter, [lapisDateField]);
+    const fetchData = new FetchAggregatedOperator<Record<string, string | null>>(filter, [lapisDateField]);
     const dataWithFixedDateKey = new RenameFieldOperator(fetchData, lapisDateField, 'date');
     const mapData = new MapOperator(dataWithFixedDateKey, (d) => mapDateToGranularityRange(d, granularity));
     const groupByData = new GroupByAndSumOperator(mapData, 'dateRange', 'count');