npm - @itwin/grouping-mapping-widget - Versions diffs - 0.13.0 → 0.14.0 - Mend

@itwin/grouping-mapping-widget 0.13.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (161) hide show

package/lib/esm/widget/components/GroupAction.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupAction.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupAction.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 { IModelConnection } from \"@itwin/core-frontend\";\nimport type {\n ISelectionProvider,\n SelectionChangeEventArgs,\n} from \"@itwin/presentation-frontend\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport type {\n SelectOption,\n} from \"@itwin/itwinui-react\";\nimport {\n Button,\n toaster,\n} from \"@itwin/itwinui-react\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport {\n handleError,\n LoadingSpinner,\n} from \"./utils\";\nimport \"./GroupAction.scss\";\nimport useValidator from \"../hooks/useValidator\";\nimport {\n clearEmphasizedElements,\n clearOverriddenElements,\n transparentOverriddenElements,\n visualizeElementsByQuery,\n zoomToElements,\n} from \"./viewerUtils\";\nimport { useGroupingMappingApiConfig } from \"./context/GroupingApiConfigContext\";\nimport { useMappingClient } from \"./context/MappingClientContext\";\nimport { useGroupingMappingCustomUI } from \"./context/GroupingMappingCustomUIContext\";\nimport type { GroupingCustomUI } from \"./customUI/GroupingMappingCustomUI\";\nimport { GroupingMappingCustomUIType } from \"./customUI/GroupingMappingCustomUI\";\nimport type { Group } from \"@itwin/insights-client\";\nimport { useGroupHilitedElementsContext } from \"./context/GroupHilitedElementsContext\";\nimport { visualizeGroupColors } from \"./groupsHelpers\";\nimport { QueryBuilderStep } from \"./QueryBuilderStep\";\nimport { GroupDetailsStep } from \"./GroupDetailsStep\";\nimport { QueryBuilderActionPanel } from \"./QueryBuilderActionPanel\";\nimport { GroupDetailsActionPanel } from \"./GroupDetailsActionPanel\";\n\nconst defaultDisplayStrings = {\n groupDetails: \"Group Details\",\n groupBy: \"Group By\",\n};\n\nenum GroupActionStep {\n QueryBuilder,\n GroupDetails,\n}\n\nexport interface GroupActionProps {\n mappingId: string;\n group?: Group;\n queryGenerationType: string;\n onSaveSuccess: () => void;\n onClickCancel?: () => void;\n displayStrings?: Partial<typeof defaultDisplayStrings>;\n}\n\nexport const GroupAction = (props: GroupActionProps) => {\n const iModelConnection = useActiveIModelConnection() as IModelConnection;\n const { showGroupColor, groups, hiddenGroupsIds, hilitedElementsQueryCache } = useGroupHilitedElementsContext();\n const { getAccessToken, iModelId } = useGroupingMappingApiConfig();\n const mappingClient = useMappingClient();\n const groupUIs: GroupingCustomUI[] = useGroupingMappingCustomUI().customUIs\n .filter((p) => p.type === GroupingMappingCustomUIType.Grouping) as GroupingCustomUI[];\n const [details, setDetails] = useState({\n groupName: props.group?.groupName ?? \"\",\n description: props.group?.description ?? \"\",\n });\n const [query, setQuery] = useState<string>(\"\");\n const [simpleSelectionQuery, setSimpleSelectionQuery] = useState<string>(\"\");\n const [validator, setShowValidationMessage] = useValidator();\n const [isLoading, setIsLoading] = useState<boolean>(false);\n const [isRendering, setIsRendering] = useState<boolean>(false);\n const [queryGenerationType, setQueryGenerationType] = useState(\n props.queryGenerationType,\n );\n const isUpdating = isLoading \|\| isRendering;\n const [currentStep, setCurrentStep] = React.useState(GroupActionStep.QueryBuilder);\n\n useEffect(() => {\n if (!iModelConnection) {\n throw new Error(\"This component requires an active iModelConnection.\");\n }\n }, [iModelConnection]);\n\n const displayStrings = React.useMemo(\n () => ({ ...defaultDisplayStrings, ...props.displayStrings }),\n [props.displayStrings]\n );\n\n useEffect(() => setQueryGenerationType(props.queryGenerationType), [props.queryGenerationType]);\n\n const resetView = useCallback(async () => {\n if (showGroupColor) {\n await visualizeGroupColors(iModelConnection, groups, groups, hiddenGroupsIds, hilitedElementsQueryCache);\n } else {\n clearOverriddenElements();\n }\n clearEmphasizedElements();\n }, [groups, hiddenGroupsIds, hilitedElementsQueryCache, iModelConnection, showGroupColor]);\n\n useEffect(() => {\n const removeListener = Presentation.selection.selectionChange.addListener(\n async (\n evt: SelectionChangeEventArgs,\n selectionProvider: ISelectionProvider,\n ) => {\n if (queryGenerationType === \"Selection\") {\n const selection = selectionProvider.getSelection(\n evt.imodel,\n evt.level,\n );\n const query = selection.instanceKeys.size > 0\n ? `SELECT ECInstanceId FROM ${selection.instanceKeys.keys().next().value}`\n : \"\";\n setSimpleSelectionQuery(query);\n }\n },\n );\n return () => {\n removeListener();\n };\n }, [iModelConnection, queryGenerationType]);\n\n useEffect(() => {\n const reemphasize = async () => {\n try {\n if (!query \|\| query === \"\") {\n return;\n }\n setIsRendering(true);\n transparentOverriddenElements();\n const resolvedHiliteIds = await visualizeElementsByQuery(\n query,\n \"red\",\n iModelConnection,\n );\n await zoomToElements(resolvedHiliteIds);\n } catch {\n toaster.negative(\"Sorry, we have failed to generate a valid query. 😔\");\n } finally {\n setIsRendering(false);\n }\n };\n\n void reemphasize();\n }, [iModelConnection, query]);\n\n useEffect(() => {\n Presentation.selection.clearSelection(\n \"GroupingMappingWidget\",\n iModelConnection,\n );\n }, [iModelConnection]);\n\n const save = useCallback(async () => {\n if (!validator.allValid()) {\n setShowValidationMessage(true);\n return;\n }\n try {\n setIsLoading(true);\n const currentQuery = query \|\| simpleSelectionQuery;\n\n const accessToken = await getAccessToken();\n\n props.group\n ? await mappingClient.updateGroup(\n accessToken,\n iModelId,\n props.mappingId,\n props.group.id ?? \"\",\n { ...details, query: currentQuery },\n )\n : await mappingClient.createGroup(\n accessToken,\n iModelId,\n props.mappingId,\n {\n ...details,\n query: currentQuery,\n },\n );\n Presentation.selection.clearSelection(\n \"GroupingMappingWidget\",\n iModelConnection,\n );\n setDetails({\n groupName: props.group?.groupName ?? \"\",\n description: props.group?.description ?? \"\",\n });\n setCurrentStep(GroupActionStep.QueryBuilder);\n setShowValidationMessage(false);\n props.onSaveSuccess();\n } catch (error: any) {\n handleError(error.status);\n } finally {\n setIsLoading(false);\n }\n }, [validator, setShowValidationMessage, query, simpleSelectionQuery, getAccessToken, props, mappingClient, iModelId, details, iModelConnection]);\n\n const isBlockingActions = !(\n details.groupName &&\n (query \|\| simpleSelectionQuery) &&\n !isRendering &&\n !isLoading\n );\n\n const getOptions = useMemo(\n (): SelectOption<string>[] =>\n groupUIs.map((ui) => ({\n label: ui.displayLabel,\n value: ui.name,\n icon: ui.icon,\n })),\n [groupUIs]\n );\n\n const onChange = useCallback(\n async (value: string) => {\n setQueryGenerationType(value);\n Presentation.selection.clearSelection(\n \"GroupingMappingWidget\",\n iModelConnection,\n );\n setQuery(\"\");\n setSimpleSelectionQuery(\"\");\n await resetView();\n },\n [iModelConnection, resetView]\n );\n\n const isQueryBuilderStep = currentStep === GroupActionStep.QueryBuilder;\n const isGroupDetailsStep = currentStep === GroupActionStep.GroupDetails;\n return (\n <>\n <div className=\"gmw-group-add-modify-container\">\n <QueryBuilderStep\n isHidden={!isQueryBuilderStep}\n queryGenerationType={queryGenerationType}\n groupUIs={groupUIs}\n isUpdating={isUpdating}\n resetView={resetView}\n setQuery={setQuery}\n onChange={onChange}\n getOptions={getOptions}\n displayStrings={{ ...displayStrings }}\n />\n {isGroupDetailsStep && <GroupDetailsStep\n details={details}\n setDetails={setDetails}\n validator={validator}\n displayStrings={{ ...displayStrings }}\n />}\n </div>\n <div className='gmw-action-panel'>\n {isLoading &&\n <LoadingSpinner />\n }\n {isQueryBuilderStep && (\n <QueryBuilderActionPanel onClickNext={() => setCurrentStep(GroupActionStep.GroupDetails)} />\n )}\n {isGroupDetailsStep && (\n <GroupDetailsActionPanel\n isSaveDisabled={isBlockingActions}\n onClickSave={save}\n onClickBack={() => setCurrentStep(GroupActionStep.QueryBuilder)}\n />\n )}\n {props.onClickCancel && <Button\n type='button'\n id='cancel'\n onClick={async () => {\n Presentation.selection.clearSelection(\n \"GroupingMappingWidget\",\n iModelConnection,\n );\n props.onClickCancel && props.onClickCancel();\n }}\n >\n Cancel\n </Button>}\n </div>\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"GroupAction.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupAction.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 { IModelConnection } from \"@itwin/core-frontend\";\nimport type {\n ISelectionProvider,\n SelectionChangeEventArgs,\n} from \"@itwin/presentation-frontend\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport type {\n SelectOption,\n} from \"@itwin/itwinui-react\";\nimport {\n Button,\n toaster,\n} from \"@itwin/itwinui-react\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport {\n handleError,\n LoadingSpinner,\n} from \"./utils\";\nimport \"./GroupAction.scss\";\nimport useValidator from \"../hooks/useValidator\";\nimport {\n clearEmphasizedElements,\n clearOverriddenElements,\n transparentOverriddenElements,\n visualizeElementsByQuery,\n zoomToElements,\n} from \"./viewerUtils\";\nimport { useGroupingMappingApiConfig } from \"./context/GroupingApiConfigContext\";\nimport { useMappingClient } from \"./context/MappingClientContext\";\nimport { useGroupingMappingCustomUI } from \"./context/GroupingMappingCustomUIContext\";\nimport type { GroupingCustomUI } from \"./customUI/GroupingMappingCustomUI\";\nimport { GroupingMappingCustomUIType } from \"./customUI/GroupingMappingCustomUI\";\nimport type { Group } from \"@itwin/insights-client\";\nimport { useGroupHilitedElementsContext } from \"./context/GroupHilitedElementsContext\";\nimport { visualizeGroupColors } from \"./groupsHelpers\";\nimport { QueryBuilderStep } from \"./QueryBuilderStep\";\nimport { GroupDetailsStep } from \"./GroupDetailsStep\";\nimport { QueryBuilderActionPanel } from \"./QueryBuilderActionPanel\";\nimport { GroupDetailsActionPanel } from \"./GroupDetailsActionPanel\";\n\nconst defaultDisplayStrings = {\n groupDetails: \"Group Details\",\n groupBy: \"Group By\",\n};\n\nenum GroupActionStep {\n QueryBuilder,\n GroupDetails,\n}\n\nexport interface GroupActionProps {\n mappingId: string;\n group?: Group;\n queryGenerationType: string;\n onSaveSuccess: () => void;\n onClickCancel?: () => void;\n displayStrings?: Partial<typeof defaultDisplayStrings>;\n}\n\nexport const GroupAction = (props: GroupActionProps) => {\n const iModelConnection = useActiveIModelConnection() as IModelConnection;\n const { showGroupColor, groups, hiddenGroupsIds, hilitedElementsQueryCache } = useGroupHilitedElementsContext();\n const { getAccessToken, iModelId } = useGroupingMappingApiConfig();\n const mappingClient = useMappingClient();\n const groupUIs: GroupingCustomUI[] = useGroupingMappingCustomUI().customUIs\n .filter((p) => p.type === GroupingMappingCustomUIType.Grouping) as GroupingCustomUI[];\n const [details, setDetails] = useState({\n groupName: props.group?.groupName ?? \"\",\n description: props.group?.description ?? \"\",\n });\n const [query, setQuery] = useState<string>(\"\");\n const [simpleSelectionQuery, setSimpleSelectionQuery] = useState<string>(\"\");\n const [validator, setShowValidationMessage] = useValidator();\n const [isLoading, setIsLoading] = useState<boolean>(false);\n const [isRendering, setIsRendering] = useState<boolean>(false);\n const [queryGenerationType, setQueryGenerationType] = useState(\n props.queryGenerationType,\n );\n const isUpdating = isLoading \|\| isRendering;\n const [currentStep, setCurrentStep] = React.useState(GroupActionStep.QueryBuilder);\n\n useEffect(() => {\n if (!iModelConnection) {\n throw new Error(\"This component requires an active iModelConnection.\");\n }\n }, [iModelConnection]);\n\n const displayStrings = React.useMemo(\n () => ({ ...defaultDisplayStrings, ...props.displayStrings }),\n [props.displayStrings]\n );\n\n useEffect(() => setQueryGenerationType(props.queryGenerationType), [props.queryGenerationType]);\n\n const resetView = useCallback(async () => {\n if (showGroupColor) {\n await visualizeGroupColors(iModelConnection, groups, hiddenGroupsIds, hilitedElementsQueryCache);\n } else {\n clearOverriddenElements();\n }\n clearEmphasizedElements();\n }, [groups, hiddenGroupsIds, hilitedElementsQueryCache, iModelConnection, showGroupColor]);\n\n useEffect(() => {\n const removeListener = Presentation.selection.selectionChange.addListener(\n async (\n evt: SelectionChangeEventArgs,\n selectionProvider: ISelectionProvider,\n ) => {\n if (queryGenerationType === \"Selection\") {\n const selection = selectionProvider.getSelection(\n evt.imodel,\n evt.level,\n );\n const query = selection.instanceKeys.size > 0\n ? `SELECT ECInstanceId FROM ${selection.instanceKeys.keys().next().value}`\n : \"\";\n setSimpleSelectionQuery(query);\n }\n },\n );\n return () => {\n removeListener();\n };\n }, [iModelConnection, queryGenerationType]);\n\n useEffect(() => {\n const reemphasize = async () => {\n try {\n if (!query \|\| query === \"\") {\n return;\n }\n setIsRendering(true);\n transparentOverriddenElements();\n const resolvedHiliteIds = await visualizeElementsByQuery(\n query,\n \"red\",\n iModelConnection,\n );\n await zoomToElements(resolvedHiliteIds);\n } catch {\n toaster.negative(\"Sorry, we have failed to generate a valid query. 😔\");\n } finally {\n setIsRendering(false);\n }\n };\n\n void reemphasize();\n }, [iModelConnection, query]);\n\n useEffect(() => {\n Presentation.selection.clearSelection(\n \"GroupingMappingWidget\",\n iModelConnection,\n );\n }, [iModelConnection]);\n\n const save = useCallback(async () => {\n if (!validator.allValid()) {\n setShowValidationMessage(true);\n return;\n }\n try {\n setIsLoading(true);\n const currentQuery = query \|\| simpleSelectionQuery;\n\n const accessToken = await getAccessToken();\n\n props.group\n ? await mappingClient.updateGroup(\n accessToken,\n iModelId,\n props.mappingId,\n props.group.id ?? \"\",\n { ...details, query: currentQuery },\n )\n : await mappingClient.createGroup(\n accessToken,\n iModelId,\n props.mappingId,\n {\n ...details,\n query: currentQuery,\n },\n );\n Presentation.selection.clearSelection(\n \"GroupingMappingWidget\",\n iModelConnection,\n );\n setDetails({\n groupName: props.group?.groupName ?? \"\",\n description: props.group?.description ?? \"\",\n });\n setCurrentStep(GroupActionStep.QueryBuilder);\n setShowValidationMessage(false);\n props.onSaveSuccess();\n } catch (error: any) {\n handleError(error.status);\n } finally {\n setIsLoading(false);\n }\n }, [validator, setShowValidationMessage, query, simpleSelectionQuery, getAccessToken, props, mappingClient, iModelId, details, iModelConnection]);\n\n const isBlockingActions = !(\n details.groupName &&\n (query \|\| simpleSelectionQuery) &&\n !isRendering &&\n !isLoading\n );\n\n const getOptions = useMemo(\n (): SelectOption<string>[] =>\n groupUIs.map((ui) => ({\n label: ui.displayLabel,\n value: ui.name,\n icon: ui.icon,\n })),\n [groupUIs]\n );\n\n const onChange = useCallback(\n async (value: string) => {\n setQueryGenerationType(value);\n Presentation.selection.clearSelection(\n \"GroupingMappingWidget\",\n iModelConnection,\n );\n setQuery(\"\");\n setSimpleSelectionQuery(\"\");\n await resetView();\n },\n [iModelConnection, resetView]\n );\n\n const isQueryBuilderStep = currentStep === GroupActionStep.QueryBuilder;\n const isGroupDetailsStep = currentStep === GroupActionStep.GroupDetails;\n return (\n <>\n <div className=\"gmw-group-add-modify-container\">\n <QueryBuilderStep\n isHidden={!isQueryBuilderStep}\n queryGenerationType={queryGenerationType}\n groupUIs={groupUIs}\n isUpdating={isUpdating}\n resetView={resetView}\n setQuery={setQuery}\n onChange={onChange}\n getOptions={getOptions}\n displayStrings={{ ...displayStrings }}\n group={props.group}\n />\n {isGroupDetailsStep && <GroupDetailsStep\n details={details}\n setDetails={setDetails}\n validator={validator}\n displayStrings={{ ...displayStrings }}\n />}\n </div>\n <div className='gmw-action-panel'>\n {isLoading &&\n <LoadingSpinner />\n }\n {isQueryBuilderStep && (\n <QueryBuilderActionPanel onClickNext={() => setCurrentStep(GroupActionStep.GroupDetails)} />\n )}\n {isGroupDetailsStep && (\n <GroupDetailsActionPanel\n isSaveDisabled={isBlockingActions}\n onClickSave={save}\n onClickBack={() => setCurrentStep(GroupActionStep.QueryBuilder)}\n />\n )}\n {props.onClickCancel && <Button\n type='button'\n id='cancel'\n onClick={async () => {\n Presentation.selection.clearSelection(\n \"GroupingMappingWidget\",\n iModelConnection,\n );\n props.onClickCancel && props.onClickCancel();\n }}\n >\n Cancel\n </Button>}\n </div>\n </>\n );\n};\n"]}

package/lib/esm/widget/components/GroupColorLegend.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { Group } from "@itwin/insights-client";
+import "./GroupColorLegend.scss";
+interface GroupColorLegendProps {
+    group: Group;
+    groups: Group[];
+}
+export declare const GroupColorLegend: ({ group, groups }: GroupColorLegendProps) => JSX.Element;
+export {};
+//# sourceMappingURL=GroupColorLegend.d.ts.map

package/lib/esm/widget/components/GroupColorLegend.js ADDED Viewed

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import React from "react";
+import { IconButton } from "@itwin/itwinui-react";
+import { getGroupColor } from "./groupsHelpers";
+import "./GroupColorLegend.scss";
+export const GroupColorLegend = ({ group, groups }) => (React.createElement(IconButton, { styleType: "borderless" },
+    React.createElement("div", { className: "gmw-color-legend", style: {
+            backgroundColor: getGroupColor(groups.findIndex((g) => g.id === group.id)),
+        } })));
+//# sourceMappingURL=GroupColorLegend.js.map

package/lib/esm/widget/components/GroupColorLegend.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GroupColorLegend.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupColorLegend.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,yBAAyB,CAAC;AAOjC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAyB,EAAE,EAAE,CAAC,CAC5E,oBAAC,UAAU,IAAC,SAAS,EAAC,YAAY;IAChC,6BACE,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAE;YACL,eAAe,EAAE,aAAa,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,CAAC,CAAC;SAC3E,GACD,CACS,CACd,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 React from \"react\";\nimport { IconButton } from \"@itwin/itwinui-react\";\nimport type { Group } from \"@itwin/insights-client\";\nimport { getGroupColor } from \"./groupsHelpers\";\nimport \"./GroupColorLegend.scss\";\n\ninterface GroupColorLegendProps {\n group: Group;\n groups: Group[];\n}\n\nexport const GroupColorLegend = ({ group, groups }: GroupColorLegendProps) => (\n <IconButton styleType=\"borderless\">\n <div\n className=\"gmw-color-legend\"\n style={{\n backgroundColor: getGroupColor(groups.findIndex((g) => g.id === group.id)),\n }}\n />\n </IconButton>\n);\n"]}

package/lib/esm/widget/components/GroupColorLegend.scss ADDED Viewed

@@ -0,0 +1,9 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/itwinui-css/scss/variables";
+.gmw-color-legend {
+  border: 1px solid black;
+}

package/lib/esm/widget/components/GroupColorToggle.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ToggleSwitchProps } from "@itwin/itwinui-react";
+import type { Group } from "@itwin/insights-client";
+export interface GroupColorToggleProps extends Partial<ToggleSwitchProps> {
+    color: string;
+    group: Group;
+}
+export declare const GroupColorToggle: ({ color, group, ...rest }: GroupColorToggleProps) => JSX.Element;
+//# sourceMappingURL=GroupColorToggle.d.ts.map

package/lib/esm/widget/components/GroupColorToggle.js ADDED Viewed

@@ -0,0 +1,46 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import React, { useEffect, useState } from "react";
+import { useActiveIModelConnection } from "@itwin/appui-react";
+import { toaster, ToggleSwitch } from "@itwin/itwinui-react";
+import { clearEmphasizedOverriddenElements, visualizeElements, zoomToElements } from "./viewerUtils";
+import { getHiliteIdsAndKeysetFromGroup } from "./groupsHelpers";
+import { Presentation } from "@itwin/presentation-frontend";
+import { useGroupHilitedElementsContext } from "./context/GroupHilitedElementsContext";
+import { usePropertiesContext } from "./context/PropertiesContext";
+export const GroupColorToggle = ({ color, group, ...rest }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const iModelConnection = useActiveIModelConnection();
+    if (!iModelConnection) {
+        throw new Error("This component requires an active iModelConnection.");
+    }
+    const { hilitedElementsQueryCache } = useGroupHilitedElementsContext();
+    const { showGroupColor, setShowGroupColor } = usePropertiesContext();
+    useEffect(() => {
+        const visualize = async () => {
+            try {
+                setIsLoading(true);
+                clearEmphasizedOverriddenElements();
+                if (showGroupColor) {
+                    const result = await getHiliteIdsAndKeysetFromGroup(iModelConnection, group, hilitedElementsQueryCache);
+                    Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
+                    visualizeElements(result.ids, color);
+                    await zoomToElements(result.ids);
+                }
+            }
+            catch (error) {
+                toaster.negative("There was an error visualizing group.");
+                /* eslint-disable no-console */
+                console.error(error);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        void visualize();
+    }, [iModelConnection, group.query, group.groupName, group, hilitedElementsQueryCache, showGroupColor, color]);
+    return (React.createElement(ToggleSwitch, { label: "Color Group", disabled: isLoading, checked: showGroupColor, onChange: () => setShowGroupColor((b) => !b), ...rest }));
+};
+//# sourceMappingURL=GroupColorToggle.js.map

package/lib/esm/widget/components/GroupColorToggle.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GroupColorToggle.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupColorToggle.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAE7D,OAAO,EAAE,iCAAiC,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,8BAA8B,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,8BAA8B,EAAE,MAAM,uCAAuC,CAAC;AACvF,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAOnE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,GAAG,IAAI,EACe,EAAE,EAAE;IAC1B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC3D,MAAM,gBAAgB,GAAG,yBAAyB,EAAE,CAAC;IACrD,IAAI,CAAC,gBAAgB,EAAE;QACrB,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;KACxE;IACD,MAAM,EAAE,yBAAyB,EAAE,GAAG,8BAA8B,EAAE,CAAC;IACvE,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAErE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;YAC3B,IAAI;gBACF,YAAY,CAAC,IAAI,CAAC,CAAC;gBACnB,iCAAiC,EAAE,CAAC;gBACpC,IAAI,cAAc,EAAE;oBAClB,MAAM,MAAM,GAAG,MAAM,8BAA8B,CAAC,gBAAgB,EAAE,KAAK,EAAE,yBAAyB,CAAC,CAAC;oBACxG,YAAY,CAAC,SAAS,CAAC,cAAc,CACnC,uBAAuB,EACvB,gBAAgB,CACjB,CAAC;oBACF,iBAAiB,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;oBACrC,MAAM,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;iBAClC;aACF;YAAC,OAAO,KAAK,EAAE;gBACd,OAAO,CAAC,QAAQ,CAAC,uCAAuC,CAAC,CAAC;gBAC1D,+BAA+B;gBAC/B,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;aACtB;oBAAS;gBACR,YAAY,CAAC,KAAK,CAAC,CAAC;aACrB;QACH,CAAC,CAAC;QACF,KAAK,SAAS,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,yBAAyB,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC;IAE9G,OAAO,CACL,oBAAC,YAAY,IACX,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KACxC,IAAI,GACM,CACjB,CAAC;AACJ,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 React, { useEffect, useState } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport type { ToggleSwitchProps } from \"@itwin/itwinui-react\";\nimport { toaster, ToggleSwitch } from \"@itwin/itwinui-react\";\nimport type { Group } from \"@itwin/insights-client\";\nimport { clearEmphasizedOverriddenElements, visualizeElements, zoomToElements } from \"./viewerUtils\";\nimport { getHiliteIdsAndKeysetFromGroup } from \"./groupsHelpers\";\nimport { Presentation } from \"@itwin/presentation-frontend\";\nimport { useGroupHilitedElementsContext } from \"./context/GroupHilitedElementsContext\";\nimport { usePropertiesContext } from \"./context/PropertiesContext\";\n\nexport interface GroupColorToggleProps extends Partial<ToggleSwitchProps> {\n color: string;\n group: Group;\n}\n\nexport const GroupColorToggle = ({\n color,\n group,\n ...rest\n}: GroupColorToggleProps) => {\n const [isLoading, setIsLoading] = useState<boolean>(false);\n const iModelConnection = useActiveIModelConnection();\n if (!iModelConnection) {\n throw new Error(\"This component requires an active iModelConnection.\");\n }\n const { hilitedElementsQueryCache } = useGroupHilitedElementsContext();\n const { showGroupColor, setShowGroupColor } = usePropertiesContext();\n\n useEffect(() => {\n const visualize = async () => {\n try {\n setIsLoading(true);\n clearEmphasizedOverriddenElements();\n if (showGroupColor) {\n const result = await getHiliteIdsAndKeysetFromGroup(iModelConnection, group, hilitedElementsQueryCache);\n Presentation.selection.clearSelection(\n \"GroupingMappingWidget\",\n iModelConnection,\n );\n visualizeElements(result.ids, color);\n await zoomToElements(result.ids);\n }\n } catch (error) {\n toaster.negative(\"There was an error visualizing group.\");\n /* eslint-disable no-console */\n console.error(error);\n } finally {\n setIsLoading(false);\n }\n };\n void visualize();\n }, [iModelConnection, group.query, group.groupName, group, hilitedElementsQueryCache, showGroupColor, color]);\n\n return (\n <ToggleSwitch\n label=\"Color Group\"\n disabled={isLoading}\n checked={showGroupColor}\n onChange={() => setShowGroupColor((b) => !b)}\n {...rest}\n ></ToggleSwitch>\n );\n};\n"]}

package/lib/esm/widget/components/GroupItem.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { Group } from "@itwin/insights-client";
+import type { ContextCustomUI, GroupingCustomUI } from "./customUI/GroupingMappingCustomUI";
+import type { GroupingProps } from "./Grouping";
+export interface GroupItemProps extends GroupingProps {
+    group: Group;
+    groupUIs: GroupingCustomUI[];
+    contextUIs: ContextCustomUI[];
+    setShowDeleteModal: (showDeleteModal: Group) => void;
+}
+export declare const GroupItem: ({ onClickGroupTitle, disableActions, group, ...rest }: GroupItemProps) => JSX.Element;
+//# sourceMappingURL=GroupItem.d.ts.map

package/lib/esm/widget/components/GroupItem.js ADDED Viewed

@@ -0,0 +1,12 @@
+import React from "react";
+import { HorizontalTile } from "./HorizontalTile";
+import { GroupMenuActions } from "./GroupMenuActions";
+export const GroupItem = ({ onClickGroupTitle, disableActions, group, ...rest }) => {
+    const onTitleClick = () => {
+        if (onClickGroupTitle && !disableActions) {
+            onClickGroupTitle(group);
+        }
+    };
+    return (React.createElement(HorizontalTile, { title: group.groupName, subText: group.description, actionGroup: React.createElement(GroupMenuActions, { group: group, onClickGroupTitle: onClickGroupTitle, disableActions: disableActions, ...rest }), onClickTitle: disableActions ? undefined : onTitleClick }));
+};
+//# sourceMappingURL=GroupItem.js.map

package/lib/esm/widget/components/GroupItem.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GroupItem.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupItem.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAStD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,iBAAiB,EACjB,cAAc,EACd,KAAK,EACL,GAAG,IAAI,EACQ,EAAE,EAAE;IAEnB,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,iBAAiB,IAAI,CAAC,cAAc,EAAE;YACxC,iBAAiB,CAAC,KAAK,CAAC,CAAC;SAC1B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,KAAK,EAAE,KAAK,CAAC,SAAS,EACtB,OAAO,EAAE,KAAK,CAAC,WAAW,EAC1B,WAAW,EACT,oBAAC,gBAAgB,IACf,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAAc,KAC1B,IAAI,GACR,EAEJ,YAAY,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,GACvD,CACH,CAAC;AACJ,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 type { Group } from \"@itwin/insights-client\";\nimport React from \"react\";\nimport { HorizontalTile } from \"./HorizontalTile\";\nimport type { ContextCustomUI, GroupingCustomUI } from \"./customUI/GroupingMappingCustomUI\";\nimport type { GroupingProps } from \"./Grouping\";\nimport { GroupMenuActions } from \"./GroupMenuActions\";\n\nexport interface GroupItemProps extends GroupingProps {\n group: Group;\n groupUIs: GroupingCustomUI[];\n contextUIs: ContextCustomUI[];\n setShowDeleteModal: (showDeleteModal: Group) => void;\n}\n\nexport const GroupItem = ({\n onClickGroupTitle,\n disableActions,\n group,\n ...rest\n}: GroupItemProps) => {\n\n const onTitleClick = () => {\n if (onClickGroupTitle && !disableActions) {\n onClickGroupTitle(group);\n }\n };\n\n return (\n <HorizontalTile\n title={group.groupName}\n subText={group.description}\n actionGroup={\n <GroupMenuActions\n group={group}\n onClickGroupTitle={onClickGroupTitle}\n disableActions={disableActions}\n {...rest}\n />\n }\n onClickTitle={disableActions ? undefined : onTitleClick}\n />\n );\n};\n"]}

package/lib/esm/widget/components/GroupMenuActions.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { Group } from "@itwin/insights-client";
+import type { ContextCustomUI, GroupingCustomUI } from "./customUI/GroupingMappingCustomUI";
+import type { GroupingProps } from "./Grouping";
+import "./GroupMenuActions.scss";
+export interface GroupMenuActionsProps extends GroupingProps {
+    group: Group;
+    groupUIs: GroupingCustomUI[];
+    contextUIs: ContextCustomUI[];
+    setShowDeleteModal: (showDeleteModal: Group) => void;
+}
+export declare const GroupMenuActions: ({ mapping, group, actionButtonRenderers, onClickGroupModify, onClickRenderContextCustomUI, groupUIs, contextUIs, disableActions, setShowDeleteModal, }: GroupMenuActionsProps) => JSX.Element;
+//# sourceMappingURL=GroupMenuActions.d.ts.map

package/lib/esm/widget/components/GroupMenuActions.js ADDED Viewed

@@ -0,0 +1,45 @@
+import { SvgDelete, SvgEdit, SvgMore } from "@itwin/itwinui-icons-react";
+import { DropdownMenu, IconButton, MenuItem } from "@itwin/itwinui-react";
+import React, { useCallback } from "react";
+import { useGroupingMappingApiConfig } from "./context/GroupingApiConfigContext";
+import "./GroupMenuActions.scss";
+export const GroupMenuActions = ({ mapping, group, actionButtonRenderers, onClickGroupModify, onClickRenderContextCustomUI, groupUIs, contextUIs, disableActions, setShowDeleteModal, }) => {
+    const { iModelId } = useGroupingMappingApiConfig();
+    const onModify = useCallback(async (group, type) => {
+        if (!onClickGroupModify)
+            return;
+        onClickGroupModify(group, type);
+    }, [onClickGroupModify]);
+    return (React.createElement("div", { className: "gmw-actions" },
+        actionButtonRenderers &&
+            actionButtonRenderers.map((actionButton, index) => React.createElement(React.Fragment, { key: index }, actionButton({ group }))),
+        React.createElement(DropdownMenu, { className: "gmw-action-dropdown", disabled: disableActions, menuItems: (close) => [
+                ...(groupUIs.length > 0 && onClickGroupModify
+                    ? [
+                        React.createElement(MenuItem, { key: 0, icon: React.createElement(SvgEdit, null), disabled: disableActions, "data-testid": "gmw-context-menu-item", subMenuItems: groupUIs.map((p, index) => (React.createElement(MenuItem, { key: p.name, className: "gmw-menu-item", "data-testid": `gmw-edit-${index}`, onClick: async () => {
+                                    await onModify(group, p.name);
+                                    close();
+                                }, icon: p.icon }, p.displayLabel))) }, "Edit"),
+                    ]
+                    : []),
+                ...contextUIs.map((p) => {
+                    return (React.createElement(MenuItem, { key: p.name, onClick: async () => {
+                            if (p.uiComponent &&
+                                onClickRenderContextCustomUI) {
+                                onClickRenderContextCustomUI(p.uiComponent, group, p.displayLabel);
+                            }
+                            if (p.onClick) {
+                                p.onClick(group, mapping, iModelId);
+                            }
+                            close();
+                        }, icon: p.icon, "data-testid": "gmw-context-menu-item" }, p.displayLabel));
+                }),
+                React.createElement(MenuItem, { key: 2, onClick: () => {
+                        setShowDeleteModal(group);
+                        close();
+                    }, icon: React.createElement(SvgDelete, null), "data-testid": "gmw-context-menu-item" }, "Remove"),
+            ] },
+            React.createElement(IconButton, { disabled: disableActions, styleType: "borderless", "data-testid": "gmw-more-button" },
+                React.createElement(SvgMore, null)))));
+};
+//# sourceMappingURL=GroupMenuActions.js.map

package/lib/esm/widget/components/GroupMenuActions.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GroupMenuActions.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupMenuActions.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 { SvgDelete, SvgEdit, SvgMore } from \"@itwin/itwinui-icons-react\";\nimport { DropdownMenu, IconButton, MenuItem } from \"@itwin/itwinui-react\";\nimport React, { useCallback } from \"react\";\nimport type { ContextCustomUI, GroupingCustomUI } from \"./customUI/GroupingMappingCustomUI\";\nimport type { GroupingProps } from \"./Grouping\";\nimport { useGroupingMappingApiConfig } from \"./context/GroupingApiConfigContext\";\nimport \"./GroupMenuActions.scss\";\n\nexport interface GroupMenuActionsProps extends GroupingProps {\n group: Group;\n groupUIs: GroupingCustomUI[];\n contextUIs: ContextCustomUI[];\n setShowDeleteModal: (showDeleteModal: Group) => void;\n}\n\nexport const GroupMenuActions = ({\n mapping,\n group,\n actionButtonRenderers,\n onClickGroupModify,\n onClickRenderContextCustomUI,\n groupUIs,\n contextUIs,\n disableActions,\n setShowDeleteModal,\n}: GroupMenuActionsProps) => {\n const { iModelId } = useGroupingMappingApiConfig();\n\n const onModify = useCallback(async (group: Group, type: string) => {\n if (!onClickGroupModify) return;\n onClickGroupModify(group, type);\n }, [onClickGroupModify]);\n\n return (\n <div className=\"gmw-actions\">\n {actionButtonRenderers &&\n actionButtonRenderers.map((actionButton, index) =>\n <React.Fragment key={index}>{actionButton({ group })}</React.Fragment>\n )}\n <DropdownMenu\n className=\"gmw-action-dropdown\"\n disabled={disableActions}\n menuItems={(close: () => void) => [\n ...(groupUIs.length > 0 && onClickGroupModify\n ? [\n <MenuItem\n key={0}\n icon={<SvgEdit />}\n disabled={disableActions}\n data-testid=\"gmw-context-menu-item\"\n subMenuItems={groupUIs.map((p, index) => (\n <MenuItem\n key={p.name}\n className=\"gmw-menu-item\"\n data-testid={`gmw-edit-${index}`}\n onClick={async () => {\n await onModify(group, p.name);\n close();\n }}\n icon={p.icon}\n >\n {p.displayLabel}\n </MenuItem>\n ))}\n >\n Edit\n </MenuItem>,\n ]\n : []),\n ...contextUIs.map((p) => {\n return (\n <MenuItem\n key={p.name}\n onClick={async () => {\n if (\n p.uiComponent &&\n onClickRenderContextCustomUI\n ) {\n onClickRenderContextCustomUI(\n p.uiComponent,\n group,\n p.displayLabel\n );\n }\n if (p.onClick) {\n p.onClick(group, mapping, iModelId);\n }\n close();\n }}\n icon={p.icon}\n data-testid=\"gmw-context-menu-item\"\n >\n {p.displayLabel}\n </MenuItem>\n );\n }),\n <MenuItem\n key={2}\n onClick={() => {\n setShowDeleteModal(group);\n close();\n }}\n icon={<SvgDelete />}\n data-testid=\"gmw-context-menu-item\"\n >\n Remove\n </MenuItem>,\n ]}\n >\n <IconButton\n disabled={disableActions}\n styleType=\"borderless\"\n data-testid=\"gmw-more-button\"\n >\n <SvgMore />\n </IconButton>\n </DropdownMenu>\n </div>\n );\n};\n"]}

package/lib/esm/widget/components/GroupMenuActions.scss ADDED Viewed

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/itwinui-css/scss/variables";
+.gmw-actions {
+  display: flex;
+  flex-direction: row;
+  .gmw-action-dropdown {
+    width: $iui-3xl + $iui-xl;
+  }
+}

package/lib/esm/widget/components/Grouping.d.ts CHANGED Viewed

@@ -1,17 +1,21 @@
-/// <reference types="react" />
+import React from "react";
 import type { CreateTypeFromInterface } from "../utils";
 import "./Grouping.scss";
 import type { Group, Mapping } from "@itwin/insights-client";
 import type { ContextCustomUI } from "./customUI/GroupingMappingCustomUI";
 export declare type IGroupTyped = CreateTypeFromInterface<Group>;
+export interface ActionButtonRendererProps {
+    group: Group;
+}
+export declare type ActionButtonRenderer = (props: ActionButtonRendererProps) => React.ReactNode;
 export interface GroupingProps {
     mapping: Mapping;
+    actionButtonRenderers?: ActionButtonRenderer[];
     onClickAddGroup?: (queryGenerationType: string) => void;
     onClickGroupTitle?: (group: Group) => void;
     onClickGroupModify?: (group: Group, queryGenerationType: string) => void;
-    onClickRenderContextCustomUI?: (contextCustomUI: Exclude<ContextCustomUI["uiComponent"], undefined>, group: Group) => void;
-    isNonEmphasizedSelectable?: boolean;
-    emphasizeElements?: boolean;
+    onClickRenderContextCustomUI?: (contextCustomUI: Exclude<ContextCustomUI["uiComponent"], undefined>, group: Group, displayLabel: string) => void;
+    disableActions?: boolean;
 }
-export declare const Groupings: ({ mapping, onClickAddGroup, onClickGroupTitle, onClickGroupModify, onClickRenderContextCustomUI, emphasizeElements, isNonEmphasizedSelectable, }: GroupingProps) => JSX.Element;
+export declare const Groupings: ({ mapping, actionButtonRenderers, onClickAddGroup, onClickGroupTitle, onClickGroupModify, onClickRenderContextCustomUI, disableActions, }: GroupingProps) => JSX.Element;
 //# sourceMappingURL=Grouping.d.ts.map

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

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