@genspectrum/dashboard-components 0.19.9 → 0.21.0

package/src/preact/dateRangeFilter/date-range-filter.tsx

@@ -14,11 +14,10 @@ import { gsEventNames } from '../../utils/gsEventNames';
 import { ClearableSelect } from '../components/clearable-select';
 import { ErrorBoundary } from '../components/error-boundary';
 
-const customOption = 'Custom';
+const CUSTOM_OPTION = 'Custom';
 
 const dateRangeFilterInnerPropsSchema = z.object({
     dateRangeOptions: z.array(dateRangeOptionSchema),
-    earliestDate: z.string().date(),
     value: dateRangeValueSchema,
     lapisDateField: z.string().min(1),
     placeholder: z.string().optional(),
@@ -52,15 +51,11 @@ export const DateRangeFilter = (props: DateRangeFilterProps) => {
 
 export const DateRangeFilterInner = ({
     dateRangeOptions,
-    earliestDate = '1900-01-01',
     value,
     lapisDateField,
     placeholder,
 }: DateRangeFilterInnerProps) => {
-    const initialValues = useMemo(
-        () => computeInitialValues(value, earliestDate, dateRangeOptions),
-        [value, earliestDate, dateRangeOptions],
-    );
+    const initialValues = useMemo(() => computeInitialValues(value, dateRangeOptions), [value, dateRangeOptions]);
 
     const divRef = useRef<HTMLDivElement>(null);
 
@@ -75,15 +70,15 @@ export const DateRangeFilterInner = ({
                   dateTo: initialValues.initialSelectedDateTo,
               }
             : {
-                  label: customOption,
+                  label: CUSTOM_OPTION,
                   dateFrom: initialValues.initialSelectedDateFrom,
                   dateTo: initialValues.initialSelectedDateTo,
               };
     }, [initialValues]);
 
-    const customComboboxValue = { label: customOption };
+    const customComboboxValue = { label: CUSTOM_OPTION };
     const [options, setOptions] = useState(
-        getInitialState()?.label === customOption ? [...dateRangeOptions, customComboboxValue] : [...dateRangeOptions],
+        getInitialState()?.label === CUSTOM_OPTION ? [...dateRangeOptions, customComboboxValue] : [...dateRangeOptions],
     );
     const [state, setState] = useState<DateRangeFilterState>(getInitialState());
 
@@ -101,42 +96,24 @@ export const DateRangeFilterInner = ({
         updateState(
             option !== null
                 ? {
-                      label: option?.label,
-                      dateFrom: getFromDate(option, earliestDate),
-                      dateTo: getToDate(option),
+                      label: option.label,
+                      dateFrom: toMaybeDate(option.dateFrom),
+                      dateTo: toMaybeDate(option.dateTo),
                   }
                 : null,
         );
-        if (option?.label !== customOption) {
+        if (option?.label !== CUSTOM_OPTION) {
             setOptions([...dateRangeOptions]);
         }
     };
 
-    function getFromDate(option: DateRangeOption | null, earliestDate: string) {
-        if (!option || option.label === customOption) {
-            return undefined;
-        }
-        return new Date(option?.dateFrom ?? earliestDate);
-    }
-
-    function getToDate(option: DateRangeOption | null) {
-        if (!option || option.label === customOption) {
-            return undefined;
-        }
-        if (!option.dateTo) {
-            return new Date();
-        }
-
-        return new Date(option.dateTo);
-    }
-
     const onChangeDateFrom = (date: Date | undefined) => {
         if (date?.toDateString() === state?.dateFrom?.toDateString()) {
             return;
         }
 
         updateState({
-            label: customOption,
+            label: CUSTOM_OPTION,
             dateFrom: date,
             dateTo: state?.dateTo,
         });
@@ -149,7 +126,7 @@ export const DateRangeFilterInner = ({
         }
 
         updateState({
-            label: customOption,
+            label: CUSTOM_OPTION,
             dateFrom: state?.dateFrom,
             dateTo: date,
         });
@@ -184,7 +161,7 @@ export const DateRangeFilterInner = ({
             if (state === null) {
                 return null;
             }
-            if (state.label === customOption) {
+            if (state.label === CUSTOM_OPTION) {
                 return {
                     dateFrom: state.dateFrom !== undefined ? toYYYYMMDD(state.dateFrom) : undefined,
                     dateTo: state.dateTo !== undefined ? toYYYYMMDD(state.dateTo) : undefined,
@@ -233,3 +210,7 @@ export const DateRangeFilterInner = ({
         </div>
     );
 };
+
+function toMaybeDate(dateString: string | undefined) {
+    return dateString ? new Date(dateString) : undefined;
+}

package/src/preact/dateRangeFilter/dateRangeOption.ts

@@ -11,12 +11,10 @@ export const dateRangeOptionSchema = z.object({
     label: z.string(),
     /**
      * The start date of the date range in the format `YYYY-MM-DD`.
-     * If not set, the date range selector will default to the `earliestDate` property.
      */
     dateFrom: z.string().date().optional(),
     /**
      * The end date of the date range in the format `YYYY-MM-DD`.
-     * If not set, the date range selector will default to the current date.
      */
     dateTo: z.string().date().optional(),
 });
@@ -45,55 +43,77 @@ export class DateRangeOptionChangedEvent extends CustomEvent<DateRangeValue> {
     }
 }
 
-const today = new Date();
+type DateRangeOptionPresets = {
+    last2Weeks: DateRangeOption;
+    lastMonth: DateRangeOption;
+    last2Months: DateRangeOption;
+    last3Months: DateRangeOption;
+    last6Months: DateRangeOption;
+    lastYear: DateRangeOption;
+};
 
-const twoWeeksAgo = new Date();
-twoWeeksAgo.setDate(today.getDate() - 14);
+let dateRangeOptionsPresetsCacheDate: string | null = null;
+let dateRangeOptionPresetsCache: DateRangeOptionPresets | null = null;
 
-const lastMonth = new Date(today);
-lastMonth.setMonth(today.getMonth() - 1);
+/**
+ * Presets for the `gs-date-range-filter` component that can be used as `dateRangeOptions`.
+ */
+export const dateRangeOptionPresets = (): DateRangeOptionPresets => {
+    const today = new Date();
+    const todayString = new Date().toISOString().slice(0, 10);
 
-const last2Months = new Date(today);
-last2Months.setMonth(today.getMonth() - 2);
+    if (
+        dateRangeOptionPresetsCache === null ||
+        dateRangeOptionsPresetsCacheDate === null ||
+        dateRangeOptionsPresetsCacheDate !== todayString
+    ) {
+        dateRangeOptionsPresetsCacheDate = todayString;
 
-const last3Months = new Date(today);
-last3Months.setMonth(today.getMonth() - 3);
+        const twoWeeksAgo = new Date();
+        twoWeeksAgo.setDate(today.getDate() - 14);
 
-const last6Months = new Date(today);
-last6Months.setMonth(today.getMonth() - 6);
+        const lastMonth = new Date(today);
+        lastMonth.setMonth(today.getMonth() - 1);
 
-const lastYear = new Date(today);
-lastYear.setFullYear(today.getFullYear() - 1);
+        const last2Months = new Date(today);
+        last2Months.setMonth(today.getMonth() - 2);
 
-/**
- * Presets for the `gs-date-range-filter` component that can be used as `dateRangeOptions`.
- */
-export const dateRangeOptionPresets = {
-    last2Weeks: {
-        label: 'Last 2 weeks',
-        dateFrom: toYYYYMMDD(twoWeeksAgo),
-    },
-    lastMonth: {
-        label: 'Last month',
-        dateFrom: toYYYYMMDD(lastMonth),
-    },
-    last2Months: {
-        label: 'Last 2 months',
-        dateFrom: toYYYYMMDD(last2Months),
-    },
-    last3Months: {
-        label: 'Last 3 months',
-        dateFrom: toYYYYMMDD(last3Months),
-    },
-    last6Months: {
-        label: 'Last 6 months',
-        dateFrom: toYYYYMMDD(last6Months),
-    },
-    lastYear: {
-        label: 'Last year',
-        dateFrom: toYYYYMMDD(lastYear),
-    },
-    allTimes: {
-        label: 'All times',
-    },
-} satisfies Record<string, DateRangeOption>;
+        const last3Months = new Date(today);
+        last3Months.setMonth(today.getMonth() - 3);
+
+        const last6Months = new Date(today);
+        last6Months.setMonth(today.getMonth() - 6);
+
+        const lastYear = new Date(today);
+        lastYear.setFullYear(today.getFullYear() - 1);
+
+        dateRangeOptionPresetsCache = {
+            last2Weeks: {
+                label: 'Last 2 weeks',
+                dateFrom: toYYYYMMDD(twoWeeksAgo),
+            },
+            lastMonth: {
+                label: 'Last month',
+                dateFrom: toYYYYMMDD(lastMonth),
+            },
+            last2Months: {
+                label: 'Last 2 months',
+                dateFrom: toYYYYMMDD(last2Months),
+            },
+            last3Months: {
+                label: 'Last 3 months',
+                dateFrom: toYYYYMMDD(last3Months),
+            },
+            last6Months: {
+                label: 'Last 6 months',
+                dateFrom: toYYYYMMDD(last6Months),
+            },
+            lastYear: {
+                label: 'Last year',
+                dateFrom: toYYYYMMDD(lastYear),
+            },
+        };
+    }
+
+    return dateRangeOptionPresetsCache;
+};

package/src/preact/dateRangeFilter/selectableOptions.ts

@@ -5,26 +5,3 @@ export const getSelectableOptions = (dateRangeOptions: DateRangeOption[]) => {
         return { label: customSelectOption.label, value: customSelectOption.label };
     });
 };
-
-export const getDatesForSelectorValue = (
-    initialSelectedDateRange: string | undefined,
-    dateRangeOptions: DateRangeOption[],
-    earliestDate: string,
-) => {
-    const today = new Date();
-    const defaultDates = { dateFrom: new Date(earliestDate), dateTo: today };
-
-    if (initialSelectedDateRange === undefined) {
-        return defaultDates;
-    }
-
-    const dateRangeOption = dateRangeOptions.find((option) => option.label === initialSelectedDateRange);
-    if (dateRangeOption) {
-        return {
-            dateFrom: new Date(dateRangeOption.dateFrom ?? earliestDate),
-            dateTo: new Date(dateRangeOption.dateTo ?? today),
-        };
-    }
-
-    return defaultDates;
-};

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

@@ -80,6 +80,73 @@ export const Default: StoryObj<StatisticsProps> = {
     },
 };
 
+export const ValuesAre0: StoryObj<StatisticsProps> = {
+    ...Default,
+    parameters: {
+        fetchMock: {
+            mocks: [
+                {
+                    matcher: {
+                        name: 'denominatorData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: [],
+                            country: 'USA',
+                            division: 'Alabama',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: {
+                            data: [
+                                {
+                                    count: 0,
+                                },
+                            ],
+                            info: {
+                                dataVersion: '1712315293',
+                                requestId: '4603a85e-ae5e-495d-aee5-778a3af862c1',
+                            },
+                        },
+                    },
+                },
+                {
+                    matcher: {
+                        name: 'numeratorData',
+                        url: AGGREGATED_ENDPOINT,
+                        body: {
+                            fields: [],
+                            country: 'USA',
+                        },
+                    },
+                    response: {
+                        status: 200,
+                        body: {
+                            data: [
+                                {
+                                    count: 0,
+                                },
+                            ],
+                            info: {
+                                dataVersion: '1712315293',
+                                requestId: '4603a85e-ae5e-495d-aee5-778a3af862c1',
+                            },
+                        },
+                    },
+                },
+            ],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        await waitFor(async () => {
+            await expect(canvas.getByText('0')).toBeInTheDocument();
+            await expect(canvas.getByText('-%')).toBeInTheDocument();
+        });
+    },
+};
+
 export const FiresFinishedLoadingEvent: StoryObj<StatisticsProps> = {
     ...Default,
     play: playThatExpectsFinishedLoadingEvent(),

package/src/preact/statistic/statistics.tsx

@@ -74,7 +74,9 @@ const MetricDataTabs: FunctionComponent<MetricDataTabsProps> = ({ data }) => {
 
             <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-value text-2xl sm:text-4xl'>
+                    {Number.isFinite(proportion) ? formatProportion(proportion) : '-%'}
+                </div>
                 <div className='stat-desc text-wrap'>The proportion among all sequenced samples</div>
             </div>
         </div>

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

@@ -8,7 +8,6 @@ import { LAPIS_URL } from '../../constants';
 import { type DateRangeFilterProps } from '../../preact/dateRangeFilter/date-range-filter';
 import './gs-date-range-filter';
 import '../gs-app';
-import { toYYYYMMDD } from '../../preact/dateRangeFilter/dateConversion';
 import { dateRangeOptionPresets } from '../../preact/dateRangeFilter/dateRangeOption';
 import { gsEventNames } from '../../utils/gsEventNames';
 import { withinShadowRoot } from '../withinShadowRoot.story';
@@ -16,7 +15,6 @@ import { withinShadowRoot } from '../withinShadowRoot.story';
 const codeExample = String.raw`
 <gs-date-range-filter
     dateRangeOptions='[{ "label": "Year 2021", "dateFrom": "2021-01-01", "dateTo": "2021-12-31" }]'
-    earliestDate="1970-01-01"
     value="Year 2021"
     width="100%"
     lapisDateField="myDateColumn"
@@ -47,9 +45,6 @@ const meta: Meta<Required<DateRangeFilterProps>> = {
         dateRangeOptions: {
             control: { type: 'object' },
         },
-        earliestDate: {
-            control: { type: 'text' },
-        },
         width: {
             control: { type: 'text' },
         },
@@ -59,14 +54,12 @@ const meta: Meta<Required<DateRangeFilterProps>> = {
     },
     args: {
         dateRangeOptions: [
-            dateRangeOptionPresets.lastMonth,
-            dateRangeOptionPresets.last3Months,
-            dateRangeOptionPresets.allTimes,
+            dateRangeOptionPresets().lastMonth,
+            dateRangeOptionPresets().last3Months,
             { label: '2021', dateFrom: '2021-01-01', dateTo: '2021-12-31' },
             customDateRange,
         ],
-        earliestDate: '1970-01-01',
-        value: dateRangeOptionPresets.lastMonth.label,
+        value: dateRangeOptionPresets().lastMonth.label,
         lapisDateField: 'aDateColumn',
         width: '100%',
         placeholder: 'Date range',
@@ -82,7 +75,6 @@ export const Default: StoryObj<Required<DateRangeFilterProps>> = {
             <div class="max-w-(--breakpoint-lg)">
                 <gs-date-range-filter
                     .dateRangeOptions=${args.dateRangeOptions}
-                    .earliestDate=${args.earliestDate}
                     .value=${args.value}
                     .width=${args.width}
                     .lapisDateField=${args.lapisDateField}
@@ -98,7 +90,6 @@ export const TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression: StoryOb
             <div class="max-w-(--breakpoint-lg)">
                 <gs-date-range-filter
                     .dateRangeOptions=${args.dateRangeOptions}
-                    earliestDate="${args.earliestDate}"
                     value="${args.value ?? 'null'}"
                     width="${args.width}"
                     lapisDateField="${args.lapisDateField}"
@@ -155,7 +146,7 @@ export const FiresEvents: StoryObj<Required<DateRangeFilterProps>> = {
                 await expect(placeholderOption).toHaveTextContent('Last month');
             });
             await waitFor(async () => {
-                await expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date()));
+                await expect(dateToPicker(canvas)).toHaveValue('');
             });
         });
 

package/src/web-components/input/gs-date-range-filter.tsx

@@ -64,24 +64,18 @@ export class DateRangeFilterComponent extends PreactLitAdapter {
      * The `label` will be shown to the user, and it will be available as `value`.
      * The dates must be in the format `YYYY-MM-DD`.
      *
-     * If dateFrom or dateTo is not set, the component will default to the `earliestDate` or the current date.
+     * If dateFrom or dateTo is not set, the component will leave the corresponding input field empty.
      *
      * We provide some options in `dateRangeOptionPresets` for convenience.
      */
     @property({ type: Array })
     dateRangeOptions: { label: string; dateFrom?: string; dateTo?: string }[] = [];
 
-    /**
-     * The `dateFrom` value to use in the `allTimes` preset in the format `YYYY-MM-DD`.
-     */
-    @property({ type: String })
-    earliestDate: string = '1900-01-01';
-
     /**
      * The value to use for this date range selector.
      * - If it is a string, then it must be a valid label from the `dateRangeOptions`.
      * - If it is an object, then it accepts dates in the format `YYYY-MM-DD` for the keys `dateFrom` and `dateTo`.
-     *   Keys that are not set will default to the `earliestDate` or the current date respectively.
+     *   Keys that are not set will leave the corresponding input field empty.
      *
      * The `detail` of the `gs-date-range-option-changed` event can be used for this attribute,
      * if you want to control this component in your JS application.
@@ -128,7 +122,6 @@ export class DateRangeFilterComponent extends PreactLitAdapter {
         return (
             <DateRangeFilter
                 dateRangeOptions={this.dateRangeOptions}
-                earliestDate={this.earliestDate}
                 value={this.value}
                 lapisDateField={this.lapisDateField}
                 width={this.width}
@@ -162,9 +155,6 @@ declare global {
 type CustomSelectOptionsMatches = Expect<
     Equals<typeof DateRangeFilterComponent.prototype.dateRangeOptions, DateRangeFilterProps['dateRangeOptions']>
 >;
-type EarliestDateMatches = Expect<
-    Equals<typeof DateRangeFilterComponent.prototype.earliestDate, DateRangeFilterProps['earliestDate']>
->;
 type ValueMatches = Expect<Equals<typeof DateRangeFilterComponent.prototype.value, DateRangeFilterProps['value']>>;
 type WidthMatches = Expect<Equals<typeof DateRangeFilterComponent.prototype.width, DateRangeFilterProps['width']>>;
 type DateColumnMatches = Expect<