New in Optics: Trends over Time

We are very excited to announce that you can now view performance trends over time in Optics, through an interactive data-rich visualization. This is the #1 requested feature from our users.

We’re on a mission to make product development as fast, easy, and productive as possible. We all spend far too much time today writing complicated data loading and state management code, instead of focusing on the product features our users want and the feedback we get from them. That’s why we’re so excited about GraphQL — it replaces all that code with queries that are fast to write and easy to understand.

This is what Optics is all about. We think all product developers should have the very best tools for our craft, and we think GraphQL helps us get there. Here’s what we’re shipping today:

---

This new visualization shows every GraphQL operation from your clients in the form of a heat map, displaying performance distributions over a span of time. Optics now has four key charts for understanding GraphQL performance:

1. A heat map showing performance trends over time
2. A step chart showing endpoint traffic over time
3. A performance distribution showing aggregate trends in a time range
4. Sample traces showing the specific executions of GraphQL operations

Performance Over Time

This chart shows every GraphQL operation from your clients in your selected time range. The horizontal axis is time, and the vertical axis shows how long the operation took. Faster response times are at the bottom, slower at the top. Darker colors represent larger request volumes.

You’ll notice there is a distinct drop in the performance of this operation at 4pm PST. The heat map lets you pick out a lot of valuable supporting information at a glance. A vertical shift here, without much change in each band’s overall color, tells us that overall request load time was constant; thus, this particular degradation must have been caused by something else going on with the server.

In our case here, this degradation in server performance is caused because we collect daily analytics at 12am UTC, which is 4pm PST. If the slowdown had been caused by added GraphQL request load, we’d see something quite different: a darker color band that shift up to reflect the larger total number of requests, and a corresponding shift up in the endpoint traffic graph below.

Endpoint traffic

This chart shows requests per minute (RPM) over time, and shares its time axis with the chart above it. Higher values on the vertical axis represent a higher volume of requests in that time period.

Performance Distribution

This chart shows a distribution of how long each GraphQL operation took in your selected time range. The horizontal axis shows how long the operation took, and the height of the bar reflects how many requests fell into that duration range. Each bar represents the sum of a single row in the Performance Over Time chart above. Taller bars here correspond to darker colors in the heat map.

Sample traces

This chart shows the execution trace of a sample request taken from the duration window highlighted in the histogram above (darker blue bar). Every bar represents the timespan in which a particular field resolved its value. There is one sample trace for every duration range in the histogram above, so you can compare the executions of operations that took varying times to resolve.

---

We are very excited about the possibilities a visualization like this creates, and you can look forward to more content from us soon about how we built the heat map, what value we’ve gotten from it, and how we plan to expand its utility in the future! If you’d like to get a closer look at any of the things we’re working on here at Apollo, join us for Apollo Day this April 11th. We look forward to seeing you there! If you’re interested in working with us on GraphQL full time, we’re hiring. 🙂