@genspectrum/dashboard-components 0.5.3 → 0.5.5

package/dist/dashboard-components.js

@@ -347,6 +347,7 @@ const getSegmentNames = (referenceGenome, sequenceType) => {
     }
   }
 };
+const isSingleSegmented = (referenceGenome) => referenceGenome.nucleotideSequences.length === 1;
 const orderByType = z$1.enum(["ascending", "descending"]);
 const orderBy = z$1.object({
   field: z$1.string(),
@@ -489,14 +490,14 @@ const substitutionsOrDeletionsEndpoint = (lapisUrl, sequenceType) => {
   return sequenceType === "amino acid" ? `${lapisUrl}/sample/aminoAcidMutations` : `${lapisUrl}/sample/nucleotideMutations`;
 };
 const referenceGenomeEndpoint = (lapisUrl) => `${lapisUrl}/sample/referenceGenome`;
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$a(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 let App = class extends LitElement {
@@ -527,14 +528,14 @@ let App = class extends LitElement {
     return this;
   }
 };
-__decorateClass$a([
+__decorateClass$b([
   provide({ context: lapisContext }),
   n2()
 ], App.prototype, "lapis", 2);
-__decorateClass$a([
+__decorateClass$b([
   provide({ context: referenceGenomeContext })
 ], App.prototype, "referenceGenome", 2);
-App = __decorateClass$a([
+App = __decorateClass$b([
   t$2("gs-app")
 ], App);
 var f$1 = 0;
@@ -1688,24 +1689,13 @@ function useQuery(fetchDataCallback, dependencies = []) {
   return { data, error, isLoading };
 }
 const MutationComparison = ({
-  lapisFilters,
-  sequenceType,
-  views,
   width,
   height,
   headline = "Mutation comparison",
-  pageSize
+  ...innerProps
 }) => {
   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(
-    MutationComparisonInner,
-    {
-      lapisFilters,
-      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(MutationComparisonInner, { ...innerProps }) }) }) });
 };
 const MutationComparisonInner = ({
   lapisFilters,
@@ -4615,14 +4605,14 @@ input.tab:checked + .tab-content,
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }`;
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$9(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 const tailwindElementCss = unsafeCSS(tailwindStyle);
@@ -4644,10 +4634,10 @@ const _PreactLitAdapter = class _PreactLitAdapter extends ReactiveElement {
 };
 _PreactLitAdapter.styles = [tailwindElementCss, minMaxPercentSliderElementCss];
 let PreactLitAdapter = _PreactLitAdapter;
-__decorateClass$9([
+__decorateClass$a([
   consume({ context: lapisContext })
 ], PreactLitAdapter.prototype, "lapis", 2);
-__decorateClass$9([
+__decorateClass$a([
   consume({ context: referenceGenomeContext, subscribe: true })
 ], PreactLitAdapter.prototype, "referenceGenome", 2);
 const gridJsElementCss = unsafeCSS(gridJsStyle);
@@ -4655,14 +4645,14 @@ const _PreactLitAdapterWithGridJsStyles = class _PreactLitAdapterWithGridJsStyle
 };
 _PreactLitAdapterWithGridJsStyles.styles = [...PreactLitAdapter.styles, gridJsElementCss];
 let PreactLitAdapterWithGridJsStyles = _PreactLitAdapterWithGridJsStyles;
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$8(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -4691,28 +4681,28 @@ let MutationComparisonComponent = class extends PreactLitAdapterWithGridJsStyles
     );
   }
 };
-__decorateClass$8([
+__decorateClass$9([
   n2({ type: Array })
 ], MutationComparisonComponent.prototype, "lapisFilters", 2);
-__decorateClass$8([
+__decorateClass$9([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "sequenceType", 2);
-__decorateClass$8([
+__decorateClass$9([
   n2({ type: Array })
 ], MutationComparisonComponent.prototype, "views", 2);
-__decorateClass$8([
+__decorateClass$9([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "width", 2);
-__decorateClass$8([
+__decorateClass$9([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "height", 2);
-__decorateClass$8([
+__decorateClass$9([
   n2({ type: String })
 ], MutationComparisonComponent.prototype, "headline", 2);
-__decorateClass$8([
+__decorateClass$9([
   n2({ type: Object })
 ], MutationComparisonComponent.prototype, "pageSize", 2);
-MutationComparisonComponent = __decorateClass$8([
+MutationComparisonComponent = __decorateClass$9([
   t$2("gs-mutation-comparison")
 ], MutationComparisonComponent);
 function getInsertionsTableData(data) {
@@ -4979,24 +4969,13 @@ function filterMutationsData(data, displayedSegments, displayedMutationTypes) {
   };
 }
 const Mutations = ({
-  lapisFilter,
-  sequenceType,
-  views,
   width,
   height,
   headline = "Mutations",
-  pageSize
+  ...innerProps
 }) => {
   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,
-    {
-      lapisFilter,
-      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, { ...innerProps }) }) }) });
 };
 const MutationsInner = ({
   lapisFilter,
@@ -5130,14 +5109,14 @@ const Toolbar$2 = ({
     /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for mutations" })
   ] });
 };
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -5166,28 +5145,28 @@ let MutationsComponent = class extends PreactLitAdapterWithGridJsStyles {
     );
   }
 };
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: Object })
 ], MutationsComponent.prototype, "lapisFilter", 2);
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: String })
 ], MutationsComponent.prototype, "sequenceType", 2);
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: Array })
 ], MutationsComponent.prototype, "views", 2);
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: String })
 ], MutationsComponent.prototype, "width", 2);
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: String })
 ], MutationsComponent.prototype, "height", 2);
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: String })
 ], MutationsComponent.prototype, "headline", 2);
-__decorateClass$7([
+__decorateClass$8([
   n2({ type: Object })
 ], MutationsComponent.prototype, "pageSize", 2);
-MutationsComponent = __decorateClass$7([
+MutationsComponent = __decorateClass$8([
   t$2("gs-mutations")
 ], MutationsComponent);
 function getPrevalenceOverTimeTableData(data, granularity) {
@@ -5203,6 +5182,9 @@ function getPrevalenceOverTimeTableData(data, granularity) {
     };
   });
 }
+function sortNullToBeginningThenByDate(a2, b3) {
+  return a2.dateRange === null ? -1 : b3.dateRange === null ? 1 : a2.dateRange.toString().localeCompare(b3.dateRange.toString());
+}
 const _LogitScale = class _LogitScale extends Scale {
   constructor(cfg) {
     super(cfg);
@@ -5332,13 +5314,9 @@ const PrevalenceOverTimeBarChart = ({
   };
   return /* @__PURE__ */ u$1(GsChart, { configuration: config });
 };
-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) => {
   return {
     borderWidth: 1,
-    pointRadius: 0,
     label: prevalenceOverTimeVariant.displayName,
     backgroundColor: singleGraphColorRGBAById(index, 0.3),
     borderColor: singleGraphColorRGBAById(index),
@@ -6241,6 +6219,12 @@ function getMinMaxNumber(values) {
   }
   return [min, max];
 }
+function makeArray(arrayOrSingleItem) {
+  if (Array.isArray(arrayOrSingleItem)) {
+    return arrayOrSingleItem;
+  }
+  return [arrayOrSingleItem];
+}
 Chart.register(...registerables, LogitScale);
 const PrevalenceOverTimeBubbleChart = ({
   data,
@@ -6470,35 +6454,6 @@ const PrevalenceOverTimeTable = ({ data, granularity, pageSize }) => {
   };
   return /* @__PURE__ */ u$1(Table, { data: getData(data, granularity), columns: getColumns(data), pageSize });
 };
-class DivisionOperator {
-  constructor(numerator, denominator, keyField, valueField, resultField, numeratorField, denominatorField) {
-    this.numerator = numerator;
-    this.denominator = denominator;
-    this.keyField = keyField;
-    this.valueField = valueField;
-    this.resultField = resultField;
-    this.numeratorField = numeratorField;
-    this.denominatorField = denominatorField;
-  }
-  async evaluate(lapis, signal) {
-    const numeratorEvaluated = await this.numerator.evaluate(lapis, signal);
-    const denominatorEvaluated = await this.denominator.evaluate(lapis, signal);
-    const numeratorMap = /* @__PURE__ */ new Map();
-    numeratorEvaluated.content.forEach((row) => {
-      numeratorMap.set(row[this.keyField], row[this.valueField]);
-    });
-    const content = denominatorEvaluated.content.map((row) => {
-      const numeratorValue = numeratorMap.get(row[this.keyField]) ?? 0;
-      return {
-        [this.keyField]: row[this.keyField],
-        [this.numeratorField]: numeratorValue,
-        [this.denominatorField]: row[this.valueField],
-        [this.resultField]: numeratorValue / row[this.valueField]
-      };
-    });
-    return { content };
-  }
-}
 class FetchAggregatedOperator {
   constructor(filter, fields) {
     this.filter = filter;
@@ -6631,36 +6586,7 @@ class SlidingOperator {
     return { content };
   }
 }
-function queryPrevalenceOverTime(numeratorFilter, denominatorFilter, granularity, smoothingWindow, lapis, lapisDateField, signal) {
-  const numeratorFilters = makeArray(numeratorFilter);
-  const denominatorData = fetchAndPrepare(denominatorFilter, granularity, smoothingWindow, lapisDateField);
-  const subQueries = numeratorFilters.map(async (namedLapisFilter) => {
-    const { displayName, lapisFilter } = namedLapisFilter;
-    const numeratorData = fetchAndPrepare(lapisFilter, granularity, smoothingWindow, lapisDateField);
-    const divide = new DivisionOperator(
-      numeratorData,
-      denominatorData,
-      "dateRange",
-      "count",
-      "prevalence",
-      "count",
-      "total"
-    );
-    const dataset = await divide.evaluate(lapis, signal);
-    return {
-      displayName,
-      content: dataset.content
-    };
-  });
-  return Promise.all(subQueries);
-}
-function makeArray(arrayOrSingleItem) {
-  if (Array.isArray(arrayOrSingleItem)) {
-    return arrayOrSingleItem;
-  }
-  return [arrayOrSingleItem];
-}
-function fetchAndPrepare(filter, granularity, smoothingWindow, lapisDateField) {
+function queryAggregatedDataOverTime(filter, granularity, smoothingWindow, lapisDateField) {
   const fetchData = new FetchAggregatedOperator(filter, [lapisDateField]);
   const dataWithFixedDateKey = new RenameFieldOperator(fetchData, lapisDateField, "date");
   const mapData = new MapOperator(dataWithFixedDateKey, (d2) => mapDateToGranularityRange(d2, granularity));
@@ -6713,6 +6639,63 @@ function averageSmoothing(slidingWindow) {
   const centerIndex = Math.floor(slidingWindow.length / 2);
   return { dateRange: slidingWindow[centerIndex].dateRange, count: average };
 }
+class DivisionOperator {
+  constructor(numerator, denominator, keyField, valueField, resultField, numeratorField, denominatorField) {
+    this.numerator = numerator;
+    this.denominator = denominator;
+    this.keyField = keyField;
+    this.valueField = valueField;
+    this.resultField = resultField;
+    this.numeratorField = numeratorField;
+    this.denominatorField = denominatorField;
+  }
+  async evaluate(lapis, signal) {
+    const numeratorEvaluated = await this.numerator.evaluate(lapis, signal);
+    const denominatorEvaluated = await this.denominator.evaluate(lapis, signal);
+    const numeratorMap = /* @__PURE__ */ new Map();
+    numeratorEvaluated.content.forEach((row) => {
+      numeratorMap.set(row[this.keyField], row[this.valueField]);
+    });
+    const content = denominatorEvaluated.content.map((row) => {
+      const numeratorValue = numeratorMap.get(row[this.keyField]) ?? 0;
+      return {
+        [this.keyField]: row[this.keyField],
+        [this.numeratorField]: numeratorValue,
+        [this.denominatorField]: row[this.valueField],
+        [this.resultField]: numeratorValue / row[this.valueField]
+      };
+    });
+    return { content };
+  }
+}
+function queryPrevalenceOverTime(numeratorFilter, denominatorFilter, granularity, smoothingWindow, lapis, lapisDateField, signal) {
+  const numeratorFilters = makeArray(numeratorFilter);
+  const denominatorData = queryAggregatedDataOverTime(
+    denominatorFilter,
+    granularity,
+    smoothingWindow,
+    lapisDateField
+  );
+  const subQueries = numeratorFilters.map(async (namedLapisFilter) => {
+    const { displayName, lapisFilter } = namedLapisFilter;
+    const numeratorData = queryAggregatedDataOverTime(lapisFilter, granularity, smoothingWindow, lapisDateField);
+    const divide = new DivisionOperator(
+      numeratorData,
+      denominatorData,
+      "dateRange",
+      "count",
+      "prevalence",
+      "count",
+      "total"
+    );
+    const dataset = await divide.evaluate(lapis, signal);
+    return {
+      displayName,
+      content: dataset.content
+    };
+  });
+  return Promise.all(subQueries);
+}
 const Select = ({ items, selected, onChange, selectStyle }) => {
   return /* @__PURE__ */ u$1("select", { class: `select select-bordered ${selectStyle}`, value: selected, onChange, children: items.map((item) => /* @__PURE__ */ u$1("option", { value: item.value, disabled: item.disabled, children: item.label }, item.value)) });
 };
@@ -6775,34 +6758,13 @@ const ScalingSelector = ({
   );
 };
 const PrevalenceOverTime = ({
-  numeratorFilter,
-  denominatorFilter,
-  granularity,
-  smoothingWindow,
-  views,
-  confidenceIntervalMethods,
   width,
   height,
   headline = "Prevalence over time",
-  lapisDateField,
-  pageSize,
-  yAxisMaxConfig
+  ...innerProps
 }) => {
   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,
-    {
-      numeratorFilter,
-      denominatorFilter,
-      granularity,
-      smoothingWindow,
-      views,
-      confidenceIntervalMethods,
-      lapisDateField,
-      pageSize,
-      yAxisMaxConfig
-    }
-  ) }) }) });
+  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, { ...innerProps }) }) }) });
 };
 const PrevalenceOverTimeInner = ({
   numeratorFilter,
@@ -6961,14 +6923,14 @@ const PrevalenceOverTimeInfo = () => {
   ] });
 };
 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) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$6(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -7011,46 +6973,46 @@ let PrevalenceOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles
     );
   }
 };
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: Object })
 ], PrevalenceOverTimeComponent.prototype, "numeratorFilter", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: Object })
 ], PrevalenceOverTimeComponent.prototype, "denominatorFilter", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "granularity", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: Number })
 ], PrevalenceOverTimeComponent.prototype, "smoothingWindow", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: Array })
 ], PrevalenceOverTimeComponent.prototype, "views", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: Array })
 ], PrevalenceOverTimeComponent.prototype, "confidenceIntervalMethods", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "headline", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "width", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "height", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "lapisDateField", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: Object })
 ], PrevalenceOverTimeComponent.prototype, "pageSize", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "yAxisMaxLinear", 2);
-__decorateClass$6([
+__decorateClass$7([
   n2({ type: String })
 ], PrevalenceOverTimeComponent.prototype, "yAxisMaxLogarithmic", 2);
-PrevalenceOverTimeComponent = __decorateClass$6([
+PrevalenceOverTimeComponent = __decorateClass$7([
   t$2("gs-prevalence-over-time")
 ], PrevalenceOverTimeComponent);
 Chart.register(...registerables, LogitScale);
@@ -7263,28 +7225,13 @@ function toYearMonthDay(d2) {
   };
 }
 const RelativeGrowthAdvantage = ({
-  views,
   width,
   height,
-  numeratorFilter,
-  denominatorFilter,
-  generationTime,
   headline = "Relative growth advantage",
-  lapisDateField,
-  yAxisMaxConfig
+  ...innerProps
 }) => {
   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,
-      numeratorFilter,
-      denominatorFilter,
-      generationTime,
-      lapisDateField,
-      yAxisMaxConfig
-    }
-  ) }) }) });
+  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, { ...innerProps }) }) }) });
 };
 const RelativeGrowthAdvantageInner = ({
   numeratorFilter,
@@ -7391,14 +7338,14 @@ const RelativeGrowthAdvantageInfo = ({ generationTime }) => {
     ] })
   ] });
 };
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$5(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
@@ -7435,37 +7382,37 @@ let RelativeGrowthAdvantageComponent = class extends PreactLitAdapter {
     );
   }
 };
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: Object })
 ], RelativeGrowthAdvantageComponent.prototype, "numeratorFilter", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: Object })
 ], RelativeGrowthAdvantageComponent.prototype, "denominatorFilter", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: Number })
 ], RelativeGrowthAdvantageComponent.prototype, "generationTime", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: Array })
 ], RelativeGrowthAdvantageComponent.prototype, "views", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "headline", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "width", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "height", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "lapisDateField", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "yAxisMaxLinear", 2);
-__decorateClass$5([
+__decorateClass$6([
   n2({ type: String })
 ], RelativeGrowthAdvantageComponent.prototype, "yAxisMaxLogarithmic", 2);
-RelativeGrowthAdvantageComponent = __decorateClass$5([
+RelativeGrowthAdvantageComponent = __decorateClass$6([
   t$2("gs-relative-growth-advantage")
 ], RelativeGrowthAdvantageComponent);
 const compareAscending = (a2, b3) => {
@@ -7517,28 +7464,13 @@ const AggregateTable = ({ data, fields, pageSize }) => {
   return /* @__PURE__ */ u$1(Table, { data, columns: headers, pageSize });
 };
 const Aggregate = ({
-  views,
   width,
   height,
   headline = "Mutations",
-  filter,
-  fields,
-  pageSize,
-  initialSortField,
-  initialSortDirection
+  ...innerProps
 }) => {
   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(
-    AggregateInner,
-    {
-      fields,
-      filter,
-      views,
-      initialSortField,
-      initialSortDirection,
-      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(AggregateInner, { ...innerProps }) }) }) });
 };
 const AggregateInner = ({
   fields,
@@ -7582,14 +7514,14 @@ const Toolbar = ({ data }) => {
     /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for aggregate" })
   ] });
 };
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
   for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$4(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
@@ -7622,36 +7554,255 @@ let AggregateComponent = class extends PreactLitAdapterWithGridJsStyles {
     );
   }
 };
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Array })
 ], AggregateComponent.prototype, "fields", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Array })
 ], AggregateComponent.prototype, "views", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Object })
 ], AggregateComponent.prototype, "filter", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: String })
 ], AggregateComponent.prototype, "width", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: String })
 ], AggregateComponent.prototype, "height", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: String })
 ], AggregateComponent.prototype, "headline", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: String })
 ], AggregateComponent.prototype, "initialSortField", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: String })
 ], AggregateComponent.prototype, "initialSortDirection", 2);
-__decorateClass$4([
+__decorateClass$5([
   n2({ type: Object })
 ], AggregateComponent.prototype, "pageSize", 2);
-AggregateComponent = __decorateClass$4([
+AggregateComponent = __decorateClass$5([
   t$2("gs-aggregate")
 ], AggregateComponent);
+const getNumberOfSequencesOverTimeTableData = (data, dateRangeKey) => {
+  const datasetsWithCountByDate = data.map(({ displayName, content }) => ({
+    displayName,
+    content: new Map(content.map((datum) => {
+      var _a;
+      return [(_a = datum.dateRange) == null ? void 0 : _a.toString(), datum];
+    }))
+  }));
+  const allDateRangesThatOccurInData = datasetsWithCountByDate.map(({ content }) => [...content.values()].map((datum) => datum.dateRange)).reduce((acc, keys) => /* @__PURE__ */ new Set([...acc, ...keys]), /* @__PURE__ */ new Set());
+  const minMax = getMinMaxTemporal(allDateRangesThatOccurInData);
+  if (minMax === null) {
+    return [];
+  }
+  const allDateRanges = generateAllInRange(...minMax);
+  if (allDateRangesThatOccurInData.has(null)) {
+    allDateRanges.unshift(null);
+  }
+  return allDateRanges.map((dateRange) => {
+    return datasetsWithCountByDate.reduce(
+      (acc, dataset) => {
+        var _a;
+        return {
+          ...acc,
+          [dataset.displayName]: ((_a = dataset.content.get(dateRange == null ? void 0 : dateRange.toString())) == null ? void 0 : _a.count) ?? 0
+        };
+      },
+      { [dateRangeKey]: (dateRange == null ? void 0 : dateRange.toString()) ?? "Unknown" }
+    );
+  });
+};
+Chart.register(...registerables);
+const NumberSequencesOverTimeBarChart = ({ data }) => {
+  const config = T(
+    () => ({
+      type: "bar",
+      data: {
+        datasets: getDatasets(data)
+      },
+      options: {
+        maintainAspectRatio: false,
+        animation: false,
+        plugins: {
+          legend: {
+            display: false
+          },
+          tooltip: {
+            mode: "index",
+            intersect: false
+          }
+        }
+      }
+    }),
+    [data]
+  );
+  return /* @__PURE__ */ u$1(GsChart, { configuration: config });
+};
+const getDatasets = (data) => {
+  const tableData = getNumberOfSequencesOverTimeTableData(data, "date");
+  return data.map(
+    ({ displayName }, index) => ({
+      borderWidth: 1,
+      label: displayName,
+      backgroundColor: singleGraphColorRGBAById(index, 0.3),
+      borderColor: singleGraphColorRGBAById(index),
+      data: tableData.map((row) => ({
+        x: row.date,
+        y: row[displayName]
+      }))
+    })
+  );
+};
+const NumberSequencesOverTimeTable = ({ data, granularity, pageSize }) => {
+  const columns = [
+    {
+      name: granularity,
+      sort: true
+    },
+    ...data.map((dataset) => ({
+      name: dataset.displayName,
+      sort: true
+    }))
+  ];
+  const flatTableData = T(() => {
+    const tableData = getNumberOfSequencesOverTimeTableData(data, granularity);
+    return Object.values(tableData).map((row) => Object.values(row));
+  }, [data, granularity]);
+  return /* @__PURE__ */ u$1(Table, { data: flatTableData, columns, pageSize });
+};
+async function queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField, granularity, smoothingWindow) {
+  const lapisFilters = makeArray(lapisFilter);
+  const queries = lapisFilters.map(async ({ displayName, lapisFilter: lapisFilter2 }) => {
+    const { content } = await queryAggregatedDataOverTime(
+      lapisFilter2,
+      granularity,
+      smoothingWindow,
+      lapisDateField
+    ).evaluate(lapis);
+    return {
+      displayName,
+      content: content.sort(sortNullToBeginningThenByDate)
+    };
+  });
+  return Promise.all(queries);
+}
+const NumberSequencesOverTime = ({ width, height, headline, ...innerProps }) => {
+  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(NumberSequencesOverTimeInner, { ...innerProps }) }) }) });
+};
+const NumberSequencesOverTimeInner = ({
+  lapisFilter,
+  granularity,
+  smoothingWindow,
+  lapisDateField,
+  views,
+  pageSize
+}) => {
+  const lapis = x(LapisUrlContext);
+  const { data, error, isLoading } = useQuery(
+    () => queryNumberOfSequencesOverTime(lapis, lapisFilter, lapisDateField, granularity, smoothingWindow)
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ u$1(LoadingDisplay, {});
+  }
+  if (error !== null) {
+    return /* @__PURE__ */ u$1(ErrorDisplay, { error });
+  }
+  if (data === null) {
+    return /* @__PURE__ */ u$1(NoDataDisplay, {});
+  }
+  return /* @__PURE__ */ u$1(NumberSequencesOverTimeTabs, { views, data, granularity, pageSize });
+};
+const NumberSequencesOverTimeTabs = ({ views, data, granularity, pageSize }) => {
+  const getTab = (view) => {
+    switch (view) {
+      case "bar":
+        return { title: "Bar", content: /* @__PURE__ */ u$1(NumberSequencesOverTimeBarChart, { data }) };
+      case "line":
+        return { title: "Line", content: /* @__PURE__ */ u$1("div", { children: "not implemented, TODO #317" }) };
+      case "table":
+        return {
+          title: "Table",
+          content: /* @__PURE__ */ u$1(NumberSequencesOverTimeTable, { data, granularity, pageSize })
+        };
+      default:
+        throw new Error(`Unknown view: ${view}`);
+    }
+  };
+  return /* @__PURE__ */ u$1(Tabs, { tabs: views.map((view) => getTab(view)) });
+};
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
+  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
+    if (decorator = decorators[i2])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$4(target, key, result);
+  return result;
+};
+let NumberSequencesOverTimeComponent = class extends PreactLitAdapterWithGridJsStyles {
+  constructor() {
+    super(...arguments);
+    this.lapisFilter = { displayName: "", lapisFilter: {} };
+    this.lapisDateField = "date";
+    this.views = ["bar", "line", "table"];
+    this.headline = "Number of sequences of time";
+    this.width = "100%";
+    this.height = "700px";
+    this.granularity = "day";
+    this.smoothingWindow = 0;
+    this.pageSize = false;
+  }
+  render() {
+    return /* @__PURE__ */ u$1(
+      NumberSequencesOverTime,
+      {
+        lapisFilter: this.lapisFilter,
+        lapisDateField: this.lapisDateField,
+        views: this.views,
+        headline: this.headline,
+        width: this.width,
+        height: this.height,
+        granularity: this.granularity,
+        smoothingWindow: this.smoothingWindow,
+        pageSize: this.pageSize
+      }
+    );
+  }
+};
+__decorateClass$4([
+  n2({ type: Object })
+], NumberSequencesOverTimeComponent.prototype, "lapisFilter", 2);
+__decorateClass$4([
+  n2({ type: String })
+], NumberSequencesOverTimeComponent.prototype, "lapisDateField", 2);
+__decorateClass$4([
+  n2({ type: Array })
+], NumberSequencesOverTimeComponent.prototype, "views", 2);
+__decorateClass$4([
+  n2({ type: String })
+], NumberSequencesOverTimeComponent.prototype, "headline", 2);
+__decorateClass$4([
+  n2({ type: String })
+], NumberSequencesOverTimeComponent.prototype, "width", 2);
+__decorateClass$4([
+  n2({ type: String })
+], NumberSequencesOverTimeComponent.prototype, "height", 2);
+__decorateClass$4([
+  n2({ type: String })
+], NumberSequencesOverTimeComponent.prototype, "granularity", 2);
+__decorateClass$4([
+  n2({ type: Number })
+], NumberSequencesOverTimeComponent.prototype, "smoothingWindow", 2);
+__decorateClass$4([
+  n2({ type: Object })
+], NumberSequencesOverTimeComponent.prototype, "pageSize", 2);
+NumberSequencesOverTimeComponent = __decorateClass$4([
+  t$2("gs-number-sequences-over-time")
+], NumberSequencesOverTimeComponent);
 const PRESET_VALUE_CUSTOM = "custom";
 const PRESET_VALUE_ALL_TIMES = "allTimes";
 const PRESET_VALUE_LAST_2_WEEKS = "last2Weeks";
@@ -7765,26 +7916,11 @@ const toYYYYMMDD = (date) => {
   return date.toLocaleDateString("en-CA", options2);
 };
 const DateRangeSelector = ({
-  customSelectOptions,
-  earliestDate = "1900-01-01",
-  initialValue,
   width,
-  dateColumn,
-  initialDateFrom,
-  initialDateTo
+  ...innerProps
 }) => {
   const size2 = { width, height: "3rem" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1("div", { style: { width }, children: /* @__PURE__ */ u$1(
-    DateRangeSelectorInner,
-    {
-      customSelectOptions,
-      earliestDate,
-      initialValue,
-      dateColumn,
-      initialDateFrom,
-      initialDateTo
-    }
-  ) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1("div", { style: { width }, children: /* @__PURE__ */ u$1(DateRangeSelectorInner, { ...innerProps }) }) });
 };
 const DateRangeSelectorInner = ({
   customSelectOptions,
@@ -8030,14 +8166,9 @@ function compareLocationEntries(fields) {
     return 0;
   };
 }
-const LocationFilter = ({
-  width,
-  initialValue,
-  fields,
-  placeholderText
-}) => {
+const LocationFilter = ({ width, ...innerProps }) => {
   const size2 = { width, height: "3rem" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(LocationFilterInner, { initialValue, fields, placeholderText }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(LocationFilterInner, { ...innerProps }) }) });
 };
 const LocationFilterInner = ({ initialValue, fields, placeholderText }) => {
   const lapis = x(LapisUrlContext);
@@ -8155,9 +8286,9 @@ async function fetchAutocompleteList(lapis, field, signal) {
   const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
   return data.map((item) => item[field]);
 }
-const TextInput = ({ width, lapisField, placeholderText, initialValue }) => {
+const TextInput = ({ width, ...innerProps }) => {
   const size2 = { width, height: "3rem" };
-  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(TextInputInner, { lapisField, placeholderText, initialValue }) }) });
+  return /* @__PURE__ */ u$1(ErrorBoundary, { size: size2, children: /* @__PURE__ */ u$1(ResizeContainer, { size: size2, children: /* @__PURE__ */ u$1(TextInputInner, { ...innerProps }) }) });
 };
 const TextInputInner = ({
   lapisField,
@@ -8266,9 +8397,221 @@ const ReferenceGenomesAwaiter = ({ children }) => {
 function isNotInitialized(referenceGenome) {
   return referenceGenome.nucleotideSequences.length === 0 && referenceGenome.genes.length === 0;
 }
+const MutationFilterInfo = () => {
+  const referenceGenome = x(ReferenceGenomeContext);
+  const firstGene = referenceGenome.genes[0].name;
+  return /* @__PURE__ */ u$1(Info, { height: "80vh", children: [
+    /* @__PURE__ */ u$1(InfoHeadline1, { children: " Mutation Filter" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: "This component allows you to filter for mutations at specific positions." }),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: " Nucleotide Mutations and Insertions" }),
+    isSingleSegmented(referenceGenome) ? /* @__PURE__ */ u$1(SingleSegmentedNucleotideMutationsInfo, {}) : /* @__PURE__ */ u$1(MultiSegmentedNucleotideMutationsInfo, {}),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Amino Acid Mutations and Insertions" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "An amino acid mutation has the format ",
+      /* @__PURE__ */ u$1("b", { children: "<gene>:<position><base>" }),
+      " or",
+      /* @__PURE__ */ u$1("b", { children: "<gene>:<base_ref><position><base>" }),
+      ". A ",
+      /* @__PURE__ */ u$1("b", { children: "<base>" }),
+      " can be one of the 20 amino acid codes. It can also be ",
+      /* @__PURE__ */ u$1("b", { children: "-" }),
+      " for deletion and ",
+      /* @__PURE__ */ u$1("b", { children: "X" }),
+      " for unknown. Example:",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: "E:57Q" }),
+      "."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "Insertions can be searched for in the same manner, they just need to have ",
+      /* @__PURE__ */ u$1("b", { children: "ins_" }),
+      " appended to the start of the mutation. Example: ",
+      /* @__PURE__ */ u$1("b", { children: [
+        "ins_",
+        firstGene,
+        ":31:N"
+      ] }),
+      " would filter for sequences with an insertion of N between positions 31 and 32 in the gene ",
+      firstGene,
+      "."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This organism has the following genes: ",
+      referenceGenome.genes.map((gene) => gene.name).join(", "),
+      "."
+    ] }),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Insertion Wildcards" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This component supports insertion queries that contain wildcards ",
+      /* @__PURE__ */ u$1("b", { children: "?" }),
+      ". For example",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: [
+        "ins_",
+        firstGene,
+        ":214:?EP?"
+      ] }),
+      " will match all cases where segment ",
+      /* @__PURE__ */ u$1("b", { children: firstGene }),
+      " has an insertion of ",
+      /* @__PURE__ */ u$1("b", { children: "EP" }),
+      " between the positions ",
+      /* @__PURE__ */ u$1("b", { children: "214" }),
+      " and ",
+      /* @__PURE__ */ u$1("b", { children: "215" }),
+      " but also an insertion of other amino acids which include the ",
+      /* @__PURE__ */ u$1("b", { children: "EP" }),
+      ", e.g. the insertion ",
+      /* @__PURE__ */ u$1("b", { children: "EPE" }),
+      " will be matched."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "You can also use wildcards to match any insertion at a given position. For example",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: [
+        "ins_",
+        firstGene,
+        ":214:?"
+      ] }),
+      " match any (but at least one) insertion between the positions 214 and 215."
+    ] }),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Multiple Mutations" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: "Multiple mutation filters can be provided by adding one mutation after the other." }),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Any Mutation" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "To filter for any mutation at a given position you can omit the ",
+      /* @__PURE__ */ u$1("b", { children: "<base>" }),
+      ". Example:",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: [
+        firstGene,
+        ":20"
+      ] }),
+      "."
+    ] }),
+    /* @__PURE__ */ u$1(InfoHeadline2, { children: "No Mutation" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "You can write a ",
+      /* @__PURE__ */ u$1("b", { children: "." }),
+      " for the ",
+      /* @__PURE__ */ u$1("b", { children: "<base>" }),
+      " to filter for sequences for which it is confirmed that no mutation occurred, i.e. has the same base as the reference genome at the specified position."
+    ] })
+  ] });
+};
+const SingleSegmentedNucleotideMutationsInfo = () => {
+  return /* @__PURE__ */ u$1(Fragment, { children: [
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This organism is single-segmented. Thus, nucleotide mutations have the format",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: "<position><base>" }),
+      " or ",
+      /* @__PURE__ */ u$1("b", { children: "<base_ref><position><base>" }),
+      ". The",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: "<base_ref>" }),
+      " is the reference base at the position. It is optional. A ",
+      /* @__PURE__ */ u$1("b", { children: "<base>" }),
+      " can be one of the four nucleotides ",
+      /* @__PURE__ */ u$1("b", { children: "A" }),
+      ", ",
+      /* @__PURE__ */ u$1("b", { children: "T" }),
+      ", ",
+      /* @__PURE__ */ u$1("b", { children: "C" }),
+      ", and ",
+      /* @__PURE__ */ u$1("b", { children: "G" }),
+      ". It can also be ",
+      /* @__PURE__ */ u$1("b", { children: "-" }),
+      " for deletion and ",
+      /* @__PURE__ */ u$1("b", { children: "N" }),
+      " for unknown. For example if the reference sequence is ",
+      /* @__PURE__ */ u$1("b", { children: "A" }),
+      " at position",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: "23" }),
+      " both: ",
+      /* @__PURE__ */ u$1("b", { children: "23T" }),
+      " and ",
+      /* @__PURE__ */ u$1("b", { children: "A23T" }),
+      " will yield the same results."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "Insertions can be searched for in the same manner, they just need to have ",
+      /* @__PURE__ */ u$1("b", { children: "ins_" }),
+      " appended to the start of the mutation. Example: ",
+      /* @__PURE__ */ u$1("b", { children: "ins_1046:A" }),
+      " would filter for sequences with an insertion of A between the positions 1046 and 1047 in the nucleotide sequence."
+    ] })
+  ] });
+};
+const MultiSegmentedNucleotideMutationsInfo = () => {
+  const referenceGenome = x(ReferenceGenomeContext);
+  const firstSegment = referenceGenome.nucleotideSequences[0].name;
+  return /* @__PURE__ */ u$1(Fragment, { children: [
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This organism is multi-segmented. Thus, nucleotide mutations have the format",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: "<segment>:<position><base>" }),
+      " or",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: "<segment>:<base_ref><position><base>" }),
+      ". ",
+      /* @__PURE__ */ u$1("b", { children: "<base_ref>" }),
+      " is the reference base at the position. It is optional. A ",
+      /* @__PURE__ */ u$1("b", { children: "<base>" }),
+      " can be one of the four nucleotides",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: "A" }),
+      ", ",
+      /* @__PURE__ */ u$1("b", { children: "T" }),
+      ", ",
+      /* @__PURE__ */ u$1("b", { children: "C" }),
+      ", and ",
+      /* @__PURE__ */ u$1("b", { children: "G" }),
+      ". It can also be ",
+      /* @__PURE__ */ u$1("b", { children: "-" }),
+      " for deletion and ",
+      /* @__PURE__ */ u$1("b", { children: "N" }),
+      " for unknown. For example if the reference sequence is ",
+      /* @__PURE__ */ u$1("b", { children: "A" }),
+      " at position ",
+      /* @__PURE__ */ u$1("b", { children: "23" }),
+      " both:",
+      " ",
+      /* @__PURE__ */ u$1("b", { children: [
+        firstSegment,
+        ":23T"
+      ] }),
+      " and ",
+      /* @__PURE__ */ u$1("b", { children: [
+        firstSegment,
+        ":A23T"
+      ] }),
+      " will yield the same results."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "Insertions can be searched for in the same manner, they just need to have ",
+      /* @__PURE__ */ u$1("b", { children: "ins_" }),
+      " appended to the start of the mutation. Example: ",
+      /* @__PURE__ */ u$1("b", { children: [
+        "ins_",
+        firstSegment,
+        ":10462:A"
+      ] }),
+      "."
+    ] }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This organism has the following segments:",
+      " ",
+      referenceGenome.nucleotideSequences.map((gene) => gene.name).join(", "),
+      "."
+    ] }),
+    " "
+  ] });
+};
 const sequenceTypeFromSegment = (possibleSegment, referenceGenome) => {
   if (possibleSegment === void 0) {
-    return referenceGenome.nucleotideSequences.length === 1 ? "nucleotide" : void 0;
+    return isSingleSegmented(referenceGenome) ? "nucleotide" : void 0;
   }
   if (referenceGenome.nucleotideSequences.some((sequence) => sequence.name === possibleSegment)) {
     return "nucleotide";
@@ -8388,7 +8731,7 @@ const MutationFilterInner = ({ initialValue }) => {
     setIsError(false);
   };
   return /* @__PURE__ */ u$1("form", { className: "w-full border boder-gray-300 rounded-md relative", onSubmit: handleSubmit, ref: formRef, children: [
-    /* @__PURE__ */ u$1("div", { className: "absolute -top-3 -right-3", children: /* @__PURE__ */ u$1(Info, { height: "100px", children: "Info for mutation filter" }) }),
+    /* @__PURE__ */ u$1("div", { className: "absolute -top-3 -right-3", children: /* @__PURE__ */ u$1(MutationFilterInfo, {}) }),
     /* @__PURE__ */ u$1("div", { className: "w-full flex p-2 flex-wrap items-center", children: [
       /* @__PURE__ */ u$1(
         SelectedMutationDisplay,
@@ -8614,6 +8957,7 @@ export {
   MutationComparisonComponent,
   MutationFilterComponent,
   MutationsComponent,
+  NumberSequencesOverTimeComponent,
   PrevalenceOverTimeComponent,
   RelativeGrowthAdvantageComponent,
   TextInputComponent