[TSVB][Timelion][XY] Cursor synchronization is not visible

[stratoula]

Kibana version:
7.16+

Describe the bug:
This bug is more obvious when you add a TSVB and a Lens chart on a dahboard. If you hover over TSVB, the hover line is not visible but you will see that the it is synchronized with the Lens chart. If you hover over Lens and check TSVB you will see no indication of the cursor synchronization.

I think that it works but the line is invisible for some reason. In 7.15 it looked like:

but in 7.16 (same dashboard)

Steps to reproduce:

1. Create a new dashboard
2. Add a Lens timeseries chart
3. Add a TSVB timeseries chart or a timelion agg-based chart
4. Hover over Lens, no indication of the synchronization on TSVB

[elasticmachine]

Pinging @elastic/kibana-vis-editors (Team:VisEditors)

[alexwizp]

@nickofthyme could you please help us a little to understand what has changed in the charts, I see again problems with theme styles merging.

e.g. if I remove "chartTheme" from the TSVB the cursor became to be visible.

[nickofthyme]

Yeah I'll take a look.

[stratoula]

This also happens in Timelion and XY charts. Is this on EC side or can we fix it on our side? I think it should be fixed in 7.16 cc @nickofthyme

[nickofthyme]

Ugh I thought this was the same issue related to undefined base properties. Basically if base theme does not define a default value for properties that are possibly undefined, it doesn't pickup overrides to that value.

But this issue appears to be related to the value being an optional array, namely theme.crosshair.line.dash. I'm looking into a fix in kibana now.

[nickofthyme]

Alright after a deeper look this issue here is caused when the first partial theme in the array is empty ({}). But since this is recursive this means empty at any level within the theme object tree, which is easy to run into.

In such a case the additional theme objects in the array are completely ignored.

I don't see a good solution for this on kibana side. I will put up a PR and backport it into 7.16 as a patch fix if that would work for you.

[stratoula]

Thank you @nickofthyme, you rock 🚀

[nickofthyme]

Ok @stratoula & @alexwizp, #117180 should fix this issue in its entirety. Please let me know if you see any issues.

So now that the theming is fixed I hope there is less confusion in how the theme merging works. Essentially it takes looks to set each value within the theme from the partial or array of partials set on the Settings.theme prop, looking to each successive partial for every value. If none of the partials contain the given property the value will be pulled from the full baseTheme. I am happy to jump on a call to explain in more detail if needed.

[nickofthyme]

This fix is now in main as of @elastic/[email protected] or #117619.