@genspectrum/dashboard-components 0.6.1 → 0.6.3

package/dist/dashboard-components.js

@@ -9,6 +9,7 @@ import { VennDiagramController, ArcSlice, extractSets } from "chartjs-chart-venn
 import { autoUpdate, computePosition, offset, shift, flip, size } from "@floating-ui/dom";
 import { ReactiveElement } from "@lit/reactive-element";
 import { BarWithErrorBarsController, BarWithErrorBar } from "chartjs-chart-error-bars";
+import hash from "object-hash";
 import flatpickr from "flatpickr";
 /**
  * @license
@@ -490,14 +491,14 @@ const substitutionsOrDeletionsEndpoint = (lapisUrl, sequenceType) => {
   return sequenceType === "amino acid" ? `${lapisUrl}/sample/aminoAcidMutations` : `${lapisUrl}/sample/nucleotideMutations`;
 };
 const referenceGenomeEndpoint = (lapisUrl) => `${lapisUrl}/sample/referenceGenome`;
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
   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$b(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 let App = class extends LitElement {
@@ -528,14 +529,14 @@ let App = class extends LitElement {
     return this;
   }
 };
-__decorateClass$b([
+__decorateClass$d([
   provide({ context: lapisContext }),
   n2()
 ], App.prototype, "lapis", 2);
-__decorateClass$b([
+__decorateClass$d([
   provide({ context: referenceGenomeContext })
 ], App.prototype, "referenceGenome", 2);
-App = __decorateClass$b([
+App = __decorateClass$d([
   t$2("gs-app")
 ], App);
 var f$1 = 0;
@@ -558,7 +559,7 @@ function h(n3) {
 }
 function p(n3, u2, i2) {
   var o2 = d(t++, 2);
-  if (o2.t = n3, !o2.__c && (o2.__ = [i2 ? i2(u2) : D$1(void 0, u2), function(n4) {
+  if (o2.t = n3, !o2.__c && (o2.__ = [D$1(void 0, u2), function(n4) {
     var t2 = o2.__N ? o2.__N[0] : o2.__[0], r2 = o2.t(t2, n4);
     t2 !== r2 && (o2.__N = [r2, o2.__[1]], o2.__c.setState({}));
   }], o2.__c = r, !r.u)) {
@@ -773,6 +774,7 @@ class Substitution {
     this.valueAtReference = valueAtReference;
     this.substitutionValue = substitutionValue;
     this.position = position;
+    this.type = "substitution";
     const segmentString = this.segment ? `${this.segment}:` : "";
     const valueAtReferenceString = this.valueAtReference ? `${this.valueAtReference}` : "";
     const substitutionValueString = this.substitutionValue ? `${this.substitutionValue}` : "";
@@ -806,6 +808,7 @@ class Deletion {
     this.segment = segment;
     this.valueAtReference = valueAtReference;
     this.position = position;
+    this.type = "deletion";
     const segmentString = this.segment ? `${this.segment}:` : "";
     const valueAtReferenceString = this.valueAtReference ? `${this.valueAtReference}` : "";
     this.code = `${segmentString}${valueAtReferenceString}${this.position}-`;
@@ -833,6 +836,7 @@ class Insertion {
     this.segment = segment;
     this.position = position;
     this.insertedSymbols = insertedSymbols;
+    this.type = "insertion";
     this.code = `ins_${this.segment ? `${this.segment}:` : ""}${this.position}:${this.insertedSymbols}`;
   }
   equals(other) {
@@ -918,8 +922,8 @@ const compareSubstitutionValues = (a2, b3) => {
   }
   return a2.localeCompare(b3);
 };
-const formatProportion = (proportion) => {
-  return `${(proportion * 100).toFixed(2)}%`;
+const formatProportion = (proportion, digits = 2) => {
+  return `${(proportion * 100).toFixed(digits)}%`;
 };
 const MutationComparisonTable = ({
   data,
@@ -1133,6 +1137,12 @@ async function queryMutationData(lapisFilters, sequenceType, lapis) {
   return { mutationData };
 }
 function filterMutationData(data, displayedSegments, displayedMutationTypes) {
+  return data.map((mutationEntry) => ({
+    displayName: mutationEntry.displayName,
+    data: filterBySegmentAndMutationType(mutationEntry.data, displayedSegments, displayedMutationTypes)
+  }));
+}
+function filterBySegmentAndMutationType(data, displayedSegments, displayedMutationTypes) {
   const byDisplayedSegments = (mutationEntry) => {
     if (mutationEntry.mutation.segment === void 0) {
       return true;
@@ -1146,10 +1156,7 @@ function filterMutationData(data, displayedSegments, displayedMutationTypes) {
       (displayedMutationType) => displayedMutationType.checked && displayedMutationType.type === mutationEntry.type
     );
   };
-  return data.map((mutationEntry) => ({
-    displayName: mutationEntry.displayName,
-    data: mutationEntry.data.filter(byDisplayedSegments).filter(byDisplayedMutationTypes)
-  }));
+  return data.filter(byDisplayedSegments).filter(byDisplayedMutationTypes);
 }
 const LapisUrlContext = createContext$1("");
 function useFloatingUi(referenceRef, floatingRef, middleware, placement) {
@@ -1750,7 +1757,7 @@ const MutationComparisonTabs = ({
     {
       tabs,
       toolbar: /* @__PURE__ */ u$1(
-        Toolbar$4,
+        Toolbar$5,
         {
           displayedSegments,
           setDisplayedSegments,
@@ -1764,7 +1771,7 @@ const MutationComparisonTabs = ({
     }
   );
 };
-const Toolbar$4 = ({
+const Toolbar$5 = ({
   displayedSegments,
   setDisplayedSegments,
   displayedMutationTypes,
@@ -1804,7 +1811,7 @@ const Toolbar$4 = ({
 const gridJsStyle = '.gridjs-head button, .gridjs-footer button {\n  cursor: pointer;\n  background-color: transparent;\n  background-image: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  outline: none;\n}\n\n.gridjs-temp {\n  position: relative;\n}\n\n.gridjs-head {\n  width: 100%;\n  margin-bottom: 5px;\n  padding: 5px 1px;\n}\n.gridjs-head::after {\n  content: "";\n  display: block;\n  clear: both;\n}\n.gridjs-head:empty {\n  padding: 0;\n  border: none;\n}\n\n.gridjs-container {\n  overflow: hidden;\n  display: inline-block;\n  padding: 2px;\n  color: #000;\n  position: relative;\n  z-index: 0;\n}\n\n.gridjs-footer {\n  display: block;\n  position: relative;\n  width: 100%;\n  z-index: 5;\n  padding: 12px 24px;\n  border-top: 1px solid #e5e7eb;\n  background-color: #fff;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);\n  border-radius: 0 0 8px 8px;\n  border-bottom-width: 1px;\n  border-color: #e5e7eb;\n}\n.gridjs-footer:empty {\n  padding: 0;\n  border: none;\n}\n\ninput.gridjs-input {\n  outline: none;\n  background-color: #fff;\n  border: 1px solid #d2d6dc;\n  border-radius: 5px;\n  padding: 10px 13px;\n  font-size: 14px;\n  line-height: 1.45;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\ninput.gridjs-input:focus {\n  box-shadow: 0 0 0 3px rgba(149, 189, 243, 0.5);\n  border-color: #9bc2f7;\n}\n\n.gridjs-pagination {\n  color: #3d4044;\n}\n.gridjs-pagination::after {\n  content: "";\n  display: block;\n  clear: both;\n}\n.gridjs-pagination .gridjs-summary {\n  float: left;\n  margin-top: 5px;\n}\n.gridjs-pagination .gridjs-pages {\n  float: right;\n}\n.gridjs-pagination .gridjs-pages button {\n  padding: 5px 14px;\n  border: 1px solid #d2d6dc;\n  background-color: #fff;\n  border-right: none;\n  outline: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.gridjs-pagination .gridjs-pages button:focus {\n  box-shadow: 0 0 0 2px rgba(149, 189, 243, 0.5);\n  position: relative;\n  margin-right: -1px;\n  border-right: 1px solid #d2d6dc;\n}\n.gridjs-pagination .gridjs-pages button:hover {\n  background-color: #f7f7f7;\n  color: rgb(60, 66, 87);\n  outline: none;\n}\n.gridjs-pagination .gridjs-pages button:disabled,\n.gridjs-pagination .gridjs-pages button[disabled],\n.gridjs-pagination .gridjs-pages button:hover:disabled {\n  cursor: default;\n  background-color: #fff;\n  color: #6b7280;\n}\n.gridjs-pagination .gridjs-pages button.gridjs-spread {\n  cursor: default;\n  box-shadow: none;\n  background-color: #fff;\n}\n.gridjs-pagination .gridjs-pages button.gridjs-currentPage {\n  background-color: #f7f7f7;\n  font-weight: bold;\n}\n.gridjs-pagination .gridjs-pages button:last-child {\n  border-bottom-right-radius: 6px;\n  border-top-right-radius: 6px;\n  border-right: 1px solid #d2d6dc;\n}\n.gridjs-pagination .gridjs-pages button:first-child {\n  border-bottom-left-radius: 6px;\n  border-top-left-radius: 6px;\n}\n.gridjs-pagination .gridjs-pages button:last-child:focus {\n  margin-right: 0;\n}\n\nbutton.gridjs-sort {\n  float: right;\n  height: 24px;\n  width: 13px;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  background-position-x: center;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  border: none;\n  outline: none;\n  background-size: contain;\n}\nbutton.gridjs-sort-neutral {\n  opacity: 0.3;\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0MDEuOTk4cHgiIGhlaWdodD0iNDAxLjk5OHB4IiB2aWV3Qm94PSIwIDAgNDAxLjk5OCA0MDEuOTk4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MDEuOTk4IDQwMS45OTg7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik03My4wOTIsMTY0LjQ1MmgyNTUuODEzYzQuOTQ5LDAsOS4yMzMtMS44MDcsMTIuODQ4LTUuNDI0YzMuNjEzLTMuNjE2LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0NwoJCQljMC00Ljk0OS0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2LDUuNDI0QzIxMC4yMzIsMS44MTIsMjA1Ljk1MSwwLDIwMC45OTksMHMtOS4yMzMsMS44MTItMTIuODUsNS40MjRMNjAuMjQyLDEzMy4zMzEKCQkJYy0zLjYxNywzLjYxNy01LjQyNCw3LjkwMS01LjQyNCwxMi44NWMwLDQuOTQ4LDEuODA3LDkuMjMxLDUuNDI0LDEyLjg0N0M2My44NjMsMTYyLjY0NSw2OC4xNDQsMTY0LjQ1Miw3My4wOTIsMTY0LjQ1MnoiLz4KCQk8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3CgkJCWMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2CgkJCWMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: center;\n}\nbutton.gridjs-sort-asc {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MXB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjE7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDE5Ny4yODdMMTU5LjAyOCw2OS4zODFjLTMuNjEzLTMuNjE3LTcuODk1LTUuNDI0LTEyLjg0Ny01LjQyNHMtOS4yMzMsMS44MDctMTIuODUsNS40MjRMNS40MjQsMTk3LjI4NwoJCUMxLjgwNywyMDAuOTA0LDAsMjA1LjE4NiwwLDIxMC4xMzRzMS44MDcsOS4yMzMsNS40MjQsMTIuODQ3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI1LDEyLjg1LDUuNDI1aDI1NS44MTMKCQljNC45NDksMCw5LjIzMy0xLjgwOCwxMi44NDgtNS40MjVjMy42MTMtMy42MTMsNS40MjctNy44OTgsNS40MjctMTIuODQ3UzI5MC41NDgsMjAwLjkwNCwyODYuOTM1LDE5Ny4yODd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: 35%;\n  background-size: 10px;\n}\nbutton.gridjs-sort-desc {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MnB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjI7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDY5LjM3N2MtMy42MTQtMy42MTctNy44OTgtNS40MjQtMTIuODQ4LTUuNDI0SDE4LjI3NGMtNC45NTIsMC05LjIzMywxLjgwNy0xMi44NSw1LjQyNAoJCUMxLjgwNyw3Mi45OTgsMCw3Ny4yNzksMCw4Mi4yMjhjMCw0Ljk0OCwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDdsMTI3LjkwNywxMjcuOTA3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI4LDEyLjg1LDUuNDI4CgkJczkuMjMzLTEuODExLDEyLjg0Ny01LjQyOEwyODYuOTM1LDk1LjA3NGMzLjYxMy0zLjYxNyw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDdDMjkyLjM2Miw3Ny4yNzksMjkwLjU0OCw3Mi45OTgsMjg2LjkzNSw2OS4zNzd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: 65%;\n  background-size: 10px;\n}\nbutton.gridjs-sort:focus {\n  outline: none;\n}\n\ntable.gridjs-table {\n  width: 100%;\n  max-width: 100%;\n  border-collapse: collapse;\n  text-align: left;\n  display: table;\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  table-layout: fixed;\n}\n\n.gridjs-tbody {\n  background-color: #fff;\n}\n\ntd.gridjs-td {\n  border: 1px solid #e5e7eb;\n  padding: 12px 24px;\n  background-color: #fff;\n  box-sizing: content-box;\n}\ntd.gridjs-td:first-child {\n  border-left: none;\n}\ntd.gridjs-td:last-child {\n  border-right: none;\n}\ntd.gridjs-message {\n  text-align: center;\n}\n\nth.gridjs-th {\n  position: relative;\n  color: #6b7280;\n  background-color: #f9fafb;\n  border: 1px solid #e5e7eb;\n  border-top: none;\n  padding: 14px 24px;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  outline: none;\n  vertical-align: middle;\n}\nth.gridjs-th .gridjs-th-content {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 100%;\n  float: left;\n}\nth.gridjs-th-sort {\n  cursor: pointer;\n}\nth.gridjs-th-sort .gridjs-th-content {\n  width: calc(100% - 15px);\n}\nth.gridjs-th-sort:hover {\n  background-color: #e5e7eb;\n}\nth.gridjs-th-sort:focus {\n  background-color: #e5e7eb;\n}\nth.gridjs-th-fixed {\n  position: sticky;\n  box-shadow: 0 1px 0 0 #e5e7eb;\n}\n@supports (-moz-appearance: none) {\n  th.gridjs-th-fixed {\n    box-shadow: 0 0 0 1px #e5e7eb;\n  }\n}\nth.gridjs-th:first-child {\n  border-left: none;\n}\nth.gridjs-th:last-child {\n  border-right: none;\n}\n\n.gridjs-tr {\n  border: none;\n}\n.gridjs-tr-selected td {\n  background-color: #ebf5ff;\n}\n.gridjs-tr:last-child td {\n  border-bottom: 0;\n}\n\n.gridjs *,\n.gridjs :after,\n.gridjs :before {\n  box-sizing: border-box;\n}\n\n.gridjs-wrapper {\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);\n  border-radius: 8px 8px 0 0;\n  display: block;\n  border-top-width: 1px;\n  border-color: #e5e7eb;\n}\n.gridjs-wrapper:nth-last-of-type(2) {\n  border-radius: 8px;\n  border-bottom-width: 1px;\n}\n\n.gridjs-search {\n  float: left;\n}\n.gridjs-search-input {\n  width: 250px;\n}\n\n.gridjs-loading-bar {\n  z-index: 10;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: #fff;\n  opacity: 0.5;\n}\n.gridjs-loading-bar::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(204, 204, 204, 0) 0, rgba(204, 204, 204, 0.2) 20%, rgba(204, 204, 204, 0.5) 60%, rgba(204, 204, 204, 0));\n  animation: shimmer 2s infinite;\n  content: "";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.gridjs-td .gridjs-checkbox {\n  display: block;\n  margin: auto;\n  cursor: pointer;\n}\n\n.gridjs-resizable {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  width: 5px;\n}\n.gridjs-resizable:hover {\n  cursor: ew-resize;\n  background-color: #9bc2f7;\n}\n/*# sourceMappingURL=mermaid.css?inline.map */';
 const minMaxPercentSliderCss = 'input[type=range]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    pointer-events: all;\n    width: 24px;\n    height: 24px;\n    background-color: #fff;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px #C6C6C6;\n    cursor: pointer;\n}\n\ninput[type=range]::-moz-range-thumb {\n    -webkit-appearance: none;\n    pointer-events: all;\n    width: 24px;\n    height: 24px;\n    background-color: #fff;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px #C6C6C6;\n    cursor: pointer;\n}\n\ninput[type=range]::-webkit-slider-thumb:hover {\n    background: #f7f7f7;\n}\n\ninput[type=range]::-webkit-slider-thumb:active {\n    box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;\n    -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;\n}\n\ninput[type="range"] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n         appearance: none;\n    height: 2px;\n    width: 100%;\n    position: absolute;\n    background-color: #C6C6C6;\n    pointer-events: none;\n}';
 const tailwindStyle = `/*
-! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -4253,9 +4260,6 @@ input.tab:checked + .tab-content,
 .mb-2 {
   margin-bottom: 0.5rem;
 }
-.ml-2 {
-  margin-left: 0.5rem;
-}
 .ml-2\\.5 {
   margin-left: 0.625rem;
 }
@@ -4460,6 +4464,9 @@ input.tab:checked + .tab-content,
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.text-center {
+  text-align: center;
+}
 .text-justify {
   text-align: justify;
 }
@@ -4551,6 +4558,9 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
+.hover\\:font-bold:hover {
+  font-weight: 700;
+}
 .hover\\:text-blue-700:hover {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
@@ -4576,14 +4586,13 @@ input.tab:checked + .tab-content,
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }`;
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+var __defProp$c = Object.defineProperty;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = void 0;
   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);
+      result = decorator(target, key, result) || result;
+  if (result) __defProp$c(target, key, result);
   return result;
 };
 const tailwindElementCss = unsafeCSS(tailwindStyle);
@@ -4605,25 +4614,25 @@ const _PreactLitAdapter = class _PreactLitAdapter extends ReactiveElement {
 };
 _PreactLitAdapter.styles = [tailwindElementCss, minMaxPercentSliderElementCss];
 let PreactLitAdapter = _PreactLitAdapter;
-__decorateClass$a([
+__decorateClass$c([
   consume({ context: lapisContext })
-], PreactLitAdapter.prototype, "lapis", 2);
-__decorateClass$a([
+], PreactLitAdapter.prototype, "lapis");
+__decorateClass$c([
   consume({ context: referenceGenomeContext, subscribe: true })
-], PreactLitAdapter.prototype, "referenceGenome", 2);
+], PreactLitAdapter.prototype, "referenceGenome");
 const gridJsElementCss = unsafeCSS(gridJsStyle);
 const _PreactLitAdapterWithGridJsStyles = class _PreactLitAdapterWithGridJsStyles extends PreactLitAdapter {
 };
 _PreactLitAdapterWithGridJsStyles.styles = [...PreactLitAdapter.styles, gridJsElementCss];
 let PreactLitAdapterWithGridJsStyles = _PreactLitAdapterWithGridJsStyles;
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
   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$b(target, key, result);
   return result;
 };
 let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -4650,25 +4659,25 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
     );
   }
 };
-__decorateClass$9([
+__decorateClass$b([
   n2({ type: Array })
 ], MutationComparisonComponent.prototype, "lapisFilters", 2);
-__decorateClass$9([
+__decorateClass$b([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "sequenceType", 2);
-__decorateClass$9([
+__decorateClass$b([
   n2({ type: Array })
 ], MutationComparisonComponent.prototype, "views", 2);
-__decorateClass$9([
+__decorateClass$b([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "width", 2);
-__decorateClass$9([
+__decorateClass$b([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "height", 2);
-__decorateClass$9([
+__decorateClass$b([
   n2({ type: Object })
 ], MutationComparisonComponent.prototype, "pageSize", 2);
-MutationComparisonComponent = __decorateClass$9([
+MutationComparisonComponent = __decorateClass$b([
   t$2("gs-mutation-comparison")
 ], MutationComparisonComponent);
 function getInsertionsTableData(data) {
@@ -5003,7 +5012,7 @@ const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
   };
   const tabs = views.map((view) => getTab(view));
   const toolbar = (activeTab) => /* @__PURE__ */ u$1(
-    Toolbar$3,
+    Toolbar$4,
     {
       activeTab,
       displayedSegments,
@@ -5017,7 +5026,7 @@ const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
 };
-const Toolbar$3 = ({
+const Toolbar$4 = ({
   activeTab,
   displayedSegments,
   setDisplayedSegments,
@@ -5070,14 +5079,14 @@ const Toolbar$3 = ({
     /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for mutations" })
   ] });
 };
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
   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$a(target, key, result);
   return result;
 };
 let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -5104,25 +5113,25 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
     );
   }
 };
-__decorateClass$8([
+__decorateClass$a([
   n2({ type: Object })
 ], MutationsComponent.prototype, "lapisFilter", 2);
-__decorateClass$8([
+__decorateClass$a([
   n2({ type: String })
 ], MutationsComponent.prototype, "sequenceType", 2);
-__decorateClass$8([
+__decorateClass$a([
   n2({ type: Array })
 ], MutationsComponent.prototype, "views", 2);
-__decorateClass$8([
+__decorateClass$a([
   n2({ type: String })
 ], MutationsComponent.prototype, "width", 2);
-__decorateClass$8([
+__decorateClass$a([
   n2({ type: String })
 ], MutationsComponent.prototype, "height", 2);
-__decorateClass$8([
+__decorateClass$a([
   n2({ type: Object })
 ], MutationsComponent.prototype, "pageSize", 2);
-MutationsComponent = __decorateClass$8([
+MutationsComponent = __decorateClass$a([
   t$2("gs-mutations")
 ], MutationsComponent);
 function getPrevalenceOverTimeTableData(data, granularity) {
@@ -5929,6 +5938,12 @@ class YearMonthDay {
   toString() {
     return this.text;
   }
+  get firstDay() {
+    return this;
+  }
+  get lastDay() {
+    return this;
+  }
   get year() {
     return this.cache.getYear(`${this.yearNumber}`);
   }
@@ -5967,6 +5982,10 @@ class YearWeek {
     const firstDay = dayjs().year(this.isoYearNumber).month(1).date(4).isoWeek(this.isoWeekNumber).startOf("isoWeek");
     return this.cache.getYearMonthDay(firstDay.format("YYYY-MM-DD"));
   }
+  get lastDay() {
+    const lastDay = dayjs().year(this.isoYearNumber).month(12).date(31).isoWeek(this.isoWeekNumber).endOf("isoWeek");
+    return this.cache.getYearMonthDay(lastDay.format("YYYY-MM-DD"));
+  }
   get year() {
     return this.cache.getYear(`${this.isoYearNumber}`);
   }
@@ -5998,6 +6017,11 @@ class YearMonth {
   get firstDay() {
     return this.cache.getYearMonthDay(dayjs(`${this.yearNumber}-${this.monthNumber}-01`).format("YYYY-MM-DD"));
   }
+  get lastDay() {
+    return this.cache.getYearMonthDay(
+      dayjs(`${this.yearNumber}-${this.monthNumber}-01`).endOf("month").format("YYYY-MM-DD")
+    );
+  }
   get year() {
     return this.cache.getYear(`${this.yearNumber}`);
   }
@@ -6028,9 +6052,15 @@ class Year {
   get firstMonth() {
     return this.cache.getYearMonth(`${this.year}-01`);
   }
+  get lastMonth() {
+    return this.cache.getYearMonth(`${this.year}-12`);
+  }
   get firstDay() {
     return this.firstMonth.firstDay;
   }
+  get lastDay() {
+    return this.lastMonth.lastDay;
+  }
   addYears(years) {
     const date = this.firstDay.dayjs.add(years, "year");
     const s2 = date.format("YYYY");
@@ -6140,9 +6170,9 @@ function getMinMaxTemporal(values) {
     }
   }
   if (min === null || max === null) {
-    return null;
+    return { min: null, max: null };
   }
-  return [min, max];
+  return { min, max };
 }
 function addUnit(temporal, amount) {
   if (temporal instanceof YearMonthDay) {
@@ -6159,6 +6189,29 @@ function addUnit(temporal, amount) {
   }
   throw new Error(`Invalid argument: ${temporal}`);
 }
+function parseDateStringToTemporal(date, granularity) {
+  const cache = TemporalCache.getInstance();
+  const day = cache.getYearMonthDay(date);
+  switch (granularity) {
+    case "day":
+      return day;
+    case "week":
+      return day.week;
+    case "month":
+      return day.month;
+    case "year":
+      return day.year;
+  }
+}
+function dateRangeCompare(a2, b3) {
+  if (a2.dateRange === null) {
+    return 1;
+  }
+  if (b3.dateRange === null) {
+    return -1;
+  }
+  return compareTemporal(a2.dateRange, b3.dateRange);
+}
 function getMinMaxNumber(values) {
   let min = null;
   let max = null;
@@ -6450,7 +6503,7 @@ class FillMissingOperator {
     if (minMax === null) {
       return childEvaluated;
     }
-    const [min, max] = minMax;
+    const { min, max } = minMax;
     const requiredKeys = this.getAllRequiredKeysFn(min, max);
     const content = childEvaluated.content;
     for (const key of requiredKeys) {
@@ -6557,39 +6610,12 @@ function queryAggregatedDataOverTime(filter, granularity, smoothingWindow, lapis
   const sortData = new SortOperator(fillData, dateRangeCompare);
   return smoothingWindow >= 1 ? new SlidingOperator(sortData, smoothingWindow, averageSmoothing) : sortData;
 }
-function mapDateToGranularityRange(d2, granularity) {
-  let dateRange = null;
-  if (d2.date !== null) {
-    const date = TemporalCache.getInstance().getYearMonthDay(d2.date);
-    switch (granularity) {
-      case "day":
-        dateRange = date;
-        break;
-      case "week":
-        dateRange = date.week;
-        break;
-      case "month":
-        dateRange = date.month;
-        break;
-      case "year":
-        dateRange = date.year;
-        break;
-    }
-  }
+function mapDateToGranularityRange(data, granularity) {
   return {
-    dateRange,
-    count: d2.count
+    dateRange: data.date === null ? null : parseDateStringToTemporal(data.date, granularity),
+    count: data.count
   };
 }
-function dateRangeCompare(a2, b3) {
-  if (a2.dateRange === null) {
-    return 1;
-  }
-  if (b3.dateRange === null) {
-    return -1;
-  }
-  return compareTemporal(a2.dateRange, b3.dateRange);
-}
 function averageSmoothing(slidingWindow) {
   const average = slidingWindow.reduce((acc, curr) => acc + curr.count, 0) / slidingWindow.length;
   const centerIndex = Math.floor(slidingWindow.length / 2);
@@ -6826,7 +6852,7 @@ const PrevalenceOverTimeTabs = ({
   };
   const tabs = views.map((view) => getTab(view));
   const toolbar = (activeTab) => /* @__PURE__ */ u$1(
-    Toolbar$2,
+    Toolbar$3,
     {
       activeTab,
       yAxisScaleType,
@@ -6840,7 +6866,7 @@ const PrevalenceOverTimeTabs = ({
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
 };
-const Toolbar$2 = ({
+const Toolbar$3 = ({
   activeTab,
   yAxisScaleType,
   setYAxisScaleType,
@@ -6878,14 +6904,14 @@ const PrevalenceOverTimeInfo = () => {
   ] });
 };
 const maxInData = (data) => Math.max(...data.flatMap((variant) => variant.content.map((dataPoint) => dataPoint.prevalence)));
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
   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$9(target, key, result);
   return result;
 };
 let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -6926,43 +6952,43 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     );
   }
 };
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: Object })
 ], PrevalenceOverTimeComponent.prototype, "numeratorFilter", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: Object })
 ], PrevalenceOverTimeComponent.prototype, "denominatorFilter", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "granularity", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: Number })
 ], PrevalenceOverTimeComponent.prototype, "smoothingWindow", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: Array })
 ], PrevalenceOverTimeComponent.prototype, "views", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: Array })
 ], PrevalenceOverTimeComponent.prototype, "confidenceIntervalMethods", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "width", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "height", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "lapisDateField", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: Object })
 ], PrevalenceOverTimeComponent.prototype, "pageSize", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "yAxisMaxLinear", 2);
-__decorateClass$7([
+__decorateClass$9([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "yAxisMaxLogarithmic", 2);
-PrevalenceOverTimeComponent = __decorateClass$7([
+PrevalenceOverTimeComponent = __decorateClass$9([
   t$2("gs-prevalence-over-time")
 ], PrevalenceOverTimeComponent);
 Chart.register(...registerables, LogitScale);
@@ -7105,11 +7131,10 @@ async function queryRelativeGrowthAdvantage(numerator, denominator, generationTi
     mapNumerator.evaluate(lapis, signal),
     mapDenominator.evaluate(lapis, signal)
   ]);
-  const minMaxDate = getMinMaxTemporal(denominatorData.content.map((d2) => d2.date));
-  if (!minMaxDate) {
+  const { min: minDate, max: maxDate } = getMinMaxTemporal(denominatorData.content.map((d2) => d2.date));
+  if (!minDate && !maxDate) {
     return null;
   }
-  const [minDate, maxDate] = minMaxDate;
   const numeratorCounts = /* @__PURE__ */ new Map();
   numeratorData.content.forEach((d2) => {
     if (d2.date) {
@@ -7287,14 +7312,14 @@ const RelativeGrowthAdvantageInfo = ({ generationTime }) => {
     ] })
   ] });
 };
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
   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$8(target, key, result);
   return result;
 };
 let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
@@ -7329,34 +7354,34 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
     );
   }
 };
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: Object })
 ], RelativeGrowthAdvantageComponent.prototype, "numeratorFilter", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: Object })
 ], RelativeGrowthAdvantageComponent.prototype, "denominatorFilter", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: Number })
 ], RelativeGrowthAdvantageComponent.prototype, "generationTime", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: Array })
 ], RelativeGrowthAdvantageComponent.prototype, "views", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "width", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "height", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "lapisDateField", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "yAxisMaxLinear", 2);
-__decorateClass$6([
+__decorateClass$8([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "yAxisMaxLogarithmic", 2);
-RelativeGrowthAdvantageComponent = __decorateClass$6([
+RelativeGrowthAdvantageComponent = __decorateClass$8([
   t$2("gs-relative-growth-advantage")
 ], RelativeGrowthAdvantageComponent);
 const compareAscending = (a2, b3) => {
@@ -7445,22 +7470,22 @@ const AggregatedDataTabs = ({ data, views, fields, pageSize }) => {
     }
   };
   const tabs = views.map((view) => getTab(view));
-  return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar: /* @__PURE__ */ u$1(Toolbar$1, { data }) });
+  return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar: /* @__PURE__ */ u$1(Toolbar$2, { data }) });
 };
-const Toolbar$1 = ({ data }) => {
+const Toolbar$2 = ({ data }) => {
   return /* @__PURE__ */ u$1("div", { class: "flex flex-row", children: [
     /* @__PURE__ */ u$1(CsvDownloadButton, { className: "mx-1 btn btn-xs", getData: () => data, filename: "aggregate.csv" }),
     /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for aggregate" })
   ] });
 };
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
   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$7(target, key, result);
   return result;
 };
 let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -7491,31 +7516,31 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
     );
   }
 };
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: Array })
 ], AggregateComponent.prototype, "fields", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: Array })
 ], AggregateComponent.prototype, "views", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: Object })
 ], AggregateComponent.prototype, "filter", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: String })
 ], AggregateComponent.prototype, "width", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: String })
 ], AggregateComponent.prototype, "height", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: String })
 ], AggregateComponent.prototype, "initialSortField", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: String })
 ], AggregateComponent.prototype, "initialSortDirection", 2);
-__decorateClass$5([
+__decorateClass$7([
   n2({ type: Object })
 ], AggregateComponent.prototype, "pageSize", 2);
-AggregateComponent = __decorateClass$5([
+AggregateComponent = __decorateClass$7([
   t$2("gs-aggregate")
 ], AggregateComponent);
 const getNumberOfSequencesOverTimeTableData = (data, dateRangeKey) => {
@@ -7531,7 +7556,7 @@ const getNumberOfSequencesOverTimeTableData = (data, dateRangeKey) => {
   if (minMax === null) {
     return [];
   }
-  const allDateRanges = generateAllInRange(...minMax);
+  const allDateRanges = generateAllInRange(minMax.min, minMax.max);
   if (allDateRangesThatOccurInData.has(null)) {
     allDateRanges.unshift(null);
   }
@@ -7729,7 +7754,7 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) =>
     {
       tabs: views.map((view) => getTab(view)),
       toolbar: (activeTab) => /* @__PURE__ */ u$1(
-        Toolbar,
+        Toolbar$1,
         {
           activeTab,
           data,
@@ -7741,7 +7766,7 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) =>
     }
   );
 };
-const Toolbar = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleType }) => {
+const Toolbar$1 = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleType }) => {
   return /* @__PURE__ */ u$1(Fragment, { children: [
     activeTab !== "Table" && /* @__PURE__ */ u$1(
       ScalingSelector,
@@ -7766,14 +7791,14 @@ const NumberSequencesOverTimeInfo = () => /* @__PURE__ */ u$1(Info, { height: "1
   /* @__PURE__ */ u$1(InfoHeadline1, { children: "Number of sequences over time" }),
   /* @__PURE__ */ u$1(InfoParagraph, { children: /* @__PURE__ */ u$1("a", { href: "https://github.com/GenSpectrum/dashboard-components/issues/315", children: "TODO" }) })
 ] });
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
   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$6(target, key, result);
   return result;
 };
 let NumberSequencesOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -7804,57 +7829,455 @@ let NumberSequencesOverTimeComponent = class extends PreactLitAdapterWithGridJsS
     );
   }
 };
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: Object })
 ], NumberSequencesOverTimeComponent.prototype, "lapisFilter", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: String })
 ], NumberSequencesOverTimeComponent.prototype, "lapisDateField", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: Array })
 ], NumberSequencesOverTimeComponent.prototype, "views", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: String })
 ], NumberSequencesOverTimeComponent.prototype, "width", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: String })
 ], NumberSequencesOverTimeComponent.prototype, "height", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: String })
 ], NumberSequencesOverTimeComponent.prototype, "granularity", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: Number })
 ], NumberSequencesOverTimeComponent.prototype, "smoothingWindow", 2);
-__decorateClass$4([
+__decorateClass$6([
   n2({ type: Object })
 ], NumberSequencesOverTimeComponent.prototype, "pageSize", 2);
-NumberSequencesOverTimeComponent = __decorateClass$4([
+NumberSequencesOverTimeComponent = __decorateClass$6([
   t$2("gs-number-sequences-over-time")
 ], NumberSequencesOverTimeComponent);
-const PRESET_VALUE_CUSTOM = "custom";
-const PRESET_VALUE_ALL_TIMES = "allTimes";
-const PRESET_VALUE_LAST_2_WEEKS = "last2Weeks";
-const PRESET_VALUE_LAST_MONTH = "lastMonth";
-const PRESET_VALUE_LAST_2_MONTHS = "last2Months";
-const PRESET_VALUE_LAST_3_MONTHS = "last3Months";
-const PRESET_VALUE_LAST_6_MONTHS = "last6Months";
-const presets = {
-  [PRESET_VALUE_CUSTOM]: { label: "Custom" },
-  [PRESET_VALUE_ALL_TIMES]: { label: "All times" },
-  [PRESET_VALUE_LAST_2_WEEKS]: { label: "Last 2 weeks" },
-  [PRESET_VALUE_LAST_MONTH]: { label: "Last month" },
-  [PRESET_VALUE_LAST_2_MONTHS]: { label: "Last 2 months" },
-  [PRESET_VALUE_LAST_3_MONTHS]: { label: "Last 3 months" },
-  [PRESET_VALUE_LAST_6_MONTHS]: { label: "Last 6 months" }
-};
-const getSelectableOptions = (customSelectOptions) => {
-  const presetOptions = Object.entries(presets).map(([key, value]) => {
-    return { label: value.label, value: key };
-  });
-  const customOptions = customSelectOptions.map((customSelectOption) => {
-    return { label: customSelectOption.label, value: customSelectOption.label };
+function getFilteredMutationOverTimeData(data, displayedSegments, displayedMutationTypes, proportionInterval) {
+  const filteredData = data.copy();
+  filterDisplayedSegments(displayedSegments, filteredData);
+  filterMutationTypes(displayedMutationTypes, filteredData);
+  filterProportion(filteredData, proportionInterval);
+  return filteredData;
+}
+function filterDisplayedSegments(displayedSegments, data) {
+  displayedSegments.forEach((segment) => {
+    if (!segment.checked) {
+      data.getFirstAxisKeys().forEach((mutation) => {
+        if (mutation.segment === segment.segment) {
+          data.deleteRow(mutation);
+        }
+      });
+    }
   });
-  return [...presetOptions, ...customOptions];
+}
+function filterMutationTypes(displayedMutationTypes, data) {
+  displayedMutationTypes.forEach((mutationType) => {
+    if (!mutationType.checked) {
+      data.getFirstAxisKeys().forEach((mutation) => {
+        if (mutationType.type === mutation.type) {
+          data.deleteRow(mutation);
+        }
+      });
+    }
+  });
+}
+function filterProportion(data, proportionInterval) {
+  data.getFirstAxisKeys().forEach((mutation) => {
+    const row = data.getRow(mutation, 0);
+    if (!row.some((value) => value >= proportionInterval.min && value <= proportionInterval.max)) {
+      data.deleteRow(mutation);
+    }
+  });
+}
+const MutationsOverTimeGrid = ({ data }) => {
+  const mutations = data.getFirstAxisKeys();
+  const dates = data.getSecondAxisKeys().sort((a2, b3) => compareTemporal(a2, b3));
+  return /* @__PURE__ */ u$1(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateRows: `repeat(${mutations.length}, 24px)`,
+        gridTemplateColumns: `8rem repeat(${dates.length}, minmax(1.5rem, 1fr))`
+      },
+      children: mutations.map((mutation, i2) => {
+        return /* @__PURE__ */ u$1(Fragment, { children: [
+          /* @__PURE__ */ u$1(
+            "div",
+            {
+              style: { gridRowStart: i2 + 1, gridColumnStart: 1 },
+              children: /* @__PURE__ */ u$1(MutationCell, { mutation })
+            },
+            `mutation-${mutation.toString()}`
+          ),
+          dates.map((date, j2) => {
+            const value = data.get(mutation, date) ?? 0;
+            return /* @__PURE__ */ u$1(
+              "div",
+              {
+                style: { gridRowStart: i2 + 1, gridColumnStart: j2 + 2 },
+                children: /* @__PURE__ */ u$1(ProportionCell, { value, date, mutation })
+              },
+              `${mutation.toString()}-${date.toString()}`
+            );
+          })
+        ] }, `fragment-${mutation.toString()}`);
+      })
+    }
+  );
+};
+const ProportionCell = ({ value }) => {
+  return /* @__PURE__ */ u$1(Fragment, { children: /* @__PURE__ */ u$1("div", { className: "py-1", children: /* @__PURE__ */ u$1(
+    "div",
+    {
+      style: { backgroundColor: backgroundColor(value), color: textColor(value) },
+      className: "text-center hover:font-bold text-xs",
+      children: formatProportion(value, 0)
+    }
+  ) }) });
+};
+const backgroundColor = (proportion) => {
+  const minAlpha = 0;
+  const maxAlpha = 1;
+  const alpha = minAlpha + (maxAlpha - minAlpha) * proportion;
+  return singleGraphColorRGBByName("indigo", alpha);
+};
+const textColor = (proportion) => {
+  return proportion > 0.5 ? "white" : "black";
+};
+const MutationCell = ({ mutation }) => {
+  return /* @__PURE__ */ u$1("div", { className: "text-center", children: mutation.toString() });
+};
+class Map2d {
+  constructor(serializeFirstAxis = (key) => typeof key === "string" ? key : hash(key), serializeSecondAxis = (key) => typeof key === "string" ? key : hash(key)) {
+    this.serializeFirstAxis = serializeFirstAxis;
+    this.serializeSecondAxis = serializeSecondAxis;
+    this.data = /* @__PURE__ */ new Map();
+    this.keysFirstAxis = /* @__PURE__ */ new Map();
+    this.keysSecondAxis = /* @__PURE__ */ new Map();
+  }
+  get(keyFirstAxis, keySecondAxis) {
+    var _a;
+    const serializedKeyFirstAxis = this.serializeFirstAxis(keyFirstAxis);
+    const serializedKeySecondAxis = this.serializeSecondAxis(keySecondAxis);
+    return (_a = this.data.get(serializedKeyFirstAxis)) == null ? void 0 : _a.get(serializedKeySecondAxis);
+  }
+  getRow(key, fillEmptyWith) {
+    const serializedKeyFirstAxis = this.serializeFirstAxis(key);
+    const row = this.data.get(serializedKeyFirstAxis);
+    if (row === void 0) {
+      return [];
+    }
+    return Array.from(this.keysSecondAxis.keys()).map((key2) => row.get(key2) ?? fillEmptyWith);
+  }
+  set(keyFirstAxis, keySecondAxis, value) {
+    const serializedKeyFirstAxis = this.serializeFirstAxis(keyFirstAxis);
+    const serializedKeySecondAxis = this.serializeSecondAxis(keySecondAxis);
+    if (!this.data.has(serializedKeyFirstAxis)) {
+      this.data.set(serializedKeyFirstAxis, /* @__PURE__ */ new Map());
+    }
+    this.data.get(serializedKeyFirstAxis).set(serializedKeySecondAxis, value);
+    this.keysFirstAxis.set(serializedKeyFirstAxis, keyFirstAxis);
+    this.keysSecondAxis.set(serializedKeySecondAxis, keySecondAxis);
+  }
+  deleteRow(key) {
+    const serializedKeyFirstAxis = this.serializeFirstAxis(key);
+    this.data.delete(serializedKeyFirstAxis);
+    this.keysFirstAxis.delete(serializedKeyFirstAxis);
+  }
+  getFirstAxisKeys() {
+    return Array.from(this.keysFirstAxis.values());
+  }
+  getSecondAxisKeys() {
+    return Array.from(this.keysSecondAxis.values());
+  }
+  getAsArray(fillEmptyWith) {
+    return this.getFirstAxisKeys().map((firstAxisKey) => {
+      return this.getSecondAxisKeys().map((secondAxisKey) => {
+        return this.get(firstAxisKey, secondAxisKey) ?? fillEmptyWith;
+      });
+    });
+  }
+  copy() {
+    const copy = new Map2d(this.serializeFirstAxis, this.serializeSecondAxis);
+    this.data.forEach((value, key) => {
+      const keyFirstAxis = this.keysFirstAxis.get(key);
+      value.forEach((value2, key2) => {
+        const keySecondAxis = this.keysSecondAxis.get(key2);
+        copy.set(keyFirstAxis, keySecondAxis, value2);
+      });
+    });
+    return copy;
+  }
+}
+async function queryMutationsOverTimeData(lapisFilter, sequenceType, lapis, lapisDateField, granularity, signal) {
+  const allDates = await getDatesInDataset(lapisFilter, lapis, granularity, lapisDateField, signal);
+  const subQueries = allDates.map(async (date) => {
+    const dateFrom = date.firstDay.toString();
+    const dateTo = date.lastDay.toString();
+    const filter = {
+      ...lapisFilter,
+      [`${lapisDateField}From`]: dateFrom,
+      [`${lapisDateField}To`]: dateTo
+    };
+    const data2 = await fetchAndPrepareSubstitutionsOrDeletions(filter, sequenceType).evaluate(lapis, signal);
+    return {
+      date,
+      mutations: data2.content
+    };
+  });
+  const data = await Promise.all(subQueries);
+  return groupByMutation(data);
+}
+async function getDatesInDataset(lapisFilter, lapis, granularity, lapisDateField, signal) {
+  const { content: availableDates } = await queryAvailableDates(
+    lapisFilter,
+    lapis,
+    granularity,
+    lapisDateField,
+    signal
+  );
+  const { dateFrom, dateTo } = getDateRangeFromFilter(lapisFilter, lapisDateField, granularity);
+  const { min, max } = getMinMaxTemporal(availableDates);
+  return generateAllInRange(dateFrom ?? min, dateTo ?? max);
+}
+function getDateRangeFromFilter(lapisFilter, lapisDateField, granularity) {
+  const valueFromFilter = lapisFilter[lapisDateField];
+  if (valueFromFilter) {
+    return {
+      dateFrom: parseDateStringToTemporal(valueFromFilter, granularity),
+      dateTo: parseDateStringToTemporal(valueFromFilter, granularity)
+    };
+  }
+  const minFromFilter = lapisFilter[`${lapisDateField}From`];
+  const maxFromFilter = lapisFilter[`${lapisDateField}To`];
+  return {
+    dateFrom: minFromFilter ? parseDateStringToTemporal(minFromFilter, granularity) : null,
+    dateTo: maxFromFilter ? parseDateStringToTemporal(maxFromFilter, granularity) : null
+  };
+}
+function queryAvailableDates(lapisFilter, lapis, granularity, lapisDateField, signal) {
+  return fetchAndPrepareDates(lapisFilter, granularity, lapisDateField).evaluate(lapis, signal);
+}
+function fetchAndPrepareDates(filter, granularity, lapisDateField) {
+  const fetchData = new FetchAggregatedOperator(filter, [lapisDateField]);
+  const dataWithFixedDateKey = new RenameFieldOperator(fetchData, lapisDateField, "date");
+  const mapData = new MapOperator(dataWithFixedDateKey, (data) => mapDateToGranularityRange(data, granularity));
+  const groupByData = new GroupByAndSumOperator(mapData, "dateRange", "count");
+  const sortData = new SortOperator(groupByData, dateRangeCompare);
+  return new MapOperator(sortData, (data) => data.dateRange);
+}
+function fetchAndPrepareSubstitutionsOrDeletions(filter, sequenceType) {
+  return new FetchSubstitutionsOrDeletionsOperator(filter, sequenceType, 1e-3);
+}
+function groupByMutation(data) {
+  const dataArray = new Map2d(
+    (mutation) => mutation.code,
+    (date) => date.toString()
+  );
+  data.forEach((mutationData) => {
+    mutationData.mutations.forEach((mutationEntry) => {
+      dataArray.set(mutationEntry.mutation, mutationData.date, mutationEntry.proportion);
+    });
+  });
+  addZeroValuesForDatesWithNoMutationData(dataArray, data);
+  return dataArray;
+}
+function addZeroValuesForDatesWithNoMutationData(dataArray, data) {
+  if (dataArray.getFirstAxisKeys().length !== 0) {
+    const someMutation = dataArray.getFirstAxisKeys()[0];
+    data.forEach((mutationData) => {
+      if (mutationData.mutations.length === 0) {
+        dataArray.set(someMutation, mutationData.date, 0);
+      }
+    });
+  }
+}
+const MutationsOverTime = ({ width, height, ...innerProps }) => {
+  const size2 = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(MutationsOverTimeInner, { ...innerProps }) }) });
+};
+const MutationsOverTimeInner = ({
+  lapisFilter,
+  sequenceType,
+  views,
+  granularity,
+  lapisDateField
+}) => {
+  const lapis = x(LapisUrlContext);
+  const { data, error, isLoading } = useQuery(async () => {
+    return queryMutationsOverTimeData(lapisFilter, sequenceType, lapis, lapisDateField, granularity);
+  }, [lapisFilter, sequenceType, lapis, granularity, lapisDateField]);
+  if (isLoading) {
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
+  }
+  if (error !== null) {
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
+  }
+  if (data === null) {
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
+  }
+  return /* @__PURE__ */ u$1(MutationsOverTimeTabs, { mutationOverTimeData: data, sequenceType, views });
+};
+const MutationsOverTimeTabs = ({
+  mutationOverTimeData,
+  sequenceType,
+  views
+}) => {
+  const [proportionInterval, setProportionInterval] = h({ min: 0.05, max: 0.9 });
+  const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
+  const [displayedMutationTypes, setDisplayedMutationTypes] = h([
+    { label: "Substitutions", checked: true, type: "substitution" },
+    { label: "Deletions", checked: true, type: "deletion" }
+  ]);
+  const filteredData = T(
+    () => getFilteredMutationOverTimeData(
+      mutationOverTimeData,
+      displayedSegments,
+      displayedMutationTypes,
+      proportionInterval
+    ),
+    [mutationOverTimeData, displayedSegments, displayedMutationTypes, proportionInterval]
+  );
+  const getTab = (view) => {
+    switch (view) {
+      case "grid":
+        return {
+          title: "Grid",
+          content: /* @__PURE__ */ u$1(MutationsOverTimeGrid, { data: filteredData })
+        };
+    }
+  };
+  const tabs = views.map((view) => getTab(view));
+  const toolbar = () => /* @__PURE__ */ u$1(
+    Toolbar,
+    {
+      displayedSegments,
+      setDisplayedSegments,
+      displayedMutationTypes,
+      setDisplayedMutationTypes,
+      proportionInterval,
+      setProportionInterval
+    }
+  );
+  return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
+};
+const Toolbar = ({
+  displayedSegments,
+  setDisplayedSegments,
+  displayedMutationTypes,
+  setDisplayedMutationTypes,
+  proportionInterval,
+  setProportionInterval
+}) => {
+  return /* @__PURE__ */ u$1(Fragment, { children: [
+    /* @__PURE__ */ u$1(SegmentSelector, { displayedSegments, setDisplayedSegments }),
+    /* @__PURE__ */ u$1(
+      MutationTypeSelector,
+      {
+        setDisplayedMutationTypes,
+        displayedMutationTypes
+      }
+    ),
+    /* @__PURE__ */ u$1(Fragment, { children: /* @__PURE__ */ u$1(
+      ProportionSelectorDropdown,
+      {
+        proportionInterval,
+        setMinProportion: (min) => setProportionInterval((prev) => ({ ...prev, min })),
+        setMaxProportion: (max) => setProportionInterval((prev) => ({ ...prev, max }))
+      }
+    ) }),
+    /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for mutations over time" })
+  ] });
+};
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+  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);
+  return result;
+};
+let MutationsOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles {
+  constructor() {
+    super(...arguments);
+    this.lapisFilter = {};
+    this.sequenceType = "nucleotide";
+    this.views = ["grid"];
+    this.width = "100%";
+    this.height = "700px";
+    this.granularity = "week";
+    this.lapisDateField = "date";
+  }
+  render() {
+    return /* @__PURE__ */ u$1(
+      MutationsOverTime,
+      {
+        lapisFilter: this.lapisFilter,
+        sequenceType: this.sequenceType,
+        views: this.views,
+        width: this.width,
+        height: this.height,
+        granularity: this.granularity,
+        lapisDateField: this.lapisDateField
+      }
+    );
+  }
+};
+__decorateClass$5([
+  n2({ type: Object })
+], MutationsOverTimeComponent.prototype, "lapisFilter", 2);
+__decorateClass$5([
+  n2({ type: String })
+], MutationsOverTimeComponent.prototype, "sequenceType", 2);
+__decorateClass$5([
+  n2({ type: Array })
+], MutationsOverTimeComponent.prototype, "views", 2);
+__decorateClass$5([
+  n2({ type: String })
+], MutationsOverTimeComponent.prototype, "width", 2);
+__decorateClass$5([
+  n2({ type: String })
+], MutationsOverTimeComponent.prototype, "height", 2);
+__decorateClass$5([
+  n2({ type: String })
+], MutationsOverTimeComponent.prototype, "granularity", 2);
+__decorateClass$5([
+  n2({ type: String })
+], MutationsOverTimeComponent.prototype, "lapisDateField", 2);
+MutationsOverTimeComponent = __decorateClass$5([
+  t$2("gs-mutations-over-time")
+], MutationsOverTimeComponent);
+const PRESET_VALUE_CUSTOM = "custom";
+const PRESET_VALUE_ALL_TIMES = "allTimes";
+const PRESET_VALUE_LAST_2_WEEKS = "last2Weeks";
+const PRESET_VALUE_LAST_MONTH = "lastMonth";
+const PRESET_VALUE_LAST_2_MONTHS = "last2Months";
+const PRESET_VALUE_LAST_3_MONTHS = "last3Months";
+const PRESET_VALUE_LAST_6_MONTHS = "last6Months";
+const presets = {
+  [PRESET_VALUE_CUSTOM]: { label: "Custom" },
+  [PRESET_VALUE_ALL_TIMES]: { label: "All times" },
+  [PRESET_VALUE_LAST_2_WEEKS]: { label: "Last 2 weeks" },
+  [PRESET_VALUE_LAST_MONTH]: { label: "Last month" },
+  [PRESET_VALUE_LAST_2_MONTHS]: { label: "Last 2 months" },
+  [PRESET_VALUE_LAST_3_MONTHS]: { label: "Last 3 months" },
+  [PRESET_VALUE_LAST_6_MONTHS]: { label: "Last 6 months" }
+};
+const getSelectableOptions = (customSelectOptions) => {
+  const presetOptions = Object.entries(presets).map(([key, value]) => {
+    return { label: value.label, value: key };
+  });
+  const customOptions = customSelectOptions.map((customSelectOption) => {
+    return { label: customSelectOption.label, value: customSelectOption.label };
+  });
+  return [...presetOptions, ...customOptions];
 };
 const getDatesForSelectorValue = (selectorValue, customSelectOptions, earliestDate) => {
   const today = /* @__PURE__ */ new Date();
@@ -8091,14 +8514,14 @@ const DateRangeSelectorInner = ({
     ] })
   ] });
 };
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
   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$4(target, key, result);
   return result;
 };
 let DateRangeSelectorComponent = class extends PreactLitAdapter {
@@ -8127,28 +8550,28 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
     );
   }
 };
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: Array })
 ], DateRangeSelectorComponent.prototype, "customSelectOptions", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: String })
 ], DateRangeSelectorComponent.prototype, "earliestDate", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2()
 ], DateRangeSelectorComponent.prototype, "initialValue", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2()
 ], DateRangeSelectorComponent.prototype, "initialDateFrom", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2()
 ], DateRangeSelectorComponent.prototype, "initialDateTo", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: String })
 ], DateRangeSelectorComponent.prototype, "width", 2);
-__decorateClass$3([
+__decorateClass$4([
   n2({ type: String })
 ], DateRangeSelectorComponent.prototype, "dateColumn", 2);
-DateRangeSelectorComponent = __decorateClass$3([
+DateRangeSelectorComponent = __decorateClass$4([
   t$2("gs-date-range-selector")
 ], DateRangeSelectorComponent);
 async function fetchAutocompletionList(fields, lapis, signal) {
@@ -8264,14 +8687,14 @@ const hasMatchingEntry = (data, eventDetail) => {
   const matchingEntries = Object.entries(eventDetail).filter(([, value]) => value !== void 0).reduce((filteredData, [key, value]) => filteredData.filter((it) => it[key] === value), data);
   return matchingEntries.length > 0;
 };
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
   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$3(target, key, result);
   return result;
 };
 let LocationFilterComponent = class extends PreactLitAdapter {
@@ -8294,19 +8717,19 @@ let LocationFilterComponent = class extends PreactLitAdapter {
     );
   }
 };
-__decorateClass$2([
+__decorateClass$3([
   n2()
 ], LocationFilterComponent.prototype, "initialValue", 2);
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: Array })
 ], LocationFilterComponent.prototype, "fields", 2);
-__decorateClass$2([
+__decorateClass$3([
   n2({ type: String })
 ], LocationFilterComponent.prototype, "width", 2);
-__decorateClass$2([
+__decorateClass$3([
   n2()
 ], LocationFilterComponent.prototype, "placeholderText", 2);
-LocationFilterComponent = __decorateClass$2([
+LocationFilterComponent = __decorateClass$3([
   t$2("gs-location-filter")
 ], LocationFilterComponent);
 async function fetchAutocompleteList(lapis, field, signal) {
@@ -8366,14 +8789,14 @@ const TextInputInner = ({ lapisField, placeholderText, initialValue }) => {
     /* @__PURE__ */ u$1("datalist", { id: lapisField, children: data.map((item) => /* @__PURE__ */ u$1("option", { value: item }, item)) })
   ] });
 };
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
   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$2(target, key, result);
   return result;
 };
 let TextInputComponent = class extends PreactLitAdapter {
@@ -8396,19 +8819,19 @@ let TextInputComponent = class extends PreactLitAdapter {
     );
   }
 };
-__decorateClass$1([
+__decorateClass$2([
   n2()
 ], TextInputComponent.prototype, "initialValue", 2);
-__decorateClass$1([
+__decorateClass$2([
   n2()
 ], TextInputComponent.prototype, "lapisField", 2);
-__decorateClass$1([
+__decorateClass$2([
   n2()
 ], TextInputComponent.prototype, "placeholderText", 2);
-__decorateClass$1([
+__decorateClass$2([
   n2({ type: String })
 ], TextInputComponent.prototype, "width", 2);
-TextInputComponent = __decorateClass$1([
+TextInputComponent = __decorateClass$2([
   t$2("gs-text-input")
 ], TextInputComponent);
 const ReferenceGenomesAwaiter = ({ children }) => {
@@ -8867,68 +9290,68 @@ const SelectedMutationDisplay = ({ selectedFilters, setSelectedFilters, fireChan
   ] });
 };
 const SelectedAminoAcidInsertion = ({ insertion, onDelete }) => {
-  const backgroundColor = singleGraphColorRGBByName("teal", 0.3);
-  const textColor = singleGraphColorRGBByName("teal", 1);
+  const backgroundColor2 = singleGraphColorRGBByName("teal", 0.3);
+  const textColor2 = singleGraphColorRGBByName("teal", 1);
   return /* @__PURE__ */ u$1(
     SelectedFilter,
     {
       mutation: insertion,
       onDelete,
-      backgroundColor,
-      textColor
+      backgroundColor: backgroundColor2,
+      textColor: textColor2
     }
   );
 };
 const SelectedAminoAcidMutation = ({ mutation, onDelete }) => {
-  const backgroundColor = singleGraphColorRGBByName("rose", 0.3);
-  const textColor = singleGraphColorRGBByName("rose", 1);
+  const backgroundColor2 = singleGraphColorRGBByName("rose", 0.3);
+  const textColor2 = singleGraphColorRGBByName("rose", 1);
   return /* @__PURE__ */ u$1(
     SelectedFilter,
     {
       mutation,
       onDelete,
-      backgroundColor,
-      textColor
+      backgroundColor: backgroundColor2,
+      textColor: textColor2
     }
   );
 };
 const SelectedNucleotideMutation = ({ mutation, onDelete }) => {
-  const backgroundColor = singleGraphColorRGBByName("indigo", 0.3);
-  const textColor = singleGraphColorRGBByName("indigo", 1);
+  const backgroundColor2 = singleGraphColorRGBByName("indigo", 0.3);
+  const textColor2 = singleGraphColorRGBByName("indigo", 1);
   return /* @__PURE__ */ u$1(
     SelectedFilter,
     {
       mutation,
       onDelete,
-      backgroundColor,
-      textColor
+      backgroundColor: backgroundColor2,
+      textColor: textColor2
     }
   );
 };
 const SelectedNucleotideInsertion = ({ insertion, onDelete }) => {
-  const backgroundColor = singleGraphColorRGBByName("green", 0.3);
-  const textColor = singleGraphColorRGBByName("green", 1);
+  const backgroundColor2 = singleGraphColorRGBByName("green", 0.3);
+  const textColor2 = singleGraphColorRGBByName("green", 1);
   return /* @__PURE__ */ u$1(
     SelectedFilter,
     {
       mutation: insertion,
       onDelete,
-      backgroundColor,
-      textColor
+      backgroundColor: backgroundColor2,
+      textColor: textColor2
     }
   );
 };
 const SelectedFilter = ({
   mutation,
   onDelete,
-  backgroundColor,
-  textColor
+  backgroundColor: backgroundColor2,
+  textColor: textColor2
 }) => {
   return /* @__PURE__ */ u$1(
     "span",
     {
       class: "inline-block mx-1 px-2 py-1 font-medium text-xs rounded-full",
-      style: { backgroundColor, color: textColor },
+      style: { backgroundColor: backgroundColor2, color: textColor2 },
       children: [
         mutation.toString(),
         /* @__PURE__ */ u$1("button", { type: "button", onClick: () => onDelete(mutation), children: /* @__PURE__ */ u$1(DeleteIcon, {}) })
@@ -8944,14 +9367,14 @@ function mapToMutationFilterStrings(selectedFilters) {
     nucleotideInsertions: selectedFilters.nucleotideInsertions.map((insertion) => insertion.toString())
   };
 }
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
   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$1(target, key, result);
   return result;
 };
 let MutationFilterComponent = class extends PreactLitAdapter {
@@ -8964,23 +9387,134 @@ let MutationFilterComponent = class extends PreactLitAdapter {
     return /* @__PURE__ */ u$1(ReferenceGenomesAwaiter, { children: /* @__PURE__ */ u$1(MutationFilter, { initialValue: this.initialValue, width: this.width }) });
   }
 };
-__decorateClass([
+__decorateClass$1([
   n2({ type: Object })
 ], MutationFilterComponent.prototype, "initialValue", 2);
-__decorateClass([
+__decorateClass$1([
   n2({ type: String })
 ], MutationFilterComponent.prototype, "width", 2);
-MutationFilterComponent = __decorateClass([
+MutationFilterComponent = __decorateClass$1([
   t$2("gs-mutation-filter")
 ], MutationFilterComponent);
+async function fetchLineageAutocompleteList(lapis, field, signal) {
+  const fetchAggregatedOperator = new FetchAggregatedOperator({}, [field]);
+  const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
+  return data.flatMap((item) => [item[field], `${item[field]}*`]).sort();
+}
+const LineageFilter = ({ width, ...innerProps }) => {
+  const size2 = { width, height: "3rem" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(LineageFilterInner, { ...innerProps }) }) });
+};
+const LineageFilterInner = ({
+  lapisField,
+  placeholderText,
+  initialValue
+}) => {
+  const lapis = x(LapisUrlContext);
+  const inputRef = A(null);
+  const { data, error, isLoading } = useQuery(
+    () => fetchLineageAutocompleteList(lapis, lapisField),
+    [lapisField, lapis]
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
+  }
+  if (error !== null) {
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
+  }
+  if (data === null) {
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
+  }
+  const onInput = () => {
+    var _a, _b, _c;
+    const value = ((_a = inputRef.current) == null ? void 0 : _a.value) === "" ? void 0 : (_b = inputRef.current) == null ? void 0 : _b.value;
+    if (isValidValue(value)) {
+      (_c = inputRef.current) == null ? void 0 : _c.dispatchEvent(
+        new CustomEvent("gs-lineage-filter-changed", {
+          detail: { [lapisField]: value },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  };
+  const isValidValue = (value) => {
+    if (value === void 0) {
+      return true;
+    }
+    return data.includes(value);
+  };
+  return /* @__PURE__ */ u$1(Fragment, { children: [
+    /* @__PURE__ */ u$1(
+      "input",
+      {
+        type: "text",
+        class: "input input-bordered w-full",
+        placeholder: placeholderText !== void 0 ? placeholderText : lapisField,
+        onInput,
+        ref: inputRef,
+        list: lapisField,
+        value: initialValue
+      }
+    ),
+    /* @__PURE__ */ u$1("datalist", { id: lapisField, children: data.map((item) => /* @__PURE__ */ u$1("option", { value: item }, item)) })
+  ] });
+};
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  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);
+  return result;
+};
+let LineageFilterComponent = class extends PreactLitAdapter {
+  constructor() {
+    super(...arguments);
+    this.initialValue = "";
+    this.lapisField = "";
+    this.placeholderText = "";
+    this.width = "100%";
+  }
+  render() {
+    return /* @__PURE__ */ u$1(
+      LineageFilter,
+      {
+        lapisField: this.lapisField,
+        placeholderText: this.placeholderText,
+        initialValue: this.initialValue,
+        width: this.width
+      }
+    );
+  }
+};
+__decorateClass([
+  n2()
+], LineageFilterComponent.prototype, "initialValue", 2);
+__decorateClass([
+  n2()
+], LineageFilterComponent.prototype, "lapisField", 2);
+__decorateClass([
+  n2()
+], LineageFilterComponent.prototype, "placeholderText", 2);
+__decorateClass([
+  n2({ type: String })
+], LineageFilterComponent.prototype, "width", 2);
+LineageFilterComponent = __decorateClass([
+  t$2("gs-lineage-filter")
+], LineageFilterComponent);
 export {
   AggregateComponent,
   App,
   DateRangeSelectorComponent,
+  LineageFilterComponent,
   LocationFilterComponent,
   MutationComparisonComponent,
   MutationFilterComponent,
   MutationsComponent,
+  MutationsOverTimeComponent,
   NumberSequencesOverTimeComponent,
   PrevalenceOverTimeComponent,
   RelativeGrowthAdvantageComponent,