@genspectrum/dashboard-components 0.4.5 → 0.5.0

package/dist/dashboard-components.js

@@ -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
       };
     })
   );
@@ -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 { 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, {});
   }
@@ -2931,8 +2931,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 +2974,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 {
@@ -3812,7 +3814,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 +3830,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)));
@@ -4112,7 +4114,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 +4133,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 +4167,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 +4260,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 +4275,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;
 }
@@ -4341,6 +4357,9 @@ input.tab:checked + .tab-content,
 .flex-wrap {
   flex-wrap: wrap;
 }
+.items-end {
+  align-items: flex-end;
+}
 .items-center {
   align-items: center;
 }
@@ -4470,6 +4489,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 +4522,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 +4655,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 +4667,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 +4680,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 +4926,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 +4936,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 +4966,7 @@ function filterMutationsData(data, displayedSegments, displayedMutationTypes) {
   };
 }
 const Mutations = ({
-  variant,
+  lapisFilter,
   sequenceType,
   views,
   width,
@@ -4948,13 +4975,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 MutationsInner = ({
+  lapisFilter,
+  sequenceType,
+  views,
+  pageSize
+}) => {
   const lapis = P(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, {});
   }
@@ -5090,7 +5130,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 +5142,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 +5155,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 +5253,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 +5277,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 +5319,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 +5334,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 +6230,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 +6273,7 @@ const PrevalenceOverTimeBubbleChart = ({ data, yAxisScaleType }) => {
             callback: (value) => addUnit(firstDate, value).toString()
           }
         },
-        y: getYAxisScale(yAxisScaleType)
+        y: { ...getYAxisScale(yAxisScaleType), max: maxY }
       },
       plugins: {
         legend: {
@@ -6207,12 +6285,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 +6308,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 +6354,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 +6368,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 +6382,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 +6407,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 +6425,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 +6763,8 @@ const ScalingSelector = ({
   );
 };
 const PrevalenceOverTime = ({
-  numerator,
-  denominator,
+  numeratorFilter,
+  denominatorFilter,
   granularity,
   smoothingWindow,
   views,
@@ -6676,37 +6773,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 { 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 +6831,8 @@ const PrevalenceOverTimeInner = ({
       data,
       granularity,
       confidenceIntervalMethods,
-      pageSize
+      pageSize,
+      yAxisMaxConfig
     }
   );
 };
@@ -6733,7 +6841,8 @@ const PrevalenceOverTimeTabs = ({
   data,
   granularity,
   confidenceIntervalMethods,
-  pageSize
+  pageSize,
+  yAxisMaxConfig
 }) => {
   const [yAxisScaleType, setYAxisScaleType] = p("linear");
   const [confidenceIntervalMethod, setConfidenceIntervalMethod] = p(
@@ -6749,7 +6858,8 @@ const PrevalenceOverTimeTabs = ({
             {
               data,
               yAxisScaleType,
-              confidenceIntervalMethod
+              confidenceIntervalMethod,
+              yAxisMaxConfig
             }
           )
         };
@@ -6761,14 +6871,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 +6948,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 +6962,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 +6973,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 +6990,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 +7032,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 +7054,7 @@ const RelativeGrowthAdvantageChart = ({ data, yAxisScaleType }) => {
       maintainAspectRatio: false,
       animation: false,
       scales: {
-        y: getYAxisScale(yAxisScaleType)
+        y: { ...getYAxisScale(yAxisScaleType), max: maxY }
       },
       plugins: {
         legend: {
@@ -6932,17 +7064,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 +7254,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 { 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 +7304,8 @@ const RelativeGrowthAdvantageInner = ({
       yAxisScaleType,
       setYAxisScaleType,
       views,
-      generationTime
+      generationTime,
+      yAxisMaxConfig
     }
   );
 };
@@ -7157,7 +7314,8 @@ const RelativeGrowthAdvantageTabs = ({
   yAxisScaleType,
   setYAxisScaleType,
   views,
-  generationTime
+  generationTime,
+  yAxisMaxConfig
 }) => {
   const getTab = (view) => {
     switch (view) {
@@ -7172,7 +7330,8 @@ const RelativeGrowthAdvantageTabs = ({
                 observed: data.observedProportions,
                 params: data.params
               },
-              yAxisScaleType
+              yAxisScaleType,
+              yAxisMaxConfig
             }
           )
         };
@@ -7233,37 +7392,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,6 +7447,12 @@ __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);
@@ -7313,12 +7484,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]);
   });