[Tree widget]: header buttons adjustments on next

change/@itwin-property-grid-react-db3b1c25-9efb-4424-b503-6d4ed85398ba.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "",
+  "packageName": "@itwin/property-grid-react",
+  "email": "100586436+JonasDov@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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/e2e-tests/CategoriesTree.test.ts

@@ -159,7 +159,7 @@ test.describe("Categories tree", () => {
     const node = locateNode(treeWidget, "Equipment");
     await node.waitFor({ state: "visible" });
     await node.getByRole("button", { name: "Determining visibility..." }).waitFor({ state: "detached" });
-    await node.getByRole("button", { name: "Show" }).waitFor({ state: "attached" });
+    await node.getByRole("button", { name: "Hide", includeHidden: true }).waitFor({ state: "attached" });
     await takeScreenshot(page, treeWidget);
   });
 });

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, firstValueFrom, forkJoin, from, map, mergeAll, mergeMap, of, reduce, 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,67 +92,109 @@ 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 = 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;
+      }
+      showAll({
+        viewport,
+        modelIds: models,
+        categoryInfos,
+      });
+    } catch {}
+  };
+
   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(() => {});
-      }}
+      onClick={onClick}
       icon={visibilityShowSvg}
+      aria-disabled={categories.length === 0}
     />
   );
 }
 
 /** @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 = 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;
+      }
+      hideAllCategories({
+        viewport,
+        categoryInfos,
+      });
+    } catch {}
+  };
   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 });
-      }}
+      onClick={onClick}
       icon={visibilityHideSvg}
+      aria-disabled={categories.length === 0}
     />
   );
 }
 
 /** @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 = 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;
+      }
+      invertAllCategories({
+        viewport,
+        modelIds: models,
+        categoryInfos,
+      });
+    } catch {}
+  };
+
   return (
     <IconButton
       variant={"ghost"}
       label={translate("categoriesTree.buttons.invert.tooltip")}
-      onClick={() => {
-        props.onFeatureUsed?.(`categories-tree-invert`);
-        cancelChangesInProgress.next();
-        void invertAllCategories(props.categories, props.viewport);
-      }}
+      onClick={onClick}
       icon={visibilityInvertSvg}
+      aria-disabled={categories.length === 0}
     />
   );
 }
@@ -212,3 +256,32 @@ 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(
+    from(categoriesInfo).pipe(
+      mergeMap((categoryInfo) => {
+        if (categoryInfo.subCategoryIds && categoryInfo.subCategoryIds.length > 0) {
+          return of({ categoryId: categoryInfo.categoryId, subCategoryIds: categoryInfo.subCategoryIds });
+        }
+        return baseIdsCache
+          .getSubCategories({ categoryId: categoryInfo.categoryId })
+          .pipe(map((subCategoryIds) => ({ categoryId: categoryInfo.categoryId, subCategoryIds })));
+      }),
+      reduce((acc: CategoryInfosMap, category) => {
+        acc.set(category.categoryId, category.subCategoryIds);
+        return acc;
+      }, new Map()),
+      takeUntil(cancel),
+      defaultIfEmpty(undefined),
+    ),
+  );
+}

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

@@ -5,9 +5,11 @@
 
 import { Fragment } from "react";
 import { useActiveIModelConnection } from "@itwin/appui-react";
+import { Skeleton } from "@stratakit/bricks";
 import { SelectableTree } from "../../tree-header/SelectableTree.js";
 import { useActiveTreeWidgetViewport } from "../common/internal/hooks/UseActiveTreeWidgetViewport.js";
-import { SharedTreeContextProviderInternal } from "../common/internal/SharedTreeContextProviderInternal.js";
+import { SharedTreeContextProviderInternal, useSharedTreeContextInternal } from "../common/internal/SharedTreeContextProviderInternal.js";
+import { getClassesByView } from "../common/internal/Utils.js";
 import { TelemetryContextProvider } from "../common/UseTelemetryContext.js";
 import { CategoriesTree } from "./CategoriesTree.js";
 import { HideAllButton, InvertAllButton, ShowAllButton, useCategoriesTreeButtonProps } from "./CategoriesTreeButtons.js";
@@ -117,14 +119,21 @@ function CategoriesTreeComponentImpl({
   ...treeProps
 }: CategoriesTreeComponentProps & { iModel: IModelConnection; viewport: TreeWidgetViewport }) {
   const { buttonProps, onCategoriesFiltered } = useCategoriesTreeButtonProps({ viewport });
+  const { getBaseIdsCache } = useSharedTreeContextInternal();
+  const viewType = viewport.viewType === "2d" ? "2d" : "3d";
+  const isLoaded =
+    buttonProps.categories.length > 0 ||
+    getBaseIdsCache({ imodel: viewport.iModel, elementClassName: getClassesByView(viewType).elementClass, type: viewType }).elementModelCategoriesLoaded();
 
-  const buttons: ReactNode = headerButtons
-    ? headerButtons.map((btn, index) => <Fragment key={index}>{btn({ ...buttonProps, onFeatureUsed })}</Fragment>)
-    : [
-        <ShowAllButton {...buttonProps} key="show-all-btn" onFeatureUsed={onFeatureUsed} />,
-        <HideAllButton {...buttonProps} key="hide-all-btn" onFeatureUsed={onFeatureUsed} />,
-        <InvertAllButton {...buttonProps} key="invert-all-btn" onFeatureUsed={onFeatureUsed} />,
-      ];
+  const buttons: ReactNode = isLoaded
+    ? headerButtons
+      ? headerButtons.map((btn, index) => <Fragment key={index}>{btn({ ...buttonProps, onFeatureUsed })}</Fragment>)
+      : [
+          <ShowAllButton {...buttonProps} key="show-all-btn" onFeatureUsed={onFeatureUsed} />,
+          <HideAllButton {...buttonProps} key="hide-all-btn" onFeatureUsed={onFeatureUsed} />,
+          <InvertAllButton {...buttonProps} key="invert-all-btn" onFeatureUsed={onFeatureUsed} />,
+        ]
+    : Array.from({ length: headerButtons?.length ?? 3 }, (_, index) => <Skeleton variant={"object"} size={"medium"} key={index} />);
 
   return (
     <TelemetryContextProvider componentIdentifier={CategoriesTreeComponent.id} onFeatureUsed={onFeatureUsed} onPerformanceMeasured={onPerformanceMeasured}>

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) {