Modebar aesthetic configurability

[jackparmer]

Would like the modebar to have a few more programmatic options, especially for extremely styled Dash apps:

1. Programmatic ability to set the modebar in a vertical orientation. Bokeh does a nice job with this:
   

2. Programmatic ability to set the background bar color, background bar opacity, and icon colors:
   

3. While we're at it, update the plotly logo in the modebar

Related:
#2171
https://github.com/plotly/streambed/issues/9699
(Perhaps we should create a plotly/plotly.js "modebar" label?)

[antoinerg]

Good idea @jackparmer

I suggest we add the following config key:

    // mode bar style
    modeBarStyle: {
        orientation: 'h',
        backgroundColor: 'rgba(255 ,255 ,255 ,0.7)',
        iconColor: 'rgba(0, 31, 95, 0.3);'
    },

We should probably turn the icons into a font: it'll then be straightforward to change their color and opacity with CSS.

@etpinard, @alexcjohnson What do you think?

[alexcjohnson]

    modeBarStyle: {
        orientation: 'h',
        backgroundColor: 'rgba(255 ,255 ,255 ,0.7)',
        iconColor: 'rgba(0, 31, 95, 0.3);'
    },

I like it. I'd probably go for bgcolor just to match our usage in the regular schema. And there are two colors to consider: the logo and all other icons. So logoColor and iconColor? Also perhaps position: (top|middle|bottom) (left|center|right) like textposition, though that can be omitted for at least the first round, and added in later if someone is interested in it.

We should probably turn the icons into a font: it'll then be straightforward to change their color and opacity with CSS.

They were a font a long time ago... and in fact that's still how they're given to us when someone designs a new one. but we ditched that and instead just draw them as straight SVG (with a script to pull that out into js) so we have everything encapsulated in the one js bundle. Anyway this is still styled by css, we'll just need to make some pieces of that dynamic.

[antoinerg]

Thanks @alexcjohnson ! So I will go with the following for now:

  modeBarStyle: {
        orientation: 'h',
        bgcolor: 'rgba(255 ,255 ,255 ,0.7)',
        iconColor: 'rgba(0, 31, 95, 0.3)',
        logoColor: 'rgba(0, 31, 95, 0.3)',
        position: 'right'
    },

Let's keep the pipeline for icons the same for now. I guess I just need to crush the logo into a single path. A tool like this may do the job: https://www.enigmeta.com/svgcrush/ . Can you point me to the most up-to-date plot.ly logo in SVG?

Thank you again for the all the details :)

[jackparmer]

@antoinerg This one
https://raw.githubusercontent.com/plotly/design-assets/master/logos/plotly/images/plotly-logomark.svg?token=ABx4ao8iUW7_hNZPRwWUjwgmzVgjGRKgks5bvBthwA%3D%3D

[nicolaskruchten]

Just wanting to chime in here a bit and request that these be layout options and not config options if at all possible... :)

My rationale is that users will often want to control these settings alongside other layout options like the plot background colour and will likely want to drag along these settings in templates etc. If we make these options config-only then people will not be able to e.g. use the editor to style the modebar, and will not be able to make "dark theme" templates that can be reused within Chart Studio. Baking these in to layout will also likely make things easier for DDK...

/cc @chriddyp @wbrgss

[jackparmer]

+1 layout

…

On Wed, Oct 3, 2018 at 12:55 PM Nicolas Kruchten ***@***.***> wrote: Just wanting to chime in here a bit and request that these be layout options and not config options if at all possible... :) My rationale is that users will often want to control these settings alongside other layout options like the plot background colour and will likely want to drag along these settings in templates etc. If we make these options config-only then people will not be able to e.g. use the editor to style the modebar, and will not be able to make "dark theme" templates that can be reused within Chart Studio. Baking these in to layout will also likely make things easier for DDK... /cc @chriddyp <https://github.com/chriddyp> @wbrgss <https://github.com/wbrgss> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3063 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABx4aiaJAl5FmC9DLRiiboZ4vR5CL8ODks5uhOwbgaJpZM4XClrg> .

[alexcjohnson]

Thanks @nicolaskruchten, layout makes sense. I think we originally put these in config as that's where all the other modebar options go, but those are all about altering the functionality of the modebar, which may need to call out to other code on the page or something... whereas the new items are all about appearance and that's not something that depends on the display context so layout is better.

[antoinerg]

Thank you for your input @nicolaskruchten!

[nicolaskruchten]

Nice, thanks for the flexibility, sorry to give this feedback so late :)

Next ask: any way to make some of the behaviour automatic? especially with respect to the figure background? would be great to have the modebar either transparent or match the plot background by default, and to have the icon colours somehow maintain contrast... Even if that's hidden behind a flag I think it would be a nice option that would be turned on by default in the editor :)

[alexcjohnson]

Next ask: any way to make some of the behaviour automatic?

I think that would be fine, and I wouldn't consider that a breaking change as long as our solution is legible on any plot.

Ideal would be to have modebar.bgcolor match paper_bgcolor but add partial opacity, in case some component or subplot sneaks underneath the modebar. Then we just need to choose a default iconcolor (and active color) that is legible and looks good with the resulting (or explicit) bgcolor.

[antoinerg]

I decided to wait before implementing the automatic behavior described above by @nicolaskruchten and @alexcjohnson. I definitely love the idea though. It could be applied to every bit of text on a figure: title, axes and so on. For example, as of right now, choosing "paper_bgcolor": "#444" makes all the text invisible! This sounds like a new feature to me and probably deserves its own issue.

[nicolaskruchten]

@antoinerg I'd really like this default behaviour for the modebar background at least... Just because we can't do it everywhere doesn't mean we shouldn't do it in some places: we already do handle automatic contrasting text in places like hovertext, where the foreground color is automatically set based on the background :)