@itwin/grouping-mapping-widget 0.19.2 → 0.20.1

package/lib/cjs/components/Groups/GroupsShowHideButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupsShowHideButtons.js","sourceRoot":"","sources":["../../../../src/components/Groups/GroupsShowHideButtons.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAKA,oEAAkF;AAClF,wDAAkD;AAClD,+CAAoD;AACpD,wFAAwF;AASjF,MAAM,qBAAqB,GAAG,CAAC,EACpC,KAAK,EACL,cAAc,EACd,SAAS,EACT,SAAS,GACkB,EAAE,EAAE;IAC/B,MAAM,EAAE,eAAe,EAAE,kBAAkB,EAAE,GAAG,IAAA,4DAA8B,GAAE,CAAC;IACjF,MAAM,aAAa,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC,CAAC;IAE5G,MAAM,qBAAqB,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QACnD,IAAI,aAAa,EAAE;YACjB,MAAM,SAAS,CAAC,KAAK,CAAC,CAAC;YACvB,kBAAkB,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;SACnF;aAAM;YACL,MAAM,SAAS,CAAC,KAAK,CAAC,CAAC;YACvB,IAAI,KAAK,CAAC,EAAE,EAAE;gBACZ,kBAAkB,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;aAC7D;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,kBAAkB,EAAE,SAAS,CAAC,CAAC,CAAC;IAEtF,OAAO,CACL,8BAAC,0BAAU,IACT,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAC,YAAY,EACtB,OAAO,EAAE,qBAAqB,EAC9B,KAAK,EAAC,yBAAyB,IAE9B,aAAa,CAAC,CAAC,CAAC,8BAAC,uCAAiB,OAAG,CAAC,CAAC,CAAC,8BAAC,uCAAiB,OAAG,CACnD,CACd,CAAC;AACJ,CAAC,CAAC;AA/BW,QAAA,qBAAqB,yBA+BhC","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 { Group } from \"@itwin/insights-client\";\nimport { SvgVisibilityHide, SvgVisibilityShow } from \"@itwin/itwinui-icons-react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport React, { useCallback, useMemo } from \"react\";\nimport { useGroupHilitedElementsContext } from \"../context/GroupHilitedElementsContext\";\n\ninterface GroupsShowHideButtonsProps {\n  group: Group;\n  isLoadingQuery: boolean;\n  showGroup: (group: Group) => Promise<void>;\n  hideGroup: (group: Group) => Promise<void>;\n}\n\nexport const GroupsShowHideButtons = ({\n  group,\n  isLoadingQuery,\n  showGroup,\n  hideGroup,\n}: GroupsShowHideButtonsProps) => {\n  const { hiddenGroupsIds, setHiddenGroupsIds } = useGroupHilitedElementsContext();\n  const isGroupHidden = useMemo(() => group.id && hiddenGroupsIds.has(group.id), [group.id, hiddenGroupsIds]);\n\n  const toggleGroupVisibility = useCallback(async () => {\n    if (isGroupHidden) {\n      await showGroup(group);\n      setHiddenGroupsIds(new Set([...hiddenGroupsIds].filter((id) => group.id !== id)));\n    } else {\n      await hideGroup(group);\n      if (group.id) {\n        setHiddenGroupsIds(new Set([...hiddenGroupsIds, group.id]));\n      }\n    }\n  }, [group, hiddenGroupsIds, hideGroup, isGroupHidden, setHiddenGroupsIds, showGroup]);\n\n  return (\n    <IconButton\n      disabled={isLoadingQuery}\n      styleType=\"borderless\"\n      onClick={toggleGroupVisibility}\n      title='Toggle Group Visibility'\n    >\n      {isGroupHidden ? <SvgVisibilityHide /> : <SvgVisibilityShow />}\n    </IconButton>\n  );\n};\n"]}

package/lib/cjs/components/Groups/GroupsView.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import type { Alert } from "@itwin/itwinui-react";
+import "./GroupsView.scss";
+import type { Group, Mapping } from "@itwin/insights-client";
+import type { ContextCustomUI, GroupingCustomUI } from "../customUI/GroupingMappingCustomUI";
+import type { OverlappedInfo } from "../context/GroupHilitedElementsContext";
+export interface ActionButtonRendererProps {
+    group: Group;
+}
+export declare type ActionButtonRenderer = (props: ActionButtonRendererProps) => React.ReactNode;
+export interface ProgressConfig {
+    hilitedGroupsProgress?: {
+        currentHilitedGroups: number;
+        totalNumberOfGroups: number;
+    };
+    baseProgress?: number;
+    maxDynamicProgress?: number;
+}
+export interface GroupsViewProps {
+    mapping: Mapping;
+    groups: Group[];
+    isLoading: boolean;
+    onRefresh: () => Promise<void>;
+    groupUIs: GroupingCustomUI[];
+    actionButtonRenderers?: ActionButtonRenderer[];
+    contextUIs: ContextCustomUI[];
+    onClickAddGroup?: (queryGenerationType: string) => void;
+    onClickGroupTitle?: (group: Group) => void;
+    onClickGroupModify?: (group: Group, queryGenerationType: string) => void;
+    onClickRenderContextCustomUI?: (contextCustomUI: Exclude<ContextCustomUI["uiComponent"], undefined>, group: Group, displayLabel: string) => void;
+    disableActions?: boolean;
+    selectedGroupForDeletion?: Group;
+    setSelectedGroupForDeletion: (group: Group) => void;
+    onDeleteGroup: (group: Group) => Promise<void>;
+    onCloseDeleteModal: () => void;
+    alert?: React.ReactElement<typeof Alert>;
+    setActiveOverlapInfoPanelGroup?: (activeOverlapInfoPanelGroup: Group | undefined) => void;
+    activeOverlapInfoPanelGroup?: Group | undefined;
+    overlappedElementsInfo?: Map<string, OverlappedInfo[]>;
+    progressConfig?: ProgressConfig;
+}
+export declare const GroupsView: ({ mapping, groups, isLoading, onRefresh, groupUIs, actionButtonRenderers, onClickAddGroup, onClickGroupTitle, onClickGroupModify, onClickRenderContextCustomUI, disableActions, selectedGroupForDeletion, onDeleteGroup, onCloseDeleteModal, setSelectedGroupForDeletion, contextUIs, alert, setActiveOverlapInfoPanelGroup, activeOverlapInfoPanelGroup, overlappedElementsInfo, progressConfig, }: GroupsViewProps) => JSX.Element;
+//# sourceMappingURL=GroupsView.d.ts.map

package/lib/cjs/components/Groups/GroupsView.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupsView = 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 react_1 = __importDefault(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("../SharedComponents/DeleteModal"));
+require("./GroupsView.scss");
+const EmptyMessage_1 = require("../SharedComponents/EmptyMessage");
+const LoadingOverlay_1 = require("../SharedComponents/LoadingOverlay");
+const GroupItem_1 = require("./GroupItem");
+const GroupsAddButton_1 = require("./GroupsAddButton");
+const OverlappedElementsInformationPanel_1 = require("./OverlappedElementsInformationPanel");
+const GroupsView = ({ mapping, groups, isLoading, onRefresh, groupUIs, actionButtonRenderers, onClickAddGroup, onClickGroupTitle, onClickGroupModify, onClickRenderContextCustomUI, disableActions, selectedGroupForDeletion, onDeleteGroup, onCloseDeleteModal, setSelectedGroupForDeletion, contextUIs, alert, setActiveOverlapInfoPanelGroup, activeOverlapInfoPanelGroup, overlappedElementsInfo, progressConfig, }) => {
+    /**
+     * UX Progress Bar Logic:
+     * - Start non-zero for immediate feedback.
+     * - Restrict motion to a range (e.g., 25-90%) for perceived continuity.
+     * - Disappear when compplete.
+     * Goal: Smooth experience for unpredictable durations.
+     */
+    const { baseProgress = 25, maxDynamicProgress = 65, hilitedGroupsProgress } = progressConfig || {};
+    return (react_1.default.createElement(itwinui_react_1.InformationPanelWrapper, { 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: onClickAddGroup })),
+            react_1.default.createElement(itwinui_react_1.ButtonGroup, { className: "gmw-toolbar-buttons" },
+                react_1.default.createElement(itwinui_react_1.IconButton, { title: "Refresh", onClick: onRefresh, disabled: isLoading || disableActions, styleType: "borderless" },
+                    react_1.default.createElement(itwinui_icons_react_1.SvgRefresh, null)))),
+        alert,
+        react_1.default.createElement("div", { className: 'gmw-groups-border' }),
+        !!hilitedGroupsProgress &&
+            react_1.default.createElement("div", { className: "gmw-group-progress-bar" },
+                react_1.default.createElement(itwinui_react_1.ProgressLinear, { value: baseProgress + (hilitedGroupsProgress.currentHilitedGroups / hilitedGroupsProgress.totalNumberOfGroups * maxDynamicProgress) })),
+        isLoading ? (react_1.default.createElement(LoadingOverlay_1.LoadingOverlay, null)) : groups.length === 0 ? (react_1.default.createElement(EmptyMessage_1.EmptyMessage, { message: "No Groups available." })) : (react_1.default.createElement("div", { className: "gmw-group-list" }, groups.map((group) => (react_1.default.createElement(GroupItem_1.GroupItem, { key: group.id, mapping: mapping, group: group, groupUIs: groupUIs, actionButtonRenderers: actionButtonRenderers, onClickGroupTitle: onClickGroupTitle, onClickGroupModify: onClickGroupModify, onClickRenderContextCustomUI: onClickRenderContextCustomUI, disableActions: disableActions, setShowDeleteModal: setSelectedGroupForDeletion, contextUIs: contextUIs, setActiveOverlapInfoPanelGroup: setActiveOverlapInfoPanelGroup }))))),
+        overlappedElementsInfo && setActiveOverlapInfoPanelGroup &&
+            react_1.default.createElement(OverlappedElementsInformationPanel_1.OverlappedElementsInformationPanel, { group: activeOverlapInfoPanelGroup, onClose: () => setActiveOverlapInfoPanelGroup(undefined), overlappedElementsInfo: overlappedElementsInfo, groups: groups }),
+        selectedGroupForDeletion && (react_1.default.createElement(DeleteModal_1.default, { entityName: selectedGroupForDeletion.groupName, onClose: onCloseDeleteModal, onDelete: async () => {
+                await onDeleteGroup(selectedGroupForDeletion);
+            }, refresh: onRefresh }))));
+};
+exports.GroupsView = GroupsView;
+//# sourceMappingURL=GroupsView.js.map

package/lib/cjs/components/Groups/GroupsView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupsView.js","sourceRoot":"","sources":["../../../../src/components/Groups/GroupsView.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 from \"react\";\nimport type {\n  Alert,\n} from \"@itwin/itwinui-react\";\nimport {\n  ButtonGroup,\n  IconButton,\n  InformationPanelWrapper,\n  ProgressLinear,\n} from \"@itwin/itwinui-react\";\nimport {\n  SvgRefresh,\n} from \"@itwin/itwinui-icons-react\";\nimport DeleteModal from \"../SharedComponents/DeleteModal\";\nimport \"./GroupsView.scss\";\nimport { EmptyMessage } from \"../SharedComponents/EmptyMessage\";\nimport { LoadingOverlay } from \"../SharedComponents/LoadingOverlay\";\nimport type { Group, Mapping } from \"@itwin/insights-client\";\nimport { GroupItem } from \"./GroupItem\";\nimport type { ContextCustomUI, GroupingCustomUI } from \"../customUI/GroupingMappingCustomUI\";\nimport { GroupsAddButton } from \"./GroupsAddButton\";\nimport { OverlappedElementsInformationPanel } from \"./OverlappedElementsInformationPanel\";\nimport type { OverlappedInfo } from \"../context/GroupHilitedElementsContext\";\n\nexport interface ActionButtonRendererProps {\n  group: Group;\n}\n\nexport type ActionButtonRenderer = (\n  props: ActionButtonRendererProps\n) => React.ReactNode;\n\nexport interface ProgressConfig {\n  hilitedGroupsProgress?: {\n    currentHilitedGroups: number;\n    totalNumberOfGroups: number;\n  };\n  baseProgress?: number;\n  maxDynamicProgress?: number;\n}\n\nexport interface GroupsViewProps {\n  mapping: Mapping;\n  groups: Group[];\n  isLoading: boolean;\n  onRefresh: () => Promise<void>;\n  groupUIs: GroupingCustomUI[];\n  actionButtonRenderers?: ActionButtonRenderer[];\n  contextUIs: ContextCustomUI[];\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  selectedGroupForDeletion?: Group;\n  setSelectedGroupForDeletion: (group: Group) => void;\n  onDeleteGroup: (group: Group) => Promise<void>;\n  onCloseDeleteModal: () => void;\n  alert?: React.ReactElement<typeof Alert>;\n  setActiveOverlapInfoPanelGroup?: (activeOverlapInfoPanelGroup: Group | undefined) => void;\n  activeOverlapInfoPanelGroup?: Group | undefined;\n  overlappedElementsInfo?: Map<string, OverlappedInfo[]>;\n  progressConfig?: ProgressConfig;\n}\n\nexport const GroupsView = ({\n  mapping,\n  groups,\n  isLoading,\n  onRefresh,\n  groupUIs,\n  actionButtonRenderers,\n  onClickAddGroup,\n  onClickGroupTitle,\n  onClickGroupModify,\n  onClickRenderContextCustomUI,\n  disableActions,\n  selectedGroupForDeletion,\n  onDeleteGroup,\n  onCloseDeleteModal,\n  setSelectedGroupForDeletion,\n  contextUIs,\n  alert,\n  setActiveOverlapInfoPanelGroup,\n  activeOverlapInfoPanelGroup,\n  overlappedElementsInfo,\n  progressConfig,\n}: GroupsViewProps) => {\n  /**\n   * UX Progress Bar Logic:\n   * - Start non-zero for immediate feedback.\n   * - Restrict motion to a range (e.g., 25-90%) for perceived continuity.\n   * - Disappear when compplete.\n   * Goal: Smooth experience for unpredictable durations.\n   */\n  const { baseProgress = 25, maxDynamicProgress = 65, hilitedGroupsProgress } = progressConfig || {};\n\n  return (\n    <InformationPanelWrapper className=\"gmw-groups-container\">\n      <div className=\"gmw-toolbar\">\n        {onClickAddGroup && groupUIs.length > 0 && (\n          <GroupsAddButton\n            disabled={disableActions}\n            groupUIs={groupUIs}\n            onClickAddGroup={onClickAddGroup}\n          />\n        )}\n        <ButtonGroup className=\"gmw-toolbar-buttons\">\n          <IconButton\n            title=\"Refresh\"\n            onClick={onRefresh}\n            disabled={isLoading || disableActions}\n            styleType=\"borderless\"\n          >\n            <SvgRefresh />\n          </IconButton>\n        </ButtonGroup>\n      </div>\n      {alert}\n      <div className='gmw-groups-border' />\n      {!!hilitedGroupsProgress &&\n        <div className=\"gmw-group-progress-bar\">\n          <ProgressLinear\n            value={baseProgress + (hilitedGroupsProgress.currentHilitedGroups / hilitedGroupsProgress.totalNumberOfGroups * maxDynamicProgress)}\n          />\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((group) => (\n            <GroupItem\n              key={group.id}\n              mapping={mapping}\n              group={group}\n              groupUIs={groupUIs}\n              actionButtonRenderers={actionButtonRenderers}\n              onClickGroupTitle={onClickGroupTitle}\n              onClickGroupModify={onClickGroupModify}\n              onClickRenderContextCustomUI={onClickRenderContextCustomUI}\n              disableActions={disableActions}\n              setShowDeleteModal={setSelectedGroupForDeletion}\n              contextUIs={contextUIs}\n              setActiveOverlapInfoPanelGroup={setActiveOverlapInfoPanelGroup}\n            />\n          ))}\n        </div>\n      )}\n      {overlappedElementsInfo && setActiveOverlapInfoPanelGroup &&\n        <OverlappedElementsInformationPanel\n          group={activeOverlapInfoPanelGroup}\n          onClose={() => setActiveOverlapInfoPanelGroup(undefined)}\n          overlappedElementsInfo={overlappedElementsInfo}\n          groups={groups}\n        />}\n      {selectedGroupForDeletion && (\n        <DeleteModal\n          entityName={selectedGroupForDeletion.groupName}\n          onClose={onCloseDeleteModal}\n          onDelete={async () => {\n            await onDeleteGroup(selectedGroupForDeletion);\n          }}\n          refresh={onRefresh}\n        />\n      )}\n    </InformationPanelWrapper>\n  );\n};\n"]}

package/lib/cjs/components/Groups/GroupsView.scss

@@ -0,0 +1,53 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.gmw-groups-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+
+  .gmw-toolbar {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--iui-size-xs);
+    padding-bottom: var(--iui-size-s);
+    flex-wrap: wrap;
+
+    &.gmw-visualizing-toolbar {
+      border-bottom: none;
+    }
+
+    .gmw-toolbar-buttons {
+      margin-right: var(--iui-size-s);
+      margin-left: auto;
+      flex-wrap: wrap;
+    }
+  }
+
+  .gmw-groups-border {
+    border-bottom: 1px solid var(--iui-color-border-subtle);
+  }
+
+  .gmw-group-progress-bar {
+    height: 1px;
+  }
+
+  .gmw-overlap-alert{
+    font-size: small;
+  }
+
+  .gmw-group-list {
+    display: flex;
+    flex-direction: column;
+    overflow-y: overlay;
+    gap: var(--iui-size-xs);
+    margin-top: var(--iui-size-xs);
+  }
+
+  .gmw-menu-item {
+    padding-left: var(--iui-size-s);
+  }
+}

package/lib/cjs/components/Groups/GroupsVisualization.js

@@ -0,0 +1,153 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupsVisualization = void 0;
+const react_1 = __importStar(require("react"));
+const GroupHilitedElementsContext_1 = require("../context/GroupHilitedElementsContext");
+const groupsHelpers_1 = require("./groupsHelpers");
+const viewerUtils_1 = require("../../common/viewerUtils");
+const Groups_1 = require("./Groups");
+const GroupColorLegend_1 = require("./GroupColorLegend");
+const GroupsVisualizationActions_1 = require("./GroupsVisualizationActions");
+const GroupsShowHideButtons_1 = require("./GroupsShowHideButtons");
+require("./GroupsVisualization.scss");
+const GroupingApiConfigContext_1 = require("../context/GroupingApiConfigContext");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+const GroupsVisualization = ({ emphasizeElements = true, isNonEmphasizedSelectable = false, onClickGroupModify, onClickAddGroup, ...rest }) => {
+    const { iModelConnection } = (0, GroupingApiConfigContext_1.useGroupingMappingApiConfig)();
+    if (!iModelConnection) {
+        throw new Error("This component requires an active iModelConnection.");
+    }
+    const [isLoadingQuery, setLoadingQuery] = (0, react_1.useState)(false);
+    const [isVisualizing, setIsVisualizing] = (0, react_1.useState)(false);
+    const [isAlertClosed, setIsAlertClosed] = (0, react_1.useState)(true);
+    const [isAlertExpanded, setIsAlertExpanded] = (0, react_1.useState)(false);
+    const { hilitedElementsQueryCache, groups, hiddenGroupsIds, showGroupColor, isOverlappedColored, setHiddenGroupsIds, setNumberOfVisualizedGroups, setOverlappedElementsInfo, setGroupElementsInfo, overlappedElementsInfo, overlappedElementGroupPairs, setOverlappedElementGroupPairs, } = (0, GroupHilitedElementsContext_1.useGroupHilitedElementsContext)();
+    const getHiliteIdsFromGroupsWrapper = (0, react_1.useCallback)(async (groups) => iModelConnection
+        ? (0, groupsHelpers_1.getHiliteIdsFromGroups)(iModelConnection, groups, hilitedElementsQueryCache)
+        : [], [iModelConnection, hilitedElementsQueryCache]);
+    const handleVisualizationStates = (0, react_1.useCallback)((start = true) => {
+        setIsVisualizing(start);
+        setLoadingQuery(start);
+        if (!start) {
+            setNumberOfVisualizedGroups(0);
+        }
+    }, [setNumberOfVisualizedGroups]);
+    const triggerVisualization = (0, react_1.useCallback)(async () => {
+        handleVisualizationStates(true);
+        const groupsCopy = [...groups];
+        await (0, groupsHelpers_1.visualizeGroupColors)(iModelConnection, groupsCopy, hiddenGroupsIds, hilitedElementsQueryCache, setNumberOfVisualizedGroups, setOverlappedElementsInfo, setGroupElementsInfo, setOverlappedElementGroupPairs, emphasizeElements);
+        isNonEmphasizedSelectable && (0, viewerUtils_1.clearEmphasizedElements)();
+        handleVisualizationStates(false);
+    }, [handleVisualizationStates, groups, iModelConnection, hiddenGroupsIds, hilitedElementsQueryCache, setNumberOfVisualizedGroups, setOverlappedElementsInfo, setGroupElementsInfo, setOverlappedElementGroupPairs, emphasizeElements, isNonEmphasizedSelectable]);
+    (0, react_1.useEffect)(() => {
+        const visualize = async () => {
+            if (isOverlappedColored === false) {
+                if (groups.length > 0 && showGroupColor) {
+                    await triggerVisualization();
+                }
+                else {
+                    (0, viewerUtils_1.clearEmphasizedOverriddenElements)();
+                }
+            }
+        };
+        void visualize();
+        // We don't want to trigger full visualization when toggling individual groups.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [groups, showGroupColor, isOverlappedColored]);
+    const hideAllGroups = (0, react_1.useCallback)(async () => {
+        setLoadingQuery(true);
+        await (0, groupsHelpers_1.hideGroups)(iModelConnection, groups, hilitedElementsQueryCache);
+        setLoadingQuery(false);
+    }, [groups, hilitedElementsQueryCache, iModelConnection]);
+    const hideSingleGroupWrapper = (0, react_1.useCallback)(async (groupToHide) => {
+        setLoadingQuery(true);
+        await (0, groupsHelpers_1.hideGroupConsideringOverlaps)(overlappedElementGroupPairs, groupToHide.id, hiddenGroupsIds);
+        setLoadingQuery(false);
+    }, [overlappedElementGroupPairs, hiddenGroupsIds]);
+    const showGroup = (0, react_1.useCallback)(async (viewGroup) => {
+        setLoadingQuery(true);
+        (0, viewerUtils_1.clearHiddenElements)();
+        // hide group Ids filter
+        const newHiddenGroups = groups.filter((g) => hiddenGroupsIds.has(g.id) && g.id !== viewGroup.id);
+        // view group Ids filter
+        const viewGroups = groups.filter((g) => !hiddenGroupsIds.has(g.id) || g.id === viewGroup.id);
+        const viewIds = await getHiliteIdsFromGroupsWrapper(viewGroups);
+        let hiddenIds = await getHiliteIdsFromGroupsWrapper(newHiddenGroups);
+        hiddenIds = hiddenIds.filter((id) => !viewIds.includes(id));
+        (0, viewerUtils_1.hideElements)(hiddenIds);
+        setLoadingQuery(false);
+    }, [groups, hiddenGroupsIds, getHiliteIdsFromGroupsWrapper]);
+    const showAll = (0, react_1.useCallback)(async () => {
+        setLoadingQuery(true);
+        (0, viewerUtils_1.clearHiddenElements)();
+        setHiddenGroupsIds(new Set());
+        await getHiliteIdsFromGroupsWrapper(groups);
+        setLoadingQuery(false);
+    }, [getHiliteIdsFromGroupsWrapper, groups, setHiddenGroupsIds]);
+    const hideAll = (0, react_1.useCallback)(async () => {
+        await hideAllGroups();
+        setHiddenGroupsIds(new Set(groups.map((g) => g.id)));
+        await getHiliteIdsFromGroupsWrapper(groups);
+    }, [
+        setHiddenGroupsIds,
+        groups,
+        hideAllGroups,
+        getHiliteIdsFromGroupsWrapper,
+    ]);
+    const onModify = (0, react_1.useCallback)(async (group, type) => {
+        if (!onClickGroupModify)
+            return;
+        if (group.id && hiddenGroupsIds.has(group.id)) {
+            await showGroup(group);
+            setHiddenGroupsIds(new Set([...hiddenGroupsIds].filter((id) => id !== group.id)));
+        }
+        (0, viewerUtils_1.clearEmphasizedElements)();
+        onClickGroupModify(group, type);
+    }, [hiddenGroupsIds, onClickGroupModify, setHiddenGroupsIds, showGroup]);
+    const onAddGroup = (0, react_1.useCallback)((type) => {
+        if (!onClickAddGroup)
+            return;
+        onClickAddGroup(type);
+        (0, viewerUtils_1.clearEmphasizedElements)();
+    }, [onClickAddGroup]);
+    const groupActionButtonRenderers = (0, react_1.useMemo)(() => [
+        (props) => showGroupColor ? react_1.default.createElement(GroupColorLegend_1.GroupColorLegend, { ...props, groups: groups }) : [],
+        (props) => (react_1.default.createElement(GroupsShowHideButtons_1.GroupsShowHideButtons, { ...props, isLoadingQuery: isLoadingQuery, showGroup: showGroup, hideGroup: hideSingleGroupWrapper })),
+    ].flat(), [groups, hideSingleGroupWrapper, isLoadingQuery, showGroup, showGroupColor]);
+    const overlappedAlert = (0, react_1.useMemo)(() => overlappedElementsInfo.size > 0 && isAlertClosed && showGroupColor && !isVisualizing ?
+        react_1.default.createElement(itwinui_react_1.Alert, { onClose: () => setIsAlertClosed(false), clickableText: isAlertExpanded ? "Less Details" : "More Details", clickableTextProps: { onClick: () => setIsAlertExpanded(!isAlertExpanded) } },
+            "Overlapping elements are colored ",
+            react_1.default.createElement(itwinui_react_1.Text, { className: "gmw-red-text" }, "red"),
+            " in the viewer.",
+            isAlertExpanded ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("br", null),
+                "To get overlap info in detail, click the ",
+                react_1.default.createElement(itwinui_react_1.Icon, null,
+                    react_1.default.createElement(itwinui_icons_react_1.SvgMore, null)),
+                " button then \u201COverlap Info\u201D")) : undefined) : undefined, [isAlertClosed, isAlertExpanded, isVisualizing, overlappedElementsInfo.size, showGroupColor]);
+    return (react_1.default.createElement("div", { className: "gmw-groups-vis-container" },
+        react_1.default.createElement(GroupsVisualizationActions_1.GroupVisualizationActions, { isLoadingQuery: isLoadingQuery, showAll: showAll, hideAll: hideAll }),
+        react_1.default.createElement(Groups_1.Groups, { onClickGroupModify: onModify, onClickAddGroup: onAddGroup, actionButtonRenderers: groupActionButtonRenderers, ...rest, disableActions: isLoadingQuery, isVisualizing: isVisualizing, alert: overlappedAlert })));
+};
+exports.GroupsVisualization = GroupsVisualization;
+//# sourceMappingURL=GroupsVisualization.js.map

package/lib/cjs/components/Groups/GroupsVisualization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupsVisualization.js","sourceRoot":"","sources":["../../../../src/components/Groups/GroupsVisualization.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 { Group } from \"@itwin/insights-client\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useGroupHilitedElementsContext } from \"../context/GroupHilitedElementsContext\";\nimport {\n  getHiliteIdsFromGroups,\n  hideGroupConsideringOverlaps,\n  hideGroups,\n  visualizeGroupColors,\n} from \"./groupsHelpers\";\nimport {\n  clearEmphasizedElements,\n  clearEmphasizedOverriddenElements,\n  clearHiddenElements,\n  hideElements,\n} from \"../../common/viewerUtils\";\nimport type { GroupsProps } from \"./Groups\";\nimport { Groups } from \"./Groups\";\nimport { GroupColorLegend } from \"./GroupColorLegend\";\nimport { GroupVisualizationActions } from \"./GroupsVisualizationActions\";\nimport { GroupsShowHideButtons } from \"./GroupsShowHideButtons\";\nimport \"./GroupsVisualization.scss\";\nimport { useGroupingMappingApiConfig } from \"../context/GroupingApiConfigContext\";\nimport type { ActionButtonRenderer, ActionButtonRendererProps } from \"./GroupsView\";\nimport { Alert, Icon, Text } from \"@itwin/itwinui-react\";\nimport { SvgMore } from \"@itwin/itwinui-icons-react\";\n\nexport interface GroupsVisualizationProps extends GroupsProps {\n  isNonEmphasizedSelectable?: boolean;\n  emphasizeElements?: boolean;\n}\n\nexport const GroupsVisualization = ({\n  emphasizeElements = true,\n  isNonEmphasizedSelectable = false,\n  onClickGroupModify,\n  onClickAddGroup,\n  ...rest\n}: GroupsVisualizationProps) => {\n  const { iModelConnection } = useGroupingMappingApiConfig();\n  if (!iModelConnection) {\n    throw new Error(\"This component requires an active iModelConnection.\");\n  }\n  const [isLoadingQuery, setLoadingQuery] = useState<boolean>(false);\n  const [isVisualizing, setIsVisualizing] = useState<boolean>(false);\n  const [isAlertClosed, setIsAlertClosed] = useState<boolean>(true);\n  const [isAlertExpanded, setIsAlertExpanded] = useState<boolean>(false);\n  const {\n    hilitedElementsQueryCache,\n    groups,\n    hiddenGroupsIds,\n    showGroupColor,\n    isOverlappedColored,\n    setHiddenGroupsIds,\n    setNumberOfVisualizedGroups,\n    setOverlappedElementsInfo,\n    setGroupElementsInfo,\n    overlappedElementsInfo,\n    overlappedElementGroupPairs,\n    setOverlappedElementGroupPairs,\n  } = useGroupHilitedElementsContext();\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 handleVisualizationStates = useCallback((start: boolean = true) => {\n    setIsVisualizing(start);\n    setLoadingQuery(start);\n    if (!start) {\n      setNumberOfVisualizedGroups(0);\n    }\n  }, [setNumberOfVisualizedGroups]);\n\n  const triggerVisualization = useCallback(async () => {\n    handleVisualizationStates(true);\n    const groupsCopy = [...groups];\n    await visualizeGroupColors(\n      iModelConnection,\n      groupsCopy,\n      hiddenGroupsIds,\n      hilitedElementsQueryCache,\n      setNumberOfVisualizedGroups,\n      setOverlappedElementsInfo,\n      setGroupElementsInfo,\n      setOverlappedElementGroupPairs,\n      emphasizeElements,\n    );\n    isNonEmphasizedSelectable && clearEmphasizedElements();\n    handleVisualizationStates(false);\n  }, [handleVisualizationStates, groups, iModelConnection, hiddenGroupsIds, hilitedElementsQueryCache, setNumberOfVisualizedGroups, setOverlappedElementsInfo, setGroupElementsInfo, setOverlappedElementGroupPairs, emphasizeElements, isNonEmphasizedSelectable]);\n\n  useEffect(() => {\n    const visualize = async () => {\n      if (isOverlappedColored === false) {\n        if (groups.length > 0 && showGroupColor) {\n          await triggerVisualization();\n        } else {\n          clearEmphasizedOverriddenElements();\n        }\n      }\n    };\n    void visualize();\n    // We don't want to trigger full visualization when toggling individual groups.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [groups, showGroupColor, isOverlappedColored]);\n\n  const hideAllGroups = useCallback(\n    async () => {\n      setLoadingQuery(true);\n      await hideGroups(iModelConnection, groups, hilitedElementsQueryCache);\n      setLoadingQuery(false);\n    },\n    [groups, hilitedElementsQueryCache, iModelConnection]\n  );\n\n  const hideSingleGroupWrapper = useCallback(\n    async (groupToHide: Group) => {\n      setLoadingQuery(true);\n\n      await hideGroupConsideringOverlaps(overlappedElementGroupPairs, groupToHide.id, hiddenGroupsIds);\n\n      setLoadingQuery(false);\n    },\n    [overlappedElementGroupPairs, hiddenGroupsIds]\n  );\n\n  const showGroup = useCallback(\n    async (viewGroup: Group) => {\n      setLoadingQuery(true);\n      clearHiddenElements();\n\n      // hide group Ids filter\n      const newHiddenGroups: Group[] = groups.filter((g) => hiddenGroupsIds.has(g.id) && g.id !== viewGroup.id);\n\n      // view group Ids filter\n      const viewGroups = groups.filter((g) => !hiddenGroupsIds.has(g.id) || g.id === viewGroup.id);\n      const viewIds = await getHiliteIdsFromGroupsWrapper(viewGroups);\n\n      let hiddenIds = await getHiliteIdsFromGroupsWrapper(newHiddenGroups);\n      hiddenIds = hiddenIds.filter((id) => !viewIds.includes(id));\n      hideElements(hiddenIds);\n      setLoadingQuery(false);\n    },\n    [groups, hiddenGroupsIds, getHiliteIdsFromGroupsWrapper]\n  );\n\n  const showAll = useCallback(async () => {\n    setLoadingQuery(true);\n\n    clearHiddenElements();\n    setHiddenGroupsIds(new Set());\n    await getHiliteIdsFromGroupsWrapper(groups);\n\n    setLoadingQuery(false);\n  }, [getHiliteIdsFromGroupsWrapper, groups, setHiddenGroupsIds]);\n\n  const hideAll = useCallback(async () => {\n    await hideAllGroups();\n    setHiddenGroupsIds(\n      new Set(groups.map((g) => g.id))\n    );\n    await getHiliteIdsFromGroupsWrapper(groups);\n  }, [\n    setHiddenGroupsIds,\n    groups,\n    hideAllGroups,\n    getHiliteIdsFromGroupsWrapper,\n  ]);\n\n  const onModify = useCallback(\n    async (group: Group, type: string) => {\n      if (!onClickGroupModify) return;\n      if (group.id && hiddenGroupsIds.has(group.id)) {\n        await showGroup(group);\n        setHiddenGroupsIds(new Set([...hiddenGroupsIds].filter((id) => id !== group.id)));\n      }\n      clearEmphasizedElements();\n      onClickGroupModify(group, type);\n    },\n    [hiddenGroupsIds, onClickGroupModify, setHiddenGroupsIds, showGroup]\n  );\n\n  const onAddGroup = useCallback(\n    (type: string) => {\n      if (!onClickAddGroup) return;\n      onClickAddGroup(type);\n      clearEmphasizedElements();\n    },\n    [onClickAddGroup]\n  );\n\n  const groupActionButtonRenderers: ActionButtonRenderer[] = useMemo(() => [\n    (props: ActionButtonRendererProps) =>\n      showGroupColor ? <GroupColorLegend {...props} groups={groups} /> : [],\n    (props: ActionButtonRendererProps) => (\n      <GroupsShowHideButtons\n        {...props}\n        isLoadingQuery={isLoadingQuery}\n        showGroup={showGroup}\n        hideGroup={hideSingleGroupWrapper}\n      />\n    ),\n  ].flat(), [groups, hideSingleGroupWrapper, isLoadingQuery, showGroup, showGroupColor]);\n\n  const overlappedAlert = useMemo(() =>\n    overlappedElementsInfo.size > 0 && isAlertClosed && showGroupColor && !isVisualizing ?\n      <Alert\n        onClose={() => setIsAlertClosed(false)}\n        clickableText={isAlertExpanded ? \"Less Details\" : \"More Details\"}\n        clickableTextProps={{ onClick: () => setIsAlertExpanded(!isAlertExpanded) }}\n      >\n        Overlapping elements are colored <Text className=\"gmw-red-text\">red</Text> in the viewer.\n        {isAlertExpanded ? (\n          <>\n            <br />\n            To get overlap info in detail, click the <Icon><SvgMore/></Icon> button then &ldquo;Overlap Info&rdquo;\n          </>\n        ) : undefined}\n      </Alert> : undefined,\n  [isAlertClosed, isAlertExpanded, isVisualizing, overlappedElementsInfo.size, showGroupColor]\n  );\n\n  return (\n    <div className=\"gmw-groups-vis-container\">\n      <GroupVisualizationActions\n        isLoadingQuery={isLoadingQuery}\n        showAll={showAll}\n        hideAll={hideAll}\n      />\n      <Groups\n        onClickGroupModify={onModify}\n        onClickAddGroup={onAddGroup}\n        actionButtonRenderers={groupActionButtonRenderers}\n        {...rest}\n        disableActions={isLoadingQuery}\n        isVisualizing={isVisualizing}\n        alert={overlappedAlert}\n      />\n    </div>\n  );\n};\n"]}

package/lib/cjs/components/Groups/GroupsVisualization.scss

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.gmw-groups-vis-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--iui-size-s);
+  flex-grow: 1;
+  min-height: 0;
+}
+
+.gmw-red-text {
+  display: inline-block;
+  color: var(--iui-color-border-negative);
+  font-weight: bold;
+}

package/lib/cjs/components/Groups/GroupsVisualizationActions.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupVisualizationActions = 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 itwinui_react_1 = require("@itwin/itwinui-react");
+const react_1 = __importDefault(require("react"));
+const ToggleGroupVisibility_1 = require("./ToggleGroupVisibility");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+require("./GroupsVisualizationActions.scss");
+const GroupHilitedElementsContext_1 = require("../context/GroupHilitedElementsContext");
+const GroupVisualizationActions = ({ isLoadingQuery, showAll, hideAll, }) => {
+    const { showGroupColor, setShowGroupColor, } = (0, GroupHilitedElementsContext_1.useGroupHilitedElementsContext)();
+    return (react_1.default.createElement(itwinui_react_1.ButtonGroup, { className: "gmw-visual-buttons" },
+        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" },
+            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" },
+            react_1.default.createElement(itwinui_icons_react_1.SvgVisibilityHide, null))));
+};
+exports.GroupVisualizationActions = GroupVisualizationActions;
+//# sourceMappingURL=GroupsVisualizationActions.js.map

package/lib/cjs/components/Groups/GroupsVisualizationActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupsVisualizationActions.js","sourceRoot":"","sources":["../../../../src/components/Groups/GroupsVisualizationActions.tsx"],"names":[],"mappings":";;;;;;AAAA;;;+FAG+F;AAC/F,wDAA+D;AAC/D,kDAA0B;AAC1B,mEAAgE;AAChE,oEAAkF;AAClF,6CAA2C;AAC3C,wFAAwF;AAQjF,MAAM,yBAAyB,GAAG,CAAC,EACxC,cAAc,EACd,OAAO,EACP,OAAO,GACwB,EAAE,EAAE;IACnC,MAAM,EACJ,cAAc,EACd,iBAAiB,GAClB,GAAG,IAAA,4DAA8B,GAAE,CAAC;IAErC,OAAO,CACL,8BAAC,2BAAW,IAAC,SAAS,EAAC,oBAAoB;QACzC,8BAAC,6CAAqB,IACpB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,GACpC;QACF,8BAAC,0BAAU,IACT,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAC,YAAY;YAEtB,8BAAC,uCAAiB,OAAG,CACV;QACb,8BAAC,0BAAU,IACT,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAC,YAAY;YAEtB,8BAAC,uCAAiB,OAAG,CACV,CACD,CACf,CAAC;AAEJ,CAAC,CAAC;AApCW,QAAA,yBAAyB,6BAoCpC","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 { ButtonGroup, IconButton } from \"@itwin/itwinui-react\";\nimport React from \"react\";\nimport { ToggleGroupVisibility } from \"./ToggleGroupVisibility\";\nimport { SvgVisibilityHide, SvgVisibilityShow } from \"@itwin/itwinui-icons-react\";\nimport \"./GroupsVisualizationActions.scss\";\nimport { useGroupHilitedElementsContext } from \"../context/GroupHilitedElementsContext\";\n\ninterface GroupVisualizationActionsProps {\n  isLoadingQuery: boolean;\n  showAll: () => Promise<void>;\n  hideAll: () => Promise<void>;\n}\n\nexport const GroupVisualizationActions = ({\n  isLoadingQuery,\n  showAll,\n  hideAll,\n}: GroupVisualizationActionsProps) => {\n  const {\n    showGroupColor,\n    setShowGroupColor,\n  } = useGroupHilitedElementsContext();\n\n  return (\n    <ButtonGroup className=\"gmw-visual-buttons\">\n      <ToggleGroupVisibility\n        isLoadingQuery={isLoadingQuery}\n        showGroupColor={showGroupColor}\n        setShowGroupColor={setShowGroupColor}\n      />\n      <IconButton\n        title=\"Show All\"\n        onClick={showAll}\n        disabled={isLoadingQuery}\n        styleType=\"borderless\"\n      >\n        <SvgVisibilityShow />\n      </IconButton>\n      <IconButton\n        title=\"Hide All\"\n        onClick={hideAll}\n        disabled={isLoadingQuery}\n        styleType=\"borderless\"\n      >\n        <SvgVisibilityHide />\n      </IconButton>\n    </ButtonGroup>\n  );\n\n};\n\n"]}

package/lib/cjs/components/Groups/OverlappedElementsInformationPanel.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import "./OverlappedElementsInformationPanel.scss";
+import type { Group } from "@itwin/insights-client";
+import type { OverlappedInfo } from "../context/GroupHilitedElementsContext";
+export interface OverlappedElementsInformationPanelProps {
+    group?: Group;
+    onClose: () => void;
+    overlappedElementsInfo: Map<string, OverlappedInfo[]>;
+    groups: Group[];
+}
+export interface OverlappedElementsDisplayProps {
+    overlappedElements: string;
+    groups: string[];
+    elementsIds: string[];
+}
+export declare const OverlappedElementsInformationPanel: ({ group, onClose, overlappedElementsInfo, groups, }: OverlappedElementsInformationPanelProps) => JSX.Element;
+//# sourceMappingURL=OverlappedElementsInformationPanel.d.ts.map

package/lib/cjs/components/Groups/OverlappedElementsInformationPanel.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverlappedElementsInformationPanel = 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 react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+require("./OverlappedElementsInformationPanel.scss");
+const GroupHilitedElementsContext_1 = require("../context/GroupHilitedElementsContext");
+const viewerUtils_1 = require("../../common/viewerUtils");
+const OverlappedElementsInformationPanel = ({ group, onClose, overlappedElementsInfo, groups, }) => {
+    const [isOverlappedInfoLoading, setIsOverlappedInfoLoading] = (0, react_2.useState)(false);
+    const { setIsOverlappedColored } = (0, GroupHilitedElementsContext_1.useGroupHilitedElementsContext)();
+    const [isLoading, setIsLoading] = (0, react_2.useState)(false);
+    const columns = (0, react_2.useMemo)(() => [
+        {
+            id: "number",
+            Header: "Overlapped elements",
+            accessor: "overlappedElements",
+        },
+        {
+            id: "groups",
+            Header: "Groups",
+            accessor: "groups",
+            Cell: (value) => {
+                return (react_1.default.createElement("div", null, value.row.original.groups.map((groupName, index) => (react_1.default.createElement("div", { key: index }, groupName)))));
+            },
+        },
+    ], []);
+    const key = group ? group.id : "";
+    const overlappedInfo = overlappedElementsInfo.get(key);
+    const arr = (0, react_2.useMemo)(() => {
+        setIsOverlappedInfoLoading(true);
+        const result = [];
+        if (overlappedInfo) {
+            setIsOverlappedColored(true);
+            overlappedInfo.forEach((array) => {
+                const groupNames = [];
+                array.groupIds.forEach((groupId) => {
+                    const group = groups.find((group) => group.id === groupId);
+                    if (group) {
+                        groupNames.push(group.groupName);
+                    }
+                });
+                result.push({
+                    overlappedElements: array.elements.length.toString(),
+                    groups: groupNames,
+                    elementsIds: array.elements,
+                });
+            });
+        }
+        setIsOverlappedInfoLoading(false);
+        return result;
+    }, [overlappedInfo, groups, setIsOverlappedColored]);
+    const handleClose = () => {
+        setIsOverlappedColored(false);
+        onClose();
+    };
+    const onSelect = (0, react_2.useCallback)(async (selectedData) => {
+        try {
+            setIsLoading(true);
+            (0, viewerUtils_1.clearEmphasizedOverriddenElements)();
+            (0, viewerUtils_1.clearHiddenElements)();
+            if (selectedData && selectedData.length !== 0) {
+                (0, viewerUtils_1.visualizeElements)(selectedData[0].elementsIds, "red");
+                await (0, viewerUtils_1.zoomToElements)(selectedData[0].elementsIds);
+            }
+        }
+        catch (error) {
+            itwinui_react_1.toaster.negative("There was an error visualizing overlapped elements.");
+            /* eslint-disable no-console */
+            console.error(error);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, []);
+    return (react_1.default.createElement(itwinui_react_1.InformationPanel, { isOpen: !!group, className: "gmw-overlap-information" },
+        react_1.default.createElement(itwinui_react_1.InformationPanelHeader, { onClose: handleClose },
+            react_1.default.createElement(itwinui_react_1.Text, { variant: "leading" }, `Overlap Info of ${group?.groupName}`)),
+        react_1.default.createElement(itwinui_react_1.InformationPanelBody, { className: "gmw-information-body" },
+            react_1.default.createElement(itwinui_react_1.Table, { columns: columns, data: arr, emptyTableContent: "No Overlaps.", isLoading: isOverlappedInfoLoading, isSortable: true, isSelectable: true, selectionMode: "single", onSelect: onSelect, isRowDisabled: () => isLoading }))));
+};
+exports.OverlappedElementsInformationPanel = OverlappedElementsInformationPanel;
+//# sourceMappingURL=OverlappedElementsInformationPanel.js.map

package/lib/cjs/components/Groups/OverlappedElementsInformationPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlappedElementsInformationPanel.js","sourceRoot":"","sources":["../../../../src/components/Groups/OverlappedElementsInformationPanel.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 from \"react\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport type { CreateTypeFromInterface } from \"../../common/utils\";\nimport {\n  InformationPanel,\n  InformationPanelBody,\n  InformationPanelHeader,\n  Table,\n  Text,\n  toaster,\n} from \"@itwin/itwinui-react\";\nimport \"./OverlappedElementsInformationPanel.scss\";\nimport type { Group } from \"@itwin/insights-client\";\nimport type { OverlappedInfo } from \"../context/GroupHilitedElementsContext\";\nimport type { CellProps, Column } from \"react-table\";\nimport { useGroupHilitedElementsContext } from \"../context/GroupHilitedElementsContext\";\nimport { clearEmphasizedOverriddenElements, clearHiddenElements, visualizeElements, zoomToElements } from \"../../common/viewerUtils\";\n\nexport interface OverlappedElementsInformationPanelProps {\n  group?: Group;\n  onClose: () => void;\n  overlappedElementsInfo: Map<string, OverlappedInfo[]>;\n  groups: Group[];\n}\n\nexport interface OverlappedElementsDisplayProps {\n  overlappedElements: string;\n  groups: string[];\n  elementsIds: string[];\n}\ntype OverlappedTyped = CreateTypeFromInterface<OverlappedElementsDisplayProps>;\n\nexport const OverlappedElementsInformationPanel = ({\n  group,\n  onClose,\n  overlappedElementsInfo,\n  groups,\n}: OverlappedElementsInformationPanelProps) => {\n  const [isOverlappedInfoLoading, setIsOverlappedInfoLoading] =\n    useState<boolean>(false);\n  const { setIsOverlappedColored } = useGroupHilitedElementsContext();\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n\n  const columns = useMemo(\n    (): Column<OverlappedTyped>[] =>[\n      {\n        id: \"number\",\n        Header: \"Overlapped elements\",\n        accessor: \"overlappedElements\",\n      },\n      {\n        id: \"groups\",\n        Header: \"Groups\",\n        accessor: \"groups\",\n        Cell: (value: CellProps<OverlappedTyped>) => {\n          return (\n            <div>\n              {value.row.original.groups.map((groupName, index) => (\n                <div key={index}>{groupName}</div>\n              ))}\n            </div>\n          );\n        },\n      },\n    ],\n    []\n  );\n\n  const key = group ? group.id : \"\";\n  const overlappedInfo = overlappedElementsInfo.get(key);\n\n  const arr: OverlappedElementsDisplayProps[] = useMemo(() => {\n    setIsOverlappedInfoLoading(true);\n    const result: OverlappedElementsDisplayProps[] = [];\n    if (overlappedInfo) {\n      setIsOverlappedColored(true);\n      overlappedInfo.forEach((array) => {\n        const groupNames: string[] = [];\n        array.groupIds.forEach((groupId) => {\n          const group = groups.find((group) => group.id === groupId);\n          if (group) {\n            groupNames.push(group.groupName);\n          }\n        });\n        result.push({\n          overlappedElements: array.elements.length.toString(),\n          groups: groupNames,\n          elementsIds: array.elements,\n        });\n      });\n    }\n    setIsOverlappedInfoLoading(false);\n    return result;\n  }, [overlappedInfo, groups, setIsOverlappedColored]);\n\n  const handleClose = () => {\n    setIsOverlappedColored(false);\n    onClose();\n  };\n\n  const onSelect = useCallback(\n    async (\n      selectedData: CreateTypeFromInterface<OverlappedElementsDisplayProps>[] | undefined\n    ) => {\n      try {\n        setIsLoading(true);\n        clearEmphasizedOverriddenElements();\n        clearHiddenElements();\n        if (selectedData && selectedData.length !== 0) {\n          visualizeElements(selectedData[0].elementsIds, \"red\");\n          await zoomToElements(selectedData[0].elementsIds);\n        }\n      } catch (error) {\n        toaster.negative(\"There was an error visualizing overlapped elements.\");\n        /* eslint-disable no-console */\n        console.error(error);\n      } finally {\n        setIsLoading(false);\n      }\n    },\n    []\n  );\n\n  return (\n    <InformationPanel isOpen={!!group} className=\"gmw-overlap-information\">\n      <InformationPanelHeader onClose={handleClose}>\n        <Text variant=\"leading\">{`Overlap Info of ${group?.groupName}`}</Text>\n      </InformationPanelHeader>\n      <InformationPanelBody className=\"gmw-information-body\">\n        <Table<OverlappedTyped>\n          columns={columns}\n          data={arr}\n          emptyTableContent=\"No Overlaps.\"\n          isLoading={isOverlappedInfoLoading}\n          isSortable={true}\n          isSelectable\n          selectionMode=\"single\"\n          onSelect={onSelect}\n          isRowDisabled={() => isLoading}\n        />\n      </InformationPanelBody>\n    </InformationPanel>\n  );\n};\n"]}

package/lib/cjs/components/Groups/OverlappedElementsInformationPanel.scss

@@ -0,0 +1,14 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+.gmw-overlap-information {
+    max-width: 100%;
+    width: 100%;
+    .gmw-information-body {
+      textarea {
+        resize: vertical;
+      }
+    }
+  }