@genspectrum/dashboard-components 0.10.3 → 0.11.0

package/dist/util.js

@@ -1,4 +1,4 @@
-import { D, d, v } from "./dateRangeOption-DjtcAEWq.js";
+import { D, d, v } from "./dateRangeOption-Bh2p78z0.js";
 export {
   D as DateRangeOptionChangedEvent,
   d as dateRangeOptionPresets,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.10.3",
+    "version": "0.11.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -28,14 +28,14 @@
     },
     "exports": {
         "./components": {
+            "types": "./dist/components.d.ts",
             "import": "./dist/components.js",
-            "require": "./dist/components.js",
-            "types": "./dist/components.d.ts"
+            "require": "./dist/components.js"
         },
         "./util": {
+            "types": "./dist/util.d.ts",
             "import": "./dist/util.js",
-            "require": "./dist/util.js",
-            "types": "./dist/util.d.ts"
+            "require": "./dist/util.js"
         },
         "./custom-elements.json": "./custom-elements.json",
         "./package.json": "./package.json",
@@ -83,14 +83,16 @@
         "@lit/context": "^1.1.1",
         "@lit/reactive-element": "^2.0.4",
         "@lit/task": "^1.0.0",
-        "chart.js": "^4.4.2",
+        "chart.js": "^4.4.6",
         "chartjs-chart-error-bars": "^4.4.0",
         "chartjs-chart-venn": "^4.3.0",
         "dayjs": "^1.11.10",
         "flatpickr": "^4.6.13",
         "gridjs": "^6.2.0",
+        "leaflet": "^1.9.4",
         "lit": "^3.1.3",
         "preact": "^10.20.1",
+        "topojson-client": "^3.1.0",
         "zod": "^3.23.0"
     },
     "devDependencies": {
@@ -112,7 +114,11 @@
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
         "@tailwindcss/container-queries": "^0.1.1",
+        "@types/geojson": "^7946.0.15",
+        "@types/leaflet": "^1.9.15",
         "@types/node": "^22.0.0",
+        "@types/topojson-client": "^3.1.5",
+        "@types/topojson-specification": "^1.0.5",
         "@typescript-eslint/eslint-plugin": "^8.2.0",
         "@typescript-eslint/parser": "^8.2.0",
         "autoprefixer": "^10.4.19",
@@ -133,7 +139,7 @@
         "storybook-addon-fetch-mock": "^2.0.0",
         "tailwindcss": "^3.4.3",
         "typescript": "~5.7.2",
-        "vite": "^5.2.10",
+        "vite": "^6.0.3",
         "vite-plugin-dts": "^4.0.3",
         "vitest": "^2.0.1"
     }

package/src/preact/aggregatedData/aggregate.stories.tsx

@@ -5,7 +5,7 @@ import aggregatedData from './__mockData__/aggregated.json';
 import { Aggregate, type AggregateProps } from './aggregate';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta<AggregateProps> = {
     title: 'Visualization/Aggregate',
@@ -51,7 +51,7 @@ export const Default: StoryObj<AggregateProps> = {
     args: {
         fields: ['division', 'host'],
         views: ['table'],
-        filter: {
+        lapisFilter: {
             country: 'USA',
         },
         width: '100%',

package/src/preact/aggregatedData/aggregate.tsx

@@ -16,13 +16,13 @@ import { ResizeContainer } from '../components/resize-container';
 import Tabs from '../components/tabs';
 import { useQuery } from '../useQuery';
 
-const viewSchema = z.literal(views.table);
-export type View = z.infer<typeof viewSchema>;
+const aggregateViewSchema = z.literal(views.table);
+export type AggregateView = z.infer<typeof aggregateViewSchema>;
 
 const aggregatePropsSchema = z.object({
-    filter: lapisFilterSchema,
+    lapisFilter: lapisFilterSchema,
     fields: z.array(z.string().min(1)),
-    views: z.array(viewSchema),
+    views: z.array(aggregateViewSchema),
     initialSortField: z.string(),
     initialSortDirection: z.union([z.literal('ascending'), z.literal('descending')]),
     pageSize: z.union([z.boolean(), z.number()]),
@@ -45,12 +45,15 @@ export const Aggregate: FunctionComponent<AggregateProps> = (componentProps) =>
 };
 
 export const AggregateInner: FunctionComponent<AggregateProps> = (componentProps) => {
-    const { fields, filter, initialSortField, initialSortDirection } = componentProps;
+    const { fields, lapisFilter, initialSortField, initialSortDirection } = componentProps;
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(async () => {
-        return queryAggregateData(filter, fields, lapis, { field: initialSortField, direction: initialSortDirection });
-    }, [filter, fields, lapis]);
+        return queryAggregateData(lapisFilter, fields, lapis, {
+            field: initialSortField,
+            direction: initialSortDirection,
+        });
+    }, [lapisFilter, fields, lapis]);
 
     if (isLoading) {
         return <LoadingDisplay />;
@@ -73,7 +76,7 @@ type AggregatedDataTabsProps = {
 };
 
 const AggregatedDataTabs: FunctionComponent<AggregatedDataTabsProps> = ({ data, originalComponentProps }) => {
-    const getTab = (view: View) => {
+    const getTab = (view: AggregateView) => {
         switch (view) {
             case 'table':
                 return {

package/src/preact/dateRangeSelector/date-range-selector.stories.tsx

@@ -8,7 +8,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
 import { dateRangeOptionPresets } from './dateRangeOption';
-import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const earliestDate = '1970-01-01';
 
@@ -54,7 +54,7 @@ const meta: Meta<DateRangeSelectorProps> = {
         dateRangeOptions: [dateRangeOptionPresets.lastMonth, dateRangeOptionPresets.allTimes, customDateRange],
         earliestDate,
         initialValue: dateRangeOptionPresets.lastMonth.label,
-        dateColumn: 'aDateColumn',
+        lapisDateField: 'aDateColumn',
         width: '100%',
         initialDateFrom: undefined,
         initialDateTo: undefined,
@@ -66,15 +66,7 @@ export default meta;
 export const Primary: StoryObj<DateRangeSelectorProps> = {
     render: (args) => (
         <LapisUrlContext.Provider value={LAPIS_URL}>
-            <DateRangeSelector
-                dateRangeOptions={args.dateRangeOptions}
-                earliestDate={args.earliestDate}
-                initialValue={args.initialValue}
-                initialDateFrom={args.initialDateFrom}
-                initialDateTo={args.initialDateTo}
-                width={args.width}
-                dateColumn={args.dateColumn}
-            />
+            <DateRangeSelector {...args} />
         </LapisUrlContext.Provider>
     ),
 };
@@ -226,7 +218,7 @@ export const WithNoDateColumn: StoryObj<DateRangeSelectorProps> = {
     ...Primary,
     args: {
         ...Primary.args,
-        dateColumn: '',
+        lapisDateField: '',
     },
     play: async ({ canvasElement, step }) => {
         step('expect error message', async () => {

package/src/preact/dateRangeSelector/date-range-selector.tsx

@@ -19,7 +19,7 @@ const dateRangeSelectorInnerPropsSchema = z.object({
     initialValue: z.string().optional(),
     initialDateFrom: z.string().date().optional(),
     initialDateTo: z.string().date().optional(),
-    dateColumn: z.string().min(1),
+    lapisDateField: z.string().min(1),
 });
 
 const dateRangeSelectorPropsSchema = dateRangeSelectorInnerPropsSchema.extend({
@@ -46,7 +46,7 @@ export const DateRangeSelectorInner = ({
     dateRangeOptions,
     earliestDate = '1900-01-01',
     initialValue,
-    dateColumn,
+    lapisDateField,
     initialDateFrom,
     initialDateTo,
 }: DateRangeSelectorInnerProps) => {
@@ -171,8 +171,8 @@ export const DateRangeSelectorInner = ({
         const dateTo = dateToPicker?.selectedDates[0];
 
         const detail = {
-            ...(dateFrom !== undefined && { [`${dateColumn}From`]: toYYYYMMDD(dateFrom) }),
-            ...(dateTo !== undefined && { [`${dateColumn}To`]: toYYYYMMDD(dateTo) }),
+            ...(dateFrom !== undefined && { [`${lapisDateField}From`]: toYYYYMMDD(dateFrom) }),
+            ...(dateTo !== undefined && { [`${lapisDateField}To`]: toYYYYMMDD(dateTo) }),
         };
 
         divRef.current?.dispatchEvent(

package/src/preact/lineageFilter/lineage-filter.stories.tsx

@@ -5,7 +5,7 @@ import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import aggregatedData from '../../preact/lineageFilter/__mockData__/aggregated.json';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta = {
     title: 'Input/LineageFilter',

package/src/preact/locationFilter/location-filter.stories.tsx

@@ -5,7 +5,7 @@ import { LocationFilter, type LocationFilterProps } from './location-filter';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import { LapisUrlContext } from '../LapisUrlContext';
-import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectInvalidAttributesErrorMessage';
+import { expectInvalidAttributesErrorMessage } from '../shared/stories/expectErrorMessage';
 
 const meta: Meta<LocationFilterProps> = {
     title: 'Input/LocationFilter',

package/src/preact/map/__mockData__/aggregatedGermany.json

@@ -0,0 +1,83 @@
+{
+    "data": [
+        {
+            "count": 1748,
+            "division": "Mecklenburg-Vorpommern"
+        },
+        {
+            "count": 10343,
+            "division": "Rheinland-Pfalz"
+        },
+        {
+            "count": 25459,
+            "division": "Saxony"
+        },
+        {
+            "count": 6198,
+            "division": "Niedersachsen"
+        },
+        {
+            "count": 3846,
+            "division": "Berlin"
+        },
+        {
+            "count": 7,
+            "division": "Germany"
+        },
+        {
+            "count": 3778,
+            "division": "Brandenburg"
+        },
+        {
+            "count": 1672,
+            "division": "Bremen"
+        },
+        {
+            "count": 4969,
+            "division": "Hesse"
+        },
+        {
+            "count": 3238,
+            "division": "Thuringia"
+        },
+        {
+            "count": 4747,
+            "division": "Saxony-Anhalt"
+        },
+        {
+            "count": 109800,
+            "division": null
+        },
+        {
+            "count": 4911,
+            "division": "Saarland"
+        },
+        {
+            "count": 50650,
+            "division": "Baden-Wuerttemberg"
+        },
+        {
+            "count": 50102,
+            "division": "North Rhine Westphalia"
+        },
+        {
+            "count": 9832,
+            "division": "Schleswig-Holstein"
+        },
+        {
+            "count": 28546,
+            "division": "Bavaria"
+        },
+        {
+            "count": 9633,
+            "division": "Hamburg"
+        }
+    ],
+    "info": {
+        "dataVersion": "1733676577",
+        "requestId": "7517dbd2-10ed-4a5a-8b2b-a6e08de55982",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2024-12-09T16:14:08.190102574",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report.",
+        "lapisVersion": "0.3.10"
+    }
+}

package/src/preact/map/__mockData__/aggregatedWorld.json

@@ -0,0 +1,259 @@
+{
+    "data": [
+        {
+            "count": 3,
+            "country": "Turkey"
+        },
+        {
+            "count": 966167,
+            "country": "United Kingdom"
+        },
+        {
+            "count": 1,
+            "country": "Netherlands"
+        },
+        {
+            "count": 138004,
+            "country": "Denmark"
+        },
+        {
+            "count": 2611,
+            "country": "Brazil"
+        },
+        {
+            "count": 4,
+            "country": "Côte d'Ivoire"
+        },
+        {
+            "count": 4,
+            "country": "Finland"
+        },
+        {
+            "count": 204,
+            "country": "Djibouti"
+        },
+        {
+            "count": 138,
+            "country": "China"
+        },
+        {
+            "count": 5904,
+            "country": "Iceland"
+        },
+        {
+            "count": 8,
+            "country": "Ireland"
+        },
+        {
+            "count": 180,
+            "country": "Malaysia"
+        },
+        {
+            "count": 855,
+            "country": "Kenya"
+        },
+        {
+            "count": 868,
+            "country": "South Africa"
+        },
+        {
+            "count": 329479,
+            "country": "Germany"
+        },
+        {
+            "count": 5,
+            "country": "Spain"
+        },
+        {
+            "count": 664,
+            "country": "Liechtenstein"
+        },
+        {
+            "count": 2,
+            "country": "Chile"
+        },
+        {
+            "count": 2,
+            "country": "Mali"
+        },
+        {
+            "count": 31,
+            "country": "South Korea"
+        },
+        {
+            "count": 13540,
+            "country": "Slovakia"
+        },
+        {
+            "count": 1,
+            "country": "Norway"
+        },
+        {
+            "count": 4949,
+            "country": "New Zealand"
+        },
+        {
+            "count": 354,
+            "country": "Laos"
+        },
+        {
+            "count": 5,
+            "country": "Saudi Arabia"
+        },
+        {
+            "count": 566,
+            "country": "Vietnam"
+        },
+        {
+            "count": 37,
+            "country": "Australia"
+        },
+        {
+            "count": 25,
+            "country": "Cameroon"
+        },
+        {
+            "count": 54,
+            "country": "Gambia"
+        },
+        {
+            "count": 1310,
+            "country": "Argentina"
+        },
+        {
+            "count": 548918,
+            "country": "USA"
+        },
+        {
+            "count": 4562,
+            "country": "Mexico"
+        },
+        {
+            "count": 28636,
+            "country": "Switzerland"
+        },
+        {
+            "count": 9,
+            "country": "Palau"
+        },
+        {
+            "count": 6,
+            "country": "Taiwan"
+        },
+        {
+            "count": 181,
+            "country": "Iraq"
+        },
+        {
+            "count": 7547,
+            "country": "France"
+        },
+        {
+            "count": 4536,
+            "country": "Japan"
+        },
+        {
+            "count": 1640,
+            "country": "Thailand"
+        },
+        {
+            "count": 59,
+            "country": "Colombia"
+        },
+        {
+            "count": 243,
+            "country": "India"
+        },
+        {
+            "count": 132,
+            "country": "Italy"
+        },
+        {
+            "count": 92,
+            "country": "Mongolia"
+        },
+        {
+            "count": 2,
+            "country": "Libya"
+        },
+        {
+            "count": 216,
+            "country": "Peru"
+        },
+        {
+            "count": 4,
+            "country": "Singapore"
+        },
+        {
+            "count": 25,
+            "country": "Myanmar"
+        },
+        {
+            "count": 395,
+            "country": "Bangladesh"
+        },
+        {
+            "count": 37,
+            "country": "Malawi"
+        },
+        {
+            "count": 3669,
+            "country": "Bahrain"
+        },
+        {
+            "count": 171,
+            "country": "Haiti"
+        },
+        {
+            "count": 40,
+            "country": "Palestine"
+        },
+        {
+            "count": 499,
+            "country": "Hong Kong"
+        },
+        {
+            "count": 19,
+            "country": "Austria"
+        },
+        {
+            "count": 9,
+            "country": "Jamaica"
+        },
+        {
+            "count": 83,
+            "country": "Russia"
+        },
+        {
+            "count": 197,
+            "country": "Seychelles"
+        },
+        {
+            "count": 20,
+            "country": "Nigeria"
+        },
+        {
+            "count": 6,
+            "country": "Canada"
+        },
+        {
+            "count": 208,
+            "country": "Kazakhstan"
+        },
+        {
+            "count": 34,
+            "country": "Benin"
+        },
+        {
+            "count": 113,
+            "country": "Pakistan"
+        }
+    ],
+    "info": {
+        "dataVersion": "1733676577",
+        "requestId": "91268a09-b192-42da-b7c6-bcfc72bba982",
+        "requestInfo": "sars_cov-2_nextstrain_open on lapis.cov-spectrum.org at 2024-12-09T15:45:35.460317204",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report.",
+        "lapisVersion": "0.3.10"
+    }
+}