@genspectrum/dashboard-components 0.6.19 → 0.7.0

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()));
             });

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

@@ -37,13 +37,14 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
 @customElement('gs-date-range-selector')
 export 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.
      */
     @property({ type: Array })
-    customSelectOptions: { label: string; dateFrom: string; dateTo: string }[] = [];
+    dateRangeOptions: { label: string; dateFrom?: string; dateTo?: string }[] = [];
 
     /**
      * The `dateFrom` value to use in the `allTimes` preset in the format `YYYY-MM-DD`.
@@ -51,26 +52,18 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
     @property({ type: String })
     earliestDate: string = '1900-01-01';
 
-    // prettier-ignore
-    // The multiline union type must not start with `| 'custom'` - Storybook will list "" as the first type which is wrong
     /**
      * 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.
      */
     @property()
-    initialValue:
-        'custom'
-        | 'allTimes'
-        | 'last2Weeks'
-        | 'lastMonth'
-        | 'last2Months'
-        | 'last3Months'
-        | 'last6Months'
-        | string = 'last6Months';
+    initialValue: string | undefined = undefined;
 
     /**
      * A date string in the format `YYYY-MM-DD`.
@@ -105,7 +98,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
     override render() {
         return (
             <DateRangeSelector
-                customSelectOptions={this.customSelectOptions}
+                dateRangeOptions={this.dateRangeOptions}
                 earliestDate={this.earliestDate}
                 initialValue={this.initialValue}
                 initialDateFrom={this.initialDateFrom}
@@ -138,30 +131,22 @@ declare global {
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type CustomSelectOptionsMatches = Expect<
-    Equals<
-        typeof DateRangeSelectorComponent.prototype.customSelectOptions,
-        DateRangeSelectorProps<string>['customSelectOptions']
-    >
+    Equals<typeof DateRangeSelectorComponent.prototype.dateRangeOptions, DateRangeSelectorProps['dateRangeOptions']>
 >;
 type EarliestDateMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.earliestDate, DateRangeSelectorProps<string>['earliestDate']>
+    Equals<typeof DateRangeSelectorComponent.prototype.earliestDate, DateRangeSelectorProps['earliestDate']>
 >;
 type InitialValueMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.initialValue, DateRangeSelectorProps<string>['initialValue']>
+    Equals<typeof DateRangeSelectorComponent.prototype.initialValue, DateRangeSelectorProps['initialValue']>
 >;
 type InitialDateFromMatches = Expect<
-    Equals<
-        typeof DateRangeSelectorComponent.prototype.initialDateFrom,
-        DateRangeSelectorProps<string>['initialDateFrom']
-    >
+    Equals<typeof DateRangeSelectorComponent.prototype.initialDateFrom, DateRangeSelectorProps['initialDateFrom']>
 >;
 type InitialDateToMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.initialDateTo, DateRangeSelectorProps<string>['initialDateTo']>
->;
-type WidthMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.width, DateRangeSelectorProps<string>['width']>
+    Equals<typeof DateRangeSelectorComponent.prototype.initialDateTo, DateRangeSelectorProps['initialDateTo']>
 >;
+type WidthMatches = Expect<Equals<typeof DateRangeSelectorComponent.prototype.width, DateRangeSelectorProps['width']>>;
 type DateColumnMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.dateColumn, DateRangeSelectorProps<string>['dateColumn']>
+    Equals<typeof DateRangeSelectorComponent.prototype.dateColumn, DateRangeSelectorProps['dateColumn']>
 >;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */