@itwin/tree-widget-react 3.0.2 → 3.1.0

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

@@ -4,36 +4,19 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.areAllModelsVisible = exports.toggleModels = exports.invertAllModels = exports.hideAllModels = exports.showAllModels = exports.createModelsTreeVisibilityHandler = exports.ELEMENT_CLASS_NAME = exports.CATEGORY_CLASS_NAME = exports.MODEL_CLASS_NAME = exports.SUBJECT_CLASS_NAME = void 0;
+exports.areAllModelsVisible = exports.toggleModels = exports.invertAllModels = exports.hideAllModels = exports.showAllModels = exports.createModelsTreeVisibilityHandler = void 0;
 const rxjs_1 = require("rxjs");
 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_1 = require("../../common/CategoriesVisibilityUtils");
 const Rxjs_1 = require("../../common/Rxjs");
+const Tooltip_1 = require("../../common/Tooltip");
 const UseHierarchyVisibility_1 = require("../../common/UseHierarchyVisibility");
 const AlwaysAndNeverDrawnElementInfo_1 = require("./AlwaysAndNeverDrawnElementInfo");
+const FilteredTree_1 = require("./FilteredTree");
 const ModelsTreeNode_1 = require("./ModelsTreeNode");
-const Tooltip_1 = require("./Tooltip");
 const VisibilityChangeEventListener_1 = require("./VisibilityChangeEventListener");
-exports.SUBJECT_CLASS_NAME = "BisCore.Subject";
-exports.MODEL_CLASS_NAME = "BisCore.GeometricModel3d";
-exports.CATEGORY_CLASS_NAME = "BisCore.SpatialCategory";
-exports.ELEMENT_CLASS_NAME = "BisCore.GeometricElement3d";
-function createCategoryKey(modelId, categoryId) {
-    return `${modelId}-${categoryId}`;
-}
-function parseCategoryKey(key) {
-    const [modelId, categoryId] = key.split("-");
-    return { modelId, categoryId };
-}
-function createElementKey(modelId, categoryId, elementId) {
-    return `${modelId}-${categoryId}-${elementId}`;
-}
-function parseElementKey(key) {
-    const [modelId, categoryId, elementId] = key.split("-");
-    return { modelId, categoryId, elementId };
-}
 /**
  * Creates an instance if `ModelsTreeVisibilityHandler`.
  * @internal
@@ -45,30 +28,55 @@ exports.createModelsTreeVisibilityHandler = createModelsTreeVisibilityHandler;
 class ModelsTreeVisibilityHandlerImpl {
     constructor(_props) {
         this._props = _props;
+        this._elementChangeQueue = new rxjs_1.Subject();
+        this._subscriptions = [];
+        this._changeRequest = new rxjs_1.Subject();
         this._eventListener = (0, VisibilityChangeEventListener_1.createVisibilityChangeEventListener)(_props.viewport);
         this._alwaysAndNeverDrawnElements = new AlwaysAndNeverDrawnElementInfo_1.AlwaysAndNeverDrawnElementInfo(_props.viewport);
         this._idsCache = this._props.idsCache;
+        this._filteredTree = _props.filteredPaths ? (0, FilteredTree_1.createFilteredTree)(this._props.imodelAccess, _props.filteredPaths) : undefined;
+        this._subscriptions.push(this._elementChangeQueue.pipe((0, rxjs_1.concatAll)()).subscribe());
     }
     // istanbul ignore next
     get onVisibilityChange() {
         return this._eventListener.onVisibilityChange;
     }
     async getVisibilityStatus(node) {
-        return (0, rxjs_1.firstValueFrom)(this.getVisibilityStatusObs(node));
+        return (0, rxjs_1.firstValueFrom)(this.getVisibilityStatusObs(node).pipe(
+        // unsubscribe from the observable if the change request for this node is received
+        (0, rxjs_1.takeUntil)(this._changeRequest.pipe((0, rxjs_1.filter)(({ key, depth }) => depth === node.parentKeys.length && presentation_hierarchies_1.HierarchyNodeKey.equals(node.key, key)))), 
+        // unsubscribe if visibility changes
+        (0, rxjs_1.takeUntil)((0, rxjs_1.fromEventPattern)((handler) => {
+            this._eventListener.onVisibilityChange.addListener(handler);
+        }, (handler) => {
+            this._eventListener.onVisibilityChange.removeListener(handler);
+        }))));
     }
     async changeVisibility(node, shouldDisplay) {
-        return (0, Rxjs_1.toVoidPromise)(this.changeVisibilityObs(node, shouldDisplay));
+        // notify about new change request
+        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
+        (0, rxjs_1.takeUntil)(this._changeRequest.pipe((0, rxjs_1.filter)(({ key, depth }) => depth === node.parentKeys.length && presentation_hierarchies_1.HierarchyNodeKey.equals(node.key, key)))), (0, rxjs_1.tap)({
+            subscribe: () => {
+                this._eventListener.suppressChangeEvents();
+                this._alwaysAndNeverDrawnElements.suppressChangeEvents();
+            },
+            finalize: () => {
+                this._eventListener.resumeChangeEvents();
+                this._alwaysAndNeverDrawnElements.resumeChangeEvents();
+            },
+        }));
+        return (0, Rxjs_1.toVoidPromise)(changeObservable);
     }
     dispose() {
         this._eventListener.dispose();
         this._alwaysAndNeverDrawnElements.dispose();
+        this._subscriptions.forEach((x) => x.unsubscribe());
     }
     getVisibilityStatusObs(node) {
         if (node.filtering?.filteredChildrenIdentifierPaths?.length && !node.filtering.isFilterTarget) {
-            return this.getFilteredNodeVisibility({
-                parentKeys: [...node.parentKeys, node.key],
-                filterPaths: node.filtering.filteredChildrenIdentifierPaths,
-            });
+            return this.getFilteredNodeVisibility({ node });
         }
         if (presentation_hierarchies_1.HierarchyNode.isClassGroupingNode(node)) {
             return this.getClassGroupingNodeDisplayStatus(node);
@@ -78,10 +86,10 @@ class ModelsTreeVisibilityHandlerImpl {
         }
         if (ModelsTreeNode_1.ModelsTreeNode.isSubjectNode(node)) {
             // note: subject nodes may be merged to represent multiple subject instances
-            return this.getSubjectNodeVisibilityStatus(node.key.instanceKeys.map((key) => key.id));
+            return this.getSubjectNodeVisibilityStatus({ subjectIds: node.key.instanceKeys.map((key) => key.id) });
         }
         if (ModelsTreeNode_1.ModelsTreeNode.isModelNode(node)) {
-            return this.getModelVisibilityStatus(node.key.instanceKeys[0].id);
+            return this.getModelVisibilityStatus({ modelId: node.key.instanceKeys[0].id });
         }
         const modelId = ModelsTreeNode_1.ModelsTreeNode.getModelId(node);
         if (!modelId) {
@@ -103,25 +111,25 @@ class ModelsTreeVisibilityHandlerImpl {
             categoryId,
         });
     }
-    getFilteredNodeVisibility({ parentKeys, filterPaths }) {
-        return (0, rxjs_1.from)(this.getFilterTargets({ parentKeys, filterPaths })).pipe((0, rxjs_1.mergeMap)(({ subjects, models, categories, elements }) => {
+    getFilteredNodeVisibility(props) {
+        return (0, rxjs_1.from)(this.getVisibilityChangeTargets(props)).pipe((0, rxjs_1.mergeMap)(({ subjects, models, categories, elements }) => {
             const observables = new Array();
             if (subjects?.size) {
-                observables.push(this.getSubjectNodeVisibilityStatus([...subjects]));
+                observables.push(this.getSubjectNodeVisibilityStatus({ subjectIds: [...subjects], ignoreTooltip: true }));
             }
             if (models?.size) {
-                observables.push((0, rxjs_1.from)(models).pipe((0, rxjs_1.mergeMap)((modelId) => this.getModelVisibilityStatus(modelId))));
+                observables.push((0, rxjs_1.from)(models).pipe((0, rxjs_1.mergeMap)((modelId) => this.getModelVisibilityStatus({ modelId, ignoreTooltip: true }))));
             }
             if (categories?.size) {
                 observables.push((0, rxjs_1.from)(categories).pipe((0, rxjs_1.mergeMap)((key) => {
-                    const { modelId, categoryId } = parseCategoryKey(key);
-                    return this.getCategoryDisplayStatus({ modelId, categoryId });
+                    const { modelId, categoryId } = (0, FilteredTree_1.parseCategoryKey)(key);
+                    return this.getCategoryDisplayStatus({ modelId, categoryId, ignoreTooltip: true });
                 })));
             }
             if (elements?.size) {
-                observables.push((0, rxjs_1.from)(elements).pipe((0, rxjs_1.mergeMap)((key) => {
-                    const { modelId, categoryId, elementId } = parseElementKey(key);
-                    return this.getElementDisplayStatus({ modelId, categoryId, elementId });
+                observables.push((0, rxjs_1.from)(elements).pipe(releaseMainThreadOnItemsCount(50), (0, rxjs_1.mergeMap)(([categoryKey, elementIds]) => {
+                    const { modelId, categoryId } = (0, FilteredTree_1.parseCategoryKey)(categoryKey);
+                    return (0, rxjs_1.from)(elementIds).pipe(releaseMainThreadOnItemsCount(1000), (0, rxjs_1.mergeMap)((elementId) => this.getElementDisplayStatus({ modelId, categoryId, elementId, ignoreTooltip: true })));
                 })));
             }
             return (0, rxjs_1.merge)(...observables);
@@ -130,65 +138,66 @@ class ModelsTreeVisibilityHandlerImpl {
             return (0, Tooltip_1.createVisibilityStatus)(x);
         }));
     }
-    getSubjectNodeVisibilityStatus(subjectIds) {
+    getSubjectNodeVisibilityStatus({ subjectIds, ignoreTooltip }) {
         const result = (0, rxjs_1.defer)(() => {
             if (!this._props.viewport.view.isSpatialView()) {
-                return (0, rxjs_1.of)((0, Tooltip_1.createVisibilityStatus)("disabled", "subject.nonSpatialView"));
+                return (0, rxjs_1.of)((0, Tooltip_1.createVisibilityStatus)("disabled", getTooltipOptions("modelsTree.subject.nonSpatialView", ignoreTooltip)));
             }
-            return (0, rxjs_1.from)(this._idsCache.getSubjectModelIds(subjectIds)).pipe((0, rxjs_1.concatAll)(), (0, rxjs_1.distinct)(), (0, rxjs_1.mergeMap)((modelId) => this.getModelVisibilityStatus(modelId)), (0, rxjs_1.map)((x) => x.state), getVisibilityStatusFromTreeNodeChildren({
-                visible: "subject.allModelsVisible",
-                hidden: "subject.allModelsHidden",
-                partial: "subject.someModelsHidden",
-            }));
+            return (0, rxjs_1.from)(this._idsCache.getSubjectModelIds(subjectIds)).pipe((0, rxjs_1.concatAll)(), (0, rxjs_1.distinct)(), (0, rxjs_1.mergeMap)((modelId) => this.getModelVisibilityStatus({ modelId, ignoreTooltip: true })), (0, rxjs_1.map)((x) => x.state), getVisibilityStatusFromTreeNodeChildren({
+                visible: "modelsTree.subject.allModelsVisible",
+                hidden: "modelsTree.subject.allModelsHidden",
+                partial: "modelsTree.subject.someModelsHidden",
+            }, ignoreTooltip));
         });
         return (0, UseHierarchyVisibility_1.createVisibilityHandlerResult)(this, { ids: subjectIds }, result, this._props.overrides?.getSubjectNodeVisibility);
     }
-    getModelVisibilityStatus(modelId) {
+    getModelVisibilityStatus({ modelId, ignoreTooltip }) {
         const result = (0, rxjs_1.defer)(() => {
             const viewport = this._props.viewport;
             if (!viewport.view.isSpatialView()) {
-                return (0, rxjs_1.of)((0, Tooltip_1.createVisibilityStatus)("disabled", "model.nonSpatialView"));
+                return (0, rxjs_1.of)((0, Tooltip_1.createVisibilityStatus)("disabled", getTooltipOptions("modelsTree.model.nonSpatialView", ignoreTooltip)));
             }
             if (!viewport.view.viewsModel(modelId)) {
-                return (0, rxjs_1.of)((0, Tooltip_1.createVisibilityStatus)("hidden", "model.hiddenThroughModelSelector"));
+                return (0, rxjs_1.of)((0, Tooltip_1.createVisibilityStatus)("hidden", getTooltipOptions("modelsTree.model.hiddenThroughModelSelector", ignoreTooltip)));
             }
-            return (0, rxjs_1.from)(this._idsCache.getModelCategories(modelId)).pipe((0, rxjs_1.concatAll)(), (0, rxjs_1.mergeMap)((categoryId) => this.getCategoryDisplayStatus({ modelId, categoryId })), (0, rxjs_1.map)((x) => x.state), getVisibilityFromTreeNodeChildren, (0, rxjs_1.map)((visibilityByCategories) => {
+            return (0, rxjs_1.from)(this._idsCache.getModelCategories(modelId)).pipe((0, rxjs_1.concatAll)(), (0, rxjs_1.mergeMap)((categoryId) => this.getCategoryDisplayStatus({ modelId, categoryId, ignoreTooltip: true })), (0, rxjs_1.map)((x) => x.state), getVisibilityFromTreeNodeChildren, (0, rxjs_1.map)((visibilityByCategories) => {
                 const state = visibilityByCategories === "empty" ? "visible" : visibilityByCategories;
-                return (0, Tooltip_1.createVisibilityStatus)(state, state === "partial" ? "model.someCategoriesHidden" : `model.allCategories${state ? "Visible" : "Hidden"}`);
+                return (0, Tooltip_1.createVisibilityStatus)(state, getTooltipOptions(state === "partial" ? "modelsTree.model.someCategoriesHidden" : `modelsTree.model.allCategories${state ? "Visible" : "Hidden"}`, ignoreTooltip));
             }));
         });
         return (0, UseHierarchyVisibility_1.createVisibilityHandlerResult)(this, { id: modelId }, result, this._props.overrides?.getModelDisplayStatus);
     }
-    getDefaultCategoryVisibilityStatus({ modelId, categoryId }) {
+    getDefaultCategoryVisibilityStatus({ modelId, categoryId, ignoreTooltip, }) {
         const viewport = this._props.viewport;
         if (!viewport.view.viewsModel(modelId)) {
-            return (0, Tooltip_1.createVisibilityStatus)("hidden", "category.hiddenThroughModel");
+            return (0, Tooltip_1.createVisibilityStatus)("hidden", getTooltipOptions("modelsTree.category.hiddenThroughModel", ignoreTooltip));
         }
         switch (this._props.viewport.perModelCategoryVisibility.getOverride(modelId, categoryId)) {
             case core_frontend_1.PerModelCategoryVisibility.Override.Show:
-                return (0, Tooltip_1.createVisibilityStatus)("visible", "category.displayedThroughPerModelOverride");
+                return (0, Tooltip_1.createVisibilityStatus)("visible", getTooltipOptions("modelsTree.category.displayedThroughPerModelOverride", ignoreTooltip));
             case core_frontend_1.PerModelCategoryVisibility.Override.Hide:
-                return (0, Tooltip_1.createVisibilityStatus)("hidden", "category.hiddenThroughPerModelOverride");
+                return (0, Tooltip_1.createVisibilityStatus)("hidden", getTooltipOptions("modelsTree.category.hiddenThroughPerModelOverride", ignoreTooltip));
         }
         const isVisible = viewport.view.viewsCategory(categoryId);
         return isVisible
-            ? (0, Tooltip_1.createVisibilityStatus)("visible", "category.displayedThroughCategorySelector")
-            : (0, Tooltip_1.createVisibilityStatus)("hidden", "category.hiddenThroughCategorySelector");
+            ? (0, Tooltip_1.createVisibilityStatus)("visible", getTooltipOptions("modelsTree.category.displayedThroughCategorySelector", ignoreTooltip))
+            : (0, Tooltip_1.createVisibilityStatus)("hidden", getTooltipOptions("modelsTree.category.hiddenThroughCategorySelector", ignoreTooltip));
     }
-    getCategoryDisplayStatus(props) {
+    getCategoryDisplayStatus({ ignoreTooltip, ...props }) {
         const result = (0, rxjs_1.defer)(() => {
             if (!this._props.viewport.view.viewsModel(props.modelId)) {
-                return (0, rxjs_1.of)((0, Tooltip_1.createVisibilityStatus)("hidden", "category.hiddenThroughModel"));
+                return (0, rxjs_1.of)((0, Tooltip_1.createVisibilityStatus)("hidden", getTooltipOptions("modelsTree.category.hiddenThroughModel", ignoreTooltip)));
             }
             return this.getVisibilityFromAlwaysAndNeverDrawnElements({
                 queryProps: props,
                 tooltips: {
-                    allElementsInAlwaysDrawnList: "category.allElementsVisible",
-                    allElementsInNeverDrawnList: "category.allElementsHidden",
-                    elementsInBothAlwaysAndNeverDrawn: "category.someElementsAreHidden",
-                    noElementsInExclusiveAlwaysDrawnList: "category.allElementsHidden",
+                    allElementsInAlwaysDrawnList: "modelsTree.category.allElementsVisible",
+                    allElementsInNeverDrawnList: "modelsTree.category.allElementsHidden",
+                    elementsInBothAlwaysAndNeverDrawn: "modelsTree.category.someElementsAreHidden",
+                    noElementsInExclusiveAlwaysDrawnList: "modelsTree.category.allElementsHidden",
                 },
                 defaultStatus: () => this.getDefaultCategoryVisibilityStatus(props),
+                ignoreTooltip,
             });
         });
         return (0, UseHierarchyVisibility_1.createVisibilityHandlerResult)(this, props, result, this._props.overrides?.getCategoryDisplayStatus);
@@ -203,58 +212,54 @@ class ModelsTreeVisibilityHandlerImpl {
             return this.getVisibilityFromAlwaysAndNeverDrawnElements({
                 elements: elementIds,
                 defaultStatus: () => {
-                    const status = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId });
-                    return (0, Tooltip_1.createVisibilityStatus)(status.state, `groupingNode.${status.state}ThroughCategory`);
+                    const status = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId, ignoreTooltip: true });
+                    return (0, Tooltip_1.createVisibilityStatus)(status.state, getTooltipOptions(`modelsTree.groupingNode.${status.state}ThroughCategory`));
                 },
                 tooltips: {
-                    allElementsInAlwaysDrawnList: "groupingNode.allElementsVisible",
-                    allElementsInNeverDrawnList: "groupingNode.allElementsHidden",
-                    elementsInBothAlwaysAndNeverDrawn: "groupingNode.someElementsAreHidden",
-                    noElementsInExclusiveAlwaysDrawnList: "groupingNode.allElementsHidden",
+                    allElementsInAlwaysDrawnList: "modelsTree.groupingNode.allElementsVisible",
+                    allElementsInNeverDrawnList: "modelsTree.groupingNode.allElementsHidden",
+                    elementsInBothAlwaysAndNeverDrawn: "modelsTree.groupingNode.someElementsAreHidden",
+                    noElementsInExclusiveAlwaysDrawnList: "modelsTree.groupingNode.allElementsHidden",
                 },
             });
         });
         return (0, UseHierarchyVisibility_1.createVisibilityHandlerResult)(this, { node }, result, this._props.overrides?.getElementGroupingNodeDisplayStatus);
     }
-    getElementOverriddenVisibility(elementId) {
+    getElementOverriddenVisibility(elementId, ignoreTooltip) {
         const viewport = this._props.viewport;
         if (viewport.neverDrawn?.has(elementId)) {
-            return (0, Tooltip_1.createVisibilityStatus)("hidden", "element.hiddenThroughNeverDrawnList");
+            return (0, Tooltip_1.createVisibilityStatus)("hidden", getTooltipOptions("modelsTree.element.hiddenThroughNeverDrawnList", ignoreTooltip));
         }
         if (viewport.alwaysDrawn?.size) {
             if (viewport.alwaysDrawn.has(elementId)) {
-                return (0, Tooltip_1.createVisibilityStatus)("visible", "element.displayedThroughAlwaysDrawnList");
+                return (0, Tooltip_1.createVisibilityStatus)("visible", getTooltipOptions("modelsTree.element.displayedThroughAlwaysDrawnList", ignoreTooltip));
             }
             if (viewport.isAlwaysDrawnExclusive) {
-                return (0, Tooltip_1.createVisibilityStatus)("hidden", "element.hiddenDueToOtherElementsExclusivelyAlwaysDrawn");
+                return (0, Tooltip_1.createVisibilityStatus)("hidden", getTooltipOptions("modelsTree.element.hiddenDueToOtherElementsExclusivelyAlwaysDrawn", ignoreTooltip));
             }
         }
         return undefined;
     }
-    getElementDisplayStatus(props) {
+    getElementDisplayStatus({ ignoreTooltip, ...props }) {
         const result = (0, rxjs_1.defer)(() => {
             const viewport = this._props.viewport;
             const { elementId, modelId, categoryId } = props;
             if (!viewport.view.viewsModel(modelId)) {
-                return (0, rxjs_1.of)((0, Tooltip_1.createVisibilityStatus)("hidden", "element.hiddenThroughModel"));
+                return (0, rxjs_1.of)((0, Tooltip_1.createVisibilityStatus)("hidden", getTooltipOptions("modelsTree.element.hiddenThroughModel", ignoreTooltip)));
             }
-            let status = this.getElementOverriddenVisibility(elementId);
+            let status = this.getElementOverriddenVisibility(elementId, ignoreTooltip);
             if (status) {
                 return (0, rxjs_1.of)(status);
             }
-            status = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId });
-            return (0, rxjs_1.of)((0, Tooltip_1.createVisibilityStatus)(status.state, status.state === "visible" ? undefined : "element.hiddenThroughCategory"));
+            status = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId, ignoreTooltip: true });
+            return (0, rxjs_1.of)((0, Tooltip_1.createVisibilityStatus)(status.state, getTooltipOptions(status.state === "visible" ? undefined : "modelsTree.element.hiddenThroughCategory", ignoreTooltip)));
         });
         return (0, UseHierarchyVisibility_1.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({
-                parentKeys: [...node.parentKeys, node.key],
-                filterPaths: node.filtering.filteredChildrenIdentifierPaths,
-                on,
-            });
+            return this.changeFilteredNodeVisibility({ node, on });
         }
         if (presentation_hierarchies_1.HierarchyNode.isClassGroupingNode(node)) {
             return this.changeElementGroupingNodeState(node, on);
@@ -287,62 +292,19 @@ class ModelsTreeVisibilityHandlerImpl {
             // istanbul ignore next
             return rxjs_1.EMPTY;
         }
-        return this.changeElementState({
-            elementId: node.key.instanceKeys[0].id,
+        return this.changeElementsState({
+            elementIds: new Set([...node.key.instanceKeys.map(({ id }) => id)]),
             modelId,
             categoryId,
             on,
         });
     }
-    async getFilterTargets({ parentKeys, filterPaths }) {
-        const filterTargets = {};
-        function addFilterTarget(targetType, value) {
-            (filterTargets[targetType] ??= new Set()).add(value);
-        }
-        const imodelAccess = this._props.imodelAccess;
-        // Remove all paths such that there are paths to any of the ancestors of the filter target.
-        const paths = reduceFilterPaths(filterPaths);
-        await Promise.all(paths.map(async (path) => {
-            const target = path[path.length - 1];
-            if (!presentation_hierarchies_1.HierarchyNodeIdentifier.isInstanceNodeIdentifier(target)) {
-                return;
-            }
-            const previousPath = path.slice(0, path.length - 1);
-            if (await imodelAccess.classDerivesFrom(target.className, exports.SUBJECT_CLASS_NAME)) {
-                addFilterTarget("subjects", target.id);
-                return;
-            }
-            if (await imodelAccess.classDerivesFrom(target.className, exports.MODEL_CLASS_NAME)) {
-                addFilterTarget("models", target.id);
-                return;
-            }
-            if (await imodelAccess.classDerivesFrom(target.className, exports.CATEGORY_CLASS_NAME)) {
-                // eslint-disable-next-line @typescript-eslint/no-shadow
-                const modelId = await this.findClassIdInFilterPath(previousPath, parentKeys, exports.MODEL_CLASS_NAME);
-                addFilterTarget("categories", createCategoryKey(modelId, target.id));
-                return;
-            }
-            const [modelId, categoryId] = await Promise.all([
-                this.findClassIdInFilterPath(previousPath, parentKeys, exports.MODEL_CLASS_NAME),
-                this.findClassIdInFilterPath(previousPath, parentKeys, exports.CATEGORY_CLASS_NAME),
-            ]);
-            addFilterTarget("elements", createElementKey(modelId, categoryId, target.id));
-            // Add parent elements to the filter targets as well
-            for (let idx = path.length - 1; idx >= 0; --idx) {
-                const pathIdentifier = path[idx];
-                if (!presentation_hierarchies_1.HierarchyNodeIdentifier.isInstanceNodeIdentifier(pathIdentifier)) {
-                    continue;
-                }
-                if (!(await imodelAccess.classDerivesFrom(pathIdentifier.className, exports.ELEMENT_CLASS_NAME))) {
-                    break;
-                }
-                addFilterTarget("elements", createElementKey(modelId, categoryId, pathIdentifier.id));
-            }
-        }));
-        return filterTargets;
+    async getVisibilityChangeTargets({ node }) {
+        const filteredTree = await this._filteredTree;
+        return filteredTree ? filteredTree.getVisibilityChangeTargets(node) : {};
     }
     changeFilteredNodeVisibility({ on, ...props }) {
-        return (0, rxjs_1.from)(this.getFilterTargets(props)).pipe((0, rxjs_1.mergeMap)(({ subjects, models, categories, elements }) => {
+        return (0, rxjs_1.from)(this.getVisibilityChangeTargets(props)).pipe((0, rxjs_1.mergeMap)(({ subjects, models, categories, elements }) => {
             const observables = new Array();
             if (subjects?.size) {
                 observables.push(this.changeSubjectNodeState([...subjects], on));
@@ -352,14 +314,14 @@ class ModelsTreeVisibilityHandlerImpl {
             }
             if (categories?.size) {
                 observables.push((0, rxjs_1.from)(categories).pipe((0, rxjs_1.mergeMap)((key) => {
-                    const { modelId, categoryId } = parseCategoryKey(key);
+                    const { modelId, categoryId } = (0, FilteredTree_1.parseCategoryKey)(key);
                     return this.changeCategoryState({ modelId, categoryId, on });
                 })));
             }
             if (elements?.size) {
-                observables.push((0, rxjs_1.from)(elements).pipe((0, rxjs_1.mergeMap)((key) => {
-                    const { modelId, categoryId, elementId } = parseElementKey(key);
-                    return this.changeElementState({ modelId, categoryId, elementId, on });
+                observables.push((0, rxjs_1.from)(elements).pipe((0, rxjs_1.mergeMap)(([categoryKey, elementIds]) => {
+                    const { modelId, categoryId } = (0, FilteredTree_1.parseCategoryKey)(categoryKey);
+                    return this.changeElementsState({ modelId, categoryId, elementIds, on });
                 })));
             }
             return (0, rxjs_1.merge)(...observables);
@@ -448,9 +410,9 @@ class ModelsTreeVisibilityHandlerImpl {
             const { modelId, categoryId, elementIds } = info;
             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({ categoryId, modelId });
+                const categoryVisibility = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId, ignoreTooltip: true });
                 const isDisplayedByDefault = categoryVisibility.state === "visible";
-                return (0, rxjs_1.from)(elementIds).pipe(this.changeElementStateNoChildrenOperator({ on, isDisplayedByDefault }));
+                return this.queueElementsVisibilityChange(elementIds, on, isDisplayedByDefault);
             }));
         });
         return (0, UseHierarchyVisibility_1.createVisibilityHandlerResult)(this, { node, on }, result, this._props.overrides?.changeElementGroupingNodeState);
@@ -459,23 +421,49 @@ class ModelsTreeVisibilityHandlerImpl {
      * Updates visibility of an element and all its child elements by adding them to the always/never drawn list.
      * @note If element is to be enabled and model is hidden, it will be enabled.
      */
-    changeElementState(props) {
+    changeElementsState(props) {
         const result = (0, rxjs_1.defer)(() => {
-            const { elementId, on, modelId, categoryId } = props;
+            const { elementIds, on, modelId, categoryId } = props;
             const viewport = this._props.viewport;
             return (0, rxjs_1.concat)(props.on && !viewport.view.viewsModel(modelId) ? this.showModelWithoutAnyCategoriesOrElements(modelId) : rxjs_1.EMPTY, (0, rxjs_1.defer)(() => {
-                const categoryVisibility = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId });
+                const categoryVisibility = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId, ignoreTooltip: true });
                 const isDisplayedByDefault = categoryVisibility.state === "visible";
-                return (0, rxjs_1.of)(elementId).pipe(this.changeElementStateNoChildrenOperator({ on, isDisplayedByDefault }));
+                return this.queueElementsVisibilityChange(elementIds, on, isDisplayedByDefault);
             }));
         });
-        return (0, UseHierarchyVisibility_1.createVisibilityHandlerResult)(this, props, result, this._props.overrides?.changeElementState);
+        return (0, UseHierarchyVisibility_1.createVisibilityHandlerResult)(this, props, result, this._props.overrides?.changeElementsState);
+    }
+    queueElementsVisibilityChange(elementIds, on, visibleByDefault) {
+        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(
+        // 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: () => {
+                // notify that visibility change is finished
+                finishedSubject.next(true);
+            },
+        }));
+        // queue visibility change. `changeObservable` will be subscribed to when other queue changes are finished
+        this._elementChangeQueue.next(changeObservable);
+        // return observable that will emit when visibility change is finished
+        return changeFinished.pipe((0, rxjs_1.take)(1), (0, rxjs_1.tap)({
+            unsubscribe: () => {
+                // if this observable is unsubscribed before visibility change is finished, we have to notify that it queued change request is cancelled
+                finishedSubject.next(true);
+            },
+        }), (0, rxjs_1.map)(() => undefined));
     }
     changeElementStateNoChildrenOperator(props) {
         return (elementIds) => {
             const { on, isDisplayedByDefault } = props;
             const isAlwaysDrawnExclusive = this._props.viewport.isAlwaysDrawnExclusive;
-            return elementIds.pipe((0, rxjs_1.reduce)((acc, elementId) => {
+            return elementIds.pipe(releaseMainThreadOnItemsCount(500), (0, rxjs_1.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 || []);
+                }
                 if (on) {
                     const wasRemoved = acc.neverDrawn.delete(elementId);
                     acc.changedNeverDrawn ||= wasRemoved;
@@ -498,39 +486,39 @@ class ModelsTreeVisibilityHandlerImpl {
             }, {
                 changedNeverDrawn: false,
                 changedAlwaysDrawn: false,
-                neverDrawn: new Set(this._props.viewport.neverDrawn || []),
-                alwaysDrawn: new Set(this._props.viewport.alwaysDrawn || []),
+                neverDrawn: undefined,
+                alwaysDrawn: undefined,
             }), (0, rxjs_1.map)((state) => {
-                state.changedNeverDrawn && this._props.viewport.setNeverDrawn(state.neverDrawn);
-                state.changedAlwaysDrawn && 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);
             }));
         };
     }
     getVisibilityFromAlwaysAndNeverDrawnElementsImpl(props) {
-        const { alwaysDrawn, neverDrawn, totalCount } = props;
+        const { alwaysDrawn, neverDrawn, totalCount, ignoreTooltip } = props;
         if (neverDrawn?.size === totalCount) {
-            return (0, Tooltip_1.createVisibilityStatus)("hidden", props.tooltips.allElementsInNeverDrawnList);
+            return (0, Tooltip_1.createVisibilityStatus)("hidden", getTooltipOptions(props.tooltips.allElementsInNeverDrawnList, ignoreTooltip));
         }
         if (alwaysDrawn?.size === totalCount) {
-            return (0, Tooltip_1.createVisibilityStatus)("visible", props.tooltips.allElementsInAlwaysDrawnList);
+            return (0, Tooltip_1.createVisibilityStatus)("visible", getTooltipOptions(props.tooltips.allElementsInAlwaysDrawnList, ignoreTooltip));
         }
         const viewport = this._props.viewport;
         if (viewport.isAlwaysDrawnExclusive && viewport.alwaysDrawn?.size) {
             return alwaysDrawn?.size
-                ? (0, Tooltip_1.createVisibilityStatus)("partial", props.tooltips.elementsInBothAlwaysAndNeverDrawn)
-                : (0, Tooltip_1.createVisibilityStatus)("hidden", props.tooltips.noElementsInExclusiveAlwaysDrawnList);
+                ? (0, Tooltip_1.createVisibilityStatus)("partial", getTooltipOptions(props.tooltips.elementsInBothAlwaysAndNeverDrawn, ignoreTooltip))
+                : (0, Tooltip_1.createVisibilityStatus)("hidden", getTooltipOptions(props.tooltips.noElementsInExclusiveAlwaysDrawnList, ignoreTooltip));
         }
         const status = props.defaultStatus();
         if ((status.state === "visible" && neverDrawn?.size) || (status.state === "hidden" && alwaysDrawn?.size)) {
-            return (0, Tooltip_1.createVisibilityStatus)("partial");
+            return (0, Tooltip_1.createVisibilityStatus)("partial", getTooltipOptions(undefined, ignoreTooltip));
         }
         return status;
     }
-    getVisibilityFromAlwaysAndNeverDrawnElements(props) {
+    getVisibilityFromAlwaysAndNeverDrawnElements({ ignoreTooltip, ...props }) {
         const viewport = this._props.viewport;
         if (viewport.isAlwaysDrawnExclusive) {
             if (!viewport?.alwaysDrawn?.size) {
-                return (0, rxjs_1.of)((0, Tooltip_1.createVisibilityStatus)("hidden", props.tooltips.noElementsInExclusiveAlwaysDrawnList));
+                return (0, rxjs_1.of)((0, Tooltip_1.createVisibilityStatus)("hidden", getTooltipOptions(props.tooltips.noElementsInExclusiveAlwaysDrawnList, ignoreTooltip)));
             }
         }
         else if (!viewport?.neverDrawn?.size && !viewport?.alwaysDrawn?.size) {
@@ -542,6 +530,7 @@ class ModelsTreeVisibilityHandlerImpl {
                 alwaysDrawn: viewport.alwaysDrawn?.size ? setIntersection(props.elements, viewport.alwaysDrawn) : undefined,
                 neverDrawn: viewport.neverDrawn?.size ? setIntersection(props.elements, viewport.neverDrawn) : undefined,
                 totalCount: props.elements.size,
+                ignoreTooltip,
             }));
         }
         const { modelId, categoryId } = props.queryProps;
@@ -554,6 +543,7 @@ class ModelsTreeVisibilityHandlerImpl {
             return this.getVisibilityFromAlwaysAndNeverDrawnElementsImpl({
                 ...props,
                 ...state,
+                ignoreTooltip,
             });
         }));
     }
@@ -584,28 +574,6 @@ class ModelsTreeVisibilityHandlerImpl {
         const elementIds = new Set(node.groupedInstanceKeys.map((key) => key.id));
         return { modelId, categoryId, elementIds };
     }
-    async findClassIdInFilterPath(path, parentKeys, className) {
-        function* keysToCheck() {
-            for (let i = path.length - 1; i >= 0; --i) {
-                const id = path[i];
-                if (presentation_hierarchies_1.HierarchyNodeIdentifier.isInstanceNodeIdentifier(id)) {
-                    yield id;
-                }
-            }
-            for (let i = parentKeys.length - 1; i >= 0; --i) {
-                const key = parentKeys[i];
-                if (presentation_hierarchies_1.HierarchyNodeKey.isInstances(key)) {
-                    yield* key.instanceKeys;
-                }
-            }
-        }
-        for (const parentKey of keysToCheck()) {
-            if (await this._props.imodelAccess.classDerivesFrom(parentKey.className, className)) {
-                return parentKey.id;
-            }
-        }
-        (0, core_bentley_1.assert)(false, () => `Cannot find an instance of ${className} in instance keys: ${JSON.stringify([...keysToCheck()], undefined, 2)}`);
-    }
 }
 function getVisibilityFromTreeNodeChildren(obs) {
     return obs.pipe((0, Rxjs_1.reduceWhile)((x) => x.allVisible || x.allHidden, (acc, val) => {
@@ -619,13 +587,13 @@ function getVisibilityFromTreeNodeChildren(obs) {
         return x.allVisible ? "visible" : x.allHidden ? "hidden" : "partial";
     }));
 }
-function getVisibilityStatusFromTreeNodeChildren(tooltipMap) {
+function getVisibilityStatusFromTreeNodeChildren(tooltipMap, ignoreTooltip) {
     return (obs) => {
         return getVisibilityFromTreeNodeChildren(obs).pipe((0, rxjs_1.map)((visibility) => {
             if (visibility === "empty") {
                 visibility = "visible";
             }
-            return (0, Tooltip_1.createVisibilityStatus)(visibility, tooltipMap[visibility]);
+            return (0, Tooltip_1.createVisibilityStatus)(visibility, getTooltipOptions(tooltipMap[visibility], ignoreTooltip));
         }));
     };
 }
@@ -639,35 +607,6 @@ function setIntersection(lhs, rhs) {
     lhs.forEach((x) => rhs.has(x) && result.add(x));
     return result;
 }
-function reduceFilterPaths(filteringPaths) {
-    let paths = filteringPaths.map((filteringPath) => presentation_hierarchies_1.HierarchyFilteringPath.normalize(filteringPath).path);
-    const sorted = [...paths].sort((a, b) => a.length - b.length);
-    paths = [];
-    for (const path of sorted) {
-        if (!arraySortedByLengthContainsPrefix(paths, path)) {
-            paths.push(path);
-        }
-    }
-    return paths;
-}
-function arraySortedByLengthContainsPrefix(targetArray, source) {
-    for (const targetVal of targetArray) {
-        if (targetVal.length >= source.length) {
-            break;
-        }
-        let isPrefix = true;
-        for (let i = 0; i < targetVal.length; ++i) {
-            if (!presentation_hierarchies_1.HierarchyNodeIdentifier.equal(targetVal[i], source[i])) {
-                isPrefix = false;
-                break;
-            }
-        }
-        if (isPrefix) {
-            return true;
-        }
-    }
-    return false;
-}
 /**
  * Enables display of all given models. Also enables display of all categories and clears always and
  * never drawn lists in the viewport.
@@ -732,4 +671,20 @@ function areAllModelsVisible(models, viewport) {
     return models.length !== 0 ? models.every((id) => viewport.viewsModel(id)) : false;
 }
 exports.areAllModelsVisible = areAllModelsVisible;
+function releaseMainThreadOnItemsCount(elementCount) {
+    return (obs) => {
+        return obs.pipe((0, rxjs_1.bufferCount)(elementCount), (0, rxjs_1.concatMap)((buff, i) => {
+            const out = (0, rxjs_1.of)(buff);
+            if (i === 0 && buff.length < elementCount) {
+                return out;
+            }
+            return out.pipe((0, rxjs_1.delay)(0));
+        }), (0, rxjs_1.concatAll)());
+    };
+}
+function getTooltipOptions(key, ignoreTooltip) {
+    return {
+        useTooltip: ignoreTooltip ? false : key,
+    };
+}
 //# sourceMappingURL=ModelsTreeVisibilityHandler.js.map