@genspectrum/dashboard-components 0.13.4 → 0.13.6

package/custom-elements.json

@@ -805,7 +805,7 @@
           "type": {
             "text": "StoryObj<LocationFilterProps>"
           },
-          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>18/}'); await userEvent.click(canvas.getByLabelText('toggle menu')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: undefined, country: undefined, division: undefined, location: undefined, }); }); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await userEvent.click(canvas.getByRole('option', { name: 'Asia Asia' })); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: 'Asia', country: undefined, division: undefined, location: undefined, }); }); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await userEvent.click(canvas.getByText('Asia / Bangladesh / Rajshahi / Chapainawabgonj')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }); }); }); }, }"
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>18/}'); await userEvent.click(canvas.getByLabelText('toggle menu')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: undefined, country: undefined, division: undefined, location: undefined, }); }); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await userEvent.click(canvas.getByRole('option', { name: /^Asia.*Asia$/ })); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: 'Asia', country: undefined, division: undefined, location: undefined, }); }); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await userEvent.click(canvas.getByText('Asia / Bangladesh / Rajshahi / Chapainawabgonj')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }); }); }); }, }"
         }
       ],
       "exports": [
@@ -4047,6 +4047,16 @@
               "default": "'700px'",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "attribute": "height"
+            },
+            {
+              "kind": "field",
+              "name": "maxNumberOfGridRows",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "The maximum number of grid rows to display.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "maxNumberOfGridRows"
             }
           ],
           "attributes": [
@@ -4085,6 +4095,15 @@
               "default": "'700px'",
               "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
               "fieldName": "height"
+            },
+            {
+              "name": "maxNumberOfGridRows",
+              "type": {
+                "text": "number"
+              },
+              "default": "100",
+              "description": "The maximum number of grid rows to display.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "maxNumberOfGridRows"
             }
           ],
           "superclass": {

package/dist/components.d.ts

@@ -1317,6 +1317,12 @@ export declare class WastewaterMutationsOverTimeComponent extends PreactLitAdapt
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     height: string;
+    /**
+     * The maximum number of grid rows to display.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     */
+    maxNumberOfGridRows: number;
     render(): JSX_2.Element;
 }
 
@@ -1380,7 +1386,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1388,7 +1394,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1396,7 +1402,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1404,7 +1410,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1412,7 +1418,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1420,7 +1426,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1428,7 +1434,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1436,7 +1442,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1444,7 +1450,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1452,7 +1458,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1460,7 +1466,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1468,7 +1474,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1528,10 +1534,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-text-input-changed': TextInputChangedEvent;
+        'gs-location-changed': LocationChangedEvent;
     }
 }
 
@@ -1539,7 +1545,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1547,10 +1553,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-text-input': TextInputComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -1558,7 +1564,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1585,10 +1591,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1596,7 +1602,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/dist/components.js

@@ -1628,6 +1628,25 @@ const LoadingDisplay = () => {
     }
   );
 };
+const SubstitutionsLink = () => /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Substitution", children: "substitutions" });
+const InsertionsLink = () => /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Insertion", children: "insertions" });
+const DeletionsLink = () => /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Deletion", children: "deletions" });
+const ProportionExplanation = () => /* @__PURE__ */ u$1(Fragment, { children: [
+  /* @__PURE__ */ u$1(InfoHeadline2, { children: "Proportion calculation" }),
+  /* @__PURE__ */ u$1(InfoParagraph, { children: "The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the total number of sequences with a non-ambiguous symbol at the position." }),
+  /* @__PURE__ */ u$1(InfoParagraph, { children: [
+    /* @__PURE__ */ u$1("b", { children: "Example:" }),
+    " Assume we look at nucleotide mutations at position 5 where the reference has a T and assume there are 10 sequences in total:",
+    /* @__PURE__ */ u$1("ul", { className: "list-disc list-inside ml-2", children: [
+      /* @__PURE__ */ u$1("li", { children: "3 sequences have a C," }),
+      /* @__PURE__ */ u$1("li", { children: "2 sequences have a T," }),
+      /* @__PURE__ */ u$1("li", { children: "1 sequence has a G," }),
+      /* @__PURE__ */ u$1("li", { children: "3 sequences have an N," }),
+      /* @__PURE__ */ u$1("li", { children: "1 sequence has a Y (which means T or C)," })
+    ] }),
+    "then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from the calculation."
+  ] })
+] });
 function useFloatingUi(referenceRef, floatingRef, middleware, placement) {
   const cleanupRef = A$1(null);
   y(() => {
@@ -2212,7 +2231,22 @@ const MutationComparisonInfo = ({ originalComponentProps }) => {
   const lapis = x$1(LapisUrlContext);
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Info for mutation comparison" }),
-    /* @__PURE__ */ u$1(InfoParagraph, { children: "TODO: https://github.com/GenSpectrum/dashboard-components/issues/465" }),
+    /* @__PURE__ */ u$1(InfoParagraph, { children: [
+      "This displays ",
+      /* @__PURE__ */ u$1(SubstitutionsLink, {}),
+      " and ",
+      /* @__PURE__ */ u$1(DeletionsLink, {}),
+      " of several variants. It shows mutations where the proportion for any given variant falls within the range you can select in the component's toolbar."
+    ] }),
+    /* @__PURE__ */ u$1(ProportionExplanation, {}),
+    originalComponentProps.views.includes(views.table) && /* @__PURE__ */ u$1(Fragment, { children: [
+      /* @__PURE__ */ u$1(InfoHeadline2, { children: "Table View" }),
+      /* @__PURE__ */ u$1(InfoParagraph, { children: "The table view displays the proportion of mutations that appear in any of the variants." })
+    ] }),
+    originalComponentProps.views.includes(views.venn) && /* @__PURE__ */ u$1(Fragment, { children: [
+      /* @__PURE__ */ u$1(InfoHeadline2, { children: "Venn Diagram View" }),
+      /* @__PURE__ */ u$1(InfoParagraph, { children: "The Venn diagram view illustrates which mutations overlap between the variants and which are exclusive to specific variants. Mutations overlap if their proportion falls within the selected range for two variants. If the proportion of a mutation is within the selected range for one variant but not for the other, the mutation is considered exclusive to that variant." })
+    ] }),
     /* @__PURE__ */ u$1(InfoComponentCode, { componentName: "mutation-comparison", params: originalComponentProps, lapisUrl: lapis })
   ] });
 };
@@ -6075,31 +6109,16 @@ const MutationsInfo = ({ originalComponentProps }) => {
   return /* @__PURE__ */ u$1(Info, { children: [
     /* @__PURE__ */ u$1(InfoHeadline1, { children: "Mutations" }),
     /* @__PURE__ */ u$1(InfoParagraph, { children: [
-      "This shows mutations of a variant. There are three types of mutations:",
-      " ",
-      /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Substitution", children: "substitutions" }),
+      "This shows mutations of a variant. There are three types of mutations: ",
+      /* @__PURE__ */ u$1(SubstitutionsLink, {}),
       ",",
       " ",
-      /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Deletion", children: "deletions" }),
-      " and",
-      " ",
-      /* @__PURE__ */ u$1(InfoLink, { href: "https://www.genome.gov/genetics-glossary/Insertion", children: "insertions" }),
+      /* @__PURE__ */ u$1(DeletionsLink, {}),
+      " and ",
+      /* @__PURE__ */ u$1(InsertionsLink, {}),
       "."
     ] }),
-    /* @__PURE__ */ u$1(InfoHeadline2, { children: "Proportion calculation" }),
-    /* @__PURE__ */ u$1(InfoParagraph, { children: "The proportion of a mutation is calculated by dividing the number of sequences with the mutation by the total number of sequences with a non-ambiguous symbol at the position." }),
-    /* @__PURE__ */ u$1(InfoParagraph, { children: [
-      /* @__PURE__ */ u$1("b", { children: "Example:" }),
-      " Assume we look at nucleotide mutations at position 5 where the reference has a T and assume there are 10 sequences in total:",
-      /* @__PURE__ */ u$1("ul", { className: "list-disc list-inside ml-2", children: [
-        /* @__PURE__ */ u$1("li", { children: "3 sequences have a C," }),
-        /* @__PURE__ */ u$1("li", { children: "2 sequences have a T," }),
-        /* @__PURE__ */ u$1("li", { children: "1 sequence has a G," }),
-        /* @__PURE__ */ u$1("li", { children: "3 sequences have an N," }),
-        /* @__PURE__ */ u$1("li", { children: "1 sequence has a Y (which means T or C)," })
-      ] }),
-      "then the proportion of the T5C mutation is 50%. The 4 sequences that have an N or Y are excluded from the calculation."
-    ] }),
+    /* @__PURE__ */ u$1(ProportionExplanation, {}),
     /* @__PURE__ */ u$1(InfoComponentCode, { componentName: "mutations", params: originalComponentProps, lapisUrl: lapis })
   ] });
 };
@@ -9472,15 +9491,20 @@ const Tooltip = ({ children, content, position = "bottom" }) => {
 };
 const MAX_NUMBER_OF_GRID_ROWS = 100;
 const MUTATION_CELL_WIDTH_REM = 8;
-const MutationsOverTimeGrid = ({ data, colorScale }) => {
+const MutationsOverTimeGrid = ({
+  data,
+  colorScale,
+  maxNumberOfGridRows
+}) => {
+  const currentMaxNumberOfGridRows = maxNumberOfGridRows ?? MAX_NUMBER_OF_GRID_ROWS;
   const allMutations = data.getFirstAxisKeys();
-  const shownMutations = allMutations.slice(0, MAX_NUMBER_OF_GRID_ROWS);
+  const shownMutations = allMutations.slice(0, currentMaxNumberOfGridRows);
   const dates = data.getSecondAxisKeys();
   const gridRef = A$1(null);
   return /* @__PURE__ */ u$1(Fragment, { children: [
-    allMutations.length > MAX_NUMBER_OF_GRID_ROWS && /* @__PURE__ */ u$1("div", { className: "pl-2", children: [
+    allMutations.length > currentMaxNumberOfGridRows && /* @__PURE__ */ u$1("div", { className: "pl-2", children: [
       "Showing ",
-      MAX_NUMBER_OF_GRID_ROWS,
+      currentMaxNumberOfGridRows,
       " of ",
       allMutations.length,
       " mutations. You can narrow the filter to reduce the number of mutations."
@@ -11135,12 +11159,20 @@ async function queryWastewaterMutationsOverTime(lapis, lapisFilter, signal) {
     "aminoAcidMutationFrequency"
   ]);
   const data = (await fetchData.evaluate(lapis, signal)).content;
-  return data.map((row) => ({
-    location: row.location,
-    date: toTemporalClass(parseDateStringToTemporal(row.date, "day")),
-    nucleotideMutationFrequency: row.nucleotideMutationFrequency !== null ? transformMutations(JSON.parse(row.nucleotideMutationFrequency)) : [],
-    aminoAcidMutationFrequency: row.aminoAcidMutationFrequency !== null ? transformMutations(JSON.parse(row.aminoAcidMutationFrequency)) : []
-  }));
+  return data.map((row) => {
+    try {
+      return {
+        location: row.location,
+        date: toTemporalClass(parseDateStringToTemporal(row.date, "day")),
+        nucleotideMutationFrequency: row.nucleotideMutationFrequency !== null ? transformMutations(JSON.parse(row.nucleotideMutationFrequency)) : [],
+        aminoAcidMutationFrequency: row.aminoAcidMutationFrequency !== null ? transformMutations(JSON.parse(row.aminoAcidMutationFrequency)) : []
+      };
+    } catch (e2) {
+      throw new Error(
+        `Failed to parse row of wastewater data: ${JSON.stringify(row)}: ${(e2 == null ? void 0 : e2.message) ?? "Unknown error"}`
+      );
+    }
+  });
 }
 const mutationFrequencySchema = z$2.record(z$2.number().nullable());
 function transformMutations(input) {
@@ -11148,10 +11180,16 @@ function transformMutations(input) {
   if (!mutationFrequency.success) {
     throw new Error(`Failed to parse mutation frequency: ${mutationFrequency.error.message}`);
   }
-  return Object.entries(mutationFrequency.data).map(([key, value]) => ({
-    mutation: SubstitutionClass.parse(key),
-    proportion: value
-  }));
+  return Object.entries(mutationFrequency.data).map(([key, value]) => {
+    const mutation = SubstitutionClass.parse(key);
+    if (mutation === null) {
+      throw new Error(`Failed to parse mutation: "${key}"`);
+    }
+    return {
+      mutation,
+      proportion: value
+    };
+  });
 }
 async function computeWastewaterMutationsOverTimeDataPerLocation(lapis, lapisFilter, sequenceType, signal) {
   const data = await queryWastewaterMutationsOverTime(lapis, lapisFilter, signal);
@@ -11186,7 +11224,8 @@ const wastewaterMutationOverTimeSchema = z$2.object({
   lapisFilter: lapisFilterSchema,
   sequenceType: sequenceTypeSchema,
   width: z$2.string(),
-  height: z$2.string()
+  height: z$2.string(),
+  maxNumberOfGridRows: z$2.number().optional()
 });
 const WastewaterMutationsOverTime = (componentProps) => {
   const { width, height } = componentProps;
@@ -11220,18 +11259,20 @@ const WastewaterMutationsOverTimeInner = (componentProps) => {
     MutationsOverTimeTabs,
     {
       mutationOverTimeDataPerLocation,
-      originalComponentProps: componentProps
+      originalComponentProps: componentProps,
+      maxNumberOfGridRows: componentProps.maxNumberOfGridRows
     }
   );
 };
 const MutationsOverTimeTabs = ({
   mutationOverTimeDataPerLocation,
-  originalComponentProps
+  originalComponentProps,
+  maxNumberOfGridRows
 }) => {
   const [colorScale, setColorScale] = h({ min: 0, max: 1, color: "indigo" });
   const tabs = mutationOverTimeDataPerLocation.map(({ location, data }) => ({
     title: location,
-    content: /* @__PURE__ */ u$1(MutationsOverTimeGrid, { data, colorScale })
+    content: /* @__PURE__ */ u$1(MutationsOverTimeGrid, { data, colorScale, maxNumberOfGridRows })
   }));
   const toolbar = /* @__PURE__ */ u$1(
     Toolbar,
@@ -11285,6 +11326,7 @@ let WastewaterMutationsOverTimeComponent = class extends PreactLitAdapterWithGri
     this.sequenceType = "nucleotide";
     this.width = "100%";
     this.height = "700px";
+    this.maxNumberOfGridRows = 100;
   }
   render() {
     return /* @__PURE__ */ u$1(
@@ -11293,7 +11335,8 @@ let WastewaterMutationsOverTimeComponent = class extends PreactLitAdapterWithGri
         lapisFilter: this.lapisFilter,
         sequenceType: this.sequenceType,
         width: this.width,
-        height: this.height
+        height: this.height,
+        maxNumberOfGridRows: this.maxNumberOfGridRows
       }
     );
   }
@@ -11310,6 +11353,9 @@ __decorateClass$5([
 __decorateClass$5([
   n$1({ type: String })
 ], WastewaterMutationsOverTimeComponent.prototype, "height", 2);
+__decorateClass$5([
+  n$1({ type: Number })
+], WastewaterMutationsOverTimeComponent.prototype, "maxNumberOfGridRows", 2);
 WastewaterMutationsOverTimeComponent = __decorateClass$5([
   t$3("gs-wastewater-mutations-over-time")
 ], WastewaterMutationsOverTimeComponent);
@@ -11627,26 +11673,46 @@ async function fetchAutocompletionList({
   signal,
   lapisFilter
 }) {
-  const toAncestorInHierarchyOverwriteValues = Array(fields.length - 1).fill(0).map((_2, i2) => i2 + 1).map((i2) => fields.slice(i2).reduce((acc, field) => ({ ...acc, [field]: null }), {}));
+  const helpersThatOverwriteAValueToItsAncestor = fields.map(
+    (_2, i2) => fields.slice(i2 + 1).reduce((acc, field) => ({ ...acc, [field]: null }), {})
+  );
   const fetchAggregatedOperator = new FetchAggregatedOperator(
     lapisFilter ?? {},
     fields
   );
   const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
-  const locationValues = data.map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {})).reduce((setOfAllHierarchies, entry) => {
-    setOfAllHierarchies.add(JSON.stringify(entry));
-    toAncestorInHierarchyOverwriteValues.forEach((overwriteValues) => {
-      setOfAllHierarchies.add(JSON.stringify({ ...entry, ...overwriteValues }));
-    });
-    return setOfAllHierarchies;
-  }, /* @__PURE__ */ new Set());
-  return [...locationValues].map((json) => JSON.parse(json)).sort(compareLocationEntries(fields)).map((entry) => fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] ?? void 0 }), {}));
+  const locationValues = data.map((entry) => ({
+    value: fields.reduce((acc, field) => ({ ...acc, [field]: entry[field] }), {}),
+    count: entry.count
+  })).reduce((mapOfAllHierarchiesAndCounts, entry) => {
+    return addValueAndAllAncestorsToMap(
+      entry,
+      helpersThatOverwriteAValueToItsAncestor,
+      mapOfAllHierarchiesAndCounts
+    );
+  }, /* @__PURE__ */ new Map());
+  return [...locationValues].map(([json, count]) => ({
+    value: JSON.parse(json),
+    count
+  })).sort(compareLocationEntries(fields)).map(({ value, count }) => ({
+    value: fields.reduce((acc, field) => ({ ...acc, [field]: value[field] ?? void 0 }), {}),
+    count
+  }));
+}
+function addValueAndAllAncestorsToMap({ value, count }, helpersThatOverwriteAValueToItsAncestor, mapOfAllHierarchiesAndCounts) {
+  const keysOfAllHierarchyLevels = new Set(
+    helpersThatOverwriteAValueToItsAncestor.map((overwriteValues) => ({ ...value, ...overwriteValues })).map((value2) => JSON.stringify(value2))
+  );
+  for (const key of keysOfAllHierarchyLevels) {
+    mapOfAllHierarchiesAndCounts.set(key, (mapOfAllHierarchiesAndCounts.get(key) ?? 0) + count);
+  }
+  return mapOfAllHierarchiesAndCounts;
 }
 function compareLocationEntries(fields) {
   return (a2, b3) => {
     for (const field of fields) {
-      const valueA = a2[field];
-      const valueB = b3[field];
+      const valueA = a2.value[field];
+      const valueB = b3.value[field];
       if (valueA === valueB) {
         continue;
       }
@@ -14702,12 +14768,12 @@ function DownshiftCombobox({
         children: items.length > 0 ? items.map((item, index) => /* @__PURE__ */ u$1(
           "li",
           {
-            className: `${highlightedIndex === index ? "bg-blue-300" : ""} ${selectedItem !== null && itemToString2(selectedItem) === itemToString2(item) ? "font-bold" : ""} py-2 px-3 shadow-sm flex flex-col`,
+            className: `${highlightedIndex === index ? "bg-blue-300" : ""} ${selectedItem !== null && itemToString2(selectedItem) === itemToString2(item) ? "font-bold" : ""} py-2 px-3 shadow-sm`,
             ...getItemProps({ item, index }),
             children: formatItemInList(item)
           },
           itemToString2(item)
-        )) : /* @__PURE__ */ u$1("li", { className: "py-2 px-3 shadow-sm flex flex-col", children: "No elements to select." })
+        )) : /* @__PURE__ */ u$1("li", { className: "py-2 px-3 shadow-sm", children: "No elements to select." })
       }
     )
   ] });
@@ -14750,8 +14816,8 @@ const LocationSelector = ({
     return locationData.map((location) => toSelectItem(location, fields)).filter((item) => item !== void 0);
   }, [fields, locationData]);
   const selectedItem = T$1(() => {
-    return value !== void 0 ? toSelectItem(value, fields) : void 0;
-  }, [fields, value]);
+    return value !== void 0 ? allItems.find((item) => item.description == concatenateLocation(value, fields)) : void 0;
+  }, [fields, value, allItems]);
   return /* @__PURE__ */ u$1(
     DownshiftCombobox,
     {
@@ -14761,12 +14827,17 @@ const LocationSelector = ({
       createEvent: (item) => new LocationChangedEvent((item == null ? void 0 : item.lapisFilter) ?? emptyLocationFilter(fields)),
       itemToString: (item) => (item == null ? void 0 : item.label) ?? "",
       placeholderText,
-      formatItemInList: (item) => {
-        return /* @__PURE__ */ u$1(Fragment, { children: [
+      formatItemInList: (item) => /* @__PURE__ */ u$1(Fragment, { children: [
+        /* @__PURE__ */ u$1("p", { children: [
           /* @__PURE__ */ u$1("span", { children: item.label }),
-          /* @__PURE__ */ u$1("span", { className: "text-sm text-gray-500", children: item.description })
-        ] });
-      }
+          /* @__PURE__ */ u$1("span", { className: "ml-2 text-gray-500", children: [
+            "(",
+            item.count,
+            ")"
+          ] })
+        ] }),
+        /* @__PURE__ */ u$1("span", { className: "text-sm text-gray-500", children: item.description })
+      ] })
     }
   );
 };
@@ -14777,7 +14848,8 @@ function filterByInputValue$2(item, inputValue) {
   }
   return ((_a = item == null ? void 0 : item.label) == null ? void 0 : _a.toLowerCase().includes(inputValue.toLowerCase())) || (item == null ? void 0 : item.description.toLowerCase().includes(inputValue.toLowerCase()));
 }
-function toSelectItem(locationFilter, fields) {
+function toSelectItem(locationEntry, fields) {
+  const locationFilter = locationEntry.value;
   const concatenatedLocation = concatenateLocation(locationFilter, fields);
   const lastNonUndefinedField = [...fields].reverse().find((field) => locationFilter[field] !== void 0 && locationFilter[field] !== null);
   if (lastNonUndefinedField === void 0) {
@@ -14786,7 +14858,8 @@ function toSelectItem(locationFilter, fields) {
   return {
     lapisFilter: locationFilter,
     label: locationFilter[lastNonUndefinedField],
-    description: concatenatedLocation
+    description: concatenatedLocation,
+    count: locationEntry.count
   };
 }
 function concatenateLocation(locationFilter, fields) {