Drastic dashboard panels height change in 6.3

[trevan]

Starting in Kibana 6.3, when you select the option "Use margins between panels" in the dashboard, the height of the panels almost double.

Here's what it looked like in 6.2 when you toggle the option:

Here's what it looks like in master when you toggle the option:

Notice how in 6.2, there is a slight change in size but it probably is just because of the addition of margins. But in master, the change is drastic. It changes the layout of the entire page.

I noticed this when I was upgrading from 6.2 to 6.3 and my dashboards looked a lot different and didn't fit on the screen the same way. I think this is related to the panel height change that went into 6.3 but I haven't yet figured out the reason.

[trevan]

#16763 is the panel height change.

@nreese, any ideas on if the panel height change is the culprit?

[stacey-gammon]

The culprit is when we made the grid size much more fine grained and there isn't much we can do about this unfortunately and are considering it WAI.

Duplicate of #17114 (read here for more background).

[stacey-gammon]

But if you have any ideas about a way to fix it, I'd love to hear them. :)

[trevan]

@stacey-gammon, thanks for pointing me to that issue. I remember seeing it when you first created it but didn't remember when I saw the issue locally. This is going to be a pain. Quite a lot of people use dashboards on big screens and when we upgrade to 6.3, they will no longer fit.

Basically, it is adding margin for every single "row". I don't have any ideas, other than "upgrade" the panels by shrinking their height if they have margins turned on. I don't think you generally flip between the two options and you can just resize your items at that point.

[stacey-gammon]

I changed the title, I'll re-open this as an issue with dashboards created in pre 6.2 and the change in appearance in 6.3.

[trevan]

@stacey-gammon, do you want to do the "upgrade" idea?

[stacey-gammon]

it's probably the least invasive change we could do in this particular situation, though I'd have to think of the math. How accurate could we get to making them look as they did before? Might not be able to get them exact, but can we figure out how to get them as close as possible?

Going forward I think we need to be better at catching these situations ahead of time and coming up with an alternate solution. For instance, if we had thought of this earlier, the best case would probably be to use the old grid and panel sizes until the user chooses to upgrade their dashboard and take advantage of the new fine-grained grid size. Otherwise this was technically a BWC breaking change that snuck into a minor release.

[trevan]

Ok, I'll take a look at that in the next few days and see if I can come up with a good conversion.

[trevan]

I've created a PR. Using a scale factor of 4 gets the numbers a lot closer.

Each "old row" has a height of 108 with margins. Each "new row" has a height of 28 with margins. Converting an "old row" to a "new row" is just a simple multiplication of the numbers.

Old Rows	Old Height	Factor 5	New Height	Factor 4	New Height
1	108	5	140	4	112
2	216	10	280	8	224
3	324	15	420	12	336
4	432	20	560	16	448
5	540	25	700	20	560
6	648	30	840	24	672
7	756	35	980	28	784
8	864	40	1120	32	896
9	972	45	1260	36	1008
10	1080	50	1400	40	1120
11	1188	55	1540	44	1232
12	1296	60	1680	48	1344
13	1404	65	1820	52	1456
14	1512	70	1960	56	1568

The rows are still not going to be the same size but it is a lot closer. Many of my visualizations are around 4-6 "old rows" and by using a factor of 4, the pixel change goes from 128-192 to 16-24.