@genspectrum/dashboard-components 0.1.5 → 0.3.0

package/src/web-components/{display/mutation-comparison-component.tsx → visualization/gs-mutation-comparison.tsx}

@@ -1,15 +1,12 @@
 import { customElement, property } from 'lit/decorators.js';
 
-import {
-    MutationComparison,
-    type MutationComparisonVariant,
-    type View,
-} from '../../preact/mutationComparison/mutation-comparison';
-import { type SequenceType } from '../../types';
+import { MutationComparison, type MutationComparisonProps } from '../../preact/mutationComparison/mutation-comparison';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
 /**
+ * ## Context
+ *
  * This component allows to compare mutations between different variants.
  * A variant is defined by its LAPIS filter.
  *
@@ -32,9 +29,11 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  * Thus, changing the proportion interval may change a mutations from being "common" between variant
  * to being "for one variant only".
  */
-@customElement('gs-mutation-comparison-component')
+@customElement('gs-mutation-comparison')
 export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyles {
     /**
+     * Required.
+     *
      * An array of variants to compare.
      *
      * The `lapisFilter` will be sent as is to LAPIS to filter the mutation data.
@@ -62,21 +61,26 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
     views: ('table' | 'venn')[] = ['table'];
 
     /**
-     * The size of the component.
+     * The width of the component.
      *
-     * If not set, the component will take the full width of its container with height 700px.
+     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    width: string = '100%';
+
+    /**
+     * The height of the component.
      *
-     * The width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.
-     * If the unit is %, the size will be relative to the container of the component.
+     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
      */
-    @property({ type: Object })
-    size: { width?: string; height?: string } | undefined = undefined;
+    @property({ type: String })
+    height: string = '700px';
 
     /**
      * The headline of the component. Set to an empty string to hide the headline.
      */
     @property({ type: String })
-    headline: string | undefined = 'Mutation comparison';
+    headline: string = 'Mutation comparison';
 
     override render() {
         return (
@@ -84,7 +88,8 @@ export class MutationComparisonComponent extends PreactLitAdapterWithGridJsStyle
                 variants={this.variants}
                 sequenceType={this.sequenceType}
                 views={this.views}
-                size={this.size}
+                width={this.width}
+                height={this.height}
                 headline={this.headline}
             />
         );
@@ -99,8 +104,12 @@ declare global {
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type VariantsMatches = Expect<
-    Equals<typeof MutationComparisonComponent.prototype.variants, MutationComparisonVariant[]>
+    Equals<typeof MutationComparisonComponent.prototype.variants, MutationComparisonProps['variants']>
+>;
+type SequenceTypeMatches = Expect<
+    Equals<typeof MutationComparisonComponent.prototype.sequenceType, MutationComparisonProps['sequenceType']>
+>;
+type ViewsMatches = Expect<
+    Equals<typeof MutationComparisonComponent.prototype.views, MutationComparisonProps['views']>
 >;
-type SequenceTypeMatches = Expect<Equals<typeof MutationComparisonComponent.prototype.sequenceType, SequenceType>>;
-type ViewsMatches = Expect<Equals<typeof MutationComparisonComponent.prototype.views, View[]>>;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/{display/mutations-component.stories.ts → visualization/gs-mutations.stories.ts}

@@ -2,7 +2,7 @@ import { expect, fireEvent, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
-import './mutations-component';
+import './gs-mutations';
 import '../app';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { LAPIS_URL, NUCLEOTIDE_INSERTIONS_ENDPOINT, NUCLEOTIDE_MUTATIONS_ENDPOINT } from '../../constants';
@@ -16,11 +16,14 @@ const codeExample = String.raw`
     variant='{ "country": "Switzerland", "pangoLineage": "B.1.1.7", "dateTo": "2022-01-01" }'
     sequenceType="nucleotide"
     views='["grid", "table", "insertions"]'
+    headline="Mutations"
+    width='100%'
+    height='700px'
 ></gs-mutations>`;
 
-const meta: Meta<MutationsProps> = {
+const meta: Meta<Required<MutationsProps>> = {
     title: 'Visualization/Mutations',
-    component: 'gs-mutations-component',
+    component: 'gs-mutations',
     argTypes: {
         variant: { control: 'object' },
         sequenceType: {
@@ -31,19 +34,20 @@ const meta: Meta<MutationsProps> = {
             options: ['table', 'grid', 'insertions'],
             control: { type: 'check' },
         },
-        size: { control: 'object' },
+        width: { control: 'text' },
+        height: { control: 'text' },
         headline: { control: 'text' },
     },
     args: {
         variant: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateTo: '2022-01-01' },
         sequenceType: 'nucleotide',
         views: ['grid', 'table', 'insertions'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Mutations',
     },
     parameters: withComponentDocs({
         componentDocs: {
-            tag: 'gs-mutations-component',
             opensShadowDom: true,
             expectsChildren: false,
             codeExample,
@@ -54,21 +58,22 @@ const meta: Meta<MutationsProps> = {
 
 export default meta;
 
-const Template: StoryObj<MutationsProps> = {
+const Template: StoryObj<Required<MutationsProps>> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
-            <gs-mutations-component
+            <gs-mutations
                 .variant=${args.variant}
                 .sequenceType=${args.sequenceType}
                 .views=${args.views}
-                .size=${args.size}
+                .width=${args.width}
+                .height=${args.height}
                 .headline=${args.headline}
-            ></gs-mutations-component>
+            ></gs-mutations>
         </gs-app>
     `,
 };
 
-export const Default: StoryObj<MutationsProps> = {
+export const Default: StoryObj<Required<MutationsProps>> = {
     ...Template,
     parameters: {
         fetchMock: {
@@ -105,10 +110,10 @@ export const Default: StoryObj<MutationsProps> = {
     },
 };
 
-export const OnTableTab: StoryObj<MutationsProps> = {
+export const OnTableTab: StoryObj<Required<MutationsProps>> = {
     ...Default,
     play: async ({ canvasElement }) => {
-        const canvas = await withinShadowRoot(canvasElement, 'gs-mutations-component');
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutations');
 
         await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument());
 
@@ -116,10 +121,10 @@ export const OnTableTab: StoryObj<MutationsProps> = {
     },
 };
 
-export const OnInsertionsTab: StoryObj<MutationsProps> = {
+export const OnInsertionsTab: StoryObj<Required<MutationsProps>> = {
     ...Default,
     play: async ({ canvasElement }) => {
-        const canvas = await withinShadowRoot(canvasElement, 'gs-mutations-component');
+        const canvas = await withinShadowRoot(canvasElement, 'gs-mutations');
 
         await waitFor(() => expect(canvas.getByRole('button', { name: 'Insertions' })).toBeInTheDocument());
 

package/src/web-components/{display/mutations-component.tsx → visualization/gs-mutations.tsx}

@@ -6,6 +6,8 @@ import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
 /**
+ * ## Context
+ *
  * This component displays mutations (substitutions, deletions and insertions) for a given variant.
  *
  * ## Views
@@ -30,14 +32,16 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  * The insertions view shows the count of all insertions for the given variant.
  *
  */
-@customElement('gs-mutations-component')
+@customElement('gs-mutations')
 export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     /**
+     * Required.
+     *
      * The `variant` will be sent as is to LAPIS to filter the mutation data.
      * It must be a valid LAPIS filter object.
      */
     @property({ type: Object })
-    variant: Record<string, string | number | null | boolean> = { displayName: '' };
+    variant: Record<string, string | number | null | boolean> = {};
 
     /**
      * The type of the sequence for which the mutations should be shown.
@@ -52,21 +56,26 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
     views: ('table' | 'grid' | 'insertions')[] = ['table', 'grid'];
 
     /**
-     * The size of the component.
+     * The width of the component.
      *
-     * If not set, the component will take the full width of its container with height 700px.
+     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    width: string = '100%';
+
+    /**
+     * The height of the component.
      *
-     * The width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.
-     * If the unit is %, the size will be relative to the container of the component.
+     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
      */
-    @property({ type: Object })
-    size: { width?: string; height?: string } | undefined = undefined;
+    @property({ type: String })
+    height: string = '700px';
 
     /**
      * The headline of the component. Set to an empty string to hide the headline.
      */
     @property({ type: String })
-    headline: string | undefined = 'Mutations';
+    headline: string = 'Mutations';
 
     override render() {
         return (
@@ -74,7 +83,8 @@ export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
                 variant={this.variant}
                 sequenceType={this.sequenceType}
                 views={this.views}
-                size={this.size}
+                width={this.width}
+                height={this.height}
                 headline={this.headline}
             />
         );

package/src/web-components/{display/prevalence-over-time-component.stories.ts → visualization/gs-prevalence-over-time.stories.ts}

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
 import '../app';
-import './prevalence-over-time-component';
+import './gs-prevalence-over-time';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import denominator from '../../preact/prevalenceOverTime/__mockData__/denominator.json';
@@ -16,15 +16,18 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
 <gs-prevalence-over-time
-    numerator='[{ "displayName": "EG", "country": "USA", "pangoLineage": "EG*" }, { "displayName": "JN.1", "country": "USA", "pangoLineage": "JN.1*" }]'
-    denominator='{ "country": "USA", "displayName": "All" }'
+    numerator='[{ "displayName": "EG", "lapisFilter": { "country": "USA", "pangoLineage": "EG*" }}, { "displayName": "JN.1", "lapisFilter": { "country": "USA", "pangoLineage": "JN.1*" }}]'
+    denominator='{ "country": "USA"}'
     granularity="month"
     smoothingWindow="0"
     views='["bar", "line", "bubble", "table"]'
     confidenceIntervalMethods='["wilson"]'
+    headline="Prevalence over time"
+    width='100%'
+    height='700px'
 ></gs-prevalence-over-time>`;
 
-const meta: Meta<PrevalenceOverTimeProps> = {
+const meta: Meta<Required<PrevalenceOverTimeProps>> = {
     title: 'Visualization/Prevalence over time',
     component: 'gs-prevalence-over-time',
     argTypes: {
@@ -43,12 +46,12 @@ const meta: Meta<PrevalenceOverTimeProps> = {
             options: ['wilson'],
             control: { type: 'check' },
         },
-        size: [{ control: 'object' }],
+        width: { control: 'text' },
+        height: { control: 'text' },
         headline: { control: 'text' },
     },
     parameters: withComponentDocs({
         componentDocs: {
-            tag: 'gs-prevalence-over-time',
             opensShadowDom: true,
             expectsChildren: false,
             codeExample,
@@ -59,7 +62,7 @@ const meta: Meta<PrevalenceOverTimeProps> = {
 
 export default meta;
 
-const Template: StoryObj<PrevalenceOverTimeProps> = {
+const Template: StoryObj<Required<PrevalenceOverTimeProps>> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
             <gs-prevalence-over-time
@@ -69,26 +72,28 @@ const Template: StoryObj<PrevalenceOverTimeProps> = {
                 .smoothingWindow=${args.smoothingWindow}
                 .views=${args.views}
                 .confidenceIntervalMethods=${args.confidenceIntervalMethods}
-                .size=${args.size}
+                .width=${args.width}
+                .height=${args.height}
                 .headline=${args.headline}
             ></gs-prevalence-over-time>
         </gs-app>
     `,
 };
 
-export const TwoVariants: StoryObj<PrevalenceOverTimeProps> = {
+export const TwoVariants: StoryObj<Required<PrevalenceOverTimeProps>> = {
     ...Template,
     args: {
         numerator: [
-            { displayName: 'EG', country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' },
-            { displayName: 'JN.1', country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' },
+            { displayName: 'EG', lapisFilter: { country: 'USA', pangoLineage: 'EG*', dateFrom: '2023-01-01' } },
+            { displayName: 'JN.1', lapisFilter: { country: 'USA', pangoLineage: 'JN.1*', dateFrom: '2023-01-01' } },
         ],
-        denominator: { country: 'USA', dateFrom: '2023-01-01', displayName: 'All' },
+        denominator: { country: 'USA', dateFrom: '2023-01-01' },
         granularity: 'month',
         smoothingWindow: 0,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Prevalence over time',
     },
     parameters: {
@@ -146,16 +151,20 @@ export const TwoVariants: StoryObj<PrevalenceOverTimeProps> = {
     },
 };
 
-export const OneVariant: StoryObj<PrevalenceOverTimeProps> = {
+export const OneVariant: StoryObj<Required<PrevalenceOverTimeProps>> = {
     ...Template,
     args: {
-        numerator: { displayName: 'EG', country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
-        denominator: { country: 'USA', dateFrom: '2023-10-01', displayName: 'All' },
+        numerator: {
+            displayName: 'EG',
+            lapisFilter: { country: 'USA', pangoLineage: 'BA.2.86*', dateFrom: '2023-10-01' },
+        },
+        denominator: { country: 'USA', dateFrom: '2023-10-01' },
         granularity: 'day',
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Prevalence over time',
     },
     parameters: {
@@ -197,7 +206,7 @@ export const OneVariant: StoryObj<PrevalenceOverTimeProps> = {
     },
 };
 
-export const OneVariantOnLineTab: StoryObj<PrevalenceOverTimeProps> = {
+export const OneVariantOnLineTab: StoryObj<Required<PrevalenceOverTimeProps>> = {
     ...OneVariant,
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');
@@ -208,7 +217,7 @@ export const OneVariantOnLineTab: StoryObj<PrevalenceOverTimeProps> = {
     },
 };
 
-export const OneVariantOnBubbleTab: StoryObj<PrevalenceOverTimeProps> = {
+export const OneVariantOnBubbleTab: StoryObj<Required<PrevalenceOverTimeProps>> = {
     ...OneVariant,
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');
@@ -219,7 +228,7 @@ export const OneVariantOnBubbleTab: StoryObj<PrevalenceOverTimeProps> = {
     },
 };
 
-export const OneVariantOnTableTab: StoryObj<PrevalenceOverTimeProps> = {
+export const OneVariantOnTableTab: StoryObj<Required<PrevalenceOverTimeProps>> = {
     ...OneVariant,
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');

package/src/web-components/{display/prevalence-over-time-component.tsx → visualization/gs-prevalence-over-time.tsx}

@@ -1,12 +1,12 @@
 import { customElement, property } from 'lit/decorators.js';
 
-import PrevalenceOverTime, { type View } from '../../preact/prevalenceOverTime/prevalence-over-time';
-import { type ConfidenceIntervalMethod } from '../../preact/shared/charts/confideceInterval';
-import { type NamedLapisFilter, type TemporalGranularity } from '../../types';
+import PrevalenceOverTime, { type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
 /**
+ * ## Context
+ *
  * This component displays the prevalence over time of one or more variants.
  * The prevalence is calculated as the ratio of the number of cases of each variant given as `numerator`
  * to the number of cases of the variant given as `denominator`.
@@ -43,24 +43,34 @@ import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsS
  */
 @customElement('gs-prevalence-over-time')
 export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
+    // prettier-ignore
+    // The multiline union type must not start with `|` because it looks weird in the Storybook docs
     /**
+     *   Required.
+     *
      * Either a single variant or an array of variants to compare.
      * This must be a valid LAPIS filter object with an additional `displayName` property
      * which will be used as the label for the variant in the views,
      * or an array of such objects.
      */
-    @property({ type: Object })
+    @property({type: Object})
     numerator:
-        | (Record<string, string | number | null | boolean> & { displayName: string })
-        | (Record<string, string | number | null | boolean> & {
-              displayName: string;
-          })[] = { displayName: '' };
+        {
+            lapisFilter: Record<string, string | number | null | boolean>;
+            displayName: string;
+        }
+        | {
+            lapisFilter: Record<string, string | number | null | boolean>;
+            displayName: string;
+        }[] = { displayName: '', lapisFilter: {} };
 
     /**
+     * Required.
+     *
      * The variant that the variants in `numerator` are compared to.
      */
     @property({ type: Object })
-    denominator: Record<string, string | number | null | boolean> & { displayName: string } = { displayName: '' };
+    denominator: Record<string, string | number | null | boolean> = {};
 
     /**
      * The granularity of the time axis.
@@ -98,18 +108,23 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
      * The headline of the component. Set to an empty string to hide the headline.
      */
     @property({ type: String })
-    headline: string | undefined = 'Prevalence over time';
+    headline: string = 'Prevalence over time';
 
     /**
-     * The size of the component.
+     * The width of the component.
      *
-     * If not set, the component will take the full width of its container with height 700px.
+     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    width: string = '100%';
+
+    /**
+     * The height of the component.
      *
-     * The width and height should be a string with a unit in css style, e.g. '100%', '500px' or '50vh'.
-     * If the unit is %, the size will be relative to the container of the component.
+     * Visit https://genspectrum.github.io/dashboards/?path=/docs/components-size-of-components--docs for more information.
      */
-    @property({ type: Object })
-    size: { width?: string; height?: string } | undefined = undefined;
+    @property({ type: String })
+    height: string = '700px';
 
     override render() {
         return (
@@ -120,7 +135,8 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
                 smoothingWindow={this.smoothingWindow}
                 views={this.views}
                 confidenceIntervalMethods={this.confidenceIntervalMethods}
-                size={this.size}
+                width={this.width}
+                height={this.height}
                 headline={this.headline}
             />
         );
@@ -135,12 +151,21 @@ declare global {
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type NumeratorMatches = Expect<
-    Equals<typeof PrevalenceOverTimeComponent.prototype.numerator, NamedLapisFilter | NamedLapisFilter[]>
+    Equals<typeof PrevalenceOverTimeComponent.prototype.numerator, PrevalenceOverTimeProps['numerator']>
+>;
+type DenominatorMatches = Expect<
+    Equals<typeof PrevalenceOverTimeComponent.prototype.denominator, PrevalenceOverTimeProps['denominator']>
+>;
+type GranularityMatches = Expect<
+    Equals<typeof PrevalenceOverTimeComponent.prototype.granularity, PrevalenceOverTimeProps['granularity']>
+>;
+type ViewsMatches = Expect<
+    Equals<typeof PrevalenceOverTimeComponent.prototype.views, PrevalenceOverTimeProps['views']>
 >;
-type DenominatorMatches = Expect<Equals<typeof PrevalenceOverTimeComponent.prototype.denominator, NamedLapisFilter>>;
-type GranularityMatches = Expect<Equals<typeof PrevalenceOverTimeComponent.prototype.granularity, TemporalGranularity>>;
-type ViewsMatches = Expect<Equals<typeof PrevalenceOverTimeComponent.prototype.views, View[]>>;
 type ConfidenceIntervalMethodsMatches = Expect<
-    Equals<typeof PrevalenceOverTimeComponent.prototype.confidenceIntervalMethods, ConfidenceIntervalMethod[]>
+    Equals<
+        typeof PrevalenceOverTimeComponent.prototype.confidenceIntervalMethods,
+        PrevalenceOverTimeProps['confidenceIntervalMethods']
+    >
 >;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/{display/relative-growth-advantage-component.stories.ts → visualization/gs-relative-growth-advantage.stories.ts}

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
-import './relative-growth-advantage-component';
+import './gs-relative-growth-advantage';
 import '../app';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
@@ -15,6 +15,9 @@ const codeExample = String.raw`
     denominator='{ "country": "Switzerland", "dateFrom": "2020-12-01" }'
     generationTime="7"
     views='["line"]'
+    width='100%'
+    height='700px'
+    headline="Relative growth advantage"
 ></gs-relative-growth-advantage>`;
 
 const meta: Meta<RelativeGrowthAdvantageProps> = {
@@ -28,12 +31,12 @@ const meta: Meta<RelativeGrowthAdvantageProps> = {
             options: ['line'],
             control: { type: 'check' },
         },
-        size: [{ control: 'object' }],
+        width: { control: 'text' },
+        height: { control: 'text' },
         headline: { control: 'text' },
     },
     parameters: withComponentDocs({
         componentDocs: {
-            tag: 'gs-relative-growth-advantage',
             opensShadowDom: true,
             expectsChildren: false,
             codeExample,
@@ -44,7 +47,7 @@ const meta: Meta<RelativeGrowthAdvantageProps> = {
 
 export default meta;
 
-const Template: StoryObj<RelativeGrowthAdvantageProps> = {
+const Template: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
     render: (args) => html`
         <gs-app lapis="${LAPIS_URL}">
             <gs-relative-growth-advantage
@@ -52,21 +55,23 @@ const Template: StoryObj<RelativeGrowthAdvantageProps> = {
                 .denominator=${args.denominator}
                 .generationTime=${args.generationTime}
                 .views=${args.views}
-                .size=${args.size}
+                .width=${args.width}
+                .height=${args.height}
                 .headline=${args.headline}
             ></gs-relative-growth-advantage>
         </gs-app>
     `,
 };
 
-export const Default: StoryObj<RelativeGrowthAdvantageProps> = {
+export const Default: StoryObj<Required<RelativeGrowthAdvantageProps>> = {
     ...Template,
     args: {
         numerator: { country: 'Switzerland', pangoLineage: 'B.1.1.7', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
         denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
         generationTime: 7,
         views: ['line'],
-        size: { width: '100%', height: '700px' },
+        width: '100%',
+        height: '700px',
         headline: 'Relative growth advantage',
     },
     parameters: {