feat(devtools): add timeline (draft)

[gpichot]

Clone of https://github.com/TanStack/query/pull/3841 at is was easier to start from scratch after the v4 merge (closing the other one as a result).

This is to add a timeline in the chrome devtools as discussed here: https://github.com/TanStack/query/discussions/3753

Screenshot below of the current state of work:

• it displays query events (fetch, success etc) ;
• the number of observers attached to this query (number on the query "box") ;
• when no observers are attached ("query cached"), the box is a bit more transparent.

TODO

• [x] Add a tick to displays time at pointer ;
• [x] Use query cache on start recording to populate entries ;
• [x] Improve horizontal zooming
• [x] Add support for scrolling horizontally
• [x] Better tooltips
• [ ] Review style (zoom buttons & move timer to head)
• [ ] Check for all non nominative cases (error, retries)
• [ ] Add tooltips for events (fetch, success)
• [ ] Check if we can display differently refetch from window refocus, interval refetch, retries

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
query	❌ Failed (Inspect)		Jul 20, 2022 at 2:47PM (UTC)

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ad2ea78ccb8f58cf263d9ed21746bb2352ca83fa:

Sandbox	Source
@tanstack/query-example-react-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration

[gpichot]

If someone has some feedback on how to add horizontal scrolling and zooming (I am not convinced with the current solution for zooming), it will be very appreciated :)

[gpichot]

I don't feel very confident to merge this one in one piece given the scope of changes required:

• I need to refactor components in multiple files to add support for panes (current architecture supports one pane) ;
• there have been some changes and I don't want to do any regressions when adding this (all changes are not tested).

Going forward I think the best approach would be:

1. create a PR to refactor and add some tests on the devtools part (I can do this) ;
2. add a PR to add supports for panes.
3. add the timeline feature on top of these PRs.

1 and 2 could be done in one shot, but I don't want to put too much cognitive load on both myself and reviewers :-).

@TkDodo what do you think about this?

[TkDodo]

this sounds like a good idea. Maybe we should merge this one first though?

• https://github.com/TanStack/query/pull/4352

[gpichot]

this sounds like a good idea. Maybe we should merge this one first though?

• feat(devtools): enable setting loading/error via devtools #4352

Yes indeed :). Would be best to avoid rework on related PRs.

[TkDodo]

I'll try to get that one over the finish line this week. Let's close this PR ?

[gpichot]

Yes, I will create related PRs when #4352 is merged.

[TkDodo]

devtools have been re-written in solid and now work for all framework adapters.