Add label annotation

[canavandl]

ref #3822

add label annotation

[canavandl]

Todo:

• Add text prop styling logic (font/text size/text_color/etc) to css render_mode
• Tweak div positioning so that css render_mode label locations matches canvas render_mode (need to handle text_align and text_baseline text props.
• ~~~Add "clipping" logic so that div elements are hidden when outside plot area when render_level is appropriate (below overlay, i think)~~~ won't support for css mode
• Add label annotation bounding box with fill props

Current status:

from bokeh.plotting import figure, output_file, show
from bokeh.models import Label, ColumnDataSource

# output to static HTML file
output_file("line.html")

p = figure(plot_width=400, plot_height=400)

# add a circle renderer with a size, color, and alpha
p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
p.add_annotation(Label(x=2, y=5, text=['sup'], render_mode='css'))
p.add_annotation(Label(x=2, y=5, text=['sup'], render_mode='canvas'))


source = ColumnDataSource(data=dict(x=[1,2,3,4,5],
                                    y=[1,2,3,4,5],
                                    text_val=['hi','how','are','you','doin']))
p.add_annotation(Label(x='x',y='y',text='text_val',level='glyph', render_mode='css', source=source))
p.add_annotation(Label(x='x',y='y',text='text_val',level='glyph', render_mode='canvas', source=source))

show(p)

[canavandl]

I ran into a roadblock re: background/border/text color and alpha handling in css-land, but I realized that I can set each (including a distinct alpha) using rgba strings. I'll add a rgba_value similar to font_value on the context props

[canavandl]

User guide example:

[canavandl]

[canavandl]

Add "clipping" logic so that div elements are hidden when outside plot area when render_level is appropriate (below overlay, i think)

is it worth adding css clipping or logic on an annotation-level basis or just note in the docstring that clipping doesn't occur?

ping @bryevdv

[canavandl]

Here's an example of latex labels:

from bokeh.plotting import figure, output_file, show
from bokeh.models import Label
# output to static HTML file
output_file("latex.html")

p = figure(plot_width=600, plot_height=600)

# add a circle renderer with a size, color, and alpha
p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)

label1 = Label(x=60, y=200, x_units='screen', y_units='screen',
              text=["c = \\pm\\sqrt{a^2 + b^2}"],
              render_mode='latex', border_line_color='black',
              text_font_size='38px')

label2 = Label(x=60, y=500, x_units='screen', y_units='screen',
              text=[r"f(x) = \begin{cases} 0 & x=0\\ \frac{1}{x} & \text{otherwise} \end{cases}"],
              render_mode='latex', border_line_color='black',
              text_font_size='38px')

p.add_annotation(label1)
p.add_annotation(label2)

show(p)

[canavandl]

My comments from the mailing list:

In order to add LaTeX support (via KaTex) I have to vendor in some font files. While doing this I ran into two issues:

First:

My plan is to add the katex library as a dependency in packages.json, so that'll be pulled in by npm and isn't a problem. I also need to add some style resources (a couple of less files and font files), that get bundled into the bokeh css resources. My initial plan was to add a bokehjs/src/vendor/katex-0.5.1 directory containing the less and font files, then add a src/less/katex.less file that imports the styles and base64 encodes the fonts (similar to how we handle the font-awesome resources).

The problem is that a couple of the necessary font files are over the IE8-safe limit (32kb) when encoded, so gulp-less won't encode them without adding an { ieCompat: false } flag.

I don't have enough domain expertise to know if/how bad this is. Potential solutions are:

• Add the { ieCompat: false } flag
• Manually base64 encode the fonts and add them to the src/less/katex.less file
• Other

Second:

Font files are huge and KaTeX includes a ton of fonts! (https://github.com/Khan/KaTeX/blob/master/static/fonts.less) Assuming we don't want to add 500kb of fonts to our css resources, I commented out all but the four that seem most important and use a single format (assuming that that woff has the same browser support as bokeh per https://github.com/Khan/KaTeX/wiki/Font-Options), but bokeh.css and bokeh.min.css still increase by 180kb (roughly doubling in size). Again, I'm unsure how bad this is. Potential solutions are:

• Just go with it, as-is
• use another latex implementation (on quick glance, using MathJax would have the same font problems)
• don't support latex
• load fonts from CDN and don't bundle them?
• create another css resource: fonts.css
• don't include fonts at all (the latex layout still works, but the font styling doesn't happen)
• Other

[cbreeden]

Perhaps this could be a solution: KaTeX/KaTeX#480