@itwin/grouping-mapping-widget 0.12.0 → 0.14.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"CalculatedPropertyActionWithVisuals.js","sourceRoot":"","sources":["../../../../src/widget/components/CalculatedPropertyActionWithVisuals.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 { IModelApp } from \"@itwin/core-frontend\";\nimport type {\n  SelectOption,\n} from \"@itwin/itwinui-react\";\nimport {\n  Fieldset,\n  MenuItem,\n  Small,\n  ToggleSwitch,\n} from \"@itwin/itwinui-react\";\nimport React, { useEffect, useState } from \"react\";\nimport ActionPanel from \"./ActionPanel\";\nimport {\n  BboxDimension,\n  BboxDimensionsDecorator,\n} from \"../../decorators/BboxDimensionsDecorator\";\nimport useValidator from \"../hooks/useValidator\";\nimport { handleError } from \"./utils\";\nimport { clearEmphasizedOverriddenElements, visualizeElements, zoomToElements } from \"./viewerUtils\";\nimport \"./CalculatedPropertyActionWithVisuals.scss\";\nimport { useMappingClient } from \"./context/MappingClientContext\";\nimport { useGroupingMappingApiConfig } from \"./context/GroupingApiConfigContext\";\nimport type { CalculatedProperty, CalculatedPropertyType, Group } from \"@itwin/insights-client\";\nimport { useGroupHilitedElementsContext } from \"./context/GroupHilitedElementsContext\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { getHiliteIdsAndKeysetFromGroup } from \"./groupsHelpers\";\nimport { SharedCalculatedPropertyForms } from \"./SharedCalculatedPropertyForms\";\n\nexport interface CalculatedPropertyActionWithVisualsProps {\n  mappingId: string;\n  group: Group;\n  calculatedProperty?: CalculatedProperty;\n  onSaveSuccess: () => void;\n  onClickCancel?: () => void;\n}\n\nexport const CalculatedPropertyActionWithVisuals = ({\n  mappingId,\n  group,\n  calculatedProperty,\n  onSaveSuccess,\n  onClickCancel,\n}: CalculatedPropertyActionWithVisualsProps) => {\n  const { getAccessToken, iModelId } = useGroupingMappingApiConfig();\n  const mappingClient = useMappingClient();\n  const [propertyName, setPropertyName] = useState<string>(\n    calculatedProperty?.propertyName ?? \"\",\n  );\n  const iModelConnection = useActiveIModelConnection();\n  const [type, setType] = useState<CalculatedPropertyType | undefined>(calculatedProperty?.type);\n  const [bboxDecorator, setBboxDecorator] = useState<BboxDimensionsDecorator | undefined>();\n  const [isLoading, setIsLoading] = useState<boolean>(false);\n  const { hilitedElementsQueryCache } = useGroupHilitedElementsContext();\n  const [inferredSpatialData, setInferredSpatialData] = useState<Map<BboxDimension, number> | undefined>();\n  const [validator, showValidationMessage] = useValidator();\n  const [resolvedHiliteIds, setResolvedHiliteIds] = useState<string[]>([]);\n  const [colorProperty, setColorProperty] = useState<boolean>(false);\n\n  useEffect(() => {\n    const decorator = new BboxDimensionsDecorator();\n    IModelApp.viewManager.addDecorator(decorator);\n    setBboxDecorator(decorator);\n    return () => {\n      IModelApp.viewManager.dropDecorator(decorator);\n    };\n  }, []);\n\n  useEffect(() => {\n    const initialize = async () => {\n      if (!iModelConnection) return;\n      clearEmphasizedOverriddenElements();\n      if (!colorProperty) return;\n      setIsLoading(true);\n      const result = await getHiliteIdsAndKeysetFromGroup(iModelConnection, group, hilitedElementsQueryCache);\n      setResolvedHiliteIds(result.ids);\n      setIsLoading(false);\n    };\n    void initialize();\n  }, [iModelConnection, hilitedElementsQueryCache, group, colorProperty]);\n\n  useEffect(() => {\n    if (!colorProperty || resolvedHiliteIds.length === 0) {\n      return;\n    }\n    visualizeElements([resolvedHiliteIds[0]], \"red\");\n    void zoomToElements([resolvedHiliteIds[0]]);\n  }, [colorProperty, resolvedHiliteIds]);\n\n  useEffect(() => {\n    if (!colorProperty || resolvedHiliteIds.length === 0) {\n      return;\n    }\n    const setContext = async () => {\n      if (bboxDecorator) {\n        await bboxDecorator.setContext(resolvedHiliteIds[0]);\n        setInferredSpatialData(bboxDecorator.getInferredSpatialData());\n      }\n    };\n    void setContext();\n  }, [bboxDecorator, colorProperty, resolvedHiliteIds]);\n\n  useEffect(() => {\n    if (bboxDecorator && type && inferredSpatialData) {\n      inferredSpatialData.has(BboxDimension[type as keyof typeof BboxDimension]) && colorProperty\n        ? bboxDecorator.drawContext(\n          BboxDimension[type as keyof typeof BboxDimension],\n        )\n        : bboxDecorator.clearContext();\n    }\n  }, [bboxDecorator, colorProperty, inferredSpatialData, type]);\n\n  const onSave = async () => {\n    if (!validator.allValid() || !type) {\n      showValidationMessage(true);\n      return;\n    }\n    try {\n      setIsLoading(true);\n\n      const accessToken = await getAccessToken();\n\n      calculatedProperty\n        ? await mappingClient.updateCalculatedProperty(\n          accessToken,\n          iModelId,\n          mappingId,\n          group.id,\n          calculatedProperty.id,\n          {\n            propertyName,\n            type,\n          },\n        )\n        : await mappingClient.createCalculatedProperty(\n          accessToken,\n          iModelId,\n          mappingId,\n          group.id,\n          {\n            propertyName,\n            type,\n          },\n        );\n      onSaveSuccess();\n      setPropertyName(\"\");\n      setType(undefined);\n    } catch (error: any) {\n      handleError(error.status);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const getSpatialData = (value: string) =>\n    inferredSpatialData?.has(\n      BboxDimension[value as keyof typeof BboxDimension],\n    ) && (\n      <div>\n        {`${inferredSpatialData\n          ?.get(BboxDimension[value as keyof typeof BboxDimension])\n          ?.toPrecision(4)}m`}\n      </div>\n    );\n\n  return (\n    <>\n      <div className='gmw-calculated-properties-action-container'>\n        <Fieldset legend='Calculated Property Details' className='gmw-details-form'>\n          <div className='gmw-field-legend-container'>\n            <Small className='gmw-field-legend'>\n              Asterisk * indicates mandatory fields.\n            </Small>\n            <ToggleSwitch\n              label='Visualize Dimensions'\n              labelPosition='left'\n              disabled={isLoading}\n              checked={colorProperty}\n              onChange={() => setColorProperty((b) => !b)}\n            ></ToggleSwitch>\n          </div>\n          <SharedCalculatedPropertyForms\n            validator={validator}\n            propertyName={propertyName}\n            setPropertyName={setPropertyName}\n            type={type}\n            setType={setType}\n            itemRenderer={(option: SelectOption<string>) => (\n              <MenuItem>\n                <div className='gmw-gr-cp-menu-item'>\n                  <div>{option.label}</div>\n                  {getSpatialData(option.value)}\n                </div>\n              </MenuItem>\n            )}\n            selectedItemRenderer={(option: SelectOption<string>) => (\n              <div className='gmw-select-item'>\n                <div>{option.label}</div>\n                {getSpatialData(option.value)}\n              </div>\n            )}\n          />\n        </Fieldset>\n      </div>\n      <ActionPanel\n        onSave={onSave}\n        onCancel={onClickCancel}\n        isSavingDisabled={!(type && propertyName)}\n        isLoading={isLoading}\n      />\n    </>\n  );\n};\n"]}

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

@@ -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 "~@itwin/itwinui-css/scss/variables";
+
+.gmw-calculated-properties-action-container {
+  overflow-x: auto;
+  height: 100%;
+
+  .gmw-details-form {
+    display: flex;
+    flex-direction: column;
+    gap: $iui-baseline;
+
+    .gmw-select-item {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+    }
+  }
+}
+
+.gmw-gr-cp-menu-item {
+  display: flex;
+  justify-content: space-between;
+}

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

@@ -41,7 +41,7 @@ const ConfirmMappingImport = ({ sourceiModelId, selectedMappings, importing, set
     const [currentlyImporting, setCurrentlyImporting] = react_1.useState("");
     const [validator, showValidationMessage] = useValidator_1.default();
     const [errored, setErrored] = react_1.useState(false);
-    const displayStrings = { ...defaultDisplayStrings, ...userDisplayStrings };
+    const displayStrings = react_1.default.useMemo(() => ({ ...defaultDisplayStrings, ...userDisplayStrings }), [userDisplayStrings]);
     react_1.useEffect(() => {
         setSelectedMappings((selectedMappings) => selectedMappings.map((mapping) => ({
             ...mapping,

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmMappingsImport.js","sourceRoot":"","sources":["../../../../src/widget/components/ConfirmMappingsImport.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,wDAM8B;AAC9B,+CAAmD;AAEnD,wCAAsC;AACtC,oEAAoE;AACpE,sEAAwE;AACxE,mCAAsC;AACtC,yEAAkE;AAClE,iFAAiF;AAEjF,MAAM,qBAAqB,GAAG;IAC5B,QAAQ,EAAE,UAAU;CACrB,CAAC;AAcF,MAAM,oBAAoB,GAAG,CAAC,EAC5B,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,YAAY,EACZ,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,cAAc,EAAE,kBAAkB,GACR,EAAE,EAAE;IAC9B,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,sDAA2B,EAAE,CAAC;IACnE,MAAM,aAAa,GAAG,uCAAgB,EAAE,CAAC;IAEzC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,gBAAQ,CAAS,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,gBAAQ,CAAS,EAAE,CAAC,CAAC;IACzE,MAAM,CAAC,SAAS,EAAE,qBAAqB,CAAC,GAAG,sBAAY,EAAE,CAAC;IAC1D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,gBAAQ,CAAU,KAAK,CAAC,CAAC;IAEvD,MAAM,cAAc,GAAG,EAAE,GAAG,qBAAqB,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAE3E,iBAAS,CAAC,GAAG,EAAE;QACb,mBAAmB,CAAC,CAAC,gBAAgB,EAAE,EAAE,CACvC,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACjC,GAAG,OAAO;YACV,WAAW,EAAE,GAAG,OAAO,CAAC,WAAW,OAAO;SAC3C,CAAC,CAAC,CACJ,CAAC;IACJ,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAE1B,MAAM,YAAY,GAAG,CACnB,CAAsC,EACtC,KAAa,EACb,EAAE;QACF,MAAM,QAAQ,GAAG,CAAC,GAAG,gBAAgB,CAAC,CAAC;QACvC,QAAQ,CAAC,KAAK,CAAC,GAAG;YAChB,GAAG,QAAQ,CAAC,KAAK,CAAC;YAClB,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;SAC5B,CAAC;QACF,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,KAAK,IAAI,EAAE;;QAC1B,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE;YACzB,qBAAqB,CAAC,IAAI,CAAC,CAAC;YAC5B,OAAO;SACR;QACD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI;YACF,KAAK,MAAM,eAAe,IAAI,gBAAgB,EAAE;gBAC9C,qBAAqB,CAAC,MAAA,eAAe,CAAC,WAAW,mCAAI,EAAE,CAAC,CAAC;gBACzD,MAAM,WAAW,GAAG,MAAM,cAAc,EAAE,CAAC;gBAC3C,MAAM,aAAa,CAAC,WAAW,CAC7B,WAAW,EACX,cAAc,EACd,MAAA,eAAe,CAAC,EAAE,mCAAI,EAAE,EACxB;oBACE,cAAc,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE;oBAC9B,WAAW,EAAE,MAAA,eAAe,CAAC,WAAW,mCAAI,EAAE;iBAC/C,CACF,CAAC;gBACF,cAAc,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC;aAClD;SACF;QAAC,OAAO,KAAU,EAAE;YACnB,mBAAW,CAAC,KAAK,CAAC,CAAC;YACnB,UAAU,CAAC,IAAI,CAAC,CAAC;SAClB;IACH,CAAC,CAAC;IAEF,OAAO,CACL,8DACG,SAAS,CAAC,CAAC,CAAC,CACX,uCAAK,SAAS,EAAC,+BAA+B;QAC5C,uCAAK,SAAS,EAAC,yBAAyB;YACtC,uCAAK,SAAS,EAAC,qCAAqC,IAEhD,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,KAAK,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CACnD;gBACE,8BAAC,oBAAI,IAAC,OAAO,EAAC,OAAO,gBAAiB;gBACtC,8BAAC,oBAAI,QAAE,kCAAkC,cAAc,CAAC,QAAQ,CAAC,iBAAiB,EAAE,GAAG,CAAQ,CAC9F,CACJ,CAAC,CAAC,CAAC,CACF;gBACE,8BAAC,oBAAI,IAAC,OAAO,EAAC,OAAO,YAAa;gBAClC,8BAAC,oBAAI,QAAE,iBAAiB,cAAc,CAAC,QAAQ,CAAC,iBAAiB,EAAE,aAAa,CAAQ,CACvF,CACJ,CAAC,CAAC;gBACD;oBACE,8BAAC,oBAAI,IAAC,OAAO,EAAC,OAAO,aAAc;oBACnC,8BAAC,oBAAI,QAAE,mDAAmD,cAAc,CAAC,QAAQ,GAAG,CAAQ,CAC3F,CACH;YACN,8BAAC,8BAAc,IACb,KAAK,EAAE,CAAC,WAAW,GAAG,gBAAgB,CAAC,MAAM,CAAC,GAAG,GAAG,EACpD,MAAM,EACJ,WAAW,KAAK,gBAAgB,CAAC,MAAM;oBACrC,CAAC,CAAC,CAAC,cAAc,EAAE,8BAAC,4CAAsB,IAAC,GAAG,EAAC,GAAG,GAAG,CAAC;oBACtD,CAAC,CAAC;wBACA;4BACE,8BAAC,oBAAI,kBAAe;4BACpB,8BAAC,oCAAoB,IAAC,IAAI,EAAE,kBAAkB,GAAI,CACjD;wBACH,GAAG,WAAW,IAAI,gBAAgB,CAAC,MAAM,EAAE;qBAC5C,EAEL,MAAM,EACJ,CAAC,OAAO,CAAC,CAAC;oBACR,WAAW,KAAK,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,GAEjF,CACE;QACN,uCAAK,SAAS,EAAC,yBAAyB;YACtC,8BAAC,sBAAM,IACL,QAAQ,EAAE,CAAC,OAAO,IAAI,WAAW,KAAK,gBAAgB,CAAC,MAAM,EAC7D,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,CAAC,KAAK,CAAC,CAAC;oBACpB,cAAc,CAAC,CAAC,CAAC,CAAC;oBAClB,qBAAqB,CAAC,EAAE,CAAC,CAAC;oBAC1B,UAAU,CAAC,KAAK,CAAC,CAAC;gBACpB,CAAC,WAGM;YACT,8BAAC,sBAAM,IACL,SAAS,EAAC,iBAAiB,EAC3B,QAAQ,EAAE,CAAC,OAAO,IAAI,WAAW,KAAK,gBAAgB,CAAC,MAAM,EAC7D,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,YAGlB,CACL,CACF,CACP,CAAC,CAAC,CAAC,CACF,uCAAK,SAAS,EAAC,+BAA+B;QAC5C,uCAAK,SAAS,EAAC,8BAA8B;YAC3C,uCAAK,SAAS,EAAC,kCAAkC;gBAC/C,uCAAK,SAAS,EAAC,iBAAiB;oBAC9B,8BAAC,oBAAI,IAAC,OAAO,EAAC,SAAS,IAAE,cAAc,CAAC,QAAQ,CAAQ;oBACxD,8BAAC,oBAAI,IAAC,OAAO,EAAC,SAAS,kBAAmB,CACtC,CACF;YACN,uCAAK,SAAS,EAAC,sBAAsB,IAClC,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACxC,uCAAK,SAAS,EAAC,2BAA2B,EAAC,GAAG,EAAE,OAAO,CAAC,EAAE;gBACxD,uCAAK,SAAS,EAAC,iBAAiB;oBAC9B,8BAAC,4BAAY,IACX,KAAK,EAAE,OAAO,CAAC,WAAW,EAC1B,IAAI,EAAE,WAAW,OAAO,CAAC,EAAE,EAAE,EAC7B,QAAQ,QACR,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;4BAClB,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;4BAC3B,SAAS,CAAC,cAAc,CAAC,WAAW,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;wBACpD,CAAC,EACD,OAAO,EAAE,SAAS,CAAC,OAAO,CACxB,WAAW,OAAO,CAAC,EAAE,EAAE,EACvB,OAAO,CAAC,WAAW,EACnB,gCAAiB,CAClB,EACD,MAAM,EACJ,SAAS,CAAC,OAAO,CACf,WAAW,OAAO,CAAC,EAAE,EAAE,EACvB,OAAO,CAAC,WAAW,EACnB,gCAAiB,CAClB;4BACC,CAAC,CAAC,UAAU;4BACZ,CAAC,CAAC,SAAS,EAEf,MAAM,EAAE,GAAG,EAAE;4BACX,SAAS,CAAC,cAAc,CAAC,WAAW,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;wBACpD,CAAC,EACD,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;4BACvB,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;4BAC3B,SAAS,CAAC,cAAc,CAAC,WAAW,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC;wBACpD,CAAC,GACD;oBACF,2CAAM,OAAO,CAAC,WAAW,CAAO,CAC5B;gBACN,uCAAK,SAAS,EAAC,gBAAgB,GAAG,CAC9B,CACP,CAAC,CACE,CACF;QACN,uCAAK,SAAS,EAAC,yBAAyB;YACtC,8BAAC,sBAAM,IAAC,OAAO,EAAE,MAAM,WAAe;YACtC,8BAAC,sBAAM,IAAC,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,KAAK,IAAI,EAAE,CAAC,QAAQ,EAAE,aAE1D;YACT,8BAAC,sBAAM,IAAC,OAAO,EAAE,QAAQ,aAAiB,CACtC,CACF,CACP,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,oBAAoB,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 {\n  Button,\n  LabeledInput,\n  MiddleTextTruncation,\n  ProgressLinear,\n  Text,\n} from \"@itwin/itwinui-react\";\nimport React, { useEffect, useState } from \"react\";\nimport type { IMappingTyped } from \"./Mapping\";\nimport \"./ConfirmMappingsImport.scss\";\nimport { SvgStatusSuccessHollow } from \"@itwin/itwinui-icons-react\";\nimport useValidator, { NAME_REQUIREMENTS } from \"../hooks/useValidator\";\nimport { handleError } from \"./utils\";\nimport { useMappingClient } from \"./context/MappingClientContext\";\nimport { useGroupingMappingApiConfig } from \"./context/GroupingApiConfigContext\";\n\nconst defaultDisplayStrings = {\n  mappings: \"Mappings\",\n};\n\ninterface ConfirmMappingImportProps {\n  sourceiModelId: string;\n  selectedMappings: IMappingTyped[];\n  importing: boolean;\n  setImporting: React.Dispatch<React.SetStateAction<boolean>>;\n  setSelectedMappings: React.Dispatch<React.SetStateAction<IMappingTyped[]>>;\n  backFn: () => void;\n  onCancel: () => void;\n  onFinish: () => void;\n  displayStrings?: Partial<typeof defaultDisplayStrings>;\n}\n\nconst ConfirmMappingImport = ({\n  sourceiModelId,\n  selectedMappings,\n  importing,\n  setImporting,\n  setSelectedMappings,\n  backFn,\n  onCancel,\n  onFinish,\n  displayStrings: userDisplayStrings,\n}: ConfirmMappingImportProps) => {\n  const { getAccessToken, iModelId } = useGroupingMappingApiConfig();\n  const mappingClient = useMappingClient();\n\n  const [importCount, setImportCount] = useState<number>(0);\n  const [currentlyImporting, setCurrentlyImporting] = useState<string>(\"\");\n  const [validator, showValidationMessage] = useValidator();\n  const [errored, setErrored] = useState<boolean>(false);\n\n  const displayStrings = { ...defaultDisplayStrings, ...userDisplayStrings };\n\n  useEffect(() => {\n    setSelectedMappings((selectedMappings) =>\n      selectedMappings.map((mapping) => ({\n        ...mapping,\n        mappingName: `${mapping.mappingName}_Copy`,\n      })),\n    );\n  }, [setSelectedMappings]);\n\n  const handleChange = (\n    e: React.ChangeEvent<HTMLInputElement>,\n    index: number,\n  ) => {\n    const newState = [...selectedMappings];\n    newState[index] = {\n      ...newState[index],\n      mappingName: e.target.value,\n    };\n    setSelectedMappings(newState);\n  };\n\n  const onImport = async () => {\n    if (!validator.allValid()) {\n      showValidationMessage(true);\n      return;\n    }\n    setImporting(true);\n    try {\n      for (const selectedMapping of selectedMappings) {\n        setCurrentlyImporting(selectedMapping.mappingName ?? \"\");\n        const accessToken = await getAccessToken();\n        await mappingClient.copyMapping(\n          accessToken,\n          sourceiModelId,\n          selectedMapping.id ?? \"\",\n          {\n            targetIModelId: iModelId ?? \"\",\n            mappingName: selectedMapping.mappingName ?? \"\",\n          },\n        );\n        setImportCount((importCount) => importCount + 1);\n      }\n    } catch (error: any) {\n      handleError(error);\n      setErrored(true);\n    }\n  };\n\n  return (\n    <>\n      {importing ? (\n        <div className='gmw-import-progress-container'>\n          <div className='gmw-import-progress-bar'>\n            <div className='gmw-import-progress-bar-description'>\n              {\n                !errored ? importCount !== selectedMappings.length ? (\n                  <>\n                    <Text variant='title'>Importing</Text>\n                    <Text>{`We are currently importing the ${displayStrings.mappings.toLocaleLowerCase()}.`}</Text>\n                  </>\n                ) : (\n                  <>\n                    <Text variant='title'>Done!</Text>\n                    <Text>{`Your imported ${displayStrings.mappings.toLocaleLowerCase()} are ready.`}</Text>\n                  </>\n                ) :\n                  <>\n                    <Text variant='title'>Error!</Text>\n                    <Text>{`Sorry, there was an error importing some or all ${displayStrings.mappings}.`}</Text>\n                  </>}\n            </div>\n            <ProgressLinear\n              value={(importCount / selectedMappings.length) * 100}\n              labels={\n                importCount === selectedMappings.length\n                  ? [\"Import done!\", <SvgStatusSuccessHollow key='0' />]\n                  : [\n                    <>\n                      <Text>Copying</Text>\n                      <MiddleTextTruncation text={currentlyImporting} />\n                    </>,\n                    `${importCount}/${selectedMappings.length}`,\n                  ]\n              }\n              status={\n                !errored ?\n                  importCount === selectedMappings.length ? \"positive\" : undefined : \"negative\"\n              }\n            />\n          </div>\n          <div className='gmw-import-action-panel'>\n            <Button\n              disabled={!errored && importCount !== selectedMappings.length}\n              onClick={() => {\n                setImporting(false);\n                setImportCount(0);\n                setCurrentlyImporting(\"\");\n                setErrored(false);\n              }}\n            >\n              Back\n            </Button>\n            <Button\n              styleType='high-visibility'\n              disabled={!errored && importCount !== selectedMappings.length}\n              onClick={() => onFinish()}\n            >\n              Close\n            </Button>\n          </div>\n        </div>\n      ) : (\n        <div className='gmw-rename-confirm-container '>\n          <div className='gmw-mapping-rename-container'>\n            <div className='gmw-mapping-row-header-container'>\n              <div className='gmw-mapping-row'>\n                <Text variant='leading'>{displayStrings.mappings}</Text>\n                <Text variant='leading'>Description</Text>\n              </div>\n            </div>\n            <div className='gmw-mapping-row-body'>\n              {selectedMappings.map((mapping, index) => (\n                <div className='gmw-mapping-row-container' key={mapping.id}>\n                  <div className='gmw-mapping-row'>\n                    <LabeledInput\n                      value={mapping.mappingName}\n                      name={`mapping_${mapping.id}`}\n                      required\n                      onChange={(event) => {\n                        handleChange(event, index);\n                        validator.showMessageFor(`mapping_${mapping.id}`);\n                      }}\n                      message={validator.message(\n                        `mapping_${mapping.id}`,\n                        mapping.mappingName,\n                        NAME_REQUIREMENTS,\n                      )}\n                      status={\n                        validator.message(\n                          `mapping_${mapping.id}`,\n                          mapping.mappingName,\n                          NAME_REQUIREMENTS,\n                        )\n                          ? \"negative\"\n                          : undefined\n                      }\n                      onBlur={() => {\n                        validator.showMessageFor(`mapping_${mapping.id}`);\n                      }}\n                      onBlurCapture={(event) => {\n                        handleChange(event, index);\n                        validator.showMessageFor(`mapping_${mapping.id}`);\n                      }}\n                    />\n                    <div>{mapping.description}</div>\n                  </div>\n                  <div className='gmw-border-div' />\n                </div>\n              ))}\n            </div>\n          </div>\n          <div className='gmw-import-action-panel'>\n            <Button onClick={backFn}>Back</Button>\n            <Button styleType='high-visibility' onClick={async () => onImport()}>\n              Import\n            </Button>\n            <Button onClick={onCancel}>Cancel</Button>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport default ConfirmMappingImport;\n"]}
+{"version":3,"file":"ConfirmMappingsImport.js","sourceRoot":"","sources":["../../../../src/widget/components/ConfirmMappingsImport.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 {\n  Button,\n  LabeledInput,\n  MiddleTextTruncation,\n  ProgressLinear,\n  Text,\n} from \"@itwin/itwinui-react\";\nimport React, { useEffect, useState } from \"react\";\nimport type { IMappingTyped } from \"./Mapping\";\nimport \"./ConfirmMappingsImport.scss\";\nimport { SvgStatusSuccessHollow } from \"@itwin/itwinui-icons-react\";\nimport useValidator, { NAME_REQUIREMENTS } from \"../hooks/useValidator\";\nimport { handleError } from \"./utils\";\nimport { useMappingClient } from \"./context/MappingClientContext\";\nimport { useGroupingMappingApiConfig } from \"./context/GroupingApiConfigContext\";\n\nconst defaultDisplayStrings = {\n  mappings: \"Mappings\",\n};\n\ninterface ConfirmMappingImportProps {\n  sourceiModelId: string;\n  selectedMappings: IMappingTyped[];\n  importing: boolean;\n  setImporting: React.Dispatch<React.SetStateAction<boolean>>;\n  setSelectedMappings: React.Dispatch<React.SetStateAction<IMappingTyped[]>>;\n  backFn: () => void;\n  onCancel: () => void;\n  onFinish: () => void;\n  displayStrings?: Partial<typeof defaultDisplayStrings>;\n}\n\nconst ConfirmMappingImport = ({\n  sourceiModelId,\n  selectedMappings,\n  importing,\n  setImporting,\n  setSelectedMappings,\n  backFn,\n  onCancel,\n  onFinish,\n  displayStrings: userDisplayStrings,\n}: ConfirmMappingImportProps) => {\n  const { getAccessToken, iModelId } = useGroupingMappingApiConfig();\n  const mappingClient = useMappingClient();\n\n  const [importCount, setImportCount] = useState<number>(0);\n  const [currentlyImporting, setCurrentlyImporting] = useState<string>(\"\");\n  const [validator, showValidationMessage] = useValidator();\n  const [errored, setErrored] = useState<boolean>(false);\n\n  const displayStrings = React.useMemo(\n    () => ({ ...defaultDisplayStrings, ...userDisplayStrings }),\n    [userDisplayStrings]\n  );\n\n  useEffect(() => {\n    setSelectedMappings((selectedMappings) =>\n      selectedMappings.map((mapping) => ({\n        ...mapping,\n        mappingName: `${mapping.mappingName}_Copy`,\n      })),\n    );\n  }, [setSelectedMappings]);\n\n  const handleChange = (\n    e: React.ChangeEvent<HTMLInputElement>,\n    index: number,\n  ) => {\n    const newState = [...selectedMappings];\n    newState[index] = {\n      ...newState[index],\n      mappingName: e.target.value,\n    };\n    setSelectedMappings(newState);\n  };\n\n  const onImport = async () => {\n    if (!validator.allValid()) {\n      showValidationMessage(true);\n      return;\n    }\n    setImporting(true);\n    try {\n      for (const selectedMapping of selectedMappings) {\n        setCurrentlyImporting(selectedMapping.mappingName ?? \"\");\n        const accessToken = await getAccessToken();\n        await mappingClient.copyMapping(\n          accessToken,\n          sourceiModelId,\n          selectedMapping.id ?? \"\",\n          {\n            targetIModelId: iModelId ?? \"\",\n            mappingName: selectedMapping.mappingName ?? \"\",\n          },\n        );\n        setImportCount((importCount) => importCount + 1);\n      }\n    } catch (error: any) {\n      handleError(error);\n      setErrored(true);\n    }\n  };\n\n  return (\n    <>\n      {importing ? (\n        <div className='gmw-import-progress-container'>\n          <div className='gmw-import-progress-bar'>\n            <div className='gmw-import-progress-bar-description'>\n              {\n                !errored ? importCount !== selectedMappings.length ? (\n                  <>\n                    <Text variant='title'>Importing</Text>\n                    <Text>{`We are currently importing the ${displayStrings.mappings.toLocaleLowerCase()}.`}</Text>\n                  </>\n                ) : (\n                  <>\n                    <Text variant='title'>Done!</Text>\n                    <Text>{`Your imported ${displayStrings.mappings.toLocaleLowerCase()} are ready.`}</Text>\n                  </>\n                ) :\n                  <>\n                    <Text variant='title'>Error!</Text>\n                    <Text>{`Sorry, there was an error importing some or all ${displayStrings.mappings}.`}</Text>\n                  </>}\n            </div>\n            <ProgressLinear\n              value={(importCount / selectedMappings.length) * 100}\n              labels={\n                importCount === selectedMappings.length\n                  ? [\"Import done!\", <SvgStatusSuccessHollow key='0' />]\n                  : [\n                    <>\n                      <Text>Copying</Text>\n                      <MiddleTextTruncation text={currentlyImporting} />\n                    </>,\n                    `${importCount}/${selectedMappings.length}`,\n                  ]\n              }\n              status={\n                !errored ?\n                  importCount === selectedMappings.length ? \"positive\" : undefined : \"negative\"\n              }\n            />\n          </div>\n          <div className='gmw-import-action-panel'>\n            <Button\n              disabled={!errored && importCount !== selectedMappings.length}\n              onClick={() => {\n                setImporting(false);\n                setImportCount(0);\n                setCurrentlyImporting(\"\");\n                setErrored(false);\n              }}\n            >\n              Back\n            </Button>\n            <Button\n              styleType='high-visibility'\n              disabled={!errored && importCount !== selectedMappings.length}\n              onClick={() => onFinish()}\n            >\n              Close\n            </Button>\n          </div>\n        </div>\n      ) : (\n        <div className='gmw-rename-confirm-container '>\n          <div className='gmw-mapping-rename-container'>\n            <div className='gmw-mapping-row-header-container'>\n              <div className='gmw-mapping-row'>\n                <Text variant='leading'>{displayStrings.mappings}</Text>\n                <Text variant='leading'>Description</Text>\n              </div>\n            </div>\n            <div className='gmw-mapping-row-body'>\n              {selectedMappings.map((mapping, index) => (\n                <div className='gmw-mapping-row-container' key={mapping.id}>\n                  <div className='gmw-mapping-row'>\n                    <LabeledInput\n                      value={mapping.mappingName}\n                      name={`mapping_${mapping.id}`}\n                      required\n                      onChange={(event) => {\n                        handleChange(event, index);\n                        validator.showMessageFor(`mapping_${mapping.id}`);\n                      }}\n                      message={validator.message(\n                        `mapping_${mapping.id}`,\n                        mapping.mappingName,\n                        NAME_REQUIREMENTS,\n                      )}\n                      status={\n                        validator.message(\n                          `mapping_${mapping.id}`,\n                          mapping.mappingName,\n                          NAME_REQUIREMENTS,\n                        )\n                          ? \"negative\"\n                          : undefined\n                      }\n                      onBlur={() => {\n                        validator.showMessageFor(`mapping_${mapping.id}`);\n                      }}\n                      onBlurCapture={(event) => {\n                        handleChange(event, index);\n                        validator.showMessageFor(`mapping_${mapping.id}`);\n                      }}\n                    />\n                    <div>{mapping.description}</div>\n                  </div>\n                  <div className='gmw-border-div' />\n                </div>\n              ))}\n            </div>\n          </div>\n          <div className='gmw-import-action-panel'>\n            <Button onClick={backFn}>Back</Button>\n            <Button styleType='high-visibility' onClick={async () => onImport()}>\n              Import\n            </Button>\n            <Button onClick={onCancel}>Cancel</Button>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n\nexport default ConfirmMappingImport;\n"]}

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

@@ -29,20 +29,27 @@ const itwinui_react_1 = require("@itwin/itwinui-react");
 const react_1 = __importStar(require("react"));
 const utils_1 = require("./utils");
 require("./GroupAction.scss");
-const ActionPanel_1 = __importDefault(require("./ActionPanel"));
-const useValidator_1 = __importStar(require("../hooks/useValidator"));
+const useValidator_1 = __importDefault(require("../hooks/useValidator"));
 const viewerUtils_1 = require("./viewerUtils");
 const GroupingApiConfigContext_1 = require("./context/GroupingApiConfigContext");
 const MappingClientContext_1 = require("./context/MappingClientContext");
 const GroupingMappingCustomUIContext_1 = require("./context/GroupingMappingCustomUIContext");
-const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
 const GroupingMappingCustomUI_1 = require("./customUI/GroupingMappingCustomUI");
 const GroupHilitedElementsContext_1 = require("./context/GroupHilitedElementsContext");
 const groupsHelpers_1 = require("./groupsHelpers");
+const QueryBuilderStep_1 = require("./QueryBuilderStep");
+const GroupDetailsStep_1 = require("./GroupDetailsStep");
+const QueryBuilderActionPanel_1 = require("./QueryBuilderActionPanel");
+const GroupDetailsActionPanel_1 = require("./GroupDetailsActionPanel");
 const defaultDisplayStrings = {
     groupDetails: "Group Details",
     groupBy: "Group By",
 };
+var GroupActionStep;
+(function (GroupActionStep) {
+    GroupActionStep[GroupActionStep["QueryBuilder"] = 0] = "QueryBuilder";
+    GroupActionStep[GroupActionStep["GroupDetails"] = 1] = "GroupDetails";
+})(GroupActionStep || (GroupActionStep = {}));
 const GroupAction = (props) => {
     var _a, _b, _c, _d;
     const iModelConnection = appui_react_1.useActiveIModelConnection();
@@ -57,37 +64,28 @@ const GroupAction = (props) => {
     });
     const [query, setQuery] = react_1.useState("");
     const [simpleSelectionQuery, setSimpleSelectionQuery] = react_1.useState("");
-    const [validator, showValidationMessage] = useValidator_1.default();
+    const [validator, setShowValidationMessage] = useValidator_1.default();
     const [isLoading, setIsLoading] = react_1.useState(false);
     const [isRendering, setIsRendering] = react_1.useState(false);
     const [queryGenerationType, setQueryGenerationType] = react_1.useState(props.queryGenerationType);
     const isUpdating = isLoading || isRendering;
+    const [currentStep, setCurrentStep] = react_1.default.useState(GroupActionStep.QueryBuilder);
     react_1.useEffect(() => {
         if (!iModelConnection) {
             throw new Error("This component requires an active iModelConnection.");
         }
     }, [iModelConnection]);
-    const displayStrings = { ...defaultDisplayStrings, ...props.displayStrings };
+    const displayStrings = react_1.default.useMemo(() => ({ ...defaultDisplayStrings, ...props.displayStrings }), [props.displayStrings]);
     react_1.useEffect(() => setQueryGenerationType(props.queryGenerationType), [props.queryGenerationType]);
-    const resetView = async () => {
-        if (groups.length > 0) {
-            if (showGroupColor) {
-                await groupsHelpers_1.visualizeGroupColors(iModelConnection, groups, groups, hiddenGroupsIds, hilitedElementsQueryCache);
-            }
-            else {
-                viewerUtils_1.clearOverriddenElements();
-            }
+    const resetView = react_1.useCallback(async () => {
+        if (showGroupColor) {
+            await groupsHelpers_1.visualizeGroupColors(iModelConnection, groups, hiddenGroupsIds, hilitedElementsQueryCache);
+        }
+        else {
+            viewerUtils_1.clearOverriddenElements();
         }
         viewerUtils_1.clearEmphasizedElements();
-    };
-    const changeGroupByType = async (event) => {
-        const { target: { value }, } = event;
-        setQueryGenerationType(value);
-        presentation_frontend_1.Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
-        setQuery("");
-        setSimpleSelectionQuery("");
-        await resetView();
-    };
+    }, [groups, hiddenGroupsIds, hilitedElementsQueryCache, iModelConnection, showGroupColor]);
     react_1.useEffect(() => {
         const removeListener = presentation_frontend_1.Presentation.selection.selectionChange.addListener(async (evt, selectionProvider) => {
             if (queryGenerationType === "Selection") {
@@ -128,7 +126,7 @@ const GroupAction = (props) => {
     const save = react_1.useCallback(async () => {
         var _a, _b, _c, _d, _e;
         if (!validator.allValid()) {
-            showValidationMessage(true);
+            setShowValidationMessage(true);
             return;
         }
         try {
@@ -146,6 +144,8 @@ const GroupAction = (props) => {
                 groupName: (_c = (_b = props.group) === null || _b === void 0 ? void 0 : _b.groupName) !== null && _c !== void 0 ? _c : "",
                 description: (_e = (_d = props.group) === null || _d === void 0 ? void 0 : _d.description) !== null && _e !== void 0 ? _e : "",
             });
+            setCurrentStep(GroupActionStep.QueryBuilder);
+            setShowValidationMessage(false);
             props.onSaveSuccess();
         }
         catch (error) {
@@ -154,54 +154,38 @@ const GroupAction = (props) => {
         finally {
             setIsLoading(false);
         }
-    }, [validator, showValidationMessage, query, simpleSelectionQuery, getAccessToken, props, mappingClient, iModelId, details, iModelConnection]);
-    const createQueryBuilderComponent = () => {
-        if (queryGenerationType && queryGenerationType.length > 0) {
-            const selectedCustomUI = groupUIs.find((e) => e.name === queryGenerationType);
-            if (selectedCustomUI) {
-                return react_1.default.createElement(selectedCustomUI.uiComponent, {
-                    updateQuery: setQuery,
-                    isUpdating,
-                    resetView,
-                });
-            }
-        }
-        return react_1.default.createElement(utils_1.EmptyMessage, { message: 'No query generation method selected. ' });
-    };
+    }, [validator, setShowValidationMessage, query, simpleSelectionQuery, getAccessToken, props, mappingClient, iModelId, details, iModelConnection]);
     const isBlockingActions = !(details.groupName &&
         (query || simpleSelectionQuery) &&
         !isRendering &&
         !isLoading);
-    const getRadioTileComponent = (icon, value, label) => {
-        return (react_1.default.createElement(itwinui_react_1.RadioTile, { name: "groupby", icon: icon, key: value, onChange: changeGroupByType, value: value, label: label, disabled: isUpdating, checked: queryGenerationType === value }));
-    };
+    const getOptions = react_1.useMemo(() => groupUIs.map((ui) => ({
+        label: ui.displayLabel,
+        value: ui.name,
+        icon: ui.icon,
+    })), [groupUIs]);
+    const onChange = react_1.useCallback(async (value) => {
+        setQueryGenerationType(value);
+        presentation_frontend_1.Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
+        setQuery("");
+        setSimpleSelectionQuery("");
+        await resetView();
+    }, [iModelConnection, resetView]);
+    const isQueryBuilderStep = currentStep === GroupActionStep.QueryBuilder;
+    const isGroupDetailsStep = currentStep === GroupActionStep.GroupDetails;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: 'gmw-group-add-modify-container' },
-            react_1.default.createElement(itwinui_react_1.Fieldset, { legend: displayStrings.groupDetails, className: 'gmw-group-details' },
-                react_1.default.createElement(itwinui_react_1.Small, { className: 'gmw-field-legend' }, "Asterisk * indicates mandatory fields."),
-                react_1.default.createElement(itwinui_react_1.LabeledInput, { id: 'groupName', name: 'groupName', label: 'Name', value: details.groupName, required: true, onChange: (event) => {
-                        utils_1.handleInputChange(event, details, setDetails);
-                        validator.showMessageFor("groupName");
-                    }, message: validator.message("groupName", details.groupName, useValidator_1.NAME_REQUIREMENTS), status: validator.message("groupName", details.groupName, useValidator_1.NAME_REQUIREMENTS)
-                        ? "negative"
-                        : undefined, onBlur: () => {
-                        validator.showMessageFor("groupName");
-                    }, onBlurCapture: (event) => {
-                        utils_1.handleInputChange(event, details, setDetails);
-                        validator.showMessageFor("groupName");
-                    } }),
-                react_1.default.createElement(itwinui_react_1.LabeledInput, { id: 'description', name: 'description', label: 'Description', value: details.description, onChange: (event) => {
-                        utils_1.handleInputChange(event, details, setDetails);
-                    } })),
-            react_1.default.createElement(itwinui_react_1.Fieldset, { legend: displayStrings.groupBy, className: 'gmw-query-builder-container' },
-                react_1.default.createElement(itwinui_react_1.RadioTileGroup, { className: 'gmw-radio-group-tile', required: true }, groupUIs.map((ext) => { var _a; return getRadioTileComponent((_a = ext.icon) !== null && _a !== void 0 ? _a : react_1.default.createElement(itwinui_icons_react_1.SvgAdd, null), ext.name, ext.displayLabel); })),
-                queryGenerationType && createQueryBuilderComponent())),
-        react_1.default.createElement(ActionPanel_1.default, { onSave: async () => {
-                await save();
-            }, onCancel: props.onClickCancel ? async () => {
-                presentation_frontend_1.Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
-                props.onClickCancel && props.onClickCancel();
-            } : undefined, isSavingDisabled: isBlockingActions, isLoading: isLoading })));
+        react_1.default.createElement("div", { className: "gmw-group-add-modify-container" },
+            react_1.default.createElement(QueryBuilderStep_1.QueryBuilderStep, { isHidden: !isQueryBuilderStep, queryGenerationType: queryGenerationType, groupUIs: groupUIs, isUpdating: isUpdating, resetView: resetView, setQuery: setQuery, onChange: onChange, getOptions: getOptions, displayStrings: { ...displayStrings }, group: props.group }),
+            isGroupDetailsStep && react_1.default.createElement(GroupDetailsStep_1.GroupDetailsStep, { details: details, setDetails: setDetails, validator: validator, displayStrings: { ...displayStrings } })),
+        react_1.default.createElement("div", { className: 'gmw-action-panel' },
+            isLoading &&
+                react_1.default.createElement(utils_1.LoadingSpinner, null),
+            isQueryBuilderStep && (react_1.default.createElement(QueryBuilderActionPanel_1.QueryBuilderActionPanel, { onClickNext: () => setCurrentStep(GroupActionStep.GroupDetails) })),
+            isGroupDetailsStep && (react_1.default.createElement(GroupDetailsActionPanel_1.GroupDetailsActionPanel, { isSaveDisabled: isBlockingActions, onClickSave: save, onClickBack: () => setCurrentStep(GroupActionStep.QueryBuilder) })),
+            props.onClickCancel && react_1.default.createElement(itwinui_react_1.Button, { type: 'button', id: 'cancel', onClick: async () => {
+                    presentation_frontend_1.Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
+                    props.onClickCancel && props.onClickCancel();
+                } }, "Cancel"))));
 };
 exports.GroupAction = GroupAction;
 //# sourceMappingURL=GroupAction.js.map

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

@@ -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 {\n  Fieldset,\n  LabeledInput,\n  RadioTile,\n  RadioTileGroup,\n  Small,\n  toaster,\n} from \"@itwin/itwinui-react\";\nimport type { ReactElement } from \"react\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport {\n  EmptyMessage,\n  handleError,\n  handleInputChange,\n} from \"./utils\";\nimport \"./GroupAction.scss\";\nimport ActionPanel from \"./ActionPanel\";\nimport useValidator, { NAME_REQUIREMENTS } 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 { SvgAdd } from \"@itwin/itwinui-icons-react\";\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\";\n\nconst defaultDisplayStrings = {\n  groupDetails: \"Group Details\",\n  groupBy: \"Group By\",\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, showValidationMessage] = 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\n  useEffect(() => {\n    if (!iModelConnection) {\n      throw new Error(\"This component requires an active iModelConnection.\");\n    }\n  }, [iModelConnection]);\n\n  const displayStrings = { ...defaultDisplayStrings, ...props.displayStrings };\n\n  useEffect(() => setQueryGenerationType(props.queryGenerationType), [props.queryGenerationType]);\n\n  const resetView = async () => {\n    if (groups.length > 0) {\n      if (showGroupColor) {\n        await visualizeGroupColors(iModelConnection, groups, groups, hiddenGroupsIds, hilitedElementsQueryCache);\n      } else {\n        clearOverriddenElements();\n      }\n    }\n    clearEmphasizedElements();\n  };\n\n  const changeGroupByType = async (\n    event: React.ChangeEvent<HTMLInputElement>,\n  ) => {\n    const {\n      target: { value },\n    } = event;\n    setQueryGenerationType(value);\n    Presentation.selection.clearSelection(\n      \"GroupingMappingWidget\",\n      iModelConnection,\n    );\n    setQuery(\"\");\n    setSimpleSelectionQuery(\"\");\n    await resetView();\n  };\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\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      showValidationMessage(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      props.onSaveSuccess();\n    } catch (error: any) {\n      handleError(error.status);\n    } finally {\n      setIsLoading(false);\n    }\n  }, [validator, showValidationMessage, query, simpleSelectionQuery, getAccessToken, props, mappingClient, iModelId, details, iModelConnection]);\n\n  const createQueryBuilderComponent = () => {\n    if (queryGenerationType && queryGenerationType.length > 0) {\n      const selectedCustomUI = groupUIs.find(\n        (e) => e.name === queryGenerationType,\n      );\n      if (selectedCustomUI) {\n        return React.createElement(selectedCustomUI.uiComponent, {\n          updateQuery: setQuery,\n          isUpdating,\n          resetView,\n        });\n      }\n    }\n    return <EmptyMessage message='No query generation method selected. ' />;\n  };\n\n  const isBlockingActions = !(\n    details.groupName &&\n    (query || simpleSelectionQuery) &&\n    !isRendering &&\n    !isLoading\n  );\n\n  const getRadioTileComponent = (\n    icon: ReactElement,\n    value: string,\n    label: string,\n  ) => {\n    return (\n      <RadioTile\n        name={\"groupby\"}\n        icon={icon}\n        key={value}\n        onChange={changeGroupByType}\n        value={value}\n        label={label}\n        disabled={isUpdating}\n        checked={queryGenerationType === value}\n      />\n    );\n  };\n\n  return (\n    <>\n      <div className='gmw-group-add-modify-container'>\n        <Fieldset legend={displayStrings.groupDetails} className='gmw-group-details'>\n          <Small className='gmw-field-legend'>\n            Asterisk * indicates mandatory fields.\n          </Small>\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        </Fieldset>\n        <Fieldset legend={displayStrings.groupBy} className='gmw-query-builder-container'>\n          <RadioTileGroup className='gmw-radio-group-tile' required>\n            {groupUIs.map((ext) => getRadioTileComponent(ext.icon ?? <SvgAdd />, ext.name, ext.displayLabel))}\n          </RadioTileGroup>\n          {queryGenerationType && createQueryBuilderComponent()}\n        </Fieldset>\n      </div>\n      <ActionPanel\n        onSave={async () => {\n          await save();\n        }}\n        onCancel={props.onClickCancel ? async () => {\n          Presentation.selection.clearSelection(\n            \"GroupingMappingWidget\",\n            iModelConnection,\n          );\n          props.onClickCancel && props.onClickCancel();\n        } : undefined}\n        isSavingDisabled={isBlockingActions}\n        isLoading={isLoading}\n      />\n    </>\n  );\n};\n"]}
+{"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/cjs/widget/components/GroupAction.scss

@@ -7,24 +7,6 @@
 .gmw-group-add-modify-container {
   display: flex;
   flex-direction: column;
-  gap: $iui-baseline;
   overflow-x: auto;
   height: 100%;
-
-  .gmw-group-details {
-    display: flex;
-    flex-direction: column;
-    gap: $iui-baseline;
-  }
-
-  .gmw-query-builder-container {
-    display: flex;
-    flex-direction: column;
-    gap: $iui-baseline;
-
-    .gmw-radio-group-tile {
-      display: flex;
-      justify-content: center;
-    }
-  }
 }

package/lib/cjs/widget/components/GroupColorLegend.d.ts

@@ -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/cjs/widget/components/GroupColorLegend.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupColorLegend = void 0;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const react_1 = __importDefault(require("react"));
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const groupsHelpers_1 = require("./groupsHelpers");
+require("./GroupColorLegend.scss");
+const GroupColorLegend = ({ group, groups }) => (react_1.default.createElement(itwinui_react_1.IconButton, { styleType: "borderless" },
+    react_1.default.createElement("div", { className: "gmw-color-legend", style: {
+            backgroundColor: groupsHelpers_1.getGroupColor(groups.findIndex((g) => g.id === group.id)),
+        } })));
+exports.GroupColorLegend = GroupColorLegend;
+//# sourceMappingURL=GroupColorLegend.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupColorLegend.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupColorLegend.tsx"],"names":[],"mappings":";;;;;;AAAA;;;+FAG+F;AAC/F,kDAA0B;AAC1B,wDAAkD;AAElD,mDAAgD;AAChD,mCAAiC;AAO1B,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAyB,EAAE,EAAE,CAAC,CAC5E,8BAAC,0BAAU,IAAC,SAAS,EAAC,YAAY;IAChC,uCACE,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAE;YACL,eAAe,EAAE,6BAAa,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,EAAE,CAAC,CAAC;SAC3E,GACD,CACS,CACd,CAAC;AATW,QAAA,gBAAgB,oBAS3B","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/cjs/widget/components/GroupColorLegend.scss

@@ -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/cjs/widget/components/GroupColorToggle.d.ts

@@ -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/cjs/widget/components/GroupColorToggle.js

@@ -0,0 +1,69 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupColorToggle = void 0;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+const react_1 = __importStar(require("react"));
+const appui_react_1 = require("@itwin/appui-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const viewerUtils_1 = require("./viewerUtils");
+const groupsHelpers_1 = require("./groupsHelpers");
+const presentation_frontend_1 = require("@itwin/presentation-frontend");
+const GroupHilitedElementsContext_1 = require("./context/GroupHilitedElementsContext");
+const PropertiesContext_1 = require("./context/PropertiesContext");
+const GroupColorToggle = ({ color, group, ...rest }) => {
+    const [isLoading, setIsLoading] = react_1.useState(false);
+    const iModelConnection = appui_react_1.useActiveIModelConnection();
+    if (!iModelConnection) {
+        throw new Error("This component requires an active iModelConnection.");
+    }
+    const { hilitedElementsQueryCache } = GroupHilitedElementsContext_1.useGroupHilitedElementsContext();
+    const { showGroupColor, setShowGroupColor } = PropertiesContext_1.usePropertiesContext();
+    react_1.useEffect(() => {
+        const visualize = async () => {
+            try {
+                setIsLoading(true);
+                viewerUtils_1.clearEmphasizedOverriddenElements();
+                if (showGroupColor) {
+                    const result = await groupsHelpers_1.getHiliteIdsAndKeysetFromGroup(iModelConnection, group, hilitedElementsQueryCache);
+                    presentation_frontend_1.Presentation.selection.clearSelection("GroupingMappingWidget", iModelConnection);
+                    viewerUtils_1.visualizeElements(result.ids, color);
+                    await viewerUtils_1.zoomToElements(result.ids);
+                }
+            }
+            catch (error) {
+                itwinui_react_1.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_1.default.createElement(itwinui_react_1.ToggleSwitch, { label: "Color Group", disabled: isLoading, checked: showGroupColor, onChange: () => setShowGroupColor((b) => !b), ...rest }));
+};
+exports.GroupColorToggle = GroupColorToggle;
+//# sourceMappingURL=GroupColorToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupColorToggle.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupColorToggle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;;+FAG+F;AAC/F,+CAAmD;AACnD,oDAA+D;AAE/D,wDAA6D;AAE7D,+CAAqG;AACrG,mDAAiE;AACjE,wEAA4D;AAC5D,uFAAuF;AACvF,mEAAmE;AAO5D,MAAM,gBAAgB,GAAG,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,GAAG,IAAI,EACe,EAAE,EAAE;IAC1B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,gBAAQ,CAAU,KAAK,CAAC,CAAC;IAC3D,MAAM,gBAAgB,GAAG,uCAAyB,EAAE,CAAC;IACrD,IAAI,CAAC,gBAAgB,EAAE;QACrB,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;KACxE;IACD,MAAM,EAAE,yBAAyB,EAAE,GAAG,4DAA8B,EAAE,CAAC;IACvE,MAAM,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,wCAAoB,EAAE,CAAC;IAErE,iBAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;YAC3B,IAAI;gBACF,YAAY,CAAC,IAAI,CAAC,CAAC;gBACnB,+CAAiC,EAAE,CAAC;gBACpC,IAAI,cAAc,EAAE;oBAClB,MAAM,MAAM,GAAG,MAAM,8CAA8B,CAAC,gBAAgB,EAAE,KAAK,EAAE,yBAAyB,CAAC,CAAC;oBACxG,oCAAY,CAAC,SAAS,CAAC,cAAc,CACnC,uBAAuB,EACvB,gBAAgB,CACjB,CAAC;oBACF,+BAAiB,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;oBACrC,MAAM,4BAAc,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;iBAClC;aACF;YAAC,OAAO,KAAK,EAAE;gBACd,uBAAO,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,8BAAC,4BAAY,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;AA/CW,QAAA,gBAAgB,oBA+C3B","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/cjs/widget/components/GroupDetails.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type SimpleReactValidator from "simple-react-validator";
+export interface GroupDetailsType {
+    groupName: string;
+    description: string;
+}
+export interface GroupDetailsProps {
+    details: GroupDetailsType;
+    setDetails: (newDetails: GroupDetailsType) => void;
+    validator: SimpleReactValidator;
+}
+export declare const GroupDetails: ({ details, setDetails, validator, }: GroupDetailsProps) => JSX.Element;
+//# sourceMappingURL=GroupDetails.d.ts.map