@genspectrum/dashboard-components 0.16.3 → 0.17.0

package/custom-elements.json

@@ -2,6 +2,12 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/MutationAnnotations.mdx",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/PreactLitAdapter.tsx",
@@ -231,7 +237,7 @@
                 "text": "{\n        name: string;\n        description: string;\n        symbol: string;\n        nucleotideMutations: string[];\n        aminoAcidMutations: string[];\n    }[]"
               },
               "default": "[]",
-              "description": "Supply lists of mutations that are especially relevant for the current organism.\nWhenever other components display mutations, matching mutations will be highlighted by appending the `symbol`.\nOn hover, a tooltip with the `name` and `description` will be shown.",
+              "description": "Supply lists of mutations that are especially relevant for the current organism.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.",
               "attribute": "mutationAnnotations"
             }
           ],
@@ -251,7 +257,7 @@
                 "text": "{\n        name: string;\n        description: string;\n        symbol: string;\n        nucleotideMutations: string[];\n        aminoAcidMutations: string[];\n    }[]"
               },
               "default": "[]",
-              "description": "Supply lists of mutations that are especially relevant for the current organism.\nWhenever other components display mutations, matching mutations will be highlighted by appending the `symbol`.\nOn hover, a tooltip with the `name` and `description` will be shown.",
+              "description": "Supply lists of mutations that are especially relevant for the current organism.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.",
               "fieldName": "mutationAnnotations"
             }
           ],
@@ -331,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', }, }, }, 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'], }"
+          "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'], }"
         },
         {
           "kind": "variable",
@@ -339,7 +345,7 @@
           "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>`, }"
+          "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} .placeholder=${args.placeholder} ></gs-date-range-filter> </div> </gs-app>`, }"
         },
         {
           "kind": "variable",
@@ -347,7 +353,7 @@
           "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', }, }, }, }"
+          "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}\" placeholder=\"${args.placeholder}\" ></gs-date-range-filter> </div> </gs-app>`, play: async ({ canvasElement }) => { await waitFor(async () => { const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter'); const placeholderOption = canvas.getByRole('combobox').querySelector('option:checked'); await expect(placeholderOption).toHaveTextContent('Last month'); }); }, argTypes: { value: { control: { type: 'text', }, }, }, }"
         },
         {
           "kind": "variable",
@@ -363,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 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, }), ); }); }, }"
+          "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, }), ); }); }); }, }"
         }
       ],
       "exports": [
@@ -445,7 +451,7 @@
                 "text": "string | { dateFrom?: string; dateTo?: string } | undefined"
               },
               "default": "undefined",
-              "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.",
+              "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\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"
             },
             {
@@ -455,9 +461,19 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "description": "The placeholder to display on the select dropdown.",
+              "attribute": "placeholder"
+            },
             {
               "kind": "field",
               "name": "lapisDateField",
@@ -510,7 +526,7 @@
                 "text": "string | { dateFrom?: string; dateTo?: string } | undefined"
               },
               "default": "undefined",
-              "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.",
+              "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\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"
             },
             {
@@ -519,9 +535,18 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "default": "undefined",
+              "description": "The placeholder to display on the select dropdown.",
+              "fieldName": "placeholder"
+            },
             {
               "name": "lapisDateField",
               "type": {
@@ -703,7 +728,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             }
           ],
@@ -759,7 +784,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             }
           ],
@@ -924,7 +949,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -981,7 +1006,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -1119,7 +1144,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             }
           ],
@@ -1148,7 +1173,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             }
           ],
@@ -1291,7 +1316,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             }
           ],
@@ -1347,7 +1372,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             }
           ],
@@ -1649,7 +1674,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -1659,7 +1684,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "attribute": "height"
             },
             {
@@ -1737,7 +1762,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -1746,7 +1771,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "fieldName": "height"
             },
             {
@@ -1891,7 +1916,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\n\nThis component allows to compare mutations between two different datasets.\nThe datasets are selected by LAPIS filters.\n\nIt only shows substitutions and deletions, it does not show insertions.\n\n## Views\n\n### Table View\n\nThe table view shows mutations and the proportions with which the mutation occurs in the respective data subsets.\nIt only shows mutations that are present in at least one of the data subsets\nand where the proportion is within the selected proportion interval for at least one data subset.\n\n### Venn View\n\nThe Venn view shows the overlap of mutations between the datasets in a Venn diagram.\nA dataset is considered to have a certain mutation, if the proportion of the mutation in the dataset is within the\nselected proportion interval.\nThus, changing the proportion interval may change a mutations from being \"common\" between the datasets\nto being \"for one dataset only\".",
+          "description": "## Context\n\nThis component allows to compare mutations between two different datasets.\nThe datasets are selected by LAPIS filters.\n\nIt only shows substitutions and deletions, it does not show insertions.\n\nThis component supports mutations annotations.\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.\n\n## Views\n\n### Table View\n\nThe table view shows mutations and the proportions with which the mutation occurs in the respective data subsets.\nIt only shows mutations that are present in at least one of the data subsets\nand where the proportion is within the selected proportion interval for at least one data subset.\n\n### Venn View\n\nThe Venn view shows the overlap of mutations between the datasets in a Venn diagram.\nA dataset is considered to have a certain mutation, if the proportion of the mutation in the dataset is within the\nselected proportion interval.\nThus, changing the proportion interval may change a mutations from being \"common\" between the datasets\nto being \"for one dataset only\".",
           "name": "MutationComparisonComponent",
           "members": [
             {
@@ -1931,7 +1956,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -1941,7 +1966,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "attribute": "height"
             },
             {
@@ -1989,7 +2014,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -1998,7 +2023,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "fieldName": "height"
             },
             {
@@ -2164,7 +2189,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\n\nThis component displays mutations (substitutions and deletions) over time for a dataset selected by a LAPIS filter.\nThe shown date range is determined by the date field in the LAPIS filter.\nIf the date field is not set, the date range is determined by all available dates in the dataset.\n\n## Views\n\n### Grid View\n\nThe grid view shows the proportion for each mutation over date ranges.\n\nThe grid limits the number of rows and columns for browser performance reasons as\ntoo much data might make the browser unresponsive.\n\nThe number of columns is limited to 200.\nIf this number are exceeded, an error message will be shown.\nIt is your responsibility to make sure that this does not happen.\nDepending on the selected date range in the `lapisFilter`, you can adapt the granularity accordingly\n(e.g. use months instead of days).\n\nThe number of rows is limited to 100.\nIf there are more, the component will only show 100 mutations and notify the user.\n\nUsers can filter the displayed rows by mean proportion via a slider in the toolbar.\nThe mean proportion of each row is calculated by LAPIS over the whole data range that the component displays.\nThe initial mean proportion can be set via `initialMeanProportionInterval`.",
+          "description": "## Context\n\nThis component displays mutations (substitutions and deletions) over time for a dataset selected by a LAPIS filter.\nThe shown date range is determined by the date field in the LAPIS filter.\nIf the date field is not set, the date range is determined by all available dates in the dataset.\n\nThis component supports mutations annotations.\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.\n\n## Views\n\n### Grid View\n\nThe grid view shows the proportion for each mutation over date ranges.\n\nThe grid limits the number of rows and columns for browser performance reasons as\ntoo much data might make the browser unresponsive.\n\nThe number of columns is limited to 200.\nIf this number are exceeded, an error message will be shown.\nIt is your responsibility to make sure that this does not happen.\nDepending on the selected date range in the `lapisFilter`, you can adapt the granularity accordingly\n(e.g. use months instead of days).\n\nThe number of rows is limited to 100.\nIf there are more, the component will only show 100 mutations and notify the user.\n\nUsers can filter the displayed rows by mean proportion via a slider in the toolbar.\nThe mean proportion of each row is calculated by LAPIS over the whole data range that the component displays.\nThe initial mean proportion can be set via `initialMeanProportionInterval`.",
           "name": "MutationsOverTimeComponent",
           "members": [
             {
@@ -2204,7 +2229,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -2214,7 +2239,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "attribute": "height"
             },
             {
@@ -2292,7 +2317,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -2301,7 +2326,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "fieldName": "height"
             },
             {
@@ -2478,7 +2503,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\n\nThis component displays mutations (substitutions, deletions and insertions) for a dataset selected by a LAPIS filter.\n\n## Views\n\n### Table View\n\nThe table view shows all substitutions and deletions for the dataset.\nIt shows the type (substitution or deletion), the total count of the mutation\nand the proportion of the mutation in the dataset.\nThe proportion is relative to the total number of sequences matching\nthe specified sequence filters with non-ambiguous reads at that position.\n\nThe proportion interval filter can be used to filter the displayed mutations on client side.\n\n#### Jaccard Similarity\n\nIf the `baselineLapisFilter` attribute is set,\nthe [Jaccard similarity](https://en.wikipedia.org/wiki/Jaccard_index) is computed for each mutation.\nIt is computed as `variantWithMutationCount / (variantCount + mutationCount - variantWithMutationCount)`,\n- `variantCount` is the number of sequences of the variant (i.e. the number of sequences that match the `lapisFilter`),\n- `mutationCount` is the number of sequences with the mutation\n   (i.e. the number of sequences matching the `baselineLapisFilter` that have the mutation),\n- `variantWithMutationCount` is the number of sequences that belong to the variant and have the mutation\n   (i.e. the `count` value that is shown in the table).\n\nTypically, this is useful when you query mutations of a certain \"variant\"\n(i.e. a certain lineage or a certain set of mutations).\nThen the `baselineLapisFilter` should be the `lapisFilter` but without the lineage or mutations.\n\nFor example:\nYou are interested in a certain lineage in a certain country: `lapisFilter={country: 'Switzerland', linage: 'XY.1.2.3'}`.\nThen the \"baseline\" should be the same filter but without the lineage: `baselineLapisFilter={country: 'Switzerland'}`.\n\nComputing the Jaccard similarity is not always meaningful, because you might not have a \"variant\"\n(e.g. when you only query for a certain country).\nIn this case you can simply omit the `baselineLapisFilter`.\n\n### Grid View\n\nThe grid view shows the proportion of each sequence symbol (nucleotide or amino acid) for each position that has a mutation.\nOnly positions with at least one mutation in the selected proportion interval are shown.\n\n### Insertions View\n\nThe insertions view shows the count of all insertions for the dataset.",
+          "description": "## Context\n\nThis component displays mutations (substitutions, deletions and insertions) for a dataset selected by a LAPIS filter.\n\nThis component supports mutations annotations.\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-mutation-annotations--docs for more information.\n\n## Views\n\n### Table View\n\nThe table view shows all substitutions and deletions for the dataset.\nIt shows the type (substitution or deletion), the total count of the mutation\nand the proportion of the mutation in the dataset.\nThe proportion is relative to the total number of sequences matching\nthe specified sequence filters with non-ambiguous reads at that position.\n\nThe proportion interval filter can be used to filter the displayed mutations on client side.\n\n#### Jaccard Similarity\n\nIf the `baselineLapisFilter` attribute is set,\nthe [Jaccard similarity](https://en.wikipedia.org/wiki/Jaccard_index) is computed for each mutation.\nIt is computed as `variantWithMutationCount / (variantCount + mutationCount - variantWithMutationCount)`,\n- `variantCount` is the number of sequences of the variant (i.e. the number of sequences that match the `lapisFilter`),\n- `mutationCount` is the number of sequences with the mutation\n   (i.e. the number of sequences matching the `baselineLapisFilter` that have the mutation),\n- `variantWithMutationCount` is the number of sequences that belong to the variant and have the mutation\n   (i.e. the `count` value that is shown in the table).\n\nTypically, this is useful when you query mutations of a certain \"variant\"\n(i.e. a certain lineage or a certain set of mutations).\nThen the `baselineLapisFilter` should be the `lapisFilter` but without the lineage or mutations.\n\nFor example:\nYou are interested in a certain lineage in a certain country: `lapisFilter={country: 'Switzerland', linage: 'XY.1.2.3'}`.\nThen the \"baseline\" should be the same filter but without the lineage: `baselineLapisFilter={country: 'Switzerland'}`.\n\nComputing the Jaccard similarity is not always meaningful, because you might not have a \"variant\"\n(e.g. when you only query for a certain country).\nIn this case you can simply omit the `baselineLapisFilter`.\n\n### Grid View\n\nThe grid view shows the proportion of each sequence symbol (nucleotide or amino acid) for each position that has a mutation.\nOnly positions with at least one mutation in the selected proportion interval are shown.\n\n### Insertions View\n\nThe insertions view shows the count of all insertions for the dataset.",
           "name": "MutationsComponent",
           "members": [
             {
@@ -2528,7 +2553,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -2538,7 +2563,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "attribute": "height"
             },
             {
@@ -2595,7 +2620,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -2604,7 +2629,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "fieldName": "height"
             },
             {
@@ -2810,7 +2835,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -2820,7 +2845,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "attribute": "height"
             },
             {
@@ -2888,7 +2913,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -2897,7 +2922,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "fieldName": "height"
             },
             {
@@ -3151,7 +3176,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -3161,7 +3186,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "attribute": "height"
             },
             {
@@ -3266,7 +3291,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -3275,7 +3300,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "fieldName": "height"
             },
             {
@@ -3454,7 +3479,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -3464,7 +3489,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "attribute": "height"
             },
             {
@@ -3541,7 +3566,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -3550,7 +3575,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "fieldName": "height"
             },
             {
@@ -3768,7 +3793,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\nNot that the map in the map view is not responsive\n(i.e. does not adjust its size when the component is resized).\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\nNot that the map in the map view is not responsive\n(i.e. does not adjust its size when the component is resized).\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "attribute": "width"
             },
             {
@@ -3778,7 +3803,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "attribute": "height"
             },
             {
@@ -3875,7 +3900,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\nNot that the map in the map view is not responsive\n(i.e. does not adjust its size when the component is resized).\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The width of the component.\nNot that the map in the map view is not responsive\n(i.e. does not adjust its size when the component is resized).\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "fieldName": "width"
             },
             {
@@ -3884,7 +3909,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "fieldName": "height"
             },
             {
@@ -4036,7 +4061,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -4046,7 +4071,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "attribute": "height"
             }
           ],
@@ -4075,7 +4100,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -4084,7 +4109,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "fieldName": "height"
             }
           ],
@@ -4292,7 +4317,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -4302,7 +4327,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "attribute": "height"
             },
             {
@@ -4341,7 +4366,7 @@
                 "text": "string"
               },
               "default": "'100%'",
-              "description": "The width of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "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"
             },
             {
@@ -4350,7 +4375,7 @@
                 "text": "string | undefined"
               },
               "default": "undefined",
-              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.",
               "fieldName": "height"
             },
             {

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

@@ -52,7 +52,7 @@ const dateRangeValueSchema = z.union([
     dateFrom: z.string().date().optional(),
     dateTo: z.string().date().optional()
   })
-]);
+]).optional();
 class DateRangeOptionChangedEvent extends CustomEvent {
   constructor(detail) {
     super("gs-date-range-option-changed", {
@@ -148,4 +148,4 @@ export {
   temporalGranularitySchema as t,
   views as v
 };
-//# sourceMappingURL=LineageFilterChangedEvent-COWV-Y0k.js.map
+//# sourceMappingURL=LineageFilterChangedEvent-DkvWdq_G.js.map