@genspectrum/dashboard-components 0.19.2 → 0.19.3

package/custom-elements.json

@@ -337,7 +337,7 @@
           "type": {
             "text": "Meta<Required<DateRangeFilterProps>>"
           },
-          "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' }, }, placeholder: { 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%', placeholder: 'Date range', }, tags: ['autodocs'], }"
+          "default": "{ title: 'Input/DateRangeFilter', component: 'gs-date-range-filter', parameters: withComponentDocs({ actions: { handles: [gsEventNames.dateRangeFilterChanged, gsEventNames.dateRangeOptionChanged, ...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' }, }, placeholder: { 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%', placeholder: 'Date range', }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -369,7 +369,7 @@
           "type": {
             "text": "StoryObj<Required<DateRangeFilterProps>>"
           },
-          "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 waitFor(async () => { const placeholderOption = canvas.getByRole('combobox').querySelector('option:checked'); await expect(placeholderOption).toHaveTextContent('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 userEvent.click(canvas.getByText('CustomDateRange')); await waitFor(async () => { 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(gsEventNames.dateRangeFilterChanged, filterChangedListenerMock); canvasElement.addEventListener(gsEventNames.dateRangeOptionChanged, optionChangedListenerMock); }); await step('Expect last 6 months to be selected', async () => { await waitFor(async () => { const placeholderOption = canvas.getByRole('combobox').querySelector('option:checked'); await expect(placeholderOption).toHaveTextContent('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 userEvent.click(canvas.getByText('CustomDateRange')); await waitFor(async () => { 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": [
@@ -594,7 +594,7 @@
           "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'], 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', }, }, }, }"
+          "default": "{ title: 'Input/Lineage filter', component: 'gs-lineage-filter', parameters: withComponentDocs({ actions: { handles: [gsEventNames.lineageFilterChanged, ...previewHandles], }, fetchMock: { mocks: [ { matcher: { name: 'pangoLineage', url: AGGREGATED_ENDPOINT, body: { fields: ['pangoLineage'], country: 'Germany', }, }, response: { status: 200, body: aggregatedData, }, }, ], }, 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",
@@ -626,7 +626,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', () => { 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(gsEventNames.lineageFilterChanged, listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid lineage value', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); await userEvent.click(canvas.getByLabelText('toggle menu')); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ pangoLineage: undefined, }); }); }); await step('Enter a valid lineage value', async () => { await userEvent.type(inputField(), 'B.1.1.7*'); await userEvent.click(canvas.getByRole('option', { name: 'B.1.1.7*' })); await waitFor(() => { return expect(listenerMock.mock.calls.at(-1)![0].detail).toStrictEqual({ pangoLineage: 'B.1.1.7*', }); }); }); }, args: { ...LineageFilter.args, value: '', }, }"
         }
       ],
       "exports": [
@@ -825,7 +825,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', }, }, lapisFilter: { age: 18, }, }, tags: ['autodocs'], }"
+          "default": "{ title: 'Input/Location filter', component: 'gs-location-filter', parameters: withComponentDocs({ actions: { handles: [gsEventNames.locationChanged, ...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",
@@ -857,7 +857,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', () => { 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(gsEventNames.locationChanged, 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": [
@@ -1056,7 +1056,7 @@
           "type": {
             "text": "Meta<MutationFilterProps>"
           },
-          "default": "{ title: 'Input/Mutation filter', component: 'gs-mutation-filter', parameters: withComponentDocs({ actions: { handles: ['gs-mutation-filter-changed', ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'object', }, }, width: { control: 'text' }, }, tags: ['autodocs'], }"
+          "default": "{ title: 'Input/Mutation filter', component: 'gs-mutation-filter', parameters: withComponentDocs({ actions: { handles: [gsEventNames.mutationFilterChanged, ...previewHandles], }, fetchMock: {}, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), argTypes: { initialValue: { control: { type: 'object', }, }, width: { control: 'text' }, }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1072,7 +1072,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', () => { 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(gsEventNames.mutationFilterChanged, 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",
@@ -1214,7 +1214,7 @@
           "type": {
             "text": "Meta<Required<TextFilterProps>>"
           },
-          "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'], }"
+          "default": "{ title: 'Input/Text filter', component: 'gs-text-filter', parameters: withComponentDocs({ actions: { handles: [gsEventNames.textFilterChanged, ...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",
@@ -1230,7 +1230,7 @@
           "type": {
             "text": "StoryObj<Required<TextFilterProps>>"
           },
-          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-filter'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener('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 userEvent.click(canvas.getByRole('button', { name: 'clear selection' })); await expect(listenerMock).toHaveBeenLastCalledWith( expect.objectContaining({ detail: { host: undefined, }, }), ); }); }, args: { ...Default.args, value: '', }, }"
+          "default": "{ ...Default, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-text-filter'); const inputField = () => canvas.getByPlaceholderText('Enter host name'); const listenerMock = fn(); await step('Setup event listener mock', () => { canvasElement.addEventListener(gsEventNames.textFilterChanged, listenerMock); }); await step('wait until data is loaded', async () => { await waitFor(() => { return expect(inputField()).toBeEnabled(); }); }); await step('Enters an invalid host name', async () => { await userEvent.type(inputField(), 'notInList'); await expect(listenerMock).not.toHaveBeenCalled(); }); await step('Empty input', async () => { await userEvent.type(inputField(), '{backspace>9/}'); }); await step('Enter a valid host name', async () => { await userEvent.type(inputField(), 'Homo s'); const dropdownOption = await canvas.findByText('Homo sapiens'); await userEvent.click(dropdownOption); }); await step('Verify event is fired with correct detail', async () => { await waitFor(async () => { await expect(listenerMock).toHaveBeenCalledWith( expect.objectContaining({ detail: { host: 'Homo sapiens', }, }), ); }); }); await step('Remove initial value', async () => { await userEvent.click(canvas.getByRole('button', { name: 'clear selection' })); await expect(listenerMock).toHaveBeenLastCalledWith( expect.objectContaining({ detail: { host: undefined, }, }), ); }); }, args: { ...Default.args, value: '', }, }"
         }
       ],
       "exports": [
@@ -1838,6 +1838,148 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/visualization/gs-genome-data-viewer.spec-d.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/visualization/gs-genome-data-viewer.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta<Required<GenomeDataViewerProps>>"
+          },
+          "default": "{ title: 'Visualization/Genome Data Viewer', component: 'gs-genome-data-viewer', argTypes: { gff3Source: { control: 'text' }, genomeLength: { control: 'number' }, width: { control: 'text' }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+        },
+        {
+          "kind": "variable",
+          "name": "Default",
+          "type": {
+            "text": "StoryObj<Required<GenomeDataViewerProps>>"
+          },
+          "default": "{ ...Template, args: { genomeLength: 11029, gff3Source: 'https://gff3Url', width: '100%', }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'gff3Data', url: 'https://gff3Url', }, response: { status: 200, body: SimpleData, headers: { 'Content-Type': 'text/plain', }, }, }, ], }, }, play: async ({ canvasElement, step }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-genome-data-viewer'); await step('CDS visible', async () => { const ns1NameMatches = await canvas.findAllByText('NS1'); await waitFor(async () => expect(ns1NameMatches[0]).toBeVisible()); const xAxisTick = await canvas.findAllByText('1000'); await waitFor(async () => expect(xAxisTick[0]).toBeVisible()); await waitFor(async () => expect(xAxisTick.length).toBe(2)); }); }, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/web-components/visualization/gs-genome-data-viewer.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Default",
+          "declaration": {
+            "name": "Default",
+            "module": "src/web-components/visualization/gs-genome-data-viewer.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/visualization/gs-genome-data-viewer.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "## Context\n\nThis component shows the Coding Sequence (CDS) of a genome using a gff3 file as input.\nThe CDS shows which parts of the genome are translated into proteins.",
+          "name": "GenomeDataViewerComponent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "gff3Source",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Required\n\nThe source of the gff3 file. Any spec-compliant gff3 should be accepted, however we use the same format as Nextclade.\nSee https://docs.nextstrain.org/projects/nextclade/en/stable/user/input-files/03-genome-annotation.html for more information.\nWe only use the CDS and gene features from the gff3 file, if you have other features in the gff3 file they will be ignored.\nAlso note that if a CDS has a gene feature as a parent, the gene feature will be ignored.",
+              "attribute": "gff3Source"
+            },
+            {
+              "kind": "field",
+              "name": "genomeLength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "default": "0",
+              "description": "The length of the genome, if this is not given it will be computed from the `sequence-region` line of the start of the gff3 file.",
+              "attribute": "genomeLength"
+            },
+            {
+              "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/concepts-size-of-components--docs for more information.",
+              "attribute": "width"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "gff3Source",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Required\n\nThe source of the gff3 file. Any spec-compliant gff3 should be accepted, however we use the same format as Nextclade.\nSee https://docs.nextstrain.org/projects/nextclade/en/stable/user/input-files/03-genome-annotation.html for more information.\nWe only use the CDS and gene features from the gff3 file, if you have other features in the gff3 file they will be ignored.\nAlso note that if a CDS has a gene feature as a parent, the gene feature will be ignored.",
+              "fieldName": "gff3Source"
+            },
+            {
+              "name": "genomeLength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "default": "0",
+              "description": "The length of the genome, if this is not given it will be computed from the `sequence-region` line of the start of the gff3 file.",
+              "fieldName": "genomeLength"
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "string"
+              },
+              "default": "'100%'",
+              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
+              "fieldName": "width"
+            }
+          ],
+          "superclass": {
+            "name": "PreactLitAdapter",
+            "module": "/src/web-components/PreactLitAdapter"
+          },
+          "tagName": "gs-genome-data-viewer",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GenomeDataViewerComponent",
+          "declaration": {
+            "name": "GenomeDataViewerComponent",
+            "module": "src/web-components/visualization/gs-genome-data-viewer.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "gs-genome-data-viewer",
+          "declaration": {
+            "name": "GenomeDataViewerComponent",
+            "module": "src/web-components/visualization/gs-genome-data-viewer.tsx"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/visualization/gs-mutation-comparison.stories.ts",
@@ -4170,6 +4312,14 @@
       "path": "src/web-components/visualization/index.ts",
       "declarations": [],
       "exports": [
+        {
+          "kind": "js",
+          "name": "GenomeDataViewerComponent",
+          "declaration": {
+            "name": "GenomeDataViewerComponent",
+            "module": "./gs-genome-data-viewer"
+          }
+        },
         {
           "kind": "js",
           "name": "MutationComparisonComponent",

package/dist/{LineageFilterChangedEvent-ixHQkq8y.js → LineageFilterChangedEvent-b0iuroUL.js}

@@ -1,4 +1,13 @@
 import z from "zod";
+const gsEventNames = {
+  error: "gs-error",
+  dateRangeFilterChanged: "gs-date-range-filter-changed",
+  dateRangeOptionChanged: "gs-date-range-option-changed",
+  mutationFilterChanged: "gs-mutation-filter-changed",
+  lineageFilterChanged: "gs-lineage-filter-changed",
+  locationChanged: "gs-location-changed",
+  textFilterChanged: "gs-text-filter-changed"
+};
 const mutationsFilterSchema = z.object({
   nucleotideMutations: z.array(z.string()),
   aminoAcidMutations: z.array(z.string()),
@@ -55,7 +64,7 @@ const dateRangeValueSchema = z.union([
 ]).nullable();
 class DateRangeOptionChangedEvent extends CustomEvent {
   constructor(detail) {
-    super("gs-date-range-option-changed", {
+    super(gsEventNames.dateRangeOptionChanged, {
       detail,
       bubbles: true,
       composed: true
@@ -106,7 +115,7 @@ const dateRangeOptionPresets = {
 };
 class LocationChangedEvent extends CustomEvent {
   constructor(detail) {
-    super("gs-location-changed", {
+    super(gsEventNames.locationChanged, {
       detail,
       bubbles: true,
       composed: true
@@ -115,7 +124,7 @@ class LocationChangedEvent extends CustomEvent {
 }
 class TextFilterChangedEvent extends CustomEvent {
   constructor(detail) {
-    super("gs-text-filter-changed", {
+    super(gsEventNames.textFilterChanged, {
       detail,
       bubbles: true,
       composed: true
@@ -124,7 +133,7 @@ class TextFilterChangedEvent extends CustomEvent {
 }
 class LineageFilterChangedEvent extends CustomEvent {
   constructor(detail) {
-    super("gs-lineage-filter-changed", {
+    super(gsEventNames.lineageFilterChanged, {
       detail,
       bubbles: true,
       composed: true
@@ -141,6 +150,7 @@ export {
   dateRangeOptionPresets as d,
   toYYYYMMDD as e,
   lapisLocationFilterSchema as f,
+  gsEventNames as g,
   lapisFilterSchema as l,
   mutationsFilterSchema as m,
   namedLapisFilterSchema as n,
@@ -148,4 +158,4 @@ export {
   temporalGranularitySchema as t,
   views as v
 };
-//# sourceMappingURL=LineageFilterChangedEvent-ixHQkq8y.js.map
+//# sourceMappingURL=LineageFilterChangedEvent-b0iuroUL.js.map

package/dist/LineageFilterChangedEvent-b0iuroUL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineageFilterChangedEvent-b0iuroUL.js","sources":["../src/utils/gsEventNames.ts","../src/types.ts","../src/preact/dateRangeFilter/dateConversion.ts","../src/preact/dateRangeFilter/dateRangeOption.ts","../src/preact/locationFilter/LocationChangedEvent.ts","../src/preact/textFilter/TextFilterChangedEvent.ts","../src/preact/lineageFilter/LineageFilterChangedEvent.ts"],"sourcesContent":["export const gsEventNames = {\n    error: 'gs-error',\n    dateRangeFilterChanged: 'gs-date-range-filter-changed',\n    dateRangeOptionChanged: 'gs-date-range-option-changed',\n    mutationFilterChanged: 'gs-mutation-filter-changed',\n    lineageFilterChanged: 'gs-lineage-filter-changed',\n    locationChanged: 'gs-location-changed',\n    textFilterChanged: 'gs-text-filter-changed',\n} as const;\n","import z from 'zod';\n\nimport {\n    type Deletion,\n    type DeletionClass,\n    type Insertion,\n    type InsertionClass,\n    type Substitution,\n    type SubstitutionClass,\n} from './utils/mutations';\n\nexport const mutationsFilterSchema = z.object({\n    nucleotideMutations: z.array(z.string()),\n    aminoAcidMutations: z.array(z.string()),\n    nucleotideInsertions: z.array(z.string()),\n    aminoAcidInsertions: z.array(z.string()),\n});\nexport type MutationsFilter = z.infer<typeof mutationsFilterSchema>;\n\nexport const lapisFilterSchema = z\n    .record(z.union([z.string(), z.array(z.string()), z.number(), z.null(), z.boolean(), z.undefined()]))\n    .and(mutationsFilterSchema.partial());\nexport type LapisFilter = z.infer<typeof lapisFilterSchema>;\n\nexport const namedLapisFilterSchema = z.object({\n    lapisFilter: lapisFilterSchema,\n    displayName: z.string(),\n});\nexport type NamedLapisFilter = z.infer<typeof namedLapisFilterSchema>;\n\nexport const lapisLocationFilterSchema = z.record(z.union([z.string(), z.undefined()]));\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';\nimport { gsEventNames } from '../../utils/gsEventNames';\n\n/**\n * A date range option that can be used in the `gs-date-range-filter` component.\n */\nexport const dateRangeOptionSchema = z.object({\n    /** The label of the date range option that will be shown to the user */\n    label: z.string(),\n    /**\n     * The start date of the date range in the format `YYYY-MM-DD`.\n     * 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\n    .union([\n        z.string(),\n        z.object({\n            dateFrom: z.string().date().optional(),\n            dateTo: z.string().date().optional(),\n        }),\n    ])\n    .nullable();\n\nexport type DateRangeValue = z.infer<typeof dateRangeValueSchema>;\n\nexport class DateRangeOptionChangedEvent extends CustomEvent<DateRangeValue> {\n    constructor(detail: DateRangeValue) {\n        super(gsEventNames.dateRangeOptionChanged, {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n\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';\nimport { gsEventNames } from '../../utils/gsEventNames';\n\nexport class LocationChangedEvent extends CustomEvent<LapisLocationFilter> {\n    constructor(detail: LapisLocationFilter) {\n        super(gsEventNames.locationChanged, {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n","import { gsEventNames } from '../../utils/gsEventNames';\n\ntype LapisTextFilter = Record<string, string | undefined>;\n\nexport class TextFilterChangedEvent extends CustomEvent<LapisTextFilter> {\n    constructor(detail: LapisTextFilter) {\n        super(gsEventNames.textFilterChanged, {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n","import { gsEventNames } from '../../utils/gsEventNames';\n\ntype LapisLineageFilter = Record<string, string | undefined>;\n\nexport class LineageFilterChangedEvent extends CustomEvent<LapisLineageFilter> {\n    constructor(detail: LapisLineageFilter) {\n        super(gsEventNames.lineageFilterChanged, {\n            detail,\n            bubbles: true,\n            composed: true,\n        });\n    }\n}\n"],"names":[],"mappings":"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"}