@genspectrum/dashboard-components 0.1.4 → 0.2.0

package/dist/dashboard-components.js

@@ -93,7 +93,7 @@ const { is: i$1, defineProperty: e$1, getOwnPropertyDescriptor: r$2, getOwnPrope
   return i2;
 } }, f$2 = (t2, s2) => !i$1(t2, s2), y$1 = { attribute: true, type: String, converter: u$2, reflect: false, hasChanged: f$2 };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), a$1.litPropertyMetadata ?? (a$1.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-class b extends HTMLElement {
+let b$1 = class b extends HTMLElement {
   static addInitializer(t2) {
     this._$Ei(), (this.l ?? (this.l = [])).push(t2);
   }
@@ -303,8 +303,8 @@ class b extends HTMLElement {
   }
   firstUpdated(t2) {
   }
-}
-b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[d$1("elementProperties")] = /* @__PURE__ */ new Map(), b[d$1("finalized")] = /* @__PURE__ */ new Map(), p$1 == null ? void 0 : p$1({ ReactiveElement: b }), (a$1.reactiveElementVersions ?? (a$1.reactiveElementVersions = [])).push("2.0.4");
+};
+b$1.elementStyles = [], b$1.shadowRootOptions = { mode: "open" }, b$1[d$1("elementProperties")] = /* @__PURE__ */ new Map(), b$1[d$1("finalized")] = /* @__PURE__ */ new Map(), p$1 == null ? void 0 : p$1({ ReactiveElement: b$1 }), (a$1.reactiveElementVersions ?? (a$1.reactiveElementVersions = [])).push("2.0.4");
 /**
  * @license
  * Copyright 2017 Google LLC
@@ -492,9 +492,9 @@ let App = class extends LitElement {
   render() {
     return this.updateReferenceGenome.render({
       complete: () => html` <slot></slot>`,
-      error: () => html`<p>Error</p>`,
-      // TODO(#143): Add more advanced error handling
-      pending: () => html` <p>Loading reference genomes...</p> `
+      error: () => html` <div class="m-2 w-full alert alert-error">
+                    Error: Cannot fetch reference genome. Is LAPIS available?
+                </div>`
     });
   }
   createRenderRoot() {
@@ -586,6 +586,14 @@ function P(n3) {
   var u2 = r.context[n3.__c], i2 = h(t++, 9);
   return i2.c = n3, u2 ? (null == i2.__ && (i2.__ = true, u2.sub(r)), u2.props.value) : n3.__;
 }
+function b2(n3) {
+  var u2 = h(t++, 10), i2 = p();
+  return u2.__ = n3, r.componentDidCatch || (r.componentDidCatch = function(n4, t2) {
+    u2.__ && u2.__(n4, t2), i2[1](n4);
+  }), [i2[0], function() {
+    i2[1](void 0);
+  }];
+}
 function j() {
   for (var n3; n3 = f.shift(); )
     if (n3.__P && n3.__H)
@@ -850,45 +858,45 @@ const bases = {
     "-"
   ]
 };
-const sortSubstitutionsAndDeletions = (a2, b2) => {
-  if (a2.segment !== b2.segment) {
-    compareSegments(a2.segment, b2.segment);
+const sortSubstitutionsAndDeletions = (a2, b3) => {
+  if (a2.segment !== b3.segment) {
+    compareSegments(a2.segment, b3.segment);
   }
-  if (a2.position !== b2.position) {
-    return comparePositions(a2.position, b2.position);
+  if (a2.position !== b3.position) {
+    return comparePositions(a2.position, b3.position);
   }
   const aIsDeletion = a2 instanceof Deletion;
-  const bIsDeletion = b2 instanceof Deletion;
+  const bIsDeletion = b3 instanceof Deletion;
   if (aIsDeletion !== bIsDeletion) {
     return aIsDeletion ? 1 : -1;
   }
   if (!aIsDeletion && !bIsDeletion) {
-    if (a2.substitutionValue !== b2.substitutionValue) {
-      return compareSubstitutionValues(a2.substitutionValue, b2.substitutionValue);
+    if (a2.substitutionValue !== b3.substitutionValue) {
+      return compareSubstitutionValues(a2.substitutionValue, b3.substitutionValue);
     }
   }
   return 0;
 };
-const compareSegments = (a2, b2) => {
+const compareSegments = (a2, b3) => {
   if (a2 === void 0) {
     return -1;
   }
-  if (b2 === void 0) {
+  if (b3 === void 0) {
     return 1;
   }
-  return a2.localeCompare(b2);
+  return a2.localeCompare(b3);
 };
-const comparePositions = (a2, b2) => {
-  return a2 - b2;
+const comparePositions = (a2, b3) => {
+  return a2 - b3;
 };
-const compareSubstitutionValues = (a2, b2) => {
+const compareSubstitutionValues = (a2, b3) => {
   if (a2 === void 0) {
     return -1;
   }
-  if (b2 === void 0) {
+  if (b3 === void 0) {
     return 1;
   }
-  return a2.localeCompare(b2);
+  return a2.localeCompare(b3);
 };
 const formatProportion = (proportion) => {
   return `${(proportion * 100).toFixed(2)}%`;
@@ -1081,11 +1089,11 @@ class SortOperator {
 }
 function querySubstitutionsOrDeletions(variant, sequenceType, lapis, signal) {
   const fetchData = new FetchSubstitutionsOrDeletionsOperator(variant, sequenceType, 0);
-  const sortData = new SortOperator(fetchData, (a2, b2) => {
-    if (a2.mutation.segment !== b2.mutation.segment) {
-      return (a2.mutation.segment ?? "").localeCompare(b2.mutation.segment ?? "");
+  const sortData = new SortOperator(fetchData, (a2, b3) => {
+    if (a2.mutation.segment !== b3.mutation.segment) {
+      return (a2.mutation.segment ?? "").localeCompare(b3.mutation.segment ?? "");
     }
-    return a2.mutation.position - b2.mutation.position;
+    return a2.mutation.position - b3.mutation.position;
   });
   return sortData.evaluate(lapis, signal);
 }
@@ -1218,13 +1226,35 @@ const CsvDownloadButton = ({
   };
   return /* @__PURE__ */ u$1("button", { className, onClick: download, children: label });
 };
+class UserFacingError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "UserFacingError";
+  }
+}
 const ErrorDisplay = ({ error }) => {
-  return /* @__PURE__ */ u$1("div", { children: [
-    "Error: ",
-    error.message
+  return /* @__PURE__ */ u$1("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$1("div", { className: "text-red-700 font-bold", children: "Error" }),
+    /* @__PURE__ */ u$1("div", { children: "Oops! Something went wrong." }),
+    error instanceof UserFacingError && /* @__PURE__ */ u$1("div", { className: "text-sm text-gray-600", children: error.message })
   ] });
 };
+const ResizeContainer = ({ children, size, defaultSize }) => {
+  return /* @__PURE__ */ u$1("div", { style: extendByDefault(size, defaultSize), children });
+};
+const extendByDefault = (size, defaultSize) => {
+  if (size === void 0) {
+    return defaultSize;
+  }
+  return { ...defaultSize, ...size };
+};
 const Headline = ({ heading, children }) => {
+  if (!heading) {
+    return /* @__PURE__ */ u$1(Fragment, { children });
+  }
+  return /* @__PURE__ */ u$1(ResizingHeadline, { heading, children });
+};
+const ResizingHeadline = ({ heading, children }) => {
   const ref = F(null);
   const [h1Height, setH1Height] = p("2rem");
   _(() => {
@@ -1238,11 +1268,55 @@ const Headline = ({ heading, children }) => {
     /* @__PURE__ */ u$1("div", { style: { height: `calc(100% - ${h1Height})` }, children })
   ] });
 };
-const Info = ({ content, className }) => {
-  return /* @__PURE__ */ u$1("div", { class: `${className} tooltip`, "data-tip": content, children: /* @__PURE__ */ u$1("button", { class: "btn btn-xs", children: "?" }) });
+const ErrorBoundary = ({
+  size,
+  defaultSize,
+  headline,
+  children
+}) => {
+  const [internalError] = b2();
+  if (internalError) {
+    console.error(internalError);
+  }
+  if (internalError) {
+    return /* @__PURE__ */ u$1(ResizeContainer, { defaultSize, size, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error: internalError }) }) });
+  }
+  return /* @__PURE__ */ u$1(Fragment, { children });
+};
+const Info = ({ children, size }) => {
+  const [showHelp, setShowHelp] = p(false);
+  const toggleHelp = () => {
+    setShowHelp(!showHelp);
+  };
+  return /* @__PURE__ */ u$1("div", { className: "relative", children: [
+    /* @__PURE__ */ u$1("button", { className: "btn btn-xs", onClick: toggleHelp, children: "?" }),
+    showHelp && /* @__PURE__ */ u$1(
+      "div",
+      {
+        className: "absolute top-8 right-6 bg-white p-2 border border-black flex flex-col overflow-auto shadow-lg rounded z-50",
+        style: size,
+        children: [
+          /* @__PURE__ */ u$1("div", { className: "flex flex-col", children }),
+          /* @__PURE__ */ u$1("div", { className: "flex justify-end", children: /* @__PURE__ */ u$1("button", { className: "text-sm underline mt-2", onClick: toggleHelp, children: "Close" }) })
+        ]
+      }
+    )
+  ] });
+};
+const InfoHeadline1 = ({ children }) => {
+  return /* @__PURE__ */ u$1("h1", { className: "text-lg font-bold", children });
+};
+const InfoHeadline2 = ({ children }) => {
+  return /* @__PURE__ */ u$1("h2", { className: "text-base font-bold mt-4", children });
+};
+const InfoParagraph = ({ children }) => {
+  return /* @__PURE__ */ u$1("p", { className: "text-justify my-1", children });
+};
+const InfoLink = ({ children, href }) => {
+  return /* @__PURE__ */ u$1("a", { className: "text-blue-600 hover:text-blue-800", href, target: "_blank", rel: "noopener noreferrer", children });
 };
 const LoadingDisplay = () => {
-  return /* @__PURE__ */ u$1("div", { children: "Loading..." });
+  return /* @__PURE__ */ u$1("div", { "aria-label": "Loading", className: "h-full w-full skeleton" });
 };
 const MutationTypeSelector = ({
   displayedMutationTypes,
@@ -1261,7 +1335,7 @@ const MutationTypeSelector = ({
   );
 };
 const NoDataDisplay = () => {
-  return /* @__PURE__ */ u$1("div", { children: "No data available." });
+  return /* @__PURE__ */ u$1("div", { className: "h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center", children: /* @__PURE__ */ u$1("div", { children: "No data available." }) });
 };
 const MinMaxRangeSlider = ({
   min,
@@ -1431,15 +1505,6 @@ const ProportionSelectorDropdown = ({
     ) }) })
   ] });
 };
-const ResizeContainer = ({ children, size, defaultSize }) => {
-  return /* @__PURE__ */ u$1("div", { style: extendByDefault(size, defaultSize), children });
-};
-const extendByDefault = (size, defaultSize) => {
-  if (size === void 0) {
-    return defaultSize;
-  }
-  return { ...defaultSize, ...size };
-};
 const Tabs = ({ tabs, toolbar }) => {
   const [activeTab, setActiveTab] = p(tabs[0].title);
   const [heightOfTabs, setHeightOfTabs] = p("3rem");
@@ -1503,23 +1568,31 @@ const MutationComparison = ({
   variants,
   sequenceType,
   views,
-  size
+  size,
+  headline = "Mutation comparison"
+}) => {
+  const defaultSize = { height: "600px", width: "100%" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, defaultSize, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationComparisonInner, { variants, sequenceType, views }) }) }) });
+};
+const MutationComparisonInner = ({
+  variants,
+  sequenceType,
+  views
 }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationData(variants, sequenceType, lapis);
   }, [variants, sequenceType, lapis]);
-  const headline = "Mutation comparison";
   if (isLoading) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
   if (error !== null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error }) });
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
   }
   if (data === null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize: { height: "700px", width: "100%" }, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationComparisonTabs, { data: data.mutationData, sequenceType, views }) }) });
+  return /* @__PURE__ */ u$1(MutationComparisonTabs, { data: data.mutationData, sequenceType, views });
 };
 const MutationComparisonTabs = ({ data, views, sequenceType }) => {
   const [proportionInterval, setProportionInterval] = p({ min: 0.5, max: 1 });
@@ -1612,7 +1685,7 @@ const Toolbar$3 = ({
         filename: "mutation_comparison.csv"
       }
     ),
-    /* @__PURE__ */ u$1(Info, { className: "mx-1", content: "Info for mutation comparison" })
+    /* @__PURE__ */ u$1(Info, { children: "Info for mutation comparison" })
   ] });
 };
 const gridJsStyle = '.gridjs-head button, .gridjs-footer button {\n  cursor: pointer;\n  background-color: transparent;\n  background-image: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  outline: none;\n}\n\n.gridjs-temp {\n  position: relative;\n}\n\n.gridjs-head {\n  width: 100%;\n  margin-bottom: 5px;\n  padding: 5px 1px;\n}\n.gridjs-head::after {\n  content: "";\n  display: block;\n  clear: both;\n}\n.gridjs-head:empty {\n  padding: 0;\n  border: none;\n}\n\n.gridjs-container {\n  overflow: hidden;\n  display: inline-block;\n  padding: 2px;\n  color: #000;\n  position: relative;\n  z-index: 0;\n}\n\n.gridjs-footer {\n  display: block;\n  position: relative;\n  width: 100%;\n  z-index: 5;\n  padding: 12px 24px;\n  border-top: 1px solid #e5e7eb;\n  background-color: #fff;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);\n  border-radius: 0 0 8px 8px;\n  border-bottom-width: 1px;\n  border-color: #e5e7eb;\n}\n.gridjs-footer:empty {\n  padding: 0;\n  border: none;\n}\n\ninput.gridjs-input {\n  outline: none;\n  background-color: #fff;\n  border: 1px solid #d2d6dc;\n  border-radius: 5px;\n  padding: 10px 13px;\n  font-size: 14px;\n  line-height: 1.45;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\ninput.gridjs-input:focus {\n  box-shadow: 0 0 0 3px rgba(149, 189, 243, 0.5);\n  border-color: #9bc2f7;\n}\n\n.gridjs-pagination {\n  color: #3d4044;\n}\n.gridjs-pagination::after {\n  content: "";\n  display: block;\n  clear: both;\n}\n.gridjs-pagination .gridjs-summary {\n  float: left;\n  margin-top: 5px;\n}\n.gridjs-pagination .gridjs-pages {\n  float: right;\n}\n.gridjs-pagination .gridjs-pages button {\n  padding: 5px 14px;\n  border: 1px solid #d2d6dc;\n  background-color: #fff;\n  border-right: none;\n  outline: none;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n}\n.gridjs-pagination .gridjs-pages button:focus {\n  box-shadow: 0 0 0 2px rgba(149, 189, 243, 0.5);\n  position: relative;\n  margin-right: -1px;\n  border-right: 1px solid #d2d6dc;\n}\n.gridjs-pagination .gridjs-pages button:hover {\n  background-color: #f7f7f7;\n  color: rgb(60, 66, 87);\n  outline: none;\n}\n.gridjs-pagination .gridjs-pages button:disabled,\n.gridjs-pagination .gridjs-pages button[disabled],\n.gridjs-pagination .gridjs-pages button:hover:disabled {\n  cursor: default;\n  background-color: #fff;\n  color: #6b7280;\n}\n.gridjs-pagination .gridjs-pages button.gridjs-spread {\n  cursor: default;\n  box-shadow: none;\n  background-color: #fff;\n}\n.gridjs-pagination .gridjs-pages button.gridjs-currentPage {\n  background-color: #f7f7f7;\n  font-weight: bold;\n}\n.gridjs-pagination .gridjs-pages button:last-child {\n  border-bottom-right-radius: 6px;\n  border-top-right-radius: 6px;\n  border-right: 1px solid #d2d6dc;\n}\n.gridjs-pagination .gridjs-pages button:first-child {\n  border-bottom-left-radius: 6px;\n  border-top-left-radius: 6px;\n}\n.gridjs-pagination .gridjs-pages button:last-child:focus {\n  margin-right: 0;\n}\n\nbutton.gridjs-sort {\n  float: right;\n  height: 24px;\n  width: 13px;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  background-position-x: center;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  border: none;\n  outline: none;\n  background-size: contain;\n}\nbutton.gridjs-sort-neutral {\n  opacity: 0.3;\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0MDEuOTk4cHgiIGhlaWdodD0iNDAxLjk5OHB4IiB2aWV3Qm94PSIwIDAgNDAxLjk5OCA0MDEuOTk4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MDEuOTk4IDQwMS45OTg7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik03My4wOTIsMTY0LjQ1MmgyNTUuODEzYzQuOTQ5LDAsOS4yMzMtMS44MDcsMTIuODQ4LTUuNDI0YzMuNjEzLTMuNjE2LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0NwoJCQljMC00Ljk0OS0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2LDUuNDI0QzIxMC4yMzIsMS44MTIsMjA1Ljk1MSwwLDIwMC45OTksMHMtOS4yMzMsMS44MTItMTIuODUsNS40MjRMNjAuMjQyLDEzMy4zMzEKCQkJYy0zLjYxNywzLjYxNy01LjQyNCw3LjkwMS01LjQyNCwxMi44NWMwLDQuOTQ4LDEuODA3LDkuMjMxLDUuNDI0LDEyLjg0N0M2My44NjMsMTYyLjY0NSw2OC4xNDQsMTY0LjQ1Miw3My4wOTIsMTY0LjQ1MnoiLz4KCQk8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3CgkJCWMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2CgkJCWMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: center;\n}\nbutton.gridjs-sort-asc {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MXB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjE7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDE5Ny4yODdMMTU5LjAyOCw2OS4zODFjLTMuNjEzLTMuNjE3LTcuODk1LTUuNDI0LTEyLjg0Ny01LjQyNHMtOS4yMzMsMS44MDctMTIuODUsNS40MjRMNS40MjQsMTk3LjI4NwoJCUMxLjgwNywyMDAuOTA0LDAsMjA1LjE4NiwwLDIxMC4xMzRzMS44MDcsOS4yMzMsNS40MjQsMTIuODQ3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI1LDEyLjg1LDUuNDI1aDI1NS44MTMKCQljNC45NDksMCw5LjIzMy0xLjgwOCwxMi44NDgtNS40MjVjMy42MTMtMy42MTMsNS40MjctNy44OTgsNS40MjctMTIuODQ3UzI5MC41NDgsMjAwLjkwNCwyODYuOTM1LDE5Ny4yODd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: 35%;\n  background-size: 10px;\n}\nbutton.gridjs-sort-desc {\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MnB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjI7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDY5LjM3N2MtMy42MTQtMy42MTctNy44OTgtNS40MjQtMTIuODQ4LTUuNDI0SDE4LjI3NGMtNC45NTIsMC05LjIzMywxLjgwNy0xMi44NSw1LjQyNAoJCUMxLjgwNyw3Mi45OTgsMCw3Ny4yNzksMCw4Mi4yMjhjMCw0Ljk0OCwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDdsMTI3LjkwNywxMjcuOTA3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI4LDEyLjg1LDUuNDI4CgkJczkuMjMzLTEuODExLDEyLjg0Ny01LjQyOEwyODYuOTM1LDk1LjA3NGMzLjYxMy0zLjYxNyw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDdDMjkyLjM2Miw3Ny4yNzksMjkwLjU0OCw3Mi45OTgsMjg2LjkzNSw2OS4zNzd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");\n  background-position-y: 65%;\n  background-size: 10px;\n}\nbutton.gridjs-sort:focus {\n  outline: none;\n}\n\ntable.gridjs-table {\n  width: 100%;\n  max-width: 100%;\n  border-collapse: collapse;\n  text-align: left;\n  display: table;\n  margin: 0;\n  padding: 0;\n  overflow: auto;\n  table-layout: fixed;\n}\n\n.gridjs-tbody {\n  background-color: #fff;\n}\n\ntd.gridjs-td {\n  border: 1px solid #e5e7eb;\n  padding: 12px 24px;\n  background-color: #fff;\n  box-sizing: content-box;\n}\ntd.gridjs-td:first-child {\n  border-left: none;\n}\ntd.gridjs-td:last-child {\n  border-right: none;\n}\ntd.gridjs-message {\n  text-align: center;\n}\n\nth.gridjs-th {\n  position: relative;\n  color: #6b7280;\n  background-color: #f9fafb;\n  border: 1px solid #e5e7eb;\n  border-top: none;\n  padding: 14px 24px;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          user-select: none;\n  box-sizing: border-box;\n  white-space: nowrap;\n  outline: none;\n  vertical-align: middle;\n}\nth.gridjs-th .gridjs-th-content {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  width: 100%;\n  float: left;\n}\nth.gridjs-th-sort {\n  cursor: pointer;\n}\nth.gridjs-th-sort .gridjs-th-content {\n  width: calc(100% - 15px);\n}\nth.gridjs-th-sort:hover {\n  background-color: #e5e7eb;\n}\nth.gridjs-th-sort:focus {\n  background-color: #e5e7eb;\n}\nth.gridjs-th-fixed {\n  position: sticky;\n  box-shadow: 0 1px 0 0 #e5e7eb;\n}\n@supports (-moz-appearance: none) {\n  th.gridjs-th-fixed {\n    box-shadow: 0 0 0 1px #e5e7eb;\n  }\n}\nth.gridjs-th:first-child {\n  border-left: none;\n}\nth.gridjs-th:last-child {\n  border-right: none;\n}\n\n.gridjs-tr {\n  border: none;\n}\n.gridjs-tr-selected td {\n  background-color: #ebf5ff;\n}\n.gridjs-tr:last-child td {\n  border-bottom: 0;\n}\n\n.gridjs *,\n.gridjs :after,\n.gridjs :before {\n  box-sizing: border-box;\n}\n\n.gridjs-wrapper {\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);\n  border-radius: 8px 8px 0 0;\n  display: block;\n  border-top-width: 1px;\n  border-color: #e5e7eb;\n}\n.gridjs-wrapper:nth-last-of-type(2) {\n  border-radius: 8px;\n  border-bottom-width: 1px;\n}\n\n.gridjs-search {\n  float: left;\n}\n.gridjs-search-input {\n  width: 250px;\n}\n\n.gridjs-loading-bar {\n  z-index: 10;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background-color: #fff;\n  opacity: 0.5;\n}\n.gridjs-loading-bar::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(204, 204, 204, 0) 0, rgba(204, 204, 204, 0.2) 20%, rgba(204, 204, 204, 0.5) 60%, rgba(204, 204, 204, 0));\n  animation: shimmer 2s infinite;\n  content: "";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.gridjs-td .gridjs-checkbox {\n  display: block;\n  margin: auto;\n  cursor: pointer;\n}\n\n.gridjs-resizable {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  width: 5px;\n}\n.gridjs-resizable:hover {\n  cursor: ew-resize;\n  background-color: #9bc2f7;\n}\n/*# sourceMappingURL=mermaid.css?inline.map */';
@@ -2250,6 +2323,35 @@ html {
     max-width: 1536px;
   }
 }
+.alert {
+  display: grid;
+  width: 100%;
+  grid-auto-flow: row;
+  align-content: flex-start;
+  align-items: center;
+  justify-items: center;
+  gap: 1rem;
+  text-align: center;
+  border-radius: var(--rounded-box, 1rem);
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
+  padding: 1rem;
+  --tw-text-opacity: 1;
+  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
+  --alert-bg: var(--fallback-b2,oklch(var(--b2)/1));
+  --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
+  background-color: var(--alert-bg);
+}
+@media (min-width: 640px) {
+
+  .alert {
+    grid-auto-flow: column;
+    grid-template-columns: auto minmax(auto,1fr);
+    justify-items: start;
+    text-align: start;
+  }
+}
 .avatar.placeholder > div {
   display: flex;
   align-items: center;
@@ -2307,7 +2409,6 @@ html {
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   border-width: var(--border-btn, 1px);
-  animation: button-pop var(--animation-btn, 0.25s) ease-out;
   transition-property: color, background-color, border-color, opacity, box-shadow, transform;
   --tw-text-opacity: 1;
   color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
@@ -2759,28 +2860,13 @@ html {
 .select[multiple] {
   height: auto;
 }
-.stack {
+.steps {
   display: inline-grid;
-  place-items: center;
-  align-items: flex-end;
-}
-.stack > * {
-  grid-column-start: 1;
-  grid-row-start: 1;
-  transform: translateY(10%) scale(0.9);
-  z-index: 1;
-  width: 100%;
-  opacity: 0.6;
-}
-.stack > *:nth-child(2) {
-  transform: translateY(5%) scale(0.95);
-  z-index: 2;
-  opacity: 0.8;
-}
-.stack > *:nth-child(1) {
-  transform: translateY(0) scale(1);
-  z-index: 3;
-  opacity: 1;
+  grid-auto-flow: column;
+  overflow: hidden;
+  overflow-x: auto;
+  counter-reset: step;
+  grid-auto-columns: 1fr;
 }
 .steps .step {
   display: grid;
@@ -2796,8 +2882,7 @@ html {
   display: grid;
   align-items: flex-end;
 }
-.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(.tab-active),
-  .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(.tab-active) {
+.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
   border-bottom-color: transparent;
 }
 .tab {
@@ -2842,7 +2927,7 @@ html {
   grid-column-start: span 9999;
 }
 input.tab:checked + .tab-content,
-.tab-active + .tab-content {
+:is(.tab-active, [aria-selected="true"]) + .tab-content {
   display: block;
 }
 .table {
@@ -2874,6 +2959,13 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.alert-error {
+  border-color: var(--fallback-er,oklch(var(--er)/0.2));
+  --tw-text-opacity: 1;
+  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
+  --alert-bg: var(--fallback-er,oklch(var(--er)/1));
+  --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
+}
 .btm-nav > *.disabled,
     .btm-nav > *[disabled] {
   pointer-events: none;
@@ -2887,6 +2979,12 @@ input.tab:checked + .tab-content,
   font-size: 1rem;
   line-height: 1.5rem;
 }
+@media (prefers-reduced-motion: no-preference) {
+
+  .btn {
+    animation: button-pop var(--animation-btn, 0.25s) ease-out;
+  }
+}
 .btn:active:hover,
   .btn:active:focus {
   animation: button-pop 0s ease-out;
@@ -3416,6 +3514,30 @@ input.tab:checked + .tab-content,
   background-position: calc(0% + 12px) calc(1px + 50%),
     calc(0% + 16px) calc(1px + 50%);
 }
+.skeleton {
+  border-radius: var(--rounded-box, 1rem);
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
+  will-change: background-position;
+  animation: skeleton 1.8s ease-in-out infinite;
+  background-image: linear-gradient(
+    105deg,
+    transparent 0%,
+    transparent 40%,
+    var(--fallback-b1,oklch(var(--b1)/1)) 50%,
+    transparent 60%,
+    transparent 100%
+  );
+  background-size: 200% auto;
+  background-repeat: no-repeat;
+  background-position-x: -50%;
+}
+@media (prefers-reduced-motion) {
+
+  .skeleton {
+    animation-duration: 15s;
+  }
+}
 @keyframes skeleton {
 
   from {
@@ -3464,12 +3586,79 @@ input.tab:checked + .tab-content,
 .steps .step[data-content]:after {
   content: attr(data-content);
 }
+.steps .step-neutral + .step-neutral:before,
+  .steps .step-neutral:after {
+  --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)));
+}
+.steps .step-primary + .step-primary:before,
+  .steps .step-primary:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
+}
+.steps .step-secondary + .step-secondary:before,
+  .steps .step-secondary:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));
+}
+.steps .step-accent + .step-accent:before,
+  .steps .step-accent:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-a,oklch(var(--a)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));
+}
+.steps .step-info + .step-info:before {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity)));
+}
+.steps .step-info:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-in,oklch(var(--in)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));
+}
+.steps .step-success + .step-success:before {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
+}
+.steps .step-success:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-su,oklch(var(--su)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));
+}
+.steps .step-warning + .step-warning:before {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
+}
+.steps .step-warning:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-wa,oklch(var(--wa)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));
+}
+.steps .step-error + .step-error:before {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
+}
+.steps .step-error:after {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-er,oklch(var(--er)/var(--tw-bg-opacity)));
+  --tw-text-opacity: 1;
+  color: var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));
+}
 .tabs-lifted > .tab:focus-visible {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
 }
-.tab.tab-active:not(.tab-disabled):not([disabled]),
-  .tab:is(input:checked) {
+.tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tab:is(input:checked) {
   border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
   --tw-border-opacity: 1;
   --tw-text-opacity: 1;
@@ -3504,8 +3693,7 @@ input.tab:checked + .tab-content,
   padding-inline-end: var(--tab-padding, 1rem);
   padding-top: var(--tab-border, 1px);
 }
-.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]),
-  .tabs-lifted > .tab:is(input:checked) {
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]), .tabs-lifted > .tab:is(input:checked) {
   background-color: var(--tab-bg);
   border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
   border-inline-start-color: var(--tab-border-color);
@@ -3516,7 +3704,7 @@ input.tab:checked + .tab-content,
   padding-bottom: var(--tab-border, 1px);
   padding-top: 0;
 }
-.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked):before {
   z-index: 1;
   content: "";
   display: block;
@@ -3545,26 +3733,26 @@ input.tab:checked + .tab-content,
       );
   background-image: var(--radius-start), var(--radius-end);
 }
-.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, .tabs-lifted > .tab:is(input:checked):first-child:before {
   background-image: var(--radius-end);
   background-position: top right;
 }
-[dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
+[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):first-child:before {
   background-image: var(--radius-start);
   background-position: top left;
 }
-.tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
+.tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, .tabs-lifted > .tab:is(input:checked):last-child:before {
   background-image: var(--radius-start);
   background-position: top left;
 }
-[dir="rtl"] .tabs-lifted > .tab.tab-active:not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
+[dir="rtl"] .tabs-lifted > .tab:is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tabs-lifted > .tab:is(input:checked):last-child:before {
   background-image: var(--radius-end);
   background-position: top right;
 }
 .tabs-lifted
-  > .tab-active:not(.tab-disabled):not([disabled])
+  > :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled])
   + .tabs-lifted
-  .tab-active:not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
+  :is(.tab-active, [aria-selected="true"]):not(.tab-disabled):not([disabled]):before, .tabs-lifted > .tab:is(input:checked) + .tabs-lifted .tab:is(input:checked):before {
   background-image: var(--radius-end);
   background-position: top right;
 }
@@ -3885,9 +4073,21 @@ input.tab:checked + .tab-content,
 .static {
   position: static;
 }
+.absolute {
+  position: absolute;
+}
 .relative {
   position: relative;
 }
+.right-6 {
+  right: 1.5rem;
+}
+.top-8 {
+  top: 2rem;
+}
+.z-50 {
+  z-index: 50;
+}
 .z-\\[1\\] {
   z-index: 1;
 }
@@ -3924,6 +4124,9 @@ input.tab:checked + .tab-content,
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-4 {
+  margin-top: 1rem;
+}
 .inline {
   display: inline;
 }
@@ -3960,6 +4163,10 @@ input.tab:checked + .tab-content,
 .min-w-0 {
   min-width: 0px;
 }
+.min-w-max {
+  min-width: -moz-max-content;
+  min-width: max-content;
+}
 .max-w-screen-lg {
   max-width: 1024px;
 }
@@ -3984,6 +4191,9 @@ input.tab:checked + .tab-content,
 .items-center {
   align-items: center;
 }
+.justify-end {
+  justify-content: flex-end;
+}
 .justify-center {
   justify-content: center;
 }
@@ -3999,6 +4209,9 @@ input.tab:checked + .tab-content,
 .overflow-auto {
   overflow: auto;
 }
+.overflow-scroll {
+  overflow: scroll;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -4017,6 +4230,9 @@ input.tab:checked + .tab-content,
 .rounded-lg {
   border-radius: 0.5rem;
 }
+.rounded-md {
+  border-radius: 0.375rem;
+}
 .rounded-none {
   border-radius: 0px;
 }
@@ -4039,6 +4255,10 @@ input.tab:checked + .tab-content,
 .border-b-2 {
   border-bottom-width: 2px;
 }
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
 .border-error {
   --tw-border-opacity: 1;
   border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
@@ -4098,6 +4318,13 @@ input.tab:checked + .tab-content,
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.text-justify {
+  text-align: justify;
+}
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -4123,15 +4350,35 @@ input.tab:checked + .tab-content,
 .leading-5 {
   line-height: 1.25rem;
 }
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity));
+}
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
+.underline {
+  text-decoration-line: underline;
+}
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -4147,6 +4394,10 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
+.hover\\:text-blue-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
 .hover\\:text-gray-700:hover {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
@@ -4210,6 +4461,7 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
     this.sequenceType = "nucleotide";
     this.views = ["table"];
     this.size = void 0;
+    this.headline = "Mutation comparison";
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -4218,7 +4470,8 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
         variants: this.variants,
         sequenceType: this.sequenceType,
         views: this.views,
-        size: this.size
+        size: this.size,
+        headline: this.headline
       }
     );
   }
@@ -4235,8 +4488,11 @@ __decorateClass$8([
 __decorateClass$8([
   n2({ type: Object })
 ], MutationComparisonComponent.prototype, "size", 2);
+__decorateClass$8([
+  n2({ type: String })
+], MutationComparisonComponent.prototype, "headline", 2);
 MutationComparisonComponent = __decorateClass$8([
-  t$2("gs-mutation-comparison-component")
+  t$2("gs-mutation-comparison")
 ], MutationComparisonComponent);
 function getInsertionsTableData(data) {
   return data.map((mutationEntry) => {
@@ -4260,16 +4516,16 @@ function getMutationsTableData(data, proportionInterval) {
   });
 }
 const pattern = /(?:([A-Za-z0-9]+):)?(\d+)$/;
-const sortMutationPositions = (a2, b2) => {
+const sortMutationPositions = (a2, b3) => {
   const aMatch = a2.match(pattern);
-  const bMatch = b2.match(pattern);
+  const bMatch = b3.match(pattern);
   if (aMatch && bMatch) {
     if (aMatch[1] !== bMatch[1]) {
       return aMatch[1].localeCompare(bMatch[1]);
     }
     return parseInt(aMatch[2], 10) - parseInt(bMatch[2], 10);
   }
-  throw new Error(`Invalid mutation position: ${a2} or ${b2}`);
+  throw new Error(`Invalid mutation position: ${a2} or ${b3}`);
 };
 const getMutationsGridData = (data, sequenceType, proportionInterval) => {
   return accumulateByPosition(data, sequenceType).filter((row) => byProportion(row, proportionInterval));
@@ -4301,8 +4557,8 @@ const accumulateByPosition = (data, sequenceType) => {
     };
     subtractSubstitutionValue();
   }
-  const orderedPositionsToProportionAtBase = [...positionsToProportionAtBase.entries()].map(([position, proportionsAtBase]) => ({ position, proportions: proportionsAtBase })).sort((a2, b2) => {
-    return sortMutationPositions(a2.position, b2.position);
+  const orderedPositionsToProportionAtBase = [...positionsToProportionAtBase.entries()].map(([position, proportionsAtBase]) => ({ position, proportions: proportionsAtBase })).sort((a2, b3) => {
+    return sortMutationPositions(a2.position, b3.position);
   });
   return orderedPositionsToProportionAtBase.map((proportionsForBaseAtPosition) => {
     const proportions = bases[sequenceType].map((base) => {
@@ -4333,8 +4589,8 @@ const MutationsGrid = ({ data, sequenceType, proportionInterval }) => {
       {
         name: "Position",
         sort: {
-          compare: (a2, b2) => {
-            return sortMutationPositions(a2, b2);
+          compare: (a2, b3) => {
+            return sortMutationPositions(a2, b3);
           }
         }
       },
@@ -4346,9 +4602,9 @@ const MutationsGrid = ({ data, sequenceType, proportionInterval }) => {
       return {
         name: base,
         sort: {
-          compare: (a2, b2) => {
+          compare: (a2, b3) => {
             const aProportion = a2.proportion;
-            const bProportion = b2.proportion;
+            const bProportion = b3.proportion;
             if (aProportion < bProportion) {
               return -1;
             }
@@ -4382,14 +4638,14 @@ const MutationsGrid = ({ data, sequenceType, proportionInterval }) => {
   const tableData = getMutationsGridData(data, sequenceType, proportionInterval).map((row) => Object.values(row));
   return /* @__PURE__ */ u$1(Table, { data: tableData, columns: getHeaders(), pagination: true });
 };
-const sortInsertions = (a2, b2) => {
-  if (a2.segment !== b2.segment) {
-    return compareSegments(a2.segment, b2.segment);
+const sortInsertions = (a2, b3) => {
+  if (a2.segment !== b3.segment) {
+    return compareSegments(a2.segment, b3.segment);
   }
-  if (a2.position !== b2.position) {
-    return comparePositions(a2.position, b2.position);
+  if (a2.position !== b3.position) {
+    return comparePositions(a2.position, b3.position);
   }
-  return a2.insertedSymbols.localeCompare(b2.insertedSymbols);
+  return a2.insertedSymbols.localeCompare(b3.insertedSymbols);
 };
 const InsertionsTable = ({ data }) => {
   const getHeaders = () => {
@@ -4397,8 +4653,8 @@ const InsertionsTable = ({ data }) => {
       {
         name: "Insertion",
         sort: {
-          compare: (a2, b2) => {
-            return sortInsertions(a2, b2);
+          compare: (a2, b3) => {
+            return sortInsertions(a2, b3);
           }
         },
         formatter: (cell) => cell.toString()
@@ -4418,8 +4674,8 @@ const MutationsTable = ({ data, proportionInterval }) => {
       {
         name: "Mutation",
         sort: {
-          compare: (a2, b2) => {
-            return sortSubstitutionsAndDeletions(a2, b2);
+          compare: (a2, b3) => {
+            return sortSubstitutionsAndDeletions(a2, b3);
           }
         },
         formatter: (cell) => cell.toString()
@@ -4459,11 +4715,11 @@ class FetchInsertionsOperator {
 }
 function queryInsertions(variant, sequenceType, lapis, signal) {
   const fetchData = new FetchInsertionsOperator(variant, sequenceType);
-  const sortData = new SortOperator(fetchData, (a2, b2) => {
-    if (a2.mutation.segment !== b2.mutation.segment) {
-      return (a2.mutation.segment ?? "").localeCompare(b2.mutation.segment ?? "");
+  const sortData = new SortOperator(fetchData, (a2, b3) => {
+    if (a2.mutation.segment !== b3.mutation.segment) {
+      return (a2.mutation.segment ?? "").localeCompare(b3.mutation.segment ?? "");
     }
-    return a2.mutation.position - b2.mutation.position;
+    return a2.mutation.position - b3.mutation.position;
   });
   return sortData.evaluate(lapis, signal);
 }
@@ -4496,22 +4752,31 @@ function filterMutationsData(data, displayedSegments, displayedMutationTypes) {
     gridData: filteredSubstitutionsOrDeletions
   };
 }
-const Mutations = ({ variant, sequenceType, views, size }) => {
+const Mutations = ({
+  variant,
+  sequenceType,
+  views,
+  size,
+  headline = "Mutations"
+}) => {
+  const defaultSize = { height: "600px", width: "100%" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, defaultSize, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationsInner, { variant, sequenceType, views }) }) }) });
+};
+const MutationsInner = ({ variant, sequenceType, views }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationsData(variant, sequenceType, lapis);
   }, [variant, sequenceType, lapis]);
-  const headline = "Mutations";
   if (isLoading) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
   if (error !== null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error }) });
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
   }
   if (data === null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize: { height: "700px", width: "100%" }, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationsTabs, { mutationsData: data, sequenceType, views }) }) });
+  return /* @__PURE__ */ u$1(MutationsTabs, { mutationsData: data, sequenceType, views });
 };
 const MutationsTabs = ({ mutationsData, sequenceType, views }) => {
   const [proportionInterval, setProportionInterval] = p({ min: 0.05, max: 1 });
@@ -4614,7 +4879,7 @@ const Toolbar$2 = ({
         filename: "insertions.csv"
       }
     ),
-    /* @__PURE__ */ u$1(Info, { className: "mx-1", content: "Info for mutations" })
+    /* @__PURE__ */ u$1(Info, { children: "Info for mutations" })
   ] });
 };
 var __defProp$7 = Object.defineProperty;
@@ -4631,13 +4896,23 @@ var __decorateClass$7 = (decorators, target, key, kind) => {
 let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
   constructor() {
     super(...arguments);
-    this.variant = { displayName: "" };
+    this.variant = {};
     this.sequenceType = "nucleotide";
     this.views = ["table", "grid"];
     this.size = void 0;
+    this.headline = "Mutations";
   }
   render() {
-    return /* @__PURE__ */ u$1(Mutations, { variant: this.variant, sequenceType: this.sequenceType, views: this.views, size: this.size });
+    return /* @__PURE__ */ u$1(
+      Mutations,
+      {
+        variant: this.variant,
+        sequenceType: this.sequenceType,
+        views: this.views,
+        size: this.size,
+        headline: this.headline
+      }
+    );
   }
 };
 __decorateClass$7([
@@ -4652,8 +4927,11 @@ __decorateClass$7([
 __decorateClass$7([
   n2({ type: Object })
 ], MutationsComponent.prototype, "size", 2);
+__decorateClass$7([
+  n2({ type: String })
+], MutationsComponent.prototype, "headline", 2);
 MutationsComponent = __decorateClass$7([
-  t$2("gs-mutations-component")
+  t$2("gs-mutations")
 ], MutationsComponent);
 function getPrevalenceOverTimeTableData(data, granularity) {
   return data[0].content.map((row, rowNumber) => {
@@ -4870,14 +5148,14 @@ var padZoneStr = function padZoneStr2(instance) {
   var minuteOffset = minutes % 60;
   return (negMinutes <= 0 ? "+" : "-") + padStart(hourOffset, 2, "0") + ":" + padStart(minuteOffset, 2, "0");
 };
-var monthDiff = function monthDiff2(a2, b2) {
-  if (a2.date() < b2.date())
-    return -monthDiff2(b2, a2);
-  var wholeMonthDiff = (b2.year() - a2.year()) * 12 + (b2.month() - a2.month());
+var monthDiff = function monthDiff2(a2, b3) {
+  if (a2.date() < b3.date())
+    return -monthDiff2(b3, a2);
+  var wholeMonthDiff = (b3.year() - a2.year()) * 12 + (b3.month() - a2.month());
   var anchor = a2.clone().add(wholeMonthDiff, M);
-  var c2 = b2 - anchor < 0;
+  var c2 = b3 - anchor < 0;
   var anchor2 = a2.clone().add(wholeMonthDiff + (c2 ? -1 : 1), M);
-  return +(-(wholeMonthDiff + (b2 - anchor) / (c2 ? anchor - anchor2 : anchor2 - anchor)) || 0);
+  return +(-(wholeMonthDiff + (b3 - anchor) / (c2 ? anchor - anchor2 : anchor2 - anchor)) || 0);
 };
 var absFloor = function absFloor2(n3) {
   return n3 < 0 ? Math.ceil(n3) || 0 : Math.floor(n3);
@@ -5611,29 +5889,29 @@ function generateAllInRange(start, end) {
   }
   throw new Error(`Invalid arguments: start and end must be of the same type: ${start}, ${end}`);
 }
-function minusTemporal(a2, b2) {
-  if (a2 instanceof YearMonthDay && b2 instanceof YearMonthDay) {
-    return a2.minus(b2);
+function minusTemporal(a2, b3) {
+  if (a2 instanceof YearMonthDay && b3 instanceof YearMonthDay) {
+    return a2.minus(b3);
   }
-  if (a2 instanceof YearWeek && b2 instanceof YearWeek) {
-    return a2.minus(b2);
+  if (a2 instanceof YearWeek && b3 instanceof YearWeek) {
+    return a2.minus(b3);
   }
-  if (a2 instanceof YearMonth && b2 instanceof YearMonth) {
-    return a2.minus(b2);
+  if (a2 instanceof YearMonth && b3 instanceof YearMonth) {
+    return a2.minus(b3);
   }
-  if (a2 instanceof Year && b2 instanceof Year) {
-    return a2.minus(b2);
+  if (a2 instanceof Year && b3 instanceof Year) {
+    return a2.minus(b3);
   }
-  throw new Error(`Cannot compare ${a2} and ${b2}`);
+  throw new Error(`Cannot compare ${a2} and ${b3}`);
 }
-function compareTemporal(a2, b2) {
+function compareTemporal(a2, b3) {
   if (a2 === null) {
     return 1;
   }
-  if (b2 === null) {
+  if (b3 === null) {
     return -1;
   }
-  const diff = minusTemporal(a2, b2);
+  const diff = minusTemporal(a2, b3);
   if (diff < 0) {
     return -1;
   }
@@ -6112,14 +6390,14 @@ function mapDateToGranularityRange(d2, granularity) {
     count: d2.count
   };
 }
-function dateRangeCompare(a2, b2) {
+function dateRangeCompare(a2, b3) {
   if (a2.dateRange === null) {
     return 1;
   }
-  if (b2.dateRange === null) {
+  if (b3.dateRange === null) {
     return -1;
   }
-  return compareTemporal(a2.dateRange, b2.dateRange);
+  return compareTemporal(a2.dateRange, b3.dateRange);
 }
 function averageSmoothing(slidingWindow) {
   const average = slidingWindow.reduce((acc, curr) => acc + curr.count, 0) / slidingWindow.length;
@@ -6194,24 +6472,45 @@ const PrevalenceOverTime = ({
   smoothingWindow,
   views,
   confidenceIntervalMethods,
-  size
+  size,
+  headline = "Prevalence over time"
+}) => {
+  const defaultSize = { height: "600px", width: "100%" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, defaultSize, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+    PrevalenceOverTimeInner,
+    {
+      numerator,
+      denominator,
+      granularity,
+      smoothingWindow,
+      views,
+      confidenceIntervalMethods
+    }
+  ) }) }) });
+};
+const PrevalenceOverTimeInner = ({
+  numerator,
+  denominator,
+  granularity,
+  smoothingWindow,
+  views,
+  confidenceIntervalMethods
 }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(
     () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis),
     [lapis, numerator, denominator, granularity, smoothingWindow]
   );
-  const headline = "Prevalence over time";
   if (isLoading) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
   if (error !== null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error }) });
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
   }
   if (data === null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize: { height: "600px", width: "100%" }, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+  return /* @__PURE__ */ u$1(
     PrevalenceOverTimeTabs,
     {
       views,
@@ -6219,7 +6518,7 @@ const PrevalenceOverTime = ({
       granularity,
       confidenceIntervalMethods
     }
-  ) }) });
+  );
 };
 const PrevalenceOverTimeTabs = ({
   views,
@@ -6313,7 +6612,13 @@ const Toolbar$1 = ({
         filename: "prevalence-over-time.csv"
       }
     ),
-    /* @__PURE__ */ u$1(Info, { className: "ml-1", content: "Info for prevalence over time" })
+    /* @__PURE__ */ u$1(PrevalenceOverTimeInfo, {})
+  ] });
+};
+const PrevalenceOverTimeInfo = () => {
+  return /* @__PURE__ */ u$1(Info, { size: { width: "600px", height: "30vh" }, children: [
+    /* @__PURE__ */ u$1(InfoHeadline1, { children: "Prevalence over time" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: "Prevalence over time info." })
   ] });
 };
 var __defProp$6 = Object.defineProperty;
@@ -6336,6 +6641,7 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     this.smoothingWindow = 0;
     this.views = ["bar", "line", "bubble", "table"];
     this.confidenceIntervalMethods = ["wilson"];
+    this.headline = "Prevalence over time";
     this.size = void 0;
   }
   render() {
@@ -6348,7 +6654,8 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         smoothingWindow: this.smoothingWindow,
         views: this.views,
         confidenceIntervalMethods: this.confidenceIntervalMethods,
-        size: this.size
+        size: this.size,
+        headline: this.headline
       }
     );
   }
@@ -6371,6 +6678,9 @@ __decorateClass$6([
 __decorateClass$6([
   n2({ type: Array })
 ], PrevalenceOverTimeComponent.prototype, "confidenceIntervalMethods", 2);
+__decorateClass$6([
+  n2({ type: String })
+], PrevalenceOverTimeComponent.prototype, "headline", 2);
 __decorateClass$6([
   n2({ type: Object })
 ], PrevalenceOverTimeComponent.prototype, "size", 2);
@@ -6563,11 +6873,29 @@ function toYearMonthDay(d2) {
   };
 }
 const RelativeGrowthAdvantage = ({
+  views,
+  size,
   numerator,
   denominator,
   generationTime,
-  views,
-  size
+  headline = "Relative growth advantage"
+}) => {
+  const defaultSize = { height: "600px", width: "100%" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, defaultSize, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+    RelativeGrowthAdvantageInner,
+    {
+      views,
+      numerator,
+      denominator,
+      generationTime
+    }
+  ) }) }) });
+};
+const RelativeGrowthAdvantageInner = ({
+  numerator,
+  denominator,
+  generationTime,
+  views
 }) => {
   const lapis = P(LapisUrlContext);
   const [yAxisScaleType, setYAxisScaleType] = p("linear");
@@ -6575,31 +6903,32 @@ const RelativeGrowthAdvantage = ({
     () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis),
     [lapis, numerator, denominator, generationTime, views]
   );
-  const headline = "Relative growth advantage";
   if (isLoading) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
   if (error !== null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error }) });
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
   }
   if (data === null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize: { height: "700px", width: "100%" }, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+  return /* @__PURE__ */ u$1(
     RelativeGrowthAdvantageTabs,
     {
       data,
       yAxisScaleType,
       setYAxisScaleType,
-      views
+      views,
+      generationTime
     }
-  ) }) });
+  );
 };
 const RelativeGrowthAdvantageTabs = ({
   data,
   yAxisScaleType,
   setYAxisScaleType,
-  views
+  views,
+  generationTime
 }) => {
   const getTab = (view) => {
     switch (view) {
@@ -6621,16 +6950,45 @@ const RelativeGrowthAdvantageTabs = ({
     }
   };
   const tabs = views.map((view) => getTab(view));
-  const toolbar = () => /* @__PURE__ */ u$1(RelativeGrowthAdvantageToolbar, { yAxisScaleType, setYAxisScaleType });
+  const toolbar = () => /* @__PURE__ */ u$1(
+    RelativeGrowthAdvantageToolbar,
+    {
+      generationTime,
+      yAxisScaleType,
+      setYAxisScaleType
+    }
+  );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
 };
 const RelativeGrowthAdvantageToolbar = ({
   yAxisScaleType,
-  setYAxisScaleType
+  setYAxisScaleType,
+  generationTime
 }) => {
   return /* @__PURE__ */ u$1("div", { class: "flex", children: [
     /* @__PURE__ */ u$1(ScalingSelector, { yAxisScaleType, setYAxisScaleType }),
-    /* @__PURE__ */ u$1(Info, { className: "ml-1", content: "Line chart" })
+    /* @__PURE__ */ u$1(RelativeGrowthAdvantageInfo, { generationTime })
+  ] });
+};
+const RelativeGrowthAdvantageInfo = ({ generationTime }) => {
+  return /* @__PURE__ */ u$1(Info, { size: { width: "600px", height: "30vh" }, children: [
+    /* @__PURE__ */ u$1(InfoHeadline1, { children: "Relative growth advantage" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "If variants spread pre-dominantly by local transmission across demographic groups, this estimate reflects the relative viral intrinsic growth advantage of the focal variant in the selected country and time frame. We report the relative growth advantage per ",
+      generationTime,
+      " days (in percentage; 0% means equal growth). Importantly, the relative growth advantage estimate reflects the advantage compared to the co-circulating variants. Thus, as new variants spread, the advantage of the focal variant may decrease. Different mechanisms can alter the intrinsic growth rate, including an intrinsic transmission advantage, immune evasion, and a prolonged infectious period. When absolute numbers of a variant are low, the growth advantage may merely reflect the current importance of introductions from abroad or the variant spreading in a particular demographic group. In this case, the estimate does not provide information on any intrinsic fitness advantages."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "Example: Assume that 10 infections from the focal variant and 100 infections from the co-circulating variants occur today and that the focal variant has a relative growth advantage of 50%. Then, if the number of new infections from the co-circulating variants remains at 100 in ",
+      generationTime,
+      " days from today, we expect the number of new infections from the focal variant to be 15."
+    ] }),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Reference" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      'Chen, Chaoran, et al. "Quantification of the spread of SARS-CoV-2 variant B.1.1.7 in Switzerland." Epidemics (2021); doi:',
+      " ",
+      /* @__PURE__ */ u$1(InfoLink, { href: "https://www.sciencedirect.com/science/article/pii/S1755436521000335?via=ihub", children: "10.1016/j.epidem.2021.100480" })
+    ] })
   ] });
 };
 var __defProp$5 = Object.defineProperty;
@@ -6651,6 +7009,7 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
     this.denominator = {};
     this.generationTime = 7;
     this.views = ["line"];
+    this.headline = "Relative growth advantage";
     this.size = void 0;
   }
   render() {
@@ -6661,7 +7020,8 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
         denominator: this.denominator,
         generationTime: this.generationTime,
         views: this.views,
-        size: this.size
+        size: this.size,
+        headline: this.headline
       }
     );
   }
@@ -6678,6 +7038,9 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: Array })
 ], RelativeGrowthAdvantageComponent.prototype, "views", 2);
+__decorateClass$5([
+  n2({ type: String })
+], RelativeGrowthAdvantageComponent.prototype, "headline", 2);
 __decorateClass$5([
   n2({ type: Object })
 ], RelativeGrowthAdvantageComponent.prototype, "size", 2);
@@ -6715,22 +7078,31 @@ async function queryAggregateData(variant, fields, lapis, signal) {
     })
   );
 }
-const Aggregate = ({ fields, views, filter, size }) => {
+const Aggregate = ({
+  views,
+  size,
+  headline = "Mutations",
+  filter,
+  fields
+}) => {
+  const defaultSize = { height: "600px", width: "100%" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, defaultSize, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(AggregateInner, { fields, filter, views }) }) }) });
+};
+const AggregateInner = ({ fields, views, filter }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryAggregateData(filter, fields, lapis);
   }, [filter, fields, lapis]);
-  const headline = "Aggregate";
   if (isLoading) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(LoadingDisplay, {}) });
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
   if (error !== null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error }) });
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
   }
   if (data === null) {
-    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
-  return /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize: { height: "700px", width: "100%" }, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(AggregatedDataTabs, { data, views, fields }) }) });
+  return /* @__PURE__ */ u$1(AggregatedDataTabs, { data, views, fields });
 };
 const AggregatedDataTabs = ({ data, views, fields }) => {
   const getTab = (view) => {
@@ -6748,7 +7120,7 @@ const AggregatedDataTabs = ({ data, views, fields }) => {
 const Toolbar = ({ data }) => {
   return /* @__PURE__ */ u$1("div", { class: "flex flex-row", children: [
     /* @__PURE__ */ u$1(CsvDownloadButton, { className: "mx-1 btn btn-xs", getData: () => data, filename: "aggregate.csv" }),
-    /* @__PURE__ */ u$1(Info, { className: "mx-1", content: "Info for aggregate" })
+    /* @__PURE__ */ u$1(Info, { children: "Info for aggregate" })
   ] });
 };
 var __defProp$4 = Object.defineProperty;
@@ -6769,9 +7141,19 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.views = ["table"];
     this.filter = {};
     this.size = void 0;
+    this.headline = "Aggregate";
   }
   render() {
-    return /* @__PURE__ */ u$1(Aggregate, { fields: this.fields, views: this.views, filter: this.filter, size: this.size });
+    return /* @__PURE__ */ u$1(
+      Aggregate,
+      {
+        fields: this.fields,
+        views: this.views,
+        filter: this.filter,
+        size: this.size,
+        headline: this.headline
+      }
+    );
   }
 };
 __decorateClass$4([
@@ -6786,8 +7168,11 @@ __decorateClass$4([
 __decorateClass$4([
   n2({ type: Object })
 ], AggregateComponent.prototype, "size", 2);
+__decorateClass$4([
+  n2({ type: String })
+], AggregateComponent.prototype, "headline", 2);
 AggregateComponent = __decorateClass$4([
-  t$2("gs-aggregate-component")
+  t$2("gs-aggregate")
 ], AggregateComponent);
 const toYYYYMMDD = (date) => {
   if (!date) {
@@ -6813,12 +7198,29 @@ const presets = {
   [PRESET_VALUE_LAST_6_MONTHS]: { label: "Last 6 months" }
 };
 const DateRangeSelector = ({
+  customSelectOptions,
+  earliestDate = "1900-01-01",
+  initialValue,
+  width
+}) => {
+  const defaultSize = { width: "100%", height: "3rem" };
+  const size = width === void 0 ? void 0 : { width, height: defaultSize.height };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { defaultSize, size, children: /* @__PURE__ */ u$1(ResizeContainer, { defaultSize, size, children: /* @__PURE__ */ u$1(
+    DateRangeSelectorInner,
+    {
+      customSelectOptions,
+      earliestDate,
+      initialValue
+    }
+  ) }) });
+};
+const DateRangeSelectorInner = ({
   customSelectOptions,
   earliestDate = "1900-01-01",
   initialValue
 }) => {
-  const datePickerRef = F(null);
-  const endDatePickerRef = F(null);
+  const fromDatePickerRef = F(null);
+  const toDatePickerRef = F(null);
   const divRef = F(null);
   const [dateFromPicker, setDateFromPicker] = p(null);
   const [dateToPicker, setDateToPicker] = p(null);
@@ -6835,17 +7237,17 @@ const DateRangeSelector = ({
       allowInput: true,
       dateFormat: "Y-m-d"
     };
-    if (datePickerRef.current) {
+    if (fromDatePickerRef.current) {
       setDateFromPicker(
-        flatpickr(datePickerRef.current, {
+        flatpickr(fromDatePickerRef.current, {
           ...commonConfig,
           defaultDate: selectedDates.dateFrom
         })
       );
     }
-    if (endDatePickerRef.current) {
+    if (toDatePickerRef.current) {
       setDateToPicker(
-        flatpickr(endDatePickerRef.current, {
+        flatpickr(toDatePickerRef.current, {
           ...commonConfig,
           defaultDate: selectedDates.dateTo
         })
@@ -6855,7 +7257,7 @@ const DateRangeSelector = ({
       dateFromPicker == null ? void 0 : dateFromPicker.destroy();
       dateToPicker == null ? void 0 : dateToPicker.destroy();
     };
-  }, [datePickerRef, endDatePickerRef]);
+  }, [fromDatePickerRef, toDatePickerRef]);
   const onSelectChange = (value) => {
     setSelectedDateRange(value);
     const dateRange = getDatesForSelectorValue(value, customSelectOptions, earliestDate);
@@ -6903,13 +7305,13 @@ const DateRangeSelector = ({
       })
     );
   };
-  return /* @__PURE__ */ u$1("div", { class: "join", ref: divRef, children: [
+  return /* @__PURE__ */ u$1("div", { class: "join w-full", ref: divRef, children: [
     /* @__PURE__ */ u$1(
       Select,
       {
         items: selectableOptions,
         selected: selectedDateRange,
-        selectStyle: "select-bordered rounded-none join-item",
+        selectStyle: "select-bordered rounded-none join-item grow",
         onChange: (event) => {
           event.preventDefault();
           const select = event.target;
@@ -6921,10 +7323,10 @@ const DateRangeSelector = ({
     /* @__PURE__ */ u$1(
       "input",
       {
-        class: "input input-bordered rounded-none join-item",
+        class: "input input-bordered rounded-none join-item grow",
         type: "text",
         placeholder: "Date from",
-        ref: datePickerRef,
+        ref: fromDatePickerRef,
         onChange: onChangeDateFrom,
         onBlur: onChangeDateFrom
       }
@@ -6932,12 +7334,12 @@ const DateRangeSelector = ({
     /* @__PURE__ */ u$1(
       "input",
       {
-        class: "input input-bordered rounded-none join-item",
+        class: "input input-bordered rounded-none join-item grow",
         type: "text",
         placeholder: "Date to",
-        ref: endDatePickerRef,
+        ref: toDatePickerRef,
         onChange: onChangeDateTo,
-        onBlur: onChangeDateFrom
+        onBlur: onChangeDateTo
       }
     )
   ] });
@@ -7006,7 +7408,8 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
     super(...arguments);
     this.customSelectOptions = [];
     this.earliestDate = "1900-01-01";
-    this.initialValue = "";
+    this.initialValue = "last6Months";
+    this.width = void 0;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -7014,7 +7417,8 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
       {
         customSelectOptions: this.customSelectOptions,
         earliestDate: this.earliestDate,
-        initialValue: this.initialValue
+        initialValue: this.initialValue,
+        width: this.width
       }
     );
   }
@@ -7028,6 +7432,9 @@ __decorateClass$3([
 __decorateClass$3([
   n2()
 ], DateRangeSelectorComponent.prototype, "initialValue", 2);
+__decorateClass$3([
+  n2({ type: Object })
+], DateRangeSelectorComponent.prototype, "width", 2);
 DateRangeSelectorComponent = __decorateClass$3([
   t$2("gs-date-range-selector")
 ], DateRangeSelectorComponent);
@@ -7045,10 +7452,10 @@ async function fetchAutocompletionList(fields, lapis, signal) {
   return [...locationValues].map((json) => JSON.parse(json)).sort(compareLocationEntries(fields));
 }
 function compareLocationEntries(fields) {
-  return (a2, b2) => {
+  return (a2, b3) => {
     for (const field of fields) {
       const valueA = a2[field];
-      const valueB = b2[field];
+      const valueB = b3[field];
       if (valueA === valueB) {
         continue;
       }
@@ -7063,26 +7470,22 @@ function compareLocationEntries(fields) {
     return 0;
   };
 }
-const LocationFilter = ({ initialValue, fields }) => {
+const LocationFilter = ({ width, initialValue, fields }) => {
+  const defaultSize = { width: "100%", height: "3rem" };
+  const size = width === void 0 ? void 0 : { width, height: defaultSize.height };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { defaultSize, size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(LocationFilterInner, { initialValue, fields }) }) });
+};
+const LocationFilterInner = ({ initialValue, fields }) => {
   const lapis = P(LapisUrlContext);
   const [value, setValue] = p(initialValue ?? "");
   const [unknownLocation, setUnknownLocation] = p(false);
   const formRef = F(null);
   const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
-  if (isLoading)
-    return /* @__PURE__ */ u$1("form", { class: "flex", children: [
-      /* @__PURE__ */ u$1("input", { type: "text", class: "input input-bordered grow", value, disabled: true }),
-      /* @__PURE__ */ u$1("button", { class: "btn ml-1", disabled: true, type: "submit", children: "Loading..." })
-    ] });
+  if (isLoading) {
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
+  }
   if (error) {
-    return /* @__PURE__ */ u$1("p", { children: [
-      "Error: ",
-      error.name,
-      " ",
-      error.message,
-      " ",
-      error.stack
-    ] });
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
   }
   const onInput = (event) => {
     if (event.target instanceof HTMLInputElement) {
@@ -7113,7 +7516,7 @@ const LocationFilter = ({ initialValue, fields }) => {
       setUnknownLocation(true);
     }
   };
-  return /* @__PURE__ */ u$1("form", { class: "flex", onSubmit: submit, ref: formRef, children: [
+  return /* @__PURE__ */ u$1("form", { class: "flex w-full", onSubmit: submit, ref: formRef, children: [
     /* @__PURE__ */ u$1(
       "input",
       {
@@ -7158,9 +7561,10 @@ let LocationFilterComponent = class extends PreactLitAdapter {
     super(...arguments);
     this.initialValue = "";
     this.fields = [];
+    this.width = void 0;
   }
   render() {
-    return /* @__PURE__ */ u$1(LocationFilter, { initialValue: this.initialValue, fields: this.fields });
+    return /* @__PURE__ */ u$1(LocationFilter, { initialValue: this.initialValue, fields: this.fields, width: this.width });
   }
 };
 __decorateClass$2([
@@ -7169,6 +7573,9 @@ __decorateClass$2([
 __decorateClass$2([
   n2({ type: Array })
 ], LocationFilterComponent.prototype, "fields", 2);
+__decorateClass$2([
+  n2({ type: Object })
+], LocationFilterComponent.prototype, "width", 2);
 LocationFilterComponent = __decorateClass$2([
   t$2("gs-location-filter")
 ], LocationFilterComponent);
@@ -7177,7 +7584,16 @@ async function fetchAutocompleteList(lapis, field, signal) {
   const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
   return data.map((item) => item[field]);
 }
-const TextInput = ({ lapisField, placeholderText, initialValue }) => {
+const TextInput = ({ width, lapisField, placeholderText, initialValue }) => {
+  const defaultSize = { width: "100%", height: "3rem" };
+  const size = width === void 0 ? void 0 : { width, height: defaultSize.height };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { defaultSize, size, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(TextInputInner, { lapisField, placeholderText, initialValue }) }) });
+};
+const TextInputInner = ({
+  lapisField,
+  placeholderText,
+  initialValue
+}) => {
   const lapis = P(LapisUrlContext);
   const inputRef = F(null);
   const { data, error, isLoading } = useQuery(() => fetchAutocompleteList(lapis, lapisField), [lapisField, lapis]);
@@ -7214,7 +7630,7 @@ const TextInput = ({ lapisField, placeholderText, initialValue }) => {
       "input",
       {
         type: "text",
-        class: "input input-bordered",
+        class: "input input-bordered w-full",
         placeholder: placeholderText !== void 0 ? placeholderText : lapisField,
         onInput,
         ref: inputRef,
@@ -7242,6 +7658,7 @@ let TextInputComponent = class extends PreactLitAdapter {
     this.initialValue = "";
     this.lapisField = "";
     this.placeholderText = "";
+    this.width = void 0;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -7249,7 +7666,8 @@ let TextInputComponent = class extends PreactLitAdapter {
       {
         lapisField: this.lapisField,
         placeholderText: this.placeholderText,
-        initialValue: this.initialValue
+        initialValue: this.initialValue,
+        width: this.width
       }
     );
   }
@@ -7263,6 +7681,9 @@ __decorateClass$1([
 __decorateClass$1([
   n2()
 ], TextInputComponent.prototype, "placeholderText", 2);
+__decorateClass$1([
+  n2({ type: Object })
+], TextInputComponent.prototype, "width", 2);
 TextInputComponent = __decorateClass$1([
   t$2("gs-text-input")
 ], TextInputComponent);
@@ -7342,7 +7763,11 @@ const DeleteIcon = () => {
     }
   );
 };
-const MutationFilter = ({ initialValue }) => {
+const MutationFilter = ({ initialValue, size }) => {
+  const defaultSize = { width: "100%", height: "6.5rem" };
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size, defaultSize, children: /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize, children: /* @__PURE__ */ u$1(MutationFilterInner, { initialValue }) }) });
+};
+const MutationFilterInner = ({ initialValue }) => {
   const referenceGenome = P(ReferenceGenomeContext);
   const [selectedFilters, setSelectedFilters] = p(
     getInitialState(initialValue, referenceGenome)
@@ -7391,7 +7816,7 @@ const MutationFilter = ({ initialValue }) => {
     setInputValue(event.target.value);
     setIsError(false);
   };
-  return /* @__PURE__ */ u$1("div", { class: `rounded-lg border border-gray-300 bg-white p-2`, children: [
+  return /* @__PURE__ */ u$1("div", { class: `h-full w-full rounded-lg border border-gray-300 bg-white p-2 overflow-scroll`, children: [
     /* @__PURE__ */ u$1("div", { class: "flex justify-between", children: [
       /* @__PURE__ */ u$1(
         SelectedMutationDisplay,
@@ -7401,7 +7826,7 @@ const MutationFilter = ({ initialValue }) => {
           fireChangeEvent
         }
       ),
-      /* @__PURE__ */ u$1(Info, { className: "mx-1", content: "Info for mutation filter" })
+      /* @__PURE__ */ u$1(Info, { children: "Info for mutation filter" })
     ] }),
     /* @__PURE__ */ u$1("form", { className: "mt-2 w-full", onSubmit: handleSubmit, ref: formRef, children: /* @__PURE__ */ u$1("label", { className: `input flex items-center gap-2 ${isError ? "input-error" : "input-bordered"}`, children: [
       /* @__PURE__ */ u$1(
@@ -7554,11 +7979,11 @@ const SelectedFilter = ({
   return /* @__PURE__ */ u$1(
     "div",
     {
-      class: "flex items-center flex-nowrap gap-1 rounded me-1 px-2.5 py-0.5 font-medium text-xs mb-1",
+      class: "flex items-center flex-nowrap gap-1 rounded me-1 px-2.5 py-0.5 font-medium text-xs mb-1 min-w-max",
       style: { backgroundColor, color: textColor },
       children: [
-        /* @__PURE__ */ u$1("div", { children: mutation.toString() }),
-        /* @__PURE__ */ u$1("button", { onClick: () => onDelete(mutation), children: /* @__PURE__ */ u$1(DeleteIcon, {}) })
+        /* @__PURE__ */ u$1("div", { className: "whitespace-nowrap min-w-max", children: mutation.toString() }),
+        /* @__PURE__ */ u$1("button", { type: "button", onClick: () => onDelete(mutation), children: /* @__PURE__ */ u$1(DeleteIcon, {}) })
       ]
     }
   );
@@ -7586,14 +8011,18 @@ let MutationFilterComponent = class extends PreactLitAdapter {
   constructor() {
     super(...arguments);
     this.initialValue = void 0;
+    this.size = void 0;
   }
   render() {
-    return /* @__PURE__ */ u$1(ReferenceGenomesAwaiter, { children: /* @__PURE__ */ u$1(MutationFilter, { initialValue: this.initialValue }) });
+    return /* @__PURE__ */ u$1(ReferenceGenomesAwaiter, { children: /* @__PURE__ */ u$1(MutationFilter, { initialValue: this.initialValue, size: this.size }) });
   }
 };
 __decorateClass([
   n2()
 ], MutationFilterComponent.prototype, "initialValue", 2);
+__decorateClass([
+  n2({ type: Object })
+], MutationFilterComponent.prototype, "size", 2);
 MutationFilterComponent = __decorateClass([
   t$2("gs-mutation-filter")
 ], MutationFilterComponent);