@genspectrum/dashboard-components 0.12.0 → 0.13.0

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

@@ -1,4 +1,4 @@
-import { expect, fn, userEvent, waitFor } from '@storybook/test';
+import { expect, fireEvent, fn, userEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
@@ -14,8 +14,9 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 const codeExample = String.raw`
 <gs-text-input 
     lapisField="host"
+    lapisFilter='{"country": "Germany"}'
     placeholderText="Enter host name"
-    initialValue="Homo sapiens"
+    value="Homo sapiens"
     width="50%">
 </gs-text-input>`;
 
@@ -34,6 +35,7 @@ const meta: Meta<Required<TextInputProps>> = {
                         url: AGGREGATED_ENDPOINT,
                         body: {
                             fields: ['host'],
+                            country: 'Germany',
                         },
                     },
                     response: {
@@ -60,7 +62,7 @@ const meta: Meta<Required<TextInputProps>> = {
                 type: 'text',
             },
         },
-        initialValue: {
+        value: {
             control: {
                 type: 'text',
             },
@@ -70,6 +72,11 @@ const meta: Meta<Required<TextInputProps>> = {
                 type: 'text',
             },
         },
+        lapisFilter: {
+            control: {
+                type: 'object',
+            },
+        },
     },
     tags: ['autodocs'],
 };
@@ -82,8 +89,9 @@ export const Default: StoryObj<Required<TextInputProps>> = {
             <div class="max-w-screen-lg">
                 <gs-text-input
                     .lapisField=${args.lapisField}
+                    .lapisFilter=${args.lapisFilter}
                     .placeholderText=${args.placeholderText}
-                    .initialValue=${args.initialValue}
+                    .value=${args.value}
                     .width=${args.width}
                 ></gs-text-input>
             </div>
@@ -91,13 +99,14 @@ export const Default: StoryObj<Required<TextInputProps>> = {
     },
     args: {
         lapisField: 'host',
+        lapisFilter: { country: 'Germany' },
         placeholderText: 'Enter host name',
-        initialValue: 'Homo sapiens',
+        value: 'Homo sapiens',
         width: '100%',
     },
 };
 
-export const FiresEvent: StoryObj<Required<TextInputProps>> = {
+export const FiresEvents: StoryObj<Required<TextInputProps>> = {
     ...Default,
     play: async ({ canvasElement, step }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-text-input');
@@ -121,25 +130,48 @@ export const FiresEvent: StoryObj<Required<TextInputProps>> = {
 
         await step('Empty input', async () => {
             await userEvent.type(inputField(), '{backspace>9/}');
-            await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
-                host: undefined,
-            });
         });
 
         await step('Enter a valid host name', async () => {
-            await userEvent.type(inputField(), 'Homo');
+            await userEvent.type(inputField(), 'Homo s');
+
+            const dropdownOption = await canvas.findByText('Homo sapiens');
+            await userEvent.click(dropdownOption);
+        });
+
+        await step('Verify event is fired with correct detail', async () => {
+            await waitFor(() => {
+                expect(listenerMock).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        detail: {
+                            host: 'Homo sapiens',
+                        },
+                    }),
+                );
+            });
+        });
+
+        await step('Remove initial value', async () => {
+            await fireEvent.click(canvas.getByRole('button', { name: 'clear selection' }));
 
             await expect(listenerMock).toHaveBeenCalledWith(
                 expect.objectContaining({
                     detail: {
-                        host: 'Homo',
+                        host: undefined,
                     },
                 }),
             );
         });
+
+        await step('Empty input', async () => {
+            inputField().blur();
+            await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                host: undefined,
+            });
+        });
     },
     args: {
         ...Default.args,
-        initialValue: '',
+        value: '',
     },
 };

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

@@ -1,6 +1,7 @@
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
+import { type TextInputChangedEvent } from '../../preact/textInput/TextInputChangedEvent';
 import { TextInput, type TextInputProps } from '../../preact/textInput/text-input';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
@@ -11,7 +12,7 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  *
  * This component provides a text input field to specify filters for arbitrary fields of this LAPIS instance.
  *
- * @fires {CustomEvent<Record<string, string>>} gs-text-input-changed
+ * @fires {CustomEvent<Record<string, string | undefined>>} gs-text-input-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:
@@ -27,7 +28,7 @@ export class TextInputComponent extends PreactLitAdapter {
      * The initial value to use for this text input.
      */
     @property()
-    initialValue: string | undefined = undefined;
+    value: string | undefined = undefined;
 
     /**
      * Required.
@@ -38,6 +39,19 @@ export class TextInputComponent 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.
      */
@@ -56,8 +70,9 @@ export class TextInputComponent extends PreactLitAdapter {
         return (
             <TextInput
                 lapisField={this.lapisField}
+                lapisFilter={this.lapisFilter}
                 placeholderText={this.placeholderText}
-                initialValue={this.initialValue}
+                value={this.value}
                 width={this.width}
             />
         );
@@ -70,7 +85,7 @@ declare global {
     }
 
     interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-text-input-changed': TextInputChangedEvent;
     }
 }
 
@@ -84,10 +99,11 @@ declare global {
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
-type InitialValueMatches = Expect<
-    Equals<typeof TextInputComponent.prototype.initialValue, TextInputProps['initialValue']>
->;
+type InitialValueMatches = Expect<Equals<typeof TextInputComponent.prototype.value, TextInputProps['value']>>;
 type LapisFieldMatches = Expect<Equals<typeof TextInputComponent.prototype.lapisField, TextInputProps['lapisField']>>;
+type LapisFilterMatches = Expect<
+    Equals<typeof TextInputComponent.prototype.lapisFilter, TextInputProps['lapisFilter']>
+>;
 type PlaceholderTextMatches = Expect<
     Equals<typeof TextInputComponent.prototype.placeholderText, TextInputProps['placeholderText']>
 >;