@itwin/grouping-mapping-widget 0.13.0 → 0.14.0

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

@@ -27,23 +27,19 @@ exports.Groupings = void 0;
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-const appui_react_1 = require("@itwin/appui-react");
 const react_1 = __importStar(require("react"));
 const itwinui_react_1 = require("@itwin/itwinui-react");
 const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 const DeleteModal_1 = __importDefault(require("./DeleteModal"));
 require("./Grouping.scss");
-const viewerUtils_1 = require("./viewerUtils");
 const utils_1 = require("./utils");
 const MappingClientContext_1 = require("./context/MappingClientContext");
-const HorizontalTile_1 = require("./HorizontalTile");
 const GroupingApiConfigContext_1 = require("./context/GroupingApiConfigContext");
 const GroupingMappingCustomUIContext_1 = require("./context/GroupingMappingCustomUIContext");
 const GroupingMappingCustomUI_1 = require("./customUI/GroupingMappingCustomUI");
 const GroupHilitedElementsContext_1 = require("./context/GroupHilitedElementsContext");
-const groupsHelpers_1 = require("./groupsHelpers");
-const ToggleGroupVisibility_1 = require("./ToggleGroupVisibility");
 const GroupsAddButton_1 = require("./GroupsAddButton");
+const GroupItem_1 = require("./GroupItem");
 const fetchGroups = async (setGroups, iModelId, mappingId, setIsLoading, getAccessToken, mappingsClient) => {
     try {
         setIsLoading(true);
@@ -58,160 +54,36 @@ const fetchGroups = async (setGroups, iModelId, mappingId, setIsLoading, getAcce
         setIsLoading(false);
     }
 };
-const Groupings = ({ mapping, onClickAddGroup, onClickGroupTitle, onClickGroupModify, onClickRenderContextCustomUI, emphasizeElements = true, isNonEmphasizedSelectable = false, }) => {
-    const iModelConnection = appui_react_1.useActiveIModelConnection();
+const Groupings = ({ mapping, actionButtonRenderers, onClickAddGroup, onClickGroupTitle, onClickGroupModify, onClickRenderContextCustomUI, disableActions, }) => {
     const { getAccessToken, iModelId } = GroupingApiConfigContext_1.useGroupingMappingApiConfig();
-    const { showGroupColor, setShowGroupColor, hiddenGroupsIds, setHiddenGroupsIds, hilitedElementsQueryCache, groups, setGroups } = GroupHilitedElementsContext_1.useGroupHilitedElementsContext();
+    const { groups, setGroups } = GroupHilitedElementsContext_1.useGroupHilitedElementsContext();
     const mappingClient = MappingClientContext_1.useMappingClient();
-    const groupUIs = GroupingMappingCustomUIContext_1.useGroupingMappingCustomUI().customUIs
-        .filter((p) => p.type === GroupingMappingCustomUI_1.GroupingMappingCustomUIType.Grouping);
-    const contextUIs = GroupingMappingCustomUIContext_1.useGroupingMappingCustomUI().customUIs
-        .filter((p) => p.type === GroupingMappingCustomUI_1.GroupingMappingCustomUIType.Context);
+    const groupUIs = GroupingMappingCustomUIContext_1.useGroupingMappingCustomUI().customUIs.filter((p) => p.type === GroupingMappingCustomUI_1.GroupingMappingCustomUIType.Grouping);
+    const contextUIs = GroupingMappingCustomUIContext_1.useGroupingMappingCustomUI().customUIs.filter((p) => p.type === GroupingMappingCustomUI_1.GroupingMappingCustomUIType.Context);
     const [showDeleteModal, setShowDeleteModal] = react_1.useState(undefined);
     const [isLoading, setIsLoading] = react_1.useState(true);
-    const [isLoadingQuery, setLoadingQuery] = react_1.useState(false);
-    const getHiliteIdsFromGroupsWrapper = react_1.useCallback(async (groups) => iModelConnection
-        ? groupsHelpers_1.getHiliteIdsFromGroups(iModelConnection, groups, hilitedElementsQueryCache)
-        : [], [iModelConnection, hilitedElementsQueryCache]);
-    const visualizeGroupColorsWrapper = react_1.useCallback(async (viewGroups) => {
-        if (!iModelConnection)
-            return;
-        setLoadingQuery(true);
-        await groupsHelpers_1.visualizeGroupColors(iModelConnection, groups, viewGroups, hiddenGroupsIds, hilitedElementsQueryCache, emphasizeElements);
-        isNonEmphasizedSelectable && viewerUtils_1.clearEmphasizedElements();
-        setLoadingQuery(false);
-    }, [iModelConnection, groups, hiddenGroupsIds, hilitedElementsQueryCache, emphasizeElements, isNonEmphasizedSelectable]);
     react_1.useEffect(() => {
         const initialize = async () => {
             await fetchGroups(setGroups, iModelId, mapping.id, setIsLoading, getAccessToken, mappingClient);
         };
         void initialize();
     }, [getAccessToken, mappingClient, iModelId, mapping.id, setGroups]);
-    react_1.useEffect(() => {
-        if (isLoading)
-            return;
-        const visualize = async () => {
-            if (groups.length > 0 && showGroupColor) {
-                await visualizeGroupColorsWrapper(groups);
-            }
-            else {
-                viewerUtils_1.clearEmphasizedOverriddenElements();
-            }
-        };
-        void visualize();
-    }, [groups, isLoading, showGroupColor, visualizeGroupColorsWrapper]);
-    const hideGroupsWrapper = react_1.useCallback(async (viewGroups) => {
-        if (!iModelConnection)
-            return;
-        setLoadingQuery(true);
-        await groupsHelpers_1.hideGroups(iModelConnection, viewGroups, hilitedElementsQueryCache);
-        setLoadingQuery(false);
-    }, [hilitedElementsQueryCache, iModelConnection]);
-    const showGroup = react_1.useCallback(async (viewGroup) => {
-        viewerUtils_1.clearHiddenElements();
-        // hide group Ids filter
-        const newHiddenGroups = hiddenGroupsIds
-            .map((id) => groups.find((g) => g.id === id))
-            .filter((g) => !!g && g.id !== viewGroup.id);
-        // view group Ids filter
-        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));
-        viewerUtils_1.hideElements(hiddenIds);
-    }, [groups, hiddenGroupsIds, getHiliteIdsFromGroupsWrapper]);
-    const addGroup = (type) => {
+    const addGroup = react_1.useCallback((type) => {
         if (!onClickAddGroup)
             return;
         onClickAddGroup(type);
-        viewerUtils_1.clearEmphasizedElements();
-    };
-    const onModify = async (group, type) => {
-        if (!onClickGroupModify)
-            return;
-        if (group.id && hiddenGroupsIds.includes(group.id)) {
-            await showGroup(group);
-            setHiddenGroupsIds(hiddenGroupsIds.filter((id) => id !== group.id));
-        }
-        viewerUtils_1.clearEmphasizedElements();
-        onClickGroupModify(group, type);
-    };
-    const colorGroup = async (group) => {
-        if (showGroupColor && hiddenGroupsIds.includes(group.id)) {
-            await showGroup(group);
-            setHiddenGroupsIds(hiddenGroupsIds.filter((id) => id !== group.id));
-        }
-    };
+    }, [onClickAddGroup]);
     const refresh = react_1.useCallback(async () => {
-        setGroups([]);
         await fetchGroups(setGroups, iModelId, mapping.id, setIsLoading, getAccessToken, mappingClient);
     }, [getAccessToken, mappingClient, iModelId, mapping.id, setGroups]);
-    const showAll = async () => {
-        setLoadingQuery(true);
-        viewerUtils_1.clearHiddenElements();
-        setHiddenGroupsIds([]);
-        const allIds = await getHiliteIdsFromGroupsWrapper(groups);
-        await viewerUtils_1.zoomToElements(allIds);
-        setLoadingQuery(false);
-    };
-    const hideAll = react_1.useCallback(async () => {
-        await hideGroupsWrapper(groups);
-        setHiddenGroupsIds(groups.map((g) => g.id).filter((id) => !!id));
-        const allIds = await getHiliteIdsFromGroupsWrapper(groups);
-        await viewerUtils_1.zoomToElements(allIds);
-    }, [setHiddenGroupsIds, groups, hideGroupsWrapper, getHiliteIdsFromGroupsWrapper]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(itwinui_react_1.Surface, { className: 'gmw-groups-container' },
-            react_1.default.createElement("div", { className: 'gmw-toolbar' },
-                onClickAddGroup && groupUIs.length > 0 ? (react_1.default.createElement(GroupsAddButton_1.GroupsAddButton, { isLoadingQuery: isLoadingQuery, groupUIs: groupUIs, onClickAddGroup: addGroup })) : (react_1.default.createElement(ToggleGroupVisibility_1.ToggleGroupVisibility, { isLoadingQuery: isLoadingQuery, showGroupColor: showGroupColor, setShowGroupColor: setShowGroupColor })),
-                iModelConnection &&
-                    react_1.default.createElement(itwinui_react_1.ButtonGroup, { className: 'gmw-toolbar-buttons' },
-                        onClickAddGroup && groupUIs.length > 0 && (react_1.default.createElement(ToggleGroupVisibility_1.ToggleGroupVisibility, { isLoadingQuery: isLoadingQuery, showGroupColor: showGroupColor, setShowGroupColor: setShowGroupColor })),
-                        react_1.default.createElement(itwinui_react_1.IconButton, { title: 'Show All', onClick: showAll, disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon' },
-                            react_1.default.createElement(itwinui_icons_react_1.SvgVisibilityShow, null)),
-                        react_1.default.createElement(itwinui_react_1.IconButton, { title: 'Hide All', onClick: hideAll, disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon' },
-                            react_1.default.createElement(itwinui_icons_react_1.SvgVisibilityHide, null)),
-                        react_1.default.createElement(itwinui_react_1.IconButton, { title: "Refresh", onClick: refresh, disabled: isLoading || isLoadingQuery, styleType: 'borderless' },
-                            react_1.default.createElement(itwinui_icons_react_1.SvgRefresh, null)))),
-            isLoading ? (react_1.default.createElement(utils_1.LoadingOverlay, null)) : groups.length === 0 ? (react_1.default.createElement(utils_1.EmptyMessage, { message: 'No Groups available.' })) : (react_1.default.createElement("div", { className: 'gmw-group-list' }, groups
-                .map((g) => (react_1.default.createElement(HorizontalTile_1.HorizontalTile, { key: g.id, title: g.groupName ? g.groupName : "Untitled", subText: g.description, actionGroup: react_1.default.createElement("div", { className: 'gmw-actions' },
-                    iModelConnection && react_1.default.createElement(react_1.default.Fragment, null,
-                        showGroupColor && (react_1.default.createElement(itwinui_react_1.IconButton, { styleType: 'borderless', className: 'gmw-group-view-icon' },
-                            react_1.default.createElement("div", { className: "gmw-color-legend", style: {
-                                    backgroundColor: groupsHelpers_1.getGroupColor(groups.findIndex((group) => g.id === group.id)),
-                                } }))),
-                        g.id && hiddenGroupsIds.includes(g.id) ? (react_1.default.createElement(itwinui_react_1.IconButton, { disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon', onClick: async () => {
-                                await showGroup(g);
-                                setHiddenGroupsIds(hiddenGroupsIds.filter((id) => g.id !== id));
-                            } },
-                            react_1.default.createElement(itwinui_icons_react_1.SvgVisibilityHide, null))) : (react_1.default.createElement(itwinui_react_1.IconButton, { disabled: isLoadingQuery, styleType: 'borderless', className: 'gmw-group-view-icon', onClick: async () => {
-                                await hideGroupsWrapper([g]);
-                                setHiddenGroupsIds(hiddenGroupsIds.concat(g.id ? [g.id] : []));
-                            } },
-                            react_1.default.createElement(itwinui_icons_react_1.SvgVisibilityShow, null)))),
-                    react_1.default.createElement(itwinui_react_1.DropdownMenu, { className: 'gmw-custom-ui-dropdown', disabled: isLoadingQuery, menuItems: (close) => [...(groupUIs.length > 0 && onClickGroupModify ?
-                                [react_1.default.createElement(itwinui_react_1.MenuItem, { key: 0, icon: react_1.default.createElement(itwinui_icons_react_1.SvgEdit, null), disabled: isLoadingQuery, "data-testid": "gmw-context-menu-item", subMenuItems: groupUIs.map((p, index) => (react_1.default.createElement(itwinui_react_1.MenuItem, { key: index, className: 'gmw-menu-item', "data-testid": `gmw-edit-${index}`, onClick: async () => { await onModify(g, p.name); close(); }, icon: p.icon }, p.displayLabel))) }, "Edit")] : []),
-                            ...contextUIs.map((p) => {
-                                return react_1.default.createElement(itwinui_react_1.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_1.default.createElement(itwinui_react_1.MenuItem, { key: 2, onClick: () => {
-                                    setShowDeleteModal(g);
-                                    close();
-                                }, icon: react_1.default.createElement(itwinui_icons_react_1.SvgDelete, null), "data-testid": "gmw-context-menu-item" }, "Remove"),
-                        ] },
-                        react_1.default.createElement(itwinui_react_1.IconButton, { disabled: isLoadingQuery, styleType: 'borderless', "data-testid": "gmw-more-button" },
-                            react_1.default.createElement(itwinui_icons_react_1.SvgMore, null)))), onClickTitle: onClickGroupTitle && !isLoadingQuery ?
-                    async () => {
-                        await colorGroup(g);
-                        onClickGroupTitle(g);
-                    } : undefined })))))),
+        react_1.default.createElement(itwinui_react_1.Surface, { className: "gmw-groups-container" },
+            react_1.default.createElement("div", { className: "gmw-toolbar" },
+                onClickAddGroup && groupUIs.length > 0 && (react_1.default.createElement(GroupsAddButton_1.GroupsAddButton, { disabled: disableActions, groupUIs: groupUIs, onClickAddGroup: addGroup })),
+                react_1.default.createElement(itwinui_react_1.ButtonGroup, { className: "gmw-toolbar-buttons" },
+                    react_1.default.createElement(itwinui_react_1.IconButton, { title: "Refresh", onClick: refresh, disabled: isLoading || disableActions, styleType: "borderless" },
+                        react_1.default.createElement(itwinui_icons_react_1.SvgRefresh, null)))),
+            isLoading ? (react_1.default.createElement(utils_1.LoadingOverlay, null)) : groups.length === 0 ? (react_1.default.createElement(utils_1.EmptyMessage, { message: "No Groups available." })) : (react_1.default.createElement("div", { className: "gmw-group-list" }, groups.map((g) => (react_1.default.createElement(GroupItem_1.GroupItem, { key: g.id, mapping: mapping, group: g, groupUIs: groupUIs, contextUIs: contextUIs, actionButtonRenderers: actionButtonRenderers, onClickGroupTitle: onClickGroupTitle, onClickGroupModify: onClickGroupModify, onClickRenderContextCustomUI: onClickRenderContextCustomUI, disableActions: disableActions, setShowDeleteModal: setShowDeleteModal })))))),
         react_1.default.createElement(DeleteModal_1.default, { entityName: showDeleteModal === null || showDeleteModal === void 0 ? void 0 : showDeleteModal.groupName, onClose: () => setShowDeleteModal(undefined), onDelete: async () => {
                 var _a;
                 const accessToken = await getAccessToken();

package/lib/cjs/widget/components/Grouping.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grouping.js","sourceRoot":"","sources":["../../../../src/widget/components/Grouping.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport type { CreateTypeFromInterface } from \"../utils\";\nimport {\n  ButtonGroup,\n  DropdownMenu,\n  IconButton,\n  MenuItem,\n  Surface,\n} from \"@itwin/itwinui-react\";\nimport {\n  SvgDelete,\n  SvgEdit,\n  SvgMore,\n  SvgRefresh,\n  SvgVisibilityHide,\n  SvgVisibilityShow,\n} from \"@itwin/itwinui-icons-react\";\nimport DeleteModal from \"./DeleteModal\";\nimport \"./Grouping.scss\";\nimport {\n  clearEmphasizedElements,\n  clearEmphasizedOverriddenElements,\n  clearHiddenElements,\n  hideElements,\n  zoomToElements,\n} from \"./viewerUtils\";\nimport {\n  EmptyMessage,\n  handleError,\n  LoadingOverlay,\n} from \"./utils\";\nimport type { Group, IMappingsClient, Mapping } from \"@itwin/insights-client\";\nimport { useMappingClient } from \"./context/MappingClientContext\";\nimport { HorizontalTile } from \"./HorizontalTile\";\nimport type { GetAccessTokenFn } from \"./context/GroupingApiConfigContext\";\nimport { useGroupingMappingApiConfig } from \"./context/GroupingApiConfigContext\";\nimport { useGroupingMappingCustomUI } from \"./context/GroupingMappingCustomUIContext\";\nimport { GroupingMappingCustomUIType } from \"./customUI/GroupingMappingCustomUI\";\nimport type { ContextCustomUI, GroupingCustomUI } from \"./customUI/GroupingMappingCustomUI\";\nimport { useGroupHilitedElementsContext } from \"./context/GroupHilitedElementsContext\";\nimport { getGroupColor, getHiliteIdsFromGroups, hideGroups, visualizeGroupColors } from \"./groupsHelpers\";\nimport { ToggleGroupVisibility } from \"./ToggleGroupVisibility\";\nimport { GroupsAddButton } from \"./GroupsAddButton\";\n\nexport type IGroupTyped = CreateTypeFromInterface<Group>;\n\nexport interface GroupingProps {\n  mapping: Mapping;\n  onClickAddGroup?: (queryGenerationType: string) => void;\n  onClickGroupTitle?: (group: Group) => void;\n  onClickGroupModify?: (group: Group, queryGenerationType: string) => void;\n  onClickRenderContextCustomUI?: (contextCustomUI: Exclude<ContextCustomUI[\"uiComponent\"], undefined>, group: Group) => void;\n  isNonEmphasizedSelectable?: boolean;\n  emphasizeElements?: boolean;\n}\n\nconst fetchGroups = async (\n  setGroups: (groups: Group[]) => void,\n  iModelId: string,\n  mappingId: string,\n  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,\n  getAccessToken: GetAccessTokenFn,\n  mappingsClient: IMappingsClient,\n): Promise<void> => {\n  try {\n    setIsLoading(true);\n    const accessToken = await getAccessToken();\n    const groups = await mappingsClient.getGroups(\n      accessToken,\n      iModelId,\n      mappingId,\n    );\n    setGroups(groups.sort((a, b) => a.groupName.localeCompare(b.groupName)));\n  } catch (error: any) {\n    handleError(error.status);\n  } finally {\n    setIsLoading(false);\n  }\n};\n\nexport const Groupings = ({\n  mapping,\n  onClickAddGroup,\n  onClickGroupTitle,\n  onClickGroupModify,\n  onClickRenderContextCustomUI,\n  emphasizeElements = true,\n  isNonEmphasizedSelectable = false,\n}: GroupingProps) => {\n  const iModelConnection = useActiveIModelConnection();\n  const { getAccessToken, iModelId } = useGroupingMappingApiConfig();\n  const { showGroupColor, setShowGroupColor, hiddenGroupsIds, setHiddenGroupsIds, hilitedElementsQueryCache, groups, setGroups } = useGroupHilitedElementsContext();\n  const mappingClient = useMappingClient();\n  const groupUIs: GroupingCustomUI[] = useGroupingMappingCustomUI().customUIs\n    .filter((p) => p.type === GroupingMappingCustomUIType.Grouping) as GroupingCustomUI[];\n  const contextUIs: ContextCustomUI[] = useGroupingMappingCustomUI().customUIs\n    .filter((p) => p.type === GroupingMappingCustomUIType.Context) as ContextCustomUI[];\n  const [showDeleteModal, setShowDeleteModal] = useState<Group | undefined>(undefined);\n  const [isLoading, setIsLoading] = useState<boolean>(true);\n  const [isLoadingQuery, setLoadingQuery] = useState<boolean>(false);\n\n  const getHiliteIdsFromGroupsWrapper = useCallback(\n    async (groups: Group[]): Promise<string[]> =>\n      iModelConnection\n        ? getHiliteIdsFromGroups(\n          iModelConnection,\n          groups,\n          hilitedElementsQueryCache\n        )\n        : [],\n    [iModelConnection, hilitedElementsQueryCache]\n  );\n\n  const visualizeGroupColorsWrapper = useCallback(\n    async (viewGroups: Group[]) => {\n      if (!iModelConnection) return;\n      setLoadingQuery(true);\n      await visualizeGroupColors(iModelConnection, groups, viewGroups, hiddenGroupsIds, hilitedElementsQueryCache, emphasizeElements);\n      isNonEmphasizedSelectable && clearEmphasizedElements();\n      setLoadingQuery(false);\n    },\n    [iModelConnection, groups, hiddenGroupsIds, hilitedElementsQueryCache, emphasizeElements, isNonEmphasizedSelectable],\n  );\n\n  useEffect(() => {\n    const initialize = async () => {\n      await fetchGroups(\n        setGroups,\n        iModelId,\n        mapping.id,\n        setIsLoading,\n        getAccessToken,\n        mappingClient,\n      );\n    };\n    void initialize();\n  }, [getAccessToken, mappingClient, iModelId, mapping.id, setGroups]);\n\n  useEffect(() => {\n    if (isLoading) return;\n    const visualize = async () => {\n      if (groups.length > 0 && showGroupColor) {\n        await visualizeGroupColorsWrapper(groups);\n      } else {\n        clearEmphasizedOverriddenElements();\n      }\n    };\n    void visualize();\n  }, [groups, isLoading, showGroupColor, visualizeGroupColorsWrapper]);\n\n  const hideGroupsWrapper = useCallback(\n    async (viewGroups: Group[]) => {\n      if (!iModelConnection) return;\n      setLoadingQuery(true);\n      await hideGroups(iModelConnection, viewGroups, hilitedElementsQueryCache);\n      setLoadingQuery(false);\n    },\n    [hilitedElementsQueryCache, iModelConnection],\n  );\n\n  const showGroup = useCallback(\n    async (viewGroup: Group) => {\n      clearHiddenElements();\n\n      // hide group Ids filter\n      const newHiddenGroups: Group[] = hiddenGroupsIds\n        .map((id) => groups.find((g) => g.id === id))\n        .filter((g): g is Group => !!g && g.id !== viewGroup.id);\n\n      // view group Ids filter\n      const viewIds = await getHiliteIdsFromGroupsWrapper(\n        groups.filter((g) => !newHiddenGroups.find((hg) => hg.id === g.id)),\n      );\n      let hiddenIds = await getHiliteIdsFromGroupsWrapper(newHiddenGroups);\n      hiddenIds = hiddenIds.filter((id) => !viewIds.includes(id));\n      hideElements(hiddenIds);\n    },\n    [groups, hiddenGroupsIds, getHiliteIdsFromGroupsWrapper],\n  );\n\n  const addGroup = (type: string) => {\n    if (!onClickAddGroup) return;\n    onClickAddGroup(type);\n    clearEmphasizedElements();\n  };\n\n  const onModify = async (group: Group, type: string) => {\n    if (!onClickGroupModify) return;\n    if (group.id && hiddenGroupsIds.includes(group.id)) {\n      await showGroup(group);\n      setHiddenGroupsIds(hiddenGroupsIds.filter((id) => id !== group.id));\n    }\n    clearEmphasizedElements();\n    onClickGroupModify(group, type);\n  };\n\n  const colorGroup = async (group: Group) => {\n    if (showGroupColor && hiddenGroupsIds.includes(group.id)) {\n      await showGroup(group);\n      setHiddenGroupsIds(hiddenGroupsIds.filter((id) => id !== group.id));\n    }\n  };\n\n  const refresh = useCallback(async () => {\n    setGroups([]);\n    await fetchGroups(\n      setGroups,\n      iModelId,\n      mapping.id,\n      setIsLoading,\n      getAccessToken,\n      mappingClient,\n    );\n  }, [getAccessToken, mappingClient, iModelId, mapping.id, setGroups]);\n\n  const showAll = async () => {\n    setLoadingQuery(true);\n\n    clearHiddenElements();\n    setHiddenGroupsIds([]);\n    const allIds = await getHiliteIdsFromGroupsWrapper(groups);\n    await zoomToElements(allIds);\n\n    setLoadingQuery(false);\n  };\n\n  const hideAll = useCallback(async () => {\n    await hideGroupsWrapper(groups);\n    setHiddenGroupsIds(\n      groups.map((g) => g.id).filter((id): id is string => !!id),\n    );\n    const allIds = await getHiliteIdsFromGroupsWrapper(groups);\n    await zoomToElements(allIds);\n  }, [setHiddenGroupsIds, groups, hideGroupsWrapper, getHiliteIdsFromGroupsWrapper]);\n\n  return (\n    <>\n      <Surface className='gmw-groups-container'>\n        <div className='gmw-toolbar'>\n          {onClickAddGroup && groupUIs.length > 0 ? (\n            <GroupsAddButton\n              isLoadingQuery={isLoadingQuery}\n              groupUIs={groupUIs}\n              onClickAddGroup={addGroup}\n            />\n          ) : (\n            <ToggleGroupVisibility\n              isLoadingQuery={isLoadingQuery}\n              showGroupColor={showGroupColor}\n              setShowGroupColor={setShowGroupColor}\n            />\n          )}\n          {iModelConnection &&\n            <ButtonGroup className='gmw-toolbar-buttons'>\n              {onClickAddGroup && groupUIs.length > 0 && (\n                <ToggleGroupVisibility\n                  isLoadingQuery={isLoadingQuery}\n                  showGroupColor={showGroupColor}\n                  setShowGroupColor={setShowGroupColor}\n                />\n              )}\n              <IconButton\n                title='Show All'\n                onClick={showAll}\n                disabled={isLoadingQuery}\n                styleType='borderless'\n                className='gmw-group-view-icon'\n              >\n                <SvgVisibilityShow />\n              </IconButton>\n              <IconButton\n                title='Hide All'\n                onClick={hideAll}\n                disabled={isLoadingQuery}\n                styleType='borderless'\n                className='gmw-group-view-icon'\n              >\n                <SvgVisibilityHide />\n              </IconButton>\n              <IconButton\n                title=\"Refresh\"\n                onClick={refresh}\n                disabled={isLoading || isLoadingQuery}\n                styleType='borderless'\n              >\n                <SvgRefresh />\n              </IconButton>\n            </ButtonGroup>}\n        </div>\n        {isLoading ? (\n          <LoadingOverlay />\n        ) : groups.length === 0 ? (\n          <EmptyMessage message='No Groups available.' />\n        ) : (\n          <div className='gmw-group-list'>\n            {groups\n              .map((g) => (\n                <HorizontalTile\n                  key={g.id}\n                  title={g.groupName ? g.groupName : \"Untitled\"}\n                  subText={g.description}\n                  actionGroup={\n                    <div className='gmw-actions'>\n                      {iModelConnection && <>\n                        {showGroupColor && (\n                          <IconButton\n                            styleType='borderless'\n                            className='gmw-group-view-icon'\n                          >\n                            <div\n                              className=\"gmw-color-legend\"\n                              style={{\n                                backgroundColor: getGroupColor(groups.findIndex((group) => g.id === group.id)),\n                              }}\n                            />\n                          </IconButton>\n                        )}\n                        {g.id && hiddenGroupsIds.includes(g.id) ? (\n                          <IconButton\n                            disabled={isLoadingQuery}\n                            styleType='borderless'\n                            className='gmw-group-view-icon'\n                            onClick={async () => {\n                              await showGroup(g);\n                              setHiddenGroupsIds(\n                                hiddenGroupsIds.filter((id) => g.id !== id),\n                              );\n                            }}\n                          >\n                            <SvgVisibilityHide />\n                          </IconButton>\n                        ) : (\n                          <IconButton\n                            disabled={isLoadingQuery}\n                            styleType='borderless'\n                            className='gmw-group-view-icon'\n                            onClick={async () => {\n                              await hideGroupsWrapper([g]);\n                              setHiddenGroupsIds(\n                                hiddenGroupsIds.concat(g.id ? [g.id] : []),\n                              );\n                            }}\n                          >\n                            <SvgVisibilityShow />\n                          </IconButton>\n                        )}\n                      </>}\n                      <DropdownMenu\n                        className='gmw-custom-ui-dropdown'\n                        disabled={isLoadingQuery}\n                        menuItems={(close: () => void) =>\n                          [...(groupUIs.length > 0 && onClickGroupModify ?\n                            [<MenuItem\n                              key={0}\n                              icon={<SvgEdit />}\n                              disabled={isLoadingQuery}\n                              data-testid=\"gmw-context-menu-item\"\n                              subMenuItems={\n                                groupUIs.map((p, index) => (\n                                  <MenuItem\n                                    key={index}\n                                    className='gmw-menu-item'\n                                    data-testid={`gmw-edit-${index}`}\n                                    onClick={async () => { await onModify(g, p.name); close(); }}\n                                    icon={p.icon}\n                                  >\n                                    {p.displayLabel}\n                                  </MenuItem>\n                                ))\n                              }\n                            >\n                              Edit\n                            </MenuItem>] : []),\n                          ...contextUIs.map((p) => {\n                            return <MenuItem\n                              key={p.name}\n                              onClick={async () => {\n                                showGroupColor && await showGroup(g);\n                                if (p.uiComponent && onClickRenderContextCustomUI) {\n                                  onClickRenderContextCustomUI(p.uiComponent, g);\n                                }\n                                if (p.onClick) {\n                                  p.onClick(g, mapping, iModelId);\n                                }\n                                close();\n                              }}\n                              icon={p.icon}\n                              data-testid=\"gmw-context-menu-item\"\n                            >\n                              {p.displayLabel}\n                            </MenuItem>;\n                          }),\n                          <MenuItem\n                            key={2}\n                            onClick={() => {\n                              setShowDeleteModal(g);\n                              close();\n                            }}\n                            icon={<SvgDelete />}\n                            data-testid=\"gmw-context-menu-item\"\n                          >\n                            Remove\n                          </MenuItem>,\n                          ]\n                        }\n                      >\n                        <IconButton\n                          disabled={isLoadingQuery}\n                          styleType='borderless'\n                          data-testid=\"gmw-more-button\"\n                        >\n                          <SvgMore />\n                        </IconButton>\n                      </DropdownMenu>\n                    </div>\n                  }\n                  onClickTitle={\n                    onClickGroupTitle && !isLoadingQuery ?\n                      async () => {\n                        await colorGroup(g);\n                        onClickGroupTitle(g);\n                      } : undefined\n                  }\n                />\n              ))}\n          </div>\n        )}\n      </Surface>\n      <DeleteModal\n        entityName={showDeleteModal?.groupName}\n        onClose={() => setShowDeleteModal(undefined)}\n        onDelete={async () => {\n          const accessToken = await getAccessToken();\n          await mappingClient.deleteGroup(\n            accessToken,\n            iModelId,\n            mapping.id,\n            showDeleteModal?.id ?? \"\",\n          );\n        }}\n        refresh={refresh}\n      />\n    </>\n  );\n};\n"]}
+{"version":3,"file":"Grouping.js","sourceRoot":"","sources":["../../../../src/widget/components/Grouping.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport type { CreateTypeFromInterface } from \"../utils\";\nimport {\n  ButtonGroup,\n  IconButton,\n  Surface,\n} from \"@itwin/itwinui-react\";\nimport {\n  SvgRefresh,\n} from \"@itwin/itwinui-icons-react\";\nimport DeleteModal from \"./DeleteModal\";\nimport \"./Grouping.scss\";\nimport { EmptyMessage, handleError, LoadingOverlay } from \"./utils\";\nimport type { Group, IMappingsClient, Mapping } from \"@itwin/insights-client\";\nimport { useMappingClient } from \"./context/MappingClientContext\";\nimport type { GetAccessTokenFn } from \"./context/GroupingApiConfigContext\";\nimport { useGroupingMappingApiConfig } from \"./context/GroupingApiConfigContext\";\nimport { useGroupingMappingCustomUI } from \"./context/GroupingMappingCustomUIContext\";\nimport { GroupingMappingCustomUIType } from \"./customUI/GroupingMappingCustomUI\";\nimport type {\n  ContextCustomUI,\n  GroupingCustomUI,\n} from \"./customUI/GroupingMappingCustomUI\";\nimport { useGroupHilitedElementsContext } from \"./context/GroupHilitedElementsContext\";\nimport { GroupsAddButton } from \"./GroupsAddButton\";\nimport { GroupItem } from \"./GroupItem\";\n\nexport type IGroupTyped = CreateTypeFromInterface<Group>;\n\nexport interface ActionButtonRendererProps {\n  group: Group;\n}\n\nexport type ActionButtonRenderer = (\n  props: ActionButtonRendererProps\n) => React.ReactNode;\n\nexport interface GroupingProps {\n  mapping: Mapping;\n  actionButtonRenderers?: ActionButtonRenderer[];\n  onClickAddGroup?: (queryGenerationType: string) => void;\n  onClickGroupTitle?: (group: Group) => void;\n  onClickGroupModify?: (group: Group, queryGenerationType: string) => void;\n  onClickRenderContextCustomUI?: (\n    contextCustomUI: Exclude<ContextCustomUI[\"uiComponent\"], undefined>,\n    group: Group,\n    displayLabel: string,\n  ) => void;\n  disableActions?: boolean;\n}\n\nconst fetchGroups = async (\n  setGroups: (groups: Group[]) => void,\n  iModelId: string,\n  mappingId: string,\n  setIsLoading: (isLoading: boolean) => void,\n  getAccessToken: GetAccessTokenFn,\n  mappingsClient: IMappingsClient\n): Promise<void> => {\n  try {\n    setIsLoading(true);\n    const accessToken = await getAccessToken();\n    const groups = await mappingsClient.getGroups(\n      accessToken,\n      iModelId,\n      mappingId\n    );\n    setGroups(groups.sort((a, b) => a.groupName.localeCompare(b.groupName)));\n  } catch (error: any) {\n    handleError(error.status);\n  } finally {\n    setIsLoading(false);\n  }\n};\n\nexport const Groupings = ({\n  mapping,\n  actionButtonRenderers,\n  onClickAddGroup,\n  onClickGroupTitle,\n  onClickGroupModify,\n  onClickRenderContextCustomUI,\n  disableActions,\n}: GroupingProps) => {\n  const { getAccessToken, iModelId } = useGroupingMappingApiConfig();\n  const { groups, setGroups } = useGroupHilitedElementsContext();\n  const mappingClient = useMappingClient();\n  const groupUIs: GroupingCustomUI[] =\n    useGroupingMappingCustomUI().customUIs.filter(\n      (p) => p.type === GroupingMappingCustomUIType.Grouping\n    ) as GroupingCustomUI[];\n  const contextUIs: ContextCustomUI[] =\n    useGroupingMappingCustomUI().customUIs.filter(\n      (p) => p.type === GroupingMappingCustomUIType.Context\n    ) as ContextCustomUI[];\n  const [showDeleteModal, setShowDeleteModal] = useState<Group | undefined>(\n    undefined\n  );\n  const [isLoading, setIsLoading] = useState<boolean>(true);\n\n  useEffect(() => {\n    const initialize = async () => {\n      await fetchGroups(\n        setGroups,\n        iModelId,\n        mapping.id,\n        setIsLoading,\n        getAccessToken,\n        mappingClient\n      );\n    };\n    void initialize();\n  }, [getAccessToken, mappingClient, iModelId, mapping.id, setGroups]);\n\n  const addGroup = useCallback((type: string) => {\n    if (!onClickAddGroup) return;\n    onClickAddGroup(type);\n  }, [onClickAddGroup]);\n\n  const refresh = useCallback(async () => {\n    await fetchGroups(\n      setGroups,\n      iModelId,\n      mapping.id,\n      setIsLoading,\n      getAccessToken,\n      mappingClient\n    );\n  }, [getAccessToken, mappingClient, iModelId, mapping.id, setGroups]);\n\n  return (\n    <>\n      <Surface className=\"gmw-groups-container\">\n        <div className=\"gmw-toolbar\">\n          {onClickAddGroup && groupUIs.length > 0 && (\n            <GroupsAddButton\n              disabled={disableActions}\n              groupUIs={groupUIs}\n              onClickAddGroup={addGroup}\n            />\n          )}\n          <ButtonGroup className=\"gmw-toolbar-buttons\">\n            <IconButton\n              title=\"Refresh\"\n              onClick={refresh}\n              disabled={isLoading || disableActions}\n              styleType=\"borderless\"\n            >\n              <SvgRefresh />\n            </IconButton>\n          </ButtonGroup>\n        </div>\n        {isLoading ? (\n          <LoadingOverlay />\n        ) : groups.length === 0 ? (\n          <EmptyMessage message=\"No Groups available.\" />\n        ) : (\n          <div className=\"gmw-group-list\">\n            {groups.map((g) => (\n              <GroupItem\n                key={g.id}\n                mapping={mapping}\n                group={g}\n                groupUIs={groupUIs}\n                contextUIs={contextUIs}\n                actionButtonRenderers={actionButtonRenderers}\n                onClickGroupTitle={onClickGroupTitle}\n                onClickGroupModify={onClickGroupModify}\n                onClickRenderContextCustomUI={onClickRenderContextCustomUI}\n                disableActions={disableActions}\n                setShowDeleteModal={setShowDeleteModal}\n              />\n            ))}\n          </div>\n        )}\n      </Surface>\n      <DeleteModal\n        entityName={showDeleteModal?.groupName}\n        onClose={() => setShowDeleteModal(undefined)}\n        onDelete={async () => {\n          const accessToken = await getAccessToken();\n          await mappingClient.deleteGroup(\n            accessToken,\n            iModelId,\n            mapping.id,\n            showDeleteModal?.id ?? \"\"\n          );\n        }}\n        refresh={refresh}\n      />\n    </>\n  );\n};\n"]}

package/lib/cjs/widget/components/Grouping.scss

@@ -32,22 +32,6 @@
     overflow-y: overlay;
     gap: $iui-s;
     margin-top: $iui-s;
-
-    .gmw-actions {
-      display: flex;
-      flex-direction: row;
-    }
-  }
-
-  .gmw-group-view-icon {
-    margin-left: 0;
-    align-self: center;
-    min-width: $iui-l;
-    cursor: pointer;
-
-    .gmw-color-legend {
-      border: 1px solid black;
-    }
   }
 
   .gmw-menu-item {

package/lib/cjs/widget/components/GroupingMapping.js

@@ -42,13 +42,12 @@ var RouteStep;
     RouteStep[RouteStep["CustomCalculationPropertyAction"] = 8] = "CustomCalculationPropertyAction";
 })(RouteStep = exports.RouteStep || (exports.RouteStep = {}));
 const GroupingMapping = (props) => {
-    var _a, _b, _c;
+    var _a, _b;
     const [routingHistory, setRoutingHistory] = react_1.useState([
         { step: RouteStep.Mappings, title: "Mapping", groupingRouteFields: {} },
     ]);
     const currentRoute = routingHistory[routingHistory.length - 1];
     const iModelId = (_b = (_a = appui_react_1.useActiveIModelConnection()) === null || _a === void 0 ? void 0 : _a.iModelId) !== null && _b !== void 0 ? _b : "";
-    const groupUIs = (_c = props.customUIs) === null || _c === void 0 ? void 0 : _c.filter((p) => p.type === GroupingMappingCustomUI_1.GroupingMappingCustomUIType.Grouping);
     const navigateTo = react_1.useCallback((toRoute) => {
         setRoutingHistory((r) => [...r, toRoute(r[r.length - 1])]);
     }, []);
@@ -71,11 +70,10 @@ const GroupingMapping = (props) => {
                     groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields, group },
                 })),
             },
-            ...((_a = props.customUIs) !== null && _a !== void 0 ? _a : []),
             // No group UI's provided means the widget provides its own
-            ...groupUIs !== null && groupUIs !== void 0 ? groupUIs : DefaultGroupingUI_1.defaultGroupingUI,
+            ...(_a = props.customUIs) !== null && _a !== void 0 ? _a : DefaultGroupingUI_1.defaultGroupingUI,
         ];
-    }, [groupUIs, navigateTo, props.customUIs]);
+    }, [props.customUIs, navigateTo]);
     return (react_1.default.createElement(GroupingMappingContext_1.GroupingMappingContext, { iModelId: iModelId, ...props, customUIs: injectedCustomUI },
         react_1.default.createElement("div", { className: "gmw-group-mapping-container" },
             react_1.default.createElement(GroupingMappingHeader_1.GroupingMappingHeader, { goBack: goBack, currentRoute: currentRoute }),

package/lib/cjs/widget/components/GroupingMapping.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupingMapping.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupingMapping.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type {\n  CalculatedProperty,\n  CustomCalculation,\n  Group,\n  GroupProperty,\n  Mapping,\n} from \"@itwin/insights-client\";\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport type { GroupingMappingContextProps } from \"./GroupingMappingContext\";\nimport { GroupingMappingContext } from \"./GroupingMappingContext\";\nimport \"./GroupingMapping.scss\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport type {\n  ContextCustomUI,\n  GroupingMappingCustomUI,\n} from \"./customUI/GroupingMappingCustomUI\";\nimport { GroupingMappingCustomUIType } from \"./customUI/GroupingMappingCustomUI\";\nimport {\n  SvgList,\n} from \"@itwin/itwinui-icons-react\";\nimport { GroupingMappingContent } from \"./GroupingMappingContent\";\nimport { GroupingMappingHeader } from \"./GroupingMappingHeader\";\nimport { defaultGroupingUI } from \"./customUI/DefaultGroupingUI\";\n\nexport type GroupingMappingProps = Omit<GroupingMappingContextProps, \"iModelId\">;\n\nexport enum RouteStep {\n  Mappings,\n  MappingsAction,\n  Groups,\n  GroupAction,\n  GroupContextCustomUI,\n  Properties,\n  PropertyAction,\n  CalculatedPropertyAction,\n  CustomCalculationPropertyAction,\n}\n\nexport interface Route {\n  step: RouteStep;\n  title: string;\n  groupingRouteFields: GroupingRouteFields;\n}\nexport interface GroupingRouteFields {\n  mapping?: Mapping;\n  group?: Group;\n  property?: GroupProperty;\n  calculatedProperty?: CalculatedProperty;\n  customCalculation?: CustomCalculation;\n  // Optional prop but cannot be declared undefined.\n  groupContextCustomUI?: Exclude<ContextCustomUI[\"uiComponent\"], undefined>;\n  queryGenerationType?: string;\n}\n\nconst GroupingMapping = (props: GroupingMappingProps) => {\n  const [routingHistory, setRoutingHistory] = useState<Route[]>([\n    { step: RouteStep.Mappings, title: \"Mapping\", groupingRouteFields: {} },\n  ]);\n  const currentRoute = routingHistory[routingHistory.length - 1];\n  const iModelId = useActiveIModelConnection()?.iModelId ?? \"\";\n  const groupUIs =\n    props.customUIs?.filter(\n      (p) => p.type === GroupingMappingCustomUIType.Grouping\n    );\n  const navigateTo = useCallback((toRoute: (prev: Route | undefined) => Route) => {\n    setRoutingHistory((r) => [...r, toRoute(r[r.length - 1])]);\n  }, []);\n\n  const goBack = useCallback(() => {\n    const updatedRouting = [...routingHistory];\n    updatedRouting.pop();\n    setRoutingHistory(updatedRouting);\n  }, [routingHistory]);\n\n  const injectedCustomUI = useMemo<GroupingMappingCustomUI[]>(\n    () => [\n      {\n        name: \"Properties\",\n        displayLabel: \"Properties\",\n        type: GroupingMappingCustomUIType.Context,\n        icon: <SvgList />,\n        onClick: (group) =>\n          navigateTo((prev) => ({\n            step: RouteStep.Properties,\n            title: group.groupName,\n            groupingRouteFields: { ...prev?.groupingRouteFields, group },\n          })),\n      },\n      ...(props.customUIs ?? []),\n      // No group UI's provided means the widget provides its own\n      ...groupUIs ?? defaultGroupingUI,\n    ],\n    [groupUIs, navigateTo, props.customUIs]\n  );\n\n  return (\n    <GroupingMappingContext\n      iModelId={iModelId}\n      {...props}\n      customUIs={injectedCustomUI}\n    >\n      <div className=\"gmw-group-mapping-container\">\n        <GroupingMappingHeader\n          goBack={goBack}\n          currentRoute={currentRoute}\n        />\n        <GroupingMappingContent\n          routingHistory={routingHistory}\n          navigateTo={navigateTo}\n          goBack={goBack}\n        />\n      </div>\n    </GroupingMappingContext>\n  );\n};\n\nexport default GroupingMapping;\n"]}
+{"version":3,"file":"GroupingMapping.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupingMapping.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,+CAA8D;AAE9D,qEAAkE;AAClE,kCAAgC;AAChC,oDAA+D;AAK/D,gFAAiF;AACjF,oEAEoC;AACpC,qEAAkE;AAClE,mEAAgE;AAChE,oEAAiE;AAIjE,IAAY,SAUX;AAVD,WAAY,SAAS;IACnB,iDAAQ,CAAA;IACR,6DAAc,CAAA;IACd,6CAAM,CAAA;IACN,uDAAW,CAAA;IACX,yEAAoB,CAAA;IACpB,qDAAU,CAAA;IACV,6DAAc,CAAA;IACd,iFAAwB,CAAA;IACxB,+FAA+B,CAAA;AACjC,CAAC,EAVW,SAAS,GAAT,iBAAS,KAAT,iBAAS,QAUpB;AAkBD,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;;IACtD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,gBAAQ,CAAU;QAC5D,EAAE,IAAI,EAAE,SAAS,CAAC,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,mBAAmB,EAAE,EAAE,EAAE;KACxE,CAAC,CAAC;IACH,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC/D,MAAM,QAAQ,GAAG,MAAA,MAAA,uCAAyB,EAAE,0CAAE,QAAQ,mCAAI,EAAE,CAAC;IAC7D,MAAM,UAAU,GAAG,mBAAW,CAAC,CAAC,OAA2C,EAAE,EAAE;QAC7E,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,mBAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,cAAc,GAAG,CAAC,GAAG,cAAc,CAAC,CAAC;QAC3C,cAAc,CAAC,GAAG,EAAE,CAAC;QACrB,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,gBAAgB,GAAG,eAAO,CAC9B,GAAG,EAAE;;QAAC,OAAA;YACJ;gBACE,IAAI,EAAE,YAAY;gBAClB,YAAY,EAAE,YAAY;gBAC1B,IAAI,EAAE,qDAA2B,CAAC,OAAO;gBACzC,IAAI,EAAE,8BAAC,6BAAO,OAAG;gBACjB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CACjB,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;oBACpB,IAAI,EAAE,SAAS,CAAC,UAAU;oBAC1B,KAAK,EAAE,KAAK,CAAC,SAAS;oBACtB,mBAAmB,EAAE,EAAE,GAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,mBAAmB,EAAE,KAAK,EAAE;iBAC7D,CAAC,CAAC;aACN;YACD,2DAA2D;YAC3D,GAAG,MAAA,KAAK,CAAC,SAAS,mCAAI,qCAAiB;SACxC,CAAA;KAAA,EACD,CAAC,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAC9B,CAAC;IAEF,OAAO,CACL,8BAAC,+CAAsB,IACrB,QAAQ,EAAE,QAAQ,KACd,KAAK,EACT,SAAS,EAAE,gBAAgB;QAE3B,uCAAK,SAAS,EAAC,6BAA6B;YAC1C,8BAAC,6CAAqB,IACpB,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,GAC1B;YACF,8BAAC,+CAAsB,IACrB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,GACd,CACE,CACiB,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport type {\n  CalculatedProperty,\n  CustomCalculation,\n  Group,\n  GroupProperty,\n  Mapping,\n} from \"@itwin/insights-client\";\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport type { GroupingMappingContextProps } from \"./GroupingMappingContext\";\nimport { GroupingMappingContext } from \"./GroupingMappingContext\";\nimport \"./GroupingMapping.scss\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport type {\n  ContextCustomUI,\n  GroupingMappingCustomUI,\n} from \"./customUI/GroupingMappingCustomUI\";\nimport { GroupingMappingCustomUIType } from \"./customUI/GroupingMappingCustomUI\";\nimport {\n  SvgList,\n} from \"@itwin/itwinui-icons-react\";\nimport { GroupingMappingContent } from \"./GroupingMappingContent\";\nimport { GroupingMappingHeader } from \"./GroupingMappingHeader\";\nimport { defaultGroupingUI } from \"./customUI/DefaultGroupingUI\";\n\nexport type GroupingMappingProps = Omit<GroupingMappingContextProps, \"iModelId\">;\n\nexport enum RouteStep {\n  Mappings,\n  MappingsAction,\n  Groups,\n  GroupAction,\n  GroupContextCustomUI,\n  Properties,\n  PropertyAction,\n  CalculatedPropertyAction,\n  CustomCalculationPropertyAction,\n}\n\nexport interface Route {\n  step: RouteStep;\n  title: string;\n  groupingRouteFields: GroupingRouteFields;\n}\nexport interface GroupingRouteFields {\n  mapping?: Mapping;\n  group?: Group;\n  property?: GroupProperty;\n  calculatedProperty?: CalculatedProperty;\n  customCalculation?: CustomCalculation;\n  // Optional prop but cannot be declared undefined.\n  groupContextCustomUI?: Exclude<ContextCustomUI[\"uiComponent\"], undefined>;\n  queryGenerationType?: string;\n}\n\nconst GroupingMapping = (props: GroupingMappingProps) => {\n  const [routingHistory, setRoutingHistory] = useState<Route[]>([\n    { step: RouteStep.Mappings, title: \"Mapping\", groupingRouteFields: {} },\n  ]);\n  const currentRoute = routingHistory[routingHistory.length - 1];\n  const iModelId = useActiveIModelConnection()?.iModelId ?? \"\";\n  const navigateTo = useCallback((toRoute: (prev: Route | undefined) => Route) => {\n    setRoutingHistory((r) => [...r, toRoute(r[r.length - 1])]);\n  }, []);\n\n  const goBack = useCallback(() => {\n    const updatedRouting = [...routingHistory];\n    updatedRouting.pop();\n    setRoutingHistory(updatedRouting);\n  }, [routingHistory]);\n\n  const injectedCustomUI = useMemo<GroupingMappingCustomUI[]>(\n    () => [\n      {\n        name: \"Properties\",\n        displayLabel: \"Properties\",\n        type: GroupingMappingCustomUIType.Context,\n        icon: <SvgList />,\n        onClick: (group) =>\n          navigateTo((prev) => ({\n            step: RouteStep.Properties,\n            title: group.groupName,\n            groupingRouteFields: { ...prev?.groupingRouteFields, group },\n          })),\n      },\n      // No group UI's provided means the widget provides its own\n      ...props.customUIs ?? defaultGroupingUI,\n    ],\n    [props.customUIs, navigateTo]\n  );\n\n  return (\n    <GroupingMappingContext\n      iModelId={iModelId}\n      {...props}\n      customUIs={injectedCustomUI}\n    >\n      <div className=\"gmw-group-mapping-container\">\n        <GroupingMappingHeader\n          goBack={goBack}\n          currentRoute={currentRoute}\n        />\n        <GroupingMappingContent\n          routingHistory={routingHistory}\n          navigateTo={navigateTo}\n          goBack={goBack}\n        />\n      </div>\n    </GroupingMappingContext>\n  );\n};\n\nexport default GroupingMapping;\n"]}

package/lib/cjs/widget/components/GroupingMappingContent.js

@@ -37,7 +37,7 @@ const GroupingMappingContent = ({ routingHistory, navigateTo, goBack, }) => {
     react_1.useEffect(() => {
         if (routingHistory.length === 1) {
             setShowGroupColor(false);
-            setHiddenGroupsIds([]);
+            setHiddenGroupsIds(new Set());
             viewerUtils_1.clearAll();
             // Turn off visualiztion in properties menu
         }

package/lib/cjs/widget/components/GroupingMappingContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupingMappingContent.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupingMappingContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,+CAAyC;AACzC,uFAAuF;AACvF,mEAAmE;AAEnE,mEAAgE;AAChE,+CAAyC;AAElC,MAAM,sBAAsB,GAAG,CAAC,EACrC,cAAc,EACd,UAAU,EACV,MAAM,GAKP,EAAE,EAAE;IACH,MAAM,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,GAAG,4DAA8B,EAAE,CAAC;IACnF,MAAM,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,GAAG,wCAAoB,EAAE,CAAC;IAC7E,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAE/D,gDAAgD;IAChD,iBAAS,CAAC,GAAG,EAAE;QACb,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;YAC/B,iBAAiB,CAAC,KAAK,CAAC,CAAC;YACzB,kBAAkB,CAAC,EAAE,CAAC,CAAC;YACvB,sBAAQ,EAAE,CAAC;YACX,2CAA2C;SAC5C;aAAM,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;YACtC,sBAAsB,CAAC,KAAK,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEpF,OAAO,CACL,8BAAC,6CAAqB,IACpB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,sBAAsB,0BAgCjC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport React, { useEffect } from \"react\";\nimport { useGroupHilitedElementsContext } from \"./context/GroupHilitedElementsContext\";\nimport { usePropertiesContext } from \"./context/PropertiesContext\";\nimport type { Route } from \"./GroupingMapping\";\nimport { GroupingMappingRouter } from \"./GroupingMappingRouter\";\nimport { clearAll } from \"./viewerUtils\";\n\nexport const GroupingMappingContent = ({\n  routingHistory,\n  navigateTo,\n  goBack,\n}: {\n  routingHistory: Route[];\n  navigateTo: (toRoute: (prev: Route | undefined) => Route) => void;\n  goBack: () => void;\n}) => {\n  const { setShowGroupColor, setHiddenGroupsIds } = useGroupHilitedElementsContext();\n  const { setShowGroupColor: setPropertiesShowGroup } = usePropertiesContext();\n  const currentRoute = routingHistory[routingHistory.length - 1];\n\n  // Clean up group visualization when in mappings\n  useEffect(() => {\n    if (routingHistory.length === 1) {\n      setShowGroupColor(false);\n      setHiddenGroupsIds([]);\n      clearAll();\n      // Turn off visualiztion in properties menu\n    } else if (routingHistory.length === 2) {\n      setPropertiesShowGroup(false);\n    }\n  }, [routingHistory, setHiddenGroupsIds, setPropertiesShowGroup, setShowGroupColor]);\n\n  return (\n    <GroupingMappingRouter\n      currentRoute={currentRoute}\n      navigateTo={navigateTo}\n      goBack={goBack}\n    />\n  );\n};\n"]}
+{"version":3,"file":"GroupingMappingContent.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupingMappingContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,+CAAyC;AACzC,uFAAuF;AACvF,mEAAmE;AAEnE,mEAAgE;AAChE,+CAAyC;AAElC,MAAM,sBAAsB,GAAG,CAAC,EACrC,cAAc,EACd,UAAU,EACV,MAAM,GAKP,EAAE,EAAE;IACH,MAAM,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,GAAG,4DAA8B,EAAE,CAAC;IACnF,MAAM,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,GAAG,wCAAoB,EAAE,CAAC;IAC7E,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAE/D,gDAAgD;IAChD,iBAAS,CAAC,GAAG,EAAE;QACb,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;YAC/B,iBAAiB,CAAC,KAAK,CAAC,CAAC;YACzB,kBAAkB,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;YAC9B,sBAAQ,EAAE,CAAC;YACX,2CAA2C;SAC5C;aAAM,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;YACtC,sBAAsB,CAAC,KAAK,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,CAAC,cAAc,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEpF,OAAO,CACL,8BAAC,6CAAqB,IACpB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,sBAAsB,0BAgCjC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport React, { useEffect } from \"react\";\nimport { useGroupHilitedElementsContext } from \"./context/GroupHilitedElementsContext\";\nimport { usePropertiesContext } from \"./context/PropertiesContext\";\nimport type { Route } from \"./GroupingMapping\";\nimport { GroupingMappingRouter } from \"./GroupingMappingRouter\";\nimport { clearAll } from \"./viewerUtils\";\n\nexport const GroupingMappingContent = ({\n  routingHistory,\n  navigateTo,\n  goBack,\n}: {\n  routingHistory: Route[];\n  navigateTo: (toRoute: (prev: Route | undefined) => Route) => void;\n  goBack: () => void;\n}) => {\n  const { setShowGroupColor, setHiddenGroupsIds } = useGroupHilitedElementsContext();\n  const { setShowGroupColor: setPropertiesShowGroup } = usePropertiesContext();\n  const currentRoute = routingHistory[routingHistory.length - 1];\n\n  // Clean up group visualization when in mappings\n  useEffect(() => {\n    if (routingHistory.length === 1) {\n      setShowGroupColor(false);\n      setHiddenGroupsIds(new Set());\n      clearAll();\n      // Turn off visualiztion in properties menu\n    } else if (routingHistory.length === 2) {\n      setPropertiesShowGroup(false);\n    }\n  }, [routingHistory, setHiddenGroupsIds, setPropertiesShowGroup, setShowGroupColor]);\n\n  return (\n    <GroupingMappingRouter\n      currentRoute={currentRoute}\n      navigateTo={navigateTo}\n      goBack={goBack}\n    />\n  );\n};\n"]}

package/lib/cjs/widget/components/GroupingMappingContext.js

@@ -44,7 +44,7 @@ const GroupingMappingContext = (props) => {
         prefix: props.prefix,
     });
     const hilitedElementsQueryCache = react_1.useRef(new Map());
-    const [hiddenGroupsIds, setHiddenGroupsIds] = react_1.useState([]);
+    const [hiddenGroupsIds, setHiddenGroupsIds] = react_1.useState(new Set());
     const [showGroupColor, setShowGroupColor] = react_1.useState(false);
     const [propertiesShowGroup, setPropertiesShowGroup] = react_1.useState(false);
     const [groups, setGroups] = react_1.useState([]);

package/lib/cjs/widget/components/GroupingMappingContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupingMappingContext.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupingMappingContext.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport \"./GroupingMapping.scss\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport type {\n  ClientPrefix,\n  GetAccessTokenFn,\n  GroupingMappingApiConfig,\n} from \"./context/GroupingApiConfigContext\";\nimport { GroupingMappingApiConfigContext } from \"./context/GroupingApiConfigContext\";\nimport {\n  createMappingClient,\n  MappingClientContext,\n} from \"./context/MappingClientContext\";\nimport type { CalculatedProperty, CustomCalculation, Group, GroupProperty, IMappingsClient } from \"@itwin/insights-client\";\nimport { createGroupingMappingCustomUI, GroupingMappingCustomUIContext } from \"./context/GroupingMappingCustomUIContext\";\nimport type { GroupingMappingCustomUI } from \"./customUI/GroupingMappingCustomUI\";\nimport type { QueryCacheItem } from \"./context/GroupHilitedElementsContext\";\nimport { GroupHilitedElementsContext } from \"./context/GroupHilitedElementsContext\";\nimport { PropertiesContext } from \"./context/PropertiesContext\";\n\nexport interface GroupingMappingContextProps {\n  /**\n   * Custom callback to retrieve access token.\n   */\n  getAccessToken?: GetAccessTokenFn;\n  /**\n   * The iTwin iModel Id.\n   */\n  iModelId: string;\n  /**\n   * Used for iTwin and iModel APIs.\n   * Also used for Mapping API if a custom {@link client} is not provided.\n   */\n  prefix?: ClientPrefix;\n  /**\n   * A custom implementation of MappingClient.\n   */\n  client?: IMappingsClient;\n  /**\n   * Custom UI to add and update groups or provide additional group context capabilities.\n   */\n  customUIs?: GroupingMappingCustomUI[];\n  children?: React.ReactNode;\n}\n\nconst authorizationClientGetAccessToken = async () =>\n  (await IModelApp.authorizationClient?.getAccessToken()) ?? \"\";\n\nexport const GroupingMappingContext = (props: GroupingMappingContextProps) => {\n  const clientProp: IMappingsClient | ClientPrefix = props.client ?? props.prefix;\n  const [mappingClient, setMappingClient] = useState<IMappingsClient>(createMappingClient(clientProp));\n  const [customUIs, setCustomUIs] = useState<GroupingMappingCustomUI[]>(\n    createGroupingMappingCustomUI(props.customUIs),\n  );\n  const [apiConfig, setApiConfig] = useState<GroupingMappingApiConfig>({\n    getAccessToken: props.getAccessToken ?? authorizationClientGetAccessToken,\n    iModelId: props.iModelId,\n    prefix: props.prefix,\n  });\n  const hilitedElementsQueryCache = useRef<Map<string, QueryCacheItem>>(new Map());\n  const [hiddenGroupsIds, setHiddenGroupsIds] = useState<string[]>([]);\n  const [showGroupColor, setShowGroupColor] = useState<boolean>(false);\n  const [propertiesShowGroup, setPropertiesShowGroup] = useState<boolean>(false);\n  const [groups, setGroups] = useState<Group[]>([]);\n  const [groupProperties, setGroupProperties] = useState<GroupProperty[]>([]);\n  const [calculatedProperties, setCalculatedProperties] = useState<CalculatedProperty[]>([]);\n  const [customCalculationProperties, setCustomCalculationProperties] = useState<CustomCalculation[]>([]);\n\n  useEffect(() => {\n    setApiConfig(() => ({\n      prefix: props.prefix,\n      iModelId: props.iModelId,\n      getAccessToken: props.getAccessToken ?? authorizationClientGetAccessToken,\n    }));\n  }, [props.getAccessToken, props.iModelId, props.prefix]);\n\n  useEffect(() => {\n    setMappingClient(createMappingClient(clientProp));\n  }, [clientProp]);\n\n  useEffect(() => {\n    setCustomUIs(createGroupingMappingCustomUI(props.customUIs));\n  }, [props.customUIs]);\n\n  const hilitedElementsContextValue = useMemo(\n    () => ({\n      showGroupColor,\n      setShowGroupColor,\n      hiddenGroupsIds,\n      setHiddenGroupsIds,\n      hilitedElementsQueryCache,\n      groups,\n      setGroups,\n    }),\n    [groups, hiddenGroupsIds, showGroupColor]\n  );\n\n  const propertiesContextValue = useMemo(\n    () => ({\n      showGroupColor: propertiesShowGroup,\n      setShowGroupColor: setPropertiesShowGroup,\n      groupProperties,\n      setGroupProperties,\n      calculatedProperties,\n      setCalculatedProperties,\n      customCalculationProperties,\n      setCustomCalculationProperties,\n    }),\n    [calculatedProperties, customCalculationProperties, groupProperties, propertiesShowGroup]\n  );\n\n  const customUIContextValue = useMemo(() => ({\n    customUIs,\n    setCustomUIs,\n  }), [customUIs]);\n\n  return (\n    <GroupingMappingApiConfigContext.Provider value={apiConfig}>\n      <MappingClientContext.Provider value={mappingClient}>\n        <GroupingMappingCustomUIContext.Provider value={customUIContextValue}>\n          <GroupHilitedElementsContext.Provider value={hilitedElementsContextValue}>\n            <PropertiesContext.Provider value={propertiesContextValue}>\n              {props.children}\n            </PropertiesContext.Provider>\n          </GroupHilitedElementsContext.Provider>\n        </GroupingMappingCustomUIContext.Provider>\n      </MappingClientContext.Provider>\n    </GroupingMappingApiConfigContext.Provider>\n  );\n};\n"]}
+{"version":3,"file":"GroupingMappingContext.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupingMappingContext.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport \"./GroupingMapping.scss\";\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport type {\n  ClientPrefix,\n  GetAccessTokenFn,\n  GroupingMappingApiConfig,\n} from \"./context/GroupingApiConfigContext\";\nimport { GroupingMappingApiConfigContext } from \"./context/GroupingApiConfigContext\";\nimport {\n  createMappingClient,\n  MappingClientContext,\n} from \"./context/MappingClientContext\";\nimport type { CalculatedProperty, CustomCalculation, Group, GroupProperty, IMappingsClient } from \"@itwin/insights-client\";\nimport { createGroupingMappingCustomUI, GroupingMappingCustomUIContext } from \"./context/GroupingMappingCustomUIContext\";\nimport type { GroupingMappingCustomUI } from \"./customUI/GroupingMappingCustomUI\";\nimport type { QueryCacheItem } from \"./context/GroupHilitedElementsContext\";\nimport { GroupHilitedElementsContext } from \"./context/GroupHilitedElementsContext\";\nimport { PropertiesContext } from \"./context/PropertiesContext\";\n\nexport interface GroupingMappingContextProps {\n  /**\n   * Custom callback to retrieve access token.\n   */\n  getAccessToken?: GetAccessTokenFn;\n  /**\n   * The iTwin iModel Id.\n   */\n  iModelId: string;\n  /**\n   * Used for iTwin and iModel APIs.\n   * Also used for Mapping API if a custom {@link client} is not provided.\n   */\n  prefix?: ClientPrefix;\n  /**\n   * A custom implementation of MappingClient.\n   */\n  client?: IMappingsClient;\n  /**\n   * Custom UI to add and update groups or provide additional group context capabilities.\n   */\n  customUIs?: GroupingMappingCustomUI[];\n  children?: React.ReactNode;\n}\n\nconst authorizationClientGetAccessToken = async () =>\n  (await IModelApp.authorizationClient?.getAccessToken()) ?? \"\";\n\nexport const GroupingMappingContext = (props: GroupingMappingContextProps) => {\n  const clientProp: IMappingsClient | ClientPrefix = props.client ?? props.prefix;\n  const [mappingClient, setMappingClient] = useState<IMappingsClient>(createMappingClient(clientProp));\n  const [customUIs, setCustomUIs] = useState<GroupingMappingCustomUI[]>(\n    createGroupingMappingCustomUI(props.customUIs),\n  );\n  const [apiConfig, setApiConfig] = useState<GroupingMappingApiConfig>({\n    getAccessToken: props.getAccessToken ?? authorizationClientGetAccessToken,\n    iModelId: props.iModelId,\n    prefix: props.prefix,\n  });\n  const hilitedElementsQueryCache = useRef<Map<string, QueryCacheItem>>(new Map());\n  const [hiddenGroupsIds, setHiddenGroupsIds] = useState<Set<string>>(new Set());\n  const [showGroupColor, setShowGroupColor] = useState<boolean>(false);\n  const [propertiesShowGroup, setPropertiesShowGroup] = useState<boolean>(false);\n  const [groups, setGroups] = useState<Group[]>([]);\n  const [groupProperties, setGroupProperties] = useState<GroupProperty[]>([]);\n  const [calculatedProperties, setCalculatedProperties] = useState<CalculatedProperty[]>([]);\n  const [customCalculationProperties, setCustomCalculationProperties] = useState<CustomCalculation[]>([]);\n\n  useEffect(() => {\n    setApiConfig(() => ({\n      prefix: props.prefix,\n      iModelId: props.iModelId,\n      getAccessToken: props.getAccessToken ?? authorizationClientGetAccessToken,\n    }));\n  }, [props.getAccessToken, props.iModelId, props.prefix]);\n\n  useEffect(() => {\n    setMappingClient(createMappingClient(clientProp));\n  }, [clientProp]);\n\n  useEffect(() => {\n    setCustomUIs(createGroupingMappingCustomUI(props.customUIs));\n  }, [props.customUIs]);\n\n  const hilitedElementsContextValue = useMemo(\n    () => ({\n      showGroupColor,\n      setShowGroupColor,\n      hiddenGroupsIds,\n      setHiddenGroupsIds,\n      hilitedElementsQueryCache,\n      groups,\n      setGroups,\n    }),\n    [groups, hiddenGroupsIds, showGroupColor]\n  );\n\n  const propertiesContextValue = useMemo(\n    () => ({\n      showGroupColor: propertiesShowGroup,\n      setShowGroupColor: setPropertiesShowGroup,\n      groupProperties,\n      setGroupProperties,\n      calculatedProperties,\n      setCalculatedProperties,\n      customCalculationProperties,\n      setCustomCalculationProperties,\n    }),\n    [calculatedProperties, customCalculationProperties, groupProperties, propertiesShowGroup]\n  );\n\n  const customUIContextValue = useMemo(() => ({\n    customUIs,\n    setCustomUIs,\n  }), [customUIs]);\n\n  return (\n    <GroupingMappingApiConfigContext.Provider value={apiConfig}>\n      <MappingClientContext.Provider value={mappingClient}>\n        <GroupingMappingCustomUIContext.Provider value={customUIContextValue}>\n          <GroupHilitedElementsContext.Provider value={hilitedElementsContextValue}>\n            <PropertiesContext.Provider value={propertiesContextValue}>\n              {props.children}\n            </PropertiesContext.Provider>\n          </GroupHilitedElementsContext.Provider>\n        </GroupingMappingCustomUIContext.Provider>\n      </MappingClientContext.Provider>\n    </GroupingMappingApiConfigContext.Provider>\n  );\n};\n"]}

package/lib/cjs/widget/components/GroupingMappingRouter.js

@@ -9,16 +9,16 @@ exports.GroupingMappingRouter = void 0;
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 const react_1 = __importDefault(require("react"));
-const CalculatedPropertyAction_1 = require("./CalculatedPropertyAction");
 const GroupingApiConfigContext_1 = require("./context/GroupingApiConfigContext");
 const CustomCalculationAction_1 = require("./CustomCalculationAction");
 const GroupAction_1 = require("./GroupAction");
-const Grouping_1 = require("./Grouping");
 const GroupingMapping_1 = require("./GroupingMapping");
 const GroupPropertyAction_1 = require("./GroupPropertyAction");
 const Mapping_1 = require("./Mapping");
 const MappingAction_1 = require("./MappingAction");
-const PropertyMenu_1 = require("./PropertyMenu");
+const CalculatedPropertyActionWithVisuals_1 = require("./CalculatedPropertyActionWithVisuals");
+const PropertyMenuWithVisualization_1 = require("./PropertyMenuWithVisualization");
+const GroupsVisualization_1 = require("./GroupsVisualization");
 const GroupingMappingRouter = ({ currentRoute, navigateTo, goBack, }) => {
     const { iModelId } = GroupingApiConfigContext_1.useGroupingMappingApiConfig();
     const { mapping, group, property, calculatedProperty, customCalculation, groupContextCustomUI, queryGenerationType } = currentRoute.groupingRouteFields;
@@ -41,7 +41,7 @@ const GroupingMappingRouter = ({ currentRoute, navigateTo, goBack, }) => {
             return (react_1.default.createElement(MappingAction_1.MappingAction, { mapping: mapping, onClickCancel: goBack, onSaveSuccess: goBack }));
         case GroupingMapping_1.RouteStep.Groups:
             if (mapping) {
-                return (react_1.default.createElement(Grouping_1.Groupings, { mapping: mapping, onClickAddGroup: (qType) => navigateTo((prev) => ({
+                return (react_1.default.createElement(GroupsVisualization_1.GroupsVisualization, { mapping: mapping, onClickAddGroup: (qType) => navigateTo((prev) => ({
                         step: GroupingMapping_1.RouteStep.GroupAction,
                         groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields, queryGenerationType: qType },
                         title: "Add Group",
@@ -53,14 +53,11 @@ const GroupingMappingRouter = ({ currentRoute, navigateTo, goBack, }) => {
                         step: GroupingMapping_1.RouteStep.GroupAction,
                         title: g.groupName,
                         groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields, group: g, queryGenerationType: qType },
-                    })), onClickRenderContextCustomUI: (ccUI, g) => navigateTo((prev) => {
-                        var _a;
-                        return ({
-                            step: GroupingMapping_1.RouteStep.GroupAction,
-                            title: (_a = ccUI.displayName) !== null && _a !== void 0 ? _a : "",
-                            groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields, group: g, groupContextCustomUI: ccUI },
-                        });
-                    }) }));
+                    })), onClickRenderContextCustomUI: (ccUI, g, displayLabel) => navigateTo((prev) => ({
+                        step: GroupingMapping_1.RouteStep.GroupContextCustomUI,
+                        title: displayLabel,
+                        groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields, group: g, groupContextCustomUI: ccUI },
+                    })) }));
             }
             return null;
         case GroupingMapping_1.RouteStep.GroupAction:
@@ -68,18 +65,20 @@ const GroupingMappingRouter = ({ currentRoute, navigateTo, goBack, }) => {
                 if (queryGenerationType) {
                     return (react_1.default.createElement(GroupAction_1.GroupAction, { mappingId: mapping.id, group: group, onClickCancel: goBack, onSaveSuccess: goBack, queryGenerationType: queryGenerationType }));
                 }
-                else if (group && groupContextCustomUI) {
-                    return (react_1.default.createElement(groupContextCustomUI, {
-                        iModelId,
-                        mappingId: mapping.id,
-                        groupId: group.id,
-                    }));
-                }
+            }
+            return null;
+        case GroupingMapping_1.RouteStep.GroupContextCustomUI:
+            if (mapping && group && groupContextCustomUI) {
+                return (react_1.default.createElement(groupContextCustomUI, {
+                    iModelId,
+                    mappingId: mapping.id,
+                    groupId: group.id,
+                }));
             }
             return null;
         case GroupingMapping_1.RouteStep.Properties:
             if (mapping && group) {
-                return (react_1.default.createElement(PropertyMenu_1.PropertyMenu, { mapping: mapping, group: group, color: "red", onClickAddGroupProperty: () => navigateTo((prev) => ({ step: GroupingMapping_1.RouteStep.PropertyAction, title: "Add Property", groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields } })), onClickModifyGroupProperty: (gp) => navigateTo((prev) => ({ step: GroupingMapping_1.RouteStep.PropertyAction, title: gp.propertyName, groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields, property: gp } })), onClickAddCalculatedProperty: () => navigateTo((prev) => ({ step: GroupingMapping_1.RouteStep.CalculatedPropertyAction, title: "Create Calculated Property", groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields } })), onClickModifyCalculatedProperty: (cp) => navigateTo((prev) => ({ step: GroupingMapping_1.RouteStep.CalculatedPropertyAction, title: cp.propertyName, groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields, calculatedProperty: cp } })), onClickAddCustomCalculationProperty: () => navigateTo((prev) => ({ step: GroupingMapping_1.RouteStep.CustomCalculationPropertyAction, title: "Create Custom Calculation", groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields } })), onClickModifyCustomCalculation: (cc) => navigateTo((prev) => ({ step: GroupingMapping_1.RouteStep.CustomCalculationPropertyAction, title: cc.propertyName, groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields, customCalculation: cc } })) }));
+                return (react_1.default.createElement(PropertyMenuWithVisualization_1.PropertyMenuWithVisualization, { mapping: mapping, group: group, color: "red", onClickAddGroupProperty: () => navigateTo((prev) => ({ step: GroupingMapping_1.RouteStep.PropertyAction, title: "Add Property", groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields } })), onClickModifyGroupProperty: (gp) => navigateTo((prev) => ({ step: GroupingMapping_1.RouteStep.PropertyAction, title: gp.propertyName, groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields, property: gp } })), onClickAddCalculatedProperty: () => navigateTo((prev) => ({ step: GroupingMapping_1.RouteStep.CalculatedPropertyAction, title: "Create Calculated Property", groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields } })), onClickModifyCalculatedProperty: (cp) => navigateTo((prev) => ({ step: GroupingMapping_1.RouteStep.CalculatedPropertyAction, title: cp.propertyName, groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields, calculatedProperty: cp } })), onClickAddCustomCalculationProperty: () => navigateTo((prev) => ({ step: GroupingMapping_1.RouteStep.CustomCalculationPropertyAction, title: "Create Custom Calculation", groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields } })), onClickModifyCustomCalculation: (cc) => navigateTo((prev) => ({ step: GroupingMapping_1.RouteStep.CustomCalculationPropertyAction, title: cc.propertyName, groupingRouteFields: { ...prev === null || prev === void 0 ? void 0 : prev.groupingRouteFields, customCalculation: cc } })) }));
             }
             return null;
         case GroupingMapping_1.RouteStep.PropertyAction: {
@@ -90,7 +89,7 @@ const GroupingMappingRouter = ({ currentRoute, navigateTo, goBack, }) => {
         }
         case GroupingMapping_1.RouteStep.CalculatedPropertyAction: {
             if (mapping && group) {
-                return (react_1.default.createElement(CalculatedPropertyAction_1.CalculatedPropertyAction, { mappingId: mapping.id, group: group, calculatedProperty: calculatedProperty, onSaveSuccess: goBack, onClickCancel: goBack }));
+                return (react_1.default.createElement(CalculatedPropertyActionWithVisuals_1.CalculatedPropertyActionWithVisuals, { mappingId: mapping.id, group: group, calculatedProperty: calculatedProperty, onSaveSuccess: goBack, onClickCancel: goBack }));
             }
             return null;
         }