January 9, 2017

Upgraded Query Interface in Optics

Danielle Man

Danielle Man

We’re excited to say that we’ve upgraded the Query reporting page in Optics, making key metrics visible at a glance and critical query traces easier to find and navigate through.

Update: There is a new version of Optics! Apollo Engine has everything Optics does plus error tracking, query caching, and more. Engine is free for 1 million requests a month and it’s easy to switch from Optics to Engine using our migration guide.

Optics is our GraphQL performance insights tool. If you’re working with GraphQL and haven’t tried it yet, I highly encourage you to! Sign up for free here— no credit card required.

After analyzing a lot of user feedback and using Optics extensively ourselves, we decided that a bar chart would represent the request distribution data more authentically than our previous visualization (a smooth line). Over the last sprint cycle, we took the time to implement a new design of the Query reporting page, and it’s now available to all users!

With this upgraded version of the histogram, you can easily:

  • View duration bucket details by hovering over them
  • Navigate between different trace samples by clicking bars
  • Identify important percentiles through x-axis labels
  • Compare different query distributions (x-axis persists between them)

The upgraded histogram is highly interactive. To help users understand their real-world endpoint latencies, we’ve specifically emphasized the percentile of each duration bucket and made important request metadata easily accessible.


The request distribution is not the only thing that’s been upgraded in Optics. We’ve completely redesigned the tabs on the Query page to emphasize what users care about most. Basic query stats are now always shown under the query name in the page header, and we’ve paired the request distribution with the trace samples by having them on the same page.

Here’s the before and after:

Before
After

Check out the new design for yourself! We’d love to hear your feedback through Intercom in Optics (blue circle on the bottom right), the #optics channel of our public Apollo Slack, or comments on this post.

Written by

Danielle Man

Danielle Man

Read more by Danielle Man