Issues with the page hierarchy explorer

[Janpot]

TODO:

P2:

• [ ] It doesn't always select the item (see video)

P3:

• [ ] When I double click an item it goes editable, then selects all the text of the input. If I immediately select another item after that it keeps that text selected.
• [ ] Scroll to an element in the canvas when selected in the explorer
• [ ] Add custom icon for Custom Components
  • Start with the same icon for every custom component. This would be the default icon once we allow setting a custom one.
  • We could implement this for ourselves, allow setting the icon in the createComponent config https://github.com/mui/mui-toolpad/issues/2384
• [ ] It doesn't show the right names in case of a list component. I added 2 list items then removed one but the names are explorer didn't update (see video).

FIxed in #2397

• [x] hovering over page rows doesn't highlight them
• [x] the title "components" is very ambiguous. Components for me are like templates, they are blueprints. When they're instantiated on the page I prefer to talk about nodes, or elements.
• [x] The hierarchy explorer doesn't scroll when there is more content than space. I also seem to be unable to resize it to 0 height.

https://github.com/mui/mui-toolpad/assets/2109932/89208dd8-5a26-43ec-9927-36651b9b380a

https://github.com/mui/mui-toolpad/assets/2109932/ec357dbd-dfc1-4bd3-9fcb-cffcf3a2b3a4

https://github.com/mui/mui-toolpad/assets/92228082/06acd7e3-ad3e-4b8b-a124-9df9f0fad3ea

[bharatkashyap]

@Janpot Is there any additional information you could share? Context/Browser/error messages in the console? I can't replicate 1. without those.

https://github.com/mui/mui-toolpad/assets/19550456/2b9e58fb-2d79-430f-b40b-7239b293c1b3

[Janpot]

Yes, it seems to happen when I click the text itself, or the vertical center in the whitespace left of the text, basically anything in this area:

When I click on the icon or the padding it always selects

[Janpot]

I also updated the issue with 4. and 5. that I ran into.

[bharatkashyap]

On 3., "Components" makes sense to me given that :

• We call the catalog which contains them the "Component Library"

• Benchmarking:

Appsmith	Dynaboard	Retool

The title of the section that shows the tree is the same as the entity which you drag on to the page - So "add new widget" translates to a "Widgets" explorer; similar for Retool and Dynaboard

• Adding a new term for a component when instantiated on the page seems like an unnecessary complication

[Janpot]

• Adding a new term for a component when instantiated on the page seems like an unnecessary complication

The distinction between "template" and "instance" is a very natural one for programmers:

• a class vs. an object
• a React component vs. a jsx element

[bharatkashyap]

• Adding a new term for a component when instantiated on the page seems like an unnecessary complication

The distinction between "template" and "instance" is a very natural one for programmers:

• a class vs. an object
• a React component vs. a jsx element

• Updated the title to say "Page Hierarchy"

[prakhargupta1]

A code component currently comes without any icon, let's use the icon that we are using in the Component library.