[DOCS] Vis Editors 8.5 (#142520) (#143463)

* [DOCS] Vis Editors 8.5

* Review comments

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit 41d88e6677)

Co-authored-by: Kaarina Tungseth <kaarina.tungseth@elastic.co>

docs/user/dashboard/lens-advanced.asciidoc

@@ -57,13 +57,15 @@ image::images/lens_clickAndDragZoom_7.16.gif[Cursor clicking and dragging across
 
 . In the layer pane, click *Count of Records*.
 
-.. In the *Name* field, enter `Number of orders`.
-
-.. Click *Add advanced options > Normalize by unit*. 
+.. Click *Advanced*. 
 
 .. From the *Normalize by unit* dropdown, select *per hour*, then click *Close*.
 +
-*Normalize unit* converts *Average sales per 12 hours* into *Average sales per 12 hours (per hour)* by dividing the number of hours.
+*Normalize by unit* converts `Count of Records` into `Count of records per hour` by dividing by 24.
+
+.. In the *Name* field, enter `Number of orders`.
+
+.. Click *Close*.
 
 . To hide the *Horizontal axis* label, open the *Bottom Axis* menu, then select *None* from the *Axis title* dropdown.
 
@@ -73,13 +75,13 @@ To identify the 75th percentile of orders, add a reference line:
 
 . Click *Static value*.
 
-.. Click *Quick functions*, then click *Percentile*.
+.. Click *Quick function*, then click *Percentile*.
 
 .. From the *Field* dropdown, select *total_quantity*.
 
-.. In the *Percentile* field, enter `75`.
+.. In the *Reference line value* field, enter `75`.
 
-. Configure the display options.
+. Configure the *Appearance* options.
 
 .. In the *Name* field, enter `75th`.
 
@@ -168,9 +170,11 @@ Add a layer to display the customer traffic:
 
 .. In the *Name* field, enter `Number of customers`.
 
-.. In the *Series color* field, enter *#D36086*.
+.. In the *Series color* field, enter `#D36086`.
 
 .. Click *Right* for the *Axis side*, then click *Close*.
++
+image::images/lens_advancedTutorial_numberOfCustomers_8.5.0.png[Number of customers area chart in Lens]
 
 . From the *Available fields* list, drag *order_date* to the *Horizontal Axis* field in the second layer.
 
@@ -202,7 +206,7 @@ To view change over time as a percentage, create an *Area percentage* chart that
 
 For each order category, create a filter: 
 
-. In the layer pane, click *Add or drag-and-drop a field* for *Break down by*.
+. In the layer pane, click *Add or drag-and-drop a field* for *Breakdown*.
 
 . Click the *Filters* function.
 
@@ -255,7 +259,7 @@ Configure the cumulative sum of store orders:
 
 Filter the results to display the data for only Saturday and Sunday:
 
-. In the layer pane, click *Add or drag-and-drop a field* for *Break down by*. 
+. In the layer pane, click *Add or drag-and-drop a field* for *Breakdown*. 
 
 . Click the *Filters* function.
 
@@ -294,7 +298,7 @@ To create a week-over-week comparison, shift *Count of Records [1]* by one week:
 
 . In the layer pane, click *Count of Records [1]*.
 
-. Click *Add advanced options > Time shift*, select *1 week ago*, then click *Close*.
+. Click *Advanced*, select *1 week ago* from the *Time shift* dropdown, then click *Close*.
 +
 To use custom time shifts, enter the time value and increment, then press Enter. For example, enter *1w* to use the *1 week ago* time shift.
 +
@@ -322,9 +326,11 @@ To compare time range changes as a percent, create a bar chart that compares the
 
 . Click *Formula*, then enter `count() / count(shift='1w') - 1`.
 
-. Open the *Value format* dropdown, select *Percent*, then enter `0` in the *Decimals* field.
+. In the *Name* field, enter `Percent of change`.
 
-. In the *Name* field, enter `Percent of change`, then click *Close*.
+. From the *Value format* dropdown, select *Percent*, then enter `0` in the *Decimals* field.
+
+. Click *Close*.
 +
 [role="screenshot"]
 image::images/lens_percent_chage.png[Bar chart with percent change in sales between the current time and the previous week]
@@ -359,7 +365,7 @@ Create a date histogram table and group the customer count metric by category, s
 
 To split the metric, add columns for each continent using the *Columns* field:
 
-. From the *Available fields* list, drag *geoip.continent_name* to the *Columns* field in the layer pane.
+. From the *Available fields* list, drag *geoip.continent_name* to the *Split metrics by* field in the layer pane.
 +
 [role="screenshot"]
 image::images/lens_table_over_time.png[Date histogram table with groups for the customer count metric]

docs/user/dashboard/lens.asciidoc

@@ -15,21 +15,6 @@ With *Lens*, you can:
 * Use time shifts to compare the data in two time intervals, such as month over month.
 * Add annotations and reference lines.
 
-
-++++
-<script type="text/javascript" async 
-src="https://play.vidyard.com/embed/v4.js"></script>
-<img
-style="width: 100%; margin: auto; display: block;"
-class="vidyard-player-embed"
-src="https://play.vidyard.com/vVJ69WCgUwGNJSDqjPZbaV.jpg"
-data-uuid="vVJ69WCgUwGNJSDqjPZbaV"
-data-v="4"
-data-type="inline"
-/>
-</br>
-++++
-
 [float]
 [[create-the-visualization-panel]]
 ==== Create visualizations
@@ -50,7 +35,7 @@ Choose the data you want to visualize.
 
 . If you want to learn more about the data a field contains, click the field.
 
-. To visualize more than one {data-source}, click *Add layer > Visualization*, then select the {data-source}.
+. To visualize more than one {data-source}, click *Add layer*, select the layer type, then select the {data-source}.
 
 Edit and delete.
 
@@ -58,6 +43,10 @@ Edit and delete.
 
 . To delete a field, close the configuration options, then click *X* next to the field.
 
+. To clone a layer, click image:dashboard/images/lens_layerActions_8.5.0.png[Actions menu to duplicate Lens visualization layers] in the layer pane, then select *Duplicate layer*.
+
+. To clear the layer configuration, click image:dashboard/images/lens_layerActions_8.5.0.png[Actions menu to clear Lens visualization layers] in the layer pane, then select *Clear layer*.
+
 TIP: You can manually apply the changes you make, which is helpful when creating large and complex visualizations. To manually apply your changes, click *Settings* in the toolbar, then deselect *Auto-apply visualization changes*.
 
 [float]
@@ -95,12 +84,16 @@ All columns that belong to the same layer pane group are sorted in the table.
 
 * *Name* &mdash; Specifies the field display name. 
 
+* *Collapse by* &mdash; Aggregates all metric values with the same value into a single number.
+
 * *Value format* &mdash; Specifies how the field value displays in the table. 
 
 * *Text alignment* &mdash; Aligns the values in the cell to the *Left*, *Center*, or *Right*.
 
 * *Hide column* &mdash; Hides the column for the field.
 
+* *Directly filter on click* &mdash; Turns column values into clickable links that allow you to filter or drill down into the data.
+
 * *Summary row* &mdash; Adds a row that displays the summary value. When specified, allows you to enter a *Summary label*.
 
 * *Color by value* &mdash; Applies color to the cell or text values. To change the color, click *Edit*. 
@@ -169,13 +162,13 @@ TIP: For detailed information on formulas, click image:dashboard/images/formula_
 [[compare-data-with-time-offsets]]
 ==== Compare differences over time
 
-Compare your real-time data set to the results that are offset by a time increment. For example, you can compare the real-time percentage of a user CPU time spent to the results offset by one hour. 
+Compare your real-time data to the results that are offset by a time increment. For example, you can compare the real-time percentage of a user CPU time spent to the results offset by one hour. 
 
 . In the layer pane, click the field you want to offset.
 
-. From the *Add advanced options* dropdown, select *Time shift*.
+. Click *Advanced*.
 
-. Select the time offset increment. 
+. In the *Time shift* field, enter the time offset increment. 
 
 For a time shift example, refer to <<compare-time-ranges>>.
 
@@ -185,13 +178,15 @@ For a time shift example, refer to <<compare-time-ranges>>.
 
 preview::[]
 
-Annotations allow you to call out specific points in your visualizations that are important, such as a major change in the data. You can add text and icons to annotations and customize the appearance, such as the line format and color. 
+Annotations allow you to call out specific points in your visualizations that are important, such as a major change in the data. You can add annotations for any {data-source}, add text and icons, specify the line format and color, and more.
 
 [role="screenshot"]
 image::images/lens_annotations_8.2.0.png[Lens annotations]
 
 . In the layer pane, click *Add layer > Annotations*.
 
+. Select the {data-source}.
+
 . To open the annotation options, click *Event*.
 
 . Specify the *Annotation date*.
@@ -202,7 +197,7 @@ image::images/lens_annotations_8.2.0.png[Lens annotations]
 
 . Change the *Appearance* options for how you want the annotation to display.
 
-. Click *Close*.
+. To close, click *X*.
 
 [float]
 [[add-reference-lines]]

docs/user/dashboard/tsvb.asciidoc

@@ -134,9 +134,9 @@ The *Markdown* visualization supports Markdown with Handlebar (mustache) syntax
 
 [float]
 [[edit-visualizations-in-lens]]
-==== Edit visualizations in Lens
+==== Open and edit TSVB visualizations in Lens
 
-Open and edit your Time Series *TSVB* visualizations in *Lens*, which is the drag-and-drop visualization editor that provides you with additional visualization types, reference lines, and more.
+Open and edit Time Series and Top N *TSVB* visualizations in *Lens*. When you open *TSVB* visualizations in *Lens*, all configuration options and annotations appear in the *Lens* visualization editor.
 
 To get started, click *Edit visualization in Lens* in the toolbar.