@genspectrum/dashboard-components 0.6.10 → 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);
   }
@@ -27392,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" }) }) })
@@ -27413,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" });
 };
@@ -27798,7 +27872,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)
@@ -28784,6 +28858,10 @@ html {
     border-radius: inherit;
   }
 }
+.link {
+  cursor: pointer;
+  text-decoration-line: underline;
+}
 .menu li.disabled {
   cursor: not-allowed;
   -webkit-user-select: none;
@@ -29280,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;
@@ -30306,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;
 }
@@ -30399,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;
 }
@@ -30429,6 +30524,9 @@ input.tab:checked + .tab-content,
 .overflow-auto {
   overflow: auto;
 }
+.overflow-x-auto {
+  overflow-x: auto;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -30438,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;
 }
@@ -30693,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) => {
@@ -31184,10 +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) => {
@@ -33539,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(
@@ -33575,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":
@@ -33654,10 +33767,9 @@ const PrevalenceOverTimeTabs = ({
       yAxisScaleType,
       setYAxisScaleType,
       data,
-      granularity,
-      confidenceIntervalMethods,
       confidenceIntervalMethod,
-      setConfidenceIntervalMethod
+      setConfidenceIntervalMethod,
+      ...componentProps
     }
   );
   return /* @__PURE__ */ u$2(Tabs, { tabs, toolbar });
@@ -33666,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(
@@ -33690,14 +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)));
@@ -33741,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
       }
     );
   }
@@ -34268,12 +34398,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, {})
   ] });
 };
@@ -34523,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) {
@@ -34558,6 +34711,7 @@ const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) =>
           activeTab,
           data,
           granularity,
+          smoothingWindow,
           yAxisScaleType,
           setYAxisScaleType
         }
@@ -34565,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,
@@ -34583,13 +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;