diff --git a/docs/visualize/images/vega_tutorial_getting_help.png b/docs/visualize/images/vega_tutorial_getting_help.png new file mode 100644 index 0000000000000..698a4eb889c8c Binary files /dev/null and b/docs/visualize/images/vega_tutorial_getting_help.png differ diff --git a/docs/visualize/images/vega_tutorial_inspect_data_sets.png b/docs/visualize/images/vega_tutorial_inspect_data_sets.png new file mode 100644 index 0000000000000..027841af934d6 Binary files /dev/null and b/docs/visualize/images/vega_tutorial_inspect_data_sets.png differ diff --git a/docs/visualize/images/vega_tutorial_inspect_requests.png b/docs/visualize/images/vega_tutorial_inspect_requests.png new file mode 100644 index 0000000000000..8b9093be9b18d Binary files /dev/null and b/docs/visualize/images/vega_tutorial_inspect_requests.png differ diff --git a/docs/visualize/vega.asciidoc b/docs/visualize/vega.asciidoc index 3a1c57da93f07..9b8c32d7e41f0 100644 --- 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 <>. + +===== 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` — 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 /_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