@genspectrum/dashboard-components 0.12.1 → 0.13.0

package/dist/components.js

@@ -6,7 +6,7 @@ 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";
@@ -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 = T$1(
-    () => value !== void 0 ? toSelectOption(value, fields) : null,
-    [value, fields]
+  const initialSelectedItem = value ?? null;
+  const [items, setItems] = h(
+    allItems.filter((item) => filterItemsByInputValue(item, itemToString2(initialSelectedItem)))
   );
-  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,25 +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]).sort();
 }
-class TextInputChangedEvent extends CustomEvent {
-  constructor(detail) {
-    super("gs-text-input-changed", {
-      detail,
-      bubbles: true,
-      composed: true
-    });
-  }
-}
-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()
 });
@@ -14585,9 +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 = ({ initialValue, lapisField, placeholderText }) => {
+const TextInputInner = ({
+  value,
+  lapisField,
+  placeholderText,
+  lapisFilter
+}) => {
   const lapis = x$1(LapisUrlContext);
-  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, {});
   }
@@ -14597,145 +14643,35 @@ const TextInputInner = ({ initialValue, lapisField, placeholderText }) => {
   if (data === null) {
     return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(
-    TextSelector,
-    {
-      lapisField,
-      initialValue,
-      placeholderText,
-      data
-    }
-  );
+  return /* @__PURE__ */ u$1(TextSelector, { lapisField, value, placeholderText, data });
 };
 const TextSelector = ({
   lapisField,
-  initialValue,
+  value,
   placeholderText,
   data
 }) => {
-  var _a;
-  const [items, setItems] = h(data.filter((item) => filterByInputValue2(item, initialValue)));
-  const divRef = A$1(null);
-  const shadowRoot = ((_a = divRef.current) == null ? void 0 : _a.shadowRoot) ?? void 0;
-  const environment = shadowRoot !== void 0 ? {
-    addEventListener: window.addEventListener.bind(window),
-    removeEventListener: window.removeEventListener.bind(window),
-    document: shadowRoot.ownerDocument,
-    Node: window.Node
-  } : void 0;
-  function filterByInputValue2(item, inputValue2) {
-    if (inputValue2 === void 0 || inputValue2 === null || inputValue2 === "") {
-      return true;
-    }
-    return item == null ? void 0 : item.toLowerCase().includes((inputValue2 == null ? void 0 : inputValue2.toLowerCase()) || "");
-  }
-  const {
-    isOpen,
-    getToggleButtonProps,
-    getMenuProps,
-    getInputProps,
-    highlightedIndex,
-    getItemProps,
-    selectedItem,
-    inputValue,
-    selectItem,
-    setInputValue,
-    closeMenu
-  } = useCombobox({
-    onInputValueChange({ inputValue: inputValue2 }) {
-      setItems(data.filter((item) => filterByInputValue2(item, inputValue2)));
-    },
-    onSelectedItemChange({ selectedItem: selectedItem2 }) {
-      var _a2;
-      if (selectedItem2 !== null) {
-        (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(new TextInputChangedEvent({ [lapisField]: selectedItem2 }));
+  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 });
       }
-    },
-    items,
-    itemToString(item) {
-      return item ?? "";
-    },
-    initialSelectedItem: initialValue,
-    environment
-  });
-  const onInputBlur = () => {
-    var _a2;
-    if (inputValue === "") {
-      (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(new TextInputChangedEvent({ [lapisField]: void 0 }));
-      selectItem(null);
-    } else if (inputValue !== selectedItem) {
-      setInputValue(selectedItem ?? "");
     }
-  };
-  const clearInput = () => {
-    var _a2;
-    (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(new TextInputChangedEvent({ [lapisField]: void 0 }));
-    selectItem(null);
-  };
-  const buttonRef = A$1(null);
-  return /* @__PURE__ */ u$1("div", { ref: divRef, className: "relative w-full", children: [
-    /* @__PURE__ */ u$1("div", { className: "w-full flex flex-col gap-1", children: /* @__PURE__ */ u$1(
-      "div",
-      {
-        className: "flex gap-0.5 input input-bordered min-w-32",
-        onBlur: (event) => {
-          if (event.relatedTarget != buttonRef.current) {
-            closeMenu();
-          }
-        },
-        children: [
-          /* @__PURE__ */ u$1(
-            "input",
-            {
-              placeholder: placeholderText,
-              className: "w-full p-1.5",
-              ...getInputProps(),
-              onBlur: onInputBlur
-            }
-          ),
-          /* @__PURE__ */ u$1(
-            "button",
-            {
-              "aria-label": "clear selection",
-              className: `px-2 ${inputValue === "" && "hidden"}`,
-              type: "button",
-              onClick: clearInput,
-              tabIndex: -1,
-              children: "×"
-            }
-          ),
-          /* @__PURE__ */ u$1(
-            "button",
-            {
-              "aria-label": "toggle menu",
-              className: "px-2",
-              type: "button",
-              ...getToggleButtonProps(),
-              ref: buttonRef,
-              children: isOpen ? /* @__PURE__ */ u$1(Fragment, { children: "↑" }) : /* @__PURE__ */ u$1(Fragment, { children: "↓" })
-            }
-          )
-        ]
-      }
-    ) }),
-    /* @__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"}`,
-        ...getMenuProps(),
-        children: isOpen && items.map((item, index) => /* @__PURE__ */ u$1(
-          "li",
-          {
-            className: `${highlightedIndex === index && "bg-blue-300"} ${selectedItem !== null} py-2 px-3 shadow-sm flex flex-col`,
-            ...getItemProps({ item, index }),
-            children: /* @__PURE__ */ u$1("span", { children: 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) => {
@@ -14749,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%";
   }
@@ -14759,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
       }
     );
@@ -14768,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);
@@ -15407,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()
@@ -15428,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, {});
@@ -15442,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) => {
@@ -15493,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%";
   }
@@ -15503,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
       }
     );
@@ -15512,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);