@genspectrum/dashboard-components 0.14.1 → 0.15.0

package/src/preact/{textInput/text-input.tsx → textFilter/text-filter.tsx}

@@ -2,7 +2,7 @@ import { type FunctionComponent } from 'preact';
 import z from 'zod';
 
 import { useLapisUrl } from '../LapisUrlContext';
-import { TextInputChangedEvent } from './TextInputChangedEvent';
+import { TextFilterChangedEvent } from './TextFilterChangedEvent';
 import { fetchStringAutocompleteList } from './fetchStringAutocompleteList';
 import { lapisFilterSchema } from '../../types';
 import { DownshiftCombobox } from '../components/downshift-combobox';
@@ -17,29 +17,29 @@ const textSelectorPropsSchema = z.object({
     placeholderText: z.string().optional(),
     value: z.string().optional(),
 });
-const textInputInnerPropsSchema = textSelectorPropsSchema.extend({ lapisFilter: lapisFilterSchema });
-const textInputPropsSchema = textInputInnerPropsSchema.extend({
+const textFilterInnerPropsSchema = textSelectorPropsSchema.extend({ lapisFilter: lapisFilterSchema });
+const textFilterPropsSchema = textFilterInnerPropsSchema.extend({
     width: z.string(),
 });
 
-export type TextInputInnerProps = z.infer<typeof textInputInnerPropsSchema>;
-export type TextInputProps = z.infer<typeof textInputPropsSchema>;
+export type TextFilterInnerProps = z.infer<typeof textFilterInnerPropsSchema>;
+export type TextFilterProps = z.infer<typeof textFilterPropsSchema>;
 type TextSelectorProps = z.infer<typeof textSelectorPropsSchema>;
 
-export const TextInput: FunctionComponent<TextInputProps> = (props) => {
+export const TextFilter: FunctionComponent<TextFilterProps> = (props) => {
     const { width, ...innerProps } = props;
     const size = { width, height: '3rem' };
 
     return (
-        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={textInputPropsSchema}>
+        <ErrorBoundary size={size} layout='horizontal' componentProps={props} schema={textFilterPropsSchema}>
             <ResizeContainer size={size}>
-                <TextInputInner {...innerProps} />
+                <TextFilterInner {...innerProps} />
             </ResizeContainer>
         </ErrorBoundary>
     );
 };
 
-const TextInputInner: FunctionComponent<TextInputInnerProps> = ({
+const TextFilterInner: FunctionComponent<TextFilterInnerProps> = ({
     value,
     lapisField,
     placeholderText,
@@ -88,7 +88,7 @@ const TextSelector = ({
             value={initialSelectedItem}
             filterItemsByInputValue={filterByInputValue}
             createEvent={(item: SelectItem | null) =>
-                new TextInputChangedEvent({ [lapisField]: item?.value ?? undefined })
+                new TextFilterChangedEvent({ [lapisField]: item?.value ?? undefined })
             }
             itemToString={(item: SelectItem | undefined | null) => item?.value ?? ''}
             placeholderText={placeholderText}

package/src/utilEntrypoint.ts

@@ -3,7 +3,7 @@ export {
     type DateRangeSelectOption,
     dateRangeOptionPresets,
     DateRangeOptionChangedEvent,
-} from './preact/dateRangeSelector/dateRangeOption';
+} from './preact/dateRangeFilter/dateRangeOption';
 
 export {
     type NamedLapisFilter,
@@ -35,4 +35,4 @@ export type { AxisMax, YAxisMaxConfig } from './preact/shared/charts/getYAxisMax
 
 export { LocationChangedEvent } from './preact/locationFilter/LocationChangedEvent';
 export { LineageFilterChangedEvent } from './preact/lineageFilter/LineageFilterChangedEvent';
-export { TextInputChangedEvent } from './preact/textInput/TextInputChangedEvent';
+export { TextFilterChangedEvent } from './preact/textFilter/TextFilterChangedEvent';

package/src/utils/map2d.ts

@@ -150,6 +150,7 @@ export class Map2dView<Key1 extends object | string, Key2 extends object | strin
         this.keysSecondAxis = new Map(map.keysSecondAxis);
 
         if (map instanceof Map2dView) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- the generics match, we know that.
             this.baseMap = map.baseMap;
         }
         this.baseMap = map;

package/src/web-components/gs-app.stories.ts

@@ -50,9 +50,9 @@ export const Default: StoryObj<{ lapis: string }> = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(canvas.getByText(LAPIS_URL)).toBeVisible();
-            expect(canvas.getByText('"name": "ORF1a",', { exact: false })).toBeVisible();
+        await waitFor(async () => {
+            await expect(canvas.getByText(LAPIS_URL)).toBeVisible();
+            await expect(canvas.getByText('"name": "ORF1a",', { exact: false })).toBeVisible();
         });
     },
 };
@@ -66,8 +66,8 @@ export const WithNoLapisUrl: StoryObj<{ lapis: string }> = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(canvas.getByText("Error: Invalid LAPIS URL: 'notAValidUrl'", { exact: false })).toBeVisible();
+        await waitFor(async () => {
+            await expect(canvas.getByText("Error: Invalid LAPIS URL: 'notAValidUrl'", { exact: false })).toBeVisible();
         });
     },
 };
@@ -103,8 +103,8 @@ export const FailsToFetchReferenceGenome: StoryObj<{ lapis: string }> = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
 
-        await waitFor(() => {
-            expect(canvas.getByText('Error: Cannot fetch reference genome.', { exact: false })).toBeVisible();
+        await waitFor(async () => {
+            await expect(canvas.getByText('Error: Cannot fetch reference genome.', { exact: false })).toBeVisible();
         });
     },
 };

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"
-    valule="Year 2021"
+    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,37 +78,81 @@ 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();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-date-range-filter-changed', filterChangedListenerMock);
             canvasElement.addEventListener('gs-date-range-option-changed', optionChangedListenerMock);
         });
 
         await step('Expect last 6 months to be selected', async () => {
             await expect(selectField(canvas)).toHaveValue('Last month');
-            await waitFor(() => {
-                expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date()));
+            await waitFor(async () => {
+                await expect(dateToPicker(canvas)).toHaveValue(toYYYYMMDD(new Date()));
             });
         });
 
@@ -133,5 +178,5 @@ export const FiresEvents: StoryObj<Required<DateRangeSelectorProps>> = {
     },
 };
 
-const dateToPicker = (canvas: ReturnType<typeof within>) => canvas.getByPlaceholderText('Date to');
-const selectField = (canvas: ReturnType<typeof within>) => canvas.getByRole('combobox');
+const dateToPicker = (canvas: ReturnType<typeof within>): HTMLElement => canvas.getByPlaceholderText('Date to');
+const selectField = (canvas: ReturnType<typeof within>): HTMLElement => canvas.getByRole('combobox');

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-lineage-filter.stories.ts

@@ -181,7 +181,7 @@ export const FiresEvent: StoryObj<Required<LineageFilterProps>> = {
 
         const inputField = () => canvas.getByPlaceholderText('Enter a lineage');
         const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-lineage-filter-changed', listenerMock);
         });
 

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

@@ -188,7 +188,7 @@ export const FiresEvent: StoryObj<LocationFilterProps> = {
         const inputField = () => canvas.getByRole('combobox');
 
         const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-location-changed', listenerMock);
         });
 

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

@@ -72,7 +72,7 @@ export const FiresFilterChangedEvent: StoryObj<MutationFilterProps> = {
 
         const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
         const listenerMock = fn();
-        await step('Setup event listener mock', async () => {
+        await step('Setup event listener mock', () => {
             canvasElement.addEventListener('gs-mutation-filter-changed', listenerMock);
         });
 
@@ -154,18 +154,18 @@ export const MultiSegmentedReferenceGenomes: StoryObj<MutationFilterProps> = {
 
         const inputField = () => canvas.getByPlaceholderText('Enter a mutation', { exact: false });
 
-        await waitFor(() => {
+        await waitFor(async () => {
             const placeholderText = inputField().getAttribute('placeholder');
 
-            expect(placeholderText).toEqual(
+            await expect(placeholderText).toEqual(
                 'Enter a mutation (e.g. seg1:23T, ins_seg1:10462:A, gene1:57Q, ins_gene1:31:N)',
             );
         });
 
-        await waitFor(() => {
-            expect(canvas.getByText('seg1:123T')).toBeVisible();
-            expect(canvas.getByText('gene2:56')).toBeVisible();
-            return expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible();
+        await waitFor(async () => {
+            await expect(canvas.getByText('seg1:123T')).toBeVisible();
+            await expect(canvas.getByText('gene2:56')).toBeVisible();
+            await expect(canvas.getByText('ins_seg2:78:AAA')).toBeVisible();
         });
     },
 };

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', async () => {
-            canvasElement.addEventListener('gs-text-input-changed', listenerMock);
+        await step('Setup event listener mock', () => {
+            canvasElement.addEventListener('gs-text-filter-changed', listenerMock);
         });
 
         await step('wait until data is loaded', async () => {
@@ -140,8 +140,8 @@ export const FiresEvents: StoryObj<Required<TextInputProps>> = {
         });
 
         await step('Verify event is fired with correct detail', async () => {
-            await waitFor(() => {
-                expect(listenerMock).toHaveBeenCalledWith(
+            await waitFor(async () => {
+                await expect(listenerMock).toHaveBeenCalledWith(
                     expect.objectContaining({
                         detail: {
                             host: 'Homo sapiens',

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';

package/src/web-components/visualization/gs-aggregate.tsx

@@ -1,7 +1,7 @@
 import { customElement, property } from 'lit/decorators.js';
 import type { DetailedHTMLProps, HTMLAttributes } from 'react';
 
-import { Aggregate, type AggregateProps, type AggregateView } from '../../preact/aggregatedData/aggregate';
+import { Aggregate, type AggregateProps } from '../../preact/aggregatedData/aggregate';
 import { type Equals, type Expect } from '../../utils/typeAssertions';
 import { PreactLitAdapterWithGridJsStyles } from '../PreactLitAdapterWithGridJsStyles';
 
@@ -47,7 +47,7 @@ export class AggregateComponent extends PreactLitAdapterWithGridJsStyles {
      * A list of tabs with views that this component should provide.
      */
     @property({ type: Array })
-    views: AggregateView[] = ['table'];
+    views: ('table' | 'bar')[] = ['table'];
 
     /**
      * The filter to apply to the data.