@genspectrum/dashboard-components 0.1.3 → 0.1.5

package/src/web-components/display/mutations-component.tsx

@@ -2,21 +2,82 @@ import { customElement, property } from 'lit/decorators.js';
 
 import { Mutations, type View } from '../../preact/mutations/mutations';
 import { type LapisFilter, type SequenceType } from '../../types';
+import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
+/**
+ * This component displays mutations (substitutions, deletions and insertions) for a given variant.
+ *
+ * ## Views
+ *
+ * ### Table View
+ *
+ * The table view shows all substitutions and deletions for the given variant.
+ * It shows the type (substitution or deletion), the total count of the mutation
+ * and the proportion of the mutation in the variant.
+ * The proportion is relative to the total number of sequences matching
+ * the specified sequence filters with non-ambiguous reads at that position.
+ *
+ * The proportion interval filter can be used to filter the displayed mutations on client side.
+ *
+ * ### Grid View
+ *
+ * The grid view shows the proportion of each sequence symbol (nucleotide or amino acid) for each position that has a mutation.
+ * Only positions with at least one mutation in the selected proportion interval are shown.
+ *
+ * ### Insertions View
+ *
+ * The insertions view shows the count of all insertions for the given variant.
+ *
+ */
 @customElement('gs-mutations-component')
 export class MutationsComponent extends PreactLitAdapterWithGridJsStyles {
+    /**
+     * 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: LapisFilter = { displayName: '' };
+    variant: Record<string, string | number | null | boolean> = { displayName: '' };
 
+    /**
+     * The type of the sequence for which the mutations should be shown.
+     */
     @property({ type: String })
-    sequenceType: SequenceType = 'nucleotide';
+    sequenceType: 'nucleotide' | 'amino acid' = 'nucleotide';
 
+    /**
+     * A list of tabs with views that this component should provide.
+     */
     @property({ type: Array })
-    views: View[] = ['table', 'grid'];
+    views: ('table' | 'grid' | 'insertions')[] = ['table', 'grid'];
+
+    /**
+     * The size of the component.
+     *
+     * If not set, the component will take the full width of its container with height 700px.
+     *
+     * 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.
+     */
+    @property({ type: Object })
+    size: { width?: string; height?: string } | undefined = undefined;
+
+    /**
+     * The headline of the component. Set to an empty string to hide the headline.
+     */
+    @property({ type: String })
+    headline: string | undefined = 'Mutations';
 
     override render() {
-        return <Mutations variant={this.variant} sequenceType={this.sequenceType} views={this.views} />;
+        return (
+            <Mutations
+                variant={this.variant}
+                sequenceType={this.sequenceType}
+                views={this.views}
+                size={this.size}
+                headline={this.headline}
+            />
+        );
     }
 }
 
@@ -25,3 +86,9 @@ declare global {
         'gs-mutations-component': MutationsComponent;
     }
 }
+
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+type VariantsMatches = Expect<Equals<typeof MutationsComponent.prototype.variant, LapisFilter>>;
+type SequenceTypeMatches = Expect<Equals<typeof MutationsComponent.prototype.sequenceType, SequenceType>>;
+type ViewsMatches = Expect<Equals<typeof MutationsComponent.prototype.views, View[]>>;
+/* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/display/prevalence-over-time-component.stories.ts

@@ -4,6 +4,7 @@ import { html } from 'lit';
 
 import '../app';
 import './prevalence-over-time-component';
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import denominator from '../../preact/prevalenceOverTime/__mockData__/denominator.json';
 import denominatorOneVariant from '../../preact/prevalenceOverTime/__mockData__/denominatorOneVariant.json';
@@ -13,6 +14,16 @@ import numeratorOneVariant from '../../preact/prevalenceOverTime/__mockData__/nu
 import { type PrevalenceOverTimeProps } from '../../preact/prevalenceOverTime/prevalence-over-time';
 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" }'
+    granularity="month"
+    smoothingWindow="0"
+    views='["bar", "line", "bubble", "table"]'
+    confidenceIntervalMethods='["wilson"]'
+></gs-prevalence-over-time>`;
+
 const meta: Meta<PrevalenceOverTimeProps> = {
     title: 'Visualization/Prevalence over time',
     component: 'gs-prevalence-over-time',
@@ -32,25 +43,36 @@ const meta: Meta<PrevalenceOverTimeProps> = {
             options: ['wilson'],
             control: { type: 'check' },
         },
+        size: [{ control: 'object' }],
+        headline: { control: 'text' },
     },
+    parameters: withComponentDocs({
+        componentDocs: {
+            tag: 'gs-prevalence-over-time',
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    tags: ['autodocs'],
 };
 
 export default meta;
 
 const Template: StoryObj<PrevalenceOverTimeProps> = {
     render: (args) => html`
-        <div class="w-11/12 h-11/12">
-            <gs-app lapis="${LAPIS_URL}">
-                <gs-prevalence-over-time
-                    .numerator=${args.numerator}
-                    .denominator=${args.denominator}
-                    .granularity=${args.granularity}
-                    .smoothingWindow=${args.smoothingWindow}
-                    .views=${args.views}
-                    .confidenceIntervalMethods=${args.confidenceIntervalMethods}
-                ></gs-prevalence-over-time>
-            </gs-app>
-        </div>
+        <gs-app lapis="${LAPIS_URL}">
+            <gs-prevalence-over-time
+                .numerator=${args.numerator}
+                .denominator=${args.denominator}
+                .granularity=${args.granularity}
+                .smoothingWindow=${args.smoothingWindow}
+                .views=${args.views}
+                .confidenceIntervalMethods=${args.confidenceIntervalMethods}
+                .size=${args.size}
+                .headline=${args.headline}
+            ></gs-prevalence-over-time>
+        </gs-app>
     `,
 };
 
@@ -66,6 +88,8 @@ export const TwoVariants: StoryObj<PrevalenceOverTimeProps> = {
         smoothingWindow: 0,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
+        size: { width: '100%', height: '700px' },
+        headline: 'Prevalence over time',
     },
     parameters: {
         fetchMock: {
@@ -131,6 +155,8 @@ export const OneVariant: StoryObj<PrevalenceOverTimeProps> = {
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
         confidenceIntervalMethods: ['wilson'],
+        size: { width: '100%', height: '700px' },
+        headline: 'Prevalence over time',
     },
     parameters: {
         fetchMock: {
@@ -176,9 +202,9 @@ export const OneVariantOnLineTab: StoryObj<PrevalenceOverTimeProps> = {
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');
 
-        await waitFor(() => expect(canvas.getByLabelText('Line', { selector: 'input' })).toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Line' })).toBeInTheDocument());
 
-        await fireEvent.click(canvas.getByLabelText('Line', { selector: 'input' }));
+        await fireEvent.click(canvas.getByRole('button', { name: 'Line' }));
     },
 };
 
@@ -187,9 +213,9 @@ export const OneVariantOnBubbleTab: StoryObj<PrevalenceOverTimeProps> = {
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');
 
-        await waitFor(() => expect(canvas.getByLabelText('Bubble', { selector: 'input' })).toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Bubble' })).toBeInTheDocument());
 
-        await fireEvent.click(canvas.getByLabelText('Bubble', { selector: 'input' }));
+        await fireEvent.click(canvas.getByRole('button', { name: 'Bubble' }));
     },
 };
 
@@ -198,8 +224,8 @@ export const OneVariantOnTableTab: StoryObj<PrevalenceOverTimeProps> = {
     play: async ({ canvasElement }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-prevalence-over-time');
 
-        await waitFor(() => expect(canvas.getByLabelText('Table', { selector: 'input' })).toBeInTheDocument());
+        await waitFor(() => expect(canvas.getByRole('button', { name: 'Table' })).toBeInTheDocument());
 
-        await fireEvent.click(canvas.getByLabelText('Table', { selector: 'input' }));
+        await fireEvent.click(canvas.getByRole('button', { name: 'Table' }));
     },
 };

package/src/web-components/display/prevalence-over-time-component.tsx

@@ -3,27 +3,113 @@ 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 { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
+/**
+ * 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`.
+ *
+ * In the chart views,
+ * - the user can select whether to display a confidence interval (not available in the bubble chart).
+ *   The confidence interval is calculated using [Wilson score interval](https://en.wikipedia.org/wiki/Binomial_proportion_confidence_interval),
+ *   with a confidence level of 95%.
+ * - the x-axis shows time steps in the selected `granularity`.
+ * - the user can select the y-axis scale (linear, logistic, logit).
+ *
+ * ## Views
+ *
+ * ### Bar View
+ *
+ * Displays the prevalence over time as a bar chart.
+ * Shows a bar for each variant in the `numerator` on every time step.
+ *
+ * ### Line View
+ *
+ * Displays the prevalence over time as a line chart.
+ * Each data point is connected for better visibility.
+ * Shows a line for each variant in the `numerator`.
+ *
+ * ### Bubble View
+ *
+ * Displays the prevalence over time as a bubble chart.
+ * The size of the bubbles represents the number of cases of the `denominator` variant.
+ * The height of the bubbles represents the prevalence of the `numerator` variants.
+ *
+ * ### Table View
+ *
+ * Displays the prevalence over time as a table with one row per time point.
+ */
 @customElement('gs-prevalence-over-time')
 export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyles {
+    /**
+     * 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 })
-    numerator: NamedLapisFilter | NamedLapisFilter[] = { displayName: '' };
+    numerator:
+        | (Record<string, string | number | null | boolean> & { displayName: string })
+        | (Record<string, string | number | null | boolean> & {
+              displayName: string;
+          })[] = { displayName: '' };
 
+    /**
+     * The variant that the variants in `numerator` are compared to.
+     */
     @property({ type: Object })
-    denominator: NamedLapisFilter = { displayName: '' };
+    denominator: Record<string, string | number | null | boolean> & { displayName: string } = { displayName: '' };
 
+    /**
+     * The granularity of the time axis.
+     */
     @property({ type: String })
-    granularity: TemporalGranularity = 'day';
+    granularity: 'day' | 'week' | 'month' | 'year' = 'day';
 
+    /**
+     * The number of time steps to use for smoothing the data.
+     * `0` means no smoothing.
+     * Must be a non-negative integer.
+     *
+     * For a given time, the shown value is the mean of the neighbouring measured values.
+     * The `smoothingWindow` value provides the number of neighbouring values to take into account.
+     * The resulting time is computed via `Math.floor(smoothingWindow / 2)`.
+     */
     @property({ type: Number })
     smoothingWindow: number = 0;
 
+    /**
+     * A list of tabs with views that this component should provide.
+     */
     @property({ type: Array })
-    views: View[] = ['bar', 'line', 'bubble', 'table'];
+    views: ('bar' | 'line' | 'bubble' | 'table')[] = ['bar', 'line', 'bubble', 'table'];
 
+    /**
+     * A list of methods to calculate the confidence interval.
+     * The option `none` is always available and disables confidence intervals.
+     * Pass an empty array to disable the confidence interval selector.
+     */
     @property({ type: Array })
-    confidenceIntervalMethods: ConfidenceIntervalMethod[] = ['wilson'];
+    confidenceIntervalMethods: ('wilson' | 'none')[] = ['wilson'];
+
+    /**
+     * The headline of the component. Set to an empty string to hide the headline.
+     */
+    @property({ type: String })
+    headline: string | undefined = 'Prevalence over time';
+
+    /**
+     * The size of the component.
+     *
+     * If not set, the component will take the full width of its container with height 700px.
+     *
+     * 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.
+     */
+    @property({ type: Object })
+    size: { width?: string; height?: string } | undefined = undefined;
 
     override render() {
         return (
@@ -34,6 +120,8 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
                 smoothingWindow={this.smoothingWindow}
                 views={this.views}
                 confidenceIntervalMethods={this.confidenceIntervalMethods}
+                size={this.size}
+                headline={this.headline}
             />
         );
     }
@@ -44,3 +132,15 @@ declare global {
         'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
+
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+type NumeratorMatches = Expect<
+    Equals<typeof PrevalenceOverTimeComponent.prototype.numerator, NamedLapisFilter | NamedLapisFilter[]>
+>;
+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[]>
+>;
+/* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/display/relative-growth-advantage-component.stories.ts

@@ -3,11 +3,20 @@ import { html } from 'lit';
 
 import './relative-growth-advantage-component';
 import '../app';
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import denominator from '../../preact/relativeGrowthAdvantage/__mockData__/denominator.json';
 import numerator from '../../preact/relativeGrowthAdvantage/__mockData__/numerator.json';
 import { type RelativeGrowthAdvantageProps } from '../../preact/relativeGrowthAdvantage/relative-growth-advantage';
 
+const codeExample = String.raw`
+<gs-relative-growth-advantage
+    numerator='{ "country": "Switzerland", "pangoLineage": "B.1.1.7", "dateFrom": "2020-12-01" }'
+    denominator='{ "country": "Switzerland", "dateFrom": "2020-12-01" }'
+    generationTime="7"
+    views='["line"]'
+></gs-relative-growth-advantage>`;
+
 const meta: Meta<RelativeGrowthAdvantageProps> = {
     title: 'Visualization/Relative growth advantage',
     component: 'gs-relative-growth-advantage',
@@ -19,23 +28,34 @@ const meta: Meta<RelativeGrowthAdvantageProps> = {
             options: ['line'],
             control: { type: 'check' },
         },
+        size: [{ control: 'object' }],
+        headline: { control: 'text' },
     },
+    parameters: withComponentDocs({
+        componentDocs: {
+            tag: 'gs-relative-growth-advantage',
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    tags: ['autodocs'],
 };
 
 export default meta;
 
 const Template: StoryObj<RelativeGrowthAdvantageProps> = {
     render: (args) => html`
-        <div class="w-11/12 h-11/12">
-            <gs-app lapis="${LAPIS_URL}">
-                <gs-relative-growth-advantage
-                    .numerator=${args.numerator}
-                    .denominator=${args.denominator}
-                    .generationTime=${args.generationTime}
-                    .views=${args.views}
-                ></gs-relative-growth-advantage>
-            </gs-app>
-        </div>
+        <gs-app lapis="${LAPIS_URL}">
+            <gs-relative-growth-advantage
+                .numerator=${args.numerator}
+                .denominator=${args.denominator}
+                .generationTime=${args.generationTime}
+                .views=${args.views}
+                .size=${args.size}
+                .headline=${args.headline}
+            ></gs-relative-growth-advantage>
+        </gs-app>
     `,
 };
 
@@ -46,6 +66,8 @@ export const Default: StoryObj<RelativeGrowthAdvantageProps> = {
         denominator: { country: 'Switzerland', dateFrom: '2020-12-01', dateTo: '2021-03-01' },
         generationTime: 7,
         views: ['line'],
+        size: { width: '100%', height: '700px' },
+        headline: 'Relative growth advantage',
     },
     parameters: {
         fetchMock: {

package/src/web-components/display/relative-growth-advantage-component.tsx

@@ -2,21 +2,76 @@ import { customElement, property } from 'lit/decorators.js';
 
 import { RelativeGrowthAdvantage, type View } from '../../preact/relativeGrowthAdvantage/relative-growth-advantage';
 import type { LapisFilter } from '../../types';
+import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
+/**
+ * We assume a discrete time model, where new infections happen exactly every `generationTime` days.
+ * This is what we call a "generation".
+ *
+ * This component estimates the relative growth advantage of a variant by performing a logistic regression.
+ * Based on the inferred logistic growth rate, we derive the relative growth advantage (per generation).
+ *
+ * For details on the scientific method, see:
+ * Chen, Chaoran, et al. "Quantification of the spread of SARS-CoV-2 variant B.1.1.7 in Switzerland." Epidemics (2021);
+ * doi: [10.1016/j.epidem.2021.100480](https://doi.org/10.1016/j.epidem.2021.100480)
+ *
+ * This component fetches aggregated data from LAPIS.
+ * Then the data is sent to `https://cov-spectrum.org/api/v2/computed/model/chen2021Fitness`
+ * which performs the logistic regression and calculates the relative growth advantage.
+ *
+ * ## Views
+ *
+ * ### Line View
+ *
+ * The line view shows the relative growth advantage over time in a line chart.
+ * The dots in the plot show the proportions of the focal variant (`numerator`) to the `denominator` variant
+ * for every day as observed in the data.
+ * The line shows a logistic curve fitted to the data points, including a 95% confidence interval.
+ */
 @customElement('gs-relative-growth-advantage')
 export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
+    /**
+     * The LAPIS filter for the focal variant.
+     */
     @property({ type: Object })
-    numerator: LapisFilter = {};
+    numerator: Record<string, string | number | null | boolean> = {};
 
+    /**
+     * The LAPIS filter for the variant that the focal variant (`numerator`) should be compared to.
+     */
     @property({ type: Object })
-    denominator: LapisFilter = {};
+    denominator: Record<string, string | number | null | boolean> = {};
 
+    /**
+     * The generation time represents the number of days over which the variant's relative growth advantage is measured.
+     * For example, if we set a generation time of 7 days, then we estimate the growth advantage per week.
+     */
     @property({ type: Number })
     generationTime: number = 7;
 
+    /**
+     * A list of tabs with views that this component should provide.
+     */
     @property({ type: Array })
-    views: View[] = ['line'];
+    views: 'line'[] = ['line'];
+
+    /**
+     * The headline of the component. Set to an empty string to hide the headline.
+     */
+    @property({ type: String })
+    headline: string | undefined = 'Relative growth advantage';
+
+    /**
+     * The size of the component.
+     *
+     * If not set, the component will take the full width of its container with height 700px.
+     *
+     * 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.
+     */
+    @property({ type: Object })
+    size: { width?: string; height?: string } | undefined = undefined;
 
     override render() {
         return (
@@ -25,6 +80,8 @@ export class RelativeGrowthAdvantageComponent extends PreactLitAdapter {
                 denominator={this.denominator}
                 generationTime={this.generationTime}
                 views={this.views}
+                size={this.size}
+                headline={this.headline}
             />
         );
     }
@@ -35,3 +92,9 @@ declare global {
         'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
+
+/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
+type NumeratorMatches = Expect<Equals<typeof RelativeGrowthAdvantageComponent.prototype.numerator, LapisFilter>>;
+type DenominatorMatches = Expect<Equals<typeof RelativeGrowthAdvantageComponent.prototype.denominator, LapisFilter>>;
+type ViewsMatches = Expect<Equals<typeof RelativeGrowthAdvantageComponent.prototype.views, View[]>>;
+/* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/input/date-range-selector-component.stories.ts

@@ -3,38 +3,84 @@ import { expect, waitFor } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { LAPIS_URL } from '../../constants';
-import { type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
+import {
+    type DateRangeSelectorProps,
+    PRESET_VALUE_ALL_TIMES,
+    PRESET_VALUE_CUSTOM,
+    PRESET_VALUE_LAST_2_MONTHS,
+    PRESET_VALUE_LAST_2_WEEKS,
+    PRESET_VALUE_LAST_3_MONTHS,
+    PRESET_VALUE_LAST_6_MONTHS,
+    PRESET_VALUE_LAST_MONTH,
+} from '../../preact/dateRangeSelector/date-range-selector';
 import './date-range-selector-component';
 import '../app';
 import { toYYYYMMDD } from '../../preact/dateRangeSelector/dateConversion';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
-const meta: Meta<DateRangeSelectorProps> = {
+const codeExample = String.raw`
+<gs-date-range-selector
+    customSelectOptions='[{ "label": "Year 2021", "dateFrom": "2021-01-01", "dateTo": "2021-12-31" }]'
+    earliestDate="1970-01-01"
+    initialValue="${PRESET_VALUE_LAST_6_MONTHS}"
+></gs-date-range-selector>`;
+
+const meta: Meta<DateRangeSelectorProps<'CustomDateRange'>> = {
     title: 'Input/DateRangeSelector',
     component: 'gs-date-range-selector',
-    parameters: {
+    parameters: withComponentDocs({
         actions: {
             handles: ['gs-date-range-changed'],
         },
         fetchMock: {},
+        componentDocs: {
+            tag: 'gs-date-range-selector',
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    argTypes: {
+        initialValue: {
+            control: {
+                type: 'select',
+            },
+            options: [
+                PRESET_VALUE_CUSTOM,
+                PRESET_VALUE_ALL_TIMES,
+                PRESET_VALUE_LAST_2_WEEKS,
+                PRESET_VALUE_LAST_MONTH,
+                PRESET_VALUE_LAST_2_MONTHS,
+                PRESET_VALUE_LAST_3_MONTHS,
+                PRESET_VALUE_LAST_6_MONTHS,
+                'CustomDateRange',
+            ],
+        },
+    },
+    args: {
+        customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
+        earliestDate: '1970-01-01',
+        initialValue: PRESET_VALUE_LAST_6_MONTHS,
     },
     decorators: [withActions],
+    tags: ['autodocs'],
 };
 
 export default meta;
 
-export const DateRangeSelectorStory: StoryObj<DateRangeSelectorProps> = {
+export const DateRangeSelectorStory: StoryObj<DateRangeSelectorProps<'CustomDateRange'>> = {
     render: (args) =>
         html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
                 <gs-date-range-selector
                     .customSelectOptions=${args.customSelectOptions}
                     .earliestDate=${args.earliestDate}
+                    .initialValue=${args.initialValue}
                 ></gs-date-range-selector>
             </div>
         </gs-app>`,
-
     play: async ({ canvasElement, step }) => {
         const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector');
         const dateTo = () => canvas.getByPlaceholderText('Date to');
@@ -46,8 +92,4 @@ export const DateRangeSelectorStory: StoryObj<DateRangeSelectorProps> = {
             });
         });
     },
-    args: {
-        customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
-        earliestDate: '1970-01-01',
-    },
 };