@genspectrum/dashboard-components 0.3.2 → 0.4.1

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, flip, size } from "@floating-ui/dom";
 import { ReactiveElement } from "@lit/reactive-element";
 import { BarWithErrorBarsController, BarWithErrorBar } from "chartjs-chart-error-bars";
 import flatpickr from "flatpickr";
@@ -1171,32 +1172,98 @@ function filterMutationData(data, displayedSegments, displayedMutationTypes) {
   }));
 }
 const LapisUrlContext = createContext$1("");
+function useFloatingUi(referenceRef, floatingRef, middleware, placement) {
+  const cleanupRef = F(null);
+  _(() => {
+    if (!referenceRef.current || !floatingRef.current) {
+      return;
+    }
+    const { current: reference } = referenceRef;
+    const { current: floating } = floatingRef;
+    const update = () => {
+      computePosition(reference, floating, {
+        placement,
+        middleware
+      }).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();
+      }
+    };
+  }, [placement, middleware, referenceRef, floatingRef]);
+}
+function useCloseOnClickOutside(floatingRef, referenceRef, setShowContent) {
+  _(() => {
+    const handleClickOutside = (event) => {
+      const path = event.composedPath();
+      if (floatingRef.current && !path.includes(floatingRef.current) && referenceRef.current && !path.includes(referenceRef.current)) {
+        setShowContent(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [floatingRef, referenceRef, setShowContent]);
+}
+function useCloseOnEsc(setShowHelp) {
+  _(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setShowHelp(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [setShowHelp]);
+}
+const dropdownClass = "z-10 absolute w-max top-0 left-0 bg-white p-4 border border-gray-200 shadow-lg rounded-md";
+const Dropdown = ({ children, buttonTitle, placement }) => {
+  const [showContent, setShowContent] = p(false);
+  const referenceRef = F(null);
+  const floatingRef = F(null);
+  useFloatingUi(referenceRef, floatingRef, [offset(4), shift(), flip()], placement);
+  useCloseOnClickOutside(floatingRef, referenceRef, setShowContent);
+  useCloseOnEsc(setShowContent);
+  const toggle = () => {
+    setShowContent(!showContent);
+  };
+  return /* @__PURE__ */ u$1("div", { children: [
+    /* @__PURE__ */ u$1("button", { type: "button", className: "btn btn-xs whitespace-nowrap", onClick: toggle, ref: referenceRef, children: buttonTitle }),
+    /* @__PURE__ */ u$1("div", { ref: floatingRef, className: `${dropdownClass} ${showContent ? "" : "hidden"}`, children })
+  ] });
+};
 const CheckboxSelector = ({
-  className,
   items,
   label,
   setItems
 }) => {
-  return /* @__PURE__ */ u$1("div", { class: `dropdown ${className}`, children: [
-    /* @__PURE__ */ u$1("div", { tabIndex: 0, role: "button", class: "btn btn-xs text-nowrap", children: label }),
-    /* @__PURE__ */ u$1("ul", { tabIndex: 0, class: "p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box", children: items.map((item, index) => /* @__PURE__ */ u$1("li", { class: "flex flex-row items-center", children: /* @__PURE__ */ u$1("label", { children: [
-      /* @__PURE__ */ u$1(
-        "input",
-        {
-          type: "checkbox",
-          id: `item-${index}`,
-          checked: item.checked,
-          onChange: () => {
-            const newItems = items.map(
-              (item2, i2) => i2 === index ? { ...item2, checked: !item2.checked } : item2
-            );
-            setItems(newItems);
-          }
+  return /* @__PURE__ */ u$1(Dropdown, { buttonTitle: label, placement: "bottom-start", children: /* @__PURE__ */ u$1("ul", { children: items.map((item, index) => /* @__PURE__ */ u$1("li", { className: "flex flex-row items-center", children: /* @__PURE__ */ u$1("label", { children: [
+    /* @__PURE__ */ u$1(
+      "input",
+      {
+        className: "mr-2",
+        type: "checkbox",
+        id: `item-${index}`,
+        checked: item.checked,
+        onChange: () => {
+          const newItems = items.map(
+            (item2, i2) => i2 === index ? { ...item2, checked: !item2.checked } : item2
+          );
+          setItems(newItems);
         }
-      ),
-      item.label
-    ] }) }, item.label)) })
-  ] });
+      }
+    ),
+    item.label
+  ] }) }, item.label)) }) });
 };
 const ReferenceGenomeContext = createContext$1({ nucleotideSequences: [], genes: [] });
 const getSegmentSelectorLabel = (displayedSegments, prefix) => {
@@ -1220,7 +1287,6 @@ const SegmentSelector = ({
   return /* @__PURE__ */ u$1(
     CheckboxSelector,
     {
-      className: "mx-1",
       items: displayedSegments,
       label: getSegmentSelectorLabel(displayedSegments, prefix || "Segments: "),
       setItems: (items) => setDisplayedSegments(items)
@@ -1308,8 +1374,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,28 +1397,52 @@ 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, [
+    offset(10),
+    shift(),
+    size({
+      apply() {
+        if (!floatingRef.current) {
+          return;
+        }
+        floatingRef.current.style.width = "100vw";
+        floatingRef.current.style.height = height ? height : "50vh";
+      }
+    })
+  ]);
   const toggleHelp = () => {
     setShowHelp(!showHelp);
   };
+  useCloseOnEsc(setShowHelp);
+  useCloseOnClickOutside(floatingRef, referenceRef, setShowHelp);
   return /* @__PURE__ */ u$1("div", { className: "relative", children: [
-    /* @__PURE__ */ u$1("button", { className: "btn btn-xs", onClick: toggleHelp, children: "?" }),
-    showHelp && /* @__PURE__ */ u$1(
+    /* @__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: `${dropdownClass} overflow-y-auto opacity-90 ${showHelp ? "" : "hidden"}`,
         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"
+            }
+          )
         ]
       }
     )
@@ -1382,7 +1472,6 @@ const MutationTypeSelector = ({
   return /* @__PURE__ */ u$1(
     CheckboxSelector,
     {
-      className: "mx-1",
       items: displayedMutationTypes,
       label: mutationTypesSelectorLabel,
       setItems: (items) => setDisplayedMutationTypes(items)
@@ -1541,34 +1630,34 @@ const ProportionSelector = ({
 const ProportionSelectorDropdown = ({
   proportionInterval,
   setMinProportion,
-  setMaxProportion,
-  openDirection = "right"
+  setMaxProportion
 }) => {
   const label = `${(proportionInterval.min * 100).toFixed(1)}% - ${(proportionInterval.max * 100).toFixed(1)}%`;
-  return /* @__PURE__ */ u$1("div", { class: `dropdown ${openDirection === "left" ? "dropdown-end" : ""}`, children: [
-    /* @__PURE__ */ u$1("div", { tabIndex: 0, role: "button", class: "btn btn-xs whitespace-nowrap", children: [
-      "Proportion ",
-      label
-    ] }),
-    /* @__PURE__ */ u$1("ul", { tabIndex: 0, class: "p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-72", children: /* @__PURE__ */ u$1("div", { class: "mb-2 ml-2", children: /* @__PURE__ */ u$1(
-      ProportionSelector,
-      {
-        proportionInterval,
-        setMinProportion,
-        setMaxProportion
-      }
-    ) }) })
-  ] });
+  return /* @__PURE__ */ u$1(Dropdown, { buttonTitle: `Proportion ${label}`, placement: "bottom-start", children: /* @__PURE__ */ u$1(
+    ProportionSelector,
+    {
+      proportionInterval,
+      setMinProportion,
+      setMaxProportion
+    }
+  ) });
 };
 const Tabs = ({ tabs, toolbar }) => {
   const [activeTab, setActiveTab] = p(tabs[0].title);
   const [heightOfTabs, setHeightOfTabs] = p("3rem");
   const tabRef = F(null);
-  _(() => {
+  const updateHeightOfTabs = () => {
     if (tabRef.current) {
       const heightOfTabs2 = tabRef.current.getBoundingClientRect().height;
       setHeightOfTabs(`${heightOfTabs2}px`);
     }
+  };
+  _(() => {
+    updateHeightOfTabs();
+    window.addEventListener("resize", updateHeightOfTabs);
+    return () => {
+      window.removeEventListener("resize", updateHeightOfTabs);
+    };
   }, []);
   const tabElements = /* @__PURE__ */ u$1("div", { className: "flex flex-row", children: tabs.map((tab) => {
     return /* @__PURE__ */ u$1(Fragment, { children: /* @__PURE__ */ u$1(
@@ -1584,9 +1673,9 @@ const Tabs = ({ tabs, toolbar }) => {
   }) });
   const toolbarElement = typeof toolbar === "function" ? toolbar(activeTab) : toolbar;
   return /* @__PURE__ */ u$1("div", { className: "h-full w-full", children: [
-    /* @__PURE__ */ u$1("div", { ref: tabRef, className: "flex flex-row justify-between", children: [
+    /* @__PURE__ */ u$1("div", { ref: tabRef, className: "flex flex-row justify-between flex-wrap", children: [
       tabElements,
-      toolbar && /* @__PURE__ */ u$1("div", { className: "py-2", children: toolbarElement })
+      toolbar && /* @__PURE__ */ u$1("div", { className: "py-2 flex flex-wrap gap-y-1", children: toolbarElement })
     ] }),
     /* @__PURE__ */ u$1(
       "div",
@@ -1627,8 +1716,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,
@@ -1716,7 +1805,7 @@ const Toolbar$3 = ({
   proportionInterval,
   setProportionInterval
 }) => {
-  return /* @__PURE__ */ u$1("div", { class: "flex flex-row", children: [
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(
       ProportionSelectorDropdown,
       {
@@ -1741,7 +1830,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 */';
@@ -2387,15 +2476,6 @@ html {
     color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
   }
 
-  .menu li > *:not(ul, .menu-title, details, .btn):active,
-.menu li > *:not(ul, .menu-title, details, .btn).active,
-.menu li > details > summary:active {
-    --tw-bg-opacity: 1;
-    background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
-    --tw-text-opacity: 1;
-    color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
-  }
-
   .tab:hover {
     --tw-text-opacity: 1;
   }
@@ -2514,39 +2594,6 @@ html {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   transition-duration: 200ms;
 }
-.dropdown-end .dropdown-content {
-  inset-inline-end: 0px;
-}
-.dropdown-left .dropdown-content {
-  bottom: auto;
-  inset-inline-end: 100%;
-  top: 0px;
-  transform-origin: right;
-}
-.dropdown-right .dropdown-content {
-  bottom: auto;
-  inset-inline-start: 100%;
-  top: 0px;
-  transform-origin: left;
-}
-.dropdown-bottom .dropdown-content {
-  bottom: auto;
-  top: 100%;
-  transform-origin: top;
-}
-.dropdown-top .dropdown-content {
-  bottom: 100%;
-  top: auto;
-  transform-origin: bottom;
-}
-.dropdown-end.dropdown-right .dropdown-content {
-  bottom: 0px;
-  top: auto;
-}
-.dropdown-end.dropdown-left .dropdown-content {
-  bottom: 0px;
-  top: auto;
-}
 .dropdown.dropdown-open .dropdown-content,
 .dropdown:not(.dropdown-hover):focus .dropdown-content,
 .dropdown:focus-within .dropdown-content {
@@ -2641,19 +2688,6 @@ html {
     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));
   }
 
-  :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
-    cursor: pointer;
-    outline: 2px solid transparent;
-    outline-offset: 2px;
-  }
-
-  @supports (color: oklch(0% 0 0)) {
-
-    :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
-      background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
-    }
-  }
-
   .tab[disabled],
     .tab[disabled]:hover {
     cursor: not-allowed;
@@ -2780,31 +2814,6 @@ html {
     border-radius: inherit;
   }
 }
-.menu {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  padding: 0.5rem;
-}
-.menu :where(li ul) {
-  position: relative;
-  white-space: nowrap;
-  margin-inline-start: 1rem;
-  padding-inline-start: 0.5rem;
-}
-.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
-  display: grid;
-  grid-auto-flow: column;
-  align-content: flex-start;
-  align-items: center;
-  gap: 0.5rem;
-  grid-auto-columns: minmax(auto, max-content) auto max-content;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
 .menu li.disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
@@ -2812,20 +2821,6 @@ html {
           user-select: none;
   color: var(--fallback-bc,oklch(var(--bc)/0.3));
 }
-.menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
-  display: none;
-}
-:where(.menu li) {
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-items: stretch;
-}
-:where(.menu li) .badge {
-  justify-self: end;
-}
 .modal {
   pointer-events: none;
   position: fixed;
@@ -3049,6 +3044,29 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.toggle {
+  flex-shrink: 0;
+  --tglbg: var(--fallback-b1,oklch(var(--b1)/1));
+  --handleoffset: 1.5rem;
+  --handleoffsetcalculator: calc(var(--handleoffset) * -1);
+  --togglehandleborder: 0 0;
+  height: 1.5rem;
+  width: 3rem;
+  cursor: pointer;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-radius: var(--rounded-badge, 1.9rem);
+  border-width: 1px;
+  border-color: currentColor;
+  background-color: currentColor;
+  color: var(--fallback-bc,oklch(var(--bc)/0.5));
+  transition: background,
+    box-shadow var(--animation-input, 0.2s) ease-out;
+  box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
+    0 0 0 2px var(--tglbg) inset,
+    var(--togglehandleborder);
+}
 .alert-error {
   border-color: var(--fallback-er,oklch(var(--er)/0.2));
   --tw-text-opacity: 1;
@@ -3282,9 +3300,6 @@ input.tab:checked + .tab-content,
   margin-bottom: 0px;
   margin-inline-start: -1px;
 }
-.join-item:focus {
-  isolation: isolate;
-}
 .loading {
   pointer-events: none;
   display: inline-block;
@@ -3307,40 +3322,6 @@ input.tab:checked + .tab-content,
 .loading-md {
   width: 1.5rem;
 }
-:where(.menu li:empty) {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
-  opacity: 0.1;
-  margin: 0.5rem 1rem;
-  height: 1px;
-}
-.menu :where(li ul):before {
-  position: absolute;
-  bottom: 0.75rem;
-  inset-inline-start: 0px;
-  top: 0.75rem;
-  width: 1px;
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
-  opacity: 0.1;
-  content: "";
-}
-.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
-.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
-  border-radius: var(--rounded-btn, 0.5rem);
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  text-align: start;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  transition-duration: 200ms;
-  text-wrap: balance;
-}
 :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible {
   cursor: pointer;
   background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
@@ -3349,38 +3330,6 @@ input.tab:checked + .tab-content,
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.menu li > *:not(ul, .menu-title, details, .btn):active,
-.menu li > *:not(ul, .menu-title, details, .btn).active,
-.menu li > details > summary:active {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
-  --tw-text-opacity: 1;
-  color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
-}
-.menu :where(li > details > summary)::-webkit-details-marker {
-  display: none;
-}
-.menu :where(li > details > summary):after,
-.menu :where(li > .menu-dropdown-toggle):after {
-  justify-self: end;
-  display: block;
-  margin-top: -0.5rem;
-  height: 0.5rem;
-  width: 0.5rem;
-  transform: rotate(45deg);
-  transition-property: transform, margin-top;
-  transition-duration: 0.3s;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  content: "";
-  transform-origin: 75% 75%;
-  box-shadow: 2px 2px;
-  pointer-events: none;
-}
-.menu :where(li > details[open] > summary):after,
-.menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
-  transform: rotate(225deg);
-  margin-top: 0;
-}
 .mockup-phone .display {
   overflow: hidden;
   border-radius: 40px;
@@ -3901,6 +3850,49 @@ input.tab:checked + .tab-content,
     opacity: 1;
   }
 }
+[dir="rtl"] .toggle {
+  --handleoffsetcalculator: calc(var(--handleoffset) * 1);
+}
+.toggle:focus-visible {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
+}
+.toggle:hover {
+  background-color: currentColor;
+}
+.toggle:checked,
+  .toggle[aria-checked="true"] {
+  background-image: none;
+  --handleoffsetcalculator: var(--handleoffset);
+  --tw-text-opacity: 1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+}
+[dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[aria-checked="true"] {
+  --handleoffsetcalculator: calc(var(--handleoffset) * -1);
+}
+.toggle:indeterminate {
+  --tw-text-opacity: 1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+  box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
+      calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
+      0 0 0 2px var(--tglbg) inset;
+}
+[dir="rtl"] .toggle:indeterminate {
+  box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
+        calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
+        0 0 0 2px var(--tglbg) inset;
+}
+.toggle:disabled {
+  cursor: not-allowed;
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+  background-color: transparent;
+  opacity: 0.3;
+  --togglehandleborder: 0 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset,
+      var(--handleoffsetcalculator) 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset;
+}
 .btn-xs {
   height: 1.5rem;
   min-height: 1.5rem;
@@ -4224,23 +4216,32 @@ input.tab:checked + .tab-content,
 .relative {
   position: relative;
 }
+.-right-3 {
+  right: -0.75rem;
+}
+.-top-3 {
+  top: -0.75rem;
+}
+.left-0 {
+  left: 0px;
+}
 .right-2 {
   right: 0.5rem;
 }
-.right-6 {
-  right: 1.5rem;
+.top-0 {
+  top: 0px;
 }
 .top-2 {
   top: 0.5rem;
 }
-.top-8 {
-  top: 2rem;
+.z-10 {
+  z-index: 10;
 }
-.z-50 {
-  z-index: 50;
+.float-right {
+  float: right;
 }
-.z-\\[1\\] {
-  z-index: 1;
+.m-1 {
+  margin: 0.25rem;
 }
 .m-2 {
   margin: 0.5rem;
@@ -4257,24 +4258,18 @@ 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;
 }
@@ -4299,21 +4294,21 @@ input.tab:checked + .tab-content,
 .w-32 {
   width: 8rem;
 }
+.w-40 {
+  width: 10rem;
+}
 .w-64 {
   width: 16rem;
 }
-.w-72 {
-  width: 18rem;
-}
 .w-full {
   width: 100%;
 }
-.min-w-0 {
-  min-width: 0px;
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
 }
-.min-w-max {
-  min-width: -moz-max-content;
-  min-width: max-content;
+.min-w-40 {
+  min-width: 10rem;
 }
 .max-w-screen-lg {
   max-width: 1024px;
@@ -4321,9 +4316,15 @@ input.tab:checked + .tab-content,
 .flex-1 {
   flex: 1 1 0%;
 }
+.flex-grow {
+  flex-grow: 1;
+}
 .grow {
   flex-grow: 1;
 }
+.resize {
+  resize: both;
+}
 .flex-row {
   flex-direction: row;
 }
@@ -4333,50 +4334,35 @@ 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;
 }
+.gap-y-1 {
+  row-gap: 0.25rem;
+}
 .overflow-auto {
   overflow: auto;
 }
-.overflow-scroll {
-  overflow: scroll;
+.overflow-y-auto {
+  overflow-y: auto;
 }
 .whitespace-nowrap {
   white-space: nowrap;
 }
-.text-nowrap {
-  text-wrap: nowrap;
-}
 .break-words {
   overflow-wrap: break-word;
 }
-.rounded {
-  border-radius: 0.25rem;
-}
-.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 +4389,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;
@@ -4415,6 +4403,10 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -4423,9 +4415,9 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
-.bg-base-100 {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
 .bg-base-200 {
   --tw-bg-opacity: 1;
@@ -4435,28 +4427,26 @@ 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;
 }
+.p-4 {
+  padding: 1rem;
+}
 .px-2 {
   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 +4507,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 +4535,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 +4558,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 +4931,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);
@@ -5000,7 +5010,7 @@ const Toolbar$2 = ({
   proportionInterval,
   setProportionInterval
 }) => {
-  return /* @__PURE__ */ u$1("div", { class: "flex flex-row", children: [
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(SegmentSelector, { displayedSegments, setDisplayedSegments }),
     activeTab === "Table" && /* @__PURE__ */ u$1(
       MutationTypeSelector,
@@ -5015,8 +5025,7 @@ const Toolbar$2 = ({
         {
           proportionInterval,
           setMinProportion: (min) => setProportionInterval((prev) => ({ ...prev, min })),
-          setMaxProportion: (max) => setProportionInterval((prev) => ({ ...prev, max })),
-          openDirection: "left"
+          setMaxProportion: (max) => setProportionInterval((prev) => ({ ...prev, max }))
         }
       ),
       /* @__PURE__ */ u$1(
@@ -5041,7 +5050,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 +6661,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,
@@ -6773,7 +6782,7 @@ const Toolbar$1 = ({
   data,
   granularity
 }) => {
-  return /* @__PURE__ */ u$1("div", { class: "flex", children: [
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     activeTab !== "Table" && /* @__PURE__ */ u$1(ScalingSelector, { yAxisScaleType, setYAxisScaleType }),
     (activeTab === "Bar" || activeTab === "Line") && /* @__PURE__ */ u$1(
       ConfidenceIntervalSelector,
@@ -6795,7 +6804,7 @@ const Toolbar$1 = ({
   ] });
 };
 const PrevalenceOverTimeInfo = () => {
-  return /* @__PURE__ */ u$1(Info, { size: { width: "600px", height: "30vh" }, children: [
+  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 +7082,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,
@@ -7160,13 +7169,13 @@ const RelativeGrowthAdvantageToolbar = ({
   setYAxisScaleType,
   generationTime
 }) => {
-  return /* @__PURE__ */ u$1("div", { class: "flex", children: [
+  return /* @__PURE__ */ u$1(Fragment, { children: [
     /* @__PURE__ */ u$1(ScalingSelector, { yAxisScaleType, setYAxisScaleType }),
     /* @__PURE__ */ u$1(RelativeGrowthAdvantageInfo, { generationTime })
   ] });
 };
 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 +7300,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 +7335,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 +7394,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 +7410,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 +7532,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 = {
@@ -7518,13 +7628,13 @@ const DateRangeSelectorInner = ({
       })
     );
   };
-  return /* @__PURE__ */ u$1("div", { class: "join w-full", ref: divRef, children: [
+  return /* @__PURE__ */ u$1("div", { class: "flex flex-wrap", ref: divRef, children: [
     /* @__PURE__ */ u$1(
       Select,
       {
-        items: selectableOptions,
+        items: getSelectableOptions(customSelectOptions),
         selected: selectedDateRange,
-        selectStyle: "select-bordered rounded-none join-item grow",
+        selectStyle: "select-bordered rounded-none flex-grow w-40",
         onChange: (event) => {
           event.preventDefault();
           const select = event.target;
@@ -7533,78 +7643,34 @@ const DateRangeSelectorInner = ({
         }
       }
     ),
-    /* @__PURE__ */ u$1(
-      "input",
-      {
-        class: "input input-bordered rounded-none join-item grow",
-        type: "text",
-        placeholder: "Date from",
-        ref: fromDatePickerRef,
-        onChange: onChangeDateFrom,
-        onBlur: onChangeDateFrom
-      }
-    ),
-    /* @__PURE__ */ u$1(
-      "input",
-      {
-        class: "input input-bordered rounded-none join-item grow",
-        type: "text",
-        placeholder: "Date to",
-        ref: toDatePickerRef,
-        onChange: onChangeDateTo,
-        onBlur: onChangeDateTo
-      }
-    )
+    /* @__PURE__ */ u$1("div", { className: "flex flex-wrap flex-grow", children: [
+      /* @__PURE__ */ u$1(
+        "input",
+        {
+          class: "input input-bordered rounded-none flex-grow min-w-40",
+          type: "text",
+          size: 10,
+          placeholder: "Date from",
+          ref: fromDatePickerRef,
+          onChange: onChangeDateFrom,
+          onBlur: onChangeDateFrom
+        }
+      ),
+      /* @__PURE__ */ u$1(
+        "input",
+        {
+          class: "input input-bordered rounded-none flex-grow min-w-40",
+          type: "text",
+          size: 10,
+          placeholder: "Date to",
+          ref: toDatePickerRef,
+          onChange: onChangeDateTo,
+          onBlur: onChangeDateTo
+        }
+      )
+    ] })
   ] });
 };
-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 +7688,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 +7700,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 +7717,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 +7776,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 +7831,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 +7880,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 +8057,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 +8070,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 +8112,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 +8123,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 +8189,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 +8283,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 +8318,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 +8329,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);