angularjs / bokehjs hover bug

generate_test_data.py

# PATHGEN
import sys as _sys
_sys.path.insert(0, "/projects/libdev_py/pydev/virtual_envs/erictools/lib/python2.7/site-packages")
_sys.path.insert(0, "/projects/libdev_py/users/manderso/git/bokeh")

import bokeh
print bokeh.__file__


# PYTHON
import os as _os
from collections import OrderedDict
import numpy as np
import pandas as pd

# BOKEH
from bokeh.plotting import *
from bokeh.objects import GridPlot, HoverTool, Range1d

##############################################################################
# Bokeh Interactive Plots
##############################################################################

def plot_orderedcost_bar_a_vs_e(df, ndf, 
        show_normalized=False, estimated=False, dest='notebook', path='.'):

    from bokeh.objects import Range1d 
    #TOOLS = "hover,previewsave,resize,reset"
    TOOLS = "hover"

    eora = 'estimated' if estimated else 'actual'
    
    N = len(df)
    try:
        cellnames = list(df.cellname)
    except AttributeError:
        cellnames = list(df.index)

    cellnames = ['Label%d' % i for i, _ in enumerate(cellnames)]
    x0 = np.zeros(N)
    xline = df['cost'].values
    xrect = (df['cost_lo'].values + df['cost_hi'].values) / 2.
    widths = df['cost_hi'].values - df['cost_lo'].values

    if dest.lower() == 'notebook':
        output_notebook()
    else:
        linkpath = _os.path.join(path, 'orderedcost_bar_%s.html' % eora)
        output_file(linkpath, title="orderedcost bar")

    figure(plot_height=400, plot_width=1100)
    hold()

    sdf = ndf if show_normalized else df
    source = make_sourcemap_cost_a_vs_e(sdf, cellnames)

    end = max(df['cost'].max(), df['cost_hi'].max()) * 1.05

    colors = 'blue'
    mylegend = 'EstimatedCost'
    mytitle = 'Estimated Cost with CI'

    mytitle = None      # disable title
    # hover selection bar from 0.8 to end (invisible)
    width = end - 0.8
    center = 0.8 + width / 2.
    # rect(x=center, y=cellnames, width=width, height=.4, 
    #         line_color="red", line_width=2, alpha=0.1,
    #         #x_range=Range1d(start=0.9, end=end), 
    #         y_range=cellnames,
    #         source=source, 
    #         tools=TOOLS,
    #         title=mytitle)

    # hover = [t for t in curplot().tools if isinstance(t, HoverTool)][0]
    # hover.tooltips = _get_hovertoolmap_cost_a_vs_e()

    # CI
    rect(x=xrect, y=cellnames, width=widths, height=.2, 
            line_color="blue", line_width=2, alpha=0.2,
            x_range=Range1d(start=0, end=end), 
            y_range=cellnames,
            tools="hover",
            Name="cost",)

    # value
    scatter(df['cost'], cellnames, color=colors, legend=mylegend, 
                marker='triangle', size=8, tools="hover")

    rect(x=center, y=cellnames, width=width, height=.4, 
            line_color="red", line_width=2, alpha=0.1,
            #x_range=Range1d(start=0.9, end=end), 
            y_range=cellnames,
            source=source, 
            tools=TOOLS,
            title=mytitle)

    # hover = [t for t in curplot().tools if isinstance(t, HoverTool)][0]
    hover = curplot().select(dict(type=HoverTool))
    hover.tooltips = _get_hovertoolmap_cost_a_vs_e()
    # set x axis limits. See 12/9/13 reply from Bryan
    # https://groups.google.com/a/continuum.io/forum/#!msg/bokeh/8lgVFOzot68/xPfBYYpExDUJ
    plot = curplot()
    plot.x_range = Range1d(start=0, end=end)
    xaxis().bounds = [0, end]
    legend().orientation = 'top_left'

    # Bokeh 0.5.2 way
    from bokeh.resources import CDN
    from bokeh.embed import autoload_static

    tagpath = 'orderedcost_bar_%s.snippet' % eora
    jspath = 'orderedcost_bar_%s.js' % eora
    js, tag = autoload_static(curplot(), CDN, jspath)
    with open(jspath, 'w') as fh:
        fh.write(js)
    with open(tagpath, 'w') as fh:
        fh.write(tag)
    
    #show()

def make_sourcemap_cost_a_vs_e(df, cellnames=None):

    if cellnames is None:
        try:
            cellnames = list(df.cellname)
        except AttributeError:
            cellnames = list(df.index)

    source = ColumnDataSource(
    data=dict(
        cellname=cellnames,
        cost=df.cost,
    ))
    return source

def _get_hovertoolmap_cost_a_vs_e():

    hmap = OrderedDict([
        ("name", "@cellname"),
        ("cost", "@cost"),
    ])
    return hmap

if __name__ == "__main__":

    from cStringIO import StringIO

    csvdata = StringIO("""\
    cellname,cost,cost_lo,cost_hi
    cell1,1.0,1.0,1.0
    cell2,1.00162107442119,1.00162107442119,1.00162107442119
    cell3,1.003503682877184,0.9720633069299306,1.0330320659310606
    cell4,1.0039946631397243,1.0039946631397243,1.0039946631397243
    cell5,1.0044563997129845,0.9731245619963492,1.0338828451038045
    cell6,1.0063587114322952,0.9748500819281668,1.0359511973192796
    cell7,1.0074126367518728,1.0074126367518728,1.0074126367518728
    cell8,1.0083399456888904,1.0083399456888904,1.0083399456888904
    cell9,1.009966262502013,0.9782538115208106,1.0397501748102258
    cell10,1.0104276325616126,0.9787021530039298,1.0402237811356256""")

    df = pd.read_csv(csvdata)
    plot_orderedcost_bar_a_vs_e(df, df, 
            show_normalized=False,
            estimated=True,
            dest='file',)

orderedcost_bar_estimated.js

(function(global) {
  if (typeof (window._bokeh_onload_callbacks) === "undefined"){
    window._bokeh_onload_callbacks = [];
  }
  function load_lib(url, callback){
    window._bokeh_onload_callbacks.push(callback);
    if (window._bokeh_is_loading){
      console.log("Bokeh: BokehJS is being loaded, scheduling callback at", new Date());
      return null;
    }
    console.log("Bokeh: BokehJS not loaded, scheduling load and callback at", new Date());
    window._bokeh_is_loading = true;
    var s = document.createElement('script');
    s.src = url;
    s.async = true;
    s.onreadystatechange = s.onload = function(){
      Bokeh.embed.inject_css("http://cdn.pydata.org/bokeh-0.6.1.min.css");
      window._bokeh_onload_callbacks.forEach(function(callback){callback()});
    };
    s.onerror = function(){
      console.warn("failed to load library " + url);
    };
    document.getElementsByTagName("head")[0].appendChild(s);
  }

  bokehjs_url = "http://cdn.pydata.org/bokeh-0.6.1.min.js"

  var elt = document.getElementById("16eba5a7-4825-47a4-91c8-ec9cf6df778d");
  if(elt==null) {
    console.log("Bokeh: ERROR: autoload.js configured with elementid '16eba5a7-4825-47a4-91c8-ec9cf6df778d' but no matching script tag was found. ")
    return false;
  }

  // These will be set for the static case
  var all_models = [{"attributes": {"nonselection_glyph": {"type": "Triangle", "id": "41824d6f-7845-407e-98be-1ce07d0f99e5"}, "data_source": {"type": "ColumnDataSource", "id": "a1f1e6e6-a1a9-438a-9ad1-0ae82e7c8eae"}, "name": null, "server_data_source": null, "tags": [], "doc": null, "selection_glyph": null, "id": "1381d16f-ac84-428c-9566-97a633712407", "glyph": {"type": "Triangle", "id": "b095e94f-2281-4279-9e17-e1f077c5ab5b"}}, "type": "GlyphRenderer", "id": "1381d16f-ac84-428c-9566-97a633712407"}, {"attributes": {"plot": {"type": "Plot", "id": "e310b8de-3251-4001-8072-f573004ffc20"}, "orientation": "top_left", "tags": [], "doc": null, "id": "9bfde280-7b2e-423d-83f1-1366792c4cf4", "legends": [["EstimatedCost", [{"type": "GlyphRenderer", "id": "1381d16f-ac84-428c-9566-97a633712407"}]]]}, "type": "Legend", "id": "9bfde280-7b2e-423d-83f1-1366792c4cf4"}, {"attributes": {"start": 0, "end": 1.092234970192407, "tags": [], "doc": null, "id": "44be2b87-fc1c-4bbe-ac7d-5f394b696267"}, "type": "Range1d", "id": "44be2b87-fc1c-4bbe-ac7d-5f394b696267"}, {"attributes": {"nonselection_glyph": {"type": "Rect", "id": "357eb701-cf27-4478-b3bf-163397d5598c"}, "data_source": {"type": "ColumnDataSource", "id": "fc0495ca-721c-4be1-8753-39e526aa0dbd"}, "name": null, "server_data_source": null, "tags": [], "doc": null, "selection_glyph": null, "id": "4bb8408f-cc82-4c54-94bd-b49d03ce2f9f", "glyph": {"type": "Rect", "id": "58890fca-976b-4ebe-89b2-7a937ab1df86"}}, "type": "GlyphRenderer", "id": "4bb8408f-cc82-4c54-94bd-b49d03ce2f9f"}, {"attributes": {"nonselection_glyph": {"type": "Rect", "id": "2deb1cf5-9ec4-44ec-98ab-1ca842c2ba7d"}, "data_source": {"type": "ColumnDataSource", "id": "32af33de-25be-45ca-85c7-f1926d438145"}, "name": null, "server_data_source": null, "tags": [], "doc": null, "selection_glyph": null, "id": "7e366658-ee39-4f11-90fc-448b9f3a5e38", "glyph": {"type": "Rect", "id": "73142e66-752d-4c7b-85dd-ed7147bb1277"}}, "type": "GlyphRenderer", "id": "7e366658-ee39-4f11-90fc-448b9f3a5e38"}, {"attributes": {"column_names": ["cost", "cellname", "y"], "tags": [], "doc": null, "selected": [], "discrete_ranges": {}, "cont_ranges": {}, "data": {"y": ["Label0", "Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8", "Label9"], "cost": [1.0, 1.00162107442119, 1.0035036828771842, 1.0039946631397243, 1.0044563997129845, 1.0063587114322952, 1.0074126367518728, 1.0083399456888904, 1.009966262502013, 1.0104276325616126], "cellname": ["Label0", "Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8", "Label9"]}, "id": "fc0495ca-721c-4be1-8753-39e526aa0dbd"}, "type": "ColumnDataSource", "id": "fc0495ca-721c-4be1-8753-39e526aa0dbd"}, {"attributes": {"column_names": ["_autoindex", "Series 1", "x", "y"], "tags": [], "doc": null, "selected": [], "discrete_ranges": {}, "cont_ranges": {}, "data": {"y": ["Label0", "Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8", "Label9"], "x": [1.0, 1.00162107442119, 1.0035036828771842, 1.0039946631397243, 1.0044563997129845, 1.0063587114322952, 1.0074126367518728, 1.0083399456888904, 1.009966262502013, 1.0104276325616126], "_autoindex": [1.0, 1.00162107442119, 1.0035036828771842, 1.0039946631397243, 1.0044563997129845, 1.0063587114322952, 1.0074126367518728, 1.0083399456888904, 1.009966262502013, 1.0104276325616126], "Series 1": ["Label0", "Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8", "Label9"]}, "id": "a1f1e6e6-a1a9-438a-9ad1-0ae82e7c8eae"}, "type": "ColumnDataSource", "id": "a1f1e6e6-a1a9-438a-9ad1-0ae82e7c8eae"}, {"attributes": {"column_names": ["width", "x", "y"], "tags": [], "doc": null, "selected": [], "discrete_ranges": {}, "cont_ranges": {}, "data": {"y": ["Label0", "Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8", "Label9"], "width": [0.0, 0.0, 0.06096875900112997, 0.0, 0.060758283107455235, 0.06110111539111285, 0.0, 0.0, 0.06149636328941521, 0.061521628131695816], "x": [1.0, 1.00162107442119, 1.0025476864304956, 1.0039946631397243, 1.003503703550077, 1.0054006396237232, 1.0074126367518728, 1.0083399456888904, 1.0090019931655183, 1.0094629670697777]}, "id": "32af33de-25be-45ca-85c7-f1926d438145"}, "type": "ColumnDataSource", "id": "32af33de-25be-45ca-85c7-f1926d438145"}, {"attributes": {"line_color": {"value": "blue"}, "line_alpha": {"units": "data", "value": 1.0}, "fill_color": {"value": "blue"}, "tags": [], "doc": null, "fill_alpha": {"units": "data", "value": 1.0}, "y": {"units": "data", "field": "y"}, "x": {"units": "data", "field": "x"}, "id": "b095e94f-2281-4279-9e17-e1f077c5ab5b", "size": {"units": "screen", "value": 8}}, "type": "Triangle", "id": "b095e94f-2281-4279-9e17-e1f077c5ab5b"}, {"attributes": {"geometries": [], "tags": [], "doc": null, "id": "b5517ca3-9bb8-4169-b19c-92fb9eac66a1"}, "type": "ToolEvents", "id": "b5517ca3-9bb8-4169-b19c-92fb9eac66a1"}, {"attributes": {"line_color": {"value": "#1f77b4"}, "angle_units": "deg", "fill_color": {"value": "#1f77b4"}, "visible": null, "end_angle_units": "deg", "size_units": "screen", "line_join": "miter", "id": "41824d6f-7845-407e-98be-1ce07d0f99e5", "size": {"units": "screen", "value": 8}, "line_alpha": {"units": "data", "value": 0.1}, "radius_units": "data", "valign": null, "length_units": "screen", "tags": [], "start_angle_units": "deg", "line_cap": "butt", "line_dash": [], "line_width": {"units": "data", "field": "line_width"}, "name": null, "doc": null, "fill_alpha": {"units": "data", "value": 0.1}, "halign": null, "y": {"units": "data", "field": "y"}, "x": {"units": "data", "field": "x"}, "margin": null, "line_dash_offset": 0}, "type": "Triangle", "id": "41824d6f-7845-407e-98be-1ce07d0f99e5"}, {"attributes": {"factors": ["Label0", "Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8", "Label9"], "doc": null, "tags": [], "id": "3ffd3ba7-d59c-481b-9914-cf0b5e346b94"}, "type": "FactorRange", "id": "3ffd3ba7-d59c-481b-9914-cf0b5e346b94"}, {"attributes": {"tags": [], "doc": null, "id": "f8734dfc-1b50-4949-9552-e556b3f88d5e", "num_minor_ticks": 5}, "type": "BasicTicker", "id": "f8734dfc-1b50-4949-9552-e556b3f88d5e"}, {"attributes": {"doc": null, "id": "9e3a1fab-3ba3-471b-bd2f-654c66f6f730", "tags": []}, "type": "BasicTickFormatter", "id": "9e3a1fab-3ba3-471b-bd2f-654c66f6f730"}, {"attributes": {"plot": {"type": "Plot", "id": "e310b8de-3251-4001-8072-f573004ffc20"}, "tags": [], "doc": null, "dimension": 0, "ticker": {"type": "BasicTicker", "id": "f8734dfc-1b50-4949-9552-e556b3f88d5e"}, "id": "3cd296d5-18e6-43f2-98da-f453e1cbe16a"}, "type": "Grid", "id": "3cd296d5-18e6-43f2-98da-f453e1cbe16a"}, {"attributes": {"plot": {"type": "Plot", "id": "e310b8de-3251-4001-8072-f573004ffc20"}, "tags": [], "doc": null, "formatter": {"type": "CategoricalTickFormatter", "id": "7bbfceea-bcc6-4a3b-9b60-79e49194b361"}, "ticker": {"type": "CategoricalTicker", "id": "c36fb28f-7121-4c29-a120-e001b37a8c98"}, "id": "61478aeb-0d43-4c01-9335-dcee433f045a"}, "type": "CategoricalAxis", "id": "61478aeb-0d43-4c01-9335-dcee433f045a"}, {"attributes": {"x_range": {"type": "Range1d", "id": "44be2b87-fc1c-4bbe-ac7d-5f394b696267"}, "right": [], "above": [], "tags": [], "toolbar_location": "above", "title": "Plot", "extra_y_ranges": {}, "plot_width": 1100, "renderers": [{"type": "LinearAxis", "id": "f25b52ef-3a87-4167-97c1-8e51ebb3a9e3"}, {"type": "Grid", "id": "3cd296d5-18e6-43f2-98da-f453e1cbe16a"}, {"type": "CategoricalAxis", "id": "61478aeb-0d43-4c01-9335-dcee433f045a"}, {"type": "Grid", "id": "2f234b4c-28b5-4a2f-9d45-26920763d57e"}, {"type": "GlyphRenderer", "id": "7e366658-ee39-4f11-90fc-448b9f3a5e38"}, {"type": "Legend", "id": "9bfde280-7b2e-423d-83f1-1366792c4cf4"}, {"type": "GlyphRenderer", "id": "1381d16f-ac84-428c-9566-97a633712407"}, {"type": "GlyphRenderer", "id": "4bb8408f-cc82-4c54-94bd-b49d03ce2f9f"}], "extra_x_ranges": {}, "plot_height": 400, "tool_events": {"type": "ToolEvents", "id": "b5517ca3-9bb8-4169-b19c-92fb9eac66a1"}, "tools": [{"type": "HoverTool", "id": "4148d00f-143e-4b5d-8ddb-64977b1cf63a"}], "doc": null, "id": "e310b8de-3251-4001-8072-f573004ffc20", "y_range": {"type": "FactorRange", "id": "3ffd3ba7-d59c-481b-9914-cf0b5e346b94"}, "below": [{"type": "LinearAxis", "id": "f25b52ef-3a87-4167-97c1-8e51ebb3a9e3"}], "left": [{"type": "CategoricalAxis", "id": "61478aeb-0d43-4c01-9335-dcee433f045a"}]}, "type": "Plot", "id": "e310b8de-3251-4001-8072-f573004ffc20"}, {"attributes": {"tags": [], "doc": null, "id": "c36fb28f-7121-4c29-a120-e001b37a8c98", "num_minor_ticks": 5}, "type": "CategoricalTicker", "id": "c36fb28f-7121-4c29-a120-e001b37a8c98"}, {"attributes": {"doc": null, "id": "7bbfceea-bcc6-4a3b-9b60-79e49194b361", "tags": []}, "type": "CategoricalTickFormatter", "id": "7bbfceea-bcc6-4a3b-9b60-79e49194b361"}, {"attributes": {"plot": {"type": "Plot", "id": "e310b8de-3251-4001-8072-f573004ffc20"}, "tags": [], "doc": null, "dimension": 1, "ticker": {"type": "CategoricalTicker", "id": "c36fb28f-7121-4c29-a120-e001b37a8c98"}, "id": "2f234b4c-28b5-4a2f-9d45-26920763d57e"}, "type": "Grid", "id": "2f234b4c-28b5-4a2f-9d45-26920763d57e"}, {"attributes": {"tooltips": {"name": "@cellname", "cost": "@cost"}, "plot": {"type": "Plot", "id": "e310b8de-3251-4001-8072-f573004ffc20"}, "tags": [], "doc": null, "renderers": [], "id": "4148d00f-143e-4b5d-8ddb-64977b1cf63a", "names": [], "always_active": true}, "type": "HoverTool", "id": "4148d00f-143e-4b5d-8ddb-64977b1cf63a"}, {"attributes": {"line_color": {"value": "blue"}, "line_width": {"units": "data", "value": 2}, "fill_color": {"value": "#1f77b4"}, "tags": [], "doc": null, "id": "73142e66-752d-4c7b-85dd-ed7147bb1277", "fill_alpha": {"units": "data", "value": 0.2}, "height": {"units": "data", "value": 0.2}, "line_alpha": {"units": "data", "value": 0.2}, "y": {"units": "data", "field": "y"}, "x": {"units": "data", "field": "x"}, "width": {"units": "data", "field": "width"}}, "type": "Rect", "id": "73142e66-752d-4c7b-85dd-ed7147bb1277"}, {"attributes": {"line_color": {"value": "#1f77b4"}, "angle_units": "deg", "fill_color": {"value": "#1f77b4"}, "height": {"units": "data", "value": 0.4}, "visible": null, "end_angle_units": "deg", "size_units": "screen", "line_join": "miter", "id": "357eb701-cf27-4478-b3bf-163397d5598c", "line_alpha": {"units": "data", "value": 0.1}, "angle": {"units": "data", "field": "angle"}, "dilate": false, "radius_units": "data", "width": {"units": "data", "value": 0.29223497019240696}, "valign": null, "length_units": "screen", "tags": [], "start_angle_units": "deg", "line_cap": "butt", "line_dash": [], "line_width": {"units": "data", "value": 2}, "name": null, "doc": null, "fill_alpha": {"units": "data", "value": 0.1}, "halign": null, "y": {"units": "data", "field": "y"}, "x": {"units": "data", "value": 0.94611748509620353}, "margin": null, "line_dash_offset": 0}, "type": "Rect", "id": "357eb701-cf27-4478-b3bf-163397d5598c"}, {"attributes": {"plot": {"type": "Plot", "id": "e310b8de-3251-4001-8072-f573004ffc20"}, "tags": [], "doc": null, "bounds": [0, 1.092234970192407], "formatter": {"type": "BasicTickFormatter", "id": "9e3a1fab-3ba3-471b-bd2f-654c66f6f730"}, "ticker": {"type": "BasicTicker", "id": "f8734dfc-1b50-4949-9552-e556b3f88d5e"}, "id": "f25b52ef-3a87-4167-97c1-8e51ebb3a9e3"}, "type": "LinearAxis", "id": "f25b52ef-3a87-4167-97c1-8e51ebb3a9e3"}, {"attributes": {"line_color": {"value": "#1f77b4"}, "angle_units": "deg", "fill_color": {"value": "#1f77b4"}, "height": {"units": "data", "value": 0.2}, "visible": null, "end_angle_units": "deg", "size_units": "screen", "line_join": "miter", "id": "2deb1cf5-9ec4-44ec-98ab-1ca842c2ba7d", "line_alpha": {"units": "data", "value": 0.1}, "angle": {"units": "data", "field": "angle"}, "dilate": false, "radius_units": "data", "width": {"units": "data", "field": "width"}, "valign": null, "length_units": "screen", "tags": [], "start_angle_units": "deg", "line_cap": "butt", "line_dash": [], "line_width": {"units": "data", "value": 2}, "name": null, "doc": null, "fill_alpha": {"units": "data", "value": 0.1}, "halign": null, "y": {"units": "data", "field": "y"}, "x": {"units": "data", "field": "x"}, "margin": null, "line_dash_offset": 0}, "type": "Rect", "id": "2deb1cf5-9ec4-44ec-98ab-1ca842c2ba7d"}, {"attributes": {"line_color": {"value": "red"}, "line_width": {"units": "data", "value": 2}, "fill_color": {"value": "#1f77b4"}, "tags": [], "doc": null, "id": "58890fca-976b-4ebe-89b2-7a937ab1df86", "fill_alpha": {"units": "data", "value": 0.1}, "height": {"units": "data", "value": 0.4}, "line_alpha": {"units": "data", "value": 0.1}, "y": {"units": "data", "field": "y"}, "x": {"units": "data", "value": 0.94611748509620353}, "width": {"units": "data", "value": 0.29223497019240696}}, "type": "Rect", "id": "58890fca-976b-4ebe-89b2-7a937ab1df86"}];

  if(typeof(Bokeh) !== "undefined") {
    console.log("Bokeh: BokehJS loaded, going straight to plotting");
    Bokeh.embed.inject_plot("16eba5a7-4825-47a4-91c8-ec9cf6df778d", all_models);
  } else {
    load_lib(bokehjs_url, function() {
      console.log("Bokeh: BokehJS plotting callback run at", new Date())
      Bokeh.embed.inject_plot("16eba5a7-4825-47a4-91c8-ec9cf6df778d", all_models);
    });
  }

}(this));

orderedcost_bar_estimated.snippet

<script
    src="orderedcost_bar_estimated.js"
    id="16eba5a7-4825-47a4-91c8-ec9cf6df778d"
    async="true"
    data-bokeh-data="static"
    data-bokeh-modelid="e310b8de-3251-4001-8072-f573004ffc20"
    data-bokeh-modeltype="Plot"
    data-bokeh-loglevel="info"
></script>

testcase.html

<!DOCTYPE html>
<html ng-app="MyApp">
  <head lang="en">
    <meta charset="UTF-8">
    <title>AngularJS / Bokeh Embed Testcase</title>
    <link rel="stylesheet"
          href="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular-csp.css"/>
    <!--<link rel="stylesheet"
          href="http://cdn.pydata.org/bokeh-0.6.0.css" />-->
    <link rel="stylesheet"
          href="bokeh.css" />
    <style>
      ul.nav {padding: 0px;}
      ul.nav > li {display: inline; margin: 10px; padding: 5px;}
      ul.nav > li.active {background-color: #ddd;}
      ul.nav > li.loc {margin-left: 30px; background-color: #ddd;}
    </style>
  </head>
  <body ng-controller="GenericCtrl">
    <div>
      <ul class="nav">
        <li ng-repeat="route in routes"
            ng-class="{active : route.path == here}"
            ><a href="#{{route.path}}">{{route.name}}</a></li>
      </ul>
    </div>
    <div ng-view></div>
  </body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"
        ></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"
        ></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular-route.min.js"
        ></script>
<!-- <script src="http://cdn.pydata.org/bokeh-0.6.0.js"></script> -->
<script src="bokeh.js"></script>

<!-- inline partials for other "pages" -->
<!-- root -->
<script type="text/ng-template" id="tmpl/root.html">
  <div>
    <p> 
      The first time you navigate to <a href="#/plot">the plot page</a> the
      hover on the plot will work. If you navigate away, and then navigate
      back (without a page reload), the hover will no longer work.
    </p>
  </div>
</script>
<!-- plot -->
<script type="text/ng-template" id="tmpl/plot.html">
  <h2>A Plot</h2>
  <p> 
    The first time you navigate to <a href="#/plot">this page</a>, the hover
    on the plot will work. If you navigate <a href="#/other">away</a>, and
    then navigate back (without a page reload), the hover will no longer work.
  </p>
  <span ng-include src="'orderedcost_bar_estimated.snippet'"></span>
</script>
<!-- other -->
<script type="text/ng-template" id="tmpl/other.html">
  <div>
    <p>
      Go <a href="#/plot">back</a> to the plot page.
    </p>
  </div>
</script>
<!-- invalid -->
<script type="text/ng-template" id="tmpl/invalid_path.html">
  <div>
    <p>An invalid path. <tt>{{here}}</tt></p>
  </div>
</script>

<!-- inlined application code -->
<script>
// angular app
var app = angular.module(
    'MyApp', ['ngRoute'])
    .config(function($routeProvider) {
        $routeProvider.when(
            '/', {templateUrl: 'tmpl/root.html', controller: 'GenericCtrl'});
        $routeProvider.when(
            '/plot', {templateUrl: 'tmpl/plot.html', controller: 'GenericCtrl'});
        $routeProvider.when(
            '/other', {templateUrl: 'tmpl/other.html', controller: 'GenericCtrl'});
        $routeProvider.otherwise({  
            templateUrl: 'tmpl/invalid_path.html',
            controller: 'GenericCtrl'
        });
    });

// GenericCtrl
app.controller(
    'GenericCtrl',
    function ($scope, $location) {
        $scope.here = $location.path();
        $scope.$watch(
            function() {return $location.path();},
            function(newval, oldval) {$scope.here = newval});
        $scope.routes = [
            {name: "root", path: '/'},
            {name: "plot", path: '/plot'},
            {name: "other", path: '/other'}];
    });

</script>
</html>