@genspectrum/dashboard-components 0.16.4 → 0.17.1

package/dist/components.js

@@ -7,10 +7,11 @@ import DOMPurify from "dompurify";
 import { useRef, Grid } from "gridjs";
 import { Chart, registerables, Scale, BarController } from "chart.js";
 import { VennDiagramController, ArcSlice, extractSets } from "chartjs-chart-venn";
-import { v as views, s as sequenceTypeSchema, n as namedLapisFilterSchema, l as lapisFilterSchema, t as temporalGranularitySchema, b as dateRangeValueSchema, c as dateRangeOptionSchema, e as toYYYYMMDD, D as DateRangeOptionChangedEvent, f as lapisLocationFilterSchema, L as LocationChangedEvent, T as TextFilterChangedEvent, m as mutationsFilterSchema, a as LineageFilterChangedEvent } from "./LineageFilterChangedEvent-COWV-Y0k.js";
+import { v as views, s as sequenceTypeSchema, n as namedLapisFilterSchema, l as lapisFilterSchema, t as temporalGranularitySchema, b as dateRangeValueSchema, c as dateRangeOptionSchema, e as toYYYYMMDD, D as DateRangeOptionChangedEvent, f as lapisLocationFilterSchema, L as LocationChangedEvent, T as TextFilterChangedEvent, m as mutationsFilterSchema, a as LineageFilterChangedEvent } from "./LineageFilterChangedEvent-DkvWdq_G.js";
 import { autoUpdate, computePosition, offset, shift, flip } from "@floating-ui/dom";
 import { ReactiveElement } from "@lit/reactive-element";
 import { BarWithErrorBarsController, BarWithErrorBar } from "chartjs-chart-error-bars";
+import { createTable, createColumnHelper, getPaginationRowModel, getCoreRowModel } from "@tanstack/table-core";
 import { map, geoJson } from "leaflet";
 import * as topojson from "topojson-client";
 import flatpickr from "flatpickr";
@@ -3100,16 +3101,22 @@ html {
     --tw-text-opacity: 1;
   }
 
+  .\\!table tr.hover:hover,
+  .\\!table tr.hover:nth-child(even):hover {
+    --tw-bg-opacity: 1 !important;
+    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
+  }
+
   .table tr.hover:hover,
   .table tr.hover:nth-child(even):hover {
     --tw-bg-opacity: 1;
     background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
   }
 
-  .table-zebra tr.hover:hover,
-  .table-zebra tr.hover:nth-child(even):hover {
-    --tw-bg-opacity: 1;
-    background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
+  .\\!table tr.hover:hover,
+  .\\!table tr.hover:nth-child(even):hover {
+    --tw-bg-opacity: 1 !important;
+    background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
   }
 }
 .btn {
@@ -3310,6 +3317,106 @@ html {
     }
   }
 
+  .btn-outline:hover {
+    --tw-border-opacity: 1;
+    border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+    --tw-bg-opacity: 1;
+    background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
+    --tw-text-opacity: 1;
+    color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)));
+  }
+
+  .btn-outline.btn-primary:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+
+    .btn-outline.btn-primary:hover {
+      background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
+    }
+  }
+
+  .btn-outline.btn-secondary:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+
+    .btn-outline.btn-secondary:hover {
+      background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
+    }
+  }
+
+  .btn-outline.btn-accent:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+
+    .btn-outline.btn-accent:hover {
+      background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
+    }
+  }
+
+  .btn-outline.btn-success:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+
+    .btn-outline.btn-success:hover {
+      background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
+    }
+  }
+
+  .btn-outline.btn-info:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+
+    .btn-outline.btn-info:hover {
+      background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
+    }
+  }
+
+  .btn-outline.btn-warning:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+
+    .btn-outline.btn-warning:hover {
+      background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
+    }
+  }
+
+  .btn-outline.btn-error:hover {
+    --tw-text-opacity: 1;
+    color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
+  }
+
+  @supports (color: color-mix(in oklab, black, black)) {
+
+    .btn-outline.btn-error:hover {
+      background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
+      border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
+    }
+  }
+
   .btn-disabled:hover,
     .btn[disabled]:hover,
     .btn:disabled:hover {
@@ -3756,6 +3863,14 @@ input.tab:checked + .tab-content,
 :is(.tab-active, [aria-selected="true"]) + .tab-content {
   display: block;
 }
+.\\!table {
+  position: relative !important;
+  width: 100% !important;
+  border-radius: var(--rounded-box, 1rem) !important;
+  text-align: left !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+}
 .table {
   position: relative;
   width: 100%;
@@ -3764,6 +3879,13 @@ input.tab:checked + .tab-content,
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
+.\\!table :where(.table-pin-rows thead tr) {
+  position: sticky !important;
+  top: 0px !important;
+  z-index: 1 !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important;
+}
 .table :where(.table-pin-rows thead tr) {
   position: sticky;
   top: 0px;
@@ -3771,6 +3893,13 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.\\!table :where(.table-pin-rows tfoot tr) {
+  position: sticky !important;
+  bottom: 0px !important;
+  z-index: 1 !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important;
+}
 .table :where(.table-pin-rows tfoot tr) {
   position: sticky;
   bottom: 0px;
@@ -3778,6 +3907,13 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.\\!table :where(.table-pin-cols tr th) {
+  position: sticky !important;
+  left: 0px !important;
+  right: 0px !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity))) !important;
+}
 .table :where(.table-pin-cols tr th) {
   position: sticky;
   left: 0px;
@@ -3851,6 +3987,43 @@ input.tab:checked + .tab-content,
     border-color: var(--btn-color, var(--fallback-b2));
   }
 }
+@supports (color: color-mix(in oklab, black, black)) {
+
+  .btn-outline.btn-primary.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-p,oklch(var(--p)/1)) 90%, black);
+  }
+
+  .btn-outline.btn-secondary.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-s,oklch(var(--s)/1)) 90%, black);
+  }
+
+  .btn-outline.btn-accent.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-a,oklch(var(--a)/1)) 90%, black);
+  }
+
+  .btn-outline.btn-success.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-su,oklch(var(--su)/1)) 90%, black);
+  }
+
+  .btn-outline.btn-info.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-in,oklch(var(--in)/1)) 90%, black);
+  }
+
+  .btn-outline.btn-warning.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-wa,oklch(var(--wa)/1)) 90%, black);
+  }
+
+  .btn-outline.btn-error.btn-active {
+    background-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
+    border-color: color-mix(in oklab, var(--fallback-er,oklch(var(--er)/1)) 90%, black);
+  }
+}
 .btn:focus-visible {
   outline-style: solid;
   outline-width: 2px;
@@ -3880,6 +4053,79 @@ input.tab:checked + .tab-content,
   border-color: transparent;
   background-color: var(--fallback-bc,oklch(var(--bc)/0.2));
 }
+.btn-outline {
+  border-color: currentColor;
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.btn-outline.btn-active {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-primary {
+  --tw-text-opacity: 1;
+  color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-primary.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-secondary {
+  --tw-text-opacity: 1;
+  color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-secondary.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-accent {
+  --tw-text-opacity: 1;
+  color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-accent.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-success {
+  --tw-text-opacity: 1;
+  color: var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-success.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-info {
+  --tw-text-opacity: 1;
+  color: var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-info.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-warning {
+  --tw-text-opacity: 1;
+  color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-warning.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-error {
+  --tw-text-opacity: 1;
+  color: var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)));
+}
+.btn-outline.btn-error.btn-active {
+  --tw-text-opacity: 1;
+  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
+}
 .btn.btn-disabled,
   .btn[disabled],
   .btn:disabled {
@@ -4052,6 +4298,9 @@ input.tab:checked + .tab-content,
 .join > :where(*:not(:first-child)):is(.btn) {
   margin-inline-start: calc(var(--border-btn) * -1);
 }
+.join-item:focus {
+  isolation: isolate;
+}
 .link:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -4615,9 +4864,19 @@ input.tab:checked + .tab-content,
 .tabs-boxed .tab {
   border-radius: var(--rounded-btn, 0.5rem);
 }
+.\\!table:where([dir="rtl"], [dir="rtl"] *) {
+  text-align: right !important;
+}
 .table:where([dir="rtl"], [dir="rtl"] *) {
   text-align: right;
 }
+.\\!table :where(th, td) {
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+  padding-top: 0.75rem !important;
+  padding-bottom: 0.75rem !important;
+  vertical-align: middle !important;
+}
 .table :where(th, td) {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -4625,23 +4884,45 @@ input.tab:checked + .tab-content,
   padding-bottom: 0.75rem;
   vertical-align: middle;
 }
+.\\!table tr.active,
+  .\\!table tr.active:nth-child(even) {
+  --tw-bg-opacity: 1 !important;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
+}
 .table tr.active,
   .table tr.active:nth-child(even),
   .table-zebra tbody tr:nth-child(even) {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
+.\\!table tr.active,
+  .\\!table tr.active:nth-child(even) {
+  --tw-bg-opacity: 1 !important;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity))) !important;
+}
 .table-zebra tr.active,
     .table-zebra tr.active:nth-child(even),
     .table-zebra-zebra tbody tr:nth-child(even) {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
 }
+.\\!table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
+  border-bottom-width: 1px !important;
+  --tw-border-opacity: 1 !important;
+  border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))) !important;
+}
 .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)));
 }
+.\\!table :where(thead, tfoot) {
+  white-space: nowrap !important;
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
+  font-weight: 700 !important;
+  color: var(--fallback-bc,oklch(var(--bc)/0.6)) !important;
+}
 .table :where(thead, tfoot) {
   white-space: nowrap;
   font-size: 0.75rem;
@@ -4649,6 +4930,11 @@ input.tab:checked + .tab-content,
   font-weight: 700;
   color: var(--fallback-bc,oklch(var(--bc)/0.6));
 }
+.\\!table :where(tfoot) {
+  border-top-width: 1px !important;
+  --tw-border-opacity: 1 !important;
+  border-top-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity))) !important;
+}
 .table :where(tfoot) {
   border-top-width: 1px;
   --tw-border-opacity: 1;
@@ -5130,6 +5416,9 @@ input.tab:checked + .tab-content,
 .right-0 {
   right: 0px;
 }
+.right-10 {
+  right: 2.5rem;
+}
 .right-2 {
   right: 0.5rem;
 }
@@ -5222,6 +5511,9 @@ input.tab:checked + .tab-content,
 .mt-1 {
   margin-top: 0.25rem;
 }
+.mt-2 {
+  margin-top: 0.5rem;
+}
 .mt-4 {
   margin-top: 1rem;
 }
@@ -5237,6 +5529,9 @@ input.tab:checked + .tab-content,
 .inline-flex {
   display: inline-flex;
 }
+.\\!table {
+  display: table !important;
+}
 .table {
   display: table;
 }
@@ -5279,9 +5574,6 @@ input.tab:checked + .tab-content,
 .w-\\[6rem\\] {
   width: 6rem;
 }
-.w-\\[7\\.5rem\\] {
-  width: 7.5rem;
-}
 .w-full {
   width: 100%;
 }
@@ -5289,9 +5581,15 @@ input.tab:checked + .tab-content,
   width: -moz-max-content;
   width: max-content;
 }
+.min-w-24 {
+  min-width: 6rem;
+}
 .min-w-32 {
   min-width: 8rem;
 }
+.min-w-\\[0\\.05rem\\] {
+  min-width: 0.05rem;
+}
 .min-w-\\[180px\\] {
   min-width: 180px;
 }
@@ -5310,6 +5608,10 @@ input.tab:checked + .tab-content,
 .grow {
   flex-grow: 1;
 }
+.-translate-y-1\\/2 {
+  --tw-translate-y: -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));
+}
 .translate-x-\\[-50\\%\\] {
   --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));
@@ -5353,6 +5655,9 @@ input.tab:checked + .tab-content,
 .items-center {
   align-items: center;
 }
+.justify-end {
+  justify-content: flex-end;
+}
 .justify-center {
   justify-content: center;
 }
@@ -5368,6 +5673,9 @@ input.tab:checked + .tab-content,
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-4 {
+  gap: 1rem;
+}
 .gap-y-1 {
   row-gap: 0.25rem;
 }
@@ -5408,12 +5716,27 @@ input.tab:checked + .tab-content,
   border-bottom-right-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
 }
+.rounded-b-none {
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.rounded-t-md {
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+}
+.rounded-t-none {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
 .rounded-tr-md {
   border-top-right-radius: 0.375rem;
 }
 .border {
   border-width: 1px;
 }
+.border-0 {
+  border-width: 0px;
+}
 .border-2 {
   border-width: 2px;
 }
@@ -5455,6 +5778,9 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
 }
+.bg-transparent {
+  background-color: transparent;
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -5499,8 +5825,8 @@ input.tab:checked + .tab-content,
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.pl-2 {
-  padding-left: 0.5rem;
+.pr-14 {
+  padding-right: 3.5rem;
 }
 .text-center {
   text-align: center;
@@ -5541,9 +5867,6 @@ input.tab:checked + .tab-content,
 .font-normal {
   font-weight: 400;
 }
-.font-semibold {
-  font-weight: 600;
-}
 .leading-5 {
   line-height: 1.25rem;
 }
@@ -5620,6 +5943,12 @@ input.tab:checked + .tab-content,
 .\\@container {
   container-type: inline-size;
 }
+.mdi--chevron-left {
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z'/%3E%3C/svg%3E");
+}
+.mdi--chevron-right {
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E");
+}
 .mdi--fullscreen {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5 5h5v2H7v3H5zm9 0h5v5h-2V7h-3zm3 9h2v5h-5v-2h3zm-7 3v2H5v-5h2v3z'/%3E%3C/svg%3E");
 }
@@ -5629,6 +5958,12 @@ input.tab:checked + .tab-content,
 .mdi--reload {
   --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M2 12a9 9 0 0 0 9 9c2.39 0 4.68-.94 6.4-2.6l-1.5-1.5A6.7 6.7 0 0 1 11 19c-6.24 0-9.36-7.54-4.95-11.95S18 5.77 18 12h-3l4 4h.1l3.9-4h-3a9 9 0 0 0-18 0'/%3E%3C/svg%3E");
 }
+.mdi--chevron-left-first {
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6l6 6zM6 6h2v12H6z'/%3E%3C/svg%3E");
+}
+.mdi--chevron-right-last {
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6l-6-6zM16 6h2v12h-2z'/%3E%3C/svg%3E");
+}
 @media (min-width: 640px) {
 
   .sm\\:modal-middle {
@@ -5700,6 +6035,51 @@ input.tab:checked + .tab-content,
     visibility: visible;
   }
 }
+@container (min-width: 14rem) {
+
+  .\\@4xs\\:flex-row {
+    flex-direction: row;
+  }
+
+  .\\@4xs\\:rounded-l-none {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  .\\@4xs\\:rounded-bl-md {
+    border-bottom-left-radius: 0.375rem;
+  }
+
+  .\\@4xs\\:rounded-tr-none {
+    border-top-right-radius: 0px;
+  }
+}
+@container (min-width: 28rem) {
+
+  .\\@md\\:flex-row {
+    flex-direction: row;
+  }
+
+  .\\@md\\:rounded-l-md {
+    border-top-left-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+
+  .\\@md\\:rounded-l-none {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  .\\@md\\:rounded-r-md {
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+
+  .\\@md\\:rounded-r-none {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+}
 @media (min-width: 640px) {
 
   .sm\\:max-w-5xl {
@@ -9798,96 +10178,236 @@ const Tooltip = ({ children, content, position = "bottom" }) => {
     )
   ] });
 };
-const MAX_NUMBER_OF_GRID_ROWS = 100;
-const MUTATION_CELL_WIDTH_REM = 8;
+const pageSizesSchema = z$2.union([z$2.array(z$2.number()), z$2.number()]);
+function Pagination({
+  table,
+  pageSizes
+}) {
+  return /* @__PURE__ */ u$1("div", { className: "flex items-center gap-4 justify-end flex-wrap", children: [
+    /* @__PURE__ */ u$1(PageSizeSelector, { table, pageSizes }),
+    /* @__PURE__ */ u$1(PageIndicator, { table }),
+    /* @__PURE__ */ u$1(GotoPageSelector, { table }),
+    /* @__PURE__ */ u$1(SelectPageButtons, { table })
+  ] });
+}
+function PageIndicator({ table }) {
+  if (table.getRowModel().rows.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ u$1("span", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ u$1("div", { children: "Page" }),
+    /* @__PURE__ */ u$1("strong", { children: [
+      table.getState().pagination.pageIndex + 1,
+      " of ",
+      table.getPageCount().toLocaleString()
+    ] })
+  ] });
+}
+function PageSizeSelector({
+  table,
+  pageSizes
+}) {
+  if (typeof pageSizes === "number" || pageSizes.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ u$1("label", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ u$1("div", { className: "text-nowrap", children: "Rows per page:" }),
+    /* @__PURE__ */ u$1(
+      "select",
+      {
+        className: "select",
+        value: table.getState().pagination.pageSize,
+        onChange: (e2) => {
+          var _a;
+          table.setPageSize(Number((_a = e2.currentTarget) == null ? void 0 : _a.value));
+        },
+        "aria-label": "Select number of rows per page",
+        children: pageSizes.map((pageSize) => /* @__PURE__ */ u$1("option", { value: pageSize, children: pageSize }, pageSize))
+      }
+    )
+  ] });
+}
+function GotoPageSelector({ table }) {
+  if (table.getRowModel().rows.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ u$1("label", { className: "flex items-center", children: [
+    "Go to page:",
+    /* @__PURE__ */ u$1(
+      "input",
+      {
+        type: "number",
+        min: "1",
+        max: table.getPageCount(),
+        defaultValue: table.getState().pagination.pageIndex + 1,
+        onChange: (e2) => {
+          const page = e2.currentTarget.value ? Number(e2.currentTarget.value) - 1 : 0;
+          table.setPageIndex(page);
+        },
+        className: "input",
+        "aria-label": "Enter page number to go to"
+      }
+    )
+  ] });
+}
+function SelectPageButtons({ table }) {
+  return /* @__PURE__ */ u$1("div", { className: "join", role: "group", "aria-label": "Pagination controls", children: [
+    /* @__PURE__ */ u$1(
+      "button",
+      {
+        className: "btn btn-outline join-item btn-sm",
+        onClick: () => table.firstPage(),
+        disabled: !table.getCanPreviousPage(),
+        "aria-label": "First page",
+        children: /* @__PURE__ */ u$1("div", { className: "iconify mdi--chevron-left-first" })
+      }
+    ),
+    /* @__PURE__ */ u$1(
+      "button",
+      {
+        className: "btn btn-outline join-item btn-sm",
+        onClick: () => table.previousPage(),
+        disabled: !table.getCanPreviousPage(),
+        "aria-label": "Previous page",
+        children: /* @__PURE__ */ u$1("div", { className: "iconify mdi--chevron-left" })
+      }
+    ),
+    /* @__PURE__ */ u$1(
+      "button",
+      {
+        className: "btn btn-outline join-item btn-sm",
+        onClick: () => table.nextPage(),
+        disabled: !table.getCanNextPage(),
+        "aria-label": "Next page",
+        children: /* @__PURE__ */ u$1("div", { className: "iconify mdi--chevron-right" })
+      }
+    ),
+    /* @__PURE__ */ u$1(
+      "button",
+      {
+        className: "btn btn-outline join-item btn-sm",
+        onClick: () => table.lastPage(),
+        disabled: !table.getCanNextPage(),
+        "aria-label": "Last page",
+        children: /* @__PURE__ */ u$1("div", { className: "iconify mdi--chevron-right-last" })
+      }
+    )
+  ] });
+}
+function flexRender(Comp, props) {
+  return !Comp ? null : typeof Comp === "function" ? /* @__PURE__ */ u$1(Comp, { ...props }) : Comp;
+}
+function usePreactTable(options2) {
+  const resolvedOptions = {
+    state: {},
+    onStateChange: () => {
+    },
+    renderFallbackValue: null,
+    ...options2
+  };
+  const [tableRef] = d(() => ({
+    current: createTable(resolvedOptions)
+  }));
+  const [state, setState] = d(() => tableRef.current.initialState);
+  tableRef.current.setOptions((prev) => ({
+    ...prev,
+    ...options2,
+    state: {
+      ...state,
+      ...options2.state
+    },
+    onStateChange: (updater) => {
+      var _a;
+      setState(updater);
+      (_a = options2.onStateChange) == null ? void 0 : _a.call(options2, updater);
+    }
+  }));
+  return tableRef.current;
+}
 const MutationsOverTimeGrid = ({
   data,
   colorScale,
-  maxNumberOfGridRows,
-  sequenceType
+  sequenceType,
+  pageSizes
 }) => {
-  const currentMaxNumberOfGridRows = maxNumberOfGridRows ?? MAX_NUMBER_OF_GRID_ROWS;
-  const allMutations = data.getFirstAxisKeys();
-  const shownMutations = allMutations.slice(0, currentMaxNumberOfGridRows);
-  const dates = data.getSecondAxisKeys();
-  const gridRef = A$1(null);
-  return /* @__PURE__ */ u$1(Fragment, { children: [
-    allMutations.length > currentMaxNumberOfGridRows && /* @__PURE__ */ u$1("div", { className: "pl-2", children: [
-      "Showing ",
-      currentMaxNumberOfGridRows,
-      " of ",
-      allMutations.length,
-      " mutations. You can narrow the filter to reduce the number of mutations."
-    ] }),
-    allMutations.length === 0 ? /* @__PURE__ */ u$1("div", { className: "flex justify-center", children: "No data available for your filters." }) : /* @__PURE__ */ u$1(
-      "div",
-      {
-        ref: gridRef,
-        style: {
-          display: "grid",
-          gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
-          gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`
-        },
-        className: "text-center",
-        children: [
-          dates.map((date, columnIndex) => /* @__PURE__ */ u$1(
-            "div",
+  const tableData = T$1(() => {
+    const allMutations = data.getFirstAxisKeys();
+    return data.getAsArray().map((row, index) => {
+      return { mutation: allMutations[index], values: [...row] };
+    });
+  }, [data]);
+  const [pagination, setPagination] = d({
+    pageIndex: 0,
+    pageSize: typeof pageSizes === "number" ? pageSizes : pageSizes.at(0) ?? 10
+  });
+  const columns = T$1(() => {
+    const columnHelper = createColumnHelper();
+    const dates = data.getSecondAxisKeys();
+    const mutationHeader = columnHelper.accessor((row) => row.mutation, {
+      id: "mutation",
+      header: () => /* @__PURE__ */ u$1("span", { children: "Mutation" }),
+      cell: ({ getValue }) => {
+        const value = getValue();
+        return /* @__PURE__ */ u$1("div", { className: "text-center", children: /* @__PURE__ */ u$1(AnnotatedMutation, { mutation: value, sequenceType }) });
+      }
+    });
+    const dateHeaders = dates.map((date, index) => {
+      return columnHelper.accessor((row) => row.values[index], {
+        id: `date-${index}`,
+        header: () => /* @__PURE__ */ u$1("div", { className: "@container min-w-[0.05rem]", children: /* @__PURE__ */ u$1("p", { ...styleGridHeader(index, dates.length), children: date.dateString }) }),
+        cell: ({ getValue, row, column, table: table2 }) => {
+          const value = getValue();
+          const rowIndex = row.index;
+          const columnIndex = column.getIndex();
+          const numberOfRows = table2.getRowModel().rows.length;
+          const numberOfColumns = table2.getAllColumns().length;
+          return /* @__PURE__ */ u$1("div", { className: "text-center", children: /* @__PURE__ */ u$1(
+            ProportionCell,
             {
-              className: "@container font-semibold",
-              style: { gridRowStart: 1, gridColumnStart: columnIndex + 2 },
-              children: /* @__PURE__ */ u$1("p", { ...styleGridHeader(columnIndex, dates), children: date.dateString })
-            },
-            date.dateString
-          )),
-          shownMutations.map((mutation, rowIndex) => {
-            return /* @__PURE__ */ u$1(Fragment, { children: [
-              /* @__PURE__ */ u$1(
-                "div",
-                {
-                  style: { gridRowStart: rowIndex + 2, gridColumnStart: 1 },
-                  className: "flex items-center justify-center",
-                  children: /* @__PURE__ */ u$1(AnnotatedMutation, { mutation, sequenceType })
-                },
-                `mutation-${mutation.code}`
+              value: value ?? null,
+              date,
+              mutation: row.original.mutation,
+              tooltipPosition: getTooltipPosition(
+                rowIndex - table2.getState().pagination.pageIndex * table2.getState().pagination.pageSize,
+                numberOfRows,
+                columnIndex,
+                numberOfColumns
               ),
-              dates.map((date, columnIndex) => {
-                const value = data.get(mutation, date) ?? null;
-                const tooltipPosition = getTooltipPosition(
-                  rowIndex,
-                  shownMutations.length,
-                  columnIndex,
-                  dates.length
-                );
-                return /* @__PURE__ */ u$1(
-                  "div",
-                  {
-                    style: { gridRowStart: rowIndex + 2, gridColumnStart: columnIndex + 2 },
-                    children: /* @__PURE__ */ u$1(
-                      ProportionCell,
-                      {
-                        value,
-                        date,
-                        mutation,
-                        tooltipPosition,
-                        colorScale
-                      }
-                    )
-                  },
-                  `${mutation.code}-${date.dateString}`
-                );
-              })
-            ] }, `fragment-${mutation.code}`);
-          })
-        ]
-      }
-    )
+              colorScale
+            }
+          ) });
+        }
+      });
+    });
+    return [mutationHeader, ...dateHeaders];
+  }, [colorScale, data, sequenceType]);
+  const table = usePreactTable({
+    data: tableData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    debugTable: true,
+    onPaginationChange: setPagination,
+    state: {
+      pagination
+    }
+  });
+  return /* @__PURE__ */ u$1("div", { className: "w-full", children: [
+    /* @__PURE__ */ u$1("table", { className: "w-full", children: [
+      /* @__PURE__ */ u$1("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ u$1("tr", { children: headerGroup.headers.map((header) => /* @__PURE__ */ u$1("th", { colSpan: header.colSpan, style: { width: `${header.getSize()}px` }, children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }),
+      /* @__PURE__ */ u$1("tbody", { children: [
+        table.getRowModel().rows.map((row) => /* @__PURE__ */ u$1("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ u$1("td", { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)),
+        table.getRowModel().rows.length === 0 && /* @__PURE__ */ u$1("td", { colSpan: table.getFlatHeaders().length, children: /* @__PURE__ */ u$1("div", { className: "text-center", children: "No data available for your filters." }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ u$1("div", { className: "mt-2", children: /* @__PURE__ */ u$1(Pagination, { table, pageSizes }) })
   ] });
 };
-function styleGridHeader(columnIndex, dates) {
+function styleGridHeader(columnIndex, numDateColumns) {
   if (columnIndex === 0) {
     return { className: "overflow-visible text-nowrap" };
   }
-  if (columnIndex === dates.length - 1) {
+  if (columnIndex === numDateColumns - 1) {
     return { className: "overflow-visible text-nowrap", style: { direction: "rtl" } };
   }
   return { className: "invisible @[6rem]:visible" };
@@ -9934,7 +10454,7 @@ const ProportionCell = ({ value, mutation, date, tooltipPosition, colorScale })
         color: getTextColorForScale(value == null ? void 0 : value.proportion, colorScale)
       },
       className: `w-full h-full hover:font-bold text-xs group @container`,
-      children: /* @__PURE__ */ u$1("span", { className: "invisible @[2rem]:visible", children: value === null ? "" : formatProportion(value.proportion, 0) })
+      children: value === null ? /* @__PURE__ */ u$1("span", { className: "invisible", children: "No data" }) : /* @__PURE__ */ u$1("span", { className: "invisible @[2rem]:visible", children: formatProportion(value.proportion, 0) })
     }
   ) }) });
 };
@@ -10008,7 +10528,8 @@ const mutationOverTimeSchema = z$2.object({
     max: z$2.number().min(0).max(1)
   }),
   width: z$2.string(),
-  height: z$2.string().optional()
+  height: z$2.string().optional(),
+  pageSizes: pageSizesSchema
 });
 const MutationsOverTime = (componentProps) => {
   const { width, height } = componentProps;
@@ -10098,7 +10619,8 @@ const MutationsOverTimeTabs$1 = ({
             {
               data: filteredData,
               colorScale,
-              sequenceType: originalComponentProps.sequenceType
+              sequenceType: originalComponentProps.sequenceType,
+              pageSizes: originalComponentProps.pageSizes
             }
           )
         };
@@ -10221,6 +10743,7 @@ let MutationsOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     this.lapisDateField = "date";
     this.displayMutations = void 0;
     this.initialMeanProportionInterval = { min: 0.05, max: 0.9 };
+    this.pageSizes = [10, 20, 30, 40, 50];
     this.mutationAnnotations = [];
   }
   render() {
@@ -10235,7 +10758,8 @@ let MutationsOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         granularity: this.granularity,
         lapisDateField: this.lapisDateField,
         displayMutations: this.displayMutations,
-        initialMeanProportionInterval: this.initialMeanProportionInterval
+        initialMeanProportionInterval: this.initialMeanProportionInterval,
+        pageSizes: this.pageSizes
       }
     ) });
   }
@@ -10267,6 +10791,9 @@ __decorateClass$8([
 __decorateClass$8([
   n$1({ type: Object })
 ], MutationsOverTimeComponent.prototype, "initialMeanProportionInterval", 2);
+__decorateClass$8([
+  n$1({ type: Array })
+], MutationsOverTimeComponent.prototype, "pageSizes", 2);
 __decorateClass$8([
   consume({ context: mutationAnnotationsContext, subscribe: true })
 ], MutationsOverTimeComponent.prototype, "mutationAnnotations", 2);
@@ -11605,7 +12132,7 @@ const wastewaterMutationOverTimeSchema = z$2.object({
   sequenceType: sequenceTypeSchema,
   width: z$2.string(),
   height: z$2.string().optional(),
-  maxNumberOfGridRows: z$2.number()
+  pageSizes: pageSizesSchema
 });
 const WastewaterMutationsOverTime = (componentProps) => {
   const { width, height } = componentProps;
@@ -11639,15 +12166,13 @@ const WastewaterMutationsOverTimeInner = (componentProps) => {
     MutationsOverTimeTabs,
     {
       mutationOverTimeDataPerLocation,
-      originalComponentProps: componentProps,
-      maxNumberOfGridRows: componentProps.maxNumberOfGridRows
+      originalComponentProps: componentProps
     }
   );
 };
 const MutationsOverTimeTabs = ({
   mutationOverTimeDataPerLocation,
-  originalComponentProps,
-  maxNumberOfGridRows
+  originalComponentProps
 }) => {
   const [colorScale, setColorScale] = d({ min: 0, max: 1, color: "indigo" });
   const tabs = mutationOverTimeDataPerLocation.map(({ location, data }) => ({
@@ -11657,7 +12182,7 @@ const MutationsOverTimeTabs = ({
       {
         data,
         colorScale,
-        maxNumberOfGridRows,
+        pageSizes: originalComponentProps.pageSizes,
         sequenceType: originalComponentProps.sequenceType
       }
     )
@@ -11714,7 +12239,7 @@ let WastewaterMutationsOverTimeComponent = class extends PreactLitAdapterWithGri
     this.sequenceType = "nucleotide";
     this.width = "100%";
     this.height = void 0;
-    this.maxNumberOfGridRows = 100;
+    this.pageSizes = [10, 20, 30, 40, 50];
     this.mutationAnnotations = [];
   }
   render() {
@@ -11725,7 +12250,7 @@ let WastewaterMutationsOverTimeComponent = class extends PreactLitAdapterWithGri
         sequenceType: this.sequenceType,
         width: this.width,
         height: this.height,
-        maxNumberOfGridRows: this.maxNumberOfGridRows
+        pageSizes: this.pageSizes
       }
     ) });
   }
@@ -11743,8 +12268,8 @@ __decorateClass$5([
   n$1({ type: String })
 ], WastewaterMutationsOverTimeComponent.prototype, "height", 2);
 __decorateClass$5([
-  n$1({ type: Number })
-], WastewaterMutationsOverTimeComponent.prototype, "maxNumberOfGridRows", 2);
+  n$1({ type: Array })
+], WastewaterMutationsOverTimeComponent.prototype, "pageSizes", 2);
 __decorateClass$5([
   consume({ context: mutationAnnotationsContext, subscribe: true })
 ], WastewaterMutationsOverTimeComponent.prototype, "mutationAnnotations", 2);
@@ -11774,12 +12299,7 @@ const getDatesForSelectorValue = (initialSelectedDateRange, dateRangeOptions, ea
 function computeInitialValues(value, earliestDate, dateRangeOptions) {
   var _a;
   if (value === void 0) {
-    const { dateFrom: dateFrom2, dateTo: dateTo2 } = getDatesForSelectorValue(void 0, dateRangeOptions, earliestDate);
-    return {
-      initialSelectedDateRange: void 0,
-      initialSelectedDateFrom: dateFrom2,
-      initialSelectedDateTo: dateTo2
-    };
+    return void 0;
   }
   if (typeof value === "string") {
     const selectableOptions = getSelectableOptions(dateRangeOptions);
@@ -11827,12 +12347,115 @@ function computeInitialValues(value, earliestDate, dateRangeOptions) {
 function isUndefinedOrEmpty(value) {
   return value === void 0 || value === "";
 }
+function DatePicker({
+  onChange,
+  value,
+  minDate,
+  maxDate,
+  placeholderText,
+  className
+}) {
+  const inputRef = A$1(null);
+  const [datePicker, setDatePicker] = d(null);
+  y(() => {
+    if (!inputRef.current) {
+      return;
+    }
+    const instance = flatpickr(inputRef.current, {
+      allowInput: true,
+      dateFormat: "Y-m-d",
+      defaultDate: value,
+      minDate,
+      maxDate
+    });
+    setDatePicker(instance);
+    return () => {
+      instance.destroy();
+    };
+  }, [maxDate, minDate, onChange, value]);
+  if (value === void 0 && inputRef.current) {
+    inputRef.current.value = "";
+  }
+  const handleChange = () => {
+    const newValue = datePicker == null ? void 0 : datePicker.selectedDates[0];
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+  return /* @__PURE__ */ u$1(
+    "input",
+    {
+      className: `input input-bordered w-full ${className}`,
+      type: "text",
+      placeholder: placeholderText,
+      ref: inputRef,
+      onChange: handleChange,
+      onBlur: handleChange
+    }
+  );
+}
+function DeleteIcon() {
+  return /* @__PURE__ */ u$1(Fragment, { children: "×" });
+}
+const undefinedValue = "__undefined__";
+function ClearableSelect({
+  items,
+  initiallySelectedItem,
+  onChange,
+  placeholderText,
+  className,
+  value,
+  selectClassName
+}) {
+  const [selectedOption, setSelectedOption] = d(initiallySelectedItem ?? null);
+  y(() => {
+    if (value !== void 0) {
+      setSelectedOption(value);
+    }
+  }, [value]);
+  const handleClear = () => {
+    setSelectedOption(null);
+    if (onChange) {
+      onChange(null);
+    }
+  };
+  const handleChange = (event) => {
+    const newValue = event.currentTarget.value;
+    setSelectedOption(newValue);
+    if (onChange) {
+      onChange(newValue);
+    }
+  };
+  return /* @__PURE__ */ u$1("div", { className: `relative inline min-w-24 ${className}`, children: [
+    /* @__PURE__ */ u$1(
+      "select",
+      {
+        className: `w-full select select-bordered pr-14 ${selectClassName}`,
+        value: selectedOption ?? undefinedValue,
+        onChange: handleChange,
+        children: [
+          /* @__PURE__ */ u$1("option", { value: undefinedValue, disabled: true, children: placeholderText ?? "Select an option" }),
+          items.map((item) => /* @__PURE__ */ u$1("option", { value: item, children: item }, item))
+        ]
+      }
+    ),
+    selectedOption && /* @__PURE__ */ u$1(
+      "button",
+      {
+        onClick: handleClear,
+        className: "absolute right-10 top-1/2 -translate-y-1/2 bg-transparent border-0 cursor-pointer",
+        children: /* @__PURE__ */ u$1(DeleteIcon, {})
+      }
+    )
+  ] });
+}
 const customOption = "Custom";
 const dateRangeFilterInnerPropsSchema = z$2.object({
   dateRangeOptions: z$2.array(dateRangeOptionSchema),
   earliestDate: z$2.string().date(),
-  value: dateRangeValueSchema.optional(),
-  lapisDateField: z$2.string().min(1)
+  value: dateRangeValueSchema,
+  lapisDateField: z$2.string().min(1),
+  placeholder: z$2.string().optional()
 });
 const dateRangeFilterPropsSchema = dateRangeFilterInnerPropsSchema.extend({
   width: z$2.string()
@@ -11846,118 +12469,104 @@ const DateRangeFilterInner = ({
   dateRangeOptions,
   earliestDate = "1900-01-01",
   value,
-  lapisDateField
+  lapisDateField,
+  placeholder
 }) => {
+  var _a;
   const initialValues = T$1(
     () => computeInitialValues(value, earliestDate, dateRangeOptions),
     [value, earliestDate, dateRangeOptions]
   );
-  const fromDatePickerRef = A$1(null);
-  const toDatePickerRef = A$1(null);
   const divRef = A$1(null);
-  const [dateFromPicker, setDateFromPicker] = d(null);
-  const [dateToPicker, setDateToPicker] = d(null);
-  const [selectedDateRange, setSelectedDateRange] = d(
-    initialValues.initialSelectedDateRange
-  );
-  const [selectedDates, setSelectedDates] = d({
-    dateFrom: initialValues.initialSelectedDateFrom,
-    dateTo: initialValues.initialSelectedDateTo
-  });
-  y(() => {
-    setSelectedDateRange(initialValues.initialSelectedDateRange);
-    setSelectedDates({
+  const getInitialState2 = q$1(() => {
+    if (!initialValues) {
+      return null;
+    }
+    return initialValues.initialSelectedDateRange ? {
+      label: initialValues.initialSelectedDateRange,
+      dateFrom: initialValues.initialSelectedDateFrom,
+      dateTo: initialValues.initialSelectedDateTo
+    } : {
+      label: customOption,
       dateFrom: initialValues.initialSelectedDateFrom,
       dateTo: initialValues.initialSelectedDateTo
-    });
-    const commonConfig = {
-      allowInput: true,
-      dateFormat: "Y-m-d"
     };
-    if (fromDatePickerRef.current) {
-      setDateFromPicker(
-        flatpickr(fromDatePickerRef.current, {
-          ...commonConfig,
-          defaultDate: initialValues.initialSelectedDateFrom
-        })
-      );
-    }
-    if (toDatePickerRef.current) {
-      setDateToPicker(
-        flatpickr(toDatePickerRef.current, {
-          ...commonConfig,
-          defaultDate: initialValues.initialSelectedDateTo
-        })
-      );
+  }, [initialValues]);
+  const customComboboxValue = { label: customOption };
+  const [options2, setOptions] = d(
+    ((_a = getInitialState2()) == null ? void 0 : _a.label) === customOption ? [...dateRangeOptions, customComboboxValue] : [...dateRangeOptions]
+  );
+  const [state, setState] = d(getInitialState2());
+  function updateState(newState) {
+    setState(newState);
+    fireFilterChangedEvent({ dateFrom: newState == null ? void 0 : newState.dateFrom, dateTo: newState == null ? void 0 : newState.dateTo, lapisDateField });
+    fireOptionChangedEvent(newState);
+  }
+  y(() => {
+    setState(getInitialState2());
+  }, [getInitialState2]);
+  const onSelectChange = (option) => {
+    updateState(
+      option !== null ? {
+        label: option == null ? void 0 : option.label,
+        dateFrom: getFromDate(option, earliestDate),
+        dateTo: getToDate(option)
+      } : null
+    );
+    if ((option == null ? void 0 : option.label) !== customOption) {
+      setOptions([...dateRangeOptions]);
     }
-    return () => {
-      setDateFromPicker((prev) => {
-        prev == null ? void 0 : prev.destroy();
-        return null;
-      });
-      setDateToPicker((prev) => {
-        prev == null ? void 0 : prev.destroy();
-        return null;
-      });
-    };
-  }, [fromDatePickerRef, toDatePickerRef, initialValues]);
-  const onSelectChange = (value2) => {
-    setSelectedDateRange(value2);
-    const dateRange = getDatesForSelectorValue(value2, dateRangeOptions, earliestDate);
-    dateToPicker == null ? void 0 : dateToPicker.set("minDate", dateRange.dateFrom);
-    dateFromPicker == null ? void 0 : dateFromPicker.set("maxDate", dateRange.dateTo);
-    dateFromPicker == null ? void 0 : dateFromPicker.setDate(dateRange.dateFrom);
-    dateToPicker == null ? void 0 : dateToPicker.setDate(dateRange.dateTo);
-    setSelectedDates({
-      dateFrom: dateRange.dateFrom,
-      dateTo: dateRange.dateTo
-    });
-    fireFilterChangedEvent();
-    fireOptionChangedEvent(value2);
   };
-  const onChangeDateFrom = () => {
-    if (selectedDates.dateFrom.toDateString() === (dateFromPicker == null ? void 0 : dateFromPicker.selectedDates[0].toDateString())) {
+  function getFromDate(option, earliestDate2) {
+    if (!option || option.label === customOption) {
+      return void 0;
+    }
+    return new Date((option == null ? void 0 : option.dateFrom) ?? earliestDate2);
+  }
+  function getToDate(option) {
+    if (!option || option.label === customOption) {
+      return void 0;
+    }
+    if (!option.dateTo) {
+      return /* @__PURE__ */ new Date();
+    }
+    return new Date(option.dateTo);
+  }
+  const onChangeDateFrom = (date) => {
+    var _a2;
+    if ((date == null ? void 0 : date.toDateString()) === ((_a2 = state == null ? void 0 : state.dateFrom) == null ? void 0 : _a2.toDateString())) {
       return;
     }
-    const dateTo = dateToPicker == null ? void 0 : dateToPicker.selectedDates[0];
-    const dateFrom = dateFromPicker == null ? void 0 : dateFromPicker.selectedDates[0];
-    selectedDates.dateFrom = dateFrom || /* @__PURE__ */ new Date();
-    dateToPicker == null ? void 0 : dateToPicker.set("minDate", dateFrom);
-    setSelectedDateRange(customOption);
-    fireFilterChangedEvent();
-    fireOptionChangedEvent({
-      dateFrom: dateFrom !== void 0 ? toYYYYMMDD(dateFrom) : earliestDate,
-      dateTo: toYYYYMMDD(dateTo || /* @__PURE__ */ new Date())
+    updateState({
+      label: customOption,
+      dateFrom: date,
+      dateTo: state == null ? void 0 : state.dateTo
     });
+    setOptions([...dateRangeOptions, customComboboxValue]);
   };
-  const onChangeDateTo = () => {
-    if (selectedDates.dateTo.toDateString() === (dateToPicker == null ? void 0 : dateToPicker.selectedDates[0].toDateString())) {
+  const onChangeDateTo = (date) => {
+    var _a2;
+    if ((date == null ? void 0 : date.toDateString()) === ((_a2 = state == null ? void 0 : state.dateTo) == null ? void 0 : _a2.toDateString())) {
       return;
     }
-    const dateTo = dateToPicker == null ? void 0 : dateToPicker.selectedDates[0];
-    const dateFrom = dateFromPicker == null ? void 0 : dateFromPicker.selectedDates[0];
-    selectedDates.dateTo = dateTo || /* @__PURE__ */ new Date();
-    dateFromPicker == null ? void 0 : dateFromPicker.set("maxDate", dateTo);
-    setSelectedDateRange(customOption);
-    fireFilterChangedEvent();
-    fireOptionChangedEvent({
-      dateFrom: dateFrom !== void 0 ? toYYYYMMDD(dateFrom) : earliestDate,
-      dateTo: toYYYYMMDD(dateTo || /* @__PURE__ */ new Date())
+    updateState({
+      label: customOption,
+      dateFrom: state == null ? void 0 : state.dateFrom,
+      dateTo: date
     });
+    setOptions([...dateRangeOptions, customComboboxValue]);
   };
-  const fireOptionChangedEvent = (option) => {
-    var _a;
-    (_a = divRef.current) == null ? void 0 : _a.dispatchEvent(new DateRangeOptionChangedEvent(option));
-  };
-  const fireFilterChangedEvent = () => {
-    var _a;
-    const dateFrom = dateFromPicker == null ? void 0 : dateFromPicker.selectedDates[0];
-    const dateTo = dateToPicker == null ? void 0 : dateToPicker.selectedDates[0];
+  const fireFilterChangedEvent = ({
+    dateFrom,
+    dateTo,
+    lapisDateField: lapisDateField2
+  }) => {
+    var _a2;
     const detail = {
-      ...dateFrom !== void 0 && { [`${lapisDateField}From`]: toYYYYMMDD(dateFrom) },
-      ...dateTo !== void 0 && { [`${lapisDateField}To`]: toYYYYMMDD(dateTo) }
+      ...dateFrom !== void 0 && { [`${lapisDateField2}From`]: toYYYYMMDD(dateFrom) },
+      ...dateTo !== void 0 && { [`${lapisDateField2}To`]: toYYYYMMDD(dateTo) }
     };
-    (_a = divRef.current) == null ? void 0 : _a.dispatchEvent(
+    (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(
       new CustomEvent("gs-date-range-filter-changed", {
         detail,
         bubbles: true,
@@ -11965,49 +12574,51 @@ const DateRangeFilterInner = ({
       })
     );
   };
-  return /* @__PURE__ */ u$1("div", { class: "flex flex-wrap", ref: divRef, children: [
-    /* @__PURE__ */ u$1(
-      Select,
+  const fireOptionChangedEvent = (state2) => {
+    var _a2;
+    const eventDetail = (state2 == null ? void 0 : state2.label) === customOption ? {
+      dateFrom: state2.dateFrom !== void 0 ? toYYYYMMDD(state2.dateFrom) : void 0,
+      dateTo: state2.dateTo !== void 0 ? toYYYYMMDD(state2.dateTo) : void 0
+    } : state2 == null ? void 0 : state2.label;
+    (_a2 = divRef.current) == null ? void 0 : _a2.dispatchEvent(new DateRangeOptionChangedEvent(eventDetail));
+  };
+  return /* @__PURE__ */ u$1("div", { className: "@container", ref: divRef, children: /* @__PURE__ */ u$1("div", { className: "flex min-w-[7.5rem] flex-col @md:flex-row", children: [
+    /* @__PURE__ */ u$1("div", { className: "flex-grow", children: /* @__PURE__ */ u$1(
+      ClearableSelect,
       {
-        items: [
-          ...getSelectableOptions(dateRangeOptions),
-          { label: customOption, value: customOption, disabled: true }
-        ],
-        selected: selectedDateRange ?? customOption,
-        selectStyle: "select-bordered rounded-none flex-grow min-w-[7.5rem]",
-        onChange: (event) => {
-          event.preventDefault();
-          const select = event.target;
-          const value2 = select.value;
-          onSelectChange(value2);
-        }
+        items: options2.map((item) => item.label),
+        placeholderText: placeholder,
+        onChange: (value2) => {
+          const dateRangeOption = options2.find((item) => item.label === value2);
+          onSelectChange(dateRangeOption ?? null);
+        },
+        value: (state == null ? void 0 : state.label) ?? null,
+        selectClassName: "rounded-t-md rounded-b-none @md:rounded-l-md @md:rounded-r-none"
       }
-    ),
-    /* @__PURE__ */ u$1("div", { className: "flex flex-wrap flex-grow", children: [
+    ) }),
+    /* @__PURE__ */ u$1("div", { className: "flex flex-grow flex-col @4xs:flex-row", children: [
       /* @__PURE__ */ u$1(
-        "input",
+        DatePicker,
         {
-          class: "input input-bordered rounded-none flex-grow w-[7.5rem]",
-          type: "text",
-          placeholder: "Date from",
-          ref: fromDatePickerRef,
+          className: "flex-grow min-w-[7.5rem] @4xs:rounded-bl-md @md:rounded-l-none rounded-none",
+          value: state == null ? void 0 : state.dateFrom,
           onChange: onChangeDateFrom,
-          onBlur: onChangeDateFrom
+          maxDate: state == null ? void 0 : state.dateTo,
+          placeholderText: "Date from"
         }
       ),
       /* @__PURE__ */ u$1(
-        "input",
+        DatePicker,
         {
-          class: "input input-bordered rounded-none flex-grow w-[7.5rem]",
-          type: "text",
-          placeholder: "Date to",
-          ref: toDatePickerRef,
+          className: "flex-grow min-w-[7.5rem] rounded-b-md rounded-t-none @4xs:rounded-tr-none @4xs:rounded-l-none @md:rounded-r-md ",
+          value: state == null ? void 0 : state.dateTo,
           onChange: onChangeDateTo,
-          onBlur: onChangeDateTo
+          minDate: state == null ? void 0 : state.dateFrom,
+          placeholderText: "Date to"
         }
       )
     ] })
-  ] });
+  ] }) });
 };
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
@@ -12026,6 +12637,7 @@ let DateRangeFilterComponent = class extends PreactLitAdapter {
     this.earliestDate = "1900-01-01";
     this.value = void 0;
     this.width = "100%";
+    this.placeholder = void 0;
     this.lapisDateField = "";
   }
   render() {
@@ -12036,7 +12648,8 @@ let DateRangeFilterComponent = class extends PreactLitAdapter {
         earliestDate: this.earliestDate,
         value: this.value,
         lapisDateField: this.lapisDateField,
-        width: this.width
+        width: this.width,
+        placeholder: this.placeholder
       }
     );
   }
@@ -12068,6 +12681,9 @@ __decorateClass$4([
 __decorateClass$4([
   n$1({ type: String })
 ], DateRangeFilterComponent.prototype, "width", 2);
+__decorateClass$4([
+  n$1({ type: String })
+], DateRangeFilterComponent.prototype, "placeholder", 2);
 __decorateClass$4([
   n$1({ type: String })
 ], DateRangeFilterComponent.prototype, "lapisDateField", 2);
@@ -15059,11 +15675,11 @@ function DownshiftCombobox({
   createEvent,
   itemToString: itemToString2,
   placeholderText,
-  formatItemInList
+  formatItemInList,
+  inputClassName = ""
 }) {
   var _a;
-  const initialSelectedItem = value ?? null;
-  const [itemsFilter, setItemsFilter] = d(itemToString2(initialSelectedItem));
+  const [itemsFilter, setItemsFilter] = d(itemToString2(value));
   const items = T$1(
     () => allItems.filter((item) => filterItemsByInputValue(item, itemsFilter)),
     [allItems, filterItemsByInputValue, itemsFilter]
@@ -15102,7 +15718,7 @@ function DownshiftCombobox({
     itemToString(item) {
       return itemToString2(item);
     },
-    initialSelectedItem,
+    selectedItem: value,
     environment
   });
   const onInputBlur = () => {
@@ -15124,7 +15740,7 @@ function DownshiftCombobox({
     /* @__PURE__ */ u$1("div", { className: "w-full flex flex-col gap-1", children: /* @__PURE__ */ u$1(
       "div",
       {
-        className: "flex gap-0.5 input input-bordered min-w-32",
+        className: `flex gap-0.5 input input-bordered min-w-32 ${inputClassName}`,
         onBlur: (event) => {
           if (event.relatedTarget != buttonRef.current) {
             closeMenu();
@@ -15148,7 +15764,7 @@ function DownshiftCombobox({
               type: "button",
               onClick: clearInput,
               tabIndex: -1,
-              children: "×"
+              children: /* @__PURE__ */ u$1(DeleteIcon, {})
             }
           ),
           /* @__PURE__ */ u$1(