Commit Graph

7 Commits

Author SHA1 Message Date
Luke De Feo
74247ee721 Remove react complex tree
Reviewed By: lblasa

Differential Revision: D41875029

fbshipit-source-id: 2af58610fe0d0f644aa8450a4210fd52f8ed4db6
2022-12-12 07:28:37 -08:00
Luke De Feo
f34b6f52ed The ui debugger grows up
Reviewed By: lblasa

Differential Revision: D41549291

fbshipit-source-id: d3c72c01f6b7bd2a3be8a35d5f54270b64191e21
2022-11-28 05:09:20 -08:00
Luke De Feo
062e87f50f Use mouse position for hit test for 2D vizualizer
Summary:
The Dom events for the divs that are very close together were not firing correctly causing the old implementation to not track the hovered node correctly. This was really frustrating trying to select a node amongst many close neighbours.

The new approach uses the mouse x,y position and performs a hit test. Currently we do a dfs looking for the first deepest child that interests the mouse x,y. In a future diff we will extract a list when there are multiple candidates.

Hovered node was removed from react props since both the tree and visualisor depend on it meaning when hover state changes the whole app is rerendered. Instead we have moved hover state to an atom which is subscribed to by each visualsation node. Only if the old or new value matches the particular nodes id do we set state. The viz nodes were memo'd to prevent children renderning. The result is that for a hover change at most 2 nodes out of the 500 or so will rerender.

I attempted to do the same with the tree but it wasnt working with the controlled tree environment + focus state. The perf seems fine as is so will leave it for now

Reviewed By: lblasa

Differential Revision: D41218324

fbshipit-source-id: 7f80bcee256abad2689a88d7e209f92417aab672
2022-11-14 07:05:58 -08:00
Luke De Feo
f282a5eb8a Ant tree -> React complex tree
Summary:
Upgraded from ant tree library to the much more capable React complex tree. Added the following:
1. Ability to expand / collapse nodes while automatically expanding / collapsing active/inactive children when they change
2. Keyboard controls of tree all the time
3. Basic search functionality
4. Selecting node in tree focuses and scrolls in the tree
5. Hover state for tree

Reviewed By: lblasa

Differential Revision: D40633876

fbshipit-source-id: 8dcef5ec2c277e476a3eb3cdaef62b15c25323c0
2022-10-25 07:10:38 -07:00
Lorenzo Blasa
bb3b1cecef Simple antd types for each inspectable type
Summary:
Replace draft inspectors with read-only components.

This is a first step into having a richer UI. At the moment, these are read-only components but will likely be extended in the future as to allow editing of values.

Reviewed By: LukeDefeo

Differential Revision: D40345016

fbshipit-source-id: a6aef5861474b4aa8353c00ef257ab17b4cff00e
2022-10-25 03:09:00 -07:00
Luke De Feo
41068d1c90 Native UI scan
Summary: Added scheduler to scan the Native UI every 500 ms to test, Also added instrumentation in a separate event with the timings of each stage visualised in a Data table on desktop which can be accessed with ctrl+I. Currently this instrumentation event is sent every time but it could be a config option controlled from the desktop in the future

Reviewed By: lblasa

Differential Revision: D39205313

fbshipit-source-id: ca034171db6b062396b4ef28028aaa663c4d852a
2022-09-07 04:37:17 -07:00
Luke De Feo
f1e80b18b1 Basic desktop plugin
Summary:
Scaffolded desktop UI for UI debugger
I changed getroot from an rpc call to an event sent on connect. The root should never change as its the application object.

Reviewed By: lblasa

Differential Revision: D38866008

fbshipit-source-id: ca0f1908bedb643238f11ed796922e3359619167
2022-08-22 03:02:53 -07:00