@genspectrum/dashboard-components 0.9.1 → 0.10.1

package/dist/style.css

@@ -1561,6 +1561,38 @@ html {
 .select[multiple] {
   height: auto;
 }
+.stat {
+  display: inline-grid;
+  width: 100%;
+  grid-template-columns: repeat(1, 1fr);
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
+  --tw-border-opacity: 0.1;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.stat-title {
+  grid-column-start: 1;
+  white-space: nowrap;
+  color: var(--fallback-bc,oklch(var(--bc)/0.6));
+}
+.stat-value {
+  grid-column-start: 1;
+  white-space: nowrap;
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  font-weight: 800;
+}
+.stat-desc {
+  grid-column-start: 1;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: var(--fallback-bc,oklch(var(--bc)/0.6));
+}
 .steps {
   display: inline-grid;
   grid-auto-flow: column;
@@ -3427,6 +3459,15 @@ input.tab:checked + .tab-content,
   .sm\:max-w-5xl {
     max-width: 64rem;
   }
+
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
+  .sm\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
 }.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
       /*rtl:begin:ignore*/left:0/*
       /*rtl:end:ignore*/}/*

package/dist/util.d.ts

@@ -196,6 +196,22 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-statistics': StatisticsComponent;
+    }
+}
+
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'gs-date-range-selector': DateRangeSelectorComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.9.1",
+    "version": "0.10.1",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -132,7 +132,7 @@
         "storybook": "^8.0.9",
         "storybook-addon-fetch-mock": "^2.0.0",
         "tailwindcss": "^3.4.3",
-        "typescript": "~5.6.2",
+        "typescript": "~5.7.2",
         "vite": "^5.2.10",
         "vite-plugin-dts": "^4.0.3",
         "vitest": "^2.0.1"

package/src/preact/components/confidence-interval-selector.tsx

@@ -20,7 +20,7 @@ export const ConfidenceIntervalSelector: FunctionComponent<ConfidenceIntervalSel
 
     const items = [
         { label: 'Confidence interval method', value: 'none', disabled: true },
-        ...confidenceIntervalMethods.concat('none').map((method) => {
+        ...confidenceIntervalMethods.map((method) => {
             switch (method) {
                 case 'wilson':
                     return { label: 'Wilson, 95% CI', value: 'wilson' };

package/src/preact/components/min-max-range-slider.tsx

@@ -75,8 +75,8 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
                 type='range'
                 value={min}
                 onInput={onMinChange}
-                min={rangeMin}
-                max={rangeMax}
+                min={`${rangeMin}`}
+                max={`${rangeMax}`}
                 step={step}
                 style={{ background, zIndex: 1, height: 0 }}
             />
@@ -84,8 +84,8 @@ export const MinMaxRangeSlider: FunctionComponent<MinMaxPercentSliderProps> = ({
                 id='toSlider'
                 type='range'
                 value={max}
-                min={rangeMin}
-                max={rangeMax}
+                min={`${rangeMin}`}
+                max={`${rangeMax}`}
                 step={step}
                 onInput={onMaxChange}
                 style={{ background, zIndex: zIndexTo }}

package/src/preact/components/percent-intput.tsx

@@ -44,8 +44,8 @@ export const PercentInput: FunctionComponent<PercentInputProps> = ({
             <input
                 type='number'
                 step={0.1}
-                min={0}
-                max={100}
+                min='0'
+                max='100'
                 value={internalPercentage}
                 onInput={handleInputChange}
                 lang='en'

package/src/preact/mutationFilter/mutation-filter.tsx

@@ -303,7 +303,6 @@ const SelectedFilter = ({ handleRemoveValue, mutationFilter }: SelectedFilterPro
     return (
         <span
             key={mutationFilter.value.toString()}
-            name={mutationFilter.value.toString()}
             className='center p-2 m-1 inline-flex text-black rounded-md'
             style={{
                 backgroundColor: backgroundColorMap(mutationFilter),

package/src/preact/mutationFilter/parseMutation.spec.ts

@@ -35,6 +35,16 @@ describe('parseMutation', () => {
                 input: 'ins_gene1:10:ACGT',
                 expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 10, 'ACGT') },
             },
+            {
+                name: 'should parse amino acid insertions in all upper case',
+                input: 'INS_GENE1:10:ACGT',
+                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('GENE1', 10, 'ACGT') },
+            },
+            {
+                name: 'should parse amino acid insertions in all lower case',
+                input: 'ins_gene1:10:acgt',
+                expected: { type: 'aminoAcidInsertions', value: new InsertionClass('gene1', 10, 'acgt') },
+            },
             {
                 name: 'should parse amino acid insertion with LAPIS-style wildcard',
                 input: 'ins_gene1:10:?AC?GT',
@@ -78,6 +88,16 @@ describe('parseMutation', () => {
                 input: 'gene1:A123-',
                 expected: { type: 'aminoAcidMutations', value: new DeletionClass('gene1', 'A', 123) },
             },
+            {
+                name: 'should parse amino acid deletion in all upper case',
+                input: 'GENE1:A123-',
+                expected: { type: 'aminoAcidMutations', value: new DeletionClass('GENE1', 'A', 123) },
+            },
+            {
+                name: 'should parse amino acid deletion in all lower case',
+                input: 'gene1:a123-',
+                expected: { type: 'aminoAcidMutations', value: new DeletionClass('gene1', 'a', 123) },
+            },
             {
                 name: 'should parse amino acid deletion without valueAtReference',
                 input: 'gene1:123-',
@@ -123,6 +143,16 @@ describe('parseMutation', () => {
                 input: 'gene1:A123T',
                 expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('gene1', 'A', 'T', 123) },
             },
+            {
+                name: 'should parse amino acid substitution in all upper case',
+                input: 'GENE1:A123T',
+                expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('GENE1', 'A', 'T', 123) },
+            },
+            {
+                name: 'should parse amino acid substitution in all lower case',
+                input: 'gene1:a123t',
+                expected: { type: 'aminoAcidMutations', value: new SubstitutionClass('gene1', 'a', 't', 123) },
+            },
             {
                 name: 'should return null for substitution with segment not in reference genome',
                 input: 'notInReferenceGenome:A123T',

package/src/preact/mutationFilter/sequenceTypeFromSegment.ts

@@ -9,11 +9,12 @@ export const sequenceTypeFromSegment = (
         return isSingleSegmented(referenceGenome) ? 'nucleotide' : undefined;
     }
 
-    if (referenceGenome.nucleotideSequences.some((sequence) => sequence.name === possibleSegment)) {
+    const segment = possibleSegment.toLowerCase();
+    if (referenceGenome.nucleotideSequences.some((sequence) => sequence.name.toLowerCase() === segment)) {
         return 'nucleotide';
     }
 
-    if (referenceGenome.genes.some((gene) => gene.name === possibleSegment)) {
+    if (referenceGenome.genes.some((gene) => gene.name.toLowerCase() === segment)) {
         return 'amino acid';
     }
     return undefined;

package/src/preact/prevalenceOverTime/prevalence-over-time.stories.tsx

@@ -30,7 +30,7 @@ export default {
             control: { type: 'check' },
         },
         confidenceIntervalMethods: {
-            options: ['wilson'],
+            options: ['none', 'wilson'],
             control: { type: 'check' },
         },
         width: { control: 'text' },
@@ -73,7 +73,7 @@ export const TwoVariants: StoryObj<PrevalenceOverTimeProps> = {
         granularity: 'month',
         smoothingWindow: 0,
         views: ['bar', 'line', 'bubble', 'table'],
-        confidenceIntervalMethods: ['wilson'],
+        confidenceIntervalMethods: ['none', 'wilson'],
         width: '100%',
         height: '700px',
         lapisDateField: 'date',
@@ -147,7 +147,7 @@ export const OneVariant: StoryObj<PrevalenceOverTimeProps> = {
         granularity: 'day',
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
-        confidenceIntervalMethods: ['wilson'],
+        confidenceIntervalMethods: ['none', 'wilson'],
         width: '100%',
         height: '700px',
         lapisDateField: 'date',
@@ -205,7 +205,7 @@ export const ShowsNoDataBanner: StoryObj<PrevalenceOverTimeProps> = {
         granularity: 'day',
         smoothingWindow: 7,
         views: ['bar', 'line', 'bubble', 'table'],
-        confidenceIntervalMethods: ['wilson'],
+        confidenceIntervalMethods: ['none', 'wilson'],
         width: '100%',
         height: '700px',
         lapisDateField: 'date',

package/src/preact/prevalenceOverTime/prevalence-over-time.tsx

@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'preact';
-import { useContext, useState } from 'preact/hooks';
+import { useContext, useEffect, useState } from 'preact/hooks';
 
 import { getPrevalenceOverTimeTableData } from './getPrevalenceOverTimeTableData';
 import PrevalenceOverTimeBarChart from './prevalence-over-time-bar-chart';
@@ -97,6 +97,16 @@ const PrevalenceOverTimeTabs: FunctionComponent<PrevalenceOverTimeTabsProps> = (
     const [confidenceIntervalMethod, setConfidenceIntervalMethod] = useState<ConfidenceIntervalMethod>(
         confidenceIntervalMethods.length > 0 ? confidenceIntervalMethods[0] : 'none',
     );
+
+    useEffect(() => {
+        setConfidenceIntervalMethod((confidenceIntervalMethod) => {
+            if (!confidenceIntervalMethods.includes(confidenceIntervalMethod)) {
+                return confidenceIntervalMethods.length > 0 ? confidenceIntervalMethods[0] : 'none';
+            }
+            return confidenceIntervalMethod;
+        });
+    }, [confidenceIntervalMethods]);
+
     const yAxisMaxConfig = { linear: yAxisMaxLinear, logarithmic: yAxisMaxLogarithmic };
 
     const getTab = (view: View) => {

package/src/preact/statistic/__mockData__/denominator.json

@@ -0,0 +1,13 @@
+{
+    "data": [
+        {
+            "count": 2468
+        }
+    ],
+    "info": {
+        "dataVersion": "1712315293",
+        "requestId": "4603a85e-ae5e-495d-aee5-778a3af862c1",
+        "requestInfo": "sars_cov-2_nextstrain_open on s1.int.genspectrum.org at 2024-04-24T15:31:40.596677441",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report."
+    }
+}

package/src/preact/statistic/__mockData__/numerator.json

@@ -0,0 +1,13 @@
+{
+    "data": [
+        {
+            "count": 1234
+        }
+    ],
+    "info": {
+        "dataVersion": "1712315293",
+        "requestId": "4603a85e-ae5e-495d-aee5-778a3af862c1",
+        "requestInfo": "sars_cov-2_nextstrain_open on s1.int.genspectrum.org at 2024-04-24T15:31:40.596677441",
+        "reportTo": "Please report to https://github.com/GenSpectrum/LAPIS/issues in case you encounter any unexpected issues. Please include the request ID and the requestInfo in your report."
+    }
+}

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

@@ -0,0 +1,81 @@
+import { type Meta, type StoryObj } from '@storybook/preact';
+import { expect, waitFor, within } from '@storybook/test';
+
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import { LapisUrlContext } from '../LapisUrlContext';
+import denominatorData from './__mockData__/denominator.json';
+import numeratorData from './__mockData__/numerator.json';
+import { Statistics, type StatisticsProps } from './statistics';
+
+const meta: Meta<StatisticsProps> = {
+    title: 'Visualization/Statistics',
+    component: Statistics,
+    argTypes: {
+        width: { control: 'text' },
+        height: { control: 'text' },
+    },
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'denominatorData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: [],
+                            country: 'USA',
+                            division: 'Alabama',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: denominatorData,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'numeratorData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: [],
+                            country: 'USA',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: numeratorData,
+                    },
+                },
+            ],
+        },
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<StatisticsProps> = {
+    render: (args) => (
+        <LapisUrlContext.Provider value={LAPIS_URL}>
+            <Statistics {...args} />
+        </LapisUrlContext.Provider>
+    ),
+    args: {
+        numeratorFilter: {
+            country: 'USA',
+        },
+        denominatorFilter: {
+            country: 'USA',
+            division: 'Alabama',
+        },
+        width: '100%',
+        height: '100%',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(async () => {
+            await expect(canvas.getByText('1,234')).toBeInTheDocument();
+            await expect(canvas.getByText('50.00%')).toBeInTheDocument();
+        });
+    },
+};

package/src/preact/statistic/statistics.tsx

@@ -0,0 +1,78 @@
+import { type FunctionComponent } from 'preact';
+import { useContext } from 'preact/hooks';
+
+import { queryGeneralStatistics } from '../../query/queryGeneralStatistics';
+import { type LapisFilter } from '../../types';
+import { LapisUrlContext } from '../LapisUrlContext';
+import { ErrorBoundary } from '../components/error-boundary';
+import { LoadingDisplay } from '../components/loading-display';
+import { NoDataDisplay } from '../components/no-data-display';
+import { ResizeContainer } from '../components/resize-container';
+import { formatProportion } from '../shared/table/formatProportion';
+import { useQuery } from '../useQuery';
+
+export type StatisticsProps = {
+    width: string;
+    height: string;
+    numeratorFilter: LapisFilter;
+    denominatorFilter: LapisFilter;
+};
+
+export const Statistics: FunctionComponent<StatisticsProps> = (componentProps) => {
+    const { width, height } = componentProps;
+    const size = { height, width };
+
+    return (
+        <ErrorBoundary size={size}>
+            <ResizeContainer size={size}>
+                <StatisticsInner {...componentProps} />
+            </ResizeContainer>
+        </ErrorBoundary>
+    );
+};
+
+export const StatisticsInner: FunctionComponent<StatisticsProps> = (componentProps) => {
+    const { numeratorFilter, denominatorFilter } = componentProps;
+    const lapis = useContext(LapisUrlContext);
+
+    const { data, error, isLoading } = useQuery(async () => {
+        return queryGeneralStatistics(numeratorFilter, denominatorFilter, lapis);
+    }, [numeratorFilter, denominatorFilter, lapis]);
+
+    if (isLoading) {
+        return <LoadingDisplay />;
+    }
+
+    if (error !== null) {
+        throw error;
+    }
+
+    if (data === null) {
+        return <NoDataDisplay />;
+    }
+
+    return <MetricDataTabs data={data} />;
+};
+
+type MetricDataTabsProps = {
+    data: { count: number; proportion: number };
+};
+
+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='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>
+
+            <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>
+        </div>
+    );
+};

package/src/query/queryGeneralStatistics.ts

@@ -0,0 +1,18 @@
+import { type LapisFilter } from '../types';
+import { queryAggregateData } from './queryAggregateData';
+
+export async function queryGeneralStatistics(
+    numeratorFilter: LapisFilter,
+    denominatorFilter: LapisFilter,
+    lapis: string,
+    signal?: AbortSignal,
+) {
+    const numeratorCount = await queryAggregateData(numeratorFilter, [], lapis, undefined, signal);
+    const denominatorCount = await queryAggregateData(denominatorFilter, [], lapis, undefined, signal);
+
+    if (numeratorCount.length === 0 || denominatorCount.length === 0) {
+        throw new Error('No data found for the given filters');
+    }
+
+    return { proportion: numeratorCount[0].count / denominatorCount[0].count, count: numeratorCount[0].count };
+}

package/src/utils/mutations.ts

@@ -14,7 +14,7 @@ export interface MutationClass extends Mutation {
 }
 
 export const substitutionRegex =
-    /^((?<segment>[A-Za-z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Za-z])?(?<position>\d+)(?<substitutionValue>[A-Za-z.])?$/;
+    /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z])?(?<position>\d+)(?<substitutionValue>[A-Z.])?$/i;
 
 export interface Substitution extends Mutation {
     type: 'substitution';
@@ -68,7 +68,7 @@ export class SubstitutionClass implements MutationClass, Substitution {
     }
 }
 
-export const deletionRegex = /^((?<segment>[A-Za-z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Za-z])?(?<position>\d+)(-)$/;
+export const deletionRegex = /^((?<segment>[A-Z0-9_-]+)(?=:):)?(?<valueAtReference>[A-Z])?(?<position>\d+)(-)$/i;
 
 export interface Deletion extends Mutation {
     type: 'deletion';
@@ -119,7 +119,7 @@ export class DeletionClass implements MutationClass, Deletion {
 }
 
 export const insertionRegexp =
-    /^ins_((?<segment>[A-Za-z0-9_-]+)(?=:):)?(?<position>\d+):(?<insertedSymbols>(([A-Za-z?]|(\.\*))+))$/i;
+    /^ins_((?<segment>[A-Z0-9_-]+)(?=:):)?(?<position>\d+):(?<insertedSymbols>(([A-Z?]|(\.\*))+))$/i;
 
 export interface Insertion extends Mutation {
     type: 'insertion';

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

@@ -46,7 +46,7 @@ const meta: Meta<Required<PrevalenceOverTimeProps>> = {
             control: { type: 'check' },
         },
         confidenceIntervalMethods: {
-            options: ['wilson'],
+            options: ['none', 'wilson'],
             control: { type: 'check' },
         },
         width: { control: 'text' },

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

@@ -103,11 +103,11 @@ export class PrevalenceOverTimeComponent extends PreactLitAdapterWithGridJsStyle
 
     /**
      * 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.
+     * The first entry will be selected by default.
      */
     @property({ type: Array })
-    confidenceIntervalMethods: ('wilson' | 'none')[] = ['wilson'];
+    confidenceIntervalMethods: ('wilson' | 'none')[] = ['none', 'wilson'];
 
     /**
      * The width of the component.

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

@@ -0,0 +1,95 @@
+import { type Meta, type StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
+import denominatorData from '../../preact/statistic/__mockData__/denominator.json';
+import numeratorData from '../../preact/statistic/__mockData__/numerator.json';
+import { type StatisticsProps } from '../../preact/statistic/statistics';
+
+import './gs-statistics';
+import '../app';
+
+const codeExample = `
+<gs-statistics
+    numeratorFilter='{"country": "USA", "division": "Alabama}'
+    denominatorFilter='{"country": "USA"}' 
+    width='100%'
+    height='700px'
+></gs-statistics>`;
+
+const meta: Meta<Required<StatisticsProps>> = {
+    title: 'Visualization/Statistics',
+    component: 'gs-statistics',
+    argTypes: {
+        width: { control: 'text' },
+        height: { control: 'text' },
+    },
+    parameters: withComponentDocs({
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'denominatorData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: [],
+                            country: 'USA',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: denominatorData,
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'numeratorData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: [],
+                            country: 'USA',
+                            division: 'Alabama',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: numeratorData,
+                    },
+                },
+            ],
+        },
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Default: StoryObj<Required<StatisticsProps>> = {
+    render: (args) => html`
+        <gs-app lapis="${LAPIS_URL}">
+            <gs-statistics
+                .numeratorFilter=${args.numeratorFilter}
+                .denominatorFilter=${args.denominatorFilter}
+                .width=${args.width}
+                .height=${args.height}
+            ></gs-statistics>
+        </gs-app>
+    `,
+    args: {
+        denominatorFilter: {
+            country: 'USA',
+        },
+        numeratorFilter: {
+            country: 'USA',
+            division: 'Alabama',
+        },
+        width: '100%',
+        height: '700px',
+    },
+};