@genspectrum/dashboard-components 1.9.2 → 1.10.0

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

@@ -17,7 +17,7 @@ const meta: Meta = {
     component: LineageFilter,
     parameters: {
         actions: {
-            handles: [gsEventNames.lineageFilterChanged, ...previewHandles],
+            handles: [gsEventNames.lineageFilterChanged, gsEventNames.lineageFilterMultiChanged, ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -61,7 +61,7 @@ const meta: Meta = {
         },
         value: {
             control: {
-                type: 'text',
+                type: 'object',
             },
         },
         width: {
@@ -79,6 +79,11 @@ const meta: Meta = {
                 type: 'boolean',
             },
         },
+        multiSelect: {
+            control: {
+                type: 'boolean',
+            },
+        },
     },
 
     args: {
@@ -90,6 +95,7 @@ const meta: Meta = {
         value: 'A.1',
         width: '100%',
         hideCounts: false,
+        multiSelect: false,
     },
 };
 
@@ -169,6 +175,40 @@ export const WithNoLapisField: StoryObj<LineageFilterProps> = {
     },
 };
 
+export const WithStringValueInMultiSelectMode: StoryObj<LineageFilterProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        multiSelect: true,
+        value: 'A.1',
+    },
+    play: async ({ canvasElement, step }) => {
+        await step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(
+                canvasElement,
+                'When multiSelect is true, value must be an array of strings',
+            );
+        });
+    },
+};
+
+export const WithArrayValueInSingleSelectMode: StoryObj<LineageFilterProps> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        multiSelect: false,
+        value: ['A.1', 'B.1'],
+    },
+    play: async ({ canvasElement, step }) => {
+        await step('expect error message', async () => {
+            await expectInvalidAttributesErrorMessage(
+                canvasElement,
+                'When multiSelect is false or undefined, value must be a string',
+            );
+        });
+    },
+};
+
 export const WithHideCountsTrue: StoryObj<LineageFilterProps> = {
     ...Default,
     args: {
@@ -243,6 +283,145 @@ export const EnterAndClearMultipleTimes: StoryObj<LineageFilterProps> = {
     },
 };
 
+export const MultiSelectDefault: StoryObj<LineageFilterProps> = {
+    render: (args) => (
+        <LapisUrlContextProvider value={LAPIS_URL}>
+            <LineageFilter {...args} />
+        </LapisUrlContextProvider>
+    ),
+    args: {
+        ...Default.args,
+        multiSelect: true,
+        value: ['A.1', 'B.1'],
+        placeholderText: 'Select lineages',
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        const lineageChangedListenerMock = fn();
+
+        await step('Setup event listener mock', () => {
+            canvasElement.addEventListener(gsEventNames.lineageFilterMultiChanged, lineageChangedListenerMock);
+        });
+
+        await step('multi-select filter is rendered with initial values', async () => {
+            await waitFor(async () => {
+                await expect(canvas.getByText('A.1')).toBeVisible();
+                await expect(canvas.getByText('B.1')).toBeVisible();
+            });
+        });
+
+        await step('add another lineage', async () => {
+            const input = await canvas.findByPlaceholderText('Select lineages');
+            await userEvent.type(input, 'C.1');
+            await userEvent.click(canvas.getByRole('option', { name: 'C.1(23)' }));
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: ['A.1', 'B.1', 'C.1'],
+                });
+            });
+        });
+
+        await step('verify all three lineages are displayed', async () => {
+            await expect(canvas.getByText('A.1')).toBeVisible();
+            await expect(canvas.getByText('B.1')).toBeVisible();
+            await expect(canvas.getByText('C.1')).toBeVisible();
+        });
+    },
+};
+
+export const MultiSelectRemoveItem: StoryObj<LineageFilterProps> = {
+    render: (args) => (
+        <LapisUrlContextProvider value={LAPIS_URL}>
+            <LineageFilter {...args} />
+        </LapisUrlContextProvider>
+    ),
+    args: {
+        ...Default.args,
+        multiSelect: true,
+        value: ['A.1', 'B.1', 'C.1'],
+        placeholderText: 'Select lineages',
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        const lineageChangedListenerMock = fn();
+
+        await step('Setup event listener mock', () => {
+            canvasElement.addEventListener(gsEventNames.lineageFilterMultiChanged, lineageChangedListenerMock);
+        });
+
+        await step('multi-select filter is rendered with three values', async () => {
+            await waitFor(async () => {
+                await expect(canvas.getByText('A.1')).toBeVisible();
+                await expect(canvas.getByText('B.1')).toBeVisible();
+                await expect(canvas.getByText('C.1')).toBeVisible();
+            });
+        });
+
+        await step('remove B.1 lineage', async () => {
+            const removeButton = canvas.getByLabelText('remove B.1');
+            await userEvent.click(removeButton);
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: ['A.1', 'C.1'],
+                });
+            });
+        });
+
+        await step('verify B.1 is removed', async () => {
+            await expect(canvas.queryByText('B.1')).not.toBeVisible();
+            await expect(canvas.getByText('A.1')).toBeVisible();
+            await expect(canvas.getByText('C.1')).toBeVisible();
+        });
+    },
+};
+
+export const MultiSelectClearAll: StoryObj<LineageFilterProps> = {
+    render: (args) => (
+        <LapisUrlContextProvider value={LAPIS_URL}>
+            <LineageFilter {...args} />
+        </LapisUrlContextProvider>
+    ),
+    args: {
+        ...Default.args,
+        multiSelect: true,
+        value: ['A.1', 'B.1'],
+        placeholderText: 'Select lineages',
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        const lineageChangedListenerMock = fn();
+
+        await step('Setup event listener mock', () => {
+            canvasElement.addEventListener(gsEventNames.lineageFilterMultiChanged, lineageChangedListenerMock);
+        });
+
+        await step('multi-select filter is rendered with values', async () => {
+            await waitFor(async () => {
+                await expect(canvas.getByText('A.1')).toBeVisible();
+                await expect(canvas.getByText('B.1')).toBeVisible();
+            });
+        });
+
+        await step('clear all selections', async () => {
+            const clearButton = canvas.getByLabelText('clear selection');
+            await userEvent.click(clearButton);
+
+            await waitFor(() => {
+                return expect(lineageChangedListenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({
+                    pangoLineage: undefined,
+                });
+            });
+        });
+
+        await step('verify all chips are removed', async () => {
+            await expect(canvas.queryByText('A.1')).not.toBeVisible();
+            await expect(canvas.queryByText('B.1')).not.toBeVisible();
+        });
+    },
+};
+
 async function prepare(canvasElement: HTMLElement, step: StepFunction<PreactRenderer, unknown>) {
     const canvas = within(canvasElement);
 

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

@@ -3,10 +3,10 @@ import { useMemo } from 'preact/hooks';
 import z from 'zod';
 
 import { useLapisUrl } from '../LapisUrlContext';
-import { LineageFilterChangedEvent } from './LineageFilterChangedEvent';
-import { fetchLineageAutocompleteList, type LineageItem } from './fetchLineageAutocompleteList';
+import { LineageFilterChangedEvent, LineageMultiFilterChangedEvent } from './LineageFilterChangedEvent';
+import { type LineageItem, fetchLineageAutocompleteList } from './fetchLineageAutocompleteList';
 import { lapisFilterSchema } from '../../types';
-import { DownshiftCombobox } from '../components/downshift-combobox';
+import { DownshiftCombobox, DownshiftMultiCombobox } from '../components/downshift-combobox';
 import { ErrorBoundary } from '../components/error-boundary';
 import { LoadingDisplay } from '../components/loading-display';
 import { ResizeContainer } from '../components/resize-container';
@@ -15,15 +15,36 @@ import { useQuery } from '../useQuery';
 const lineageSelectorPropsSchema = z.object({
     lapisField: z.string().min(1),
     placeholderText: z.string().optional(),
-    value: z.string(),
+    value: z.union([z.string(), z.array(z.string())]),
     hideCounts: z.boolean().optional(),
+    multiSelect: z.boolean().optional(),
 });
+
 const lineageFilterInnerPropsSchema = lineageSelectorPropsSchema.extend({
     lapisFilter: lapisFilterSchema,
 });
-const lineageFilterPropsSchema = lineageFilterInnerPropsSchema.extend({
-    width: z.string(),
-});
+
+const lineageFilterPropsSchema = lineageFilterInnerPropsSchema
+    .extend({
+        width: z.string(),
+    })
+    .refine(
+        (data) => {
+            if (data.multiSelect && typeof data.value === 'string') {
+                return false;
+            }
+            if (!data.multiSelect && Array.isArray(data.value)) {
+                return false;
+            }
+            return true;
+        },
+        (data) => ({
+            message: data.multiSelect
+                ? 'When multiSelect is true, value must be an array of strings'
+                : 'When multiSelect is false or undefined, value must be a string',
+            path: ['value'],
+        }),
+    );
 
 export type LineageFilterInnerProps = z.infer<typeof lineageFilterInnerPropsSchema>;
 export type LineageFilterProps = z.infer<typeof lineageFilterPropsSchema>;
@@ -48,6 +69,7 @@ const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({
     value,
     lapisFilter,
     hideCounts,
+    multiSelect = false,
 }) => {
     const lapisUrl = useLapisUrl();
 
@@ -71,6 +93,7 @@ const LineageFilterInner: FunctionComponent<LineageFilterInnerProps> = ({
             placeholderText={placeholderText}
             data={data}
             hideCounts={hideCounts}
+            multiSelect={multiSelect}
         />
     );
 };
@@ -81,13 +104,46 @@ const LineageSelector = ({
     placeholderText,
     data,
     hideCounts = false,
+    multiSelect = false,
 }: LineageSelectorProps & {
     data: LineageItem[];
 }) => {
+    const formatItemInList = (item: LineageItem) => (
+        <p>
+            <span>{item.lineage}</span>
+            {!hideCounts && <span className='ml-2 text-gray-500'>({item.count.toLocaleString('en-US')})</span>}
+        </p>
+    );
+
+    const selectedItems = useMemo(() => {
+        const valueArray = Array.isArray(value) ? value : [];
+        return valueArray
+            .map((lineageValue) => data.find((item) => item.lineage === lineageValue))
+            .filter((item): item is LineageItem => item !== undefined);
+    }, [data, value]);
+
     const selectedItem = useMemo(() => {
-        return data.find((item) => item.lineage === value) ?? null;
+        const valueString = typeof value === 'string' ? value : '';
+        return data.find((item) => item.lineage === valueString) ?? null;
     }, [data, value]);
 
+    if (multiSelect) {
+        return (
+            <DownshiftMultiCombobox
+                allItems={data}
+                value={selectedItems}
+                filterItemsByInputValue={filterByInputValue}
+                createEvent={(items) => {
+                    const lineages = items.length > 0 ? items.map((item) => item.lineage) : undefined;
+                    return new LineageMultiFilterChangedEvent({ [lapisField]: lineages });
+                }}
+                itemToString={(item) => item?.lineage ?? ''}
+                placeholderText={placeholderText ?? 'Select lineages'}
+                formatItemInList={formatItemInList}
+                formatSelectedItem={(item: LineageItem) => <span>{item.lineage}</span>}
+            />
+        );
+    }
     return (
         <DownshiftCombobox
             allItems={data}
@@ -96,12 +152,7 @@ const LineageSelector = ({
             createEvent={(item) => new LineageFilterChangedEvent({ [lapisField]: item?.lineage ?? undefined })}
             itemToString={(item) => item?.lineage ?? ''}
             placeholderText={placeholderText}
-            formatItemInList={(item: LineageItem) => (
-                <p>
-                    <span>{item.lineage}</span>
-                    {!hideCounts && <span className='ml-2 text-gray-500'>({item.count.toLocaleString('en-US')})</span>}
-                </p>
-            )}
+            formatItemInList={formatItemInList}
         />
     );
 };

package/src/utils/gsEventNames.ts

@@ -5,6 +5,7 @@ export const gsEventNames = {
     dateRangeOptionChanged: 'gs-date-range-option-changed',
     mutationFilterChanged: 'gs-mutation-filter-changed',
     lineageFilterChanged: 'gs-lineage-filter-changed',
+    lineageFilterMultiChanged: 'gs-lineage-filter-multi-changed',
     locationChanged: 'gs-location-changed',
     textFilterChanged: 'gs-text-filter-changed',
     numberRangeFilterChanged: 'gs-number-range-filter-changed',

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

@@ -0,0 +1,30 @@
+import { describe, expectTypeOf, test } from 'vitest';
+
+import { LineageFilterComponent } from './gs-lineage-filter';
+import { type LineageFilterProps } from '../../preact/lineageFilter/lineage-filter';
+
+describe('gs-lineage-filter types', () => {
+    test('should match', () => {
+        expectTypeOf(LineageFilterComponent.prototype)
+            .toHaveProperty('value')
+            .toEqualTypeOf<LineageFilterProps['value']>();
+        expectTypeOf(LineageFilterComponent.prototype)
+            .toHaveProperty('lapisField')
+            .toEqualTypeOf<LineageFilterProps['lapisField']>();
+        expectTypeOf(LineageFilterComponent.prototype)
+            .toHaveProperty('lapisFilter')
+            .toEqualTypeOf<LineageFilterProps['lapisFilter']>();
+        expectTypeOf(LineageFilterComponent.prototype)
+            .toHaveProperty('placeholderText')
+            .toEqualTypeOf<LineageFilterProps['placeholderText']>();
+        expectTypeOf(LineageFilterComponent.prototype)
+            .toHaveProperty('width')
+            .toEqualTypeOf<LineageFilterProps['width']>();
+        expectTypeOf(LineageFilterComponent.prototype)
+            .toHaveProperty('multiSelect')
+            .toEqualTypeOf<LineageFilterProps['multiSelect']>();
+        expectTypeOf(LineageFilterComponent.prototype)
+            .toHaveProperty('hideCounts')
+            .toEqualTypeOf<LineageFilterProps['hideCounts']>();
+    });
+});

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

@@ -28,7 +28,7 @@ const meta: Meta<Required<LineageFilterProps>> = {
     component: 'gs-lineage-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: [gsEventNames.lineageFilterChanged, ...previewHandles],
+            handles: [gsEventNames.lineageFilterChanged, gsEventNames.lineageFilterMultiChanged, ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -79,7 +79,7 @@ const meta: Meta<Required<LineageFilterProps>> = {
         },
         value: {
             control: {
-                type: 'text',
+                type: 'object',
             },
         },
         width: {
@@ -97,6 +97,11 @@ const meta: Meta<Required<LineageFilterProps>> = {
                 type: 'boolean',
             },
         },
+        multiSelect: {
+            control: {
+                type: 'boolean',
+            },
+        },
     },
 };
 
@@ -113,6 +118,7 @@ const Template: StoryObj<Required<LineageFilterProps>> = {
                     .hideCounts=${args.hideCounts}
                     .value=${args.value}
                     .width=${args.width}
+                    .multiSelect=${args.multiSelect}
                 ></gs-lineage-filter>
             </div>
         </gs-app>`;
@@ -126,6 +132,7 @@ const Template: StoryObj<Required<LineageFilterProps>> = {
         value: 'B.1.1.7',
         width: '100%',
         hideCounts: false,
+        multiSelect: false,
     },
 };
 
@@ -243,3 +250,19 @@ export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
         value: '',
     },
 };
+
+export const MultiSelectMode: StoryObj<Required<LineageFilterProps>> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        multiSelect: true,
+        value: ['B.1.1.7', 'BA.5'],
+        placeholderText: 'Select lineages',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter');
+        await waitFor(() => {
+            return expect(canvas.getByPlaceholderText('Select lineages')).toBeVisible();
+        });
+    },
+};

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

@@ -1,14 +1,15 @@
 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 LineageFilterChangedEvent,
+    type LineageMultiFilterChangedEvent,
+} from '../../preact/lineageFilter/LineageFilterChangedEvent';
+import { LineageFilter } from '../../preact/lineageFilter/lineage-filter';
 import { type gsEventNames } from '../../utils/gsEventNames';
-import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
 /**
- *
  * ## Context
  *
  * This component provides a text input field to filter by lineages.
@@ -19,23 +20,37 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * and provides an autocomplete list with the available values of the lineage and sublineage queries
  * (a `*` appended to the lineage value).
  *
+ * When `multiSelect` is true, it allows selecting multiple lineages and displays them as removable chips.
+ *
  * @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.
+ * Fired when the selection changes in single-select mode.
+ * The `details` of this event contain an object with the `lapisField` as key and the selected value as value.
  * Example:
  * ```
  * {
  *  "pangoLineage": "B.1.1.7"
  * }
- *  ```
+ * ```
+ *
+ * @fires {CustomEvent<Record<string, string[] | undefined>>} gs-lineage-filter-multi-changed
+ * Fired when the selection changes in multi-select mode.
+ * The `details` of this event contain an object with the `lapisField` as key and an array of selected values.
+ * Example:
+ * ```
+ * {
+ *  "pangoLineage": ["B.1.1.7", "BA.5"]
+ * }
+ * ```
  */
 @customElement('gs-lineage-filter')
 export class LineageFilterComponent extends PreactLitAdapter {
     /**
      * The initial value to use for this lineage filter.
+     * Can be a string for single select mode or an array of strings (or comma-separated string) for multi-select mode.
+     * Examples: "B.1.1.7" or ["B.1.1.7", "BA.5"] or "B.1.1.7,BA.5"
      */
-    @property()
-    value: string = '';
+    @property({ type: Array })
+    value: string | string[] = '';
 
     /**
      * Required.
@@ -46,6 +61,14 @@ export class LineageFilterComponent extends PreactLitAdapter {
     @property()
     lapisField = '';
 
+    /**
+     * Whether to enable multi-select mode.
+     * When true, allows selecting multiple lineages displayed as removable chips.
+     * Defaults to false.
+     */
+    @property({ type: Boolean })
+    multiSelect: boolean | undefined = false;
+
     /**
      * The filter that is used to fetch the available the autocomplete options.
      * If not set it fetches all available options.
@@ -89,6 +112,7 @@ export class LineageFilterComponent extends PreactLitAdapter {
                 value={this.value}
                 width={this.width}
                 hideCounts={this.hideCounts}
+                multiSelect={this.multiSelect}
             />
         );
     }
@@ -101,6 +125,7 @@ declare global {
 
     interface HTMLElementEventMap {
         [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
     }
 }
 
@@ -112,17 +137,3 @@ declare global {
         }
     }
 }
-
-/* eslint-disable @typescript-eslint/no-unused-vars */
-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']>
->;
-type WidthMatches = Expect<Equals<typeof LineageFilterComponent.prototype.width, LineageFilterProps['width']>>;
-/* eslint-enable @typescript-eslint/no-unused-vars */