ebta-workflow-prod 1.1.2 → 4.0.1

package/src/elements/ItemSearcher.tsx

@@ -0,0 +1,1035 @@
+/* eslint-disable prefer-const */
+import * as React from "react";
+import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
+import { styled } from '@mui/material/styles';
+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 FolderCopyIcon from '@mui/icons-material/FolderCopy';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import SearchIcon from '@vertigis/web/ui/icons/Search';
+import InputBase from '@mui/material/InputBase';
+import Box from "@vertigis/web/ui/Box"
+import Typography from  '@vertigis/web/ui/Typography';
+import { createTheme } from "@mui/material/styles";
+import { ThemeProvider } from "@emotion/react";
+import Checkbox from '@vertigis/web/ui/Checkbox';
+import  IconButton  from '@vertigis/web/ui/IconButton';
+import { Category, Clear as ClearIcon } from '@mui/icons-material';
+import Chip from '@mui/material/Chip';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+
+
+/**
+ * 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 ItemSearcherDEVProps extends FormElementProps<string> { }
+
+/**
+ * Provide strictly structured item data to display them and search.
+ * @displayName ItemSearcherDEV
+ * @description Display list of items and allow user to search based on name, description & tag. 
+ * @param props     collapseIcon?: string;
+    expandIcon?: string;//replacing the drop down icon on right
+    checkbox?: boolean;//If true, make items selectable checkbox rather than click 
+    checkboxGroup?:boolean;//If true, make category itself selectable
+    triggerChange?:boolean;//If true, trigger changed event when being checkbox mode
+    simpleSearch?: boolean; // decide two mode in search result: clear Search show items only and rank them by relativity. If false, use filter on original Hierarchy, show items has keyword or group whose name has keyword and all its children.
+    initialCollapse?: boolean // decide whether collapse all group at beginning, default is collapse all
+ */
+
+const LightTooltip = styled(({ className, ...props }: TooltipProps) => (
+    <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+        boxShadow: theme.shadows[1],
+        fontSize: 10,
+    },
+}));
+
+
+
+const Search = styled('div')(({ theme }) => ({
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: 'var(--alertGrayForeground)',
+    marginRight: theme.spacing(2),
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+        marginLeft: theme.spacing(3),
+        width: 'auto',
+    },
+}));
+
+const SearchIconWrapper = styled('div')(({ theme }) => ({
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+
+}));
+
+interface Item {
+    name: string;
+    description?: string;
+    tag?: string[];
+    value?: any;
+    img?: string;
+    score?: number;
+    parentValue?: any;
+    action?: "displayLayer" | "tick";
+}
+
+interface Category {
+    name: string;
+    items?: Item[];
+    childCategory?: Category[];
+    collapsed?: boolean; //true to hide children. It's above setting Config initial collapse.
+    img?: string;
+    checkbox?: boolean;   //If true, show checkbox that makes all child items selected/unselected 
+    index?: number; //as a child Category, indicate the position of this child category compared to other sibling items/categories
+    parentCate?: string;
+    description?:string;
+}
+
+interface settingConfig {
+    checkbox?: boolean;   //If true, show checkbox rather than raise click event
+    collapseIcon?: string;//replace the fold up icon on right
+    expandIcon?: string;//replacing the drop down icon on right
+    triggerChange?: boolean;//If true, trigger changed event when under checkbox mode
+    simpleSearch?: boolean; // decide two mode in search result: clear Search show items only and rank them by relativity. If false, use filter on original Hierarchy, show items has keyword or group whose name has keyword and all its children.
+    initialCollapse?: boolean;// decide whether collapse all group at beginning, default is collapse all
+    tooltip?: "tag" | "description" | "value" | Array<"tag" | "description" | "value">;//tooltip of item content. Can be any combination of description, value (link etc), tag (property unvisible but used for searching)
+    searchHolder?: string; //Text placeholder used in search bar 
+    requestLayer?: boolean;//true if the item is a layer group url and need further process
+    reset?: number; //If loading another totally different content, give timestamp to reload itemData
+    showCount?: boolean;  // display item count after category name
+    flatResut?: boolean;//decide the output to be result/layer or result/group/layer
+    matchAnyKeyword?:boolean;//When search keywords (detected seperation by many spliters), fulfil all keywords or any of keyword.
+}
+
+interface ItemSearcherDEVProps {
+    itemData: Category[]; // Structured data passed as prop
+    setting?: settingConfig;
+    request?: { type: string, timestamp: number, data?: any };
+}
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+    color: 'inherit',
+    '& .MuiInputBase-input': {
+        padding: theme.spacing(1, 1, 1, 0),
+        paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+        transition: theme.transitions.create('width'),
+        width: '100%',
+        [theme.breakpoints.up('md')]: {
+            width: '100%',
+        },
+    },
+
+}));
+
+const defaultTheme = createTheme({
+    components: {
+        MuiListItemText: {
+            styleOverrides: {
+                secondary: {
+                    color: 'inherit',
+                },
+            },
+        },
+    },
+
+    typography: {
+        fontSize: 18
+    },
+});
+
+
+function expandIcon(collapseIcon: string, expandIcon: string, openCats, catName: string) {
+
+    // openCategories.has(category.name) ? <ExpandLess /> : <ExpandMore />
+    if (Boolean(expandIcon) && openCats.has(catName)) return (<Box
+        component="img"
+        sx={{
+            height: 18,
+            width: 18,
+            marginLeft: '8px',
+
+        }}
+        alt="The category icon"
+        src={expandIcon} // Use the item's img property
+    />)
+    else if (Boolean(collapseIcon) && !openCats.has(catName)) return (<Box
+        component="img"
+        sx={{
+            height: 18,
+            width: 18,
+            marginLeft: '8px',
+        }}
+        alt="The category icon"
+        src={collapseIcon} // Use the item's img property
+    />)
+    else if (!expandIcon && openCats.has(catName)) return (<ExpandLess />)
+    else if (!expandIcon && !openCats.has(catName)) return (<ExpandMore />)
+}
+
+
+
+// Function to get all items from category and its subcategories
+function ItemSearcherDEV(props: ItemSearcherDEVProps): React.ReactElement {
+    const { raiseEvent } = props;
+    const [data, setData] = React.useState<Category[]>(props.itemData);
+    const isFirstRender = React.useRef(true);
+    const preSearchOpenCategories = React.useRef<Set<string>>(new Set());
+    const loadDataTime = React.useRef<number>();
+    const currentOpenCategories = React.useRef<Set<string>>(new Set());
+    const prevSearchValue = React.useRef<string>('')
+    const [selection, setSelection] = React.useState<{ [key: string]: { [key: string]: Item[] } }>({});
+    const [openCategories, setOpenCategories] = React.useState<Set<string>>(new Set()); // Track open categories
+    const [searchQuery, setSearchQuery] = React.useState<string>(''); // Track search query
+    const [filteredData, setFilteredData] = React.useState<Category[]>([]); // New state for filtered data
+    const requestTime = React.useRef<number | null>(null);
+    // Handle search input changes
+    const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchQuery(event.target.value); // Update search query
+    };
+
+
+    function findCategory(item: Item) {
+        return props.itemData.find(category =>
+            category.items?.some(existingItem => existingItem.value == item.value)
+        ) || data[0];
+    }
+
+    function tickItem(item: Item, category: Category) {
+        let selectCopy = structuredClone(selection)
+        if (isSelected(item, category.name)) {
+            //uncheck item
+            for (let key in selectCopy) {
+                let element = selectCopy[key]
+                // Check if the element is an object containing nested arrays of Items
+                for (let subKey in element) {
+                    if (element[subKey]) {
+                        let index = element[subKey].findIndex(a => a.name === item.name && (a.value === item.value || a.description === item.description));
+                        if (index !== -1) {
+                            element[subKey].splice(index, 1);
+                            // If the subcategory is empty after removal, delete the subcategory
+                            if (element[subKey].length === 0) {
+                                delete element[subKey];
+                            }
+                        }
+                    }
+                }
+                if (Object.values(selectCopy[key]).length == 0) {
+                    delete selectCopy[key];
+                }// If the category is empty after removal, delete the category
+            }
+        }
+
+
+        else {// Add the item to the specified category
+            if (category) {
+
+                if (category.parentCate) {
+                    if (!selectCopy[category.parentCate]) {
+                        selectCopy[category.parentCate] = {};
+                    }
+                    if (!selectCopy[category.parentCate][category.name]) {
+                        selectCopy[category.parentCate][category.name] = [];
+                    }
+                    selectCopy[category.parentCate][category.name].push((delete item.score, item));
+                }
+                else {
+                    if (!selectCopy[category.name]) {
+                        selectCopy[category.name] = {};
+                    }
+                    if (!selectCopy[category.name]["directItem"]) {
+                        selectCopy[category.name]["directItem"] = [];
+                    }
+                    selectCopy[category.name]["directItem"].push((delete item.score, item));
+                }
+            }
+        }
+        setSelection(selectCopy)
+    }
+
+    // Handle click on items to raise an event
+    const handleItemClick = (item: Item, category: Category) => {
+        if (props.setting?.checkbox) {
+            if (props.setting?.triggerChange) {
+                raiseEvent("changed", JSON.stringify(item)); // Pass the entire item data structure
+            }
+            if (props.setting?.requestLayer && item.action == "displayLayer") {
+                raiseEvent("clicked", JSON.stringify({ action: "openLayer", data: item })); // Pass the entire item data structure
+            }
+            if (!props.setting?.requestLayer || !(item.action == "displayLayer")) {
+                tickItem(item, category)
+            }
+        }
+        else {
+            raiseEvent("clicked", JSON.stringify(item)); // Pass the entire item data structure
+        }
+    };
+
+    const handleCategoryCheck = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, category: Category) => {
+        event.stopPropagation();
+        let selectCopy = structuredClone(selection)
+        // Process items of the current category
+        if (!category.parentCate) {
+            //only one level
+            if (category.items) {
+                if (isChildSelected(category) == "allSelected") {
+                    // If item is selected, uncheck it (for "allSelected" case)
+                    delete selectCopy[category.name];
+                }
+                else {
+                    for (let item of category.items) {
+                        if (!isSelected(item, category.name)) {
+                            // If item is not selected, check it
+                            if (!selectCopy[category.name]) {
+                                selectCopy[category.name]={}
+                                selectCopy[category.name]["directItem"] = [];
+                            }
+                            selectCopy[category.name]["directItem"].push((delete item.score, item));
+                        }
+                    }
+                }
+            }
+
+            // Process child categories recursively
+            if (category.childCategory) {
+                for (let child of category.childCategory) {
+                    handleCategoryCheck(event, child);
+                }
+            }
+        }
+        else {
+            //two levels
+            if (category.items) {
+                if (isChildSelected(category) == "allSelected") {
+                    // If all selected, remove all
+                    delete selectCopy[category.parentCate][category.name]
+                }
+                else {
+                    for (let item of category.items) {
+                        if (!isSelected(item, category.name)) {
+                            if (!selectCopy[category.parentCate]) {
+                                selectCopy[category.parentCate] = {};
+                            }
+                            // If item is not selected, check it
+                            if (!selectCopy[category.parentCate][category.name]) {
+                                selectCopy[category.parentCate][category.name] = [];
+                            }
+                            selectCopy[category.parentCate][category.name].push((delete item.score, item));
+                        }
+                    }
+                }
+            }
+
+            // Process child categories recursively
+            if (category.childCategory) {
+                for (let child of category.childCategory) {
+                    handleCategoryCheck(event, child);
+                }
+            }
+
+
+
+        }
+
+
+        setSelection(selectCopy)
+    };
+
+
+    // Handle category toggle open/close manually
+    const handleCategoryToggle = (categoryName: string) => {
+        setOpenCategories((prevState) => {
+            const newState = new Set(prevState);
+            if (newState.has(categoryName)) {
+                newState.delete(categoryName); // Close category if it's already open
+            } else {
+                newState.add(categoryName); // Open category if it's closed
+            }
+            return newState;
+        });
+    };
+
+
+    function countAllItems(category: Category): number {
+        let itemCount = 0;
+
+        // Add items of the current category (if any)
+        if (category.items) {
+            itemCount += category.items.length;
+        }
+
+        // Recursively count items in child categories (if any)
+        if (category.childCategory) {
+            category.childCategory.forEach(childCategory => {
+                itemCount += countAllItems(childCategory);  // Recursive call for each child category
+            });
+        }
+
+        return itemCount;
+    }
+
+    function isSelected(item: Item, cateName?: string) {
+        // Type guard to check if an element is an Item
+        if (!cateName) {
+            for (let key in selection) {
+                for (let subkey in selection[key]) {
+                    let index = selection[key][subkey].findIndex(a => a.name === item.name && a.value === item.value);
+                    if (index !== -1) {
+                        return true;
+                    }
+                }
+            }
+        }
+        else {
+            if (selection[cateName]?.["directItem"]) {
+                let index = selection[cateName]["directItem"].findIndex(a => a.name === item.name && a.value === item.value);
+                if (index !== -1) {
+                    return true;
+                }
+            }
+            
+                for (let key in selection) {
+                    if (selection[key][cateName]) {
+                        let index = selection[key][cateName].findIndex(a => a.name === item.name && a.value === item.value);
+                        if (index !== -1) {
+                            return true;
+                        }
+                    }
+                }
+        }
+        return false;
+    }
+
+
+    const isChildSelected = (category: Category) => {
+        let allSelected = true;
+        let partSelected = false;
+        let noneSelected = true;
+
+        // Check items of the current category
+        if (category.items) {
+            for (let item of category.items) {
+                const selected = isSelected(item, category.name);
+                if (selected) {
+                    partSelected = true;
+                    noneSelected = false;
+                } else {
+                    allSelected = false;
+                }
+            }
+        }
+
+        // Recursively check child categories
+        if (category.childCategory) {
+            for (let child of category.childCategory) {
+                const childStatus = isChildSelected(child);
+                if (childStatus === 'notSelected') {
+                    noneSelected = true;
+                } else if (childStatus === 'partSelected') {
+                    partSelected = true;
+                } else if (childStatus === 'allSelected') {
+                    allSelected = true;
+                }
+            }
+        }
+
+        // Determine the category selection state
+        if (allSelected) return 'allSelected';
+        if (partSelected) return 'partSelected';
+        if (noneSelected) return 'notSelected';
+        return "error"
+    }
+
+
+
+
+    // Get search rank for an item based on search query
+    const getSearchRank = (item: Item, query: string) => {
+        const keywords = query.split(/[\s,+;]+/).map((word) => word.trim().toLowerCase()).filter(Boolean);
+        let score = 0;
+
+        keywords.forEach((keyword) => {
+            if (item.name.toLowerCase().includes(keyword)) score += 2.5;
+            else if (item.description && item.description.toLowerCase().includes(keyword)) score += 2;
+            else if (item.tag && item.tag.some((tag) => tag.toLowerCase().includes(keyword))) score += 1.5;
+        });
+
+        return score;
+    };
+
+
+
+
+    // Recursively get all items from category and its child categories
+    function getAllItemsFromCategory(category: Category): Item[] {
+        let flattenItems: Item[] = [];
+
+        if (category.items) {
+            flattenItems = category.items.map((item) => ({
+                ...item,
+                score: getSearchRank(item, searchQuery),
+            }));
+        }
+
+        if (category.childCategory && Array.isArray(category.childCategory)) {
+            for (const child of category.childCategory) {
+                flattenItems = flattenItems.concat(getAllItemsFromCategory(child));
+            }
+        }
+
+        return flattenItems;
+    }
+
+    const sumSelection = (category: Category): Item[] => {
+        let result: Item[] = []
+        if (!category.parentCate) {
+            //category is first level, get all direct item and child cate items
+            for (let key in selection[category.name]) {
+                result = result.concat(selection[category.name][key])
+            }
+        }
+        else {
+            result = selection[category.parentCate]?.[category.name] || []
+        }
+
+        return result.length > 0 ? result : [];
+    };
+
+
+    function cleanSelection(selection: { [key1: string]: { [key2: string]: Item[] } }) {
+        for (const key1 in selection) {
+          if (Object.keys(selection[key1]).length>0) {
+            const key2Object = selection[key1];
+      
+            // Iterate over key2 within key1
+            for (const key2 in key2Object) {
+              if (key2Object.key2) {
+                // If key2 has an empty array, delete the key2
+                if (key2Object[key2].length === 0) {
+                  delete key2Object[key2];
+                }
+              }
+            }
+      
+            // If key1 has no more key2s left, delete key1
+            if (Object.keys(key2Object).length === 0) {
+              delete selection[key1];
+            }
+          }
+          else{
+            delete selection[key1]
+          }
+        }
+        return selection;
+      }
+      
+
+      const getMergedChildren = (category: Category) => {
+        const items = category.items || [];
+        const childCategories = category.childCategory || [];
+    
+        // Convert items to an array with type marker
+        const itemsWithType = items.map(item => ({
+            type: 'item',
+            content: item
+        }));
+    
+        // Convert child categories to an array with type marker
+        const categoriesWithType = childCategories.map(category => ({
+            type: 'category',
+            content: category
+        }));
+    
+        // Sort categories alphabetically by name
+        categoriesWithType.sort((a, b) => 
+            a.content.name.localeCompare(b.content.name)
+        );
+    
+        // Sort items alphabetically by name
+        itemsWithType.sort((a, b) => 
+            a.content.name.localeCompare(b.content.name)
+        );
+    
+        // Return categories first, then items (both already sorted alphabetically)
+        return [...categoriesWithType, ...itemsWithType];
+    };
+
+    // Filter items based on the search query
+    const filteredItems = data
+        .flatMap((category) => getAllItemsFromCategory(category))
+        .map((item) => ({
+            ...item,
+            score: getSearchRank(item, searchQuery),
+        }))
+        .filter((item) => item.score > 0)
+        .sort((a, b) => b.score - a.score); // Sort by total score in descending order
+
+
+    React.useEffect(() => {
+        if (isFirstRender.current) {
+            const initialOpenCategories = new Set<string>();
+            const totalCollapse = props.setting?.initialCollapse ?? false;
+
+            const processCategoryForCollapse = (category: Category) => {
+                if (category.collapsed === false ||
+                    (category.collapsed === undefined && !totalCollapse)) {
+                    initialOpenCategories.add(category.name);
+                }
+                category.childCategory?.forEach(processCategoryForCollapse);
+            };
+
+            data.forEach(processCategoryForCollapse);
+            setOpenCategories(initialOpenCategories);
+            isFirstRender.current = false;
+        }
+    }, [data, props.setting]);
+
+
+
+    React.useEffect(() => {
+        function filterData(data: Category[], query: string): Category[] {
+            const keywords = query.split(/[\s,+;]+/).map((word) => word.trim().toLowerCase()).filter(Boolean);
+    
+            function searchCategory(category: Category): Category | null {
+            // Different matching logic based on the matchAnyKeyword setting
+            let categoryMatches: boolean;
+            
+            if (props.setting?.matchAnyKeyword) {
+                // ANY keyword matching (original logic) - using regex
+                const keywordRegex = new RegExp(keywords.join("|"), "i");
+                categoryMatches = keywordRegex.test(category.name);
+                
+                // Filter items based on name, description, or tags
+                const matchedItems = category.items?.filter(item =>
+                    keywordRegex.test(item.name) ||
+                    (item.description && keywordRegex.test(item.description)) ||
+                    (item.tag && item.tag.some(tag => keywordRegex.test(tag)))
+                );
+                
+                // Recursively filter child categories
+                const matchedChildCategories = category.childCategory
+                    ?.map(childCat => searchCategory(childCat))
+                    .filter((childCat): childCat is Category => childCat !== null);
+                
+                if (categoryMatches) {
+                    return {
+                        ...category,
+                        items: category.items || [],
+                        childCategory: category.childCategory || []
+                    };
+                }
+                
+                // If no match in the category name, check if items or child categories match
+                if ((matchedItems && matchedItems.length > 0) || (matchedChildCategories && matchedChildCategories.length > 0)) {
+                    return {
+                        ...category,
+                        items: matchedItems || [],
+                        childCategory: matchedChildCategories || []
+                    };
+                }
+            } else {
+                // ALL keywords matching logic
+                categoryMatches = keywords.every(keyword => 
+                    category.name.toLowerCase().includes(keyword)
+                );
+                
+                // Filter items that match ALL keywords
+                const matchedItems = category.items?.filter(item =>
+                    keywords.every(keyword => 
+                        item.name.toLowerCase().includes(keyword) ||
+                        (item.description && item.description.toLowerCase().includes(keyword)) ||
+                        (item.tag && item.tag.some(tag => tag.toLowerCase().includes(keyword)))
+                    )
+                );
+                
+                // Recursively filter child categories
+                const matchedChildCategories = category.childCategory
+                    ?.map(childCat => searchCategory(childCat))
+                    .filter((childCat): childCat is Category => childCat !== null);
+                
+                if (categoryMatches) {
+                    return {
+                        ...category,
+                        items: category.items || [],
+                        childCategory: category.childCategory || []
+                    };
+                }
+                
+                // If no match in the category name, check if items or child categories match
+                if ((matchedItems && matchedItems.length > 0) || (matchedChildCategories && matchedChildCategories.length > 0)) {
+                    return {
+                        ...category,
+                        items: matchedItems || [],
+                        childCategory: matchedChildCategories || []
+                    };
+                }
+            }
+    
+            // Exclude this category if no matches found in items or child categories
+            return null;
+        }
+    
+    
+            // Apply the search to each root category and filter out null results
+            const result = data.map(category => searchCategory(category)).filter((cat): cat is Category => cat !== null);
+            return result
+    
+        }
+    
+
+        if (searchQuery) {
+            // Store the current state when search begins
+            if (searchQuery.length === 1) {
+                preSearchOpenCategories.current = new Set(currentOpenCategories.current);
+            }
+
+            const searchResults = filterData(data, searchQuery);
+            setFilteredData(searchResults);
+
+            // Expand categories with search results
+            const searchOpenCategories = new Set<string>();
+            const addToOpenCategories = (category: Category) => {
+                searchOpenCategories.add(category.name);
+                category.childCategory?.forEach(addToOpenCategories);
+            };
+
+            searchResults.forEach(addToOpenCategories);
+            setOpenCategories(searchOpenCategories);
+        }
+        if (!searchQuery) {
+            // Restore pre-search state if exists
+            if (prevSearchValue.current==''){
+                currentOpenCategories.current = openCategories;
+            }
+            else {
+            if (preSearchOpenCategories.current.size > 0) {
+                setOpenCategories(preSearchOpenCategories.current);
+                setFilteredData([]);
+                preSearchOpenCategories.current = new Set()
+            }
+            return;
+        }
+    }
+        prevSearchValue.current=searchQuery
+
+    }, [searchQuery, data, props.setting?.matchAnyKeyword, openCategories]);
+
+
+
+    // Render categories with items and nested child categories
+    const renderCategory = (category: Category, level: number): React.ReactNode => {
+
+        function truncateString(str) {
+            if (str.length > 10) {
+                return str.substring(0, 8) + '...';
+            }
+            return str;
+        }
+        const chipLabel = () => {
+            return sumSelection(category)?.length > 0 ?
+                sumSelection(category)?.length > 1 ?
+                    sumSelection(category).length + " selected" :
+                    truncateString(sumSelection(category)[0].name)
+                : ""
+        }
+
+        const handleDeleteSelection = (category: Category) => {
+            if (category.parentCate) {
+                const updatedSelection = { ...selection };
+                updatedSelection[category.parentCate][category.name] = [];
+                setSelection(updatedSelection);
+            } else {
+                const updatedSelection = { ...selection };
+                updatedSelection[category.name] = {};
+                setSelection(updatedSelection);
+            }
+
+        };
+
+        const chipElement = (
+            <Chip
+                label={chipLabel()}
+                sx={{
+                    fontSize: '1.1rem',
+                    color: 'var(--accentIconBackground)',
+                    backgroundColor: 'var(--alertAmberBackground)',
+                    '& .MuiChip-deleteIcon': { color: 'var(--accentIconBackground)' }
+
+                }}
+                onDelete={() => handleDeleteSelection(category)}
+            />
+        );
+
+        const itemContent = (item: Item, cateName?: string) => (<div style={{ display: 'flex', alignItems: 'center' }}>
+
+            {item.img && typeof item.img === 'string' && item.img.trim() !== '' && (
+                <Box
+                    component="img"
+                    sx={{
+                        height: 18,
+                        width: 18,
+                        marginLeft: '8px',
+                    }}
+                    alt="The item icon"
+                    src={item.img} // Use the item's img property
+                />
+            )}
+            {props.setting?.checkbox ? <ListItemIcon sx={{ minWidth: '35px' }}>
+                <Checkbox sx={{ color: 'var(--accentIconBorder) !important' }} checked={isSelected(item, cateName)} />
+            </ListItemIcon> : null}
+
+            <ListItemText primary={item.name} secondary={item.description} sx={{ pl: item.img ? 2 : 0 }} primaryTypographyProps={{ style: { fontWeight: (900 - 200 * (level + 1)).toString()} }}   secondaryTypographyProps={{ style: { fontWeight: "300" } }}/>
+        </div>)
+        return (
+            <React.Fragment key={category.name}>
+                <ListItemButton onClick={() => handleCategoryToggle(category.name)} sx={{ pl: level * 2, py:0  , minHeight:'35px'}}> 
+                    {props.setting?.checkbox && category.checkbox ?
+                        <ListItemIcon sx={{ minHeight:'35px' }}>
+                            <Checkbox sx={{ color: 'var(--accentIconBorder) !important' }}
+                                checked={['allSelected', 'partSelected'].includes(isChildSelected(category))}
+                                onClick={(event) => handleCategoryCheck(event, category)}
+                            />
+                        </ListItemIcon> : null
+                    }
+                    {category.img && typeof category.img === 'string' && category.img.trim() !== '' ? (
+                        <Box
+                            component="img"
+                            sx={{
+                                height: 18,
+                                width: 18,
+                                marginLeft: '8px',
+                            }}
+                            alt="The category icon"
+                            src={category.img} // Use the item's img property
+                        />
+                    ) : (<ListItemIcon sx={{ minWidth: '20px' }}>
+                        <FolderCopyIcon  sx={{ color: "var(--accentIconForeground)" }} />
+                    </ListItemIcon>)
+                    }
+                    <ListItemText primary={props.setting?.showCount ? category.name + ` (${countAllItems(category)})` : category.name} secondary={category.description}   sx={{ pl: 1 }} primaryTypographyProps={{ style: {fontWeight: (900 - level * 200).toString() ,fontSize:level==0?'1.2rem':undefined} }}  secondaryTypographyProps={{ style: { fontWeight: "300" } }}/>
+                    {//selection chip
+                        props.setting?.checkbox && sumSelection(category).length > 0 ?
+                            <LightTooltip
+                                title={sumSelection(category).map(a => a.name).join(',')}
+                                arrow>
+                                {chipElement}
+                            </LightTooltip>
+                            : <></>
+                    }
+                    {expandIcon(props.setting?.collapseIcon ?? '', props.setting?.expandIcon ?? '', openCategories, category.name)}
+                </ListItemButton>
+                <Collapse in={openCategories.has(category.name)} timeout="auto" unmountOnExit>
+                    <List component="div" disablePadding>
+                        {getMergedChildren(category).map((child, idx) => {
+                            if (child.type === 'item') {
+                                const item:Item = child.content;
+                                return (
+                                    <ListItemButton
+                                        sx={{ pl: (level + 1) * 2, py:0 , minHeight:'35px'}}
+                                        key={`item-${idx}`}
+                                        onClick={() => handleItemClick(item, category)}
+                                    >
+                                        {props.setting?.tooltip ? (
+                                            typeof props.setting?.tooltip == "string" ? (
+                                                <LightTooltip title={item[props.setting?.tooltip]}  arrow>
+                                                    {itemContent(item,category.name)}
+                                                </LightTooltip>
+                                            ) : (
+                                                <LightTooltip
+                                                    title={props.setting?.tooltip.map(key => item[key]).join(" ; ")}
+                                                    arrow
+                                                >
+                                                    {itemContent(item,category.name)}
+                                                </LightTooltip>
+                                            )
+                                        ) : (
+                                            itemContent(item,category.name)
+                                        )}
+                                    </ListItemButton>
+                                );
+                            } else {
+                                // Render child category
+                                const childCategory = child.content;
+                                return renderCategory(childCategory, level + 1);
+                            }
+                        })}
+                    </List>
+                </Collapse>
+            </React.Fragment>
+        );
+    };
+    React.useEffect(() => {
+
+        function removeDirectItems() {
+            let selectCopy = structuredClone(selection)
+            let result = {}
+            for (let key in selection) {
+                result[key] = selectCopy[key].directItem;
+            }
+            return result;
+        }
+
+        if (props.setting?.checkbox && props.request && props.request.type == "submit" && (requestTime.current) !== (props.request.timestamp)) {
+            raiseEvent("clicked", JSON.stringify({ action: "submit", selectionResult: props.setting.flatResut ? removeDirectItems() : cleanSelection(selection) })); // Pass the entire item data structure
+            requestTime.current = props.request.timestamp;
+        }
+        if (props.setting?.checkbox && props.request && props.request.type == "clearSelection" && (requestTime.current) !== (props.request.timestamp)) {
+            setSelection({})
+            requestTime.current = props.request.timestamp;
+        }
+
+    }, [props.request, props.setting, raiseEvent, selection])
+
+
+    React.useEffect(() => {
+        if (props.request && props.request.type == "displayLayer" && (requestTime.current) !== (props.request.timestamp)) {
+            let dataCopy = structuredClone(data)
+
+            dataCopy.forEach((category: Category) => {
+                if (category.items) {
+                    const item = category.items.find(item => item.name === props.request?.data.title);
+                    const foundindex = category.items.findIndex(item => item.name === props.request?.data.title) - 1;
+                    if (item !== undefined) {
+                        if (!category.childCategory) {
+                            category.childCategory = [];
+                        }
+                        category.childCategory.push({
+                            name: props.request?.data.title,
+                            index: foundindex,
+                            checkbox: true,
+                            items: props.request?.data.layers.map(sublayer => ({
+                                "name": sublayer.title,
+                                "value": sublayer.id,
+                                "parentName": item.name,
+                                "parentValue": item.value,
+                            }))
+                        })
+                        category.items = category.items.filter(item => item.name !== props.request?.data.title);
+                        setOpenCategories((prevState) => {
+                            const newState = new Set(prevState);
+                            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                            newState.add(props.request?.data.title || ''); // Open category if it's closed
+                            return newState;
+                        });
+                    }
+                }
+            })
+            setData(dataCopy)
+            requestTime.current = props.request.timestamp
+        }
+    }, [data, props.request])
+
+    React.useEffect(() => {
+        if (props.setting?.reset && (loadDataTime.current) !== (props.setting.reset)) {
+            setData(props.itemData)
+            setSelection({})
+            setOpenCategories(new Set())
+            setSearchQuery('')
+            loadDataTime.current = props.setting.reset
+        }
+    }, [props])
+
+
+
+
+    return (
+        <>
+            <Search sx={{ border: 2, borderColor: 'var(--alertGrayForegroundHover)', marginLeft: '0px !important', marginRight: '0px' }} >
+                <SearchIconWrapper>
+                    <SearchIcon />
+                </SearchIconWrapper>
+                <StyledInputBase
+                    placeholder={props.setting?.searchHolder || "Search…"}
+                    inputProps={{ 'aria-label': 'search' }}
+                    value={searchQuery}
+                    onChange={handleSearchChange}
+                    sx={{ padding: '1px', fontSize: '1.4rem', color: 'var(--accentIconBorder) !important', width: '100%' }}
+                />
+                {searchQuery && (
+                    <IconButton
+                        onClick={() => { setSearchQuery('') }}
+                        size="large"
+                        sx={{ position: 'absolute', right: '8px', color: 'var(--alertGrayBackground) !important' }}
+                    >
+                        <ClearIcon />
+                    </IconButton>
+                )}
+            </Search>
+
+            <ThemeProvider theme={defaultTheme}>
+
+                <List sx={{ width: '100%' }} component="nav">
+                    {props.setting?.simpleSearch && searchQuery && filteredItems.length > 0 ? (
+                        filteredItems.map((item, index) => (
+                            <ListItemButton key={index} sx={{minHeight:'35px'}}>
+                                {item.img && typeof item.img === 'string' && item.img.trim() !== '' && (
+                                    <Box
+                                        component="img"
+                                        sx={{
+                                            height: 18,
+                                            width: 18,
+                                            marginLeft: '8px',
+                                        }}
+                                        alt="The item icon"
+                                        src={item.img} // Use the item's img property
+                                    />
+                                )}
+                                {props.setting?.checkbox ? <ListItemIcon sx={{ minWidth: '35px' }}>
+                                    <Checkbox sx={{ color: 'var(--accentIconBorder) !important' }} checked={isSelected(item)} />
+                                </ListItemIcon> : null}
+                                <ListItemText
+                                    primary={item.name}
+                                    secondary={item.description}
+                                    onClick={() => handleItemClick(item, findCategory(item))}
+                                    primaryTypographyProps={{ style: { fontWeight: '600' } }}
+                                />
+
+                            </ListItemButton>
+                        ))
+                    ) : searchQuery && filteredData.length > 0 ?
+                        (
+                            filteredData.map((category) => renderCategory(category, 0))
+                        ) :
+                        searchQuery && filteredData.length === 0 ? (
+                            <Typography variant="body1" sx={{ padding: '10px', fontSize: '1.5rem' }}>No result found</Typography>
+                        ) : (
+                            data.map((category) => renderCategory(category, 0))
+                        )}
+                </List>
+
+
+            </ThemeProvider>
+        </>
+    );
+}
+
+const ItemSearcherDEVElementRegistration: FormElementRegistration<ItemSearcherDEVProps> = {
+    component: ItemSearcherDEV,
+    id: "ItemSearcher",
+    getInitialProperties: () => ({
+        itemData: [{name:"Cate1",items:[{name:"ItemA"}]},{name:"Cate2",checkbox:true,items:[{name:"ItemB"}]}],
+        setting: {initialCollapse:true,checkbox:true,showCount:true},
+    }),
+};
+
+export default ItemSearcherDEVElementRegistration;