@genspectrum/dashboard-components 0.19.3 → 0.19.5

package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.stories.tsx

@@ -1,5 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/preact';
-import { expect, userEvent } from '@storybook/test';
+import { expect, userEvent, waitFor } from '@storybook/test';
+import type { Canvas } from '@storybook/types';
 
 import { WastewaterMutationsOverTime, type WastewaterMutationsOverTimeProps } from './wastewater-mutations-over-time';
 import { WISE_DETAILS_ENDPOINT, WISE_LAPIS_URL } from '../../../constants';
@@ -7,6 +8,7 @@ import referenceGenome from '../../../lapisApi/__mockData__/referenceGenome.json
 import { LapisUrlContextProvider } from '../../LapisUrlContext';
 import { ReferenceGenomeContext } from '../../ReferenceGenomeContext';
 import details from './__mockData__/details.json';
+import type { MutationsOverTimeProps } from '../../mutationsOverTime/mutations-over-time';
 
 const meta: Meta<WastewaterMutationsOverTimeProps> = {
     title: 'Wastewater visualization/Wastewater mutations over time',
@@ -108,3 +110,35 @@ export const AminoAcids: StoryObj<WastewaterMutationsOverTimeProps> = {
         });
     },
 };
+
+export const UsesMutationFilter: StoryObj<MutationsOverTimeProps> = {
+    ...Default,
+    play: async ({ canvas, step }) => {
+        await expectMutationOnPage(canvas, 'A966C');
+
+        await step('input filter', async () => {
+            const filterButton = canvas.getByRole('button', { name: 'Filter mutations' });
+            await userEvent.click(filterButton);
+
+            const filterInput = canvas.getByPlaceholderText('Filter');
+            await userEvent.type(filterInput, '26');
+        });
+
+        await step('should show only matching filter', async () => {
+            await expectMutationOnPage(canvas, 'T4026G');
+            await expectMutationOnPage(canvas, 'T5260C');
+
+            await waitFor(async () => {
+                const filteredMutation = canvas.queryByText('A966C');
+                await expect(filteredMutation).not.toBeInTheDocument();
+            });
+        });
+    },
+};
+
+async function expectMutationOnPage(canvas: Canvas, mutation: string) {
+    await waitFor(async () => {
+        const mutationOnFirstPage = canvas.getAllByText(mutation)[0];
+        await expect(mutationOnFirstPage).toBeVisible();
+    });
+}

package/src/preact/wastewater/mutationsOverTime/wastewater-mutations-over-time.tsx

@@ -3,20 +3,23 @@ import { type Dispatch, type StateUpdater, useMemo, useState } from 'preact/hook
 import z from 'zod';
 
 import { computeWastewaterMutationsOverTimeDataPerLocation } from './computeWastewaterMutationsOverTimeDataPerLocation';
-import { lapisFilterSchema, sequenceTypeSchema } from '../../../types';
+import { lapisFilterSchema, type SequenceType, sequenceTypeSchema } from '../../../types';
 import { Map2dView } from '../../../utils/map2d';
 import { useLapisUrl } from '../../LapisUrlContext';
+import { useMutationAnnotationsProvider } from '../../MutationAnnotationsContext';
 import { type ColorScale } from '../../components/color-scale-selector';
 import { ColorScaleSelectorDropdown } from '../../components/color-scale-selector-dropdown';
 import { ErrorBoundary } from '../../components/error-boundary';
 import { Fullscreen } from '../../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../../components/info';
 import { LoadingDisplay } from '../../components/loading-display';
+import { MutationsOverTimeTextFilter } from '../../components/mutations-over-time-text-filter';
 import { NoDataDisplay } from '../../components/no-data-display';
 import { ResizeContainer } from '../../components/resize-container';
 import { type DisplayedSegment, SegmentSelector } from '../../components/segment-selector';
 import Tabs from '../../components/tabs';
 import { type MutationOverTimeDataMap } from '../../mutationsOverTime/MutationOverTimeData';
+import { mutationOrAnnotationDoNotMatchFilter } from '../../mutationsOverTime/getFilteredMutationsOverTimeData';
 import MutationsOverTimeGrid from '../../mutationsOverTime/mutations-over-time-grid';
 import { pageSizesSchema } from '../../shared/tanstackTable/pagination';
 import { PageSizeContextProvider } from '../../shared/tanstackTable/pagination-context';
@@ -111,13 +114,23 @@ type MutationOverTimeTabsProps = {
 function getFilteredMutationOverTimeData({
     data,
     displayedSegments,
+    mutationFilterValue,
+    annotationProvider,
+    sequenceType,
 }: {
     data: MutationOverTimeDataMap;
     displayedSegments: DisplayedSegment[];
+    mutationFilterValue: string;
+    sequenceType: SequenceType;
+    annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>;
 }): MutationOverTimeDataMap {
     const filteredData = new Map2dView(data);
 
     const mutationsToFilterOut = data.getFirstAxisKeys().filter((entry) => {
+        if (mutationOrAnnotationDoNotMatchFilter(entry, sequenceType, mutationFilterValue, annotationProvider)) {
+            return true;
+        }
+
         return displayedSegments.some((segment) => segment.segment === entry.segment && !segment.checked);
     });
 
@@ -132,6 +145,9 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
     mutationOverTimeDataPerLocation,
     originalComponentProps,
 }) => {
+    const [mutationFilterValue, setMutationFilterValue] = useState('');
+    const annotationProvider = useMutationAnnotationsProvider();
+
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
     const [displayedSegments, setDisplayedSegments] = useDisplayedSegments(mutationOverTimeDataPerLocation);
 
@@ -141,14 +157,28 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
                 title: location,
                 content: (
                     <MutationsOverTimeGrid
-                        data={getFilteredMutationOverTimeData({ data, displayedSegments })}
+                        data={getFilteredMutationOverTimeData({
+                            data,
+                            displayedSegments,
+                            mutationFilterValue,
+                            annotationProvider,
+                            sequenceType: originalComponentProps.sequenceType,
+                        })}
                         colorScale={colorScale}
                         pageSizes={originalComponentProps.pageSizes}
                         sequenceType={originalComponentProps.sequenceType}
                     />
                 ),
             })),
-        [mutationOverTimeDataPerLocation, displayedSegments, colorScale, originalComponentProps],
+        [
+            mutationOverTimeDataPerLocation,
+            displayedSegments,
+            mutationFilterValue,
+            annotationProvider,
+            colorScale,
+            originalComponentProps.pageSizes,
+            originalComponentProps.sequenceType,
+        ],
     );
 
     const toolbar = (
@@ -159,6 +189,8 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
             data={mutationOverTimeDataPerLocation}
             displayedSegments={displayedSegments}
             setDisplayedSegments={setDisplayedSegments}
+            setFilterValue={setMutationFilterValue}
+            mutationFilterValue={mutationFilterValue}
         />
     );
 
@@ -176,6 +208,8 @@ type ToolbarProps = {
     data: MutationOverTimeDataPerLocation;
     displayedSegments: DisplayedSegment[];
     setDisplayedSegments: (segments: DisplayedSegment[]) => void;
+    mutationFilterValue: string;
+    setFilterValue: (filterValue: string) => void;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -184,9 +218,12 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
     originalComponentProps,
     displayedSegments,
     setDisplayedSegments,
+    setFilterValue,
+    mutationFilterValue,
 }) => {
     return (
         <>
+            <MutationsOverTimeTextFilter setFilterValue={setFilterValue} value={mutationFilterValue} />
             <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
             <SegmentSelector
                 displayedSegments={displayedSegments}

package/src/utilEntrypoint.ts

@@ -40,3 +40,5 @@ export { TextFilterChangedEvent } from './preact/textFilter/TextFilterChangedEve
 export type { MutationAnnotations, MutationAnnotation } from './web-components/mutation-annotations-context';
 
 export { gsEventNames } from './utils/gsEventNames';
+
+export { type NumberRange } from './preact/numberRangeFilter/NumberRangeFilterChangedEvent';

package/src/utils/gsEventNames.ts

@@ -6,4 +6,6 @@ export const gsEventNames = {
     lineageFilterChanged: 'gs-lineage-filter-changed',
     locationChanged: 'gs-location-changed',
     textFilterChanged: 'gs-text-filter-changed',
+    numberRangeFilterChanged: 'gs-number-range-filter-changed',
+    numberRangeValueChanged: 'gs-number-range-value-changed',
 } as const;

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