fix(components): gs-sequences-by-location: don't crash table view whe…

…n there is no data

components/src/preact/sequencesByLocation/sequences-by-location-map.tsx

@@ -6,6 +6,7 @@ import { useEffect, useRef } from 'preact/hooks';
 import type { EnhancedGeoJsonFeatureProperties } from '../../query/computeMapLocationData';
 import { InfoHeadline1, InfoParagraph } from '../components/info';
 import { Modal, useModalRef } from '../components/modal';
+import { NoDataDisplay } from '../components/no-data-display';
 import { AspectRatio } from '../shared/aspectRatio/AspectRatio';
 import { formatProportion } from '../shared/table/formatProportion';
 

components/src/preact/sequencesByLocation/sequences-by-location-table.tsx

@@ -32,7 +32,7 @@ export const SequencesByLocationTable: FunctionComponent<SequencesByLocationTabl
             sort: true,
             formatter: (cell: number) => formatProportion(cell),
         },
-        ...('isShownOnMap' in tableData[0]
+        ...(tableData.length > 0 && 'isShownOnMap' in tableData[0]
             ? [{ id: 'isShownOnMap', name: 'shown on map', sort: true, width: '20%' }]
             : []),
     ];

components/src/preact/sequencesByLocation/sequences-by-location.stories.tsx

@@ -1,4 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
 
 import worldAtlas from './__mockData__/worldAtlas.json';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
@@ -91,6 +92,48 @@ export const Default: StoryObj<SequencesByLocationProps> = {
     },
 };
 
+export const NoData: StoryObj<SequencesByLocationProps> = {
+    ...Default,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'worldMap',
+                        url: worldMapUrl,
+                    },
+                    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: { data: [] },
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(async () => {
+            await expect(canvas.getByText('No data available.')).toBeVisible();
+        });
+    },
+};
+
 export const InvalidTopoJsonTopology: StoryObj<SequencesByLocationProps> = {
     ...Default,
     parameters: {

components/src/preact/sequencesByLocation/sequences-by-location.tsx

@@ -22,6 +22,7 @@ import { mapSourceSchema } from './loadMapSource';
 import { lapisFilterSchema, views } from '../../types';
 import Tabs from '../components/tabs';
 import { getMaintainAspectRatio } from '../shared/charts/getMaintainAspectRatio';
+import { NoDataDisplay } from '../components/no-data-display';
 
 export const sequencesByLocationViewSchema = z.union([z.literal(views.map), z.literal(views.table)]);
 export type SequencesByLocationMapView = z.infer<typeof sequencesByLocationViewSchema>;
@@ -76,6 +77,10 @@ const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationProps> =
         throw error;
     }
 
+    if (data.tableData.length === 0) {
+        return <NoDataDisplay />;
+    }
+
     return <SequencesByLocationMapTabs data={data} originalComponentProps={props} />;
 };