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

package/lib/esm/tree-widget-react/components/trees/common/internal/visibility/BaseVisibilityHelper.js

@@ -2,11 +2,11 @@
  * 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, defaultIfEmpty, defer, EMPTY, filter, forkJoin, from, identity, map, merge, mergeAll, mergeMap, of, reduce, shareReplay, startWith, Subject, take, takeLast, takeUntil, tap, } from "rxjs";
+import { bufferCount, concat, concatAll, defaultIfEmpty, defer, EMPTY, filter, forkJoin, from, identity, map, merge, mergeAll, mergeMap, of, reduce, shareReplay, startWith, Subject, take, takeLast, takeUntil, tap, } from "rxjs";
 import { assert, Id64 } from "@itwin/core-bentley";
 import { createVisibilityStatus } from "../Tooltip.js";
-import { fromWithRelease, getSetFromId64Arg, releaseMainThreadOnItemsCount, setDifference, setIntersection } from "../Utils.js";
-import { changeElementStateNoChildrenOperator, enableCategoryDisplay, getVisibilityFromAlwaysAndNeverDrawnElementsImpl, mergeVisibilityStatuses, } from "../VisibilityUtils.js";
+import { countInSet, fromWithRelease, getOptimalBatchSize, releaseMainThreadOnItemsCount, setDifference } from "../Utils.js";
+import { changeElementStateNoChildrenOperator, getVisibilityFromAlwaysAndNeverDrawnElementsImpl, mergeVisibilityStatuses } from "../VisibilityUtils.js";
 /**
  * Base class for visibility status getters and modifiers.
  *
@@ -32,13 +32,12 @@ export class BaseVisibilityHelper {
      * This is achieved by:
      * - Resets `alwaysDrawn` exclusive flag to `false`;
      * - Turns off all categories;
-     * - Clears always drawn list;
+     * - Clears never drawn list;
      * - Removes all per-model category overrides. */
     removeAlwaysDrawnExclusive() {
-        return from(this.#props.baseIdsCache.getAllCategories()).pipe(map(({ drawingCategories, spatialCategories }) => {
-            const categoriesToTurnOff = this.#props.viewport.viewType === "2d" ? drawingCategories : spatialCategories;
-            if (categoriesToTurnOff) {
-                this.#props.viewport.changeCategoryDisplay({ categoryIds: categoriesToTurnOff, display: false, enableAllSubCategories: false });
+        return from(this.#props.baseIdsCache.getAllCategoriesOfElements()).pipe(map((categories) => {
+            if (categories.size) {
+                this.#props.viewport.changeCategoryDisplay({ categoryIds: categories, display: false, enableAllSubCategories: false });
             }
             this.#props.viewport.clearNeverDrawn();
             this.#props.viewport.clearPerModelCategoryOverrides();
@@ -55,27 +54,18 @@ export class BaseVisibilityHelper {
      */
     getModelsVisibilityStatus(props) {
         const result = defer(() => {
-            const { modelIds, type } = props;
-            if ((type === "GeometricModel3d" && this.#props.viewport.viewType !== "3d") || (type === "GeometricModel2d" && this.#props.viewport.viewType !== "2d")) {
-                return of(createVisibilityStatus("disabled"));
-            }
+            const { modelIds } = props;
             return from(Id64.iterable(modelIds)).pipe(mergeMap((modelId) => {
                 // For hidden models we only need to check subModels
                 if (!this.#props.viewport.viewsModel(modelId)) {
-                    return this.#props.baseIdsCache.getSubModels({ modelIds: modelId }).pipe(mergeMap(({ subModels }) => {
-                        if (subModels && Id64.sizeOf(subModels) > 0) {
-                            return this.getModelsVisibilityStatus({ modelIds: subModels, type }).pipe(map((subModelsVisibilityStatus) => subModelsVisibilityStatus.state !== "hidden" ? createVisibilityStatus("partial") : createVisibilityStatus("hidden")));
-                        }
-                        return of(createVisibilityStatus("hidden"));
-                    }));
+                    return this.#props.baseIdsCache.getSubModels({ modelId }).pipe(mergeMap((subModels) => this.getModelsVisibilityStatus({ modelIds: subModels }).pipe(map((subModelsVisibilityStatus) => subModelsVisibilityStatus.state !== "hidden" ? createVisibilityStatus("partial") : subModelsVisibilityStatus))), defaultIfEmpty(createVisibilityStatus("hidden")));
                 }
-                // For visible models we need to check all categories
-                return this.#props.baseIdsCache.getCategories({ modelIds: modelId }).pipe(mergeMap(({ drawingCategories, spatialCategories }) => merge(drawingCategories
-                    ? of(drawingCategories).pipe(mergeMap((categoryIds) => this.getCategoriesVisibilityStatus({ modelId, categoryIds, type: "DrawingCategory" })))
-                    : EMPTY, spatialCategories
-                    ? of(spatialCategories).pipe(mergeMap((categoryIds) => this.getCategoriesVisibilityStatus({ modelId, categoryIds, type: "SpatialCategory" })))
-                    : EMPTY)), defaultIfEmpty(createVisibilityStatus("visible")));
-            }), mergeVisibilityStatuses);
+                // For visible models we need to check all categories.
+                // getCategoriesVisibilityStatus already checks subModels, no need to do that
+                // Take top most element categories when always drawn exclusive mode is on, because only top most categories are used to get always/never drawn elements.
+                // This means that non top most categories should not affect visibility in any way until https://github.com/iTwin/viewer-components-react/issues/1100 is resolved.
+                return this.#props.baseIdsCache.getCategories({ modelId, includeOnlyIfCategoryOfTopMostElement: this.#props.viewport.isAlwaysDrawnExclusive }).pipe(mergeMap((categories) => this.getCategoriesVisibilityStatus({ modelId, categoryIds: categories })), defaultIfEmpty(createVisibilityStatus("visible")));
+            }), mergeVisibilityStatuses());
         });
         return this.#props.overrideHandler
             ? this.#props.overrideHandler.createVisibilityHandlerResult({
@@ -86,98 +76,32 @@ export class BaseVisibilityHelper {
             : result;
     }
     /**
-     * Gets visibility status of a model's categories, assuming model is visible.
+     * Gets visibility status of sub-categories.
      *
      * Determines visibility status by checking:
-     * - Elements in the viewports' always/never drawn lists;
-     * - Default categories visibility status in the viewport;
-     * - SubModels that are related to the modelId and categoryIds
+     * - Category selector visibility in the viewport.
+     * - Sub-categories visibility in the viewport.
      */
-    getVisibleModelCategoriesVisibilityStatus({ modelId, categoryIds, type, }) {
-        return merge(this.getVisibilityFromAlwaysAndNeverDrawnElements({
-            queryProps: { modelId, categoryIds },
-            defaultStatus: () => this.getVisibleModelCategoriesDirectVisibilityStatus({ modelId, categoryIds }),
-        }), this.#props.baseIdsCache.getSubModels({ modelId, categoryIds }).pipe(mergeMap(({ subModels }) => {
-            if (subModels && Id64.sizeOf(subModels) > 0) {
-                return this.getModelsVisibilityStatus({ modelIds: subModels, type });
-            }
+    getSubCategoriesVisibilityStatus(props) {
+        if (Id64.sizeOf(props.subCategoryIds) === 0) {
             return EMPTY;
-        }))).pipe(mergeVisibilityStatuses);
-    }
-    /** Gets visibility status of sub-categories, assuming category is visible. */
-    getVisibleCategorySubCategoriesVisibilityStatus(props) {
-        const { subCategoryIds } = props;
+        }
+        if (!this.#props.viewport.viewsCategory(props.categoryId)) {
+            return of(createVisibilityStatus("hidden"));
+        }
         let subCategoryVisibility = "unknown";
-        for (const subCategoryId of Id64.iterable(subCategoryIds)) {
+        for (const subCategoryId of Id64.iterable(props.subCategoryIds)) {
             const isSubCategoryVisible = this.#props.viewport.viewsSubCategory(subCategoryId);
             if (isSubCategoryVisible && subCategoryVisibility === "hidden") {
-                return createVisibilityStatus("partial");
+                return of(createVisibilityStatus("partial"));
             }
             if (!isSubCategoryVisible && subCategoryVisibility === "visible") {
-                return createVisibilityStatus("partial");
+                return of(createVisibilityStatus("partial"));
             }
             subCategoryVisibility = isSubCategoryVisible ? "visible" : "hidden";
         }
-        // If visibility is unknown, no subCategories were provided,
-        // Since category is visible we return visible
-        return createVisibilityStatus(subCategoryVisibility === "unknown" ? "visible" : subCategoryVisibility);
-    }
-    /**
-     * Gets visibility status of sub-categories.
-     *
-     * Determines visibility status by checking:
-     * - Models that contain the category visibility;
-     * - Per model category visibility overrides;
-     * - Category selector visibility in the viewport.
-     * - Sub-categories visibility in the viewport.
-     */
-    getSubCategoriesVisibilityStatus(props) {
-        return this.#props.baseIdsCache.getModels({ categoryIds: props.categoryId }).pipe(map(({ models }) => {
-            let visibility = "unknown";
-            let nonDefaultModelDisplayStatesCount = 0;
-            for (const modelId of Id64.iterable(models ?? [])) {
-                if (!this.#props.viewport.viewsModel(modelId)) {
-                    if (visibility === "visible") {
-                        return createVisibilityStatus("partial");
-                    }
-                    visibility = "hidden";
-                    ++nonDefaultModelDisplayStatesCount;
-                    continue;
-                }
-                const override = this.#props.viewport.getPerModelCategoryOverride({ modelId, categoryId: props.categoryId });
-                if (override === "show") {
-                    if (visibility === "hidden") {
-                        return createVisibilityStatus("partial");
-                    }
-                    visibility = "visible";
-                    ++nonDefaultModelDisplayStatesCount;
-                    continue;
-                }
-                if (override === "hide") {
-                    if (visibility === "visible") {
-                        return createVisibilityStatus("partial");
-                    }
-                    visibility = "hidden";
-                    ++nonDefaultModelDisplayStatesCount;
-                    continue;
-                }
-            }
-            if (models && Id64.sizeOf(models) > 0 && nonDefaultModelDisplayStatesCount === Id64.sizeOf(models)) {
-                assert(visibility === "visible" || visibility === "hidden");
-                return createVisibilityStatus(visibility);
-            }
-            if (!this.#props.viewport.viewsCategory(props.categoryId)) {
-                return createVisibilityStatus(visibility === "visible" ? "partial" : "hidden");
-            }
-            if (Id64.sizeOf(props.subCategoryIds) === 0) {
-                if (visibility === "hidden") {
-                    return createVisibilityStatus("partial");
-                }
-                return createVisibilityStatus("visible");
-            }
-            const subCategoriesVisibility = this.getVisibleCategorySubCategoriesVisibilityStatus({ subCategoryIds: props.subCategoryIds });
-            return subCategoriesVisibility.state === visibility || visibility === "unknown" ? subCategoriesVisibility : createVisibilityStatus("partial");
-        }), mergeVisibilityStatuses);
+        assert(subCategoryVisibility !== "unknown");
+        return of(createVisibilityStatus(subCategoryVisibility));
     }
     /**
      * Gets visibility status of categories.
@@ -189,80 +113,23 @@ export class BaseVisibilityHelper {
      */
     getCategoriesVisibilityStatus(props) {
         const result = defer(() => {
-            const { categoryIds, modelId: modelIdFromProps, type } = props;
-            if (Id64.sizeOf(categoryIds) === 0 || this.#props.viewport.viewType === "other") {
-                return EMPTY;
+            const { categoryIds, modelId: modelIdFromProps } = props;
+            if (modelIdFromProps) {
+                return fromWithRelease({ source: categoryIds, releaseOnCount: 100 }).pipe(mergeMap((categoryId) => this.getModelWithCategoryVisibilityStatus({ modelId: modelIdFromProps, categoryId })), mergeVisibilityStatuses());
             }
-            const isSupportedInView = (this.#props.viewport.viewType === "3d" && type === "SpatialCategory") || (this.#props.viewport.viewType === "2d" && type === "DrawingCategory");
-            if (!isSupportedInView) {
-                return of(createVisibilityStatus("disabled"));
-            }
-            const categoryModelsObs = modelIdFromProps
-                ? from(Id64.iterable(categoryIds)).pipe(map((categoryId) => ({ id: categoryId, models: modelIdFromProps })))
-                : this.#props.baseIdsCache.getModels({ categoryIds });
-            return (Id64.sizeOf(categoryIds) > 100 ? categoryModelsObs.pipe(releaseMainThreadOnItemsCount(100)) : categoryModelsObs).pipe(mergeMap(({ id, models }) => {
-                if (!this.#props.viewport.isAlwaysDrawnExclusive) {
-                    return of({ id, models });
-                }
-                // Ignore categories that don't have root geometric elements in always drawn exclusive mode
-                if (!models) {
-                    return EMPTY;
-                }
-                return from(Id64.iterable(models)).pipe(mergeMap((modelId) => forkJoin({
-                    modelId: of(modelId),
-                    elementCount: this.#props.baseIdsCache.getElementsCount({ modelId, categoryId: id }),
-                })), reduce((acc, { modelId, elementCount }) => {
-                    if (elementCount > 0) {
-                        acc.models.push(modelId);
-                    }
-                    return acc;
-                }, { id, models: new Array() }), filter(({ models: modelsWithElements }) => modelsWithElements.length > 0));
-            }), map(({ id, models }) => {
-                const acc = { categoryId: id, visibleModels: new Array(), hiddenModels: new Array() };
-                if (!models) {
-                    return acc;
-                }
-                for (const modelId of Id64.iterable(models)) {
-                    if (this.#props.viewport.viewsModel(modelId)) {
-                        acc.visibleModels.push(modelId);
-                    }
-                    else {
-                        acc.hiddenModels.push(modelId);
-                    }
-                }
-                return acc;
-            }), mergeMap(({ categoryId, visibleModels, hiddenModels }) => {
-                return merge(
-                // For hidden models we only need to check subModels
-                hiddenModels.length > 0
-                    ? this.#props.baseIdsCache.getSubModels({ modelIds: hiddenModels, categoryId }).pipe(mergeMap(({ subModels }) => {
-                        if (subModels && Id64.sizeOf(subModels) > 0) {
-                            return this.getModelsVisibilityStatus({
-                                modelIds: subModels,
-                                type: this.#props.viewport.viewType === "2d" ? "GeometricModel2d" : "GeometricModel3d",
-                            }).pipe(map((subModelsVisibilityStatus) => subModelsVisibilityStatus.state !== "hidden" ? createVisibilityStatus("partial") : createVisibilityStatus("hidden")));
-                        }
-                        return of(createVisibilityStatus("hidden"));
-                    }))
-                    : EMPTY, 
-                // For visible models we need to check all categories
-                visibleModels.length > 0
-                    ? from(visibleModels).pipe(mergeMap((modelId) => this.getVisibleModelCategoriesVisibilityStatus({
-                        modelId,
-                        categoryIds: categoryId,
-                        type: this.#props.viewport.viewType === "2d" ? "GeometricModel2d" : "GeometricModel3d",
-                    })))
-                    : EMPTY, 
-                // We need to check subCategories as well
-                !modelIdFromProps
-                    ? this.#props.baseIdsCache.getSubCategories({ categoryId }).pipe(mergeMap((subCategoryIds) => {
-                        if (subCategoryIds.length > 0) {
-                            return this.getSubCategoriesVisibilityStatus({ categoryId, subCategoryIds });
-                        }
-                        return EMPTY;
-                    }))
-                    : EMPTY).pipe(defaultIfEmpty(createVisibilityStatus(!this.#props.viewport.isAlwaysDrawnExclusive && this.#props.viewport.viewsCategory(categoryId) ? "visible" : "hidden")));
-            }), mergeVisibilityStatuses);
+            return fromWithRelease({ source: categoryIds, releaseOnCount: 100 }).pipe(mergeMap((categoryId) => 
+            // When always drawn exclusive mode is enabled need to get only models for which category has top most element.
+            // This is because always/never drawn elements can be retrieved using top most category.
+            // TODO fix with: https://github.com/iTwin/viewer-components-react/issues/1100
+            this.#props.baseIdsCache
+                .getModels({ categoryId, includeOnlyIfCategoryOfTopMostElement: this.#props.viewport.isAlwaysDrawnExclusive, includeSubModels: true })
+                .pipe(mergeMap((models) => merge(from(Id64.iterable(models)).pipe(mergeMap((modelId) => this.getModelWithCategoryVisibilityStatus({ modelId, categoryId })), mergeVisibilityStatuses()), 
+            // For category not under specific model, need to check subCategories as well
+            this.#props.baseIdsCache
+                .getSubCategories({ categoryId })
+                .pipe(mergeMap((subCategoryIds) => this.getSubCategoriesVisibilityStatus({ categoryId, subCategoryIds })))).pipe(
+            // This can happen when category does not have any geometric elements or sub-categories
+            defaultIfEmpty(createVisibilityStatus(!this.#props.viewport.isAlwaysDrawnExclusive && this.#props.viewport.viewsCategory(categoryId) ? "visible" : "hidden")))))), mergeVisibilityStatuses());
         });
         return this.#props.overrideHandler
             ? this.#props.overrideHandler.createVisibilityHandlerResult({
@@ -273,26 +140,40 @@ export class BaseVisibilityHelper {
             : result;
     }
     /**
-     * Gets visibility status of categories, assuming model is visible.
+     * Gets visibility status of a model's category.
+     *
+     * Determines visibility status by checking:
+     * - Elements in the viewports' always/never drawn lists;
+     * - Default categories visibility status in the viewport;
+     * - SubModels that are related to the modelId and categoryId.
+     */
+    getModelWithCategoryVisibilityStatus({ modelId, categoryId }) {
+        const modelVisibilityStatus = this.#props.viewport.viewsModel(modelId)
+            ? // For visible model need to check category and always/never drawn elements
+                this.getVisibilityFromAlwaysAndNeverDrawnElements({
+                    modelId,
+                    categoryId,
+                    defaultStatus: this.getVisibleModelCategoryDirectVisibilityStatus({ modelId, categoryId }),
+                })
+            : of(createVisibilityStatus("hidden"));
+        const subModelsVisibilityStatus = this.#props.baseIdsCache
+            .getSubModels({ modelId, categoryId })
+            .pipe(mergeMap((subModels) => this.getModelsVisibilityStatus({ modelIds: subModels })));
+        return merge(modelVisibilityStatus, subModelsVisibilityStatus).pipe(mergeVisibilityStatuses());
+    }
+    /**
+     * Gets visibility status of category, assuming model is visible.
      *
      * Determines visibility status by checking:
      * - Per model category visibility overrides;
      * - Category selector visibility in the viewport.
      */
-    getVisibleModelCategoriesDirectVisibilityStatus({ modelId, categoryIds }) {
-        const viewport = this.#props.viewport;
-        let visibleCount = 0;
-        for (const categoryId of Id64.iterable(categoryIds)) {
-            const override = this.#props.viewport.getPerModelCategoryOverride({ modelId, categoryId });
-            if (override === "show" || (override === "none" && viewport.viewsCategory(categoryId))) {
-                ++visibleCount;
-                continue;
-            }
-            if (visibleCount > 0) {
-                return createVisibilityStatus("partial");
-            }
+    getVisibleModelCategoryDirectVisibilityStatus({ modelId, categoryId }) {
+        const override = this.#props.viewport.getPerModelCategoryOverride({ modelId, categoryId });
+        if (override === "show" || (override === "none" && this.#props.viewport.viewsCategory(categoryId))) {
+            return createVisibilityStatus("visible");
         }
-        return visibleCount > 0 ? createVisibilityStatus("visible") : createVisibilityStatus("hidden");
+        return createVisibilityStatus("hidden");
     }
     /**
      * Gets visibility status of elements.
@@ -304,45 +185,20 @@ export class BaseVisibilityHelper {
      */
     getElementsVisibilityStatus(props) {
         const result = defer(() => {
-            const { elementIds, modelId, categoryId, type } = props;
-            if (this.#props.viewport.viewType === "other") {
-                return EMPTY;
-            }
-            const isSupportedInView = (this.#props.viewport.viewType === "3d" && type === "GeometricElement3d") || (this.#props.viewport.viewType === "2d" && type === "GeometricElement2d");
-            if (!isSupportedInView) {
-                return of(createVisibilityStatus("disabled"));
-            }
-            // TODO: check child elements that are subModels
-            if (!this.#props.viewport.viewsModel(modelId)) {
-                return fromWithRelease({ source: elementIds, releaseOnCount: 100 }).pipe(mergeMap((elementId) => this.#props.baseIdsCache.hasSubModel(elementId).pipe(mergeMap((isSubModel) => {
-                    if (isSubModel) {
-                        return this.getModelsVisibilityStatus({
-                            modelIds: elementId,
-                            type: this.#props.viewport.viewType === "2d" ? "GeometricModel2d" : "GeometricModel3d",
-                        }).pipe(map((subModelVisibilityStatus) => subModelVisibilityStatus.state !== "hidden" ? createVisibilityStatus("partial") : createVisibilityStatus("hidden")));
-                    }
-                    return of(createVisibilityStatus("hidden"));
-                }))), mergeVisibilityStatuses);
-            }
-            // TODO: check child elements
-            // TODO: check child element categories
-            // TODO: check child elements that are subModels
-            return this.getVisibilityFromAlwaysAndNeverDrawnElements({
-                elements: elementIds,
-                defaultStatus: () => this.getVisibleModelCategoriesDirectVisibilityStatus({ categoryIds: categoryId, modelId }),
-            }).pipe(mergeMap((visibilityStatusAlwaysAndNeverDraw) => {
-                return from(Id64.iterable(elementIds)).pipe(mergeMap((elementId) => this.#props.baseIdsCache.hasSubModel(elementId).pipe(mergeMap((isSubModel) => {
-                    if (isSubModel) {
-                        return this.getModelsVisibilityStatus({
-                            modelIds: elementId,
-                            type: this.#props.viewport.viewType === "2d" ? "GeometricModel2d" : "GeometricModel3d",
-                        }).pipe(map((subModelVisibilityStatus) => subModelVisibilityStatus.state !== visibilityStatusAlwaysAndNeverDraw.state
-                            ? createVisibilityStatus("partial")
-                            : visibilityStatusAlwaysAndNeverDraw));
-                    }
-                    return of(visibilityStatusAlwaysAndNeverDraw);
-                }))), mergeVisibilityStatuses);
-            }));
+            const { elementIds, modelId, categoryId, parentElementsIdsPath, childrenCount, categoryOfTopMostParentElement } = props;
+            const elementsVisibilityStatus = this.#props.viewport.viewsModel(modelId)
+                ? // For visible model need to check category and always/never drawn elements
+                    this.getVisibilityFromAlwaysAndNeverDrawnElements({
+                        elements: elementIds,
+                        defaultStatus: this.getVisibleModelCategoryDirectVisibilityStatus({ categoryId, modelId }),
+                        parentElementsIdsPath,
+                        modelId,
+                        categoryOfTopMostParentElement,
+                        childrenCount,
+                    })
+                : of(createVisibilityStatus("hidden"));
+            const subModelsVisibilityStatus = fromWithRelease({ source: elementIds, releaseOnCount: 100 }).pipe(mergeMap((elementId) => this.#props.baseIdsCache.getSubModelsUnderElement(elementId)), mergeMap((subModelsUnderElement) => this.getModelsVisibilityStatus({ modelIds: subModelsUnderElement })));
+            return merge(elementsVisibilityStatus, subModelsVisibilityStatus).pipe(mergeVisibilityStatuses());
         });
         return this.#props.overrideHandler
             ? this.#props.overrideHandler.createVisibilityHandlerResult({
@@ -353,34 +209,50 @@ export class BaseVisibilityHelper {
             : result;
     }
     /** Gets visibility status of elements based on viewport's always/never drawn elements and related categories and models. */
-    getVisibilityFromAlwaysAndNeverDrawnElements(props) {
-        const viewport = this.#props.viewport;
-        if (viewport.isAlwaysDrawnExclusive) {
-            if (!viewport?.alwaysDrawn?.size) {
-                return of(createVisibilityStatus("hidden"));
-            }
-        }
-        else if (!viewport?.neverDrawn?.size && !viewport?.alwaysDrawn?.size) {
-            return of(props.defaultStatus());
+    getVisibilityFromAlwaysAndNeverDrawnElements({ modelId, ...props }) {
+        const defaultStatus = this.#props.viewport.isAlwaysDrawnExclusive ? createVisibilityStatus("hidden") : props.defaultStatus;
+        const { oppositeSet, setType } = defaultStatus.state === "visible"
+            ? { oppositeSet: this.#props.viewport.neverDrawn, setType: "never" }
+            : { oppositeSet: this.#props.viewport.alwaysDrawn, setType: "always" };
+        if (!oppositeSet?.size) {
+            return of(defaultStatus);
         }
         if ("elements" in props) {
-            return of(getVisibilityFromAlwaysAndNeverDrawnElementsImpl({
-                ...props,
-                alwaysDrawn: viewport.alwaysDrawn?.size ? setIntersection(Id64.iterable(props.elements), viewport.alwaysDrawn) : undefined,
-                neverDrawn: viewport.neverDrawn?.size ? setIntersection(Id64.iterable(props.elements), viewport.neverDrawn) : undefined,
-                totalCount: Id64.sizeOf(props.elements),
-                viewport,
-            }));
+            const { childrenCount } = props;
+            // When elements children count is 0 or undefined, no need to query for child always/never drawn elements.
+            if (!childrenCount) {
+                return of(getVisibilityFromAlwaysAndNeverDrawnElementsImpl({
+                    defaultStatus,
+                    numberOfElementsInOppositeSet: countInSet(props.elements, oppositeSet),
+                    totalCount: Id64.sizeOf(props.elements),
+                }));
+            }
+            const parentElementIdsPath = [...props.parentElementsIdsPath, props.elements];
+            // Get child always/never drawn elements.
+            return this.#alwaysAndNeverDrawnElements
+                .getAlwaysOrNeverDrawnElements({
+                modelId,
+                categoryIds: props.categoryOfTopMostParentElement,
+                parentElementIdsPath,
+                setType,
+            })
+                .pipe(map((childElementsInOppositeSet) => 
+            // Combine child always/never drawn count with the props.elements count in always/never drawn sets.
+            getVisibilityFromAlwaysAndNeverDrawnElementsImpl({
+                defaultStatus,
+                numberOfElementsInOppositeSet: countInSet(props.elements, oppositeSet) + childElementsInOppositeSet.size,
+                totalCount: childrenCount + Id64.sizeOf(props.elements),
+            })));
         }
-        const { modelId, categoryIds } = props.queryProps;
-        return fromWithRelease({ source: categoryIds, releaseOnCount: 100 }).pipe(mergeMap((categoryId) => {
-            return forkJoin({
-                categoryId: of(categoryId),
-                totalCount: this.#props.baseIdsCache.getElementsCount({ modelId, categoryId }),
-                alwaysDrawn: this.#alwaysAndNeverDrawnElements.getAlwaysOrNeverDrawnElements({ modelIds: modelId, categoryIds: categoryId, setType: "always" }),
-                neverDrawn: this.#alwaysAndNeverDrawnElements.getAlwaysOrNeverDrawnElements({ modelIds: modelId, categoryIds: categoryId, setType: "never" }),
-            });
-        }), 
+        const { categoryId } = props;
+        return forkJoin({
+            totalCount: this.#props.baseIdsCache.getElementsCount({ modelId, categoryId }),
+            relatedElementsInOppositeSet: this.#alwaysAndNeverDrawnElements.getAlwaysOrNeverDrawnElements({
+                modelId,
+                categoryIds: categoryId,
+                setType,
+            }),
+        }).pipe(
         // There is a known bug:
         // Categories that don't have root elements will make visibility result incorrect
         // E.g.:
@@ -389,17 +261,11 @@ export class BaseVisibilityHelper {
         //    - ChildElementB (CategoryB is hidden) ChildElementB is in always drawn list
         // Result will be "partial" because CategoryB will return hidden visibility, even though all elements are visible
         // TODO fix with: https://github.com/iTwin/viewer-components-react/issues/1100
-        mergeMap((state) => {
-            if (this.#props.viewport.isAlwaysDrawnExclusive && state.totalCount === 0) {
-                return EMPTY;
-            }
-            return of(getVisibilityFromAlwaysAndNeverDrawnElementsImpl({
-                ...props,
-                ...state,
-                viewport,
-                defaultStatus: () => props.defaultStatus(state.categoryId),
-            }));
-        }), defaultIfEmpty(createVisibilityStatus("hidden")), mergeVisibilityStatuses);
+        map((state) => getVisibilityFromAlwaysAndNeverDrawnElementsImpl({
+            defaultStatus,
+            totalCount: state.totalCount,
+            numberOfElementsInOppositeSet: state.relatedElementsInOppositeSet.size,
+        })));
     }
     /**
      * Changes visibility status of models.
@@ -412,18 +278,13 @@ export class BaseVisibilityHelper {
             if (Id64.sizeOf(modelIds) === 0) {
                 return EMPTY;
             }
-            const viewport = this.#props.viewport;
-            viewport.clearPerModelCategoryOverrides({ modelIds });
+            this.#props.viewport.clearPerModelCategoryOverrides({ modelIds });
             if (!on) {
-                viewport.changeModelDisplay({ modelIds, display: false });
-                return this.#props.baseIdsCache
-                    .getSubModels({ modelIds })
-                    .pipe(mergeMap(({ subModels }) => (subModels ? this.changeModelsVisibilityStatus({ modelIds: subModels, on }) : EMPTY)));
+                this.#props.viewport.changeModelDisplay({ modelIds, display: false });
+                return from(Id64.iterable(modelIds)).pipe(mergeMap((modelId) => this.#props.baseIdsCache.getSubModels({ modelId })), mergeMap((subModels) => this.changeModelsVisibilityStatus({ modelIds: subModels, on })));
             }
-            viewport.changeModelDisplay({ modelIds, display: true });
-            return this.#props.baseIdsCache.getCategories({ modelIds }).pipe(mergeMap(({ id, drawingCategories, spatialCategories }) => {
-                return merge(drawingCategories ? this.changeCategoriesVisibilityStatus({ categoryIds: drawingCategories, modelId: id, on }) : EMPTY, spatialCategories ? this.changeCategoriesVisibilityStatus({ categoryIds: spatialCategories, modelId: id, on }) : EMPTY);
-            }));
+            this.#props.viewport.changeModelDisplay({ modelIds, display: true });
+            return from(Id64.iterable(modelIds)).pipe(mergeMap((modelId) => forkJoin({ categoryIds: this.#props.baseIdsCache.getCategories({ modelId }), modelId: of(modelId) })), mergeMap(({ categoryIds, modelId }) => this.changeCategoriesVisibilityStatus({ categoryIds, modelId, on })));
         });
         return this.#props.overrideHandler
             ? this.#props.overrideHandler.createVisibilityHandlerResult({
@@ -435,99 +296,79 @@ export class BaseVisibilityHelper {
     }
     /** Turns model on and turns off elements with categories related to that model. */
     showModelWithoutAnyCategoriesOrElements(modelId, categoriesToNotOverride) {
-        const viewport = this.#props.viewport;
         return forkJoin({
-            allModelCategories: this.#props.baseIdsCache.getCategories({ modelIds: modelId }).pipe(reduce((acc, { drawingCategories, spatialCategories }) => {
-                for (const category of Id64.iterable(drawingCategories ?? [])) {
-                    acc.add(category);
-                }
-                for (const category of Id64.iterable(spatialCategories ?? [])) {
-                    acc.add(category);
-                }
-                return acc;
-            }, new Set())),
-            modelAlwaysDrawnElements: this.#alwaysAndNeverDrawnElements.getAlwaysOrNeverDrawnElements({ modelIds: modelId, setType: "always" }),
+            allModelCategories: this.#props.baseIdsCache.getCategories({ modelId }),
+            modelAlwaysDrawnElements: this.#alwaysAndNeverDrawnElements.getAlwaysOrNeverDrawnElements({ modelId, setType: "always" }),
         }).pipe(mergeMap(({ allModelCategories, modelAlwaysDrawnElements }) => {
             const alwaysDrawn = this.#props.viewport.alwaysDrawn;
             if (alwaysDrawn && modelAlwaysDrawnElements) {
-                viewport.setAlwaysDrawn({ elementIds: setDifference(alwaysDrawn, modelAlwaysDrawnElements) });
+                this.#props.viewport.setAlwaysDrawn({ elementIds: setDifference(alwaysDrawn, modelAlwaysDrawnElements) });
             }
-            viewport.changeModelDisplay({ modelIds: modelId, display: true });
-            return from(Id64.iterable(allModelCategories)).pipe(categoriesToNotOverride ? filter((modelCategory) => !Id64.has(categoriesToNotOverride, modelCategory)) : identity, map((categoryId) => this.changeCategoryStateInViewportAccordingToModelVisibility(modelId, categoryId, false, false)), takeLast(1), defaultIfEmpty(undefined));
+            this.#props.viewport.changeModelDisplay({ modelIds: modelId, display: true });
+            return from(Id64.iterable(allModelCategories)).pipe(categoriesToNotOverride ? filter((modelCategory) => !categoriesToNotOverride.has(modelCategory)) : identity, map((categoryId) => this.changeCategoryStateInViewportAccordingToModelVisibility(modelId, categoryId, false, false)), takeLast(1), defaultIfEmpty(undefined));
         }));
     }
     /** Adds per-model category overrides based on category visibility in category selector. */
     changeCategoryStateInViewportAccordingToModelVisibility(modelId, categoryId, on, changeSubCategories) {
-        const viewport = this.#props.viewport;
-        const isDisplayedInSelector = viewport.viewsCategory(categoryId);
+        const isDisplayedInSelector = this.#props.viewport.viewsCategory(categoryId);
         const override = on === isDisplayedInSelector ? "none" : on ? "show" : "hide";
-        viewport.setPerModelCategoryOverride({ modelIds: modelId, categoryIds: categoryId, override });
+        this.#props.viewport.setPerModelCategoryOverride({ modelIds: modelId, categoryIds: categoryId, override });
         if (override === "none" && on) {
             // we took off the override which means the category is displayed in selector, but
             // doesn't mean all its subcategories are displayed - this call ensures that
-            viewport.changeCategoryDisplay({ categoryIds: categoryId, display: true, enableAllSubCategories: changeSubCategories });
+            this.#props.viewport.changeCategoryDisplay({ categoryIds: categoryId, display: true, enableAllSubCategories: changeSubCategories });
         }
     }
     /**
      * Changes categories visibility status.
      *
-     * Also:
-     * - Turns on models in cases where categories need to be turned on and models are not already on.
-     * - Removed related elements from always/never drawn elements.
-     * - changes visibility of sub-models that are related to the specified categories.
+     * - Changes category selector for specified categories
+     * - Removes per-model category overrides
+     * - Clears always and never drawn elements related to those categories
+     * - Changes sub-models visibility status that are related to specified categories.
+     * - If `on` is set to true:
+     *   - Turns on models of those categories without affecting any visibilities
+     *   - Turns on sub-categories visibility status of specified categories.
      */
     changeCategoriesVisibilityStatus(props) {
         const result = defer(() => {
-            const { modelId: modelIdFromProps, categoryIds, on } = props;
-            const viewport = this.#props.viewport;
-            const modelIdsObservable = (modelIdFromProps
-                ? of(new Map([[modelIdFromProps, getSetFromId64Arg(categoryIds)]]))
-                : this.#props.baseIdsCache.getModels({ categoryIds }).pipe(reduce((acc, { id, models }) => {
-                    if (!models) {
-                        return acc;
-                    }
-                    for (const modelId of Id64.iterable(models)) {
-                        let entry = acc.get(modelId);
-                        if (!entry) {
-                            entry = new Set();
-                            acc.set(modelId, entry);
-                        }
-                        entry.add(id);
+            const { categoryIds, on } = props;
+            if (Id64.sizeOf(categoryIds) === 0) {
+                return EMPTY;
+            }
+            if (props.modelId) {
+                return this.changeCategoriesUnderModelVisibilityStatus({ categoryIds, modelId: props.modelId, on });
+            }
+            const changeCategoriesObs = fromWithRelease({ source: categoryIds, releaseOnCount: 500 }).pipe(bufferCount(getOptimalBatchSize({ totalSize: Id64.sizeOf(categoryIds), maximumBatchSize: 500 })), map((categoryIdsBatch) => this.#props.viewport.changeCategoryDisplay({ categoryIds: categoryIdsBatch, display: on, enableAllSubCategories: false })));
+            const categoryModelsObs = from(Id64.iterable(categoryIds)).pipe(mergeMap((categoryId) => forkJoin({ categoryId: of(categoryId), models: this.#props.baseIdsCache.getModels({ categoryId, includeSubModels: true }) })), reduce((acc, { models, categoryId }) => {
+                for (const modelId of Id64.iterable(models)) {
+                    let entry = acc.get(modelId);
+                    if (!entry) {
+                        entry = new Set();
+                        acc.set(modelId, entry);
                     }
-                    return acc;
-                }, new Map()))).pipe(mergeMap((modelCategoriesMap) => modelCategoriesMap.entries()), shareReplay());
-            return concat(
-            // If modelId was provided: add override
-            // If modelId was not provided: change categoryDisplay and remove categories per model overrides
-            modelIdFromProps
-                ? of(viewport.setPerModelCategoryOverride({
-                    modelIds: modelIdFromProps,
-                    categoryIds,
-                    override: on ? "show" : "hide",
-                }))
-                : merge(
-                // In case of turning categories on, need to change sub-categories separately as enableCategoryDisplay
-                // takes a long time to get sub-categories for each category
-                on
-                    ? fromWithRelease({ source: categoryIds, releaseOnCount: 200 }).pipe(mergeMap((categoryId) => this.#props.baseIdsCache.getSubCategories({ categoryId })), mergeAll(), releaseMainThreadOnItemsCount(200), map((subCategoryId) => {
-                        if (!this.#props.viewport.viewsSubCategory(subCategoryId)) {
-                            this.#props.viewport.changeSubCategoryDisplay({ subCategoryId, display: true });
-                        }
-                    }))
-                    : EMPTY, from(enableCategoryDisplay(viewport, categoryIds, on, false)), modelIdsObservable.pipe(map(([modelId, modelCategories]) => {
-                    viewport.setPerModelCategoryOverride({ modelIds: modelId, categoryIds: modelCategories, override: "none" });
-                }))), 
-            // If categories visibility needs to be turned on, we need to turn on models without turning on unrelated elements or categories for that model
-            on
-                ? modelIdsObservable.pipe(mergeMap(([modelId, categories]) => {
-                    if (!viewport.viewsModel(modelId)) {
-                        return this.showModelWithoutAnyCategoriesOrElements(modelId, categories);
+                    entry.add(categoryId);
+                }
+                return acc;
+            }, new Map()), mergeMap((modelCategoriesMap) => modelCategoriesMap.entries()), shareReplay());
+            const changeSubModelsObs = categoryModelsObs.pipe(mergeMap(([modelId, modelCategories]) => from(modelCategories).pipe(mergeMap((modelCategoryId) => this.#props.baseIdsCache.getSubModels({ categoryId: modelCategoryId, modelId })))), mergeMap((subModels) => this.changeModelsVisibilityStatus({ modelIds: subModels, on })));
+            const changeModelsObs = on
+                ? categoryModelsObs.pipe(mergeMap(([modelId, modelCategories]) => this.#props.viewport.viewsModel(modelId) ? EMPTY : this.showModelWithoutAnyCategoriesOrElements(modelId, modelCategories)))
+                : EMPTY;
+            const removeCategoriesOverridesObs = categoryModelsObs.pipe(map(([modelId, modelCategories]) => this.#props.viewport.setPerModelCategoryOverride({
+                modelIds: modelId,
+                categoryIds: modelCategories,
+                override: "none",
+            })));
+            const changeAlwaysAndNeverDrawnElementsObs = categoryModelsObs.pipe(mergeMap(([modelId, modelCategories]) => this.#alwaysAndNeverDrawnElements.clearAlwaysAndNeverDrawnElements({ categoryIds: modelCategories, modelId })));
+            const changeSubCategoriesObs = on
+                ? fromWithRelease({ source: categoryIds, releaseOnCount: 200 }).pipe(mergeMap((categoryId) => this.#props.baseIdsCache.getSubCategories({ categoryId })), mergeAll(), releaseMainThreadOnItemsCount(200), map((subCategoryId) => {
+                    if (!this.#props.viewport.viewsSubCategory(subCategoryId)) {
+                        this.#props.viewport.changeSubCategoryDisplay({ subCategoryId, display: true });
                     }
-                    return EMPTY;
                 }))
-                : EMPTY, this.#alwaysAndNeverDrawnElements.clearAlwaysAndNeverDrawnElements({ categoryIds, modelId: modelIdFromProps }), this.#props.baseIdsCache
-                .getSubModels({ categoryIds, modelId: modelIdFromProps })
-                .pipe(mergeMap(({ subModels }) => (subModels ? this.changeModelsVisibilityStatus({ modelIds: subModels, on }) : EMPTY))));
+                : EMPTY;
+            return merge(changeCategoriesObs, changeSubModelsObs, changeModelsObs, removeCategoriesOverridesObs, changeAlwaysAndNeverDrawnElementsObs, changeSubCategoriesObs);
         });
         return this.#props.overrideHandler
             ? this.#props.overrideHandler.createVisibilityHandlerResult({
@@ -537,6 +378,25 @@ export class BaseVisibilityHelper {
             })
             : result;
     }
+    /**
+     * Changes categories under specific model visibility status.
+     *
+     * - Turns on model without affecting it's elements or categories
+     * - sets per-model category overrides for specified categories.
+     * - Clears always and never drawn elements related to those categories
+     * - Changes sub-models visibility status that are related to specified categories in the model.
+     */
+    changeCategoriesUnderModelVisibilityStatus({ modelId, categoryIds, on, }) {
+        const changeModelsVisibilityStatusObs = on && !this.#props.viewport.viewsModel(modelId) ? this.showModelWithoutAnyCategoriesOrElements(modelId, Id64.toIdSet(categoryIds)) : EMPTY;
+        const changeCategoriesVisibilityStatusObs = of(this.#props.viewport.setPerModelCategoryOverride({
+            modelIds: modelId,
+            categoryIds,
+            override: on ? "show" : "hide",
+        }));
+        const changeAlwaysAndNeverDrawnElementsObs = this.#alwaysAndNeverDrawnElements.clearAlwaysAndNeverDrawnElements({ categoryIds, modelId });
+        const changeSubModelsObs = fromWithRelease({ source: categoryIds, releaseOnCount: 200 }).pipe(mergeMap((categoryId) => this.#props.baseIdsCache.getSubModels({ categoryId, modelId })), mergeMap((subModels) => this.changeModelsVisibilityStatus({ modelIds: subModels, on })));
+        return merge(changeModelsVisibilityStatusObs, changeCategoriesVisibilityStatusObs, changeAlwaysAndNeverDrawnElementsObs, changeSubModelsObs);
+    }
     /**
      * Changes visibility status of elements by adding them to the viewport's always/never drawn elements.
      *
@@ -544,35 +404,43 @@ export class BaseVisibilityHelper {
      */
     changeElementsVisibilityStatus(props) {
         const result = defer(() => {
-            const { modelId, categoryId, elementIds, on } = props;
+            const { modelId, categoryId, elementIds, on, children } = props;
             const viewport = this.#props.viewport;
-            // TODO: change child elements
-            // TODO: change child element categories
-            // TODO: change child subModels
+            // TODO: determine which child elements to change based on their categories https://github.com/iTwin/viewer-components-react/issues/1561
             return concat(
             // Change elements state
             defer(() => {
+                const elementsToChange = children ? [...elementIds, ...(typeof children === "string" ? [children] : children)] : elementIds;
+                const isDisplayedByDefault = (isCategoryVisible) => 
+                // When category is visible and elements need to be turned off, or when category is hidden and elements need to be turned on,
+                // We can set isDisplayedByDefault to isCategoryVisible. This allows to not check if each element is in the elementIds list or not.
+                isCategoryVisible === !on
+                    ? () => isCategoryVisible
+                    : (elementId) => {
+                        if (Id64.has(elementIds, elementId)) {
+                            return isCategoryVisible;
+                        }
+                        return !on;
+                    };
                 if (!viewport.viewsModel(modelId)) {
                     if (!on) {
-                        return this.queueElementsVisibilityChange(elementIds, on, false);
+                        return this.queueElementsVisibilityChange(elementsToChange, on, () => false);
                     }
                     return this.showModelWithoutAnyCategoriesOrElements(modelId).pipe(mergeMap(() => {
-                        const defaultVisibility = this.getVisibleModelCategoriesDirectVisibilityStatus({
-                            categoryIds: categoryId,
+                        const defaultVisibility = this.getVisibleModelCategoryDirectVisibilityStatus({
+                            categoryId,
                             modelId,
                         });
-                        const displayedByDefault = defaultVisibility.state === "visible";
-                        return this.queueElementsVisibilityChange(elementIds, on, displayedByDefault);
+                        return this.queueElementsVisibilityChange(elementsToChange, on, isDisplayedByDefault(defaultVisibility.state === "visible"));
                     }));
                 }
-                const categoryVisibility = this.getVisibleModelCategoriesDirectVisibilityStatus({ categoryIds: categoryId, modelId });
-                const isDisplayedByDefault = categoryVisibility.state === "visible";
-                return this.queueElementsVisibilityChange(elementIds, on, isDisplayedByDefault);
+                const categoryVisibility = this.getVisibleModelCategoryDirectVisibilityStatus({ categoryId, modelId });
+                return this.queueElementsVisibilityChange(elementsToChange, on, isDisplayedByDefault(categoryVisibility.state === "visible"));
             }), 
             // Change visibility of elements that are models
-            fromWithRelease({ source: elementIds, releaseOnCount: 100 }).pipe(mergeMap((elementId) => this.#props.baseIdsCache.hasSubModel(elementId).pipe(mergeMap((isSubModel) => {
-                if (isSubModel) {
-                    return this.changeModelsVisibilityStatus({ modelIds: elementId, on });
+            fromWithRelease({ source: elementIds, releaseOnCount: 100 }).pipe(mergeMap((elementId) => this.#props.baseIdsCache.getSubModelsUnderElement(elementId).pipe(mergeMap((subModelsUnderElement) => {
+                if (subModelsUnderElement.length > 0) {
+                    return this.changeModelsVisibilityStatus({ modelIds: subModelsUnderElement, on });
                 }
                 return EMPTY;
             })))));