@genspectrum/dashboard-components 1.0.1 → 1.1.0

package/src/preact/mutationsOverTime/getFilteredMutationsOverTime.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { BaseMutationOverTimeDataMap } from './MutationOverTimeData';
-import { getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
+import { getFilteredMutationOverTimeData, type MutationFilter } from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeMutationValue } from '../../query/queryMutationsOverTime';
 import { type DeletionEntry, type SubstitutionEntry } from '../../types';
 import { type Deletion, type Substitution } from '../../utils/mutations';
@@ -28,7 +28,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedMutationTypes: [],
             proportionInterval,
             displayMutations: undefined,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -62,7 +62,7 @@ describe('getFilteredMutationOverTimeData', () => {
                 },
             ],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -85,7 +85,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -108,7 +108,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -132,7 +132,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -156,7 +156,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -178,7 +178,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -201,7 +201,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -225,7 +225,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedMutationTypes: [],
             proportionInterval,
             displayMutations: [anotherSubstitution.code, someDeletion.code],
-            mutationFilterValue: '',
+            mutationFilterValue: { textFilter: '', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -235,7 +235,7 @@ describe('getFilteredMutationOverTimeData', () => {
         expect(result.getFirstAxisKeys()).to.deep.equal([anotherSubstitution, someDeletion]);
     });
 
-    it('should filter by mutation filter value', () => {
+    it('should filter by mutation filter text value', () => {
         const { data, overallMutationData } = prepareMutationOverTimeData([
             someSubstitutionEntry,
             anotherSubstitutionEntry,
@@ -248,7 +248,7 @@ describe('getFilteredMutationOverTimeData', () => {
             displayedSegments: [],
             displayedMutationTypes: [],
             proportionInterval,
-            mutationFilterValue: '23T',
+            mutationFilterValue: { textFilter: '23T', annotationNameFilter: new Set() },
             sequenceType: 'nucleotide',
             annotationProvider: () => {
                 return [];
@@ -265,7 +265,7 @@ describe('getFilteredMutationOverTimeData', () => {
             someDeletionEntry,
         ]);
 
-        const expectFilteredValue = (filterValue: string, annotations: MutationAnnotations) => {
+        const expectFilteredValue = (filterValue: MutationFilter, annotations: MutationAnnotations) => {
             const annotationProvider = getMutationAnnotationsProvider(getMutationAnnotationsContext(annotations));
 
             const result = getFilteredMutationOverTimeData({
@@ -283,7 +283,7 @@ describe('getFilteredMutationOverTimeData', () => {
         };
 
         it('with filter value in symbol', () => {
-            expectFilteredValue('#', [
+            expectFilteredValue({ textFilter: '#', annotationNameFilter: new Set() }, [
                 {
                     name: 'Annotation 1',
                     description: 'Description 1',
@@ -294,7 +294,7 @@ describe('getFilteredMutationOverTimeData', () => {
         });
 
         it('with filter value in name', () => {
-            expectFilteredValue('Annota', [
+            expectFilteredValue({ textFilter: 'Annota', annotationNameFilter: new Set() }, [
                 {
                     name: 'Annotation 1 #',
                     description: 'Description 1',
@@ -305,7 +305,18 @@ describe('getFilteredMutationOverTimeData', () => {
         });
 
         it('with filter value in name', () => {
-            expectFilteredValue('Descr', [
+            expectFilteredValue({ textFilter: 'Descr', annotationNameFilter: new Set() }, [
+                {
+                    name: 'Annotation 1',
+                    description: 'Description 1',
+                    symbol: '#',
+                    nucleotideMutations: ['A123T'],
+                },
+            ]);
+        });
+
+        it('with annotation name filter', () => {
+            expectFilteredValue({ textFilter: '', annotationNameFilter: new Set(['Annotation 1']) }, [
                 {
                     name: 'Annotation 1',
                     description: 'Description 1',

package/src/preact/mutationsOverTime/getFilteredMutationsOverTimeData.ts

@@ -11,6 +11,11 @@ import type { DisplayedSegment } from '../components/segment-selector';
 export const displayMutationsSchema = z.array(z.string()).min(1);
 export type DisplayMutations = z.infer<typeof displayMutationsSchema>;
 
+export type MutationFilter = {
+    textFilter: string;
+    annotationNameFilter: Set<string>;
+};
+
 export type GetFilteredMutationOverTimeDataArgs = {
     data: MutationOverTimeDataMap;
     overallMutationData: SubstitutionOrDeletionEntry<Substitution, Deletion>[];
@@ -18,7 +23,7 @@ export type GetFilteredMutationOverTimeDataArgs = {
     displayedMutationTypes: DisplayedMutationType[];
     proportionInterval: { min: number; max: number };
     displayMutations?: DisplayMutations;
-    mutationFilterValue: string;
+    mutationFilterValue: MutationFilter;
     sequenceType: SequenceType;
     annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>;
 };
@@ -72,25 +77,54 @@ export function getFilteredMutationOverTimeData({
 export function mutationOrAnnotationDoNotMatchFilter(
     mutation: Mutation,
     sequenceType: SequenceType,
-    filterValue: string,
+    mutationFilter: MutationFilter,
     annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>,
 ) {
-    if (filterValue === '') {
-        return false;
+    return !(
+        mutationOrAnnotationMatchesTextFilter(mutation, sequenceType, mutationFilter.textFilter, annotationProvider) &&
+        mutationMatchesAnnotationFilter(mutation, sequenceType, mutationFilter.annotationNameFilter, annotationProvider)
+    );
+}
+
+function mutationOrAnnotationMatchesTextFilter(
+    mutation: Mutation,
+    sequenceType: SequenceType,
+    textFilter: string,
+    annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>,
+) {
+    if (textFilter === '') {
+        return true;
     }
 
-    if (mutation.code.includes(filterValue)) {
-        return false;
+    if (mutation.code.includes(textFilter)) {
+        return true;
     }
 
     const mutationAnnotations = annotationProvider(mutation, sequenceType);
     if (mutationAnnotations === undefined || mutationAnnotations.length === 0) {
-        return true;
+        return false;
     }
-    return !mutationAnnotations.some(
+    return mutationAnnotations.some(
         (annotation) =>
-            annotation.description.includes(filterValue) ||
-            annotation.name.includes(filterValue) ||
-            annotation.symbol.includes(filterValue),
+            annotation.description.includes(textFilter) ||
+            annotation.name.includes(textFilter) ||
+            annotation.symbol.includes(textFilter),
     );
 }
+
+function mutationMatchesAnnotationFilter(
+    mutation: Mutation,
+    sequenceType: SequenceType,
+    annotationNameFilter: Set<string>,
+    annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>,
+) {
+    if (annotationNameFilter.size === 0) {
+        return true;
+    }
+
+    const mutationAnnotations = annotationProvider(mutation, sequenceType);
+    if (mutationAnnotations === undefined || mutationAnnotations.length === 0) {
+        return false;
+    }
+    return mutationAnnotations.some((annotation) => annotationNameFilter.has(annotation.name));
+}

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

@@ -5,7 +5,11 @@ import z from 'zod';
 // @ts-expect-error -- uses subpath imports and vite worker import
 import MutationOverTimeWorker from '#mutationOverTime?worker&inline';
 import { BaseMutationOverTimeDataMap, type MutationOverTimeDataMap } from './MutationOverTimeData';
-import { displayMutationsSchema, getFilteredMutationOverTimeData } from './getFilteredMutationsOverTimeData';
+import {
+    displayMutationsSchema,
+    getFilteredMutationOverTimeData,
+    type MutationFilter,
+} from './getFilteredMutationsOverTimeData';
 import { type MutationOverTimeWorkerResponse } from './mutationOverTimeWorker';
 import MutationsOverTimeGrid from './mutations-over-time-grid';
 import { type MutationOverTimeQuery } from '../../query/queryMutationsOverTime';
@@ -29,7 +33,7 @@ import { Fullscreen } from '../components/fullscreen';
 import Info, { InfoComponentCode, InfoHeadline1, InfoParagraph } from '../components/info';
 import { LoadingDisplay } from '../components/loading-display';
 import { type DisplayedMutationType, MutationTypeSelector } from '../components/mutation-type-selector';
-import { MutationsOverTimeTextFilter } from '../components/mutations-over-time-text-filter';
+import { MutationsOverTimeMutationsFilter } from '../components/mutations-over-time-mutations-filter';
 import { NoDataDisplay } from '../components/no-data-display';
 import type { ProportionInterval } from '../components/proportion-selector';
 import { ProportionSelectorDropdown } from '../components/proportion-selector-dropdown';
@@ -129,7 +133,10 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
 }) => {
     const tabsRef = useDispatchFinishedLoadingEvent();
 
-    const [mutationFilterValue, setMutationFilterValue] = useState('');
+    const [mutationFilterValue, setMutationFilterValue] = useState<MutationFilter>({
+        textFilter: '',
+        annotationNameFilter: new Set(),
+    });
     const annotationProvider = useMutationAnnotationsProvider();
 
     const [proportionInterval, setProportionInterval] = useState(originalComponentProps.initialMeanProportionInterval);
@@ -227,8 +234,8 @@ type ToolbarProps = {
     colorScale: ColorScale;
     setColorScale: Dispatch<StateUpdater<ColorScale>>;
     originalComponentProps: MutationsOverTimeProps;
-    mutationFilterValue: string;
-    setFilterValue: (filterValue: string) => void;
+    mutationFilterValue: MutationFilter;
+    setFilterValue: Dispatch<StateUpdater<MutationFilter>>;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -248,7 +255,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
 }) => {
     return (
         <>
-            <MutationsOverTimeTextFilter setFilterValue={setFilterValue} value={mutationFilterValue} />
+            <MutationsOverTimeMutationsFilter setFilterValue={setFilterValue} value={mutationFilterValue} />
             {activeTab === 'Grid' && (
                 <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
             )}

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

@@ -14,13 +14,16 @@ 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 { MutationsOverTimeMutationsFilter } from '../../components/mutations-over-time-mutations-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 {
+    type MutationFilter,
+    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';
@@ -121,7 +124,7 @@ function getFilteredMutationOverTimeData({
 }: {
     data: MutationOverTimeDataMap;
     displayedSegments: DisplayedSegment[];
-    mutationFilterValue: string;
+    mutationFilterValue: MutationFilter;
     sequenceType: SequenceType;
     annotationProvider: ReturnType<typeof useMutationAnnotationsProvider>;
 }): MutationOverTimeDataMap {
@@ -148,7 +151,10 @@ const MutationsOverTimeTabs: FunctionComponent<MutationOverTimeTabsProps> = ({
 }) => {
     const tabsRef = useDispatchFinishedLoadingEvent();
 
-    const [mutationFilterValue, setMutationFilterValue] = useState('');
+    const [mutationFilterValue, setMutationFilterValue] = useState<MutationFilter>({
+        textFilter: '',
+        annotationNameFilter: new Set(),
+    });
     const annotationProvider = useMutationAnnotationsProvider();
 
     const [colorScale, setColorScale] = useState<ColorScale>({ min: 0, max: 1, color: 'indigo' });
@@ -211,8 +217,8 @@ type ToolbarProps = {
     data: MutationOverTimeDataPerLocation;
     displayedSegments: DisplayedSegment[];
     setDisplayedSegments: (segments: DisplayedSegment[]) => void;
-    mutationFilterValue: string;
-    setFilterValue: (filterValue: string) => void;
+    mutationFilterValue: MutationFilter;
+    setFilterValue: Dispatch<StateUpdater<MutationFilter>>;
 };
 
 const Toolbar: FunctionComponent<ToolbarProps> = ({
@@ -226,7 +232,7 @@ const Toolbar: FunctionComponent<ToolbarProps> = ({
 }) => {
     return (
         <>
-            <MutationsOverTimeTextFilter setFilterValue={setFilterValue} value={mutationFilterValue} />
+            <MutationsOverTimeMutationsFilter setFilterValue={setFilterValue} value={mutationFilterValue} />
             <ColorScaleSelectorDropdown colorScale={colorScale} setColorScale={setColorScale} />
             <SegmentSelector
                 displayedSegments={displayedSegments}