Add prefixes to combobox?

loculus-project · Dec 18, 2024 · d71a32a · d71a32a
1 parent c5055e3
commit d71a32a
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 17 deletions.
diff --git a/website/src/components/SearchPage/fields/AutoCompleteField.tsx b/website/src/components/SearchPage/fields/AutoCompleteField.tsx
@@ -7,10 +7,16 @@ import { lapisClientHooks } from '../../../services/serviceHooks.ts';
 import { type GroupedMetadataFilter, type MetadataFilter, type SetSomeFieldValues } from '../../../types/config.ts';
 import { formatNumberWithDefaultLocale } from '../../../utils/formatNumber.tsx';
 
+export type Option = {
+    option: string;
+    count: number | undefined;
+};
+
 type AutoCompleteFieldProps = {
     field: MetadataFilter | GroupedMetadataFilter;
     setSomeFieldValues: SetSomeFieldValues;
     lapisUrl: string;
+    optionsModifier?: (options: Option[]) => Option[];
     fieldValue?: string | number | null;
     lapisSearchParameters: Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any -- TODO(#3451) use a proper type
 };
@@ -36,6 +42,7 @@ export const AutoCompleteField = ({
     lapisUrl,
     fieldValue,
     lapisSearchParameters,
+    optionsModifier,
 }: AutoCompleteFieldProps) => {
     const buttonRef = useRef<HTMLButtonElement>(null);
     const [query, setQuery] = useState('');
@@ -65,19 +72,22 @@ export const AutoCompleteField = ({
         mutate({ fields: [field.name], ...otherFields });
     };
 
-    const options = useMemo(
-        () =>
-            (data?.data ?? [])
-                .filter(
-                    (it) =>
-                        typeof it[field.name] === 'string' ||
-                        typeof it[field.name] === 'boolean' ||
-                        typeof it[field.name] === 'number',
-                )
-                .map((it) => ({ option: it[field.name]!.toString(), count: it.count }))
-                .sort((a, b) => (a.option.toLowerCase() < b.option.toLowerCase() ? -1 : 1)),
-        [data, field.name],
-    );
+    const options: Option[] = useMemo(() => {
+        let options: Option[] = (data?.data ?? [])
+            .filter(
+                (it) =>
+                    typeof it[field.name] === 'string' ||
+                    typeof it[field.name] === 'boolean' ||
+                    typeof it[field.name] === 'number',
+            )
+            .map((it) => ({ option: it[field.name]!.toString(), count: it.count }));
+
+        if (optionsModifier) {
+            options = optionsModifier(options);
+        }
+
+        return options.sort((a, b) => (a.option.toLowerCase() < b.option.toLowerCase() ? -1 : 1));
+    }, [data, field.name]);
 
     const filteredOptions = useMemo(
         () =>
@@ -153,9 +163,11 @@ export const AutoCompleteField = ({
                                         <span className={`inline-block ${selected ? 'font-medium' : 'font-normal'}`}>
                                             {option.option}
                                         </span>
-                                        <span className='inline-block ml-1'>
-                                            ({formatNumberWithDefaultLocale(option.count)})
-                                        </span>
+                                        {option.count !== undefined && (
+                                            <span className='inline-block ml-1'>
+                                                ({formatNumberWithDefaultLocale(option.count)})
+                                            </span>
+                                        )}
                                         {selected && (
                                             <span
                                                 className={`absolute inset-y-0 left-0 flex items-center pl-3 ${

diff --git a/website/src/components/SearchPage/fields/LineageField.tsx b/website/src/components/SearchPage/fields/LineageField.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, type FC } from 'react';
 
-import { AutoCompleteField } from './AutoCompleteField';
+import { AutoCompleteField, type Option } from './AutoCompleteField';
 import type { MetadataFilter, SetSomeFieldValues } from '../../../types/config';
 
 interface LineageFieldProps {
@@ -28,6 +28,18 @@ export const LineageField: FC<LineageFieldProps> = ({
         setSomeFieldValues([field.name, queryText]);
     }, [includeSublineages, inputText, fieldValue]);
 
+    const optionsModifier = (options: Option[]) => {
+        const m = new Map<string, number | undefined>(options.map((o) => [o.option, o.count]));
+        [...m.keys()].forEach((option) => {
+            [...Array(option.length).keys()]
+                .map((i) => option.slice(0, i))
+                .filter((prefix) => !prefix.endsWith('.'))
+                .filter((prefix) => !(prefix in m))
+                .forEach((prefix) => m.set(prefix, undefined));
+        });
+        return [...m.entries()].map(([k, v]) => ({ option: k, count: v }));
+    };
+
     return (
         <div key={field.name} className='flex flex-col border p-3 mb-3 rounded-md border-gray-300'>
             <AutoCompleteField
@@ -38,6 +50,7 @@ export const LineageField: FC<LineageFieldProps> = ({
                 }}
                 fieldValue={inputText}
                 lapisSearchParameters={lapisSearchParameters}
+                optionsModifier={optionsModifier}
             />
             <div className='flex flex-row justify-end'>
                 <label>