Add child elements category to models tree

packages/itwin/tree-widget/.pnpmfile.cjs

@@ -1,13 +1,12 @@
 //@ts-check
 
-
 const itwinUiV3dependencies = [
   "@itwin/presentation-components",
   "@itwin/components-react",
   "@itwin/core-react",
   "@itwin/imodel-components-react",
-  "@itwin/appui-react"
-]
+  "@itwin/appui-react",
+];
 
 module.exports = {
   hooks: {

packages/itwin/tree-widget/.stylelintrc.json

@@ -1,9 +1,7 @@
 {
   "overrides": [
     {
-      "files": [
-        "./src/**/*.css"
-      ],
+      "files": ["./src/**/*.css"],
       "extends": "stylelint-config-standard",
       "rules": {
         "comment-whitespace-inside": null

packages/itwin/tree-widget/api/tree-widget-react.api.md

@@ -194,9 +194,11 @@ type FunctionProps<THook extends (props: any) => any> = Parameters<THook>[0];
 // @beta (undocumented)
 interface GetCategoryVisibilityStatusProps {
     // (undocumented)
-    categoryId: Id64String;
+    categoryIds: Id64Arg;
     // (undocumented)
     modelId: Id64String;
+    // (undocumented)
+    parentElementIds?: Id64Arg;
 }
 
 // @beta (undocumented)
@@ -351,7 +353,7 @@ export interface ModelsTreeVisibilityHandlerOverrides {
     }) => Promise<VisibilityStatus>>;
     // (undocumented)
     getModelDisplayStatus?: HierarchyVisibilityHandlerOverridableMethod<(props: {
-        id: Id64String;
+        ids: Id64Arg;
     }) => Promise<VisibilityStatus>>;
     // (undocumented)
     getSubjectNodeVisibility?: HierarchyVisibilityHandlerOverridableMethod<(props: {
@@ -560,7 +562,7 @@ export interface VisibilityStatus {
 }
 
 // @beta
-export function VisibilityTree({ visibilityHandlerFactory, treeRenderer, hierarchyLevelSizeLimit, ...props }: VisibilityTreeProps): JSX.Element;
+export function VisibilityTree({ visibilityHandlerFactory, treeRenderer, hierarchyLevelSizeLimit, ...props }: VisibilityTreeProps): JSX_2.Element;
 
 // @beta (undocumented)
 type VisibilityTreeProps = Omit<TreeProps, "treeRenderer" | "imodelAccess"> & {

packages/itwin/tree-widget/src/test/trees/Common.ts

@@ -28,7 +28,7 @@ export function createIModelMock(queryHandler?: (query: string, params?: QueryBi
 
 export function createFakeSinonViewport(
   props?: Partial<Omit<Viewport, "view" | "perModelCategoryVisibility">> & {
-    view?: Partial<Omit<ViewState, "isSpatialView">> & { isSpatialView?: () => boolean; };
+    view?: Partial<Omit<ViewState, "isSpatialView">> & { isSpatialView?: () => boolean };
     perModelCategoryVisibility?: Partial<PerModelCategoryVisibility.Overrides>;
     queryHandler?: Parameters<typeof createIModelMock>[0];
   },

packages/itwin/tree-widget/src/test/trees/common/internal/AlwaysAndNeverDrawnElementInfo.test.ts

@@ -9,7 +9,7 @@ import sinon from "sinon";
 import {
   AlwaysAndNeverDrawnElementInfo,
   SET_CHANGE_DEBOUNCE_TIME,
-} from "../../../../tree-widget-react/components/trees/common/internal/AlwaysAndNeverDrawnElementInfo.js";
+} from "../../../../tree-widget-react/components/trees/common/internal/withoutParents/AlwaysAndNeverDrawnElementInfo.js";
 import { createResolvablePromise } from "../../../TestUtils.js";
 import { createFakeSinonViewport } from "../../Common.js";
 

packages/itwin/tree-widget/src/test/trees/common/internal/VisibilityChangeEventListener.test.ts

@@ -12,11 +12,14 @@ import { createFakeSinonViewport } from "../../Common.js";
 describe("VisibilityChangeEventListener", () => {
   it("raises event on `onAlwaysDrawnChanged` event", async () => {
     const vpMock = createFakeSinonViewport();
-    using handler = createVisibilityChangeEventListener({ viewport: vpMock, listeners: {
-      elements: true,
-      categories: true,
-      models: true
-    }});
+    using handler = createVisibilityChangeEventListener({
+      viewport: vpMock,
+      listeners: {
+        elements: true,
+        categories: true,
+        models: true,
+      },
+    });
     const spy = sinon.spy();
     handler.onVisibilityChange.addListener(spy);
     vpMock.onAlwaysDrawnChanged.raiseEvent(vpMock);
@@ -25,11 +28,14 @@ describe("VisibilityChangeEventListener", () => {
 
   it("raises event on `onNeverDrawnChanged` event", async () => {
     const vpMock = createFakeSinonViewport();
-    using handler = createVisibilityChangeEventListener({ viewport: vpMock, listeners: {
-      elements: true,
-      categories: true,
-      models: true
-    }});
+    using handler = createVisibilityChangeEventListener({
+      viewport: vpMock,
+      listeners: {
+        elements: true,
+        categories: true,
+        models: true,
+      },
+    });
     const spy = sinon.spy();
     handler.onVisibilityChange.addListener(spy);
     vpMock.onNeverDrawnChanged.raiseEvent(vpMock);
@@ -38,58 +44,70 @@ describe("VisibilityChangeEventListener", () => {
 
   it("raises event on `onViewedCategoriesChanged` event", async () => {
     const vpMock = createFakeSinonViewport();
-    using handler = createVisibilityChangeEventListener({ viewport: vpMock, listeners: {
-      elements: true,
-      categories: true,
-      models: true
-    }});
-      const spy = sinon.spy();
-      handler.onVisibilityChange.addListener(spy);
-      vpMock.onViewedCategoriesChanged.raiseEvent(vpMock);
-      await waitFor(() => expect(spy).to.be.calledOnce);
+    using handler = createVisibilityChangeEventListener({
+      viewport: vpMock,
+      listeners: {
+        elements: true,
+        categories: true,
+        models: true,
+      },
+    });
+    const spy = sinon.spy();
+    handler.onVisibilityChange.addListener(spy);
+    vpMock.onViewedCategoriesChanged.raiseEvent(vpMock);
+    await waitFor(() => expect(spy).to.be.calledOnce);
   });
 
   it("raises event on `onViewedModelsChanged` event", async () => {
     const vpMock = createFakeSinonViewport();
-    using handler = createVisibilityChangeEventListener({ viewport: vpMock, listeners: {
-      elements: true,
-      categories: true,
-      models: true
-    }});
-      const spy = sinon.spy();
-      handler.onVisibilityChange.addListener(spy);
-      vpMock.onViewedModelsChanged.raiseEvent(vpMock);
-      await waitFor(() => expect(spy).to.be.calledOnce);
+    using handler = createVisibilityChangeEventListener({
+      viewport: vpMock,
+      listeners: {
+        elements: true,
+        categories: true,
+        models: true,
+      },
+    });
+    const spy = sinon.spy();
+    handler.onVisibilityChange.addListener(spy);
+    vpMock.onViewedModelsChanged.raiseEvent(vpMock);
+    await waitFor(() => expect(spy).to.be.calledOnce);
   });
 
   it("raises event on `onViewedCategoriesPerModelChanged` event", async () => {
     const vpMock = createFakeSinonViewport();
-    using handler = createVisibilityChangeEventListener({ viewport: vpMock, listeners: {
-      elements: true,
-      categories: true,
-      models: true
-    }});
-      const spy = sinon.spy();
-      handler.onVisibilityChange.addListener(spy);
-      vpMock.onViewedCategoriesPerModelChanged.raiseEvent(vpMock);
-      await waitFor(() => expect(spy).to.be.calledOnce);
+    using handler = createVisibilityChangeEventListener({
+      viewport: vpMock,
+      listeners: {
+        elements: true,
+        categories: true,
+        models: true,
+      },
+    });
+    const spy = sinon.spy();
+    handler.onVisibilityChange.addListener(spy);
+    vpMock.onViewedCategoriesPerModelChanged.raiseEvent(vpMock);
+    await waitFor(() => expect(spy).to.be.calledOnce);
   });
 
   it("raises event once when multiple affecting events are fired", async () => {
     const vpMock = createFakeSinonViewport();
     const { onViewedCategoriesPerModelChanged, onViewedCategoriesChanged, onViewedModelsChanged, onAlwaysDrawnChanged, onNeverDrawnChanged } = vpMock;
-    using handler = createVisibilityChangeEventListener({ viewport: vpMock, listeners: {
-      elements: true,
-      categories: true,
-      models: true
-    }});
-      const spy = sinon.spy();
-      handler.onVisibilityChange.addListener(spy);
-      onViewedCategoriesPerModelChanged.raiseEvent(vpMock);
-      onViewedCategoriesChanged.raiseEvent(vpMock);
-      onViewedModelsChanged.raiseEvent(vpMock);
-      onAlwaysDrawnChanged.raiseEvent(vpMock);
-      onNeverDrawnChanged.raiseEvent(vpMock);
-      await waitFor(() => expect(spy).to.be.calledOnce);
+    using handler = createVisibilityChangeEventListener({
+      viewport: vpMock,
+      listeners: {
+        elements: true,
+        categories: true,
+        models: true,
+      },
+    });
+    const spy = sinon.spy();
+    handler.onVisibilityChange.addListener(spy);
+    onViewedCategoriesPerModelChanged.raiseEvent(vpMock);
+    onViewedCategoriesChanged.raiseEvent(vpMock);
+    onViewedModelsChanged.raiseEvent(vpMock);
+    onAlwaysDrawnChanged.raiseEvent(vpMock);
+    onNeverDrawnChanged.raiseEvent(vpMock);
+    await waitFor(() => expect(spy).to.be.calledOnce);
   });
 });

packages/itwin/tree-widget/src/test/trees/models-tree/ModelsTreeDefinition.test.ts

@@ -957,6 +957,119 @@ describe("Models tree", () => {
           ],
         });
       });
+
+      it("shows element's children category when it differs from parent element's category", async function () {
+        await using buildIModelResult = await buildIModel(this, async (builder) => {
+          const rootSubject: InstanceKey = { className: SUBJECT_CLASS_NAME, id: IModel.rootSubjectId };
+          const model = insertPhysicalModelWithPartition({ builder, codeValue: "TestPhysicalModel", partitionParentId: rootSubject.id });
+          const parentCategory = insertSpatialCategory({ builder, codeValue: "SpatialCategory" });
+          const childCategory = insertSpatialCategory({ builder, codeValue: "SpatialCategory2" });
+          const parentElement = insertPhysicalElement({ builder, modelId: model.id, categoryId: parentCategory.id });
+          const childElement = insertPhysicalElement({ builder, modelId: model.id, categoryId: childCategory.id, parentId: parentElement.id });
+          return { rootSubject, model, parentCategory, childCategory, parentElement, childElement };
+        });
+        const { imodel, ...keys } = buildIModelResult;
+        using provider = createModelsTreeProvider({ imodel });
+        await validateHierarchy({
+          provider,
+          expect: [
+            NodeValidators.createForInstanceNode({
+              instanceKeys: [keys.model],
+              supportsFiltering: true,
+              children: [
+                NodeValidators.createForInstanceNode({
+                  instanceKeys: [keys.parentCategory],
+                  supportsFiltering: true,
+                  children: [
+                    NodeValidators.createForClassGroupingNode({
+                      className: keys.parentElement.className,
+                      label: "Physical Object",
+                      children: [
+                        NodeValidators.createForInstanceNode({
+                          instanceKeys: [keys.parentElement],
+                          supportsFiltering: true,
+                          children: [
+                            NodeValidators.createForInstanceNode({
+                              instanceKeys: [keys.childCategory],
+                              supportsFiltering: true,
+                              children: [
+                                NodeValidators.createForClassGroupingNode({
+                                  className: keys.childElement.className,
+                                  label: "Physical Object",
+                                  children: [
+                                    NodeValidators.createForInstanceNode({
+                                      instanceKeys: [keys.childElement],
+                                      supportsFiltering: true,
+                                      children: false,
+                                    }),
+                                  ],
+                                }),
+                              ],
+                            }),
+                          ],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          ],
+        });
+      });
+
+      it("hides element's children category when it is the same as parent element's category", async function () {
+        await using buildIModelResult = await buildIModel(this, async (builder) => {
+          const rootSubject: InstanceKey = { className: SUBJECT_CLASS_NAME, id: IModel.rootSubjectId };
+          const model = insertPhysicalModelWithPartition({ builder, codeValue: "TestPhysicalModel", partitionParentId: rootSubject.id });
+          const parentCategory = insertSpatialCategory({ builder, codeValue: "SpatialCategory" });
+          const parentElement = insertPhysicalElement({ builder, modelId: model.id, categoryId: parentCategory.id });
+          const childElement = insertPhysicalElement({ builder, modelId: model.id, categoryId: parentCategory.id, parentId: parentElement.id });
+          return { rootSubject, model, parentCategory, parentElement, childElement };
+        });
+        const { imodel, ...keys } = buildIModelResult;
+        using provider = createModelsTreeProvider({ imodel });
+        await validateHierarchy({
+          provider,
+          expect: [
+            NodeValidators.createForInstanceNode({
+              instanceKeys: [keys.model],
+              supportsFiltering: true,
+              children: [
+                NodeValidators.createForInstanceNode({
+                  instanceKeys: [keys.parentCategory],
+                  supportsFiltering: true,
+                  children: [
+                    NodeValidators.createForClassGroupingNode({
+                      className: keys.parentElement.className,
+                      label: "Physical Object",
+                      children: [
+                        NodeValidators.createForInstanceNode({
+                          instanceKeys: [keys.parentElement],
+                          supportsFiltering: true,
+                          children: [
+                            NodeValidators.createForClassGroupingNode({
+                              className: keys.childElement.className,
+                              label: "Physical Object",
+                              children: [
+                                NodeValidators.createForInstanceNode({
+                                  instanceKeys: [keys.childElement],
+                                  supportsFiltering: true,
+                                  children: false,
+                                }),
+                              ],
+                            }),
+                          ],
+                        }),
+                      ],
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          ],
+        });
+      });
     });
 
     describe("Hierarchy customization", () => {