@genspectrum/dashboard-components 0.15.0 → 0.16.0

package/src/preact/{map → 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 { AspectRatio } from '../shared/aspectRatio/AspectRatio';
 import { formatProportion } from '../shared/table/formatProportion';
 
 type SequencesByLocationMapProps = {
@@ -20,6 +21,7 @@ type SequencesByLocationMapProps = {
     offsetX: number;
     offsetY: number;
     hasTableView: boolean;
+    maintainAspectRatio: boolean;
 };
 
 export const SequencesByLocationMap: FunctionComponent<SequencesByLocationMapProps> = ({
@@ -34,6 +36,7 @@ export const SequencesByLocationMap: FunctionComponent<SequencesByLocationMapPro
     offsetX,
     offsetY,
     hasTableView,
+    maintainAspectRatio,
 }) => {
     const ref = useRef<HTMLDivElement>(null);
 
@@ -69,8 +72,8 @@ export const SequencesByLocationMap: FunctionComponent<SequencesByLocationMapPro
     }, [ref, locations, enableMapNavigation, lapisLocationField, zoom, offsetX, offsetY]);
 
     return (
-        <div className='h-full'>
-            <div ref={ref} className='h-full' />
+        <AspectRatio aspectRatio={maintainAspectRatio ? 50 : undefined}>
+            <div className='h-full' ref={ref} />
             <div className='relative'>
                 <DataMatchInformation
                     totalCount={totalCount}
@@ -80,7 +83,7 @@ export const SequencesByLocationMap: FunctionComponent<SequencesByLocationMapPro
                     hasTableView={hasTableView}
                 />
             </div>
-        </div>
+        </AspectRatio>
     );
 };
 

package/src/preact/{map → 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%' }]
             : []),
     ];

package/src/preact/{map → 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';
@@ -13,6 +14,21 @@ import './leafletStyleModifications.css';
 const meta: Meta<SequencesByLocationProps> = {
     title: 'Visualization/SequencesByLocation',
     component: SequencesByLocation,
+    argTypes: {
+        lapisFilter: { control: 'object' },
+        lapisLocationField: { control: { type: 'text' } },
+        enableMapNavigation: { control: { type: 'boolean' } },
+        width: { control: { type: 'text' } },
+        height: { control: { type: 'text' } },
+        views: {
+            options: ['map', 'table'],
+            control: { type: 'check' },
+        },
+        zoom: { control: { type: 'number' } },
+        offsetX: { control: { type: 'number' } },
+        offsetY: { control: { type: 'number' } },
+        pageSize: { control: 'object' },
+    },
 };
 
 export default meta;
@@ -51,7 +67,6 @@ export const Default: StoryObj<SequencesByLocationProps> = {
         },
         enableMapNavigation: false,
         width: '1100px',
-        height: '800px',
         views: ['map', 'table'],
         zoom: 2,
         offsetX: 0,
@@ -77,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: {

package/src/preact/{map → sequencesByLocation}/sequences-by-location.tsx

@@ -20,7 +20,9 @@ import { ResizeContainer } from '../components/resize-container';
 import { useQuery } from '../useQuery';
 import { mapSourceSchema } from './loadMapSource';
 import { lapisFilterSchema, views } from '../../types';
+import { NoDataDisplay } from '../components/no-data-display';
 import Tabs from '../components/tabs';
+import { getMaintainAspectRatio } from '../shared/charts/getMaintainAspectRatio';
 
 export const sequencesByLocationViewSchema = z.union([z.literal(views.map), z.literal(views.table)]);
 export type SequencesByLocationMapView = z.infer<typeof sequencesByLocationViewSchema>;
@@ -31,7 +33,7 @@ const sequencesByLocationPropsSchema = z.object({
     mapSource: mapSourceSchema.optional(),
     enableMapNavigation: z.boolean(),
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     views: z.array(sequencesByLocationViewSchema),
     zoom: z.number(),
     offsetX: z.number(),
@@ -75,6 +77,10 @@ const SequencesByLocationMapInner: FunctionComponent<SequencesByLocationProps> =
         throw error;
     }
 
+    if (data.tableData.length === 0) {
+        return <NoDataDisplay />;
+    }
+
     return <SequencesByLocationMapTabs data={data} originalComponentProps={props} />;
 };
 
@@ -87,6 +93,8 @@ const SequencesByLocationMapTabs: FunctionComponent<SequencesByLocationMapTabsPr
     originalComponentProps,
     data,
 }) => {
+    const maintainAspectRatio = getMaintainAspectRatio(originalComponentProps.height);
+
     const getTab = (view: SequencesByLocationMapView) => {
         switch (view) {
             case views.map: {
@@ -105,6 +113,7 @@ const SequencesByLocationMapTabs: FunctionComponent<SequencesByLocationMapTabsPr
                             offsetX={originalComponentProps.offsetX}
                             offsetY={originalComponentProps.offsetY}
                             hasTableView={originalComponentProps.views.includes(views.table)}
+                            maintainAspectRatio={maintainAspectRatio}
                         />
                     ),
                 };

package/src/preact/shared/aspectRatio/AspectRatio.tsx

@@ -0,0 +1,13 @@
+import { type PropsWithChildren } from 'react';
+
+export function AspectRatio({ children, aspectRatio }: PropsWithChildren<{ aspectRatio?: number }>) {
+    if (aspectRatio === undefined) {
+        return children;
+    }
+
+    return (
+        <div class={`w-full relative`} style={{ paddingTop: `${aspectRatio}%` }}>
+            <div className='absolute inset-0'>{children}</div>
+        </div>
+    );
+}

package/src/preact/shared/charts/getMaintainAspectRatio.ts

@@ -0,0 +1,3 @@
+export function getMaintainAspectRatio(height: string | undefined) {
+    return height === undefined || height === '';
+}

package/src/preact/statistic/statistics.stories.tsx

@@ -68,7 +68,6 @@ export const Default: StoryObj<StatisticsProps> = {
             division: 'Alabama',
         },
         width: '100%',
-        height: '100%',
     },
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);

package/src/preact/statistic/statistics.tsx

@@ -13,7 +13,7 @@ import { useQuery } from '../useQuery';
 
 const statisticsPropsSchema = z.object({
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     numeratorFilter: lapisFilterSchema,
     denominatorFilter: lapisFilterSchema,
 });
@@ -62,17 +62,17 @@ type MetricDataTabsProps = {
 const MetricDataTabs: FunctionComponent<MetricDataTabsProps> = ({ data }) => {
     const { count, proportion } = data;
     return (
-        <div className='flex flex-col sm:flex-row rounded-md border-2 border-gray-100'>
+        <div className='flex flex-col sm:flex-row rounded-md border-2 border-gray-100 min-w-[180px]'>
             <div className='stat'>
                 <div className='stat-title'>Sequences</div>
                 <div className='stat-value text-2xl sm:text-4xl'>{count.toLocaleString('en-us')}</div>
-                <div className='stat-desc'>The total number of sequenced samples</div>
+                <div className='stat-desc text-wrap'>The total number of sequenced samples</div>
             </div>
 
             <div className='stat'>
                 <div className='stat-title'>Overall proportion</div>
                 <div className='stat-value text-2xl sm:text-4xl'>{formatProportion(proportion)}</div>
-                <div className='stat-desc'>The proportion among all sequenced samples</div>
+                <div className='stat-desc text-wrap'>The proportion among all sequenced samples</div>
             </div>
         </div>
     );

package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.stories.tsx

@@ -40,7 +40,6 @@ export const Default: StoryObj<WastewaterMutationsOverTimeProps> = {
     ...Template,
     args: {
         width: '100%',
-        height: '700px',
         lapisFilter: {},
         sequenceType: 'nucleotide',
         maxNumberOfGridRows: 100,

package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx

@@ -22,7 +22,7 @@ const wastewaterMutationOverTimeSchema = z.object({
     lapisFilter: lapisFilterSchema,
     sequenceType: sequenceTypeSchema,
     width: z.string(),
-    height: z.string(),
+    height: z.string().optional(),
     maxNumberOfGridRows: z.number(),
 });
 

package/src/query/computeMapLocationData.spec.ts

@@ -2,7 +2,7 @@ import type { FeatureCollection, GeometryObject } from 'geojson';
 import { describe, expect, test } from 'vitest';
 
 import { computeMapLocationData } from './computeMapLocationData';
-import type { GeoJsonFeatureProperties } from '../preact/map/loadMapSource';
+import type { GeoJsonFeatureProperties } from '../preact/sequencesByLocation/loadMapSource';
 
 const lapisLocationField = 'locationField';
 

package/src/query/computeMapLocationData.ts

@@ -1,7 +1,7 @@
 import type { Feature, FeatureCollection, GeometryObject } from 'geojson';
 
 import type { AggregateData } from './queryAggregateData';
-import type { GeoJsonFeatureProperties } from '../preact/map/loadMapSource';
+import type { GeoJsonFeatureProperties } from '../preact/sequencesByLocation/loadMapSource';
 
 export type FeatureData = { proportion: number; count: number };
 

package/src/query/querySequencesByLocationData.ts

@@ -1,6 +1,6 @@
 import { computeMapLocationData } from './computeMapLocationData';
 import { queryAggregateData } from './queryAggregateData';
-import { loadMapSource, type MapSource } from '../preact/map/loadMapSource';
+import { loadMapSource, type MapSource } from '../preact/sequencesByLocation/loadMapSource';
 import type { LapisFilter } from '../types';
 
 export async function querySequencesByLocationData(

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/loadMapSource';
+export type { MapSource } from './preact/sequencesByLocation/loadMapSource';
 
 export type { ConfidenceIntervalMethod } from './preact/shared/charts/confideceInterval';
 

package/src/web-components/ResizeContainer.mdx

@@ -5,7 +5,10 @@ import { Meta } from '@storybook/blocks';
 # Size of components
 
 All visualization and input components can be provided with a width prop (or height, when applicable) to control the size of the component.
-If not provided, the default width or height is used. In most cases, the default is a width of '100%' of its parent container and a predefined height.
+If the width is not provided, the default is used. In most cases, the default is a width of '100%' of its parent container.
+If the height is not set, the component takes up as much space as needed in the vertical direction.
+For table views, this includes showing the complete table.
+For diagrams, a fixed aspect ratio of 2:1 (width/height) is used.
 
 Both width and height can be set using the css units (e.g. 'px', 'em', 'rem', '%', 'vh', 'vw', etc.).
 By using '%', the size of the component can be controlled by the parent component.

package/src/web-components/visualization/gs-aggregate.stories.ts

@@ -54,7 +54,7 @@ const meta: Meta<Required<AggregateProps>> = {
 
 export default meta;
 
-export const Table: StoryObj<Required<AggregateProps>> = {
+export const Default: StoryObj<Required<AggregateProps>> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
             <gs-aggregate
@@ -97,7 +97,6 @@ export const Table: StoryObj<Required<AggregateProps>> = {
             country: 'USA',
         },
         width: '100%',
-        height: '700px',
         initialSortField: 'count',
         initialSortDirection: 'descending',
         pageSize: 10,
@@ -105,10 +104,18 @@ export const Table: StoryObj<Required<AggregateProps>> = {
     },
 };
 
+export const WithFixedHeight: StoryObj<Required<AggregateProps>> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        height: '700px',
+    },
+};
+
 export const BarChartWithOneField: StoryObj<Required<AggregateProps>> = {
-    ...Table,
+    ...Default,
     args: {
-        ...Table.args,
+        ...Default.args,
         fields: ['division'],
         views: ['bar', 'table'],
     },
@@ -135,9 +142,9 @@ export const BarChartWithOneField: StoryObj<Required<AggregateProps>> = {
 };
 
 export const BarChartWithTwoFields: StoryObj<Required<AggregateProps>> = {
-    ...Table,
+    ...Default,
     args: {
-        ...Table.args,
+        ...Default.args,
         fields: ['division', 'nextstrainClade'],
         lapisFilter: {
             country: 'Germany',

package/src/web-components/visualization/gs-aggregate.tsx

@@ -75,7 +75,7 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
-    height: string = '700px';
+    height: string | undefined = undefined;
 
     /**
      * The field by which the table is initially sorted.

package/src/web-components/visualization/gs-mutation-comparison.stories.ts

@@ -89,7 +89,6 @@ export const Default: StoryObj<Required<MutationComparisonProps>> = {
         sequenceType: 'nucleotide',
         views: ['table', 'venn'],
         width: '100%',
-        height: '700px',
         pageSize: 10,
     },
     parameters: {
@@ -162,3 +161,11 @@ export const VennDiagram: StoryObj<Required<MutationComparisonProps>> = {
         });
     },
 };
+
+export const WithFixedHeight: StoryObj<Required<MutationComparisonProps>> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        height: '700px',
+    },
+};

package/src/web-components/visualization/gs-mutation-comparison.tsx

@@ -79,7 +79,7 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
-    height: string = '700px';
+    height: string | undefined = undefined;
 
     /**
      * The maximum number of rows to display in the table view.

package/src/web-components/visualization/gs-mutations-over-time.stories.ts

@@ -44,7 +44,6 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
         sequenceType: 'nucleotide',
         views: ['grid'],
         width: '100%',
-        height: '700px',
         granularity: 'month',
         lapisDateField: 'date',
     },
@@ -111,3 +110,12 @@ export const HideProportionOnSmallScreen: StoryObj<Required<MutationsOverTimePro
         width: '300px',
     },
 };
+
+// This test uses mock data: defaultMockData.ts (through mutationOverTimeWorker.mock.ts)
+export const WithFixedHeight: StoryObj<Required<MutationsOverTimeProps>> = {
+    ...Template,
+    args: {
+        ...Template,
+        height: '700px',
+    },
+};

package/src/web-components/visualization/gs-mutations-over-time.tsx

@@ -69,7 +69,7 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
-    height: string = '700px';
+    height: string | undefined = undefined;
 
     /**
      * The granularity of the time axis.

package/src/web-components/visualization/gs-mutations.stories.ts

@@ -54,7 +54,6 @@ const meta: Meta<Required<MutationsProps>> = {
         sequenceType: 'nucleotide',
         views: ['grid', 'table', 'insertions'],
         width: '100%',
-        height: '700px',
         pageSize: 10,
     },
     parameters: withComponentDocs({
@@ -189,3 +188,11 @@ export const OnInsertionsTab: StoryObj<Required<MutationsProps>> = {
         await fireEvent.click(canvas.getByRole('button', { name: 'Insertions' }));
     },
 };
+
+export const WithFixedHeight: StoryObj<Required<MutationsProps>> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        height: '700px',
+    },
+};

package/src/web-components/visualization/gs-mutations.tsx

@@ -111,7 +111,7 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
-    height: string = '700px';
+    height: string | undefined = undefined;
 
     /**
      * The maximum number of rows to display in the table view.

package/src/web-components/visualization/gs-number-sequences-over-time.stories.ts

@@ -38,6 +38,9 @@ const meta: Meta<NumberSequencesOverTimeProps> = {
             control: { type: 'check' },
         },
         pageSize: { control: 'object' },
+        height: {
+            control: 'text',
+        },
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -73,7 +76,6 @@ const Template: StoryObj<NumberSequencesOverTimeProps> = {
         ],
         lapisDateField: 'date',
         width: '100%',
-        height: '700px',
         smoothingWindow: 0,
         granularity: 'month',
         pageSize: 10,
@@ -239,3 +241,11 @@ export const TwoDatasetsWithNonOverlappingDates: StoryObj<NumberSequencesOverTim
         },
     },
 };
+
+export const WithFixedHeight: StoryObj<NumberSequencesOverTimeProps> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        height: '700px',
+    },
+};

package/src/web-components/visualization/gs-number-sequences-over-time.tsx

@@ -72,7 +72,7 @@ export class NumberSequencesOverTimeComponent extends PreactLitAdapterWithGridJs
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
-    height: string = '700px';
+    height: string | undefined = undefined;
 
     /**
      * The granularity of the time axis.

package/src/web-components/visualization/gs-prevalence-over-time.stories.ts

@@ -99,7 +99,6 @@ export const TwoDatasets: StoryObj<Required<PrevalenceOverTimeProps>> = {
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
         width: '100%',
-        height: '700px',
         lapisDateField: 'date',
         pageSize: 10,
         yAxisMaxLinear: 1,
@@ -175,7 +174,6 @@ export const OneDataset: StoryObj<Required<PrevalenceOverTimeProps>> = {
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
         width: '100%',
-        height: '700px',
         lapisDateField: 'date',
         pageSize: 10,
         yAxisMaxLinear: 1,
@@ -252,3 +250,11 @@ export const OneDatasetOnTableTab: StoryObj<Required<PrevalenceOverTimeProps>> =
         await fireEvent.click(canvas.getByRole('button', { name: 'Table' }));
     },
 };
+
+export const WithFixedHeight: StoryObj<Required<PrevalenceOverTimeProps>> = {
+    ...TwoDatasets,
+    args: {
+        ...TwoDatasets.args,
+        height: '700px',
+    },
+};

package/src/web-components/visualization/gs-prevalence-over-time.tsx

@@ -123,7 +123,7 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
-    height: string = '700px';
+    height: string | undefined = undefined;
 
     /**
      * Required.

package/src/web-components/visualization/gs-relative-growth-advantage.stories.ts

@@ -81,7 +81,6 @@ export const Default: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
         generationTime: 7,
         views: ['line'],
         width: '100%',
-        height: '700px',
         lapisDateField: 'date',
         yAxisMaxLinear: 1,
         yAxisMaxLogarithmic: 'limitTo1',
@@ -126,3 +125,11 @@ export const Default: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
         },
     },
 };
+
+export const WithFixedHeight: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
+    ...Default,
+    args: {
+        ...Default.args,
+        height: '700px',
+    },
+};

package/src/web-components/visualization/gs-relative-growth-advantage.tsx

@@ -87,7 +87,7 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
-    height: string = '700px';
+    height: string | undefined = undefined;
 
     /**
      * Required.

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

@@ -5,11 +5,11 @@ import { html } from 'lit';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import aggregatedData from '../../preact/aggregatedData/__mockData__/aggregated.json';
-import aggregatedGermany from '../../preact/map/__mockData__/aggregatedGermany.json';
-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 aggregatedGermany from '../../preact/sequencesByLocation/__mockData__/aggregatedGermany.json';
+import aggregatedWorld from '../../preact/sequencesByLocation/__mockData__/aggregatedWorld.json';
+import mapOfGermany from '../../preact/sequencesByLocation/__mockData__/germanyMap.json';
+import worldAtlas from '../../preact/sequencesByLocation/__mockData__/worldAtlas.json';
+import { type SequencesByLocationProps } from '../../preact/sequencesByLocation/sequences-by-location';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 import './gs-sequences-by-location';
@@ -86,7 +86,6 @@ const Template: StoryObj<SequencesByLocationProps> = {
     args: {
         enableMapNavigation: false,
         width: '1100px',
-        height: '700px',
         views: ['map', 'table'],
         pageSize: 10,
     },
@@ -222,7 +221,6 @@ export const GermanyTableOnly: StoryObj<SequencesByLocationProps> = {
         lapisFilter: { dateFrom: '2022-01-01', dateTo: '2022-04-01', country: 'Germany' },
         lapisLocationField: 'division',
         width: '100%',
-        height: '700px',
         views: ['table'],
         pageSize: 10,
     },
@@ -249,3 +247,11 @@ export const GermanyTableOnly: StoryObj<SequencesByLocationProps> = {
         },
     },
 };
+
+export const WithFixedHeight: StoryObj<SequencesByLocationProps> = {
+    ...WorldMap,
+    args: {
+        ...WorldMap.args,
+        height: '700px',
+    },
+};

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

@@ -3,8 +3,11 @@ import { unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
-import leafletStyleModifications from '../../preact/map/leafletStyleModifications.css?inline';
-import { SequencesByLocation, type SequencesByLocationProps } from '../../preact/map/sequences-by-location';
+import leafletStyleModifications from '../../preact/sequencesByLocation/leafletStyleModifications.css?inline';
+import {
+    SequencesByLocation,
+    type SequencesByLocationProps,
+} from '../../preact/sequencesByLocation/sequences-by-location';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
@@ -148,7 +151,7 @@ export class SequencesByLocationComponent extends PreactLitAdapterWithGridJsStyl
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
-    height: string = '700px';
+    height: string | undefined = undefined;
 
     /**
      A list of tabs with views that this component should provide.

package/src/web-components/visualization/gs-statistics.stories.ts

@@ -90,6 +90,5 @@ export const Default: StoryObj<Required<StatisticsProps>> = {
             division: 'Alabama',
         },
         width: '100%',
-        height: '700px',
     },
 };