@genspectrum/dashboard-components 0.13.0 → 0.13.2

package/dist/style.css

@@ -3199,6 +3199,9 @@ input.tab:checked + .tab-content,
 .grid {
   display: grid;
 }
+.contents {
+  display: contents;
+}
 .hidden {
   display: none;
 }

package/dist/util.d.ts

@@ -838,7 +838,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
     }
 }
 
@@ -846,7 +850,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -854,7 +858,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -862,7 +869,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -870,7 +877,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -878,7 +888,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -886,7 +896,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -894,7 +907,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -902,7 +915,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -910,7 +926,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -918,7 +934,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -926,7 +942,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -934,7 +950,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -942,7 +958,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -950,7 +966,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -958,7 +974,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -966,7 +982,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -974,7 +990,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -982,11 +998,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-filter-changed': CustomEvent<Record<string, string>>;
-        'gs-date-range-option-changed': DateRangeOptionChangedEvent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -994,7 +1006,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1002,10 +1014,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1013,7 +1022,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1021,10 +1030,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': TextInputChangedEvent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1032,7 +1038,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1040,10 +1046,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1051,7 +1054,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1059,10 +1062,23 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1070,7 +1086,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.13.0",
+    "version": "0.13.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -142,6 +142,6 @@
         "typescript": "~5.7.2",
         "vite": "^6.0.3",
         "vite-plugin-dts": "^4.0.3",
-        "vitest": "^2.0.1"
+        "vitest": "^3.0.2"
     }
 }

package/src/constants.ts

@@ -5,3 +5,9 @@ export const NUCLEOTIDE_MUTATIONS_ENDPOINT = `${LAPIS_URL}/sample/nucleotideMuta
 export const AMINO_ACID_MUTATIONS_ENDPOINT = `${LAPIS_URL}/sample/aminoAcidMutations`;
 export const NUCLEOTIDE_INSERTIONS_ENDPOINT = `${LAPIS_URL}/sample/nucleotideInsertions`;
 export const REFERENCE_GENOME_ENDPOINT = `${LAPIS_URL}/sample/referenceGenome`;
+
+// WISE Wastewater
+// This is a special instance for storing Swiss wastewater data generated by the WISE consortium
+export const WISE_LAPIS_URL = 'https://api.wise-loculus.genspectrum.org/rsv';
+export const WISE_DETAILS_ENDPOINT = `${WISE_LAPIS_URL}/sample/details`;
+export const WISE_REFERENCE_GENOME_ENDPOINT = `${WISE_LAPIS_URL}/sample/referenceGenome`;

package/src/lapisApi/__mockData__/wiseReferenceGenome.json

@@ -0,0 +1,9 @@
+{
+    "nucleotideSequences": [
+        {
+            "name": "main",
+            "sequence": "NNN"
+        }
+    ],
+    "genes": []
+}

package/src/lapisApi/lapisApi.ts

@@ -1,6 +1,7 @@
 import { referenceGenomeResponse } from './ReferenceGenome';
 import {
     aggregatedResponse,
+    detailsResponse,
     insertionsResponse,
     type LapisBaseRequest,
     lapisError,
@@ -51,6 +52,21 @@ export async function fetchAggregated(lapisUrl: string, body: LapisBaseRequest,
     return aggregatedResponse.parse(await response.json());
 }
 
+export async function fetchDetails(lapisUrl: string, body: LapisBaseRequest, signal?: AbortSignal) {
+    const response = await fetch(detailsEndpoint(lapisUrl), {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(body),
+        signal,
+    });
+
+    await handleErrors(response, 'aggregated data');
+
+    return detailsResponse.parse(await response.json());
+}
+
 export async function fetchInsertions(
     lapisUrl: string,
     body: LapisBaseRequest,
@@ -163,6 +179,7 @@ const handleErrors = async (response: Response, requestedData: string) => {
 };
 
 export const aggregatedEndpoint = (lapisUrl: string) => `${lapisUrl}/sample/aggregated`;
+export const detailsEndpoint = (lapisUrl: string) => `${lapisUrl}/sample/details`;
 export const insertionsEndpoint = (lapisUrl: string, sequenceType: SequenceType) => {
     return sequenceType === 'amino acid'
         ? `${lapisUrl}/sample/aminoAcidInsertions`

package/src/lapisApi/lapisTypes.ts

@@ -41,10 +41,16 @@ const insertionCount = z.object({
 });
 export const insertionsResponse = makeLapisResponse(z.array(insertionCount));
 
-export const aggregatedItem = z.object({ count: z.number() }).catchall(z.union([z.string(), z.number(), z.null()]));
+const baseResponseValueSchema = z.union([z.string(), z.number(), z.boolean(), z.null()]);
+
+export const aggregatedItem = z.object({ count: z.number() }).catchall(baseResponseValueSchema);
 export const aggregatedResponse = makeLapisResponse(z.array(aggregatedItem));
 export type AggregatedItem = z.infer<typeof aggregatedItem>;
 
+export const detailsItem = z.object({}).catchall(baseResponseValueSchema);
+export const detailsResponse = makeLapisResponse(z.array(detailsItem));
+export type DetailsItem = z.infer<typeof detailsItem>;
+
 function makeLapisResponse<T extends ZodTypeAny>(data: T) {
     return z.object({
         data,

package/src/operator/FetchDetailsOperator.ts

@@ -0,0 +1,28 @@
+import { type Dataset } from './Dataset';
+import { type Operator } from './Operator';
+import { fetchDetails } from '../lapisApi/lapisApi';
+import { type LapisFilter } from '../types';
+
+type Details<Fields extends string> = { [field in Fields]: string | number | boolean | null };
+
+export class FetchDetailsOperator<Fields extends string> implements Operator<Details<Fields>> {
+    constructor(
+        private filter: LapisFilter,
+        private fields: Fields[] = [],
+    ) {}
+
+    async evaluate(lapisUrl: string, signal?: AbortSignal): Promise<Dataset<Details<Fields>>> {
+        const detailsResponse = (
+            await fetchDetails(
+                lapisUrl,
+                {
+                    ...this.filter,
+                    fields: this.fields,
+                },
+                signal,
+            )
+        ).data;
+
+        return { content: detailsResponse as Details<Fields>[] };
+    }
+}

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

@@ -120,26 +120,24 @@ export function DownshiftCombobox<Item>({
                     </button>
                 </div>
             </div>
-            {isOpen && (
-                <ul
-                    className='absolute bg-white mt-1 shadow-md max-h-80 overflow-scroll z-10 w-full min-w-32'
-                    {...getMenuProps()}
-                >
-                    {items.length > 0 ? (
-                        items.map((item, index) => (
-                            <li
-                                className={`${highlightedIndex === index ? 'bg-blue-300' : ''} ${selectedItem !== null && itemToString(selectedItem) === itemToString(item) ? 'font-bold' : ''} py-2 px-3 shadow-sm flex flex-col`}
-                                key={itemToString(item)}
-                                {...getItemProps({ item, index })}
-                            >
-                                {formatItemInList(item)}
-                            </li>
-                        ))
-                    ) : (
-                        <li className='py-2 px-3 shadow-sm flex flex-col'>No elements to select.</li>
-                    )}
-                </ul>
-            )}
+            <ul
+                className={`absolute bg-white mt-1 shadow-md max-h-80 overflow-scroll z-10 w-full min-w-32 ${isOpen ? '' : 'hidden'}`}
+                {...getMenuProps()}
+            >
+                {items.length > 0 ? (
+                    items.map((item, index) => (
+                        <li
+                            className={`${highlightedIndex === index ? 'bg-blue-300' : ''} ${selectedItem !== null && itemToString(selectedItem) === itemToString(item) ? 'font-bold' : ''} py-2 px-3 shadow-sm flex flex-col`}
+                            key={itemToString(item)}
+                            {...getItemProps({ item, index })}
+                        >
+                            {formatItemInList(item)}
+                        </li>
+                    ))
+                ) : (
+                    <li className='py-2 px-3 shadow-sm flex flex-col'>No elements to select.</li>
+                )}
+            </ul>
         </div>
     );
 }

package/src/preact/components/tabs.tsx

@@ -16,7 +16,7 @@ const Tabs: FunctionComponent<ComponentTabsProps> = ({ tabs, toolbar }) => {
     const [activeTab, setActiveTab] = useState(tabs[0]?.title);
 
     const tabElements = (
-        <div className='flex flex-row'>
+        <div className='flex flex-row flex-wrap'>
             {tabs.map((tab) => {
                 return (
                     <button

package/src/preact/mutationsOverTime/MutationOverTimeData.ts

@@ -5,16 +5,20 @@ import {
 } from '../../query/queryMutationsOverTime';
 import { type Map2d, Map2dBase, type Map2DContents } from '../../utils/map2d';
 import type { Deletion, Substitution } from '../../utils/mutations';
-import type { Temporal } from '../../utils/temporalClass';
+import type { Temporal, TemporalClass } from '../../utils/temporalClass';
 
-export type MutationOverTimeDataMap = Map2d<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>;
+export type MutationOverTimeDataMap<T extends Temporal | TemporalClass = Temporal> = Map2d<
+    Substitution | Deletion,
+    T,
+    MutationOverTimeMutationValue
+>;
 
-export class BaseMutationOverTimeDataMap extends Map2dBase<
+export class BaseMutationOverTimeDataMap<T extends Temporal | TemporalClass = Temporal> extends Map2dBase<
     Substitution | Deletion,
-    Temporal,
+    T,
     MutationOverTimeMutationValue
 > {
-    constructor(initialContent?: Map2DContents<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>) {
+    constructor(initialContent?: Map2DContents<Substitution | Deletion, T, MutationOverTimeMutationValue>) {
         super(serializeSubstitutionOrDeletion, serializeTemporal, initialContent);
     }
 }

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

@@ -111,9 +111,11 @@ const ProportionCell: FunctionComponent<{
             ) : (
                 <>
                     <p>Proportion: {formatProportion(value.proportion)}</p>
-                    <p>
-                        Count: {value.count} / {value.totalCount} total
-                    </p>
+                    {value.count !== null && value.totalCount !== null && (
+                        <p>
+                            Count: {value.count} / {value.totalCount} total
+                        </p>
+                    )}
                 </>
             )}
         </div>

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

@@ -1,9 +1,6 @@
-import { DeletionClass, type SubstitutionClass } from '../../../utils/mutations';
+import type { Deletion, Substitution } from '../../../utils/mutations';
 
-export const sortSubstitutionsAndDeletions = (
-    a: SubstitutionClass | DeletionClass,
-    b: SubstitutionClass | DeletionClass,
-) => {
+export const sortSubstitutionsAndDeletions = (a: Substitution | Deletion, b: Substitution | Deletion) => {
     if (a.segment !== b.segment) {
         return compareSegments(a.segment, b.segment);
     }
@@ -12,8 +9,8 @@ export const sortSubstitutionsAndDeletions = (
         return comparePositions(a.position, b.position);
     }
 
-    const aIsDeletion = a instanceof DeletionClass;
-    const bIsDeletion = b instanceof DeletionClass;
+    const aIsDeletion = a.type === 'deletion';
+    const bIsDeletion = b.type === 'deletion';
 
     if (aIsDeletion !== bIsDeletion) {
         return aIsDeletion ? 1 : -1;

package/src/preact/textInput/fetchStringAutocompleteList.spec.ts

@@ -0,0 +1,34 @@
+import { describe, expect, test } from 'vitest';
+
+import { fetchStringAutocompleteList } from './fetchStringAutocompleteList';
+import { DUMMY_LAPIS_URL, lapisRequestMocks } from '../../../vitest.setup';
+
+describe('fetchStringAutocompleteList', () => {
+    test('should fetch autocompletion list and sort by field value', async () => {
+        const field = 'host';
+
+        lapisRequestMocks.aggregated(
+            { fields: [field], country: 'Germany' },
+            {
+                data: [
+                    { count: 1, host: 'host_c' },
+                    { count: 2, host: 'host_b' },
+                    { count: 3, host: null },
+                    { count: 4, host: 'host_a' },
+                ],
+            },
+        );
+
+        const result = await fetchStringAutocompleteList({
+            field,
+            lapis: DUMMY_LAPIS_URL,
+            lapisFilter: { country: 'Germany' },
+        });
+
+        expect(result).to.deep.equal([
+            { count: 4, value: 'host_a' },
+            { count: 2, value: 'host_b' },
+            { count: 1, value: 'host_c' },
+        ]);
+    });
+});

package/src/preact/textInput/fetchStringAutocompleteList.ts

@@ -12,9 +12,23 @@ export async function fetchStringAutocompleteList({
     lapisFilter?: LapisFilter;
     signal?: AbortSignal;
 }) {
-    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string>>(lapisFilter ?? {}, [field]);
+    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string | null>>(lapisFilter ?? {}, [
+        field,
+    ]);
 
     const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
 
-    return data.map((item) => item[field]).sort();
+    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);
+        });
 }

package/src/preact/textInput/text-input.tsx

@@ -68,32 +68,46 @@ const TextInputInner: FunctionComponent<TextInputInnerProps> = ({
     return <TextSelector lapisField={lapisField} value={value} placeholderText={placeholderText} data={data} />;
 };
 
+type SelectItem = {
+    count: number;
+    value: string;
+};
+
 const TextSelector = ({
     lapisField,
     value,
     placeholderText,
     data,
 }: TextSelectorProps & {
-    data: string[];
+    data: SelectItem[];
 }) => {
+    const initialSelectedItem = data.find((candidate) => candidate.value == value);
+
     return (
         <DownshiftCombobox
             allItems={data}
-            value={value}
+            value={initialSelectedItem}
             filterItemsByInputValue={filterByInputValue}
-            createEvent={(item: string | null) => new TextInputChangedEvent({ [lapisField]: item ?? undefined })}
-            itemToString={(item: string | undefined | null) => item ?? ''}
+            createEvent={(item: SelectItem | null) =>
+                new TextInputChangedEvent({ [lapisField]: item?.value ?? undefined })
+            }
+            itemToString={(item: SelectItem | undefined | null) => item?.value ?? ''}
             placeholderText={placeholderText}
-            formatItemInList={(item: string) => {
-                return <span>{item}</span>;
+            formatItemInList={(item: SelectItem) => {
+                return (
+                    <p>
+                        <span>{item.value}</span>
+                        <span className='ml-2 text-gray-500'>({item.count})</span>
+                    </p>
+                );
             }}
         />
     );
 };
 
-function filterByInputValue(item: string, inputValue: string | undefined | null) {
+function filterByInputValue(item: SelectItem, inputValue: string | undefined | null) {
     if (inputValue === undefined || inputValue === null || inputValue === '') {
         return true;
     }
-    return item?.toLowerCase().includes(inputValue?.toLowerCase() || '');
+    return item.value?.toLowerCase().includes(inputValue?.toLowerCase() || '');
 }