CODEWITHSUNDEEP
javascriptpythoncallbackbokeh
Álvaro
Álvaro

Reputation: 2069

Bokeh: JS callback when double-click on circle

I am showing some information on a webpage when single-clicking circles, now I would like to add some interaction on double-clicking: open a new tab loading a url hopefully using OpenURL.

This is my current code:

p = bokeh.plotting.figure(tools=TOOLS)
cr = p.circle(y_true[:, 1], y_pred[:, 1], size=5, source=source)

taptool = p.select(type=bokeh.models.TapTool)
taptool.callback = bokeh.models.CustomJS(args={'circle': cr.data_source},
        code=self.show_data_callback())

show_data_callback just returns a string with JS code that shows information about the clicked circle.

Upvotes: 4

Views: 1806

Answers (1)

Álvaro
Álvaro

Reputation: 2069

Following the tutorial in here and with some help from the bokeh chat I created an extension with different actions for the click and double click actions:

from bokeh.core.properties import Instance
from bokeh.io import output_file, show
from bokeh.models import ColumnDataSource, TapTool, CustomJS, OpenURL
from bokeh.plotting import figure

output_file('tool.html')

JS_CODE = """
p = require "core/properties"
TapTool = require "models/tools/gestures/tap_tool"

class NewTapToolView extends TapTool.View

  _get_canvas_position: (e) ->
    canvas = @plot_view.canvas
    vx = canvas.sx_to_vx(e.bokeh.sx)
    vy = canvas.sy_to_vy(e.bokeh.sy)
    return [vx, vy]

  _tap: (e) ->
    console.log('click')
    [vx, vy] = @_get_canvas_position(e)
    append = e.srcEvent.shiftKey ? false
    @_select(vx, vy, true, append)

  _doubletap: (e) ->
    console.log('double click')
    [vx, vy] = @_get_canvas_position(e)
    append = false
    @_select(vx, vy, true, append)

class NewTapTool extends TapTool.Model
  default_view: NewTapToolView
  type: "NewTapTool"

  tool_name: "New Tap Tool"

  @define { source: [ p.Instance ] }

module.exports =
  Model: NewTapTool
  View: NewTapToolView
"""


class NewTapTool(TapTool):
    __implementation__ = JS_CODE
    source = Instance(ColumnDataSource)


x = y = [i for i in range(10)]
source = ColumnDataSource(data=dict(x=x, y=y))

plot = figure(x_range=(0, 10), y_range=(0, 10), tools=[NewTapTool(source=source)])
plot.title.text = "Double click on a dot to test"
plot.circle('x', 'y', source=source, size=10)

newtaptool = plot.select(type=TapTool)
newtaptool.callback = OpenURL(url="https://en.wikipedia.org/")

show(plot)

The example simply opens Wikipedia when double clicking a circle. In the _tap function the behaviour of a single click can be customized. I hope it helps!

Upvotes: 5

Related Questions