@genspectrum/dashboard-components 1.4.0 → 1.6.0

package/custom-elements.json

@@ -563,7 +563,7 @@
           "type": {
             "text": "Meta<Required<LineageFilterProps>>"
           },
-          "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, }, }, { matcher: { name: 'lineageDefinition', url: lineageDefinitionEndpoint(LAPIS_URL, 'pangoLineage'), }, response: { status: 200, body: lineageDefinition, }, }, ], }, 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, }, }, { matcher: { name: 'lineageDefinition', url: lineageDefinitionEndpoint(LAPIS_URL, 'pangoLineage'), }, response: { status: 200, body: lineageDefinition, }, }, ], }, 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', }, }, hideCounts: { control: { type: 'boolean', }, }, }, }"
         },
         {
           "kind": "variable",
@@ -699,6 +699,16 @@
               "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"
+            },
+            {
+              "kind": "field",
+              "name": "hideCounts",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "Whether to hide counts behind lineage options in the drop down selection.\nDefaults to false.",
+              "attribute": "hideCounts"
             }
           ],
           "events": [
@@ -755,6 +765,15 @@
               "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"
+            },
+            {
+              "name": "hideCounts",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "Whether to hide counts behind lineage options in the drop down selection.\nDefaults to false.",
+              "fieldName": "hideCounts"
             }
           ],
           "superclass": {
@@ -794,7 +813,7 @@
           "type": {
             "text": "Meta"
           },
-          "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'], }"
+          "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', }, }, hideCounts: { control: { type: 'boolean', }, }, lapisFilter: { age: 18, }, }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -930,6 +949,16 @@
               "default": "undefined",
               "description": "The placeholder text to display in the input field, if it is empty.",
               "attribute": "placeholderText"
+            },
+            {
+              "kind": "field",
+              "name": "hideCounts",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "Whether to hide counts behind location options in the drop down selection.\nDefaults to false.",
+              "attribute": "hideCounts"
             }
           ],
           "events": [
@@ -986,6 +1015,15 @@
               "default": "undefined",
               "description": "The placeholder text to display in the input field, if it is empty.",
               "fieldName": "placeholderText"
+            },
+            {
+              "name": "hideCounts",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "Whether to hide counts behind location options in the drop down selection.\nDefaults to false.",
+              "fieldName": "hideCounts"
             }
           ],
           "superclass": {
@@ -1025,7 +1063,7 @@
           "type": {
             "text": "Meta<MutationFilterProps>"
           },
-          "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'], }"
+          "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' }, enabledMutationTypes: { control: { type: 'object', }, }, }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1043,6 +1081,14 @@
           },
           "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",
+          "name": "RestrictEnabledMutationTypes",
+          "type": {
+            "text": "StoryObj<MutationFilterProps>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, enabledMutationTypes: ['nucleotideMutations', 'aminoAcidMutations'], }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); await waitFor(async () => { const placeholderText = inputField().getAttribute('placeholder'); await expect(placeholderText).toEqual('Enter a mutation (e.g. 23T, E:57Q)'); }); }, }"
+        },
         {
           "kind": "variable",
           "name": "MultiSegmentedReferenceGenomes",
@@ -1077,6 +1123,14 @@
             "module": "src/web-components/input/gs-mutation-filter.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "RestrictEnabledMutationTypes",
+          "declaration": {
+            "name": "RestrictEnabledMutationTypes",
+            "module": "src/web-components/input/gs-mutation-filter.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "MultiSegmentedReferenceGenomes",
@@ -1093,7 +1147,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\nThis component provides an input field to specify filters for nucleotide and amino acid mutations and insertions.\n\nInput values have to be provided one at a time and submitted by pressing the Enter key or by selecting an option from the dropdown.\nAlternatively, they can be provided as a string of comma-separated values, which will be directly parsed and validated.\nAfter submission (after pressing Enter or pasting a comma-separated string) an event is fired with the selected mutations.\nAll previously selected mutations are displayed at the input field and added to the event.\nUsers can remove a mutation by clicking the 'x' button next to the mutation.\n\n## Input Validation\n\nValidation of the input is performed according to the following rules:\n\n### Mutations\n\nMutations have to conform to the following format: `<gene/segment>:<symbol at reference><position><Substituted symbol/Deletion>`\n- Gene/segment: The gene or segment where the mutation occurs. Must be contained in the reference genome.\n  (Optional for elements with only one gene/segment)\n- Symbol at reference: The symbol at the reference position. (Optional)\n- Position: The position of the mutation. (Required)\n- Substituted symbol/Deletion: The substituted symbol or '-' for a deletion. (Required)\n\nExamples: `S:614G`, `614G`, `614-`, `614G`\n\n### Insertions\n\nInsertions have to conform to the following format: `ins_<gene/segment>:<position>:<Inserted symbols>`\n- Gene/segment: The gene or segment where the insertion occurs. Must be contained in the reference genome.\n  (Optional for elements with only one gene/segment)\n- Position: The position of the insertion. (Required)\n- Inserted symbols: The symbols that are inserted. (Required)\n\nExamples: `ins_S:614:G`, `ins_614:G`",
+          "description": "## Context\nThis component provides an input field to specify filters for nucleotide and amino acid mutations and insertions.\n\nInput values have to be provided one at a time and submitted by pressing the Enter key or by selecting an option from the dropdown.\nAlternatively, they can be provided as a string of comma-separated values, which will be directly parsed and validated.\nAfter submission (after pressing Enter or pasting a comma-separated string) an event is fired with the selected mutations.\nAll previously selected mutations are displayed at the input field and added to the event.\nUsers can remove a mutation by clicking the 'x' button next to the mutation.\n\n## Input Validation\n\nValidation of the input is performed according to the following rules:\n\n### Mutations\n\nMutations have to conform to the following format: `<gene/segment>:<symbol at reference><position><Substituted symbol/Deletion>`\n- Gene/segment: The gene or segment where the mutation occurs. Must be contained in the reference genome.\n  (Optional for elements with only one gene/segment)\n- Symbol at reference: The symbol at the reference position. (Optional)\n- Position: The position of the mutation. (Required)\n- Substituted symbol/Deletion: The substituted symbol or '-' for a deletion. (Required)\n\nExamples: `S:614G`, `614G`, `614-`, `614G`\n\n### Insertions\n\nInsertions have to conform to the following format: `ins_<gene/segment>:<position>:<Inserted symbols>`\n- Gene/segment: The gene or segment where the insertion occurs. Must be contained in the reference genome.\n  (Optional for elements with only one gene/segment)\n- Position: The position of the insertion. (Required)\n- Inserted symbols: The symbols that are inserted. (Required)\n\nExamples: `ins_S:614:G`, `ins_614:G`\n\n### Enabled mutation types\n\nAfter parsing, the entered mutation/insertion also has to match the enabled mutation types,\nwhich are configured with the `enabledMutationTypes` attribute.",
           "name": "MutationFilterComponent",
           "members": [
             {
@@ -1115,6 +1169,16 @@
               "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"
+            },
+            {
+              "kind": "field",
+              "name": "enabledMutationTypes",
+              "type": {
+                "text": "MutationType[] | undefined"
+              },
+              "default": "undefined",
+              "description": "Which mutation types this input will accept.\nAny (or all) of the following can be given in a list:\n\n- `nucleotideMutations`\n- `nucleotideInsertions`\n- `aminoAcidMutations`\n- `aminoAcidInsertions`\n\nBy default or if none are given, all types are accepted.",
+              "attribute": "enabledMutationTypes"
             }
           ],
           "events": [
@@ -1144,6 +1208,15 @@
               "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"
+            },
+            {
+              "name": "enabledMutationTypes",
+              "type": {
+                "text": "MutationType[] | undefined"
+              },
+              "default": "undefined",
+              "description": "Which mutation types this input will accept.\nAny (or all) of the following can be given in a list:\n\n- `nucleotideMutations`\n- `nucleotideInsertions`\n- `aminoAcidMutations`\n- `aminoAcidInsertions`\n\nBy default or if none are given, all types are accepted.",
+              "fieldName": "enabledMutationTypes"
             }
           ],
           "superclass": {
@@ -1398,7 +1471,7 @@
           "type": {
             "text": "Meta<Required<TextFilterProps>>"
           },
-          "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'], }"
+          "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', }, }, hideCounts: { control: { type: 'boolean', }, }, value: { control: { type: 'text', }, }, width: { control: { type: 'text', }, }, lapisFilter: { control: { type: 'object', }, }, }, tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1406,7 +1479,7 @@
           "type": {
             "text": "StoryObj<Required<TextFilterProps>>"
           },
-          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-(--breakpoint-lg)\"> <gs-text-filter .lapisField=${args.lapisField} .lapisFilter=${args.lapisFilter} .placeholderText=${args.placeholderText} .value=${args.value} .width=${args.width} ></gs-text-filter> </div> </gs-app>`; }, args: { lapisField: 'host', lapisFilter: { country: 'Germany' }, placeholderText: 'Enter host name', value: 'Homo sapiens', width: '100%', }, }"
+          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-(--breakpoint-lg)\"> <gs-text-filter .lapisField=${args.lapisField} .lapisFilter=${args.lapisFilter} .placeholderText=${args.placeholderText} .hideCounts=${args.hideCounts} .value=${args.value} .width=${args.width} ></gs-text-filter> </div> </gs-app>`; }, args: { lapisField: 'host', lapisFilter: { country: 'Germany' }, placeholderText: 'Enter host name', hideCounts: false, value: 'Homo sapiens', width: '100%', }, }"
         },
         {
           "kind": "variable",
@@ -1493,6 +1566,16 @@
               "description": "The placeholder text to display in the input field.",
               "attribute": "placeholderText"
             },
+            {
+              "kind": "field",
+              "name": "hideCounts",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "Whether to hide counts behind options in the drop down selection.\nDefaults to false.",
+              "attribute": "hideCounts"
+            },
             {
               "kind": "field",
               "name": "width",
@@ -1550,6 +1633,15 @@
               "description": "The placeholder text to display in the input field.",
               "fieldName": "placeholderText"
             },
+            {
+              "name": "hideCounts",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "description": "Whether to hide counts behind options in the drop down selection.\nDefaults to false.",
+              "fieldName": "hideCounts"
+            },
             {
               "name": "width",
               "type": {
@@ -2464,7 +2556,7 @@
           "type": {
             "text": "Meta<Required<MutationsOverTimeProps>>"
           },
-          "default": "{ title: 'Visualization/Mutations over time', component: 'gs-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['grid'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, lapisDateField: { control: 'text' }, displayMutations: { control: 'object' }, initialMeanProportionInterval: { control: 'object' }, useNewEndpoint: { control: 'boolean' }, pageSizes: { control: 'object' }, }, args: { lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, sequenceType: 'nucleotide', views: ['grid'], width: '100%', granularity: 'month', lapisDateField: 'date', initialMeanProportionInterval: { min: 0.05, max: 0.9 }, useNewEndpoint: false, pageSizes: [10, 20, 30, 40, 50], }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Mutations over time', component: 'gs-mutations-over-time', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['grid'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, granularity: { options: ['day', 'week', 'month', 'year'], control: { type: 'radio' }, }, lapisDateField: { control: 'text' }, displayMutations: { control: 'object' }, initialMeanProportionInterval: { control: 'object' }, hideGaps: { control: 'boolean' }, useNewEndpoint: { control: 'boolean' }, pageSizes: { control: 'object' }, }, args: { lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' }, sequenceType: 'nucleotide', views: ['grid'], width: '100%', granularity: 'month', lapisDateField: 'date', initialMeanProportionInterval: { min: 0.05, max: 0.9 }, hideGaps: false, useNewEndpoint: false, pageSizes: [10, 20, 30, 40, 50], }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, fetchMock: {}, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -2482,6 +2574,14 @@
           },
           "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A19722G', 'G21641T', 'T21653-'], }, }"
         },
+        {
+          "kind": "variable",
+          "name": "ByMonthWithFilterOnDisplayedMutationsAndGaps",
+          "type": {
+            "text": "StoryObj<Required<MutationsOverTimeProps>>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A19722G', 'G21641T', 'T21652-'], hideGaps: true, }, }"
+        },
         {
           "kind": "variable",
           "name": "ByWeek",
@@ -2540,6 +2640,14 @@
             "module": "src/web-components/visualization/gs-mutations-over-time.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "ByMonthWithFilterOnDisplayedMutationsAndGaps",
+          "declaration": {
+            "name": "ByMonthWithFilterOnDisplayedMutationsAndGaps",
+            "module": "src/web-components/visualization/gs-mutations-over-time.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "ByWeek",
@@ -2673,6 +2781,16 @@
               "description": "The initial proportion interval for the grid view.\nThe values must be between 0 and 1, inclusive.",
               "attribute": "initialMeanProportionInterval"
             },
+            {
+              "kind": "field",
+              "name": "hideGaps",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, date ranges with no data will be hidden initially; if false, not.\nCan be switched with a button in the toolbar.",
+              "attribute": "hideGaps"
+            },
             {
               "kind": "field",
               "name": "useNewEndpoint",
@@ -2785,6 +2903,15 @@
               "description": "The initial proportion interval for the grid view.\nThe values must be between 0 and 1, inclusive.",
               "fieldName": "initialMeanProportionInterval"
             },
+            {
+              "name": "hideGaps",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, date ranges with no data will be hidden initially; if false, not.\nCan be switched with a button in the toolbar.",
+              "fieldName": "hideGaps"
+            },
             {
               "name": "useNewEndpoint",
               "type": {