How do I set the line color of a Whisker in a Bokeh Theme?

[MarcSkovMadsen]

Hi there. I am trying to improve the built in Bokeh Theme for the Panel Dark Themed Fast Theme in Issue #4313 · holoviz/panel (github.com).

I can see that using the Bokeh Whisker model and the argument line_color I can set the color of the Whisker

Whisker(source=source_error, base="base", upper="upper", lower="lower", line_color="yellow")

But I don’t know how to the add this to a Bokeh Theme json specification like the below.

{
'attrs' : {
    'Plot': {
        'background_fill_color': '#2F2F2F',
        'border_fill_color': '#2F2F2F',
        'outline_line_color': '#444444',
    },
    'Axis': {
        'axis_line_color': null,
    },
    'Grid': {
        'grid_line_dash': [6, 4]',
        'grid_line_alpha': .3,
    },
    'Title': {
        'text_color': 'white'
    }
}

How do I do that? Thanks.

[mateusz]

Not ideal, but like this:

Theme(json={
    "attrs": {
        "Whisker": {
            "line_color": "yellow",
        },
        "ArrowHead": {
            "line_color": "yellow",
        },
    },
})

Or more explicitly using {"value": "yellow"}, as we are dealing with vectorized properties.

Ideally something like this would work:

Theme(json={
    "attrs": {
        "Whisker": {
            "line_color": "yellow",
            "upper_head": {
                "line_color": "yellow",
            },
            "lower_head": {
                "line_color": "yellow",
            },
        },
    },
})

[mateusz]

This works though:

from bokeh.models import TeeHead
Theme(json={
    "attrs": {
        "Whisker": {
            "line_color": {"value": "red"},
            "upper_head": TeeHead(size=10, line_color="red"),
            "lower_head": TeeHead(size=10, line_color="red"),
        },
    },
})

but I think you can’t replicate this in a yaml-based theme.

[Bryan]

That’s honestly surprising (pleasantly, I guess?) but perhaps we ought to raise the possibility of deprecating and discouraging the yaml format for themes if it can’t have full parity.

[CatChenal]

I’ve discovered that the Whisker object settings can be output to json, which I show below after setting the background color to its complement. (Note: This color is meant to be DARK_STYLE.background_color in panel/template/fast/theme.py.)

1. Find the opposite/complement of the theme background color:
   Using color inversion oneliner from SO post:

bkgd = "#181818"  # e.g. `DARK_STYLE.background_color` in fast/theme.py
whiskers = f"#{(int(bkgd.lstrip('#'), 16)^0xffffff):06X}"
whiskers
>>>'#E7E7E7'

2. Set the line color of the Whisker object and output its json:

from pprint import pprint as pp           # just to get nicer post output ;)
from bokeh.models import Whisker


W = Whisker(line_color=whiskers)
W.line_color  # check new value assigned
>>>'#E7E7E7'

>>> pp(W.to_json(include_defaults=True))
{'base': {'field': 'base'},
 'coordinates': None,
 'dimension': 'height',
 'group': None,
 'id': '1005',
 'js_event_callbacks': {},
 'js_property_callbacks': {},
 'level': 'underlay',
 'line_alpha': {'value': 1.0},
 'line_cap': {'value': 'butt'},
 'line_color': {'value': '#E7E7E7'},      # saved!
 'line_dash': {'value': []},
 'line_dash_offset': {'value': 0},
 'line_join': {'value': 'bevel'},
 'line_width': {'value': 1},
 'lower': {'field': 'lower'},
 'lower_head': {'id': '1006'},
 'name': None,
 'source': {'id': '1008'},
 'subscribed_events': [],
 'syncable': True,
 'tags': [],
 'upper': {'field': 'upper'},
 'upper_head': {'id': '1007'},
 'visible': True,
 'x_range_name': 'default',
 'y_range_name': 'default'}

3. Add above specs under attrs.Whisker key. (not tested)

Hope this helps a bit!