urql-devtools icon indicating copy to clipboard operation
urql-devtools copied to clipboard

Published 20 hours ago • verified publisher icon urql-graphql

Display Query name per each timeline entry

Open dcaldastp opened this issue 2 years ago • 5 comments

About

Here's a sketch of the required addition - see myQueryX written in read near the Q icon, this is just a suggestion of course, placement of the label could be some other more suitable place.

Screenshot 2022-08-01 at 14 03 54

Each entry in the timeline would have somewhere displayed the query name for better exploration. This will save us the effort of clicking each entry to figure out which query we're looking at, which IMO carries an additional obstacle for the developer trying to wrap their head around the timeline.

dcaldastp avatar Aug 01 '22 12:08 dcaldastp

Hey @dcaldastp, thanks for the suggestion!

How would you feel about being able to see the query name when hovering over the Q / M icon?

andyrichardson avatar Aug 01 '22 14:08 andyrichardson

How would you feel about being able to see the query name when hovering over the Q / M icon?

Hey @andyrichardson, thanks for the quick reply. Honestly, hover would not be as helpful since I would like to look at the timeline as a whole without having to keep track of a mental map of the timeline position to query/mutation name (I'm looking at a timeline with 20+ queries, it becomes a bit hard to keep track of it, even with the hover).

dcaldastp avatar Aug 01 '22 15:08 dcaldastp

Thanks for explaining your reasoning - that does make a lot of sense! For the time being, I think tool-tips would be the best we can do with the current layout due to the lack of space.

I did have a mess around with an alternative layout (below) - might make it easier to distinguish and find queries but would take more time than I have available to implement. Maybe something for the future :crossed_fingers:

Alternative layout

Frame 8

Frame 9

Frame 10

andyrichardson avatar Aug 01 '22 17:08 andyrichardson

I have another alternative for you to consider in order to tackle the lack of space. What about adding the query/mutation name within the event line itself 👇 (see the "myLongQueryName" on top of one of the lines)

Screenshot 2022-08-02 at 10 14 41

You can play with font-size/color to make it fit nicely I feel. What do you think?

dcaldastp avatar Aug 02 '22 08:08 dcaldastp

I like your thinking, although for information heirarchy, I think this might be a little tricky. The whole "row" is the query and ideally the name would be associated with the row rather than a "duration".

There are also some additional situations where this might not quite work:

  • There are no query durations in view for that row
  • There are multiple query durations in view for that row (do we show the name in all of them?)
  • The query duration is too short to show the query name

andyrichardson avatar Aug 09 '22 11:08 andyrichardson