@genspectrum/dashboard-components 0.19.4 → 0.19.5

package/dist/util.d.ts

@@ -486,6 +486,19 @@ declare const namedLapisFilterSchema: default_2.ZodObject<{
     displayName: string;
 }>;
 
+export declare type NumberRange = default_2.infer<typeof numberRangeSchema>;
+
+declare const numberRangeSchema: default_2.ZodObject<{
+    min: default_2.ZodOptional<default_2.ZodNumber>;
+    max: default_2.ZodOptional<default_2.ZodNumber>;
+}, "strip", default_2.ZodTypeAny, {
+    min?: number | undefined;
+    max?: number | undefined;
+}, {
+    min?: number | undefined;
+    max?: number | undefined;
+}>;
+
 export declare type NumberSequencesOverTimeProps = default_2.infer<typeof numberSequencesOverTimePropsSchema>;
 
 declare const numberSequencesOverTimePropsSchema: default_2.ZodObject<{
@@ -1058,11 +1071,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-date-range-filter': DateRangeFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
-        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
+        'gs-statistics': StatisticsComponent;
     }
 }
 
@@ -1070,7 +1079,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1078,10 +1087,7 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-location-filter': LocationFilterComponent;
-    }
-    interface HTMLElementEventMap {
-        [gsEventNames.locationChanged]: LocationChangedEvent;
+        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
     }
 }
 
@@ -1089,7 +1095,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1097,7 +1103,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-statistics': StatisticsComponent;
+        'gs-date-range-filter': DateRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.dateRangeFilterChanged]: CustomEvent<Record<string, string>>;
+        [gsEventNames.dateRangeOptionChanged]: DateRangeOptionChangedEvent;
     }
 }
 
@@ -1105,7 +1115,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-statistics': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-date-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1132,10 +1142,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-lineage-filter': LineageFilterComponent;
+        'gs-location-filter': LocationFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
+        [gsEventNames.locationChanged]: LocationChangedEvent;
     }
 }
 
@@ -1143,7 +1153,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-location-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1170,11 +1180,10 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-number-range-filter': NumberRangeFilterComponent;
+        'gs-lineage-filter': LineageFilterComponent;
     }
     interface HTMLElementEventMap {
-        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
-        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
+        [gsEventNames.lineageFilterChanged]: LineageFilterChangedEvent;
     }
 }
 
@@ -1182,7 +1191,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-lineage-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }
@@ -1190,7 +1199,11 @@ declare global {
 
 declare global {
     interface HTMLElementTagNameMap {
-        'gs-wastewater-mutations-over-time': WastewaterMutationsOverTimeComponent;
+        'gs-number-range-filter': NumberRangeFilterComponent;
+    }
+    interface HTMLElementEventMap {
+        [gsEventNames.numberRangeFilterChanged]: NumberRangeFilterChangedEvent;
+        [gsEventNames.numberRangeValueChanged]: NumberRangeValueChangedEvent;
     }
 }
 
@@ -1198,7 +1211,7 @@ declare global {
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'gs-wastewater-mutations-over-time': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
+            'gs-number-range-filter': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@genspectrum/dashboard-components",
-    "version": "0.19.4",
+    "version": "0.19.5",
     "description": "GenSpectrum web components for building dashboards",
     "type": "module",
     "license": "AGPL-3.0-only",

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -51,7 +51,9 @@ export function getFilteredMutationOverTimeData({
             return true;
         }
 
-        if (applySearchFilter(entry.mutation, sequenceType, mutationFilterValue, annotationProvider)) {
+        if (
+            mutationOrAnnotationDoNotMatchFilter(entry.mutation, sequenceType, mutationFilterValue, annotationProvider)
+        ) {
             return true;
         }
 
@@ -67,7 +69,7 @@ export function getFilteredMutationOverTimeData({
     return filteredData;
 }
 
-export function applySearchFilter(
+export function mutationOrAnnotationDoNotMatchFilter(
     mutation: Mutation,
     sequenceType: SequenceType,
     filterValue: string,

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