@genspectrum/dashboard-components 0.5.4 → 0.5.5

package/dist/dashboard-components.js

@@ -490,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 {
@@ -528,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;
@@ -1689,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,
@@ -4616,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);
@@ -4645,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);
@@ -4656,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 {
@@ -4692,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) {
@@ -4980,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,
@@ -5131,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 {
@@ -5167,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) {
@@ -5204,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);
@@ -5333,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),
@@ -6242,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,
@@ -6471,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;
@@ -6632,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));
@@ -6714,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)) });
 };
@@ -6776,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,
@@ -6962,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 {
@@ -7012,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);
@@ -7264,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,
@@ -7392,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 {
@@ -7436,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) => {
@@ -7518,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,
@@ -7583,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 {
@@ -7623,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";
@@ -7766,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,
@@ -8031,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);
@@ -8156,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,
@@ -8827,6 +8957,7 @@ export {
   MutationComparisonComponent,
   MutationFilterComponent,
   MutationsComponent,
+  NumberSequencesOverTimeComponent,
   PrevalenceOverTimeComponent,
   RelativeGrowthAdvantageComponent,
   TextInputComponent