New visualization type selection #23833

timroes · 2018-10-04T15:49:27Z

Summary

Fixes #17024

Implement the new visualization type selection in an EUI modal.

TODOs

Remove vis categories
~~Create longer descriptions for all visualizations~~ (not part of this PR, blocked by Allow a set of whitelisted HTML tags inside of i18n.defaultMessage. #24090)
Cleanup code/component
Remove old wizard code
Fix tests

Checklist

Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR.

This was checked for cross-browser compatability, including a check against IE11
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

For maintainers

This was checked for breaking API changes and was labeled appropriately
This includes a feature additition or change that requires a release note and was labeled appropriately

Dev Docs

Visualization Categories

With introduction of the new visualization type selection we removed the category key from visualizations. All you need to do is to remove the category key from your visualization registration.

If you used CATEGORY.HIDDEN as a value to hide the type from the visualization wizard, just use the new hidden: true property instead.

elasticmachine · 2018-10-04T16:05:08Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-10-04T16:48:50Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-10-15T14:29:38Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-10-15T15:34:58Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-10-15T17:21:54Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

timroes · 2018-10-16T10:10:17Z

Jenkins, test this - browser didn't start

elasticmachine · 2018-10-16T11:39:03Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-10-17T11:37:06Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

…to eui-vis-type-selection

elasticmachine · 2018-10-17T15:41:05Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-11-06T12:32:46Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

timroes · 2018-11-07T08:15:56Z

Jenkins, test this

elasticmachine · 2018-11-16T13:39:59Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-11-19T08:27:36Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

timroes · 2018-11-19T08:36:11Z

Jenkins, test this - CI failure

elasticmachine · 2018-11-19T10:49:28Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

cchaos

Looks really good. I did notice that some of the "lab" visualizations have not been changed to "experimental". Also, here is a PR with some design fixes: timroes#4

cchaos · 2018-11-19T16:58:27Z

src/core_plugins/kibana/public/visualize/wizard/type_selection/type_selection.tsx

+          <EuiModalHeaderTitle>
+            <FormattedMessage
+              id="kbn.visualize.newVisWizard.title"
+              defaultMessage="New Visualizations"


My guess is this should not be plural "Visualizations" because it can only create one new one at a time?

timroes · 2018-11-20T07:59:59Z

@cchaos Thanks for the PR. Will incorporate those changes. The lab removal has been done in a separate PR that was just merged yesterday, and I didn't merge master into that PR yet, so that's expected behavior, that there are still lab visualizations around :-)

* Added background graphic from welcome screen to modal * Fixed up responsiveness

…to eui-vis-type-selection

elasticmachine · 2018-11-20T10:17:51Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2018-11-20T11:59:40Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

lukeelmers

Tested locally and this looks great! No major concerns on my end; just added a few nits.

lukeelmers · 2018-11-22T03:38:02Z

src/core_plugins/kibana/public/visualize/wizard/_dialog.scss

@@ -0,0 +1,99 @@
+.visNewVisDialog {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='166' height='157' viewBox='0 0 166 157'%3E%3Cdefs%3E%3ClinearGradient id='untitled-2-a' x1='0%25' y1='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FFF' stop-opacity='.2'/%3E%3Cstop offset='100%25' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='untitled-2-b' cx='0%25' cy='0%25' r='127.787%25' fx='0%25' fy='0%25' gradientTransform='matrix(.681 .68098 -.63326 .7323 0 0)'%3E%3Cstop offset='0%25' stop-color='%23BBB' stop-opacity='.1'/%3E%3Cstop offset='100%25' stop-opacity='.5'/%3E%3C/radialGradient%3E%3ClinearGradient id='untitled-2-c' x1='0%25' y1='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FFF' stop-opacity='.4'/%3E%3Cstop offset='100%25' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='untitled-2-d' cx='0%25' cy='0%25' r='148.851%25' fx='0%25' fy='0%25' gradientTransform='matrix(.6718 .67182 -.74072 .60932 0 0)'%3E%3Cstop offset='0%25' stop-color='%23FFF' stop-opacity='.101'/%3E%3Cstop offset='100%25' stop-opacity='.15'/%3E%3C/radialGradient%3E%3CradialGradient id='untitled-2-e' cx='0%25' cy='0%25' r='127.349%25' fx='0%25' fy='0%25' gradientTransform='matrix(.68331 .68332 -.73013 .63951 0 0)'%3E%3Cstop offset='0%25' stop-color='%23BBB' stop-opacity='.1'/%3E%3Cstop offset='100%25' stop-opacity='.5'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg opacity='.5' fill='none' fill-rule='evenodd' transform='matrix(-1 0 0 1 166 0)'%3E%3Cg opacity='.65' transform='matrix(0 -1 -1 0 146 157)'%3E%3Cpolygon fill='%23DD0A73' points='0 0 157 146 0 146' opacity='.418'/%3E%3Cpolygon fill='url(%23untitled-2-a)' points='0 0 157 146 0 146' style='mix-blend-mode:overlay'/%3E%3Cpolygon fill='url(%23untitled-2-b)' points='0 0 157 146 0 146' opacity='.618' style='mix-blend-mode:overlay'/%3E%3C/g%3E%3Cg opacity='.65' transform='translate(88 71)'%3E%3Cpath fill='%23017F75' d='M0,86 L78,86 C74.2038079,48.730962 43.6293886,16.7871605 0,0 L0,86 Z' opacity='.409'/%3E%3Cpath fill='url(%23untitled-2-c)' d='M0,86 L78,86 C74.2038079,48.730962 43.6293886,16.7871605 0,0 L0,86 Z' style='mix-blend-mode:overlay'/%3E%3Cpath fill='url(%23untitled-2-d)' d='M0,86 L78,86 C74.2038079,48.730962 43.6293886,16.7871605 0,0 L0,86 Z' opacity='.663' style='mix-blend-mode:overlay'/%3E%3C/g%3E%3Cg opacity='.15' transform='translate(73 79)'%3E%3Cpolygon fill='%23353535' points='0 0 73 78 0 78' opacity='.38'/%3E%3Cpolygon fill='url(%23untitled-2-a)' points='0 0 73 78 0 78' style='mix-blend-mode:overlay'/%3E%3Cpolygon fill='url(%23untitled-2-e)' points='0 0 73 78 0 78' style='mix-blend-mode:overlay'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");


I assume the fact that you're inlining here means webpack isn't set up to import svg files?

Yeap it isn't unfortunately, already pinged the operations team regarding that. Actually webpack is not handling the SASS internals at all.

lukeelmers · 2018-11-22T03:42:05Z

src/core_plugins/kibana/public/visualize/wizard/_dialog.scss

+  }
+
+  &::before {
+    top: -$euiSizeXXL + 2px; // Account for search field dropshadow


nit: The 2px value feels a little like a magic number, is it worth making it a variable? Or does EUI provide it as a variable?

On second thought, if @cchaos already reviewed, I'm not really worried about it :)

Actually she wrote that :-) It's coming in from her change PR.

lukeelmers · 2018-11-22T03:48:57Z

src/core_plugins/kibana/public/visualize/wizard/type_selection/type_selection.tsx

+            </EuiFlexItem>
+            <EuiFlexItem className="visNewVisDialog__description" grow={false}>
+              {highlightedType && <VisHelpText visType={highlightedType} />}
+              {!highlightedType && (


nit: could save repetition by using a ternary here

{highlightedType ? ( <foo /> ) : ( <bar /> )}

lukeelmers · 2018-11-22T03:51:39Z

src/core_plugins/kibana/public/visualize/wizard/type_selection/type_selection.tsx

+        {!visType.image &&
+          !visType.legacyIcon && (
+            <EuiIcon type={visType.icon} size="l" color="secondary" aria-hidden="true" />
+          )}


had to read through the conditionals a couple times here, I wonder if there's any way to clean this up?

I extracted it into it's own component with a better documentation. Also one of these path will be removed in 7.0, making this way more readable already :)

elasticmachine · 2018-11-22T09:40:28Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

markov00

Code LGTM. Tested on chrome osx.

elasticmachine · 2018-11-22T10:41:20Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

* First version of new visualization selection * Extract some components * Remove visualization category * Remove old wizard code * Fix i18n ids * Fix tests * Fix tag cloud tests * Fix broken test method * Fix wrong method call * Fix TSVB navigation in tests * Restructure components * Fix for lab removal * Add tests * Timroes/eui vis type selection (#4) * Added background graphic from welcome screen to modal * Fixed up responsiveness * Change wording * Fix test snapshot * Create VisTypeIcon * Implement suggestions * Change experimental wording * Use regular quotes for i18n engine

timroes added release_note:enhancement WIP Work in progress Feature:Visualizations Generic visualization features (in case no more specific feature label is available) v7.0.0 Team:Visualizations Visualization editors, elastic-charts and infrastructure labels Oct 4, 2018

timroes added the release_note:plugin_api_changes Contains a Plugin API changes section for the breaking plugin API changes section. label Oct 15, 2018

Tim Roes added 4 commits October 15, 2018 16:39

First version of new visualization selection

406ce3d

Extract some components

fb76163

Remove visualization category

67305ef

Remove old wizard code

dbb6f01

timroes force-pushed the eui-vis-type-selection branch from 5b604a9 to dbb6f01 Compare October 15, 2018 14:41

Fix i18n ids

5dafd46

Fix tests

f96576c

Merge branch 'master' into eui-vis-type-selection

d157dab

Tim Roes added 3 commits October 17, 2018 15:47

Merge branch 'master' into eui-vis-type-selection

7bc05b4

Merge branch 'eui-vis-type-selection' of github.com:timroes/kibana in…

62a4834

…to eui-vis-type-selection

Fix tag cloud tests

e0095d2

Merge branch 'master' into eui-vis-type-selection

5996d87

Fix broken test method

5ddd6dc

Merge branch 'master' into eui-vis-type-selection

d07cd45

timroes mentioned this pull request Nov 19, 2018

Remove lab stage for visualizations #25702

Merged

2 tasks

cchaos reviewed Nov 19, 2018

View reviewed changes

Tim Roes and others added 5 commits November 20, 2018 09:00

Merge branch 'master' into eui-vis-type-selection

879111c

Timroes/eui vis type selection (#4)

84e0b46

* Added background graphic from welcome screen to modal * Fixed up responsiveness

Change wording

ab4d39d

Merge branch 'eui-vis-type-selection' of github.com:timroes/kibana in…

8c1580b

…to eui-vis-type-selection

Fix test snapshot

e75a82f

lukeelmers approved these changes Nov 22, 2018

View reviewed changes

Tim Roes added 4 commits November 22, 2018 09:26

Merge branch 'master' into eui-vis-type-selection

51abf03

Create VisTypeIcon

1994bd6

Implement suggestions

a1e0fe6

Change experimental wording

8a97754

Use regular quotes for i18n engine

d698e3f

markov00 approved these changes Nov 22, 2018

View reviewed changes

timroes merged commit 8c14c25 into elastic:master Nov 22, 2018

timroes deleted the eui-vis-type-selection branch November 22, 2018 11:52

timroes mentioned this pull request Nov 22, 2018

[6.x] New visualization type selection (#23833) #26085

Merged

bhavyarm mentioned this pull request Jan 18, 2019

[meta] Accessibility Audit for Kibana 6.6 #28599

Closed

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New visualization type selection #23833

New visualization type selection #23833

timroes commented Oct 4, 2018 •

edited by lukeelmers

Loading

elasticmachine commented Oct 4, 2018

elasticmachine commented Oct 4, 2018

elasticmachine commented Oct 15, 2018

elasticmachine commented Oct 15, 2018

elasticmachine commented Oct 15, 2018

timroes commented Oct 16, 2018

elasticmachine commented Oct 16, 2018

elasticmachine commented Oct 17, 2018

elasticmachine commented Oct 17, 2018

elasticmachine commented Nov 6, 2018

timroes commented Nov 7, 2018

elasticmachine commented Nov 16, 2018

elasticmachine commented Nov 19, 2018

timroes commented Nov 19, 2018

elasticmachine commented Nov 19, 2018

cchaos left a comment

cchaos Nov 19, 2018

timroes commented Nov 20, 2018

elasticmachine commented Nov 20, 2018

elasticmachine commented Nov 20, 2018

lukeelmers left a comment

lukeelmers Nov 22, 2018

timroes Nov 22, 2018

lukeelmers Nov 22, 2018

lukeelmers Nov 22, 2018

timroes Nov 22, 2018

lukeelmers Nov 22, 2018

lukeelmers Nov 22, 2018

timroes Nov 22, 2018

elasticmachine commented Nov 22, 2018

markov00 left a comment

elasticmachine commented Nov 22, 2018

		@@ -0,0 +1,99 @@
		.visNewVisDialog {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='166' height='157' viewBox='0 0 166 157'%3E%3Cdefs%3E%3ClinearGradient id='untitled-2-a' x1='0%25' y1='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FFF' stop-opacity='.2'/%3E%3Cstop offset='100%25' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='untitled-2-b' cx='0%25' cy='0%25' r='127.787%25' fx='0%25' fy='0%25' gradientTransform='matrix(.681 .68098 -.63326 .7323 0 0)'%3E%3Cstop offset='0%25' stop-color='%23BBB' stop-opacity='.1'/%3E%3Cstop offset='100%25' stop-opacity='.5'/%3E%3C/radialGradient%3E%3ClinearGradient id='untitled-2-c' x1='0%25' y1='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FFF' stop-opacity='.4'/%3E%3Cstop offset='100%25' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='untitled-2-d' cx='0%25' cy='0%25' r='148.851%25' fx='0%25' fy='0%25' gradientTransform='matrix(.6718 .67182 -.74072 .60932 0 0)'%3E%3Cstop offset='0%25' stop-color='%23FFF' stop-opacity='.101'/%3E%3Cstop offset='100%25' stop-opacity='.15'/%3E%3C/radialGradient%3E%3CradialGradient id='untitled-2-e' cx='0%25' cy='0%25' r='127.349%25' fx='0%25' fy='0%25' gradientTransform='matrix(.68331 .68332 -.73013 .63951 0 0)'%3E%3Cstop offset='0%25' stop-color='%23BBB' stop-opacity='.1'/%3E%3Cstop offset='100%25' stop-opacity='.5'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg opacity='.5' fill='none' fill-rule='evenodd' transform='matrix(-1 0 0 1 166 0)'%3E%3Cg opacity='.65' transform='matrix(0 -1 -1 0 146 157)'%3E%3Cpolygon fill='%23DD0A73' points='0 0 157 146 0 146' opacity='.418'/%3E%3Cpolygon fill='url(%23untitled-2-a)' points='0 0 157 146 0 146' style='mix-blend-mode:overlay'/%3E%3Cpolygon fill='url(%23untitled-2-b)' points='0 0 157 146 0 146' opacity='.618' style='mix-blend-mode:overlay'/%3E%3C/g%3E%3Cg opacity='.65' transform='translate(88 71)'%3E%3Cpath fill='%23017F75' d='M0,86 L78,86 C74.2038079,48.730962 43.6293886,16.7871605 0,0 L0,86 Z' opacity='.409'/%3E%3Cpath fill='url(%23untitled-2-c)' d='M0,86 L78,86 C74.2038079,48.730962 43.6293886,16.7871605 0,0 L0,86 Z' style='mix-blend-mode:overlay'/%3E%3Cpath fill='url(%23untitled-2-d)' d='M0,86 L78,86 C74.2038079,48.730962 43.6293886,16.7871605 0,0 L0,86 Z' opacity='.663' style='mix-blend-mode:overlay'/%3E%3C/g%3E%3Cg opacity='.15' transform='translate(73 79)'%3E%3Cpolygon fill='%23353535' points='0 0 73 78 0 78' opacity='.38'/%3E%3Cpolygon fill='url(%23untitled-2-a)' points='0 0 73 78 0 78' style='mix-blend-mode:overlay'/%3E%3Cpolygon fill='url(%23untitled-2-e)' points='0 0 73 78 0 78' style='mix-blend-mode:overlay'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");

New visualization type selection #23833

New visualization type selection #23833

Conversation

timroes commented Oct 4, 2018 • edited by lukeelmers Loading

Summary

TODOs

Checklist

For maintainers

Dev Docs

Visualization Categories

elasticmachine commented Oct 4, 2018

💔 Build Failed

elasticmachine commented Oct 4, 2018

💔 Build Failed

elasticmachine commented Oct 15, 2018

💔 Build Failed

elasticmachine commented Oct 15, 2018

💔 Build Failed

elasticmachine commented Oct 15, 2018

💔 Build Failed

timroes commented Oct 16, 2018

elasticmachine commented Oct 16, 2018

💔 Build Failed

elasticmachine commented Oct 17, 2018

💔 Build Failed

elasticmachine commented Oct 17, 2018

💔 Build Failed

elasticmachine commented Nov 6, 2018

💔 Build Failed

timroes commented Nov 7, 2018

elasticmachine commented Nov 16, 2018

💚 Build Succeeded

elasticmachine commented Nov 19, 2018

💔 Build Failed

timroes commented Nov 19, 2018

elasticmachine commented Nov 19, 2018

💚 Build Succeeded

cchaos left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

timroes commented Nov 20, 2018

elasticmachine commented Nov 20, 2018

💔 Build Failed

elasticmachine commented Nov 20, 2018

💚 Build Succeeded

lukeelmers left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elasticmachine commented Nov 22, 2018

💔 Build Failed

markov00 left a comment

Choose a reason for hiding this comment

elasticmachine commented Nov 22, 2018

💚 Build Succeeded

timroes commented Oct 4, 2018 •

edited by lukeelmers

Loading