[Vega-Lite] in mode "autosize": "none" the row and column constructions do not work.

[chedore]

Kibana version: 7.10.2
Vega-lite: 4
Browser: Google Chrome

Hi!
I want to check an example in Kibana.

An error appeared:
"width" and "height" params are ignored because "autosize" is enabled. Set "autosize": "none" to disable

By default, Kibana Vega graphs use autosize = { type: 'fit', contains: 'padding' } layout model for Vega and Vega-Lite graphs. The fit model uses all available space, ignores width and height values.

I add "autosize": "none", I get a white screen.

In mode "autosize": "none" the row and column constructions do not work.

Describe the bug:
Why can't the Vega-Lite container build the row and column correctly without a scrollbar?
How to recreate an example in Kibana correctly?

[TinaHeiligers]

@chedore we reserve Github issues to bug reports, feature requests and further development work. Your request appears to be more about finding out how to do something and, as such, we recommend using our Discuss forum. There's a great community in the Discuss forums and you're likely to find many answers from there.

As such, I am closing this issue.

[wylieconlon]

I am reopening this bug because I have tested this and found that it is impossible to use the row and column faceting operators in Vega-Lite in Kibana, even though these operators are working correctly without Kibana's modifications. I was testing on both master and 7.13, which indicates that this bug has lasted for many versions.

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[wylieconlon]

I've done some testing and determined that there is only one workaround available for this bug: Convert the spec to Vega. You can convert the spec to Vega by opening the browser dev tools and typing VEGA_DEBUG.vega_spec.

[VladLasitsa]

I investigated this issue and found out that facet charts in Vega-lite doesn't support fit value as autosize (vega/vega-lite#6672) but in our implementation we use fit as default. For autosize: fit we override height and width and set container as value (for any autosize except none we set container as the value for height and width). But properties width and height in facet charts define child_heigth and child_width and applied to the layer because of this chart will have common size more that container (scroll appears). For autosize: none we don't provide width and height for chart because width and height which we add in spec define child width and child height. (you can check here https://vega.github.io/editor/#/examples/vega-lite/facet_grid_bar so that when we add autosize: none we cannot see chart). Faceted vega-lite charts work only with autosize: pad but in this case we should modify code so that we don't override height and width provided by users in case when user set autosize: pad and it's facet chart. Other solution is check if the chart is facet chart and in which case set autosize: pad by default and also not override width and height.

[wylieconlon]

@VladLasitsa Yes, I should probably have posted this here as well, but I have a proposed fix for this issue. Our goal with the autosize work is that embedded Vega & Vega-Lite visualizations should automatically take the container size when in a dashboard or canvas, unless the user explicitly wants to choose the size in pixels. This is the default behavior for all Kibana visualizations, so we are trying to have some kind of consistency here.

My proposed solution is that the Kibana Vega-Lite parser should detect faceted Vega-Lite specs from the normalized output of the Vega-Lite compiler, and then Kibana can manually modify the compiled Vega to use autosizing. This is basically doing the workaround above automatically for users. If the Vega-Lite spec contains pixel sizes, we can still apply those pixel sizes to each child_height and child_width.

I have a PR in progress that implements this logic and I'd appreciate code review once it's ready!

[stratoula]

Thanx @wylieconlon a ton!