Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add duplicated query indicator #1496

Conversation

nicDamours
Copy link

@nicDamours nicDamours commented Jul 16, 2024

Summary

Added a badge to indicate which queries were duplicated, in the "Related Queries" tabs. The badge can be clicked on, to scroll to the first instance of the query, which will be highlighted. The first instance of a duplicated query is not marked with a badge, since it's not technically duplicated yet.

Screenshots

Light theme:
image

Dark theme:
image

An example of the badge with a badge for a long query:
image

Motivation

This feature came from a need to know which queries were duplicated, when looking at the queries for a given http request. Knowing exactly which queries are duplicated can be very useful when attempting to optimize a request with eager loading. Also, know which instance of the query is the first one can help to identify when this query come from and how to prevent further duplication.

There was quite a few issue regarding this problem, and even a few attempt, but it never got fixed. So here I am, throwing my solution into the ring.

Here are a list of the related issue
#603
#786
#1326

And a PR to fix the issue
#1328

Testing

I wanted to write a complete test suite for this feature. However, since this is a front-end only fix, I could not use the regular phpunit framework. I would have needed to install jest, and setup everything needed to even be able to run a single test. I felt like this was not my place, and I did not want to do more than necessary on that feature.

If, at some point, a testing framework is added to the front-end part of telescope, I will gladly come back and write some tests.

Added duplicated queries indicator in related query view.
Moved highlight class to "base.scss", to be able to use scss variables.
Added behaviour to "blur" currently highlighted items when clicking anywhere in the page.
@taylorotwell
Copy link
Member

Going to hold off on this one for now.

@nicDamours
Copy link
Author

nicDamours commented Jul 17, 2024

@taylorotwell Would you mind sharing why? I feel like this would make a great addition to Telescope. As a matter of facts, I've been running this exact patch for about a year, on my personal installation of telescope and it made debugging a lot easier.

@emaadali
Copy link

+1 for including this feature

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants