@genspectrum/dashboard-components 1.0.0 → 1.1.0

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}