@genspectrum/dashboard-components 0.6.5 → 0.6.7

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";
@@ -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;
@@ -4202,6 +4189,9 @@ input.tab:checked + .tab-content,
 .visible {
   visibility: visible;
 }
+.invisible {
+  visibility: hidden;
+}
 .static {
   position: static;
 }
@@ -4217,18 +4207,39 @@ input.tab:checked + .tab-content,
 .-top-3 {
   top: -0.75rem;
 }
+.bottom-full {
+  bottom: 100%;
+}
 .left-0 {
   left: 0px;
 }
+.left-1\\/2 {
+  left: 50%;
+}
+.left-full {
+  left: 100%;
+}
+.right-0 {
+  right: 0px;
+}
 .right-2 {
   right: 0.5rem;
 }
+.right-full {
+  right: 100%;
+}
 .top-0 {
   top: 0px;
 }
+.top-1\\/2 {
+  top: 50%;
+}
 .top-2 {
   top: 0.5rem;
 }
+.top-full {
+  top: 100%;
+}
 .z-10 {
   z-index: 10;
 }
@@ -4245,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;
@@ -4257,18 +4272,30 @@ input.tab:checked + .tab-content,
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.ml-1 {
+  margin-left: 0.25rem;
+}
 .ml-2\\.5 {
   margin-left: 0.625rem;
 }
 .ml-3 {
   margin-left: 0.75rem;
 }
+.mr-1 {
+  margin-right: 0.25rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
+.mt-1 {
+  margin-top: 0.25rem;
+}
 .mt-4 {
   margin-top: 1rem;
 }
@@ -4290,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;
 }
@@ -4327,6 +4360,14 @@ input.tab:checked + .tab-content,
 .grow {
   flex-grow: 1;
 }
+.translate-x-\\[-50\\%\\] {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-y-\\[-50\\%\\] {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .resize {
   resize: both;
 }
@@ -4360,9 +4401,6 @@ input.tab:checked + .tab-content,
 .overflow-auto {
   overflow: auto;
 }
-.overflow-y-auto {
-  overflow-y: auto;
-}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -4427,6 +4465,10 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -4525,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);
@@ -4553,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));
@@ -4589,8 +4647,8 @@ 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);
 }
-.peer:hover ~ .peer-hover\\:block {
-  display: block;
+.peer:hover ~ .peer-hover\\:visible {
+  visibility: visible;
 }`;
 var __defProp$c = Object.defineProperty;
 var __decorateClass$c = (decorators, target, key, kind) => {
@@ -4950,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,
@@ -5082,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;
@@ -5892,6 +5950,7 @@ const isoWeek = function(o2, c2, d2) {
 };
 dayjs.extend(isoWeek);
 dayjs.extend(advancedFormat);
+const FORMAT_ISO_WEEK_YEAR_WEEK = "GGGG-[W]WW";
 const _TemporalCache = class _TemporalCache {
   constructor() {
     this.yearMonthDayCache = /* @__PURE__ */ new Map();
@@ -5960,7 +6019,7 @@ class YearMonthDay {
     return this.cache.getYearMonth(this.dayjs.format("YYYY-MM"));
   }
   get week() {
-    return this.cache.getYearWeek(this.dayjs.format("GGGG-WW"));
+    return this.cache.getYearWeek(this.dayjs.format(FORMAT_ISO_WEEK_YEAR_WEEK));
   }
   addDays(days) {
     const date = this.dayjs.add(days, "day");
@@ -5982,7 +6041,7 @@ class YearWeek {
     this.cache = cache;
   }
   get text() {
-    return this.firstDay.dayjs.format("YYYY-WW");
+    return this.firstDay.dayjs.format(FORMAT_ISO_WEEK_YEAR_WEEK);
   }
   toString() {
     return this.text;
@@ -6004,14 +6063,14 @@ class YearWeek {
   }
   addWeeks(weeks) {
     const date = this.firstDay.dayjs.add(weeks, "week");
-    const s2 = date.format("YYYY-WW");
+    const s2 = date.format(FORMAT_ISO_WEEK_YEAR_WEEK);
     return this.cache.getYearWeek(s2);
   }
   minus(other) {
     return this.firstDay.dayjs.diff(other.firstDay.dayjs, "week");
   }
   static parse(s2, cache) {
-    const [year, week] = s2.split("-").map((s22) => parseInt(s22, 10));
+    const [year, week] = s2.split("-W").map((s22) => parseInt(s22, 10));
     return new YearWeek(year, week, cache);
   }
 }
@@ -6766,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,
@@ -6920,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." })
   ] });
@@ -7226,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,
@@ -7455,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,
@@ -7497,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;
@@ -7722,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,
@@ -7809,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" }) })
 ] });
@@ -7917,20 +7976,105 @@ function filterProportion(data, proportionInterval) {
     }
   });
 }
-const Tooltip = ({ children, content }) => {
-  const referenceRef = A(null);
-  const floatingRef = A(null);
-  useFloatingUi(referenceRef, floatingRef, [offset(5), shift(), flip()]);
-  return /* @__PURE__ */ u$1("div", { className: "relative", children: [
-    /* @__PURE__ */ u$1("div", { className: "peer", ref: referenceRef, children }),
-    /* @__PURE__ */ u$1("div", { ref: floatingRef, className: `${dropdownClass} hidden peer-hover:block`, children: content })
+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":
+      return "bottom-full translate-x-[-50%] left-1/2 mb-1";
+    case "top-start":
+      return "bottom-full mr-1 mb-1";
+    case "top-end":
+      return "bottom-full right-0 ml-1 mb-1";
+    case "bottom":
+      return "top-full translate-x-[-50%] left-1/2 mt-1";
+    case "bottom-start":
+      return "mr-1 mt-1";
+    case "bottom-end":
+      return "right-0 ml-1 mt-1";
+    case "left":
+      return "right-full translate-y-[-50%] top-1/2 mr-1";
+    case "right":
+      return "left-full translate-y-[-50%] top-1/2 ml-1";
+    case void 0:
+      return "";
+  }
+}
+const Tooltip = ({ children, content, position = "bottom" }) => {
+  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",
+      {
+        className: `absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible peer-hover:visible ${getPositionCss(position)}`,
+        children: content
+      }
+    )
   ] });
 };
 const MAX_NUMBER_OF_GRID_ROWS = 100;
-const MutationsOverTimeGrid = ({ data }) => {
+const MUTATION_CELL_WIDTH_REM = 8;
+const MutationsOverTimeGrid = ({ data, colorScale }) => {
   const allMutations = data.getFirstAxisKeys();
   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 ",
@@ -7942,28 +8086,45 @@ 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, i2) => {
+        children: shownMutations.map((mutation, rowIndex) => {
           return /* @__PURE__ */ u$1(Fragment, { children: [
             /* @__PURE__ */ u$1(
               "div",
               {
-                style: { gridRowStart: i2 + 1, gridColumnStart: 1 },
+                style: { gridRowStart: rowIndex + 1, gridColumnStart: 1 },
                 children: /* @__PURE__ */ u$1(MutationCell, { mutation })
               },
               `mutation-${mutation.toString()}`
             ),
-            dates.map((date, j2) => {
+            dates.map((date, columnIndex) => {
               const value = data.get(mutation, date) ?? { proportion: 0, count: 0 };
+              const tooltipPosition = getTooltipPosition(
+                rowIndex,
+                shownMutations.length,
+                columnIndex,
+                dates.length
+              );
               return /* @__PURE__ */ u$1(
                 "div",
                 {
-                  style: { gridRowStart: i2 + 1, gridColumnStart: j2 + 2 },
-                  children: /* @__PURE__ */ u$1(ProportionCell, { value, date, mutation })
+                  style: { gridRowStart: rowIndex + 1, gridColumnStart: columnIndex + 2 },
+                  children: /* @__PURE__ */ u$1(
+                    ProportionCell,
+                    {
+                      value,
+                      date,
+                      mutation,
+                      tooltipPosition,
+                      showProportionText,
+                      colorScale
+                    }
+                  )
                 },
                 `${mutation.toString()}-${date.toString()}`
               );
@@ -7974,11 +8135,34 @@ const MutationsOverTimeGrid = ({ data }) => {
     )
   ] });
 };
-const ProportionCell = ({ value, mutation, date }) => {
+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, 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),
       ")"
     ] }),
@@ -7992,17 +8176,17 @@ const ProportionCell = ({ value, mutation, date }) => {
       value.count
     ] })
   ] });
-  return /* @__PURE__ */ u$1(Fragment, { children: /* @__PURE__ */ u$1("div", { className: "py-1", children: /* @__PURE__ */ u$1(Tooltip, { content: tooltipContent, 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) {
@@ -8010,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() });
 };
@@ -8177,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,
@@ -8209,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" },
@@ -8228,33 +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
+      setProportionInterval,
+      filteredData,
+      colorScale,
+      setColorScale
     }
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
 };
 const Toolbar = ({
+  activeTab,
   displayedSegments,
   setDisplayedSegments,
   displayedMutationTypes,
   setDisplayedMutationTypes,
   proportionInterval,
-  setProportionInterval
+  setProportionInterval,
+  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,
@@ -8263,17 +8454,41 @@ const Toolbar = ({
         displayedMutationTypes
       }
     ),
-    /* @__PURE__ */ u$1(Fragment, { children: /* @__PURE__ */ u$1(
+    /* @__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" })
+    ),
+    /* @__PURE__ */ u$1(
+      CsvDownloadButton,
+      {
+        className: "mx-1 btn btn-xs",
+        getData: () => getDownloadData(filteredData),
+        filename: "mutations_over_time.csv"
+      }
+    ),
+    /* @__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 dates.reduce(
+      (accumulated, date) => {
+        var _a;
+        const proportion = ((_a = filteredData.get(mutation, date)) == null ? void 0 : _a.proportion) ?? 0;
+        return {
+          ...accumulated,
+          [date.toString()]: proportion
+        };
+      },
+      { mutation: mutation.toString() }
+    );
+  });
+}
 var __defProp$5 = Object.defineProperty;
 var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
 var __decorateClass$5 = (decorators, target, key, kind) => {
@@ -8450,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,
@@ -8698,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);
@@ -8818,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);
@@ -8927,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" }),
@@ -9187,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 }) }) });
 };
@@ -9370,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: "✕" })
       ]
     }
   );
@@ -9482,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,