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 Allow setting a custom icon for code components #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

• hovering over page rows doesn't highlight them
• 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.
• 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.

Screen.Recording.2023-07-25.at.09.42.42.mov

Screen.Recording.2023-07-25.at.10.45.30.mov

List-page-heirarchy.mov

[bharatkashyap]

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

Screen.Recording.2023-07-25.at.1.47.36.PM.mov

[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.