[feat] Add page structure explorer #2246

bharatkashyap · 2023-06-30T09:50:01Z

Closes Page structure explorer #490

pageStructure.mov

I've read and followed the contributing guide on how to create great pull requests.
I've updated the relevant documentation for any new or updated feature
I've linked relevant GitHub issue with "Closes #"
I've added a visual demonstration under the form of a screenshot or video

Janpot · 2023-06-30T09:54:17Z

test/integration/backend-basic/fixture/toolpad/pages/serialization/page.yml

@@ -46,3 +46,27 @@ spec:
 value:
 $$jsExpression: |
 `Invalid error: ${invalidError.error?.message}`
+ - component: PageRow


Accidentally committed?

Janpot · 2023-07-03T08:35:14Z

Very nice, a few things I noticed while trying it out.

Something seems to go wrong with the hover state after renaming:

Screen.Recording.2023-07-03.at.10.32.34.mov

Would it be hard to integration test?
Do you think it's time we start using TreeView for this UI? I feel like it would create denser UI.
Should we add some sort of section title above that says "explorer"?

apedroferreira · 2023-07-03T15:54:16Z

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeHud.tsx

@@ -167,6 +169,7 @@ export default function NodeHud({
 onDuplicate,
 isOutlineVisible = false,
 isHoverable = true,
+ isHovered = false,


Since the dashed border doesn't really just mean the element is "hovered" anymore we might want to give this prop a different name just to avoid confusion. Maybe isPreviewed? Not sure, also not a super big deal.
I understand this would have to change the wording in a lot of places now.

I think isHovered captures the state still, since the user is "hovering" over the element albeit inside the structure explorer, so an indirect form of hovering.

Ok, I think it's fine to keep it.

apedroferreira

Looks awesome and works great! Just noticed a couple of issues:

When I drag-and-drop to create a column the whole row that contains it collapses in the panel
It's not possible yet to press backspace to delete after selecting a row or column in the explorer, but I feel like it would be a really useful feature

prakhargupta1 · 2023-07-05T09:15:41Z

Do you think it's time we start using TreeView for this UI? I feel like it would create denser UI.

Should we add some sort of section title above that says "explorer"?

Looks good! +1 for both of these suggestions:

bharatkashyap · 2023-07-12T21:15:41Z

I've updated to address most of the feedback here:

pageStructure.mov

@apedroferreira I've added an implementation of deleting via the explorer which plays the most nicely with undoing, does this make sense to you or are there any other ways of achieving this?

apedroferreira · 2023-07-13T16:41:15Z

packages/toolpad-app/src/toolpad/AppEditor/StructureExplorer/index.tsx

+ return draft;
+ // return normalizePageRowColumnSizes(draft);
+ },
+ currentView.kind === 'page'


I wonder if we can get rid of these currentView.kind === 'page' as I think these actions can only occur in a page view? But I may have forgotten why I added these checks in the other similar deletes...

I think it's for the types, in which case I can probably replace these conditionals with
...(currentView as Extract<DomView, { kind: 'page' }>),

apedroferreira · 2023-07-13T16:43:32Z

packages/toolpad-app/src/toolpad/AppEditor/StructureExplorer/index.tsx

+ (event: React.KeyboardEvent<HTMLUListElement>) => {
+ // delete selected node if event.key is Backspace
+ if (event.key === 'Backspace') {
+ appStateApi.update(


Seems like the correct logic, except we do may need to normalize the page row column sizes after deleting as done in the other places...
And now that this logic goes beyond just the RenderOverlay component, we should move all of this (deleteing node + deleting orphaned nodes + normalizing column sizes) to somewhere where we can reuse it more agnostically, not sure if that's easy or not.

And now that this logic goes beyond just the RenderOverlay component, we should move all of this (deleteing node + deleting orphaned nodes + normalizing column sizes) to somewhere where we can reuse it more

I've added some changes to try and accomplish this, have a look

apedroferreira · 2023-07-13T16:44:53Z

packages/toolpad-app/src/toolpad/AppEditor/StructureExplorer/index.tsx

+ onNodeSelect={handleNodeSelect}
+ onNodeFocus={handleNodeFocus}
+ onNodeToggle={handleNodeToggle}
+ onKeyDown={handleNodeDelete}


I would separate onKeyDown to something like handleKeyDown, and there if backspace is pressed call a reusable delete function.
That way for example if we allow deleting in the explorer by clicking a button we just have to use the same function that is already there.

apedroferreira · 2023-07-13T16:48:48Z

packages/toolpad-app/src/toolpad/AppEditor/StructureExplorer/index.tsx

+ if (event.key === 'Backspace') {
+ appStateApi.update(
+ (draft) => {
+ if (!selectedDomNodeId) {


Can you check for if there is a selected node outside of appStateApi.update? That way we don't add a new entry to the undo stack, I think.

apedroferreira

Looks good, just added comments on some minor things but still everything is working great!

prakhargupta1 · 2023-07-13T17:15:10Z

Just played with it, gives so much clarity about the page hierarchy now. Awesome UX! 🙌

apedroferreira

Awesome work Bharat, looks really great! Thanks a lot for addressing these!
I still had some thoughts and possible suggestions but I don't think any of them should be that blocking, it's very minor stuff, so I will approve already.
Maybe a small refactor of deleteNode would be the most important one to me!

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx

packages/toolpad-app/src/toolpad/AppEditor/utils/deleteNode.ts

packages/toolpad-app/src/toolpad/AppEditor/utils/normalizePageRowColumnSizes.ts

This reverts commit 964cc01.

This reverts commit 34ad45c.

bharatkashyap · 2023-07-18T08:31:00Z

@apedroferreira Resolving the comments related to the common delete function extraction since we agreed on a different approach involving refactoring the existing delete

apedroferreira · 2023-07-18T11:35:19Z

@apedroferreira Resolving the comments related to the common delete function extraction since we agreed on a different approach involving refactoring the existing delete

Ok, sounds good!

Janpot

Let's go!

bharatkashyap added 4 commits June 28, 2023 20:25

WIP page structure explorer

8ab8842

WIP add page structure explorer

26b3132

v1 page structure explorer

f37f538

don't crash on renderItem node

aeedf77

bharatkashyap added design: ui Design design: ux Design feature: App Editor labels Jun 30, 2023

Merge branch 'master' into page-tree-view

f7b6dfa

bharatkashyap changed the title ~~[feat] [wip] Add page structure explorer~~ [feat] Add page structure explorer Jun 30, 2023

Janpot reviewed Jun 30, 2023

View reviewed changes

apedroferreira reviewed Jul 3, 2023

View reviewed changes

apedroferreira requested changes Jul 3, 2023

View reviewed changes

bharatkashyap added 3 commits July 9, 2023 14:15

Merge branch 'master' into page-tree-view

46b0059

Fix: Make side panel leaner

587d5b3

Fix: better nested element expansion, delete on backspace

108ff97

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 12, 2023

Merge branch 'master' of github.com:mui/mui-toolpad into page-tree-view

b76a300

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 12, 2023

Fix: accidental commit

72a8f2b

apedroferreira reviewed Jul 13, 2023

View reviewed changes

apedroferreira requested changes Jul 13, 2023

View reviewed changes

bharatkashyap added 2 commits July 14, 2023 07:36

[WIP] Extract normalize function

964cc01

Fix: Remove unnecessary ternary through type check

aad5904

bharatkashyap added 3 commits July 14, 2023 09:55

Extract delete functions for reusability

34ad45c

Merge branch 'master' of github.com:mui/mui-toolpad into page-tree-view

ae60aa1

Merge branch 'master' into page-tree-view

f3d2109

apedroferreira approved these changes Jul 14, 2023

View reviewed changes

bharatkashyap added 5 commits July 18, 2023 11:55

Revert "[WIP] Extract normalize function"

37e3691

This reverts commit 964cc01.

Revert "Extract delete functions for reusability"

02fa34e

This reverts commit 34ad45c.

only make call to appStateApi, parallel effort ongoing

b37715b

Merge branch 'master' of github.com:mui/mui-toolpad into page-tree-view

f1b5705

fix: better scrollbars

19dafdd

bharatkashyap added 2 commits July 19, 2023 12:45

Merge branch 'master' into page-tree-view

e634a33

Merge branch 'master' of github.com:mui/mui-toolpad into page-tree-view

3191ae2

bharatkashyap requested a review from Janpot July 19, 2023 20:28

Janpot approved these changes Jul 20, 2023

View reviewed changes

bharatkashyap added 3 commits July 21, 2023 03:13

Merge branch 'master' into page-tree-view

b2badeb

Merge branch 'master' into page-tree-view

078a4d8

Merge branch 'master' into page-tree-view

5ce4365

bharatkashyap merged commit a701954 into mui:master Jul 22, 2023
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[feat] Add page structure explorer #2246

[feat] Add page structure explorer #2246

bharatkashyap commented Jun 30, 2023 •

edited

Loading

Janpot Jun 30, 2023

Janpot commented Jul 3, 2023 •

edited

Loading

apedroferreira Jul 3, 2023 •

edited

Loading

bharatkashyap Jul 11, 2023

apedroferreira Jul 11, 2023

apedroferreira left a comment

prakhargupta1 commented Jul 5, 2023

bharatkashyap commented Jul 12, 2023 •

edited

Loading

apedroferreira Jul 13, 2023

bharatkashyap Jul 14, 2023

apedroferreira Jul 13, 2023 •

edited

Loading

bharatkashyap Jul 14, 2023 •

edited

Loading

apedroferreira Jul 13, 2023 •

edited

Loading

apedroferreira Jul 13, 2023

apedroferreira left a comment

prakhargupta1 commented Jul 13, 2023

apedroferreira left a comment

bharatkashyap commented Jul 18, 2023

apedroferreira commented Jul 18, 2023

Janpot left a comment

[feat] Add page structure explorer #2246

[feat] Add page structure explorer #2246

Conversation

bharatkashyap commented Jun 30, 2023 • edited Loading

Janpot Jun 30, 2023

Choose a reason for hiding this comment

Janpot commented Jul 3, 2023 • edited Loading

apedroferreira Jul 3, 2023 • edited Loading

Choose a reason for hiding this comment

bharatkashyap Jul 11, 2023

Choose a reason for hiding this comment

apedroferreira Jul 11, 2023

Choose a reason for hiding this comment

apedroferreira left a comment

Choose a reason for hiding this comment

prakhargupta1 commented Jul 5, 2023

bharatkashyap commented Jul 12, 2023 • edited Loading

apedroferreira Jul 13, 2023

Choose a reason for hiding this comment

bharatkashyap Jul 14, 2023

Choose a reason for hiding this comment

apedroferreira Jul 13, 2023 • edited Loading

Choose a reason for hiding this comment

bharatkashyap Jul 14, 2023 • edited Loading

Choose a reason for hiding this comment

apedroferreira Jul 13, 2023 • edited Loading

Choose a reason for hiding this comment

apedroferreira Jul 13, 2023

Choose a reason for hiding this comment

apedroferreira left a comment

Choose a reason for hiding this comment

prakhargupta1 commented Jul 13, 2023

apedroferreira left a comment

Choose a reason for hiding this comment

bharatkashyap commented Jul 18, 2023

apedroferreira commented Jul 18, 2023

Janpot left a comment

Choose a reason for hiding this comment

bharatkashyap commented Jun 30, 2023 •

edited

Loading

Janpot commented Jul 3, 2023 •

edited

Loading

apedroferreira Jul 3, 2023 •

edited

Loading

bharatkashyap commented Jul 12, 2023 •

edited

Loading

apedroferreira Jul 13, 2023 •

edited

Loading

bharatkashyap Jul 14, 2023 •

edited

Loading

apedroferreira Jul 13, 2023 •

edited

Loading