@genspectrum/dashboard-components 0.3.2 → 0.4.0

package/dist/dashboard-components.js

@@ -6,6 +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, size } from "@floating-ui/dom";
 import { ReactiveElement } from "@lit/reactive-element";
 import { BarWithErrorBarsController, BarWithErrorBar } from "chartjs-chart-error-bars";
 import flatpickr from "flatpickr";
@@ -1308,8 +1309,8 @@ const ErrorDisplay = ({ error }) => {
     ] })
   ] });
 };
-const ResizeContainer = ({ children, size }) => {
-  return /* @__PURE__ */ u$1("div", { style: size, children });
+const ResizeContainer = ({ children, size: size2 }) => {
+  return /* @__PURE__ */ u$1("div", { style: size2, children });
 };
 const Headline = ({ heading, children }) => {
   if (!heading) {
@@ -1331,33 +1332,107 @@ const ResizingHeadline = ({ heading, children }) => {
     /* @__PURE__ */ u$1("div", { style: { height: `calc(100% - ${h1Height})` }, children })
   ] });
 };
-const ErrorBoundary = ({ size, headline, children }) => {
+const ErrorBoundary = ({ size: size2, headline, children }) => {
   const [internalError] = b2();
   if (internalError) {
-    return /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error: internalError }) }) });
+    return /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error: internalError }) }) });
   }
   return /* @__PURE__ */ u$1(Fragment, { children });
 };
-const Info = ({ children, size }) => {
+const Info = ({ children, height }) => {
   const [showHelp, setShowHelp] = p(false);
+  const referenceRef = F(null);
+  const floatingRef = F(null);
+  useFloatingUi(referenceRef, floatingRef, height, showHelp);
   const toggleHelp = () => {
     setShowHelp(!showHelp);
   };
-  return /* @__PURE__ */ u$1("div", { className: "relative", children: [
-    /* @__PURE__ */ u$1("button", { className: "btn btn-xs", onClick: toggleHelp, children: "?" }),
-    showHelp && /* @__PURE__ */ u$1(
+  useCloseOnEsc(setShowHelp);
+  useCloseOnClickOutside(floatingRef, referenceRef, setShowHelp);
+  return /* @__PURE__ */ u$1("div", { className: "relative z-10", children: [
+    /* @__PURE__ */ u$1("button", { type: "button", className: "btn btn-xs", onClick: toggleHelp, ref: referenceRef, children: "?" }),
+    /* @__PURE__ */ u$1(
       "div",
       {
-        className: "absolute top-8 right-6 bg-white p-2 border border-black flex flex-col overflow-auto shadow-lg rounded z-50",
-        style: size,
+        ref: floatingRef,
+        className: "bg-white p-2 border border-gray-100 shadow-lg rounded overflow-y-auto opacity-90",
+        style: { position: "absolute", zIndex: 10, display: showHelp ? "" : "none" },
         children: [
           /* @__PURE__ */ u$1("div", { className: "flex flex-col", children }),
-          /* @__PURE__ */ u$1("div", { className: "flex justify-end", children: /* @__PURE__ */ u$1("button", { className: "text-sm underline mt-2", onClick: toggleHelp, children: "Close" }) })
+          /* @__PURE__ */ u$1(
+            "button",
+            {
+              onClick: () => setShowHelp(false),
+              className: "float-right underline text-sm hover:text-blue-700 mr-2",
+              children: "Close"
+            }
+          )
         ]
       }
     )
   ] });
 };
+function useFloatingUi(referenceRef, floatingRef, height, showHelp) {
+  const cleanupRef = F(null);
+  _(() => {
+    if (!referenceRef.current || !floatingRef.current) {
+      return;
+    }
+    const { current: reference } = referenceRef;
+    const { current: floating } = floatingRef;
+    const update = () => {
+      computePosition(reference, floating, {
+        middleware: [
+          offset(10),
+          shift(),
+          size({
+            apply({}) {
+              floating.style.width = "100vw";
+              floating.style.height = height ? height : "50vh";
+            }
+          })
+        ]
+      }).then(({ x, y: y2 }) => {
+        floating.style.left = `${x}px`;
+        floating.style.top = `${y2}px`;
+      });
+    };
+    update();
+    cleanupRef.current = autoUpdate(reference, floating, update);
+    return () => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+      }
+    };
+  }, [showHelp, height, referenceRef, floatingRef]);
+}
+function useCloseOnClickOutside(floatingRef, referenceRef, setShowHelp) {
+  _(() => {
+    const handleClickOutside = (event) => {
+      const path = event.composedPath();
+      if (floatingRef.current && !path.includes(floatingRef.current) && referenceRef.current && !path.includes(referenceRef.current)) {
+        setShowHelp(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [floatingRef, referenceRef, setShowHelp]);
+}
+function useCloseOnEsc(setShowHelp) {
+  _(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setShowHelp(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [setShowHelp]);
+}
 const InfoHeadline1 = ({ children }) => {
   return /* @__PURE__ */ u$1("h1", { className: "text-lg font-bold", children });
 };
@@ -1627,8 +1702,8 @@ const MutationComparison = ({
   height,
   headline = "Mutation comparison"
 }) => {
-  const size = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationComparisonInner, { variants, sequenceType, views }) }) }) });
+  const size2 = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationComparisonInner, { variants, sequenceType, views }) }) }) });
 };
 const MutationComparisonInner = ({
   variants,
@@ -1741,7 +1816,7 @@ const Toolbar$3 = ({
         filename: "mutation_comparison.csv"
       }
     ),
-    /* @__PURE__ */ u$1(Info, { children: "Info for mutation comparison" })
+    /* @__PURE__ */ u$1(Info, { height: "100px", 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 */';
@@ -4224,24 +4299,30 @@ input.tab:checked + .tab-content,
 .relative {
   position: relative;
 }
+.-right-3 {
+  right: -0.75rem;
+}
+.-top-3 {
+  top: -0.75rem;
+}
 .right-2 {
   right: 0.5rem;
 }
-.right-6 {
-  right: 1.5rem;
-}
 .top-2 {
   top: 0.5rem;
 }
-.top-8 {
-  top: 2rem;
-}
-.z-50 {
-  z-index: 50;
+.z-10 {
+  z-index: 10;
 }
 .z-\\[1\\] {
   z-index: 1;
 }
+.float-right {
+  float: right;
+}
+.m-1 {
+  margin: 0.25rem;
+}
 .m-2 {
   margin: 0.5rem;
 }
@@ -4257,24 +4338,21 @@ input.tab:checked + .tab-content,
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
-.mb-1 {
-  margin-bottom: 0.25rem;
-}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
-.me-1 {
-  margin-inline-end: 0.25rem;
-}
 .ml-2 {
   margin-left: 0.5rem;
 }
-.mt-2 {
-  margin-top: 0.5rem;
+.mr-2 {
+  margin-right: 0.5rem;
 }
 .mt-4 {
   margin-top: 1rem;
 }
+.inline-block {
+  display: inline-block;
+}
 .inline {
   display: inline;
 }
@@ -4308,13 +4386,6 @@ input.tab:checked + .tab-content,
 .w-full {
   width: 100%;
 }
-.min-w-0 {
-  min-width: 0px;
-}
-.min-w-max {
-  min-width: -moz-max-content;
-  min-width: max-content;
-}
 .max-w-screen-lg {
   max-width: 1024px;
 }
@@ -4333,32 +4404,23 @@ input.tab:checked + .tab-content,
 .flex-wrap {
   flex-wrap: wrap;
 }
-.flex-nowrap {
-  flex-wrap: nowrap;
-}
 .items-center {
   align-items: center;
 }
-.justify-end {
-  justify-content: flex-end;
-}
 .justify-center {
   justify-content: center;
 }
 .justify-between {
   justify-content: space-between;
 }
-.gap-1 {
-  gap: 0.25rem;
-}
 .gap-2 {
   gap: 0.5rem;
 }
 .overflow-auto {
   overflow: auto;
 }
-.overflow-scroll {
-  overflow: scroll;
+.overflow-y-auto {
+  overflow-y: auto;
 }
 .whitespace-nowrap {
   white-space: nowrap;
@@ -4375,8 +4437,8 @@ input.tab:checked + .tab-content,
 .rounded-box {
   border-radius: var(--rounded-box, 1rem);
 }
-.rounded-lg {
-  border-radius: 0.5rem;
+.rounded-full {
+  border-radius: 9999px;
 }
 .rounded-md {
   border-radius: 0.375rem;
@@ -4403,9 +4465,11 @@ input.tab:checked + .tab-content,
 .border-b-2 {
   border-bottom-width: 2px;
 }
-.border-black {
-  --tw-border-opacity: 1;
-  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+.border-solid {
+  border-style: solid;
+}
+.border-none {
+  border-style: none;
 }
 .border-error {
   --tw-border-opacity: 1;
@@ -4423,6 +4487,10 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
+}
 .bg-base-100 {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
@@ -4435,6 +4503,9 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
+.p-1 {
+  padding: 0.25rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
@@ -4442,21 +4513,13 @@ input.tab:checked + .tab-content,
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.px-2\\.5 {
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
 }
-.py-0 {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-.py-0\\.5 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 }
 .py-16 {
   padding-top: 4rem;
@@ -4517,6 +4580,9 @@ 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);
@@ -4542,10 +4608,18 @@ input.tab:checked + .tab-content,
 .duration-150 {
   transition-duration: 150ms;
 }
+.focus-within\\:border-gray-400:focus-within {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
 .hover\\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
+.hover\\:text-blue-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(29 78 216 / var(--tw-text-opacity));
+}
 .hover\\:text-blue-800:hover {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
@@ -4557,6 +4631,15 @@ input.tab:checked + .tab-content,
 .hover\\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+.focus\\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.focus\\:ring-0:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }`;
 var __defProp$9 = Object.defineProperty;
 var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
@@ -4921,8 +5004,8 @@ const Mutations = ({
   height,
   headline = "Mutations"
 }) => {
-  const size = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationsInner, { variant, sequenceType, views }) }) }) });
+  const size2 = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationsInner, { variant, sequenceType, views }) }) }) });
 };
 const MutationsInner = ({ variant, sequenceType, views }) => {
   const lapis = P(LapisUrlContext);
@@ -5041,7 +5124,7 @@ const Toolbar$2 = ({
         filename: "insertions.csv"
       }
     ),
-    /* @__PURE__ */ u$1(Info, { children: "Info for mutations" })
+    /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for mutations" })
   ] });
 };
 var __defProp$7 = Object.defineProperty;
@@ -6652,8 +6735,8 @@ const PrevalenceOverTime = ({
   headline = "Prevalence over time",
   lapisDateField
 }) => {
-  const size = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+  const size2 = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
     PrevalenceOverTimeInner,
     {
       numerator,
@@ -6794,8 +6877,8 @@ const Toolbar$1 = ({
     /* @__PURE__ */ u$1(PrevalenceOverTimeInfo, {})
   ] });
 };
-const PrevalenceOverTimeInfo = () => {
-  return /* @__PURE__ */ u$1(Info, { size: { width: "600px", height: "30vh" }, children: [
+const PrevalenceOverTimeInfo = ({}) => {
+  return /* @__PURE__ */ u$1(Info, { height: "100px", children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Prevalence over time" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: "Prevalence over time info." })
   ] });
@@ -7073,8 +7156,8 @@ const RelativeGrowthAdvantage = ({
   headline = "Relative growth advantage",
   lapisDateField
 }) => {
-  const size = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+  const size2 = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
     RelativeGrowthAdvantageInner,
     {
       views,
@@ -7166,7 +7249,7 @@ const RelativeGrowthAdvantageToolbar = ({
   ] });
 };
 const RelativeGrowthAdvantageInfo = ({ generationTime }) => {
-  return /* @__PURE__ */ u$1(Info, { size: { width: "600px", height: "30vh" }, children: [
+  return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Relative growth advantage" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: [
       "If variants spread pre-dominantly by local transmission across demographic groups, this estimate reflects the relative viral intrinsic growth advantage of the focal variant in the selected country and time frame. We report the relative growth advantage per ",
@@ -7291,8 +7374,8 @@ const Aggregate = ({
   filter,
   fields
 }) => {
-  const size = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(AggregateInner, { fields, filter, views }) }) }) });
+  const size2 = { height, width };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(AggregateInner, { fields, filter, views }) }) }) });
 };
 const AggregateInner = ({ fields, views, filter }) => {
   const lapis = P(LapisUrlContext);
@@ -7326,7 +7409,7 @@ const AggregatedDataTabs = ({ data, views, fields }) => {
 const Toolbar = ({ 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, { children: "Info for aggregate" })
+    /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for aggregate" })
   ] });
 };
 var __defProp$4 = Object.defineProperty;
@@ -7385,13 +7468,6 @@ __decorateClass$4([
 AggregateComponent = __decorateClass$4([
   t$2("gs-aggregate")
 ], AggregateComponent);
-const toYYYYMMDD = (date) => {
-  if (!date) {
-    return void 0;
-  }
-  const options2 = { year: "numeric", month: "2-digit", day: "2-digit" };
-  return date.toLocaleDateString("en-CA", options2);
-};
 const PRESET_VALUE_CUSTOM = "custom";
 const PRESET_VALUE_ALL_TIMES = "allTimes";
 const PRESET_VALUE_LAST_2_WEEKS = "last2Weeks";
@@ -7408,21 +7484,121 @@ const presets = {
   [PRESET_VALUE_LAST_3_MONTHS]: { label: "Last 3 months" },
   [PRESET_VALUE_LAST_6_MONTHS]: { label: "Last 6 months" }
 };
+const getSelectableOptions = (customSelectOptions) => {
+  const presetOptions = Object.entries(presets).map(([key, value]) => {
+    return { label: value.label, value: key };
+  });
+  const customOptions = customSelectOptions.map((customSelectOption) => {
+    return { label: customSelectOption.label, value: customSelectOption.label };
+  });
+  return [...presetOptions, ...customOptions];
+};
+const getDatesForSelectorValue = (selectorValue, customSelectOptions, earliestDate) => {
+  const today = /* @__PURE__ */ new Date();
+  const customSelectOption = customSelectOptions.find((option) => option.label === selectorValue);
+  if (customSelectOption) {
+    return { dateFrom: new Date(customSelectOption.dateFrom), dateTo: new Date(customSelectOption.dateTo) };
+  }
+  switch (selectorValue) {
+    case PRESET_VALUE_LAST_2_WEEKS: {
+      const twoWeeksAgo = new Date(today);
+      twoWeeksAgo.setDate(today.getDate() - 14);
+      return { dateFrom: twoWeeksAgo, dateTo: today };
+    }
+    case PRESET_VALUE_LAST_MONTH: {
+      const lastMonth = new Date(today);
+      lastMonth.setMonth(today.getMonth() - 1);
+      return { dateFrom: lastMonth, dateTo: today };
+    }
+    case PRESET_VALUE_LAST_2_MONTHS: {
+      const twoMonthsAgo = new Date(today);
+      twoMonthsAgo.setMonth(today.getMonth() - 2);
+      return { dateFrom: twoMonthsAgo, dateTo: today };
+    }
+    case PRESET_VALUE_LAST_3_MONTHS: {
+      const threeMonthsAgo = new Date(today);
+      threeMonthsAgo.setMonth(today.getMonth() - 3);
+      return { dateFrom: threeMonthsAgo, dateTo: today };
+    }
+    case PRESET_VALUE_LAST_6_MONTHS: {
+      const sixMonthsAgo = new Date(today);
+      sixMonthsAgo.setMonth(today.getMonth() - 6);
+      return { dateFrom: sixMonthsAgo, dateTo: today };
+    }
+    case PRESET_VALUE_ALL_TIMES: {
+      return { dateFrom: new Date(earliestDate), dateTo: today };
+    }
+    default:
+      return { dateFrom: today, dateTo: today };
+  }
+};
+function computeInitialValues(initialValue, initialDateFrom, initialDateTo, earliestDate, customSelectOptions) {
+  if (isUndefinedOrEmpty(initialDateFrom) && isUndefinedOrEmpty(initialDateTo)) {
+    const selectableOptions = getSelectableOptions(customSelectOptions);
+    const initialSelectedDateRange = initialValue !== void 0 && selectableOptions.some((option) => option.value === initialValue) ? initialValue : PRESET_VALUE_LAST_6_MONTHS;
+    const { dateFrom, dateTo } = getDatesForSelectorValue(
+      initialSelectedDateRange,
+      customSelectOptions,
+      earliestDate
+    );
+    return {
+      initialSelectedDateRange,
+      initialSelectedDateFrom: dateFrom,
+      initialSelectedDateTo: dateTo
+    };
+  }
+  const initialSelectedDateFrom = isUndefinedOrEmpty(initialDateFrom) ? new Date(earliestDate) : new Date(initialDateFrom);
+  let initialSelectedDateTo = isUndefinedOrEmpty(initialDateTo) ? /* @__PURE__ */ new Date() : new Date(initialDateTo);
+  if (isNaN(initialSelectedDateFrom.getTime())) {
+    throw new UserFacingError(
+      "Invalid initialDateFrom",
+      `Invalid initialDateFrom "${initialDateFrom}", It must be of the format YYYY-MM-DD`
+    );
+  }
+  if (isNaN(initialSelectedDateTo.getTime())) {
+    throw new UserFacingError(
+      "Invalid initialDateTo",
+      `Invalid initialDateTo "${initialDateTo}", It must be of the format YYYY-MM-DD`
+    );
+  }
+  if (initialSelectedDateFrom > initialSelectedDateTo) {
+    initialSelectedDateTo = initialSelectedDateFrom;
+  }
+  return {
+    initialSelectedDateRange: PRESET_VALUE_CUSTOM,
+    initialSelectedDateFrom,
+    initialSelectedDateTo
+  };
+}
+function isUndefinedOrEmpty(value) {
+  return value === void 0 || value === "";
+}
+const toYYYYMMDD = (date) => {
+  if (!date) {
+    return void 0;
+  }
+  const options2 = { year: "numeric", month: "2-digit", day: "2-digit" };
+  return date.toLocaleDateString("en-CA", options2);
+};
 const DateRangeSelector = ({
   customSelectOptions,
   earliestDate = "1900-01-01",
   initialValue,
   width,
-  dateColumn
+  dateColumn,
+  initialDateFrom,
+  initialDateTo
 }) => {
-  const size = { width, height: "3rem" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(
+  const size2 = { width, height: "3rem" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(
     DateRangeSelectorInner,
     {
       customSelectOptions,
       earliestDate,
       initialValue,
-      dateColumn
+      dateColumn,
+      initialDateFrom,
+      initialDateTo
     }
   ) }) });
 };
@@ -7430,20 +7606,28 @@ const DateRangeSelectorInner = ({
   customSelectOptions,
   earliestDate = "1900-01-01",
   initialValue,
-  dateColumn
+  dateColumn,
+  initialDateFrom,
+  initialDateTo
 }) => {
+  const initialValues = computeInitialValues(
+    initialValue,
+    initialDateFrom,
+    initialDateTo,
+    earliestDate,
+    customSelectOptions
+  );
   const fromDatePickerRef = F(null);
   const toDatePickerRef = F(null);
   const divRef = F(null);
   const [dateFromPicker, setDateFromPicker] = p(null);
   const [dateToPicker, setDateToPicker] = p(null);
-  const selectableOptions = getSelectableOptions(customSelectOptions);
   const [selectedDateRange, setSelectedDateRange] = p(
-    initialValue !== void 0 && selectableOptions.some((option) => option.value === initialValue) ? initialValue : PRESET_VALUE_LAST_6_MONTHS
+    initialValues.initialSelectedDateRange
   );
   const [selectedDates, setSelectedDates] = p({
-    dateFrom: getDatesForSelectorValue("last6Months", customSelectOptions, earliestDate).dateFrom,
-    dateTo: getDatesForSelectorValue("last6Months", customSelectOptions, earliestDate).dateTo
+    dateFrom: initialValues.initialSelectedDateFrom,
+    dateTo: initialValues.initialSelectedDateTo
   });
   _(() => {
     const commonConfig = {
@@ -7522,7 +7706,7 @@ const DateRangeSelectorInner = ({
     /* @__PURE__ */ u$1(
       Select,
       {
-        items: selectableOptions,
+        items: getSelectableOptions(customSelectOptions),
         selected: selectedDateRange,
         selectStyle: "select-bordered rounded-none join-item grow",
         onChange: (event) => {
@@ -7557,54 +7741,6 @@ const DateRangeSelectorInner = ({
     )
   ] });
 };
-const getSelectableOptions = (customSelectOptions) => {
-  const presetOptions = Object.entries(presets).map(([key, value]) => {
-    return { label: value.label, value: key };
-  });
-  const customOptions = customSelectOptions.map((customSelectOption) => {
-    return { label: customSelectOption.label, value: customSelectOption.label };
-  });
-  return [...presetOptions, ...customOptions];
-};
-const getDatesForSelectorValue = (selectorValue, customSelectOptions, earliestDate) => {
-  const today = /* @__PURE__ */ new Date();
-  const customSelectOption = customSelectOptions.find((option) => option.label === selectorValue);
-  if (customSelectOption) {
-    return { dateFrom: new Date(customSelectOption.dateFrom), dateTo: new Date(customSelectOption.dateTo) };
-  }
-  switch (selectorValue) {
-    case PRESET_VALUE_LAST_2_WEEKS: {
-      const twoWeeksAgo = new Date(today);
-      twoWeeksAgo.setDate(today.getDate() - 14);
-      return { dateFrom: twoWeeksAgo, dateTo: today };
-    }
-    case PRESET_VALUE_LAST_MONTH: {
-      const lastMonth = new Date(today);
-      lastMonth.setMonth(today.getMonth() - 1);
-      return { dateFrom: lastMonth, dateTo: today };
-    }
-    case PRESET_VALUE_LAST_2_MONTHS: {
-      const twoMonthsAgo = new Date(today);
-      twoMonthsAgo.setMonth(today.getMonth() - 2);
-      return { dateFrom: twoMonthsAgo, dateTo: today };
-    }
-    case PRESET_VALUE_LAST_3_MONTHS: {
-      const threeMonthsAgo = new Date(today);
-      threeMonthsAgo.setMonth(today.getMonth() - 3);
-      return { dateFrom: threeMonthsAgo, dateTo: today };
-    }
-    case PRESET_VALUE_LAST_6_MONTHS: {
-      const sixMonthsAgo = new Date(today);
-      sixMonthsAgo.setMonth(today.getMonth() - 6);
-      return { dateFrom: sixMonthsAgo, dateTo: today };
-    }
-    case PRESET_VALUE_ALL_TIMES: {
-      return { dateFrom: new Date(earliestDate), dateTo: today };
-    }
-    default:
-      return { dateFrom: today, dateTo: today };
-  }
-};
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
 var __decorateClass$3 = (decorators, target, key, kind) => {
@@ -7622,6 +7758,8 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
     this.customSelectOptions = [];
     this.earliestDate = "1900-01-01";
     this.initialValue = "last6Months";
+    this.initialDateFrom = "";
+    this.initialDateTo = "";
     this.width = "100%";
     this.dateColumn = "date";
   }
@@ -7632,6 +7770,8 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
         customSelectOptions: this.customSelectOptions,
         earliestDate: this.earliestDate,
         initialValue: this.initialValue,
+        initialDateFrom: this.initialDateFrom,
+        initialDateTo: this.initialDateTo,
         dateColumn: this.dateColumn,
         width: this.width
       }
@@ -7647,6 +7787,12 @@ __decorateClass$3([
 __decorateClass$3([
   n2()
 ], DateRangeSelectorComponent.prototype, "initialValue", 2);
+__decorateClass$3([
+  n2()
+], DateRangeSelectorComponent.prototype, "initialDateFrom", 2);
+__decorateClass$3([
+  n2()
+], DateRangeSelectorComponent.prototype, "initialDateTo", 2);
 __decorateClass$3([
   n2({ type: String })
 ], DateRangeSelectorComponent.prototype, "width", 2);
@@ -7700,8 +7846,8 @@ function compareLocationEntries(fields) {
   };
 }
 const LocationFilter = ({ width, initialValue, fields }) => {
-  const size = { width, height: "3rem" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(LocationFilterInner, { initialValue, fields }) }) });
+  const size2 = { width, height: "3rem" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(LocationFilterInner, { initialValue, fields }) }) });
 };
 const LocationFilterInner = ({ initialValue, fields }) => {
   const lapis = P(LapisUrlContext);
@@ -7755,7 +7901,7 @@ const LocationFilterInner = ({ initialValue, fields }) => {
 };
 const parseLocation = (location, fields) => {
   const fieldValues = location.split("/").map((part) => part.trim());
-  return fieldValues.reduce((acc, fieldValue, i2) => ({ ...acc, [fields[i2]]: fieldValue }), {});
+  return fields.reduce((acc, field, i2) => ({ ...acc, [field]: fieldValues[i2] }), {});
 };
 const hasMatchingEntry = (data, eventDetail) => {
   if (data === null) {
@@ -7804,8 +7950,8 @@ async function fetchAutocompleteList(lapis, field, signal) {
   return data.map((item) => item[field]);
 }
 const TextInput = ({ width, lapisField, placeholderText, initialValue }) => {
-  const size = { width, height: "3rem" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(TextInputInner, { lapisField, placeholderText, initialValue }) }) });
+  const size2 = { width, height: "3rem" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(TextInputInner, { lapisField, placeholderText, initialValue }) }) });
 };
 const TextInputInner = ({
   lapisField,
@@ -7981,9 +8127,8 @@ const DeleteIcon = () => {
     }
   );
 };
-const MutationFilter = ({ initialValue, width, height }) => {
-  const size = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, children: /* @__PURE__ */ u$1(MutationFilterInner, { initialValue }) }) });
+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 }) }) });
 };
 const MutationFilterInner = ({ initialValue }) => {
   const referenceGenome = P(ReferenceGenomeContext);
@@ -7995,6 +8140,9 @@ const MutationFilterInner = ({ initialValue }) => {
   const formRef = F(null);
   const handleSubmit = (event) => {
     event.preventDefault();
+    if (inputValue === "") {
+      return;
+    }
     const parsedMutation = parseAndValidateMutation(inputValue, referenceGenome);
     if (parsedMutation === null) {
       setIsError(true);
@@ -8034,8 +8182,9 @@ const MutationFilterInner = ({ initialValue }) => {
     setInputValue(event.target.value);
     setIsError(false);
   };
-  return /* @__PURE__ */ u$1("div", { class: `h-full w-full rounded-lg border border-gray-300 bg-white p-2 overflow-scroll`, children: [
-    /* @__PURE__ */ u$1("div", { class: "flex justify-between", children: [
+  return /* @__PURE__ */ u$1("form", { className: "w-full border boder-gray-300 rounded-md relative", onSubmit: handleSubmit, ref: formRef, children: [
+    /* @__PURE__ */ u$1("div", { className: "absolute -top-3 -right-3", children: /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for mutation filter" }) }),
+    /* @__PURE__ */ u$1("div", { className: "w-full flex p-2 flex-wrap items-center", children: [
       /* @__PURE__ */ u$1(
         SelectedMutationDisplay,
         {
@@ -8044,22 +8193,27 @@ const MutationFilterInner = ({ initialValue }) => {
           fireChangeEvent
         }
       ),
-      /* @__PURE__ */ u$1(Info, { children: "Info for mutation filter" })
-    ] }),
-    /* @__PURE__ */ u$1("form", { className: "mt-2 w-full", onSubmit: handleSubmit, ref: formRef, children: /* @__PURE__ */ u$1("label", { className: `input flex items-center gap-2 ${isError ? "input-error" : "input-bordered"}`, children: [
       /* @__PURE__ */ u$1(
-        "input",
+        "div",
         {
-          className: "grow min-w-0",
-          type: "text",
-          value: inputValue,
-          onInput: handleInputChange,
-          placeholder: getPlaceholder(referenceGenome),
-          onBlur: handleOnBlur
+          className: `w-full flex border ${isError ? "border-red-500" : "border-gray-300"} border-solid m-2 text-sm focus-within:border-gray-400 `,
+          children: [
+            /* @__PURE__ */ u$1(
+              "input",
+              {
+                className: "grow flex-1 p-1 border-none focus:outline-none focus:ring-0",
+                type: "text",
+                value: inputValue,
+                onInput: handleInputChange,
+                placeholder: getPlaceholder(referenceGenome),
+                onBlur: handleOnBlur
+              }
+            ),
+            /* @__PURE__ */ u$1("button", { type: "submit", className: "btn btn-xs m-1", children: "+" })
+          ]
         }
-      ),
-      /* @__PURE__ */ u$1("button", { className: "btn btn-sm", children: "+" })
-    ] }) })
+      )
+    ] })
   ] });
 };
 function getInitialState(initialValue, referenceGenome) {
@@ -8105,35 +8259,39 @@ const SelectedMutationDisplay = ({ selectedFilters, setSelectedFilters, fireChan
     setSelectedFilters(newSelectedValues);
     fireChangeEvent(newSelectedValues);
   };
-  return /* @__PURE__ */ u$1("ul", { class: "flex flex-wrap", children: [
-    selectedFilters.nucleotideMutations.map((mutation) => /* @__PURE__ */ u$1("li", { children: /* @__PURE__ */ u$1(
+  return /* @__PURE__ */ u$1(Fragment, { children: [
+    selectedFilters.nucleotideMutations.map((mutation) => /* @__PURE__ */ u$1(
       SelectedNucleotideMutation,
       {
         mutation,
         onDelete: (mutation2) => onSelectedRemoved(mutation2, "nucleotideMutations")
-      }
-    ) }, mutation.toString())),
-    selectedFilters.aminoAcidMutations.map((mutation) => /* @__PURE__ */ u$1("li", { children: /* @__PURE__ */ u$1(
+      },
+      mutation.toString()
+    )),
+    selectedFilters.aminoAcidMutations.map((mutation) => /* @__PURE__ */ u$1(
       SelectedAminoAcidMutation,
       {
         mutation,
         onDelete: (mutation2) => onSelectedRemoved(mutation2, "aminoAcidMutations")
-      }
-    ) }, mutation.toString())),
-    selectedFilters.nucleotideInsertions.map((insertion) => /* @__PURE__ */ u$1("li", { children: /* @__PURE__ */ u$1(
+      },
+      mutation.toString()
+    )),
+    selectedFilters.nucleotideInsertions.map((insertion) => /* @__PURE__ */ u$1(
       SelectedNucleotideInsertion,
       {
         insertion,
         onDelete: (insertion2) => onSelectedRemoved(insertion2, "nucleotideInsertions")
-      }
-    ) }, insertion.toString())),
-    selectedFilters.aminoAcidInsertions.map((insertion) => /* @__PURE__ */ u$1("li", { children: /* @__PURE__ */ u$1(
+      },
+      insertion.toString()
+    )),
+    selectedFilters.aminoAcidInsertions.map((insertion) => /* @__PURE__ */ u$1(
       SelectedAminoAcidInsertion,
       {
         insertion,
         onDelete: (insertion2) => onSelectedRemoved(insertion2, "aminoAcidInsertions")
-      }
-    ) }, insertion.toString()))
+      },
+      insertion.toString()
+    ))
   ] });
 };
 const SelectedAminoAcidInsertion = ({ insertion, onDelete }) => {
@@ -8195,12 +8353,12 @@ const SelectedFilter = ({
   textColor
 }) => {
   return /* @__PURE__ */ u$1(
-    "div",
+    "span",
     {
-      class: "flex items-center flex-nowrap gap-1 rounded me-1 px-2.5 py-0.5 font-medium text-xs mb-1 min-w-max",
+      class: "inline-block mx-1 px-2 py-1 font-medium text-xs rounded-full",
       style: { backgroundColor, color: textColor },
       children: [
-        /* @__PURE__ */ u$1("div", { className: "whitespace-nowrap min-w-max", children: mutation.toString() }),
+        mutation.toString(),
         /* @__PURE__ */ u$1("button", { type: "button", onClick: () => onDelete(mutation), children: /* @__PURE__ */ u$1(DeleteIcon, {}) })
       ]
     }
@@ -8230,10 +8388,9 @@ let MutationFilterComponent = class extends PreactLitAdapter {
     super(...arguments);
     this.initialValue = void 0;
     this.width = "100%";
-    this.height = "6.5rem";
   }
   render() {
-    return /* @__PURE__ */ u$1(ReferenceGenomesAwaiter, { children: /* @__PURE__ */ u$1(MutationFilter, { initialValue: this.initialValue, width: this.width, height: this.height }) });
+    return /* @__PURE__ */ u$1(ReferenceGenomesAwaiter, { children: /* @__PURE__ */ u$1(MutationFilter, { initialValue: this.initialValue, width: this.width }) });
   }
 };
 __decorateClass([
@@ -8242,9 +8399,6 @@ __decorateClass([
 __decorateClass([
   n2({ type: String })
 ], MutationFilterComponent.prototype, "width", 2);
-__decorateClass([
-  n2({ type: String })
-], MutationFilterComponent.prototype, "height", 2);
 MutationFilterComponent = __decorateClass([
   t$2("gs-mutation-filter")
 ], MutationFilterComponent);