@genspectrum/dashboard-components 0.6.6 → 0.6.8

package/dist/dashboard-components.js

@@ -6,7 +6,7 @@ import { options, createContext as createContext$1, Fragment, render } from "pre
 import { Grid } from "gridjs";
 import { Chart, registerables, Scale } from "chart.js";
 import { VennDiagramController, ArcSlice, extractSets } from "chartjs-chart-venn";
-import { autoUpdate, computePosition, offset, shift, flip, size } from "@floating-ui/dom";
+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 hash from "object-hash";
@@ -884,7 +884,7 @@ const bases = {
 };
 const sortSubstitutionsAndDeletions = (a2, b3) => {
   if (a2.segment !== b3.segment) {
-    compareSegments(a2.segment, b3.segment);
+    return compareSegments(a2.segment, b3.segment);
   }
   if (a2.position !== b3.position) {
     return comparePositions(a2.position, b3.position);
@@ -1361,58 +1361,32 @@ const ErrorDisplay = ({ error }) => {
     ] })
   ] });
 };
-const ResizeContainer = ({ children, size: size2 }) => {
-  return /* @__PURE__ */ u$1("div", { style: size2, children });
+const ResizeContainer = ({ children, size }) => {
+  return /* @__PURE__ */ u$1("div", { style: size, children });
 };
-const ErrorBoundary = ({ size: size2, children }) => {
+const ErrorBoundary = ({ size, children }) => {
   const [internalError] = b2();
   if (internalError) {
-    return /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(ErrorDisplay, { error: internalError }) });
+    return /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(ErrorDisplay, { error: internalError }) });
   }
   return /* @__PURE__ */ u$1(Fragment, { children });
 };
-const Info = ({ children, height }) => {
-  const [showHelp, setShowHelp] = h(false);
-  const referenceRef = A(null);
-  const floatingRef = A(null);
-  useFloatingUi(referenceRef, floatingRef, [
-    offset(10),
-    shift(),
-    size({
-      apply() {
-        if (!floatingRef.current) {
-          return;
-        }
-        floatingRef.current.style.width = "100vw";
-        floatingRef.current.style.height = height ? height : "50vh";
-      }
-    })
-  ]);
+const Info = ({ children }) => {
+  const dialogRef = A(null);
   const toggleHelp = () => {
-    setShowHelp(!showHelp);
+    var _a;
+    (_a = dialogRef.current) == null ? void 0 : _a.showModal();
   };
-  useCloseOnEsc(setShowHelp);
-  useCloseOnClickOutside(floatingRef, referenceRef, setShowHelp);
   return /* @__PURE__ */ u$1("div", { className: "relative", children: [
-    /* @__PURE__ */ u$1("button", { type: "button", className: "btn btn-xs", onClick: toggleHelp, ref: referenceRef, children: "?" }),
-    /* @__PURE__ */ u$1(
-      "div",
-      {
-        ref: floatingRef,
-        className: `${dropdownClass} overflow-y-auto opacity-90 ${showHelp ? "" : "hidden"}`,
-        children: [
-          /* @__PURE__ */ u$1("div", { className: "flex flex-col", children }),
-          /* @__PURE__ */ u$1(
-            "button",
-            {
-              onClick: () => setShowHelp(false),
-              className: "float-right underline text-sm hover:text-blue-700 mr-2",
-              children: "Close"
-            }
-          )
-        ]
-      }
-    )
+    /* @__PURE__ */ u$1("button", { type: "button", className: "btn btn-xs", onClick: toggleHelp, children: "?" }),
+    /* @__PURE__ */ u$1("dialog", { ref: dialogRef, className: "modal modal-bottom sm:modal-middle", children: [
+      /* @__PURE__ */ u$1("div", { className: "modal-box", children: [
+        /* @__PURE__ */ u$1("form", { method: "dialog", children: /* @__PURE__ */ u$1("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
+        /* @__PURE__ */ u$1("div", { className: "flex flex-col", children }),
+        /* @__PURE__ */ u$1("div", { className: "modal-action", children: /* @__PURE__ */ u$1("form", { method: "dialog", children: /* @__PURE__ */ u$1("button", { className: "float-right underline text-sm hover:text-blue-700 mr-2", children: "Close" }) }) })
+      ] }),
+      /* @__PURE__ */ u$1("form", { method: "dialog", className: "modal-backdrop", children: /* @__PURE__ */ u$1("button", { children: "Helper to close when clicked outside" }) })
+    ] })
   ] });
 };
 const InfoHeadline1 = ({ children }) => {
@@ -1495,7 +1469,7 @@ const MinMaxRangeSlider = ({
             ${sliderColor} ${max}%,
             ${sliderColor} 100%)
     `;
-  return /* @__PURE__ */ u$1("div", { class: "my-4 relative", children: [
+  return /* @__PURE__ */ u$1("div", { class: "my-4 relative w-full h-full", children: [
     /* @__PURE__ */ u$1(
       "input",
       {
@@ -1676,8 +1650,8 @@ function useQuery(fetchDataCallback, dependencies = []) {
   return { data, error, isLoading };
 }
 const MutationComparison = ({ 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(MutationComparisonInner, { ...innerProps }) }) });
+  const size = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(MutationComparisonInner, { ...innerProps }) }) });
 };
 const MutationComparisonInner = ({
   lapisFilters,
@@ -1805,7 +1779,7 @@ const Toolbar$5 = ({
         filename: "mutation_comparison.csv"
       }
     ),
-    /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for mutation comparison" })
+    /* @__PURE__ */ u$1(Info, { children: "Info for mutation comparison" })
   ] });
 };
 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 */';
@@ -2863,6 +2837,11 @@ html {
   visibility: visible;
   opacity: 1;
 }
+.modal-action {
+  display: flex;
+  margin-top: 1.5rem;
+  justify-content: flex-end;
+}
 :root:has(:is(.modal-open, .modal:target, .modal-toggle:checked + .modal, .modal[open])) {
   overflow: hidden;
   scrollbar-gutter: stable;
@@ -3389,6 +3368,11 @@ input.tab:checked + .tab-content,
   --tw-scale-y: 1;
   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));
 }
+.modal-action > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
 @keyframes modal-pop {
 
   0% {
@@ -3963,6 +3947,9 @@ input.tab:checked + .tab-content,
   border-end-end-radius: inherit;
   border-start-end-radius: inherit;
 }
+.modal-bottom {
+  place-items: end;
+}
 .select-xs {
   height: 1.5rem;
   min-height: 1.5rem;
@@ -4269,6 +4256,10 @@ input.tab:checked + .tab-content,
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -4326,9 +4317,15 @@ input.tab:checked + .tab-content,
 .hidden {
   display: none;
 }
+.h-8 {
+  height: 2rem;
+}
 .h-full {
   height: 100%;
 }
+.w-10 {
+  width: 2.5rem;
+}
 .w-16 {
   width: 4rem;
 }
@@ -4404,9 +4401,6 @@ input.tab:checked + .tab-content,
 .overflow-auto {
   overflow: auto;
 }
-.overflow-y-auto {
-  overflow-y: auto;
-}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -4573,9 +4567,6 @@ input.tab:checked + .tab-content,
 .underline {
   text-decoration-line: underline;
 }
-.opacity-90 {
-  opacity: 0.9;
-}
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -4601,6 +4592,25 @@ input.tab:checked + .tab-content,
 .duration-150 {
   transition-duration: 150ms;
 }
+@media (min-width: 640px) {
+
+  .sm\\:modal-middle {
+    place-items: center;
+  }
+
+  .sm\\:modal-middle :where(.modal-box) {
+    width: 91.666667%;
+    max-width: 32rem;
+    --tw-translate-y: 0px;
+    --tw-scale-x: .9;
+    --tw-scale-y: .9;
+    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));
+    border-top-left-radius: var(--rounded-box, 1rem);
+    border-top-right-radius: var(--rounded-box, 1rem);
+    border-bottom-right-radius: var(--rounded-box, 1rem);
+    border-bottom-left-radius: var(--rounded-box, 1rem);
+  }
+}
 .focus-within\\:border-gray-400:focus-within {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
@@ -4998,8 +5008,8 @@ function filterMutationsData(data, displayedSegments, displayedMutationTypes) {
   };
 }
 const Mutations = ({ 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(MutationsInner, { ...innerProps }) }) });
+  const size = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(MutationsInner, { ...innerProps }) }) });
 };
 const MutationsInner = ({
   lapisFilter,
@@ -5130,7 +5140,7 @@ const Toolbar$4 = ({
         filename: "insertions.csv"
       }
     ),
-    /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for mutations" })
+    /* @__PURE__ */ u$1(Info, { children: "Info for mutations" })
   ] });
 };
 var __defProp$a = Object.defineProperty;
@@ -6815,8 +6825,8 @@ const ScalingSelector = ({
   );
 };
 const PrevalenceOverTime = ({ 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(PrevalenceOverTimeInner, { ...innerProps }) }) });
+  const size = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(PrevalenceOverTimeInner, { ...innerProps }) }) });
 };
 const PrevalenceOverTimeInner = ({
   numeratorFilter,
@@ -6969,7 +6979,7 @@ const Toolbar$3 = ({
   ] });
 };
 const PrevalenceOverTimeInfo = () => {
-  return /* @__PURE__ */ u$1(Info, { height: "100px", children: [
+  return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Prevalence over time" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: "Prevalence over time info." })
   ] });
@@ -7275,8 +7285,8 @@ const RelativeGrowthAdvantage = ({
   height,
   ...innerProps
 }) => {
-  const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(RelativeGrowthAdvantageInner, { ...innerProps }) }) });
+  const size = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(RelativeGrowthAdvantageInner, { ...innerProps }) }) });
 };
 const RelativeGrowthAdvantageInner = ({
   numeratorFilter,
@@ -7504,8 +7514,8 @@ const AggregateTable = ({ data, fields, pageSize }) => {
   return /* @__PURE__ */ u$1(Table, { data, columns: headers, pageSize });
 };
 const Aggregate = ({ 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(AggregateInner, { ...innerProps }) }) });
+  const size = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(AggregateInner, { ...innerProps }) }) });
 };
 const AggregateInner = ({
   fields,
@@ -7546,7 +7556,7 @@ const AggregatedDataTabs = ({ data, views, fields, pageSize }) => {
 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" })
+    /* @__PURE__ */ u$1(Info, { children: "Info for aggregate" })
   ] });
 };
 var __defProp$7 = Object.defineProperty;
@@ -7771,8 +7781,8 @@ async function queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField
   return Promise.all(queries);
 }
 const NumberSequencesOverTime = ({ 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(NumberSequencesOverTimeInner, { ...innerProps }) }) });
+  const size = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(NumberSequencesOverTimeInner, { ...innerProps }) }) });
 };
 const NumberSequencesOverTimeInner = ({
   lapisFilter,
@@ -7858,7 +7868,7 @@ const Toolbar$1 = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScale
     /* @__PURE__ */ u$1(NumberSequencesOverTimeInfo, {})
   ] });
 };
-const NumberSequencesOverTimeInfo = () => /* @__PURE__ */ u$1(Info, { height: "100px", children: [
+const NumberSequencesOverTimeInfo = () => /* @__PURE__ */ u$1(Info, { children: [
   /* @__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" }) })
 ] });
@@ -7966,6 +7976,62 @@ function filterProportion(data, proportionInterval) {
     }
   });
 }
+const ColorScaleSelector = ({ colorScale, setColorScale }) => {
+  const colorDisplayCss = `w-10 h-8 border border-gray-200 mx-2 text-xs flex items-center justify-center`;
+  return /* @__PURE__ */ u$1("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ u$1(
+      "div",
+      {
+        style: {
+          backgroundColor: singleGraphColorRGBByName(colorScale.color, 0),
+          color: "black"
+        },
+        className: colorDisplayCss,
+        children: formatProportion(colorScale.min, 0)
+      }
+    ),
+    /* @__PURE__ */ u$1("div", { className: "w-64", children: /* @__PURE__ */ u$1(
+      MinMaxRangeSlider,
+      {
+        min: colorScale.min * 100,
+        max: colorScale.max * 100,
+        setMin: (percentage) => {
+          setColorScale({ ...colorScale, min: percentage / 100 });
+        },
+        setMax: (percentage) => {
+          setColorScale({ ...colorScale, max: percentage / 100 });
+        }
+      }
+    ) }),
+    /* @__PURE__ */ u$1(
+      "div",
+      {
+        style: {
+          backgroundColor: singleGraphColorRGBByName(colorScale.color, 1),
+          color: "white"
+        },
+        className: colorDisplayCss,
+        children: formatProportion(colorScale.max, 0)
+      }
+    )
+  ] });
+};
+const getColorWithingScale = (value, colorScale) => {
+  if (colorScale.min === colorScale.max) {
+    return singleGraphColorRGBByName(colorScale.color, 0);
+  }
+  const colorRange = colorScale.max - colorScale.min;
+  const alpha = (value - colorScale.min) / colorRange;
+  return singleGraphColorRGBByName(colorScale.color, alpha);
+};
+const getTextColorForScale = (value, colorScale) => {
+  if (colorScale.min === colorScale.max) {
+    return "black";
+  }
+  const colorRange = colorScale.max - colorScale.min;
+  const alpha = (value - colorScale.min) / colorRange;
+  return alpha <= 0.5 ? "black" : "white";
+};
 function getPositionCss(position) {
   switch (position) {
     case "top":
@@ -7989,8 +8055,8 @@ function getPositionCss(position) {
   }
 }
 const Tooltip = ({ children, content, position = "bottom" }) => {
-  return /* @__PURE__ */ u$1("div", { className: "relative", children: [
-    /* @__PURE__ */ u$1("div", { className: "peer", children }),
+  return /* @__PURE__ */ u$1("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ u$1("div", { className: "peer w-full h-full", children }),
     /* @__PURE__ */ u$1(
       "div",
       {
@@ -8001,10 +8067,14 @@ const Tooltip = ({ children, content, position = "bottom" }) => {
   ] });
 };
 const MAX_NUMBER_OF_GRID_ROWS = 100;
-const MutationsOverTimeGrid = ({ data }) => {
-  const allMutations = data.getFirstAxisKeys();
+const MUTATION_CELL_WIDTH_REM = 8;
+const MutationsOverTimeGrid = ({ data, colorScale }) => {
+  const allMutations = data.getFirstAxisKeys().sort(sortSubstitutionsAndDeletions);
   const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
   const dates = data.getSecondAxisKeys().sort((a2, b3) => compareTemporal(a2, b3));
+  const [showProportionText, setShowProportionText] = h(false);
+  const gridRef = A(null);
+  useShowProportion(gridRef, dates.length, setShowProportionText);
   return /* @__PURE__ */ u$1(Fragment, { children: [
     allMutations.length > MAX_NUMBER_OF_GRID_ROWS && /* @__PURE__ */ u$1("div", { className: "pl-2", children: [
       "Showing ",
@@ -8016,10 +8086,11 @@ const MutationsOverTimeGrid = ({ data }) => {
     /* @__PURE__ */ u$1(
       "div",
       {
+        ref: gridRef,
         style: {
           display: "grid",
           gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
-          gridTemplateColumns: `8rem repeat(${dates.length}, minmax(1.5rem, 1fr))`
+          gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`
         },
         children: shownMutations.map((mutation, rowIndex) => {
           return /* @__PURE__ */ u$1(Fragment, { children: [
@@ -8049,7 +8120,9 @@ const MutationsOverTimeGrid = ({ data }) => {
                       value,
                       date,
                       mutation,
-                      tooltipPosition
+                      tooltipPosition,
+                      showProportionText,
+                      colorScale
                     }
                   )
                 },
@@ -8062,16 +8135,34 @@ const MutationsOverTimeGrid = ({ data }) => {
     )
   ] });
 };
+function useShowProportion(gridRef, girdColumns, setShowProportionText) {
+  y(() => {
+    const checkWidth = () => {
+      if (gridRef.current) {
+        const width = gridRef.current.getBoundingClientRect().width;
+        const widthPerDate = (width - remToPx(MUTATION_CELL_WIDTH_REM)) / girdColumns;
+        const maxWidthProportionText = 28;
+        setShowProportionText(widthPerDate > maxWidthProportionText);
+      }
+    };
+    checkWidth();
+    window.addEventListener("resize", checkWidth);
+    return () => {
+      window.removeEventListener("resize", checkWidth);
+    };
+  }, [girdColumns, gridRef, setShowProportionText]);
+}
+const remToPx = (rem) => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 function getTooltipPosition(rowIndex, rows, columnIndex, columns) {
   const tooltipX = rowIndex < rows / 2 ? "bottom" : "top";
   const tooltipY = columnIndex < columns / 2 ? "start" : "end";
   return `${tooltipX}-${tooltipY}`;
 }
-const ProportionCell = ({ value, mutation, date, tooltipPosition }) => {
+const ProportionCell = ({ value, mutation, date, tooltipPosition, showProportionText, colorScale }) => {
   const tooltipContent = /* @__PURE__ */ u$1("div", { children: [
+    /* @__PURE__ */ u$1("p", { children: /* @__PURE__ */ u$1("span", { className: "font-bold", children: date.englishName() }) }),
     /* @__PURE__ */ u$1("p", { children: [
-      /* @__PURE__ */ u$1("span", { className: "font-bold", children: date.englishName() }),
-      " (",
+      "(",
       timeIntervalDisplay(date),
       ")"
     ] }),
@@ -8085,17 +8176,17 @@ const ProportionCell = ({ value, mutation, date, tooltipPosition }) => {
       value.count
     ] })
   ] });
-  return /* @__PURE__ */ u$1(Fragment, { children: /* @__PURE__ */ u$1("div", { className: "py-1", children: /* @__PURE__ */ u$1(Tooltip, { content: tooltipContent, position: tooltipPosition, children: /* @__PURE__ */ u$1(
+  return /* @__PURE__ */ u$1("div", { className: "py-1 w-full h-full", children: /* @__PURE__ */ u$1(Tooltip, { content: tooltipContent, position: tooltipPosition, children: /* @__PURE__ */ u$1(
     "div",
     {
       style: {
-        backgroundColor: backgroundColor(value.proportion),
-        color: textColor(value.proportion)
+        backgroundColor: getColorWithingScale(value.proportion, colorScale),
+        color: getTextColorForScale(value.proportion, colorScale)
       },
-      className: "text-center hover:font-bold text-xs",
-      children: formatProportion(value.proportion, 0)
+      className: `w-full h-full text-center hover:font-bold text-xs group`,
+      children: showProportionText ? formatProportion(value.proportion, 0) : void 0
     }
-  ) }) }) });
+  ) }) });
 };
 const timeIntervalDisplay = (date) => {
   if (date instanceof YearMonthDay) {
@@ -8103,15 +8194,6 @@ const timeIntervalDisplay = (date) => {
   }
   return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
 };
-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() });
 };
@@ -8270,9 +8352,15 @@ function addZeroValuesForDatesWithNoMutationData(dataArray, data) {
     });
   }
 }
+const ColorScaleSelectorDropdown = ({
+  colorScale,
+  setColorScale
+}) => {
+  return /* @__PURE__ */ u$1(Dropdown, { buttonTitle: `Color scale`, placement: "bottom-start", children: /* @__PURE__ */ u$1(ColorScaleSelector, { colorScale, setColorScale }) });
+};
 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 size = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(MutationsOverTimeInner, { ...innerProps }) }) });
 };
 const MutationsOverTimeInner = ({
   lapisFilter,
@@ -8302,6 +8390,7 @@ const MutationsOverTimeTabs = ({
   views
 }) => {
   const [proportionInterval, setProportionInterval] = h({ min: 0.05, max: 0.9 });
+  const [colorScale, setColorScale] = h({ min: 0, max: 1, color: "indigo" });
   const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
   const [displayedMutationTypes, setDisplayedMutationTypes] = h([
     { label: "Substitutions", checked: true, type: "substitution" },
@@ -8321,35 +8410,42 @@ const MutationsOverTimeTabs = ({
       case "grid":
         return {
           title: "Grid",
-          content: /* @__PURE__ */ u$1(MutationsOverTimeGrid, { data: filteredData })
+          content: /* @__PURE__ */ u$1(MutationsOverTimeGrid, { data: filteredData, colorScale })
         };
     }
   };
   const tabs = views.map((view) => getTab(view));
-  const toolbar = () => /* @__PURE__ */ u$1(
+  const toolbar = (activeTab) => /* @__PURE__ */ u$1(
     Toolbar,
     {
+      activeTab,
       displayedSegments,
       setDisplayedSegments,
       displayedMutationTypes,
       setDisplayedMutationTypes,
       proportionInterval,
       setProportionInterval,
-      filteredData
+      filteredData,
+      colorScale,
+      setColorScale
     }
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
 };
 const Toolbar = ({
+  activeTab,
   displayedSegments,
   setDisplayedSegments,
   displayedMutationTypes,
   setDisplayedMutationTypes,
   proportionInterval,
   setProportionInterval,
-  filteredData
+  filteredData,
+  colorScale,
+  setColorScale
 }) => {
   return /* @__PURE__ */ u$1(Fragment, { children: [
+    activeTab === "Grid" && /* @__PURE__ */ u$1(ColorScaleSelectorDropdown, { colorScale, setColorScale }),
     /* @__PURE__ */ u$1(SegmentSelector, { displayedSegments, setDisplayedSegments }),
     /* @__PURE__ */ u$1(
       MutationTypeSelector,
@@ -8374,12 +8470,12 @@ const Toolbar = ({
         filename: "mutations_over_time.csv"
       }
     ),
-    /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for mutations over time" })
+    /* @__PURE__ */ u$1(Info, { children: "Info for mutations over time" })
   ] });
 };
 function getDownloadData(filteredData) {
   const dates = filteredData.getSecondAxisKeys().sort((a2, b3) => compareTemporal(a2, b3));
-  return filteredData.getFirstAxisKeys().map((mutation) => {
+  return filteredData.getFirstAxisKeys().sort(sortSubstitutionsAndDeletions).map((mutation) => {
     return dates.reduce(
       (accumulated, date) => {
         var _a;
@@ -8569,8 +8665,8 @@ const DateRangeSelector = ({
   width,
   ...innerProps
 }) => {
-  const size2 = { width, height: "3rem" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1("div", { style: { width }, children: /* @__PURE__ */ u$1(DateRangeSelectorInner, { ...innerProps }) }) });
+  const size = { width, height: "3rem" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1("div", { style: { width }, children: /* @__PURE__ */ u$1(DateRangeSelectorInner, { ...innerProps }) }) });
 };
 const DateRangeSelectorInner = ({
   customSelectOptions,
@@ -8817,8 +8913,8 @@ function compareLocationEntries(fields) {
   };
 }
 const LocationFilter = ({ 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(LocationFilterInner, { ...innerProps }) }) });
+  const size = { width, height: "3rem" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(LocationFilterInner, { ...innerProps }) }) });
 };
 const LocationFilterInner = ({ initialValue, fields, placeholderText }) => {
   const lapis = x(LapisUrlContext);
@@ -8937,8 +9033,8 @@ async function fetchAutocompleteList(lapis, field, signal) {
   return data.map((item) => item[field]);
 }
 const TextInput = ({ 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(TextInputInner, { ...innerProps }) }) });
+  const size = { width, height: "3rem" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(TextInputInner, { ...innerProps }) }) });
 };
 const TextInputInner = ({ lapisField, placeholderText, initialValue }) => {
   const lapis = x(LapisUrlContext);
@@ -9046,7 +9142,7 @@ function isNotInitialized(referenceGenome) {
 const MutationFilterInfo = () => {
   const referenceGenome = x(ReferenceGenomeContext);
   const firstGene = referenceGenome.genes[0].name;
-  return /* @__PURE__ */ u$1(Info, { height: "80vh", children: [
+  return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: " Mutation Filter" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: "This component allows you to filter for mutations at specific positions." }),
     /* @__PURE__ */ u$1(InfoHeadline2, { children: " Nucleotide Mutations and Insertions" }),
@@ -9306,21 +9402,6 @@ const parseAndValidateMutation = (value, referenceGenome) => {
   }
   return null;
 };
-const DeleteIcon = () => {
-  return /* @__PURE__ */ u$1(
-    "svg",
-    {
-      fill: "currentColor",
-      "stroke-width": "0",
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 16 16",
-      style: "overflow: visible; color: currentcolor;",
-      height: "1em",
-      width: "1em",
-      children: /* @__PURE__ */ u$1("path", { d: "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" })
-    }
-  );
-};
 const MutationFilter = ({ initialValue, width }) => {
   return /* @__PURE__ */ u$1(ErrorBoundary, { size: { height: "3.375rem", width }, children: /* @__PURE__ */ u$1("div", { style: width, children: /* @__PURE__ */ u$1(MutationFilterInner, { initialValue }) }) });
 };
@@ -9489,71 +9570,71 @@ const SelectedMutationDisplay = ({ selectedFilters, setSelectedFilters, fireChan
   ] });
 };
 const SelectedAminoAcidInsertion = ({ insertion, onDelete }) => {
-  const backgroundColor2 = singleGraphColorRGBByName("teal", 0.3);
-  const textColor2 = singleGraphColorRGBByName("teal", 1);
+  const backgroundColor = singleGraphColorRGBByName("teal", 0.3);
+  const textColor = singleGraphColorRGBByName("teal", 1);
   return /* @__PURE__ */ u$1(
     SelectedFilter,
     {
       mutation: insertion,
       onDelete,
-      backgroundColor: backgroundColor2,
-      textColor: textColor2
+      backgroundColor,
+      textColor
     }
   );
 };
 const SelectedAminoAcidMutation = ({ mutation, onDelete }) => {
-  const backgroundColor2 = singleGraphColorRGBByName("rose", 0.3);
-  const textColor2 = singleGraphColorRGBByName("rose", 1);
+  const backgroundColor = singleGraphColorRGBByName("rose", 0.3);
+  const textColor = singleGraphColorRGBByName("rose", 1);
   return /* @__PURE__ */ u$1(
     SelectedFilter,
     {
       mutation,
       onDelete,
-      backgroundColor: backgroundColor2,
-      textColor: textColor2
+      backgroundColor,
+      textColor
     }
   );
 };
 const SelectedNucleotideMutation = ({ mutation, onDelete }) => {
-  const backgroundColor2 = singleGraphColorRGBByName("indigo", 0.3);
-  const textColor2 = singleGraphColorRGBByName("indigo", 1);
+  const backgroundColor = singleGraphColorRGBByName("indigo", 0.3);
+  const textColor = singleGraphColorRGBByName("indigo", 1);
   return /* @__PURE__ */ u$1(
     SelectedFilter,
     {
       mutation,
       onDelete,
-      backgroundColor: backgroundColor2,
-      textColor: textColor2
+      backgroundColor,
+      textColor
     }
   );
 };
 const SelectedNucleotideInsertion = ({ insertion, onDelete }) => {
-  const backgroundColor2 = singleGraphColorRGBByName("green", 0.3);
-  const textColor2 = singleGraphColorRGBByName("green", 1);
+  const backgroundColor = singleGraphColorRGBByName("green", 0.3);
+  const textColor = singleGraphColorRGBByName("green", 1);
   return /* @__PURE__ */ u$1(
     SelectedFilter,
     {
       mutation: insertion,
       onDelete,
-      backgroundColor: backgroundColor2,
-      textColor: textColor2
+      backgroundColor,
+      textColor
     }
   );
 };
 const SelectedFilter = ({
   mutation,
   onDelete,
-  backgroundColor: backgroundColor2,
-  textColor: textColor2
+  backgroundColor,
+  textColor
 }) => {
   return /* @__PURE__ */ u$1(
     "span",
     {
       class: "inline-block mx-1 px-2 py-1 font-medium text-xs rounded-full",
-      style: { backgroundColor: backgroundColor2, color: textColor2 },
+      style: { backgroundColor, color: textColor },
       children: [
         mutation.toString(),
-        /* @__PURE__ */ u$1("button", { type: "button", onClick: () => onDelete(mutation), children: /* @__PURE__ */ u$1(DeleteIcon, {}) })
+        /* @__PURE__ */ u$1("button", { className: "ml-1", type: "button", onClick: () => onDelete(mutation), children: "✕" })
       ]
     }
   );
@@ -9601,8 +9682,8 @@ async function fetchLineageAutocompleteList(lapis, field, signal) {
   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 size = { width, height: "3rem" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(LineageFilterInner, { ...innerProps }) }) });
 };
 const LineageFilterInner = ({
   lapisField,