@genspectrum/dashboard-components 1.16.0 → 1.18.0

package/src/preact/MutationAnnotationsContext.tsx

@@ -11,12 +11,18 @@ import { ErrorDisplay } from './components/error-display';
 import { ResizeContainer } from './components/resize-container';
 import { type Mutation } from '../utils/mutations';
 
-type MutationAnnotationPerSequenceType = {
-    mutation: Map<string, MutationAnnotations>;
-    position: Map<string, MutationAnnotations>;
+export type ResolvedMutationAnnotation = {
+    annotation: MutationAnnotation;
+    name: string;
+    description: string;
 };
 
-type MutationAnnotationsContextValue = Record<SequenceType, MutationAnnotationPerSequenceType> & {
+type AnnotationLookup = {
+    mutation: Map<string, ResolvedMutationAnnotation[]>;
+    position: Map<string, ResolvedMutationAnnotation[]>;
+};
+
+type MutationAnnotationsContextValue = Record<SequenceType, AnnotationLookup> & {
     rawAnnotations: MutationAnnotations;
 };
 
@@ -32,73 +38,117 @@ const MutationAnnotationsContext = createContext<MutationAnnotationsContextValue
     },
 });
 
+/**
+ * Validates and provides mutation annotations to all descendant components.
+ * Accepts the raw MutationAnnotations config, builds the internal lookup index, and stores it in context.
+ * Renders an error message if the provided annotations fail schema validation.
+ */
 export const MutationAnnotationsContextProvider: FunctionalComponent<
     Omit<ComponentProps<typeof MutationAnnotationsContext.Provider>, 'value'> & { value: MutationAnnotations }
 > = ({ value, children }) => {
-    const parseResult = useMemo(() => {
-        const parseResult = mutationAnnotationsSchema.safeParse(value);
-
-        if (!parseResult.success) {
-            return parseResult;
-        }
-
-        return { success: true as const, value: getMutationAnnotationsContext(value) };
-    }, [value]);
+    const parseResult = useMemo(() => mutationAnnotationsSchema.safeParse(value), [value]);
+    const contextValue = useMemo(
+        () =>
+            parseResult.success
+                ? { success: true as const, value: buildAnnotationIndex(parseResult.data) }
+                : { success: false as const, error: parseResult.error },
+        [parseResult],
+    );
 
-    if (!parseResult.success) {
+    if (!contextValue.success) {
         return (
             <ResizeContainer size={{ width: '100%' }}>
-                <ErrorDisplay error={parseResult.error} layout='vertical' />
+                <ErrorDisplay error={contextValue.error} layout='vertical' />
             </ResizeContainer>
         );
     }
 
     return (
-        <MutationAnnotationsContext.Provider value={parseResult.value}>{children}</MutationAnnotationsContext.Provider>
+        <MutationAnnotationsContext.Provider value={contextValue.value}>{children}</MutationAnnotationsContext.Provider>
     );
 };
 
-export function getMutationAnnotationsContext(value: MutationAnnotations) {
-    const nucleotideMap = new Map<string, MutationAnnotations>();
-    const nucleotidePositions = new Map<string, MutationAnnotations>();
-    const aminoAcidMap = new Map<string, MutationAnnotations>();
-    const aminoAcidPositions = new Map<string, MutationAnnotations>();
+/**
+ * Indexes a flat list of MutationAnnotations into fast lookup maps, resolving per-entry name/description overrides
+ * eagerly. Called once (memoized) when the annotations config is set on the provider.
+ *
+ * Returns two maps per sequence type — one keyed by exact mutation code, one by position string — each mapping to
+ * the list of ResolvedMutationAnnotations that apply to that key.
+ */
+export function buildAnnotationIndex(value: MutationAnnotations): MutationAnnotationsContextValue {
+    const nucleotideMutationMap = new Map<string, ResolvedMutationAnnotation[]>();
+    const nucleotidePositionMap = new Map<string, ResolvedMutationAnnotation[]>();
+    const aminoAcidMutationMap = new Map<string, ResolvedMutationAnnotation[]>();
+    const aminoAcidPositionMap = new Map<string, ResolvedMutationAnnotation[]>();
 
     value.forEach((annotation) => {
-        new Set(annotation.nucleotideMutations).forEach((code) => {
-            addAnnotationToMap(nucleotideMap, code, annotation);
+        annotation.nucleotideMutations?.forEach((entry) => {
+            addToMap(
+                nucleotideMutationMap,
+                typeof entry === 'string' ? entry : entry.mutation,
+                resolve(annotation, entry),
+            );
         });
-        new Set(annotation.aminoAcidMutations).forEach((code) => {
-            addAnnotationToMap(aminoAcidMap, code, annotation);
+        annotation.aminoAcidMutations?.forEach((entry) => {
+            addToMap(
+                aminoAcidMutationMap,
+                typeof entry === 'string' ? entry : entry.mutation,
+                resolve(annotation, entry),
+            );
         });
-        new Set(annotation.nucleotidePositions).forEach((position) => {
-            addAnnotationToMap(nucleotidePositions, position, annotation);
+        annotation.nucleotidePositions?.forEach((entry) => {
+            addToMap(
+                nucleotidePositionMap,
+                typeof entry === 'string' ? entry : entry.position,
+                resolve(annotation, entry),
+            );
         });
-        new Set(annotation.aminoAcidPositions).forEach((position) => {
-            addAnnotationToMap(aminoAcidPositions, position, annotation);
+        annotation.aminoAcidPositions?.forEach((entry) => {
+            addToMap(
+                aminoAcidPositionMap,
+                typeof entry === 'string' ? entry : entry.position,
+                resolve(annotation, entry),
+            );
         });
     });
 
     return {
         rawAnnotations: value,
-        nucleotide: { mutation: nucleotideMap, position: nucleotidePositions },
-        'amino acid': { mutation: aminoAcidMap, position: aminoAcidPositions },
+        nucleotide: { mutation: nucleotideMutationMap, position: nucleotidePositionMap },
+        'amino acid': { mutation: aminoAcidMutationMap, position: aminoAcidPositionMap },
+    };
+}
+
+function resolve(
+    annotation: MutationAnnotation,
+    entry: string | { name?: string; description?: string },
+): ResolvedMutationAnnotation {
+    const overrides = typeof entry === 'object' ? entry : undefined;
+    return {
+        annotation,
+        name: overrides?.name ?? annotation.name,
+        description: overrides?.description ?? annotation.description,
     };
 }
 
-function addAnnotationToMap(map: Map<string, MutationAnnotations>, code: string, annotation: MutationAnnotation) {
-    const oldAnnotations = map.get(code.toUpperCase()) ?? [];
-    map.set(code.toUpperCase(), [...oldAnnotations, annotation]);
+function addToMap(map: Map<string, ResolvedMutationAnnotation[]>, code: string, resolved: ResolvedMutationAnnotation) {
+    const existing = map.get(code.toUpperCase()) ?? [];
+    map.set(code.toUpperCase(), [...existing, resolved]);
 }
 
 export function useRawMutationAnnotations() {
     return useContext(MutationAnnotationsContext).rawAnnotations;
 }
 
+/**
+ * Returns a lookup function `(mutation, sequenceType) => ResolvedMutationAnnotation[] | undefined` that, given a
+ * specific mutation, returns all annotations that apply to it with name and description already resolved.
+ * Returns undefined if no annotations match.
+ */
 export function useMutationAnnotationsProvider() {
     const mutationAnnotations = useContext(MutationAnnotationsContext);
 
-    return getMutationAnnotationsProvider(mutationAnnotations);
+    return useMemo(() => getMutationAnnotationsProvider(mutationAnnotations), [mutationAnnotations]);
 }
 
 export function getMutationAnnotationsProvider(mutationAnnotations: MutationAnnotationsContextValue) {
@@ -108,21 +158,19 @@ export function getMutationAnnotationsProvider(mutationAnnotations: MutationAnno
                 ? `${mutation.position}`
                 : `${mutation.segment.toUpperCase()}:${mutation.position}`;
 
-        const possiblePositionAnnotations = mutationAnnotations[sequenceType].position.get(position);
-        const possibleExactAnnotations = mutationAnnotations[sequenceType].mutation.get(mutation.code.toUpperCase());
+        const exactMatches = mutationAnnotations[sequenceType].mutation.get(mutation.code.toUpperCase());
+        const positionMatches = mutationAnnotations[sequenceType].position.get(position);
 
-        const annotations =
-            possiblePositionAnnotations && possibleExactAnnotations
-                ? [...possiblePositionAnnotations, ...possibleExactAnnotations]
-                : (possiblePositionAnnotations ?? possibleExactAnnotations);
+        const combined =
+            exactMatches && positionMatches ? [...exactMatches, ...positionMatches] : (exactMatches ?? positionMatches);
 
-        const uniqueNames = new Set<string>();
+        const seenNames = new Set<string>();
 
-        return annotations?.filter((annotation) => {
-            if (uniqueNames.has(annotation.name)) {
+        return combined?.filter((resolved) => {
+            if (seenNames.has(resolved.annotation.name)) {
                 return false;
             }
-            uniqueNames.add(annotation.name);
+            seenNames.add(resolved.annotation.name);
             return true;
         });
     };

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

@@ -128,6 +128,37 @@ export const MutationWithMultipleAnnotationEntries: StoryObj<StoryProps> = {
     },
 };
 
+export const MutationWithPerMutationInfoOverride: StoryObj<StoryProps> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        ...MutationWithoutAnnotationEntry.args,
+        annotations: [
+            {
+                name: 'Group annotation',
+                description: 'Group-level description',
+                symbol: 'c',
+                nucleotideMutations: [
+                    {
+                        mutation: 'A23403G',
+                        name: '3CLpro:T31C',
+                        description: 'Per-mutation description for 3CLpro:T31C',
+                    },
+                ],
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
+        await expect(getAnnotationIndicator(canvas)).toBeVisible();
+
+        await userEvent.click(canvas.getByText('c'));
+        await waitFor(() => expect(canvas.queryByText('3CLpro:T31C')).toBeVisible());
+        await expect(canvas.queryByText('Per-mutation description for 3CLpro:T31C')).toBeVisible();
+    },
+};
+
 export const AminoAcidMutationWithAnnotationEntry: StoryObj<StoryProps> = {
     ...MutationWithoutAnnotationEntry,
     args: {

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

@@ -78,11 +78,11 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
     const modalContent = (
         <div className='block'>
             <InfoHeadline1>Annotations for {mutation.code}</InfoHeadline1>
-            {mutationAnnotations.map((annotation) => (
-                <Fragment key={annotation.name}>
-                    <InfoHeadline2>{annotation.name}</InfoHeadline2>
+            {mutationAnnotations.map((resolved) => (
+                <Fragment key={resolved.annotation.name}>
+                    <InfoHeadline2>{resolved.name}</InfoHeadline2>
                     <InfoParagraph>
-                        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(annotation.description) }} />
+                        <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(resolved.description) }} />
                     </InfoParagraph>
                 </Fragment>
             ))}
@@ -99,7 +99,7 @@ const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithou
             >
                 <sup className='hover:underline focus-visible:underline decoration-red-600'>
                     {mutationAnnotations
-                        .map((annotation) => annotation.symbol)
+                        .map((resolved) => resolved.annotation.symbol)
                         .map((symbol, index) => (
                             <Fragment key={symbol}>
                                 <span className='text-red-600'>{symbol}</span>

package/src/preact/components/csv-download-button.tsx

@@ -1,4 +1,5 @@
 import { type FunctionComponent } from 'preact';
+import { useState } from 'preact/hooks';
 
 type ToStringable = {
     toString: () => string;
@@ -9,7 +10,7 @@ export type DataValue = string | number | boolean | null | undefined | ToStringa
 export interface CsvDownloadButtonProps {
     label?: string;
     filename?: string;
-    getData: () => Record<string, DataValue>[];
+    getData: () => Record<string, DataValue>[] | Promise<Record<string, DataValue>[]>;
     className?: string;
 }
 
@@ -19,19 +20,26 @@ export const CsvDownloadButton: FunctionComponent<CsvDownloadButtonProps> = ({
     getData,
     className,
 }) => {
-    const download = () => {
-        const content = getDownloadContent();
-        const blob = new Blob([content], { type: 'text/csv' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        a.click();
-        URL.revokeObjectURL(url);
+    const [isDownloading, setIsDownloading] = useState(false);
+
+    const download = async () => {
+        setIsDownloading(true);
+        try {
+            const content = await getDownloadContent();
+            const blob = new Blob([content], { type: 'text/csv' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = filename;
+            a.click();
+            URL.revokeObjectURL(url);
+        } finally {
+            setIsDownloading(false);
+        }
     };
 
-    const getDownloadContent = () => {
-        const data = getData();
+    const getDownloadContent = async () => {
+        const data = await getData();
         const keys = getDataKeys(data);
         const header = keys.join(',');
         const rows = data.map((row) => keys.map((key) => row[key]).join(',')).join('\n');
@@ -50,8 +58,8 @@ export const CsvDownloadButton: FunctionComponent<CsvDownloadButtonProps> = ({
     };
 
     return (
-        <button className={className} onClick={download}>
-            {label}
+        <button className={className} onClick={() => void download()} disabled={isDownloading}>
+            {isDownloading ? 'Downloading...' : label}
         </button>
     );
 };

package/src/preact/components/features-over-time-grid.tsx

@@ -1,5 +1,7 @@
+import { createColumnHelper, getCoreRowModel, getPaginationRowModel } from '@tanstack/table-core';
+import type { Table } from '@tanstack/table-core';
 import { type FunctionComponent, type JSX } from 'preact';
-import { useMemo } from 'preact/hooks';
+import { type Dispatch, type StateUpdater, useMemo } from 'preact/hooks';
 import z from 'zod';
 
 import { type ColorScale, getColorWithinScale, getTextColorForScale } from './color-scale-selector';
@@ -11,13 +13,7 @@ import { type TemporalDataMap } from '../mutationsOverTime/MutationOverTimeData'
 import { formatProportion } from '../shared/table/formatProportion';
 import { type PageSizes, Pagination } from '../shared/tanstackTable/pagination';
 import { usePageSizeContext } from '../shared/tanstackTable/pagination-context';
-import {
-    createColumnHelper,
-    flexRender,
-    getCoreRowModel,
-    getPaginationRowModel,
-    usePreactTable,
-} from '../shared/tanstackTable/tanstackTable';
+import { flexRender, usePreactTable } from '../shared/tanstackTable/tanstackTable';
 
 const NON_BREAKING_SPACE = '\u00A0';
 
@@ -60,18 +56,118 @@ function FeaturesOverTimeGrid<F>({
     featureRenderer,
     tooltipPortalTarget,
 }: FeaturesOverTimeGridProps<F>) {
-    const tableData = useMemo(() => {
-        const firstAxisKeys = data.getFirstAxisKeys();
-        return data.getAsArray().map((row, index): RowType<F> => {
-            const firstAxisKey = firstAxisKeys[index];
-            const customValues = customColumns.map((col) => col.values[featureRenderer.asString(firstAxisKey)]);
-            return { feature: firstAxisKey, values: [...row], customValues };
-        });
-    }, [data, customColumns, featureRenderer]);
+    const tableData = useGridTableData(data, customColumns, featureRenderer);
+    const columns = useGridColumns(
+        data.getSecondAxisKeys(),
+        rowLabelHeader,
+        customColumns,
+        colorScale,
+        tooltipPortalTarget,
+        featureRenderer,
+    );
+    const { pageSize } = usePageSizeContext();
+
+    const table = usePreactTable({
+        data: tableData,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        initialState: {
+            pagination: { pageIndex: 0, pageSize },
+        },
+    });
+
+    return <FeaturesOverTimeGridDisplay table={table} pageSizes={pageSizes} />;
+}
+
+export interface FeaturesOverTimeGridServerPaginatedProps<F> {
+    rowLabelHeader: string;
+    data: TemporalDataMap<F> | null;
+    isLoading: boolean;
+    /** Labels to show in the row label column while the page data is loading. */
+    loadingRowLabels: string[];
+    /** Date columns to show in the header while loading */
+    requestedDateRanges: Temporal[];
+    colorScale: ColorScale;
+    pageSizes: PageSizes;
+    /** Controlled page index (0-based). */
+    pageIndex: number;
+    /** Total number of rows across all pages. */
+    totalRows: number;
+    onPageChange: Dispatch<StateUpdater<number>>;
+    customColumns?: CustomColumn[];
+    featureRenderer: FeatureRenderer<F>;
+    tooltipPortalTarget: HTMLElement | null;
+}
+
+export function FeaturesOverTimeGridServerPaginated<F>({
+    rowLabelHeader,
+    data,
+    isLoading,
+    loadingRowLabels,
+    requestedDateRanges,
+    colorScale,
+    pageSizes,
+    pageIndex,
+    totalRows,
+    onPageChange,
+    customColumns = EMPTY_COLUMNS,
+    featureRenderer,
+    tooltipPortalTarget,
+}: FeaturesOverTimeGridServerPaginatedProps<F>) {
+    const tableData = useGridTableData(data, customColumns, featureRenderer);
+    const columns = useGridColumns(
+        data?.getSecondAxisKeys() ?? requestedDateRanges,
+        rowLabelHeader,
+        customColumns,
+        colorScale,
+        tooltipPortalTarget,
+        featureRenderer,
+    );
+    const { pageSize, setPageSize } = usePageSizeContext();
+
+    const table = usePreactTable({
+        data: tableData,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        // getPaginationRowModel not needed with manualPagination: true
+        manualPagination: true,
+        pageCount: Math.ceil(totalRows / pageSize),
+        state: {
+            pagination: { pageIndex, pageSize },
+        },
+        onPaginationChange: (updater) => {
+            const current = { pageIndex, pageSize };
+            const next = typeof updater === 'function' ? updater(current) : updater;
+            if (next.pageIndex !== current.pageIndex) {
+                onPageChange(next.pageIndex);
+            }
+            if (next.pageSize !== current.pageSize) {
+                setPageSize(next.pageSize);
+            }
+        },
+    });
 
-    const columns = useMemo(() => {
+    return (
+        <FeaturesOverTimeGridDisplay
+            table={table}
+            pageSizes={pageSizes}
+            loadingState={{ isLoading, loadingRowLabels }}
+            totalRows={totalRows}
+        />
+    );
+}
+
+function useGridColumns<F>(
+    dates: Temporal[],
+    rowLabelHeader: string,
+    customColumns: CustomColumn[],
+    colorScale: ColorScale,
+    tooltipPortalTarget: HTMLElement | null,
+    featureRenderer: FeatureRenderer<F>,
+) {
+    return useMemo(() => {
         const columnHelper = createColumnHelper<RowType<F>>();
-        const dates = data.getSecondAxisKeys();
 
         const featureHeader = columnHelper.accessor((row) => row.feature, {
             id: 'feature',
@@ -137,21 +233,48 @@ function FeaturesOverTimeGrid<F>({
         });
 
         return [featureHeader, ...customColumnHeaders, ...dateHeaders];
-    }, [colorScale, data, customColumns, tooltipPortalTarget, featureRenderer, rowLabelHeader]);
+    }, [colorScale, dates, customColumns, tooltipPortalTarget, featureRenderer, rowLabelHeader]);
+}
 
-    const { pageSize } = usePageSizeContext();
-    const table = usePreactTable({
-        data: tableData,
-        columns,
-        getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        initialState: {
-            pagination: {
-                pageIndex: 0,
-                pageSize,
-            },
-        },
-    });
+function useGridTableData<F>(
+    data: TemporalDataMap<F> | null | undefined,
+    customColumns: CustomColumn[],
+    featureRenderer: FeatureRenderer<F>,
+) {
+    return useMemo(() => {
+        if (!data) {
+            return [];
+        }
+        const firstAxisKeys = data.getFirstAxisKeys();
+        return data.getAsArray().map((row, index): RowType<F> => {
+            const firstAxisKey = firstAxisKeys[index];
+            const customValues = customColumns.map((col) => col.values[featureRenderer.asString(firstAxisKey)]);
+            return { feature: firstAxisKey, values: [...row], customValues };
+        });
+    }, [data, customColumns, featureRenderer]);
+}
+
+type FeaturesOverTimeGridDisplayProps<F> = {
+    table: Table<RowType<F>>;
+    pageSizes: PageSizes;
+    /** Override for the pagination row count (server-driven pagination). */
+    totalRows?: number;
+    loadingState?:
+        | {
+              isLoading: boolean;
+              /** Labels to render in the row label column while loading. One skeleton row is shown per label. */
+              loadingRowLabels: string[];
+          }
+        | { isLoading: false; loadingRowLabels?: never };
+};
+
+function FeaturesOverTimeGridDisplay<F>({
+    table,
+    pageSizes,
+    loadingState,
+    totalRows,
+}: FeaturesOverTimeGridDisplayProps<F>) {
+    const displayedTotalRows = totalRows ?? table.getCoreRowModel().rows.length;
 
     return (
         <div className='w-full'>
@@ -170,22 +293,45 @@ function FeaturesOverTimeGrid<F>({
                     ))}
                 </thead>
                 <tbody>
-                    {table.getRowModel().rows.map((row) => (
-                        <tr key={row.id}>
-                            {row.getVisibleCells().map((cell) => (
-                                <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
+                    {loadingState?.isLoading ? (
+                        loadingState.loadingRowLabels.map((label, rowIndex) => (
+                            <tr key={label}>
+                                <td className='text-center'>{label}</td>
+                                {rowIndex === 0 && (
+                                    <td
+                                        rowSpan={loadingState.loadingRowLabels.length}
+                                        colSpan={table.getFlatHeaders().length - 1}
+                                        className='text-center'
+                                    >
+                                        <span className='loading loading-spinner loading-sm' />
+                                    </td>
+                                )}
+                            </tr>
+                        ))
+                    ) : (
+                        <>
+                            {table.getRowModel().rows.map((row) => (
+                                <tr key={row.id}>
+                                    {row.getVisibleCells().map((cell) => (
+                                        <td key={cell.id}>
+                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                        </td>
+                                    ))}
+                                </tr>
                             ))}
-                        </tr>
-                    ))}
-                    {table.getRowModel().rows.length === 0 && (
-                        <td colSpan={table.getFlatHeaders().length}>
-                            <div className={'text-center'}>No data available for your filters.</div>
-                        </td>
+                            {table.getRowModel().rows.length === 0 && (
+                                <tr>
+                                    <td colSpan={table.getFlatHeaders().length}>
+                                        <div className={'text-center'}>No data available for your filters.</div>
+                                    </td>
+                                </tr>
+                            )}
+                        </>
                     )}
                 </tbody>
             </table>
             <div className={'mt-2'}>
-                <Pagination table={table} pageSizes={pageSizes} />
+                <Pagination table={table} pageSizes={pageSizes} totalRows={displayedTotalRows} />
             </div>
         </div>
     );

package/src/preact/components/mutations-over-time-mutations-filter.stories.tsx

@@ -9,7 +9,7 @@ import {
 } from './mutations-over-time-mutations-filter';
 import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
-import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationsOverTimeData';
+import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationCodes';
 
 const meta: Meta = {
     title: 'Component/Mutations over time mutations filter',

package/src/preact/components/mutations-over-time-mutations-filter.tsx

@@ -3,7 +3,7 @@ import { type Dispatch, type StateUpdater, useCallback, useEffect, useState } fr
 
 import { Dropdown } from './dropdown';
 import { useRawMutationAnnotations } from '../MutationAnnotationsContext';
-import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationsOverTimeData';
+import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationCodes';
 import { DeleteIcon } from '../shared/icons/DeleteIcon';
 
 export type MutationsOverTimeMutationsFilterProps = {