@genspectrum/dashboard-components 0.1.2 → 0.1.4

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";
 /**
@@ -448,7 +449,7 @@ async function fetchReferenceGenome(lapisUrl, signal) {
 }
 const handleErrors = async (response) => {
   if (!response.ok) {
-    if (response.status % 500 === 0) {
+    if (response.status >= 400 && response.status < 500) {
       throw new Error(`${response.statusText}: ${JSON.stringify(await response.json())}`);
     }
     throw new Error(`${response.statusText}: ${response.status}`);
@@ -462,15 +463,15 @@ const substitutionsOrDeletionsEndpoint = (lapisUrl, sequenceType) => {
   return sequenceType === "amino acid" ? `${lapisUrl}/sample/aminoAcidMutations` : `${lapisUrl}/sample/nucleotideMutations`;
 };
 const referenceGenomeEndpoint = (lapisUrl) => `${lapisUrl}/sample/referenceGenome`;
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$9(target, key, result);
+    __defProp$a(target, key, result);
   return result;
 };
 let App = class extends LitElement {
@@ -490,35 +491,33 @@ 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() {
     return this;
   }
 };
-__decorateClass$9([
+__decorateClass$a([
   provide({ context: lapisContext }),
   n2()
 ], App.prototype, "lapis", 2);
-__decorateClass$9([
+__decorateClass$a([
   provide({ context: referenceGenomeContext })
 ], App.prototype, "referenceGenome", 2);
-App = __decorateClass$9([
+App = __decorateClass$a([
   t$2("gs-app")
 ], 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;
+    }
+    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;
     }
-    if (aMatch[3] !== bMatch[3]) {
-      return parseInt(aMatch[3], 10) - parseInt(bMatch[3], 10);
+    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,9 +1225,17 @@ const ErrorDisplay = ({ error }) => {
   ] });
 };
 const Headline = ({ heading, children }) => {
-  return /* @__PURE__ */ u$1(Fragment, { children: [
-    /* @__PURE__ */ u$1("h1", { children: 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 = ({ content, className }) => {
@@ -1379,30 +1431,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,7 +1499,12 @@ function useQuery(fetchDataCallback, dependencies = []) {
   }, [JSON.stringify(dependencies)]);
   return { data, error, isLoading };
 }
-const MutationComparison = ({ variants, sequenceType, views }) => {
+const MutationComparison = ({
+  variants,
+  sequenceType,
+  views,
+  size
+}) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationData(variants, sequenceType, lapis);
@@ -1441,7 +1519,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 });
@@ -1486,7 +1564,7 @@ const MutationComparisonTabs = ({ data, views, sequenceType }) => {
     {
       tabs,
       toolbar: /* @__PURE__ */ u$1(
-        Toolbar$2,
+        Toolbar$3,
         {
           displayedSegments,
           setDisplayedSegments,
@@ -1500,7 +1578,7 @@ const MutationComparisonTabs = ({ data, views, sequenceType }) => {
     }
   );
 };
-const Toolbar$2 = ({
+const Toolbar$3 = ({
   displayedSegments,
   setDisplayedSegments,
   displayedMutationTypes,
@@ -2032,108 +2110,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 +2217,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;
@@ -2832,19 +2841,6 @@ 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 {
   display: block;
@@ -2992,6 +2988,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 +3022,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 +3077,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 +3088,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 +3128,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)));
@@ -3882,12 +3891,6 @@ input.tab:checked + .tab-content,
 .z-\\[1\\] {
   z-index: 1;
 }
-.col-\\[9999\\] {
-  grid-column: 9999;
-}
-.m-1 {
-  margin: 0.25rem;
-}
 .m-2 {
   margin: 0.5rem;
 }
@@ -3933,8 +3936,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 +3963,9 @@ input.tab:checked + .tab-content,
 .max-w-screen-lg {
   max-width: 1024px;
 }
+.flex-1 {
+  flex: 1 1 0%;
+}
 .grow {
   flex-grow: 1;
 }
@@ -3978,12 +3987,18 @@ input.tab:checked + .tab-content,
 .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 +4020,41 @@ 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 {
-  --tw-border-opacity: 1;
-  border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
+.border-b-2 {
+  border-bottom-width: 2px;
 }
 .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 +4067,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;
 }
@@ -4061,17 +4090,43 @@ input.tab:checked + .tab-content,
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
 }
-.py-16 {
-  padding-top: 4rem;
-  padding-bottom: 4rem;
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.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-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
 .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);
@@ -4079,21 +4134,37 @@ input.tab:checked + .tab-content,
 }
 .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-gray-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
 }`;
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$8(target, key, result);
+    __defProp$9(target, key, result);
   return result;
 };
 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 +4174,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);
@@ -4111,10 +4181,10 @@ const _PreactLitAdapter = class _PreactLitAdapter extends b {
 };
 _PreactLitAdapter.styles = [tailwindElementCss, minMaxPercentSliderElementCss];
 let PreactLitAdapter = _PreactLitAdapter;
-__decorateClass$8([
+__decorateClass$9([
   consume({ context: lapisContext })
 ], PreactLitAdapter.prototype, "lapis", 2);
-__decorateClass$8([
+__decorateClass$9([
   consume({ context: referenceGenomeContext, subscribe: true })
 ], PreactLitAdapter.prototype, "referenceGenome", 2);
 const gridJsElementCss = unsafeCSS(gridJsStyle);
@@ -4122,15 +4192,15 @@ const _PreactLitAdapterWithGridJsStyles = class _PreactLitAdapterWithGridJsStyle
 };
 _PreactLitAdapterWithGridJsStyles.styles = [...PreactLitAdapter.styles, gridJsElementCss];
 let PreactLitAdapterWithGridJsStyles = _PreactLitAdapterWithGridJsStyles;
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$7(target, key, result);
+    __defProp$8(target, key, result);
   return result;
 };
 let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -4139,27 +4209,39 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
     this.variants = [];
     this.sequenceType = "nucleotide";
     this.views = ["table"];
+    this.size = void 0;
   }
   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
+      }
+    );
   }
 };
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: Array })
 ], MutationComparisonComponent.prototype, "variants", 2);
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "sequenceType", 2);
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: Array })
 ], MutationComparisonComponent.prototype, "views", 2);
-MutationComparisonComponent = __decorateClass$7([
+__decorateClass$8([
+  n2({ type: Object })
+], MutationComparisonComponent.prototype, "size", 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 +4252,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 +4383,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 +4400,8 @@ const InsertionsTable = ({ data }) => {
           compare: (a2, b2) => {
             return sortInsertions(a2, b2);
           }
-        }
+        },
+        formatter: (cell) => cell.toString()
       },
       {
         name: "Count",
@@ -4347,7 +4421,8 @@ const MutationsTable = ({ data, proportionInterval }) => {
           compare: (a2, b2) => {
             return sortSubstitutionsAndDeletions(a2, b2);
           }
-        }
+        },
+        formatter: (cell) => cell.toString()
       },
       {
         name: "Type",
@@ -4421,7 +4496,7 @@ function filterMutationsData(data, displayedSegments, displayedMutationTypes) {
     gridData: filteredSubstitutionsOrDeletions
   };
 }
-const Mutations = ({ variant, sequenceType, views }) => {
+const Mutations = ({ variant, sequenceType, views, size }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryMutationsData(variant, sequenceType, lapis);
@@ -4436,7 +4511,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 });
@@ -4474,7 +4549,7 @@ const MutationsTabs = ({ mutationsData, sequenceType, views }) => {
   };
   const tabs = views.map((view) => getTab(view));
   const toolbar = (activeTab) => /* @__PURE__ */ u$1(
-    Toolbar$1,
+    Toolbar$2,
     {
       activeTab,
       displayedSegments,
@@ -4488,7 +4563,7 @@ const MutationsTabs = ({ mutationsData, sequenceType, views }) => {
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
 };
-const Toolbar$1 = ({
+const Toolbar$2 = ({
   activeTab,
   displayedSegments,
   setDisplayedSegments,
@@ -4530,22 +4605,27 @@ const Toolbar$1 = ({
       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" })
   ] });
 };
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$6(target, key, result);
+    __defProp$7(target, key, result);
   return result;
 };
 let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -4554,21 +4634,25 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.variant = { displayName: "" };
     this.sequenceType = "nucleotide";
     this.views = ["table", "grid"];
+    this.size = void 0;
   }
   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 });
   }
 };
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: Object })
 ], MutationsComponent.prototype, "variant", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: String })
 ], MutationsComponent.prototype, "sequenceType", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: Array })
 ], MutationsComponent.prototype, "views", 2);
-MutationsComponent = __decorateClass$6([
+__decorateClass$7([
+  n2({ type: Object })
+], MutationsComponent.prototype, "size", 2);
+MutationsComponent = __decorateClass$7([
   t$2("gs-mutations-component")
 ], MutationsComponent);
 function getPrevalenceOverTimeTableData(data, granularity) {
@@ -4680,6 +4764,7 @@ const PrevalenceOverTimeBarChart = ({
       datasets: data.map((graphData, index) => datasets$1(graphData, index, confidenceIntervalMethod))
     },
     options: {
+      maintainAspectRatio: false,
       animation: false,
       scales: {
         y: getYAxisScale(yAxisScaleType)
@@ -5633,6 +5718,7 @@ const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }) => {
     },
     options: {
       animation: false,
+      maintainAspectRatio: false,
       scales: {
         x: {
           ticks: {
@@ -5690,6 +5776,7 @@ const PrevalenceOverTimeLineChart = ({
     },
     options: {
       animation: false,
+      maintainAspectRatio: false,
       scales: {
         y: getYAxisScale(yAxisScaleType)
       },
@@ -6106,7 +6193,8 @@ const PrevalenceOverTime = ({
   granularity,
   smoothingWindow,
   views,
-  confidenceIntervalMethods
+  confidenceIntervalMethods,
+  size
 }) => {
   const lapis = P(LapisUrlContext);
   const { data, error, isLoading } = useQuery(
@@ -6123,7 +6211,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 +6219,7 @@ const PrevalenceOverTime = ({
       granularity,
       confidenceIntervalMethods
     }
-  ) });
+  ) }) });
 };
 const PrevalenceOverTimeTabs = ({
   views,
@@ -6175,12 +6263,15 @@ 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));
   const toolbar = (activeTab) => /* @__PURE__ */ u$1(
-    Toolbar,
+    Toolbar$1,
     {
       activeTab,
       yAxisScaleType,
@@ -6194,7 +6285,7 @@ const PrevalenceOverTimeTabs = ({
   );
   return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar });
 };
-const Toolbar = ({
+const Toolbar$1 = ({
   activeTab,
   yAxisScaleType,
   setYAxisScaleType,
@@ -6225,15 +6316,15 @@ const Toolbar = ({
     /* @__PURE__ */ u$1(Info, { className: "ml-1", content: "Info for prevalence over time" })
   ] });
 };
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$5(target, key, result);
+    __defProp$6(target, key, result);
   return result;
 };
 let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -6245,6 +6336,7 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     this.smoothingWindow = 0;
     this.views = ["bar", "line", "bubble", "table"];
     this.confidenceIntervalMethods = ["wilson"];
+    this.size = void 0;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -6255,30 +6347,34 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         granularity: this.granularity,
         smoothingWindow: this.smoothingWindow,
         views: this.views,
-        confidenceIntervalMethods: this.confidenceIntervalMethods
+        confidenceIntervalMethods: this.confidenceIntervalMethods,
+        size: this.size
       }
     );
   }
 };
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: Object })
 ], PrevalenceOverTimeComponent.prototype, "numerator", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: Object })
 ], PrevalenceOverTimeComponent.prototype, "denominator", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "granularity", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: Number })
 ], PrevalenceOverTimeComponent.prototype, "smoothingWindow", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: Array })
 ], PrevalenceOverTimeComponent.prototype, "views", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: Array })
 ], PrevalenceOverTimeComponent.prototype, "confidenceIntervalMethods", 2);
-PrevalenceOverTimeComponent = __decorateClass$5([
+__decorateClass$6([
+  n2({ type: Object })
+], PrevalenceOverTimeComponent.prototype, "size", 2);
+PrevalenceOverTimeComponent = __decorateClass$6([
   t$2("gs-prevalence-over-time")
 ], PrevalenceOverTimeComponent);
 Chart.register(...registerables, LogitScale);
@@ -6290,6 +6386,7 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }) => {
       datasets: datasets(data)
     },
     options: {
+      maintainAspectRatio: false,
       animation: false,
       scales: {
         y: getYAxisScale(yAxisScaleType)
@@ -6302,9 +6399,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 +6566,8 @@ const RelativeGrowthAdvantage = ({
   numerator,
   denominator,
   generationTime,
-  views
+  views,
+  size
 }) => {
   const lapis = P(LapisUrlContext);
   const [yAxisScaleType, setYAxisScaleType] = p("linear");
@@ -6487,7 +6585,7 @@ 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,
@@ -6495,7 +6593,7 @@ const RelativeGrowthAdvantage = ({
       setYAxisScaleType,
       views
     }
-  ) });
+  ) }) });
 };
 const RelativeGrowthAdvantageTabs = ({
   data,
@@ -6535,15 +6633,15 @@ const RelativeGrowthAdvantageToolbar = ({
     /* @__PURE__ */ u$1(Info, { className: "ml-1", content: "Line chart" })
   ] });
 };
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp$4(target, key, result);
+    __defProp$5(target, key, result);
   return result;
 };
 let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
@@ -6553,6 +6651,7 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
     this.denominator = {};
     this.generationTime = 7;
     this.views = ["line"];
+    this.size = void 0;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -6561,26 +6660,135 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
         numerator: this.numerator,
         denominator: this.denominator,
         generationTime: this.generationTime,
-        views: this.views
+        views: this.views,
+        size: this.size
       }
     );
   }
 };
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Object })
 ], RelativeGrowthAdvantageComponent.prototype, "numerator", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Object })
 ], RelativeGrowthAdvantageComponent.prototype, "denominator", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Number })
 ], RelativeGrowthAdvantageComponent.prototype, "generationTime", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Array })
 ], RelativeGrowthAdvantageComponent.prototype, "views", 2);
-RelativeGrowthAdvantageComponent = __decorateClass$4([
+__decorateClass$5([
+  n2({ type: Object })
+], RelativeGrowthAdvantageComponent.prototype, "size", 2);
+RelativeGrowthAdvantageComponent = __decorateClass$5([
   t$2("gs-relative-growth-advantage")
 ], RelativeGrowthAdvantageComponent);
+const AggregateTable = ({ data, fields }) => {
+  const headers = [
+    ...fields.map((field) => {
+      return {
+        name: field,
+        sort: true
+      };
+    }),
+    {
+      name: "count",
+      sort: true
+    },
+    {
+      name: "proportion",
+      sort: true,
+      formatter: (cell) => formatProportion(cell)
+    }
+  ];
+  return /* @__PURE__ */ u$1(Table, { data, columns: headers, pagination: true });
+};
+async function queryAggregateData(variant, fields, lapis, signal) {
+  const fetchData = new FetchAggregatedOperator(variant, fields);
+  const data = (await fetchData.evaluate(lapis, signal)).content;
+  const total = data.reduce((acc, row) => acc + row.count, 0);
+  return data.map(
+    (row) => ({
+      ...row,
+      proportion: row.count / total
+    })
+  );
+}
+const Aggregate = ({ fields, views, filter, size }) => {
+  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, {}) });
+  }
+  if (error !== null) {
+    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(ErrorDisplay, { error }) });
+  }
+  if (data === null) {
+    return /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(NoDataDisplay, {}) });
+  }
+  return /* @__PURE__ */ u$1(ResizeContainer, { size, defaultSize: { height: "700px", width: "100%" }, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(AggregatedDataTabs, { data, views, fields }) }) });
+};
+const AggregatedDataTabs = ({ data, views, fields }) => {
+  const getTab = (view) => {
+    switch (view) {
+      case "table":
+        return {
+          title: "Table",
+          content: /* @__PURE__ */ u$1(AggregateTable, { data, fields })
+        };
+    }
+  };
+  const tabs = views.map((view) => getTab(view));
+  return /* @__PURE__ */ u$1(Tabs, { tabs, toolbar: /* @__PURE__ */ u$1(Toolbar, { data }) });
+};
+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" })
+  ] });
+};
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp$4(target, key, result);
+  return result;
+};
+let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
+  constructor() {
+    super(...arguments);
+    this.fields = [];
+    this.views = ["table"];
+    this.filter = {};
+    this.size = void 0;
+  }
+  render() {
+    return /* @__PURE__ */ u$1(Aggregate, { fields: this.fields, views: this.views, filter: this.filter, size: this.size });
+  }
+};
+__decorateClass$4([
+  n2({ type: Array })
+], AggregateComponent.prototype, "fields", 2);
+__decorateClass$4([
+  n2({ type: Array })
+], AggregateComponent.prototype, "views", 2);
+__decorateClass$4([
+  n2({ type: Object })
+], AggregateComponent.prototype, "filter", 2);
+__decorateClass$4([
+  n2({ type: Object })
+], AggregateComponent.prototype, "size", 2);
+AggregateComponent = __decorateClass$4([
+  t$2("gs-aggregate-component")
+], AggregateComponent);
 const toYYYYMMDD = (date) => {
   if (!date) {
     return void 0;
@@ -6588,16 +6796,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 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
@@ -6628,23 +6856,6 @@ const DateRangeSelector = ({
       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];
-  };
   const onSelectChange = (value) => {
     setSelectedDateRange(value);
     const dateRange = getDatesForSelectorValue(value, customSelectOptions, earliestDate);
@@ -6696,7 +6907,7 @@ const DateRangeSelector = ({
     /* @__PURE__ */ u$1(
       Select,
       {
-        items: selectableOptions(),
+        items: selectableOptions,
         selected: selectedDateRange,
         selectStyle: "select-bordered rounded-none join-item",
         onChange: (event) => {
@@ -6731,44 +6942,48 @@ const DateRangeSelector = ({
     )
   ] });
 };
-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:
@@ -6791,9 +7006,17 @@ let DateRangeSelectorComponent = class extends PreactLitAdapter {
     super(...arguments);
     this.customSelectOptions = [];
     this.earliestDate = "1900-01-01";
+    this.initialValue = "";
   }
   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([
@@ -6802,6 +7025,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);
@@ -6837,7 +7063,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);
@@ -6930,16 +7156,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);
@@ -6951,7 +7177,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]);
@@ -6992,7 +7218,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)) })
@@ -7012,13 +7239,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);
@@ -7028,6 +7266,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;
@@ -7094,14 +7342,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);
@@ -7147,14 +7392,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, { className: "mx-1", content: "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",
@@ -7163,7 +7411,7 @@ const MutationFilter = () => {
           type: "text",
           value: inputValue,
           onInput: handleInputChange,
-          placeholder: "Enter a mutation",
+          placeholder: getPlaceholder(referenceGenome),
           onBlur: handleOnBlur
         }
       ),
@@ -7171,6 +7419,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 = {
@@ -7301,14 +7583,22 @@ 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);
 export {
+  AggregateComponent,
   App,
   DateRangeSelectorComponent,
   LocationFilterComponent,