[Canvas] Expression Editor/Autocomplete Improvements

[cqliu1]

Switching to using the Monaco editor has vastly improvement the UX around editing expressions in the Canvas. There are a few additional improvements I'd like for us to consider/implement.

Expression editor

• [ ] make the editor resizing more flexible using the new EUI resizable container component https://elastic.github.io/eui/#/layout/resizable-container
• [ ] expose editor settings to allow user to customize their editor experience. Potentially these settings could live in Kibana advanced settings
• [ ] enable ctrl/alt+backspace to allow deleting entire words or lines for quicker editing

Autocomplete

• [ ] whitelist Canvas functions in autocomplete. As other Kibana plugins are starting to develop their own functions for the interpreter, we should only expose the ones that we know can be used in Canvas. #47027
• [x] Fix sorting to display context-relevant functions and args (Thanks @wylieconlon for finding this)
• [ ] Prioritize filter, datasource, and render functions (in that order) in autocomplete suggestions when expression editor is empty

Syntax highlighting

• [ ] highlight unquoted strings using the same color as quoted strings

• [ ] function calls are case-insensitive, but when the casing doesn't match the name defined in the function definition, the function is highlighted as a string instead of a function

  • Example
  

  filters
  | essql 
    query="SELECT sum(taxless_total_price) AS sum_total_price FROM \"kibana_sample_data_ecommerce\""
  | math "sum_total_price"
  | formatNumber  "$0a"
  | metric "Countries" 
    metricFont={font size=48 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align="center" lHeight=48} 
    labelFont={font size=14 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align="center"} metricFormat="0,0.[000]"
  | render

[elasticmachine]

Pinging @elastic/kibana-canvas (Team:Canvas)

[poffdeluxe]

Adding a line item to fix the proper sorting issue that Wylie found. Functions are sorted by the autocomplete lib to display functions that expect the previous functions return type. Args and arg values also have some sorting logic from autocomplete lib. By default, Monaco will sort results alphabetically by the suggestion label unless you pass in a value to sortText (https://microsoft.github.io/monaco-editor/api/interfaces/monaco.languages.completionitem.html#sorttext)

[wylieconlon]

I found some other issues that I am hacking on a solution for:

• Sub-functions like font={ fail to autocomplete because of a parsing error. Auto-closing the { bracket on type, and also changing to { as an autocomplete character, help
• Functions are currently sorted based on the input context, but not based on their return type. So for example if the user is typing filters | essql | POTENTIAL_FUNCTION | render we could sort functions higher that accept table and return render contexts.
• The same logic applies in sub-expressions, should autocompletion suggestions in sub-expressions be sorted higher based on return type? For example, font={ creates a sub-expression that needs to return a font function, so we should sort that function to the top.
• Can we filter the autocomplete list? There are issues with this because of chaining. For example, {font color= is expecting a string, but a string can be the output of a series of conditionals. Is there a way to filter out impossible options?

[poffdeluxe]

@cqliu1 Interested in your perspective on Wylie's last point regarding the filtering. Obviously there can be a ton of results returned for suggestions but would filtering and hiding functions/args hamper someone's expression dev flow?

[timductive]

Example of the autocomplete being used due to whitelist issue: https://discuss.elastic.co/t/visualizations-functions-in-canvas/214909/2

[ThomThomson]

Closing this for now. If we prioritize the usability of expressions in the Canvas editing capabilities in the future we can re-open.