[Vega][Inspect panel] Write tutorials and reference (#73262) (#73775)

* [Vega][Inspect panel] Write tutorials and reference * update screens * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> * Update docs/visualize/vega.asciidoc Co-authored-by: Kaarina Tungseth <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Kaarina Tungseth <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Kaarina Tungseth <[email protected]>
elastic · Jul 30, 2020 · 7b8bc58 · 7b8bc58
1 parent d6dc79d
commit 7b8bc58
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 25 deletions.
diff --git a/docs/visualize/images/vega_tutorial_getting_help.png b/docs/visualize/images/vega_tutorial_getting_help.png
diff --git a/docs/visualize/images/vega_tutorial_inspect_data_sets.png b/docs/visualize/images/vega_tutorial_inspect_data_sets.png
diff --git a/docs/visualize/images/vega_tutorial_inspect_requests.png b/docs/visualize/images/vega_tutorial_inspect_requests.png
diff --git a/docs/visualize/vega.asciidoc b/docs/visualize/vega.asciidoc
@@ -1505,6 +1505,46 @@ Vega can load data from any URL, but this is disabled by default in {kib}.
 To change this, set `vis_type_vega.enableExternalUrls: true` in `kibana.yml`,
 then restart {kib}.
 
+[[vega-inspector]]
+==== Vega Inspector
+Use the contextual *Inspect* tool to gain insights into different elements. 
+For Vega visualizations, there are two different views: *Request* and *Vega debug*.
+
+===== Inspect Elasticsearch requests
+
+Vega uses the {ref}/search-search.html[{es} search API] to get documents and aggregation 
+results from {es}. To troubleshoot these requests, click *Inspect*, which shows the most recent requests. 
+In case your specification has more than one request, you can switch between the views using the *View* dropdown.
+
+[role="screenshot"]
+image::visualize/images/vega_tutorial_inspect_requests.png[]
+
+===== Vega debugging
+
+With the *Vega debug* view, you can inspect the *Data sets* and *Signal Values* runtime data. 
+
+The runtime data is read from the 
+https://vega.github.io/vega/docs/api/debugging/#scope[runtime scope]. 
+
+[role="screenshot"]
+image::visualize/images/vega_tutorial_inspect_data_sets.png[]
+
+To debug more complex specs, access to the `view` variable.  For more information, refer to
+the <<vega-browser-debugging-console, Vega browser debugging process>>.
+
+===== Asking for help with a Vega spec
+
+Because of the dynamic nature of the data in {es}, it is hard to help you with 
+Vega specs unless you can share a dataset. To do this, click *Inspect*, select the *Vega debug* view,
+then select the *Spec* tab:
+
+[role="screenshot"]
+image::visualize/images/vega_tutorial_getting_help.png[]
+
+To copy the response, click *Copy to clipboard*. Paste the copied data to 
+https://gist.github.com/[gist.github.com], possibly with a .json extension. Use the [raw] button, 
+and share that when asking for help.
+
 [[vega-browser-debugging-console]]
 ==== Browser debugging console
 
@@ -1522,31 +1562,6 @@ of Vega-Lite, this is the output of the Vega-Lite compiler.
 * `vegalite_spec` &mdash; If this is a Vega-Lite graph, JSON specification of the graph before
 Vega-Lite compilation.
 
-[[vega-data]]
-==== Debugging data
-
-experimental[] If you are using an {es} query, make sure your resulting data is
-what you expected. The easiest way to view it is by using the "networking"
-tab in the browser debugging tools (for example, F12). Modify the graph slightly
-so that it makes a search request, and view the response from the
-server. Another approach is to use
-https://www.elastic.co/guide/en/kibana/current/console-kibana.html[Dev Tools]. Place the index name into the first line:
-`GET <INDEX_NAME>/_search`, then add your query as the following lines
-(just the value of the `"query"` field).
-
-[[vega-getting-help]]
-==== Asking for help with a Vega spec
-
-Because of the dynamic nature of the data in {es}, it is hard to help you with
-Vega specs unless you can share a dataset. To do this, use the browser developer
-tools and type:
-
-`JSON.stringify(VEGA_DEBUG.vegalite_spec, null, 2)`
-
-Copy the response to https://gist.github.com/[gist.github.com], possibly
-with a `.json` extension, use the `[raw]` button, and share that when
-asking for help.
-
 [float]
 [[vega-expression-functions]]
 ==== (Vega only) Expression functions which can update the time range and dashboard filters