ebta-workflow-prod 1.1.2 → 4.0.1

package/src/elements/AttributeFilter.tsx

@@ -0,0 +1,1867 @@
+/* eslint-disable prefer-const */
+import * as React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import IconButton from '@vertigis/web/ui/IconButton';
+import { Clear as ClearIcon } from '@mui/icons-material';
+import List from '@vertigis/web/ui/List';
+import ListItemButton from '@vertigis/web/ui/ListItemButton';
+import ListItemIcon from '@vertigis/web/ui/ListItemIcon';
+import ListItemText from '@vertigis/web/ui/ListItemText';
+import Collapse from '@vertigis/web/ui/Collapse';
+import FolderOpenIcon from '@mui/icons-material/FolderOpen';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import SearchIcon from '@vertigis/web/ui/icons/Search';
+import Box from "@vertigis/web/ui/Box"
+import Checkbox from "@vertigis/web/ui/Checkbox"
+import { ThemeProvider } from "@emotion/react";
+import Typography from '@vertigis/web/ui/Typography';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
+import dayjs, { Dayjs } from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import 'dayjs/locale/en-au';
+import Chip from '@mui/material/Chip';
+import Button from '@vertigis/web/ui/Button';
+import Radio from '@vertigis/web/ui/Radio';
+import RadioGroup from '@vertigis/web/ui/RadioGroup';
+import FormControlLabel from '@vertigis/web/ui/FormControlLabel';
+import AttributeFilterEasyComp from './modules/AttributeFilterEasyComp';
+import Stack from '@vertigis/web/ui/Stack';
+import Graphic from "esri/Graphic";
+const { Search, SearchIconWrapper, StyledInputBase, StyledBadge, LightTooltip, defaultTheme, CustomNumberInput } = AttributeFilterEasyComp;
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
+/**
+ * The generic type argument provided to `FormElementProps<T>` controls the type
+ * of `props.value` and `props.setValue(value)`. If your element doesn't need a
+ * `value`, you can omit the type argument.
+ *
+ * You can also declare additional public properties of your element by adding
+ * properties to this interface. The properties will be managed by the Workflow
+ * runtime, and passed in as `props`. You can update the properties by using
+ * `props.setProperty(key, value)`.
+ */
+interface AttributeFilterProps extends FormElementProps<string> {
+    features?: Graphic[],//Provide when local query rather web query
+    fields: {
+        name: string;
+        alias: string;
+        type: string;
+        [key: string]: any;
+    }[],
+    dataOld?: Attribute[],
+    //field names & type only at beginning
+    openedAttribute?: { data: Attribute, timestamp: number },
+    //Data communication purpose
+    newSum?: { sum: number, attri: string, timestamp: number },
+    //Data communication purpose
+    buttonNaming?: string[],
+    //List of buttons, if name ends with () will show summary number. Except first button, always has () ,and will be apply if this prop not given. If the button is enabled only when there is selection, put <> at end
+    //    allFeatures?: object[]
+    //GRAPHICS TO BE HERE
+    footerButton?: boolean,//if true, use the button of default form footer
+    request?: { requestName: string, timestamp: number },
+    //Following attributes are for keep property in Vertigis only when switching tab
+    searchQuery: string;
+    attributeList?: string[],
+    data: Attribute[];
+    searchValue: string;
+    summary: number;
+    sqlRule: string;
+    allButtonText: string;
+    rule: string;
+    layerName: string;
+    minValue: number;
+    maxValue: number;
+    startDate: Dayjs;
+    endDate: Dayjs;
+    filteredValues: fieldValue[];
+}
+
+interface fieldValue {
+    value: string,
+    count: number
+}
+interface Attribute {
+    name: string,
+    alias?: string,
+    type?: string,
+    uniqValue?: fieldValue[],
+    display?: boolean,
+    img?: string,
+    visible?: boolean,
+    selection?: string[],
+    timeType?: string,
+    hidden?: boolean,
+}
+
+/**
+ * Provide strictly structured item data to display them and search.
+ * @displayName AttributeFilter
+ * @description For any layer, dynamicly build your SQL query based on all attributes.
+ * @param props Should provide strictly structured Data/openedAttribute
+*/
+
+
+
+
+function AttributeFilter(props: AttributeFilterProps): React.ReactElement {
+
+    const defaultNumber = 4
+    const { raiseEvent, searchQuery, data, searchValue, summary, minValue, maxValue, filteredValues,
+        startDate, endDate, sqlRule, allButtonText, rule, layerName, setProperty } = props;
+    const defaultStart = dayjs('2020-01-01')
+    const defaultEnd = dayjs('2050-01-01')
+
+
+
+    const prevSearchValue = React.useRef<string>('')
+    const openAttriName = React.useRef('')
+    const tickedBeforeNewQuery = React.useRef<string[] | undefined>(undefined)
+    const openAttriValues = React.useRef<Attribute | null>(null);
+    const openAttriTime = React.useRef<number | null>(null);
+    const requestTime = React.useRef<number | null>(null);
+    const numberRecord = React.useRef<Record<string, number>>({});
+    const tempSummary = React.useRef(0)
+    const prevSum = React.useRef<{ sum: number, attri: string, timestamp: number } | undefined>(undefined)
+    const tempPreviousSummary = React.useRef(0)
+    const minDate = React.useRef(946700187)
+    const maxDate = React.useRef(2209004187)
+    //const [filteredValues, setFilteredValues] = React.useState<fieldValue[]>([]); // New state for filtered data
+    const [showAll, setShowAll] = React.useState(false);
+    // const [minValue, setMinValue] = React.useState<number>(-Infinity)
+    // const [maxValue, setMaxValue] = React.useState<number>(Infinity)
+    // const [startDate, setStartDate] = React.useState<Dayjs>(defaultStart)
+    // const [endDate, setEndDate] = React.useState<Dayjs>(defaultEnd)
+    const [folderOpen, setFolderOpen] = React.useState(false);
+    const stickyStyle = {
+        position: 'sticky' as const,
+        top: 0,
+        zIndex: 1000,
+        backgroundColor: 'var(--primaryBackground)'
+    };
+
+
+    const attributeList: string[] = React.useMemo(() => {
+        return props.attributeList || props.fields.map(a => a.name)
+    },
+        [props.attributeList, props.fields])
+
+
+    const RawOriginalData: Attribute[] = React.useMemo(() => {
+        if (!props.features) return [];
+        return features2Data(props.features, attributeList) || [];
+        function features2Data(features: Graphic[], shortListOfAttributes: string[]): Attribute[] {
+            // Create an object to store the statistical summary for each attribute
+            const attributeSummary: { [key: string]: { [value: string]: number } } = {};
+
+            // Iterate through the features array
+            features.forEach((feature) => {
+                // Iterate through each attribute in the 'attributes' object of the feature
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                for (const [key, value] of Object.entries(feature.attributes)) {
+                    // Check if the attribute is in the short list
+                    if (shortListOfAttributes.includes(key)) {
+                        // If it's not already in the attributeSummary, initialize it
+                        if (!attributeSummary[key]) {
+                            attributeSummary[key] = {};
+                        }
+                        let valueKey
+                        if (props.fields.find(obj => obj.name == key)?.type == "date" && Number(value) > 0) {
+                            valueKey = dayjs.unix(Number(value) / 1000).format("DD/MM/YYYY")
+                        }
+                        // Count the occurrence of each value for the attribute
+                        else { valueKey = String(value); }
+                        if (!attributeSummary[key][valueKey]) {
+                            attributeSummary[key][valueKey] = 0;
+                        }
+                        attributeSummary[key][valueKey]++;
+                    }
+                }
+            });
+
+            // Now we need to structure the data according to the `Attribute` interface
+            const result: Attribute[] = [];
+
+            // Convert the summary into the desired format
+            for (const [attributeName, valueCountMap] of Object.entries(attributeSummary)) {
+                const uniqValues: fieldValue[] = Object.entries(valueCountMap).map(([value, count]) => ({
+                    value: value,
+                    count: count,
+                }));
+
+                // Create the Attribute object
+                const attribute: Attribute = {
+                    name: attributeName,
+                    uniqValue: uniqValues,
+                };
+                result.push(attribute);
+            }
+            return result;
+        }
+    },
+        [attributeList, props.features, props.fields])
+
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    const originalData: Attribute[] = React.useMemo(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        let result = props.fields.filter(obj => !attributeList || attributeList.length === 0 || attributeList.includes(obj.name)) // Filter only if nameList is valid
+            .filter(obj => {
+                if (RawOriginalData.length==0){return true}
+                let matchingRawDataValues = RawOriginalData.find(item => item.name === obj.name)?.uniqValue;
+                let meanless = ['{}', ' ', 'null']
+                return (matchingRawDataValues && matchingRawDataValues.length > 0 && !meanless.includes(matchingRawDataValues[0].value))
+            })
+            .map(obj => {
+                let newObj: Attribute = { name: obj.name };
+                if (obj.alias) {
+                    newObj.alias = obj.alias;
+                }
+                if (obj.type !== "string") {
+                    newObj.type = obj.type;
+                }
+                newObj.visible = true;
+                newObj.display = false;
+                if (RawOriginalData?.length > 0) {
+                    let matchingRawData = RawOriginalData.find(item => item.name === obj.name);
+                    if (matchingRawData && matchingRawData.uniqValue) {
+                        matchingRawData.uniqValue.sort((a, b) => {
+                            if (a.count === b.count) {
+                                return a.value.localeCompare(b.value);
+                            }
+                            return b.count - a.count;
+                        });
+                        newObj.uniqValue = matchingRawData.uniqValue;
+                    }
+                }
+                return newObj;
+            });
+        return result;
+    }, [RawOriginalData, attributeList, props.fields])
+
+
+    const DataRef = React.useRef<Attribute[]>(originalData)
+
+    const recordTable: object[] = React.useMemo(() => {
+        return props.features?.map(feature => {
+            const filteredAttributes = {};
+            for (const key of attributeList) {
+                if (key in feature.attributes) {
+                    filteredAttributes[key] = originalData.find(attri => attri.name === key)?.type == 'date' ? epoch2MelbDate(Number(feature.attributes[key]) / 1000) : feature.attributes[key];
+                }
+            }
+            return filteredAttributes;
+        }) || [];
+    },
+        [attributeList, originalData, props.features])
+
+
+    if (data === undefined) {
+        setProperty("data" as any, originalData);
+    }
+
+    const findEarliestAndLatestDatesForAttribute = (attribute: Attribute) => {
+        if (attribute.type !== "date") {
+            // Return null if the attribute is not of type 'date'
+            return null;
+        }
+
+        let earliestDate: number, latestDate: number
+        if (attribute.uniqValue && Number(attribute.uniqValue[0].value) && Number(attribute.uniqValue[0].value) > 0) {
+            const values = attribute.uniqValue.map(obj => Number(obj.value));
+            earliestDate = Math.min(...values);
+            latestDate = Math.max(...values);
+        }
+        else {
+            const dates = attribute.uniqValue?.map((entry) => entry.value) || []; // Extract date strings
+
+            // Convert to Date objects for comparison
+            const dateObjects: Date[] = dates.map((date) => {
+                const [day, month, year] = date.split('/').map(Number);
+                return new Date(year, month - 1, day); // JS months are 0-indexed
+            });
+
+            // Find the earliest and latest dates by converting to numeric timestamps
+            earliestDate = Math.min(...dateObjects.map((date) => date.getTime()));
+            latestDate = Math.max(...dateObjects.map((date) => date.getTime()));
+        }
+
+
+        // Return results as epoch time numbers
+        return {
+            name: attribute.name,
+            earliest: earliestDate,
+            latest: latestDate,
+        }
+    };
+
+    // Handle search input changes
+    const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setProperty("searchQuery" as any, event.target.value); // Update search query
+    };
+
+    function layerNameCreator(data: Attribute[], sqlConnector: string) {
+        const clauses = data.map((attribute) => {
+            if (attribute.selection && attribute.selection.length > 0) {
+                const values = attribute.selection.join(',');
+                return `${attribute.name}: ${values}`;
+            }
+            return null;
+        }).filter(clause => clause !== null);
+
+        const result = clauses.join(` ${sqlConnector == 'AND' ? "&" : "+"} `);
+        return result
+    }
+
+    function IsOtherRulesEmpty(specificAttributeName: string) {
+        return data && data.every(attribute => {
+            if (attribute.name === specificAttributeName) {
+                return true;
+            }
+            return (!attribute.selection || attribute.selection.length == 0)
+        });
+    }
+
+    const handleSqlRule = (event: React.ChangeEvent<HTMLInputElement>) => {
+        //openAttriName.current = ''
+        setProperty("sqlRule" as any, (event.target as HTMLInputElement).value);
+        const allSelectionsEmpty = data && data.every(attribute =>
+            attribute.selection === null ||
+            attribute.selection === undefined ||
+            (Array.isArray(attribute.selection) && attribute.selection.length === 0)
+        );
+        if (allSelectionsEmpty) { return }
+
+        if ((event.target as HTMLInputElement).value == 'OR') {
+            //converting from AND to OR,   
+            //1. summary needs to be recaculated from backend OR engine, and get a larger number
+            //2. if any atttribute is displayed, get original uniq values and re-render
+
+            if (summary !== 0) {
+                if (recordTable !== undefined && recordTable.length > 0) {
+                    const newCount = filterFeatures(recordTable, data, 'OR').length
+                    setProperty("summary" as any, newCount)
+                }
+                else {
+                    raiseEvent("clicked", JSON.stringify({ request: 'sumOnly', rule: generateSQLSummary(data, 'OR') }))
+                }
+            }
+
+            if (openAttriName.current !== '') {
+                if (recordTable !== undefined && recordTable.length > 0) {
+                    localDisplayLayer(originalData.find(obj => obj.name == openAttriName.current) || data[0], undefined, true)
+                }
+                else {
+                    raiseEvent("clicked", JSON.stringify({ request: 'displayLayer', value: openAttriName.current, rule: '1=1' }));
+                }
+
+            }
+        }
+        else {
+            //converting from OR to AND,   
+            //1. get new sum 
+            //2. if some attri open, reload unqivalues
+            if (openAttriName.current == '') {
+                if (summary !== 0 || !allSelectionsEmpty) {
+                    if (recordTable !== undefined && recordTable.length > 0) {
+                        const newCount = filterFeatures(recordTable, data, 'AND').length
+                        setProperty("summary" as any, newCount)
+                    }
+                    else {
+                        raiseEvent("clicked", JSON.stringify({ request: 'sumOnly', rule: generateSQLSummary(data, 'AND') }))
+                    }
+                }
+            }
+            else {
+                if (recordTable !== undefined && recordTable.length > 0) {
+                    localDisplayLayer(data?.find(obj => obj.name == openAttriName.current) || data[0], undefined, false, 'AND')
+                }
+                else {
+                    raiseEvent("clicked", JSON.stringify({ request: 'displayLayer', value: openAttriName.current, rule: generateSQLSummary(data, 'AND', openAttriName.current) }))
+                }
+
+                if (summary !== 0 || !allSelectionsEmpty) {
+                    if (recordTable !== undefined && recordTable.length > 0) {
+                        const newCount = filterFeatures(recordTable, data, 'AND').length
+                        setProperty("summary" as any, newCount)
+                    }
+                    else {
+                        raiseEvent("clicked", JSON.stringify({ request: 'sumOnly', rule: generateSQLSummary(data, 'AND') }))
+                    }
+                }
+            }
+        }
+
+        raiseEvent("clicked", JSON.stringify({ request: 'updateMap', rule: generateSQLSummary(data, (event.target as HTMLInputElement).value) }))
+    };
+
+    // const handleSearchValueChange = (attri:Attribute,event: React.ChangeEvent<HTMLInputElement>) => {
+    const handleSearchValueChange = (attri: Attribute, event: React.ChangeEvent<HTMLInputElement>) => {
+        // setProperty("searchValue" as any,event.target.value); // Update search query
+        if (event.target.value) {
+            const searchValueResults = filterValue(attri, event.target.value);
+            setProperty("filteredValues" as any, searchValueResults)
+            setProperty("searchValue" as any, event.target.value)
+        }
+        else {
+            setProperty("searchValue" as any, event.target.value)
+            setProperty("filteredValues" as any, [])
+        }
+    };
+
+    const handleSelectAll = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, attributeName: string) => {
+        event.stopPropagation(); // Prevents the ListItemButton click event
+        const selectAll = (allButtonText == 'Select All')
+        const newText = selectAll ? 'Deselect All' : 'Select All'
+        setProperty("allButtonText" as any, newText)
+        const dataCopy = structuredClone(data)
+        let updatedDataCopy: Attribute[]
+        if (selectAll) {
+            if (filteredValues.length > 0) {
+                //select all search result
+                updatedDataCopy = dataCopy.map((attribute) => {
+                    if (attribute.name === attributeName) {
+                        const filteredValuesSet = new Set(filteredValues.map(item => item.value));
+                        const allValues = attribute.uniqValue
+                            ?.filter(item => filteredValuesSet.has(item.value))
+                            .map(item => item.value) || [];
+
+                        const totalCount = attribute.uniqValue?.reduce((sum, item) => {
+                            return (!attribute.selection?.includes(item.value) && filteredValuesSet.has(item.value)) ? sum + (item.count || 0) : sum;
+                        }, 0) || 0;
+                        if (sqlRule == 'AND') {
+
+                            const result = (attribute.selection && attribute.selection.length > 0) ?
+                                (summary + totalCount) : IsOtherRulesEmpty(attributeName) ? totalCount : Math.min(summary, totalCount)
+                            tempSummary.current = result
+                            setProperty("summary" as any, result);
+                            numberRecord.current[attributeName] = tempSummary.current
+                        }
+                        else {
+                            tempSummary.current = Math.max(summary, totalCount)
+                            const newSummary = Math.max(summary, totalCount)
+                            setProperty("summary" as any, newSummary)
+                            numberRecord.current[attributeName] = tempSummary.current
+                        }
+                        return {
+                            ...attribute,
+                            selection: Array.from(new Set([...(allValues ?? []), ...(attribute.selection ?? [])])),
+                        };
+                    }
+                    return attribute;
+                })
+
+                setProperty("data" as any, updatedDataCopy);
+            }
+            else {
+                //No search or range -  real select all
+                updatedDataCopy = dataCopy.map((attribute) => {
+                    if (attribute.name === attributeName) {
+                        const allValues = attribute.uniqValue?.map((item) => item.value) || [];
+
+                        const totalCount = attribute.uniqValue?.reduce((sum, obj) => sum + obj.count, 0) || 0;
+
+                        if (IsOtherRulesEmpty(attributeName) || sqlRule == 'AND') {
+                            tempSummary.current = totalCount
+                            setProperty("summary" as any, totalCount);
+                        }
+                        else if (!IsOtherRulesEmpty(attributeName)) {
+                            if (recordTable !== undefined && recordTable.length > 0) {
+                                const newCount = filterFeatures(recordTable, data, sqlRule).length
+                                setProperty("summary" as any, newCount)
+                            }
+                            else {
+                                raiseEvent("clicked", JSON.stringify({ request: 'sumOnly', rule: generateSQLSummary(data, sqlRule) }))
+                            }
+                        }
+
+                        return {
+                            ...attribute,
+                            selection: allValues,
+                        };
+                    }
+                    return attribute;
+                })
+
+                setProperty("data" as any, updatedDataCopy);
+            }
+            raiseEvent("clicked", JSON.stringify({ request: 'updateMap', rule: generateSQLSummary(updatedDataCopy, sqlRule) }))
+        }
+        else {
+            if (filteredValues.length > 0) {
+
+                const filteredValuesSet = new Set(filteredValues.map(item => item.value));
+
+                updatedDataCopy = dataCopy.map((attribute) => {
+                    if (attribute.name === attributeName) {
+                        const totalCount = attribute.uniqValue?.reduce((sum, item) => {
+                            return (filteredValuesSet.has(item.value) && attribute.selection?.includes(item.value)) ? sum + (item.count || 0) : sum;
+                        }, 0) || 0;
+
+                        if (!IsOtherRulesEmpty(attributeName) && sqlRule == 'AND' && totalCount == summary) {
+                            setProperty("summary" as any, tempPreviousSummary.current)
+                            numberRecord.current[attributeName] = tempSummary.current
+                        }
+                        else {
+                            tempSummary.current = summary - totalCount
+                            const newSummary = summary - totalCount
+                            setProperty("summary" as any, newSummary)
+                            numberRecord.current[attributeName] = tempSummary.current
+                        }
+                        return {
+                            ...attribute,
+                            selection: attribute.selection?.filter(item => !filteredValuesSet.has(item)) || [],
+                        };
+                    }
+                    return attribute;
+                })
+
+                setProperty("data" as any, updatedDataCopy);
+                if (generateSQLSummary(data, sqlRule, attributeName) == '1=1') {
+                    tempSummary.current = 0;
+                    tempPreviousSummary.current = 0;
+                }
+                else {
+                    if (recordTable !== undefined && recordTable.length > 0) {
+                        const newCount = filterFeatures(recordTable, updatedDataCopy, sqlRule).length
+                        setProperty("summary" as any, newCount)
+                    }
+                    else {
+                        raiseEvent("clicked", JSON.stringify({ request: 'sumOnly', rule: generateSQLSummary(updatedDataCopy, sqlRule) }))
+                    }
+                }
+                raiseEvent("clicked", JSON.stringify({ request: 'updateMap', rule: generateSQLSummary(updatedDataCopy, sqlRule, attributeName) }))
+            }
+            else {
+                deleteSelection(data?.find(attri => attri.name == attributeName) || data[0])
+                raiseEvent("clicked", JSON.stringify({ request: 'updateMap', rule: generateSQLSummary(data, sqlRule, attributeName) }))
+            }
+        }
+    };
+
+    const handleBtnClick = (requestName: string) => {
+        raiseEvent("clicked", JSON.stringify({ request: requestName, rule: generateSQLSummary(data, sqlRule), layerName: layerNameCreator(data, sqlRule) }))
+    }
+
+    const handleClearRulesClick = () => {
+        const updatedData = data?.map((attribute) => {
+            if (attribute.selection && attribute.selection.length > 0) {
+                attribute.selection = undefined
+            }
+            return attribute
+        }
+        )
+        setProperty("data" as any, updatedData);
+        setProperty("summary" as any, 0)
+        raiseEvent("clicked", JSON.stringify({ request: 'Clear' }))
+        if (recordTable !== undefined && recordTable.length > 0) {
+            const updateCopy = originalData.map((attribute) => {
+                if (attribute.name == openAttriName.current) {
+                    attribute.display = true
+                }
+                else {
+                    attribute.display = false
+                }
+                return attribute
+            })
+            setProperty("data" as any, updateCopy)
+        }
+    }
+
+    // Handle click on items to raise an event
+    const handleItemClick = (currentAttribute: Attribute, fieldValue: fieldValue) => {
+        const dataCopy = structuredClone(data)
+        const updatedDataCopy = dataCopy.map((attribute) => {
+            if (currentAttribute.name === attribute.name) {
+                const isSelected = attribute.selection?.includes(fieldValue.value);
+                return {
+                    ...attribute,
+                    selection: isSelected
+                        ? (attribute.selection || []).filter((value) => value !== fieldValue.value)
+                        : [...(attribute.selection || []), fieldValue.value]
+                };
+            }
+            return attribute;
+        });
+        setProperty("data" as any, updatedDataCopy);
+
+        if (sqlRule == 'AND') {
+            if (!IsOtherRulesEmpty(currentAttribute.name)) {
+                if (!currentAttribute.selection || currentAttribute.selection.length == 0) {
+                    tempSummary.current = 0
+                }
+                if (currentAttribute.selection?.includes(fieldValue.value)) {
+                    tempSummary.current -= fieldValue.count
+
+                    setProperty("summary" as any, tempSummary.current == 0 ? tempPreviousSummary.current : tempSummary.current);
+                    numberRecord.current[currentAttribute.name] = tempSummary.current
+                }
+                else {
+                    tempSummary.current += fieldValue.count
+                    setProperty("summary" as any, tempSummary.current);
+                    numberRecord.current[currentAttribute.name] = tempSummary.current
+                }
+            }
+            else {
+                if (currentAttribute.selection?.includes(fieldValue.value)) {
+                    tempSummary.current = summary - fieldValue.count
+                    setProperty("summary" as any, summary - fieldValue.count);
+                    numberRecord.current[currentAttribute.name] = tempSummary.current
+                }
+                else {
+                    tempSummary.current = summary + fieldValue.count
+                    setProperty("summary" as any, summary + fieldValue.count);
+                    numberRecord.current[currentAttribute.name] = tempSummary.current
+                }
+            }
+        }
+        else {
+            if (recordTable !== undefined && recordTable.length > 0) {
+                const newCount = filterFeatures(recordTable, updatedDataCopy, 'OR').length
+                setProperty("summary" as any, newCount)
+            }
+            else {
+                if (!currentAttribute.selection || currentAttribute.selection.length == 0) {
+                    tempSummary.current = 0
+                    const values: number[] = Object.values(numberRecord.current);
+                    const maxNumber = Math.max(...values);
+                    tempPreviousSummary.current = maxNumber
+
+
+                }
+                if (currentAttribute.selection?.includes(fieldValue.value)) {
+                    tempSummary.current -= fieldValue.count
+                    setProperty("summary" as any,
+                        tempSummary.current > tempPreviousSummary.current ? tempSummary.current : tempPreviousSummary.current);
+                    numberRecord.current[currentAttribute.name] = tempSummary.current
+                }
+                else {
+                    tempSummary.current += fieldValue.count
+                    if (tempSummary.current > summary) {
+                        setProperty("summary" as any, tempSummary.current);
+                    }
+                    numberRecord.current[currentAttribute.name] = tempSummary.current
+
+                }
+
+
+            }
+
+        }
+
+        raiseEvent("clicked", JSON.stringify({ request: 'updateMap', rule: generateSQLSummary(updatedDataCopy, sqlRule) }))
+
+    };
+
+
+
+    const generateSQLSummary = (data: Attribute[], logicalOperator: string, exception?: string | string[]) => {
+
+
+        const isException = (name: string) => {
+            if (Array.isArray(exception)) {
+                return exception.includes(name);
+            }
+            return name === exception;
+        };
+
+        function generateDateSQL(melbourneDates: string[], epochField: string) {
+            const convertToUTC = (melbourneTime: string) => {
+                return dayjs.tz(melbourneTime, 'Australia/Melbourne').utc().format('YYYY-MM-DD HH:mm:ss');
+            };
+            const sqlConditions = melbourneDates.map(dateStr => {
+                const startTimestamp = convertToUTC(`${dateStr} 00:00:00`);
+                const endTimestamp = convertToUTC(`${dateStr} 23:59:59`);
+                return `(${epochField} BETWEEN TIMESTAMP '${startTimestamp}' AND TIMESTAMP '${endTimestamp}')`;
+            });
+            const combinedConditions = "(" + sqlConditions.join(' OR ') + ")";
+            return combinedConditions
+        }
+
+
+        const clauses = data.map((attribute) => {
+            if (!isException(attribute.name) && attribute.selection && attribute.selection.length > 0) {
+                let values: string[] | string;
+                if (attribute.type === 'date') {
+                    if (attribute.selection.length < 11) {
+                        values = attribute.selection.map((value) => { return dayjs(value, 'DD/MM/YYYY').format('YYYY-MM-DD') })
+                        return generateDateSQL(values, attribute.name)
+                    }
+                    else {
+                        const convertToUTC = (melbourneTime: string) => {
+                            return dayjs.tz(melbourneTime, 'Australia/Melbourne').utc().format('YYYY-MM-DD HH:mm:ss');
+                        };
+                        const timeArray = attribute.selection.map((value) => { return dayjs(value, 'DD/MM/YYYY') })
+                        const minDate = timeArray.reduce((min, current) => (current.isBefore(min) ? current : min)).format('YYYY-MM-DD');
+                        const maxDate = timeArray.reduce((max, current) => (current.isAfter(max) ? current : max)).format('YYYY-MM-DD');
+
+                        const startTimestamp = convertToUTC(`${minDate} 00:00:00`);
+                        const endTimestamp = convertToUTC(`${maxDate} 23:59:59`);
+                        return `${attribute.name} >= '${startTimestamp}' AND ${attribute.name} <= '${endTimestamp}'`;
+                    }
+
+                } else {
+                    const likeConditions: string[] = [];
+                    const inValues: string[] = [];
+
+                    attribute.selection.forEach(value => {
+                        if (value.length > 72) {
+                            const first72Chars = value.slice(0, 72); // Get the first 72 characters
+                            likeConditions.push(`${attribute.name} LIKE '${first72Chars}%'`);
+                        } else {
+                            inValues.push(`'${value}'`); // Use value as-is for short strings
+                        }
+                    });
+
+                    const inClause = inValues.length > 0 ? `${attribute.name} IN (${inValues.join(', ')})` : '';
+                    const likeClause = likeConditions.join(' OR ');
+
+                    if (inClause && likeClause) {
+                        return `(${inClause} OR ${likeClause})`;
+                    } else if (inClause) {
+                        return `(${inClause})`;
+                    } else if (likeClause) {
+                        return `(${likeClause})`;
+                    } else {
+                        return null; // Return an empty string if there are no conditions
+                    }
+                }
+            }
+            return null;
+        }).filter(clause => clause !== null);
+
+        const result = clauses.length > 1 ? clauses.join(` ${logicalOperator} `) : clauses.length > 0 ? clauses[0].replace(/^\(|\)$/g, '') : ''
+        return result.length > 2 ? result : '1=1'
+    };
+
+    interface Condition {
+        type: 'IN' | 'LIKE' | 'BETWEEN'; // Condition type: IN, LIKE, or BETWEEN
+        field: string;                   // The field (column) to apply the condition on
+        values?: any[];                  // Values for the IN condition
+        pattern?: string;                // Pattern for the LIKE condition
+        start?: number | string | Date;  // Start value for BETWEEN condition (number, string, or Date)
+        end?: number | string | Date;    // End value for BETWEEN condition (number, string, or Date)
+    }
+
+    class SimpleSQLWhereEngine {
+        private data: object[]; // Data is an array of objects
+
+        constructor(data: Record<string, any>[]) {
+            this.data = data;
+        }
+
+        // Utility function to convert date strings to epoch time (milliseconds)
+        private parseDate(dateString: string): { start: number, end: number } {
+            // Format: dd/mm/yyyy (like '25/01/2024')
+            const [day, month, year] = dateString.split('/').map(Number);
+
+            // Create a date for the start of the day (00:00:00)
+            const startOfDay = new Date(year, month - 1, day, 0, 0, 0, 0).getTime();
+
+            // Create a date for the end of the day (23:59:59)
+            const endOfDay = new Date(year, month - 1, day, 23, 59, 59, 999).getTime();
+
+            return { start: startOfDay, end: endOfDay };
+        }
+
+        // WHERE IN (specific values) condition
+        private in(field: string, values: any[], isDate: boolean = false): Record<string, any>[] {
+            return this.data.filter(row => {
+                const fieldValue = row[field];
+
+                if (isDate && typeof fieldValue === 'number') {
+                    // If isDate is true and the field is a number (epoch milliseconds), compare as dates
+                    return values.some(value => {
+                        if (typeof value === 'string') {
+                            const { start, end } = this.parseDate(value);
+                            return fieldValue >= start && fieldValue <= end; // Check if the field value is within the day range
+                        }
+                        return false;
+                    });
+                }
+
+                // Default behavior for non-date fields or when isDate is false
+                return values.includes(fieldValue);
+            });
+        }
+
+        // WHERE LIKE (for string matching)
+        private like(field: string, pattern: string): Record<string, any>[] {
+            const regex = new RegExp(pattern.replace('%', '.*')); // Convert 'sth%' to regex pattern
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            return this.data.filter(row => regex.test(row[field]));
+        }
+
+        // WHERE BETWEEN (for timestamps or numerical ranges)
+        private between(field: string, start: number | string | Date, end: number | string | Date): Record<string, any>[] {
+            return this.data.filter(row => {
+                const value = row[field];
+                return value >= start && value <= end;
+            });
+        }
+
+        // General WHERE function that can handle all conditions
+        public where(condition: Condition, isDate: boolean = false): Record<string, any>[] {
+            if (condition.type === 'IN' && condition.values) {
+                return this.in(condition.field, condition.values, isDate);
+            } else if (condition.type === 'LIKE' && condition.pattern) {
+                return this.like(condition.field, condition.pattern);
+            } else if (condition.type === 'BETWEEN' && condition.start !== undefined && condition.end !== undefined) {
+                return this.between(condition.field, condition.start, condition.end);
+            }
+            return this.data; // Default return if no condition is met
+        }
+    }
+
+    function filterFeatures(features: Record<string, any>[], attributes: Attribute[], logic: string, exception?: string | string[]): Record<string, any>[] {
+        // eslint-disable-next-line prefer-const
+        let engine = new SimpleSQLWhereEngine(features);
+        let filteredFeatures = features;  // Start with all features
+        const hasValidSelections = attributes.some(attribute => attribute.name !== exception && attribute.selection && attribute.selection.length > 0);
+
+        if (!hasValidSelections) {
+            return features; // Display all features if no valid selections
+        }
+
+        if (logic === 'AND') {
+            attributes.forEach(attribute => {
+
+                if ((attribute.name !== exception && !exception?.includes(attribute.name)) && attribute.selection && attribute.selection.length > 0) {
+                    const condition: Condition = {
+                        type: 'IN',
+                        field: attribute.name,
+                        values: attribute.selection
+                    };
+                    filteredFeatures = engine.where(condition, attribute.type === 'date'); // Filter progressively on each condition
+                    engine = new SimpleSQLWhereEngine(filteredFeatures);
+                }
+            });
+        } else if (logic === 'OR') {
+            let tempFeatures: Record<string, any>[] = [];
+            if (attributes.some(obj => obj.selection && obj.selection.length > 0)) {
+                attributes.forEach(attribute => {
+                    if (attribute.name !== exception && !exception?.includes(attribute.name) && attribute.selection && attribute.selection.length > 0) {
+                        const condition: Condition = {
+                            type: 'IN',
+                            field: attribute.name,
+                            values: attribute.selection
+                        };
+                        tempFeatures = tempFeatures.concat(engine.where(condition)); // Concatenate results
+                    }
+                });
+                // Remove duplicates
+                filteredFeatures = tempFeatures.filter((item, index) => tempFeatures.indexOf(item) === index);
+            }
+            else {
+                filteredFeatures = []
+            }
+
+        }
+
+        return filteredFeatures;
+    }
+
+    function generateAttributeSummary(features: object[], attributeName: string, type: string): fieldValue[] {
+        // Create an object to store the statistical summary for the attribute
+        const attributeSummary: { [key: string]: number } = {};
+
+        // Iterate through the features array
+        features.forEach((feature) => {
+            const value = feature[attributeName];
+            if (value) {
+                // Count the occurrence of each value for the attribute
+                if (!attributeSummary[value]) {
+                    attributeSummary[value] = 0;
+                }
+                attributeSummary[value]++;
+            }
+        });
+
+
+        // Convert the summary object to the desired array format
+        const rawResult: fieldValue[] = Object.entries(attributeSummary).map(([value, count]) => ({
+            value: type == 'date' && Number(value) > 0 ? epoch2MelbDate(Number(value) / 1000) : value,
+            count: count
+        }));
+        if (type !== 'date' || !Number(rawResult[0].value)) {
+            return rawResult
+        }
+        else {
+            const result = groupByMelbourneDate(rawResult)
+            return result
+        }
+    }
+
+    function epoch2MelbDate(epoch: any) {
+        return dayjs.unix(Number(epoch)).tz('Australia/Melbourne').format('DD/MM/YYYY');
+    }
+
+
+    function formatUniqValues(attri: Attribute) {
+        let newAttriData: fieldValue[]
+        if (attri.type == 'date' && attri.uniqValue && Number(attri.uniqValue[0].value) > 0) {
+            const values = attri.uniqValue.map(obj => Number(obj.value));
+            minDate.current = Math.min(...values) / 1000;
+            maxDate.current = Math.max(...values) / 1000;
+            setProperty("startDate" as any, dayjs.unix(Math.min(...values) / 1000))
+            setProperty("endDate" as any, dayjs.unix(Math.max(...values) / 1000))
+            newAttriData = groupByMelbourneDate(attri.uniqValue)
+        }
+        else {
+            newAttriData = attri.uniqValue || []
+        }
+        return newAttriData
+    }
+
+    function localDisplayLayer(attri: Attribute, exception?: string, noLimit?: boolean, Rule?: string) {
+        if (recordTable !== undefined && recordTable.length > 0) {
+            let result: Attribute[]
+            if (noLimit) {
+                const dataCopy = structuredClone(data)
+                result = dataCopy.map(item =>
+                    item.name === attri.name ?
+                        {
+                            ...item,
+                            display: true,
+                            uniqValue: item.selection && item.selection.length > 0 ?
+                                sortItemsBySelection(formatUniqValues(originalData.find(attribute => attribute.name == item.name) || data[0]), item.selection)
+                                : formatUniqValues(originalData.find(attribute => attribute.name == item.name) || data[0])
+                        }
+                        : { ...item, display: false }
+                );
+                setProperty("data" as any, result);
+            }
+            else {
+                let queryFeatures: object[] = []
+                if (exception) {
+                    queryFeatures = filterFeatures(recordTable, data, Rule || sqlRule, [exception, attri.name])
+                } else {
+                    queryFeatures = filterFeatures(recordTable, data, Rule || sqlRule, attri.name)
+                }
+                const queryUniqValue = generateAttributeSummary(queryFeatures, attri.name, attri.type || 'string')
+                queryUniqValue.sort((a, b) => {
+                    if (a.count === b.count) {
+                        return a.value.localeCompare(b.value);
+                    }
+                    return b.count - a.count;
+                });
+                const dataCopy = structuredClone(data)
+                result = dataCopy.map(item =>
+                    item.name === attri.name ?
+                        {
+                            ...item, display: true,
+                            uniqValue: item.selection && item.selection.length > 0 ?
+                                sortItemsBySelection(queryUniqValue, item.selection) : queryUniqValue
+                        } : { ...item, display: false }
+                );
+                setProperty("data" as any, result);
+            }
+
+            if (attri.type == 'date') {
+                minDate.current = Math.floor((findEarliestAndLatestDatesForAttribute(attri)?.earliest || 946700000) / 1000)
+                maxDate.current = Math.floor((findEarliestAndLatestDatesForAttribute(attri)?.latest || 2209004000) / 1000)
+                setProperty("startDate" as any, dayjs.unix(minDate.current))
+                setProperty("endDate" as any, dayjs.unix(maxDate.current))
+            }
+            openAttriName.current = attri.name
+
+            // const oldSelection = result.find(obj => obj.name === openAttriName.current)?.selection || []
+            // const updatedAttri = result.find(obj => obj.name === attri.name) || result[0]
+            // if (openAttriName.current == attri.name && oldSelection.length > 0 && searchValue.length > 0) {
+            //     const searchValueResults = filterValue(updatedAttri, searchValue);
+            //     setProperty("filteredValues" as any, searchValueResults)
+            // }
+
+
+            // openAttriValues.current = updatedAttri
+
+        }
+    }
+
+    // // Handle category toggle open/close manually
+    const handleAttributeClick = (attri: Attribute) => {
+        setProperty("filteredValues" as any, [])
+        setShowAll(false)
+        setProperty("searchValue" as any, '');
+        setProperty("minValue" as any, -Infinity)
+        setProperty("maxValue" as any, Infinity)
+        tempPreviousSummary.current = summary
+        if (!attri.display) {
+            if (recordTable !== undefined && recordTable.length > 0) {
+                localDisplayLayer(attri, undefined, sqlRule === 'OR')
+            }
+            else {
+                raiseEvent("clicked", JSON.stringify({ request: 'displayLayer', value: attri.name, rule: sqlRule == 'AND' ? generateSQLSummary(data, sqlRule, attri.name) : '1=1' }))
+
+            }
+
+        }
+        else if (attri.display) {
+            const dataCopy = structuredClone(data)
+            let result: Attribute[]
+            if (recordTable !== undefined && recordTable.length > 0) {
+                result = dataCopy.map(item =>
+                    item.name === attri.name ? { ...item, display: false } : item
+                );
+            }
+            else {
+                result = dataCopy.map(item =>
+                    item.name === attri.name ? { ...item, display: false, uniqValue: undefined } : item
+                );
+            }
+            setProperty("data" as any, result);
+            openAttriName.current = ''
+            props.openedAttribute = undefined
+
+        }
+    };
+    const handleShowAllClick = () => {
+        setShowAll(!showAll);
+    };
+    function deleteSelection(attri: Attribute) {
+
+        function removeAnotherRule() {
+            const updatedData = data?.map((attribute) => {
+                if (attribute.name === attri.name) {
+                    return {
+                        ...attribute,
+                        selection: undefined,
+                        uniqValue: recordTable && recordTable.length > 0 ? attri.uniqValue : undefined
+                    };
+                }
+                if (attribute.name === openAttriName.current && tickedBeforeNewQuery.current !== undefined) {
+                    return {
+                        ...attribute,
+                        selection: tickedBeforeNewQuery.current,
+                    };
+                }
+                return attribute;
+            })
+            setProperty("data" as any, updatedData);
+        }
+
+
+        if (IsOtherRulesEmpty(attri.name)) {
+            setProperty("summary" as any, 0);
+            tempSummary.current = 0
+            numberRecord.current[attri.name] = 0
+
+            if (openAttriName.current !== '') {
+                if (recordTable !== undefined && recordTable.length > 0) {
+                    localDisplayLayer(data?.find(attribute => attribute.name == openAttriName.current) || data[0], undefined, true)
+                }
+                else {
+                    raiseEvent("clicked", JSON.stringify({ request: 'displayLayer', value: openAttriName.current, rule: '1=1' }))
+                }
+            }
+            const updatedData = data?.map((attribute) => {
+                if (attribute.name === attri.name) {
+                    return {
+                        ...attribute,
+                        selection: [],
+                    };
+                }
+                return attribute;
+            })
+            setProperty("data" as any, updatedData);
+
+        }
+        else {
+            if (openAttriName.current == attri.name) {
+                if (data?.find(attribute => attribute.name == attri.name)) {
+                    const updatedData = data?.map((obj) => {
+                        if (obj.name === attri.name) {
+                            return { ...obj, selection: undefined };
+                        }
+                        return obj
+                    })
+                    setProperty("data" as any, updatedData);
+
+                }
+                if (recordTable !== undefined && recordTable.length > 0) {
+                    const newCount = filterFeatures(recordTable, data, sqlRule, attri.name).length
+                    setProperty("summary" as any, newCount)
+                }
+                else {
+                    raiseEvent("clicked", JSON.stringify({ request: 'sumOnly', rule: generateSQLSummary(data, sqlRule, attri.name) }))
+                }
+            }
+            else {
+                const targetObject = data?.find(obj => obj.name == openAttriName.current);
+
+
+                if (targetObject && targetObject.uniqValue) {
+                    tickedBeforeNewQuery.current = targetObject.selection
+                    if (recordTable !== undefined && recordTable.length > 0) {
+                        localDisplayLayer(data?.find(obj => obj.name == openAttriName.current) || data[0], attri.name)
+                        const newCount = filterFeatures(recordTable, data, sqlRule, attri.name).length
+                        setProperty("summary" as any, newCount)
+                    }
+                    else {
+                        raiseEvent("clicked", JSON.stringify({ request: 'displayLayer', value: openAttriName.current, rule: generateSQLSummary(data, sqlRule, [openAttriName.current, attri.name]) }))
+                    }
+                    //origianlly newQueery
+                    removeAnotherRule()
+                }
+                else {
+                    if (recordTable !== undefined && recordTable.length > 0) {
+                        const newCount = filterFeatures(recordTable, data, sqlRule, attri.name).length
+                        setProperty("summary" as any, newCount)
+                        const updatedData = data?.map((obj) => {
+                            if (obj.name === attri.name) {
+                                return { ...obj, selection: undefined };
+                            }
+                            return obj
+                        })
+                        setProperty("data" as any, updatedData);
+                    }
+                    else {
+                        raiseEvent("clicked", JSON.stringify({ request: 'sumOnly', value: attri.name, rule: generateSQLSummary(data, sqlRule, attri.name) }))
+                    }
+                }
+            }
+
+        }
+
+    }
+
+    const handleDeleteSelection = (attri: Attribute) => {
+        deleteSelection(attri)
+        raiseEvent("clicked", JSON.stringify({ request: 'updateMap', rule: generateSQLSummary(data, sqlRule, attri.name) }))
+    };
+
+    function detectNumberAttribute(attribute) {
+        const name = attribute.name.toLowerCase();;
+        if (name.includes("id") || name.includes("name") || name.includes("mobile") || name.includes("phone")) {
+            return false;
+        }
+        if (attribute.uniqValue) {
+            const phoneNumberPattern = /^04\d{8}$/;
+            let allPhoneNumbers = true;
+
+            for (let i = 0; i < 5; i++) {
+
+                if (i >= attribute.uniqValue.length) break; // In case there are less than 5 elements
+                const value: string = attribute.uniqValue[i].value;
+                if (isNaN(Number(value))) {
+                    return false;
+
+                }
+                if (!phoneNumberPattern.test(value) && allPhoneNumbers == true) {
+                    allPhoneNumbers = false
+                }
+            }
+            if (allPhoneNumbers) { return false }
+
+            return true;
+        }
+        return false;
+
+    }
+
+
+    function findMinMax(attribute) {
+        let min = Infinity;
+        let max = -Infinity;
+
+        if (attribute.uniqValue) {
+            attribute.uniqValue.forEach(item => {
+                const num = Number(item.value);
+                if (!isNaN(num)) {
+                    if (num < min) min = num;
+                    if (num > max) max = num;
+                }
+            });
+
+            return { min: Math.floor(min * 100) / 100, max: Math.floor(max * 100) / 100 };
+        }
+        return { min: -Infinity, max: Infinity };
+    }
+
+    const toggleFolder = () => setFolderOpen(!folderOpen);
+
+
+    const renderAttribute = (attribute: Attribute): React.ReactNode => {
+
+        let ISnumberAttribute = false
+        let attributeMin = -Infinity
+        let attributeMax = Infinity
+
+        if (attribute.uniqValue && attribute.uniqValue.length > 0) {
+            attributeMin = findMinMax(attribute).min
+            attributeMax = findMinMax(attribute).max
+            const numberTypes = ['integer', 'number', 'float', 'short', 'long', 'big integer'];
+            ISnumberAttribute = numberTypes.includes(attribute?.type || '--') || detectNumberAttribute(attribute)
+        }
+
+
+        let displayedValues: fieldValue[] = []
+        let displayedFilterValues: fieldValue[] = []
+        let limitInUse
+        if (recordTable !== undefined && recordTable.length > 0) {
+            limitInUse = (attribute.type == 'date' && (dayjs.unix(minDate.current).format('DD/MM/YYYY') != startDate.format('DD/MM/YYYY') || (dayjs.unix(maxDate.current).format('DD/MM/YYYY') != endDate.format('DD/MM/YYYY')))) || searchValue.length > 0 || (minValue !== -Infinity || maxValue !== Infinity)
+        }
+        else {
+            limitInUse = (attribute.type == 'date' && (dayjs.unix(minDate.current).format('DD/MM/YYYY') != startDate.format('DD/MM/YYYY') || (dayjs.unix(maxDate.current).format('DD/MM/YYYY') != endDate.format('DD/MM/YYYY')))) || searchValue.length > 0 || (minValue !== -Infinity || maxValue !== Infinity)
+        }
+        if (attribute.uniqValue && attribute.uniqValue.length > 0) {
+          displayedValues = (attribute.uniqValue.length < defaultNumber + 2) || showAll ? attribute.uniqValue : attribute.uniqValue.slice(0, defaultNumber);
+        }
+
+        if (limitInUse && filteredValues.length > 0) {
+            displayedFilterValues = ((filteredValues.length < defaultNumber + 2) || showAll) ? filteredValues : filteredValues.slice(0, defaultNumber)
+        }
+
+        const handleDateRangeChange = (newStart: Dayjs, newEnd: Dayjs) => {
+            setProperty("startDate" as any, newStart || defaultStart);
+            setProperty("endDate" as any, newEnd || defaultEnd)
+            const filterrangeResult = filterDateRange(attribute, newStart, newEnd)
+            setProperty("filteredValues" as any, filterrangeResult)
+        };
+
+        const maxStringLength = 28
+        function itemText(item: fieldValue, type?: string) {
+            let rawResult: string = ''
+            if (type == 'number') {
+                rawResult = ((Math.floor(Number(item.value) * 100) / 100)).toString()
+            }
+            else { rawResult = item.value }
+
+            return rawResult.length > maxStringLength ? rawResult.substring(0, maxStringLength - 3) + '...' : rawResult;
+        }
+
+        const chipLabel = attribute.selection && attribute.selection.length > 1
+            ? `${attribute.selection.length} selected`
+            : attribute.selection && attribute.selection.length > 0 && attribute.type === 'date'
+                ? attribute.selection[0]
+                : attribute.selection && attribute.selection.length > 0 && attribute.selection[0].length > 8
+                    ? `${attribute.selection[0].substring(0, 6)}..`
+                    : attribute.selection ? attribute.selection[0] : '';
+
+        const chipElement = (
+            <Chip
+                label={chipLabel}
+                sx={{
+                    color: 'var(--accentIconBackground)',
+                    backgroundColor: 'var(--alertAmberBackground)',
+                    '& .MuiChip-deleteIcon': { color: 'var(--accentIconBackground)' }
+                }}
+                onDelete={() => handleDeleteSelection(attribute)}
+            />
+        );
+
+        const exceptions = ['OBJECTID', 'Shape__Area', 'Shape__Length'];
+        if (!exceptions.includes(attribute.name)) {
+
+            return (
+                <React.Fragment key={attribute.name}>
+                    <ListItemButton onClick={() => handleAttributeClick(attribute)}
+                        sx={{
+                            // Conditionally change background color based on attribute.display
+                            backgroundColor: attribute.display ? 'rgba(197, 197, 197, 0.65)' : 'transparent',
+                        }}
+                    >
+                        { // render icon image
+                            attribute.name ? (
+                                <Box
+                                    component="img"
+                                    sx={{
+                                        height: 18,
+                                        width: 18,
+                                    }}
+                                    alt="The category icon"
+                                    src={attribute.img ? attribute.img :
+                                        attribute.type == 'date' ? 'https://cdn-icons-png.flaticon.com/512/6706/6706193.png' :
+                                            ISnumberAttribute ? 'https://cdn-icons-png.flaticon.com/512/5141/5141667.png' :
+                                                "https://cdn-icons-png.flaticon.com/24/2303/2303496.png"}// Use the item's img property or based on type
+                                />
+                            ) :
+                                //on purpose keep not in use code in case
+                                (<ListItemIcon sx={{ minWidth: '30px' }}>
+                                    <FolderOpenIcon sx={{ color: 'var(--accentIconBorder)' }} />
+                                </ListItemIcon>)
+                        }
+                        <ListItemText primary={attribute.alias || attribute.name} sx={{ pl: 3 }} primaryTypographyProps={{ style: { fontWeight: 800 } }} />
+
+                        {//selection chip
+                            attribute.selection && attribute.selection.length > 0 ?
+                                attribute.selection.length > 1 ? <LightTooltip
+                                    title={attribute.selection.join(',')}
+                                    sx={{ fontSize: '2rem' }} arrow>
+                                    {chipElement}
+                                </LightTooltip>
+                                    : chipElement : <></>}
+                        {attribute.display ? <ExpandLess /> : <ExpandMore />}
+
+                    </ListItemButton>
+                    {attribute.uniqValue ?
+                        (<Collapse in={attribute.display} timeout="auto" unmountOnExit>
+                            {attribute.type && attribute.type == 'date' && (attribute.uniqValue.length > 6) ?
+                                <Box display="flex" alignItems="center" >
+                                    <LocalizationProvider dateAdapter={AdapterDayjs} >
+                                        <DemoContainer components={['DatePicker', 'DatePicker']} >
+                                            <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en-au">
+                                                <DateRangePicker defaultValue={[dayjs.unix(minDate.current), dayjs.unix(maxDate.current)]} maxDate={dayjs.unix(maxDate.current)} minDate={dayjs.unix(minDate.current)}
+                                                    value={[startDate, endDate]}
+                                                    onChange={([newstart, newend]) => handleDateRangeChange(newstart || startDate, newend || endDate)}
+                                                    sx={{
+                                                        // Customize the date text color
+                                                        '& .MuiInputBase-input': {
+                                                            color: 'var(--accentIconBorder)', // Change text color for the selected date
+                                                        },
+
+                                                        // Customize the start & end labels
+                                                        '& .MuiInputLabel-root': {
+                                                            color: 'var(--accentIconBorder)', // Change label color for both start and end dates
+                                                        },
+
+                                                        // Customize the border color of the input
+                                                        '& .MuiOutlinedInput-root': {
+                                                            '& fieldset': {
+                                                                borderColor: 'var(--accentIconBorder)', // Change border color when the input is not focused
+                                                            },
+                                                            '&:hover fieldset': {
+                                                                borderColor: 'var(--accentIconBorder)', // Change border color on hover
+                                                            },
+                                                            '&.Mui-focused fieldset': {
+                                                                borderColor: 'var(--accentIconBorder)', // Change border color when focused
+                                                            },
+                                                        },
+                                                    }}
+
+                                                />
+                                            </LocalizationProvider>
+                                        </DemoContainer>
+                                    </LocalizationProvider>
+                                </Box>
+                                :
+                                ISnumberAttribute && (attribute.uniqValue.length > 6) ?
+                                    //Display String search or number Range , don't display if value amount is limited
+                                    <Box display="flex" alignItems="center">
+                                        <CustomNumberInput aria-label="min value input" placeholder={`Min  (${attributeMin} ~ ${attributeMax})`} min={attributeMin - 1} max={attributeMax + 1}
+                                            value={minValue == -Infinity ? undefined : minValue} step={0.1}
+                                            onChange={(event, val) => {
+                                                if (((val || val == 0) && (val <= maxValue))) { setProperty("minValue" as any, val) };
+                                                if (val == undefined || val == null) { setProperty("minValue" as any, -Infinity) };
+
+                                                if ((val || val == 0) && val > maxValue) {
+                                                    setProperty("minValue" as any, maxValue - 1)
+                                                    const filterrangeResult = filterRange(attribute, maxValue - 1, maxValue)
+                                                    setProperty("filteredValues" as any, filterrangeResult)
+                                                }
+                                                else {
+                                                    const filterrangeResult = filterRange(attribute, val !== null ? val : -Infinity, maxValue !== Infinity ? maxValue : Infinity)
+                                                    setProperty("filteredValues" as any, filterrangeResult)
+                                                }
+                                            }}
+                                        />
+                                        <CustomNumberInput aria-label="max value input" placeholder={`Max  (${attributeMin} ~ ${attributeMax})`} min={attributeMin - 1} max={attributeMax + 1}
+                                            value={maxValue == Infinity ? undefined : maxValue} step={0.1}
+                                            onChange={(_event, val) => {
+                                                if ((val || val == 0) && (val >= minValue)) { setProperty("maxValue" as any, val) };
+                                                if (val == undefined) { setProperty("maxValue" as any, Infinity) };
+                                                if ((val || val == 0) && val < minValue) {
+                                                    setProperty("maxValue" as any, minValue + 1)
+                                                    const filterrangeResult = filterRange(attribute, minValue, minValue + 1)
+                                                    setProperty("filteredValues" as any, filterrangeResult)
+                                                }
+                                                else {
+                                                    const filterrangeResult = filterRange(attribute, minValue !== -Infinity ? minValue : -Infinity, val !== null ? val : Infinity || Infinity)
+                                                    setProperty("filteredValues" as any, filterrangeResult)
+                                                }
+                                            }}
+                                        />
+                                    </Box>
+                                    :
+                                    (attribute.uniqValue.length > 6) || searchValue ?
+                                        <Search sx={{ border: 0.5, borderColor: 'var(--alertGrayForegroundHover)', marginLeft: '0px !important', marginRight: '0px' }} >
+                                            <SearchIconWrapper>
+                                                <SearchIcon />
+                                            </SearchIconWrapper>
+                                            <StyledInputBase
+                                                placeholder="Search specific values..."
+                                                inputProps={{ 'aria-label': 'search' }}
+                                                value={searchValue}
+                                                onChange={(event: React.ChangeEvent<HTMLInputElement>) => handleSearchValueChange(attribute, event)}
+                                                sx={{ padding: '1px', fontSize: '1.2rem', color: 'var(--alertGrayBackground)', width: '100%' }}
+
+                                            />
+                                            {searchValue && (
+                                                <IconButton
+                                                    onClick={() => {
+                                                        setProperty("searchValue" as any, '');
+                                                        setProperty("filteredValues" as any, [])
+                                                    }}
+                                                    size="small"
+                                                    sx={{ position: 'absolute', right: '8px', color: 'var(--alertGrayBackground)' }}
+                                                >
+                                                    <ClearIcon />
+                                                </IconButton>
+                                            )}
+                                        </Search> : <></>
+                            }
+                            {((!limitInUse && attribute.uniqValue && attribute.uniqValue.length > 2) ||
+                                (limitInUse && filteredValues.length > 2)) ?
+
+                                <ListItemButton sx={{ pl: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} onClick={handleShowAllClick}>
+                                    <div style={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}>
+                                        {
+                                            // Display SHOW-ALL or not
+                                            ((!limitInUse && attribute.uniqValue && attribute.uniqValue.length >= defaultNumber + 2) ||
+                                                (limitInUse && filteredValues.length >= defaultNumber + 2)) ?
+                                                <ListItemText primary={`Show ${showAll ? 'less' : 'all others▼'}  ${showAll ? '▲' : `(${filteredValues.length > defaultNumber && limitInUse ? filteredValues.length - defaultNumber : attribute.uniqValue.length - defaultNumber})`}`} primaryTypographyProps={{ style: { fontWeight: '500' } }} />
+                                                : null
+                                        }
+                                    </div>
+                                    <Button style={{ color: 'var(--accentIconBorder) !important' }} variant="text" onClick={(event) => handleSelectAll(event, attribute.name)}>
+                                        {allButtonText}
+                                    </Button>
+                                </ListItemButton> : <></>}
+                            {
+                                // Situation1: Search or range & search result found, only show 'DISPLAYED FILTER VALUE' which is controlled by showall to be all or first 4                           
+                                (limitInUse && filteredValues.length > 0) ?
+                                    (<List component="div" disablePadding>
+                                        {
+                                            displayedFilterValues.map((item, idx) => (
+                                                item.count > 0 ?
+                                                    item.value.length > maxStringLength ?//control tooltip exist or not
+                                                        <ListItemButton sx={{ pl: 3, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} key={idx} onClick={() => handleItemClick(attribute, item)}>
+                                                            <LightTooltip title={`${item.value} (${item.count})`} sx={{ fontSize: '2rem' }} arrow>
+                                                                <div style={{ display: 'flex', alignItems: 'center' }}>
+                                                                    <Checkbox sx={{ color: 'var(--accentIconBorder) !important' }} checked={Boolean(attribute.selection?.includes(item.value))} />
+                                                                    <ListItemText primary={itemText(item, attribute.type)} primaryTypographyProps={{ style: { fontWeight: '500' } }} />
+                                                                </div>
+                                                            </LightTooltip>
+                                                            <StyledBadge max={9999} badgeContent={item.count} color="primary" />
+                                                        </ListItemButton> :
+                                                        <ListItemButton sx={{ pl: 3, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} key={idx} onClick={() => handleItemClick(attribute, item)}>
+                                                            <div style={{ display: 'flex', alignItems: 'center' }}>
+                                                                <Checkbox sx={{ color: 'var(--accentIconBorder) !important' }} checked={Boolean(attribute.selection?.includes(item.value))} />
+                                                                <ListItemText primary={itemText(item, attribute.type)} primaryTypographyProps={{ style: { fontWeight: '500' } }} />
+                                                            </div>
+                                                            <StyledBadge max={9999} badgeContent={item.count} color="primary" />
+                                                        </ListItemButton>
+                                                    : <></>
+                                            ))}
+                                    </List>) : (limitInUse && (filteredValues.length == 0)) ?
+                                        // Situation2: search or range but no result         
+                                        <Typography variant="body1" sx={{ padding: '10px', fontSize: '1.5rem' }}>No matching values</Typography>
+                                        :
+                                        attribute.uniqValue?.length == 0 ?
+                                            // Situation3: No data at beginning
+                                            <Typography variant="body1" sx={{ padding: '10px', fontSize: '1.5rem', color: 'red' }}>No any value for this attribute.</Typography>
+                                            // Situation4: no searching or range, show default displayed Values, controlled by showall   
+                                            : <List component="div" disablePadding>
+                                                {attribute.uniqValue && attribute.uniqValue.length > 0 && displayedValues.map((item, idx) => (
+                                                    item.count > 0 ?
+                                                        item.value.length > maxStringLength ?
+                                                            <ListItemButton sx={{ pl: 3, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} key={idx} onClick={() => handleItemClick(attribute, item)}>
+                                                                <LightTooltip title={`${item.value} (${item.count})`} sx={{ fontSize: '2rem' }} arrow>
+                                                                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                                                                        <Checkbox sx={{ color: 'var(--accentIconBorder) !important' }}
+                                                                            checked={Boolean(attribute.selection?.includes(item.value))}
+                                                                            onChange={() => handleItemClick(attribute, item)}
+                                                                        />
+                                                                        <ListItemText primary={itemText(item, attribute.type)} primaryTypographyProps={{ style: { fontWeight: '500' } }} />
+                                                                    </div>
+                                                                </LightTooltip>
+                                                                <StyledBadge badgeContent={item.count} max={9999} color="primary" />
+                                                            </ListItemButton> :
+                                                            <ListItemButton sx={{ pl: 3, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} key={idx} onClick={() => handleItemClick(attribute, item)}>
+                                                                <div style={{ display: 'flex', alignItems: 'center' }}>
+                                                                    <Checkbox sx={{ color: 'var(--accentIconBorder) !important' }}
+                                                                        checked={Boolean(attribute.selection?.includes(item.value))}
+                                                                        onChange={() => handleItemClick(attribute, item)}
+                                                                    />
+                                                                    <ListItemText primary={itemText(item, attribute.type)} primaryTypographyProps={{ style: { fontWeight: '500' } }} />
+                                                                </div>
+                                                                <StyledBadge badgeContent={item.count} max={9999} color="primary" />
+                                                            </ListItemButton>
+                                                        : <></>
+                                                ))
+                                                }
+                                            </List>
+                            }
+                        </Collapse>) : <></>}
+                </React.Fragment>
+            );
+        }
+    };
+
+    function filterData(data: Attribute[], query: string) {
+        const keywords = query.split(/[\s,+;]+/).map((word) => word.trim().toLowerCase()).filter(Boolean);
+        const dataCopy = structuredClone(data)
+        const matchedItems = dataCopy.filter(item =>
+            keywords.every(keyword => item.name.toLowerCase().includes(keyword)
+                || item.alias?.toLowerCase().includes(keyword))
+        );
+
+        return matchedItems;
+    }
+
+    function sortItemsBySelection(items: fieldValue[] | undefined, selection: string[] | undefined) {
+        const selectedSet = new Set(selection);
+
+        const selected: fieldValue[] = [];
+        const unselected: fieldValue[] = [];
+        if (items) {
+            for (const item of items) {
+                if (selectedSet.has(item.value)) {
+                    selected.push(item);
+                } else {
+                    unselected.push(item);
+                }
+            }
+            return [...selected, ...unselected];
+        }
+        else return []
+    }
+
+
+    function filterValue(attri: Attribute, query: string) {
+        const keywords = query.split(/[\s,+;]+/).map((word) => word.trim().toLowerCase()).filter(Boolean);
+        const matchedItems = attri.uniqValue?.filter(item =>
+            keywords.every(keyword => item.value.toLowerCase().includes(keyword))
+        );
+        return sortItemsBySelection(matchedItems,attri.selection) || [];
+    }
+
+    function filterRange(attri: Attribute, min: number, max: number) {
+        const matchedItems = attri.uniqValue?.filter(item =>
+            Number(item.value) <= max && Number(item.value) >= min
+        );
+        return sortItemsBySelection(matchedItems,attri.selection) || []
+    }
+
+    const groupByMelbourneDate = (data: fieldValue[]) => {
+        const groupedData = new Map();
+
+        data.forEach(({ value: value, count: count }) => {
+            const melbourneDate = dayjs(value, "DD/MM/YYYY").tz('Australia/Melbourne').format('DD/MM/YYYY');
+            if (!groupedData.has(melbourneDate)) {
+                groupedData.set(melbourneDate, { value: melbourneDate, count: 0 });
+            }
+            groupedData.get(melbourneDate).count += count;
+        });
+        // Convert the map back to an array of objects
+        return Array.from(groupedData.values());
+    };
+
+    function filterDateRange(attri: Attribute, start: Dayjs, end: Dayjs) {
+        if (!attri.uniqValue) return []; // Handle null or undefined attri.uniqValue
+
+        const matchedItems = attri.uniqValue.filter((item) => {
+            const itemDate = dayjs(item.value, 'DD/MM/YYYY'); // Parse the date once
+            if (!itemDate.isValid()) return false; // Handle invalid dates gracefully
+            return itemDate.isAfter(start, 'day') && itemDate.isBefore(end, 'day') ||
+                itemDate.isSame(start, 'day') || itemDate.isSame(end, 'day'); // Inclusive comparison
+        });
+
+        return sortItemsBySelection(matchedItems,attri.selection);
+    }
+
+
+    React.useEffect(() => {
+
+        function filterValue2(attri: Attribute, query: string) {
+            const keywords = query.split(/[\s,+;]+/).map((word) => word.trim().toLowerCase()).filter(Boolean);
+            const matchedItems = attri.uniqValue?.filter(item =>
+                keywords.every(keyword => item.value.toLowerCase().includes(keyword))
+            );
+            return sortItemsBySelection(matchedItems,attri.selection) || [];
+        }
+        if (props.openedAttribute !== undefined && (openAttriTime.current) !== (props.openedAttribute.timestamp)) {
+            let newAttriData: fieldValue[] | undefined
+
+            if (props.openedAttribute.data.type == 'date' && props.openedAttribute.data.uniqValue) {
+                const values = props.openedAttribute.data.uniqValue.map(obj => Number(obj.value));
+                minDate.current = Math.min(...values) / 1000;
+                maxDate.current = Math.max(...values) / 1000;
+                setProperty("startDate" as any, dayjs.unix(Math.min(...values) / 1000))
+                setProperty("endDate" as any, dayjs.unix(Math.max(...values) / 1000))
+                newAttriData = groupByMelbourneDate(props.openedAttribute.data.uniqValue)
+            }
+            else {
+                newAttriData = props.openedAttribute.data.uniqValue
+            }
+            if (newAttriData) {
+                newAttriData.sort((a, b) => {
+                    if (a.count === b.count) {
+                        return a.value.localeCompare(b.value);
+                    }
+                    return b.count - a.count;
+                });
+            }
+
+            const updatedData = data?.map((obj) => {
+                if (obj.name === props.openedAttribute?.data.name) {
+                    return {
+                        ...props.openedAttribute?.data,
+                        uniqValue: obj.selection && obj.selection.length > 0 ? sortItemsBySelection(newAttriData, obj.selection) : newAttriData,
+                        selection: obj.selection, // Keep the selection attribute from the previous data
+                        hidden: obj.hidden,
+                        display: true,
+                    };
+                }
+                return { ...obj, display: false, uniqValue: undefined };
+            })
+            setProperty("data" as any, updatedData);
+
+            const oldSelection = DataRef.current.find(obj => obj.name === openAttriName.current)?.selection || []
+
+            if (openAttriName.current == props.openedAttribute?.data.name && oldSelection.length > 0 && searchValue.length > 0) {
+                const searchValueResults = filterValue2(props.openedAttribute.data, searchValue);
+                setProperty("filteredValues" as any, searchValueResults)
+            }
+            const totalDifference = props.openedAttribute.data.uniqValue?.filter(value => oldSelection?.includes(value.value))?.reduce((acc, item) => {
+                const originalItemValues = openAttriValues.current?.uniqValue
+                const originalItem = originalItemValues?.find(oldItem => oldItem.value == item.value);
+                if (originalItem) {
+                    acc += item.count - originalItem.count;
+                }
+                return acc;
+            }, 0) || 0;
+
+            setProperty("summary" as any, summary + totalDifference)
+            openAttriName.current = props.openedAttribute?.data.name
+            openAttriTime.current = props.openedAttribute?.timestamp
+            openAttriValues.current = props.openedAttribute.data
+
+
+
+
+        }
+    }, [data, props.openedAttribute, searchValue, setProperty, summary])
+
+    React.useEffect(() => {
+        const selectedAttribute = data?.find(attribute => attribute.name === openAttriName.current);
+        if (selectedAttribute && (!selectedAttribute.selection || selectedAttribute.selection.length === 0)) {
+            setProperty("allButtonText" as any, 'Select All');
+        }
+        else if (selectedAttribute && selectedAttribute.selection?.length == selectedAttribute.uniqValue?.length) {
+            setProperty("allButtonText" as any, 'Deselect All');
+        }
+    }, [data, setProperty]);
+
+
+    React.useEffect(() => {
+        if (props.request !== undefined && (requestTime.current) !== (props.request.timestamp)) {
+            if (props.request.requestName == "Clear") {
+                const updatedData = data?.map((attribute) => {
+                    if (attribute.selection && attribute.selection.length > 0) {
+                        attribute.selection = undefined
+                    }
+                    return attribute
+                }
+                )
+                setProperty("data" as any, updatedData);
+                setProperty("summary" as any, 0)
+            }
+            setProperty("rule" as any, generateSQLSummary(data, sqlRule))
+            setProperty("layerName" as any, layerNameCreator(data, sqlRule))
+            raiseEvent("clicked", JSON.stringify({ request: props.request.requestName, rule: generateSQLSummary(data, sqlRule), layerName: layerNameCreator(data, sqlRule) }))
+            requestTime.current = props.request.timestamp
+        }
+    }, [data, props.request, raiseEvent, setProperty, sqlRule]);
+
+
+    React.useEffect(() => {
+        if (searchQuery == undefined) { setProperty("searchQuery" as any, '') }
+        if (searchValue == undefined) { setProperty("searchValue" as any, '') }
+        if (summary == undefined) { setProperty("summary" as any, 0) }
+        if (sqlRule == undefined) { setProperty("sqlRule" as any, "AND") }
+        if (rule == undefined) { setProperty("rule" as any, "") }
+        if (layerName == undefined) { setProperty("layerName" as any, "") }
+        if (minValue == undefined) { setProperty("minValue" as any, -Infinity) }
+        if (maxValue == undefined) { setProperty("maxValue" as any, Infinity) }
+        if (startDate == undefined) { setProperty("startDate" as any, defaultStart) }
+        if (endDate == undefined) { setProperty("endDate" as any, defaultEnd) }
+        if (filteredValues == undefined) { setProperty("filteredValues" as any, []) }
+        if (sqlRule== undefined) {props.setProperty("sqlRule" as any, "AND") }
+    }, [defaultEnd, defaultStart, endDate, filteredValues, layerName, maxValue, minValue, props, rule, searchQuery, searchValue, setProperty, sqlRule, startDate, summary]);
+
+    React.useEffect(() => {
+        if (searchQuery && searchQuery.length > 0) {
+            const searchResults = filterData(data, searchQuery);
+            const dataCopy = structuredClone(data)
+            const result = dataCopy.map(item => {
+                const isVisible = searchResults.some(filteredItem => filteredItem.name === item.name);
+                return { ...item, visible: isVisible };
+            });
+
+            setProperty("data" as any, result);
+        }
+
+        else if (prevSearchValue.current !== '') {
+            const dataCopy = structuredClone(data)
+            const result = dataCopy.map(item => {
+                return { ...item, visible: true };
+            });
+            setProperty("data" as any, result);
+
+        }
+        prevSearchValue.current = searchQuery
+    }, [data, searchQuery, setProperty])
+
+
+    React.useEffect(() => {
+        if (props.newSum !== undefined && props.newSum !== prevSum.current) {
+            setProperty("summary" as any, props.newSum.sum)
+            numberRecord.current['total'] = props.newSum.sum
+            if (!DataRef.current.find(obj => obj.name == openAttriName.current)?.selection || DataRef.current.find(obj => obj.name == openAttriName.current)?.selection?.length == 0) {
+                tempPreviousSummary.current = props.newSum.sum
+            }
+            prevSum.current = props.newSum
+            openAttriName.current == ''
+            const updatedData = data?.map((obj) => {
+                if (obj.name === props.newSum?.attri) {
+                    return { ...obj, display: false, uniqValue: undefined, selection: undefined };
+                }
+                return obj
+            })
+            setProperty("data" as any, updatedData);
+        }
+    }, [data, props.newSum, setProperty])
+
+    return (
+        <>
+            <Box style={stickyStyle}>
+                {data && data.length > 9 ? <Search sx={{ border: 0.5, borderColor: 'var(--alertGrayForegroundHover)', marginLeft: '0px !important', marginRight: '0px' }} >
+                    <SearchIconWrapper>
+                        <SearchIcon />
+                    </SearchIconWrapper>
+                    <StyledInputBase
+                        placeholder="Search attribute name..."
+                        inputProps={{ 'aria-label': 'search' }}
+                        value={searchQuery}
+                        onChange={handleSearchChange}
+                        sx={{ padding: '1px', fontSize: '1.4rem', color: 'var(--alertGrayBackground)', width: '100%' }}
+                    />
+                    {searchQuery && (
+                        <IconButton
+                            onClick={() => { setProperty("searchQuery" as any, '') }}
+                            size="large"
+                            sx={{ position: 'absolute', right: '8px', color: 'var(--alertGrayBackground)' }}
+                        >
+                            <ClearIcon />
+                        </IconButton>
+                    )}
+                </Search> : <></>}
+                {sqlRule && (
+                <RadioGroup
+                    //Radio Group
+                    row
+                    aria-labelledby="demo-row-radio-buttons-group-label"
+                    name="row-radio-buttons-group"
+                    value={sqlRule}
+                    onChange={handleSqlRule}
+                >
+                    <FormControlLabel sx={{ fontSize: 15 }} value="AND" control={<Radio sx={{ color: 'var(--accentIconBorder) !important' }}
+                    />} label={<span style={{ fontSize: '1.2rem' }}>Meet ALL Conditions</span>} />
+                    <FormControlLabel sx={{ fontSize: 15 }} value="OR" control={<Radio sx={{ color: 'var(--accentIconBorder) !important' }} />} label={<span style={{ fontSize: '1.2rem' }}>Meet ANY Conditon</span>} />
+                </RadioGroup>
+                )}
+                {
+                    props.footerButton ?
+                        <Typography variant="body1" sx={{ fontSize: '1.5rem' }}>Selected items amount: {summary}</Typography>
+                        : <Stack spacing={2} direction="row">
+                            {props.buttonNaming?.[0] == " " ? <></> : <Button style={{ backgroundColor: summary <= 0 ? 'var(--alertForegroundDisabled)' : 'var(--accentIconForeground)' }} onClick={() => handleBtnClick(props.buttonNaming?.[0] || 'Apply')} variant="contained" size="medium" disabled={summary <= 0}>{(sqlRule == 'AND' || summary == 0 || recordTable?.length > 0) ? (props.buttonNaming?.[0] || 'Apply') + '(' + summary + ")" : (props.buttonNaming?.[0] || 'Apply') + '(' + summary + "+)"}</Button>
+                            }
+                            {props.buttonNaming?.slice(1).map((name, index) =>
+                                name.length > 0 ? (
+                                    <Button
+                                        key={index + 1}
+                                        style={{ backgroundColor: (name.endsWith("()") || name.endsWith("<>")) ? summary <= 0 ? 'var(--alertForegroundDisabled)' : 'var(--accentIconForeground)' : 'var(--accentIconForeground)' }}
+                                        onClick={() => handleBtnClick(name)}
+                                        variant="contained" size="medium"
+                                        disabled={(name.endsWith("()") || name.endsWith("<>"))
+                                            ? summary <= 0 : false}
+                                    >
+                                        {name.endsWith("()")
+                                            ? (sqlRule == 'AND' || summary == 0 ? `${name.slice(0, -2)}(${summary})` : `${name.slice(0, -2)}(${summary}+)`)
+                                            :
+                                            name.endsWith("<>") ? name.slice(0, -2) : name}
+                                    </Button>
+                                ) : null
+                            )}
+                            <Button style={{ backgroundColor: 'var(--accentIconForeground)' }} onClick={() => handleClearRulesClick()} variant="contained" size="medium" >Clear</Button>
+                        </Stack>
+                }
+
+            </Box>
+            <ThemeProvider theme={defaultTheme}>
+                {
+                    data && data.every(item => item.visible === false) ?
+                        <Typography variant="body1" sx={{ padding: '10px', fontSize: '2rem' }}>No matching attribute name</Typography>
+                        :
+                        searchQuery && searchQuery.length > 0 ?
+                            <List sx={{ width: '100%' }} component="nav">
+                                {data?.filter(attribute => attribute.visible).map((attribute) => renderAttribute(attribute))
+                                }
+                            </List> :
+                            <List sx={{ width: '100%' }} component="nav">
+                                {data && data.filter(attribute => !attribute.hidden).map((attribute) => renderAttribute(attribute))}
+                                {data && data.every(item => !item.hidden) ?
+                                    null :
+                                    <><ListItemButton onClick={toggleFolder}>
+                                        <Box
+                                            component="img"
+                                            sx={{
+                                                height: 22,
+                                                width: 22,
+                                            }}
+                                            alt="The category icon"
+                                            src={"https://cdn-icons-png.flaticon.com/512/3767/3767084.png"}// Use the item's img property or based on type
+                                        />
+                                        <ListItemText primary={folderOpen ? 'Hide' : 'Show all other Attributes..'}
+                                            sx={{ pl: 5 }} primaryTypographyProps={{ style: { fontWeight: 600, color: "grey" } }} />
+                                        {folderOpen ? <ExpandLess /> : <ExpandMore />}
+                                    </ListItemButton>
+                                        <Collapse in={folderOpen} timeout="auto" unmountOnExit>
+                                            <List component="div" disablePadding>
+                                                {data?.filter(attribute => attribute.hidden).map((attribute) => renderAttribute(attribute))}
+                                            </List>
+                                        </Collapse></>
+                                }
+                            </List>
+                }
+            </ThemeProvider>
+        </>
+    );
+}
+
+const AttributeFilterElementRegistration: FormElementRegistration<AttributeFilterProps> = {
+    component: AttributeFilter,
+    getInitialProperties: () => ({
+        fields: [{
+            alias: "OBJECTID",
+            display: false,
+            name: "OBJECTID",
+            type: "oid",
+            visible: true
+        },
+        {
+            alias: "Start Date",
+            display: false,
+            name: "StartDate",
+            type: "date",
+            visible: true
+        },
+        {
+            alias: "Requestor",
+            display: false,
+            name: "Requestor",
+            type: "string",
+            visible: true
+        }],
+    }),
+    id: "AttributeFilter",
+};
+
+export default AttributeFilterElementRegistration;