@genspectrum/dashboard-components 0.19.3 → 0.19.4

package/src/web-components/input/gs-number-range-filter.spec.ts

@@ -0,0 +1,27 @@
+import { describe, expectTypeOf, test } from 'vitest';
+
+import { NumberRangeFilterComponent } from './gs-number-range-filter';
+import { type NumberRangeFilterProps } from '../../preact/numberRangeFilter/number-range-filter';
+
+describe('gs-number-range-filter types', () => {
+    test('should match', ({}) => {
+        expectTypeOf(NumberRangeFilterComponent.prototype)
+            .toHaveProperty('value')
+            .toEqualTypeOf<NumberRangeFilterProps['value']>();
+        expectTypeOf(NumberRangeFilterComponent.prototype)
+            .toHaveProperty('lapisField')
+            .toEqualTypeOf<NumberRangeFilterProps['lapisField']>();
+        expectTypeOf(NumberRangeFilterComponent.prototype)
+            .toHaveProperty('sliderMin')
+            .toEqualTypeOf<NumberRangeFilterProps['sliderMin']>();
+        expectTypeOf(NumberRangeFilterComponent.prototype)
+            .toHaveProperty('sliderMax')
+            .toEqualTypeOf<NumberRangeFilterProps['sliderMax']>();
+        expectTypeOf(NumberRangeFilterComponent.prototype)
+            .toHaveProperty('sliderStep')
+            .toEqualTypeOf<NumberRangeFilterProps['sliderStep']>();
+        expectTypeOf(NumberRangeFilterComponent.prototype)
+            .toHaveProperty('width')
+            .toEqualTypeOf<NumberRangeFilterProps['width']>();
+    });
+});

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

@@ -0,0 +1,96 @@
+import '../gs-app';
+import './gs-number-range-filter';
+
+import { type Meta, type StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import { withComponentDocs } from '../../../.storybook/ComponentDocsBlock';
+import { LAPIS_URL } from '../../constants';
+import { type NumberRangeFilterProps } from '../../preact/numberRangeFilter/number-range-filter';
+import { gsEventNames } from '../../utils/gsEventNames';
+
+const codeExample = String.raw`
+<gs-number-range-filter
+    value='{"ageFrom": 10, "ageTo": 90}'
+    lapisField="age"
+    sliderMin="0"
+    sliderMax="100"
+    sliderStep="1"
+    width="50%"
+></gs-number-range-filter>`;
+
+const meta: Meta<NumberRangeFilterProps> = {
+    title: 'Input/Number range filter',
+    component: 'gs-number-range-filter',
+    parameters: withComponentDocs({
+        actions: {
+            handles: [gsEventNames.numberRangeFilterChanged, gsEventNames.numberRangeValueChanged],
+        },
+        componentDocs: {
+            opensShadowDom: true,
+            expectsChildren: false,
+            codeExample,
+        },
+    }),
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: {
+                type: 'object',
+            },
+        },
+        lapisField: {
+            control: {
+                type: 'text',
+            },
+        },
+        sliderMin: {
+            control: {
+                type: 'number',
+            },
+        },
+        sliderMax: {
+            control: {
+                type: 'number',
+            },
+        },
+        sliderStep: {
+            control: {
+                type: 'number',
+            },
+        },
+        width: {
+            control: {
+                type: 'text',
+            },
+        },
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<NumberRangeFilterProps> = {
+    render: (args) => {
+        return html`
+            <gs-app lapis="${LAPIS_URL}">
+                <gs-number-range-filter
+                    .value=${args.value}
+                    .lapisField=${args.lapisField}
+                    .sliderMin=${args.sliderMin}
+                    .sliderMax=${args.sliderMax}
+                    .sliderStep=${args.sliderStep}
+                    .width=${args.width}
+                >
+                </gs-number-range-filter>
+            </gs-app>
+        `;
+    },
+    args: {
+        lapisField: 'age',
+        value: { min: 10, max: 90 },
+        sliderMin: 0,
+        sliderMax: 100,
+        sliderStep: 0.1,
+        width: '100%',
+    },
+};

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

@@ -0,0 +1,148 @@
+import { customElement, property } from 'lit/decorators.js';
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+import {
+    type NumberRangeFilterChangedEvent,
+    type NumberRangeValueChangedEvent,
+} from '../../preact/numberRangeFilter/NumberRangeFilterChangedEvent';
+import { NumberRangeFilter } from '../../preact/numberRangeFilter/number-range-filter';
+import { type gsEventNames } from '../../utils/gsEventNames';
+import { PreactLitAdapter } from '../PreactLitAdapter';
+
+/**
+ *
+ * ## Context
+ *
+ * This component lets the user specify filters for a `float` or `int` field in LAPIS.
+ * It consists of two text input fields and a slider.
+ *
+ * The slider must be restricted to a certain range.
+ * Users can however still enter values outside of this range in the text input fields.
+ *
+ * @fires {CustomEvent<Record<string, string | undefined>>} gs-number-range-filter-changed
+ * Fired when the slider is released,
+ * `onBlur` on the input fields after the user has typed a valid range in the input fields,
+ * or when one of the input fields is cleared.
+ * The `details` of this event contain an object with `${lapisField}From` and `${lapisField}To` as keys.
+ * The values are the numbers from the input fields or `undefined` if the input field is empty:
+ * ```
+ * {
+ *     [`${lapisField}From`]: number | undefined
+ *     [`${lapisField}To`]: number | undefined
+ * }
+ * ```
+ * Example:
+ * ```
+ * {
+ *     ageFrom: 18,
+ *     ageTo: undefined
+ * }
+ * ```
+ *
+ * @fires {CustomEvent<Record<string, string | undefined>>} gs-number-range-value-changed
+ * Similar to the `gs-number-range-filter-changed` event,
+ * but contains an `event.detail` that has a fixed format:
+ * ```
+ * {
+ *     min: number | undefined
+ *     max: number | undefined
+ * }
+ * ```
+ * This event should be used when you want to control this component externally.
+ * The `event.detail` can be used as the value of the component.
+ * Example:
+ * ```
+ * {
+ *     min: 18,
+ *     max: undefined
+ * }
+ * ```
+ */
+@customElement('gs-number-range-filter')
+export class NumberRangeFilterComponent extends PreactLitAdapter {
+    /**
+     * The value to use for this number filter.
+     *
+     * Must be of the form:
+     * ```
+     * {
+     *     [`${lapisField}From`]: number | undefined
+     *     [`${lapisField}To`]: number | undefined
+     * }
+     * ```
+     *
+     * This is the same format that the `gs-number-value-changed` event will emit.
+     */
+    @property({ type: Object })
+    value: { min?: number; max?: number } = {};
+
+    /**
+     * Required.
+     *
+     * The LAPIS field name to use for this text filter.
+     * The field must exist on this LAPIS instance.
+     */
+    @property()
+    lapisField = '';
+
+    /**
+     * The `min` value to use for the slider.
+     */
+    @property({ type: Number })
+    sliderMin = 0;
+
+    /**
+     * The `max` value to use for the slider.
+     */
+    @property({ type: Number })
+    sliderMax = 100;
+
+    /**
+     * The `step` value to use for the slider.
+     *
+     * This attribute has no effect on the text input.
+     */
+    @property({ type: Number })
+    sliderStep = 1;
+
+    /**
+     * The width of the component.
+     *
+     * Visit https://genspectrum.github.io/dashboard-components/?path=/docs/concepts-size-of-components--docs for more information.
+     */
+    @property({ type: String })
+    width: string = '100%';
+
+    override render() {
+        return (
+            <NumberRangeFilter
+                value={this.value}
+                lapisField={this.lapisField}
+                sliderMin={this.sliderMin}
+                sliderMax={this.sliderMax}
+                sliderStep={this.sliderStep}
+                width={this.width}
+            />
+        );
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'gs-number-range-filter': NumberRangeFilterComponent;
+    }
+
+    interface HTMLElementEventMap {
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+    }
+}
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace JSX {
+        interface IntrinsicElements {
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
+    }
+}

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

@@ -18,8 +18,8 @@ const codeExample = String.raw`
     lapisFilter='{"country": "Germany"}'
     placeholderText="Enter host name"
     value="Homo sapiens"
-    width="50%">
-</gs-text-filter>`;
+    width="50%"
+></gs-text-filter>`;
 
 const meta: Meta<Required<TextFilterProps>> = {
     title: 'Input/Text filter',

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

@@ -3,3 +3,4 @@ export { LocationFilterComponent } from './gs-location-filter';
 export { TextFilterComponent } from './gs-text-filter';
 export { MutationFilterComponent } from './gs-mutation-filter';
 export { LineageFilterComponent } from './gs-lineage-filter';
+export { NumberRangeFilterComponent } from './gs-number-range-filter';