@genspectrum/dashboard-components 0.12.1 → 0.13.1

package/custom-elements.json

@@ -270,6 +270,14 @@
             "package": "./visualization"
           }
         },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./wastewaterVisualization"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -534,15 +542,31 @@
           "type": {
             "text": "Meta<Required<LineageFilterProps>>"
           },
-          "default": "{ title: 'Input/Lineage filter', component: 'gs-lineage-filter', parameters: withComponentDocs({ actions: { handles: ['gs-lineage-filter-changed', ...previewHandles], }, fetchMock: { mocks: [ { matcher: { name: 'pangoLineage', url: AGGREGATED_ENDPOINT, body: { fields: ['pangoLineage'], }, }, response: { status: 200, body: aggregatedData, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Input/Lineage filter', component: 'gs-lineage-filter', parameters: withComponentDocs({ actions: { handles: ['gs-lineage-filter-changed', ...previewHandles], }, fetchMock: { mocks: [ { matcher: { name: 'pangoLineage', url: AGGREGATED_ENDPOINT, body: { fields: ['pangoLineage'], country: 'Germany', }, }, response: { status: 200, body: aggregatedData, }, }, ], }, 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', }, }, }, }"
         },
         {
           "kind": "variable",
-          "name": "Default",
+          "name": "LineageFilter",
+          "type": {
+            "text": "StoryObj<Required<LineageFilterProps>>"
+          },
+          "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": "DelayToShowLoadingState",
+          "type": {
+            "text": "StoryObj<Required<LineageFilterProps>>"
+          },
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: aggregatedData, }, options: { delay: 5000, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "FetchingLocationsFails",
           "type": {
             "text": "StoryObj<Required<LineageFilterProps>>"
           },
-          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-lineage-filter .lapisField=${args.lapisField} .placeholderText=${args.placeholderText} .initialValue=${args.initialValue} .width=${args.width} ></gs-lineage-filter> </div> </gs-app>`; }, args: { lapisField: 'pangoLineage', placeholderText: 'Enter lineage', initialValue: 'B.1.1.7', width: '100%', }, }"
+          "default": "{ ...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(), ); }, }"
         },
         {
           "kind": "variable",
@@ -550,7 +574,7 @@
           "type": {
             "text": "StoryObj<Required<LineageFilterProps>>"
           },
-          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); const inputField = () => canvas.getByPlaceholderText('Enter lineage'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-lineage-filter-changed', 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 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 expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { pangoLineage: 'B.1.1.7', }, }), ); }); await step('Enter a valid lineage value', async () => { await userEvent.type(inputField(), '{backspace>9/}'); await userEvent.type(inputField(), 'B.1.1.7*'); await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { pangoLineage: 'B.1.1.7*', }, }), ); }); }, args: { ...Default.args, initialValue: '', }, }"
+          "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', async () => { canvasElement.addEventListener('gs-lineage-filter-changed', 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*' })); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ pangoLineage: 'B.1.1.7*', }); }); }); }, args: { ...LineageFilter.args, value: '', }, }"
         }
       ],
       "exports": [
@@ -564,9 +588,25 @@
         },
         {
           "kind": "js",
-          "name": "Default",
+          "name": "LineageFilter",
           "declaration": {
-            "name": "Default",
+            "name": "LineageFilter",
+            "module": "src/web-components/input/gs-lineage-filter.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DelayToShowLoadingState",
+          "declaration": {
+            "name": "DelayToShowLoadingState",
+            "module": "src/web-components/input/gs-lineage-filter.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FetchingLocationsFails",
+          "declaration": {
+            "name": "FetchingLocationsFails",
             "module": "src/web-components/input/gs-lineage-filter.stories.ts"
           }
         },
@@ -586,18 +626,18 @@
       "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\nand provides an autocomplete list with the available values of the lineage and sublineage queries\n(a `*` appended to the lineage value).",
+          "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).",
           "name": "LineageFilterComponent",
           "members": [
             {
               "kind": "field",
-              "name": "initialValue",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The initial value to use for this lineage filter.",
-              "attribute": "initialValue"
+              "attribute": "value"
             },
             {
               "kind": "field",
@@ -609,6 +649,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": "lapisFilter",
+              "type": {
+                "text": "Record<string, string | string[] | number | null | boolean | undefined> & {\n        nucleotideMutations?: string[];\n        aminoAcidMutations?: string[];\n        nucleotideInsertions?: string[];\n        aminoAcidInsertions?: string[];\n    }"
+              },
+              "default": "{}",
+              "description": "The filter that is used to fetch the available the autocomplete options.\nIf not set it fetches all available options.\nIt must be a valid LAPIS filter object.",
+              "attribute": "lapisFilter"
+            },
             {
               "kind": "field",
               "name": "placeholderText",
@@ -633,7 +683,7 @@
           "events": [
             {
               "type": {
-                "text": "CustomEvent<Record<string, string>>"
+                "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\" } ```",
               "name": "gs-lineage-filter-changed"
@@ -641,13 +691,13 @@
           ],
           "attributes": [
             {
-              "name": "initialValue",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The initial value to use for this lineage filter.",
-              "fieldName": "initialValue"
+              "fieldName": "value"
             },
             {
               "name": "lapisField",
@@ -658,6 +708,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": "lapisFilter",
+              "type": {
+                "text": "Record<string, string | string[] | number | null | boolean | undefined> & {\n        nucleotideMutations?: string[];\n        aminoAcidMutations?: string[];\n        nucleotideInsertions?: string[];\n        aminoAcidInsertions?: string[];\n    }"
+              },
+              "default": "{}",
+              "description": "The filter that is used to fetch the available the autocomplete options.\nIf not set it fetches all available options.\nIt must be a valid LAPIS filter object.",
+              "fieldName": "lapisFilter"
+            },
             {
               "name": "placeholderText",
               "type": {
@@ -714,7 +773,7 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Input/Location filter', component: 'gs-location-filter', parameters: withComponentDocs({ actions: { handles: ['gs-location-changed', ...previewHandles], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { fields: { control: { type: 'object', }, }, value: { control: { type: 'object', }, }, width: { control: { type: 'text', }, }, placeholderText: { control: { type: 'text', }, }, }, tags: ['autodocs'], }"
+          "default": "{ title: 'Input/Location filter', component: 'gs-location-filter', parameters: withComponentDocs({ actions: { handles: ['gs-location-changed', ...previewHandles], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { fields: { control: { type: 'object', }, }, value: { control: { type: 'object', }, }, width: { control: { type: 'text', }, }, placeholderText: { control: { type: 'text', }, }, lapisFilter: { age: 18, }, }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -798,14 +857,14 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\n\nThis component provides an input field to specify filters for locations.\n\nIt expects a list of fields that form a strict hierarchical order, such as continent, country, and city.\nThe component retrieves a list of all possible values for these fields from the Lapis instance.\nThis list is then utilized to display autocomplete suggestions and to validate the input.",
+          "description": "## Context\n\nThis component provides an input field to specify filters for locations.\n\nIt expects a list of fields that form a strict hierarchical order, such as continent, country, and city.\nThe component retrieves a list of all possible values for these fields from the Lapis instance,\nwithin the `lapisFilter`.\nThis list is then utilized to display autocomplete suggestions and to validate the input.",
           "name": "LocationFilterComponent",
           "members": [
             {
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "Record<string, string | null | undefined> | undefined"
+                "text": "Record<string, string | undefined> | undefined"
               },
               "default": "undefined",
               "description": "The initial value to use for this location filter.",
@@ -821,6 +880,16 @@
               "description": "Required.\n\nThe fields to display in the location filter, in hierarchical order.\nThe top-level field should be the first entry in the array.\nThis component assumes that the values for each field form a strict hierarchy\n(e.g., `fields = ['continent', 'country', 'city']`).",
               "attribute": "fields"
             },
+            {
+              "kind": "field",
+              "name": "lapisFilter",
+              "type": {
+                "text": "Record<string, string | string[] | number | null | boolean | undefined> & {\n        nucleotideMutations?: string[];\n        aminoAcidMutations?: string[];\n        nucleotideInsertions?: string[];\n        aminoAcidInsertions?: string[];\n    }"
+              },
+              "default": "{}",
+              "description": "The filter that is used to fetch the available the autocomplete options.\nIf not set it fetches all available options.\nIt must be a valid LAPIS filter object.",
+              "attribute": "lapisFilter"
+            },
             {
               "kind": "field",
               "name": "width",
@@ -845,7 +914,7 @@
           "events": [
             {
               "type": {
-                "text": "CustomEvent<Record<string, string>>"
+                "text": "CustomEvent<Record<string, string | undefined>>"
               },
               "description": "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`. Example: ``` { continent: \"Asia\", country: \"China\", city: \"Beijing\", district: undefined, } ```",
               "name": "gs-location-changed"
@@ -855,7 +924,7 @@
             {
               "name": "value",
               "type": {
-                "text": "Record<string, string | null | undefined> | undefined"
+                "text": "Record<string, string | undefined> | undefined"
               },
               "default": "undefined",
               "description": "The initial value to use for this location filter.",
@@ -870,6 +939,15 @@
               "description": "Required.\n\nThe fields to display in the location filter, in hierarchical order.\nThe top-level field should be the first entry in the array.\nThis component assumes that the values for each field form a strict hierarchy\n(e.g., `fields = ['continent', 'country', 'city']`).",
               "fieldName": "fields"
             },
+            {
+              "name": "lapisFilter",
+              "type": {
+                "text": "Record<string, string | string[] | number | null | boolean | undefined> & {\n        nucleotideMutations?: string[];\n        aminoAcidMutations?: string[];\n        nucleotideInsertions?: string[];\n        aminoAcidInsertions?: string[];\n    }"
+              },
+              "default": "{}",
+              "description": "The filter that is used to fetch the available the autocomplete options.\nIf not set it fetches all available options.\nIt must be a valid LAPIS filter object.",
+              "fieldName": "lapisFilter"
+            },
             {
               "name": "width",
               "type": {
@@ -1084,7 +1162,7 @@
           "type": {
             "text": "Meta<Required<TextInputProps>>"
           },
-          "default": "{ title: 'Input/Text input', component: 'gs-text-input', parameters: withComponentDocs({ actions: { handles: ['gs-text-input-changed', ...previewHandles], }, fetchMock: { mocks: [ { matcher: { name: 'hosts', url: AGGREGATED_ENDPOINT, body: { fields: ['host'], }, }, response: { status: 200, body: data, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { lapisField: { control: { type: 'text', }, }, placeholderText: { control: { type: 'text', }, }, initialValue: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, tags: ['autodocs'], }"
+          "default": "{ title: 'Input/Text input', component: 'gs-text-input', parameters: withComponentDocs({ actions: { handles: ['gs-text-input-changed', ...previewHandles], }, fetchMock: { mocks: [ { matcher: { name: 'hosts', url: AGGREGATED_ENDPOINT, body: { fields: ['host'], country: 'Germany', }, }, response: { status: 200, body: data, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { lapisField: { control: { type: 'text', }, }, placeholderText: { control: { type: 'text', }, }, value: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, lapisFilter: { control: { type: 'object', }, }, }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1092,7 +1170,7 @@
           "type": {
             "text": "StoryObj<Required<TextInputProps>>"
           },
-          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-text-input .lapisField=${args.lapisField} .placeholderText=${args.placeholderText} .initialValue=${args.initialValue} .width=${args.width} ></gs-text-input> </div> </gs-app>`; }, args: { lapisField: 'host', placeholderText: 'Enter host name', initialValue: 'Homo sapiens', width: '100%', }, }"
+          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-text-input .lapisField=${args.lapisField} .lapisFilter=${args.lapisFilter} .placeholderText=${args.placeholderText} .value=${args.value} .width=${args.width} ></gs-text-input> </div> </gs-app>`; }, args: { lapisField: 'host', lapisFilter: { country: 'Germany' }, placeholderText: 'Enter host name', value: 'Homo sapiens', width: '100%', }, }"
         },
         {
           "kind": "variable",
@@ -1100,7 +1178,7 @@
           "type": {
             "text": "StoryObj<Required<TextInputProps>>"
           },
-          "default": "{ ...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 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(() => { 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: undefined, }, }), ); }); await step('Empty input', async () => { inputField().blur(); await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ host: undefined, }); }); }, args: { ...Default.args, initialValue: '', }, }"
+          "default": "{ ...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 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(() => { 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: undefined, }, }), ); }); await step('Empty input', async () => { inputField().blur(); await expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ host: undefined, }); }); }, args: { ...Default.args, value: '', }, }"
         }
       ],
       "exports": [
@@ -1141,13 +1219,13 @@
           "members": [
             {
               "kind": "field",
-              "name": "initialValue",
+              "name": "value",
               "type": {
                 "text": "string | undefined"
               },
               "default": "undefined",
               "description": "The initial value to use for this text input.",
-              "attribute": "initialValue"
+              "attribute": "value"
             },
             {
               "kind": "field",
@@ -1159,6 +1237,16 @@
               "description": "Required.\n\nThe LAPIS field name to use for this text input.\nThe field must exist on this LAPIS instance.",
               "attribute": "lapisField"
             },
+            {
+              "kind": "field",
+              "name": "lapisFilter",
+              "type": {
+                "text": "Record<string, string | string[] | number | null | boolean | undefined> & {\n        nucleotideMutations?: string[];\n        aminoAcidMutations?: string[];\n        nucleotideInsertions?: string[];\n        aminoAcidInsertions?: string[];\n    }"
+              },
+              "default": "{}",
+              "description": "The filter that is used to fetch the available the autocomplete options.\nIf not set it fetches all available options.\nIt must be a valid LAPIS filter object.",
+              "attribute": "lapisFilter"
+            },
             {
               "kind": "field",
               "name": "placeholderText",
@@ -1183,7 +1271,7 @@
           "events": [
             {
               "type": {
-                "text": "CustomEvent<Record<string, string>>"
+                "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: ``` { \"host\": \"Homo sapiens\" } ```",
               "name": "gs-text-input-changed"
@@ -1191,13 +1279,13 @@
           ],
           "attributes": [
             {
-              "name": "initialValue",
+              "name": "value",
               "type": {
                 "text": "string | undefined"
               },
               "default": "undefined",
               "description": "The initial value to use for this text input.",
-              "fieldName": "initialValue"
+              "fieldName": "value"
             },
             {
               "name": "lapisField",
@@ -1208,6 +1296,15 @@
               "description": "Required.\n\nThe LAPIS field name to use for this text input.\nThe field must exist on this LAPIS instance.",
               "fieldName": "lapisField"
             },
+            {
+              "name": "lapisFilter",
+              "type": {
+                "text": "Record<string, string | string[] | number | null | boolean | undefined> & {\n        nucleotideMutations?: string[];\n        aminoAcidMutations?: string[];\n        nucleotideInsertions?: string[];\n        aminoAcidInsertions?: string[];\n    }"
+              },
+              "default": "{}",
+              "description": "The filter that is used to fetch the available the autocomplete options.\nIf not set it fetches all available options.\nIt must be a valid LAPIS filter object.",
+              "fieldName": "lapisFilter"
+            },
             {
               "name": "placeholderText",
               "type": {
@@ -3856,6 +3953,176 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta<Required<WastewaterMutationsOverTimeProps>>"
+          },
+          "default": "{ title: 'Wastewater visualization/Wastewater mutations over time', component: 'gs-wastewater-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, width: { control: 'text' }, height: { control: 'text' }, }, args: { lapisFilter: { versionStatus: 'LATEST_VERSION', isRevocation: false }, sequenceType: 'nucleotide', width: '100%', height: '700px', }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
+        },
+        {
+          "kind": "variable",
+          "name": "WastewaterMutationsOverTime",
+          "type": {
+            "text": "StoryObj<Required<WastewaterMutationsOverTimeProps>>"
+          },
+          "default": "{ render: (args) => html` <gs-app lapis=\"${WISE_LAPIS_URL}\"> <gs-wastewater-mutations-over-time .lapisFilter=${args.lapisFilter} .sequenceType=${args.sequenceType} .width=${args.width} .height=${args.height} ></gs-wastewater-mutations-over-time> </gs-app> `, parameters: { fetchMock: { mocks: [ { matcher: { name: 'details', url: WISE_DETAILS_ENDPOINT, body: { fields: ['date', 'location', 'nucleotideMutationFrequency', 'aminoAcidMutationFrequency'], versionStatus: 'LATEST_VERSION', isRevocation: false, }, }, response: { status: 200, body: details, }, }, ], }, }, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WastewaterMutationsOverTime",
+          "declaration": {
+            "name": "WastewaterMutationsOverTime",
+            "module": "src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "## Context\n\nThis component displays mutations for Swiss wastewater data generated within the WISE consortium. It is designed\nonly for this purpose and is not designed to be reused outside the WISE project.\n\nIt relies on a LAPIS instance that has the fields `nucleotideMutationFrequency` and `aminoAcidMutationFrequency`.\nThose fields are expected to be JSON strings of the format `{ [mutation]: frequency | null }`\n(e.g. `{ \"A123T\": 0.5, \"C456G\": 0.7, \"T789G\": null }`).\n\nThe component will stratify by `location`.\nEvery location will be rendered in a separate tab.\nThe content of the tab is a \"mutations over time\" grid, similar to the one used in the `gs-mutations-over-time` component.\n\nThis component also assumes that the LAPIS instance has the field `date` which can be used for the time axis.",
+          "name": "WastewaterMutationsOverTimeComponent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "lapisFilter",
+              "type": {
+                "text": "Record<string, string | string[] | number | null | boolean | undefined> & {\n        nucleotideMutations?: string[];\n        aminoAcidMutations?: string[];\n        nucleotideInsertions?: string[];\n        aminoAcidInsertions?: string[];\n    }"
+              },
+              "default": "{}",
+              "description": "Required.\n\nLAPIS filter to select the displayed data.",
+              "attribute": "lapisFilter"
+            },
+            {
+              "kind": "field",
+              "name": "sequenceType",
+              "type": {
+                "text": "'nucleotide' | 'amino acid'"
+              },
+              "default": "'nucleotide'",
+              "description": "Required.\n\nWhether to display nucleotide or amino acid mutations.",
+              "attribute": "sequenceType"
+            },
+            {
+              "kind": "field",
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "width"
+            },
+            {
+              "kind": "field",
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "default": "'700px'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "height"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "lapisFilter",
+              "type": {
+                "text": "Record<string, string | string[] | number | null | boolean | undefined> & {\n        nucleotideMutations?: string[];\n        aminoAcidMutations?: string[];\n        nucleotideInsertions?: string[];\n        aminoAcidInsertions?: string[];\n    }"
+              },
+              "default": "{}",
+              "description": "Required.\n\nLAPIS filter to select the displayed data.",
+              "fieldName": "lapisFilter"
+            },
+            {
+              "name": "sequenceType",
+              "type": {
+                "text": "'nucleotide' | 'amino acid'"
+              },
+              "default": "'nucleotide'",
+              "description": "Required.\n\nWhether to display nucleotide or amino acid mutations.",
+              "fieldName": "sequenceType"
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "width"
+            },
+            {
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "default": "'700px'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "height"
+            }
+          ],
+          "superclass": {
+            "name": "PreactLitAdapterWithGridJsStyles",
+            "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
+          },
+          "tagName": "gs-wastewater-mutations-over-time",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "WastewaterMutationsOverTimeComponent",
+          "declaration": {
+            "name": "WastewaterMutationsOverTimeComponent",
+            "module": "src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "gs-wastewater-mutations-over-time",
+          "declaration": {
+            "name": "WastewaterMutationsOverTimeComponent",
+            "module": "src/web-components/wastewaterVisualization/gs-wastewater-mutations-over-time.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/wastewaterVisualization/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "WastewaterMutationsOverTimeComponent",
+          "declaration": {
+            "name": "WastewaterMutationsOverTimeComponent",
+            "module": "./gs-wastewater-mutations-over-time"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/withinShadowRoot.story.ts",

package/dist/{LocationChangedEvent-CORvQvXv.js → LineageFilterChangedEvent-GedKNGFI.js}

@@ -10,6 +10,7 @@ const namedLapisFilterSchema = z.object({
   lapisFilter: lapisFilterSchema,
   displayName: z.string()
 });
+const lapisLocationFilterSchema = z.record(z.union([z.string(), z.undefined()]));
 const temporalGranularitySchema = z.union([
   z.literal("day"),
   z.literal("week"),
@@ -105,12 +106,33 @@ class LocationChangedEvent extends CustomEvent {
     });
   }
 }
+class TextInputChangedEvent extends CustomEvent {
+  constructor(detail) {
+    super("gs-text-input-changed", {
+      detail,
+      bubbles: true,
+      composed: true
+    });
+  }
+}
+class LineageFilterChangedEvent extends CustomEvent {
+  constructor(detail) {
+    super("gs-lineage-filter-changed", {
+      detail,
+      bubbles: true,
+      composed: true
+    });
+  }
+}
 export {
   DateRangeOptionChangedEvent as D,
   LocationChangedEvent as L,
-  dateRangeOptionSchema as a,
-  toYYYYMMDD as b,
+  TextInputChangedEvent as T,
+  LineageFilterChangedEvent as a,
+  dateRangeOptionSchema as b,
+  toYYYYMMDD as c,
   dateRangeOptionPresets as d,
+  lapisLocationFilterSchema as e,
   lapisFilterSchema as l,
   mutationsFilterSchema as m,
   namedLapisFilterSchema as n,
@@ -118,4 +140,4 @@ export {
   temporalGranularitySchema as t,
   views as v
 };
-//# sourceMappingURL=LocationChangedEvent-CORvQvXv.js.map
+//# sourceMappingURL=LineageFilterChangedEvent-GedKNGFI.js.map

package/dist/LineageFilterChangedEvent-GedKNGFI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineageFilterChangedEvent-GedKNGFI.js","sources":["../src/types.ts","../src/preact/dateRangeSelector/dateConversion.ts","../src/preact/dateRangeSelector/dateRangeOption.ts","../src/preact/locationFilter/LocationChangedEvent.ts","../src/preact/textInput/TextInputChangedEvent.ts","../src/preact/lineageFilter/LineageFilterChangedEvent.ts"],"sourcesContent":["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()]));\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 MutationType = 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","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';\n\n/**\n * A date range option that can be used in the `gs-date-range-selector` 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     * If not set, the date range selector will default to the `earliestDate` property.\n     */\n    dateFrom: z.string().date().optional(),\n    /**\n     * The end date of the date range in the format `YYYY-MM-DD`.\n     * If not set, the date range selector will default to the current date.\n     */\n    dateTo: z.string().date().optional(),\n});\n\nexport type DateRangeOption = z.infer<typeof dateRangeOptionSchema>;\n\nexport type DateRangeSelectOption = string | { dateFrom: string; dateTo: string };\n\nexport class DateRangeOptionChangedEvent extends CustomEvent<DateRangeSelectOption> {\n    constructor(detail: DateRangeSelectOption) {\n        super('gs-date-range-option-changed', {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n\nconst today = new Date();\n\nconst twoWeeksAgo = new Date();\ntwoWeeksAgo.setDate(today.getDate() - 14);\n\nconst lastMonth = new Date(today);\nlastMonth.setMonth(today.getMonth() - 1);\n\nconst last2Months = new Date(today);\nlast2Months.setMonth(today.getMonth() - 2);\n\nconst last3Months = new Date(today);\nlast3Months.setMonth(today.getMonth() - 3);\n\nconst last6Months = new Date(today);\nlast6Months.setMonth(today.getMonth() - 6);\n\nconst lastYear = new Date(today);\nlastYear.setFullYear(today.getFullYear() - 1);\n\n/**\n * Presets for the `gs-date-range-selector` component that can be used as `dateRangeOptions`.\n */\nexport const dateRangeOptionPresets = {\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    allTimes: {\n        label: 'All times',\n    },\n} satisfies Record<string, DateRangeOption>;\n","import { type LapisLocationFilter } from '../../types';\n\nexport class LocationChangedEvent extends CustomEvent<LapisLocationFilter> {\n    constructor(detail: LapisLocationFilter) {\n        super('gs-location-changed', {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n","type LapisTextFilter = Record<string, string | undefined>;\n\nexport class TextInputChangedEvent extends CustomEvent<LapisTextFilter> {\n    constructor(detail: LapisTextFilter) {\n        super('gs-text-input-changed', {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n","type LapisLineageFilter = Record<string, string | undefined>;\n\nexport class LineageFilterChangedEvent extends CustomEvent<LapisLineageFilter> {\n    constructor(detail: LapisLineageFilter) {\n        super('gs-lineage-filter-changed', {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n"],"names":[],"mappings":"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"}