@genspectrum/dashboard-components 0.4.3 → 0.4.5

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);
@@ -1714,15 +1693,25 @@ const MutationComparison = ({
   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,
+    {
+      variants,
+      sequenceType,
+      views,
+      pageSize
+    }
+  ) }) }) });
 };
 const MutationComparisonInner = ({
   variants,
   sequenceType,
-  views
+  views,
+  pageSize
 }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
@@ -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
             }
           )
         };
@@ -4579,8 +4582,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,8 +4622,7 @@ 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 {
@@ -4633,6 +4634,7 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
     this.width = "100%";
     this.height = "700px";
     this.headline = "Mutation comparison";
+    this.pageSize = false;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -4643,7 +4645,8 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
         views: this.views,
         width: this.width,
         height: this.height,
-        headline: this.headline
+        headline: this.headline,
+        pageSize: this.pageSize
       }
     );
   }
@@ -4666,6 +4669,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 +4764,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 +4822,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 +4833,7 @@ const sortInsertions = (a2, b3) => {
   }
   return a2.insertedSymbols.localeCompare(b3.insertedSymbols);
 };
-const InsertionsTable = ({ data }) => {
+const InsertionsTable = ({ data, pageSize }) => {
   const getHeaders = () => {
     return [
       {
@@ -4841,9 +4852,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 +4882,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) {
@@ -4933,12 +4944,13 @@ const Mutations = ({
   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, { variant, sequenceType, views, pageSize }) }) }) });
 };
-const MutationsInner = ({ variant, sequenceType, views }) => {
+const MutationsInner = ({ variant, sequenceType, views, pageSize }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationsData(variant, sequenceType, lapis);
@@ -4952,9 +4964,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 +4979,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 +4996,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,8 +5084,7 @@ 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 {
@@ -5077,6 +5096,7 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.width = "100%";
     this.height = "700px";
     this.headline = "Mutations";
+    this.pageSize = false;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -5087,7 +5107,8 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
         views: this.views,
         width: this.width,
         height: this.height,
-        headline: this.headline
+        headline: this.headline,
+        pageSize: this.pageSize
       }
     );
   }
@@ -5110,6 +5131,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);
@@ -5317,8 +5341,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 +5352,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 +5397,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 +5416,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 +5443,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 +5499,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 +5564,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 +5604,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 +5727,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() {
@@ -6319,7 +6331,7 @@ const tooltip$1 = (confidenceIntervalMethod) => {
       return generalConfig;
   }
 };
-const PrevalenceOverTimeTable = ({ data, granularity }) => {
+const PrevalenceOverTimeTable = ({ data, granularity, pageSize }) => {
   const getSplitColumns = (data2) => {
     return data2.map((dataset) => ({
       name: dataset.displayName,
@@ -6347,7 +6359,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) {
@@ -6663,7 +6675,8 @@ const PrevalenceOverTime = ({
   width,
   height,
   headline = "Prevalence over time",
-  lapisDateField
+  lapisDateField,
+  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(
@@ -6675,7 +6688,8 @@ const PrevalenceOverTime = ({
       smoothingWindow,
       views,
       confidenceIntervalMethods,
-      lapisDateField
+      lapisDateField,
+      pageSize
     }
   ) }) }) });
 };
@@ -6686,7 +6700,8 @@ const PrevalenceOverTimeInner = ({
   smoothingWindow,
   views,
   confidenceIntervalMethods,
-  lapisDateField
+  lapisDateField,
+  pageSize
 }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(
@@ -6708,7 +6723,8 @@ const PrevalenceOverTimeInner = ({
       views,
       data,
       granularity,
-      confidenceIntervalMethods
+      confidenceIntervalMethods,
+      pageSize
     }
   );
 };
@@ -6716,7 +6732,8 @@ const PrevalenceOverTimeTabs = ({
   views,
   data,
   granularity,
-  confidenceIntervalMethods
+  confidenceIntervalMethods,
+  pageSize
 }) => {
   const [yAxisScaleType, setYAxisScaleType] = p("linear");
   const [confidenceIntervalMethod, setConfidenceIntervalMethod] = p(
@@ -6756,7 +6773,7 @@ const PrevalenceOverTimeTabs = ({
       case "table":
         return {
           title: "Table",
-          content: /* @__PURE__ */ u$1(PrevalenceOverTimeTable, { data, granularity })
+          content: /* @__PURE__ */ u$1(PrevalenceOverTimeTable, { data, granularity, pageSize })
         };
     }
   };
@@ -6820,8 +6837,7 @@ 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 {
@@ -6837,6 +6853,7 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     this.width = "100%";
     this.height = "700px";
     this.lapisDateField = "date";
+    this.pageSize = false;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -6851,7 +6868,8 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         width: this.width,
         height: this.height,
         headline: this.headline,
-        lapisDateField: this.lapisDateField
+        lapisDateField: this.lapisDateField,
+        pageSize: this.pageSize
       }
     );
   }
@@ -6886,6 +6904,9 @@ __decorateClass$6([
 __decorateClass$6([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "lapisDateField", 2);
+__decorateClass$6([
+  n2({ type: Object })
+], PrevalenceOverTimeComponent.prototype, "pageSize", 2);
 PrevalenceOverTimeComponent = __decorateClass$6([
   t$2("gs-prevalence-over-time")
 ], PrevalenceOverTimeComponent);
@@ -7206,8 +7227,7 @@ 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 {
@@ -7265,7 +7285,7 @@ __decorateClass$5([
 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,11 +7303,26 @@ 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") {
+    return a2 - b3;
+  }
+  const strA = a2 != null ? String(a2) : "";
+  const strB = b3 != null ? String(b3) : "";
+  return strA.localeCompare(strB);
 };
-async function queryAggregateData(variant, fields, lapis, signal) {
+async function queryAggregateData(variant, 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 data = (await fetchData.evaluate(lapis, signal)).content;
+  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]);
+  });
+  const data = (await sortData.evaluate(lapis, signal)).content;
   const total = data.reduce((acc, row) => acc + row.count, 0);
   return data.map(
     (row) => ({
@@ -7302,15 +7337,35 @@ const Aggregate = ({
   height,
   headline = "Mutations",
   filter,
-  fields
+  fields,
+  pageSize,
+  initialSortField,
+  initialSortDirection
 }) => {
   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(AggregateInner, { fields, filter, 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(
+    AggregateInner,
+    {
+      fields,
+      filter,
+      views,
+      initialSortField,
+      initialSortDirection,
+      pageSize
+    }
+  ) }) }) });
 };
-const AggregateInner = ({ fields, views, filter }) => {
+const AggregateInner = ({
+  fields,
+  views,
+  filter,
+  initialSortField,
+  initialSortDirection,
+  pageSize
+}) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
-    return queryAggregateData(filter, fields, lapis);
+    return queryAggregateData(filter, fields, lapis, { field: initialSortField, direction: initialSortDirection });
   }, [filter, fields, lapis]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -7321,15 +7376,15 @@ const AggregateInner = ({ fields, views, filter }) => {
   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 })
         };
     }
   };
@@ -7349,8 +7404,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 {
@@ -7362,6 +7416,9 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.width = "100%";
     this.height = "700px";
     this.headline = "Aggregate";
+    this.initialSortField = "count";
+    this.initialSortDirection = "descending";
+    this.pageSize = false;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -7372,7 +7429,10 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
         filter: this.filter,
         width: this.width,
         height: this.height,
-        headline: this.headline
+        headline: this.headline,
+        initialSortField: this.initialSortField,
+        initialSortDirection: this.initialSortDirection,
+        pageSize: this.pageSize
       }
     );
   }
@@ -7395,6 +7455,15 @@ __decorateClass$4([
 __decorateClass$4([
   n2({ type: String })
 ], AggregateComponent.prototype, "headline", 2);
+__decorateClass$4([
+  n2({ type: String })
+], AggregateComponent.prototype, "initialSortField", 2);
+__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);
@@ -7682,8 +7751,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 {
@@ -7779,11 +7847,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);
@@ -7824,7 +7897,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) => {
@@ -7855,8 +7929,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 {
@@ -7865,9 +7938,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([
@@ -7879,6 +7961,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);
@@ -7950,8 +8035,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 {
@@ -8317,8 +8401,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 {