@genspectrum/dashboard-components 0.4.4 → 0.5.0

package/dist/dashboard-components.js

@@ -28,8 +28,7 @@ const t$2 = (t2) => (e2, o2) => {
 const t$1 = globalThis, e$2 = t$1.ShadowRoot && (void 0 === t$1.ShadyCSS || t$1.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$1 = Symbol(), o$3 = /* @__PURE__ */ new WeakMap();
 let n$2 = class n {
   constructor(t2, e2, o2) {
-    if (this._$cssResult$ = true, o2 !== s$1)
-      throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = true, o2 !== s$1) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t2, this.t = e2;
   }
   get styleSheet() {
@@ -46,17 +45,14 @@ let n$2 = class n {
   }
 };
 const r$3 = (t2) => new n$2("string" == typeof t2 ? t2 : t2 + "", void 0, s$1), S$1 = (s2, o2) => {
-  if (e$2)
-    s2.adoptedStyleSheets = o2.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet);
-  else
-    for (const e2 of o2) {
-      const o3 = document.createElement("style"), n3 = t$1.litNonce;
-      void 0 !== n3 && o3.setAttribute("nonce", n3), o3.textContent = e2.cssText, s2.appendChild(o3);
-    }
+  if (e$2) s2.adoptedStyleSheets = o2.map((t2) => t2 instanceof CSSStyleSheet ? t2 : t2.styleSheet);
+  else for (const e2 of o2) {
+    const o3 = document.createElement("style"), n3 = t$1.litNonce;
+    void 0 !== n3 && o3.setAttribute("nonce", n3), o3.textContent = e2.cssText, s2.appendChild(o3);
+  }
 }, c$2 = e$2 ? (t2) => t2 : (t2) => t2 instanceof CSSStyleSheet ? ((t3) => {
   let e2 = "";
-  for (const s2 of t3.cssRules)
-    e2 += s2.cssText;
+  for (const s2 of t3.cssRules) e2 += s2.cssText;
   return r$3(e2);
 })(t2) : t2;
 /**
@@ -124,25 +120,20 @@ let b$1 = class b extends HTMLElement {
     return this.elementProperties.get(t2) ?? y$1;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(d$1("elementProperties")))
-      return;
+    if (this.hasOwnProperty(d$1("elementProperties"))) return;
     const t2 = n$1(this);
     t2.finalize(), void 0 !== t2.l && (this.l = [...t2.l]), this.elementProperties = new Map(t2.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(d$1("finalized")))
-      return;
+    if (this.hasOwnProperty(d$1("finalized"))) return;
     if (this.finalized = true, this._$Ei(), this.hasOwnProperty(d$1("properties"))) {
       const t3 = this.properties, s2 = [...h$1(t3), ...o$2(t3)];
-      for (const i2 of s2)
-        this.createProperty(i2, t3[i2]);
+      for (const i2 of s2) this.createProperty(i2, t3[i2]);
     }
     const t2 = this[Symbol.metadata];
     if (null !== t2) {
       const s2 = litPropertyMetadata.get(t2);
-      if (void 0 !== s2)
-        for (const [t3, i2] of s2)
-          this.elementProperties.set(t3, i2);
+      if (void 0 !== s2) for (const [t3, i2] of s2) this.elementProperties.set(t3, i2);
     }
     this._$Eh = /* @__PURE__ */ new Map();
     for (const [t3, s2] of this.elementProperties) {
@@ -155,10 +146,8 @@ let b$1 = class b extends HTMLElement {
     const i2 = [];
     if (Array.isArray(s2)) {
       const e2 = new Set(s2.flat(1 / 0).reverse());
-      for (const s3 of e2)
-        i2.unshift(c$2(s3));
-    } else
-      void 0 !== s2 && i2.push(c$2(s2));
+      for (const s3 of e2) i2.unshift(c$2(s3));
+    } else void 0 !== s2 && i2.push(c$2(s2));
     return i2;
   }
   static _$Eu(t2, s2) {
@@ -182,8 +171,7 @@ let b$1 = class b extends HTMLElement {
   }
   _$E_() {
     const t2 = /* @__PURE__ */ new Map(), s2 = this.constructor.elementProperties;
-    for (const i2 of s2.keys())
-      this.hasOwnProperty(i2) && (t2.set(i2, this[i2]), delete this[i2]);
+    for (const i2 of s2.keys()) this.hasOwnProperty(i2) && (t2.set(i2, this[i2]), delete this[i2]);
     t2.size > 0 && (this._$Ep = t2);
   }
   createRenderRoot() {
@@ -227,8 +215,7 @@ let b$1 = class b extends HTMLElement {
   }
   requestUpdate(t2, s2, i2) {
     if (void 0 !== t2) {
-      if (i2 ?? (i2 = this.constructor.getPropertyOptions(t2)), !(i2.hasChanged ?? f$2)(this[t2], s2))
-        return;
+      if (i2 ?? (i2 = this.constructor.getPropertyOptions(t2)), !(i2.hasChanged ?? f$2)(this[t2], s2)) return;
       this.P(t2, s2, i2);
     }
     false === this.isUpdatePending && (this._$ES = this._$ET());
@@ -251,18 +238,14 @@ let b$1 = class b extends HTMLElement {
   }
   performUpdate() {
     var _a;
-    if (!this.isUpdatePending)
-      return;
+    if (!this.isUpdatePending) return;
     if (!this.hasUpdated) {
       if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
-        for (const [t4, s3] of this._$Ep)
-          this[t4] = s3;
+        for (const [t4, s3] of this._$Ep) this[t4] = s3;
         this._$Ep = void 0;
       }
       const t3 = this.constructor.elementProperties;
-      if (t3.size > 0)
-        for (const [s3, i2] of t3)
-          true !== i2.wrapped || this._$AL.has(s3) || void 0 === this[s3] || this.P(s3, this[s3], i2);
+      if (t3.size > 0) for (const [s3, i2] of t3) true !== i2.wrapped || this._$AL.has(s3) || void 0 === this[s3] || this.P(s3, this[s3], i2);
     }
     let t2 = false;
     const s2 = this._$AL;
@@ -513,8 +496,7 @@ var __decorateClass$a = (decorators, target, key, kind) => {
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$a(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 let App = class extends LitElement {
@@ -559,13 +541,9 @@ var f$1 = 0;
 function u$1(e2, t2, n3, o2, i2, u2) {
   t2 || (t2 = {});
   var a2, c2, p2 = t2;
-  if ("ref" in p2)
-    for (c2 in p2 = {}, t2)
-      "ref" == c2 ? a2 = t2[c2] : p2[c2] = t2[c2];
+  if ("ref" in p2) for (c2 in p2 = {}, t2) "ref" == c2 ? a2 = t2[c2] : p2[c2] = t2[c2];
   var l2 = { type: e2, props: p2, key: n3, ref: a2, __k: null, __: null, __b: 0, __e: null, __d: void 0, __c: null, constructor: void 0, __v: --f$1, __i: -1, __u: 0, __source: i2, __self: u2 };
-  if ("function" == typeof e2 && (a2 = e2.defaultProps))
-    for (c2 in a2)
-      void 0 === p2[c2] && (p2[c2] = a2[c2]);
+  if ("function" == typeof e2 && (a2 = e2.defaultProps)) for (c2 in a2) void 0 === p2[c2] && (p2[c2] = a2[c2]);
   return options.vnode && options.vnode(l2), l2;
 }
 var t, r, u, i, o = 0, f = [], c = [], e = options, a = e.__b, v = e.__r, l = e.diffed, m = e.__c, s = e.unmount, d = e.__;
@@ -584,15 +562,13 @@ function y(n3, u2, i2) {
     t2 !== r2 && (o2.__N = [r2, o2.__[1]], o2.__c.setState({}));
   }], o2.__c = r, !r.u)) {
     var f2 = function(n4, t2, r2) {
-      if (!o2.__c.__H)
-        return true;
+      if (!o2.__c.__H) return true;
       var u3 = o2.__c.__H.__.filter(function(n5) {
         return !!n5.__c;
       });
       if (u3.every(function(n5) {
         return !n5.__N;
-      }))
-        return !c2 || c2.call(this, n4, t2, r2);
+      })) return !c2 || c2.call(this, n4, t2, r2);
       var i3 = false;
       return u3.forEach(function(n5) {
         if (n5.__N) {
@@ -639,13 +615,11 @@ function b2(n3) {
   }];
 }
 function j() {
-  for (var n3; n3 = f.shift(); )
-    if (n3.__P && n3.__H)
-      try {
-        n3.__H.__h.forEach(z), n3.__H.__h.forEach(B), n3.__H.__h = [];
-      } catch (t2) {
-        n3.__H.__h = [], e.__e(t2, n3.__v);
-      }
+  for (var n3; n3 = f.shift(); ) if (n3.__P && n3.__H) try {
+    n3.__H.__h.forEach(z), n3.__H.__h.forEach(B), n3.__H.__h = [];
+  } catch (t2) {
+    n3.__H.__h = [], e.__e(t2, n3.__v);
+  }
 }
 e.__b = function(n3) {
   r = null, a && a(n3);
@@ -772,7 +746,8 @@ const tableStyle = {
     fontSize: "12px"
   }
 };
-const Table = ({ data, columns, pagination }) => {
+const Table = ({ data, columns, pageSize }) => {
+  const pagination = typeof pageSize === "number" ? { limit: pageSize } : pageSize;
   const wrapper3 = F(null);
   _(() => {
     if (wrapper3.current === null) {
@@ -945,7 +920,11 @@ const compareSubstitutionValues = (a2, b3) => {
 const formatProportion = (proportion) => {
   return `${(proportion * 100).toFixed(2)}%`;
 };
-const MutationComparisonTable = ({ data, proportionInterval }) => {
+const MutationComparisonTable = ({
+  data,
+  proportionInterval,
+  pageSize
+}) => {
   const headers = [
     {
       name: "Mutation",
@@ -966,7 +945,7 @@ const MutationComparisonTable = ({ data, proportionInterval }) => {
     }
   ];
   const tableData = getMutationComparisonTableData(data, proportionInterval).map((row) => Object.values(row));
-  return /* @__PURE__ */ u$1(Table, { data: tableData, columns: headers, pagination: true });
+  return /* @__PURE__ */ u$1(Table, { data: tableData, columns: headers, pageSize });
 };
 const GsChart = ({ configuration }) => {
   const canvasRef = F(null);
@@ -1074,7 +1053,7 @@ const MutationComparisonVenn = ({
     [sets]
   );
   if (data.content.length > 5) {
-    return /* @__PURE__ */ u$1("div", { children: "Too many variants to display. Maximum are five. " });
+    return /* @__PURE__ */ u$1("div", { children: "Too many datasets to display. Maximum are five. " });
   }
   return /* @__PURE__ */ u$1("div", { className: "h-full flex flex-col", children: [
     /* @__PURE__ */ u$1("div", { className: "flex-1", children: /* @__PURE__ */ u$1(GsChart, { configuration: config }) }),
@@ -1131,8 +1110,8 @@ class SortOperator {
     };
   }
 }
-function querySubstitutionsOrDeletions(variant, sequenceType, lapis, signal) {
-  const fetchData = new FetchSubstitutionsOrDeletionsOperator(variant, sequenceType, 0);
+function querySubstitutionsOrDeletions(lapisFilter, sequenceType, lapis, signal) {
+  const fetchData = new FetchSubstitutionsOrDeletionsOperator(lapisFilter, sequenceType, 0);
   const sortData = new SortOperator(fetchData, (a2, b3) => {
     if (a2.mutation.segment !== b3.mutation.segment) {
       return (a2.mutation.segment ?? "").localeCompare(b3.mutation.segment ?? "");
@@ -1141,12 +1120,12 @@ function querySubstitutionsOrDeletions(variant, sequenceType, lapis, signal) {
   });
   return sortData.evaluate(lapis, signal);
 }
-async function queryMutationData(variants, sequenceType, lapis) {
+async function queryMutationData(lapisFilters, sequenceType, lapis) {
   const mutationData = await Promise.all(
-    variants.map(async (variant) => {
+    lapisFilters.map(async (filter) => {
       return {
-        displayName: variant.displayName,
-        data: (await querySubstitutionsOrDeletions(variant.lapisFilter, sequenceType, lapis)).content
+        displayName: filter.displayName,
+        data: (await querySubstitutionsOrDeletions(filter.lapisFilter, sequenceType, lapis)).content
       };
     })
   );
@@ -1709,25 +1688,35 @@ function useQuery(fetchDataCallback, dependencies = []) {
   return { data, error, isLoading };
 }
 const MutationComparison = ({
-  variants,
+  lapisFilters,
   sequenceType,
   views,
   width,
   height,
-  headline = "Mutation comparison"
+  headline = "Mutation comparison",
+  pageSize
 }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationComparisonInner, { variants, sequenceType, views }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+    MutationComparisonInner,
+    {
+      lapisFilters,
+      sequenceType,
+      views,
+      pageSize
+    }
+  ) }) }) });
 };
 const MutationComparisonInner = ({
-  variants,
+  lapisFilters,
   sequenceType,
-  views
+  views,
+  pageSize
 }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
-    return queryMutationData(variants, sequenceType, lapis);
-  }, [variants, sequenceType, lapis]);
+    return queryMutationData(lapisFilters, sequenceType, lapis);
+  }, [lapisFilters, sequenceType, lapis]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
@@ -1737,9 +1726,22 @@ const MutationComparisonInner = ({
   if (data === null) {
     return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(MutationComparisonTabs, { data: data.mutationData, sequenceType, views });
+  return /* @__PURE__ */ u$1(
+    MutationComparisonTabs,
+    {
+      data: data.mutationData,
+      sequenceType,
+      views,
+      pageSize
+    }
+  );
 };
-const MutationComparisonTabs = ({ data, views, sequenceType }) => {
+const MutationComparisonTabs = ({
+  data,
+  views,
+  sequenceType,
+  pageSize
+}) => {
   const [proportionInterval, setProportionInterval] = p({ min: 0.5, max: 1 });
   const [displayedMutationTypes, setDisplayedMutationTypes] = p([
     { label: "Substitutions", checked: true, type: "substitution" },
@@ -1759,7 +1761,8 @@ const MutationComparisonTabs = ({ data, views, sequenceType }) => {
             MutationComparisonTable,
             {
               data: { content: filteredData },
-              proportionInterval
+              proportionInterval,
+              pageSize
             }
           )
         };
@@ -2928,8 +2931,8 @@ html {
           appearance: none;
   height: 3rem;
   min-height: 3rem;
-  padding-left: 1rem;
-  padding-right: 2.5rem;
+  padding-inline-start: 1rem;
+  padding-inline-end: 2.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   line-height: 2;
@@ -2971,7 +2974,9 @@ html {
   display: grid;
   align-items: flex-end;
 }
-.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
+.tabs-lifted:has(.tab-content[class^="rounded-"])
+    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"])
+    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
   border-bottom-color: transparent;
 }
 .tab {
@@ -3809,7 +3814,7 @@ input.tab:checked + .tab-content,
 .tabs-boxed .tab {
   border-radius: var(--rounded-btn, 0.5rem);
 }
-:is([dir="rtl"] .table) {
+.table:where([dir="rtl"], [dir="rtl"] *) {
   text-align: right;
 }
 .table :where(th, td) {
@@ -3825,7 +3830,7 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
-.table :where(thead tr, tbody tr:not(:last-child),tbody tr:first-child:last-child) {
+.table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
   border-bottom-width: 1px;
   --tw-border-opacity: 1;
   border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
@@ -4109,7 +4114,7 @@ input.tab:checked + .tab-content,
   content: "";
   margin-inline-start: -100%;
 }
-:is([dir="rtl"] .steps-horizontal .step):before {
+.steps-horizontal .step:where([dir="rtl"], [dir="rtl"] *):before {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -4128,7 +4133,7 @@ input.tab:checked + .tab-content,
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   margin-inline-start: 50%;
 }
-:is([dir="rtl"] .steps-vertical .step):before {
+.steps-vertical .step:where([dir="rtl"], [dir="rtl"] *):before {
   --tw-translate-x: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -4162,6 +4167,7 @@ input.tab:checked + .tab-content,
 }
 .tooltip:before {
   max-width: 20rem;
+  white-space: normal;
   border-radius: 0.25rem;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -4254,6 +4260,10 @@ input.tab:checked + .tab-content,
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
 .my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -4265,6 +4275,15 @@ input.tab:checked + .tab-content,
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.ml-2 {
+  margin-left: 0.5rem;
+}
+.ml-2\\.5 {
+  margin-left: 0.625rem;
+}
+.ml-3 {
+  margin-left: 0.75rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -4338,6 +4357,9 @@ input.tab:checked + .tab-content,
 .flex-wrap {
   flex-wrap: wrap;
 }
+.items-end {
+  align-items: flex-end;
+}
 .items-center {
   align-items: center;
 }
@@ -4467,6 +4489,10 @@ input.tab:checked + .tab-content,
 .text-justify {
   text-align: justify;
 }
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -4496,6 +4522,10 @@ input.tab:checked + .tab-content,
 .leading-5 {
   line-height: 1.25rem;
 }
+.text-\\[\\#606060\\] {
+  --tw-text-opacity: 1;
+  color: rgb(96 96 96 / var(--tw-text-opacity));
+}
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -4579,8 +4609,7 @@ var __decorateClass$9 = (decorators, target, key, kind) => {
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$9(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 const tailwindElementCss = unsafeCSS(tailwindStyle);
@@ -4620,37 +4649,38 @@ var __decorateClass$8 = (decorators, target, key, kind) => {
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$8(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles {
   constructor() {
     super(...arguments);
-    this.variants = [];
+    this.lapisFilters = [];
     this.sequenceType = "nucleotide";
     this.views = ["table"];
     this.width = "100%";
     this.height = "700px";
     this.headline = "Mutation comparison";
+    this.pageSize = false;
   }
   render() {
     return /* @__PURE__ */ u$1(
       MutationComparison,
       {
-        variants: this.variants,
+        lapisFilters: this.lapisFilters,
         sequenceType: this.sequenceType,
         views: this.views,
         width: this.width,
         height: this.height,
-        headline: this.headline
+        headline: this.headline,
+        pageSize: this.pageSize
       }
     );
   }
 };
 __decorateClass$8([
   n2({ type: Array })
-], MutationComparisonComponent.prototype, "variants", 2);
+], MutationComparisonComponent.prototype, "lapisFilters", 2);
 __decorateClass$8([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "sequenceType", 2);
@@ -4666,6 +4696,9 @@ __decorateClass$8([
 __decorateClass$8([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "headline", 2);
+__decorateClass$8([
+  n2({ type: Object })
+], MutationComparisonComponent.prototype, "pageSize", 2);
 MutationComparisonComponent = __decorateClass$8([
   t$2("gs-mutation-comparison")
 ], MutationComparisonComponent);
@@ -4758,7 +4791,12 @@ const byProportion = (row, proportionInterval) => {
     return !cell.isReference && cell.proportion >= proportionInterval.min && cell.proportion <= proportionInterval.max;
   });
 };
-const MutationsGrid = ({ data, sequenceType, proportionInterval }) => {
+const MutationsGrid = ({
+  data,
+  sequenceType,
+  proportionInterval,
+  pageSize
+}) => {
   const getHeaders = () => {
     return [
       {
@@ -4811,7 +4849,7 @@ const MutationsGrid = ({ data, sequenceType, proportionInterval }) => {
     return {};
   };
   const tableData = getMutationsGridData(data, sequenceType, proportionInterval).map((row) => Object.values(row));
-  return /* @__PURE__ */ u$1(Table, { data: tableData, columns: getHeaders(), pagination: true });
+  return /* @__PURE__ */ u$1(Table, { data: tableData, columns: getHeaders(), pageSize });
 };
 const sortInsertions = (a2, b3) => {
   if (a2.segment !== b3.segment) {
@@ -4822,7 +4860,7 @@ const sortInsertions = (a2, b3) => {
   }
   return a2.insertedSymbols.localeCompare(b3.insertedSymbols);
 };
-const InsertionsTable = ({ data }) => {
+const InsertionsTable = ({ data, pageSize }) => {
   const getHeaders = () => {
     return [
       {
@@ -4841,9 +4879,9 @@ const InsertionsTable = ({ data }) => {
     ];
   };
   const tableData = getInsertionsTableData(data).map((row) => Object.values(row));
-  return /* @__PURE__ */ u$1(Table, { data: tableData, columns: getHeaders(), pagination: true });
+  return /* @__PURE__ */ u$1(Table, { data: tableData, columns: getHeaders(), pageSize });
 };
-const MutationsTable = ({ data, proportionInterval }) => {
+const MutationsTable = ({ data, proportionInterval, pageSize }) => {
   const getHeaders = () => {
     return [
       {
@@ -4871,7 +4909,7 @@ const MutationsTable = ({ data, proportionInterval }) => {
     ];
   };
   const tableData = getMutationsTableData(data, proportionInterval).map((row) => Object.values(row));
-  return /* @__PURE__ */ u$1(Table, { data: tableData, columns: getHeaders(), pagination: true });
+  return /* @__PURE__ */ u$1(Table, { data: tableData, columns: getHeaders(), pageSize });
 };
 class FetchInsertionsOperator {
   constructor(filter, sequenceType) {
@@ -4888,8 +4926,8 @@ class FetchInsertionsOperator {
     return { content };
   }
 }
-function queryInsertions(variant, sequenceType, lapis, signal) {
-  const fetchData = new FetchInsertionsOperator(variant, sequenceType);
+function queryInsertions(lapisFilter, sequenceType, lapis, signal) {
+  const fetchData = new FetchInsertionsOperator(lapisFilter, sequenceType);
   const sortData = new SortOperator(fetchData, (a2, b3) => {
     if (a2.mutation.segment !== b3.mutation.segment) {
       return (a2.mutation.segment ?? "").localeCompare(b3.mutation.segment ?? "");
@@ -4898,9 +4936,9 @@ function queryInsertions(variant, sequenceType, lapis, signal) {
   });
   return sortData.evaluate(lapis, signal);
 }
-async function queryMutationsData(variant, sequenceType, lapis) {
-  const substitutionsOrDeletions = (await querySubstitutionsOrDeletions(variant, sequenceType, lapis)).content;
-  const insertions = (await queryInsertions(variant, sequenceType, lapis)).content;
+async function queryMutationsData(lapisFilter, sequenceType, lapis) {
+  const substitutionsOrDeletions = (await querySubstitutionsOrDeletions(lapisFilter, sequenceType, lapis)).content;
+  const insertions = (await queryInsertions(lapisFilter, sequenceType, lapis)).content;
   return {
     substitutionsOrDeletions,
     insertions
@@ -4928,21 +4966,35 @@ function filterMutationsData(data, displayedSegments, displayedMutationTypes) {
   };
 }
 const Mutations = ({
-  variant,
+  lapisFilter,
   sequenceType,
   views,
   width,
   height,
-  headline = "Mutations"
+  headline = "Mutations",
+  pageSize
 }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationsInner, { variant, sequenceType, views }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+    MutationsInner,
+    {
+      lapisFilter,
+      sequenceType,
+      views,
+      pageSize
+    }
+  ) }) }) });
 };
-const MutationsInner = ({ variant, sequenceType, views }) => {
+const MutationsInner = ({
+  lapisFilter,
+  sequenceType,
+  views,
+  pageSize
+}) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
-    return queryMutationsData(variant, sequenceType, lapis);
-  }, [variant, sequenceType, lapis]);
+    return queryMutationsData(lapisFilter, sequenceType, lapis);
+  }, [lapisFilter, sequenceType, lapis]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
@@ -4952,9 +5004,9 @@ const MutationsInner = ({ variant, sequenceType, views }) => {
   if (data === null) {
     return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(MutationsTabs, { mutationsData: data, sequenceType, views });
+  return /* @__PURE__ */ u$1(MutationsTabs, { mutationsData: data, sequenceType, views, pageSize });
 };
-const MutationsTabs = ({ mutationsData, sequenceType, views }) => {
+const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
   const [proportionInterval, setProportionInterval] = p({ min: 0.05, max: 1 });
   const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
   const [displayedMutationTypes, setDisplayedMutationTypes] = p([
@@ -4967,7 +5019,14 @@ const MutationsTabs = ({ mutationsData, sequenceType, views }) => {
       case "table":
         return {
           title: "Table",
-          content: /* @__PURE__ */ u$1(MutationsTable, { data: filteredData.tableData, proportionInterval })
+          content: /* @__PURE__ */ u$1(
+            MutationsTable,
+            {
+              data: filteredData.tableData,
+              proportionInterval,
+              pageSize
+            }
+          )
         };
       case "grid":
         return {
@@ -4977,14 +5036,15 @@ const MutationsTabs = ({ mutationsData, sequenceType, views }) => {
             {
               data: filteredData.gridData,
               sequenceType,
-              proportionInterval
+              proportionInterval,
+              pageSize
             }
           )
         };
       case "insertions":
         return {
           title: "Insertions",
-          content: /* @__PURE__ */ u$1(InsertionsTable, { data: filteredData.insertions })
+          content: /* @__PURE__ */ u$1(InsertionsTable, { data: filteredData.insertions, pageSize })
         };
     }
   };
@@ -5064,37 +5124,38 @@ var __decorateClass$7 = (decorators, target, key, kind) => {
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$7(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
   constructor() {
     super(...arguments);
-    this.variant = {};
+    this.lapisFilter = {};
     this.sequenceType = "nucleotide";
     this.views = ["table", "grid"];
     this.width = "100%";
     this.height = "700px";
     this.headline = "Mutations";
+    this.pageSize = false;
   }
   render() {
     return /* @__PURE__ */ u$1(
       Mutations,
       {
-        variant: this.variant,
+        lapisFilter: this.lapisFilter,
         sequenceType: this.sequenceType,
         views: this.views,
         width: this.width,
         height: this.height,
-        headline: this.headline
+        headline: this.headline,
+        pageSize: this.pageSize
       }
     );
   }
 };
 __decorateClass$7([
   n2({ type: Object })
-], MutationsComponent.prototype, "variant", 2);
+], MutationsComponent.prototype, "lapisFilter", 2);
 __decorateClass$7([
   n2({ type: String })
 ], MutationsComponent.prototype, "sequenceType", 2);
@@ -5110,6 +5171,9 @@ __decorateClass$7([
 __decorateClass$7([
   n2({ type: String })
 ], MutationsComponent.prototype, "headline", 2);
+__decorateClass$7([
+  n2({ type: Object })
+], MutationsComponent.prototype, "pageSize", 2);
 MutationsComponent = __decorateClass$7([
   t$2("gs-mutations")
 ], MutationsComponent);
@@ -5189,7 +5253,23 @@ function wilson95PercentConfidenceInterval(observed, sample) {
 }
 const confidenceIntervalDataLabel = (value, lowerLimit, upperLimit, prefix) => {
   const label = prefix ? `${prefix}: ` : "";
-  return `${label}${value.toFixed(3)} (${lowerLimit.toFixed(3)} - ${upperLimit.toFixed(3)})`;
+  return `${label}${value.toFixed(3)} (${lowerLimit == null ? void 0 : lowerLimit.toFixed(3)} - ${upperLimit == null ? void 0 : upperLimit.toFixed(3)})`;
+};
+const getYAxisMax = (maxInData2, axisMax) => {
+  if (!axisMax) {
+    return 1;
+  }
+  switch (axisMax) {
+    case "limitTo1": {
+      return maxInData2 > 1 ? 1 : maxInData2;
+    }
+    case "maxInData": {
+      return maxInData2;
+    }
+    default: {
+      return axisMax;
+    }
+  }
 };
 function getYAxisScale(scaleType) {
   switch (scaleType) {
@@ -5197,35 +5277,37 @@ function getYAxisScale(scaleType) {
       return { beginAtZero: true, type: "linear", min: 0, max: 1 };
     }
     case "logarithmic": {
-      return { type: "logarithmic" };
+      return { type: "logarithmic", max: 1 };
     }
     case "logit":
       return { type: "logit" };
-    default:
-      return { beginAtZero: true, type: "linear" };
   }
 }
 Chart.register(...registerables, LogitScale, BarWithErrorBarsController, BarWithErrorBar);
 const PrevalenceOverTimeBarChart = ({
   data,
   yAxisScaleType,
-  confidenceIntervalMethod
+  confidenceIntervalMethod,
+  yAxisMaxConfig
 }) => {
-  var _a;
+  const nullFirstData = data.map((variantData) => {
+    return {
+      content: variantData.content.sort(sortNullToBeginningThenByDate),
+      displayName: variantData.displayName
+    };
+  });
+  const datasets2 = nullFirstData.map((graphData, index) => getDataset$1(graphData, index, confidenceIntervalMethod));
+  const maxY = yAxisScaleType !== "logit" ? getYAxisMax(maxInData(nullFirstData), yAxisMaxConfig == null ? void 0 : yAxisMaxConfig[yAxisScaleType]) : void 0;
   const config = {
     type: BarWithErrorBarsController.id,
     data: {
-      labels: ((_a = data[0]) == null ? void 0 : _a.content.map((dateRange) => {
-        var _a2;
-        return ((_a2 = dateRange.dateRange) == null ? void 0 : _a2.toString()) ?? "Unknown";
-      })) || [],
-      datasets: data.map((graphData, index) => datasets$1(graphData, index, confidenceIntervalMethod))
+      datasets: datasets2
     },
     options: {
       maintainAspectRatio: false,
       animation: false,
       scales: {
-        y: getYAxisScale(yAxisScaleType)
+        y: { ...getYAxisScale(yAxisScaleType), max: maxY }
       },
       plugins: {
         legend: {
@@ -5237,7 +5319,10 @@ const PrevalenceOverTimeBarChart = ({
   };
   return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
-const datasets$1 = (prevalenceOverTimeVariant, index, confidenceIntervalMethod) => {
+function sortNullToBeginningThenByDate(a2, b3) {
+  return a2.dateRange === null ? -1 : b3.dateRange === null ? 1 : a2.dateRange.toString().localeCompare(b3.dateRange.toString());
+}
+const getDataset$1 = (prevalenceOverTimeVariant, index, confidenceIntervalMethod) => {
   const generalConfig = {
     borderWidth: 1,
     pointRadius: 0,
@@ -5249,16 +5334,22 @@ const datasets$1 = (prevalenceOverTimeVariant, index, confidenceIntervalMethod)
     case "wilson":
       return {
         ...generalConfig,
-        data: prevalenceOverTimeVariant.content.map((dataPoint) => ({
-          y: dataPoint.prevalence,
-          yMin: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit,
-          yMax: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit
-        }))
+        data: prevalenceOverTimeVariant.content.map((dataPoint) => {
+          var _a;
+          return {
+            y: dataPoint.prevalence,
+            yMin: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit,
+            yMax: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit,
+            x: ((_a = dataPoint.dateRange) == null ? void 0 : _a.toString()) ?? "Unknown"
+          };
+        })
       };
     default:
       return {
         ...generalConfig,
-        data: prevalenceOverTimeVariant.content.map((dataPoint) => dataPoint.prevalence)
+        data: prevalenceOverTimeVariant.content.map((dataPoint) => {
+          return { y: dataPoint.prevalence, x: dataPoint.dateRange };
+        })
       };
   }
 };
@@ -5317,8 +5408,7 @@ const en = {
 };
 var padStart = function padStart2(string, length, pad) {
   var s2 = String(string);
-  if (!s2 || s2.length >= length)
-    return string;
+  if (!s2 || s2.length >= length) return string;
   return "" + Array(length + 1 - s2.length).join(pad) + string;
 };
 var padZoneStr = function padZoneStr2(instance) {
@@ -5329,8 +5419,7 @@ var padZoneStr = function padZoneStr2(instance) {
   return (negMinutes <= 0 ? "+" : "-") + padStart(hourOffset, 2, "0") + ":" + padStart(minuteOffset, 2, "0");
 };
 var monthDiff = function monthDiff2(a2, b3) {
-  if (a2.date() < b3.date())
-    return -monthDiff2(b3, a2);
+  if (a2.date() < b3.date()) return -monthDiff2(b3, a2);
   var wholeMonthDiff = (b3.year() - a2.year()) * 12 + (b3.month() - a2.month());
   var anchor = a2.clone().add(wholeMonthDiff, M);
   var c2 = b3 - anchor < 0;
@@ -5375,8 +5464,7 @@ var isDayjs = function isDayjs2(d2) {
 };
 var parseLocale = function parseLocale2(preset, object, isLocal) {
   var l2;
-  if (!preset)
-    return L;
+  if (!preset) return L;
   if (typeof preset === "string") {
     var presetLower = preset.toLowerCase();
     if (Ls[presetLower]) {
@@ -5395,8 +5483,7 @@ var parseLocale = function parseLocale2(preset, object, isLocal) {
     Ls[name] = preset;
     l2 = name;
   }
-  if (!isLocal && l2)
-    L = l2;
+  if (!isLocal && l2) L = l2;
   return l2 || !isLocal && L;
 };
 var dayjs = function dayjs2(date, c2) {
@@ -5423,12 +5510,9 @@ Utils.i = isDayjs;
 Utils.w = wrapper;
 var parseDate = function parseDate2(cfg) {
   var date = cfg.date, utc = cfg.utc;
-  if (date === null)
-    return /* @__PURE__ */ new Date(NaN);
-  if (Utils.u(date))
-    return /* @__PURE__ */ new Date();
-  if (date instanceof Date)
-    return new Date(date);
+  if (date === null) return /* @__PURE__ */ new Date(NaN);
+  if (Utils.u(date)) return /* @__PURE__ */ new Date();
+  if (date instanceof Date) return new Date(date);
   if (typeof date === "string" && !/Z$/i.test(date)) {
     var d2 = date.match(REGEX_PARSE);
     if (d2) {
@@ -5482,8 +5566,7 @@ var Dayjs = /* @__PURE__ */ function() {
     return this.endOf(units) < dayjs(that);
   };
   _proto.$g = function $g(input, get, set) {
-    if (Utils.u(input))
-      return this[get];
+    if (Utils.u(input)) return this[get];
     return this.set(set, input);
   };
   _proto.unix = function unix() {
@@ -5548,8 +5631,7 @@ var Dayjs = /* @__PURE__ */ function() {
       date.$d[name](arg);
       date.init();
       this.$d = date.set(DATE, Math.min(this.$D, date.daysInMonth())).$d;
-    } else if (name)
-      this.$d[name](arg);
+    } else if (name) this.$d[name](arg);
     this.init();
     return this;
   };
@@ -5589,8 +5671,7 @@ var Dayjs = /* @__PURE__ */ function() {
   _proto.format = function format(formatStr) {
     var _this3 = this;
     var locale = this.$locale();
-    if (!this.isValid())
-      return locale.invalidDate || INVALID_DATE_STRING;
+    if (!this.isValid()) return locale.invalidDate || INVALID_DATE_STRING;
     var str = formatStr || FORMAT_DEFAULT;
     var zoneStr = Utils.z(this);
     var $H = this.$H, $m = this.$m, $M = this.$M;
@@ -5713,12 +5794,10 @@ var Dayjs = /* @__PURE__ */ function() {
     return Ls[this.$L];
   };
   _proto.locale = function locale(preset, object) {
-    if (!preset)
-      return this.$L;
+    if (!preset) return this.$L;
     var that = this.clone();
     var nextLocaleName = parseLocale(preset, object, true);
-    if (nextLocaleName)
-      that.$L = nextLocaleName;
+    if (nextLocaleName) that.$L = nextLocaleName;
     return that;
   };
   _proto.clone = function clone() {
@@ -6151,17 +6230,28 @@ function getMinMaxNumber(values) {
   return [min, max];
 }
 Chart.register(...registerables, LogitScale);
-const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }) => {
-  const firstDate = data[0].content[0].dateRange;
-  const total = data.map((graphData) => graphData.content.map((dataPoint) => dataPoint.total)).flat();
+const PrevalenceOverTimeBubbleChart = ({
+  data,
+  yAxisScaleType,
+  yAxisMaxConfig
+}) => {
+  const nonNullDateRangeData = data.map((variantData) => {
+    return {
+      content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
+      displayName: variantData.displayName
+    };
+  });
+  const firstDate = nonNullDateRangeData[0].content[0].dateRange;
+  const total = nonNullDateRangeData.map((graphData) => graphData.content.map((dataPoint) => dataPoint.total)).flat();
   const [minTotal, maxTotal] = getMinMaxNumber(total);
   const scaleBubble = (value) => {
     return (value - minTotal) / (maxTotal - minTotal) * 4.5 + 0.5;
   };
+  const maxY = yAxisScaleType !== "logit" ? getYAxisMax(maxInData(nonNullDateRangeData), yAxisMaxConfig == null ? void 0 : yAxisMaxConfig[yAxisScaleType]) : void 0;
   const config = {
     type: "bubble",
     data: {
-      datasets: data.map((graphData, index) => ({
+      datasets: nonNullDateRangeData.map((graphData, index) => ({
         label: graphData.displayName,
         data: graphData.content.filter((dataPoint) => dataPoint.dateRange !== null).map((dataPoint) => ({
           x: minusTemporal(dataPoint.dateRange, firstDate),
@@ -6183,7 +6273,7 @@ const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }) => {
             callback: (value) => addUnit(firstDate, value).toString()
           }
         },
-        y: getYAxisScale(yAxisScaleType)
+        y: { ...getYAxisScale(yAxisScaleType), max: maxY }
       },
       plugins: {
         legend: {
@@ -6195,12 +6285,12 @@ const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }) => {
           callbacks: {
             title: (context) => {
               var _a;
-              const dataset = data[context[0].datasetIndex];
+              const dataset = nonNullDateRangeData[context[0].datasetIndex];
               const dataPoint = dataset.content[context[0].dataIndex];
               return (_a = dataPoint.dateRange) == null ? void 0 : _a.toString();
             },
             label: (context) => {
-              const dataset = data[context.datasetIndex];
+              const dataset = nonNullDateRangeData[context.datasetIndex];
               const dataPoint = dataset.content[context.dataIndex];
               const percentage = (dataPoint.prevalence * 100).toFixed(2);
               const count = dataPoint.count.toFixed(0);
@@ -6218,25 +6308,27 @@ Chart.register(...registerables, LogitScale);
 const PrevalenceOverTimeLineChart = ({
   data,
   yAxisScaleType,
-  confidenceIntervalMethod
+  confidenceIntervalMethod,
+  yAxisMaxConfig
 }) => {
-  var _a;
-  const datasets2 = data.map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod)).flat();
-  const labels = ((_a = data[0]) == null ? void 0 : _a.content.map((dateRange) => {
-    var _a2;
-    return ((_a2 = dateRange.dateRange) == null ? void 0 : _a2.toString()) ?? "Unknown";
-  })) || [];
+  const nonNullDateRangeData = data.map((variantData) => {
+    return {
+      content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
+      displayName: variantData.displayName
+    };
+  });
+  const datasets2 = nonNullDateRangeData.map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod)).flat();
+  const maxY = yAxisScaleType !== "logit" ? getYAxisMax(maxInData(nonNullDateRangeData), yAxisMaxConfig == null ? void 0 : yAxisMaxConfig[yAxisScaleType]) : void 0;
   const config = {
     type: "line",
     data: {
-      labels,
       datasets: datasets2
     },
     options: {
       animation: false,
       maintainAspectRatio: false,
       scales: {
-        y: getYAxisScale(yAxisScaleType)
+        y: { ...getYAxisScale(yAxisScaleType), max: maxY }
       },
       plugins: {
         legend: {
@@ -6262,9 +6354,13 @@ const getDataset = (prevalenceOverTimeVariant, dataIndex, confidenceIntervalMeth
 };
 const getDatasetCIUpper = (prevalenceOverTimeVariant, dataIndex) => ({
   label: `${prevalenceOverTimeVariant.displayName} CI upper`,
-  data: prevalenceOverTimeVariant.content.map(
-    (dataPoint) => wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit
-  ),
+  data: prevalenceOverTimeVariant.content.map((dataPoint) => {
+    var _a;
+    return {
+      y: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit,
+      x: (_a = dataPoint.dateRange) == null ? void 0 : _a.toString()
+    };
+  }),
   borderWidth: 0,
   pointRadius: 0,
   fill: "+1",
@@ -6272,9 +6368,13 @@ const getDatasetCIUpper = (prevalenceOverTimeVariant, dataIndex) => ({
 });
 const getDatasetCILower = (prevalenceOverTimeVariant, dataIndex) => ({
   label: `${prevalenceOverTimeVariant.displayName} CI lower`,
-  data: prevalenceOverTimeVariant.content.map(
-    (dataPoint) => wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit
-  ),
+  data: prevalenceOverTimeVariant.content.map((dataPoint) => {
+    var _a;
+    return {
+      y: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit,
+      x: (_a = dataPoint.dateRange) == null ? void 0 : _a.toString()
+    };
+  }),
   borderWidth: 0,
   pointRadius: 0,
   fill: "-1",
@@ -6282,7 +6382,16 @@ const getDatasetCILower = (prevalenceOverTimeVariant, dataIndex) => ({
 });
 const getDatasetLine = (prevalenceOverTimeVariant, dataIndex) => ({
   label: prevalenceOverTimeVariant.displayName,
-  data: prevalenceOverTimeVariant.content.map((dataPoint) => dataPoint.prevalence),
+  data: prevalenceOverTimeVariant.content.map((dataPoint) => {
+    var _a;
+    const ciLimits = wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total);
+    return {
+      y: dataPoint.prevalence,
+      x: (_a = dataPoint.dateRange) == null ? void 0 : _a.toString(),
+      yCiUpper: ciLimits.upperLimit,
+      yCiLower: ciLimits.lowerLimit
+    };
+  }),
   borderWidth: 1,
   pointRadius: 0,
   borderColor: singleGraphColorRGBAById(dataIndex),
@@ -6298,20 +6407,17 @@ const tooltip$1 = (confidenceIntervalMethod) => {
       return {
         ...generalConfig,
         filter: ({ datasetIndex }) => {
-          return datasetIndex % 3 === 1;
+          return isNotCiIndex(datasetIndex);
         },
         callbacks: {
           label: (context) => {
-            if (context.datasetIndex % 3 === 1) {
-              const value = context.dataset.data[context.dataIndex];
-              const ciLower = context.dataset.data[context.dataIndex - 1];
-              const ciUpper = context.dataset.data[context.dataIndex + 1];
-              if (typeof value !== "number" || typeof ciLower !== "number" || typeof ciUpper !== "number") {
-                return "";
-              }
-              return confidenceIntervalDataLabel(value, ciLower, ciUpper, context.dataset.label);
-            }
-            return context.dataset.label;
+            const dataPoint = context.dataset.data[context.dataIndex];
+            return confidenceIntervalDataLabel(
+              dataPoint.y,
+              dataPoint.yCiLower,
+              dataPoint.yCiUpper,
+              context.dataset.label
+            );
           }
         }
       };
@@ -6319,7 +6425,10 @@ const tooltip$1 = (confidenceIntervalMethod) => {
       return generalConfig;
   }
 };
-const PrevalenceOverTimeTable = ({ data, granularity }) => {
+function isNotCiIndex(datasetIndex) {
+  return datasetIndex % 3 === 1;
+}
+const PrevalenceOverTimeTable = ({ data, granularity, pageSize }) => {
   const getSplitColumns = (data2) => {
     return data2.map((dataset) => ({
       name: dataset.displayName,
@@ -6347,7 +6456,7 @@ const PrevalenceOverTimeTable = ({ data, granularity }) => {
     const dataByHeader = getPrevalenceOverTimeTableData(data2, granularity2);
     return Object.values(dataByHeader).map((row) => Object.values(row));
   };
-  return /* @__PURE__ */ u$1(Table, { data: getData(data, granularity), columns: getColumns(data), pagination: false });
+  return /* @__PURE__ */ u$1(Table, { data: getData(data, granularity), columns: getColumns(data), pageSize });
 };
 class DivisionOperator {
   constructor(numerator, denominator, keyField, valueField, resultField, numeratorField, denominatorField) {
@@ -6654,8 +6763,8 @@ const ScalingSelector = ({
   );
 };
 const PrevalenceOverTime = ({
-  numerator,
-  denominator,
+  numeratorFilter,
+  denominatorFilter,
   granularity,
   smoothingWindow,
   views,
@@ -6663,35 +6772,48 @@ const PrevalenceOverTime = ({
   width,
   height,
   headline = "Prevalence over time",
-  lapisDateField
+  lapisDateField,
+  pageSize,
+  yAxisMaxConfig
 }) => {
   const size2 = { height, width };
   return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
     PrevalenceOverTimeInner,
     {
-      numerator,
-      denominator,
+      numeratorFilter,
+      denominatorFilter,
       granularity,
       smoothingWindow,
       views,
       confidenceIntervalMethods,
-      lapisDateField
+      lapisDateField,
+      pageSize,
+      yAxisMaxConfig
     }
   ) }) }) });
 };
 const PrevalenceOverTimeInner = ({
-  numerator,
-  denominator,
+  numeratorFilter,
+  denominatorFilter,
   granularity,
   smoothingWindow,
   views,
   confidenceIntervalMethods,
-  lapisDateField
+  lapisDateField,
+  pageSize,
+  yAxisMaxConfig
 }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(
-    () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis, lapisDateField),
-    [lapis, numerator, denominator, granularity, smoothingWindow]
+    () => queryPrevalenceOverTime(
+      numeratorFilter,
+      denominatorFilter,
+      granularity,
+      smoothingWindow,
+      lapis,
+      lapisDateField
+    ),
+    [lapis, numeratorFilter, denominatorFilter, granularity, smoothingWindow]
   );
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -6708,7 +6830,9 @@ const PrevalenceOverTimeInner = ({
       views,
       data,
       granularity,
-      confidenceIntervalMethods
+      confidenceIntervalMethods,
+      pageSize,
+      yAxisMaxConfig
     }
   );
 };
@@ -6716,7 +6840,9 @@ const PrevalenceOverTimeTabs = ({
   views,
   data,
   granularity,
-  confidenceIntervalMethods
+  confidenceIntervalMethods,
+  pageSize,
+  yAxisMaxConfig
 }) => {
   const [yAxisScaleType, setYAxisScaleType] = p("linear");
   const [confidenceIntervalMethod, setConfidenceIntervalMethod] = p(
@@ -6732,7 +6858,8 @@ const PrevalenceOverTimeTabs = ({
             {
               data,
               yAxisScaleType,
-              confidenceIntervalMethod
+              confidenceIntervalMethod,
+              yAxisMaxConfig
             }
           )
         };
@@ -6744,19 +6871,27 @@ const PrevalenceOverTimeTabs = ({
             {
               data,
               yAxisScaleType,
-              confidenceIntervalMethod
+              confidenceIntervalMethod,
+              yAxisMaxConfig
             }
           )
         };
       case "bubble":
         return {
           title: "Bubble",
-          content: /* @__PURE__ */ u$1(PrevalenceOverTimeBubbleChart, { data, yAxisScaleType })
+          content: /* @__PURE__ */ u$1(
+            PrevalenceOverTimeBubbleChart,
+            {
+              data,
+              yAxisScaleType,
+              yAxisMaxConfig
+            }
+          )
         };
       case "table":
         return {
           title: "Table",
-          content: /* @__PURE__ */ u$1(PrevalenceOverTimeTable, { data, granularity })
+          content: /* @__PURE__ */ u$1(PrevalenceOverTimeTable, { data, granularity, pageSize })
         };
     }
   };
@@ -6813,6 +6948,7 @@ const PrevalenceOverTimeInfo = () => {
     /* @__PURE__ */ u$1(InfoParagraph, { children: "Prevalence over time info." })
   ] });
 };
+const maxInData = (data) => Math.max(...data.flatMap((variant) => variant.content.map((dataPoint) => dataPoint.prevalence)));
 var __defProp$6 = Object.defineProperty;
 var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
 var __decorateClass$6 = (decorators, target, key, kind) => {
@@ -6820,15 +6956,14 @@ var __decorateClass$6 = (decorators, target, key, kind) => {
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$6(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles {
   constructor() {
     super(...arguments);
-    this.numerator = { displayName: "", lapisFilter: {} };
-    this.denominator = {};
+    this.numeratorFilter = { displayName: "", lapisFilter: {} };
+    this.denominatorFilter = {};
     this.granularity = "day";
     this.smoothingWindow = 0;
     this.views = ["bar", "line", "bubble", "table"];
@@ -6837,13 +6972,16 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     this.width = "100%";
     this.height = "700px";
     this.lapisDateField = "date";
+    this.pageSize = false;
+    this.yAxisMaxLinear = 1;
+    this.yAxisMaxLogarithmic = 1;
   }
   render() {
     return /* @__PURE__ */ u$1(
       PrevalenceOverTime,
       {
-        numerator: this.numerator,
-        denominator: this.denominator,
+        numeratorFilter: this.numeratorFilter,
+        denominatorFilter: this.denominatorFilter,
         granularity: this.granularity,
         smoothingWindow: this.smoothingWindow,
         views: this.views,
@@ -6851,17 +6989,22 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         width: this.width,
         height: this.height,
         headline: this.headline,
-        lapisDateField: this.lapisDateField
+        lapisDateField: this.lapisDateField,
+        pageSize: this.pageSize,
+        yAxisMaxConfig: {
+          linear: this.yAxisMaxLinear,
+          logarithmic: this.yAxisMaxLogarithmic
+        }
       }
     );
   }
 };
 __decorateClass$6([
   n2({ type: Object })
-], PrevalenceOverTimeComponent.prototype, "numerator", 2);
+], PrevalenceOverTimeComponent.prototype, "numeratorFilter", 2);
 __decorateClass$6([
   n2({ type: Object })
-], PrevalenceOverTimeComponent.prototype, "denominator", 2);
+], PrevalenceOverTimeComponent.prototype, "denominatorFilter", 2);
 __decorateClass$6([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "granularity", 2);
@@ -6886,11 +7029,21 @@ __decorateClass$6([
 __decorateClass$6([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "lapisDateField", 2);
+__decorateClass$6([
+  n2({ type: Object })
+], PrevalenceOverTimeComponent.prototype, "pageSize", 2);
+__decorateClass$6([
+  n2({ type: String })
+], PrevalenceOverTimeComponent.prototype, "yAxisMaxLinear", 2);
+__decorateClass$6([
+  n2({ type: String })
+], PrevalenceOverTimeComponent.prototype, "yAxisMaxLogarithmic", 2);
 PrevalenceOverTimeComponent = __decorateClass$6([
   t$2("gs-prevalence-over-time")
 ], PrevalenceOverTimeComponent);
 Chart.register(...registerables, LogitScale);
-const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }) => {
+const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType, yAxisMaxConfig }) => {
+  const maxY = yAxisScaleType !== "logit" ? getYAxisMax(Math.max(...data.proportion), yAxisMaxConfig == null ? void 0 : yAxisMaxConfig[yAxisScaleType]) : void 0;
   const config = {
     type: "line",
     data: {
@@ -6901,7 +7054,7 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }) => {
       maintainAspectRatio: false,
       animation: false,
       scales: {
-        y: getYAxisScale(yAxisScaleType)
+        y: { ...getYAxisScale(yAxisScaleType), max: maxY }
       },
       plugins: {
         legend: {
@@ -6911,17 +7064,38 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }) => {
       }
     }
   };
-  return /* @__PURE__ */ u$1("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ u$1("div", { className: "flex-1", children: /* @__PURE__ */ u$1(GsChart, { configuration: config }) }),
-    /* @__PURE__ */ u$1("p", { children: [
-      "Advantage: ",
-      (data.params.fd.value * 100).toFixed(2),
-      "% (",
-      (data.params.fd.ciLower * 100).toFixed(2),
-      "% -",
-      " ",
-      (data.params.fd.ciUpper * 100).toFixed(2),
-      "%)"
+  return /* @__PURE__ */ u$1("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ u$1(
+      RelativeGrowthAdvantageDisplay,
+      {
+        relativeAdvantage: data.params.fd.value,
+        relativeAdvantageLowerBound: data.params.fd.ciLower,
+        relativeAdvantageUpperBound: data.params.fd.ciUpper
+      }
+    ),
+    /* @__PURE__ */ u$1("div", { className: "flex-1", children: /* @__PURE__ */ u$1(GsChart, { configuration: config }) })
+  ] });
+};
+const RelativeGrowthAdvantageDisplay = ({
+  relativeAdvantage,
+  relativeAdvantageLowerBound,
+  relativeAdvantageUpperBound
+}) => {
+  return /* @__PURE__ */ u$1("div", { class: "mx-auto flex items-end flex-wrap", children: [
+    /* @__PURE__ */ u$1("span", { class: "text-[#606060]", children: "Relative advantage:" }),
+    /* @__PURE__ */ u$1("div", { children: [
+      /* @__PURE__ */ u$1("span", { class: "text-2xl ml-3", children: [
+        " ",
+        formatProportion(relativeAdvantage),
+        " "
+      ] }),
+      /* @__PURE__ */ u$1("span", { class: "ml-2.5", children: [
+        "(",
+        formatProportion(relativeAdvantageLowerBound),
+        " - ",
+        formatProportion(relativeAdvantageUpperBound),
+        ")"
+      ] })
     ] })
   ] });
 };
@@ -7080,36 +7254,39 @@ const RelativeGrowthAdvantage = ({
   views,
   width,
   height,
-  numerator,
-  denominator,
+  numeratorFilter,
+  denominatorFilter,
   generationTime,
   headline = "Relative growth advantage",
-  lapisDateField
+  lapisDateField,
+  yAxisMaxConfig
 }) => {
   const size2 = { height, width };
   return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
     RelativeGrowthAdvantageInner,
     {
       views,
-      numerator,
-      denominator,
+      numeratorFilter,
+      denominatorFilter,
       generationTime,
-      lapisDateField
+      lapisDateField,
+      yAxisMaxConfig
     }
   ) }) }) });
 };
 const RelativeGrowthAdvantageInner = ({
-  numerator,
-  denominator,
+  numeratorFilter,
+  denominatorFilter,
   generationTime,
   views,
-  lapisDateField
+  lapisDateField,
+  yAxisMaxConfig
 }) => {
   const lapis = P(LapisUrlContext);
   const [yAxisScaleType, setYAxisScaleType] = p("linear");
   const { data, error, isLoading } = useQuery(
-    () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis, lapisDateField),
-    [lapis, numerator, denominator, generationTime, views]
+    () => queryRelativeGrowthAdvantage(numeratorFilter, denominatorFilter, generationTime, lapis, lapisDateField),
+    [lapis, numeratorFilter, denominatorFilter, generationTime, views]
   );
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -7127,7 +7304,8 @@ const RelativeGrowthAdvantageInner = ({
       yAxisScaleType,
       setYAxisScaleType,
       views,
-      generationTime
+      generationTime,
+      yAxisMaxConfig
     }
   );
 };
@@ -7136,7 +7314,8 @@ const RelativeGrowthAdvantageTabs = ({
   yAxisScaleType,
   setYAxisScaleType,
   views,
-  generationTime
+  generationTime,
+  yAxisMaxConfig
 }) => {
   const getTab = (view) => {
     switch (view) {
@@ -7151,7 +7330,8 @@ const RelativeGrowthAdvantageTabs = ({
                 observed: data.observedProportions,
                 params: data.params
               },
-              yAxisScaleType
+              yAxisScaleType,
+              yAxisMaxConfig
             }
           )
         };
@@ -7206,44 +7386,49 @@ var __decorateClass$5 = (decorators, target, key, kind) => {
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$5(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
   constructor() {
     super(...arguments);
-    this.numerator = {};
-    this.denominator = {};
+    this.numeratorFilter = {};
+    this.denominatorFilter = {};
     this.generationTime = 7;
     this.views = ["line"];
     this.headline = "Relative growth advantage";
     this.width = "100%";
     this.height = "700px";
     this.lapisDateField = "date";
+    this.yAxisMaxLinear = 1;
+    this.yAxisMaxLogarithmic = 1;
   }
   render() {
     return /* @__PURE__ */ u$1(
       RelativeGrowthAdvantage,
       {
-        numerator: this.numerator,
-        denominator: this.denominator,
+        numeratorFilter: this.numeratorFilter,
+        denominatorFilter: this.denominatorFilter,
         generationTime: this.generationTime,
         views: this.views,
         width: this.width,
         height: this.height,
         headline: this.headline,
-        lapisDateField: this.lapisDateField
+        lapisDateField: this.lapisDateField,
+        yAxisMaxConfig: {
+          linear: this.yAxisMaxLinear,
+          logarithmic: this.yAxisMaxLogarithmic
+        }
       }
     );
   }
 };
 __decorateClass$5([
   n2({ type: Object })
-], RelativeGrowthAdvantageComponent.prototype, "numerator", 2);
+], RelativeGrowthAdvantageComponent.prototype, "numeratorFilter", 2);
 __decorateClass$5([
   n2({ type: Object })
-], RelativeGrowthAdvantageComponent.prototype, "denominator", 2);
+], RelativeGrowthAdvantageComponent.prototype, "denominatorFilter", 2);
 __decorateClass$5([
   n2({ type: Number })
 ], RelativeGrowthAdvantageComponent.prototype, "generationTime", 2);
@@ -7262,10 +7447,16 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "lapisDateField", 2);
+__decorateClass$5([
+  n2({ type: String })
+], RelativeGrowthAdvantageComponent.prototype, "yAxisMaxLinear", 2);
+__decorateClass$5([
+  n2({ type: String })
+], RelativeGrowthAdvantageComponent.prototype, "yAxisMaxLogarithmic", 2);
 RelativeGrowthAdvantageComponent = __decorateClass$5([
   t$2("gs-relative-growth-advantage")
 ], RelativeGrowthAdvantageComponent);
-const AggregateTable = ({ data, fields }) => {
+const AggregateTable = ({ data, fields, pageSize }) => {
   const headers = [
     ...fields.map((field) => {
       return {
@@ -7283,7 +7474,7 @@ const AggregateTable = ({ data, fields }) => {
       formatter: (cell) => formatProportion(cell)
     }
   ];
-  return /* @__PURE__ */ u$1(Table, { data, columns: headers, pagination: true });
+  return /* @__PURE__ */ u$1(Table, { data, columns: headers, pageSize });
 };
 const compareAscending = (a2, b3) => {
   if (typeof a2 === "number" && typeof b3 === "number") {
@@ -7293,12 +7484,12 @@ const compareAscending = (a2, b3) => {
   const strB = b3 != null ? String(b3) : "";
   return strA.localeCompare(strB);
 };
-async function queryAggregateData(variant, fields, lapis, initialSort = { field: "count", direction: "descending" }, signal) {
+async function queryAggregateData(lapisFilter, fields, lapis, initialSort = { field: "count", direction: "descending" }, signal) {
   const validSortFields = ["count", "proportion", ...fields];
   if (!validSortFields.includes(initialSort.field)) {
     throw new Error(`InitialSort field not in fields. Valid fields are: ${validSortFields.join(", ")}`);
   }
-  const fetchData = new FetchAggregatedOperator(variant, fields);
+  const fetchData = new FetchAggregatedOperator(lapisFilter, fields);
   const sortData = new SortOperator(fetchData, (a2, b3) => {
     return initialSort.direction === "ascending" ? compareAscending(a2[initialSort.field], b3[initialSort.field]) : compareAscending(b3[initialSort.field], a2[initialSort.field]);
   });
@@ -7318,6 +7509,7 @@ const Aggregate = ({
   headline = "Mutations",
   filter,
   fields,
+  pageSize,
   initialSortField,
   initialSortDirection
 }) => {
@@ -7329,7 +7521,8 @@ const Aggregate = ({
       filter,
       views,
       initialSortField,
-      initialSortDirection
+      initialSortDirection,
+      pageSize
     }
   ) }) }) });
 };
@@ -7338,7 +7531,8 @@ const AggregateInner = ({
   views,
   filter,
   initialSortField,
-  initialSortDirection
+  initialSortDirection,
+  pageSize
 }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
@@ -7353,15 +7547,15 @@ const AggregateInner = ({
   if (data === null) {
     return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(AggregatedDataTabs, { data, views, fields });
+  return /* @__PURE__ */ u$1(AggregatedDataTabs, { data, views, fields, pageSize });
 };
-const AggregatedDataTabs = ({ data, views, fields }) => {
+const AggregatedDataTabs = ({ data, views, fields, pageSize }) => {
   const getTab = (view) => {
     switch (view) {
       case "table":
         return {
           title: "Table",
-          content: /* @__PURE__ */ u$1(AggregateTable, { data, fields })
+          content: /* @__PURE__ */ u$1(AggregateTable, { data, fields, pageSize })
         };
     }
   };
@@ -7381,8 +7575,7 @@ var __decorateClass$4 = (decorators, target, key, kind) => {
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$4(target, key, result);
+  if (kind && result) __defProp$4(target, key, result);
   return result;
 };
 let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -7396,6 +7589,7 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.headline = "Aggregate";
     this.initialSortField = "count";
     this.initialSortDirection = "descending";
+    this.pageSize = false;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -7408,7 +7602,8 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
         height: this.height,
         headline: this.headline,
         initialSortField: this.initialSortField,
-        initialSortDirection: this.initialSortDirection
+        initialSortDirection: this.initialSortDirection,
+        pageSize: this.pageSize
       }
     );
   }
@@ -7437,6 +7632,9 @@ __decorateClass$4([
 __decorateClass$4([
   n2({ type: String })
 ], AggregateComponent.prototype, "initialSortDirection", 2);
+__decorateClass$4([
+  n2({ type: Object })
+], AggregateComponent.prototype, "pageSize", 2);
 AggregateComponent = __decorateClass$4([
   t$2("gs-aggregate")
 ], AggregateComponent);
@@ -7724,8 +7922,7 @@ var __decorateClass$3 = (decorators, target, key, kind) => {
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$3(target, key, result);
+  if (kind && result) __defProp$3(target, key, result);
   return result;
 };
 let DateRangeSelectorComponent = class extends PreactLitAdapter {
@@ -7821,11 +8018,16 @@ function compareLocationEntries(fields) {
     return 0;
   };
 }
-const LocationFilter = ({ width, initialValue, fields }) => {
+const LocationFilter = ({
+  width,
+  initialValue,
+  fields,
+  placeholderText
+}) => {
   const size2 = { width, height: "3rem" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(LocationFilterInner, { initialValue, fields }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(LocationFilterInner, { initialValue, fields, placeholderText }) }) });
 };
-const LocationFilterInner = ({ initialValue, fields }) => {
+const LocationFilterInner = ({ initialValue, fields, placeholderText }) => {
   const lapis = P(LapisUrlContext);
   const [value, setValue] = p(initialValue ?? "");
   const [unknownLocation, setUnknownLocation] = p(false);
@@ -7866,7 +8068,8 @@ const LocationFilterInner = ({ initialValue, fields }) => {
         class: `input input-bordered grow ${unknownLocation ? "border-2 border-error" : ""}`,
         value,
         onInput,
-        list: "countries"
+        list: "countries",
+        placeholder: placeholderText
       }
     ),
     /* @__PURE__ */ u$1("datalist", { id: "countries", children: data == null ? void 0 : data.map((v2) => {
@@ -7897,8 +8100,7 @@ var __decorateClass$2 = (decorators, target, key, kind) => {
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$2(target, key, result);
+  if (kind && result) __defProp$2(target, key, result);
   return result;
 };
 let LocationFilterComponent = class extends PreactLitAdapter {
@@ -7907,9 +8109,18 @@ let LocationFilterComponent = class extends PreactLitAdapter {
     this.initialValue = "";
     this.fields = [];
     this.width = "100%";
+    this.placeholderText = "";
   }
   render() {
-    return /* @__PURE__ */ u$1(LocationFilter, { initialValue: this.initialValue, fields: this.fields, width: this.width });
+    return /* @__PURE__ */ u$1(
+      LocationFilter,
+      {
+        initialValue: this.initialValue,
+        fields: this.fields,
+        width: this.width,
+        placeholderText: this.placeholderText
+      }
+    );
   }
 };
 __decorateClass$2([
@@ -7921,6 +8132,9 @@ __decorateClass$2([
 __decorateClass$2([
   n2({ type: String })
 ], LocationFilterComponent.prototype, "width", 2);
+__decorateClass$2([
+  n2()
+], LocationFilterComponent.prototype, "placeholderText", 2);
 LocationFilterComponent = __decorateClass$2([
   t$2("gs-location-filter")
 ], LocationFilterComponent);
@@ -7992,8 +8206,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp$1(target, key, result);
+  if (kind && result) __defProp$1(target, key, result);
   return result;
 };
 let TextInputComponent = class extends PreactLitAdapter {
@@ -8359,8 +8572,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 let MutationFilterComponent = class extends PreactLitAdapter {