VizLegend: Represent line style in series legend and tooltip

[domasx2]

What is this feature?

This PR makes panel legend & viz tooltip color indicator also represent line style of a series: solid, dotted or dashed. Only works if gradient is not set, because we can't represent it in dashed/ dotted form with current appraoch.

Why do we need this feature?

This is especially useful with time comparison feature where UX calls for comparison series to have same color but different line style. Eg, app o11y uses dashed lines for previous period series. Without legend representing line style it is harder to distinguish legend items.

Who is this feature for?

Dashboard users, plugins.

Special notes for your reviewer:

I went ahead and made viz tooltip reuse SeriesIcon component for color indicator

Please check that:

• It works as expected from a user's perspective.
• If this is a pre-GA feature, it is behind a feature toggle.
• The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

[leeoniya]

would it be possible to avoid extra DOM here? especially for tooltip that has to re-render up to 60 times per sec, this will add a lot of overhead for something that we might be able to do with a single React.memo'd SVG element or clever CSS.

[domasx2]

would it be possible to avoid extra DOM here? especially for tooltip that has to re-render up to 60 times per sec, this will add a lot of overhead for something that we might be able to do with a single React.memo'd SVG element or clever CSS.

I'll try. What's the case where dom is recreated 60 times per second though? :-O would React.memo'ing the divs work too?

[leeoniya]

I'll try. What's the case where dom is recreated 60 times per second though?

sorry, i usually mean react's v-tree, which very unfree to re-create on ever mousemove. imagine you have 30 series in a tooltip. and dashboard shared tooltip enabled. this adds up very fast.

[domasx2]

I removed extra divs and refactored with border styling, which gives almost the same result in Chrome

Will test with more browsers tomorrow

[leeoniya]

I removed extra divs and refactored with border styling, which gives almost the same result in Chrome

thanks :)

[domasx2]

Problem with border based solution is that it's not consistent across render engines. In firefox:

[domasx2]

So border did not work out, too inconsistent across borwsers.
Refactored to third attempt which seems to work well: repeated background images using radial-gradient and linear-gradient. This gives consistent result across all browsers.
Caveat is that it doesn't render gradient too, so in case gradient is set it will default to previous looks

[leeoniya]

awesome! ❤️