@genspectrum/dashboard-components 1.0.0 → 1.1.0

package/dist/util.d.ts

@@ -949,7 +949,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations': MutationsComponent;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -957,7 +957,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -965,7 +965,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -973,7 +973,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1093,11 +1093,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1105,7 +1104,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1113,10 +1112,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
+        'gs-text-filter': TextFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
     }
 }
 
@@ -1124,7 +1123,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1132,10 +1131,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-filter': TextFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.textFilterChanged]: TextFilterChangedEvent;
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1143,7 +1143,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-filter': 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.0.0",
+    "version": "1.1.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/lapisApi/LineageDefinition.ts

@@ -2,7 +2,7 @@ import z from 'zod';
 
 const lineage = z.object({
     parents: z.array(z.string()).optional(),
-    aliases: z.array(z.string()),
+    aliases: z.array(z.string()).optional(),
 });
 
 export const lineageDefinitionResponseSchema = z.record(lineage);

package/src/preact/MutationAnnotationsContext.tsx

@@ -16,7 +16,12 @@ type MutationAnnotationPerSequenceType = {
     position: Map<string, MutationAnnotations>;
 };
 
-const MutationAnnotationsContext = createContext<Record<SequenceType, MutationAnnotationPerSequenceType>>({
+type MutationAnnotationsContextValue = Record<SequenceType, MutationAnnotationPerSequenceType> & {
+    rawAnnotations: MutationAnnotations;
+};
+
+const MutationAnnotationsContext = createContext<MutationAnnotationsContextValue>({
+    rawAnnotations: [],
     nucleotide: {
         mutation: new Map(),
         position: new Map(),
@@ -75,6 +80,7 @@ export function getMutationAnnotationsContext(value: MutationAnnotations) {
     });
 
     return {
+        rawAnnotations: value,
         nucleotide: { mutation: nucleotideMap, position: nucleotidePositions },
         'amino acid': { mutation: aminoAcidMap, position: aminoAcidPositions },
     };
@@ -85,15 +91,17 @@ function addAnnotationToMap(map: Map<string, MutationAnnotations>, code: string,
     map.set(code.toUpperCase(), [...oldAnnotations, annotation]);
 }
 
+export function useRawMutationAnnotations() {
+    return useContext(MutationAnnotationsContext).rawAnnotations;
+}
+
 export function useMutationAnnotationsProvider() {
     const mutationAnnotations = useContext(MutationAnnotationsContext);
 
     return getMutationAnnotationsProvider(mutationAnnotations);
 }
 
-export function getMutationAnnotationsProvider(
-    mutationAnnotations: Record<SequenceType, MutationAnnotationPerSequenceType>,
-) {
+export function getMutationAnnotationsProvider(mutationAnnotations: MutationAnnotationsContextValue) {
     return (mutation: Mutation, sequenceType: SequenceType) => {
         const position =
             mutation.segment === undefined
@@ -110,11 +118,11 @@ export function getMutationAnnotationsProvider(
 
         const uniqueNames = new Set<string>();
 
-        return annotations?.filter((item) => {
-            if (uniqueNames.has(item.name)) {
+        return annotations?.filter((annotation) => {
+            if (uniqueNames.has(annotation.name)) {
                 return false;
             }
-            uniqueNames.add(item.name);
+            uniqueNames.add(annotation.name);
             return true;
         });
     };

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

@@ -0,0 +1,109 @@
+import { type StoryObj } from '@storybook/preact';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import { type Meta } from '@storybook/web-components';
+import { useState, type Dispatch, type StateUpdater } from 'preact/hooks';
+
+import {
+    MutationsOverTimeMutationsFilter,
+    type MutationsOverTimeMutationsFilterProps,
+} from './mutations-over-time-mutations-filter';
+import { MutationAnnotationsContextProvider } from '../MutationAnnotationsContext';
+import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationsOverTimeData';
+
+const meta: Meta = {
+    title: 'Component/Mutations over time mutations filter',
+    component: 'MutationsOverTimeTextFilter',
+    parameters: { fetchMock: {} },
+};
+
+export default meta;
+
+const WrapperWithState = ({
+    setFilterValue,
+    value,
+}: {
+    setFilterValue: Dispatch<StateUpdater<MutationFilter>>;
+    value: MutationFilter;
+}) => {
+    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: '+',
+                },
+            ]}
+        >
+            <MutationsOverTimeMutationsFilter
+                setFilterValue={(value) => {
+                    setFilterValue(value);
+                    setState(value);
+                }}
+                value={state}
+            />
+        </MutationAnnotationsContextProvider>
+    );
+};
+
+export const FilterByText: StoryObj<MutationsOverTimeMutationsFilterProps> = {
+    render: (args) => {
+        return <WrapperWithState setFilterValue={args.setFilterValue} value={args.value} />;
+    },
+    args: {
+        setFilterValue: fn(),
+        value: { textFilter: 'Test', annotationNameFilter: new Set([]) },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Expect initial value to show on the button', async () => {
+            const button = canvas.getByRole('button');
+            await expect(button).toHaveTextContent('Test');
+        });
+
+        await step('Change filter and expect it to show on the button', async () => {
+            const button = canvas.getByRole('button');
+            await userEvent.click(button);
+
+            const inputField = canvas.getByRole('textbox');
+            await userEvent.clear(inputField);
+            await userEvent.type(inputField, 'OtherText');
+
+            await waitFor(() => expect(button).toHaveTextContent('OtherText'));
+        });
+    },
+};
+
+export const FilterByAnnotation: StoryObj<MutationsOverTimeMutationsFilterProps> = {
+    ...FilterByText,
+    args: {
+        setFilterValue: fn(),
+        value: { textFilter: '', annotationNameFilter: new Set() },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+
+        await step('Expect default text to show on the button', async () => {
+            const button = canvas.getByRole('button');
+            await expect(button).toHaveTextContent('Filter mutations');
+        });
+
+        await step('Change filter and expect it to show on the button', async () => {
+            const button = canvas.getByRole('button');
+            await userEvent.click(button);
+
+            const inputField = canvas.getByRole('checkbox', { name: /Test Annotation 1/ });
+            await userEvent.click(inputField);
+
+            await waitFor(() => expect(button).toHaveTextContent('Test Annotation 1'));
+        });
+    },
+};

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

@@ -0,0 +1,139 @@
+import { type FunctionComponent, type h } from 'preact';
+import { type Dispatch, type StateUpdater, useCallback, useEffect, useState } from 'preact/hooks';
+
+import { Dropdown } from './dropdown';
+import { useRawMutationAnnotations } from '../MutationAnnotationsContext';
+import { type MutationFilter } from '../mutationsOverTime/getFilteredMutationsOverTimeData';
+import { DeleteIcon } from '../shared/icons/DeleteIcon';
+
+export type MutationsOverTimeMutationsFilterProps = {
+    setFilterValue: Dispatch<StateUpdater<MutationFilter>>;
+    value: MutationFilter;
+};
+
+export function MutationsOverTimeMutationsFilter({ setFilterValue, value }: MutationsOverTimeMutationsFilterProps) {
+    return (
+        <div className={'w-28 inline-flex'}>
+            <Dropdown buttonTitle={getButtonTitle(value)} placement={'bottom-start'}>
+                <TextInput value={value} setFilterValue={setFilterValue} />
+                <AnnotationCheckboxes value={value} setFilterValue={setFilterValue} />
+            </Dropdown>
+        </div>
+    );
+}
+
+function getButtonTitle(value: MutationFilter) {
+    if (value.textFilter === '' && value.annotationNameFilter.size === 0) {
+        return `Filter mutations`;
+    }
+
+    return [value.textFilter, ...value.annotationNameFilter].filter((it) => it !== '').join(', ');
+}
+
+const TextInput: FunctionComponent<MutationsOverTimeMutationsFilterProps> = ({ setFilterValue, value }) => {
+    const onInput = useCallback(
+        (newValue: string) => {
+            setFilterValue((previousFilter) => ({
+                ...previousFilter,
+                textFilter: newValue,
+            }));
+        },
+        [setFilterValue],
+    );
+
+    const onDeleteClick = () => {
+        setFilterValue((previousFilter) => ({
+            ...previousFilter,
+            textFilter: '',
+        }));
+    };
+
+    return (
+        <div>
+            <label className='flex gap-1 input input-xs'>
+                <DebouncedInput placeholder={'Filter'} onInput={onInput} value={value.textFilter} type='text' />
+                {value.textFilter !== '' && (
+                    <button className={'cursor-pointer'} onClick={onDeleteClick}>
+                        <DeleteIcon />
+                    </button>
+                )}
+            </label>
+        </div>
+    );
+};
+
+function DebouncedInput({
+    value: initialValue,
+    onInput,
+    debounce = 500,
+    ...props
+}: {
+    onInput: (value: string) => void;
+    debounce?: number;
+    value?: string;
+} & Omit<h.JSX.IntrinsicElements['input'], 'onInput'>) {
+    const [value, setValue] = useState<string | undefined>(initialValue);
+
+    useEffect(() => {
+        setValue(initialValue);
+    }, [initialValue]);
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            onInput(value ?? '');
+        }, debounce);
+
+        return () => clearTimeout(timeout);
+    }, [value, debounce, onInput]);
+
+    const onChangeInput = useCallback((event: h.JSX.TargetedEvent<HTMLInputElement>) => {
+        setValue(event.currentTarget.value);
+    }, []);
+
+    return <input {...props} value={value} onInput={onChangeInput} />;
+}
+
+const AnnotationCheckboxes: FunctionComponent<MutationsOverTimeMutationsFilterProps> = ({ value, setFilterValue }) => {
+    const mutationAnnotations = useRawMutationAnnotations();
+
+    if (mutationAnnotations.length === 0) {
+        return null;
+    }
+
+    return (
+        <>
+            <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>
+        </>
+    );
+};

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

@@ -47,6 +47,44 @@ describe('fetchLineageAutocompleteList', () => {
         ]);
     });
 
+    test('should work without aliases', async () => {
+        lapisRequestMocks.aggregated(
+            { fields: [lineageField], ...lapisFilter },
+            {
+                data: [
+                    {
+                        [lineageField]: 'A',
+                        count: 1,
+                    },
+                ],
+            },
+        );
+
+        lapisRequestMocks.lineageDefinition(
+            {
+                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], ...lapisFilter },

package/src/preact/mutationsOverTime/getFilteredMutationsOverTime.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { BaseMutationOverTimeDataMap } from './MutationOverTimeData';
-import { getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
+import { getFilteredMutationOverTimeData, type MutationFilter } from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
 import { type DeletionEntry, type SubstitutionEntry } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
@@ -28,7 +28,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedMutationTypes: [],
             proportionInterval,
             displayMutations: undefined,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -62,7 +62,7 @@ describe('getFilteredMutationOverTimeData', () => {
                 },
             ],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -85,7 +85,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -108,7 +108,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -132,7 +132,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -156,7 +156,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -178,7 +178,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -201,7 +201,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -225,7 +225,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedMutationTypes: [],
             proportionInterval,
             displayMutations: [anotherSubstitution.code, someDeletion.code],
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -235,7 +235,7 @@ describe('getFilteredMutationOverTimeData', () => {
         expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution, someDeletion]);
     });
 
-    it('should filter by mutation filter value', () => {
+    it('should filter by mutation filter text value', () => {
         const { data, overallMutationData } = prepareMutationOverTimeData([
             someSubstitutionEntry,
             anotherSubstitutionEntry,
@@ -248,7 +248,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '23T',
+            mutationFilterValue: { textFilter: '23T', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -265,7 +265,7 @@ describe('getFilteredMutationOverTimeData', () => {
             someDeletionEntry,
         ]);
 
-        const expectFilteredValue = (filterValue: string, annotations: MutationAnnotations) => {
+        const expectFilteredValue = (filterValue: MutationFilter, annotations: MutationAnnotations) => {
             const annotationProvider = getMutationAnnotationsProvider(getMutationAnnotationsContext(annotations));
 
             const result = getFilteredMutationOverTimeData({
@@ -283,7 +283,7 @@ describe('getFilteredMutationOverTimeData', () => {
         };
 
         it('with filter value in symbol', () => {
-            expectFilteredValue('#', [
+            expectFilteredValue({ textFilter: '#', annotationNameFilter: new Set() }, [
                 {
                     name: 'Annotation 1',
                     description: 'Description 1',
@@ -294,7 +294,7 @@ describe('getFilteredMutationOverTimeData', () => {
         });
 
         it('with filter value in name', () => {
-            expectFilteredValue('Annota', [
+            expectFilteredValue({ textFilter: 'Annota', annotationNameFilter: new Set() }, [
                 {
                     name: 'Annotation 1 #',
                     description: 'Description 1',
@@ -305,7 +305,18 @@ describe('getFilteredMutationOverTimeData', () => {
         });
 
         it('with filter value in name', () => {
-            expectFilteredValue('Descr', [
+            expectFilteredValue({ textFilter: 'Descr', annotationNameFilter: new Set() }, [
+                {
+                    name: 'Annotation 1',
+                    description: 'Description 1',
+                    symbol: '#',
+                    nucleotideMutations: ['A123T'],
+                },
+            ]);
+        });
+
+        it('with annotation name filter', () => {
+            expectFilteredValue({ textFilter: '', annotationNameFilter: new Set(['Annotation 1']) }, [
                 {
                     name: 'Annotation 1',
                     description: 'Description 1',