[Tree-widget]: move to MUI by MartynasStrazdas · Pull Request #1748 · iTwin/viewer-components-react

MartynasStrazdas · 2026-07-27T09:02:06Z

No description provided.

github-actions

Tree-Widget Next benchmark

Benchmark suite	Current: `4d4f968`	Previous: `d60f4fd`	Deviation	Status
`models tree 50k 3D elements search > get search paths`	`874` ms	`1094` ms	`-20.11%`	✅
`models tree 50k 3D elements search > get search paths (P95 of main thread blocks)`	`52` ms	`54` ms	`-3.70%`	〰️
`models tree 50k 3D elements search > load hierarchy from search paths`	`117018` ms	`111828` ms	`4.64%`	〰️
`models tree 50k 3D elements search > load hierarchy from search paths (P95 of main thread blocks)`	`21` ms	`34` ms	`-38.24%`	〰️
`models tree 50k categories > collect nodes`	`2875` ms	`3024` ms	`-4.93%`	〰️
`models tree 50k categories > collect nodes (P95 of main thread blocks)`	`108` ms	`97` ms	`11.34%`	〰️
`models tree 50k categories > validate initial visibility`	`2074` ms	`1796` ms	`15.48%`	🚨
`models tree 50k categories > validate initial visibility (P95 of main thread blocks)`	`34` ms	`0` ms	`3400%`	〰️
`models tree 50k categories > change visibility`	`219` ms	`217` ms	`0.92%`	〰️
`models tree 50k categories > change visibility (P95 of main thread blocks)`	`59` ms	`56` ms	`5.36%`	〰️
`models tree 50k categories > validate changed visibility`	`2466` ms	`2309` ms	`6.80%`	〰️
`models tree 50k categories > validate changed visibility (P95 of main thread blocks)`	`28` ms	`23` ms	`21.74%`	〰️
`models tree 50k 3D elements > collect nodes`	`47513` ms	`45440` ms	`4.56%`	〰️
`models tree 50k 3D elements > collect nodes (P95 of main thread blocks)`	`45` ms	`54` ms	`-16.67%`	〰️
`models tree 50k 3D elements > validate initial visibility`	`1407` ms	`1451` ms	`-3.03%`	〰️
`models tree 50k 3D elements > validate initial visibility (P95 of main thread blocks)`	`0` ms	`28` ms	`-100%`	〰️
`models tree 50k 3D elements > change model visibility`	`96` ms	`108` ms	`-11.11%`	〰️
`models tree 50k 3D elements > change model visibility (P95 of main thread blocks)`	`0` ms	`0` ms	`0%`	🟰
`models tree 50k 3D elements > validate changed model visibility`	`2015` ms	`2144` ms	`-6.02%`	〰️
`models tree 50k 3D elements > validate changed model visibility (P95 of main thread blocks)`	`0` ms	`0` ms	`0%`	🟰
`models tree 50k 3D elements > change category node visibility`	`460` ms	`483` ms	`-4.76%`	〰️
`models tree 50k 3D elements > change category node visibility (P95 of main thread blocks)`	`51` ms	`46` ms	`10.87%`	〰️
`models tree 50k 3D elements > validate changed category visibility`	`1506` ms	`1411` ms	`6.73%`	〰️
`models tree 50k 3D elements > validate changed category visibility (P95 of main thread blocks)`	`0` ms	`0` ms	`0%`	🟰
`models tree 50k 3D elements > validate per-model category override`	`1472` ms	`1390` ms	`5.90%`	〰️
`models tree 50k 3D elements > validate per-model category override (P95 of main thread blocks)`	`0` ms	`0` ms	`0%`	🟰
`models tree 50k 3D elements > change element visibility`	`42` ms	`38` ms	`10.53%`	〰️
`models tree 50k 3D elements > change element visibility (P95 of main thread blocks)`	`0` ms	`0` ms	`0%`	🟰
`models tree 50k 3D elements > validate changed element visibility`	`2334` ms	`2118` ms	`10.20%`	🚨
`models tree 50k 3D elements > validate changed element visibility (P95 of main thread blocks)`	`122` ms	`39` ms	`212.82%`	🚨
`models tree 50k 3D child elements with different categories and excluded classes > collect nodes`	`67712` ms	`64280` ms	`5.34%`	〰️
`models tree 50k 3D child elements with different categories and excluded classes > collect nodes (P95 of main thread blocks)`	`60` ms	`57` ms	`5.26%`	〰️
`models tree 50k 3D child elements with different categories and excluded classes > validate initial visibility`	`2123` ms	`1979` ms	`7.28%`	〰️
`models tree 50k 3D child elements with different categories and excluded classes > validate initial visibility (P95 of main thread blocks)`	`122` ms	`0` ms	`12200%`	🚨
`models tree 50k 3D child elements with different categories and excluded classes > change visibility`	`53` ms	`51` ms	`3.92%`	〰️
`models tree 50k 3D child elements with different categories and excluded classes > change visibility (P95 of main thread blocks)`	`0` ms	`0` ms	`0%`	🟰
`models tree 50k 3D child elements with different categories and excluded classes > validate changed visibility`	`5134` ms	`5603` ms	`-8.37%`	〰️
`models tree 50k 3D child elements with different categories and excluded classes > validate changed visibility (P95 of main thread blocks)`	`81` ms	`62` ms	`30.65%`	〰️
`models tree 50k 3D child elements with different categories and excluded classes > collect nodes`	`69159` ms	`64280` ms	`7.59%`	〰️
`models tree 50k 3D child elements with different categories and excluded classes > collect nodes (P95 of main thread blocks)`	`84` ms	`57` ms	`47.37%`	〰️
`models tree 50k 3D child elements with different categories and excluded classes > validate initial visibility`	`2273` ms	`1979` ms	`14.86%`	🚨
`models tree 50k 3D child elements with different categories and excluded classes > validate initial visibility (P95 of main thread blocks)`	`0` ms	`0` ms	`0%`	🟰
`models tree 50k 3D child elements with different categories and excluded classes > change visibility`	`53` ms	`51` ms	`3.92%`	〰️
`models tree 50k 3D child elements with different categories and excluded classes > change visibility (P95 of main thread blocks)`	`0` ms	`0` ms	`0%`	🟰
`models tree 50k 3D child elements with different categories and excluded classes > validate changed visibility`	`6649` ms	`5603` ms	`18.67%`	🚨
`models tree 50k 3D child elements with different categories and excluded classes > validate changed visibility (P95 of main thread blocks)`	`166` ms	`62` ms	`167.74%`	🚨
`categories tree 50k subCategories search > get search paths`	`1087` ms	`1462` ms	`-25.65%`	✅
`categories tree 50k subCategories search > get search paths (P95 of main thread blocks)`	`94` ms	`84` ms	`11.90%`	〰️
`categories tree 50k subCategories search > load hierarchy from search paths`	`5591` ms	`5425` ms	`3.06%`	〰️
`categories tree 50k subCategories search > load hierarchy from search paths (P95 of main thread blocks)`	`57` ms	`51` ms	`11.76%`	〰️
`categories tree 50k subCategories > collect nodes`	`5819` ms	`5885` ms	`-1.12%`	〰️
`categories tree 50k subCategories > collect nodes (P95 of main thread blocks)`	`34` ms	`35` ms	`-2.86%`	〰️
`categories tree 50k subCategories > validate initial visibility`	`1022` ms	`1038` ms	`-1.54%`	〰️
`categories tree 50k subCategories > validate initial visibility (P95 of main thread blocks)`	`0` ms	`0` ms	`0%`	🟰
`categories tree 50k subCategories > change visibility`	`358` ms	`348` ms	`2.87%`	〰️
`categories tree 50k subCategories > change visibility (P95 of main thread blocks)`	`30` ms	`33` ms	`-9.09%`	〰️
`categories tree 50k subCategories > validate changed visibility`	`1062` ms	`1105` ms	`-3.89%`	〰️
`categories tree 50k subCategories > validate changed visibility (P95 of main thread blocks)`	`31` ms	`28` ms	`10.71%`	〰️
`categories tree 50k categories and excluded classes > collect nodes`	`116030` ms	`113304` ms	`2.41%`	〰️
`categories tree 50k categories and excluded classes > collect nodes (P95 of main thread blocks)`	`128` ms	`128` ms	`0%`	🟰
`categories tree 50k categories and excluded classes > validate initial visibility`	`5489` ms	`5481` ms	`0.15%`	〰️
`categories tree 50k categories and excluded classes > validate initial visibility (P95 of main thread blocks)`	`107` ms	`48` ms	`122.92%`	🚨
`categories tree 50k categories and excluded classes > change visibility`	`836` ms	`837` ms	`-0.12%`	〰️
`categories tree 50k categories and excluded classes > change visibility (P95 of main thread blocks)`	`70` ms	`58` ms	`20.69%`	〰️
`categories tree 50k categories and excluded classes > validate changed visibility`	`5861` ms	`5525` ms	`6.08%`	〰️
`categories tree 50k categories and excluded classes > validate changed visibility (P95 of main thread blocks)`	`38` ms	`41` ms	`-7.32%`	〰️
`categories tree 50k categories and excluded classes > collect nodes`	`119369` ms	`113304` ms	`5.35%`	〰️
`categories tree 50k categories and excluded classes > collect nodes (P95 of main thread blocks)`	`115` ms	`128` ms	`-10.16%`	〰️
`categories tree 50k categories and excluded classes > validate initial visibility`	`6086` ms	`5481` ms	`11.04%`	🚨
`categories tree 50k categories and excluded classes > validate initial visibility (P95 of main thread blocks)`	`37` ms	`48` ms	`-22.92%`	〰️
`categories tree 50k categories and excluded classes > change visibility`	`862` ms	`837` ms	`2.99%`	〰️
`categories tree 50k categories and excluded classes > change visibility (P95 of main thread blocks)`	`86` ms	`58` ms	`48.28%`	〰️
`categories tree 50k categories and excluded classes > validate changed visibility`	`7900` ms	`5525` ms	`42.99%`	🚨
`categories tree 50k categories and excluded classes > validate changed visibility (P95 of main thread blocks)`	`39` ms	`41` ms	`-4.88%`	〰️
`classifications tree 50k classifications search > get search paths`	`2380` ms	`2371` ms	`0.38%`	〰️
`classifications tree 50k classifications search > get search paths (P95 of main thread blocks)`	`240` ms	`193` ms	`24.35%`	〰️
`classifications tree 50k classifications search > load hierarchy from search paths`	`66008` ms	`62875` ms	`4.98%`	〰️
`classifications tree 50k classifications search > load hierarchy from search paths (P95 of main thread blocks)`	`0` ms	`23` ms	`-100%`	〰️
`classifications tree 50k classifications and excluded classes > collect nodes`	`36027` ms	`33276` ms	`8.27%`	〰️
`classifications tree 50k classifications and excluded classes > collect nodes (P95 of main thread blocks)`	`105` ms	`71` ms	`47.89%`	〰️
`classifications tree 50k classifications and excluded classes > validate initial visibility`	`2988` ms	`2774` ms	`7.71%`	〰️
`classifications tree 50k classifications and excluded classes > validate initial visibility (P95 of main thread blocks)`	`0` ms	`0` ms	`0%`	🟰
`classifications tree 50k classifications and excluded classes > change visibility`	`161` ms	`169` ms	`-4.73%`	〰️
`classifications tree 50k classifications and excluded classes > change visibility (P95 of main thread blocks)`	`22` ms	`0` ms	`2200%`	〰️
`classifications tree 50k classifications and excluded classes > validate changed visibility`	`3527` ms	`3364` ms	`4.85%`	〰️
`classifications tree 50k classifications and excluded classes > validate changed visibility (P95 of main thread blocks)`	`59` ms	`85` ms	`-30.59%`	〰️
`classifications tree 50k classifications and excluded classes > collect nodes`	`36526` ms	`33276` ms	`9.77%`	〰️
`classifications tree 50k classifications and excluded classes > collect nodes (P95 of main thread blocks)`	`65` ms	`71` ms	`-8.45%`	〰️
`classifications tree 50k classifications and excluded classes > validate initial visibility`	`2896` ms	`2774` ms	`4.40%`	〰️
`classifications tree 50k classifications and excluded classes > validate initial visibility (P95 of main thread blocks)`	`0` ms	`0` ms	`0%`	🟰
`classifications tree 50k classifications and excluded classes > change visibility`	`150` ms	`169` ms	`-11.24%`	〰️
`classifications tree 50k classifications and excluded classes > change visibility (P95 of main thread blocks)`	`22` ms	`0` ms	`2200%`	〰️
`classifications tree 50k classifications and excluded classes > validate changed visibility`	`3403` ms	`3364` ms	`1.16%`	〰️
`classifications tree 50k classifications and excluded classes > validate changed visibility (P95 of main thread blocks)`	`54` ms	`85` ms	`-36.47%`	〰️

This comment was automatically generated by workflow using github-action-benchmark.

Copilot

Pull request overview

This PR continues the tree-widget migration from StrataKit “bricks/foundations” components to MUI (and @stratakit/mui), updating both runtime UI code and the surrounding tooling/dependency graph to align with the newer presentation/unified-selection alpha versions.

Changes:

Replace many @stratakit/bricks UI components with @mui/material equivalents and switch Icon/Root usage to @stratakit/mui.
Update dependency versions (presentation alpha packages, @stratakit/*, add @mui/utils) and workspace settings to support the migration.
Normalize EC class name strings in tests/utilities from schema:Class to schema.Class.

Reviewed changes

Copilot reviewed 37 out of 89 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
pnpm-workspace.yaml	Adds `minimumReleaseAgeExclude` entries for specific alpha packages.
packages/tree-widget/vitest.config.ts	Adjusts `optimizeDeps` for the component browser tests.
packages/tree-widget/tsconfig.json	Adds StrataKit MUI type inclusion to compiler options.
packages/tree-widget/src/tree-widget-react/TreeWidgetUiItemsProvider.tsx	Switches `Icon` import to `@stratakit/mui`.
packages/tree-widget/src/tree-widget-react/TreeWidgetComponentImpl.tsx	Migrates `Skeleton` usage to MUI and updates skeleton rendering.
packages/tree-widget/src/tree-widget-react/trees/models-tree/ModelsTreeIcon.tsx	Switches `Icon` import to `@stratakit/mui`.
packages/tree-widget/src/tree-widget-react/trees/models-tree/ModelsTreeComponent.tsx	Migrates `Skeleton` usage to MUI and updates placeholder sizing.
packages/tree-widget/src/tree-widget-react/trees/models-tree/ModelsTreeButtons.tsx	Migrates header buttons to MUI `IconButton`/`ToggleButton` + `Tooltip`.
packages/tree-widget/src/tree-widget-react/trees/imodel-content-tree/IModelContentTree.tsx	Switches `Icon` import to `@stratakit/mui`.
packages/tree-widget/src/tree-widget-react/trees/external-sources-tree/ExternalSourcesTree.tsx	Switches `Icon` import to `@stratakit/mui`.
packages/tree-widget/src/tree-widget-react/trees/classifications-tree/ClassificationsTreeIcon.tsx	Switches `Icon` import to `@stratakit/mui`.
packages/tree-widget/src/tree-widget-react/trees/categories-tree/CategoriesTreeIcon.tsx	Switches `Icon` import to `@stratakit/mui`.
packages/tree-widget/src/tree-widget-react/trees/categories-tree/CategoriesTreeComponent.tsx	Migrates `Skeleton` usage to MUI and updates placeholder sizing.
packages/tree-widget/src/tree-widget-react/trees/categories-tree/CategoriesTreeButtons.tsx	Migrates header buttons to MUI `IconButton` + `Tooltip`.
packages/tree-widget/src/tree-widget-react/tree-header/WidgetHeader.tsx	Migrates select + skeleton UI to MUI (`NativeSelect`, `Skeleton`).
packages/tree-widget/src/tree-widget-react/tree-header/WidgetHeader.css	Refactors header CSS scoping/layout.
packages/tree-widget/src/tree-widget-react/tree-header/SelectableTree.tsx	Migrates `Divider` to MUI.
packages/tree-widget/src/tree-widget-react/tree-header/SearchBox.tsx	Migrates search UI to MUI (`TextField`, `IconButton`, `Tooltip`).
packages/tree-widget/src/tree-widget-react/tree-header/ErrorState.tsx	Migrates error UI to MUI (`Button`, `Typography`) + `@stratakit/mui` icon.
packages/tree-widget/src/tree-widget-react/shared/internal/hooks/UseHierarchyFiltering.tsx	Replaces `Spinner` with MUI `CircularProgress`.
packages/tree-widget/src/tree-widget-react/shared/components/TreeNodeVisibilityButton.tsx	Minor refactor in disabled/hidden action rendering.
packages/tree-widget/src/tree-widget-react/shared/components/SkeletonTree.tsx	Migrates skeleton + visually-hidden text to MUI patterns and adds `role="status"`.
packages/tree-widget/src/tree-widget-react/shared/components/SkeletonTree.css	Adjusts skeleton row layout sizing.
packages/tree-widget/src/tree-widget-react/shared/components/ProgressOverlay.tsx	Migrates progress UI to MUI `LinearProgress` + visually-hidden text.
packages/tree-widget/src/tree-widget-react/shared/components/EmptyTree.tsx	Migrates empty-state UI to MUI (`Typography`, `Link`) + `@stratakit/mui` icon.
packages/tree-widget/src/test/shared/Utils.test.ts	Updates test class name format to dotted notation.
packages/tree-widget/src/test/components/RenderUtils.tsx	Switches test wrapper `Root` import to `@stratakit/mui` and adjusts props.
packages/tree-widget/pnpm-lock.yaml	Updates lockfile for dependency/version changes.
packages/tree-widget/package.json	Drops `@stratakit/bricks`/`foundations`, bumps `@stratakit/mui`, adds `@mui/utils`, updates presentation/unified-selection alphas.
packages/test-utilities/pnpm-lock.yaml	Updates lockfile for `@itwin/presentation-shared` alpha bump and transitive deps.
packages/test-utilities/package.json	Bumps `@itwin/presentation-shared` alpha version.
apps/test-viewer/vite.config.mts	Extends Vite `resolve.dedupe` to include `@stratakit/foundations` to avoid context duplication.
apps/test-viewer/src/components/LayersWidget.tsx	Migrates `Chip` to MUI and `Icon` to `@stratakit/mui`.
apps/test-viewer/package.json	Aligns presentation alpha deps and bumps `@stratakit/*` versions.
apps/performance-tests/src/tree-widget/VisibilityUtilities.ts	Updates class name format to dotted notation.
apps/performance-tests/src/tree-widget/ModelsTree.test.tsx	Updates class name format to dotted notation.
apps/performance-tests/package.json	Aligns presentation alpha deps and removes direct StrataKit bricks/foundations deps.
apps/learning-snippets/src/test/tree-widget/TestUtils.tsx	Switches test wrapper `Root` import to `@stratakit/mui` and updates docs/comments.
apps/learning-snippets/package.json	Aligns presentation alpha deps and bumps `@stratakit/mui`.

Files not reviewed (1)

packages/test-utilities/pnpm-lock.yaml: Generated file

Suppressed comments (7)

packages/tree-widget/src/tree-widget-react/trees/models-tree/ModelsTreeButtons.tsx:250

@mui/material/ToggleButton doesn't have a label prop. Use aria-label (or a Tooltip) to provide the accessible label.
packages/tree-widget/src/tree-widget-react/trees/models-tree/ModelsTreeButtons.tsx:269
@mui/material/ToggleButton doesn't support a label prop. Use aria-label so the control remains accessible.
packages/tree-widget/src/tree-widget-react/trees/models-tree/ModelsTreeButtons.tsx:166
Same tooltip issue: MUI Tooltip doesn't activate on disabled buttons. Wrap the disabled IconButton in a <span> to keep the tooltip available.
packages/tree-widget/src/tree-widget-react/trees/models-tree/ModelsTreeButtons.tsx:200
Same tooltip issue: MUI Tooltip won't show when the child button is disabled. Consider wrapping the IconButton in a <span> so the tooltip still works when disabled.
packages/tree-widget/src/tree-widget-react/trees/categories-tree/CategoriesTreeButtons.tsx:163
Same issue here: MUI Tooltip won't activate for a disabled IconButton. Wrap the button in a <span> to keep the tooltip functional when disabled.
packages/tree-widget/src/tree-widget-react/trees/categories-tree/CategoriesTreeButtons.tsx:203
Same tooltip behavior: disabled MUI buttons don't trigger tooltips. Wrap the IconButton in a <span> so the tooltip still shows when disabled.
packages/tree-widget/src/tree-widget-react/shared/components/EmptyTree.tsx:81
MUI Link doesn't accept render={<button />}. Use component="button" (and type="button") to keep the intended semantics.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

-      active={is2dToggleActive}
-      icon={toggle2DSvg}
-    />
+    <ToggleButton value="toggle2d" size="small" label={label} onChange={onClick} disabled={models2d.length === 0} selected={is2dToggleActive}>


      <Delayed show={true}>
        {translate("filteringDialog.matchingInstancesCount", { instanceCount: "" })}
-        <Spinner size="small" />
+        <CircularProgress size="small" />


+    <Tooltip title={label}>
+      <IconButton size="small" aria-label={label} disabled={models.length === 0} onClick={() => void onClick()}>
+        <Icon href={visibilityShowSvg} />
+      </IconButton>
+    </Tooltip>


+    <Tooltip title={translate("categoriesTree.buttons.showAll.tooltip")}>
+      <IconButton
+        size="small"
+        aria-label={translate("categoriesTree.buttons.showAll.tooltip")}
+        disabled={categories.length === 0}
+        onClick={() => void onClick()}
+      >
+        <Icon href={visibilityShowSvg} />
+      </IconButton>
+    </Tooltip>


      {translate(`${base}.search.tooManyInstancesFocused`)}
-      <Anchor
+      <Link
+        render={<button />}


MartynasStrazdas added 6 commits July 27, 2026 12:01

initial

df2ed6d

fix skeleton not applying height

4fdc8cf

prettier

70578e6

e2e screenshots

1991274

Merge branch 'tree-widget/next' into mast/move-to-mui

9464277

merge fix

44699d2

MartynasStrazdas commented Jul 28, 2026

View reviewed changes

Comment thread apps/test-viewer/vite.config.mts

MartynasStrazdas added 2 commits August 6, 2026 11:40

Merge branch 'tree-widget/next' into mast/move-to-mui

553e748

update to hierarchies-react 2.0.0-alpha.64

5dd986a

github-actions Bot reviewed Aug 6, 2026

View reviewed changes

MartynasStrazdas added 8 commits August 6, 2026 14:04

adjustments

39663d8

prettier

fa5ef9c

update e2e snapshots and readd visuallyHidden

cddf250

test fixes

2b7206e

fix skeletons

e1679d6

change icons buttons with active interaction to toggle buttons

63faebf

revert back to using stratakit vars

c512879

prettier

4d4f968

MartynasStrazdas marked this pull request as ready for review August 8, 2026 11:58

Copilot AI lite review requested due to automatic review settings August 8, 2026 11:58

MartynasStrazdas requested review from a team as code owners August 8, 2026 11:58

Copilot started reviewing on behalf of MartynasStrazdas August 8, 2026 11:58 View session

Copilot AI reviewed Aug 8, 2026

View reviewed changes

Navigation Menu

Uh oh!

[Tree-widget]: move to MUI - #1748

[Tree-widget]: move to MUI#1748
MartynasStrazdas wants to merge 16 commits into
tree-widget/nextfrom
mast/move-to-mui

MartynasStrazdas commented Jul 27, 2026 •

edited

Loading

Uh oh!

Uh oh!

github-actions Bot left a comment •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

MartynasStrazdas commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

github-actions Bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Tree-Widget Next benchmark

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MartynasStrazdas commented Jul 27, 2026 •

edited

Loading

github-actions Bot left a comment •

edited

Loading