[DOCS] Canvas docs 7.9 refresh

docs/canvas/canvas-elements.asciidoc

@@ -1,91 +1,111 @@
 [role="xpack"]
-[[add-canvas-elements]]
-=== Add elements
+[[edit-workpads]]
+== Edit workpads
 
-Create a story about your data by adding elements to your workpad that include images, text, charts, and more. You can create your own elements and connect them to your data sources, add saved objects, and add your own images.
+To create the look and feel that you want, apply format settings to the entire workpad, or individual elements.
 
 [float]
-[[create-canvas-element]]
-==== Create an element
+[[create-variables]]
+=== Create variables
 
-Choose the type of element you want to use, then connect it to your own data.
+When you frequently use copy and paste, create variables to easily reuse strings and patterns. For example, when you clone a large workpad and need to connect your elements to a new index, use variables to update 
+each element instead of updating them manually.
 
-. Click *Add element*, then select the element you want to use.
-+
-[role="screenshot"]
-image::images/canvas-element-select.gif[Canvas elements]
+. Create the variables.
+.. Click *Add a variable*. 
+.. Specify the variable options, then click *Save changes*.
 
-. To familiarize yourself with the element, use the preconfigured data demo data.
-+
-By default, most of the elements you create use demo data until you change the data source. The demo data includes a small data set that you can use to experiment with your element.
+. Apply the variable syntax.
+.. Copy the variable syntax.
+.. Select the element you want to change, then open the expression editor. 
+.. Paste the syntax.
 
-. To connect the element to your data, select *Data*, then select one of the following data sources:
+For example, to change the index pattern for a set of charts:
 
-* *{es} SQL* — Access your data in {es} using SQL syntax. For information about SQL syntax, refer to {ref}/sql-spec.html[SQL language].
+Specify the variable syntax.
 
-* *{es} documents* &mdash; Access your data in {es} without using aggregations. To use, select an index and fields, and optionally enter a query using the <<lucene-query,Lucene Query Syntax>>. Use the *{es} documents* data source when you have low volume datasets, to view raw documents, or to plot exact, non-aggregated values on a chart.
+[role="screenshot"]
+image::images/specify_variable_syntax.png[Specify the variable syntax]
 
-* *Timelion* &mdash; Access your time series data using <<timelion,Timelion>> queries. To use Timelion queries, you can enter a query using the <<lucene-query,Lucene Query Syntax>>.
+Copy the variable syntax, then apply the syntax to each element you want to update in the *Expression editor*.
 
-Each element can display a different data source. Pages and workpads often contain multiple data sources.
+[role="screenshot"]
+image::images/copy_variable_syntax.png[Copy the variable syntax]
 
 [float]
-[[canvas-add-object]]
-==== Add a saved object
+[[apply-changes-to-the-entire-workpad]]
+=== Apply changes to the entire workpad
 
-Add <<managing-saved-objects,saved objects>> to your workpad, such as maps and visualizations.
+With stylesheets, you can change the look of the entire workpad, including fonts, colors, layout, and more.
 
-. Click *Add element > Add from Visualize Library*.
+To get started, enter the changes you want to make in the *Global CSS overrides* text editor, then click *Apply stylesheet*.
 
-. Select the saved object you want to add.
-+
-[role="screenshot"]
-image::images/canvas-map-embed.gif[]
+For example, to change the background for the entire workpad, enter:
+
+[source,text]
+--------------------------------------------------
+.canvasPage {
+background-color: #3990e6;
+}
+--------------------------------------------------
 
-. To use the customization options, click the panel menu, then select one of the following options:
+[float]
+[[change-the-element-settings]]
+=== Change the element settings
 
-* *Edit map* &mdash; Opens <<maps,Maps>> or <<visualize,Visualize>> so that you can edit the original saved object.
+Element settings enable you to change the display options at the element level. For example, use the element settings to change the dimensions, style, or location of an element.
 
-* *Edit panel title* &mdash; Adds a title to the saved object.
+[float]
+[[change-the-display-options]]
+==== Change the display options
 
-* *Customize time range* &mdash; Exposes a time filter dedicated to the saved object.
+Choose the display options for your elements. The options available depend on the element you select. 
 
-* *Inspect* &mdash; Allows you to drill down into the element data.
+To change the element display options, click *Display*, then make your changes in the editor.
 
-[float]
-[[canvas-add-image]]
-==== Add your own image
+To use CSS overrides:
 
-To personalize your workpad, add your own logos and graphics.
+. Click *+* next to *Element style*, then select *CSS*. 
+. In the *CSS* text editor, enter the changes you want to make, then click *Apply stylesheet*.
 
-. Click *Add element > Manage assets*.
+For example, to center an element, enter:
 
-. On the *Manage workpad assets* window, drag and drop your images.
+[source,text]
+--------------------------------------------------
+.canvasRenderEl h1 {
+text.align: center;
+}
+--------------------------------------------------
+
+[float]
+[[clone-elements]]
+==== Clone elements
+To use an element with the same functionality and appearance in multiple places, clone the element.
+
+Select the element, then click *Edit > Clone*. 
 
-. To add the image to the workpad, click the *Create image element* icon.
-+
 [role="screenshot"]
-image::images/canvas-add-image.gif[]
+image::images/clone_element.gif[Clone elements]
 
 [float]
-[[move-canvas-elements]]
-==== Organize elements
+[[move-and-resize-elements]]
+==== Move and resize elements
 
-Move and resize your elements to meet your design needs.
+Canvas provides you with many options to move and resize the elements on your workpad.
 
-* To move, click and hold the element, then drag to the new location.
+* To move elements, click and hold the element, then drag to the new location.
 
-* To move by 1 pixel, select the element, press and hold Shift, then use your arrow keys.
+* To move elements by 1 pixel, select the element, press and hold Shift, then use your arrow keys.
 
-* To move by 10 pixels, select the element, then use your arrow keys.
+* To move elements by 10 pixels, select the element, then use your arrow keys.
 
-* To resize, click and drag the resize handles to the new dimensions.
+* To resize elements, click and drag the resize handles to the new dimensions.
 
 [float]
-[[format-canvas-elements]]
-==== Format elements
+[[edit-elements]]
+==== Edit elements
 
-For consistency and readability across your workpad pages, align, distribute, and reorder elements.
+The element editing options allow you to arrange and organize the elements on your workpad page.
 
 To align two or more elements:
 
@@ -105,54 +125,6 @@ To reorder elements:
 
 . Click *Edit > Order*, then select the order option.
 
-[float]
-[[data-display]]
-==== Change the element display options
-
-Each element has its own display options to fit your design needs.
-
-To choose the display options, click *Display*, then make your changes.
-
-To define the appearance of the container and border:
-
-. Next to *Element style*, click *+*, then select *Container style*.
-
-. Expand *Container style*.
-
-. Change the *Appearance* and *Border* options.
-
-To apply CSS overrides:
-
-. Next to *Element style*, click *+*, then select *CSS*.
-
-. Enter the *CSS*.
-+
-For example, to center the Markdown element, enter:
-+
-[source,text]
---------------------------------------------------
-.canvasRenderEl h1 {
-text.align: center;
-}
---------------------------------------------------
-
-. Click *Apply stylesheet*.
-
-[float]
-[[save-elements]]
-==== Save elements
-
-To use the elements across all workpads, save the elements.
-
-When you're ready to save your element, select the element, then click *Edit > Save as new element*.
-
-[role="screenshot"]
-image::images/canvas_save_element.png[]
-
-To save a group of elements, press and hold Shift, select the elements you want to save, then click *Edit > Save as new element*.
-
-To access your saved elements, click *Add element > My elements*.
-
 [float]
 [[delete-elements]]
 ==== Delete elements
@@ -162,6 +134,3 @@ When you no longer need an element, delete it from your workpad.
 . Select the element you want to delete.
 
 . Click *Edit > Delete*.
-+
-[role="screenshot"]
-image::images/canvas_element_options.png[]

docs/canvas/canvas-present-workpad.asciidoc

@@ -1,6 +1,6 @@
 [role="xpack"]
 [[canvas-present-workpad]]
-=== Present your workpad
+== Present your workpad
 
 When you are ready to present your workpad, use and enable the presentation options.
 
@@ -21,3 +21,32 @@ image::images/canvas-autoplay-interval.png[Element autoplay interval]
 image::images/canvas-fullscreen.png[Fullscreen mode]
 
 . When you are ready to exit fullscreen mode, press the Esc (Escape) key.
+
+[float]
+[[zoom-in-out]]
+=== Use the zoom options
+
+To get a closer look at a portion of your workpad, use the zoom options.
+
+. Click *View > Zoom*.
+
+. Select the zoom option.
++
+[role="screenshot"]
+image::images/canvas-zoom-controls.png[Zoom controls]
+
+
+[float]
+[[configure-auto-refresh-interval]]
+=== Change the auto-refresh interval
+
+Change how often the data refreshes on your workpad.
+
+. Click *View > Auto refresh settings*.
+
+. Select the interval you want to use, or *Set a custom interval*.
++
+[role="screenshot"]
+image::images/canvas-refresh-interval.png[Element data refresh interval]
++
+To manually refresh the data, click image:canvas/images/canvas-refresh-data.png[].

docs/canvas/canvas-share-workpad.asciidoc

@@ -1,12 +1,12 @@
 [role="xpack"]
 [[workpad-share-options]]
-=== Share your workpad
+== Share your workpad
 
 When you've finished your workpad, you can share it outside of {kib}.
 
 [float]
 [[export-single-workpad]]
-==== Export workpads
+=== Export workpads
 
 Create a JSON file of your workpad that you can export outside of {kib}.
 
@@ -19,7 +19,7 @@ Want to export multiple workpads? Go to the *Canvas* home page, select the workp
 
 [float]
 [[create-workpad-pdf]]
-==== Create a PDF
+=== Create a PDF
 
 If you have a license that supports the {report-features}, you can create a PDF copy of your workpad that you can save and share outside {kib}.
 
@@ -32,7 +32,7 @@ For more information, refer to <<reporting-getting-started, Reporting from Kiban
 
 [float]
 [[create-workpad-URL]]
-==== Create a POST URL
+=== Create a POST URL
 
 If you have a license that supports the {report-features}, you can create a POST URL that you can use to automatically generate PDF reports using Watcher or a script.
 
@@ -45,7 +45,7 @@ For more information, refer to <<automating-report-generation, Automating report
 
 [float]
 [[add-workpad-website]]
-==== Share the workpad on a website
+=== Share the workpad on a website
 
 beta[] Canvas allows you to create _shareables_, which are workpads that you download and securely share on any website. To customize the behavior of the workpad on your website, you can choose to autoplay the pages or hide the workpad toolbar.
 

docs/canvas/canvas-tutorial.asciidoc

@@ -124,7 +124,7 @@ Here are some things to try:
 
 * Play with the {kibana-ref}/add-sample-data.html[sample Canvas workpads].
 
-* Build presentations of your own live data with <<create-canvas-workpad,workpads>>.
+* Build presentations of your own live data with <<create-workpads,workpads>>.
 
 * Learn more about <<add-canvas-elements,elements>> &mdash; the building blocks of your workpad.