Add inspector for VEGA #70941

alexwizp · 2020-07-07T11:30:50Z

Closes: #31189, #71413

Summary

Add Inspector Panel for Vega Visualization

Request tab:

Vega Debug tab:

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
This was checked for keyboard-only and screenreader accessibility
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

timroes · 2020-07-07T14:54:59Z

Kibana Pipeline / kibana-oss-agent / Chrome UI Functional Tests.test/functional/apps/visualize/_vega_chart·js.visualize app vega chart in visualize app vega chart initial render should not have inspector enabled

Sounds like a good test to fail 🎉

Closes: elastic#31189

src/plugins/vis_type_vega/public/vega_fn.ts

nyurik · 2020-07-08T16:43:31Z

This looks awesome, so happy it is happening!!! There are a few items we may want to consider:

When users ask questions or experiment with the official Vega editor, they follow my guide to run JSON.stringify(VEGA_DEBUG.vega_spec) or JSON.stringify(VEGA_DEBUG.vegalite_spec) to convert their code into a pure JSON with the raw data. We probably should offer this, possibly as a new tab?
there could be more than one ES request - how do you show that in the inspector?
Vega supports dynamic data sources (we haven't implemented that yet) - so it is possible for some user actions to cause an additional ES request(s) to be made. Please consider how to handle that (we don't have to support it from the start)
if it is possible to hold the inspector window open while experimenting with a Vega graph, the signals should auto-refresh (e.g. on timer?), ideally with highlighting of the changed value (like in an IDE to show which signal actually changed)

Thanks!

nyurik · 2020-07-08T16:47:06Z

P.S. Visuals - for the signals and data set tabs, I don't think we actually need the labes "Data:", "View:", and "Signals:" -- seems self evident, and takes up space. Should probably do it the same way as for request/response -- no extra labeling there.

nyurik · 2020-07-08T16:51:54Z

P.P.S. Sorry for the nit -- would it make sense to make general inspector changes in a separate PR? Seems a bit confusing to do parameter refactoring and other general inspector work together with the vega inspector.

alexwizp · 2020-07-09T11:30:16Z

there could be more than one ES request - how do you show that in the inspector?

Request panel logs all requests separately. It should looks something like:

alexwizp · 2020-07-10T08:20:20Z

@elasticmachine merge upstream

# Conflicts: # src/plugins/vis_type_vega/kibana.json

alexwizp · 2020-07-13T08:46:01Z

@elasticmachine merge upstream

timroes · 2020-07-13T10:22:04Z

Currently blocked by #71413

wylieconlon

The behavior is working as expected. The size of the Signals inspector makes it hard to use for debugging large JSON objects, and I've suggested some improvements to this which would make it a little easier- but these are optional.

src/plugins/vis_type_vega/public/vega_inspector/components/inspector_data_grid.tsx

src/plugins/vis_type_vega/public/vega_inspector/components/signal_viewer.tsx

alexwizp · 2020-07-17T11:40:02Z

@ppisljar could you please review this PR again?

src/plugins/vis_type_vega/public/vega_inspector/components/data_viewer.tsx

alexwizp · 2020-07-19T19:57:33Z

@elasticmachine merge upstream

alexwizp · 2020-07-20T07:46:43Z

@elasticmachine merge upstream

- Fixing up layout trying to remove any `.eui` classes and uses flex instead of percentage - Fixing text to use `Sentence case` not `Title Case`

cchaos

👍 LGTM from Design. Tested in Chrome and Firefox. I've added some notes about todo's for EUI to supply adding classes to a few internal components, but at least they aren't targeting EUI classes anymore.

kibanamachine · 2020-07-21T09:20:29Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: dc06a5a

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
inspector	49	+10	39
visTypeVega	197	+9	188
total	-	+19	-

async chunks size

id	value	diff	baseline
visTypeVega	1.4MB	+344.0B	1.4MB

page load bundle size

id	value	diff	baseline
data	1.4MB	+52.0B	1.4MB
expressions	343.4KB	+94.0B	343.3KB
inputControlVis	295.2KB	+21.0B	295.2KB
inspector	278.8KB	+3.7KB	275.1KB
visTypeMarkdown	552.8KB	+21.0B	552.7KB
visTypeTimelion	712.5KB	+21.0B	712.5KB
visTypeTimeseries	280.2KB	+21.0B	280.2KB
visTypeVega	660.6KB	+33.2KB	627.4KB
visualizations	407.3KB	+352.0B	407.0KB
total	-	+37.4KB	-

History

💔 Build #63044 failed 9badea8
💚 Build #62830 succeeded 4868834
💚 Build #62633 succeeded 4362483
💚 Build #62596 succeeded 30d9093
💚 Build #62591 succeeded fe8b932

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

ppisljar

app arch code LGTM

* master: (28 commits) allow some env settings for ingest manager (elastic#72544) Add inspector for VEGA (elastic#70941) chore(NA): fix grunt task for test:coverage (elastic#72539) Archive e2e test results in ES (elastic#72575) preserve 401 errors from new es client (elastic#71248) [SIEM][Detections] Updates text for severity and risk_score overrides (elastic#72244) fixing error occurences tooltip (elastic#72425) use KibanaClient interface instead of Client for new client interface (elastic#72388) [APM] Handle ML errors (elastic#72316) [Discover] Improve histogram tests (elastic#72235) [ftr/webdriver] retry on all errors, use Rx so that timers are canceled (elastic#72540) [pre-req] Move .storybook to storybook; standardize files (elastic#72384) [Security_Solution][Resolver][Bug]: Restore breadcrumb background (elastic#72538) [ML] Fix annotation detector linking & delayed_data(0) (elastic#72468) [Security Solution][Exceptions] - Make esTypes and subType available to index patterns (elastic#72336) [SIEM] Uses faster wait from testing-library and removes duplicate older wait idiom (elastic#72509) Fix long combo box items breaking out of flex item width (elastic#72512) [pipeline/commitStatus] update commit status in baseline-capture job (elastic#72366) [Security Solution][Resolver] Update the resolver element ref on scroll events if the position of the element has changed within the page (elastic#72461) [Maps] auto-fit to data bounds (elastic#72129) ...

…feature-privileges * alerting/consumer-based-rbac: (30 commits) removed uneeded tests expclude security wrapper in SO client passed to ActionsClient allow some env settings for ingest manager (elastic#72544) Add inspector for VEGA (elastic#70941) chore(NA): fix grunt task for test:coverage (elastic#72539) Archive e2e test results in ES (elastic#72575) preserve 401 errors from new es client (elastic#71248) [SIEM][Detections] Updates text for severity and risk_score overrides (elastic#72244) fixing error occurences tooltip (elastic#72425) use KibanaClient interface instead of Client for new client interface (elastic#72388) [APM] Handle ML errors (elastic#72316) [Discover] Improve histogram tests (elastic#72235) [ftr/webdriver] retry on all errors, use Rx so that timers are canceled (elastic#72540) [pre-req] Move .storybook to storybook; standardize files (elastic#72384) [Security_Solution][Resolver][Bug]: Restore breadcrumb background (elastic#72538) [ML] Fix annotation detector linking & delayed_data(0) (elastic#72468) [Security Solution][Exceptions] - Make esTypes and subType available to index patterns (elastic#72336) [SIEM] Uses faster wait from testing-library and removes duplicate older wait idiom (elastic#72509) Fix long combo box items breaking out of flex item width (elastic#72512) [pipeline/commitStatus] update commit status in baseline-capture job (elastic#72366) ...

* [WIP] Add inspector for VEGA Closes: elastic#31189 * view -> dataset * cleanup * add spec viewer * cleanup code * use rx to retrieve data from adapters * Make custom inspector adapters registerable from the visType * fix flex-box size * cleanup * remove visTypesWithoutInspector from visualize_embeddable * fix PR comments * add vega folder to sass-lint * fix jest * Update src/plugins/vis_type_vega/public/vega_inspector/components/data_viewer.tsx Co-authored-by: Wylie Conlon <[email protected]> * use addSignalListener * cleanup * add onColumnResize handler * EuiCodeEditor -> CodeEditor * fix type_check * fix issue with pagination * fix extra vertical scroll * add area-label for EuiButtonIcon * add area-label for EuiComboBox * Design Commit - Fixing up layout trying to remove any `.eui` classes and uses flex instead of percentage - Fixing text to use `Sentence case` not `Title Case` * Wrapper around signal viewer table * fix Jest snapshot Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Wylie Conlon <[email protected]> Co-authored-by: cchaos <[email protected]>

* [WIP] Add inspector for VEGA Closes: #31189 * view -> dataset * cleanup * add spec viewer * cleanup code * use rx to retrieve data from adapters * Make custom inspector adapters registerable from the visType * fix flex-box size * cleanup * remove visTypesWithoutInspector from visualize_embeddable * fix PR comments * add vega folder to sass-lint * fix jest * Update src/plugins/vis_type_vega/public/vega_inspector/components/data_viewer.tsx Co-authored-by: Wylie Conlon <[email protected]> * use addSignalListener * cleanup * add onColumnResize handler * EuiCodeEditor -> CodeEditor * fix type_check * fix issue with pagination * fix extra vertical scroll * add area-label for EuiButtonIcon * add area-label for EuiComboBox * Design Commit - Fixing up layout trying to remove any `.eui` classes and uses flex instead of percentage - Fixing text to use `Sentence case` not `Title Case` * Wrapper around signal viewer table * fix Jest snapshot Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Wylie Conlon <[email protected]> Co-authored-by: cchaos <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Wylie Conlon <[email protected]> Co-authored-by: cchaos <[email protected]>

alexwizp added the WIP Work in progress label Jul 7, 2020

alexwizp force-pushed the 31189 branch 2 times, most recently from 57bd6bd to 392a39e Compare July 8, 2020 08:33

[WIP] Add inspector for VEGA

009fdcc

Closes: elastic#31189

alexwizp force-pushed the 31189 branch from 392a39e to 009fdcc Compare July 8, 2020 12:24

view -> dataset

2d17852

alexwizp requested a review from ppisljar July 8, 2020 14:06

alexwizp commented Jul 8, 2020

View reviewed changes

src/plugins/vis_type_vega/public/vega_fn.ts Outdated Show resolved Hide resolved

alexwizp requested a review from nyurik July 8, 2020 14:35

cleanup

61be91c

add spec viewer

ed8372f

alexwizp force-pushed the 31189 branch from 50ca303 to 0b67265 Compare July 9, 2020 11:24

alexwizp added 2 commits July 9, 2020 14:44

cleanup code

2fe11b4

Merge remote-tracking branch 'upstream/master' into 31189

766a81e

alexwizp force-pushed the 31189 branch from 0b67265 to 766a81e Compare July 9, 2020 11:45

alexwizp requested a review from stratoula July 9, 2020 11:48

alexwizp added 3 commits July 10, 2020 11:32

Merge remote-tracking branch 'upstream/master' into 31189

963520c

# Conflicts: # src/plugins/vis_type_vega/kibana.json

use rx to retrieve data from adapters

2c9b170

Merge remote-tracking branch 'upstream/master' into 31189

11354b6

Merge branch 'master' into 31189

18b20b2

timroes mentioned this pull request Jul 13, 2020

Make custom inspector adapters registerable from the visType #71413

Closed

timroes mentioned this pull request Jul 13, 2020

[Discuss] When to use EuiCodeBlock, EuiCodeEditor and CodeEditor (from react_utils, Monaco) #71425

Closed

cleanup

850c8f7

alexwizp force-pushed the 31189 branch from ef9271d to 850c8f7 Compare July 16, 2020 15:42

wylieconlon approved these changes Jul 16, 2020

View reviewed changes

src/plugins/vis_type_vega/public/vega_inspector/components/inspector_data_grid.tsx Show resolved Hide resolved

src/plugins/vis_type_vega/public/vega_inspector/components/signal_viewer.tsx Outdated Show resolved Hide resolved

alexwizp added 6 commits July 16, 2020 22:12

add onColumnResize handler

83ead53

EuiCodeEditor -> CodeEditor

fb9fa05

Merge remote-tracking branch 'upstream/master' into 31189

0443586

fix type_check

fd847b8

fix issue with pagination

fe8b932

fix extra vertical scroll

30d9093

cchaos reviewed Jul 17, 2020

View reviewed changes

src/plugins/vis_type_vega/public/vega_inspector/components/data_viewer.tsx Show resolved Hide resolved

alexwizp added 2 commits July 17, 2020 16:48

add area-label for EuiButtonIcon

7293468

add area-label for EuiComboBox

4362483

Merge branch 'master' into 31189

4868834

cchaos added 2 commits July 20, 2020 12:49

Design Commit

f94bc22

- Fixing up layout trying to remove any `.eui` classes and uses flex instead of percentage - Fixing text to use `Sentence case` not `Title Case`

Wrapper around signal viewer table

9badea8

cchaos approved these changes Jul 20, 2020

View reviewed changes

alexwizp added 2 commits July 21, 2020 10:25

Merge remote-tracking branch 'upstream/master' into 31189

7d1d1fb

fix Jest snapshot

dc06a5a

ppisljar approved these changes Jul 21, 2020

View reviewed changes

alexwizp merged commit e1ffccc into elastic:master Jul 21, 2020

alexwizp mentioned this pull request Jul 21, 2020

[7.x] Add inspector for VEGA (#70941) #72625

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add inspector for VEGA #70941

Add inspector for VEGA #70941

alexwizp commented Jul 7, 2020 •

edited

Loading

timroes commented Jul 7, 2020

nyurik commented Jul 8, 2020 •

edited by alexwizp

Loading

nyurik commented Jul 8, 2020

nyurik commented Jul 8, 2020

alexwizp commented Jul 9, 2020

alexwizp commented Jul 10, 2020

alexwizp commented Jul 13, 2020

timroes commented Jul 13, 2020

wylieconlon left a comment

alexwizp commented Jul 17, 2020

alexwizp commented Jul 19, 2020

alexwizp commented Jul 20, 2020

cchaos left a comment

kibanamachine commented Jul 21, 2020

ppisljar left a comment

Add inspector for VEGA #70941

Add inspector for VEGA #70941

Conversation

alexwizp commented Jul 7, 2020 • edited Loading

Summary

Request tab:

Vega Debug tab:

Checklist

For maintainers

timroes commented Jul 7, 2020

nyurik commented Jul 8, 2020 • edited by alexwizp Loading

nyurik commented Jul 8, 2020

nyurik commented Jul 8, 2020

alexwizp commented Jul 9, 2020

alexwizp commented Jul 10, 2020

alexwizp commented Jul 13, 2020

timroes commented Jul 13, 2020

wylieconlon left a comment

Choose a reason for hiding this comment

alexwizp commented Jul 17, 2020

alexwizp commented Jul 19, 2020

alexwizp commented Jul 20, 2020

cchaos left a comment

Choose a reason for hiding this comment

kibanamachine commented Jul 21, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

async chunks size

page load bundle size

History

ppisljar left a comment

Choose a reason for hiding this comment

alexwizp commented Jul 7, 2020 •

edited

Loading

nyurik commented Jul 8, 2020 •

edited by alexwizp

Loading