@genspectrum/dashboard-components 1.9.0 → 1.9.2

package/dist/util.d.ts

@@ -1005,7 +1005,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1013,7 +1013,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1021,7 +1021,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1029,7 +1029,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1037,7 +1037,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1045,7 +1045,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1053,7 +1053,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1061,7 +1061,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1069,7 +1069,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1077,7 +1077,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>;
         }
     }
 }
@@ -1101,11 +1101,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1113,7 +1109,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1121,7 +1117,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1129,7 +1129,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "1.9.0",
+    "version": "1.9.2",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/components/mutations-over-time-mutations-filter.stories.tsx

@@ -7,6 +7,7 @@ import {
     MutationsOverTimeMutationsFilter,
     type MutationsOverTimeMutationsFilterProps,
 } from './mutations-over-time-mutations-filter';
+import { type MutationAnnotations } from '../../web-components/mutation-annotations-context';
 import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
 import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationsOverTimeData';
 
@@ -18,30 +19,38 @@ const meta: Meta = {
 
 export default meta;
 
+const manyMutationAnnotations = Array.from({ length: 300 }, (_, i) => ({
+    name: `Annotation ${i + 1}`,
+    description: `This is test annotation number ${i + 1} for testing many annotations.`,
+    symbol: String.fromCharCode(33 + (i % 94)), // Cycle through printable ASCII characters
+    nucleotideMutations: ['A23G'],
+    aminoAcidMutations: [],
+})) satisfies MutationAnnotations;
+
 const WrapperWithState = ({
     setFilterValue,
     value,
+    annotations = [
+        {
+            name: 'Test Annotation 1',
+            description: 'Test Annotation 1',
+            symbol: '#',
+        },
+        {
+            name: 'Test Annotation 2',
+            description: 'Test Annotation 2',
+            symbol: '+',
+        },
+    ],
 }: {
     setFilterValue: Dispatch<StateUpdater<MutationFilter>>;
     value: MutationFilter;
+    annotations?: MutationAnnotations;
 }) => {
     const [state, setState] = useState(value);
 
     return (
-        <MutationAnnotationsContextProvider
-            value={[
-                {
-                    name: 'Test Annotation 1',
-                    description: 'Test Annotation 1',
-                    symbol: '#',
-                },
-                {
-                    name: 'Test Annotation 2',
-                    description: 'Test Annotation 2',
-                    symbol: '+',
-                },
-            ]}
-        >
+        <MutationAnnotationsContextProvider value={annotations}>
             <MutationsOverTimeMutationsFilter
                 setFilterValue={(value) => {
                     setFilterValue(value);
@@ -107,3 +116,53 @@ export const FilterByAnnotation: StoryObj<MutationsOverTimeMutationsFilterProps>
         });
     },
 };
+
+export const WithManyMutationAnnotations: StoryObj<MutationsOverTimeMutationsFilterProps> = {
+    render: (args) => {
+        return (
+            <WrapperWithState
+                setFilterValue={args.setFilterValue}
+                value={args.value}
+                annotations={manyMutationAnnotations}
+            />
+        );
+    },
+    args: {
+        setFilterValue: fn(),
+        value: { textFilter: '', annotationNameFilter: new Set() },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Open filter dropdown', async () => {
+            const filterButton = canvas.getByRole('button', { name: 'Filter mutations' });
+            await userEvent.click(filterButton);
+        });
+
+        await step('Verify scroll container is scrollable', () => {
+            const scrollContainer = canvas
+                .getByText('Filter by annotations')
+                .parentElement!.querySelector('.overflow-scroll')!;
+            void expect(scrollContainer).toBeInTheDocument();
+
+            // Verify the container has scrollable content
+            void expect(scrollContainer.scrollHeight).toBeGreaterThan(scrollContainer.clientHeight);
+        });
+
+        await step('Scroll to bottom and verify we can scroll', async () => {
+            const scrollContainer = canvas
+                .getByText('Filter by annotations')
+                .parentElement!.querySelector('.overflow-scroll')!;
+
+            const initialScrollTop = scrollContainer.scrollTop;
+
+            // Scroll to the bottom
+            scrollContainer.scrollTop = scrollContainer.scrollHeight;
+
+            await waitFor(async () => {
+                // Verify that scrollTop actually changed
+                await expect(scrollContainer.scrollTop).toBeGreaterThan(initialScrollTop);
+            });
+        });
+    },
+};

package/src/preact/components/mutations-over-time-mutations-filter.tsx

@@ -105,34 +105,36 @@ const AnnotationCheckboxes: FunctionComponent<MutationsOverTimeMutationsFilterPr
             <div className='divider mt-0.5 mb-0' />
             <div className='text-sm'>
                 <div className='font-bold mb-1'>Filter by annotations</div>
-                {mutationAnnotations.map((annotation, index) => (
-                    <li className='flex flex-row items-center' key={annotation.name}>
-                        <label>
-                            <input
-                                className={'mr-2'}
-                                type='checkbox'
-                                id={`item-${index}`}
-                                checked={value.annotationNameFilter.has(annotation.name)}
-                                onChange={() => {
-                                    setFilterValue((previousFilter) => {
-                                        const newAnnotationFilter = previousFilter.annotationNameFilter.has(
-                                            annotation.name,
-                                        )
-                                            ? [...previousFilter.annotationNameFilter].filter(
-                                                  (name) => name !== annotation.name,
-                                              )
-                                            : [...previousFilter.annotationNameFilter, annotation.name];
-                                        return {
-                                            ...previousFilter,
-                                            annotationNameFilter: new Set(newAnnotationFilter),
-                                        };
-                                    });
-                                }}
-                            />
-                            {annotation.name} (<span className='text-red-600'>{annotation.symbol}</span>)
-                        </label>
-                    </li>
-                ))}
+                <div className='max-h-72 overflow-scroll'>
+                    {mutationAnnotations.map((annotation, index) => (
+                        <li className='flex flex-row items-center' key={annotation.name}>
+                            <label>
+                                <input
+                                    className={'mr-2'}
+                                    type='checkbox'
+                                    id={`item-${index}`}
+                                    checked={value.annotationNameFilter.has(annotation.name)}
+                                    onChange={() => {
+                                        setFilterValue((previousFilter) => {
+                                            const newAnnotationFilter = previousFilter.annotationNameFilter.has(
+                                                annotation.name,
+                                            )
+                                                ? [...previousFilter.annotationNameFilter].filter(
+                                                      (name) => name !== annotation.name,
+                                                  )
+                                                : [...previousFilter.annotationNameFilter, annotation.name];
+                                            return {
+                                                ...previousFilter,
+                                                annotationNameFilter: new Set(newAnnotationFilter),
+                                            };
+                                        });
+                                    }}
+                                />
+                                {annotation.name} (<span className='text-red-600'>{annotation.symbol}</span>)
+                            </label>
+                        </li>
+                    ))}
+                </div>
             </div>
         </>
     );

package/src/preact/lineageFilter/fetchLineageAutocompleteList.spec.ts

@@ -321,4 +321,76 @@ describe('fetchLineageAutocompleteList', () => {
             },
         ]);
     });
+
+    test('should include prefix aliases that are missing from lineage tree', async () => {
+        lapisRequestMocks.aggregated(
+            { fields: [lineageField], ...lapisFilter },
+            {
+                data: [
+                    {
+                        [lineageField]: 'BA.3.2.1',
+                        count: 1,
+                    },
+                    {
+                        [lineageField]: 'BA.3.2.2',
+                        count: 2,
+                    },
+                ],
+            },
+        );
+
+        lapisRequestMocks.lineageDefinition(
+            {
+                'B.1.1.529.3.2': {
+                    aliases: ['BA.3.2'],
+                },
+                'BA.3.2.1': {
+                    parents: ['B.1.1.529.3.2'],
+                    aliases: ['B.1.1.529.3.2.1'],
+                },
+                'BA.3.2.2': {
+                    parents: ['B.1.1.529.3.2'],
+                    aliases: ['B.1.1.529.3.2.2'],
+                },
+            },
+            lineageField,
+        );
+
+        const result = await fetchLineageAutocompleteList({
+            lapisUrl: DUMMY_LAPIS_URL,
+            lapisField: lineageField,
+            lapisFilter,
+        });
+
+        expect(result).to.deep.equal([
+            {
+                lineage: 'B.1.1.529.3.2',
+                count: 0,
+            },
+            {
+                lineage: 'B.1.1.529.3.2*',
+                count: 3,
+            },
+            {
+                lineage: 'BA.3.2*',
+                count: 3, // Same as B.1.1.529.3.2* (includes .3.2 and .3.2.1)
+            },
+            {
+                lineage: 'BA.3.2.1',
+                count: 1,
+            },
+            {
+                lineage: 'BA.3.2.1*',
+                count: 1,
+            },
+            {
+                lineage: 'BA.3.2.2',
+                count: 2,
+            },
+            {
+                lineage: 'BA.3.2.2*',
+                count: 2,
+            },
+        ]);
+    });
 });

package/src/preact/lineageFilter/fetchLineageAutocompleteList.ts

@@ -2,6 +2,10 @@ import { fetchLineageDefinition } from '../../lapisApi/lapisApi';
 import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
 import type { LapisFilter } from '../../types';
 
+/**
+ * Generates the autocomplete list for lineage search. It includes lineages with wild cards
+ * (i.e. "BA.3.2.1" and "BA.3.2.1*") as well as all prefixes of lineages with an asterisk ("BA.3.2*").
+ */
 export async function fetchLineageAutocompleteList({
     lapisUrl,
     lapisField,
@@ -13,31 +17,43 @@ export async function fetchLineageAutocompleteList({
     lapisFilter?: LapisFilter;
     signal?: AbortSignal;
 }): Promise<LineageItem[]> {
-    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((a, b) => a.localeCompare(b))
-        .map((lineage) => {
-            return [
-                {
-                    lineage,
-                    count: countsByLineage.get(lineage) ?? 0,
-                },
-                {
-                    lineage: `${lineage}*`,
-                    count: getCountsIncludingSublineages(lineage, lineageTree, countsByLineage),
-                },
-            ];
-        })
-        .flat();
+    const prefixToLineage = findMissingPrefixMappings(lineageTree, aliasMapping);
+
+    // Combine actual lineages with their wildcard versions
+    const actualLineageItems = Array.from(lineageTree.keys()).flatMap((lineage) => [
+        {
+            lineage,
+            count: countsByLineage.get(lineage) ?? 0,
+        },
+        {
+            lineage: `${lineage}*`,
+            count: getCountsIncludingSublineages(lineage, lineageTree, countsByLineage),
+        },
+    ]);
+
+    // Add prefix alias items with wildcard and their counts
+    const prefixAliasItems = Array.from(prefixToLineage.entries()).map(([prefix, actualLineage]) => ({
+        lineage: `${prefix}*`,
+        count: getCountsIncludingSublineages(actualLineage, lineageTree, countsByLineage),
+    }));
+
+    // Combine and sort all items (asterisk before period for same prefix)
+    return [...actualLineageItems, ...prefixAliasItems].sort((a, b) => {
+        // Replace * with a character that sorts before . in ASCII
+        const aKey = a.lineage.replace(/\*/g, ' ');
+        const bKey = b.lineage.replace(/\*/g, ' ');
+        return aKey.localeCompare(bKey);
+    });
 }
 
 export type LineageItem = { lineage: string; count: number };
@@ -61,7 +77,7 @@ async function getCountsByLineage({
     return new Map<string, number>(countsByLineageArray.map((value) => [value[lapisField], value.count]));
 }
 
-async function getLineageTree({
+async function getLineageTreeAndAliases({
     lapisUrl,
     lapisField,
     signal,
@@ -73,12 +89,17 @@ async function getLineageTree({
     const lineageDefinitions = await fetchLineageDefinition({ lapisUrl, lapisField, signal });
 
     const lineageTree = new Map<string, { children: string[] }>();
+    const aliasMapping = new Map<string, string[]>();
 
     Object.entries(lineageDefinitions).forEach(([lineage, definition]) => {
         if (!lineageTree.has(lineage)) {
             lineageTree.set(lineage, { children: [] });
         }
 
+        if (definition.aliases && definition.aliases.length > 0) {
+            aliasMapping.set(lineage, definition.aliases);
+        }
+
         definition.parents?.forEach((parent) => {
             const parentChildren = lineageTree.get(parent)?.children;
 
@@ -88,7 +109,7 @@ async function getLineageTree({
         });
     });
 
-    return lineageTree;
+    return { lineageTree, aliasMapping };
 }
 
 function getCountsIncludingSublineages(
@@ -115,3 +136,44 @@ function getAllDescendants(lineage: string, lineageTree: Map<string, { children:
 
     return new Set([...children, ...childrenOfChildren.flatMap((child) => Array.from(child))]);
 }
+
+/**
+ * This function finds prefixes (i.e. "BA.3.2" for "BA.3.2.1") that are not in the lineageTree,
+ * but do appear as an alias. It returns a reverse mapping for those prefixes, back to a lineage
+ * that can be found in the lineageTree (i.e. "BA.3.2" -> "B.1.1.529.3.2").
+ */
+function findMissingPrefixMappings(
+    lineageTree: Map<string, { children: string[] }>,
+    aliasMapping: Map<string, string[]>,
+): Map<string, string> {
+    const lineages = Array.from(lineageTree.keys());
+    const lineagesSet = new Set(lineages);
+
+    // Generate all prefixes for each lineage (e.g., "A.B.1" -> ["A", "A.B", "A.B.1"])
+    const allPrefixes = lineages.flatMap((lineage) => {
+        const parts = lineage.split('.');
+        return parts.map((_, i) => parts.slice(0, i + 1).join('.'));
+    });
+
+    // Find prefixes that are NOT in the actual lineages list
+    const missingPrefixes = new Set(allPrefixes.filter((prefix) => !lineagesSet.has(prefix)));
+
+    // Create reverse alias mapping: alias -> original lineage
+    const reverseAliasMapping = new Map<string, string>();
+    aliasMapping.forEach((aliases, lineage) => {
+        aliases.forEach((alias) => {
+            reverseAliasMapping.set(alias, lineage);
+        });
+    });
+
+    // Map missing prefixes to their actual lineage names via reverse alias lookup
+    const prefixToLineage = new Map<string, string>();
+    missingPrefixes.forEach((prefix) => {
+        const actualLineage = reverseAliasMapping.get(prefix);
+        if (actualLineage) {
+            prefixToLineage.set(prefix, actualLineage);
+        }
+    });
+
+    return prefixToLineage;
+}