@genspectrum/dashboard-components 0.14.2 → 0.16.0

package/src/web-components/input/{gs-date-range-selector.tsx → gs-date-range-filter.tsx}

@@ -1,8 +1,8 @@
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
-import { DateRangeSelector, type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
-import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeSelector/dateRangeOption';
+import { DateRangeFilter, type DateRangeFilterProps } from '../../preact/dateRangeFilter/date-range-filter';
+import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeFilter/dateRangeOption';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -48,8 +48,8 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * Use this event, when you want to control this component in your JS application.
  * You can supply the `detail` of this event to the `value` attribute of this component.
  */
-@customElement('gs-date-range-selector')
-export class DateRangeSelectorComponent extends PreactLitAdapter {
+@customElement('gs-date-range-filter')
+export class DateRangeFilterComponent extends PreactLitAdapter {
     /**
      * An array of date range options that the select field should provide.
      * The `label` will be shown to the user, and it will be available as `value`.
@@ -78,7 +78,22 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
      * The `detail` of the `gs-date-range-option-changed` event can be used for this attribute,
      * if you want to control this component in your JS application.
      */
-    @property({ type: Object })
+    @property({
+        converter: (value) => {
+            if (value === null) {
+                return undefined;
+            }
+            try {
+                const result = JSON.parse(value) as unknown;
+                if (typeof result !== 'object' && typeof result !== 'string') {
+                    return value;
+                }
+                return result;
+            } catch (_) {
+                return value;
+            }
+        },
+    })
     value: string | { dateFrom?: string; dateTo?: string } | undefined = undefined;
 
     /**
@@ -97,7 +112,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
 
     override render() {
         return (
-            <DateRangeSelector
+            <DateRangeFilter
                 dateRangeOptions={this.dateRangeOptions}
                 earliestDate={this.earliestDate}
                 value={this.value}
@@ -110,7 +125,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
 
     interface HTMLElementEventMap {
@@ -123,21 +138,21 @@ declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type CustomSelectOptionsMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.dateRangeOptions, DateRangeSelectorProps['dateRangeOptions']>
+    Equals<typeof DateRangeFilterComponent.prototype.dateRangeOptions, DateRangeFilterProps['dateRangeOptions']>
 >;
 type EarliestDateMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.earliestDate, DateRangeSelectorProps['earliestDate']>
+    Equals<typeof DateRangeFilterComponent.prototype.earliestDate, DateRangeFilterProps['earliestDate']>
 >;
-type ValueMatches = Expect<Equals<typeof DateRangeSelectorComponent.prototype.value, DateRangeSelectorProps['value']>>;
-type WidthMatches = Expect<Equals<typeof DateRangeSelectorComponent.prototype.width, DateRangeSelectorProps['width']>>;
+type ValueMatches = Expect<Equals<typeof DateRangeFilterComponent.prototype.value, DateRangeFilterProps['value']>>;
+type WidthMatches = Expect<Equals<typeof DateRangeFilterComponent.prototype.width, DateRangeFilterProps['width']>>;
 type DateColumnMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.lapisDateField, DateRangeSelectorProps['lapisDateField']>
+    Equals<typeof DateRangeFilterComponent.prototype.lapisDateField, DateRangeFilterProps['lapisDateField']>
 >;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/input/{gs-text-input.stories.ts → gs-text-filter.stories.ts}

@@ -6,26 +6,26 @@ import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import '../gs-app';
-import './gs-text-input';
-import data from '../../preact/textInput/__mockData__/aggregated_hosts.json';
-import type { TextInputProps } from '../../preact/textInput/text-input';
+import './gs-text-filter';
+import data from '../../preact/textFilter/__mockData__/aggregated_hosts.json';
+import type { TextFilterProps } from '../../preact/textFilter/text-filter';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
-<gs-text-input 
+<gs-text-filter 
     lapisField="host"
     lapisFilter='{"country": "Germany"}'
     placeholderText="Enter host name"
     value="Homo sapiens"
     width="50%">
-</gs-text-input>`;
+</gs-text-filter>`;
 
-const meta: Meta<Required<TextInputProps>> = {
-    title: 'Input/Text input',
-    component: 'gs-text-input',
+const meta: Meta<Required<TextFilterProps>> = {
+    title: 'Input/Text filter',
+    component: 'gs-text-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-text-input-changed', ...previewHandles],
+            handles: ['gs-text-filter-changed', ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -83,17 +83,17 @@ const meta: Meta<Required<TextInputProps>> = {
 
 export default meta;
 
-export const Default: StoryObj<Required<TextInputProps>> = {
+export const Default: StoryObj<Required<TextFilterProps>> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
-                <gs-text-input
+                <gs-text-filter
                     .lapisField=${args.lapisField}
                     .lapisFilter=${args.lapisFilter}
                     .placeholderText=${args.placeholderText}
                     .value=${args.value}
                     .width=${args.width}
-                ></gs-text-input>
+                ></gs-text-filter>
             </div>
         </gs-app>`;
     },
@@ -106,15 +106,15 @@ export const Default: StoryObj<Required<TextInputProps>> = {
     },
 };
 
-export const FiresEvents: StoryObj<Required<TextInputProps>> = {
+export const FiresEvents: StoryObj<Required<TextFilterProps>> = {
     ...Default,
     play: async ({ canvasElement, step }) => {
-        const canvas = await withinShadowRoot(canvasElement, 'gs-text-input');
+        const canvas = await withinShadowRoot(canvasElement, 'gs-text-filter');
 
         const inputField = () => canvas.getByPlaceholderText('Enter host name');
         const listenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-text-input-changed', listenerMock);
+            canvasElement.addEventListener('gs-text-filter-changed', listenerMock);
         });
 
         await step('wait until data is loaded', async () => {

package/src/web-components/input/{gs-text-input.tsx → gs-text-filter.tsx}

@@ -1,8 +1,8 @@
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
-import { type TextInputChangedEvent } from '../../preact/textInput/TextInputChangedEvent';
-import { TextInput, type TextInputProps } from '../../preact/textInput/text-input';
+import { type TextFilterChangedEvent } from '../../preact/textFilter/TextFilterChangedEvent';
+import { TextFilter, type TextFilterProps } from '../../preact/textFilter/text-filter';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -12,7 +12,7 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  *
  * This component provides a text input field to specify filters for arbitrary fields of this LAPIS instance.
  *
- * @fires {CustomEvent<Record<string, string | undefined>>} gs-text-input-changed
+ * @fires {CustomEvent<Record<string, string | undefined>>} gs-text-filter-changed
  * Fired when the input field is changed.
  * The `details` of this event contain an object with the `lapisField` as key and the input value as value.
  * Example:
@@ -22,10 +22,10 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * }
  *  ```
  */
-@customElement('gs-text-input')
-export class TextInputComponent extends PreactLitAdapter {
+@customElement('gs-text-filter')
+export class TextFilterComponent extends PreactLitAdapter {
     /**
-     * The initial value to use for this text input.
+     * The initial value to use for this text filter.
      */
     @property()
     value: string | undefined = undefined;
@@ -33,7 +33,7 @@ export class TextInputComponent extends PreactLitAdapter {
     /**
      * Required.
      *
-     * The LAPIS field name to use for this text input.
+     * The LAPIS field name to use for this text filter.
      * The field must exist on this LAPIS instance.
      */
     @property()
@@ -68,7 +68,7 @@ export class TextInputComponent extends PreactLitAdapter {
 
     override render() {
         return (
-            <TextInput
+            <TextFilter
                 lapisField={this.lapisField}
                 lapisFilter={this.lapisFilter}
                 placeholderText={this.placeholderText}
@@ -81,11 +81,11 @@ export class TextInputComponent extends PreactLitAdapter {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-text-filter': TextFilterComponent;
     }
 
     interface HTMLElementEventMap {
-        'gs-text-input-changed': TextInputChangedEvent;
+        'gs-text-filter-changed': TextFilterChangedEvent;
     }
 }
 
@@ -93,19 +93,19 @@ declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
-type InitialValueMatches = Expect<Equals<typeof TextInputComponent.prototype.value, TextInputProps['value']>>;
-type LapisFieldMatches = Expect<Equals<typeof TextInputComponent.prototype.lapisField, TextInputProps['lapisField']>>;
+type InitialValueMatches = Expect<Equals<typeof TextFilterComponent.prototype.value, TextFilterProps['value']>>;
+type LapisFieldMatches = Expect<Equals<typeof TextFilterComponent.prototype.lapisField, TextFilterProps['lapisField']>>;
 type LapisFilterMatches = Expect<
-    Equals<typeof TextInputComponent.prototype.lapisFilter, TextInputProps['lapisFilter']>
+    Equals<typeof TextFilterComponent.prototype.lapisFilter, TextFilterProps['lapisFilter']>
 >;
 type PlaceholderTextMatches = Expect<
-    Equals<typeof TextInputComponent.prototype.placeholderText, TextInputProps['placeholderText']>
+    Equals<typeof TextFilterComponent.prototype.placeholderText, TextFilterProps['placeholderText']>
 >;
-type WidthMatches = Expect<Equals<typeof TextInputComponent.prototype.width, TextInputProps['width']>>;
+type WidthMatches = Expect<Equals<typeof TextFilterComponent.prototype.width, TextFilterProps['width']>>;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/input/index.ts

@@ -1,5 +1,5 @@
-export { DateRangeSelectorComponent } from './gs-date-range-selector';
+export { DateRangeFilterComponent } from './gs-date-range-filter';
 export { LocationFilterComponent } from './gs-location-filter';
-export { TextInputComponent } from './gs-text-input';
+export { TextFilterComponent } from './gs-text-filter';
 export { MutationFilterComponent } from './gs-mutation-filter';
 export { LineageFilterComponent } from './gs-lineage-filter';

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',
     },
 };

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

@@ -51,7 +51,7 @@ export class StatisticsComponent extends PreactLitAdapterWithGridJsStyles {
      * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/components-size-of-components--docs for more information.
      */
     @property({ type: String })
-    height: string = '100%';
+    height: string | undefined = undefined;
 
     override render() {
         return (

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

@@ -35,7 +35,7 @@ const meta: Meta<WastewaterMutationsOverTimeProps & { infoText: string }> = {
         lapisFilter: { versionStatus: 'LATEST_VERSION', isRevocation: false },
         sequenceType: 'nucleotide',
         width: '100%',
-        height: '700px',
+        height: undefined,
         infoText: 'Some info text',
         maxNumberOfGridRows: 100,
     },
@@ -88,3 +88,11 @@ export const WastewaterMutationsOverTime: StoryObj<WastewaterMutationsOverTimePr
         },
     },
 };
+
+export const WithFixedHeight: StoryObj<WastewaterMutationsOverTimeProps & { infoText: string }> = {
+    ...WastewaterMutationsOverTime,
+    args: {
+        ...WastewaterMutationsOverTime.args,
+        height: '700px',
+    },
+};

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

@@ -63,7 +63,7 @@ export class WastewaterMutationsOverTimeComponent extends PreactLitAdapterWithGr
      * 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 grid rows to display.