CODEWITHSUNDEEP
pythonbokeh
nseidl
nseidl

Reputation: 11

TapTool 'Clicks' Multiple Glyphs at the Same Time (many glyphs close together)

I've successfully created a bar chart. However, since there are so many glyphs right above and below each other, whenever a 'click' gets sent to TapTool, multiple glyphs have their tap tool trigger, so multiple images open in new tabs, instead of just a single 'closest to the click' glyph.

As you can see in the screenshots, at the default view, there are so many glyphs that are overlapping that if I simply click my mouse down, I'm likely hitting multiple glyphs, and this is why tap tool triggers multiple times (once per glyph hit). When zoomed in, it is obvious that rather than a bar chart, it is a scatter plot arranged to look like a bar chart, with each glyph representing a different image.

How do I force only the 'closest' glyph (or only take the first glyph from a list of glyphs hit by the taptool) to trigger its taptool?

zoomed_out

zoomed_in

There isn't much documentation online how to do this.

imgs = ['http://1...', 'http://2...', 'http://3...']
url = "@imgs"
click_tool = TapTool(callback=OpenURL(url=url))
p.add_tools(click_tool)

Upvotes: 1

Views: 138

Answers (1)

Tony
Tony

Reputation: 8287

There are simply too many glyphs squeezed per pixel under your mouse cursor so they will all respond to your mouse click. A good solution would be to have a callback function attached to your plot's y-range that will re-draw the chart with less glyphs. So when you zoom in the outer glyphs will disappear from the plot and new one that were previously invisible will be added. At some zoom level you will not have to filter the glyphs anymore and they will all fit in. I mean something like this:

plot.y_range.callback = CustomJS(args=dict(source=source), code=code)

The plot canvas has a fixed height in pixels so in your callback you would need to put no more then that number of glyphs in your plot (number glyphs = canvas pixel height) This means one horizontal strip per pixel height. Then a single click should select just one glyph.

Upvotes: 1

Related Questions