@genspectrum/dashboard-components 0.15.0 → 0.16.0

package/dist/components.js

@@ -954,7 +954,8 @@ const GsChart = ({ configuration }) => {
 Chart.register(...registerables, VennDiagramController, ArcSlice);
 const MutationComparisonVenn = ({
   data,
-  proportionInterval
+  proportionInterval,
+  maintainAspectRatio
 }) => {
   const [selectedDatasetIndex, setSelectedDatasetIndex] = h(null);
   const sets = T$1(
@@ -978,7 +979,7 @@ const MutationComparisonVenn = ({
       type: "venn",
       data: sets,
       options: {
-        maintainAspectRatio: false,
+        maintainAspectRatio,
         scales: {
           x: {
             ticks: {
@@ -1021,7 +1022,7 @@ const MutationComparisonVenn = ({
         }
       }
     }),
-    [sets]
+    [maintainAspectRatio, sets]
   );
   if (data.content.length > 5) {
     return /* @__PURE__ */ u$1("div", { children: "Too many datasets to display. Maximum are five. " });
@@ -2018,7 +2019,14 @@ const ProportionSelectorDropdown = ({
     }
   ) }) });
 };
-const ReferenceGenomeContext = createContext$1({ nucleotideSequences: [], genes: [] });
+const UNINITIALIZED_SEQUENCE = "__uninitialized__";
+const ReferenceGenomeContext = createContext$1({
+  nucleotideSequences: [{ name: UNINITIALIZED_SEQUENCE, sequence: "" }],
+  genes: []
+});
+function isNotInitialized(referenceGenome) {
+  return referenceGenome.genes.length === 0 && referenceGenome.nucleotideSequences.length === 1 && referenceGenome.nucleotideSequences[0].name === UNINITIALIZED_SEQUENCE;
+}
 const SegmentSelector = ({
   displayedSegments,
   setDisplayedSegments
@@ -2084,6 +2092,9 @@ const Tabs = ({ tabs, toolbar }) => {
     /* @__PURE__ */ u$1("div", { className: `p-2 flex-grow overflow-scroll border-2 border-gray-100 rounded-b-md rounded-tr-md`, children: tabs.map((tab) => /* @__PURE__ */ u$1("div", { className: "h-full", hidden: activeTab !== tab.title, children: tab.content }, tab.title)) })
   ] });
 };
+function getMaintainAspectRatio(height) {
+  return height === void 0 || height === "";
+}
 function useQuery(fetchDataCallback, dependencies) {
   const [data, setData] = h(null);
   const [error, setError] = h(null);
@@ -2114,7 +2125,7 @@ function useQuery(fetchDataCallback, dependencies) {
 const mutationComparisonViewSchema = z$2.union([z$2.literal(views.table), z$2.literal(views.venn)]);
 const mutationComparisonPropsSchema = z$2.object({
   width: z$2.string(),
-  height: z$2.string(),
+  height: z$2.string().optional(),
   lapisFilters: z$2.array(namedLapisFilterSchema).min(1),
   sequenceType: sequenceTypeSchema,
   views: z$2.array(mutationComparisonViewSchema),
@@ -2153,6 +2164,7 @@ const MutationComparisonTabs = ({ data, originalComponentProps }) => {
     () => filterMutationData(data, displayedSegments, displayedMutationTypes),
     [data, displayedSegments, displayedMutationTypes]
   );
+  const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
   const getTab = (view) => {
     switch (view) {
       case "table":
@@ -2174,7 +2186,8 @@ const MutationComparisonTabs = ({ data, originalComponentProps }) => {
             MutationComparisonVenn,
             {
               data: { content: filteredData },
-              proportionInterval
+              proportionInterval,
+              maintainAspectRatio
             }
           )
         };
@@ -4955,6 +4968,9 @@ input.tab:checked + .tab-content,
 .relative {
   position: relative;
 }
+.inset-0 {
+  inset: 0px;
+}
 .-right-3 {
   right: -0.75rem;
 }
@@ -5138,6 +5154,9 @@ input.tab:checked + .tab-content,
 .min-w-32 {
   min-width: 8rem;
 }
+.min-w-\\[180px\\] {
+  min-width: 180px;
+}
 .min-w-\\[7\\.5rem\\] {
   min-width: 7.5rem;
 }
@@ -5221,6 +5240,9 @@ input.tab:checked + .tab-content,
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-wrap {
+  text-wrap: wrap;
+}
 .text-nowrap {
   text-wrap: nowrap;
 }
@@ -5600,7 +5622,7 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
     this.sequenceType = "nucleotide";
     this.views = ["table"];
     this.width = "100%";
-    this.height = "700px";
+    this.height = void 0;
     this.pageSize = false;
   }
   render() {
@@ -5983,7 +6005,7 @@ const mutationsPropsSchema = z$2.object({
   views: mutationsViewSchema.array(),
   pageSize: z$2.union([z$2.boolean(), z$2.number()]),
   width: z$2.string(),
-  height: z$2.string()
+  height: z$2.string().optional()
 });
 const Mutations = (componentProps) => {
   const { width, height } = componentProps;
@@ -6168,7 +6190,7 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.sequenceType = "nucleotide";
     this.views = ["table", "grid"];
     this.width = "100%";
-    this.height = "700px";
+    this.height = void 0;
     this.pageSize = false;
   }
   render() {
@@ -6326,42 +6348,51 @@ function getYAxisScale(scaleType) {
   }
 }
 Chart.register(...registerables, LogitScale, BarWithErrorBarsController, BarWithErrorBar);
+const NO_DATA$2 = "noData";
 const PrevalenceOverTimeBarChart = ({
   data,
   yAxisScaleType,
   confidenceIntervalMethod,
-  yAxisMaxConfig
+  yAxisMaxConfig,
+  maintainAspectRatio
 }) => {
-  const nullFirstData = data.filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0).map((variantData) => {
+  const config = T$1(() => {
+    const nullFirstData = data.filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0).map((variantData) => {
+      return {
+        content: variantData.content.sort(sortNullToBeginningThenByDate),
+        displayName: variantData.displayName
+      };
+    });
+    if (nullFirstData.length === 0) {
+      return NO_DATA$2;
+    }
+    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;
     return {
-      content: variantData.content.sort(sortNullToBeginningThenByDate),
-      displayName: variantData.displayName
-    };
-  });
-  if (nullFirstData.length === 0) {
-    return /* @__PURE__ */ u$1(NoDataDisplay, {});
-  }
-  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: {
-      datasets: datasets2
-    },
-    options: {
-      maintainAspectRatio: false,
-      animation: false,
-      scales: {
-        y: { ...getYAxisScale(yAxisScaleType), max: maxY }
+      type: BarWithErrorBarsController.id,
+      data: {
+        datasets: datasets2
       },
-      plugins: {
-        legend: {
-          display: false
+      options: {
+        maintainAspectRatio,
+        animation: false,
+        scales: {
+          y: { ...getYAxisScale(yAxisScaleType), max: maxY }
         },
-        tooltip: tooltip$2(confidenceIntervalMethod)
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: tooltip$2(confidenceIntervalMethod)
+        }
       }
-    }
-  };
+    };
+  }, [data, yAxisScaleType, confidenceIntervalMethod, yAxisMaxConfig, maintainAspectRatio]);
+  if (config === NO_DATA$2) {
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
+  }
   return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
 const getDataset$1 = (prevalenceOverTimeVariant, index, confidenceIntervalMethod) => {
@@ -7356,120 +7387,134 @@ function getMinMaxNumber(values) {
   return [min, max];
 }
 Chart.register(...registerables, LogitScale);
+const NO_DATA$1 = "noData";
 const PrevalenceOverTimeBubbleChart = ({
   data,
   yAxisScaleType,
-  yAxisMaxConfig
+  yAxisMaxConfig,
+  maintainAspectRatio
 }) => {
-  const nonNullDateRangeData = data.filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0).map((variantData) => {
-    return {
-      content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
-      displayName: variantData.displayName
+  const config = T$1(() => {
+    const nonNullDateRangeData = data.filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0).map((variantData) => {
+      return {
+        content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
+        displayName: variantData.displayName
+      };
+    });
+    if (nonNullDateRangeData.length === 0) {
+      return NO_DATA$1;
+    }
+    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;
     };
-  });
-  if (nonNullDateRangeData.length === 0) {
-    return /* @__PURE__ */ u$1(NoDataDisplay, {});
-  }
-  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: nonNullDateRangeData.map((graphData, index) => ({
-        label: graphData.displayName,
-        data: graphData.content.filter((dataPoint) => dataPoint.dateRange !== null).map((dataPoint) => ({
-          x: minusTemporal(dataPoint.dateRange, firstDate),
-          y: dataPoint.prevalence,
-          r: scaleBubble(dataPoint.total)
-        })),
-        borderWidth: 1,
-        pointRadius: 0,
-        backgroundColor: singleGraphColorRGBAById(index, 0.3),
-        borderColor: singleGraphColorRGBAById(index)
-      }))
-    },
-    options: {
-      animation: false,
-      maintainAspectRatio: false,
-      scales: {
-        x: {
-          ticks: {
-            callback: (value) => addUnit(firstDate, value).toString()
-          }
-        },
-        y: { ...getYAxisScale(yAxisScaleType), max: maxY }
+    const maxY = yAxisScaleType !== "logit" ? getYAxisMax(maxInData(nonNullDateRangeData), yAxisMaxConfig == null ? void 0 : yAxisMaxConfig[yAxisScaleType]) : void 0;
+    return {
+      type: "bubble",
+      data: {
+        datasets: nonNullDateRangeData.map((graphData, index) => ({
+          label: graphData.displayName,
+          data: graphData.content.filter((dataPoint) => dataPoint.dateRange !== null).map((dataPoint) => ({
+            x: minusTemporal(dataPoint.dateRange, firstDate),
+            y: dataPoint.prevalence,
+            r: scaleBubble(dataPoint.total)
+          })),
+          borderWidth: 1,
+          pointRadius: 0,
+          backgroundColor: singleGraphColorRGBAById(index, 0.3),
+          borderColor: singleGraphColorRGBAById(index)
+        }))
       },
-      plugins: {
-        legend: {
-          display: false
+      options: {
+        animation: false,
+        maintainAspectRatio,
+        scales: {
+          x: {
+            ticks: {
+              callback: (value) => addUnit(firstDate, value).toString()
+            }
+          },
+          y: { ...getYAxisScale(yAxisScaleType), max: maxY }
         },
-        tooltip: {
-          mode: "index",
-          intersect: false,
-          callbacks: {
-            title: (context) => {
-              var _a;
-              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 = nonNullDateRangeData[context.datasetIndex];
-              const dataPoint = dataset.content[context.dataIndex];
-              const percentage = (dataPoint.prevalence * 100).toFixed(2);
-              const count = dataPoint.count.toFixed(0);
-              const total2 = dataPoint.total.toFixed(0);
-              return `${dataset.displayName}: ${percentage}%, ${count}/${total2} samples`;
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: {
+            mode: "index",
+            intersect: false,
+            callbacks: {
+              title: (context) => {
+                var _a;
+                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 = nonNullDateRangeData[context.datasetIndex];
+                const dataPoint = dataset.content[context.dataIndex];
+                const percentage = (dataPoint.prevalence * 100).toFixed(2);
+                const count = dataPoint.count.toFixed(0);
+                const total2 = dataPoint.total.toFixed(0);
+                return `${dataset.displayName}: ${percentage}%, ${count}/${total2} samples`;
+              }
             }
           }
         }
       }
-    }
-  };
+    };
+  }, [data, maintainAspectRatio, yAxisMaxConfig, yAxisScaleType]);
+  if (config === NO_DATA$1) {
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
+  }
   return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
 Chart.register(...registerables, LogitScale);
+const NO_DATA = "noData";
 const PrevalenceOverTimeLineChart = ({
   data,
   yAxisScaleType,
   confidenceIntervalMethod,
-  yAxisMaxConfig
+  yAxisMaxConfig,
+  maintainAspectRatio
 }) => {
-  const nonNullDateRangeData = data.filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0).map((variantData) => {
+  const config = T$1(() => {
+    const nonNullDateRangeData = data.filter((prevalenceOverTimeData) => prevalenceOverTimeData.content.length > 0).map((variantData) => {
+      return {
+        content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
+        displayName: variantData.displayName
+      };
+    });
+    if (nonNullDateRangeData.length === 0) {
+      return NO_DATA;
+    }
+    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;
     return {
-      content: variantData.content.filter((dataPoint) => dataPoint.dateRange !== null),
-      displayName: variantData.displayName
-    };
-  });
-  if (nonNullDateRangeData.length === 0) {
-    return /* @__PURE__ */ u$1(NoDataDisplay, {});
-  }
-  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: {
-      datasets: datasets2
-    },
-    options: {
-      animation: false,
-      maintainAspectRatio: false,
-      scales: {
-        y: { ...getYAxisScale(yAxisScaleType), max: maxY }
+      type: "line",
+      data: {
+        datasets: datasets2
       },
-      plugins: {
-        legend: {
-          display: false
+      options: {
+        animation: false,
+        maintainAspectRatio,
+        scales: {
+          y: { ...getYAxisScale(yAxisScaleType), max: maxY }
         },
-        tooltip: tooltip$1(confidenceIntervalMethod)
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: tooltip$1(confidenceIntervalMethod)
+        }
       }
-    }
-  };
+    };
+  }, [data, yAxisScaleType, confidenceIntervalMethod, yAxisMaxConfig, maintainAspectRatio]);
+  if (config === NO_DATA) {
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
+  }
   return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
 const getDataset = (prevalenceOverTimeVariant, dataIndex, confidenceIntervalMethod) => {
@@ -7855,7 +7900,7 @@ const prevalenceOverTimeViewSchema = z$2.union([
 ]);
 const prevalenceOverTimePropsSchema = z$2.object({
   width: z$2.string(),
-  height: z$2.string(),
+  height: z$2.string().optional(),
   numeratorFilters: z$2.array(namedLapisFilterSchema).min(1),
   denominatorFilter: lapisFilterSchema,
   granularity: temporalGranularitySchema,
@@ -7912,6 +7957,7 @@ const PrevalenceOverTimeTabs = ({ data, ...componentProps }) => {
     });
   }, [confidenceIntervalMethods]);
   const yAxisMaxConfig = { linear: yAxisMaxLinear, logarithmic: yAxisMaxLogarithmic };
+  const maintainAspectRatio = getMaintainAspectRatio(componentProps.height);
   const getTab = (view) => {
     switch (view) {
       case "bar":
@@ -7923,7 +7969,8 @@ const PrevalenceOverTimeTabs = ({ data, ...componentProps }) => {
               data,
               yAxisScaleType,
               confidenceIntervalMethod,
-              yAxisMaxConfig
+              yAxisMaxConfig,
+              maintainAspectRatio
             }
           )
         };
@@ -7936,7 +7983,8 @@ const PrevalenceOverTimeTabs = ({ data, ...componentProps }) => {
               data,
               yAxisScaleType,
               confidenceIntervalMethod,
-              yAxisMaxConfig
+              yAxisMaxConfig,
+              maintainAspectRatio
             }
           )
         };
@@ -7948,7 +7996,8 @@ const PrevalenceOverTimeTabs = ({ data, ...componentProps }) => {
             {
               data,
               yAxisScaleType,
-              yAxisMaxConfig
+              yAxisMaxConfig,
+              maintainAspectRatio
             }
           )
         };
@@ -8053,7 +8102,7 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     this.views = ["bar", "line", "bubble", "table"];
     this.confidenceIntervalMethods = ["none", "wilson"];
     this.width = "100%";
-    this.height = "700px";
+    this.height = void 0;
     this.lapisDateField = "";
     this.pageSize = false;
     this.yAxisMaxLinear = 1;
@@ -8119,28 +8168,35 @@ PrevalenceOverTimeComponent = __decorateClass$c([
   t$3("gs-prevalence-over-time")
 ], PrevalenceOverTimeComponent);
 Chart.register(...registerables, LogitScale);
-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: {
-      labels: data.t,
-      datasets: datasets(data)
-    },
-    options: {
-      maintainAspectRatio: false,
-      animation: false,
-      scales: {
-        y: { ...getYAxisScale(yAxisScaleType), max: maxY }
+const RelativeGrowthAdvantageChart = ({
+  data,
+  yAxisScaleType,
+  yAxisMaxConfig,
+  maintainAspectRatio
+}) => {
+  const config = T$1(() => {
+    const maxY = yAxisScaleType !== "logit" ? getYAxisMax(Math.max(...data.proportion), yAxisMaxConfig == null ? void 0 : yAxisMaxConfig[yAxisScaleType]) : void 0;
+    return {
+      type: "line",
+      data: {
+        labels: data.t,
+        datasets: datasets(data)
       },
-      plugins: {
-        legend: {
-          display: false
+      options: {
+        maintainAspectRatio,
+        animation: false,
+        scales: {
+          y: { ...getYAxisScale(yAxisScaleType), max: maxY }
         },
-        tooltip: tooltip()
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: tooltip()
+        }
       }
-    }
-  };
+    };
+  }, [data, yAxisScaleType, yAxisMaxConfig, maintainAspectRatio]);
   return /* @__PURE__ */ u$1("div", { className: "flex h-full flex-col", children: [
     /* @__PURE__ */ u$1(
       RelativeGrowthAdvantageDisplay,
@@ -8348,7 +8404,7 @@ function toYearMonthDay(d2) {
 const relativeGrowthAdvantageViewSchema = z$2.literal(views.line);
 const relativeGrowthAdvantagePropsSchema = z$2.object({
   width: z$2.string(),
-  height: z$2.string(),
+  height: z$2.string().optional(),
   numeratorFilter: lapisFilterSchema,
   denominatorFilter: lapisFilterSchema,
   generationTime: z$2.number(),
@@ -8398,6 +8454,7 @@ const RelativeGrowthAdvantageTabs = ({
   setYAxisScaleType,
   originalComponentProps
 }) => {
+  const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
   const getTab = (view) => {
     switch (view) {
       case "line":
@@ -8415,7 +8472,8 @@ const RelativeGrowthAdvantageTabs = ({
               yAxisMaxConfig: {
                 linear: originalComponentProps.yAxisMaxLinear,
                 logarithmic: originalComponentProps.yAxisMaxLogarithmic
-              }
+              },
+              maintainAspectRatio
             }
           )
         };
@@ -8494,7 +8552,7 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
     this.generationTime = 7;
     this.views = ["line"];
     this.width = "100%";
-    this.height = "700px";
+    this.height = void 0;
     this.lapisDateField = "";
     this.yAxisMaxLinear = 1;
     this.yAxisMaxLogarithmic = 1;
@@ -8604,7 +8662,12 @@ const AggregateTable = ({
   return /* @__PURE__ */ u$1(Table, { data: sortedData, columns: headers, pageSize });
 };
 Chart.register(...registerables, BarController);
-const AggregateBarChart = ({ data, fields, maxNumberOfBars }) => {
+const AggregateBarChart = ({
+  data,
+  fields,
+  maxNumberOfBars,
+  maintainAspectRatio
+}) => {
   if (data.length === 0) {
     return /* @__PURE__ */ u$1(NoDataDisplay, {});
   }
@@ -8620,9 +8683,22 @@ const AggregateBarChart = ({ data, fields, maxNumberOfBars }) => {
       `Cannot display a bar chart when the "fields" attribute of this component contains more than two values. Got the fields: ${fields.join(", ")}. This must be fixed by the administrator of this page.`
     );
   }
-  return /* @__PURE__ */ u$1(AggregateBarChartInner, { data, fields, maxNumberOfBars });
+  return /* @__PURE__ */ u$1(
+    AggregateBarChartInner,
+    {
+      data,
+      fields,
+      maxNumberOfBars,
+      maintainAspectRatio
+    }
+  );
 };
-const AggregateBarChartInner = ({ data, fields, maxNumberOfBars }) => {
+const AggregateBarChartInner = ({
+  data,
+  fields,
+  maxNumberOfBars,
+  maintainAspectRatio
+}) => {
   const config = T$1(() => {
     const { datasets: datasets2, countsOfEachBar } = getDatasets$2(fields, maxNumberOfBars, data);
     return {
@@ -8631,7 +8707,7 @@ const AggregateBarChartInner = ({ data, fields, maxNumberOfBars }) => {
         datasets: datasets2
       },
       options: {
-        maintainAspectRatio: false,
+        maintainAspectRatio,
         animation: false,
         indexAxis: "y",
         scales: {
@@ -8639,7 +8715,10 @@ const AggregateBarChartInner = ({ data, fields, maxNumberOfBars }) => {
             stacked: true
           },
           y: {
-            stacked: true
+            stacked: true,
+            ticks: {
+              autoSkip: false
+            }
           }
         },
         plugins: {
@@ -8661,7 +8740,7 @@ const AggregateBarChartInner = ({ data, fields, maxNumberOfBars }) => {
         }
       }
     };
-  }, [data, fields, maxNumberOfBars]);
+  }, [data, fields, maintainAspectRatio, maxNumberOfBars]);
   return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
 function getDatasets$2(fields, maxNumberOfBars, data) {
@@ -8731,7 +8810,7 @@ const aggregatePropsSchema = z$2.object({
   initialSortDirection: z$2.union([z$2.literal("ascending"), z$2.literal("descending")]),
   pageSize: z$2.union([z$2.boolean(), z$2.number()]),
   width: z$2.string(),
-  height: z$2.string(),
+  height: z$2.string().optional(),
   maxNumberOfBars: z$2.number()
 });
 const Aggregate = (componentProps) => {
@@ -8757,6 +8836,7 @@ const AggregateInner = (componentProps) => {
   return /* @__PURE__ */ u$1(AggregatedDataTabs, { data, originalComponentProps: componentProps });
 };
 const AggregatedDataTabs = ({ data, originalComponentProps }) => {
+  const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
   const getTab = (view) => {
     switch (view) {
       case views.table:
@@ -8781,7 +8861,8 @@ const AggregatedDataTabs = ({ data, originalComponentProps }) => {
             {
               data,
               fields: originalComponentProps.fields,
-              maxNumberOfBars: originalComponentProps.maxNumberOfBars
+              maxNumberOfBars: originalComponentProps.maxNumberOfBars,
+              maintainAspectRatio
             }
           )
         };
@@ -8827,7 +8908,7 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.views = ["table"];
     this.lapisFilter = {};
     this.width = "100%";
-    this.height = "700px";
+    this.height = void 0;
     this.initialSortField = "count";
     this.initialSortDirection = "descending";
     this.pageSize = false;
@@ -8911,7 +8992,11 @@ const getNumberOfSequencesOverTimeTableData = (data, dateRangeKey) => {
   });
 };
 Chart.register(...registerables);
-const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }) => {
+const NumberSequencesOverTimeBarChart = ({
+  data,
+  yAxisScaleType,
+  maintainAspectRatio
+}) => {
   const config = T$1(
     () => ({
       type: "bar",
@@ -8919,7 +9004,7 @@ const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }) => {
         datasets: getDatasets$1(data)
       },
       options: {
-        maintainAspectRatio: false,
+        maintainAspectRatio,
         animation: false,
         scales: {
           y: {
@@ -8937,7 +9022,7 @@ const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }) => {
         }
       }
     }),
-    [data, yAxisScaleType]
+    [data, maintainAspectRatio, yAxisScaleType]
   );
   return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
@@ -8957,7 +9042,11 @@ const getDatasets$1 = (data) => {
   );
 };
 Chart.register(...registerables);
-const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }) => {
+const NumberSequencesOverTimeLineChart = ({
+  data,
+  yAxisScaleType,
+  maintainAspectRatio
+}) => {
   const config = T$1(
     () => ({
       type: "line",
@@ -8965,7 +9054,7 @@ const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }) => {
         datasets: getDatasets(data)
       },
       options: {
-        maintainAspectRatio: false,
+        maintainAspectRatio,
         animation: false,
         scales: {
           y: {
@@ -8983,7 +9072,7 @@ const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }) => {
         }
       }
     }),
-    [data, yAxisScaleType]
+    [data, maintainAspectRatio, yAxisScaleType]
   );
   return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
@@ -9042,7 +9131,7 @@ const numberSequencesOverTimeViewSchema = z$2.union([
 ]);
 const numberSequencesOverTimePropsSchema = z$2.object({
   width: z$2.string(),
-  height: z$2.string(),
+  height: z$2.string().optional(),
   lapisFilters: z$2.array(namedLapisFilterSchema).min(1),
   lapisDateField: z$2.string().min(1),
   views: z$2.array(numberSequencesOverTimeViewSchema),
@@ -9075,17 +9164,32 @@ const NumberSequencesOverTimeInner = (componentProps) => {
 };
 const NumberSequencesOverTimeTabs = ({ data, originalComponentProps }) => {
   const [yAxisScaleType, setYAxisScaleType] = h("linear");
+  const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
   const getTab = (view) => {
     switch (view) {
       case "bar":
         return {
           title: "Bar",
-          content: /* @__PURE__ */ u$1(NumberSequencesOverTimeBarChart, { data, yAxisScaleType })
+          content: /* @__PURE__ */ u$1(
+            NumberSequencesOverTimeBarChart,
+            {
+              data,
+              yAxisScaleType,
+              maintainAspectRatio
+            }
+          )
         };
       case "line":
         return {
           title: "Line",
-          content: /* @__PURE__ */ u$1(NumberSequencesOverTimeLineChart, { data, yAxisScaleType })
+          content: /* @__PURE__ */ u$1(
+            NumberSequencesOverTimeLineChart,
+            {
+              data,
+              yAxisScaleType,
+              maintainAspectRatio
+            }
+          )
         };
       case "table":
         return {
@@ -9182,7 +9286,7 @@ let NumberSequencesOverTimeComponent = class extends PreactLitAdapterWithGridJsS
     this.lapisDateField = "";
     this.views = ["bar", "line", "table"];
     this.width = "100%";
-    this.height = "700px";
+    this.height = void 0;
     this.granularity = "day";
     this.smoothingWindow = 0;
     this.pageSize = false;
@@ -9713,7 +9817,7 @@ const mutationOverTimeSchema = z$2.object({
   granularity: temporalGranularitySchema,
   lapisDateField: z$2.string().min(1),
   width: z$2.string(),
-  height: z$2.string()
+  height: z$2.string().optional()
 });
 const MutationsOverTime = (componentProps) => {
   const { width, height } = componentProps;
@@ -9904,7 +10008,7 @@ let MutationsOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     this.sequenceType = "nucleotide";
     this.views = ["grid"];
     this.width = "100%";
-    this.height = "700px";
+    this.height = void 0;
     this.granularity = "week";
     this.lapisDateField = "date";
   }
@@ -10591,6 +10695,12 @@ svg.leaflet-image-layer.leaflet-interactive path {\r
 	}\r
 `;
 const leafletStyleModifications = ".leaflet-container {\n    background: transparent;\n}\n";
+function AspectRatio({ children, aspectRatio }) {
+  if (aspectRatio === void 0) {
+    return children;
+  }
+  return /* @__PURE__ */ u$1("div", { class: `w-full relative`, style: { paddingTop: `${aspectRatio}%` }, children: /* @__PURE__ */ u$1("div", { className: "absolute inset-0", children }) });
+}
 const SequencesByLocationMap = ({
   locations,
   totalCount,
@@ -10602,7 +10712,8 @@ const SequencesByLocationMap = ({
   zoom,
   offsetX,
   offsetY,
-  hasTableView
+  hasTableView,
+  maintainAspectRatio
 }) => {
   const ref = A$1(null);
   y(() => {
@@ -10633,8 +10744,8 @@ const SequencesByLocationMap = ({
       leafletMap.remove();
     };
   }, [ref, locations, enableMapNavigation, lapisLocationField, zoom, offsetX, offsetY]);
-  return /* @__PURE__ */ u$1("div", { className: "h-full", children: [
-    /* @__PURE__ */ u$1("div", { ref, className: "h-full" }),
+  return /* @__PURE__ */ u$1(AspectRatio, { aspectRatio: maintainAspectRatio ? 50 : void 0, children: [
+    /* @__PURE__ */ u$1("div", { className: "h-full", ref }),
     /* @__PURE__ */ u$1("div", { className: "relative", children: /* @__PURE__ */ u$1(
       DataMatchInformation,
       {
@@ -10771,7 +10882,7 @@ const SequencesByLocationTable = ({
       sort: true,
       formatter: (cell) => formatProportion(cell)
     },
-    ..."isShownOnMap" in tableData[0] ? [{ id: "isShownOnMap", name: "shown on map", sort: true, width: "20%" }] : []
+    ...tableData.length > 0 && "isShownOnMap" in tableData[0] ? [{ id: "isShownOnMap", name: "shown on map", sort: true, width: "20%" }] : []
   ];
   return /* @__PURE__ */ u$1(Table, { data: tableData, columns: headers, pageSize });
 };
@@ -10902,7 +11013,7 @@ const sequencesByLocationPropsSchema = z$2.object({
   mapSource: mapSourceSchema.optional(),
   enableMapNavigation: z$2.boolean(),
   width: z$2.string(),
-  height: z$2.string(),
+  height: z$2.string().optional(),
   views: z$2.array(sequencesByLocationViewSchema),
   zoom: z$2.number(),
   offsetX: z$2.number(),
@@ -10931,12 +11042,16 @@ const SequencesByLocationMapInner = (props) => {
   if (error) {
     throw error;
   }
+  if (data.tableData.length === 0) {
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
+  }
   return /* @__PURE__ */ u$1(SequencesByLocationMapTabs, { data, originalComponentProps: props });
 };
 const SequencesByLocationMapTabs = ({
   originalComponentProps,
   data
 }) => {
+  const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
   const getTab = (view) => {
     switch (view) {
       case views.map: {
@@ -10955,7 +11070,8 @@ const SequencesByLocationMapTabs = ({
               zoom: originalComponentProps.zoom,
               offsetX: originalComponentProps.offsetX,
               offsetY: originalComponentProps.offsetY,
-              hasTableView: originalComponentProps.views.includes(views.table)
+              hasTableView: originalComponentProps.views.includes(views.table),
+              maintainAspectRatio
             }
           )
         };
@@ -11025,7 +11141,7 @@ let SequencesByLocationComponent = class extends PreactLitAdapterWithGridJsStyle
     this.mapSource = void 0;
     this.enableMapNavigation = false;
     this.width = "100%";
-    this.height = "700px";
+    this.height = void 0;
     this.views = ["map", "table"];
     this.zoom = 1;
     this.offsetX = 0;
@@ -11098,7 +11214,7 @@ async function queryGeneralStatistics(numeratorFilter, denominatorFilter, lapis,
 }
 const statisticsPropsSchema = z$2.object({
   width: z$2.string(),
-  height: z$2.string(),
+  height: z$2.string().optional(),
   numeratorFilter: lapisFilterSchema,
   denominatorFilter: lapisFilterSchema
 });
@@ -11126,16 +11242,16 @@ const StatisticsInner = (componentProps) => {
 };
 const MetricDataTabs = ({ data }) => {
   const { count, proportion } = data;
-  return /* @__PURE__ */ u$1("div", { className: "flex flex-col sm:flex-row rounded-md border-2 border-gray-100", children: [
+  return /* @__PURE__ */ u$1("div", { className: "flex flex-col sm:flex-row rounded-md border-2 border-gray-100 min-w-[180px]", children: [
     /* @__PURE__ */ u$1("div", { className: "stat", children: [
       /* @__PURE__ */ u$1("div", { className: "stat-title", children: "Sequences" }),
       /* @__PURE__ */ u$1("div", { className: "stat-value text-2xl sm:text-4xl", children: count.toLocaleString("en-us") }),
-      /* @__PURE__ */ u$1("div", { className: "stat-desc", children: "The total number of sequenced samples" })
+      /* @__PURE__ */ u$1("div", { className: "stat-desc text-wrap", children: "The total number of sequenced samples" })
     ] }),
     /* @__PURE__ */ u$1("div", { className: "stat", children: [
       /* @__PURE__ */ u$1("div", { className: "stat-title", children: "Overall proportion" }),
       /* @__PURE__ */ u$1("div", { className: "stat-value text-2xl sm:text-4xl", children: formatProportion(proportion) }),
-      /* @__PURE__ */ u$1("div", { className: "stat-desc", children: "The proportion among all sequenced samples" })
+      /* @__PURE__ */ u$1("div", { className: "stat-desc text-wrap", children: "The proportion among all sequenced samples" })
     ] })
   ] });
 };
@@ -11155,7 +11271,7 @@ let StatisticsComponent = class extends PreactLitAdapterWithGridJsStyles {
     this.numeratorFilter = {};
     this.denominatorFilter = {};
     this.width = "100%";
-    this.height = "100%";
+    this.height = void 0;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -11274,7 +11390,7 @@ const wastewaterMutationOverTimeSchema = z$2.object({
   lapisFilter: lapisFilterSchema,
   sequenceType: sequenceTypeSchema,
   width: z$2.string(),
-  height: z$2.string(),
+  height: z$2.string().optional(),
   maxNumberOfGridRows: z$2.number()
 });
 const WastewaterMutationsOverTime = (componentProps) => {
@@ -11375,7 +11491,7 @@ let WastewaterMutationsOverTimeComponent = class extends PreactLitAdapterWithGri
     this.lapisFilter = {};
     this.sequenceType = "nucleotide";
     this.width = "100%";
-    this.height = "700px";
+    this.height = void 0;
     this.maxNumberOfGridRows = 100;
   }
   render() {
@@ -15131,9 +15247,6 @@ const ReferenceGenomesAwaiter = ({ children }) => {
   }
   return /* @__PURE__ */ u$1(Fragment, { children });
 };
-function isNotInitialized(referenceGenome) {
-  return referenceGenome.nucleotideSequences.length === 0 && referenceGenome.genes.length === 0;
-}
 const ExampleMutation = ({ sequenceType, mutationType }) => {
   const referenceGenome = x$1(ReferenceGenomeContext);
   return /* @__PURE__ */ u$1("b", { children: getExampleMutation(referenceGenome, sequenceType, mutationType) });
@@ -15567,6 +15680,12 @@ const MutationFilterInner = ({ initialValue }) => {
     getInitialState(initialValue, referenceGenome)
   );
   const filterRef = A$1(null);
+  if (referenceGenome.nucleotideSequences.length === 0 && referenceGenome.genes.length === 0) {
+    throw new UserFacingError(
+      "No reference sequences available",
+      "This organism has neither nucleotide nor amino acid sequences configured in its reference genome. You cannot filter by mutations."
+    );
+  }
   const handleRemoveValue = (option) => {
     const newSelectedFilters = {
       ...selectedFilters,