@itwin/tree-widget-react 3.15.0 → 3.16.0

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

@@ -2,15 +2,15 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { concat, concatAll, defer, distinct, EMPTY, filter, firstValueFrom, forkJoin, from, fromEventPattern, map, merge, mergeMap, of, reduce, shareReplay, startWith, Subject, take, takeUntil, tap, toArray, } from "rxjs";
+import { concat, concatAll, defaultIfEmpty, defer, distinct, EMPTY, filter, firstValueFrom, forkJoin, from, fromEventPattern, map, merge, mergeMap, of, reduce, shareReplay, startWith, Subject, take, takeUntil, tap, toArray, } from "rxjs";
 import { assert, Id64 } from "@itwin/core-bentley";
 import { PerModelCategoryVisibility } from "@itwin/core-frontend";
 import { HierarchyNode, HierarchyNodeKey } from "@itwin/presentation-hierarchies";
-import { toggleAllCategories } from "../../common/CategoriesVisibilityUtils.js";
+import { enableCategoryDisplay, loadCategoriesFromViewport } from "../../common/CategoriesVisibilityUtils.js";
 import { reduceWhile, toVoidPromise } from "../../common/Rxjs.js";
 import { createVisibilityStatus } from "../../common/Tooltip.js";
 import { createVisibilityHandlerResult } from "../../common/UseHierarchyVisibility.js";
-import { releaseMainThreadOnItemsCount } from "../Utils.js";
+import { getIdsFromChildrenTree, releaseMainThreadOnItemsCount } from "../Utils.js";
 import { AlwaysAndNeverDrawnElementInfo } from "./AlwaysAndNeverDrawnElementInfo.js";
 import { createFilteredTree, parseCategoryKey } from "./FilteredTree.js";
 import { ModelsTreeNode } from "./ModelsTreeNode.js";
@@ -23,49 +23,49 @@ export function createModelsTreeVisibilityHandler(props) {
     return new ModelsTreeVisibilityHandlerImpl(props);
 }
 class ModelsTreeVisibilityHandlerImpl {
-    _props;
-    _eventListener;
-    _alwaysAndNeverDrawnElements;
-    _idsCache;
-    _filteredTree;
-    _elementChangeQueue = new Subject();
-    _subscriptions = [];
-    _changeRequest = new Subject();
-    constructor(_props) {
-        this._props = _props;
-        this._eventListener = createVisibilityChangeEventListener(_props.viewport);
-        this._alwaysAndNeverDrawnElements = new AlwaysAndNeverDrawnElementInfo(_props.viewport);
-        this._idsCache = this._props.idsCache;
-        this._filteredTree = _props.filteredPaths ? createFilteredTree(this._props.imodelAccess, _props.filteredPaths) : undefined;
-        this._subscriptions.push(this._elementChangeQueue.pipe(concatAll()).subscribe());
+    #eventListener;
+    #alwaysAndNeverDrawnElements;
+    #idsCache;
+    #filteredTree;
+    #elementChangeQueue = new Subject();
+    #subscriptions = [];
+    #changeRequest = new Subject();
+    #props;
+    constructor(props) {
+        this.#props = props;
+        this.#eventListener = createVisibilityChangeEventListener(this.#props.viewport);
+        this.#alwaysAndNeverDrawnElements = new AlwaysAndNeverDrawnElementInfo(this.#props.viewport, this.#props.componentId);
+        this.#idsCache = this.#props.idsCache;
+        this.#filteredTree = this.#props.filteredPaths ? createFilteredTree(this.#props.imodelAccess, this.#props.filteredPaths) : undefined;
+        this.#subscriptions.push(this.#elementChangeQueue.pipe(concatAll()).subscribe());
     }
     get onVisibilityChange() {
-        return this._eventListener.onVisibilityChange;
+        return this.#eventListener.onVisibilityChange;
     }
     async getVisibilityStatus(node) {
         return firstValueFrom(this.getVisibilityStatusObs(node).pipe(
         // unsubscribe from the observable if the change request for this node is received
-        takeUntil(this._changeRequest.pipe(filter(({ key, depth }) => depth === node.parentKeys.length && HierarchyNodeKey.equals(node.key, key)))), 
+        takeUntil(this.#changeRequest.pipe(filter(({ key, depth }) => depth === node.parentKeys.length && HierarchyNodeKey.equals(node.key, key)))), 
         // unsubscribe if visibility changes
         takeUntil(fromEventPattern((handler) => {
-            this._eventListener.onVisibilityChange.addListener(handler);
+            this.#eventListener.onVisibilityChange.addListener(handler);
         }, (handler) => {
-            this._eventListener.onVisibilityChange.removeListener(handler);
-        }))));
+            this.#eventListener.onVisibilityChange.removeListener(handler);
+        })), defaultIfEmpty(createVisibilityStatus("hidden"))));
     }
     async changeVisibility(node, shouldDisplay) {
         // notify about new change request
-        this._changeRequest.next({ key: node.key, depth: node.parentKeys.length });
+        this.#changeRequest.next({ key: node.key, depth: node.parentKeys.length });
         const changeObservable = this.changeVisibilityObs(node, shouldDisplay).pipe(
         // unsubscribe from the observable if the change request for this node is received
-        takeUntil(this._changeRequest.pipe(filter(({ key, depth }) => depth === node.parentKeys.length && HierarchyNodeKey.equals(node.key, key)))), tap({
+        takeUntil(this.#changeRequest.pipe(filter(({ key, depth }) => depth === node.parentKeys.length && HierarchyNodeKey.equals(node.key, key)))), tap({
             subscribe: () => {
-                this._eventListener.suppressChangeEvents();
-                this._alwaysAndNeverDrawnElements.suppressChangeEvents();
+                this.#eventListener.suppressChangeEvents();
+                this.#alwaysAndNeverDrawnElements.suppressChangeEvents();
             },
             finalize: () => {
-                this._eventListener.resumeChangeEvents();
-                this._alwaysAndNeverDrawnElements.resumeChangeEvents();
+                this.#eventListener.resumeChangeEvents();
+                this.#alwaysAndNeverDrawnElements.resumeChangeEvents();
             },
         }));
         return toVoidPromise(changeObservable);
@@ -74,20 +74,23 @@ class ModelsTreeVisibilityHandlerImpl {
         this[Symbol.dispose]();
     }
     [Symbol.dispose]() {
-        this._eventListener[Symbol.dispose]();
-        this._alwaysAndNeverDrawnElements[Symbol.dispose]();
-        this._subscriptions.forEach((x) => x.unsubscribe());
+        this.#eventListener[Symbol.dispose]();
+        this.#alwaysAndNeverDrawnElements[Symbol.dispose]();
+        this.#subscriptions.forEach((x) => x.unsubscribe());
     }
     getVisibilityStatusObs(node) {
-        if (node.filtering?.filteredChildrenIdentifierPaths?.length && !node.filtering.isFilterTarget) {
-            return this.getFilteredNodeVisibility({ node });
-        }
         if (HierarchyNode.isClassGroupingNode(node)) {
+            if (node.extendedData?.hasDirectNonFilteredTargets && !node.filtering?.hasFilterTargetAncestor) {
+                return this.getFilteredNodeVisibility({ node });
+            }
             return this.getClassGroupingNodeDisplayStatus(node);
         }
         if (!HierarchyNode.isInstancesNode(node)) {
             return of(createVisibilityStatus("disabled"));
         }
+        if (node.filtering?.filteredChildrenIdentifierPaths?.length && !node.filtering.isFilterTarget) {
+            return this.getFilteredNodeVisibility({ node });
+        }
         if (ModelsTreeNode.isSubjectNode(node)) {
             // note: subject nodes may be merged to represent multiple subject instances
             return this.getSubjectNodeVisibilityStatus({ subjectIds: node.key.instanceKeys.map((key) => key.id) });
@@ -110,13 +113,14 @@ class ModelsTreeVisibilityHandlerImpl {
             return of(createVisibilityStatus("disabled"));
         }
         return this.getElementDisplayStatus({
-            elementId: node.key.instanceKeys[0].id,
+            elementIds: node.key.instanceKeys.map(({ id }) => id),
             modelId,
             categoryId,
         });
     }
     getFilteredNodeVisibility(props) {
-        return from(this.getVisibilityChangeTargets(props)).pipe(mergeMap(({ subjects, models, categories, elements }) => {
+        assert(this.#filteredTree !== undefined);
+        return from(this.#filteredTree).pipe(map((filteredTree) => filteredTree.getVisibilityChangeTargets(props.node)), mergeMap(({ subjects, models, categories, elements }) => {
             const observables = new Array();
             if (subjects?.size) {
                 observables.push(this.getSubjectNodeVisibilityStatus({ subjectIds: [...subjects], ignoreTooltip: true }));
@@ -131,9 +135,13 @@ class ModelsTreeVisibilityHandlerImpl {
                 })));
             }
             if (elements?.size) {
-                observables.push(from(elements).pipe(releaseMainThreadOnItemsCount(50), mergeMap(([categoryKey, elementIds]) => {
+                observables.push(from(elements).pipe(releaseMainThreadOnItemsCount(50), mergeMap(([categoryKey, elementsMap]) => {
                     const { modelId, categoryId } = parseCategoryKey(categoryKey);
-                    return from(elementIds).pipe(releaseMainThreadOnItemsCount(1000), mergeMap((elementId) => this.getElementDisplayStatus({ modelId, categoryId, elementId, ignoreTooltip: true })));
+                    return this.getElementsDisplayStatus({
+                        elementIds: [...elementsMap.keys()],
+                        modelId,
+                        categoryId,
+                    });
                 })));
             }
             return merge(...observables);
@@ -141,49 +149,49 @@ class ModelsTreeVisibilityHandlerImpl {
     }
     getSubjectNodeVisibilityStatus({ subjectIds, ignoreTooltip }) {
         const result = defer(() => {
-            if (!this._props.viewport.view.isSpatialView()) {
+            if (!this.#props.viewport.view.isSpatialView()) {
                 return of(createVisibilityStatus("disabled", getTooltipOptions("modelsTree.subject.nonSpatialView", ignoreTooltip)));
             }
-            return from(this._idsCache.getSubjectModelIds(subjectIds)).pipe(mergeMap((modelIds) => this.getModelVisibilityStatus({ modelIds, ignoreTooltip: true })), mergeVisibilityStatuses({
+            return from(this.#idsCache.getSubjectModelIds(subjectIds)).pipe(mergeMap((modelIds) => this.getModelVisibilityStatus({ modelIds, ignoreTooltip: true })), mergeVisibilityStatuses({
                 visible: "modelsTree.subject.allModelsVisible",
                 hidden: "modelsTree.subject.allModelsHidden",
                 partial: "modelsTree.subject.someModelsHidden",
             }, ignoreTooltip));
         });
-        return createVisibilityHandlerResult(this, { ids: subjectIds }, result, this._props.overrides?.getSubjectNodeVisibility);
+        return createVisibilityHandlerResult(this, { ids: subjectIds }, result, this.#props.overrides?.getSubjectNodeVisibility);
     }
     getModelVisibilityStatus({ modelIds, ignoreTooltip }) {
         const result = defer(() => {
-            const viewport = this._props.viewport;
+            const viewport = this.#props.viewport;
             if (!viewport.view.isSpatialView()) {
                 return of(createVisibilityStatus("disabled", getTooltipOptions("modelsTree.model.nonSpatialView", ignoreTooltip)));
             }
-            return from(modelIds).pipe(distinct(), mergeMap((modelId) => {
+            return from(Id64.iterable(modelIds)).pipe(distinct(), mergeMap((modelId) => {
                 if (!viewport.view.viewsModel(modelId)) {
-                    return from(this._idsCache.getModelCategories(modelId)).pipe(mergeMap((categoryIds) => from(this._idsCache.getCategoriesModeledElements(modelId, categoryIds))), this.getSubModeledElementsVisibilityStatus({
+                    return from(this.#idsCache.getModelCategories(modelId)).pipe(mergeMap((categoryIds) => from(this.#idsCache.getCategoriesModeledElements(modelId, categoryIds))), this.getSubModeledElementsVisibilityStatus({
                         ignoreTooltips: ignoreTooltip,
                         haveSubModel: "yes",
                         tooltips: { visible: undefined, hidden: "modelsTree.model.hiddenThroughModelSelector", partial: "modelsTree.model.someSubModelsVisible" },
                         parentNodeVisibilityStatus: createVisibilityStatus("hidden"),
                     }));
                 }
-                return from(this._idsCache.getModelCategories(modelId)).pipe(mergeMap((categoryIds) => categoryIds.length === 0 ? of(createVisibilityStatus("visible")) : this.getCategoryDisplayStatus({ modelId, categoryIds, ignoreTooltip: true })), mergeVisibilityStatuses({
+                return from(this.#idsCache.getModelCategories(modelId)).pipe(mergeMap((categoryIds) => categoryIds.length === 0 ? of(createVisibilityStatus("visible")) : this.getCategoryDisplayStatus({ modelId, categoryIds, ignoreTooltip: true })), mergeVisibilityStatuses({
                     visible: "modelsTree.model.allCategoriesVisible",
                     partial: "modelsTree.model.someCategoriesHidden",
                     hidden: "modelsTree.model.allCategoriesHidden",
                 }));
             }), mergeVisibilityStatuses());
         });
-        return createVisibilityHandlerResult(this, { ids: modelIds }, result, this._props.overrides?.getModelDisplayStatus);
+        return createVisibilityHandlerResult(this, { ids: modelIds }, result, this.#props.overrides?.getModelDisplayStatus);
     }
     getDefaultCategoryVisibilityStatus({ modelId, categoryIds, ignoreTooltip, }) {
-        const viewport = this._props.viewport;
+        const viewport = this.#props.viewport;
         if (!viewport.view.viewsModel(modelId) || Id64.sizeOf(categoryIds) === 0) {
             return createVisibilityStatus("hidden", getTooltipOptions("modelsTree.category.hiddenThroughModel", ignoreTooltip));
         }
         let visibility = "unknown";
         for (const categoryId of Id64.iterable(categoryIds)) {
-            const override = this._props.viewport.perModelCategoryVisibility.getOverride(modelId, categoryId);
+            const override = this.#props.viewport.perModelCategoryVisibility.getOverride(modelId, categoryId);
             if (override === PerModelCategoryVisibility.Override.Show) {
                 if (visibility === "hidden") {
                     return createVisibilityStatus("partial");
@@ -212,8 +220,8 @@ class ModelsTreeVisibilityHandlerImpl {
     }
     getCategoryDisplayStatus({ ignoreTooltip, ...props }) {
         const result = defer(() => {
-            if (!this._props.viewport.view.viewsModel(props.modelId)) {
-                return from(this._idsCache.getCategoriesModeledElements(props.modelId, props.categoryIds)).pipe(this.getSubModeledElementsVisibilityStatus({
+            if (!this.#props.viewport.view.viewsModel(props.modelId)) {
+                return from(this.#idsCache.getCategoriesModeledElements(props.modelId, props.categoryIds)).pipe(this.getSubModeledElementsVisibilityStatus({
                     ignoreTooltips: ignoreTooltip,
                     parentNodeVisibilityStatus: createVisibilityStatus("hidden"),
                     tooltips: {
@@ -237,7 +245,7 @@ class ModelsTreeVisibilityHandlerImpl {
                     : this.getDefaultCategoryVisibilityStatus({ modelId: props.modelId, categoryIds: props.categoryIds }),
                 ignoreTooltip,
             }).pipe(mergeMap((visibilityStatusAlwaysAndNeverDraw) => {
-                return from(this._idsCache.getCategoriesModeledElements(props.modelId, props.categoryIds)).pipe(this.getSubModeledElementsVisibilityStatus({
+                return from(this.#idsCache.getCategoriesModeledElements(props.modelId, props.categoryIds)).pipe(this.getSubModeledElementsVisibilityStatus({
                     tooltips: {
                         visible: undefined,
                         hidden: "modelsTree.category.allElementsAndSubModelsHidden",
@@ -249,14 +257,30 @@ class ModelsTreeVisibilityHandlerImpl {
                 }));
             }));
         });
-        return createVisibilityHandlerResult(this, props, result, this._props.overrides?.getCategoryDisplayStatus);
+        return createVisibilityHandlerResult(this, props, result, this.#props.overrides?.getCategoryDisplayStatus);
     }
     getClassGroupingNodeDisplayStatus(node) {
-        const result = defer(() => {
-            const info = this.getGroupingNodeInfo(node);
-            const { modelId, categoryId, elementIds } = info;
-            if (!this._props.viewport.view.viewsModel(modelId)) {
-                return of([...elementIds]).pipe(this.getSubModeledElementsVisibilityStatus({
+        const { elementIds, modelId, categoryId } = this.getGroupingNodeInfo(node);
+        const result = this.getElementsDisplayStatus({
+            elementIds,
+            modelId,
+            categoryId,
+        });
+        return createVisibilityHandlerResult(this, { node }, result, this.#props.overrides?.getElementGroupingNodeDisplayStatus);
+    }
+    getElementDisplayStatus({ elementIds, modelId, categoryId, }) {
+        const result = this.getElementsDisplayStatus({
+            elementIds,
+            modelId,
+            categoryId,
+        });
+        return createVisibilityHandlerResult(this, { elementId: elementIds[0], modelId, categoryId }, result, this.#props.overrides?.getElementDisplayStatus);
+    }
+    getElementsDisplayStatus(props) {
+        return defer(() => {
+            const { modelId, categoryId, elementIds } = props;
+            if (!this.#props.viewport.view.viewsModel(modelId)) {
+                return of(elementIds).pipe(this.getSubModeledElementsVisibilityStatus({
                     tooltips: {
                         visible: undefined,
                         hidden: undefined,
@@ -279,7 +303,7 @@ class ModelsTreeVisibilityHandlerImpl {
                     noElementsInExclusiveAlwaysDrawnList: "modelsTree.groupingNode.allElementsHidden",
                 },
             }).pipe(mergeMap((visibilityStatusAlwaysAndNeverDraw) => {
-                return of([...elementIds]).pipe(this.getSubModeledElementsVisibilityStatus({
+                return of(elementIds).pipe(this.getSubModeledElementsVisibilityStatus({
                     tooltips: {
                         visible: undefined,
                         hidden: "modelsTree.groupingNode.allElementsAndSubModelsHidden",
@@ -290,113 +314,58 @@ class ModelsTreeVisibilityHandlerImpl {
                 }));
             }));
         });
-        return createVisibilityHandlerResult(this, { node }, result, this._props.overrides?.getElementGroupingNodeDisplayStatus);
     }
-    getElementOverriddenVisibility(elementId, ignoreTooltip) {
-        const viewport = this._props.viewport;
-        if (viewport.neverDrawn?.has(elementId)) {
-            return createVisibilityStatus("hidden", getTooltipOptions("modelsTree.element.hiddenThroughNeverDrawnList", ignoreTooltip));
-        }
-        if (viewport.alwaysDrawn?.size) {
-            if (viewport.alwaysDrawn.has(elementId)) {
-                return createVisibilityStatus("visible", getTooltipOptions("modelsTree.element.displayedThroughAlwaysDrawnList", ignoreTooltip));
+    /** Changes visibility of the items represented by the tree node. */
+    changeVisibilityObs(node, on) {
+        const changeObs = defer(() => {
+            if (HierarchyNode.isClassGroupingNode(node)) {
+                if (node.extendedData?.hasDirectNonFilteredTargets && !node.filtering?.hasFilterTargetAncestor) {
+                    return this.changeFilteredNodeVisibility({ node, on });
+                }
+                return this.changeElementGroupingNodeState(node, on);
             }
-            if (viewport.isAlwaysDrawnExclusive) {
-                return createVisibilityStatus("hidden", getTooltipOptions("modelsTree.element.hiddenDueToOtherElementsExclusivelyAlwaysDrawn", ignoreTooltip));
+            if (!HierarchyNode.isInstancesNode(node)) {
+                return EMPTY;
             }
-        }
-        return undefined;
-    }
-    getElementVisibility(ignoreTooltip, viewsModel, overriddenVisibility, categoryVisibility, subModelVisibilityStatus) {
-        if (subModelVisibilityStatus === undefined) {
-            if (!viewsModel) {
-                return createVisibilityStatus("hidden", getTooltipOptions("modelsTree.element.hiddenThroughModel", ignoreTooltip));
+            if (node.filtering?.filteredChildrenIdentifierPaths?.length && !node.filtering.isFilterTarget) {
+                return this.changeFilteredNodeVisibility({ node, on });
             }
-            if (overriddenVisibility) {
-                return overriddenVisibility;
+            if (ModelsTreeNode.isSubjectNode(node)) {
+                return this.changeSubjectNodeState(node.key.instanceKeys.map((key) => key.id), on);
             }
-            return createVisibilityStatus(categoryVisibility.state, getTooltipOptions(categoryVisibility.state === "visible" ? undefined : "modelsTree.element.hiddenThroughCategory", ignoreTooltip));
-        }
-        if (subModelVisibilityStatus.state === "partial") {
-            return createVisibilityStatus("partial", getTooltipOptions("modelsTree.element.someElementsAreHidden", ignoreTooltip));
-        }
-        if (subModelVisibilityStatus.state === "visible") {
-            if (!viewsModel || overriddenVisibility?.state === "hidden" || (categoryVisibility.state === "hidden" && !overriddenVisibility)) {
-                return createVisibilityStatus("partial", getTooltipOptions("modelsTree.element.partialThroughSubModel", ignoreTooltip));
+            if (ModelsTreeNode.isModelNode(node)) {
+                return this.changeModelState({ ids: node.key.instanceKeys.map(({ id }) => id), on });
             }
-            return createVisibilityStatus("visible", getTooltipOptions(undefined, ignoreTooltip));
-        }
-        if (!viewsModel) {
-            return createVisibilityStatus("hidden", getTooltipOptions("modelsTree.element.hiddenThroughModel", ignoreTooltip));
-        }
-        if (overriddenVisibility) {
-            if (overriddenVisibility.state === "hidden") {
-                return overriddenVisibility;
+            const modelId = ModelsTreeNode.getModelId(node);
+            if (!modelId) {
+                return EMPTY;
             }
-            return createVisibilityStatus("partial", getTooltipOptions("modelsTree.element.partialThroughElement", ignoreTooltip));
-        }
-        if (categoryVisibility.state === "visible") {
-            return createVisibilityStatus("partial", getTooltipOptions("modelsTree.element.partialThroughCategory", ignoreTooltip));
-        }
-        return createVisibilityStatus("hidden", getTooltipOptions("modelsTree.element.hiddenThroughCategory", ignoreTooltip));
-    }
-    getElementDisplayStatus({ ignoreTooltip, ...props }) {
-        const result = defer(() => {
-            const viewport = this._props.viewport;
-            const { elementId, modelId, categoryId } = props;
-            const viewsModel = viewport.view.viewsModel(modelId);
-            const elementStatus = this.getElementOverriddenVisibility(elementId, ignoreTooltip);
-            return from(this._idsCache.hasSubModel(elementId)).pipe(mergeMap((hasSubModel) => (hasSubModel ? this.getModelVisibilityStatus({ modelIds: [elementId] }) : of(undefined))), map((subModelVisibilityStatus) => this.getElementVisibility(ignoreTooltip, viewsModel, elementStatus, 
-            // Single category will always return "visible" or "hidden"
-            this.getDefaultCategoryVisibilityStatus({ categoryIds: categoryId, modelId, ignoreTooltip: true }), subModelVisibilityStatus)));
-        });
-        return createVisibilityHandlerResult(this, props, result, this._props.overrides?.getElementDisplayStatus);
-    }
-    /** Changes visibility of the items represented by the tree node. */
-    changeVisibilityObs(node, on) {
-        if (node.filtering?.filteredChildrenIdentifierPaths?.length && !node.filtering.isFilterTarget) {
-            return this.changeFilteredNodeVisibility({ node, on });
-        }
-        if (HierarchyNode.isClassGroupingNode(node)) {
-            return this.changeElementGroupingNodeState(node, on);
-        }
-        if (!HierarchyNode.isInstancesNode(node)) {
-            return EMPTY;
-        }
-        if (ModelsTreeNode.isSubjectNode(node)) {
-            return this.changeSubjectNodeState(node.key.instanceKeys.map((key) => key.id), on);
-        }
-        if (ModelsTreeNode.isModelNode(node)) {
-            return this.changeModelState({ ids: node.key.instanceKeys.map(({ id }) => id), on });
-        }
-        const modelId = ModelsTreeNode.getModelId(node);
-        if (!modelId) {
-            return EMPTY;
-        }
-        if (ModelsTreeNode.isCategoryNode(node)) {
-            return this.changeCategoryState({
-                categoryIds: node.key.instanceKeys.map(({ id }) => id),
+            if (ModelsTreeNode.isCategoryNode(node)) {
+                return this.changeCategoryState({
+                    categoryIds: node.key.instanceKeys.map(({ id }) => id),
+                    modelId,
+                    on,
+                });
+            }
+            const categoryId = ModelsTreeNode.getCategoryId(node);
+            if (!categoryId) {
+                return EMPTY;
+            }
+            return this.changeElementsState({
+                elementIds: new Set([...node.key.instanceKeys.map(({ id }) => id)]),
                 modelId,
+                categoryId,
                 on,
             });
-        }
-        const categoryId = ModelsTreeNode.getCategoryId(node);
-        if (!categoryId) {
-            return EMPTY;
-        }
-        return this.changeElementsState({
-            elementIds: new Set([...node.key.instanceKeys.map(({ id }) => id)]),
-            modelId,
-            categoryId,
-            on,
         });
-    }
-    async getVisibilityChangeTargets({ node }) {
-        const filteredTree = await this._filteredTree;
-        return filteredTree ? filteredTree.getVisibilityChangeTargets(node) : {};
+        if (this.#props.viewport.isAlwaysDrawnExclusive) {
+            return concat(this.removeAlwaysDrawnExclusive(), changeObs);
+        }
+        return changeObs;
     }
     changeFilteredNodeVisibility({ on, ...props }) {
-        return from(this.getVisibilityChangeTargets(props)).pipe(mergeMap(({ subjects, models, categories, elements }) => {
+        assert(this.#filteredTree !== undefined);
+        return from(this.#filteredTree).pipe(map((filteredTree) => filteredTree.getVisibilityChangeTargets(props.node)), mergeMap(({ subjects, models, categories, elements }) => {
             const observables = new Array();
             if (subjects?.size) {
                 observables.push(this.changeSubjectNodeState([...subjects], on));
@@ -411,22 +380,30 @@ class ModelsTreeVisibilityHandlerImpl {
                 })));
             }
             if (elements?.size) {
-                observables.push(from(elements).pipe(mergeMap(([categoryKey, elementIds]) => {
+                observables.push(from(elements).pipe(mergeMap(([categoryKey, elementsMap]) => {
                     const { modelId, categoryId } = parseCategoryKey(categoryKey);
-                    return this.changeElementsState({ modelId, categoryId, elementIds, on });
+                    return this.changeElementsState({ modelId, categoryId, elementIds: new Set([...elementsMap.keys()]), on });
                 })));
             }
             return merge(...observables);
         }));
     }
+    removeAlwaysDrawnExclusive() {
+        return from(this.#idsCache.getAllCategories()).pipe(map((categoryIds) => {
+            this.#props.viewport.changeCategoryDisplay(categoryIds, false, false);
+            this.#props.viewport.clearNeverDrawn();
+            this.#props.viewport.perModelCategoryVisibility.clearOverrides();
+            this.#props.viewport.setAlwaysDrawn(this.#props.viewport.alwaysDrawn ?? new Set());
+        }));
+    }
     changeSubjectNodeState(ids, on) {
         const result = defer(() => {
-            if (!this._props.viewport.view.isSpatialView()) {
+            if (!this.#props.viewport.view.isSpatialView()) {
                 return EMPTY;
             }
-            return from(this._idsCache.getSubjectModelIds(ids)).pipe(mergeMap((modelIds) => this.changeModelState({ ids: modelIds, on })));
+            return from(this.#idsCache.getSubjectModelIds(ids)).pipe(mergeMap((modelIds) => this.changeModelState({ ids: modelIds, on })));
         });
-        return createVisibilityHandlerResult(this, { ids, on }, result, this._props.overrides?.changeSubjectNodeState);
+        return createVisibilityHandlerResult(this, { ids, on }, result, this.#props.overrides?.changeSubjectNodeState);
     }
     changeModelState(props) {
         const { ids, on } = props;
@@ -434,31 +411,31 @@ class ModelsTreeVisibilityHandlerImpl {
             return EMPTY;
         }
         const result = defer(() => {
-            const viewport = this._props.viewport;
+            const viewport = this.#props.viewport;
             if (!viewport.view.isSpatialView()) {
                 return EMPTY;
             }
             const idsObs = from(Id64.iterable(ids));
             if (!on) {
                 viewport.changeModelDisplay(ids, false);
-                return idsObs.pipe(mergeMap(async (modelId) => ({ modelId, categoryIds: await this._idsCache.getModelCategories(modelId) })), mergeMap(({ modelId, categoryIds }) => from(this._idsCache.getCategoriesModeledElements(modelId, categoryIds))), mergeMap((modeledElementIds) => this.changeModelState({ ids: modeledElementIds, on })));
+                return idsObs.pipe(mergeMap(async (modelId) => ({ modelId, categoryIds: await this.#idsCache.getModelCategories(modelId) })), mergeMap(({ modelId, categoryIds }) => from(this.#idsCache.getCategoriesModeledElements(modelId, categoryIds))), mergeMap((modeledElementIds) => this.changeModelState({ ids: modeledElementIds, on })));
             }
             return concat(defer(() => {
                 viewport.perModelCategoryVisibility.clearOverrides(ids);
                 return from(viewport.addViewedModels(ids));
             }), idsObs.pipe(mergeMap((modelId) => {
-                return from(this._idsCache.getModelCategories(modelId)).pipe(mergeMap((categoryIds) => this.changeCategoryState({ categoryIds, modelId, on: true })));
+                return from(this.#idsCache.getModelCategories(modelId)).pipe(mergeMap((categoryIds) => this.changeCategoryState({ categoryIds, modelId, on: true })));
             })));
         });
-        return createVisibilityHandlerResult(this, props, result, this._props.overrides?.changeModelState);
+        return createVisibilityHandlerResult(this, props, result, this.#props.overrides?.changeModelState);
     }
     showModelWithoutAnyCategoriesOrElements(modelId) {
-        const viewport = this._props.viewport;
+        const viewport = this.#props.viewport;
         return forkJoin({
-            categories: this._idsCache.getModelCategories(modelId),
-            alwaysDrawnElements: this.getAlwaysDrawnElements({ modelId }),
+            categories: this.#idsCache.getModelCategories(modelId),
+            alwaysDrawnElements: this.getAlwaysOrNeverDrawnElements({ modelIds: modelId, setType: "always" }),
         }).pipe(mergeMap(async ({ categories, alwaysDrawnElements }) => {
-            const alwaysDrawn = this._props.viewport.alwaysDrawn;
+            const alwaysDrawn = this.#props.viewport.alwaysDrawn;
             if (alwaysDrawn && alwaysDrawnElements) {
                 viewport.setAlwaysDrawn(setDifference(alwaysDrawn, alwaysDrawnElements));
             }
@@ -469,7 +446,7 @@ class ModelsTreeVisibilityHandlerImpl {
         }));
     }
     changeCategoryStateInViewportAccordingToModelVisibility(modelId, categoryId, on) {
-        const viewport = this._props.viewport;
+        const viewport = this.#props.viewport;
         const isDisplayedInSelector = viewport.view.viewsCategory(categoryId);
         const override = on === isDisplayedInSelector
             ? PerModelCategoryVisibility.Override.None
@@ -485,26 +462,26 @@ class ModelsTreeVisibilityHandlerImpl {
     }
     changeCategoryState(props) {
         const result = defer(() => {
-            const viewport = this._props.viewport;
+            const viewport = this.#props.viewport;
             const { modelId, categoryIds, on } = props;
             return concat(props.on && !viewport.view.viewsModel(modelId) ? this.showModelWithoutAnyCategoriesOrElements(modelId) : EMPTY, defer(() => {
                 for (const categoryId of Id64.iterable(categoryIds)) {
                     this.changeCategoryStateInViewportAccordingToModelVisibility(modelId, categoryId, on);
                 }
                 return this.clearAlwaysAndNeverDrawnElements(props);
-            }), from(this._idsCache.getCategoriesModeledElements(modelId, categoryIds)).pipe(mergeMap((modeledElementIds) => this.changeModelState({ ids: modeledElementIds, on }))));
+            }), from(this.#idsCache.getCategoriesModeledElements(modelId, categoryIds)).pipe(mergeMap((modeledElementIds) => this.changeModelState({ ids: modeledElementIds, on }))));
         });
-        return createVisibilityHandlerResult(this, props, result, this._props.overrides?.changeCategoryState);
+        return createVisibilityHandlerResult(this, props, result, this.#props.overrides?.changeCategoryState);
     }
     doChangeElementsState(props) {
         return defer(() => {
             const { modelId, categoryId, elementIds, on } = props;
-            const viewport = this._props.viewport;
+            const viewport = this.#props.viewport;
             return concat(on && !viewport.view.viewsModel(modelId) ? this.showModelWithoutAnyCategoriesOrElements(modelId) : EMPTY, defer(() => {
                 const categoryVisibility = this.getDefaultCategoryVisibilityStatus({ categoryIds: categoryId, modelId, ignoreTooltip: true });
                 const isDisplayedByDefault = categoryVisibility.state === "visible";
                 return this.queueElementsVisibilityChange(elementIds, on, isDisplayedByDefault);
-            }), from(elementIds).pipe(mergeMap(async (elementId) => ({ elementId, isSubModel: await this._idsCache.hasSubModel(elementId) })), filter(({ isSubModel }) => isSubModel), map(({ elementId }) => elementId), toArray(), mergeMap((subModelIds) => this.changeModelState({ ids: subModelIds, on }))));
+            }), from(elementIds).pipe(mergeMap(async (elementId) => ({ elementId, isSubModel: await this.#idsCache.hasSubModel(elementId) })), filter(({ isSubModel }) => isSubModel), map(({ elementId }) => elementId), toArray(), mergeMap((subModelIds) => this.changeModelState({ ids: subModelIds, on }))));
         });
     }
     /**
@@ -513,7 +490,7 @@ class ModelsTreeVisibilityHandlerImpl {
      */
     changeElementGroupingNodeState(node, on) {
         const result = this.doChangeElementsState({ ...this.getGroupingNodeInfo(node), on });
-        return createVisibilityHandlerResult(this, { node, on }, result, this._props.overrides?.changeElementGroupingNodeState);
+        return createVisibilityHandlerResult(this, { node, on }, result, this.#props.overrides?.changeElementGroupingNodeState);
     }
     /**
      * Updates visibility of an element and all its child elements by adding them to the always/never drawn list.
@@ -521,7 +498,7 @@ class ModelsTreeVisibilityHandlerImpl {
      */
     changeElementsState(props) {
         const result = this.doChangeElementsState(props);
-        return createVisibilityHandlerResult(this, props, result, this._props.overrides?.changeElementsState);
+        return createVisibilityHandlerResult(this, props, result, this.#props.overrides?.changeElementsState);
     }
     queueElementsVisibilityChange(elementIds, on, visibleByDefault) {
         const finishedSubject = new Subject();
@@ -536,7 +513,7 @@ class ModelsTreeVisibilityHandlerImpl {
             },
         }));
         // queue visibility change. `changeObservable` will be subscribed to when other queue changes are finished
-        this._elementChangeQueue.next(changeObservable);
+        this.#elementChangeQueue.next(changeObservable);
         // return observable that will emit when visibility change is finished
         return changeFinished.pipe(take(1), tap({
             unsubscribe: () => {
@@ -548,11 +525,11 @@ class ModelsTreeVisibilityHandlerImpl {
     changeElementStateNoChildrenOperator(props) {
         return (elementIds) => {
             const { on, isDisplayedByDefault } = props;
-            const isAlwaysDrawnExclusive = this._props.viewport.isAlwaysDrawnExclusive;
+            const isAlwaysDrawnExclusive = this.#props.viewport.isAlwaysDrawnExclusive;
             return elementIds.pipe(releaseMainThreadOnItemsCount(500), reduce((acc, elementId) => {
                 if (acc.alwaysDrawn === undefined || acc.neverDrawn === undefined) {
-                    acc.alwaysDrawn = new Set(this._props.viewport.alwaysDrawn || []);
-                    acc.neverDrawn = new Set(this._props.viewport.neverDrawn || []);
+                    acc.alwaysDrawn = new Set(this.#props.viewport.alwaysDrawn || []);
+                    acc.neverDrawn = new Set(this.#props.viewport.neverDrawn || []);
                 }
                 if (on) {
                     const wasRemoved = acc.neverDrawn.delete(elementId);
@@ -579,8 +556,8 @@ class ModelsTreeVisibilityHandlerImpl {
                 neverDrawn: undefined,
                 alwaysDrawn: undefined,
             }), map((state) => {
-                state.changedNeverDrawn && state.neverDrawn && this._props.viewport.setNeverDrawn(state.neverDrawn);
-                state.changedAlwaysDrawn && state.alwaysDrawn && this._props.viewport.setAlwaysDrawn(state.alwaysDrawn, this._props.viewport.isAlwaysDrawnExclusive);
+                state.changedNeverDrawn && state.neverDrawn && this.#props.viewport.setNeverDrawn(state.neverDrawn);
+                state.changedAlwaysDrawn && state.alwaysDrawn && this.#props.viewport.setAlwaysDrawn(state.alwaysDrawn, this.#props.viewport.isAlwaysDrawnExclusive);
             }));
         };
     }
@@ -595,7 +572,7 @@ class ModelsTreeVisibilityHandlerImpl {
         if (alwaysDrawn?.size === totalCount) {
             return createVisibilityStatus("visible", getTooltipOptions(props.tooltips.allElementsInAlwaysDrawnList, ignoreTooltip));
         }
-        const viewport = this._props.viewport;
+        const viewport = this.#props.viewport;
         if (viewport.isAlwaysDrawnExclusive && viewport.alwaysDrawn?.size) {
             return alwaysDrawn?.size
                 ? createVisibilityStatus("partial", getTooltipOptions(props.tooltips.elementsInBothAlwaysAndNeverDrawn, ignoreTooltip))
@@ -608,7 +585,7 @@ class ModelsTreeVisibilityHandlerImpl {
         return status;
     }
     getVisibilityFromAlwaysAndNeverDrawnElements({ ignoreTooltip, ...props }) {
-        const viewport = this._props.viewport;
+        const viewport = this.#props.viewport;
         if (viewport.isAlwaysDrawnExclusive) {
             if (!viewport?.alwaysDrawn?.size) {
                 return of(createVisibilityStatus("hidden", getTooltipOptions(props.tooltips.noElementsInExclusiveAlwaysDrawnList, ignoreTooltip)));
@@ -622,17 +599,17 @@ class ModelsTreeVisibilityHandlerImpl {
                 ...props,
                 alwaysDrawn: viewport.alwaysDrawn?.size ? setIntersection(props.elements, viewport.alwaysDrawn) : undefined,
                 neverDrawn: viewport.neverDrawn?.size ? setIntersection(props.elements, viewport.neverDrawn) : undefined,
-                totalCount: props.elements.size,
+                totalCount: Id64.sizeOf(props.elements),
                 ignoreTooltip,
             }));
         }
         const { modelId, categoryIds } = props.categoryProps;
         return from(Id64.iterable(categoryIds)).pipe(mergeMap((categoryId) => {
-            const totalCount = this._idsCache.getCategoryElementsCount(modelId, categoryId);
+            const totalCount = this.#idsCache.getCategoryElementsCount(modelId, categoryId);
             return forkJoin({
                 totalCount,
-                alwaysDrawn: this.getAlwaysDrawnElements({ categoryIds: categoryId, modelId }),
-                neverDrawn: this.getNeverDrawnElements({ categoryIds: categoryId, modelId }),
+                alwaysDrawn: this.getAlwaysOrNeverDrawnElements({ modelIds: modelId, categoryIds: categoryId, setType: "always" }),
+                neverDrawn: this.getAlwaysOrNeverDrawnElements({ modelIds: modelId, categoryIds: categoryId, setType: "never" }),
             }).pipe(
             // There is a known bug:
             // Categories that don't have root elements will make visibility result incorrect
@@ -652,18 +629,17 @@ class ModelsTreeVisibilityHandlerImpl {
             }));
         }), mergeVisibilityStatuses());
     }
-    getAlwaysDrawnElements(props) {
-        return this._alwaysAndNeverDrawnElements.getElements({ modelId: props.modelId, categoryIds: props.categoryIds, setType: "always" });
-    }
-    getNeverDrawnElements(props) {
-        return this._alwaysAndNeverDrawnElements.getElements({ modelId: props.modelId, categoryIds: props.categoryIds, setType: "never" });
+    getAlwaysOrNeverDrawnElements(props) {
+        return this.#alwaysAndNeverDrawnElements
+            .getElementsTree(props)
+            .pipe(map((childrenTree) => getIdsFromChildrenTree({ tree: childrenTree, predicate: ({ treeEntry }) => treeEntry.isInAlwaysOrNeverDrawnSet })));
     }
     clearAlwaysAndNeverDrawnElements(props) {
         return forkJoin({
-            alwaysDrawn: this.getAlwaysDrawnElements(props),
-            neverDrawn: this.getNeverDrawnElements(props),
+            alwaysDrawn: this.getAlwaysOrNeverDrawnElements({ modelIds: props.modelId, categoryIds: props.categoryIds, setType: "always" }),
+            neverDrawn: this.getAlwaysOrNeverDrawnElements({ modelIds: props.modelId, categoryIds: props.categoryIds, setType: "never" }),
         }).pipe(map(({ alwaysDrawn, neverDrawn }) => {
-            const viewport = this._props.viewport;
+            const viewport = this.#props.viewport;
             if (viewport.alwaysDrawn?.size && alwaysDrawn.size) {
                 viewport.setAlwaysDrawn(setDifference(viewport.alwaysDrawn, alwaysDrawn));
             }
@@ -687,11 +663,11 @@ class ModelsTreeVisibilityHandlerImpl {
                 if (haveSubModel === "yes") {
                     return of(modeledElementIds);
                 }
-                return from(modeledElementIds).pipe(mergeMap(async (elementId) => ({ elementId, hasSubModel: await this._idsCache.hasSubModel(elementId) })), filter(({ hasSubModel }) => hasSubModel), map(({ elementId }) => elementId), toArray());
+                return from(Id64.iterable(modeledElementIds)).pipe(mergeMap(async (elementId) => ({ elementId, hasSubModel: await this.#idsCache.hasSubModel(elementId) })), filter(({ hasSubModel }) => hasSubModel), map(({ elementId }) => elementId), toArray());
             }), 
             // combine visibility status of sub-models with visibility status of parent node
             mergeMap((modeledElementIds) => {
-                if (modeledElementIds.length === 0) {
+                if (Id64.sizeOf(modeledElementIds) === 0) {
                     return of(parentNodeVisibilityStatus);
                 }
                 return this.getModelVisibilityStatus({ modelIds: modeledElementIds }).pipe(startWith(parentNodeVisibilityStatus), mergeVisibilityStatuses(tooltips, ignoreTooltips));
@@ -723,24 +699,40 @@ function mergeVisibilityStatuses(tooltipMap, ignoreTooltip) {
 }
 function setDifference(lhs, rhs) {
     const result = new Set();
-    lhs.forEach((x) => !rhs.has(x) && result.add(x));
+    for (const x of lhs) {
+        if (!rhs.has(x)) {
+            result.add(x);
+        }
+    }
     return result;
 }
 function setIntersection(lhs, rhs) {
     const result = new Set();
-    lhs.forEach((x) => rhs.has(x) && result.add(x));
+    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.
+ *
+ * @param componentId Optional unique id of the component that consumes this function.
+ * It can be any string, as long as it is not shared across different components.
  * @public
  */
-export async function showAllModels(models, viewport) {
+export async function showAllModels(models, viewport, componentId) {
     await viewport.addViewedModels(models);
     viewport.clearNeverDrawn();
     viewport.clearAlwaysDrawn();
-    await toggleAllCategories(viewport, true);
+    const categories = await loadCategoriesFromViewport(viewport, componentId);
+    if (categories.length === 0) {
+        return;
+    }
+    const ids = categories.map((category) => category.categoryId);
+    await enableCategoryDisplay(viewport, ids, true);
 }
 /**
  * Disables display of all given models.