[Feature]: Peek overlay of entity and bindings

[kocharrahul7]

Is there an existing issue for this?

• [X] I have searched the existing issues

Summary

When hovering on an entity name (Widget, or action) in appsmith, it would be great if we peek into the value of the entity. For instance, while hovering on api1, I should be able to understand and access the values associated with API1. I should be able to see api1.data, the return type, and the info associated with it.

Handover file

https://zpl.io/o14Ww3Z

Why should this be worked on?

As a user, if I am looking at an app, and see bindings utils.data, I have no idea if utlis is a jsObject, or a query. I don't know the data which it is returning, and I don't know much about what it does. It would be a great way to peek into each variable and helps create visibility and understanding of what each binding is.

Questions and clarifications:

Question	Answer
Will we accommodate any copy and paste functionality	No. The user can select information from the overlay, and copy it if they require.
What information will we show	We will handle this in 2 parts: 1. We will show the information in the show bindings submenu 2. Detailed evaluations, the way retool does this
What will the text formatting look like	It will match the new designs. This will require an update on the design system, we will handle this, with approval from the DS pod
Will we have a grey background for users the way the evaluated value pane does?	No. We should update the evaluated value element in the design system to match the designs created by Aakash
When do we show the tooltip?	After a 200 ms delay of hover
Does this ever show at the same time as the evaluated value overlay?	No. when the peek overlay appears, the evaluated value overlay should be hidden, and when a user starts to type, this is in turn hidden
What are the dimensions of the overlay?	300px width, and a max height of 12, with a scroll bar as an overflow. If there are less than 12 lines, then the overlay should be shorter
What are the highlighting states of the entities?	When a user regular hovers on any entity which will have an overlay, we will highlight that entity in the blue colour defined in the designs. When the user hits cmd, IF the user can navigate to this entity, we will highlight it in yellow, as well as show an underline. Else, it will continue to be just a blue highlight.
What entities will be highlighted?	Just the currently selected entity. That is to say, if a user hovers writes API1.data, and hovers on API1, we will just highlight API1. If the user hovers on data, we will highlight just data

[hetunandu]

@aakashDesign Please add the final designs on this issue

[aakashDesign]

Zeplin - https://zpl.io/o14Ww3Z Prototype - https://www.figma.com/proto/JONVukYAizdmWwiZ7GoMGI/IDE---Context-Switching?page-id=1992%3A102628&node-id=3332%3A135234&viewport=333%2C-320%2C0.12&scaling=min-zoom&starting-point-node-id=3332%3A135234

[eco-monk]

• [x] handle hover interaction in code editor - 3 (chaining hover style: Api1, Api1.data)
• [x] get hoverable entities list - 2
• [x] get evaluated value for binding and use it in tooltips - 1
• [x] write cypress tests - 2

---

Can be taken later:

• [ ] design system (scope out current use cases for ReactJson component) (primitive types, arrays, objects, undefined) add json view component with style configurations - 4
• [ ] design system add stories for component - 1
• [ ] update existing json views (evaluated values) with design system component - 1

[eco-monk]

Discussed last week during a IDE weekly meet: Need to close evaluated value pop-up whenever overlay is active.

(sorry for posting late, I forgot to update this) cc: @kocharrahul7

[eco-monk]

Progress so far last week:

• Spent around 3 days and did a POC https://theappsmith.slack.com/archives/C02JT9CSE6L/p1674130598706449 (need to handle hover event in codemirror since this is not natively supported)

[eco-monk]

https://mac-s-g.github.io/react-json-view/demo/dist/ We use rjv-default theme for the coloring

cc: @shwetha-ramesh