@genspectrum/dashboard-components 0.16.1 → 0.16.3

package/dist/style.css

@@ -1073,6 +1073,12 @@ html {
     --tw-bg-opacity: 1;
     background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
   }
+
+  .table-zebra tr.hover:hover,
+  .table-zebra tr.hover:nth-child(even):hover {
+    --tw-bg-opacity: 1;
+    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
+  }
 }
 .btn {
   display: inline-flex;
@@ -3187,6 +3193,9 @@ input.tab:checked + .tab-content,
 .mt-4 {
   margin-top: 1rem;
 }
+.block {
+  display: block;
+}
 .inline {
   display: inline;
 }
@@ -3492,6 +3501,9 @@ input.tab:checked + .tab-content,
 .font-medium {
   font-weight: 500;
 }
+.font-normal {
+  font-weight: 400;
+}
 .font-semibold {
   font-weight: 600;
 }
@@ -3522,6 +3534,10 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: rgb(115 115 115 / var(--tw-text-opacity, 1));
 }
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
 .text-red-700 {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity, 1));

package/dist/util.d.ts

@@ -880,7 +880,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -888,7 +888,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -896,7 +896,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -904,7 +904,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -912,7 +912,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -920,7 +920,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -928,7 +928,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -936,7 +936,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -944,7 +944,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -952,7 +952,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -960,7 +960,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -968,7 +968,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -976,7 +976,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -984,7 +987,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -992,7 +995,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1000,7 +1003,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1008,11 +1011,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1020,7 +1019,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1028,10 +1027,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -1039,7 +1039,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.16.1",
+    "version": "0.16.3",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -51,7 +51,7 @@
     "scripts": {
         "build": "vite --config vite.release.config.ts build && npm run generate-manifest && vite --config vite.release-standalone.config.ts build",
         "build-and-pack": "npm run build && npm pack | xargs -I {} cp {} genspectrum-dashboard-components.tgz",
-        "test": "vitest",
+        "test": "vitest --typecheck",
         "lint": "npm run lint:lit-analyzer && npm run lint:eslint",
         "lint:eslint": "eslint 'src/**/*.{ts,tsx}'",
         "lint:lit-analyzer": "lit-analyzer",
@@ -115,6 +115,7 @@
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
         "@tailwindcss/container-queries": "^0.1.1",
+        "@testing-library/preact": "^3.2.4",
         "@types/geojson": "^7946.0.15",
         "@types/leaflet": "^1.9.15",
         "@types/node": "^22.0.0",
@@ -130,6 +131,7 @@
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-jest": "^28.2.0",
         "eslint-plugin-storybook": "^0.11.0",
+        "happy-dom": "^17.1.1",
         "http-server": "^14.1.1",
         "lit-analyzer": "^2.0.3",
         "msw": "^2.2.14",

package/src/preact/MutationAnnotationsContext.spec.tsx

@@ -0,0 +1,58 @@
+import { renderHook } from '@testing-library/preact';
+import { type FunctionalComponent } from 'preact';
+import { describe, expect, it } from 'vitest';
+
+import { MutationAnnotationsContextProvider, useMutationAnnotationsProvider } from './MutationAnnotationsContext';
+import { type MutationAnnotations } from '../web-components/mutation-annotations-context';
+
+describe('useMutationAnnotation', () => {
+    const mockAnnotations: MutationAnnotations = [
+        {
+            name: 'Annotation 1',
+            description: 'Description 1',
+            symbol: 'A1',
+            nucleotideMutations: ['A123', 'A456'],
+            aminoAcidMutations: ['B123'],
+        },
+        {
+            name: 'Annotation 2',
+            description: 'Description 2',
+            symbol: 'A2',
+            nucleotideMutations: ['A456', 'A789'],
+            aminoAcidMutations: ['B456', 'B789'],
+        },
+    ];
+
+    const wrapper: FunctionalComponent = ({ children }) => (
+        <MutationAnnotationsContextProvider value={mockAnnotations}>{children}</MutationAnnotationsContextProvider>
+    );
+
+    function renderAnnotationsHook() {
+        const { result } = renderHook(() => useMutationAnnotationsProvider(), { wrapper });
+        return result.current;
+    }
+
+    it('should return the correct annotation for a given nucleotide mutation', () => {
+        const result = renderAnnotationsHook()('A123', 'nucleotide');
+
+        expect(result).toEqual([mockAnnotations[0]]);
+    });
+
+    it('should return the correct annotations if multiple contain a mutation', () => {
+        const result = renderAnnotationsHook()('A456', 'nucleotide');
+
+        expect(result).toEqual([mockAnnotations[0], mockAnnotations[1]]);
+    });
+
+    it('should return undefined for a non-existent mutation code', () => {
+        const result = renderAnnotationsHook()('NON_EXISTENT', 'nucleotide');
+
+        expect(result).toBeUndefined();
+    });
+
+    it('should return the correct mutation annotation for amino acid mutations', () => {
+        const result = renderAnnotationsHook()('B456', 'amino acid');
+
+        expect(result).toEqual([mockAnnotations[1]]);
+    });
+});

package/src/preact/MutationAnnotationsContext.tsx

@@ -0,0 +1,72 @@
+import { type ComponentProps, createContext, type FunctionalComponent } from 'preact';
+import { useContext, useMemo } from 'preact/hooks';
+
+import { type SequenceType } from '../types';
+import {
+    type MutationAnnotation,
+    type MutationAnnotations,
+    mutationAnnotationsSchema,
+} from '../web-components/mutation-annotations-context';
+import { ErrorDisplay } from './components/error-display';
+import { ResizeContainer } from './components/resize-container';
+
+const MutationAnnotationsContext = createContext<Record<SequenceType, Map<string, MutationAnnotations>>>({
+    nucleotide: new Map(),
+    'amino acid': new Map(),
+});
+
+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;
+        }
+
+        const nucleotideMap = new Map<string, MutationAnnotations>();
+        const aminoAcidMap = new Map<string, MutationAnnotations>();
+
+        value.forEach((annotation) => {
+            new Set(annotation.nucleotideMutations).forEach((code) => {
+                addAnnotationToMap(nucleotideMap, code, annotation);
+            });
+            new Set(annotation.aminoAcidMutations).forEach((code) => {
+                addAnnotationToMap(aminoAcidMap, code, annotation);
+            });
+        });
+
+        return {
+            success: true as const,
+            value: {
+                nucleotide: nucleotideMap,
+                'amino acid': aminoAcidMap,
+            },
+        };
+    }, [value]);
+
+    if (!parseResult.success) {
+        return (
+            <ResizeContainer size={{ width: '100%' }}>
+                <ErrorDisplay error={parseResult.error} layout='vertical' />
+            </ResizeContainer>
+        );
+    }
+
+    return (
+        <MutationAnnotationsContext.Provider value={parseResult.value}>{children}</MutationAnnotationsContext.Provider>
+    );
+};
+
+function addAnnotationToMap(map: Map<string, MutationAnnotations>, code: string, annotation: MutationAnnotation) {
+    const oldAnnotations = map.get(code.toUpperCase()) ?? [];
+    map.set(code.toUpperCase(), [...oldAnnotations, annotation]);
+}
+
+export function useMutationAnnotationsProvider() {
+    const mutationAnnotations = useContext(MutationAnnotationsContext);
+
+    return (mutationCode: string, sequenceType: SequenceType) =>
+        mutationAnnotations[sequenceType].get(mutationCode.toUpperCase());
+}

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

@@ -0,0 +1,163 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
+
+import { AnnotatedMutation, type AnnotatedMutationProps } from './annotated-mutation';
+import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
+import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
+
+const meta: Meta<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+    title: 'Component/Annotated Mutation',
+    component: AnnotatedMutation,
+    parameters: { fetchMock: {} },
+    argTypes: {
+        annotations: { control: { type: 'object' } },
+        mutation: { control: { type: 'object' } },
+        sequenceType: {
+            options: ['nucleotide', 'amino acid'],
+            control: { type: 'radio' },
+        },
+    },
+};
+
+export default meta;
+
+export const MutationWithoutAnnotationEntry: StoryObj<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+    render: (args) => {
+        const { annotations, ...annotatedMutationsArgs } = args;
+
+        return (
+            <MutationAnnotationsContextProvider value={annotations}>
+                <AnnotatedMutation {...annotatedMutationsArgs} />
+            </MutationAnnotationsContextProvider>
+        );
+    },
+    args: {
+        mutation: {
+            type: 'substitution',
+            code: 'A23403G',
+            position: 23403,
+            valueAtReference: 'A',
+            substitutionValue: 'G',
+        },
+        sequenceType: 'nucleotide',
+        annotations: [
+            {
+                name: 'Test annotation',
+                description: 'This is a test annotation',
+                symbol: '*',
+                nucleotideMutations: ['123T'],
+                aminoAcidMutations: [],
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
+        await expect(getAnnotationIndicator(canvas)).not.toBeInTheDocument();
+        await expect(getAnnotationName(canvas)).not.toBeInTheDocument();
+    },
+};
+
+export const MutationWithAnnotationEntry: StoryObj<AnnotatedMutationProps & { annotations: MutationAnnotations }> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        ...MutationWithoutAnnotationEntry.args,
+        annotations: [
+            {
+                name: 'Test annotation',
+                description: 'This is a test annotation',
+                symbol: '*',
+                nucleotideMutations: ['A23403G'],
+                aminoAcidMutations: [],
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
+        await expect(getAnnotationIndicator(canvas)).toBeVisible();
+
+        await userEvent.click(canvas.getByText('A23403G'));
+        await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
+    },
+};
+
+export const MutationWithMultipleAnnotationEntries: StoryObj<
+    AnnotatedMutationProps & { annotations: MutationAnnotations }
+> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        ...MutationWithoutAnnotationEntry.args,
+        annotations: [
+            {
+                name: 'Test annotation',
+                description: 'This is a test annotation',
+                symbol: '*',
+                nucleotideMutations: ['A23403G'],
+                aminoAcidMutations: [],
+            },
+            {
+                name: 'Another test annotation',
+                description: 'This is a test annotation',
+                symbol: '+',
+                nucleotideMutations: ['A23403G'],
+                aminoAcidMutations: [],
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('A23403G')).toBeVisible());
+        await expect(getAnnotationIndicator(canvas)).toBeVisible();
+        await expect(canvas.queryByText('+')).toBeVisible();
+
+        await userEvent.click(canvas.getByText('A23403G'));
+        await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
+        await expect(canvas.queryByText('Another test annotation')).toBeVisible();
+    },
+};
+
+export const AminoAcidMutationWithAnnotationEntry: StoryObj<
+    AnnotatedMutationProps & { annotations: MutationAnnotations }
+> = {
+    ...MutationWithoutAnnotationEntry,
+    args: {
+        mutation: {
+            type: 'substitution',
+            code: 'S:A501G',
+            position: 501,
+            valueAtReference: 'A',
+            substitutionValue: 'G',
+        },
+        sequenceType: 'amino acid',
+        annotations: [
+            {
+                name: 'Test annotation',
+                description: 'This is a test annotation',
+                symbol: '*',
+                nucleotideMutations: [],
+                aminoAcidMutations: ['S:A501G'],
+            },
+        ],
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(() => expect(canvas.getByText('S:A501G')).toBeVisible());
+        await expect(getAnnotationIndicator(canvas)).toBeVisible();
+
+        await userEvent.click(canvas.getByText('S:A501G'));
+        await waitFor(() => expect(getAnnotationName(canvas)).toBeVisible());
+    },
+};
+
+function getAnnotationIndicator(canvas: ReturnType<typeof within>) {
+    return canvas.queryByText('*');
+}
+
+function getAnnotationName(canvas: ReturnType<typeof within>) {
+    return canvas.queryByText('Test annotation');
+}

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

@@ -0,0 +1,80 @@
+import { useRef } from 'gridjs';
+import { Fragment, type FunctionComponent, type RefObject } from 'preact';
+
+import type { SequenceType } from '../../types';
+import type { Deletion, Substitution } from '../../utils/mutations';
+import { useMutationAnnotationsProvider } from '../MutationAnnotationsContext';
+import { InfoHeadline1, InfoHeadline2, InfoParagraph } from './info';
+import { ButtonWithModalDialog, useModalRef } from './modal';
+
+export type AnnotatedMutationProps = {
+    mutation: Substitution | Deletion;
+    sequenceType: SequenceType;
+};
+
+export const AnnotatedMutation: FunctionComponent<AnnotatedMutationProps> = (props) => {
+    const annotationsProvider = useMutationAnnotationsProvider();
+    const modalRef = useModalRef();
+
+    return <AnnotatedMutationWithoutContext {...props} annotationsProvider={annotationsProvider} modalRef={modalRef} />;
+};
+
+type GridJsAnnotatedMutationProps = AnnotatedMutationProps & {
+    annotationsProvider: ReturnType<typeof useMutationAnnotationsProvider>;
+};
+
+/**
+ * GridJS internally also uses Preact, but it uses its own Preact instance:
+ * - Our Preact contexts are not available in GridJS. We need to inject context content as long as we're in our Preact instance.
+ * - We must use the GridJS re-exports of the Preact hooks. I'm not sure why.
+ */
+export const GridJsAnnotatedMutation: FunctionComponent<GridJsAnnotatedMutationProps> = (props) => {
+    const modalRef = useRef<HTMLDialogElement>(null);
+
+    return <AnnotatedMutationWithoutContext {...props} modalRef={modalRef} />;
+};
+
+type AnnotatedMutationWithoutContextProps = GridJsAnnotatedMutationProps & {
+    modalRef: RefObject<HTMLDialogElement>;
+};
+
+const AnnotatedMutationWithoutContext: FunctionComponent<AnnotatedMutationWithoutContextProps> = ({
+    mutation,
+    sequenceType,
+    annotationsProvider,
+    modalRef,
+}) => {
+    const mutationAnnotations = annotationsProvider(mutation.code, sequenceType);
+
+    if (mutationAnnotations === undefined || mutationAnnotations.length === 0) {
+        return mutation.code;
+    }
+
+    const modalContent = (
+        <div className='block'>
+            <InfoHeadline1>Annotations for {mutation.code}</InfoHeadline1>
+            {mutationAnnotations.map((annotation) => (
+                <Fragment key={annotation.name}>
+                    <InfoHeadline2>{annotation.name}</InfoHeadline2>
+                    <InfoParagraph>{annotation.description}</InfoParagraph>
+                </Fragment>
+            ))}
+        </div>
+    );
+
+    return (
+        <ButtonWithModalDialog modalContent={modalContent} modalRef={modalRef}>
+            {mutation.code}
+            <sup>
+                {mutationAnnotations
+                    .map((annotation) => annotation.symbol)
+                    .map((symbol, index) => (
+                        <Fragment key={symbol}>
+                            <span className='text-red-600'>{symbol}</span>
+                            {index !== mutationAnnotations.length - 1 && ','}
+                        </Fragment>
+                    ))}
+            </sup>
+        </ButtonWithModalDialog>
+    );
+};

package/src/preact/components/downshift-combobox.tsx

@@ -1,6 +1,6 @@
 import { useCombobox } from 'downshift/preact';
 import { type ComponentChild } from 'preact';
-import { useRef, useState } from 'preact/hooks';
+import { useMemo, useRef, useState } from 'preact/hooks';
 
 export function DownshiftCombobox<Item>({
     allItems,
@@ -21,8 +21,10 @@ export function DownshiftCombobox<Item>({
 }) {
     const initialSelectedItem = value ?? null;
 
-    const [items, setItems] = useState(
-        allItems.filter((item) => filterItemsByInputValue(item, itemToString(initialSelectedItem))),
+    const [itemsFilter, setItemsFilter] = useState(itemToString(initialSelectedItem));
+    const items = useMemo(
+        () => allItems.filter((item) => filterItemsByInputValue(item, itemsFilter)),
+        [allItems, filterItemsByInputValue, itemsFilter],
     );
     const divRef = useRef<HTMLDivElement>(null);
 
@@ -52,7 +54,7 @@ export function DownshiftCombobox<Item>({
         closeMenu,
     } = useCombobox({
         onInputValueChange({ inputValue }) {
-            setItems(allItems.filter((item) => filterItemsByInputValue(item, inputValue)));
+            setItemsFilter(inputValue);
         },
         onSelectedItemChange({ selectedItem }) {
             if (selectedItem !== null) {