How to click-and-drag a point of a scatter plot?

The question in short

I would like to click-and-drag single glyphs in a server-hosted scatter, and make sure that the (x,y) coordinates of the glyph are updated on server side.

(for full clarity this is not a use of the “Pan” tool. This mpld3 example shows the click-and-drag behaviour I refer to, and the image below comes from this SO question)

Here I have dragged some points to new positions. I would like to get the information where to I have dragged them.

Context of the question

As Bokeh introduced a few interesting widgets (Tables, Sliders,…) I am seeking to move a professional application from a desktop environment based on Matplotib+PyQt, to a Heroku + Flask + Bokeh-server solution. To do this, I need to be able to click-and-drag elements of a chart like in the mpld3 example linked above, or in this matplotlib example). This is a “bokeh for webapp” question (and to be clear, being able to have basic pyqt-like widgets on the web without having to deal directly with stuff like extjs is absolutely amazing).

Reference documentation

This issue has been touched on already here in this group, but I need some help wrapping these elements together.

Hi,

This is definitely a feature that has crossed my mind before, and it would be great to add something in a more formalized way at some point. However, with the new "JS callbacks" that are possible on selections, it *might* actually be possible to make some thing like this work now. A small example of the callbacks is in the new users guide:

  http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#callbacks-for-selections

Unfortunately I don't have time to try and throw a proof of concept together this week, but I am happy to answer any questions. If not currently possible, it should be possible with a pretty small effort (maybe a new simple drag tool that just exposes a callback on the drag event).

Bryan

···

On May 18, 2015, at 9:36 AM, Pythonic <[email protected]> wrote:

The question in short

I would like to click-and-drag single glyphs in a server-hosted scatter, and make sure that the (x,y) coordinates of the glyph are updated on server side.

(for full clarity this is not a use of the "Pan" tool. This mpld3 example shows the click-and-drag behaviour I refer to, and the image below comes from this SO question)

Context of the question
As Bokeh introduced a few interesting widgets (Tables, Sliders,...) I am seeking to move a professional application from a desktop environment based on Matplotib+PyQt, to a Heroku + Flask + Bokeh-server solution. To do this, I need to be able to click-and-drag elements of a chart like in the mpld3 example linked above, or in this matplotlib example). This is a "bokeh for webapp" question (and to be clear, being able to have basic pyqt-like widgets on the web without having to deal directly with stuff like extjs is absolutely amazing).

Reference documentation
This issue has been touched on already here in this group, but I need some help wrapping these elements together.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/c262a873-2794-4272-bcf2-7a863d52e95b%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Thanks, this is helpful. I will work on implementing and reach out for any question

In the meantime great to see 0.9 out and I look forward to the complete api docs for 1.0.

···

On Monday, 18 May 2015 18:12:41 UTC+1, Bryan Van de ven wrote:

Hi,

This is definitely a feature that has crossed my mind before, and it would be great to add something in a more formalized way at some point. However, with the new “JS callbacks” that are possible on selections, it might actually be possible to make some thing like this work now. A small example of the callbacks is in the new users guide:

    [http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#callbacks-for-selections](http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#callbacks-for-selections)

Unfortunately I don’t have time to try and throw a proof of concept together this week, but I am happy to answer any questions. If not currently possible, it should be possible with a pretty small effort (maybe a new simple drag tool that just exposes a callback on the drag event).

Bryan

On May 18, 2015, at 9:36 AM, Pythonic [email protected] wrote:

The question in short

I would like to click-and-drag single glyphs in a server-hosted scatter, and make sure that the (x,y) coordinates of the glyph are updated on server side.

(for full clarity this is not a use of the “Pan” tool. This mpld3 example shows the click-and-drag behaviour I refer to, and the image below comes from this SO question)

Context of the question

As Bokeh introduced a few interesting widgets (Tables, Sliders,…) I am seeking to move a professional application from a desktop environment based on Matplotib+PyQt, to a Heroku + Flask + Bokeh-server solution. To do this, I need to be able to click-and-drag elements of a chart like in the mpld3 example linked above, or in this matplotlib example). This is a “bokeh for webapp” question (and to be clear, being able to have basic pyqt-like widgets on the web without having to deal directly with stuff like extjs is absolutely amazing).

Reference documentation

This issue has been touched on already here in this group, but I need some help wrapping these elements together.


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/c262a873-2794-4272-bcf2-7a863d52e95b%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Has there been any progress on this?

It would be super useful to be able to easily drag points and shapes around a Bokeh chart… which also implies being able to “select” the drawing object to drag… perhaps showing “handles” or some other selected state / indicator.

···

On Monday, May 18, 2015 at 10:36:44 AM UTC-4, Pythonic wrote:

The question in short

I would like to click-and-drag single glyphs in a server-hosted scatter, and make sure that the (x,y) coordinates of the glyph are updated on server side.

(for full clarity this is not a use of the “Pan” tool. This mpld3 example shows the click-and-drag behaviour I refer to, and the image below comes from this SO question)

Here I have dragged some points to new positions. I would like to get the information where to I have dragged them.

Context of the question

As Bokeh introduced a few interesting widgets (Tables, Sliders,…) I am seeking to move a professional application from a desktop environment based on Matplotib+PyQt, to a Heroku + Flask + Bokeh-server solution. To do this, I need to be able to click-and-drag elements of a chart like in the mpld3 example linked above, or in this matplotlib example). This is a “bokeh for webapp” question (and to be clear, being able to have basic pyqt-like widgets on the web without having to deal directly with stuff like extjs is absolutely amazing).

Reference documentation

This issue has been touched on already here in this group, but I need some help wrapping these elements together.

Hi Matt,

For now, the way forward on this is through custom models. We have not had occasion to mention or push the BokehJS API much until now, so this is an area where documentation is lagging. Adding a section to the user guide is high on my priority list. In the mean time, one of my colleagues just made a proof of concept of a custom drag tool model that could drag a span annotation. I will ping them to post some example code here.

In general, there's an infinite number things that users might want, that are perfectly useful and reasonable things to want, but that we can't get to in a timely manner because of resource constraints, or that we wouldn't want to add to the core library (because we don't want the library to balloon out of all proportion and because "yes is forever" in terms of maintenance). My vision with the extension protocol is that is eventually lead to a community collection of easily installable user-created functionality, ala Atom or Chrome extensions so that the community doesn't have to "wait on us" to get what they need.

Bryan

···

On Jun 7, 2016, at 10:28 PM, Matt <[email protected]> wrote:

Has there been any progress on this?

It would be super useful to be able to easily drag points and shapes around a Bokeh chart... which also implies being able to "select" the drawing object to drag... perhaps showing "handles" or some other selected state / indicator.

On Monday, May 18, 2015 at 10:36:44 AM UTC-4, Pythonic wrote:
The question in short

I would like to click-and-drag single glyphs in a server-hosted scatter, and make sure that the (x,y) coordinates of the glyph are updated on server side.

(for full clarity this is not a use of the "Pan" tool. This mpld3 example shows the click-and-drag behaviour I refer to, and the image below comes from this SO question)

Context of the question
As Bokeh introduced a few interesting widgets (Tables, Sliders,...) I am seeking to move a professional application from a desktop environment based on Matplotib+PyQt, to a Heroku + Flask + Bokeh-server solution. To do this, I need to be able to click-and-drag elements of a chart like in the mpld3 example linked above, or in this matplotlib example). This is a "bokeh for webapp" question (and to be clear, being able to have basic pyqt-like widgets on the web without having to deal directly with stuff like extjs is absolutely amazing).

Reference documentation
This issue has been touched on already here in this group, but I need some help wrapping these elements together.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0ea0c569-ba98-46c2-9ff6-56e26561a3f1%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Here’s an example of a draggable bar as a custom tool model:

It doesn’t do exactly what you want, because it doesn’t include the hit testing necessary for selecting individual glyphs. But it should be a reasonable starting point.

···

On Wednesday, June 8, 2016 at 9:39:32 AM UTC-5, Bryan Van de ven wrote:

Hi Matt,

For now, the way forward on this is through custom models. We have not had occasion to mention or push the BokehJS API much until now, so this is an area where documentation is lagging. Adding a section to the user guide is high on my priority list. In the mean time, one of my colleagues just made a proof of concept of a custom drag tool model that could drag a span annotation. I will ping them to post some example code here.

In general, there’s an infinite number things that users might want, that are perfectly useful and reasonable things to want, but that we can’t get to in a timely manner because of resource constraints, or that we wouldn’t want to add to the core library (because we don’t want the library to balloon out of all proportion and because “yes is forever” in terms of maintenance). My vision with the extension protocol is that is eventually lead to a community collection of easily installable user-created functionality, ala Atom or Chrome extensions so that the community doesn’t have to “wait on us” to get what they need.

Bryan

On Jun 7, 2016, at 10:28 PM, Matt [email protected] wrote:

Has there been any progress on this?

It would be super useful to be able to easily drag points and shapes around a Bokeh chart… which also implies being able to “select” the drawing object to drag… perhaps showing “handles” or some other selected state / indicator.

On Monday, May 18, 2015 at 10:36:44 AM UTC-4, Pythonic wrote:

The question in short

I would like to click-and-drag single glyphs in a server-hosted scatter, and make sure that the (x,y) coordinates of the glyph are updated on server side.

(for full clarity this is not a use of the “Pan” tool. This mpld3 example shows the click-and-drag behaviour I refer to, and the image below comes from this SO question)

Context of the question

As Bokeh introduced a few interesting widgets (Tables, Sliders,…) I am seeking to move a professional application from a desktop environment based on Matplotib+PyQt, to a Heroku + Flask + Bokeh-server solution. To do this, I need to be able to click-and-drag elements of a chart like in the mpld3 example linked above, or in this matplotlib example). This is a “bokeh for webapp” question (and to be clear, being able to have basic pyqt-like widgets on the web without having to deal directly with stuff like extjs is absolutely amazing).

Reference documentation

This issue has been touched on already here in this group, but I need some help wrapping these elements together.


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0ea0c569-ba98-46c2-9ff6-56e26561a3f1%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Thanks for posting this! And thank you Bryan for your reply… sounds like a great vision for extensions to Bokeh.

I look forward to the BokehJS doc’s and potential examples.

Selection and dragging of glyphs and other objects do seem to me to be such basic and powerful functions (creating all types of exciting new utility) that they would warrant inclusion in Bokeh… just an opinion. :slight_smile:

I’m very thankful to all the Continuum Analytics developers for making Anaconda such a great free python distribution w/ amazing tools and libraries.

Keep up the great work! :slight_smile:

···

On Wednesday, June 8, 2016 at 1:13:05 PM UTC-4, [email protected] wrote:

Here’s an example of a draggable bar as a custom tool model:

https://gist.github.com/canavandl/e8e168541824a4a21ca51fa6f032a7f3

It doesn’t do exactly what you want, because it doesn’t include the hit testing necessary for selecting individual glyphs. But it should be a reasonable starting point.

On Wednesday, June 8, 2016 at 9:39:32 AM UTC-5, Bryan Van de ven wrote:

Hi Matt,

For now, the way forward on this is through custom models. We have not had occasion to mention or push the BokehJS API much until now, so this is an area where documentation is lagging. Adding a section to the user guide is high on my priority list. In the mean time, one of my colleagues just made a proof of concept of a custom drag tool model that could drag a span annotation. I will ping them to post some example code here.

In general, there’s an infinite number things that users might want, that are perfectly useful and reasonable things to want, but that we can’t get to in a timely manner because of resource constraints, or that we wouldn’t want to add to the core library (because we don’t want the library to balloon out of all proportion and because “yes is forever” in terms of maintenance). My vision with the extension protocol is that is eventually lead to a community collection of easily installable user-created functionality, ala Atom or Chrome extensions so that the community doesn’t have to “wait on us” to get what they need.

Bryan

On Jun 7, 2016, at 10:28 PM, Matt [email protected] wrote:

Has there been any progress on this?

It would be super useful to be able to easily drag points and shapes around a Bokeh chart… which also implies being able to “select” the drawing object to drag… perhaps showing “handles” or some other selected state / indicator.

On Monday, May 18, 2015 at 10:36:44 AM UTC-4, Pythonic wrote:

The question in short

I would like to click-and-drag single glyphs in a server-hosted scatter, and make sure that the (x,y) coordinates of the glyph are updated on server side.

(for full clarity this is not a use of the “Pan” tool. This mpld3 example shows the click-and-drag behaviour I refer to, and the image below comes from this SO question)

Context of the question

As Bokeh introduced a few interesting widgets (Tables, Sliders,…) I am seeking to move a professional application from a desktop environment based on Matplotib+PyQt, to a Heroku + Flask + Bokeh-server solution. To do this, I need to be able to click-and-drag elements of a chart like in the mpld3 example linked above, or in this matplotlib example). This is a “bokeh for webapp” question (and to be clear, being able to have basic pyqt-like widgets on the web without having to deal directly with stuff like extjs is absolutely amazing).

Reference documentation

This issue has been touched on already here in this group, but I need some help wrapping these elements together.


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0ea0c569-ba98-46c2-9ff6-56e26561a3f1%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

One note… I’m not totally sure if this was meant only as a “shell program” to insert one’s own data renderer, but when I run the given gist I get:

ERROR:/Users/Matt1/anaconda/lib/python3.5/site-packages/bokeh/core/validation/check.py:W-1001 (NO_DATA_RENDERERS): Plot has no data renderers: Plot, ViewModel:Plot, ref _id: e10785f1-348a-42d5-8bac-277e776427c3

Here’s what version of Python and Bokeh I’m running with:

$ python

Python 3.5.1 |Anaconda 2.4.0 (x86_64)| (default, Dec 7 2015, 11:24:55)

[GCC 4.2.1 (Apple Inc. build 5577)] on darwin

Type “help”, “copyright”, “credits” or “license” for more information.

import bokeh

bokeh.version

‘0.11.1’

···

On Wednesday, June 8, 2016 at 1:13:05 PM UTC-4, [email protected] wrote:

Here’s an example of a draggable bar as a custom tool model:

https://gist.github.com/canavandl/e8e168541824a4a21ca51fa6f032a7f3

It doesn’t do exactly what you want, because it doesn’t include the hit testing necessary for selecting individual glyphs. But it should be a reasonable starting point.

On Wednesday, June 8, 2016 at 9:39:32 AM UTC-5, Bryan Van de ven wrote:

Hi Matt,

For now, the way forward on this is through custom models. We have not had occasion to mention or push the BokehJS API much until now, so this is an area where documentation is lagging. Adding a section to the user guide is high on my priority list. In the mean time, one of my colleagues just made a proof of concept of a custom drag tool model that could drag a span annotation. I will ping them to post some example code here.

In general, there’s an infinite number things that users might want, that are perfectly useful and reasonable things to want, but that we can’t get to in a timely manner because of resource constraints, or that we wouldn’t want to add to the core library (because we don’t want the library to balloon out of all proportion and because “yes is forever” in terms of maintenance). My vision with the extension protocol is that is eventually lead to a community collection of easily installable user-created functionality, ala Atom or Chrome extensions so that the community doesn’t have to “wait on us” to get what they need.

Bryan

On Jun 7, 2016, at 10:28 PM, Matt [email protected] wrote:

Has there been any progress on this?

It would be super useful to be able to easily drag points and shapes around a Bokeh chart… which also implies being able to “select” the drawing object to drag… perhaps showing “handles” or some other selected state / indicator.

On Monday, May 18, 2015 at 10:36:44 AM UTC-4, Pythonic wrote:

The question in short

I would like to click-and-drag single glyphs in a server-hosted scatter, and make sure that the (x,y) coordinates of the glyph are updated on server side.

(for full clarity this is not a use of the “Pan” tool. This mpld3 example shows the click-and-drag behaviour I refer to, and the image below comes from this SO question)

Context of the question

As Bokeh introduced a few interesting widgets (Tables, Sliders,…) I am seeking to move a professional application from a desktop environment based on Matplotib+PyQt, to a Heroku + Flask + Bokeh-server solution. To do this, I need to be able to click-and-drag elements of a chart like in the mpld3 example linked above, or in this matplotlib example). This is a “bokeh for webapp” question (and to be clear, being able to have basic pyqt-like widgets on the web without having to deal directly with stuff like extjs is absolutely amazing).

Reference documentation

This issue has been touched on already here in this group, but I need some help wrapping these elements together.


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0ea0c569-ba98-46c2-9ff6-56e26561a3f1%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Thanks for sharing this, Luke!

···

On Wednesday, June 8, 2016 at 1:13:05 PM UTC-4, Luke Canavan wrote:

Here’s an example of a draggable bar as a custom tool model:

https://gist.github.com/canavandl/e8e168541824a4a21ca51fa6f032a7f3

It doesn’t do exactly what you want, because it doesn’t include the hit testing necessary for selecting individual glyphs. But it should be a reasonable starting point.

On Wednesday, June 8, 2016 at 9:39:32 AM UTC-5, Bryan Van de ven wrote:

Hi Matt,

For now, the way forward on this is through custom models. We have not had occasion to mention or push the BokehJS API much until now, so this is an area where documentation is lagging. Adding a section to the user guide is high on my priority list. In the mean time, one of my colleagues just made a proof of concept of a custom drag tool model that could drag a span annotation. I will ping them to post some example code here.

In general, there’s an infinite number things that users might want, that are perfectly useful and reasonable things to want, but that we can’t get to in a timely manner because of resource constraints, or that we wouldn’t want to add to the core library (because we don’t want the library to balloon out of all proportion and because “yes is forever” in terms of maintenance). My vision with the extension protocol is that is eventually lead to a community collection of easily installable user-created functionality, ala Atom or Chrome extensions so that the community doesn’t have to “wait on us” to get what they need.

Bryan

On Jun 7, 2016, at 10:28 PM, Matt [email protected] wrote:

Has there been any progress on this?

It would be super useful to be able to easily drag points and shapes around a Bokeh chart… which also implies being able to “select” the drawing object to drag… perhaps showing “handles” or some other selected state / indicator.

On Monday, May 18, 2015 at 10:36:44 AM UTC-4, Pythonic wrote:

The question in short

I would like to click-and-drag single glyphs in a server-hosted scatter, and make sure that the (x,y) coordinates of the glyph are updated on server side.

(for full clarity this is not a use of the “Pan” tool. This mpld3 example shows the click-and-drag behaviour I refer to, and the image below comes from this SO question)

Context of the question

As Bokeh introduced a few interesting widgets (Tables, Sliders,…) I am seeking to move a professional application from a desktop environment based on Matplotib+PyQt, to a Heroku + Flask + Bokeh-server solution. To do this, I need to be able to click-and-drag elements of a chart like in the mpld3 example linked above, or in this matplotlib example). This is a “bokeh for webapp” question (and to be clear, being able to have basic pyqt-like widgets on the web without having to deal directly with stuff like extjs is absolutely amazing).

Reference documentation

This issue has been touched on already here in this group, but I need some help wrapping these elements together.


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0ea0c569-ba98-46c2-9ff6-56e26561a3f1%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi everyone. I’m trying to build a Bokeh-based graph editor which would require this type of click-drag interaction for moving individual Circle glyphs and for creating new Segment glyphs between the Circle nodes.

Is there any timeline for when such functionality might be included as a new Tool perhaps?

I’ve tried to make Luke’s script work (after removing the troublesome and seemingly unused underscore requirement on line 13), but am now getting the following stacktrace:

Uncaught TypeError: Cannot read property ‘prototype’ of undefined

at extend (drag_tool:73)

at drag_tool:78

at Object.custom/bk_script_c0c9b7b003e743e69437bca7e078f01d.drag_tool (drag_tool:120)

at i (bokeh.min.js:1)

at l (bokeh.min.js:1)

at Object.custom/main (drag_tool:63)

at Object.i [as require] (bokeh.min.js:1)

at outer (drag_tool:45)

at drag_tool:59

(Note: I am running a copy of the code snippet saved into a drag_tool.py file using “bokeh serve --show drag_tool.py”)

Should I focus on developing something using JavaScript Callbacks to make the above features possible?

Thanks!
Shaun

···

On Saturday, August 20, 2016 at 1:10:02 AM UTC-7, Sean Law wrote:

Thanks for sharing this, Luke!

On Wednesday, June 8, 2016 at 1:13:05 PM UTC-4, Luke Canavan wrote:

Here’s an example of a draggable bar as a custom tool model:

https://gist.github.com/canavandl/e8e168541824a4a21ca51fa6f032a7f3

It doesn’t do exactly what you want, because it doesn’t include the hit testing necessary for selecting individual glyphs. But it should be a reasonable starting point.

On Wednesday, June 8, 2016 at 9:39:32 AM UTC-5, Bryan Van de ven wrote:

Hi Matt,

For now, the way forward on this is through custom models. We have not had occasion to mention or push the BokehJS API much until now, so this is an area where documentation is lagging. Adding a section to the user guide is high on my priority list. In the mean time, one of my colleagues just made a proof of concept of a custom drag tool model that could drag a span annotation. I will ping them to post some example code here.

In general, there’s an infinite number things that users might want, that are perfectly useful and reasonable things to want, but that we can’t get to in a timely manner because of resource constraints, or that we wouldn’t want to add to the core library (because we don’t want the library to balloon out of all proportion and because “yes is forever” in terms of maintenance). My vision with the extension protocol is that is eventually lead to a community collection of easily installable user-created functionality, ala Atom or Chrome extensions so that the community doesn’t have to “wait on us” to get what they need.

Bryan

On Jun 7, 2016, at 10:28 PM, Matt [email protected] wrote:

Has there been any progress on this?

It would be super useful to be able to easily drag points and shapes around a Bokeh chart… which also implies being able to “select” the drawing object to drag… perhaps showing “handles” or some other selected state / indicator.

On Monday, May 18, 2015 at 10:36:44 AM UTC-4, Pythonic wrote:

The question in short

I would like to click-and-drag single glyphs in a server-hosted scatter, and make sure that the (x,y) coordinates of the glyph are updated on server side.

(for full clarity this is not a use of the “Pan” tool. This mpld3 example shows the click-and-drag behaviour I refer to, and the image below comes from this SO question)

Context of the question

As Bokeh introduced a few interesting widgets (Tables, Sliders,…) I am seeking to move a professional application from a desktop environment based on Matplotib+PyQt, to a Heroku + Flask + Bokeh-server solution. To do this, I need to be able to click-and-drag elements of a chart like in the mpld3 example linked above, or in this matplotlib example). This is a “bokeh for webapp” question (and to be clear, being able to have basic pyqt-like widgets on the web without having to deal directly with stuff like extjs is absolutely amazing).

Reference documentation

This issue has been touched on already here in this group, but I need some help wrapping these elements together.


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0ea0c569-ba98-46c2-9ff6-56e26561a3f1%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

My question is being answered via a closed issue on Bokeh’s GitHub profile: https://github.com/bokeh/bokeh/issues/6503

···

On Thursday, June 15, 2017 at 8:44:04 PM UTC-7, Shaun Swanson wrote:

Hi everyone. I’m trying to build a Bokeh-based graph editor which would require this type of click-drag interaction for moving individual Circle glyphs and for creating new Segment glyphs between the Circle nodes.

Is there any timeline for when such functionality might be included as a new Tool perhaps?

I’ve tried to make Luke’s script work (after removing the troublesome and seemingly unused underscore requirement on line 13), but am now getting the following stacktrace:

Uncaught TypeError: Cannot read property ‘prototype’ of undefined

at extend (drag_tool:73)

at drag_tool:78

at Object.custom/bk_script_c0c9b7b003e743e69437bca7e078f01d.drag_tool (drag_tool:120)

at i (bokeh.min.js:1)

at l (bokeh.min.js:1)

at Object.custom/main (drag_tool:63)

at Object.i [as require] (bokeh.min.js:1)

at outer (drag_tool:45)

at drag_tool:59

(Note: I am running a copy of the code snippet saved into a drag_tool.py file using “bokeh serve --show drag_tool.py”)

Should I focus on developing something using JavaScript Callbacks to make the above features possible?

Thanks!
Shaun

On Saturday, August 20, 2016 at 1:10:02 AM UTC-7, Sean Law wrote:

Thanks for sharing this, Luke!

On Wednesday, June 8, 2016 at 1:13:05 PM UTC-4, Luke Canavan wrote:

Here’s an example of a draggable bar as a custom tool model:

https://gist.github.com/canavandl/e8e168541824a4a21ca51fa6f032a7f3

It doesn’t do exactly what you want, because it doesn’t include the hit testing necessary for selecting individual glyphs. But it should be a reasonable starting point.

On Wednesday, June 8, 2016 at 9:39:32 AM UTC-5, Bryan Van de ven wrote:

Hi Matt,

For now, the way forward on this is through custom models. We have not had occasion to mention or push the BokehJS API much until now, so this is an area where documentation is lagging. Adding a section to the user guide is high on my priority list. In the mean time, one of my colleagues just made a proof of concept of a custom drag tool model that could drag a span annotation. I will ping them to post some example code here.

In general, there’s an infinite number things that users might want, that are perfectly useful and reasonable things to want, but that we can’t get to in a timely manner because of resource constraints, or that we wouldn’t want to add to the core library (because we don’t want the library to balloon out of all proportion and because “yes is forever” in terms of maintenance). My vision with the extension protocol is that is eventually lead to a community collection of easily installable user-created functionality, ala Atom or Chrome extensions so that the community doesn’t have to “wait on us” to get what they need.

Bryan

On Jun 7, 2016, at 10:28 PM, Matt [email protected] wrote:

Has there been any progress on this?

It would be super useful to be able to easily drag points and shapes around a Bokeh chart… which also implies being able to “select” the drawing object to drag… perhaps showing “handles” or some other selected state / indicator.

On Monday, May 18, 2015 at 10:36:44 AM UTC-4, Pythonic wrote:

The question in short

I would like to click-and-drag single glyphs in a server-hosted scatter, and make sure that the (x,y) coordinates of the glyph are updated on server side.

(for full clarity this is not a use of the “Pan” tool. This mpld3 example shows the click-and-drag behaviour I refer to, and the image below comes from this SO question)

Context of the question

As Bokeh introduced a few interesting widgets (Tables, Sliders,…) I am seeking to move a professional application from a desktop environment based on Matplotib+PyQt, to a Heroku + Flask + Bokeh-server solution. To do this, I need to be able to click-and-drag elements of a chart like in the mpld3 example linked above, or in this matplotlib example). This is a “bokeh for webapp” question (and to be clear, being able to have basic pyqt-like widgets on the web without having to deal directly with stuff like extjs is absolutely amazing).

Reference documentation

This issue has been touched on already here in this group, but I need some help wrapping these elements together.


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/0ea0c569-ba98-46c2-9ff6-56e26561a3f1%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.