@genspectrum/dashboard-components 0.6.0 → 0.6.2

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

@@ -0,0 +1,14 @@
+import { describe, expect, test } from 'vitest';
+
+import { fetchLineageAutocompleteList } from './fetchLineageAutocompleteList';
+import { DUMMY_LAPIS_URL, lapisRequestMocks } from '../../../vitest.setup';
+
+describe('fetchLineageAutocompleteList', () => {
+    test('should add sublineage values', async () => {
+        lapisRequestMocks.aggregated({ fields: ['lineageField'] }, { data: [{ lineageField: 'B.1.1.7', count: 1 }] });
+
+        const result = await fetchLineageAutocompleteList(DUMMY_LAPIS_URL, 'lineageField');
+
+        expect(result).to.deep.equal(['B.1.1.7', 'B.1.1.7*']);
+    });
+});

package/src/preact/lineageFilter/fetchLineageAutocompleteList.ts

@@ -0,0 +1,9 @@
+import { FetchAggregatedOperator } from '../../operator/FetchAggregatedOperator';
+
+export async function fetchLineageAutocompleteList(lapis: string, field: string, signal?: AbortSignal) {
+    const fetchAggregatedOperator = new FetchAggregatedOperator<Record<string, string>>({}, [field]);
+
+    const data = (await fetchAggregatedOperator.evaluate(lapis, signal)).content;
+
+    return data.flatMap((item) => [item[field], `${item[field]}*`]).sort();
+}

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

@@ -0,0 +1,56 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import { type Meta, type StoryObj } from '@storybook/preact';
+
+import { LineageFilter, type LineageFilterProps } from './lineage-filter';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
+import { LapisUrlContext } from '../LapisUrlContext';
+
+const meta: Meta = {
+    title: 'Input/LineageFilter',
+    component: LineageFilter,
+    parameters: {
+        actions: {
+            handles: ['gs-lineage-filter-changed'],
+        },
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'pangoLineage',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['pangoLineage'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregatedData,
+                    },
+                },
+            ],
+        },
+    },
+    decorators: [withActions],
+};
+
+export default meta;
+
+export const Default: StoryObj<LineageFilterProps> = {
+    render: (args) => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <LineageFilter
+                lapisField={args.lapisField}
+                placeholderText={args.placeholderText}
+                initialValue={args.initialValue}
+                width={args.width}
+            />
+        </LapisUrlContext.Provider>
+    ),
+    args: {
+        lapisField: 'pangoLineage',
+        placeholderText: 'Enter lineage',
+        initialValue: '',
+        width: '100%',
+    },
+};

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

@@ -0,0 +1,100 @@
+import { type FunctionComponent } from 'preact';
+import { useContext, useRef } from 'preact/hooks';
+
+import { fetchLineageAutocompleteList } from './fetchLineageAutocompleteList';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { ErrorBoundary } from '../components/error-boundary';
+import { ErrorDisplay } from '../components/error-display';
+import { LoadingDisplay } from '../components/loading-display';
+import { NoDataDisplay } from '../components/no-data-display';
+import { ResizeContainer } from '../components/resize-container';
+import { useQuery } from '../useQuery';
+
+export interface LineageFilterInnerProps {
+    lapisField: string;
+    placeholderText?: string;
+    initialValue?: string;
+}
+
+export interface LineageFilterProps extends LineageFilterInnerProps {
+    width: string;
+}
+
+export const LineageFilter: FunctionComponent<LineageFilterProps> = ({ width, ...innerProps }) => {
+    const size = { width, height: '3rem' };
+
+    return (
+        <ErrorBoundary size={size}>
+            <ResizeContainer size={size}>
+                <LineageFilterInner {...innerProps} />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({
+    lapisField,
+    placeholderText,
+    initialValue,
+}) => {
+    const lapis = useContext(LapisUrlContext);
+
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const { data, error, isLoading } = useQuery(
+        () => fetchLineageAutocompleteList(lapis, lapisField),
+        [lapisField, lapis],
+    );
+
+    if (isLoading) {
+        return <LoadingDisplay />;
+    }
+
+    if (error !== null) {
+        return <ErrorDisplay error={error} />;
+    }
+
+    if (data === null) {
+        return <NoDataDisplay />;
+    }
+
+    const onInput = () => {
+        const value = inputRef.current?.value === '' ? undefined : inputRef.current?.value;
+
+        if (isValidValue(value)) {
+            inputRef.current?.dispatchEvent(
+                new CustomEvent('gs-lineage-filter-changed', {
+                    detail: { [lapisField]: value },
+                    bubbles: true,
+                    composed: true,
+                }),
+            );
+        }
+    };
+
+    const isValidValue = (value: string | undefined) => {
+        if (value === undefined) {
+            return true;
+        }
+        return data.includes(value);
+    };
+
+    return (
+        <>
+            <input
+                type='text'
+                class='input input-bordered w-full'
+                placeholder={placeholderText !== undefined ? placeholderText : lapisField}
+                onInput={onInput}
+                ref={inputRef}
+                list={lapisField}
+                value={initialValue}
+            />
+            <datalist id={lapisField}>
+                {data.map((item) => (
+                    <option value={item} key={item} />
+                ))}
+            </datalist>
+        </>
+    );
+};

package/src/preact/numberSequencesOverTime/__mockData__/twoVariantsEG.json

@@ -244,10 +244,6 @@
             "count": 416,
             "date": "2023-09-18"
         },
-        {
-            "count": 208,
-            "date": null
-        },
         {
             "count": 271,
             "date": "2023-09-15"
@@ -624,10 +620,6 @@
             "count": 313,
             "date": "2023-10-26"
         },
-        {
-            "count": 1,
-            "date": "2022-01-23"
-        },
         {
             "count": 91,
             "date": "2023-12-31"

package/src/preact/textInput/text-input.tsx

@@ -32,11 +32,7 @@ export const TextInput: FunctionComponent<TextInputProps> = ({ width, ...innerPr
     );
 };
 
-export const TextInputInner: FunctionComponent<TextInputInnerProps> = ({
-    lapisField,
-    placeholderText,
-    initialValue,
-}) => {
+const TextInputInner: FunctionComponent<TextInputInnerProps> = ({ lapisField, placeholderText, initialValue }) => {
     const lapis = useContext(LapisUrlContext);
 
     const inputRef = useRef<HTMLInputElement>(null);

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

@@ -0,0 +1,137 @@
+import { withActions } from '@storybook/addon-actions/decorator';
+import { expect, fn, userEvent, waitFor } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import '../app';
+import './gs-lineage-filter';
+import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
+import { type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
+import { withinShadowRoot } from '../withinShadowRoot.story';
+
+const codeExample = String.raw`
+<gs-lineage-filter 
+    lapisField="pangoLineage"
+    placeholderText="Enter lineage"
+    initialValue="B.1.1.7"
+    width="50%">
+</gs-lineage-filter>`;
+
+const meta: Meta<Required<LineageFilterProps>> = {
+    title: 'Input/Lineage filter',
+    component: 'gs-lineage-filter',
+    parameters: withComponentDocs({
+        actions: {
+            handles: ['gs-lineage-filter-changed'],
+        },
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'pangoLineage',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['pangoLineage'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: aggregatedData,
+                    },
+                },
+            ],
+        },
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    decorators: [withActions],
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<Required<LineageFilterProps>> = {
+    render: (args) => {
+        return html` <gs-app lapis="${LAPIS_URL}">
+            <div class="max-w-screen-lg">
+                <gs-lineage-filter
+                    .lapisField=${args.lapisField}
+                    .placeholderText=${args.placeholderText}
+                    .initialValue=${args.initialValue}
+                    .width=${args.width}
+                ></gs-lineage-filter>
+            </div>
+        </gs-app>`;
+    },
+    args: {
+        lapisField: 'pangoLineage',
+        placeholderText: 'Enter lineage',
+        initialValue: 'B.1.1.7',
+        width: '100%',
+    },
+};
+
+export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter');
+
+        const inputField = () => canvas.getByPlaceholderText('Enter lineage');
+        const listenerMock = fn();
+        await step('Setup event listener mock', async () => {
+            canvasElement.addEventListener('gs-lineage-filter-changed', 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 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 expect(listenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        pangoLineage: 'B.1.1.7',
+                    },
+                }),
+            );
+        });
+
+        await step('Enter a valid lineage value', async () => {
+            await userEvent.type(inputField(), '{backspace>9/}');
+            await userEvent.type(inputField(), 'B.1.1.7*');
+
+            await expect(listenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        pangoLineage: 'B.1.1.7*',
+                    },
+                }),
+            );
+        });
+    },
+    args: {
+        ...Default.args,
+        initialValue: '',
+    },
+};

package/src/web-components/input/gs-lineage-filter.tsx

@@ -0,0 +1,79 @@
+import { customElement, property } from 'lit/decorators.js';
+
+import { LineageFilter } from '../../preact/lineageFilter/lineage-filter';
+import { PreactLitAdapter } from '../PreactLitAdapter';
+
+/**
+ *
+ * ## Context
+ *
+ * This component provides a text input field to filter by lineages.
+ * Currently, it is designed to work well with Pango Lineages,
+ * but it may also be used for other lineage types, if suitable.
+ *
+ * It fetches all available values of the `lapisField` from the LAPIS instance
+ * and provides an autocomplete list with the available values of the lineage and sublineage queries
+ * (a `*` appended to the lineage value).
+ *
+ * @fires {CustomEvent<Record<string, string>>} gs-lineage-filter-changed
+ * Fired when the input field is changed.
+ * The `details` of this event contain an object with the `lapisField` as key and the input value as value.
+ * Example:
+ * ```
+ * {
+ *  "pangoLineage": "B.1.1.7"
+ * }
+ *  ```
+ */
+@customElement('gs-lineage-filter')
+export class LineageFilterComponent extends PreactLitAdapter {
+    /**
+     * The initial value to use for this lineage filter.
+     */
+    @property()
+    initialValue: string = '';
+
+    /**
+     * Required.
+     *
+     * The LAPIS field name to use for this lineage filter.
+     * The field must exist on this LAPIS instance.
+     */
+    @property()
+    lapisField = '';
+
+    /**
+     * The placeholder text to display in the input field.
+     */
+    @property()
+    placeholderText: string = '';
+
+    /**
+     * The width of the component.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    width: string = '100%';
+
+    override render() {
+        return (
+            <LineageFilter
+                lapisField={this.lapisField}
+                placeholderText={this.placeholderText}
+                initialValue={this.initialValue}
+                width={this.width}
+            />
+        );
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+    }
+}

package/src/web-components/input/index.ts

@@ -2,3 +2,4 @@ export { DateRangeSelectorComponent } from './gs-date-range-selector';
 export { LocationFilterComponent } from './gs-location-filter';
 export { TextInputComponent } from './gs-text-input';
 export { MutationFilterComponent } from './gs-mutation-filter';
+export { LineageFilterComponent } from './gs-lineage-filter';

package/src/web-components/visualization/gs-number-sequences-over-time.stories.ts

@@ -157,6 +157,7 @@ export const TwoDatasets: StoryObj<NumberSequencesOverTimeProps> = {
                         body: {
                             country: 'USA',
                             pangoLineage: 'EG*',
+                            dateFrom: '2022-10-01',
                             fields: ['date'],
                         },
                     },