@genspectrum/dashboard-components 0.6.19 → 0.7.0

package/dist/genspectrum-components.d.ts

@@ -99,6 +99,53 @@ export declare class App extends LitElement {
     createRenderRoot(): this;
 }
 
+/**
+ * A date range option that can be used in the `gs-date-range-selector` component.
+ */
+export declare type DateRangeOption = {
+    /** The label of the date range option that will be shown to the user */
+    label: 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?: string;
+    /**
+     * 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?: string;
+};
+
+/**
+ * Presets for the `gs-date-range-selector` component that can be used as `dateRangeOptions`.
+ */
+export declare const dateRangeOptionPresets: {
+    last2Weeks: {
+        label: string;
+        dateFrom: string | undefined;
+    };
+    lastMonth: {
+        label: string;
+        dateFrom: string | undefined;
+    };
+    last2Months: {
+        label: string;
+        dateFrom: string | undefined;
+    };
+    last3Months: {
+        label: string;
+        dateFrom: string | undefined;
+    };
+    last6Months: {
+        label: string;
+        dateFrom: string | undefined;
+    };
+    allTimes: {
+        label: string;
+    };
+};
+
 /**
  * ## Context
  * This component is a group of input fields designed to specify date range filters
@@ -130,15 +177,16 @@ export declare class App extends LitElement {
  */
 export declare class DateRangeSelectorComponent extends PreactLitAdapter {
     /**
-     * An array of custom options that the select field should provide,
-     * in addition to the predefined options.
+     * An array of date range options that the select field should provide.
      * The `label` will be shown to the user, and it will be available as `initialValue`.
      * 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.
      */
-    customSelectOptions: {
+    dateRangeOptions: {
         label: string;
-        dateFrom: string;
-        dateTo: string;
+        dateFrom?: string;
+        dateTo?: string;
     }[];
     /**
      * The `dateFrom` value to use in the `allTimes` preset in the format `YYYY-MM-DD`.
@@ -146,13 +194,15 @@ export declare class DateRangeSelectorComponent extends PreactLitAdapter {
     earliestDate: string;
     /**
      * The initial value to use for this date range selector.
-     * Must be a valid label from the preset labels or a `label` given in the `customSelectOptions`.
+     * Must be a valid label from the `dateRangeOptions`.
      *
-     * If the value is invalid, the component will default to `'last6Months'`.
+     * If the value is not set, the component will default to the range `earliestDate` until today.
      *
      * It will be overwritten if `initialDateFrom` or `initialDateTo` is set.
+     *
+     * We provide some options in `dateRangeOptionPresets` for convenience.
      */
-    initialValue: 'custom' | 'allTimes' | 'last2Weeks' | 'lastMonth' | 'last2Months' | 'last3Months' | 'last6Months' | string;
+    initialValue: string | undefined;
     /**
      * A date string in the format `YYYY-MM-DD`.
      * If set, the date range selector will be initialized with the given date (overwriting `initialValue` to `custom`).
@@ -989,7 +1039,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-comparison-component': MutationComparisonComponent;
+        'gs-date-range-selector': DateRangeSelectorComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-date-range-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -997,7 +1050,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1005,7 +1058,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-component': MutationsComponent;
+        'gs-location-filter': LocationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-location-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1013,7 +1069,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1021,7 +1077,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
+        'gs-text-input': TextInputComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-text-input-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1029,7 +1088,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1037,7 +1096,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
+        'gs-mutation-filter': MutationFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
     }
 }
 
@@ -1045,7 +1108,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1053,7 +1116,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-aggregate-component': AggregateComponent;
+        'gs-lineage-filter': LineageFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
     }
 }
 
@@ -1061,7 +1127,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1069,7 +1135,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
+        'gs-mutation-comparison-component': MutationComparisonComponent;
     }
 }
 
@@ -1077,7 +1143,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutation-comparison-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1085,7 +1151,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutations-over-time': MutationsOverTimeComponent;
+        'gs-mutations-component': MutationsComponent;
     }
 }
 
@@ -1093,7 +1159,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1101,10 +1167,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-date-range-changed': CustomEvent<Record<string, string>>;
+        'gs-prevalence-over-time': PrevalenceOverTimeComponent;
     }
 }
 
@@ -1112,7 +1175,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-prevalence-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1120,10 +1183,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-location-changed': CustomEvent<Record<string, string>>;
+        'gs-relative-growth-advantage': RelativeGrowthAdvantageComponent;
     }
 }
 
@@ -1131,7 +1191,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-relative-growth-advantage': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1139,10 +1199,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-text-input-changed': CustomEvent<Record<string, string>>;
+        'gs-aggregate-component': AggregateComponent;
     }
 }
 
@@ -1150,7 +1207,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-aggregate-component': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1158,10 +1215,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-lineage-filter-changed': CustomEvent<Record<string, string>>;
+        'gs-number-sequences-over-time': NumberSequencesOverTimeComponent;
     }
 }
 
@@ -1169,7 +1223,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-sequences-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1177,11 +1231,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-mutation-filter': MutationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        'gs-mutation-filter-changed': CustomEvent<SelectedMutationFilterStrings>;
-        'gs-mutation-filter-on-blur': CustomEvent<SelectedMutationFilterStrings>;
+        'gs-mutations-over-time': MutationsOverTimeComponent;
     }
 }
 
@@ -1189,7 +1239,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-mutation-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.6.19",
+    "version": "0.7.0",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",
@@ -80,7 +80,6 @@
         "flatpickr": "^4.6.13",
         "gridjs": "^6.2.0",
         "lit": "^3.1.3",
-        "object-hash": "^3.0.0",
         "preact": "^10.20.1",
         "zod": "^3.23.0"
     },
@@ -103,7 +102,6 @@
         "@storybook/web-components": "^8.0.9",
         "@storybook/web-components-vite": "^8.0.9",
         "@types/node": "^22.0.0",
-        "@types/object-hash": "^3.0.6",
         "@typescript-eslint/eslint-plugin": "^8.2.0",
         "@typescript-eslint/parser": "^8.2.0",
         "autoprefixer": "^10.4.19",

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from './web-components';
 
 export { type ErrorEvent, UserFacingError } from './preact/components/error-display';
+export { type DateRangeOption, dateRangeOptionPresets } from './preact/dateRangeSelector/dateRangeOption';
 
 declare global {
     interface HTMLElementEventMap {

package/src/preact/dateRangeSelector/computeInitialValues.spec.ts

@@ -1,48 +1,75 @@
 import { describe, expect, it } from 'vitest';
 
 import { computeInitialValues } from './computeInitialValues';
-import { PRESET_VALUE_CUSTOM, PRESET_VALUE_LAST_3_MONTHS, PRESET_VALUE_LAST_6_MONTHS } from './selectableOptions';
 
 const today = new Date();
 const earliestDate = '1900-01-01';
 
+const fromOption = 'fromOption';
+const toOption = 'toOption';
+const fromToOption = 'fromToOption';
+const dateFromOptionValue = '2010-06-30';
+const dateToOptionValue = '2020-01-01';
+
+const dateRangeOptions = [
+    { label: fromOption, dateFrom: dateFromOptionValue },
+    { label: toOption, dateTo: dateToOptionValue },
+    { label: fromToOption, dateFrom: dateFromOptionValue, dateTo: dateToOptionValue },
+];
+
 describe('computeInitialValues', () => {
     it('should compute for initial value if initial "from" and "to" are unset', () => {
-        const result = computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, undefined, undefined, earliestDate, []);
+        const result = computeInitialValues(fromToOption, undefined, undefined, earliestDate, dateRangeOptions);
 
-        const expectedFrom = new Date();
-        expectedFrom.setMonth(today.getMonth() - 3);
+        expect(result.initialSelectedDateRange).toEqual(fromToOption);
+        expectDateMatches(result.initialSelectedDateFrom, new Date(dateFromOptionValue));
+        expectDateMatches(result.initialSelectedDateTo, new Date(dateToOptionValue));
+    });
 
-        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_LAST_3_MONTHS);
-        expectDateMatches(result.initialSelectedDateFrom, expectedFrom);
+    it('should use today as "dateTo" if it is unset in selected option', () => {
+        const result = computeInitialValues(fromOption, undefined, undefined, earliestDate, dateRangeOptions);
+
+        expect(result.initialSelectedDateRange).toEqual(fromOption);
+        expectDateMatches(result.initialSelectedDateFrom, new Date(dateFromOptionValue));
         expectDateMatches(result.initialSelectedDateTo, today);
     });
 
-    it('should fall back to default when initial value is unknown', () => {
-        const result = computeInitialValues('not a known value', undefined, undefined, earliestDate, []);
+    it('should use earliest date as "dateFrom" if it is unset in selected option', () => {
+        const result = computeInitialValues(toOption, undefined, undefined, earliestDate, dateRangeOptions);
 
-        const expectedFrom = new Date();
-        expectedFrom.setMonth(today.getMonth() - 6);
+        expect(result.initialSelectedDateRange).toEqual(toOption);
+        expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
+        expectDateMatches(result.initialSelectedDateTo, new Date(dateToOptionValue));
+    });
 
-        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_LAST_6_MONTHS);
-        expectDateMatches(result.initialSelectedDateFrom, expectedFrom);
+    it('should fall back to full range if initial value is not set', () => {
+        const result = computeInitialValues(undefined, undefined, undefined, earliestDate, dateRangeOptions);
+
+        expect(result.initialSelectedDateRange).toBeUndefined();
+        expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
         expectDateMatches(result.initialSelectedDateTo, today);
     });
 
+    it('should fall back to default when initial value is unknown', () => {
+        expect(() => computeInitialValues('not a known value', undefined, undefined, earliestDate, [])).toThrowError(
+            /Invalid initialValue "not a known value", It must be one of/,
+        );
+    });
+
     it('should overwrite initial value if initial "from" is set', () => {
         const initialDateFrom = '2020-01-01';
-        const result = computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, initialDateFrom, undefined, earliestDate, []);
+        const result = computeInitialValues(fromOption, initialDateFrom, undefined, earliestDate, dateRangeOptions);
 
-        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
         expectDateMatches(result.initialSelectedDateTo, today);
     });
 
     it('should overwrite initial value if initial "to" is set', () => {
         const initialDateTo = '2020-01-01';
-        const result = computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, undefined, initialDateTo, earliestDate, []);
+        const result = computeInitialValues(fromOption, undefined, initialDateTo, earliestDate, dateRangeOptions);
 
-        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(earliestDate));
         expectDateMatches(result.initialSelectedDateTo, new Date(initialDateTo));
     });
@@ -50,15 +77,9 @@ describe('computeInitialValues', () => {
     it('should overwrite initial value if initial "to" and "from" are set', () => {
         const initialDateFrom = '2020-01-01';
         const initialDateTo = '2022-01-01';
-        const result = computeInitialValues(
-            PRESET_VALUE_LAST_3_MONTHS,
-            initialDateFrom,
-            initialDateTo,
-            earliestDate,
-            [],
-        );
+        const result = computeInitialValues(fromOption, initialDateFrom, initialDateTo, earliestDate, dateRangeOptions);
 
-        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
         expectDateMatches(result.initialSelectedDateTo, new Date(initialDateTo));
     });
@@ -66,29 +87,23 @@ describe('computeInitialValues', () => {
     it('should set initial "to" to "from" if "from" is after "to"', () => {
         const initialDateFrom = '2020-01-01';
         const initialDateTo = '1900-01-01';
-        const result = computeInitialValues(
-            PRESET_VALUE_LAST_3_MONTHS,
-            initialDateFrom,
-            initialDateTo,
-            earliestDate,
-            [],
-        );
+        const result = computeInitialValues(undefined, initialDateFrom, initialDateTo, earliestDate, dateRangeOptions);
 
-        expect(result.initialSelectedDateRange).toEqual(PRESET_VALUE_CUSTOM);
+        expect(result.initialSelectedDateRange).toBeUndefined();
         expectDateMatches(result.initialSelectedDateFrom, new Date(initialDateFrom));
         expectDateMatches(result.initialSelectedDateTo, new Date(initialDateFrom));
     });
 
     it('should throw if initial "from" is not a valid date', () => {
-        expect(() =>
-            computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, 'not a date', undefined, earliestDate, []),
-        ).toThrowError('Invalid initialDateFrom');
+        expect(() => computeInitialValues(undefined, 'not a date', undefined, earliestDate, [])).toThrowError(
+            'Invalid initialDateFrom',
+        );
     });
 
     it('should throw if initial "to" is not a valid date', () => {
-        expect(() =>
-            computeInitialValues(PRESET_VALUE_LAST_3_MONTHS, undefined, 'not a date', earliestDate, []),
-        ).toThrowError('Invalid initialDateTo');
+        expect(() => computeInitialValues(undefined, undefined, 'not a date', earliestDate, [])).toThrowError(
+            'Invalid initialDateTo',
+        );
     });
 
     function expectDateMatches(actual: Date, expected: Date) {

package/src/preact/dateRangeSelector/computeInitialValues.ts

@@ -1,36 +1,30 @@
-import {
-    type CustomSelectOption,
-    getDatesForSelectorValue,
-    getSelectableOptions,
-    PRESET_VALUE_CUSTOM,
-    PRESET_VALUE_LAST_6_MONTHS,
-    type PresetOptionValues,
-} from './selectableOptions';
+import { type DateRangeOption } from './dateRangeOption';
+import { getDatesForSelectorValue, getSelectableOptions } from './selectableOptions';
 import { UserFacingError } from '../components/error-display';
 
-export function computeInitialValues<CustomLabel extends string>(
-    initialValue: PresetOptionValues | CustomLabel | undefined,
+export function computeInitialValues(
+    initialValue: string | undefined,
     initialDateFrom: string | undefined,
     initialDateTo: string | undefined,
     earliestDate: string,
-    customSelectOptions: CustomSelectOption<CustomLabel>[],
+    dateRangeOptions: DateRangeOption[],
 ): {
-    initialSelectedDateRange: CustomLabel | PresetOptionValues;
+    initialSelectedDateRange: string | undefined;
     initialSelectedDateFrom: Date;
     initialSelectedDateTo: Date;
 } {
     if (isUndefinedOrEmpty(initialDateFrom) && isUndefinedOrEmpty(initialDateTo)) {
-        const selectableOptions = getSelectableOptions(customSelectOptions);
-        const initialSelectedDateRange =
-            initialValue !== undefined && selectableOptions.some((option) => option.value === initialValue)
-                ? initialValue
-                : PRESET_VALUE_LAST_6_MONTHS;
+        const selectableOptions = getSelectableOptions(dateRangeOptions);
+        const initialSelectedDateRange = selectableOptions.find((option) => option.value === initialValue)?.value;
 
-        const { dateFrom, dateTo } = getDatesForSelectorValue(
-            initialSelectedDateRange,
-            customSelectOptions,
-            earliestDate,
-        );
+        if (initialValue !== undefined && initialSelectedDateRange === undefined) {
+            throw new UserFacingError(
+                'Invalid initialValue',
+                `Invalid initialValue "${initialValue}", It must be one of ${selectableOptions.map((option) => `'${option.value}'`).join(', ')}`,
+            );
+        }
+
+        const { dateFrom, dateTo } = getDatesForSelectorValue(initialSelectedDateRange, dateRangeOptions, earliestDate);
 
         return {
             initialSelectedDateRange,
@@ -62,7 +56,7 @@ export function computeInitialValues<CustomLabel extends string>(
     }
 
     return {
-        initialSelectedDateRange: PRESET_VALUE_CUSTOM,
+        initialSelectedDateRange: undefined,
         initialSelectedDateFrom,
         initialSelectedDateTo,
     };