@genspectrum/dashboard-components 0.10.3 → 0.10.4

package/custom-elements.json

@@ -3200,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",
@@ -3416,6 +3736,14 @@
             "module": "./gs-mutations-over-time"
           }
         },
+        {
+          "kind": "js",
+          "name": "SequencesByLocationComponent",
+          "declaration": {
+            "name": "SequencesByLocationComponent",
+            "module": "./gs-sequences-by-location"
+          }
+        },
         {
           "kind": "js",
           "name": "StatisticsComponent",