feat(widget-builder): Update docs for the new widget builder UI (#12693)

The new widget builder UI has a different ordering for sections and needs to update
some of the phrasing used to reference the new workflow. The screenshots are also
updated.

Author: narsaynorath

docs/product/dashboards/custom-dashboards/index.mdx

@@ -44,7 +44,7 @@ To restrict who can edit or delete your dashboard, go to the "Edit Access" selec
 
 ## Widget Builder
 
-When adding a widget or editing an existing one, you will be taken to a new page where you can see the dashboard widget builder. The widget builder has several configuration options that you can use to shape data and add information to your dashboard. Learn more in the [Widget Builder documentation](/product/dashboards/widget-builder/).
+When adding a widget or editing an existing one, you will be presented with a side panel where you can see the dashboard widget builder. The widget builder has several configuration options that you can use to shape data and add information to your dashboard. Learn more in the [Widget Builder documentation](/product/dashboards/widget-builder/).
 
 ### Metrics Extraction
 

docs/product/dashboards/widget-builder/img/widget-builder-custom-equation-field.png

@@ -6,47 +6,15 @@ description: "Learn how to create widgets for your dashboards or edit existing o
 
 <Include name="feature-available-for-plan-trial-business.mdx" />
 
-When adding a widget or editing an existing one, you will be taken to a new page where you can see the dashboard widget builder:
+When adding a widget or editing an existing one, a side panel opens up where you can see the dashboard widget builder:
 
 ![Widget Builder overview.](./img/widget-builder-overview.png)
 
 The widget builder has several configuration options that you can use to shape data and add information to your dashboard. These options are presented as steps in the widget builder, but you don't have to do them in the order they're presented in.
 
 Some of these options are standard and displayed for all widgets, but others are only displayed if you make specific selections. Below is a list of all the options that can be displayed when configuring your widget.
 
-## Widget Title
-
-By default, all new widgets are titled “Custom Widget”, but you can edit the title by clicking on the text. We recommend you update the title.
-
-## Choose Your Visualization
-
-In this step, you can choose from four different visualization types:
-
-- [Area Chart / Bar Chart / Line Chart](#area-chart--bar-chart--line-chart)
-- [Table](#table)
-- [Big Number](#big-number)
-
-### Area Chart / Bar Chart / Line Chart
-
-Area, bar, and line chart visualizations allow you to plot one or more aggregate functions as a time series.
-
-![Time-series visualizations.](./img/widget-builder-time-series-visualizations.png)
-
-Each chart type allows you to solve different problems:
-
-- Area charts are ideal for showing results that are cumulative or where you want to show a breakdown. An example would be “count of errors for each major browser”.
-- Bar charts will group results by day, making them good for daily roll-ups or as “big picture” summaries. An example would be “count of errors per day”.
-- Line charts are a general-purpose visualization. Make sure the Y-Axis units match if you add multiple data series. Mixing count with duration will not yield useful results.
-
-### Table
-
-Table charts display the results of a [Discover Query](/product/explore/discover-queries/). This visualization is well suited to showing key fields and related aggregates. For example “duration percentiles for the most frequently visited transaction names”. You can also choose to display [issues](/product/issues/) data in a table visualization using the [dataset selector](/product/dashboards/widget-builder/#choose-your-dataset).
-
-### Big Number
-
-A big number visualization displays the current value of a single function or [equation](/product/explore/discover-queries/query-builder/query-equations/). This visualization is well suited for high-level aggregates. An example scenario would be “p95 of all transactions”.
-
-## Choose Your Dataset
+## Dataset
 
 In the dataset selection step, choose which type of data you would like to use in your widget. This data is classified into four different datasets: [errors](#error), [transactions](#transactions), [issues](#issues), and [releases](#releases).
 
@@ -78,21 +46,35 @@ Choosing "Releases (sessions, crash rates)" allows you to query properties speci
 - Crash rates for your latest release
 - Session count across releases
 
-### Custom Metrics
+## Visualization Type
 
-Choosing "Custom Metrics" allows you to query your custom metrics data in the same way you would in the [Metrics Explorer Page](/product/metrics/metrics-explorer-page/). Some example widgets might include:
+In this step, you can choose from four different visualization types:
 
-- Number of user signups
-- API request payloads
-- Processing time for a task
+- [Area Chart / Bar Chart / Line Chart](#area-chart--bar-chart--line-chart)
+- [Table](#table)
+- [Big Number](#big-number)
+
+### Area Chart / Bar Chart / Line Chart
+
+Area, bar, and line chart visualizations allow you to plot one or more aggregate functions as a time series.
+
+![Time-series visualizations.](./img/widget-builder-time-series-visualizations.png)
+
+Each chart type allows you to solve different problems:
+
+- Area charts are ideal for showing results that are cumulative or where you want to show a breakdown. An example would be “count of errors for each major browser”.
+- Bar charts will group results by day, making them good for daily roll-ups or as “big picture” summaries. An example would be “count of errors per day”.
+- Line charts are a general-purpose visualization. Make sure the Y-Axis units match if you add multiple data series. Mixing count with duration will not yield useful results.
+
+### Table
 
-To learn more about the types of metrics you can send to Sentry and what you can do with them, see [Metrics](/product/metrics).
+Table charts display the results of a [Discover Query](/product/explore/discover-queries/). This visualization is well suited to showing key fields and related aggregates. For example “duration percentiles for the most frequently visited transaction names”. You can also choose to display [issues](/product/issues/) data in a table visualization using the [dataset selector](/product/dashboards/widget-builder/#choose-your-dataset).
 
-In order to optimize the experience for querying metrics, the widget builder UI is slightly different than it is for other datasets. You can query metrics the same way you would in the [Metrics Explorer Page](/product/metrics/metrics-explorer-page/). With metrics, you can choose how they're aggregated and grouped, as well as define equations with multiple metrics.
+### Big Number
 
-![Custom metrics widget builder.](./img/widget-builder-custom-metrics.png)
+A big number visualization displays the current value of a single function or [equation](/product/explore/discover-queries/query-builder/query-equations/). This visualization is well suited for high-level aggregates. An example scenario would be “p95 of all transactions”.
 
-## Choose Your Columns
+## Columns
 
 The option to set columns is only available for [table visualizations](/product/dashboards/widget-builder/#table).
 
@@ -106,44 +88,42 @@ If two or more columns are added, you can change the order in which they're disp
 
 ![Drag and drop column.](./img/widget-builder-drag-and-drop-column.png)
 
-## Choose What to Plot in the Y-axis
+## Visualize
 
-The option to set a y-axis is available on all visualizations except [table](/product/dashboards/widget-builder/#table). In the case of [time-series visualizations](/product/dashboards/widget-builder/#area-chart--bar-chart--line-chart), you'll be able to plot up to three values that can be functions or equations. If the units of your selections conflict, then the y-axis of the chart will be labeled using the units of the first selection.
+The option to set aggregates for visualizing is available on all visualizations except [table](/product/dashboards/widget-builder/#table). In the case of [time-series visualizations](/product/dashboards/widget-builder/#area-chart--bar-chart--line-chart), you'll be able to plot up to three values that can be functions or equations. If the units of your selections conflict, then the y-axis of the chart will be labeled using the units of the first selection.
 
-You can also choose to construct an equation by clicking “Add an Equation”. Doing this displays a text box where you can enter your equation. Functions that you've added previously in this step will appear for autocompletion, but you can add other functions as well.
+You can also choose to construct an equation by clicking “Add Equation”. Doing this displays a text box where you can enter your equation. Functions that you've added previously in this step will appear for autocompletion, but you can add other functions as well.
 
-## Filter Your Results
+## Filter
 
 Use this field to filter your results by the searchable properties of your [dataset selection](/product/dashboards/widget-builder/#choose-your-dataset). For more information on which properties apply to each dataset, check out our [full Searchable Properties documentation](/concepts/search/searchable-properties/#properties-table).
 
 On [time-series visualizations](/product/dashboards/widget-builder/#area-chart--bar-chart--line-chart) you can add up to three queries to filter your results, each with their own search conditions, to compare results. Each query will generate a new series in your chart for each y-axis. To make it easier to differentiate between them in the legend and tooltip, you can add a legend alias that will be added as a prefix to the labels, as in the example below:
 
 ![Filter your results.](./img/widget-builder-filter-your-results-example.png)
 
-## Group Your Results
+## Group by
 
 The option to group results is only available for [time-series visualizations](/product/dashboards/widget-builder/#area-chart--bar-chart--line-chart). You can group your time series results by different fields or tags such as project, environment, or transaction. You can select up to 20 fields to group your data.
 
 If two or more groups are added, a draggable element will be displayed that you can use to sort the fields, but the sort does not impact how your data is displayed in the visualization:
 
 ![Drag and drop group by.](./img/widget-builder-drag-and-drop-group-by.png)
 
-## Sort By a Column
+## Sort by
 
 The option to sort by a column is only available for [table visualizations](/product/dashboards/widget-builder/#table). Choose one of the columns of your table to sort by, and set whether you want to sort high-to-low or low-to-high.
 
-## Limit
-
-The option to limit your results is only available for [time-series visualizations](/product/dashboards/widget-builder/#area-chart--bar-chart--line-chart) where you've applied a grouping. Depending on your configuration (for example, multiple y-axes, multiple queries), your chart results could become unmanageable, so a limit is imposed. You can change this limit by selecting it in the dropdown. We intend to show at most 10 series (that is, lines in a line chart or bars in a bar chart) when multiple y-axes or queries are selected.
-
-## Sort By a Y-axis
-
-The option to sort by a y-axis is only available if you've applied a grouping to your data (in [“Group your results”](/product/dashboards/widget-builder/#group-your-results)). The sorting applies to the underlying groups in your results and thus affects the series that appear in your chart. You can select fields that you used for grouping, select equations defined in the y-axes, construct any function similar to how you would select a function for plotting, or construct a custom equation.
+The option to sort in timeseries charts is only available if you've applied a grouping to your data (in [“Group by”](/product/dashboards/widget-builder/#group-by)). The sorting applies to the underlying groups in your results and thus affects the series that appear in your chart. You can select fields that you used for grouping, select equations defined in the y-axes, construct any function similar to how you would select a function for plotting, or construct a custom equation.
 
 If you select “Custom Equation”, an extra field appears where you can enter an equation of your choice that will be applied to the query:
 
 ![Custom equation field.](./img/widget-builder-custom-equation-field.png)
 
+## Limit
+
+The option to limit your results is only available for [time-series visualizations](/product/dashboards/widget-builder/#area-chart--bar-chart--line-chart) where you've applied a grouping. Depending on your configuration (for example, multiple y-axes, multiple queries), your chart results could become unmanageable, so a limit is imposed. You can change this limit by selecting it in the dropdown. We intend to show at most 10 series (that is, lines in a line chart or bars in a bar chart) when multiple y-axes or queries are selected.
+
 ## Set Thresholds
 
 The option for setting thresholds is only available for [big number visualizations](/product/dashboards/widget-builder/#big-number). Thresholds help identify problematic widgets with colored indicators. Hovering over the colored indicators at the dashboard level displays the thresholds associated with a widget. Units can be attached to thresholds for duration or rate metric types. An example metric with units would be “p95 of all transactions”.
@@ -152,6 +132,10 @@ The option for setting thresholds is only available for [big number visualizatio
 ![Set Thresholds Step](./img/widget-builder-thresholds.png)
 ![Widget Coloured Indicator Hover](./img/widget-builder-thresholds-hover.png)
 
+## Widget Title
+
+By default, all new widgets are titled “Custom Widget”, but you can edit the title by clicking on the text. We recommend you update the title.
+
 ## Extracted metrics
 
 <Include name="feature-available-for-user-group-early-adopter.mdx" />