@genspectrum/dashboard-components 0.11.2 → 0.11.4

package/src/preact/map/sequences-by-location-table.tsx

@@ -1,18 +1,41 @@
 import { type FunctionComponent } from 'preact';
 
-import type { AggregateData } from '../../query/queryAggregateData';
-import { AggregateTable } from '../aggregatedData/aggregate-table';
+import type { EnhancedLocationsTableData } from '../../query/computeMapLocationData';
+import { type AggregateData, compareAscending } from '../../query/queryAggregateData';
+import { Table } from '../components/table';
+import { formatProportion } from '../shared/table/formatProportion';
 
 type SequencesByLocationTableProps = {
-    locationData: AggregateData;
+    tableData: AggregateData | EnhancedLocationsTableData;
     lapisLocationField: string;
     pageSize: boolean | number;
 };
 
 export const SequencesByLocationTable: FunctionComponent<SequencesByLocationTableProps> = ({
-    locationData,
+    tableData,
     lapisLocationField,
     pageSize,
 }) => {
-    return <AggregateTable data={locationData} fields={[lapisLocationField]} pageSize={pageSize} />;
+    const headers = [
+        {
+            name: lapisLocationField,
+            sort: {
+                compare: compareAscending,
+            },
+        },
+        {
+            name: 'count',
+            sort: true,
+        },
+        {
+            name: 'proportion',
+            sort: true,
+            formatter: (cell: number) => formatProportion(cell),
+        },
+        ...('isShownOnMap' in tableData[0]
+            ? [{ id: 'isShownOnMap', name: 'shown on map', sort: true, width: '20%' }]
+            : []),
+    ];
+
+    return <Table data={tableData} columns={headers} pageSize={pageSize} />;
 };

package/src/preact/map/sequences-by-location.tsx

@@ -4,15 +4,22 @@ import z from 'zod';
 
 import { SequencesByLocationMap } from './sequences-by-location-map';
 import { SequencesByLocationTable } from './sequences-by-location-table';
-import { type AggregateData, queryAggregateData } from '../../query/queryAggregateData';
+import {
+    type EnhancedLocationsTableData,
+    type MapLocationData,
+    MapLocationDataType,
+} from '../../query/computeMapLocationData';
+import { type AggregateData } from '../../query/queryAggregateData';
+import { querySequencesByLocationData } from '../../query/querySequencesByLocationData';
 import { LapisUrlContext } from '../LapisUrlContext';
+import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
-import { mapSourceSchema } from './useGeoJsonMap';
+import { mapSourceSchema } from './loadMapSource';
 import { lapisFilterSchema, views } from '../../types';
 import Tabs from '../components/tabs';
 
@@ -49,7 +56,7 @@ export const SequencesByLocation: FunctionComponent<SequencesByLocationProps> =
 };
 
 const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationProps> = (props) => {
-    const { lapisFilter, lapisLocationField } = props;
+    const { lapisFilter, lapisLocationField, mapSource } = props;
 
     const lapis = useContext(LapisUrlContext);
     const {
@@ -57,8 +64,8 @@ const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationProps> =
         error,
         isLoading: isLoadingLapisData,
     } = useQuery(
-        async () => queryAggregateData(lapisFilter, [lapisLocationField], lapis),
-        [lapisFilter, lapisLocationField, lapis],
+        async () => querySequencesByLocationData(lapisFilter, lapisLocationField, lapis, mapSource),
+        [lapisFilter, lapisLocationField, lapis, mapSource],
     );
 
     if (isLoadingLapisData) {
@@ -74,7 +81,7 @@ const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationProps> =
 
 type SequencesByLocationMapTabsProps = {
     originalComponentProps: SequencesByLocationProps;
-    data: AggregateData;
+    data: MapLocationData;
 };
 
 const SequencesByLocationMapTabs: FunctionComponent<SequencesByLocationMapTabsProps> = ({
@@ -83,16 +90,16 @@ const SequencesByLocationMapTabs: FunctionComponent<SequencesByLocationMapTabsPr
 }) => {
     const getTab = (view: SequencesByLocationMapView) => {
         switch (view) {
-            case views.map:
-                if (originalComponentProps.mapSource === undefined) {
+            case views.map: {
+                if (data.type !== MapLocationDataType.tableAndMapData) {
                     throw new Error('mapSource is required when using the map view');
                 }
+                const { type: _type, tableData: _tableData, ...dataForMap } = data;
                 return {
                     title: 'Map',
                     content: (
                         <SequencesByLocationMap
-                            locationData={data}
-                            mapSource={originalComponentProps.mapSource}
+                            {...dataForMap}
                             enableMapNavigation={originalComponentProps.enableMapNavigation}
                             lapisLocationField={originalComponentProps.lapisLocationField}
                             zoom={originalComponentProps.zoom}
@@ -102,12 +109,13 @@ const SequencesByLocationMapTabs: FunctionComponent<SequencesByLocationMapTabsPr
                         />
                     ),
                 };
+            }
             case views.table:
                 return {
                     title: 'Table',
                     content: (
                         <SequencesByLocationTable
-                            locationData={data}
+                            tableData={data.tableData}
                             lapisLocationField={originalComponentProps.lapisLocationField}
                             pageSize={originalComponentProps.pageSize}
                         />
@@ -118,16 +126,27 @@ const SequencesByLocationMapTabs: FunctionComponent<SequencesByLocationMapTabsPr
 
     const tabs = originalComponentProps.views.map((view) => getTab(view));
 
-    return <Tabs tabs={tabs} toolbar={<Toolbar originalComponentProps={originalComponentProps} />} />;
+    return (
+        <Tabs
+            tabs={tabs}
+            toolbar={<Toolbar originalComponentProps={originalComponentProps} tableData={data.tableData} />}
+        />
+    );
 };
 
 type ToolbarProps = {
     originalComponentProps: SequencesByLocationProps;
+    tableData: AggregateData | EnhancedLocationsTableData;
 };
 
-const Toolbar: FunctionComponent<ToolbarProps> = ({ originalComponentProps }) => {
+const Toolbar: FunctionComponent<ToolbarProps> = ({ originalComponentProps, tableData }) => {
     return (
         <div class='flex flex-row'>
+            <CsvDownloadButton
+                className='mx-1 btn btn-xs'
+                getData={() => tableData}
+                filename='sequences_by_location.csv'
+            />
             <SequencesByLocationMapInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </div>

package/src/preact/useQuery.ts

@@ -19,7 +19,7 @@ export function useQuery<Data>(fetchDataCallback: () => Promise<Data>, dependenc
             }
         };
 
-        fetchData();
+        void fetchData();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [JSON.stringify(dependencies)]);
 

package/src/query/computeMapLocationData.spec.ts

@@ -0,0 +1,103 @@
+import type { FeatureCollection, GeometryObject } from 'geojson';
+import { describe, expect, test } from 'vitest';
+
+import { computeMapLocationData } from './computeMapLocationData';
+import type { GeoJsonFeatureProperties } from '../preact/map/loadMapSource';
+
+const lapisLocationField = 'locationField';
+
+const country1 = 'country1';
+const country2 = 'country2';
+
+const locationData = [
+    {
+        [lapisLocationField]: country1,
+        count: 1,
+        proportion: 0.1,
+    },
+    {
+        [lapisLocationField]: country2,
+        count: 2,
+        proportion: 0.2,
+    },
+    {
+        [lapisLocationField]: null,
+        count: 3,
+        proportion: 0.3,
+    },
+];
+
+const geometryObject = {
+    type: 'GeometryCollection',
+    geometries: [],
+} satisfies GeometryObject;
+
+const geojsonData = {
+    type: 'FeatureCollection',
+    features: [
+        {
+            type: 'Feature',
+            properties: {
+                name: country1,
+            },
+            geometry: geometryObject,
+        },
+    ],
+} satisfies FeatureCollection<GeometryObject, GeoJsonFeatureProperties>;
+
+describe('computeMapLocationData', () => {
+    test('should return tableDataOnly when geojsonData is undefined', () => {
+        const actual = computeMapLocationData(locationData, undefined, lapisLocationField);
+
+        expect(actual).to.deep.equal({
+            type: 'tableDataOnly',
+            tableData: locationData,
+        });
+    });
+
+    test('should return tableAndMapData when geojsonData is defined', () => {
+        const actual = computeMapLocationData(locationData, geojsonData, lapisLocationField);
+
+        expect(actual).to.deep.equal({
+            type: 'tableAndMapData',
+            locations: [
+                {
+                    type: 'Feature',
+                    properties: {
+                        name: country1,
+                        data: {
+                            count: 1,
+                            proportion: 0.1,
+                            [lapisLocationField]: country1,
+                        },
+                    },
+                    geometry: geometryObject,
+                },
+            ],
+            tableData: [
+                {
+                    [lapisLocationField]: country1,
+                    count: 1,
+                    proportion: 0.1,
+                    isShownOnMap: 'true',
+                },
+                {
+                    [lapisLocationField]: country2,
+                    count: 2,
+                    proportion: 0.2,
+                    isShownOnMap: 'false',
+                },
+                {
+                    [lapisLocationField]: null,
+                    count: 3,
+                    proportion: 0.3,
+                    isShownOnMap: 'false',
+                },
+            ],
+            totalCount: 6,
+            countOfMatchedLocationData: 1,
+            unmatchedLocations: [country2],
+            nullCount: 3,
+        });
+    });
+});

package/src/query/computeMapLocationData.ts

@@ -0,0 +1,136 @@
+import type { Feature, FeatureCollection, GeometryObject } from 'geojson';
+
+import type { AggregateData } from './queryAggregateData';
+import type { GeoJsonFeatureProperties } from '../preact/map/loadMapSource';
+
+export type FeatureData = { proportion: number; count: number };
+
+export type EnhancedGeoJsonFeatureProperties = GeoJsonFeatureProperties & {
+    data: FeatureData | null;
+};
+
+export type EnhancedLocationsTableData = (AggregateData[number] & { isShownOnMap: string })[];
+
+export const MapLocationDataType = {
+    tableDataOnly: 'tableDataOnly',
+    tableAndMapData: 'tableAndMapData',
+} as const;
+
+export type MapLocationData =
+    | {
+          type: typeof MapLocationDataType.tableDataOnly;
+          tableData: AggregateData;
+      }
+    | {
+          type: typeof MapLocationDataType.tableAndMapData;
+          locations: Feature<GeometryObject, EnhancedGeoJsonFeatureProperties>[];
+          tableData: EnhancedLocationsTableData;
+          totalCount: number;
+          countOfMatchedLocationData: number;
+          unmatchedLocations: string[];
+          nullCount: number;
+      };
+
+export function computeMapLocationData(
+    locationData: AggregateData,
+    geojsonData: FeatureCollection<GeometryObject, GeoJsonFeatureProperties> | undefined,
+    lapisLocationField: string,
+): MapLocationData {
+    if (geojsonData === undefined) {
+        return { type: MapLocationDataType.tableDataOnly, tableData: locationData };
+    }
+
+    const countAndProportionByCountry = buildLookupByLocationField(locationData, lapisLocationField);
+    const { locations, unmatchedLocations } = matchLocationDataAndGeoJsonFeatures(
+        geojsonData,
+        countAndProportionByCountry,
+        lapisLocationField,
+    );
+
+    const totalCount = locationData.map((value) => value.count).reduce((sum, b) => sum + b, 0);
+    const countOfMatchedLocationData = locations
+        .map((location) => location.properties.data?.count ?? 0)
+        .reduce((sum, b) => sum + b, 0);
+    const nullCount = locationData.find((row) => row[lapisLocationField] === null)?.count ?? 0;
+
+    const tableData = getSequencesByLocationTableData(locationData, unmatchedLocations, lapisLocationField);
+
+    return {
+        type: MapLocationDataType.tableAndMapData,
+        locations,
+        tableData,
+        totalCount,
+        countOfMatchedLocationData,
+        unmatchedLocations,
+        nullCount,
+    };
+}
+
+function buildLookupByLocationField(locationData: AggregateData, lapisLocationField: string) {
+    return new Map<string, FeatureData>(
+        locationData
+            .filter((row) => typeof row[lapisLocationField] === 'string')
+            .map((row) => [row[lapisLocationField] as string, row]),
+    );
+}
+
+function matchLocationDataAndGeoJsonFeatures(
+    geojsonData: FeatureCollection<GeometryObject, GeoJsonFeatureProperties>,
+    countAndProportionByCountry: Map<string, FeatureData>,
+    lapisLocationField: string,
+) {
+    const matchedLocations: string[] = [];
+
+    const locations: Feature<GeometryObject, EnhancedGeoJsonFeatureProperties>[] = geojsonData.features.map(
+        (feature) => {
+            const name = feature?.properties?.name;
+            if (typeof name !== 'string') {
+                throw new Error(
+                    `GeoJSON feature with id '${feature.id}' does not have 'properties.name' of type string, was: '${name}'`,
+                );
+            }
+
+            const data = countAndProportionByCountry.get(name) ?? null;
+            if (data !== null) {
+                matchedLocations.push(name);
+            }
+            return {
+                ...feature,
+                properties: {
+                    ...feature.properties,
+                    data,
+                },
+            };
+        },
+    );
+
+    const unmatchedLocations = [...countAndProportionByCountry.keys()].filter(
+        (name) => !matchedLocations.includes(name),
+    );
+    if (unmatchedLocations.length > 0) {
+        const unmatchedLocationsWarning = `gs-map: Found location data from LAPIS (aggregated by "${lapisLocationField}") that could not be matched on locations on the given map. Unmatched location names are: ${unmatchedLocations.map((it) => `"${it}"`).join(', ')}`;
+        console.warn(unmatchedLocationsWarning); // eslint-disable-line no-console -- We should give some feedback about unmatched location data.
+    }
+
+    return { locations, unmatchedLocations };
+}
+
+export function getSequencesByLocationTableData(
+    locationData: AggregateData,
+    unmatchedLocations: string[],
+    lapisLocationField: string,
+): EnhancedLocationsTableData {
+    return locationData.map((row) => ({
+        ...row,
+        isShownOnMap: `${isShownOnMap(row, unmatchedLocations, lapisLocationField)}`,
+    }));
+}
+
+function isShownOnMap(row: AggregateData[number], unmatchedLocations: string[], lapisLocationField: string) {
+    const locationValue = row[lapisLocationField];
+    if (locationValue === null) {
+        return false;
+    }
+
+    return !unmatchedLocations.includes(locationValue as string);
+}

package/src/query/querySequencesByLocationData.ts

@@ -0,0 +1,18 @@
+import { computeMapLocationData } from './computeMapLocationData';
+import { queryAggregateData } from './queryAggregateData';
+import { loadMapSource, type MapSource } from '../preact/map/loadMapSource';
+import type { LapisFilter } from '../types';
+
+export async function querySequencesByLocationData(
+    lapisFilter: LapisFilter,
+    lapisLocationField: string,
+    lapis: string,
+    mapSource: MapSource | undefined,
+) {
+    const [locationData, geojsonData] = await Promise.all([
+        queryAggregateData(lapisFilter, [lapisLocationField], lapis),
+        mapSource !== undefined ? loadMapSource(mapSource) : undefined,
+    ]);
+
+    return computeMapLocationData(locationData, geojsonData, lapisLocationField);
+}

package/src/utilEntrypoint.ts

@@ -27,7 +27,7 @@ export type {
     RelativeGrowthAdvantageProps,
 } from './preact/relativeGrowthAdvantage/relative-growth-advantage';
 export type { StatisticsProps } from './preact/statistic/statistics';
-export type { MapSource } from './preact/map/useGeoJsonMap';
+export type { MapSource } from './preact/map/loadMapSource';
 
 export type { ConfidenceIntervalMethod } from './preact/shared/charts/confideceInterval';
 

package/src/web-components/visualization/gs-sequences-by-location.stories.ts

@@ -1,3 +1,4 @@
+import { expect, userEvent, waitFor } from '@storybook/test';
 import { type Meta, type StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
@@ -9,6 +10,7 @@ import aggregatedWorld from '../../preact/map/__mockData__/aggregatedWorld.json'
 import mapOfGermany from '../../preact/map/__mockData__/germanyMap.json';
 import worldAtlas from '../../preact/map/__mockData__/worldAtlas.json';
 import { type SequencesByLocationProps } from '../../preact/map/sequences-by-location';
+import { withinShadowRoot } from '../withinShadowRoot.story';
 
 import './gs-sequences-by-location';
 import '../app';
@@ -188,6 +190,21 @@ export const Germany: StoryObj<SequencesByLocationProps> = {
     },
 };
 
+export const GermanyOnTableTab: StoryObj<SequencesByLocationProps> = {
+    ...Germany,
+    play: async ({ canvasElement, step }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-sequences-by-location');
+
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument());
+        await userEvent.click(canvas.getByRole('button', { name: 'Table' }));
+
+        await step('Sort by division', async () => {
+            await waitFor(() => expect(canvas.getByText('division')).toBeInTheDocument());
+            await userEvent.click(canvas.getByText('division'));
+        });
+    },
+};
+
 export const GermanyTableOnly: StoryObj<SequencesByLocationProps> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">