@itwin/grouping-mapping-widget 0.2.0

package/lib/esm/widget/components/GroupQueryBuilderContainer.js

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import React, { useEffect } from "react";
+import { useActiveIModelConnection } from "@itwin/appui-react";
+import { KeySet } from "@itwin/presentation-common";
+import { GroupQueryBuilderApi } from "../../api/GroupQueryBuilderApi";
+import { PropertyGridWrapperApp } from "./property-grid/PropertyGridWrapper";
+import { GroupQueryBuilderContext } from "./GroupQueryBuilderContext";
+import { Button } from "@itwin/itwinui-react";
+import "./GroupQueryBuilder.scss";
+export const GroupQueryBuilderContainer = () => {
+    const iModelConnection = useActiveIModelConnection();
+    const context = React.useContext(GroupQueryBuilderContext);
+    const [keysState, setKeysState] = React.useState(new KeySet());
+    const [selected, SetSelected] = React.useState(false);
+    useEffect(() => {
+        const _onSelectionChanged = async (evt, selectionProvider) => {
+            SetSelected(true);
+            context.setCurrentPropertyList([]);
+            const selection = selectionProvider.getSelection(evt.imodel, evt.level);
+            const keys = new KeySet(selection);
+            setKeysState(keys);
+        };
+        if (iModelConnection) {
+            GroupQueryBuilderApi.addSelectionListener(_onSelectionChanged);
+        }
+        return () => {
+            GroupQueryBuilderApi.removeSelectionListener();
+        };
+    }, [iModelConnection, context]);
+    const _onClickResetButton = async () => {
+        context.setQuery("");
+        context.queryBuilder.query = undefined;
+        context.setCurrentPropertyList([]);
+    };
+    return (React.createElement("div", { className: 'find-similar-container' },
+        React.createElement(PropertyGridWrapperApp, { keys: keysState, imodel: iModelConnection }),
+        selected && (React.createElement("div", { className: 'button-container' },
+            React.createElement(Button, { styleType: 'default', size: 'small', className: 'reset-button', onClick: _onClickResetButton }, "Reset")))));
+};
+//# sourceMappingURL=GroupQueryBuilderContainer.js.map

package/lib/esm/widget/components/GroupQueryBuilderContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupQueryBuilderContainer.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupQueryBuilderContainer.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAK/D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,0BAA0B,CAAC;AAElC,MAAM,CAAC,MAAM,0BAA0B,GAA4B,GAAG,EAAE;IACtE,MAAM,gBAAgB,GAAG,yBAAyB,EAAE,CAAC;IACrD,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,wBAAwB,CAAC,CAAC;IAE3D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,IAAI,MAAM,EAAE,CAAC,CAAC;IACvE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE/D,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,mBAAmB,GAAG,KAAK,EAC/B,GAA6B,EAC7B,iBAAqC,EACrC,EAAE;YACF,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,OAAO,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC;YAEnC,MAAM,SAAS,GAAG,iBAAiB,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC;YACxE,MAAM,IAAI,GAAG,IAAI,MAAM,CAAC,SAAS,CAAC,CAAC;YACnC,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,CAAC;QAEF,IAAI,gBAAgB,EAAE;YACpB,oBAAoB,CAAC,oBAAoB,CAAC,mBAAmB,CAAC,CAAC;SAChE;QACD,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,uBAAuB,EAAE,CAAC;QACjD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;IAEhC,MAAM,mBAAmB,GAAG,KAAK,IAAI,EAAE;QACrC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;QACrB,OAAO,CAAC,YAAY,CAAC,KAAK,GAAG,SAAS,CAAC;QACvC,OAAO,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,wBAAwB;QACrC,oBAAC,sBAAsB,IAAC,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,gBAAgB,GAAI;QACpE,QAAQ,IAAI,CACX,6BAAK,SAAS,EAAC,kBAAkB;YAC/B,oBAAC,MAAM,IACL,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,mBAAmB,YAGrB,CACL,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\nimport React, { useEffect } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport type {\n  ISelectionProvider,\n  SelectionChangeEventArgs,\n} from \"@itwin/presentation-frontend\";\nimport { KeySet } from \"@itwin/presentation-common\";\nimport { GroupQueryBuilderApi } from \"../../api/GroupQueryBuilderApi\";\nimport { PropertyGridWrapperApp } from \"./property-grid/PropertyGridWrapper\";\nimport { GroupQueryBuilderContext } from \"./GroupQueryBuilderContext\";\nimport { Button } from \"@itwin/itwinui-react\";\nimport \"./GroupQueryBuilder.scss\";\n\nexport const GroupQueryBuilderContainer: React.FunctionComponent = () => {\n  const iModelConnection = useActiveIModelConnection();\n  const context = React.useContext(GroupQueryBuilderContext);\n\n  const [keysState, setKeysState] = React.useState<KeySet>(new KeySet());\n  const [selected, SetSelected] = React.useState<boolean>(false);\n\n  useEffect(() => {\n    const _onSelectionChanged = async (\n      evt: SelectionChangeEventArgs,\n      selectionProvider: ISelectionProvider,\n    ) => {\n      SetSelected(true);\n      context.setCurrentPropertyList([]);\n\n      const selection = selectionProvider.getSelection(evt.imodel, evt.level);\n      const keys = new KeySet(selection);\n      setKeysState(keys);\n    };\n\n    if (iModelConnection) {\n      GroupQueryBuilderApi.addSelectionListener(_onSelectionChanged);\n    }\n    return () => {\n      GroupQueryBuilderApi.removeSelectionListener();\n    };\n  }, [iModelConnection, context]);\n\n  const _onClickResetButton = async () => {\n    context.setQuery(\"\");\n    context.queryBuilder.query = undefined;\n    context.setCurrentPropertyList([]);\n  };\n\n  return (\n    <div className='find-similar-container'>\n      <PropertyGridWrapperApp keys={keysState} imodel={iModelConnection} />\n      {selected && (\n        <div className='button-container'>\n          <Button\n            styleType='default'\n            size='small'\n            className='reset-button'\n            onClick={_onClickResetButton}\n          >\n            Reset\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/lib/esm/widget/components/GroupQueryBuilderContext.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { PropertyRecord } from "@itwin/appui-abstract";
+import { QueryBuilder } from "./QueryBuilder";
+export interface PropertySelection {
+    currentPropertyList: PropertyRecord[];
+    setCurrentPropertyList: React.Dispatch<React.SetStateAction<PropertyRecord[]>>;
+    query: string;
+    setQuery: React.Dispatch<React.SetStateAction<string>>;
+    queryBuilder: QueryBuilder;
+    setQueryBuilder: React.Dispatch<React.SetStateAction<QueryBuilder>>;
+}
+export declare const GroupQueryBuilderContext: React.Context<PropertySelection>;
+//# sourceMappingURL=GroupQueryBuilderContext.d.ts.map

package/lib/esm/widget/components/GroupQueryBuilderContext.js

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { QueryBuilder } from "./QueryBuilder";
+export const GroupQueryBuilderContext = React.createContext({
+    currentPropertyList: [],
+    setCurrentPropertyList: () => [],
+    query: "",
+    setQuery: () => "",
+    queryBuilder: new QueryBuilder(undefined),
+    setQueryBuilder: () => new QueryBuilder(undefined),
+});
+//# sourceMappingURL=GroupQueryBuilderContext.js.map

package/lib/esm/widget/components/GroupQueryBuilderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupQueryBuilderContext.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupQueryBuilderContext.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAY9C,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC,aAAa,CAAoB;IAC7E,mBAAmB,EAAE,EAAE;IACvB,sBAAsB,EAAE,GAAG,EAAE,CAAC,EAAE;IAChC,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE;IAClB,YAAY,EAAE,IAAI,YAAY,CAAC,SAAS,CAAC;IACzC,eAAe,EAAE,GAAG,EAAE,CAAC,IAAI,YAAY,CAAC,SAAS,CAAC;CACnD,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 * as React from \"react\";\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport { QueryBuilder } from \"./QueryBuilder\";\n\nexport interface PropertySelection {\n  currentPropertyList: PropertyRecord[];\n  setCurrentPropertyList: React.Dispatch<\n  React.SetStateAction<PropertyRecord[]>\n  >;\n  query: string;\n  setQuery: React.Dispatch<React.SetStateAction<string>>;\n  queryBuilder: QueryBuilder;\n  setQueryBuilder: React.Dispatch<React.SetStateAction<QueryBuilder>>;\n}\nexport const GroupQueryBuilderContext = React.createContext<PropertySelection>({\n  currentPropertyList: [],\n  setCurrentPropertyList: () => [],\n  query: \"\",\n  setQuery: () => \"\",\n  queryBuilder: new QueryBuilder(undefined),\n  setQueryBuilder: () => new QueryBuilder(undefined),\n});\n"]}

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { GroupReportingAPI, MappingReportingAPI } from "../../api/generated/api";
+import type { CreateTypeFromInterface } from "../utils";
+import "./Grouping.scss";
+export declare type Group = CreateTypeFromInterface<GroupReportingAPI>;
+interface GroupsTreeProps {
+    mapping: MappingReportingAPI;
+    goBack: () => Promise<void>;
+}
+export declare const Groupings: ({ mapping, goBack }: GroupsTreeProps) => JSX.Element | null;
+export {};
+//# sourceMappingURL=Grouping.d.ts.map

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

@@ -0,0 +1,188 @@
+import { useActiveIModelConnection } from "@itwin/appui-react";
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { reportingClientApi } from "../../api/reportingClient";
+import { Button, DropdownMenu, IconButton, MenuItem, ProgressRadial, Table, } from "@itwin/itwinui-react";
+import { SvgAdd, SvgDelete, SvgEdit, SvgList, SvgMore, } from "@itwin/itwinui-icons-react";
+import DeleteModal from "./DeleteModal";
+import "./Grouping.scss";
+import { PropertyMenu } from "./PropertyMenu";
+import { clearEmphasizedElements, visualizeElements, visualizeElementsById, zoomToElements, } from "./viewerUtils";
+import { fetchIdsFromQuery, WidgetHeader } from "./utils";
+import GroupAction from "./GroupAction";
+var GroupsView;
+(function (GroupsView) {
+    GroupsView["GROUPS"] = "groups";
+    GroupsView["MODIFYING"] = "modifying";
+    GroupsView["ADD"] = "ADD";
+    GroupsView["PROPERTIES"] = "properties";
+})(GroupsView || (GroupsView = {}));
+const fetchGroups = async (setGroups, iModelId, mappingId, setIsLoading) => {
+    var _a;
+    try {
+        setIsLoading(true);
+        const groups = await reportingClientApi.getGroups(iModelId, mappingId);
+        setGroups((_a = groups.groups) !== null && _a !== void 0 ? _a : []);
+    }
+    catch {
+    }
+    finally {
+        setIsLoading(false);
+    }
+};
+const useFetchGroups = (iModelId, mappingId, setIsLoading) => {
+    const [groups, setGroups] = useState([]);
+    useEffect(() => {
+        void fetchGroups(setGroups, iModelId, mappingId, setIsLoading);
+    }, [iModelId, mappingId, setIsLoading]);
+    return [groups, setGroups];
+};
+export const Groupings = ({ mapping, goBack }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const iModelConnection = useActiveIModelConnection();
+    const iModelId = (_a = useActiveIModelConnection()) === null || _a === void 0 ? void 0 : _a.iModelId;
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [groupsView, setGroupsView] = useState(GroupsView.GROUPS);
+    const [selectedGroup, setSelectedGroup] = useState(undefined);
+    const [groups, setGroups] = useFetchGroups(iModelId, (_b = mapping.id) !== null && _b !== void 0 ? _b : "", setIsLoading);
+    const hilitedElements = useRef(new Map());
+    const [isLoadingQuery, setLoadingQuery] = useState(false);
+    const refresh = useCallback(async () => {
+        var _a;
+        setGroupsView(GroupsView.GROUPS);
+        setSelectedGroup(undefined);
+        setGroups([]);
+        await fetchGroups(setGroups, iModelId, (_a = mapping.id) !== null && _a !== void 0 ? _a : "", setIsLoading);
+    }, [iModelId, mapping.id, setGroups]);
+    const addGroup = () => {
+        // TODO Retain selection in view without emphasizes. Goal is to make it so we can distinguish
+        // hilited elements from regular elements without emphasis due to it blocking selection. For now clearing
+        // selection.
+        clearEmphasizedElements();
+        setGroupsView(GroupsView.ADD);
+    };
+    const onModify = useCallback((value) => {
+        clearEmphasizedElements();
+        setSelectedGroup(value.row.original);
+        setGroupsView(GroupsView.MODIFYING);
+    }, []);
+    const openProperties = useCallback((value) => {
+        clearEmphasizedElements();
+        setSelectedGroup(value.row.original);
+        setGroupsView(GroupsView.PROPERTIES);
+    }, []);
+    const groupsColumns = useMemo(() => [
+        {
+            Header: "Table",
+            columns: [
+                {
+                    id: "groupName",
+                    Header: "Group",
+                    accessor: "groupName",
+                    Cell: (value) => (React.createElement(React.Fragment, null, isLoadingQuery ? (value.row.original.groupName) : (React.createElement("div", { className: 'iui-anchor', onClick: (e) => {
+                            e.stopPropagation();
+                            openProperties(value);
+                        } }, value.row.original.groupName)))),
+                },
+                {
+                    id: "description",
+                    Header: "Description",
+                    accessor: "description",
+                },
+                {
+                    id: "dropdown",
+                    Header: "",
+                    width: 80,
+                    Cell: (value) => {
+                        return (React.createElement("div", { onClick: (e) => e.stopPropagation() },
+                            React.createElement(DropdownMenu, { disabled: isLoadingQuery, menuItems: (close) => [
+                                    React.createElement(MenuItem, { key: 0, onClick: () => onModify(value), icon: React.createElement(SvgEdit, null) }, "Modify"),
+                                    React.createElement(MenuItem, { key: 1, onClick: () => openProperties(value), icon: React.createElement(SvgList, null) }, "Properties"),
+                                    React.createElement(MenuItem, { key: 2, onClick: () => {
+                                            setSelectedGroup(value.row.original);
+                                            setShowDeleteModal(true);
+                                            close();
+                                        }, icon: React.createElement(SvgDelete, null) }, "Remove"),
+                                ] },
+                                React.createElement(IconButton, { disabled: isLoadingQuery, styleType: 'borderless' },
+                                    React.createElement(SvgMore, { style: {
+                                            width: "16px",
+                                            height: "16px",
+                                        } })))));
+                    },
+                },
+            ],
+        },
+    ], [isLoadingQuery, onModify, openProperties]);
+    // Temp
+    const stringToColor = function (str) {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        let colour = "#";
+        for (let i = 0; i < 3; i++) {
+            const value = (hash >> (i * 8)) & 0xff;
+            colour += (`00${value.toString(16)}`).substr(-2);
+        }
+        return colour;
+    };
+    const onSelect = useCallback(async (selectedData) => {
+        var _a, _b, _c, _d, _e, _f;
+        clearEmphasizedElements();
+        if (selectedData && selectedData.length > 0) {
+            setLoadingQuery(true);
+            let allIds = [];
+            for (const row of selectedData) {
+                const query = (_a = row.query) !== null && _a !== void 0 ? _a : "";
+                if (hilitedElements.current.has(query)) {
+                    const hilitedIds = (_b = hilitedElements.current.get(query)) !== null && _b !== void 0 ? _b : [];
+                    visualizeElements(hilitedIds, stringToColor((_c = row.id) !== null && _c !== void 0 ? _c : ""));
+                    allIds = allIds.concat(hilitedIds);
+                }
+                else {
+                    const ids = await fetchIdsFromQuery((_d = row.query) !== null && _d !== void 0 ? _d : "", iModelConnection);
+                    const hiliteIds = await visualizeElementsById(ids, stringToColor((_e = row.id) !== null && _e !== void 0 ? _e : ""), iModelConnection);
+                    hilitedElements.current.set((_f = row.query) !== null && _f !== void 0 ? _f : "", hiliteIds);
+                    allIds = allIds.concat(ids);
+                }
+            }
+            await zoomToElements(allIds);
+            setLoadingQuery(false);
+        }
+    }, [iModelConnection]);
+    switch (groupsView) {
+        case GroupsView.ADD:
+            return (React.createElement(GroupAction, { iModelId: iModelId, mappingId: (_c = mapping.id) !== null && _c !== void 0 ? _c : "", goBack: async () => {
+                    clearEmphasizedElements();
+                    setGroupsView(GroupsView.GROUPS);
+                    await refresh();
+                } }));
+        case GroupsView.MODIFYING:
+            return selectedGroup ? (React.createElement(GroupAction, { iModelId: iModelId, mappingId: (_d = mapping.id) !== null && _d !== void 0 ? _d : "", group: selectedGroup, goBack: async () => {
+                    clearEmphasizedElements();
+                    setGroupsView(GroupsView.GROUPS);
+                    await refresh();
+                } })) : null;
+        case GroupsView.PROPERTIES:
+            return selectedGroup ? (React.createElement(PropertyMenu, { iModelId: iModelId, mappingId: (_e = mapping.id) !== null && _e !== void 0 ? _e : "", group: selectedGroup, goBack: async () => {
+                    clearEmphasizedElements();
+                    setGroupsView(GroupsView.GROUPS);
+                    await refresh();
+                } })) : null;
+        default:
+            return (React.createElement(React.Fragment, null,
+                React.createElement(WidgetHeader, { title: (_f = mapping.mappingName) !== null && _f !== void 0 ? _f : "", disabled: isLoading || isLoadingQuery, returnFn: async () => {
+                        clearEmphasizedElements();
+                        await goBack();
+                    } }),
+                React.createElement("div", { className: 'groups-container' },
+                    React.createElement(Button, { startIcon: isLoadingQuery ? React.createElement(ProgressRadial, { size: "small", indeterminate: true }) : React.createElement(SvgAdd, null), styleType: 'high-visibility', disabled: isLoadingQuery, onClick: () => addGroup() }, isLoadingQuery ? "Loading Group(s)" : "Add Group"),
+                    React.createElement(Table, { data: groups, density: 'extra-condensed', columns: groupsColumns, emptyTableContent: 'No Groups available.', isSortable: true, isSelectable: true, onSelect: onSelect, isLoading: isLoading, isRowDisabled: () => isLoadingQuery })),
+                React.createElement(DeleteModal, { entityName: (_g = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.groupName) !== null && _g !== void 0 ? _g : "", show: showDeleteModal, setShow: setShowDeleteModal, onDelete: async () => {
+                        var _a, _b;
+                        await reportingClientApi.deleteGroup(iModelId, (_a = mapping.id) !== null && _a !== void 0 ? _a : "", (_b = selectedGroup === null || selectedGroup === void 0 ? void 0 : selectedGroup.id) !== null && _b !== void 0 ? _b : "");
+                    }, refresh: refresh })));
+    }
+};
+//# sourceMappingURL=Grouping.js.map

package/lib/esm/widget/components/Grouping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grouping.js","sourceRoot":"","sources":["../../../../src/widget/components/Grouping.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 { CellProps } from \"react-table\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { GroupReportingAPI, MappingReportingAPI } from \"../../api/generated/api\";\nimport { reportingClientApi } from \"../../api/reportingClient\";\nimport type { CreateTypeFromInterface } from \"../utils\";\nimport {\n  Button,\n  DropdownMenu,\n  IconButton,\n  MenuItem,\n  ProgressRadial,\n  Table,\n} from \"@itwin/itwinui-react\";\nimport {\n  SvgAdd,\n  SvgDelete,\n  SvgEdit,\n  SvgList,\n  SvgMore,\n} from \"@itwin/itwinui-icons-react\";\nimport DeleteModal from \"./DeleteModal\";\nimport \"./Grouping.scss\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport { PropertyMenu } from \"./PropertyMenu\";\nimport {\n  clearEmphasizedElements,\n  visualizeElements,\n  visualizeElementsById,\n  zoomToElements,\n} from \"./viewerUtils\";\nimport { fetchIdsFromQuery, WidgetHeader } from \"./utils\";\nimport GroupAction from \"./GroupAction\";\n\nexport type Group = CreateTypeFromInterface<GroupReportingAPI>;\n\nenum GroupsView {\n  GROUPS = \"groups\",\n  MODIFYING = \"modifying\",\n  ADD = \"ADD\",\n  PROPERTIES = \"properties\",\n}\n\ninterface GroupsTreeProps {\n  mapping: MappingReportingAPI;\n  goBack: () => Promise<void>;\n}\n\nconst fetchGroups = async (\n  setGroups: React.Dispatch<React.SetStateAction<Group[]>>,\n  iModelId: string,\n  mappingId: string,\n  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,\n) => {\n  try {\n    setIsLoading(true);\n    const groups = await reportingClientApi.getGroups(iModelId, mappingId);\n    setGroups(groups.groups ?? []);\n  } catch {\n  } finally {\n    setIsLoading(false);\n  }\n};\n\nconst useFetchGroups = (\n  iModelId: string,\n  mappingId: string,\n  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,\n): [Group[], React.Dispatch<React.SetStateAction<Group[]>>] => {\n  const [groups, setGroups] = useState<GroupReportingAPI[]>([]);\n\n  useEffect(() => {\n    void fetchGroups(setGroups, iModelId, mappingId, setIsLoading);\n  }, [iModelId, mappingId, setIsLoading]);\n\n  return [groups, setGroups];\n};\n\nexport const Groupings = ({ mapping, goBack }: GroupsTreeProps) => {\n  const iModelConnection = useActiveIModelConnection() as IModelConnection;\n  const iModelId = useActiveIModelConnection()?.iModelId as string;\n  const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);\n  const [isLoading, setIsLoading] = useState<boolean>(true);\n  const [groupsView, setGroupsView] = useState<GroupsView>(GroupsView.GROUPS);\n  const [selectedGroup, setSelectedGroup] = useState<Group | undefined>(\n    undefined,\n  );\n  const [groups, setGroups] = useFetchGroups(\n    iModelId,\n    mapping.id ?? \"\",\n    setIsLoading,\n  );\n  const hilitedElements = useRef<Map<string, string[]>>(new Map());\n  const [isLoadingQuery, setLoadingQuery] = useState<boolean>(false);\n\n  const refresh = useCallback(async () => {\n    setGroupsView(GroupsView.GROUPS);\n    setSelectedGroup(undefined);\n    setGroups([]);\n    await fetchGroups(setGroups, iModelId, mapping.id ?? \"\", setIsLoading);\n  }, [iModelId, mapping.id, setGroups]);\n\n  const addGroup = () => {\n    // TODO Retain selection in view without emphasizes. Goal is to make it so we can distinguish\n    // hilited elements from regular elements without emphasis due to it blocking selection. For now clearing\n    // selection.\n    clearEmphasizedElements();\n    setGroupsView(GroupsView.ADD);\n  };\n\n  const onModify = useCallback((value) => {\n    clearEmphasizedElements();\n    setSelectedGroup(value.row.original);\n    setGroupsView(GroupsView.MODIFYING);\n  }, []);\n\n  const openProperties = useCallback((value) => {\n    clearEmphasizedElements();\n    setSelectedGroup(value.row.original);\n    setGroupsView(GroupsView.PROPERTIES);\n  }, []);\n\n  const groupsColumns = useMemo(\n    () => [\n      {\n        Header: \"Table\",\n        columns: [\n          {\n            id: \"groupName\",\n            Header: \"Group\",\n            accessor: \"groupName\",\n            Cell: (value: CellProps<Group>) => (\n              <>\n                {isLoadingQuery ? (\n                  value.row.original.groupName\n                ) : (\n                  <div\n                    className='iui-anchor'\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      openProperties(value);\n                    }}\n                  >\n                    {value.row.original.groupName}\n                  </div>\n                )}\n              </>\n            ),\n          },\n          {\n            id: \"description\",\n            Header: \"Description\",\n            accessor: \"description\",\n          },\n          {\n            id: \"dropdown\",\n            Header: \"\",\n            width: 80,\n            Cell: (value: CellProps<Group>) => {\n              return (\n                <div onClick={(e) => e.stopPropagation()}>\n                  <DropdownMenu\n                    disabled={isLoadingQuery}\n                    menuItems={(close: () => void) => [\n                      <MenuItem\n                        key={0}\n                        onClick={() => onModify(value)}\n                        icon={<SvgEdit />}\n                      >\n                        Modify\n                      </MenuItem>,\n                      <MenuItem\n                        key={1}\n                        onClick={() => openProperties(value)}\n                        icon={<SvgList />}\n                      >\n                        Properties\n                      </MenuItem>,\n                      <MenuItem\n                        key={2}\n                        onClick={() => {\n                          setSelectedGroup(value.row.original);\n                          setShowDeleteModal(true);\n                          close();\n                        }}\n                        icon={<SvgDelete />}\n                      >\n                        Remove\n                      </MenuItem>,\n                    ]}\n                  >\n                    <IconButton\n                      disabled={isLoadingQuery}\n                      styleType='borderless'\n                    >\n                      <SvgMore\n                        style={{\n                          width: \"16px\",\n                          height: \"16px\",\n                        }}\n                      />\n                    </IconButton>\n                  </DropdownMenu>\n                </div>\n              );\n            },\n          },\n        ],\n      },\n    ],\n    [isLoadingQuery, onModify, openProperties],\n  );\n\n  // Temp\n  const stringToColor = function (str: string) {\n    let hash = 0;\n    for (let i = 0; i < str.length; i++) {\n      hash = str.charCodeAt(i) + ((hash << 5) - hash);\n    }\n    let colour = \"#\";\n    for (let i = 0; i < 3; i++) {\n      const value = (hash >> (i * 8)) & 0xff;\n      colour += (`00${value.toString(16)}`).substr(-2);\n    }\n    return colour;\n  };\n\n  const onSelect = useCallback(\n    async (selectedData: Group[] | undefined) => {\n      clearEmphasizedElements();\n      if (selectedData && selectedData.length > 0) {\n        setLoadingQuery(true);\n        let allIds: string[] = [];\n        for (const row of selectedData) {\n          const query = row.query ?? \"\";\n          if (hilitedElements.current.has(query)) {\n            const hilitedIds = hilitedElements.current.get(query) ?? [];\n            visualizeElements(hilitedIds, stringToColor(row.id ?? \"\"));\n            allIds = allIds.concat(hilitedIds);\n          } else {\n            const ids: string[] = await fetchIdsFromQuery(\n              row.query ?? \"\",\n              iModelConnection,\n            );\n            const hiliteIds = await visualizeElementsById(\n              ids,\n              stringToColor(row.id ?? \"\"),\n              iModelConnection,\n            );\n            hilitedElements.current.set(row.query ?? \"\", hiliteIds);\n\n            allIds = allIds.concat(ids);\n          }\n        }\n        await zoomToElements(allIds);\n        setLoadingQuery(false);\n      }\n    },\n    [iModelConnection],\n  );\n\n  switch (groupsView) {\n    case GroupsView.ADD:\n      return (\n        <GroupAction\n          iModelId={iModelId}\n          mappingId={mapping.id ?? \"\"}\n          goBack={async () => {\n            clearEmphasizedElements();\n            setGroupsView(GroupsView.GROUPS);\n            await refresh();\n          }}\n        />\n      );\n    case GroupsView.MODIFYING:\n      return selectedGroup ? (\n        <GroupAction\n          iModelId={iModelId}\n          mappingId={mapping.id ?? \"\"}\n          group={selectedGroup}\n          goBack={async () => {\n            clearEmphasizedElements();\n            setGroupsView(GroupsView.GROUPS);\n            await refresh();\n          }}\n        />\n      ) : null;\n    case GroupsView.PROPERTIES:\n      return selectedGroup ? (\n        <PropertyMenu\n          iModelId={iModelId}\n          mappingId={mapping.id ?? \"\"}\n          group={selectedGroup}\n          goBack={async () => {\n            clearEmphasizedElements();\n            setGroupsView(GroupsView.GROUPS);\n            await refresh();\n          }}\n        />\n      ) : null;\n    default:\n      return (\n        <>\n          <WidgetHeader\n            title={mapping.mappingName ?? \"\"}\n            disabled={isLoading || isLoadingQuery}\n            returnFn={async () => {\n              clearEmphasizedElements();\n              await goBack();\n            }}\n          />\n          <div className='groups-container'>\n            <Button\n              startIcon={\n                isLoadingQuery ? <ProgressRadial size=\"small\" indeterminate /> : <SvgAdd />\n              }\n              styleType='high-visibility'\n              disabled={isLoadingQuery}\n              onClick={() => addGroup()}\n            >\n              {isLoadingQuery ? \"Loading Group(s)\" : \"Add Group\"}\n            </Button>\n            <Table<Group>\n              data={groups}\n              density='extra-condensed'\n              columns={groupsColumns}\n              emptyTableContent='No Groups available.'\n              isSortable\n              isSelectable\n              onSelect={onSelect}\n              isLoading={isLoading}\n              isRowDisabled={() => isLoadingQuery}\n            />\n          </div>\n          <DeleteModal\n            entityName={selectedGroup?.groupName ?? \"\"}\n            show={showDeleteModal}\n            setShow={setShowDeleteModal}\n            onDelete={async () => {\n              await reportingClientApi.deleteGroup(\n                iModelId,\n                mapping.id ?? \"\",\n                selectedGroup?.id ?? \"\",\n              );\n            }}\n            refresh={refresh}\n          />\n        </>\n      );\n  }\n};\n"]}

package/lib/esm/widget/components/Grouping.scss

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+* 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';
+
+.groups-container {
+  display: flex;
+  flex-direction: column;
+  gap: $iui-baseline;
+
+  button {
+    align-self: flex-start;
+  }
+}

package/lib/esm/widget/components/GroupingMapping.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import "./GroupingMapping.scss";
+declare const GroupingMapping: () => JSX.Element;
+export default GroupingMapping;
+//# sourceMappingURL=GroupingMapping.d.ts.map

package/lib/esm/widget/components/GroupingMapping.js

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { Mappings } from "./Mapping";
+import "./GroupingMapping.scss";
+const GroupingMapping = () => {
+    return (React.createElement("div", { className: 'group-mapping-container' },
+        React.createElement(Mappings, null)));
+};
+export default GroupingMapping;
+//# sourceMappingURL=GroupingMapping.js.map

package/lib/esm/widget/components/GroupingMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupingMapping.js","sourceRoot":"","sources":["../../../../src/widget/components/GroupingMapping.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAEhC,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,OAAO,CACL,6BAAK,SAAS,EAAC,yBAAyB;QACtC,oBAAC,QAAQ,OAAG,CACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,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 * as React from \"react\";\nimport { Mappings } from \"./Mapping\";\nimport \"./GroupingMapping.scss\";\n\nconst GroupingMapping = () => {\n  return (\n    <div className='group-mapping-container'>\n      <Mappings />\n    </div>\n  );\n};\n\nexport default GroupingMapping;\n"]}

package/lib/esm/widget/components/GroupingMapping.scss

@@ -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 '~@itwin/itwinui-css/scss/variables';
+
+// Widgets by default don't get horizontal scrollbars...
+/* stylelint-disable-next-line selector-class-pattern */
+.nz-widget-contentRenderer {
+  width: 100%;
+}
+
+.group-mapping-container {
+  display: flex;
+  flex-direction: column;
+  padding: $iui-baseline $iui-m;
+  box-sizing: border-box;
+  height: 100%;
+  overflow: auto;
+}
+
+.field-legend {
+  color: $iui-color-system-gray;
+}

package/lib/esm/widget/components/Mapping.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { MappingReportingAPI } from "../../api/generated/api";
+import type { CreateTypeFromInterface } from "../utils";
+import "./Mapping.scss";
+export declare type Mapping = CreateTypeFromInterface<MappingReportingAPI>;
+export declare const Mappings: () => JSX.Element;
+//# sourceMappingURL=Mapping.d.ts.map

package/lib/esm/widget/components/Mapping.js

@@ -0,0 +1,136 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import { Presentation } from "@itwin/presentation-frontend";
+import { useActiveIModelConnection } from "@itwin/appui-react";
+import { SvgAdd, SvgDelete, SvgEdit, SvgImport, SvgMore, } from "@itwin/itwinui-icons-react";
+import { Button, ButtonGroup, DropdownMenu, IconButton, MenuItem, Table, } from "@itwin/itwinui-react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { onSelectionChanged, WidgetHeader } from "./utils";
+import "./Mapping.scss";
+import { reportingClientApi } from "../../api/reportingClient";
+import DeleteModal from "./DeleteModal";
+import { Groupings } from "./Grouping";
+import MappingAction from "./MappingAction";
+import { MappingImportWizardModal } from "./MappingImportWizardModal";
+var MappingView;
+(function (MappingView) {
+    MappingView["MAPPINGS"] = "mappings";
+    MappingView["GROUPS"] = "groups";
+    MappingView["ADDING"] = "adding";
+    MappingView["MODIFYING"] = "modifying";
+    MappingView["IMPORT"] = "import";
+})(MappingView || (MappingView = {}));
+const fetchMappings = async (setMappings, iModelId, setIsLoading) => {
+    try {
+        setIsLoading(true);
+        const mappings = await reportingClientApi.getMappings(iModelId);
+        setMappings(mappings);
+    }
+    catch {
+    }
+    finally {
+        setIsLoading(false);
+    }
+};
+const useFetchMappings = (iModelId, setIsLoading) => {
+    const [mappings, setMappings] = useState([]);
+    useEffect(() => {
+        void fetchMappings(setMappings, iModelId, setIsLoading);
+    }, [iModelId, setIsLoading]);
+    return [mappings, setMappings];
+};
+export const Mappings = () => {
+    var _a, _b;
+    const iModelId = (_a = useActiveIModelConnection()) === null || _a === void 0 ? void 0 : _a.iModelId;
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    const [showImportModal, setShowImportModal] = useState(false);
+    const [mappingView, setMappingView] = useState(MappingView.MAPPINGS);
+    const [selectedMapping, setSelectedMapping] = useState(undefined);
+    const [isLoading, setIsLoading] = useState(true);
+    const [mappings, setMappings] = useFetchMappings(iModelId, setIsLoading);
+    useEffect(() => {
+        const removeListener = Presentation.selection.selectionChange.addListener(onSelectionChanged);
+        return () => {
+            removeListener();
+        };
+    }, []);
+    const refresh = useCallback(async () => {
+        setMappingView(MappingView.MAPPINGS);
+        setSelectedMapping(undefined);
+        setMappings([]);
+        await fetchMappings(setMappings, iModelId, setIsLoading);
+    }, [iModelId, setMappings]);
+    const addMapping = async () => {
+        setMappingView(MappingView.ADDING);
+    };
+    const mappingsColumns = useMemo(() => [
+        {
+            Header: "Table",
+            columns: [
+                {
+                    id: "mappingName",
+                    Header: "Mapping Name",
+                    accessor: "mappingName",
+                    Cell: (value) => (React.createElement("div", { className: "iui-anchor", onClick: () => {
+                            setSelectedMapping(value.row.original);
+                            setMappingView(MappingView.GROUPS);
+                        } }, value.row.original.mappingName)),
+                },
+                {
+                    id: "description",
+                    Header: "Description",
+                    accessor: "description",
+                },
+                {
+                    id: "dropdown",
+                    Header: "",
+                    width: 80,
+                    Cell: (value) => {
+                        return (React.createElement(DropdownMenu, { menuItems: (close) => [
+                                React.createElement(MenuItem, { key: 0, onClick: () => {
+                                        setSelectedMapping(value.row.original);
+                                        setMappingView(MappingView.MODIFYING);
+                                    }, icon: React.createElement(SvgEdit, null) }, "Modify"),
+                                React.createElement(MenuItem, { key: 1, onClick: () => {
+                                        setSelectedMapping(value.row.original);
+                                        setShowDeleteModal(true);
+                                        close();
+                                    }, icon: React.createElement(SvgDelete, null) }, "Remove"),
+                            ] },
+                            React.createElement(IconButton, { styleType: "borderless" },
+                                React.createElement(SvgMore, { style: {
+                                        width: "16px",
+                                        height: "16px",
+                                    } }))));
+                    },
+                },
+            ],
+        },
+    ], []);
+    switch (mappingView) {
+        case MappingView.ADDING:
+            return React.createElement(MappingAction, { iModelId: iModelId, returnFn: refresh });
+        case MappingView.MODIFYING:
+            return (React.createElement(MappingAction, { iModelId: iModelId, mapping: selectedMapping, returnFn: refresh }));
+        case MappingView.GROUPS:
+            return (React.createElement(Groupings, { mapping: selectedMapping, goBack: refresh }));
+        default:
+            return (React.createElement(React.Fragment, null,
+                React.createElement(WidgetHeader, { title: "Mappings" }),
+                React.createElement("div", { className: "mappings-container" },
+                    React.createElement("div", { className: "table-toolbar" },
+                        React.createElement(Button, { startIcon: React.createElement(SvgAdd, null), onClick: async () => addMapping(), styleType: "high-visibility" }, "New"),
+                        React.createElement(ButtonGroup, { onClick: () => setShowImportModal(true) },
+                            React.createElement(IconButton, { title: "Import Mappings" },
+                                React.createElement(SvgImport, null)))),
+                    React.createElement(Table, { data: mappings, density: "extra-condensed", columns: mappingsColumns, emptyTableContent: "No Mappings available.", isSortable: true, isLoading: isLoading })),
+                React.createElement(DeleteModal, { entityName: (_b = selectedMapping === null || selectedMapping === void 0 ? void 0 : selectedMapping.mappingName) !== null && _b !== void 0 ? _b : "", show: showDeleteModal, setShow: setShowDeleteModal, onDelete: async () => {
+                        var _a;
+                        await reportingClientApi.deleteMapping(iModelId, (_a = selectedMapping === null || selectedMapping === void 0 ? void 0 : selectedMapping.id) !== null && _a !== void 0 ? _a : "");
+                    }, refresh: refresh }),
+                React.createElement(MappingImportWizardModal, { show: showImportModal, setShow: setShowImportModal, onFinish: refresh })));
+    }
+};
+//# sourceMappingURL=Mapping.js.map

package/lib/esm/widget/components/Mapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mapping.js","sourceRoot":"","sources":["../../../../src/widget/components/Mapping.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 { Presentation } from \"@itwin/presentation-frontend\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport {\n  SvgAdd,\n  SvgDelete,\n  SvgEdit,\n  SvgImport,\n  SvgMore,\n} from \"@itwin/itwinui-icons-react\";\nimport {\n  Button,\n  ButtonGroup,\n  DropdownMenu,\n  IconButton,\n  MenuItem,\n  Table,\n} from \"@itwin/itwinui-react\";\nimport type { CellProps } from \"react-table\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { MappingReportingAPI } from \"../../api/generated/api\";\nimport type { CreateTypeFromInterface } from \"../utils\";\nimport { onSelectionChanged, WidgetHeader } from \"./utils\";\nimport \"./Mapping.scss\";\nimport { reportingClientApi } from \"../../api/reportingClient\";\nimport DeleteModal from \"./DeleteModal\";\nimport { Groupings } from \"./Grouping\";\nimport MappingAction from \"./MappingAction\";\nimport { MappingImportWizardModal } from \"./MappingImportWizardModal\";\n\nexport type Mapping = CreateTypeFromInterface<MappingReportingAPI>;\n\nenum MappingView {\n  MAPPINGS = \"mappings\",\n  GROUPS = \"groups\",\n  ADDING = \"adding\",\n  MODIFYING = \"modifying\",\n  IMPORT = \"import\",\n}\n\nconst fetchMappings = async (\n  setMappings: React.Dispatch<React.SetStateAction<MappingReportingAPI[]>>,\n  iModelId: string,\n  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>\n) => {\n  try {\n    setIsLoading(true);\n    const mappings = await reportingClientApi.getMappings(iModelId);\n    setMappings(mappings);\n  } catch {\n  } finally {\n    setIsLoading(false);\n  }\n};\n\nconst useFetchMappings = (\n  iModelId: string,\n  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>\n): [\n  MappingReportingAPI[],\n  React.Dispatch<React.SetStateAction<MappingReportingAPI[]>>\n] => {\n  const [mappings, setMappings] = useState<MappingReportingAPI[]>([]);\n  useEffect(() => {\n    void fetchMappings(setMappings, iModelId, setIsLoading);\n  }, [iModelId, setIsLoading]);\n\n  return [mappings, setMappings];\n};\n\nexport const Mappings = () => {\n  const iModelId = useActiveIModelConnection()?.iModelId as string;\n  const [showDeleteModal, setShowDeleteModal] = useState<boolean>(false);\n  const [showImportModal, setShowImportModal] = useState<boolean>(false);\n  const [mappingView, setMappingView] = useState<MappingView>(\n    MappingView.MAPPINGS\n  );\n  const [selectedMapping, setSelectedMapping] = useState<\n  MappingReportingAPI | undefined\n  >(undefined);\n  const [isLoading, setIsLoading] = useState<boolean>(true);\n  const [mappings, setMappings] = useFetchMappings(iModelId, setIsLoading);\n\n  useEffect(() => {\n    const removeListener =\n      Presentation.selection.selectionChange.addListener(onSelectionChanged);\n    return () => {\n      removeListener();\n    };\n  }, []);\n\n  const refresh = useCallback(async () => {\n    setMappingView(MappingView.MAPPINGS);\n    setSelectedMapping(undefined);\n    setMappings([]);\n    await fetchMappings(setMappings, iModelId, setIsLoading);\n  }, [iModelId, setMappings]);\n\n  const addMapping = async () => {\n    setMappingView(MappingView.ADDING);\n  };\n\n  const mappingsColumns = useMemo(\n    () => [\n      {\n        Header: \"Table\",\n        columns: [\n          {\n            id: \"mappingName\",\n            Header: \"Mapping Name\",\n            accessor: \"mappingName\",\n            Cell: (value: CellProps<{ mappingName: string }>) => (\n              <div\n                className=\"iui-anchor\"\n                onClick={() => {\n                  setSelectedMapping(value.row.original);\n                  setMappingView(MappingView.GROUPS);\n                }}\n              >\n                {value.row.original.mappingName}\n              </div>\n            ),\n          },\n          {\n            id: \"description\",\n            Header: \"Description\",\n            accessor: \"description\",\n          },\n          {\n            id: \"dropdown\",\n            Header: \"\",\n            width: 80,\n            Cell: (value: CellProps<Mapping>) => {\n              return (\n                <DropdownMenu\n                  menuItems={(close: () => void) => [\n                    <MenuItem\n                      key={0}\n                      onClick={() => {\n                        setSelectedMapping(value.row.original);\n                        setMappingView(MappingView.MODIFYING);\n                      }}\n                      icon={<SvgEdit />}\n                    >\n                      Modify\n                    </MenuItem>,\n\n                    <MenuItem\n                      key={1}\n                      onClick={() => {\n                        setSelectedMapping(value.row.original);\n                        setShowDeleteModal(true);\n                        close();\n                      }}\n                      icon={<SvgDelete />}\n                    >\n                      Remove\n                    </MenuItem>,\n                  ]}\n                >\n                  <IconButton styleType=\"borderless\">\n                    <SvgMore\n                      style={{\n                        width: \"16px\",\n                        height: \"16px\",\n                      }}\n                    />\n                  </IconButton>\n                </DropdownMenu>\n              );\n            },\n          },\n        ],\n      },\n    ],\n    []\n  );\n\n  switch (mappingView) {\n    case MappingView.ADDING:\n      return <MappingAction iModelId={iModelId} returnFn={refresh} />;\n    case MappingView.MODIFYING:\n      return (\n        <MappingAction\n          iModelId={iModelId}\n          mapping={selectedMapping}\n          returnFn={refresh}\n        />\n      );\n    case MappingView.GROUPS:\n      return (\n        <Groupings\n          mapping={selectedMapping as MappingReportingAPI}\n          goBack={refresh}\n        />\n      );\n    default:\n      return (\n        <>\n          <WidgetHeader title=\"Mappings\" />\n          <div className=\"mappings-container\">\n            <div className=\"table-toolbar\">\n              <Button\n                startIcon={<SvgAdd />}\n                onClick={async () => addMapping()}\n                styleType=\"high-visibility\"\n              >\n                New\n              </Button>\n              <ButtonGroup onClick={() => setShowImportModal(true)}>\n                <IconButton title=\"Import Mappings\">\n                  <SvgImport />\n                </IconButton>\n              </ButtonGroup>\n            </div>\n            <Table<Mapping>\n              data={mappings}\n              density=\"extra-condensed\"\n              columns={mappingsColumns}\n              emptyTableContent=\"No Mappings available.\"\n              isSortable\n              isLoading={isLoading}\n            />\n          </div>\n          <DeleteModal\n            entityName={selectedMapping?.mappingName ?? \"\"}\n            show={showDeleteModal}\n            setShow={setShowDeleteModal}\n            onDelete={async () => {\n              await reportingClientApi.deleteMapping(\n                iModelId,\n                selectedMapping?.id ?? \"\"\n              );\n            }}\n            refresh={refresh}\n          />\n          <MappingImportWizardModal\n            show={showImportModal}\n            setShow={setShowImportModal}\n            onFinish={refresh}\n          />\n        </>\n      );\n  }\n};\n"]}

package/lib/esm/widget/components/Mapping.scss

@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+* 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';
+
+.mappings-container {
+  display: flex;
+  flex-direction: column;
+  gap: $iui-baseline;
+
+  .table-toolbar {
+    display: flex;
+    gap: $iui-s;
+  }
+
+  button {
+    align-self: flex-start;
+  }
+}
+
+.action-panel {
+  display: flex;
+  justify-content: right;
+  column-gap: $iui-s;
+}

package/lib/esm/widget/components/MappingAction.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { MappingReportingAPI } from "../../api/generated/api";
+import "./MappingAction.scss";
+interface MappingActionProps {
+    iModelId: string;
+    mapping?: MappingReportingAPI;
+    returnFn: () => Promise<void>;
+}
+declare const MappingAction: ({ iModelId, mapping, returnFn }: MappingActionProps) => JSX.Element;
+export default MappingAction;
+//# sourceMappingURL=MappingAction.d.ts.map