@genspectrum/dashboard-components 0.6.10 → 0.6.12

package/dist/dashboard-components.js

@@ -5025,7 +5025,7 @@ function P$1() {
 }
 function S$2(n3, l2, u2, t2, i3, o2, r2, f2, e3, c2, s6) {
   var a2, v2, y2, d2, w2, _2 = t2 && t2.__k || p$2, g2 = l2.length;
-  for (u2.__d = e3, $$1(u2, l2, _2), e3 = u2.__d, a2 = 0; a2 < g2; a2++) null != (y2 = u2.__k[a2]) && "boolean" != typeof y2 && "function" != typeof y2 && (v2 = -1 === y2.__i ? h$2 : _2[y2.__i] || h$2, y2.__i = a2, O$1(n3, y2, v2, i3, o2, r2, f2, e3, c2, s6), d2 = y2.__e, y2.ref && v2.ref != y2.ref && (v2.ref && N$1(v2.ref, null, y2), s6.push(y2.ref, y2.__c || d2, y2)), null == w2 && null != d2 && (w2 = d2), 65536 & y2.__u || v2.__k === y2.__k ? (e3 && "string" == typeof y2.type && !n3.contains(e3) && (e3 = x$2(v2)), e3 = I$1(y2, e3, n3)) : "function" == typeof y2.type && void 0 !== y2.__d ? e3 = y2.__d : d2 && (e3 = d2.nextSibling), y2.__d = void 0, y2.__u &= -196609);
+  for (u2.__d = e3, $$1(u2, l2, _2), e3 = u2.__d, a2 = 0; a2 < g2; a2++) null != (y2 = u2.__k[a2]) && "boolean" != typeof y2 && "function" != typeof y2 && (v2 = -1 === y2.__i ? h$2 : _2[y2.__i] || h$2, y2.__i = a2, O$1(n3, y2, v2, i3, o2, r2, f2, e3, c2, s6), d2 = y2.__e, y2.ref && v2.ref != y2.ref && (v2.ref && N$1(v2.ref, null, y2), s6.push(y2.ref, y2.__c || d2, y2)), null == w2 && null != d2 && (w2 = d2), 65536 & y2.__u || v2.__k === y2.__k ? e3 = I$1(y2, e3, n3) : "function" == typeof y2.type && void 0 !== y2.__d ? e3 = y2.__d : d2 && (e3 = d2.nextSibling), y2.__d = void 0, y2.__u &= -196609);
   u2.__d = e3, u2.__e = w2;
 }
 function $$1(n3, l2, u2) {
@@ -5039,7 +5039,7 @@ function I$1(n3, l2, u2) {
     for (t2 = n3.__k, i3 = 0; t2 && i3 < t2.length; i3++) t2[i3] && (t2[i3].__ = n3, l2 = I$1(t2[i3], l2, u2));
     return l2;
   }
-  n3.__e != l2 && (u2.insertBefore(n3.__e, l2 || null), l2 = n3.__e);
+  n3.__e != l2 && (l2 && n3.type && !u2.contains(l2) && (l2 = x$2(n3)), u2.insertBefore(n3.__e, l2 || null), l2 = n3.__e);
   do {
     l2 = l2 && l2.nextSibling;
   } while (null != l2 && 8 === l2.nodeType);
@@ -5117,7 +5117,11 @@ function O$1(n3, u2, t2, i3, o2, r2, f2, e3, c2, s6) {
     } while (h3.__d && ++I3 < 25);
     h3.state = h3.__s, null != h3.getChildContext && (i3 = d$2(d$2({}, i3), h3.getChildContext())), x2 && !p2 && null != h3.getSnapshotBeforeUpdate && (_2 = h3.getSnapshotBeforeUpdate(v2, w2)), S$2(n3, y$2(L3 = null != a2 && a2.type === k$1 && null == a2.key ? a2.props.children : a2) ? L3 : [L3], u2, t2, i3, o2, r2, f2, e3, c2, s6), h3.base = u2.__e, u2.__u &= -161, h3.__h.length && f2.push(h3), g2 && (h3.__E = h3.__ = null);
   } catch (n4) {
-    u2.__v = null, c2 || null != r2 ? (u2.__e = e3, u2.__u |= c2 ? 160 : 32, r2[r2.indexOf(e3)] = null) : (u2.__e = t2.__e, u2.__k = t2.__k), l$2.__e(n4, u2, t2);
+    if (u2.__v = null, c2 || null != r2) {
+      for (u2.__u |= c2 ? 160 : 32; e3 && 8 === e3.nodeType && e3.nextSibling; ) e3 = e3.nextSibling;
+      r2[r2.indexOf(e3)] = null, u2.__e = e3;
+    } else u2.__e = t2.__e, u2.__k = t2.__k;
+    l$2.__e(n4, u2, t2);
   }
   else null == r2 && u2.__v === t2.__v ? (u2.__k = t2.__k, u2.__e = t2.__e) : u2.__e = z$2(t2.__e, u2, t2, i3, o2, r2, f2, c2, s6);
   (a2 = l$2.diffed) && a2(u2);
@@ -5165,7 +5169,10 @@ function z$2(l2, u2, t2, i3, o2, r2, f2, e3, c2) {
 }
 function N$1(n3, u2, t2) {
   try {
-    "function" == typeof n3 ? n3(u2) : n3.current = u2;
+    if ("function" == typeof n3) {
+      var i3 = "function" == typeof n3.__u;
+      i3 && n3.__u(), i3 && null == u2 || (n3.__u = n3(u2));
+    } else n3.current = u2;
   } catch (n4) {
     l$2.__e(n4, t2);
   }
@@ -25870,6 +25877,242 @@ function filterBySegmentAndMutationType(data, displayedSegments, displayedMutati
   return data.filter(byDisplayedSegments).filter(byDisplayedMutationTypes);
 }
 const LapisUrlContext = G$1("");
+const CsvDownloadButton = ({
+  label = "Download",
+  filename = "data.csv",
+  getData,
+  className
+}) => {
+  const download = () => {
+    const content = getDownloadContent();
+    const blob = new Blob([content], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a2 = document.createElement("a");
+    a2.href = url;
+    a2.download = filename;
+    a2.click();
+    URL.revokeObjectURL(url);
+  };
+  const getDownloadContent = () => {
+    const data = getData();
+    const keys = getDataKeys(data);
+    const header = `${keys.join(",")}
+`;
+    const rows = data.map((row) => keys.map((key) => row[key]).join(",")).join("\n");
+    return header + rows;
+  };
+  const getDataKeys = (data) => {
+    const keysSet = data.map((row) => Object.keys(row)).reduce((accumulatedKeys, keys) => {
+      keys.forEach((key) => accumulatedKeys.add(key));
+      return accumulatedKeys;
+    }, /* @__PURE__ */ new Set());
+    return [...keysSet];
+  };
+  return /* @__PURE__ */ u$2("button", { className, onClick: download, children: label });
+};
+class UserFacingError extends Error {
+  constructor(headline, message) {
+    super(message);
+    this.headline = headline;
+    this.name = "UserFacingError";
+  }
+}
+const ErrorDisplay = ({ error }) => {
+  console.error(error);
+  const ref = A$1(null);
+  return /* @__PURE__ */ u$2("div", { className: "h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center flex-col", children: [
+    /* @__PURE__ */ u$2("div", { className: "text-red-700 font-bold", children: "Error" }),
+    /* @__PURE__ */ u$2("div", { children: [
+      "Oops! Something went wrong.",
+      error instanceof UserFacingError && /* @__PURE__ */ u$2(k$1, { children: [
+        " ",
+        /* @__PURE__ */ u$2(
+          "button",
+          {
+            className: "text-sm text-gray-600 hover:text-gray-300",
+            onClick: () => {
+              var _a2;
+              return (_a2 = ref.current) == null ? void 0 : _a2.showModal();
+            },
+            children: "Show details."
+          }
+        ),
+        /* @__PURE__ */ u$2("dialog", { ref, class: "modal", children: [
+          /* @__PURE__ */ u$2("div", { class: "modal-box", children: [
+            /* @__PURE__ */ u$2("form", { method: "dialog", children: /* @__PURE__ */ u$2("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
+            /* @__PURE__ */ u$2("h1", { class: "text-lg", children: error.headline }),
+            /* @__PURE__ */ u$2("p", { class: "py-4", children: error.message })
+          ] }),
+          /* @__PURE__ */ u$2("form", { method: "dialog", class: "modal-backdrop", children: /* @__PURE__ */ u$2("button", { children: "close" }) })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+const ResizeContainer = ({ children, size }) => {
+  return /* @__PURE__ */ u$2("div", { style: size, className: "bg-white", children });
+};
+const ErrorBoundary = ({ size, children }) => {
+  const [internalError] = b$1();
+  if (internalError) {
+    return /* @__PURE__ */ u$2(ResizeContainer, { size, children: /* @__PURE__ */ u$2(ErrorDisplay, { error: internalError }) });
+  }
+  return /* @__PURE__ */ u$2(k$1, { children });
+};
+const Fullscreen = () => {
+  const element = A$1(null);
+  const isFullscreen = useFullscreenStatus();
+  return /* @__PURE__ */ u$2(
+    "button",
+    {
+      ref: element,
+      onClick: async () => {
+        if (element.current) {
+          if (isFullscreen) {
+            await document.exitFullscreen();
+          } else {
+            const componentRoot = findComponentRoot(element.current);
+            if (componentRoot) {
+              await componentRoot.requestFullscreen();
+            }
+          }
+        }
+      },
+      className: `mt-0.5 iconify text-2xl ${isFullscreen ? "mdi--fullscreen-exit hover:scale-90" : "mdi--fullscreen hover:scale-110"}`,
+      title: isFullscreen ? "Exit fullscreen" : "Enter fullscreen"
+    }
+  );
+};
+function findComponentRoot(element) {
+  var _a2;
+  return (_a2 = findShadowRoot(element)) == null ? void 0 : _a2.children[0];
+}
+function findShadowRoot(element) {
+  let current = element;
+  while (current) {
+    if (current instanceof ShadowRoot) {
+      return current;
+    }
+    if (current.parentNode === null) {
+      return null;
+    }
+    current = current.parentNode;
+  }
+  return null;
+}
+function useFullscreenStatus() {
+  const [isFullscreen, setIsFullscreen] = h$1(document.fullscreenElement !== null);
+  y$1(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(document.fullscreenElement !== null);
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    };
+  }, []);
+  return isFullscreen;
+}
+const Info = ({ children }) => {
+  const dialogRef = A$1(null);
+  const toggleHelp = () => {
+    var _a2;
+    (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
+  };
+  return /* @__PURE__ */ u$2("div", { className: "relative", children: [
+    /* @__PURE__ */ u$2("button", { type: "button", className: "btn btn-xs", onClick: toggleHelp, children: "?" }),
+    /* @__PURE__ */ u$2("dialog", { ref: dialogRef, className: "modal modal-bottom sm:modal-middle", children: [
+      /* @__PURE__ */ u$2("div", { className: "modal-box sm:max-w-5xl", children: [
+        /* @__PURE__ */ u$2("form", { method: "dialog", children: /* @__PURE__ */ u$2("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
+        /* @__PURE__ */ u$2("div", { className: "flex flex-col", children }),
+        /* @__PURE__ */ u$2("div", { className: "modal-action", children: /* @__PURE__ */ u$2("form", { method: "dialog", children: /* @__PURE__ */ u$2("button", { className: "float-right underline text-sm hover:text-blue-700 mr-2", children: "Close" }) }) })
+      ] }),
+      /* @__PURE__ */ u$2("form", { method: "dialog", className: "modal-backdrop", children: /* @__PURE__ */ u$2("button", { children: "Helper to close when clicked outside" }) })
+    ] })
+  ] });
+};
+const InfoHeadline1 = ({ children }) => {
+  return /* @__PURE__ */ u$2("h1", { className: "text-lg font-bold", children });
+};
+const InfoHeadline2 = ({ children }) => {
+  return /* @__PURE__ */ u$2("h2", { className: "text-base font-bold mt-4", children });
+};
+const InfoParagraph = ({ children }) => {
+  return /* @__PURE__ */ u$2("p", { className: "text-justify my-1", children });
+};
+const InfoLink = ({ children, href }) => {
+  return /* @__PURE__ */ u$2("a", { className: "text-blue-600 hover:text-blue-800", href, target: "_blank", rel: "noopener noreferrer", children });
+};
+const InfoComponentCode = ({ componentName, params, lapisUrl }) => {
+  const componentCode = componentParametersToCode(componentName, params, lapisUrl);
+  const codePenData = {
+    title: "GenSpectrum dashboard component",
+    html: generateFullExampleCode(componentCode, componentName),
+    layout: "left",
+    editors: "100"
+  };
+  return /* @__PURE__ */ u$2(k$1, { children: [
+    /* @__PURE__ */ u$2(InfoHeadline2, { children: "Use this component yourself" }),
+    /* @__PURE__ */ u$2(InfoParagraph, { children: [
+      "This component was created using the following parameters:",
+      /* @__PURE__ */ u$2("div", { className: "p-4 border border-gray-200 rounded-lg overflow-x-auto", children: /* @__PURE__ */ u$2("pre", { children: /* @__PURE__ */ u$2("code", { children: componentCode }) }) })
+    ] }),
+    /* @__PURE__ */ u$2(InfoParagraph, { children: [
+      "You can add this component to your own website using the",
+      " ",
+      /* @__PURE__ */ u$2(InfoLink, { href: "https://github.com/GenSpectrum/dashboard-components", children: "GenSpectrum dashboard components library" }),
+      " ",
+      "and the code from above."
+    ] }),
+    /* @__PURE__ */ u$2(InfoParagraph, { children: /* @__PURE__ */ u$2("form", { action: "https://codepen.io/pen/define", method: "POST", target: "_blank", children: [
+      /* @__PURE__ */ u$2(
+        "input",
+        {
+          type: "hidden",
+          name: "data",
+          value: JSON.stringify(codePenData).replace(/"/g, "&quot;").replace(/'/g, "&apos;")
+        }
+      ),
+      /* @__PURE__ */ u$2("button", { className: "text-blue-600 hover:text-blue-800", type: "submit", children: "Click here to try it out on CodePen." })
+    ] }) })
+  ] });
+};
+function componentParametersToCode(componentName, params, lapisUrl) {
+  const stringifyIfNeeded = (value) => {
+    return typeof value === "object" ? JSON.stringify(value) : value;
+  };
+  const attributes = indentLines(
+    Object.entries(params).map(([key, value]) => `${key}='${stringifyIfNeeded(value)}'`).join("\n"),
+    4
+  );
+  return `<gs-app lapis="${lapisUrl}">
+  <gs-${componentName}
+${attributes}
+  />
+</gs-app>`;
+}
+function generateFullExampleCode(componentCode, componentName) {
+  const storyBookPath = `/docs/visualization-${componentName}--docs`;
+  return `<html>
+<head>
+  <script type="module" src="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/dashboard-components.js"><\/script>
+  <link rel="stylesheet" href="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/style.css" />
+</head>
+
+<body>
+  <!-- Component documentation: https://genspectrum.github.io/dashboard-components/?path=${storyBookPath} -->
+${indentLines(componentCode, 2)}
+</body>
+</html>
+`;
+}
+function indentLines(text, numberSpaces) {
+  const spaces = " ".repeat(numberSpaces);
+  return text.split("\n").map((line) => spaces + line).join("\n");
+}
+const LoadingDisplay = () => {
+  return /* @__PURE__ */ u$2("div", { "aria-label": "Loading", className: "h-full w-full skeleton" });
+};
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -27181,8 +27424,8 @@ const Dropdown = ({ children, buttonTitle, placement }) => {
   const toggle = () => {
     setShowContent(!showContent);
   };
-  return /* @__PURE__ */ u$2("div", { children: [
-    /* @__PURE__ */ u$2("button", { type: "button", className: "btn btn-xs whitespace-nowrap", onClick: toggle, ref: referenceRef, children: buttonTitle }),
+  return /* @__PURE__ */ u$2(k$1, { children: [
+    /* @__PURE__ */ u$2("button", { type: "button", className: "btn btn-xs whitespace-nowrap w-full", onClick: toggle, ref: referenceRef, children: buttonTitle }),
     /* @__PURE__ */ u$2("div", { ref: floatingRef, className: `${dropdownClass} ${showContent ? "" : "hidden"}`, children })
   ] });
 };
@@ -27191,245 +27434,81 @@ const CheckboxSelector = ({
   label,
   setItems
 }) => {
-  return /* @__PURE__ */ u$2(Dropdown, { buttonTitle: label, placement: "bottom-start", children: /* @__PURE__ */ u$2("ul", { children: items.map((item, index2) => /* @__PURE__ */ u$2("li", { className: "flex flex-row items-center", children: /* @__PURE__ */ u$2("label", { children: [
+  return /* @__PURE__ */ u$2(Dropdown, { buttonTitle: label, placement: "bottom-start", children: [
     /* @__PURE__ */ u$2(
-      "input",
+      "button",
       {
-        className: "mr-2",
-        type: "checkbox",
-        id: `item-${index2}`,
-        checked: item.checked,
-        onChange: () => {
-          const newItems = items.map(
-            (item2, i3) => i3 === index2 ? { ...item2, checked: !item2.checked } : item2
-          );
+        className: "btn btn-xs btn-ghost",
+        onClick: () => {
+          const newItems = items.map((item) => ({ ...item, checked: true }));
           setItems(newItems);
-        }
+        },
+        children: "Select all"
       }
     ),
-    item.label
-  ] }) }, item.label)) }) });
-};
-const ReferenceGenomeContext = G$1({ nucleotideSequences: [], genes: [] });
-const getSegmentSelectorLabel = (displayedSegments, prefix) => {
-  const allSelectedSelected = displayedSegments.filter((segment) => segment.checked).map((segment) => segment.segment);
-  if (allSelectedSelected.length === 0) {
-    return `${prefix}none`;
-  }
-  if (displayedSegments.length === allSelectedSelected.length) {
-    return `${prefix}all`;
-  }
-  return prefix + allSelectedSelected.join(", ");
+    /* @__PURE__ */ u$2(
+      "button",
+      {
+        className: "btn btn-xs btn-ghost",
+        onClick: () => {
+          const newItems = items.map((item) => ({ ...item, checked: false }));
+          setItems(newItems);
+        },
+        children: "Select none"
+      }
+    ),
+    /* @__PURE__ */ u$2("div", { className: "divider mt-0 mb-0" }),
+    /* @__PURE__ */ u$2("ul", { children: items.map((item, index2) => /* @__PURE__ */ u$2("li", { className: "flex flex-row items-center", children: /* @__PURE__ */ u$2("label", { children: [
+      /* @__PURE__ */ u$2(
+        "input",
+        {
+          className: "mr-2",
+          type: "checkbox",
+          id: `item-${index2}`,
+          checked: item.checked,
+          onChange: () => {
+            const newItems = items.map(
+              (item2, i3) => i3 === index2 ? { ...item2, checked: !item2.checked } : item2
+            );
+            setItems(newItems);
+          }
+        }
+      ),
+      item.label
+    ] }) }, item.label)) })
+  ] });
 };
-const SegmentSelector = ({
-  displayedSegments,
-  setDisplayedSegments,
-  prefix
+const MutationTypeSelector = ({
+  displayedMutationTypes,
+  setDisplayedMutationTypes
 }) => {
-  if (displayedSegments.length <= 1) {
-    return null;
-  }
-  return /* @__PURE__ */ u$2(
+  return /* @__PURE__ */ u$2("div", { className: "w-[6rem]", children: /* @__PURE__ */ u$2(
     CheckboxSelector,
     {
-      items: displayedSegments,
-      label: getSegmentSelectorLabel(displayedSegments, prefix || "Segments: "),
-      setItems: (items) => setDisplayedSegments(items)
+      items: displayedMutationTypes,
+      label: getMutationTypesSelectorLabel(displayedMutationTypes),
+      setItems: (items) => setDisplayedMutationTypes(items)
     }
-  );
+  ) });
 };
-function useDisplayedSegments(sequenceType) {
-  const referenceGenome = x$1(ReferenceGenomeContext);
-  const displayedSegments = getSegmentNames(referenceGenome, sequenceType).map((segment) => ({
-    segment,
-    label: segment,
-    checked: true
-  }));
-  return h$1(displayedSegments);
-}
-const CsvDownloadButton = ({
-  label = "Download",
-  filename = "data.csv",
-  getData,
-  className
-}) => {
-  const download = () => {
-    const content = getDownloadContent();
-    const blob = new Blob([content], { type: "text/csv" });
-    const url = URL.createObjectURL(blob);
-    const a2 = document.createElement("a");
-    a2.href = url;
-    a2.download = filename;
-    a2.click();
-    URL.revokeObjectURL(url);
-  };
-  const getDownloadContent = () => {
-    const data = getData();
-    const keys = getDataKeys(data);
-    const header = `${keys.join(",")}
-`;
-    const rows = data.map((row) => keys.map((key) => row[key]).join(",")).join("\n");
-    return header + rows;
-  };
-  const getDataKeys = (data) => {
-    const keysSet = data.map((row) => Object.keys(row)).reduce((accumulatedKeys, keys) => {
-      keys.forEach((key) => accumulatedKeys.add(key));
-      return accumulatedKeys;
-    }, /* @__PURE__ */ new Set());
-    return [...keysSet];
-  };
-  return /* @__PURE__ */ u$2("button", { className, onClick: download, children: label });
-};
-class UserFacingError extends Error {
-  constructor(headline, message) {
-    super(message);
-    this.headline = headline;
-    this.name = "UserFacingError";
-  }
-}
-const ErrorDisplay = ({ error }) => {
-  console.error(error);
-  const ref = A$1(null);
-  return /* @__PURE__ */ u$2("div", { className: "h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center flex-col", children: [
-    /* @__PURE__ */ u$2("div", { className: "text-red-700 font-bold", children: "Error" }),
-    /* @__PURE__ */ u$2("div", { children: [
-      "Oops! Something went wrong.",
-      error instanceof UserFacingError && /* @__PURE__ */ u$2(k$1, { children: [
-        " ",
-        /* @__PURE__ */ u$2(
-          "button",
-          {
-            className: "text-sm text-gray-600 hover:text-gray-300",
-            onClick: () => {
-              var _a2;
-              return (_a2 = ref.current) == null ? void 0 : _a2.showModal();
-            },
-            children: "Show details."
-          }
-        ),
-        /* @__PURE__ */ u$2("dialog", { ref, class: "modal", children: [
-          /* @__PURE__ */ u$2("div", { class: "modal-box", children: [
-            /* @__PURE__ */ u$2("form", { method: "dialog", children: /* @__PURE__ */ u$2("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
-            /* @__PURE__ */ u$2("h1", { class: "text-lg", children: error.headline }),
-            /* @__PURE__ */ u$2("p", { class: "py-4", children: error.message })
-          ] }),
-          /* @__PURE__ */ u$2("form", { method: "dialog", class: "modal-backdrop", children: /* @__PURE__ */ u$2("button", { children: "close" }) })
-        ] })
-      ] })
-    ] })
-  ] });
-};
-const ResizeContainer = ({ children, size }) => {
-  return /* @__PURE__ */ u$2("div", { style: size, className: "bg-white", children });
-};
-const ErrorBoundary = ({ size, children }) => {
-  const [internalError] = b$1();
-  if (internalError) {
-    return /* @__PURE__ */ u$2(ResizeContainer, { size, children: /* @__PURE__ */ u$2(ErrorDisplay, { error: internalError }) });
+const getMutationTypesSelectorLabel = (displayedMutationTypes) => {
+  const checkedLabels = displayedMutationTypes.filter((displayedMutationType) => displayedMutationType.checked);
+  if (checkedLabels.length === 0) {
+    return `No types`;
   }
-  return /* @__PURE__ */ u$2(k$1, { children });
-};
-const Fullscreen = () => {
-  const element = A$1(null);
-  const isFullscreen = useFullscreenStatus();
-  return /* @__PURE__ */ u$2(
-    "button",
-    {
-      ref: element,
-      onClick: async () => {
-        if (element.current) {
-          if (isFullscreen) {
-            await document.exitFullscreen();
-          } else {
-            const componentRoot = findComponentRoot(element.current);
-            if (componentRoot) {
-              await componentRoot.requestFullscreen();
-            }
-          }
-        }
-      },
-      className: `mt-0.5 iconify text-2xl ${isFullscreen ? "mdi--fullscreen-exit hover:scale-90" : "mdi--fullscreen hover:scale-110"}`,
-      title: isFullscreen ? "Exit fullscreen" : "Enter fullscreen"
-    }
-  );
-};
-function findComponentRoot(element) {
-  var _a2;
-  return (_a2 = findShadowRoot(element)) == null ? void 0 : _a2.children[0];
-}
-function findShadowRoot(element) {
-  let current = element;
-  while (current) {
-    if (current instanceof ShadowRoot) {
-      return current;
-    }
-    if (current.parentNode === null) {
-      return null;
-    }
-    current = current.parentNode;
+  if (displayedMutationTypes.length === checkedLabels.length) {
+    return displayedMutationTypes.map((type) => {
+      switch (type.type) {
+        case "substitution":
+          return "Subst.";
+        case "deletion":
+          return "Del.";
+      }
+    }).join(", ");
   }
-  return null;
-}
-function useFullscreenStatus() {
-  const [isFullscreen, setIsFullscreen] = h$1(document.fullscreenElement !== null);
-  y$1(() => {
-    const handleFullscreenChange = () => {
-      setIsFullscreen(document.fullscreenElement !== null);
-    };
-    document.addEventListener("fullscreenchange", handleFullscreenChange);
-    return () => {
-      document.removeEventListener("fullscreenchange", handleFullscreenChange);
-    };
-  }, []);
-  return isFullscreen;
-}
-const Info = ({ children }) => {
-  const dialogRef = A$1(null);
-  const toggleHelp = () => {
-    var _a2;
-    (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
-  };
-  return /* @__PURE__ */ u$2("div", { className: "relative", children: [
-    /* @__PURE__ */ u$2("button", { type: "button", className: "btn btn-xs", onClick: toggleHelp, children: "?" }),
-    /* @__PURE__ */ u$2("dialog", { ref: dialogRef, className: "modal modal-bottom sm:modal-middle", children: [
-      /* @__PURE__ */ u$2("div", { className: "modal-box", children: [
-        /* @__PURE__ */ u$2("form", { method: "dialog", children: /* @__PURE__ */ u$2("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
-        /* @__PURE__ */ u$2("div", { className: "flex flex-col", children }),
-        /* @__PURE__ */ u$2("div", { className: "modal-action", children: /* @__PURE__ */ u$2("form", { method: "dialog", children: /* @__PURE__ */ u$2("button", { className: "float-right underline text-sm hover:text-blue-700 mr-2", children: "Close" }) }) })
-      ] }),
-      /* @__PURE__ */ u$2("form", { method: "dialog", className: "modal-backdrop", children: /* @__PURE__ */ u$2("button", { children: "Helper to close when clicked outside" }) })
-    ] })
-  ] });
-};
-const InfoHeadline1 = ({ children }) => {
-  return /* @__PURE__ */ u$2("h1", { className: "text-lg font-bold", children });
-};
-const InfoHeadline2 = ({ children }) => {
-  return /* @__PURE__ */ u$2("h2", { className: "text-base font-bold mt-4", children });
-};
-const InfoParagraph = ({ children }) => {
-  return /* @__PURE__ */ u$2("p", { className: "text-justify my-1", children });
-};
-const InfoLink = ({ children, href }) => {
-  return /* @__PURE__ */ u$2("a", { className: "text-blue-600 hover:text-blue-800", href, target: "_blank", rel: "noopener noreferrer", children });
-};
-const LoadingDisplay = () => {
-  return /* @__PURE__ */ u$2("div", { "aria-label": "Loading", className: "h-full w-full skeleton" });
-};
-const MutationTypeSelector = ({
-  displayedMutationTypes,
-  setDisplayedMutationTypes
-}) => {
-  const checkedLabels = displayedMutationTypes.filter((type) => type.checked).map((type) => type.label);
-  const mutationTypesSelectorLabel = `Types: ${checkedLabels.length > 0 ? checkedLabels.join(", ") : "None"}`;
-  return /* @__PURE__ */ u$2(
-    CheckboxSelector,
-    {
-      items: displayedMutationTypes,
-      label: mutationTypesSelectorLabel,
-      setItems: (items) => setDisplayedMutationTypes(items)
-    }
-  );
+  return checkedLabels.map((type) => {
+    return type.label;
+  }).join(", ");
 };
 const NoDataDisplay = () => {
   return /* @__PURE__ */ u$2("div", { className: "h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center", children: /* @__PURE__ */ u$2("div", { children: "No data available." }) });
@@ -27521,6 +27600,9 @@ const PercentInput = ({ percentage, setPercentage }) => {
   const handleInputChange = (event) => {
     const input = event.target;
     const value = Number(input.value);
+    if (value === internalPercentage || input.value === "") {
+      return;
+    }
     const inRange2 = percentageInRange(value);
     if (inRange2) {
       setPercentage(value);
@@ -27545,37 +27627,51 @@ const PercentInput = ({ percentage, setPercentage }) => {
     "%"
   ] });
 };
+function useUpdateExternalValueInIntervals(setExternalValue, updateIntervalInMs, internalValue) {
+  const hasMounted = A$1(false);
+  y$1(() => {
+    if (!hasMounted.current) {
+      hasMounted.current = true;
+      return;
+    }
+    const minTimeout = setTimeout(() => {
+      setExternalValue(internalValue);
+    }, updateIntervalInMs);
+    return () => clearTimeout(minTimeout);
+  }, [internalValue]);
+}
 const ProportionSelector = ({
   proportionInterval,
   setMinProportion,
   setMaxProportion
 }) => {
+  const updateIntervalInMs = 300;
   const { min: minProportion, max: maxProportion } = proportionInterval;
+  const [internalMinProportion, setInternalMinProportion] = h$1(minProportion);
+  const [internalMaxProportion, setInternalMaxProportion] = h$1(maxProportion);
+  useUpdateExternalValueInIntervals(setMinProportion, updateIntervalInMs, internalMinProportion);
+  const updateMinPercentage = (minPercentage) => {
+    const newMinProportion = minPercentage / 100;
+    setInternalMinProportion(newMinProportion);
+  };
+  useUpdateExternalValueInIntervals(setMaxProportion, updateIntervalInMs, internalMaxProportion);
+  const updateMaxPercentage = (maxPercentage) => {
+    const newMaxProportion = maxPercentage / 100;
+    setInternalMaxProportion(newMaxProportion);
+  };
   return /* @__PURE__ */ u$2("div", { class: "flex flex-col w-64 mb-2", children: [
     /* @__PURE__ */ u$2("div", { class: "flex items-center ", children: [
-      /* @__PURE__ */ u$2(
-        PercentInput,
-        {
-          percentage: minProportion * 100,
-          setPercentage: (percentage) => setMinProportion(percentage / 100)
-        }
-      ),
+      /* @__PURE__ */ u$2(PercentInput, { percentage: internalMinProportion * 100, setPercentage: updateMinPercentage }),
       /* @__PURE__ */ u$2("div", { class: "m-2", children: "-" }),
-      /* @__PURE__ */ u$2(
-        PercentInput,
-        {
-          percentage: maxProportion * 100,
-          setPercentage: (percentage) => setMaxProportion(percentage / 100)
-        }
-      )
+      /* @__PURE__ */ u$2(PercentInput, { percentage: internalMaxProportion * 100, setPercentage: updateMaxPercentage })
     ] }),
     /* @__PURE__ */ u$2("div", { class: "my-1", children: /* @__PURE__ */ u$2(
       MinMaxRangeSlider,
       {
-        min: minProportion * 100,
-        max: maxProportion * 100,
-        setMin: (percentage) => setMinProportion(percentage / 100),
-        setMax: (percentage) => setMaxProportion(percentage / 100)
+        min: internalMinProportion * 100,
+        max: internalMaxProportion * 100,
+        setMin: updateMinPercentage,
+        setMax: updateMaxPercentage
       }
     ) })
   ] });
@@ -27586,15 +27682,56 @@ const ProportionSelectorDropdown = ({
   setMaxProportion
 }) => {
   const label = `${(proportionInterval.min * 100).toFixed(1)}% - ${(proportionInterval.max * 100).toFixed(1)}%`;
-  return /* @__PURE__ */ u$2(Dropdown, { buttonTitle: `Proportion ${label}`, placement: "bottom-start", children: /* @__PURE__ */ u$2(
+  return /* @__PURE__ */ u$2("div", { className: "w-44", children: /* @__PURE__ */ u$2(Dropdown, { buttonTitle: `Proportion ${label}`, placement: "bottom-start", children: /* @__PURE__ */ u$2(
     ProportionSelector,
     {
       proportionInterval,
       setMinProportion,
       setMaxProportion
     }
+  ) }) });
+};
+const ReferenceGenomeContext = G$1({ nucleotideSequences: [], genes: [] });
+const SegmentSelector = ({
+  displayedSegments,
+  setDisplayedSegments
+}) => {
+  if (displayedSegments.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ u$2("div", { className: "w-24", children: /* @__PURE__ */ u$2(
+    CheckboxSelector,
+    {
+      items: displayedSegments,
+      label: getSegmentSelectorLabel(displayedSegments),
+      setItems: (items) => setDisplayedSegments(items)
+    }
   ) });
 };
+const getSegmentSelectorLabel = (displayedSegments) => {
+  const allSelectedSelected = displayedSegments.filter((segment) => segment.checked).map((segment) => segment.segment);
+  if (allSelectedSelected.length === 0) {
+    return `No segments`;
+  }
+  if (displayedSegments.length === allSelectedSelected.length) {
+    return `All segments`;
+  }
+  const longestDisplayString = `All segments`;
+  const allSelectedSelectedString = allSelectedSelected.join(", ");
+  if (longestDisplayString.length >= allSelectedSelectedString.length) {
+    return allSelectedSelectedString;
+  }
+  return `${allSelectedSelected.length} ${allSelectedSelected.length === 1 ? "segment" : "segments"}`;
+};
+function useDisplayedSegments(sequenceType) {
+  const referenceGenome = x$1(ReferenceGenomeContext);
+  const displayedSegments = getSegmentNames(referenceGenome, sequenceType).map((segment) => ({
+    segment,
+    label: segment,
+    checked: true
+  }));
+  return h$1(displayedSegments);
+}
 const Tabs = ({ tabs, toolbar }) => {
   const [activeTab, setActiveTab] = h$1(tabs[0].title);
   const [heightOfTabs, setHeightOfTabs] = h$1("3rem");
@@ -27640,7 +27777,7 @@ const Tabs = ({ tabs, toolbar }) => {
     )
   ] });
 };
-function useQuery(fetchDataCallback, dependencies = []) {
+function useQuery(fetchDataCallback, dependencies) {
   const [data, setData] = h$1(null);
   const [error, setError] = h$1(null);
   const [isLoading, setIsLoading] = h$1(true);
@@ -27798,7 +27935,7 @@ const Toolbar$5 = ({
 const gridJsStyle = '.gridjs-head button, .gridjs-footer button {\n  cursor: pointer;\n  background-color: transparent;\n  background-image: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  outline: none;\n}\n\n.gridjs-temp {\n  position: relative;\n}\n\n.gridjs-head {\n  width: 100%;\n  margin-bottom: 5px;\n  padding: 5px 1px;\n}\n.gridjs-head::after {\n  content: "";\n  display: block;\n  clear: both;\n}\n.gridjs-head:empty {\n  padding: 0;\n  border: none;\n}\n\n.gridjs-container {\n  overflow: hidden;\n  display: inline-block;\n  padding: 2px;\n  color: #000;\n  position: relative;\n  z-index: 0;\n}\n\n.gridjs-footer {\n  display: block;\n  position: relative;\n  width: 100%;\n  z-index: 5;\n  padding: 12px 24px;\n  border-top: 1px solid #e5e7eb;\n  background-color: #fff;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);\n  border-radius: 0 0 8px 8px;\n  border-bottom-width: 1px;\n  border-color: #e5e7eb;\n}\n.gridjs-footer:empty {\n  padding: 0;\n  border: none;\n}\n\ninput.gridjs-input {\n  outline: none;\n  background-color: #fff;\n  border: 1px solid #d2d6dc;\n  border-radius: 5px;\n  padding: 10px 13px;\n  font-size: 14px;\n  line-height: 1.45;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\ninput.gridjs-input:focus {\n  box-shadow: 0 0 0 3px rgba(149, 189, 243, 0.5);\n  border-color: #9bc2f7;\n}\n\n.gridjs-pagination {\n  color: #3d4044;\n}\n.gridjs-pagination::after {\n  content: "";\n  display: block;\n  clear: both;\n}\n.gridjs-pagination .gridjs-summary {\n  float: left;\n  margin-top: 5px;\n}\n.gridjs-pagination .gridjs-pages {\n  float: right;\n}\n.gridjs-pagination .gridjs-pages button {\n  padding: 5px 14px;\n  border: 1px solid #d2d6dc;\n  background-color: #fff;\n  border-right: none;\n  outline: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.gridjs-pagination .gridjs-pages button:focus {\n  box-shadow: 0 0 0 2px rgba(149, 189, 243, 0.5);\n  position: relative;\n  margin-right: -1px;\n  border-right: 1px solid #d2d6dc;\n}\n.gridjs-pagination .gridjs-pages button:hover {\n  background-color: #f7f7f7;\n  color: rgb(60, 66, 87);\n  outline: none;\n}\n.gridjs-pagination .gridjs-pages button:disabled,\n.gridjs-pagination .gridjs-pages button[disabled],\n.gridjs-pagination .gridjs-pages button:hover:disabled {\n  cursor: default;\n  background-color: #fff;\n  color: #6b7280;\n}\n.gridjs-pagination .gridjs-pages button.gridjs-spread {\n  cursor: default;\n  box-shadow: none;\n  background-color: #fff;\n}\n.gridjs-pagination .gridjs-pages button.gridjs-currentPage {\n  background-color: #f7f7f7;\n  font-weight: bold;\n}\n.gridjs-pagination .gridjs-pages button:last-child {\n  border-bottom-right-radius: 6px;\n  border-top-right-radius: 6px;\n  border-right: 1px solid #d2d6dc;\n}\n.gridjs-pagination .gridjs-pages button:first-child {\n  border-bottom-left-radius: 6px;\n  border-top-left-radius: 6px;\n}\n.gridjs-pagination .gridjs-pages button:last-child:focus {\n  margin-right: 0;\n}\n\nbutton.gridjs-sort {\n  float: right;\n  height: 24px;\n  width: 13px;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  background-position-x: center;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  border: none;\n  outline: none;\n  background-size: contain;\n}\nbutton.gridjs-sort-neutral {\n  opacity: 0.3;\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0MDEuOTk4cHgiIGhlaWdodD0iNDAxLjk5OHB4IiB2aWV3Qm94PSIwIDAgNDAxLjk5OCA0MDEuOTk4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MDEuOTk4IDQwMS45OTg7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik03My4wOTIsMTY0LjQ1MmgyNTUuODEzYzQuOTQ5LDAsOS4yMzMtMS44MDcsMTIuODQ4LTUuNDI0YzMuNjEzLTMuNjE2LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0NwoJCQljMC00Ljk0OS0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2LDUuNDI0QzIxMC4yMzIsMS44MTIsMjA1Ljk1MSwwLDIwMC45OTksMHMtOS4yMzMsMS44MTItMTIuODUsNS40MjRMNjAuMjQyLDEzMy4zMzEKCQkJYy0zLjYxNywzLjYxNy01LjQyNCw3LjkwMS01LjQyNCwxMi44NWMwLDQuOTQ4LDEuODA3LDkuMjMxLDUuNDI0LDEyLjg0N0M2My44NjMsMTYyLjY0NSw2OC4xNDQsMTY0LjQ1Miw3My4wOTIsMTY0LjQ1MnoiLz4KCQk8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3CgkJCWMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2CgkJCWMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: center;\n}\nbutton.gridjs-sort-asc {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MXB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjE7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDE5Ny4yODdMMTU5LjAyOCw2OS4zODFjLTMuNjEzLTMuNjE3LTcuODk1LTUuNDI0LTEyLjg0Ny01LjQyNHMtOS4yMzMsMS44MDctMTIuODUsNS40MjRMNS40MjQsMTk3LjI4NwoJCUMxLjgwNywyMDAuOTA0LDAsMjA1LjE4NiwwLDIxMC4xMzRzMS44MDcsOS4yMzMsNS40MjQsMTIuODQ3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI1LDEyLjg1LDUuNDI1aDI1NS44MTMKCQljNC45NDksMCw5LjIzMy0xLjgwOCwxMi44NDgtNS40MjVjMy42MTMtMy42MTMsNS40MjctNy44OTgsNS40MjctMTIuODQ3UzI5MC41NDgsMjAwLjkwNCwyODYuOTM1LDE5Ny4yODd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: 35%;\n  background-size: 10px;\n}\nbutton.gridjs-sort-desc {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MnB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjI7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDY5LjM3N2MtMy42MTQtMy42MTctNy44OTgtNS40MjQtMTIuODQ4LTUuNDI0SDE4LjI3NGMtNC45NTIsMC05LjIzMywxLjgwNy0xMi44NSw1LjQyNAoJCUMxLjgwNyw3Mi45OTgsMCw3Ny4yNzksMCw4Mi4yMjhjMCw0Ljk0OCwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDdsMTI3LjkwNywxMjcuOTA3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI4LDEyLjg1LDUuNDI4CgkJczkuMjMzLTEuODExLDEyLjg0Ny01LjQyOEwyODYuOTM1LDk1LjA3NGMzLjYxMy0zLjYxNyw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDdDMjkyLjM2Miw3Ny4yNzksMjkwLjU0OCw3Mi45OTgsMjg2LjkzNSw2OS4zNzd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: 65%;\n  background-size: 10px;\n}\nbutton.gridjs-sort:focus {\n  outline: none;\n}\n\ntable.gridjs-table {\n  width: 100%;\n  max-width: 100%;\n  border-collapse: collapse;\n  text-align: left;\n  display: table;\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  table-layout: fixed;\n}\n\n.gridjs-tbody {\n  background-color: #fff;\n}\n\ntd.gridjs-td {\n  border: 1px solid #e5e7eb;\n  padding: 12px 24px;\n  background-color: #fff;\n  box-sizing: content-box;\n}\ntd.gridjs-td:first-child {\n  border-left: none;\n}\ntd.gridjs-td:last-child {\n  border-right: none;\n}\ntd.gridjs-message {\n  text-align: center;\n}\n\nth.gridjs-th {\n  position: relative;\n  color: #6b7280;\n  background-color: #f9fafb;\n  border: 1px solid #e5e7eb;\n  border-top: none;\n  padding: 14px 24px;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  outline: none;\n  vertical-align: middle;\n}\nth.gridjs-th .gridjs-th-content {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 100%;\n  float: left;\n}\nth.gridjs-th-sort {\n  cursor: pointer;\n}\nth.gridjs-th-sort .gridjs-th-content {\n  width: calc(100% - 15px);\n}\nth.gridjs-th-sort:hover {\n  background-color: #e5e7eb;\n}\nth.gridjs-th-sort:focus {\n  background-color: #e5e7eb;\n}\nth.gridjs-th-fixed {\n  position: sticky;\n  box-shadow: 0 1px 0 0 #e5e7eb;\n}\n@supports (-moz-appearance: none) {\n  th.gridjs-th-fixed {\n    box-shadow: 0 0 0 1px #e5e7eb;\n  }\n}\nth.gridjs-th:first-child {\n  border-left: none;\n}\nth.gridjs-th:last-child {\n  border-right: none;\n}\n\n.gridjs-tr {\n  border: none;\n}\n.gridjs-tr-selected td {\n  background-color: #ebf5ff;\n}\n.gridjs-tr:last-child td {\n  border-bottom: 0;\n}\n\n.gridjs *,\n.gridjs :after,\n.gridjs :before {\n  box-sizing: border-box;\n}\n\n.gridjs-wrapper {\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);\n  border-radius: 8px 8px 0 0;\n  display: block;\n  border-top-width: 1px;\n  border-color: #e5e7eb;\n}\n.gridjs-wrapper:nth-last-of-type(2) {\n  border-radius: 8px;\n  border-bottom-width: 1px;\n}\n\n.gridjs-search {\n  float: left;\n}\n.gridjs-search-input {\n  width: 250px;\n}\n\n.gridjs-loading-bar {\n  z-index: 10;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: #fff;\n  opacity: 0.5;\n}\n.gridjs-loading-bar::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(204, 204, 204, 0) 0, rgba(204, 204, 204, 0.2) 20%, rgba(204, 204, 204, 0.5) 60%, rgba(204, 204, 204, 0));\n  animation: shimmer 2s infinite;\n  content: "";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.gridjs-td .gridjs-checkbox {\n  display: block;\n  margin: auto;\n  cursor: pointer;\n}\n\n.gridjs-resizable {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  width: 5px;\n}\n.gridjs-resizable:hover {\n  cursor: ew-resize;\n  background-color: #9bc2f7;\n}\n/*# sourceMappingURL=mermaid.css?inline.map */';
 const minMaxPercentSliderCss = 'input[type=range]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    pointer-events: all;\n    width: 24px;\n    height: 24px;\n    background-color: #fff;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px #C6C6C6;\n    cursor: pointer;\n}\n\ninput[type=range]::-moz-range-thumb {\n    -webkit-appearance: none;\n    pointer-events: all;\n    width: 24px;\n    height: 24px;\n    background-color: #fff;\n    border-radius: 50%;\n    box-shadow: 0 0 0 1px #C6C6C6;\n    cursor: pointer;\n}\n\ninput[type=range]::-webkit-slider-thumb:hover {\n    background: #f7f7f7;\n}\n\ninput[type=range]::-webkit-slider-thumb:active {\n    box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;\n    -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;\n}\n\ninput[type="range"] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n         appearance: none;\n    height: 2px;\n    width: 100%;\n    position: absolute;\n    background-color: #C6C6C6;\n    pointer-events: none;\n}';
 const tailwindStyle = `/*
-! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -28405,6 +28542,39 @@ html {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+
+  .container {
+    max-width: 1536px;
+  }
+}
 .alert {
   display: grid;
   width: 100%;
@@ -28446,6 +28616,15 @@ 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;
   }
@@ -28539,6 +28718,25 @@ html {
   container-type: inline-size;
   grid-template-columns: auto 1fr;
 }
+.divider {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  height: 1rem;
+  white-space: nowrap;
+}
+.divider:before,
+  .divider:after {
+  height: 0.125rem;
+  width: 100%;
+  flex-grow: 1;
+  --tw-content: '';
+  content: var(--tw-content);
+  background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
+}
 .dropdown {
   position: relative;
   display: inline-block;
@@ -28784,6 +28982,10 @@ html {
     border-radius: inherit;
   }
 }
+.link {
+  cursor: pointer;
+  text-decoration-line: underline;
+}
 .menu li.disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
@@ -29051,6 +29253,11 @@ input.tab:checked + .tab-content,
   --alert-bg: var(--fallback-er,oklch(var(--er)/1));
   --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
 }
+.btm-nav > *:where(.active) {
+  border-top-width: 2px;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+}
 .btm-nav > *.disabled,
     .btm-nav > *[disabled] {
   pointer-events: none;
@@ -29203,6 +29410,9 @@ input.tab:checked + .tab-content,
     background-position-y: 0;
   }
 }
+.divider:not(:empty) {
+  gap: 1rem;
+}
 .dropdown.dropdown-open .dropdown-content,
 .dropdown:focus .dropdown-content,
 .dropdown:focus-within .dropdown-content {
@@ -29280,6 +29490,14 @@ input.tab:checked + .tab-content,
 .join > :where(*:not(:first-child)):is(.btn) {
   margin-inline-start: calc(var(--border-btn) * -1);
 }
+.link:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.link:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
 .loading {
   pointer-events: none;
   display: inline-block;
@@ -29310,6 +29528,14 @@ 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)));
+}
 .mockup-phone .display {
   overflow: hidden;
   border-radius: 40px;
@@ -29806,6 +30032,12 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
+.table-zebra tr.active,
+    .table-zebra tr.active:nth-child(even),
+    .table-zebra-zebra tbody tr:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
+}
 .table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
   border-bottom-width: 1px;
   --tw-border-opacity: 1;
@@ -29878,6 +30110,18 @@ input.tab:checked + .tab-content,
   --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;
 }
+.btm-nav-xs > *:where(.active) {
+  border-top-width: 1px;
+}
+.btm-nav-sm > *:where(.active) {
+  border-top-width: 2px;
+}
+.btm-nav-md > *:where(.active) {
+  border-top-width: 2px;
+}
+.btm-nav-lg > *:where(.active) {
+  border-top-width: 4px;
+}
 .btn-xs {
   height: 1.5rem;
   min-height: 1.5rem;
@@ -30297,6 +30541,9 @@ input.tab:checked + .tab-content,
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.mb-0 {
+  margin-bottom: 0px;
+}
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -30306,6 +30553,9 @@ input.tab:checked + .tab-content,
 .ml-1 {
   margin-left: 0.25rem;
 }
+.ml-2 {
+  margin-left: 0.5rem;
+}
 .ml-2\\.5 {
   margin-left: 0.625rem;
 }
@@ -30318,6 +30568,9 @@ input.tab:checked + .tab-content,
 .mr-2 {
   margin-right: 0.5rem;
 }
+.mt-0 {
+  margin-top: 0px;
+}
 .mt-0\\.5 {
   margin-top: 0.125rem;
 }
@@ -30357,12 +30610,24 @@ input.tab:checked + .tab-content,
 .w-16 {
   width: 4rem;
 }
+.w-20 {
+  width: 5rem;
+}
+.w-24 {
+  width: 6rem;
+}
 .w-32 {
   width: 8rem;
 }
+.w-44 {
+  width: 11rem;
+}
 .w-64 {
   width: 16rem;
 }
+.w-\\[6rem\\] {
+  width: 6rem;
+}
 .w-\\[7\\.5rem\\] {
   width: 7.5rem;
 }
@@ -30399,6 +30664,12 @@ input.tab:checked + .tab-content,
 .resize {
   resize: both;
 }
+.list-inside {
+  list-style-position: inside;
+}
+.list-disc {
+  list-style-type: disc;
+}
 .flex-row {
   flex-direction: row;
 }
@@ -30429,6 +30700,9 @@ input.tab:checked + .tab-content,
 .overflow-auto {
   overflow: auto;
 }
+.overflow-x-auto {
+  overflow-x: auto;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -30438,6 +30712,9 @@ input.tab:checked + .tab-content,
 .rounded-full {
   border-radius: 9999px;
 }
+.rounded-lg {
+  border-radius: 0.5rem;
+}
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -30693,6 +30970,12 @@ input.tab:checked + .tab-content,
 }
 .peer:hover ~ .peer-hover\\:visible {
   visibility: visible;
+}
+@media (min-width: 640px) {
+
+  .sm\\:max-w-5xl {
+    max-width: 64rem;
+  }
 }`;
 var __defProp$c = Object.defineProperty;
 var __decorateClass$c = (decorators, target, key, kind) => {
@@ -30934,7 +31217,10 @@ const MutationsGrid = ({
     }
     return {};
   };
-  const tableData = getMutationsGridData(data, sequenceType, proportionInterval).map((row) => Object.values(row));
+  const tableData = T$1(
+    () => getMutationsGridData(data, sequenceType, proportionInterval).map((row) => Object.values(row)),
+    [data, proportionInterval, sequenceType]
+  );
   return /* @__PURE__ */ u$2(Table, { data: tableData, columns: getHeaders(), pageSize });
 };
 const sortInsertions = (a2, b3) => {
@@ -31184,10 +31470,39 @@ const Toolbar$4 = ({
         filename: "insertions.csv"
       }
     ),
-    /* @__PURE__ */ u$2(Info, { children: "Info for mutations" }),
+    /* @__PURE__ */ u$2(MutationsInfo, {}),
     /* @__PURE__ */ u$2(Fullscreen, {})
   ] });
 };
+const MutationsInfo = () => /* @__PURE__ */ u$2(Info, { children: [
+  /* @__PURE__ */ u$2(InfoHeadline1, { children: "Mutations" }),
+  /* @__PURE__ */ u$2(InfoParagraph, { children: [
+    "This shows mutations of a variant. There are three types of mutations:",
+    " ",
+    /* @__PURE__ */ u$2(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Substitution", children: "substitutions" }),
+    ",",
+    " ",
+    /* @__PURE__ */ u$2(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Deletion", children: "deletions" }),
+    " and",
+    " ",
+    /* @__PURE__ */ u$2(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Insertion", children: "insertions" }),
+    "."
+  ] }),
+  /* @__PURE__ */ u$2(InfoHeadline2, { children: "Proportion calculation" }),
+  /* @__PURE__ */ u$2(InfoParagraph, { children: "The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the total number of sequences with a non-ambiguous symbol at the position." }),
+  /* @__PURE__ */ u$2(InfoParagraph, { children: [
+    /* @__PURE__ */ u$2("b", { children: "Example:" }),
+    " Assume we look at nucleotide mutations at position 5 where the reference has a T and assume there are 10 sequences in total:",
+    /* @__PURE__ */ u$2("ul", { className: "list-disc list-inside ml-2", children: [
+      /* @__PURE__ */ u$2("li", { children: "3 sequences have a C," }),
+      /* @__PURE__ */ u$2("li", { children: "2 sequences have a T," }),
+      /* @__PURE__ */ u$2("li", { children: "1 sequence has a G," }),
+      /* @__PURE__ */ u$2("li", { children: "3 sequences have an N," }),
+      /* @__PURE__ */ u$2("li", { children: "1 sequence has a Y (which means T or C)," })
+    ] }),
+    "then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from the calculation."
+  ] })
+] });
 var __defProp$a = Object.defineProperty;
 var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
 var __decorateClass$a = (decorators, target, key, kind) => {
@@ -33539,21 +33854,13 @@ const ScalingSelector = ({
     }
   );
 };
-const PrevalenceOverTime = ({ width, height, ...innerProps }) => {
+const PrevalenceOverTime = (componentProps) => {
+  const { width, height } = componentProps;
   const size = { height, width };
-  return /* @__PURE__ */ u$2(ErrorBoundary, { size, children: /* @__PURE__ */ u$2(ResizeContainer, { size, children: /* @__PURE__ */ u$2(PrevalenceOverTimeInner, { ...innerProps }) }) });
+  return /* @__PURE__ */ u$2(ErrorBoundary, { size, children: /* @__PURE__ */ u$2(ResizeContainer, { size, children: /* @__PURE__ */ u$2(PrevalenceOverTimeInner, { ...componentProps }) }) });
 };
-const PrevalenceOverTimeInner = ({
-  numeratorFilter,
-  denominatorFilter,
-  granularity,
-  smoothingWindow,
-  views,
-  confidenceIntervalMethods,
-  lapisDateField,
-  pageSize,
-  yAxisMaxConfig
-}) => {
+const PrevalenceOverTimeInner = (componentProps) => {
+  const { numeratorFilter, denominatorFilter, granularity, smoothingWindow, lapisDateField } = componentProps;
   const lapis = x$1(LapisUrlContext);
   const { data, error, isLoading } = useQuery(
     () => queryPrevalenceOverTime(
@@ -33575,30 +33882,15 @@ const PrevalenceOverTimeInner = ({
   if (data === null) {
     return /* @__PURE__ */ u$2(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$2(
-    PrevalenceOverTimeTabs,
-    {
-      views,
-      data,
-      granularity,
-      confidenceIntervalMethods,
-      pageSize,
-      yAxisMaxConfig
-    }
-  );
+  return /* @__PURE__ */ u$2(PrevalenceOverTimeTabs, { data, ...componentProps });
 };
-const PrevalenceOverTimeTabs = ({
-  views,
-  data,
-  granularity,
-  confidenceIntervalMethods,
-  pageSize,
-  yAxisMaxConfig
-}) => {
+const PrevalenceOverTimeTabs = ({ data, ...componentProps }) => {
+  const { views, granularity, confidenceIntervalMethods, pageSize, yAxisMaxLinear, yAxisMaxLogarithmic } = componentProps;
   const [yAxisScaleType, setYAxisScaleType] = h$1("linear");
   const [confidenceIntervalMethod, setConfidenceIntervalMethod] = h$1(
     confidenceIntervalMethods.length > 0 ? confidenceIntervalMethods[0] : "none"
   );
+  const yAxisMaxConfig = { linear: yAxisMaxLinear, logarithmic: yAxisMaxLogarithmic };
   const getTab = (view) => {
     switch (view) {
       case "bar":
@@ -33654,10 +33946,9 @@ const PrevalenceOverTimeTabs = ({
       yAxisScaleType,
       setYAxisScaleType,
       data,
-      granularity,
-      confidenceIntervalMethods,
       confidenceIntervalMethod,
-      setConfidenceIntervalMethod
+      setConfidenceIntervalMethod,
+      ...componentProps
     }
   );
   return /* @__PURE__ */ u$2(Tabs, { tabs, toolbar });
@@ -33666,12 +33957,12 @@ const Toolbar$3 = ({
   activeTab,
   yAxisScaleType,
   setYAxisScaleType,
-  confidenceIntervalMethods,
   confidenceIntervalMethod,
   setConfidenceIntervalMethod,
   data,
-  granularity
+  ...componentProps
 }) => {
+  const { confidenceIntervalMethods, granularity } = componentProps;
   return /* @__PURE__ */ u$2(k$1, { children: [
     activeTab !== "Table" && /* @__PURE__ */ u$2(ScalingSelector, { yAxisScaleType, setYAxisScaleType }),
     (activeTab === "Bar" || activeTab === "Line") && /* @__PURE__ */ u$2(
@@ -33690,14 +33981,34 @@ const Toolbar$3 = ({
         filename: "prevalence_over_time.csv"
       }
     ),
-    /* @__PURE__ */ u$2(PrevalenceOverTimeInfo, {}),
+    /* @__PURE__ */ u$2(PrevalenceOverTimeInfo, { ...componentProps }),
     /* @__PURE__ */ u$2(Fullscreen, {})
   ] });
 };
-const PrevalenceOverTimeInfo = () => {
+const PrevalenceOverTimeInfo = (componentProps) => {
+  const { granularity, smoothingWindow, views } = componentProps;
+  const lapis = x$1(LapisUrlContext);
   return /* @__PURE__ */ u$2(Info, { children: [
     /* @__PURE__ */ u$2(InfoHeadline1, { children: "Prevalence over time" }),
-    /* @__PURE__ */ u$2(InfoParagraph, { children: "Prevalence over time info." })
+    /* @__PURE__ */ u$2(InfoParagraph, { children: [
+      "This presents the proportion of one or more variants per ",
+      /* @__PURE__ */ u$2("b", { children: granularity }),
+      smoothingWindow > 0 && `, smoothed using a ${smoothingWindow}-${granularity} sliding window`,
+      ". The proportion is calculated as the number of sequences of the variant(s) divided by the number of sequences that match the ",
+      /* @__PURE__ */ u$2("code", { children: "denominatorFilter" }),
+      " (see below)."
+    ] }),
+    /* @__PURE__ */ u$2(InfoParagraph, { children: 'Sequences that have no assigned date will not be shown in the line and bubble chart. They will show up in the bar and table view with date "unknown".' }),
+    views.includes("bubble") && /* @__PURE__ */ u$2(k$1, { children: [
+      /* @__PURE__ */ u$2(InfoHeadline2, { children: "Bubble chart" }),
+      /* @__PURE__ */ u$2(InfoParagraph, { children: [
+        "The size of the bubble scales with the total number of available sequences from the",
+        " ",
+        granularity,
+        "."
+      ] })
+    ] }),
+    /* @__PURE__ */ u$2(InfoComponentCode, { componentName: "prevalence-over-time", params: componentProps, lapisUrl: lapis })
   ] });
 };
 const maxInData = (data) => Math.max(...data.flatMap((variant) => variant.content.map((dataPoint) => dataPoint.prevalence)));
@@ -33741,10 +34052,8 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         height: this.height,
         lapisDateField: this.lapisDateField,
         pageSize: this.pageSize,
-        yAxisMaxConfig: {
-          linear: this.yAxisMaxLinear,
-          logarithmic: this.yAxisMaxLogarithmic
-        }
+        yAxisMaxLinear: this.yAxisMaxLinear,
+        yAxisMaxLogarithmic: this.yAxisMaxLogarithmic
       }
     );
   }
@@ -34268,12 +34577,20 @@ const AggregatedDataTabs = ({ data, views, fields, pageSize }) => {
     }
   };
   const tabs = views.map((view) => getTab(view));
-  return /* @__PURE__ */ u$2(Tabs, { tabs, toolbar: /* @__PURE__ */ u$2(Toolbar$2, { data }) });
+  return /* @__PURE__ */ u$2(Tabs, { tabs, toolbar: /* @__PURE__ */ u$2(Toolbar$2, { data, fields }) });
 };
-const Toolbar$2 = ({ data }) => {
+const Toolbar$2 = ({ data, fields }) => {
   return /* @__PURE__ */ u$2("div", { class: "flex flex-row", children: [
     /* @__PURE__ */ u$2(CsvDownloadButton, { className: "mx-1 btn btn-xs", getData: () => data, filename: "aggregate.csv" }),
-    /* @__PURE__ */ u$2(Info, { children: "Info for aggregate" }),
+    /* @__PURE__ */ u$2(Info, { children: [
+      /* @__PURE__ */ u$2(InfoHeadline1, { children: "Aggregated data" }),
+      /* @__PURE__ */ u$2(InfoParagraph, { children: [
+        "This table shows the number and proportion of sequences stratified by the following fields:",
+        " ",
+        fields.join(", "),
+        ". The proportion is calculated with respect to the total count within the filtered dataset."
+      ] })
+    ] }),
     /* @__PURE__ */ u$2(Fullscreen, {})
   ] });
 };
@@ -34512,7 +34829,8 @@ const NumberSequencesOverTimeInner = ({
 }) => {
   const lapis = x$1(LapisUrlContext);
   const { data, error, isLoading } = useQuery(
-    () => queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField, granularity, smoothingWindow)
+    () => queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField, granularity, smoothingWindow),
+    [lapis, lapisFilter, lapisDateField, granularity, smoothingWindow]
   );
   if (isLoading) {
     return /* @__PURE__ */ u$2(LoadingDisplay, {});
@@ -34523,9 +34841,24 @@ const NumberSequencesOverTimeInner = ({
   if (data === null) {
     return /* @__PURE__ */ u$2(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$2(NumberSequencesOverTimeTabs, { views, data, granularity, pageSize });
+  return /* @__PURE__ */ u$2(
+    NumberSequencesOverTimeTabs,
+    {
+      views,
+      data,
+      granularity,
+      smoothingWindow,
+      pageSize
+    }
+  );
 };
-const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) => {
+const NumberSequencesOverTimeTabs = ({
+  views,
+  data,
+  granularity,
+  smoothingWindow,
+  pageSize
+}) => {
   const [yAxisScaleType, setYAxisScaleType] = h$1("linear");
   const getTab = (view) => {
     switch (view) {
@@ -34558,6 +34891,7 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) =>
           activeTab,
           data,
           granularity,
+          smoothingWindow,
           yAxisScaleType,
           setYAxisScaleType
         }
@@ -34565,7 +34899,14 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) =>
     }
   );
 };
-const Toolbar$1 = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScaleType }) => {
+const Toolbar$1 = ({
+  activeTab,
+  data,
+  granularity,
+  yAxisScaleType,
+  setYAxisScaleType,
+  smoothingWindow
+}) => {
   return /* @__PURE__ */ u$2(k$1, { children: [
     activeTab !== "Table" && /* @__PURE__ */ u$2(
       ScalingSelector,
@@ -34583,13 +34924,21 @@ const Toolbar$1 = ({ activeTab, data, granularity, yAxisScaleType, setYAxisScale
         filename: "number_of_sequences_over_time.csv"
       }
     ),
-    /* @__PURE__ */ u$2(NumberSequencesOverTimeInfo, {}),
+    /* @__PURE__ */ u$2(NumberSequencesOverTimeInfo, { granularity, smoothingWindow }),
     /* @__PURE__ */ u$2(Fullscreen, {})
   ] });
 };
-const NumberSequencesOverTimeInfo = () => /* @__PURE__ */ u$2(Info, { children: [
+const NumberSequencesOverTimeInfo = ({
+  granularity,
+  smoothingWindow
+}) => /* @__PURE__ */ u$2(Info, { children: [
   /* @__PURE__ */ u$2(InfoHeadline1, { children: "Number of sequences over time" }),
-  /* @__PURE__ */ u$2(InfoParagraph, { children: /* @__PURE__ */ u$2("a", { href: "https://github.com/GenSpectrum/dashboard-components/issues/315", children: "TODO" }) })
+  /* @__PURE__ */ u$2(InfoParagraph, { children: [
+    "This presents the number of available sequences of a variant per ",
+    /* @__PURE__ */ u$2("b", { children: granularity }),
+    smoothingWindow > 0 && `, smoothed using a ${smoothingWindow}-${granularity} sliding window`,
+    "."
+  ] })
 ] });
 var __defProp$6 = Object.defineProperty;
 var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
@@ -34656,308 +35005,43 @@ __decorateClass$6([
 NumberSequencesOverTimeComponent = __decorateClass$6([
   t$2("gs-number-sequences-over-time")
 ], NumberSequencesOverTimeComponent);
-function getFilteredMutationOverTimeData(data, overallMutationData, displayedSegments, displayedMutationTypes, proportionInterval) {
-  const filteredData = data.copy();
-  filterDisplayedSegments(displayedSegments, filteredData);
-  filterMutationTypes(displayedMutationTypes, filteredData);
-  filterProportion(filteredData, overallMutationData, proportionInterval);
-  return filteredData;
+function getDefaultExportFromCjs(x2) {
+  return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
-function filterDisplayedSegments(displayedSegments, data) {
-  displayedSegments.forEach((segment) => {
-    if (!segment.checked) {
-      data.getFirstAxisKeys().forEach((mutation) => {
-        if (mutation.segment === segment.segment) {
-          data.deleteRow(mutation);
-        }
-      });
-    }
-  });
+function commonjsRequire(path) {
+  throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }
-function filterMutationTypes(displayedMutationTypes, data) {
-  displayedMutationTypes.forEach((mutationType) => {
-    if (!mutationType.checked) {
-      data.getFirstAxisKeys().forEach((mutation) => {
-        if (mutationType.type === mutation.type) {
-          data.deleteRow(mutation);
+var object_hash = { exports: {} };
+(function(module, exports) {
+  !function(e3) {
+    module.exports = e3();
+  }(function() {
+    return function r2(o2, i3, u2) {
+      function s6(n3, e4) {
+        if (!i3[n3]) {
+          if (!o2[n3]) {
+            var t2 = "function" == typeof commonjsRequire && commonjsRequire;
+            if (!e4 && t2) return t2(n3, true);
+            if (a2) return a2(n3, true);
+            throw new Error("Cannot find module '" + n3 + "'");
+          }
+          e4 = i3[n3] = { exports: {} };
+          o2[n3][0].call(e4.exports, function(e5) {
+            var t3 = o2[n3][1][e5];
+            return s6(t3 || e5);
+          }, e4, e4.exports, r2, o2, i3, u2);
         }
-      });
-    }
-  });
-}
-function filterProportion(data, overallMutationData, proportionInterval) {
-  const overallProportionsByMutation = overallMutationData.content.reduce(
-    (acc, { mutation, proportion }) => ({
-      ...acc,
-      [mutation.toString()]: proportion
-    }),
-    {}
-  );
-  data.getFirstAxisKeys().forEach((mutation) => {
-    const overallProportion = overallProportionsByMutation[mutation.toString()] || -1;
-    if (overallProportion < proportionInterval.min || overallProportion > proportionInterval.max) {
-      data.deleteRow(mutation);
-    }
-  });
-}
-const ColorScaleSelector = ({ colorScale, setColorScale }) => {
-  const colorDisplayCss = `w-10 h-8 border border-gray-200 mx-2 text-xs flex items-center justify-center`;
-  return /* @__PURE__ */ u$2("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ u$2(
-      "div",
-      {
-        style: {
-          backgroundColor: singleGraphColorRGBByName(colorScale.color, 0),
-          color: "black"
-        },
-        className: colorDisplayCss,
-        children: formatProportion(colorScale.min, 0)
+        return i3[n3].exports;
       }
-    ),
-    /* @__PURE__ */ u$2("div", { className: "w-64", children: /* @__PURE__ */ u$2(
-      MinMaxRangeSlider,
-      {
-        min: colorScale.min * 100,
-        max: colorScale.max * 100,
-        setMin: (percentage) => {
-          setColorScale({ ...colorScale, min: percentage / 100 });
-        },
-        setMax: (percentage) => {
-          setColorScale({ ...colorScale, max: percentage / 100 });
-        }
-      }
-    ) }),
-    /* @__PURE__ */ u$2(
-      "div",
-      {
-        style: {
-          backgroundColor: singleGraphColorRGBByName(colorScale.color, 1),
-          color: "white"
-        },
-        className: colorDisplayCss,
-        children: formatProportion(colorScale.max, 0)
-      }
-    )
-  ] });
-};
-const getColorWithingScale = (value, colorScale) => {
-  if (colorScale.min === colorScale.max) {
-    return singleGraphColorRGBByName(colorScale.color, 0);
-  }
-  const colorRange = colorScale.max - colorScale.min;
-  const alpha2 = (value - colorScale.min) / colorRange;
-  return singleGraphColorRGBByName(colorScale.color, alpha2);
-};
-const getTextColorForScale = (value, colorScale) => {
-  if (colorScale.min === colorScale.max) {
-    return "black";
-  }
-  const colorRange = colorScale.max - colorScale.min;
-  const alpha2 = (value - colorScale.min) / colorRange;
-  return alpha2 <= 0.5 ? "black" : "white";
-};
-function getPositionCss(position) {
-  switch (position) {
-    case "top":
-      return "bottom-full translate-x-[-50%] left-1/2 mb-1";
-    case "top-start":
-      return "bottom-full mr-1 mb-1";
-    case "top-end":
-      return "bottom-full right-0 ml-1 mb-1";
-    case "bottom":
-      return "top-full translate-x-[-50%] left-1/2 mt-1";
-    case "bottom-start":
-      return "mr-1 mt-1";
-    case "bottom-end":
-      return "right-0 ml-1 mt-1";
-    case "left":
-      return "right-full translate-y-[-50%] top-1/2 mr-1";
-    case "right":
-      return "left-full translate-y-[-50%] top-1/2 ml-1";
-    case void 0:
-      return "";
-  }
-}
-const Tooltip = ({ children, content, position = "bottom" }) => {
-  return /* @__PURE__ */ u$2("div", { className: "relative w-full h-full", children: [
-    /* @__PURE__ */ u$2("div", { className: "peer w-full h-full", children }),
-    /* @__PURE__ */ u$2(
-      "div",
-      {
-        className: `absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible peer-hover:visible ${getPositionCss(position)}`,
-        children: content
-      }
-    )
-  ] });
-};
-const MAX_NUMBER_OF_GRID_ROWS = 100;
-const MUTATION_CELL_WIDTH_REM = 8;
-const MutationsOverTimeGrid = ({ data, colorScale }) => {
-  const allMutations = data.getFirstAxisKeys().sort(sortSubstitutionsAndDeletions);
-  const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
-  const dates = data.getSecondAxisKeys().sort((a2, b3) => compareTemporal(a2, b3));
-  const [showProportionText, setShowProportionText] = h$1(false);
-  const gridRef = A$1(null);
-  useShowProportion(gridRef, dates.length, setShowProportionText);
-  return /* @__PURE__ */ u$2(k$1, { children: [
-    allMutations.length > MAX_NUMBER_OF_GRID_ROWS && /* @__PURE__ */ u$2("div", { className: "pl-2", children: [
-      "Showing ",
-      MAX_NUMBER_OF_GRID_ROWS,
-      " of ",
-      allMutations.length,
-      " mutations. You can narrow the filter to reduce the number of mutations."
-    ] }),
-    /* @__PURE__ */ u$2(
-      "div",
-      {
-        ref: gridRef,
-        style: {
-          display: "grid",
-          gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
-          gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`
-        },
-        children: shownMutations.map((mutation, rowIndex) => {
-          return /* @__PURE__ */ u$2(k$1, { children: [
-            /* @__PURE__ */ u$2(
-              "div",
-              {
-                style: { gridRowStart: rowIndex + 1, gridColumnStart: 1 },
-                children: /* @__PURE__ */ u$2(MutationCell, { mutation })
-              },
-              `mutation-${mutation.toString()}`
-            ),
-            dates.map((date, columnIndex) => {
-              const value = data.get(mutation, date) ?? { proportion: 0, count: 0 };
-              const tooltipPosition = getTooltipPosition(
-                rowIndex,
-                shownMutations.length,
-                columnIndex,
-                dates.length
-              );
-              return /* @__PURE__ */ u$2(
-                "div",
-                {
-                  style: { gridRowStart: rowIndex + 1, gridColumnStart: columnIndex + 2 },
-                  children: /* @__PURE__ */ u$2(
-                    ProportionCell,
-                    {
-                      value,
-                      date,
-                      mutation,
-                      tooltipPosition,
-                      showProportionText,
-                      colorScale
-                    }
-                  )
-                },
-                `${mutation.toString()}-${date.toString()}`
-              );
-            })
-          ] }, `fragment-${mutation.toString()}`);
-        })
-      }
-    )
-  ] });
-};
-function useShowProportion(gridRef, girdColumns, setShowProportionText) {
-  y$1(() => {
-    const checkWidth = () => {
-      if (gridRef.current) {
-        const width = gridRef.current.getBoundingClientRect().width;
-        const widthPerDate = (width - remToPx(MUTATION_CELL_WIDTH_REM)) / girdColumns;
-        const maxWidthProportionText = 28;
-        setShowProportionText(widthPerDate > maxWidthProportionText);
-      }
-    };
-    checkWidth();
-    window.addEventListener("resize", checkWidth);
-    return () => {
-      window.removeEventListener("resize", checkWidth);
-    };
-  }, [girdColumns, gridRef, setShowProportionText]);
-}
-const remToPx = (rem) => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
-function getTooltipPosition(rowIndex, rows, columnIndex, columns) {
-  const tooltipX = rowIndex < rows / 2 ? "bottom" : "top";
-  const tooltipY = columnIndex < columns / 2 ? "start" : "end";
-  return `${tooltipX}-${tooltipY}`;
-}
-const ProportionCell = ({ value, mutation, date, tooltipPosition, showProportionText, colorScale }) => {
-  const tooltipContent = /* @__PURE__ */ u$2("div", { children: [
-    /* @__PURE__ */ u$2("p", { children: /* @__PURE__ */ u$2("span", { className: "font-bold", children: date.englishName() }) }),
-    /* @__PURE__ */ u$2("p", { children: [
-      "(",
-      timeIntervalDisplay(date),
-      ")"
-    ] }),
-    /* @__PURE__ */ u$2("p", { children: mutation.code }),
-    /* @__PURE__ */ u$2("p", { children: [
-      "Proportion: ",
-      formatProportion(value.proportion)
-    ] }),
-    /* @__PURE__ */ u$2("p", { children: [
-      "Count: ",
-      value.count
-    ] })
-  ] });
-  return /* @__PURE__ */ u$2("div", { className: "py-1 w-full h-full", children: /* @__PURE__ */ u$2(Tooltip, { content: tooltipContent, position: tooltipPosition, children: /* @__PURE__ */ u$2(
-    "div",
-    {
-      style: {
-        backgroundColor: getColorWithingScale(value.proportion, colorScale),
-        color: getTextColorForScale(value.proportion, colorScale)
-      },
-      className: `w-full h-full text-center hover:font-bold text-xs group`,
-      children: showProportionText ? formatProportion(value.proportion, 0) : void 0
-    }
-  ) }) });
-};
-const timeIntervalDisplay = (date) => {
-  if (date instanceof YearMonthDay) {
-    return date.toString();
-  }
-  return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
-};
-const MutationCell = ({ mutation }) => {
-  return /* @__PURE__ */ u$2("div", { className: "text-center", children: mutation.toString() });
-};
-function getDefaultExportFromCjs(x2) {
-  return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
-}
-function commonjsRequire(path) {
-  throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
-}
-var object_hash = { exports: {} };
-(function(module, exports) {
-  !function(e3) {
-    module.exports = e3();
-  }(function() {
-    return function r2(o2, i3, u2) {
-      function s6(n3, e4) {
-        if (!i3[n3]) {
-          if (!o2[n3]) {
-            var t2 = "function" == typeof commonjsRequire && commonjsRequire;
-            if (!e4 && t2) return t2(n3, true);
-            if (a2) return a2(n3, true);
-            throw new Error("Cannot find module '" + n3 + "'");
-          }
-          e4 = i3[n3] = { exports: {} };
-          o2[n3][0].call(e4.exports, function(e5) {
-            var t3 = o2[n3][1][e5];
-            return s6(t3 || e5);
-          }, e4, e4.exports, r2, o2, i3, u2);
-        }
-        return i3[n3].exports;
-      }
-      for (var a2 = "function" == typeof commonjsRequire && commonjsRequire, e3 = 0; e3 < u2.length; e3++) s6(u2[e3]);
-      return s6;
-    }({ 1: [function(w2, b3, m2) {
-      !(function(e3, n3, s6, c2, d2, h3, p2, g2, y2) {
-        var r2 = w2("crypto");
-        function t2(e4, t3) {
-          t3 = u2(e4, t3);
-          var n4;
-          return void 0 === (n4 = "passthrough" !== t3.algorithm ? r2.createHash(t3.algorithm) : new l2()).write && (n4.write = n4.update, n4.end = n4.update), f2(t3, n4).dispatch(e4), n4.update || n4.end(""), n4.digest ? n4.digest("buffer" === t3.encoding ? void 0 : t3.encoding) : (e4 = n4.read(), "buffer" !== t3.encoding ? e4.toString(t3.encoding) : e4);
+      for (var a2 = "function" == typeof commonjsRequire && commonjsRequire, e3 = 0; e3 < u2.length; e3++) s6(u2[e3]);
+      return s6;
+    }({ 1: [function(w2, b3, m2) {
+      !(function(e3, n3, s6, c2, d2, h3, p2, g2, y2) {
+        var r2 = w2("crypto");
+        function t2(e4, t3) {
+          t3 = u2(e4, t3);
+          var n4;
+          return void 0 === (n4 = "passthrough" !== t3.algorithm ? r2.createHash(t3.algorithm) : new l2()).write && (n4.write = n4.update, n4.end = n4.update), f2(t3, n4).dispatch(e4), n4.update || n4.end(""), n4.digest ? n4.digest("buffer" === t3.encoding ? void 0 : t3.encoding) : (e4 = n4.read(), "buffer" !== t3.encoding ? e4.toString(t3.encoding) : e4);
         }
         (m2 = b3.exports = t2).sha1 = function(e4) {
           return t2(e4);
@@ -35712,7 +35796,7 @@ var object_hash = { exports: {} };
 })(object_hash);
 var object_hashExports = object_hash.exports;
 const hash = /* @__PURE__ */ getDefaultExportFromCjs(object_hashExports);
-class Map2d {
+class Map2dBase {
   constructor(serializeFirstAxis = (key) => typeof key === "string" ? key : hash(key), serializeSecondAxis = (key) => typeof key === "string" ? key : hash(key)) {
     this.serializeFirstAxis = serializeFirstAxis;
     this.serializeSecondAxis = serializeSecondAxis;
@@ -35762,18 +35846,322 @@ class Map2d {
       });
     });
   }
-  copy() {
-    const copy = new Map2d(this.serializeFirstAxis, this.serializeSecondAxis);
-    this.data.forEach((value, key) => {
-      const keyFirstAxis = this.keysFirstAxis.get(key);
-      value.forEach((value2, key2) => {
-        const keySecondAxis = this.keysSecondAxis.get(key2);
-        copy.set(keyFirstAxis, keySecondAxis, value2);
+}
+class Map2dView {
+  constructor(map2) {
+    this.keysFirstAxis = new Map(map2.keysFirstAxis);
+    this.keysSecondAxis = new Map(map2.keysSecondAxis);
+    if (map2 instanceof Map2dView) {
+      this.baseMap = map2.baseMap;
+    }
+    this.baseMap = map2;
+  }
+  serializeFirstAxis(key) {
+    return this.baseMap.serializeFirstAxis(key);
+  }
+  serializeSecondAxis(key) {
+    return this.baseMap.serializeSecondAxis(key);
+  }
+  deleteRow(key) {
+    this.keysFirstAxis.delete(this.serializeFirstAxis(key));
+  }
+  get(keyFirstAxis, keySecondAxis) {
+    const firstAxisKey = this.serializeFirstAxis(keyFirstAxis);
+    const secondAxisKey = this.serializeSecondAxis(keySecondAxis);
+    if (!this.keysFirstAxis.has(firstAxisKey) || !this.keysSecondAxis.has(secondAxisKey)) {
+      return void 0;
+    }
+    return this.baseMap.get(keyFirstAxis, keySecondAxis);
+  }
+  set() {
+    throw new Error("Cannot set value on a Map2dView");
+  }
+  getFirstAxisKeys() {
+    return Array.from(this.keysFirstAxis.values());
+  }
+  getSecondAxisKeys() {
+    return Array.from(this.keysSecondAxis.values());
+  }
+  getAsArray(fillEmptyWith) {
+    return this.getFirstAxisKeys().map((firstAxisKey) => {
+      return this.getSecondAxisKeys().map((secondAxisKey) => {
+        return this.baseMap.get(firstAxisKey, secondAxisKey) ?? fillEmptyWith;
       });
     });
-    return copy;
+  }
+  getRow(key, fillEmptyWith) {
+    const serializedKeyFirstAxis = this.serializeFirstAxis(key);
+    if (!this.keysFirstAxis.has(serializedKeyFirstAxis)) {
+      return [];
+    }
+    return this.baseMap.getRow(key, fillEmptyWith);
+  }
+}
+function getFilteredMutationOverTimeData(data, overallMutationData, displayedSegments, displayedMutationTypes, proportionInterval) {
+  const filteredData = new Map2dView(data);
+  filterDisplayedSegments(displayedSegments, filteredData);
+  filterMutationTypes(displayedMutationTypes, filteredData);
+  filterProportion(filteredData, overallMutationData, proportionInterval);
+  return filteredData;
+}
+function filterDisplayedSegments(displayedSegments, data) {
+  displayedSegments.forEach((segment) => {
+    if (!segment.checked) {
+      data.getFirstAxisKeys().forEach((mutation) => {
+        if (mutation.segment === segment.segment) {
+          data.deleteRow(mutation);
+        }
+      });
+    }
+  });
+}
+function filterMutationTypes(displayedMutationTypes, data) {
+  displayedMutationTypes.forEach((mutationType) => {
+    if (!mutationType.checked) {
+      data.getFirstAxisKeys().forEach((mutation) => {
+        if (mutationType.type === mutation.type) {
+          data.deleteRow(mutation);
+        }
+      });
+    }
+  });
+}
+function filterProportion(data, overallMutationData, proportionInterval) {
+  const overallProportionsByMutation = overallMutationData.content.reduce(
+    (acc, { mutation, proportion }) => ({
+      ...acc,
+      [mutation.toString()]: proportion
+    }),
+    {}
+  );
+  data.getFirstAxisKeys().forEach((mutation) => {
+    const overallProportion = overallProportionsByMutation[mutation.toString()] || -1;
+    if (overallProportion < proportionInterval.min || overallProportion > proportionInterval.max) {
+      data.deleteRow(mutation);
+    }
+  });
+}
+const ColorScaleSelector = ({ colorScale, setColorScale }) => {
+  const colorDisplayCss = `w-10 h-8 border border-gray-200 mx-2 text-xs flex items-center justify-center`;
+  return /* @__PURE__ */ u$2("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ u$2(
+      "div",
+      {
+        style: {
+          backgroundColor: singleGraphColorRGBByName(colorScale.color, 0),
+          color: "black"
+        },
+        className: colorDisplayCss,
+        children: formatProportion(colorScale.min, 0)
+      }
+    ),
+    /* @__PURE__ */ u$2("div", { className: "w-64", children: /* @__PURE__ */ u$2(
+      MinMaxRangeSlider,
+      {
+        min: colorScale.min * 100,
+        max: colorScale.max * 100,
+        setMin: (percentage) => {
+          setColorScale({ ...colorScale, min: percentage / 100 });
+        },
+        setMax: (percentage) => {
+          setColorScale({ ...colorScale, max: percentage / 100 });
+        }
+      }
+    ) }),
+    /* @__PURE__ */ u$2(
+      "div",
+      {
+        style: {
+          backgroundColor: singleGraphColorRGBByName(colorScale.color, 1),
+          color: "white"
+        },
+        className: colorDisplayCss,
+        children: formatProportion(colorScale.max, 0)
+      }
+    )
+  ] });
+};
+const getColorWithingScale = (value, colorScale) => {
+  if (colorScale.min === colorScale.max) {
+    return singleGraphColorRGBByName(colorScale.color, 0);
+  }
+  const colorRange = colorScale.max - colorScale.min;
+  const alpha2 = (value - colorScale.min) / colorRange;
+  return singleGraphColorRGBByName(colorScale.color, alpha2);
+};
+const getTextColorForScale = (value, colorScale) => {
+  if (colorScale.min === colorScale.max) {
+    return "black";
+  }
+  const colorRange = colorScale.max - colorScale.min;
+  const alpha2 = (value - colorScale.min) / colorRange;
+  return alpha2 <= 0.5 ? "black" : "white";
+};
+function getPositionCss(position) {
+  switch (position) {
+    case "top":
+      return "bottom-full translate-x-[-50%] left-1/2 mb-1";
+    case "top-start":
+      return "bottom-full mr-1 mb-1";
+    case "top-end":
+      return "bottom-full right-0 ml-1 mb-1";
+    case "bottom":
+      return "top-full translate-x-[-50%] left-1/2 mt-1";
+    case "bottom-start":
+      return "mr-1 mt-1";
+    case "bottom-end":
+      return "right-0 ml-1 mt-1";
+    case "left":
+      return "right-full translate-y-[-50%] top-1/2 mr-1";
+    case "right":
+      return "left-full translate-y-[-50%] top-1/2 ml-1";
+    case void 0:
+      return "";
   }
 }
+const Tooltip = ({ children, content, position = "bottom" }) => {
+  return /* @__PURE__ */ u$2("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ u$2("div", { className: "peer w-full h-full", children }),
+    /* @__PURE__ */ u$2(
+      "div",
+      {
+        className: `absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible peer-hover:visible ${getPositionCss(position)}`,
+        children: content
+      }
+    )
+  ] });
+};
+const MAX_NUMBER_OF_GRID_ROWS = 100;
+const MUTATION_CELL_WIDTH_REM = 8;
+const MutationsOverTimeGrid = ({ data, colorScale }) => {
+  const allMutations = data.getFirstAxisKeys().sort(sortSubstitutionsAndDeletions);
+  const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
+  const dates = data.getSecondAxisKeys().sort((a2, b3) => compareTemporal(a2, b3));
+  const [showProportionText, setShowProportionText] = h$1(false);
+  const gridRef = A$1(null);
+  useShowProportion(gridRef, dates.length, setShowProportionText);
+  return /* @__PURE__ */ u$2(k$1, { children: [
+    allMutations.length > MAX_NUMBER_OF_GRID_ROWS && /* @__PURE__ */ u$2("div", { className: "pl-2", children: [
+      "Showing ",
+      MAX_NUMBER_OF_GRID_ROWS,
+      " of ",
+      allMutations.length,
+      " mutations. You can narrow the filter to reduce the number of mutations."
+    ] }),
+    /* @__PURE__ */ u$2(
+      "div",
+      {
+        ref: gridRef,
+        style: {
+          display: "grid",
+          gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
+          gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`
+        },
+        children: shownMutations.map((mutation, rowIndex) => {
+          return /* @__PURE__ */ u$2(k$1, { children: [
+            /* @__PURE__ */ u$2(
+              "div",
+              {
+                style: { gridRowStart: rowIndex + 1, gridColumnStart: 1 },
+                children: /* @__PURE__ */ u$2(MutationCell, { mutation })
+              },
+              `mutation-${mutation.toString()}`
+            ),
+            dates.map((date, columnIndex) => {
+              const value = data.get(mutation, date) ?? { proportion: 0, count: 0 };
+              const tooltipPosition = getTooltipPosition(
+                rowIndex,
+                shownMutations.length,
+                columnIndex,
+                dates.length
+              );
+              return /* @__PURE__ */ u$2(
+                "div",
+                {
+                  style: { gridRowStart: rowIndex + 1, gridColumnStart: columnIndex + 2 },
+                  children: /* @__PURE__ */ u$2(
+                    ProportionCell,
+                    {
+                      value,
+                      date,
+                      mutation,
+                      tooltipPosition,
+                      showProportionText,
+                      colorScale
+                    }
+                  )
+                },
+                `${mutation.toString()}-${date.toString()}`
+              );
+            })
+          ] }, `fragment-${mutation.toString()}`);
+        })
+      }
+    )
+  ] });
+};
+function useShowProportion(gridRef, girdColumns, setShowProportionText) {
+  y$1(() => {
+    const checkWidth = () => {
+      if (gridRef.current) {
+        const width = gridRef.current.getBoundingClientRect().width;
+        const widthPerDate = (width - remToPx(MUTATION_CELL_WIDTH_REM)) / girdColumns;
+        const maxWidthProportionText = 28;
+        setShowProportionText(widthPerDate > maxWidthProportionText);
+      }
+    };
+    checkWidth();
+    window.addEventListener("resize", checkWidth);
+    return () => {
+      window.removeEventListener("resize", checkWidth);
+    };
+  }, [girdColumns, gridRef, setShowProportionText]);
+}
+const remToPx = (rem) => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+function getTooltipPosition(rowIndex, rows, columnIndex, columns) {
+  const tooltipX = rowIndex < rows / 2 ? "bottom" : "top";
+  const tooltipY = columnIndex < columns / 2 ? "start" : "end";
+  return `${tooltipX}-${tooltipY}`;
+}
+const ProportionCell = ({ value, mutation, date, tooltipPosition, showProportionText, colorScale }) => {
+  const tooltipContent = /* @__PURE__ */ u$2("div", { children: [
+    /* @__PURE__ */ u$2("p", { children: /* @__PURE__ */ u$2("span", { className: "font-bold", children: date.englishName() }) }),
+    /* @__PURE__ */ u$2("p", { children: [
+      "(",
+      timeIntervalDisplay(date),
+      ")"
+    ] }),
+    /* @__PURE__ */ u$2("p", { children: mutation.code }),
+    /* @__PURE__ */ u$2("p", { children: [
+      "Proportion: ",
+      formatProportion(value.proportion)
+    ] }),
+    /* @__PURE__ */ u$2("p", { children: [
+      "Count: ",
+      value.count
+    ] })
+  ] });
+  return /* @__PURE__ */ u$2("div", { className: "py-1 w-full h-full", children: /* @__PURE__ */ u$2(Tooltip, { content: tooltipContent, position: tooltipPosition, children: /* @__PURE__ */ u$2(
+    "div",
+    {
+      style: {
+        backgroundColor: getColorWithingScale(value.proportion, colorScale),
+        color: getTextColorForScale(value.proportion, colorScale)
+      },
+      className: `w-full h-full text-center hover:font-bold text-xs group`,
+      children: showProportionText ? formatProportion(value.proportion, 0) : void 0
+    }
+  ) }) });
+};
+const timeIntervalDisplay = (date) => {
+  if (date instanceof YearMonthDay) {
+    return date.toString();
+  }
+  return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
+};
+const MutationCell = ({ mutation }) => {
+  return /* @__PURE__ */ u$2("div", { className: "text-center", children: mutation.toString() });
+};
 const MAX_NUMBER_OF_GRID_COLUMNS = 200;
 async function queryOverallMutationData(lapisFilter, sequenceType, lapis, signal) {
   return fetchAndPrepareSubstitutionsOrDeletions(lapisFilter, sequenceType).evaluate(lapis, signal);
@@ -35845,7 +36233,7 @@ function fetchAndPrepareSubstitutionsOrDeletions(filter, sequenceType) {
   return new FetchSubstitutionsOrDeletionsOperator(filter, sequenceType, 1e-3);
 }
 function groupByMutation(data) {
-  const dataArray = new Map2d(
+  const dataArray = new Map2dBase(
     (mutation) => mutation.code,
     (date) => date.toString()
   );
@@ -35874,7 +36262,7 @@ const ColorScaleSelectorDropdown = ({
   colorScale,
   setColorScale
 }) => {
-  return /* @__PURE__ */ u$2(Dropdown, { buttonTitle: `Color scale`, placement: "bottom-start", children: /* @__PURE__ */ u$2(ColorScaleSelector, { colorScale, setColorScale }) });
+  return /* @__PURE__ */ u$2("div", { className: "w-20", children: /* @__PURE__ */ u$2(Dropdown, { buttonTitle: `Color scale`, placement: "bottom-start", children: /* @__PURE__ */ u$2(ColorScaleSelector, { colorScale, setColorScale }) }) });
 };
 const MutationsOverTime = ({ width, height, ...innerProps }) => {
   const size = { height, width };