@genspectrum/dashboard-components 0.1.1

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

@@ -0,0 +1,184 @@
+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 { ifDefined } from 'lit/directives/if-defined.js';
+
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import '../app';
+import './location-filter-component';
+import data from '../../preact/locationFilter/__mockData__/aggregated.json';
+import { type LocationFilterProps } from '../../preact/locationFilter/location-filter';
+import { withinShadowRoot } from '../withinShadowRoot.story';
+
+const meta: Meta = {
+    title: 'Input/Location filter',
+    component: 'gs-location-filter',
+    parameters: {
+        actions: {
+            handles: ['gs-location-changed'],
+        },
+    },
+    decorators: [withActions],
+};
+
+export default meta;
+
+const Template: StoryObj<LocationFilterProps> = {
+    render: (args) => {
+        return html` <gs-app lapis="${LAPIS_URL}">
+            <div class="max-w-screen-lg">
+                <gs-location-filter .fields=${args.fields} value=${ifDefined(args.value)}></gs-location-filter>
+            </div>
+        </gs-app>`;
+    },
+    args: {
+        fields: ['region', 'country', 'division', 'location'],
+        value: '',
+    },
+};
+
+const aggregatedEndpointMatcher = {
+    name: 'numeratorEG',
+    url: AGGREGATED_ENDPOINT,
+    body: {
+        fields: ['region', 'country', 'division', 'location'],
+    },
+};
+
+export const LocationFilter: StoryObj<LocationFilterProps> = {
+    ...Template,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: aggregatedEndpointMatcher,
+                    response: {
+                        status: 200,
+                        body: data,
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');
+        await waitFor(() => {
+            return expect(canvas.getByRole('combobox')).toBeEnabled();
+        });
+    },
+};
+
+export const DelayToShowLoadingState: StoryObj<LocationFilterProps> = {
+    ...Template,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: aggregatedEndpointMatcher,
+                    response: {
+                        status: 200,
+                        body: data,
+                    },
+                    options: {
+                        delay: 5000,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export const FetchingLocationsFails: StoryObj<LocationFilterProps> = {
+    ...Template,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: aggregatedEndpointMatcher,
+                    response: {
+                        status: 500,
+                        body: { error: 'no data' },
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');
+
+        await waitFor(() =>
+            expect(
+                canvas.getByText('Internal Server Error: {"error":"no data"} ', { exact: false }),
+            ).toBeInTheDocument(),
+        );
+    },
+};
+
+export const FiresEvent: StoryObj<LocationFilterProps> = {
+    ...Template,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: aggregatedEndpointMatcher,
+                    response: {
+                        status: 200,
+                        body: data,
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter');
+
+        const submitButton = () => canvas.getByRole('button', { name: 'Submit' });
+        const inputField = () => canvas.getByRole('combobox');
+
+        const listenerMock = fn();
+        await step('Setup event listener mock', async () => {
+            canvasElement.addEventListener('gs-location-changed', listenerMock);
+        });
+
+        await step('wait until data is loaded', async () => {
+            await waitFor(() => {
+                return expect(inputField()).toBeEnabled();
+            });
+        });
+
+        await step('Input invalid location', async () => {
+            await userEvent.type(inputField(), 'Not / A / Location');
+            await userEvent.click(submitButton());
+            await expect(listenerMock).not.toHaveBeenCalled();
+            await userEvent.type(inputField(), '{backspace>18/}');
+        });
+
+        await step('Select Asia', async () => {
+            await userEvent.type(inputField(), 'Asia');
+            await userEvent.click(submitButton());
+            await expect(listenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        region: 'Asia',
+                    },
+                }),
+            );
+        });
+
+        await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => {
+            await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj');
+            await userEvent.click(submitButton());
+            await expect(listenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        region: 'Asia',
+                        country: 'Bangladesh',
+                        division: 'Rajshahi',
+                        location: 'Chapainawabgonj',
+                    },
+                }),
+            );
+        });
+    },
+};

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

@@ -0,0 +1,68 @@
+import { customElement, property } from 'lit/decorators.js';
+
+import { LocationFilter } from '../../preact/locationFilter/location-filter';
+import { PreactLitAdapter } from '../PreactLitAdapter';
+
+/**
+ * ## Tag
+ *
+ * `gs-location-filter`
+ *
+ * ## Context
+ *
+ * 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.
+ * This list is then utilized to display autocomplete suggestions and to validate the input.
+ *
+ * Given `fields` are `['field1', 'field2', ..., 'fieldN']`,
+ * then valid values for the location filter must be in the form `valueForField1 / valueForField2 / ... / valueForFieldK`,
+ * where `1 <= K <= N`.
+ * Values for the fields `i > K` are considered `undefined`.
+ *
+ * @fires {CustomEvent<Record<string, string>>} gs-location-changed
+ * Fired when the field is submitted with a valid location value.
+ * The `details` of this event contain an object with all `fields` as keys
+ * and the corresponding values as values, if they are not `undefined`.
+ * Example:
+ * ```
+ * {
+ *   continent: "Asia",
+ *   country: "China",
+ *   city: "Beijing"
+ * }
+ * ```
+ */
+@customElement('gs-location-filter')
+export class LocationFilterComponent extends PreactLitAdapter {
+    /**
+     * The initial value to use for this location filter.
+     * Must be of the form `valueForField1 / valueForField2 / ... / valueForFieldN`.
+     */
+    @property()
+    value = '';
+
+    /**
+     * The fields to display in the location filter, in hierarchical order.
+     * The top-level field should be the first entry in the array.
+     * This component assumes that the values for each field form a strict hierarchy
+     * (e.g., `fields = ['continent', 'country', 'city']`).
+     */
+    @property({ type: Array })
+    fields: string[] = [];
+
+    override render() {
+        return <LocationFilter value={this.value} fields={this.fields} />;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-location-filter': LocationFilterComponent;
+    }
+
+    interface HTMLElementEventMap {
+        'gs-location-changed': CustomEvent<Record<string, string>>;
+    }
+}

package/src/web-components/input/location-filter.mdx

@@ -0,0 +1,25 @@
+import { ArgTypes, Description, Meta, Story, Title, Source } from '@storybook/blocks';
+
+import * as LocationFilterStories from './location-filter-component.stories.ts';
+
+<Meta of={LocationFilterStories} name='Docs' />
+
+<Title of={LocationFilterStories} />
+
+<Description of={LocationFilterStories} />
+
+## Specification
+
+<ArgTypes of={LocationFilterStories} />
+
+## Example
+
+<Source
+    code={`<gs-location-filter fields="['continent', 'country']" value='Europe / Switzerland'></gs-location-filter>`}
+/>
+
+### Live Example
+
+[See here](?path=/story/input-location-filter--location-filter)
+
+<Story of={LocationFilterStories.LocationFilter} />

package/src/web-components/input/mutation-filter-component.stories.ts

@@ -0,0 +1,97 @@
+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 { LAPIS_URL } from '../../constants';
+import '../app';
+import { withinShadowRoot } from '../withinShadowRoot.story';
+import './mutation-filter-component';
+
+const meta: Meta = {
+    title: 'Input/Mutation filter',
+    component: 'gs-mutation-filter',
+    parameters: {
+        actions: {
+            handles: ['gs-mutation-filter-changed', 'gs-mutation-filter-on-blur'],
+        },
+        fetchMock: {},
+    },
+    decorators: [withActions],
+};
+
+export default meta;
+
+export const Default: StoryObj<{ lapisField: string; placeholderText: string }> = {
+    render: () => {
+        return html` <gs-app lapis="${LAPIS_URL}">
+            <div class="max-w-screen-lg">
+                <gs-mutation-filter></gs-mutation-filter>
+            </div>
+        </gs-app>`;
+    },
+};
+
+export const FiresFilterChangedEvent: StoryObj<{ lapisField: string; placeholderText: string }> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter');
+
+        const inputField = () => canvas.getByPlaceholderText('Enter a mutation');
+        const submitButton = () => canvas.getByRole('button', { name: '+' });
+        const listenerMock = fn();
+        await step('Setup event listener mock', async () => {
+            canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock);
+        });
+
+        await step('wait until data is loaded', async () => {
+            await waitFor(() => {
+                return expect(inputField()).toBeEnabled();
+            });
+        });
+
+        await step('Enter a valid mutation', async () => {
+            await userEvent.type(inputField(), 'A123T');
+            await waitFor(() => submitButton().click());
+
+            await waitFor(() =>
+                expect(listenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            nucleotideMutations: ['A123T'],
+                            aminoAcidMutations: [],
+                            nucleotideInsertions: [],
+                            aminoAcidInsertions: [],
+                        },
+                    }),
+                ),
+            );
+        });
+    },
+};
+
+export const FiresFilterOnBlurEvent: StoryObj<{ lapisField: string; placeholderText: string }> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter');
+
+        const inputField = () => canvas.getByPlaceholderText('Enter a mutation');
+        const listenerMock = fn();
+        await step('Setup event listener mock', async () => {
+            canvasElement.addEventListener('gs-mutation-filter-on-blur', listenerMock);
+        });
+
+        await step('wait until data is loaded', async () => {
+            await waitFor(() => {
+                return expect(inputField()).toBeEnabled();
+            });
+        });
+
+        await step('Move outside of input', async () => {
+            await userEvent.type(inputField(), 'A123T');
+            await userEvent.tab();
+
+            await expect(listenerMock).toHaveBeenCalled();
+        });
+    },
+};

package/src/web-components/input/mutation-filter-component.tsx

@@ -0,0 +1,27 @@
+import { customElement } from 'lit/decorators.js';
+
+import { type TextInputComponent } from './text-input-component';
+import { MutationFilter, type SelectedMutationFilterStrings } from '../../preact/mutationFilter/mutation-filter';
+import { PreactLitAdapter } from '../PreactLitAdapter';
+
+/**
+ * @fires {CustomEvent<SelectedMutationFilterStrings>} gs-mutation-filter-changed - When the mutation filter values have changed
+ * @fires {CustomEvent<SelectedMutationFilterStrings>} gs-mutation-filter-on-blur - When the mutation filter has lost focus
+ */
+@customElement('gs-mutation-filter')
+export class MutationFilterComponent extends PreactLitAdapter {
+    override render() {
+        return <MutationFilter />;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-mutation-filter': TextInputComponent;
+    }
+
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
+    }
+}

package/src/web-components/input/text-input-component.stories.ts

@@ -0,0 +1,92 @@
+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 { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import '../app';
+import './text-input-component';
+import data from '../../preact/textInput/__mockData__/aggregated_hosts.json';
+import { withinShadowRoot } from '../withinShadowRoot.story';
+
+const meta: Meta = {
+    title: 'Input/Text input',
+    component: 'gs-text-input',
+    parameters: {
+        actions: {
+            handles: ['gs-text-input-changed'],
+        },
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'hosts',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: ['host'],
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: data,
+                    },
+                },
+            ],
+        },
+    },
+    decorators: [withActions],
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<{ lapisField: string; placeholderText: string }> = {
+    render: (args) => {
+        return html` <gs-app lapis="${LAPIS_URL}">
+            <div class="max-w-screen-lg">
+                <gs-text-input .lapisField=${args.lapisField} .placeholderText=${args.placeholderText}></gs-text-input>
+            </div>
+        </gs-app>`;
+    },
+    args: {
+        lapisField: 'host',
+        placeholderText: 'Enter host name',
+    },
+};
+
+export const FiresEvent: StoryObj<{ lapisField: string; placeholderText: string }> = {
+    ...Default,
+    play: async ({ canvasElement, step }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-text-input');
+
+        const inputField = () => canvas.getByPlaceholderText('Enter host name');
+        const listenerMock = fn();
+        await step('Setup event listener mock', async () => {
+            canvasElement.addEventListener('gs-text-input-changed', listenerMock);
+        });
+
+        await step('wait until data is loaded', async () => {
+            await waitFor(() => {
+                return expect(inputField()).toBeEnabled();
+            });
+        });
+
+        await step('Enters an invalid host name', async () => {
+            await userEvent.type(inputField(), 'notInList');
+            await expect(listenerMock).not.toHaveBeenCalled();
+            await userEvent.type(inputField(), '{backspace>9/}');
+        });
+
+        await step('Enter a valid host name', async () => {
+            await userEvent.type(inputField(), 'Homo');
+
+            await expect(listenerMock).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    detail: {
+                        host: 'Homo',
+                    },
+                }),
+            );
+        });
+    },
+};

package/src/web-components/input/text-input-component.tsx

@@ -0,0 +1,30 @@
+import { customElement, property } from 'lit/decorators.js';
+
+import { TextInput } from '../../preact/textInput/text-input';
+import { PreactLitAdapter } from '../PreactLitAdapter';
+
+/**
+ * @fires {CustomEvent<Record<string, string>>} gs-text-input-changed - When the text input has changed
+ */
+@customElement('gs-text-input')
+export class TextInputComponent extends PreactLitAdapter {
+    @property()
+    lapisField = '';
+
+    @property()
+    placeholderText = '';
+
+    override render() {
+        return <TextInput lapisField={this.lapisField} placeholderText={this.placeholderText} />;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-text-input': TextInputComponent;
+    }
+
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+    }
+}

package/src/web-components/lapis-context.ts

@@ -0,0 +1,3 @@
+import { createContext } from '@lit/context';
+
+export const lapisContext = createContext<string>('lapis-context');

package/src/web-components/reference-genome-context.ts

@@ -0,0 +1,5 @@
+import { createContext } from '@lit/context';
+
+import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
+
+export const referenceGenomeContext = createContext<ReferenceGenome>('reference-genome-context');

package/src/web-components/withinShadowRoot.story.ts

@@ -0,0 +1,34 @@
+import { expect, waitFor, within } from '@storybook/test';
+
+export default {};
+
+/**
+ * taken from https://github.com/storybookjs/testing-library/issues/24#issuecomment-1593709872
+ *
+ * Usage:
+ * ```ts
+ * export const MyStory: StoryObj = {
+ *     render: () => html` <my-web-component />`,
+ *     play: async ({ canvasElement, step }) => {
+ *         const canvas = await withinShadowRoot(canvasElement, 'my-web-component');
+ *
+ *         await userEvent.click(canvas.getByRole('button'));
+ *         // ...
+ *     },
+ * };
+ * ```
+ */
+export async function withinShadowRoot(customElement: HTMLElement, selector: string) {
+    const webComponent = customElement.querySelector(selector);
+
+    await waitFor(
+        () => {
+            const shadowRootFirstEl = webComponent?.shadowRoot?.firstElementChild as HTMLElement;
+            return expect(shadowRootFirstEl).toContainElement(shadowRootFirstEl);
+        },
+        { timeout: 1000 },
+    );
+
+    // force type HTMLElement to ignore the type checking of the "within" function
+    return within(webComponent?.shadowRoot as unknown as HTMLElement);
+}