---
title: OctoPerf's new UI - Analysis changes
url: https://blog.octoperf.com/octoperfs-new-ui---analysis-changes/
date: '2023-01-18'
authors:
- gbetaillouloux
categories:
- Innovation
tags:
- Trending
- Analysis
- Reporting
- Comparison
- PDF
description: 'In this fourth blog post about our new UI we check the analysis screen. '
---

# OctoPerf's new UI - Analysis changes

This article is the last in a series of overviews of our new UI. You can find the others here:

- [Overview](https://blog.octoperf.com/octoperfs-new-ui---overview-changes/),
- [Design](https://blog.octoperf.com/octoperfs-new-ui---design-changes/),
- [Runtime](https://blog.octoperf.com/octoperfs-new-ui---runtime-changes/).

This time we will dive into the changes we've made in the analysis.

## Analysis page

The analysis page has remained [mostly the same](https://api.octoperf.com/doc/analysis/):

<p style="text-align: center">
<img class="img-fluid" src="https://blog.octoperf.com/img/blog/octoperf-new-ui-analysis/octoperf-new-ui-analysis.png" alt="Back" title="Back" style="zoom:50%;">
</p>


The main change here is that each report is assigned a unique number so that you can quickly differentiate them. This is especially useful for comparison reports since this allows you to see which reports they contain without opening them:

![report-number](https://blog.octoperf.com/img/blog/octoperf-new-ui-analysis/report-number.png)

### Configurable trend graph

The [trend graph](https://api.octoperf.com/doc/analysis/#trending-graph) now displays statistics for the currently select graphs only:

![trend-graph](https://blog.octoperf.com/img/blog/octoperf-new-ui-analysis/trend-graph.png)

Note that if you select a comparison report, all of its associated results will be displayed in the trend.

## Report screen

The [report screen](https://api.octoperf.com/doc/analysis/edit-bench-report/) has a look and feel similar to the design screen:

- A tree on the left in order to navigate or interact with the report structure,
- A main panel to show the report or the report item being edited,
- Optional panels to display logs, properties and available report items.

### Header

The new [report header](https://api.octoperf.com/doc/analysis/edit-bench-report/#header) can be pinned so that it remains visible while scrolling down to other items:

![header](https://blog.octoperf.com/img/blog/octoperf-new-ui-analysis/header.gif)

### Report items tree

<div style="display: flex; flex-direction: row; gap: 1rem;">
    <div>
        <img class="img-fluid" src="https://blog.octoperf.com/img/blog/octoperf-new-ui-analysis/items-tree.gif" alt="Items tree" title="Items tree" style="zoom:60%;">
    </div>
    <div>
        The tree available on the left of the report screen allows you to navigate to any report item with a simple click or drag and drop it in a different position.<br/>
        But it also allows you to select multiple items and interact with all of them through the right click menu, like the tree from the design page.<br/>
        This way you can add new report items or mass remove some items.<br/>
    </div>
</div>

### Metric selector

When you add or edit a single report item, the [metric selector screen](https://api.octoperf.com/doc/analysis/edit-bench-report/metrics-selection/) will display:

![hit-metric](https://blog.octoperf.com/img/blog/octoperf-new-ui-analysis/hit-metric.png)

Here you can select the metric and filters to be displayed on the graph. You will also see an overview of the resulting graph on top of the screen.

## Export

### Pdf export

When you click the [export button](https://api.octoperf.com/doc/analysis/export-bench-report/) on top of the screen, OctoPerf will generate a PDF for you and provide you with a download link: ![exported-report](https://blog.octoperf.com/img/blog/octoperf-new-ui-analysis/exported-report.png)

### Report item export

And it is also possible to [export the data behind every item](https://api.octoperf.com/doc/analysis/export-bench-report/export-report-items/) using the items tree:

![export-report-item](https://blog.octoperf.com/img/blog/octoperf-new-ui-analysis/export-report-item.png)

## Comparison

The [comparison report](https://api.octoperf.com/doc/analysis/compare-bench-results/), although quite similar has a better look and feel:

![comparison-delta-table](https://blog.octoperf.com/img/blog/octoperf-new-ui-analysis/comparison-delta-table.png)

## Conclusion

This post is the last one in our overview, which means our new UI is almost ready to be officially released. It's been a long journey since the very first beta version of the new UI. We are proud to see how it's evolved so far and curious to know where your feedbacks will take us in the future.

If you want to see it in action, you can either [log in to the new UI](https://api.octoperf.com/ui/) and try it for yourself or [use our new interactive tutorials](https://www.iorad.com/help-center/159034?roleId=7490).