@genspectrum/dashboard-components 0.15.0 → 0.16.1

package/dist/components.js

@@ -2,7 +2,7 @@ import { createContext, provide, consume } from "@lit/context";
 import { Task } from "@lit/task";
 import { LitElement, html, unsafeCSS } from "lit";
 import z$2 from "zod";
-import { options, createContext as createContext$1, Fragment, render, Component, createRef, createElement, toChildArray, cloneElement, hydrate } from "preact";
+import { createContext as createContext$1, options, Fragment, render, Component, createRef, createElement, toChildArray, cloneElement, hydrate } from "preact";
 import { Grid } from "gridjs";
 import { Chart, registerables, Scale, BarController } from "chart.js";
 import { VennDiagramController, ArcSlice, extractSets } from "chartjs-chart-venn";
@@ -539,6 +539,15 @@ const substitutionsOrDeletionsEndpoint = (lapisUrl, sequenceType) => {
   return sequenceType === "amino acid" ? `${lapisUrl}/sample/aminoAcidMutations` : `${lapisUrl}/sample/nucleotideMutations`;
 };
 const referenceGenomeEndpoint = (lapisUrl) => `${lapisUrl}/sample/referenceGenome`;
+const UNINITIALIZED_SEQUENCE = "__uninitialized__";
+const INITIAL_REFERENCE_GENOMES = {
+  nucleotideSequences: [{ name: UNINITIALIZED_SEQUENCE, sequence: "" }],
+  genes: []
+};
+const ReferenceGenomeContext = createContext$1(INITIAL_REFERENCE_GENOMES);
+function isNotInitialized(referenceGenome) {
+  return referenceGenome.genes.length === 0 && referenceGenome.nucleotideSequences.length === 1 && referenceGenome.nucleotideSequences[0].name === UNINITIALIZED_SEQUENCE;
+}
 var __defProp$g = Object.defineProperty;
 var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
 var __decorateClass$g = (decorators, target, key, kind) => {
@@ -554,10 +563,7 @@ let AppComponent = class extends LitElement {
   constructor() {
     super(...arguments);
     this.lapis = "";
-    this.referenceGenome = {
-      nucleotideSequences: [],
-      genes: []
-    };
+    this.referenceGenome = INITIAL_REFERENCE_GENOMES;
     this.updateReferenceGenome = new Task(this, {
       task: async () => {
         const lapisUrl = lapisUrlSchema.parse(this.lapis);
@@ -954,7 +960,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 +985,7 @@ const MutationComparisonVenn = ({
       type: "venn",
       data: sets,
       options: {
-        maintainAspectRatio: false,
+        maintainAspectRatio,
         scales: {
           x: {
             ticks: {
@@ -1021,7 +1028,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. " });
@@ -1374,7 +1381,7 @@ function componentParametersToCode(componentName, params, lapisUrl) {
     return typeof value === "object" ? JSON.stringify(value) : value;
   };
   const attributes = indentLines(
-    Object.entries(params).map(([key, value]) => `${key}='${stringifyIfNeeded(value)}'`).join("\n"),
+    Object.entries(params).filter(([_2, value]) => value !== void 0).map(([key, value]) => `${key}='${stringifyIfNeeded(value)}'`).join("\n"),
     4
   );
   return `<gs-app lapis="${lapisUrl}">
@@ -2018,7 +2025,6 @@ const ProportionSelectorDropdown = ({
     }
   ) }) });
 };
-const ReferenceGenomeContext = createContext$1({ nucleotideSequences: [], genes: [] });
 const SegmentSelector = ({
   displayedSegments,
   setDisplayedSegments
@@ -2084,6 +2090,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 +2123,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 +2162,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 +2184,8 @@ const MutationComparisonTabs = ({ data, originalComponentProps }) => {
             MutationComparisonVenn,
             {
               data: { content: filteredData },
-              proportionInterval
+              proportionInterval,
+              maintainAspectRatio
             }
           )
         };
@@ -4955,6 +4966,9 @@ input.tab:checked + .tab-content,
 .relative {
   position: relative;
 }
+.inset-0 {
+  inset: 0px;
+}
 .-right-3 {
   right: -0.75rem;
 }
@@ -5138,6 +5152,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 +5238,9 @@ input.tab:checked + .tab-content,
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-wrap {
+  text-wrap: wrap;
+}
 .text-nowrap {
   text-wrap: nowrap;
 }
@@ -5559,10 +5579,7 @@ const _PreactLitAdapter = class _PreactLitAdapter extends ReactiveElement {
   constructor() {
     super(...arguments);
     this.lapis = "";
-    this.referenceGenome = {
-      nucleotideSequences: [],
-      genes: []
-    };
+    this.referenceGenome = INITIAL_REFERENCE_GENOMES;
   }
   update(changedProperties) {
     const vdom = /* @__PURE__ */ u$1(LapisUrlContextProvider, { value: this.lapis, children: /* @__PURE__ */ u$1(ReferenceGenomeContext.Provider, { value: this.referenceGenome, children: this.render() }) });
@@ -5600,7 +5617,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 +6000,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 +6185,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 +6343,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 +7382,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 +7895,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 +7952,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 +7964,8 @@ const PrevalenceOverTimeTabs = ({ data, ...componentProps }) => {
               data,
               yAxisScaleType,
               confidenceIntervalMethod,
-              yAxisMaxConfig
+              yAxisMaxConfig,
+              maintainAspectRatio
             }
           )
         };
@@ -7936,7 +7978,8 @@ const PrevalenceOverTimeTabs = ({ data, ...componentProps }) => {
               data,
               yAxisScaleType,
               confidenceIntervalMethod,
-              yAxisMaxConfig
+              yAxisMaxConfig,
+              maintainAspectRatio
             }
           )
         };
@@ -7948,7 +7991,8 @@ const PrevalenceOverTimeTabs = ({ data, ...componentProps }) => {
             {
               data,
               yAxisScaleType,
-              yAxisMaxConfig
+              yAxisMaxConfig,
+              maintainAspectRatio
             }
           )
         };
@@ -8053,7 +8097,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 +8163,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 +8399,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 +8449,7 @@ const RelativeGrowthAdvantageTabs = ({
   setYAxisScaleType,
   originalComponentProps
 }) => {
+  const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
   const getTab = (view) => {
     switch (view) {
       case "line":
@@ -8415,7 +8467,8 @@ const RelativeGrowthAdvantageTabs = ({
               yAxisMaxConfig: {
                 linear: originalComponentProps.yAxisMaxLinear,
                 logarithmic: originalComponentProps.yAxisMaxLogarithmic
-              }
+              },
+              maintainAspectRatio
             }
           )
         };
@@ -8494,7 +8547,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 +8657,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 +8678,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 +8702,7 @@ const AggregateBarChartInner = ({ data, fields, maxNumberOfBars }) => {
         datasets: datasets2
       },
       options: {
-        maintainAspectRatio: false,
+        maintainAspectRatio,
         animation: false,
         indexAxis: "y",
         scales: {
@@ -8639,7 +8710,10 @@ const AggregateBarChartInner = ({ data, fields, maxNumberOfBars }) => {
             stacked: true
           },
           y: {
-            stacked: true
+            stacked: true,
+            ticks: {
+              autoSkip: false
+            }
           }
         },
         plugins: {
@@ -8661,7 +8735,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 +8805,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 +8831,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 +8856,8 @@ const AggregatedDataTabs = ({ data, originalComponentProps }) => {
             {
               data,
               fields: originalComponentProps.fields,
-              maxNumberOfBars: originalComponentProps.maxNumberOfBars
+              maxNumberOfBars: originalComponentProps.maxNumberOfBars,
+              maintainAspectRatio
             }
           )
         };
@@ -8827,7 +8903,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 +8987,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 +8999,7 @@ const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }) => {
         datasets: getDatasets$1(data)
       },
       options: {
-        maintainAspectRatio: false,
+        maintainAspectRatio,
         animation: false,
         scales: {
           y: {
@@ -8937,7 +9017,7 @@ const NumberSequencesOverTimeBarChart = ({ data, yAxisScaleType }) => {
         }
       }
     }),
-    [data, yAxisScaleType]
+    [data, maintainAspectRatio, yAxisScaleType]
   );
   return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
@@ -8957,7 +9037,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 +9049,7 @@ const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }) => {
         datasets: getDatasets(data)
       },
       options: {
-        maintainAspectRatio: false,
+        maintainAspectRatio,
         animation: false,
         scales: {
           y: {
@@ -8983,7 +9067,7 @@ const NumberSequencesOverTimeLineChart = ({ data, yAxisScaleType }) => {
         }
       }
     }),
-    [data, yAxisScaleType]
+    [data, maintainAspectRatio, yAxisScaleType]
   );
   return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
@@ -9042,7 +9126,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 +9159,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 +9281,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;
@@ -9406,8 +9505,17 @@ class BaseMutationOverTimeDataMap extends Map2dBase {
     super(serializeSubstitutionOrDeletion, serializeTemporal, initialContent);
   }
 }
-function getFilteredMutationOverTimeData(data, overallMutationData, displayedSegments, displayedMutationTypes, proportionInterval) {
+const displayMutationsSchema = z$2.array(z$2.string()).min(1);
+function getFilteredMutationOverTimeData({
+  data,
+  overallMutationData,
+  displayedSegments,
+  displayedMutationTypes,
+  proportionInterval,
+  displayMutations
+}) {
   const filteredData = new Map2dView(data);
+  const displayMutationsSet = displayMutations === void 0 ? null : new Set(displayMutations.map((it) => it.toUpperCase()));
   const mutationsToFilterOut = overallMutationData.filter((entry) => {
     if (entry.proportion < proportionInterval.min || entry.proportion > proportionInterval.max) {
       return true;
@@ -9415,6 +9523,9 @@ function getFilteredMutationOverTimeData(data, overallMutationData, displayedSeg
     if (displayedSegments.some((segment) => segment.segment === entry.mutation.segment && !segment.checked)) {
       return true;
     }
+    if (displayMutationsSet !== null && !displayMutationsSet.has(entry.mutation.code)) {
+      return true;
+    }
     return displayedMutationTypes.some(
       (mutationType) => mutationType.type === entry.mutation.type && !mutationType.checked
     );
@@ -9537,8 +9648,7 @@ const MutationsOverTimeGrid = ({
       allMutations.length,
       " mutations. You can narrow the filter to reduce the number of mutations."
     ] }),
-    allMutations.length === 0 && /* @__PURE__ */ u$1("div", { className: "flex justify-center", children: "No data available for your filters." }),
-    /* @__PURE__ */ u$1(
+    allMutations.length === 0 ? /* @__PURE__ */ u$1("div", { className: "flex justify-center", children: "No data available for your filters." }) : /* @__PURE__ */ u$1(
       "div",
       {
         ref: gridRef,
@@ -9712,8 +9822,13 @@ const mutationOverTimeSchema = z$2.object({
   views: z$2.array(mutationsOverTimeViewSchema),
   granularity: temporalGranularitySchema,
   lapisDateField: z$2.string().min(1),
+  displayMutations: displayMutationsSchema.optional(),
+  initialMeanProportionInterval: z$2.object({
+    min: z$2.number().min(0).max(1),
+    max: z$2.number().min(0).max(1)
+  }),
   width: z$2.string(),
-  height: z$2.string()
+  height: z$2.string().optional()
 });
 const MutationsOverTime = (componentProps) => {
   const { width, height } = componentProps;
@@ -9762,22 +9877,31 @@ const MutationsOverTimeTabs$1 = ({
   originalComponentProps,
   overallMutationData
 }) => {
-  const [proportionInterval, setProportionInterval] = h({ min: 0.05, max: 0.9 });
+  const [proportionInterval, setProportionInterval] = h(originalComponentProps.initialMeanProportionInterval);
   const [colorScale, setColorScale] = h({ min: 0, max: 1, color: "indigo" });
   const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(originalComponentProps.sequenceType);
   const [displayedMutationTypes, setDisplayedMutationTypes] = h([
     { label: "Substitutions", checked: true, type: "substitution" },
     { label: "Deletions", checked: true, type: "deletion" }
   ]);
+  const displayMutations = originalComponentProps.displayMutations;
   const filteredData = T$1(() => {
-    return getFilteredMutationOverTimeData(
-      mutationOverTimeData,
+    return getFilteredMutationOverTimeData({
+      data: mutationOverTimeData,
       overallMutationData,
       displayedSegments,
       displayedMutationTypes,
-      proportionInterval
-    );
-  }, [mutationOverTimeData, overallMutationData, displayedSegments, displayedMutationTypes, proportionInterval]);
+      proportionInterval,
+      displayMutations
+    });
+  }, [
+    mutationOverTimeData,
+    overallMutationData,
+    displayedSegments,
+    displayedMutationTypes,
+    proportionInterval,
+    displayMutations
+  ]);
   const getTab = (view) => {
     if (filteredData === void 0) {
       return {
@@ -9904,9 +10028,11 @@ 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";
+    this.displayMutations = void 0;
+    this.initialMeanProportionInterval = { min: 0.05, max: 0.9 };
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -9918,7 +10044,9 @@ let MutationsOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
         width: this.width,
         height: this.height,
         granularity: this.granularity,
-        lapisDateField: this.lapisDateField
+        lapisDateField: this.lapisDateField,
+        displayMutations: this.displayMutations,
+        initialMeanProportionInterval: this.initialMeanProportionInterval
       }
     );
   }
@@ -9944,6 +10072,12 @@ __decorateClass$8([
 __decorateClass$8([
   n$1({ type: String })
 ], MutationsOverTimeComponent.prototype, "lapisDateField", 2);
+__decorateClass$8([
+  n$1({ type: Array })
+], MutationsOverTimeComponent.prototype, "displayMutations", 2);
+__decorateClass$8([
+  n$1({ type: Object })
+], MutationsOverTimeComponent.prototype, "initialMeanProportionInterval", 2);
 MutationsOverTimeComponent = __decorateClass$8([
   t$3("gs-mutations-over-time")
 ], MutationsOverTimeComponent);
@@ -10591,6 +10725,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 +10742,8 @@ const SequencesByLocationMap = ({
   zoom,
   offsetX,
   offsetY,
-  hasTableView
+  hasTableView,
+  maintainAspectRatio
 }) => {
   const ref = A$1(null);
   y(() => {
@@ -10633,8 +10774,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 +10912,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 +11043,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 +11072,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 +11100,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 +11171,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 +11244,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 +11272,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 +11301,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 +11420,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 +11521,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 +15277,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 +15710,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,