@itwin/tree-widget-react 4.0.0-alpha.25 → 4.0.0-alpha.26

package/lib/esm/tree-widget-react/components/trees/models-tree/ModelsTreeButtons.js

@@ -3,7 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { firstValueFrom, mergeAll, toArray } from "rxjs";
 import { IconButton } from "@stratakit/bricks";
 import toggle2DSvg from "@stratakit/icons/2d.svg";
 import toggle3DSvg from "@stratakit/icons/3d.svg";
@@ -13,8 +14,8 @@ import visibilityInvertSvg from "@stratakit/icons/visibility-invert.svg";
 import visibilityShowSvg from "@stratakit/icons/visibility-show.svg";
 import { TreeWidget } from "../../../TreeWidget.js";
 import { useFocusedInstancesContext } from "../common/FocusedInstancesContext.js";
-import { CLASS_NAME_Element, CLASS_NAME_GeometricElement3d, CLASS_NAME_GeometricModel3d, CLASS_NAME_InformationPartitionElement, } from "../common/internal/ClassNameDefinitions.js";
-import { useGuid } from "../common/internal/useGuid.js";
+import { useSharedTreeContextInternal } from "../common/internal/SharedTreeContextProviderInternal.js";
+import { getClassesByView } from "../common/internal/Utils.js";
 import { areAllModelsVisible, hideAllModels, invertAllModels, showAll, toggleModels } from "../common/Utils.js";
 /**
  * Custom hook that creates props required to render `ModelsTreeComponent` header button.
@@ -31,7 +32,7 @@ import { areAllModelsVisible, hideAllModels, invertAllModels, showAll, toggleMod
  *   <ModelsTree {...treeProps} onModelsFiltered={onModelsFiltered} />
  * </TreeWithHeader>
  * ```
- *
+ * **Note:** Requires `SharedTreeContextProvider` to be present in components tree above.
  *
  * @public
  */
@@ -49,44 +50,44 @@ export function useModelsTreeButtonProps({ imodel, viewport }) {
 }
 function useAvailableModels(imodel) {
     const [availableModels, setAvailableModels] = useState([]);
+    const { getBaseIdsCache } = useSharedTreeContextInternal();
+    const baseIdsCache = getBaseIdsCache({ imodel, elementClassName: getClassesByView("3d").elementClass, type: "3d" });
     useEffect(() => {
-        queryModelsForHeaderActions(imodel)
-            .then((modelInfos) => {
-            setAvailableModels(modelInfos);
-        })
-            .catch(() => {
-            setAvailableModels([]);
-        });
-    }, [imodel]);
+        const getModels = async () => {
+            try {
+                const models = await firstValueFrom(baseIdsCache.getAllModels());
+                setAvailableModels(models.map((id) => ({ id })));
+            }
+            catch {
+                setAvailableModels([]);
+            }
+        };
+        void getModels();
+    }, [baseIdsCache]);
     return availableModels;
 }
-async function queryModelsForHeaderActions(iModel) {
-    const queryParams = {
-        from: CLASS_NAME_GeometricModel3d,
-        where: `
-        EXISTS (
-          SELECT 1
-          FROM ${CLASS_NAME_Element} e
-          WHERE e.ECClassId IS (${CLASS_NAME_GeometricElement3d}, ${CLASS_NAME_InformationPartitionElement})
-            AND e.ECInstanceId = GeometricModel3d.ModeledElement.Id
-        )
-      `,
-        wantPrivate: false,
-    };
-    const modelProps = await iModel.models.queryProps(queryParams);
-    return modelProps.map(({ id, isPlanProjection }) => ({ id, isPlanProjection })).filter(({ id }) => id);
-}
-/** @public */
+/**
+ * Requires `SharedTreeContextProvider` to be present in component tree above.
+ * @public
+ */
 export function ShowAllButton(props) {
-    const componentId = useGuid();
+    const { getBaseIdsCache } = useSharedTreeContextInternal();
+    const baseIdsCache = getBaseIdsCache({ imodel: props.viewport.iModel, elementClassName: getClassesByView("3d").elementClass, type: "3d" });
+    const onClick = useCallback(async () => {
+        try {
+            const categories = await firstValueFrom(baseIdsCache.getAllCategoriesOfElements().pipe(mergeAll(), toArray()));
+            return await showAll({
+                models: props.models.map((model) => model.id),
+                categories,
+                viewport: props.viewport,
+            });
+        }
+        catch { }
+    }, [baseIdsCache, props.viewport, props.models]);
     return (_jsx(IconButton, { variant: "ghost", label: TreeWidget.translate("modelsTree.buttons.showAll.tooltip"), onClick: () => {
             // cspell:disable-next-line
             props.onFeatureUsed?.("models-tree-showall");
-            void showAll({
-                models: props.models.map((model) => model.id),
-                viewport: props.viewport,
-                componentId,
-            }).catch(() => { });
+            void onClick();
         }, icon: visibilityShowSvg }));
 }
 /** @public */

package/lib/esm/tree-widget-react/components/trees/models-tree/ModelsTreeButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModelsTreeButtons.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/models-tree/ModelsTreeButtons.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 *--------------------------------------------------------------------------------------------*/\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport { IconButton } from \"@stratakit/bricks\";\nimport toggle2DSvg from \"@stratakit/icons/2d.svg\";\nimport toggle3DSvg from \"@stratakit/icons/3d.svg\";\nimport focusModeSvg from \"@stratakit/icons/cursor-click.svg\";\nimport visibilityHideSvg from \"@stratakit/icons/visibility-hide.svg\";\nimport visibilityInvertSvg from \"@stratakit/icons/visibility-invert.svg\";\nimport visibilityShowSvg from \"@stratakit/icons/visibility-show.svg\";\nimport { TreeWidget } from \"../../../TreeWidget.js\";\nimport { useFocusedInstancesContext } from \"../common/FocusedInstancesContext.js\";\nimport {\n  CLASS_NAME_Element,\n  CLASS_NAME_GeometricElement3d,\n  CLASS_NAME_GeometricModel3d,\n  CLASS_NAME_InformationPartitionElement,\n} from \"../common/internal/ClassNameDefinitions.js\";\nimport { useGuid } from \"../common/internal/useGuid.js\";\nimport { areAllModelsVisible, hideAllModels, invertAllModels, showAll, toggleModels } from \"../common/Utils.js\";\n\nimport type { Id64String } from \"@itwin/core-bentley\";\nimport type { GeometricModel3dProps, ModelQueryParams } from \"@itwin/core-common\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeToolbarButtonProps } from \"../../tree-header/SelectableTree.js\";\nimport type { TreeWidgetViewport } from \"../common/TreeWidgetViewport.js\";\n\n/**\n * Information about a single Model.\n * @public\n */\nexport interface ModelInfo {\n  id: string;\n  isPlanProjection?: boolean;\n}\n\n/**\n * Props that get passed to `ModelsTreeComponent` header button renderer.\n * @see ModelTreeComponentProps.headerButtons\n * @public\n */\nexport interface ModelsTreeHeaderButtonProps extends TreeToolbarButtonProps {\n  /** A list of models available in the iModel. */\n  models: ModelInfo[];\n}\n\n/**\n * Custom hook that creates props required to render `ModelsTreeComponent` header button.\n *\n * Example:\n * ```tsx\n * const { buttonProps, onModelsFiltered } = useModelsTreeButtonProps({ imodel, viewport });\n * <TreeWithHeader\n *   buttons={[\n *     <ModelsTreeComponent.ShowAllButton {...buttonProps} />,\n *     <ModelsTreeComponent.HideAllButton {...buttonProps} />,\n *   ]}\n * >\n *   <ModelsTree {...treeProps} onModelsFiltered={onModelsFiltered} />\n * </TreeWithHeader>\n * ```\n *\n *\n * @public\n */\nexport function useModelsTreeButtonProps({ imodel, viewport }: { imodel: IModelConnection; viewport: TreeWidgetViewport }): {\n  buttonProps: Pick<ModelsTreeHeaderButtonProps, \"models\" | \"viewport\">;\n  onModelsFiltered: (models: Id64String[] | undefined) => void;\n} {\n  const [filteredModels, setFilteredModels] = useState<Id64String[] | undefined>();\n\n  const models = useAvailableModels(imodel);\n  const availableModels = useMemo(() => (!filteredModels ? models : models.filter((model) => filteredModels.includes(model.id))), [models, filteredModels]);\n  return {\n    buttonProps: {\n      models: availableModels,\n      viewport,\n    },\n    onModelsFiltered: setFilteredModels,\n  };\n}\n\nfunction useAvailableModels(imodel: IModelConnection): ModelInfo[] {\n  const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);\n\n  useEffect(() => {\n    queryModelsForHeaderActions(imodel)\n      .then((modelInfos: ModelInfo[]) => {\n        setAvailableModels(modelInfos);\n      })\n      .catch(() => {\n        setAvailableModels([]);\n      });\n  }, [imodel]);\n\n  return availableModels;\n}\n\nasync function queryModelsForHeaderActions(iModel: IModelConnection) {\n  const queryParams: ModelQueryParams = {\n    from: CLASS_NAME_GeometricModel3d,\n    where: `\n        EXISTS (\n          SELECT 1\n          FROM ${CLASS_NAME_Element} e\n          WHERE e.ECClassId IS (${CLASS_NAME_GeometricElement3d}, ${CLASS_NAME_InformationPartitionElement})\n            AND e.ECInstanceId = GeometricModel3d.ModeledElement.Id\n        )\n      `,\n    wantPrivate: false,\n  };\n\n  const modelProps = await iModel.models.queryProps(queryParams);\n  return modelProps.map(({ id, isPlanProjection }: GeometricModel3dProps) => ({ id, isPlanProjection })).filter(({ id }) => id) as ModelInfo[];\n}\n\n/** @public */\nexport type ModelsTreeHeaderButtonType = (props: ModelsTreeHeaderButtonProps) => React.ReactElement | null;\n\n/** @public */\nexport function ShowAllButton(props: ModelsTreeHeaderButtonProps) {\n  const componentId = useGuid();\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"modelsTree.buttons.showAll.tooltip\")}\n      onClick={() => {\n        // cspell:disable-next-line\n        props.onFeatureUsed?.(\"models-tree-showall\");\n        void showAll({\n          models: props.models.map((model) => model.id),\n          viewport: props.viewport,\n          componentId,\n        }).catch(() => {});\n      }}\n      icon={visibilityShowSvg}\n    />\n  );\n}\n\n/** @public */\nexport function HideAllButton(props: ModelsTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"modelsTree.buttons.hideAll.tooltip\")}\n      onClick={() => {\n        // cspell:disable-next-line\n        props.onFeatureUsed?.(\"models-tree-hideall\");\n        hideAllModels(\n          props.models.map((model) => model.id),\n          props.viewport,\n        );\n      }}\n      icon={visibilityHideSvg}\n    />\n  );\n}\n\n/** @public */\nexport function InvertButton(props: ModelsTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"modelsTree.buttons.invert.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(\"models-tree-invert\");\n        invertAllModels(\n          props.models.map((model) => model.id),\n          props.viewport,\n        );\n      }}\n      icon={visibilityInvertSvg}\n    />\n  );\n}\n\n/** @public */\nexport function View2DButton(props: ModelsTreeHeaderButtonProps) {\n  const models2d = useMemo(() => {\n    return props.models.filter((model) => model.isPlanProjection).map((model) => model.id);\n  }, [props.models]);\n\n  const [is2dToggleActive, setIs2dToggleActive] = useState(false);\n\n  useEffect(() => {\n    setIs2dToggleActive(areAllModelsVisible(models2d, props.viewport));\n    return props.viewport.onDisplayedModelsChanged.addListener(() => setIs2dToggleActive(areAllModelsVisible(models2d, props.viewport)));\n  }, [models2d, props.viewport]);\n\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"modelsTree.buttons.toggle2d.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(\"models-tree-view2d\");\n        toggleModels(models2d, is2dToggleActive, props.viewport);\n      }}\n      aria-disabled={models2d.length === 0}\n      active={is2dToggleActive}\n      icon={toggle2DSvg}\n    />\n  );\n}\n\n/** @public */\nexport function View3DButton(props: ModelsTreeHeaderButtonProps) {\n  const models3d = useMemo(() => {\n    return props.models.filter((model) => !model.isPlanProjection).map((model) => model.id);\n  }, [props.models]);\n\n  const [is3dToggleActive, setIs3dToggleActive] = useState(false);\n\n  useEffect(() => {\n    setIs3dToggleActive(areAllModelsVisible(models3d, props.viewport));\n    return props.viewport.onDisplayedModelsChanged.addListener(() => setIs3dToggleActive(areAllModelsVisible(models3d, props.viewport)));\n  }, [models3d, props.viewport]);\n\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"modelsTree.buttons.toggle3d.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(\"models-tree-view3d\");\n        toggleModels(models3d, is3dToggleActive, props.viewport);\n      }}\n      aria-disabled={models3d.length === 0}\n      active={is3dToggleActive}\n      icon={toggle3DSvg}\n    />\n  );\n}\n\n/** @public */\nexport function ToggleInstancesFocusButton({ onFeatureUsed, disabled }: { onFeatureUsed?: (feature: string) => void; disabled?: boolean }) {\n  const { enabled, toggle } = useFocusedInstancesContext();\n  const label = disabled\n    ? TreeWidget.translate(\"modelsTree.buttons.toggleFocusMode.disabled.tooltip\")\n    : enabled\n      ? TreeWidget.translate(\"modelsTree.buttons.toggleFocusMode.disable.tooltip\")\n      : TreeWidget.translate(\"modelsTree.buttons.toggleFocusMode.enable.tooltip\");\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={label}\n      onClick={() => {\n        // cspell:disable-next-line\n        onFeatureUsed?.(\"models-tree-instancesfocus\");\n        toggle();\n      }}\n      aria-disabled={disabled}\n      active={enabled}\n      icon={focusModeSvg}\n    />\n  );\n}\n"]}
+{"version":3,"file":"ModelsTreeButtons.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/models-tree/ModelsTreeButtons.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 *--------------------------------------------------------------------------------------------*/\n\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { firstValueFrom, mergeAll, toArray } from \"rxjs\";\nimport { IconButton } from \"@stratakit/bricks\";\nimport toggle2DSvg from \"@stratakit/icons/2d.svg\";\nimport toggle3DSvg from \"@stratakit/icons/3d.svg\";\nimport focusModeSvg from \"@stratakit/icons/cursor-click.svg\";\nimport visibilityHideSvg from \"@stratakit/icons/visibility-hide.svg\";\nimport visibilityInvertSvg from \"@stratakit/icons/visibility-invert.svg\";\nimport visibilityShowSvg from \"@stratakit/icons/visibility-show.svg\";\nimport { TreeWidget } from \"../../../TreeWidget.js\";\nimport { useFocusedInstancesContext } from \"../common/FocusedInstancesContext.js\";\nimport { useSharedTreeContextInternal } from \"../common/internal/SharedTreeContextProviderInternal.js\";\nimport { getClassesByView } from \"../common/internal/Utils.js\";\nimport { areAllModelsVisible, hideAllModels, invertAllModels, showAll, toggleModels } from \"../common/Utils.js\";\n\nimport type { ReactElement } from \"react\";\nimport type { Id64String } from \"@itwin/core-bentley\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeToolbarButtonProps } from \"../../tree-header/SelectableTree.js\";\nimport type { TreeWidgetViewport } from \"../common/TreeWidgetViewport.js\";\n\n/**\n * Information about a single Model.\n * @public\n */\nexport interface ModelInfo {\n  id: string;\n  isPlanProjection?: boolean;\n}\n\n/**\n * Props that get passed to `ModelsTreeComponent` header button renderer.\n * @see ModelTreeComponentProps.headerButtons\n * @public\n */\nexport interface ModelsTreeHeaderButtonProps extends TreeToolbarButtonProps {\n  /** A list of models available in the iModel. */\n  models: ModelInfo[];\n}\n\n/**\n * Custom hook that creates props required to render `ModelsTreeComponent` header button.\n *\n * Example:\n * ```tsx\n * const { buttonProps, onModelsFiltered } = useModelsTreeButtonProps({ imodel, viewport });\n * <TreeWithHeader\n *   buttons={[\n *     <ModelsTreeComponent.ShowAllButton {...buttonProps} />,\n *     <ModelsTreeComponent.HideAllButton {...buttonProps} />,\n *   ]}\n * >\n *   <ModelsTree {...treeProps} onModelsFiltered={onModelsFiltered} />\n * </TreeWithHeader>\n * ```\n * **Note:** Requires `SharedTreeContextProvider` to be present in components tree above.\n *\n * @public\n */\nexport function useModelsTreeButtonProps({ imodel, viewport }: { imodel: IModelConnection; viewport: TreeWidgetViewport }): {\n  buttonProps: Pick<ModelsTreeHeaderButtonProps, \"models\" | \"viewport\">;\n  onModelsFiltered: (models: Id64String[] | undefined) => void;\n} {\n  const [filteredModels, setFilteredModels] = useState<Id64String[] | undefined>();\n  const models = useAvailableModels(imodel);\n  const availableModels = useMemo(() => (!filteredModels ? models : models.filter((model) => filteredModels.includes(model.id))), [models, filteredModels]);\n  return {\n    buttonProps: {\n      models: availableModels,\n      viewport,\n    },\n    onModelsFiltered: setFilteredModels,\n  };\n}\n\nfunction useAvailableModels(imodel: IModelConnection): ModelInfo[] {\n  const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);\n  const { getBaseIdsCache } = useSharedTreeContextInternal();\n  const baseIdsCache = getBaseIdsCache({ imodel, elementClassName: getClassesByView(\"3d\").elementClass, type: \"3d\" });\n  useEffect(() => {\n    const getModels = async () => {\n      try {\n        const models = await firstValueFrom(baseIdsCache.getAllModels());\n        setAvailableModels(models.map((id) => ({ id })));\n      } catch {\n        setAvailableModels([]);\n      }\n    };\n    void getModels();\n  }, [baseIdsCache]);\n\n  return availableModels;\n}\n\n/** @public */\nexport type ModelsTreeHeaderButtonType = (props: ModelsTreeHeaderButtonProps) => ReactElement | null;\n\n/**\n * Requires `SharedTreeContextProvider` to be present in component tree above.\n * @public\n */\nexport function ShowAllButton(props: ModelsTreeHeaderButtonProps) {\n  const { getBaseIdsCache } = useSharedTreeContextInternal();\n  const baseIdsCache = getBaseIdsCache({ imodel: props.viewport.iModel, elementClassName: getClassesByView(\"3d\").elementClass, type: \"3d\" });\n  const onClick = useCallback(async () => {\n    try {\n      const categories = await firstValueFrom(baseIdsCache.getAllCategoriesOfElements().pipe(mergeAll(), toArray()));\n      return await showAll({\n        models: props.models.map((model) => model.id),\n        categories,\n        viewport: props.viewport,\n      });\n    } catch {}\n  }, [baseIdsCache, props.viewport, props.models]);\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"modelsTree.buttons.showAll.tooltip\")}\n      onClick={() => {\n        // cspell:disable-next-line\n        props.onFeatureUsed?.(\"models-tree-showall\");\n        void onClick();\n      }}\n      icon={visibilityShowSvg}\n    />\n  );\n}\n\n/** @public */\nexport function HideAllButton(props: ModelsTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"modelsTree.buttons.hideAll.tooltip\")}\n      onClick={() => {\n        // cspell:disable-next-line\n        props.onFeatureUsed?.(\"models-tree-hideall\");\n        hideAllModels(\n          props.models.map((model) => model.id),\n          props.viewport,\n        );\n      }}\n      icon={visibilityHideSvg}\n    />\n  );\n}\n\n/** @public */\nexport function InvertButton(props: ModelsTreeHeaderButtonProps) {\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"modelsTree.buttons.invert.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(\"models-tree-invert\");\n        invertAllModels(\n          props.models.map((model) => model.id),\n          props.viewport,\n        );\n      }}\n      icon={visibilityInvertSvg}\n    />\n  );\n}\n\n/** @public */\nexport function View2DButton(props: ModelsTreeHeaderButtonProps) {\n  const models2d = useMemo(() => {\n    return props.models.filter((model) => model.isPlanProjection).map((model) => model.id);\n  }, [props.models]);\n\n  const [is2dToggleActive, setIs2dToggleActive] = useState(false);\n\n  useEffect(() => {\n    setIs2dToggleActive(areAllModelsVisible(models2d, props.viewport));\n    return props.viewport.onDisplayedModelsChanged.addListener(() => setIs2dToggleActive(areAllModelsVisible(models2d, props.viewport)));\n  }, [models2d, props.viewport]);\n\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"modelsTree.buttons.toggle2d.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(\"models-tree-view2d\");\n        toggleModels(models2d, is2dToggleActive, props.viewport);\n      }}\n      aria-disabled={models2d.length === 0}\n      active={is2dToggleActive}\n      icon={toggle2DSvg}\n    />\n  );\n}\n\n/** @public */\nexport function View3DButton(props: ModelsTreeHeaderButtonProps) {\n  const models3d = useMemo(() => {\n    return props.models.filter((model) => !model.isPlanProjection).map((model) => model.id);\n  }, [props.models]);\n\n  const [is3dToggleActive, setIs3dToggleActive] = useState(false);\n\n  useEffect(() => {\n    setIs3dToggleActive(areAllModelsVisible(models3d, props.viewport));\n    return props.viewport.onDisplayedModelsChanged.addListener(() => setIs3dToggleActive(areAllModelsVisible(models3d, props.viewport)));\n  }, [models3d, props.viewport]);\n\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={TreeWidget.translate(\"modelsTree.buttons.toggle3d.tooltip\")}\n      onClick={() => {\n        props.onFeatureUsed?.(\"models-tree-view3d\");\n        toggleModels(models3d, is3dToggleActive, props.viewport);\n      }}\n      aria-disabled={models3d.length === 0}\n      active={is3dToggleActive}\n      icon={toggle3DSvg}\n    />\n  );\n}\n\n/** @public */\nexport function ToggleInstancesFocusButton({ onFeatureUsed, disabled }: { onFeatureUsed?: (feature: string) => void; disabled?: boolean }) {\n  const { enabled, toggle } = useFocusedInstancesContext();\n  const label = disabled\n    ? TreeWidget.translate(\"modelsTree.buttons.toggleFocusMode.disabled.tooltip\")\n    : enabled\n      ? TreeWidget.translate(\"modelsTree.buttons.toggleFocusMode.disable.tooltip\")\n      : TreeWidget.translate(\"modelsTree.buttons.toggleFocusMode.enable.tooltip\");\n  return (\n    <IconButton\n      variant={\"ghost\"}\n      label={label}\n      onClick={() => {\n        // cspell:disable-next-line\n        onFeatureUsed?.(\"models-tree-instancesfocus\");\n        toggle();\n      }}\n      aria-disabled={disabled}\n      active={enabled}\n      icon={focusModeSvg}\n    />\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/models-tree/ModelsTreeComponent.d.ts

@@ -30,6 +30,7 @@ interface ModelsTreeComponentProps extends Pick<ModelsTreeProps, "selectionStora
  * A component that renders `ModelsTree` and a header with filtering capabilities
  * and header buttons.
  *
+ * **Note:** Wrap tree components with a single `SharedTreeContextProvider` to improve trees' performance.
  * @public
  */
 export declare const ModelsTreeComponent: {

package/lib/esm/tree-widget-react/components/trees/models-tree/ModelsTreeComponent.js

@@ -9,6 +9,7 @@ import { useActiveIModelConnection } from "@itwin/appui-react";
 import { TreeWidget } from "../../../TreeWidget.js";
 import { SelectableTree } from "../../tree-header/SelectableTree.js";
 import { FocusedInstancesContextProvider, useFocusedInstancesContext } from "../common/FocusedInstancesContext.js";
+import { SharedTreeContextProviderInternal } from "../common/internal/SharedTreeContextProviderInternal.js";
 import { useActiveTreeWidgetViewport } from "../common/internal/UseActiveTreeWidgetViewport.js";
 import { TelemetryContextProvider } from "../common/UseTelemetryContext.js";
 import { ModelsTree } from "./ModelsTree.js";
@@ -17,6 +18,7 @@ import { HideAllButton, InvertButton, ShowAllButton, ToggleInstancesFocusButton,
  * A component that renders `ModelsTree` and a header with filtering capabilities
  * and header buttons.
  *
+ * **Note:** Wrap tree components with a single `SharedTreeContextProvider` to improve trees' performance.
  * @public
  */
 export const ModelsTreeComponent = (props) => {
@@ -25,7 +27,7 @@ export const ModelsTreeComponent = (props) => {
     if (!iModel || !viewport) {
         return null;
     }
-    return (_jsx(FocusedInstancesContextProvider, { selectionStorage: props.selectionStorage, imodelKey: iModel.key, children: _jsx(ModelsTreeComponentImpl, { ...props, iModel: iModel, viewport: viewport }) }));
+    return (_jsx(FocusedInstancesContextProvider, { selectionStorage: props.selectionStorage, imodelKey: iModel.key, children: _jsx(SharedTreeContextProviderInternal, { showWarning: true, children: _jsx(ModelsTreeComponentImpl, { ...props, iModel: iModel, viewport: viewport }) }) }));
 };
 /**
  * Renders a "Show all" button that enables display of all models.

package/lib/esm/tree-widget-react/components/trees/models-tree/ModelsTreeComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModelsTreeComponent.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/models-tree/ModelsTreeComponent.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 *--------------------------------------------------------------------------------------------*/\n\nimport { Fragment, useEffect } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { TreeWidget } from \"../../../TreeWidget.js\";\nimport { SelectableTree } from \"../../tree-header/SelectableTree.js\";\nimport { FocusedInstancesContextProvider, useFocusedInstancesContext } from \"../common/FocusedInstancesContext.js\";\nimport { useActiveTreeWidgetViewport } from \"../common/internal/UseActiveTreeWidgetViewport.js\";\nimport { TelemetryContextProvider } from \"../common/UseTelemetryContext.js\";\nimport { ModelsTree } from \"./ModelsTree.js\";\nimport {\n  HideAllButton,\n  InvertButton,\n  ShowAllButton,\n  ToggleInstancesFocusButton,\n  useModelsTreeButtonProps,\n  View2DButton,\n  View3DButton,\n} from \"./ModelsTreeButtons.js\";\n\nimport type { ReactNode } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeWidgetViewport } from \"../common/TreeWidgetViewport.js\";\nimport type { ModelsTreeProps } from \"./ModelsTree.js\";\nimport type { ModelsTreeHeaderButtonProps, ModelsTreeHeaderButtonType } from \"./ModelsTreeButtons.js\";\n\n/** @public */\ninterface ModelsTreeComponentProps\n  extends Pick<\n    ModelsTreeProps,\n    | \"selectionStorage\"\n    | \"hierarchyLevelConfig\"\n    | \"selectionMode\"\n    | \"selectionPredicate\"\n    | \"hierarchyConfig\"\n    | \"visibilityHandlerOverrides\"\n    | \"getSearchPaths\"\n    | \"searchText\"\n    | \"emptyTreeContent\"\n    | \"getInlineActions\"\n    | \"getMenuActions\"\n    | \"getContextMenuActions\"\n    | \"getTreeItemProps\"\n    | \"getSubTreePaths\"\n    | \"treeLabel\"\n  > {\n  /**\n   * Renderers of header buttons. Defaults to:\n   * ```ts\n   * [\n   *   ModelsTreeComponent.ShowAllButton,\n   *   ModelsTreeComponent.HideAllButton,\n   *   ModelsTreeComponent.InvertButton,\n   *   ModelsTreeComponent.View2DButton,\n   *   ModelsTreeComponent.View3DButton,\n   *   ModelsTreeComponent.ToggleInstancesFocusButton,\n   * ]\n   * ```\n   */\n  headerButtons?: Array<(props: ModelsTreeHeaderButtonProps) => React.ReactNode>;\n  /**\n   * Viewport used for visibility controls.\n   *\n   * When viewport is not provided, `IModelApp.viewManager.selectedView` will be used.\n   */\n  viewport?: TreeWidgetViewport;\n  onPerformanceMeasured?: (featureId: string, duration: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that renders `ModelsTree` and a header with filtering capabilities\n * and header buttons.\n *\n * @public\n */\nexport const ModelsTreeComponent = (props: ModelsTreeComponentProps) => {\n  const iModel = useActiveIModelConnection();\n  const viewport = useActiveTreeWidgetViewport({ treeWidgetViewport: props.viewport });\n\n  if (!iModel || !viewport) {\n    return null;\n  }\n\n  return (\n    <FocusedInstancesContextProvider selectionStorage={props.selectionStorage} imodelKey={iModel.key}>\n      <ModelsTreeComponentImpl {...props} iModel={iModel} viewport={viewport} />\n    </FocusedInstancesContextProvider>\n  );\n};\n\n/**\n * Renders a \"Show all\" button that enables display of all models.\n * @public\n */\nModelsTreeComponent.ShowAllButton = ShowAllButton as ModelsTreeHeaderButtonType;\n\n/**\n * Renders a \"Hide all\" button that disables display of all models.\n * @public\n */\nModelsTreeComponent.HideAllButton = HideAllButton as ModelsTreeHeaderButtonType;\n\n/**\n * Renders an \"Invert all\" button that inverts display of all models.\n * @public\n */\nModelsTreeComponent.InvertButton = InvertButton as ModelsTreeHeaderButtonType;\n\n/**\n * Renders a \"View 2D\" button that enables display of all plan projection models and disables all others.\n * @public\n */\nModelsTreeComponent.View2DButton = View2DButton as ModelsTreeHeaderButtonType;\n\n/**\n * Renders a \"View 3D\" button that enables display of all non-plan projection models and disables all plan projection ones.\n * @public\n */\nModelsTreeComponent.View3DButton = View3DButton as ModelsTreeHeaderButtonType;\n\n/**\n * Renders an \"Instance focus\" toggle button that enables/disables instances focusing mode.\n *\n * Requires instances focus context to be provided using `FocusedInstancesContextProvider`. The context\n * is provided automatically, when using `ModelsTreeComponent`, but needs to be provided by consumers\n * when rendering `ToggleInstancesFocusButton` outside of `ModelsTreeComponent`.\n *\n * @public\n */\nModelsTreeComponent.ToggleInstancesFocusButton = ToggleInstancesFocusButton as ModelsTreeHeaderButtonType;\n\n/**\n * Id of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.\n * @public\n */\nModelsTreeComponent.id = \"models-tree-v2\";\n\n/**\n * Label of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.\n * @public\n */\nModelsTreeComponent.getLabel = () => TreeWidget.translate(\"modelsTree.label\");\n\nfunction ModelsTreeComponentImpl({\n  iModel,\n  viewport,\n  headerButtons,\n  onFeatureUsed,\n  onPerformanceMeasured,\n  searchText,\n  treeLabel,\n  ...treeProps\n}: ModelsTreeComponentProps & { iModel: IModelConnection; viewport: TreeWidgetViewport }) {\n  const { buttonProps, onModelsFiltered } = useModelsTreeButtonProps({ imodel: iModel, viewport });\n  const { enabled: instanceFocusEnabled, toggle: toggleInstanceFocus } = useFocusedInstancesContext();\n\n  const buttons: ReactNode = headerButtons\n    ? headerButtons.map((btn, index) => <Fragment key={index}>{btn({ ...buttonProps, onFeatureUsed })}</Fragment>)\n    : [\n        <ShowAllButton {...buttonProps} key=\"show-all-btn\" onFeatureUsed={onFeatureUsed} />,\n        <HideAllButton {...buttonProps} key=\"hide-all-btn\" onFeatureUsed={onFeatureUsed} />,\n        <InvertButton {...buttonProps} key=\"invert-all-btn\" onFeatureUsed={onFeatureUsed} />,\n        <View2DButton {...buttonProps} key=\"view-2d-btn\" onFeatureUsed={onFeatureUsed} />,\n        <View3DButton {...buttonProps} key=\"view-3d-btn\" onFeatureUsed={onFeatureUsed} />,\n        <ToggleInstancesFocusButton disabled={searchText !== undefined} key=\"toggle-instances-focus-btn\" onFeatureUsed={onFeatureUsed} />,\n      ];\n\n  useEffect(() => {\n    if (instanceFocusEnabled && searchText !== undefined) {\n      toggleInstanceFocus();\n    }\n  }, [instanceFocusEnabled, searchText, toggleInstanceFocus]);\n\n  return (\n    <TelemetryContextProvider componentIdentifier={ModelsTreeComponent.id} onFeatureUsed={onFeatureUsed} onPerformanceMeasured={onPerformanceMeasured}>\n      <SelectableTree buttons={buttons}>\n        <ModelsTree {...treeProps} imodel={iModel} activeView={viewport} searchText={searchText} treeLabel={treeLabel} onModelsFiltered={onModelsFiltered} />\n      </SelectableTree>\n    </TelemetryContextProvider>\n  );\n}\n"]}
+{"version":3,"file":"ModelsTreeComponent.js","sourceRoot":"","sources":["../../../../../../src/tree-widget-react/components/trees/models-tree/ModelsTreeComponent.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 *--------------------------------------------------------------------------------------------*/\n\nimport { Fragment, useEffect } from \"react\";\nimport { useActiveIModelConnection } from \"@itwin/appui-react\";\nimport { TreeWidget } from \"../../../TreeWidget.js\";\nimport { SelectableTree } from \"../../tree-header/SelectableTree.js\";\nimport { FocusedInstancesContextProvider, useFocusedInstancesContext } from \"../common/FocusedInstancesContext.js\";\nimport { SharedTreeContextProviderInternal } from \"../common/internal/SharedTreeContextProviderInternal.js\";\nimport { useActiveTreeWidgetViewport } from \"../common/internal/UseActiveTreeWidgetViewport.js\";\nimport { TelemetryContextProvider } from \"../common/UseTelemetryContext.js\";\nimport { ModelsTree } from \"./ModelsTree.js\";\nimport {\n  HideAllButton,\n  InvertButton,\n  ShowAllButton,\n  ToggleInstancesFocusButton,\n  useModelsTreeButtonProps,\n  View2DButton,\n  View3DButton,\n} from \"./ModelsTreeButtons.js\";\n\nimport type { ReactNode } from \"react\";\nimport type { IModelConnection } from \"@itwin/core-frontend\";\nimport type { TreeWidgetViewport } from \"../common/TreeWidgetViewport.js\";\nimport type { ModelsTreeProps } from \"./ModelsTree.js\";\nimport type { ModelsTreeHeaderButtonProps, ModelsTreeHeaderButtonType } from \"./ModelsTreeButtons.js\";\n\n/** @public */\ninterface ModelsTreeComponentProps extends Pick<\n  ModelsTreeProps,\n  | \"selectionStorage\"\n  | \"hierarchyLevelConfig\"\n  | \"selectionMode\"\n  | \"selectionPredicate\"\n  | \"hierarchyConfig\"\n  | \"visibilityHandlerOverrides\"\n  | \"getSearchPaths\"\n  | \"searchText\"\n  | \"emptyTreeContent\"\n  | \"getInlineActions\"\n  | \"getMenuActions\"\n  | \"getContextMenuActions\"\n  | \"getTreeItemProps\"\n  | \"getSubTreePaths\"\n  | \"treeLabel\"\n> {\n  /**\n   * Renderers of header buttons. Defaults to:\n   * ```ts\n   * [\n   *   ModelsTreeComponent.ShowAllButton,\n   *   ModelsTreeComponent.HideAllButton,\n   *   ModelsTreeComponent.InvertButton,\n   *   ModelsTreeComponent.View2DButton,\n   *   ModelsTreeComponent.View3DButton,\n   *   ModelsTreeComponent.ToggleInstancesFocusButton,\n   * ]\n   * ```\n   */\n  headerButtons?: Array<(props: ModelsTreeHeaderButtonProps) => React.ReactNode>;\n  /**\n   * Viewport used for visibility controls.\n   *\n   * When viewport is not provided, `IModelApp.viewManager.selectedView` will be used.\n   */\n  viewport?: TreeWidgetViewport;\n  onPerformanceMeasured?: (featureId: string, duration: number) => void;\n  onFeatureUsed?: (feature: string) => void;\n}\n\n/**\n * A component that renders `ModelsTree` and a header with filtering capabilities\n * and header buttons.\n *\n * **Note:** Wrap tree components with a single `SharedTreeContextProvider` to improve trees' performance.\n * @public\n */\nexport const ModelsTreeComponent = (props: ModelsTreeComponentProps) => {\n  const iModel = useActiveIModelConnection();\n  const viewport = useActiveTreeWidgetViewport({ treeWidgetViewport: props.viewport });\n\n  if (!iModel || !viewport) {\n    return null;\n  }\n\n  return (\n    <FocusedInstancesContextProvider selectionStorage={props.selectionStorage} imodelKey={iModel.key}>\n      <SharedTreeContextProviderInternal showWarning={true}>\n        <ModelsTreeComponentImpl {...props} iModel={iModel} viewport={viewport} />\n      </SharedTreeContextProviderInternal>\n    </FocusedInstancesContextProvider>\n  );\n};\n\n/**\n * Renders a \"Show all\" button that enables display of all models.\n * @public\n */\nModelsTreeComponent.ShowAllButton = ShowAllButton as ModelsTreeHeaderButtonType;\n\n/**\n * Renders a \"Hide all\" button that disables display of all models.\n * @public\n */\nModelsTreeComponent.HideAllButton = HideAllButton as ModelsTreeHeaderButtonType;\n\n/**\n * Renders an \"Invert all\" button that inverts display of all models.\n * @public\n */\nModelsTreeComponent.InvertButton = InvertButton as ModelsTreeHeaderButtonType;\n\n/**\n * Renders a \"View 2D\" button that enables display of all plan projection models and disables all others.\n * @public\n */\nModelsTreeComponent.View2DButton = View2DButton as ModelsTreeHeaderButtonType;\n\n/**\n * Renders a \"View 3D\" button that enables display of all non-plan projection models and disables all plan projection ones.\n * @public\n */\nModelsTreeComponent.View3DButton = View3DButton as ModelsTreeHeaderButtonType;\n\n/**\n * Renders an \"Instance focus\" toggle button that enables/disables instances focusing mode.\n *\n * Requires instances focus context to be provided using `FocusedInstancesContextProvider`. The context\n * is provided automatically, when using `ModelsTreeComponent`, but needs to be provided by consumers\n * when rendering `ToggleInstancesFocusButton` outside of `ModelsTreeComponent`.\n *\n * @public\n */\nModelsTreeComponent.ToggleInstancesFocusButton = ToggleInstancesFocusButton as ModelsTreeHeaderButtonType;\n\n/**\n * Id of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.\n * @public\n */\nModelsTreeComponent.id = \"models-tree-v2\";\n\n/**\n * Label of the component. May be used when a creating a `TreeDefinition` for `SelectableTree`.\n * @public\n */\nModelsTreeComponent.getLabel = () => TreeWidget.translate(\"modelsTree.label\");\n\nfunction ModelsTreeComponentImpl({\n  iModel,\n  viewport,\n  headerButtons,\n  onFeatureUsed,\n  onPerformanceMeasured,\n  searchText,\n  treeLabel,\n  ...treeProps\n}: ModelsTreeComponentProps & { iModel: IModelConnection; viewport: TreeWidgetViewport }) {\n  const { buttonProps, onModelsFiltered } = useModelsTreeButtonProps({ imodel: iModel, viewport });\n  const { enabled: instanceFocusEnabled, toggle: toggleInstanceFocus } = useFocusedInstancesContext();\n\n  const buttons: ReactNode = headerButtons\n    ? headerButtons.map((btn, index) => <Fragment key={index}>{btn({ ...buttonProps, onFeatureUsed })}</Fragment>)\n    : [\n        <ShowAllButton {...buttonProps} key=\"show-all-btn\" onFeatureUsed={onFeatureUsed} />,\n        <HideAllButton {...buttonProps} key=\"hide-all-btn\" onFeatureUsed={onFeatureUsed} />,\n        <InvertButton {...buttonProps} key=\"invert-all-btn\" onFeatureUsed={onFeatureUsed} />,\n        <View2DButton {...buttonProps} key=\"view-2d-btn\" onFeatureUsed={onFeatureUsed} />,\n        <View3DButton {...buttonProps} key=\"view-3d-btn\" onFeatureUsed={onFeatureUsed} />,\n        <ToggleInstancesFocusButton disabled={searchText !== undefined} key=\"toggle-instances-focus-btn\" onFeatureUsed={onFeatureUsed} />,\n      ];\n\n  useEffect(() => {\n    if (instanceFocusEnabled && searchText !== undefined) {\n      toggleInstanceFocus();\n    }\n  }, [instanceFocusEnabled, searchText, toggleInstanceFocus]);\n\n  return (\n    <TelemetryContextProvider componentIdentifier={ModelsTreeComponent.id} onFeatureUsed={onFeatureUsed} onPerformanceMeasured={onPerformanceMeasured}>\n      <SelectableTree buttons={buttons}>\n        <ModelsTree {...treeProps} imodel={iModel} activeView={viewport} searchText={searchText} treeLabel={treeLabel} onModelsFiltered={onModelsFiltered} />\n      </SelectableTree>\n    </TelemetryContextProvider>\n  );\n}\n"]}

package/lib/esm/tree-widget-react/components/trees/models-tree/ModelsTreeDefinition.d.ts

@@ -73,6 +73,7 @@ export declare class ModelsTreeDefinition implements HierarchyDefinition {
     private createSubjectChildrenQuery;
     private createISubModeledElementChildrenQuery;
     private createGeometricModel3dChildrenQuery;
+    private createElementChildrenCountSelector;
     private createSpatialCategoryChildrenQuery;
     private createGeometricElement3dChildrenQuery;
     static createInstanceKeyPaths(props: ModelsTreeInstanceKeyPathsProps): Promise<NormalizedHierarchySearchPath[]>;

package/lib/esm/tree-widget-react/components/trees/models-tree/ModelsTreeDefinition.js

@@ -10,7 +10,7 @@ import { createBisInstanceLabelSelectClauseFactory, ECSql } from "@itwin/present
 import { CLASS_NAME_Element, CLASS_NAME_GeometricElement3d, CLASS_NAME_GeometricModel3d, CLASS_NAME_InformationPartitionElement, CLASS_NAME_ISubModeledElement, CLASS_NAME_Model, CLASS_NAME_SpatialCategory, CLASS_NAME_Subject, } from "../common/internal/ClassNameDefinitions.js";
 import { collect } from "../common/internal/Rxjs.js";
 import { catchBeSQLiteInterrupts } from "../common/internal/UseErrorState.js";
-import { createIdsSelector, fromWithRelease, getOptimalBatchSize, groupingNodeHasSearchTargets, parseIdsSelectorResult, releaseMainThreadOnItemsCount, } from "../common/internal/Utils.js";
+import { createIdsSelector, fromWithRelease, getOptimalBatchSize, groupingNodeDataFromChildren, parseIdsSelectorResult, releaseMainThreadOnItemsCount, } from "../common/internal/Utils.js";
 import { SearchLimitExceededError } from "../common/TreeErrors.js";
 const MAX_SEARCH_INSTANCE_KEY_COUNT = 100;
 /** @internal */
@@ -93,14 +93,19 @@ export class ModelsTreeDefinition {
     };
     async postProcessNode(node) {
         if (ProcessedHierarchyNode.isGroupingNode(node)) {
-            const { hasSearchTargetAncestor, hasDirectNonSearchTargets } = groupingNodeHasSearchTargets(node.children);
+            const { hasSearchTargetAncestor, hasDirectNonSearchTargets, childrenCount, searchTargets } = groupingNodeDataFromChildren(node.children);
             return {
                 ...node,
                 label: this.#hierarchyConfig.elementClassGrouping === "enableWithCounts" ? `${node.label} (${node.children.length})` : node.label,
                 extendedData: {
                     ...node.extendedData,
-                    // add `modelId` and `categoryId` from the first grouped element
-                    ...node.children[0].extendedData,
+                    // `modelId`, `categoryId`, `categoryOfTopMostParentElement`, `topMostParentElementId` are shared by all grouped elements.
+                    categoryId: node.children[0].extendedData?.categoryId,
+                    modelId: node.children[0].extendedData?.modelId,
+                    categoryOfTopMostParentElement: node.children[0].extendedData?.categoryOfTopMostParentElement,
+                    topMostParentElementId: node.children[0].extendedData?.topMostParentElementId,
+                    childrenCount,
+                    ...(!!searchTargets?.size ? { searchTargets } : {}),
                     ...(hasDirectNonSearchTargets ? { hasDirectNonSearchTargets } : {}),
                     ...(hasSearchTargetAncestor ? { hasSearchTargetAncestor } : {}),
                     // `imageId` is assigned to instance nodes at query time, but grouping ones need to
@@ -256,16 +261,22 @@ export class ModelsTreeDefinition {
               AND NOT this.IsPrivate
               AND this.ECInstanceId IN (SELECT Model.Id FROM ${this.#hierarchyConfig.elementClassSpecification})
           `,
-                    bindings: [...elementIds.map((id) => ({ type: "id", value: id }))],
+                    bindings: elementIds.map((id) => ({ type: "id", value: id })),
                 },
             },
         ];
     }
     async createGeometricModel3dChildrenQuery({ parentNodeInstanceIds: modelIds, instanceFilter, }) {
-        const instanceFilterClauses = await this.#selectQueryFactory.createFilterClauses({
-            filter: instanceFilter,
-            contentClass: { fullName: CLASS_NAME_SpatialCategory, alias: "this" },
-        });
+        const [instanceFilterClauses, categoryIds] = await Promise.all([
+            this.#selectQueryFactory.createFilterClauses({
+                filter: instanceFilter,
+                contentClass: { fullName: CLASS_NAME_SpatialCategory, alias: "this" },
+            }),
+            firstValueFrom(this.#idsCache.getCategoriesOfModelsTopMostElements(modelIds).pipe(map((categoriesSet) => [...categoriesSet]))),
+        ]);
+        if (categoryIds.length === 0) {
+            return [];
+        }
         return [
             {
                 fullClassName: CLASS_NAME_SpatialCategory,
@@ -292,22 +303,30 @@ export class ModelsTreeDefinition {
                     })}
             FROM ${instanceFilterClauses.from} this
             ${instanceFilterClauses.joins}
-            WHERE
-              EXISTS (
-                SELECT 1
-                FROM ${this.#hierarchyConfig.elementClassSpecification} element
-                WHERE
-                  element.Model.Id IN (${modelIds.map(() => "?").join(",")})
-                  AND element.Category.Id = +this.ECInstanceId
-                  AND element.Parent.Id IS NULL
-              )
-              ${instanceFilterClauses.where ? `AND ${instanceFilterClauses.where}` : ""}
+            WHERE InVirtualSet(?, this.ECInstanceId)
+            ${instanceFilterClauses.where ? `AND ${instanceFilterClauses.where}` : ""}
           `,
-                    bindings: modelIds.map((id) => ({ type: "id", value: id })),
+                    bindings: [{ type: "idset", value: categoryIds }],
                 },
             },
         ];
     }
+    createElementChildrenCountSelector(props) {
+        return `(
+      WITH RECURSIVE
+        ElementWithParent(id) AS (
+          SELECT e.ECInstanceId
+          FROM ${this.#hierarchyConfig.elementClassSpecification} e
+          WHERE e.ECInstanceId = ${props.elementIdSelector}
+          UNION ALL
+          SELECT c.ECInstanceId
+          FROM ${this.#hierarchyConfig.elementClassSpecification} c
+          JOIN ElementWithParent p ON p.id = c.Parent.Id
+        )
+      SELECT COUNT(1) - 1
+      FROM ElementWithParent
+    )`;
+    }
     async createSpatialCategoryChildrenQuery({ parentNodeInstanceIds: categoryIds, parentNode, instanceFilter, }) {
         const modelIds = parseIdsSelectorResult(parentNode.extendedData?.modelIds);
         if (modelIds.length === 0) {
@@ -317,9 +336,10 @@ export class ModelsTreeDefinition {
             filter: instanceFilter,
             contentClass: { fullName: this.#hierarchyConfig.elementClassSpecification, alias: "this" },
         });
-        const modeledElements = await firstValueFrom(from(modelIds).pipe(mergeMap((modelId) => this.#idsCache.getCategoriesModeledElements(modelId, categoryIds)), reduce((acc, foundModeledElements) => {
-            return acc.concat(foundModeledElements);
-        }, new Array())));
+        const modeledElements = await firstValueFrom(from(modelIds).pipe(mergeMap((modelId) => from(categoryIds).pipe(mergeMap((categoryId) => this.#idsCache.getSubModels({ modelId, categoryId })), mergeAll())), toArray()));
+        const bindings = new Array();
+        categoryIds.forEach((id) => bindings.push({ type: "id", value: id }));
+        modelIds.forEach((id) => bindings.push({ type: "id", value: id }));
         return [
             {
                 fullClassName: this.#hierarchyConfig.elementClassSpecification,
@@ -357,6 +377,9 @@ export class ModelsTreeDefinition {
                             modelId: { selector: "IdToHex(this.Model.Id)" },
                             categoryId: { selector: "IdToHex(this.Category.Id)" },
                             imageId: "icon-item",
+                            childrenCount: { selector: this.createElementChildrenCountSelector({ elementIdSelector: "this.ECInstanceId" }) },
+                            categoryOfTopMostParentElement: { selector: "IdToHex(this.Category.Id)" },
+                            topMostParentElementId: { selector: "IdToHex(this.ECInstanceId)" },
                         },
                         supportsFiltering: this.supportsFiltering(),
                     })}
@@ -368,16 +391,18 @@ export class ModelsTreeDefinition {
               AND this.Parent.Id IS NULL
               ${instanceFilterClauses.where ? `AND ${instanceFilterClauses.where}` : ""}
           `,
-                    bindings: [...categoryIds.map((id) => ({ type: "id", value: id })), ...modelIds.map((id) => ({ type: "id", value: id }))],
+                    bindings,
                 },
             },
         ];
     }
-    async createGeometricElement3dChildrenQuery({ parentNodeInstanceIds: elementIds, instanceFilter, }) {
+    async createGeometricElement3dChildrenQuery({ parentNodeInstanceIds: elementIds, instanceFilter, parentNode, }) {
         const instanceFilterClauses = await this.#selectQueryFactory.createFilterClauses({
             filter: instanceFilter,
             contentClass: { fullName: this.#hierarchyConfig.elementClassSpecification, alias: "this" },
         });
+        const bindings = new Array();
+        elementIds.forEach((id) => bindings.push({ type: "id", value: id }));
         return [
             {
                 fullClassName: this.#hierarchyConfig.elementClassSpecification,
@@ -412,6 +437,11 @@ export class ModelsTreeDefinition {
                             modelId: { selector: "IdToHex(this.Model.Id)" },
                             categoryId: { selector: "IdToHex(this.Category.Id)" },
                             imageId: "icon-item",
+                            childrenCount: { selector: this.createElementChildrenCountSelector({ elementIdSelector: "this.ECInstanceId" }) },
+                            categoryOfTopMostParentElement: {
+                                selector: `IdToHex(${parentNode.extendedData?.categoryOfTopMostParentElement})`,
+                            },
+                            topMostParentElementId: { selector: `IdToHex(${parentNode.extendedData?.topMostParentElementId})` },
                         },
                         supportsFiltering: this.supportsFiltering(),
                     })}
@@ -421,7 +451,7 @@ export class ModelsTreeDefinition {
               this.Parent.Id IN (${elementIds.map(() => "?").join(",")})
               ${instanceFilterClauses.where ? `AND ${instanceFilterClauses.where}` : ""}
           `,
-                    bindings: elementIds.map((id) => ({ type: "id", value: id })),
+                    bindings,
                 },
             },
         ];