update(perf): Update performance landing and widget descriptions (#4500)

* update(perf): Update performance landing and widget descriptions

This mostly updates the docs to include widget descriptions for all the actionable widgets, since most of the mini-chart / simple visualizations are covered in metrics. The new page isn't strictly necessary, I've just added it for somewhere to put these definitions for now, since we may want to add more screenshots or explanations here in the future.

Finally, made a couple changes to the main performance landing docs.

* Fix vscode auto-format.

* Update src/docs/product/performance/filters-display.mdx

Co-authored-by: Isabel <[email protected]>

* Update src/docs/product/performance/filters-display.mdx

Co-authored-by: Isabel <[email protected]>

* Update src/docs/product/performance/widgets.mdx

Co-authored-by: Isabel <[email protected]>

* Update src/docs/product/performance/widgets.mdx

Co-authored-by: Isabel <[email protected]>

* Update src/docs/product/performance/widgets.mdx

Co-authored-by: Isabel <[email protected]>

* Update src/docs/product/performance/widgets.mdx

Co-authored-by: Isabel <[email protected]>

* Update src/docs/product/performance/widgets.mdx

Co-authored-by: Isabel <[email protected]>

* Update src/docs/product/performance/widgets.mdx

Co-authored-by: Isabel <[email protected]>

* Update src/docs/product/performance/widgets.mdx

Co-authored-by: Isabel <[email protected]>

* Update src/docs/product/performance/widgets.mdx

Co-authored-by: Isabel <[email protected]>

* Update src/docs/product/performance/widgets.mdx

Co-authored-by: Isabel <[email protected]>

* Update src/docs/product/performance/widgets.mdx

Co-authored-by: Isabel <[email protected]>

* Update src/docs/product/performance/widgets.mdx

Co-authored-by: Isabel <[email protected]>

* Update src/docs/product/performance/widgets.mdx

Co-authored-by: Isabel <[email protected]>

* Update src/docs/product/performance/widgets.mdx

Co-authored-by: Isabel <[email protected]>

* fixing capitalization

* wording edit

* created filters display folder and moved filters and widgets pages into it

* fixed link on performance index page and updated sidebar order on some pages

* updated images

* fixed image link

* fixed links

* removing Display dropdown reference

Co-authored-by: Isabel <[email protected]>
Co-authored-by: Isabel Matwawana <[email protected]>

Author: k-fish

src/docs/product/performance/01_full_widget_all.png

@@ -16,60 +16,69 @@ The page displays a view of transactions, but you can click the “View Trends
 
 Each tab in **Performance** displays an automatically selected set of [widgets](#widgets) and table columns based on the platform of your project. For example, a JavaScript project displays the "Web Vitals" tab by default. Each tab and its [metrics](/product/performance/metrics/) are explained below.
 
-### All Transactions
+![Performance homepage with Web Vitals tab selected.](01_full_widget_frontend.png)
 
-When you select "All Transactions", the table includes all frontend and backend transactions.
+### All Transactions
 
-<!-- ![Performance Homepage with Display: All](00_performance_landing.png) -->
+When you select "All Transactions", the table includes all transactions across any projects and period you have selected.
 
 ### Web Vitals {#frontend-pageload}
 
-[Web Vitals](/product/performance/web-vitals/) includes frontend pageload transactions. The transactions are automatically filtered to only include `transaction.op:pageload`. This generally corresponds to all browser page transitions that are not handled internally in SPA frameworks, such as React or Vue.
-
-![Performance Frontend(Pageload) tab](performance-landing-widgets.png)
+[Web Vitals](/product/performance/web-vitals/) includes frontend pageload transactions. The transactions are automatically filtered to only include `transaction.op:pageload`. This generally corresponds to all browser page transitions that are the first load of a page. It also includes performance information from the beginning of the load itself, as well as the performance of the SPA frameworks being loaded, such as React or Vue (if available).
 
 ### Frontend {#frontend-other}
 
-"Frontend" includes any other frontend transaction that is not a pageload. The filter `transaction.op:!pageload` automatically gets added. This generally corresponds to page transitions handled internally in SPA frameworks, such as React or Vue. Note that if you've selected a backend project, this mode also displays backend transactions.
+"Frontend" includes all frontend transactions, without a specific focus on Web Vitals. This generally corresponds to page transitions handled internally in SPA frameworks, such as React or Vue. Note that if you've selected a backend project, this mode also displays backend transactions.
 
 ### Backend
 
 "Backend" puts an emphasis on duration, throughput, failure rate, and Apdex. Note that if you've selected a frontend project, this mode also displays all frontend transactions.
 
-<!-- ![Performance Homepage with Display: Backend](02_performance_landing.png) -->
-
 ### Mobile
 
 "Mobile" puts an emphasis on [Mobile Vitals](/product/performance/mobile-vitals/). Note that if you've selected a non-mobile project, this mode also displays all of those transactions.
 
-<!-- ![Performance Homepage with Display: Mobile](mobile-vitals.png) -->
-
 ## Search Condition Filters
 
 The search bar operates similarly to the one in the Discover [Query Builder](/product/discover-queries/query-builder/#filter-by-search-conditions). For example, you can refine your transaction search to a specific release by using `release:` as a key field and assigning the version as a value.
 
-## Graphs
+## Widgets
+
+[Widgets](/product/performance/filters-display/widgets/) offer visualizations that you can change to best match your workflow.
+
+![Performance homepage with Web Vitals widgets.](01_half_widget_frontend.png)
+
+In the first row, there are time series and distribution graphs of common metrics for the selected project type (frontend or backend), such as User Misery or Failure Rate. You can compare these side-by-side to find any correlations.
+
+In the second row, there are actionable widgets that can show you areas of concern in your application, such as Most Regressed Transactions or Most Recurring Issues. Below these widgets, there are lists of transactions, which you can click to see additional context. Transactions shown in these lists can be temporarily removed from the view by clicking the 'X' beside the transaction name.
 
-You can compare graphs side by side to find any relevant correlations. For example, if an Apdex score dips significantly during a given time period, you'll be able to visualize whether throughput spiked in the same time interval in a "Transactions per Minute" graph. The global header and search conditions will also allow you to further filter these graphs:
+Each widget has a menu in the top right where can you change the widget shown. Your changes will be persisted locally either for the session or until application storage is cleared. After that, the default set of widgets is displayed.
+
+### Basic Widgets
 
 - [Apdex](/product/performance/metrics/#apdex)
 - [Transactions Per Minute (TPM)](/product/performance/metrics/#throughput-total-tpm-tps)
 - [Failure Rate](/product/performance/metrics/#failure-rate)
 - [p50 Duration](/product/performance/metrics/#p50-threshold)
+- [p75 Duration](/product/performance/metrics/#p75-threshold)
 - [p95 Duration](/product/performance/metrics/#p95-threshold)
 - [p99 Duration](/product/performance/metrics/#p99-threshold)
+- [User Misery](/product/performance/metrics/#user-misery)
 
-## Widgets
-
-Widgets offer visualizations that you can change to best match your workflow.
-
-![Performance Homepage with Widgets](performance-landing-widgets.png)
-
-In the first row, there are time series and distribution graphs of common metrics for the selected project type (frontend or backend), such as User Misery or Failure Rate. You can compare these side-by-side to find any correlations.
-
-In the second row, there are actionable widgets that can show you areas of concern in your application, such as Most Related Errors or Most Recurring Issues. Below these widgets, there are links to other parts of the application, which you can follow to see additional context.
-
-Each widget has a menu in the top right where can you change the widget shown. Your changes will be persisted locally either for the session or until application storage is cleared. After that, the default set of widgets is displayed.
+### Actionable Widgets
+
+- [Most Improved](/product/performance/filters-display/widgets/#most-improved)
+- [Most Regressed](/product/performance/filters-display/widgets/#most-regressed)
+- [Most Related Issues](/product/performance/filters-display/widgets/#most-related-issues)
+- [Most Slow Frames](/product/performance/filters-display/widgets/#most-slow-frames)
+- [Most Frozen Frames](/product/performance/filters-display/widgets/#most-frozen-frames)
+- [Worst LCP Vitals](/product/performance/filters-display/widgets/#worst-lcp-vitals)
+- [Worst FCP Vitals](/product/performance/filters-display/widgets/#worst-fcp-vitals)
+- [Worst FID Vitals](/product/performance/filters-display/widgets/#worst-fid-vitals)
+- [Slow HTTP Ops](/product/performance/filters-display/widgets/#slow-http-ops)
+- [Slow DB Ops](/product/performance/filters-display/widgets/#slow-db-ops)
+- [Slow Browser Ops](/product/performance/filters-display/widgets/#slow-browser-ops)
+- [Slow Resource Ops](/product/performance/filters-display/widgets/#slow-resource-ops)
 
 ## Transaction Table
 

src/docs/product/performance/01_full_widget_mobile.png

@@ -0,0 +1,56 @@
+---
+title: "Performance Widgets"
+sidebar_order: 10
+description: "Learn more about Sentry's Performance widgets such as, Most Related Issues, Most Regressed Transactions, Slow HTTP Ops, and how they can be used to surface performance insights in your applications."
+---
+
+Performance widgets offer visualizations that you can change to best match your workflow. They provide performance-specific views that allow you see and act on transaction data across your organization.
+Depending on which **Performance** tab you've selected, different curated performance widgets will be available.
+
+## Most Improved
+
+Shows the most improved transactions and visualizes the improvement for the selected transaction in the list. Only trends of a specific significance and throughput are shown. Learn more in [Trends](/product/performance/trends).
+
+## Most Regressed
+
+Shows the most regressed transactions and visualizes the regression for the selected transaction in the list. Only trends of a specific significance and throughput are shown. Learn more in [Trends](/product/performance/trends).
+
+## Most Related Issues
+
+Shows the highest count of any issue group related to a transaction and visualizes the issue count over time.
+
+## Most Slow Frames
+
+Shows transactions with the most slow frames for mobile projects. Learn more in [Mobile Vitals](/product/performance/mobile-vitals).
+
+## Most Frozen Frames
+
+Shows transactions with the most frozen frames for mobile projects. Learn more in [Mobile Vitals](/product/performance/mobile-vitals).
+
+## Worst LCP Vitals
+
+Shows transactions with the highest count of poor LCP (Largest Contentful Paint) and visualizes the proportions of user experience for this vital. Learn more in [Web Vitals](/product/performance/web-vitals).
+
+## Worst FCP Vitals
+
+Shows transactions with the highest count of poor FCP (First Contentful Paint) and visualizes the proportions of user experience for this vital. Learn more in [Web Vitals](/product/performance/web-vitals).
+
+## Worst FID Vitals
+
+Shows transactions with the highest count of poor FID (First Input Delay) and visualizes the proportions of user experience for this vital. Learn more in [Web Vitals](/product/performance/web-vitals).
+
+## Slow HTTP Ops
+
+Shows transactions with slow cumulative HTTP spans. Slow HTTP ops are note shown for all projects and transactions as the transactions must contain HTTP spans. Check out the SDK documentation for the project in question for more information.
+
+## Slow DB Ops
+
+Shows transactions with slow cumulative DB spans. Slow DB ops are not shown for all projects and transactions as the transactions must contain DB spans. Check out the SDK documentation for the project in question for more information.
+
+## Slow Browser Ops
+
+Shows transactions with slow cumulative browser spans. These show frontend transactions with poor performing browser spans, such as DNS lookup, TLS/SSL, and so on.
+
+## Slow Resource Ops
+
+Shows transactions with slow cumulative resource spans. These show frontend transactions with poor performing resources spans, and show cumulative time spent loading scripts, CSS, and so on.

src/docs/product/performance/filters-display/01_full_widget_frontend.png

@@ -20,13 +20,13 @@ Learn more about traces in the [full Tracing documentation](/product/sentry-basi
 
 The **Performance** page is the main view in [sentry.io](https://sentry.io) where you can search or browse for <SandboxLink scenario="oneTransaction" projectSlug="react">transaction</SandboxLink> data. The page displays graphs that visualize transactions or trends, as well as a table where you can view relevant transactions and drill down to more information about them.
 
-![Performance Homepage with Widgets](performance-landing-widgets.png)
+![Performance homepage with All Transactions tab selected.](01_full_widget_all.png)
 
 Using the information on this page, you can trace issues back through services (for instance, frontend to backend) to identify poorly performing code. This allows you to answer questions like whether your application performance is getting better or worse, if your last release is running more slowly than previous ones, or which specific services are slow. Then you can begin to address the code that’s degrading performance.
 
 ## Filter Performance Data
 
-The <SandboxLink scenario="performance" projectSlug="react">Performance</SandboxLink> page provides you with several filter and display options so that you can focus on the performance data you want. Search conditions help you find the <SandboxLink scenario="oneTransaction" projectSlug="react">transactions</SandboxLink> you want to investigate. You can also control what kind of information is visualized in the [graphs](/product/performance/filters-display/#graphs) or which transactions appear first in the [transactions table](/product/performance/filters-display/#transaction-table).
+The <SandboxLink scenario="performance" projectSlug="react">Performance</SandboxLink> page provides you with several filter and display options so that you can focus on the performance data you want. Search conditions help you find the <SandboxLink scenario="oneTransaction" projectSlug="react">transactions</SandboxLink> you want to investigate. You can also control what kind of information is visualized in the [widgets](/product/performance/filters-display/#widgets) or which transactions appear first in the [transactions table](/product/performance/filters-display/#transaction-table).
 
 ## Analyze Performance Trends
 

src/docs/product/performance/filters-display/01_half_widget_frontend.png

@@ -6,9 +6,9 @@ description: "Learn more about Mobile Vitals in Sentry, and how they give you a
 
 Mobile Vitals are a set of metrics that measure how fast your app starts and the number of slow and frozen frames your users experience. Each metric provides insights into the overall performance of your mobile application and gives you the details you need to not only prioritize critical performance issues, but to trace issues down to the root cause to solve them faster.
 
-Mobile Vitals are summarized in several graphs on the **Performance** page in [sentry.io](https://sentry.io) when you select "Mobile" in the "Display" dropdown.
+Mobile Vitals are summarized in several graphs on the **Performance** page in [sentry.io](https://sentry.io) in the "Mobile" tab.
 
-![Performance page in Sentry with Mobile Vitals.](mobile-vitals.png)
+![Performance page in Sentry with Mobile Vitals.](01_full_widget_mobile.png)
 
 ## App Start