@genspectrum/dashboard-components 0.15.0 → 0.16.1

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/PreactLitAdapter.tsx

@@ -8,7 +8,7 @@ import { lapisContext } from './lapis-context';
 import { referenceGenomeContext } from './reference-genome-context';
 import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
 import { LapisUrlContextProvider } from '../preact/LapisUrlContext';
-import { ReferenceGenomeContext } from '../preact/ReferenceGenomeContext';
+import { INITIAL_REFERENCE_GENOMES, ReferenceGenomeContext } from '../preact/ReferenceGenomeContext';
 import minMaxPercentSliderCss from '../preact/components/min-max-percent-slider.css?inline';
 import tailwindStyle from '../styles/tailwind.css?inline';
 
@@ -40,10 +40,7 @@ export abstract class PreactLitAdapter extends ReactiveElement {
      * This value will automatically be injected by the parent `gs-app` component.
      */
     @consume({ context: referenceGenomeContext, subscribe: true })
-    referenceGenome: ReferenceGenome = {
-        nucleotideSequences: [],
-        genes: [],
-    };
+    referenceGenome: ReferenceGenome = INITIAL_REFERENCE_GENOMES;
 
     override update(changedProperties: PropertyValues) {
         const vdom = (

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/gs-app.ts

@@ -9,6 +9,7 @@ import { lapisContext } from './lapis-context';
 import { referenceGenomeContext } from './reference-genome-context';
 import { type ReferenceGenome } from '../lapisApi/ReferenceGenome';
 import { fetchReferenceGenome } from '../lapisApi/lapisApi';
+import { INITIAL_REFERENCE_GENOMES } from '../preact/ReferenceGenomeContext';
 
 const lapisUrlSchema = z.string().url();
 
@@ -43,10 +44,7 @@ export class AppComponent extends LitElement {
      * @internal
      */
     @provide({ context: referenceGenomeContext })
-    referenceGenome: ReferenceGenome = {
-        nucleotideSequences: [],
-        genes: [],
-    };
+    referenceGenome: ReferenceGenome = INITIAL_REFERENCE_GENOMES;
 
     /**
      * @internal

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

@@ -16,6 +16,7 @@ const codeExample = String.raw`
     height='700px'
     granularity="month"
     lapisDateField="date"
+    displayMutations='["A23403G","C241T"]'
 ></gs-mutations-over-time>`;
 
 const meta: Meta<Required<MutationsOverTimeProps>> = {
@@ -38,15 +39,17 @@ const meta: Meta<Required<MutationsOverTimeProps>> = {
             control: { type: 'radio' },
         },
         lapisDateField: { control: 'text' },
+        displayMutations: { control: 'object' },
+        initialMeanProportionInterval: { control: 'object' },
     },
     args: {
         lapisFilter: { pangoLineage: 'JN.1*', dateFrom: '2024-01-15', dateTo: '2024-07-10' },
         sequenceType: 'nucleotide',
         views: ['grid'],
         width: '100%',
-        height: '700px',
         granularity: 'month',
         lapisDateField: 'date',
+        initialMeanProportionInterval: { min: 0.05, max: 0.9 },
     },
     parameters: withComponentDocs({
         componentDocs: {
@@ -72,6 +75,8 @@ const Template: StoryObj<Required<MutationsOverTimeProps>> = {
                 .height=${args.height}
                 .granularity=${args.granularity}
                 .lapisDateField=${args.lapisDateField}
+                .displayMutations=${args.displayMutations}
+                .initialMeanProportionInterval=${args.initialMeanProportionInterval}
             ></gs-mutations-over-time>
         </gs-app>
     `,
@@ -82,6 +87,15 @@ export const ByMonth: StoryObj<Required<MutationsOverTimeProps>> = {
     ...Template,
 };
 
+// This test uses mock data: defaultMockData.ts (through mutationOverTimeWorker.mock.ts)
+export const ByMonthWithFilterOnDisplayedMutations: StoryObj<Required<MutationsOverTimeProps>> = {
+    ...Template,
+    args: {
+        ...Template.args,
+        displayMutations: ['A19722G', 'G21641T', 'T21653-'],
+    },
+};
+
 // This test uses mock data: byWeek.ts (through mutationOverTimeWorker.mock.ts)
 export const ByWeek: StoryObj<Required<MutationsOverTimeProps>> = {
     ...Template,
@@ -111,3 +125,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

@@ -29,6 +29,10 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  *
  * The number of rows is limited to 100.
  * If there are more, the component will only show 100 mutations and notify the user.
+ *
+ * Users can filter the displayed rows by mean proportion via a slider in the toolbar.
+ * The mean proportion of each row is calculated by LAPIS over the whole data range that the component displays.
+ * The initial mean proportion can be set via `initialMeanProportionInterval`.
  */
 @customElement('gs-mutations-over-time')
 export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
@@ -69,7 +73,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.
@@ -87,6 +91,20 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
     @property({ type: String })
     lapisDateField: string = 'date';
 
+    /**
+     * If provided, only the given mutations will be displayed.
+     * The mutations must be provided in the exact format as they would be displayed by the component.
+     */
+    @property({ type: Array })
+    displayMutations: string[] | undefined = undefined;
+
+    /**
+     * The initial proportion interval for the grid view.
+     * The values must be between 0 and 1, inclusive.
+     */
+    @property({ type: Object })
+    initialMeanProportionInterval: { min: number; max: number } = { min: 0.05, max: 0.9 };
+
     override render() {
         return (
             <MutationsOverTime
@@ -97,6 +115,8 @@ export class MutationsOverTimeComponent extends PreactLitAdapterWithGridJsStyles
                 height={this.height}
                 granularity={this.granularity}
                 lapisDateField={this.lapisDateField}
+                displayMutations={this.displayMutations}
+                initialMeanProportionInterval={this.initialMeanProportionInterval}
             />
         );
     }
@@ -135,4 +155,13 @@ type GranularityMatches = Expect<
 type LapisDateFieldMatches = Expect<
     Equals<typeof MutationsOverTimeComponent.prototype.lapisDateField, MutationsOverTimeProps['lapisDateField']>
 >;
+type DisplayMutationsMatches = Expect<
+    Equals<typeof MutationsOverTimeComponent.prototype.displayMutations, MutationsOverTimeProps['displayMutations']>
+>;
+type InitialMeanProportionIntervalMatches = Expect<
+    Equals<
+        typeof MutationsOverTimeComponent.prototype.initialMeanProportionInterval,
+        MutationsOverTimeProps['initialMeanProportionInterval']
+    >
+>;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

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.