diff --git a/website/src/components/SearchPage/SearchFullUI.tsx b/website/src/components/SearchPage/SearchFullUI.tsx index dd69a6bb7..8a6f2b3af 100644 --- a/website/src/components/SearchPage/SearchFullUI.tsx +++ b/website/src/components/SearchPage/SearchFullUI.tsx @@ -33,6 +33,7 @@ import { } from '../../utils/search.ts'; import { EditDataUseTermsModal } from '../DataUseTerms/EditDataUseTermsModal.tsx'; import ErrorBox from '../common/ErrorBox.tsx'; +import { ActiveFilters } from '../common/ActiveFilters.tsx'; export interface InnerSearchFullUIProps { accessToken?: string; @@ -218,6 +219,14 @@ export const InnerSearchFullUI = ({ ? new SelectFilter(selectedSeqs) : new FieldFilter(lapisSearchParameters, hiddenFieldValues, consolidatedMetadataSchema); + const removeFilter = (key: string) => { + if (sequencesFilter instanceof SelectFilter && key === 'selectedSequences') { + clearSelectedSeqs(); + } else if (sequencesFilter instanceof FieldFilter) { + setSomeFieldValues([key, null]); + } + } + useEffect(() => { aggregatedHook.mutate({ ...lapisSearchParameters, @@ -352,7 +361,11 @@ export const InnerSearchFullUI = ({ `} >
-
+
+ {buildSequenceCountText(totalSequences, oldCount, initialCount)} {detailsHook.isLoading || aggregatedHook.isLoading || diff --git a/website/src/components/common/ActiveFilters.tsx b/website/src/components/common/ActiveFilters.tsx index f044a34df..3b614e1dc 100644 --- a/website/src/components/common/ActiveFilters.tsx +++ b/website/src/components/common/ActiveFilters.tsx @@ -4,22 +4,29 @@ import type { SequenceFilter } from '../SearchPage/DownloadDialog/SequenceFilter type ActiveFiltersProps = { sequenceFilter: SequenceFilter; + removeFilter?: (key: string) => void; }; -export const ActiveFilters: FC = ({ sequenceFilter: downloadParameters }) => { - if (downloadParameters.isEmpty()) return null; +export const ActiveFilters: FC = ({ sequenceFilter, removeFilter }) => { + if (sequenceFilter.isEmpty()) return null; + const showXButton = removeFilter !== undefined; return (

Active filters

- {[...downloadParameters.toDisplayStrings()].map(([key, [label, value]]) => ( + {[...sequenceFilter.toDisplayStrings()].map(([key, [label, value]]) => (
{label}: {value} + {showXButton && ( + + )}
))}