@genspectrum/dashboard-components 1.4.0 → 1.5.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": {
@@ -1398,7 +1436,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 +1444,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 +1531,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 +1598,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 +2521,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 +2539,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 +2605,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 +2746,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 +2868,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": {