@genspectrum/dashboard-components 1.8.2 → 1.9.1

package/custom-elements.json

@@ -638,7 +638,7 @@
           "type": {
             "text": "StoryObj<Required<LineageFilterProps>>"
           },
-          "default": "{ ...LineageFilter, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a lineage'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener(gsEventNames.lineageFilterChanged, listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid lineage value', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); await userEvent.click(canvas.getByLabelText('toggle menu')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ pangoLineage: undefined, }); }); }); await step('Enter a valid lineage value', async () => { await userEvent.type(inputField(), 'B.1.1.7*'); await userEvent.click(canvas.getByRole('option', { name: 'B.1.1.7*(677146)' })); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ pangoLineage: 'B.1.1.7*', }); }); }); }, args: { ...LineageFilter.args, value: '', }, }"
+          "default": "{ ...LineageFilter, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a lineage'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener(gsEventNames.lineageFilterChanged, listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid lineage value', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); await userEvent.click(canvas.getByLabelText('toggle menu')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ pangoLineage: undefined, }); }); }); await step('Enter a valid lineage value', async () => { await userEvent.type(inputField(), 'B.1.1.7*'); await userEvent.click(canvas.getByRole('option', { name: 'B.1.1.7*(677,146)' })); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ pangoLineage: 'B.1.1.7*', }); }); }); }, args: { ...LineageFilter.args, value: '', }, }"
         }
       ],
       "exports": [
@@ -1530,7 +1530,7 @@
           "type": {
             "text": "StoryObj<Required<TextFilterProps>>"
           },
-          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-filter'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener(gsEventNames.textFilterChanged, listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid host name', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo s'); const dropdownOption = await canvas.findByText('Homo sapiens'); await userEvent.click(dropdownOption); }); await step('Verify event is fired with correct detail', async () => { await waitFor(async () => { await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo sapiens', }, }), ); }); }); await step('Remove initial value', async () => { await userEvent.click(canvas.getByRole('button', { name: 'clear selection' })); await expect(listenerMock).toHaveBeenLastCalledWith( expect.objectContaining({ detail: { host: undefined, }, }), ); }); }, args: { ...Default.args, value: '', }, }"
+          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-filter'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener(gsEventNames.textFilterChanged, listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid host name', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo s'); const dropdownOption = await canvas.findByText('Homo sapiens'); await userEvent.click(dropdownOption); }); await step('Verify event is fired with correct detail', async () => { await waitFor(async () => { await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo sapiens', }, }), ); }); }); await step('Remove initial value', async () => { await userEvent.click(canvas.getByRole('button', { name: 'clear selection' })); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: undefined, }, }), ); }); }, args: { ...Default.args, value: '', }, }"
         }
       ],
       "exports": [

package/dist/components.d.ts

@@ -1651,6 +1651,22 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-genome-data-viewer': GenomeDataViewerComponent;
@@ -1749,7 +1765,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1757,7 +1773,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1765,7 +1781,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1773,7 +1789,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>;
         }
     }
 }
@@ -1813,7 +1829,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1821,7 +1840,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1847,25 +1866,6 @@ declare global {
 }
 
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
 declare global {
     interface HTMLElementTagNameMap {
         'gs-text-filter': TextFilterComponent;

package/dist/components.js

@@ -1585,6 +1585,20 @@ const MinMaxRangeSlider = ({
 function getGradientBoundary(x2, lowerBound, upperBound) {
   return (x2 - lowerBound) / (upperBound - lowerBound) * 100;
 }
+const TOOLTIP_BASE_STYLES = "z-10 w-max bg-white p-4 border border-gray-200 rounded-md";
+const Tooltip = ({ children, content, position = "bottom", tooltipStyle }) => {
+  return /* @__PURE__ */ u$1("div", { className: `relative group`, children: [
+    /* @__PURE__ */ u$1("div", { children }),
+    /* @__PURE__ */ u$1(
+      "div",
+      {
+        className: `absolute ${TOOLTIP_BASE_STYLES} invisible group-hover:visible ${getPositionCss(position)}`,
+        style: tooltipStyle,
+        children: content
+      }
+    )
+  ] });
+};
 function getPositionCss(position) {
   switch (position) {
     case "top":
@@ -1607,19 +1621,6 @@ function getPositionCss(position) {
       return "";
   }
 }
-const Tooltip = ({ children, content, position = "bottom", tooltipStyle }) => {
-  return /* @__PURE__ */ u$1("div", { className: `relative group`, children: [
-    /* @__PURE__ */ u$1("div", { children }),
-    /* @__PURE__ */ u$1(
-      "div",
-      {
-        className: `absolute z-10 w-max bg-white p-4 border border-gray-200 rounded-md invisible group-hover:visible ${getPositionCss(position)}`,
-        style: tooltipStyle,
-        children: content
-      }
-    )
-  ] });
-};
 const ColorsRGB = {
   indigo: [51, 34, 136],
   green: [17, 119, 51],
@@ -7422,7 +7423,7 @@ const MutationsOverTimeGridTooltip = ({
   value
 }) => {
   const dateClass = toTemporalClass(date);
-  return /* @__PURE__ */ u$1("div", { children: [
+  return /* @__PURE__ */ u$1("div", { className: "text-center", children: [
     /* @__PURE__ */ u$1("p", { children: /* @__PURE__ */ u$1("span", { className: "font-bold", children: dateClass.englishName() }) }),
     /* @__PURE__ */ u$1("p", { children: [
       "(",
@@ -7549,6 +7550,79 @@ const getTextColorForScale = (value, colorScale) => {
   const alpha = (value - colorScale.min) / colorRange;
   return alpha <= 0.5 ? "black" : "white";
 };
+const PortalTooltip = ({
+  children,
+  content,
+  position = "bottom",
+  tooltipStyle,
+  portalTarget
+}) => {
+  const [isHovered, setIsHovered] = d(false);
+  const [tooltipPosition, setTooltipPosition] = d({ top: 0, left: 0 });
+  const triggerRef = A$1(null);
+  const tooltipRef = A$1(null);
+  _(() => {
+    if (isHovered && triggerRef.current !== null && tooltipRef.current !== null) {
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      const newPosition = calculateTooltipPosition(triggerRect, tooltipRect, position);
+      setTooltipPosition(newPosition);
+    }
+  }, [isHovered, position]);
+  const tooltipContent = /* @__PURE__ */ u$1(
+    "div",
+    {
+      ref: tooltipRef,
+      className: `fixed ${TOOLTIP_BASE_STYLES} ${isHovered ? "visible" : "invisible"}`,
+      style: Object.assign({}, tooltipStyle, { top: tooltipPosition.top, left: tooltipPosition.left }),
+      children: content
+    }
+  );
+  return /* @__PURE__ */ u$1(Fragment, { children: [
+    /* @__PURE__ */ u$1("div", { ref: triggerRef, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children }),
+    portalTarget !== null && $(tooltipContent, portalTarget)
+  ] });
+};
+function calculateTooltipPosition(triggerRect, tooltipRect, position) {
+  const gap = 4;
+  let top;
+  let left;
+  switch (position) {
+    case "top":
+      top = triggerRect.top - tooltipRect.height - gap;
+      left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+      break;
+    case "top-start":
+      top = triggerRect.top - tooltipRect.height - gap;
+      left = triggerRect.left;
+      break;
+    case "top-end":
+      top = triggerRect.top - tooltipRect.height - gap;
+      left = triggerRect.right - tooltipRect.width;
+      break;
+    case "bottom":
+      top = triggerRect.bottom + gap;
+      left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+      break;
+    case "bottom-start":
+      top = triggerRect.bottom + gap;
+      left = triggerRect.left;
+      break;
+    case "bottom-end":
+      top = triggerRect.bottom + gap;
+      left = triggerRect.right - tooltipRect.width;
+      break;
+    case "left":
+      top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+      left = triggerRect.left - tooltipRect.width - gap;
+      break;
+    case "right":
+      top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+      left = triggerRect.right + gap;
+      break;
+  }
+  return { top, left };
+}
 const pageSizeContext = createContext$1({
   pageSize: -1,
   setPageSize: () => {
@@ -7731,7 +7805,8 @@ const MutationsOverTimeGrid = ({
   data,
   colorScale,
   sequenceType,
-  pageSizes
+  pageSizes,
+  tooltipPortalTarget
 }) => {
   const tableData = T$1(() => {
     const allMutations = data.getFirstAxisKeys();
@@ -7772,14 +7847,15 @@ const MutationsOverTimeGrid = ({
                 columnIndex,
                 numberOfColumns
               ),
-              colorScale
+              colorScale,
+              tooltipPortalTarget
             }
           ) });
         }
       });
     });
     return [mutationHeader, ...dateHeaders];
-  }, [colorScale, data, sequenceType]);
+  }, [colorScale, data, sequenceType, tooltipPortalTarget]);
   const { pageSize } = usePageSizeContext();
   const table = usePreactTable({
     data: tableData,
@@ -7818,13 +7894,14 @@ function getTooltipPosition(rowIndex, rows, columnIndex, columns) {
   const tooltipY = columnIndex < columns / 2 ? "start" : "end";
   return `${tooltipX}-${tooltipY}`;
 }
-const ProportionCell = ({ value, mutation, date, tooltipPosition, colorScale }) => {
+const ProportionCell = ({ value, mutation, date, tooltipPosition, colorScale, tooltipPortalTarget }) => {
   const proportion = (value == null ? void 0 : value.type) === "belowThreshold" ? void 0 : value == null ? void 0 : value.proportion;
   return /* @__PURE__ */ u$1("div", { className: "py-1 w-full h-full", children: /* @__PURE__ */ u$1(
-    Tooltip,
+    PortalTooltip,
     {
       content: /* @__PURE__ */ u$1(MutationsOverTimeGridTooltip, { mutation, date, value }),
       position: tooltipPosition,
+      portalTarget: tooltipPortalTarget,
       children: /* @__PURE__ */ u$1(
         "div",
         {
@@ -8053,6 +8130,11 @@ const MutationsOverTimeTabs$1 = ({
   overallMutationData
 }) => {
   const tabsRef = useDispatchFinishedLoadingEvent();
+  const tooltipPortalTargetRef = A$1(null);
+  const [tooltipPortalTarget, setTooltipPortalTarget] = d(null);
+  _(() => {
+    setTooltipPortalTarget(tooltipPortalTargetRef.current);
+  }, []);
   const [mutationFilterValue, setMutationFilterValue] = d({
     textFilter: "",
     annotationNameFilter: /* @__PURE__ */ new Set()
@@ -8102,7 +8184,8 @@ const MutationsOverTimeTabs$1 = ({
               data: filteredData,
               colorScale,
               sequenceType: originalComponentProps.sequenceType,
-              pageSizes: originalComponentProps.pageSizes
+              pageSizes: originalComponentProps.pageSizes,
+              tooltipPortalTarget
             }
           )
         };
@@ -8129,7 +8212,7 @@ const MutationsOverTimeTabs$1 = ({
       mutationFilterValue
     }
   );
-  return /* @__PURE__ */ u$1(PageSizeContextProvider, { pageSizes: originalComponentProps.pageSizes, children: /* @__PURE__ */ u$1(Tabs, { ref: tabsRef, tabs, toolbar }) });
+  return /* @__PURE__ */ u$1("div", { ref: tooltipPortalTargetRef, children: /* @__PURE__ */ u$1(PageSizeContextProvider, { pageSizes: originalComponentProps.pageSizes, children: /* @__PURE__ */ u$1(Tabs, { ref: tabsRef, tabs, toolbar }) }) });
 };
 const Toolbar$2 = ({
   activeTab,
@@ -9718,6 +9801,7 @@ const MutationsOverTimeTabs = ({
   originalComponentProps
 }) => {
   const tabsRef = useDispatchFinishedLoadingEvent();
+  const tooltipPortalTargetRef = A$1(null);
   const [mutationFilterValue, setMutationFilterValue] = d({
     textFilter: "",
     annotationNameFilter: /* @__PURE__ */ new Set()
@@ -9740,7 +9824,8 @@ const MutationsOverTimeTabs = ({
           }),
           colorScale,
           pageSizes: originalComponentProps.pageSizes,
-          sequenceType: originalComponentProps.sequenceType
+          sequenceType: originalComponentProps.sequenceType,
+          tooltipPortalTarget: tooltipPortalTargetRef.current
         }
       )
     })),
@@ -9767,7 +9852,7 @@ const MutationsOverTimeTabs = ({
       mutationFilterValue
     }
   );
-  return /* @__PURE__ */ u$1(PageSizeContextProvider, { pageSizes: originalComponentProps.pageSizes, children: /* @__PURE__ */ u$1(Tabs, { ref: tabsRef, tabs, toolbar }) });
+  return /* @__PURE__ */ u$1("div", { ref: tooltipPortalTargetRef, children: /* @__PURE__ */ u$1(PageSizeContextProvider, { pageSizes: originalComponentProps.pageSizes, children: /* @__PURE__ */ u$1(Tabs, { ref: tabsRef, tabs, toolbar }) }) });
 };
 const Toolbar = ({
   colorScale,
@@ -14106,7 +14191,8 @@ function DownshiftCombobox({
     highlightedIndex,
     getItemProps,
     inputValue,
-    closeMenu
+    closeMenu,
+    reset
   } = useCombobox({
     onInputValueChange({ inputValue: inputValue2 }) {
       setInputIsInvalid(false);
@@ -14136,7 +14222,7 @@ function DownshiftCombobox({
     setInputIsInvalid(true);
   };
   const clearInput = () => {
-    selectItem(null);
+    reset();
   };
   const buttonRef = A$1(null);
   return /* @__PURE__ */ u$1("div", { ref: divRef, className: "relative w-full", children: [
@@ -14273,7 +14359,7 @@ const LocationSelector = ({
           /* @__PURE__ */ u$1("span", { children: item.label }),
           !hideCounts && /* @__PURE__ */ u$1("span", { className: "ml-2 text-gray-500", children: [
             "(",
-            item.count,
+            item.count.toLocaleString("en-US"),
             ")"
           ] })
         ] }),
@@ -14445,7 +14531,7 @@ const TextSelector = ({
           /* @__PURE__ */ u$1("span", { children: item.value }),
           !hideCounts && /* @__PURE__ */ u$1("span", { className: "ml-2 text-gray-500", children: [
             "(",
-            item.count,
+            item.count.toLocaleString("en-US"),
             ")"
           ] })
         ] });
@@ -15310,27 +15396,35 @@ async function fetchLineageAutocompleteList({
   lapisFilter,
   signal
 }) {
-  const [countsByLineage, lineageTree] = await Promise.all([
+  const [countsByLineage, { lineageTree, aliasMapping }] = await Promise.all([
     getCountsByLineage({
       lapisUrl,
       lapisField,
       lapisFilter,
       signal
     }),
-    getLineageTree({ lapisUrl, lapisField, signal })
+    getLineageTreeAndAliases({ lapisUrl, lapisField, signal })
   ]);
-  return Array.from(lineageTree.keys()).sort((a2, b2) => a2.localeCompare(b2)).map((lineage2) => {
-    return [
-      {
-        lineage: lineage2,
-        count: countsByLineage.get(lineage2) ?? 0
-      },
-      {
-        lineage: `${lineage2}*`,
-        count: getCountsIncludingSublineages(lineage2, lineageTree, countsByLineage)
-      }
-    ];
-  }).flat();
+  const prefixToLineage = findMissingPrefixMappings(lineageTree, aliasMapping);
+  const actualLineageItems = Array.from(lineageTree.keys()).flatMap((lineage2) => [
+    {
+      lineage: lineage2,
+      count: countsByLineage.get(lineage2) ?? 0
+    },
+    {
+      lineage: `${lineage2}*`,
+      count: getCountsIncludingSublineages(lineage2, lineageTree, countsByLineage)
+    }
+  ]);
+  const prefixAliasItems = Array.from(prefixToLineage.entries()).map(([prefix, actualLineage]) => ({
+    lineage: `${prefix}*`,
+    count: getCountsIncludingSublineages(actualLineage, lineageTree, countsByLineage)
+  }));
+  return [...actualLineageItems, ...prefixAliasItems].sort((a2, b2) => {
+    const aKey = a2.lineage.replace(/\*/g, " ");
+    const bKey = b2.lineage.replace(/\*/g, " ");
+    return aKey.localeCompare(bKey);
+  });
 }
 async function getCountsByLineage({
   lapisUrl,
@@ -15344,18 +15438,22 @@ async function getCountsByLineage({
   const countsByLineageArray = (await fetchAggregatedOperator.evaluate(lapisUrl, signal)).content;
   return new Map(countsByLineageArray.map((value) => [value[lapisField], value.count]));
 }
-async function getLineageTree({
+async function getLineageTreeAndAliases({
   lapisUrl,
   lapisField,
   signal
 }) {
   const lineageDefinitions = await fetchLineageDefinition({ lapisUrl, lapisField, signal });
   const lineageTree = /* @__PURE__ */ new Map();
+  const aliasMapping = /* @__PURE__ */ new Map();
   Object.entries(lineageDefinitions).forEach(([lineage2, definition]) => {
     var _a;
     if (!lineageTree.has(lineage2)) {
       lineageTree.set(lineage2, { children: [] });
     }
+    if (definition.aliases && definition.aliases.length > 0) {
+      aliasMapping.set(lineage2, definition.aliases);
+    }
     (_a = definition.parents) == null ? void 0 : _a.forEach((parent) => {
       var _a2;
       const parentChildren = (_a2 = lineageTree.get(parent)) == null ? void 0 : _a2.children;
@@ -15363,7 +15461,7 @@ async function getLineageTree({
       lineageTree.set(parent, { children: newParentChildren });
     });
   });
-  return lineageTree;
+  return { lineageTree, aliasMapping };
 }
 function getCountsIncludingSublineages(lineage2, lineageTree, countsByLineage) {
   const descendants = getAllDescendants(lineage2, lineageTree);
@@ -15381,6 +15479,29 @@ function getAllDescendants(lineage2, lineageTree) {
   });
   return /* @__PURE__ */ new Set([...children, ...childrenOfChildren.flatMap((child) => Array.from(child))]);
 }
+function findMissingPrefixMappings(lineageTree, aliasMapping) {
+  const lineages = Array.from(lineageTree.keys());
+  const lineagesSet = new Set(lineages);
+  const allPrefixes = lineages.flatMap((lineage2) => {
+    const parts = lineage2.split(".");
+    return parts.map((_2, i2) => parts.slice(0, i2 + 1).join("."));
+  });
+  const missingPrefixes = new Set(allPrefixes.filter((prefix) => !lineagesSet.has(prefix)));
+  const reverseAliasMapping = /* @__PURE__ */ new Map();
+  aliasMapping.forEach((aliases, lineage2) => {
+    aliases.forEach((alias) => {
+      reverseAliasMapping.set(alias, lineage2);
+    });
+  });
+  const prefixToLineage = /* @__PURE__ */ new Map();
+  missingPrefixes.forEach((prefix) => {
+    const actualLineage = reverseAliasMapping.get(prefix);
+    if (actualLineage) {
+      prefixToLineage.set(prefix, actualLineage);
+    }
+  });
+  return prefixToLineage;
+}
 const lineageSelectorPropsSchema = z$2.object({
   lapisField: z$2.string().min(1),
   placeholderText: z$2.string().optional(),
@@ -15450,7 +15571,7 @@ const LineageSelector = ({
         /* @__PURE__ */ u$1("span", { children: item.lineage }),
         !hideCounts && /* @__PURE__ */ u$1("span", { className: "ml-2 text-gray-500", children: [
           "(",
-          item.count,
+          item.count.toLocaleString("en-US"),
           ")"
         ] })
       ] })