@genspectrum/dashboard-components 0.13.5 → 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": [

package/dist/components.d.ts

@@ -1434,7 +1434,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1442,7 +1442,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1450,7 +1450,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1458,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>;
         }
     }
 }
@@ -1466,7 +1466,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1474,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>;
         }
     }
 }
@@ -1534,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;
     }
 }
 
@@ -1545,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>;
         }
     }
 }
@@ -1553,10 +1553,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-input': TextInputComponent;
     }
     interface HTMLElementEventMap {
-        'gs-location-changed': LocationChangedEvent;
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -1564,7 +1564,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1572,10 +1572,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -1583,7 +1583,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1591,10 +1591,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-mutation-filter': MutationFilterComponent;
     }
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': LineageFilterChangedEvent;
+        'gs-mutation-filter-changed': CustomEvent<MutationsFilter>;
     }
 }
 
@@ -1602,7 +1602,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-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 })
   ] });
 };
@@ -11140,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) {
@@ -11153,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);
@@ -11640,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;
       }
@@ -14715,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." })
       }
     )
   ] });
@@ -14763,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,
     {
@@ -14774,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 })
+      ] })
     }
   );
 };
@@ -14790,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) {
@@ -14799,7 +14858,8 @@ function toSelectItem(locationFilter, fields) {
   return {
     lapisFilter: locationFilter,
     label: locationFilter[lastNonUndefinedField],
-    description: concatenatedLocation
+    description: concatenatedLocation,
+    count: locationEntry.count
   };
 }
 function concatenateLocation(locationFilter, fields) {