@genspectrum/dashboard-components 0.13.1 → 0.13.2

package/dist/util.d.ts

@@ -838,7 +838,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        '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-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -854,7 +858,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -862,7 +869,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -870,7 +877,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -878,7 +888,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -886,7 +896,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        '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-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -902,7 +915,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -910,7 +926,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -918,7 +934,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -926,7 +942,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -934,7 +950,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -942,7 +958,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-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-mutations-over-time': MutationsOverTimeComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -974,7 +990,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -982,7 +998,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -990,7 +1006,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -998,11 +1014,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-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1010,7 +1022,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1018,10 +1030,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1029,7 +1038,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1037,10 +1046,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': TextInputChangedEvent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1048,7 +1054,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1056,10 +1062,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1067,7 +1070,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1075,10 +1078,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1086,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.1",
+    "version": "0.13.2",
     "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/standalone-bundle/dashboard-components.js

@@ -35745,10 +35745,10 @@ function um({
         ]
       }
     ) }),
-    _ && /* @__PURE__ */ v(
+    /* @__PURE__ */ v(
       "ul",
       {
-        className: "absolute bg-white mt-1 shadow-md max-h-80 overflow-scroll z-10 w-full min-w-32",
+        className: `absolute bg-white mt-1 shadow-md max-h-80 overflow-scroll z-10 w-full min-w-32 ${_ ? "" : "hidden"}`,
         ...x(),
         children: c.length > 0 ? c.map((Z, _t) => /* @__PURE__ */ v(
           "li",
@@ -35870,7 +35870,9 @@ async function l$({
   lapisFilter: e,
   signal: i
 }) {
-  return (await new Xr(e ?? {}, [t]).evaluate(n, i)).content.map((o) => o[t]).sort();
+  return (await new Xr(e ?? {}, [
+    t
+  ]).evaluate(n, i)).content.map((o) => ({ count: o.count, value: o[t] })).filter((o) => o.value !== null).sort((o, l) => o.value === null ? 1 : l.value === null ? -1 : o.value.localeCompare(l.value));
 }
 const c$ = O.object({
   lapisField: O.string().min(1),
@@ -35901,20 +35903,31 @@ const c$ = O.object({
   value: t,
   placeholderText: e,
   data: i
-}) => /* @__PURE__ */ v(
-  um,
-  {
-    allItems: i,
-    value: t,
-    filterItemsByInputValue: m$,
-    createEvent: (r) => new $k({ [n]: r ?? void 0 }),
-    itemToString: (r) => r ?? "",
-    placeholderText: e,
-    formatItemInList: (r) => /* @__PURE__ */ v("span", { children: r })
-  }
-);
+}) => {
+  const r = i.find((s) => s.value == t);
+  return /* @__PURE__ */ v(
+    um,
+    {
+      allItems: i,
+      value: r,
+      filterItemsByInputValue: m$,
+      createEvent: (s) => new $k({ [n]: (s == null ? void 0 : s.value) ?? void 0 }),
+      itemToString: (s) => (s == null ? void 0 : s.value) ?? "",
+      placeholderText: e,
+      formatItemInList: (s) => /* @__PURE__ */ v("p", { children: [
+        /* @__PURE__ */ v("span", { children: s.value }),
+        /* @__PURE__ */ v("span", { className: "ml-2 text-gray-500", children: [
+          "(",
+          s.count,
+          ")"
+        ] })
+      ] })
+    }
+  );
+};
 function m$(n, t) {
-  return t == null || t === "" ? !0 : n == null ? void 0 : n.toLowerCase().includes((t == null ? void 0 : t.toLowerCase()) || "");
+  var e;
+  return t == null || t === "" ? !0 : (e = n.value) == null ? void 0 : e.toLowerCase().includes((t == null ? void 0 : t.toLowerCase()) || "");
 }
 var g$ = Object.defineProperty, _$ = Object.getOwnPropertyDescriptor, ra = (n, t, e, i) => {
   for (var r = i > 1 ? void 0 : i ? _$(t, e) : t, s = n.length - 1, o; s >= 0; s--)