@itwin/grouping-mapping-widget 0.22.0 → 0.23.0

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useGroupHilitedElementsContext } from "../context/GroupHilitedElementsContext";
-import { getHiliteIdsFromGroups, hideGroupConsideringOverlaps, hideGroups, visualizeGroupColors, } from "./groupsHelpers";
-import { clearEmphasizedElements, clearEmphasizedOverriddenElements, clearHiddenElements, hideElements, } from "../../common/viewerUtils";
+import { generateOverlappedGroups, hideGroupConsideringOverlaps, visualizeGroupColors, } from "./groupsHelpers";
+import { clearEmphasizedElements, clearEmphasizedOverriddenElements, clearHiddenElements, hideElements, zoomToElements, } from "../../common/viewerUtils";
 import { Groups } from "./Groups";
 import { GroupColorLegend } from "./GroupColorLegend";
 import { GroupVisualizationActions } from "./GroupsVisualizationActions";
@@ -10,93 +10,117 @@ import "./GroupsVisualization.scss";
 import { useGroupingMappingApiConfig } from "../context/GroupingApiConfigContext";
 import { Alert, Icon, Text } from "@itwin/itwinui-react";
 import { SvgMore } from "@itwin/itwinui-icons-react";
-export const GroupsVisualization = ({ emphasizeElements = true, isNonEmphasizedSelectable = false, onClickGroupModify, onClickAddGroup, ...rest }) => {
+import { useMappingClient } from "../context/MappingClientContext";
+import { useMutation } from "@tanstack/react-query";
+import { useIsMounted } from "../../common/hooks/useIsMounted";
+import { useFetchGroups } from "./hooks/useFetchGroups";
+import { useKeySetHiliteQueries } from "./hooks/useKeySetHiliteQueries";
+export const GroupsVisualization = ({ emphasizeElements = true, isNonEmphasizedSelectable = false, onClickGroupModify, onClickAddGroup, mapping, ...rest }) => {
     const { iModelConnection } = useGroupingMappingApiConfig();
     if (!iModelConnection) {
         throw new Error("This component requires an active iModelConnection.");
     }
-    const [isLoadingQuery, setLoadingQuery] = useState(false);
-    const [isVisualizing, setIsVisualizing] = useState(false);
     const [isAlertClosed, setIsAlertClosed] = useState(true);
     const [isAlertExpanded, setIsAlertExpanded] = useState(false);
-    const { hilitedElementsQueryCache, groups, hiddenGroupsIds, showGroupColor, isOverlappedColored, setHiddenGroupsIds, setNumberOfVisualizedGroups, setOverlappedElementsInfo, setGroupElementsInfo, overlappedElementsInfo, overlappedElementGroupPairs, setOverlappedElementGroupPairs, } = useGroupHilitedElementsContext();
-    const getHiliteIdsFromGroupsWrapper = useCallback(async (groups) => iModelConnection
-        ? getHiliteIdsFromGroups(iModelConnection, groups, hilitedElementsQueryCache)
-        : [], [iModelConnection, hilitedElementsQueryCache]);
-    const handleVisualizationStates = useCallback((start = true) => {
-        setIsVisualizing(start);
-        setLoadingQuery(start);
-        if (!start) {
-            setNumberOfVisualizedGroups(0);
-        }
-    }, [setNumberOfVisualizedGroups]);
-    const triggerVisualization = useCallback(async () => {
-        handleVisualizationStates(true);
-        const groupsCopy = [...groups];
-        await visualizeGroupColors(iModelConnection, groupsCopy, hiddenGroupsIds, hilitedElementsQueryCache, setNumberOfVisualizedGroups, setOverlappedElementsInfo, setGroupElementsInfo, setOverlappedElementGroupPairs, emphasizeElements);
-        isNonEmphasizedSelectable && clearEmphasizedElements();
-        handleVisualizationStates(false);
-    }, [handleVisualizationStates, groups, iModelConnection, hiddenGroupsIds, hilitedElementsQueryCache, setNumberOfVisualizedGroups, setOverlappedElementsInfo, setGroupElementsInfo, setOverlappedElementGroupPairs, emphasizeElements, isNonEmphasizedSelectable]);
+    const { hiddenGroupsIds, showGroupColor, setShowGroupColor, isOverlappedColored, setHiddenGroupsIds, setNumberOfVisualizedGroups, isVisualizationsEnabled, setIsVisualizationsEnabled, overlappedElementsMetadata, setOverlappedElementsMetadata, } = useGroupHilitedElementsContext();
+    const { getAccessToken, iModelId } = useGroupingMappingApiConfig();
+    const mappingClient = useMappingClient();
+    const { data: groups, isFetched: isGroupsFetched, isFetching: isGroupsFetching } = useFetchGroups(iModelId, mapping.id, getAccessToken, mappingClient);
+    const isMounted = useIsMounted();
+    const [enableGroupQueries, setEnableGroupQueries] = useState(false);
+    const { groupQueries } = useKeySetHiliteQueries(groups ?? [], enableGroupQueries, iModelConnection);
+    const triggerVisualization = useCallback(async (groupsWithGroupedOverlaps) => visualizeGroupColors(hiddenGroupsIds, groupsWithGroupedOverlaps, setNumberOfVisualizedGroups, emphasizeElements), [emphasizeElements, hiddenGroupsIds, setNumberOfVisualizedGroups]);
+    const zoomToElementsMutation = useMutation({
+        mutationFn: zoomToElements,
+        onSuccess: () => {
+            if (isMounted()) {
+                isNonEmphasizedSelectable && clearEmphasizedElements();
+            }
+        },
+    });
+    const visualizationMutation = useMutation({
+        mutationFn: triggerVisualization,
+        onSuccess: (allIds) => {
+            if (isMounted()) {
+                zoomToElementsMutation.mutate(allIds);
+            }
+        },
+    });
+    const isGroupsQueriesReady = useMemo(() => groupQueries.every((query) => query.isFetched && query.data) && groupQueries.length > 0, [groupQueries]);
+    const groupQueriesProgressCount = useMemo(() => groupQueries.filter((query) => query.isFetched).length, [groupQueries]);
+    const isResolvingGroupQueries = useMemo(() => groupQueries.some((query) => query.isFetching), [groupQueries]);
+    const hiliteIds = useMemo(() => isGroupsQueriesReady
+        ? groupQueries.map((query) => ({
+            groupId: query.data.group.id,
+            elementIds: query.data.result.ids,
+        }))
+        : [], [groupQueries, isGroupsQueriesReady]);
+    const getHiliteIdsFromGroupsWrapper = useCallback((groups) => hiliteIds.filter((id) => groups.some((group) => group.id === id.groupId)).flatMap((id) => id.elementIds), [hiliteIds]);
     useEffect(() => {
-        const visualize = async () => {
-            if (isOverlappedColored === false) {
-                if (groups.length > 0 && showGroupColor) {
-                    await triggerVisualization();
-                }
-                else {
-                    clearEmphasizedOverriddenElements();
-                }
+        if (isOverlappedColored === false) {
+            if (hiliteIds.length > 0 && showGroupColor && !isGroupsFetching) {
+                const results = generateOverlappedGroups(hiliteIds);
+                const { groupsWithGroupedOverlaps, overlappedElementsInfo, numberOfElementsInGroups } = results;
+                setOverlappedElementsMetadata({ overlappedElementsInfo, groupElementsInfo: numberOfElementsInGroups, overlappedElementGroupPairs: groupsWithGroupedOverlaps });
+                visualizationMutation.mutate(results.groupsWithGroupedOverlaps);
             }
-        };
-        void visualize();
+            else {
+                clearEmphasizedOverriddenElements();
+            }
+        }
         // 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 = useCallback(async () => {
-        setLoadingQuery(true);
-        await hideGroups(iModelConnection, groups, hilitedElementsQueryCache);
-        setLoadingQuery(false);
-    }, [groups, hilitedElementsQueryCache, iModelConnection]);
-    const hideSingleGroupWrapper = useCallback(async (groupToHide) => {
-        setLoadingQuery(true);
-        await hideGroupConsideringOverlaps(overlappedElementGroupPairs, groupToHide.id, hiddenGroupsIds);
-        setLoadingQuery(false);
-    }, [overlappedElementGroupPairs, hiddenGroupsIds]);
-    const showGroup = useCallback(async (viewGroup) => {
-        setLoadingQuery(true);
+    }, [showGroupColor, isOverlappedColored, hiliteIds]);
+    useEffect(() => {
+        if (isVisualizationsEnabled) {
+            setEnableGroupQueries(true);
+        }
+        else {
+            setShowGroupColor(false);
+            clearHiddenElements();
+            setHiddenGroupsIds(new Set());
+        }
+    }, [isVisualizationsEnabled, setHiddenGroupsIds, setIsVisualizationsEnabled, setShowGroupColor]);
+    const hideAllGroups = useCallback(() => {
+        if (!groups)
+            return;
+        hideElements(getHiliteIdsFromGroupsWrapper(groups));
+    }, [getHiliteIdsFromGroupsWrapper, groups]);
+    const hideSingleGroupWrapper = useCallback((groupToHide) => {
+        hideGroupConsideringOverlaps(overlappedElementsMetadata.overlappedElementGroupPairs, groupToHide.id, hiddenGroupsIds);
+    }, [hiddenGroupsIds, overlappedElementsMetadata.overlappedElementGroupPairs]);
+    const showGroup = useCallback((viewGroup) => {
+        if (!groups)
+            return;
         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);
+        const viewIds = getHiliteIdsFromGroupsWrapper(viewGroups);
+        let hiddenIds = getHiliteIdsFromGroupsWrapper(newHiddenGroups);
         hiddenIds = hiddenIds.filter((id) => !viewIds.includes(id));
         hideElements(hiddenIds);
-        setLoadingQuery(false);
     }, [groups, hiddenGroupsIds, getHiliteIdsFromGroupsWrapper]);
-    const showAll = useCallback(async () => {
-        setLoadingQuery(true);
+    const showAll = useCallback(() => {
         clearHiddenElements();
         setHiddenGroupsIds(new Set());
-        await getHiliteIdsFromGroupsWrapper(groups);
-        setLoadingQuery(false);
-    }, [getHiliteIdsFromGroupsWrapper, groups, setHiddenGroupsIds]);
-    const hideAll = useCallback(async () => {
-        await hideAllGroups();
+    }, [setHiddenGroupsIds]);
+    const hideAll = useCallback(() => {
+        if (!groups)
+            return;
+        hideAllGroups();
         setHiddenGroupsIds(new Set(groups.map((g) => g.id)));
-        await getHiliteIdsFromGroupsWrapper(groups);
     }, [
         setHiddenGroupsIds,
         groups,
         hideAllGroups,
-        getHiliteIdsFromGroupsWrapper,
     ]);
-    const onModify = useCallback(async (group, type) => {
+    const onModify = useCallback((group, type) => {
         if (!onClickGroupModify)
             return;
         if (group.id && hiddenGroupsIds.has(group.id)) {
-            await showGroup(group);
+            showGroup(group);
             setHiddenGroupsIds(new Set([...hiddenGroupsIds].filter((id) => id !== group.id)));
         }
         clearEmphasizedElements();
@@ -108,11 +132,11 @@ export const GroupsVisualization = ({ emphasizeElements = true, isNonEmphasizedS
         onClickAddGroup(type);
         clearEmphasizedElements();
     }, [onClickAddGroup]);
-    const groupActionButtonRenderers = useMemo(() => [
-        (props) => showGroupColor ? React.createElement(GroupColorLegend, { ...props, groups: groups }) : [],
-        (props) => (React.createElement(GroupsShowHideButtons, { ...props, isLoadingQuery: isLoadingQuery, showGroup: showGroup, hideGroup: hideSingleGroupWrapper })),
-    ].flat(), [groups, hideSingleGroupWrapper, isLoadingQuery, showGroup, showGroupColor]);
-    const overlappedAlert = useMemo(() => overlappedElementsInfo.size > 0 && isAlertClosed && showGroupColor && !isVisualizing ?
+    const groupActionButtonRenderers = useMemo(() => isVisualizationsEnabled ? [
+        (props) => showGroupColor ? React.createElement(GroupColorLegend, { ...props, groups: groups ?? [] }) : [],
+        (props) => (React.createElement(GroupsShowHideButtons, { ...props, isLoadingQuery: !(isVisualizationsEnabled && isGroupsFetched && isGroupsQueriesReady), showGroup: showGroup, hideGroup: hideSingleGroupWrapper })),
+    ].flat() : [], [groups, hideSingleGroupWrapper, isGroupsFetched, isGroupsQueriesReady, isVisualizationsEnabled, showGroup, showGroupColor]);
+    const overlappedAlert = useMemo(() => overlappedElementsMetadata.overlappedElementsInfo.size > 0 && isAlertClosed && showGroupColor ?
         React.createElement(Alert, { onClose: () => setIsAlertClosed(false), clickableText: isAlertExpanded ? "Less Details" : "More Details", clickableTextProps: { onClick: () => setIsAlertExpanded(!isAlertExpanded) } },
             "Overlapping elements are colored ",
             React.createElement(Text, { className: "gmw-red-text" }, "red"),
@@ -122,9 +146,17 @@ export const GroupsVisualization = ({ emphasizeElements = true, isNonEmphasizedS
                 "To get overlap info in detail, click the ",
                 React.createElement(Icon, null,
                     React.createElement(SvgMore, null)),
-                " button then \u201COverlap Info\u201D")) : undefined) : undefined, [isAlertClosed, isAlertExpanded, isVisualizing, overlappedElementsInfo.size, showGroupColor]);
+                " button then \u201COverlap Info\u201D")) : undefined) : undefined, [isAlertClosed, isAlertExpanded, overlappedElementsMetadata.overlappedElementsInfo.size, showGroupColor]);
+    const progressConfig = useMemo(() => isVisualizationsEnabled && isResolvingGroupQueries
+        ? {
+            hilitedGroupsProgress: {
+                currentHilitedGroups: groupQueriesProgressCount,
+                totalNumberOfGroups: groups?.length ?? 0,
+            },
+        }
+        : undefined, [groupQueriesProgressCount, groups, isResolvingGroupQueries, isVisualizationsEnabled]);
     return (React.createElement("div", { className: "gmw-groups-vis-container" },
-        React.createElement(GroupVisualizationActions, { isLoadingQuery: isLoadingQuery, showAll: showAll, hideAll: hideAll }),
-        React.createElement(Groups, { onClickGroupModify: onModify, onClickAddGroup: onAddGroup, actionButtonRenderers: groupActionButtonRenderers, ...rest, disableActions: isLoadingQuery, isVisualizing: isVisualizing, alert: overlappedAlert })));
+        React.createElement(GroupVisualizationActions, { disabled: !(isVisualizationsEnabled && isGroupsFetched && isGroupsQueriesReady), isVisualizationEnabled: isVisualizationsEnabled, onClickVisualizationButton: () => setIsVisualizationsEnabled((b) => !b), showAll: showAll, hideAll: hideAll }),
+        React.createElement(Groups, { onClickGroupModify: onModify, onClickAddGroup: onAddGroup, actionButtonRenderers: groupActionButtonRenderers, mapping: mapping, ...rest, progressConfig: progressConfig, alert: overlappedAlert })));
 };
 //# sourceMappingURL=GroupsVisualization.js.map

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

@@ -1 +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"]}
+{"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 type { OverlappedElementGroupPairs } from \"../context/GroupHilitedElementsContext\";\nimport { useGroupHilitedElementsContext } from \"../context/GroupHilitedElementsContext\";\nimport {\n  generateOverlappedGroups,\n  hideGroupConsideringOverlaps,\n  visualizeGroupColors,\n} from \"./groupsHelpers\";\nimport {\n  clearEmphasizedElements,\n  clearEmphasizedOverriddenElements,\n  clearHiddenElements,\n  hideElements,\n  zoomToElements,\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\";\nimport { useMappingClient } from \"../context/MappingClientContext\";\nimport { useMutation } from \"@tanstack/react-query\";\nimport { useIsMounted } from \"../../common/hooks/useIsMounted\";\nimport { useFetchGroups } from \"./hooks/useFetchGroups\";\nimport { useKeySetHiliteQueries } from \"./hooks/useKeySetHiliteQueries\";\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  mapping,\n  ...rest\n}: GroupsVisualizationProps) => {\n  const { iModelConnection } = useGroupingMappingApiConfig();\n  if (!iModelConnection) {\n    throw new Error(\"This component requires an active iModelConnection.\");\n  }\n  const [isAlertClosed, setIsAlertClosed] = useState<boolean>(true);\n  const [isAlertExpanded, setIsAlertExpanded] = useState<boolean>(false);\n  const {\n    hiddenGroupsIds,\n    showGroupColor,\n    setShowGroupColor,\n    isOverlappedColored,\n    setHiddenGroupsIds,\n    setNumberOfVisualizedGroups,\n    isVisualizationsEnabled,\n    setIsVisualizationsEnabled,\n    overlappedElementsMetadata,\n    setOverlappedElementsMetadata,\n  } = useGroupHilitedElementsContext();\n  const { getAccessToken, iModelId } = useGroupingMappingApiConfig();\n  const mappingClient = useMappingClient();\n  const { data: groups, isFetched: isGroupsFetched, isFetching: isGroupsFetching } = useFetchGroups(iModelId, mapping.id, getAccessToken, mappingClient);\n  const isMounted = useIsMounted();\n  const [enableGroupQueries, setEnableGroupQueries] = useState<boolean>(false);\n  const { groupQueries } = useKeySetHiliteQueries(groups ?? [], enableGroupQueries, iModelConnection);\n\n  const triggerVisualization = useCallback(async (groupsWithGroupedOverlaps: OverlappedElementGroupPairs[]) =>\n    visualizeGroupColors(\n      hiddenGroupsIds,\n      groupsWithGroupedOverlaps,\n      setNumberOfVisualizedGroups,\n      emphasizeElements,\n    ), [emphasizeElements, hiddenGroupsIds, setNumberOfVisualizedGroups]);\n\n  const zoomToElementsMutation = useMutation({\n    mutationFn: zoomToElements,\n    onSuccess: () => {\n      if (isMounted()) {\n        isNonEmphasizedSelectable && clearEmphasizedElements();\n      }\n    },\n  });\n\n  const visualizationMutation = useMutation({\n    mutationFn: triggerVisualization,\n    onSuccess: (allIds) => {\n      if (isMounted()) {\n        zoomToElementsMutation.mutate(allIds);\n      }\n    },\n  });\n\n  const isGroupsQueriesReady = useMemo(() =>\n    groupQueries.every((query) => query.isFetched && query.data) && groupQueries.length > 0, [groupQueries]\n  );\n  const groupQueriesProgressCount = useMemo(() => groupQueries.filter((query) => query.isFetched).length, [groupQueries]);\n  const isResolvingGroupQueries = useMemo(() => groupQueries.some((query) => query.isFetching), [groupQueries]);\n\n  const hiliteIds = useMemo(\n    () =>\n      isGroupsQueriesReady\n        ? groupQueries.map((query) => ({\n          groupId: query.data!.group.id,\n          elementIds: query.data!.result.ids,\n        }))\n        : [],\n    [groupQueries, isGroupsQueriesReady]\n  );\n  const getHiliteIdsFromGroupsWrapper = useCallback(\n    (groups: Group[]) =>\n      hiliteIds.filter((id) => groups.some((group) => group.id === id.groupId)).flatMap((id) => id.elementIds),\n    [hiliteIds]\n  );\n\n  useEffect(() => {\n    if (isOverlappedColored === false) {\n      if (hiliteIds.length > 0 && showGroupColor && !isGroupsFetching) {\n        const results = generateOverlappedGroups(hiliteIds);\n        const { groupsWithGroupedOverlaps, overlappedElementsInfo, numberOfElementsInGroups } = results;\n        setOverlappedElementsMetadata({ overlappedElementsInfo, groupElementsInfo: numberOfElementsInGroups, overlappedElementGroupPairs: groupsWithGroupedOverlaps });\n        visualizationMutation.mutate(results.groupsWithGroupedOverlaps);\n      } else {\n        clearEmphasizedOverriddenElements();\n      }\n    }\n    // We don't want to trigger full visualization when toggling individual groups.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [showGroupColor, isOverlappedColored, hiliteIds]);\n\n  useEffect(() => {\n    if (isVisualizationsEnabled) {\n      setEnableGroupQueries(true);\n    } else {\n      setShowGroupColor(false);\n      clearHiddenElements();\n      setHiddenGroupsIds(new Set());\n    }\n  }, [isVisualizationsEnabled, setHiddenGroupsIds, setIsVisualizationsEnabled, setShowGroupColor]);\n\n  const hideAllGroups = useCallback(\n    () => {\n      if (!groups) return;\n      hideElements(getHiliteIdsFromGroupsWrapper(groups));\n    },\n    [getHiliteIdsFromGroupsWrapper, groups]\n  );\n\n  const hideSingleGroupWrapper = useCallback(\n    (groupToHide: Group) => {\n      hideGroupConsideringOverlaps(overlappedElementsMetadata.overlappedElementGroupPairs, groupToHide.id, hiddenGroupsIds);\n    },\n    [hiddenGroupsIds, overlappedElementsMetadata.overlappedElementGroupPairs]\n  );\n\n  const showGroup = useCallback(\n    (viewGroup: Group) => {\n      if (!groups) return;\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 = getHiliteIdsFromGroupsWrapper(viewGroups);\n\n      let hiddenIds = getHiliteIdsFromGroupsWrapper(newHiddenGroups);\n      hiddenIds = hiddenIds.filter((id) => !viewIds.includes(id));\n      hideElements(hiddenIds);\n    },\n    [groups, hiddenGroupsIds, getHiliteIdsFromGroupsWrapper]\n  );\n\n  const showAll = useCallback(() => {\n    clearHiddenElements();\n    setHiddenGroupsIds(new Set());\n  }, [setHiddenGroupsIds]);\n\n  const hideAll = useCallback(() => {\n    if (!groups) return;\n    hideAllGroups();\n    setHiddenGroupsIds(\n      new Set(groups.map((g) => g.id))\n    );\n\n  }, [\n    setHiddenGroupsIds,\n    groups,\n    hideAllGroups,\n  ]);\n\n  const onModify = useCallback(\n    (group: Group, type: string) => {\n      if (!onClickGroupModify) return;\n      if (group.id && hiddenGroupsIds.has(group.id)) {\n        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(() => isVisualizationsEnabled ? [\n    (props: ActionButtonRendererProps) =>\n      showGroupColor ? <GroupColorLegend {...props} groups={groups ?? []} /> : [],\n    (props: ActionButtonRendererProps) => (\n      <GroupsShowHideButtons\n        {...props}\n        isLoadingQuery={!(isVisualizationsEnabled && isGroupsFetched && isGroupsQueriesReady)}\n        showGroup={showGroup}\n        hideGroup={hideSingleGroupWrapper}\n      />\n    ),\n  ].flat() : [], [groups, hideSingleGroupWrapper, isGroupsFetched, isGroupsQueriesReady, isVisualizationsEnabled, showGroup, showGroupColor]);\n\n  const overlappedAlert = useMemo(() =>\n    overlappedElementsMetadata.overlappedElementsInfo.size > 0 && isAlertClosed && showGroupColor ?\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, [isAlertClosed, isAlertExpanded, overlappedElementsMetadata.overlappedElementsInfo.size, showGroupColor]\n  );\n\n  const progressConfig = useMemo(\n    () =>\n      isVisualizationsEnabled && isResolvingGroupQueries\n        ? {\n          hilitedGroupsProgress: {\n            currentHilitedGroups: groupQueriesProgressCount,\n            totalNumberOfGroups: groups?.length ?? 0,\n          },\n        }\n        : undefined,\n    [groupQueriesProgressCount, groups, isResolvingGroupQueries, isVisualizationsEnabled],\n  );\n\n  return (\n    <div className=\"gmw-groups-vis-container\">\n      <GroupVisualizationActions\n        disabled={!(isVisualizationsEnabled && isGroupsFetched && isGroupsQueriesReady)}\n        isVisualizationEnabled={isVisualizationsEnabled}\n        onClickVisualizationButton={() => setIsVisualizationsEnabled((b) => !b)}\n        showAll={showAll}\n        hideAll={hideAll}\n      />\n      <Groups\n        onClickGroupModify={onModify}\n        onClickAddGroup={onAddGroup}\n        actionButtonRenderers={groupActionButtonRenderers}\n        mapping={mapping}\n        {...rest}\n        progressConfig={progressConfig}\n        alert={overlappedAlert}\n      />\n    </div>\n  );\n};\n"]}

package/lib/esm/components/Groups/GroupsVisualizationActions.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import "./GroupsVisualizationActions.scss";
 interface GroupVisualizationActionsProps {
-    isLoadingQuery: boolean;
-    showAll: () => Promise<void>;
-    hideAll: () => Promise<void>;
+    disabled: boolean;
+    isVisualizationEnabled: boolean;
+    onClickVisualizationButton: () => void;
+    showAll: () => void;
+    hideAll: () => void;
 }
-export declare const GroupVisualizationActions: ({ isLoadingQuery, showAll, hideAll, }: GroupVisualizationActionsProps) => JSX.Element;
+export declare const GroupVisualizationActions: ({ disabled, isVisualizationEnabled, onClickVisualizationButton, showAll, hideAll, }: GroupVisualizationActionsProps) => JSX.Element;
 export {};
 //# sourceMappingURL=GroupsVisualizationActions.d.ts.map

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

@@ -2,19 +2,21 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
-import { ButtonGroup, IconButton } from "@itwin/itwinui-react";
+import { ButtonGroup, IconButton, ToggleSwitch } from "@itwin/itwinui-react";
 import React from "react";
 import { ToggleGroupVisibility } from "./ToggleGroupVisibility";
 import { SvgVisibilityHide, SvgVisibilityShow } from "@itwin/itwinui-icons-react";
 import "./GroupsVisualizationActions.scss";
 import { useGroupHilitedElementsContext } from "../context/GroupHilitedElementsContext";
-export const GroupVisualizationActions = ({ isLoadingQuery, showAll, hideAll, }) => {
+export const GroupVisualizationActions = ({ disabled, isVisualizationEnabled, onClickVisualizationButton, showAll, hideAll, }) => {
     const { showGroupColor, setShowGroupColor, } = useGroupHilitedElementsContext();
     return (React.createElement(ButtonGroup, { className: "gmw-visual-buttons" },
-        React.createElement(ToggleGroupVisibility, { isLoadingQuery: isLoadingQuery, showGroupColor: showGroupColor, setShowGroupColor: setShowGroupColor }),
-        React.createElement(IconButton, { title: "Show All", onClick: showAll, disabled: isLoadingQuery, styleType: "borderless" },
-            React.createElement(SvgVisibilityShow, null)),
-        React.createElement(IconButton, { title: "Hide All", onClick: hideAll, disabled: isLoadingQuery, styleType: "borderless" },
-            React.createElement(SvgVisibilityHide, null))));
+        React.createElement(ToggleSwitch, { label: "Visualization", labelPosition: "left", checked: isVisualizationEnabled, onChange: onClickVisualizationButton }),
+        React.createElement(ButtonGroup, null,
+            React.createElement(ToggleGroupVisibility, { isLoadingQuery: disabled, showGroupColor: showGroupColor, setShowGroupColor: setShowGroupColor }),
+            React.createElement(IconButton, { title: "Show All", onClick: showAll, disabled: disabled, styleType: "borderless" },
+                React.createElement(SvgVisibilityShow, null)),
+            React.createElement(IconButton, { title: "Hide All", onClick: hideAll, disabled: disabled, styleType: "borderless" },
+                React.createElement(SvgVisibilityHide, null)))));
 };
 //# sourceMappingURL=GroupsVisualizationActions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GroupsVisualizationActions.js","sourceRoot":"","sources":["../../../../src/components/Groups/GroupsVisualizationActions.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAClF,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAQxF,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,EACxC,cAAc,EACd,OAAO,EACP,OAAO,GACwB,EAAE,EAAE;IACnC,MAAM,EACJ,cAAc,EACd,iBAAiB,GAClB,GAAG,8BAA8B,EAAE,CAAC;IAErC,OAAO,CACL,oBAAC,WAAW,IAAC,SAAS,EAAC,oBAAoB;QACzC,oBAAC,qBAAqB,IACpB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,GACpC;QACF,oBAAC,UAAU,IACT,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAC,YAAY;YAEtB,oBAAC,iBAAiB,OAAG,CACV;QACb,oBAAC,UAAU,IACT,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAC,YAAY;YAEtB,oBAAC,iBAAiB,OAAG,CACV,CACD,CACf,CAAC;AAEJ,CAAC,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 { 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"]}
+{"version":3,"file":"GroupsVisualizationActions.js","sourceRoot":"","sources":["../../../../src/components/Groups/GroupsVisualizationActions.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAClF,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAUxF,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,EACxC,QAAQ,EACR,sBAAsB,EACtB,0BAA0B,EAC1B,OAAO,EACP,OAAO,GACwB,EAAE,EAAE;IACnC,MAAM,EACJ,cAAc,EACd,iBAAiB,GAClB,GAAG,8BAA8B,EAAE,CAAC;IAErC,OAAO,CACL,oBAAC,WAAW,IAAC,SAAS,EAAC,oBAAoB;QACzC,oBAAC,YAAY,IACX,KAAK,EAAC,eAAe,EACrB,aAAa,EAAC,MAAM,EACpB,OAAO,EAAE,sBAAsB,EAC/B,QAAQ,EAAE,0BAA0B,GACpC;QACF,oBAAC,WAAW;YACV,oBAAC,qBAAqB,IACpB,cAAc,EAAE,QAAQ,EACxB,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,GACpC;YACF,oBAAC,UAAU,IACT,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,YAAY;gBAEtB,oBAAC,iBAAiB,OAAG,CACV;YACb,oBAAC,UAAU,IACT,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAC,YAAY;gBAEtB,oBAAC,iBAAiB,OAAG,CACV,CACD,CACD,CAChB,CAAC;AAEJ,CAAC,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 { ButtonGroup, IconButton, ToggleSwitch } 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  disabled: boolean;\n  isVisualizationEnabled: boolean;\n  onClickVisualizationButton: () => void;\n  showAll: () => void;\n  hideAll: () => void;\n}\n\nexport const GroupVisualizationActions = ({\n  disabled,\n  isVisualizationEnabled,\n  onClickVisualizationButton,\n  showAll,\n  hideAll,\n}: GroupVisualizationActionsProps) => {\n  const {\n    showGroupColor,\n    setShowGroupColor,\n  } = useGroupHilitedElementsContext();\n\n  return (\n    <ButtonGroup className=\"gmw-visual-buttons\">\n      <ToggleSwitch\n        label=\"Visualization\"\n        labelPosition=\"left\"\n        checked={isVisualizationEnabled}\n        onChange={onClickVisualizationButton}\n      />\n      <ButtonGroup>\n        <ToggleGroupVisibility\n          isLoadingQuery={disabled}\n          showGroupColor={showGroupColor}\n          setShowGroupColor={setShowGroupColor}\n        />\n        <IconButton\n          title=\"Show All\"\n          onClick={showAll}\n          disabled={disabled}\n          styleType=\"borderless\"\n        >\n          <SvgVisibilityShow />\n        </IconButton>\n        <IconButton\n          title=\"Hide All\"\n          onClick={hideAll}\n          disabled={disabled}\n          styleType=\"borderless\"\n        >\n          <SvgVisibilityHide />\n        </IconButton>\n      </ButtonGroup>\n    </ButtonGroup >\n  );\n\n};\n\n"]}

package/lib/esm/components/Groups/GroupsVisualizationActions.scss

@@ -4,5 +4,6 @@
 *--------------------------------------------------------------------------------------------*/
 
 .gmw-visual-buttons {
+  justify-content: space-between;
   flex-wrap: wrap;
 }

package/lib/esm/components/Groups/groupsHelpers.d.ts

@@ -1,11 +1,23 @@
 import type { IModelConnection } from "@itwin/core-frontend";
 import type { Group } from "@itwin/insights-client";
-import type { OverlappedElementGroupPairs, OverlappedInfo, QueryCacheItem } from "../context/GroupHilitedElementsContext";
+import type { OverlappedElementGroupPairs, OverlappedInfo } from "../context/GroupHilitedElementsContext";
 export declare const getGroupColor: (index: number) => string;
-export declare const getHiliteIdsFromGroups: (iModelConnection: IModelConnection, groups: Group[], hilitedElementsQueryCache: React.MutableRefObject<Map<string, QueryCacheItem>>) => Promise<string[]>;
-export declare const hideGroups: (iModelConnection: IModelConnection, viewGroups: Group[], hilitedElementsQueryCache: React.MutableRefObject<Map<string, QueryCacheItem>>) => Promise<void>;
-export declare const hideGroup: (iModelConnection: IModelConnection, viewGroup: Group, hilitedElementsQueryCache: React.MutableRefObject<Map<string, QueryCacheItem>>) => Promise<void>;
-export declare const visualizeGroupColors: (iModelConnection: IModelConnection, groups: Group[], hiddenGroupsIds: Set<string>, hilitedElementsQueryCache: React.MutableRefObject<Map<string, QueryCacheItem>>, setNumberOfVisualizedGroups: (numberOfVisualizedGroups: number | ((numberOfVisualizedGroups: number) => number)) => void, setOverlappedElementsInfo: (overlappedElementsInfo: Map<string, OverlappedInfo[]> | ((overlappedElementsInfo: Map<string, OverlappedInfo[]>) => Map<string, OverlappedInfo[]>)) => void, setGroupElementsInfo: (groupElementsInfo: Map<string, number> | ((groupElementsInfo: Map<string, number>) => Map<string, number>)) => void, setOverlappedElementGroupPairs: (overlappedElementGroupPairs: OverlappedElementGroupPairs[]) => void, doEmphasizeElements?: boolean) => Promise<void>;
-export declare const getHiliteIdsAndKeysetFromGroup: (iModelConnection: IModelConnection, group: Group, hilitedElementsQueryCache: React.MutableRefObject<Map<string, QueryCacheItem>>) => Promise<QueryCacheItem>;
-export declare const hideGroupConsideringOverlaps: (overlappedElementGroupPairs: OverlappedElementGroupPairs[], groupIdToHide: string, hiddenGroupsIds: Set<string>) => Promise<void>;
+export declare type GroupsElementIds = {
+    groupId: string;
+    elementIds: string[];
+}[];
+export declare const visualizeGroupColors: (hiddenGroupsIds: Set<string>, groupsWithGroupedOverlaps: OverlappedElementGroupPairs[], setNumberOfVisualizedGroups: (numberOfVisualizedGroups: number | ((numberOfVisualizedGroups: number) => number)) => void, doEmphasizeElements?: boolean) => Promise<string[]>;
+export declare const getHiliteIdsAndKeysetFromGroup: (iModelConnection: IModelConnection, group: Group) => Promise<{
+    group: Group;
+    result: {
+        keySet: import("@itwin/presentation-common").KeySet;
+        ids: string[];
+    };
+}>;
+export declare const generateOverlappedGroups: (groupsElementIds: GroupsElementIds) => {
+    groupsWithGroupedOverlaps: OverlappedElementGroupPairs[];
+    overlappedElementsInfo: Map<string, OverlappedInfo[]>;
+    numberOfElementsInGroups: Map<string, number>;
+};
+export declare const hideGroupConsideringOverlaps: (overlappedElementGroupPairs: OverlappedElementGroupPairs[], groupIdToHide: string, hiddenGroupsIds: Set<string>) => void;
 //# sourceMappingURL=groupsHelpers.d.ts.map

package/lib/esm/components/Groups/groupsHelpers.js

@@ -3,9 +3,7 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 import { FeatureOverrideType } from "@itwin/core-common";
-import { toaster } from "@itwin/itwinui-react";
-import { KeySet } from "@itwin/presentation-common";
-import { clearEmphasizedOverriddenElements, clearHiddenElements, emphasizeElements, getHiliteIds, hideElements, overrideElements, zoomToElements } from "../../common/viewerUtils";
+import { clearEmphasizedOverriddenElements, clearHiddenElements, emphasizeElements, getHiliteIds, hideElements, overrideElements } from "../../common/viewerUtils";
 const GOLDEN_ANGLE_MULTIPLIER = 1.5; // Multiplier to spread colors more uniformly.
 const BASE_HUE_OFFSET = 60; // Initial hue offset to avoid certain colors e.g 0 offset would begin with red.
 const HUE_ADJUSTMENT_STEP = 15; // Step to adjust the hue to avoid the red spectrum.
@@ -22,34 +20,6 @@ export const getGroupColor = (index) => {
     }
     return generateHSL(hue);
 };
-export const getHiliteIdsFromGroups = async (iModelConnection, groups, hilitedElementsQueryCache) => {
-    const distinctQueries = new Set();
-    const promises = [];
-    for (const group of groups) {
-        if (!distinctQueries.has(group.query)) {
-            distinctQueries.add(group.query);
-            promises.push(getHiliteIdsAndKeysetFromGroup(iModelConnection, group, hilitedElementsQueryCache));
-        }
-    }
-    const results = await Promise.all(promises);
-    const allIds = results.flatMap((result) => result.ids);
-    return allIds;
-};
-export const hideGroups = async (iModelConnection, viewGroups, hilitedElementsQueryCache) => {
-    const distinctQueries = new Set();
-    const promises = [];
-    for (const viewGroup of viewGroups) {
-        if (!distinctQueries.has(viewGroup.query)) {
-            distinctQueries.add(viewGroup.query);
-            promises.push(hideGroup(iModelConnection, viewGroup, hilitedElementsQueryCache));
-        }
-    }
-    await Promise.all(promises);
-};
-export const hideGroup = async (iModelConnection, viewGroup, hilitedElementsQueryCache) => {
-    const result = await getHiliteIdsAndKeysetFromGroup(iModelConnection, viewGroup, hilitedElementsQueryCache);
-    hideElements(result.ids);
-};
 const processGroupVisualization = async (overlappedElementGroupPairs, hiddenGroupsIds, doEmphasizeElements, color, replace, setNumberOfVisualizedGroups) => {
     const hilitedIds = Array.from(overlappedElementGroupPairs.elementIds);
     overrideElements(hilitedIds, color, FeatureOverrideType.ColorAndAlpha, replace);
@@ -62,12 +32,8 @@ const processGroupVisualization = async (overlappedElementGroupPairs, hiddenGrou
     }
     return hilitedIds;
 };
-export const visualizeGroupColors = async (iModelConnection, groups, hiddenGroupsIds, hilitedElementsQueryCache, setNumberOfVisualizedGroups, setOverlappedElementsInfo, setGroupElementsInfo, setOverlappedElementGroupPairs, doEmphasizeElements = true) => {
+export const visualizeGroupColors = async (hiddenGroupsIds, groupsWithGroupedOverlaps, setNumberOfVisualizedGroups, doEmphasizeElements = true) => {
     clearEmphasizedOverriddenElements();
-    const { groupsWithGroupedOverlaps, overlappedElementsInfo, numberOfElementsInGroups } = await generateOverlappedGroups(groups, iModelConnection, hilitedElementsQueryCache);
-    setOverlappedElementsInfo(overlappedElementsInfo);
-    setGroupElementsInfo(numberOfElementsInGroups);
-    setOverlappedElementGroupPairs(groupsWithGroupedOverlaps);
     const singleGroupPromises = groupsWithGroupedOverlaps
         .filter((group) => group.groupIds.size === 1)
         .map(async (group, index) => processGroupVisualization(group, hiddenGroupsIds, doEmphasizeElements, getGroupColor(index), // color for single group
@@ -78,36 +44,17 @@ export const visualizeGroupColors = async (iModelConnection, groups, hiddenGroup
         .map(async (group) => processGroupVisualization(group, hiddenGroupsIds, doEmphasizeElements, generateHSL(0), // color for group of overlapped elements
     false, setNumberOfVisualizedGroups));
     clearHiddenElements();
-    hiddenGroupsIds.forEach(async (groupId) => {
-        await hideGroupConsideringOverlaps(groupsWithGroupedOverlaps, groupId, hiddenGroupsIds);
+    hiddenGroupsIds.forEach((groupId) => {
+        hideGroupConsideringOverlaps(groupsWithGroupedOverlaps, groupId, hiddenGroupsIds);
     });
     const allPromises = [...singleGroupPromises, ...overlappedGroupPromises];
     const allIds = (await Promise.all(allPromises)).flat();
-    await zoomToElements(allIds);
+    return allIds;
 };
-export const getHiliteIdsAndKeysetFromGroup = async (iModelConnection, group, hilitedElementsQueryCache) => {
+export const getHiliteIdsAndKeysetFromGroup = async (iModelConnection, group) => {
     const query = group.query;
-    if (hilitedElementsQueryCache.current.has(query)) {
-        return hilitedElementsQueryCache.current.get(query) ?? ({ keySet: new KeySet(), ids: [] });
-    }
-    try {
-        const queryRowCount = await iModelConnection.queryRowCount(query);
-        if (queryRowCount === 0) {
-            toaster.warning(`${group.groupName}'s query is valid but produced no results.`);
-        }
-        const result = await getHiliteIds(query, iModelConnection);
-        hilitedElementsQueryCache.current.set(query, result);
-        return result;
-    }
-    catch {
-        toaster.negative(`Query could not be resolved.`);
-        return ({ keySet: new KeySet(), ids: [] });
-    }
-};
-const getHiliteIdsForGroup = async (iModelConnection, group, hilitedElementsQueryCache) => {
-    const result = await getHiliteIdsAndKeysetFromGroup(iModelConnection, group, hilitedElementsQueryCache);
-    const hilitedIds = result.ids;
-    return hilitedIds;
+    const result = await getHiliteIds(query, iModelConnection);
+    return { group, result };
 };
 const getOverlappedElementsInfo = (overlappedElements) => {
     const overlappedElementsInfo = new Map();
@@ -137,11 +84,7 @@ const mergeElementsByGroup = (elems) => {
     });
     return mergedList;
 };
-const generateOverlappedGroups = async (groups, iModelConnection, hilitedElementsQueryCache) => {
-    const groupsElementIds = await Promise.all(groups.map(async (group) => ({
-        groupId: group.id,
-        elementIds: await getHiliteIdsForGroup(iModelConnection, group, hilitedElementsQueryCache),
-    })));
+export const generateOverlappedGroups = (groupsElementIds) => {
     const elems = new Map();
     const groupElementCount = new Map();
     // Build the elems map for associations between elements and their groups.
@@ -163,7 +106,7 @@ const generateOverlappedGroups = async (groups, iModelConnection, hilitedElement
     const overlappedGroupsInformation = Array.from(mergedList.values()).filter((value) => value.groupIds.size > 1);
     return { groupsWithGroupedOverlaps: [...allGroups, ...overlappedGroupsInformation], overlappedElementsInfo: getOverlappedElementsInfo(overlappedGroupsInformation), numberOfElementsInGroups: groupElementCount };
 };
-export const hideGroupConsideringOverlaps = async (overlappedElementGroupPairs, groupIdToHide, hiddenGroupsIds) => {
+export const hideGroupConsideringOverlaps = (overlappedElementGroupPairs, groupIdToHide, hiddenGroupsIds) => {
     const elementsToPotentiallyHide = new Set();
     // Check each entry in overlappedElementGroupPairs
     for (const entry of overlappedElementGroupPairs) {