first working version

loculus-project · Feb 28, 2025 · b2128c4 · b2128c4
1 parent e0ef046
commit b2128c4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git 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 = ({
                         `}
                 >
                     <div className='text-sm text-gray-800 mb-6 justify-between flex md:pl-6 items-baseline'>
-                        <div className='mt-auto'>
+                        <div className='mt-auto space-x-4'>
+                            <ActiveFilters
+                                sequenceFilter={sequencesFilter}
+                                removeFilter={removeFilter}
+                            />
                             {buildSequenceCountText(totalSequences, oldCount, initialCount)}
                             {detailsHook.isLoading ||
                             aggregatedHook.isLoading ||

diff --git 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<ActiveFiltersProps> = ({ sequenceFilter: downloadParameters }) => {
-    if (downloadParameters.isEmpty()) return null;
+export const ActiveFilters: FC<ActiveFiltersProps> = ({ sequenceFilter, removeFilter }) => {
+    if (sequenceFilter.isEmpty()) return null;
+    const showXButton = removeFilter !== undefined;
 
     return (
         <div className='mb-4'>
             <h4 className='font-bold mb-2'>Active filters</h4>
             <div className='flex flex-row flex-wrap gap-3'>
-                {[...downloadParameters.toDisplayStrings()].map(([key, [label, value]]) => (
+                {[...sequenceFilter.toDisplayStrings()].map(([key, [label, value]]) => (
                     <div
                         key={key}
                         className='border-primary-600 rounded-sm border border-l-primary-600 bg-gray-100 border-l-8 px-3 py-1 text-sm'
                     >
                         <span className='text-primary-900 font-light pr-1'>{label}:</span>
                         <span className='text-primary-900 font-semibold'>{value}</span>
+                        {showXButton && (
+                            <button onClick={() => removeFilter(key)}>
+                                X
+                            </button>
+                        )}
                     </div>
                 ))}
             </div>