Canvas function/argument/value autocomplete #23200
Conversation
lukasolson
added
WIP
|
There's something funny about the way this is handling quoted values.
If I provide a value without quotes, the suggest stays open, but if I quote the value, it goes away. It does come back if I close the quotes and then go back into the value and start changing it though. |
|
The functionality feels good, nothing is immediately jumping out at me in that regard. I was considering whether we want to highlight the first item as soon as the autocomplete box appears (Slack does this), but the difference here is that the return/enter key is used to start a new line in the expression builder whereas in Slack you tend to work on the current line and use Enter to submit. Point being, I think what we have is preferable for our use case and I'm only noting this here to capture the thought for posterity's sake. There are a couple of minor visual tweaks that could be made - the mockups used a slightly different background color to differentiate the two panels, some spacing and font styling tweaks here and there, and we could probably shorten the height of the entire box once you narrow down to a single function or argument - but those could be done in a follow-up and shouldn't block this PR from moving along, in my opinion. LGTM! |
|
Took this for another quick spin this morning and had some feedback.
I clicked on
It seems odd to me that we aren't showing anything on the right hand side and not necessarily intuitive that I need to click on the function to get a description of it. Should we automatically highlight the first one?
Is this a standard format for providing argument suggestions? I'm a bit further removed from code editors these days but I'm wondering if there is a better way to represent the argument details. @ryankeairns what do you think?
|
|
@alexfrancoeur see my comment just prior to yours regarding highlighting the first item - it feels like a nice thing but I think it could bring some issues with regards to our use of multi-line expressions. We could try it out, but I suspect it could lead to a path where you end up needing to use Shift+Enter to start a new line. For our scenario, that seems like it would become cumbersome if you're wanting a new line and its suggesting the next thing (i.e. interpreting the Enter might get tricky). As an alternative (image below), we could display some higher level/more generic info on the right side when nothing is highlighted on the left side. Something to consider there is that the info would display over and over and would likely become not useful, quickly. Another option would be to not have it as wide, initially, and then expand once an item is highlighted.
As for the argument display, some of them can have long descriptions, so we (Rashid, Lukas, and I) discussed displaying them as fullwidth/single column as Lukas has done here (and as you see in TimeLion). I also had a note about this in my previous comment that I'd like to touch this up visually. Suffice it all to say, I think we should get this PR merged (once ready from a UX/technical standpoint) and I'll follow up with a PR for some UI enhancements. |
Yeah, public functions aren't being suggested now, it's a bug related to other stuff. I believe @rashidkpc is looking into that.
I'm not seeing this... Do you have steps to reproduce this consistently? |
|
FYI - I'm about to make some design tweaks and will push them up here when ready. |
|
@lukasolson I added some small design changes and opened a PR against your forked repo/branch 👉 lukasolson#16 |
Design tweaks for autocomplete
…eat/canvas/autocomplete
lukasolson
changed the title
|
Still working through writing tests but I think I've cleaned up the code enough that you can take a look. |
|
We're being pretty stingy with the vertical space. The PR I put up just worked to minimize that, so let's keep it as-is for the time being. Looking at that screenshot, I'm not sure my prior changes were in the branch tested... I added some space between those values to make them easier to read. |
💚 Build Succeeded |
|
Took it for a spin again, LGTM. Haven't run into any big issues. I'll leave the same feedback I did in slack. It might be nice to add a turn off autocomplete option that is user specific and stored locally. In case there is an issue, any user can turn this off and (hopefully) open an issue in the Kibana repo. |
|
@alexfrancoeur @lukasolson we have some free whitespace down in the lower left hand corner of the expression editor panel where we could place an EuiSwtich to toggle on/off the autocomplete feature:
Regardless of how it persists (per workpad/across workpads; presuming the latter), keeping it close and in context to the expression editor input itself feels like the best approach, imo. Side note: this is using the compressed prop which is the shorter version of this component. |
|
I like it! I think we discussed adding as a separate PR so we can get this
in
…On Thu, Oct 18, 2018, 9:56 AM Ryan Keairns ***@***.***> wrote:
@alexfrancoeur <https://github.com/alexfrancoeur> @lukasolson
<https://github.com/lukasolson> we have some free whitespace down in the
lower left hand corner of the expression editor panel where we could place
an EuiSwtich to toggle on/off the autocomplete feature:
[image: screenshot 2018-10-18 08 52 00]
<https://user-images.githubusercontent.com/446285/47159364-52818900-d2b3-11e8-8f5b-a0550d861292.png>
Regardless of how it persists (per workpad/across workpads; presuming the
latter), keeping it close and in context to the expression editor input
itself feels like the best approach, imo.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#23200 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/AYA-fz30WDSt3bxIkrAmtk6VNGfISPO9ks5umIiXgaJpZM4WptoV>
.
|
💔 Build Failed |
💚 Build Succeeded |
* feat: canvas autocomplete * fix: remove unused files * autocomplete ui cleanup * fix: handle stuff inside quotes * fix: canvas suggestion comparator * fix: spaces at the beginning of expressions * fix: move header out of autocomplete component itself * fix: add tests * fix: failing test * fix: pointed to wrong module
|
6.x (6.5.0): 7ff4f81 |
This PR updates the Canvas expression input with autocomplete capabilities, so that functions, arguments, and in some cases even values can be suggested. When they are suggested and highlighted, we show the corresponding reference when available.
Note that this PR updates the
argdefinition to have anoptionsarray, which are what will be suggested for values. In the future we'd like to make this more robust and provide a more flexible way to generate suggestions, but this works for now.