@itwin/grouping-mapping-widget 0.19.2 → 0.20.0

package/lib/esm/components/Groups/Editing/GroupAction.js

@@ -0,0 +1,130 @@
+import { Button, toaster, } from "@itwin/itwinui-react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { LoadingSpinner } from "../../SharedComponents/LoadingSpinner";
+import { handleError } from "../../../common/utils";
+import "./GroupAction.scss";
+import useValidator from "../../Properties/hooks/useValidator";
+import { useGroupingMappingApiConfig } from "../../context/GroupingApiConfigContext";
+import { useMappingClient } from "../../context/MappingClientContext";
+import { useGroupingMappingCustomUI } from "../../context/GroupingMappingCustomUIContext";
+import { GroupingMappingCustomUIType } from "../../customUI/GroupingMappingCustomUI";
+import { QueryBuilderStep } from "../QueryBuilder/QueryBuilderStep";
+import { GroupDetailsStep } from "./GroupDetailsStep";
+import { QueryBuilderActionPanel } from "../QueryBuilder/QueryBuilderActionPanel";
+import { GroupDetailsActionPanel } from "./GroupDetailsActionPanel";
+import { useVisualization } from "../hooks/useVisualization";
+const defaultDisplayStrings = {
+    groupDetails: "Group Details",
+    groupBy: "Group By",
+};
+var GroupActionStep;
+(function (GroupActionStep) {
+    GroupActionStep[GroupActionStep["QueryBuilder"] = 0] = "QueryBuilder";
+    GroupActionStep[GroupActionStep["GroupDetails"] = 1] = "GroupDetails";
+})(GroupActionStep || (GroupActionStep = {}));
+export const GroupAction = (props) => {
+    const { getAccessToken, iModelId, iModelConnection } = useGroupingMappingApiConfig();
+    if (!iModelConnection) {
+        throw new Error("This component requires an active iModelConnection.");
+    }
+    const mappingClient = useMappingClient();
+    const groupUIs = useGroupingMappingCustomUI().customUIs
+        .filter((p) => p.type === GroupingMappingCustomUIType.Grouping);
+    const [details, setDetails] = useState({
+        groupName: props.group?.groupName ?? "",
+        description: props.group?.description ?? "",
+    });
+    const [query, setQuery] = useState("");
+    const [queryRowCount, setQueryRowCount] = useState(0);
+    const [validator, setShowValidationMessage] = useValidator();
+    const [isLoading, setIsLoading] = useState(false);
+    const [queryGenerationType, setQueryGenerationType] = useState(props.queryGenerationType);
+    const { isRendering, setIsRendering, simpleSelectionQuery, setSimpleSelectionQuery, clearPresentationSelection, resetView, } = useVisualization(props.shouldVisualize, iModelConnection, query, queryGenerationType);
+    const isUpdating = isLoading || isRendering;
+    const [currentStep, setCurrentStep] = React.useState(GroupActionStep.QueryBuilder);
+    const displayStrings = React.useMemo(() => ({ ...defaultDisplayStrings, ...props.displayStrings }), [props.displayStrings]);
+    useEffect(() => setQueryGenerationType(props.queryGenerationType), [props.queryGenerationType]);
+    useEffect(() => {
+        const fetchQueryRowCount = async () => {
+            try {
+                if (!query || query === "") {
+                    setQueryRowCount(0);
+                    return;
+                }
+                setIsLoading(true);
+                const result = await iModelConnection.queryRowCount(query);
+                setQueryRowCount(result);
+            }
+            catch {
+                toaster.negative("Query failed to resolve.");
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        void fetchQueryRowCount();
+    }, [iModelConnection, query, setIsRendering]);
+    const isBlockingActions = !(details.groupName &&
+        (query || simpleSelectionQuery) &&
+        !isRendering &&
+        !isLoading);
+    const getOptions = useMemo(() => groupUIs.map((ui) => ({
+        label: ui.displayLabel,
+        value: ui.name,
+        icon: ui.icon,
+    })), [groupUIs]);
+    const onChange = useCallback(async (value) => {
+        setQueryGenerationType(value);
+        clearPresentationSelection();
+        setQuery("");
+        setSimpleSelectionQuery("");
+        await resetView();
+    }, [clearPresentationSelection, resetView, setSimpleSelectionQuery]);
+    const save = useCallback(async () => {
+        if (!validator.allValid()) {
+            setShowValidationMessage(true);
+            return;
+        }
+        try {
+            setIsLoading(true);
+            const currentQuery = query || simpleSelectionQuery;
+            const accessToken = await getAccessToken();
+            props.group
+                ? await mappingClient.updateGroup(accessToken, iModelId, props.mappingId, props.group.id ?? "", { ...details, query: currentQuery })
+                : await mappingClient.createGroup(accessToken, iModelId, props.mappingId, {
+                    ...details,
+                    query: currentQuery,
+                });
+            clearPresentationSelection();
+            setDetails({
+                groupName: props.group?.groupName ?? "",
+                description: props.group?.description ?? "",
+            });
+            setCurrentStep(GroupActionStep.QueryBuilder);
+            setShowValidationMessage(false);
+            props.onSaveSuccess();
+        }
+        catch (error) {
+            handleError(error.status);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [validator, setShowValidationMessage, query, simpleSelectionQuery, getAccessToken, props, mappingClient, iModelId, details, clearPresentationSelection]);
+    const isQueryBuilderStep = currentStep === GroupActionStep.QueryBuilder;
+    const isGroupDetailsStep = currentStep === GroupActionStep.GroupDetails;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "gmw-group-add-modify-container" },
+            React.createElement(QueryBuilderStep, { queryRowCount: queryRowCount, isHidden: !isQueryBuilderStep, queryGenerationType: queryGenerationType, groupUIs: groupUIs, isUpdating: isUpdating, resetView: resetView, setQuery: setQuery, onChange: onChange, getOptions: getOptions, displayStrings: { ...displayStrings }, group: props.group }),
+            isGroupDetailsStep && React.createElement(GroupDetailsStep, { details: details, setDetails: setDetails, validator: validator, displayStrings: { ...displayStrings } })),
+        React.createElement("div", { className: 'gmw-action-panel' },
+            isLoading &&
+                React.createElement(LoadingSpinner, null),
+            isQueryBuilderStep && (React.createElement(QueryBuilderActionPanel, { onClickNext: () => setCurrentStep(GroupActionStep.GroupDetails) })),
+            isGroupDetailsStep && (React.createElement(GroupDetailsActionPanel, { isSaveDisabled: isBlockingActions, onClickSave: save, onClickBack: () => setCurrentStep(GroupActionStep.QueryBuilder) })),
+            props.onClickCancel && React.createElement(Button, { type: 'button', id: 'cancel', onClick: () => {
+                    clearPresentationSelection();
+                    props.onClickCancel && props.onClickCancel();
+                } }, "Cancel"))));
+};
+//# sourceMappingURL=GroupAction.js.map

package/lib/esm/components/Groups/Editing/GroupAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupAction.js","sourceRoot":"","sources":["../../../../../src/components/Groups/Editing/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 {\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 { LoadingSpinner } from \"../../SharedComponents/LoadingSpinner\";\nimport { handleError } from \"../../../common/utils\";\nimport \"./GroupAction.scss\";\nimport useValidator from \"../../Properties/hooks/useValidator\";\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 { QueryBuilderStep } from \"../QueryBuilder/QueryBuilderStep\";\nimport { GroupDetailsStep } from \"./GroupDetailsStep\";\nimport { QueryBuilderActionPanel } from \"../QueryBuilder/QueryBuilderActionPanel\";\nimport { GroupDetailsActionPanel } from \"./GroupDetailsActionPanel\";\nimport { useVisualization } from \"../hooks/useVisualization\";\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  shouldVisualize: boolean;\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 { getAccessToken, iModelId, iModelConnection } = useGroupingMappingApiConfig();\n  if (!iModelConnection) {\n    throw new Error(\"This component requires an active iModelConnection.\");\n  }\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 [queryRowCount, setQueryRowCount] = useState<number>(0);\n\n  const [validator, setShowValidationMessage] = useValidator();\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n\n  const [queryGenerationType, setQueryGenerationType] = useState(\n    props.queryGenerationType,\n  );\n  const {\n    isRendering,\n    setIsRendering,\n    simpleSelectionQuery,\n    setSimpleSelectionQuery,\n    clearPresentationSelection,\n    resetView,\n  } = useVisualization(\n    props.shouldVisualize,\n    iModelConnection,\n    query,\n    queryGenerationType\n  );\n  const isUpdating = isLoading || isRendering;\n  const [currentStep, setCurrentStep] = React.useState(GroupActionStep.QueryBuilder);\n\n  const displayStrings = React.useMemo(\n    () => ({ ...defaultDisplayStrings, ...props.displayStrings }),\n    [props.displayStrings]\n  );\n\n  useEffect(() => setQueryGenerationType(props.queryGenerationType), [props.queryGenerationType]);\n\n  useEffect(() => {\n    const fetchQueryRowCount = async () => {\n      try {\n        if (!query || query === \"\") {\n          setQueryRowCount(0);\n          return;\n        }\n        setIsLoading(true);\n        const result = await iModelConnection.queryRowCount(query);\n        setQueryRowCount(result);\n      } catch {\n        toaster.negative(\"Query failed to resolve.\");\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    void fetchQueryRowCount();\n  }, [iModelConnection, query, setIsRendering]);\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      clearPresentationSelection();\n      setQuery(\"\");\n      setSimpleSelectionQuery(\"\");\n      await resetView();\n    },\n    [clearPresentationSelection, resetView, setSimpleSelectionQuery]\n  );\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      clearPresentationSelection();\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, clearPresentationSelection]);\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          queryRowCount={queryRowCount}\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={() => {\n            clearPresentationSelection();\n            props.onClickCancel && props.onClickCancel();\n          }}\n        >\n          Cancel\n        </Button>}\n      </div>\n    </>\n  );\n};\n"]}

package/lib/esm/components/Groups/Editing/GroupDetails.js

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { LabeledInput, Text } from "@itwin/itwinui-react";
+import React from "react";
+import { handleInputChange } from "../../../common/utils";
+import { NAME_REQUIREMENTS } from "../../Properties/hooks/useValidator";
+export const GroupDetails = ({ details, setDetails, validator, }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Text, { variant: "small", as: "small", className: "gmw-field-legend" }, "Asterisk * indicates mandatory fields."),
+        React.createElement(LabeledInput, { id: "groupName", name: "groupName", label: "Name", value: details.groupName, required: true, onChange: (event) => {
+                handleInputChange(event, details, setDetails);
+                validator.showMessageFor("groupName");
+            }, message: validator.message("groupName", details.groupName, NAME_REQUIREMENTS), status: validator.message("groupName", details.groupName, NAME_REQUIREMENTS)
+                ? "negative"
+                : undefined, onBlur: () => {
+                validator.showMessageFor("groupName");
+            }, onBlurCapture: (event) => {
+                handleInputChange(event, details, setDetails);
+                validator.showMessageFor("groupName");
+            } }),
+        React.createElement(LabeledInput, { id: "description", name: "description", label: "Description", value: details.description, onChange: (event) => {
+                handleInputChange(event, details, setDetails);
+            } })));
+};
+//# sourceMappingURL=GroupDetails.js.map

package/lib/esm/components/Groups/Editing/GroupDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupDetails.js","sourceRoot":"","sources":["../../../../../src/components/Groups/Editing/GroupDetails.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAaxE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,OAAO,EACP,UAAU,EACV,SAAS,GACS,EAAE,EAAE;IACtB,OAAO,CACL;QACE,oBAAC,IAAI,IAAC,OAAO,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,EAAC,SAAS,EAAC,kBAAkB,6CAEtD;QACP,oBAAC,YAAY,IACX,EAAE,EAAC,WAAW,EACd,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,OAAO,CAAC,SAAS,EACxB,QAAQ,QACR,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAClB,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;gBAC9C,SAAS,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;YACxC,CAAC,EACD,OAAO,EAAE,SAAS,CAAC,OAAO,CACxB,WAAW,EACX,OAAO,CAAC,SAAS,EACjB,iBAAiB,CAClB,EACD,MAAM,EACJ,SAAS,CAAC,OAAO,CACf,WAAW,EACX,OAAO,CAAC,SAAS,EACjB,iBAAiB,CAClB;gBACC,CAAC,CAAC,UAAU;gBACZ,CAAC,CAAC,SAAS,EAEf,MAAM,EAAE,GAAG,EAAE;gBACX,SAAS,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;YACxC,CAAC,EACD,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;gBACvB,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;gBAC9C,SAAS,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;YACxC,CAAC,GACD;QACF,oBAAC,YAAY,IACX,EAAE,EAAC,aAAa,EAChB,IAAI,EAAC,aAAa,EAClB,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,OAAO,CAAC,WAAW,EAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAClB,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC;YAChD,CAAC,GACD,CACD,CACJ,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 { LabeledInput, Text } from \"@itwin/itwinui-react\";\nimport React from \"react\";\nimport type SimpleReactValidator from \"simple-react-validator\";\nimport { handleInputChange } from \"../../../common/utils\";\nimport { NAME_REQUIREMENTS } from \"../../Properties/hooks/useValidator\";\n\nexport interface GroupDetailsType {\n  groupName: string;\n  description: string;\n}\n\nexport interface GroupDetailsProps {\n  details: GroupDetailsType;\n  setDetails: (newDetails: GroupDetailsType) => void;\n  validator: SimpleReactValidator;\n}\n\nexport const GroupDetails = ({\n  details,\n  setDetails,\n  validator,\n}: GroupDetailsProps) => {\n  return (\n    <>\n      <Text variant=\"small\" as=\"small\" className=\"gmw-field-legend\">\n        Asterisk * indicates mandatory fields.\n      </Text>\n      <LabeledInput\n        id=\"groupName\"\n        name=\"groupName\"\n        label=\"Name\"\n        value={details.groupName}\n        required\n        onChange={(event) => {\n          handleInputChange(event, details, setDetails);\n          validator.showMessageFor(\"groupName\");\n        }}\n        message={validator.message(\n          \"groupName\",\n          details.groupName,\n          NAME_REQUIREMENTS,\n        )}\n        status={\n          validator.message(\n            \"groupName\",\n            details.groupName,\n            NAME_REQUIREMENTS,\n          )\n            ? \"negative\"\n            : undefined\n        }\n        onBlur={() => {\n          validator.showMessageFor(\"groupName\");\n        }}\n        onBlurCapture={(event) => {\n          handleInputChange(event, details, setDetails);\n          validator.showMessageFor(\"groupName\");\n        }}\n      />\n      <LabeledInput\n        id=\"description\"\n        name=\"description\"\n        label=\"Description\"\n        value={details.description}\n        onChange={(event) => {\n          handleInputChange(event, details, setDetails);\n        }}\n      />\n    </>\n  );\n};\n"]}

package/lib/esm/components/Groups/Editing/GroupDetailsActionPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupDetailsActionPanel.js","sourceRoot":"","sources":["../../../../../src/components/Groups/Editing/GroupDetailsActionPanel.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,cAAc,EACd,WAAW,EACX,WAAW,GACkB,EAAE,EAAE;IACjC,OAAO,CACL;QACE,oBAAC,MAAM,IAAC,OAAO,EAAE,WAAW,WAAe;QAC3C,oBAAC,MAAM,IACL,QAAQ,EAAE,cAAc,EACxB,SAAS,EAAC,iBAAiB,EAC3B,OAAO,EAAE,WAAW,WAGb,CACR,CACJ,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 { Button } from \"@itwin/itwinui-react\";\nimport React from \"react\";\n\nexport interface GroupDetailsActionPanelProps {\n  isSaveDisabled: boolean;\n  onClickBack: () => void;\n  onClickSave: () => Promise<void>;\n}\n\nexport const GroupDetailsActionPanel = ({\n  isSaveDisabled,\n  onClickBack,\n  onClickSave,\n}: GroupDetailsActionPanelProps) => {\n  return (\n    <>\n      <Button onClick={onClickBack}>Back</Button>\n      <Button\n        disabled={isSaveDisabled}\n        styleType=\"high-visibility\"\n        onClick={onClickSave}\n      >\n        Save\n      </Button>\n    </>\n  );\n};\n"]}

package/lib/esm/components/Groups/Editing/GroupDetailsStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupDetailsStep.js","sourceRoot":"","sources":["../../../../../src/components/Groups/Editing/GroupDetailsStep.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,yBAAyB,CAAC;AAEjC,MAAM,qBAAqB,GAAG;IAC5B,YAAY,EAAE,eAAe;CAC9B,CAAC;AAMF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,cAAc,EAAE,kBAAkB,EAClC,GAAG,IAAI,EACe,EAAE,EAAE;IAC1B,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAClC,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,qBAAqB,EAAE,GAAG,kBAAkB,EAAE,CAAC,EAC3D,CAAC,kBAAkB,CAAC,CACrB,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,IACP,MAAM,EAAE,cAAc,CAAC,YAAY,EACnC,SAAS,EAAC,mBAAmB;QAE7B,oBAAC,YAAY,OACP,IAAI,GACR,CACO,CACZ,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 { Fieldset } from \"@itwin/itwinui-react\";\nimport React from \"react\";\nimport \"./GroupAction.scss\";\nimport type { GroupDetailsProps } from \"./GroupDetails\";\nimport { GroupDetails } from \"./GroupDetails\";\nimport \"./GroupDetailsStep.scss\";\n\nconst defaultDisplayStrings = {\n  groupDetails: \"Group Details\",\n};\n\nexport interface GroupDetailsStepProps extends GroupDetailsProps {\n  displayStrings?: Partial<typeof defaultDisplayStrings>;\n}\n\nexport const GroupDetailsStep = ({\n  displayStrings: userDisplayStrings,\n  ...rest\n}: GroupDetailsStepProps) => {\n  const displayStrings = React.useMemo(\n    () => ({ ...defaultDisplayStrings, ...userDisplayStrings }),\n    [userDisplayStrings]\n  );\n\n  return (\n    <Fieldset\n      legend={displayStrings.groupDetails}\n      className='gmw-group-details'\n    >\n      <GroupDetails\n        {...rest}\n      />\n    </Fieldset>\n  );\n};\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupColorLegend.js","sourceRoot":"","sources":["../../../../src/components/Groups/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/components/Groups/GroupItem.d.ts

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

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { HorizontalTile } from "../SharedComponents/HorizontalTile";
+import { GroupMenuActions } from "./GroupMenuActions";
+import { useGroupHilitedElementsContext } from "../context/GroupHilitedElementsContext";
+import { OverlapProgress } from "./GroupOverlapProgressBar";
+export const GroupItem = ({ onClickGroupTitle, disableActions, group, isVisualizing, ...rest }) => {
+    const { groupElementsInfo, overlappedElementsInfo, showGroupColor } = useGroupHilitedElementsContext();
+    const onTitleClick = () => {
+        if (onClickGroupTitle) {
+            onClickGroupTitle(group);
+        }
+    };
+    return (React.createElement(HorizontalTile, { title: group.groupName, subText: group.description, actionGroup: React.createElement(GroupMenuActions, { group: group, disableActions: disableActions, ...rest }), elementsInfo: overlappedElementsInfo.size > 0 &&
+            React.createElement(OverlapProgress, { group: group, overlappedElementsInfo: overlappedElementsInfo, groupElementsInfo: groupElementsInfo }), showGroupColor: showGroupColor, isLoading: isVisualizing, onClickTitle: onClickGroupTitle && !disableActions ? onTitleClick : undefined }));
+};
+//# sourceMappingURL=GroupItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupItem.js","sourceRoot":"","sources":["../../../../src/components/Groups/GroupItem.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAMpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AACxF,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAY5D,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,iBAAiB,EACjB,cAAc,EACd,KAAK,EACL,aAAa,EACb,GAAG,IAAI,EACQ,EAAE,EAAE;IACnB,MAAM,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,cAAc,EAAE,GACjE,8BAA8B,EAAE,CAAC;IAEnC,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,iBAAiB,EAAE;YACrB,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,cAAc,EAAE,cAAc,KAC1B,IAAI,GACR,EAEJ,YAAY,EACV,sBAAsB,CAAC,IAAI,GAAG,CAAC;YAC/B,oBAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,sBAAsB,EAAE,sBAAsB,EAC9C,iBAAiB,EAAE,iBAAiB,GACpC,EAEJ,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,aAAa,EACxB,YAAY,EACV,iBAAiB,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,GAEjE,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 \"../SharedComponents/HorizontalTile\";\nimport type {\n  ContextCustomUI,\n  GroupingCustomUI,\n} from \"../customUI/GroupingMappingCustomUI\";\nimport type { GroupsProps } from \"./Groups\";\nimport { GroupMenuActions } from \"./GroupMenuActions\";\nimport { useGroupHilitedElementsContext } from \"../context/GroupHilitedElementsContext\";\nimport { OverlapProgress } from \"./GroupOverlapProgressBar\";\n\nexport interface GroupItemProps extends Omit<GroupsProps, \"onClickAddGroup\"> {\n  group: Group;\n  groupUIs: GroupingCustomUI[];\n  contextUIs: ContextCustomUI[];\n  setShowDeleteModal: (showDeleteModal: Group) => void;\n  setActiveOverlapInfoPanelGroup?: (\n    activeOverlapInfoPanelGroup: Group\n  ) => void;\n}\n\nexport const GroupItem = ({\n  onClickGroupTitle,\n  disableActions,\n  group,\n  isVisualizing,\n  ...rest\n}: GroupItemProps) => {\n  const { groupElementsInfo, overlappedElementsInfo, showGroupColor } =\n    useGroupHilitedElementsContext();\n\n  const onTitleClick = () => {\n    if (onClickGroupTitle) {\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          disableActions={disableActions}\n          {...rest}\n        />\n      }\n      elementsInfo={\n        overlappedElementsInfo.size > 0 &&\n        <OverlapProgress\n          group={group}\n          overlappedElementsInfo={overlappedElementsInfo}\n          groupElementsInfo={groupElementsInfo}\n        />\n      }\n      showGroupColor={showGroupColor}\n      isLoading={isVisualizing}\n      onClickTitle={\n        onClickGroupTitle && !disableActions ? onTitleClick : undefined\n      }\n    />\n  );\n};\n"]}

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

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

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

@@ -0,0 +1,57 @@
+import { SvgDelete, SvgEdit, SvgInfo, 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";
+import { useGroupHilitedElementsContext } from "../context/GroupHilitedElementsContext";
+export const GroupMenuActions = ({ mapping, group, actionButtonRenderers, onClickGroupModify, onClickRenderContextCustomUI, groupUIs, contextUIs, disableActions, setShowDeleteModal, setActiveOverlapInfoPanelGroup, }) => {
+    const { iModelId } = useGroupingMappingApiConfig();
+    const { showGroupColor } = useGroupHilitedElementsContext();
+    const onModify = useCallback(async (group, type) => {
+        if (!onClickGroupModify)
+            return;
+        onClickGroupModify(group, type);
+    }, [onClickGroupModify]);
+    const createMenuItems = useCallback((close) => {
+        const menuItems = [
+            ...(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"),
+        ];
+        if (showGroupColor && setActiveOverlapInfoPanelGroup) {
+            menuItems.push(React.createElement(MenuItem, { key: 3, onClick: () => {
+                    setActiveOverlapInfoPanelGroup(group);
+                    close();
+                }, icon: React.createElement(SvgInfo, null), "data-testid": "gmw-overlap-menu-item" }, "Overlap Info"));
+        }
+        return menuItems;
+    }, [groupUIs, disableActions, group, contextUIs, mapping, iModelId, showGroupColor, onModify, setActiveOverlapInfoPanelGroup, setShowDeleteModal, onClickGroupModify, onClickRenderContextCustomUI]);
+    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: createMenuItems },
+            React.createElement(IconButton, { disabled: disableActions, styleType: "borderless", "data-testid": "gmw-more-button", title: 'Group Options' },
+                React.createElement(SvgMore, null)))));
+};
+//# sourceMappingURL=GroupMenuActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupMenuActions.js","sourceRoot":"","sources":["../../../../src/components/Groups/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, SvgInfo, 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 { GroupsProps } from \"./Groups\";\nimport { useGroupingMappingApiConfig } from \"../context/GroupingApiConfigContext\";\nimport \"./GroupMenuActions.scss\";\nimport { useGroupHilitedElementsContext } from \"../context/GroupHilitedElementsContext\";\n\nexport interface GroupMenuActionsProps extends Omit<GroupsProps, \"onClickAddGroup\" | \"onClickGroupTitle\"> {\n  group: Group;\n  groupUIs: GroupingCustomUI[];\n  contextUIs: ContextCustomUI[];\n  setShowDeleteModal: (showDeleteModal: Group) => void;\n  setActiveOverlapInfoPanelGroup?: (activeOverlapInfoPanelGroup: 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  setActiveOverlapInfoPanelGroup,\n}: GroupMenuActionsProps) => {\n  const { iModelId } = useGroupingMappingApiConfig();\n  const { showGroupColor } = useGroupHilitedElementsContext();\n  const onModify = useCallback(async (group: Group, type: string) => {\n    if (!onClickGroupModify) return;\n    onClickGroupModify(group, type);\n  }, [onClickGroupModify]);\n\n  const createMenuItems = useCallback((close: () => void) => {\n    const menuItems = [\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    if (showGroupColor && setActiveOverlapInfoPanelGroup) {\n      menuItems.push(\n        <MenuItem\n          key={3}\n          onClick={() => {\n            setActiveOverlapInfoPanelGroup(group);\n            close();\n          }}\n          icon={<SvgInfo />}\n          data-testid=\"gmw-overlap-menu-item\"\n        >\n          Overlap Info\n        </MenuItem>);\n    }\n\n    return menuItems;\n  }, [groupUIs, disableActions, group, contextUIs, mapping, iModelId, showGroupColor, onModify, setActiveOverlapInfoPanelGroup, setShowDeleteModal, onClickGroupModify, onClickRenderContextCustomUI]);\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={createMenuItems}\n      >\n        <IconButton\n          disabled={disableActions}\n          styleType=\"borderless\"\n          data-testid=\"gmw-more-button\"\n          title='Group Options'\n        >\n          <SvgMore />\n        </IconButton>\n      </DropdownMenu>\n    </div>\n  );\n};\n"]}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { Group } from "@itwin/insights-client";
+import type { OverlappedInfo } from "../context/GroupHilitedElementsContext";
+interface OverlapProgressProps {
+    group: Group;
+    groupElementsInfo: Map<string, number>;
+    overlappedElementsInfo: Map<string, OverlappedInfo[]>;
+}
+export declare const OverlapProgress: ({ group, groupElementsInfo, overlappedElementsInfo }: OverlapProgressProps) => JSX.Element;
+export {};
+//# sourceMappingURL=GroupOverlapProgressBar.d.ts.map

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

@@ -0,0 +1,11 @@
+import { ProgressLinear } from "@itwin/itwinui-react";
+import React from "react";
+export const OverlapProgress = ({ group, groupElementsInfo, overlappedElementsInfo }) => {
+    const groupId = group.id;
+    const totalElements = groupElementsInfo.get(groupId) || 0;
+    const overlappedInfo = overlappedElementsInfo.get(groupId) || [];
+    const overlappedElements = overlappedInfo.reduce((count, info) => count + info.elements.length, 0);
+    const overlapPercentage = (totalElements ? overlappedElements / totalElements : 0) * 100;
+    return (React.createElement(ProgressLinear, { title: `${overlappedElements} element${overlappedElements === 1 ? "" : "s"} overlapping out of ${totalElements} `, value: overlapPercentage, isAnimated: true, status: "negative" }));
+};
+//# sourceMappingURL=GroupOverlapProgressBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupOverlapProgressBar.js","sourceRoot":"","sources":["../../../../src/components/Groups/GroupOverlapProgressBar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,sBAAsB,EAAwB,EAAE,EAAE;IAC5G,MAAM,OAAO,GAAG,KAAK,CAAC,EAAE,CAAC;IACzB,MAAM,aAAa,GAAG,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,MAAM,cAAc,GAAG,sBAAsB,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACjE,MAAM,kBAAkB,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IACnG,MAAM,iBAAiB,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,kBAAkB,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC;IAEzF,OAAO,CACL,oBAAC,cAAc,IACb,KAAK,EAAE,GAAG,kBAAkB,WAAW,kBAAkB,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,uBAAuB,aAAa,GAAG,EACjH,KAAK,EAAE,iBAAiB,EACxB,UAAU,QACV,MAAM,EAAC,UAAU,GACjB,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 { ProgressLinear } from \"@itwin/itwinui-react\";\nimport React from \"react\";\nimport type { OverlappedInfo } from \"../context/GroupHilitedElementsContext\";\n\ninterface OverlapProgressProps {\n  group: Group;\n  groupElementsInfo: Map<string, number>;\n  overlappedElementsInfo: Map<string, OverlappedInfo[]>;\n}\n\nexport const OverlapProgress = ({ group, groupElementsInfo, overlappedElementsInfo }: OverlapProgressProps) => {\n  const groupId = group.id;\n  const totalElements = groupElementsInfo.get(groupId) || 0;\n  const overlappedInfo = overlappedElementsInfo.get(groupId) || [];\n  const overlappedElements = overlappedInfo.reduce((count, info) => count + info.elements.length, 0);\n  const overlapPercentage = (totalElements ? overlappedElements / totalElements : 0) * 100;\n\n  return (\n    <ProgressLinear\n      title={`${overlappedElements} element${overlappedElements === 1 ? \"\" : \"s\"} overlapping out of ${totalElements} `}\n      value={overlapPercentage}\n      isAnimated\n      status=\"negative\"\n    />\n  );\n};\n"]}

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

@@ -0,0 +1,18 @@
+import React from "react";
+import type { Group, Mapping } from "@itwin/insights-client";
+import type { ContextCustomUI } from "../customUI/GroupingMappingCustomUI";
+import type { ActionButtonRenderer } from "./GroupsView";
+import { Alert } from "@itwin/itwinui-react";
+export interface GroupsProps {
+    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, displayLabel: string) => void;
+    disableActions?: boolean;
+    isVisualizing?: boolean;
+    alert?: React.ReactElement<typeof Alert>;
+}
+export declare const Groups: ({ mapping, actionButtonRenderers, onClickAddGroup, onClickGroupTitle, onClickGroupModify, onClickRenderContextCustomUI, disableActions, isVisualizing, alert, }: GroupsProps) => JSX.Element;
+//# sourceMappingURL=Groups.d.ts.map

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

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import React, { useCallback } from "react";
+import { GroupsView } from "./GroupsView";
+import { useGroupsOperations } from "./hooks/useGroupsOperations";
+import { Alert } from "@itwin/itwinui-react";
+export const Groups = ({ mapping, actionButtonRenderers, onClickAddGroup, onClickGroupTitle, onClickGroupModify, onClickRenderContextCustomUI, disableActions, isVisualizing, alert, }) => {
+    const { groups, isLoading, refresh, onDeleteGroup, setShowDeleteModal, showDeleteModal, groupUIs, contextUIs, errorMessage, setErrorMessage, activeOverlapInfoPanelGroup, setActiveOverlapInfoPanelGroup, overlappedElementsInfo, hilitedGroupsProgress, } = useGroupsOperations({ mappingId: mapping.id });
+    const addGroup = useCallback((type) => {
+        if (!onClickAddGroup)
+            return;
+        onClickAddGroup(type);
+    }, [onClickAddGroup]);
+    const renderAlert = useCallback(() => {
+        if (!errorMessage) {
+            return alert;
+        }
+        return (React.createElement(Alert, { type: "negative", onClose: () => setErrorMessage(undefined) }, errorMessage));
+    }, [alert, errorMessage, setErrorMessage]);
+    return (React.createElement(GroupsView, { mapping: mapping, groups: groups, isLoading: isLoading, onRefresh: refresh, groupUIs: groupUIs, actionButtonRenderers: actionButtonRenderers, onClickAddGroup: addGroup, onClickGroupTitle: onClickGroupTitle, onClickGroupModify: onClickGroupModify, onClickRenderContextCustomUI: onClickRenderContextCustomUI, disableActions: disableActions, selectedGroupForDeletion: showDeleteModal, setSelectedGroupForDeletion: setShowDeleteModal, onDeleteGroup: onDeleteGroup, onCloseDeleteModal: () => setShowDeleteModal(undefined), contextUIs: contextUIs, progressConfig: isVisualizing ? { hilitedGroupsProgress } : undefined, alert: renderAlert(), setActiveOverlapInfoPanelGroup: setActiveOverlapInfoPanelGroup, activeOverlapInfoPanelGroup: activeOverlapInfoPanelGroup, overlappedElementsInfo: overlappedElementsInfo }));
+};
+//# sourceMappingURL=Groups.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Groups.js","sourceRoot":"","sources":["../../../../src/components/Groups/Groups.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAM3C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAkB7C,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,OAAO,EACP,qBAAqB,EACrB,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,4BAA4B,EAC5B,cAAc,EACd,aAAa,EACb,KAAK,GACO,EAAE,EAAE;IAChB,MAAM,EACJ,MAAM,EACN,SAAS,EACT,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,eAAe,EACf,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,eAAe,EACf,2BAA2B,EAC3B,8BAA8B,EAC9B,sBAAsB,EACtB,qBAAqB,GACtB,GAAG,mBAAmB,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;IAEnD,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,IAAY,EAAE,EAAE;QAC5C,IAAI,CAAC,eAAe;YAAE,OAAO;QAC7B,eAAe,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO,KAAK,CAAC;SACd;QACD,OAAO,CACL,oBAAC,KAAK,IAAC,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,IAC7D,YAAY,CACP,CACT,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAE3C,OAAO,CACL,oBAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,qBAAqB,EAC5C,eAAe,EAAE,QAAQ,EACzB,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,4BAA4B,EAAE,4BAA4B,EAC1D,cAAc,EAAE,cAAc,EAC9B,wBAAwB,EAAE,eAAe,EACzC,2BAA2B,EAAE,kBAAkB,EAC/C,aAAa,EAAE,aAAa,EAC5B,kBAAkB,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,SAAS,CAAC,EACvD,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,qBAAqB,EAAE,CAAC,CAAC,CAAC,SAAS,EACrE,KAAK,EAAE,WAAW,EAAE,EACpB,8BAA8B,EAAE,8BAA8B,EAC9D,2BAA2B,EAAE,2BAA2B,EACxD,sBAAsB,EAAE,sBAAsB,GAC9C,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 React, { useCallback } from \"react\";\nimport type { Group, Mapping } from \"@itwin/insights-client\";\nimport type {\n  ContextCustomUI,\n} from \"../customUI/GroupingMappingCustomUI\";\nimport type { ActionButtonRenderer } from \"./GroupsView\";\nimport { GroupsView } from \"./GroupsView\";\nimport { useGroupsOperations } from \"./hooks/useGroupsOperations\";\nimport { Alert } from \"@itwin/itwinui-react\";\n\nexport interface GroupsProps {\n  mapping: Mapping;\n  actionButtonRenderers?: ActionButtonRenderer[];\n  onClickAddGroup?: (queryGenerationType: string) => void;\n  onClickGroupTitle?: (group: Group) => void;\n  onClickGroupModify?: (group: Group, queryGenerationType: string) => void;\n  onClickRenderContextCustomUI?: (\n    contextCustomUI: Exclude<ContextCustomUI[\"uiComponent\"], undefined>,\n    group: Group,\n    displayLabel: string,\n  ) => void;\n  disableActions?: boolean;\n  isVisualizing?: boolean;\n  alert?: React.ReactElement<typeof Alert>;\n}\n\nexport const Groups = ({\n  mapping,\n  actionButtonRenderers,\n  onClickAddGroup,\n  onClickGroupTitle,\n  onClickGroupModify,\n  onClickRenderContextCustomUI,\n  disableActions,\n  isVisualizing,\n  alert,\n}: GroupsProps) => {\n  const {\n    groups,\n    isLoading,\n    refresh,\n    onDeleteGroup,\n    setShowDeleteModal,\n    showDeleteModal,\n    groupUIs,\n    contextUIs,\n    errorMessage,\n    setErrorMessage,\n    activeOverlapInfoPanelGroup,\n    setActiveOverlapInfoPanelGroup,\n    overlappedElementsInfo,\n    hilitedGroupsProgress,\n  } = useGroupsOperations({ mappingId: mapping.id });\n\n  const addGroup = useCallback((type: string) => {\n    if (!onClickAddGroup) return;\n    onClickAddGroup(type);\n  }, [onClickAddGroup]);\n\n  const renderAlert = useCallback(() => {\n    if (!errorMessage) {\n      return alert;\n    }\n    return (\n      <Alert type=\"negative\" onClose={() => setErrorMessage(undefined)}>\n        {errorMessage}\n      </Alert>\n    );\n  }, [alert, errorMessage, setErrorMessage]);\n\n  return (\n    <GroupsView\n      mapping={mapping}\n      groups={groups}\n      isLoading={isLoading}\n      onRefresh={refresh}\n      groupUIs={groupUIs}\n      actionButtonRenderers={actionButtonRenderers}\n      onClickAddGroup={addGroup}\n      onClickGroupTitle={onClickGroupTitle}\n      onClickGroupModify={onClickGroupModify}\n      onClickRenderContextCustomUI={onClickRenderContextCustomUI}\n      disableActions={disableActions}\n      selectedGroupForDeletion={showDeleteModal}\n      setSelectedGroupForDeletion={setShowDeleteModal}\n      onDeleteGroup={onDeleteGroup}\n      onCloseDeleteModal={() => setShowDeleteModal(undefined)}\n      contextUIs={contextUIs}\n      progressConfig={isVisualizing ? { hilitedGroupsProgress } : undefined}\n      alert={renderAlert()}\n      setActiveOverlapInfoPanelGroup={setActiveOverlapInfoPanelGroup}\n      activeOverlapInfoPanelGroup={activeOverlapInfoPanelGroup}\n      overlappedElementsInfo={overlappedElementsInfo}\n    />\n  );\n};\n"]}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { GroupingCustomUI } from "../customUI/GroupingMappingCustomUI";
+import "./GroupsAddButton.scss";
+export interface GroupsDropdownMenuProps {
+    disabled?: boolean;
+    groupUIs: GroupingCustomUI[];
+    onClickAddGroup: (type: string) => void;
+}
+export declare const GroupsAddButton: ({ disabled, groupUIs, onClickAddGroup, }: GroupsDropdownMenuProps) => JSX.Element;
+//# sourceMappingURL=GroupsAddButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupsAddButton.js","sourceRoot":"","sources":["../../../../src/components/Groups/GroupsAddButton.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,wBAAwB,CAAC;AAChC,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAQ/D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,QAAQ,EACR,QAAQ,EACR,eAAe,GACS,EAAE,EAAE,CAAC,CAC7B,oBAAC,YAAY,IACX,SAAS,EAAC,wBAAwB,EAClC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,GAAG,EAAE,CACd,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,oBAAC,QAAQ,IACP,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,EACtC,IAAI,EAAE,CAAC,CAAC,IAAI,iBACC,WAAW,KAAK,EAAE,IAE9B,CAAC,CAAC,YAAY,CACN,CACZ,CAAC;IAGJ,oBAAC,MAAM,mBACO,sBAAsB,EAClC,SAAS,EAAC,iBAAiB,EAC3B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,oBAAC,iBAAiB,OAAG;QAE9B,oBAAC,IAAI,oBAAiB,CACf,CACI,CAChB,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 { Button, DropdownMenu, MenuItem, Text } from \"@itwin/itwinui-react\";\nimport React from \"react\";\nimport type { GroupingCustomUI } from \"../customUI/GroupingMappingCustomUI\";\nimport \"./GroupsAddButton.scss\";\nimport { SvgCaretDownSmall } from \"@itwin/itwinui-icons-react\";\n\nexport interface GroupsDropdownMenuProps {\n  disabled?: boolean;\n  groupUIs: GroupingCustomUI[];\n  onClickAddGroup: (type: string) => void;\n}\n\nexport const GroupsAddButton = ({\n  disabled,\n  groupUIs,\n  onClickAddGroup,\n}: GroupsDropdownMenuProps) => (\n  <DropdownMenu\n    className=\"gmw-custom-ui-dropdown\"\n    disabled={disabled}\n    menuItems={() =>\n      groupUIs.map((p, index) => (\n        <MenuItem\n          key={index}\n          onClick={() => onClickAddGroup(p.name)}\n          icon={p.icon}\n          data-testid={`gmw-add-${index}`}\n        >\n          {p.displayLabel}\n        </MenuItem>\n      ))\n    }\n  >\n    <Button\n      data-testid=\"gmw-add-group-button\"\n      styleType=\"high-visibility\"\n      disabled={disabled}\n      endIcon={<SvgCaretDownSmall />}\n    >\n      <Text>Add Group</Text>\n    </Button>\n  </DropdownMenu>\n);\n"]}

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

@@ -0,0 +1,22 @@
+import { SvgVisibilityHide, SvgVisibilityShow } from "@itwin/itwinui-icons-react";
+import { IconButton } from "@itwin/itwinui-react";
+import React, { useCallback, useMemo } from "react";
+import { useGroupHilitedElementsContext } from "../context/GroupHilitedElementsContext";
+export const GroupsShowHideButtons = ({ group, isLoadingQuery, showGroup, hideGroup, }) => {
+    const { hiddenGroupsIds, setHiddenGroupsIds } = useGroupHilitedElementsContext();
+    const isGroupHidden = useMemo(() => group.id && hiddenGroupsIds.has(group.id), [group.id, hiddenGroupsIds]);
+    const toggleGroupVisibility = useCallback(async () => {
+        if (isGroupHidden) {
+            await showGroup(group);
+            setHiddenGroupsIds(new Set([...hiddenGroupsIds].filter((id) => group.id !== id)));
+        }
+        else {
+            await hideGroup(group);
+            if (group.id) {
+                setHiddenGroupsIds(new Set([...hiddenGroupsIds, group.id]));
+            }
+        }
+    }, [group, hiddenGroupsIds, hideGroup, isGroupHidden, setHiddenGroupsIds, showGroup]);
+    return (React.createElement(IconButton, { disabled: isLoadingQuery, styleType: "borderless", onClick: toggleGroupVisibility, title: 'Toggle Group Visibility' }, isGroupHidden ? React.createElement(SvgVisibilityHide, null) : React.createElement(SvgVisibilityShow, null)));
+};
+//# sourceMappingURL=GroupsShowHideButtons.js.map

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

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

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

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

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

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