@itwin/tree-widget-react 3.0.2 → 3.1.0

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

@@ -2,35 +2,18 @@
  * 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, firstValueFrom, forkJoin, from, map, merge, mergeMap, of, reduce } from "rxjs";
+import { bufferCount, concat, concatAll, concatMap, defer, delay, distinct, EMPTY, filter, firstValueFrom, forkJoin, from, fromEventPattern, map, merge, mergeMap, of, reduce, shareReplay, startWith, Subject, take, takeUntil, tap, } from "rxjs";
 import { assert } from "@itwin/core-bentley";
 import { PerModelCategoryVisibility } from "@itwin/core-frontend";
-import { HierarchyFilteringPath, HierarchyNode, HierarchyNodeIdentifier, HierarchyNodeKey } from "@itwin/presentation-hierarchies";
+import { HierarchyNode, HierarchyNodeKey } from "@itwin/presentation-hierarchies";
 import { toggleAllCategories } from "../../common/CategoriesVisibilityUtils";
 import { reduceWhile, toVoidPromise } from "../../common/Rxjs";
+import { createVisibilityStatus } from "../../common/Tooltip";
 import { createVisibilityHandlerResult } from "../../common/UseHierarchyVisibility";
 import { AlwaysAndNeverDrawnElementInfo } from "./AlwaysAndNeverDrawnElementInfo";
+import { createFilteredTree, parseCategoryKey } from "./FilteredTree";
 import { ModelsTreeNode } from "./ModelsTreeNode";
-import { createVisibilityStatus } from "./Tooltip";
 import { createVisibilityChangeEventListener } from "./VisibilityChangeEventListener";
-export const SUBJECT_CLASS_NAME = "BisCore.Subject";
-export const MODEL_CLASS_NAME = "BisCore.GeometricModel3d";
-export const CATEGORY_CLASS_NAME = "BisCore.SpatialCategory";
-export const 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
@@ -41,30 +24,55 @@ export function createModelsTreeVisibilityHandler(props) {
 class ModelsTreeVisibilityHandlerImpl {
     constructor(_props) {
         this._props = _props;
+        this._elementChangeQueue = new Subject();
+        this._subscriptions = [];
+        this._changeRequest = new Subject();
         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());
     }
     // istanbul ignore next
     get onVisibilityChange() {
         return this._eventListener.onVisibilityChange;
     }
     async getVisibilityStatus(node) {
-        return firstValueFrom(this.getVisibilityStatusObs(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)))), 
+        // unsubscribe if visibility changes
+        takeUntil(fromEventPattern((handler) => {
+            this._eventListener.onVisibilityChange.addListener(handler);
+        }, (handler) => {
+            this._eventListener.onVisibilityChange.removeListener(handler);
+        }))));
     }
     async changeVisibility(node, shouldDisplay) {
-        return 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
+        takeUntil(this._changeRequest.pipe(filter(({ key, depth }) => depth === node.parentKeys.length && HierarchyNodeKey.equals(node.key, key)))), tap({
+            subscribe: () => {
+                this._eventListener.suppressChangeEvents();
+                this._alwaysAndNeverDrawnElements.suppressChangeEvents();
+            },
+            finalize: () => {
+                this._eventListener.resumeChangeEvents();
+                this._alwaysAndNeverDrawnElements.resumeChangeEvents();
+            },
+        }));
+        return 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 (HierarchyNode.isClassGroupingNode(node)) {
             return this.getClassGroupingNodeDisplayStatus(node);
@@ -74,10 +82,10 @@ class ModelsTreeVisibilityHandlerImpl {
         }
         if (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.isModelNode(node)) {
-            return this.getModelVisibilityStatus(node.key.instanceKeys[0].id);
+            return this.getModelVisibilityStatus({ modelId: node.key.instanceKeys[0].id });
         }
         const modelId = ModelsTreeNode.getModelId(node);
         if (!modelId) {
@@ -99,25 +107,25 @@ class ModelsTreeVisibilityHandlerImpl {
             categoryId,
         });
     }
-    getFilteredNodeVisibility({ parentKeys, filterPaths }) {
-        return from(this.getFilterTargets({ parentKeys, filterPaths })).pipe(mergeMap(({ subjects, models, categories, elements }) => {
+    getFilteredNodeVisibility(props) {
+        return from(this.getVisibilityChangeTargets(props)).pipe(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(from(models).pipe(mergeMap((modelId) => this.getModelVisibilityStatus(modelId))));
+                observables.push(from(models).pipe(mergeMap((modelId) => this.getModelVisibilityStatus({ modelId, ignoreTooltip: true }))));
             }
             if (categories?.size) {
                 observables.push(from(categories).pipe(mergeMap((key) => {
                     const { modelId, categoryId } = parseCategoryKey(key);
-                    return this.getCategoryDisplayStatus({ modelId, categoryId });
+                    return this.getCategoryDisplayStatus({ modelId, categoryId, ignoreTooltip: true });
                 })));
             }
             if (elements?.size) {
-                observables.push(from(elements).pipe(mergeMap((key) => {
-                    const { modelId, categoryId, elementId } = parseElementKey(key);
-                    return this.getElementDisplayStatus({ modelId, categoryId, elementId });
+                observables.push(from(elements).pipe(releaseMainThreadOnItemsCount(50), mergeMap(([categoryKey, elementIds]) => {
+                    const { modelId, categoryId } = parseCategoryKey(categoryKey);
+                    return from(elementIds).pipe(releaseMainThreadOnItemsCount(1000), mergeMap((elementId) => this.getElementDisplayStatus({ modelId, categoryId, elementId, ignoreTooltip: true })));
                 })));
             }
             return merge(...observables);
@@ -126,65 +134,66 @@ class ModelsTreeVisibilityHandlerImpl {
             return createVisibilityStatus(x);
         }));
     }
-    getSubjectNodeVisibilityStatus(subjectIds) {
+    getSubjectNodeVisibilityStatus({ subjectIds, ignoreTooltip }) {
         const result = defer(() => {
             if (!this._props.viewport.view.isSpatialView()) {
-                return of(createVisibilityStatus("disabled", "subject.nonSpatialView"));
+                return of(createVisibilityStatus("disabled", getTooltipOptions("modelsTree.subject.nonSpatialView", ignoreTooltip)));
             }
-            return from(this._idsCache.getSubjectModelIds(subjectIds)).pipe(concatAll(), distinct(), mergeMap((modelId) => this.getModelVisibilityStatus(modelId)), map((x) => x.state), getVisibilityStatusFromTreeNodeChildren({
-                visible: "subject.allModelsVisible",
-                hidden: "subject.allModelsHidden",
-                partial: "subject.someModelsHidden",
-            }));
+            return from(this._idsCache.getSubjectModelIds(subjectIds)).pipe(concatAll(), distinct(), mergeMap((modelId) => this.getModelVisibilityStatus({ modelId, ignoreTooltip: true })), map((x) => x.state), getVisibilityStatusFromTreeNodeChildren({
+                visible: "modelsTree.subject.allModelsVisible",
+                hidden: "modelsTree.subject.allModelsHidden",
+                partial: "modelsTree.subject.someModelsHidden",
+            }, ignoreTooltip));
         });
         return createVisibilityHandlerResult(this, { ids: subjectIds }, result, this._props.overrides?.getSubjectNodeVisibility);
     }
-    getModelVisibilityStatus(modelId) {
+    getModelVisibilityStatus({ modelId, ignoreTooltip }) {
         const result = defer(() => {
             const viewport = this._props.viewport;
             if (!viewport.view.isSpatialView()) {
-                return of(createVisibilityStatus("disabled", "model.nonSpatialView"));
+                return of(createVisibilityStatus("disabled", getTooltipOptions("modelsTree.model.nonSpatialView", ignoreTooltip)));
             }
             if (!viewport.view.viewsModel(modelId)) {
-                return of(createVisibilityStatus("hidden", "model.hiddenThroughModelSelector"));
+                return of(createVisibilityStatus("hidden", getTooltipOptions("modelsTree.model.hiddenThroughModelSelector", ignoreTooltip)));
             }
-            return from(this._idsCache.getModelCategories(modelId)).pipe(concatAll(), mergeMap((categoryId) => this.getCategoryDisplayStatus({ modelId, categoryId })), map((x) => x.state), getVisibilityFromTreeNodeChildren, map((visibilityByCategories) => {
+            return from(this._idsCache.getModelCategories(modelId)).pipe(concatAll(), mergeMap((categoryId) => this.getCategoryDisplayStatus({ modelId, categoryId, ignoreTooltip: true })), map((x) => x.state), getVisibilityFromTreeNodeChildren, map((visibilityByCategories) => {
                 const state = visibilityByCategories === "empty" ? "visible" : visibilityByCategories;
-                return createVisibilityStatus(state, state === "partial" ? "model.someCategoriesHidden" : `model.allCategories${state ? "Visible" : "Hidden"}`);
+                return createVisibilityStatus(state, getTooltipOptions(state === "partial" ? "modelsTree.model.someCategoriesHidden" : `modelsTree.model.allCategories${state ? "Visible" : "Hidden"}`, ignoreTooltip));
             }));
         });
         return 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 createVisibilityStatus("hidden", "category.hiddenThroughModel");
+            return createVisibilityStatus("hidden", getTooltipOptions("modelsTree.category.hiddenThroughModel", ignoreTooltip));
         }
         switch (this._props.viewport.perModelCategoryVisibility.getOverride(modelId, categoryId)) {
             case PerModelCategoryVisibility.Override.Show:
-                return createVisibilityStatus("visible", "category.displayedThroughPerModelOverride");
+                return createVisibilityStatus("visible", getTooltipOptions("modelsTree.category.displayedThroughPerModelOverride", ignoreTooltip));
             case PerModelCategoryVisibility.Override.Hide:
-                return createVisibilityStatus("hidden", "category.hiddenThroughPerModelOverride");
+                return createVisibilityStatus("hidden", getTooltipOptions("modelsTree.category.hiddenThroughPerModelOverride", ignoreTooltip));
         }
         const isVisible = viewport.view.viewsCategory(categoryId);
         return isVisible
-            ? createVisibilityStatus("visible", "category.displayedThroughCategorySelector")
-            : createVisibilityStatus("hidden", "category.hiddenThroughCategorySelector");
+            ? createVisibilityStatus("visible", getTooltipOptions("modelsTree.category.displayedThroughCategorySelector", ignoreTooltip))
+            : createVisibilityStatus("hidden", getTooltipOptions("modelsTree.category.hiddenThroughCategorySelector", ignoreTooltip));
     }
-    getCategoryDisplayStatus(props) {
+    getCategoryDisplayStatus({ ignoreTooltip, ...props }) {
         const result = defer(() => {
             if (!this._props.viewport.view.viewsModel(props.modelId)) {
-                return of(createVisibilityStatus("hidden", "category.hiddenThroughModel"));
+                return of(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 createVisibilityHandlerResult(this, props, result, this._props.overrides?.getCategoryDisplayStatus);
@@ -199,58 +208,54 @@ class ModelsTreeVisibilityHandlerImpl {
             return this.getVisibilityFromAlwaysAndNeverDrawnElements({
                 elements: elementIds,
                 defaultStatus: () => {
-                    const status = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId });
-                    return createVisibilityStatus(status.state, `groupingNode.${status.state}ThroughCategory`);
+                    const status = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId, ignoreTooltip: true });
+                    return 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 createVisibilityHandlerResult(this, { node }, result, this._props.overrides?.getElementGroupingNodeDisplayStatus);
     }
-    getElementOverriddenVisibility(elementId) {
+    getElementOverriddenVisibility(elementId, ignoreTooltip) {
         const viewport = this._props.viewport;
         if (viewport.neverDrawn?.has(elementId)) {
-            return createVisibilityStatus("hidden", "element.hiddenThroughNeverDrawnList");
+            return createVisibilityStatus("hidden", getTooltipOptions("modelsTree.element.hiddenThroughNeverDrawnList", ignoreTooltip));
         }
         if (viewport.alwaysDrawn?.size) {
             if (viewport.alwaysDrawn.has(elementId)) {
-                return createVisibilityStatus("visible", "element.displayedThroughAlwaysDrawnList");
+                return createVisibilityStatus("visible", getTooltipOptions("modelsTree.element.displayedThroughAlwaysDrawnList", ignoreTooltip));
             }
             if (viewport.isAlwaysDrawnExclusive) {
-                return createVisibilityStatus("hidden", "element.hiddenDueToOtherElementsExclusivelyAlwaysDrawn");
+                return createVisibilityStatus("hidden", getTooltipOptions("modelsTree.element.hiddenDueToOtherElementsExclusivelyAlwaysDrawn", ignoreTooltip));
             }
         }
         return undefined;
     }
-    getElementDisplayStatus(props) {
+    getElementDisplayStatus({ ignoreTooltip, ...props }) {
         const result = defer(() => {
             const viewport = this._props.viewport;
             const { elementId, modelId, categoryId } = props;
             if (!viewport.view.viewsModel(modelId)) {
-                return of(createVisibilityStatus("hidden", "element.hiddenThroughModel"));
+                return of(createVisibilityStatus("hidden", getTooltipOptions("modelsTree.element.hiddenThroughModel", ignoreTooltip)));
             }
-            let status = this.getElementOverriddenVisibility(elementId);
+            let status = this.getElementOverriddenVisibility(elementId, ignoreTooltip);
             if (status) {
                 return of(status);
             }
-            status = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId });
-            return of(createVisibilityStatus(status.state, status.state === "visible" ? undefined : "element.hiddenThroughCategory"));
+            status = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId, ignoreTooltip: true });
+            return of(createVisibilityStatus(status.state, getTooltipOptions(status.state === "visible" ? undefined : "modelsTree.element.hiddenThroughCategory", ignoreTooltip)));
         });
         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({
-                parentKeys: [...node.parentKeys, node.key],
-                filterPaths: node.filtering.filteredChildrenIdentifierPaths,
-                on,
-            });
+            return this.changeFilteredNodeVisibility({ node, on });
         }
         if (HierarchyNode.isClassGroupingNode(node)) {
             return this.changeElementGroupingNodeState(node, on);
@@ -283,62 +288,19 @@ class ModelsTreeVisibilityHandlerImpl {
             // istanbul ignore next
             return 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 (!HierarchyNodeIdentifier.isInstanceNodeIdentifier(target)) {
-                return;
-            }
-            const previousPath = path.slice(0, path.length - 1);
-            if (await imodelAccess.classDerivesFrom(target.className, SUBJECT_CLASS_NAME)) {
-                addFilterTarget("subjects", target.id);
-                return;
-            }
-            if (await imodelAccess.classDerivesFrom(target.className, MODEL_CLASS_NAME)) {
-                addFilterTarget("models", target.id);
-                return;
-            }
-            if (await imodelAccess.classDerivesFrom(target.className, CATEGORY_CLASS_NAME)) {
-                // eslint-disable-next-line @typescript-eslint/no-shadow
-                const modelId = await this.findClassIdInFilterPath(previousPath, parentKeys, MODEL_CLASS_NAME);
-                addFilterTarget("categories", createCategoryKey(modelId, target.id));
-                return;
-            }
-            const [modelId, categoryId] = await Promise.all([
-                this.findClassIdInFilterPath(previousPath, parentKeys, MODEL_CLASS_NAME),
-                this.findClassIdInFilterPath(previousPath, parentKeys, 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 (!HierarchyNodeIdentifier.isInstanceNodeIdentifier(pathIdentifier)) {
-                    continue;
-                }
-                if (!(await imodelAccess.classDerivesFrom(pathIdentifier.className, 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 from(this.getFilterTargets(props)).pipe(mergeMap(({ subjects, models, categories, elements }) => {
+        return from(this.getVisibilityChangeTargets(props)).pipe(mergeMap(({ subjects, models, categories, elements }) => {
             const observables = new Array();
             if (subjects?.size) {
                 observables.push(this.changeSubjectNodeState([...subjects], on));
@@ -353,9 +315,9 @@ class ModelsTreeVisibilityHandlerImpl {
                 })));
             }
             if (elements?.size) {
-                observables.push(from(elements).pipe(mergeMap((key) => {
-                    const { modelId, categoryId, elementId } = parseElementKey(key);
-                    return this.changeElementState({ modelId, categoryId, elementId, on });
+                observables.push(from(elements).pipe(mergeMap(([categoryKey, elementIds]) => {
+                    const { modelId, categoryId } = parseCategoryKey(categoryKey);
+                    return this.changeElementsState({ modelId, categoryId, elementIds, on });
                 })));
             }
             return merge(...observables);
@@ -444,9 +406,9 @@ class ModelsTreeVisibilityHandlerImpl {
             const { modelId, categoryId, elementIds } = info;
             const viewport = this._props.viewport;
             return concat(on && !viewport.view.viewsModel(modelId) ? this.showModelWithoutAnyCategoriesOrElements(modelId) : EMPTY, defer(() => {
-                const categoryVisibility = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId });
+                const categoryVisibility = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId, ignoreTooltip: true });
                 const isDisplayedByDefault = categoryVisibility.state === "visible";
-                return from(elementIds).pipe(this.changeElementStateNoChildrenOperator({ on, isDisplayedByDefault }));
+                return this.queueElementsVisibilityChange(elementIds, on, isDisplayedByDefault);
             }));
         });
         return createVisibilityHandlerResult(this, { node, on }, result, this._props.overrides?.changeElementGroupingNodeState);
@@ -455,23 +417,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 = defer(() => {
-            const { elementId, on, modelId, categoryId } = props;
+            const { elementIds, on, modelId, categoryId } = props;
             const viewport = this._props.viewport;
             return concat(props.on && !viewport.view.viewsModel(modelId) ? this.showModelWithoutAnyCategoriesOrElements(modelId) : EMPTY, defer(() => {
-                const categoryVisibility = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId });
+                const categoryVisibility = this.getDefaultCategoryVisibilityStatus({ categoryId, modelId, ignoreTooltip: true });
                 const isDisplayedByDefault = categoryVisibility.state === "visible";
-                return of(elementId).pipe(this.changeElementStateNoChildrenOperator({ on, isDisplayedByDefault }));
+                return this.queueElementsVisibilityChange(elementIds, on, isDisplayedByDefault);
             }));
         });
-        return createVisibilityHandlerResult(this, props, result, this._props.overrides?.changeElementState);
+        return createVisibilityHandlerResult(this, props, result, this._props.overrides?.changeElementsState);
+    }
+    queueElementsVisibilityChange(elementIds, on, visibleByDefault) {
+        const finishedSubject = new Subject();
+        // observable to track if visibility change is finished/cancelled
+        const changeFinished = finishedSubject.pipe(startWith(false), shareReplay(1), filter((finished) => finished));
+        const changeObservable = from(elementIds).pipe(
+        // check if visibility change is not finished (cancelled) due to change overall change request being cancelled
+        takeUntil(changeFinished), this.changeElementStateNoChildrenOperator({ on, isDisplayedByDefault: visibleByDefault }), 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(take(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);
+            },
+        }), map(() => undefined));
     }
     changeElementStateNoChildrenOperator(props) {
         return (elementIds) => {
             const { on, isDisplayedByDefault } = props;
             const isAlwaysDrawnExclusive = this._props.viewport.isAlwaysDrawnExclusive;
-            return elementIds.pipe(reduce((acc, elementId) => {
+            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 || []);
+                }
                 if (on) {
                     const wasRemoved = acc.neverDrawn.delete(elementId);
                     acc.changedNeverDrawn ||= wasRemoved;
@@ -494,39 +482,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,
             }), 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 createVisibilityStatus("hidden", props.tooltips.allElementsInNeverDrawnList);
+            return createVisibilityStatus("hidden", getTooltipOptions(props.tooltips.allElementsInNeverDrawnList, ignoreTooltip));
         }
         if (alwaysDrawn?.size === totalCount) {
-            return createVisibilityStatus("visible", props.tooltips.allElementsInAlwaysDrawnList);
+            return createVisibilityStatus("visible", getTooltipOptions(props.tooltips.allElementsInAlwaysDrawnList, ignoreTooltip));
         }
         const viewport = this._props.viewport;
         if (viewport.isAlwaysDrawnExclusive && viewport.alwaysDrawn?.size) {
             return alwaysDrawn?.size
-                ? createVisibilityStatus("partial", props.tooltips.elementsInBothAlwaysAndNeverDrawn)
-                : createVisibilityStatus("hidden", props.tooltips.noElementsInExclusiveAlwaysDrawnList);
+                ? createVisibilityStatus("partial", getTooltipOptions(props.tooltips.elementsInBothAlwaysAndNeverDrawn, ignoreTooltip))
+                : createVisibilityStatus("hidden", getTooltipOptions(props.tooltips.noElementsInExclusiveAlwaysDrawnList, ignoreTooltip));
         }
         const status = props.defaultStatus();
         if ((status.state === "visible" && neverDrawn?.size) || (status.state === "hidden" && alwaysDrawn?.size)) {
-            return createVisibilityStatus("partial");
+            return 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 of(createVisibilityStatus("hidden", props.tooltips.noElementsInExclusiveAlwaysDrawnList));
+                return of(createVisibilityStatus("hidden", getTooltipOptions(props.tooltips.noElementsInExclusiveAlwaysDrawnList, ignoreTooltip)));
             }
         }
         else if (!viewport?.neverDrawn?.size && !viewport?.alwaysDrawn?.size) {
@@ -538,6 +526,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;
@@ -550,6 +539,7 @@ class ModelsTreeVisibilityHandlerImpl {
             return this.getVisibilityFromAlwaysAndNeverDrawnElementsImpl({
                 ...props,
                 ...state,
+                ignoreTooltip,
             });
         }));
     }
@@ -580,28 +570,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 (HierarchyNodeIdentifier.isInstanceNodeIdentifier(id)) {
-                    yield id;
-                }
-            }
-            for (let i = parentKeys.length - 1; i >= 0; --i) {
-                const key = parentKeys[i];
-                if (HierarchyNodeKey.isInstances(key)) {
-                    yield* key.instanceKeys;
-                }
-            }
-        }
-        for (const parentKey of keysToCheck()) {
-            if (await this._props.imodelAccess.classDerivesFrom(parentKey.className, className)) {
-                return parentKey.id;
-            }
-        }
-        assert(false, () => `Cannot find an instance of ${className} in instance keys: ${JSON.stringify([...keysToCheck()], undefined, 2)}`);
-    }
 }
 function getVisibilityFromTreeNodeChildren(obs) {
     return obs.pipe(reduceWhile((x) => x.allVisible || x.allHidden, (acc, val) => {
@@ -615,13 +583,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(map((visibility) => {
             if (visibility === "empty") {
                 visibility = "visible";
             }
-            return createVisibilityStatus(visibility, tooltipMap[visibility]);
+            return createVisibilityStatus(visibility, getTooltipOptions(tooltipMap[visibility], ignoreTooltip));
         }));
     };
 }
@@ -635,35 +603,6 @@ function setIntersection(lhs, rhs) {
     lhs.forEach((x) => rhs.has(x) && result.add(x));
     return result;
 }
-function reduceFilterPaths(filteringPaths) {
-    let paths = filteringPaths.map((filteringPath) => 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 (!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.
@@ -723,4 +662,20 @@ export async function toggleModels(models, enable, viewport) {
 export function areAllModelsVisible(models, viewport) {
     return models.length !== 0 ? models.every((id) => viewport.viewsModel(id)) : false;
 }
+function releaseMainThreadOnItemsCount(elementCount) {
+    return (obs) => {
+        return obs.pipe(bufferCount(elementCount), concatMap((buff, i) => {
+            const out = of(buff);
+            if (i === 0 && buff.length < elementCount) {
+                return out;
+            }
+            return out.pipe(delay(0));
+        }), concatAll());
+    };
+}
+function getTooltipOptions(key, ignoreTooltip) {
+    return {
+        useTooltip: ignoreTooltip ? false : key,
+    };
+}
 //# sourceMappingURL=ModelsTreeVisibilityHandler.js.map