@genspectrum/dashboard-components 0.4.5 → 0.5.1

package/dist/dashboard-components.js

@@ -546,17 +546,17 @@ function u$1(e2, t2, n3, o2, i2, u2) {
   if ("function" == typeof e2 && (a2 = e2.defaultProps)) for (c2 in a2) void 0 === p2[c2] && (p2[c2] = a2[c2]);
   return options.vnode && options.vnode(l2), l2;
 }
-var t, r, u, i, o = 0, f = [], c = [], e = options, a = e.__b, v = e.__r, l = e.diffed, m = e.__c, s = e.unmount, d = e.__;
-function h(n3, t2) {
-  e.__h && e.__h(r, n3, o || t2), o = 0;
+var t, r, u, i, o = 0, f = [], c = options, e = c.__b, a = c.__r, v = c.diffed, l = c.__c, m = c.unmount, s = c.__;
+function d(n3, t2) {
+  c.__h && c.__h(r, n3, o || t2), o = 0;
   var u2 = r.__H || (r.__H = { __: [], __h: [] });
-  return n3 >= u2.__.length && u2.__.push({ __V: c }), u2.__[n3];
+  return n3 >= u2.__.length && u2.__.push({}), u2.__[n3];
 }
-function p(n3) {
-  return o = 1, y(D$1, n3);
+function h(n3) {
+  return o = 1, p(D$1, n3);
 }
-function y(n3, u2, i2) {
-  var o2 = h(t++, 2);
+function p(n3, u2, i2) {
+  var o2 = d(t++, 2);
   if (o2.t = n3, !o2.__c && (o2.__ = [i2 ? i2(u2) : D$1(void 0, u2), function(n4) {
     var t2 = o2.__N ? o2.__N[0] : o2.__[0], r2 = o2.t(t2, n4);
     t2 !== r2 && (o2.__N = [r2, o2.__[1]], o2.__c.setState({}));
@@ -589,25 +589,25 @@ function y(n3, u2, i2) {
   }
   return o2.__N || o2.__;
 }
-function _(n3, u2) {
-  var i2 = h(t++, 3);
-  !e.__s && C(i2.__H, u2) && (i2.__ = n3, i2.i = u2, r.__H.__h.push(i2));
+function y(n3, u2) {
+  var i2 = d(t++, 3);
+  !c.__s && C(i2.__H, u2) && (i2.__ = n3, i2.i = u2, r.__H.__h.push(i2));
 }
-function F(n3) {
-  return o = 5, q(function() {
+function A(n3) {
+  return o = 5, T(function() {
     return { current: n3 };
   }, []);
 }
-function q(n3, r2) {
-  var u2 = h(t++, 7);
-  return C(u2.__H, r2) ? (u2.__V = n3(), u2.i = r2, u2.__h = n3, u2.__V) : u2.__;
+function T(n3, r2) {
+  var u2 = d(t++, 7);
+  return C(u2.__H, r2) && (u2.__ = n3(), u2.__H = r2, u2.__h = n3), u2.__;
 }
-function P(n3) {
-  var u2 = r.context[n3.__c], i2 = h(t++, 9);
+function x(n3) {
+  var u2 = r.context[n3.__c], i2 = d(t++, 9);
   return i2.c = n3, u2 ? (null == i2.__ && (i2.__ = true, u2.sub(r)), u2.props.value) : n3.__;
 }
 function b2(n3) {
-  var u2 = h(t++, 10), i2 = p();
+  var u2 = d(t++, 10), i2 = h();
   return u2.__ = n3, r.componentDidCatch || (r.componentDidCatch = function(n4, t2) {
     u2.__ && u2.__(n4, t2), i2[1](n4);
   }), [i2[0], function() {
@@ -618,26 +618,26 @@ function j() {
   for (var n3; n3 = f.shift(); ) if (n3.__P && n3.__H) try {
     n3.__H.__h.forEach(z), n3.__H.__h.forEach(B), n3.__H.__h = [];
   } catch (t2) {
-    n3.__H.__h = [], e.__e(t2, n3.__v);
+    n3.__H.__h = [], c.__e(t2, n3.__v);
   }
 }
-e.__b = function(n3) {
-  r = null, a && a(n3);
-}, e.__ = function(n3, t2) {
-  n3 && t2.__k && t2.__k.__m && (n3.__m = t2.__k.__m), d && d(n3, t2);
-}, e.__r = function(n3) {
-  v && v(n3), t = 0;
+c.__b = function(n3) {
+  r = null, e && e(n3);
+}, c.__ = function(n3, t2) {
+  n3 && t2.__k && t2.__k.__m && (n3.__m = t2.__k.__m), s && s(n3, t2);
+}, c.__r = function(n3) {
+  a && a(n3), t = 0;
   var i2 = (r = n3.__c).__H;
   i2 && (u === r ? (i2.__h = [], r.__h = [], i2.__.forEach(function(n4) {
-    n4.__N && (n4.__ = n4.__N), n4.__V = c, n4.__N = n4.i = void 0;
+    n4.__N && (n4.__ = n4.__N), n4.i = n4.__N = void 0;
   })) : (i2.__h.forEach(z), i2.__h.forEach(B), i2.__h = [], t = 0)), u = r;
-}, e.diffed = function(n3) {
-  l && l(n3);
+}, c.diffed = function(n3) {
+  v && v(n3);
   var t2 = n3.__c;
-  t2 && t2.__H && (t2.__H.__h.length && (1 !== f.push(t2) && i === e.requestAnimationFrame || ((i = e.requestAnimationFrame) || w)(j)), t2.__H.__.forEach(function(n4) {
-    n4.i && (n4.__H = n4.i), n4.__V !== c && (n4.__ = n4.__V), n4.i = void 0, n4.__V = c;
+  t2 && t2.__H && (t2.__H.__h.length && (1 !== f.push(t2) && i === c.requestAnimationFrame || ((i = c.requestAnimationFrame) || w)(j)), t2.__H.__.forEach(function(n4) {
+    n4.i && (n4.__H = n4.i), n4.i = void 0;
   })), u = r = null;
-}, e.__c = function(n3, t2) {
+}, c.__c = function(n3, t2) {
   t2.some(function(n4) {
     try {
       n4.__h.forEach(z), n4.__h = n4.__h.filter(function(n5) {
@@ -646,11 +646,11 @@ e.__b = function(n3) {
     } catch (r2) {
       t2.some(function(n5) {
         n5.__h && (n5.__h = []);
-      }), t2 = [], e.__e(r2, n4.__v);
+      }), t2 = [], c.__e(r2, n4.__v);
     }
-  }), m && m(n3, t2);
-}, e.unmount = function(n3) {
-  s && s(n3);
+  }), l && l(n3, t2);
+}, c.unmount = function(n3) {
+  m && m(n3);
   var t2, r2 = n3.__c;
   r2 && r2.__H && (r2.__H.__.forEach(function(n4) {
     try {
@@ -658,7 +658,7 @@ e.__b = function(n3) {
     } catch (n5) {
       t2 = n5;
     }
-  }), r2.__H = void 0, t2 && e.__e(t2, r2.__v));
+  }), r2.__H = void 0, t2 && c.__e(t2, r2.__v));
 };
 var k = "function" == typeof requestAnimationFrame;
 function w(n3) {
@@ -748,8 +748,8 @@ const tableStyle = {
 };
 const Table = ({ data, columns, pageSize }) => {
   const pagination = typeof pageSize === "number" ? { limit: pageSize } : pageSize;
-  const wrapper3 = F(null);
-  _(() => {
+  const wrapper3 = A(null);
+  y(() => {
     if (wrapper3.current === null) {
       return;
     }
@@ -948,9 +948,9 @@ const MutationComparisonTable = ({
   return /* @__PURE__ */ u$1(Table, { data: tableData, columns: headers, pageSize });
 };
 const GsChart = ({ configuration }) => {
-  const canvasRef = F(null);
-  const chartRef = F(null);
-  _(() => {
+  const canvasRef = A(null);
+  const chartRef = A(null);
+  y(() => {
     if (canvasRef.current === null) {
       return;
     }
@@ -971,10 +971,10 @@ const MutationComparisonVenn = ({
   data,
   proportionInterval
 }) => {
-  const divRef = F(null);
+  const divRef = A(null);
   const noElementSelectedMessage = "You have no elements selected. Click in the venn diagram to select.";
-  const [selectedDatasetIndex, setSelectedDatasetIndex] = p(null);
-  const sets = q(
+  const [selectedDatasetIndex, setSelectedDatasetIndex] = h(null);
+  const sets = T(
     () => extractSets(
       data.content.map((mutationData) => ({
         displayName: mutationData.displayName,
@@ -990,7 +990,7 @@ const MutationComparisonVenn = ({
     ),
     [data, proportionInterval]
   );
-  _(() => {
+  y(() => {
     if (divRef.current === null) {
       return;
     }
@@ -1002,7 +1002,7 @@ const MutationComparisonVenn = ({
     const label = sets.datasets[0].data[selectedDatasetIndex].label;
     divRef.current.innerText = `${label}: ${values.join(", ")}` || "";
   }, [divRef, selectedDatasetIndex, sets]);
-  const config = q(
+  const config = T(
     () => ({
       type: "venn",
       data: sets,
@@ -1027,7 +1027,7 @@ const MutationComparisonVenn = ({
           }
         },
         events: ["click"],
-        onClick(_2, elements) {
+        onClick(_, elements) {
           if (elements.length === 0) {
             setSelectedDatasetIndex(null);
           }
@@ -1053,7 +1053,7 @@ const MutationComparisonVenn = ({
     [sets]
   );
   if (data.content.length > 5) {
-    return /* @__PURE__ */ u$1("div", { children: "Too many variants to display. Maximum are five. " });
+    return /* @__PURE__ */ u$1("div", { children: "Too many datasets to display. Maximum are five. " });
   }
   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 }) }),
@@ -1110,8 +1110,8 @@ class SortOperator {
     };
   }
 }
-function querySubstitutionsOrDeletions(variant, sequenceType, lapis, signal) {
-  const fetchData = new FetchSubstitutionsOrDeletionsOperator(variant, sequenceType, 0);
+function querySubstitutionsOrDeletions(lapisFilter, sequenceType, lapis, signal) {
+  const fetchData = new FetchSubstitutionsOrDeletionsOperator(lapisFilter, sequenceType, 0);
   const sortData = new SortOperator(fetchData, (a2, b3) => {
     if (a2.mutation.segment !== b3.mutation.segment) {
       return (a2.mutation.segment ?? "").localeCompare(b3.mutation.segment ?? "");
@@ -1120,12 +1120,12 @@ function querySubstitutionsOrDeletions(variant, sequenceType, lapis, signal) {
   });
   return sortData.evaluate(lapis, signal);
 }
-async function queryMutationData(variants, sequenceType, lapis) {
+async function queryMutationData(lapisFilters, sequenceType, lapis) {
   const mutationData = await Promise.all(
-    variants.map(async (variant) => {
+    lapisFilters.map(async (filter) => {
       return {
-        displayName: variant.displayName,
-        data: (await querySubstitutionsOrDeletions(variant.lapisFilter, sequenceType, lapis)).content
+        displayName: filter.displayName,
+        data: (await querySubstitutionsOrDeletions(filter.lapisFilter, sequenceType, lapis)).content
       };
     })
   );
@@ -1152,8 +1152,8 @@ function filterMutationData(data, displayedSegments, displayedMutationTypes) {
 }
 const LapisUrlContext = createContext$1("");
 function useFloatingUi(referenceRef, floatingRef, middleware, placement) {
-  const cleanupRef = F(null);
-  _(() => {
+  const cleanupRef = A(null);
+  y(() => {
     if (!referenceRef.current || !floatingRef.current) {
       return;
     }
@@ -1163,8 +1163,8 @@ function useFloatingUi(referenceRef, floatingRef, middleware, placement) {
       computePosition(reference, floating, {
         placement,
         middleware
-      }).then(({ x, y: y2 }) => {
-        floating.style.left = `${x}px`;
+      }).then(({ x: x2, y: y2 }) => {
+        floating.style.left = `${x2}px`;
         floating.style.top = `${y2}px`;
       });
     };
@@ -1178,7 +1178,7 @@ function useFloatingUi(referenceRef, floatingRef, middleware, placement) {
   }, [placement, middleware, referenceRef, floatingRef]);
 }
 function useCloseOnClickOutside(floatingRef, referenceRef, setShowContent) {
-  _(() => {
+  y(() => {
     const handleClickOutside = (event) => {
       const path = event.composedPath();
       if (floatingRef.current && !path.includes(floatingRef.current) && referenceRef.current && !path.includes(referenceRef.current)) {
@@ -1192,7 +1192,7 @@ function useCloseOnClickOutside(floatingRef, referenceRef, setShowContent) {
   }, [floatingRef, referenceRef, setShowContent]);
 }
 function useCloseOnEsc(setShowHelp) {
-  _(() => {
+  y(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         setShowHelp(false);
@@ -1206,9 +1206,9 @@ function useCloseOnEsc(setShowHelp) {
 }
 const dropdownClass = "z-10 absolute w-max top-0 left-0 bg-white p-4 border border-gray-200 shadow-lg rounded-md";
 const Dropdown = ({ children, buttonTitle, placement }) => {
-  const [showContent, setShowContent] = p(false);
-  const referenceRef = F(null);
-  const floatingRef = F(null);
+  const [showContent, setShowContent] = h(false);
+  const referenceRef = A(null);
+  const floatingRef = A(null);
   useFloatingUi(referenceRef, floatingRef, [offset(4), shift(), flip()], placement);
   useCloseOnClickOutside(floatingRef, referenceRef, setShowContent);
   useCloseOnEsc(setShowContent);
@@ -1273,13 +1273,13 @@ const SegmentSelector = ({
   );
 };
 function useDisplayedSegments(sequenceType) {
-  const referenceGenome = P(ReferenceGenomeContext);
+  const referenceGenome = x(ReferenceGenomeContext);
   const displayedSegments = getSegmentNames(referenceGenome, sequenceType).map((segment) => ({
     segment,
     label: segment,
     checked: true
   }));
-  return p(displayedSegments);
+  return h(displayedSegments);
 }
 const CsvDownloadButton = ({
   label = "Download",
@@ -1323,7 +1323,7 @@ class UserFacingError extends Error {
 }
 const ErrorDisplay = ({ error }) => {
   console.error(error);
-  const ref = F(null);
+  const ref = A(null);
   return /* @__PURE__ */ u$1("div", { className: "h-full w-full rounded-md border-2 border-gray-100 p-2 flex items-center justify-center flex-col", children: [
     /* @__PURE__ */ u$1("div", { className: "text-red-700 font-bold", children: "Error" }),
     /* @__PURE__ */ u$1("div", { children: [
@@ -1363,9 +1363,9 @@ const Headline = ({ heading, children }) => {
   return /* @__PURE__ */ u$1(ResizingHeadline, { heading, children });
 };
 const ResizingHeadline = ({ heading, children }) => {
-  const ref = F(null);
-  const [h1Height, setH1Height] = p("2rem");
-  _(() => {
+  const ref = A(null);
+  const [h1Height, setH1Height] = h("2rem");
+  y(() => {
     if (ref.current) {
       const h1Height2 = ref.current.getBoundingClientRect().height;
       setH1Height(`${h1Height2}px`);
@@ -1384,9 +1384,9 @@ const ErrorBoundary = ({ size: size2, headline, children }) => {
   return /* @__PURE__ */ u$1(Fragment, { children });
 };
 const Info = ({ children, height }) => {
-  const [showHelp, setShowHelp] = p(false);
-  const referenceRef = F(null);
-  const floatingRef = F(null);
+  const [showHelp, setShowHelp] = h(false);
+  const referenceRef = A(null);
+  const floatingRef = A(null);
   useFloatingUi(referenceRef, floatingRef, [
     offset(10),
     shift(),
@@ -1471,7 +1471,7 @@ const MinMaxRangeSlider = ({
 }) => {
   const sliderColor = "#C6C6C6";
   const rangeColor = "#387bbe";
-  const [zIndexTo, setZIndexTo] = p(0);
+  const [zIndexTo, setZIndexTo] = h(0);
   const onMinChange = (event) => {
     const input = event.target;
     const minValue = Number(input.value);
@@ -1540,8 +1540,8 @@ const percentageInRange = (percentage) => {
   return percentage <= 100 && percentage >= 0;
 };
 const PercentInput = ({ percentage, setPercentage }) => {
-  const [internalPercentage, setInternalPercentage] = p(percentage);
-  _(() => {
+  const [internalPercentage, setInternalPercentage] = h(percentage);
+  y(() => {
     setInternalPercentage(percentage);
   }, [percentage]);
   const handleInputChange = (event) => {
@@ -1622,16 +1622,16 @@ const ProportionSelectorDropdown = ({
   ) });
 };
 const Tabs = ({ tabs, toolbar }) => {
-  const [activeTab, setActiveTab] = p(tabs[0].title);
-  const [heightOfTabs, setHeightOfTabs] = p("3rem");
-  const tabRef = F(null);
+  const [activeTab, setActiveTab] = h(tabs[0].title);
+  const [heightOfTabs, setHeightOfTabs] = h("3rem");
+  const tabRef = A(null);
   const updateHeightOfTabs = () => {
     if (tabRef.current) {
       const heightOfTabs2 = tabRef.current.getBoundingClientRect().height;
       setHeightOfTabs(`${heightOfTabs2}px`);
     }
   };
-  _(() => {
+  y(() => {
     updateHeightOfTabs();
     window.addEventListener("resize", updateHeightOfTabs);
     return () => {
@@ -1667,10 +1667,10 @@ const Tabs = ({ tabs, toolbar }) => {
   ] });
 };
 function useQuery(fetchDataCallback, dependencies = []) {
-  const [data, setData] = p(null);
-  const [error, setError] = p(null);
-  const [isLoading, setIsLoading] = p(true);
-  _(() => {
+  const [data, setData] = h(null);
+  const [error, setError] = h(null);
+  const [isLoading, setIsLoading] = h(true);
+  y(() => {
     const fetchData = async () => {
       setIsLoading(true);
       try {
@@ -1688,7 +1688,7 @@ function useQuery(fetchDataCallback, dependencies = []) {
   return { data, error, isLoading };
 }
 const MutationComparison = ({
-  variants,
+  lapisFilters,
   sequenceType,
   views,
   width,
@@ -1700,7 +1700,7 @@ const MutationComparison = ({
   return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
     MutationComparisonInner,
     {
-      variants,
+      lapisFilters,
       sequenceType,
       views,
       pageSize
@@ -1708,15 +1708,15 @@ const MutationComparison = ({
   ) }) }) });
 };
 const MutationComparisonInner = ({
-  variants,
+  lapisFilters,
   sequenceType,
   views,
   pageSize
 }) => {
-  const lapis = P(LapisUrlContext);
+  const lapis = x(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
-    return queryMutationData(variants, sequenceType, lapis);
-  }, [variants, sequenceType, lapis]);
+    return queryMutationData(lapisFilters, sequenceType, lapis);
+  }, [lapisFilters, sequenceType, lapis]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
@@ -1742,13 +1742,13 @@ const MutationComparisonTabs = ({
   sequenceType,
   pageSize
 }) => {
-  const [proportionInterval, setProportionInterval] = p({ min: 0.5, max: 1 });
-  const [displayedMutationTypes, setDisplayedMutationTypes] = p([
+  const [proportionInterval, setProportionInterval] = h({ min: 0.5, max: 1 });
+  const [displayedMutationTypes, setDisplayedMutationTypes] = h([
     { label: "Substitutions", checked: true, type: "substitution" },
     { label: "Deletions", checked: true, type: "deletion" }
   ]);
   const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
-  const filteredData = q(
+  const filteredData = T(
     () => filterMutationData(data, displayedSegments, displayedMutationTypes),
     [data, displayedSegments, displayedMutationTypes]
   );
@@ -2299,7 +2299,11 @@ html {
 }
 
 * {
-  scrollbar-color: currentColor transparent;
+  scrollbar-color: color-mix(in oklch, currentColor 35%, transparent) transparent;
+}
+
+*:hover {
+  scrollbar-color: color-mix(in oklch, currentColor 60%, transparent) transparent;
 }
 
 :root {
@@ -2931,8 +2935,8 @@ html {
           appearance: none;
   height: 3rem;
   min-height: 3rem;
-  padding-left: 1rem;
-  padding-right: 2.5rem;
+  padding-inline-start: 1rem;
+  padding-inline-end: 2.5rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   line-height: 2;
@@ -2974,7 +2978,9 @@ html {
   display: grid;
   align-items: flex-end;
 }
-.tabs-lifted:has(.tab-content[class^="rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"]) .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
+.tabs-lifted:has(.tab-content[class^="rounded-"])
+    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])), .tabs-lifted:has(.tab-content[class*=" rounded-"])
+    .tab:first-child:not(:is(.tab-active, [aria-selected="true"])) {
   border-bottom-color: transparent;
 }
 .tab {
@@ -3307,6 +3313,9 @@ input.tab:checked + .tab-content,
   margin-bottom: 0px;
   margin-inline-start: -1px;
 }
+.join > :where(*:not(:first-child)):is(.btn) {
+  margin-inline-start: calc(var(--border-btn) * -1);
+}
 .loading {
   pointer-events: none;
   display: inline-block;
@@ -3812,7 +3821,7 @@ input.tab:checked + .tab-content,
 .tabs-boxed .tab {
   border-radius: var(--rounded-btn, 0.5rem);
 }
-:is([dir="rtl"] .table) {
+.table:where([dir="rtl"], [dir="rtl"] *) {
   text-align: right;
 }
 .table :where(th, td) {
@@ -3828,7 +3837,7 @@ input.tab:checked + .tab-content,
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
 }
-.table :where(thead tr, tbody tr:not(:last-child),tbody tr:first-child:last-child) {
+.table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
   border-bottom-width: 1px;
   --tw-border-opacity: 1;
   border-bottom-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
@@ -4057,11 +4066,17 @@ input.tab:checked + .tab-content,
   margin-right: 0px;
   margin-top: -1px;
 }
+.join.join-vertical > :where(*:not(:first-child)):is(.btn) {
+  margin-top: calc(var(--border-btn) * -1);
+}
 .join.join-horizontal > :where(*:not(:first-child)) {
   margin-top: 0px;
   margin-bottom: 0px;
   margin-inline-start: -1px;
 }
+.join.join-horizontal > :where(*:not(:first-child)):is(.btn) {
+  margin-inline-start: calc(var(--border-btn) * -1);
+}
 .modal-top :where(.modal-box) {
   width: 100%;
   max-width: none;
@@ -4112,7 +4127,7 @@ input.tab:checked + .tab-content,
   content: "";
   margin-inline-start: -100%;
 }
-:is([dir="rtl"] .steps-horizontal .step):before {
+.steps-horizontal .step:where([dir="rtl"], [dir="rtl"] *):before {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -4131,7 +4146,7 @@ input.tab:checked + .tab-content,
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   margin-inline-start: 50%;
 }
-:is([dir="rtl"] .steps-vertical .step):before {
+.steps-vertical .step:where([dir="rtl"], [dir="rtl"] *):before {
   --tw-translate-x: 50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -4165,6 +4180,7 @@ input.tab:checked + .tab-content,
 }
 .tooltip:before {
   max-width: 20rem;
+  white-space: normal;
   border-radius: 0.25rem;
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -4257,6 +4273,10 @@ input.tab:checked + .tab-content,
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
 .my-1 {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
@@ -4268,6 +4288,15 @@ input.tab:checked + .tab-content,
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.ml-2 {
+  margin-left: 0.5rem;
+}
+.ml-2\\.5 {
+  margin-left: 0.625rem;
+}
+.ml-3 {
+  margin-left: 0.75rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -4301,12 +4330,12 @@ input.tab:checked + .tab-content,
 .w-32 {
   width: 8rem;
 }
-.w-40 {
-  width: 10rem;
-}
 .w-64 {
   width: 16rem;
 }
+.w-\\[7\\.5rem\\] {
+  width: 7.5rem;
+}
 .w-full {
   width: 100%;
 }
@@ -4314,8 +4343,8 @@ input.tab:checked + .tab-content,
   width: -moz-max-content;
   width: max-content;
 }
-.min-w-40 {
-  min-width: 10rem;
+.min-w-\\[7\\.5rem\\] {
+  min-width: 7.5rem;
 }
 .max-w-screen-lg {
   max-width: 1024px;
@@ -4341,6 +4370,9 @@ input.tab:checked + .tab-content,
 .flex-wrap {
   flex-wrap: wrap;
 }
+.items-end {
+  align-items: flex-end;
+}
 .items-center {
   align-items: center;
 }
@@ -4470,6 +4502,10 @@ input.tab:checked + .tab-content,
 .text-justify {
   text-align: justify;
 }
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -4499,6 +4535,10 @@ input.tab:checked + .tab-content,
 .leading-5 {
   line-height: 1.25rem;
 }
+.text-\\[\\#606060\\] {
+  --tw-text-opacity: 1;
+  color: rgb(96 96 96 / var(--tw-text-opacity));
+}
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
@@ -4628,7 +4668,7 @@ var __decorateClass$8 = (decorators, target, key, kind) => {
 let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles {
   constructor() {
     super(...arguments);
-    this.variants = [];
+    this.lapisFilters = [];
     this.sequenceType = "nucleotide";
     this.views = ["table"];
     this.width = "100%";
@@ -4640,7 +4680,7 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
     return /* @__PURE__ */ u$1(
       MutationComparison,
       {
-        variants: this.variants,
+        lapisFilters: this.lapisFilters,
         sequenceType: this.sequenceType,
         views: this.views,
         width: this.width,
@@ -4653,7 +4693,7 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
 };
 __decorateClass$8([
   n2({ type: Array })
-], MutationComparisonComponent.prototype, "variants", 2);
+], MutationComparisonComponent.prototype, "lapisFilters", 2);
 __decorateClass$8([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "sequenceType", 2);
@@ -4899,8 +4939,8 @@ class FetchInsertionsOperator {
     return { content };
   }
 }
-function queryInsertions(variant, sequenceType, lapis, signal) {
-  const fetchData = new FetchInsertionsOperator(variant, sequenceType);
+function queryInsertions(lapisFilter, sequenceType, lapis, signal) {
+  const fetchData = new FetchInsertionsOperator(lapisFilter, sequenceType);
   const sortData = new SortOperator(fetchData, (a2, b3) => {
     if (a2.mutation.segment !== b3.mutation.segment) {
       return (a2.mutation.segment ?? "").localeCompare(b3.mutation.segment ?? "");
@@ -4909,9 +4949,9 @@ function queryInsertions(variant, sequenceType, lapis, signal) {
   });
   return sortData.evaluate(lapis, signal);
 }
-async function queryMutationsData(variant, sequenceType, lapis) {
-  const substitutionsOrDeletions = (await querySubstitutionsOrDeletions(variant, sequenceType, lapis)).content;
-  const insertions = (await queryInsertions(variant, sequenceType, lapis)).content;
+async function queryMutationsData(lapisFilter, sequenceType, lapis) {
+  const substitutionsOrDeletions = (await querySubstitutionsOrDeletions(lapisFilter, sequenceType, lapis)).content;
+  const insertions = (await queryInsertions(lapisFilter, sequenceType, lapis)).content;
   return {
     substitutionsOrDeletions,
     insertions
@@ -4939,7 +4979,7 @@ function filterMutationsData(data, displayedSegments, displayedMutationTypes) {
   };
 }
 const Mutations = ({
-  variant,
+  lapisFilter,
   sequenceType,
   views,
   width,
@@ -4948,13 +4988,26 @@ const Mutations = ({
   pageSize
 }) => {
   const size2 = { height, width };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(MutationsInner, { variant, sequenceType, views, pageSize }) }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
+    MutationsInner,
+    {
+      lapisFilter,
+      sequenceType,
+      views,
+      pageSize
+    }
+  ) }) }) });
 };
-const MutationsInner = ({ variant, sequenceType, views, pageSize }) => {
-  const lapis = P(LapisUrlContext);
+const MutationsInner = ({
+  lapisFilter,
+  sequenceType,
+  views,
+  pageSize
+}) => {
+  const lapis = x(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
-    return queryMutationsData(variant, sequenceType, lapis);
-  }, [variant, sequenceType, lapis]);
+    return queryMutationsData(lapisFilter, sequenceType, lapis);
+  }, [lapisFilter, sequenceType, lapis]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
   }
@@ -4967,9 +5020,9 @@ const MutationsInner = ({ variant, sequenceType, views, pageSize }) => {
   return /* @__PURE__ */ u$1(MutationsTabs, { mutationsData: data, sequenceType, views, pageSize });
 };
 const MutationsTabs = ({ mutationsData, sequenceType, views, pageSize }) => {
-  const [proportionInterval, setProportionInterval] = p({ min: 0.05, max: 1 });
+  const [proportionInterval, setProportionInterval] = h({ min: 0.05, max: 1 });
   const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(sequenceType);
-  const [displayedMutationTypes, setDisplayedMutationTypes] = p([
+  const [displayedMutationTypes, setDisplayedMutationTypes] = h([
     { label: "Substitutions", checked: true, type: "substitution" },
     { label: "Deletions", checked: true, type: "deletion" }
   ]);
@@ -5090,7 +5143,7 @@ var __decorateClass$7 = (decorators, target, key, kind) => {
 let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
   constructor() {
     super(...arguments);
-    this.variant = {};
+    this.lapisFilter = {};
     this.sequenceType = "nucleotide";
     this.views = ["table", "grid"];
     this.width = "100%";
@@ -5102,7 +5155,7 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
     return /* @__PURE__ */ u$1(
       Mutations,
       {
-        variant: this.variant,
+        lapisFilter: this.lapisFilter,
         sequenceType: this.sequenceType,
         views: this.views,
         width: this.width,
@@ -5115,7 +5168,7 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
 };
 __decorateClass$7([
   n2({ type: Object })
-], MutationsComponent.prototype, "variant", 2);
+], MutationsComponent.prototype, "lapisFilter", 2);
 __decorateClass$7([
   n2({ type: String })
 ], MutationsComponent.prototype, "sequenceType", 2);
@@ -5213,7 +5266,23 @@ function wilson95PercentConfidenceInterval(observed, sample) {
 }
 const confidenceIntervalDataLabel = (value, lowerLimit, upperLimit, prefix) => {
   const label = prefix ? `${prefix}: ` : "";
-  return `${label}${value.toFixed(3)} (${lowerLimit.toFixed(3)} - ${upperLimit.toFixed(3)})`;
+  return `${label}${value.toFixed(3)} (${lowerLimit == null ? void 0 : lowerLimit.toFixed(3)} - ${upperLimit == null ? void 0 : upperLimit.toFixed(3)})`;
+};
+const getYAxisMax = (maxInData2, axisMax) => {
+  if (!axisMax) {
+    return 1;
+  }
+  switch (axisMax) {
+    case "limitTo1": {
+      return maxInData2 > 1 ? 1 : maxInData2;
+    }
+    case "maxInData": {
+      return maxInData2;
+    }
+    default: {
+      return axisMax;
+    }
+  }
 };
 function getYAxisScale(scaleType) {
   switch (scaleType) {
@@ -5221,35 +5290,37 @@ function getYAxisScale(scaleType) {
       return { beginAtZero: true, type: "linear", min: 0, max: 1 };
     }
     case "logarithmic": {
-      return { type: "logarithmic" };
+      return { type: "logarithmic", max: 1 };
     }
     case "logit":
       return { type: "logit" };
-    default:
-      return { beginAtZero: true, type: "linear" };
   }
 }
 Chart.register(...registerables, LogitScale, BarWithErrorBarsController, BarWithErrorBar);
 const PrevalenceOverTimeBarChart = ({
   data,
   yAxisScaleType,
-  confidenceIntervalMethod
+  confidenceIntervalMethod,
+  yAxisMaxConfig
 }) => {
-  var _a;
+  const nullFirstData = data.map((variantData) => {
+    return {
+      content: variantData.content.sort(sortNullToBeginningThenByDate),
+      displayName: variantData.displayName
+    };
+  });
+  const datasets2 = nullFirstData.map((graphData, index) => getDataset$1(graphData, index, confidenceIntervalMethod));
+  const maxY = yAxisScaleType !== "logit" ? getYAxisMax(maxInData(nullFirstData), yAxisMaxConfig == null ? void 0 : yAxisMaxConfig[yAxisScaleType]) : void 0;
   const config = {
     type: BarWithErrorBarsController.id,
     data: {
-      labels: ((_a = data[0]) == null ? void 0 : _a.content.map((dateRange) => {
-        var _a2;
-        return ((_a2 = dateRange.dateRange) == null ? void 0 : _a2.toString()) ?? "Unknown";
-      })) || [],
-      datasets: data.map((graphData, index) => datasets$1(graphData, index, confidenceIntervalMethod))
+      datasets: datasets2
     },
     options: {
       maintainAspectRatio: false,
       animation: false,
       scales: {
-        y: getYAxisScale(yAxisScaleType)
+        y: { ...getYAxisScale(yAxisScaleType), max: maxY }
       },
       plugins: {
         legend: {
@@ -5261,7 +5332,10 @@ const PrevalenceOverTimeBarChart = ({
   };
   return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
-const datasets$1 = (prevalenceOverTimeVariant, index, confidenceIntervalMethod) => {
+function sortNullToBeginningThenByDate(a2, b3) {
+  return a2.dateRange === null ? -1 : b3.dateRange === null ? 1 : a2.dateRange.toString().localeCompare(b3.dateRange.toString());
+}
+const getDataset$1 = (prevalenceOverTimeVariant, index, confidenceIntervalMethod) => {
   const generalConfig = {
     borderWidth: 1,
     pointRadius: 0,
@@ -5273,16 +5347,22 @@ const datasets$1 = (prevalenceOverTimeVariant, index, confidenceIntervalMethod)
     case "wilson":
       return {
         ...generalConfig,
-        data: prevalenceOverTimeVariant.content.map((dataPoint) => ({
-          y: dataPoint.prevalence,
-          yMin: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit,
-          yMax: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit
-        }))
+        data: prevalenceOverTimeVariant.content.map((dataPoint) => {
+          var _a;
+          return {
+            y: dataPoint.prevalence,
+            yMin: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit,
+            yMax: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit,
+            x: ((_a = dataPoint.dateRange) == null ? void 0 : _a.toString()) ?? "Unknown"
+          };
+        })
       };
     default:
       return {
         ...generalConfig,
-        data: prevalenceOverTimeVariant.content.map((dataPoint) => dataPoint.prevalence)
+        data: prevalenceOverTimeVariant.content.map((dataPoint) => {
+          return { y: dataPoint.prevalence, x: dataPoint.dateRange };
+        })
       };
   }
 };
@@ -6163,17 +6243,28 @@ function getMinMaxNumber(values) {
   return [min, max];
 }
 Chart.register(...registerables, LogitScale);
-const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }) => {
-  const firstDate = data[0].content[0].dateRange;
-  const total = data.map((graphData) => graphData.content.map((dataPoint) => dataPoint.total)).flat();
+const PrevalenceOverTimeBubbleChart = ({
+  data,
+  yAxisScaleType,
+  yAxisMaxConfig
+}) => {
+  const nonNullDateRangeData = data.map((variantData) => {
+    return {
+      content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
+      displayName: variantData.displayName
+    };
+  });
+  const firstDate = nonNullDateRangeData[0].content[0].dateRange;
+  const total = nonNullDateRangeData.map((graphData) => graphData.content.map((dataPoint) => dataPoint.total)).flat();
   const [minTotal, maxTotal] = getMinMaxNumber(total);
   const scaleBubble = (value) => {
     return (value - minTotal) / (maxTotal - minTotal) * 4.5 + 0.5;
   };
+  const maxY = yAxisScaleType !== "logit" ? getYAxisMax(maxInData(nonNullDateRangeData), yAxisMaxConfig == null ? void 0 : yAxisMaxConfig[yAxisScaleType]) : void 0;
   const config = {
     type: "bubble",
     data: {
-      datasets: data.map((graphData, index) => ({
+      datasets: nonNullDateRangeData.map((graphData, index) => ({
         label: graphData.displayName,
         data: graphData.content.filter((dataPoint) => dataPoint.dateRange !== null).map((dataPoint) => ({
           x: minusTemporal(dataPoint.dateRange, firstDate),
@@ -6195,7 +6286,7 @@ const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }) => {
             callback: (value) => addUnit(firstDate, value).toString()
           }
         },
-        y: getYAxisScale(yAxisScaleType)
+        y: { ...getYAxisScale(yAxisScaleType), max: maxY }
       },
       plugins: {
         legend: {
@@ -6207,12 +6298,12 @@ const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }) => {
           callbacks: {
             title: (context) => {
               var _a;
-              const dataset = data[context[0].datasetIndex];
+              const dataset = nonNullDateRangeData[context[0].datasetIndex];
               const dataPoint = dataset.content[context[0].dataIndex];
               return (_a = dataPoint.dateRange) == null ? void 0 : _a.toString();
             },
             label: (context) => {
-              const dataset = data[context.datasetIndex];
+              const dataset = nonNullDateRangeData[context.datasetIndex];
               const dataPoint = dataset.content[context.dataIndex];
               const percentage = (dataPoint.prevalence * 100).toFixed(2);
               const count = dataPoint.count.toFixed(0);
@@ -6230,25 +6321,27 @@ Chart.register(...registerables, LogitScale);
 const PrevalenceOverTimeLineChart = ({
   data,
   yAxisScaleType,
-  confidenceIntervalMethod
+  confidenceIntervalMethod,
+  yAxisMaxConfig
 }) => {
-  var _a;
-  const datasets2 = data.map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod)).flat();
-  const labels = ((_a = data[0]) == null ? void 0 : _a.content.map((dateRange) => {
-    var _a2;
-    return ((_a2 = dateRange.dateRange) == null ? void 0 : _a2.toString()) ?? "Unknown";
-  })) || [];
+  const nonNullDateRangeData = data.map((variantData) => {
+    return {
+      content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
+      displayName: variantData.displayName
+    };
+  });
+  const datasets2 = nonNullDateRangeData.map((graphData, index) => getDataset(graphData, index, confidenceIntervalMethod)).flat();
+  const maxY = yAxisScaleType !== "logit" ? getYAxisMax(maxInData(nonNullDateRangeData), yAxisMaxConfig == null ? void 0 : yAxisMaxConfig[yAxisScaleType]) : void 0;
   const config = {
     type: "line",
     data: {
-      labels,
       datasets: datasets2
     },
     options: {
       animation: false,
       maintainAspectRatio: false,
       scales: {
-        y: getYAxisScale(yAxisScaleType)
+        y: { ...getYAxisScale(yAxisScaleType), max: maxY }
       },
       plugins: {
         legend: {
@@ -6274,9 +6367,13 @@ const getDataset = (prevalenceOverTimeVariant, dataIndex, confidenceIntervalMeth
 };
 const getDatasetCIUpper = (prevalenceOverTimeVariant, dataIndex) => ({
   label: `${prevalenceOverTimeVariant.displayName} CI upper`,
-  data: prevalenceOverTimeVariant.content.map(
-    (dataPoint) => wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit
-  ),
+  data: prevalenceOverTimeVariant.content.map((dataPoint) => {
+    var _a;
+    return {
+      y: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).upperLimit,
+      x: (_a = dataPoint.dateRange) == null ? void 0 : _a.toString()
+    };
+  }),
   borderWidth: 0,
   pointRadius: 0,
   fill: "+1",
@@ -6284,9 +6381,13 @@ const getDatasetCIUpper = (prevalenceOverTimeVariant, dataIndex) => ({
 });
 const getDatasetCILower = (prevalenceOverTimeVariant, dataIndex) => ({
   label: `${prevalenceOverTimeVariant.displayName} CI lower`,
-  data: prevalenceOverTimeVariant.content.map(
-    (dataPoint) => wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit
-  ),
+  data: prevalenceOverTimeVariant.content.map((dataPoint) => {
+    var _a;
+    return {
+      y: wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total).lowerLimit,
+      x: (_a = dataPoint.dateRange) == null ? void 0 : _a.toString()
+    };
+  }),
   borderWidth: 0,
   pointRadius: 0,
   fill: "-1",
@@ -6294,7 +6395,16 @@ const getDatasetCILower = (prevalenceOverTimeVariant, dataIndex) => ({
 });
 const getDatasetLine = (prevalenceOverTimeVariant, dataIndex) => ({
   label: prevalenceOverTimeVariant.displayName,
-  data: prevalenceOverTimeVariant.content.map((dataPoint) => dataPoint.prevalence),
+  data: prevalenceOverTimeVariant.content.map((dataPoint) => {
+    var _a;
+    const ciLimits = wilson95PercentConfidenceInterval(dataPoint.count, dataPoint.total);
+    return {
+      y: dataPoint.prevalence,
+      x: (_a = dataPoint.dateRange) == null ? void 0 : _a.toString(),
+      yCiUpper: ciLimits.upperLimit,
+      yCiLower: ciLimits.lowerLimit
+    };
+  }),
   borderWidth: 1,
   pointRadius: 0,
   borderColor: singleGraphColorRGBAById(dataIndex),
@@ -6310,20 +6420,17 @@ const tooltip$1 = (confidenceIntervalMethod) => {
       return {
         ...generalConfig,
         filter: ({ datasetIndex }) => {
-          return datasetIndex % 3 === 1;
+          return isNotCiIndex(datasetIndex);
         },
         callbacks: {
           label: (context) => {
-            if (context.datasetIndex % 3 === 1) {
-              const value = context.dataset.data[context.dataIndex];
-              const ciLower = context.dataset.data[context.dataIndex - 1];
-              const ciUpper = context.dataset.data[context.dataIndex + 1];
-              if (typeof value !== "number" || typeof ciLower !== "number" || typeof ciUpper !== "number") {
-                return "";
-              }
-              return confidenceIntervalDataLabel(value, ciLower, ciUpper, context.dataset.label);
-            }
-            return context.dataset.label;
+            const dataPoint = context.dataset.data[context.dataIndex];
+            return confidenceIntervalDataLabel(
+              dataPoint.y,
+              dataPoint.yCiLower,
+              dataPoint.yCiUpper,
+              context.dataset.label
+            );
           }
         }
       };
@@ -6331,6 +6438,9 @@ const tooltip$1 = (confidenceIntervalMethod) => {
       return generalConfig;
   }
 };
+function isNotCiIndex(datasetIndex) {
+  return datasetIndex % 3 === 1;
+}
 const PrevalenceOverTimeTable = ({ data, granularity, pageSize }) => {
   const getSplitColumns = (data2) => {
     return data2.map((dataset) => ({
@@ -6666,8 +6776,8 @@ const ScalingSelector = ({
   );
 };
 const PrevalenceOverTime = ({
-  numerator,
-  denominator,
+  numeratorFilter,
+  denominatorFilter,
   granularity,
   smoothingWindow,
   views,
@@ -6676,37 +6786,47 @@ const PrevalenceOverTime = ({
   height,
   headline = "Prevalence over time",
   lapisDateField,
-  pageSize
+  pageSize,
+  yAxisMaxConfig
 }) => {
   const size2 = { height, width };
   return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
     PrevalenceOverTimeInner,
     {
-      numerator,
-      denominator,
+      numeratorFilter,
+      denominatorFilter,
       granularity,
       smoothingWindow,
       views,
       confidenceIntervalMethods,
       lapisDateField,
-      pageSize
+      pageSize,
+      yAxisMaxConfig
     }
   ) }) }) });
 };
 const PrevalenceOverTimeInner = ({
-  numerator,
-  denominator,
+  numeratorFilter,
+  denominatorFilter,
   granularity,
   smoothingWindow,
   views,
   confidenceIntervalMethods,
   lapisDateField,
-  pageSize
+  pageSize,
+  yAxisMaxConfig
 }) => {
-  const lapis = P(LapisUrlContext);
+  const lapis = x(LapisUrlContext);
   const { data, error, isLoading } = useQuery(
-    () => queryPrevalenceOverTime(numerator, denominator, granularity, smoothingWindow, lapis, lapisDateField),
-    [lapis, numerator, denominator, granularity, smoothingWindow]
+    () => queryPrevalenceOverTime(
+      numeratorFilter,
+      denominatorFilter,
+      granularity,
+      smoothingWindow,
+      lapis,
+      lapisDateField
+    ),
+    [lapis, numeratorFilter, denominatorFilter, granularity, smoothingWindow]
   );
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -6724,7 +6844,8 @@ const PrevalenceOverTimeInner = ({
       data,
       granularity,
       confidenceIntervalMethods,
-      pageSize
+      pageSize,
+      yAxisMaxConfig
     }
   );
 };
@@ -6733,10 +6854,11 @@ const PrevalenceOverTimeTabs = ({
   data,
   granularity,
   confidenceIntervalMethods,
-  pageSize
+  pageSize,
+  yAxisMaxConfig
 }) => {
-  const [yAxisScaleType, setYAxisScaleType] = p("linear");
-  const [confidenceIntervalMethod, setConfidenceIntervalMethod] = p(
+  const [yAxisScaleType, setYAxisScaleType] = h("linear");
+  const [confidenceIntervalMethod, setConfidenceIntervalMethod] = h(
     confidenceIntervalMethods.length > 0 ? confidenceIntervalMethods[0] : "none"
   );
   const getTab = (view) => {
@@ -6749,7 +6871,8 @@ const PrevalenceOverTimeTabs = ({
             {
               data,
               yAxisScaleType,
-              confidenceIntervalMethod
+              confidenceIntervalMethod,
+              yAxisMaxConfig
             }
           )
         };
@@ -6761,14 +6884,22 @@ const PrevalenceOverTimeTabs = ({
             {
               data,
               yAxisScaleType,
-              confidenceIntervalMethod
+              confidenceIntervalMethod,
+              yAxisMaxConfig
             }
           )
         };
       case "bubble":
         return {
           title: "Bubble",
-          content: /* @__PURE__ */ u$1(PrevalenceOverTimeBubbleChart, { data, yAxisScaleType })
+          content: /* @__PURE__ */ u$1(
+            PrevalenceOverTimeBubbleChart,
+            {
+              data,
+              yAxisScaleType,
+              yAxisMaxConfig
+            }
+          )
         };
       case "table":
         return {
@@ -6830,6 +6961,7 @@ const PrevalenceOverTimeInfo = () => {
     /* @__PURE__ */ u$1(InfoParagraph, { children: "Prevalence over time info." })
   ] });
 };
+const maxInData = (data) => Math.max(...data.flatMap((variant) => variant.content.map((dataPoint) => dataPoint.prevalence)));
 var __defProp$6 = Object.defineProperty;
 var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
 var __decorateClass$6 = (decorators, target, key, kind) => {
@@ -6843,8 +6975,8 @@ var __decorateClass$6 = (decorators, target, key, kind) => {
 let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles {
   constructor() {
     super(...arguments);
-    this.numerator = { displayName: "", lapisFilter: {} };
-    this.denominator = {};
+    this.numeratorFilter = { displayName: "", lapisFilter: {} };
+    this.denominatorFilter = {};
     this.granularity = "day";
     this.smoothingWindow = 0;
     this.views = ["bar", "line", "bubble", "table"];
@@ -6854,13 +6986,15 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     this.height = "700px";
     this.lapisDateField = "date";
     this.pageSize = false;
+    this.yAxisMaxLinear = 1;
+    this.yAxisMaxLogarithmic = 1;
   }
   render() {
     return /* @__PURE__ */ u$1(
       PrevalenceOverTime,
       {
-        numerator: this.numerator,
-        denominator: this.denominator,
+        numeratorFilter: this.numeratorFilter,
+        denominatorFilter: this.denominatorFilter,
         granularity: this.granularity,
         smoothingWindow: this.smoothingWindow,
         views: this.views,
@@ -6869,17 +7003,21 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         height: this.height,
         headline: this.headline,
         lapisDateField: this.lapisDateField,
-        pageSize: this.pageSize
+        pageSize: this.pageSize,
+        yAxisMaxConfig: {
+          linear: this.yAxisMaxLinear,
+          logarithmic: this.yAxisMaxLogarithmic
+        }
       }
     );
   }
 };
 __decorateClass$6([
   n2({ type: Object })
-], PrevalenceOverTimeComponent.prototype, "numerator", 2);
+], PrevalenceOverTimeComponent.prototype, "numeratorFilter", 2);
 __decorateClass$6([
   n2({ type: Object })
-], PrevalenceOverTimeComponent.prototype, "denominator", 2);
+], PrevalenceOverTimeComponent.prototype, "denominatorFilter", 2);
 __decorateClass$6([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "granularity", 2);
@@ -6907,11 +7045,18 @@ __decorateClass$6([
 __decorateClass$6([
   n2({ type: Object })
 ], PrevalenceOverTimeComponent.prototype, "pageSize", 2);
+__decorateClass$6([
+  n2({ type: String })
+], PrevalenceOverTimeComponent.prototype, "yAxisMaxLinear", 2);
+__decorateClass$6([
+  n2({ type: String })
+], PrevalenceOverTimeComponent.prototype, "yAxisMaxLogarithmic", 2);
 PrevalenceOverTimeComponent = __decorateClass$6([
   t$2("gs-prevalence-over-time")
 ], PrevalenceOverTimeComponent);
 Chart.register(...registerables, LogitScale);
-const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }) => {
+const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType, yAxisMaxConfig }) => {
+  const maxY = yAxisScaleType !== "logit" ? getYAxisMax(Math.max(...data.proportion), yAxisMaxConfig == null ? void 0 : yAxisMaxConfig[yAxisScaleType]) : void 0;
   const config = {
     type: "line",
     data: {
@@ -6922,7 +7067,7 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }) => {
       maintainAspectRatio: false,
       animation: false,
       scales: {
-        y: getYAxisScale(yAxisScaleType)
+        y: { ...getYAxisScale(yAxisScaleType), max: maxY }
       },
       plugins: {
         legend: {
@@ -6932,17 +7077,38 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }) => {
       }
     }
   };
-  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),
-      "% (",
-      (data.params.fd.ciLower * 100).toFixed(2),
-      "% -",
-      " ",
-      (data.params.fd.ciUpper * 100).toFixed(2),
-      "%)"
+  return /* @__PURE__ */ u$1("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ u$1(
+      RelativeGrowthAdvantageDisplay,
+      {
+        relativeAdvantage: data.params.fd.value,
+        relativeAdvantageLowerBound: data.params.fd.ciLower,
+        relativeAdvantageUpperBound: data.params.fd.ciUpper
+      }
+    ),
+    /* @__PURE__ */ u$1("div", { className: "flex-1", children: /* @__PURE__ */ u$1(GsChart, { configuration: config }) })
+  ] });
+};
+const RelativeGrowthAdvantageDisplay = ({
+  relativeAdvantage,
+  relativeAdvantageLowerBound,
+  relativeAdvantageUpperBound
+}) => {
+  return /* @__PURE__ */ u$1("div", { class: "mx-auto flex items-end flex-wrap", children: [
+    /* @__PURE__ */ u$1("span", { class: "text-[#606060]", children: "Relative advantage:" }),
+    /* @__PURE__ */ u$1("div", { children: [
+      /* @__PURE__ */ u$1("span", { class: "text-2xl ml-3", children: [
+        " ",
+        formatProportion(relativeAdvantage),
+        " "
+      ] }),
+      /* @__PURE__ */ u$1("span", { class: "ml-2.5", children: [
+        "(",
+        formatProportion(relativeAdvantageLowerBound),
+        " - ",
+        formatProportion(relativeAdvantageUpperBound),
+        ")"
+      ] })
     ] })
   ] });
 };
@@ -7101,36 +7267,39 @@ const RelativeGrowthAdvantage = ({
   views,
   width,
   height,
-  numerator,
-  denominator,
+  numeratorFilter,
+  denominatorFilter,
   generationTime,
   headline = "Relative growth advantage",
-  lapisDateField
+  lapisDateField,
+  yAxisMaxConfig
 }) => {
   const size2 = { height, width };
   return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, headline, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(Headline, { heading: headline, children: /* @__PURE__ */ u$1(
     RelativeGrowthAdvantageInner,
     {
       views,
-      numerator,
-      denominator,
+      numeratorFilter,
+      denominatorFilter,
       generationTime,
-      lapisDateField
+      lapisDateField,
+      yAxisMaxConfig
     }
   ) }) }) });
 };
 const RelativeGrowthAdvantageInner = ({
-  numerator,
-  denominator,
+  numeratorFilter,
+  denominatorFilter,
   generationTime,
   views,
-  lapisDateField
+  lapisDateField,
+  yAxisMaxConfig
 }) => {
-  const lapis = P(LapisUrlContext);
-  const [yAxisScaleType, setYAxisScaleType] = p("linear");
+  const lapis = x(LapisUrlContext);
+  const [yAxisScaleType, setYAxisScaleType] = h("linear");
   const { data, error, isLoading } = useQuery(
-    () => queryRelativeGrowthAdvantage(numerator, denominator, generationTime, lapis, lapisDateField),
-    [lapis, numerator, denominator, generationTime, views]
+    () => queryRelativeGrowthAdvantage(numeratorFilter, denominatorFilter, generationTime, lapis, lapisDateField),
+    [lapis, numeratorFilter, denominatorFilter, generationTime, views]
   );
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -7148,7 +7317,8 @@ const RelativeGrowthAdvantageInner = ({
       yAxisScaleType,
       setYAxisScaleType,
       views,
-      generationTime
+      generationTime,
+      yAxisMaxConfig
     }
   );
 };
@@ -7157,7 +7327,8 @@ const RelativeGrowthAdvantageTabs = ({
   yAxisScaleType,
   setYAxisScaleType,
   views,
-  generationTime
+  generationTime,
+  yAxisMaxConfig
 }) => {
   const getTab = (view) => {
     switch (view) {
@@ -7172,7 +7343,8 @@ const RelativeGrowthAdvantageTabs = ({
                 observed: data.observedProportions,
                 params: data.params
               },
-              yAxisScaleType
+              yAxisScaleType,
+              yAxisMaxConfig
             }
           )
         };
@@ -7233,37 +7405,43 @@ var __decorateClass$5 = (decorators, target, key, kind) => {
 let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
   constructor() {
     super(...arguments);
-    this.numerator = {};
-    this.denominator = {};
+    this.numeratorFilter = {};
+    this.denominatorFilter = {};
     this.generationTime = 7;
     this.views = ["line"];
     this.headline = "Relative growth advantage";
     this.width = "100%";
     this.height = "700px";
     this.lapisDateField = "date";
+    this.yAxisMaxLinear = 1;
+    this.yAxisMaxLogarithmic = 1;
   }
   render() {
     return /* @__PURE__ */ u$1(
       RelativeGrowthAdvantage,
       {
-        numerator: this.numerator,
-        denominator: this.denominator,
+        numeratorFilter: this.numeratorFilter,
+        denominatorFilter: this.denominatorFilter,
         generationTime: this.generationTime,
         views: this.views,
         width: this.width,
         height: this.height,
         headline: this.headline,
-        lapisDateField: this.lapisDateField
+        lapisDateField: this.lapisDateField,
+        yAxisMaxConfig: {
+          linear: this.yAxisMaxLinear,
+          logarithmic: this.yAxisMaxLogarithmic
+        }
       }
     );
   }
 };
 __decorateClass$5([
   n2({ type: Object })
-], RelativeGrowthAdvantageComponent.prototype, "numerator", 2);
+], RelativeGrowthAdvantageComponent.prototype, "numeratorFilter", 2);
 __decorateClass$5([
   n2({ type: Object })
-], RelativeGrowthAdvantageComponent.prototype, "denominator", 2);
+], RelativeGrowthAdvantageComponent.prototype, "denominatorFilter", 2);
 __decorateClass$5([
   n2({ type: Number })
 ], RelativeGrowthAdvantageComponent.prototype, "generationTime", 2);
@@ -7282,29 +7460,15 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "lapisDateField", 2);
+__decorateClass$5([
+  n2({ type: String })
+], RelativeGrowthAdvantageComponent.prototype, "yAxisMaxLinear", 2);
+__decorateClass$5([
+  n2({ type: String })
+], RelativeGrowthAdvantageComponent.prototype, "yAxisMaxLogarithmic", 2);
 RelativeGrowthAdvantageComponent = __decorateClass$5([
   t$2("gs-relative-growth-advantage")
 ], RelativeGrowthAdvantageComponent);
-const AggregateTable = ({ data, fields, pageSize }) => {
-  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, pageSize });
-};
 const compareAscending = (a2, b3) => {
   if (typeof a2 === "number" && typeof b3 === "number") {
     return a2 - b3;
@@ -7313,12 +7477,12 @@ const compareAscending = (a2, b3) => {
   const strB = b3 != null ? String(b3) : "";
   return strA.localeCompare(strB);
 };
-async function queryAggregateData(variant, fields, lapis, initialSort = { field: "count", direction: "descending" }, signal) {
+async function queryAggregateData(lapisFilter, fields, lapis, initialSort = { field: "count", direction: "descending" }, signal) {
   const validSortFields = ["count", "proportion", ...fields];
   if (!validSortFields.includes(initialSort.field)) {
     throw new Error(`InitialSort field not in fields. Valid fields are: ${validSortFields.join(", ")}`);
   }
-  const fetchData = new FetchAggregatedOperator(variant, fields);
+  const fetchData = new FetchAggregatedOperator(lapisFilter, fields);
   const sortData = new SortOperator(fetchData, (a2, b3) => {
     return initialSort.direction === "ascending" ? compareAscending(a2[initialSort.field], b3[initialSort.field]) : compareAscending(b3[initialSort.field], a2[initialSort.field]);
   });
@@ -7331,6 +7495,28 @@ async function queryAggregateData(variant, fields, lapis, initialSort = { field:
     })
   );
 }
+const AggregateTable = ({ data, fields, pageSize }) => {
+  const headers = [
+    ...fields.map((field) => {
+      return {
+        name: field,
+        sort: {
+          compare: compareAscending
+        }
+      };
+    }),
+    {
+      name: "count",
+      sort: true
+    },
+    {
+      name: "proportion",
+      sort: true,
+      formatter: (cell) => formatProportion(cell)
+    }
+  ];
+  return /* @__PURE__ */ u$1(Table, { data, columns: headers, pageSize });
+};
 const Aggregate = ({
   views,
   width,
@@ -7363,7 +7549,7 @@ const AggregateInner = ({
   initialSortDirection,
   pageSize
 }) => {
-  const lapis = P(LapisUrlContext);
+  const lapis = x(LapisUrlContext);
   const { data, error, isLoading } = useQuery(async () => {
     return queryAggregateData(filter, fields, lapis, { field: initialSortField, direction: initialSortDirection });
   }, [filter, fields, lapis]);
@@ -7616,19 +7802,19 @@ const DateRangeSelectorInner = ({
     earliestDate,
     customSelectOptions
   );
-  const fromDatePickerRef = F(null);
-  const toDatePickerRef = F(null);
-  const divRef = F(null);
-  const [dateFromPicker, setDateFromPicker] = p(null);
-  const [dateToPicker, setDateToPicker] = p(null);
-  const [selectedDateRange, setSelectedDateRange] = p(
+  const fromDatePickerRef = A(null);
+  const toDatePickerRef = A(null);
+  const divRef = A(null);
+  const [dateFromPicker, setDateFromPicker] = h(null);
+  const [dateToPicker, setDateToPicker] = h(null);
+  const [selectedDateRange, setSelectedDateRange] = h(
     initialValues.initialSelectedDateRange
   );
-  const [selectedDates, setSelectedDates] = p({
+  const [selectedDates, setSelectedDates] = h({
     dateFrom: initialValues.initialSelectedDateFrom,
     dateTo: initialValues.initialSelectedDateTo
   });
-  _(() => {
+  y(() => {
     const commonConfig = {
       allowInput: true,
       dateFormat: "Y-m-d"
@@ -7707,7 +7893,7 @@ const DateRangeSelectorInner = ({
       {
         items: getSelectableOptions(customSelectOptions),
         selected: selectedDateRange,
-        selectStyle: "select-bordered rounded-none flex-grow w-40",
+        selectStyle: "select-bordered rounded-none flex-grow min-w-[7.5rem]",
         onChange: (event) => {
           event.preventDefault();
           const select = event.target;
@@ -7720,9 +7906,8 @@ const DateRangeSelectorInner = ({
       /* @__PURE__ */ u$1(
         "input",
         {
-          class: "input input-bordered rounded-none flex-grow min-w-40",
+          class: "input input-bordered rounded-none flex-grow w-[7.5rem]",
           type: "text",
-          size: 10,
           placeholder: "Date from",
           ref: fromDatePickerRef,
           onChange: onChangeDateFrom,
@@ -7732,9 +7917,8 @@ const DateRangeSelectorInner = ({
       /* @__PURE__ */ u$1(
         "input",
         {
-          class: "input input-bordered rounded-none flex-grow min-w-40",
+          class: "input input-bordered rounded-none flex-grow w-[7.5rem]",
           type: "text",
-          size: 10,
           placeholder: "Date to",
           ref: toDatePickerRef,
           onChange: onChangeDateTo,
@@ -7805,7 +7989,7 @@ DateRangeSelectorComponent = __decorateClass$3([
   t$2("gs-date-range-selector")
 ], DateRangeSelectorComponent);
 async function fetchAutocompletionList(fields, lapis, signal) {
-  const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1).fill(0).map((_2, i2) => i2 + 1).map((i2) => fields.slice(i2).reduce((acc, field) => ({ ...acc, [field]: null }), {}));
+  const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1).fill(0).map((_, i2) => i2 + 1).map((i2) => fields.slice(i2).reduce((acc, field) => ({ ...acc, [field]: null }), {}));
   const fetchAggregatedOperator = new FetchAggregatedOperator({}, fields);
   let data;
   try {
@@ -7857,10 +8041,10 @@ const LocationFilter = ({
   return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(LocationFilterInner, { initialValue, fields, placeholderText }) }) });
 };
 const LocationFilterInner = ({ initialValue, fields, placeholderText }) => {
-  const lapis = P(LapisUrlContext);
-  const [value, setValue] = p(initialValue ?? "");
-  const [unknownLocation, setUnknownLocation] = p(false);
-  const divRef = F(null);
+  const lapis = x(LapisUrlContext);
+  const [value, setValue] = h(initialValue ?? "");
+  const [unknownLocation, setUnknownLocation] = h(false);
+  const divRef = A(null);
   const { data, error, isLoading } = useQuery(() => fetchAutocompletionList(fields, lapis), [fields, lapis]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -7981,8 +8165,8 @@ const TextInputInner = ({
   placeholderText,
   initialValue
 }) => {
-  const lapis = P(LapisUrlContext);
-  const inputRef = F(null);
+  const lapis = x(LapisUrlContext);
+  const inputRef = A(null);
   const { data, error, isLoading } = useQuery(() => fetchAutocompleteList(lapis, lapisField), [lapisField, lapis]);
   if (isLoading) {
     return /* @__PURE__ */ u$1(LoadingDisplay, {});
@@ -8074,7 +8258,7 @@ TextInputComponent = __decorateClass$1([
   t$2("gs-text-input")
 ], TextInputComponent);
 const ReferenceGenomesAwaiter = ({ children }) => {
-  const referenceGenome = P(ReferenceGenomeContext);
+  const referenceGenome = x(ReferenceGenomeContext);
   if (isNotInitialized(referenceGenome)) {
     return /* @__PURE__ */ u$1("div", { className: "laoding loading-spinner loading-md", children: "Loading..." });
   }
@@ -8153,13 +8337,13 @@ const MutationFilter = ({ initialValue, width }) => {
   return /* @__PURE__ */ u$1(ErrorBoundary, { size: { height: "3.375rem", width }, children: /* @__PURE__ */ u$1("div", { style: width, children: /* @__PURE__ */ u$1(MutationFilterInner, { initialValue }) }) });
 };
 const MutationFilterInner = ({ initialValue }) => {
-  const referenceGenome = P(ReferenceGenomeContext);
-  const [selectedFilters, setSelectedFilters] = p(
+  const referenceGenome = x(ReferenceGenomeContext);
+  const [selectedFilters, setSelectedFilters] = h(
     getInitialState(initialValue, referenceGenome)
   );
-  const [inputValue, setInputValue] = p("");
-  const [isError, setIsError] = p(false);
-  const formRef = F(null);
+  const [inputValue, setInputValue] = h("");
+  const [isError, setIsError] = h(false);
+  const formRef = A(null);
   const handleSubmit = (event) => {
     event.preventDefault();
     if (inputValue === "") {