@genspectrum/dashboard-components 0.10.2 → 0.10.4

package/custom-elements.json

@@ -80,6 +80,14 @@
           },
           "default": "{ ...Template, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(() => { expect(canvas.getByText(LAPIS_URL)).toBeVisible(); expect(canvas.getByText('\"name\": \"ORF1a\",', { exact: false })).toBeVisible(); }); }, }"
         },
+        {
+          "kind": "variable",
+          "name": "WithNoLapisUrl",
+          "type": {
+            "text": "StoryObj<{ lapis: string }>"
+          },
+          "default": "{ ...Default, args: { ...Default.args, lapis: 'notAValidUrl', }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(() => { expect(canvas.getByText(\"Error: Invalid LAPIS URL: 'notAValidUrl'\", { exact: false })).toBeVisible(); }); }, }"
+        },
         {
           "kind": "variable",
           "name": "DelayFetchingReferenceGenome",
@@ -94,7 +102,7 @@
           "type": {
             "text": "StoryObj<{ lapis: string }>"
           },
-          "default": "{ ...Template, args: { lapis: 'definitely-not-a-valid-url', }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(() => { expect(canvas.getByText('Error', { exact: false })).toBeVisible(); }); }, }"
+          "default": "{ ...Template, args: { lapis: 'https://url.to.lapis-definitely-not-a-valid-url', }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); await waitFor(() => { expect(canvas.getByText('Error: Cannot fetch reference genome.', { exact: false })).toBeVisible(); }); }, }"
         },
         {
           "kind": "class",
@@ -143,6 +151,14 @@
             "module": "src/web-components/app.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "WithNoLapisUrl",
+          "declaration": {
+            "name": "WithNoLapisUrl",
+            "module": "src/web-components/app.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "DelayFetchingReferenceGenome",
@@ -918,7 +934,7 @@
           "type": {
             "text": "StoryObj<MutationFilterProps>"
           },
-          "default": "{ ...Template, args: { initialValue: ['A123T'], }, }"
+          "default": "{ ...Template, args: { ...Template.args, initialValue: ['A123T'], }, }"
         },
         {
           "kind": "variable",
@@ -934,7 +950,7 @@
           "type": {
             "text": "StoryObj<MutationFilterProps>"
           },
-          "default": "{ ...Template, args: { initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'referenceGenome', url: REFERENCE_GENOME_ENDPOINT, }, response: { status: 200, body: { nucleotideSequences: [ { name: 'seg1', sequence: 'dummy', }, { name: 'seg2', sequence: 'dummy', }, ], genes: [ { name: 'gene1', sequence: 'dummy', }, { name: 'gene2', sequence: 'dummy', }, ], }, }, options: { overwriteRoutes: false, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); await waitFor(() => { const placeholderText = inputField().getAttribute('placeholder'); expect(placeholderText).toEqual( 'Enter a mutation (e.g. seg1:A123T, ins_seg1:123:AT, gene1:M123E, ins_gene1:123:ME)', ); }); await waitFor(() => { expect(canvas.getByText('seg1:123T')).toBeVisible(); expect(canvas.getByText('gene2:56')).toBeVisible(); return expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible(); }); }, }"
+          "default": "{ ...Template, args: { ...Template.args, initialValue: ['seg1:123T', 'gene2:56', 'ins_seg2:78:AAA'], }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'referenceGenome', url: REFERENCE_GENOME_ENDPOINT, }, response: { status: 200, body: { nucleotideSequences: [ { name: 'seg1', sequence: 'dummy', }, { name: 'seg2', sequence: 'dummy', }, ], genes: [ { name: 'gene1', sequence: 'dummy', }, { name: 'gene2', sequence: 'dummy', }, ], }, }, options: { overwriteRoutes: false, }, }, ], }, }, play: async ({ canvasElement }) => { const canvas = await withinShadowRoot(canvasElement, 'gs-mutation-filter'); const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false }); await waitFor(() => { const placeholderText = inputField().getAttribute('placeholder'); expect(placeholderText).toEqual( 'Enter a mutation (e.g. seg1:A123T, ins_seg1:123:AT, gene1:M123E, ins_gene1:123:ME)', ); }); await waitFor(() => { expect(canvas.getByText('seg1:123T')).toBeVisible(); expect(canvas.getByText('gene2:56')).toBeVisible(); return expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible(); }); }, }"
         }
       ],
       "exports": [
@@ -1127,9 +1143,9 @@
               "kind": "field",
               "name": "initialValue",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
+              "default": "undefined",
               "description": "The initial value to use for this text input.",
               "attribute": "initialValue"
             },
@@ -1147,9 +1163,9 @@
               "kind": "field",
               "name": "placeholderText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
+              "default": "undefined",
               "description": "The placeholder text to display in the input field.",
               "attribute": "placeholderText"
             },
@@ -1177,9 +1193,9 @@
             {
               "name": "initialValue",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
+              "default": "undefined",
               "description": "The initial value to use for this text input.",
               "fieldName": "initialValue"
             },
@@ -1195,9 +1211,9 @@
             {
               "name": "placeholderText",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
+              "default": "undefined",
               "description": "The placeholder text to display in the input field.",
               "fieldName": "placeholderText"
             },
@@ -1887,7 +1903,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nLAPIS filter to select the displayed data.",
+              "description": "LAPIS filter to select the displayed data. If not provided, all data is displayed.",
               "attribute": "lapisFilter"
             },
             {
@@ -1958,7 +1974,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nLAPIS filter to select the displayed data.",
+              "description": "LAPIS filter to select the displayed data. If not provided, all data is displayed.",
               "fieldName": "lapisFilter"
             },
             {
@@ -2131,7 +2147,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nLAPIS filter to select the displayed data.",
+              "description": "LAPIS filter to select the displayed data. If not provided, all data is displayed.",
               "attribute": "lapisFilter"
             },
             {
@@ -2192,7 +2208,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nLAPIS filter to select the displayed data.",
+              "description": "LAPIS filter to select the displayed data. If not provided, all data is displayed.",
               "fieldName": "lapisFilter"
             },
             {
@@ -2388,7 +2404,7 @@
                 "text": "{\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }\n        | {\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }[]"
               },
               "default": "{ displayName: '', lapisFilter: {} }",
-              "description": "Required.\n\nEither a LAPIS filter or an array of LAPIS filters to fetch the number of sequences for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used to label the component views.\nIt should be human-readable.",
+              "description": "Either a LAPIS filter or an array of LAPIS filters to fetch the number of sequences for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used to label the component views.\nIt should be human-readable.",
               "attribute": "lapisFilter"
             },
             {
@@ -2397,7 +2413,7 @@
               "type": {
                 "text": "string"
               },
-              "default": "'date'",
+              "default": "''",
               "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
               "attribute": "lapisDateField"
             },
@@ -2469,7 +2485,7 @@
                 "text": "{\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }\n        | {\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }[]"
               },
               "default": "{ displayName: '', lapisFilter: {} }",
-              "description": "Required.\n\nEither a LAPIS filter or an array of LAPIS filters to fetch the number of sequences for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used to label the component views.\nIt should be human-readable.",
+              "description": "Either a LAPIS filter or an array of LAPIS filters to fetch the number of sequences for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used to label the component views.\nIt should be human-readable.",
               "fieldName": "lapisFilter"
             },
             {
@@ -2477,7 +2493,7 @@
               "type": {
                 "text": "string"
               },
-              "default": "'date'",
+              "default": "''",
               "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
               "fieldName": "lapisDateField"
             },
@@ -2682,8 +2698,8 @@
               "type": {
                 "text": "{\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }\n        | {\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
               },
-              "default": "{displayName: '', lapisFilter: {}}",
-              "description": "Required.\nEither a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label the prevalence in the views.\nIt should be human-readable.",
+              "default": "{ displayName: '', lapisFilter: {} }",
+              "description": "Either a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label the prevalence in the views.\nIt should be human-readable.",
               "attribute": "numeratorFilter"
             },
             {
@@ -2693,7 +2709,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nThe LAPIS filter, to select the data of the reference.\nIt must be a valid LAPIS filter object.",
+              "description": "The LAPIS filter, to select the data of the reference.\nIt must be a valid LAPIS filter object.",
               "attribute": "denominatorFilter"
             },
             {
@@ -2762,7 +2778,7 @@
               "type": {
                 "text": "string"
               },
-              "default": "'date'",
+              "default": "''",
               "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
               "attribute": "lapisDateField"
             },
@@ -2803,8 +2819,8 @@
               "type": {
                 "text": "{\n            lapisFilter: Record<string, string | number | null | boolean>;\n            displayName: string;\n        }\n        | {\n        lapisFilter: Record<string, string | number | null | boolean>;\n        displayName: string;\n    }[]"
               },
-              "default": "{displayName: '', lapisFilter: {}}",
-              "description": "Required.\nEither a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label the prevalence in the views.\nIt should be human-readable.",
+              "default": "{ displayName: '', lapisFilter: {} }",
+              "description": "Either a LAPIS filter or an array of LAPIS filters to calculate the prevalence for.\n\nThe `lapisFilter` will be sent as is to LAPIS to select the data.\nIt must be a valid LAPIS filter object.\n\nThe `displayName` will be used as the label the prevalence in the views.\nIt should be human-readable.",
               "fieldName": "numeratorFilter"
             },
             {
@@ -2813,7 +2829,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nThe LAPIS filter, to select the data of the reference.\nIt must be a valid LAPIS filter object.",
+              "description": "The LAPIS filter, to select the data of the reference.\nIt must be a valid LAPIS filter object.",
               "fieldName": "denominatorFilter"
             },
             {
@@ -2875,7 +2891,7 @@
               "type": {
                 "text": "string"
               },
-              "default": "'date'",
+              "default": "''",
               "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
               "fieldName": "lapisDateField"
             },
@@ -2990,7 +3006,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nLAPIS filter to select the data of the focal variant.\nIt must be a valid LAPIS filter object.",
+              "description": "LAPIS filter to select the data of the focal variant.\nIt must be a valid LAPIS filter object.",
               "attribute": "numeratorFilter"
             },
             {
@@ -3000,7 +3016,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nLAPIS filter to select the data of the baseline variant.\nIt must be a valid LAPIS filter object.",
+              "description": "LAPIS filter to select the data of the baseline variant.\nIt must be a valid LAPIS filter object.",
               "attribute": "denominatorFilter"
             },
             {
@@ -3049,7 +3065,7 @@
               "type": {
                 "text": "string"
               },
-              "default": "'date'",
+              "default": "''",
               "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
               "attribute": "lapisDateField"
             },
@@ -3081,7 +3097,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nLAPIS filter to select the data of the focal variant.\nIt must be a valid LAPIS filter object.",
+              "description": "LAPIS filter to select the data of the focal variant.\nIt must be a valid LAPIS filter object.",
               "fieldName": "numeratorFilter"
             },
             {
@@ -3090,7 +3106,7 @@
                 "text": "Record<string, string | number | null | boolean>"
               },
               "default": "{}",
-              "description": "Required.\n\nLAPIS filter to select the data of the baseline variant.\nIt must be a valid LAPIS filter object.",
+              "description": "LAPIS filter to select the data of the baseline variant.\nIt must be a valid LAPIS filter object.",
               "fieldName": "denominatorFilter"
             },
             {
@@ -3134,7 +3150,7 @@
               "type": {
                 "text": "string"
               },
-              "default": "'date'",
+              "default": "''",
               "description": "Required.\n\nThe LAPIS field that the data should be aggregated by.\nThe values will be used on the x-axis of the diagram.\nMust be a field of type `date` in LAPIS.",
               "fieldName": "lapisDateField"
             },
@@ -3184,6 +3200,326 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/visualization/gs-sequences-by-location.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta<Required<SequencesByLocationProps>>"
+          },
+          "default": "{ title: 'Visualization/Sequences by location', component: 'gs-sequences-by-location', argTypes: {}, 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'], }"
+        },
+        {
+          "kind": "variable",
+          "name": "WorldMap",
+          "type": {
+            "text": "StoryObj<SequencesByLocationProps>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { dateFrom: '2022-01-01', dateTo: '2022-04-01' }, lapisLocationField: 'country', mapSource: { type: 'topojson', url: mockMapUrl, topologyObjectsKey: 'countries', }, zoom: 2, offsetX: 0, offsetY: 10, }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'worldMap', url: mockMapUrl, }, response: { status: 200, body: worldAtlas, }, }, { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['country'], dateFrom: '2022-01-01', dateTo: '2022-04-01', }, }, response: { status: 200, body: aggregatedWorld, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Germany",
+          "type": {
+            "text": "StoryObj<SequencesByLocationProps>"
+          },
+          "default": "{ ...Template, args: { ...Template.args, lapisFilter: { dateFrom: '2022-01-01', dateTo: '2022-04-01', country: 'Germany' }, lapisLocationField: 'division', mapSource: { type: 'topojson', url: mockMapUrl, topologyObjectsKey: 'deu', }, views: ['map', 'table'], zoom: 6.3, offsetX: 10, offsetY: 51.4, }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'worldMap', url: mockMapUrl, }, response: { status: 200, body: mapOfGermany, }, }, { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division'], dateFrom: '2022-01-01', dateTo: '2022-04-01', country: 'Germany', }, }, response: { status: 200, body: aggregatedGermany, }, }, ], }, }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "GermanyTableOnly",
+          "type": {
+            "text": "StoryObj<SequencesByLocationProps>"
+          },
+          "default": "{ render: (args) => html` <gs-app lapis=\"${LAPIS_URL}\"> <gs-sequences-by-location .lapisFilter=${args.lapisFilter} .lapisLocationField=${args.lapisLocationField} .width=${args.width} .height=${args.height} .views=${args.views} .pageSize=${args.pageSize} ></gs-sequences-by-location> </gs-app> `, args: { lapisFilter: { dateFrom: '2022-01-01', dateTo: '2022-04-01', country: 'Germany' }, lapisLocationField: 'division', width: '100%', height: '700px', views: ['table'], pageSize: 10, }, parameters: { fetchMock: { mocks: [ { matcher: { name: 'aggregatedData', url: AGGREGATED_ENDPOINT, body: { fields: ['division'], dateFrom: '2022-01-01', dateTo: '2022-04-01', country: 'Germany', }, }, response: { status: 200, body: aggregatedGermany, }, }, ], }, }, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/web-components/visualization/gs-sequences-by-location.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WorldMap",
+          "declaration": {
+            "name": "WorldMap",
+            "module": "src/web-components/visualization/gs-sequences-by-location.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Germany",
+          "declaration": {
+            "name": "Germany",
+            "module": "src/web-components/visualization/gs-sequences-by-location.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GermanyTableOnly",
+          "declaration": {
+            "name": "GermanyTableOnly",
+            "module": "src/web-components/visualization/gs-sequences-by-location.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/visualization/gs-sequences-by-location.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "## Context\n\nThis component shows the geographic distribution of sequence data from LAPIS.\nIt displays the count and proportion (number of sample per `lapisLocationField` / number of samples matching the `lapisFilter`)\nof the data by location.\n\n## Views\n\n### Map View\n\nThis view displays a chloropleth map based on [Leaflet](https://leafletjs.com/).\nThe component expects a `mapSource` object that specifies where the map data can be downloaded from.\nWe can imagine that we add other map source types later (for example, GeoJSON).\n\n#### TopoJSON\n\nSuppose you provide this example object as `mapSource`:\n\n```json\n{\n   \"type\": \"topojson\",\n   \"url\": \"https://example.com/map.topojson\",\n   \"topologyObjectsKey\": \"myObjectKey\"\n}\n```\n\nThe URL must point to a [TopoJSON file](https://github.com/topojson/topojson) that contains the map data.\nThe TopoJSON file must schematically look like this,\nwhere `objects[topologyObjectsKey]` must be a valid GeometryCollection (`objects.myObjectKey` in this example):\n\n```json\n{\n  \"type\": \"Topology\",\n  \"objects\": {\n    \"myObjectKey\": {\n      \"type\": \"GeometryCollection\",\n      \"geometries\": [\n        {\n          \"type\": \"Polygon\",\n          \"properties\": {\n            \"name\": \"North Rhine Westphalia\"\n          },\n          \"id\": \"DE.NW\",\n          \"arcs\": [...]\n        },\n        ...\n      ]\n    }\n  },\n  \"arcs\": [...],\n  \"transform\": {...}\n}\n```\n\nYou can use any valid TopoJSON file.\nhttps://github.com/markmarkoh/datamaps/tree/master/src/js/data contains TopoJSON files for many countries.\n\nThe `lapisFilter` is used to select the data to display, and it is aggregated by the `lapisLocationField`.\nThis component assumes that every geometry object in the TopoJSON file has a `properties.name` field.\n\nThe values that LAPIS returns for `lapisLocationField` must match the `properties.name` in the map data.\nLAPIS entries where `lapisLocationField` is `null` are ignored on the map.\n\nThe names of the locations in the TopoJSON map and in LAPIS should match.\nHowever, there are two cases of misalignment:\n- If there is a LAPIS location that does not match any location in the TopoJSON map,\n  the component will log a console warning to assist in creating map data that aligns with the LAPIS data.\n- If a TopoJSON location does not match any LAPIS location for the given filter,\n  no data will be displayed for this location.\n  This is expected, as LAPIS will only return locations where sequences have been collected for that filter.\n\n### Table View\n\nThis view displays the data in a table format.\nIt is similar to the table view of the `gs-aggregate` component.\nThe table has three columns:\n- `lapisLocationField`,\n- `count` (the number of samples in this location matching the `lapisFilter`),\n- `proportion` (`count` / sum of the `count` of all locations).",
+          "name": "SequencesByLocationComponent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "lapisFilter",
+              "type": {
+                "text": "Record<string, string | number | null | boolean>"
+              },
+              "default": "{}",
+              "description": "LAPIS filter to select the displayed data.\nIf you want to display the distribution over the states of a certain country,\nyou should usually filter by that country here (e.g. { country: 'USA' }).",
+              "attribute": "lapisFilter"
+            },
+            {
+              "kind": "field",
+              "name": "lapisLocationField",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Required.\n\nThe location field to aggregate the data by.\nThis should match the selected map location granularity.",
+              "attribute": "lapisLocationField"
+            },
+            {
+              "kind": "field",
+              "name": "mapSource",
+              "type": {
+                "text": "{ type: 'topojson'; url: string; topologyObjectsKey: string } | undefined"
+              },
+              "default": "undefined",
+              "description": "Required when using the map view.\n\nThe source of the map data. See component level docs for more information.",
+              "attribute": "mapSource"
+            },
+            {
+              "kind": "field",
+              "name": "enableMapNavigation",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Enable map navigation (dragging, keyboard navigation, zooming).",
+              "attribute": "enableMapNavigation"
+            },
+            {
+              "kind": "field",
+              "name": "width",
+              "type": {
+                "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.",
+              "attribute": "width"
+            },
+            {
+              "kind": "field",
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "default": "'700px'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "attribute": "height"
+            },
+            {
+              "kind": "field",
+              "name": "views",
+              "type": {
+                "text": "('map' | 'table')[]"
+              },
+              "default": "['map', 'table']",
+              "description": "A list of tabs with views that this component should provide.",
+              "attribute": "views"
+            },
+            {
+              "kind": "field",
+              "name": "zoom",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The initial zoom level of the map.",
+              "attribute": "zoom"
+            },
+            {
+              "kind": "field",
+              "name": "offsetX",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Initially shift the center of the map in x direction (longitude).\n\n`-180` is the International Date Line with the map shifted to the right, `0` is the prime meridian,\n`180` is the International Date Line with the map shifted to the left.",
+              "attribute": "offsetX"
+            },
+            {
+              "kind": "field",
+              "name": "offsetY",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Initially shift the center of the map in y direction (latitude).\n\n`-90` is the South Pole, `0` is the equator, `90` is the North Pole.",
+              "attribute": "offsetY"
+            },
+            {
+              "kind": "field",
+              "name": "pageSize",
+              "type": {
+                "text": "boolean | number"
+              },
+              "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"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "lapisFilter",
+              "type": {
+                "text": "Record<string, string | number | null | boolean>"
+              },
+              "default": "{}",
+              "description": "LAPIS filter to select the displayed data.\nIf you want to display the distribution over the states of a certain country,\nyou should usually filter by that country here (e.g. { country: 'USA' }).",
+              "fieldName": "lapisFilter"
+            },
+            {
+              "name": "lapisLocationField",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Required.\n\nThe location field to aggregate the data by.\nThis should match the selected map location granularity.",
+              "fieldName": "lapisLocationField"
+            },
+            {
+              "name": "mapSource",
+              "type": {
+                "text": "{ type: 'topojson'; url: string; topologyObjectsKey: string } | undefined"
+              },
+              "default": "undefined",
+              "description": "Required when using the map view.\n\nThe source of the map data. See component level docs for more information.",
+              "fieldName": "mapSource"
+            },
+            {
+              "name": "enableMapNavigation",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Enable map navigation (dragging, keyboard navigation, zooming).",
+              "fieldName": "enableMapNavigation"
+            },
+            {
+              "name": "width",
+              "type": {
+                "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.",
+              "fieldName": "width"
+            },
+            {
+              "name": "height",
+              "type": {
+                "text": "string"
+              },
+              "default": "'700px'",
+              "description": "The height of the component.\n\nVisit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.",
+              "fieldName": "height"
+            },
+            {
+              "name": "views",
+              "type": {
+                "text": "('map' | 'table')[]"
+              },
+              "default": "['map', 'table']",
+              "description": "A list of tabs with views that this component should provide.",
+              "fieldName": "views"
+            },
+            {
+              "name": "zoom",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "The initial zoom level of the map.",
+              "fieldName": "zoom"
+            },
+            {
+              "name": "offsetX",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Initially shift the center of the map in x direction (longitude).\n\n`-180` is the International Date Line with the map shifted to the right, `0` is the prime meridian,\n`180` is the International Date Line with the map shifted to the left.",
+              "fieldName": "offsetX"
+            },
+            {
+              "name": "offsetY",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Initially shift the center of the map in y direction (latitude).\n\n`-90` is the South Pole, `0` is the equator, `90` is the North Pole.",
+              "fieldName": "offsetY"
+            },
+            {
+              "name": "pageSize",
+              "type": {
+                "text": "boolean | number"
+              },
+              "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"
+            }
+          ],
+          "superclass": {
+            "name": "PreactLitAdapterWithGridJsStyles",
+            "module": "/src/web-components/PreactLitAdapterWithGridJsStyles"
+          },
+          "tagName": "gs-sequences-by-location",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SequencesByLocationComponent",
+          "declaration": {
+            "name": "SequencesByLocationComponent",
+            "module": "src/web-components/visualization/gs-sequences-by-location.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "gs-sequences-by-location",
+          "declaration": {
+            "name": "SequencesByLocationComponent",
+            "module": "src/web-components/visualization/gs-sequences-by-location.tsx"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/web-components/visualization/gs-statistics.stories.ts",
@@ -3400,6 +3736,14 @@
             "module": "./gs-mutations-over-time"
           }
         },
+        {
+          "kind": "js",
+          "name": "SequencesByLocationComponent",
+          "declaration": {
+            "name": "SequencesByLocationComponent",
+            "module": "./gs-sequences-by-location"
+          }
+        },
         {
           "kind": "js",
           "name": "StatisticsComponent",