@itwin/tree-widget-react 3.17.0 → 3.17.2

package/lib/cjs/tree-widget-react/components/trees/models-tree/internal/ModelsTreeVisibilityHandler.js

@@ -15,10 +15,11 @@ const core_bentley_1 = require("@itwin/core-bentley");
 const core_frontend_1 = require("@itwin/core-frontend");
 const presentation_hierarchies_1 = require("@itwin/presentation-hierarchies");
 const CategoriesVisibilityUtils_js_1 = require("../../common/CategoriesVisibilityUtils.js");
+const Utils_js_1 = require("../../common/internal/Utils.js");
 const Rxjs_js_1 = require("../../common/Rxjs.js");
 const Tooltip_js_1 = require("../../common/Tooltip.js");
 const UseHierarchyVisibility_js_1 = require("../../common/UseHierarchyVisibility.js");
-const Utils_js_1 = require("../Utils.js");
+const Utils_js_2 = require("../Utils.js");
 const AlwaysAndNeverDrawnElementInfo_js_1 = require("./AlwaysAndNeverDrawnElementInfo.js");
 const FilteredTree_js_1 = require("./FilteredTree.js");
 const ModelsTreeNode_js_1 = require("./ModelsTreeNode.js");
@@ -96,7 +97,9 @@ class ModelsTreeVisibilityHandlerImpl {
         if (!presentation_hierarchies_1.HierarchyNode.isInstancesNode(node)) {
             return (0, rxjs_1.of)((0, Tooltip_js_1.createVisibilityStatus)("disabled"));
         }
-        if (node.filtering?.filteredChildrenIdentifierPaths?.length && !node.filtering.isFilterTarget) {
+        // Only call getFilteredNodeVisibility when node is not a filter target, is not a child of filter target and has filtered children.
+        // Otherwise, it can be handled normally.
+        if (node.filtering?.filteredChildrenIdentifierPaths?.length && !node.filtering.isFilterTarget && !node.filtering.hasFilterTargetAncestor) {
             return this.getFilteredNodeVisibility({ node });
         }
         if (ModelsTreeNode_js_1.ModelsTreeNode.isSubjectNode(node)) {
@@ -117,13 +120,18 @@ class ModelsTreeVisibilityHandlerImpl {
             });
         }
         const categoryId = ModelsTreeNode_js_1.ModelsTreeNode.getCategoryId(node);
+        const rootCategoryIds = getRootCategoryIds({ parentKeys: node.parentKeys, modelId });
+        (0, core_bentley_1.assert)(rootCategoryIds !== undefined);
         if (!categoryId) {
             return (0, rxjs_1.of)((0, Tooltip_js_1.createVisibilityStatus)("disabled"));
         }
         return this.getElementDisplayStatus({
             elementIds: node.key.instanceKeys.map(({ id }) => id),
+            parentKeys: node.parentKeys,
+            rootCategoryIds,
             modelId,
             categoryId,
+            totalChildrenCount: node.extendedData?.childrenCount ?? 0,
         });
     }
     getFilteredNodeVisibility(props) {
@@ -143,24 +151,63 @@ class ModelsTreeVisibilityHandlerImpl {
                 })));
             }
             if (elements?.size) {
-                observables.push((0, rxjs_1.from)(elements).pipe((0, Utils_js_1.releaseMainThreadOnItemsCount)(50), (0, rxjs_1.mergeMap)(([categoryKey, elementsMap]) => {
+                const filterTargetElements = new Array();
+                elements.forEach((elementsMap) => elementsMap.forEach(({ isFilterTarget }, elementId) => {
+                    if (isFilterTarget) {
+                        filterTargetElements.push(elementId);
+                    }
+                }));
+                let childrenCountMapObs;
+                if (presentation_hierarchies_1.HierarchyNode.isClassGroupingNode(props.node)) {
+                    const groupingNodesFilterTargets = props.node.extendedData?.filterTargets;
+                    const nestedFilterTargetElements = filterTargetElements.filter((filterTarget) => !groupingNodesFilterTargets?.has(filterTarget));
+                    // Only need to request children count for indirect children filter targets.
+                    // Direct children filter targets already have children count stored in grouping nodes extended data.
+                    childrenCountMapObs = this.#idsCache.getAllChildrenCount({ elementIds: nestedFilterTargetElements });
+                }
+                else {
+                    childrenCountMapObs = this.#idsCache.getAllChildrenCount({ elementIds: filterTargetElements });
+                }
+                observables.push(childrenCountMapObs.pipe(
+                // Get children count for all filter target elements.
+                (0, rxjs_1.map)((elementCountMap) => {
+                    if (!presentation_hierarchies_1.HierarchyNode.isClassGroupingNode(props.node) || !props.node.extendedData?.filterTargets) {
+                        return elementCountMap;
+                    }
+                    // Need to add children count (stored in grouping nodes' extended data) of direct children filter targets.
+                    const groupingNodesFilterTargets = props.node.extendedData.filterTargets;
+                    groupingNodesFilterTargets.forEach((value, key) => elementCountMap.set(key, value.childrenCount));
+                    return elementCountMap;
+                }), (0, rxjs_1.mergeMap)((elementCountMap) => (0, rxjs_1.from)(elements).pipe((0, Utils_js_1.releaseMainThreadOnItemsCount)(50), (0, rxjs_1.mergeMap)(([categoryKey, elementsMap]) => {
                     const { modelId, categoryId } = (0, FilteredTree_js_1.parseCategoryKey)(categoryKey);
+                    let totalChildrenCount = 0;
+                    elementsMap.forEach((_, elementId) => {
+                        const childCount = elementCountMap.get(elementId);
+                        if (childCount) {
+                            totalChildrenCount += childCount;
+                        }
+                    });
+                    const parentElementIdsPath = getParentElementsIdsPath({ parentKeys: props.node.parentKeys, modelId });
+                    const rootCategoryIds = getRootCategoryIds({ parentKeys: props.node.parentKeys, modelId });
                     return this.getElementsDisplayStatus({
                         elementIds: [...elementsMap.keys()],
+                        rootCategoryIds: rootCategoryIds ?? categoryId,
+                        parentElementIdsPath,
                         modelId,
                         categoryId,
+                        childrenCount: totalChildrenCount,
                     });
-                })));
+                })))));
             }
             return (0, rxjs_1.merge)(...observables);
-        }), mergeVisibilityStatuses());
+        }), (0, Utils_js_1.mergeVisibilityStatuses)());
     }
     getSubjectNodeVisibilityStatus({ subjectIds, ignoreTooltip }) {
         const result = (0, rxjs_1.defer)(() => {
             if (!this.#props.viewport.view.isSpatialView()) {
-                return (0, rxjs_1.of)((0, Tooltip_js_1.createVisibilityStatus)("disabled", getTooltipOptions("modelsTree.subject.nonSpatialView", ignoreTooltip)));
+                return (0, rxjs_1.of)((0, Tooltip_js_1.createVisibilityStatus)("disabled", (0, Utils_js_1.getTooltipOptions)("modelsTree.subject.nonSpatialView", ignoreTooltip)));
             }
-            return this.#idsCache.getSubjectModelIds(subjectIds).pipe((0, rxjs_1.mergeMap)((modelIds) => this.getModelVisibilityStatus({ modelIds, ignoreTooltip: true })), mergeVisibilityStatuses({
+            return this.#idsCache.getSubjectModelIds(subjectIds).pipe((0, rxjs_1.mergeMap)((modelIds) => this.getModelVisibilityStatus({ modelIds, ignoreTooltip: true })), (0, Utils_js_1.mergeVisibilityStatuses)({
                 visible: "modelsTree.subject.allModelsVisible",
                 hidden: "modelsTree.subject.allModelsHidden",
                 partial: "modelsTree.subject.someModelsHidden",
@@ -172,7 +219,7 @@ class ModelsTreeVisibilityHandlerImpl {
         const result = (0, rxjs_1.defer)(() => {
             const viewport = this.#props.viewport;
             if (!viewport.view.isSpatialView()) {
-                return (0, rxjs_1.of)((0, Tooltip_js_1.createVisibilityStatus)("disabled", getTooltipOptions("modelsTree.model.nonSpatialView", ignoreTooltip)));
+                return (0, rxjs_1.of)((0, Tooltip_js_1.createVisibilityStatus)("disabled", (0, Utils_js_1.getTooltipOptions)("modelsTree.model.nonSpatialView", ignoreTooltip)));
             }
             return (0, rxjs_1.from)(core_bentley_1.Id64.iterable(modelIds)).pipe((0, rxjs_1.distinct)(), (0, rxjs_1.mergeMap)((modelId) => {
                 if (!viewport.view.viewsModel(modelId)) {
@@ -187,19 +234,19 @@ class ModelsTreeVisibilityHandlerImpl {
                     return categoryIds.length === 0
                         ? (0, rxjs_1.of)((0, Tooltip_js_1.createVisibilityStatus)("visible"))
                         : this.getCategoryDisplayStatus({ modelId, categoryIds, ignoreTooltip: true });
-                }), mergeVisibilityStatuses({
+                }), (0, Utils_js_1.mergeVisibilityStatuses)({
                     visible: "modelsTree.model.allCategoriesVisible",
                     partial: "modelsTree.model.someCategoriesHidden",
                     hidden: "modelsTree.model.allCategoriesHidden",
                 }));
-            }), mergeVisibilityStatuses());
+            }), (0, Utils_js_1.mergeVisibilityStatuses)());
         });
         return (0, UseHierarchyVisibility_js_1.createVisibilityHandlerResult)(this, { ids: modelIds }, result, this.#props.overrides?.getModelDisplayStatus);
     }
     getDefaultCategoryVisibilityStatus({ modelId, categoryIds, ignoreTooltip, }) {
         const viewport = this.#props.viewport;
         if (!viewport.view.viewsModel(modelId) || core_bentley_1.Id64.sizeOf(categoryIds) === 0) {
-            return (0, Tooltip_js_1.createVisibilityStatus)("hidden", getTooltipOptions("modelsTree.category.hiddenThroughModel", ignoreTooltip));
+            return (0, Tooltip_js_1.createVisibilityStatus)("hidden", (0, Utils_js_1.getTooltipOptions)("modelsTree.category.hiddenThroughModel", ignoreTooltip));
         }
         let visibility = "unknown";
         for (const categoryId of core_bentley_1.Id64.iterable(categoryIds)) {
@@ -272,25 +319,33 @@ class ModelsTreeVisibilityHandlerImpl {
         return (0, UseHierarchyVisibility_js_1.createVisibilityHandlerResult)(this, props, result, this.#props.overrides?.getCategoryDisplayStatus);
     }
     getClassGroupingNodeDisplayStatus(node) {
-        const { elementIds, modelId, categoryId } = this.getGroupingNodeInfo(node);
+        const { elementIds, modelId, categoryId, childrenCount } = this.getGroupingNodeInfo(node);
+        const rootCategoryIds = getRootCategoryIds({ parentKeys: node.parentKeys, modelId });
+        (0, core_bentley_1.assert)(rootCategoryIds !== undefined);
         const result = this.getElementsDisplayStatus({
             elementIds,
             modelId,
             categoryId,
+            rootCategoryIds,
+            parentElementIdsPath: getParentElementsIdsPath({ parentKeys: node.parentKeys, modelId }),
+            childrenCount: childrenCount ?? 0,
         });
         return (0, UseHierarchyVisibility_js_1.createVisibilityHandlerResult)(this, { node }, result, this.#props.overrides?.getElementGroupingNodeDisplayStatus);
     }
-    getElementDisplayStatus({ elementIds, modelId, categoryId, }) {
+    getElementDisplayStatus({ parentKeys, totalChildrenCount, elementIds, modelId, rootCategoryIds, categoryId, }) {
         const result = this.getElementsDisplayStatus({
+            rootCategoryIds,
             elementIds,
             modelId,
             categoryId,
+            parentElementIdsPath: getParentElementsIdsPath({ parentKeys, modelId }),
+            childrenCount: totalChildrenCount,
         });
         return (0, UseHierarchyVisibility_js_1.createVisibilityHandlerResult)(this, { elementId: elementIds[0], modelId, categoryId }, result, this.#props.overrides?.getElementDisplayStatus);
     }
     getElementsDisplayStatus(props) {
         return (0, rxjs_1.defer)(() => {
-            const { modelId, categoryId, elementIds } = props;
+            const { modelId, categoryId, elementIds, parentElementIdsPath, childrenCount, rootCategoryIds } = props;
             if (!this.#props.viewport.view.viewsModel(modelId)) {
                 return (0, rxjs_1.of)(elementIds).pipe(this.getSubModeledElementsVisibilityStatus({
                     tooltips: {
@@ -304,9 +359,13 @@ class ModelsTreeVisibilityHandlerImpl {
             }
             return this.getVisibilityFromAlwaysAndNeverDrawnElements({
                 elements: elementIds,
+                parentElementIdsPath,
+                modelIds: modelId,
+                rootCategoryIds,
+                childrenCount,
                 defaultStatus: () => {
                     const status = this.getDefaultCategoryVisibilityStatus({ categoryIds: categoryId, modelId, ignoreTooltip: true });
-                    return (0, Tooltip_js_1.createVisibilityStatus)(status.state, getTooltipOptions(`modelsTree.groupingNode.${status.state}ThroughCategory`));
+                    return (0, Tooltip_js_1.createVisibilityStatus)(status.state, (0, Utils_js_1.getTooltipOptions)(`modelsTree.groupingNode.${status.state}ThroughCategory`));
                 },
                 tooltips: {
                     allElementsInAlwaysDrawnList: "modelsTree.groupingNode.allElementsVisible",
@@ -339,7 +398,9 @@ class ModelsTreeVisibilityHandlerImpl {
             if (!presentation_hierarchies_1.HierarchyNode.isInstancesNode(node)) {
                 return rxjs_1.EMPTY;
             }
-            if (node.filtering?.filteredChildrenIdentifierPaths?.length && !node.filtering.isFilterTarget) {
+            // Only call changeFilteredNodeVisibility when node is not a filter target, is not a child of filter target and has filtered children.
+            // Otherwise, it can be handled normally.
+            if (node.filtering?.filteredChildrenIdentifierPaths?.length && !node.filtering.isFilterTarget && !node.filtering.hasFilterTargetAncestor) {
                 return this.changeFilteredNodeVisibility({ node, on });
             }
             if (ModelsTreeNode_js_1.ModelsTreeNode.isSubjectNode(node)) {
@@ -363,12 +424,18 @@ class ModelsTreeVisibilityHandlerImpl {
             if (!categoryId) {
                 return rxjs_1.EMPTY;
             }
-            return this.changeElementsState({
-                elementIds: new Set([...node.key.instanceKeys.map(({ id }) => id)]),
+            const elementIds = new Set(node.key.instanceKeys.map(({ id }) => id));
+            return this.#idsCache.getChildrenTree({ elementIds }).pipe((0, rxjs_1.map)((childrenTree) => {
+                // Children tree contains provided elementIds, they are at the root of this tree.
+                // We want to skip them and only get ids of children.
+                return (0, Utils_js_2.getIdsFromChildrenTree)({ tree: childrenTree, predicate: ({ depth }) => depth > 0 });
+            }), (0, rxjs_1.mergeMap)((children) => this.changeElementsState({
+                elementIds,
                 modelId,
+                children: children.size > 0 ? children : undefined,
                 categoryId,
                 on,
-            });
+            })));
         });
         if (this.#props.viewport.isAlwaysDrawnExclusive) {
             return (0, rxjs_1.concat)(this.removeAlwaysDrawnExclusive(), changeObs);
@@ -377,7 +444,7 @@ class ModelsTreeVisibilityHandlerImpl {
     }
     changeFilteredNodeVisibility({ on, ...props }) {
         (0, core_bentley_1.assert)(this.#filteredTree !== undefined);
-        return (0, rxjs_1.from)(this.#filteredTree).pipe((0, rxjs_1.map)((filteredTree) => filteredTree.getVisibilityChangeTargets(props.node)), (0, rxjs_1.mergeMap)(({ subjects, models, categories, elements }) => {
+        return (0, rxjs_1.from)(this.#filteredTree).pipe((0, rxjs_1.map)((filteredTree) => filteredTree.getVisibilityChangeTargets(props.node)), (0, rxjs_1.mergeMap)(({ subjects, categories, elements, models }) => {
             const observables = new Array();
             if (subjects?.size) {
                 observables.push(this.changeSubjectNodeState([...subjects], on));
@@ -392,10 +459,24 @@ class ModelsTreeVisibilityHandlerImpl {
                 })));
             }
             if (elements?.size) {
-                observables.push((0, rxjs_1.from)(elements).pipe((0, rxjs_1.mergeMap)(([categoryKey, elementsMap]) => {
+                const filterTargetElements = new Array();
+                const elementsSet = new Set();
+                elements.forEach((elementsMap) => elementsMap.forEach(({ isFilterTarget }, elementId) => {
+                    elementsSet.add(elementId);
+                    if (isFilterTarget) {
+                        filterTargetElements.push(elementId);
+                    }
+                }));
+                observables.push(this.#idsCache.getChildrenTree({ elementIds: filterTargetElements }).pipe((0, rxjs_1.map)((childrenTree) => (0, Utils_js_2.getIdsFromChildrenTree)({ tree: childrenTree })), (0, rxjs_1.map)((childrenIds) => (0, Utils_js_1.setDifference)(childrenIds, elementsSet)), (0, rxjs_1.mergeMap)((childElementIds) => (0, rxjs_1.from)(elements).pipe((0, rxjs_1.mergeMap)(([categoryKey, elementsMap]) => {
                     const { modelId, categoryId } = (0, FilteredTree_js_1.parseCategoryKey)(categoryKey);
-                    return this.changeElementsState({ modelId, categoryId, elementIds: new Set([...elementsMap.keys()]), on });
-                })));
+                    return this.changeElementsState({
+                        modelId,
+                        categoryId,
+                        elementIds: new Set([...elementsMap.keys()]),
+                        on,
+                        children: childElementIds.size > 0 ? childElementIds : undefined,
+                    });
+                })))));
             }
             return (0, rxjs_1.merge)(...observables);
         }));
@@ -430,9 +511,7 @@ class ModelsTreeVisibilityHandlerImpl {
             const idsObs = (0, rxjs_1.from)(core_bentley_1.Id64.iterable(ids));
             if (!on) {
                 viewport.changeModelDisplay(ids, false);
-                return idsObs.pipe((0, rxjs_1.mergeMap)((modelId) => this.#idsCache.getModelCategories(modelId).pipe((0, rxjs_1.map)((categoryIds) => {
-                    return { modelId, categoryIds };
-                }))), (0, rxjs_1.mergeMap)(({ modelId, categoryIds }) => this.#idsCache.getCategoriesModeledElements(modelId, categoryIds)), (0, rxjs_1.mergeMap)((modeledElementIds) => this.changeModelState({ ids: modeledElementIds, on })));
+                return idsObs.pipe((0, rxjs_1.mergeMap)((modelId) => (0, rxjs_1.forkJoin)({ categoryIds: this.#idsCache.getModelCategories(modelId), modelId: (0, rxjs_1.of)(modelId) })), (0, rxjs_1.mergeMap)(({ modelId, categoryIds }) => this.#idsCache.getCategoriesModeledElements(modelId, categoryIds)), (0, rxjs_1.mergeMap)((modeledElementIds) => this.changeModelState({ ids: modeledElementIds, on })));
             }
             return (0, rxjs_1.concat)((0, rxjs_1.defer)(() => {
                 viewport.perModelCategoryVisibility.clearOverrides(ids);
@@ -448,15 +527,12 @@ class ModelsTreeVisibilityHandlerImpl {
         return (0, rxjs_1.forkJoin)({
             categories: this.#idsCache.getModelCategories(modelId),
             alwaysDrawnElements: this.getAlwaysOrNeverDrawnElements({ modelIds: modelId, setType: "always" }),
-        }).pipe((0, rxjs_1.mergeMap)(async ({ categories, alwaysDrawnElements }) => {
+        }).pipe((0, rxjs_1.mergeMap)(({ categories, alwaysDrawnElements }) => {
             const alwaysDrawn = this.#props.viewport.alwaysDrawn;
             if (alwaysDrawn && alwaysDrawnElements) {
-                viewport.setAlwaysDrawn(setDifference(alwaysDrawn, alwaysDrawnElements));
+                viewport.setAlwaysDrawn((0, Utils_js_1.setDifference)(alwaysDrawn, alwaysDrawnElements));
             }
-            categories.forEach((categoryId) => {
-                this.changeCategoryStateInViewportAccordingToModelVisibility(modelId, categoryId, false);
-            });
-            await viewport.addViewedModels(modelId);
+            return (0, rxjs_1.concat)((0, rxjs_1.from)(core_bentley_1.Id64.iterable(categories)).pipe((0, Utils_js_1.releaseMainThreadOnItemsCount)(300), (0, rxjs_1.map)((categoryId) => this.changeCategoryStateInViewportAccordingToModelVisibility(modelId, categoryId, false))), (0, rxjs_1.defer)(async () => viewport.addViewedModels(modelId)));
         }));
     }
     changeCategoryStateInViewportAccordingToModelVisibility(modelId, categoryId, on) {
@@ -478,12 +554,7 @@ class ModelsTreeVisibilityHandlerImpl {
         const result = (0, rxjs_1.defer)(() => {
             const viewport = this.#props.viewport;
             const { modelId, categoryIds, on } = props;
-            return (0, rxjs_1.concat)(props.on && !viewport.view.viewsModel(modelId) ? this.showModelWithoutAnyCategoriesOrElements(modelId) : rxjs_1.EMPTY, (0, rxjs_1.defer)(() => {
-                for (const categoryId of core_bentley_1.Id64.iterable(categoryIds)) {
-                    this.changeCategoryStateInViewportAccordingToModelVisibility(modelId, categoryId, on);
-                }
-                return this.clearAlwaysAndNeverDrawnElements(props);
-            }), this.#idsCache
+            return (0, rxjs_1.concat)(props.on && !viewport.view.viewsModel(modelId) ? this.showModelWithoutAnyCategoriesOrElements(modelId) : rxjs_1.EMPTY, (0, rxjs_1.from)(core_bentley_1.Id64.iterable(categoryIds)).pipe((0, Utils_js_1.releaseMainThreadOnItemsCount)(300), (0, rxjs_1.map)((categoryId) => this.changeCategoryStateInViewportAccordingToModelVisibility(modelId, categoryId, on))), this.clearAlwaysAndNeverDrawnElements(props), this.#idsCache
                 .getCategoriesModeledElements(modelId, categoryIds)
                 .pipe((0, rxjs_1.mergeMap)((modeledElementIds) => this.changeModelState({ ids: modeledElementIds, on }))));
         });
@@ -491,12 +562,25 @@ class ModelsTreeVisibilityHandlerImpl {
     }
     doChangeElementsState(props) {
         return (0, rxjs_1.defer)(() => {
-            const { modelId, categoryId, elementIds, on } = props;
+            const { modelId, categoryId, elementIds, on, children } = props;
             const viewport = this.#props.viewport;
             return (0, rxjs_1.concat)(on && !viewport.view.viewsModel(modelId) ? this.showModelWithoutAnyCategoriesOrElements(modelId) : rxjs_1.EMPTY, (0, rxjs_1.defer)(() => {
                 const categoryVisibility = this.getDefaultCategoryVisibilityStatus({ categoryIds: categoryId, modelId, ignoreTooltip: true });
-                const isDisplayedByDefault = categoryVisibility.state === "visible";
-                return this.queueElementsVisibilityChange(elementIds, on, isDisplayedByDefault);
+                const isCategoryVisible = categoryVisibility.state === "visible";
+                // Make sure to add all children to always/never drawn list.
+                const isDisplayedByDefault = 
+                // When category is visible and elements need to be turned off, or when category is hidden and elements need to be turned on,
+                // We can set isDisplayedByDefault to isCategoryVisible. This allows to not check if each element is in the elementIds list or not.
+                isCategoryVisible === !on
+                    ? () => isCategoryVisible
+                    : (elementId) => {
+                        if (elementIds.has(elementId)) {
+                            return isCategoryVisible;
+                        }
+                        return !on;
+                    };
+                const elementsToChange = children ? [...elementIds, ...(typeof children === "string" ? [children] : children)] : elementIds;
+                return this.queueElementsVisibilityChange(elementsToChange, on, isDisplayedByDefault);
             }), (0, rxjs_1.from)(elementIds).pipe((0, rxjs_1.mergeMap)((elementId) => (0, rxjs_1.forkJoin)({
                 elementId: (0, rxjs_1.of)(elementId),
                 isSubModel: this.#idsCache.hasSubModel(elementId),
@@ -508,7 +592,14 @@ class ModelsTreeVisibilityHandlerImpl {
      * @see `changeElementState`
      */
     changeElementGroupingNodeState(node, on) {
-        const result = this.doChangeElementsState({ ...this.getGroupingNodeInfo(node), on });
+        const { modelId, categoryId, elementIds } = this.getGroupingNodeInfo(node);
+        const result = this.#idsCache.getChildrenTree({ elementIds }).pipe((0, rxjs_1.map)((childrenTree) => (0, Utils_js_2.getIdsFromChildrenTree)({ tree: childrenTree, predicate: ({ depth }) => depth > 0 })), (0, rxjs_1.mergeMap)((children) => this.doChangeElementsState({
+            modelId,
+            categoryId,
+            elementIds,
+            children: children.size > 0 ? children : undefined,
+            on,
+        })));
         return (0, UseHierarchyVisibility_js_1.createVisibilityHandlerResult)(this, { node, on }, result, this.#props.overrides?.changeElementGroupingNodeState);
     }
     /**
@@ -523,7 +614,7 @@ class ModelsTreeVisibilityHandlerImpl {
         const finishedSubject = new rxjs_1.Subject();
         // observable to track if visibility change is finished/cancelled
         const changeFinished = finishedSubject.pipe((0, rxjs_1.startWith)(false), (0, rxjs_1.shareReplay)(1), (0, rxjs_1.filter)((finished) => finished));
-        const changeObservable = (0, rxjs_1.from)(elementIds).pipe(
+        const changeObservable = (0, rxjs_1.from)(core_bentley_1.Id64.iterable(elementIds)).pipe(
         // check if visibility change is not finished (cancelled) due to change overall change request being cancelled
         (0, rxjs_1.takeUntil)(changeFinished), this.changeElementStateNoChildrenOperator({ on, isDisplayedByDefault: visibleByDefault }), (0, rxjs_1.tap)({
             next: () => {
@@ -554,7 +645,7 @@ class ModelsTreeVisibilityHandlerImpl {
                     const wasRemoved = acc.neverDrawn.delete(elementId);
                     acc.changedNeverDrawn ||= wasRemoved;
                     // If exclusive mode is enabled, we must add the element to the always drawn list.
-                    if ((!isDisplayedByDefault || isAlwaysDrawnExclusive) && !acc.alwaysDrawn.has(elementId)) {
+                    if ((!isDisplayedByDefault(elementId) || isAlwaysDrawnExclusive) && !acc.alwaysDrawn.has(elementId)) {
                         acc.alwaysDrawn.add(elementId);
                         acc.changedAlwaysDrawn = true;
                     }
@@ -563,7 +654,7 @@ class ModelsTreeVisibilityHandlerImpl {
                     const wasRemoved = acc.alwaysDrawn.delete(elementId);
                     acc.changedAlwaysDrawn ||= wasRemoved;
                     // If exclusive mode is not enabled, we have to add the element to the never drawn list.
-                    if (isDisplayedByDefault && !isAlwaysDrawnExclusive && !acc.neverDrawn.has(elementId)) {
+                    if (isDisplayedByDefault(elementId) && !isAlwaysDrawnExclusive && !acc.neverDrawn.has(elementId)) {
                         acc.neverDrawn.add(elementId);
                         acc.changedNeverDrawn = true;
                     }
@@ -585,21 +676,23 @@ class ModelsTreeVisibilityHandlerImpl {
         if (totalCount === 0) {
             return props.defaultStatus();
         }
-        if (neverDrawn?.size === totalCount) {
-            return (0, Tooltip_js_1.createVisibilityStatus)("hidden", getTooltipOptions(props.tooltips.allElementsInNeverDrawnList, ignoreTooltip));
+        const neverDrawnSize = neverDrawn ? core_bentley_1.Id64.sizeOf(neverDrawn) : undefined;
+        const alwaysDrawnSize = alwaysDrawn ? core_bentley_1.Id64.sizeOf(alwaysDrawn) : undefined;
+        if (neverDrawnSize === totalCount) {
+            return (0, Tooltip_js_1.createVisibilityStatus)("hidden", (0, Utils_js_1.getTooltipOptions)(props.tooltips.allElementsInNeverDrawnList, ignoreTooltip));
         }
-        if (alwaysDrawn?.size === totalCount) {
-            return (0, Tooltip_js_1.createVisibilityStatus)("visible", getTooltipOptions(props.tooltips.allElementsInAlwaysDrawnList, ignoreTooltip));
+        if (alwaysDrawnSize === totalCount) {
+            return (0, Tooltip_js_1.createVisibilityStatus)("visible", (0, Utils_js_1.getTooltipOptions)(props.tooltips.allElementsInAlwaysDrawnList, ignoreTooltip));
         }
         const viewport = this.#props.viewport;
         if (viewport.isAlwaysDrawnExclusive && viewport.alwaysDrawn?.size) {
-            return alwaysDrawn?.size
-                ? (0, Tooltip_js_1.createVisibilityStatus)("partial", getTooltipOptions(props.tooltips.elementsInBothAlwaysAndNeverDrawn, ignoreTooltip))
-                : (0, Tooltip_js_1.createVisibilityStatus)("hidden", getTooltipOptions(props.tooltips.noElementsInExclusiveAlwaysDrawnList, ignoreTooltip));
+            return alwaysDrawnSize
+                ? (0, Tooltip_js_1.createVisibilityStatus)("partial", (0, Utils_js_1.getTooltipOptions)(props.tooltips.elementsInBothAlwaysAndNeverDrawn, ignoreTooltip))
+                : (0, Tooltip_js_1.createVisibilityStatus)("hidden", (0, Utils_js_1.getTooltipOptions)(props.tooltips.noElementsInExclusiveAlwaysDrawnList, ignoreTooltip));
         }
         const status = props.defaultStatus();
-        if ((status.state === "visible" && neverDrawn?.size) || (status.state === "hidden" && alwaysDrawn?.size)) {
-            return (0, Tooltip_js_1.createVisibilityStatus)("partial", getTooltipOptions(undefined, ignoreTooltip));
+        if ((status.state === "visible" && neverDrawnSize) || (status.state === "hidden" && alwaysDrawnSize)) {
+            return (0, Tooltip_js_1.createVisibilityStatus)("partial", (0, Utils_js_1.getTooltipOptions)(undefined, ignoreTooltip));
         }
         return status;
     }
@@ -607,28 +700,48 @@ class ModelsTreeVisibilityHandlerImpl {
         const viewport = this.#props.viewport;
         if (viewport.isAlwaysDrawnExclusive) {
             if (!viewport?.alwaysDrawn?.size) {
-                return (0, rxjs_1.of)((0, Tooltip_js_1.createVisibilityStatus)("hidden", getTooltipOptions(props.tooltips.noElementsInExclusiveAlwaysDrawnList, ignoreTooltip)));
+                return (0, rxjs_1.of)((0, Tooltip_js_1.createVisibilityStatus)("hidden", (0, Utils_js_1.getTooltipOptions)(props.tooltips.noElementsInExclusiveAlwaysDrawnList, ignoreTooltip)));
             }
         }
         else if (!viewport?.neverDrawn?.size && !viewport?.alwaysDrawn?.size) {
             return (0, rxjs_1.of)(props.defaultStatus());
         }
         if ("elements" in props) {
-            return (0, rxjs_1.of)(this.getVisibilityFromAlwaysAndNeverDrawnElementsImpl({
-                ...props,
-                alwaysDrawn: viewport.alwaysDrawn?.size ? setIntersection(props.elements, viewport.alwaysDrawn) : undefined,
-                neverDrawn: viewport.neverDrawn?.size ? setIntersection(props.elements, viewport.neverDrawn) : undefined,
-                totalCount: core_bentley_1.Id64.sizeOf(props.elements),
-                ignoreTooltip,
+            const parentElementIdsPath = [...props.parentElementIdsPath, props.elements];
+            return (0, rxjs_1.forkJoin)({
+                childAlwaysDrawn: this.getAlwaysOrNeverDrawnElements({
+                    modelIds: props.modelIds,
+                    categoryIds: props.rootCategoryIds,
+                    parentElementIdsPath,
+                    setType: "always",
+                }),
+                childNeverDrawn: this.getAlwaysOrNeverDrawnElements({
+                    modelIds: props.modelIds,
+                    categoryIds: props.rootCategoryIds,
+                    parentElementIdsPath,
+                    setType: "never",
+                }),
+            }).pipe((0, rxjs_1.map)(({ childAlwaysDrawn, childNeverDrawn }) => {
+                const alwaysDrawn = new Set([...childAlwaysDrawn, ...(viewport.alwaysDrawn?.size ? (0, Utils_js_1.setIntersection)(props.elements, viewport.alwaysDrawn) : [])]);
+                const neverDrawn = new Set([...childNeverDrawn, ...(viewport.neverDrawn?.size ? (0, Utils_js_1.setIntersection)(props.elements, viewport.neverDrawn) : [])]);
+                return this.getVisibilityFromAlwaysAndNeverDrawnElementsImpl({
+                    ...props,
+                    alwaysDrawn: alwaysDrawn.size > 0 ? alwaysDrawn : undefined,
+                    neverDrawn: neverDrawn.size > 0 ? neverDrawn : undefined,
+                    totalCount: props.childrenCount + core_bentley_1.Id64.sizeOf(props.elements),
+                    ignoreTooltip,
+                });
             }));
         }
         const { modelId, categoryIds } = props.categoryProps;
-        return (0, rxjs_1.from)(core_bentley_1.Id64.iterable(categoryIds)).pipe((0, rxjs_1.mergeMap)((categoryId) => (0, rxjs_1.forkJoin)({
-            categoryId: (0, rxjs_1.of)(categoryId),
-            totalCount: this.#idsCache.getCategoryElementsCount(modelId, categoryId),
-            alwaysDrawn: this.getAlwaysOrNeverDrawnElements({ modelIds: modelId, categoryIds: categoryId, setType: "always" }),
-            neverDrawn: this.getAlwaysOrNeverDrawnElements({ modelIds: modelId, categoryIds: categoryId, setType: "never" }),
-        })), 
+        return (0, rxjs_1.from)(core_bentley_1.Id64.iterable(categoryIds)).pipe((0, Utils_js_1.releaseMainThreadOnItemsCount)(100), (0, rxjs_1.mergeMap)((categoryId) => {
+            return (0, rxjs_1.forkJoin)({
+                categoryId: (0, rxjs_1.of)(categoryId),
+                totalCount: this.#idsCache.getCategoryElementsCount(modelId, categoryId),
+                alwaysDrawn: this.getAlwaysOrNeverDrawnElements({ modelIds: modelId, categoryIds: categoryId, setType: "always" }),
+                neverDrawn: this.getAlwaysOrNeverDrawnElements({ modelIds: modelId, categoryIds: categoryId, setType: "never" }),
+            });
+        }), 
         // There is a known bug:
         // Categories that don't have root elements will make visibility result incorrect
         // E.g.:
@@ -637,19 +750,44 @@ class ModelsTreeVisibilityHandlerImpl {
         //    - ChildElementB (CategoryB is hidden) ChildElementB is in always drawn list
         // Result will be "partial" because CategoryB will return hidden visibility, even though all elements are visible
         // TODO fix with: https://github.com/iTwin/viewer-components-react/issues/1100
-        (0, rxjs_1.map)((state) => {
-            return this.getVisibilityFromAlwaysAndNeverDrawnElementsImpl({
+        (0, rxjs_1.mergeMap)((state) => {
+            if (this.#props.viewport.isAlwaysDrawnExclusive && state.totalCount === 0) {
+                return rxjs_1.EMPTY;
+            }
+            return (0, rxjs_1.of)(this.getVisibilityFromAlwaysAndNeverDrawnElementsImpl({
                 ...props,
                 ...state,
                 defaultStatus: () => props.defaultStatus(state.categoryId),
                 ignoreTooltip,
-            });
-        }), mergeVisibilityStatuses());
+            }));
+        }), (0, Utils_js_1.mergeVisibilityStatuses)());
     }
     getAlwaysOrNeverDrawnElements(props) {
-        return this.#alwaysAndNeverDrawnElements
-            .getElementsTree(props)
-            .pipe((0, rxjs_1.map)((childrenTree) => (0, Utils_js_1.getIdsFromChildrenTree)({ tree: childrenTree, predicate: ({ treeEntry }) => treeEntry.isInAlwaysOrNeverDrawnSet })));
+        if (!this.#filteredTree) {
+            return this.#alwaysAndNeverDrawnElements
+                .getElementsTree(props)
+                .pipe((0, rxjs_1.map)((childrenTree) => (0, Utils_js_2.getIdsFromChildrenTree)({ tree: childrenTree, predicate: ({ treeEntry }) => treeEntry.isInAlwaysOrNeverDrawnSet })));
+        }
+        // When filtered tree is present, children tree retrieved from alwaysAndNeverDrawnElements may include elements that are not present in filtered tree.
+        // Need to filter out such elements.
+        return (0, rxjs_1.forkJoin)({
+            filteredTree: (0, rxjs_1.from)(this.#filteredTree),
+            childrenTree: this.#alwaysAndNeverDrawnElements.getElementsTree(props),
+        }).pipe((0, rxjs_1.map)(({ filteredTree, childrenTree }) => {
+            const parentIdsPath = [props.modelIds];
+            if ("categoryIds" in props) {
+                parentIdsPath.push(props.categoryIds);
+                if ("parentElementIdsPath" in props) {
+                    props.parentElementIdsPath.forEach((parentElementIds) => parentIdsPath.push(parentElementIds));
+                }
+            }
+            // Get all ids that exist in filtered tree.
+            const elements = filteredTree.getElementsFromUnfilteredChildrenTree({ parentIdsPath, childrenTree });
+            return elements
+                ? // Need to filter elements that are in always/never drawn set.
+                    (0, Utils_js_1.setIntersection)(elements, (0, Utils_js_2.getIdsFromChildrenTree)({ tree: childrenTree, predicate: ({ treeEntry }) => treeEntry.isInAlwaysOrNeverDrawnSet }))
+                : new Set();
+        }));
     }
     clearAlwaysAndNeverDrawnElements(props) {
         return (0, rxjs_1.forkJoin)({
@@ -658,10 +796,10 @@ class ModelsTreeVisibilityHandlerImpl {
         }).pipe((0, rxjs_1.map)(({ alwaysDrawn, neverDrawn }) => {
             const viewport = this.#props.viewport;
             if (viewport.alwaysDrawn?.size && alwaysDrawn.size) {
-                viewport.setAlwaysDrawn(setDifference(viewport.alwaysDrawn, alwaysDrawn));
+                viewport.setAlwaysDrawn((0, Utils_js_1.setDifference)(viewport.alwaysDrawn, alwaysDrawn));
             }
             if (viewport.neverDrawn?.size && neverDrawn.size) {
-                viewport.setNeverDrawn(setDifference(viewport.neverDrawn, neverDrawn));
+                viewport.setNeverDrawn((0, Utils_js_1.setDifference)(viewport.neverDrawn, neverDrawn));
             }
         }));
     }
@@ -670,7 +808,9 @@ class ModelsTreeVisibilityHandlerImpl {
         const categoryId = ModelsTreeNode_js_1.ModelsTreeNode.getCategoryId(node);
         (0, core_bentley_1.assert)(!!modelId && !!categoryId);
         const elementIds = new Set(node.groupedInstanceKeys.map((key) => key.id));
-        return { modelId, categoryId, elementIds };
+        const childrenCount = node.extendedData?.childrenCount;
+        const isFiltered = node.extendedData?.isFiltered;
+        return { modelId, categoryId, elementIds, childrenCount, isFiltered };
     }
     getSubModeledElementsVisibilityStatus({ parentNodeVisibilityStatus, haveSubModel, tooltips, ignoreTooltips, }) {
         return (obs) => {
@@ -680,7 +820,7 @@ class ModelsTreeVisibilityHandlerImpl {
                 if (haveSubModel === "yes") {
                     return (0, rxjs_1.of)(modeledElementIds);
                 }
-                return (0, rxjs_1.from)(core_bentley_1.Id64.iterable(modeledElementIds)).pipe((0, rxjs_1.mergeMap)((elementId) => (0, rxjs_1.forkJoin)({
+                return (0, rxjs_1.from)(core_bentley_1.Id64.iterable(modeledElementIds)).pipe((0, Utils_js_1.releaseMainThreadOnItemsCount)(100), (0, rxjs_1.mergeMap)((elementId) => (0, rxjs_1.forkJoin)({
                     hasSubModel: this.#idsCache.hasSubModel(elementId),
                     elementId: (0, rxjs_1.of)(elementId),
                 })), (0, rxjs_1.filter)(({ hasSubModel }) => hasSubModel), (0, rxjs_1.map)(({ elementId }) => elementId), (0, rxjs_1.toArray)());
@@ -690,51 +830,11 @@ class ModelsTreeVisibilityHandlerImpl {
                 if (core_bentley_1.Id64.sizeOf(modeledElementIds) === 0) {
                     return (0, rxjs_1.of)(parentNodeVisibilityStatus);
                 }
-                return this.getModelVisibilityStatus({ modelIds: modeledElementIds }).pipe((0, rxjs_1.startWith)(parentNodeVisibilityStatus), mergeVisibilityStatuses(tooltips, ignoreTooltips));
+                return this.getModelVisibilityStatus({ modelIds: typeof modeledElementIds === "string" ? [modeledElementIds] : modeledElementIds }).pipe((0, rxjs_1.startWith)(parentNodeVisibilityStatus), (0, Utils_js_1.mergeVisibilityStatuses)(tooltips, ignoreTooltips));
             }));
         };
     }
 }
-function mergeVisibilities(obs) {
-    return obs.pipe((0, Rxjs_js_1.reduceWhile)((x) => x.allVisible || x.allHidden, (acc, val) => {
-        acc.allVisible &&= val === "visible";
-        acc.allHidden &&= val === "hidden";
-        return acc;
-    }, { allVisible: true, allHidden: true }), (0, rxjs_1.map)((x) => {
-        if (!x) {
-            return "empty";
-        }
-        return x.allVisible ? "visible" : x.allHidden ? "hidden" : "partial";
-    }));
-}
-function mergeVisibilityStatuses(tooltipMap, ignoreTooltip) {
-    return (obs) => {
-        return obs.pipe((0, rxjs_1.map)((visibilityStatus) => visibilityStatus.state), mergeVisibilities, (0, rxjs_1.map)((visibility) => {
-            if (visibility === "empty") {
-                visibility = "visible";
-            }
-            return (0, Tooltip_js_1.createVisibilityStatus)(visibility, getTooltipOptions(tooltipMap?.[visibility], ignoreTooltip));
-        }));
-    };
-}
-function setDifference(lhs, rhs) {
-    const result = new Set();
-    for (const x of lhs) {
-        if (!rhs.has(x)) {
-            result.add(x);
-        }
-    }
-    return result;
-}
-function setIntersection(lhs, rhs) {
-    const result = new Set();
-    for (const x of lhs) {
-        if (rhs.has(x)) {
-            result.add(x);
-        }
-    }
-    return result;
-}
 /**
  * Enables display of all given models. Also enables display of all categories and clears always and
  * never drawn lists in the viewport.
@@ -801,9 +901,33 @@ async function toggleModels(models, enable, viewport) {
 function areAllModelsVisible(models, viewport) {
     return models.length !== 0 ? models.every((id) => viewport.viewsModel(id)) : false;
 }
-function getTooltipOptions(key, ignoreTooltip) {
-    return {
-        useTooltip: ignoreTooltip ? false : key,
-    };
+function getParentElementsIdsPath(props) {
+    const parentElementIdsPath = new Array();
+    const modelIndex = props.parentKeys.findIndex((parentKey) => presentation_hierarchies_1.HierarchyNodeKey.isInstances(parentKey) && parentKey.instanceKeys.some((instanceKey) => instanceKey.id === props.modelId));
+    if (modelIndex === -1) {
+        return parentElementIdsPath;
+    }
+    // Hierarchy is model -> category -> root elements.
+    // Root elements index is 2 more than models'.
+    const firstParentIndex = modelIndex + 2;
+    for (let i = firstParentIndex; i < props.parentKeys.length; ++i) {
+        const parentKey = props.parentKeys[i];
+        if (!presentation_hierarchies_1.HierarchyNodeKey.isInstances(parentKey)) {
+            continue;
+        }
+        parentElementIdsPath.push(parentKey.instanceKeys.map(({ id }) => id));
+    }
+    return parentElementIdsPath;
+}
+function getRootCategoryIds(props) {
+    const modelIndex = props.parentKeys.findIndex((parentKey) => presentation_hierarchies_1.HierarchyNodeKey.isInstances(parentKey) && parentKey.instanceKeys.some((instanceKey) => instanceKey.id === props.modelId));
+    if (modelIndex === -1 || modelIndex + 1 === props.parentKeys.length) {
+        return undefined;
+    }
+    const rootCategoryKeys = props.parentKeys[modelIndex + 1];
+    if (!presentation_hierarchies_1.HierarchyNodeKey.isInstances(rootCategoryKeys)) {
+        return undefined;
+    }
+    return rootCategoryKeys.instanceKeys.map(({ id }) => id);
 }
 //# sourceMappingURL=ModelsTreeVisibilityHandler.js.map