Commit Graph

69 Commits

Author SHA1 Message Date
Luke De Feo
b184500d94 New sidebar design 1/n
Summary: Added basic infra basic types

Reviewed By: lblasa

Differential Revision: D50595985

fbshipit-source-id: 48ebd74bd8ccebdd8a6d69dbda344b8d831dc04f
2023-10-26 05:24:30 -07:00
Lorenzo Blasa
c1b0d9d753 Export node as JSON
Summary:
There has been multiple requests to incorporate an export to plain text functionality for a while.

This diff adds it.

It will export a node and optionally its chidren as JSON.

Reviewed By: antonk52

Differential Revision: D49596476

fbshipit-source-id: 3681bc0c2d02e1ea64ff589e0e272f6d54ad0524
2023-09-25 08:44:37 -07:00
Luke De Feo
b336ed38fa Update context menu for new ant design api
Summary:
Mostly mechanical change from jsx to object based api. However some changes:

1. Managed to get rid of UIDebugger context menu item. its now possible to listen to when any context menu is clicked

2. The construction code is cleaner. no more mutable arrary and pushing, its just a big spliced literal

3. Had to change how the ide function worked. It is  dynamic and used react query hook to update the number of items. Added a callback to recreate this behaviour.

Reviewed By: aigoncharov

Differential Revision: D48910165

fbshipit-source-id: 9a71f5ecd302e6ff72194f83a13839f78e9b0796
2023-09-04 02:19:53 -07:00
Luke De Feo
7d9744b8ff Improve framework event filtering
Summary: Now when entering framework event table from a tree root we filter that so you can see all tree events. Also we use exact matches to avoid and nasty substring bugs

Reviewed By: lblasa

Differential Revision: D48560169

fbshipit-source-id: 1df375a2b8c5035003d82c210b55adebda8bd4ec
2023-08-23 01:51:31 -07:00
Luke De Feo
206ef79cf9 Improve table view
Summary:
added component name, root component name, duration, event type and better names

changelog: UIDebugger - added event debugger table view and side panel views

Reviewed By: lblasa

Differential Revision: D48559367

fbshipit-source-id: d357ecf654b4e443eac7673731a8be542e76dd48
2023-08-23 01:51:31 -07:00
Luke De Feo
22d1bc2552 Allow exploring all events in table view
Summary: This lets you debug when events go off screen

Reviewed By: lblasa

Differential Revision: D48395787

fbshipit-source-id: 51a6eb74fa0f61c34f25e86a6ee40bf5969379ee
2023-08-21 04:24:16 -07:00
Luke De Feo
d5814ea17c Use bottom panel as detail view for framework events
Summary: Now when you click on an event the bottom bar appears automatically showing you every thing you need

Reviewed By: lblasa

Differential Revision: D48318694

fbshipit-source-id: 6505e439d949941dc0e091b9576d7d1321d8a05f
2023-08-21 04:24:16 -07:00
Luke De Feo
4912b3f47e Fix bottom panel and make it resizable
Summary: The bottom panel got broken during the virtualisation+ panel refactor, we need to tell the tree how much height is taken by the panel so it can size itself accordingly.

Reviewed By: lblasa

Differential Revision: D48313766

fbshipit-source-id: 849886101eb0869cc068fd0ad6dc1d053233043e
2023-08-21 04:24:16 -07:00
Luke De Feo
94114eb821 Add tree id
Summary:
Added new tree id to the framework event. Its currently optional.

The tree id is the parent component tree / tree manager this tree belongs to, this is so we can view all tree events at once in the table.

We ony show the context menu item when we have the tree root tag which is set for component tree only at this point. We can add for blok and ios later

Reviewed By: lblasa

Differential Revision: D48268120

fbshipit-source-id: 3dee06309b146a0392ca32fbb5e8231883b8439a
2023-08-21 04:24:16 -07:00
Luke De Feo
f854e9f3f3 rename controls to tree controls and consistent button style
Reviewed By: mweststrate

Differential Revision: D47672437

fbshipit-source-id: 5ce237cfd300a481450411a0242410e01bcc5411
2023-07-26 03:22:38 -07:00
Luke De Feo
bf74877ff5 Move visualiser into folder pre split
Reviewed By: mweststrate

Differential Revision: D47664272

fbshipit-source-id: 7cc22b272b9298837d45976996d0197d5e5550f0
2023-07-26 03:22:38 -07:00
Luke De Feo
272d2d2106 Redesign Split Tree and visualiser into panels
Summary: This looks a lot neater and allows us to have separate dedicated visualiser header

Reviewed By: mweststrate

Differential Revision: D47626867

fbshipit-source-id: 843721853e0ff88837afbb9bf3f510a908160d12
2023-07-26 03:22:38 -07:00
Luke De Feo
2655ea8523 UIDRefactor 6/n Move tree into folder
Summary: preparing to split this up a bit

Reviewed By: lblasa

Differential Revision: D47548840

fbshipit-source-id: 907b9cd6a7a044e4aad97f9755fd9b43b81768f1
2023-07-21 07:17:31 -07:00
Luke De Feo
87a1b657c3 UID Refactor 3/n UINode -> ClientNode
Summary:
UINode has never been a good name, we have 3 versions of a node.
ClientNode Previously UINode (the raw data from the client)
NestedNode (for the visualiser)
TreeNode (extends ClientNode and adds stuff specific to the tree like indentation and expanded states)

Arguablely we dont need nested node but that is another story

Reviewed By: elboman

Differential Revision: D47547529

fbshipit-source-id: 9a3b119d1230ea7b6734e7a3270c28287b04faf1
2023-07-21 07:17:31 -07:00
Luke De Feo
f181551ce6 UID refactor 2/n Split types into client and desktop types
Summary: This file was getting overwelhming, and this seemed like a reasonable way to split it

Reviewed By: elboman

Differential Revision: D47547532

fbshipit-source-id: ab2bfa22daabbed13ec1445da0cf8ba88bda12d7
2023-07-21 07:17:31 -07:00
Luke De Feo
2cc0ca0167 UID Refactor 1/n move to utils
Summary: Lets start adding some organisation to the folder structure

Reviewed By: lblasa

Differential Revision: D47547530

fbshipit-source-id: 30d20340ccc4b1c3ab4d4712c807831d74028322
2023-07-21 07:17:31 -07:00
Luke De Feo
4df0ad4d35 Add Framework event table
Summary: Very basic framework events table, quite useful for debugging will add more to this soon

Reviewed By: lblasa

Differential Revision: D47520035

fbshipit-source-id: 10f4572dd4ed3529324f03a969773c7e91fde030
2023-07-21 07:17:31 -07:00
Luke De Feo
5ef37684eb Report framework events in diagnostics
Reviewed By: lblasa

Differential Revision: D47520032

fbshipit-source-id: c88f57f3a9c81e32c8c4c3ac46f523407bd44463
2023-07-19 08:58:20 -07:00
Luke De Feo
993413c5f2 Prefetch IDE resolve query
Summary:
To avoid showing the Ugly spinner in the context menu as well as a better UX we prefetch the IDE resolved path. It was important to limit the concurrency of the running arc jobs otherwise lots of bad things happen and the whole machine stalls out.

The general idea is as the frame comes off the wire we send them to react query to prefetch. by setting the cache time sending the same key twice will not result in 2 fetches, so we dont need to worry about deduplication on our side

Reviewed By: antonk52

Differential Revision: D47210292

fbshipit-source-id: 4a1d8efdfae754c1a73c6a868b02d1f3a0a5b567
2023-07-10 09:22:39 -07:00
Luke De Feo
c067346870 Add more diagnostics
Summary: node count and root node prescense will be very useful

Reviewed By: lblasa

Differential Revision: D47153394

fbshipit-source-id: 067f6f3aefa17cdfa88124956781400f53fe08d7
2023-06-30 08:17:46 -07:00
Luke De Feo
fcfbc352ba Add more diagnostic info to perf stats page
Summary: This will hopefully be useful for prod debugging where we have users with no data,

Reviewed By: lblasa

Differential Revision: D47053328

fbshipit-source-id: 37ecce885ebd93bf2ffdd67cf49cf33255dda429
2023-06-27 04:06:17 -07:00
Luke De Feo
ae5dd80d67 Allow user to reset ui debugger after fatal error
Summary: Previously there was no way to get of this state

Reviewed By: aigoncharov

Differential Revision: D46803900

fbshipit-source-id: 2eb0eb41b58064659ef1d2cff245a2b8d7e2f261
2023-06-19 05:06:52 -07:00
Luke De Feo
f9bbc967ea Fix visualiser after virtualisation
Summary: There was an issue with cropping introduce by virtualisation and the position of the scroll view in the hierachy. Its a bit fragile but it works now.

Reviewed By: lblasa

Differential Revision: D46761831

fbshipit-source-id: ce001c6f4fe7ddc111edf0098f75a1273c84472d
2023-06-19 05:06:52 -07:00
Luke De Feo
13c589724b Dont show layout tab for android
Summary: Feedback from michel, It is always empty for android  so dont show it

Reviewed By: elboman

Differential Revision: D46152985

fbshipit-source-id: 6c4f1d499ddb8916fdae6015cd57e158a0c1f182
2023-06-14 03:27:23 -07:00
Luke De Feo
0f9eeda2dd Remove ctrl to stop drawing children
Summary: This feature is annoying and useless

Reviewed By: antonk52

Differential Revision: D45696921

fbshipit-source-id: 01c007d3e196a7511b940b7973bb8e6a880e27e5
2023-05-10 09:14:47 -07:00
Luke De Feo
c96535e15f Infrastructure for stream inteceptor transform metadata
Summary:
Hooked up metadata to the stream inteceptor, enhanced error handling to deal with:
1. Recording subsequent metadata messaages that came in while in error state such that all of them are processed
2. Recording any frames that came in while in error state such that after recovering from error we have the latest state
3. Splitting out recoverable and non recoverable errors more explicitly

Reviewed By: lblasa

Differential Revision: D45079137

fbshipit-source-id: 67a2ffef72d94d2b1492f201a2228659720e306b
2023-04-27 07:28:41 -07:00
Luke De Feo
fd673d0535 Infrastructure for stream interceptor transform nodes
Summary:
Added stream interecptor which gets a chance to augment the messages off the wire. Stream interceptor transformations are async and can fail  due to network errors so added error state with a retry button. The retry button will just call the function again.

I am also handling errors better generally when this method fails unexpectedly, logging more clearly what went wrong and communicating it to the user

Did some refactoring of subtree update event to support this

Reviewed By: lblasa

Differential Revision: D44415260

fbshipit-source-id: a5a5542b318775b641d53941808399a8fa4634d3
2023-04-27 07:28:41 -07:00
Lorenzo Blasa
985a9eda33 Fix Visualiser cropping issue
Summary:
An issue was reported for the visualiser whereas there seemed to be some cropping taking place on the right hand side.

https://pxl.cl/2BhPT

The issue was the resizable panel and visualiser both were set with the same width.

The resizable panel was set as to have a gutter which was not taken into consideration, add this width to the panel width and that fixes the issue.

Also change box sizing model as to not affect the dimensions of the wireframe.

Reviewed By: LukeDefeo

Differential Revision: D44664377

fbshipit-source-id: e640af2090f7c3378e624626fe3ea5df631caa11
2023-04-04 22:10:39 -07:00
Lorenzo Blasa
8f5fcf9444 FrameworkEventsInspector
Summary:
As events get bigger, this change includes the following:
- Dedicated event inspector
- Stacktrace viewer for events with stacktrace attribution
- Stacktrace viewer is displayed within a new BottomPanel. BottomPanel can display any React component and can be reused in the future in different use cases.

Reviewed By: LukeDefeo

Differential Revision: D44628768

fbshipit-source-id: 71a9ef87e71c9a17f58c2544a1aa356eed14ed27
2023-04-04 05:54:42 -07:00
Lorenzo Blasa
4d5bf8084b Remove feedback request
Summary: It has served its purpose, remove.

Reviewed By: LukeDefeo

Differential Revision: D43769239

fbshipit-source-id: 36fb575b15fe9d092c7728a56b735ff98ff78608
2023-03-03 07:33:24 -08:00
Luke De Feo
f12d8221d6 Fixed issue where visualiser would crop bottom few pixels of screen
Summary:
Fixes https://fb.workplace.com/groups/443457641253219/permalink/522118536720462/

On android for some reason our display metrics for the application, activity and winow were smaller than the decor view. We were using the root view as the base static view for the visualiser with overflow hidden. Since it will slightly smaller than the decor view we were losing some of the lower pixels of the snapshot

The decor view is the one that is actually snapshot so any bounds for nodes above are meaningless . The fix is to simply have the visualiser start at the snapshot view. We know this bounds is correct.

Tested on ios and android and all looks ok

Reviewed By: lblasa

Differential Revision: D43356523

fbshipit-source-id: 4d6177c8242365f33b1d64fc149a10baff7c85d6
2023-02-17 02:45:05 -08:00
Luke De Feo
d24343d2ac Make the visualiser scrollable and remember width
Summary:
Previously If you set the visualiser too wide, the height adjusts with the aspect ratio and  the bottom was cut off and there was no way to scroll. Have added a scrollbar if it exceeds the available height

Also the width state was promoted to an atom so the users resize amount is preserved when moving between plugins

A better solution might be to prevent the visualiser from getting too wide for the available hieght but it get complex when the window resizes.

Reviewed By: lblasa

Differential Revision: D43351294

fbshipit-source-id: f618a69ed025214593a74b952ce75c5fd98447cd
2023-02-17 02:45:05 -08:00
Luke De Feo
1cd916e414 Increase indent and automatically scroll horiztonally on selection
Summary:
Indent is made bigger so the horizontal lines have more space and the whole thing can breath more. To componesate the view scroll horiztontally so that the tree node is always visible. Was also able to clean up the hierachy a bit

changelog: increase tree indent and automatically scroll both horizontally and vertically when selecting an element

Reviewed By: lblasa

Differential Revision: D43311566

fbshipit-source-id: 53bc7bd55027e87fdecadac9aa8bc41612bb684a
2023-02-17 02:45:05 -08:00
Luke De Feo
d1e6b27358 Remove gap between tree scroll bar and visualiser resize handle
Summary:
So much tidier

changelog: UIDebugger remove gap between tree and visualiser

Reviewed By: lblasa

Differential Revision: D43307743

fbshipit-source-id: ceec9b3b164c93ecadfe8c0b7299a978b2915e3b
2023-02-17 02:45:05 -08:00
Luke De Feo
8581aa1944 Memoise selection of nodes
Summary:
For the visualiser we use the same trick as with the hover state. We subscribe to selection changes and only render if the prev or new state concerns us.

For the tree we change from object identity to the node id + and indent guide are added to the memoisation equal check.

Depending on teh change this tree memoisation can vary in effectiveness. If you go from nothing selecting to selecting the top element nothing is memoised since react needs to render every element to draw the indent guide. If you have somethign selected and select a nearby element the memoisation works well.

There are ways to improve this more down the road

changelog: UIDebugger improve performance of selecting nodes

Reviewed By: lblasa

Differential Revision: D43305979

fbshipit-source-id: 5d90e806ed7b6a8401e9968be398d4a67ed0c294
2023-02-17 02:45:05 -08:00
Lorenzo Blasa
dacc6ebb16 Feedback request
Summary:
^

Only for iOS this time.

Note: passing the device OS freely to the main component as this is just temporary code that will be deleted soon.

Reviewed By: antonk52

Differential Revision: D42990221

fbshipit-source-id: 41b4107caa6bf312191889af75afd28873f6eda5
2023-02-03 07:43:00 -08:00
Luke De Feo
df9b0a6aa6 Use react query to cache myles query
Summary: The call to myles was a little slow and very cachable so use react query. Additionally it depends on VPN / light so added an error state to make that clear.

Reviewed By: lblasa

Differential Revision: D42990344

fbshipit-source-id: 8d6ad20aea79f1972a7cf1f61f8af729e5f3464f
2023-02-03 04:38:51 -08:00
Lorenzo Blasa
49403df95f Remove survey banner
Summary:
^

Not removing the component, yet, as we may re-introduce the survey once we officially release on iOS.

Reviewed By: antonk52

Differential Revision: D42499399

fbshipit-source-id: 596ebda7acf39c0b8377bbd3a1a8f4dfa81e59a4
2023-01-13 07:36:20 -08:00
Luke De Feo
989797a225 Dynamic scaling of visualizer and resizable window
Summary: Fixes https://fb.workplace.com/groups/443457641253219/permalink/480446154221034/

Reviewed By: mweststrate

Differential Revision: D42095625

fbshipit-source-id: 364577141f2819dd22b0b499b11770d0bb88b1f5
2022-12-16 03:47:58 -08:00
Luke De Feo
8242a94ca4 Rename tree
Reviewed By: lblasa

Differential Revision: D41875028

fbshipit-source-id: a3afd0014798f03cbaefac3f9128b4e92bccb290
2022-12-12 07:28:37 -08:00
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
a6544489f3 Basic new tree implemenation
Summary: The old implementation would always rerender on every operation (select, hover etc) and was quite slow for large hierachies

Reviewed By: lblasa

Differential Revision: D41838166

fbshipit-source-id: 1270841027926440a9c1f1a846d3aedc75ffe8bf
2022-12-12 07:28:37 -08:00
Lorenzo Blasa
df960aee80 Show empty sidebar when no node is selected
Summary: ^

Reviewed By: LukeDefeo

Differential Revision: D41549165

fbshipit-source-id: 7f6324c8e04b8c7db3afe1e4cc5e1cbe0c023b7c
2022-11-29 10:39:14 -08:00
Lorenzo Blasa
a8f8e081c5 Feedback request banner
Summary:
This change adds a small feedback alert banner. It will have a link to our workplace feedback group.

Additionally, it asks engineers to record their sessions.

Reviewed By: LukeDefeo

Differential Revision: D41531851

fbshipit-source-id: 7ec8ca79350e7a84ab0532065bc57187ef0055ba
2022-11-28 11:21:24 -08:00
Luke De Feo
b214806325 Add padding and refactor our controls component
Summary: also made the controls component full width to push down the visualiser

Reviewed By: lblasa

Differential Revision: D41548665

fbshipit-source-id: 2bca527e70c92bc0ded120e51a0880f76f7cca87
2022-11-28 05:09:20 -08:00
Luke De Feo
57dcf72763 Added ability to pause the incoming updates from the client
Summary: There were a few subtleties around what to the auto expanding / collapsing for active children but otherwise this is quite straightforward

Reviewed By: lblasa

Differential Revision: D41548252

fbshipit-source-id: c153d00210d859463a51753dadf2e5aabeb7ea35
2022-11-28 05:09:20 -08:00
Luke De Feo
6bb541a33f Group app wide ui state into one object
Summary: Should be a bit easier to see what UI state we are holding at the plugin instance level

Reviewed By: lblasa

Differential Revision: D41498272

fbshipit-source-id: 6d88086766efd9c39f71be7e2ce32c5058494c96
2022-11-24 09:23:16 -08:00
Luke De Feo
01f7fa34e5 Remove per node snapshot in favour of single top level snapshot
Summary: In order to support focus mode we need to have only 1 snapshot. In practice this is the case but we are making this more apparant in this diff.

Reviewed By: lblasa

Differential Revision: D41493003

fbshipit-source-id: 19ed7213d15adaea4732f4ec60309efa8dae6f94
2022-11-24 09:23:16 -08:00
Luke De Feo
b576060339 Pretty loading spinner
Reviewed By: antonk52

Differential Revision: D41343098

fbshipit-source-id: 69b75e7a93344d2a05fa6fac9f466126feaf8cad
2022-11-24 09:23:16 -08:00
Luke De Feo
3722ac1fea Permanent search bar
Summary: Out of the box the library search has some issues. when search matches it steals focus from the input. Eventually we want to customise the rendering of the tree items anyway so this lays the foundation for taht

Reviewed By: antonk52

Differential Revision: D41336524

fbshipit-source-id: 194f67023edd0675cd9bd8d6134260439c6b2785
2022-11-24 09:23:16 -08:00