@itwin/grouping-mapping-widget 0.9.3 → 0.10.0

package/lib/esm/widget/components/Grouping.js

@@ -3,55 +3,26 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import { useActiveIModelConnection } from "@itwin/appui-react";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Button, ButtonGroup, DropdownMenu, IconButton, MenuItem, ProgressRadial, Surface, toaster, ToggleSwitch, } from "@itwin/itwinui-react";
-import { SvgAdd, SvgCursor, SvgDelete, SvgDraw, SvgEdit, SvgList, SvgMore, SvgSearch, SvgVisibilityHide, SvgVisibilityShow, } from "@itwin/itwinui-icons-react";
+import React, { useCallback, useEffect, useState } from "react";
+import { Button, ButtonGroup, DropdownMenu, IconButton, MenuItem, ProgressRadial, Surface, ToggleSwitch, } from "@itwin/itwinui-react";
+import { SvgAdd, SvgDelete, SvgEdit, SvgMore, SvgRefresh, SvgVisibilityHide, SvgVisibilityShow, } from "@itwin/itwinui-icons-react";
 import DeleteModal from "./DeleteModal";
 import "./Grouping.scss";
-import { PropertyMenu } from "./PropertyMenu";
-import { clearEmphasizedElements, clearEmphasizedOverriddenElements, clearHiddenElements, clearOverriddenElements, emphasizeElements, getHiliteIds, hideElements, hideElementsByQuery, overrideElements, zoomToElements, } from "./viewerUtils";
-import { EmptyMessage, handleError, LoadingOverlay, WidgetHeader, } from "./utils";
-import GroupAction from "./GroupAction";
+import { clearEmphasizedElements, clearEmphasizedOverriddenElements, clearHiddenElements, hideElements, zoomToElements, } from "./viewerUtils";
+import { EmptyMessage, handleError, LoadingOverlay, } from "./utils";
 import { useMappingClient } from "./context/MappingClientContext";
-import { FeatureOverrideType } from "@itwin/core-common";
 import { HorizontalTile } from "./HorizontalTile";
 import { useGroupingMappingApiConfig } from "./context/GroupingApiConfigContext";
 import { useGroupingMappingCustomUI } from "./context/GroupingMappingCustomUIContext";
 import { GroupingMappingCustomUIType } from "./customUI/GroupingMappingCustomUI";
-import { Presentation } from "@itwin/presentation-frontend";
-export const defaultUIMetadata = [
-    {
-        name: "Selection",
-        displayLabel: "Selection",
-        icon: React.createElement(SvgCursor, null),
-    },
-    {
-        name: "Search",
-        displayLabel: "Query Keywords",
-        icon: React.createElement(SvgSearch, null),
-    },
-    {
-        name: "Manual",
-        displayLabel: "Manual Query",
-        icon: React.createElement(SvgDraw, null),
-    },
-];
-var GroupsView;
-(function (GroupsView) {
-    GroupsView[GroupsView["Add"] = 0] = "Add";
-    GroupsView[GroupsView["Groups"] = 1] = "Groups";
-    GroupsView[GroupsView["CustomUI"] = 2] = "CustomUI";
-    GroupsView[GroupsView["Modifying"] = 3] = "Modifying";
-    GroupsView[GroupsView["Properties"] = 4] = "Properties";
-})(GroupsView || (GroupsView = {}));
-const goldenAngle = 180 * (3 - Math.sqrt(5));
+import { useGroupHilitedElementsContext } from "./context/GroupHilitedElementsContext";
+import { getGroupColor, getHiliteIdsFromGroups, hideGroups, visualizeGroupColors } from "./groupsHelpers";
 const fetchGroups = async (setGroups, iModelId, mappingId, setIsLoading, getAccessToken, mappingsClient) => {
     try {
         setIsLoading(true);
         const accessToken = await getAccessToken();
         const groups = await mappingsClient.getGroups(accessToken, iModelId, mappingId);
         setGroups(groups);
-        return groups;
     }
     catch (error) {
         handleError(error.status);
@@ -59,104 +30,57 @@ const fetchGroups = async (setGroups, iModelId, mappingId, setIsLoading, getAcce
     finally {
         setIsLoading(false);
     }
-    return undefined;
 };
-export const Groupings = ({ mapping, goBack }) => {
-    var _a, _b;
+export const Groupings = ({ mapping, onClickAddGroup, onClickGroupTitle, onClickGroupModify, onClickRenderContextCustomUI, emphasizeElements = true, }) => {
+    var _a;
     const iModelConnection = useActiveIModelConnection();
-    const { getAccessToken } = useGroupingMappingApiConfig();
+    const { getAccessToken, iModelId } = useGroupingMappingApiConfig();
+    const { showGroupColor, setShowGroupColor, hiddenGroupsIds, setHiddenGroupsIds, hilitedElementsQueryCache, groups, setGroups } = useGroupHilitedElementsContext();
     const mappingClient = useMappingClient();
-    const iModelId = (_a = useActiveIModelConnection()) === null || _a === void 0 ? void 0 : _a.iModelId;
-    const groupUIs = useGroupingMappingCustomUI()
+    const groupUIs = useGroupingMappingCustomUI().customUIs
         .filter((p) => p.type === GroupingMappingCustomUIType.Grouping);
-    const contextUIs = useGroupingMappingCustomUI()
+    const contextUIs = useGroupingMappingCustomUI().customUIs
         .filter((p) => p.type === GroupingMappingCustomUIType.Context);
     const [showDeleteModal, setShowDeleteModal] = useState(false);
     const [isLoading, setIsLoading] = useState(true);
-    const [groupsView, setGroupsView] = useState(GroupsView.Groups);
     const [selectedGroup, setSelectedGroup] = useState(undefined);
-    const hilitedElements = useRef(new Map());
     const [isLoadingQuery, setLoadingQuery] = useState(false);
-    const [groups, setGroups] = useState([]);
-    const [hiddenGroupsIds, setHiddenGroupsIds] = useState([]);
-    const [showGroupColor, setShowGroupColor] = useState(false);
-    const [queryGenerationType, setQueryGenerationType] = useState("Selection");
-    const [selectedContextCustomUI, setSelectedContextCustomUI] = useState(undefined);
-    useEffect(() => {
-        void fetchGroups(setGroups, iModelId, mapping.id, setIsLoading, getAccessToken, mappingClient);
-    }, [getAccessToken, mappingClient, iModelId, mapping.id]);
-    const getGroupColor = function (index) {
-        return `hsl(${index * goldenAngle + 60}, 100%, 50%)`;
-    };
-    const getHiliteIdsFromGroups = useCallback(async (groups) => {
-        var _a;
-        let allIds = [];
-        for (const group of groups) {
-            const query = group.query;
-            let currentIds = [];
-            if (hilitedElements.current.has(query)) {
-                currentIds = (_a = hilitedElements.current.get(query)) !== null && _a !== void 0 ? _a : [];
-            }
-            else {
-                try {
-                    const queryRowCount = await iModelConnection.queryRowCount(query);
-                    if (queryRowCount === 0) {
-                        toaster.warning(`${group.groupName}'s query is valid but produced no results.`);
-                    }
-                    currentIds = await getHiliteIds(query, iModelConnection);
-                    hilitedElements.current.set(query, currentIds);
-                }
-                catch {
-                    toaster.negative(`Could not hide/show ${group.groupName}. Query could not be resolved.`);
-                }
-            }
-            allIds = allIds.concat(currentIds);
-        }
-        return allIds;
-    }, [iModelConnection, hilitedElements]);
-    const visualizeGroupColors = useCallback(async (viewGroups) => {
+    const getHiliteIdsFromGroupsWrapper = useCallback(async (groups) => iModelConnection
+        ? getHiliteIdsFromGroups(iModelConnection, groups, hilitedElementsQueryCache)
+        : [], [iModelConnection, hilitedElementsQueryCache]);
+    const visualizeGroupColorsWrapper = useCallback(async (viewGroups) => {
+        if (!iModelConnection)
+            return;
         setLoadingQuery(true);
-        clearEmphasizedOverriddenElements();
-        let allIds = [];
-        for (const group of viewGroups) {
-            const index = viewGroups.length > groups.length
-                ? viewGroups.findIndex((g) => g.id === group.id)
-                : groups.findIndex((g) => g.id === group.id);
-            const hilitedIds = await getHiliteIdsFromGroups([group]);
-            overrideElements(hilitedIds, getGroupColor(index), FeatureOverrideType.ColorAndAlpha);
-            emphasizeElements(hilitedIds, undefined);
-            if (!hiddenGroupsIds.includes(group.id)) {
-                allIds = allIds.concat(hilitedIds);
-            }
-        }
-        await zoomToElements(allIds);
+        await visualizeGroupColors(iModelConnection, groups, viewGroups, hiddenGroupsIds, hilitedElementsQueryCache, emphasizeElements);
         setLoadingQuery(false);
-    }, [groups, hiddenGroupsIds, getHiliteIdsFromGroups]);
-    const hideGroups = useCallback(async (viewGroups) => {
-        var _a;
-        setLoadingQuery(true);
-        for (const viewGroup of viewGroups) {
-            const query = viewGroup.query;
-            if (hilitedElements.current.has(query)) {
-                const hilitedIds = (_a = hilitedElements.current.get(query)) !== null && _a !== void 0 ? _a : [];
-                hideElements(hilitedIds);
+    }, [iModelConnection, groups, hiddenGroupsIds, hilitedElementsQueryCache, emphasizeElements]);
+    useEffect(() => {
+        const initialize = async () => {
+            await fetchGroups(setGroups, iModelId, mapping.id, setIsLoading, getAccessToken, mappingClient);
+        };
+        void initialize();
+    }, [getAccessToken, mappingClient, iModelId, mapping.id, setGroups]);
+    useEffect(() => {
+        if (isLoading)
+            return;
+        const visualize = async () => {
+            if (groups.length > 0 && showGroupColor) {
+                await visualizeGroupColorsWrapper(groups);
             }
             else {
-                try {
-                    const queryRowCount = await iModelConnection.queryRowCount(query);
-                    if (queryRowCount === 0) {
-                        toaster.warning(`${viewGroup.groupName}'s query is valid but produced no results.`);
-                    }
-                    const hiliteIds = await hideElementsByQuery(query, iModelConnection, false);
-                    hilitedElements.current.set(query, hiliteIds);
-                }
-                catch {
-                    toaster.negative(`Could not hide/show ${viewGroup.groupName}. Query could not be resolved.`);
-                }
+                clearEmphasizedOverriddenElements();
             }
-        }
+        };
+        void visualize();
+    }, [groups, isLoading, showGroupColor, visualizeGroupColorsWrapper]);
+    const hideGroupsWrapper = useCallback(async (viewGroups) => {
+        if (!iModelConnection)
+            return;
+        setLoadingQuery(true);
+        await hideGroups(iModelConnection, viewGroups, hilitedElementsQueryCache);
         setLoadingQuery(false);
-    }, [iModelConnection]);
+    }, [hilitedElementsQueryCache, iModelConnection]);
     const showGroup = useCallback(async (viewGroup) => {
         clearHiddenElements();
         // hide group Ids filter
@@ -164,192 +88,113 @@ export const Groupings = ({ mapping, goBack }) => {
             .map((id) => groups.find((g) => g.id === id))
             .filter((g) => !!g && g.id !== viewGroup.id);
         // view group Ids filter
-        const viewIds = await getHiliteIdsFromGroups(groups.filter((g) => !newHiddenGroups.find((hg) => hg.id === g.id)));
-        let hiddenIds = await getHiliteIdsFromGroups(newHiddenGroups);
+        const viewIds = await getHiliteIdsFromGroupsWrapper(groups.filter((g) => !newHiddenGroups.find((hg) => hg.id === g.id)));
+        let hiddenIds = await getHiliteIdsFromGroupsWrapper(newHiddenGroups);
         hiddenIds = hiddenIds.filter((id) => !viewIds.includes(id));
         hideElements(hiddenIds);
-    }, [groups, hiddenGroupsIds, getHiliteIdsFromGroups]);
+    }, [groups, hiddenGroupsIds, getHiliteIdsFromGroupsWrapper]);
     const addGroup = (type) => {
-        setQueryGenerationType(type);
+        if (!onClickAddGroup)
+            return;
+        onClickAddGroup(type);
         clearEmphasizedElements();
-        setGroupsView(GroupsView.Add);
     };
     const onModify = async (group, type) => {
-        setQueryGenerationType(type);
-        setSelectedGroup(group);
-        setGroupsView(GroupsView.Modifying);
+        if (!onClickGroupModify)
+            return;
         if (group.id && hiddenGroupsIds.includes(group.id)) {
             await showGroup(group);
             setHiddenGroupsIds(hiddenGroupsIds.filter((id) => id !== group.id));
         }
         clearEmphasizedElements();
+        onClickGroupModify(group, type);
     };
-    const openProperties = async (group) => {
-        setSelectedGroup(group);
-        setGroupsView(GroupsView.Properties);
-        if (group.id && hiddenGroupsIds.includes(group.id)) {
+    const colorGroup = async (group) => {
+        if (showGroupColor && hiddenGroupsIds.includes(group.id)) {
             await showGroup(group);
             setHiddenGroupsIds(hiddenGroupsIds.filter((id) => id !== group.id));
         }
     };
     const refresh = useCallback(async () => {
-        setGroupsView(GroupsView.Groups);
         setSelectedGroup(undefined);
-        setSelectedContextCustomUI(undefined);
         setGroups([]);
-        const groups = await fetchGroups(setGroups, iModelId, mapping.id, setIsLoading, getAccessToken, mappingClient);
-        if (groups) {
-            if (showGroupColor) {
-                await visualizeGroupColors(groups);
-            }
-            else {
-                clearEmphasizedOverriddenElements();
-            }
-        }
-    }, [
-        getAccessToken,
-        mappingClient,
-        iModelId,
-        mapping.id,
-        setGroups,
-        showGroupColor,
-        visualizeGroupColors,
-    ]);
-    const resetView = async () => {
-        if (groups) {
-            if (showGroupColor) {
-                await visualizeGroupColors(groups);
-            }
-            else {
-                clearOverriddenElements();
-            }
-            clearEmphasizedElements();
-        }
-    };
+        await fetchGroups(setGroups, iModelId, mapping.id, setIsLoading, getAccessToken, mappingClient);
+    }, [getAccessToken, mappingClient, iModelId, mapping.id, setGroups]);
     const showAll = async () => {
         setLoadingQuery(true);
         clearHiddenElements();
         setHiddenGroupsIds([]);
-        const allIds = await getHiliteIdsFromGroups(groups);
+        const allIds = await getHiliteIdsFromGroupsWrapper(groups);
         await zoomToElements(allIds);
         setLoadingQuery(false);
     };
     const hideAll = useCallback(async () => {
-        await hideGroups(groups);
+        await hideGroupsWrapper(groups);
         setHiddenGroupsIds(groups.map((g) => g.id).filter((id) => !!id));
-        const allIds = await getHiliteIdsFromGroups(groups);
+        const allIds = await getHiliteIdsFromGroupsWrapper(groups);
         await zoomToElements(allIds);
-    }, [setHiddenGroupsIds, groups, hideGroups, getHiliteIdsFromGroups]);
-    const toggleGroupColor = useCallback(async (e) => {
-        if (e.target.checked) {
-            await visualizeGroupColors(groups);
-            setShowGroupColor(true);
-        }
-        else {
-            clearEmphasizedOverriddenElements();
-            setShowGroupColor(false);
-        }
-    }, [groups, visualizeGroupColors, setShowGroupColor]);
-    const propertyMenuGoBack = useCallback(async () => {
-        setGroupsView(GroupsView.Groups);
-        await refresh();
-    }, [refresh]);
-    switch (groupsView) {
-        case GroupsView.Add:
-            return (React.createElement(GroupAction, { iModelId: iModelId, mappingId: mapping.id, queryGenerationType: queryGenerationType, goBack: async () => {
-                    setGroupsView(GroupsView.Groups);
-                    await refresh();
-                }, resetView: resetView }));
-        case GroupsView.Modifying:
-            return selectedGroup ? (React.createElement(GroupAction, { iModelId: iModelId, mappingId: mapping.id, group: selectedGroup, queryGenerationType: queryGenerationType, goBack: async () => {
-                    setGroupsView(GroupsView.Groups);
-                    await refresh();
-                }, resetView: resetView })) : null;
-        case GroupsView.Properties:
-            return selectedGroup ? (React.createElement(PropertyMenu, { iModelId: iModelId, mappingId: mapping.id, group: selectedGroup, goBack: propertyMenuGoBack })) : null;
-        case GroupsView.Groups:
-            return (React.createElement(React.Fragment, null,
-                React.createElement(WidgetHeader, { title: mapping.mappingName, disabled: isLoading || isLoadingQuery, returnFn: async () => {
-                        clearEmphasizedOverriddenElements();
-                        await goBack();
-                    } }),
-                React.createElement(Surface, { className: 'gmw-groups-container' },
-                    React.createElement("div", { className: 'gmw-toolbar' },
-                        React.createElement(DropdownMenu, { className: 'gmw-custom-ui-dropdown', disabled: isLoadingQuery, menuItems: () => (groupUIs.length > 0
-                                ? groupUIs
-                                : defaultUIMetadata)
-                                .map((p, index) => (React.createElement(MenuItem, { key: index, onClick: () => addGroup(p.name), icon: p.icon, className: 'gmw-menu-item', "data-testid": `gmw-add-${index}` }, p.displayLabel))) },
-                            React.createElement(Button, { "data-testid": "gmw-add-group-button", className: 'add-load-button', startIcon: isLoadingQuery ? (React.createElement(ProgressRadial, { size: 'small', indeterminate: true })) : (React.createElement(SvgAdd, null)), styleType: 'high-visibility', disabled: isLoadingQuery }, isLoadingQuery ? "Loading" : "Add Group")),
-                        React.createElement(ButtonGroup, { className: 'gmw-toolbar-buttons' },
-                            React.createElement(ToggleSwitch, { label: 'Color by Group', labelPosition: 'left', className: 'gmw-toggle', disabled: isLoadingQuery, checked: showGroupColor, onChange: toggleGroupColor }),
-                            React.createElement(IconButton, { title: 'Show All', onClick: showAll, disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon' },
-                                React.createElement(SvgVisibilityShow, null)),
-                            React.createElement(IconButton, { title: 'Hide All', onClick: hideAll, disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon' },
-                                React.createElement(SvgVisibilityHide, null)))),
-                    isLoading ? (React.createElement(LoadingOverlay, null)) : groups.length === 0 ? (React.createElement(EmptyMessage, { message: 'No Groups available.' })) : (React.createElement("div", { className: 'gmw-group-list' }, groups
-                        .sort((a, b) => { var _a, _b, _c; return (_c = (_a = a.groupName) === null || _a === void 0 ? void 0 : _a.localeCompare((_b = b.groupName) !== null && _b !== void 0 ? _b : "")) !== null && _c !== void 0 ? _c : 1; })
-                        .map((g) => (React.createElement(HorizontalTile, { key: g.id, title: g.groupName ? g.groupName : "Untitled", subText: g.description, actionGroup: React.createElement("div", { className: 'gmw-actions' },
-                            showGroupColor && (React.createElement(IconButton, { styleType: 'borderless', className: 'gmw-group-view-icon' },
-                                React.createElement("div", { className: "gmw-color-legend", style: {
-                                        backgroundColor: getGroupColor(groups.findIndex((group) => g.id === group.id)),
-                                    } }))),
-                            g.id && hiddenGroupsIds.includes(g.id) ? (React.createElement(IconButton, { disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon', onClick: async () => {
-                                    await showGroup(g);
-                                    setHiddenGroupsIds(hiddenGroupsIds.filter((id) => g.id !== id));
-                                } },
-                                React.createElement(SvgVisibilityHide, null))) : (React.createElement(IconButton, { disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon', onClick: async () => {
-                                    await hideGroups([g]);
-                                    setHiddenGroupsIds(hiddenGroupsIds.concat(g.id ? [g.id] : []));
-                                } },
-                                React.createElement(SvgVisibilityShow, null))),
-                            React.createElement(DropdownMenu, { className: 'gmw-custom-ui-dropdown', disabled: isLoadingQuery, menuItems: (close) => [
-                                    React.createElement(MenuItem, { key: 0, icon: React.createElement(SvgEdit, null), disabled: isLoadingQuery, "data-testid": "gmw-context-menu-item", subMenuItems: (groupUIs.length > 0
-                                            ? groupUIs
-                                            : defaultUIMetadata)
-                                            .map((p, index) => (React.createElement(MenuItem, { key: index, className: 'gmw-menu-item', "data-testid": `gmw-edit-${index}`, onClick: async () => onModify(g, p.name), icon: p.icon }, p.displayLabel))) }, "Edit"),
-                                    React.createElement(MenuItem, { key: 1, onClick: async () => openProperties(g), icon: React.createElement(SvgList, null), "data-testid": "gmw-context-menu-item" }, "Properties"),
-                                    React.createElement(MenuItem, { key: 2, onClick: () => {
-                                            setSelectedGroup(g);
-                                            setShowDeleteModal(true);
-                                            close();
-                                        }, icon: React.createElement(SvgDelete, null), "data-testid": "gmw-context-menu-item" }, "Remove"),
-                                ].concat(contextUIs.map((p) => {
-                                    return React.createElement(MenuItem, { key: p.name, onClick: () => {
-                                            if (p.uiComponent) {
-                                                setSelectedGroup(g);
-                                                setSelectedContextCustomUI(p);
-                                                setGroupsView(GroupsView.CustomUI);
-                                            }
-                                            if (p.onClick) {
-                                                p.onClick(g.id, mapping.id, iModelId);
-                                            }
-                                            close();
-                                        }, icon: p.icon, "data-testid": "gmw-context-menu-item" }, p.displayLabel);
-                                })) },
-                                React.createElement(IconButton, { disabled: isLoadingQuery, styleType: 'borderless', "data-testid": "gmw-more-button" },
-                                    React.createElement(SvgMore, null)))), onClickTitle: isLoadingQuery
-                            ? undefined
-                            : async () => openProperties(g) })))))),
-                React.createElement(DeleteModal, { entityName: (_b = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.groupName) !== null && _b !== void 0 ? _b : "", show: showDeleteModal, setShow: setShowDeleteModal, onDelete: async () => {
-                        var _a;
-                        const accessToken = await getAccessToken();
-                        await mappingClient.deleteGroup(accessToken, iModelId, mapping.id, (_a = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.id) !== null && _a !== void 0 ? _a : "");
-                    }, refresh: refresh })));
-        case GroupsView.CustomUI:
-            return selectedContextCustomUI && selectedContextCustomUI.uiComponent && selectedGroup
-                ? (React.createElement(React.Fragment, null,
-                    React.createElement(WidgetHeader, { title: selectedContextCustomUI.displayLabel, returnFn: async () => {
-                            Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
-                            await refresh();
-                        } }),
-                    React.createElement(selectedContextCustomUI.uiComponent, {
-                        iModelId,
-                        mappingId: mapping.id,
-                        groupId: selectedGroup.id,
-                    })))
-                : null;
-        default:
-            return (React.createElement(EmptyMessage, { message: "No given group view" }));
-    }
+    }, [setHiddenGroupsIds, groups, hideGroupsWrapper, getHiliteIdsFromGroupsWrapper]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Surface, { className: 'gmw-groups-container' },
+            React.createElement("div", { className: 'gmw-toolbar' },
+                onClickAddGroup && groupUIs.length > 0 &&
+                    React.createElement(DropdownMenu, { className: 'gmw-custom-ui-dropdown', disabled: isLoadingQuery, menuItems: () => groupUIs.map((p, index) => (React.createElement(MenuItem, { key: index, onClick: () => addGroup(p.name), icon: p.icon, className: 'gmw-menu-item', "data-testid": `gmw-add-${index}` }, p.displayLabel))) },
+                        React.createElement(Button, { "data-testid": "gmw-add-group-button", className: 'add-load-button', startIcon: isLoadingQuery ? (React.createElement(ProgressRadial, { size: 'small', indeterminate: true })) : (React.createElement(SvgAdd, null)), styleType: 'high-visibility', disabled: isLoadingQuery }, isLoadingQuery ? "Loading" : "Add Group")),
+                iModelConnection &&
+                    React.createElement(ButtonGroup, { className: 'gmw-toolbar-buttons' },
+                        React.createElement(ToggleSwitch, { label: 'Color by Group', labelPosition: 'left', className: 'gmw-toggle', disabled: isLoadingQuery, checked: showGroupColor, onChange: () => setShowGroupColor((b) => !b) }),
+                        React.createElement(IconButton, { title: 'Show All', onClick: showAll, disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon' },
+                            React.createElement(SvgVisibilityShow, null)),
+                        React.createElement(IconButton, { title: 'Hide All', onClick: hideAll, disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon' },
+                            React.createElement(SvgVisibilityHide, null)),
+                        React.createElement(IconButton, { title: "Refresh", onClick: refresh, disabled: isLoading || isLoadingQuery, styleType: 'borderless' },
+                            React.createElement(SvgRefresh, null)))),
+            isLoading ? (React.createElement(LoadingOverlay, null)) : groups.length === 0 ? (React.createElement(EmptyMessage, { message: 'No Groups available.' })) : (React.createElement("div", { className: 'gmw-group-list' }, groups
+                .sort((a, b) => { var _a, _b, _c; return (_c = (_a = a.groupName) === null || _a === void 0 ? void 0 : _a.localeCompare((_b = b.groupName) !== null && _b !== void 0 ? _b : "")) !== null && _c !== void 0 ? _c : 1; })
+                .map((g) => (React.createElement(HorizontalTile, { key: g.id, title: g.groupName ? g.groupName : "Untitled", subText: g.description, actionGroup: React.createElement("div", { className: 'gmw-actions' },
+                    iModelConnection && React.createElement(React.Fragment, null,
+                        showGroupColor && (React.createElement(IconButton, { styleType: 'borderless', className: 'gmw-group-view-icon' },
+                            React.createElement("div", { className: "gmw-color-legend", style: {
+                                    backgroundColor: getGroupColor(groups.findIndex((group) => g.id === group.id)),
+                                } }))),
+                        g.id && hiddenGroupsIds.includes(g.id) ? (React.createElement(IconButton, { disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon', onClick: async () => {
+                                await showGroup(g);
+                                setHiddenGroupsIds(hiddenGroupsIds.filter((id) => g.id !== id));
+                            } },
+                            React.createElement(SvgVisibilityHide, null))) : (React.createElement(IconButton, { disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon', onClick: async () => {
+                                await hideGroupsWrapper([g]);
+                                setHiddenGroupsIds(hiddenGroupsIds.concat(g.id ? [g.id] : []));
+                            } },
+                            React.createElement(SvgVisibilityShow, null)))),
+                    React.createElement(DropdownMenu, { className: 'gmw-custom-ui-dropdown', disabled: isLoadingQuery, menuItems: (close) => [...(groupUIs.length > 0 && onClickGroupModify ?
+                                [React.createElement(MenuItem, { key: 0, icon: React.createElement(SvgEdit, null), disabled: isLoadingQuery, "data-testid": "gmw-context-menu-item", subMenuItems: groupUIs.map((p, index) => (React.createElement(MenuItem, { key: index, className: 'gmw-menu-item', "data-testid": `gmw-edit-${index}`, onClick: async () => onModify(g, p.name), icon: p.icon }, p.displayLabel))) }, "Edit")] : []),
+                            ...contextUIs.map((p) => {
+                                return React.createElement(MenuItem, { key: p.name, onClick: async () => {
+                                        showGroupColor && await showGroup(g);
+                                        if (p.uiComponent && onClickRenderContextCustomUI) {
+                                            onClickRenderContextCustomUI(p.uiComponent, g);
+                                        }
+                                        if (p.onClick) {
+                                            p.onClick(g, mapping, iModelId);
+                                        }
+                                        close();
+                                    }, icon: p.icon, "data-testid": "gmw-context-menu-item" }, p.displayLabel);
+                            }), React.createElement(MenuItem, { key: 2, onClick: () => {
+                                    setSelectedGroup(g);
+                                    setShowDeleteModal(true);
+                                    close();
+                                }, icon: React.createElement(SvgDelete, null), "data-testid": "gmw-context-menu-item" }, "Remove"),
+                        ] },
+                        React.createElement(IconButton, { disabled: isLoadingQuery, styleType: 'borderless', "data-testid": "gmw-more-button" },
+                            React.createElement(SvgMore, null)))), onClickTitle: onClickGroupTitle && !isLoadingQuery ?
+                    async () => {
+                        await colorGroup(g);
+                        onClickGroupTitle(g);
+                    } : undefined })))))),
+        React.createElement(DeleteModal, { entityName: (_a = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.groupName) !== null && _a !== void 0 ? _a : "", show: showDeleteModal, setShow: setShowDeleteModal, onDelete: async () => {
+                var _a;
+                const accessToken = await getAccessToken();
+                await mappingClient.deleteGroup(accessToken, iModelId, mapping.id, (_a = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.id) !== null && _a !== void 0 ? _a : "");
+            }, refresh: refresh })));
 };
 //# sourceMappingURL=Grouping.js.map