@genspectrum/dashboard-components 0.19.7 → 0.19.9

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

@@ -4,25 +4,283 @@ import { fetchLineageAutocompleteList } from './fetchLineageAutocompleteList';
 import { DUMMY_LAPIS_URL, lapisRequestMocks } from '../../../vitest.setup';
 
 describe('fetchLineageAutocompleteList', () => {
+    const lapisFilter = { country: 'Germany' };
+    const lineageField = 'lineageField';
+
+    test('should return single lineage', async () => {
+        lapisRequestMocks.aggregated(
+            { fields: [lineageField], ...lapisFilter },
+            {
+                data: [
+                    {
+                        [lineageField]: 'A',
+                        count: 1,
+                    },
+                ],
+            },
+        );
+
+        lapisRequestMocks.lineageDefinition(
+            {
+                A: {
+                    aliases: ['a'],
+                },
+            },
+            lineageField,
+        );
+
+        const result = await fetchLineageAutocompleteList({
+            lapisUrl: DUMMY_LAPIS_URL,
+            lapisField: lineageField,
+            lapisFilter,
+        });
+
+        expect(result).to.deep.equal([
+            {
+                lineage: 'A',
+                count: 1,
+            },
+            {
+                lineage: 'A*',
+                count: 1,
+            },
+        ]);
+    });
+
     test('should add sublineage values', async () => {
         lapisRequestMocks.aggregated(
-            { fields: ['lineageField'], country: 'Germany' },
+            { fields: [lineageField], ...lapisFilter },
             {
                 data: [
                     {
-                        lineageField: 'B.1.1.7',
+                        [lineageField]: 'A',
                         count: 1,
                     },
+                    {
+                        [lineageField]: 'A.1',
+                        count: 2,
+                    },
+                    {
+                        [lineageField]: 'A.2',
+                        count: 3,
+                    },
                 ],
             },
         );
 
+        lapisRequestMocks.lineageDefinition(
+            {
+                A: {
+                    aliases: ['a'],
+                },
+                'A.1': {
+                    parents: ['A'],
+                    aliases: ['a.1'],
+                },
+                'A.2': {
+                    parents: ['A'],
+                    aliases: ['a.1'],
+                },
+            },
+            lineageField,
+        );
+
         const result = await fetchLineageAutocompleteList({
-            lapis: DUMMY_LAPIS_URL,
-            field: 'lineageField',
-            lapisFilter: { country: 'Germany' },
+            lapisUrl: DUMMY_LAPIS_URL,
+            lapisField: lineageField,
+            lapisFilter,
         });
 
-        expect(result).to.deep.equal(['B.1.1.7', 'B.1.1.7*']);
+        expect(result).to.deep.equal([
+            {
+                lineage: 'A',
+                count: 1,
+            },
+            {
+                lineage: 'A*',
+                count: 6,
+            },
+
+            {
+                lineage: 'A.1',
+                count: 2,
+            },
+            {
+                lineage: 'A.1*',
+                count: 2,
+            },
+
+            {
+                lineage: 'A.2',
+                count: 3,
+            },
+            {
+                lineage: 'A.2*',
+                count: 3,
+            },
+        ]);
+    });
+
+    test('should work with recombinations', async () => {
+        lapisRequestMocks.aggregated(
+            { fields: [lineageField], ...lapisFilter },
+            {
+                data: [
+                    {
+                        [lineageField]: 'A',
+                        count: 1,
+                    },
+                    {
+                        [lineageField]: 'A.1',
+                        count: 2,
+                    },
+                    {
+                        [lineageField]: 'A.2',
+                        count: 3,
+                    },
+                    {
+                        [lineageField]: 'XA',
+                        count: 4,
+                    },
+                ],
+            },
+        );
+
+        lapisRequestMocks.lineageDefinition(
+            {
+                A: {
+                    aliases: ['a'],
+                },
+                'A.1': {
+                    parents: ['A'],
+                    aliases: ['a.1'],
+                },
+                'A.2': {
+                    parents: ['A'],
+                    aliases: ['a.1'],
+                },
+                XA: {
+                    aliases: ['xa'],
+                    parents: ['A.1', 'A.2'],
+                },
+            },
+            lineageField,
+        );
+
+        const result = await fetchLineageAutocompleteList({
+            lapisUrl: DUMMY_LAPIS_URL,
+            lapisField: lineageField,
+            lapisFilter,
+        });
+
+        expect(result).to.deep.equal([
+            {
+                lineage: 'A',
+                count: 1,
+            },
+            {
+                lineage: 'A*',
+                count: 10,
+            },
+
+            {
+                lineage: 'A.1',
+                count: 2,
+            },
+            {
+                lineage: 'A.1*',
+                count: 6,
+            },
+            {
+                lineage: 'A.2',
+                count: 3,
+            },
+            {
+                lineage: 'A.2*',
+                count: 7,
+            },
+            {
+                lineage: 'XA',
+                count: 4,
+            },
+            {
+                lineage: 'XA*',
+                count: 4,
+            },
+        ]);
+    });
+
+    test('should work with grandchildren', async () => {
+        lapisRequestMocks.aggregated(
+            { fields: [lineageField], ...lapisFilter },
+            {
+                data: [
+                    {
+                        [lineageField]: 'A',
+                        count: 1,
+                    },
+                    {
+                        [lineageField]: 'A.1',
+                        count: 2,
+                    },
+                    {
+                        [lineageField]: 'A.1.1',
+                        count: 3,
+                    },
+                ],
+            },
+        );
+
+        lapisRequestMocks.lineageDefinition(
+            {
+                'A.1': {
+                    parents: ['A'],
+                    aliases: ['a.1'],
+                },
+                A: {
+                    aliases: ['a'],
+                },
+                'A.1.1': {
+                    parents: ['A.1'],
+                    aliases: ['a.1.1'],
+                },
+            },
+            lineageField,
+        );
+
+        const result = await fetchLineageAutocompleteList({
+            lapisUrl: DUMMY_LAPIS_URL,
+            lapisField: lineageField,
+            lapisFilter,
+        });
+
+        expect(result).to.deep.equal([
+            {
+                lineage: 'A',
+                count: 1,
+            },
+            {
+                lineage: 'A*',
+                count: 6,
+            },
+
+            {
+                lineage: 'A.1',
+                count: 2,
+            },
+            {
+                lineage: 'A.1*',
+                count: 5,
+            },
+
+            {
+                lineage: 'A.1.1',
+                count: 3,
+            },
+            {
+                lineage: 'A.1.1*',
+                count: 3,
+            },
+        ]);
     });
 });

package/src/preact/lineageFilter/fetchLineageAutocompleteList.ts

@@ -1,20 +1,117 @@
+import { fetchLineageDefinition } from '../../lapisApi/lapisApi';
 import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
 import type { LapisFilter } from '../../types';
 
 export async function fetchLineageAutocompleteList({
-    lapis,
-    field,
+    lapisUrl,
+    lapisField,
+    lapisFilter,
     signal,
+}: {
+    lapisUrl: string;
+    lapisField: string;
+    lapisFilter?: LapisFilter;
+    signal?: AbortSignal;
+}): Promise<LineageItem[]> {
+    const [countsByLineage, lineageTree] = await Promise.all([
+        getCountsByLineage({
+            lapisUrl,
+            lapisField,
+            lapisFilter,
+            signal,
+        }),
+        getLineageTree({ 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();
+}
+
+export type LineageItem = { lineage: string; count: number };
+
+async function getCountsByLineage({
+    lapisUrl,
+    lapisField,
     lapisFilter,
+    signal,
 }: {
-    lapis: string;
-    field: string;
+    lapisUrl: string;
+    lapisField: string;
     lapisFilter?: LapisFilter;
     signal?: AbortSignal;
 }) {
-    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string>>(lapisFilter ?? {}, [field]);
+    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string>>(lapisFilter ?? {}, [
+        lapisField,
+    ]);
+
+    const countsByLineageArray = (await fetchAggregatedOperator.evaluate(lapisUrl, signal)).content;
+    return new Map<string, number>(countsByLineageArray.map((value) => [value[lapisField], value.count]));
+}
+
+async function getLineageTree({
+    lapisUrl,
+    lapisField,
+    signal,
+}: {
+    lapisUrl: string;
+    lapisField: string;
+    signal?: AbortSignal;
+}) {
+    const lineageDefinitions = await fetchLineageDefinition({ lapisUrl, lapisField, signal });
+
+    const lineageTree = new Map<string, { children: string[] }>();
+
+    Object.entries(lineageDefinitions).forEach(([lineage, definition]) => {
+        if (!lineageTree.has(lineage)) {
+            lineageTree.set(lineage, { children: [] });
+        }
+
+        definition.parents?.forEach((parent) => {
+            const parentChildren = lineageTree.get(parent)?.children;
+
+            const newParentChildren = parentChildren ? [...parentChildren, lineage] : [lineage];
+
+            lineageTree.set(parent, { children: newParentChildren });
+        });
+    });
+
+    return lineageTree;
+}
+
+function getCountsIncludingSublineages(
+    lineage: string,
+    lineageTree: Map<string, { children: string[] }>,
+    countsByLineage: Map<string, number>,
+): number {
+    const descendants = getAllDescendants(lineage, lineageTree);
+
+    const countOfChildren = [...descendants].reduce((sum, child) => {
+        return sum + (countsByLineage.get(child) ?? 0);
+    }, 0);
+    const countLineage = countsByLineage.get(lineage) ?? 0;
+
+    return countOfChildren + countLineage;
+}
+
+function getAllDescendants(lineage: string, lineageTree: Map<string, { children: string[] }>): Set<string> {
+    const children = lineageTree.get(lineage)?.children ?? [];
 
-    const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
+    const childrenOfChildren = children.flatMap((child) => {
+        return getAllDescendants(child, lineageTree);
+    });
 
-    return data.flatMap((item) => [item[field], `${item[field]}*`]).sort();
+    return new Set([...children, ...childrenOfChildren.flatMap((child) => Array.from(child))]);
 }

package/src/preact/lineageFilter/lineage-filter.stories.tsx

@@ -5,6 +5,8 @@ import type { StepFunction } from '@storybook/types';
 import { LineageFilter, type LineageFilterProps } from './lineage-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import lineageDefinition from './__mockData__/lineageDefinition.json';
+import { lineageDefinitionEndpoint } from '../../lapisApi/lapisApi';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
 import { gsEventNames } from '../../utils/gsEventNames';
 import { LapisUrlContextProvider } from '../LapisUrlContext';
@@ -33,6 +35,16 @@ const meta: Meta = {
                         body: aggregatedData,
                     },
                 },
+                {
+                    matcher: {
+                        name: 'lineageDefinition',
+                        url: lineageDefinitionEndpoint(LAPIS_URL, 'pangoLineage'),
+                    },
+                    response: {
+                        status: 200,
+                        body: lineageDefinition,
+                    },
+                },
             ],
         },
     },
@@ -90,7 +102,7 @@ export const Default: StoryObj<LineageFilterProps> = {
             const input = await inputField(canvas);
             await userEvent.clear(input);
             await userEvent.type(input, 'B.1');
-            await userEvent.click(canvas.getByRole('option', { name: 'B.1' }));
+            await userEvent.click(canvas.getByRole('option', { name: 'B.1(53802)' }));
 
             await waitFor(() => {
                 return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({

package/src/preact/lineageFilter/lineage-filter.tsx

@@ -1,9 +1,10 @@
 import { type FunctionComponent } from 'preact';
+import { useMemo } from 'preact/hooks';
 import z from 'zod';
 
 import { useLapisUrl } from '../LapisUrlContext';
 import { LineageFilterChangedEvent } from './LineageFilterChangedEvent';
-import { fetchLineageAutocompleteList } from './fetchLineageAutocompleteList';
+import { fetchLineageAutocompleteList, type LineageItem } from './fetchLineageAutocompleteList';
 import { lapisFilterSchema } from '../../types';
 import { DownshiftCombobox } from '../components/downshift-combobox';
 import { ErrorBoundary } from '../components/error-boundary';
@@ -46,11 +47,11 @@ const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({
     value,
     lapisFilter,
 }) => {
-    const lapis = useLapisUrl();
+    const lapisUrl = useLapisUrl();
 
     const { data, error, isLoading } = useQuery(
-        () => fetchLineageAutocompleteList({ lapis, field: lapisField, lapisFilter }),
-        [lapisField, lapis, lapisFilter],
+        () => fetchLineageAutocompleteList({ lapisUrl, lapisField, lapisFilter }),
+        [lapisField, lapisUrl, lapisFilter],
     );
 
     if (isLoading) {
@@ -70,24 +71,33 @@ const LineageSelector = ({
     placeholderText,
     data,
 }: LineageSelectorProps & {
-    data: string[];
+    data: LineageItem[];
 }) => {
+    const selectedItem = useMemo(() => {
+        return data.find((item) => item.lineage === value) ?? null;
+    }, [data, value]);
+
     return (
         <DownshiftCombobox
             allItems={data}
-            value={value}
+            value={selectedItem}
             filterItemsByInputValue={filterByInputValue}
-            createEvent={(item) => new LineageFilterChangedEvent({ [lapisField]: item ?? undefined })}
-            itemToString={(item) => item ?? ''}
+            createEvent={(item) => new LineageFilterChangedEvent({ [lapisField]: item?.lineage ?? undefined })}
+            itemToString={(item) => item?.lineage ?? ''}
             placeholderText={placeholderText}
-            formatItemInList={(item: string) => item}
+            formatItemInList={(item: LineageItem) => (
+                <p>
+                    <span>{item.lineage}</span>
+                    <span className='ml-2 text-gray-500'>({item.count})</span>
+                </p>
+            )}
         />
     );
 };
 
-function filterByInputValue(item: string, inputValue: string | null) {
+function filterByInputValue(item: LineageItem, inputValue: string | null) {
     if (inputValue === null || inputValue === '') {
         return true;
     }
-    return item?.toLowerCase().includes(inputValue?.toLowerCase() || '');
+    return item.lineage?.toLowerCase().includes(inputValue?.toLowerCase() || '');
 }

package/src/web-components/input/gs-lineage-filter.stories.ts

@@ -7,7 +7,9 @@ import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import '../gs-app';
 import './gs-lineage-filter';
+import { lineageDefinitionEndpoint } from '../../lapisApi/lapisApi';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
+import lineageDefinition from '../../preact/lineageFilter/__mockData__/lineageDefinition.json';
 import { type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
 import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
@@ -44,6 +46,16 @@ const meta: Meta<Required<LineageFilterProps>> = {
                         body: aggregatedData,
                     },
                 },
+                {
+                    matcher: {
+                        name: 'lineageDefinition',
+                        url: lineageDefinitionEndpoint(LAPIS_URL, 'pangoLineage'),
+                    },
+                    response: {
+                        status: 200,
+                        body: lineageDefinition,
+                    },
+                },
             ],
         },
         componentDocs: {
@@ -210,7 +222,7 @@ export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
 
         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*' }));
+            await userEvent.click(canvas.getByRole('option', { name: 'B.1.1.7*(677146)' }));
 
             await waitFor(() => {
                 return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({

package/src/web-components/input/introduction.mdx

@@ -7,5 +7,60 @@ import { Meta } from '@storybook/blocks';
 The components in this section let the user specify values for LAPIS filters.
 The filters can then be used as input to the visualization components.
 
-Every component fires `CustomEvent`s when the user interacts with it, which can be used to update the LAPIS filters.
-The `detail` of the event is designed such that it can be directly passed to the LAPIS API.
+Every component fires `CustomEvent`s when the user interacts with it.
+`event.detail` contains the payload of the event.
+
+Every component fires an event that can be used to update the LAPIS filters.
+It is supposed to be used in the style of:
+
+```javascript
+component.addEventListener('gs-example-event', (event) => {
+    setNewLapisFilter({
+        ...previousLapisFilter,
+        ...event.detail,
+    });
+});
+```
+
+## Controlled Input Components
+
+HTML input components can be controlled or uncontrolled.
+In a controlled component, the value is controlled by surrounding Javascript code.
+In an uncontrolled component, the value is controlled by the DOM and the surrounding Javascript code only reads the value
+(e.g. by listening to events).
+
+All our input components can be used in both ways.
+Every component fires one or two events.
+If the event details can be used to update the LAPIS filter
+_and_ the value then the component will only fire one event,
+otherwise it will fire one event to update the LAPIS filter and one to update the value of the component.
+Refer to the documentation of the individual components for details on which event you can use for which purpose.
+
+**Example**: A controlled input component in a React app could conceptually look like this:
+
+```javascript
+import { useEffect, useRef, useState } from 'react';
+
+const ExampleInput = () => {
+    const [value, setValue] = useState('foo');
+    const inputRef = useRef(null);
+
+    useEffect(() => {
+        if (!inputRef.current) {
+            return;
+        }
+
+        const eventListener = (event) => {
+            setValue(event.detail);
+        };
+
+        inputRef.current.addEventListener('gs-input', eventListener);
+
+        return () => {
+            inputRef.current.removeEventListener('gs-input', eventListener);
+        };
+    }, []);
+
+    return <gs-example-input ref={inputRef} value={value} />;
+};
+```