@genspectrum/dashboard-components 1.0.1 → 1.1.0

package/dist/util.d.ts

@@ -917,7 +917,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -925,7 +925,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -933,7 +933,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -941,7 +941,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -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-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-mutations': MutationsComponent;
     }
 }
 
@@ -973,7 +973,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -981,7 +981,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate': AggregateComponent;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -989,7 +989,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -997,7 +997,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-aggregate': AggregateComponent;
     }
 }
 
@@ -1005,7 +1005,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1029,7 +1029,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1037,7 +1037,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>;
         }
     }
 }
@@ -1045,7 +1045,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1053,7 +1053,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>;
         }
     }
 }
@@ -1077,11 +1077,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;
     }
 }
 
@@ -1089,7 +1085,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>;
         }
     }
 }
@@ -1135,10 +1131,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1146,7 +1143,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1173,11 +1170,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-range-filter': NumberRangeFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
-        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
     }
 }
 
@@ -1185,7 +1181,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1193,7 +1189,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-number-range-filter': NumberRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
     }
 }
 
@@ -1201,7 +1201,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

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

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>
+        </>
+    );
+};