@genspectrum/dashboard-components 0.14.1 → 0.15.0

package/custom-elements.json

@@ -84,7 +84,7 @@
           "type": {
             "text": "StoryObj<{ lapis: string }>"
           },
-          "default": "{ ...Template, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(() => { expect(canvas.getByText(LAPIS_URL)).toBeVisible(); expect(canvas.getByText('\"name\": \"ORF1a\",', { exact: false })).toBeVisible(); }); }, }"
+          "default": "{ ...Template, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(async () => { await expect(canvas.getByText(LAPIS_URL)).toBeVisible(); await expect(canvas.getByText('\"name\": \"ORF1a\",', { exact: false })).toBeVisible(); }); }, }"
         },
         {
           "kind": "variable",
@@ -92,7 +92,7 @@
           "type": {
             "text": "StoryObj<{ lapis: string }>"
           },
-          "default": "{ ...Default, args: { ...Default.args, lapis: 'notAValidUrl', }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(() => { expect(canvas.getByText(\"Error: Invalid LAPIS URL: 'notAValidUrl'\", { exact: false })).toBeVisible(); }); }, }"
+          "default": "{ ...Default, args: { ...Default.args, lapis: 'notAValidUrl', }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(async () => { await expect(canvas.getByText(\"Error: Invalid LAPIS URL: 'notAValidUrl'\", { exact: false })).toBeVisible(); }); }, }"
         },
         {
           "kind": "variable",
@@ -108,7 +108,7 @@
           "type": {
             "text": "StoryObj<{ lapis: string }>"
           },
-          "default": "{ ...Template, args: { lapis: 'https://url.to.lapis-definitely-not-a-valid-url', }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(() => { expect(canvas.getByText('Error: Cannot fetch reference genome.', { exact: false })).toBeVisible(); }); }, }"
+          "default": "{ ...Template, args: { lapis: 'https://url.to.lapis-definitely-not-a-valid-url', }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(async () => { await expect(canvas.getByText('Error: Cannot fetch reference genome.', { exact: false })).toBeVisible(); }); }, }"
         },
         {
           "kind": "class",
@@ -290,31 +290,47 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/gs-date-range-selector.stories.ts",
+      "path": "src/web-components/input/gs-date-range-filter.stories.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<Required<DateRangeSelectorProps>>"
+            "text": "Meta<Required<DateRangeFilterProps>>"
           },
-          "default": "{ title: 'Input/DateRangeSelector', component: 'gs-date-range-selector', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { value: { control: { type: 'object', }, }, lapisDateField: { control: { type: 'text' } }, dateRangeOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { dateRangeOptions: [ dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.last3Months, dateRangeOptionPresets.allTimes, customDateRange, ], earliestDate: '1970-01-01', value: dateRangeOptionPresets.lastMonth.label, lapisDateField: 'aDateColumn', width: '100%', }, tags: ['autodocs'], }"
+          "default": "{ title: 'Input/DateRangeFilter', component: 'gs-date-range-filter', parameters: withComponentDocs({ actions: { handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { value: { control: { type: 'object', }, }, lapisDateField: { control: { type: 'text' } }, dateRangeOptions: { control: { type: 'object', }, }, earliestDate: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, }, args: { dateRangeOptions: [ dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.last3Months, dateRangeOptionPresets.allTimes, { label: '2021', dateFrom: '2021-01-01', dateTo: '2021-12-31' }, customDateRange, ], earliestDate: '1970-01-01', value: dateRangeOptionPresets.lastMonth.label, lapisDateField: 'aDateColumn', width: '100%', }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
           "name": "Default",
           "type": {
-            "text": "StoryObj<Required<DateRangeSelectorProps>>"
+            "text": "StoryObj<Required<DateRangeFilterProps>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-selector .dateRangeOptions=${args.dateRangeOptions} .earliestDate=${args.earliestDate} .value=${args.value} .width=${args.width} .lapisDateField=${args.lapisDateField} ></gs-date-range-selector> </div> </gs-app>`, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-filter .dateRangeOptions=${args.dateRangeOptions} .earliestDate=${args.earliestDate} .value=${args.value} .width=${args.width} .lapisDateField=${args.lapisDateField} ></gs-date-range-filter> </div> </gs-app>`, }"
+        },
+        {
+          "kind": "variable",
+          "name": "TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression",
+          "type": {
+            "text": "StoryObj<Required<DateRangeFilterProps>>"
+          },
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-date-range-filter .dateRangeOptions=${args.dateRangeOptions} earliestDate=\"${args.earliestDate}\" value=\"${args.value}\" width=\"${args.width}\" lapisDateField=\"${args.lapisDateField}\" ></gs-date-range-filter> </div> </gs-app>`, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter'); await waitFor(async () => { await expect(selectField(canvas)).toHaveValue('Last month'); }); }, argTypes: { value: { control: { type: 'text', }, }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "TestSettingANumericValueIsTreatedAsString",
+          "type": {
+            "text": "StoryObj<Required<DateRangeFilterProps>>"
+          },
+          "default": "{ ...TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression, args: { ...TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression.args, value: '2021', }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter'); await waitFor(async () => { await expect(selectField(canvas)).toHaveValue('2021'); }); }, }"
         },
         {
           "kind": "variable",
           "name": "FiresEvents",
           "type": {
-            "text": "StoryObj<Required<DateRangeSelectorProps>>"
+            "text": "StoryObj<Required<DateRangeFilterProps>>"
           },
-          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector'); const filterChangedListenerMock = fn(); const optionChangedListenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock); canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock); }); await step('Expect last 6 months to be selected', async () => { await expect(selectField(canvas)).toHaveValue('Last month'); await waitFor(() => { expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date())); }); }); await step('Expect event to be fired when selecting a different value', async () => { await userEvent.selectOptions(selectField(canvas), 'CustomDateRange'); await expect(dateToPicker(canvas)).toHaveValue(customDateRange.dateTo); await expect(filterChangedListenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { aDateColumnFrom: customDateRange.dateFrom, aDateColumnTo: customDateRange.dateTo, }, }), ); await expect(optionChangedListenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: customDateRange.label, }), ); }); }, }"
+          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter'); const filterChangedListenerMock = fn(); const optionChangedListenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock); canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock); }); await step('Expect last 6 months to be selected', async () => { await expect(selectField(canvas)).toHaveValue('Last month'); await waitFor(async () => { await expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date())); }); }); await step('Expect event to be fired when selecting a different value', async () => { await userEvent.selectOptions(selectField(canvas), 'CustomDateRange'); await expect(dateToPicker(canvas)).toHaveValue(customDateRange.dateTo); await expect(filterChangedListenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { aDateColumnFrom: customDateRange.dateFrom, aDateColumnTo: customDateRange.dateTo, }, }), ); await expect(optionChangedListenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: customDateRange.label, }), ); }); }, }"
         }
       ],
       "exports": [
@@ -323,7 +339,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/input/gs-date-range-selector.stories.ts"
+            "module": "src/web-components/input/gs-date-range-filter.stories.ts"
           }
         },
         {
@@ -331,7 +347,23 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/web-components/input/gs-date-range-selector.stories.ts"
+            "module": "src/web-components/input/gs-date-range-filter.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression",
+          "declaration": {
+            "name": "TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression",
+            "module": "src/web-components/input/gs-date-range-filter.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TestSettingANumericValueIsTreatedAsString",
+          "declaration": {
+            "name": "TestSettingANumericValueIsTreatedAsString",
+            "module": "src/web-components/input/gs-date-range-filter.stories.ts"
           }
         },
         {
@@ -339,19 +371,19 @@
           "name": "FiresEvents",
           "declaration": {
             "name": "FiresEvents",
-            "module": "src/web-components/input/gs-date-range-selector.stories.ts"
+            "module": "src/web-components/input/gs-date-range-filter.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/gs-date-range-selector.tsx",
+      "path": "src/web-components/input/gs-date-range-filter.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "## Context\nThis component is a group of input fields designed to specify date range filters\nfor a given date column of this Lapis instance. It consists of 3 fields:\n\n- a select field to choose a predefined date range,\n- an input field with an attached date picker for the start date,\n- an input field with an attached date picker for the end date.\n\nSetting a value in the select field will overwrite the previous values of the start and end date.\nSetting a value in either of the date pickers will set the select field to \"custom\",\nwhich represents an arbitrary date range.",
-          "name": "DateRangeSelectorComponent",
+          "name": "DateRangeFilterComponent",
           "members": [
             {
               "kind": "field",
@@ -471,25 +503,25 @@
             "name": "PreactLitAdapter",
             "module": "/src/web-components/PreactLitAdapter"
           },
-          "tagName": "gs-date-range-selector",
+          "tagName": "gs-date-range-filter",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DateRangeSelectorComponent",
+          "name": "DateRangeFilterComponent",
           "declaration": {
-            "name": "DateRangeSelectorComponent",
-            "module": "src/web-components/input/gs-date-range-selector.tsx"
+            "name": "DateRangeFilterComponent",
+            "module": "src/web-components/input/gs-date-range-filter.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "gs-date-range-selector",
+          "name": "gs-date-range-filter",
           "declaration": {
-            "name": "DateRangeSelectorComponent",
-            "module": "src/web-components/input/gs-date-range-selector.tsx"
+            "name": "DateRangeFilterComponent",
+            "module": "src/web-components/input/gs-date-range-filter.tsx"
           }
         }
       ]
@@ -536,7 +568,7 @@
           "type": {
             "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', 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: '', }, }"
+          "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('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": [
@@ -767,7 +799,7 @@
           "type": {
             "text": "StoryObj<LocationFilterProps>"
           },
-          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>18/}'); await userEvent.click(canvas.getByLabelText('toggle menu')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: undefined, country: undefined, division: undefined, location: undefined, }); }); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await userEvent.click(canvas.getByRole('option', { name: /^Asia.*Asia$/ })); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: 'Asia', country: undefined, division: undefined, location: undefined, }); }); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await userEvent.click(canvas.getByText('Asia / Bangladesh / Rajshahi / Chapainawabgonj')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }); }); }); }, }"
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: aggregatedEndpointMatcher, response: { status: 200, body: data, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-location-filter'); const inputField = () => canvas.getByRole('combobox'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener('gs-location-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Input invalid location', async () => { await userEvent.type(inputField(), 'Not / A / Location'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>18/}'); await userEvent.click(canvas.getByLabelText('toggle menu')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: undefined, country: undefined, division: undefined, location: undefined, }); }); }); await step('Select Asia', async () => { await userEvent.type(inputField(), 'Asia'); await userEvent.click(canvas.getByRole('option', { name: /^Asia.*Asia$/ })); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: 'Asia', country: undefined, division: undefined, location: undefined, }); }); }); await step('Select Asia / Bangladesh / Rajshahi / Chapainawabgonj', async () => { await userEvent.type(inputField(), ' / Bangladesh / Rajshahi / Chapainawabgonj'); await userEvent.click(canvas.getByText('Asia / Bangladesh / Rajshahi / Chapainawabgonj')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ region: 'Asia', country: 'Bangladesh', division: 'Rajshahi', location: 'Chapainawabgonj', }); }); }); }, }"
         }
       ],
       "exports": [
@@ -982,7 +1014,7 @@
           "type": {
             "text": "StoryObj<MutationFilterProps>"
           },
-          "default": "{ ...Template, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); const listenerMock = fn(); await step('Setup event listener mock', async () => { canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enter a valid mutation', async () => { await userEvent.type(inputField(), 'A123T'); const option = await canvas.findByRole('option'); await userEvent.click(option); await waitFor(() => expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { nucleotideMutations: ['A123T'], aminoAcidMutations: [], nucleotideInsertions: [], aminoAcidInsertions: [], }, }), ), ); }); }, }"
+          "default": "{ ...Template, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enter a valid mutation', async () => { await userEvent.type(inputField(), 'A123T'); const option = await canvas.findByRole('option'); await userEvent.click(option); await waitFor(() => expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { nucleotideMutations: ['A123T'], aminoAcidMutations: [], nucleotideInsertions: [], aminoAcidInsertions: [], }, }), ), ); }); }, }"
         },
         {
           "kind": "variable",
@@ -990,7 +1022,7 @@
           "type": {
             "text": "StoryObj<MutationFilterProps>"
           },
-          "default": "{ ...Template, args: { ...Template.args, initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'referenceGenome', url: REFERENCE_GENOME_ENDPOINT, }, response: { status: 200, body: { nucleotideSequences: [ { name: 'seg1', sequence: 'dummy', }, { name: 'seg2', sequence: 'dummy', }, ], genes: [ { name: 'gene1', sequence: 'dummy', }, { name: 'gene2', sequence: 'dummy', }, ], }, }, options: { overwriteRoutes: false, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); await waitFor(() => { const placeholderText = inputField().getAttribute('placeholder'); expect(placeholderText).toEqual( 'Enter a mutation (e.g. seg1:23T, ins_seg1:10462:A, gene1:57Q, ins_gene1:31:N)', ); }); await waitFor(() => { expect(canvas.getByText('seg1:123T')).toBeVisible(); expect(canvas.getByText('gene2:56')).toBeVisible(); return expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible(); }); }, }"
+          "default": "{ ...Template, args: { ...Template.args, initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'referenceGenome', url: REFERENCE_GENOME_ENDPOINT, }, response: { status: 200, body: { nucleotideSequences: [ { name: 'seg1', sequence: 'dummy', }, { name: 'seg2', sequence: 'dummy', }, ], genes: [ { name: 'gene1', sequence: 'dummy', }, { name: 'gene2', sequence: 'dummy', }, ], }, }, options: { overwriteRoutes: false, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); await waitFor(async () => { const placeholderText = inputField().getAttribute('placeholder'); await expect(placeholderText).toEqual( 'Enter a mutation (e.g. seg1:23T, ins_seg1:10462:A, gene1:57Q, ins_gene1:31:N)', ); }); await waitFor(async () => { await expect(canvas.getByText('seg1:123T')).toBeVisible(); await expect(canvas.getByText('gene2:56')).toBeVisible(); await expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible(); }); }, }"
         }
       ],
       "exports": [
@@ -1116,31 +1148,31 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/gs-text-input.stories.ts",
+      "path": "src/web-components/input/gs-text-filter.stories.ts",
       "declarations": [
         {
           "kind": "variable",
           "name": "meta",
           "type": {
-            "text": "Meta<Required<TextInputProps>>"
+            "text": "Meta<Required<TextFilterProps>>"
           },
-          "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'], }"
+          "default": "{ title: 'Input/Text filter', component: 'gs-text-filter', parameters: withComponentDocs({ actions: { handles: ['gs-text-filter-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",
           "name": "Default",
           "type": {
-            "text": "StoryObj<Required<TextInputProps>>"
+            "text": "StoryObj<Required<TextFilterProps>>"
           },
-          "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%', }, }"
+          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-screen-lg\"> <gs-text-filter .lapisField=${args.lapisField} .lapisFilter=${args.lapisFilter} .placeholderText=${args.placeholderText} .value=${args.value} .width=${args.width} ></gs-text-filter> </div> </gs-app>`; }, args: { lapisField: 'host', lapisFilter: { country: 'Germany' }, placeholderText: 'Enter host name', value: 'Homo sapiens', width: '100%', }, }"
         },
         {
           "kind": "variable",
           "name": "FiresEvents",
           "type": {
-            "text": "StoryObj<Required<TextInputProps>>"
+            "text": "StoryObj<Required<TextFilterProps>>"
           },
-          "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: '', }, }"
+          "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('gs-text-filter-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(async () => { await 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": [
@@ -1149,7 +1181,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/web-components/input/gs-text-input.stories.ts"
+            "module": "src/web-components/input/gs-text-filter.stories.ts"
           }
         },
         {
@@ -1157,7 +1189,7 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/web-components/input/gs-text-input.stories.ts"
+            "module": "src/web-components/input/gs-text-filter.stories.ts"
           }
         },
         {
@@ -1165,19 +1197,19 @@
           "name": "FiresEvents",
           "declaration": {
             "name": "FiresEvents",
-            "module": "src/web-components/input/gs-text-input.stories.ts"
+            "module": "src/web-components/input/gs-text-filter.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/web-components/input/gs-text-input.tsx",
+      "path": "src/web-components/input/gs-text-filter.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "\n## Context\n\nThis component provides a text input field to specify filters for arbitrary fields of this LAPIS instance.",
-          "name": "TextInputComponent",
+          "name": "TextFilterComponent",
           "members": [
             {
               "kind": "field",
@@ -1186,7 +1218,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The initial value to use for this text input.",
+              "description": "The initial value to use for this text filter.",
               "attribute": "value"
             },
             {
@@ -1196,7 +1228,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Required.\n\nThe LAPIS field name to use for this text input.\nThe field must exist on this LAPIS instance.",
+              "description": "Required.\n\nThe LAPIS field name to use for this text filter.\nThe field must exist on this LAPIS instance.",
               "attribute": "lapisField"
             },
             {
@@ -1236,7 +1268,7 @@
                 "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"
+              "name": "gs-text-filter-changed"
             }
           ],
           "attributes": [
@@ -1246,7 +1278,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The initial value to use for this text input.",
+              "description": "The initial value to use for this text filter.",
               "fieldName": "value"
             },
             {
@@ -1255,7 +1287,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Required.\n\nThe LAPIS field name to use for this text input.\nThe field must exist on this LAPIS instance.",
+              "description": "Required.\n\nThe LAPIS field name to use for this text filter.\nThe field must exist on this LAPIS instance.",
               "fieldName": "lapisField"
             },
             {
@@ -1290,25 +1322,25 @@
             "name": "PreactLitAdapter",
             "module": "/src/web-components/PreactLitAdapter"
           },
-          "tagName": "gs-text-input",
+          "tagName": "gs-text-filter",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TextInputComponent",
+          "name": "TextFilterComponent",
           "declaration": {
-            "name": "TextInputComponent",
-            "module": "src/web-components/input/gs-text-input.tsx"
+            "name": "TextFilterComponent",
+            "module": "src/web-components/input/gs-text-filter.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "gs-text-input",
+          "name": "gs-text-filter",
           "declaration": {
-            "name": "TextInputComponent",
-            "module": "src/web-components/input/gs-text-input.tsx"
+            "name": "TextFilterComponent",
+            "module": "src/web-components/input/gs-text-filter.tsx"
           }
         }
       ]
@@ -1320,10 +1352,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "DateRangeSelectorComponent",
+          "name": "DateRangeFilterComponent",
           "declaration": {
-            "name": "DateRangeSelectorComponent",
-            "module": "./gs-date-range-selector"
+            "name": "DateRangeFilterComponent",
+            "module": "./gs-date-range-filter"
           }
         },
         {
@@ -1336,10 +1368,10 @@
         },
         {
           "kind": "js",
-          "name": "TextInputComponent",
+          "name": "TextFilterComponent",
           "declaration": {
-            "name": "TextInputComponent",
-            "module": "./gs-text-input"
+            "name": "TextFilterComponent",
+            "module": "./gs-text-filter"
           }
         },
         {
@@ -1513,7 +1545,7 @@
               "kind": "field",
               "name": "views",
               "type": {
-                "text": "AggregateView[]"
+                "text": "('table' | 'bar')[]"
               },
               "default": "['table']",
               "description": "A list of tabs with views that this component should provide.",
@@ -1603,7 +1635,7 @@
             {
               "name": "views",
               "type": {
-                "text": "AggregateView[]"
+                "text": "('table' | 'bar')[]"
               },
               "default": "['table']",
               "description": "A list of tabs with views that this component should provide.",

package/dist/{LineageFilterChangedEvent-C9dXOxt6.js → LineageFilterChangedEvent-COWV-Y0k.js}

@@ -113,9 +113,9 @@ class LocationChangedEvent extends CustomEvent {
     });
   }
 }
-class TextInputChangedEvent extends CustomEvent {
+class TextFilterChangedEvent extends CustomEvent {
   constructor(detail) {
-    super("gs-text-input-changed", {
+    super("gs-text-filter-changed", {
       detail,
       bubbles: true,
       composed: true
@@ -134,10 +134,10 @@ class LineageFilterChangedEvent extends CustomEvent {
 export {
   DateRangeOptionChangedEvent as D,
   LocationChangedEvent as L,
-  TextInputChangedEvent as T,
+  TextFilterChangedEvent as T,
   LineageFilterChangedEvent as a,
-  dateRangeOptionSchema as b,
-  dateRangeValueSchema as c,
+  dateRangeValueSchema as b,
+  dateRangeOptionSchema as c,
   dateRangeOptionPresets as d,
   toYYYYMMDD as e,
   lapisLocationFilterSchema as f,
@@ -148,4 +148,4 @@ export {
   temporalGranularitySchema as t,
   views as v
 };
-//# sourceMappingURL=LineageFilterChangedEvent-C9dXOxt6.js.map
+//# sourceMappingURL=LineageFilterChangedEvent-COWV-Y0k.js.map

package/dist/LineageFilterChangedEvent-COWV-Y0k.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineageFilterChangedEvent-COWV-Y0k.js","sources":["../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"],"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-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     * 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 const dateRangeValueSchema = z.union([\n    z.string(),\n    z.object({\n        dateFrom: z.string().date().optional(),\n        dateTo: z.string().date().optional(),\n    }),\n]);\n\nexport type DateRangeValue = z.infer<typeof dateRangeValueSchema>;\n\nexport type DateRangeSelectOption = Required<DateRangeValue>;\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-filter` 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 TextFilterChangedEvent extends CustomEvent<LapisTextFilter> {\n    constructor(detail: LapisTextFilter) {\n        super('gs-text-filter-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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"}