@genspectrum/dashboard-components 0.13.7 → 0.14.2

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",
@@ -298,7 +298,7 @@
           "type": {
             "text": "Meta<Required<DateRangeSelectorProps>>"
           },
-          "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: { initialValue: { control: { type: 'select', }, options: [dateRangeOptionPresets.lastMonth.label, dateRangeOptionPresets.allTimes.label, 'CustomDateRange'], }, 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', initialValue: dateRangeOptionPresets.lastMonth.label, lapisDateField: 'aDateColumn', width: '100%', initialDateFrom: undefined, initialDateTo: undefined, }, tags: ['autodocs'], }"
+          "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'], }"
         },
         {
           "kind": "variable",
@@ -306,7 +306,7 @@
           "type": {
             "text": "StoryObj<Required<DateRangeSelectorProps>>"
           },
-          "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} .initialValue=${args.initialValue} .initialDateFrom=${args.initialDateFrom} .initialDateTo=${args.initialDateTo} .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-selector .dateRangeOptions=${args.dateRangeOptions} .earliestDate=${args.earliestDate} .value=${args.value} .width=${args.width} .lapisDateField=${args.lapisDateField} ></gs-date-range-selector> </div> </gs-app>`, }"
         },
         {
           "kind": "variable",
@@ -314,7 +314,7 @@
           "type": {
             "text": "StoryObj<Required<DateRangeSelectorProps>>"
           },
-          "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-selector'); 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": [
@@ -360,7 +360,7 @@
                 "text": "{ label: string; dateFrom?: string; dateTo?: string }[]"
               },
               "default": "[]",
-              "description": "An array of date range options that the select field should provide.\nThe `label` will be shown to the user, and it will be available as `initialValue`.\nThe dates must be in the format `YYYY-MM-DD`.\n\nIf dateFrom or dateTo is not set, the component will default to the `earliestDate` or the current date.",
+              "description": "An array of date range options that the select field should provide.\nThe `label` will be shown to the user, and it will be available as `value`.\nThe dates must be in the format `YYYY-MM-DD`.\n\nIf dateFrom or dateTo is not set, the component will default to the `earliestDate` or the current date.\n\nWe provide some options in `dateRangeOptionPresets` for convenience.",
               "attribute": "dateRangeOptions"
             },
             {
@@ -375,33 +375,13 @@
             },
             {
               "kind": "field",
-              "name": "initialValue",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "undefined",
-              "description": "The initial value to use for this date range selector.\nMust be a valid label from the `dateRangeOptions`.\n\nIf the value is not set, the component will default to the range `earliestDate` until today.\n\nIt will be overwritten if `initialDateFrom` or `initialDateTo` is set.\n\nWe provide some options in `dateRangeOptionPresets` for convenience.",
-              "attribute": "initialValue"
-            },
-            {
-              "kind": "field",
-              "name": "initialDateFrom",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "undefined",
-              "description": "A date string in the format `YYYY-MM-DD`.\nIf set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).\nIf `initialDateTo` is set, but this is unset, it will default to `earliestDate`.",
-              "attribute": "initialDateFrom"
-            },
-            {
-              "kind": "field",
-              "name": "initialDateTo",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string | { dateFrom?: string; dateTo?: string } | undefined"
               },
               "default": "undefined",
-              "description": "A date string in the format `YYYY-MM-DD`.\nIf set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).\nIf `initialDateFrom` is set, but this is unset, it will default to the current date.",
-              "attribute": "initialDateTo"
+              "description": "The value to use for this date range selector.\n- If it is a string, then it must be a valid label from the `dateRangeOptions`.\n- If it is an object, then it accepts dates in the format `YYYY-MM-DD` for the keys `dateFrom` and `dateTo`.\n  Keys that are not set will default to the `earliestDate` or the current date respectively.\n- If the attribute is not set, the component will default to the range `earliestDate` until today.\n\nThe `detail` of the `gs-date-range-option-changed` event can be used for this attribute,\nif you want to control this component in your JS application.",
+              "attribute": "value"
             },
             {
               "kind": "field",
@@ -436,7 +416,7 @@
               "type": {
                 "text": "CustomEvent<{ string | {dateFrom: string, dateTo: string}}>"
               },
-              "description": "Fired when: - The select field is changed, - A date is selected in either of the date pickers, - A date was typed into either of the date input fields, and the input field loses focus (\"on blur\"). Contains the selected dateRangeOption or when users select custom values it contains the selected dates. Use this event, when you want to control this component in your JS application.",
+              "description": "Fired when: - The select field is changed, - A date is selected in either of the date pickers, - A date was typed into either of the date input fields, and the input field loses focus (\"on blur\"). Contains the selected dateRangeOption or when users select custom values it contains the selected dates. Use this event, when you want to control this component in your JS application. You can supply the `detail` of this event to the `value` attribute of this component.",
               "name": "gs-date-range-option-changed"
             }
           ],
@@ -447,7 +427,7 @@
                 "text": "{ label: string; dateFrom?: string; dateTo?: string }[]"
               },
               "default": "[]",
-              "description": "An array of date range options that the select field should provide.\nThe `label` will be shown to the user, and it will be available as `initialValue`.\nThe dates must be in the format `YYYY-MM-DD`.\n\nIf dateFrom or dateTo is not set, the component will default to the `earliestDate` or the current date.",
+              "description": "An array of date range options that the select field should provide.\nThe `label` will be shown to the user, and it will be available as `value`.\nThe dates must be in the format `YYYY-MM-DD`.\n\nIf dateFrom or dateTo is not set, the component will default to the `earliestDate` or the current date.\n\nWe provide some options in `dateRangeOptionPresets` for convenience.",
               "fieldName": "dateRangeOptions"
             },
             {
@@ -460,31 +440,13 @@
               "fieldName": "earliestDate"
             },
             {
-              "name": "initialValue",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "undefined",
-              "description": "The initial value to use for this date range selector.\nMust be a valid label from the `dateRangeOptions`.\n\nIf the value is not set, the component will default to the range `earliestDate` until today.\n\nIt will be overwritten if `initialDateFrom` or `initialDateTo` is set.\n\nWe provide some options in `dateRangeOptionPresets` for convenience.",
-              "fieldName": "initialValue"
-            },
-            {
-              "name": "initialDateFrom",
-              "type": {
-                "text": "string | undefined"
-              },
-              "default": "undefined",
-              "description": "A date string in the format `YYYY-MM-DD`.\nIf set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).\nIf `initialDateTo` is set, but this is unset, it will default to `earliestDate`.",
-              "fieldName": "initialDateFrom"
-            },
-            {
-              "name": "initialDateTo",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string | { dateFrom?: string; dateTo?: string } | undefined"
               },
               "default": "undefined",
-              "description": "A date string in the format `YYYY-MM-DD`.\nIf set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).\nIf `initialDateFrom` is set, but this is unset, it will default to the current date.",
-              "fieldName": "initialDateTo"
+              "description": "The value to use for this date range selector.\n- If it is a string, then it must be a valid label from the `dateRangeOptions`.\n- If it is an object, then it accepts dates in the format `YYYY-MM-DD` for the keys `dateFrom` and `dateTo`.\n  Keys that are not set will default to the `earliestDate` or the current date respectively.\n- If the attribute is not set, the component will default to the range `earliestDate` until today.\n\nThe `detail` of the `gs-date-range-option-changed` event can be used for this attribute,\nif you want to control this component in your JS application.",
+              "fieldName": "value"
             },
             {
               "name": "width",
@@ -574,7 +536,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": [
@@ -805,7 +767,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": [
@@ -1020,7 +982,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",
@@ -1028,7 +990,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": [
@@ -1178,7 +1140,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, value: '', }, }"
+          "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', () => { 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(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": [
@@ -1551,7 +1513,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.",
@@ -1641,7 +1603,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-GedKNGFI.js → LineageFilterChangedEvent-C9dXOxt6.js}

@@ -46,6 +46,13 @@ const dateRangeOptionSchema = z.object({
    */
   dateTo: z.string().date().optional()
 });
+const dateRangeValueSchema = z.union([
+  z.string(),
+  z.object({
+    dateFrom: z.string().date().optional(),
+    dateTo: z.string().date().optional()
+  })
+]);
 class DateRangeOptionChangedEvent extends CustomEvent {
   constructor(detail) {
     super("gs-date-range-option-changed", {
@@ -130,9 +137,10 @@ export {
   TextInputChangedEvent as T,
   LineageFilterChangedEvent as a,
   dateRangeOptionSchema as b,
-  toYYYYMMDD as c,
+  dateRangeValueSchema as c,
   dateRangeOptionPresets as d,
-  lapisLocationFilterSchema as e,
+  toYYYYMMDD as e,
+  lapisLocationFilterSchema as f,
   lapisFilterSchema as l,
   mutationsFilterSchema as m,
   namedLapisFilterSchema as n,
@@ -140,4 +148,4 @@ export {
   temporalGranularitySchema as t,
   views as v
 };
-//# sourceMappingURL=LineageFilterChangedEvent-GedKNGFI.js.map
+//# sourceMappingURL=LineageFilterChangedEvent-C9dXOxt6.js.map

package/dist/LineageFilterChangedEvent-C9dXOxt6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineageFilterChangedEvent-C9dXOxt6.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 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-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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"}