[Canvas] Improvements to Expression Editor by cqliu1 · Pull Request #32336 · elastic/kibana

cqliu1 · 2019-03-01T19:59:46Z

Summary

Closes #23934.
Related to #27697.

This PR adds a couple UX enhancements to the expression editor.

adds slider to adjust font size in expression editor
adds maximize/minimize button to expand and shrink the expression

Checklist

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

This was checked for cross-browser compatibility, 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 addition or change that requires a release note and was labeled appropriately

elasticmachine · 2019-03-01T19:59:48Z

Pinging @elastic/kibana-canvas

elasticmachine · 2019-03-01T23:03:01Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

ryankeairns · 2019-03-04T21:15:03Z

Design PR here -> cqliu1#3

elasticmachine · 2019-03-04T22:38:01Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

w33ble · 2019-03-05T23:01:34Z

left over debugging code?

Right! I'll remove it

elasticmachine · 2019-03-05T23:02:43Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

w33ble · 2019-03-05T23:02:56Z

left over debugging code?

I'll remove this too

elasticmachine · 2019-03-05T23:51:05Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-03-06T00:38:30Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

shaunmcgough · 2019-03-06T18:37:19Z

Hi there. This is a great feature that keeps it simple while adding a lot of functionality. Great work. When I am looking at this, I noticed the following behavior. Here are some steps to reproduce. Note I am using the eCommerce - Revenue Tracking dashboard.

Click on one of the pairs of jeans
Click expression editor
Click fullscreen / maximizE
Notice the upper right "Selected Layer" section is still there, and you can scroll through things, toggle between Display and Data, etc.

I don't know if this section is needed in full screen, or perhaps should be a drag out from the right with an arrow to pop it out. What are the thoughts on this section in fullscreen?

alexfrancoeur

Font size & expand are two much needed features, these look great Catherine! While we're in there, I'd be interested in hearing the groups thoughts on adding a button for previewing a data source from the expression editor. I originally wanted it to help build out custom conditional logic #23162

Probably out of scope for this PR, but thought I'd bring it up if we're making UI/UX improvements.

ryankeairns · 2019-03-07T15:54:13Z

@alexfrancoeur The data preview option would be great and I also agree that it should be tackled in a separate PR.

@shaunmcgough We can explore ways to improve that area, but it's going to take a bit of wrangling. Given that, I would vote for moving this change to a separate issue as well. The gap (as it stands) allows for the autocomplete panel to still be functional when it appears above the editor. When we revisit this, I will come up with some options for better utilizing that space - overlay the background content, change the autocomplete to a context menu vs fullwidth panel, etc.

w33ble · 2019-03-07T16:20:17Z

hearing the groups thoughts on adding a button for previewing a data source

I actually want to take this farther. I would like you to be able to see what your data looks like at any point in the expression. My thought is we could have a "run until cursor" option somewhere (the auto-complete dialog maybe) so you can just use your cursor to control how much of the expression runs. I'm planning to build a POC of that.

w33ble · 2019-03-07T16:21:59Z

      }));
      setExpression(exp);
    },
+    setFontSize: ({ setFontSize }) => size => {


I've never tried overriding a prop value like that. That's a neat idea.

w33ble

Such a great improvement! Either one of these would have been a welcome addition on their own. LGTM!

cqliu1 · 2019-03-07T17:45:26Z

@shaunmcgough @ryankeairns I opened #32671 re: Shaun's feedback. It makes sense to fullscreen the expression editor to cover up the controls up top.

ryankeairns

👍 LGTM

* Added font size controls and expand/shrink button to expression editor * style the expression editor controls * Removed debug code

alexfrancoeur · 2019-03-08T20:29:53Z

I actually want to take this farther. I would like you to be able to see what your data looks like at any point in the expression. My thought is we could have a "run until cursor" option somewhere (the auto-complete dialog maybe) so you can just use your cursor to control how much of the expression runs. I'm planning to build a POC of that.

fwiw, love that suggestion @w33ble

* Added font size controls and expand/shrink button to expression editor * style the expression editor controls * Removed debug code

cqliu1 added WIP Work in progress Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// labels Mar 1, 2019

cqliu1 requested review from a team as code owners March 1, 2019 19:59

cqliu1 force-pushed the canvas/enhance-expression-editor branch from 69ec3ef to 6cc6ae9 Compare March 5, 2019 22:17

cqliu1 requested review from alexfrancoeur and w33ble March 5, 2019 22:19

cqliu1 added review v7.0.0 v8.0.0 v6.7.0 v7.2.0 and removed WIP Work in progress labels Mar 5, 2019

w33ble reviewed Mar 5, 2019

View reviewed changes

cqliu1 changed the title ~~[Canvas][WIP] Improvements to Expression Editor~~ [Canvas] Improvements to Expression Editor Mar 5, 2019

cqliu1 requested a review from ryankeairns March 5, 2019 23:11

cqliu1 and others added 3 commits March 5, 2019 16:52

Added font size controls and expand/shrink button to expression editor

0bb8aa8

style the expression editor controls

f889c75

Removed debug code

59ff226

cqliu1 force-pushed the canvas/enhance-expression-editor branch from f65e2f2 to 59ff226 Compare March 5, 2019 23:52

alexfrancoeur approved these changes Mar 7, 2019

View reviewed changes

w33ble reviewed Mar 7, 2019

View reviewed changes

w33ble approved these changes Mar 7, 2019

View reviewed changes

cqliu1 removed the v6.7.0 label Mar 7, 2019

cqliu1 mentioned this pull request Mar 7, 2019

[Canvas] Expression editor maximized doesn't cover up all workpad controls #32671

Closed

ryankeairns approved these changes Mar 7, 2019

View reviewed changes

cqliu1 merged commit 45149c0 into elastic:master Mar 7, 2019

cqliu1 deleted the canvas/enhance-expression-editor branch March 7, 2019 18:22

cqliu1 mentioned this pull request Mar 7, 2019

[7.x] [Canvas] Improvements to Expression Editor (#32336) #32678

Merged

cqliu1 added a commit to cqliu1/kibana that referenced this pull request Mar 7, 2019

[Canvas] Improvements to Expression Editor (elastic#32336)

24f31e8

* Added font size controls and expand/shrink button to expression editor * style the expression editor controls * Removed debug code

cqliu1 mentioned this pull request Mar 7, 2019

[7.0] [Canvas] Improvements to Expression Editor (#32336) #32679

Merged

cqliu1 added a commit to cqliu1/kibana that referenced this pull request Mar 7, 2019

[Canvas] Improvements to Expression Editor (elastic#32336)

a8c5412

* Added font size controls and expand/shrink button to expression editor * style the expression editor controls * Removed debug code

cqliu1 added a commit that referenced this pull request Mar 7, 2019

[Canvas] Improvements to Expression Editor (#32336) (#32679)

fec3f64

* Added font size controls and expand/shrink button to expression editor * style the expression editor controls * Removed debug code

cqliu1 added a commit that referenced this pull request Mar 7, 2019

[Canvas] Improvements to Expression Editor (#32336) (#32678)

a06602b

* Added font size controls and expand/shrink button to expression editor * style the expression editor controls * Removed debug code

cqliu1 mentioned this pull request Mar 15, 2019

[Canvas] Larger expression editor #27697

Closed

rayafratkina added the release_note:enhancement label Mar 22, 2019

Conversation

cqliu1 commented Mar 1, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

For maintainers

Uh oh!

elasticmachine commented Mar 1, 2019

Uh oh!

elasticmachine commented Mar 1, 2019

💔 Build Failed

Uh oh!

ryankeairns commented Mar 4, 2019

Uh oh!

elasticmachine commented Mar 4, 2019

💚 Build Succeeded

Uh oh!

w33ble Mar 5, 2019

Choose a reason for hiding this comment

Uh oh!

cqliu1 Mar 5, 2019

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Mar 5, 2019

💔 Build Failed

Uh oh!

w33ble Mar 5, 2019

Choose a reason for hiding this comment

Uh oh!

cqliu1 Mar 5, 2019

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Mar 5, 2019

💔 Build Failed

Uh oh!

elasticmachine commented Mar 6, 2019

💚 Build Succeeded

Uh oh!

shaunmcgough commented Mar 6, 2019

Uh oh!

alexfrancoeur left a comment

Choose a reason for hiding this comment

Uh oh!

ryankeairns commented Mar 7, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

w33ble commented Mar 7, 2019

Uh oh!

w33ble Mar 7, 2019

Choose a reason for hiding this comment

Uh oh!

w33ble left a comment

Choose a reason for hiding this comment

Uh oh!

cqliu1 commented Mar 7, 2019

Uh oh!

ryankeairns left a comment

Choose a reason for hiding this comment

Uh oh!

alexfrancoeur commented Mar 8, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

cqliu1 commented Mar 1, 2019 •

edited

Loading

ryankeairns commented Mar 7, 2019 •

edited

Loading