@genspectrum/dashboard-components 0.6.19 → 0.7.1

package/src/preact/numberSequencesOverTime/number-sequences-over-time.tsx

@@ -15,7 +15,7 @@ import { CsvDownloadButton } from '../components/csv-download-button';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info, { InfoHeadline1, InfoParagraph } from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
@@ -26,12 +26,9 @@ import { useQuery } from '../useQuery';
 
 type NumberSequencesOverTimeView = 'bar' | 'line' | 'table';
 
-export interface NumberSequencesOverTimeProps extends NumberSequencesOverTimeInnerProps {
+export interface NumberSequencesOverTimeProps {
     width: string;
     height: string;
-}
-
-interface NumberSequencesOverTimeInnerProps {
     lapisFilter: NamedLapisFilter | NamedLapisFilter[];
     lapisDateField: string;
     views: NumberSequencesOverTimeView[];
@@ -40,26 +37,21 @@ interface NumberSequencesOverTimeInnerProps {
     pageSize: boolean | number;
 }
 
-export const NumberSequencesOverTime = ({ width, height, ...innerProps }: NumberSequencesOverTimeProps) => {
+export const NumberSequencesOverTime = (componentProps: NumberSequencesOverTimeProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <NumberSequencesOverTimeInner {...innerProps} />
+                <NumberSequencesOverTimeInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-const NumberSequencesOverTimeInner = ({
-    lapisFilter,
-    granularity,
-    smoothingWindow,
-    lapisDateField,
-    views,
-    pageSize,
-}: NumberSequencesOverTimeInnerProps) => {
+const NumberSequencesOverTimeInner = (componentProps: NumberSequencesOverTimeProps) => {
+    const { lapisFilter, lapisDateField, granularity, smoothingWindow } = componentProps;
     const lapis = useContext(LapisUrlContext);
 
     const { data, error, isLoading } = useQuery(
@@ -79,32 +71,15 @@ const NumberSequencesOverTimeInner = ({
         return <NoDataDisplay />;
     }
 
-    return (
-        <NumberSequencesOverTimeTabs
-            views={views}
-            data={data}
-            granularity={granularity}
-            smoothingWindow={smoothingWindow}
-            pageSize={pageSize}
-        />
-    );
+    return <NumberSequencesOverTimeTabs data={data} originalComponentProps={componentProps} />;
 };
 
 interface NumberSequencesOverTimeTabsProps {
-    views: NumberSequencesOverTimeView[];
     data: NumberOfSequencesDatasets;
-    granularity: TemporalGranularity;
-    smoothingWindow: number;
-    pageSize: boolean | number;
+    originalComponentProps: NumberSequencesOverTimeProps;
 }
 
-const NumberSequencesOverTimeTabs = ({
-    views,
-    data,
-    granularity,
-    smoothingWindow,
-    pageSize,
-}: NumberSequencesOverTimeTabsProps) => {
+const NumberSequencesOverTimeTabs = ({ data, originalComponentProps }: NumberSequencesOverTimeTabsProps) => {
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const getTab = (view: NumberSequencesOverTimeView) => {
@@ -122,7 +97,13 @@ const NumberSequencesOverTimeTabs = ({
             case 'table':
                 return {
                     title: 'Table',
-                    content: <NumberSequencesOverTimeTable data={data} granularity={granularity} pageSize={pageSize} />,
+                    content: (
+                        <NumberSequencesOverTimeTable
+                            data={data}
+                            granularity={originalComponentProps.granularity}
+                            pageSize={originalComponentProps.pageSize}
+                        />
+                    ),
                 };
             default:
                 throw new Error(`Unknown view: ${view}`);
@@ -131,15 +112,14 @@ const NumberSequencesOverTimeTabs = ({
 
     return (
         <Tabs
-            tabs={views.map((view) => getTab(view))}
+            tabs={originalComponentProps.views.map((view) => getTab(view))}
             toolbar={(activeTab) => (
                 <Toolbar
                     activeTab={activeTab}
                     data={data}
-                    granularity={granularity}
-                    smoothingWindow={smoothingWindow}
                     yAxisScaleType={yAxisScaleType}
                     setYAxisScaleType={setYAxisScaleType}
+                    originalComponentProps={originalComponentProps}
                 />
             )}
         />
@@ -149,20 +129,12 @@ const NumberSequencesOverTimeTabs = ({
 interface ToolbarProps {
     activeTab: string;
     data: NumberOfSequencesDatasets;
-    granularity: TemporalGranularity;
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
-    smoothingWindow: number;
+    originalComponentProps: NumberSequencesOverTimeProps;
 }
 
-const Toolbar = ({
-    activeTab,
-    data,
-    granularity,
-    yAxisScaleType,
-    setYAxisScaleType,
-    smoothingWindow,
-}: ToolbarProps) => {
+const Toolbar = ({ activeTab, data, yAxisScaleType, setYAxisScaleType, originalComponentProps }: ToolbarProps) => {
     return (
         <>
             {activeTab !== 'Table' && (
@@ -174,29 +146,39 @@ const Toolbar = ({
             )}
             <CsvDownloadButton
                 className='mx-1 btn btn-xs'
-                getData={() => getNumberOfSequencesOverTimeTableData(data, granularity)}
+                getData={() => getNumberOfSequencesOverTimeTableData(data, originalComponentProps.granularity)}
                 filename='number_of_sequences_over_time.csv'
             />
-            <NumberSequencesOverTimeInfo granularity={granularity} smoothingWindow={smoothingWindow} />
+            <NumberSequencesOverTimeInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>
     );
 };
 
 type NumberSequencesOverTimeInfoProps = {
-    granularity: TemporalGranularity;
-    smoothingWindow: number;
+    originalComponentProps: NumberSequencesOverTimeProps;
 };
 
 const NumberSequencesOverTimeInfo: FunctionComponent<NumberSequencesOverTimeInfoProps> = ({
-    granularity,
-    smoothingWindow,
-}) => (
-    <Info>
-        <InfoHeadline1>Number of sequences over time</InfoHeadline1>
-        <InfoParagraph>
-            This presents the number of available sequences of a variant per <b>{granularity}</b>
-            {smoothingWindow > 0 && `, smoothed using a ${smoothingWindow}-${granularity} sliding window`}.
-        </InfoParagraph>
-    </Info>
-);
+    originalComponentProps,
+}) => {
+    const lapis = useContext(LapisUrlContext);
+
+    return (
+        <Info>
+            <InfoHeadline1>Number of sequences over time</InfoHeadline1>
+            <InfoParagraph>
+                This presents the number of available sequences of a variant per{' '}
+                <b>{originalComponentProps.granularity}</b>
+                {originalComponentProps.smoothingWindow > 0 &&
+                    `, smoothed using a ${originalComponentProps.smoothingWindow}-${originalComponentProps.granularity} sliding window`}
+                .
+            </InfoParagraph>
+            <InfoComponentCode
+                componentName='number-sequences-over-time'
+                params={originalComponentProps}
+                lapisUrl={lapis}
+            />
+        </Info>
+    );
+};

package/src/preact/relativeGrowthAdvantage/relative-growth-advantage.tsx

@@ -11,7 +11,7 @@ import { LapisUrlContext } from '../LapisUrlContext';
 import { ErrorBoundary } from '../components/error-boundary';
 import { ErrorDisplay } from '../components/error-display';
 import { Fullscreen } from '../components/fullscreen';
-import Info, { InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
+import Info, { InfoComponentCode, InfoHeadline1, InfoHeadline2, InfoLink, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { NoDataDisplay } from '../components/no-data-display';
 import { ResizeContainer } from '../components/resize-container';
@@ -23,12 +23,9 @@ import { useQuery } from '../useQuery';
 
 export type View = 'line';
 
-export interface RelativeGrowthAdvantageProps extends RelativeGrowthAdvantagePropsInner {
+export interface RelativeGrowthAdvantageProps {
     width: string;
     height: string;
-}
-
-export interface RelativeGrowthAdvantagePropsInner {
     numeratorFilter: LapisFilter;
     denominatorFilter: LapisFilter;
     generationTime: number;
@@ -37,36 +34,28 @@ export interface RelativeGrowthAdvantagePropsInner {
     yAxisMaxConfig: YAxisMaxConfig;
 }
 
-export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = ({
-    width,
-    height,
-    ...innerProps
-}) => {
+export const RelativeGrowthAdvantage: FunctionComponent<RelativeGrowthAdvantageProps> = (componentProps) => {
+    const { width, height } = componentProps;
     const size = { height, width };
 
     return (
         <ErrorBoundary size={size}>
             <ResizeContainer size={size}>
-                <RelativeGrowthAdvantageInner {...innerProps} />
+                <RelativeGrowthAdvantageInner {...componentProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvantagePropsInner> = ({
-    numeratorFilter,
-    denominatorFilter,
-    generationTime,
-    views,
-    lapisDateField,
-    yAxisMaxConfig,
-}) => {
+export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvantageProps> = (componentProps) => {
     const lapis = useContext(LapisUrlContext);
+    const { numeratorFilter, denominatorFilter, generationTime, lapisDateField } = componentProps;
+
     const [yAxisScaleType, setYAxisScaleType] = useState<ScaleType>('linear');
 
     const { data, error, isLoading } = useQuery(
         () => queryRelativeGrowthAdvantage(numeratorFilter, denominatorFilter, generationTime, lapis, lapisDateField),
-        [lapis, numeratorFilter, denominatorFilter, generationTime, views, lapisDateField],
+        [lapis, numeratorFilter, denominatorFilter, generationTime, lapisDateField],
     );
 
     if (isLoading) {
@@ -86,9 +75,7 @@ export const RelativeGrowthAdvantageInner: FunctionComponent<RelativeGrowthAdvan
             data={data}
             yAxisScaleType={yAxisScaleType}
             setYAxisScaleType={setYAxisScaleType}
-            views={views}
-            generationTime={generationTime}
-            yAxisMaxConfig={yAxisMaxConfig}
+            originalComponentProps={componentProps}
         />
     );
 };
@@ -97,18 +84,14 @@ type RelativeGrowthAdvantageTabsProps = {
     data: NonNullable<RelativeGrowthAdvantageData>;
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
-    views: View[];
-    generationTime: number;
-    yAxisMaxConfig: YAxisMaxConfig;
+    originalComponentProps: RelativeGrowthAdvantageProps;
 };
 
 const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabsProps> = ({
     data,
     yAxisScaleType,
     setYAxisScaleType,
-    views,
-    generationTime,
-    yAxisMaxConfig,
+    originalComponentProps,
 }) => {
     const getTab = (view: View) => {
         switch (view) {
@@ -123,17 +106,17 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
                                 params: data.params,
                             }}
                             yAxisScaleType={yAxisScaleType}
-                            yAxisMaxConfig={yAxisMaxConfig}
+                            yAxisMaxConfig={originalComponentProps.yAxisMaxConfig}
                         />
                     ),
                 };
         }
     };
 
-    const tabs = views.map((view) => getTab(view));
+    const tabs = originalComponentProps.views.map((view) => getTab(view));
     const toolbar = () => (
         <RelativeGrowthAdvantageToolbar
-            generationTime={generationTime}
+            originalComponentProps={originalComponentProps}
             yAxisScaleType={yAxisScaleType}
             setYAxisScaleType={setYAxisScaleType}
         />
@@ -145,24 +128,29 @@ const RelativeGrowthAdvantageTabs: FunctionComponent<RelativeGrowthAdvantageTabs
 type RelativeGrowthAdvantageToolbarProps = {
     yAxisScaleType: ScaleType;
     setYAxisScaleType: (scaleType: ScaleType) => void;
-    generationTime: number;
+    originalComponentProps: RelativeGrowthAdvantageProps;
 };
 
 const RelativeGrowthAdvantageToolbar: FunctionComponent<RelativeGrowthAdvantageToolbarProps> = ({
     yAxisScaleType,
     setYAxisScaleType,
-    generationTime,
+    originalComponentProps,
 }) => {
     return (
         <>
             <ScalingSelector yAxisScaleType={yAxisScaleType} setYAxisScaleType={setYAxisScaleType} />
-            <RelativeGrowthAdvantageInfo generationTime={generationTime} />
+            <RelativeGrowthAdvantageInfo originalComponentProps={originalComponentProps} />
             <Fullscreen />
         </>
     );
 };
 
-const RelativeGrowthAdvantageInfo: FunctionComponent<{ generationTime: number }> = ({ generationTime }) => {
+const RelativeGrowthAdvantageInfo: FunctionComponent<{ originalComponentProps: RelativeGrowthAdvantageProps }> = ({
+    originalComponentProps,
+}) => {
+    const lapis = useContext(LapisUrlContext);
+    const generationTime = originalComponentProps.generationTime;
+
     return (
         <Info>
             <InfoHeadline1>Relative growth advantage</InfoHeadline1>
@@ -193,6 +181,11 @@ const RelativeGrowthAdvantageInfo: FunctionComponent<{ generationTime: number }>
                     10.1016/j.epidem.2021.100480
                 </InfoLink>
             </InfoParagraph>
+            <InfoComponentCode
+                componentName='relative-growth-advantage'
+                params={originalComponentProps}
+                lapisUrl={lapis}
+            />
         </Info>
     );
 };

package/src/query/queryMutationsOverTime.ts

@@ -6,6 +6,7 @@ import { MapOperator } from '../operator/MapOperator';
 import { RenameFieldOperator } from '../operator/RenameFieldOperator';
 import { SortOperator } from '../operator/SortOperator';
 import { UserFacingError } from '../preact/components/error-display';
+import { BaseMutationOverTimeDataMap } from '../preact/mutationsOverTime/MutationOverTimeData';
 import { sortSubstitutionsAndDeletions } from '../preact/shared/sort/sortSubstitutionsAndDeletions';
 import {
     type DeletionEntry,
@@ -15,7 +16,7 @@ import {
     type SubstitutionOrDeletionEntry,
     type TemporalGranularity,
 } from '../types';
-import { type Map2d, Map2dBase } from '../utils/map2d';
+import { type Map2d } from '../utils/map2d';
 import {
     type Deletion,
     type DeletionClass,
@@ -218,10 +219,7 @@ export function groupByMutation(
     data: MutationOverTimeData[],
     overallMutationData: (SubstitutionEntry | DeletionEntry)[],
 ) {
-    const dataArray = new Map2dBase<Substitution | Deletion, Temporal, MutationOverTimeMutationValue>(
-        serializeSubstitutionOrDeletion,
-        serializeTemporal,
-    );
+    const dataArray = new BaseMutationOverTimeDataMap();
 
     const allDates = data.map((mutationData) => mutationData.date);
 

package/src/utils/map2d.spec.ts

@@ -4,20 +4,29 @@ import { Map2dBase, Map2dView } from './map2d';
 
 describe('Map2dBase', () => {
     it('should add a value and return it', () => {
-        const map2d = new Map2dBase<string, string, number>();
+        const map2d = new Map2dBase<string, string, number>(
+            (value) => value,
+            (value) => value,
+        );
         map2d.set('a', 'b', 2);
         expect(map2d.get('a', 'b')).toBe(2);
     });
 
     it('should update a value', () => {
-        const map2d = new Map2dBase<string, string, number>();
+        const map2d = new Map2dBase<string, string, number>(
+            (value) => value,
+            (value) => value,
+        );
         map2d.set('a', 'b', 2);
         map2d.set('a', 'b', 3);
         expect(map2d.get('a', 'b')).toBe(3);
     });
 
     it('should return the data as an array', () => {
-        const map2d = new Map2dBase<string, string, number>();
+        const map2d = new Map2dBase<string, string, number>(
+            (value) => value,
+            (value) => value,
+        );
         map2d.set('a', 'b', 1);
         map2d.set('a', 'd', 2);
         map2d.set('c', 'b', 3);
@@ -30,7 +39,10 @@ describe('Map2dBase', () => {
     });
 
     it('should fill empty values with the given value', () => {
-        const map2d = new Map2dBase<string, string, number>();
+        const map2d = new Map2dBase<string, string, number>(
+            (value) => value,
+            (value) => value,
+        );
         map2d.set('a', 'b', 2);
         map2d.set('c', 'd', 4);
         expect(map2d.getAsArray(0)).toEqual([
@@ -40,7 +52,10 @@ describe('Map2dBase', () => {
     });
 
     it('should return the keys from the first axis', () => {
-        const map2d = new Map2dBase<string, string, number>();
+        const map2d = new Map2dBase<string, string, number>(
+            (value) => value,
+            (value) => value,
+        );
         map2d.set('a', 'b', 2);
         map2d.set('c', 'd', 4);
 
@@ -48,7 +63,10 @@ describe('Map2dBase', () => {
     });
 
     it('should return the keys from the second axis', () => {
-        const map2d = new Map2dBase<string, string, number>();
+        const map2d = new Map2dBase<string, string, number>(
+            (value) => value,
+            (value) => value,
+        );
         map2d.set('a', 'b', 2);
         map2d.set('c', 'd', 4);
 
@@ -56,7 +74,10 @@ describe('Map2dBase', () => {
     });
 
     it('should work with objects as keys', () => {
-        const map2d = new Map2dBase<{ a: string }, { b: string }, number>();
+        const map2d = new Map2dBase<{ a: string }, { b: string }, number>(
+            ({ a }) => a,
+            ({ b }) => b,
+        );
         map2d.set({ a: 'a' }, { b: 'b' }, 2);
         map2d.set({ a: 'second' }, { b: 'second' }, 3);
 
@@ -65,14 +86,20 @@ describe('Map2dBase', () => {
     });
 
     it('should update a value with objects as keys', () => {
-        const map2d = new Map2dBase<{ a: string }, { b: string }, number>();
+        const map2d = new Map2dBase<{ a: string }, { b: string }, number>(
+            ({ a }) => a,
+            ({ b }) => b,
+        );
         map2d.set({ a: 'a' }, { b: 'b' }, 2);
         map2d.set({ a: 'a' }, { b: 'b' }, 3);
         expect(map2d.get({ a: 'a' }, { b: 'b' })).toBe(3);
     });
 
     it('should return a row by key', () => {
-        const map2d = new Map2dBase<string, string, number>();
+        const map2d = new Map2dBase<string, string, number>(
+            (value) => value,
+            (value) => value,
+        );
         map2d.set('a', 'b', 2);
         map2d.set('c', 'd', 4);
 
@@ -81,14 +108,20 @@ describe('Map2dBase', () => {
     });
 
     it('should return an empty array when the row does not exist', () => {
-        const map2d = new Map2dBase<string, string, number>();
+        const map2d = new Map2dBase<string, string, number>(
+            (value) => value,
+            (value) => value,
+        );
         map2d.set('a', 'b', 2);
 
         expect(map2d.getRow('c', 0)).toEqual([]);
     });
 
     it('should return content as object', () => {
-        const map2d = new Map2dBase<string, string, number>();
+        const map2d = new Map2dBase<string, string, number>(
+            (value) => value,
+            (value) => value,
+        );
         map2d.set('a', 'b', 2);
         map2d.set('c', 'd', 4);
 
@@ -99,7 +132,10 @@ describe('Map2dBase', () => {
     });
 
     it('should use initial data', () => {
-        const map2d = new Map2dBase<string, string, number>();
+        const map2d = new Map2dBase<string, string, number>(
+            (value) => value,
+            (value) => value,
+        );
         map2d.set('a', 'b', 2);
         map2d.set('c', 'd', 4);
 
@@ -174,7 +210,10 @@ describe('Map2dView', () => {
     });
 
     function createBaseContainer() {
-        const container = new Map2dBase<string, string, number>();
+        const container = new Map2dBase<string, string, number>(
+            (value) => value,
+            (value) => value,
+        );
         container.set('a', 'b', 1);
         container.set('c', 'b', 3);
         container.set('c', 'd', 4);

package/src/utils/map2d.ts

@@ -1,5 +1,3 @@
-import hash from 'object-hash';
-
 export interface Map2d<Key1, Key2, Value> {
     get(keyFirstAxis: Key1, keySecondAxis: Key2): Value | undefined;
 
@@ -16,6 +14,7 @@ export interface Map2d<Key1, Key2, Value> {
     getAsArray(fillEmptyWith: Value): Value[][];
 
     serializeFirstAxis(key: Key1): string;
+
     serializeSecondAxis(key: Key2): string;
 
     readonly keysFirstAxis: Map<string, Key1>;
@@ -36,8 +35,8 @@ export class Map2dBase<Key1 extends object | string, Key2 extends object | strin
     readonly keysSecondAxis = new Map<string, Key2>();
 
     constructor(
-        readonly serializeFirstAxis: (key: Key1) => string = (key) => (typeof key === 'string' ? key : hash(key)),
-        readonly serializeSecondAxis: (key: Key2) => string = (key) => (typeof key === 'string' ? key : hash(key)),
+        readonly serializeFirstAxis: (key: Key1) => string,
+        readonly serializeSecondAxis: (key: Key2) => string,
         initialContent?: Map2DContents<Key1, Key2, Value>,
     ) {
         if (initialContent) {

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

@@ -9,29 +9,21 @@ import { type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date
 import './gs-date-range-selector';
 import '../app';
 import { toYYYYMMDD } from '../../preact/dateRangeSelector/dateConversion';
-import {
-    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/selectableOptions';
+import { dateRangeOptionPresets } from '../../preact/dateRangeSelector/dateRangeOption';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
 <gs-date-range-selector
-    customSelectOptions='[{ "label": "Year 2021", "dateFrom": "2021-01-01", "dateTo": "2021-12-31" }]'
+    dateRangeOptions='[{ "label": "Year 2021", "dateFrom": "2021-01-01", "dateTo": "2021-12-31" }]'
     earliestDate="1970-01-01"
-    initialValue="${PRESET_VALUE_LAST_6_MONTHS}"
+    initialValue="Year 2021"
     initialDateFrom="2020-01-01"
     initialDateTo="2021-01-01"
     width="100%"
     dateColumn="myDateColumn"
 ></gs-date-range-selector>`;
 
-const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
+const meta: Meta<Required<DateRangeSelectorProps>> = {
     title: 'Input/DateRangeSelector',
     component: 'gs-date-range-selector',
     parameters: withComponentDocs({
@@ -50,19 +42,10 @@ const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
             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',
-            ],
+            options: [dateRangeOptionPresets.lastMonth.label, dateRangeOptionPresets.allTimes.label, 'CustomDateRange'],
         },
         dateColumn: { control: { type: 'text' } },
-        customSelectOptions: {
+        dateRangeOptions: {
             control: {
                 type: 'object',
             },
@@ -79,9 +62,14 @@ const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
         },
     },
     args: {
-        customSelectOptions: [{ label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' }],
+        dateRangeOptions: [
+            dateRangeOptionPresets.lastMonth,
+            dateRangeOptionPresets.last3Months,
+            dateRangeOptionPresets.allTimes,
+            { label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' },
+        ],
         earliestDate: '1970-01-01',
-        initialValue: PRESET_VALUE_LAST_6_MONTHS,
+        initialValue: dateRangeOptionPresets.lastMonth.label,
         dateColumn: 'aDateColumn',
         width: '100%',
         initialDateFrom: '',
@@ -92,12 +80,12 @@ const meta: Meta<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
 
 export default meta;
 
-export const DateRangeSelectorStory: StoryObj<Required<DateRangeSelectorProps<'CustomDateRange'>>> = {
+export const DateRangeSelectorStory: StoryObj<Required<DateRangeSelectorProps>> = {
     render: (args) =>
         html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
                 <gs-date-range-selector
-                    .customSelectOptions=${args.customSelectOptions}
+                    .dateRangeOptions=${args.dateRangeOptions}
                     .earliestDate=${args.earliestDate}
                     .initialValue=${args.initialValue}
                     .initialDateFrom=${args.initialDateFrom}
@@ -112,7 +100,7 @@ export const DateRangeSelectorStory: StoryObj<Required<DateRangeSelectorProps<'C
         const dateTo = () => canvas.getByPlaceholderText('Date to');
 
         await step('Expect last 6 months to be selected', async () => {
-            await expect(canvas.getByRole('combobox')).toHaveValue('last6Months');
+            await expect(canvas.getByRole('combobox')).toHaveValue('Last month');
             await waitFor(() => {
                 expect(dateTo()).toHaveValue(toYYYYMMDD(new Date()));
             });