@genspectrum/dashboard-components 0.6.9 → 0.6.11

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);
   }
@@ -25667,6 +25674,7 @@ const GsChart = ({ configuration }) => {
       return;
     }
     chartRef.current = new Chart(ctx, configuration);
+    resizeChartAfterFullscreenChange(chartRef, ctx, configuration);
     return () => {
       var _a2;
       (_a2 = chartRef.current) == null ? void 0 : _a2.destroy();
@@ -25674,6 +25682,13 @@ const GsChart = ({ configuration }) => {
   }, [canvasRef, configuration]);
   return /* @__PURE__ */ u$2("canvas", { ref: canvasRef });
 };
+const resizeChartAfterFullscreenChange = (chartRef, ctx, configuration) => {
+  document.addEventListener("fullscreenchange", () => {
+    var _a2;
+    (_a2 = chartRef.current) == null ? void 0 : _a2.destroy();
+    chartRef.current = new Chart(ctx, configuration);
+  });
+};
 Chart.register(...registerables, VennDiagramController, ArcSlice);
 const MutationComparisonVenn = ({
   data,
@@ -27312,7 +27327,7 @@ const ErrorDisplay = ({ error }) => {
   ] });
 };
 const ResizeContainer = ({ children, size }) => {
-  return /* @__PURE__ */ u$2("div", { style: size, children });
+  return /* @__PURE__ */ u$2("div", { style: size, className: "bg-white", children });
 };
 const ErrorBoundary = ({ size, children }) => {
   const [internalError] = b$1();
@@ -27321,6 +27336,60 @@ const ErrorBoundary = ({ size, children }) => {
   }
   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 = () => {
@@ -27330,7 +27399,7 @@ const Info = ({ children }) => {
   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("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" }) }) })
@@ -27351,6 +27420,73 @@ const InfoParagraph = ({ 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" });
 };
@@ -27729,13 +27865,14 @@ const Toolbar$5 = ({
         filename: "mutation_comparison.csv"
       }
     ),
-    /* @__PURE__ */ u$2(Info, { children: "Info for mutation comparison" })
+    /* @__PURE__ */ u$2(Info, { children: "Info for mutation comparison" }),
+    /* @__PURE__ */ u$2(Fullscreen, {})
   ] });
 };
 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)
@@ -28721,6 +28858,10 @@ html {
     border-radius: inherit;
   }
 }
+.link {
+  cursor: pointer;
+  text-decoration-line: underline;
+}
 .menu li.disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
@@ -29217,6 +29358,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;
@@ -30136,6 +30285,18 @@ input.tab:checked + .tab-content,
   right: auto;
   bottom: var(--tooltip-tail-offset);
 }
+.iconify {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
 .visible {
   visibility: visible;
 }
@@ -30231,6 +30392,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;
 }
@@ -30243,6 +30407,9 @@ input.tab:checked + .tab-content,
 .mr-2 {
   margin-right: 0.5rem;
 }
+.mt-0\\.5 {
+  margin-top: 0.125rem;
+}
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -30321,6 +30488,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;
 }
@@ -30351,6 +30524,9 @@ input.tab:checked + .tab-content,
 .overflow-auto {
   overflow: auto;
 }
+.overflow-x-auto {
+  overflow-x: auto;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -30360,6 +30536,9 @@ input.tab:checked + .tab-content,
 .rounded-full {
   border-radius: 9999px;
 }
+.rounded-lg {
+  border-radius: 0.5rem;
+}
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -30542,6 +30721,12 @@ input.tab:checked + .tab-content,
 .duration-150 {
   transition-duration: 150ms;
 }
+.mdi--fullscreen {
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M5 5h5v2H7v3H5zm9 0h5v5h-2V7h-3zm3 9h2v5h-5v-2h3zm-7 3v2H5v-5h2v3z'/%3E%3C/svg%3E");
+}
+.mdi--fullscreen-exit {
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' d='M14 14h5v2h-3v3h-2zm-9 0h5v5H8v-3H5zm3-9h2v5H5V8h3zm11 3v2h-5V5h2v3z'/%3E%3C/svg%3E");
+}
 @media (min-width: 640px) {
 
   .sm\\:modal-middle {
@@ -30565,6 +30750,16 @@ input.tab:checked + .tab-content,
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
+.hover\\:scale-110:hover {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.hover\\:scale-90:hover {
+  --tw-scale-x: .9;
+  --tw-scale-y: .9;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .hover\\:bg-gray-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -30599,6 +30794,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) => {
@@ -31090,9 +31291,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) => {
@@ -33444,21 +33675,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(
@@ -33480,30 +33703,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":
@@ -33559,10 +33767,9 @@ const PrevalenceOverTimeTabs = ({
       yAxisScaleType,
       setYAxisScaleType,
       data,
-      granularity,
-      confidenceIntervalMethods,
       confidenceIntervalMethod,
-      setConfidenceIntervalMethod
+      setConfidenceIntervalMethod,
+      ...componentProps
     }
   );
   return /* @__PURE__ */ u$2(Tabs, { tabs, toolbar });
@@ -33571,12 +33778,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(
@@ -33595,13 +33802,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)));
@@ -33645,10 +33873,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
       }
     );
   }
@@ -33989,7 +34215,8 @@ const RelativeGrowthAdvantageToolbar = ({
 }) => {
   return /* @__PURE__ */ u$2(k$1, { children: [
     /* @__PURE__ */ u$2(ScalingSelector, { yAxisScaleType, setYAxisScaleType }),
-    /* @__PURE__ */ u$2(RelativeGrowthAdvantageInfo, { generationTime })
+    /* @__PURE__ */ u$2(RelativeGrowthAdvantageInfo, { generationTime }),
+    /* @__PURE__ */ u$2(Fullscreen, {})
   ] });
 };
 const RelativeGrowthAdvantageInfo = ({ generationTime }) => {
@@ -34171,12 +34398,21 @@ 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, {})
   ] });
 };
 var __defProp$7 = Object.defineProperty;
@@ -34425,9 +34661,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) {
@@ -34460,6 +34711,7 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) =>
           activeTab,
           data,
           granularity,
+          smoothingWindow,
           yAxisScaleType,
           setYAxisScaleType
         }
@@ -34467,7 +34719,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,
@@ -34485,12 +34744,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;
@@ -34557,11 +34825,11 @@ __decorateClass$6([
 NumberSequencesOverTimeComponent = __decorateClass$6([
   t$2("gs-number-sequences-over-time")
 ], NumberSequencesOverTimeComponent);
-function getFilteredMutationOverTimeData(data, displayedSegments, displayedMutationTypes, proportionInterval) {
+function getFilteredMutationOverTimeData(data, overallMutationData, displayedSegments, displayedMutationTypes, proportionInterval) {
   const filteredData = data.copy();
   filterDisplayedSegments(displayedSegments, filteredData);
   filterMutationTypes(displayedMutationTypes, filteredData);
-  filterProportion(filteredData, proportionInterval);
+  filterProportion(filteredData, overallMutationData, proportionInterval);
   return filteredData;
 }
 function filterDisplayedSegments(displayedSegments, data) {
@@ -34586,12 +34854,17 @@ function filterMutationTypes(displayedMutationTypes, data) {
     }
   });
 }
-function filterProportion(data, proportionInterval) {
+function filterProportion(data, overallMutationData, proportionInterval) {
+  const overallProportionsByMutation = overallMutationData.content.reduce(
+    (acc, { mutation, proportion }) => ({
+      ...acc,
+      [mutation.toString()]: proportion
+    }),
+    {}
+  );
   data.getFirstAxisKeys().forEach((mutation) => {
-    const row = data.getRow(mutation, { count: 0, proportion: 0 });
-    if (!row.some(
-      (value) => value.proportion >= proportionInterval.min && value.proportion <= proportionInterval.max
-    )) {
+    const overallProportion = overallProportionsByMutation[mutation.toString()] || -1;
+    if (overallProportion < proportionInterval.min || overallProportion > proportionInterval.max) {
       data.deleteRow(mutation);
     }
   });
@@ -35671,6 +35944,9 @@ class Map2d {
   }
 }
 const MAX_NUMBER_OF_GRID_COLUMNS = 200;
+async function queryOverallMutationData(lapisFilter, sequenceType, lapis, signal) {
+  return fetchAndPrepareSubstitutionsOrDeletions(lapisFilter, sequenceType).evaluate(lapis, signal);
+}
 async function queryMutationsOverTimeData(lapisFilter, sequenceType, lapis, lapisDateField, granularity, signal) {
   const allDates = await getDatesInDataset(lapisFilter, lapis, granularity, lapisDateField, signal);
   if (allDates.length > MAX_NUMBER_OF_GRID_COLUMNS) {
@@ -35782,7 +36058,11 @@ const MutationsOverTimeInner = ({
 }) => {
   const lapis = x$1(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
-    return queryMutationsOverTimeData(lapisFilter, sequenceType, lapis, lapisDateField, granularity);
+    const [mutationOverTimeData, overallMutationData] = await Promise.all([
+      queryMutationsOverTimeData(lapisFilter, sequenceType, lapis, lapisDateField, granularity),
+      queryOverallMutationData(lapisFilter, sequenceType, lapis)
+    ]);
+    return { mutationOverTimeData, overallMutationData };
   }, [lapisFilter, sequenceType, lapis, granularity, lapisDateField]);
   if (isLoading) {
     return /* @__PURE__ */ u$2(LoadingDisplay, {});
@@ -35793,12 +36073,21 @@ const MutationsOverTimeInner = ({
   if (data === null) {
     return /* @__PURE__ */ u$2(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$2(MutationsOverTimeTabs, { mutationOverTimeData: data, sequenceType, views });
+  return /* @__PURE__ */ u$2(
+    MutationsOverTimeTabs,
+    {
+      overallMutationData: data.overallMutationData,
+      mutationOverTimeData: data.mutationOverTimeData,
+      sequenceType,
+      views
+    }
+  );
 };
 const MutationsOverTimeTabs = ({
   mutationOverTimeData,
   sequenceType,
-  views
+  views,
+  overallMutationData
 }) => {
   const [proportionInterval, setProportionInterval] = h$1({ min: 0.05, max: 0.9 });
   const [colorScale, setColorScale] = h$1({ min: 0, max: 1, color: "indigo" });
@@ -35810,11 +36099,12 @@ const MutationsOverTimeTabs = ({
   const filteredData = T$1(
     () => getFilteredMutationOverTimeData(
       mutationOverTimeData,
+      overallMutationData,
       displayedSegments,
       displayedMutationTypes,
       proportionInterval
     ),
-    [mutationOverTimeData, displayedSegments, displayedMutationTypes, proportionInterval]
+    [mutationOverTimeData, overallMutationData, displayedSegments, displayedMutationTypes, proportionInterval]
   );
   const getTab = (view) => {
     switch (view) {
@@ -35881,7 +36171,8 @@ const Toolbar = ({
         filename: "mutations_over_time.csv"
       }
     ),
-    /* @__PURE__ */ u$2(Info, { children: "Info for mutations over time" })
+    /* @__PURE__ */ u$2(Info, { children: "Info for mutations over time" }),
+    /* @__PURE__ */ u$2(Fullscreen, {})
   ] });
 };
 function getDownloadData(filteredData) {