Improve group focus indicator

[frankelavsky]

Hi!

The group focus indicator isn't great (especially for scatter, line, and clustered bars).

I'm talking about this:

I've got a suggested solution: filters. You're already using them for text and geometries - it's the dual-outline strategy (and white outline on text). We can use that same strategy to create some great looking group focus indicators. On focus, you'd apply the filter to a special group appended at the end of the chart (the group doesn't need to be appended on focus, just change the href values).

This "top" group contains <use> elements, which simply reference the group or element you want to duplicate:

Like this:

<g filter="url(#VCL-t-s-f-COOL-NEW-FILTER-scatter-plot-LabelCollision)">
    <use href=""></use>
    <use href=""></use>
</g>

Here's what it would look like if you group stuff up like this and apply a filter to the group:

The code for the filter looks like this:

<filter id="VCL-t-s-f-COOL-NEW-FILTER-scatter-plot-LabelCollision" class="VCL-t-s-f-COOL-NEW-FILTER-scatter-plot-LabelCollision">
    <feMorphology in="SourceAlpha" result="dilatedText" operator="dilate" radius="10"></feMorphology>
    <feFlood flood-color="#ffffff" flood-opacity="1" result="whiteTextFlood"></feFlood>
    <feComposite in="whiteTextFlood" in2="dilatedText" operator="in" result="textOutline"></feComposite>

    <feMorphology in="SourceAlpha" result="dilatedBlack" operator="dilate" radius="11.5"></feMorphology>
    <feFlood flood-color="#000" flood-opacity="1" result="blackFlood"></feFlood>
    <feComposite in="blackFlood" in2="dilatedBlack" operator="in" result="blackOutline"></feComposite>

    <feMerge>
        <feMergeNode in="blackOutline"></feMergeNode>
        <feMergeNode in="textOutline"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>

You can obviously change the radius values to whatever:

Here are some examples:

Of course, you can just show the filter effect on only the geometry group if you want, just don't add a <use> element for the text:

And for line, you have 3 elements (line, dot group, text):

I think this is quite an aesthetic improvement and also improves accessibility. The bounding-box style focus indicator just isn't great (I wonder who designed that...).

(Oh, and as a note: when we hover and get that dotted line effect? The components are currently accomplishing this with filters and fill effects on a duplicated element. It would actually be an improvement to copy my above solution and have a <g> element that contains <use> elements here too, and you just have to update the reference id (and add the fancy fill/filter effects to the <use> element). It's not a big deal, since the current system works. But this reduces render/draw time and only requires a paint update instead.)