@genspectrum/dashboard-components 0.1.3 → 0.1.5

package/dist/dashboard-components.js

@@ -2,10 +2,11 @@ import { createContext, provide, consume } from "@lit/context";
 import { Task } from "@lit/task";
 import { LitElement, html, unsafeCSS } from "lit";
 import z$1 from "zod";
-import { options, Fragment, createContext as createContext$1, render } from "preact";
+import { options, createContext as createContext$1, Fragment, render } from "preact";
 import { Grid } from "gridjs";
 import { Chart, registerables, Scale } from "chart.js";
 import { VennDiagramController, ArcSlice, extractSets } from "chartjs-chart-venn";
+import { ReactiveElement } from "@lit/reactive-element";
 import { BarWithErrorBarsController, BarWithErrorBar } from "chartjs-chart-error-bars";
 import flatpickr from "flatpickr";
 /**
@@ -490,14 +491,10 @@ let App = class extends LitElement {
   }
   render() {
     return this.updateReferenceGenome.render({
-      complete: () => {
-        return html` <slot></slot>`;
-      },
+      complete: () => html` <slot></slot>`,
       error: () => html`<p>Error</p>`,
       // TODO(#143): Add more advanced error handling
-      pending: () => {
-        return html`<p>Loading...</p>`;
-      }
+      pending: () => html` <p>Loading reference genomes...</p> `
     });
   }
   createRenderRoot() {
@@ -516,9 +513,11 @@ App = __decorateClass$a([
 ], App);
 var f$1 = 0;
 function u$1(e2, t2, n3, o2, i2, u2) {
-  var a2, c2, p2 = {};
-  for (c2 in t2)
-    "ref" == c2 ? a2 = t2[c2] : p2[c2] = t2[c2];
+  t2 || (t2 = {});
+  var a2, c2, p2 = t2;
+  if ("ref" in p2)
+    for (c2 in p2 = {}, t2)
+      "ref" == c2 ? a2 = t2[c2] : p2[c2] = t2[c2];
   var l2 = { type: e2, props: p2, key: n3, ref: a2, __k: null, __: null, __b: 0, __e: null, __d: void 0, __c: null, constructor: void 0, __v: --f$1, __i: -1, __u: 0, __source: i2, __self: u2 };
   if ("function" == typeof e2 && (a2 = e2.defaultProps))
     for (c2 in a2)
@@ -662,18 +661,29 @@ function getMutationComparisonTableData(data, proportionInterval) {
   const mutationsToProportions = /* @__PURE__ */ new Map();
   for (const mutationData of data.content) {
     for (const mutationEntry of mutationData.data) {
-      const mutation = mutationEntry.mutation.toString();
-      const proportions = mutationsToProportions.get(mutation) || {};
-      proportions[mutationData.displayName] = mutationEntry.proportion;
-      mutationsToProportions.set(mutation, proportions);
+      const mutationKey = mutationEntry.mutation.toString();
+      const existingRow = mutationsToProportions.get(mutationKey);
+      if (!existingRow) {
+        mutationsToProportions.set(
+          mutationKey,
+          initializeMutationRow(mutationEntry.mutation, mutationData.displayName, mutationEntry.proportion)
+        );
+      } else {
+        existingRow.proportions = updateProportions(
+          existingRow.proportions,
+          mutationData.displayName,
+          mutationEntry.proportion
+        );
+        mutationsToProportions.set(mutationKey, existingRow);
+      }
     }
   }
-  return [...mutationsToProportions.entries()].map(([mutation, proportions]) => {
+  return [...mutationsToProportions.values()].map((row) => {
     return {
-      mutation,
+      mutation: row.mutation,
       ...data.content.map((mutationData) => {
         return {
-          [`${mutationData.displayName} prevalence`]: proportions[mutationData.displayName] || 0
+          [`${mutationData.displayName} prevalence`]: row.proportions[mutationData.displayName] || 0
         };
       }).reduce((acc, val) => ({ ...acc, ...val }), {})
     };
@@ -683,6 +693,17 @@ function getMutationComparisonTableData(data, proportionInterval) {
     )
   );
 }
+function initializeMutationRow(mutation, displayName, proportion) {
+  return {
+    mutation,
+    proportions: {
+      [displayName]: proportion
+    }
+  };
+}
+function updateProportions(proportions, displayName, proportion) {
+  return { ...proportions, [displayName]: proportion };
+}
 const tableStyle = {
   table: {
     fontSize: "12px"
@@ -717,49 +738,183 @@ const Table = ({ data, columns, pagination }) => {
   });
   return /* @__PURE__ */ u$1("div", { ref: wrapper3 });
 };
-const substitutionAndDeletionRegex = /(?:([A-Za-z0-9]+):)?([A-Za-z])(\d+)([A-Za-z]|-|\*)/;
-const sortSubstitutionsAndDeletions = (a2, b2) => {
-  const aMatch = a2.match(substitutionAndDeletionRegex);
-  const bMatch = b2.match(substitutionAndDeletionRegex);
-  if (aMatch && bMatch) {
-    if (aMatch[1] !== bMatch[1]) {
-      return aMatch[1].localeCompare(bMatch[1]);
+const substitutionRegex = /^((?<segment>[A-Za-z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Za-z])?(?<position>\d+)(?<substitutionValue>[A-Za-z.])?$/;
+class Substitution {
+  constructor(segment, valueAtReference, substitutionValue, position) {
+    this.segment = segment;
+    this.valueAtReference = valueAtReference;
+    this.substitutionValue = substitutionValue;
+    this.position = position;
+    const segmentString = this.segment ? `${this.segment}:` : "";
+    const valueAtReferenceString = this.valueAtReference ? `${this.valueAtReference}` : "";
+    const substitutionValueString = this.substitutionValue ? `${this.substitutionValue}` : "";
+    this.code = `${segmentString}${valueAtReferenceString}${this.position}${substitutionValueString}`;
+  }
+  equals(other) {
+    if (!(other instanceof Substitution)) {
+      return false;
+    }
+    return this.segment === other.segment && this.valueAtReference === other.valueAtReference && this.substitutionValue === other.substitutionValue && this.position === other.position;
+  }
+  toString() {
+    return this.code;
+  }
+  static parse(mutationStr) {
+    const match = mutationStr.match(substitutionRegex);
+    if (match === null || match.groups === void 0) {
+      return null;
+    }
+    return new Substitution(
+      match.groups.segment,
+      match.groups.valueAtReference,
+      match.groups.substitutionValue,
+      parseInt(match.groups.position, 10)
+    );
+  }
+}
+const deletionRegex = /^((?<segment>[A-Za-z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Za-z])?(?<position>\d+)(-)$/;
+class Deletion {
+  constructor(segment, valueAtReference, position) {
+    this.segment = segment;
+    this.valueAtReference = valueAtReference;
+    this.position = position;
+    const segmentString = this.segment ? `${this.segment}:` : "";
+    const valueAtReferenceString = this.valueAtReference ? `${this.valueAtReference}` : "";
+    this.code = `${segmentString}${valueAtReferenceString}${this.position}-`;
+  }
+  equals(other) {
+    if (!(other instanceof Deletion)) {
+      return false;
     }
-    if (aMatch[3] !== bMatch[3]) {
-      return parseInt(aMatch[3], 10) - parseInt(bMatch[3], 10);
+    return this.segment === other.segment && this.valueAtReference === other.valueAtReference && this.position === other.position;
+  }
+  toString() {
+    return this.code;
+  }
+  static parse(mutationStr) {
+    const match = mutationStr.match(deletionRegex);
+    if (match === null || match.groups === void 0) {
+      return null;
+    }
+    return new Deletion(match.groups.segment, match.groups.valueAtReference, parseInt(match.groups.position, 10));
+  }
+}
+const insertionRegexp = /^ins_((?<segment>[A-Za-z0-9_-]+)(?=:):)?(?<position>\d+):(?<insertedSymbols>(([A-Za-z?]|(\.\*))+))$/i;
+class Insertion {
+  constructor(segment, position, insertedSymbols) {
+    this.segment = segment;
+    this.position = position;
+    this.insertedSymbols = insertedSymbols;
+    this.code = `ins_${this.segment ? `${this.segment}:` : ""}${this.position}:${this.insertedSymbols}`;
+  }
+  equals(other) {
+    if (!(other instanceof Insertion)) {
+      return false;
+    }
+    return this.segment === other.segment && this.insertedSymbols === other.insertedSymbols && this.position === other.position;
+  }
+  toString() {
+    return this.code;
+  }
+  static parse(mutationStr) {
+    const match = mutationStr.match(insertionRegexp);
+    if (match === null || match.groups === void 0) {
+      return null;
+    }
+    return new Insertion(match.groups.segment, parseInt(match.groups.position, 10), match.groups.insertedSymbols);
+  }
+}
+const bases = {
+  nucleotide: ["A", "C", "G", "T", "-"],
+  "amino acid": [
+    "I",
+    "L",
+    "V",
+    "F",
+    "M",
+    "C",
+    "A",
+    "G",
+    "P",
+    "T",
+    "S",
+    "Y",
+    "W",
+    "Q",
+    "N",
+    "H",
+    "E",
+    "D",
+    "K",
+    "R",
+    "-"
+  ]
+};
+const sortSubstitutionsAndDeletions = (a2, b2) => {
+  if (a2.segment !== b2.segment) {
+    compareSegments(a2.segment, b2.segment);
+  }
+  if (a2.position !== b2.position) {
+    return comparePositions(a2.position, b2.position);
+  }
+  const aIsDeletion = a2 instanceof Deletion;
+  const bIsDeletion = b2 instanceof Deletion;
+  if (aIsDeletion !== bIsDeletion) {
+    return aIsDeletion ? 1 : -1;
+  }
+  if (!aIsDeletion && !bIsDeletion) {
+    if (a2.substitutionValue !== b2.substitutionValue) {
+      return compareSubstitutionValues(a2.substitutionValue, b2.substitutionValue);
     }
-    return aMatch[4].localeCompare(bMatch[4]);
   }
-  throw new Error(`Invalid substitution or deletion: ${a2} or ${b2}`);
+  return 0;
+};
+const compareSegments = (a2, b2) => {
+  if (a2 === void 0) {
+    return -1;
+  }
+  if (b2 === void 0) {
+    return 1;
+  }
+  return a2.localeCompare(b2);
+};
+const comparePositions = (a2, b2) => {
+  return a2 - b2;
+};
+const compareSubstitutionValues = (a2, b2) => {
+  if (a2 === void 0) {
+    return -1;
+  }
+  if (b2 === void 0) {
+    return 1;
+  }
+  return a2.localeCompare(b2);
 };
 const formatProportion = (proportion) => {
   return `${(proportion * 100).toFixed(2)}%`;
 };
 const MutationComparisonTable = ({ data, proportionInterval }) => {
-  const getHeaders = () => {
-    return [
-      {
-        name: "Mutation",
-        sort: {
-          compare: (a2, b2) => {
-            return sortSubstitutionsAndDeletions(a2, b2);
-          }
-        }
+  const headers = [
+    {
+      name: "Mutation",
+      sort: {
+        compare: sortSubstitutionsAndDeletions
       },
-      {
-        name: "Prevalence",
-        columns: data.content.map((mutationData) => {
-          return {
-            name: mutationData.displayName,
-            sort: true,
-            formatter: (cell) => formatProportion(cell)
-          };
-        })
-      }
-    ];
-  };
+      formatter: (cell) => cell.toString()
+    },
+    {
+      name: "Prevalence",
+      columns: data.content.map((mutationData) => {
+        return {
+          name: mutationData.displayName,
+          sort: true,
+          formatter: (cell) => formatProportion(cell)
+        };
+      })
+    }
+  ];
   const tableData = getMutationComparisonTableData(data, proportionInterval).map((row) => Object.values(row));
-  return /* @__PURE__ */ u$1(Table, { data: tableData, columns: getHeaders(), pagination: true });
+  return /* @__PURE__ */ u$1(Table, { data: tableData, columns: headers, pagination: true });
 };
 const GsChart = ({ configuration }) => {
   const canvasRef = F(null);
@@ -821,6 +976,7 @@ const MutationComparisonVenn = ({
       type: "venn",
       data: sets,
       options: {
+        maintainAspectRatio: false,
         scales: {
           x: {
             ticks: {
@@ -868,123 +1024,11 @@ const MutationComparisonVenn = ({
   if (data.content.length > 5) {
     return /* @__PURE__ */ u$1("div", { children: "Too many variants to display. Maximum are five. " });
   }
-  return /* @__PURE__ */ u$1(Fragment, { children: [
-    /* @__PURE__ */ u$1(GsChart, { configuration: config }),
+  return /* @__PURE__ */ u$1("div", { className: "h-full flex flex-col", children: [
+    /* @__PURE__ */ u$1("div", { className: "flex-1", children: /* @__PURE__ */ u$1(GsChart, { configuration: config }) }),
     /* @__PURE__ */ u$1("div", { class: "flex flex-wrap break-words m-2", ref: divRef })
   ] });
 };
-const substitutionRegex = /^((?<segment>[A-Za-z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Za-z])?(?<position>\d+)(?<substitutionValue>[A-Za-z.])?$/;
-class Substitution {
-  constructor(segment, valueAtReference, substitutionValue, position) {
-    this.segment = segment;
-    this.valueAtReference = valueAtReference;
-    this.substitutionValue = substitutionValue;
-    this.position = position;
-    const segmentString = this.segment ? `${this.segment}:` : "";
-    const valueAtReferenceString = this.valueAtReference ? `${this.valueAtReference}` : "";
-    const substitutionValueString = this.substitutionValue ? `${this.substitutionValue}` : "";
-    this.code = `${segmentString}${valueAtReferenceString}${this.position}${substitutionValueString}`;
-  }
-  equals(other) {
-    if (!(other instanceof Substitution)) {
-      return false;
-    }
-    return this.segment === other.segment && this.valueAtReference === other.valueAtReference && this.substitutionValue === other.substitutionValue && this.position === other.position;
-  }
-  toString() {
-    return this.code;
-  }
-  static parse(mutationStr) {
-    const match = mutationStr.match(substitutionRegex);
-    if (match === null || match.groups === void 0) {
-      return null;
-    }
-    return new Substitution(
-      match.groups.segment,
-      match.groups.valueAtReference,
-      match.groups.substitutionValue,
-      parseInt(match.groups.position, 10)
-    );
-  }
-}
-const deletionRegex = /^((?<segment>[A-Za-z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Za-z])?(?<position>\d+)(-)$/;
-class Deletion {
-  constructor(segment, valueAtReference, position) {
-    this.segment = segment;
-    this.valueAtReference = valueAtReference;
-    this.position = position;
-    const segmentString = this.segment ? `${this.segment}:` : "";
-    const valueAtReferenceString = this.valueAtReference ? `${this.valueAtReference}` : "";
-    this.code = `${segmentString}${valueAtReferenceString}${this.position}-`;
-  }
-  equals(other) {
-    if (!(other instanceof Deletion)) {
-      return false;
-    }
-    return this.segment === other.segment && this.valueAtReference === other.valueAtReference && this.position === other.position;
-  }
-  toString() {
-    return this.code;
-  }
-  static parse(mutationStr) {
-    const match = mutationStr.match(deletionRegex);
-    if (match === null || match.groups === void 0) {
-      return null;
-    }
-    return new Deletion(match.groups.segment, match.groups.valueAtReference, parseInt(match.groups.position, 10));
-  }
-}
-const insertionRegexp = /^ins_((?<segment>[A-Za-z0-9_-]+)(?=:):)?(?<position>\d+):(?<insertedSymbols>(([A-Za-z?]|(\.\*))+))$/i;
-class Insertion {
-  constructor(segment, position, insertedSymbols) {
-    this.segment = segment;
-    this.position = position;
-    this.insertedSymbols = insertedSymbols;
-    this.code = `ins_${this.segment ? `${this.segment}:` : ""}${this.position}:${this.insertedSymbols}`;
-  }
-  equals(other) {
-    if (!(other instanceof Insertion)) {
-      return false;
-    }
-    return this.segment === other.segment && this.insertedSymbols === other.insertedSymbols && this.position === other.position;
-  }
-  toString() {
-    return this.code;
-  }
-  static parse(mutationStr) {
-    const match = mutationStr.match(insertionRegexp);
-    if (match === null || match.groups === void 0) {
-      return null;
-    }
-    return new Insertion(match.groups.segment, parseInt(match.groups.position, 10), match.groups.insertedSymbols);
-  }
-}
-const bases = {
-  nucleotide: ["A", "C", "G", "T", "-"],
-  "amino acid": [
-    "I",
-    "L",
-    "V",
-    "F",
-    "M",
-    "C",
-    "A",
-    "G",
-    "P",
-    "T",
-    "S",
-    "Y",
-    "W",
-    "Q",
-    "N",
-    "H",
-    "E",
-    "D",
-    "K",
-    "R",
-    "-"
-  ]
-};
 class FetchSubstitutionsOrDeletionsOperator {
   constructor(filter, sequenceType, minProportion) {
     this.filter = filter;
@@ -1181,13 +1225,56 @@ const ErrorDisplay = ({ error }) => {
   ] });
 };
 const Headline = ({ heading, children }) => {
-  return /* @__PURE__ */ u$1(Fragment, { children: [
-    /* @__PURE__ */ u$1("h1", { children: 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");
+  _(() => {
+    if (ref.current) {
+      const h1Height2 = ref.current.getBoundingClientRect().height;
+      setH1Height(`${h1Height2}px`);
+    }
+  }, []);
+  return /* @__PURE__ */ u$1("div", { className: "h-full w-full", children: [
+    /* @__PURE__ */ u$1("h1", { ref, children: heading }),
+    /* @__PURE__ */ u$1("div", { style: { height: `calc(100% - ${h1Height})` }, 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 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 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..." });
@@ -1379,30 +1466,51 @@ 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 tabNames = tabs.map((tab) => tab.title).join(", ");
-  const tabElements = tabs.map((tab) => {
-    return /* @__PURE__ */ u$1(Fragment, { children: [
-      /* @__PURE__ */ u$1(
-        "input",
-        {
-          type: "radio",
-          name: tabNames,
-          role: "tab",
-          className: "tab",
-          "aria-label": tab.title,
-          checked: activeTab === tab.title,
-          onChange: () => setActiveTab(tab.title)
-        }
-      ),
-      /* @__PURE__ */ u$1("div", { role: "tabpanel", className: "tab-content bg-base-100 border-base-300 rounded-box p-1", children: tab.content })
-    ] }, tab.title);
-  });
+  const [heightOfTabs, setHeightOfTabs] = p("3rem");
+  const tabRef = F(null);
+  _(() => {
+    if (tabRef.current) {
+      const heightOfTabs2 = tabRef.current.getBoundingClientRect().height;
+      setHeightOfTabs(`${heightOfTabs2}px`);
+    }
+  }, []);
+  const tabElements = /* @__PURE__ */ u$1("div", { className: "flex flex-row", children: tabs.map((tab) => {
+    return /* @__PURE__ */ u$1(Fragment, { children: /* @__PURE__ */ u$1(
+      "button",
+      {
+        className: `px-4 py-2 text-sm font-medium leading-5 transition-colors duration-150 ${activeTab === tab.title ? "border-b-2 border-gray-400" : "text-gray-600 hover:bg-gray-100 hover:text-gray-700"}`,
+        onClick: () => {
+          setActiveTab(tab.title);
+        },
+        children: tab.title
+      }
+    ) }, tab.title);
+  }) });
   const toolbarElement = typeof toolbar === "function" ? toolbar(activeTab) : toolbar;
-  return /* @__PURE__ */ u$1("div", { role: "tablist", className: "tabs tabs-lifted", children: [
-    tabElements,
-    toolbar && /* @__PURE__ */ u$1("div", { className: "m-1 col-[9999]", children: toolbarElement })
+  return /* @__PURE__ */ u$1("div", { className: "h-full w-full", children: [
+    /* @__PURE__ */ u$1("div", { ref: tabRef, className: "flex flex-row justify-between", children: [
+      tabElements,
+      toolbar && /* @__PURE__ */ u$1("div", { className: "py-2", children: toolbarElement })
+    ] }),
+    /* @__PURE__ */ u$1(
+      "div",
+      {
+        className: `p-2 border-2 border-gray-100 rounded-b-md rounded-tr-md ${activeTab === tabs[0].title ? "" : "rounded-tl-md"}`,
+        style: { height: `calc(100% - ${heightOfTabs})` },
+        children: tabs.map((tab) => /* @__PURE__ */ u$1("div", { className: "h-full overflow-auto", hidden: activeTab !== tab.title, children: tab.content }, tab.title))
+      }
+    )
   ] });
 };
 function useQuery(fetchDataCallback, dependencies = []) {
@@ -1426,12 +1534,17 @@ function useQuery(fetchDataCallback, dependencies = []) {
   }, [JSON.stringify(dependencies)]);
   return { data, error, isLoading };
 }
-const MutationComparison = ({ variants, sequenceType, views }) => {
+const MutationComparison = ({
+  variants,
+  sequenceType,
+  views,
+  size,
+  headline = "Mutation comparison"
+}) => {
   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, {}) });
   }
@@ -1441,7 +1554,7 @@ const MutationComparison = ({ variants, sequenceType, views }) => {
   if (data === null) {
     return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
   }
-  return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationComparisonTabs, { data: data.mutationData, sequenceType, views }) });
+  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 }) }) });
 };
 const MutationComparisonTabs = ({ data, views, sequenceType }) => {
   const [proportionInterval, setProportionInterval] = p({ min: 0.5, max: 1 });
@@ -1534,7 +1647,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 */';
@@ -2032,108 +2145,6 @@ html {
   --bc: 27.8078% 0.029596 256.847952;
 }
 
-@media (prefers-color-scheme: dark) {
-
-  :root {
-    color-scheme: dark;
-    --in: 72.06% 0.191 231.6;
-    --su: 64.8% 0.150 160;
-    --wa: 84.71% 0.199 83.87;
-    --er: 71.76% 0.221 22.18;
-    --pc: 13.138% 0.0392 275.75;
-    --sc: 14.96% 0.052 342.55;
-    --ac: 14.902% 0.0334 183.61;
-    --inc: 0% 0 0;
-    --suc: 0% 0 0;
-    --wac: 0% 0 0;
-    --erc: 0% 0 0;
-    --rounded-box: 1rem;
-    --rounded-btn: 0.5rem;
-    --rounded-badge: 1.9rem;
-    --animation-btn: 0.25s;
-    --animation-input: .2s;
-    --btn-focus-scale: 0.95;
-    --border-btn: 1px;
-    --tab-border: 1px;
-    --tab-radius: 0.5rem;
-    --p: 65.69% 0.196 275.75;
-    --s: 74.8% 0.26 342.55;
-    --a: 74.51% 0.167 183.61;
-    --n: 31.3815% 0.021108 254.139175;
-    --nc: 74.6477% 0.0216 264.435964;
-    --b1: 25.3267% 0.015896 252.417568;
-    --b2: 23.2607% 0.013807 253.100675;
-    --b3: 21.1484% 0.01165 254.087939;
-    --bc: 74.6477% 0.0216 264.435964;
-  }
-}
-
-[data-theme=light] {
-  color-scheme: light;
-  --in: 72.06% 0.191 231.6;
-  --su: 64.8% 0.150 160;
-  --wa: 84.71% 0.199 83.87;
-  --er: 71.76% 0.221 22.18;
-  --pc: 89.824% 0.06192 275.75;
-  --ac: 15.352% 0.0368 183.61;
-  --inc: 0% 0 0;
-  --suc: 0% 0 0;
-  --wac: 0% 0 0;
-  --erc: 0% 0 0;
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-focus-scale: 0.95;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-  --p: 49.12% 0.3096 275.75;
-  --s: 69.71% 0.329 342.55;
-  --sc: 98.71% 0.0106 342.55;
-  --a: 76.76% 0.184 183.61;
-  --n: 32.1785% 0.02476 255.701624;
-  --nc: 89.4994% 0.011585 252.096176;
-  --b1: 100% 0 0;
-  --b2: 96.1151% 0 0;
-  --b3: 92.4169% 0.00108 197.137559;
-  --bc: 27.8078% 0.029596 256.847952;
-}
-
-[data-theme=dark] {
-  color-scheme: dark;
-  --in: 72.06% 0.191 231.6;
-  --su: 64.8% 0.150 160;
-  --wa: 84.71% 0.199 83.87;
-  --er: 71.76% 0.221 22.18;
-  --pc: 13.138% 0.0392 275.75;
-  --sc: 14.96% 0.052 342.55;
-  --ac: 14.902% 0.0334 183.61;
-  --inc: 0% 0 0;
-  --suc: 0% 0 0;
-  --wac: 0% 0 0;
-  --erc: 0% 0 0;
-  --rounded-box: 1rem;
-  --rounded-btn: 0.5rem;
-  --rounded-badge: 1.9rem;
-  --animation-btn: 0.25s;
-  --animation-input: .2s;
-  --btn-focus-scale: 0.95;
-  --border-btn: 1px;
-  --tab-border: 1px;
-  --tab-radius: 0.5rem;
-  --p: 65.69% 0.196 275.75;
-  --s: 74.8% 0.26 342.55;
-  --a: 74.51% 0.167 183.61;
-  --n: 31.3815% 0.021108 254.139175;
-  --nc: 74.6477% 0.0216 264.435964;
-  --b1: 25.3267% 0.015896 252.417568;
-  --b2: 23.2607% 0.013807 253.100675;
-  --b3: 21.1484% 0.01165 254.087939;
-  --bc: 74.6477% 0.0216 264.435964;
-}
-
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -2241,6 +2252,39 @@ html {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+
+  .container {
+    max-width: 1536px;
+  }
+}
 .avatar.placeholder > div {
   display: flex;
   align-items: center;
@@ -2298,7 +2342,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)));
@@ -2773,6 +2816,14 @@ html {
   z-index: 3;
   opacity: 1;
 }
+.steps {
+  display: inline-grid;
+  grid-auto-flow: column;
+  overflow: hidden;
+  overflow-x: auto;
+  counter-reset: step;
+  grid-auto-columns: 1fr;
+}
 .steps .step {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -2787,8 +2838,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 {
@@ -2832,21 +2882,8 @@ html {
   cursor: default;
   grid-column-start: span 9999;
 }
-.tab-content {
-  grid-column-start: 1;
-  grid-column-end: span 9999;
-  grid-row-start: 2;
-  margin-top: calc(var(--tab-border) * -1);
-  display: none;
-  border-color: transparent;
-  border-width: var(--tab-border, 0);
-}
-:checked + .tab-content:nth-child(2),
-  .tab-active + .tab-content:nth-child(2) {
-  border-start-start-radius: 0px;
-}
 input.tab:checked + .tab-content,
-.tab-active + .tab-content {
+:is(.tab-active, [aria-selected="true"]) + .tab-content {
   display: block;
 }
 .table {
@@ -2891,6 +2928,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;
@@ -2992,6 +3035,14 @@ input.tab:checked + .tab-content,
   outline-offset: 2px;
   outline-color: var(--fallback-bc,oklch(var(--bc)/1));
 }
+.checkbox:disabled {
+  border-width: 0px;
+  cursor: not-allowed;
+  border-color: transparent;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
+  opacity: 0.2;
+}
 .checkbox:checked,
   .checkbox[aria-checked="true"] {
   background-repeat: no-repeat;
@@ -3018,13 +3069,6 @@ input.tab:checked + .tab-content,
       linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%),
       linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%);
 }
-.checkbox:disabled {
-  cursor: not-allowed;
-  border-color: transparent;
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
-  opacity: 0.2;
-}
 @keyframes checkmark {
 
   0% {
@@ -3080,7 +3124,8 @@ input.tab:checked + .tab-content,
   border-color: var(--fallback-er,oklch(var(--er)/var(--tw-border-opacity)));
   outline-color: var(--fallback-er,oklch(var(--er)/1));
 }
-.input-disabled,
+.input:has(> input[disabled]),
+  .input-disabled,
   .input:disabled,
   .input[disabled] {
   cursor: not-allowed;
@@ -3090,16 +3135,20 @@ input.tab:checked + .tab-content,
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
   color: var(--fallback-bc,oklch(var(--bc)/0.4));
 }
-.input-disabled::-moz-placeholder, .input:disabled::-moz-placeholder, .input[disabled]::-moz-placeholder {
+.input:has(> input[disabled])::-moz-placeholder, .input-disabled::-moz-placeholder, .input:disabled::-moz-placeholder, .input[disabled]::-moz-placeholder {
   color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
   --tw-placeholder-opacity: 0.2;
 }
-.input-disabled::placeholder,
+.input:has(> input[disabled])::placeholder,
+  .input-disabled::placeholder,
   .input:disabled::placeholder,
   .input[disabled]::placeholder {
   color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
   --tw-placeholder-opacity: 0.2;
 }
+.input:has(> input[disabled]) > input[disabled] {
+  cursor: not-allowed;
+}
 .input::-webkit-date-and-time-value {
   text-align: inherit;
 }
@@ -3126,6 +3175,13 @@ input.tab:checked + .tab-content,
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
           mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 }
+.loading-spinner {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+.loading-md {
+  width: 1.5rem;
+}
 :where(.menu li:empty) {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
@@ -3455,12 +3511,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;
@@ -3495,8 +3618,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);
@@ -3507,7 +3629,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;
@@ -3536,26 +3658,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;
 }
@@ -3876,17 +3998,23 @@ input.tab:checked + .tab-content,
 .static {
   position: static;
 }
+.absolute {
+  position: absolute;
+}
 .relative {
   position: relative;
 }
-.z-\\[1\\] {
-  z-index: 1;
+.right-6 {
+  right: 1.5rem;
+}
+.top-8 {
+  top: 2rem;
 }
-.col-\\[9999\\] {
-  grid-column: 9999;
+.z-50 {
+  z-index: 50;
 }
-.m-1 {
-  margin: 0.25rem;
+.z-\\[1\\] {
+  z-index: 1;
 }
 .m-2 {
   margin: 0.5rem;
@@ -3921,6 +4049,9 @@ input.tab:checked + .tab-content,
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-4 {
+  margin-top: 1rem;
+}
 .inline {
   display: inline;
 }
@@ -3933,8 +4064,11 @@ input.tab:checked + .tab-content,
 .grid {
   display: grid;
 }
-.w-11\\/12 {
-  width: 91.666667%;
+.hidden {
+  display: none;
+}
+.h-full {
+  height: 100%;
 }
 .w-16 {
   width: 4rem;
@@ -3957,6 +4091,9 @@ input.tab:checked + .tab-content,
 .max-w-screen-lg {
   max-width: 1024px;
 }
+.flex-1 {
+  flex: 1 1 0%;
+}
 .grow {
   flex-grow: 1;
 }
@@ -3975,15 +4112,24 @@ input.tab:checked + .tab-content,
 .items-center {
   align-items: center;
 }
+.justify-end {
+  justify-content: flex-end;
+}
 .justify-center {
   justify-content: center;
 }
+.justify-between {
+  justify-content: space-between;
+}
 .gap-1 {
   gap: 0.25rem;
 }
 .gap-2 {
   gap: 0.5rem;
 }
+.overflow-auto {
+  overflow: auto;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -4005,24 +4151,45 @@ input.tab:checked + .tab-content,
 .rounded-none {
   border-radius: 0px;
 }
+.rounded-b-md {
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+.rounded-tl-md {
+  border-top-left-radius: 0.375rem;
+}
+.rounded-tr-md {
+  border-top-right-radius: 0.375rem;
+}
 .border {
   border-width: 1px;
 }
 .border-2 {
   border-width: 2px;
 }
-.border-base-300 {
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+.border-black {
   --tw-border-opacity: 1;
-  border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
+  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)));
 }
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
 .bg-base-100 {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
@@ -4035,9 +4202,6 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.p-1 {
-  padding: 0.25rem;
-}
 .p-2 {
   padding: 0.5rem;
 }
@@ -4065,20 +4229,89 @@ input.tab:checked + .tab-content,
   padding-top: 4rem;
   padding-bottom: 4rem;
 }
+.py-2 {
+  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;
+}
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
 .text-xs {
   font-size: 0.75rem;
   line-height: 1rem;
 }
+.font-bold {
+  font-weight: 700;
+}
 .font-medium {
   font-weight: 500;
 }
+.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));
+}
+.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);
+}
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.duration-150 {
+  transition-duration: 150ms;
+}
+.hover\\:bg-gray-100:hover {
+  --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));
 }`;
 var __defProp$9 = Object.defineProperty;
 var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
@@ -4093,7 +4326,7 @@ var __decorateClass$9 = (decorators, target, key, kind) => {
 };
 const tailwindElementCss = unsafeCSS(tailwindStyle);
 const minMaxPercentSliderElementCss = unsafeCSS(minMaxPercentSliderCss);
-const _PreactLitAdapter = class _PreactLitAdapter extends b {
+const _PreactLitAdapter = class _PreactLitAdapter extends ReactiveElement {
   constructor() {
     super(...arguments);
     this.lapis = "";
@@ -4103,7 +4336,6 @@ const _PreactLitAdapter = class _PreactLitAdapter extends b {
     };
   }
   update(changedProperties) {
-    console.log("this.lapis", this.lapis);
     const vdom = /* @__PURE__ */ u$1(LapisUrlContext.Provider, { value: this.lapis, children: /* @__PURE__ */ u$1(ReferenceGenomeContext.Provider, { value: this.referenceGenome, children: this.render() }) });
     super.update(changedProperties);
     render(vdom, this.renderRoot);
@@ -4139,9 +4371,20 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
     this.variants = [];
     this.sequenceType = "nucleotide";
     this.views = ["table"];
+    this.size = void 0;
+    this.headline = "Mutation comparison";
   }
   render() {
-    return /* @__PURE__ */ u$1(MutationComparison, { variants: this.variants, sequenceType: this.sequenceType, views: this.views });
+    return /* @__PURE__ */ u$1(
+      MutationComparison,
+      {
+        variants: this.variants,
+        sequenceType: this.sequenceType,
+        views: this.views,
+        size: this.size,
+        headline: this.headline
+      }
+    );
   }
 };
 __decorateClass$8([
@@ -4153,13 +4396,19 @@ __decorateClass$8([
 __decorateClass$8([
   n2({ type: Array })
 ], MutationComparisonComponent.prototype, "views", 2);
+__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")
 ], MutationComparisonComponent);
 function getInsertionsTableData(data) {
   return data.map((mutationEntry) => {
     return {
-      insertion: mutationEntry.mutation.toString(),
+      insertion: mutationEntry.mutation,
       count: mutationEntry.count
     };
   });
@@ -4170,7 +4419,7 @@ function getMutationsTableData(data, proportionInterval) {
   };
   return data.filter(byProportion2).map((mutationEntry) => {
     return {
-      mutation: mutationEntry.mutation.toString(),
+      mutation: mutationEntry.mutation,
       type: mutationEntry.type,
       count: mutationEntry.count,
       proportion: mutationEntry.proportion
@@ -4301,22 +4550,13 @@ const MutationsGrid = ({ data, sequenceType, proportionInterval }) => {
   return /* @__PURE__ */ u$1(Table, { data: tableData, columns: getHeaders(), pagination: true });
 };
 const sortInsertions = (a2, b2) => {
-  const insertionA = Insertion.parse(a2);
-  const insertionB = Insertion.parse(b2);
-  if (insertionA && insertionB) {
-    const segmentA = insertionA.segment;
-    const segmentB = insertionB.segment;
-    if (segmentA !== void 0 && segmentB !== void 0 && segmentA !== segmentB) {
-      return segmentA.localeCompare(segmentB);
-    }
-    const positionA = insertionA.position;
-    const positionB = insertionB.position;
-    if (positionA !== positionB) {
-      return positionA - positionB;
-    }
-    return insertionA.insertedSymbols.localeCompare(insertionB.insertedSymbols);
+  if (a2.segment !== b2.segment) {
+    return compareSegments(a2.segment, b2.segment);
+  }
+  if (a2.position !== b2.position) {
+    return comparePositions(a2.position, b2.position);
   }
-  throw new Error(`Invalid insertion: ${a2} or ${b2}`);
+  return a2.insertedSymbols.localeCompare(b2.insertedSymbols);
 };
 const InsertionsTable = ({ data }) => {
   const getHeaders = () => {
@@ -4327,7 +4567,8 @@ const InsertionsTable = ({ data }) => {
           compare: (a2, b2) => {
             return sortInsertions(a2, b2);
           }
-        }
+        },
+        formatter: (cell) => cell.toString()
       },
       {
         name: "Count",
@@ -4347,7 +4588,8 @@ const MutationsTable = ({ data, proportionInterval }) => {
           compare: (a2, b2) => {
             return sortSubstitutionsAndDeletions(a2, b2);
           }
-        }
+        },
+        formatter: (cell) => cell.toString()
       },
       {
         name: "Type",
@@ -4421,12 +4663,17 @@ function filterMutationsData(data, displayedSegments, displayedMutationTypes) {
     gridData: filteredSubstitutionsOrDeletions
   };
 }
-const Mutations = ({ variant, sequenceType, views }) => {
+const Mutations = ({
+  variant,
+  sequenceType,
+  views,
+  size,
+  headline = "Mutations"
+}) => {
   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, {}) });
   }
@@ -4436,7 +4683,7 @@ const Mutations = ({ variant, sequenceType, views }) => {
   if (data === null) {
     return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
   }
-  return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationsTabs, { mutationsData: data, sequenceType, views }) });
+  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 }) }) });
 };
 const MutationsTabs = ({ mutationsData, sequenceType, views }) => {
   const [proportionInterval, setProportionInterval] = p({ min: 0.05, max: 1 });
@@ -4530,11 +4777,16 @@ const Toolbar$2 = ({
       CsvDownloadButton,
       {
         className: "mx-1 btn btn-xs",
-        getData: () => getInsertionsTableData(filteredData.insertions),
+        getData: () => getInsertionsTableData(filteredData.insertions).map((row) => {
+          return {
+            insertion: row.insertion.toString(),
+            count: row.count
+          };
+        }),
         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;
@@ -4554,9 +4806,20 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.variant = { displayName: "" };
     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 });
+    return /* @__PURE__ */ u$1(
+      Mutations,
+      {
+        variant: this.variant,
+        sequenceType: this.sequenceType,
+        views: this.views,
+        size: this.size,
+        headline: this.headline
+      }
+    );
   }
 };
 __decorateClass$7([
@@ -4568,6 +4831,12 @@ __decorateClass$7([
 __decorateClass$7([
   n2({ type: Array })
 ], MutationsComponent.prototype, "views", 2);
+__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")
 ], MutationsComponent);
@@ -4680,6 +4949,7 @@ const PrevalenceOverTimeBarChart = ({
       datasets: data.map((graphData, index) => datasets$1(graphData, index, confidenceIntervalMethod))
     },
     options: {
+      maintainAspectRatio: false,
       animation: false,
       scales: {
         y: getYAxisScale(yAxisScaleType)
@@ -5633,6 +5903,7 @@ const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }) => {
     },
     options: {
       animation: false,
+      maintainAspectRatio: false,
       scales: {
         x: {
           ticks: {
@@ -5690,6 +5961,7 @@ const PrevalenceOverTimeLineChart = ({
     },
     options: {
       animation: false,
+      maintainAspectRatio: false,
       scales: {
         y: getYAxisScale(yAxisScaleType)
       },
@@ -6106,14 +6378,15 @@ const PrevalenceOverTime = ({
   granularity,
   smoothingWindow,
   views,
-  confidenceIntervalMethods
+  confidenceIntervalMethods,
+  size,
+  headline = "Prevalence over time"
 }) => {
   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, {}) });
   }
@@ -6123,7 +6396,7 @@ const PrevalenceOverTime = ({
   if (data === null) {
     return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
   }
-  return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+  return /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize: { height: "600px", width: "100%" }, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
     PrevalenceOverTimeTabs,
     {
       views,
@@ -6131,7 +6404,7 @@ const PrevalenceOverTime = ({
       granularity,
       confidenceIntervalMethods
     }
-  ) });
+  ) }) });
 };
 const PrevalenceOverTimeTabs = ({
   views,
@@ -6175,7 +6448,10 @@ const PrevalenceOverTimeTabs = ({
           content: /* @__PURE__ */ u$1(PrevalenceOverTimeBubbleChart, { data, yAxisScaleType })
         };
       case "table":
-        return { title: "Table", content: /* @__PURE__ */ u$1(PrevalenceOverTimeTable, { data, granularity }) };
+        return {
+          title: "Table",
+          content: /* @__PURE__ */ u$1(PrevalenceOverTimeTable, { data, granularity })
+        };
     }
   };
   const tabs = views.map((view) => getTab(view));
@@ -6222,7 +6498,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;
@@ -6245,6 +6527,8 @@ 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() {
     return /* @__PURE__ */ u$1(
@@ -6255,7 +6539,9 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         granularity: this.granularity,
         smoothingWindow: this.smoothingWindow,
         views: this.views,
-        confidenceIntervalMethods: this.confidenceIntervalMethods
+        confidenceIntervalMethods: this.confidenceIntervalMethods,
+        size: this.size,
+        headline: this.headline
       }
     );
   }
@@ -6278,6 +6564,12 @@ __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);
 PrevalenceOverTimeComponent = __decorateClass$6([
   t$2("gs-prevalence-over-time")
 ], PrevalenceOverTimeComponent);
@@ -6290,6 +6582,7 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }) => {
       datasets: datasets(data)
     },
     options: {
+      maintainAspectRatio: false,
       animation: false,
       scales: {
         y: getYAxisScale(yAxisScaleType)
@@ -6302,9 +6595,9 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }) => {
       }
     }
   };
-  return /* @__PURE__ */ u$1(Fragment, { children: [
-    /* @__PURE__ */ u$1(GsChart, { configuration: config }),
-    /* @__PURE__ */ u$1("div", { children: [
+  return /* @__PURE__ */ u$1("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ u$1("div", { className: "flex-1", children: /* @__PURE__ */ u$1(GsChart, { configuration: config }) }),
+    /* @__PURE__ */ u$1("p", { children: [
       "Advantage: ",
       (data.params.fd.value * 100).toFixed(2),
       "% (",
@@ -6469,7 +6762,9 @@ const RelativeGrowthAdvantage = ({
   numerator,
   denominator,
   generationTime,
-  views
+  views,
+  size,
+  headline = "Relative growth advantage"
 }) => {
   const lapis = P(LapisUrlContext);
   const [yAxisScaleType, setYAxisScaleType] = p("linear");
@@ -6477,7 +6772,6 @@ 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, {}) });
   }
@@ -6487,21 +6781,23 @@ const RelativeGrowthAdvantage = ({
   if (data === null) {
     return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
   }
-  return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+  return /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize: { height: "700px", width: "100%" }, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
     RelativeGrowthAdvantageTabs,
     {
       data,
       yAxisScaleType,
       setYAxisScaleType,
-      views
+      views,
+      generationTime
     }
-  ) });
+  ) }) });
 };
 const RelativeGrowthAdvantageTabs = ({
   data,
   yAxisScaleType,
   setYAxisScaleType,
-  views
+  views,
+  generationTime
 }) => {
   const getTab = (view) => {
     switch (view) {
@@ -6523,16 +6819,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;
@@ -6553,6 +6878,8 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
     this.denominator = {};
     this.generationTime = 7;
     this.views = ["line"];
+    this.headline = "Relative growth advantage";
+    this.size = void 0;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -6561,7 +6888,9 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
         numerator: this.numerator,
         denominator: this.denominator,
         generationTime: this.generationTime,
-        views: this.views
+        views: this.views,
+        size: this.size,
+        headline: this.headline
       }
     );
   }
@@ -6578,6 +6907,12 @@ __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);
 RelativeGrowthAdvantageComponent = __decorateClass$5([
   t$2("gs-relative-growth-advantage")
 ], RelativeGrowthAdvantageComponent);
@@ -6612,12 +6947,17 @@ async function queryAggregateData(variant, fields, lapis, signal) {
     })
   );
 }
-const Aggregate = ({ fields, views, filter }) => {
+const Aggregate = ({
+  fields,
+  views,
+  filter,
+  size,
+  headline = "Aggregate"
+}) => {
   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, {}) });
   }
@@ -6627,7 +6967,7 @@ const Aggregate = ({ fields, views, filter }) => {
   if (data === null) {
     return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
   }
-  return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(AggregatedDataTabs, { data, views, fields }) });
+  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 }) }) });
 };
 const AggregatedDataTabs = ({ data, views, fields }) => {
   const getTab = (view) => {
@@ -6645,7 +6985,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;
@@ -6665,9 +7005,20 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.fields = [];
     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 });
+    return /* @__PURE__ */ u$1(
+      Aggregate,
+      {
+        fields: this.fields,
+        views: this.views,
+        filter: this.filter,
+        size: this.size,
+        headline: this.headline
+      }
+    );
   }
 };
 __decorateClass$4([
@@ -6679,6 +7030,12 @@ __decorateClass$4([
 __decorateClass$4([
   n2({ type: Object })
 ], AggregateComponent.prototype, "filter", 2);
+__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")
 ], AggregateComponent);
@@ -6689,16 +7046,36 @@ const toYYYYMMDD = (date) => {
   const options2 = { year: "numeric", month: "2-digit", day: "2-digit" };
   return date.toLocaleDateString("en-CA", options2);
 };
+const PRESET_VALUE_CUSTOM = "custom";
+const PRESET_VALUE_ALL_TIMES = "allTimes";
+const PRESET_VALUE_LAST_2_WEEKS = "last2Weeks";
+const PRESET_VALUE_LAST_MONTH = "lastMonth";
+const PRESET_VALUE_LAST_2_MONTHS = "last2Months";
+const PRESET_VALUE_LAST_3_MONTHS = "last3Months";
+const PRESET_VALUE_LAST_6_MONTHS = "last6Months";
+const presets = {
+  [PRESET_VALUE_CUSTOM]: { label: "Custom" },
+  [PRESET_VALUE_ALL_TIMES]: { label: "All times" },
+  [PRESET_VALUE_LAST_2_WEEKS]: { label: "Last 2 weeks" },
+  [PRESET_VALUE_LAST_MONTH]: { label: "Last month" },
+  [PRESET_VALUE_LAST_2_MONTHS]: { label: "Last 2 months" },
+  [PRESET_VALUE_LAST_3_MONTHS]: { label: "Last 3 months" },
+  [PRESET_VALUE_LAST_6_MONTHS]: { label: "Last 6 months" }
+};
 const DateRangeSelector = ({
   customSelectOptions,
-  earliestDate = "1900-01-01"
+  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);
-  const [selectedDateRange, setSelectedDateRange] = p("last6Months");
+  const selectableOptions = getSelectableOptions(customSelectOptions);
+  const [selectedDateRange, setSelectedDateRange] = p(
+    initialValue !== void 0 && selectableOptions.some((option) => option.value === initialValue) ? initialValue : PRESET_VALUE_LAST_6_MONTHS
+  );
   const [selectedDates, setSelectedDates] = p({
     dateFrom: getDatesForSelectorValue("last6Months", customSelectOptions, earliestDate).dateFrom,
     dateTo: getDatesForSelectorValue("last6Months", customSelectOptions, earliestDate).dateTo
@@ -6708,17 +7085,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
         })
@@ -6728,24 +7105,7 @@ const DateRangeSelector = ({
       dateFromPicker == null ? void 0 : dateFromPicker.destroy();
       dateToPicker == null ? void 0 : dateToPicker.destroy();
     };
-  }, [datePickerRef, endDatePickerRef]);
-  const selectableOptions = () => {
-    const presetOptions = [
-      { label: "Custom", value: "custom" },
-      { label: "All times", value: "allTimes" },
-      { label: "Last 2 weeks", value: "last2Weeks" },
-      { label: "Last month", value: "lastMonth" },
-      { label: "Last 2 weeks", value: "last2Weeks" },
-      { label: "Last month", value: "lastMonth" },
-      { label: "Last 2 months", value: "last2Months" },
-      { label: "Last 3 months", value: "last3Months" },
-      { label: "Last 6 months", value: "last6Months" }
-    ];
-    const customOptions = customSelectOptions.map((customSelectOption) => {
-      return { label: customSelectOption.label, value: customLabelToOptionValue(customSelectOption.label) };
-    });
-    return [...presetOptions, ...customOptions];
-  };
+  }, [fromDatePickerRef, toDatePickerRef]);
   const onSelectChange = (value) => {
     setSelectedDateRange(value);
     const dateRange = getDatesForSelectorValue(value, customSelectOptions, earliestDate);
@@ -6797,7 +7157,7 @@ const DateRangeSelector = ({
     /* @__PURE__ */ u$1(
       Select,
       {
-        items: selectableOptions(),
+        items: selectableOptions,
         selected: selectedDateRange,
         selectStyle: "select-bordered rounded-none join-item",
         onChange: (event) => {
@@ -6814,7 +7174,7 @@ const DateRangeSelector = ({
         class: "input input-bordered rounded-none join-item",
         type: "text",
         placeholder: "Date from",
-        ref: datePickerRef,
+        ref: fromDatePickerRef,
         onChange: onChangeDateFrom,
         onBlur: onChangeDateFrom
       }
@@ -6825,51 +7185,55 @@ const DateRangeSelector = ({
         class: "input input-bordered rounded-none join-item",
         type: "text",
         placeholder: "Date to",
-        ref: endDatePickerRef,
+        ref: toDatePickerRef,
         onChange: onChangeDateTo,
-        onBlur: onChangeDateFrom
+        onBlur: onChangeDateTo
       }
     )
   ] });
 };
-const customLabelToOptionValue = (customLabel) => {
-  return `${customLabel}customLabel`;
+const getSelectableOptions = (customSelectOptions) => {
+  const presetOptions = Object.entries(presets).map(([key, value]) => {
+    return { label: value.label, value: key };
+  });
+  const customOptions = customSelectOptions.map((customSelectOption) => {
+    return { label: customSelectOption.label, value: customSelectOption.label };
+  });
+  return [...presetOptions, ...customOptions];
 };
 const getDatesForSelectorValue = (selectorValue, customSelectOptions, earliestDate) => {
   const today = /* @__PURE__ */ new Date();
-  const customSelectOption = customSelectOptions.find(
-    (option) => customLabelToOptionValue(option.label) === selectorValue
-  );
+  const customSelectOption = customSelectOptions.find((option) => option.label === selectorValue);
   if (customSelectOption) {
     return { dateFrom: new Date(customSelectOption.dateFrom), dateTo: new Date(customSelectOption.dateTo) };
   }
   switch (selectorValue) {
-    case "last2Weeks": {
+    case PRESET_VALUE_LAST_2_WEEKS: {
       const twoWeeksAgo = new Date(today);
       twoWeeksAgo.setDate(today.getDate() - 14);
       return { dateFrom: twoWeeksAgo, dateTo: today };
     }
-    case "lastMonth": {
+    case PRESET_VALUE_LAST_MONTH: {
       const lastMonth = new Date(today);
       lastMonth.setMonth(today.getMonth() - 1);
       return { dateFrom: lastMonth, dateTo: today };
     }
-    case "last2Months": {
+    case PRESET_VALUE_LAST_2_MONTHS: {
       const twoMonthsAgo = new Date(today);
       twoMonthsAgo.setMonth(today.getMonth() - 2);
       return { dateFrom: twoMonthsAgo, dateTo: today };
     }
-    case "last3Months": {
+    case PRESET_VALUE_LAST_3_MONTHS: {
       const threeMonthsAgo = new Date(today);
       threeMonthsAgo.setMonth(today.getMonth() - 3);
       return { dateFrom: threeMonthsAgo, dateTo: today };
     }
-    case "last6Months": {
+    case PRESET_VALUE_LAST_6_MONTHS: {
       const sixMonthsAgo = new Date(today);
       sixMonthsAgo.setMonth(today.getMonth() - 6);
       return { dateFrom: sixMonthsAgo, dateTo: today };
     }
-    case "allTimes": {
+    case PRESET_VALUE_ALL_TIMES: {
       return { dateFrom: new Date(earliestDate), dateTo: today };
     }
     default:
@@ -6892,9 +7256,17 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
     super(...arguments);
     this.customSelectOptions = [];
     this.earliestDate = "1900-01-01";
+    this.initialValue = "last6Months";
   }
   render() {
-    return /* @__PURE__ */ u$1(DateRangeSelector, { customSelectOptions: this.customSelectOptions, earliestDate: this.earliestDate });
+    return /* @__PURE__ */ u$1(
+      DateRangeSelector,
+      {
+        customSelectOptions: this.customSelectOptions,
+        earliestDate: this.earliestDate,
+        initialValue: this.initialValue
+      }
+    );
   }
 };
 __decorateClass$3([
@@ -6903,6 +7275,9 @@ __decorateClass$3([
 __decorateClass$3([
   n2({ type: String })
 ], DateRangeSelectorComponent.prototype, "earliestDate", 2);
+__decorateClass$3([
+  n2()
+], DateRangeSelectorComponent.prototype, "initialValue", 2);
 DateRangeSelectorComponent = __decorateClass$3([
   t$2("gs-date-range-selector")
 ], DateRangeSelectorComponent);
@@ -6938,7 +7313,7 @@ function compareLocationEntries(fields) {
     return 0;
   };
 }
-const LocationFilter = ({ value: initialValue, fields }) => {
+const LocationFilter = ({ initialValue, fields }) => {
   const lapis = P(LapisUrlContext);
   const [value, setValue] = p(initialValue ?? "");
   const [unknownLocation, setUnknownLocation] = p(false);
@@ -7031,16 +7406,16 @@ var __decorateClass$2 = (decorators, target, key, kind) => {
 let LocationFilterComponent = class extends PreactLitAdapter {
   constructor() {
     super(...arguments);
-    this.value = "";
+    this.initialValue = "";
     this.fields = [];
   }
   render() {
-    return /* @__PURE__ */ u$1(LocationFilter, { value: this.value, fields: this.fields });
+    return /* @__PURE__ */ u$1(LocationFilter, { initialValue: this.initialValue, fields: this.fields });
   }
 };
 __decorateClass$2([
   n2()
-], LocationFilterComponent.prototype, "value", 2);
+], LocationFilterComponent.prototype, "initialValue", 2);
 __decorateClass$2([
   n2({ type: Array })
 ], LocationFilterComponent.prototype, "fields", 2);
@@ -7052,7 +7427,7 @@ async function fetchAutocompleteList(lapis, field, signal) {
   const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
   return data.map((item) => item[field]);
 }
-const TextInput = ({ lapisField, placeholderText }) => {
+const TextInput = ({ lapisField, placeholderText, initialValue }) => {
   const lapis = P(LapisUrlContext);
   const inputRef = F(null);
   const { data, error, isLoading } = useQuery(() => fetchAutocompleteList(lapis, lapisField), [lapisField, lapis]);
@@ -7093,7 +7468,8 @@ const TextInput = ({ lapisField, placeholderText }) => {
         placeholder: placeholderText !== void 0 ? placeholderText : lapisField,
         onInput,
         ref: inputRef,
-        list: lapisField
+        list: lapisField,
+        value: initialValue
       }
     ),
     /* @__PURE__ */ u$1("datalist", { id: lapisField, children: data.map((item) => /* @__PURE__ */ u$1("option", { value: item }, item)) })
@@ -7113,13 +7489,24 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
 let TextInputComponent = class extends PreactLitAdapter {
   constructor() {
     super(...arguments);
+    this.initialValue = "";
     this.lapisField = "";
     this.placeholderText = "";
   }
   render() {
-    return /* @__PURE__ */ u$1(TextInput, { lapisField: this.lapisField, placeholderText: this.placeholderText });
+    return /* @__PURE__ */ u$1(
+      TextInput,
+      {
+        lapisField: this.lapisField,
+        placeholderText: this.placeholderText,
+        initialValue: this.initialValue
+      }
+    );
   }
 };
+__decorateClass$1([
+  n2()
+], TextInputComponent.prototype, "initialValue", 2);
 __decorateClass$1([
   n2()
 ], TextInputComponent.prototype, "lapisField", 2);
@@ -7129,6 +7516,16 @@ __decorateClass$1([
 TextInputComponent = __decorateClass$1([
   t$2("gs-text-input")
 ], TextInputComponent);
+const ReferenceGenomesAwaiter = ({ children }) => {
+  const referenceGenome = P(ReferenceGenomeContext);
+  if (isNotInitialized(referenceGenome)) {
+    return /* @__PURE__ */ u$1("div", { className: "laoding loading-spinner loading-md", children: "Loading..." });
+  }
+  return /* @__PURE__ */ u$1(Fragment, { children });
+};
+function isNotInitialized(referenceGenome) {
+  return referenceGenome.nucleotideSequences.length === 0 && referenceGenome.genes.length === 0;
+}
 const sequenceTypeFromSegment = (possibleSegment, referenceGenome) => {
   if (possibleSegment === void 0) {
     return referenceGenome.nucleotideSequences.length === 1 ? "nucleotide" : void 0;
@@ -7195,14 +7592,11 @@ const DeleteIcon = () => {
     }
   );
 };
-const MutationFilter = () => {
+const MutationFilter = ({ initialValue }) => {
   const referenceGenome = P(ReferenceGenomeContext);
-  const [selectedFilters, setSelectedFilters] = p({
-    nucleotideMutations: [],
-    aminoAcidMutations: [],
-    nucleotideInsertions: [],
-    aminoAcidInsertions: []
-  });
+  const [selectedFilters, setSelectedFilters] = p(
+    getInitialState(initialValue, referenceGenome)
+  );
   const [inputValue, setInputValue] = p("");
   const [isError, setIsError] = p(false);
   const formRef = F(null);
@@ -7248,14 +7642,17 @@ const MutationFilter = () => {
     setIsError(false);
   };
   return /* @__PURE__ */ u$1("div", { class: `rounded-lg border border-gray-300 bg-white p-2`, children: [
-    /* @__PURE__ */ u$1(
-      SelectedMutationDisplay,
-      {
-        selectedFilters,
-        setSelectedFilters,
-        fireChangeEvent
-      }
-    ),
+    /* @__PURE__ */ u$1("div", { class: "flex justify-between", children: [
+      /* @__PURE__ */ u$1(
+        SelectedMutationDisplay,
+        {
+          selectedFilters,
+          setSelectedFilters,
+          fireChangeEvent
+        }
+      ),
+      /* @__PURE__ */ u$1(Info, { children: "Info for mutation filter" })
+    ] }),
     /* @__PURE__ */ u$1("form", { className: "mt-2 w-full", onSubmit: handleSubmit, ref: formRef, children: /* @__PURE__ */ u$1("label", { className: `input flex items-center gap-2 ${isError ? "input-error" : "input-bordered"}`, children: [
       /* @__PURE__ */ u$1(
         "input",
@@ -7264,7 +7661,7 @@ const MutationFilter = () => {
           type: "text",
           value: inputValue,
           onInput: handleInputChange,
-          placeholder: "Enter a mutation",
+          placeholder: getPlaceholder(referenceGenome),
           onBlur: handleOnBlur
         }
       ),
@@ -7272,6 +7669,40 @@ const MutationFilter = () => {
     ] }) })
   ] });
 };
+function getInitialState(initialValue, referenceGenome) {
+  if (initialValue === void 0) {
+    return {
+      nucleotideMutations: [],
+      aminoAcidMutations: [],
+      nucleotideInsertions: [],
+      aminoAcidInsertions: []
+    };
+  }
+  const values = Array.isArray(initialValue) ? initialValue : Object.values(initialValue).flatMap((it) => it);
+  return values.reduce(
+    (selectedFilters, value) => {
+      const parsedMutation = parseAndValidateMutation(value, referenceGenome);
+      if (parsedMutation === null) {
+        return selectedFilters;
+      }
+      return {
+        ...selectedFilters,
+        [parsedMutation.type]: [...selectedFilters[parsedMutation.type], parsedMutation.value]
+      };
+    },
+    {
+      nucleotideMutations: [],
+      aminoAcidMutations: [],
+      nucleotideInsertions: [],
+      aminoAcidInsertions: []
+    }
+  );
+}
+function getPlaceholder(referenceGenome) {
+  const segmentPrefix = referenceGenome.nucleotideSequences.length > 1 ? `${referenceGenome.nucleotideSequences[0].name}:` : "";
+  const firstGene = referenceGenome.genes[0].name;
+  return `Enter a mutation (e.g. ${segmentPrefix}A123T, ins_${segmentPrefix}123:AT, ${firstGene}:M123E, ins_${firstGene}:123:ME)`;
+}
 const SelectedMutationDisplay = ({ selectedFilters, setSelectedFilters, fireChangeEvent }) => {
   const onSelectedRemoved = (mutation, key) => {
     const newSelectedValues = {
@@ -7402,10 +7833,17 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let MutationFilterComponent = class extends PreactLitAdapter {
+  constructor() {
+    super(...arguments);
+    this.initialValue = void 0;
+  }
   render() {
-    return /* @__PURE__ */ u$1(MutationFilter, {});
+    return /* @__PURE__ */ u$1(ReferenceGenomesAwaiter, { children: /* @__PURE__ */ u$1(MutationFilter, { initialValue: this.initialValue }) });
   }
 };
+__decorateClass([
+  n2()
+], MutationFilterComponent.prototype, "initialValue", 2);
 MutationFilterComponent = __decorateClass([
   t$2("gs-mutation-filter")
 ], MutationFilterComponent);