@genspectrum/dashboard-components 1.9.2 → 1.10.1

package/custom-elements.json

@@ -596,6 +596,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/input/gs-lineage-filter.spec.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/input/gs-lineage-filter.stories.ts",
@@ -606,7 +612,7 @@
           "type": {
             "text": "Meta<Required<LineageFilterProps>>"
           },
-          "default": "{ title: 'Input/Lineage filter', component: 'gs-lineage-filter', parameters: withComponentDocs({ actions: { handles: [gsEventNames.lineageFilterChanged, ...previewHandles], }, fetchMock: { mocks: [ { matcher: { name: 'pangoLineage', url: AGGREGATED_ENDPOINT, body: { fields: ['pangoLineage'], country: 'Germany', }, }, response: { status: 200, body: aggregatedData, }, }, { matcher: { name: 'lineageDefinition', url: lineageDefinitionEndpoint(LAPIS_URL, 'pangoLineage'), }, response: { status: 200, body: lineageDefinition, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), 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', }, }, hideCounts: { control: { type: 'boolean', }, }, }, }"
+          "default": "{ title: 'Input/Lineage filter', component: 'gs-lineage-filter', parameters: withComponentDocs({ actions: { handles: [gsEventNames.lineageFilterChanged, gsEventNames.lineageFilterMultiChanged, ...previewHandles], }, fetchMock: { mocks: [ { matcher: { name: 'pangoLineage', url: AGGREGATED_ENDPOINT, body: { fields: ['pangoLineage'], country: 'Germany', }, }, response: { status: 200, body: aggregatedData, }, }, { matcher: { name: 'lineageDefinition', url: lineageDefinitionEndpoint(LAPIS_URL, 'pangoLineage'), }, response: { status: 200, body: lineageDefinition, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], argTypes: { lapisField: { control: { type: 'select', }, options: ['host'], }, placeholderText: { control: { type: 'text', }, }, value: { control: { type: 'object', }, }, width: { control: { type: 'text', }, }, lapisFilter: { control: { type: 'object', }, }, hideCounts: { control: { type: 'boolean', }, }, multiSelect: { control: { type: 'boolean', }, }, }, }"
         },
         {
           "kind": "variable",
@@ -616,6 +622,22 @@
           },
           "default": "{ ...Template, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); await waitFor(() => { return expect(canvas.getByPlaceholderText('Enter a lineage')).toBeVisible(); }); }, }"
         },
+        {
+          "kind": "variable",
+          "name": "LineageFilterStringValue",
+          "type": {
+            "text": "StoryObj<Required<LineageFilterProps>>"
+          },
+          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-(--breakpoint-lg)\"> <gs-lineage-filter lapisField=\"pangoLineage\" placeholderText=\"Enter a lineage\" value=\"B.1.1.7\" .multiSelect=${args.multiSelect} ></gs-lineage-filter> </div> </gs-app>`; }, args: { multiSelect: false, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); await waitFor(() => { return expect(canvas.getByPlaceholderText('Enter a lineage')).toBeVisible(); }); }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "LineageFilterArrayValue",
+          "type": {
+            "text": "StoryObj<Required<LineageFilterProps>>"
+          },
+          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-(--breakpoint-lg)\"> <gs-lineage-filter lapisField=\"pangoLineage\" placeholderText=\"Enter a lineage\" value='[\"B.1.1.7\", \"B.1.1.10\"]' .multiSelect=${args.multiSelect} ></gs-lineage-filter> </div> </gs-app>`; }, args: { multiSelect: true, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); await waitFor(() => { return expect(canvas.getByPlaceholderText('Enter a lineage')).toBeVisible(); }); }, }"
+        },
         {
           "kind": "variable",
           "name": "DelayToShowLoadingState",
@@ -639,6 +661,14 @@
             "text": "StoryObj<Required<LineageFilterProps>>"
           },
           "default": "{ ...LineageFilter, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a lineage'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener(gsEventNames.lineageFilterChanged, 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 userEvent.click(canvas.getByLabelText('toggle menu')); 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(), 'B.1.1.7*'); await userEvent.click(canvas.getByRole('option', { name: 'B.1.1.7*(677,146)' })); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ pangoLineage: 'B.1.1.7*', }); }); }); }, args: { ...LineageFilter.args, value: '', }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "MultiSelectMode",
+          "type": {
+            "text": "StoryObj<Required<LineageFilterProps>>"
+          },
+          "default": "{ ...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(); }); }, }"
         }
       ],
       "exports": [
@@ -658,6 +688,22 @@
             "module": "src/web-components/input/gs-lineage-filter.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "LineageFilterStringValue",
+          "declaration": {
+            "name": "LineageFilterStringValue",
+            "module": "src/web-components/input/gs-lineage-filter.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LineageFilterArrayValue",
+          "declaration": {
+            "name": "LineageFilterArrayValue",
+            "module": "src/web-components/input/gs-lineage-filter.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "DelayToShowLoadingState",
@@ -681,6 +727,14 @@
             "name": "FiresEvent",
             "module": "src/web-components/input/gs-lineage-filter.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "MultiSelectMode",
+          "declaration": {
+            "name": "MultiSelectMode",
+            "module": "src/web-components/input/gs-lineage-filter.stories.ts"
+          }
         }
       ]
     },
@@ -690,17 +744,17 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "\n## Context\n\nThis component provides a text input field to filter by lineages.\nCurrently, it is designed to work well with Pango Lineages,\nbut it may also be used for other lineage types, if suitable.\n\nIt fetches all available values of the `lapisField` from the LAPIS instance within the given `lapisFilter`\nand provides an autocomplete list with the available values of the lineage and sublineage queries\n(a `*` appended to the lineage value).",
+          "description": "## Context\n\nThis component provides a text input field to filter by lineages.\nCurrently, it is designed to work well with Pango Lineages,\nbut it may also be used for other lineage types, if suitable.\n\nIt fetches all available values of the `lapisField` from the LAPIS instance within the given `lapisFilter`\nand provides an autocomplete list with the available values of the lineage and sublineage queries\n(a `*` appended to the lineage value).\n\nWhen `multiSelect` is true, it allows selecting multiple lineages and displays them as removable chips.",
           "name": "LineageFilterComponent",
           "members": [
             {
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "string"
+                "text": "string | string[]"
               },
               "default": "''",
-              "description": "The initial value to use for this lineage filter.",
+              "description": "The initial value to use for this lineage filter.\nCan be a string for single select mode or an array of strings (or comma-separated string) for multi-select mode.\nExamples: \"B.1.1.7\" or [\"B.1.1.7\", \"BA.5\"] or \"B.1.1.7,BA.5\"",
               "attribute": "value"
             },
             {
@@ -713,6 +767,16 @@
               "description": "Required.\n\nThe LAPIS field name to use for this lineage filter.\nThe field must exist on this LAPIS instance.",
               "attribute": "lapisField"
             },
+            {
+              "kind": "field",
+              "name": "multiSelect",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "Whether to enable multi-select mode.\nWhen true, allows selecting multiple lineages displayed as removable chips.\nDefaults to false.",
+              "attribute": "multiSelect"
+            },
             {
               "kind": "field",
               "name": "lapisFilter",
@@ -759,18 +823,25 @@
               "type": {
                 "text": "CustomEvent<Record<string, string | undefined>>"
               },
-              "description": "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\" } ```",
+              "description": "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\" } ```",
               "name": "gs-lineage-filter-changed"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<Record<string, string[] | undefined>>"
+              },
+              "description": "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\"] } ```",
+              "name": "gs-lineage-filter-multi-changed"
             }
           ],
           "attributes": [
             {
               "name": "value",
               "type": {
-                "text": "string"
+                "text": "string | string[]"
               },
               "default": "''",
-              "description": "The initial value to use for this lineage filter.",
+              "description": "The initial value to use for this lineage filter.\nCan be a string for single select mode or an array of strings (or comma-separated string) for multi-select mode.\nExamples: \"B.1.1.7\" or [\"B.1.1.7\", \"BA.5\"] or \"B.1.1.7,BA.5\"",
               "fieldName": "value"
             },
             {
@@ -782,6 +853,15 @@
               "description": "Required.\n\nThe LAPIS field name to use for this lineage filter.\nThe field must exist on this LAPIS instance.",
               "fieldName": "lapisField"
             },
+            {
+              "name": "multiSelect",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "Whether to enable multi-select mode.\nWhen true, allows selecting multiple lineages displayed as removable chips.\nDefaults to false.",
+              "fieldName": "multiSelect"
+            },
             {
               "name": "lapisFilter",
               "type": {
@@ -1530,7 +1610,7 @@
           "type": {
             "text": "StoryObj<Required<TextFilterProps>>"
           },
-          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-filter'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener(gsEventNames.textFilterChanged, 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 step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); }); await step('Enter a valid host name', async () => { 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(async () => { await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo sapiens', }, }), ); }); }); await step('Remove initial value', async () => { await userEvent.click(canvas.getByRole('button', { name: 'clear selection' })); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: undefined, }, }), ); }); }, args: { ...Default.args, value: '', }, }"
+          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-filter'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener(gsEventNames.textFilterChanged, 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 step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); }); await step('Enter a valid host name', async () => { 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(async () => { await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo sapiens', }, }), ); }); }); await step('Remove initial value', async () => { await userEvent.click(canvas.getByRole('button', { name: 'clear selection' })); await waitFor(async () => { await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: undefined, }, }), ); }); }); }, args: { ...Default.args, value: '', }, }"
         }
       ],
       "exports": [

package/dist/{NumberRangeFilterChangedEvent-BnPI-Asz.js → NumberRangeFilterChangedEvent-Cdtcp9YL.js}

@@ -6,6 +6,7 @@ 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",
@@ -159,6 +160,15 @@ class LineageFilterChangedEvent extends CustomEvent {
     });
   }
 }
+class LineageMultiFilterChangedEvent extends CustomEvent {
+  constructor(detail) {
+    super(gsEventNames.lineageFilterMultiChanged, {
+      detail,
+      bubbles: true,
+      composed: true
+    });
+  }
+}
 const numberRangeSchema = z.object({
   min: z.number().optional(),
   max: z.number().optional()
@@ -196,12 +206,13 @@ export {
   lapisLocationFilterSchema as h,
   mutationTypeSchema as i,
   mutationsFilterSchema as j,
-  numberRangeSchema as k,
+  LineageMultiFilterChangedEvent as k,
   lapisFilterSchema as l,
   mutationType as m,
   namedLapisFilterSchema as n,
+  numberRangeSchema as o,
   sequenceTypeSchema as s,
   temporalGranularitySchema as t,
   views as v
 };
-//# sourceMappingURL=NumberRangeFilterChangedEvent-BnPI-Asz.js.map
+//# sourceMappingURL=NumberRangeFilterChangedEvent-Cdtcp9YL.js.map

package/dist/NumberRangeFilterChangedEvent-Cdtcp9YL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberRangeFilterChangedEvent-Cdtcp9YL.js","sources":["../src/utils/gsEventNames.ts","../src/types.ts","../src/preact/dateRangeFilter/dateConversion.ts","../src/preact/dateRangeFilter/dateRangeOption.ts","../src/preact/locationFilter/LocationChangedEvent.ts","../src/preact/textFilter/TextFilterChangedEvent.ts","../src/preact/lineageFilter/LineageFilterChangedEvent.ts","../src/preact/numberRangeFilter/NumberRangeFilterChangedEvent.ts"],"sourcesContent":["export const gsEventNames = {\n    error: 'gs-error',\n    componentFinishedLoading: 'gs-component-finished-loading',\n    dateRangeFilterChanged: 'gs-date-range-filter-changed',\n    dateRangeOptionChanged: 'gs-date-range-option-changed',\n    mutationFilterChanged: 'gs-mutation-filter-changed',\n    lineageFilterChanged: 'gs-lineage-filter-changed',\n    lineageFilterMultiChanged: 'gs-lineage-filter-multi-changed',\n    locationChanged: 'gs-location-changed',\n    textFilterChanged: 'gs-text-filter-changed',\n    numberRangeFilterChanged: 'gs-number-range-filter-changed',\n    numberRangeValueChanged: 'gs-number-range-value-changed',\n} as const;\n","import z from 'zod';\n\nimport {\n    type Deletion,\n    type DeletionClass,\n    type Insertion,\n    type InsertionClass,\n    type Substitution,\n    type SubstitutionClass,\n} from './utils/mutations';\n\nexport const mutationsFilterSchema = z.object({\n    nucleotideMutations: z.array(z.string()),\n    aminoAcidMutations: z.array(z.string()),\n    nucleotideInsertions: z.array(z.string()),\n    aminoAcidInsertions: z.array(z.string()),\n});\nexport type MutationsFilter = z.infer<typeof mutationsFilterSchema>;\n\nexport const lapisFilterSchema = z\n    .record(z.union([z.string(), z.array(z.string()), z.number(), z.null(), z.boolean(), z.undefined()]))\n    .and(mutationsFilterSchema.partial());\nexport type LapisFilter = z.infer<typeof lapisFilterSchema>;\n\nexport const namedLapisFilterSchema = z.object({\n    lapisFilter: lapisFilterSchema,\n    displayName: z.string(),\n});\nexport type NamedLapisFilter = z.infer<typeof namedLapisFilterSchema>;\n\nexport const lapisLocationFilterSchema = z.record(z.union([z.string(), z.undefined(), z.null()]));\nexport type LapisLocationFilter = z.infer<typeof lapisLocationFilterSchema>;\n\nexport const temporalGranularitySchema = z.union([\n    z.literal('day'),\n    z.literal('week'),\n    z.literal('month'),\n    z.literal('year'),\n]);\nexport type TemporalGranularity = z.infer<typeof temporalGranularitySchema>;\n\nexport const sequenceTypeSchema = z.union([z.literal('nucleotide'), z.literal('amino acid')]);\nexport type SequenceType = z.infer<typeof sequenceTypeSchema>;\n\nexport type SubstitutionOrDeletion = 'substitution' | 'deletion';\n\nexport type SubstitutionOrDeletionOrInsertion = SubstitutionOrDeletion | 'insertion';\n\nexport type SubstitutionEntry<T extends Substitution = SubstitutionClass> = {\n    type: 'substitution';\n    mutation: T;\n    count: number;\n    proportion: number;\n};\n\nexport type DeletionEntry<T extends Deletion = DeletionClass> = {\n    type: 'deletion';\n    mutation: T;\n    count: number;\n    proportion: number;\n};\n\nexport type InsertionEntry<T extends Insertion = InsertionClass> = { type: 'insertion'; mutation: T; count: number };\n\nexport type SubstitutionOrDeletionEntry<\n    S extends Substitution = SubstitutionClass,\n    D extends Deletion = DeletionClass,\n> = SubstitutionEntry<S> | DeletionEntry<D>;\n\nexport type MutationEntry = SubstitutionEntry | DeletionEntry | InsertionEntry;\n\nexport const views = {\n    table: 'table',\n    venn: 'venn',\n    grid: 'grid',\n    insertions: 'insertions',\n    bar: 'bar',\n    line: 'line',\n    bubble: 'bubble',\n    map: 'map',\n} as const;\n\nexport const mutationType = {\n    nucleotideMutations: 'nucleotideMutations',\n    nucleotideInsertions: 'nucleotideInsertions',\n    aminoAcidMutations: 'aminoAcidMutations',\n    aminoAcidInsertions: 'aminoAcidInsertions',\n} as const;\n\nexport const mutationTypeSchema = z.enum([\n    mutationType.nucleotideMutations,\n    mutationType.nucleotideInsertions,\n    mutationType.aminoAcidMutations,\n    mutationType.aminoAcidInsertions,\n]);\n\nexport type MutationType = z.infer<typeof mutationTypeSchema>;\n","export const toYYYYMMDD = (date: Date) => {\n    const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };\n    return date.toLocaleDateString('en-CA', options);\n};\n","import z from 'zod';\n\nimport { toYYYYMMDD } from './dateConversion';\nimport { gsEventNames } from '../../utils/gsEventNames';\n\n/**\n * A date range option that can be used in the `gs-date-range-filter` component.\n */\nexport const dateRangeOptionSchema = z.object({\n    /** The label of the date range option that will be shown to the user */\n    label: z.string(),\n    /**\n     * The start date of the date range in the format `YYYY-MM-DD`.\n     */\n    dateFrom: z.string().date().optional(),\n    /**\n     * The end date of the date range in the format `YYYY-MM-DD`.\n     */\n    dateTo: z.string().date().optional(),\n});\n\nexport type DateRangeOption = z.infer<typeof dateRangeOptionSchema>;\n\nexport const dateRangeValueSchema = z\n    .union([\n        z.string(),\n        z.object({\n            dateFrom: z.string().date().optional(),\n            dateTo: z.string().date().optional(),\n        }),\n    ])\n    .nullable();\n\nexport type DateRangeValue = z.infer<typeof dateRangeValueSchema>;\n\nexport class DateRangeOptionChangedEvent extends CustomEvent<DateRangeValue> {\n    constructor(detail: DateRangeValue) {\n        super(gsEventNames.dateRangeOptionChanged, {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n\ntype DateRangeOptionPresets = {\n    last2Weeks: DateRangeOption;\n    lastMonth: DateRangeOption;\n    last2Months: DateRangeOption;\n    last3Months: DateRangeOption;\n    last6Months: DateRangeOption;\n    lastYear: DateRangeOption;\n};\n\nlet dateRangeOptionsPresetsCacheDate: string | null = null;\nlet dateRangeOptionPresetsCache: DateRangeOptionPresets | null = null;\n\n/**\n * Presets for the `gs-date-range-filter` component that can be used as `dateRangeOptions`.\n */\nexport const dateRangeOptionPresets = (): DateRangeOptionPresets => {\n    const today = new Date();\n    const todayString = new Date().toISOString().slice(0, 10);\n\n    if (\n        dateRangeOptionPresetsCache === null ||\n        dateRangeOptionsPresetsCacheDate === null ||\n        dateRangeOptionsPresetsCacheDate !== todayString\n    ) {\n        dateRangeOptionsPresetsCacheDate = todayString;\n\n        const twoWeeksAgo = new Date();\n        twoWeeksAgo.setDate(today.getDate() - 14);\n\n        const lastMonth = new Date(today);\n        lastMonth.setMonth(today.getMonth() - 1);\n\n        const last2Months = new Date(today);\n        last2Months.setMonth(today.getMonth() - 2);\n\n        const last3Months = new Date(today);\n        last3Months.setMonth(today.getMonth() - 3);\n\n        const last6Months = new Date(today);\n        last6Months.setMonth(today.getMonth() - 6);\n\n        const lastYear = new Date(today);\n        lastYear.setFullYear(today.getFullYear() - 1);\n\n        dateRangeOptionPresetsCache = {\n            last2Weeks: {\n                label: 'Last 2 weeks',\n                dateFrom: toYYYYMMDD(twoWeeksAgo),\n            },\n            lastMonth: {\n                label: 'Last month',\n                dateFrom: toYYYYMMDD(lastMonth),\n            },\n            last2Months: {\n                label: 'Last 2 months',\n                dateFrom: toYYYYMMDD(last2Months),\n            },\n            last3Months: {\n                label: 'Last 3 months',\n                dateFrom: toYYYYMMDD(last3Months),\n            },\n            last6Months: {\n                label: 'Last 6 months',\n                dateFrom: toYYYYMMDD(last6Months),\n            },\n            lastYear: {\n                label: 'Last year',\n                dateFrom: toYYYYMMDD(lastYear),\n            },\n        };\n    }\n\n    return dateRangeOptionPresetsCache;\n};\n","import { type LapisLocationFilter } from '../../types';\nimport { gsEventNames } from '../../utils/gsEventNames';\n\nexport class LocationChangedEvent extends CustomEvent<LapisLocationFilter> {\n    constructor(detail: LapisLocationFilter) {\n        super(gsEventNames.locationChanged, {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n","import { gsEventNames } from '../../utils/gsEventNames';\n\ntype LapisTextFilter = Record<string, string | undefined>;\n\nexport class TextFilterChangedEvent extends CustomEvent<LapisTextFilter> {\n    constructor(detail: LapisTextFilter) {\n        super(gsEventNames.textFilterChanged, {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n","import { gsEventNames } from '../../utils/gsEventNames';\n\ntype LapisLineageFilter = Record<string, string | undefined>;\ntype LapisLineageMultiFilter = Record<string, string[] | undefined>;\n\nexport class LineageFilterChangedEvent extends CustomEvent<LapisLineageFilter> {\n    constructor(detail: LapisLineageFilter) {\n        super(gsEventNames.lineageFilterChanged, {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n\nexport class LineageMultiFilterChangedEvent extends CustomEvent<LapisLineageMultiFilter> {\n    constructor(detail: LapisLineageMultiFilter) {\n        super(gsEventNames.lineageFilterMultiChanged, {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n","import z from 'zod';\n\nimport { gsEventNames } from '../../utils/gsEventNames';\n\nexport type LapisNumberFilter = Record<string, number | undefined>;\n\nexport const numberRangeSchema = z.object({\n    min: z.number().optional(),\n    max: z.number().optional(),\n});\nexport type NumberRange = z.infer<typeof numberRangeSchema>;\n\nexport class NumberRangeValueChangedEvent extends CustomEvent<NumberRange> {\n    constructor(detail: NumberRange) {\n        super(gsEventNames.numberRangeValueChanged, {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n\nexport class NumberRangeFilterChangedEvent extends CustomEvent<LapisNumberFilter> {\n    constructor(detail: LapisNumberFilter) {\n        super(gsEventNames.numberRangeFilterChanged, {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n"],"names":[],"mappings":"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"}

package/dist/components.d.ts

@@ -275,7 +275,6 @@ export declare class GenomeDataViewerComponent extends PreactLitAdapter {
 }
 
 /**
- *
  * ## Context
  *
  * This component provides a text input field to filter by lineages.
@@ -286,21 +285,35 @@ export declare class GenomeDataViewerComponent extends 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"]
+ * }
+ * ```
  */
 export declare 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"
      */
-    value: string;
+    value: string | string[];
     /**
      * Required.
      *
@@ -308,6 +321,12 @@ export declare class LineageFilterComponent extends PreactLitAdapter {
      * The field must exist on this LAPIS instance.
      */
     lapisField: string;
+    /**
+     * Whether to enable multi-select mode.
+     * When true, allows selecting multiple lineages displayed as removable chips.
+     * Defaults to false.
+     */
+    multiSelect: boolean | undefined;
     /**
      * The filter that is used to fetch the available the autocomplete options.
      * If not set it fetches all available options.
@@ -334,6 +353,7 @@ export declare class LineageFilterComponent extends PreactLitAdapter {
      * Defaults to false.
      */
     hideCounts: boolean | undefined;
+    updated(changedProps: Map<string, unknown>): void;
     render(): JSX_2.Element;
 }
 
@@ -1651,22 +1671,6 @@ declare global {
 }
 
 
-declare global {
-    interface HTMLElementTagNameMap {
-        'gs-genome-data-viewer': GenomeDataViewerComponent;
-    }
-}
-
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-        }
-    }
-}
-
-
 declare global {
     interface HTMLElementTagNameMap {
         'gs-mutation-comparison-component': MutationComparisonComponent;
@@ -1765,7 +1769,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-sequences-by-location': SequencesByLocationComponent;
     }
 }
 
@@ -1773,7 +1777,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1781,7 +1785,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-sequences-by-location': SequencesByLocationComponent;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1789,7 +1793,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-sequences-by-location': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1797,7 +1801,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-genome-data-viewer': GenomeDataViewerComponent;
     }
 }
 
@@ -1805,7 +1809,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-genome-data-viewer': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1813,7 +1817,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1821,7 +1825,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1904,12 +1908,33 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-number-range-filter': NumberRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
         [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.lineageFilterMultiChanged]: LineageMultiFilterChangedEvent;
     }
 }
 
@@ -1925,11 +1950,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-range-filter': NumberRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
-        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1937,7 +1958,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }