@genspectrum/dashboard-components 0.11.5 → 0.11.7

package/custom-elements.json

@@ -1369,7 +1369,7 @@
           "type": {
             "text": "Meta<Required<AggregateProps>>"
           },
-          "default": "{ title: 'Visualization/Aggregate', component: 'gs-aggregate', argTypes: { fields: [{ control: 'object' }], views: { options: ['table'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, pageSize: { control: 'object' }, initialSortField: { control: 'text' }, initialSortDirection: { options: ['ascending', 'descending'], control: { type: 'radio' }, }, }, parameters: withComponentDocs({ fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'host'], country: 'USA', }, }, response: { status: 200, body: aggregatedData, }, }, ], }, componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Aggregate', component: 'gs-aggregate', argTypes: { fields: [{ control: 'object' }], views: { options: ['table', 'bar'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, pageSize: { control: 'object' }, initialSortField: { control: 'text' }, initialSortDirection: { options: ['ascending', 'descending'], control: { type: 'radio' }, }, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -1377,7 +1377,23 @@
           "type": {
             "text": "StoryObj<Required<AggregateProps>>"
           },
-          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .lapisFilter=${args.lapisFilter} .views=${args.views} .width=${args.width} .height=${args.height} .initialSortField=${args.initialSortField} .initialSortDirection=${args.initialSortDirection} .pageSize=${args.pageSize} ></gs-aggregate> </gs-app> `, args: { fields: ['division', 'host'], views: ['table'], lapisFilter: { country: 'USA', }, width: '100%', height: '700px', initialSortField: 'count', initialSortDirection: 'descending', pageSize: 10, }, }"
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-aggregate .fields=${args.fields} .lapisFilter=${args.lapisFilter} .views=${args.views} .width=${args.width} .height=${args.height} .initialSortField=${args.initialSortField} .initialSortDirection=${args.initialSortDirection} .pageSize=${args.pageSize} .maxNumberOfBars=${args.maxNumberOfBars} ></gs-aggregate> </gs-app> `, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'host'], country: 'USA', }, }, response: { status: 200, body: aggregatedData, }, }, ], }, }, args: { fields: ['division', 'host'], views: ['table', 'bar'], lapisFilter: { country: 'USA', }, width: '100%', height: '700px', initialSortField: 'count', initialSortDirection: 'descending', pageSize: 10, maxNumberOfBars: 10, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "BarChartWithOneField",
+          "type": {
+            "text": "StoryObj<Required<AggregateProps>>"
+          },
+          "default": "{ ...Table, args: { ...Table.args, fields: ['division'], views: ['bar', 'table'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division'], country: 'USA', }, }, response: { status: 200, body: aggregatedDataWith1Field, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "BarChartWithTwoFields",
+          "type": {
+            "text": "StoryObj<Required<AggregateProps>>"
+          },
+          "default": "{ ...Table, args: { ...Table.args, fields: ['division', 'nextstrainClade'], lapisFilter: { country: 'Germany', dateTo: '2022-02-01', }, views: ['bar', 'table'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division', 'nextstrainClade'], country: 'Germany', dateTo: '2022-02-01', }, }, response: { status: 200, body: aggregatedDataWith2Fields, }, }, ], }, }, }"
         }
       ],
       "exports": [
@@ -1396,6 +1412,22 @@
             "name": "Table",
             "module": "src/web-components/visualization/gs-aggregate.stories.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "BarChartWithOneField",
+          "declaration": {
+            "name": "BarChartWithOneField",
+            "module": "src/web-components/visualization/gs-aggregate.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BarChartWithTwoFields",
+          "declaration": {
+            "name": "BarChartWithTwoFields",
+            "module": "src/web-components/visualization/gs-aggregate.stories.ts"
+          }
         }
       ]
     },
@@ -1405,7 +1437,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "## Context\n\nThis component displays aggregated data in a table, which can provide an overview of the underlying data.\n\nIt expects a list of `fields` to aggregate by and a `filter` to apply to the data.\n\n## Views\n\n### Table View\n\nIn the table view, the data is presented in a table format where each field is a column,\nalong with the aggregated value and its proportion.\nThe proportion represents the ratio of the aggregated value to the total count of the data\n(considering the applied filter).",
+          "description": "## Context\n\nThis component displays aggregated data in a table, which can provide an overview of the underlying data.\n\nIt expects a list of `fields` to aggregate by and a `filter` to apply to the data.\n\n## Views\n\n### Table View\n\nIn the table view, the data is presented in a table format where each field is a column,\nalong with the aggregated value and its proportion.\nThe proportion represents the ratio of the aggregated value to the total count of the data\n(considering the applied filter).\n\n### Bar Chart View\n\nIn the bar chart view, the data is presented in vertical bars.\nThe bar chart is supported when `fields` contains one or two entries.\nThe first field will be used as the y-axis.\nIf a second field is provided, it's values will be stacked along the x-axis for each key on the y-axis.\n\nThe chart shows the bars with the highest aggregated `count`.\nThe number of bars can be adjusted with the `maxNumberOfBars` property.",
           "name": "AggregateComponent",
           "members": [
             {
@@ -1487,6 +1519,16 @@
               "default": "false",
               "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
               "attribute": "pageSize"
+            },
+            {
+              "kind": "field",
+              "name": "maxNumberOfBars",
+              "type": {
+                "text": "number"
+              },
+              "default": "20",
+              "description": "The maximum number of bars to display in the bar chart view.",
+              "attribute": "maxNumberOfBars"
             }
           ],
           "attributes": [
@@ -1561,6 +1603,15 @@
               "default": "false",
               "description": "The maximum number of rows to display in the table view.\nSet to `false` to disable pagination. Set to `true` to enable pagination with a default limit (10).",
               "fieldName": "pageSize"
+            },
+            {
+              "name": "maxNumberOfBars",
+              "type": {
+                "text": "number"
+              },
+              "default": "20",
+              "description": "The maximum number of bars to display in the bar chart view.",
+              "fieldName": "maxNumberOfBars"
             }
           ],
           "superclass": {
@@ -2069,7 +2120,7 @@
           "type": {
             "text": "Meta<Required<MutationsProps>>"
           },
-          "default": "{ title: 'Visualization/Mutations', component: 'gs-mutations', argTypes: { lapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'grid', 'insertions'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, pageSize: { control: 'object' }, }, args: { lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' }, sequenceType: 'nucleotide', views: ['grid', 'table', 'insertions'], width: '100%', height: '700px', pageSize: 10, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
+          "default": "{ title: 'Visualization/Mutations', component: 'gs-mutations', argTypes: { lapisFilter: { control: 'object' }, baselineLapisFilter: { control: 'object' }, sequenceType: { options: ['nucleotide', 'amino acid'], control: { type: 'radio' }, }, views: { options: ['table', 'grid', 'insertions'], control: { type: 'check' }, }, width: { control: 'text' }, height: { control: 'text' }, pageSize: { control: 'object' }, }, args: { lapisFilter: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' }, baselineLapisFilter: { country: 'Switzerland', dateTo: '2022-01-01' }, sequenceType: 'nucleotide', views: ['grid', 'table', 'insertions'], width: '100%', height: '700px', pageSize: 10, }, parameters: withComponentDocs({ componentDocs: { opensShadowDom: true, expectsChildren: false, codeExample, }, }), tags: ['autodocs'], }"
         },
         {
           "kind": "variable",
@@ -2077,7 +2128,7 @@
           "type": {
             "text": "StoryObj<Required<MutationsProps>>"
           },
-          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: { name: 'nucleotideMutations', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01', minProportion: 0, }, }, response: { status: 200, body: nucleotideMutations, }, }, { matcher: { name: 'nucleotideInsertions', url: NUCLEOTIDE_INSERTIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' }, }, response: { status: 200, body: nucleotideInsertions, }, }, ], }, }, }"
+          "default": "{ ...Template, parameters: { fetchMock: { mocks: [ { matcher: { name: 'nucleotideMutations', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01', minProportion: 0, }, }, response: { status: 200, body: nucleotideMutations, }, }, { matcher: { name: 'baselineNucleotideMutations', url: NUCLEOTIDE_MUTATIONS_ENDPOINT, body: { country: 'Switzerland', dateTo: '2022-01-01', minProportion: 0, }, }, response: { status: 200, body: baselineNucleotideMutations, }, }, { matcher: { name: 'overallVariantCount', url: AGGREGATED_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01', fields: [], }, }, response: { status: 200, body: overallVariantCount, }, }, { matcher: { name: 'nucleotideInsertions', url: NUCLEOTIDE_INSERTIONS_ENDPOINT, body: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' }, }, response: { status: 200, body: nucleotideInsertions, }, }, ], }, }, }"
         },
         {
           "kind": "variable",
@@ -2087,6 +2138,14 @@
           },
           "default": "{ ...Default, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutations'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Table' })); }, }"
         },
+        {
+          "kind": "variable",
+          "name": "OnTableTabWithoutJaccardSimilarity",
+          "type": {
+            "text": "StoryObj<Required<MutationsProps>>"
+          },
+          "default": "{ ...Default, args: { ...Default.args, baselineLapisFilter: undefined, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutations'); await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument()); await fireEvent.click(canvas.getByRole('button', { name: 'Table' })); }, }"
+        },
         {
           "kind": "variable",
           "name": "OnInsertionsTab",
@@ -2121,6 +2180,14 @@
             "module": "src/web-components/visualization/gs-mutations.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "OnTableTabWithoutJaccardSimilarity",
+          "declaration": {
+            "name": "OnTableTabWithoutJaccardSimilarity",
+            "module": "src/web-components/visualization/gs-mutations.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "OnInsertionsTab",
@@ -2137,7 +2204,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### 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\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": [
             {
@@ -2150,6 +2217,16 @@
               "description": "LAPIS filter to select the displayed data. If not provided, all data is displayed.",
               "attribute": "lapisFilter"
             },
+            {
+              "kind": "field",
+              "name": "baselineLapisFilter",
+              "type": {
+                "text": "(Record<string, string | string[] | number | null | boolean | undefined> & {\n              nucleotideMutations?: string[];\n              aminoAcidMutations?: string[];\n              nucleotideInsertions?: string[];\n              aminoAcidInsertions?: string[];\n          })\n        | undefined"
+              },
+              "default": "undefined",
+              "description": "LAPIS filter to select the mutation counts that are used to compute the Jaccard similarity.\nIf not provided, the Jaccard similarity is not computed.\nFor details, see the [Jaccard Similarity](#jaccard-similarity) section in the component description.",
+              "attribute": "baselineLapisFilter"
+            },
             {
               "kind": "field",
               "name": "sequenceType",
@@ -2211,6 +2288,15 @@
               "description": "LAPIS filter to select the displayed data. If not provided, all data is displayed.",
               "fieldName": "lapisFilter"
             },
+            {
+              "name": "baselineLapisFilter",
+              "type": {
+                "text": "(Record<string, string | string[] | number | null | boolean | undefined> & {\n              nucleotideMutations?: string[];\n              aminoAcidMutations?: string[];\n              nucleotideInsertions?: string[];\n              aminoAcidInsertions?: string[];\n          })\n        | undefined"
+              },
+              "default": "undefined",
+              "description": "LAPIS filter to select the mutation counts that are used to compute the Jaccard similarity.\nIf not provided, the Jaccard similarity is not computed.\nFor details, see the [Jaccard Similarity](#jaccard-similarity) section in the component description.",
+              "fieldName": "baselineLapisFilter"
+            },
             {
               "name": "sequenceType",
               "type": {