@genspectrum/dashboard-components 0.12.0 → 0.13.0

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

@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, waitFor, within } from '@storybook/test';
+import { expect, fireEvent, fn, waitFor, within } from '@storybook/test';
 
 import data from './__mockData__/aggregated_hosts.json';
 import { TextInput, type TextInputProps } from './text-input';
@@ -23,6 +23,7 @@ const meta: Meta<TextInputProps> = {
                         url: AGGREGATED_ENDPOINT,
                         body: {
                             fields: ['host'],
+                            country: 'Germany',
                         },
                     },
                     response: {
@@ -36,16 +37,15 @@ const meta: Meta<TextInputProps> = {
     argTypes: {
         lapisField: {
             control: {
-                type: 'select',
+                type: 'text',
             },
-            options: ['host'],
         },
         placeholderText: {
             control: {
                 type: 'text',
             },
         },
-        initialValue: {
+        value: {
             control: {
                 type: 'text',
             },
@@ -55,6 +55,11 @@ const meta: Meta<TextInputProps> = {
                 type: 'text',
             },
         },
+        lapisFilter: {
+            control: {
+                type: 'object',
+            },
+        },
     },
 };
 
@@ -63,35 +68,50 @@ export default meta;
 export const Default: StoryObj<TextInputProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
-            <TextInput
-                lapisField={args.lapisField}
-                placeholderText={args.placeholderText}
-                initialValue={args.initialValue}
-                width={args.width}
-            />
+            <TextInput {...args} />
         </LapisUrlContext.Provider>
     ),
     args: {
         lapisField: 'host',
         placeholderText: 'Enter a host name',
-        initialValue: '',
+        value: '',
         width: '100%',
+        lapisFilter: {
+            country: 'Germany',
+        },
     },
 };
 
-export const WithInitialValue: StoryObj<TextInputProps> = {
+export const RemoveInitialValue: StoryObj<TextInputProps> = {
     ...Default,
     args: {
         ...Default.args,
-        initialValue: 'Homo sapiens',
+        value: 'Homo sapiens',
     },
-    play: async ({ canvasElement }) => {
+    play: async ({ canvasElement, step }) => {
         const canvas = within(canvasElement);
 
+        const changedListenerMock = fn();
+        await step('Setup event listener mock', async () => {
+            canvasElement.addEventListener('gs-text-input-changed', changedListenerMock);
+        });
+
         await waitFor(() => {
             const input = canvas.getByPlaceholderText('Enter a host name', { exact: false });
             expect(input).toHaveValue('Homo sapiens');
         });
+
+        await step('Remove initial value', async () => {
+            await fireEvent.click(canvas.getByRole('button', { name: 'clear selection' }));
+
+            await expect(changedListenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        host: undefined,
+                    },
+                }),
+            );
+        });
     },
 };
 

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

@@ -1,27 +1,31 @@
 import { type FunctionComponent } from 'preact';
-import { useContext, useRef } from 'preact/hooks';
+import { useContext } from 'preact/hooks';
 import z from 'zod';
 
-import { fetchAutocompleteList } from './fetchAutocompleteList';
+import { fetchStringAutocompleteList } from './fetchStringAutocompleteList';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { TextInputChangedEvent } from './TextInputChangedEvent';
+import { lapisFilterSchema } from '../../types';
+import { DownshiftCombobox } from '../components/downshift-combobox';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
 
-const textInputInnerPropsSchema = z.object({
+const textSelectorPropsSchema = z.object({
     lapisField: z.string().min(1),
     placeholderText: z.string().optional(),
-    initialValue: z.string().optional(),
+    value: z.string().optional(),
 });
-
+const textInputInnerPropsSchema = textSelectorPropsSchema.extend({ lapisFilter: lapisFilterSchema });
 const textInputPropsSchema = textInputInnerPropsSchema.extend({
     width: z.string(),
 });
 
 export type TextInputInnerProps = z.infer<typeof textInputInnerPropsSchema>;
 export type TextInputProps = z.infer<typeof textInputPropsSchema>;
+type TextSelectorProps = z.infer<typeof textSelectorPropsSchema>;
 
 export const TextInput: FunctionComponent<TextInputProps> = (props) => {
     const { width, ...innerProps } = props;
@@ -36,12 +40,18 @@ export const TextInput: FunctionComponent<TextInputProps> = (props) => {
     );
 };
 
-const TextInputInner: FunctionComponent<TextInputInnerProps> = ({ lapisField, placeholderText, initialValue }) => {
+const TextInputInner: FunctionComponent<TextInputInnerProps> = ({
+    value,
+    lapisField,
+    placeholderText,
+    lapisFilter,
+}) => {
     const lapis = useContext(LapisUrlContext);
 
-    const inputRef = useRef<HTMLInputElement>(null);
-
-    const { data, error, isLoading } = useQuery(() => fetchAutocompleteList(lapis, lapisField), [lapisField, lapis]);
+    const { data, error, isLoading } = useQuery(
+        () => fetchStringAutocompleteList({ lapis, field: lapisField, lapisFilter }),
+        [lapisField, lapis, lapisFilter],
+    );
 
     if (isLoading) {
         return <LoadingDisplay />;
@@ -55,43 +65,35 @@ const TextInputInner: FunctionComponent<TextInputInnerProps> = ({ lapisField, pl
         return <NoDataDisplay />;
     }
 
-    const onInput = () => {
-        const value = inputRef.current?.value === '' ? undefined : inputRef.current?.value;
-
-        if (isValidValue(value)) {
-            inputRef.current?.dispatchEvent(
-                new CustomEvent('gs-text-input-changed', {
-                    detail: { [lapisField]: value },
-                    bubbles: true,
-                    composed: true,
-                }),
-            );
-        }
-    };
-
-    const isValidValue = (value: string | undefined) => {
-        if (value === undefined) {
-            return true;
-        }
-        return data.includes(value);
-    };
+    return <TextSelector lapisField={lapisField} value={value} placeholderText={placeholderText} data={data} />;
+};
 
+const TextSelector = ({
+    lapisField,
+    value,
+    placeholderText,
+    data,
+}: TextSelectorProps & {
+    data: string[];
+}) => {
     return (
-        <>
-            <input
-                type='text'
-                class='input input-bordered w-full'
-                placeholder={placeholderText ?? lapisField}
-                onInput={onInput}
-                ref={inputRef}
-                list={lapisField}
-                value={initialValue}
-            />
-            <datalist id={lapisField}>
-                {data.map((item) => (
-                    <option value={item} key={item} />
-                ))}
-            </datalist>
-        </>
+        <DownshiftCombobox
+            allItems={data}
+            value={value}
+            filterItemsByInputValue={filterByInputValue}
+            createEvent={(item: string | null) => new TextInputChangedEvent({ [lapisField]: item ?? undefined })}
+            itemToString={(item: string | undefined | null) => item ?? ''}
+            placeholderText={placeholderText}
+            formatItemInList={(item: string) => {
+                return <span>{item}</span>;
+            }}
+        />
     );
 };
+
+function filterByInputValue(item: string, inputValue: string | undefined | null) {
+    if (inputValue === undefined || inputValue === null || inputValue === '') {
+        return true;
+    }
+    return item?.toLowerCase().includes(inputValue?.toLowerCase() || '');
+}

package/src/types.ts

@@ -28,6 +28,9 @@ export const namedLapisFilterSchema = z.object({
 });
 export type NamedLapisFilter = z.infer<typeof namedLapisFilterSchema>;
 
+export const lapisLocationFilterSchema = z.record(z.union([z.string(), z.undefined()]));
+export type LapisLocationFilter = z.infer<typeof lapisLocationFilterSchema>;
+
 export const temporalGranularitySchema = z.union([
     z.literal('day'),
     z.literal('week'),

package/src/utilEntrypoint.ts

@@ -34,3 +34,5 @@ export type { ConfidenceIntervalMethod } from './preact/shared/charts/confideceI
 export type { AxisMax, YAxisMaxConfig } from './preact/shared/charts/getYAxisMax';
 
 export { LocationChangedEvent } from './preact/locationFilter/LocationChangedEvent';
+export { LineageFilterChangedEvent } from './preact/lineageFilter/LineageFilterChangedEvent';
+export { TextInputChangedEvent } from './preact/textInput/TextInputChangedEvent';

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

@@ -14,8 +14,9 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 const codeExample = String.raw`
 <gs-lineage-filter 
     lapisField="pangoLineage"
+    lapisFilter='{"counrty": "Germany"}'
     placeholderText="Enter lineage"
-    initialValue="B.1.1.7"
+    value="B.1.1.7"
     width="50%">
 </gs-lineage-filter>`;
 
@@ -34,6 +35,7 @@ const meta: Meta<Required<LineageFilterProps>> = {
                         url: AGGREGATED_ENDPOINT,
                         body: {
                             fields: ['pangoLineage'],
+                            country: 'Germany',
                         },
                     },
                     response: {
@@ -50,18 +52,47 @@ const meta: Meta<Required<LineageFilterProps>> = {
         },
     }),
     tags: ['autodocs'],
+    argTypes: {
+        lapisField: {
+            control: {
+                type: 'select',
+            },
+            options: ['host'],
+        },
+        placeholderText: {
+            control: {
+                type: 'text',
+            },
+        },
+        value: {
+            control: {
+                type: 'text',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
+        lapisFilter: {
+            control: {
+                type: 'object',
+            },
+        },
+    },
 };
 
 export default meta;
 
-export const Default: StoryObj<Required<LineageFilterProps>> = {
+const Template: StoryObj<Required<LineageFilterProps>> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
                 <gs-lineage-filter
                     .lapisField=${args.lapisField}
+                    .lapisFilter=${args.lapisFilter}
                     .placeholderText=${args.placeholderText}
-                    .initialValue=${args.initialValue}
+                    .value=${args.value}
                     .width=${args.width}
                 ></gs-lineage-filter>
             </div>
@@ -69,18 +100,86 @@ export const Default: StoryObj<Required<LineageFilterProps>> = {
     },
     args: {
         lapisField: 'pangoLineage',
-        placeholderText: 'Enter lineage',
-        initialValue: 'B.1.1.7',
+        lapisFilter: {
+            country: 'Germany',
+        },
+        placeholderText: 'Enter a lineage',
+        value: 'B.1.1.7',
         width: '100%',
     },
 };
 
+const aggregatedEndpointMatcher = {
+    name: 'pangoLineage',
+    url: AGGREGATED_ENDPOINT,
+    body: {
+        fields: ['pangoLineage'],
+        country: 'Germany',
+    },
+};
+
+export const LineageFilter: StoryObj<Required<LineageFilterProps>> = {
+    ...Template,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter');
+        await waitFor(() => {
+            return expect(canvas.getByPlaceholderText('Enter a lineage')).toBeVisible();
+        });
+    },
+};
+
+export const DelayToShowLoadingState: StoryObj<Required<LineageFilterProps>> = {
+    ...Template,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: aggregatedEndpointMatcher,
+                    response: {
+                        status: 200,
+                        body: aggregatedData,
+                    },
+                    options: {
+                        delay: 5000,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const FetchingLocationsFails: StoryObj<Required<LineageFilterProps>> = {
+    ...Template,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: aggregatedEndpointMatcher,
+                    response: {
+                        status: 400,
+                        body: {
+                            error: { status: 400, detail: 'Dummy error message from mock LAPIS', type: 'about:blank' },
+                        },
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter');
+
+        await waitFor(() =>
+            expect(canvas.getByText('Oops! Something went wrong.', { exact: false })).toBeInTheDocument(),
+        );
+    },
+};
+
 export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
-    ...Default,
+    ...LineageFilter,
     play: async ({ canvasElement, step }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter');
 
-        const inputField = () => canvas.getByPlaceholderText('Enter lineage');
+        const inputField = () => canvas.getByPlaceholderText('Enter a lineage');
         const listenerMock = fn();
         await step('Setup event listener mock', async () => {
             canvasElement.addEventListener('gs-lineage-filter-changed', listenerMock);
@@ -99,38 +198,28 @@ export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
 
         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 userEvent.click(canvas.getByLabelText('toggle menu'));
 
-            await expect(listenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        pangoLineage: 'B.1.1.7',
-                    },
-                }),
-            );
+            await waitFor(() => {
+                return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: undefined,
+                });
+            });
         });
 
         await step('Enter a valid lineage value', async () => {
-            await userEvent.type(inputField(), '{backspace>9/}');
             await userEvent.type(inputField(), 'B.1.1.7*');
+            await userEvent.click(canvas.getByRole('option', { name: 'B.1.1.7*' }));
 
-            await expect(listenerMock).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    detail: {
-                        pangoLineage: 'B.1.1.7*',
-                    },
-                }),
-            );
+            await waitFor(() => {
+                return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: 'B.1.1.7*',
+                });
+            });
         });
     },
     args: {
-        ...Default.args,
-        initialValue: '',
+        ...LineageFilter.args,
+        value: '',
     },
 };

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

@@ -1,6 +1,7 @@
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
+import { type LineageFilterChangedEvent } from '../../preact/lineageFilter/LineageFilterChangedEvent';
 import { LineageFilter, type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
@@ -13,11 +14,11 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * 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
+ * It fetches all available values of the `lapisField` from the LAPIS instance within the given `lapisFilter`
  * 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
+ * @fires {CustomEvent<Record<string, string | undefined>>} 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:
@@ -33,7 +34,7 @@ export class LineageFilterComponent extends PreactLitAdapter {
      * The initial value to use for this lineage filter.
      */
     @property()
-    initialValue: string = '';
+    value: string = '';
 
     /**
      * Required.
@@ -44,6 +45,19 @@ export class LineageFilterComponent extends PreactLitAdapter {
     @property()
     lapisField = '';
 
+    /**
+     * The filter that is used to fetch the available the autocomplete options.
+     * If not set it fetches all available options.
+     * It must be a valid LAPIS filter object.
+     */
+    @property({ type: Object })
+    lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    } = {};
+
     /**
      * The placeholder text to display in the input field.
      */
@@ -62,8 +76,9 @@ export class LineageFilterComponent extends PreactLitAdapter {
         return (
             <LineageFilter
                 lapisField={this.lapisField}
+                lapisFilter={this.lapisFilter}
                 placeholderText={this.placeholderText}
-                initialValue={this.initialValue}
+                value={this.value}
                 width={this.width}
             />
         );
@@ -76,7 +91,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-lineage-filter-changed': LineageFilterChangedEvent;
     }
 }
 
@@ -90,12 +105,13 @@ declare global {
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
-type InitialValueMatches = Expect<
-    Equals<typeof LineageFilterComponent.prototype.initialValue, LineageFilterProps['initialValue']>
->;
+type InitialValueMatches = Expect<Equals<typeof LineageFilterComponent.prototype.value, LineageFilterProps['value']>>;
 type LapisFieldMatches = Expect<
     Equals<typeof LineageFilterComponent.prototype.lapisField, LineageFilterProps['lapisField']>
 >;
+type LapisFilterMatches = Expect<
+    Equals<typeof LineageFilterComponent.prototype.lapisFilter, LineageFilterProps['lapisFilter']>
+>;
 type PlaceholderTextMatches = Expect<
     Equals<typeof LineageFilterComponent.prototype.placeholderText, LineageFilterProps['placeholderText']>
 >;

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

@@ -15,6 +15,7 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 const codeExample = String.raw`
 <gs-location-filter
     fields='["region", "country"]'
+    lapisFilter='{"age": 10}'
     value='{ "region": "Europe", "country": null}'
     width="100%"
     placeholderText="Enter a location"
@@ -54,6 +55,9 @@ const meta: Meta = {
                 type: 'text',
             },
         },
+        lapisFilter: {
+            age: 18,
+        },
     },
     tags: ['autodocs'],
 };
@@ -66,6 +70,7 @@ const Template: StoryObj<LocationFilterProps> = {
             <div class="max-w-screen-lg">
                 <gs-location-filter
                     .fields=${args.fields}
+                    .lapisFilter=${args.lapisFilter}
                     .value=${args.value}
                     .width=${args.width}
                     placeholderText=${ifDefined(args.placeholderText)}
@@ -75,6 +80,9 @@ const Template: StoryObj<LocationFilterProps> = {
     },
     args: {
         fields: ['region', 'country', 'division', 'location'],
+        lapisFilter: {
+            age: 18,
+        },
         value: undefined,
         width: '100%',
         placeholderText: 'Enter a location',
@@ -86,6 +94,7 @@ const aggregatedEndpointMatcher = {
     url: AGGREGATED_ENDPOINT,
     body: {
         fields: ['region', 'country', 'division', 'location'],
+        age: 18,
     },
 };
 

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

@@ -12,10 +12,11 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * This component provides an input field to specify filters for locations.
  *
  * It expects a list of fields that form a strict hierarchical order, such as continent, country, and city.
- * The component retrieves a list of all possible values for these fields from the Lapis instance.
+ * The component retrieves a list of all possible values for these fields from the Lapis instance,
+ * within the `lapisFilter`.
  * This list is then utilized to display autocomplete suggestions and to validate the input.
  *
- * @fires {CustomEvent<Record<string, string>>} gs-location-changed
+ * @fires {CustomEvent<Record<string, string | undefined>>} gs-location-changed
  * Fired when a value from the datalist is selected or when a valid value is typed into the field.
  * The `details` of this event contain an object with all `fields` as keys
  * and the corresponding values as values, even if they are `undefined`.
@@ -35,7 +36,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
      * The initial value to use for this location filter.
      */
     @property({ type: Object })
-    value: Record<string, string | null | undefined> | undefined = undefined;
+    value: Record<string, string | undefined> | undefined = undefined;
 
     /**
      * Required.
@@ -48,6 +49,19 @@ export class LocationFilterComponent extends PreactLitAdapter {
     @property({ type: Array })
     fields: string[] = [];
 
+    /**
+     * The filter that is used to fetch the available the autocomplete options.
+     * If not set it fetches all available options.
+     * It must be a valid LAPIS filter object.
+     */
+    @property({ type: Object })
+    lapisFilter: Record<string, string | string[] | number | null | boolean | undefined> & {
+        nucleotideMutations?: string[];
+        aminoAcidMutations?: string[];
+        nucleotideInsertions?: string[];
+        aminoAcidInsertions?: string[];
+    } = {};
+
     /**
      * The width of the component.
      *
@@ -67,6 +81,7 @@ export class LocationFilterComponent extends PreactLitAdapter {
             <LocationFilter
                 value={this.value}
                 fields={this.fields}
+                lapisFilter={this.lapisFilter}
                 width={this.width}
                 placeholderText={this.placeholderText}
             />
@@ -96,6 +111,9 @@ declare global {
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type InitialValueMatches = Expect<Equals<typeof LocationFilterComponent.prototype.value, LocationFilterProps['value']>>;
 type FieldsMatches = Expect<Equals<typeof LocationFilterComponent.prototype.fields, LocationFilterProps['fields']>>;
+type LapisFilterMatches = Expect<
+    Equals<typeof LocationFilterComponent.prototype.lapisFilter, LocationFilterProps['lapisFilter']>
+>;
 type PlaceholderTextMatches = Expect<
     Equals<typeof LocationFilterComponent.prototype.placeholderText, LocationFilterProps['placeholderText']>
 >;