@genspectrum/dashboard-components 1.10.3 → 1.11.1

package/custom-elements.json

@@ -628,7 +628,7 @@
           "type": {
             "text": "StoryObj<Required<LineageFilterProps>>"
           },
-          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-(--breakpoint-lg)\"> <gs-lineage-filter lapisField=\"pangoLineage\" placeholderText=\"Enter a lineage\" value=\"B.1.1.7\" .multiSelect=${args.multiSelect} ></gs-lineage-filter> </div> </gs-app>`; }, args: { multiSelect: false, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); await waitFor(() => { return expect(canvas.getByPlaceholderText('Enter a lineage')).toBeVisible(); }); }, }"
+          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-(--breakpoint-lg)\"> <gs-lineage-filter lapisField=\"pangoLineage\" placeholderText=\"Enter a lineage\" value=\"B.1.1.7\" .lapisFilter=${args.lapisFilter} .multiSelect=${args.multiSelect} ></gs-lineage-filter> </div> </gs-app>`; }, args: { multiSelect: false, lapisFilter: { country: 'Germany', }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); await waitFor(() => { return expect(canvas.getByPlaceholderText('Enter a lineage')).toBeVisible(); }); }, }"
         },
         {
           "kind": "variable",
@@ -636,7 +636,7 @@
           "type": {
             "text": "StoryObj<Required<LineageFilterProps>>"
           },
-          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-(--breakpoint-lg)\"> <gs-lineage-filter lapisField=\"pangoLineage\" placeholderText=\"Enter a lineage\" value='[\"B.1.1.7\", \"B.1.1.10\"]' .multiSelect=${args.multiSelect} ></gs-lineage-filter> </div> </gs-app>`; }, args: { multiSelect: true, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); await waitFor(() => { return expect(canvas.getByPlaceholderText('Enter a lineage')).toBeVisible(); }); }, }"
+          "default": "{ render: (args) => { return html` <gs-app lapis=\"${LAPIS_URL}\"> <div class=\"max-w-(--breakpoint-lg)\"> <gs-lineage-filter lapisField=\"pangoLineage\" placeholderText=\"Enter a lineage\" value='[\"B.1.1.7\", \"B.1.1.10\"]' .lapisFilter=${args.lapisFilter} .multiSelect=${args.multiSelect} ></gs-lineage-filter> </div> </gs-app>`; }, args: { multiSelect: true, lapisFilter: { country: 'Germany', }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-lineage-filter'); await waitFor(() => { return expect(canvas.getByPlaceholderText('Enter a lineage')).toBeVisible(); }); }, }"
         },
         {
           "kind": "variable",
@@ -2717,7 +2717,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' }, 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'], }"
+          "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' }, customColumns: { 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",
@@ -2774,6 +2774,14 @@
             "text": "StoryObj<Required<MutationsOverTimeProps>>"
           },
           "default": "{ ...Template, args: { ...Template, height: '700px', }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "WithCustomColumns",
+          "type": {
+            "text": "StoryObj<Required<MutationsOverTimeProps>>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, displayMutations: ['A19722G', 'G21641T', 'T21653-'], customColumns: [ { header: 'Jaccard Index', values: { A19722G: 0.75, G21641T: 0.92, 'T21653-': 0.58, }, }, ], }, }"
         }
       ],
       "exports": [
@@ -2840,6 +2848,14 @@
             "name": "WithFixedHeight",
             "module": "src/web-components/visualization/gs-mutations-over-time.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "WithCustomColumns",
+          "declaration": {
+            "name": "WithCustomColumns",
+            "module": "src/web-components/visualization/gs-mutations-over-time.stories.ts"
+          }
         }
       ]
     },
@@ -2971,6 +2987,16 @@
               "default": "[10, 20, 30, 40, 50]",
               "description": "The number of rows per page, which can be selected by the user.",
               "attribute": "pageSizes"
+            },
+            {
+              "kind": "field",
+              "name": "customColumns",
+              "type": {
+                "text": "{ header: string; values: Record<string, string | number> }[] | undefined"
+              },
+              "default": "undefined",
+              "description": "Custom columns to add to the grid.\nEach column has a header and a map of mutation codes to values.",
+              "attribute": "customColumns"
             }
           ],
           "events": [
@@ -3090,6 +3116,15 @@
               "default": "[10, 20, 30, 40, 50]",
               "description": "The number of rows per page, which can be selected by the user.",
               "fieldName": "pageSizes"
+            },
+            {
+              "name": "customColumns",
+              "type": {
+                "text": "{ header: string; values: Record<string, string | number> }[] | undefined"
+              },
+              "default": "undefined",
+              "description": "Custom columns to add to the grid.\nEach column has a header and a map of mutation codes to values.",
+              "fieldName": "customColumns"
             }
           ],
           "superclass": {