@genspectrum/dashboard-components 0.13.1 → 0.13.3

package/dist/util.d.ts

@@ -838,7 +838,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -846,7 +846,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -854,7 +854,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -862,7 +862,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -886,7 +886,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -894,7 +894,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>;
         }
     }
 }
@@ -902,7 +902,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -910,7 +910,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -918,7 +918,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -926,7 +926,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -934,7 +934,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -942,7 +942,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>;
         }
     }
 }
@@ -966,7 +966,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -974,7 +974,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -982,7 +982,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -990,7 +990,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1037,10 +1037,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-input-changed': TextInputChangedEvent;
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -1048,7 +1048,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1056,10 +1056,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-text-input': TextInputComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -1067,7 +1067,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1075,10 +1075,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1086,7 +1086,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.13.1",
+    "version": "0.13.3",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

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/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() || '');
 }

package/src/utils/mutations.ts

@@ -14,7 +14,7 @@ export interface MutationClass extends Mutation {
 }
 
 export const substitutionRegex =
-    /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z])?(?<position>\d+)(?<substitutionValue>[A-Z.])?$/i;
+    /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z])?(?<position>\d+)(?<substitutionValue>[A-Z.*])?$/i;
 
 export interface Substitution extends Mutation {
     type: 'substitution';