@genspectrum/dashboard-components 0.6.11 → 0.6.13

package/dist/dashboard-components.js

@@ -25877,6 +25877,249 @@ function filterBySegmentAndMutationType(data, displayedSegments, displayedMutati
   return data.filter(byDisplayedSegments).filter(byDisplayedMutationTypes);
 }
 const LapisUrlContext = G$1("");
+const CsvDownloadButton = ({
+  label = "Download",
+  filename = "data.csv",
+  getData,
+  className
+}) => {
+  const download = () => {
+    const content = getDownloadContent();
+    const blob = new Blob([content], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a2 = document.createElement("a");
+    a2.href = url;
+    a2.download = filename;
+    a2.click();
+    URL.revokeObjectURL(url);
+  };
+  const getDownloadContent = () => {
+    const data = getData();
+    const keys = getDataKeys(data);
+    const header = `${keys.join(",")}
+`;
+    const rows = data.map((row) => keys.map((key) => row[key]).join(",")).join("\n");
+    return header + rows;
+  };
+  const getDataKeys = (data) => {
+    const keysSet = data.map((row) => Object.keys(row)).reduce((accumulatedKeys, keys) => {
+      keys.forEach((key) => accumulatedKeys.add(key));
+      return accumulatedKeys;
+    }, /* @__PURE__ */ new Set());
+    return [...keysSet];
+  };
+  return /* @__PURE__ */ u$2("button", { className, onClick: download, children: label });
+};
+class UserFacingError extends Error {
+  constructor(headline, message) {
+    super(message);
+    this.headline = headline;
+    this.name = "UserFacingError";
+  }
+}
+const ErrorDisplay = ({ error }) => {
+  console.error(error);
+  const ref = A$1(null);
+  return /* @__PURE__ */ u$2("div", { className: "h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center flex-col", children: [
+    /* @__PURE__ */ u$2("div", { className: "text-red-700 font-bold", children: "Error" }),
+    /* @__PURE__ */ u$2("div", { children: [
+      "Oops! Something went wrong.",
+      error instanceof UserFacingError && /* @__PURE__ */ u$2(k$1, { children: [
+        " ",
+        /* @__PURE__ */ u$2(
+          "button",
+          {
+            className: "text-sm text-gray-600 hover:text-gray-300",
+            onClick: () => {
+              var _a2;
+              return (_a2 = ref.current) == null ? void 0 : _a2.showModal();
+            },
+            children: "Show details."
+          }
+        ),
+        /* @__PURE__ */ u$2("dialog", { ref, class: "modal", children: [
+          /* @__PURE__ */ u$2("div", { class: "modal-box", children: [
+            /* @__PURE__ */ u$2("form", { method: "dialog", children: /* @__PURE__ */ u$2("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
+            /* @__PURE__ */ u$2("h1", { class: "text-lg", children: error.headline }),
+            /* @__PURE__ */ u$2("p", { class: "py-4", children: error.message })
+          ] }),
+          /* @__PURE__ */ u$2("form", { method: "dialog", class: "modal-backdrop", children: /* @__PURE__ */ u$2("button", { children: "close" }) })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+const ResizeContainer = ({ children, size }) => {
+  return /* @__PURE__ */ u$2("div", { style: size, className: "bg-white", children });
+};
+const ErrorBoundary = ({ size, children }) => {
+  const [internalError] = b$1();
+  if (internalError) {
+    return /* @__PURE__ */ u$2(ResizeContainer, { size, children: /* @__PURE__ */ u$2(ErrorDisplay, { error: internalError }) });
+  }
+  return /* @__PURE__ */ u$2(k$1, { children });
+};
+const Fullscreen = () => {
+  const element = A$1(null);
+  const isFullscreen = useFullscreenStatus();
+  return /* @__PURE__ */ u$2(
+    "button",
+    {
+      ref: element,
+      onClick: async () => {
+        if (element.current) {
+          if (isFullscreen) {
+            await document.exitFullscreen();
+          } else {
+            const componentRoot = findComponentRoot(element.current);
+            if (componentRoot) {
+              await componentRoot.requestFullscreen();
+            }
+          }
+        }
+      },
+      className: `mt-0.5 iconify text-2xl ${isFullscreen ? "mdi--fullscreen-exit hover:scale-90" : "mdi--fullscreen hover:scale-110"}`,
+      title: isFullscreen ? "Exit fullscreen" : "Enter fullscreen"
+    }
+  );
+};
+function findComponentRoot(element) {
+  var _a2;
+  return (_a2 = findShadowRoot(element)) == null ? void 0 : _a2.children[0];
+}
+function findShadowRoot(element) {
+  let current = element;
+  while (current) {
+    if (current instanceof ShadowRoot) {
+      return current;
+    }
+    if (current.parentNode === null) {
+      return null;
+    }
+    current = current.parentNode;
+  }
+  return null;
+}
+function useFullscreenStatus() {
+  const [isFullscreen, setIsFullscreen] = h$1(document.fullscreenElement !== null);
+  y$1(() => {
+    const handleFullscreenChange = () => {
+      setIsFullscreen(document.fullscreenElement !== null);
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    };
+  }, []);
+  return isFullscreen;
+}
+const Info = ({ children }) => {
+  const dialogRef = A$1(null);
+  const toggleHelp = () => {
+    var _a2;
+    (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
+  };
+  return /* @__PURE__ */ u$2("div", { className: "relative", children: [
+    /* @__PURE__ */ u$2("button", { type: "button", className: "btn btn-xs", onClick: toggleHelp, children: "?" }),
+    /* @__PURE__ */ u$2("dialog", { ref: dialogRef, className: "modal modal-bottom sm:modal-middle", children: [
+      /* @__PURE__ */ u$2("div", { className: "modal-box sm:max-w-5xl", children: [
+        /* @__PURE__ */ u$2("form", { method: "dialog", children: /* @__PURE__ */ u$2("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
+        /* @__PURE__ */ u$2("div", { className: "flex flex-col", children }),
+        /* @__PURE__ */ u$2("div", { className: "modal-action", children: /* @__PURE__ */ u$2("form", { method: "dialog", children: /* @__PURE__ */ u$2("button", { className: "float-right underline text-sm hover:text-blue-700 mr-2", children: "Close" }) }) })
+      ] }),
+      /* @__PURE__ */ u$2("form", { method: "dialog", className: "modal-backdrop", children: /* @__PURE__ */ u$2("button", { children: "Helper to close when clicked outside" }) })
+    ] })
+  ] });
+};
+const InfoHeadline1 = ({ children }) => {
+  return /* @__PURE__ */ u$2("h1", { className: "text-lg font-bold", children });
+};
+const InfoHeadline2 = ({ children }) => {
+  return /* @__PURE__ */ u$2("h2", { className: "text-base font-bold mt-4", children });
+};
+const InfoParagraph = ({ children }) => {
+  return /* @__PURE__ */ u$2("p", { className: "text-justify my-1", children });
+};
+const InfoLink = ({ children, href }) => {
+  return /* @__PURE__ */ u$2("a", { className: "text-blue-600 hover:text-blue-800", href, target: "_blank", rel: "noopener noreferrer", children });
+};
+const InfoComponentCode = ({ componentName, params, lapisUrl }) => {
+  const componentCode = componentParametersToCode(componentName, params, lapisUrl);
+  const codePenData = {
+    title: "GenSpectrum dashboard component",
+    html: generateFullExampleCode(componentCode, componentName),
+    layout: "left",
+    editors: "100"
+  };
+  return /* @__PURE__ */ u$2(k$1, { children: [
+    /* @__PURE__ */ u$2(InfoHeadline2, { children: "Use this component yourself" }),
+    /* @__PURE__ */ u$2(InfoParagraph, { children: [
+      "This component was created using the following parameters:",
+      /* @__PURE__ */ u$2("div", { className: "p-4 border border-gray-200 rounded-lg overflow-x-auto", children: /* @__PURE__ */ u$2("pre", { children: /* @__PURE__ */ u$2("code", { children: componentCode }) }) })
+    ] }),
+    /* @__PURE__ */ u$2(InfoParagraph, { children: [
+      "You can add this component to your own website using the",
+      " ",
+      /* @__PURE__ */ u$2(InfoLink, { href: "https://github.com/GenSpectrum/dashboard-components", children: "GenSpectrum dashboard components library" }),
+      " ",
+      "and the code from above."
+    ] }),
+    /* @__PURE__ */ u$2(InfoParagraph, { children: /* @__PURE__ */ u$2("form", { action: "https://codepen.io/pen/define", method: "POST", target: "_blank", children: [
+      /* @__PURE__ */ u$2(
+        "input",
+        {
+          type: "hidden",
+          name: "data",
+          value: JSON.stringify(codePenData).replace(/"/g, """).replace(/'/g, "'")
+        }
+      ),
+      /* @__PURE__ */ u$2("button", { className: "text-blue-600 hover:text-blue-800", type: "submit", children: "Click here to try it out on CodePen." })
+    ] }) })
+  ] });
+};
+function componentParametersToCode(componentName, params, lapisUrl) {
+  const stringifyIfNeeded = (value) => {
+    return typeof value === "object" ? JSON.stringify(value) : value;
+  };
+  const attributes = indentLines(
+    Object.entries(params).map(([key, value]) => `${key}='${stringifyIfNeeded(value)}'`).join("\n"),
+    4
+  );
+  return `<gs-app lapis="${lapisUrl}">
+  <gs-${componentName}
+${attributes}
+  />
+</gs-app>`;
+}
+function generateFullExampleCode(componentCode, componentName) {
+  const storyBookPath = `/docs/visualization-${componentName}--docs`;
+  return `<html>
+<head>
+  <script type="module" src="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/dashboard-components.js"><\/script>
+  <link rel="stylesheet" href="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/style.css" />
+</head>
+
+<body>
+  <!-- Component documentation: https://genspectrum.github.io/dashboard-components/?path=${storyBookPath} -->
+${indentLines(componentCode, 2)}
+</body>
+</html>
+`;
+}
+function indentLines(text, numberSpaces) {
+  const spaces = " ".repeat(numberSpaces);
+  return text.split("\n").map((line) => spaces + line).join("\n");
+}
+const LoadingDisplay = () => {
+  return /* @__PURE__ */ u$2(
+    "div",
+    {
+      "aria-label": "Loading",
+      className: "h-full w-full border-2 border-gray-100 rounded-md flex justify-center items-center",
+      children: /* @__PURE__ */ u$2("div", { className: "loading loading-spinner loading-md text-neutral-500" })
+    }
+  );
+};
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -27188,8 +27431,8 @@ const Dropdown = ({ children, buttonTitle, placement }) => {
   const toggle = () => {
     setShowContent(!showContent);
   };
-  return /* @__PURE__ */ u$2("div", { children: [
-    /* @__PURE__ */ u$2("button", { type: "button", className: "btn btn-xs whitespace-nowrap", onClick: toggle, ref: referenceRef, children: buttonTitle }),
+  return /* @__PURE__ */ u$2(k$1, { children: [
+    /* @__PURE__ */ u$2("button", { type: "button", className: "btn btn-xs whitespace-nowrap w-full", onClick: toggle, ref: referenceRef, children: buttonTitle }),
     /* @__PURE__ */ u$2("div", { ref: floatingRef, className: `${dropdownClass} ${showContent ? "" : "hidden"}`, children })
   ] });
 };
@@ -27198,52 +27441,294 @@ const CheckboxSelector = ({
   label,
   setItems
 }) => {
-  return /* @__PURE__ */ u$2(Dropdown, { buttonTitle: label, placement: "bottom-start", children: /* @__PURE__ */ u$2("ul", { children: items.map((item, index2) => /* @__PURE__ */ u$2("li", { className: "flex flex-row items-center", children: /* @__PURE__ */ u$2("label", { children: [
+  return /* @__PURE__ */ u$2(Dropdown, { buttonTitle: label, placement: "bottom-start", children: [
     /* @__PURE__ */ u$2(
-      "input",
+      "button",
       {
-        className: "mr-2",
-        type: "checkbox",
-        id: `item-${index2}`,
-        checked: item.checked,
-        onChange: () => {
-          const newItems = items.map(
-            (item2, i3) => i3 === index2 ? { ...item2, checked: !item2.checked } : item2
-          );
+        className: "btn btn-xs btn-ghost",
+        onClick: () => {
+          const newItems = items.map((item) => ({ ...item, checked: true }));
           setItems(newItems);
-        }
+        },
+        children: "Select all"
       }
     ),
-    item.label
-  ] }) }, item.label)) }) });
-};
-const ReferenceGenomeContext = G$1({ nucleotideSequences: [], genes: [] });
-const getSegmentSelectorLabel = (displayedSegments, prefix) => {
-  const allSelectedSelected = displayedSegments.filter((segment) => segment.checked).map((segment) => segment.segment);
-  if (allSelectedSelected.length === 0) {
-    return `${prefix}none`;
-  }
-  if (displayedSegments.length === allSelectedSelected.length) {
-    return `${prefix}all`;
-  }
-  return prefix + allSelectedSelected.join(", ");
-};
-const SegmentSelector = ({
+    /* @__PURE__ */ u$2(
+      "button",
+      {
+        className: "btn btn-xs btn-ghost",
+        onClick: () => {
+          const newItems = items.map((item) => ({ ...item, checked: false }));
+          setItems(newItems);
+        },
+        children: "Select none"
+      }
+    ),
+    /* @__PURE__ */ u$2("div", { className: "divider mt-0 mb-0" }),
+    /* @__PURE__ */ u$2("ul", { children: items.map((item, index2) => /* @__PURE__ */ u$2("li", { className: "flex flex-row items-center", children: /* @__PURE__ */ u$2("label", { children: [
+      /* @__PURE__ */ u$2(
+        "input",
+        {
+          className: "mr-2",
+          type: "checkbox",
+          id: `item-${index2}`,
+          checked: item.checked,
+          onChange: () => {
+            const newItems = items.map(
+              (item2, i3) => i3 === index2 ? { ...item2, checked: !item2.checked } : item2
+            );
+            setItems(newItems);
+          }
+        }
+      ),
+      item.label
+    ] }) }, item.label)) })
+  ] });
+};
+const MutationTypeSelector = ({
+  displayedMutationTypes,
+  setDisplayedMutationTypes
+}) => {
+  return /* @__PURE__ */ u$2("div", { className: "w-[6rem]", children: /* @__PURE__ */ u$2(
+    CheckboxSelector,
+    {
+      items: displayedMutationTypes,
+      label: getMutationTypesSelectorLabel(displayedMutationTypes),
+      setItems: (items) => setDisplayedMutationTypes(items)
+    }
+  ) });
+};
+const getMutationTypesSelectorLabel = (displayedMutationTypes) => {
+  const checkedLabels = displayedMutationTypes.filter((displayedMutationType) => displayedMutationType.checked);
+  if (checkedLabels.length === 0) {
+    return `No types`;
+  }
+  if (displayedMutationTypes.length === checkedLabels.length) {
+    return displayedMutationTypes.map((type) => {
+      switch (type.type) {
+        case "substitution":
+          return "Subst.";
+        case "deletion":
+          return "Del.";
+      }
+    }).join(", ");
+  }
+  return checkedLabels.map((type) => {
+    return type.label;
+  }).join(", ");
+};
+const NoDataDisplay = () => {
+  return /* @__PURE__ */ u$2("div", { className: "h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center", children: /* @__PURE__ */ u$2("div", { children: "No data available." }) });
+};
+const MinMaxRangeSlider = ({
+  min: min2,
+  max: max2,
+  setMin,
+  setMax,
+  rangeMin = 0,
+  rangeMax = 100,
+  step = 0.1
+}) => {
+  const sliderColor = "#C6C6C6";
+  const rangeColor = "#387bbe";
+  const [zIndexTo, setZIndexTo] = h$1(0);
+  const onMinChange = (event) => {
+    const input = event.target;
+    const minValue = Number(input.value);
+    if (minValue > max2) {
+      setMax(minValue);
+      setMin(minValue);
+    } else {
+      setMin(minValue);
+    }
+  };
+  const onMaxChange = (event) => {
+    const input = event.target;
+    const maxValue = Number(input.value);
+    if (maxValue <= 0) {
+      setZIndexTo(2);
+    } else {
+      setZIndexTo(0);
+    }
+    if (maxValue < min2) {
+      setMin(maxValue);
+      setMax(maxValue);
+    } else {
+      setMax(maxValue);
+    }
+  };
+  const background = `
+        linear-gradient(
+            to right,
+            ${sliderColor} 0%,
+            ${sliderColor} ${min2}%,
+            ${rangeColor} ${min2}%,
+            ${rangeColor} ${max2}%,
+            ${sliderColor} ${max2}%,
+            ${sliderColor} 100%)
+    `;
+  return /* @__PURE__ */ u$2("div", { class: "my-4 relative w-full h-full", children: [
+    /* @__PURE__ */ u$2(
+      "input",
+      {
+        id: "fromSlider",
+        type: "range",
+        value: min2,
+        onInput: onMinChange,
+        min: rangeMin,
+        max: rangeMax,
+        step,
+        style: { background, zIndex: 1, height: 0 }
+      }
+    ),
+    /* @__PURE__ */ u$2(
+      "input",
+      {
+        id: "toSlider",
+        type: "range",
+        value: max2,
+        min: rangeMin,
+        max: rangeMax,
+        step,
+        onInput: onMaxChange,
+        style: { background, zIndex: zIndexTo }
+      }
+    )
+  ] });
+};
+const percentageInRange = (percentage) => {
+  return percentage <= 100 && percentage >= 0;
+};
+const PercentInput = ({ percentage, setPercentage }) => {
+  const [internalPercentage, setInternalPercentage] = h$1(percentage);
+  y$1(() => {
+    setInternalPercentage(percentage);
+  }, [percentage]);
+  const handleInputChange = (event) => {
+    const input = event.target;
+    const value = Number(input.value);
+    if (value === internalPercentage || input.value === "") {
+      return;
+    }
+    const inRange2 = percentageInRange(value);
+    if (inRange2) {
+      setPercentage(value);
+    }
+    setInternalPercentage(value);
+  };
+  const isError = !percentageInRange(internalPercentage);
+  return /* @__PURE__ */ u$2("label", { className: `input input-bordered flex items-center gap-2 w-32 ${isError ? "input-error" : ""}`, children: [
+    /* @__PURE__ */ u$2(
+      "input",
+      {
+        type: "number",
+        step: 0.1,
+        min: 0,
+        max: 100,
+        value: internalPercentage,
+        onInput: handleInputChange,
+        lang: "en",
+        className: `grow w-16`
+      }
+    ),
+    "%"
+  ] });
+};
+function useUpdateExternalValueInIntervals(setExternalValue, updateIntervalInMs, internalValue) {
+  const hasMounted = A$1(false);
+  y$1(() => {
+    if (!hasMounted.current) {
+      hasMounted.current = true;
+      return;
+    }
+    const minTimeout = setTimeout(() => {
+      setExternalValue(internalValue);
+    }, updateIntervalInMs);
+    return () => clearTimeout(minTimeout);
+  }, [internalValue]);
+}
+const ProportionSelector = ({
+  proportionInterval,
+  setMinProportion,
+  setMaxProportion
+}) => {
+  const updateIntervalInMs = 300;
+  const { min: minProportion, max: maxProportion } = proportionInterval;
+  const [internalMinProportion, setInternalMinProportion] = h$1(minProportion);
+  const [internalMaxProportion, setInternalMaxProportion] = h$1(maxProportion);
+  useUpdateExternalValueInIntervals(setMinProportion, updateIntervalInMs, internalMinProportion);
+  const updateMinPercentage = (minPercentage) => {
+    const newMinProportion = minPercentage / 100;
+    setInternalMinProportion(newMinProportion);
+  };
+  useUpdateExternalValueInIntervals(setMaxProportion, updateIntervalInMs, internalMaxProportion);
+  const updateMaxPercentage = (maxPercentage) => {
+    const newMaxProportion = maxPercentage / 100;
+    setInternalMaxProportion(newMaxProportion);
+  };
+  return /* @__PURE__ */ u$2("div", { class: "flex flex-col w-64 mb-2", children: [
+    /* @__PURE__ */ u$2("div", { class: "flex items-center ", children: [
+      /* @__PURE__ */ u$2(PercentInput, { percentage: internalMinProportion * 100, setPercentage: updateMinPercentage }),
+      /* @__PURE__ */ u$2("div", { class: "m-2", children: "-" }),
+      /* @__PURE__ */ u$2(PercentInput, { percentage: internalMaxProportion * 100, setPercentage: updateMaxPercentage })
+    ] }),
+    /* @__PURE__ */ u$2("div", { class: "my-1", children: /* @__PURE__ */ u$2(
+      MinMaxRangeSlider,
+      {
+        min: internalMinProportion * 100,
+        max: internalMaxProportion * 100,
+        setMin: updateMinPercentage,
+        setMax: updateMaxPercentage
+      }
+    ) })
+  ] });
+};
+const ProportionSelectorDropdown = ({
+  proportionInterval,
+  setMinProportion,
+  setMaxProportion
+}) => {
+  const label = `${(proportionInterval.min * 100).toFixed(1)}% - ${(proportionInterval.max * 100).toFixed(1)}%`;
+  return /* @__PURE__ */ u$2("div", { className: "w-44", children: /* @__PURE__ */ u$2(Dropdown, { buttonTitle: `Proportion ${label}`, placement: "bottom-start", children: /* @__PURE__ */ u$2(
+    ProportionSelector,
+    {
+      proportionInterval,
+      setMinProportion,
+      setMaxProportion
+    }
+  ) }) });
+};
+const ReferenceGenomeContext = G$1({ nucleotideSequences: [], genes: [] });
+const SegmentSelector = ({
   displayedSegments,
-  setDisplayedSegments,
-  prefix
+  setDisplayedSegments
 }) => {
   if (displayedSegments.length <= 1) {
     return null;
   }
-  return /* @__PURE__ */ u$2(
+  return /* @__PURE__ */ u$2("div", { className: "w-24", children: /* @__PURE__ */ u$2(
     CheckboxSelector,
     {
       items: displayedSegments,
-      label: getSegmentSelectorLabel(displayedSegments, prefix || "Segments: "),
+      label: getSegmentSelectorLabel(displayedSegments),
       setItems: (items) => setDisplayedSegments(items)
     }
-  );
+  ) });
+};
+const getSegmentSelectorLabel = (displayedSegments) => {
+  const allSelectedSelected = displayedSegments.filter((segment) => segment.checked).map((segment) => segment.segment);
+  if (allSelectedSelected.length === 0) {
+    return `No segments`;
+  }
+  if (displayedSegments.length === allSelectedSelected.length) {
+    return `All segments`;
+  }
+  const longestDisplayString = `All segments`;
+  const allSelectedSelectedString = allSelectedSelected.join(", ");
+  if (longestDisplayString.length >= allSelectedSelectedString.length) {
+    return allSelectedSelectedString;
+  }
+  return `${allSelectedSelected.length} ${allSelectedSelected.length === 1 ? "segment" : "segments"}`;
 };
 function useDisplayedSegments(sequenceType) {
   const referenceGenome = x$1(ReferenceGenomeContext);
@@ -27254,517 +27739,102 @@ function useDisplayedSegments(sequenceType) {
   }));
   return h$1(displayedSegments);
 }
-const CsvDownloadButton = ({
-  label = "Download",
-  filename = "data.csv",
-  getData,
-  className
-}) => {
-  const download = () => {
-    const content = getDownloadContent();
-    const blob = new Blob([content], { type: "text/csv" });
-    const url = URL.createObjectURL(blob);
-    const a2 = document.createElement("a");
-    a2.href = url;
-    a2.download = filename;
-    a2.click();
-    URL.revokeObjectURL(url);
-  };
-  const getDownloadContent = () => {
-    const data = getData();
-    const keys = getDataKeys(data);
-    const header = `${keys.join(",")}
-`;
-    const rows = data.map((row) => keys.map((key) => row[key]).join(",")).join("\n");
-    return header + rows;
-  };
-  const getDataKeys = (data) => {
-    const keysSet = data.map((row) => Object.keys(row)).reduce((accumulatedKeys, keys) => {
-      keys.forEach((key) => accumulatedKeys.add(key));
-      return accumulatedKeys;
-    }, /* @__PURE__ */ new Set());
-    return [...keysSet];
+const Tabs = ({ tabs, toolbar }) => {
+  const [activeTab, setActiveTab] = h$1(tabs[0].title);
+  const [heightOfTabs, setHeightOfTabs] = h$1("3rem");
+  const tabRef = A$1(null);
+  const updateHeightOfTabs = () => {
+    if (tabRef.current) {
+      const heightOfTabs2 = tabRef.current.getBoundingClientRect().height;
+      setHeightOfTabs(`${heightOfTabs2}px`);
+    }
   };
-  return /* @__PURE__ */ u$2("button", { className, onClick: download, children: label });
-};
-class UserFacingError extends Error {
-  constructor(headline, message) {
-    super(message);
-    this.headline = headline;
-    this.name = "UserFacingError";
-  }
-}
-const ErrorDisplay = ({ error }) => {
-  console.error(error);
-  const ref = A$1(null);
-  return /* @__PURE__ */ u$2("div", { className: "h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center flex-col", children: [
-    /* @__PURE__ */ u$2("div", { className: "text-red-700 font-bold", children: "Error" }),
-    /* @__PURE__ */ u$2("div", { children: [
-      "Oops! Something went wrong.",
-      error instanceof UserFacingError && /* @__PURE__ */ u$2(k$1, { children: [
-        " ",
-        /* @__PURE__ */ u$2(
-          "button",
-          {
-            className: "text-sm text-gray-600 hover:text-gray-300",
-            onClick: () => {
-              var _a2;
-              return (_a2 = ref.current) == null ? void 0 : _a2.showModal();
-            },
-            children: "Show details."
-          }
-        ),
-        /* @__PURE__ */ u$2("dialog", { ref, class: "modal", children: [
-          /* @__PURE__ */ u$2("div", { class: "modal-box", children: [
-            /* @__PURE__ */ u$2("form", { method: "dialog", children: /* @__PURE__ */ u$2("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
-            /* @__PURE__ */ u$2("h1", { class: "text-lg", children: error.headline }),
-            /* @__PURE__ */ u$2("p", { class: "py-4", children: error.message })
-          ] }),
-          /* @__PURE__ */ u$2("form", { method: "dialog", class: "modal-backdrop", children: /* @__PURE__ */ u$2("button", { children: "close" }) })
-        ] })
-      ] })
-    ] })
-  ] });
-};
-const ResizeContainer = ({ children, size }) => {
-  return /* @__PURE__ */ u$2("div", { style: size, className: "bg-white", children });
-};
-const ErrorBoundary = ({ size, children }) => {
-  const [internalError] = b$1();
-  if (internalError) {
-    return /* @__PURE__ */ u$2(ResizeContainer, { size, children: /* @__PURE__ */ u$2(ErrorDisplay, { error: internalError }) });
-  }
-  return /* @__PURE__ */ u$2(k$1, { children });
-};
-const Fullscreen = () => {
-  const element = A$1(null);
-  const isFullscreen = useFullscreenStatus();
-  return /* @__PURE__ */ u$2(
-    "button",
-    {
-      ref: element,
-      onClick: async () => {
-        if (element.current) {
-          if (isFullscreen) {
-            await document.exitFullscreen();
-          } else {
-            const componentRoot = findComponentRoot(element.current);
-            if (componentRoot) {
-              await componentRoot.requestFullscreen();
-            }
-          }
-        }
-      },
-      className: `mt-0.5 iconify text-2xl ${isFullscreen ? "mdi--fullscreen-exit hover:scale-90" : "mdi--fullscreen hover:scale-110"}`,
-      title: isFullscreen ? "Exit fullscreen" : "Enter fullscreen"
-    }
-  );
-};
-function findComponentRoot(element) {
-  var _a2;
-  return (_a2 = findShadowRoot(element)) == null ? void 0 : _a2.children[0];
-}
-function findShadowRoot(element) {
-  let current = element;
-  while (current) {
-    if (current instanceof ShadowRoot) {
-      return current;
-    }
-    if (current.parentNode === null) {
-      return null;
-    }
-    current = current.parentNode;
-  }
-  return null;
-}
-function useFullscreenStatus() {
-  const [isFullscreen, setIsFullscreen] = h$1(document.fullscreenElement !== null);
   y$1(() => {
-    const handleFullscreenChange = () => {
-      setIsFullscreen(document.fullscreenElement !== null);
-    };
-    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    updateHeightOfTabs();
+    window.addEventListener("resize", updateHeightOfTabs);
     return () => {
-      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+      window.removeEventListener("resize", updateHeightOfTabs);
     };
   }, []);
-  return isFullscreen;
-}
-const Info = ({ children }) => {
-  const dialogRef = A$1(null);
-  const toggleHelp = () => {
-    var _a2;
-    (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
-  };
-  return /* @__PURE__ */ u$2("div", { className: "relative", children: [
-    /* @__PURE__ */ u$2("button", { type: "button", className: "btn btn-xs", onClick: toggleHelp, children: "?" }),
-    /* @__PURE__ */ u$2("dialog", { ref: dialogRef, className: "modal modal-bottom sm:modal-middle", children: [
-      /* @__PURE__ */ u$2("div", { className: "modal-box sm:max-w-5xl", children: [
-        /* @__PURE__ */ u$2("form", { method: "dialog", children: /* @__PURE__ */ u$2("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2", children: "✕" }) }),
-        /* @__PURE__ */ u$2("div", { className: "flex flex-col", children }),
-        /* @__PURE__ */ u$2("div", { className: "modal-action", children: /* @__PURE__ */ u$2("form", { method: "dialog", children: /* @__PURE__ */ u$2("button", { className: "float-right underline text-sm hover:text-blue-700 mr-2", children: "Close" }) }) })
-      ] }),
-      /* @__PURE__ */ u$2("form", { method: "dialog", className: "modal-backdrop", children: /* @__PURE__ */ u$2("button", { children: "Helper to close when clicked outside" }) })
-    ] })
-  ] });
-};
-const InfoHeadline1 = ({ children }) => {
-  return /* @__PURE__ */ u$2("h1", { className: "text-lg font-bold", children });
-};
-const InfoHeadline2 = ({ children }) => {
-  return /* @__PURE__ */ u$2("h2", { className: "text-base font-bold mt-4", children });
-};
-const InfoParagraph = ({ children }) => {
-  return /* @__PURE__ */ u$2("p", { className: "text-justify my-1", children });
-};
-const InfoLink = ({ children, href }) => {
-  return /* @__PURE__ */ u$2("a", { className: "text-blue-600 hover:text-blue-800", href, target: "_blank", rel: "noopener noreferrer", children });
-};
-const InfoComponentCode = ({ componentName, params, lapisUrl }) => {
-  const componentCode = componentParametersToCode(componentName, params, lapisUrl);
-  const codePenData = {
-    title: "GenSpectrum dashboard component",
-    html: generateFullExampleCode(componentCode, componentName),
-    layout: "left",
-    editors: "100"
-  };
-  return /* @__PURE__ */ u$2(k$1, { children: [
-    /* @__PURE__ */ u$2(InfoHeadline2, { children: "Use this component yourself" }),
-    /* @__PURE__ */ u$2(InfoParagraph, { children: [
-      "This component was created using the following parameters:",
-      /* @__PURE__ */ u$2("div", { className: "p-4 border border-gray-200 rounded-lg overflow-x-auto", children: /* @__PURE__ */ u$2("pre", { children: /* @__PURE__ */ u$2("code", { children: componentCode }) }) })
-    ] }),
-    /* @__PURE__ */ u$2(InfoParagraph, { children: [
-      "You can add this component to your own website using the",
-      " ",
-      /* @__PURE__ */ u$2(InfoLink, { href: "https://github.com/GenSpectrum/dashboard-components", children: "GenSpectrum dashboard components library" }),
-      " ",
-      "and the code from above."
+  const tabElements = /* @__PURE__ */ u$2("div", { className: "flex flex-row", children: tabs.map((tab) => {
+    return /* @__PURE__ */ u$2(k$1, { children: /* @__PURE__ */ u$2(
+      "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$2("div", { className: "h-full w-full", children: [
+    /* @__PURE__ */ u$2("div", { ref: tabRef, className: "flex flex-row justify-between flex-wrap", children: [
+      tabElements,
+      toolbar && /* @__PURE__ */ u$2("div", { className: "py-2 flex flex-wrap gap-y-1", children: toolbarElement })
     ] }),
-    /* @__PURE__ */ u$2(InfoParagraph, { children: /* @__PURE__ */ u$2("form", { action: "https://codepen.io/pen/define", method: "POST", target: "_blank", children: [
-      /* @__PURE__ */ u$2(
-        "input",
-        {
-          type: "hidden",
-          name: "data",
-          value: JSON.stringify(codePenData).replace(/"/g, "&quot;").replace(/'/g, "&apos;")
-        }
-      ),
-      /* @__PURE__ */ u$2("button", { className: "text-blue-600 hover:text-blue-800", type: "submit", children: "Click here to try it out on CodePen." })
-    ] }) })
+    /* @__PURE__ */ u$2(
+      "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$2("div", { className: "h-full overflow-auto", hidden: activeTab !== tab.title, children: tab.content }, tab.title))
+      }
+    )
   ] });
 };
-function componentParametersToCode(componentName, params, lapisUrl) {
-  const stringifyIfNeeded = (value) => {
-    return typeof value === "object" ? JSON.stringify(value) : value;
-  };
-  const attributes = indentLines(
-    Object.entries(params).map(([key, value]) => `${key}='${stringifyIfNeeded(value)}'`).join("\n"),
-    4
-  );
-  return `<gs-app lapis="${lapisUrl}">
-  <gs-${componentName}
-${attributes}
-  />
-</gs-app>`;
-}
-function generateFullExampleCode(componentCode, componentName) {
-  const storyBookPath = `/docs/visualization-${componentName}--docs`;
-  return `<html>
-<head>
-  <script type="module" src="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/dashboard-components.js"><\/script>
-  <link rel="stylesheet" href="https://unpkg.com/@genspectrum/dashboard-components@latest/dist/style.css" />
-</head>
-
-<body>
-  <!-- Component documentation: https://genspectrum.github.io/dashboard-components/?path=${storyBookPath} -->
-${indentLines(componentCode, 2)}
-</body>
-</html>
-`;
-}
-function indentLines(text, numberSpaces) {
-  const spaces = " ".repeat(numberSpaces);
-  return text.split("\n").map((line) => spaces + line).join("\n");
+function useQuery(fetchDataCallback, dependencies) {
+  const [data, setData] = h$1(null);
+  const [error, setError] = h$1(null);
+  const [isLoading, setIsLoading] = h$1(true);
+  y$1(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+      try {
+        const result = await fetchDataCallback();
+        setData(result);
+        setError(null);
+      } catch (error2) {
+        setError(error2);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchData();
+  }, [JSON.stringify(dependencies)]);
+  return { data, error, isLoading };
 }
-const LoadingDisplay = () => {
-  return /* @__PURE__ */ u$2("div", { "aria-label": "Loading", className: "h-full w-full skeleton" });
+const MutationComparison = ({ width, height, ...innerProps }) => {
+  const size = { height, width };
+  return /* @__PURE__ */ u$2(ErrorBoundary, { size, children: /* @__PURE__ */ u$2(ResizeContainer, { size, children: /* @__PURE__ */ u$2(MutationComparisonInner, { ...innerProps }) }) });
 };
-const MutationTypeSelector = ({
-  displayedMutationTypes,
-  setDisplayedMutationTypes
+const MutationComparisonInner = ({
+  lapisFilters,
+  sequenceType,
+  views,
+  pageSize
 }) => {
-  const checkedLabels = displayedMutationTypes.filter((type) => type.checked).map((type) => type.label);
-  const mutationTypesSelectorLabel = `Types: ${checkedLabels.length > 0 ? checkedLabels.join(", ") : "None"}`;
+  const lapis = x$1(LapisUrlContext);
+  const { data, error, isLoading } = useQuery(async () => {
+    return queryMutationData(lapisFilters, sequenceType, lapis);
+  }, [lapisFilters, sequenceType, lapis]);
+  if (isLoading) {
+    return /* @__PURE__ */ u$2(LoadingDisplay, {});
+  }
+  if (error !== null) {
+    return /* @__PURE__ */ u$2(ErrorDisplay, { error });
+  }
+  if (data === null) {
+    return /* @__PURE__ */ u$2(NoDataDisplay, {});
+  }
   return /* @__PURE__ */ u$2(
-    CheckboxSelector,
+    MutationComparisonTabs,
     {
-      items: displayedMutationTypes,
-      label: mutationTypesSelectorLabel,
-      setItems: (items) => setDisplayedMutationTypes(items)
-    }
-  );
-};
-const NoDataDisplay = () => {
-  return /* @__PURE__ */ u$2("div", { className: "h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center", children: /* @__PURE__ */ u$2("div", { children: "No data available." }) });
-};
-const MinMaxRangeSlider = ({
-  min: min2,
-  max: max2,
-  setMin,
-  setMax,
-  rangeMin = 0,
-  rangeMax = 100,
-  step = 0.1
-}) => {
-  const sliderColor = "#C6C6C6";
-  const rangeColor = "#387bbe";
-  const [zIndexTo, setZIndexTo] = h$1(0);
-  const onMinChange = (event) => {
-    const input = event.target;
-    const minValue = Number(input.value);
-    if (minValue > max2) {
-      setMax(minValue);
-      setMin(minValue);
-    } else {
-      setMin(minValue);
-    }
-  };
-  const onMaxChange = (event) => {
-    const input = event.target;
-    const maxValue = Number(input.value);
-    if (maxValue <= 0) {
-      setZIndexTo(2);
-    } else {
-      setZIndexTo(0);
-    }
-    if (maxValue < min2) {
-      setMin(maxValue);
-      setMax(maxValue);
-    } else {
-      setMax(maxValue);
-    }
-  };
-  const background = `
-        linear-gradient(
-            to right,
-            ${sliderColor} 0%,
-            ${sliderColor} ${min2}%,
-            ${rangeColor} ${min2}%,
-            ${rangeColor} ${max2}%,
-            ${sliderColor} ${max2}%,
-            ${sliderColor} 100%)
-    `;
-  return /* @__PURE__ */ u$2("div", { class: "my-4 relative w-full h-full", children: [
-    /* @__PURE__ */ u$2(
-      "input",
-      {
-        id: "fromSlider",
-        type: "range",
-        value: min2,
-        onInput: onMinChange,
-        min: rangeMin,
-        max: rangeMax,
-        step,
-        style: { background, zIndex: 1, height: 0 }
-      }
-    ),
-    /* @__PURE__ */ u$2(
-      "input",
-      {
-        id: "toSlider",
-        type: "range",
-        value: max2,
-        min: rangeMin,
-        max: rangeMax,
-        step,
-        onInput: onMaxChange,
-        style: { background, zIndex: zIndexTo }
-      }
-    )
-  ] });
-};
-const percentageInRange = (percentage) => {
-  return percentage <= 100 && percentage >= 0;
-};
-const PercentInput = ({ percentage, setPercentage }) => {
-  const [internalPercentage, setInternalPercentage] = h$1(percentage);
-  y$1(() => {
-    setInternalPercentage(percentage);
-  }, [percentage]);
-  const handleInputChange = (event) => {
-    const input = event.target;
-    const value = Number(input.value);
-    const inRange2 = percentageInRange(value);
-    if (inRange2) {
-      setPercentage(value);
-    }
-    setInternalPercentage(value);
-  };
-  const isError = !percentageInRange(internalPercentage);
-  return /* @__PURE__ */ u$2("label", { className: `input input-bordered flex items-center gap-2 w-32 ${isError ? "input-error" : ""}`, children: [
-    /* @__PURE__ */ u$2(
-      "input",
-      {
-        type: "number",
-        step: 0.1,
-        min: 0,
-        max: 100,
-        value: internalPercentage,
-        onInput: handleInputChange,
-        lang: "en",
-        className: `grow w-16`
-      }
-    ),
-    "%"
-  ] });
-};
-const ProportionSelector = ({
-  proportionInterval,
-  setMinProportion,
-  setMaxProportion
-}) => {
-  const { min: minProportion, max: maxProportion } = proportionInterval;
-  return /* @__PURE__ */ u$2("div", { class: "flex flex-col w-64 mb-2", children: [
-    /* @__PURE__ */ u$2("div", { class: "flex items-center ", children: [
-      /* @__PURE__ */ u$2(
-        PercentInput,
-        {
-          percentage: minProportion * 100,
-          setPercentage: (percentage) => setMinProportion(percentage / 100)
-        }
-      ),
-      /* @__PURE__ */ u$2("div", { class: "m-2", children: "-" }),
-      /* @__PURE__ */ u$2(
-        PercentInput,
-        {
-          percentage: maxProportion * 100,
-          setPercentage: (percentage) => setMaxProportion(percentage / 100)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ u$2("div", { class: "my-1", children: /* @__PURE__ */ u$2(
-      MinMaxRangeSlider,
-      {
-        min: minProportion * 100,
-        max: maxProportion * 100,
-        setMin: (percentage) => setMinProportion(percentage / 100),
-        setMax: (percentage) => setMaxProportion(percentage / 100)
-      }
-    ) })
-  ] });
-};
-const ProportionSelectorDropdown = ({
-  proportionInterval,
-  setMinProportion,
-  setMaxProportion
-}) => {
-  const label = `${(proportionInterval.min * 100).toFixed(1)}% - ${(proportionInterval.max * 100).toFixed(1)}%`;
-  return /* @__PURE__ */ u$2(Dropdown, { buttonTitle: `Proportion ${label}`, placement: "bottom-start", children: /* @__PURE__ */ u$2(
-    ProportionSelector,
-    {
-      proportionInterval,
-      setMinProportion,
-      setMaxProportion
-    }
-  ) });
-};
-const Tabs = ({ tabs, toolbar }) => {
-  const [activeTab, setActiveTab] = h$1(tabs[0].title);
-  const [heightOfTabs, setHeightOfTabs] = h$1("3rem");
-  const tabRef = A$1(null);
-  const updateHeightOfTabs = () => {
-    if (tabRef.current) {
-      const heightOfTabs2 = tabRef.current.getBoundingClientRect().height;
-      setHeightOfTabs(`${heightOfTabs2}px`);
-    }
-  };
-  y$1(() => {
-    updateHeightOfTabs();
-    window.addEventListener("resize", updateHeightOfTabs);
-    return () => {
-      window.removeEventListener("resize", updateHeightOfTabs);
-    };
-  }, []);
-  const tabElements = /* @__PURE__ */ u$2("div", { className: "flex flex-row", children: tabs.map((tab) => {
-    return /* @__PURE__ */ u$2(k$1, { children: /* @__PURE__ */ u$2(
-      "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$2("div", { className: "h-full w-full", children: [
-    /* @__PURE__ */ u$2("div", { ref: tabRef, className: "flex flex-row justify-between flex-wrap", children: [
-      tabElements,
-      toolbar && /* @__PURE__ */ u$2("div", { className: "py-2 flex flex-wrap gap-y-1", children: toolbarElement })
-    ] }),
-    /* @__PURE__ */ u$2(
-      "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$2("div", { className: "h-full overflow-auto", hidden: activeTab !== tab.title, children: tab.content }, tab.title))
-      }
-    )
-  ] });
-};
-function useQuery(fetchDataCallback, dependencies = []) {
-  const [data, setData] = h$1(null);
-  const [error, setError] = h$1(null);
-  const [isLoading, setIsLoading] = h$1(true);
-  y$1(() => {
-    const fetchData = async () => {
-      setIsLoading(true);
-      try {
-        const result = await fetchDataCallback();
-        setData(result);
-        setError(null);
-      } catch (error2) {
-        setError(error2);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchData();
-  }, [JSON.stringify(dependencies)]);
-  return { data, error, isLoading };
-}
-const MutationComparison = ({ width, height, ...innerProps }) => {
-  const size = { height, width };
-  return /* @__PURE__ */ u$2(ErrorBoundary, { size, children: /* @__PURE__ */ u$2(ResizeContainer, { size, children: /* @__PURE__ */ u$2(MutationComparisonInner, { ...innerProps }) }) });
-};
-const MutationComparisonInner = ({
-  lapisFilters,
-  sequenceType,
-  views,
-  pageSize
-}) => {
-  const lapis = x$1(LapisUrlContext);
-  const { data, error, isLoading } = useQuery(async () => {
-    return queryMutationData(lapisFilters, sequenceType, lapis);
-  }, [lapisFilters, sequenceType, lapis]);
-  if (isLoading) {
-    return /* @__PURE__ */ u$2(LoadingDisplay, {});
-  }
-  if (error !== null) {
-    return /* @__PURE__ */ u$2(ErrorDisplay, { error });
-  }
-  if (data === null) {
-    return /* @__PURE__ */ u$2(NoDataDisplay, {});
-  }
-  return /* @__PURE__ */ u$2(
-    MutationComparisonTabs,
-    {
-      data: data.mutationData,
-      sequenceType,
-      views,
-      pageSize
+      data: data.mutationData,
+      sequenceType,
+      views,
+      pageSize
     }
   );
 };
@@ -28479,14 +28549,47 @@ html {
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
-.alert {
-  display: grid;
+.container {
   width: 100%;
-  grid-auto-flow: row;
-  align-content: flex-start;
-  align-items: center;
-  justify-items: center;
-  gap: 1rem;
+}
+@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;
+  }
+}
+.alert {
+  display: grid;
+  width: 100%;
+  grid-auto-flow: row;
+  align-content: flex-start;
+  align-items: center;
+  justify-items: center;
+  gap: 1rem;
   text-align: center;
   border-radius: var(--rounded-box, 1rem);
   border-width: 1px;
@@ -28520,6 +28623,15 @@ html {
     color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
   }
 
+  .menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
+.menu li > details > summary:active {
+    --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)));
+  }
+
   .tab:hover {
     --tw-text-opacity: 1;
   }
@@ -28613,6 +28725,25 @@ html {
   container-type: inline-size;
   grid-template-columns: auto 1fr;
 }
+.divider {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  height: 1rem;
+  white-space: nowrap;
+}
+.divider:before,
+  .divider:after {
+  height: 0.125rem;
+  width: 100%;
+  flex-grow: 1;
+  --tw-content: '';
+  content: var(--tw-content);
+  background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
+}
 .dropdown {
   position: relative;
   display: inline-block;
@@ -29129,6 +29260,11 @@ input.tab:checked + .tab-content,
   --alert-bg: var(--fallback-er,oklch(var(--er)/1));
   --alert-bg-mix: var(--fallback-b1,oklch(var(--b1)/1));
 }
+.btm-nav > *:where(.active) {
+  border-top-width: 2px;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+}
 .btm-nav > *.disabled,
     .btm-nav > *[disabled] {
   pointer-events: none;
@@ -29281,6 +29417,9 @@ input.tab:checked + .tab-content,
     background-position-y: 0;
   }
 }
+.divider:not(:empty) {
+  gap: 1rem;
+}
 .dropdown.dropdown-open .dropdown-content,
 .dropdown:focus .dropdown-content,
 .dropdown:focus-within .dropdown-content {
@@ -29396,6 +29535,14 @@ input.tab:checked + .tab-content,
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
+.menu li > details > summary:active {
+  --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)));
+}
 .mockup-phone .display {
   overflow: hidden;
   border-radius: 40px;
@@ -29631,30 +29778,6 @@ input.tab:checked + .tab-content,
   background-position: calc(0% + 12px) calc(1px + 50%),
     calc(0% + 16px) calc(1px + 50%);
 }
-.skeleton {
-  border-radius: var(--rounded-box, 1rem);
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
-  will-change: background-position;
-  animation: skeleton 1.8s ease-in-out infinite;
-  background-image: linear-gradient(
-    105deg,
-    transparent 0%,
-    transparent 40%,
-    var(--fallback-b1,oklch(var(--b1)/1)) 50%,
-    transparent 60%,
-    transparent 100%
-  );
-  background-size: 200% auto;
-  background-repeat: no-repeat;
-  background-position-x: -50%;
-}
-@media (prefers-reduced-motion) {
-
-  .skeleton {
-    animation-duration: 15s;
-  }
-}
 @keyframes skeleton {
 
   from {
@@ -29892,6 +30015,12 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
+.table-zebra tr.active,
+    .table-zebra tr.active:nth-child(even),
+    .table-zebra-zebra tbody tr:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
+}
 .table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
   border-bottom-width: 1px;
   --tw-border-opacity: 1;
@@ -29964,6 +30093,18 @@ input.tab:checked + .tab-content,
   --togglehandleborder: 0 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset,
       var(--handleoffsetcalculator) 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset;
 }
+.btm-nav-xs > *:where(.active) {
+  border-top-width: 1px;
+}
+.btm-nav-sm > *:where(.active) {
+  border-top-width: 2px;
+}
+.btm-nav-md > *:where(.active) {
+  border-top-width: 2px;
+}
+.btm-nav-lg > *:where(.active) {
+  border-top-width: 4px;
+}
 .btn-xs {
   height: 1.5rem;
   min-height: 1.5rem;
@@ -30383,6 +30524,9 @@ input.tab:checked + .tab-content,
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
+.mb-0 {
+  margin-bottom: 0px;
+}
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -30407,6 +30551,9 @@ input.tab:checked + .tab-content,
 .mr-2 {
   margin-right: 0.5rem;
 }
+.mt-0 {
+  margin-top: 0px;
+}
 .mt-0\\.5 {
   margin-top: 0.125rem;
 }
@@ -30446,12 +30593,24 @@ input.tab:checked + .tab-content,
 .w-16 {
   width: 4rem;
 }
+.w-20 {
+  width: 5rem;
+}
+.w-24 {
+  width: 6rem;
+}
 .w-32 {
   width: 8rem;
 }
+.w-44 {
+  width: 11rem;
+}
 .w-64 {
   width: 16rem;
 }
+.w-\\[6rem\\] {
+  width: 6rem;
+}
 .w-\\[7\\.5rem\\] {
   width: 7.5rem;
 }
@@ -30689,6 +30848,10 @@ input.tab:checked + .tab-content,
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
+.text-neutral-500 {
+  --tw-text-opacity: 1;
+  color: rgb(115 115 115 / var(--tw-text-opacity));
+}
 .text-red-700 {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));
@@ -31041,7 +31204,10 @@ const MutationsGrid = ({
     }
     return {};
   };
-  const tableData = getMutationsGridData(data, sequenceType, proportionInterval).map((row) => Object.values(row));
+  const tableData = T$1(
+    () => getMutationsGridData(data, sequenceType, proportionInterval).map((row) => Object.values(row)),
+    [data, proportionInterval, sequenceType]
+  );
   return /* @__PURE__ */ u$2(Table, { data: tableData, columns: getHeaders(), pageSize });
 };
 const sortInsertions = (a2, b3) => {
@@ -34650,7 +34816,8 @@ const NumberSequencesOverTimeInner = ({
 }) => {
   const lapis = x$1(LapisUrlContext);
   const { data, error, isLoading } = useQuery(
-    () => queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField, granularity, smoothingWindow)
+    () => queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField, granularity, smoothingWindow),
+    [lapis, lapisFilter, lapisDateField, granularity, smoothingWindow]
   );
   if (isLoading) {
     return /* @__PURE__ */ u$2(LoadingDisplay, {});
@@ -34825,308 +34992,43 @@ __decorateClass$6([
 NumberSequencesOverTimeComponent = __decorateClass$6([
   t$2("gs-number-sequences-over-time")
 ], NumberSequencesOverTimeComponent);
-function getFilteredMutationOverTimeData(data, overallMutationData, displayedSegments, displayedMutationTypes, proportionInterval) {
-  const filteredData = data.copy();
-  filterDisplayedSegments(displayedSegments, filteredData);
-  filterMutationTypes(displayedMutationTypes, filteredData);
-  filterProportion(filteredData, overallMutationData, proportionInterval);
-  return filteredData;
+function getDefaultExportFromCjs(x2) {
+  return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
 }
-function filterDisplayedSegments(displayedSegments, data) {
-  displayedSegments.forEach((segment) => {
-    if (!segment.checked) {
-      data.getFirstAxisKeys().forEach((mutation) => {
-        if (mutation.segment === segment.segment) {
-          data.deleteRow(mutation);
-        }
-      });
-    }
-  });
+function commonjsRequire(path) {
+  throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }
-function filterMutationTypes(displayedMutationTypes, data) {
-  displayedMutationTypes.forEach((mutationType) => {
-    if (!mutationType.checked) {
-      data.getFirstAxisKeys().forEach((mutation) => {
-        if (mutationType.type === mutation.type) {
-          data.deleteRow(mutation);
+var object_hash = { exports: {} };
+(function(module, exports) {
+  !function(e3) {
+    module.exports = e3();
+  }(function() {
+    return function r2(o2, i3, u2) {
+      function s6(n3, e4) {
+        if (!i3[n3]) {
+          if (!o2[n3]) {
+            var t2 = "function" == typeof commonjsRequire && commonjsRequire;
+            if (!e4 && t2) return t2(n3, true);
+            if (a2) return a2(n3, true);
+            throw new Error("Cannot find module '" + n3 + "'");
+          }
+          e4 = i3[n3] = { exports: {} };
+          o2[n3][0].call(e4.exports, function(e5) {
+            var t3 = o2[n3][1][e5];
+            return s6(t3 || e5);
+          }, e4, e4.exports, r2, o2, i3, u2);
         }
-      });
-    }
-  });
-}
-function filterProportion(data, overallMutationData, proportionInterval) {
-  const overallProportionsByMutation = overallMutationData.content.reduce(
-    (acc, { mutation, proportion }) => ({
-      ...acc,
-      [mutation.toString()]: proportion
-    }),
-    {}
-  );
-  data.getFirstAxisKeys().forEach((mutation) => {
-    const overallProportion = overallProportionsByMutation[mutation.toString()] || -1;
-    if (overallProportion < proportionInterval.min || overallProportion > proportionInterval.max) {
-      data.deleteRow(mutation);
-    }
-  });
-}
-const ColorScaleSelector = ({ colorScale, setColorScale }) => {
-  const colorDisplayCss = `w-10 h-8 border border-gray-200 mx-2 text-xs flex items-center justify-center`;
-  return /* @__PURE__ */ u$2("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ u$2(
-      "div",
-      {
-        style: {
-          backgroundColor: singleGraphColorRGBByName(colorScale.color, 0),
-          color: "black"
-        },
-        className: colorDisplayCss,
-        children: formatProportion(colorScale.min, 0)
+        return i3[n3].exports;
       }
-    ),
-    /* @__PURE__ */ u$2("div", { className: "w-64", children: /* @__PURE__ */ u$2(
-      MinMaxRangeSlider,
-      {
-        min: colorScale.min * 100,
-        max: colorScale.max * 100,
-        setMin: (percentage) => {
-          setColorScale({ ...colorScale, min: percentage / 100 });
-        },
-        setMax: (percentage) => {
-          setColorScale({ ...colorScale, max: percentage / 100 });
-        }
-      }
-    ) }),
-    /* @__PURE__ */ u$2(
-      "div",
-      {
-        style: {
-          backgroundColor: singleGraphColorRGBByName(colorScale.color, 1),
-          color: "white"
-        },
-        className: colorDisplayCss,
-        children: formatProportion(colorScale.max, 0)
-      }
-    )
-  ] });
-};
-const getColorWithingScale = (value, colorScale) => {
-  if (colorScale.min === colorScale.max) {
-    return singleGraphColorRGBByName(colorScale.color, 0);
-  }
-  const colorRange = colorScale.max - colorScale.min;
-  const alpha2 = (value - colorScale.min) / colorRange;
-  return singleGraphColorRGBByName(colorScale.color, alpha2);
-};
-const getTextColorForScale = (value, colorScale) => {
-  if (colorScale.min === colorScale.max) {
-    return "black";
-  }
-  const colorRange = colorScale.max - colorScale.min;
-  const alpha2 = (value - colorScale.min) / colorRange;
-  return alpha2 <= 0.5 ? "black" : "white";
-};
-function getPositionCss(position) {
-  switch (position) {
-    case "top":
-      return "bottom-full translate-x-[-50%] left-1/2 mb-1";
-    case "top-start":
-      return "bottom-full mr-1 mb-1";
-    case "top-end":
-      return "bottom-full right-0 ml-1 mb-1";
-    case "bottom":
-      return "top-full translate-x-[-50%] left-1/2 mt-1";
-    case "bottom-start":
-      return "mr-1 mt-1";
-    case "bottom-end":
-      return "right-0 ml-1 mt-1";
-    case "left":
-      return "right-full translate-y-[-50%] top-1/2 mr-1";
-    case "right":
-      return "left-full translate-y-[-50%] top-1/2 ml-1";
-    case void 0:
-      return "";
-  }
-}
-const Tooltip = ({ children, content, position = "bottom" }) => {
-  return /* @__PURE__ */ u$2("div", { className: "relative w-full h-full", children: [
-    /* @__PURE__ */ u$2("div", { className: "peer w-full h-full", children }),
-    /* @__PURE__ */ u$2(
-      "div",
-      {
-        className: `absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible peer-hover:visible ${getPositionCss(position)}`,
-        children: content
-      }
-    )
-  ] });
-};
-const MAX_NUMBER_OF_GRID_ROWS = 100;
-const MUTATION_CELL_WIDTH_REM = 8;
-const MutationsOverTimeGrid = ({ data, colorScale }) => {
-  const allMutations = data.getFirstAxisKeys().sort(sortSubstitutionsAndDeletions);
-  const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
-  const dates = data.getSecondAxisKeys().sort((a2, b3) => compareTemporal(a2, b3));
-  const [showProportionText, setShowProportionText] = h$1(false);
-  const gridRef = A$1(null);
-  useShowProportion(gridRef, dates.length, setShowProportionText);
-  return /* @__PURE__ */ u$2(k$1, { children: [
-    allMutations.length > MAX_NUMBER_OF_GRID_ROWS && /* @__PURE__ */ u$2("div", { className: "pl-2", children: [
-      "Showing ",
-      MAX_NUMBER_OF_GRID_ROWS,
-      " of ",
-      allMutations.length,
-      " mutations. You can narrow the filter to reduce the number of mutations."
-    ] }),
-    /* @__PURE__ */ u$2(
-      "div",
-      {
-        ref: gridRef,
-        style: {
-          display: "grid",
-          gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
-          gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`
-        },
-        children: shownMutations.map((mutation, rowIndex) => {
-          return /* @__PURE__ */ u$2(k$1, { children: [
-            /* @__PURE__ */ u$2(
-              "div",
-              {
-                style: { gridRowStart: rowIndex + 1, gridColumnStart: 1 },
-                children: /* @__PURE__ */ u$2(MutationCell, { mutation })
-              },
-              `mutation-${mutation.toString()}`
-            ),
-            dates.map((date, columnIndex) => {
-              const value = data.get(mutation, date) ?? { proportion: 0, count: 0 };
-              const tooltipPosition = getTooltipPosition(
-                rowIndex,
-                shownMutations.length,
-                columnIndex,
-                dates.length
-              );
-              return /* @__PURE__ */ u$2(
-                "div",
-                {
-                  style: { gridRowStart: rowIndex + 1, gridColumnStart: columnIndex + 2 },
-                  children: /* @__PURE__ */ u$2(
-                    ProportionCell,
-                    {
-                      value,
-                      date,
-                      mutation,
-                      tooltipPosition,
-                      showProportionText,
-                      colorScale
-                    }
-                  )
-                },
-                `${mutation.toString()}-${date.toString()}`
-              );
-            })
-          ] }, `fragment-${mutation.toString()}`);
-        })
-      }
-    )
-  ] });
-};
-function useShowProportion(gridRef, girdColumns, setShowProportionText) {
-  y$1(() => {
-    const checkWidth = () => {
-      if (gridRef.current) {
-        const width = gridRef.current.getBoundingClientRect().width;
-        const widthPerDate = (width - remToPx(MUTATION_CELL_WIDTH_REM)) / girdColumns;
-        const maxWidthProportionText = 28;
-        setShowProportionText(widthPerDate > maxWidthProportionText);
-      }
-    };
-    checkWidth();
-    window.addEventListener("resize", checkWidth);
-    return () => {
-      window.removeEventListener("resize", checkWidth);
-    };
-  }, [girdColumns, gridRef, setShowProportionText]);
-}
-const remToPx = (rem) => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
-function getTooltipPosition(rowIndex, rows, columnIndex, columns) {
-  const tooltipX = rowIndex < rows / 2 ? "bottom" : "top";
-  const tooltipY = columnIndex < columns / 2 ? "start" : "end";
-  return `${tooltipX}-${tooltipY}`;
-}
-const ProportionCell = ({ value, mutation, date, tooltipPosition, showProportionText, colorScale }) => {
-  const tooltipContent = /* @__PURE__ */ u$2("div", { children: [
-    /* @__PURE__ */ u$2("p", { children: /* @__PURE__ */ u$2("span", { className: "font-bold", children: date.englishName() }) }),
-    /* @__PURE__ */ u$2("p", { children: [
-      "(",
-      timeIntervalDisplay(date),
-      ")"
-    ] }),
-    /* @__PURE__ */ u$2("p", { children: mutation.code }),
-    /* @__PURE__ */ u$2("p", { children: [
-      "Proportion: ",
-      formatProportion(value.proportion)
-    ] }),
-    /* @__PURE__ */ u$2("p", { children: [
-      "Count: ",
-      value.count
-    ] })
-  ] });
-  return /* @__PURE__ */ u$2("div", { className: "py-1 w-full h-full", children: /* @__PURE__ */ u$2(Tooltip, { content: tooltipContent, position: tooltipPosition, children: /* @__PURE__ */ u$2(
-    "div",
-    {
-      style: {
-        backgroundColor: getColorWithingScale(value.proportion, colorScale),
-        color: getTextColorForScale(value.proportion, colorScale)
-      },
-      className: `w-full h-full text-center hover:font-bold text-xs group`,
-      children: showProportionText ? formatProportion(value.proportion, 0) : void 0
-    }
-  ) }) });
-};
-const timeIntervalDisplay = (date) => {
-  if (date instanceof YearMonthDay) {
-    return date.toString();
-  }
-  return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
-};
-const MutationCell = ({ mutation }) => {
-  return /* @__PURE__ */ u$2("div", { className: "text-center", children: mutation.toString() });
-};
-function getDefaultExportFromCjs(x2) {
-  return x2 && x2.__esModule && Object.prototype.hasOwnProperty.call(x2, "default") ? x2["default"] : x2;
-}
-function commonjsRequire(path) {
-  throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
-}
-var object_hash = { exports: {} };
-(function(module, exports) {
-  !function(e3) {
-    module.exports = e3();
-  }(function() {
-    return function r2(o2, i3, u2) {
-      function s6(n3, e4) {
-        if (!i3[n3]) {
-          if (!o2[n3]) {
-            var t2 = "function" == typeof commonjsRequire && commonjsRequire;
-            if (!e4 && t2) return t2(n3, true);
-            if (a2) return a2(n3, true);
-            throw new Error("Cannot find module '" + n3 + "'");
-          }
-          e4 = i3[n3] = { exports: {} };
-          o2[n3][0].call(e4.exports, function(e5) {
-            var t3 = o2[n3][1][e5];
-            return s6(t3 || e5);
-          }, e4, e4.exports, r2, o2, i3, u2);
-        }
-        return i3[n3].exports;
-      }
-      for (var a2 = "function" == typeof commonjsRequire && commonjsRequire, e3 = 0; e3 < u2.length; e3++) s6(u2[e3]);
-      return s6;
-    }({ 1: [function(w2, b3, m2) {
-      !(function(e3, n3, s6, c2, d2, h3, p2, g2, y2) {
-        var r2 = w2("crypto");
-        function t2(e4, t3) {
-          t3 = u2(e4, t3);
-          var n4;
-          return void 0 === (n4 = "passthrough" !== t3.algorithm ? r2.createHash(t3.algorithm) : new l2()).write && (n4.write = n4.update, n4.end = n4.update), f2(t3, n4).dispatch(e4), n4.update || n4.end(""), n4.digest ? n4.digest("buffer" === t3.encoding ? void 0 : t3.encoding) : (e4 = n4.read(), "buffer" !== t3.encoding ? e4.toString(t3.encoding) : e4);
+      for (var a2 = "function" == typeof commonjsRequire && commonjsRequire, e3 = 0; e3 < u2.length; e3++) s6(u2[e3]);
+      return s6;
+    }({ 1: [function(w2, b3, m2) {
+      !(function(e3, n3, s6, c2, d2, h3, p2, g2, y2) {
+        var r2 = w2("crypto");
+        function t2(e4, t3) {
+          t3 = u2(e4, t3);
+          var n4;
+          return void 0 === (n4 = "passthrough" !== t3.algorithm ? r2.createHash(t3.algorithm) : new l2()).write && (n4.write = n4.update, n4.end = n4.update), f2(t3, n4).dispatch(e4), n4.update || n4.end(""), n4.digest ? n4.digest("buffer" === t3.encoding ? void 0 : t3.encoding) : (e4 = n4.read(), "buffer" !== t3.encoding ? e4.toString(t3.encoding) : e4);
         }
         (m2 = b3.exports = t2).sha1 = function(e4) {
           return t2(e4);
@@ -35881,7 +35783,7 @@ var object_hash = { exports: {} };
 })(object_hash);
 var object_hashExports = object_hash.exports;
 const hash = /* @__PURE__ */ getDefaultExportFromCjs(object_hashExports);
-class Map2d {
+class Map2dBase {
   constructor(serializeFirstAxis = (key) => typeof key === "string" ? key : hash(key), serializeSecondAxis = (key) => typeof key === "string" ? key : hash(key)) {
     this.serializeFirstAxis = serializeFirstAxis;
     this.serializeSecondAxis = serializeSecondAxis;
@@ -35931,18 +35833,322 @@ class Map2d {
       });
     });
   }
-  copy() {
-    const copy = new Map2d(this.serializeFirstAxis, this.serializeSecondAxis);
-    this.data.forEach((value, key) => {
-      const keyFirstAxis = this.keysFirstAxis.get(key);
-      value.forEach((value2, key2) => {
-        const keySecondAxis = this.keysSecondAxis.get(key2);
-        copy.set(keyFirstAxis, keySecondAxis, value2);
+}
+class Map2dView {
+  constructor(map2) {
+    this.keysFirstAxis = new Map(map2.keysFirstAxis);
+    this.keysSecondAxis = new Map(map2.keysSecondAxis);
+    if (map2 instanceof Map2dView) {
+      this.baseMap = map2.baseMap;
+    }
+    this.baseMap = map2;
+  }
+  serializeFirstAxis(key) {
+    return this.baseMap.serializeFirstAxis(key);
+  }
+  serializeSecondAxis(key) {
+    return this.baseMap.serializeSecondAxis(key);
+  }
+  deleteRow(key) {
+    this.keysFirstAxis.delete(this.serializeFirstAxis(key));
+  }
+  get(keyFirstAxis, keySecondAxis) {
+    const firstAxisKey = this.serializeFirstAxis(keyFirstAxis);
+    const secondAxisKey = this.serializeSecondAxis(keySecondAxis);
+    if (!this.keysFirstAxis.has(firstAxisKey) || !this.keysSecondAxis.has(secondAxisKey)) {
+      return void 0;
+    }
+    return this.baseMap.get(keyFirstAxis, keySecondAxis);
+  }
+  set() {
+    throw new Error("Cannot set value on a Map2dView");
+  }
+  getFirstAxisKeys() {
+    return Array.from(this.keysFirstAxis.values());
+  }
+  getSecondAxisKeys() {
+    return Array.from(this.keysSecondAxis.values());
+  }
+  getAsArray(fillEmptyWith) {
+    return this.getFirstAxisKeys().map((firstAxisKey) => {
+      return this.getSecondAxisKeys().map((secondAxisKey) => {
+        return this.baseMap.get(firstAxisKey, secondAxisKey) ?? fillEmptyWith;
       });
     });
-    return copy;
+  }
+  getRow(key, fillEmptyWith) {
+    const serializedKeyFirstAxis = this.serializeFirstAxis(key);
+    if (!this.keysFirstAxis.has(serializedKeyFirstAxis)) {
+      return [];
+    }
+    return this.baseMap.getRow(key, fillEmptyWith);
+  }
+}
+function getFilteredMutationOverTimeData(data, overallMutationData, displayedSegments, displayedMutationTypes, proportionInterval) {
+  const filteredData = new Map2dView(data);
+  filterDisplayedSegments(displayedSegments, filteredData);
+  filterMutationTypes(displayedMutationTypes, filteredData);
+  filterProportion(filteredData, overallMutationData, proportionInterval);
+  return filteredData;
+}
+function filterDisplayedSegments(displayedSegments, data) {
+  displayedSegments.forEach((segment) => {
+    if (!segment.checked) {
+      data.getFirstAxisKeys().forEach((mutation) => {
+        if (mutation.segment === segment.segment) {
+          data.deleteRow(mutation);
+        }
+      });
+    }
+  });
+}
+function filterMutationTypes(displayedMutationTypes, data) {
+  displayedMutationTypes.forEach((mutationType) => {
+    if (!mutationType.checked) {
+      data.getFirstAxisKeys().forEach((mutation) => {
+        if (mutationType.type === mutation.type) {
+          data.deleteRow(mutation);
+        }
+      });
+    }
+  });
+}
+function filterProportion(data, overallMutationData, proportionInterval) {
+  const overallProportionsByMutation = overallMutationData.content.reduce(
+    (acc, { mutation, proportion }) => ({
+      ...acc,
+      [mutation.toString()]: proportion
+    }),
+    {}
+  );
+  data.getFirstAxisKeys().forEach((mutation) => {
+    const overallProportion = overallProportionsByMutation[mutation.toString()] || -1;
+    if (overallProportion < proportionInterval.min || overallProportion > proportionInterval.max) {
+      data.deleteRow(mutation);
+    }
+  });
+}
+const ColorScaleSelector = ({ colorScale, setColorScale }) => {
+  const colorDisplayCss = `w-10 h-8 border border-gray-200 mx-2 text-xs flex items-center justify-center`;
+  return /* @__PURE__ */ u$2("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ u$2(
+      "div",
+      {
+        style: {
+          backgroundColor: singleGraphColorRGBByName(colorScale.color, 0),
+          color: "black"
+        },
+        className: colorDisplayCss,
+        children: formatProportion(colorScale.min, 0)
+      }
+    ),
+    /* @__PURE__ */ u$2("div", { className: "w-64", children: /* @__PURE__ */ u$2(
+      MinMaxRangeSlider,
+      {
+        min: colorScale.min * 100,
+        max: colorScale.max * 100,
+        setMin: (percentage) => {
+          setColorScale({ ...colorScale, min: percentage / 100 });
+        },
+        setMax: (percentage) => {
+          setColorScale({ ...colorScale, max: percentage / 100 });
+        }
+      }
+    ) }),
+    /* @__PURE__ */ u$2(
+      "div",
+      {
+        style: {
+          backgroundColor: singleGraphColorRGBByName(colorScale.color, 1),
+          color: "white"
+        },
+        className: colorDisplayCss,
+        children: formatProportion(colorScale.max, 0)
+      }
+    )
+  ] });
+};
+const getColorWithingScale = (value, colorScale) => {
+  if (colorScale.min === colorScale.max) {
+    return singleGraphColorRGBByName(colorScale.color, 0);
+  }
+  const colorRange = colorScale.max - colorScale.min;
+  const alpha2 = (value - colorScale.min) / colorRange;
+  return singleGraphColorRGBByName(colorScale.color, alpha2);
+};
+const getTextColorForScale = (value, colorScale) => {
+  if (colorScale.min === colorScale.max) {
+    return "black";
+  }
+  const colorRange = colorScale.max - colorScale.min;
+  const alpha2 = (value - colorScale.min) / colorRange;
+  return alpha2 <= 0.5 ? "black" : "white";
+};
+function getPositionCss(position) {
+  switch (position) {
+    case "top":
+      return "bottom-full translate-x-[-50%] left-1/2 mb-1";
+    case "top-start":
+      return "bottom-full mr-1 mb-1";
+    case "top-end":
+      return "bottom-full right-0 ml-1 mb-1";
+    case "bottom":
+      return "top-full translate-x-[-50%] left-1/2 mt-1";
+    case "bottom-start":
+      return "mr-1 mt-1";
+    case "bottom-end":
+      return "right-0 ml-1 mt-1";
+    case "left":
+      return "right-full translate-y-[-50%] top-1/2 mr-1";
+    case "right":
+      return "left-full translate-y-[-50%] top-1/2 ml-1";
+    case void 0:
+      return "";
   }
 }
+const Tooltip = ({ children, content, position = "bottom" }) => {
+  return /* @__PURE__ */ u$2("div", { className: "relative w-full h-full", children: [
+    /* @__PURE__ */ u$2("div", { className: "peer w-full h-full", children }),
+    /* @__PURE__ */ u$2(
+      "div",
+      {
+        className: `absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible peer-hover:visible ${getPositionCss(position)}`,
+        children: content
+      }
+    )
+  ] });
+};
+const MAX_NUMBER_OF_GRID_ROWS = 100;
+const MUTATION_CELL_WIDTH_REM = 8;
+const MutationsOverTimeGrid = ({ data, colorScale }) => {
+  const allMutations = data.getFirstAxisKeys().sort(sortSubstitutionsAndDeletions);
+  const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
+  const dates = data.getSecondAxisKeys().sort((a2, b3) => compareTemporal(a2, b3));
+  const [showProportionText, setShowProportionText] = h$1(false);
+  const gridRef = A$1(null);
+  useShowProportion(gridRef, dates.length, setShowProportionText);
+  return /* @__PURE__ */ u$2(k$1, { children: [
+    allMutations.length > MAX_NUMBER_OF_GRID_ROWS && /* @__PURE__ */ u$2("div", { className: "pl-2", children: [
+      "Showing ",
+      MAX_NUMBER_OF_GRID_ROWS,
+      " of ",
+      allMutations.length,
+      " mutations. You can narrow the filter to reduce the number of mutations."
+    ] }),
+    /* @__PURE__ */ u$2(
+      "div",
+      {
+        ref: gridRef,
+        style: {
+          display: "grid",
+          gridTemplateRows: `repeat(${shownMutations.length}, 24px)`,
+          gridTemplateColumns: `${MUTATION_CELL_WIDTH_REM}rem repeat(${dates.length}, minmax(0.05rem, 1fr))`
+        },
+        children: shownMutations.map((mutation, rowIndex) => {
+          return /* @__PURE__ */ u$2(k$1, { children: [
+            /* @__PURE__ */ u$2(
+              "div",
+              {
+                style: { gridRowStart: rowIndex + 1, gridColumnStart: 1 },
+                children: /* @__PURE__ */ u$2(MutationCell, { mutation })
+              },
+              `mutation-${mutation.toString()}`
+            ),
+            dates.map((date, columnIndex) => {
+              const value = data.get(mutation, date) ?? { proportion: 0, count: 0 };
+              const tooltipPosition = getTooltipPosition(
+                rowIndex,
+                shownMutations.length,
+                columnIndex,
+                dates.length
+              );
+              return /* @__PURE__ */ u$2(
+                "div",
+                {
+                  style: { gridRowStart: rowIndex + 1, gridColumnStart: columnIndex + 2 },
+                  children: /* @__PURE__ */ u$2(
+                    ProportionCell,
+                    {
+                      value,
+                      date,
+                      mutation,
+                      tooltipPosition,
+                      showProportionText,
+                      colorScale
+                    }
+                  )
+                },
+                `${mutation.toString()}-${date.toString()}`
+              );
+            })
+          ] }, `fragment-${mutation.toString()}`);
+        })
+      }
+    )
+  ] });
+};
+function useShowProportion(gridRef, girdColumns, setShowProportionText) {
+  y$1(() => {
+    const checkWidth = () => {
+      if (gridRef.current) {
+        const width = gridRef.current.getBoundingClientRect().width;
+        const widthPerDate = (width - remToPx(MUTATION_CELL_WIDTH_REM)) / girdColumns;
+        const maxWidthProportionText = 28;
+        setShowProportionText(widthPerDate > maxWidthProportionText);
+      }
+    };
+    checkWidth();
+    window.addEventListener("resize", checkWidth);
+    return () => {
+      window.removeEventListener("resize", checkWidth);
+    };
+  }, [girdColumns, gridRef, setShowProportionText]);
+}
+const remToPx = (rem) => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+function getTooltipPosition(rowIndex, rows, columnIndex, columns) {
+  const tooltipX = rowIndex < rows / 2 ? "bottom" : "top";
+  const tooltipY = columnIndex < columns / 2 ? "start" : "end";
+  return `${tooltipX}-${tooltipY}`;
+}
+const ProportionCell = ({ value, mutation, date, tooltipPosition, showProportionText, colorScale }) => {
+  const tooltipContent = /* @__PURE__ */ u$2("div", { children: [
+    /* @__PURE__ */ u$2("p", { children: /* @__PURE__ */ u$2("span", { className: "font-bold", children: date.englishName() }) }),
+    /* @__PURE__ */ u$2("p", { children: [
+      "(",
+      timeIntervalDisplay(date),
+      ")"
+    ] }),
+    /* @__PURE__ */ u$2("p", { children: mutation.code }),
+    /* @__PURE__ */ u$2("p", { children: [
+      "Proportion: ",
+      formatProportion(value.proportion)
+    ] }),
+    /* @__PURE__ */ u$2("p", { children: [
+      "Count: ",
+      value.count
+    ] })
+  ] });
+  return /* @__PURE__ */ u$2("div", { className: "py-1 w-full h-full", children: /* @__PURE__ */ u$2(Tooltip, { content: tooltipContent, position: tooltipPosition, children: /* @__PURE__ */ u$2(
+    "div",
+    {
+      style: {
+        backgroundColor: getColorWithingScale(value.proportion, colorScale),
+        color: getTextColorForScale(value.proportion, colorScale)
+      },
+      className: `w-full h-full text-center hover:font-bold text-xs group`,
+      children: showProportionText ? formatProportion(value.proportion, 0) : void 0
+    }
+  ) }) });
+};
+const timeIntervalDisplay = (date) => {
+  if (date instanceof YearMonthDay) {
+    return date.toString();
+  }
+  return `${date.firstDay.toString()} - ${date.lastDay.toString()}`;
+};
+const MutationCell = ({ mutation }) => {
+  return /* @__PURE__ */ u$2("div", { className: "text-center", children: mutation.toString() });
+};
 const MAX_NUMBER_OF_GRID_COLUMNS = 200;
 async function queryOverallMutationData(lapisFilter, sequenceType, lapis, signal) {
   return fetchAndPrepareSubstitutionsOrDeletions(lapisFilter, sequenceType).evaluate(lapis, signal);
@@ -36014,7 +36220,7 @@ function fetchAndPrepareSubstitutionsOrDeletions(filter, sequenceType) {
   return new FetchSubstitutionsOrDeletionsOperator(filter, sequenceType, 1e-3);
 }
 function groupByMutation(data) {
-  const dataArray = new Map2d(
+  const dataArray = new Map2dBase(
     (mutation) => mutation.code,
     (date) => date.toString()
   );
@@ -36043,7 +36249,7 @@ const ColorScaleSelectorDropdown = ({
   colorScale,
   setColorScale
 }) => {
-  return /* @__PURE__ */ u$2(Dropdown, { buttonTitle: `Color scale`, placement: "bottom-start", children: /* @__PURE__ */ u$2(ColorScaleSelector, { colorScale, setColorScale }) });
+  return /* @__PURE__ */ u$2("div", { className: "w-20", children: /* @__PURE__ */ u$2(Dropdown, { buttonTitle: `Color scale`, placement: "bottom-start", children: /* @__PURE__ */ u$2(ColorScaleSelector, { colorScale, setColorScale }) }) });
 };
 const MutationsOverTime = ({ width, height, ...innerProps }) => {
   const size = { height, width };