Clear filter fix and equal operator

lumburovskalina · lumburovskalina · commit e6e734366727 · 2025-07-29T14:53:02.000+02:00
diff --git a/src/components/projects/projectId/data-browser/DataBrowser.tsx b/src/components/projects/projectId/data-browser/DataBrowser.tsx
@@ -21,10 +21,11 @@ import { getEmbeddings } from "@/src/services/base/embedding";
 import { parseFilterToExtended } from "@/src/util/components/projects/projectId/data-browser/filter-parser-helper";
 import { SearchGroup, Slice } from "@/submodules/javascript-functions/enums/enums";
 import { Application, CurrentPage } from "@/submodules/react-components/hooks/web-socket/constants";
+import { DataBrowserProps } from "@/src/types/components/projects/projectId/data-browser/data-browser";
 
 const SEARCH_REQUEST = { offset: 0, limit: 20 };
 
-export default function DataBrowser() {
+export default function DataBrowser(props: DataBrowserProps) {
     const dispatch = useDispatch();
 
     const projectId = useSelector(selectProjectId);
@@ -40,6 +41,7 @@ export default function DataBrowser() {
     const activeSlice = useSelector(selectActiveSlice);
 
     const [searchRequest, setSearchRequest] = useState(SEARCH_REQUEST);
+    const [clearRequest, setClearRequest] = useState(false);
 
     useEffect(() => {
         if (!projectId) return;
@@ -148,6 +150,7 @@ export default function DataBrowser() {
 
     const setSearchRequestToInit = useCallback(() => {
         setSearchRequest(SEARCH_REQUEST);
+        setClearRequest(true);
     }, []);
 
     const handleWebsocketNotification = useCallback((msgParts: string[]) => {
@@ -171,7 +174,7 @@ export default function DataBrowser() {
 
     return (<>
         {projectId && <div className="flex flex-row h-full">
-            <DataBrowserSidebar />
+            <DataBrowserSidebar clearRequest={clearRequest} />
             <DataBrowserRecords refetchNextRecords={getNextRecords} clearSearchRequest={setSearchRequestToInit} />
         </div>}
     </>)
diff --git a/src/components/projects/projectId/data-browser/DataBrowserRecords.tsx b/src/components/projects/projectId/data-browser/DataBrowserRecords.tsx
@@ -1,5 +1,5 @@
 import { openModal } from '@/src/reduxStore/states/modal';
-import { selectActiveSearchParams, selectActiveSlice, selectAdditionalData, selectRecords, selectSimilaritySearch, setActiveDataSlice, setActiveSearchParams, setIsTextHighlightNeeded, setRecordsInDisplay, setTextHighlight, updateAdditionalDataState } from '@/src/reduxStore/states/pages/data-browser';
+import { selectActiveSearchParams, selectActiveSlice, selectAdditionalData, selectRecords, selectSimilaritySearch, setActiveDataSlice, setActiveSearchParams, setFullSearchStore, setIsTextHighlightNeeded, setRecordsInDisplay, setTextHighlight, updateAdditionalDataState } from '@/src/reduxStore/states/pages/data-browser';
 import style from '@/src/styles/components/projects/projectId/data-browser.module.css';
 import { ModalEnum } from '@/src/types/shared/modal';
 import { TOOLTIPS_DICT } from '@/src/util/tooltip-constants';
diff --git a/src/components/projects/projectId/data-browser/DataBrowserSidebar.tsx b/src/components/projects/projectId/data-browser/DataBrowserSidebar.tsx
@@ -1,9 +1,9 @@
 import { selectAllUsers } from '@/src/reduxStore/states/general';
 import { setModalStates } from '@/src/reduxStore/states/modal';
-import { selectActiveSlice, selectAdditionalData, selectDataSlicesAll, setActiveDataSlice, setActiveSearchParams, setFullSearchStore, setIsTextHighlightNeeded, setRecordsInDisplay, setTextHighlight, updateAdditionalDataState } from '@/src/reduxStore/states/pages/data-browser';
+import { selectActiveSlice, selectAdditionalData, selectDataSlicesAll, setActiveDataSlice, setActiveSearchParams, setFullSearchStore, setIsTextHighlightNeeded, setRecordsInDisplay, setTextHighlight, setUniqueValuesDict, updateAdditionalDataState } from '@/src/reduxStore/states/pages/data-browser';
 import { selectProjectId } from '@/src/reduxStore/states/project';
 import style from '@/src/styles/components/projects/projectId/data-browser.module.css';
-import { DataSlice } from '@/src/types/components/projects/projectId/data-browser/data-browser';
+import { DataBrowserSidebarProps, DataSlice } from '@/src/types/components/projects/projectId/data-browser/data-browser';
 import { ModalEnum } from '@/src/types/shared/modal';
 import { updateSliceInfoHelper } from '@/src/util/components/projects/projectId/data-browser/data-browser-helper';
 import { Slice } from '@/submodules/javascript-functions/enums/enums';
@@ -17,7 +17,7 @@ import DataSliceInfoModal from './modals/DataSliceInfoModal';
 import MultilineTooltip from '@/src/components/shared/multilines-tooltip/MultilineTooltip';
 import { MemoIconAlertTriangle, MemoIconInfoCircle, MemoIconLayoutSidebar, MemoIconTrash } from '@/submodules/react-components/components/kern-icons/icons';
 
-export default function DataBrowserSidebar() {
+export default function DataBrowserSidebar(props: DataBrowserSidebarProps) {
     const dispatch = useDispatch();
 
     const projectId = useSelector(selectProjectId);
@@ -130,7 +130,7 @@ export default function DataBrowserSidebar() {
                 </div>
                 <span className="text-sm text-gray-400">You can filter and order all your data in the browser according to your needs. Selected filter criteria can be saved and used later on.</span>
 
-                <SearchGroups />
+                <SearchGroups clearRequest={props.clearRequest} />
             </div>}
         </div>
         <DeleteSliceModal />
diff --git a/src/components/projects/projectId/data-browser/SearchGroups.tsx b/src/components/projects/projectId/data-browser/SearchGroups.tsx
@@ -29,12 +29,12 @@ import { getRecordsByStaticSlice, searchRecordsExtended } from "@/src/services/b
 import { staticDataSlicesCurrentCount } from "@/src/services/base/dataSlices";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 import { MemoIconArrowDown, MemoIconArrowsRandom, MemoIconFilterOff, MemoIconPlus, MemoIconPointerOff, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
-import { useConsoleLog } from "@/submodules/react-components/hooks/useConsoleLog";
+import { SearchGroupsProps } from "@/src/types/components/projects/projectId/data-browser/data-browser";
 
 const GROUP_SORT_ORDER = 0;
 let GLOBAL_SEARCH_GROUP_COUNT = 0;
 
-export default function SearchGroups() {
+export default function SearchGroups(props: SearchGroupsProps) {
     const dispatch = useDispatch();
 
     const projectId = useSelector(selectProjectId);
@@ -97,7 +97,7 @@ export default function SearchGroups() {
         });
         setBackgroundColors(colors);
         setAttributeSortOrder(attributesSort);
-    }, [attributes]);
+    }, [attributes, props.clearRequest]);
 
     useEffect(() => {
         if (!attributesSortOrder || !searchGroupsStore) return;
@@ -339,10 +339,10 @@ export default function SearchGroups() {
         }
         if (attributeType == DataTypeEnum.TEXT_LIST) {
             operatorsCopy.push({
-                value: SearchOperator.CONTAINS.split("_").join(" "),
+                value: SearchOperator.EQUAL.split("_").join(" "),
             });
-            tooltipsCopy.push(getSearchOperatorTooltip(SearchOperator.CONTAINS));
-            formControlsIdx['operator'] = SearchOperator.CONTAINS;
+            tooltipsCopy.push(getSearchOperatorTooltip(SearchOperator.EQUAL));
+            formControlsIdx['operator'] = SearchOperator.EQUAL;
 
         } else if (attributeType !== DataTypeEnum.BOOLEAN) {
             for (let t of Object.values(SearchOperator)) {
@@ -365,8 +365,6 @@ export default function SearchGroups() {
         dispatch(setFullSearchStore(fullSearchCopy));
     }
 
-    useConsoleLog(uniqueValuesDict, 'uniqueValuesDict');
-
     function removeSearchGroupItem(groupKey, index) {
         const fullSearchCopy = jsonCopy(fullSearchStore);
         fullSearchCopy[groupKey].groupElements.splice(index, 1);
@@ -622,17 +620,17 @@ export default function SearchGroups() {
                                 <div className="flex-grow mr-2.5 flex flex-col  mt-2 ">
                                     <div className="flex-grow flex flex-row flex-wrap gap-1">
                                         <div style={{ width: groupItem.operator != '' ? '49%' : '100%' }}>
-                                            <KernDropdown options={attributesSortOrder} buttonName={groupItem.name} backgroundColors={backgroundColors}
-                                                selectedOption={(option: any) => selectValueDropdown(option.name, index, 'name', group.key)} fontClass="font-dmMono" buttonClasses="text-xs" />
+                                            {attributesSortOrder && <KernDropdown options={attributesSortOrder} buttonName={groupItem.name} backgroundColors={backgroundColors}
+                                                selectedOption={(option: any) => selectValueDropdown(option.name, index, 'name', group.key)} fontClass="font-dmMono" buttonClasses="text-xs" />}
                                         </div>
                                         <div style={{ width: '49%' }}>
-                                            {groupItem.operator != '' &&
+                                            {(groupItem.operator != '' && operatorsDropdown) &&
                                                 <KernDropdown options={operatorsDropdown} buttonName={groupItem.operator} tooltipsArray={tooltipsArray} tooltipArrayPlacement="right" buttonClasses="text-xs"
                                                     selectedOption={(option: any) => selectValueDropdown(option.value, index, 'operator', group.key)} fontClass="font-dmMono" />
                                             }
                                         </div>
                                     </div>
-                                    {(uniqueValuesDict[groupItem['name']] && groupItem['operator'] != '' && groupItem['operator'] != 'BETWEEN' && groupItem['operator'] != 'IN' && groupItem['operator'] != 'IN WC' || saveAttributeType == DataTypeEnum.TEXT_LIST) ? (
+                                    {(uniqueValuesDict && uniqueValuesDict[groupItem['name']] && groupItem['operator'] != '' && groupItem['operator'] != 'BETWEEN' && groupItem['operator'] != 'IN' && groupItem['operator'] != 'IN WC' || saveAttributeType == DataTypeEnum.TEXT_LIST) ? (
                                         <div className="my-2">
                                             <KernDropdown options={uniqueValuesDict[groupItem['name']]} buttonName={groupItem['searchValue'] ? groupItem['searchValue'] : 'Select value'}
                                                 selectedOption={(option: any) => selectValueDropdown(option, index, 'searchValue', group.key)} fontClass="font-dmMono" />
@@ -651,7 +649,7 @@ export default function SearchGroups() {
                                         </div>
                                     )}
 
-                                    {(groupItem['operator'] == "BEGINS WITH" || groupItem['operator'] == "ENDS WITH" || groupItem['operator'] == SearchOperator.CONTAINS || groupItem['operator'] == "IN WC") && (saveAttributeType != DataTypeEnum.INTEGER && saveAttributeType != DataTypeEnum.FLOAT) &&
+                                    {(groupItem['operator'] == "BEGINS WITH" || groupItem['operator'] == "ENDS WITH" || groupItem['operator'] == SearchOperator.CONTAINS || groupItem['operator'] == "IN WC") && (saveAttributeType != DataTypeEnum.INTEGER && saveAttributeType != DataTypeEnum.FLOAT && saveAttributeType != DataTypeEnum.TEXT_LIST) &&
                                         <label htmlFor="caseSensitive" className="text-xs text-gray-500 cursor-pointer flex items-center pb-2">
                                             <input name="caseSensitive" className="mr-1 cursor-pointer" id="caseSensitive"
                                                 onChange={(e: any) => selectValueDropdown(e.target.checked, index, 'caseSensitive', group.key)} type="checkbox" />Case sensitive</label>}
diff --git a/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx b/src/components/projects/projectId/settings/labeling-tasks/LabelingTasks.tsx
@@ -20,7 +20,6 @@ import { updateLabelingTask } from "@/src/services/base/labeling-tasks";
 import IconButton from "@/submodules/react-components/components/kern-button/IconButton";
 import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 import { MemoIconColorPicker, MemoIconPlus, MemoIconTrash } from "@/submodules/react-components/components/kern-icons/icons";
-import { useConsoleLog } from "@/submodules/react-components/hooks/useConsoleLog";
 
 export default function LabelingTasks() {
     const dispatch = useDispatch();
diff --git a/src/types/components/projects/projectId/data-browser/data-browser.ts b/src/types/components/projects/projectId/data-browser/data-browser.ts
@@ -55,4 +55,16 @@ export enum LineBreaksType {
 export type DataBrowserRecordsProps = {
     refetchNextRecords: () => void;
     clearSearchRequest: () => void;
+};
+
+export type DataBrowserProps = {
+    clearSearchRequest: () => void;
+};
+
+export type DataBrowserSidebarProps = {
+    clearRequest: boolean;
+}
+
+export type SearchGroupsProps = {
+    clearRequest: boolean;
 };
diff --git a/src/util/components/projects/projectId/data-browser/data-browser-helper.ts b/src/util/components/projects/projectId/data-browser/data-browser-helper.ts
@@ -5,8 +5,7 @@ import { buildFullLink } from "@/src/util/shared/link-parser-helper";
 import { dateAsUTCDate } from "@/submodules/javascript-functions/date-parser";
 import { informationSourceTypeToString, labelSourceToString, sliceTypeToString } from "@/submodules/javascript-functions/enums/enum-functions";
 import { LabelSource, Slice } from "@/submodules/javascript-functions/enums/enums";
-import { jsonCopy, tryParseJSON } from "@/submodules/javascript-functions/general";
-import { getAttributeType } from "./search-operators-helper";
+import { jsonCopy } from "@/submodules/javascript-functions/general";
 
 export function postProcessDataSlices(dataSlices: DataSlice[]) {
     const prepareDataSlices = jsonCopy(dataSlices);
diff --git a/src/util/components/projects/projectId/data-browser/search-operators-helper.ts b/src/util/components/projects/projectId/data-browser/search-operators-helper.ts
@@ -1,4 +1,5 @@
 import { FilterIntegrationOperator, SearchOperator } from "@/src/types/components/projects/projectId/data-browser/search-operators";
+import { DataTypeEnum } from "@/src/types/shared/general";
 
 export function getAttributeType(attributes: any[], attributeName: string) {
     return attributes.find(att => att.name == attributeName)?.type;
@@ -134,6 +135,9 @@ export function prepareOperator(searchElement: any, attributeType: string): stri
     if (attributeType == "BOOLEAN") {
         return SearchOperator.EQUAL;
     } else {
+        if (attributeType == DataTypeEnum.TEXT_LIST && searchElement.values.operator == SearchOperator.EQUAL) {
+            return SearchOperator.CONTAINS;
+        }
         return searchElement.values.operator;
     }
 }
diff --git a/submodules/react-components b/submodules/react-components
@@ -1 +1 @@
-Subproject commit 1f1dc08839bbf7e02e1ddafa774af43fdbb7197a
+Subproject commit 05a61ddd39e294a5d101cebcefddcb6344d34f5c

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import { FilterIntegrationOperator, SearchOperator } from "@/src/types/components/projects/projectId/data-browser/search-operators";`
	`2`	`+import { DataTypeEnum } from "@/src/types/shared/general";`
`2`	`3`
`3`	`4`	`export function getAttributeType(attributes: any[], attributeName: string) {`
`4`	`5`	`return attributes.find(att => att.name == attributeName)?.type;`
`@@ -134,6 +135,9 @@ export function prepareOperator(searchElement: any, attributeType: string): stri`
`134`	`135`	`if (attributeType == "BOOLEAN") {`
`135`	`136`	`return SearchOperator.EQUAL;`
`136`	`137`	`} else {`
	`138`	`+ if (attributeType == DataTypeEnum.TEXT_LIST && searchElement.values.operator == SearchOperator.EQUAL) {`
	`139`	`+ return SearchOperator.CONTAINS;`
	`140`	`+ }`
`137`	`141`	`return searchElement.values.operator;`
`138`	`142`	`}`
`139`	`143`	`}`