Improved input editor for Timelion

[rcrezende]

Allowing multi-line and indentation would dramatically increase readability in Timelion expressions.
The way I'd love to see is the following:

(
    .es(timefield=timestamp, metric=cardinality:somefield.keyword)
    .label("Nice Label")
    .bars()
    .yaxis(yaxis=1,label="First Axis"),

    .es(timefield=timestamp, metric=sum:anotherfield)
    .divide(12)
    .label("Another Lable")
    .yaxis(yaxis=2, label="Secondary Axis")
)
.title("Graph Title")
.legend("ne")

Also, when editing a timeline visualization in Kibana, the left panel is too small and I'm forced to edit the expression in another editor and paste there. Maybe allowing the user to resize the split Editor/Visualization is ideal.

Syntax highlighting would also be very welcome

[tbragin]

For historical purposes, there is some relevant discussion on an old Timelion issue: elastic/timelion#31

[ddavidebor]

Excellent someone brought this back!
I looked at this issue time ago, and the most suited multiline editor i could find is https://codemirror.net/

JS syntax highlighting matches fairly well Timelion expressions.

[rcrezende]

maybe this: https://microsoft.github.io/monaco-editor/ ?

[ddavidebor]

@rcrezende it does not work on mobile

[tbragin]

@cjcenizal Curious if this is still something on your radar? If not, maybe we can chat about something more tactical we can do here.

[cjcenizal]

I haven't spent any more time on this beyond the initial UX exploration (https://codepen.io/cjcenizal/pen/vgGXzZ). If someone wants to dedicate time to building this I think it would be great!

[ddavidebor]

Timelion is still screaming for help to improve it's input!

[epixa]

Blocked on #10961

[cjcenizal]

The request for multiline queries has been addressed by #11972. I've created #12075 and #12077 to capture the requests for syntax highlighting and a better side panel, respectively.