Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Vega] Tutorials should be updated to include new inspector #83797

Merged
merged 7 commits into from
Nov 24, 2020
Merged

[Vega] Tutorials should be updated to include new inspector #83797

merged 7 commits into from
Nov 24, 2020

Conversation

DianaDerevyankina
Copy link
Contributor

@DianaDerevyankina DianaDerevyankina commented Nov 19, 2020 •
edited
Loading

Closes #74423

Summary

  • Replaced links to console debugging with a link to the inspector and relevant vega debugging article
  • Got rid of console debugging examples in the tutorial and added some screenshots with inspector instead
  • Added link to vega inspector in vega tutorial that uses signals
  • Removed experimental captions

Checklist

  • Documentation was added for features that require explanation or tutorials

@DianaDerevyankina DianaDerevyankina added Feature:Vega Vega visualizations docs labels Nov 19, 2020
@DianaDerevyankina DianaDerevyankina self-assigned this Nov 19, 2020
wylieconlon
wylieconlon approved these changes Nov 19, 2020
View reviewed changes
Copy link
Contributor

@wylieconlon wylieconlon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The vega-lite tutorial looks good! Can you also make a few more related changes?

  1. Because you've moved most of the JSON configuration into images, I think we need to add a more detailed title text instead of leaving the titles empty in []

  2. The Vega tutorial that uses signals doesn't link to the vega-inspector docs, can you add a link about debugging signals? I think it belongs right after the text "The first step is to add a new signal to track the X position of the cursor:"

  3. This is not directly related, but both of the Vega tutorials have the "Experimental" warning at the top. Can you remove this?

@DianaDerevyankina DianaDerevyankina added the Team:Visualizations Visualization editors, elastic-charts and infrastructure label Nov 20, 2020
@DianaDerevyankina DianaDerevyankina marked this pull request as ready for review November 20, 2020 11:27
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app (Team:KibanaApp)

@DianaDerevyankina DianaDerevyankina added release_note:skip Skip the PR/issue when compiling release notes v7.11.0 labels Nov 20, 2020
KOTungseth
KOTungseth approved these changes Nov 20, 2020
View reviewed changes
Copy link
Contributor

@KOTungseth KOTungseth left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

wylieconlon
wylieconlon reviewed Nov 20, 2020
View reviewed changes
Copy link
Contributor

@wylieconlon wylieconlon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some more wording comments, specifically adding captions that explain the contents of the image.

docs/user/dashboard/tutorials.asciidoc Outdated
}]
```
[role="screenshot"]
image::visualize/images/vega_lite_tutorial_4.png[Vega-Lite tutorial Data sets source]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
image::visualize/images/vega_lite_tutorial_4.png[Vega-Lite tutorial Data sets source]
image::visualize/images/vega_lite_tutorial_4.png[Table for data_0 with columns key, doc_count and array of time_buckets]

docs/user/dashboard/tutorials.asciidoc Outdated
}, ...]
```
[role="screenshot"]
image::visualize/images/vega_lite_tutorial_3.png[Vega-Lite tutorial Inspector Data sets]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
image::visualize/images/vega_lite_tutorial_3.png[Vega-Lite tutorial Inspector Data sets]
image::visualize/images/vega_lite_tutorial_3.png[Data set selector showing root, source_0, data_0, and marks]

docs/user/dashboard/tutorials.asciidoc Outdated
To compare to the visually encoded data, change dropdown selection to `data_0`. You will see:

[role="screenshot"]
image::visualize/images/vega_lite_tutorial_5.png[Vega-Lite tutorial Data sets data]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
image::visualize/images/vega_lite_tutorial_5.png[Vega-Lite tutorial Data sets data]
image::visualize/images/vega_lite_tutorial_5.png[Table for data_0 where the key is NaN instead of a string]

docs/user/dashboard/tutorials.asciidoc Outdated
}]
```
[role="screenshot"]
image::visualize/images/vega_lite_tutorial_6.png[Vega-Lite tutorial Data sets updated data]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
image::visualize/images/vega_lite_tutorial_6.png[Vega-Lite tutorial Data sets updated data]
image::visualize/images/vega_lite_tutorial_6.png[Table for data_0 showing that the column time_buckets.buckets.key is undefined]

docs/user/dashboard/tutorials.asciidoc Outdated
}]
```
[role="screenshot"]
image::visualize/images/vega_lite_tutorial_7.png[Vega-Lite tutorial Data sets transformed data]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
image::visualize/images/vega_lite_tutorial_7.png[Vega-Lite tutorial Data sets transformed data]
image::visualize/images/vega_lite_tutorial_7.png[Table showing data_0 with multiple pages of results, but undefined values in the column time_buckets.buckets.key]

docs/user/dashboard/tutorials.asciidoc Outdated

Vega-Lite generates data using the names `source_0` and `data_0`. `source_0` contains
the results from the {es} query, and `data_0` contains the visually encoded results
which are shown in the chart. To debug this problem, you need to compare both.

To look at the source, open the browser dev tools console and type
`VEGA_DEBUG.view.data('source_0')`. You will see:
To inspect data sets, go to *Inspect* and select *View: Vega debug*. You will see:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To inspect data sets, go to *Inspect* and select *View: Vega debug*. You will see:
To inspect data sets, go to *Inspect* and select *View: Vega debug*. You will see a menu with different data sources:

docs/user/dashboard/tutorials.asciidoc Outdated

To compare to the visually encoded data, open the browser dev tools console and type
`VEGA_DEBUG.view.data('data_0')`. You will see:
To look closer at the source, select the matching option in the dropdown. It looks like:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To look closer at the source, select the matching option in the dropdown. It looks like:
To look closer at the raw data in Vega, select the option for `source_0` in the dropdown:

docs/user/dashboard/tutorials.asciidoc Outdated
[role="screenshot"]
image::visualize/images/vega_lite_tutorial_4.png[Vega-Lite tutorial Data sets source]

To compare to the visually encoded data, change dropdown selection to `data_0`. You will see:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
To compare to the visually encoded data, change dropdown selection to `data_0`. You will see:
To compare to the visually encoded data, change the dropdown selection to `data_0`. You will see:

docs/user/dashboard/tutorials.asciidoc Outdated
@@ -382,19 +371,11 @@ To fix this, try updating the `encoding` of your Vega-Lite spec to:
}
```

This will show more errors, and you can inspect `VEGA_DEBUG.view.data('data_0')` to
This will show more errors, and you can inspect `data_0` to
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
This will show more errors, and you can inspect `data_0` to
This will show more errors, so you need to debug. Click *Inspect*, switch the view to *Vega Debug*, and switch to look at the visually encoded data in `data_0` to

docs/user/dashboard/tutorials.asciidoc
@@ -564,7 +532,7 @@ Now that you've enabled a selection, try moving the mouse around the visualizati
and seeing the points respond to the nearest position:

[role="screenshot"]
image::visualize/images/vega_lite_tutorial_2.png[]
image::visualize/images/vega_lite_tutorial_2.png[Vega-Lite tutorial selection enabled]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
image::visualize/images/vega_lite_tutorial_2.png[Vega-Lite tutorial selection enabled]
image::visualize/images/vega_lite_tutorial_2.png[Vega-Lite tutorial selection enabled]
The selection is controlled by a Vega signal, and can be viewed using the <<vega-inspector, Vega Inspector>>.

wylieconlon
wylieconlon approved these changes Nov 23, 2020
View reviewed changes
Copy link
Contributor

@wylieconlon wylieconlon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. One last comment before merging: can you make sure the title and description of the PR are in their final state? I noticed that the checklist for PRs is empty.

@DianaDerevyankina DianaDerevyankina merged commit fc9c195 into elastic:master Nov 24, 2020
@DianaDerevyankina DianaDerevyankina mentioned this pull request Nov 24, 2020
Merged
DianaDerevyankina added a commit to DianaDerevyankina/kibana that referenced this pull request Nov 24, 2020
@DianaDerevyankina @wylieconlon
[Vega] Tutorials should be updated to include new inspector (elastic#…
d138356 
…83797)

* [Vega] Tutorials should be updated to include new inspector

* Revert unnecessary changes

* Add titles to the screenshots. paste the link to vega inspector and remove experimental caption

* Update some captions

* Update docs/user/dashboard/tutorials.asciidoc

Co-authored-by: Wylie Conlon <wylieconlon@gmail.com>

Co-authored-by: Wylie Conlon <wylieconlon@gmail.com>
DianaDerevyankina added a commit that referenced this pull request Nov 25, 2020
@DianaDerevyankina @wylieconlon
[Vega] Tutorials should be updated to include new inspector (#83797) (#…
669b61c 
…84211)

* [Vega] Tutorials should be updated to include new inspector

* Revert unnecessary changes

* Add titles to the screenshots. paste the link to vega inspector and remove experimental caption

* Update some captions

* Update docs/user/dashboard/tutorials.asciidoc

Co-authored-by: Wylie Conlon <wylieconlon@gmail.com>

Co-authored-by: Wylie Conlon <wylieconlon@gmail.com>

Co-authored-by: Wylie Conlon <wylieconlon@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@KOTungseth KOTungseth KOTungseth approved these changes

@alexwizp alexwizp alexwizp approved these changes

@wylieconlon wylieconlon wylieconlon approved these changes

Assignees

@DianaDerevyankina DianaDerevyankina

Labels
docs Feature:Vega Vega visualizations release_note:skip Skip the PR/issue when compiling release notes Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.11.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Vega] Tutorials should be updated to include new inspector
5 participants
@DianaDerevyankina @elasticmachine @wylieconlon @alexwizp @KOTungseth