@solidxai/core-ui 0.1.13-beta.3 → 0.1.13-beta.5

package/dist/components/core/common/SolidGlobalSearchElement.js

@@ -55,13 +55,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import FilterComponent, { FilterOperator, FilterRuleType } from "../../../components/core/common/FilterComponent";
 import { toTitleCase } from "../../../helpers/helpers";
 import { usePathname } from "../../../hooks/usePathname";
 import { useRouter } from "../../../hooks/useRouter";
 import { useSearchParams } from "../../../hooks/useSearchParams";
-import { getFilterObjectFromLocalStorage } from "./globalSearchPersistence";
+import { clearFilterObjectFromLocalStorage, getFilterObjectFromLocalStorage, } from "./globalSearchPersistence";
 import { createSolidEntityApi } from "../../../redux/api/solidEntityApi";
 import qs from "qs";
 import { SolidSaveCustomFilterForm } from "./SolidSaveCustomFilterForm";
@@ -486,8 +486,11 @@ var extractChips = function (node) {
     }
     return [];
 };
+var areFilterStateValuesEqual = function (left, right) {
+    return JSON.stringify(left !== null && left !== void 0 ? left : null) === JSON.stringify(right !== null && right !== void 0 ? right : null);
+};
 export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     var viewData = _a.viewData, viewType = _a.viewType, handleApplyCustomFilter = _a.handleApplyCustomFilter, showSaveFilterPopup = _a.showSaveFilterPopup, setShowSaveFilterPopup = _a.setShowSaveFilterPopup, filterPredicates = _a.filterPredicates;
     var defaultState = [
         {
@@ -528,7 +531,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     var defaultGroupingRules = [
         { id: 1, fieldName: null, dateGrouping: null }
     ];
-    var _v = useState(defaultState), initialState = _v[0], setInitialState = _v[1];
+    var _x = useState(defaultState), initialState = _x[0], setInitialState = _x[1];
     var pathname = usePathname();
     var searchableEntityLabel = ((_c = (_b = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _b === void 0 ? void 0 : _b.solidView) === null || _c === void 0 ? void 0 : _c.displayName) ||
         ((_f = (_e = (_d = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _d === void 0 ? void 0 : _d.solidView) === null || _e === void 0 ? void 0 : _e.model) === null || _f === void 0 ? void 0 : _f.displayName) ||
@@ -539,42 +542,42 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
     var chipsRef = useRef(null);
     // filterRules is used to maintian the ui of custom filter 
     // customFilter is used to maintian the transformed filter object of custom filter
-    var _w = useState(initialState), filterRules = _w[0], setFilterRules = _w[1];
-    var _x = useState(null), customFilter = _x[0], setCustomFilter = _x[1];
-    var _y = useState([]), fields = _y[0], setFields = _y[1];
-    var _z = useState([]), searchableFields = _z[0], setSearchableFields = _z[1];
-    var _0 = useState([]), groupableFields = _0[0], setGroupableFields = _0[1];
-    var _1 = useState(defaultGroupingRules), groupingRules = _1[0], setGroupingRules = _1[1];
-    var _2 = useState(defaultAggregationRules), aggregationRules = _2[0], setAggregationRules = _2[1];
+    var _y = useState(initialState), filterRules = _y[0], setFilterRules = _y[1];
+    var _z = useState(null), customFilter = _z[0], setCustomFilter = _z[1];
+    var _0 = useState([]), fields = _0[0], setFields = _0[1];
+    var _1 = useState([]), searchableFields = _1[0], setSearchableFields = _1[1];
+    var _2 = useState([]), groupableFields = _2[0], setGroupableFields = _2[1];
+    var _3 = useState(defaultGroupingRules), groupingRules = _3[0], setGroupingRules = _3[1];
+    var _4 = useState(defaultAggregationRules), aggregationRules = _4[0], setAggregationRules = _4[1];
     // used to show the list of predefined searches 
-    var _3 = useState([]), predefinedSearches = _3[0], setPredefinedSearches = _3[1];
+    var _5 = useState([]), predefinedSearches = _5[0], setPredefinedSearches = _5[1];
     // used to open / close the custom fitler popup 
-    var _4 = useState(false), showGlobalSearchElement = _4[0], setShowGlobalSearchElement = _4[1];
+    var _6 = useState(false), showGlobalSearchElement = _6[0], setShowGlobalSearchElement = _6[1];
     // used to open / close the group fitler popup 
-    var _5 = useState(false), showGroupFilterElement = _5[0], setShowGroupFilterElement = _5[1];
+    var _7 = useState(false), showGroupFilterElement = _7[0], setShowGroupFilterElement = _7[1];
     // searchChips maintain the ui to display searched query 
     // searchFilter maintain the transformed filter of the  searched query 
-    var _6 = useState([]), searchChips = _6[0], setSearchChips = _6[1];
-    var _7 = useState(null), searchFilter = _7[0], setSearchFilter = _7[1];
+    var _8 = useState([]), searchChips = _8[0], setSearchChips = _8[1];
+    var _9 = useState(null), searchFilter = _9[0], setSearchFilter = _9[1];
     // predefinedSearchChip maintain the ui to display predefined searches query 
-    var _8 = useState(null), predefinedSearchChip = _8[0], setPredefinedSearchChip = _8[1];
+    var _10 = useState(null), predefinedSearchChip = _10[0], setPredefinedSearchChip = _10[1];
     //  state to maintain the text typed in the search input box
-    var _9 = useState(""), inputValue = _9[0], setInputValue = _9[1];
-    var _10 = useState(-1), focusedIndex = _10[0], setFocusedIndex = _10[1];
+    var _11 = useState(""), inputValue = _11[0], setInputValue = _11[1];
+    var _12 = useState(-1), focusedIndex = _12[0], setFocusedIndex = _12[1];
     // flag to prevent un necessary re renders
-    var _11 = useState(false), hasSearched = _11[0], setHasSearched = _11[1];
+    var _13 = useState(false), hasSearched = _13[0], setHasSearched = _13[1];
     // currentSavedFilterData  is used to save the whole object of saved filter 
-    var _12 = useState(), currentSavedFilterData = _12[0], setCurrentSavedFilterData = _12[1];
-    var _13 = useState(), currentSavedFilterQuery = _13[0], setCurrentSavedFilterQuery = _13[1];
-    var _14 = useState(), currentSavedFilterRules = _14[0], setCurrentSavedFilterRules = _14[1];
-    var _15 = useState(false), showSavedFilterComponent = _15[0], setShowSavedFilterComponent = _15[1];
-    var _16 = useState(), savedFilterTobeDeleted = _16[0], setSavedFilterTobeDeleted = _16[1];
-    var _17 = useState(false), isDeleteSQDialogVisible = _17[0], setIsDeleteSQDialogVisible = _17[1];
-    var _18 = useState(), savedFilterQueryString = _18[0], setSavedFilterQueryString = _18[1];
-    var _19 = useState(false), showOverlay = _19[0], setShowOverlay = _19[1];
+    var _14 = useState(), currentSavedFilterData = _14[0], setCurrentSavedFilterData = _14[1];
+    var _15 = useState(), currentSavedFilterQuery = _15[0], setCurrentSavedFilterQuery = _15[1];
+    var _16 = useState(), currentSavedFilterRules = _16[0], setCurrentSavedFilterRules = _16[1];
+    var _17 = useState(false), showSavedFilterComponent = _17[0], setShowSavedFilterComponent = _17[1];
+    var _18 = useState(), savedFilterTobeDeleted = _18[0], setSavedFilterTobeDeleted = _18[1];
+    var _19 = useState(false), isDeleteSQDialogVisible = _19[0], setIsDeleteSQDialogVisible = _19[1];
+    var _20 = useState(), savedFilterQueryString = _20[0], setSavedFilterQueryString = _20[1];
+    var _21 = useState(false), showOverlay = _21[0], setShowOverlay = _21[1];
     var overlayRef = useRef(null);
     var searchInputRef = useRef(null);
-    var _20 = useState(false), showChipManager = _20[0], setShowChipManager = _20[1];
+    var _22 = useState(false), showChipManager = _22[0], setShowChipManager = _22[1];
     var chipManagerRef = useRef(null);
     var chipManagerTriggerRef = useRef(null);
     var focusSearchInput = function () {
@@ -594,19 +597,19 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             }
         }
     }, [focusedIndex, showOverlay]);
-    var _21 = useSession(), session = _21.data, status = _21.status;
+    var _23 = useSession(), session = _23.data, status = _23.status;
     var user = session === null || session === void 0 ? void 0 : session.user;
-    var _22 = useState(0), refreshKey = _22[0], setRefreshKey = _22[1];
-    var _23 = useState(null), predefinedSearchBaseFilter = _23[0], setPredefinedSearchBaseFilter = _23[1];
-    var _24 = useState([]), savedFilters = _24[0], setSavedFilters = _24[1];
-    var _25 = useState(false), savedFiltersLoaded = _25[0], setSavedFiltersLoaded = _25[1];
+    var _24 = useState(0), refreshKey = _24[0], setRefreshKey = _24[1];
+    var _25 = useState(null), predefinedSearchBaseFilter = _25[0], setPredefinedSearchBaseFilter = _25[1];
+    var _26 = useState([]), savedFilters = _26[0], setSavedFilters = _26[1];
+    var _27 = useState(false), savedFiltersLoaded = _27[0], setSavedFiltersLoaded = _27[1];
     var entityApi = createSolidEntityApi("savedFilters");
     var useCreateSolidEntityMutation = entityApi.useCreateSolidEntityMutation, useDeleteSolidEntityMutation = entityApi.useDeleteSolidEntityMutation, useGetSolidEntityByIdQuery = entityApi.useGetSolidEntityByIdQuery, useUpdateSolidEntityMutation = entityApi.useUpdateSolidEntityMutation, useLazyGetSolidEntitiesQuery = entityApi.useLazyGetSolidEntitiesQuery;
-    var _26 = useCreateSolidEntityMutation(), createEntity = _26[0], _27 = _26[1], isEntityCreateSuccess = _27.isSuccess, isEntityCreateError = _27.isError, entityCreateError = _27.error;
-    var _28 = useUpdateSolidEntityMutation(), updateEntity = _28[0], _29 = _28[1], isEntityUpdateSuceess = _29.isSuccess, isEntityUpdateError = _29.isError, entityUpdateError = _29.error;
-    var _30 = useDeleteSolidEntityMutation(), deleteEntity = _30[0], _31 = _30[1], isEntityDeleteSuceess = _31.isSuccess, isEntityDeleteError = _31.isError, entityDeleteError = _31.error;
-    var _32 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _32[0], _33 = _32[1], solidEntityListViewData = _33.data, isSavedFilterLoading = _33.isLoading, error = _33.error;
-    var _34 = useState(0), savedFilterFetchDataRefreshKey = _34[0], setSavedFilterFetchDataRefreshKey = _34[1];
+    var _28 = useCreateSolidEntityMutation(), createEntity = _28[0], _29 = _28[1], isEntityCreateSuccess = _29.isSuccess, isEntityCreateError = _29.isError, entityCreateError = _29.error;
+    var _30 = useUpdateSolidEntityMutation(), updateEntity = _30[0], _31 = _30[1], isEntityUpdateSuceess = _31.isSuccess, isEntityUpdateError = _31.isError, entityUpdateError = _31.error;
+    var _32 = useDeleteSolidEntityMutation(), deleteEntity = _32[0], _33 = _32[1], isEntityDeleteSuceess = _33.isSuccess, isEntityDeleteError = _33.isError, entityDeleteError = _33.error;
+    var _34 = useLazyGetSolidEntitiesQuery(), triggerGetSolidEntities = _34[0], _35 = _34[1], solidEntityListViewData = _35.data, isSavedFilterLoading = _35.isLoading, error = _35.error;
+    var _36 = useState(0), savedFilterFetchDataRefreshKey = _36[0], setSavedFilterFetchDataRefreshKey = _36[1];
     var buildSavedFilterUrl = function (savedQueryId) {
         var params = new URLSearchParams(searchParams.toString());
         if (savedQueryId === null || savedQueryId === undefined || savedQueryId === "") {
@@ -677,6 +680,61 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         (_l = (_k = (_j = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _j === void 0 ? void 0 : _j.solidView) === null || _k === void 0 ? void 0 : _k.model) === null || _l === void 0 ? void 0 : _l.id,
         user === null || user === void 0 ? void 0 : user.id
     ]);
+    // Updates search, custom filter, grouping, aggregation, and UI state from a single shared filter source.
+    var syncFilterUiStateFromSharedSource = useCallback(function (queryObject) { return __awaiter(void 0, void 0, void 0, function () {
+        var nextSearchFilter, nextSearchChips, nextCustomFilter, nextPredefinedBaseFilter, rules, hydratedRules_1, hasGroupingRules, nextGroupingRules, layoutGroupBy, nextAggregationRules;
+        var _a, _b, _c, _d, _e;
+        return __generator(this, function (_f) {
+            switch (_f.label) {
+                case 0:
+                    nextSearchFilter = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.search_predicate) || null;
+                    nextSearchChips = nextSearchFilter ? extractChips(nextSearchFilter) : [];
+                    nextCustomFilter = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.custom_filter_predicate) && Object.keys(queryObject.custom_filter_predicate).length !== 0
+                        ? queryObject.custom_filter_predicate
+                        : null;
+                    nextPredefinedBaseFilter = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.predefined_search_predicate) || null;
+                    setSearchFilter(function (prev) { return areFilterStateValuesEqual(prev, nextSearchFilter) ? prev : nextSearchFilter; });
+                    setSearchChips(function (prev) { return areFilterStateValuesEqual(prev, nextSearchChips) ? prev : nextSearchChips; });
+                    setCustomFilter(function (prev) { return areFilterStateValuesEqual(prev, nextCustomFilter) ? prev : nextCustomFilter; });
+                    setPredefinedSearchBaseFilter(function (prev) { return areFilterStateValuesEqual(prev, nextPredefinedBaseFilter) ? prev : nextPredefinedBaseFilter; });
+                    if (!(nextCustomFilter && (viewData === null || viewData === void 0 ? void 0 : viewData.data))) return [3 /*break*/, 2];
+                    rules = transformFiltersToRules(nextCustomFilter);
+                    return [4 /*yield*/, hydrateRelationRules([rules], viewData)];
+                case 1:
+                    hydratedRules_1 = _f.sent();
+                    setFilterRules(function (prev) { return areFilterStateValuesEqual(prev, hydratedRules_1) ? prev : hydratedRules_1; });
+                    return [3 /*break*/, 3];
+                case 2:
+                    setFilterRules(function (prev) { return areFilterStateValuesEqual(prev, initialState) ? prev : initialState; });
+                    _f.label = 3;
+                case 3:
+                    hasGroupingRules = (_a = queryObject === null || queryObject === void 0 ? void 0 : queryObject.grouping_rules) === null || _a === void 0 ? void 0 : _a.some(function (rule) { return rule.fieldName !== null; });
+                    nextGroupingRules = [{ id: 1, fieldName: null, dateGrouping: null }];
+                    if (hasGroupingRules) {
+                        nextGroupingRules = queryObject.grouping_rules;
+                    }
+                    else {
+                        layoutGroupBy = (_e = (_d = (_c = (_b = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _b === void 0 ? void 0 : _b.solidView) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.attrs) === null || _e === void 0 ? void 0 : _e.groupBy;
+                        if (Array.isArray(layoutGroupBy) && layoutGroupBy.length > 0) {
+                            nextGroupingRules = layoutGroupBy.map(function (groupStr, index) {
+                                var _a = groupStr.split(":"), fieldName = _a[0], dateGrouping = _a[1];
+                                return {
+                                    id: Date.now() + index,
+                                    fieldName: fieldName || null,
+                                    dateGrouping: dateGrouping || null,
+                                };
+                            });
+                        }
+                    }
+                    nextAggregationRules = Array.isArray(queryObject === null || queryObject === void 0 ? void 0 : queryObject.aggregation_rules) && queryObject.aggregation_rules.length > 0
+                        ? queryObject.aggregation_rules
+                        : [{ id: 1, operator: "count", fieldName: "id", locked: true }];
+                    setGroupingRules(function (prev) { return areFilterStateValuesEqual(prev, nextGroupingRules) ? prev : nextGroupingRules; });
+                    setAggregationRules(function (prev) { return areFilterStateValuesEqual(prev, nextAggregationRules) ? prev : nextAggregationRules; });
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [initialState, viewData]);
     var resetAppliedFilters = function (_a) {
         var _b = _a === void 0 ? {} : _a, _c = _b.preserveGrouping, preserveGrouping = _c === void 0 ? false : _c;
         setSearchChips([]);
@@ -695,8 +753,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         setShowOverlay(false);
         setShowChipManager(false);
         setInputValue("");
-        var currentPageUrl = window.location.pathname;
-        localStorage.removeItem(currentPageUrl);
+        clearFilterObjectFromLocalStorage();
         if (activeSavedFilter) {
             var params = new URLSearchParams(searchParams.toString());
             params.delete("savedQuery");
@@ -722,14 +779,19 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
             setShowGlobalSearchElement(true);
         }
     }); });
+    useEffect(function () {
+        var _a, _b;
+        if (!((_b = (_a = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _a === void 0 ? void 0 : _a.solidView) === null || _b === void 0 ? void 0 : _b.id))
+            return;
+        void syncFilterUiStateFromSharedSource(getFilterObjectFromLocalStorage());
+    }, [syncFilterUiStateFromSharedSource, (_o = (_m = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _m === void 0 ? void 0 : _m.solidView) === null || _o === void 0 ? void 0 : _o.id]);
     useEffect(function () {
         var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var searchChips, customChips, queryObject, currentSavedFilterId_1, currentSavedFilterData_1, filterJson, finalSavedFilter, formattedChips, rules, hydratedRules, hasGroupingRules, layoutGroupBy, initialGroupingRules;
-            var _a, _b, _c, _d, _e;
-            return __generator(this, function (_f) {
-                switch (_f.label) {
+            var queryObject, currentSavedFilterId_1, currentSavedFilterData_1, filterJson, finalSavedFilter;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
                     case 0:
-                        if (!savedFiltersLoaded) return [3 /*break*/, 3];
+                        if (!savedFiltersLoaded) return [3 /*break*/, 2];
                         if (activeSavedFilter && savedFilters.length === 0)
                             return [2 /*return*/];
                         queryObject = getFilterObjectFromLocalStorage();
@@ -750,94 +812,81 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                             setCurrentSavedFilterData(null);
                             setCurrentSavedFilterQuery(null);
                         }
-                        if (queryObject) {
-                            if (queryObject) {
-                                searchChips = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.search_predicate) || null;
-                                customChips = (queryObject === null || queryObject === void 0 ? void 0 : queryObject.custom_filter_predicate) || null;
-                            }
-                        }
-                        if (searchChips) {
-                            setSearchFilter(searchChips);
-                            formattedChips = extractChips(searchChips);
-                            setSearchChips(formattedChips);
-                        }
-                        if (!(customChips && Object.keys(customChips).length !== 0)) return [3 /*break*/, 2];
-                        setCustomFilter(customChips);
-                        rules = transformFiltersToRules(customChips);
-                        return [4 /*yield*/, hydrateRelationRules([rules], viewData)];
+                        // const formattedChips = searchChips?.$and.map((chip: any, key: any) => {
+                        //     const chipKey = Object.keys(chip)[0]; // Get the key, e.g., "displayName"
+                        //     const chipValue = chip[chipKey]?.$containsi; // Get the value of "$containsi"
+                        //     const chipdata = {
+                        //         columnName: chipKey,
+                        //         value: chipValue
+                        //     };
+                        //     return chipdata
+                        // }
+                        // );
+                        // setSearchChips(formattedChips);
+                        return [4 /*yield*/, syncFilterUiStateFromSharedSource(queryObject)];
                     case 1:
-                        hydratedRules = _f.sent();
-                        setFilterRules(hydratedRules);
-                        _f.label = 2;
-                    case 2:
-                        hasGroupingRules = ((_a = queryObject === null || queryObject === void 0 ? void 0 : queryObject.grouping_rules) === null || _a === void 0 ? void 0 : _a.some(function (rule) { return rule.fieldName !== null; }));
-                        if (hasGroupingRules) {
-                            setGroupingRules(queryObject === null || queryObject === void 0 ? void 0 : queryObject.grouping_rules);
-                        }
-                        else {
-                            layoutGroupBy = (_e = (_d = (_c = (_b = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _b === void 0 ? void 0 : _b.solidView) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.attrs) === null || _e === void 0 ? void 0 : _e.groupBy;
-                            if (Array.isArray(layoutGroupBy) && layoutGroupBy.length > 0) {
-                                initialGroupingRules = layoutGroupBy.map(function (groupStr, index) {
-                                    var _a = groupStr.split(":"), fieldName = _a[0], dateGrouping = _a[1];
-                                    return {
-                                        id: Date.now() + index,
-                                        fieldName: fieldName || null,
-                                        dateGrouping: dateGrouping || null
-                                    };
-                                });
-                                setGroupingRules(initialGroupingRules);
-                            }
-                        }
-                        if ((queryObject === null || queryObject === void 0 ? void 0 : queryObject.aggregation_rules) && (queryObject === null || queryObject === void 0 ? void 0 : queryObject.aggregation_rules) !== aggregationRules) {
-                            setAggregationRules(queryObject === null || queryObject === void 0 ? void 0 : queryObject.aggregation_rules);
-                        }
+                        // const formattedChips = searchChips?.$and.map((chip: any, key: any) => {
+                        //     const chipKey = Object.keys(chip)[0]; // Get the key, e.g., "displayName"
+                        //     const chipValue = chip[chipKey]?.$containsi; // Get the value of "$containsi"
+                        //     const chipdata = {
+                        //         columnName: chipKey,
+                        //         value: chipValue
+                        //     };
+                        //     return chipdata
+                        // }
+                        // );
+                        // setSearchChips(formattedChips);
+                        _a.sent();
                         setRefreshKey(function (prev) { return prev + 1; });
                         setHasSearched(true);
-                        _f.label = 3;
-                    case 3: return [2 /*return*/];
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
                 }
             });
         }); };
         fn();
-    }, [(_o = (_m = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _m === void 0 ? void 0 : _m.solidView) === null || _o === void 0 ? void 0 : _o.id, activeSavedFilter, savedFiltersLoaded]);
+    }, [activeSavedFilter, savedFilters, savedFiltersLoaded, syncFilterUiStateFromSharedSource, (_q = (_p = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _p === void 0 ? void 0 : _p.solidView) === null || _q === void 0 ? void 0 : _q.id]);
     useEffect(function () {
         var fn = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var rules, hydratedRules, formattedChips;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        if (!filterPredicates) return [3 /*break*/, 3];
-                        if (!((filterPredicates === null || filterPredicates === void 0 ? void 0 : filterPredicates.custom_filter_predicate) && (filterPredicates === null || filterPredicates === void 0 ? void 0 : filterPredicates.custom_filter_predicate) !== customFilter)) return [3 /*break*/, 2];
-                        setCustomFilter(filterPredicates === null || filterPredicates === void 0 ? void 0 : filterPredicates.custom_filter_predicate);
-                        rules = transformFiltersToRules(filterPredicates.custom_filter_predicate);
-                        return [4 /*yield*/, hydrateRelationRules([rules], viewData)];
+                        if (!(filterPredicates !== undefined && filterPredicates !== null)) return [3 /*break*/, 2];
+                        // const formattedChips = filterPredicates.search_predicate?.$and.map((chip: any, key: any) => {
+                        //     const chipKey = Object.keys(chip)[0]; // Get the key, e.g., "displayName"
+                        //     const chipValue = chip[chipKey]?.$containsi; // Get the value of "$containsi"
+                        //     const chipdata = {
+                        //         columnName: chipKey,
+                        //         value: chipValue
+                        //     };
+                        //     return chipdata
+                        // }
+                        // );
+                        // setSearchChips(formattedChips);
+                        return [4 /*yield*/, syncFilterUiStateFromSharedSource(filterPredicates)];
                     case 1:
-                        hydratedRules = _a.sent();
-                        setFilterRules(hydratedRules);
+                        // const formattedChips = filterPredicates.search_predicate?.$and.map((chip: any, key: any) => {
+                        //     const chipKey = Object.keys(chip)[0]; // Get the key, e.g., "displayName"
+                        //     const chipValue = chip[chipKey]?.$containsi; // Get the value of "$containsi"
+                        //     const chipdata = {
+                        //         columnName: chipKey,
+                        //         value: chipValue
+                        //     };
+                        //     return chipdata
+                        // }
+                        // );
+                        // setSearchChips(formattedChips);
+                        _a.sent();
                         _a.label = 2;
-                    case 2:
-                        if ((filterPredicates === null || filterPredicates === void 0 ? void 0 : filterPredicates.search_predicate) && (filterPredicates === null || filterPredicates === void 0 ? void 0 : filterPredicates.search_predicate) !== searchFilter) {
-                            setSearchFilter(filterPredicates === null || filterPredicates === void 0 ? void 0 : filterPredicates.search_predicate);
-                            formattedChips = extractChips(filterPredicates.search_predicate);
-                            setSearchChips(formattedChips);
-                        }
-                        _a.label = 3;
-                    case 3: return [2 /*return*/];
+                    case 2: return [2 /*return*/];
                 }
             });
         }); };
         fn();
-    }, [filterPredicates]);
+    }, [filterPredicates, syncFilterUiStateFromSharedSource]);
     useEffect(function () {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         if ((_a = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _a === void 0 ? void 0 : _a.solidFieldsMetadata) {
-            // Reset search state when switching views
-            setSearchChips([]);
-            setSearchFilter(null);
-            setFilterRules(initialState);
-            setCustomFilter(null);
-            setPredefinedSearchChip(null);
-            setPredefinedSearchBaseFilter(null);
             setInputValue("");
             var fieldsData_1 = (_b = viewData === null || viewData === void 0 ? void 0 : viewData.data) === null || _b === void 0 ? void 0 : _b.solidFieldsMetadata;
             // console.log(`fiels data while rendering solid global search element: `);
@@ -1163,7 +1212,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         });
     }); };
     var handleSaveFilter = function (formValues) { return __awaiter(void 0, void 0, void 0, function () {
-        var filterJson, formData, currentPageUrl, filterJson, formData, result_1, currentPageUrl, error_1;
+        var filterJson, formData, filterJson, formData, result_1, error_1;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return __generator(this, function (_l) {
             switch (_l.label) {
@@ -1189,9 +1238,8 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     setFilterRules(initialState);
                     setCustomFilter(null);
                     setPredefinedSearchChip(null);
-                    currentPageUrl = window.location.pathname;
-                    localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
                     setPredefinedSearchBaseFilter(null);
+                    clearFilterObjectFromLocalStorage();
                     setTimeout(function () {
                         router.push(buildSavedFilterUrl(formValues.id));
                     }, 500);
@@ -1214,8 +1262,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                     setCustomFilter(null);
                     setPredefinedSearchChip(null);
                     setPredefinedSearchBaseFilter(null);
-                    currentPageUrl = window.location.pathname;
-                    localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
+                    clearFilterObjectFromLocalStorage();
                     setTimeout(function () {
                         router.push(buildSavedFilterUrl(result_1.data.id));
                     }, 500);
@@ -1275,8 +1322,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         setCustomFilter(null);
         setPredefinedSearchChip(null);
         setPredefinedSearchBaseFilter(null);
-        var currentPageUrl = window.location.pathname; // Get the current page URL
-        localStorage.removeItem(currentPageUrl); // Store in local storage with the URL as the key
+        clearFilterObjectFromLocalStorage();
         // push the savedQuery=1 in url 
         if (savedfilter === null || savedfilter === void 0 ? void 0 : savedfilter.id) {
             router.push(buildSavedFilterUrl(savedfilter.id));
@@ -1342,7 +1388,7 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         acc[key].push(chip.value);
         return acc;
     }, {});
-    var customRuleCount = (_s = (_q = (_p = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$or) === null || _p === void 0 ? void 0 : _p.length) !== null && _q !== void 0 ? _q : (_r = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$and) === null || _r === void 0 ? void 0 : _r.length) !== null && _s !== void 0 ? _s : Object.keys(customFilter || {}).length;
+    var customRuleCount = (_u = (_s = (_r = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$or) === null || _r === void 0 ? void 0 : _r.length) !== null && _s !== void 0 ? _s : (_t = customFilter === null || customFilter === void 0 ? void 0 : customFilter.$and) === null || _t === void 0 ? void 0 : _t.length) !== null && _u !== void 0 ? _u : Object.keys(customFilter || {}).length;
     var managedChipItems = useMemo(function () {
         var items = [];
         if (currentSavedFilterData === null || currentSavedFilterData === void 0 ? void 0 : currentSavedFilterData.name) {
@@ -1484,7 +1530,9 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
         if (e.key === "Enter") {
             if (currentValue || focusedIndex >= 0) {
                 e.preventDefault();
-                var activeOption = overlayOptions[focusedIndex] || (currentValue ? overlayOptions[0] : null);
+                var activeOption = overlayOptions[focusedIndex] || (currentValue
+                    ? overlayOptions.find(function (option) { return option.kind === "field" || option.kind === "predefined"; })
+                    : null);
                 if ((activeOption === null || activeOption === void 0 ? void 0 : activeOption.kind) === "field") {
                     applyFieldOption(activeOption.field);
                 }
@@ -1634,11 +1682,11 @@ export var SolidGlobalSearchElement = forwardRef(function (_a, ref) {
                                                                 if (optIndex !== -1)
                                                                     setFocusedIndex(optIndex);
                                                             } }, savedfilter.id));
-                                                    }) })] }) })] }), _jsxs("div", { className: "solid-search-overlay-footer", children: [_jsx("button", { type: "button", className: "flex flex-col px-3 py-2 solid-search-overlay-footer-action ".concat(((_t = overlayOptions[focusedIndex]) === null || _t === void 0 ? void 0 : _t.id) === "footer:custom" ? "solid-search-overlay-option-active" : ""), onClick: openCustomFilterDialog, onMouseEnter: function () {
+                                                    }) })] }) })] }), _jsxs("div", { className: "solid-search-overlay-footer", children: [_jsx("button", { type: "button", className: "flex flex-col px-3 py-2 solid-search-overlay-footer-action ".concat(((_v = overlayOptions[focusedIndex]) === null || _v === void 0 ? void 0 : _v.id) === "footer:custom" ? "solid-search-overlay-option-active" : ""), onClick: openCustomFilterDialog, onMouseEnter: function () {
                                         var optIndex = overlayOptions.findIndex(function (o) { return o.id === "footer:custom"; });
                                         if (optIndex !== -1)
                                             setFocusedIndex(optIndex);
-                                    }, children: _jsxs("div", { className: "solid-search-overlay-footer-action-main", children: [_jsx("div", { className: "solid-search-overlay-panel-callout-icon", children: _jsx(Filter, { size: 14 }) }), _jsxs("div", { className: "solid-search-overlay-panel-callout-copy", children: [_jsx("div", { className: "solid-search-overlay-footer-title solid-search-overlay-section-title", children: "Click here to apply custom filters" }), _jsx("div", { className: "solid-search-overlay-footer-subtitle", children: "Use custom filters to apply conditions on any field using any operator." })] })] }) }), viewType === "tree" && (_jsx("button", { type: "button", className: "flex flex-col px-3 py-2 solid-search-overlay-footer-action solid-search-overlay-footer-action-secondary ".concat(((_u = overlayOptions[focusedIndex]) === null || _u === void 0 ? void 0 : _u.id) === "footer:grouping" ? "solid-search-overlay-option-active" : ""), onClick: openGroupingDialog, onMouseEnter: function () {
+                                    }, children: _jsxs("div", { className: "solid-search-overlay-footer-action-main", children: [_jsx("div", { className: "solid-search-overlay-panel-callout-icon", children: _jsx(Filter, { size: 14 }) }), _jsxs("div", { className: "solid-search-overlay-panel-callout-copy", children: [_jsx("div", { className: "solid-search-overlay-footer-title solid-search-overlay-section-title", children: "Click here to apply custom filters" }), _jsx("div", { className: "solid-search-overlay-footer-subtitle", children: "Use custom filters to apply conditions on any field using any operator." })] })] }) }), viewType === "tree" && (_jsx("button", { type: "button", className: "flex flex-col px-3 py-2 solid-search-overlay-footer-action solid-search-overlay-footer-action-secondary ".concat(((_w = overlayOptions[focusedIndex]) === null || _w === void 0 ? void 0 : _w.id) === "footer:grouping" ? "solid-search-overlay-option-active" : ""), onClick: openGroupingDialog, onMouseEnter: function () {
                                         var optIndex = overlayOptions.findIndex(function (o) { return o.id === "footer:grouping"; });
                                         if (optIndex !== -1)
                                             setFocusedIndex(optIndex);