@genspectrum/dashboard-components 0.14.2 → 0.15.0

package/src/web-components/input/{gs-date-range-selector.stories.ts → gs-date-range-filter.stories.ts}

@@ -5,27 +5,27 @@ import { html } from 'lit';
 import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { previewHandles } from '../../../.storybook/preview';
 import { LAPIS_URL } from '../../constants';
-import { type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
-import './gs-date-range-selector';
+import { type DateRangeFilterProps } from '../../preact/dateRangeFilter/date-range-filter';
+import './gs-date-range-filter';
 import '../gs-app';
-import { toYYYYMMDD } from '../../preact/dateRangeSelector/dateConversion';
-import { dateRangeOptionPresets } from '../../preact/dateRangeSelector/dateRangeOption';
+import { toYYYYMMDD } from '../../preact/dateRangeFilter/dateConversion';
+import { dateRangeOptionPresets } from '../../preact/dateRangeFilter/dateRangeOption';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
-<gs-date-range-selector
+<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"
-></gs-date-range-selector>`;
+></gs-date-range-filter>`;
 
 const customDateRange = { label: 'CustomDateRange', dateFrom: '2021-01-01', dateTo: '2021-12-31' };
 
-const meta: Meta<Required<DateRangeSelectorProps>> = {
-    title: 'Input/DateRangeSelector',
-    component: 'gs-date-range-selector',
+const meta: Meta<Required<DateRangeFilterProps>> = {
+    title: 'Input/DateRangeFilter',
+    component: 'gs-date-range-filter',
     parameters: withComponentDocs({
         actions: {
             handles: ['gs-date-range-filter-changed', 'gs-date-range-option-changed', ...previewHandles],
@@ -65,6 +65,7 @@ const meta: Meta<Required<DateRangeSelectorProps>> = {
             dateRangeOptionPresets.lastMonth,
             dateRangeOptionPresets.last3Months,
             dateRangeOptionPresets.allTimes,
+            { label: '2021', dateFrom: '2021-01-01', dateTo: '2021-12-31' },
             customDateRange,
         ],
         earliestDate: '1970-01-01',
@@ -77,25 +78,69 @@ const meta: Meta<Required<DateRangeSelectorProps>> = {
 
 export default meta;
 
-export const Default: StoryObj<Required<DateRangeSelectorProps>> = {
+export const Default: StoryObj<Required<DateRangeFilterProps>> = {
     render: (args) =>
         html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
-                <gs-date-range-selector
+                <gs-date-range-filter
                     .dateRangeOptions=${args.dateRangeOptions}
                     .earliestDate=${args.earliestDate}
                     .value=${args.value}
                     .width=${args.width}
                     .lapisDateField=${args.lapisDateField}
-                ></gs-date-range-selector>
+                ></gs-date-range-filter>
             </div>
         </gs-app>`,
 };
 
-export const FiresEvents: StoryObj<Required<DateRangeSelectorProps>> = {
+export const TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression: StoryObj<Required<DateRangeFilterProps>> = {
+    render: (args) =>
+        html` <gs-app lapis="${LAPIS_URL}">
+            <div class="max-w-screen-lg">
+                <gs-date-range-filter
+                    .dateRangeOptions=${args.dateRangeOptions}
+                    earliestDate="${args.earliestDate}"
+                    value="${args.value}"
+                    width="${args.width}"
+                    lapisDateField="${args.lapisDateField}"
+                ></gs-date-range-filter>
+            </div>
+        </gs-app>`,
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter');
+
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('Last month');
+        });
+    },
+    argTypes: {
+        value: {
+            control: {
+                type: 'text',
+            },
+        },
+    },
+};
+
+export const TestSettingANumericValueIsTreatedAsString: StoryObj<Required<DateRangeFilterProps>> = {
+    ...TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression,
+    args: {
+        ...TestRenderAttributesInHtmlInsteadOfUsingPropertyExpression.args,
+        value: '2021',
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter');
+
+        await waitFor(async () => {
+            await expect(selectField(canvas)).toHaveValue('2021');
+        });
+    },
+};
+
+export const FiresEvents: StoryObj<Required<DateRangeFilterProps>> = {
     ...Default,
     play: async ({ canvasElement, step }) => {
-        const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-selector');
+        const canvas = await withinShadowRoot(canvasElement, 'gs-date-range-filter');
 
         const filterChangedListenerMock = fn();
         const optionChangedListenerMock = fn();

package/src/web-components/input/{gs-date-range-selector.tsx → gs-date-range-filter.tsx}

@@ -1,8 +1,8 @@
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
-import { DateRangeSelector, type DateRangeSelectorProps } from '../../preact/dateRangeSelector/date-range-selector';
-import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeSelector/dateRangeOption';
+import { DateRangeFilter, type DateRangeFilterProps } from '../../preact/dateRangeFilter/date-range-filter';
+import { type DateRangeOptionChangedEvent } from '../../preact/dateRangeFilter/dateRangeOption';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -48,8 +48,8 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * Use this event, when you want to control this component in your JS application.
  * You can supply the `detail` of this event to the `value` attribute of this component.
  */
-@customElement('gs-date-range-selector')
-export class DateRangeSelectorComponent extends PreactLitAdapter {
+@customElement('gs-date-range-filter')
+export class DateRangeFilterComponent extends PreactLitAdapter {
     /**
      * 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 `value`.
@@ -78,7 +78,22 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
      * 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.
      */
-    @property({ type: Object })
+    @property({
+        converter: (value) => {
+            if (value === null) {
+                return undefined;
+            }
+            try {
+                const result = JSON.parse(value) as unknown;
+                if (typeof result !== 'object' && typeof result !== 'string') {
+                    return value;
+                }
+                return result;
+            } catch (_) {
+                return value;
+            }
+        },
+    })
     value: string | { dateFrom?: string; dateTo?: string } | undefined = undefined;
 
     /**
@@ -97,7 +112,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
 
     override render() {
         return (
-            <DateRangeSelector
+            <DateRangeFilter
                 dateRangeOptions={this.dateRangeOptions}
                 earliestDate={this.earliestDate}
                 value={this.value}
@@ -110,7 +125,7 @@ export class DateRangeSelectorComponent extends PreactLitAdapter {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-selector': DateRangeSelectorComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
     }
 
     interface HTMLElementEventMap {
@@ -123,21 +138,21 @@ declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-selector': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
 type CustomSelectOptionsMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.dateRangeOptions, DateRangeSelectorProps['dateRangeOptions']>
+    Equals<typeof DateRangeFilterComponent.prototype.dateRangeOptions, DateRangeFilterProps['dateRangeOptions']>
 >;
 type EarliestDateMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.earliestDate, DateRangeSelectorProps['earliestDate']>
+    Equals<typeof DateRangeFilterComponent.prototype.earliestDate, DateRangeFilterProps['earliestDate']>
 >;
-type ValueMatches = Expect<Equals<typeof DateRangeSelectorComponent.prototype.value, DateRangeSelectorProps['value']>>;
-type WidthMatches = Expect<Equals<typeof DateRangeSelectorComponent.prototype.width, DateRangeSelectorProps['width']>>;
+type ValueMatches = Expect<Equals<typeof DateRangeFilterComponent.prototype.value, DateRangeFilterProps['value']>>;
+type WidthMatches = Expect<Equals<typeof DateRangeFilterComponent.prototype.width, DateRangeFilterProps['width']>>;
 type DateColumnMatches = Expect<
-    Equals<typeof DateRangeSelectorComponent.prototype.lapisDateField, DateRangeSelectorProps['lapisDateField']>
+    Equals<typeof DateRangeFilterComponent.prototype.lapisDateField, DateRangeFilterProps['lapisDateField']>
 >;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/input/{gs-text-input.stories.ts → gs-text-filter.stories.ts}

@@ -6,26 +6,26 @@ import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
 import { previewHandles } from '../../../.storybook/preview';
 import { AGGREGATED_ENDPOINT, LAPIS_URL } from '../../constants';
 import '../gs-app';
-import './gs-text-input';
-import data from '../../preact/textInput/__mockData__/aggregated_hosts.json';
-import type { TextInputProps } from '../../preact/textInput/text-input';
+import './gs-text-filter';
+import data from '../../preact/textFilter/__mockData__/aggregated_hosts.json';
+import type { TextFilterProps } from '../../preact/textFilter/text-filter';
 import { withinShadowRoot } from '../withinShadowRoot.story';
 
 const codeExample = String.raw`
-<gs-text-input 
+<gs-text-filter 
     lapisField="host"
     lapisFilter='{"country": "Germany"}'
     placeholderText="Enter host name"
     value="Homo sapiens"
     width="50%">
-</gs-text-input>`;
+</gs-text-filter>`;
 
-const meta: Meta<Required<TextInputProps>> = {
-    title: 'Input/Text input',
-    component: 'gs-text-input',
+const meta: Meta<Required<TextFilterProps>> = {
+    title: 'Input/Text filter',
+    component: 'gs-text-filter',
     parameters: withComponentDocs({
         actions: {
-            handles: ['gs-text-input-changed', ...previewHandles],
+            handles: ['gs-text-filter-changed', ...previewHandles],
         },
         fetchMock: {
             mocks: [
@@ -83,17 +83,17 @@ const meta: Meta<Required<TextInputProps>> = {
 
 export default meta;
 
-export const Default: StoryObj<Required<TextInputProps>> = {
+export const Default: StoryObj<Required<TextFilterProps>> = {
     render: (args) => {
         return html` <gs-app lapis="${LAPIS_URL}">
             <div class="max-w-screen-lg">
-                <gs-text-input
+                <gs-text-filter
                     .lapisField=${args.lapisField}
                     .lapisFilter=${args.lapisFilter}
                     .placeholderText=${args.placeholderText}
                     .value=${args.value}
                     .width=${args.width}
-                ></gs-text-input>
+                ></gs-text-filter>
             </div>
         </gs-app>`;
     },
@@ -106,15 +106,15 @@ export const Default: StoryObj<Required<TextInputProps>> = {
     },
 };
 
-export const FiresEvents: StoryObj<Required<TextInputProps>> = {
+export const FiresEvents: StoryObj<Required<TextFilterProps>> = {
     ...Default,
     play: async ({ canvasElement, step }) => {
-        const canvas = await withinShadowRoot(canvasElement, 'gs-text-input');
+        const canvas = await withinShadowRoot(canvasElement, 'gs-text-filter');
 
         const inputField = () => canvas.getByPlaceholderText('Enter host name');
         const listenerMock = fn();
         await step('Setup event listener mock', () => {
-            canvasElement.addEventListener('gs-text-input-changed', listenerMock);
+            canvasElement.addEventListener('gs-text-filter-changed', listenerMock);
         });
 
         await step('wait until data is loaded', async () => {

package/src/web-components/input/{gs-text-input.tsx → gs-text-filter.tsx}

@@ -1,8 +1,8 @@
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
-import { type TextInputChangedEvent } from '../../preact/textInput/TextInputChangedEvent';
-import { TextInput, type TextInputProps } from '../../preact/textInput/text-input';
+import { type TextFilterChangedEvent } from '../../preact/textFilter/TextFilterChangedEvent';
+import { TextFilter, type TextFilterProps } from '../../preact/textFilter/text-filter';
 import type { Equals, Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapter } from '../PreactLitAdapter';
 
@@ -12,7 +12,7 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  *
  * This component provides a text input field to specify filters for arbitrary fields of this LAPIS instance.
  *
- * @fires {CustomEvent<Record<string, string | undefined>>} gs-text-input-changed
+ * @fires {CustomEvent<Record<string, string | undefined>>} gs-text-filter-changed
  * Fired when the input field is changed.
  * The `details` of this event contain an object with the `lapisField` as key and the input value as value.
  * Example:
@@ -22,10 +22,10 @@ import { PreactLitAdapter } from '../PreactLitAdapter';
  * }
  *  ```
  */
-@customElement('gs-text-input')
-export class TextInputComponent extends PreactLitAdapter {
+@customElement('gs-text-filter')
+export class TextFilterComponent extends PreactLitAdapter {
     /**
-     * The initial value to use for this text input.
+     * The initial value to use for this text filter.
      */
     @property()
     value: string | undefined = undefined;
@@ -33,7 +33,7 @@ export class TextInputComponent extends PreactLitAdapter {
     /**
      * Required.
      *
-     * The LAPIS field name to use for this text input.
+     * The LAPIS field name to use for this text filter.
      * The field must exist on this LAPIS instance.
      */
     @property()
@@ -68,7 +68,7 @@ export class TextInputComponent extends PreactLitAdapter {
 
     override render() {
         return (
-            <TextInput
+            <TextFilter
                 lapisField={this.lapisField}
                 lapisFilter={this.lapisFilter}
                 placeholderText={this.placeholderText}
@@ -81,11 +81,11 @@ export class TextInputComponent extends PreactLitAdapter {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-text-input': TextInputComponent;
+        'gs-text-filter': TextFilterComponent;
     }
 
     interface HTMLElementEventMap {
-        'gs-text-input-changed': TextInputChangedEvent;
+        'gs-text-filter-changed': TextFilterChangedEvent;
     }
 }
 
@@ -93,19 +93,19 @@ declare global {
     // eslint-disable-next-line @typescript-eslint/no-namespace
     namespace JSX {
         interface IntrinsicElements {
-            'gs-text-input': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-text-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */
-type InitialValueMatches = Expect<Equals<typeof TextInputComponent.prototype.value, TextInputProps['value']>>;
-type LapisFieldMatches = Expect<Equals<typeof TextInputComponent.prototype.lapisField, TextInputProps['lapisField']>>;
+type InitialValueMatches = Expect<Equals<typeof TextFilterComponent.prototype.value, TextFilterProps['value']>>;
+type LapisFieldMatches = Expect<Equals<typeof TextFilterComponent.prototype.lapisField, TextFilterProps['lapisField']>>;
 type LapisFilterMatches = Expect<
-    Equals<typeof TextInputComponent.prototype.lapisFilter, TextInputProps['lapisFilter']>
+    Equals<typeof TextFilterComponent.prototype.lapisFilter, TextFilterProps['lapisFilter']>
 >;
 type PlaceholderTextMatches = Expect<
-    Equals<typeof TextInputComponent.prototype.placeholderText, TextInputProps['placeholderText']>
+    Equals<typeof TextFilterComponent.prototype.placeholderText, TextFilterProps['placeholderText']>
 >;
-type WidthMatches = Expect<Equals<typeof TextInputComponent.prototype.width, TextInputProps['width']>>;
+type WidthMatches = Expect<Equals<typeof TextFilterComponent.prototype.width, TextFilterProps['width']>>;
 /* eslint-enable @typescript-eslint/no-unused-vars, no-unused-vars */

package/src/web-components/input/index.ts

@@ -1,5 +1,5 @@
-export { DateRangeSelectorComponent } from './gs-date-range-selector';
+export { DateRangeFilterComponent } from './gs-date-range-filter';
 export { LocationFilterComponent } from './gs-location-filter';
-export { TextInputComponent } from './gs-text-input';
+export { TextFilterComponent } from './gs-text-filter';
 export { MutationFilterComponent } from './gs-mutation-filter';
 export { LineageFilterComponent } from './gs-lineage-filter';