[Tree widget]: header buttons adjustments on next

change/@itwin-tree-widget-react-c3197d23-0763-4d55-a452-0716c6140208.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Changed the Models and Categories tree header buttons to behave more consistently. Fixed an issue where the 2D toggle was always disabled.",
+  "packageName": "@itwin/tree-widget-react",
+  "email": "100586436+JonasDov@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/tree-widget/src/tree-widget-react/components/trees/categories-tree/CategoriesTreeButtons.tsx

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { firstValueFrom, forkJoin, mergeAll, mergeMap, of, toArray } from "rxjs";
+import { defaultIfEmpty, defer, firstValueFrom, forkJoin, mergeAll, mergeMap, of, takeUntil, toArray } from "rxjs";
 import { useAsyncValue } from "@itwin/components-react";
 import { IconButton } from "@stratakit/bricks";
 import visibilityHideSvg from "@stratakit/icons/visibility-hide.svg";
@@ -14,12 +14,14 @@ import { useTranslation } from "../common/components/LocalizationContext.js";
 import { useErrorState } from "../common/internal/hooks/UseErrorState.js";
 import { useSharedTreeContextInternal } from "../common/internal/SharedTreeContextProviderInternal.js";
 import { getClassesByView } from "../common/internal/Utils.js";
-import { enableCategoryDisplay, invertAllCategories } from "../common/internal/VisibilityUtils.js";
-import { showAll } from "../common/Utils.js";
+import { hideAllCategories, invertAllCategories, showAll } from "../common/internal/VisibilityUtils.js";
 
+import type { Observable } from "rxjs";
 import type { Id64Array, Id64String } from "@itwin/core-bentley";
 import type { TreeToolbarButtonProps } from "../../tree-header/SelectableTree.js";
+import type { BaseIdsCache } from "../common/internal/caches/BaseIdsCache.js";
 import type { ModelId } from "../common/internal/Types.js";
+import type { CategoryInfosMap } from "../common/internal/VisibilityUtils.js";
 import type { TreeWidgetViewport } from "../common/TreeWidgetViewport.js";
 
 /**
@@ -90,21 +92,37 @@ export type CategoriesTreeHeaderButtonType = (props: CategoriesTreeHeaderButtonP
 
 /** @public */
 export function ShowAllButton(props: CategoriesTreeHeaderButtonProps) {
-  const { cancelChangesInProgress } = useSharedTreeContextInternal();
+  const { categories, viewport, onFeatureUsed, models } = props;
+  const { cancelChangesInProgress, getBaseIdsCache } = useSharedTreeContextInternal();
+  const viewType = viewport.viewType === "2d" ? "2d" : "3d";
+  const baseIdsCache = getBaseIdsCache({ imodel: viewport.iModel, elementClassName: getClassesByView(viewType).elementClass, type: viewType });
   const translate = useTranslation();
+
+  const onClick = useCallback(async () => {
+    // cspell:disable-next-line
+    onFeatureUsed?.(`categories-tree-showall`);
+    cancelChangesInProgress.next();
+    // wrap in try catch for getCategoryInfos call
+    try {
+      const categoryInfos = await getCategoryInfos({ categoriesInfo: categories, baseIdsCache, cancel: cancelChangesInProgress });
+      if (!categoryInfos) {
+        return;
+      }
+      await showAll({
+        viewport,
+        modelIds: models,
+        categoryInfos,
+        cancel: cancelChangesInProgress,
+      });
+    } catch {}
+  }, [viewport, cancelChangesInProgress, categories, models, onFeatureUsed, baseIdsCache]);
+
   return (
     <IconButton
       variant={"ghost"}
       label={translate("categoriesTree.buttons.showAll.tooltip")}
       onClick={() => {
-        // cspell:disable-next-line
-        props.onFeatureUsed?.(`categories-tree-showall`);
-        cancelChangesInProgress.next();
-        void showAll({
-          models: props.models,
-          viewport: props.viewport,
-          categories: props.categories.map((category) => category.categoryId),
-        }).catch(() => {});
+        void onClick();
       }}
       icon={visibilityShowSvg}
     />
@@ -113,24 +131,34 @@ export function ShowAllButton(props: CategoriesTreeHeaderButtonProps) {
 
 /** @public */
 export function HideAllButton(props: CategoriesTreeHeaderButtonProps) {
-  const { cancelChangesInProgress } = useSharedTreeContextInternal();
+  const { categories, viewport, onFeatureUsed } = props;
+  const { cancelChangesInProgress, getBaseIdsCache } = useSharedTreeContextInternal();
+  const viewType = viewport.viewType === "2d" ? "2d" : "3d";
+  const baseIdsCache = getBaseIdsCache({ imodel: viewport.iModel, elementClassName: getClassesByView(viewType).elementClass, type: viewType });
   const translate = useTranslation();
+  const onClick = useCallback(async () => {
+    // cspell:disable-next-line
+    onFeatureUsed?.(`categories-tree-hideall`);
+    cancelChangesInProgress.next();
+    // wrap in try catch for getCategoryInfos call
+    try {
+      const categoryInfos = await getCategoryInfos({ categoriesInfo: categories, baseIdsCache, cancel: cancelChangesInProgress });
+      if (!categoryInfos) {
+        return;
+      }
+      await hideAllCategories({
+        viewport,
+        categoryInfos,
+        cancel: cancelChangesInProgress,
+      });
+    } catch {}
+  }, [viewport, cancelChangesInProgress, categories, onFeatureUsed, baseIdsCache]);
   return (
     <IconButton
       variant={"ghost"}
       label={translate("categoriesTree.buttons.hideAll.tooltip")}
       onClick={() => {
-        // cspell:disable-next-line
-        props.onFeatureUsed?.(`categories-tree-hideall`);
-        cancelChangesInProgress.next();
-        void enableCategoryDisplay(
-          props.viewport,
-          props.categories.map((category) => category.categoryId),
-          false,
-          false,
-        );
-
-        props.viewport.changeModelDisplay({ modelIds: props.models, display: false });
+        void onClick();
       }}
       icon={visibilityHideSvg}
     />
@@ -139,16 +167,35 @@ export function HideAllButton(props: CategoriesTreeHeaderButtonProps) {
 
 /** @public */
 export function InvertAllButton(props: CategoriesTreeHeaderButtonProps) {
-  const { cancelChangesInProgress } = useSharedTreeContextInternal();
+  const { categories, viewport, onFeatureUsed, models } = props;
+  const { cancelChangesInProgress, getBaseIdsCache } = useSharedTreeContextInternal();
+  const viewType = viewport.viewType === "2d" ? "2d" : "3d";
+  const baseIdsCache = getBaseIdsCache({ imodel: viewport.iModel, elementClassName: getClassesByView(viewType).elementClass, type: viewType });
   const translate = useTranslation();
+  const onClick = useCallback(async () => {
+    // cspell:disable-next-line
+    onFeatureUsed?.(`categories-tree-invert`);
+    cancelChangesInProgress.next();
+    // wrap in try catch for getCategoryInfos call
+    try {
+      const categoryInfos = await getCategoryInfos({ categoriesInfo: categories, baseIdsCache, cancel: cancelChangesInProgress });
+      if (!categoryInfos) {
+        return;
+      }
+      await invertAllCategories({
+        viewport,
+        modelIds: models,
+        categoryInfos,
+        cancel: cancelChangesInProgress,
+      });
+    } catch {}
+  }, [viewport, cancelChangesInProgress, categories, models, onFeatureUsed, baseIdsCache]);
   return (
     <IconButton
       variant={"ghost"}
       label={translate("categoriesTree.buttons.invert.tooltip")}
       onClick={() => {
-        props.onFeatureUsed?.(`categories-tree-invert`);
-        cancelChangesInProgress.next();
-        void invertAllCategories(props.categories, props.viewport);
+        void onClick();
       }}
       icon={visibilityInvertSvg}
     />
@@ -212,3 +259,28 @@ function useAvailableModels(viewport: TreeWidgetViewport): Array<ModelId> {
 
   return availableModels;
 }
+
+async function getCategoryInfos({
+  categoriesInfo,
+  baseIdsCache,
+  cancel,
+}: {
+  categoriesInfo: CategoryInfo[];
+  baseIdsCache: BaseIdsCache;
+  cancel: Observable<void>;
+}): Promise<CategoryInfosMap | undefined> {
+  return firstValueFrom(
+    defer(async () => {
+      const categoriesWithSubCategories = await Promise.all(
+        categoriesInfo.map(async (categoryInfo) => {
+          if (categoryInfo.subCategoryIds && categoryInfo.subCategoryIds.length > 0) {
+            return { categoryId: categoryInfo.categoryId, subCategoryIds: categoryInfo.subCategoryIds };
+          }
+          const subCategoryIds = await firstValueFrom(baseIdsCache.getSubCategories({ categoryId: categoryInfo.categoryId }));
+          return { categoryId: categoryInfo.categoryId, subCategoryIds };
+        }),
+      );
+      return new Map(categoriesWithSubCategories.map((category) => [category.categoryId, category.subCategoryIds]));
+    }).pipe(takeUntil(cancel), defaultIfEmpty(undefined)),
+  );
+}

packages/tree-widget/src/tree-widget-react/components/trees/common/Utils.ts

@@ -4,10 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { HierarchySearchTree } from "@itwin/presentation-hierarchies";
-import { enableCategoryDisplay } from "./internal/VisibilityUtils.js";
-
-import type { Id64Array, Id64String } from "@itwin/core-bentley";
-import type { TreeWidgetViewport } from "./TreeWidgetViewport.js";
 
 /**
  * This is a logging namespace for public log messages that may be interesting to consumers.
@@ -18,62 +14,6 @@ export const LOGGING_NAMESPACE = "TreeWidget";
 /** @beta */
 export type FunctionProps<THook extends (props: any) => any> = Parameters<THook>[0];
 
-/**
- * Enables display of all given models. Also enables display of all categories and clears always and
- * never drawn lists in the viewport.
- * @internal
- */
-export async function showAll(props: {
-  /** ID's of models to enable */
-  models: Id64Array;
-  /** ID's of categories to enable */
-  categories: Id64Array;
-  viewport: TreeWidgetViewport;
-}) {
-  const { models, categories, viewport } = props;
-  await enableCategoryDisplay(viewport, categories, true, true);
-  viewport.changeModelDisplay({ modelIds: models, display: true });
-  viewport.clearNeverDrawn();
-  viewport.clearAlwaysDrawn();
-}
-
-/**
- * Inverts display of all given models.
- * @internal
- */
-export function invertAllModels(models: Id64Array, viewport: TreeWidgetViewport) {
-  const notViewedModels = new Array<Id64String>();
-  const viewedModels = new Array<Id64String>();
-  models.forEach((modelId) => {
-    if (viewport.viewsModel(modelId)) {
-      viewedModels.push(modelId);
-    } else {
-      notViewedModels.push(modelId);
-    }
-  });
-  viewport.changeModelDisplay({ modelIds: notViewedModels, display: true });
-  viewport.changeModelDisplay({ modelIds: viewedModels, display: false });
-}
-
-/**
- * Based on the value of `enable` argument, either enables or disables display of given models.
- * @internal
- */
-export function toggleModels(models: string[], enable: boolean, viewport: TreeWidgetViewport) {
-  if (!models) {
-    return;
-  }
-  viewport.changeModelDisplay({ modelIds: models, display: enable });
-}
-
-/**
- * Checks if all given models are displayed in given viewport.
- * @internal
- */
-export function areAllModelsVisible(models: string[], viewport: TreeWidgetViewport) {
-  return models.length !== 0 ? models.every((id) => viewport.viewsModel(id)) : false;
-}
-
 /** @internal */
 export function joinHierarchySearchTrees(subTrees: HierarchySearchTree[], searchTrees: HierarchySearchTree[]): HierarchySearchTree[] {
   const builder = HierarchySearchTree.createBuilder<{

packages/tree-widget/src/tree-widget-react/components/trees/common/internal/Utils.ts

@@ -36,6 +36,18 @@ export function setDifference<T>(lhs: ReadonlySet<T>, rhs: ReadonlySet<T>): Set<
   return result;
 }
 
+/** @internal */
+export function setIntersection<T>(lhs: ReadonlySet<T>, rhs: ReadonlySet<T>): Set<T> {
+  const result = new Set<T>();
+  const { smallerSet, largerSet } = lhs.size < rhs.size ? { smallerSet: lhs, largerSet: rhs } : { smallerSet: rhs, largerSet: lhs };
+  for (const x of smallerSet) {
+    if (largerSet.has(x)) {
+      result.add(x);
+    }
+  }
+  return result;
+}
+
 /** @internal */
 export function countInSet(ids: Id64Arg, set: ReadonlySet<Id64String> | undefined): number {
   if (!set?.size) {