@genspectrum/dashboard-components 0.12.0 → 0.13.0

package/dist/components.js

@@ -6,11 +6,11 @@ import { options, createContext as createContext$1, Fragment, render, Component,
 import { Grid } from "gridjs";
 import { Chart, registerables, Scale, BarController } from "chart.js";
 import { VennDiagramController, ArcSlice, extractSets } from "chartjs-chart-venn";
-import { v as views, n as namedLapisFilterSchema, s as sequenceTypeSchema, l as lapisFilterSchema, t as temporalGranularitySchema, a as dateRangeOptionSchema, b as toYYYYMMDD, D as DateRangeOptionChangedEvent, L as LocationChangedEvent, m as mutationsFilterSchema } from "./LocationChangedEvent-CORvQvXv.js";
+import { v as views, n as namedLapisFilterSchema, s as sequenceTypeSchema, l as lapisFilterSchema, t as temporalGranularitySchema, b as dateRangeOptionSchema, c as toYYYYMMDD, D as DateRangeOptionChangedEvent, e as lapisLocationFilterSchema, L as LocationChangedEvent, T as TextInputChangedEvent, m as mutationsFilterSchema, a as LineageFilterChangedEvent } from "./LineageFilterChangedEvent-GedKNGFI.js";
 import { autoUpdate, computePosition, offset, shift, flip } from "@floating-ui/dom";
 import { ReactiveElement } from "@lit/reactive-element";
 import { BarWithErrorBarsController, BarWithErrorBar } from "chartjs-chart-error-bars";
-import Leaflet from "leaflet";
+import { map, geoJson } from "leaflet";
 import * as topojson from "topojson-client";
 import flatpickr from "flatpickr";
 /**
@@ -8617,7 +8617,7 @@ function getDatasets$2(fields, maxNumberOfBars, data) {
       ]
     };
   }
-  const map = /* @__PURE__ */ new Map();
+  const map2 = /* @__PURE__ */ new Map();
   const countsOfEachBar = /* @__PURE__ */ new Map();
   for (const row of sortedData) {
     const yValue = row[fields[0]];
@@ -8627,17 +8627,17 @@ function getDatasets$2(fields, maxNumberOfBars, data) {
     }
     const yAxisKey = String(yValue);
     const secondaryKey = String(secondaryValue);
-    if (!map.has(secondaryKey)) {
-      map.set(secondaryKey, []);
+    if (!map2.has(secondaryKey)) {
+      map2.set(secondaryKey, []);
     }
-    (_a = map.get(secondaryKey)) == null ? void 0 : _a.push({
+    (_a = map2.get(secondaryKey)) == null ? void 0 : _a.push({
       y: yAxisKey,
       x: row.count,
       proportion: row.proportion
     });
     countsOfEachBar.set(yAxisKey, (countsOfEachBar.get(yAxisKey) ?? 0) + row.count);
   }
-  const datasets2 = Array.from(map.entries()).map(sortAndTruncateYAxisKeys(countsOfEachBar, maxNumberOfBars)).map(([key, value], index) => ({
+  const datasets2 = Array.from(map2.entries()).map(sortAndTruncateYAxisKeys(countsOfEachBar, maxNumberOfBars)).map(([key, value], index) => ({
     borderWidth: 1,
     backgroundColor: singleGraphColorRGBAById(index, 0.3),
     borderColor: singleGraphColorRGBAById(index),
@@ -9259,13 +9259,13 @@ class Map2dBase {
   }
 }
 class Map2dView {
-  constructor(map) {
-    this.keysFirstAxis = new Map(map.keysFirstAxis);
-    this.keysSecondAxis = new Map(map.keysSecondAxis);
-    if (map instanceof Map2dView) {
-      this.baseMap = map.baseMap;
+  constructor(map2) {
+    this.keysFirstAxis = new Map(map2.keysFirstAxis);
+    this.keysSecondAxis = new Map(map2.keysSecondAxis);
+    if (map2 instanceof Map2dView) {
+      this.baseMap = map2.baseMap;
     }
-    this.baseMap = map;
+    this.baseMap = map2;
   }
   serializeFirstAxis(key) {
     return this.baseMap.serializeFirstAxis(key);
@@ -10489,7 +10489,7 @@ const SequencesByLocationMap = ({
     if (!ref.current) {
       return;
     }
-    const leafletMap = Leaflet.map(ref.current, {
+    const leafletMap = map(ref.current, {
       scrollWheelZoom: enableMapNavigation,
       zoomControl: enableMapNavigation,
       keyboard: enableMapNavigation,
@@ -10498,7 +10498,7 @@ const SequencesByLocationMap = ({
       zoom,
       center: [offsetY, offsetX]
     });
-    Leaflet.geoJson(locations, {
+    geoJson(locations, {
       style: (feature) => {
         var _a;
         return {
@@ -11372,6 +11372,46 @@ __decorateClass$4([
 DateRangeSelectorComponent = __decorateClass$4([
   t$3("gs-date-range-selector")
 ], DateRangeSelectorComponent);
+async function fetchAutocompletionList({
+  fields,
+  lapis,
+  signal,
+  lapisFilter
+}) {
+  const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1).fill(0).map((_2, i2) => i2 + 1).map((i2) => fields.slice(i2).reduce((acc, field) => ({ ...acc, [field]: null }), {}));
+  const fetchAggregatedOperator = new FetchAggregatedOperator(
+    lapisFilter ?? {},
+    fields
+  );
+  const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
+  const locationValues = data.map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {})).reduce((setOfAllHierarchies, entry) => {
+    setOfAllHierarchies.add(JSON.stringify(entry));
+    toAncestorInHierarchyOverwriteValues.forEach((overwriteValues) => {
+      setOfAllHierarchies.add(JSON.stringify({ ...entry, ...overwriteValues }));
+    });
+    return setOfAllHierarchies;
+  }, /* @__PURE__ */ new Set());
+  return [...locationValues].map((json) => JSON.parse(json)).sort(compareLocationEntries(fields)).map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] ?? void 0 }), {}));
+}
+function compareLocationEntries(fields) {
+  return (a2, b3) => {
+    for (const field of fields) {
+      const valueA = a2[field];
+      const valueB = b3[field];
+      if (valueA === valueB) {
+        continue;
+      }
+      if (valueA === null) {
+        return -1;
+      }
+      if (valueB === null) {
+        return 1;
+      }
+      return valueA < valueB ? -1 : 1;
+    }
+    return 0;
+  };
+}
 function _objectWithoutPropertiesLoose(r2, e2) {
   if (null == r2) return {};
   var t2 = {};
@@ -14294,80 +14334,20 @@ process.env.NODE_ENV !== "production" ? "__function_remove_selected_item__" : 9;
 process.env.NODE_ENV !== "production" ? "__function_set_selected_items__" : 10;
 process.env.NODE_ENV !== "production" ? "__function_set_active_index__" : 11;
 process.env.NODE_ENV !== "production" ? "__function_reset__" : 12;
-async function fetchAutocompletionList(fields, lapis, signal) {
-  const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1).fill(0).map((_2, i2) => i2 + 1).map((i2) => fields.slice(i2).reduce((acc, field) => ({ ...acc, [field]: null }), {}));
-  const fetchAggregatedOperator = new FetchAggregatedOperator({}, fields);
-  const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
-  const locationValues = data.map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {})).reduce((setOfAllHierarchies, entry) => {
-    setOfAllHierarchies.add(JSON.stringify(entry));
-    toAncestorInHierarchyOverwriteValues.forEach((overwriteValues) => {
-      setOfAllHierarchies.add(JSON.stringify({ ...entry, ...overwriteValues }));
-    });
-    return setOfAllHierarchies;
-  }, /* @__PURE__ */ new Set());
-  return [...locationValues].map((json) => JSON.parse(json)).sort(compareLocationEntries(fields)).map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] ?? void 0 }), {}));
-}
-function compareLocationEntries(fields) {
-  return (a2, b3) => {
-    for (const field of fields) {
-      const valueA = a2[field];
-      const valueB = b3[field];
-      if (valueA === valueB) {
-        continue;
-      }
-      if (valueA === null) {
-        return -1;
-      }
-      if (valueB === null) {
-        return 1;
-      }
-      return valueA < valueB ? -1 : 1;
-    }
-    return 0;
-  };
-}
-const lineageFilterInnerPropsSchema$1 = z$2.object({
-  value: z$2.record(z$2.string().nullable().optional()).optional(),
-  placeholderText: z$2.string().optional(),
-  fields: z$2.array(z$2.string()).min(1)
-});
-const lineageFilterPropsSchema$1 = lineageFilterInnerPropsSchema$1.extend({
-  width: z$2.string()
-});
-const LocationFilter = (props) => {
-  const { width, ...innerProps } = props;
-  const size = { width, height: "3rem" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, layout: "horizontal", componentProps: props, schema: lineageFilterPropsSchema$1, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(LocationFilterInner, { ...innerProps }) }) });
-};
-const LocationFilterInner = ({ value, fields, placeholderText }) => {
-  const lapis = x$1(LapisUrlContext);
-  const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
-  if (isLoading) {
-    return /* @__PURE__ */ u$1(LoadingDisplay, {});
-  }
-  if (error) {
-    throw error;
-  }
-  return /* @__PURE__ */ u$1(LocationSelector, { fields, value, placeholderText, locationData: data });
-};
-const LocationSelector = ({
-  fields,
+function DownshiftCombobox({
+  allItems,
   value,
+  filterItemsByInputValue,
+  createEvent,
+  itemToString: itemToString2,
   placeholderText,
-  locationData
-}) => {
+  formatItemInList
+}) {
   var _a;
-  const allItems = T$1(
-    () => locationData.map((locationFilter) => {
-      return toSelectOption(locationFilter, fields);
-    }).filter((item) => item !== void 0),
-    [locationData, fields]
+  const initialSelectedItem = value ?? null;
+  const [items, setItems] = h(
+    allItems.filter((item) => filterItemsByInputValue(item, itemToString2(initialSelectedItem)))
   );
-  const initialSelectedItem = T$1(
-    () => value !== void 0 ? toSelectOption(value, fields) : null,
-    [value, fields]
-  );
-  const [items, setItems] = h(allItems.filter((item) => filterByInputValue(item, initialSelectedItem == null ? void 0 : initialSelectedItem.label)));
   const divRef = A$1(null);
   const shadowRoot = ((_a = divRef.current) == null ? void 0 : _a.shadowRoot) ?? void 0;
   const environment = shadowRoot !== void 0 ? {
@@ -14390,17 +14370,17 @@ const LocationSelector = ({
     closeMenu
   } = useCombobox({
     onInputValueChange({ inputValue: inputValue2 }) {
-      setItems(allItems.filter((item) => filterByInputValue(item, inputValue2)));
+      setItems(allItems.filter((item) => filterItemsByInputValue(item, inputValue2)));
     },
     onSelectedItemChange({ selectedItem: selectedItem2 }) {
       var _a2;
       if (selectedItem2 !== null) {
-        (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(new LocationChangedEvent(selectedItem2.lapisFilter));
+        (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(createEvent(selectedItem2));
       }
     },
     items,
     itemToString(item) {
-      return (item == null ? void 0 : item.label) ?? "";
+      return itemToString2(item);
     },
     initialSelectedItem,
     environment
@@ -14408,15 +14388,15 @@ const LocationSelector = ({
   const onInputBlur = () => {
     var _a2;
     if (inputValue === "") {
-      (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(new LocationChangedEvent(emptyLocationFilter(fields)));
+      (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(createEvent(null));
       selectItem(null);
-    } else if (inputValue !== (selectedItem == null ? void 0 : selectedItem.label)) {
-      setInputValue((selectedItem == null ? void 0 : selectedItem.label) || "");
+    } else if (inputValue !== itemToString2(selectedItem)) {
+      setInputValue(itemToString2(selectedItem) || "");
     }
   };
   const clearInput = () => {
     var _a2;
-    (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(new LocationChangedEvent(emptyLocationFilter(fields)));
+    (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(createEvent(null));
     selectItem(null);
   };
   const buttonRef = A$1(null);
@@ -14465,34 +14445,90 @@ const LocationSelector = ({
         ]
       }
     ) }),
-    /* @__PURE__ */ u$1(
+    isOpen && /* @__PURE__ */ u$1(
       "ul",
       {
-        className: `absolute bg-white mt-1 shadow-md max-h-80 overflow-scroll z-10 w-full min-w-32  ${!(isOpen && items.length > 0) && "hidden"}`,
+        className: "absolute bg-white mt-1 shadow-md max-h-80 overflow-scroll z-10 w-full min-w-32",
         ...getMenuProps(),
-        children: isOpen && items.map((item, index) => /* @__PURE__ */ u$1(
+        children: items.length > 0 ? items.map((item, index) => /* @__PURE__ */ u$1(
           "li",
           {
-            className: `${highlightedIndex === index && "bg-blue-300"} ${selectedItem !== null && selectedItem.description === item.description && "font-bold"} py-2 px-3 shadow-sm flex flex-col`,
+            className: `${highlightedIndex === index ? "bg-blue-300" : ""} ${selectedItem !== null && itemToString2(selectedItem) === itemToString2(item) ? "font-bold" : ""} py-2 px-3 shadow-sm flex flex-col`,
             ...getItemProps({ item, index }),
-            children: [
-              /* @__PURE__ */ u$1("span", { children: item.label }),
-              /* @__PURE__ */ u$1("span", { className: "text-sm text-gray-500", children: item.description })
-            ]
+            children: formatItemInList(item)
           },
-          item.description
-        ))
+          itemToString2(item)
+        )) : /* @__PURE__ */ u$1("li", { className: "py-2 px-3 shadow-sm flex flex-col", children: "No elements to select." })
       }
     )
   ] });
+}
+const locationSelectorPropsSchema = z$2.object({
+  value: lapisLocationFilterSchema.optional(),
+  placeholderText: z$2.string().optional(),
+  fields: z$2.array(z$2.string()).min(1)
+});
+const locationFilterInnerPropsSchema = locationSelectorPropsSchema.extend({ lapisFilter: lapisFilterSchema });
+const locationFilterPropsSchema = locationFilterInnerPropsSchema.extend({
+  width: z$2.string()
+});
+const LocationFilter = (props) => {
+  const { width, ...innerProps } = props;
+  const size = { width, height: "3rem" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, layout: "horizontal", componentProps: props, schema: locationFilterPropsSchema, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(LocationFilterInner, { ...innerProps }) }) });
 };
-function filterByInputValue(item, inputValue) {
+const LocationFilterInner = ({ value, fields, placeholderText, lapisFilter }) => {
+  const lapis = x$1(LapisUrlContext);
+  const { data, error, isLoading } = useQuery(
+    () => fetchAutocompletionList({ fields, lapis, lapisFilter }),
+    [fields, lapis, lapisFilter]
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
+  }
+  if (error) {
+    throw error;
+  }
+  return /* @__PURE__ */ u$1(LocationSelector, { fields, value, placeholderText, locationData: data });
+};
+const LocationSelector = ({
+  fields,
+  value,
+  placeholderText,
+  locationData
+}) => {
+  const allItems = T$1(() => {
+    return locationData.map((location) => toSelectItem(location, fields)).filter((item) => item !== void 0);
+  }, [fields, locationData]);
+  const selectedItem = T$1(() => {
+    return value !== void 0 ? toSelectItem(value, fields) : void 0;
+  }, [fields, value]);
+  return /* @__PURE__ */ u$1(
+    DownshiftCombobox,
+    {
+      allItems,
+      value: selectedItem,
+      filterItemsByInputValue: filterByInputValue$2,
+      createEvent: (item) => new LocationChangedEvent((item == null ? void 0 : item.lapisFilter) ?? emptyLocationFilter(fields)),
+      itemToString: (item) => (item == null ? void 0 : item.label) ?? "",
+      placeholderText,
+      formatItemInList: (item) => {
+        return /* @__PURE__ */ u$1(Fragment, { children: [
+          /* @__PURE__ */ u$1("span", { children: item.label }),
+          /* @__PURE__ */ u$1("span", { className: "text-sm text-gray-500", children: item.description })
+        ] });
+      }
+    }
+  );
+};
+function filterByInputValue$2(item, inputValue) {
+  var _a;
   if (inputValue === void 0 || inputValue === null) {
     return true;
   }
-  return (item == null ? void 0 : item.label.toLowerCase().includes(inputValue.toLowerCase())) || (item == null ? void 0 : item.description.toLowerCase().includes(inputValue.toLowerCase()));
+  return ((_a = item == null ? void 0 : item.label) == null ? void 0 : _a.toLowerCase().includes(inputValue.toLowerCase())) || (item == null ? void 0 : item.description.toLowerCase().includes(inputValue.toLowerCase()));
 }
-function toSelectOption(locationFilter, fields) {
+function toSelectItem(locationFilter, fields) {
   const concatenatedLocation = concatenateLocation(locationFilter, fields);
   const lastNonUndefinedField = [...fields].reverse().find((field) => locationFilter[field] !== void 0 && locationFilter[field] !== null);
   if (lastNonUndefinedField === void 0) {
@@ -14528,6 +14564,7 @@ let LocationFilterComponent = class extends PreactLitAdapter {
     super(...arguments);
     this.value = void 0;
     this.fields = [];
+    this.lapisFilter = {};
     this.width = "100%";
     this.placeholderText = void 0;
   }
@@ -14537,6 +14574,7 @@ let LocationFilterComponent = class extends PreactLitAdapter {
       {
         value: this.value,
         fields: this.fields,
+        lapisFilter: this.lapisFilter,
         width: this.width,
         placeholderText: this.placeholderText
       }
@@ -14549,6 +14587,9 @@ __decorateClass$3([
 __decorateClass$3([
   n$1({ type: Array })
 ], LocationFilterComponent.prototype, "fields", 2);
+__decorateClass$3([
+  n$1({ type: Object })
+], LocationFilterComponent.prototype, "lapisFilter", 2);
 __decorateClass$3([
   n$1({ type: String })
 ], LocationFilterComponent.prototype, "width", 2);
@@ -14558,16 +14599,22 @@ __decorateClass$3([
 LocationFilterComponent = __decorateClass$3([
   t$3("gs-location-filter")
 ], LocationFilterComponent);
-async function fetchAutocompleteList(lapis, field, signal) {
-  const fetchAggregatedOperator = new FetchAggregatedOperator({}, [field]);
+async function fetchStringAutocompleteList({
+  lapis,
+  field,
+  lapisFilter,
+  signal
+}) {
+  const fetchAggregatedOperator = new FetchAggregatedOperator(lapisFilter ?? {}, [field]);
   const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
-  return data.map((item) => item[field]);
+  return data.map((item) => item[field]).sort();
 }
-const textInputInnerPropsSchema = z$2.object({
+const textSelectorPropsSchema = z$2.object({
   lapisField: z$2.string().min(1),
   placeholderText: z$2.string().optional(),
-  initialValue: z$2.string().optional()
+  value: z$2.string().optional()
 });
+const textInputInnerPropsSchema = textSelectorPropsSchema.extend({ lapisFilter: lapisFilterSchema });
 const textInputPropsSchema = textInputInnerPropsSchema.extend({
   width: z$2.string()
 });
@@ -14576,10 +14623,17 @@ const TextInput = (props) => {
   const size = { width, height: "3rem" };
   return /* @__PURE__ */ u$1(ErrorBoundary, { size, layout: "horizontal", componentProps: props, schema: textInputPropsSchema, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(TextInputInner, { ...innerProps }) }) });
 };
-const TextInputInner = ({ lapisField, placeholderText, initialValue }) => {
+const TextInputInner = ({
+  value,
+  lapisField,
+  placeholderText,
+  lapisFilter
+}) => {
   const lapis = x$1(LapisUrlContext);
-  const inputRef = A$1(null);
-  const { data, error, isLoading } = useQuery(() => fetchAutocompleteList(lapis, lapisField), [lapisField, lapis]);
+  const { data, error, isLoading } = useQuery(
+    () => fetchStringAutocompleteList({ lapis, field: lapisField, lapisFilter }),
+    [lapisField, lapis, lapisFilter]
+  );
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
@@ -14589,41 +14643,35 @@ const TextInputInner = ({ lapisField, placeholderText, initialValue }) => {
   if (data === null) {
     return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  const onInput = () => {
-    var _a, _b, _c;
-    const value = ((_a = inputRef.current) == null ? void 0 : _a.value) === "" ? void 0 : (_b = inputRef.current) == null ? void 0 : _b.value;
-    if (isValidValue(value)) {
-      (_c = inputRef.current) == null ? void 0 : _c.dispatchEvent(
-        new CustomEvent("gs-text-input-changed", {
-          detail: { [lapisField]: value },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-  };
-  const isValidValue = (value) => {
-    if (value === void 0) {
-      return true;
-    }
-    return data.includes(value);
-  };
-  return /* @__PURE__ */ u$1(Fragment, { children: [
-    /* @__PURE__ */ u$1(
-      "input",
-      {
-        type: "text",
-        class: "input input-bordered w-full",
-        placeholder: placeholderText ?? lapisField,
-        onInput,
-        ref: inputRef,
-        list: lapisField,
-        value: initialValue
+  return /* @__PURE__ */ u$1(TextSelector, { lapisField, value, placeholderText, data });
+};
+const TextSelector = ({
+  lapisField,
+  value,
+  placeholderText,
+  data
+}) => {
+  return /* @__PURE__ */ u$1(
+    DownshiftCombobox,
+    {
+      allItems: data,
+      value,
+      filterItemsByInputValue: filterByInputValue$1,
+      createEvent: (item) => new TextInputChangedEvent({ [lapisField]: item ?? void 0 }),
+      itemToString: (item) => item ?? "",
+      placeholderText,
+      formatItemInList: (item) => {
+        return /* @__PURE__ */ u$1("span", { children: item });
       }
-    ),
-    /* @__PURE__ */ u$1("datalist", { id: lapisField, children: data.map((item) => /* @__PURE__ */ u$1("option", { value: item }, item)) })
-  ] });
+    }
+  );
 };
+function filterByInputValue$1(item, inputValue) {
+  if (inputValue === void 0 || inputValue === null || inputValue === "") {
+    return true;
+  }
+  return item == null ? void 0 : item.toLowerCase().includes((inputValue == null ? void 0 : inputValue.toLowerCase()) || "");
+}
 var __defProp$2 = Object.defineProperty;
 var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
 var __decorateClass$2 = (decorators, target, key, kind) => {
@@ -14637,8 +14685,9 @@ var __decorateClass$2 = (decorators, target, key, kind) => {
 let TextInputComponent = class extends PreactLitAdapter {
   constructor() {
     super(...arguments);
-    this.initialValue = void 0;
+    this.value = void 0;
     this.lapisField = "";
+    this.lapisFilter = {};
     this.placeholderText = void 0;
     this.width = "100%";
   }
@@ -14647,8 +14696,9 @@ let TextInputComponent = class extends PreactLitAdapter {
       TextInput,
       {
         lapisField: this.lapisField,
+        lapisFilter: this.lapisFilter,
         placeholderText: this.placeholderText,
-        initialValue: this.initialValue,
+        value: this.value,
         width: this.width
       }
     );
@@ -14656,10 +14706,13 @@ let TextInputComponent = class extends PreactLitAdapter {
 };
 __decorateClass$2([
   n$1()
-], TextInputComponent.prototype, "initialValue", 2);
+], TextInputComponent.prototype, "value", 2);
 __decorateClass$2([
   n$1()
 ], TextInputComponent.prototype, "lapisField", 2);
+__decorateClass$2([
+  n$1({ type: Object })
+], TextInputComponent.prototype, "lapisFilter", 2);
 __decorateClass$2([
   n$1()
 ], TextInputComponent.prototype, "placeholderText", 2);
@@ -15295,15 +15348,23 @@ __decorateClass$1([
 MutationFilterComponent = __decorateClass$1([
   t$3("gs-mutation-filter")
 ], MutationFilterComponent);
-async function fetchLineageAutocompleteList(lapis, field, signal) {
-  const fetchAggregatedOperator = new FetchAggregatedOperator({}, [field]);
+async function fetchLineageAutocompleteList({
+  lapis,
+  field,
+  signal,
+  lapisFilter
+}) {
+  const fetchAggregatedOperator = new FetchAggregatedOperator(lapisFilter ?? {}, [field]);
   const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
   return data.flatMap((item) => [item[field], `${item[field]}*`]).sort();
 }
-const lineageFilterInnerPropsSchema = z$2.object({
+const lineageSelectorPropsSchema = z$2.object({
   lapisField: z$2.string().min(1),
   placeholderText: z$2.string().optional(),
-  initialValue: z$2.string()
+  value: z$2.string()
+});
+const lineageFilterInnerPropsSchema = lineageSelectorPropsSchema.extend({
+  lapisFilter: lapisFilterSchema
 });
 const lineageFilterPropsSchema = lineageFilterInnerPropsSchema.extend({
   width: z$2.string()
@@ -15316,13 +15377,13 @@ const LineageFilter = (props) => {
 const LineageFilterInner = ({
   lapisField,
   placeholderText,
-  initialValue
+  value,
+  lapisFilter
 }) => {
   const lapis = x$1(LapisUrlContext);
-  const inputRef = A$1(null);
   const { data, error, isLoading } = useQuery(
-    () => fetchLineageAutocompleteList(lapis, lapisField),
-    [lapisField, lapis]
+    () => fetchLineageAutocompleteList({ lapis, field: lapisField, lapisFilter }),
+    [lapisField, lapis, lapisFilter]
   );
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -15330,44 +15391,33 @@ const LineageFilterInner = ({
   if (error !== null) {
     throw error;
   }
-  if (data === null) {
-    return /* @__PURE__ */ u$1(NoDataDisplay, {});
-  }
-  const onInput = () => {
-    var _a, _b, _c;
-    const value = ((_a = inputRef.current) == null ? void 0 : _a.value) === "" ? void 0 : (_b = inputRef.current) == null ? void 0 : _b.value;
-    if (isValidValue(value)) {
-      (_c = inputRef.current) == null ? void 0 : _c.dispatchEvent(
-        new CustomEvent("gs-lineage-filter-changed", {
-          detail: { [lapisField]: value },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-  };
-  const isValidValue = (value) => {
-    if (value === void 0) {
-      return true;
+  return /* @__PURE__ */ u$1(LineageSelector, { lapisField, value, placeholderText, data });
+};
+const LineageSelector = ({
+  lapisField,
+  value,
+  placeholderText,
+  data
+}) => {
+  return /* @__PURE__ */ u$1(
+    DownshiftCombobox,
+    {
+      allItems: data,
+      value,
+      filterItemsByInputValue: filterByInputValue,
+      createEvent: (item) => new LineageFilterChangedEvent({ [lapisField]: item ?? void 0 }),
+      itemToString: (item) => item ?? "",
+      placeholderText,
+      formatItemInList: (item) => item
     }
-    return data.includes(value);
-  };
-  return /* @__PURE__ */ u$1(Fragment, { children: [
-    /* @__PURE__ */ u$1(
-      "input",
-      {
-        type: "text",
-        class: "input input-bordered w-full",
-        placeholder: placeholderText !== void 0 ? placeholderText : lapisField,
-        onInput,
-        ref: inputRef,
-        list: lapisField,
-        value: initialValue
-      }
-    ),
-    /* @__PURE__ */ u$1("datalist", { id: lapisField, children: data.map((item) => /* @__PURE__ */ u$1("option", { value: item }, item)) })
-  ] });
+  );
 };
+function filterByInputValue(item, inputValue) {
+  if (inputValue === void 0 || inputValue === null || inputValue === "") {
+    return true;
+  }
+  return item == null ? void 0 : item.toLowerCase().includes((inputValue == null ? void 0 : inputValue.toLowerCase()) || "");
+}
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15381,8 +15431,9 @@ var __decorateClass = (decorators, target, key, kind) => {
 let LineageFilterComponent = class extends PreactLitAdapter {
   constructor() {
     super(...arguments);
-    this.initialValue = "";
+    this.value = "";
     this.lapisField = "";
+    this.lapisFilter = {};
     this.placeholderText = void 0;
     this.width = "100%";
   }
@@ -15391,8 +15442,9 @@ let LineageFilterComponent = class extends PreactLitAdapter {
       LineageFilter,
       {
         lapisField: this.lapisField,
+        lapisFilter: this.lapisFilter,
         placeholderText: this.placeholderText,
-        initialValue: this.initialValue,
+        value: this.value,
         width: this.width
       }
     );
@@ -15400,10 +15452,13 @@ let LineageFilterComponent = class extends PreactLitAdapter {
 };
 __decorateClass([
   n$1()
-], LineageFilterComponent.prototype, "initialValue", 2);
+], LineageFilterComponent.prototype, "value", 2);
 __decorateClass([
   n$1()
 ], LineageFilterComponent.prototype, "lapisField", 2);
+__decorateClass([
+  n$1({ type: Object })
+], LineageFilterComponent.prototype, "lapisFilter", 2);
 __decorateClass([
   n$1()
 ], LineageFilterComponent.prototype, "placeholderText", 2);